@easyv/react-components 0.2.3 → 0.2.5

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

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

package/dist/ColorsPicker/LinearColorPicker/LinearColorInput.js

@@ -11,8 +11,11 @@ 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,
+    disabledOutAlpha = _ref.disabledOutAlpha,
     onChange = _ref.onChange,
     onTrigger = _ref.onTrigger;
+  var _value$opacity = value.opacity,
+    opacity = _value$opacity === void 0 ? 1 : _value$opacity;
   var handleAlphaChange = function handleAlphaChange(val) {
     onChange(_objectSpread(_objectSpread({}, value), {}, {
       opacity: val
@@ -34,11 +37,11 @@ export default function LinearColorInput(_ref) {
       prefix: "#",
       value: '线性渐变',
       disabled: true
-    }), /*#__PURE__*/_jsx(BlurInput, {
+    }), !disabledOutAlpha && /*#__PURE__*/_jsx(BlurInput, {
       size: "small",
       suffix: "%",
       className: 'pure-color-picker-alpha',
-      value: (value.opacity * 100).toFixed(0),
+      value: (opacity * 100).toFixed(0),
       validate: function validate(val) {
         return +val >= 0 && +val <= 100;
       },

package/dist/ColorsPicker/LinearColorPicker/LinearColorPanel.js

@@ -14,13 +14,12 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 { useEffect, useRef, 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;
@@ -38,6 +37,11 @@ export default function LinearColorPanel(_ref) {
   useHistory({
     value: value
   });
+  var panelRef = useRef(null);
+  useEffect(function () {
+    var _panelRef$current;
+    (_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.focus();
+  }, []);
   var handleChange = function handleChange(color, complete) {
     var newStops = _toConsumableArray(value.stops);
     newStops[currentIndex].color = color;
@@ -68,7 +72,10 @@ export default function LinearColorPanel(_ref) {
       return prev + 1;
     });
   };
-  return /*#__PURE__*/_jsxs(_Fragment, {
+  return /*#__PURE__*/_jsxs("div", {
+    tabIndex: 0,
+    id: "linear-colors-panel",
+    ref: panelRef,
     children: [/*#__PURE__*/_jsx(LinearPointsBar, {
       active: currentIndex,
       value: value,

package/dist/ColorsPicker/index.js

@@ -25,6 +25,7 @@ function ColorsPicker(props) {
   var _useColorsPicker = useColorsPicker(props),
     type = _useColorsPicker.type,
     value = _useColorsPicker.value,
+    disabledOutAlpha = _useColorsPicker.disabledOutAlpha,
     onChange = _useColorsPicker.onChange,
     onChangeComplete = _useColorsPicker.onChangeComplete;
   var _useState = useState(false),
@@ -63,6 +64,7 @@ function ColorsPicker(props) {
             onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(val);
           };
           return /*#__PURE__*/_jsx(LinearColorInput, {
+            disabledOutAlpha: disabledOutAlpha,
             value: value,
             onChange: _handleChange,
             onTrigger: function onTrigger() {
@@ -108,6 +110,7 @@ function ColorsPicker(props) {
               });
             } else if (val.type === 'linear') {
               return /*#__PURE__*/_jsx(LinearColorInput, {
+                disabledOutAlpha: disabledOutAlpha,
                 value: val.linear,
                 onChange: function onChange(newValue) {
                   return onValueChange(_objectSpread(_objectSpread({}, val), {}, {

package/dist/ColorsPicker/interface.d.ts

@@ -19,8 +19,8 @@ interface StopItem {
 }
 export interface GradientColorValue {
     stops: StopItem[];
-    angle: number;
-    opacity: number;
+    angle?: number;
+    opacity?: number;
 }
 export interface ColorValueObj {
     type: ColorType;
@@ -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;
+    disabledOutAlpha?: boolean;
     onChange?: (value: T extends ColorType ? ColorValueMap[T] : ColorValueObj) => void;
     onChangeComplete?: (value: T extends ColorType ? ColorValueMap[T] : ColorValueObj) => void;
 }

package/dist/ColorsPicker/utils.js

@@ -218,8 +218,10 @@ export function getHexValue(hex) {
 }
 export function getLinearGradientStyle(color) {
   var stops = color.stops,
-    angle = color.angle,
-    opacity = color.opacity;
+    _color$angle = color.angle,
+    angle = _color$angle === void 0 ? 0 : _color$angle,
+    _color$opacity = color.opacity,
+    opacity = _color$opacity === void 0 ? 1 : _color$opacity;
   var sortedColors = stops.concat().sort(function (a, b) {
     return a.offset - b.offset;
   });

package/package.json

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

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

@@ -1,10 +0,0 @@
-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/PanelContainer.d.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from 'react';
-interface PanelContainerProps {
-    children: ReactNode;
-}
-export default function PanelContainer({ children }: PanelContainerProps): import("react/jsx-runtime").JSX.Element;
-export {};