assui 3.2.99 → 3.2.100
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/es/base-button/demo/index.less +13 -0
- package/es/base-button/index.d.ts +16 -0
- package/es/base-button/index.js +55 -0
- package/es/base-button/style/index.css +211 -0
- package/es/base-button/style/index.d.ts +1 -0
- package/es/base-button/style/index.js +1 -0
- package/es/base-button/style/index.less +234 -0
- package/es/complex-val-select/index.d.ts +1 -0
- package/es/complex-val-select/index.js +15 -1
- package/es/index.d.ts +2 -0
- package/es/index.js +2 -1
- package/es/style/variables.less +12 -0
- package/lib/base-button/demo/index.less +13 -0
- package/lib/base-button/index.d.ts +16 -0
- package/lib/base-button/index.js +65 -0
- package/lib/base-button/style/index.css +211 -0
- package/lib/base-button/style/index.d.ts +1 -0
- package/lib/base-button/style/index.js +6 -0
- package/lib/base-button/style/index.less +234 -0
- package/lib/complex-val-select/index.d.ts +1 -0
- package/lib/complex-val-select/index.js +15 -1
- package/lib/index.d.ts +2 -0
- package/lib/index.js +8 -1
- package/lib/style/variables.less +12 -0
- package/package.json +1 -1
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface BaseButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
|
|
3
|
+
color?: 'primary' | 'success' | 'dark' | 'gray';
|
|
4
|
+
variant?: 'outlined' | 'dashed' | 'link' | 'text';
|
|
5
|
+
size?: 'small' | 'medium' | 'large';
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
block?: boolean;
|
|
9
|
+
/** 圆角 */
|
|
10
|
+
round?: boolean;
|
|
11
|
+
loading?: boolean;
|
|
12
|
+
prefixIcon?: React.ReactNode;
|
|
13
|
+
suffixIcon?: React.ReactNode;
|
|
14
|
+
}
|
|
15
|
+
declare const BaseButton: React.FC<BaseButtonProps>;
|
|
16
|
+
export default BaseButton;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
var __assign = this && this.__assign || function () {
|
|
2
|
+
__assign = Object.assign || function (t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
6
|
+
}
|
|
7
|
+
return t;
|
|
8
|
+
};
|
|
9
|
+
return __assign.apply(this, arguments);
|
|
10
|
+
};
|
|
11
|
+
var __rest = this && this.__rest || function (s, e) {
|
|
12
|
+
var t = {};
|
|
13
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
14
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
15
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
16
|
+
}
|
|
17
|
+
return t;
|
|
18
|
+
};
|
|
19
|
+
import React from 'react';
|
|
20
|
+
import classNames from 'classnames';
|
|
21
|
+
var btnNamePrefix = 'base-btn';
|
|
22
|
+
var BaseButton = function BaseButton(_a) {
|
|
23
|
+
var _b;
|
|
24
|
+
var _c = _a.color,
|
|
25
|
+
color = _c === void 0 ? 'default' : _c,
|
|
26
|
+
_d = _a.variant,
|
|
27
|
+
variant = _d === void 0 ? '' : _d,
|
|
28
|
+
_e = _a.size,
|
|
29
|
+
size = _e === void 0 ? 'medium' : _e,
|
|
30
|
+
disabled = _a.disabled,
|
|
31
|
+
_f = _a.round,
|
|
32
|
+
round = _f === void 0 ? false : _f,
|
|
33
|
+
_g = _a.block,
|
|
34
|
+
block = _g === void 0 ? false : _g,
|
|
35
|
+
_h = _a.loading,
|
|
36
|
+
loading = _h === void 0 ? false : _h,
|
|
37
|
+
prefixIcon = _a.prefixIcon,
|
|
38
|
+
suffixIcon = _a.suffixIcon,
|
|
39
|
+
children = _a.children,
|
|
40
|
+
resetProps = __rest(_a, ["color", "variant", "size", "disabled", "round", "block", "loading", "prefixIcon", "suffixIcon", "children"]);
|
|
41
|
+
var className = resetProps.className;
|
|
42
|
+
var loadingIcon = /*#__PURE__*/React.createElement("div", {
|
|
43
|
+
className: "".concat(btnNamePrefix, "-loading-icon")
|
|
44
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
45
|
+
className: "".concat(btnNamePrefix, "-loading-icon-mask")
|
|
46
|
+
}));
|
|
47
|
+
var prefixIconWithLoading = loading ? loadingIcon : prefixIcon;
|
|
48
|
+
var suffixIconWithLoading = loading ? loadingIcon : suffixIcon;
|
|
49
|
+
return /*#__PURE__*/React.createElement("button", __assign({}, resetProps, {
|
|
50
|
+
className: classNames(btnNamePrefix, "".concat(btnNamePrefix, "-").concat(color), "".concat(btnNamePrefix, "-").concat(size), "".concat(btnNamePrefix, "-variant-").concat(variant), (_b = {}, _b["".concat(btnNamePrefix, "-round")] = round, _b["".concat(btnNamePrefix, "-block")] = block, _b["".concat(btnNamePrefix, "-disabled")] = disabled, _b["".concat(btnNamePrefix, "-loading")] = loading, _b), className)
|
|
51
|
+
}), (prefixIcon || loading && !suffixIcon) && prefixIconWithLoading, /*#__PURE__*/React.createElement("span", {
|
|
52
|
+
className: "".concat(btnNamePrefix, "-content")
|
|
53
|
+
}, children), suffixIcon && suffixIconWithLoading);
|
|
54
|
+
};
|
|
55
|
+
export default BaseButton;
|
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
.base-btn {
|
|
2
|
+
display: inline-flex;
|
|
3
|
+
gap: 12px;
|
|
4
|
+
align-items: center;
|
|
5
|
+
height: 32px;
|
|
6
|
+
padding: 0 16px;
|
|
7
|
+
font-weight: 400;
|
|
8
|
+
line-height: 22px;
|
|
9
|
+
background-color: #fff;
|
|
10
|
+
border: none;
|
|
11
|
+
border-radius: 4px;
|
|
12
|
+
outline: none;
|
|
13
|
+
cursor: pointer;
|
|
14
|
+
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
15
|
+
}
|
|
16
|
+
.base-btn-small {
|
|
17
|
+
height: 24px;
|
|
18
|
+
padding: 0 8px;
|
|
19
|
+
font-size: 12px;
|
|
20
|
+
line-height: 20px;
|
|
21
|
+
}
|
|
22
|
+
.base-btn-large {
|
|
23
|
+
height: 40px;
|
|
24
|
+
padding: 0 24px;
|
|
25
|
+
font-size: 16px;
|
|
26
|
+
line-height: 24px;
|
|
27
|
+
}
|
|
28
|
+
.base-btn-round {
|
|
29
|
+
border-radius: 16px;
|
|
30
|
+
}
|
|
31
|
+
.base-btn-block {
|
|
32
|
+
display: flex;
|
|
33
|
+
justify-content: center;
|
|
34
|
+
width: 100%;
|
|
35
|
+
}
|
|
36
|
+
.base-btn-loading {
|
|
37
|
+
opacity: 0.8;
|
|
38
|
+
}
|
|
39
|
+
.base-btn-default {
|
|
40
|
+
--font-color: #121212;
|
|
41
|
+
--border-color: #e6e6e6;
|
|
42
|
+
--hover-bg-color: #f2f2f2;
|
|
43
|
+
--active-bg-color: #e6e6e6;
|
|
44
|
+
color: #121212;
|
|
45
|
+
}
|
|
46
|
+
.base-btn-default:hover {
|
|
47
|
+
background-color: #f2f2f2;
|
|
48
|
+
}
|
|
49
|
+
.base-btn-default:active {
|
|
50
|
+
background-color: #e6e6e6;
|
|
51
|
+
}
|
|
52
|
+
.base-btn-primary {
|
|
53
|
+
--theme-color: #dc4946;
|
|
54
|
+
--hover-color: #e7807e;
|
|
55
|
+
--active-color: #c6423f;
|
|
56
|
+
color: #fff;
|
|
57
|
+
background: var(--theme-color);
|
|
58
|
+
}
|
|
59
|
+
.base-btn-primary:hover {
|
|
60
|
+
background-color: var(--hover-color);
|
|
61
|
+
}
|
|
62
|
+
.base-btn-primary:active {
|
|
63
|
+
background-color: var(--active-color);
|
|
64
|
+
}
|
|
65
|
+
.base-btn-success {
|
|
66
|
+
color: #fff;
|
|
67
|
+
background: var(--theme-color);
|
|
68
|
+
--theme-color: #47a92a;
|
|
69
|
+
--hover-color: #7ec36a;
|
|
70
|
+
--active-color: #409826;
|
|
71
|
+
}
|
|
72
|
+
.base-btn-success:hover {
|
|
73
|
+
background-color: var(--hover-color);
|
|
74
|
+
}
|
|
75
|
+
.base-btn-success:active {
|
|
76
|
+
background-color: var(--active-color);
|
|
77
|
+
}
|
|
78
|
+
.base-btn-dark {
|
|
79
|
+
--theme-color: #121212;
|
|
80
|
+
--hover-color: #595959;
|
|
81
|
+
--active-color: #333;
|
|
82
|
+
color: #fff;
|
|
83
|
+
background: var(--theme-color);
|
|
84
|
+
}
|
|
85
|
+
.base-btn-dark:hover {
|
|
86
|
+
background-color: var(--hover-color);
|
|
87
|
+
}
|
|
88
|
+
.base-btn-dark:active {
|
|
89
|
+
background-color: var(--active-color);
|
|
90
|
+
}
|
|
91
|
+
.base-btn-gray {
|
|
92
|
+
--font-color: #121212;
|
|
93
|
+
--border-color: #f2f2f2;
|
|
94
|
+
--hover-color: #f7f7f7;
|
|
95
|
+
--active-color: #e6e6e6;
|
|
96
|
+
--hover-bg-color: #f7f7f7;
|
|
97
|
+
--active-bg-color: #e6e6e6;
|
|
98
|
+
color: var(--font-color);
|
|
99
|
+
background: #f2f2f2;
|
|
100
|
+
border: none;
|
|
101
|
+
}
|
|
102
|
+
.base-btn-gray:hover {
|
|
103
|
+
background-color: var(--hover-color);
|
|
104
|
+
}
|
|
105
|
+
.base-btn-gray:active {
|
|
106
|
+
background-color: var(--active-color);
|
|
107
|
+
}
|
|
108
|
+
.base-btn-variant-outlined {
|
|
109
|
+
color: var(--theme-color, var(--font-color));
|
|
110
|
+
background-color: #fff;
|
|
111
|
+
border: 1px solid var(--theme-color, var(--border-color));
|
|
112
|
+
}
|
|
113
|
+
.base-btn-variant-outlined:hover {
|
|
114
|
+
background-color: var(--hover-bg-color, #fff);
|
|
115
|
+
border-color: var(--hover-color, var(--border-color));
|
|
116
|
+
}
|
|
117
|
+
.base-btn-variant-outlined:active {
|
|
118
|
+
background-color: var(--active-bg-color, #fff);
|
|
119
|
+
border-color: var(--active-color, var(--border-color));
|
|
120
|
+
}
|
|
121
|
+
.base-btn-variant-outlined .base-btn-loading-icon {
|
|
122
|
+
background: conic-gradient(from 180deg, rgba(213, 73, 65, 0), var(--theme-color));
|
|
123
|
+
}
|
|
124
|
+
.base-btn-variant-outlined .base-btn-loading-icon .base-btn-loading-icon-mask {
|
|
125
|
+
background-color: #fff;
|
|
126
|
+
}
|
|
127
|
+
.base-btn-variant-outlined.base-btn-disabled {
|
|
128
|
+
color: #bfbfbf;
|
|
129
|
+
background-color: #e6e6e6;
|
|
130
|
+
border-color: #e6e6e6;
|
|
131
|
+
}
|
|
132
|
+
.base-btn-variant-outlined.base-btn-disabled:hover {
|
|
133
|
+
background-color: #e6e6e6;
|
|
134
|
+
border-color: #e6e6e6;
|
|
135
|
+
}
|
|
136
|
+
.base-btn-variant-outlined.base-btn-disabled:active {
|
|
137
|
+
background-color: #e6e6e6;
|
|
138
|
+
border-color: #e6e6e6;
|
|
139
|
+
}
|
|
140
|
+
.base-btn-variant-dashed {
|
|
141
|
+
color: var(--theme-color, var(--font-color));
|
|
142
|
+
background-color: #fff;
|
|
143
|
+
border: 1px dashed var(--theme-color, var(--border-color));
|
|
144
|
+
}
|
|
145
|
+
.base-btn-variant-dashed:hover {
|
|
146
|
+
background-color: var(--hover-bg-color, #fff);
|
|
147
|
+
border-color: var(--hover-color, var(--border-color));
|
|
148
|
+
}
|
|
149
|
+
.base-btn-variant-dashed:active {
|
|
150
|
+
background-color: var(--active-bg-color, #fff);
|
|
151
|
+
border-color: var(--active-color, var(--border-color));
|
|
152
|
+
}
|
|
153
|
+
.base-btn-variant-link {
|
|
154
|
+
color: var(--theme-color);
|
|
155
|
+
background-color: transparent;
|
|
156
|
+
border: none;
|
|
157
|
+
}
|
|
158
|
+
.base-btn-variant-link:hover {
|
|
159
|
+
background-color: #f2f2f2;
|
|
160
|
+
}
|
|
161
|
+
.base-btn-variant-link:active {
|
|
162
|
+
background-color: #e6e6e6;
|
|
163
|
+
}
|
|
164
|
+
.base-btn-variant-link.base-btn-disabled {
|
|
165
|
+
color: #bfbfbf;
|
|
166
|
+
background-color: transparent;
|
|
167
|
+
}
|
|
168
|
+
.base-btn-variant-link .base-btn-loading-icon {
|
|
169
|
+
background: conic-gradient(from 180deg, rgba(0, 0, 0, 0), var(--theme-color, var(--font-color)));
|
|
170
|
+
}
|
|
171
|
+
.base-btn-variant-link .base-btn-loading-icon .base-btn-loading-icon-mask {
|
|
172
|
+
background-color: #fff;
|
|
173
|
+
}
|
|
174
|
+
.base-btn-disabled {
|
|
175
|
+
color: #bfbfbf;
|
|
176
|
+
background-color: #e6e6e6;
|
|
177
|
+
border-color: #e6e6e6;
|
|
178
|
+
cursor: not-allowed;
|
|
179
|
+
}
|
|
180
|
+
.base-btn-disabled:hover {
|
|
181
|
+
background-color: #e6e6e6;
|
|
182
|
+
}
|
|
183
|
+
.base-btn-disabled:active {
|
|
184
|
+
background-color: #e6e6e6;
|
|
185
|
+
}
|
|
186
|
+
@keyframes loading {
|
|
187
|
+
0% {
|
|
188
|
+
transform: rotate(0deg);
|
|
189
|
+
}
|
|
190
|
+
100% {
|
|
191
|
+
transform: rotate(360deg);
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
.base-btn-loading-icon {
|
|
195
|
+
display: flex;
|
|
196
|
+
align-items: center;
|
|
197
|
+
justify-content: center;
|
|
198
|
+
width: 16px;
|
|
199
|
+
height: 16px;
|
|
200
|
+
background: conic-gradient(from 180deg, rgba(0, 0, 0, 0), #ffffff);
|
|
201
|
+
border-radius: 50%;
|
|
202
|
+
animation: loading 1.2s linear infinite;
|
|
203
|
+
-webkit-mask: radial-gradient(transparent 6px, #000 5px);
|
|
204
|
+
mask: radial-gradient(transparent 6px, #000 5px);
|
|
205
|
+
}
|
|
206
|
+
.base-btn-loading-icon .base-btn-loading-icon-mask {
|
|
207
|
+
width: 12px;
|
|
208
|
+
height: 12px;
|
|
209
|
+
background-color: transparent;
|
|
210
|
+
border-radius: 50%;
|
|
211
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './index.less';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './index.less';
|
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
@import '../../style/variables.less';
|
|
2
|
+
|
|
3
|
+
@base-button-name: base-btn;
|
|
4
|
+
|
|
5
|
+
.@{base-button-name} {
|
|
6
|
+
display: inline-flex;
|
|
7
|
+
gap: 12px;
|
|
8
|
+
align-items: center;
|
|
9
|
+
height: 32px;
|
|
10
|
+
padding: 0 16px;
|
|
11
|
+
font-weight: 400;
|
|
12
|
+
line-height: 22px;
|
|
13
|
+
background-color: @white;
|
|
14
|
+
border: none;
|
|
15
|
+
border-radius: 4px;
|
|
16
|
+
outline: none;
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
19
|
+
&-small {
|
|
20
|
+
height: 24px;
|
|
21
|
+
padding: 0 8px;
|
|
22
|
+
font-size: @font-size-sm;
|
|
23
|
+
line-height: 20px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&-large {
|
|
27
|
+
height: 40px;
|
|
28
|
+
padding: 0 24px;
|
|
29
|
+
font-size: @font-size_16;
|
|
30
|
+
line-height: 24px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&-round {
|
|
34
|
+
border-radius: 16px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&-block {
|
|
38
|
+
display: flex;
|
|
39
|
+
justify-content: center;
|
|
40
|
+
width: 100%;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&-loading {
|
|
44
|
+
opacity: 0.8;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&-default {
|
|
48
|
+
--font-color: @color_121212;
|
|
49
|
+
--border-color: @color_e6e6e6;
|
|
50
|
+
--hover-bg-color: @color_f2f2f2;
|
|
51
|
+
--active-bg-color: @color_e6e6e6;
|
|
52
|
+
color: @color_121212;
|
|
53
|
+
&:hover {
|
|
54
|
+
background-color:@color_f2f2f2;
|
|
55
|
+
}
|
|
56
|
+
&:active {
|
|
57
|
+
background-color: @color_e6e6e6;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&-primary {
|
|
62
|
+
--theme-color: @color_dc4946;
|
|
63
|
+
--hover-color: @color_e7807e;
|
|
64
|
+
--active-color: @color_c6423f;
|
|
65
|
+
color: @white;
|
|
66
|
+
background: var(--theme-color);
|
|
67
|
+
&:hover {
|
|
68
|
+
background-color: var(--hover-color);
|
|
69
|
+
}
|
|
70
|
+
&:active {
|
|
71
|
+
background-color: var(--active-color);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&-success {
|
|
76
|
+
color: @white;
|
|
77
|
+
background: var(--theme-color);
|
|
78
|
+
--theme-color: @color_47a92a;
|
|
79
|
+
--hover-color: @color_7ec36a;
|
|
80
|
+
--active-color: @color_409826;
|
|
81
|
+
&:hover {
|
|
82
|
+
background-color: var(--hover-color);
|
|
83
|
+
}
|
|
84
|
+
&:active {
|
|
85
|
+
background-color: var(--active-color);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&-dark {
|
|
90
|
+
--theme-color: @color_121212;
|
|
91
|
+
--hover-color: @color_595959;
|
|
92
|
+
--active-color: @color_333;
|
|
93
|
+
color: @white;
|
|
94
|
+
background: var(--theme-color);
|
|
95
|
+
&:hover {
|
|
96
|
+
background-color: var(--hover-color);
|
|
97
|
+
}
|
|
98
|
+
&:active {
|
|
99
|
+
background-color: var(--active-color);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&-gray {
|
|
104
|
+
--font-color: @color_121212;
|
|
105
|
+
--border-color: @color_f2f2f2;
|
|
106
|
+
--hover-color: @color_f7f7f7;
|
|
107
|
+
--active-color: @color_e6e6e6;
|
|
108
|
+
--hover-bg-color: @color_f7f7f7;
|
|
109
|
+
--active-bg-color: @color_e6e6e6;
|
|
110
|
+
color: var(--font-color);
|
|
111
|
+
background: @color_f2f2f2;
|
|
112
|
+
border: none;
|
|
113
|
+
&:hover {
|
|
114
|
+
background-color: var(--hover-color);
|
|
115
|
+
}
|
|
116
|
+
&:active {
|
|
117
|
+
background-color: var(--active-color);
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
&-variant-outlined {
|
|
122
|
+
color: var(--theme-color, var(--font-color));
|
|
123
|
+
background-color: @white;
|
|
124
|
+
border: 1px solid var(--theme-color, var(--border-color));
|
|
125
|
+
&:hover {
|
|
126
|
+
background-color: var(--hover-bg-color, @white);
|
|
127
|
+
border-color: var(--hover-color, var(--border-color));
|
|
128
|
+
}
|
|
129
|
+
&:active {
|
|
130
|
+
background-color: var(--active-bg-color, @white);
|
|
131
|
+
border-color: var(--active-color, var(--border-color));
|
|
132
|
+
}
|
|
133
|
+
.@{base-button-name}-loading-icon {
|
|
134
|
+
background: conic-gradient(from 180deg, rgba(213, 73, 65, 0), var(--theme-color));
|
|
135
|
+
.@{base-button-name}-loading-icon-mask {
|
|
136
|
+
background-color: @white;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
&.@{base-button-name}-disabled {
|
|
141
|
+
color: @color_bfbfbf;
|
|
142
|
+
background-color: @color_e6e6e6;
|
|
143
|
+
border-color: @color_e6e6e6;
|
|
144
|
+
&:hover {
|
|
145
|
+
background-color: @color_e6e6e6;
|
|
146
|
+
border-color: @color_e6e6e6;
|
|
147
|
+
}
|
|
148
|
+
&:active {
|
|
149
|
+
background-color: @color_e6e6e6;
|
|
150
|
+
border-color: @color_e6e6e6;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
&-variant-dashed {
|
|
156
|
+
color: var(--theme-color, var(--font-color));
|
|
157
|
+
background-color: @white;
|
|
158
|
+
border: 1px dashed var(--theme-color, var(--border-color));
|
|
159
|
+
&:hover {
|
|
160
|
+
background-color: var(--hover-bg-color, @white);
|
|
161
|
+
border-color: var(--hover-color, var(--border-color));
|
|
162
|
+
}
|
|
163
|
+
&:active {
|
|
164
|
+
background-color: var(--active-bg-color, @white);
|
|
165
|
+
border-color: var(--active-color, var(--border-color));
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
&-variant-link {
|
|
170
|
+
color: var(--theme-color);
|
|
171
|
+
background-color: transparent;
|
|
172
|
+
border: none;
|
|
173
|
+
&:hover {
|
|
174
|
+
background-color: @color_f2f2f2;
|
|
175
|
+
}
|
|
176
|
+
&:active {
|
|
177
|
+
background-color: @color_e6e6e6;
|
|
178
|
+
}
|
|
179
|
+
&.@{base-button-name}-disabled {
|
|
180
|
+
color: @color_bfbfbf;
|
|
181
|
+
background-color: transparent;
|
|
182
|
+
}
|
|
183
|
+
.@{base-button-name}-loading-icon {
|
|
184
|
+
background: conic-gradient(
|
|
185
|
+
from 180deg,
|
|
186
|
+
rgba(0, 0, 0, 0),
|
|
187
|
+
var(--theme-color, var(--font-color))
|
|
188
|
+
);
|
|
189
|
+
.@{base-button-name}-loading-icon-mask {
|
|
190
|
+
background-color: @white;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
&-disabled {
|
|
196
|
+
color: @color_bfbfbf;
|
|
197
|
+
background-color: @color_e6e6e6;
|
|
198
|
+
border-color: @color_e6e6e6;
|
|
199
|
+
cursor: not-allowed;
|
|
200
|
+
&:hover {
|
|
201
|
+
background-color: @color_e6e6e6;
|
|
202
|
+
}
|
|
203
|
+
&:active {
|
|
204
|
+
background-color: @color_e6e6e6;
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
@keyframes loading {
|
|
209
|
+
0% {
|
|
210
|
+
transform: rotate(0deg);
|
|
211
|
+
}
|
|
212
|
+
100% {
|
|
213
|
+
transform: rotate(360deg);
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
&-loading-icon {
|
|
218
|
+
display: flex;
|
|
219
|
+
align-items: center;
|
|
220
|
+
justify-content: center;
|
|
221
|
+
width: 16px;
|
|
222
|
+
height: 16px;
|
|
223
|
+
background: conic-gradient(from 180deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, 1));
|
|
224
|
+
border-radius: 50%;
|
|
225
|
+
animation: loading 1.2s linear infinite;
|
|
226
|
+
mask: radial-gradient(transparent 6px, #000 5px);
|
|
227
|
+
.@{base-button-name}-loading-icon-mask {
|
|
228
|
+
width: 12px;
|
|
229
|
+
height: 12px;
|
|
230
|
+
background-color: transparent;
|
|
231
|
+
border-radius: 50%;
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
}
|
|
@@ -14,6 +14,7 @@ export interface ComplexValSelectProps<T> extends Omit<SelectProps, 'value' | 'o
|
|
|
14
14
|
value?: T;
|
|
15
15
|
onChange?: (val: T, opt?: ComplexValSelectOptionType[]) => void;
|
|
16
16
|
options?: ComplexValSelectOptionType[];
|
|
17
|
+
maxLength?: number;
|
|
17
18
|
}
|
|
18
19
|
declare const ComplexValSelect: React.ForwardRefExoticComponent<ComplexValSelectProps<ComplexValSelectValueType> & React.RefAttributes<unknown>>;
|
|
19
20
|
export default ComplexValSelect;
|
|
@@ -77,6 +77,7 @@ var ComplexValSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
77
77
|
value = _a[0],
|
|
78
78
|
setValue = _a[1];
|
|
79
79
|
var options = props.options,
|
|
80
|
+
maxLength = props.maxLength,
|
|
80
81
|
onSelect = props.onSelect;
|
|
81
82
|
var selectRef = React.useRef(null);
|
|
82
83
|
React.useImperativeHandle(ref, function () {
|
|
@@ -85,6 +86,19 @@ var ComplexValSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
85
86
|
// 判断是否需要将optionValue转为JSON字符串
|
|
86
87
|
var isReferenceTypeVal = isReferenceTypeOption(options);
|
|
87
88
|
var finalOptions = isReferenceTypeVal ? _formatOptions(options) : options;
|
|
89
|
+
var disabledOptions = React.useMemo(function () {
|
|
90
|
+
if ((value === null || value === void 0 ? void 0 : value.length) === maxLength) {
|
|
91
|
+
return finalOptions === null || finalOptions === void 0 ? void 0 : finalOptions.map(function (item) {
|
|
92
|
+
if (value.includes(item.value)) {
|
|
93
|
+
return item;
|
|
94
|
+
}
|
|
95
|
+
return __assign(__assign({}, item), {
|
|
96
|
+
disabled: true
|
|
97
|
+
});
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
return finalOptions;
|
|
101
|
+
}, [finalOptions, value, maxLength]);
|
|
88
102
|
var handleChange = function handleChange(val) {
|
|
89
103
|
var nextVal = val && isReferenceTypeVal ? JSON.parse(val) : val;
|
|
90
104
|
setValue(nextVal, options);
|
|
@@ -101,7 +115,7 @@ var ComplexValSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
101
115
|
className: classNames('complex-val-select', props === null || props === void 0 ? void 0 : props.className),
|
|
102
116
|
suffixIcon: /*#__PURE__*/React.createElement(ArrowDownOutlined, null),
|
|
103
117
|
value: value && isReferenceTypeVal ? JSON.stringify(value) : value,
|
|
104
|
-
options: finalOptions,
|
|
118
|
+
options: maxLength ? disabledOptions : finalOptions,
|
|
105
119
|
onChange: handleChange,
|
|
106
120
|
onSelect: handleSelect
|
|
107
121
|
}, omit(props, ['value', 'onChange', 'options', 'onSelect', 'className'])));
|
package/es/index.d.ts
CHANGED
|
@@ -96,3 +96,5 @@ export { default as MultiLineEllipsisText } from './multi-line-ellipsis-text';
|
|
|
96
96
|
export type { MultiLineEllipsisTextProps } from './multi-line-ellipsis-text';
|
|
97
97
|
export type { RcSplitViewProps } from './rc-split-view';
|
|
98
98
|
export { default as RcSplitView } from './rc-split-view';
|
|
99
|
+
export { default as BaseButton } from './base-button';
|
|
100
|
+
export type { BaseButtonProps } from './base-button';
|
package/es/index.js
CHANGED
|
@@ -48,4 +48,5 @@ export { default as CountUp } from './count-up';
|
|
|
48
48
|
export { default as ConditionSelect } from './condition-select';
|
|
49
49
|
export { default as SignaturePad } from './signature-pad';
|
|
50
50
|
export { default as MultiLineEllipsisText } from './multi-line-ellipsis-text';
|
|
51
|
-
export { default as RcSplitView } from './rc-split-view';
|
|
51
|
+
export { default as RcSplitView } from './rc-split-view';
|
|
52
|
+
export { default as BaseButton } from './base-button';
|
package/es/style/variables.less
CHANGED
|
@@ -26,10 +26,22 @@
|
|
|
26
26
|
@color_02a6e3: #02a6e3;
|
|
27
27
|
@color_121212: #121212;
|
|
28
28
|
@color_999999: #999999;
|
|
29
|
+
@color_e6e6e6: #e6e6e6;
|
|
30
|
+
@color_f2f2f2: #f2f2f2;
|
|
31
|
+
@color_f7f7f7: #f7f7f7;
|
|
32
|
+
@color_e7807e: #e7807e;
|
|
33
|
+
@color_c6423f: #c6423f;
|
|
34
|
+
@color_47a92a: #47a92a;
|
|
35
|
+
@color_7ec36a: #7ec36a;
|
|
36
|
+
@color_409826: #409826;
|
|
37
|
+
@color_595959: #595959;
|
|
38
|
+
|
|
39
|
+
|
|
29
40
|
|
|
30
41
|
@font-size-sm: 12px;
|
|
31
42
|
@font-size-base: 14px;
|
|
32
43
|
@font-size-lg: @font-size-base + 2px;
|
|
44
|
+
@font-size_16: 16px;
|
|
33
45
|
@font-size_18: 18px;
|
|
34
46
|
|
|
35
47
|
@font-weight-500: 500;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface BaseButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
|
|
3
|
+
color?: 'primary' | 'success' | 'dark' | 'gray';
|
|
4
|
+
variant?: 'outlined' | 'dashed' | 'link' | 'text';
|
|
5
|
+
size?: 'small' | 'medium' | 'large';
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
block?: boolean;
|
|
9
|
+
/** 圆角 */
|
|
10
|
+
round?: boolean;
|
|
11
|
+
loading?: boolean;
|
|
12
|
+
prefixIcon?: React.ReactNode;
|
|
13
|
+
suffixIcon?: React.ReactNode;
|
|
14
|
+
}
|
|
15
|
+
declare const BaseButton: React.FC<BaseButtonProps>;
|
|
16
|
+
export default BaseButton;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var __assign = this && this.__assign || function () {
|
|
4
|
+
__assign = Object.assign || function (t) {
|
|
5
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
6
|
+
s = arguments[i];
|
|
7
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __rest = this && this.__rest || function (s, e) {
|
|
14
|
+
var t = {};
|
|
15
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
17
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
18
|
+
}
|
|
19
|
+
return t;
|
|
20
|
+
};
|
|
21
|
+
var __importDefault = this && this.__importDefault || function (mod) {
|
|
22
|
+
return mod && mod.__esModule ? mod : {
|
|
23
|
+
"default": mod
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
Object.defineProperty(exports, "__esModule", {
|
|
27
|
+
value: true
|
|
28
|
+
});
|
|
29
|
+
var react_1 = __importDefault(require("react"));
|
|
30
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
31
|
+
var btnNamePrefix = 'base-btn';
|
|
32
|
+
var BaseButton = function BaseButton(_a) {
|
|
33
|
+
var _b;
|
|
34
|
+
var _c = _a.color,
|
|
35
|
+
color = _c === void 0 ? 'default' : _c,
|
|
36
|
+
_d = _a.variant,
|
|
37
|
+
variant = _d === void 0 ? '' : _d,
|
|
38
|
+
_e = _a.size,
|
|
39
|
+
size = _e === void 0 ? 'medium' : _e,
|
|
40
|
+
disabled = _a.disabled,
|
|
41
|
+
_f = _a.round,
|
|
42
|
+
round = _f === void 0 ? false : _f,
|
|
43
|
+
_g = _a.block,
|
|
44
|
+
block = _g === void 0 ? false : _g,
|
|
45
|
+
_h = _a.loading,
|
|
46
|
+
loading = _h === void 0 ? false : _h,
|
|
47
|
+
prefixIcon = _a.prefixIcon,
|
|
48
|
+
suffixIcon = _a.suffixIcon,
|
|
49
|
+
children = _a.children,
|
|
50
|
+
resetProps = __rest(_a, ["color", "variant", "size", "disabled", "round", "block", "loading", "prefixIcon", "suffixIcon", "children"]);
|
|
51
|
+
var className = resetProps.className;
|
|
52
|
+
var loadingIcon = react_1["default"].createElement("div", {
|
|
53
|
+
className: "".concat(btnNamePrefix, "-loading-icon")
|
|
54
|
+
}, react_1["default"].createElement("div", {
|
|
55
|
+
className: "".concat(btnNamePrefix, "-loading-icon-mask")
|
|
56
|
+
}));
|
|
57
|
+
var prefixIconWithLoading = loading ? loadingIcon : prefixIcon;
|
|
58
|
+
var suffixIconWithLoading = loading ? loadingIcon : suffixIcon;
|
|
59
|
+
return react_1["default"].createElement("button", __assign({}, resetProps, {
|
|
60
|
+
className: (0, classnames_1["default"])(btnNamePrefix, "".concat(btnNamePrefix, "-").concat(color), "".concat(btnNamePrefix, "-").concat(size), "".concat(btnNamePrefix, "-variant-").concat(variant), (_b = {}, _b["".concat(btnNamePrefix, "-round")] = round, _b["".concat(btnNamePrefix, "-block")] = block, _b["".concat(btnNamePrefix, "-disabled")] = disabled, _b["".concat(btnNamePrefix, "-loading")] = loading, _b), className)
|
|
61
|
+
}), (prefixIcon || loading && !suffixIcon) && prefixIconWithLoading, react_1["default"].createElement("span", {
|
|
62
|
+
className: "".concat(btnNamePrefix, "-content")
|
|
63
|
+
}, children), suffixIcon && suffixIconWithLoading);
|
|
64
|
+
};
|
|
65
|
+
exports["default"] = BaseButton;
|
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
.base-btn {
|
|
2
|
+
display: inline-flex;
|
|
3
|
+
gap: 12px;
|
|
4
|
+
align-items: center;
|
|
5
|
+
height: 32px;
|
|
6
|
+
padding: 0 16px;
|
|
7
|
+
font-weight: 400;
|
|
8
|
+
line-height: 22px;
|
|
9
|
+
background-color: #fff;
|
|
10
|
+
border: none;
|
|
11
|
+
border-radius: 4px;
|
|
12
|
+
outline: none;
|
|
13
|
+
cursor: pointer;
|
|
14
|
+
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
15
|
+
}
|
|
16
|
+
.base-btn-small {
|
|
17
|
+
height: 24px;
|
|
18
|
+
padding: 0 8px;
|
|
19
|
+
font-size: 12px;
|
|
20
|
+
line-height: 20px;
|
|
21
|
+
}
|
|
22
|
+
.base-btn-large {
|
|
23
|
+
height: 40px;
|
|
24
|
+
padding: 0 24px;
|
|
25
|
+
font-size: 16px;
|
|
26
|
+
line-height: 24px;
|
|
27
|
+
}
|
|
28
|
+
.base-btn-round {
|
|
29
|
+
border-radius: 16px;
|
|
30
|
+
}
|
|
31
|
+
.base-btn-block {
|
|
32
|
+
display: flex;
|
|
33
|
+
justify-content: center;
|
|
34
|
+
width: 100%;
|
|
35
|
+
}
|
|
36
|
+
.base-btn-loading {
|
|
37
|
+
opacity: 0.8;
|
|
38
|
+
}
|
|
39
|
+
.base-btn-default {
|
|
40
|
+
--font-color: #121212;
|
|
41
|
+
--border-color: #e6e6e6;
|
|
42
|
+
--hover-bg-color: #f2f2f2;
|
|
43
|
+
--active-bg-color: #e6e6e6;
|
|
44
|
+
color: #121212;
|
|
45
|
+
}
|
|
46
|
+
.base-btn-default:hover {
|
|
47
|
+
background-color: #f2f2f2;
|
|
48
|
+
}
|
|
49
|
+
.base-btn-default:active {
|
|
50
|
+
background-color: #e6e6e6;
|
|
51
|
+
}
|
|
52
|
+
.base-btn-primary {
|
|
53
|
+
--theme-color: #dc4946;
|
|
54
|
+
--hover-color: #e7807e;
|
|
55
|
+
--active-color: #c6423f;
|
|
56
|
+
color: #fff;
|
|
57
|
+
background: var(--theme-color);
|
|
58
|
+
}
|
|
59
|
+
.base-btn-primary:hover {
|
|
60
|
+
background-color: var(--hover-color);
|
|
61
|
+
}
|
|
62
|
+
.base-btn-primary:active {
|
|
63
|
+
background-color: var(--active-color);
|
|
64
|
+
}
|
|
65
|
+
.base-btn-success {
|
|
66
|
+
color: #fff;
|
|
67
|
+
background: var(--theme-color);
|
|
68
|
+
--theme-color: #47a92a;
|
|
69
|
+
--hover-color: #7ec36a;
|
|
70
|
+
--active-color: #409826;
|
|
71
|
+
}
|
|
72
|
+
.base-btn-success:hover {
|
|
73
|
+
background-color: var(--hover-color);
|
|
74
|
+
}
|
|
75
|
+
.base-btn-success:active {
|
|
76
|
+
background-color: var(--active-color);
|
|
77
|
+
}
|
|
78
|
+
.base-btn-dark {
|
|
79
|
+
--theme-color: #121212;
|
|
80
|
+
--hover-color: #595959;
|
|
81
|
+
--active-color: #333;
|
|
82
|
+
color: #fff;
|
|
83
|
+
background: var(--theme-color);
|
|
84
|
+
}
|
|
85
|
+
.base-btn-dark:hover {
|
|
86
|
+
background-color: var(--hover-color);
|
|
87
|
+
}
|
|
88
|
+
.base-btn-dark:active {
|
|
89
|
+
background-color: var(--active-color);
|
|
90
|
+
}
|
|
91
|
+
.base-btn-gray {
|
|
92
|
+
--font-color: #121212;
|
|
93
|
+
--border-color: #f2f2f2;
|
|
94
|
+
--hover-color: #f7f7f7;
|
|
95
|
+
--active-color: #e6e6e6;
|
|
96
|
+
--hover-bg-color: #f7f7f7;
|
|
97
|
+
--active-bg-color: #e6e6e6;
|
|
98
|
+
color: var(--font-color);
|
|
99
|
+
background: #f2f2f2;
|
|
100
|
+
border: none;
|
|
101
|
+
}
|
|
102
|
+
.base-btn-gray:hover {
|
|
103
|
+
background-color: var(--hover-color);
|
|
104
|
+
}
|
|
105
|
+
.base-btn-gray:active {
|
|
106
|
+
background-color: var(--active-color);
|
|
107
|
+
}
|
|
108
|
+
.base-btn-variant-outlined {
|
|
109
|
+
color: var(--theme-color, var(--font-color));
|
|
110
|
+
background-color: #fff;
|
|
111
|
+
border: 1px solid var(--theme-color, var(--border-color));
|
|
112
|
+
}
|
|
113
|
+
.base-btn-variant-outlined:hover {
|
|
114
|
+
background-color: var(--hover-bg-color, #fff);
|
|
115
|
+
border-color: var(--hover-color, var(--border-color));
|
|
116
|
+
}
|
|
117
|
+
.base-btn-variant-outlined:active {
|
|
118
|
+
background-color: var(--active-bg-color, #fff);
|
|
119
|
+
border-color: var(--active-color, var(--border-color));
|
|
120
|
+
}
|
|
121
|
+
.base-btn-variant-outlined .base-btn-loading-icon {
|
|
122
|
+
background: conic-gradient(from 180deg, rgba(213, 73, 65, 0), var(--theme-color));
|
|
123
|
+
}
|
|
124
|
+
.base-btn-variant-outlined .base-btn-loading-icon .base-btn-loading-icon-mask {
|
|
125
|
+
background-color: #fff;
|
|
126
|
+
}
|
|
127
|
+
.base-btn-variant-outlined.base-btn-disabled {
|
|
128
|
+
color: #bfbfbf;
|
|
129
|
+
background-color: #e6e6e6;
|
|
130
|
+
border-color: #e6e6e6;
|
|
131
|
+
}
|
|
132
|
+
.base-btn-variant-outlined.base-btn-disabled:hover {
|
|
133
|
+
background-color: #e6e6e6;
|
|
134
|
+
border-color: #e6e6e6;
|
|
135
|
+
}
|
|
136
|
+
.base-btn-variant-outlined.base-btn-disabled:active {
|
|
137
|
+
background-color: #e6e6e6;
|
|
138
|
+
border-color: #e6e6e6;
|
|
139
|
+
}
|
|
140
|
+
.base-btn-variant-dashed {
|
|
141
|
+
color: var(--theme-color, var(--font-color));
|
|
142
|
+
background-color: #fff;
|
|
143
|
+
border: 1px dashed var(--theme-color, var(--border-color));
|
|
144
|
+
}
|
|
145
|
+
.base-btn-variant-dashed:hover {
|
|
146
|
+
background-color: var(--hover-bg-color, #fff);
|
|
147
|
+
border-color: var(--hover-color, var(--border-color));
|
|
148
|
+
}
|
|
149
|
+
.base-btn-variant-dashed:active {
|
|
150
|
+
background-color: var(--active-bg-color, #fff);
|
|
151
|
+
border-color: var(--active-color, var(--border-color));
|
|
152
|
+
}
|
|
153
|
+
.base-btn-variant-link {
|
|
154
|
+
color: var(--theme-color);
|
|
155
|
+
background-color: transparent;
|
|
156
|
+
border: none;
|
|
157
|
+
}
|
|
158
|
+
.base-btn-variant-link:hover {
|
|
159
|
+
background-color: #f2f2f2;
|
|
160
|
+
}
|
|
161
|
+
.base-btn-variant-link:active {
|
|
162
|
+
background-color: #e6e6e6;
|
|
163
|
+
}
|
|
164
|
+
.base-btn-variant-link.base-btn-disabled {
|
|
165
|
+
color: #bfbfbf;
|
|
166
|
+
background-color: transparent;
|
|
167
|
+
}
|
|
168
|
+
.base-btn-variant-link .base-btn-loading-icon {
|
|
169
|
+
background: conic-gradient(from 180deg, rgba(0, 0, 0, 0), var(--theme-color, var(--font-color)));
|
|
170
|
+
}
|
|
171
|
+
.base-btn-variant-link .base-btn-loading-icon .base-btn-loading-icon-mask {
|
|
172
|
+
background-color: #fff;
|
|
173
|
+
}
|
|
174
|
+
.base-btn-disabled {
|
|
175
|
+
color: #bfbfbf;
|
|
176
|
+
background-color: #e6e6e6;
|
|
177
|
+
border-color: #e6e6e6;
|
|
178
|
+
cursor: not-allowed;
|
|
179
|
+
}
|
|
180
|
+
.base-btn-disabled:hover {
|
|
181
|
+
background-color: #e6e6e6;
|
|
182
|
+
}
|
|
183
|
+
.base-btn-disabled:active {
|
|
184
|
+
background-color: #e6e6e6;
|
|
185
|
+
}
|
|
186
|
+
@keyframes loading {
|
|
187
|
+
0% {
|
|
188
|
+
transform: rotate(0deg);
|
|
189
|
+
}
|
|
190
|
+
100% {
|
|
191
|
+
transform: rotate(360deg);
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
.base-btn-loading-icon {
|
|
195
|
+
display: flex;
|
|
196
|
+
align-items: center;
|
|
197
|
+
justify-content: center;
|
|
198
|
+
width: 16px;
|
|
199
|
+
height: 16px;
|
|
200
|
+
background: conic-gradient(from 180deg, rgba(0, 0, 0, 0), #ffffff);
|
|
201
|
+
border-radius: 50%;
|
|
202
|
+
animation: loading 1.2s linear infinite;
|
|
203
|
+
-webkit-mask: radial-gradient(transparent 6px, #000 5px);
|
|
204
|
+
mask: radial-gradient(transparent 6px, #000 5px);
|
|
205
|
+
}
|
|
206
|
+
.base-btn-loading-icon .base-btn-loading-icon-mask {
|
|
207
|
+
width: 12px;
|
|
208
|
+
height: 12px;
|
|
209
|
+
background-color: transparent;
|
|
210
|
+
border-radius: 50%;
|
|
211
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './index.less';
|
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
@import '../../style/variables.less';
|
|
2
|
+
|
|
3
|
+
@base-button-name: base-btn;
|
|
4
|
+
|
|
5
|
+
.@{base-button-name} {
|
|
6
|
+
display: inline-flex;
|
|
7
|
+
gap: 12px;
|
|
8
|
+
align-items: center;
|
|
9
|
+
height: 32px;
|
|
10
|
+
padding: 0 16px;
|
|
11
|
+
font-weight: 400;
|
|
12
|
+
line-height: 22px;
|
|
13
|
+
background-color: @white;
|
|
14
|
+
border: none;
|
|
15
|
+
border-radius: 4px;
|
|
16
|
+
outline: none;
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
19
|
+
&-small {
|
|
20
|
+
height: 24px;
|
|
21
|
+
padding: 0 8px;
|
|
22
|
+
font-size: @font-size-sm;
|
|
23
|
+
line-height: 20px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&-large {
|
|
27
|
+
height: 40px;
|
|
28
|
+
padding: 0 24px;
|
|
29
|
+
font-size: @font-size_16;
|
|
30
|
+
line-height: 24px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&-round {
|
|
34
|
+
border-radius: 16px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&-block {
|
|
38
|
+
display: flex;
|
|
39
|
+
justify-content: center;
|
|
40
|
+
width: 100%;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&-loading {
|
|
44
|
+
opacity: 0.8;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&-default {
|
|
48
|
+
--font-color: @color_121212;
|
|
49
|
+
--border-color: @color_e6e6e6;
|
|
50
|
+
--hover-bg-color: @color_f2f2f2;
|
|
51
|
+
--active-bg-color: @color_e6e6e6;
|
|
52
|
+
color: @color_121212;
|
|
53
|
+
&:hover {
|
|
54
|
+
background-color:@color_f2f2f2;
|
|
55
|
+
}
|
|
56
|
+
&:active {
|
|
57
|
+
background-color: @color_e6e6e6;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&-primary {
|
|
62
|
+
--theme-color: @color_dc4946;
|
|
63
|
+
--hover-color: @color_e7807e;
|
|
64
|
+
--active-color: @color_c6423f;
|
|
65
|
+
color: @white;
|
|
66
|
+
background: var(--theme-color);
|
|
67
|
+
&:hover {
|
|
68
|
+
background-color: var(--hover-color);
|
|
69
|
+
}
|
|
70
|
+
&:active {
|
|
71
|
+
background-color: var(--active-color);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&-success {
|
|
76
|
+
color: @white;
|
|
77
|
+
background: var(--theme-color);
|
|
78
|
+
--theme-color: @color_47a92a;
|
|
79
|
+
--hover-color: @color_7ec36a;
|
|
80
|
+
--active-color: @color_409826;
|
|
81
|
+
&:hover {
|
|
82
|
+
background-color: var(--hover-color);
|
|
83
|
+
}
|
|
84
|
+
&:active {
|
|
85
|
+
background-color: var(--active-color);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&-dark {
|
|
90
|
+
--theme-color: @color_121212;
|
|
91
|
+
--hover-color: @color_595959;
|
|
92
|
+
--active-color: @color_333;
|
|
93
|
+
color: @white;
|
|
94
|
+
background: var(--theme-color);
|
|
95
|
+
&:hover {
|
|
96
|
+
background-color: var(--hover-color);
|
|
97
|
+
}
|
|
98
|
+
&:active {
|
|
99
|
+
background-color: var(--active-color);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&-gray {
|
|
104
|
+
--font-color: @color_121212;
|
|
105
|
+
--border-color: @color_f2f2f2;
|
|
106
|
+
--hover-color: @color_f7f7f7;
|
|
107
|
+
--active-color: @color_e6e6e6;
|
|
108
|
+
--hover-bg-color: @color_f7f7f7;
|
|
109
|
+
--active-bg-color: @color_e6e6e6;
|
|
110
|
+
color: var(--font-color);
|
|
111
|
+
background: @color_f2f2f2;
|
|
112
|
+
border: none;
|
|
113
|
+
&:hover {
|
|
114
|
+
background-color: var(--hover-color);
|
|
115
|
+
}
|
|
116
|
+
&:active {
|
|
117
|
+
background-color: var(--active-color);
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
&-variant-outlined {
|
|
122
|
+
color: var(--theme-color, var(--font-color));
|
|
123
|
+
background-color: @white;
|
|
124
|
+
border: 1px solid var(--theme-color, var(--border-color));
|
|
125
|
+
&:hover {
|
|
126
|
+
background-color: var(--hover-bg-color, @white);
|
|
127
|
+
border-color: var(--hover-color, var(--border-color));
|
|
128
|
+
}
|
|
129
|
+
&:active {
|
|
130
|
+
background-color: var(--active-bg-color, @white);
|
|
131
|
+
border-color: var(--active-color, var(--border-color));
|
|
132
|
+
}
|
|
133
|
+
.@{base-button-name}-loading-icon {
|
|
134
|
+
background: conic-gradient(from 180deg, rgba(213, 73, 65, 0), var(--theme-color));
|
|
135
|
+
.@{base-button-name}-loading-icon-mask {
|
|
136
|
+
background-color: @white;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
&.@{base-button-name}-disabled {
|
|
141
|
+
color: @color_bfbfbf;
|
|
142
|
+
background-color: @color_e6e6e6;
|
|
143
|
+
border-color: @color_e6e6e6;
|
|
144
|
+
&:hover {
|
|
145
|
+
background-color: @color_e6e6e6;
|
|
146
|
+
border-color: @color_e6e6e6;
|
|
147
|
+
}
|
|
148
|
+
&:active {
|
|
149
|
+
background-color: @color_e6e6e6;
|
|
150
|
+
border-color: @color_e6e6e6;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
&-variant-dashed {
|
|
156
|
+
color: var(--theme-color, var(--font-color));
|
|
157
|
+
background-color: @white;
|
|
158
|
+
border: 1px dashed var(--theme-color, var(--border-color));
|
|
159
|
+
&:hover {
|
|
160
|
+
background-color: var(--hover-bg-color, @white);
|
|
161
|
+
border-color: var(--hover-color, var(--border-color));
|
|
162
|
+
}
|
|
163
|
+
&:active {
|
|
164
|
+
background-color: var(--active-bg-color, @white);
|
|
165
|
+
border-color: var(--active-color, var(--border-color));
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
&-variant-link {
|
|
170
|
+
color: var(--theme-color);
|
|
171
|
+
background-color: transparent;
|
|
172
|
+
border: none;
|
|
173
|
+
&:hover {
|
|
174
|
+
background-color: @color_f2f2f2;
|
|
175
|
+
}
|
|
176
|
+
&:active {
|
|
177
|
+
background-color: @color_e6e6e6;
|
|
178
|
+
}
|
|
179
|
+
&.@{base-button-name}-disabled {
|
|
180
|
+
color: @color_bfbfbf;
|
|
181
|
+
background-color: transparent;
|
|
182
|
+
}
|
|
183
|
+
.@{base-button-name}-loading-icon {
|
|
184
|
+
background: conic-gradient(
|
|
185
|
+
from 180deg,
|
|
186
|
+
rgba(0, 0, 0, 0),
|
|
187
|
+
var(--theme-color, var(--font-color))
|
|
188
|
+
);
|
|
189
|
+
.@{base-button-name}-loading-icon-mask {
|
|
190
|
+
background-color: @white;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
&-disabled {
|
|
196
|
+
color: @color_bfbfbf;
|
|
197
|
+
background-color: @color_e6e6e6;
|
|
198
|
+
border-color: @color_e6e6e6;
|
|
199
|
+
cursor: not-allowed;
|
|
200
|
+
&:hover {
|
|
201
|
+
background-color: @color_e6e6e6;
|
|
202
|
+
}
|
|
203
|
+
&:active {
|
|
204
|
+
background-color: @color_e6e6e6;
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
@keyframes loading {
|
|
209
|
+
0% {
|
|
210
|
+
transform: rotate(0deg);
|
|
211
|
+
}
|
|
212
|
+
100% {
|
|
213
|
+
transform: rotate(360deg);
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
&-loading-icon {
|
|
218
|
+
display: flex;
|
|
219
|
+
align-items: center;
|
|
220
|
+
justify-content: center;
|
|
221
|
+
width: 16px;
|
|
222
|
+
height: 16px;
|
|
223
|
+
background: conic-gradient(from 180deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, 1));
|
|
224
|
+
border-radius: 50%;
|
|
225
|
+
animation: loading 1.2s linear infinite;
|
|
226
|
+
mask: radial-gradient(transparent 6px, #000 5px);
|
|
227
|
+
.@{base-button-name}-loading-icon-mask {
|
|
228
|
+
width: 12px;
|
|
229
|
+
height: 12px;
|
|
230
|
+
background-color: transparent;
|
|
231
|
+
border-radius: 50%;
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
}
|
|
@@ -14,6 +14,7 @@ export interface ComplexValSelectProps<T> extends Omit<SelectProps, 'value' | 'o
|
|
|
14
14
|
value?: T;
|
|
15
15
|
onChange?: (val: T, opt?: ComplexValSelectOptionType[]) => void;
|
|
16
16
|
options?: ComplexValSelectOptionType[];
|
|
17
|
+
maxLength?: number;
|
|
17
18
|
}
|
|
18
19
|
declare const ComplexValSelect: React.ForwardRefExoticComponent<ComplexValSelectProps<ComplexValSelectValueType> & React.RefAttributes<unknown>>;
|
|
19
20
|
export default ComplexValSelect;
|
|
@@ -120,6 +120,7 @@ var ComplexValSelect = React.forwardRef(function (props, ref) {
|
|
|
120
120
|
value = _a[0],
|
|
121
121
|
setValue = _a[1];
|
|
122
122
|
var options = props.options,
|
|
123
|
+
maxLength = props.maxLength,
|
|
123
124
|
onSelect = props.onSelect;
|
|
124
125
|
var selectRef = React.useRef(null);
|
|
125
126
|
React.useImperativeHandle(ref, function () {
|
|
@@ -128,6 +129,19 @@ var ComplexValSelect = React.forwardRef(function (props, ref) {
|
|
|
128
129
|
// 判断是否需要将optionValue转为JSON字符串
|
|
129
130
|
var isReferenceTypeVal = (0, exports.isReferenceTypeOption)(options);
|
|
130
131
|
var finalOptions = isReferenceTypeVal ? _formatOptions(options) : options;
|
|
132
|
+
var disabledOptions = React.useMemo(function () {
|
|
133
|
+
if ((value === null || value === void 0 ? void 0 : value.length) === maxLength) {
|
|
134
|
+
return finalOptions === null || finalOptions === void 0 ? void 0 : finalOptions.map(function (item) {
|
|
135
|
+
if (value.includes(item.value)) {
|
|
136
|
+
return item;
|
|
137
|
+
}
|
|
138
|
+
return __assign(__assign({}, item), {
|
|
139
|
+
disabled: true
|
|
140
|
+
});
|
|
141
|
+
});
|
|
142
|
+
}
|
|
143
|
+
return finalOptions;
|
|
144
|
+
}, [finalOptions, value, maxLength]);
|
|
131
145
|
var handleChange = function handleChange(val) {
|
|
132
146
|
var nextVal = val && isReferenceTypeVal ? JSON.parse(val) : val;
|
|
133
147
|
setValue(nextVal, options);
|
|
@@ -144,7 +158,7 @@ var ComplexValSelect = React.forwardRef(function (props, ref) {
|
|
|
144
158
|
className: (0, classnames_1["default"])('complex-val-select', props === null || props === void 0 ? void 0 : props.className),
|
|
145
159
|
suffixIcon: React.createElement(ArrowDownOutlined_1["default"], null),
|
|
146
160
|
value: value && isReferenceTypeVal ? JSON.stringify(value) : value,
|
|
147
|
-
options: finalOptions,
|
|
161
|
+
options: maxLength ? disabledOptions : finalOptions,
|
|
148
162
|
onChange: handleChange,
|
|
149
163
|
onSelect: handleSelect
|
|
150
164
|
}, (0, omit_1["default"])(props, ['value', 'onChange', 'options', 'onSelect', 'className'])));
|
package/lib/index.d.ts
CHANGED
|
@@ -96,3 +96,5 @@ export { default as MultiLineEllipsisText } from './multi-line-ellipsis-text';
|
|
|
96
96
|
export type { MultiLineEllipsisTextProps } from './multi-line-ellipsis-text';
|
|
97
97
|
export type { RcSplitViewProps } from './rc-split-view';
|
|
98
98
|
export { default as RcSplitView } from './rc-split-view';
|
|
99
|
+
export { default as BaseButton } from './base-button';
|
|
100
|
+
export type { BaseButtonProps } from './base-button';
|
package/lib/index.js
CHANGED
|
@@ -9,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
9
9
|
value: true
|
|
10
10
|
});
|
|
11
11
|
exports.MultiLineEllipsisText = exports.SignaturePad = exports.ConditionSelect = exports.CountUp = exports.CountDown = exports.ComplexValSelect = exports.MultipartUpload = exports.LabelConditionSelectInput = exports.Flex = exports.Resizable = exports.RichTextEditor = exports.BeautifulDnd = exports.LabelCustomizeRangePicker = exports.TableCol = exports.LabelTreeSelect = exports.LabelConditionInput = exports.LabelNumberInput = exports.LabelAutoComplete = exports.LabelDatePicker = exports.LabelRangePicker = exports.JsonEditor = exports.AreaText = exports.LabelTextArea = exports.ASelect = exports.LabelSelect = exports.ColorSelect = exports.LabelInput = exports.TextInput = exports.TextArea = exports.SplitPane = exports.sortableHoc = exports.SingleImgUpload = exports.RcTransitionGroup = exports.RcQRcode = exports.RcEchart = exports.StepNumberInput = exports.LabelRangeNumber = exports.NumberInput = exports.RcMotion = exports.KeepTab = exports.ImgCrop = exports.HighlightWords = exports.HighlightTextarea = exports.CopyToClipboard = exports.NumberFormatInput = exports.ConfigProvider = exports.ConditionSelectInput = exports.ConditionInput = exports.ButtonModal = exports.ButtonDrawer = void 0;
|
|
12
|
-
exports.RcSplitView = void 0;
|
|
12
|
+
exports.BaseButton = exports.RcSplitView = void 0;
|
|
13
13
|
var button_drawer_1 = require("./button-drawer");
|
|
14
14
|
Object.defineProperty(exports, "ButtonDrawer", {
|
|
15
15
|
enumerable: true,
|
|
@@ -366,4 +366,11 @@ Object.defineProperty(exports, "RcSplitView", {
|
|
|
366
366
|
get: function get() {
|
|
367
367
|
return __importDefault(rc_split_view_1)["default"];
|
|
368
368
|
}
|
|
369
|
+
});
|
|
370
|
+
var base_button_1 = require("./base-button");
|
|
371
|
+
Object.defineProperty(exports, "BaseButton", {
|
|
372
|
+
enumerable: true,
|
|
373
|
+
get: function get() {
|
|
374
|
+
return __importDefault(base_button_1)["default"];
|
|
375
|
+
}
|
|
369
376
|
});
|
package/lib/style/variables.less
CHANGED
|
@@ -26,10 +26,22 @@
|
|
|
26
26
|
@color_02a6e3: #02a6e3;
|
|
27
27
|
@color_121212: #121212;
|
|
28
28
|
@color_999999: #999999;
|
|
29
|
+
@color_e6e6e6: #e6e6e6;
|
|
30
|
+
@color_f2f2f2: #f2f2f2;
|
|
31
|
+
@color_f7f7f7: #f7f7f7;
|
|
32
|
+
@color_e7807e: #e7807e;
|
|
33
|
+
@color_c6423f: #c6423f;
|
|
34
|
+
@color_47a92a: #47a92a;
|
|
35
|
+
@color_7ec36a: #7ec36a;
|
|
36
|
+
@color_409826: #409826;
|
|
37
|
+
@color_595959: #595959;
|
|
38
|
+
|
|
39
|
+
|
|
29
40
|
|
|
30
41
|
@font-size-sm: 12px;
|
|
31
42
|
@font-size-base: 14px;
|
|
32
43
|
@font-size-lg: @font-size-base + 2px;
|
|
44
|
+
@font-size_16: 16px;
|
|
33
45
|
@font-size_18: 18px;
|
|
34
46
|
|
|
35
47
|
@font-weight-500: 500;
|