@douyinfe/semi-ui 2.12.1-alpha.0 → 2.13.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/autoComplete/_story/autoComplete.stories.js +0 -1
- package/autoComplete/index.tsx +1 -1
- package/avatar/index.tsx +2 -2
- package/backtop/index.tsx +7 -11
- package/badge/index.tsx +1 -1
- package/banner/index.tsx +5 -5
- package/breadcrumb/index.tsx +3 -5
- package/button/Button.tsx +8 -10
- package/card/index.tsx +41 -43
- package/carousel/CarouselArrow.tsx +0 -2
- package/carousel/index.tsx +0 -1
- package/cascader/index.tsx +123 -101
- package/cascader/item.tsx +1 -1
- package/checkbox/checkbox.tsx +28 -20
- package/checkbox/checkboxInner.tsx +11 -1
- package/collapsible/index.tsx +1 -8
- package/datePicker/dateInput.tsx +0 -1
- package/datePicker/datePicker.tsx +5 -13
- package/dist/css/semi.css +49 -41
- package/dist/css/semi.min.css +1 -1
- package/dist/umd/semi-ui.js +5372 -3695
- 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/divider/index.tsx +4 -8
- package/dropdown/index.tsx +1 -1
- package/empty/index.tsx +5 -13
- package/form/hoc/withField.tsx +1 -1
- package/form/label.tsx +1 -1
- package/grid/col.tsx +1 -1
- package/grid/row.tsx +1 -1
- package/iconButton/index.tsx +1 -2
- package/input/index.tsx +11 -38
- package/inputNumber/__test__/inputNumber.test.js +2 -3
- package/inputNumber/_story/inputNumber.stories.js +53 -0
- package/inputNumber/index.tsx +0 -4
- package/lib/cjs/autoComplete/index.js +1 -1
- package/lib/cjs/avatar/index.js +2 -4
- package/lib/cjs/backtop/index.js +1 -2
- package/lib/cjs/badge/index.js +1 -2
- package/lib/cjs/banner/index.js +4 -9
- package/lib/cjs/breadcrumb/index.js +3 -4
- package/lib/cjs/button/Button.js +3 -13
- package/lib/cjs/card/index.js +5 -10
- package/lib/cjs/carousel/CarouselArrow.js +2 -6
- package/lib/cjs/carousel/index.js +1 -2
- package/lib/cjs/cascader/index.js +6 -9
- package/lib/cjs/cascader/item.js +1 -2
- package/lib/cjs/checkbox/checkbox.d.ts +3 -2
- package/lib/cjs/checkbox/checkbox.js +33 -15
- package/lib/cjs/checkbox/checkboxInner.d.ts +6 -0
- package/lib/cjs/checkbox/checkboxInner.js +14 -4
- package/lib/cjs/collapsible/index.js +1 -2
- package/lib/cjs/datePicker/dateInput.js +1 -2
- package/lib/cjs/datePicker/datePicker.js +2 -4
- package/lib/cjs/divider/index.js +1 -2
- package/lib/cjs/dropdown/index.js +1 -2
- package/lib/cjs/empty/index.js +4 -8
- package/lib/cjs/form/hoc/withField.js +1 -2
- package/lib/cjs/form/label.js +1 -2
- package/lib/cjs/grid/col.js +1 -2
- package/lib/cjs/grid/row.js +1 -2
- package/lib/cjs/iconButton/index.js +1 -3
- package/lib/cjs/input/index.js +5 -9
- package/lib/cjs/inputNumber/index.js +0 -4
- package/lib/cjs/list/index.js +3 -6
- package/lib/cjs/modal/ConfirmModal.js +1 -2
- package/lib/cjs/modal/Modal.js +2 -6
- package/lib/cjs/modal/ModalContent.js +6 -13
- package/lib/cjs/notification/notice.js +3 -6
- package/lib/cjs/pagination/index.js +2 -4
- package/lib/cjs/popconfirm/index.js +3 -6
- package/lib/cjs/popover/index.d.ts +1 -0
- package/lib/cjs/radio/radio.js +2 -4
- package/lib/cjs/rating/item.js +1 -2
- package/lib/cjs/scrollList/index.js +3 -6
- package/lib/cjs/select/index.js +4 -8
- package/lib/cjs/select/option.js +1 -2
- package/lib/cjs/sideSheet/SideSheetContent.js +3 -6
- package/lib/cjs/skeleton/index.js +1 -3
- package/lib/cjs/space/index.js +1 -2
- package/lib/cjs/spin/index.js +3 -7
- package/lib/cjs/switch/index.js +4 -6
- package/lib/cjs/table/Table.js +3 -6
- package/lib/cjs/tabs/TabBar.js +1 -2
- package/lib/cjs/tabs/TabPane.js +2 -5
- package/lib/cjs/tagInput/index.d.ts +6 -1
- package/lib/cjs/tagInput/index.js +42 -10
- package/lib/cjs/timePicker/Combobox.js +1 -3
- package/lib/cjs/toast/toast.js +3 -6
- package/lib/cjs/transfer/index.js +1 -2
- package/lib/cjs/tree/treeNode.js +1 -2
- package/lib/cjs/treeSelect/index.js +3 -6
- package/lib/cjs/typography/base.js +1 -2
- package/lib/cjs/upload/index.d.ts +1 -1
- package/lib/cjs/upload/index.js +6 -13
- package/lib/es/autoComplete/index.js +1 -1
- package/lib/es/avatar/index.js +2 -4
- package/lib/es/backtop/index.js +1 -2
- package/lib/es/badge/index.js +1 -2
- package/lib/es/banner/index.js +4 -9
- package/lib/es/breadcrumb/index.js +3 -4
- package/lib/es/button/Button.js +3 -11
- package/lib/es/card/index.js +5 -10
- package/lib/es/carousel/CarouselArrow.js +2 -6
- package/lib/es/carousel/index.js +1 -2
- package/lib/es/cascader/index.js +6 -9
- package/lib/es/cascader/item.js +1 -2
- package/lib/es/checkbox/checkbox.d.ts +3 -2
- package/lib/es/checkbox/checkbox.js +33 -15
- package/lib/es/checkbox/checkboxInner.d.ts +6 -0
- package/lib/es/checkbox/checkboxInner.js +14 -4
- package/lib/es/collapsible/index.js +1 -2
- package/lib/es/datePicker/dateInput.js +1 -2
- package/lib/es/datePicker/datePicker.js +2 -4
- package/lib/es/divider/index.js +1 -2
- package/lib/es/dropdown/index.js +1 -2
- package/lib/es/empty/index.js +4 -8
- package/lib/es/form/hoc/withField.js +1 -2
- package/lib/es/form/label.js +1 -2
- package/lib/es/grid/col.js +1 -2
- package/lib/es/grid/row.js +1 -2
- package/lib/es/iconButton/index.js +1 -3
- package/lib/es/input/index.js +5 -9
- package/lib/es/inputNumber/index.js +0 -4
- package/lib/es/list/index.js +3 -6
- package/lib/es/modal/ConfirmModal.js +1 -2
- package/lib/es/modal/Modal.js +2 -6
- package/lib/es/modal/ModalContent.js +6 -13
- package/lib/es/notification/notice.js +3 -6
- package/lib/es/pagination/index.js +2 -4
- package/lib/es/popconfirm/index.js +3 -6
- package/lib/es/popover/index.d.ts +1 -0
- package/lib/es/radio/radio.js +2 -4
- package/lib/es/rating/item.js +1 -2
- package/lib/es/scrollList/index.js +3 -6
- package/lib/es/select/index.js +4 -8
- package/lib/es/select/option.js +1 -2
- package/lib/es/sideSheet/SideSheetContent.js +3 -6
- package/lib/es/skeleton/index.js +1 -3
- package/lib/es/space/index.js +1 -2
- package/lib/es/spin/index.js +3 -7
- package/lib/es/switch/index.js +4 -6
- package/lib/es/table/Table.js +3 -6
- package/lib/es/tabs/TabBar.js +1 -2
- package/lib/es/tabs/TabPane.js +2 -5
- package/lib/es/tagInput/index.d.ts +6 -1
- package/lib/es/tagInput/index.js +41 -10
- package/lib/es/timePicker/Combobox.js +1 -3
- package/lib/es/toast/toast.js +3 -6
- package/lib/es/transfer/index.js +1 -2
- package/lib/es/tree/treeNode.js +1 -2
- package/lib/es/treeSelect/index.js +3 -6
- package/lib/es/typography/base.js +1 -2
- package/lib/es/upload/index.d.ts +1 -1
- package/lib/es/upload/index.js +6 -13
- package/list/index.tsx +4 -16
- package/modal/ConfirmModal.tsx +1 -1
- package/modal/Modal.tsx +0 -2
- package/modal/ModalContent.tsx +14 -27
- package/notification/notice.tsx +4 -16
- package/package.json +9 -9
- package/pagination/index.tsx +2 -16
- package/popconfirm/index.tsx +3 -11
- package/popover/index.tsx +1 -1
- package/radio/radio.tsx +2 -10
- package/rating/item.tsx +1 -1
- package/scrollList/index.tsx +3 -19
- package/select/_story/select.stories.js +11 -0
- package/select/index.tsx +4 -12
- package/select/option.tsx +1 -5
- package/sideSheet/SideSheetContent.tsx +3 -3
- package/skeleton/index.tsx +1 -1
- package/space/index.tsx +1 -1
- package/spin/index.tsx +9 -15
- package/switch/index.tsx +14 -9
- package/table/Table.tsx +3 -5
- package/tabs/TabBar.tsx +1 -1
- package/tabs/TabPane.tsx +4 -9
- package/tagInput/index.tsx +38 -11
- package/timePicker/Combobox.tsx +1 -6
- package/toast/toast.tsx +3 -3
- package/transfer/index.tsx +0 -1
- package/tree/treeNode.tsx +1 -1
- package/treeSelect/index.tsx +3 -15
- package/typography/base.tsx +1 -1
- package/upload/index.tsx +38 -107
- package/yarn-error.log +0 -26235
package/lib/es/button/Button.js
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
import _omit from "lodash/omit";
|
|
2
1
|
import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
|
|
3
2
|
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
|
4
3
|
import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
|
|
5
4
|
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
|
6
|
-
import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
|
|
7
5
|
|
|
8
6
|
var __rest = this && this.__rest || function (s, e) {
|
|
9
7
|
var t = {};
|
|
@@ -54,7 +52,7 @@ export default class Button extends PureComponent {
|
|
|
54
52
|
|
|
55
53
|
const baseProps = _Object$assign(_Object$assign({
|
|
56
54
|
disabled
|
|
57
|
-
},
|
|
55
|
+
}, attr), {
|
|
58
56
|
className: classNames(prefixCls, {
|
|
59
57
|
[_concatInstanceProperty(_context = "".concat(prefixCls, "-")).call(_context, type)]: !disabled && type,
|
|
60
58
|
["".concat(prefixCls, "-disabled")]: disabled,
|
|
@@ -70,12 +68,6 @@ export default class Button extends PureComponent {
|
|
|
70
68
|
'aria-disabled': disabled
|
|
71
69
|
});
|
|
72
70
|
|
|
73
|
-
const xSemiProps = {};
|
|
74
|
-
|
|
75
|
-
if (!(className && _includesInstanceProperty(className).call(className, '-with-icon'))) {
|
|
76
|
-
xSemiProps['x-semi-prop'] = this.props['x-semi-children-alias'] || 'children';
|
|
77
|
-
}
|
|
78
|
-
|
|
79
71
|
return (
|
|
80
72
|
/*#__PURE__*/
|
|
81
73
|
// eslint-disable-next-line react/button-has-type
|
|
@@ -83,10 +75,10 @@ export default class Button extends PureComponent {
|
|
|
83
75
|
onClick: this.props.onClick,
|
|
84
76
|
onMouseDown: this.props.onMouseDown,
|
|
85
77
|
style: style
|
|
86
|
-
}), /*#__PURE__*/React.createElement("span",
|
|
78
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
87
79
|
className: "".concat(prefixCls, "-content"),
|
|
88
80
|
onClick: e => disabled && e.stopPropagation()
|
|
89
|
-
},
|
|
81
|
+
}, children))
|
|
90
82
|
);
|
|
91
83
|
}
|
|
92
84
|
|
package/lib/es/card/index.js
CHANGED
|
@@ -59,8 +59,7 @@ class Card extends PureComponent {
|
|
|
59
59
|
React.createElement("div", {
|
|
60
60
|
className: headerWrapperCls
|
|
61
61
|
}, headerExtraContent && /*#__PURE__*/React.createElement("div", {
|
|
62
|
-
className: "".concat(prefixcls, "-header-wrapper-extra")
|
|
63
|
-
"x-semi-prop": "headerExtraContent"
|
|
62
|
+
className: "".concat(prefixcls, "-header-wrapper-extra")
|
|
64
63
|
}, headerExtraContent), title && /*#__PURE__*/React.createElement("div", {
|
|
65
64
|
className: titleCls
|
|
66
65
|
}, _isString(title) ? /*#__PURE__*/React.createElement(Typography.Title, {
|
|
@@ -68,8 +67,7 @@ class Card extends PureComponent {
|
|
|
68
67
|
ellipsis: {
|
|
69
68
|
showTooltip: true,
|
|
70
69
|
rows: 1
|
|
71
|
-
}
|
|
72
|
-
"x-semi-prop": "title"
|
|
70
|
+
}
|
|
73
71
|
}, title) : title)));
|
|
74
72
|
}
|
|
75
73
|
|
|
@@ -82,8 +80,7 @@ class Card extends PureComponent {
|
|
|
82
80
|
} = this.props;
|
|
83
81
|
const coverCls = cls("".concat(prefixcls, "-cover"));
|
|
84
82
|
return cover && /*#__PURE__*/React.createElement("div", {
|
|
85
|
-
className: coverCls
|
|
86
|
-
"x-semi-prop": "cover"
|
|
83
|
+
className: coverCls
|
|
87
84
|
}, cover);
|
|
88
85
|
};
|
|
89
86
|
|
|
@@ -113,8 +110,7 @@ class Card extends PureComponent {
|
|
|
113
110
|
spacing: 12
|
|
114
111
|
}, _mapInstanceProperty(actions).call(actions, (item, idx) => /*#__PURE__*/React.createElement("div", {
|
|
115
112
|
key: idx,
|
|
116
|
-
className: actionsItemCls
|
|
117
|
-
"x-semi-prop": "actions.".concat(idx)
|
|
113
|
+
className: actionsItemCls
|
|
118
114
|
}, item)))));
|
|
119
115
|
};
|
|
120
116
|
|
|
@@ -129,8 +125,7 @@ class Card extends PureComponent {
|
|
|
129
125
|
});
|
|
130
126
|
return footer && /*#__PURE__*/React.createElement("div", {
|
|
131
127
|
style: footerStyle,
|
|
132
|
-
className: footerCls
|
|
133
|
-
"x-semi-prop": "footer"
|
|
128
|
+
className: footerCls
|
|
134
129
|
}, footer);
|
|
135
130
|
};
|
|
136
131
|
}
|
|
@@ -57,16 +57,12 @@ class CarouselArrow extends React.PureComponent {
|
|
|
57
57
|
// role='button'
|
|
58
58
|
className: leftClassNames,
|
|
59
59
|
onClick: prev
|
|
60
|
-
}, _get(this.props, 'arrowProps.leftArrow.props'), {
|
|
61
|
-
"x-semi-prop": "arrowProps.leftArrow.children"
|
|
62
|
-
}), this.renderLeftIcon()), /*#__PURE__*/React.createElement("div", _Object$assign({
|
|
60
|
+
}, _get(this.props, 'arrowProps.leftArrow.props')), this.renderLeftIcon()), /*#__PURE__*/React.createElement("div", _Object$assign({
|
|
63
61
|
// role='button'
|
|
64
62
|
// tabIndex={0}
|
|
65
63
|
className: rightClassNames,
|
|
66
64
|
onClick: next
|
|
67
|
-
}, _get(this.props, 'arrowProps.rightArrow.props'),
|
|
68
|
-
"x-semi-prop": "arrowProps.rightArrow.children"
|
|
69
|
-
}), this.renderRightIcon()));
|
|
65
|
+
}, _get(this.props, 'arrowProps.rightArrow.props')), this.renderRightIcon()));
|
|
70
66
|
}
|
|
71
67
|
|
|
72
68
|
}
|
package/lib/es/carousel/index.js
CHANGED
|
@@ -263,8 +263,7 @@ class Carousel extends BaseComponent {
|
|
|
263
263
|
className: cls([_concatInstanceProperty(_context2 = "".concat(cssClasses.CAROUSEL_CONTENT, "-")).call(_context2, animation)], {
|
|
264
264
|
["".concat(cssClasses.CAROUSEL_CONTENT)]: true,
|
|
265
265
|
["".concat(cssClasses.CAROUSEL_CONTENT, "-reverse")]: slideDirection === 'left' ? isReverse : !isReverse
|
|
266
|
-
})
|
|
267
|
-
"x-semi-prop": "children"
|
|
266
|
+
})
|
|
268
267
|
}, this.renderChildren()), this.renderIndicator(), this.renderArrow());
|
|
269
268
|
}
|
|
270
269
|
|
package/lib/es/cascader/index.js
CHANGED
|
@@ -285,8 +285,7 @@ class Cascader extends BaseComponent {
|
|
|
285
285
|
["".concat(prefixcls, "-suffix-icon")]: isSemiIcon(suffix)
|
|
286
286
|
});
|
|
287
287
|
return /*#__PURE__*/React.createElement("div", {
|
|
288
|
-
className: suffixWrapperCls
|
|
289
|
-
"x-semi-prop": "suffix"
|
|
288
|
+
className: suffixWrapperCls
|
|
290
289
|
}, suffix);
|
|
291
290
|
};
|
|
292
291
|
|
|
@@ -306,8 +305,7 @@ class Cascader extends BaseComponent {
|
|
|
306
305
|
});
|
|
307
306
|
return /*#__PURE__*/React.createElement("div", {
|
|
308
307
|
className: prefixWrapperCls,
|
|
309
|
-
id: insetLabelId
|
|
310
|
-
"x-semi-prop": "prefix,insetLabel"
|
|
308
|
+
id: insetLabelId
|
|
311
309
|
}, labelNode);
|
|
312
310
|
};
|
|
313
311
|
|
|
@@ -397,7 +395,7 @@ class Cascader extends BaseComponent {
|
|
|
397
395
|
className: clearCls,
|
|
398
396
|
onClick: this.handleClear,
|
|
399
397
|
onKeyPress: this.handleClearEnterPress,
|
|
400
|
-
role:
|
|
398
|
+
role: 'button',
|
|
401
399
|
tabIndex: 0
|
|
402
400
|
}, /*#__PURE__*/React.createElement(IconClear, null));
|
|
403
401
|
}
|
|
@@ -416,8 +414,7 @@ class Cascader extends BaseComponent {
|
|
|
416
414
|
}
|
|
417
415
|
|
|
418
416
|
return arrowIcon ? /*#__PURE__*/React.createElement("div", {
|
|
419
|
-
className: cls("".concat(prefixcls, "-arrow"))
|
|
420
|
-
"x-semi-prop": "arrowIcon"
|
|
417
|
+
className: cls("".concat(prefixcls, "-arrow"))
|
|
421
418
|
}, arrowIcon) : null;
|
|
422
419
|
};
|
|
423
420
|
|
|
@@ -492,12 +489,12 @@ class Cascader extends BaseComponent {
|
|
|
492
489
|
"aria-errormessage": this.props['aria-errormessage'],
|
|
493
490
|
"aria-label": this.props['aria-label'],
|
|
494
491
|
"aria-labelledby": this.props['aria-labelledby'],
|
|
495
|
-
"aria-describedby": this.props[
|
|
492
|
+
"aria-describedby": this.props["aria-describedby"],
|
|
496
493
|
"aria-required": this.props['aria-required'],
|
|
497
494
|
id: id
|
|
498
495
|
}, mouseEvent, {
|
|
499
496
|
// eslint-disable-next-line jsx-a11y/role-has-required-aria-props
|
|
500
|
-
role:
|
|
497
|
+
role: 'combobox',
|
|
501
498
|
tabIndex: 0
|
|
502
499
|
}), inner);
|
|
503
500
|
};
|
package/lib/es/cascader/item.js
CHANGED
|
@@ -296,8 +296,7 @@ export default class Item extends PureComponent {
|
|
|
296
296
|
className: _concatInstanceProperty(_context6 = "".concat(prefixcls, " ")).call(_context6, prefixcls, "-empty"),
|
|
297
297
|
key: 'empty-list'
|
|
298
298
|
}, /*#__PURE__*/React.createElement("span", {
|
|
299
|
-
className: "".concat(prefixcls, "-label")
|
|
300
|
-
"x-semi-prop": "emptyContent"
|
|
299
|
+
className: "".concat(prefixcls, "-label")
|
|
301
300
|
}, emptyContent || locale.emptyText));
|
|
302
301
|
});
|
|
303
302
|
}
|
|
@@ -29,6 +29,7 @@ interface CheckboxState {
|
|
|
29
29
|
checked: boolean;
|
|
30
30
|
addonId?: string;
|
|
31
31
|
extraId?: string;
|
|
32
|
+
focusVisible?: boolean;
|
|
32
33
|
}
|
|
33
34
|
declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
|
|
34
35
|
static contextType: React.Context<CheckboxContextType>;
|
|
@@ -65,8 +66,6 @@ declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
|
|
|
65
66
|
context: CheckboxContextType;
|
|
66
67
|
get adapter(): CheckboxAdapter<CheckboxProps, CheckboxState>;
|
|
67
68
|
foundation: CheckboxFoundation;
|
|
68
|
-
addonId: string;
|
|
69
|
-
extraId: string;
|
|
70
69
|
constructor(props: CheckboxProps);
|
|
71
70
|
componentDidUpdate(prevProps: CheckboxProps): void;
|
|
72
71
|
isInGroup(): boolean;
|
|
@@ -74,6 +73,8 @@ declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
|
|
|
74
73
|
blur(): void;
|
|
75
74
|
handleChange: React.MouseEventHandler<HTMLSpanElement>;
|
|
76
75
|
handleEnterPress: (e: React.KeyboardEvent<HTMLSpanElement>) => void;
|
|
76
|
+
handleFocusVisible: (event: React.FocusEvent) => void;
|
|
77
|
+
handleBlur: (event: React.FocusEvent) => void;
|
|
77
78
|
render(): JSX.Element;
|
|
78
79
|
}
|
|
79
80
|
export default Checkbox;
|
|
@@ -24,11 +24,20 @@ class Checkbox extends BaseComponent {
|
|
|
24
24
|
|
|
25
25
|
this.handleEnterPress = e => this.foundation.handleEnterPress(e);
|
|
26
26
|
|
|
27
|
+
this.handleFocusVisible = event => {
|
|
28
|
+
this.foundation.handleFocusVisible(event);
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
this.handleBlur = event => {
|
|
32
|
+
this.foundation.handleBlur();
|
|
33
|
+
};
|
|
34
|
+
|
|
27
35
|
const checked = false;
|
|
28
36
|
this.state = {
|
|
29
37
|
checked: props.checked || props.defaultChecked || checked,
|
|
30
38
|
addonId: props.addonId,
|
|
31
|
-
extraId: props.extraId
|
|
39
|
+
extraId: props.extraId,
|
|
40
|
+
focusVisible: false
|
|
32
41
|
};
|
|
33
42
|
this.checkboxEntity = null;
|
|
34
43
|
this.foundation = new CheckboxFoundation(this.adapter);
|
|
@@ -66,6 +75,14 @@ class Checkbox extends BaseComponent {
|
|
|
66
75
|
prefix: 'extra'
|
|
67
76
|
})
|
|
68
77
|
});
|
|
78
|
+
},
|
|
79
|
+
setFocusVisible: focusVisible => {
|
|
80
|
+
this.setState({
|
|
81
|
+
focusVisible
|
|
82
|
+
});
|
|
83
|
+
},
|
|
84
|
+
focusCheckboxEntity: () => {
|
|
85
|
+
this.focus();
|
|
69
86
|
}
|
|
70
87
|
});
|
|
71
88
|
}
|
|
@@ -111,7 +128,8 @@ class Checkbox extends BaseComponent {
|
|
|
111
128
|
const {
|
|
112
129
|
checked,
|
|
113
130
|
addonId,
|
|
114
|
-
extraId
|
|
131
|
+
extraId,
|
|
132
|
+
focusVisible
|
|
115
133
|
} = this.state;
|
|
116
134
|
const props = {
|
|
117
135
|
checked,
|
|
@@ -142,6 +160,7 @@ class Checkbox extends BaseComponent {
|
|
|
142
160
|
}
|
|
143
161
|
|
|
144
162
|
const prefix = prefixCls || css.PREFIX;
|
|
163
|
+
const focusOuter = props.isCardType || props.isPureCardType;
|
|
145
164
|
const wrapper = classnames(prefix, {
|
|
146
165
|
["".concat(prefix, "-disabled")]: props.disabled,
|
|
147
166
|
["".concat(prefix, "-indeterminate")]: indeterminate,
|
|
@@ -152,28 +171,24 @@ class Checkbox extends BaseComponent {
|
|
|
152
171
|
["".concat(prefix, "-cardType_unDisabled")]: !(props.disabled && props.isCardType),
|
|
153
172
|
["".concat(prefix, "-cardType_checked")]: props.isCardType && props.checked && !props.disabled,
|
|
154
173
|
["".concat(prefix, "-cardType_checked_disabled")]: props.isCardType && props.checked && props.disabled,
|
|
155
|
-
[className]: Boolean(className)
|
|
174
|
+
[className]: Boolean(className),
|
|
175
|
+
["".concat(prefix, "-focus")]: focusVisible && focusOuter
|
|
156
176
|
});
|
|
157
177
|
const extraCls = classnames("".concat(prefix, "-extra"), {
|
|
158
178
|
["".concat(prefix, "-cardType_extra_noChildren")]: props.isCardType && !children
|
|
159
179
|
});
|
|
160
|
-
const name = inGroup && this.context.checkboxGroup.name;
|
|
161
|
-
const xSemiPropChildren = this.props['x-semi-children-alias'] || 'children';
|
|
162
180
|
|
|
163
181
|
const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement("span", {
|
|
164
|
-
id:
|
|
165
|
-
className: "".concat(prefix, "-addon")
|
|
166
|
-
"x-semi-prop": xSemiPropChildren
|
|
182
|
+
id: addonId,
|
|
183
|
+
className: "".concat(prefix, "-addon")
|
|
167
184
|
}, children) : null, extra ? /*#__PURE__*/React.createElement("div", {
|
|
168
|
-
id:
|
|
169
|
-
className: extraCls
|
|
170
|
-
"x-semi-prop": "extra"
|
|
185
|
+
id: extraId,
|
|
186
|
+
className: extraCls
|
|
171
187
|
}, extra) : null);
|
|
172
188
|
|
|
173
189
|
return (
|
|
174
190
|
/*#__PURE__*/
|
|
175
191
|
// label is better than span, however span is here which is to solve gitlab issue #364
|
|
176
|
-
// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
|
|
177
192
|
React.createElement("span", {
|
|
178
193
|
role: role,
|
|
179
194
|
tabIndex: tabIndex,
|
|
@@ -186,12 +201,15 @@ class Checkbox extends BaseComponent {
|
|
|
186
201
|
onKeyPress: this.handleEnterPress,
|
|
187
202
|
"aria-labelledby": this.props['aria-labelledby']
|
|
188
203
|
}, /*#__PURE__*/React.createElement(CheckboxInner, _Object$assign({}, this.props, props, {
|
|
189
|
-
addonId: children &&
|
|
190
|
-
extraId: extra &&
|
|
204
|
+
addonId: children && addonId,
|
|
205
|
+
extraId: extra && extraId,
|
|
191
206
|
isPureCardType: props.isPureCardType,
|
|
192
207
|
ref: ref => {
|
|
193
208
|
this.checkboxEntity = ref;
|
|
194
|
-
}
|
|
209
|
+
},
|
|
210
|
+
focusInner: focusVisible && !focusOuter,
|
|
211
|
+
onInputFocus: this.handleFocusVisible,
|
|
212
|
+
onInputBlur: this.handleBlur
|
|
195
213
|
})), props.isCardType ? /*#__PURE__*/React.createElement("div", null, renderContent()) : renderContent())
|
|
196
214
|
);
|
|
197
215
|
}
|
|
@@ -16,6 +16,9 @@ export interface CheckboxInnerProps {
|
|
|
16
16
|
addonId?: string;
|
|
17
17
|
extraId?: string;
|
|
18
18
|
'aria-label'?: React.AriaAttributes['aria-label'];
|
|
19
|
+
focusInner?: boolean;
|
|
20
|
+
onInputFocus?: (e: any) => void;
|
|
21
|
+
onInputBlur?: (e: any) => void;
|
|
19
22
|
}
|
|
20
23
|
declare class CheckboxInner extends PureComponent<CheckboxInnerProps> {
|
|
21
24
|
static contextType: React.Context<import("./context").CheckboxContextType>;
|
|
@@ -34,6 +37,9 @@ declare class CheckboxInner extends PureComponent<CheckboxInnerProps> {
|
|
|
34
37
|
isPureCardType: PropTypes.Requireable<boolean>;
|
|
35
38
|
addonId: PropTypes.Requireable<string>;
|
|
36
39
|
extraId: PropTypes.Requireable<string>;
|
|
40
|
+
focusInner: PropTypes.Requireable<boolean>;
|
|
41
|
+
onInputFocus: PropTypes.Requireable<(...args: any[]) => any>;
|
|
42
|
+
onInputBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
37
43
|
};
|
|
38
44
|
static defaultProps: {
|
|
39
45
|
onChange: (...args: any[]) => void;
|
|
@@ -27,7 +27,10 @@ class CheckboxInner extends PureComponent {
|
|
|
27
27
|
name,
|
|
28
28
|
isPureCardType,
|
|
29
29
|
addonId,
|
|
30
|
-
extraId
|
|
30
|
+
extraId,
|
|
31
|
+
focusInner,
|
|
32
|
+
onInputFocus,
|
|
33
|
+
onInputBlur
|
|
31
34
|
} = this.props;
|
|
32
35
|
const prefix = prefixCls || css.PREFIX;
|
|
33
36
|
const wrapper = classnames({
|
|
@@ -36,7 +39,9 @@ class CheckboxInner extends PureComponent {
|
|
|
36
39
|
["".concat(prefix, "-inner-pureCardType")]: isPureCardType
|
|
37
40
|
}, css.WRAPPER);
|
|
38
41
|
const inner = classnames({
|
|
39
|
-
["".concat(prefix, "-inner-display")]: true
|
|
42
|
+
["".concat(prefix, "-inner-display")]: true,
|
|
43
|
+
["".concat(prefix, "-focus")]: focusInner,
|
|
44
|
+
["".concat(prefix, "-focus-border")]: focusInner && !checked
|
|
40
45
|
});
|
|
41
46
|
const icon = checked ? /*#__PURE__*/React.createElement(IconCheckboxTick, null) : indeterminate ? /*#__PURE__*/React.createElement(IconCheckboxIndeterminate, null) : null;
|
|
42
47
|
const inputProps = {
|
|
@@ -52,7 +57,9 @@ class CheckboxInner extends PureComponent {
|
|
|
52
57
|
className: css.INPUT,
|
|
53
58
|
onChange: _noop,
|
|
54
59
|
checked: checked,
|
|
55
|
-
disabled: disabled
|
|
60
|
+
disabled: disabled,
|
|
61
|
+
onFocus: onInputFocus,
|
|
62
|
+
onBlur: onInputBlur
|
|
56
63
|
};
|
|
57
64
|
name && (inputProps['name'] = name);
|
|
58
65
|
return /*#__PURE__*/React.createElement("span", {
|
|
@@ -83,7 +90,10 @@ CheckboxInner.propTypes = {
|
|
|
83
90
|
value: PropTypes.any,
|
|
84
91
|
isPureCardType: PropTypes.bool,
|
|
85
92
|
addonId: PropTypes.string,
|
|
86
|
-
extraId: PropTypes.string
|
|
93
|
+
extraId: PropTypes.string,
|
|
94
|
+
focusInner: PropTypes.bool,
|
|
95
|
+
onInputFocus: PropTypes.func,
|
|
96
|
+
onInputBlur: PropTypes.func
|
|
87
97
|
};
|
|
88
98
|
CheckboxInner.defaultProps = {
|
|
89
99
|
onChange: _noop
|
|
@@ -153,8 +153,7 @@ export default class DateInput extends BaseComponent {
|
|
|
153
153
|
const labelNode = prefix || insetLabel;
|
|
154
154
|
return labelNode ? /*#__PURE__*/React.createElement("div", {
|
|
155
155
|
className: "".concat(prefixCls, "-range-input-prefix"),
|
|
156
|
-
onClick: e => !disabled && !rangeInputFocus && this.handleRangeStartFocus(e)
|
|
157
|
-
"x-semi-prop": "prefix,insetLabel"
|
|
156
|
+
onClick: e => !disabled && !rangeInputFocus && this.handleRangeStartFocus(e)
|
|
158
157
|
}, labelNode) : null;
|
|
159
158
|
}
|
|
160
159
|
|
|
@@ -182,13 +182,11 @@ export default class DatePicker extends BaseComponent {
|
|
|
182
182
|
className: wrapCls,
|
|
183
183
|
style: dropdownStyle
|
|
184
184
|
}, topSlot && /*#__PURE__*/React.createElement("div", {
|
|
185
|
-
className: "".concat(cssClasses.PREFIX, "-topSlot")
|
|
186
|
-
"x-semi-prop": "topSlot"
|
|
185
|
+
className: "".concat(cssClasses.PREFIX, "-topSlot")
|
|
187
186
|
}, topSlot), insetInput && /*#__PURE__*/React.createElement(DateInput, _Object$assign({}, insetInputProps, {
|
|
188
187
|
insetInput: true
|
|
189
188
|
})), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), this.renderQuickControls(), bottomSlot && /*#__PURE__*/React.createElement("div", {
|
|
190
|
-
className: "".concat(cssClasses.PREFIX, "-bottomSlot")
|
|
191
|
-
"x-semi-prop": "bottomSlot"
|
|
189
|
+
className: "".concat(cssClasses.PREFIX, "-bottomSlot")
|
|
192
190
|
}, bottomSlot), this.renderFooter(locale, localeCode));
|
|
193
191
|
};
|
|
194
192
|
|
package/lib/es/divider/index.js
CHANGED
|
@@ -61,8 +61,7 @@ const Divider = props => {
|
|
|
61
61
|
className: dividerClassNames,
|
|
62
62
|
style: _Object$assign(_Object$assign({}, overrideDefaultStyle), style)
|
|
63
63
|
}), children && layout === 'horizontal' ? typeof children === 'string' ? /*#__PURE__*/React.createElement("span", {
|
|
64
|
-
className: "".concat(prefixCls, "-divider_inner-text")
|
|
65
|
-
"x-semi-prop": "children"
|
|
64
|
+
className: "".concat(prefixCls, "-divider_inner-text")
|
|
66
65
|
}, children) : children : null);
|
|
67
66
|
};
|
|
68
67
|
|
package/lib/es/dropdown/index.js
CHANGED
|
@@ -86,8 +86,7 @@ class Dropdown extends BaseComponent {
|
|
|
86
86
|
className: className,
|
|
87
87
|
style: style
|
|
88
88
|
}, /*#__PURE__*/React.createElement("div", {
|
|
89
|
-
className: "".concat(prefixCls, "-content")
|
|
90
|
-
"x-semi-prop": "render"
|
|
89
|
+
className: "".concat(prefixCls, "-content")
|
|
91
90
|
}, content)));
|
|
92
91
|
}
|
|
93
92
|
|
package/lib/es/empty/index.js
CHANGED
|
@@ -101,19 +101,15 @@ export default class Empty extends BaseComponent {
|
|
|
101
101
|
style: style
|
|
102
102
|
}, /*#__PURE__*/React.createElement("div", {
|
|
103
103
|
className: "".concat(prefixCls, "-image"),
|
|
104
|
-
style: imageStyle
|
|
105
|
-
"x-semi-prop": "image,darkModeImage"
|
|
104
|
+
style: imageStyle
|
|
106
105
|
}, imageNode), /*#__PURE__*/React.createElement("div", {
|
|
107
106
|
className: "".concat(prefixCls, "-content")
|
|
108
107
|
}, title ? /*#__PURE__*/React.createElement(Typography.Title, _Object$assign({}, titleProps, {
|
|
109
|
-
className: "".concat(prefixCls, "-title")
|
|
110
|
-
"x-semi-prop": "title"
|
|
108
|
+
className: "".concat(prefixCls, "-title")
|
|
111
109
|
}), title) : null, description ? /*#__PURE__*/React.createElement("div", {
|
|
112
|
-
className: "".concat(prefixCls, "-description")
|
|
113
|
-
"x-semi-prop": "description"
|
|
110
|
+
className: "".concat(prefixCls, "-description")
|
|
114
111
|
}, description) : null, children ? /*#__PURE__*/React.createElement("div", {
|
|
115
|
-
className: "".concat(prefixCls, "-footer")
|
|
116
|
-
"x-semi-prop": "children"
|
|
112
|
+
className: "".concat(prefixCls, "-footer")
|
|
117
113
|
}, children) : null));
|
|
118
114
|
}
|
|
119
115
|
|
|
@@ -426,8 +426,7 @@ function withField(Component, opts) {
|
|
|
426
426
|
});
|
|
427
427
|
const extraContent = extraText ? /*#__PURE__*/React.createElement("div", {
|
|
428
428
|
className: extraCls,
|
|
429
|
-
id: extraTextId
|
|
430
|
-
"x-semi-prop": "extraText"
|
|
429
|
+
id: extraTextId
|
|
431
430
|
}, extraText) : null;
|
|
432
431
|
|
|
433
432
|
let newProps = _Object$assign(_Object$assign({
|
package/lib/es/form/label.js
CHANGED
|
@@ -29,8 +29,7 @@ export default class Label extends PureComponent {
|
|
|
29
29
|
const labelStyle = style ? style : {};
|
|
30
30
|
width ? labelStyle.width = width : null;
|
|
31
31
|
const textContent = /*#__PURE__*/React.createElement("div", {
|
|
32
|
-
className: "".concat(prefixCls, "-field-label-text")
|
|
33
|
-
"x-semi-prop": "label"
|
|
32
|
+
className: "".concat(prefixCls, "-field-label-text")
|
|
34
33
|
}, typeof text !== 'undefined' ? text : children);
|
|
35
34
|
const contentWithExtra = /*#__PURE__*/React.createElement(React.Fragment, null, textContent, /*#__PURE__*/React.createElement("div", {
|
|
36
35
|
className: "".concat(prefixCls, "-field-label-extra")
|
package/lib/es/grid/col.js
CHANGED
|
@@ -97,8 +97,7 @@ class Col extends React.Component {
|
|
|
97
97
|
} : {}), style);
|
|
98
98
|
return /*#__PURE__*/React.createElement("div", _Object$assign({}, others, {
|
|
99
99
|
style: style,
|
|
100
|
-
className: classes
|
|
101
|
-
"x-semi-prop": "children"
|
|
100
|
+
className: classes
|
|
102
101
|
}), children);
|
|
103
102
|
}
|
|
104
103
|
|
package/lib/es/grid/row.js
CHANGED
|
@@ -71,10 +71,8 @@ class IconButton extends PureComponent {
|
|
|
71
71
|
["".concat(prefixCls, "-content-left")]: iconPosition === 'right',
|
|
72
72
|
["".concat(prefixCls, "-content-right")]: iconPosition === 'left'
|
|
73
73
|
});
|
|
74
|
-
const xSemiProp = this.props['x-semi-children-alias'] || 'children';
|
|
75
74
|
const children = originChildren != null ? /*#__PURE__*/React.createElement("span", {
|
|
76
|
-
className: btnTextCls
|
|
77
|
-
"x-semi-prop": xSemiProp
|
|
75
|
+
className: btnTextCls
|
|
78
76
|
}, originChildren) : null;
|
|
79
77
|
|
|
80
78
|
if (iconPosition === 'left') {
|
package/lib/es/input/index.js
CHANGED
|
@@ -183,8 +183,7 @@ class Input extends BaseComponent {
|
|
|
183
183
|
["".concat(prefixCls, "-prepend-icon")]: isSemiIcon(addonBefore)
|
|
184
184
|
});
|
|
185
185
|
return /*#__PURE__*/React.createElement("div", {
|
|
186
|
-
className: prefixWrapperCls
|
|
187
|
-
"x-semi-prop": "addonBefore"
|
|
186
|
+
className: prefixWrapperCls
|
|
188
187
|
}, addonBefore);
|
|
189
188
|
}
|
|
190
189
|
|
|
@@ -203,8 +202,7 @@ class Input extends BaseComponent {
|
|
|
203
202
|
["".concat(prefixCls, "-append-icon")]: isSemiIcon(addonAfter)
|
|
204
203
|
});
|
|
205
204
|
return /*#__PURE__*/React.createElement("div", {
|
|
206
|
-
className: prefixWrapperCls
|
|
207
|
-
"x-semi-prop": "addonAfter"
|
|
205
|
+
className: prefixWrapperCls
|
|
208
206
|
}, addonAfter);
|
|
209
207
|
}
|
|
210
208
|
|
|
@@ -284,8 +282,7 @@ class Input extends BaseComponent {
|
|
|
284
282
|
className: prefixWrapperCls,
|
|
285
283
|
onMouseDown: this.handlePreventMouseDown,
|
|
286
284
|
onClick: this.handleClickPrefixOrSuffix,
|
|
287
|
-
id: insetLabelId
|
|
288
|
-
"x-semi-prop": "prefix,insetLabel"
|
|
285
|
+
id: insetLabelId
|
|
289
286
|
}, labelNode);
|
|
290
287
|
}
|
|
291
288
|
|
|
@@ -322,8 +319,7 @@ class Input extends BaseComponent {
|
|
|
322
319
|
return /*#__PURE__*/React.createElement("div", {
|
|
323
320
|
className: suffixWrapperCls,
|
|
324
321
|
onMouseDown: this.handlePreventMouseDown,
|
|
325
|
-
onClick: this.handleClickPrefixOrSuffix
|
|
326
|
-
"x-semi-prop": "suffix"
|
|
322
|
+
onClick: this.handleClickPrefixOrSuffix
|
|
327
323
|
}, suffix);
|
|
328
324
|
}
|
|
329
325
|
|
|
@@ -425,7 +421,7 @@ class Input extends BaseComponent {
|
|
|
425
421
|
}
|
|
426
422
|
|
|
427
423
|
if (validateStatus === 'error') {
|
|
428
|
-
inputProps['aria-invalid'] =
|
|
424
|
+
inputProps['aria-invalid'] = "true";
|
|
429
425
|
}
|
|
430
426
|
|
|
431
427
|
return (
|
|
@@ -111,8 +111,6 @@ class InputNumber extends BaseComponent {
|
|
|
111
111
|
return /*#__PURE__*/React.createElement("div", {
|
|
112
112
|
className: suffixChildrenCls
|
|
113
113
|
}, /*#__PURE__*/React.createElement("span", {
|
|
114
|
-
role: "button",
|
|
115
|
-
tabIndex: -1,
|
|
116
114
|
className: upClassName,
|
|
117
115
|
onMouseDown: notAllowedUp ? _noop : this.handleUpClick,
|
|
118
116
|
onMouseUp: this.handleMouseUp,
|
|
@@ -120,8 +118,6 @@ class InputNumber extends BaseComponent {
|
|
|
120
118
|
}, /*#__PURE__*/React.createElement(IconChevronUp, {
|
|
121
119
|
size: "extra-small"
|
|
122
120
|
})), /*#__PURE__*/React.createElement("span", {
|
|
123
|
-
role: "button",
|
|
124
|
-
tabIndex: -1,
|
|
125
121
|
className: downClassName,
|
|
126
122
|
onMouseDown: notAllowedDown ? _noop : this.handleDownClick,
|
|
127
123
|
onMouseUp: this.handleMouseUp,
|
package/lib/es/list/index.js
CHANGED
|
@@ -27,8 +27,7 @@ class List extends BaseComponent {
|
|
|
27
27
|
|
|
28
28
|
if (emptyContent) {
|
|
29
29
|
return /*#__PURE__*/React.createElement("div", {
|
|
30
|
-
className: "".concat(cssClasses.PREFIX, "-empty")
|
|
31
|
-
"x-semi-prop": "emptyContent"
|
|
30
|
+
className: "".concat(cssClasses.PREFIX, "-empty")
|
|
32
31
|
}, emptyContent);
|
|
33
32
|
} else {
|
|
34
33
|
return /*#__PURE__*/React.createElement(LocaleConsumer, {
|
|
@@ -116,8 +115,7 @@ class List extends BaseComponent {
|
|
|
116
115
|
className: wrapperCls,
|
|
117
116
|
style: style
|
|
118
117
|
}, header ? /*#__PURE__*/React.createElement("div", {
|
|
119
|
-
className: "".concat(cssClasses.PREFIX, "-header")
|
|
120
|
-
"x-semi-prop": "header"
|
|
118
|
+
className: "".concat(cssClasses.PREFIX, "-header")
|
|
121
119
|
}, header) : null, /*#__PURE__*/React.createElement(ListContext.Provider, {
|
|
122
120
|
value: {
|
|
123
121
|
grid,
|
|
@@ -128,8 +126,7 @@ class List extends BaseComponent {
|
|
|
128
126
|
spinning: loading,
|
|
129
127
|
size: "large"
|
|
130
128
|
}, this.wrapChildren(childrenList, children))), footer ? /*#__PURE__*/React.createElement("div", {
|
|
131
|
-
className: "".concat(cssClasses.PREFIX, "-footer")
|
|
132
|
-
"x-semi-prop": "footer"
|
|
129
|
+
className: "".concat(cssClasses.PREFIX, "-footer")
|
|
133
130
|
}, footer) : null, loadMore ? loadMore : null);
|
|
134
131
|
}
|
|
135
132
|
|