acud/lib/color-picker/colorPicker.js

acg react 组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactColor = require("react-color");
var _classnames = _interopRequireDefault(require("classnames"));
var _select = _interopRequireDefault(require("../select"));
var _input = _interopRequireDefault(require("../input"));
var _util = require("./util");
var _configProvider = require("../config-provider");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
 * @file
 * @author chenyaqiu@baidu.com
 */

;
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 ? _util.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["default"].useContext(_configProvider.ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls;
  var prefixCls = getPrefixCls('colorpicker', customPrefixCls);
  var _useState = (0, _react.useState)(defaultColor),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    curColor = _useState2[0],
    setCurColor = _useState2[1];
  var _useState3 = (0, _react.useState)(defaultColor === 'transparent' ? DEFAULT_RGB : defaultColor),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    curRgb = _useState4[0],
    setCurRgb = _useState4[1];
  var _useState5 = (0, _react.useState)(),
    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
    inputVal = _useState6[0],
    setInputVal = _useState6[1];
  var isTransparent = curColor === 'transparent';
  var isWhite = !isTransparent && curColor && WHITE_REG.test((0, _util.getHexWithAlpha)({
    hex: curColor
  }).toLowerCase());
  var isCustom = type === 'custom';
  var colorpickerClassName = (0, _classnames["default"])(prefixCls, (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-custom"), isCustom), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-default"), type === 'default'), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-simple"), type === 'simple'), {
    className: className
  });
  var handleChange = (0, _react.useCallback)(function (color) {
    setInputVal(color);
    if (!color || HEX_REG.test(color)) {
      setCurColor(color);
      setCurRgb(color);
      onChange && onChange(color);
    }
  }, [onChange]);
  var selectRender = (0, _react.useMemo)(function () {
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "colorpicker-dropdowns-render"
    }, curColor && /*#__PURE__*/_react["default"].createElement("div", {
      className: (0, _classnames["default"])('colorpicker-dropdowns-render-block', {
        'none': isTransparent,
        'white': isWhite
      }),
      style: !isTransparent && curColor ? {
        backgroundColor: curColor
      } : {}
    }), /*#__PURE__*/_react["default"].createElement("span", {
      className: "colorpicker-dropdowns-render-text"
    }, type !== 'simple' && !isTransparent ? curColor : ''))
    // eslint-disable-next-line react-hooks/exhaustive-deps
    ;
  }, [isTransparent, curColor]);
  var dropDownRender = (0, _react.useMemo)(function () {
    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isCustom && /*#__PURE__*/_react["default"].createElement(_input["default"], {
      className: "colorpicker-input",
      placeholder: inputPlaceholder,
      value: isTransparent ? undefined : inputVal || curColor,
      onChange: function onChange(e) {
        return handleChange(e.target.value);
      }
    }), /*#__PURE__*/_react["default"].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["default"].createElement("div", {
        key: color,
        className: (0, _classnames["default"])('colorpicker-dropdowns-color', (0, _defineProperty2["default"])({
          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["default"].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 = (0, _react.useMemo)(function () {
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "colorpicker-dropdowns-custom"
    }, /*#__PURE__*/_react["default"].createElement(_reactColor.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((0, _util.getHexWithAlpha)(color));
        onChange && onChange((0, _util.getHexWithAlpha)(color), color);
      }
    }), dropDownRender);
  }, [dropDownRender, curRgb, onChange]);
  (0, _react.useEffect)(function () {
    if (hasColor && color !== curColor) {
      setCurColor(color);
      setCurRgb(color);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [color, hasColor]);
  (0, _react.useEffect)(function () {
    curColor && setInputVal(undefined);
  }, [curColor]);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: colorpickerClassName,
    style: style
  }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
    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
  }));
};
var _default = exports["default"] = ColorPicker;