mobile-more
Version:
基于 antd-mobile v5 扩展移动端 UI 组件
71 lines (69 loc) • 2.58 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["showAlpha", "showText", "format", "colorPickerProps", "required", "className"];
import React from 'react';
import { isString } from 'ut2';
import classNames from 'classnames';
import BizFormItem from "../FormItem";
import { useConfig } from "../../BizConfigProvider";
import BizColorPicker from "../../BizColorPicker";
import { formItemPrefixClass } from "../../../config";
var prefixCls = "".concat(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 || isString(color)) {
return color;
}
if (format === 'rgb') {
return BizColorPicker.colorToRgbString(color);
}
if (format === 'hsl') {
return BizColorPicker.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 = _objectWithoutProperties(_ref, _excluded);
var _useConfig = useConfig(),
locale = _useConfig.locale;
return /*#__PURE__*/React.createElement(BizFormItem, _extends({
required: required,
rules: [{
required: required,
message: locale.form.common.selectRequired
}],
transform: function transform(value) {
return transformColor(value, format);
},
className: classNames(prefixCls, className)
}, restProps), /*#__PURE__*/React.createElement(BizColorPicker, _extends({
showAlpha: showAlpha,
showText: showText,
format: format
}, colorPickerProps)));
};
BizFormItemColorPicker.transformColor = transformColor;
export default BizFormItemColorPicker;