jjb-lc-designable/react-settings-form/components/ColorInput/index.js

基于alibaba-designable源码二次封装的表单设计器。

import React, { useRef } from 'react';
import { Input, Popover } from 'antd';
import { usePrefix } from 'jjb-lc-designable/react';
import { SketchPicker } from 'react-color';
import './styles.less';
export const ColorInput = props => {
  const container = useRef();
  const prefix = usePrefix('color-input');
  const color = props.value;
  return /*#__PURE__*/React.createElement("div", {
    ref: container,
    className: prefix
  }, /*#__PURE__*/React.createElement(Input, {
    value: props.value,
    onChange: e => {
      props.onChange?.(e.target.value);
    },
    placeholder: "Color",
    prefix: /*#__PURE__*/React.createElement(Popover, {
      autoAdjustOverflow: true,
      trigger: "click",
      overlayInnerStyle: {
        padding: 0
      },
      getPopupContainer: () => container.current,
      content: /*#__PURE__*/React.createElement(SketchPicker, {
        color: color,
        onChange: ({
          rgb
        }) => {
          props.onChange?.(`rgba(${rgb.r},${rgb.g},${rgb.b},${rgb.a})`);
        }
      })
    }, /*#__PURE__*/React.createElement("div", {
      className: prefix + '-color-tips',
      style: {
        backgroundColor: color
      }
    }))
  }));
};