react-icons#IconContext TypeScript Examples

FrameworkButton: React.FC<FrameworkButtonProps> = (props) => {
  const { logo, color, active, selectable, notSelectableToolTip } = props;
  const onClick =
    props.onClick ||
    (() => {
      /* empty function */
    });

  return (
    <div
      className={clsx(styles.Container, { [styles.Container_Active]: active })}
      style={{ cursor: selectable ? 'pointer' : 'default' }}
      onClick={selectable ? onClick : undefined}>
      {!active && <div className={styles.LogoContainerOverlay} />}
      <div
        className={styles.LogoContainer}
        style={{ border: `2px solid ${color}` }}>
        <IconContext.Provider value={{ color: color, size: '1.5rem' }}>
          {logo}
        </IconContext.Provider>
      </div>
      {!selectable && notSelectableToolTip && (
        <span
          className={styles.TooltipText}
          style={{ border: `1px solid ${color}` }}>
          {notSelectableToolTip}
        </span>
      )}
    </div>
  );
}

DownloadButton: React.FC<Props> = ({ downloadHandler }) => {
    const themeContext = useContext(ThemeContext);

    const onClick = (e: React.MouseEvent<HTMLElement>) => {
        downloadHandler();
    }
    return (
        <IconContext.Provider value={{ color: themeContext.colors.buttonIcons }}>
            <Root>
                <Button onClick={onClick}>
                    Download iCal
            </Button>
            </Root>
        </IconContext.Provider>
    )
}

UndoButton: React.FC<Props> = ({ undoHandler, disabled }) => {
    const themeContext = useContext(ThemeContext);

    const onClick = (e: React.MouseEvent<HTMLElement>) => {
        undoHandler();
    }
    return (
        <IconContext.Provider value={{ color: themeContext.colors.buttonIcons }}>
            <Root>
                <Button onClick={onClick} className={disabled ? "disabled" : ""} disabled={disabled}>
                    Undo
                </Button>
            </Root>
        </IconContext.Provider>
    )
}

HomeButton: React.FC<Props> = () => {
    const themeContext = useContext(ThemeContext);
    return (
        <IconContext.Provider value={{ color: themeContext.colors.buttonIcons }}>
            <Root>
                <Link href="./about">
                    <FaInfoCircle style={{ verticalAlign: 'middle' }} />
                </Link>
            </Root>
        </IconContext.Provider>
    )
}

GitHubButton: React.FC<Props> = () => {
    const themeContext = useContext(ThemeContext);
    return (
        <IconContext.Provider value={{ color: themeContext.colors.buttonIcons }}>
            <Root>
                <Link href="https://github.com/nanreh/calendar-hack">
                    <FaGithub style={{ verticalAlign: 'middle' }} />
                </Link>
            </Root>
        </IconContext.Provider>
    )
}

HomeButton: React.FC<Props> = () => {
    const themeContext = useContext(ThemeContext);
    return (
        <IconContext.Provider value={{ color: themeContext.colors.buttonIcons }}>
            <Root>
                <Link href="/">
                    <FaHome style={{ verticalAlign: 'middle' }} />
                </Link>
            </Root>
        </IconContext.Provider>
    )
}

ShareButton: React.FC<Props> = ({ }) => {
    const themeContext = useContext(ThemeContext);

    const shareLink = (): void => {
        let newVariable: any;
        newVariable = window.navigator;
        if (newVariable && newVariable.share) {
            if (newVariable && newVariable.share) {
                newVariable.share({
                    title: 'defy.org',
                    text: 'Check this out',
                    url: `${window.location.href}`,
                })
                    .then(() => console.log('Successful share'))
                    .catch((error: Error) => console.log('Error sharing', error));
            }
        } else {
            copy(window.location.href);
            alert('Link has been copied to clipboard!');
        }
    }

    return (
        <IconContext.Provider value={{ color: themeContext.colors.buttonIcons }}>
            <Root onClick={shareLink}>
                <IoMdShare style={{ verticalAlign: 'middle' }} />
            </Root>
        </IconContext.Provider>
    )
}

UnitsButtons: React.FC<Props> = ({ units, unitsChangeHandler }) => {
    const themeContext = useContext(ThemeContext);

    const changeCb = (event: React.FormEvent<HTMLInputElement>) => {
        console.log("changeCb: " + event.currentTarget.value);
        const newSelection = "mi" === event.currentTarget.value ? 'mi' : 'km';
        unitsChangeHandler(newSelection);
    }

    return (
        <IconContext.Provider value={{ color: themeContext.colors.buttonIcons }}>
            <Root>
                <Radio
                    id="radio-mi"
                    name="radio-units"
                    value="mi"
                    labelTxt="Mi"
                    changeCb={changeCb}
                    currentValue={units}
                />
                <Radio
                    id="radio-km"
                    name="radio-units"
                    value="km"
                    labelTxt="Km"
                    changeCb={changeCb}
                    currentValue={units}
                />
            </Root>
        </IconContext.Provider>
    )
}

function SideBar(): JSX.Element {
  const WBContext = useContext(WorkBenchContext);

  function VisualizeScenario() {
    console.log('clicked');
    WBContext.dispatch({ type: ACTIONS_IDS.visualizeScenarioFile });
  }
  const [RunIconStyle, SetRunStyle] = useState({
    color: 'white',
  });
  function onEnterButton() {
    SetRunStyle({ ...RunIconStyle, color: 'yellow' });
  }

  function onExitButton() {
    SetRunStyle({ ...RunIconStyle, color: 'white' });
  }

  return (
    <>
      <div
        style={{
          left: 0,
          width: 48,
          height: '100%',
          backgroundColor: '#1F2937',
          border: '1px solid #374151',
        }}
        className="Sidebar"
      >
        <IconContext.Provider
          value={{ className: 'global-class-name', size: '30' }}
        >
          <div style={{ marginBottom: 'auto', padding: '6px 6px' }}>
            <button
              onPointerEnter={onEnterButton}
              onPointerLeave={onExitButton}
              onClick={VisualizeScenario}
              style={{
                backgroundColor: 'transparent',
                backgroundRepeat: 'no-repeat',
                border: 'none',
                cursor: 'pointer',
                overflow: 'hidden',
                width: 'inherit',
                padding: 0,
              }}
              type="button"
            >
              <VscRunAll style={RunIconStyle} />
            </button>
          </div>
        </IconContext.Provider>
      </div>
    </>
  );
}

LongPressButton: React.FC<Props> = ({ activeCb, doneCb, type }) => {

    const timer = useCallback(
        () => {
            timerID = window.setInterval(function doCb() {
                activeCb();
            }, 100);
        },
        [activeCb],
    );

    function pressingDown(e: React.MouseEvent | React.TouchEvent) {
        timer();
        console.log(e);
        e.preventDefault();
    }

    function notPressingDown(e: React.MouseEvent | React.TouchEvent) {
        // Stop the timer
        if (undefined !== timerID) {
            clearInterval(timerID);
        }
        doneCb();
    }

    // create element ref
    const innerRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (innerRef && innerRef.current) {
            const div = innerRef.current;
            const cancel = (event: TouchEvent) => event.preventDefault();
            div.addEventListener('touchstart', cancel, { passive: false });
            div.addEventListener('touchend', cancel, { passive: false });
            return () => {
                div.removeEventListener('touchend', cancel);
            }
        }
    }, []);

    const themeContext = useContext(ThemeContext);
    return (
        <IconContext.Provider value={{ color: themeContext.colors.buttonIcons, size: "1.5em" }}>
            <Root ref={innerRef} onMouseDown={pressingDown} onMouseUp={notPressingDown} onMouseLeave={notPressingDown}
                onTouchStart={pressingDown} onTouchEnd={notPressingDown}>
                {type === 'plus' && <FaPlus style={{ verticalAlign: 'middle' }} />}
                {type === 'minus' && <FaMinus style={{ verticalAlign: 'middle' }} />}
            </Root>
        </IconContext.Provider>
    )
}