@qsxy/element-plus-react 1.0.0-next.1 → 1.0.0-next.11

package/dist/ColorPicker/HueSlider.js

@@ -1,125 +1,130 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/ColorPicker/HueSlider.tsx
-var HueSlider_exports = {};
-__export(HueSlider_exports, {
-  default: () => HueSlider_default
-});
-module.exports = __toCommonJS(HueSlider_exports);
-var import_ahooks = require("ahooks");
-var import_classnames = __toESM(require("classnames"));
-var import_react = __toESM(require("react"));
-var import_hooks = require("../hooks");
-var import_draggable = __toESM(require("./draggable"));
-var import_util = require("./util");
-var HueSlider = (0, import_react.forwardRef)((props, ref) => {
-  const { color, vertical, onChange } = props;
-  const { b, e, is } = (0, import_hooks.useClassNames)("color-hue-slider");
-  const el = (0, import_react.useRef)();
-  const thumb = (0, import_react.useRef)(null);
-  const bar = (0, import_react.useRef)(null);
-  const [thumbLeft, setThumbLeft] = (0, import_react.useState)(0);
-  const [thumbTop, setThumbTop] = (0, import_react.useState)(0);
-  const getThumbLeft = (0, import_react.useCallback)(() => {
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useMount } from 'ahooks';
+import classNames from 'classnames';
+import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
+import { useClassNames } from "../hooks";
+import draggable from "./draggable";
+import { getClientXY } from "./util";
+/**
+ * @author	Parker
+ * @CreateTime	2022/5/14 16:16:37
+ * @LastEditor	Parker
+ * @ModifyTime	2022/11/20 11:55:00
+ * @Description	Element Plus 颜色选择器组件魔改过来的，源代码见：https://github.com/element-plus/element-plus
+ */
+var HueSlider = /*#__PURE__*/forwardRef(function (props, ref) {
+  var color = props.color,
+    vertical = props.vertical,
+    onChange = props.onChange;
+  var _useClassNames = useClassNames('color-hue-slider'),
+    b = _useClassNames.b,
+    e = _useClassNames.e,
+    is = _useClassNames.is;
+  var el = useRef(null);
+  var thumb = useRef(null);
+  var bar = useRef(null);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    thumbLeft = _useState2[0],
+    setThumbLeft = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    thumbTop = _useState4[0],
+    setThumbTop = _useState4[1];
+  var getThumbLeft = useCallback(function () {
     if (vertical) {
       return 0;
     }
-    const hue = color.get("hue");
+    var hue = color.get('hue');
     if (!el.current) {
       return 0;
     }
     return Math.round(hue * (el.current.offsetWidth - thumb.current.offsetWidth / 2) / 360);
   }, [color, vertical]);
-  const getThumbTop = (0, import_react.useCallback)(() => {
+  var getThumbTop = useCallback(function () {
     if (!vertical) {
       return 0;
     }
-    const hue = color.get("hue");
+    var hue = color.get('hue');
     if (!el) {
       return 0;
     }
     return Math.round(hue * (el.current.offsetHeight - thumb.current.offsetHeight / 2) / 360);
   }, [color, vertical]);
-  const update = (0, import_react.useCallback)(() => {
+  var update = useCallback(function () {
     if (color) {
       setThumbLeft(getThumbLeft());
       setThumbTop(getThumbTop());
     }
   }, [color, getThumbLeft, getThumbTop]);
-  const handleDrag = (0, import_react.useCallback)(
-    (event) => {
-      const rect = el.current.getBoundingClientRect();
-      const { clientX, clientY } = (0, import_util.getClientXY)(event);
-      let hue;
-      if (!vertical) {
-        let left = clientX - rect.left;
-        left = Math.min(left, rect.width - thumb.current.offsetWidth / 2);
-        left = Math.max(thumb.current.offsetWidth / 2, left);
-        hue = Math.round((left - thumb.current.offsetWidth / 2) / (rect.width - thumb.current.offsetWidth) * 360);
-      } else {
-        let top = clientY - rect.top;
-        top = Math.min(top, rect.height - thumb.current.offsetHeight / 2);
-        top = Math.max(thumb.current.offsetHeight / 2, top);
-        hue = Math.round((top - thumb.current.offsetHeight / 2) / (rect.height - thumb.current.offsetHeight) * 360);
-      }
-      color.set("hue", hue);
-      update();
-      onChange(color);
-    },
-    [color, onChange, update, vertical]
-  );
-  (0, import_react.useImperativeHandle)(ref, () => ({
-    update
-  }));
-  (0, import_ahooks.useMount)(() => {
-    const dragConfig = {
-      drag: (event) => {
+  var handleDrag = useCallback(function (event) {
+    var rect = el.current.getBoundingClientRect();
+    var _getClientXY = getClientXY(event),
+      clientX = _getClientXY.clientX,
+      clientY = _getClientXY.clientY;
+    var hue;
+    if (!vertical) {
+      var left = clientX - rect.left;
+      left = Math.min(left, rect.width - thumb.current.offsetWidth / 2);
+      left = Math.max(thumb.current.offsetWidth / 2, left);
+      hue = Math.round((left - thumb.current.offsetWidth / 2) / (rect.width - thumb.current.offsetWidth) * 360);
+    } else {
+      var top = clientY - rect.top;
+      top = Math.min(top, rect.height - thumb.current.offsetHeight / 2);
+      top = Math.max(thumb.current.offsetHeight / 2, top);
+      hue = Math.round((top - thumb.current.offsetHeight / 2) / (rect.height - thumb.current.offsetHeight) * 360);
+    }
+    color.set('hue', hue);
+    update();
+    onChange(color);
+  }, [color, onChange, update, vertical]);
+  useImperativeHandle(ref, function () {
+    return {
+      update: update
+    };
+  });
+  useMount(function () {
+    var dragConfig = {
+      drag: function drag(event) {
         handleDrag(event);
       },
-      end: (event) => {
+      end: function end(event) {
         handleDrag(event);
       }
     };
-    (0, import_draggable.default)(bar.current, dragConfig);
-    (0, import_draggable.default)(thumb.current, dragConfig);
+    draggable(bar.current, dragConfig);
+    draggable(thumb.current, dragConfig);
   });
-  const handleClick = (0, import_react.useCallback)(
-    (event) => {
-      const target = event.target;
-      if (target !== thumb.current) {
-        handleDrag(event);
-      }
-    },
-    [handleDrag]
-  );
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b(), is({ vertical })), ref: el }, /* @__PURE__ */ import_react.default.createElement("div", { className: e`bar`, ref: bar, onClick: handleClick }), /* @__PURE__ */ import_react.default.createElement("div", { className: e`thumb`, ref: thumb, style: { left: thumbLeft, top: thumbTop } }));
+  var handleClick = useCallback(function (event) {
+    var target = event.target;
+    if (target !== thumb.current) {
+      handleDrag(event);
+    }
+  }, [handleDrag]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(b(), is({
+      vertical: vertical
+    })),
+    ref: el
+  }, /*#__PURE__*/React.createElement("div", {
+    className: e(_templateObject || (_templateObject = _taggedTemplateLiteral(["bar"]))),
+    ref: bar,
+    onClick: handleClick
+  }), /*#__PURE__*/React.createElement("div", {
+    className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["thumb"]))),
+    ref: thumb,
+    style: {
+      left: thumbLeft,
+      top: thumbTop
+    }
+  }));
 });
-HueSlider.defaultProps = {};
-HueSlider.displayName = "HueSlider";
-var HueSlider_default = HueSlider;
+HueSlider.displayName = 'HueSlider';
+export default HueSlider;

package/dist/ColorPicker/Predefine.d.ts

@@ -8,5 +8,12 @@ interface Props {
 export interface PredefineRef {
     update: () => void;
 }
+/**
+ * @author	Parker
+ * @CreateTime	2022/5/14 19:24:19
+ * @LastEditor	Parker
+ * @ModifyTime	2025/2/22 19:59:12
+ * @Description	Element Plus 颜色选择器组件魔改过来的，源代码见：https://github.com/element-plus/element-plus
+ */
 declare const Predefine: React.ForwardRefExoticComponent<Props & React.RefAttributes<PredefineRef>>;
 export default Predefine;

package/dist/ColorPicker/Predefine.js

@@ -1,72 +1,70 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/ColorPicker/Predefine.tsx
-var Predefine_exports = {};
-__export(Predefine_exports, {
-  default: () => Predefine_default
-});
-module.exports = __toCommonJS(Predefine_exports);
-var import_classnames = __toESM(require("classnames"));
-var import_react = __toESM(require("react"));
-var import_hooks = require("../hooks");
-var import_util = require("./util");
-var Predefine = (0, import_react.forwardRef)((props, ref) => {
-  const { color, colors, onChange } = props;
-  const { b, e } = (0, import_hooks.useClassNames)("color-predefine");
-  const [rgbaColors, setRgbColors] = (0, import_react.useState)(() => (0, import_util.parseColors)(colors, color));
-  const handleSelect = (0, import_react.useCallback)(
-    (index) => {
-      color.fromString(colors[index]);
-      onChange(color);
-    },
-    [color, colors, onChange]
-  );
-  const update = (0, import_react.useCallback)(() => {
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/* eslint-disable indent */
+import classNames from 'classnames';
+import React, { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
+import { useClassNames } from "../hooks";
+import { parseColors } from "./util";
+/**
+ * @author	Parker
+ * @CreateTime	2022/5/14 19:24:19
+ * @LastEditor	Parker
+ * @ModifyTime	2025/2/22 19:59:12
+ * @Description	Element Plus 颜色选择器组件魔改过来的，源代码见：https://github.com/element-plus/element-plus
+ */
+var Predefine = /*#__PURE__*/forwardRef(function (props, ref) {
+  var color = props.color,
+    colors = props.colors,
+    onChange = props.onChange;
+  var _useClassNames = useClassNames('color-predefine'),
+    b = _useClassNames.b,
+    e = _useClassNames.e;
+  var _useState = useState(function () {
+      return parseColors(colors, color);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    rgbaColors = _useState2[0],
+    setRgbColors = _useState2[1];
+  var handleSelect = useCallback(function (index) {
+    color.fromString(colors[index]);
+    onChange(color);
+  }, [color, colors, onChange]);
+  var update = useCallback(function () {
     if (color) {
-      setRgbColors((0, import_util.parseColors)(colors, color));
+      setRgbColors(parseColors(colors, color));
     }
   }, [color, colors]);
-  (0, import_react.useImperativeHandle)(ref, () => ({
-    update
-  }));
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: b() }, /* @__PURE__ */ import_react.default.createElement("div", { className: e`colors` }, rgbaColors.map((item, index) => {
-    return /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        key: item.value,
-        className: (0, import_classnames.default)(e`color-selector`, { selected: item.selected, "is-alpha": item._alpha < 100 }),
-        onClick: () => handleSelect(index)
-      },
-      /* @__PURE__ */ import_react.default.createElement("div", { style: { backgroundColor: item.value } })
-    );
+  useImperativeHandle(ref, function () {
+    return {
+      update: update
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: b()
+  }, /*#__PURE__*/React.createElement("div", {
+    className: e(_templateObject || (_templateObject = _taggedTemplateLiteral(["colors"])))
+  }, rgbaColors.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.value,
+      className: classNames(e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["color-selector"]))), {
+        selected: item.selected,
+        'is-alpha': item._alpha < 100
+      }),
+      onClick: function onClick() {
+        return handleSelect(index);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        backgroundColor: item.value
+      }
+    }));
   })));
 });
-Predefine.defaultProps = {};
-Predefine.displayName = "Predefine";
-var Predefine_default = Predefine;
+Predefine.displayName = 'Predefine';
+export default Predefine;

package/dist/ColorPicker/SvPanel.d.ts

@@ -7,5 +7,12 @@ interface Props {
 export interface SvPanelRef {
     update: () => void;
 }
+/**
+ * @author	Parker
+ * @CreateTime	2022/5/14 16:16:37
+ * @LastEditor	Parker
+ * @ModifyTime	2022/11/20 11:54:52
+ * @Description	Element Plus 颜色选择器组件魔改过来的，源代码见：https://github.com/element-plus/element-plus
+ */
 declare const SvPanel: React.ForwardRefExoticComponent<Props & React.RefAttributes<SvPanelRef>>;
 export default SvPanel;

package/dist/ColorPicker/SvPanel.js

@@ -1,95 +1,108 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var _templateObject, _templateObject2, _templateObject3;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useMount } from 'ahooks';
+import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
+import { useClassNames } from "../hooks";
+import draggable from "./draggable";
+import { getClientXY } from "./util";
+/**
+ * @author	Parker
+ * @CreateTime	2022/5/14 16:16:37
+ * @LastEditor	Parker
+ * @ModifyTime	2022/11/20 11:54:52
+ * @Description	Element Plus 颜色选择器组件魔改过来的，源代码见：https://github.com/element-plus/element-plus
+ */
+var SvPanel = /*#__PURE__*/forwardRef(function (props, ref) {
+  var color = props.color,
+    onChange = props.onChange;
+  var _useClassNames = useClassNames('color-svpanel'),
+    b = _useClassNames.b,
+    e = _useClassNames.e;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    cursorTop = _useState2[0],
+    setCursorTop = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    cursorLeft = _useState4[0],
+    setCursorLeft = _useState4[1];
+  var _useState5 = useState('hsl(0, 100%, 50%)'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    background = _useState6[0],
+    setBackground = _useState6[1];
+  var el = useRef(null);
 
-// src/ColorPicker/SvPanel.tsx
-var SvPanel_exports = {};
-__export(SvPanel_exports, {
-  default: () => SvPanel_default
-});
-module.exports = __toCommonJS(SvPanel_exports);
-var import_ahooks = require("ahooks");
-var import_react = __toESM(require("react"));
-var import_hooks = require("../hooks");
-var import_draggable = __toESM(require("./draggable"));
-var import_util = require("./util");
-var SvPanel = (0, import_react.forwardRef)((props, ref) => {
-  const { color, onChange } = props;
-  const { b, e } = (0, import_hooks.useClassNames)("color-svpanel");
-  const [cursorTop, setCursorTop] = (0, import_react.useState)(0);
-  const [cursorLeft, setCursorLeft] = (0, import_react.useState)(0);
-  const [background, setBackground] = (0, import_react.useState)("hsl(0, 100%, 50%)");
-  const el = (0, import_react.useRef)();
-  const update = (0, import_react.useCallback)(() => {
+  // methods
+  var update = useCallback(function () {
     if (color) {
-      const saturation = color.get("saturation");
-      const value = color.get("value");
-      const { clientWidth: width, clientHeight: height } = el.current;
+      var saturation = color.get('saturation');
+      var value = color.get('value');
+      var _el$current = el.current,
+        width = _el$current.clientWidth,
+        height = _el$current.clientHeight;
       setCursorLeft(saturation * width / 100);
       setCursorTop((100 - value) * height / 100);
-      setBackground(`hsl(${color.get("hue")}, 100%, 50%)`);
+      setBackground("hsl(".concat(color.get('hue'), ", 100%, 50%)"));
     }
   }, [color]);
-  const handleDrag = (0, import_react.useCallback)(
-    (event) => {
-      var _a;
-      const rect = (_a = el.current) == null ? void 0 : _a.getBoundingClientRect();
-      const { clientX, clientY } = (0, import_util.getClientXY)(event);
-      let left = clientX - rect.left;
-      let top = clientY - rect.top;
-      left = Math.max(0, left);
-      left = Math.min(left, rect.width);
-      top = Math.max(0, top);
-      top = Math.min(top, rect.height);
-      setCursorLeft(left);
-      setCursorTop(top);
-      color.set({
-        saturation: left / rect.width * 100,
-        value: 100 - top / rect.height * 100
-      });
-      onChange(color);
-    },
-    [color, onChange]
-  );
-  (0, import_react.useImperativeHandle)(ref, () => ({
-    update
-  }));
-  (0, import_ahooks.useMount)(() => {
-    (0, import_draggable.default)(el.current, {
-      drag: (event) => {
+  var handleDrag = useCallback(function (event) {
+    var _el$current2;
+    var rect = (_el$current2 = el.current) === null || _el$current2 === void 0 ? void 0 : _el$current2.getBoundingClientRect();
+    var _getClientXY = getClientXY(event),
+      clientX = _getClientXY.clientX,
+      clientY = _getClientXY.clientY;
+    var left = clientX - rect.left;
+    var top = clientY - rect.top;
+    left = Math.max(0, left);
+    left = Math.min(left, rect.width);
+    top = Math.max(0, top);
+    top = Math.min(top, rect.height);
+    setCursorLeft(left);
+    setCursorTop(top);
+    color.set({
+      saturation: left / rect.width * 100,
+      value: 100 - top / rect.height * 100
+    });
+    onChange(color);
+  }, [color, onChange]);
+  useImperativeHandle(ref, function () {
+    return {
+      update: update
+    };
+  });
+  useMount(function () {
+    draggable(el.current, {
+      drag: function drag(event) {
         handleDrag(event);
       },
-      end: (event) => {
+      end: function end(event) {
         handleDrag(event);
       }
     });
   });
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: b(), style: { backgroundColor: background }, ref: el }, /* @__PURE__ */ import_react.default.createElement("div", { className: e`white` }), /* @__PURE__ */ import_react.default.createElement("div", { className: e`black` }), /* @__PURE__ */ import_react.default.createElement("div", { className: e`cursor`, style: { top: cursorTop, left: cursorLeft } }, /* @__PURE__ */ import_react.default.createElement("div", null)));
+  return /*#__PURE__*/React.createElement("div", {
+    className: b(),
+    style: {
+      backgroundColor: background
+    },
+    ref: el
+  }, /*#__PURE__*/React.createElement("div", {
+    className: e(_templateObject || (_templateObject = _taggedTemplateLiteral(["white"])))
+  }), /*#__PURE__*/React.createElement("div", {
+    className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["black"])))
+  }), /*#__PURE__*/React.createElement("div", {
+    className: e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["cursor"]))),
+    style: {
+      top: cursorTop,
+      left: cursorLeft
+    }
+  }, /*#__PURE__*/React.createElement("div", null)));
 });
-SvPanel.defaultProps = {};
-SvPanel.displayName = "SvPanel";
-var SvPanel_default = SvPanel;
+SvPanel.displayName = 'SvPanel';
+export default SvPanel;