@douyinfe/semi-foundation 2.1.5 → 2.2.0
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/cascader/cascader.scss +1 -1
- package/cascader/constants.ts +4 -0
- package/cascader/foundation.ts +29 -15
- package/cascader/util.ts +13 -0
- package/datePicker/_utils/parser.ts +4 -3
- package/datePicker/datePicker.scss +18 -0
- package/datePicker/monthsGridFoundation.ts +101 -8
- package/gulpfile.js +3 -1
- package/lib/cjs/cascader/cascader.css +2 -2
- package/lib/cjs/cascader/cascader.scss +1 -1
- package/lib/cjs/cascader/constants.d.ts +3 -0
- package/lib/cjs/cascader/constants.js +6 -1
- package/lib/cjs/cascader/foundation.d.ts +4 -1
- package/lib/cjs/cascader/foundation.js +24 -11
- package/lib/cjs/cascader/util.d.ts +1 -0
- package/lib/cjs/cascader/util.js +17 -0
- package/lib/cjs/datePicker/_utils/parser.d.ts +6 -1
- package/lib/cjs/datePicker/_utils/parser.js +3 -1
- package/lib/cjs/datePicker/datePicker.css +6 -1
- package/lib/cjs/datePicker/datePicker.scss +18 -0
- package/lib/cjs/datePicker/monthsGridFoundation.d.ts +35 -3
- package/lib/cjs/datePicker/monthsGridFoundation.js +139 -6
- package/lib/cjs/navigation/navigation.css +0 -1
- package/lib/cjs/notification/notification.css +8 -4
- package/lib/cjs/notification/notification.scss +9 -5
- package/lib/cjs/notification/variables.scss +1 -0
- package/lib/cjs/select/foundation.d.ts +10 -1
- package/lib/cjs/select/foundation.js +11 -9
- package/lib/cjs/select/select.scss +1 -1
- package/lib/cjs/timeline/timeline.css +3 -0
- package/lib/cjs/timeline/timeline.scss +5 -1
- package/lib/cjs/tree/treeUtil.js +14 -14
- package/lib/cjs/upload/foundation.d.ts +1 -0
- package/lib/cjs/upload/foundation.js +106 -0
- package/lib/cjs/upload/rtl.scss +0 -4
- package/lib/cjs/upload/upload.css +30 -18
- package/lib/cjs/upload/upload.scss +31 -8
- package/lib/cjs/upload/variables.scss +5 -1
- package/lib/es/cascader/cascader.css +2 -2
- package/lib/es/cascader/cascader.scss +1 -1
- package/lib/es/cascader/constants.d.ts +3 -0
- package/lib/es/cascader/constants.js +6 -1
- package/lib/es/cascader/foundation.d.ts +4 -1
- package/lib/es/cascader/foundation.js +24 -12
- package/lib/es/cascader/util.d.ts +1 -0
- package/lib/es/cascader/util.js +14 -0
- package/lib/es/datePicker/_utils/parser.d.ts +6 -1
- package/lib/es/datePicker/_utils/parser.js +3 -1
- package/lib/es/datePicker/datePicker.css +6 -1
- package/lib/es/datePicker/datePicker.scss +18 -0
- package/lib/es/datePicker/monthsGridFoundation.d.ts +35 -3
- package/lib/es/datePicker/monthsGridFoundation.js +139 -6
- package/lib/es/navigation/navigation.css +0 -1
- package/lib/es/notification/notification.css +8 -4
- package/lib/es/notification/notification.scss +9 -5
- package/lib/es/notification/variables.scss +1 -0
- package/lib/es/select/foundation.d.ts +10 -1
- package/lib/es/select/foundation.js +12 -9
- package/lib/es/select/select.scss +1 -1
- package/lib/es/timeline/timeline.css +3 -0
- package/lib/es/timeline/timeline.scss +5 -1
- package/lib/es/tree/treeUtil.js +13 -12
- package/lib/es/upload/foundation.d.ts +1 -0
- package/lib/es/upload/foundation.js +107 -0
- package/lib/es/upload/rtl.scss +0 -4
- package/lib/es/upload/upload.css +30 -18
- package/lib/es/upload/upload.scss +31 -8
- package/lib/es/upload/variables.scss +5 -1
- package/notification/notification.scss +9 -5
- package/notification/variables.scss +1 -0
- package/package.json +4 -4
- package/select/foundation.ts +11 -9
- package/select/select.scss +1 -1
- package/timeline/timeline.scss +5 -1
- package/tree/treeUtil.ts +6 -2
- package/upload/foundation.ts +81 -0
- package/upload/rtl.scss +0 -4
- package/upload/upload.scss +31 -8
- package/upload/variables.scss +5 -1
|
@@ -405,6 +405,112 @@ class UploadFoundation extends _foundation.default {
|
|
|
405
405
|
this.startUpload(currentFiles);
|
|
406
406
|
}
|
|
407
407
|
});
|
|
408
|
+
} // 插入多个文件到指定位置
|
|
409
|
+
// Insert files to the specified location
|
|
410
|
+
|
|
411
|
+
|
|
412
|
+
insertFileToList(files, index) {
|
|
413
|
+
const {
|
|
414
|
+
limit,
|
|
415
|
+
transformFile,
|
|
416
|
+
accept,
|
|
417
|
+
uploadTrigger
|
|
418
|
+
} = this.getProps();
|
|
419
|
+
const {
|
|
420
|
+
fileList
|
|
421
|
+
} = this.getStates();
|
|
422
|
+
const unAcceptFileList = []; // 当次选中的文件
|
|
423
|
+
// current selected file
|
|
424
|
+
|
|
425
|
+
let currentFileList = (0, _from.default)(files);
|
|
426
|
+
|
|
427
|
+
if (typeof accept !== 'undefined') {
|
|
428
|
+
currentFileList = (0, _filter.default)(currentFileList).call(currentFileList, item => {
|
|
429
|
+
const isValid = this.checkFileFormat(accept, item);
|
|
430
|
+
|
|
431
|
+
if (!isValid) {
|
|
432
|
+
unAcceptFileList.push(item);
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
return isValid;
|
|
436
|
+
});
|
|
437
|
+
|
|
438
|
+
if (unAcceptFileList.length !== 0) {
|
|
439
|
+
this._adapter.notifyAcceptInvalid(unAcceptFileList);
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
if (currentFileList.length === 0) {
|
|
443
|
+
return;
|
|
444
|
+
}
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
currentFileList = (0, _map.default)(currentFileList).call(currentFileList, file => {
|
|
448
|
+
if (!file.uid) {
|
|
449
|
+
file.uid = (0, _uuid.getUuidv4)();
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
if (this.checkFileSize(file)) {
|
|
453
|
+
file._sizeInvalid = true;
|
|
454
|
+
file.status = FILE_STATUS_VALID_FAIL;
|
|
455
|
+
|
|
456
|
+
this._adapter.notifySizeError(file, fileList);
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
if (transformFile) {
|
|
460
|
+
file = transformFile(file);
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
return file;
|
|
464
|
+
});
|
|
465
|
+
const total = fileList.length + currentFileList.length;
|
|
466
|
+
|
|
467
|
+
if (typeof limit !== 'undefined') {
|
|
468
|
+
// 判断是否超出限制
|
|
469
|
+
// Determine whether the limit is exceeded
|
|
470
|
+
if (total > limit) {
|
|
471
|
+
if (limit === 1) {
|
|
472
|
+
// 使用最后面的文件对当前文件进行替换
|
|
473
|
+
// Use the last file to replace the current file
|
|
474
|
+
currentFileList = (0, _slice.default)(currentFileList).call(currentFileList, -1);
|
|
475
|
+
|
|
476
|
+
this._adapter.notifyFileSelect(currentFileList);
|
|
477
|
+
|
|
478
|
+
this._adapter.resetInput();
|
|
479
|
+
|
|
480
|
+
this.replaceFileList(currentFileList);
|
|
481
|
+
return;
|
|
482
|
+
} // 如果超出了限制,则计算还能添加几个文件,将剩余的文件继续上传
|
|
483
|
+
// If the limit is exceeded, several files can be added to the calculation, and the remaining files will continue to be uploaded
|
|
484
|
+
|
|
485
|
+
|
|
486
|
+
const restNum = limit - fileList.length;
|
|
487
|
+
currentFileList = (0, _slice.default)(currentFileList).call(currentFileList, 0, restNum);
|
|
488
|
+
|
|
489
|
+
this._adapter.notifyExceed(currentFileList);
|
|
490
|
+
}
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
const fileItemList = (0, _map.default)(currentFileList).call(currentFileList, file => this.buildFileItem(file, uploadTrigger));
|
|
494
|
+
const newFileList = (0, _slice.default)(fileList).call(fileList);
|
|
495
|
+
|
|
496
|
+
if (typeof index !== 'undefined') {
|
|
497
|
+
(0, _splice.default)(newFileList).call(newFileList, index, 0, ...fileItemList);
|
|
498
|
+
} else {
|
|
499
|
+
newFileList.push(...fileItemList);
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
this._adapter.notifyFileSelect(currentFileList);
|
|
503
|
+
|
|
504
|
+
this._adapter.notifyChange({
|
|
505
|
+
fileList: newFileList,
|
|
506
|
+
currentFile: null
|
|
507
|
+
});
|
|
508
|
+
|
|
509
|
+
this._adapter.updateFileList(newFileList, () => {
|
|
510
|
+
if (uploadTrigger === TRIGGER_AUTO) {
|
|
511
|
+
this.startUpload(fileItemList);
|
|
512
|
+
}
|
|
513
|
+
});
|
|
408
514
|
}
|
|
409
515
|
|
|
410
516
|
manualUpload() {
|
package/lib/cjs/upload/rtl.scss
CHANGED
|
@@ -22,8 +22,6 @@ $module: #{$prefix}-upload;
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
&-file-card {
|
|
25
|
-
margin-right: 0;
|
|
26
|
-
margin-left: $spacing-upload_picture_file_card-marginRight;
|
|
27
25
|
|
|
28
26
|
&-info {
|
|
29
27
|
|
|
@@ -53,8 +51,6 @@ $module: #{$prefix}-upload;
|
|
|
53
51
|
&-picture {
|
|
54
52
|
|
|
55
53
|
&-file-card {
|
|
56
|
-
margin-right: 0;
|
|
57
|
-
margin-left: $spacing-upload_picture_file_card-marginRight;
|
|
58
54
|
|
|
59
55
|
&-close {
|
|
60
56
|
right: auto;
|
|
@@ -73,6 +73,8 @@
|
|
|
73
73
|
display: flex;
|
|
74
74
|
flex-wrap: wrap;
|
|
75
75
|
flex-shrink: 0;
|
|
76
|
+
gap: 8px;
|
|
77
|
+
margin-bottom: 8px;
|
|
76
78
|
}
|
|
77
79
|
.semi-upload-file-list-main p {
|
|
78
80
|
display: flex;
|
|
@@ -99,8 +101,6 @@
|
|
|
99
101
|
justify-content: space-between;
|
|
100
102
|
height: 52px;
|
|
101
103
|
width: 250px;
|
|
102
|
-
margin-right: 8px;
|
|
103
|
-
margin-bottom: 8px;
|
|
104
104
|
background-color: var(--semi-color-fill-0);
|
|
105
105
|
cursor: pointer;
|
|
106
106
|
}
|
|
@@ -235,16 +235,16 @@
|
|
|
235
235
|
flex-direction: column;
|
|
236
236
|
}
|
|
237
237
|
.semi-upload-picture[x-prompt-pos=bottom] .semi-upload-prompt {
|
|
238
|
-
order:
|
|
238
|
+
order: 1;
|
|
239
239
|
}
|
|
240
240
|
.semi-upload-picture[x-prompt-pos=bottom] .semi-upload-add {
|
|
241
|
-
order:
|
|
241
|
+
order: 0;
|
|
242
242
|
}
|
|
243
243
|
.semi-upload-picture[x-prompt-pos=right] .semi-upload-prompt {
|
|
244
|
-
order:
|
|
244
|
+
order: 1;
|
|
245
245
|
}
|
|
246
246
|
.semi-upload-picture[x-prompt-pos=right] .semi-upload-add {
|
|
247
|
-
order:
|
|
247
|
+
order: 0;
|
|
248
248
|
}
|
|
249
249
|
.semi-upload-picture-add {
|
|
250
250
|
background-color: var(--semi-color-fill-0);
|
|
@@ -281,11 +281,14 @@
|
|
|
281
281
|
margin-bottom: 0;
|
|
282
282
|
}
|
|
283
283
|
.semi-upload-picture-file-card {
|
|
284
|
+
display: flex;
|
|
285
|
+
align-items: center;
|
|
286
|
+
justify-content: center;
|
|
284
287
|
height: 96px;
|
|
285
288
|
width: 96px;
|
|
289
|
+
border-radius: var(--semi-border-radius-small);
|
|
286
290
|
position: relative;
|
|
287
|
-
|
|
288
|
-
margin-bottom: 8px;
|
|
291
|
+
overflow: hidden;
|
|
289
292
|
}
|
|
290
293
|
.semi-upload-picture-file-card img {
|
|
291
294
|
height: 96px;
|
|
@@ -350,6 +353,22 @@
|
|
|
350
353
|
color: var(--semi-color-white);
|
|
351
354
|
transform: translate3D(-50%, -50%, 0);
|
|
352
355
|
}
|
|
356
|
+
.semi-upload-picture-file-card-pic-info {
|
|
357
|
+
display: inline-flex;
|
|
358
|
+
box-sizing: border-box;
|
|
359
|
+
justify-content: space-between;
|
|
360
|
+
align-items: center;
|
|
361
|
+
position: absolute;
|
|
362
|
+
width: 100%;
|
|
363
|
+
height: 24px;
|
|
364
|
+
padding: 0 10px;
|
|
365
|
+
bottom: 0;
|
|
366
|
+
left: 0;
|
|
367
|
+
color: var(--semi-color-white);
|
|
368
|
+
font-size: 12px;
|
|
369
|
+
font-weight: 600;
|
|
370
|
+
background: linear-gradient(0deg, rgba(22, 22, 26, 0.3) 0%, rgba(22, 22, 26, 0) 77.08%);
|
|
371
|
+
}
|
|
353
372
|
.semi-upload-picture-file-card-icon-loading, .semi-upload-picture-file-card-icon-error {
|
|
354
373
|
position: absolute;
|
|
355
374
|
bottom: 6px;
|
|
@@ -362,6 +381,9 @@
|
|
|
362
381
|
.semi-upload-picture-file-card-show-pointer {
|
|
363
382
|
cursor: pointer;
|
|
364
383
|
}
|
|
384
|
+
.semi-upload-picture-file-card-error {
|
|
385
|
+
outline: 1px solid var(--semi-color-danger);
|
|
386
|
+
}
|
|
365
387
|
.semi-upload-drag-area {
|
|
366
388
|
border-radius: var(--semi-border-radius-small);
|
|
367
389
|
border: 2px dashed var(--semi-color-border);
|
|
@@ -442,11 +464,6 @@
|
|
|
442
464
|
.semi-portal-rtl .semi-upload-file-list-title-clear {
|
|
443
465
|
display: inline-block;
|
|
444
466
|
}
|
|
445
|
-
.semi-rtl .semi-upload-file-card,
|
|
446
|
-
.semi-portal-rtl .semi-upload-file-card {
|
|
447
|
-
margin-right: 0;
|
|
448
|
-
margin-left: 8px;
|
|
449
|
-
}
|
|
450
467
|
.semi-rtl .semi-upload-file-card-info-size,
|
|
451
468
|
.semi-portal-rtl .semi-upload-file-card-info-size {
|
|
452
469
|
margin-left: 0;
|
|
@@ -463,11 +480,6 @@
|
|
|
463
480
|
margin-right: 0;
|
|
464
481
|
margin-left: 2px;
|
|
465
482
|
}
|
|
466
|
-
.semi-rtl .semi-upload-picture-file-card,
|
|
467
|
-
.semi-portal-rtl .semi-upload-picture-file-card {
|
|
468
|
-
margin-right: 0;
|
|
469
|
-
margin-left: 8px;
|
|
470
|
-
}
|
|
471
483
|
.semi-rtl .semi-upload-picture-file-card-close,
|
|
472
484
|
.semi-portal-rtl .semi-upload-picture-file-card-close {
|
|
473
485
|
right: auto;
|
|
@@ -99,6 +99,8 @@ $module: #{$prefix}-upload;
|
|
|
99
99
|
display: flex;
|
|
100
100
|
flex-wrap: wrap;
|
|
101
101
|
flex-shrink: 0;
|
|
102
|
+
gap: $spacing-upload_picture_file_card-gap;
|
|
103
|
+
margin-bottom: $spacing-upload_picture_file_card-marginBottom;
|
|
102
104
|
|
|
103
105
|
p {
|
|
104
106
|
@include ver-center;
|
|
@@ -130,8 +132,6 @@ $module: #{$prefix}-upload;
|
|
|
130
132
|
justify-content: space-between;
|
|
131
133
|
height: $height-upload_file_card;
|
|
132
134
|
width: $width-upload_file_card;
|
|
133
|
-
margin-right: $spacing-tight;
|
|
134
|
-
margin-bottom: $spacing-tight;
|
|
135
135
|
background-color: $color-upload_card-bg;
|
|
136
136
|
cursor: pointer;
|
|
137
137
|
|
|
@@ -292,21 +292,21 @@ $module: #{$prefix}-upload;
|
|
|
292
292
|
flex-direction: column;
|
|
293
293
|
|
|
294
294
|
.#{$module}-prompt {
|
|
295
|
-
order:
|
|
295
|
+
order: 1;
|
|
296
296
|
}
|
|
297
297
|
|
|
298
298
|
.#{$module}-add {
|
|
299
|
-
order:
|
|
299
|
+
order: 0;
|
|
300
300
|
}
|
|
301
301
|
}
|
|
302
302
|
|
|
303
303
|
&[x-prompt-pos="right"] {
|
|
304
304
|
.#{$module}-prompt {
|
|
305
|
-
order:
|
|
305
|
+
order: 1;
|
|
306
306
|
}
|
|
307
307
|
|
|
308
308
|
.#{$module}-add {
|
|
309
|
-
order:
|
|
309
|
+
order: 0;
|
|
310
310
|
}
|
|
311
311
|
}
|
|
312
312
|
|
|
@@ -353,11 +353,14 @@ $module: #{$prefix}-upload;
|
|
|
353
353
|
}
|
|
354
354
|
|
|
355
355
|
&-file-card {
|
|
356
|
+
display: flex;
|
|
357
|
+
align-items: center;
|
|
358
|
+
justify-content: center;
|
|
356
359
|
height: $height-upload_file_pic_card;
|
|
357
360
|
width: $width-upload_file_pic_card;
|
|
361
|
+
border-radius: $radius-upload_picture_file_card_img;
|
|
358
362
|
position: relative;
|
|
359
|
-
|
|
360
|
-
margin-bottom: $spacing-upload_picture_file_card-marginBottom;
|
|
363
|
+
overflow: hidden;
|
|
361
364
|
|
|
362
365
|
img {
|
|
363
366
|
height: $width-upload_picture_file_card_img;
|
|
@@ -429,6 +432,22 @@ $module: #{$prefix}-upload;
|
|
|
429
432
|
color: $color-upload_replace-text;
|
|
430
433
|
transform: translate3D(-50%, -50%, 0);
|
|
431
434
|
}
|
|
435
|
+
&-pic-info {
|
|
436
|
+
display: inline-flex;
|
|
437
|
+
box-sizing: border-box;
|
|
438
|
+
justify-content: space-between;
|
|
439
|
+
align-items: center;
|
|
440
|
+
position: absolute;
|
|
441
|
+
width: 100%;
|
|
442
|
+
height: 24px;
|
|
443
|
+
padding: 0 10px;
|
|
444
|
+
bottom: 0;
|
|
445
|
+
left: 0;
|
|
446
|
+
color: $color-upload_picture_file_card_pic_info-text;
|
|
447
|
+
font-size: $font-upload_picture_file_card_pic_info-fontSize;
|
|
448
|
+
font-weight: $font-upload_picture_file_card_pic_info-fontWeight;
|
|
449
|
+
background: linear-gradient(0deg, rgba(22, 22, 26, 0.3) 0%, rgba(22, 22, 26, 0) 77.08%);
|
|
450
|
+
}
|
|
432
451
|
|
|
433
452
|
&-icon-loading,
|
|
434
453
|
&-icon-error {
|
|
@@ -445,6 +464,10 @@ $module: #{$prefix}-upload;
|
|
|
445
464
|
&-show-pointer {
|
|
446
465
|
cursor: pointer;
|
|
447
466
|
}
|
|
467
|
+
|
|
468
|
+
&-error {
|
|
469
|
+
outline: 1px solid $color-upload_picture_file_card_error-border;
|
|
470
|
+
}
|
|
448
471
|
}
|
|
449
472
|
}
|
|
450
473
|
|
|
@@ -24,6 +24,8 @@ $color-upload_pic_add-bg-hover: var(--semi-color-fill-1); // 图片墙上传背
|
|
|
24
24
|
$color-upload_pic_add-bg: var(--semi-color-fill-0); // 图片墙上传背景色 - 默认
|
|
25
25
|
$color-upload_pic_remove-bg: var(--semi-color-overlay-bg); // 图片墙上传移除图标颜色
|
|
26
26
|
$color-upload_picture_file_card_loading_error-icon: var(--semi-color-danger); // 图片墙上传移除图标颜色
|
|
27
|
+
$color-upload_picture_file_card_error-border: var(--semi-color-danger); // 图片墙上传移除图标颜色
|
|
28
|
+
$color-upload_picture_file_card_pic_info-text: var(--semi-color-white); // 图片墙图片信息(序号)文字颜色
|
|
27
29
|
$color-upload_preview-icon: var(--semi-color-text-2); // 上传文件卡片文本颜色
|
|
28
30
|
$color-upload_retry-text: var(--semi-color-primary); // 上传文件卡片重新上传按钮文本颜色
|
|
29
31
|
$color-upload_replace-text: var(--semi-color-white); // 上传文件卡片重新替换按钮文本颜色
|
|
@@ -56,7 +58,7 @@ $spacing-upload_file_card_info_progress-marginTop: 4px; // 上传文件卡片进
|
|
|
56
58
|
$spacing-upload_file_card_close-marginLeft: $spacing-tight; // 上传文件卡片删除按钮左侧外边距
|
|
57
59
|
$spacing-upload_file_card_close-marginRight: $spacing-tight; // 上传文件卡片删除按钮右侧外边距
|
|
58
60
|
$spacing-upload_file_card_icon-marginRight: $spacing-super-tight; // 上传文件卡片图标右侧外边距
|
|
59
|
-
$spacing-upload_picture_file_card-
|
|
61
|
+
$spacing-upload_picture_file_card-gap: $spacing-tight; // 图片墙卡片之间边距
|
|
60
62
|
$spacing-upload_picture_file_card-marginBottom: $spacing-tight; // 图片墙上传卡片底部外边距
|
|
61
63
|
$spacing-upload_picture_file_card_close-top: 8px; // 图片墙上传卡片删除按钮顶部位置
|
|
62
64
|
$spacing-upload_picture_file_card_close-right: 8px; // 图片墙上传卡片删除右侧位置
|
|
@@ -79,3 +81,5 @@ $radius-upload_drag_area: var(--semi-border-radius-small); // 可拖拽上传拖
|
|
|
79
81
|
$font-upload_file_card_info_name-fontWeight: $font-weight-bold; // 上传文件卡片文件名字重
|
|
80
82
|
$font-upload_file_card_info_size-fontWeight: $font-weight-regular; // 上传文件卡片文件尺寸字重
|
|
81
83
|
$font-upload_drag_area_tips-fontWeight: 600; // 可拖拽上传提示文本字重
|
|
84
|
+
$font-upload_picture_file_card_pic_info-fontSize: 12px; // 图片墙图片信息字体大小
|
|
85
|
+
$font-upload_picture_file_card_pic_info-fontWeight: 600; // 图片墙图片信息文本字重
|
|
@@ -99,11 +99,11 @@
|
|
|
99
99
|
.semi-cascader-selection-tag:first-child {
|
|
100
100
|
margin-left: 0;
|
|
101
101
|
}
|
|
102
|
-
.semi-cascader-selection-tag-disabled {
|
|
102
|
+
.semi-cascader-selection-tag-disabled.semi-tag {
|
|
103
103
|
color: var(--semi-color-disabled-text);
|
|
104
104
|
cursor: not-allowed;
|
|
105
105
|
}
|
|
106
|
-
.semi-cascader-selection-tag-disabled .semi-tag-close {
|
|
106
|
+
.semi-cascader-selection-tag-disabled.semi-tag .semi-tag-close {
|
|
107
107
|
color: var(--semi-color-disabled-text);
|
|
108
108
|
cursor: not-allowed;
|
|
109
109
|
pointer-events: none;
|
|
@@ -9,6 +9,9 @@ declare const strings: {
|
|
|
9
9
|
readonly IS_VALUE: "isValue";
|
|
10
10
|
readonly SHOW_NEXT_BY_CLICK: "click";
|
|
11
11
|
readonly SHOW_NEXT_BY_HOVER: "hover";
|
|
12
|
+
readonly LEAF_ONLY_MERGE_TYPE: "leafOnly";
|
|
13
|
+
readonly AUTO_MERGE_VALUE_MERGE_TYPE: "autoMergeValue";
|
|
14
|
+
readonly NONE_MERGE_TYPE: "none";
|
|
12
15
|
};
|
|
13
16
|
declare const numbers: {};
|
|
14
17
|
export { cssClasses, strings, numbers };
|
|
@@ -9,7 +9,12 @@ const strings = {
|
|
|
9
9
|
IS_KEY: 'isKey',
|
|
10
10
|
IS_VALUE: 'isValue',
|
|
11
11
|
SHOW_NEXT_BY_CLICK: 'click',
|
|
12
|
-
SHOW_NEXT_BY_HOVER: 'hover'
|
|
12
|
+
SHOW_NEXT_BY_HOVER: 'hover',
|
|
13
|
+
|
|
14
|
+
/* Merge Type */
|
|
15
|
+
LEAF_ONLY_MERGE_TYPE: 'leafOnly',
|
|
16
|
+
AUTO_MERGE_VALUE_MERGE_TYPE: 'autoMergeValue',
|
|
17
|
+
NONE_MERGE_TYPE: 'none'
|
|
13
18
|
};
|
|
14
19
|
const numbers = {};
|
|
15
20
|
export { cssClasses, strings, numbers };
|
|
@@ -57,6 +57,7 @@ export interface BasicScrollPanelProps {
|
|
|
57
57
|
export interface BasicCascaderProps {
|
|
58
58
|
mouseEnterDelay?: number;
|
|
59
59
|
mouseLeaveDelay?: number;
|
|
60
|
+
separator?: string;
|
|
60
61
|
arrowIcon?: any;
|
|
61
62
|
changeOnSelect?: boolean;
|
|
62
63
|
multiple?: boolean;
|
|
@@ -96,6 +97,8 @@ export interface BasicCascaderProps {
|
|
|
96
97
|
topSlot?: any;
|
|
97
98
|
showNext?: ShowNextType;
|
|
98
99
|
disableStrictly?: boolean;
|
|
100
|
+
leafOnly?: boolean;
|
|
101
|
+
enableLeafClick?: boolean;
|
|
99
102
|
onClear?: () => void;
|
|
100
103
|
triggerRender?: (props: BasicTriggerRenderProps) => any;
|
|
101
104
|
onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;
|
|
@@ -125,7 +128,7 @@ export interface BasicCascaderInnerData {
|
|
|
125
128
|
isHovering: boolean;
|
|
126
129
|
checkedKeys: Set<string>;
|
|
127
130
|
halfCheckedKeys: Set<string>;
|
|
128
|
-
|
|
131
|
+
resolvedCheckedKeys: Set<string>;
|
|
129
132
|
loadedKeys: Set<string>;
|
|
130
133
|
loadingKeys: Set<string>;
|
|
131
134
|
loading: boolean;
|
|
@@ -22,7 +22,8 @@ import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instanc
|
|
|
22
22
|
import _parseInt from "@babel/runtime-corejs3/core-js-stable/parse-int";
|
|
23
23
|
import BaseFoundation from '../base/foundation';
|
|
24
24
|
import { filter, findAncestorKeys, calcCheckedKeysForUnchecked, calcCheckedKeysForChecked, calcCheckedKeys, findDescendantKeys, normalizeKeyList } from '../tree/treeUtil';
|
|
25
|
-
import { convertDataToEntities, findKeysForValues, normalizedArr, isValid } from './util';
|
|
25
|
+
import { convertDataToEntities, findKeysForValues, normalizedArr, isValid, calcMergeType } from './util';
|
|
26
|
+
import { strings } from './constants'; // eslint-disable-next-line max-len
|
|
26
27
|
|
|
27
28
|
export default class CascaderFoundation extends BaseFoundation {
|
|
28
29
|
constructor(adapter) {
|
|
@@ -535,10 +536,12 @@ export default class CascaderFoundation extends BaseFoundation {
|
|
|
535
536
|
}
|
|
536
537
|
|
|
537
538
|
_defaultRenderText(path, displayRender) {
|
|
539
|
+
const separator = this.getProp('separator');
|
|
540
|
+
|
|
538
541
|
if (displayRender && typeof displayRender === 'function') {
|
|
539
542
|
return displayRender(path);
|
|
540
543
|
} else {
|
|
541
|
-
return path.join(
|
|
544
|
+
return path.join(separator);
|
|
542
545
|
}
|
|
543
546
|
}
|
|
544
547
|
|
|
@@ -612,7 +615,8 @@ export default class CascaderFoundation extends BaseFoundation {
|
|
|
612
615
|
const {
|
|
613
616
|
changeOnSelect: allowChange,
|
|
614
617
|
filterLeafOnly,
|
|
615
|
-
multiple
|
|
618
|
+
multiple,
|
|
619
|
+
enableLeafClick
|
|
616
620
|
} = this.getProps();
|
|
617
621
|
const {
|
|
618
622
|
keyEntities,
|
|
@@ -646,6 +650,10 @@ export default class CascaderFoundation extends BaseFoundation {
|
|
|
646
650
|
this._adapter.updateStates({
|
|
647
651
|
activeKeys: new _Set(activeKeys)
|
|
648
652
|
});
|
|
653
|
+
|
|
654
|
+
if (isLeaf && enableLeafClick) {
|
|
655
|
+
this.onItemCheckboxClick(item);
|
|
656
|
+
}
|
|
649
657
|
} else {
|
|
650
658
|
this._adapter.notifySelect(data.value);
|
|
651
659
|
|
|
@@ -695,12 +703,13 @@ export default class CascaderFoundation extends BaseFoundation {
|
|
|
695
703
|
const {
|
|
696
704
|
checkedKeys,
|
|
697
705
|
keyEntities,
|
|
698
|
-
|
|
706
|
+
resolvedCheckedKeys
|
|
699
707
|
} = this.getStates();
|
|
700
708
|
const {
|
|
701
709
|
autoMergeValue,
|
|
702
710
|
max,
|
|
703
|
-
disableStrictly
|
|
711
|
+
disableStrictly,
|
|
712
|
+
leafOnly
|
|
704
713
|
} = this.getProps(); // prev checked status
|
|
705
714
|
|
|
706
715
|
const prevCheckedStatus = checkedKeys.has(key); // next checked status
|
|
@@ -711,16 +720,19 @@ export default class CascaderFoundation extends BaseFoundation {
|
|
|
711
720
|
checkedKeys: curCheckedKeys,
|
|
712
721
|
halfCheckedKeys: curHalfCheckedKeys
|
|
713
722
|
} = disableStrictly ? this.calcNonDisabedCheckedKeys(key, curCheckedStatus) : this.calcCheckedKeys(key, curCheckedStatus);
|
|
714
|
-
const
|
|
715
|
-
const
|
|
723
|
+
const mergeType = calcMergeType(autoMergeValue, leafOnly);
|
|
724
|
+
const isLeafOnlyMerge = mergeType === strings.LEAF_ONLY_MERGE_TYPE;
|
|
725
|
+
const isNoneMerge = mergeType === strings.NONE_MERGE_TYPE;
|
|
726
|
+
const curResolvedCheckedKeys = new _Set(normalizeKeyList(curCheckedKeys, keyEntities, isLeafOnlyMerge));
|
|
727
|
+
const curRealCheckedKeys = isNoneMerge ? curCheckedKeys : curResolvedCheckedKeys;
|
|
716
728
|
|
|
717
729
|
if (_isNumber(max)) {
|
|
718
|
-
if (
|
|
730
|
+
if (!isNoneMerge) {
|
|
719
731
|
// When it exceeds max, the quantity is allowed to be reduced, and no further increase is allowed
|
|
720
|
-
if (
|
|
732
|
+
if (resolvedCheckedKeys.size < curResolvedCheckedKeys.size && curResolvedCheckedKeys.size > max) {
|
|
721
733
|
const checkedEntities = [];
|
|
722
734
|
|
|
723
|
-
_forEachInstanceProperty(
|
|
735
|
+
_forEachInstanceProperty(curResolvedCheckedKeys).call(curResolvedCheckedKeys, itemKey => {
|
|
724
736
|
checkedEntities.push(keyEntities[itemKey]);
|
|
725
737
|
});
|
|
726
738
|
|
|
@@ -748,7 +760,7 @@ export default class CascaderFoundation extends BaseFoundation {
|
|
|
748
760
|
this._adapter.updateStates({
|
|
749
761
|
checkedKeys: curCheckedKeys,
|
|
750
762
|
halfCheckedKeys: curHalfCheckedKeys,
|
|
751
|
-
|
|
763
|
+
resolvedCheckedKeys: curResolvedCheckedKeys
|
|
752
764
|
});
|
|
753
765
|
} // The click event during multiple selection will definitely cause the checked state of node to change,
|
|
754
766
|
// so there is no need to judge the value to change.
|
|
@@ -911,7 +923,7 @@ export default class CascaderFoundation extends BaseFoundation {
|
|
|
911
923
|
newState.halfCheckedKeys = new _Set([]);
|
|
912
924
|
newState.selectedKeys = new _Set([]);
|
|
913
925
|
newState.activeKeys = new _Set([]);
|
|
914
|
-
newState.
|
|
926
|
+
newState.resolvedCheckedKeys = new _Set([]);
|
|
915
927
|
|
|
916
928
|
this._adapter.notifyChange([]);
|
|
917
929
|
} else {
|
|
@@ -2,3 +2,4 @@ export declare function isValid(val: any): boolean;
|
|
|
2
2
|
export declare function normalizedArr(val: any): any[];
|
|
3
3
|
export declare function convertDataToEntities(dataNodes: any): any;
|
|
4
4
|
export declare function findKeysForValues(value: any, keyEntities: any): any[];
|
|
5
|
+
export declare function calcMergeType(autoMergeValue: boolean, leafOnly: boolean): string;
|
package/lib/es/cascader/util.js
CHANGED
|
@@ -8,6 +8,7 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
|
|
|
8
8
|
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
|
9
9
|
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
|
10
10
|
import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
|
|
11
|
+
import { strings } from './constants';
|
|
11
12
|
|
|
12
13
|
function getPosition(level, index) {
|
|
13
14
|
var _context;
|
|
@@ -88,4 +89,17 @@ export function findKeysForValues(value, keyEntities) {
|
|
|
88
89
|
const res = _mapInstanceProperty(_context2 = _filterInstanceProperty(_context3 = _Object$values(keyEntities)).call(_context3, item => _isEqual(item.valuePath, valuePath))).call(_context2, item => item.key);
|
|
89
90
|
|
|
90
91
|
return res;
|
|
92
|
+
}
|
|
93
|
+
export function calcMergeType(autoMergeValue, leafOnly) {
|
|
94
|
+
let mergeType;
|
|
95
|
+
|
|
96
|
+
if (leafOnly) {
|
|
97
|
+
mergeType = strings.LEAF_ONLY_MERGE_TYPE;
|
|
98
|
+
} else if (autoMergeValue) {
|
|
99
|
+
mergeType = strings.AUTO_MERGE_VALUE_MERGE_TYPE;
|
|
100
|
+
} else {
|
|
101
|
+
mergeType = strings.NONE_MERGE_TYPE;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
return mergeType;
|
|
91
105
|
}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file
|
|
3
|
+
* Various date-related analysis methods
|
|
4
|
+
*/
|
|
5
|
+
import { Locale } from 'date-fns';
|
|
1
6
|
/**
|
|
2
7
|
* Parsing value to Date object
|
|
3
8
|
*/
|
|
4
|
-
export declare function compatiableParse(value: string, formatToken?: string, baseDate?: Date, locale?:
|
|
9
|
+
export declare function compatiableParse(value: string, formatToken?: string, baseDate?: Date, locale?: Locale): Date | null;
|
|
@@ -26,7 +26,9 @@ export function compatiableParse(value, formatToken, baseDate, locale) {
|
|
|
26
26
|
result = new Date(Date.parse(value));
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
const yearInvalid = isValid(result) && String(result.getFullYear()).length > 4;
|
|
30
|
+
|
|
31
|
+
if (!isValid(result) || yearInvalid) {
|
|
30
32
|
result = null;
|
|
31
33
|
}
|
|
32
34
|
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
@charset "UTF-8";
|
|
2
1
|
/* shadow */
|
|
3
2
|
/* sizing */
|
|
4
3
|
/* spacing */
|
|
@@ -72,6 +71,9 @@
|
|
|
72
71
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
73
72
|
min-height: 24px;
|
|
74
73
|
}
|
|
74
|
+
.semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks {
|
|
75
|
+
min-height: 216px;
|
|
76
|
+
}
|
|
75
77
|
.semi-datepicker-panel-yam {
|
|
76
78
|
max-width: 284px;
|
|
77
79
|
}
|
|
@@ -561,6 +563,9 @@
|
|
|
561
563
|
.semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel .semi-scrolllist-shade-post {
|
|
562
564
|
margin-top: 17px;
|
|
563
565
|
}
|
|
566
|
+
.semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks {
|
|
567
|
+
min-height: 168px;
|
|
568
|
+
}
|
|
564
569
|
.semi-datepicker-compact.semi-datepicker-panel-yam .semi-scrolllist {
|
|
565
570
|
font-size: 12px;
|
|
566
571
|
line-height: 16px;
|
|
@@ -94,6 +94,15 @@ $module: #{$prefix}-datepicker;
|
|
|
94
94
|
min-height: $height-datepicker_timepicker_header_min;
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
|
+
|
|
98
|
+
// 为了防止 scrollList 因为 weeks 变化高度发生变化导致年月可能发生滚动
|
|
99
|
+
// In order to prevent scrollList from scrolling due to changes in the height of weeks, the year and month may be scrolled
|
|
100
|
+
&[x-panel-yearandmonth-open-type="left"],
|
|
101
|
+
&[x-panel-yearandmonth-open-type="right"] {
|
|
102
|
+
.#{$module}-weeks {
|
|
103
|
+
min-height: 6 * $width-datepicker_day;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
97
106
|
}
|
|
98
107
|
|
|
99
108
|
// 年月选择器
|
|
@@ -833,6 +842,15 @@ $module: #{$prefix}-datepicker;
|
|
|
833
842
|
}
|
|
834
843
|
}
|
|
835
844
|
}
|
|
845
|
+
|
|
846
|
+
// 为了防止 scrollList 因为 weeks 变化高度发生变化导致年月可能发生滚动
|
|
847
|
+
// In order to prevent scrollList from scrolling due to changes in the height of weeks, the year and month may be scrolled
|
|
848
|
+
&[x-panel-yearandmonth-open-type="left"],
|
|
849
|
+
&[x-panel-yearandmonth-open-type="right"] {
|
|
850
|
+
.#{$module}-weeks {
|
|
851
|
+
min-height: 6 * $width-datepicker_day_compact;
|
|
852
|
+
}
|
|
853
|
+
}
|
|
836
854
|
}
|
|
837
855
|
|
|
838
856
|
// 年月选择器
|