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

Color Block Picker

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _colorConvert = require("@uiw/color-convert");
var _reactColorEditableInput = _interopRequireDefault(require("@uiw/react-color-editable-input"));
var _reactColorSwatch = _interopRequireDefault(require("@uiw/react-color-swatch"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["prefixCls", "className", "style", "color", "colors", "showTriangle", "onChange"];
var CORLER_HEX = ['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555', '#dce775', '#ff8a65', '#ba68c8'];
var Block = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
  var _props$prefixCls = props.prefixCls,
    prefixCls = _props$prefixCls === void 0 ? 'w-color-block' : _props$prefixCls,
    className = props.className,
    style = props.style,
    color = props.color,
    _props$colors = props.colors,
    colors = _props$colors === void 0 ? CORLER_HEX : _props$colors,
    _props$showTriangle = props.showTriangle,
    showTriangle = _props$showTriangle === void 0 ? true : _props$showTriangle,
    onChange = props.onChange,
    other = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var hsva = typeof color === 'string' && (0, _colorConvert.validHex)(color) ? (0, _colorConvert.hexToHsva)(color) : color;
  var hex = color ? (0, _colorConvert.hsvaToHex)(hsva) : '';
  var handleChange = function handleChange(hsv) {
    onChange && onChange((0, _colorConvert.color)(hsv));
  };
  var handleHex = function handleHex(value, evn) {
    if (typeof value === 'string' && (0, _colorConvert.validHex)(value) && /(3|6)/.test(String(value.replace(/^#/, '').length))) {
      onChange && onChange((0, _colorConvert.color)((0, _colorConvert.hexToHsva)(value)));
    }
  };
  var stylePointer = (0, _objectSpread2["default"])({
    '--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__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
    ref: ref,
    className: [prefixCls, className].filter(Boolean).join(' '),
    style: stylePointer
  }, other), {}, {
    children: [showTriangle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      style: {
        width: 0,
        height: 0,
        borderStyle: 'solid',
        borderWidth: '0 10px 10px',
        borderColor: "transparent transparent ".concat(hex),
        position: 'absolute',
        top: -10,
        left: '50%',
        marginLeft: -10
      }
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      title: hex,
      style: {
        backgroundColor: "".concat(hex),
        color: (0, _colorConvert.getContrastingColor)(hex),
        height: 110,
        fontSize: 18,
        borderRadius: '6px 6px 0 0',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
      },
      children: hex.toLocaleUpperCase()
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColorSwatch["default"], {
      colors: colors,
      color: hex,
      style: {
        paddingLeft: 10,
        paddingTop: 10
      },
      rectProps: {
        style: {
          marginRight: 10,
          marginBottom: 10,
          borderRadius: 4,
          height: 22,
          width: 22
        }
      },
      onChange: handleChange
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColorEditableInput["default"], {
      value: hex.toLocaleUpperCase(),
      onChange: function onChange(evn, val) {
        return handleHex(val, evn);
      },
      onBlur: function 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';
var _default = exports["default"] = Block;
module.exports = exports.default;