@kdcloudjs/kdesign 1.2.1 → 1.2.2
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 +16 -0
- package/dist/kdesign-complete.less +68 -3
- package/dist/kdesign.css +73 -9
- package/dist/kdesign.css.map +1 -1
- package/dist/kdesign.js +45 -31
- package/dist/kdesign.js.map +1 -1
- package/dist/kdesign.min.css +3 -3
- package/dist/kdesign.min.js +3 -3
- package/dist/kdesign.min.js.map +1 -1
- package/es/carousel/displayList.js +8 -4
- package/es/carousel/fadeList.js +9 -5
- package/es/carousel/slideList.js +6 -3
- package/es/carousel/style/index.css +65 -0
- package/es/carousel/style/index.less +66 -1
- package/es/collapse/panel.js +1 -1
- package/es/radio/style/index.css +7 -8
- package/es/radio/style/index.less +2 -2
- package/es/tabs/tabs.js +5 -1
- package/lib/carousel/displayList.js +9 -4
- package/lib/carousel/fadeList.js +10 -5
- package/lib/carousel/slideList.js +6 -3
- package/lib/carousel/style/index.css +65 -0
- package/lib/carousel/style/index.less +66 -1
- package/lib/collapse/panel.js +1 -1
- package/lib/radio/style/index.css +7 -8
- package/lib/radio/style/index.less +2 -2
- package/lib/tabs/tabs.js +6 -1
- package/package.json +1 -1
|
@@ -1,18 +1,22 @@
|
|
|
1
1
|
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
|
2
|
+
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
|
2
3
|
import React from 'react';
|
|
3
4
|
import classNames from 'classnames';
|
|
4
5
|
export var DisplayList = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
6
|
+
var _context;
|
|
7
|
+
|
|
5
8
|
var items = props.items,
|
|
6
9
|
parentPrefixCls = props.parentPrefixCls,
|
|
7
10
|
currentIndex = props.currentIndex;
|
|
8
11
|
var itemRef = React.useRef(null);
|
|
9
|
-
var displayListPrefixCls = "".concat(parentPrefixCls, "-
|
|
12
|
+
var displayListPrefixCls = "".concat(parentPrefixCls, "-list-display");
|
|
13
|
+
var listPrefixCls = "".concat(parentPrefixCls, "-list");
|
|
10
14
|
|
|
11
15
|
var renderItems = function renderItems() {
|
|
12
16
|
return _mapInstanceProperty(items).call(items, function (item, index) {
|
|
13
|
-
var opacityClassName = index === currentIndex ? "".concat(
|
|
17
|
+
var opacityClassName = index === currentIndex ? "".concat(listPrefixCls, "-item-not-hidden") : "".concat(listPrefixCls, "-item-hidden");
|
|
14
18
|
return /*#__PURE__*/React.createElement("li", {
|
|
15
|
-
className: classNames("".concat(
|
|
19
|
+
className: classNames("".concat(listPrefixCls, "-item"), opacityClassName),
|
|
16
20
|
key: index,
|
|
17
21
|
ref: itemRef
|
|
18
22
|
}, item);
|
|
@@ -20,7 +24,7 @@ export var DisplayList = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
20
24
|
};
|
|
21
25
|
|
|
22
26
|
return /*#__PURE__*/React.createElement("ul", {
|
|
23
|
-
className: displayListPrefixCls,
|
|
27
|
+
className: _concatInstanceProperty(_context = "".concat(listPrefixCls, " ")).call(_context, displayListPrefixCls),
|
|
24
28
|
ref: ref
|
|
25
29
|
}, renderItems());
|
|
26
30
|
});
|
package/es/carousel/fadeList.js
CHANGED
|
@@ -1,22 +1,26 @@
|
|
|
1
1
|
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
|
2
|
+
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
|
2
3
|
import React from 'react';
|
|
3
4
|
import classNames from 'classnames';
|
|
4
5
|
export var FadeList = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
6
|
+
var _context;
|
|
7
|
+
|
|
5
8
|
var items = props.items,
|
|
6
9
|
parentPrefixCls = props.parentPrefixCls,
|
|
7
10
|
needAnimation = props.needAnimation,
|
|
8
11
|
currentIndex = props.currentIndex,
|
|
9
12
|
itemWidth = props.itemWidth;
|
|
10
13
|
var itemRef = React.useRef(null);
|
|
11
|
-
var fadeListPrefixCls = "".concat(parentPrefixCls, "-
|
|
14
|
+
var fadeListPrefixCls = "".concat(parentPrefixCls, "-list-fade");
|
|
15
|
+
var listPrefixCls = "".concat(parentPrefixCls, "-list");
|
|
12
16
|
|
|
13
17
|
var renderItems = function renderItems() {
|
|
14
18
|
return _mapInstanceProperty(items).call(items, function (item, index) {
|
|
15
|
-
var opacityClassName = index === currentIndex ? "".concat(
|
|
16
|
-
var animationClassName = needAnimation ? "".concat(
|
|
19
|
+
var opacityClassName = index === currentIndex ? "".concat(listPrefixCls, "-item-not-hidden") : "".concat(listPrefixCls, "-item-hidden");
|
|
20
|
+
var animationClassName = needAnimation ? "".concat(listPrefixCls, "-item-animation") : "".concat(listPrefixCls, "-item-none-animation");
|
|
17
21
|
var posx = -1 * index * itemWidth;
|
|
18
22
|
return /*#__PURE__*/React.createElement("li", {
|
|
19
|
-
className: classNames("".concat(
|
|
23
|
+
className: classNames("".concat(listPrefixCls, "-item"), opacityClassName, animationClassName),
|
|
20
24
|
key: index,
|
|
21
25
|
ref: itemRef,
|
|
22
26
|
style: {
|
|
@@ -27,7 +31,7 @@ export var FadeList = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
27
31
|
};
|
|
28
32
|
|
|
29
33
|
return /*#__PURE__*/React.createElement("ul", {
|
|
30
|
-
className: fadeListPrefixCls,
|
|
34
|
+
className: _concatInstanceProperty(_context = "".concat(listPrefixCls, " ")).call(_context, fadeListPrefixCls),
|
|
31
35
|
ref: ref
|
|
32
36
|
}, renderItems());
|
|
33
37
|
});
|
package/es/carousel/slideList.js
CHANGED
|
@@ -3,9 +3,12 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instan
|
|
|
3
3
|
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
|
4
4
|
import React from 'react';
|
|
5
5
|
export var SlideList = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
6
|
+
var _context2;
|
|
7
|
+
|
|
6
8
|
var items = props.items,
|
|
7
9
|
parentPrefixCls = props.parentPrefixCls;
|
|
8
|
-
var slideListPrefixCls = "".concat(parentPrefixCls, "-
|
|
10
|
+
var slideListPrefixCls = "".concat(parentPrefixCls, "-list-slide");
|
|
11
|
+
var listPrefixCls = "".concat(parentPrefixCls, "-list");
|
|
9
12
|
|
|
10
13
|
var renderItems = function renderItems() {
|
|
11
14
|
var _context;
|
|
@@ -15,14 +18,14 @@ export var SlideList = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
15
18
|
|
|
16
19
|
return _mapInstanceProperty(_items).call(_items, function (item, index) {
|
|
17
20
|
return /*#__PURE__*/React.createElement("li", {
|
|
18
|
-
className: "".concat(
|
|
21
|
+
className: "".concat(listPrefixCls, "-item"),
|
|
19
22
|
key: index
|
|
20
23
|
}, item);
|
|
21
24
|
});
|
|
22
25
|
};
|
|
23
26
|
|
|
24
27
|
return /*#__PURE__*/React.createElement("ul", {
|
|
25
|
-
className: slideListPrefixCls,
|
|
28
|
+
className: _concatInstanceProperty(_context2 = "".concat(listPrefixCls, " ")).call(_context2, slideListPrefixCls),
|
|
26
29
|
ref: ref
|
|
27
30
|
}, renderItems());
|
|
28
31
|
});
|
|
@@ -190,6 +190,71 @@
|
|
|
190
190
|
.kd-carousel-displaylist-item-hidden {
|
|
191
191
|
display: none;
|
|
192
192
|
}
|
|
193
|
+
.kd-carousel-list {
|
|
194
|
+
list-style: none;
|
|
195
|
+
display: -webkit-box;
|
|
196
|
+
display: -ms-flexbox;
|
|
197
|
+
display: flex;
|
|
198
|
+
-webkit-box-orient: horizontal;
|
|
199
|
+
-webkit-box-direction: normal;
|
|
200
|
+
-ms-flex-direction: row;
|
|
201
|
+
flex-direction: row;
|
|
202
|
+
-webkit-box-flex: 1;
|
|
203
|
+
-ms-flex: 1;
|
|
204
|
+
flex: 1;
|
|
205
|
+
position: relative;
|
|
206
|
+
}
|
|
207
|
+
.kd-carousel-list-item {
|
|
208
|
+
position: relative;
|
|
209
|
+
-ms-flex-negative: 0;
|
|
210
|
+
flex-shrink: 0;
|
|
211
|
+
height: 100%;
|
|
212
|
+
width: 100%;
|
|
213
|
+
}
|
|
214
|
+
.kd-carousel-list-slide .kd-carousel-list-item {
|
|
215
|
+
opacity: 1;
|
|
216
|
+
border-radius: var(--kd-c-carousel-border-radius, 0px);
|
|
217
|
+
}
|
|
218
|
+
.kd-carousel-list-slide .kd-carousel-list-item-animation {
|
|
219
|
+
-webkit-transition: opacity 0.3s ease;
|
|
220
|
+
transition: opacity 0.3s ease;
|
|
221
|
+
}
|
|
222
|
+
.kd-carousel-list-slide .kd-carousel-list-item-none-animation {
|
|
223
|
+
-webkit-transition: none;
|
|
224
|
+
transition: none;
|
|
225
|
+
}
|
|
226
|
+
.kd-carousel-list-slide .kd-carousel-list-item-not-hidden {
|
|
227
|
+
opacity: 1;
|
|
228
|
+
}
|
|
229
|
+
.kd-carousel-list-slide .kd-carousel-list-item-hidden {
|
|
230
|
+
opacity: 0;
|
|
231
|
+
}
|
|
232
|
+
.kd-carousel-list-fade .kd-carousel-list-item {
|
|
233
|
+
opacity: 1;
|
|
234
|
+
}
|
|
235
|
+
.kd-carousel-list-fade .kd-carousel-list-item-animation {
|
|
236
|
+
-webkit-transition: opacity 0.3s ease;
|
|
237
|
+
transition: opacity 0.3s ease;
|
|
238
|
+
}
|
|
239
|
+
.kd-carousel-list-fade .kd-carousel-list-item-none-animation {
|
|
240
|
+
-webkit-transition: none;
|
|
241
|
+
transition: none;
|
|
242
|
+
}
|
|
243
|
+
.kd-carousel-list-fade .kd-carousel-list-item-not-hidden {
|
|
244
|
+
opacity: 1;
|
|
245
|
+
}
|
|
246
|
+
.kd-carousel-list-fade .kd-carousel-list-item-hidden {
|
|
247
|
+
opacity: 0;
|
|
248
|
+
}
|
|
249
|
+
.kd-carousel-list-display .kd-carousel-list-item {
|
|
250
|
+
display: block;
|
|
251
|
+
}
|
|
252
|
+
.kd-carousel-list-display .kd-carousel-list-item-not-hidden {
|
|
253
|
+
display: block;
|
|
254
|
+
}
|
|
255
|
+
.kd-carousel-list-display .kd-carousel-list-item-hidden {
|
|
256
|
+
display: none;
|
|
257
|
+
}
|
|
193
258
|
.kd-carousel-slidebar {
|
|
194
259
|
position: absolute;
|
|
195
260
|
}
|
|
@@ -69,6 +69,71 @@
|
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
|
+
|
|
73
|
+
&-list {
|
|
74
|
+
list-style: none;
|
|
75
|
+
display: flex;
|
|
76
|
+
flex-direction: row;
|
|
77
|
+
flex: 1;
|
|
78
|
+
position: relative;
|
|
79
|
+
|
|
80
|
+
&-item {
|
|
81
|
+
position: relative;
|
|
82
|
+
flex-shrink: 0;
|
|
83
|
+
height: 100%;
|
|
84
|
+
width: 100%;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&-slide {
|
|
88
|
+
.@{carousel-prefix-cls}-list-item {
|
|
89
|
+
opacity: 1;
|
|
90
|
+
border-radius: @carousel-boder-radius;
|
|
91
|
+
&-animation {
|
|
92
|
+
transition: opacity 0.3s ease;
|
|
93
|
+
}
|
|
94
|
+
&-none-animation {
|
|
95
|
+
transition: none;
|
|
96
|
+
}
|
|
97
|
+
&-not-hidden {
|
|
98
|
+
opacity: 1;
|
|
99
|
+
}
|
|
100
|
+
&-hidden {
|
|
101
|
+
opacity: 0;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
&-fade {
|
|
107
|
+
.@{carousel-prefix-cls}-list-item {
|
|
108
|
+
opacity: 1;
|
|
109
|
+
&-animation {
|
|
110
|
+
transition: opacity 0.3s ease;
|
|
111
|
+
}
|
|
112
|
+
&-none-animation {
|
|
113
|
+
transition: none;
|
|
114
|
+
}
|
|
115
|
+
&-not-hidden {
|
|
116
|
+
opacity: 1;
|
|
117
|
+
}
|
|
118
|
+
&-hidden {
|
|
119
|
+
opacity: 0;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
&-display {
|
|
125
|
+
.@{carousel-prefix-cls}-list-item {
|
|
126
|
+
display: block;
|
|
127
|
+
&-not-hidden {
|
|
128
|
+
display: block;
|
|
129
|
+
}
|
|
130
|
+
&-hidden {
|
|
131
|
+
display: none;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
72
137
|
&-slidebar {
|
|
73
138
|
position: absolute;
|
|
74
139
|
&-left {
|
|
@@ -87,7 +152,7 @@
|
|
|
87
152
|
.horizontal;
|
|
88
153
|
top: @carousel-dots-margin-top;
|
|
89
154
|
}
|
|
90
|
-
|
|
155
|
+
|
|
91
156
|
&-dot > button {
|
|
92
157
|
display: block;
|
|
93
158
|
border-radius: @carousel-dots-boder-radius;
|
package/es/collapse/panel.js
CHANGED
|
@@ -96,7 +96,7 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
96
96
|
className: className
|
|
97
97
|
}, assist && /*#__PURE__*/React.createElement("span", {
|
|
98
98
|
className: "".concat(panelPrefixCls, "-assist")
|
|
99
|
-
}, renderReactNode(assist))
|
|
99
|
+
}, renderReactNode(assist)));
|
|
100
100
|
};
|
|
101
101
|
|
|
102
102
|
var renderReactNode = function renderReactNode(reactNode) {
|
package/es/radio/style/index.css
CHANGED
|
@@ -113,13 +113,12 @@
|
|
|
113
113
|
list-style: none;
|
|
114
114
|
-webkit-font-feature-settings: 'tnum';
|
|
115
115
|
font-feature-settings: 'tnum';
|
|
116
|
-
overflow: hidden;
|
|
117
|
-
text-overflow: ellipsis;
|
|
118
116
|
position: relative;
|
|
119
117
|
display: inline-block;
|
|
120
118
|
padding-left: var(--kd-c-radio-square-sizing-width-height, 14px);
|
|
121
119
|
margin-right: var(--kd-c-radio-spacing-margin-right, 8px);
|
|
122
120
|
white-space: nowrap;
|
|
121
|
+
text-overflow: ellipsis;
|
|
123
122
|
cursor: pointer;
|
|
124
123
|
vertical-align: middle;
|
|
125
124
|
color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
|
|
@@ -179,8 +178,8 @@
|
|
|
179
178
|
border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
|
|
180
179
|
}
|
|
181
180
|
.kd-radio-checked:focus-within::before {
|
|
182
|
-
-webkit-box-shadow: 0 0 0 3px rgba(
|
|
183
|
-
box-shadow: 0 0 0 3px rgba(
|
|
181
|
+
-webkit-box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
|
|
182
|
+
box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
|
|
184
183
|
}
|
|
185
184
|
.kd-radio-checked::after {
|
|
186
185
|
position: absolute;
|
|
@@ -293,8 +292,8 @@
|
|
|
293
292
|
border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
|
|
294
293
|
}
|
|
295
294
|
.kd-radio-square-checked:focus-within {
|
|
296
|
-
-webkit-box-shadow: 0 0 0 3px rgba(
|
|
297
|
-
box-shadow: 0 0 0 3px rgba(
|
|
295
|
+
-webkit-box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
|
|
296
|
+
box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
|
|
298
297
|
}
|
|
299
298
|
.kd-radio-square-checked::after {
|
|
300
299
|
position: absolute;
|
|
@@ -402,8 +401,8 @@
|
|
|
402
401
|
background-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
|
|
403
402
|
}
|
|
404
403
|
.kd-radio-button-checked:focus-within {
|
|
405
|
-
-webkit-box-shadow: 0 0 0 3px rgba(
|
|
406
|
-
box-shadow: 0 0 0 3px rgba(
|
|
404
|
+
-webkit-box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
|
|
405
|
+
box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
|
|
407
406
|
}
|
|
408
407
|
.kd-radio-button-checked:hover {
|
|
409
408
|
color: var(--kd-c-radio-color-background, var(--kd-g-color-white, #fff));
|
|
@@ -5,12 +5,11 @@
|
|
|
5
5
|
@radio-square-prefix-cls: ~'@{radio-prefix-cls}-square';
|
|
6
6
|
@radio-button-prefix-cls: ~'@{radio-prefix-cls}-button';
|
|
7
7
|
@radio-group-prefix-cls: ~'@{radio-prefix-cls}-group';
|
|
8
|
-
@radio-focus-shadow: 0 0 0 3px rgba(
|
|
8
|
+
@radio-focus-shadow: 0 0 0 3px rgba(85, 130, 243, 10%);
|
|
9
9
|
|
|
10
10
|
// 默认类型(单选项)
|
|
11
11
|
.@{radio-prefix-cls} {
|
|
12
12
|
.reset-component();
|
|
13
|
-
.ellipsis();
|
|
14
13
|
|
|
15
14
|
// 默认状态
|
|
16
15
|
position: relative;
|
|
@@ -18,6 +17,7 @@
|
|
|
18
17
|
padding-left: @radio-circle-size;
|
|
19
18
|
margin-right: @radio-margin-right;
|
|
20
19
|
white-space: nowrap;
|
|
20
|
+
text-overflow: ellipsis;
|
|
21
21
|
cursor: pointer;
|
|
22
22
|
vertical-align: middle;
|
|
23
23
|
color: @radio-font-color;
|
package/es/tabs/tabs.js
CHANGED
|
@@ -132,7 +132,7 @@ var Tabs = function Tabs(props) {
|
|
|
132
132
|
});
|
|
133
133
|
|
|
134
134
|
if (index !== -1) {
|
|
135
|
-
(_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.jumpTo(index);
|
|
135
|
+
(_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.jumpTo(index, true);
|
|
136
136
|
}
|
|
137
137
|
}, [curActiveKey, carouselRef, carouselData]);
|
|
138
138
|
useEffect(function () {
|
|
@@ -418,6 +418,10 @@ var Tabs = function Tabs(props) {
|
|
|
418
418
|
carouselData.push(item);
|
|
419
419
|
});
|
|
420
420
|
|
|
421
|
+
if (effect !== 'none') {
|
|
422
|
+
console.log('effect', effect);
|
|
423
|
+
}
|
|
424
|
+
|
|
421
425
|
return /*#__PURE__*/React.createElement(Carousel, {
|
|
422
426
|
ref: carouselRef,
|
|
423
427
|
dots: false,
|
|
@@ -9,24 +9,29 @@ exports.DisplayList = void 0;
|
|
|
9
9
|
|
|
10
10
|
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
|
|
11
11
|
|
|
12
|
+
var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
|
|
13
|
+
|
|
12
14
|
var _react = _interopRequireDefault(require("react"));
|
|
13
15
|
|
|
14
16
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
17
|
|
|
16
18
|
var DisplayList = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
19
|
+
var _context;
|
|
20
|
+
|
|
17
21
|
var items = props.items,
|
|
18
22
|
parentPrefixCls = props.parentPrefixCls,
|
|
19
23
|
currentIndex = props.currentIndex;
|
|
20
24
|
|
|
21
25
|
var itemRef = _react.default.useRef(null);
|
|
22
26
|
|
|
23
|
-
var displayListPrefixCls = "".concat(parentPrefixCls, "-
|
|
27
|
+
var displayListPrefixCls = "".concat(parentPrefixCls, "-list-display");
|
|
28
|
+
var listPrefixCls = "".concat(parentPrefixCls, "-list");
|
|
24
29
|
|
|
25
30
|
var renderItems = function renderItems() {
|
|
26
31
|
return (0, _map.default)(items).call(items, function (item, index) {
|
|
27
|
-
var opacityClassName = index === currentIndex ? "".concat(
|
|
32
|
+
var opacityClassName = index === currentIndex ? "".concat(listPrefixCls, "-item-not-hidden") : "".concat(listPrefixCls, "-item-hidden");
|
|
28
33
|
return /*#__PURE__*/_react.default.createElement("li", {
|
|
29
|
-
className: (0, _classnames.default)("".concat(
|
|
34
|
+
className: (0, _classnames.default)("".concat(listPrefixCls, "-item"), opacityClassName),
|
|
30
35
|
key: index,
|
|
31
36
|
ref: itemRef
|
|
32
37
|
}, item);
|
|
@@ -34,7 +39,7 @@ var DisplayList = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
34
39
|
};
|
|
35
40
|
|
|
36
41
|
return /*#__PURE__*/_react.default.createElement("ul", {
|
|
37
|
-
className: displayListPrefixCls,
|
|
42
|
+
className: (0, _concat.default)(_context = "".concat(listPrefixCls, " ")).call(_context, displayListPrefixCls),
|
|
38
43
|
ref: ref
|
|
39
44
|
}, renderItems());
|
|
40
45
|
});
|
package/lib/carousel/fadeList.js
CHANGED
|
@@ -9,11 +9,15 @@ exports.FadeList = void 0;
|
|
|
9
9
|
|
|
10
10
|
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
|
|
11
11
|
|
|
12
|
+
var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
|
|
13
|
+
|
|
12
14
|
var _react = _interopRequireDefault(require("react"));
|
|
13
15
|
|
|
14
16
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
17
|
|
|
16
18
|
var FadeList = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
19
|
+
var _context;
|
|
20
|
+
|
|
17
21
|
var items = props.items,
|
|
18
22
|
parentPrefixCls = props.parentPrefixCls,
|
|
19
23
|
needAnimation = props.needAnimation,
|
|
@@ -22,15 +26,16 @@ var FadeList = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
22
26
|
|
|
23
27
|
var itemRef = _react.default.useRef(null);
|
|
24
28
|
|
|
25
|
-
var fadeListPrefixCls = "".concat(parentPrefixCls, "-
|
|
29
|
+
var fadeListPrefixCls = "".concat(parentPrefixCls, "-list-fade");
|
|
30
|
+
var listPrefixCls = "".concat(parentPrefixCls, "-list");
|
|
26
31
|
|
|
27
32
|
var renderItems = function renderItems() {
|
|
28
33
|
return (0, _map.default)(items).call(items, function (item, index) {
|
|
29
|
-
var opacityClassName = index === currentIndex ? "".concat(
|
|
30
|
-
var animationClassName = needAnimation ? "".concat(
|
|
34
|
+
var opacityClassName = index === currentIndex ? "".concat(listPrefixCls, "-item-not-hidden") : "".concat(listPrefixCls, "-item-hidden");
|
|
35
|
+
var animationClassName = needAnimation ? "".concat(listPrefixCls, "-item-animation") : "".concat(listPrefixCls, "-item-none-animation");
|
|
31
36
|
var posx = -1 * index * itemWidth;
|
|
32
37
|
return /*#__PURE__*/_react.default.createElement("li", {
|
|
33
|
-
className: (0, _classnames.default)("".concat(
|
|
38
|
+
className: (0, _classnames.default)("".concat(listPrefixCls, "-item"), opacityClassName, animationClassName),
|
|
34
39
|
key: index,
|
|
35
40
|
ref: itemRef,
|
|
36
41
|
style: {
|
|
@@ -41,7 +46,7 @@ var FadeList = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
41
46
|
};
|
|
42
47
|
|
|
43
48
|
return /*#__PURE__*/_react.default.createElement("ul", {
|
|
44
|
-
className: fadeListPrefixCls,
|
|
49
|
+
className: (0, _concat.default)(_context = "".concat(listPrefixCls, " ")).call(_context, fadeListPrefixCls),
|
|
45
50
|
ref: ref
|
|
46
51
|
}, renderItems());
|
|
47
52
|
});
|
|
@@ -16,9 +16,12 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
|
|
|
16
16
|
var _react = _interopRequireDefault(require("react"));
|
|
17
17
|
|
|
18
18
|
var SlideList = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
19
|
+
var _context2;
|
|
20
|
+
|
|
19
21
|
var items = props.items,
|
|
20
22
|
parentPrefixCls = props.parentPrefixCls;
|
|
21
|
-
var slideListPrefixCls = "".concat(parentPrefixCls, "-
|
|
23
|
+
var slideListPrefixCls = "".concat(parentPrefixCls, "-list-slide");
|
|
24
|
+
var listPrefixCls = "".concat(parentPrefixCls, "-list");
|
|
22
25
|
|
|
23
26
|
var renderItems = function renderItems() {
|
|
24
27
|
var _context;
|
|
@@ -28,14 +31,14 @@ var SlideList = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
28
31
|
|
|
29
32
|
return (0, _map.default)(_items).call(_items, function (item, index) {
|
|
30
33
|
return /*#__PURE__*/_react.default.createElement("li", {
|
|
31
|
-
className: "".concat(
|
|
34
|
+
className: "".concat(listPrefixCls, "-item"),
|
|
32
35
|
key: index
|
|
33
36
|
}, item);
|
|
34
37
|
});
|
|
35
38
|
};
|
|
36
39
|
|
|
37
40
|
return /*#__PURE__*/_react.default.createElement("ul", {
|
|
38
|
-
className: slideListPrefixCls,
|
|
41
|
+
className: (0, _concat.default)(_context2 = "".concat(listPrefixCls, " ")).call(_context2, slideListPrefixCls),
|
|
39
42
|
ref: ref
|
|
40
43
|
}, renderItems());
|
|
41
44
|
});
|
|
@@ -190,6 +190,71 @@
|
|
|
190
190
|
.kd-carousel-displaylist-item-hidden {
|
|
191
191
|
display: none;
|
|
192
192
|
}
|
|
193
|
+
.kd-carousel-list {
|
|
194
|
+
list-style: none;
|
|
195
|
+
display: -webkit-box;
|
|
196
|
+
display: -ms-flexbox;
|
|
197
|
+
display: flex;
|
|
198
|
+
-webkit-box-orient: horizontal;
|
|
199
|
+
-webkit-box-direction: normal;
|
|
200
|
+
-ms-flex-direction: row;
|
|
201
|
+
flex-direction: row;
|
|
202
|
+
-webkit-box-flex: 1;
|
|
203
|
+
-ms-flex: 1;
|
|
204
|
+
flex: 1;
|
|
205
|
+
position: relative;
|
|
206
|
+
}
|
|
207
|
+
.kd-carousel-list-item {
|
|
208
|
+
position: relative;
|
|
209
|
+
-ms-flex-negative: 0;
|
|
210
|
+
flex-shrink: 0;
|
|
211
|
+
height: 100%;
|
|
212
|
+
width: 100%;
|
|
213
|
+
}
|
|
214
|
+
.kd-carousel-list-slide .kd-carousel-list-item {
|
|
215
|
+
opacity: 1;
|
|
216
|
+
border-radius: var(--kd-c-carousel-border-radius, 0px);
|
|
217
|
+
}
|
|
218
|
+
.kd-carousel-list-slide .kd-carousel-list-item-animation {
|
|
219
|
+
-webkit-transition: opacity 0.3s ease;
|
|
220
|
+
transition: opacity 0.3s ease;
|
|
221
|
+
}
|
|
222
|
+
.kd-carousel-list-slide .kd-carousel-list-item-none-animation {
|
|
223
|
+
-webkit-transition: none;
|
|
224
|
+
transition: none;
|
|
225
|
+
}
|
|
226
|
+
.kd-carousel-list-slide .kd-carousel-list-item-not-hidden {
|
|
227
|
+
opacity: 1;
|
|
228
|
+
}
|
|
229
|
+
.kd-carousel-list-slide .kd-carousel-list-item-hidden {
|
|
230
|
+
opacity: 0;
|
|
231
|
+
}
|
|
232
|
+
.kd-carousel-list-fade .kd-carousel-list-item {
|
|
233
|
+
opacity: 1;
|
|
234
|
+
}
|
|
235
|
+
.kd-carousel-list-fade .kd-carousel-list-item-animation {
|
|
236
|
+
-webkit-transition: opacity 0.3s ease;
|
|
237
|
+
transition: opacity 0.3s ease;
|
|
238
|
+
}
|
|
239
|
+
.kd-carousel-list-fade .kd-carousel-list-item-none-animation {
|
|
240
|
+
-webkit-transition: none;
|
|
241
|
+
transition: none;
|
|
242
|
+
}
|
|
243
|
+
.kd-carousel-list-fade .kd-carousel-list-item-not-hidden {
|
|
244
|
+
opacity: 1;
|
|
245
|
+
}
|
|
246
|
+
.kd-carousel-list-fade .kd-carousel-list-item-hidden {
|
|
247
|
+
opacity: 0;
|
|
248
|
+
}
|
|
249
|
+
.kd-carousel-list-display .kd-carousel-list-item {
|
|
250
|
+
display: block;
|
|
251
|
+
}
|
|
252
|
+
.kd-carousel-list-display .kd-carousel-list-item-not-hidden {
|
|
253
|
+
display: block;
|
|
254
|
+
}
|
|
255
|
+
.kd-carousel-list-display .kd-carousel-list-item-hidden {
|
|
256
|
+
display: none;
|
|
257
|
+
}
|
|
193
258
|
.kd-carousel-slidebar {
|
|
194
259
|
position: absolute;
|
|
195
260
|
}
|
|
@@ -69,6 +69,71 @@
|
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
|
+
|
|
73
|
+
&-list {
|
|
74
|
+
list-style: none;
|
|
75
|
+
display: flex;
|
|
76
|
+
flex-direction: row;
|
|
77
|
+
flex: 1;
|
|
78
|
+
position: relative;
|
|
79
|
+
|
|
80
|
+
&-item {
|
|
81
|
+
position: relative;
|
|
82
|
+
flex-shrink: 0;
|
|
83
|
+
height: 100%;
|
|
84
|
+
width: 100%;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&-slide {
|
|
88
|
+
.@{carousel-prefix-cls}-list-item {
|
|
89
|
+
opacity: 1;
|
|
90
|
+
border-radius: @carousel-boder-radius;
|
|
91
|
+
&-animation {
|
|
92
|
+
transition: opacity 0.3s ease;
|
|
93
|
+
}
|
|
94
|
+
&-none-animation {
|
|
95
|
+
transition: none;
|
|
96
|
+
}
|
|
97
|
+
&-not-hidden {
|
|
98
|
+
opacity: 1;
|
|
99
|
+
}
|
|
100
|
+
&-hidden {
|
|
101
|
+
opacity: 0;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
&-fade {
|
|
107
|
+
.@{carousel-prefix-cls}-list-item {
|
|
108
|
+
opacity: 1;
|
|
109
|
+
&-animation {
|
|
110
|
+
transition: opacity 0.3s ease;
|
|
111
|
+
}
|
|
112
|
+
&-none-animation {
|
|
113
|
+
transition: none;
|
|
114
|
+
}
|
|
115
|
+
&-not-hidden {
|
|
116
|
+
opacity: 1;
|
|
117
|
+
}
|
|
118
|
+
&-hidden {
|
|
119
|
+
opacity: 0;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
&-display {
|
|
125
|
+
.@{carousel-prefix-cls}-list-item {
|
|
126
|
+
display: block;
|
|
127
|
+
&-not-hidden {
|
|
128
|
+
display: block;
|
|
129
|
+
}
|
|
130
|
+
&-hidden {
|
|
131
|
+
display: none;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
72
137
|
&-slidebar {
|
|
73
138
|
position: absolute;
|
|
74
139
|
&-left {
|
|
@@ -87,7 +152,7 @@
|
|
|
87
152
|
.horizontal;
|
|
88
153
|
top: @carousel-dots-margin-top;
|
|
89
154
|
}
|
|
90
|
-
|
|
155
|
+
|
|
91
156
|
&-dot > button {
|
|
92
157
|
display: block;
|
|
93
158
|
border-radius: @carousel-dots-boder-radius;
|
package/lib/collapse/panel.js
CHANGED
|
@@ -123,7 +123,7 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
123
123
|
className: className
|
|
124
124
|
}, assist && /*#__PURE__*/_react.default.createElement("span", {
|
|
125
125
|
className: "".concat(panelPrefixCls, "-assist")
|
|
126
|
-
}, renderReactNode(assist))
|
|
126
|
+
}, renderReactNode(assist)));
|
|
127
127
|
};
|
|
128
128
|
|
|
129
129
|
var renderReactNode = function renderReactNode(reactNode) {
|