@kdcloudjs/kdesign 1.7.4 → 1.7.6

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 (50) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/kdesign-complete.less +268 -212
  3. package/dist/kdesign.css +34 -10
  4. package/dist/kdesign.css.map +1 -1
  5. package/dist/kdesign.js +64 -34
  6. package/dist/kdesign.js.map +1 -1
  7. package/dist/kdesign.min.css +3 -3
  8. package/dist/kdesign.min.js +3 -3
  9. package/dist/kdesign.min.js.map +1 -1
  10. package/es/color-picker/color-picker-panel.js +3 -6
  11. package/es/color-picker/interface.d.ts +10 -2
  12. package/es/color-picker/style/index.css +21 -0
  13. package/es/color-picker/style/index.less +260 -213
  14. package/es/config-provider/compDefaultProps.d.ts +5 -0
  15. package/es/config-provider/compDefaultProps.js +6 -1
  16. package/es/dropdown/dropdown.js +3 -1
  17. package/es/form/Field.js +1 -0
  18. package/es/input/ClearableLabeledInput.d.ts +1 -0
  19. package/es/input/ClearableLabeledInput.js +4 -3
  20. package/es/input/TextArea.d.ts +1 -0
  21. package/es/input/TextArea.js +3 -2
  22. package/es/input/input.d.ts +1 -0
  23. package/es/input/input.js +3 -2
  24. package/es/input/style/index.css +12 -9
  25. package/es/input/style/index.less +5 -1
  26. package/es/input/style/mixin.less +5 -2
  27. package/es/input/style/token.less +1 -0
  28. package/es/tree/tree.d.ts +1 -0
  29. package/es/tree/treeHooks.js +1 -1
  30. package/lib/color-picker/color-picker-panel.js +3 -6
  31. package/lib/color-picker/interface.d.ts +10 -2
  32. package/lib/color-picker/style/index.css +21 -0
  33. package/lib/color-picker/style/index.less +260 -213
  34. package/lib/config-provider/compDefaultProps.d.ts +5 -0
  35. package/lib/config-provider/compDefaultProps.js +6 -1
  36. package/lib/dropdown/dropdown.js +3 -1
  37. package/lib/form/Field.js +1 -0
  38. package/lib/input/ClearableLabeledInput.d.ts +1 -0
  39. package/lib/input/ClearableLabeledInput.js +4 -3
  40. package/lib/input/TextArea.d.ts +1 -0
  41. package/lib/input/TextArea.js +3 -2
  42. package/lib/input/input.d.ts +1 -0
  43. package/lib/input/input.js +3 -2
  44. package/lib/input/style/index.css +12 -9
  45. package/lib/input/style/index.less +5 -1
  46. package/lib/input/style/mixin.less +5 -2
  47. package/lib/input/style/token.less +1 -0
  48. package/lib/tree/tree.d.ts +1 -0
  49. package/lib/tree/treeHooks.js +1 -1
  50. package/package.json +3 -1
package/lib/color-picker/style/index.less CHANGED
@@ -5,253 +5,300 @@
5
5
  @color-picker-prefix-cls: ~'@{kd-prefix}-color-picker';
6
6
 
7
7
  .@{color-picker-prefix-cls}-container {
8
- position: relative;
9
-
10
- .@{color-picker-prefix-cls}-input {
11
- width: @color-picker-input-sizing-width;
12
- height: @color-picker-input-sizing-height;
13
- border-bottom: 1px solid rgba(217, 217, 217, 1);
14
- font-size: @color-picker-input-font-size;
15
- }
16
-
17
- .@{color-picker-prefix-cls}-icon-container {
18
- position: absolute;
19
- top: 3px;
20
- right: 6px;
21
- cursor: pointer;
22
-
23
- .@{color-picker-prefix-cls}-icon {
24
- width: @color-picker-input-suffix-sizing-width;
25
- height: @color-picker-input-suffix-sizing-height;
26
- border: 1px solid rgba(0, 0, 0, 0.05);
27
- border-radius: 2px;
28
- line-height: 18px;
29
- text-align: center;
30
- color: @bg;
31
-
32
- &-underline {
33
- margin-right: -6px;
34
- }
35
-
36
- &-up {
37
- .kdicon-arrow-down {
38
- transform: rotate(180deg);
39
- transition: transform @transition-duration-quickly ease-in-out;
40
- }
41
- }
8
+ position: relative;
9
+
10
+ .@{color-picker-prefix-cls}-input {
11
+ width: @color-picker-input-sizing-width;
12
+ height: @color-picker-input-sizing-height;
13
+ border-bottom: 1px solid rgba(217, 217, 217, 1);
14
+ font-size: @color-picker-input-font-size;
15
+ }
16
+
17
+ .@{color-picker-prefix-cls}-icon-container {
18
+ position: absolute;
19
+ top: 3px;
20
+ right: 6px;
21
+ cursor: pointer;
22
+
23
+ .@{color-picker-prefix-cls}-icon {
24
+ width: @color-picker-input-suffix-sizing-width;
25
+ height: @color-picker-input-suffix-sizing-height;
26
+ border: 1px solid rgba(0, 0, 0, 0.05);
27
+ border-radius: 2px;
28
+ line-height: 18px;
29
+ text-align: center;
30
+ color: @bg;
31
+
32
+ &-underline {
33
+ margin-right: -6px;
34
+ }
35
+
36
+ &-up {
37
+ .kdicon-arrow-down {
38
+ transform: rotate(180deg);
39
+ transition: transform @transition-duration-quickly ease-in-out;
40
+ }
41
+ }
42
42
 
43
- &-down {
44
- .kdicon-arrow-down {
45
- transform: rotate(0deg);
46
- transition: transform @transition-duration-quickly ease-in-out;
47
- }
48
- }
43
+ &-down {
44
+ .kdicon-arrow-down {
45
+ transform: rotate(0deg);
46
+ transition: transform @transition-duration-quickly ease-in-out;
49
47
  }
48
+ }
50
49
  }
50
+ }
51
51
 
52
52
  }
53
53
 
54
54
  .@{color-picker-prefix-cls}-pop {
55
55
 
56
- &.topLeft.hidden,
57
- &.bottomLeft.hidden,
58
- &.topRight.hidden,
59
- &.bottomRight.hidden {
60
- opacity: 0;
61
- visibility: hidden;
62
- transition: all calc(@transition-duration - 0.1s) @ease;
63
- }
56
+ &.topLeft.hidden,
57
+ &.bottomLeft.hidden,
58
+ &.topRight.hidden,
59
+ &.bottomRight.hidden {
60
+ opacity: 0;
61
+ visibility: hidden;
62
+ transition: all calc(@transition-duration - 0.1s) @ease;
63
+ }
64
+
65
+ .@{color-picker-prefix-cls}-panel {
66
+ box-sizing: border-box;
67
+ width: @color-picker-panel-sizing-width;
68
+ padding: 4px 12px 16px;
69
+ background: #FFFFFF;
70
+ box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
71
+ border-radius: 2px;
72
+ transform-origin: top left;
73
+ z-index: @color-picker-panel-z-index;
74
+
75
+ &-chrome {
76
+ width: 278px !important;
77
+ margin-top: 12px;
78
+ box-shadow: none !important;
79
+
80
+ &>div:last-child {
81
+ padding: 9px 0 4px !important;
82
+
83
+ .flexbox-fix:first-child {
84
+ display: flex;
85
+ flex-direction: row-reverse;
86
+
87
+ &>div:first-child {
88
+ &>div {
89
+ width: 28px !important;
90
+ height: 28px !important;
91
+ border-radius: 50% !important;
92
+ margin-top: -1px !important;
93
+ margin-left: 4px !important;
94
+ }
95
+ }
64
96
 
65
- .@{color-picker-prefix-cls}-panel {
66
- box-sizing: border-box;
67
- width: @color-picker-panel-sizing-width;
68
- padding: 4px 12px 16px;
69
- background: #FFFFFF;
70
- box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
71
- border-radius: 2px;
72
- transform-origin: top left;
73
- z-index: @color-picker-panel-z-index;
97
+ &>div:last-child {
74
98
 
75
- &-chrome {
76
- width: 278px !important;
77
- margin-top: 12px;
78
- box-shadow: none !important;
99
+ .hue-horizontal {
100
+ width: 240px !important;
101
+ height: 12px !important;
102
+ border-radius: 6px !important;
103
+ padding: unset !important;
104
+
105
+ &>div>div {
106
+ margin-top: 1px;
107
+ }
108
+ }
79
109
 
80
110
  &>div:last-child {
81
- padding: 9px 0 4px !important;
82
-
83
- .flexbox-fix:first-child {
84
- display: flex;
85
- flex-direction: row-reverse;
86
-
87
- &>div:first-child {
88
- &>div {
89
- width: 28px !important;
90
- height: 28px !important;
91
- border-radius: 50% !important;
92
- margin-top: -1px !important;
93
- margin-left: 4px !important;
94
- }
95
- }
96
-
97
- &>div:last-child {
98
-
99
- .hue-horizontal {
100
- width: 240px !important;
101
- height: 12px !important;
102
- border-radius: 6px !important;
103
- padding: unset !important;
104
-
105
- &>div>div {
106
- margin-top: 1px;
107
- }
108
- }
109
-
110
- &>div:last-child {
111
- &>div {
112
- width: 240px !important;
113
- height: 12px !important;
114
- margin: unset;
115
-
116
- &>div:first-child {
117
- border-radius: 6px !important;
118
- }
119
-
120
- &>div:nth-child(2) {
121
- border-radius: 6px !important;
122
- }
123
-
124
- &>div:last-child {
125
- margin: unset !important;
126
-
127
- &>div>div {
128
- margin-top: 1px;
129
- }
130
- }
131
- }
132
- }
133
- }
111
+ &>div {
112
+ width: 240px !important;
113
+ height: 12px !important;
114
+ margin: unset;
134
115
 
116
+ &>div:first-child {
117
+ border-radius: 6px !important;
135
118
  }
136
119
 
137
- .flexbox-fix:last-child {
138
- display: none !important;
120
+ &>div:nth-child(2) {
121
+ border-radius: 6px !important;
122
+ }
123
+
124
+ &>div:last-child {
125
+ margin: unset !important;
126
+
127
+ &>div>div {
128
+ margin-top: 1px;
129
+ }
139
130
  }
131
+ }
140
132
  }
133
+ }
141
134
 
142
135
  }
143
136
 
144
- &-switch {
145
- margin: 12px 0 0;
146
- font-size: 12px;
147
- color: #666666;
148
- letter-spacing: 0;
149
- line-height: 16px;
150
- font-weight: 400;
151
-
152
- span {
153
- vertical-align: middle;
154
- margin-right: 9px;
155
- }
137
+ .flexbox-fix:last-child {
138
+ display: none !important;
139
+ }
140
+ }
141
+
142
+ &-no-box {
143
+ &>div:first-child {
144
+ display: none;
156
145
  }
146
+ }
157
147
 
158
- &-input {
159
- display: inline-block;
160
- position: relative;
161
- margin-top: 12px;
162
- font-size: @color-picker-panel-select-font-size;
148
+ &-no-hue {
149
+ &>div:last-child {
150
+ .flexbox-fix:first-child {
151
+ &>div:last-child {
152
+ &>div:first-child {
153
+ display: none;
154
+ }
163
155
 
164
- &-no-recommend {
165
- margin-bottom: 8px;
156
+ &>div:last-child {
157
+ margin-top: 8px;
158
+ }
166
159
  }
160
+ }
161
+ }
162
+ }
167
163
 
168
- .@{kd-prefix}-select {
169
-
170
- &.bottomLeft,
171
- &.topLeft {
172
- position: absolute;
173
- width: 60px !important;
174
- background: #FFFFFF;
175
- right: 0;
176
- left: unset !important;
177
- box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.20);
178
- border-radius: 2px;
179
- }
164
+ &-no-opacity {
165
+ &>div:last-child {
166
+ .flexbox-fix:first-child {
167
+ &>div:last-child {
168
+ &>div:last-child {
169
+ display: none;
170
+ }
180
171
 
181
- .@{kd-prefix}-select-dropdown {
182
- .@{kd-prefix}-select-item-option {
183
- display: flex;
184
- justify-content: center;
185
- min-width: unset;
186
- }
187
- }
172
+ &>div:first-child {
173
+ margin-top: 8px;
174
+ }
188
175
  }
176
+ }
177
+ }
178
+ }
179
+ }
189
180
 
190
- .@{kd-prefix}-select-bordered {
191
- border-radius: 2px;
192
- width: @color-picker-panel-select-sizing-width;
193
- height: @color-picker-panel-select-sizing-height;
194
- min-height: 28px;
195
- margin-top: -2px;
181
+ .@{color-picker-prefix-cls}-panel-chrome-no-box.@{color-picker-prefix-cls}-panel-chrome-no-hue.@{color-picker-prefix-cls}-panel-chrome-no-opacity {
182
+ display: none;
183
+ }
196
184
 
197
- .@{kd-prefix}-select-placeholder {
198
- left: 8px;
199
- }
200
- }
185
+ .@{color-picker-prefix-cls}-panel-chrome-no-hue.@{color-picker-prefix-cls}-panel-chrome-no-opacity {
186
+ &>div:last-child {
187
+ display: none;
188
+ }
189
+ }
201
190
 
202
- .active-option {
203
- background-color: #E3EBFF;
204
- }
191
+ &-switch {
192
+ margin: 12px 0 0;
193
+ font-size: 12px;
194
+ color: #666666;
195
+ letter-spacing: 0;
196
+ line-height: 16px;
197
+ font-weight: 400;
198
+
199
+ span {
200
+ vertical-align: middle;
201
+ margin-right: 9px;
202
+ }
203
+ }
204
+
205
+ &-input {
206
+ display: inline-block;
207
+ position: relative;
208
+ margin-top: 12px;
209
+ font-size: @color-picker-panel-select-font-size;
210
+
211
+ &-no-recommend {
212
+ margin-bottom: 8px;
213
+ }
214
+
215
+ .@{kd-prefix}-select {
216
+
217
+ &.bottomLeft,
218
+ &.topLeft {
219
+ position: absolute;
220
+ width: 60px !important;
221
+ background: #FFFFFF;
222
+ right: 0;
223
+ left: unset !important;
224
+ box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.20);
225
+ border-radius: 2px;
205
226
  }
206
227
 
207
- &-transparent {
208
- width: 60px;
209
- height: 28px;
210
- margin-left: 8px;
211
- text-align: center;
212
- font-size: @color-picker-panel-alpha-font-size;
228
+ .@{kd-prefix}-select-dropdown {
229
+ .@{kd-prefix}-select-item-option {
230
+ display: flex;
231
+ justify-content: center;
232
+ min-width: unset;
233
+ }
213
234
  }
235
+ }
214
236
 
215
- &-colorDivContainer {
216
- display: grid;
217
- grid-template-columns: repeat(12, 1fr);
218
- grid-column-gap: 8px;
219
- grid-row-gap: 8px;
220
- margin-top: 12px;
221
-
222
- li {
223
- position: relative;
224
- box-sizing: border-box;
225
- width: @color-picker-panel-preset-sizing-width;
226
- height: @color-picker-panel-preset-sizing-height;
227
- border: 1px solid rgba(0, 0, 0, 0.05);
228
- border-radius: 2px;
229
- list-style: none;
230
- cursor: pointer;
231
-
232
- .square {
233
- display: none;
234
- position: absolute;
235
- box-sizing: inherit;
236
- top: -3px;
237
- left: -3px;
238
- width: calc(@color-picker-panel-preset-sizing-width + 4px);
239
- height: calc(@color-picker-panel-preset-sizing-height + 4px);
240
- border: 1px solid rgba(178, 178, 176, 1);
241
- border-radius: 4px;
242
-
243
- &-click {
244
- display: block;
245
- box-shadow: 0 0 0 1px #e5e5e5 !important;
246
- }
247
- }
237
+ .@{kd-prefix}-select-bordered {
238
+ border-radius: 2px;
239
+ width: @color-picker-panel-select-sizing-width;
240
+ height: @color-picker-panel-select-sizing-height;
241
+ min-height: 28px;
242
+ margin-top: -2px;
248
243
 
249
- &:hover {
250
- .square {
251
- display: block;
252
- }
253
- }
254
- }
244
+ .@{kd-prefix}-select-placeholder {
245
+ left: 8px;
255
246
  }
247
+ }
248
+
249
+ .active-option {
250
+ background-color: #E3EBFF;
251
+ }
252
+ }
253
+
254
+ &-transparent {
255
+ width: 60px;
256
+ height: 28px;
257
+ margin-left: 8px;
258
+ text-align: center;
259
+ font-size: @color-picker-panel-alpha-font-size;
260
+ }
261
+
262
+ &-colorDivContainer {
263
+ display: grid;
264
+ grid-template-columns: repeat(12, 1fr);
265
+ grid-column-gap: 8px;
266
+ grid-row-gap: 8px;
267
+ margin-top: 12px;
268
+
269
+ li {
270
+ position: relative;
271
+ box-sizing: border-box;
272
+ width: @color-picker-panel-preset-sizing-width;
273
+ height: @color-picker-panel-preset-sizing-height;
274
+ border: 1px solid rgba(0, 0, 0, 0.05);
275
+ border-radius: 2px;
276
+ list-style: none;
277
+ cursor: pointer;
278
+
279
+ .square {
280
+ display: none;
281
+ position: absolute;
282
+ box-sizing: inherit;
283
+ top: -3px;
284
+ left: -3px;
285
+ width: calc(@color-picker-panel-preset-sizing-width + 4px);
286
+ height: calc(@color-picker-panel-preset-sizing-height + 4px);
287
+ border: 1px solid rgba(178, 178, 176, 1);
288
+ border-radius: 4px;
289
+
290
+ &-click {
291
+ display: block;
292
+ box-shadow: 0 0 0 1px #e5e5e5 !important;
293
+ }
294
+ }
295
+
296
+ &:hover {
297
+ .square {
298
+ display: block;
299
+ }
300
+ }
301
+ }
256
302
  }
257
- }
303
+ }
304
+ }
package/lib/config-provider/compDefaultProps.d.ts CHANGED
@@ -71,6 +71,11 @@ declare const compDefaultProps: {
71
71
  placeholder: string;
72
72
  showColorTransfer: boolean;
73
73
  showPresetColor: boolean;
74
+ showColorPickerBox: {
75
+ showBox: boolean;
76
+ showHue: boolean;
77
+ showOpacity: boolean;
78
+ };
74
79
  };
75
80
  Checkbox: {
76
81
  defaultChecked: boolean;
package/lib/config-provider/compDefaultProps.js CHANGED
@@ -86,7 +86,12 @@ var compDefaultProps = {
86
86
  },
87
87
  placeholder: '#',
88
88
  showColorTransfer: true,
89
- showPresetColor: true
89
+ showPresetColor: true,
90
+ showColorPickerBox: {
91
+ showBox: false,
92
+ showHue: false,
93
+ showOpacity: false
94
+ }
90
95
  },
91
96
  Checkbox: {
92
97
  defaultChecked: false,
package/lib/dropdown/dropdown.js CHANGED
@@ -64,7 +64,9 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
64
64
  selectedKey = _React$useState4[0],
65
65
  setSelectedKey = _React$useState4[1];
66
66
  React.useEffect(function () {
67
- setSelectedKey(props.selectedKey);
67
+ if (typeof props.selectedKey !== 'undefined') {
68
+ setSelectedKey(props.selectedKey);
69
+ }
68
70
  }, [props.selectedKey]);
69
71
  var menuSelectable = ((_b = menu.props) === null || _b === void 0 ? void 0 : _b.selectable) === undefined ? selectable : (_c = menu.props) === null || _c === void 0 ? void 0 : _c.selectable;
70
72
  var handleItemClick = function handleItemClick(e) {
package/lib/form/Field.js CHANGED
@@ -301,6 +301,7 @@ var Field = function Field(props) {
301
301
  }, (0, _map.default)(childrenArray).call(childrenArray, function (child, index) {
302
302
  var keys = mergeProps((0, _extends3.default)((0, _extends3.default)({}, generateEventHandler(handleValueValidate, validateTrigger)), {
303
303
  key: index,
304
+ status: typeof validateMessage !== 'undefined' ? 'error' : undefined,
304
305
  id: customizeHtmlFor ? undefined : htmlFor
305
306
  }), child);
306
307
  return child ? /*#__PURE__*/_react.default.cloneElement(child, keys) : child;
package/lib/input/ClearableLabeledInput.d.ts CHANGED
@@ -22,6 +22,7 @@ interface ClearableInputProps {
22
22
  addonAfter?: React.ReactNode;
23
23
  numberMark?: React.ReactNode;
24
24
  inputCount?: React.ReactNode;
25
+ status?: 'error';
25
26
  }
26
27
  declare const ClearableInput: React.FC<ClearableInputProps>;
27
28
  export default ClearableInput;
package/lib/input/ClearableLabeledInput.js CHANGED
@@ -41,7 +41,8 @@ var ClearableInput = function ClearableInput(props) {
41
41
  focused = props.focused,
42
42
  numberMark = props.numberMark,
43
43
  inputCount = props.inputCount,
44
- count = props.count;
44
+ count = props.count,
45
+ status = props.status;
45
46
  var _useState = (0, _react.useState)(false),
46
47
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
47
48
  isMouseEnter = _useState2[0],
@@ -93,7 +94,7 @@ var ClearableInput = function ClearableInput(props) {
93
94
  className: "".concat(prefixCls, "-prefix"),
94
95
  onMouseDown: mouseDownHandle
95
96
  }, prefix) : null;
96
- var inputWrapperClasses = (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper"), true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-focused"), focused && !disabled), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-disabled"), disabled), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context = "".concat(prefixCls, "-wrapper-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-underline"), borderType === 'underline'), _classNames2), (0, _defineProperty2.default)({}, className, className && !addonBefore && !addonAfter));
97
+ var inputWrapperClasses = (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper"), true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-focused"), focused && !disabled), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context = "".concat(prefixCls, "-wrapper-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-error"), status === 'error'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-disabled"), disabled), _classNames2), (0, _defineProperty2.default)({}, className, className && !addonBefore && !addonAfter));
97
98
  return /*#__PURE__*/_react.default.createElement("span", {
98
99
  className: inputWrapperClasses,
99
100
  style: style,
@@ -108,7 +109,7 @@ var ClearableInput = function ClearableInput(props) {
108
109
  if (!addonBefore && !addonAfter && !count) {
109
110
  return originElement;
110
111
  }
111
- var addonClassName = (0, _classnames.default)("".concat(prefixCls, "-group-addon"), (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, "".concat(prefixCls, "-group-addon-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames4, "".concat(prefixCls, "-group-addon-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames4, "".concat(prefixCls, "-group-addon-disabled"), disabled), _classNames4));
112
+ var addonClassName = (0, _classnames.default)("".concat(prefixCls, "-group-addon"), (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, "".concat(prefixCls, "-group-addon-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames4, "".concat(prefixCls, "-group-addon-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames4, "".concat(prefixCls, "-error"), status === 'error'), (0, _defineProperty2.default)(_classNames4, "".concat(prefixCls, "-group-addon-disabled"), disabled), _classNames4));
112
113
  var addonBeforeNode = addonBefore ? /*#__PURE__*/_react.default.createElement("span", {
113
114
  className: addonClassName
114
115
  }, addonBefore) : null;
package/lib/input/TextArea.d.ts CHANGED
@@ -14,6 +14,7 @@ export interface textAreaProps extends React.TextareaHTMLAttributes<HTMLInputEle
14
14
  style?: Record<string, unknown>;
15
15
  size?: InputSiteType;
16
16
  autoSize?: AutoSizeType | boolean;
17
+ status?: 'error';
17
18
  }
18
19
  export interface AutoSizeType {
19
20
  minRows?: number;
package/lib/input/TextArea.js CHANGED
@@ -63,7 +63,8 @@ var InternalTextarea = function InternalTextarea(props, ref) {
63
63
  placeholder = textAreaProps.placeholder,
64
64
  style = textAreaProps.style,
65
65
  size = textAreaProps.size,
66
- others = __rest(textAreaProps, ["value", "allowClear", "borderType", "defaultValue", "count", "countPosition", "autoSize", "className", "prefixCls", "canResize", "maxLength", "disabled", "onBlur", "onFocus", "onChange", "placeholder", "style", "size"]);
66
+ status = textAreaProps.status,
67
+ others = __rest(textAreaProps, ["value", "allowClear", "borderType", "defaultValue", "count", "countPosition", "autoSize", "className", "prefixCls", "canResize", "maxLength", "disabled", "onBlur", "onFocus", "onChange", "placeholder", "style", "size", "status"]);
67
68
  var textAreaPrefixCls = getPrefixCls(prefixCls, 'input', customPrefixcls); // TextArea样式前缀
68
69
  (0, _devwarning.default)(_input.BorderTypes.indexOf(borderType) === -1, 'textarea', "cannot found textarea borderType '".concat(borderType, "'"));
69
70
  var _useMergedState = (0, _hooks.useMergedState)('', {
@@ -184,7 +185,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
184
185
  ref: textareaRef,
185
186
  disabled: disabled,
186
187
  style: (0, _extends2.default)({}, textareaStyles, hadCount || !!allowClear ? otherStyles : style),
187
- className: (0, _classnames.default)("".concat(prefixCls, "-textarea"), (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context = "".concat(prefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-no-resize"), canResize !== true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-allowClear-spacing"), !!allowClear), _classNames2), (0, _defineProperty2.default)({}, className, className && !allowClear && !hadCount)),
188
+ className: (0, _classnames.default)("".concat(prefixCls, "-textarea"), (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context = "".concat(prefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-no-resize"), canResize !== true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-allowClear-spacing"), !!allowClear), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-error"), status === 'error'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _classNames2), (0, _defineProperty2.default)({}, className, className && !allowClear && !hadCount)),
188
189
  onChange: handleChange,
189
190
  onFocus: !disabled ? handleFocus : undefined,
190
191
  onBlur: !disabled ? handleBlur : undefined,
package/lib/input/input.d.ts CHANGED
@@ -22,6 +22,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
22
22
  value?: any;
23
23
  readonly?: 'readonly';
24
24
  count?: boolean;
25
+ status?: 'error';
25
26
  }
26
27
  declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<unknown>>;
27
28
  export default Input;
package/lib/input/input.js CHANGED
@@ -64,7 +64,8 @@ var InternalInput = function InternalInput(props, ref) {
64
64
  className = inputProps.className,
65
65
  maxLength = inputProps.maxLength,
66
66
  count = inputProps.count,
67
- others = __rest(inputProps, ["type", "size", "disabled", "onPressEnter", "borderType", "prefixCls", "onFocus", "onBlur", "onChange", "placeholderTobeValue", "defaultValue", "value", "className", "maxLength", "count"]);
67
+ status = inputProps.status,
68
+ others = __rest(inputProps, ["type", "size", "disabled", "onPressEnter", "borderType", "prefixCls", "onFocus", "onBlur", "onChange", "placeholderTobeValue", "defaultValue", "value", "className", "maxLength", "count", "status"]);
68
69
  (0, _devwarning.default)(InputSiteTypes.indexOf(size) === -1, 'input', "cannot found input size '".concat(size, "'"));
69
70
  (0, _devwarning.default)(BorderTypes.indexOf(borderType) === -1, 'input', "cannot found input borderType '".concat(borderType, "'"));
70
71
  var _useMergedState = (0, _hooks.useMergedState)('', {
@@ -87,7 +88,7 @@ var InternalInput = function InternalInput(props, ref) {
87
88
  var inputPrefixCls = getPrefixCls(prefixCls, 'input', customPrefixcls); // 按钮样式前缀
88
89
  var addonBefore = others.addonBefore,
89
90
  addonAfter = others.addonAfter;
90
- var inputClasses = (0, _classnames.default)(inputPrefixCls, (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(inputPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-disabled"), disabled), _classNames), (0, _defineProperty2.default)({}, className, className && !(0, _ClearableLabeledInput.hasPrefixSuffix)(inputProps) && !addonBefore && !addonAfter));
91
+ var inputClasses = (0, _classnames.default)(inputPrefixCls, (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(inputPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-error"), status === 'error'), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-disabled"), disabled), _classNames), (0, _defineProperty2.default)({}, className, className && !(0, _ClearableLabeledInput.hasPrefixSuffix)(inputProps) && !addonBefore && !addonAfter));
91
92
  var handleFocus = function handleFocus(event) {
92
93
  setFocused(true);
93
94
  onFocus && onFocus(event);