@easyv/react-components 0.2.10 → 0.3.1

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

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

package/dist/ColorsPicker/LinearColorPicker/LinearColorInput.js

@@ -12,6 +12,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function LinearColorInput(_ref) {
   var value = _ref.value,
     disabledOutAlpha = _ref.disabledOutAlpha,
+    disabledAlpha = _ref.disabledAlpha,
     onChange = _ref.onChange,
     onTrigger = _ref.onTrigger;
   var _value$opacity = value.opacity,
@@ -40,7 +41,7 @@ export default function LinearColorInput(_ref) {
         value: '线性渐变',
         disabled: true
       })]
-    }), !disabledOutAlpha && /*#__PURE__*/_jsx(BlurInput, {
+    }), !disabledAlpha && !disabledOutAlpha && /*#__PURE__*/_jsx(BlurInput, {
       size: "small",
       suffix: "%",
       className: 'pure-color-picker-alpha',

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

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

package/dist/ColorsPicker/LinearColorPicker/LinearColorPanel.js

@@ -19,11 +19,13 @@ import Panel from "../Panel";
 import History from "../History";
 import LinearPointsBar from "./LinearPointsBar";
 import useHistory from "./useHistory";
+import tinycolor from 'tinycolor2';
 import { jsx as _jsx } 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,
+    disabledAlpha = _ref.disabledAlpha,
     onChange = _ref.onChange,
     onChangeComplete = _ref.onChangeComplete;
   var _useState = useState(0),
@@ -62,11 +64,24 @@ export default function LinearColorPanel(_ref) {
     });
   };
   var handleSelect = function handleSelect(val) {
-    if (typeof val === 'string') {
-      handleChange(val, true);
+    var newValue = val;
+    if (typeof newValue === 'string') {
+      if (disabledAlpha) {
+        newValue = tinycolor(newValue).setAlpha(1).toHexString();
+      }
+      handleChange(newValue, true);
     } else {
-      onChange === null || onChange === void 0 ? void 0 : onChange(val);
-      onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(val);
+      if (disabledAlpha) {
+        newValue = _objectSpread(_objectSpread({}, newValue), {}, {
+          stops: newValue.stops.map(function (stop) {
+            return _objectSpread(_objectSpread({}, stop), {}, {
+              color: tinycolor(stop.color).setAlpha(1).toHexString()
+            });
+          })
+        });
+      }
+      onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+      onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(newValue);
     }
     setUpdateKey(function (prev) {
       return prev + 1;
@@ -83,6 +98,7 @@ export default function LinearColorPanel(_ref) {
       onChange: onChange,
       onChangeComplete: onChangeComplete
     }), /*#__PURE__*/_jsx(Panel, {
+      disabledAlpha: disabledAlpha,
       color: (_value$stops$currentI = value.stops[currentIndex]) === null || _value$stops$currentI === void 0 ? void 0 : _value$stops$currentI.color,
       onChange: handleChange,
       onChangeComplete: function onChangeComplete(val) {

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

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

package/dist/ColorsPicker/MixedColorPicker/MixedPanel.d.ts

@@ -2,8 +2,9 @@ import { ColorType, ColorValueObj } from '../interface';
 interface MixedPanelProps {
     type: ColorType[];
     value: ColorValueObj;
+    disabledAlpha?: boolean;
     onChange?: (value: ColorValueObj) => void;
     onChangeComplete?: (value: ColorValueObj) => void;
 }
-export default function MixedPanel({ type, value, onChange, onChangeComplete, }: MixedPanelProps): import("react/jsx-runtime").JSX.Element;
+export default function MixedPanel({ type, value, disabledAlpha, onChange, onChangeComplete, }: MixedPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ColorsPicker/MixedColorPicker/MixedPanel.js

@@ -14,6 +14,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function MixedPanel(_ref) {
   var type = _ref.type,
     value = _ref.value,
+    disabledAlpha = _ref.disabledAlpha,
     onChange = _ref.onChange,
     onChangeComplete = _ref.onChangeComplete;
   var handleChange = function handleChange(type) {
@@ -40,6 +41,7 @@ export default function MixedPanel(_ref) {
         {
           return /*#__PURE__*/_jsx(PureColorPanel, {
             value: value['pure'],
+            disabledAlpha: disabledAlpha,
             onChange: handleChange('pure'),
             onChangeComplete: handleChangeComplete('pure')
           });
@@ -48,6 +50,7 @@ export default function MixedPanel(_ref) {
         {
           return /*#__PURE__*/_jsx(PuresColorPanel, {
             value: value['pures'],
+            disabledAlpha: disabledAlpha,
             onChange: handleChange('pures'),
             onChangeComplete: handleChangeComplete('pures')
           });
@@ -56,6 +59,7 @@ export default function MixedPanel(_ref) {
         {
           return /*#__PURE__*/_jsx(LinearColorPanel, {
             value: value['linear'],
+            disabledAlpha: disabledAlpha,
             onChange: handleChange('linear'),
             onChangeComplete: handleChangeComplete('linear')
           });

package/dist/ColorsPicker/Panel.d.ts

@@ -1,7 +1,8 @@
 interface PanelProps {
+    disabledAlpha?: boolean;
     color: string;
     onChange?: (color: string) => void;
     onChangeComplete?: (color: string) => void;
 }
-export default function Panel({ color: propsColor, onChange, onChangeComplete, }: PanelProps): import("react/jsx-runtime").JSX.Element;
+export default function Panel({ disabledAlpha, color: propsColor, onChange, onChangeComplete, }: PanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ColorsPicker/Panel.js

@@ -21,7 +21,8 @@ import { PipetteOutlined } from '@easyv/react-icons';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function Panel(_ref) {
-  var propsColor = _ref.color,
+  var disabledAlpha = _ref.disabledAlpha,
+    propsColor = _ref.color,
     onChange = _ref.onChange,
     onChangeComplete = _ref.onChangeComplete;
   var _useState = useState(function () {
@@ -157,7 +158,7 @@ export default function Panel(_ref) {
               v: v
             }, true);
           }
-        }), /*#__PURE__*/_jsx(ControlBar, {
+        }), !disabledAlpha && /*#__PURE__*/_jsx(ControlBar, {
           type: "alpha",
           color: color,
           onChange: handleAlphaChange,
@@ -237,7 +238,7 @@ export default function Panel(_ref) {
           className: "colors-picker-input-label",
           children: "B"
         })]
-      }), /*#__PURE__*/_jsxs("div", {
+      }), !disabledAlpha && /*#__PURE__*/_jsxs("div", {
         className: "colors-picker-input colors-picker-input-a",
         children: [/*#__PURE__*/_jsx(BlurInput, {
           size: "small",

package/dist/ColorsPicker/PureColorPicker/PureColorInput.d.ts

@@ -1,7 +1,8 @@
 interface PureColorInputProps {
+    disabledAlpha?: boolean;
     value: string;
     onTrigger: () => void;
     onChange?: (val: string) => void;
 }
-export default function PureColorInput({ value, onChange, onTrigger, }: PureColorInputProps): import("react/jsx-runtime").JSX.Element;
+export default function PureColorInput({ disabledAlpha, value, onChange, onTrigger, }: PureColorInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ColorsPicker/PureColorPicker/PureColorInput.js

@@ -6,12 +6,13 @@ import Preview from "../common/Preview";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function PureColorInput(_ref) {
-  var value = _ref.value,
+  var disabledAlpha = _ref.disabledAlpha,
+    value = _ref.value,
     onChange = _ref.onChange,
     onTrigger = _ref.onTrigger;
   var hexRef = useRef(null);
   var hexString = tinycolor(value).toHexString();
-  var alpha = tinycolor(value).getAlpha();
+  var alpha = disabledAlpha ? 1 : tinycolor(value).getAlpha();
   var handleHexChange = function handleHexChange(val) {
     var hexVal = getHexValue(val);
     var hsv = tinycolor(hexVal).toHsv();
@@ -48,7 +49,7 @@ export default function PureColorInput(_ref) {
         },
         onChange: handleHexChange
       })]
-    }), /*#__PURE__*/_jsx(BlurInput, {
+    }), !disabledAlpha && /*#__PURE__*/_jsx(BlurInput, {
       size: "small",
       suffix: "%",
       className: 'pure-color-picker-alpha',

package/dist/ColorsPicker/PureColorPicker/PureColorPanel.d.ts

@@ -1,8 +1,9 @@
 import { ColorValueMap } from '../interface';
 interface PureColorPanelProps {
+    disabledAlpha?: boolean;
     value: ColorValueMap['pure'];
     onChange?: (value: ColorValueMap['pure']) => void;
     onChangeComplete?: (value: ColorValueMap['pure']) => void;
 }
-export default function PureColorPanel({ value, onChange, onChangeComplete, }: PureColorPanelProps): import("react/jsx-runtime").JSX.Element;
+export default function PureColorPanel({ disabledAlpha, value, onChange, onChangeComplete, }: PureColorPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ColorsPicker/PureColorPicker/PureColorPanel.js

@@ -8,11 +8,13 @@ import Panel from "../Panel";
 import History from "../History";
 import { useState } from 'react';
 import useHistory from "./useHistory";
+import tinycolor from 'tinycolor2';
 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 PureColorPanel(_ref) {
-  var value = _ref.value,
+  var disabledAlpha = _ref.disabledAlpha,
+    value = _ref.value,
     onChange = _ref.onChange,
     onChangeComplete = _ref.onChangeComplete;
   var _useState = useState(0),
@@ -20,8 +22,12 @@ export default function PureColorPanel(_ref) {
     updateKey = _useState2[0],
     setUpdateKey = _useState2[1];
   var handleSelect = function handleSelect(val) {
-    onChange === null || onChange === void 0 ? void 0 : onChange(val);
-    onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(val);
+    var newValue = val;
+    if (disabledAlpha) {
+      newValue = tinycolor(newValue).setAlpha(1).toHex();
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(newValue);
     setUpdateKey(function (prev) {
       return prev + 1;
     });
@@ -31,6 +37,7 @@ export default function PureColorPanel(_ref) {
   });
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Panel, {
+      disabledAlpha: disabledAlpha,
       color: value,
       onChange: onChange,
       onChangeComplete: onChangeComplete

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

@@ -1,5 +1,6 @@
 import { ColorValueMap } from '../interface';
 interface PuresColorInputProps {
+    disabledAlpha?: boolean;
     value: ColorValueMap['pures'];
     onTrigger: () => void;
 }

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

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

package/dist/ColorsPicker/PuresColorPicker/PuresColorPanel.js

@@ -13,10 +13,12 @@ import Panel from "../Panel";
 import History from "../History";
 import PuresCards from "./PuresCards";
 import useHistory from "./useHistory";
+import tinycolor from 'tinycolor2';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function PuresColorPanel(_ref) {
-  var value = _ref.value,
+  var disabledAlpha = _ref.disabledAlpha,
+    value = _ref.value,
     onChange = _ref.onChange,
     onChangeComplete = _ref.onChangeComplete;
   var _useState = useState(0),
@@ -69,8 +71,12 @@ export default function PuresColorPanel(_ref) {
     setUpdateKey(updateKey + 1);
   };
   var handleHistorySelect = function handleHistorySelect(val) {
+    var newVal = val;
+    if (disabledAlpha) {
+      newVal = tinycolor(newVal).setAlpha(1).toHexString();
+    }
     var newValue = _toConsumableArray(value);
-    newValue[currentIndex] = val;
+    newValue[currentIndex] = newVal;
     onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
     onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(newValue);
     setUpdateKey(updateKey + 1);
@@ -86,6 +92,7 @@ export default function PuresColorPanel(_ref) {
       onDelete: handleDelete,
       onSelect: handleSelect
     }), /*#__PURE__*/_jsx(Panel, {
+      disabledAlpha: disabledAlpha,
       color: value[currentIndex],
       onChange: handleChange,
       onChangeComplete: handleChangeComplete

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

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

package/dist/ColorsPicker/RangeColorPicker/RangeColorPanel.js

@@ -12,11 +12,13 @@ import { useState } from 'react';
 import Panel from "../Panel";
 import History from "../History";
 import RangePointsBar from "./RangePointBar";
+import tinycolor from 'tinycolor2';
 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,
+    disabledAlpha = _ref.disabledAlpha,
     onChange = _ref.onChange,
     onChangeComplete = _ref.onChangeComplete;
   var _useState = useState(0),
@@ -37,7 +39,11 @@ export default function RangeColorPanel(_ref) {
     }
   };
   var handleSelect = function handleSelect(val) {
-    handleChange(val, true);
+    var newValue = val;
+    if (disabledAlpha) {
+      newValue = tinycolor(newValue).setAlpha(1).toHexString();
+    }
+    handleChange(newValue, true);
     setUpdateKey(function (prev) {
       return prev + 1;
     });
@@ -54,6 +60,7 @@ export default function RangeColorPanel(_ref) {
       value: value,
       onSelect: handleIndexSelect
     }), /*#__PURE__*/_jsx(Panel, {
+      disabledAlpha: disabledAlpha,
       color: value[currentIndex],
       onChange: handleChange,
       onChangeComplete: function onChangeComplete(val) {

package/dist/ColorsPicker/index.js

@@ -25,6 +25,7 @@ function ColorsPicker(props) {
   var _useColorsPicker = useColorsPicker(props),
     type = _useColorsPicker.type,
     value = _useColorsPicker.value,
+    disabledAlpha = _useColorsPicker.disabledAlpha,
     disabledOutAlpha = _useColorsPicker.disabledOutAlpha,
     onChange = _useColorsPicker.onChange,
     onChangeComplete = _useColorsPicker.onChangeComplete;
@@ -41,6 +42,7 @@ function ColorsPicker(props) {
             onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(val);
           };
           return /*#__PURE__*/_jsx(PureColorInput, {
+            disabledAlpha: disabledAlpha,
             value: value,
             onChange: handleChange,
             onTrigger: function onTrigger() {
@@ -51,6 +53,7 @@ function ColorsPicker(props) {
       case 'pures':
         {
           return /*#__PURE__*/_jsx(PuresColorInput, {
+            disabledAlpha: disabledAlpha,
             value: value,
             onTrigger: function onTrigger() {
               return setVisible(!visible);
@@ -64,6 +67,7 @@ function ColorsPicker(props) {
             onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(val);
           };
           return /*#__PURE__*/_jsx(LinearColorInput, {
+            disabledAlpha: disabledAlpha,
             disabledOutAlpha: disabledOutAlpha,
             value: value,
             onChange: _handleChange,
@@ -91,6 +95,7 @@ function ColorsPicker(props) {
             };
             if (val.type === 'pure') {
               return /*#__PURE__*/_jsx(PureColorInput, {
+                disabledAlpha: disabledAlpha,
                 value: val.pure,
                 onChange: function onChange(newValue) {
                   return onValueChange(_objectSpread(_objectSpread({}, val), {}, {
@@ -103,6 +108,7 @@ function ColorsPicker(props) {
               });
             } else if (val.type === 'pures') {
               return /*#__PURE__*/_jsx(PuresColorInput, {
+                disabledAlpha: disabledAlpha,
                 value: val.pures,
                 onTrigger: function onTrigger() {
                   return setVisible(!visible);
@@ -111,6 +117,7 @@ function ColorsPicker(props) {
             } else if (val.type === 'linear') {
               return /*#__PURE__*/_jsx(LinearColorInput, {
                 disabledOutAlpha: disabledOutAlpha,
+                disabledAlpha: disabledAlpha,
                 value: val.linear,
                 onChange: function onChange(newValue) {
                   return onValueChange(_objectSpread(_objectSpread({}, val), {}, {
@@ -140,6 +147,7 @@ function ColorsPicker(props) {
         case 'pure':
           {
             return /*#__PURE__*/_jsx(PureColorPanel, {
+              disabledAlpha: disabledAlpha,
               value: value,
               onChange: onChange,
               onChangeComplete: onChangeComplete
@@ -148,6 +156,7 @@ function ColorsPicker(props) {
         case 'pures':
           {
             return /*#__PURE__*/_jsx(PuresColorPanel, {
+              disabledAlpha: disabledAlpha,
               value: value,
               onChange: onChange,
               onChangeComplete: onChangeComplete
@@ -156,6 +165,7 @@ function ColorsPicker(props) {
         case 'linear':
           {
             return /*#__PURE__*/_jsx(LinearColorPanel, {
+              disabledAlpha: disabledAlpha,
               value: value,
               onChange: onChange,
               onChangeComplete: onChangeComplete
@@ -164,6 +174,7 @@ function ColorsPicker(props) {
         case 'range':
           {
             return /*#__PURE__*/_jsx(RangeColorPanel, {
+              disabledAlpha: disabledAlpha,
               value: value,
               onChange: onChange,
               onChangeComplete: onChangeComplete
@@ -174,6 +185,7 @@ function ColorsPicker(props) {
             if (Array.isArray(type)) {
               return /*#__PURE__*/_jsx(MixedPanel, {
                 type: type,
+                disabledAlpha: disabledAlpha,
                 value: value,
                 onChange: onChange,
                 onChangeComplete: onChangeComplete

package/dist/ColorsPicker/interface.d.ts

@@ -33,6 +33,7 @@ export declare type ColorsPickerType = ColorType | ColorType[];
 export interface ColorsPickerProps<T extends ColorsPickerType> {
     type: T;
     value: T extends ColorType ? ColorValueMap[T] : ColorValueObj;
+    disabledAlpha?: boolean;
     disabledOutAlpha?: boolean;
     onChange?: (value: T extends ColorType ? ColorValueMap[T] : ColorValueObj) => void;
     onChangeComplete?: (value: T extends ColorType ? ColorValueMap[T] : ColorValueObj) => void;

package/dist/ColorsPicker/style/index.less

@@ -19,6 +19,12 @@
 
 .colors-picker-control-bars {
   flex: 1;
+
+  &:has(:only-child) {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
 }
 
 .colors-picker-input-wrapper {

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@easyv/react-components",
-  "version": "0.2.10",
+  "version": "0.3.1",
   "description": "a react component library base on arco design",
   "license": "MIT",
+  "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [