assui 3.2.104 → 3.2.106

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 (11) hide show
  1. package/es/base-button/demo/index.less +6 -0
  2. package/es/base-button/style/index.css +29 -21
  3. package/es/base-button/style/index.less +29 -22
  4. package/es/complex-val-select/index.d.ts +1 -1
  5. package/es/complex-val-select/index.js +22 -12
  6. package/lib/base-button/demo/index.less +6 -0
  7. package/lib/base-button/style/index.css +29 -21
  8. package/lib/base-button/style/index.less +29 -22
  9. package/lib/complex-val-select/index.d.ts +1 -1
  10. package/lib/complex-val-select/index.js +22 -12
  11. package/package.json +2 -2
package/es/base-button/demo/index.less CHANGED
@@ -11,3 +11,9 @@
11
11
  margin-bottom: 15px;
12
12
  }
13
13
  }
14
+
15
+ .icon-box{
16
+ .spotecicon{
17
+ width: 16px;
18
+ }
19
+ }
package/es/base-button/style/index.css CHANGED
@@ -1,6 +1,7 @@
1
1
  .base-btn {
2
2
  display: inline-flex;
3
- gap: 12px;
3
+ font-size: 14px;
4
+ gap: 8px;
4
5
  align-items: center;
5
6
  height: 32px;
6
7
  padding: 0 16px;
@@ -18,8 +19,10 @@
18
19
  padding: 0 8px;
19
20
  font-size: 12px;
20
21
  line-height: 20px;
22
+ gap: 4px;
21
23
  }
22
24
  .base-btn-large {
25
+ gap: 12px;
23
26
  height: 40px;
24
27
  padding: 0 24px;
25
28
  font-size: 16px;
@@ -32,15 +35,19 @@
32
35
  display: flex;
33
36
  justify-content: center;
34
37
  width: 100%;
38
+ height: 40px;
39
+ font-size: 16px;
40
+ line-height: 24px;
35
41
  }
36
42
  .base-btn-loading {
37
43
  opacity: 0.8;
38
44
  }
39
45
  .base-btn-default {
40
46
  --font-color: #121212;
41
- --border-color: #e6e6e6;
47
+ --border-color: #d9d9d9;
42
48
  --hover-bg-color: #f2f2f2;
43
49
  --active-bg-color: #e6e6e6;
50
+ --disabled-border-color: #d9d9d9;
44
51
  color: #121212;
45
52
  }
46
53
  .base-btn-default:hover {
@@ -53,6 +60,8 @@
53
60
  --theme-color: #dc4946;
54
61
  --hover-color: #e7807e;
55
62
  --active-color: #c6423f;
63
+ --hover-text-color: var(--hover-color);
64
+ --active-text-color: var(--active-color);
56
65
  color: #fff;
57
66
  background: var(--theme-color);
58
67
  }
@@ -68,6 +77,8 @@
68
77
  --theme-color: #47a92a;
69
78
  --hover-color: #7ec36a;
70
79
  --active-color: #409826;
80
+ --hover-text-color: var(--hover-color);
81
+ --active-text-color: var(--active-color);
71
82
  }
72
83
  .base-btn-success:hover {
73
84
  background-color: var(--hover-color);
@@ -79,6 +90,8 @@
79
90
  --theme-color: #121212;
80
91
  --hover-color: #595959;
81
92
  --active-color: #333;
93
+ --hover-text-color: var(--hover-color);
94
+ --active-text-color: var(--active-color);
82
95
  color: #fff;
83
96
  background: var(--theme-color);
84
97
  }
@@ -90,11 +103,13 @@
90
103
  }
91
104
  .base-btn-gray {
92
105
  --font-color: #121212;
93
- --border-color: #f2f2f2;
106
+ --border-color: #d9d9d9;
94
107
  --hover-color: #f7f7f7;
95
108
  --active-color: #e6e6e6;
96
109
  --hover-bg-color: #f7f7f7;
97
110
  --active-bg-color: #e6e6e6;
111
+ --hover-text-color: var(--font-color);
112
+ --active-text-color: var(--font-color);
98
113
  color: var(--font-color);
99
114
  background: #f2f2f2;
100
115
  border: none;
@@ -111,10 +126,12 @@
111
126
  border: 1px solid var(--theme-color, var(--border-color));
112
127
  }
113
128
  .base-btn-variant-outlined:hover {
129
+ color: var(--hover-text-color, var(--font-color));
114
130
  background-color: var(--hover-bg-color, #fff);
115
131
  border-color: var(--hover-color, var(--border-color));
116
132
  }
117
133
  .base-btn-variant-outlined:active {
134
+ color: var(--active-text-color, var(--font-color));
118
135
  background-color: var(--active-bg-color, #fff);
119
136
  border-color: var(--active-color, var(--border-color));
120
137
  }
@@ -124,29 +141,18 @@
124
141
  .base-btn-variant-outlined .base-btn-loading-icon .base-btn-loading-icon-mask {
125
142
  background-color: #fff;
126
143
  }
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
144
  .base-btn-variant-dashed {
141
145
  color: var(--theme-color, var(--font-color));
142
146
  background-color: #fff;
143
147
  border: 1px dashed var(--theme-color, var(--border-color));
144
148
  }
145
149
  .base-btn-variant-dashed:hover {
150
+ color: var(--hover-text-color, var(--font-color));
146
151
  background-color: var(--hover-bg-color, #fff);
147
152
  border-color: var(--hover-color, var(--border-color));
148
153
  }
149
154
  .base-btn-variant-dashed:active {
155
+ color: var(--active-text-color, var(--font-color));
150
156
  background-color: var(--active-bg-color, #fff);
151
157
  border-color: var(--active-color, var(--border-color));
152
158
  }
@@ -172,16 +178,18 @@
172
178
  background-color: #fff;
173
179
  }
174
180
  .base-btn-disabled {
175
- color: #bfbfbf;
176
- background-color: #e6e6e6;
177
- border-color: #e6e6e6;
181
+ color: #bfbfbf !important;
182
+ background-color: #f2f2f2 !important;
183
+ border-color: var(--disabled-border-color, #f2f2f2) !important;
178
184
  cursor: not-allowed;
179
185
  }
180
186
  .base-btn-disabled:hover {
181
- background-color: #e6e6e6;
187
+ color: #bfbfbf !important;
188
+ background-color: #f2f2f2 !important;
182
189
  }
183
190
  .base-btn-disabled:active {
184
- background-color: #e6e6e6;
191
+ color: #bfbfbf !important;
192
+ background-color: #f2f2f2 !important;
185
193
  }
186
194
  @keyframes loading {
187
195
  0% {
package/es/base-button/style/index.less CHANGED
@@ -4,7 +4,8 @@
4
4
 
5
5
  .@{base-button-name} {
6
6
  display: inline-flex;
7
- gap: 12px;
7
+ font-size: @font-size-base;
8
+ gap: 8px;
8
9
  align-items: center;
9
10
  height: 32px;
10
11
  padding: 0 16px;
@@ -21,9 +22,11 @@
21
22
  padding: 0 8px;
22
23
  font-size: @font-size-sm;
23
24
  line-height: 20px;
25
+ gap: 4px;
24
26
  }
25
27
 
26
28
  &-large {
29
+ gap: 12px;
27
30
  height: 40px;
28
31
  padding: 0 24px;
29
32
  font-size: @font-size_16;
@@ -38,6 +41,9 @@
38
41
  display: flex;
39
42
  justify-content: center;
40
43
  width: 100%;
44
+ height: 40px;
45
+ font-size: @font-size_16;
46
+ line-height: 24px;
41
47
  }
42
48
 
43
49
  &-loading {
@@ -46,9 +52,10 @@
46
52
 
47
53
  &-default {
48
54
  --font-color: @color_121212;
49
- --border-color: @color_e6e6e6;
55
+ --border-color: @color_d9d9d9;
50
56
  --hover-bg-color: @color_f2f2f2;
51
57
  --active-bg-color: @color_e6e6e6;
58
+ --disabled-border-color: @color_d9d9d9;
52
59
  color: @color_121212;
53
60
  &:hover {
54
61
  background-color:@color_f2f2f2;
@@ -62,6 +69,8 @@
62
69
  --theme-color: @color_dc4946;
63
70
  --hover-color: @color_e7807e;
64
71
  --active-color: @color_c6423f;
72
+ --hover-text-color: var(--hover-color);
73
+ --active-text-color: var(--active-color);
65
74
  color: @white;
66
75
  background: var(--theme-color);
67
76
  &:hover {
@@ -78,6 +87,8 @@
78
87
  --theme-color: @color_47a92a;
79
88
  --hover-color: @color_7ec36a;
80
89
  --active-color: @color_409826;
90
+ --hover-text-color: var(--hover-color);
91
+ --active-text-color: var(--active-color);
81
92
  &:hover {
82
93
  background-color: var(--hover-color);
83
94
  }
@@ -90,6 +101,8 @@
90
101
  --theme-color: @color_121212;
91
102
  --hover-color: @color_595959;
92
103
  --active-color: @color_333;
104
+ --hover-text-color: var(--hover-color);
105
+ --active-text-color: var(--active-color);
93
106
  color: @white;
94
107
  background: var(--theme-color);
95
108
  &:hover {
@@ -102,11 +115,13 @@
102
115
 
103
116
  &-gray {
104
117
  --font-color: @color_121212;
105
- --border-color: @color_f2f2f2;
118
+ --border-color: @color_d9d9d9;
106
119
  --hover-color: @color_f7f7f7;
107
120
  --active-color: @color_e6e6e6;
108
121
  --hover-bg-color: @color_f7f7f7;
109
122
  --active-bg-color: @color_e6e6e6;
123
+ --hover-text-color: var(--font-color);
124
+ --active-text-color: var(--font-color);
110
125
  color: var(--font-color);
111
126
  background: @color_f2f2f2;
112
127
  border: none;
@@ -123,10 +138,12 @@
123
138
  background-color: @white;
124
139
  border: 1px solid var(--theme-color, var(--border-color));
125
140
  &:hover {
141
+ color: var(--hover-text-color, var(--font-color));
126
142
  background-color: var(--hover-bg-color, @white);
127
143
  border-color: var(--hover-color, var(--border-color));
128
144
  }
129
145
  &:active {
146
+ color: var(--active-text-color, var(--font-color));
130
147
  background-color: var(--active-bg-color, @white);
131
148
  border-color: var(--active-color, var(--border-color));
132
149
  }
@@ -136,20 +153,6 @@
136
153
  background-color: @white;
137
154
  }
138
155
  }
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
156
  }
154
157
 
155
158
  &-variant-dashed {
@@ -157,10 +160,12 @@
157
160
  background-color: @white;
158
161
  border: 1px dashed var(--theme-color, var(--border-color));
159
162
  &:hover {
163
+ color: var(--hover-text-color, var(--font-color));
160
164
  background-color: var(--hover-bg-color, @white);
161
165
  border-color: var(--hover-color, var(--border-color));
162
166
  }
163
167
  &:active {
168
+ color: var(--active-text-color, var(--font-color));
164
169
  background-color: var(--active-bg-color, @white);
165
170
  border-color: var(--active-color, var(--border-color));
166
171
  }
@@ -193,15 +198,17 @@
193
198
  }
194
199
 
195
200
  &-disabled {
196
- color: @color_bfbfbf;
197
- background-color: @color_e6e6e6;
198
- border-color: @color_e6e6e6;
201
+ color: @color_bfbfbf !important;
202
+ background-color: @color_f2f2f2 !important;
203
+ border-color: var(--disabled-border-color, @color_f2f2f2) !important;
199
204
  cursor: not-allowed;
200
205
  &:hover {
201
- background-color: @color_e6e6e6;
206
+ color: @color_bfbfbf !important;
207
+ background-color: @color_f2f2f2 !important;
202
208
  }
203
209
  &:active {
204
- background-color: @color_e6e6e6;
210
+ color: @color_bfbfbf !important;
211
+ background-color: @color_f2f2f2 !important;
205
212
  }
206
213
  }
207
214
 
package/es/complex-val-select/index.d.ts CHANGED
@@ -12,7 +12,7 @@ export interface ComplexValSelectOptionType extends Omit<DefaultOptionType, 'val
12
12
  export declare const isReferenceTypeOption: (options?: ComplexValSelectOptionType[]) => boolean;
13
13
  export interface ComplexValSelectProps<T> extends Omit<SelectProps, 'value' | 'onChange' | 'options'> {
14
14
  value?: T;
15
- onChange?: (val: T, opt?: ComplexValSelectOptionType[]) => void;
15
+ onChange?: (val: T, opt?: ComplexValSelectOptionType | ComplexValSelectOptionType[]) => void;
16
16
  options?: ComplexValSelectOptionType[];
17
17
  }
18
18
  declare const ComplexValSelect: React.ForwardRefExoticComponent<ComplexValSelectProps<ComplexValSelectValueType> & React.RefAttributes<unknown>>;
package/es/complex-val-select/index.js CHANGED
@@ -32,10 +32,10 @@ var __read = this && this.__read || function (o, n) {
32
32
  };
33
33
  import * as React from 'react';
34
34
  import omit from 'lodash/omit';
35
- import find from 'lodash/find';
36
35
  import some from 'lodash/some';
37
36
  import isArray from 'lodash/isArray';
38
37
  import isObject from 'lodash/isObject';
38
+ import isUndefined from 'lodash/isUndefined';
39
39
  import Select from "antd/es/select";
40
40
  import classNames from 'classnames';
41
41
  import ArrowDownOutlined from "a-icons/es/ArrowDownOutlined";
@@ -50,7 +50,7 @@ var _formatOptions = function formatOptions(dateSource) {
50
50
  } : {};
51
51
  return __assign(__assign(__assign({}, item), {
52
52
  label: item.label,
53
- value: item.value ? JSON.stringify(item.value) : undefined
53
+ value: isUndefined(item.value) ? undefined : JSON.stringify(item.value)
54
54
  }), otherProps);
55
55
  });
56
56
  return options;
@@ -85,25 +85,35 @@ var ComplexValSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
85
85
  // 判断是否需要将optionValue转为JSON字符串
86
86
  var isReferenceTypeVal = isReferenceTypeOption(options);
87
87
  var finalOptions = isReferenceTypeVal ? _formatOptions(options) : options;
88
- var handleChange = function handleChange(val) {
89
- var nextVal = val && isReferenceTypeVal ? JSON.parse(val) : val;
90
- setValue(nextVal, options);
88
+ var handleChange = function handleChange(val, option) {
89
+ var nextVal = val;
90
+ if (val && isReferenceTypeVal) {
91
+ nextVal = isArray(val) ? val.map(function (item) {
92
+ return JSON.parse(item);
93
+ }) : JSON.parse(val);
94
+ }
95
+ setValue(nextVal, option);
91
96
  };
92
- var handleSelect = function handleSelect(val) {
97
+ var handleSelect = function handleSelect(val, option) {
93
98
  var nextVal = val && isReferenceTypeVal ? JSON.parse(val) : val;
94
- var selectOption = find(finalOptions, {
95
- value: val
96
- });
97
- onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextVal, selectOption);
99
+ onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextVal, option);
98
100
  };
101
+ var displayValue = React.useMemo(function () {
102
+ if (value && isReferenceTypeVal) {
103
+ return isArray(value) ? value.map(function (v) {
104
+ return JSON.stringify(v);
105
+ }) : JSON.stringify(value);
106
+ }
107
+ return value;
108
+ }, [value, isReferenceTypeVal]);
99
109
  return /*#__PURE__*/React.createElement(Select, __assign({
100
110
  ref: selectRef,
101
111
  className: classNames('complex-val-select', props === null || props === void 0 ? void 0 : props.className),
102
112
  suffixIcon: /*#__PURE__*/React.createElement(ArrowDownOutlined, null),
103
- value: value && isReferenceTypeVal ? JSON.stringify(value) : value,
113
+ value: displayValue,
104
114
  options: finalOptions,
105
115
  onChange: handleChange,
106
116
  onSelect: handleSelect
107
- }, omit(props, ['value', 'onChange', 'options', 'onSelect', 'className'])));
117
+ }, omit(props, ['value', 'defaultValue', 'onChange', 'options', 'onSelect', 'className'])));
108
118
  });
109
119
  export default ComplexValSelect;
package/lib/base-button/demo/index.less CHANGED
@@ -11,3 +11,9 @@
11
11
  margin-bottom: 15px;
12
12
  }
13
13
  }
14
+
15
+ .icon-box{
16
+ .spotecicon{
17
+ width: 16px;
18
+ }
19
+ }
package/lib/base-button/style/index.css CHANGED
@@ -1,6 +1,7 @@
1
1
  .base-btn {
2
2
  display: inline-flex;
3
- gap: 12px;
3
+ font-size: 14px;
4
+ gap: 8px;
4
5
  align-items: center;
5
6
  height: 32px;
6
7
  padding: 0 16px;
@@ -18,8 +19,10 @@
18
19
  padding: 0 8px;
19
20
  font-size: 12px;
20
21
  line-height: 20px;
22
+ gap: 4px;
21
23
  }
22
24
  .base-btn-large {
25
+ gap: 12px;
23
26
  height: 40px;
24
27
  padding: 0 24px;
25
28
  font-size: 16px;
@@ -32,15 +35,19 @@
32
35
  display: flex;
33
36
  justify-content: center;
34
37
  width: 100%;
38
+ height: 40px;
39
+ font-size: 16px;
40
+ line-height: 24px;
35
41
  }
36
42
  .base-btn-loading {
37
43
  opacity: 0.8;
38
44
  }
39
45
  .base-btn-default {
40
46
  --font-color: #121212;
41
- --border-color: #e6e6e6;
47
+ --border-color: #d9d9d9;
42
48
  --hover-bg-color: #f2f2f2;
43
49
  --active-bg-color: #e6e6e6;
50
+ --disabled-border-color: #d9d9d9;
44
51
  color: #121212;
45
52
  }
46
53
  .base-btn-default:hover {
@@ -53,6 +60,8 @@
53
60
  --theme-color: #dc4946;
54
61
  --hover-color: #e7807e;
55
62
  --active-color: #c6423f;
63
+ --hover-text-color: var(--hover-color);
64
+ --active-text-color: var(--active-color);
56
65
  color: #fff;
57
66
  background: var(--theme-color);
58
67
  }
@@ -68,6 +77,8 @@
68
77
  --theme-color: #47a92a;
69
78
  --hover-color: #7ec36a;
70
79
  --active-color: #409826;
80
+ --hover-text-color: var(--hover-color);
81
+ --active-text-color: var(--active-color);
71
82
  }
72
83
  .base-btn-success:hover {
73
84
  background-color: var(--hover-color);
@@ -79,6 +90,8 @@
79
90
  --theme-color: #121212;
80
91
  --hover-color: #595959;
81
92
  --active-color: #333;
93
+ --hover-text-color: var(--hover-color);
94
+ --active-text-color: var(--active-color);
82
95
  color: #fff;
83
96
  background: var(--theme-color);
84
97
  }
@@ -90,11 +103,13 @@
90
103
  }
91
104
  .base-btn-gray {
92
105
  --font-color: #121212;
93
- --border-color: #f2f2f2;
106
+ --border-color: #d9d9d9;
94
107
  --hover-color: #f7f7f7;
95
108
  --active-color: #e6e6e6;
96
109
  --hover-bg-color: #f7f7f7;
97
110
  --active-bg-color: #e6e6e6;
111
+ --hover-text-color: var(--font-color);
112
+ --active-text-color: var(--font-color);
98
113
  color: var(--font-color);
99
114
  background: #f2f2f2;
100
115
  border: none;
@@ -111,10 +126,12 @@
111
126
  border: 1px solid var(--theme-color, var(--border-color));
112
127
  }
113
128
  .base-btn-variant-outlined:hover {
129
+ color: var(--hover-text-color, var(--font-color));
114
130
  background-color: var(--hover-bg-color, #fff);
115
131
  border-color: var(--hover-color, var(--border-color));
116
132
  }
117
133
  .base-btn-variant-outlined:active {
134
+ color: var(--active-text-color, var(--font-color));
118
135
  background-color: var(--active-bg-color, #fff);
119
136
  border-color: var(--active-color, var(--border-color));
120
137
  }
@@ -124,29 +141,18 @@
124
141
  .base-btn-variant-outlined .base-btn-loading-icon .base-btn-loading-icon-mask {
125
142
  background-color: #fff;
126
143
  }
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
144
  .base-btn-variant-dashed {
141
145
  color: var(--theme-color, var(--font-color));
142
146
  background-color: #fff;
143
147
  border: 1px dashed var(--theme-color, var(--border-color));
144
148
  }
145
149
  .base-btn-variant-dashed:hover {
150
+ color: var(--hover-text-color, var(--font-color));
146
151
  background-color: var(--hover-bg-color, #fff);
147
152
  border-color: var(--hover-color, var(--border-color));
148
153
  }
149
154
  .base-btn-variant-dashed:active {
155
+ color: var(--active-text-color, var(--font-color));
150
156
  background-color: var(--active-bg-color, #fff);
151
157
  border-color: var(--active-color, var(--border-color));
152
158
  }
@@ -172,16 +178,18 @@
172
178
  background-color: #fff;
173
179
  }
174
180
  .base-btn-disabled {
175
- color: #bfbfbf;
176
- background-color: #e6e6e6;
177
- border-color: #e6e6e6;
181
+ color: #bfbfbf !important;
182
+ background-color: #f2f2f2 !important;
183
+ border-color: var(--disabled-border-color, #f2f2f2) !important;
178
184
  cursor: not-allowed;
179
185
  }
180
186
  .base-btn-disabled:hover {
181
- background-color: #e6e6e6;
187
+ color: #bfbfbf !important;
188
+ background-color: #f2f2f2 !important;
182
189
  }
183
190
  .base-btn-disabled:active {
184
- background-color: #e6e6e6;
191
+ color: #bfbfbf !important;
192
+ background-color: #f2f2f2 !important;
185
193
  }
186
194
  @keyframes loading {
187
195
  0% {
package/lib/base-button/style/index.less CHANGED
@@ -4,7 +4,8 @@
4
4
 
5
5
  .@{base-button-name} {
6
6
  display: inline-flex;
7
- gap: 12px;
7
+ font-size: @font-size-base;
8
+ gap: 8px;
8
9
  align-items: center;
9
10
  height: 32px;
10
11
  padding: 0 16px;
@@ -21,9 +22,11 @@
21
22
  padding: 0 8px;
22
23
  font-size: @font-size-sm;
23
24
  line-height: 20px;
25
+ gap: 4px;
24
26
  }
25
27
 
26
28
  &-large {
29
+ gap: 12px;
27
30
  height: 40px;
28
31
  padding: 0 24px;
29
32
  font-size: @font-size_16;
@@ -38,6 +41,9 @@
38
41
  display: flex;
39
42
  justify-content: center;
40
43
  width: 100%;
44
+ height: 40px;
45
+ font-size: @font-size_16;
46
+ line-height: 24px;
41
47
  }
42
48
 
43
49
  &-loading {
@@ -46,9 +52,10 @@
46
52
 
47
53
  &-default {
48
54
  --font-color: @color_121212;
49
- --border-color: @color_e6e6e6;
55
+ --border-color: @color_d9d9d9;
50
56
  --hover-bg-color: @color_f2f2f2;
51
57
  --active-bg-color: @color_e6e6e6;
58
+ --disabled-border-color: @color_d9d9d9;
52
59
  color: @color_121212;
53
60
  &:hover {
54
61
  background-color:@color_f2f2f2;
@@ -62,6 +69,8 @@
62
69
  --theme-color: @color_dc4946;
63
70
  --hover-color: @color_e7807e;
64
71
  --active-color: @color_c6423f;
72
+ --hover-text-color: var(--hover-color);
73
+ --active-text-color: var(--active-color);
65
74
  color: @white;
66
75
  background: var(--theme-color);
67
76
  &:hover {
@@ -78,6 +87,8 @@
78
87
  --theme-color: @color_47a92a;
79
88
  --hover-color: @color_7ec36a;
80
89
  --active-color: @color_409826;
90
+ --hover-text-color: var(--hover-color);
91
+ --active-text-color: var(--active-color);
81
92
  &:hover {
82
93
  background-color: var(--hover-color);
83
94
  }
@@ -90,6 +101,8 @@
90
101
  --theme-color: @color_121212;
91
102
  --hover-color: @color_595959;
92
103
  --active-color: @color_333;
104
+ --hover-text-color: var(--hover-color);
105
+ --active-text-color: var(--active-color);
93
106
  color: @white;
94
107
  background: var(--theme-color);
95
108
  &:hover {
@@ -102,11 +115,13 @@
102
115
 
103
116
  &-gray {
104
117
  --font-color: @color_121212;
105
- --border-color: @color_f2f2f2;
118
+ --border-color: @color_d9d9d9;
106
119
  --hover-color: @color_f7f7f7;
107
120
  --active-color: @color_e6e6e6;
108
121
  --hover-bg-color: @color_f7f7f7;
109
122
  --active-bg-color: @color_e6e6e6;
123
+ --hover-text-color: var(--font-color);
124
+ --active-text-color: var(--font-color);
110
125
  color: var(--font-color);
111
126
  background: @color_f2f2f2;
112
127
  border: none;
@@ -123,10 +138,12 @@
123
138
  background-color: @white;
124
139
  border: 1px solid var(--theme-color, var(--border-color));
125
140
  &:hover {
141
+ color: var(--hover-text-color, var(--font-color));
126
142
  background-color: var(--hover-bg-color, @white);
127
143
  border-color: var(--hover-color, var(--border-color));
128
144
  }
129
145
  &:active {
146
+ color: var(--active-text-color, var(--font-color));
130
147
  background-color: var(--active-bg-color, @white);
131
148
  border-color: var(--active-color, var(--border-color));
132
149
  }
@@ -136,20 +153,6 @@
136
153
  background-color: @white;
137
154
  }
138
155
  }
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
156
  }
154
157
 
155
158
  &-variant-dashed {
@@ -157,10 +160,12 @@
157
160
  background-color: @white;
158
161
  border: 1px dashed var(--theme-color, var(--border-color));
159
162
  &:hover {
163
+ color: var(--hover-text-color, var(--font-color));
160
164
  background-color: var(--hover-bg-color, @white);
161
165
  border-color: var(--hover-color, var(--border-color));
162
166
  }
163
167
  &:active {
168
+ color: var(--active-text-color, var(--font-color));
164
169
  background-color: var(--active-bg-color, @white);
165
170
  border-color: var(--active-color, var(--border-color));
166
171
  }
@@ -193,15 +198,17 @@
193
198
  }
194
199
 
195
200
  &-disabled {
196
- color: @color_bfbfbf;
197
- background-color: @color_e6e6e6;
198
- border-color: @color_e6e6e6;
201
+ color: @color_bfbfbf !important;
202
+ background-color: @color_f2f2f2 !important;
203
+ border-color: var(--disabled-border-color, @color_f2f2f2) !important;
199
204
  cursor: not-allowed;
200
205
  &:hover {
201
- background-color: @color_e6e6e6;
206
+ color: @color_bfbfbf !important;
207
+ background-color: @color_f2f2f2 !important;
202
208
  }
203
209
  &:active {
204
- background-color: @color_e6e6e6;
210
+ color: @color_bfbfbf !important;
211
+ background-color: @color_f2f2f2 !important;
205
212
  }
206
213
  }
207
214
 
package/lib/complex-val-select/index.d.ts CHANGED
@@ -12,7 +12,7 @@ export interface ComplexValSelectOptionType extends Omit<DefaultOptionType, 'val
12
12
  export declare const isReferenceTypeOption: (options?: ComplexValSelectOptionType[]) => boolean;
13
13
  export interface ComplexValSelectProps<T> extends Omit<SelectProps, 'value' | 'onChange' | 'options'> {
14
14
  value?: T;
15
- onChange?: (val: T, opt?: ComplexValSelectOptionType[]) => void;
15
+ onChange?: (val: T, opt?: ComplexValSelectOptionType | ComplexValSelectOptionType[]) => void;
16
16
  options?: ComplexValSelectOptionType[];
17
17
  }
18
18
  declare const ComplexValSelect: React.ForwardRefExoticComponent<ComplexValSelectProps<ComplexValSelectValueType> & React.RefAttributes<unknown>>;
package/lib/complex-val-select/index.js CHANGED
@@ -74,10 +74,10 @@ Object.defineProperty(exports, "__esModule", {
74
74
  exports.isReferenceTypeOption = exports.Option = void 0;
75
75
  var React = __importStar(require("react"));
76
76
  var omit_1 = __importDefault(require("lodash/omit"));
77
- var find_1 = __importDefault(require("lodash/find"));
78
77
  var some_1 = __importDefault(require("lodash/some"));
79
78
  var isArray_1 = __importDefault(require("lodash/isArray"));
80
79
  var isObject_1 = __importDefault(require("lodash/isObject"));
80
+ var isUndefined_1 = __importDefault(require("lodash/isUndefined"));
81
81
  var select_1 = __importDefault(require("antd/lib/select"));
82
82
  var classnames_1 = __importDefault(require("classnames"));
83
83
  var ArrowDownOutlined_1 = __importDefault(require("a-icons/lib/ArrowDownOutlined"));
@@ -92,7 +92,7 @@ var _formatOptions = function formatOptions(dateSource) {
92
92
  } : {};
93
93
  return __assign(__assign(__assign({}, item), {
94
94
  label: item.label,
95
- value: item.value ? JSON.stringify(item.value) : undefined
95
+ value: (0, isUndefined_1["default"])(item.value) ? undefined : JSON.stringify(item.value)
96
96
  }), otherProps);
97
97
  });
98
98
  return options;
@@ -128,25 +128,35 @@ var ComplexValSelect = React.forwardRef(function (props, ref) {
128
128
  // 判断是否需要将optionValue转为JSON字符串
129
129
  var isReferenceTypeVal = (0, exports.isReferenceTypeOption)(options);
130
130
  var finalOptions = isReferenceTypeVal ? _formatOptions(options) : options;
131
- var handleChange = function handleChange(val) {
132
- var nextVal = val && isReferenceTypeVal ? JSON.parse(val) : val;
133
- setValue(nextVal, options);
131
+ var handleChange = function handleChange(val, option) {
132
+ var nextVal = val;
133
+ if (val && isReferenceTypeVal) {
134
+ nextVal = (0, isArray_1["default"])(val) ? val.map(function (item) {
135
+ return JSON.parse(item);
136
+ }) : JSON.parse(val);
137
+ }
138
+ setValue(nextVal, option);
134
139
  };
135
- var handleSelect = function handleSelect(val) {
140
+ var handleSelect = function handleSelect(val, option) {
136
141
  var nextVal = val && isReferenceTypeVal ? JSON.parse(val) : val;
137
- var selectOption = (0, find_1["default"])(finalOptions, {
138
- value: val
139
- });
140
- onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextVal, selectOption);
142
+ onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextVal, option);
141
143
  };
144
+ var displayValue = React.useMemo(function () {
145
+ if (value && isReferenceTypeVal) {
146
+ return (0, isArray_1["default"])(value) ? value.map(function (v) {
147
+ return JSON.stringify(v);
148
+ }) : JSON.stringify(value);
149
+ }
150
+ return value;
151
+ }, [value, isReferenceTypeVal]);
142
152
  return React.createElement(select_1["default"], __assign({
143
153
  ref: selectRef,
144
154
  className: (0, classnames_1["default"])('complex-val-select', props === null || props === void 0 ? void 0 : props.className),
145
155
  suffixIcon: React.createElement(ArrowDownOutlined_1["default"], null),
146
- value: value && isReferenceTypeVal ? JSON.stringify(value) : value,
156
+ value: displayValue,
147
157
  options: finalOptions,
148
158
  onChange: handleChange,
149
159
  onSelect: handleSelect
150
- }, (0, omit_1["default"])(props, ['value', 'onChange', 'options', 'onSelect', 'className'])));
160
+ }, (0, omit_1["default"])(props, ['value', 'defaultValue', 'onChange', 'options', 'onSelect', 'className'])));
151
161
  });
152
162
  exports["default"] = ComplexValSelect;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "assui",
3
- "version": "3.2.104",
3
+ "version": "3.2.106",
4
4
  "description": "react ui library",
5
5
  "author": "jason <usochen@gmail.com>",
6
6
  "main": "./lib/index.js",
@@ -87,5 +87,5 @@
87
87
  "node": ">=10.0.0"
88
88
  },
89
89
  "license": "MIT",
90
- "gitHead": "7b20a8b82d138441be884c67db67205bf516e380"
90
+ "gitHead": "a733655570b6114592c403f0a0e9df03f438e686"
91
91
  }