@easyv/react-components 0.0.50 → 0.2.0

package/dist/ColorsPicker/hooks/useLocalstorageRef.js

@@ -0,0 +1,11 @@
+import { useCallback, useEffect, useRef } from 'react';
+export default function useLocalstorageRef(name) {
+  var ref = useRef();
+  useEffect(function () {
+    ref.current = JSON.parse(localStorage.getItem(name) || 'null');
+  });
+  var set = useCallback(function (value) {
+    localStorage.setItem(name, JSON.stringify(value));
+  }, []);
+  return [ref, set];
+}

package/dist/ColorsPicker/index.d.ts

@@ -0,0 +1,4 @@
+import { ColorsPickerProps, ColorsPickerType } from './interface';
+import './style/index.less';
+declare function ColorsPicker<T extends ColorsPickerType>(props: ColorsPickerProps<T>): import("react/jsx-runtime").JSX.Element;
+export default ColorsPicker;

package/dist/ColorsPicker/index.js

@@ -0,0 +1,182 @@
+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 _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 { Trigger } from "../index";
+import { PureColorInput, PureColorPanel } from "./PureColorPicker";
+import { PuresColorInput, PuresColorPanel } from "./PuresColorPicker";
+import { LinearColorInput, LinearColorPanel } from "./LinearColorPicker";
+import PanelContainer from "./PanelContainer";
+import { MixedPanel } from "./MixedColorPicker";
+import { RangeColorInput, RangeColorPanel } from "./RangeColorPicker";
+import useColorsPicker from "./hooks/useColorsPicker";
+import "./style/index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+function ColorsPicker(props) {
+  var _useColorsPicker = useColorsPicker(props),
+    type = _useColorsPicker.type,
+    value = _useColorsPicker.value,
+    onChange = _useColorsPicker.onChange;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var renderInput = function renderInput() {
+    switch (type) {
+      case 'pure':
+        {
+          return /*#__PURE__*/_jsx(PureColorInput, {
+            value: value,
+            onChange: onChange,
+            onTrigger: function onTrigger() {
+              return setVisible(!visible);
+            }
+          });
+        }
+      case 'pures':
+        {
+          return /*#__PURE__*/_jsx(PuresColorInput, {
+            value: value,
+            onTrigger: function onTrigger() {
+              return setVisible(!visible);
+            }
+          });
+        }
+      case 'linear':
+        {
+          return /*#__PURE__*/_jsx(LinearColorInput, {
+            value: value,
+            onChange: onChange,
+            onTrigger: function onTrigger() {
+              return setVisible(!visible);
+            }
+          });
+        }
+      case 'range':
+        {
+          return /*#__PURE__*/_jsx(RangeColorInput, {
+            value: value,
+            onTrigger: function onTrigger() {
+              return setVisible(!visible);
+            }
+          });
+        }
+      default:
+        {
+          if (Array.isArray(type)) {
+            var val = value;
+            var onValueChange = onChange;
+            if (val.type === 'pure') {
+              return /*#__PURE__*/_jsx(PureColorInput, {
+                value: val.pure,
+                onChange: function onChange(newValue) {
+                  return onValueChange(_objectSpread(_objectSpread({}, val), {}, {
+                    pure: newValue
+                  }));
+                },
+                onTrigger: function onTrigger() {
+                  return setVisible(!visible);
+                }
+              });
+            } else if (val.type === 'pures') {
+              return /*#__PURE__*/_jsx(PuresColorInput, {
+                value: val.pures,
+                onTrigger: function onTrigger() {
+                  return setVisible(!visible);
+                }
+              });
+            } else if (val.type === 'linear') {
+              return /*#__PURE__*/_jsx(LinearColorInput, {
+                value: val.linear,
+                onChange: function onChange(newValue) {
+                  return onValueChange(_objectSpread(_objectSpread({}, val), {}, {
+                    linear: newValue
+                  }));
+                },
+                onTrigger: function onTrigger() {
+                  return setVisible(!visible);
+                }
+              });
+            } else if (val.type === 'range') {
+              return /*#__PURE__*/_jsx(RangeColorInput, {
+                value: val.range,
+                onTrigger: function onTrigger() {
+                  return setVisible(!visible);
+                }
+              });
+            }
+          }
+          console.error('unknown color picker type');
+        }
+    }
+  };
+  var renderPanel = function renderPanel() {
+    var renderPanelInner = function renderPanelInner() {
+      switch (type) {
+        case 'pure':
+          {
+            return /*#__PURE__*/_jsx(PureColorPanel, {
+              value: value,
+              onChange: onChange
+            });
+          }
+        case 'pures':
+          {
+            return /*#__PURE__*/_jsx(PuresColorPanel, {
+              value: value,
+              onChange: onChange
+            });
+          }
+        case 'linear':
+          {
+            return /*#__PURE__*/_jsx(LinearColorPanel, {
+              value: value,
+              onChange: onChange
+            });
+          }
+        case 'range':
+          {
+            return /*#__PURE__*/_jsx(RangeColorPanel, {
+              value: value,
+              onChange: onChange
+            });
+          }
+        default:
+          {
+            if (Array.isArray(type)) {
+              return /*#__PURE__*/_jsx(MixedPanel, {
+                type: type,
+                value: value,
+                onChange: onChange
+              });
+            }
+            console.error('unknown color picker type');
+          }
+      }
+    };
+    return /*#__PURE__*/_jsx(PanelContainer, {
+      children: renderPanelInner()
+    });
+  };
+  return /*#__PURE__*/_jsx(Trigger, {
+    unmountOnExit: true,
+    trigger: "click",
+    position: "bl",
+    popupVisible: visible,
+    popup: renderPanel,
+    onClickOutside: function onClickOutside() {
+      return setVisible(false);
+    },
+    children: renderInput()
+  });
+}
+export default ColorsPicker;

package/dist/ColorsPicker/interface.d.ts

@@ -0,0 +1,58 @@
+/**
+ * 颜色选择器类型
+ * @description 支持纯色、线性渐变、径向渐变、多纯色集合
+ * pure - 纯色
+ * linear - 线性渐变
+ * pures - 多纯色集合
+ */
+export declare type ColorType = 'pure' | 'linear' | 'pures' | 'range';
+interface StopItem {
+    /**
+     * 偏移量
+     * 0 - 100
+     */
+    offset: number;
+    /**
+     * 颜色值
+     */
+    color: string;
+}
+export interface GradientColorValue {
+    stops: StopItem[];
+    angle: number;
+    opacity: number;
+}
+export interface ColorValueObj {
+    type: ColorType;
+    pure?: ColorValueMap['pure'];
+    linear?: ColorValueMap['linear'];
+    pures?: ColorValueMap['pures'];
+    range?: ColorValueMap['range'];
+}
+export declare type ColorsPickerType = ColorType | ColorType[];
+export interface ColorsPickerProps<T extends ColorsPickerType> {
+    type: T;
+    value: T extends ColorType ? ColorValueMap[T] : ColorValueObj;
+    onChange: (value: T extends ColorType ? ColorValueMap[T] : ColorValueObj) => void;
+}
+export interface ColorValueMap {
+    pure: string;
+    linear: GradientColorValue;
+    pures: string[];
+    range: [string, string];
+}
+export interface HSV {
+    h: number;
+    s: number;
+    v: number;
+}
+export interface RGB {
+    r: number;
+    g: number;
+    b: number;
+}
+export interface Color {
+    hsv: HSV;
+    alpha: number;
+}
+export {};

package/dist/ColorsPicker/interface.js

@@ -0,0 +1 @@
+export {};