xbpr/es/ColorPicker/index.js

xbp react ui by @arco-design/web-react

import React, { forwardRef, useContext, useRef, useState, useMemo } from "react";
import { SketchPicker } from "react-color";
import Trigger from "xbp/es/Trigger";
import cs from "xbp/es/_util/classNames";
import { ConfigContext } from "xbp/es/ConfigProvider";
import useMergeProps from "xbp/es/_util/hooks/useMergeProps";
import { throttle } from "lodash-es";
const defaultProps = {};
function ColorPicker(baseProps, ref) {
  const { getPrefixCls, size: ctxSize, rtl } = useContext(ConfigContext);
  const props = useMergeProps(baseProps, defaultProps, {});
  const { style, value, className, size, disabled, long, onChange, ...rest } = props;
  const innerButtonRef = useRef();
  const buttonRef = ref || innerButtonRef;
  const prefixCls = getPrefixCls?.("color-picker");
  const classNames = cs(
    prefixCls,
    `${prefixCls}-size-${size || ctxSize}`,
    {
      [`${prefixCls}-long`]: long,
      [`${prefixCls}-status-${status}`]: status,
      [`${prefixCls}-disabled`]: disabled,
      [`${prefixCls}-rtl`]: rtl
    },
    className
  );
  const [color, setColor] = useState(value);
  const btnStyle = useMemo(() => {
    return {
      backgroundColor: color,
      borderColor: color || "var(--color-border-2)"
    };
  }, [color]);
  const colorChange = (e) => {
    setColor(e.hex);
    onChange && doColorChange(e.hex);
  };
  const doColorChange = throttle((_color) => {
    onChange && onChange(_color);
  }, 16);
  return React.createElement(
    Trigger,
    {
      popup: () => React.createElement(SketchPicker, { color, onChange: colorChange }),
      trigger: "click",
      position: "br",
      classNames: "zoomInTop"
    },
    React.createElement("span", { ref: buttonRef, ...rest, style, className: classNames }, React.createElement("div", { style: btnStyle, className: "btn" }))
  );
}
const Component = forwardRef(ColorPicker);
export {
  Component as default
};