@uiw/react-color-block/esm/index.js

Color Block Picker

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["prefixCls", "className", "style", "color", "colors", "showTriangle", "onChange"];
import React from 'react';
import { color as handleColor, validHex, hexToHsva, hsvaToHex, getContrastingColor } from '@uiw/color-convert';
import EditableInput from '@uiw/react-color-editable-input';
import Swatch from '@uiw/react-color-swatch';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var CORLER_HEX = ['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555', '#dce775', '#ff8a65', '#ba68c8'];
var Block = /*#__PURE__*/React.forwardRef((props, ref) => {
  var {
      prefixCls = 'w-color-block',
      className,
      style,
      color,
      colors = CORLER_HEX,
      showTriangle = true,
      onChange
    } = props,
    other = _objectWithoutPropertiesLoose(props, _excluded);
  var hsva = typeof color === 'string' && validHex(color) ? hexToHsva(color) : color;
  var hex = color ? hsvaToHex(hsva) : '';
  var handleChange = hsv => {
    onChange && onChange(handleColor(hsv));
  };
  var handleHex = (value, evn) => {
    if (typeof value === 'string' && validHex(value) && /(3|6)/.test(String(value.replace(/^#/, '').length))) {
      onChange && onChange(handleColor(hexToHsva(value)));
    }
  };
  var stylePointer = _extends({
    '--block-background-color': 'rgb(255, 255, 255)',
    '--block-box-shadow': 'rgb(0 0 0 / 10%) 0 1px',
    width: 170,
    borderRadius: 6,
    background: 'var(--block-background-color)',
    boxShadow: 'var(--block-box-shadow)',
    position: 'relative'
  }, style);
  return /*#__PURE__*/_jsxs("div", _extends({
    ref: ref,
    className: [prefixCls, className].filter(Boolean).join(' '),
    style: stylePointer
  }, other, {
    children: [showTriangle && /*#__PURE__*/_jsx("div", {
      style: {
        width: 0,
        height: 0,
        borderStyle: 'solid',
        borderWidth: '0 10px 10px',
        borderColor: "transparent transparent " + hex,
        position: 'absolute',
        top: -10,
        left: '50%',
        marginLeft: -10
      }
    }), /*#__PURE__*/_jsx("div", {
      title: hex,
      style: {
        backgroundColor: "" + hex,
        color: getContrastingColor(hex),
        height: 110,
        fontSize: 18,
        borderRadius: '6px 6px 0 0',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
      },
      children: hex.toLocaleUpperCase()
    }), /*#__PURE__*/_jsx(Swatch, {
      colors: colors,
      color: hex,
      style: {
        paddingLeft: 10,
        paddingTop: 10
      },
      rectProps: {
        style: {
          marginRight: 10,
          marginBottom: 10,
          borderRadius: 4,
          height: 22,
          width: 22
        }
      },
      onChange: handleChange
    }), /*#__PURE__*/_jsx(EditableInput, {
      value: hex.toLocaleUpperCase(),
      onChange: (evn, val) => handleHex(val, evn),
      onBlur: evn => {
        var value = evn.target.value;
        evn.target.value = value.slice(0, 6);
        handleHex(value.slice(0, 6), evn);
      },
      inputStyle: {
        height: 22,
        outline: 0,
        borderRadius: 3,
        padding: '0 7px'
      },
      style: {
        padding: 10,
        paddingTop: 0,
        borderRadius: '0 0 6px 6px'
      }
    })]
  }));
});
Block.displayName = 'Block';
export default Block;