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

package/dist/ColorPicker/AlphaSlider.js

@@ -1,132 +1,150 @@
-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/AlphaSlider.tsx
-var AlphaSlider_exports = {};
-__export(AlphaSlider_exports, {
-  default: () => AlphaSlider_default
-});
-module.exports = __toCommonJS(AlphaSlider_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 AlphaSlider = (0, import_react.forwardRef)((props, ref) => {
-  const { color, vertical, onChange } = props;
-  const { b, e, is } = (0, import_hooks.useClassNames)("color-alpha-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 getBackground = (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 18:16:52
+ * @LastEditor	Parker
+ * @ModifyTime	2022/5/14 22:17:13
+ * @Description	Element Plus 颜色选择器组件魔改过来的，源代码见：https://github.com/element-plus/element-plus
+ */
+var AlphaSlider = /*#__PURE__*/forwardRef(function (props, ref) {
+  var color = props.color,
+    vertical = props.vertical,
+    onChange = props.onChange;
+  var _useClassNames = useClassNames('color-alpha-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 getBackground = useCallback(function () {
     if (color) {
-      const { r, g, b: b2 } = color.toRgb();
-      return `linear-gradient(to right, rgba(${r}, ${g}, ${b2}, 0) 0%, rgba(${r}, ${g}, ${b2}, 1) 100%)`;
+      // eslint-disable-next-line @typescript-eslint/no-shadow
+      var _color$toRgb = color.toRgb(),
+        r = _color$toRgb.r,
+        g = _color$toRgb.g,
+        _b = _color$toRgb.b;
+      return "linear-gradient(to right, rgba(".concat(r, ", ").concat(g, ", ").concat(_b, ", 0) 0%, rgba(").concat(r, ", ").concat(g, ", ").concat(_b, ", 1) 100%)");
     }
     return null;
   }, [color]);
-  const [background, setBackground] = (0, import_react.useState)(getBackground());
-  const getThumbLeft = (0, import_react.useCallback)(() => {
+  var _useState5 = useState(getBackground()),
+    _useState6 = _slicedToArray(_useState5, 2),
+    background = _useState6[0],
+    setBackground = _useState6[1];
+  var getThumbLeft = useCallback(function () {
     if (vertical) {
       return 0;
     }
-    const hue = color.get("alpha");
+    var hue = color.get('alpha');
     if (!el.current) {
       return 0;
     }
     return Math.round(hue * (el.current.offsetWidth - thumb.current.offsetWidth / 2) / 100);
   }, [color, vertical]);
-  const getThumbTop = (0, import_react.useCallback)(() => {
+  var getThumbTop = useCallback(function () {
     if (!vertical) {
       return 0;
     }
-    const hue = color.get("alpha");
+    var hue = color.get('alpha');
     if (!el) {
       return 0;
     }
     return Math.round(hue * (el.current.offsetHeight - thumb.current.offsetHeight / 2) / 100);
   }, [color, vertical]);
-  const update = (0, import_react.useCallback)(() => {
+
+  // methods
+  var update = useCallback(function () {
     if (color) {
       setThumbLeft(getThumbLeft());
       setThumbTop(getThumbTop());
       setBackground(getBackground());
     }
   }, [color, getBackground, 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.max(thumb.current.offsetWidth / 2, left);
-        left = Math.min(left, rect.width - thumb.current.offsetWidth / 2);
-        color.set("alpha", Math.round((left - thumb.current.offsetWidth / 2) / (rect.width - thumb.current.offsetWidth) * 100));
-      } else {
-        let top = clientY - rect.top;
-        top = Math.max(thumb.current.offsetHeight / 2, top);
-        top = Math.min(top, rect.height - thumb.current.offsetHeight / 2);
-        color.set("alpha", Math.round((top - thumb.current.offsetHeight / 2) / (rect.height - thumb.current.offsetHeight) * 100));
-      }
-      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.max(thumb.current.offsetWidth / 2, left);
+      left = Math.min(left, rect.width - thumb.current.offsetWidth / 2);
+      color.set('alpha', Math.round((left - thumb.current.offsetWidth / 2) / (rect.width - thumb.current.offsetWidth) * 100));
+    } else {
+      var top = clientY - rect.top;
+      top = Math.max(thumb.current.offsetHeight / 2, top);
+      top = Math.min(top, rect.height - thumb.current.offsetHeight / 2);
+      color.set('alpha', Math.round((top - thumb.current.offsetHeight / 2) / (rect.height - thumb.current.offsetHeight) * 100));
+    }
+    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, style: { backgroundImage: background } }), /* @__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,
+    style: {
+      backgroundImage: background
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["thumb"]))),
+    ref: thumb,
+    style: {
+      left: thumbLeft,
+      top: thumbTop
+    }
+  }));
 });
-AlphaSlider.displayName = "AlphaSlider";
-var AlphaSlider_default = AlphaSlider;
+AlphaSlider.displayName = 'AlphaSlider';
+export default AlphaSlider;

package/dist/ColorPicker/ColorPicker.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ColorPickerProps } from './typings';
-declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<any>>;
+declare const ColorPicker: React.MemoExoticComponent<React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<any>>>;
 export default ColorPicker;