@easyv/react-components 0.4.5 → 0.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist/Color/Preview.d.ts +2 -1
  2. package/dist/Color/Preview.js +7 -3
  3. package/dist/Color/Preview.less +9 -0
  4. package/dist/Color/index.d.ts +1 -1
  5. package/dist/Color/index.js +4 -0
  6. package/dist/Color/interface.d.ts +1 -0
  7. package/dist/ColorsPicker/ControlBar.d.ts +9 -0
  8. package/dist/ColorsPicker/LinearColorPicker/LinearColorInput.d.ts +2 -1
  9. package/dist/ColorsPicker/LinearColorPicker/LinearColorInput.js +9 -3
  10. package/dist/ColorsPicker/Palette.d.ts +8 -0
  11. package/dist/ColorsPicker/PureColorPicker/PureColorInput.d.ts +2 -1
  12. package/dist/ColorsPicker/PureColorPicker/PureColorInput.js +10 -3
  13. package/dist/ColorsPicker/PuresColorPicker/PuresColorInput.d.ts +2 -1
  14. package/dist/ColorsPicker/PuresColorPicker/PuresColorInput.js +7 -3
  15. package/dist/ColorsPicker/RangeColorPicker/RangeColorInput.d.ts +2 -1
  16. package/dist/ColorsPicker/RangeColorPicker/RangeColorInput.js +8 -3
  17. package/dist/ColorsPicker/common/Preview.d.ts +2 -1
  18. package/dist/ColorsPicker/common/Preview.js +6 -3
  19. package/dist/ColorsPicker/index.js +9 -0
  20. package/dist/ColorsPicker/interface.d.ts +61 -0
  21. package/dist/ColorsPicker/style/index.less +18 -0
  22. package/dist/ColorsPicker/utils.d.ts +23 -0
  23. package/dist/InputNumber/PointDrag.js +13 -4
  24. package/dist/InputNumber/index.js +3 -2
  25. package/package.json +1 -1
  26. package/dist/Button/index.d.ts +0 -8
  27. package/dist/Button/interface.d.ts +0 -6
  28. package/dist/ColorPicker/interface.d.ts +0 -4
  29. package/dist/Radio/index.d.ts +0 -9
  30. package/dist/Switch/index.d.ts +0 -4
  31. package/dist/Switch/interface.d.ts +0 -1
@@ -1,8 +1,9 @@
1
1
  import './Preview.less';
2
2
  interface PreviewProps {
3
+ disabled?: boolean;
3
4
  mode?: 'multi';
4
5
  value: string;
5
6
  onChange: (color: string) => void;
6
7
  }
7
- export default function Preview({ mode, value, onChange }: PreviewProps): import("react/jsx-runtime").JSX.Element;
8
+ export default function Preview({ disabled, mode, value, onChange, }: PreviewProps): import("react/jsx-runtime").JSX.Element;
8
9
  export {};
@@ -5,6 +5,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
5
5
  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; } }
6
6
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
7
  import { useState, useRef, useEffect, useDeferredValue } from 'react';
8
+ import classNames from 'classnames';
8
9
  import ColorPicker from "../ColorPicker";
9
10
  import { getBackgroundAccordingColor } from "../ColorPicker/utils";
10
11
  import "./Preview.less";
@@ -12,7 +13,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
12
13
  import { Fragment as _Fragment } from "react/jsx-runtime";
13
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
15
  export default function Preview(_ref) {
15
- var mode = _ref.mode,
16
+ var disabled = _ref.disabled,
17
+ mode = _ref.mode,
16
18
  value = _ref.value,
17
19
  onChange = _ref.onChange;
18
20
  var _useState = useState(false),
@@ -59,8 +61,10 @@ export default function Preview(_ref) {
59
61
  }, [deferedShow]);
60
62
  return /*#__PURE__*/_jsxs(_Fragment, {
61
63
  children: [/*#__PURE__*/_jsx("span", {
62
- className: 'arco-color-preview',
63
- onClick: handleClick,
64
+ className: classNames('arco-color-preview', {
65
+ disabled: disabled
66
+ }),
67
+ onClick: disabled ? undefined : handleClick,
64
68
  ref: previewRef,
65
69
  children: /*#__PURE__*/_jsx("span", {
66
70
  className: 'arco-color-inner',
@@ -11,6 +11,15 @@
11
11
  background-color: var(--color-bg-white);
12
12
  cursor: pointer;
13
13
 
14
+ &.disabled {
15
+ cursor: not-allowed;
16
+ background-color: var(--color-fill-1);
17
+
18
+ .arco-color-inner {
19
+ opacity: 0.8;
20
+ }
21
+ }
22
+
14
23
  &::before {
15
24
  content: '';
16
25
  position: absolute;
@@ -1,2 +1,2 @@
1
1
  import type { ColorProps } from './interface';
2
- export default function Color({ value, simple, onChange }: ColorProps): import("react/jsx-runtime").JSX.Element;
2
+ export default function Color({ value, simple, disabled, onChange, }: ColorProps): import("react/jsx-runtime").JSX.Element;
@@ -6,6 +6,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
6
6
  export default function Color(_ref) {
7
7
  var value = _ref.value,
8
8
  simple = _ref.simple,
9
+ disabled = _ref.disabled,
9
10
  onChange = _ref.onChange;
10
11
  if (simple) {
11
12
  return /*#__PURE__*/_jsx(Preview, {
@@ -47,16 +48,19 @@ export default function Color(_ref) {
47
48
  var opacityValue = Math.floor(a * 100);
48
49
  return /*#__PURE__*/_jsxs(Space, {
49
50
  children: [/*#__PURE__*/_jsx(Preview, {
51
+ disabled: disabled,
50
52
  value: value,
51
53
  onChange: onChange
52
54
  }), /*#__PURE__*/_jsx(Input, {
53
55
  size: "small",
54
56
  prefix: "#",
57
+ disabled: disabled,
55
58
  value: hexValue,
56
59
  onChange: handleHexChange
57
60
  }), /*#__PURE__*/_jsx(InputNumber, {
58
61
  size: "small",
59
62
  value: opacityValue,
63
+ disabled: disabled,
60
64
  suffix: "%",
61
65
  min: 0,
62
66
  max: 100,
@@ -1,4 +1,5 @@
1
1
  export interface ColorProps {
2
+ disabled?: boolean;
2
3
  value: string;
3
4
  simple?: boolean;
4
5
  onChange: (value: string) => void;
@@ -0,0 +1,9 @@
1
+ import { Color } from './interface';
2
+ interface ControlBarProps {
3
+ color: Color;
4
+ type: 'hue' | 'alpha';
5
+ onChange?: (x: number) => void;
6
+ onChangeComplete?: (x: number) => void;
7
+ }
8
+ export default function ControlBar({ color, type, onChange, onChangeComplete, }: ControlBarProps): import("react/jsx-runtime").JSX.Element;
9
+ export {};
@@ -1,10 +1,11 @@
1
1
  import { ColorValueMap } from '../interface';
2
2
  interface LinearColorInputProps {
3
+ disabled?: boolean;
3
4
  value: ColorValueMap['linear'];
4
5
  disabledOutAlpha?: boolean;
5
6
  disabledAlpha?: boolean;
6
7
  onTrigger: () => void;
7
8
  onChange: (val: ColorValueMap['linear']) => void;
8
9
  }
9
- export default function LinearColorInput({ value, disabledOutAlpha, disabledAlpha, onChange, onTrigger, }: LinearColorInputProps): import("react/jsx-runtime").JSX.Element;
10
+ export default function LinearColorInput({ disabled, value, disabledOutAlpha, disabledAlpha, onChange, onTrigger, }: LinearColorInputProps): import("react/jsx-runtime").JSX.Element;
10
11
  export {};
@@ -7,10 +7,12 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
7
7
  import { Input } from "../../index";
8
8
  import BlurInput from "../../BlurInput";
9
9
  import Preview from "../common/Preview";
10
+ import classNames from 'classnames';
10
11
  import { jsx as _jsx } from "react/jsx-runtime";
11
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
12
13
  export default function LinearColorInput(_ref) {
13
- var value = _ref.value,
14
+ var disabled = _ref.disabled,
15
+ value = _ref.value,
14
16
  disabledOutAlpha = _ref.disabledOutAlpha,
15
17
  disabledAlpha = _ref.disabledAlpha,
16
18
  onChange = _ref.onChange,
@@ -27,9 +29,12 @@ export default function LinearColorInput(_ref) {
27
29
  children: [/*#__PURE__*/_jsxs("div", {
28
30
  className: "pure-color-picker-input-wrap",
29
31
  children: [/*#__PURE__*/_jsx("div", {
30
- className: "pure-color-picker-preview",
31
- onClick: onTrigger,
32
+ className: classNames('pure-color-picker-preview', {
33
+ disabled: disabled
34
+ }),
35
+ onClick: disabled ? undefined : onTrigger,
32
36
  children: /*#__PURE__*/_jsx(Preview, {
37
+ disabled: disabled,
33
38
  type: "linear",
34
39
  shape: "square",
35
40
  color: value,
@@ -45,6 +50,7 @@ export default function LinearColorInput(_ref) {
45
50
  size: "small",
46
51
  suffix: "%",
47
52
  className: 'pure-color-picker-alpha',
53
+ disabled: disabled,
48
54
  value: (opacity * 100).toFixed(0),
49
55
  validate: function validate(val) {
50
56
  return +val >= 0 && +val <= 100;
@@ -0,0 +1,8 @@
1
+ import { Color } from './interface';
2
+ interface PaletteProps {
3
+ color: Color;
4
+ onChange?: (s: number, v: number) => void;
5
+ onChangeComplete?: (s: number, v: number) => void;
6
+ }
7
+ export default function Palette({ color, onChange, onChangeComplete, }: PaletteProps): import("react/jsx-runtime").JSX.Element;
8
+ export {};
@@ -1,8 +1,9 @@
1
1
  interface PureColorInputProps {
2
+ disabled?: boolean;
2
3
  disabledAlpha?: boolean;
3
4
  value: string;
4
5
  onTrigger: () => void;
5
6
  onChange?: (val: string) => void;
6
7
  }
7
- export default function PureColorInput({ disabledAlpha, value, onChange, onTrigger, }: PureColorInputProps): import("react/jsx-runtime").JSX.Element;
8
+ export default function PureColorInput({ disabled, disabledAlpha, value, onChange, onTrigger, }: PureColorInputProps): import("react/jsx-runtime").JSX.Element;
8
9
  export {};
@@ -3,10 +3,12 @@ import tinycolor from 'tinycolor2';
3
3
  import BlurInput from "../../BlurInput";
4
4
  import { getHexValue } from "../utils";
5
5
  import Preview from "../common/Preview";
6
+ import classNames from 'classnames';
6
7
  import { jsx as _jsx } from "react/jsx-runtime";
7
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
9
  export default function PureColorInput(_ref) {
9
- var disabledAlpha = _ref.disabledAlpha,
10
+ var disabled = _ref.disabled,
11
+ disabledAlpha = _ref.disabledAlpha,
10
12
  value = _ref.value,
11
13
  onChange = _ref.onChange,
12
14
  onTrigger = _ref.onTrigger;
@@ -30,9 +32,12 @@ export default function PureColorInput(_ref) {
30
32
  children: [/*#__PURE__*/_jsxs("div", {
31
33
  className: "pure-color-picker-input-wrap",
32
34
  children: [/*#__PURE__*/_jsx("div", {
33
- className: "pure-color-picker-preview",
34
- onClick: onTrigger,
35
+ className: classNames('pure-color-picker-preview', {
36
+ disabled: disabled
37
+ }),
38
+ onClick: disabled ? undefined : onTrigger,
35
39
  children: /*#__PURE__*/_jsx(Preview, {
40
+ disabled: disabled,
36
41
  type: "pure",
37
42
  shape: "square",
38
43
  color: value,
@@ -43,6 +48,7 @@ export default function PureColorInput(_ref) {
43
48
  size: "small",
44
49
  ref: hexRef,
45
50
  prefix: "#",
51
+ disabled: disabled,
46
52
  value: hexString.slice(1).toUpperCase(),
47
53
  validate: function validate(val) {
48
54
  return /^#?([0-9a-fA-F])+/.test(val);
@@ -53,6 +59,7 @@ export default function PureColorInput(_ref) {
53
59
  size: "small",
54
60
  suffix: "%",
55
61
  className: 'pure-color-picker-alpha',
62
+ disabled: disabled,
56
63
  value: (alpha * 100).toFixed(0),
57
64
  validate: function validate(val) {
58
65
  return +val >= 0 && +val <= 100;
@@ -1,8 +1,9 @@
1
1
  import { ColorValueMap } from '../interface';
2
2
  interface PuresColorInputProps {
3
+ disabled?: boolean;
3
4
  disabledAlpha?: boolean;
4
5
  value: ColorValueMap['pures'];
5
6
  onTrigger: () => void;
6
7
  }
7
- export default function PuresColorInput({ value, onTrigger, }: PuresColorInputProps): import("react/jsx-runtime").JSX.Element;
8
+ export default function PuresColorInput({ disabled, value, onTrigger, }: PuresColorInputProps): import("react/jsx-runtime").JSX.Element;
8
9
  export {};
@@ -1,15 +1,19 @@
1
+ import classNames from 'classnames';
1
2
  import { classPrefix } from '.';
2
3
  import { jsx as _jsx } from "react/jsx-runtime";
3
4
  export default function PuresColorInput(_ref) {
4
- var value = _ref.value,
5
+ var disabled = _ref.disabled,
6
+ value = _ref.value,
5
7
  onTrigger = _ref.onTrigger;
6
8
  // 拼接多色的分段背景色
7
9
  var str = value.map(function (color, i) {
8
10
  return "".concat(color, " ").concat(i / value.length * 100, "%, ").concat(color, " ").concat((i + 1) / value.length * 100, "%");
9
11
  }).join(', ');
10
12
  return /*#__PURE__*/_jsx("div", {
11
- className: "".concat(classPrefix, "-trigger"),
12
- onClick: onTrigger,
13
+ className: classNames("".concat(classPrefix, "-trigger"), {
14
+ disabled: disabled
15
+ }),
16
+ onClick: disabled ? undefined : onTrigger,
13
17
  children: /*#__PURE__*/_jsx("div", {
14
18
  className: "".concat(classPrefix, "-trigger-color"),
15
19
  style: {
@@ -1,7 +1,8 @@
1
1
  import { ColorValueMap } from '../interface';
2
2
  interface RangeColorInputProps {
3
+ disabled?: boolean;
3
4
  value: ColorValueMap['range'];
4
5
  onTrigger: () => void;
5
6
  }
6
- export default function RangeColorInput({ value, onTrigger, }: RangeColorInputProps): import("react/jsx-runtime").JSX.Element;
7
+ export default function RangeColorInput({ disabled, value, onTrigger, }: RangeColorInputProps): import("react/jsx-runtime").JSX.Element;
7
8
  export {};
@@ -1,15 +1,20 @@
1
+ import classNames from 'classnames';
1
2
  import Preview from "../common/Preview";
2
3
  import { jsx as _jsx } from "react/jsx-runtime";
3
4
  export default function RangeColorInput(_ref) {
4
- var value = _ref.value,
5
+ var disabled = _ref.disabled,
6
+ value = _ref.value,
5
7
  onTrigger = _ref.onTrigger;
6
8
  return /*#__PURE__*/_jsx("div", {
7
- className: "pure-color-picker-preview",
9
+ className: classNames('pure-color-picker-preview', {
10
+ disabled: disabled
11
+ }),
8
12
  style: {
9
13
  width: '100%'
10
14
  },
11
- onClick: onTrigger,
15
+ onClick: disabled ? undefined : onTrigger,
12
16
  children: /*#__PURE__*/_jsx(Preview, {
17
+ disabled: disabled,
13
18
  type: "range",
14
19
  shape: "square",
15
20
  color: value,
@@ -1,5 +1,6 @@
1
1
  import { ColorType, ColorValueMap } from '../interface';
2
2
  interface PreviewProps<T extends ColorType> {
3
+ disabled?: boolean;
3
4
  type: T;
4
5
  color: ColorValueMap[T];
5
6
  size?: number | string;
@@ -7,5 +8,5 @@ interface PreviewProps<T extends ColorType> {
7
8
  border?: boolean;
8
9
  onClick?: () => void;
9
10
  }
10
- export default function Preview<T extends ColorType>({ type, color, size, shape, border, onClick, }: PreviewProps<T>): import("react/jsx-runtime").JSX.Element;
11
+ export default function Preview<T extends ColorType>({ disabled, type, color, size, shape, border, onClick, }: PreviewProps<T>): import("react/jsx-runtime").JSX.Element;
11
12
  export {};
@@ -2,7 +2,8 @@ import classNames from 'classnames';
2
2
  import { getLinearGradientStyle } from "../utils";
3
3
  import { jsx as _jsx } from "react/jsx-runtime";
4
4
  export default function Preview(_ref) {
5
- var type = _ref.type,
5
+ var disabled = _ref.disabled,
6
+ type = _ref.type,
6
7
  color = _ref.color,
7
8
  _ref$size = _ref.size,
8
9
  size = _ref$size === void 0 ? 20 : _ref$size,
@@ -45,13 +46,15 @@ export default function Preview(_ref) {
45
46
  return /*#__PURE__*/_jsx("div", {
46
47
  className: classNames('colors-picker-preview', "colors-picker-preview-".concat(shape), {
47
48
  'colors-picker-preview-border': border
49
+ }, {
50
+ disabled: disabled
48
51
  }),
49
52
  style: {
50
53
  width: size,
51
54
  height: size,
52
- cursor: onClick ? 'pointer' : 'default'
55
+ cursor: disabled ? 'not-allowed' : onClick ? 'pointer' : 'default'
53
56
  },
54
- onClick: onClick,
57
+ onClick: disabled ? undefined : onClick,
55
58
  children: /*#__PURE__*/_jsx("div", {
56
59
  className: "colors-picker-preview-color",
57
60
  style: getColorStyle()
@@ -25,6 +25,7 @@ function ColorsPicker(props) {
25
25
  var _useColorsPicker = useColorsPicker(props),
26
26
  type = _useColorsPicker.type,
27
27
  value = _useColorsPicker.value,
28
+ disabled = _useColorsPicker.disabled,
28
29
  disabledAlpha = _useColorsPicker.disabledAlpha,
29
30
  disabledOutAlpha = _useColorsPicker.disabledOutAlpha,
30
31
  onChange = _useColorsPicker.onChange,
@@ -42,6 +43,7 @@ function ColorsPicker(props) {
42
43
  onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(val);
43
44
  };
44
45
  return /*#__PURE__*/_jsx(PureColorInput, {
46
+ disabled: disabled,
45
47
  disabledAlpha: disabledAlpha,
46
48
  value: value,
47
49
  onChange: handleChange,
@@ -53,6 +55,7 @@ function ColorsPicker(props) {
53
55
  case 'pures':
54
56
  {
55
57
  return /*#__PURE__*/_jsx(PuresColorInput, {
58
+ disabled: disabled,
56
59
  disabledAlpha: disabledAlpha,
57
60
  value: value,
58
61
  onTrigger: function onTrigger() {
@@ -67,6 +70,7 @@ function ColorsPicker(props) {
67
70
  onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(val);
68
71
  };
69
72
  return /*#__PURE__*/_jsx(LinearColorInput, {
73
+ disabled: disabled,
70
74
  disabledAlpha: disabledAlpha,
71
75
  disabledOutAlpha: disabledOutAlpha,
72
76
  value: value,
@@ -79,6 +83,7 @@ function ColorsPicker(props) {
79
83
  case 'range':
80
84
  {
81
85
  return /*#__PURE__*/_jsx(RangeColorInput, {
86
+ disabled: disabled,
82
87
  value: value,
83
88
  onTrigger: function onTrigger() {
84
89
  return setVisible(!visible);
@@ -95,6 +100,7 @@ function ColorsPicker(props) {
95
100
  };
96
101
  if (val.type === 'pure') {
97
102
  return /*#__PURE__*/_jsx(PureColorInput, {
103
+ disabled: disabled,
98
104
  disabledAlpha: disabledAlpha,
99
105
  value: val.pure,
100
106
  onChange: function onChange(newValue) {
@@ -108,6 +114,7 @@ function ColorsPicker(props) {
108
114
  });
109
115
  } else if (val.type === 'pures') {
110
116
  return /*#__PURE__*/_jsx(PuresColorInput, {
117
+ disabled: disabled,
111
118
  disabledAlpha: disabledAlpha,
112
119
  value: val.pures,
113
120
  onTrigger: function onTrigger() {
@@ -116,6 +123,7 @@ function ColorsPicker(props) {
116
123
  });
117
124
  } else if (val.type === 'linear') {
118
125
  return /*#__PURE__*/_jsx(LinearColorInput, {
126
+ disabled: disabled,
119
127
  disabledOutAlpha: disabledOutAlpha,
120
128
  disabledAlpha: disabledAlpha,
121
129
  value: val.linear,
@@ -130,6 +138,7 @@ function ColorsPicker(props) {
130
138
  });
131
139
  } else if (val.type === 'range') {
132
140
  return /*#__PURE__*/_jsx(RangeColorInput, {
141
+ disabled: disabled,
133
142
  value: val.range,
134
143
  onTrigger: function onTrigger() {
135
144
  return setVisible(!visible);
@@ -0,0 +1,61 @@
1
+ /**
2
+ * 颜色选择器类型
3
+ * @description 支持纯色、线性渐变、径向渐变、多纯色集合
4
+ * pure - 纯色
5
+ * linear - 线性渐变
6
+ * pures - 多纯色集合
7
+ */
8
+ export declare type ColorType = 'pure' | 'linear' | 'pures' | 'range';
9
+ export interface StopItem {
10
+ /**
11
+ * 偏移量
12
+ * 0 - 100
13
+ */
14
+ offset: number;
15
+ /**
16
+ * 颜色值
17
+ */
18
+ color: string;
19
+ }
20
+ export interface GradientColorValue {
21
+ stops: StopItem[];
22
+ angle?: number;
23
+ opacity?: number;
24
+ }
25
+ export interface ColorValueObj {
26
+ type: ColorType;
27
+ pure?: ColorValueMap['pure'];
28
+ linear?: ColorValueMap['linear'];
29
+ pures?: ColorValueMap['pures'];
30
+ range?: ColorValueMap['range'];
31
+ }
32
+ export declare type ColorsPickerType = ColorType | ColorType[];
33
+ export interface ColorsPickerProps<T extends ColorsPickerType> {
34
+ type: T;
35
+ value: T extends ColorType ? ColorValueMap[T] : ColorValueObj;
36
+ disabledAlpha?: boolean;
37
+ disabledOutAlpha?: boolean;
38
+ disabled?: boolean;
39
+ onChange?: (value: T extends ColorType ? ColorValueMap[T] : ColorValueObj) => void;
40
+ onChangeComplete?: (value: T extends ColorType ? ColorValueMap[T] : ColorValueObj) => void;
41
+ }
42
+ export interface ColorValueMap {
43
+ pure: string;
44
+ linear: GradientColorValue;
45
+ pures: string[];
46
+ range: [string, string];
47
+ }
48
+ export interface HSV {
49
+ h: number;
50
+ s: number;
51
+ v: number;
52
+ }
53
+ export interface RGB {
54
+ r: number;
55
+ g: number;
56
+ b: number;
57
+ }
58
+ export interface Color {
59
+ hsv: HSV;
60
+ alpha: number;
61
+ }
@@ -228,6 +228,10 @@
228
228
  &.colors-picker-preview-border {
229
229
  border: 1px solid #333;
230
230
  }
231
+
232
+ &.disabled {
233
+ opacity: 0.8;
234
+ }
231
235
  }
232
236
 
233
237
  // 多色
@@ -266,6 +270,12 @@
266
270
  height: 100%;
267
271
  border-radius: 1px;
268
272
  }
273
+
274
+ &.disabled {
275
+ background-color: var(--color-fill-1);
276
+ opacity: 0.8;
277
+ cursor: not-allowed;
278
+ }
269
279
  }
270
280
 
271
281
  .pures-color-picker-cards {
@@ -346,6 +356,14 @@
346
356
  border-radius: 4px;
347
357
  border: 1px solid var(--color-border-2);
348
358
  background: var(--color-bg-white);
359
+
360
+ &.disabled {
361
+ background-color: var(--color-fill-1);
362
+
363
+ .pure-color-picker-preview-inner {
364
+ opacity: 0.8;
365
+ }
366
+ }
349
367
  }
350
368
 
351
369
  .pure-color-picker-preview-inner {
@@ -0,0 +1,23 @@
1
+ import { ColorValueMap, StopItem } from './interface';
2
+ export declare function toHex(x: number | string): string;
3
+ export declare function resolveColor(colorParam: string): {
4
+ r: number;
5
+ g: number;
6
+ b: number;
7
+ a: number;
8
+ hex: string;
9
+ };
10
+ export declare function transformColor(color: string, a: number): string;
11
+ export declare function getBackgroundAccordingColor(color: any, fixedAngle?: number): {
12
+ backgroundImage: string;
13
+ background?: undefined;
14
+ } | {
15
+ background: any;
16
+ backgroundImage?: undefined;
17
+ } | undefined;
18
+ export declare function getMiddleColor(colors: StopItem[], offset: number): any;
19
+ export declare function getHexValue(hex: string): string;
20
+ export declare function getLinearGradientStyle(color: ColorValueMap['linear']): {
21
+ backgroundImage: string;
22
+ opacity: number;
23
+ };
@@ -16,6 +16,7 @@ export function PointerDrag(_ref) {
16
16
  _useState2 = _slicedToArray(_useState, 2),
17
17
  dragging = _useState2[0],
18
18
  setDrag = _useState2[1];
19
+ var isTargetMouseDownRef = useRef(false);
19
20
  var _useState3 = useState({
20
21
  x: 0,
21
22
  y: 0
@@ -59,7 +60,7 @@ export function PointerDrag(_ref) {
59
60
  onMouseDown(e);
60
61
  }
61
62
  };
62
- var onMouseUp = function onMouseUp() {
63
+ var _onMouseUp = function onMouseUp() {
63
64
  if (dragging) {
64
65
  document.exitPointerLock();
65
66
  setDrag(false);
@@ -97,11 +98,19 @@ export function PointerDrag(_ref) {
97
98
  });
98
99
  return /*#__PURE__*/_jsxs(Fragment, {
99
100
  children: [children && /*#__PURE__*/cloneElement(children, {
101
+ onMouseDown: function onMouseDown() {
102
+ isTargetMouseDownRef.current = true;
103
+ },
100
104
  onMouseMove: function onMouseMove(e) {
101
- e.persist();
102
- _onMouseMove(e);
105
+ if (isTargetMouseDownRef.current) {
106
+ e.persist();
107
+ _onMouseMove(e);
108
+ }
103
109
  },
104
- onMouseUp: onMouseUp
110
+ onMouseUp: function onMouseUp() {
111
+ isTargetMouseDownRef.current = false;
112
+ _onMouseUp();
113
+ }
105
114
  }), dragging && arrow]
106
115
  });
107
116
  }
@@ -1,5 +1,5 @@
1
1
  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); }
2
- var _excluded = ["min", "max", "step", "precision", "value", "defaultValue", "prefix", "suffix", "hideControl", "onChange", "onPointMoveStart", "onPointMoveEnd", "onBlur"];
2
+ var _excluded = ["min", "max", "step", "precision", "value", "defaultValue", "prefix", "suffix", "hideControl", "className", "onChange", "onPointMoveStart", "onPointMoveEnd", "onBlur"];
3
3
  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; }
4
4
  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; }
5
5
  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; }
@@ -34,6 +34,7 @@ var InputNumber = /*#__PURE__*/forwardRef(function (props, ref) {
34
34
  prefix = props.prefix,
35
35
  suffix = props.suffix,
36
36
  hideControl = props.hideControl,
37
+ className = props.className,
37
38
  onChange = props.onChange,
38
39
  onPointMoveStart = props.onPointMoveStart,
39
40
  onPointMoveEnd = props.onPointMoveEnd,
@@ -150,7 +151,7 @@ var InputNumber = /*#__PURE__*/forwardRef(function (props, ref) {
150
151
  return /*#__PURE__*/_jsx(Input, _objectSpread({
151
152
  autoSelect: true,
152
153
  ref: ref,
153
- className: "arco-input-number",
154
+ className: classNames('arco-input-number', className),
154
155
  onChange: handleChange,
155
156
  onBlur: handleBlur,
156
157
  value: localValue,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@easyv/react-components",
3
- "version": "0.4.5",
3
+ "version": "0.4.7",
4
4
  "description": "a react component library base on arco design",
5
5
  "license": "MIT",
6
6
  "sideEffects": [
@@ -1,8 +0,0 @@
1
- /// <reference types="react" />
2
- import type { ButtonProps } from './interface';
3
- import './index.less';
4
- declare function XButton({ type, className, simple, ...restProps }: ButtonProps): import("react/jsx-runtime").JSX.Element;
5
- declare namespace XButton {
6
- var Group: import("react").ForwardRefExoticComponent<import("@arco-design/web-react").ButtonGroupProps & import("react").RefAttributes<unknown>>;
7
- }
8
- export default XButton;
@@ -1,6 +0,0 @@
1
- import type { ButtonProps, ButtonGroupProps } from '@arco-design/web-react';
2
- interface XButtonProps extends Omit<ButtonProps, 'type'> {
3
- type?: 'link' | ButtonProps['type'];
4
- simple?: boolean;
5
- }
6
- export { XButtonProps as ButtonProps, ButtonGroupProps };
@@ -1,4 +0,0 @@
1
- export interface ColorPickerProps {
2
- value?: string;
3
- onChange?: (value: string) => void;
4
- }
@@ -1,9 +0,0 @@
1
- import type { RadioProps, RadioGroupProps } from './interface';
2
- import './index.less';
3
- declare function XRadio(props: RadioProps): import("react/jsx-runtime").JSX.Element;
4
- declare namespace XRadio {
5
- var Group: typeof XRadioGroup;
6
- }
7
- export default XRadio;
8
- declare function XRadioGroup({ buttonStyle, block, className, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
9
- export type * from './interface';
@@ -1,4 +0,0 @@
1
- import { Switch } from '@arco-design/web-react';
2
- import './index.less';
3
- export default Switch;
4
- export type * from './interface';
@@ -1 +0,0 @@
1
- export type { SwitchProps } from '@arco-design/web-react';