@easyv/react-components 0.0.14 → 0.0.15

package/dist/Color/Preview.d.ts

@@ -0,0 +1,8 @@
+import './Preview.less';
+interface PreviewProps {
+    mode?: 'multi';
+    value: string;
+    onChange: (color: string) => void;
+}
+export default function Preview({ mode, value, onChange }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Color/Preview.js

@@ -0,0 +1,78 @@
+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, useRef, useEffect, useDeferredValue } from 'react';
+import ColorPicker from "../ColorPicker";
+import { getBackgroundAccordingColor } from "../ColorPicker/utils";
+import "./Preview.less";
+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 Preview(_ref) {
+  var mode = _ref.mode,
+    value = _ref.value,
+    onChange = _ref.onChange;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    show = _useState2[0],
+    setShow = _useState2[1];
+  var _useState3 = useState({
+      x: 0,
+      y: 0
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    position = _useState4[0],
+    setPosition = _useState4[1];
+  var previewRef = useRef(null);
+  var pickerRef = useRef(null);
+  var deferedShow = useDeferredValue(show);
+  var handleClick = function handleClick(e) {
+    setShow(true);
+  };
+  var handleHide = function handleHide() {
+    setShow(false);
+  };
+  var handleColorChange = function handleColorChange(value) {
+    onChange(value);
+  };
+  useEffect(function () {
+    if (deferedShow) {
+      var targetRect = previewRef.current.getBoundingClientRect();
+      var pickerRect = pickerRef.current.getBoundingClientRect();
+      var windowHeight = document.documentElement.clientHeight;
+      var windowWidth = document.documentElement.clientWidth;
+      var hexDOM = pickerRef.current.querySelector('.rc-color-picker-panel-params-hex');
+      if (hexDOM) {
+        hexDOM.focus();
+        hexDOM.select();
+      }
+      var top = windowHeight - targetRect.bottom < pickerRect.height ? targetRect.top - pickerRect.height < 0 ? 0 : targetRect.top - pickerRect.height : targetRect.bottom;
+      var left = windowWidth - targetRect.left < pickerRect.width ? windowWidth - pickerRect.width : targetRect.left;
+      setPosition({
+        x: left,
+        y: top
+      });
+    }
+  }, [deferedShow]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("span", {
+      className: 'arco-color-preview',
+      onClick: handleClick,
+      ref: previewRef,
+      children: /*#__PURE__*/_jsx("span", {
+        className: 'arco-color-inner',
+        style: getBackgroundAccordingColor(value)
+      })
+    }), deferedShow && /*#__PURE__*/_jsx(ColorPicker, {
+      ref: pickerRef,
+      mode: mode,
+      color: value,
+      position: position,
+      onCancel: handleHide,
+      onChange: handleColorChange
+    })]
+  });
+}

package/dist/Color/Preview.less

@@ -0,0 +1,48 @@
+.arco-color-preview {
+  position: relative;
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  border: 1px solid var(--color-border-2);
+  padding: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-bg-1);
+  cursor: pointer;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 6px;
+    right: 6px;
+    top: 6px;
+    bottom: 6px;
+    border-radius: 2px;
+    background-image: linear-gradient(
+        45deg,
+        #404040 25%,
+        transparent 0,
+        transparent 75%,
+        #404040 0
+      ),
+      linear-gradient(
+        45deg,
+        #404040 25%,
+        transparent 0,
+        transparent 75%,
+        #404040 0
+      );
+    background-color: #4a4a4a;
+    background-size: 10px 10px;
+    background-position: 0 0, 5px 5px;
+  }
+
+  .arco-color-inner {
+    width: 100%;
+    height: 100%;
+    border-radius: 2px;
+    position: relative;
+    z-index: 1;
+  }
+}

package/dist/Color/index.d.ts

@@ -0,0 +1,2 @@
+import type { ColorProps } from './interface';
+export default function Color({ value, simple, onChange }: ColorProps): import("react/jsx-runtime").JSX.Element;

package/dist/Color/index.js

@@ -0,0 +1,69 @@
+import { Input, InputNumber, Space } from "../index";
+import Preview from "./Preview";
+import { resolveColor, transformColor } from "../ColorPicker/utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function Color(_ref) {
+  var value = _ref.value,
+    simple = _ref.simple,
+    onChange = _ref.onChange;
+  if (simple) {
+    return /*#__PURE__*/_jsx(Preview, {
+      value: value,
+      onChange: onChange
+    });
+  }
+  var handleOpacityChange = function handleOpacityChange(opacity) {
+    var color = value;
+    var _ref2 = resolveColor(color) || {},
+      _ref2$hex = _ref2.hex,
+      hex = _ref2$hex === void 0 ? '' : _ref2$hex;
+    var newValue = transformColor(hex, opacity / 100);
+    if (newValue) {
+      onChange(newValue);
+    }
+  };
+  var handleHexChange = function handleHexChange(hex) {
+    hex = hex.startsWith('#') ? hex : '#' + hex;
+    hex = hex.toUpperCase();
+    var hexReg = /^#([0-9|A-F]{3}|[0-9|A-F]{6})$/;
+    if (!hexReg.test(hex)) {
+      hex = '#000000';
+    }
+    var _ref3 = resolveColor(value) || {},
+      a = _ref3.a;
+    var newValue = transformColor(hex, a);
+    if (newValue) {
+      onChange(newValue);
+    }
+  };
+  var color = value;
+  var _ref4 = resolveColor(color) || {},
+    _ref4$hex = _ref4.hex,
+    hex = _ref4$hex === void 0 ? '' : _ref4$hex,
+    _ref4$a = _ref4.a,
+    a = _ref4$a === void 0 ? 0 : _ref4$a;
+  var hexValue = hex.replace('#', '').toUpperCase();
+  var opacityValue = Math.floor(a * 100);
+  return /*#__PURE__*/_jsxs(Space, {
+    children: [/*#__PURE__*/_jsx(Preview, {
+      value: value,
+      onChange: onChange
+    }), /*#__PURE__*/_jsx(Input, {
+      size: "small",
+      prefix: "#",
+      value: hexValue,
+      onChange: handleHexChange
+    }), /*#__PURE__*/_jsx(InputNumber, {
+      size: "small",
+      value: opacityValue,
+      suffix: "%",
+      min: 0,
+      max: 100,
+      style: {
+        width: 64
+      },
+      onChange: handleOpacityChange
+    })]
+  });
+}

package/dist/Color/interface.d.ts

@@ -0,0 +1,5 @@
+export interface ColorProps {
+    value: string;
+    simple?: boolean;
+    onChange: (value: string) => void;
+}

package/dist/Color/interface.js

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

package/dist/ColorPicker/Panel.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import 'rc-color-picker/assets/index.css';
+import './Panel.less';
+interface ColorPickerPanelProps {
+    record?: unknown;
+    color: string;
+    active: number;
+    onChange: (color: string) => void;
+}
+declare const _default: import("react").NamedExoticComponent<ColorPickerPanelProps>;
+export default _default;

package/dist/ColorPicker/Panel.js

@@ -0,0 +1,50 @@
+import { memo, useMemo, useRef } from 'react';
+import { Panel } from 'rc-color-picker';
+import { useDebounceFn } from 'ahooks';
+import Color from 'rc-color-picker/lib/helpers/color';
+import 'rc-color-picker/assets/index.css';
+import "./Panel.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default /*#__PURE__*/memo(function ColorPickerPanel(_ref) {
+  var _ref$record = _ref.record,
+    record = _ref$record === void 0 ? null : _ref$record,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'rgba(255,0,255,0.5)' : _ref$color,
+    active = _ref.active,
+    onChange = _ref.onChange;
+  var isControlled = useRef(true);
+  var colorObj = new Color(color);
+  useMemo(function () {
+    isControlled.current = true;
+  }, [active, record]);
+  var _useDebounceFn = useDebounceFn(function (_ref2) {
+      var color = _ref2.color,
+        alpha = _ref2.alpha;
+      isControlled.current = false;
+      var newColor;
+      var rgbColor;
+      if (alpha === 100) {
+        newColor = color;
+      } else {
+        rgbColor = new Color(color).RGB;
+        newColor = "RGBA(".concat(rgbColor[0], ",").concat(rgbColor[1], ",").concat(rgbColor[2], ",").concat(alpha / 100, ")");
+      }
+      onChange(newColor);
+    }, {
+      wait: 100,
+      leading: true,
+      trailing: false
+    }),
+    run = _useDebounceFn.run;
+  return isControlled.current ? /*#__PURE__*/_jsx(Panel, {
+    className: 'arco-color-picker-panel',
+    color: colorObj.toHexString(),
+    alpha: colorObj.alpha,
+    mode: "RGB",
+    onChange: run
+  }) : /*#__PURE__*/_jsx(Panel, {
+    className: 'arco-color-picker-panel',
+    mode: "RGB",
+    onChange: run
+  });
+});

package/dist/ColorPicker/Panel.less

@@ -0,0 +1,159 @@
+.arco-color-picker-panel {
+  background-color: var(--color-bg-1);
+  width: 238px;
+
+  .rc-color-picker-panel-board {
+    margin: 11px 11px 0;
+  }
+
+  .rc-color-picker-panel-board-hsv {
+    width: 216px;
+  }
+
+  .rc-color-picker-panel-ribbon,
+  .rc-color-picker-panel-alpha {
+    border-radius: 0;
+    box-shadow: none;
+
+    span {
+      width: 12px;
+      height: 12px;
+      border-radius: 6px;
+      border: 2px solid #fff;
+      background-color: transparent;
+      margin-left: -6px;
+      margin-top: -3px;
+    }
+  }
+
+  .rc-color-picker-panel-wrap {
+    margin-top: 16px;
+  }
+
+  // rgb滑块
+  .rc-color-picker-panel-wrap-ribbon {
+    top: 3px;
+    left: 11px;
+    right: 50px;
+    height: 6px;
+    padding: 0 6px;
+    border-radius: 3px;
+    background-image: linear-gradient(
+      to right,
+      #ff0000 0%,
+      #ff9900 10%,
+      #cdff00 20%,
+      #35ff00 30%,
+      #00ff66 40%,
+      #00fffd 50%,
+      #0066ff 60%,
+      #3200ff 70%,
+      #cd00ff 80%,
+      #ff0099 90%,
+      #ff0000 100%
+    );
+  }
+
+  .rc-color-picker-panel-ribbon {
+    background-image: none;
+  }
+
+  // alpha 滑块
+  .rc-color-picker-panel-wrap-alpha {
+    bottom: 3px;
+    left: 11px;
+    right: 50px;
+    height: 6px;
+    padding: 0 6px;
+    border-radius: 3px;
+    background-image: linear-gradient(
+        45deg,
+        #b9b8c1 25%,
+        transparent 0,
+        transparent 75%,
+        #b9b8c1 0
+      ),
+      linear-gradient(
+        45deg,
+        #b9b8c1 25%,
+        transparent 0,
+        transparent 75%,
+        #b9b8c1 0
+      );
+    background-color: #e1e1ea;
+    background-size: 6px 6px;
+    background-position: 0 0, 3px 3px;
+  }
+
+  .rc-color-picker-panel-alpha {
+    width: auto;
+    background-image: none;
+  }
+
+  .rc-color-picker-panel-alpha-bg {
+    width: 177px;
+    border-radius: 3px;
+    margin-left: -6px;
+  }
+
+  .rc-color-picker-panel-params-input {
+    padding: 2px 11px;
+
+    input {
+      outline: none;
+      height: 24px;
+      border-color: #393b4a;
+      background-color: #2d2f38;
+      color: #bfbfbf;
+
+      &[type='number'] {
+        margin-left: 4px;
+      }
+    }
+  }
+
+  .rc-color-picker-panel-wrap-preview {
+    right: 11px;
+    border-radius: 50%;
+    overflow: hidden;
+
+    input {
+      display: none;
+    }
+  }
+
+  .rc-color-picker-panel-params-lable {
+    color: var(--easyv-text-color);
+  }
+
+  .rc-color-picker-panel-params-lable-number:hover {
+    border-radius: 0;
+    box-shadow: none;
+    background-color: transparent;
+    cursor: initial;
+  }
+
+  // 颜色板的圈
+  .rc-color-picker-panel-board span {
+    width: 12px;
+    height: 12px;
+    border-radius: 6px;
+    border-width: 2px;
+    margin: -6px 0 0 -6px;
+  }
+
+  .rc-color-picker-panel-params-hex {
+    width: 70px;
+  }
+
+  .rc-color-picker-panel-params-lable-hex {
+    width: 70px;
+  }
+
+  .rc-color-picker-panel-inner {
+    box-shadow: none;
+    border: none;
+    border-radius: 0;
+    overflow: hidden;
+  }
+}

package/dist/ColorPicker/index.d.ts

@@ -1,4 +1,10 @@
-import 'rc-color-picker/assets/index.css';
-import { ColorPickerProps } from './interface';
+/// <reference types="react" />
 import './index.less';
-export default function ColorPicker({ value, onChange, }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").ForwardRefExoticComponent<{
+    mode: any;
+    color: any;
+    position: any;
+    onChange: any;
+    onCancel: any;
+} & import("react").RefAttributes<unknown>>;
+export default _default;