@easyv/react-components 0.1.0 → 0.2.0

package/dist/ColorsPicker/PuresColorPicker/PuresCards.js

@@ -0,0 +1,40 @@
+import { useKeyPress } from 'ahooks';
+import { PlusOutlined } from '@easyv/react-icons';
+import { classPrefix } from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function PuresCards(_ref) {
+  var active = _ref.active,
+    value = _ref.value,
+    onAdd = _ref.onAdd,
+    onDelete = _ref.onDelete,
+    onSelect = _ref.onSelect;
+  useKeyPress('Backspace', function (e) {
+    e.stopImmediatePropagation();
+
+    // 过滤掉表单的删除
+    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+      return;
+    }
+    onDelete();
+  });
+  return /*#__PURE__*/_jsxs("div", {
+    className: "".concat(classPrefix, "-cards"),
+    children: [value.map(function (d, i) {
+      return /*#__PURE__*/_jsx("div", {
+        className: "".concat(classPrefix, "-card"),
+        onClick: function onClick() {
+          return onSelect(i);
+        },
+        style: {
+          backgroundColor: d,
+          borderColor: active === i ? '#fff' : 'transparent'
+        }
+      }, "".concat(d, "_").concat(i));
+    }), /*#__PURE__*/_jsx("div", {
+      className: "".concat(classPrefix, "-add"),
+      onClick: onAdd,
+      children: /*#__PURE__*/_jsx(PlusOutlined, {})
+    })]
+  });
+}

package/dist/ColorsPicker/PuresColorPicker/PuresColorInput.d.ts

@@ -0,0 +1,7 @@
+import { ColorValueMap } from '../interface';
+interface PuresColorInputProps {
+    value: ColorValueMap['pures'];
+    onTrigger: () => void;
+}
+export default function PuresColorInput({ value, onTrigger, }: PuresColorInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ColorsPicker/PuresColorPicker/PuresColorInput.js

@@ -0,0 +1,20 @@
+import { classPrefix } from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function PuresColorInput(_ref) {
+  var value = _ref.value,
+    onTrigger = _ref.onTrigger;
+  // 拼接多色的分段背景色
+  var str = value.map(function (color, i) {
+    return "".concat(color, " ").concat(i / value.length * 100, "%, ").concat(color, " ").concat((i + 1) / value.length * 100, "%");
+  }).join(', ');
+  return /*#__PURE__*/_jsx("div", {
+    className: "".concat(classPrefix, "-trigger"),
+    onClick: onTrigger,
+    children: /*#__PURE__*/_jsx("div", {
+      className: "".concat(classPrefix, "-trigger-color"),
+      style: {
+        backgroundImage: "linear-gradient(to right, ".concat(str, ")")
+      }
+    })
+  });
+}

package/dist/ColorsPicker/PuresColorPicker/PuresColorPanel.d.ts

@@ -0,0 +1,7 @@
+import { ColorValueMap } from '../interface';
+interface PuresColorPanelProps {
+    value: ColorValueMap['pures'];
+    onChange: (value: ColorValueMap['pures']) => void;
+}
+export default function PuresColorPanel({ value, onChange, }: PuresColorPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ColorsPicker/PuresColorPicker/PuresColorPanel.js

@@ -0,0 +1,78 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState } from 'react';
+import Panel from "../Panel";
+import History from "../History";
+import PuresCards from "./PuresCards";
+import useHistory from "./useHistory";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function PuresColorPanel(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentIndex = _useState2[0],
+    setCurrentIndex = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    updateKey = _useState4[0],
+    setUpdateKey = _useState4[1];
+  useHistory({
+    value: value,
+    active: currentIndex
+  });
+  var handleChange = function handleChange(color) {
+    var newValue = _toConsumableArray(value);
+    newValue[currentIndex] = color;
+    onChange(newValue);
+  };
+  var handleAdd = function handleAdd() {
+    onChange(value.concat('#000000'));
+    setCurrentIndex(value.length);
+    setUpdateKey(updateKey + 1);
+  };
+  var handleDelete = function handleDelete() {
+    if (value.length > 1) {
+      onChange(value.filter(function (_, index) {
+        return index !== currentIndex;
+      }));
+      setCurrentIndex(currentIndex > 0 ? currentIndex - 1 : 0);
+      setUpdateKey(updateKey + 1);
+    }
+  };
+  var handleSelect = function handleSelect(index) {
+    setCurrentIndex(index);
+    setUpdateKey(updateKey + 1);
+  };
+  var handleHistorySelect = function handleHistorySelect(val) {
+    var newValue = _toConsumableArray(value);
+    newValue[currentIndex] = val;
+    onChange(newValue);
+    setUpdateKey(updateKey + 1);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(PuresCards, {
+      active: currentIndex,
+      value: value,
+      onAdd: handleAdd,
+      onDelete: handleDelete,
+      onSelect: handleSelect
+    }), /*#__PURE__*/_jsx(Panel, {
+      color: value[currentIndex],
+      onChange: handleChange
+    }, updateKey), /*#__PURE__*/_jsx(History, {
+      type: "pure",
+      onSelect: handleHistorySelect
+    })]
+  });
+}

package/dist/ColorsPicker/PuresColorPicker/index.d.ts

@@ -0,0 +1,3 @@
+export declare const classPrefix = "pures-color-picker";
+export { default as PuresColorInput } from './PuresColorInput';
+export { default as PuresColorPanel } from './PuresColorPanel';

package/dist/ColorsPicker/PuresColorPicker/index.js

@@ -0,0 +1,3 @@
+export var classPrefix = 'pures-color-picker';
+export { default as PuresColorInput } from "./PuresColorInput";
+export { default as PuresColorPanel } from "./PuresColorPanel";

package/dist/ColorsPicker/PuresColorPicker/useHistory.d.ts

@@ -0,0 +1,5 @@
+import { ColorValueMap } from '../interface';
+export default function useHistory({ value, active, }: {
+    value: ColorValueMap['pures'];
+    active: number;
+}): null;

package/dist/ColorsPicker/PuresColorPicker/useHistory.js

@@ -0,0 +1,34 @@
+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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useEffect, useRef } from 'react';
+import { useUpdateEffect } from 'ahooks';
+import useLocalstorageRef from "../hooks/useLocalstorageRef";
+export default function useHistory(_ref) {
+  var value = _ref.value,
+    active = _ref.active;
+  var _useLocalstorageRef = useLocalstorageRef('usedColors'),
+    _useLocalstorageRef2 = _slicedToArray(_useLocalstorageRef, 2),
+    usedPureColors = _useLocalstorageRef2[0],
+    setUsedPureColors = _useLocalstorageRef2[1];
+  var lastValueRef = useRef();
+
+  // 记录上一次的值
+  useUpdateEffect(function () {
+    lastValueRef.current = value;
+  }, [value]);
+  useEffect(function () {
+    return function () {
+      if (lastValueRef.current) {
+        var newColors = [lastValueRef.current[active]].concat(usedPureColors.current || []);
+        newColors = Array.from(new Set(newColors)).slice(0, 16);
+        setUsedPureColors(newColors);
+        lastValueRef.current = undefined;
+      }
+    };
+  }, [active]);
+  return null;
+}

package/dist/ColorsPicker/RangeColorPicker/RangeColorInput.d.ts

@@ -0,0 +1,7 @@
+import { ColorValueMap } from '../interface';
+interface RangeColorInputProps {
+    value: ColorValueMap['range'];
+    onTrigger: () => void;
+}
+export default function RangeColorInput({ value, onTrigger, }: RangeColorInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ColorsPicker/RangeColorPicker/RangeColorInput.js

@@ -0,0 +1,19 @@
+import Preview from "../common/Preview";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function RangeColorInput(_ref) {
+  var value = _ref.value,
+    onTrigger = _ref.onTrigger;
+  return /*#__PURE__*/_jsx("div", {
+    className: "pure-color-picker-preview",
+    style: {
+      width: '100%'
+    },
+    onClick: onTrigger,
+    children: /*#__PURE__*/_jsx(Preview, {
+      type: "range",
+      shape: "square",
+      color: value,
+      size: '100%'
+    })
+  });
+}

package/dist/ColorsPicker/RangeColorPicker/RangeColorPanel.d.ts

@@ -0,0 +1,7 @@
+import { ColorValueMap } from '../interface';
+interface RangeColorPanelProps {
+    value: ColorValueMap['range'];
+    onChange: (value: ColorValueMap['range']) => void;
+}
+export default function RangeColorPanel({ value, onChange, }: RangeColorPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ColorsPicker/RangeColorPicker/RangeColorPanel.js

@@ -0,0 +1,59 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState } from 'react';
+import Panel from "../Panel";
+import History from "../History";
+import RangePointsBar from "./RangePointBar";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function RangeColorPanel(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentIndex = _useState2[0],
+    setCurrentIndex = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    updateKey = _useState4[0],
+    setUpdateKey = _useState4[1];
+  var handleChange = function handleChange(newValue) {
+    var newValueArray = _toConsumableArray(value);
+    newValueArray[currentIndex] = newValue;
+    onChange(newValueArray);
+    setUpdateKey(function (prev) {
+      return prev + 1;
+    });
+  };
+  var handleSelect = function handleSelect(val) {
+    handleChange(val);
+  };
+  var handleIndexSelect = function handleIndexSelect(index) {
+    setCurrentIndex(index);
+    setUpdateKey(function (prev) {
+      return prev + 1;
+    });
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(RangePointsBar, {
+      active: currentIndex,
+      value: value,
+      onSelect: handleIndexSelect
+    }), /*#__PURE__*/_jsx(Panel, {
+      color: value[currentIndex],
+      onChange: handleChange
+    }, updateKey), /*#__PURE__*/_jsx(History, {
+      type: "pure",
+      onSelect: handleSelect
+    })]
+  });
+}

package/dist/ColorsPicker/RangeColorPicker/RangePointBar.d.ts

@@ -0,0 +1,8 @@
+import { ColorValueMap } from '../interface';
+interface RangePointsBarProps {
+    active: number;
+    value: ColorValueMap['range'];
+    onSelect: (current: number) => void;
+}
+export default function RangePointsBar({ active, value, onSelect, }: RangePointsBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ColorsPicker/RangeColorPicker/RangePointBar.js

@@ -0,0 +1,63 @@
+import { SwapOutlined } from '@easyv/react-icons';
+import classNames from 'classnames';
+import { getLinearGradientStyle } from "../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function RangePointsBar(_ref) {
+  var active = _ref.active,
+    value = _ref.value,
+    onSelect = _ref.onSelect;
+  return /*#__PURE__*/_jsxs("div", {
+    className: "colors-picker-linear-points-bar-wrapper",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "colors-picker-linear-points-bar",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "colors-picker-points-bar-prev-half",
+        style: {
+          backgroundColor: value[0]
+        }
+      }), /*#__PURE__*/_jsx("div", {
+        className: "colors-picker-points-bar-next-half",
+        style: {
+          backgroundColor: value[1]
+        }
+      }), /*#__PURE__*/_jsx("div", {}), /*#__PURE__*/_jsxs("div", {
+        className: "colors-picker-linear-points-bar-color",
+        style: getLinearGradientStyle({
+          stops: value.map(function (d, i) {
+            return {
+              offset: i === 0 ? 0 : 100,
+              color: d
+            };
+          }),
+          angle: 90,
+          opacity: 1
+        }),
+        children: [/*#__PURE__*/_jsx("div", {
+          className: classNames('colors-picker-linear-point', {
+            active: active
+          }),
+          style: {
+            left: '0%'
+          },
+          onClick: function onClick() {
+            return onSelect(0);
+          }
+        }), /*#__PURE__*/_jsx("div", {
+          className: classNames('colors-picker-linear-point', {
+            active: active
+          }),
+          style: {
+            left: '100%'
+          },
+          onClick: function onClick() {
+            return onSelect(1);
+          }
+        })]
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "colors-picker-linear-points-switch",
+      children: /*#__PURE__*/_jsx(SwapOutlined, {})
+    })]
+  });
+}

package/dist/ColorsPicker/RangeColorPicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RangeColorInput } from './RangeColorInput';
+export { default as RangeColorPanel } from './RangeColorPanel';

package/dist/ColorsPicker/RangeColorPicker/index.js

@@ -0,0 +1,2 @@
+export { default as RangeColorInput } from "./RangeColorInput";
+export { default as RangeColorPanel } from "./RangeColorPanel";

package/dist/ColorsPicker/common/Preview.d.ts

@@ -0,0 +1,11 @@
+import { ColorType, ColorValueMap } from '../interface';
+interface PreviewProps<T extends ColorType> {
+    type: T;
+    color: ColorValueMap[T];
+    size?: number | string;
+    shape?: 'circle' | 'square';
+    border?: boolean;
+    onClick?: () => void;
+}
+export default function Preview<T extends ColorType>({ type, color, size, shape, border, onClick, }: PreviewProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ColorsPicker/common/Preview.js

@@ -0,0 +1,60 @@
+import classNames from 'classnames';
+import { getLinearGradientStyle } from "../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Preview(_ref) {
+  var type = _ref.type,
+    color = _ref.color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 20 : _ref$size,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? 'circle' : _ref$shape,
+    border = _ref.border,
+    onClick = _ref.onClick;
+  // 处理不同类型的背景色
+  var getColorStyle = function getColorStyle() {
+    switch (type) {
+      case 'pure':
+        {
+          return {
+            backgroundColor: color
+          };
+        }
+      case 'linear':
+        {
+          return getLinearGradientStyle(color);
+        }
+      case 'range':
+        {
+          var linearValue = {
+            stops: [{
+              offset: 0,
+              color: color[0]
+            }, {
+              offset: 100,
+              color: color[1]
+            }],
+            angle: 90,
+            opacity: 1
+          };
+          return getLinearGradientStyle(linearValue);
+        }
+      default:
+        return {};
+    }
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames('colors-picker-preview', "colors-picker-preview-".concat(shape), {
+      'colors-picker-preview-border': border
+    }),
+    style: {
+      width: size,
+      height: size,
+      cursor: onClick ? 'pointer' : 'default'
+    },
+    onClick: onClick,
+    children: /*#__PURE__*/_jsx("div", {
+      className: "colors-picker-preview-color",
+      style: getColorStyle()
+    })
+  });
+}

package/dist/ColorsPicker/hooks/useColorsPicker.d.ts

@@ -0,0 +1,25 @@
+import { ColorValueObj, ColorsPickerProps, ColorsPickerType } from '../interface';
+export default function useColorsPicker<T extends ColorsPickerType>(props: ColorsPickerProps<T>): ColorsPickerProps<T> | {
+    type: string | T;
+    value: string;
+    onChange: (value: T extends import("../interface").ColorType ? import("../interface").ColorValueMap[T] : ColorValueObj) => void;
+} | {
+    type: T;
+    value: string[];
+    onChange: (value: T extends import("../interface").ColorType ? import("../interface").ColorValueMap[T] : ColorValueObj) => void;
+} | {
+    type: T;
+    value: {
+        stops: {
+            color: string;
+            offset: number;
+        }[];
+        angle: number;
+        opacity: number;
+    };
+    onChange: (value: T extends import("../interface").ColorType ? import("../interface").ColorValueMap[T] : ColorValueObj) => void;
+} | {
+    type: T & any[];
+    value: {};
+    onChange: (value: T extends import("../interface").ColorType ? import("../interface").ColorValueMap[T] : ColorValueObj) => void;
+};

package/dist/ColorsPicker/hooks/useColorsPicker.js

@@ -0,0 +1,78 @@
+var _excluded = ["type", "value"];
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var defaultValues = {
+  pure: '#000000',
+  pures: ['#ffffff', '#000000'],
+  linear: {
+    stops: [{
+      color: '#ffffff',
+      offset: 0
+    }, {
+      color: '#000000',
+      offset: 100
+    }],
+    angle: 0,
+    opacity: 1
+  }
+};
+export default function useColorsPicker(props) {
+  var _props$type = props.type,
+    type = _props$type === void 0 ? 'pure' : _props$type,
+    value = props.value,
+    rest = _objectWithoutProperties(props, _excluded);
+  if (type === 'pure') {
+    if (!value || typeof value !== 'string') {
+      return _objectSpread(_objectSpread({}, rest), {}, {
+        type: type,
+        value: defaultValues.pure
+      });
+    }
+  } else if (type === 'pures') {
+    if (!value || !Array.isArray(value) || value.some(function (d) {
+      return typeof d !== 'string';
+    })) {
+      return _objectSpread(_objectSpread({}, rest), {}, {
+        type: type,
+        value: defaultValues.pures
+      });
+    }
+  } else if (type === 'linear') {
+    if (!value || _typeof(value) !== 'object') {
+      return _objectSpread(_objectSpread({}, rest), {}, {
+        type: type,
+        value: defaultValues.linear
+      });
+    }
+  } else if (Array.isArray(type)) {
+    if (!value || _typeof(value) !== 'object') {
+      return _objectSpread(_objectSpread({}, rest), {}, {
+        type: type,
+        value: type.reduce(function (all, cur) {
+          return all[cur] = defaultValues[cur];
+        }, {})
+      });
+    } else if (type.some(function (d) {
+      return !value[d];
+    })) {
+      // 检查每个子项的类型
+      var newValue = type.reduce(function (all, cur) {
+        all[cur] = value[cur] || defaultValues[cur];
+        return all;
+      }, {
+        type: value.type || 'pure'
+      });
+      return _objectSpread(_objectSpread({}, rest), {}, {
+        type: type,
+        value: newValue
+      });
+    }
+  }
+  return props;
+}

package/dist/ColorsPicker/hooks/useControlBlock.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface UsePaletteControlProps {
+    value: [number, number];
+    onChange?: (value: [number, number], e: MouseEvent | React.MouseEvent, mousedownChange?: boolean) => void;
+}
+export declare function useControlBlock({ value, onChange }: UsePaletteControlProps): {
+    active: boolean;
+    blockRef: React.RefObject<HTMLDivElement>;
+    onMouseDown: (ev: React.MouseEvent) => void;
+};
+export {};

package/dist/ColorsPicker/hooks/useControlBlock.js

@@ -0,0 +1,61 @@
+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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useRef, useState } from 'react';
+export function useControlBlock(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    active = _useState2[0],
+    setActive = _useState2[1];
+  var blockRef = useRef(null);
+  var getPercentNumber = function getPercentNumber(value, max) {
+    if (value < 0) {
+      return 0;
+    }
+    if (value > max) {
+      return 1;
+    }
+    return value / max;
+  };
+  var setCurrentPosition = function setCurrentPosition(ev, mousedownChange) {
+    var clientX = ev.clientX,
+      clientY = ev.clientY;
+    var rect = blockRef.current.getBoundingClientRect();
+    var newValue = [getPercentNumber(clientX - rect.x, rect.width), getPercentNumber(clientY - rect.y, rect.height)];
+    if (newValue[0] !== value[0] || newValue[1] !== value[1]) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(newValue, ev, mousedownChange);
+    }
+  };
+  function onMouseMove(ev) {
+    ev.preventDefault();
+    if (ev.buttons > 0) {
+      setCurrentPosition(ev);
+    } else {
+      removeListener();
+    }
+  }
+  var removeListener = function removeListener() {
+    setActive(false);
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', removeListener);
+    window.removeEventListener('contextmenu', removeListener);
+  };
+  var onMouseDown = function onMouseDown(ev) {
+    ev.stopPropagation();
+    setActive(true);
+    setCurrentPosition(ev, true);
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', removeListener);
+    window.addEventListener('contextmenu', removeListener);
+  };
+  return {
+    active: active,
+    blockRef: blockRef,
+    onMouseDown: onMouseDown
+  };
+}

package/dist/ColorsPicker/hooks/useLocalstorageRef.d.ts

@@ -0,0 +1,3 @@
+export default function useLocalstorageRef<T>(name: string): [{
+    current: T | undefined;
+}, (value: T) => void];