react-icons#IconContext TypeScript Examples

The following examples show how to use react-icons#IconContext. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx    From documentation with MIT License 6 votes vote down vote up 
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>
  );
}
Example #2
Source File: DownloadButton.tsx    From calendar-hack with MIT License 6 votes vote down vote up 
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>
    )
}
Example #3
Source File: UndoButton.tsx    From calendar-hack with MIT License 6 votes vote down vote up 
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>
    )
}
Example #4
Source File: AboutButton.tsx    From calendar-hack with MIT License 6 votes vote down vote up 
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>
    )
}
Example #5
Source File: GitHubButton.tsx    From calendar-hack with MIT License 6 votes vote down vote up 
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>
    )
}
Example #6
Source File: HomeButton.tsx    From calendar-hack with MIT License 6 votes vote down vote up 
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>
    )
}
Example #7
Source File: ShareButton.tsx    From calendar-hack with MIT License 6 votes vote down vote up 
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>
    )
}
Example #8
Source File: UnitsButtons.tsx    From calendar-hack with MIT License 6 votes vote down vote up 
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>
    )
}
Example #9
Source File: SideBar.tsx    From simulator with Apache License 2.0 5 votes vote down vote up 
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>
    </>
  );
}
Example #10
Source File: LongPressButton.tsx    From calendar-hack with MIT License 5 votes vote down vote up 
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>
    )
}