react-color#TwitterPicker TypeScript Examples

ColorPicker: React.FC<IProps> = (props: IProps) => {
  const { onChange, onChangeComplete } = props;
  const handleChange = color => {
    if (onChange) {
      onChange(color);
    }
  };

  const handleChangeComplete = (color, _event) => {
    if (onChangeComplete) {
      onChangeComplete(color);
    }
  };

  return (
    <TwitterPicker
      width="240px"
      className={styles.customPicker}
      onChange={handleChange}
      onChangeComplete={handleChangeComplete}
      colors={COLOR_PICK_LIST}
      triangle="hide"
    />
  );
}

function Toolbox() {
  const [dropdown, setDropdown] = useState({
    displayColorPicker: false,
  })
  const [options, setOptions] = useState({
    backgroundColor: '#ffffff',
  })
  const { setCanvasBackgroundColor } = useCoreHandler()

  const handleClick = () => {
    setDropdown({ ...dropdown, displayColorPicker: !dropdown.displayColorPicker })
  }
  const handleClose = () => {
    setDropdown({ ...dropdown, displayColorPicker: false })
  }

  const popover: CSSProperties = {
    position: 'absolute',
    zIndex: 2,
  }
  const cover: CSSProperties = {
    position: 'fixed',
    top: '0px',
    right: '0px',
    bottom: '0px',
    left: '0px',
  }

  const onColorChange = color => {
    setCanvasBackgroundColor(color.hex)
    setOptions({ ...options, backgroundColor: color.hex })
  }
  return (
    <div className="editor-toolbox-container">
      <div className="editor-toolbox default">
        <div style={{ position: 'relative' }}>
          <div style={{ cursor: 'pointer' }} onClick={handleClick}>
            {options.backgroundColor === '#ffffff' ? (
              <img
                style={{ height: '30px', display: 'flex' }}
                src={emptyColorPlaceholder}
                alt="color picker"
              />
            ) : (
              <div style={{ background: options.backgroundColor }} className="editor-color-holder" />
            )}
          </div>

          {dropdown.displayColorPicker ? (
            <div style={popover}>
              <div style={cover} onClick={handleClose} />
              <TwitterPicker color={options.backgroundColor} onChange={onColorChange} />
            </div>
          ) : null}
        </div>
        <VerticalSeparator />
      </div>
    </div>
  )
}

ColorPicker: React.SFC<Props> = ({ ...props }) => {
  const [displayPicker, setDisplayPicker] = useState(false);
  const [colorHex, setColorHex] = useState('');
  const { t } = useTranslation();

  const { colorCode, name, helperText } = props;

  useEffect(() => {
    setColorHex(colorCode);
  }, [colorCode]);

  const handleChangeComplete = (color: any) => {
    setColorHex(color.hex);
    props.form.setFieldValue(props.field.name, color.hex);
  };

  const onClickAway = () => {
    setDisplayPicker(false);
  };

  return (
    <div className={styles.Container}>
      <div className={styles.ColorPicker} data-testid="ColorPicker">
        <div className={styles.ColorInput}>
          <Input type="text" placeholder={t('Select color')} name={name} value={colorHex} />
        </div>
        <ClickAwayListener onClickAway={onClickAway}>
          <div className={styles.ContainListener}>
            <div
              role="button"
              tabIndex={0}
              data-testid="ChooseColor"
              className={styles.ChooseColor}
              style={{
                backgroundColor: colorHex,
              }}
              onClick={() => setDisplayPicker(!displayPicker)}
              onKeyDown={() => setDisplayPicker(!displayPicker)}
            >
              &nbsp;
            </div>
            {helperText ? (
              <FormHelperText className={styles.HelperText}>{helperText}</FormHelperText>
            ) : null}
            {displayPicker ? (
              <TwitterPicker
                className={styles.PickerPanel}
                triangle="hide"
                onChangeComplete={handleChangeComplete}
              />
            ) : null}
          </div>
        </ClickAwayListener>
      </div>
    </div>
  );
}

EditorColorItem: React.FC<React.PropsWithChildren<Props>> = ({ keyName }) => {
  const theme = useTheme()
  const { updateCustomTheme } = useConfigs()
  const label = `${keyName}`
  const mainColor = useMemo(() => theme.palette[keyName], [theme.palette, keyName])
  const randomColors = useMemo(() => getRandomColors(), [])
  const colorChangeHandler = ({ hex }: ColorResult) => {
    updateCustomTheme({
      palette: { [keyName]: hex },
    })
  }

  const popoverContent = (color: string) => (
    <TwitterPicker
      triangle="hide"
      color={color}
      onChangeComplete={colorChangeHandler}
      colors={randomColors}
    />
  )
  return (
    <Popover
      content={() => popoverContent(mainColor)}
      portalClassName="editor-popover"
      offset={3}>
      <div className="editor-item">
        <div className="dot-box">
          <span className="dot" />
        </div>
        {label}
        <style jsx>{`
          .editor-item {
            background-color: transparent;
            width: auto;
            padding: 0 ${theme.layout.gapHalf};
            line-height: 2rem;
            display: inline-flex;
            align-items: center;
            border: 1px solid ${theme.palette.border};
            border-radius: ${theme.layout.radius};
            color: ${theme.palette.accents_5};
            margin-right: 0.75rem;
            margin-bottom: 0.5rem;
            cursor: pointer;
            transition: color 200ms ease;
          }

          :global(.editor-popover .inner) {
            padding: 0 !important;
          }

          :global(.editor-popover .twitter-picker) {
            box-shadow: none !important;
            border: 0 !important;
            background: transparent !important;
          }

          .editor-item:hover {
            color: ${theme.palette.accents_8};
          }

          .editor-item:hover .dot {
            transform: scale(1);
          }

          .dot-box,
          .dot {
            display: inline-flex;
            justify-content: center;
            align-items: center;
          }

          .dot-box {
            width: 1rem;
            height: 1rem;
            margin-right: 0.75rem;
          }

          .dot {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: ${mainColor};
            transform: scale(0.8);
            transition: transform 200ms ease;
          }
        `}</style>
      </div>
    </Popover>
  )
}