mobile-more/lib/components/BizColorPicker/index.js

基于 antd-mobile v5 扩展移动端 UI 组件

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _ut = require("ut2");
var _classnames = _interopRequireDefault(require("classnames"));
var _rcHooks = require("rc-hooks");
var _antdMobile = require("antd-mobile");
var _tinycolor = _interopRequireDefault(require("tinycolor2"));
var _reactColor = require("@uiw/react-color");
var _config = require("../../config");
require("./index.css");
var prefixCls = "".concat(_config.prefixClass, "-color-picker");
var triggerPrefixCls = "".concat(prefixCls, "-trigger");
var colorBlockPrefixCls = "".concat(prefixCls, "-color-block");
var TRANSPARENT_VALUE = '#00000000';
var TRANSPARENT_TEXT = 'transparent';
var EMPTY_VALUE = TRANSPARENT_VALUE;
var EMPTY_TEXT = 'none';
var COLOR_FORMAT_MAP = {
  rgb: 'rgb',
  hex: 'hex',
  hsl: 'hsl'
};

/**颜色值或对象 */

/**颜色格式 */

var INPUT_TYPE_MAP = {
  rgb: _reactColor.ChromeInputType.RGBA,
  hex: _reactColor.ChromeInputType.HEXA,
  hsl: _reactColor.ChromeInputType.HSLA
};

/**
 * 将颜色转换为十六进制文本格式。
 *
 * @param str 颜色字符串
 * @returns 十六进制文本格式的颜色字符串
 */
function toHex8String(str) {
  return (0, _reactColor.validHex)(str) ? str : (0, _tinycolor.default)(str).toHex8String(); // 使用 tinycolor 可以处理颜色名称
}

/**
 * 将颜色转换为颜色对象。
 *
 * @param value 颜色值或对象
 * @returns 颜色对象
 */
function wrapColor(value) {
  if (!value) {
    return (0, _reactColor.color)(EMPTY_VALUE);
  } else if ((0, _ut.isString)(value)) {
    var hex8 = value.toLowerCase() === TRANSPARENT_TEXT ? TRANSPARENT_VALUE : toHex8String(value);
    return (0, _reactColor.color)(hex8);
  }
  return value;
}

/**
 * 将颜色转换为十六进制文本格式。
 *
 * @param color 颜色值或对象
 * @returns 十六进制文本格式的颜色字符串
 * @example
 * colorToHexString('red'); // '#ff0000'
 * colorToHexString('rgb(230, 0, 0)'); // '#e60000'
 * colorToHexString('rgba(230, 0, 0, 0.5)'); // '#e6000080'
 * colorToHexString({ hex: '#e60000', hexa: '#e60000ff', hsva: { ..., a: 1 }, ... }) // '#e60000'
 * colorToHexString({ hex: '#e60000', hexa: '#e6000080', hsva: { ..., a: 0.5 }, ... }) // '#e6000080'
 */
function colorToHexString(color) {
  var colorRet = wrapColor(color);
  return (0, _ut.round)(colorRet.rgba.a, 2) === 1 ? colorRet.hex : colorRet.hexa;
}

/**
 * 将颜色转换为 rgb 字符串格式。
 *
 * 如果透明度不为 1 ，则在 rgb 字符串格式的颜色字符串后添加透明度值。
 *
 * @param color 颜色值或对象
 * @returns rgb 字符串格式的颜色字符串
 * @example
 * colorToRgbString('red'); // 'rgb(255, 0, 0)'
 * colorToRgbString('#e60000'); // 'rgb(230, 0, 0)'
 * colorToRgbString('#e6000080'); // 'rgb(230, 0, 0, 0.5)'
 * colorToRgbString({ hex: '#e60000', hexa: '#e60000ff', hsva: { ..., a: 1 }, ... }) // 'rgb(230, 0, 0)'
 * colorToRgbString({ hex: '#e60000', hexa: '#e6000080', hsva: { ..., a: 0.5 }, ... }) // 'rgba(230, 0, 0, 0.5)'
 */
function colorToRgbString(color) {
  var colorRet = wrapColor(color);
  var rgbString = (0, _ut.round)(colorRet.rgb.r) + ', ' + (0, _ut.round)(colorRet.rgb.g) + ', ' + (0, _ut.round)(colorRet.rgb.b);
  var roundA = (0, _ut.round)(colorRet.rgba.a, 2);
  return roundA === 1 ? 'rgb(' + rgbString + ')' : 'rgba(' + rgbString + ', ' + roundA + ')';
}

/**
 * 将颜色转换为 hsl 字符串格式。
 *
 * 如果透明度不为 1 ，则在 hsl 字符串格式的颜色字符串后添加透明度值。
 *
 * @param color 颜色值或对象
 * @returns hsl 字符串格式的颜色字符串
 * @example
 * colorToHslString('red'); // 'hsl(0, 100%, 50%)'
 * colorToHslString('#e60000'); // 'hsl(0, 100%, 45%)'
 * colorToHslString('#e6000080'); // 'hsla(0, 100%, 45%, 0.5)'
 * colorToHslString({ hex: '#e60000', hexa: '#e60000ff', hsva: { ..., a: 1 }, ... }) // 'hsl(0, 100%, 45%)'
 * colorToHslString({ hex: '#e60000', hexa: '#e6000080', hsva: { ..., a: 0.5 }, ... }) // 'hsla(0, 100%, 45%, 0.5)'
 */
function colorToHslString(color) {
  var colorRet = wrapColor(color);
  var hslString = (0, _ut.round)(colorRet.hsl.h) + ', ' + (0, _ut.round)(colorRet.hsl.s) + '%, ' + (0, _ut.round)(colorRet.hsl.l) + '%';
  var roundA = (0, _ut.round)(colorRet.hsla.a, 2);
  return roundA === 1 ? 'hsl(' + hslString + ')' : 'hsla(' + hslString + ', ' + roundA + ')';
}

/**
 * 将颜色转换为文本格式。
 *
 * @param color 颜色值或对象
 * @param options 选项，选填。
 * @param options.format 颜色格式。可选`hex`、`rgb`、`hsl`，默认`hex`。
 * @param options.emptyText 空值文本。默认`none`。
 * @param options.transparentText 透明文本。默认`transparent`。
 * @returns 文本
 * @example
 *
 * // Falsy 值，返回 emptyText
 * toText(); // 'none'
 * toText(''); // 'none'
 * toText('', { emptyText: '未选择' }); // '未选择'
 *
 * // 'transparent' 返回 transparentText
 * toText('transparent'); // 'transparent'
 * toText('transparent', { transparentText: '透明' }); // '透明'
 *
 * // 颜色值为字符串或对象
 * toText('red'); // '#ff0000'
 * toText('red', { format: 'hsl' }); // 'hsl(0, 100%, 50%)'
 * toText('#e6000080', { format: 'hsl' }); // 'hsla(0, 100%, 45%, 0.5)'
 *
 * const color1 = { hex: '#e60000', hexa: '#e60000ff', hsva: { ..., a: 1 }, ... };
 * toText(color1); // '#e60000'
 * toText(color1, { format: 'rgb' }); // 'rgb(230, 0, 0)'
 * toText(color1, { format: 'hsl' }); // 'hsl(0, 100%, 45%)'
 *
 * const color2 = { hex: '#e60000', hexa: '#e6000080', hsva: { ..., a: 0.5 }, ... };
 * toText(color2); // '#e6000080'
 * toText(color2, { format: 'rgb' }); // 'rgba(230, 0, 0, 0.5)'
 * toText(color2, { format: 'hsl' }); // 'hsla(0, 100%, 45%, 0.5)'
 */
function toText(value) {
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var _options$format = options.format,
    format = _options$format === void 0 ? COLOR_FORMAT_MAP.hex : _options$format,
    _options$emptyText = options.emptyText,
    emptyText = _options$emptyText === void 0 ? EMPTY_TEXT : _options$emptyText,
    _options$transparentT = options.transparentText,
    transparentText = _options$transparentT === void 0 ? TRANSPARENT_TEXT : _options$transparentT;
  if (!value) {
    return emptyText;
  }
  if ((0, _ut.isString)(value) && value.toLowerCase() === TRANSPARENT_TEXT) {
    return transparentText;
  }
  if (format === COLOR_FORMAT_MAP.rgb) {
    return colorToRgbString(value);
  }
  if (format === COLOR_FORMAT_MAP.hsl) {
    return colorToHslString(value);
  }
  return colorToHexString(value);
}
var BizColorPicker = function BizColorPicker(props) {
  var _props$format = props.format,
    format = _props$format === void 0 ? COLOR_FORMAT_MAP.hex : _props$format,
    showText = props.showText,
    readOnly = props.readOnly,
    disabled = props.disabled,
    children = props.children,
    _props$emptyText = props.emptyText,
    emptyText = _props$emptyText === void 0 ? EMPTY_TEXT : _props$emptyText,
    _props$transparentTex = props.transparentText,
    transparentText = _props$transparentTex === void 0 ? TRANSPARENT_TEXT : _props$transparentTex,
    className = props.className,
    style = props.style,
    _props$placement = props.placement,
    placement = _props$placement === void 0 ? 'bottom-start' : _props$placement,
    popoverProps = props.popoverProps,
    showAlpha = props.showAlpha,
    chromeProps = props.chromeProps;
  var _useControllableValue = (0, _rcHooks.useControllableValue)(props),
    _useControllableValue2 = (0, _slicedToArray2.default)(_useControllableValue, 2),
    value = _useControllableValue2[0],
    setValue = _useControllableValue2[1];
  var _useControllableValue3 = (0, _rcHooks.useControllableValue)(props, {
      valuePropName: 'visible',
      defaultValue: false,
      defaultValuePropName: 'defaultVisible',
      trigger: 'onVisibleChange'
    }),
    _useControllableValue4 = (0, _slicedToArray2.default)(_useControllableValue3, 2),
    visible = _useControllableValue4[0],
    setVisible = _useControllableValue4[1];
  var _useMemo = (0, _react.useMemo)(function () {
      var colorRet = wrapColor(value);
      var valueIsTransparent = (0, _ut.isString)(value) && value.toLowerCase() === TRANSPARENT_TEXT;
      return {
        colorResult: colorRet,
        colorValue: valueIsTransparent || !value ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, colorRet.hsva), {}, {
          a: 1
        }) : colorRet.hsva,
        colorBlock: colorToRgbString(colorRet)
      };
    }, [value]),
    colorResult = _useMemo.colorResult,
    colorValue = _useMemo.colorValue,
    colorBlock = _useMemo.colorBlock;
  return /*#__PURE__*/_react.default.createElement(_antdMobile.Popover, (0, _extends2.default)({
    content: /*#__PURE__*/_react.default.createElement(_reactColor.Chrome, (0, _extends2.default)({
      showAlpha: showAlpha,
      inputType: INPUT_TYPE_MAP[format]
    }, chromeProps, {
      style: (0, _objectSpread2.default)({
        '--github-border': 'none',
        '--github-box-shadow': 'none'
      }, chromeProps === null || chromeProps === void 0 ? void 0 : chromeProps.style),
      color: colorValue,
      onChange: function onChange(v) {
        setValue(v, colorToRgbString(v));
      },
      showTriangle: false
    })),
    trigger: "click",
    placement: placement,
    destroyOnHide: true,
    className: (0, _classnames.default)(prefixCls, popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.className)
  }, popoverProps, {
    visible: visible,
    onVisibleChange: function onVisibleChange(v) {
      if (!disabled && !readOnly) {
        setVisible(v);
      }
    }
  }), children || /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)("".concat(triggerPrefixCls), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(triggerPrefixCls, "-active"), visible), "".concat(triggerPrefixCls, "-disabled"), disabled), "".concat(triggerPrefixCls, "-read"), readOnly), "".concat(triggerPrefixCls, "-empty"), !value), className),
    style: style
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(colorBlockPrefixCls)
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(colorBlockPrefixCls, "-inner"),
    style: {
      background: colorBlock
    }
  })), showText && /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefixCls, "-text")
  }, (0, _ut.isBoolean)(showText) ? toText(value, {
    format: format,
    emptyText: emptyText,
    transparentText: transparentText
  }) : showText(colorResult, value))));
};
BizColorPicker.color = wrapColor;
BizColorPicker.colorToHexString = colorToHexString;
BizColorPicker.colorToRgbString = colorToRgbString;
BizColorPicker.colorToHslString = colorToHslString;
BizColorPicker.toText = toText;
var _default = exports.default = BizColorPicker;