Function ButtonToggle

src/ButtonToggle.js:16–65

(props)

};

function ButtonToggle(props) {
  const [toggled, setToggled] = useState(props.defaultValue ?? false);
  const [focus, setFocus] = useState(false);

  const onBlur = useCallback(
    (e) => {
      if (props.onBlur) {
        props.onBlur(e);
      }
      setFocus(false);
    },
    [props.onBlur],
  );

  const onFocus = useCallback(
    (e) => {
      if (props.onFocus) {
        props.onFocus(e);
      }
      setFocus(true);
    },
    [props.onFocus],
  );

  const onClick = useCallback(
    (e) => {
      if (props.onClick) {
        props.onClick(e);
      }
      setToggled(!toggled);
    },
    [props.onClick],
  );

  const { className, ...attributes } = props;

  const classes = mapToCssModules(
    classNames(className, {
      focus: focus,
    }),
    props.cssModule,
  );

  return (
    <Button
      active={toggled}
      onBlur={onBlur}
      onFocus={onFocus}
      onClick={onClick}
      className={classes}
      {...attributes}
    />
  );