@douyinfe/semi-ui 2.4.0 → 2.5.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/__test__/cascader.test.js +24 -0
- package/cascader/_story/cascader.stories.js +73 -0
- package/cascader/index.tsx +5 -2
- package/datePicker/_story/v2/FixInputRangeFocus.jsx +25 -0
- package/datePicker/_story/v2/index.js +2 -1
- package/datePicker/datePicker.tsx +4 -0
- package/dist/css/semi.css +51 -27
- package/dist/css/semi.min.css +1 -1
- package/dist/umd/semi-ui.js +481 -182
- package/dist/umd/semi-ui.js.map +1 -1
- package/dist/umd/semi-ui.min.js +1 -1
- package/dist/umd/semi-ui.min.js.map +1 -1
- package/form/_story/demo.jsx +1 -0
- package/input/index.tsx +1 -0
- package/input/textarea.tsx +1 -1
- package/lib/cjs/autoComplete/index.d.ts +1 -1
- package/lib/cjs/cascader/index.js +6 -0
- package/lib/cjs/datePicker/datePicker.js +16 -8
- package/lib/cjs/dropdown/index.d.ts +1 -1
- package/lib/cjs/form/baseForm.d.ts +1 -1
- package/lib/cjs/form/field.d.ts +1 -1
- package/lib/cjs/input/index.js +2 -1
- package/lib/cjs/input/textarea.js +1 -1
- package/lib/cjs/select/index.d.ts +3 -3
- package/lib/cjs/select/index.js +32 -28
- package/lib/cjs/select/option.js +2 -2
- package/lib/cjs/select/virtualRow.js +2 -2
- package/lib/cjs/table/Table.d.ts +1 -1
- package/lib/cjs/table/Table.js +8 -2
- package/lib/cjs/table/interface.d.ts +1 -0
- package/lib/cjs/tabs/interface.d.ts +1 -1
- package/lib/cjs/timePicker/TimePicker.js +2 -1
- package/lib/cjs/tooltip/index.d.ts +1 -1
- package/lib/cjs/tooltip/index.js +6 -2
- package/lib/cjs/tree/index.d.ts +2 -0
- package/lib/cjs/tree/index.js +15 -8
- package/lib/cjs/treeSelect/index.d.ts +2 -0
- package/lib/cjs/treeSelect/index.js +64 -27
- package/lib/cjs/upload/fileCard.js +31 -22
- package/lib/cjs/upload/index.d.ts +6 -0
- package/lib/cjs/upload/index.js +15 -8
- package/lib/cjs/upload/interface.d.ts +8 -6
- package/lib/es/autoComplete/index.d.ts +1 -1
- package/lib/es/cascader/index.js +5 -0
- package/lib/es/datePicker/datePicker.js +16 -8
- package/lib/es/dropdown/index.d.ts +1 -1
- package/lib/es/form/baseForm.d.ts +1 -1
- package/lib/es/form/field.d.ts +1 -1
- package/lib/es/input/index.js +2 -1
- package/lib/es/input/textarea.js +1 -1
- package/lib/es/select/index.d.ts +3 -3
- package/lib/es/select/index.js +30 -26
- package/lib/es/select/option.js +2 -2
- package/lib/es/select/virtualRow.js +2 -2
- package/lib/es/table/Table.d.ts +1 -1
- package/lib/es/table/Table.js +10 -2
- package/lib/es/table/interface.d.ts +1 -0
- package/lib/es/tabs/interface.d.ts +1 -1
- package/lib/es/timePicker/TimePicker.js +2 -1
- package/lib/es/tooltip/index.d.ts +1 -1
- package/lib/es/tooltip/index.js +6 -2
- package/lib/es/tree/index.d.ts +2 -0
- package/lib/es/tree/index.js +15 -8
- package/lib/es/treeSelect/index.d.ts +2 -0
- package/lib/es/treeSelect/index.js +64 -27
- package/lib/es/upload/fileCard.js +31 -24
- package/lib/es/upload/index.d.ts +6 -0
- package/lib/es/upload/index.js +14 -8
- package/lib/es/upload/interface.d.ts +8 -6
- package/package.json +9 -8
- package/select/index.tsx +18 -19
- package/select/option.tsx +2 -2
- package/select/virtualRow.tsx +2 -2
- package/table/Table.tsx +7 -2
- package/table/_story/table.stories.js +1 -2
- package/table/_story/v2/FixedHeaderMerge/index.jsx +98 -0
- package/table/_story/v2/FixedResizable/index.jsx +114 -0
- package/table/_story/v2/defaultFilteredValue.tsx +123 -0
- package/table/_story/v2/index.js +5 -0
- package/table/interface.ts +1 -0
- package/tabs/interface.ts +1 -1
- package/timePicker/TimePicker.tsx +1 -0
- package/tooltip/__test__/tooltip.test.js +48 -4
- package/tooltip/_story/tooltip.stories.js +83 -1
- package/tooltip/index.tsx +4 -4
- package/tree/__test__/treeMultiple.test.js +94 -0
- package/tree/_story/tree.stories.js +169 -0
- package/tree/index.tsx +12 -5
- package/treeSelect/__test__/treeMultiple.test.js +94 -0
- package/treeSelect/_story/treeSelect.stories.js +242 -0
- package/treeSelect/index.tsx +72 -40
- package/upload/_story/upload.stories.js +22 -6
- package/upload/fileCard.tsx +23 -23
- package/upload/index.tsx +15 -6
- package/upload/interface.ts +7 -5
|
@@ -174,34 +174,52 @@ class TreeSelect extends _baseComponent.default {
|
|
|
174
174
|
this.foundation.handleSelectionEnterPress(e);
|
|
175
175
|
};
|
|
176
176
|
|
|
177
|
-
this.
|
|
177
|
+
this.hasValue = () => {
|
|
178
178
|
const {
|
|
179
|
-
|
|
179
|
+
multiple,
|
|
180
|
+
checkRelation
|
|
180
181
|
} = this.props;
|
|
181
182
|
const {
|
|
182
|
-
|
|
183
|
+
realCheckedKeys,
|
|
184
|
+
checkedKeys,
|
|
185
|
+
selectedKeys
|
|
183
186
|
} = this.state;
|
|
184
|
-
|
|
187
|
+
let hasValue = false;
|
|
188
|
+
|
|
189
|
+
if (multiple) {
|
|
190
|
+
if (checkRelation === 'related') {
|
|
191
|
+
hasValue = Boolean(checkedKeys.size);
|
|
192
|
+
} else if (checkRelation === 'unRelated') {
|
|
193
|
+
hasValue = Boolean(realCheckedKeys.size);
|
|
194
|
+
}
|
|
195
|
+
} else {
|
|
196
|
+
hasValue = Boolean(selectedKeys.length);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
return hasValue;
|
|
200
|
+
};
|
|
201
|
+
|
|
202
|
+
this.showClearBtn = () => {
|
|
185
203
|
const {
|
|
186
204
|
showClear,
|
|
187
205
|
disabled,
|
|
188
|
-
|
|
206
|
+
searchPosition
|
|
189
207
|
} = this.props;
|
|
190
208
|
const {
|
|
191
|
-
|
|
192
|
-
checkedKeys,
|
|
209
|
+
inputValue,
|
|
193
210
|
isOpen,
|
|
194
211
|
isHovering
|
|
195
212
|
} = this.state;
|
|
196
|
-
const
|
|
197
|
-
return showClear && (hasValue || triggerSearchHasInputValue) && !disabled && (isOpen || isHovering);
|
|
213
|
+
const triggerSearchHasInputValue = searchPosition === _constants.strings.SEARCH_POSITION_TRIGGER && inputValue;
|
|
214
|
+
return showClear && (this.hasValue() || triggerSearchHasInputValue) && !disabled && (isOpen || isHovering);
|
|
198
215
|
};
|
|
199
216
|
|
|
200
217
|
this.renderTagList = () => {
|
|
201
218
|
const {
|
|
202
219
|
checkedKeys,
|
|
203
220
|
keyEntities,
|
|
204
|
-
disabledKeys
|
|
221
|
+
disabledKeys,
|
|
222
|
+
realCheckedKeys
|
|
205
223
|
} = this.state;
|
|
206
224
|
const {
|
|
207
225
|
treeNodeLabelProp,
|
|
@@ -209,13 +227,21 @@ class TreeSelect extends _baseComponent.default {
|
|
|
209
227
|
disabled,
|
|
210
228
|
disableStrictly,
|
|
211
229
|
size,
|
|
230
|
+
checkRelation,
|
|
212
231
|
renderSelectedItem: propRenderSelectedItem
|
|
213
232
|
} = this.props;
|
|
214
233
|
const renderSelectedItem = (0, _isFunction2.default)(propRenderSelectedItem) ? propRenderSelectedItem : item => ({
|
|
215
234
|
isRenderInTag: true,
|
|
216
235
|
content: (0, _get2.default)(item, treeNodeLabelProp, null)
|
|
217
236
|
});
|
|
218
|
-
|
|
237
|
+
let renderKeys = [];
|
|
238
|
+
|
|
239
|
+
if (checkRelation === 'related') {
|
|
240
|
+
renderKeys = (0, _treeUtil.normalizeKeyList)([...checkedKeys], keyEntities, leafOnly);
|
|
241
|
+
} else if (checkRelation === 'unRelated') {
|
|
242
|
+
renderKeys = [...realCheckedKeys];
|
|
243
|
+
}
|
|
244
|
+
|
|
219
245
|
const tagList = []; // eslint-disable-next-line @typescript-eslint/no-shadow
|
|
220
246
|
|
|
221
247
|
(0, _forEach.default)(renderKeys).call(renderKeys, key => {
|
|
@@ -303,11 +329,6 @@ class TreeSelect extends _baseComponent.default {
|
|
|
303
329
|
searchPosition,
|
|
304
330
|
filterTreeNode
|
|
305
331
|
} = this.props;
|
|
306
|
-
const {
|
|
307
|
-
selectedKeys,
|
|
308
|
-
checkedKeys
|
|
309
|
-
} = this.state;
|
|
310
|
-
const hasValue = multiple ? Boolean(checkedKeys.size) : Boolean(selectedKeys.length);
|
|
311
332
|
const isTriggerPositionSearch = filterTreeNode && searchPosition === _constants.strings.SEARCH_POSITION_TRIGGER; // searchPosition = trigger
|
|
312
333
|
|
|
313
334
|
if (isTriggerPositionSearch) {
|
|
@@ -315,7 +336,7 @@ class TreeSelect extends _baseComponent.default {
|
|
|
315
336
|
} // searchPosition = dropdown and single seleciton
|
|
316
337
|
|
|
317
338
|
|
|
318
|
-
if (!multiple || !hasValue) {
|
|
339
|
+
if (!multiple || !this.hasValue()) {
|
|
319
340
|
const renderText = this.foundation.getRenderTextInSingle();
|
|
320
341
|
const spanCls = (0, _classnames.default)({
|
|
321
342
|
["".concat(prefixcls, "-selection-placeholder")]: !renderText
|
|
@@ -568,14 +589,23 @@ class TreeSelect extends _baseComponent.default {
|
|
|
568
589
|
size,
|
|
569
590
|
searchAutoFocus,
|
|
570
591
|
placeholder,
|
|
571
|
-
maxTagCount
|
|
592
|
+
maxTagCount,
|
|
593
|
+
checkRelation
|
|
572
594
|
} = this.props;
|
|
573
595
|
const {
|
|
574
596
|
keyEntities,
|
|
575
597
|
checkedKeys,
|
|
576
|
-
inputValue
|
|
598
|
+
inputValue,
|
|
599
|
+
realCheckedKeys
|
|
577
600
|
} = this.state;
|
|
578
|
-
|
|
601
|
+
let keyList = [];
|
|
602
|
+
|
|
603
|
+
if (checkRelation === 'related') {
|
|
604
|
+
keyList = (0, _treeUtil.normalizeKeyList)(checkedKeys, keyEntities, leafOnly);
|
|
605
|
+
} else if (checkRelation === 'unRelated') {
|
|
606
|
+
keyList = [...realCheckedKeys];
|
|
607
|
+
}
|
|
608
|
+
|
|
579
609
|
return /*#__PURE__*/_react.default.createElement(_tagInput.default, {
|
|
580
610
|
maxTagCount: maxTagCount,
|
|
581
611
|
disabled: disabled,
|
|
@@ -900,6 +930,7 @@ class TreeSelect extends _baseComponent.default {
|
|
|
900
930
|
selectedKeys: [],
|
|
901
931
|
checkedKeys: new _set.default(),
|
|
902
932
|
halfCheckedKeys: new _set.default(),
|
|
933
|
+
realCheckedKeys: new _set.default([]),
|
|
903
934
|
disabledKeys: new _set.default(),
|
|
904
935
|
motionKeys: new _set.default([]),
|
|
905
936
|
motionType: 'hide',
|
|
@@ -1020,12 +1051,16 @@ class TreeSelect extends _baseComponent.default {
|
|
|
1020
1051
|
}
|
|
1021
1052
|
|
|
1022
1053
|
if (checkedKeyValues) {
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1054
|
+
if (props.checkRelation === 'unRelated') {
|
|
1055
|
+
newState.realCheckedKeys = new _set.default(checkedKeyValues);
|
|
1056
|
+
} else if (props.checkRelation === 'related') {
|
|
1057
|
+
const {
|
|
1058
|
+
checkedKeys,
|
|
1059
|
+
halfCheckedKeys
|
|
1060
|
+
} = (0, _treeUtil.calcCheckedKeys)(checkedKeyValues, keyEntities);
|
|
1061
|
+
newState.checkedKeys = checkedKeys;
|
|
1062
|
+
newState.halfCheckedKeys = halfCheckedKeys;
|
|
1063
|
+
}
|
|
1029
1064
|
}
|
|
1030
1065
|
} // loadedKeys
|
|
1031
1066
|
|
|
@@ -1040,7 +1075,7 @@ class TreeSelect extends _baseComponent.default {
|
|
|
1040
1075
|
} // ================ disableStrictly =================
|
|
1041
1076
|
|
|
1042
1077
|
|
|
1043
|
-
if (treeData && props.disableStrictly) {
|
|
1078
|
+
if (treeData && props.disableStrictly && props.checkRelation === 'related') {
|
|
1044
1079
|
newState.disabledKeys = (0, _treeUtil.calcDisabledKeys)(keyEntities);
|
|
1045
1080
|
}
|
|
1046
1081
|
|
|
@@ -1307,6 +1342,7 @@ TreeSelect.propTypes = {
|
|
|
1307
1342
|
optionListStyle: _propTypes.default.object,
|
|
1308
1343
|
searchRender: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
|
|
1309
1344
|
renderSelectedItem: _propTypes.default.func,
|
|
1345
|
+
checkRelation: _propTypes.default.string,
|
|
1310
1346
|
'aria-label': _propTypes.default.string
|
|
1311
1347
|
};
|
|
1312
1348
|
TreeSelect.defaultProps = {
|
|
@@ -1335,6 +1371,7 @@ TreeSelect.defaultProps = {
|
|
|
1335
1371
|
expandAction: false,
|
|
1336
1372
|
clickToHide: true,
|
|
1337
1373
|
searchAutoFocus: false,
|
|
1374
|
+
checkRelation: 'related',
|
|
1338
1375
|
'aria-label': 'TreeSelect'
|
|
1339
1376
|
};
|
|
1340
1377
|
var _default = TreeSelect;
|
|
@@ -30,7 +30,7 @@ var _semiIcons = require("@douyinfe/semi-icons");
|
|
|
30
30
|
|
|
31
31
|
var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
|
|
32
32
|
|
|
33
|
-
var _index = _interopRequireDefault(require("../
|
|
33
|
+
var _index = _interopRequireDefault(require("../button/index"));
|
|
34
34
|
|
|
35
35
|
var _index2 = _interopRequireDefault(require("../progress/index"));
|
|
36
36
|
|
|
@@ -200,6 +200,7 @@ class FileCard extends _react.PureComponent {
|
|
|
200
200
|
onPreviewClick,
|
|
201
201
|
showPicInfo,
|
|
202
202
|
renderPicInfo,
|
|
203
|
+
renderPicPreviewIcon,
|
|
203
204
|
renderThumbnail,
|
|
204
205
|
name,
|
|
205
206
|
index
|
|
@@ -207,6 +208,7 @@ class FileCard extends _react.PureComponent {
|
|
|
207
208
|
const showProgress = status === _constants.strings.FILE_STATUS_UPLOADING && percent !== 100;
|
|
208
209
|
const showRetry = status === _constants.strings.FILE_STATUS_UPLOAD_FAIL && this.props.showRetry;
|
|
209
210
|
const showReplace = status === _constants.strings.FILE_STATUS_SUCCESS && this.props.showReplace;
|
|
211
|
+
const showPreview = status === _constants.strings.FILE_STATUS_SUCCESS && !this.props.showReplace;
|
|
210
212
|
const filePicCardCls = (0, _classnames.default)({
|
|
211
213
|
["".concat(prefixCls, "-picture-file-card")]: true,
|
|
212
214
|
["".concat(prefixCls, "-picture-file-card-disabled")]: disabled,
|
|
@@ -214,7 +216,6 @@ class FileCard extends _react.PureComponent {
|
|
|
214
216
|
["".concat(prefixCls, "-picture-file-card-error")]: status === _constants.strings.FILE_STATUS_UPLOAD_FAIL,
|
|
215
217
|
["".concat(prefixCls, "-picture-file-card-uploading")]: showProgress
|
|
216
218
|
});
|
|
217
|
-
const closeCls = "".concat(prefixCls, "-picture-file-card-close");
|
|
218
219
|
|
|
219
220
|
const retry = /*#__PURE__*/_react.default.createElement("div", {
|
|
220
221
|
role: "button",
|
|
@@ -240,6 +241,19 @@ class FileCard extends _react.PureComponent {
|
|
|
240
241
|
className: "".concat(prefixCls, "-picture-file-card-icon-replace")
|
|
241
242
|
})));
|
|
242
243
|
|
|
244
|
+
const preview = /*#__PURE__*/_react.default.createElement("div", {
|
|
245
|
+
className: "".concat(prefixCls, "-picture-file-card-preview")
|
|
246
|
+
}, typeof renderPicPreviewIcon === 'function' ? renderPicPreviewIcon(this.props) : null);
|
|
247
|
+
|
|
248
|
+
const close = /*#__PURE__*/_react.default.createElement("div", {
|
|
249
|
+
role: "button",
|
|
250
|
+
tabIndex: 0,
|
|
251
|
+
className: "".concat(prefixCls, "-picture-file-card-close"),
|
|
252
|
+
onClick: e => this.onRemove(e)
|
|
253
|
+
}, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, {
|
|
254
|
+
className: "".concat(prefixCls, "-picture-file-card-icon-close")
|
|
255
|
+
}));
|
|
256
|
+
|
|
243
257
|
const picInfo = typeof renderPicInfo === 'function' ? renderPicInfo(this.props) : /*#__PURE__*/_react.default.createElement("div", {
|
|
244
258
|
className: "".concat(prefixCls, "-picture-file-card-pic-info")
|
|
245
259
|
}, index + 1);
|
|
@@ -258,14 +272,7 @@ class FileCard extends _react.PureComponent {
|
|
|
258
272
|
size: "small",
|
|
259
273
|
orbitStroke: '#FFF',
|
|
260
274
|
"aria-label": "uploading file progress"
|
|
261
|
-
}) : null, showRetry ? retry : null, showReplace && replace, showPicInfo && picInfo, !disabled &&
|
|
262
|
-
className: closeCls,
|
|
263
|
-
onClick: e => this.onRemove(e)
|
|
264
|
-
}, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
|
|
265
|
-
tabIndex: 0,
|
|
266
|
-
role: "button",
|
|
267
|
-
size: "extra-small"
|
|
268
|
-
})), this.renderPicValidateMsg());
|
|
275
|
+
}) : null, showRetry ? retry : null, showReplace && replace, showPreview && preview, showPicInfo && picInfo, !disabled && close, this.renderPicValidateMsg());
|
|
269
276
|
}
|
|
270
277
|
|
|
271
278
|
renderFile(locale) {
|
|
@@ -280,7 +287,8 @@ class FileCard extends _react.PureComponent {
|
|
|
280
287
|
previewFile,
|
|
281
288
|
status,
|
|
282
289
|
style,
|
|
283
|
-
onPreviewClick
|
|
290
|
+
onPreviewClick,
|
|
291
|
+
renderFileOperation
|
|
284
292
|
} = this.props;
|
|
285
293
|
const fileCardCls = (0, _classnames.default)({
|
|
286
294
|
["".concat(prefixCls, "-file-card")]: true,
|
|
@@ -310,6 +318,14 @@ class FileCard extends _react.PureComponent {
|
|
|
310
318
|
previewContent = previewFile(this.props);
|
|
311
319
|
}
|
|
312
320
|
|
|
321
|
+
const operation = typeof renderFileOperation === 'function' ? renderFileOperation(this.props) : /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
322
|
+
onClick: e => this.onRemove(e),
|
|
323
|
+
type: "tertiary",
|
|
324
|
+
icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null),
|
|
325
|
+
theme: "borderless",
|
|
326
|
+
size: "small",
|
|
327
|
+
className: closeCls
|
|
328
|
+
});
|
|
313
329
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
314
330
|
role: "listitem",
|
|
315
331
|
className: fileCardCls,
|
|
@@ -352,29 +368,22 @@ class FileCard extends _react.PureComponent {
|
|
|
352
368
|
tabIndex: 0,
|
|
353
369
|
className: "".concat(infoCls, "-retry"),
|
|
354
370
|
onClick: e => this.onRetry(e)
|
|
355
|
-
}, locale.retry) : null)),
|
|
356
|
-
onClick: e => this.onRemove(e),
|
|
357
|
-
type: "tertiary",
|
|
358
|
-
icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null),
|
|
359
|
-
theme: "borderless",
|
|
360
|
-
size: "small",
|
|
361
|
-
className: closeCls
|
|
362
|
-
}));
|
|
371
|
+
}, locale.retry) : null)), operation);
|
|
363
372
|
}
|
|
364
373
|
|
|
365
374
|
onRemove(e) {
|
|
366
375
|
e.stopPropagation();
|
|
367
|
-
this.props.onRemove(
|
|
376
|
+
this.props.onRemove();
|
|
368
377
|
}
|
|
369
378
|
|
|
370
379
|
onReplace(e) {
|
|
371
380
|
e.stopPropagation();
|
|
372
|
-
this.props.onReplace(
|
|
381
|
+
this.props.onReplace();
|
|
373
382
|
}
|
|
374
383
|
|
|
375
384
|
onRetry(e) {
|
|
376
385
|
e.stopPropagation();
|
|
377
|
-
this.props.onRetry(
|
|
386
|
+
this.props.onRetry();
|
|
378
387
|
}
|
|
379
388
|
|
|
380
389
|
render() {
|
|
@@ -29,6 +29,7 @@ export interface UploadProps {
|
|
|
29
29
|
fileList?: Array<FileItem>;
|
|
30
30
|
fileName?: string;
|
|
31
31
|
headers?: Record<string, any> | ((file: File) => Record<string, string>);
|
|
32
|
+
hotSpotLocation?: 'start' | 'end';
|
|
32
33
|
itemStyle?: CSSProperties;
|
|
33
34
|
limit?: number;
|
|
34
35
|
listType?: UploadListType;
|
|
@@ -56,6 +57,8 @@ export interface UploadProps {
|
|
|
56
57
|
renderFileItem?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
|
|
57
58
|
renderPicInfo?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
|
|
58
59
|
renderThumbnail?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
|
|
60
|
+
renderPicPreviewIcon?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
|
|
61
|
+
renderFileOperation?: (fileItem: RenderFileItemProps) => ReactNode;
|
|
59
62
|
showClear?: boolean;
|
|
60
63
|
showPicInfo?: boolean;
|
|
61
64
|
showReplace?: boolean;
|
|
@@ -99,6 +102,7 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
|
|
|
99
102
|
fileList: PropTypes.Requireable<any[]>;
|
|
100
103
|
fileName: PropTypes.Requireable<string>;
|
|
101
104
|
headers: PropTypes.Requireable<object>;
|
|
105
|
+
hotSpotLocation: PropTypes.Requireable<string>;
|
|
102
106
|
itemStyle: PropTypes.Requireable<object>;
|
|
103
107
|
limit: PropTypes.Requireable<number>;
|
|
104
108
|
listType: PropTypes.Requireable<"picture" | "list">;
|
|
@@ -124,6 +128,8 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
|
|
|
124
128
|
prompt: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
125
129
|
promptPosition: PropTypes.Requireable<"left" | "right" | "bottom">;
|
|
126
130
|
renderFileItem: PropTypes.Requireable<(...args: any[]) => any>;
|
|
131
|
+
renderPicPreviewIcon: PropTypes.Requireable<(...args: any[]) => any>;
|
|
132
|
+
renderFileOperation: PropTypes.Requireable<(...args: any[]) => any>;
|
|
127
133
|
renderPicInfo: PropTypes.Requireable<(...args: any[]) => any>;
|
|
128
134
|
renderThumbnail: PropTypes.Requireable<(...args: any[]) => any>;
|
|
129
135
|
showClear: PropTypes.Requireable<boolean>;
|
package/lib/cjs/upload/index.js
CHANGED
|
@@ -16,6 +16,8 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
|
|
|
16
16
|
|
|
17
17
|
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
|
|
18
18
|
|
|
19
|
+
var _pick2 = _interopRequireDefault(require("lodash/pick"));
|
|
20
|
+
|
|
19
21
|
var _noop2 = _interopRequireDefault(require("lodash/noop"));
|
|
20
22
|
|
|
21
23
|
var _react = _interopRequireDefault(require("react"));
|
|
@@ -136,14 +138,14 @@ class Upload extends _baseComponent.default {
|
|
|
136
138
|
previewFile,
|
|
137
139
|
listType,
|
|
138
140
|
itemStyle,
|
|
139
|
-
showRetry,
|
|
140
141
|
showPicInfo,
|
|
141
142
|
renderPicInfo,
|
|
143
|
+
renderPicPreviewIcon,
|
|
144
|
+
renderFileOperation,
|
|
142
145
|
renderFileItem,
|
|
143
146
|
renderThumbnail,
|
|
144
147
|
disabled,
|
|
145
|
-
onPreviewClick
|
|
146
|
-
showReplace
|
|
148
|
+
onPreviewClick
|
|
147
149
|
} = this.props;
|
|
148
150
|
|
|
149
151
|
const onRemove = () => this.remove(file);
|
|
@@ -156,20 +158,20 @@ class Upload extends _baseComponent.default {
|
|
|
156
158
|
this.replace(index);
|
|
157
159
|
};
|
|
158
160
|
|
|
159
|
-
const fileCardProps = (0, _assign.default)((0, _assign.default)({}, file), {
|
|
161
|
+
const fileCardProps = (0, _assign.default)((0, _assign.default)((0, _assign.default)({}, (0, _pick2.default)(this.props, ['showRetry', 'showReplace', ''])), file), {
|
|
160
162
|
previewFile,
|
|
161
163
|
listType,
|
|
162
164
|
onRemove,
|
|
163
165
|
onRetry,
|
|
164
166
|
index,
|
|
165
167
|
key: uid || (0, _concat.default)(_context = "".concat(name)).call(_context, index),
|
|
166
|
-
showRetry: typeof file.showRetry !== 'undefined' ? file.showRetry : showRetry,
|
|
167
168
|
style: itemStyle,
|
|
168
169
|
disabled,
|
|
169
170
|
showPicInfo,
|
|
170
171
|
renderPicInfo,
|
|
172
|
+
renderPicPreviewIcon,
|
|
173
|
+
renderFileOperation,
|
|
171
174
|
renderThumbnail,
|
|
172
|
-
showReplace: typeof file.showReplace !== 'undefined' ? file.showReplace : showReplace,
|
|
173
175
|
onReplace,
|
|
174
176
|
onPreviewClick: typeof onPreviewClick !== 'undefined' ? () => this.foundation.handlePreviewClick(file) : undefined
|
|
175
177
|
});
|
|
@@ -211,7 +213,8 @@ class Upload extends _baseComponent.default {
|
|
|
211
213
|
limit,
|
|
212
214
|
disabled,
|
|
213
215
|
children,
|
|
214
|
-
draggable
|
|
216
|
+
draggable,
|
|
217
|
+
hotSpotLocation
|
|
215
218
|
} = this.props;
|
|
216
219
|
const {
|
|
217
220
|
fileList: stateFileList,
|
|
@@ -269,7 +272,7 @@ class Upload extends _baseComponent.default {
|
|
|
269
272
|
className: mainCls,
|
|
270
273
|
role: "list",
|
|
271
274
|
"aria-label": "picture list"
|
|
272
|
-
}, (0, _map.default)(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)), showAddTriggerInList ? addContent : null)));
|
|
275
|
+
}, showAddTriggerInList && hotSpotLocation === 'start' ? addContent : null, (0, _map.default)(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)), showAddTriggerInList && hotSpotLocation === 'end' ? addContent : null)));
|
|
273
276
|
};
|
|
274
277
|
|
|
275
278
|
this.renderFileListDefault = () => {
|
|
@@ -609,6 +612,7 @@ Upload.propTypes = {
|
|
|
609
612
|
fileList: _propTypes.default.array,
|
|
610
613
|
fileName: _propTypes.default.string,
|
|
611
614
|
headers: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]),
|
|
615
|
+
hotSpotLocation: _propTypes.default.oneOf(['start', 'end']),
|
|
612
616
|
itemStyle: _propTypes.default.object,
|
|
613
617
|
limit: _propTypes.default.number,
|
|
614
618
|
listType: _propTypes.default.oneOf(_constants.strings.LIST_TYPE),
|
|
@@ -634,6 +638,8 @@ Upload.propTypes = {
|
|
|
634
638
|
prompt: _propTypes.default.node,
|
|
635
639
|
promptPosition: _propTypes.default.oneOf(_constants.strings.PROMPT_POSITION),
|
|
636
640
|
renderFileItem: _propTypes.default.func,
|
|
641
|
+
renderPicPreviewIcon: _propTypes.default.func,
|
|
642
|
+
renderFileOperation: _propTypes.default.func,
|
|
637
643
|
renderPicInfo: _propTypes.default.func,
|
|
638
644
|
renderThumbnail: _propTypes.default.func,
|
|
639
645
|
showClear: _propTypes.default.bool,
|
|
@@ -653,6 +659,7 @@ Upload.defaultProps = {
|
|
|
653
659
|
defaultFileList: [],
|
|
654
660
|
disabled: false,
|
|
655
661
|
listType: 'list',
|
|
662
|
+
hotSpotLocation: 'end',
|
|
656
663
|
multiple: false,
|
|
657
664
|
onAcceptInvalid: _noop2.default,
|
|
658
665
|
onChange: _noop2.default,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ReactNode, CSSProperties
|
|
1
|
+
import { ReactNode, CSSProperties } from 'react';
|
|
2
2
|
import { BaseFileItem } from '@douyinfe/semi-foundation/lib/cjs/upload/foundation';
|
|
3
3
|
import { strings } from '@douyinfe/semi-foundation/lib/cjs/upload/constants';
|
|
4
4
|
import { ArrayElement } from '../_base/base';
|
|
@@ -45,14 +45,16 @@ export interface RenderFileItemProps extends FileItem {
|
|
|
45
45
|
index?: number;
|
|
46
46
|
previewFile?: (fileItem: RenderFileItemProps) => ReactNode;
|
|
47
47
|
listType: UploadListType;
|
|
48
|
-
onRemove: (
|
|
49
|
-
onRetry: (
|
|
50
|
-
onReplace: (
|
|
48
|
+
onRemove: () => void;
|
|
49
|
+
onRetry: () => void;
|
|
50
|
+
onReplace: () => void;
|
|
51
51
|
key: string;
|
|
52
52
|
showPicInfo?: boolean;
|
|
53
53
|
renderPicInfo?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
|
|
54
|
-
|
|
55
|
-
|
|
54
|
+
renderPicPreviewIcon?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
|
|
55
|
+
renderFileOperation?: (fileItem: RenderFileItemProps) => ReactNode;
|
|
56
|
+
showRetry?: boolean;
|
|
57
|
+
showReplace?: boolean;
|
|
56
58
|
style?: CSSProperties;
|
|
57
59
|
disabled: boolean;
|
|
58
60
|
onPreviewClick: () => void;
|
|
@@ -113,7 +113,7 @@ declare class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<Au
|
|
|
113
113
|
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
114
114
|
onFocus: PropTypes.Requireable<(...args: any[]) => any>;
|
|
115
115
|
onChange: PropTypes.Requireable<(...args: any[]) => any>;
|
|
116
|
-
position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
|
|
116
|
+
position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
|
|
117
117
|
placeholder: PropTypes.Requireable<string>;
|
|
118
118
|
prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
119
119
|
onChangeWithObject: PropTypes.Requireable<boolean>;
|
package/lib/es/cascader/index.js
CHANGED
|
@@ -5,6 +5,7 @@ import _isFunction from "lodash/isFunction";
|
|
|
5
5
|
import _isEmpty from "lodash/isEmpty";
|
|
6
6
|
import _isString from "lodash/isString";
|
|
7
7
|
import _isEqual from "lodash/isEqual";
|
|
8
|
+
import _isSet from "lodash/isSet";
|
|
8
9
|
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
|
9
10
|
import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
|
|
10
11
|
import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
|
|
@@ -722,6 +723,10 @@ class Cascader extends BaseComponent {
|
|
|
722
723
|
realKeys = formatKeys;
|
|
723
724
|
}
|
|
724
725
|
|
|
726
|
+
if (_isSet(realKeys)) {
|
|
727
|
+
realKeys = [...realKeys];
|
|
728
|
+
}
|
|
729
|
+
|
|
725
730
|
const calRes = calcCheckedKeys(_flatten(realKeys), keyEntities);
|
|
726
731
|
const checkedKeys = new _Set(calRes.checkedKeys);
|
|
727
732
|
const halfCheckedKeys = new _Set(calRes.halfCheckedKeys); // disableStrictly
|
|
@@ -401,6 +401,10 @@ export default class DatePicker extends BaseComponent {
|
|
|
401
401
|
|
|
402
402
|
if (prevProps.open !== this.props.open) {
|
|
403
403
|
this.foundation.initPanelOpenStatus();
|
|
404
|
+
|
|
405
|
+
if (!this.props.open) {
|
|
406
|
+
this.foundation.clearRangeInputFocus();
|
|
407
|
+
}
|
|
404
408
|
}
|
|
405
409
|
}
|
|
406
410
|
|
|
@@ -572,14 +576,18 @@ export default class DatePicker extends BaseComponent {
|
|
|
572
576
|
onRangeEndTabPress: this.handleRangeEndTabPress
|
|
573
577
|
});
|
|
574
578
|
|
|
575
|
-
return
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
579
|
+
return (
|
|
580
|
+
/*#__PURE__*/
|
|
581
|
+
// eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
|
|
582
|
+
React.createElement("div", {
|
|
583
|
+
onClick: this.handleTriggerWrapperClick,
|
|
584
|
+
className: inputCls
|
|
585
|
+
}, typeof triggerRender === 'function' ? /*#__PURE__*/React.createElement(Trigger, _Object$assign({}, props, {
|
|
586
|
+
triggerRender: triggerRender,
|
|
587
|
+
componentName: "DatePicker",
|
|
588
|
+
componentProps: _Object$assign({}, this.props)
|
|
589
|
+
})) : /*#__PURE__*/React.createElement(DateInput, _Object$assign({}, props)))
|
|
590
|
+
);
|
|
583
591
|
}
|
|
584
592
|
|
|
585
593
|
render() {
|
|
@@ -58,7 +58,7 @@ declare class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
|
|
|
58
58
|
render: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
59
59
|
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
60
60
|
visible: PropTypes.Requireable<boolean>;
|
|
61
|
-
position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
|
|
61
|
+
position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
|
|
62
62
|
getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
|
|
63
63
|
mouseEnterDelay: PropTypes.Requireable<number>;
|
|
64
64
|
mouseLeaveDelay: PropTypes.Requireable<number>;
|
|
@@ -80,7 +80,7 @@ declare class Form extends BaseComponent<BaseFormProps, BaseFormState> {
|
|
|
80
80
|
emptyContent?: React.ReactNode;
|
|
81
81
|
onDropdownVisibleChange?: (visible: boolean) => void;
|
|
82
82
|
zIndex?: number;
|
|
83
|
-
position?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver";
|
|
83
|
+
position?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
|
|
84
84
|
onSearch?: (value: string) => void;
|
|
85
85
|
dropdownClassName?: string;
|
|
86
86
|
dropdownStyle?: React.CSSProperties;
|
package/lib/es/form/field.d.ts
CHANGED
|
@@ -28,7 +28,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
|
|
|
28
28
|
emptyContent?: import("react").ReactNode;
|
|
29
29
|
onDropdownVisibleChange?: (visible: boolean) => void;
|
|
30
30
|
zIndex?: number;
|
|
31
|
-
position?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver";
|
|
31
|
+
position?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
|
|
32
32
|
onSearch?: (value: string) => void;
|
|
33
33
|
dropdownClassName?: string;
|
|
34
34
|
dropdownStyle?: import("react").CSSProperties;
|
package/lib/es/input/index.js
CHANGED
|
@@ -337,6 +337,7 @@ class Input extends BaseComponent {
|
|
|
337
337
|
prefix,
|
|
338
338
|
mode,
|
|
339
339
|
insetLabel,
|
|
340
|
+
insetLabelId,
|
|
340
341
|
validateStatus,
|
|
341
342
|
type,
|
|
342
343
|
readonly,
|
|
@@ -352,7 +353,7 @@ class Input extends BaseComponent {
|
|
|
352
353
|
maxLength,
|
|
353
354
|
getValueLength
|
|
354
355
|
} = _a,
|
|
355
|
-
rest = __rest(_a, ["addonAfter", "addonBefore", "autofocus", "className", "disabled", "placeholder", "prefix", "mode", "insetLabel", "validateStatus", "type", "readonly", "size", "suffix", "style", "showClear", "onEnterPress", "onClear", "hideSuffix", "inputStyle", "forwardRef", "maxLength", "getValueLength"]);
|
|
356
|
+
rest = __rest(_a, ["addonAfter", "addonBefore", "autofocus", "className", "disabled", "placeholder", "prefix", "mode", "insetLabel", "insetLabelId", "validateStatus", "type", "readonly", "size", "suffix", "style", "showClear", "onEnterPress", "onClear", "hideSuffix", "inputStyle", "forwardRef", "maxLength", "getValueLength"]);
|
|
356
357
|
|
|
357
358
|
const {
|
|
358
359
|
value,
|
package/lib/es/input/textarea.js
CHANGED
|
@@ -255,7 +255,7 @@ class TextArea extends BaseComponent {
|
|
|
255
255
|
["".concat(prefixCls, "-textarea-showClear")]: showClear
|
|
256
256
|
});
|
|
257
257
|
|
|
258
|
-
const itemProps = _Object$assign(_Object$assign({}, _omit(rest, 'insetLabel', 'getValueLength', 'onClear', 'showClear')), {
|
|
258
|
+
const itemProps = _Object$assign(_Object$assign({}, _omit(rest, 'insetLabel', 'insetLabelId', 'getValueLength', 'onClear', 'showClear')), {
|
|
259
259
|
className: itemCls,
|
|
260
260
|
disabled,
|
|
261
261
|
readOnly: readonly,
|
package/lib/es/select/index.d.ts
CHANGED
|
@@ -165,7 +165,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
|
|
|
165
165
|
emptyContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
166
166
|
onDropdownVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
|
|
167
167
|
zIndex: PropTypes.Requireable<number>;
|
|
168
|
-
position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
|
|
168
|
+
position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
|
|
169
169
|
onSearch: PropTypes.Requireable<(...args: any[]) => any>;
|
|
170
170
|
getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
|
|
171
171
|
dropdownClassName: PropTypes.Requireable<string>;
|
|
@@ -243,8 +243,8 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
|
|
|
243
243
|
renderOption(option: OptionProps, optionIndex: number, style?: React.CSSProperties): any;
|
|
244
244
|
renderCreateOption(option: OptionProps, isFocused: boolean, optionIndex: number, style: React.CSSProperties): JSX.Element;
|
|
245
245
|
onOptionHover(optionIndex: number): void;
|
|
246
|
-
renderWithGroup(
|
|
247
|
-
renderVirtualizeList(
|
|
246
|
+
renderWithGroup(visibleOptions: OptionProps[]): JSX.Element[];
|
|
247
|
+
renderVirtualizeList(visibleOptions: OptionProps[]): JSX.Element;
|
|
248
248
|
renderOptions(children?: React.ReactNode): JSX.Element;
|
|
249
249
|
renderSingleSelection(selections: Map<OptionProps['label'], any>, filterable: boolean): JSX.Element;
|
|
250
250
|
renderMultipleSelection(selections: Map<OptionProps['label'], any>, filterable: boolean): JSX.Element;
|