react-color BlockPicker TypeScript Examples

Source File: color.tsx From ui with GNU Affero General Public License v3.0

6 votes

InputColor: React.FC<Props> = (props) => {
  useEffect(() => {
    if (!props.value) {
      props.onChange('#FFF')
    }
  }, [props.value])

  return (
    <BlockPicker
      triangle={'hide'}
      width={'100%'}
      color={props.value}
      onChange={(e: { hex: string }) => props.onChange(e.hex)}
      styles={{
        default: {
          card: {
            flexDirection: 'row',
            display: 'flex',
            boxShadow: 'none',
          },
          head: {
            flex: 1,
            borderRadius: 6,
            height: 'auto',
          },
        },
      }}
    />
  )
}

Source File: IconColor.tsx From iconsax-react with MIT License

6 votes

IconColor = () => {
  const { state, dispatch } = useIconContext()
  const [isOpen, setIsOpen] = useState(false)
  const colorRef = useRef(null)

  useOnClickOutside(colorRef, () => setIsOpen(false))

  const handleChangeCOmplete: ColorChangeHandler = (color) => {
    dispatch({
      type: 'CHANGE_COLOR',
      payload: color.hex,
    })
  }
  return (
    <div className="relative">
      <div
        onClick={() => setIsOpen((prv) => !prv)}
        style={{
          backgroundColor: state.color,
          textShadow: '1px 1px 4px black',
        }}
        className="h-10 grid place-items-center px-4 rounded-xl cursor-pointer"
      >
        <span className="hidden w-16 text-center sm:block">{state.color}</span>
      </div>
      {isOpen && (
        <div ref={colorRef} className="absolute top-0 right-0">
          <BlockPicker
            className="shadow-2xl"
            color={state.color}
            onChangeComplete={handleChangeCOmplete}
            triangle="hide"
          />
        </div>
      )}
    </div>
  )
}

Source File: Config.tsx From ant-extensions with MIT License

4 votes

Config: React.FC = React.memo(() => {
  const { t } = useTranslation(I18nKey);
  const { selected, updateConfig } = useContext(Context);

  const updateField = (key: string, value: AnyObject) => {
    selected && updateConfig(selected.id, key as AnyObject, value);
  };

  return selected ? (
    <div className="ant-ext-pm__aside--form">
      <Form layout="vertical" size="small">
        {[EnumTypes.TILE, EnumTypes.DIVIDER, EnumTypes.HEADING].includes(selected.type) && (
          <>
            <Form.Item label={t("config.title")}>
              <Input
                value={selected.title}
                onChange={(e) => updateField("title", e.target.value)}
              />
            </Form.Item>
            <Row>
              <Col flex="auto">
                <label>{t("config.color")}</label>
              </Col>
              <Col>
                <Popover
                  placement="leftTop"
                  trigger="click"
                  overlayStyle={{ color: selected.color }}
                  overlayClassName="ant-ext-pm__colorPicker"
                  content={
                    <BlockPicker
                      colors={colors}
                      color={selected.color}
                      onChangeComplete={(c) => updateField("color", c.hex)}
                    />
                  }
                >
                  <Button>
                    <div style={{ width: 24, height: 16, backgroundColor: selected.color }} />
                  </Button>
                </Popover>
              </Col>
            </Row>
            <Row>
              <Col flex="auto">
                <label>{t("config.icon")}</label>
              </Col>
              <Col>{selected.iconCls && <i className={selected.iconCls} />}</Col>
            </Row>
            <Form.Item>
              <Input
                value={selected.iconCls}
                onChange={(e) => updateField("iconCls", e.target.value)}
              />
            </Form.Item>
          </>
        )}
        {[EnumTypes.DIVIDER, EnumTypes.HEADING].includes(selected.type) && (
          <Form.Item label={t("config.size")}>
            <InputNumber
              min={8}
              max={42}
              value={selected.size || 13}
              onChange={(e) => updateField("size", e)}
            />
          </Form.Item>
        )}
        {selected.type === EnumTypes.COL && (
          <Form.Item label={t("config.colSpan")}>
            <InputNumber
              min={1}
              max={12}
              value={selected.colSpan}
              onChange={(e) => updateField("colSpan", e)}
            />
          </Form.Item>
        )}
        {selected.type === EnumTypes.ROW && (
          <Form.Item label={t("config.height")}>
            <Input.Group>
              <Checkbox
                checked={selected.height === "auto"}
                onChange={(e) => [updateField("height", e.target.checked ? "auto" : 32)]}
              >
                Auto
              </Checkbox>
              <InputNumber
                min={32}
                max={800}
                disabled={selected.height === "auto"}
                value={selected.height}
                onChange={(e) => updateField("height", e)}
              />
            </Input.Group>
          </Form.Item>
        )}
        {selected.type === EnumTypes.TILE && (
          <>
            <Form.Item label={t("config.info")}>
              <Input.TextArea
                rows={5}
                value={selected.info}
                onChange={(e) => updateField("info", e.target.value)}
              />
            </Form.Item>
            <Row>
              <Col flex="auto">
                <label>{t("config.expand")}</label>
              </Col>
              <Col>
                <Switch
                  checked={selected.expandable}
                  onChange={(checked) => updateField("expandable", checked)}
                />
              </Col>
            </Row>
          </>
        )}
      </Form>
    </div>
  ) : null;
})

react-color#BlockPicker TypeScript Examples