} from '../../helpers/tracker';
import { useTracker } from '../../hooks/tracker';
-const ToggleIcon = ({ controller, className, icons, svg }) => {
+const ToggleIcon = ({ controller, className, icons, svg, title, transform }) => {
const { setManualState, state } = useTracker();
const activeController = controller || ToggleIcon.nullController;
const active = activeController.getActive(state, icons);
const defaultIcon = activeController.getDefault(state, icons);
+ const icon = active || defaultIcon || icons[0];
const classNames = ['toggle-icon'];
if (active) {
classNames.push('active');
if (svg) {
return <g
className={classNames.join(' ')}
+ data-icon={icon}
onClick={(e) => {
activeController.handlePrimary(state, setManualState, icons);
e.preventDefault();
e.preventDefault();
e.stopPropagation();
}}
+ transform={transform}
>
- <ZeldaIcon name={active || defaultIcon || icons[0]} svg />
+ <ZeldaIcon name={icon} svg title={title} />
</g>;
}
return <span
e.stopPropagation();
}}
>
- <ZeldaIcon name={active || defaultIcon || icons[0]} />
+ <ZeldaIcon name={active || defaultIcon || icons[0]} title={title} />
</span>;
};
handleSecondary: doNothing,
};
+ToggleIcon.pinController = (pin, removePin) => ({
+ getActive: firstIcon,
+ getDefault: firstIcon,
+ handlePrimary: doNothing,
+ handleSecondary: () => removePin(pin),
+});
+
ToggleIcon.simpleController = {
getActive: highestActive,
getDefault: firstIcon,
}),
icons: PropTypes.arrayOf(PropTypes.string),
svg: PropTypes.bool,
+ title: PropTypes.string,
+ transform: PropTypes.string,
};
export default ToggleIcon;