mobile-more/lib/components/BizForm/ItemColorPicker/index.js

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _ut = require("ut2");
var _classnames = _interopRequireDefault(require("classnames"));
var _FormItem = _interopRequireDefault(require("../FormItem"));
var _BizConfigProvider = require("../../BizConfigProvider");
var _BizColorPicker = _interopRequireDefault(require("../../BizColorPicker"));
var _config = require("../../../config");
var _excluded = ["showAlpha", "showText", "format", "colorPickerProps", "required", "className"];
var prefixCls = "".concat(_config.formItemPrefixClass, "-color-picker");

/**
 * 转换颜色值为指定格式
 * @param color 颜色值
 * @param format 颜色格式
 * @returns 转换后的颜色值
 * @example
 * // 颜色值为undefined 或 字符串，直接返回原值
 * transformColor(undefined, 'rgb') // undefined
 * transformColor('', 'rgb') // ''
 * transformColor('#e60000', 'rgb') // '#e60000'
 *
 * // 颜色值为颜色对象，根据格式转换
 * const color = { hex: '#e60000', hexa: '#e60000ff', hsva: { ..., a: 1 }, ... };
 * transformColor(color, 'hsl') // 'hsl(0, 100%, 45%)'
 * transformColor(color, 'rgb') // 'rgb(230, 0, 0)'
 */
function transformColor(color, format) {
  if (!color || (0, _ut.isString)(color)) {
    return color;
  }
  if (format === 'rgb') {
    return _BizColorPicker.default.colorToRgbString(color);
  }
  if (format === 'hsl') {
    return _BizColorPicker.default.colorToHslString(color);
  }

  // default hex
  return color.hsva.a === 1 ? color.hex : color.hexa;
}
var BizFormItemColorPicker = function BizFormItemColorPicker(_ref) {
  var showAlpha = _ref.showAlpha,
    showText = _ref.showText,
    _ref$format = _ref.format,
    format = _ref$format === void 0 ? 'hex' : _ref$format,
    colorPickerProps = _ref.colorPickerProps,
    required = _ref.required,
    className = _ref.className,
    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var _useConfig = (0, _BizConfigProvider.useConfig)(),
    locale = _useConfig.locale;
  return /*#__PURE__*/_react.default.createElement(_FormItem.default, (0, _extends2.default)({
    required: required,
    rules: [{
      required: required,
      message: locale.form.common.selectRequired
    }],
    transform: function transform(value) {
      return transformColor(value, format);
    },
    className: (0, _classnames.default)(prefixCls, className)
  }, restProps), /*#__PURE__*/_react.default.createElement(_BizColorPicker.default, (0, _extends2.default)({
    showAlpha: showAlpha,
    showText: showText,
    format: format
  }, colorPickerProps)));
};
BizFormItemColorPicker.transformColor = transformColor;
var _default = exports.default = BizFormItemColorPicker;