acud/es/color-picker/colorPicker.js

acg react 组件库

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
/**
 * @file
 * @author chenyaqiu@baidu.com
 */
import React, { useEffect, useState, useMemo, useCallback } from 'react';
import { ChromePicker } from 'react-color';
import classNames from 'classnames';
import Select from '../select';
import Input from '../input';
import { DEFAULT_COLORS, getHexWithAlpha } from './util';
import { ConfigContext } from '../config-provider';
;
var DEFAULT_RGB = {
  r: 0,
  g: 0,
  b: 0,
  a: 0
};
var WHITE_REG = /^#(fff|ffffff)([0-9a-f]{3})/;
var HEX_REG = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})([0-9A-Fa-f]{2})?$/;
var ColorPicker = function ColorPicker(props) {
  var defaultColor = props.defaultColor,
    _props$defaultColors = props.defaultColors,
    defaultColors = _props$defaultColors === void 0 ? DEFAULT_COLORS : _props$defaultColors,
    _props$disabled = props.disabled,
    disabled = _props$disabled === void 0 ? false : _props$disabled,
    _props$type = props.type,
    type = _props$type === void 0 ? 'default' : _props$type,
    color = props.color,
    className = props.className,
    style = props.style,
    _props$placeholder = props.placeholder,
    placeholder = _props$placeholder === void 0 ? '请选择色值' : _props$placeholder,
    _props$inputPlacehold = props.inputPlaceholder,
    inputPlaceholder = _props$inputPlacehold === void 0 ? '请输入hex色值' : _props$inputPlacehold,
    customPrefixCls = props.prefixCls,
    _props$allowClear = props.allowClear,
    allowClear = _props$allowClear === void 0 ? false : _props$allowClear,
    _props$dropdownStyle = props.dropdownStyle,
    dropdownStyle = _props$dropdownStyle === void 0 ? {
      minWidth: 240
    } : _props$dropdownStyle,
    onChange = props.onChange;
  var hasColor = 'color' in props;
  var _React$useContext = React.useContext(ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls;
  var prefixCls = getPrefixCls('colorpicker', customPrefixCls);
  var _useState = useState(defaultColor),
    _useState2 = _slicedToArray(_useState, 2),
    curColor = _useState2[0],
    setCurColor = _useState2[1];
  var _useState3 = useState(defaultColor === 'transparent' ? DEFAULT_RGB : defaultColor),
    _useState4 = _slicedToArray(_useState3, 2),
    curRgb = _useState4[0],
    setCurRgb = _useState4[1];
  var _useState5 = useState(),
    _useState6 = _slicedToArray(_useState5, 2),
    inputVal = _useState6[0],
    setInputVal = _useState6[1];
  var isTransparent = curColor === 'transparent';
  var isWhite = !isTransparent && curColor && WHITE_REG.test(getHexWithAlpha({
    hex: curColor
  }).toLowerCase());
  var isCustom = type === 'custom';
  var colorpickerClassName = classNames(prefixCls, _defineProperty({}, "".concat(prefixCls, "-custom"), isCustom), _defineProperty({}, "".concat(prefixCls, "-default"), type === 'default'), _defineProperty({}, "".concat(prefixCls, "-simple"), type === 'simple'), {
    className: className
  });
  var handleChange = useCallback(function (color) {
    setInputVal(color);
    if (!color || HEX_REG.test(color)) {
      setCurColor(color);
      setCurRgb(color);
      onChange && onChange(color);
    }
  }, [onChange]);
  var selectRender = useMemo(function () {
    return /*#__PURE__*/React.createElement("div", {
      className: "colorpicker-dropdowns-render"
    }, curColor && /*#__PURE__*/React.createElement("div", {
      className: classNames('colorpicker-dropdowns-render-block', {
        'none': isTransparent,
        'white': isWhite
      }),
      style: !isTransparent && curColor ? {
        backgroundColor: curColor
      } : {}
    }), /*#__PURE__*/React.createElement("span", {
      className: "colorpicker-dropdowns-render-text"
    }, type !== 'simple' && !isTransparent ? curColor : ''))
    // eslint-disable-next-line react-hooks/exhaustive-deps
    ;
  }, [isTransparent, curColor]);
  var dropDownRender = useMemo(function () {
    return /*#__PURE__*/React.createElement(React.Fragment, null, isCustom && /*#__PURE__*/React.createElement(Input, {
      className: "colorpicker-input",
      placeholder: inputPlaceholder,
      value: isTransparent ? undefined : inputVal || curColor,
      onChange: function onChange(e) {
        return handleChange(e.target.value);
      }
    }), /*#__PURE__*/React.createElement("div", {
      className: "colorpicker-dropdowns"
    }, defaultColors && defaultColors.map(function (color) {
      var isSelected = color === curColor;
      var isWhite = WHITE_REG.test(color.toLowerCase());
      var isTrans = color === 'transparent';
      return /*#__PURE__*/React.createElement("div", {
        key: color,
        className: classNames('colorpicker-dropdowns-color', _defineProperty({
          none: isTrans,
          white: isWhite
        }, 'colorpicker-dropdowns-color-selected', isSelected)),
        onClick: function onClick() {
          curColor !== color && setCurColor(color);
          isCustom && curColor !== color && setCurRgb(isTrans ? DEFAULT_RGB : color);
          onChange && onChange(isTrans ? '' : color);
        }
      }, /*#__PURE__*/React.createElement("div", {
        className: "colorpicker-dropdowns-color-block",
        style: !isTrans ? {
          backgroundColor: color
        } : {}
      }));
    })))
    // eslint-disable-next-line react-hooks/exhaustive-deps
    ;
  }, [isCustom, curColor, inputVal, defaultColors, onChange, isTransparent, inputPlaceholder]);
  var customDropdownRender = useMemo(function () {
    return /*#__PURE__*/React.createElement("div", {
      className: "colorpicker-dropdowns-custom"
    }, /*#__PURE__*/React.createElement(ChromePicker, {
      color: curRgb,
      onChangeComplete: function onChangeComplete(color) {
        var _a;
        setCurRgb(((_a = color === null || color === void 0 ? void 0 : color.rgb) === null || _a === void 0 ? void 0 : _a.a) === 1 ? color.hex : color.rgb);
        setCurColor(getHexWithAlpha(color));
        onChange && onChange(getHexWithAlpha(color), color);
      }
    }), dropDownRender);
  }, [dropDownRender, curRgb, onChange]);
  useEffect(function () {
    if (hasColor && color !== curColor) {
      setCurColor(color);
      setCurRgb(color);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [color, hasColor]);
  useEffect(function () {
    curColor && setInputVal(undefined);
  }, [curColor]);
  return /*#__PURE__*/React.createElement("div", {
    className: colorpickerClassName,
    style: style
  }, /*#__PURE__*/React.createElement(Select, {
    dropdownClassName: "colorpicker-dropdowns-con".concat(isCustom ? ' custom' : ''),
    mode: "multiple",
    placeholder: placeholder,
    maxTagCount: 1,
    allowClear: allowClear,
    disabled: disabled,
    tagRender: function tagRender() {
      return selectRender;
    },
    dropdownRender: function dropdownRender() {
      return isCustom ? customDropdownRender : dropDownRender;
    },
    dropdownStyle: dropdownStyle,
    value: curColor ? [curColor] : undefined,
    onClear: function onClear() {
      return handleChange('');
    },
    showSearch: false
  }));
};
export default ColorPicker;