@douyinfe/semi-ui 2.3.1 → 2.5.0-beta.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/RenderDate/index.js +13 -3
- package/datePicker/_story/RenderFullDate/index.js +36 -14
- package/datePicker/_story/RenderFullDate/index.scss +1 -1
- package/datePicker/_story/datePicker.stories.js +19 -11
- package/datePicker/_story/v2/PanelOpen.jsx +39 -0
- package/datePicker/_story/v2/index.js +2 -1
- package/datePicker/datePicker.tsx +1 -0
- package/dist/css/semi.css +84 -36
- package/dist/css/semi.min.css +1 -1
- package/dist/umd/semi-ui.js +487 -170
- 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 +6 -4
- package/inputNumber/__test__/inputNumber.test.js +36 -8
- package/lib/cjs/autoComplete/index.d.ts +1 -1
- package/lib/cjs/cascader/index.js +6 -0
- package/lib/cjs/datePicker/datePicker.js +12 -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 +5 -3
- package/lib/cjs/navigation/Item.js +1 -1
- package/lib/cjs/navigation/SubNav.js +1 -1
- package/lib/cjs/scrollList/scrollItem.d.ts +5 -1
- package/lib/cjs/scrollList/scrollItem.js +7 -0
- package/lib/cjs/select/index.d.ts +1 -1
- package/lib/cjs/select/index.js +1 -1
- package/lib/cjs/select/option.js +2 -2
- package/lib/cjs/table/Table.d.ts +1 -1
- package/lib/cjs/table/Table.js +17 -7
- package/lib/cjs/table/interface.d.ts +1 -0
- package/lib/cjs/tabs/interface.d.ts +1 -1
- package/lib/cjs/timePicker/TimePicker.d.ts +2 -0
- package/lib/cjs/timePicker/TimePicker.js +4 -4
- package/lib/cjs/timePicker/index.d.ts +1 -0
- package/lib/cjs/tooltip/index.d.ts +1 -1
- package/lib/cjs/tree/index.d.ts +2 -0
- package/lib/cjs/tree/index.js +15 -8
- package/lib/cjs/tree/treeNode.js +10 -1
- package/lib/cjs/treeSelect/index.d.ts +2 -0
- package/lib/cjs/treeSelect/index.js +75 -30
- package/lib/cjs/typography/util.js +0 -1
- 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 +12 -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 +5 -3
- package/lib/es/navigation/Item.js +1 -1
- package/lib/es/navigation/SubNav.js +1 -1
- package/lib/es/scrollList/scrollItem.d.ts +5 -1
- package/lib/es/scrollList/scrollItem.js +7 -0
- package/lib/es/select/index.d.ts +1 -1
- package/lib/es/select/index.js +1 -1
- package/lib/es/select/option.js +2 -2
- package/lib/es/table/Table.d.ts +1 -1
- package/lib/es/table/Table.js +19 -7
- package/lib/es/table/interface.d.ts +1 -0
- package/lib/es/tabs/interface.d.ts +1 -1
- package/lib/es/timePicker/TimePicker.d.ts +2 -0
- package/lib/es/timePicker/TimePicker.js +4 -4
- package/lib/es/timePicker/index.d.ts +1 -0
- package/lib/es/tooltip/index.d.ts +1 -1
- package/lib/es/tree/index.d.ts +2 -0
- package/lib/es/tree/index.js +15 -8
- package/lib/es/tree/treeNode.js +9 -1
- package/lib/es/treeSelect/index.d.ts +2 -0
- package/lib/es/treeSelect/index.js +76 -31
- package/lib/es/typography/util.js +0 -1
- 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/navigation/Item.tsx +1 -1
- package/navigation/SubNav.tsx +1 -1
- package/package.json +9 -8
- package/scrollList/scrollItem.tsx +10 -3
- package/select/index.tsx +6 -1
- package/select/option.tsx +2 -2
- package/table/Table.tsx +16 -8
- package/table/_story/table.stories.js +1 -0
- package/table/_story/v2/FixedColumnsChange/index.jsx +104 -0
- package/table/_story/v2/FixedHeaderMerge/index.jsx +98 -0
- package/table/_story/v2/FixedZIndex/index.jsx +87 -0
- package/table/_story/v2/defaultFilteredValue.tsx +123 -0
- package/table/_story/v2/index.js +4 -0
- package/table/interface.ts +1 -0
- package/tabs/interface.ts +1 -1
- package/timePicker/TimePicker.tsx +4 -1
- package/timePicker/__test__/timePicker.test.js +42 -3
- package/timePicker/_story/timepicker.stories.js +18 -0
- package/tooltip/_story/tooltip.stories.js +83 -1
- package/tree/__test__/treeMultiple.test.js +94 -0
- package/tree/_story/tree.stories.js +169 -0
- package/tree/index.tsx +12 -5
- package/tree/treeNode.tsx +9 -2
- package/treeSelect/__test__/treeMultiple.test.js +94 -0
- package/treeSelect/__test__/treeSelect.test.js +157 -0
- package/treeSelect/_story/treeSelect.stories.js +242 -0
- package/treeSelect/index.tsx +93 -52
- package/typography/_story/typography.stories.js +8 -0
- package/typography/util.tsx +0 -1
- 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
|
@@ -168,6 +168,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
|
|
|
168
168
|
optionListStyle: PropTypes.Requireable<object>;
|
|
169
169
|
searchRender: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
|
|
170
170
|
renderSelectedItem: PropTypes.Requireable<(...args: any[]) => any>;
|
|
171
|
+
checkRelation: PropTypes.Requireable<string>;
|
|
171
172
|
'aria-label': PropTypes.Requireable<string>;
|
|
172
173
|
};
|
|
173
174
|
static defaultProps: Partial<TreeSelectProps>;
|
|
@@ -192,6 +193,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
|
|
|
192
193
|
removeTag: (removedKey: TreeNodeData['key']) => void;
|
|
193
194
|
handleClick: (e: React.MouseEvent) => void;
|
|
194
195
|
handleSelectionEnterPress: (e: React.KeyboardEvent<HTMLDivElement>) => void;
|
|
196
|
+
hasValue: () => boolean;
|
|
195
197
|
showClearBtn: () => boolean;
|
|
196
198
|
renderTagList: () => React.ReactNode[];
|
|
197
199
|
/**
|
|
@@ -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',
|
|
@@ -950,7 +981,7 @@ class TreeSelect extends _baseComponent.default {
|
|
|
950
981
|
} // if treeData keys changes, we won't show animation
|
|
951
982
|
|
|
952
983
|
|
|
953
|
-
if (treeData && props.motion && !(0, _isEqual2.default)(
|
|
984
|
+
if (treeData && props.motion && !(0, _isEqual2.default)((0, _keys.default)(newState.keyEntities), (0, _keys.default)(prevState.keyEntities))) {
|
|
954
985
|
if (prevProps && props.motion) {
|
|
955
986
|
newState.motionKeys = new _set.default([]);
|
|
956
987
|
newState.motionType = null;
|
|
@@ -996,7 +1027,11 @@ class TreeSelect extends _baseComponent.default {
|
|
|
996
1027
|
newState.selectedKeys = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject), valueEntities, isMultiple);
|
|
997
1028
|
} else if (treeData) {
|
|
998
1029
|
// If `treeData` changed, we also need check it
|
|
999
|
-
|
|
1030
|
+
if (props.value) {
|
|
1031
|
+
newState.selectedKeys = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject) || '', valueEntities, isMultiple);
|
|
1032
|
+
} else {
|
|
1033
|
+
newState.selectedKeys = (0, _treeUtil.updateKeys)(prevState.selectedKeys, keyEntities);
|
|
1034
|
+
}
|
|
1000
1035
|
}
|
|
1001
1036
|
} else {
|
|
1002
1037
|
// checkedKeys: multiple mode controlled || data changed
|
|
@@ -1008,16 +1043,24 @@ class TreeSelect extends _baseComponent.default {
|
|
|
1008
1043
|
checkedKeyValues = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject), valueEntities, isMultiple);
|
|
1009
1044
|
} else if (treeData) {
|
|
1010
1045
|
// If `treeData` changed, we also need check it
|
|
1011
|
-
|
|
1046
|
+
if (props.value) {
|
|
1047
|
+
checkedKeyValues = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject) || [], valueEntities, isMultiple);
|
|
1048
|
+
} else {
|
|
1049
|
+
checkedKeyValues = (0, _treeUtil.updateKeys)(prevState.checkedKeys, keyEntities);
|
|
1050
|
+
}
|
|
1012
1051
|
}
|
|
1013
1052
|
|
|
1014
1053
|
if (checkedKeyValues) {
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
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
|
+
}
|
|
1021
1064
|
}
|
|
1022
1065
|
} // loadedKeys
|
|
1023
1066
|
|
|
@@ -1032,7 +1075,7 @@ class TreeSelect extends _baseComponent.default {
|
|
|
1032
1075
|
} // ================ disableStrictly =================
|
|
1033
1076
|
|
|
1034
1077
|
|
|
1035
|
-
if (treeData && props.disableStrictly) {
|
|
1078
|
+
if (treeData && props.disableStrictly && props.checkRelation === 'related') {
|
|
1036
1079
|
newState.disabledKeys = (0, _treeUtil.calcDisabledKeys)(keyEntities);
|
|
1037
1080
|
}
|
|
1038
1081
|
|
|
@@ -1299,6 +1342,7 @@ TreeSelect.propTypes = {
|
|
|
1299
1342
|
optionListStyle: _propTypes.default.object,
|
|
1300
1343
|
searchRender: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
|
|
1301
1344
|
renderSelectedItem: _propTypes.default.func,
|
|
1345
|
+
checkRelation: _propTypes.default.string,
|
|
1302
1346
|
'aria-label': _propTypes.default.string
|
|
1303
1347
|
};
|
|
1304
1348
|
TreeSelect.defaultProps = {
|
|
@@ -1327,6 +1371,7 @@ TreeSelect.defaultProps = {
|
|
|
1327
1371
|
expandAction: false,
|
|
1328
1372
|
clickToHide: true,
|
|
1329
1373
|
searchAutoFocus: false,
|
|
1374
|
+
checkRelation: 'related',
|
|
1330
1375
|
'aria-label': 'TreeSelect'
|
|
1331
1376
|
};
|
|
1332
1377
|
var _default = TreeSelect;
|
|
@@ -77,7 +77,6 @@ const getRenderText = function (originEle, rows) {
|
|
|
77
77
|
ellipsisContainer.style.zIndex = '-1000'; // clean up css overflow
|
|
78
78
|
|
|
79
79
|
ellipsisContainer.style.textOverflow = 'clip';
|
|
80
|
-
ellipsisContainer.style.whiteSpace = 'normal';
|
|
81
80
|
ellipsisContainer.style.webkitLineClamp = 'none'; // Render fake container
|
|
82
81
|
|
|
83
82
|
_reactDom.default.render( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), ellipsisContainer); // Check if ellipsis in measure div is height enough for content
|
|
@@ -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
|
|
@@ -572,14 +572,18 @@ export default class DatePicker extends BaseComponent {
|
|
|
572
572
|
onRangeEndTabPress: this.handleRangeEndTabPress
|
|
573
573
|
});
|
|
574
574
|
|
|
575
|
-
return
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
575
|
+
return (
|
|
576
|
+
/*#__PURE__*/
|
|
577
|
+
// eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
|
|
578
|
+
React.createElement("div", {
|
|
579
|
+
onClick: this.handleTriggerWrapperClick,
|
|
580
|
+
className: inputCls
|
|
581
|
+
}, typeof triggerRender === 'function' ? /*#__PURE__*/React.createElement(Trigger, _Object$assign({}, props, {
|
|
582
|
+
triggerRender: triggerRender,
|
|
583
|
+
componentName: "DatePicker",
|
|
584
|
+
componentProps: _Object$assign({}, this.props)
|
|
585
|
+
})) : /*#__PURE__*/React.createElement(DateInput, _Object$assign({}, props)))
|
|
586
|
+
);
|
|
583
587
|
}
|
|
584
588
|
|
|
585
589
|
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,
|