@easyv/react-components 0.0.15 → 0.0.17

package/dist/Color/Preview.js

@@ -29,7 +29,7 @@ export default function Preview(_ref) {
   var previewRef = useRef(null);
   var pickerRef = useRef(null);
   var deferedShow = useDeferredValue(show);
-  var handleClick = function handleClick(e) {
+  var handleClick = function handleClick() {
     setShow(true);
   };
   var handleHide = function handleHide() {

package/dist/Color/index.js

@@ -23,8 +23,8 @@ export default function Color(_ref) {
       onChange(newValue);
     }
   };
-  var handleHexChange = function handleHexChange(hex) {
-    hex = hex.startsWith('#') ? hex : '#' + hex;
+  var handleHexChange = function handleHexChange(hexParam) {
+    var hex = hexParam.startsWith('#') ? hexParam : '#' + hexParam;
     hex = hex.toUpperCase();
     var hexReg = /^#([0-9|A-F]{3}|[0-9|A-F]{6})$/;
     if (!hexReg.test(hex)) {

package/dist/ColorPicker/Panel.js

@@ -6,27 +6,27 @@ 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,
+  var _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 lastColor = useRef(color);
   var colorObj = new Color(color);
   useMemo(function () {
-    isControlled.current = true;
-  }, [active, record]);
+    lastColor.current = color;
+  }, [color]);
   var _useDebounceFn = useDebounceFn(function (_ref2) {
-      var color = _ref2.color,
+      var changedColor = _ref2.color,
         alpha = _ref2.alpha;
-      isControlled.current = false;
+      var isSameColor = new Color(changedColor).hex === new Color(lastColor.current).hex && new Color(changedColor).alpha === new Color(lastColor.current).alpha;
+      if (isSameColor) {
+        return;
+      }
       var newColor;
       var rgbColor;
       if (alpha === 100) {
-        newColor = color;
+        newColor = changedColor;
       } else {
-        rgbColor = new Color(color).RGB;
+        rgbColor = new Color(changedColor).RGB;
         newColor = "RGBA(".concat(rgbColor[0], ",").concat(rgbColor[1], ",").concat(rgbColor[2], ",").concat(alpha / 100, ")");
       }
       onChange(newColor);
@@ -36,15 +36,11 @@ export default /*#__PURE__*/memo(function ColorPickerPanel(_ref) {
       trailing: false
     }),
     run = _useDebounceFn.run;
-  return isControlled.current ? /*#__PURE__*/_jsx(Panel, {
+  return /*#__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/index.js

@@ -70,8 +70,7 @@ function CustomColorPicker(_ref, ref) {
   useEffect(function () {
     return function () {
       var lastColor = lastColorRef.current;
-      console.log('lastColor', lastColor);
-      if (lastColor != null) {
+      if (lastColor) {
         if (typeof lastColor === 'string') {
           var newColors = [lastColor].concat(usedPureColors || []);
           newColors = Array.from(new Set(newColors)).slice(0, 16);
@@ -190,12 +189,12 @@ function CustomColorPicker(_ref, ref) {
           className: 'arco-color-picker-type',
           children: [/*#__PURE__*/_jsx("span", {
             className: classNames('arco-color-picker-circle', 'arco-color-picker-pure', _defineProperty({}, 'arco-color-picker-active', color.type === 'pure')),
-            onClick: function onClick(e) {
+            onClick: function onClick() {
               return handleTypeChange('pure');
             }
           }), /*#__PURE__*/_jsx("span", {
             className: classNames('arco-color-picker-circle', 'arco-color-picker-linear', _defineProperty({}, 'arco-color-picker-active', color.type === 'linear')),
-            onClick: function onClick(e) {
+            onClick: function onClick() {
               return handleTypeChange('linear');
             }
           })]

package/dist/ColorPicker/utils.d.ts

@@ -1,4 +1,5 @@
-export declare function resolveColor(color: string): {
+export declare function toHex(x: any): string;
+export declare function resolveColor(colorParam: string): {
     r?: undefined;
     g?: undefined;
     b?: undefined;
@@ -11,7 +12,6 @@ export declare function resolveColor(color: string): {
     a: any;
     hex: string;
 };
-export declare function toHex(x: any): string;
 export declare function transformColor(color: any, a: any): string | undefined;
 export declare function getBackgroundAccordingColor(color: any, fixedAngle?: number): {
     backgroundImage: string;

package/dist/ColorPicker/utils.js

@@ -1,11 +1,14 @@
 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); }
-export function resolveColor(color) {
-  if (!color || typeof color !== 'string') {
+export function toHex(x) {
+  return ('0' + parseInt(x).toString(16)).slice(-2);
+}
+export function resolveColor(colorParam) {
+  if (!colorParam || typeof colorParam !== 'string') {
     return {};
   }
 
   // 转为小写并去除空格
-  color = color.toLowerCase().replace(/\s+/g, '');
+  var color = colorParam.toLowerCase().replace(/\s+/g, '');
   var hexReg = /^#([0-9|a-f]{3}|[0-9|a-f]{6})$/;
   var rgbReg = /^(rgb\(\d+,\d+,\d+\)|rgba\(\d+,\d+,\d+,(\d+)?(\.)?(\d+)?\))$/;
   // const rgbReg1 = /^(rgb\(\d+,\d+,\d+\)|rgba\((\d+)?(\.)?(\d+)?,(\d+)?(\.)?(\d+)?,(\d+)?(\.)?(\d+)?,(\d+)?(\.)?(\d+)?\))$/;
@@ -41,9 +44,6 @@ export function resolveColor(color) {
     hex: "#".concat(toHex(r)).concat(toHex(g)).concat(toHex(b))
   };
 }
-export function toHex(x) {
-  return ('0' + parseInt(x).toString(16)).slice(-2);
-}
 export function transformColor(color, a) {
   var _resolveColor = resolveColor(color),
     r = _resolveColor.r,
@@ -143,7 +143,7 @@ export function getBackgroundAccordingColor(color, fixedAngle) {
         }
       });
       return {
-        backgroundImage: "linear-gradient(".concat(fixedAngle != undefined ? fixedAngle : angle, "deg, ").concat(_colors.join(','), ")")
+        backgroundImage: "linear-gradient(".concat(fixedAngle ? fixedAngle : angle, "deg, ").concat(_colors.join(','), ")")
       };
     } else {
       return {

package/dist/Modal/index.less

@@ -1,9 +1,24 @@
 .arco-modal {
   .arco-modal-header {
+    height: 56px;
+    padding: 0 24px;
+
     .arco-modal-title {
       text-align: left;
     }
   }
+
+  .arco-modal-close-icon {
+    font-size: 14px;
+  }
+
+  .arco-modal-content {
+    padding: 24px;
+  }
+
+  .arco-modal-footer {
+    padding: 12px 24px;
+  }
 }
 
 .arco-modal-simple {

package/dist/RangeColor/Panel.js

@@ -54,7 +54,7 @@ function CustomColorPicker(_ref, ref) {
   useEffect(function () {
     return function () {
       var lastColor = lastColorRef.current;
-      if (lastColor != null) {
+      if (lastColor) {
         if (typeof lastColor === 'string') {
           var newColors = [lastColor].concat(usedPureColors || []);
           newColors = Array.from(new Set(newColors)).slice(0, 16);
@@ -72,11 +72,11 @@ function CustomColorPicker(_ref, ref) {
       e.stopPropagation();
       if (e.key === 'Backspace') {
         if (color.length > 2) {
-          color = color.filter(function (d, i) {
+          var resultColor = color.filter(function (d, i) {
             return i !== active;
           });
           setActive(active > 0 ? active - 1 : 0);
-          onChange(color);
+          onChange(resultColor);
         }
       }
     };
@@ -116,7 +116,7 @@ function CustomColorPicker(_ref, ref) {
   // 切换dot的排列方向
   var handleReverseColor = function handleReverseColor() {
     var copyStops = color.slice();
-    var newStops = copyStops.reduce(function (all, item, index) {
+    var newStops = copyStops.reduce(function (all, item) {
       var obj = {};
       obj['offset'] = 100 - item.offset;
       obj['color'] = item.color;

package/dist/RangeColor/Points.js

@@ -35,6 +35,8 @@ export default function Points(props) {
         return i === active ? _objectSpread(_objectSpread({}, d), {}, {
           offset: newOffset
         }) : d;
+      }).sort(function (a, b) {
+        return a.offset - b.offset;
       });
       onChange(newDots);
     }

package/dist/hooks/useEventListener.js

@@ -1,13 +1,14 @@
 import { useEffect, useRef } from 'react';
 export function useEventListener(eventName, handler) {
   var element = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : window;
-  var savedHandler = useRef(function (e) {});
+  var savedHandler = useRef(null);
   useEffect(function () {
     savedHandler.current = handler;
   }, [handler]);
   useEffect(function () {
     var eventListener = function eventListener(event) {
-      return savedHandler.current(event);
+      var _savedHandler$current;
+      return (_savedHandler$current = savedHandler.current) === null || _savedHandler$current === void 0 ? void 0 : _savedHandler$current.call(savedHandler, event);
     };
     element.addEventListener(eventName, eventListener);
     return function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/react-components",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "description": "a react component library base on arco design",
   "license": "MIT",
   "module": "dist/index.js",