@kdcloudjs/kdesign 1.7.17 → 1.7.19
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/CHANGELOG.md +33 -0
- package/dist/kdesign-complete.less +54 -21
- package/dist/kdesign.css +23 -15
- package/dist/kdesign.css.map +1 -1
- package/dist/kdesign.js +329 -248
- package/dist/kdesign.js.map +1 -1
- package/dist/kdesign.min.css +3 -3
- package/dist/kdesign.min.js +6 -6
- package/dist/kdesign.min.js.map +1 -1
- package/es/carousel/style/index.css +4 -0
- package/es/carousel/style/index.less +31 -5
- package/es/cascader/cascader.js +63 -62
- package/es/cascader/style/index.css +16 -6
- package/es/cascader/style/index.less +20 -6
- package/es/collapse/collapse.d.ts +1 -1
- package/es/dropdown/dropdown.d.ts +1 -0
- package/es/dropdown/dropdown.js +22 -7
- package/es/input/ClearableLabeledInput.js +9 -1
- package/es/select/option.js +6 -2
- package/es/select/select.js +32 -14
- package/es/select/style/index.css +2 -8
- package/es/select/style/index.less +3 -10
- package/es/upload/upload.js +87 -63
- package/lib/carousel/style/index.css +4 -0
- package/lib/carousel/style/index.less +31 -5
- package/lib/cascader/cascader.js +62 -61
- package/lib/cascader/style/index.css +16 -6
- package/lib/cascader/style/index.less +20 -6
- package/lib/collapse/collapse.d.ts +1 -1
- package/lib/dropdown/dropdown.d.ts +1 -0
- package/lib/dropdown/dropdown.js +22 -7
- package/lib/input/ClearableLabeledInput.js +8 -0
- package/lib/select/option.js +6 -2
- package/lib/select/select.js +32 -14
- package/lib/select/style/index.css +2 -8
- package/lib/select/style/index.less +3 -10
- package/lib/upload/upload.js +86 -62
- package/package.json +1 -1
|
@@ -167,9 +167,11 @@
|
|
|
167
167
|
}
|
|
168
168
|
.kd-carousel-list-fade .kd-carousel-list-item-not-hidden {
|
|
169
169
|
opacity: 1;
|
|
170
|
+
z-index: 1;
|
|
170
171
|
}
|
|
171
172
|
.kd-carousel-list-fade .kd-carousel-list-item-hidden {
|
|
172
173
|
opacity: 0;
|
|
174
|
+
z-index: 0;
|
|
173
175
|
}
|
|
174
176
|
.kd-carousel-list-display {
|
|
175
177
|
width: 100%;
|
|
@@ -187,6 +189,7 @@
|
|
|
187
189
|
position: absolute;
|
|
188
190
|
list-style: none;
|
|
189
191
|
padding: 0;
|
|
192
|
+
z-index: 1;
|
|
190
193
|
}
|
|
191
194
|
.kd-carousel-slidebar-left {
|
|
192
195
|
display: -webkit-box;
|
|
@@ -299,6 +302,7 @@
|
|
|
299
302
|
right: 16px;
|
|
300
303
|
-webkit-transform: translateY(-50%);
|
|
301
304
|
transform: translateY(-50%);
|
|
305
|
+
z-index: 1;
|
|
302
306
|
}
|
|
303
307
|
.kd-carousel-jump-left {
|
|
304
308
|
left: 16px;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
@import '../../style/themes/index';
|
|
2
2
|
@import './mixin.less';
|
|
3
3
|
@carousel-prefix-cls: ~'@{kd-prefix}-carousel';
|
|
4
|
+
|
|
4
5
|
.@{carousel-prefix-cls} {
|
|
5
6
|
&-root {
|
|
6
7
|
position: relative;
|
|
@@ -27,18 +28,23 @@
|
|
|
27
28
|
|
|
28
29
|
&-slide {
|
|
29
30
|
width: 100%;
|
|
31
|
+
|
|
30
32
|
.@{carousel-prefix-cls}-list-item {
|
|
31
33
|
opacity: 1;
|
|
32
34
|
border-radius: @carousel-boder-radius;
|
|
35
|
+
|
|
33
36
|
&-animation {
|
|
34
37
|
transition: opacity 0.3s ease;
|
|
35
38
|
}
|
|
39
|
+
|
|
36
40
|
&-none-animation {
|
|
37
41
|
transition: none;
|
|
38
42
|
}
|
|
43
|
+
|
|
39
44
|
&-not-hidden {
|
|
40
45
|
opacity: 1;
|
|
41
46
|
}
|
|
47
|
+
|
|
42
48
|
&-hidden {
|
|
43
49
|
opacity: 0;
|
|
44
50
|
}
|
|
@@ -47,30 +53,40 @@
|
|
|
47
53
|
|
|
48
54
|
&-fade {
|
|
49
55
|
flex: 1;
|
|
56
|
+
|
|
50
57
|
.@{carousel-prefix-cls}-list-item {
|
|
51
58
|
opacity: 1;
|
|
59
|
+
|
|
52
60
|
&-animation {
|
|
53
61
|
transition: opacity 0.3s ease;
|
|
54
62
|
}
|
|
63
|
+
|
|
55
64
|
&-none-animation {
|
|
56
65
|
transition: none;
|
|
57
66
|
}
|
|
67
|
+
|
|
58
68
|
&-not-hidden {
|
|
59
69
|
opacity: 1;
|
|
70
|
+
z-index: 1;
|
|
60
71
|
}
|
|
72
|
+
|
|
61
73
|
&-hidden {
|
|
62
74
|
opacity: 0;
|
|
75
|
+
z-index: 0;
|
|
63
76
|
}
|
|
64
77
|
}
|
|
65
78
|
}
|
|
66
79
|
|
|
67
80
|
&-display {
|
|
68
81
|
width: 100%;
|
|
82
|
+
|
|
69
83
|
.@{carousel-prefix-cls}-list-item {
|
|
70
84
|
display: block;
|
|
85
|
+
|
|
71
86
|
&-not-hidden {
|
|
72
87
|
display: block;
|
|
73
88
|
}
|
|
89
|
+
|
|
74
90
|
&-hidden {
|
|
75
91
|
display: none;
|
|
76
92
|
}
|
|
@@ -82,25 +98,29 @@
|
|
|
82
98
|
position: absolute;
|
|
83
99
|
list-style: none;
|
|
84
100
|
padding: 0;
|
|
101
|
+
z-index: 1;
|
|
85
102
|
|
|
86
103
|
&-left {
|
|
87
104
|
.vertical;
|
|
88
105
|
left: @carousel-dots-margin-left;
|
|
89
106
|
}
|
|
107
|
+
|
|
90
108
|
&-right {
|
|
91
109
|
.vertical;
|
|
92
110
|
right: @carousel-dots-margin-right;
|
|
93
111
|
}
|
|
112
|
+
|
|
94
113
|
&-bottom {
|
|
95
114
|
.horizontal;
|
|
96
115
|
bottom: @carousel-dots-margin-bottom;
|
|
97
116
|
}
|
|
117
|
+
|
|
98
118
|
&-top {
|
|
99
119
|
.horizontal;
|
|
100
120
|
top: @carousel-dots-margin-top;
|
|
101
121
|
}
|
|
102
122
|
|
|
103
|
-
&-dot
|
|
123
|
+
&-dot>button {
|
|
104
124
|
display: block;
|
|
105
125
|
border-radius: @carousel-dots-boder-radius;
|
|
106
126
|
box-sizing: border-box;
|
|
@@ -123,9 +143,11 @@
|
|
|
123
143
|
width: 100%;
|
|
124
144
|
cursor: pointer;
|
|
125
145
|
outline: none;
|
|
146
|
+
|
|
126
147
|
&-active {
|
|
127
148
|
opacity: 1;
|
|
128
|
-
|
|
149
|
+
|
|
150
|
+
&>button {
|
|
129
151
|
background-color: @carousel-dots-color-background-active;
|
|
130
152
|
opacity: 1;
|
|
131
153
|
}
|
|
@@ -139,6 +161,7 @@
|
|
|
139
161
|
left: unset;
|
|
140
162
|
right: 16px;
|
|
141
163
|
transform: translateY(-50%);
|
|
164
|
+
z-index: 1;
|
|
142
165
|
|
|
143
166
|
&-left {
|
|
144
167
|
left: 16px;
|
|
@@ -149,7 +172,7 @@
|
|
|
149
172
|
cursor: pointer;
|
|
150
173
|
}
|
|
151
174
|
|
|
152
|
-
|
|
175
|
+
>*:first-child {
|
|
153
176
|
display: flex;
|
|
154
177
|
align-items: center;
|
|
155
178
|
justify-content: center;
|
|
@@ -173,12 +196,14 @@
|
|
|
173
196
|
}
|
|
174
197
|
}
|
|
175
198
|
}
|
|
199
|
+
|
|
176
200
|
.vertical {
|
|
177
201
|
display: flex;
|
|
178
202
|
flex-direction: column;
|
|
179
203
|
top: 50%;
|
|
180
204
|
transform: translateY(-50%);
|
|
181
|
-
|
|
205
|
+
|
|
206
|
+
&>li {
|
|
182
207
|
margin: @carousel-dots-marigin 0;
|
|
183
208
|
width: @carousel-dots-height;
|
|
184
209
|
height: @carousel-dots-width;
|
|
@@ -190,7 +215,8 @@
|
|
|
190
215
|
flex-direction: row;
|
|
191
216
|
left: 50%;
|
|
192
217
|
transform: translateX(-50%);
|
|
193
|
-
|
|
218
|
+
|
|
219
|
+
&>li {
|
|
194
220
|
margin: 0 @carousel-dots-marigin;
|
|
195
221
|
height: @carousel-dots-height;
|
|
196
222
|
width: @carousel-dots-width;
|
package/es/cascader/cascader.js
CHANGED
|
@@ -16,7 +16,7 @@ var __rest = this && this.__rest || function (s, e) {
|
|
|
16
16
|
}
|
|
17
17
|
return t;
|
|
18
18
|
};
|
|
19
|
-
import React, { useMemo, useCallback } from 'react';
|
|
19
|
+
import React, { useMemo, useCallback, useState, useRef } from 'react';
|
|
20
20
|
import classNames from 'classnames';
|
|
21
21
|
import { tuple } from '../_utils/type';
|
|
22
22
|
import { getCompProps } from '../_utils';
|
|
@@ -59,38 +59,41 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
59
59
|
onPopupVisibleChange = allProps.onPopupVisibleChange,
|
|
60
60
|
onPopperVisibleChange = allProps.onPopperVisibleChange,
|
|
61
61
|
customPrefixcls = allProps.prefixCls,
|
|
62
|
+
customAllowClear = allProps.allowClear,
|
|
63
|
+
popupPlacement = allProps.popupPlacement,
|
|
64
|
+
maxTagCount = allProps.maxTagCount,
|
|
62
65
|
otherProps = __rest(allProps
|
|
63
66
|
// className前缀
|
|
64
|
-
, ["mode", "style", "options", "bordered", "disabled", "children", "loadData", "clearIcon", "className", "fieldNames", "placeholder", "defaultValue", "maxTagPlaceholder", "displayRender", "expandTrigger", "changeOnSelect", "dropdownRender", "notFoundContent", "getPopupContainer", "defaultPopupVisible", "onPopupVisibleChange", "onPopperVisibleChange", "prefixCls"]);
|
|
67
|
+
, ["mode", "style", "options", "bordered", "disabled", "children", "loadData", "clearIcon", "className", "fieldNames", "placeholder", "defaultValue", "maxTagPlaceholder", "displayRender", "expandTrigger", "changeOnSelect", "dropdownRender", "notFoundContent", "getPopupContainer", "defaultPopupVisible", "onPopupVisibleChange", "onPopperVisibleChange", "prefixCls", "allowClear", "popupPlacement", "maxTagCount"]);
|
|
65
68
|
// className前缀
|
|
66
69
|
var prefixCls = getPrefixCls(pkgPrefixCls, 'cascader', customPrefixcls);
|
|
67
|
-
var pickerRef =
|
|
68
|
-
var triggerRef =
|
|
69
|
-
var wrapperRef =
|
|
70
|
+
var pickerRef = useRef();
|
|
71
|
+
var triggerRef = useRef();
|
|
72
|
+
var wrapperRef = useRef();
|
|
70
73
|
var mergeRef = ref || pickerRef;
|
|
71
|
-
var
|
|
72
|
-
|
|
73
|
-
visible =
|
|
74
|
-
setVisible =
|
|
74
|
+
var _useState = useState(!!props.popperVisible || !!props.popupVisible || defaultPopupVisible),
|
|
75
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
76
|
+
visible = _useState2[0],
|
|
77
|
+
setVisible = _useState2[1];
|
|
75
78
|
React.useEffect(function () {
|
|
76
79
|
setVisible(!!props.popperVisible || !!props.popupVisible);
|
|
77
80
|
}, [props.popperVisible, props.popupVisible]);
|
|
78
|
-
var
|
|
79
|
-
|
|
80
|
-
menus =
|
|
81
|
-
setMenus =
|
|
82
|
-
var
|
|
83
|
-
|
|
84
|
-
currentOptions =
|
|
85
|
-
setCurrentOptions =
|
|
86
|
-
var
|
|
87
|
-
|
|
88
|
-
selectedOptions =
|
|
89
|
-
setSelectedOptions =
|
|
90
|
-
var
|
|
91
|
-
|
|
92
|
-
value =
|
|
93
|
-
setValue =
|
|
81
|
+
var _useState3 = useState([options]),
|
|
82
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
83
|
+
menus = _useState4[0],
|
|
84
|
+
setMenus = _useState4[1];
|
|
85
|
+
var _useState5 = useState([]),
|
|
86
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
87
|
+
currentOptions = _useState6[0],
|
|
88
|
+
setCurrentOptions = _useState6[1];
|
|
89
|
+
var _useState7 = useState([]),
|
|
90
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
91
|
+
selectedOptions = _useState8[0],
|
|
92
|
+
setSelectedOptions = _useState8[1];
|
|
93
|
+
var _useState9 = useState(props.value || defaultValue || []),
|
|
94
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
95
|
+
value = _useState10[0],
|
|
96
|
+
setValue = _useState10[1];
|
|
94
97
|
React.useEffect(function () {
|
|
95
98
|
props.value && setValue(props.value);
|
|
96
99
|
}, [props.value]);
|
|
@@ -192,37 +195,10 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
192
195
|
});
|
|
193
196
|
});
|
|
194
197
|
}, [currentOptions, isMultiple]);
|
|
195
|
-
var allowClear =
|
|
196
|
-
var locatorProps = {
|
|
197
|
-
style: style,
|
|
198
|
-
tabIndex: 0,
|
|
199
|
-
className: classNames("".concat(prefixCls, "-picker"), className, {
|
|
200
|
-
expand: visible,
|
|
201
|
-
allowClear: allowClear,
|
|
202
|
-
disabled: disabled
|
|
203
|
-
})
|
|
204
|
-
};
|
|
198
|
+
var allowClear = customAllowClear && value.length > 0;
|
|
205
199
|
var handleClear = function handleClear() {
|
|
206
200
|
onChange([]);
|
|
207
201
|
};
|
|
208
|
-
var inputProps = {
|
|
209
|
-
value: value,
|
|
210
|
-
placeholder: placeholder,
|
|
211
|
-
readOnly: true,
|
|
212
|
-
disabled: disabled,
|
|
213
|
-
className: classNames("".concat(prefixCls, "-picker-input"), {
|
|
214
|
-
expand: visible
|
|
215
|
-
}),
|
|
216
|
-
suffix: props.suffixIcon || /*#__PURE__*/React.createElement(Icon, {
|
|
217
|
-
type: "arrow-down",
|
|
218
|
-
className: classNames({
|
|
219
|
-
expand: visible
|
|
220
|
-
})
|
|
221
|
-
})
|
|
222
|
-
};
|
|
223
|
-
if (bordered) {
|
|
224
|
-
inputProps.borderType = 'bordered';
|
|
225
|
-
}
|
|
226
202
|
var renderSuffix = function renderSuffix() {
|
|
227
203
|
var _classNames;
|
|
228
204
|
var suffixIcon = allProps.suffixIcon;
|
|
@@ -260,8 +236,6 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
260
236
|
};
|
|
261
237
|
var renderMultiple = function renderMultiple() {
|
|
262
238
|
var _classNames3, _classNames4;
|
|
263
|
-
var maxTagCount = allProps.maxTagCount,
|
|
264
|
-
maxTagPlaceholder = allProps.maxTagPlaceholder;
|
|
265
239
|
var multipleCls = classNames((_classNames3 = {
|
|
266
240
|
disabled: disabled
|
|
267
241
|
}, _defineProperty(_classNames3, "".concat(prefixCls, "-multiple"), true), _defineProperty(_classNames3, "".concat(prefixCls, "-bordered"), bordered), _classNames3));
|
|
@@ -300,19 +274,44 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
300
274
|
}, renderSuffix())));
|
|
301
275
|
};
|
|
302
276
|
var renderSingle = function renderSingle() {
|
|
303
|
-
|
|
277
|
+
var inputProps = {
|
|
278
|
+
value: value,
|
|
279
|
+
placeholder: placeholder,
|
|
280
|
+
readOnly: true,
|
|
281
|
+
borderType: bordered ? 'bordered' : 'underline',
|
|
282
|
+
disabled: disabled,
|
|
283
|
+
className: classNames("".concat(prefixCls, "-picker-input"), {
|
|
284
|
+
expand: visible
|
|
285
|
+
}),
|
|
286
|
+
suffix: props.suffixIcon || /*#__PURE__*/React.createElement(Icon, {
|
|
287
|
+
type: "arrow-down",
|
|
288
|
+
className: classNames({
|
|
289
|
+
expand: visible
|
|
290
|
+
})
|
|
291
|
+
})
|
|
292
|
+
};
|
|
293
|
+
var singleProps = {
|
|
294
|
+
style: style,
|
|
295
|
+
tabIndex: 0,
|
|
296
|
+
className: classNames("".concat(prefixCls, "-picker"), className, _defineProperty({
|
|
297
|
+
expand: visible,
|
|
298
|
+
allowClear: allowClear,
|
|
299
|
+
disabled: disabled
|
|
300
|
+
}, "".concat(prefixCls, "-bordered"), bordered))
|
|
301
|
+
};
|
|
302
|
+
return /*#__PURE__*/React.createElement("div", _extends({}, singleProps, {
|
|
304
303
|
ref: mergeRef
|
|
305
304
|
}, otherProps), React.Children.count(children) === 1 && children.type ? /*#__PURE__*/React.cloneElement(children, {
|
|
306
305
|
ref: triggerRef
|
|
307
|
-
}) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("
|
|
306
|
+
}) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
308
307
|
ref: triggerRef
|
|
309
308
|
}, /*#__PURE__*/React.createElement(Input, _extends({}, inputProps)), /*#__PURE__*/React.createElement("span", {
|
|
310
309
|
className: "".concat(prefixCls, "-picker-label")
|
|
311
|
-
}, (labels === null || labels === void 0 ? void 0 : labels.length) ? displayRender(labels, currentOptions) : '')
|
|
310
|
+
}, (labels === null || labels === void 0 ? void 0 : labels.length) ? displayRender(labels, currentOptions) : ''), allowClear && /*#__PURE__*/React.createElement(Icon, {
|
|
312
311
|
type: "close-solid",
|
|
313
312
|
className: "".concat(prefixCls, "-picker-close"),
|
|
314
313
|
onClick: handleClear
|
|
315
|
-
})));
|
|
314
|
+
}))));
|
|
316
315
|
};
|
|
317
316
|
var cascaderLocator = isMultiple ? renderMultiple() : renderSingle();
|
|
318
317
|
var onExpend = function onExpend(index, opt, opts) {
|
|
@@ -358,8 +357,10 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
358
357
|
var value = _ref5[fieldNames.value];
|
|
359
358
|
return value;
|
|
360
359
|
});
|
|
361
|
-
|
|
362
|
-
|
|
360
|
+
if (typeof props.value === 'undefined') {
|
|
361
|
+
setCurrentOptions(selectedOptions);
|
|
362
|
+
setValue(selectedValue);
|
|
363
|
+
}
|
|
363
364
|
props.onChange && props.onChange(selectedValue, selectedOptions);
|
|
364
365
|
};
|
|
365
366
|
var onVisibleChange = function onVisibleChange(visible) {
|
|
@@ -424,7 +425,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
424
425
|
trigger: 'click',
|
|
425
426
|
getPopupContainer: getPopupContainer,
|
|
426
427
|
prefixCls: "".concat(prefixCls, "-menus"),
|
|
427
|
-
placement: allProps.popperPlacement ||
|
|
428
|
+
placement: allProps.popperPlacement || popupPlacement,
|
|
428
429
|
popperClassName: allProps.popperClassName || allProps.popupClassName,
|
|
429
430
|
getTriggerElement: function getTriggerElement() {
|
|
430
431
|
return triggerRef.current;
|
|
@@ -108,9 +108,9 @@
|
|
|
108
108
|
/** 浮层箭头样式 **/
|
|
109
109
|
.kd-cascader-picker {
|
|
110
110
|
position: relative;
|
|
111
|
-
display: inline-block;
|
|
112
111
|
outline: none;
|
|
113
112
|
cursor: pointer;
|
|
113
|
+
background: var(--kd-c-cascader-color-background, var(--kd-g-color-white, #fff));
|
|
114
114
|
}
|
|
115
115
|
.kd-cascader-picker:focus > .kd-cascader-picker-input {
|
|
116
116
|
border-color: var(--kd-c-cascader-color-active, #999);
|
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
left: 0;
|
|
140
140
|
width: 100%;
|
|
141
141
|
height: 20px;
|
|
142
|
-
padding: 0 24px 0
|
|
142
|
+
padding: 0 24px 0 0;
|
|
143
143
|
line-height: 20px;
|
|
144
144
|
-webkit-transform: translateY(-50%);
|
|
145
145
|
transform: translateY(-50%);
|
|
@@ -169,7 +169,7 @@
|
|
|
169
169
|
-webkit-transition: all 0.2s;
|
|
170
170
|
transition: all 0.2s;
|
|
171
171
|
}
|
|
172
|
-
.kd-cascader-picker.allowClear:hover
|
|
172
|
+
.kd-cascader-picker.allowClear:hover .kd-cascader-picker-close {
|
|
173
173
|
opacity: 1;
|
|
174
174
|
visibility: visible;
|
|
175
175
|
-webkit-transition: all 0.2s;
|
|
@@ -186,7 +186,7 @@
|
|
|
186
186
|
.kd-cascader-picker-close {
|
|
187
187
|
position: absolute;
|
|
188
188
|
top: 50%;
|
|
189
|
-
right:
|
|
189
|
+
right: 0;
|
|
190
190
|
opacity: 0;
|
|
191
191
|
cursor: pointer;
|
|
192
192
|
visibility: hidden;
|
|
@@ -278,11 +278,20 @@
|
|
|
278
278
|
.kd-cascader-menus .kd-empty {
|
|
279
279
|
padding: 10px 0 20px;
|
|
280
280
|
}
|
|
281
|
-
.kd-cascader-bordered {
|
|
281
|
+
.kd-cascader-bordered:not(.kd-cascader-multiple) .kd-cascader-picker-label {
|
|
282
|
+
padding-left: 9px;
|
|
283
|
+
}
|
|
284
|
+
.kd-cascader-bordered:not(.kd-cascader-multiple) .kd-cascader-picker-close {
|
|
285
|
+
right: 10px;
|
|
286
|
+
}
|
|
287
|
+
.kd-cascader-bordered.kd-cascader-multiple {
|
|
282
288
|
border: 1px solid #d9d9d9;
|
|
283
|
-
padding-left: 8px
|
|
289
|
+
padding-left: 8px;
|
|
284
290
|
border-radius: 2px;
|
|
285
291
|
}
|
|
292
|
+
.kd-cascader-bordered.kd-cascader-multiple .kd-cascader-suffix {
|
|
293
|
+
right: 9px;
|
|
294
|
+
}
|
|
286
295
|
.kd-cascader-multiple {
|
|
287
296
|
padding: 1px 28px 1px 0;
|
|
288
297
|
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
@@ -301,6 +310,7 @@
|
|
|
301
310
|
overflow-x: hidden;
|
|
302
311
|
position: relative;
|
|
303
312
|
border-bottom: 1px solid #d9d9d9;
|
|
313
|
+
background: var(--kd-c-cascader-color-background, var(--kd-g-color-white, #fff));
|
|
304
314
|
}
|
|
305
315
|
.kd-cascader-multiple-wrapper {
|
|
306
316
|
display: -webkit-box;
|
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
|
|
9
9
|
.@{cascader-picker-prefix-cls} {
|
|
10
10
|
position: relative;
|
|
11
|
-
display: inline-block;
|
|
12
11
|
outline: none;
|
|
13
12
|
cursor: pointer;
|
|
13
|
+
background: @cascader-bg-color;
|
|
14
14
|
|
|
15
15
|
&:focus > &-input {
|
|
16
16
|
border-color: @cascader-active-color;
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
left: 0;
|
|
48
48
|
width: 100%;
|
|
49
49
|
height: 20px;
|
|
50
|
-
padding: 0 24px 0
|
|
50
|
+
padding: 0 24px 0 0;
|
|
51
51
|
line-height: 20px;
|
|
52
52
|
transform: translateY(-50%);
|
|
53
53
|
.ellipsis;
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
&.allowClear:hover {
|
|
81
|
-
|
|
81
|
+
.@{cascader-picker-prefix-cls}-close {
|
|
82
82
|
opacity: 1;
|
|
83
83
|
visibility: visible;
|
|
84
84
|
transition: all 0.2s;
|
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
&-close {
|
|
96
96
|
position: absolute;
|
|
97
97
|
top: 50%;
|
|
98
|
-
right:
|
|
98
|
+
right: 0;
|
|
99
99
|
opacity: 0;
|
|
100
100
|
cursor: pointer;
|
|
101
101
|
visibility: hidden;
|
|
@@ -183,10 +183,23 @@
|
|
|
183
183
|
}
|
|
184
184
|
|
|
185
185
|
.@{kd-prefix}-cascader {
|
|
186
|
-
&-bordered {
|
|
186
|
+
&-bordered:not(.@{kd-prefix}-cascader-multiple) {
|
|
187
|
+
.@{cascader-picker-prefix-cls}-label {
|
|
188
|
+
padding-left: 9px;
|
|
189
|
+
}
|
|
190
|
+
.@{cascader-picker-prefix-cls}-close {
|
|
191
|
+
right: 10px;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
&-bordered&-multiple {
|
|
187
196
|
border: 1px solid #d9d9d9;
|
|
188
|
-
padding-left: 8px
|
|
197
|
+
padding-left: 8px;
|
|
189
198
|
border-radius: 2px;
|
|
199
|
+
|
|
200
|
+
.@{kd-prefix}-cascader-suffix {
|
|
201
|
+
right: 9px;
|
|
202
|
+
}
|
|
190
203
|
}
|
|
191
204
|
|
|
192
205
|
&-multiple {
|
|
@@ -203,6 +216,7 @@
|
|
|
203
216
|
overflow-x: hidden;
|
|
204
217
|
position: relative;
|
|
205
218
|
border-bottom: 1px solid #d9d9d9;
|
|
219
|
+
background: @cascader-bg-color;
|
|
206
220
|
}
|
|
207
221
|
|
|
208
222
|
&-multiple-wrapper {
|
|
@@ -11,7 +11,7 @@ export interface CollapseProps {
|
|
|
11
11
|
defaultActiveKey?: string[] | string | number[] | number;
|
|
12
12
|
expandIcon?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
|
|
13
13
|
expandIconPosition?: IconPositionType;
|
|
14
|
-
onChange?: () => void;
|
|
14
|
+
onChange?: (v: any) => void;
|
|
15
15
|
style?: React.CSSProperties;
|
|
16
16
|
className?: string;
|
|
17
17
|
children?: React.ReactNode;
|
|
@@ -19,6 +19,7 @@ export interface DropDownProps extends PopperProps {
|
|
|
19
19
|
children?: React.ReactNode;
|
|
20
20
|
onItemClick?: (key: string) => void;
|
|
21
21
|
menu: React.ReactElement | Array<MenuItem>;
|
|
22
|
+
menuAnimation?: boolean;
|
|
22
23
|
}
|
|
23
24
|
interface DropdownType extends React.ForwardRefExoticComponent<DropDownProps & React.RefAttributes<HTMLElement>> {
|
|
24
25
|
Menu: typeof Menu;
|
package/es/dropdown/dropdown.js
CHANGED
|
@@ -30,9 +30,12 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
30
30
|
onItemClick = allProps.onItemClick,
|
|
31
31
|
defaultVisible = allProps.defaultVisible,
|
|
32
32
|
onVisibleChange = allProps.onVisibleChange,
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
trigger = allProps.trigger,
|
|
34
|
+
customPrefixcls = allProps.prefixCls,
|
|
35
|
+
menuAnimation = allProps.menuAnimation,
|
|
36
|
+
popperStyle = allProps.popperStyle;
|
|
35
37
|
var prefixCls = getPrefixCls(pkgPrefixCls, 'dropdown', customPrefixcls);
|
|
38
|
+
var innerAnimation = typeof menuAnimation === 'boolean' ? menuAnimation : trigger !== 'contextMenu';
|
|
36
39
|
var _React$useState = React.useState(!!props.visible || defaultVisible),
|
|
37
40
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
38
41
|
visible = _React$useState2[0],
|
|
@@ -40,10 +43,23 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
40
43
|
React.useEffect(function () {
|
|
41
44
|
setVisible(!!props.visible);
|
|
42
45
|
}, [props.visible]);
|
|
46
|
+
var handleVisibleChange = function handleVisibleChange(visible) {
|
|
47
|
+
props.visible === undefined && setVisible(visible);
|
|
48
|
+
onVisibleChange && onVisibleChange(visible);
|
|
49
|
+
};
|
|
43
50
|
var child = children && ((_a = children === null || children === void 0 ? void 0 : children.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'Input' ? /*#__PURE__*/React.createElement("span", {
|
|
44
51
|
className: classNames("".concat(prefixCls, "-trigger"), "".concat(prefixCls, "-trigger-container")),
|
|
45
52
|
ref: ref
|
|
46
|
-
},
|
|
53
|
+
}, trigger === 'focus' ? /*#__PURE__*/React.cloneElement(React.Children.only(children), {
|
|
54
|
+
onFocus: function onFocus(e) {
|
|
55
|
+
children.props.onFocus && children.props.onFocus(e);
|
|
56
|
+
handleVisibleChange(true);
|
|
57
|
+
},
|
|
58
|
+
onBlur: function onBlur(e) {
|
|
59
|
+
children.props.onBlur && children.props.onBlur(e);
|
|
60
|
+
handleVisibleChange(false);
|
|
61
|
+
}
|
|
62
|
+
}) : children) : /*#__PURE__*/React.cloneElement(React.Children.only(children), {
|
|
47
63
|
ref: children.ref || ref,
|
|
48
64
|
className: classNames("".concat(prefixCls, "-trigger"), children.props.className, {
|
|
49
65
|
disabled: disabled
|
|
@@ -110,13 +126,12 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
110
126
|
role: "menuitem"
|
|
111
127
|
}, href === undefined || disabled ? /*#__PURE__*/React.createElement("span", null, label) : /*#__PURE__*/React.createElement("a", _extends({}, alinkProps), /*#__PURE__*/React.createElement("span", null, label)));
|
|
112
128
|
}));
|
|
113
|
-
var handleVisibleChange = function handleVisibleChange(visible) {
|
|
114
|
-
props.visible === undefined && setVisible(visible);
|
|
115
|
-
onVisibleChange && onVisibleChange(visible);
|
|
116
|
-
};
|
|
117
129
|
var popperProps = _extends(_extends({}, allProps), {
|
|
118
130
|
visible: visible,
|
|
119
131
|
prefixCls: prefixCls,
|
|
132
|
+
popperStyle: innerAnimation ? popperStyle : _extends({
|
|
133
|
+
animation: 'none'
|
|
134
|
+
}, popperStyle),
|
|
120
135
|
onVisibleChange: handleVisibleChange
|
|
121
136
|
});
|
|
122
137
|
return usePopper(child, menuElement, popperProps);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
|
|
2
2
|
import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
|
|
3
3
|
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
|
4
|
-
import React, { useState } from 'react';
|
|
4
|
+
import React, { useRef, useState } from 'react';
|
|
5
5
|
import { Icon } from '../index';
|
|
6
6
|
import classNames from 'classnames';
|
|
7
7
|
import { tuple } from '../_utils/type';
|
|
@@ -30,6 +30,7 @@ var ClearableInput = function ClearableInput(props) {
|
|
|
30
30
|
inputCount = props.inputCount,
|
|
31
31
|
count = props.count,
|
|
32
32
|
status = props.status;
|
|
33
|
+
var fixRef = useRef(null);
|
|
33
34
|
var _useState = useState(false),
|
|
34
35
|
_useState2 = _slicedToArray(_useState, 2),
|
|
35
36
|
isMouseEnter = _useState2[0],
|
|
@@ -44,6 +45,11 @@ var ClearableInput = function ClearableInput(props) {
|
|
|
44
45
|
e.stopPropagation();
|
|
45
46
|
e.preventDefault();
|
|
46
47
|
};
|
|
48
|
+
var clickHandle = function clickHandle(e) {
|
|
49
|
+
var _a, _b;
|
|
50
|
+
e.stopPropagation();
|
|
51
|
+
(_b = (_a = fixRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.focus();
|
|
52
|
+
};
|
|
47
53
|
var renderClearIcon = function renderClearIcon() {
|
|
48
54
|
var _classNames;
|
|
49
55
|
if (!allowClear) {
|
|
@@ -85,7 +91,9 @@ var ClearableInput = function ClearableInput(props) {
|
|
|
85
91
|
var inputWrapperClasses = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper"), true), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-focused"), focused && !disabled), _defineProperty(_classNames2, _concatInstanceProperty(_context = "".concat(prefixCls, "-wrapper-size-")).call(_context, size), size), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-borderless"), borderType === 'none'), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-underline"), borderType === 'underline'), _defineProperty(_classNames2, "".concat(prefixCls, "-error"), status === 'error'), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-disabled"), disabled), _classNames2), _defineProperty({}, className, className && !addonBefore && !addonAfter));
|
|
86
92
|
return /*#__PURE__*/React.createElement("span", {
|
|
87
93
|
className: inputWrapperClasses,
|
|
94
|
+
ref: fixRef,
|
|
88
95
|
style: style,
|
|
96
|
+
onClick: clickHandle,
|
|
89
97
|
onMouseEnter: mouseEnterHandle,
|
|
90
98
|
onMouseLeave: mouseLeaveHandle
|
|
91
99
|
}, prefixNode, /*#__PURE__*/React.cloneElement(originElement, {
|
package/es/select/option.js
CHANGED
|
@@ -48,9 +48,12 @@ var InternalOption = function InternalOption(props, ref) {
|
|
|
48
48
|
}
|
|
49
49
|
onChangeSelect && onChangeSelect(value, children, isSelected);
|
|
50
50
|
};
|
|
51
|
-
var
|
|
51
|
+
var handleOnMouseEnter = function handleOnMouseEnter() {
|
|
52
52
|
onChangeActiveIndex && onChangeActiveIndex(index);
|
|
53
53
|
};
|
|
54
|
+
var handleOnMouseLeave = function handleOnMouseLeave() {
|
|
55
|
+
onChangeActiveIndex && onChangeActiveIndex(-1);
|
|
56
|
+
};
|
|
54
57
|
var titleText = title || (_typeof(children) !== 'object' ? children : null);
|
|
55
58
|
var checkStyle = {
|
|
56
59
|
minHeight: '22px',
|
|
@@ -61,7 +64,8 @@ var InternalOption = function InternalOption(props, ref) {
|
|
|
61
64
|
className: optionCls,
|
|
62
65
|
title: titleText,
|
|
63
66
|
onClick: handleClick,
|
|
64
|
-
|
|
67
|
+
onMouseEnter: handleOnMouseEnter,
|
|
68
|
+
onMouseLeave: handleOnMouseLeave
|
|
65
69
|
}, /*#__PURE__*/React.createElement("div", {
|
|
66
70
|
className: contentCls
|
|
67
71
|
}, isMultiple ? /*#__PURE__*/React.createElement(Checkbox, {
|