fx-form-widget/es/packages/color/index.js

动态表单组件库

import _Input from "antd/es/input";
import _extends from "@babel/runtime/helpers/extends";
import _Popover from "antd/es/popover";
import * as React from 'react';
import { ChromePicker } from 'react-color';
import 'rc-color-picker/assets/index.css';
import './index.less';
var Color = function Color(p) {
  var _p$schema = p.schema,
    readonly = _p$schema.readonly,
    allowClear = _p$schema.allowClear;
  var value = p.value || p.schema.data || '';
  var options = {
    allowClear: allowClear,
    disabled: readonly
  };
  var onPickerChange = function onPickerChange(e) {
    if (readonly) return;
    p.onChange(e.hex);
  };
  var onInputChange = function onInputChange(e) {
    return p.onChange(e.target.value);
  };
  var PickerSwatchWrap = function PickerSwatchWrap(_ref) {
    var value = _ref.value,
      readonly = _ref.readonly;
    return /*#__PURE__*/React.createElement("div", {
      className: "color_picker_swatch"
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        width: '40px',
        height: '24px',
        borderRadius: '2px',
        background: value,
        cursor: readonly ? 'auto' : 'pointer'
      }
    }));
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "color_picker"
  }, readonly ? /*#__PURE__*/React.createElement(PickerSwatchWrap, {
    value: value,
    readonly: readonly
  }) : /*#__PURE__*/React.createElement(_Popover, {
    content: function content() {
      return /*#__PURE__*/React.createElement(ChromePicker, {
        color: value ? value : '#ffffff',
        onChange: onPickerChange
      });
    },
    trigger: "click"
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'inherit'
    }
  }, /*#__PURE__*/React.createElement(PickerSwatchWrap, {
    value: value,
    readonly: readonly
  }))), readonly ? /*#__PURE__*/React.createElement("span", null, value || '#ffffff') : /*#__PURE__*/React.createElement(_Input, _extends({}, options, {
    placeholder: "#ffffff",
    value: value,
    onChange: onInputChange
  })));
};
export default Color;