@easyv/react-components 0.0.50 → 0.2.0

package/dist/BlurInput/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { InputProps } from '../index';
+export interface BlurInputProps extends InputProps {
+    value: string;
+    validate?: (value: string) => boolean;
+    onChange: (value: string) => void;
+}
+export interface BlurInputRef {
+    forceUpdate: (value: string) => void;
+}
+declare const _default: import("react").ForwardRefExoticComponent<BlurInputProps & import("react").RefAttributes<BlurInputRef>>;
+export default _default;

package/dist/BlurInput/index.js

@@ -0,0 +1,58 @@
+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); }
+var _excluded = ["value", "validate", "onChange"];
+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; }
+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; }
+import { Input } from "../index";
+import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default /*#__PURE__*/forwardRef(function BlurInput(_ref, ref) {
+  var value = _ref.value,
+    validate = _ref.validate,
+    onChange = _ref.onChange,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    localValue = _useState2[0],
+    setLocalValue = _useState2[1];
+  useImperativeHandle(ref, function () {
+    return {
+      forceUpdate: function forceUpdate(val) {
+        setLocalValue(val !== null && val !== void 0 ? val : value);
+      }
+    };
+  });
+  useEffect(function () {
+    setLocalValue(value);
+  }, [value]);
+  var handleBlur = function handleBlur() {
+    if (validate) {
+      if (!validate(localValue)) {
+        setLocalValue(value);
+      } else {
+        onChange === null || onChange === void 0 ? void 0 : onChange(localValue);
+      }
+    } else {
+      onChange === null || onChange === void 0 ? void 0 : onChange(localValue);
+    }
+  };
+  var handlePressEnter = function handlePressEnter(e) {
+    e.currentTarget.blur();
+  };
+  return /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({}, restProps), {}, {
+    value: localValue,
+    onChange: setLocalValue,
+    onBlur: handleBlur,
+    onPressEnter: handlePressEnter
+  }));
+});

package/dist/ColorsPicker/ControlBar.d.ts

@@ -0,0 +1,8 @@
+import { Color } from './interface';
+interface ControlBarProps {
+    color: Color;
+    type: 'hue' | 'alpha';
+    onChange: (x: number) => void;
+}
+export default function ControlBar({ color, type, onChange }: ControlBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ColorsPicker/ControlBar.js

@@ -0,0 +1,67 @@
+import classNames from 'classnames';
+import tinycolor from 'tinycolor2';
+import { useControlBlock } from "./hooks/useControlBlock";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function ControlBar(_ref) {
+  var color = _ref.color,
+    type = _ref.type,
+    _onChange = _ref.onChange;
+  var x;
+  if (type === 'alpha') {
+    x = color.alpha;
+  } else {
+    x = color.hsv.h / 360;
+  }
+  var rgbColor = tinycolor(color.hsv).toRgbString();
+  var _useControlBlock = useControlBlock({
+      value: [x, 0],
+      onChange: function onChange(value) {
+        if (type === 'hue') {
+          _onChange(value[0] * 360);
+        } else {
+          _onChange(value[0]);
+        }
+      }
+    }),
+    blockRef = _useControlBlock.blockRef,
+    onMouseDown = _useControlBlock.onMouseDown;
+  if (type === 'alpha') {
+    return /*#__PURE__*/_jsx("div", {
+      className: classNames("colors-picker-control-bar colors-picker-control-alpha"),
+      children: /*#__PURE__*/_jsxs("div", {
+        ref: blockRef,
+        className: "colors-picker-control-bar-inner",
+        style: {
+          backgroundImage: "linear-gradient(to right, transparent, ".concat(rgbColor, ")")
+        },
+        onMouseDown: onMouseDown,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "colors-picker-control-bar-right-box",
+          style: {
+            backgroundColor: rgbColor
+          }
+        }), /*#__PURE__*/_jsx("div", {
+          className: "colors-picker-handler",
+          style: {
+            left: "".concat(x * 100, "%")
+          }
+        })]
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames("colors-picker-control-bar colors-picker-control-hue"),
+    children: /*#__PURE__*/_jsx("div", {
+      ref: blockRef,
+      className: "colors-picker-control-bar-inner",
+      onMouseDown: onMouseDown,
+      children: /*#__PURE__*/_jsx("div", {
+        className: "colors-picker-handler",
+        style: {
+          left: "".concat(x * 100, "%")
+        }
+      })
+    })
+  });
+}

package/dist/ColorsPicker/History.d.ts

@@ -0,0 +1,7 @@
+import { GradientColorValue } from './interface';
+interface HistoryProps<T extends 'pure' | 'linear'> {
+    type: T;
+    onSelect: (color: T extends 'linear' ? string | GradientColorValue : string) => void;
+}
+export default function History<T extends 'pure' | 'linear'>({ type, onSelect, }: HistoryProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ColorsPicker/History.js

@@ -0,0 +1,53 @@
+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 { DownOutlined } from '@easyv/react-icons';
+import classNames from 'classnames';
+import HistoryPure from "./HistoryPure";
+import HistoryLinear from "./HistoryLinear";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function History(_ref) {
+  var type = _ref.type,
+    onSelect = _ref.onSelect;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    collapsed = _useState2[0],
+    setCollapsed = _useState2[1];
+  var handleCollapse = function handleCollapse() {
+    setCollapsed(function (prev) {
+      return !prev;
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: "colors-picker-history",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "colors-picker-history-title",
+      onClick: handleCollapse,
+      children: [/*#__PURE__*/_jsx("div", {
+        children: "\u6700\u8FD1\u4F7F\u7528"
+      }), /*#__PURE__*/_jsx(DownOutlined, {
+        className: classNames('colors-picker-history-icon', {
+          'colors-picker-history-collapsed': collapsed
+        })
+      })]
+    }), type === 'linear' && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "colors-picker-history-type-title",
+        children: "\u6E10\u53D8\u8272"
+      }), /*#__PURE__*/_jsx(HistoryLinear, {
+        onSelect: onSelect
+      }), /*#__PURE__*/_jsx("div", {
+        className: "colors-picker-history-type-title",
+        children: "\u7EAF\u8272"
+      })]
+    }), /*#__PURE__*/_jsx(HistoryPure, {
+      onSelect: onSelect
+    })]
+  });
+}

package/dist/ColorsPicker/HistoryLinear.d.ts

@@ -0,0 +1,6 @@
+import { GradientColorValue } from './interface';
+interface HistoryLinearProps {
+    onSelect: (color: GradientColorValue) => void;
+}
+export default function HistoryLinear({ onSelect }: HistoryLinearProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ColorsPicker/HistoryLinear.js

@@ -0,0 +1,36 @@
+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 { useLocalStorageState } from 'ahooks';
+import Preview from "./common/Preview";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function HistoryLinear(_ref) {
+  var onSelect = _ref.onSelect;
+  var _useLocalStorageState = useLocalStorageState('usedLinearColors'),
+    _useLocalStorageState2 = _slicedToArray(_useLocalStorageState, 1),
+    usedLinearColors = _useLocalStorageState2[0];
+  return /*#__PURE__*/_jsx("div", {
+    className: "colors-picker-history-pure-wrapper",
+    children: usedLinearColors === null || usedLinearColors === void 0 ? void 0 : usedLinearColors.map(function (d, i) {
+      return /*#__PURE__*/_jsx(Preview, {
+        border: true,
+        type: "linear",
+        color: {
+          stops: d,
+          angle: 0,
+          opacity: 1
+        },
+        onClick: function onClick() {
+          return onSelect({
+            stops: d,
+            angle: 0,
+            opacity: 1
+          });
+        }
+      }, i);
+    })
+  });
+}

package/dist/ColorsPicker/HistoryPure.d.ts

@@ -0,0 +1,5 @@
+interface HistoryPureProps {
+    onSelect: (color: string) => void;
+}
+export default function HistoryPure({ onSelect }: HistoryPureProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ColorsPicker/HistoryPure.js

@@ -0,0 +1,28 @@
+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 { useLocalStorageState } from 'ahooks';
+import Preview from "./common/Preview";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function HistoryPure(_ref) {
+  var onSelect = _ref.onSelect;
+  var _useLocalStorageState = useLocalStorageState('usedColors'),
+    _useLocalStorageState2 = _slicedToArray(_useLocalStorageState, 1),
+    usedPureColors = _useLocalStorageState2[0];
+  return /*#__PURE__*/_jsx("div", {
+    className: "colors-picker-history-pure-wrapper",
+    children: usedPureColors === null || usedPureColors === void 0 ? void 0 : usedPureColors.map(function (d, i) {
+      return /*#__PURE__*/_jsx(Preview, {
+        border: true,
+        type: "pure",
+        color: d,
+        onClick: function onClick() {
+          return onSelect(d);
+        }
+      }, i);
+    })
+  });
+}

package/dist/ColorsPicker/LinearColorPicker/LinearColorInput.d.ts

@@ -0,0 +1,8 @@
+import { ColorValueMap } from '../interface';
+interface LinearColorInputProps {
+    value: ColorValueMap['linear'];
+    onTrigger: () => void;
+    onChange: (val: ColorValueMap['linear']) => void;
+}
+export default function LinearColorInput({ value, onChange, onTrigger, }: LinearColorInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ColorsPicker/LinearColorPicker/LinearColorInput.js

@@ -0,0 +1,50 @@
+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); }
+import { Input } from "../../index";
+import BlurInput from "../../BlurInput";
+import Preview from "../common/Preview";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function LinearColorInput(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    onTrigger = _ref.onTrigger;
+  var handleAlphaChange = function handleAlphaChange(val) {
+    onChange(_objectSpread(_objectSpread({}, value), {}, {
+      opacity: val
+    }));
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: "pure-color-picker",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "pure-color-picker-preview",
+      onClick: onTrigger,
+      children: /*#__PURE__*/_jsx(Preview, {
+        type: "linear",
+        shape: "square",
+        color: value,
+        size: 12
+      })
+    }), /*#__PURE__*/_jsx(Input, {
+      size: "small",
+      prefix: "#",
+      value: '线性渐变',
+      disabled: true
+    }), /*#__PURE__*/_jsx(BlurInput, {
+      size: "small",
+      suffix: "%",
+      className: 'pure-color-picker-alpha',
+      value: (value.opacity * 100).toFixed(0),
+      validate: function validate(val) {
+        return +val >= 0 && +val <= 100;
+      },
+      onChange: function onChange(val) {
+        return handleAlphaChange(+val / 100);
+      }
+    })]
+  });
+}

package/dist/ColorsPicker/LinearColorPicker/LinearColorPanel.d.ts

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

package/dist/ColorsPicker/LinearColorPicker/LinearColorPanel.js

@@ -0,0 +1,77 @@
+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 _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 LinearPointsBar from "./LinearPointsBar";
+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 LinearColorPanel(_ref) {
+  var _value$stops$currentI;
+  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
+  });
+  var handleChange = function handleChange(color) {
+    var newStops = _toConsumableArray(value.stops);
+    newStops[currentIndex].color = color;
+    onChange(_objectSpread(_objectSpread({}, value), {}, {
+      stops: newStops
+    }));
+  };
+  var handleIndexSelect = function handleIndexSelect(index) {
+    setCurrentIndex(index);
+    setUpdateKey(function (prev) {
+      return prev + 1;
+    });
+  };
+  var handleSelect = function handleSelect(val) {
+    if (typeof val === 'string') {
+      handleChange(val);
+    } else {
+      onChange(val);
+    }
+    setUpdateKey(function (prev) {
+      return prev + 1;
+    });
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(LinearPointsBar, {
+      active: currentIndex,
+      value: value,
+      onSelect: handleIndexSelect,
+      onChange: onChange
+    }), /*#__PURE__*/_jsx(Panel, {
+      color: (_value$stops$currentI = value.stops[currentIndex]) === null || _value$stops$currentI === void 0 ? void 0 : _value$stops$currentI.color,
+      onChange: handleChange
+    }, updateKey), /*#__PURE__*/_jsx(History, {
+      type: "linear",
+      onSelect: handleSelect
+    })]
+  });
+}

package/dist/ColorsPicker/LinearColorPicker/LinearPointsBar.d.ts

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

package/dist/ColorsPicker/LinearColorPicker/LinearPointsBar.js

@@ -0,0 +1,140 @@
+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 _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 _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 _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 _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; }
+import { SwapOutlined } from '@easyv/react-icons';
+import classNames from 'classnames';
+import { getLinearGradientStyle, getMiddleColor } from "../utils";
+import { useKeyPress } from 'ahooks';
+import { useControlBlock } from "../hooks/useControlBlock";
+import { useEffect, useRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function LinearPointsBar(_ref) {
+  var active = _ref.active,
+    value = _ref.value,
+    onSelect = _ref.onSelect,
+    _onChange = _ref.onChange;
+  var currentIndexRef = useRef(active);
+  var valueRef = useRef(value);
+  useEffect(function () {
+    currentIndexRef.current = active;
+  }, [active]);
+  useEffect(function () {
+    valueRef.current = value;
+  }, [value]);
+  var handleDelete = function handleDelete() {
+    if (value.stops.length <= 2) return;
+    var newStops = _toConsumableArray(value.stops);
+    newStops.splice(active, 1);
+    _onChange(_objectSpread(_objectSpread({}, value), {}, {
+      stops: newStops
+    }));
+    handleSelect(Math.max(active - 1, 0));
+  };
+  var handleSelect = function handleSelect(newIndex) {
+    currentIndexRef.current = newIndex;
+    onSelect(newIndex);
+  };
+  useKeyPress('Backspace', function (e) {
+    e.stopImmediatePropagation();
+
+    // 过滤掉表单的删除
+    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+      return;
+    }
+    handleDelete();
+  });
+  var sortedStops = value.stops.concat().sort(function (a, b) {
+    return a.offset - b.offset;
+  });
+  var _useControlBlock = useControlBlock({
+      value: [-Infinity, 0],
+      onChange: function onChange(val, e) {
+        if (e.type === 'mousedown') {
+          if (e.target !== blockRef.current) {
+            var _e$target, _e$target$dataset;
+            handleSelect(Number((_e$target = e.target) === null || _e$target === void 0 ? void 0 : (_e$target$dataset = _e$target.dataset) === null || _e$target$dataset === void 0 ? void 0 : _e$target$dataset.index));
+          } else {
+            var newStop = {
+              offset: val[0] * 100,
+              color: getMiddleColor(value.stops, val[0] * 100)
+            };
+            var newValue = _objectSpread(_objectSpread({}, value), {}, {
+              stops: [].concat(_toConsumableArray(value.stops), [newStop])
+            });
+            valueRef.current = newValue;
+            _onChange(newValue);
+            handleSelect(value.stops.length);
+          }
+        } else {
+          _onChange(_objectSpread(_objectSpread({}, value), {}, {
+            stops: valueRef.current.stops.map(function (d, i) {
+              return _objectSpread(_objectSpread({}, d), {}, {
+                offset: i === currentIndexRef.current ? val[0] * 100 : d.offset
+              });
+            })
+          }));
+        }
+      }
+    }),
+    blockRef = _useControlBlock.blockRef,
+    onMouseDown = _useControlBlock.onMouseDown;
+  var handleRevert = function handleRevert() {
+    var newStops = value.stops.map(function (d) {
+      return _objectSpread(_objectSpread({}, d), {}, {
+        offset: 100 - d.offset
+      });
+    });
+    _onChange(_objectSpread(_objectSpread({}, value), {}, {
+      stops: newStops
+    }));
+  };
+  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: sortedStops[0].color
+        }
+      }), /*#__PURE__*/_jsx("div", {
+        className: "colors-picker-points-bar-next-half",
+        style: {
+          backgroundColor: sortedStops[sortedStops.length - 1].color
+        }
+      }), /*#__PURE__*/_jsx("div", {}), /*#__PURE__*/_jsx("div", {
+        ref: blockRef,
+        className: "colors-picker-linear-points-bar-color",
+        style: getLinearGradientStyle(_objectSpread(_objectSpread({}, value), {}, {
+          angle: 90
+        })),
+        onMouseDown: onMouseDown,
+        children: value === null || value === void 0 ? void 0 : value.stops.map(function (d, i) {
+          return /*#__PURE__*/_jsx("div", {
+            className: classNames('colors-picker-linear-point', {
+              active: active === i
+            }),
+            style: {
+              left: "".concat(d.offset, "%")
+            },
+            "data-index": i
+          }, "".concat(d.color, "_").concat(i));
+        })
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "colors-picker-linear-points-switch",
+      onClick: handleRevert,
+      children: /*#__PURE__*/_jsx(SwapOutlined, {})
+    })]
+  });
+}

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

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

package/dist/ColorsPicker/LinearColorPicker/index.js

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

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

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