@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.
- package/dist/Color/Preview.d.ts +2 -1
- package/dist/Color/Preview.js +7 -3
- package/dist/Color/Preview.less +9 -0
- package/dist/Color/index.d.ts +1 -1
- package/dist/Color/index.js +4 -0
- package/dist/Color/interface.d.ts +1 -0
- package/dist/ColorsPicker/ControlBar.d.ts +9 -0
- package/dist/ColorsPicker/LinearColorPicker/LinearColorInput.d.ts +2 -1
- package/dist/ColorsPicker/LinearColorPicker/LinearColorInput.js +9 -3
- package/dist/ColorsPicker/Palette.d.ts +8 -0
- package/dist/ColorsPicker/PureColorPicker/PureColorInput.d.ts +2 -1
- package/dist/ColorsPicker/PureColorPicker/PureColorInput.js +10 -3
- package/dist/ColorsPicker/PuresColorPicker/PuresColorInput.d.ts +2 -1
- package/dist/ColorsPicker/PuresColorPicker/PuresColorInput.js +7 -3
- package/dist/ColorsPicker/RangeColorPicker/RangeColorInput.d.ts +2 -1
- package/dist/ColorsPicker/RangeColorPicker/RangeColorInput.js +8 -3
- package/dist/ColorsPicker/common/Preview.d.ts +2 -1
- package/dist/ColorsPicker/common/Preview.js +6 -3
- package/dist/ColorsPicker/index.js +9 -0
- package/dist/ColorsPicker/interface.d.ts +61 -0
- package/dist/ColorsPicker/style/index.less +18 -0
- package/dist/ColorsPicker/utils.d.ts +23 -0
- package/dist/InputNumber/PointDrag.js +13 -4
- package/dist/InputNumber/index.js +3 -2
- package/package.json +1 -1
- package/dist/Button/index.d.ts +0 -8
- package/dist/Button/interface.d.ts +0 -6
- package/dist/ColorPicker/interface.d.ts +0 -4
- package/dist/Radio/index.d.ts +0 -9
- package/dist/Switch/index.d.ts +0 -4
- package/dist/Switch/interface.d.ts +0 -1
package/dist/Color/Preview.d.ts
CHANGED
|
@@ -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 {};
|
package/dist/Color/Preview.js
CHANGED
|
@@ -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
|
|
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
|
-
|
|
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',
|
package/dist/Color/Preview.less
CHANGED
|
@@ -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;
|
package/dist/Color/index.d.ts
CHANGED
|
@@ -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;
|
package/dist/Color/index.js
CHANGED
|
@@ -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,
|
|
@@ -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
|
|
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:
|
|
31
|
-
|
|
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
|
|
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:
|
|
34
|
-
|
|
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
|
|
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
|
-
|
|
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
|
|
5
|
+
var disabled = _ref.disabled,
|
|
6
|
+
value = _ref.value,
|
|
5
7
|
onTrigger = _ref.onTrigger;
|
|
6
8
|
return /*#__PURE__*/_jsx("div", {
|
|
7
|
-
className:
|
|
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
|
|
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
|
|
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
|
-
|
|
102
|
-
|
|
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:
|
|
154
|
+
className: classNames('arco-input-number', className),
|
|
154
155
|
onChange: handleChange,
|
|
155
156
|
onBlur: handleBlur,
|
|
156
157
|
value: localValue,
|
package/package.json
CHANGED
package/dist/Button/index.d.ts
DELETED
|
@@ -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;
|
package/dist/Radio/index.d.ts
DELETED
|
@@ -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';
|
package/dist/Switch/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export type { SwitchProps } from '@arco-design/web-react';
|