@douyinfe/semi-ui 2.23.0-beta.0 → 2.23.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/dist/css/semi.css +108 -57
- package/dist/css/semi.min.css +1 -1
- package/dist/umd/semi-ui.js +421 -120
- 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/lib/cjs/_base/base.css +1 -0
- package/lib/cjs/cascader/item.d.ts +1 -1
- package/lib/cjs/cascader/item.js +12 -6
- package/lib/cjs/datePicker/yearAndMonth.js +0 -1
- package/lib/cjs/dropdown/dropdownMenu.d.ts +0 -2
- package/lib/cjs/dropdown/dropdownMenu.js +1 -7
- package/lib/cjs/dropdown/index.d.ts +3 -1
- package/lib/cjs/dropdown/index.js +5 -2
- package/lib/cjs/select/index.js +1 -1
- package/lib/cjs/tooltip/index.d.ts +9 -0
- package/lib/cjs/tooltip/index.js +9 -1
- package/lib/es/_base/base.css +1 -0
- package/lib/es/cascader/item.d.ts +1 -1
- package/lib/es/cascader/item.js +12 -6
- package/lib/es/datePicker/yearAndMonth.js +0 -1
- package/lib/es/dropdown/dropdownMenu.d.ts +0 -2
- package/lib/es/dropdown/dropdownMenu.js +1 -7
- package/lib/es/dropdown/index.d.ts +3 -1
- package/lib/es/dropdown/index.js +5 -2
- package/lib/es/select/index.js +1 -1
- package/lib/es/tooltip/index.d.ts +9 -0
- package/lib/es/tooltip/index.js +8 -1
- package/package.json +7 -7
package/lib/cjs/_base/base.css
CHANGED
|
@@ -9,6 +9,7 @@ body {
|
|
|
9
9
|
--semi-transition_duration-fast:0ms;
|
|
10
10
|
--semi-transition_duration-faster:0ms;
|
|
11
11
|
--semi-transition_duration-fastest:0ms;
|
|
12
|
+
--semi-transition_duration-none:0ms;
|
|
12
13
|
--semi-transition_function-linear:linear;
|
|
13
14
|
--semi-transition_function-ease:ease;
|
|
14
15
|
--semi-transition_function-easeIn:ease-in;
|
|
@@ -71,7 +71,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
|
|
|
71
71
|
selected: boolean;
|
|
72
72
|
loading: boolean;
|
|
73
73
|
};
|
|
74
|
-
renderIcon: (type: string) => JSX.Element;
|
|
74
|
+
renderIcon: (type: string, haveMarginLeft?: boolean) => JSX.Element;
|
|
75
75
|
highlight: (searchText: React.ReactNode[]) => React.ReactNode[];
|
|
76
76
|
renderFlattenOption: (data: Data[]) => JSX.Element;
|
|
77
77
|
renderItem(renderData: Array<Entity>, content?: Array<React.ReactNode>): React.ReactNode[];
|
package/lib/cjs/cascader/item.js
CHANGED
|
@@ -118,27 +118,33 @@ class Item extends _react.PureComponent {
|
|
|
118
118
|
return state;
|
|
119
119
|
};
|
|
120
120
|
|
|
121
|
-
this.renderIcon = type
|
|
121
|
+
this.renderIcon = function (type) {
|
|
122
|
+
let haveMarginLeft = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
123
|
+
|
|
124
|
+
const finalCls = style => {
|
|
125
|
+
return style + (haveMarginLeft ? " ".concat(prefixcls, "-icon-left") : '');
|
|
126
|
+
};
|
|
127
|
+
|
|
122
128
|
switch (type) {
|
|
123
129
|
case 'child':
|
|
124
130
|
return /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronRight, {
|
|
125
|
-
className: "".concat(prefixcls, "-icon ").concat(prefixcls, "-icon-expand")
|
|
131
|
+
className: finalCls("".concat(prefixcls, "-icon ").concat(prefixcls, "-icon-expand"))
|
|
126
132
|
});
|
|
127
133
|
|
|
128
134
|
case 'tick':
|
|
129
135
|
return /*#__PURE__*/_react.default.createElement(_semiIcons.IconTick, {
|
|
130
|
-
className: "".concat(prefixcls, "-icon ").concat(prefixcls, "-icon-active")
|
|
136
|
+
className: finalCls("".concat(prefixcls, "-icon ").concat(prefixcls, "-icon-active"))
|
|
131
137
|
});
|
|
132
138
|
|
|
133
139
|
case 'loading':
|
|
134
140
|
return /*#__PURE__*/_react.default.createElement(_spin.default, {
|
|
135
|
-
wrapperClassName: "".concat(prefixcls, "-spin-icon")
|
|
141
|
+
wrapperClassName: finalCls("".concat(prefixcls, "-spin-icon"))
|
|
136
142
|
});
|
|
137
143
|
|
|
138
144
|
case 'empty':
|
|
139
145
|
return /*#__PURE__*/_react.default.createElement("span", {
|
|
140
146
|
"aria-hidden": true,
|
|
141
|
-
className: "".concat(prefixcls, "-icon ").concat(prefixcls, "-icon-empty")
|
|
147
|
+
className: finalCls("".concat(prefixcls, "-icon ").concat(prefixcls, "-icon-empty"))
|
|
142
148
|
});
|
|
143
149
|
|
|
144
150
|
default:
|
|
@@ -288,7 +294,7 @@ class Item extends _react.PureComponent {
|
|
|
288
294
|
indeterminate: halfCheckedKeys.has(item.key),
|
|
289
295
|
checked: checkedKeys.has(item.key),
|
|
290
296
|
className: "".concat(prefixcls, "-label-checkbox")
|
|
291
|
-
}), /*#__PURE__*/_react.default.createElement("span", null, label)), showExpand ? this.renderIcon(loading ? 'loading' : 'child') : null);
|
|
297
|
+
}), /*#__PURE__*/_react.default.createElement("span", null, label)), showExpand ? this.renderIcon(loading ? 'loading' : 'child', true) : null);
|
|
292
298
|
})));
|
|
293
299
|
|
|
294
300
|
if (showChildItem) {
|
|
@@ -9,7 +9,6 @@ declare class DropdownMenu extends BaseComponent<DropdownMenuProps> {
|
|
|
9
9
|
style: PropTypes.Requireable<object>;
|
|
10
10
|
};
|
|
11
11
|
static contextType: React.Context<import("./context").DropdownContextType>;
|
|
12
|
-
menuRef: React.RefObject<HTMLUListElement>;
|
|
13
12
|
constructor(props: DropdownMenuProps);
|
|
14
13
|
get adapter(): {
|
|
15
14
|
getContext(key: string): any;
|
|
@@ -25,7 +24,6 @@ declare class DropdownMenu extends BaseComponent<DropdownMenuProps> {
|
|
|
25
24
|
stopPropagation(e: any): void;
|
|
26
25
|
persistEvent: (event: any) => void;
|
|
27
26
|
};
|
|
28
|
-
componentDidMount(): void;
|
|
29
27
|
render(): JSX.Element;
|
|
30
28
|
}
|
|
31
29
|
export default DropdownMenu;
|
|
@@ -37,7 +37,6 @@ const prefixCls = _constants.cssClasses.PREFIX;
|
|
|
37
37
|
class DropdownMenu extends _baseComponent.default {
|
|
38
38
|
constructor(props) {
|
|
39
39
|
super(props);
|
|
40
|
-
this.menuRef = /*#__PURE__*/_react.default.createRef();
|
|
41
40
|
this.foundation = new _menuFoundation.default(this.adapter);
|
|
42
41
|
}
|
|
43
42
|
|
|
@@ -45,10 +44,6 @@ class DropdownMenu extends _baseComponent.default {
|
|
|
45
44
|
return Object.assign({}, super.adapter);
|
|
46
45
|
}
|
|
47
46
|
|
|
48
|
-
componentDidMount() {
|
|
49
|
-
this.foundation.autoFocus(this.menuRef.current);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
47
|
render() {
|
|
53
48
|
const _a = this.props,
|
|
54
49
|
{
|
|
@@ -60,8 +55,7 @@ class DropdownMenu extends _baseComponent.default {
|
|
|
60
55
|
|
|
61
56
|
return /*#__PURE__*/_react.default.createElement("ul", Object.assign({
|
|
62
57
|
role: "menu",
|
|
63
|
-
"aria-orientation": "vertical"
|
|
64
|
-
ref: this.menuRef
|
|
58
|
+
"aria-orientation": "vertical"
|
|
65
59
|
}, rest, {
|
|
66
60
|
className: (0, _classnames.default)("".concat(prefixCls, "-menu"), className),
|
|
67
61
|
style: style,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import BaseComponent from '../_base/baseComponent';
|
|
4
|
-
import { Position, TooltipProps, Trigger } from '../tooltip/index';
|
|
4
|
+
import Tooltip, { Position, TooltipProps, Trigger } from '../tooltip/index';
|
|
5
5
|
import DropdownMenu from './dropdownMenu';
|
|
6
6
|
import DropdownItem, { DropdownItemProps } from './dropdownItem';
|
|
7
7
|
import { DropdownDividerProps } from './dropdownDivider';
|
|
@@ -87,11 +87,13 @@ declare class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
|
|
|
87
87
|
closeOnEsc: boolean;
|
|
88
88
|
onEscKeyDown: (...args: any[]) => void;
|
|
89
89
|
};
|
|
90
|
+
tooltipRef: React.RefObject<Tooltip>;
|
|
90
91
|
constructor(props: DropdownProps);
|
|
91
92
|
context: DropdownContextType;
|
|
92
93
|
get adapter(): {
|
|
93
94
|
setPopVisible: (popVisible: boolean) => void;
|
|
94
95
|
notifyVisibleChange: (visible: boolean) => void;
|
|
96
|
+
getPopupId: () => string;
|
|
95
97
|
getContext(key: string): any;
|
|
96
98
|
getContexts(): any;
|
|
97
99
|
getProp(key: string): any;
|
|
@@ -63,6 +63,7 @@ class Dropdown extends _baseComponent.default {
|
|
|
63
63
|
popVisible: props.visible
|
|
64
64
|
};
|
|
65
65
|
this.foundation = new _foundation.default(this.adapter);
|
|
66
|
+
this.tooltipRef = /*#__PURE__*/_react.default.createRef();
|
|
66
67
|
}
|
|
67
68
|
|
|
68
69
|
get adapter() {
|
|
@@ -70,7 +71,8 @@ class Dropdown extends _baseComponent.default {
|
|
|
70
71
|
setPopVisible: popVisible => this.setState({
|
|
71
72
|
popVisible
|
|
72
73
|
}),
|
|
73
|
-
notifyVisibleChange: visible => this.props.onVisibleChange(visible)
|
|
74
|
+
notifyVisibleChange: visible => this.props.onVisibleChange(visible),
|
|
75
|
+
getPopupId: () => this.tooltipRef.current.getPopupId()
|
|
74
76
|
});
|
|
75
77
|
}
|
|
76
78
|
|
|
@@ -227,7 +229,8 @@ class Dropdown extends _baseComponent.default {
|
|
|
227
229
|
trigger: trigger,
|
|
228
230
|
onVisibleChange: this.handleVisibleChange,
|
|
229
231
|
showArrow: false,
|
|
230
|
-
returnFocusOnClose: true
|
|
232
|
+
returnFocusOnClose: true,
|
|
233
|
+
ref: this.tooltipRef
|
|
231
234
|
}, attr), /*#__PURE__*/_react.default.isValidElement(children) ? /*#__PURE__*/_react.default.cloneElement(children, {
|
|
232
235
|
//@ts-ignore
|
|
233
236
|
className: (0, _classnames.default)((0, _get2.default)(children, 'props.className'), {
|
package/lib/cjs/select/index.js
CHANGED
|
@@ -451,7 +451,7 @@ class Select extends _baseComponent.default {
|
|
|
451
451
|
} // Add isOptionChanged: There may be cases where the value is unchanged, but the optionList is updated. At this time, the label corresponding to the value may change, and the selected item needs to be updated
|
|
452
452
|
|
|
453
453
|
|
|
454
|
-
if (
|
|
454
|
+
if (!(0, _isEqual2.default)(this.props.value, prevProps.value) || isOptionsChanged) {
|
|
455
455
|
if ('value' in this.props) {
|
|
456
456
|
this.foundation.handleValueChange(this.props.value);
|
|
457
457
|
} else {
|
|
@@ -37,6 +37,12 @@ export interface TooltipProps extends BaseProps {
|
|
|
37
37
|
onVisibleChange?: (visible: boolean) => void;
|
|
38
38
|
onClickOutSide?: (e: React.MouseEvent) => void;
|
|
39
39
|
spacing?: number;
|
|
40
|
+
margin?: number | {
|
|
41
|
+
marginLeft: number;
|
|
42
|
+
marginTop: number;
|
|
43
|
+
marginRight: number;
|
|
44
|
+
marginBottom: number;
|
|
45
|
+
};
|
|
40
46
|
showArrow?: boolean | React.ReactNode;
|
|
41
47
|
zIndex?: number;
|
|
42
48
|
rePosKey?: string | number;
|
|
@@ -96,6 +102,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
|
|
|
96
102
|
onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
|
|
97
103
|
onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;
|
|
98
104
|
spacing: PropTypes.Requireable<number>;
|
|
105
|
+
margin: PropTypes.Requireable<NonNullable<number | object>>;
|
|
99
106
|
showArrow: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
|
|
100
107
|
zIndex: PropTypes.Requireable<number>;
|
|
101
108
|
rePosKey: PropTypes.Requireable<NonNullable<string | number>>;
|
|
@@ -134,6 +141,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
|
|
|
134
141
|
onVisibleChange: (...args: any[]) => void;
|
|
135
142
|
onClickOutSide: (...args: any[]) => void;
|
|
136
143
|
spacing: 8;
|
|
144
|
+
margin: 0;
|
|
137
145
|
showArrow: boolean;
|
|
138
146
|
wrapWhenSpecial: boolean;
|
|
139
147
|
zIndex: 1060;
|
|
@@ -177,5 +185,6 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
|
|
|
177
185
|
renderPortal: () => JSX.Element;
|
|
178
186
|
wrapSpan: (elem: React.ReactNode | React.ReactElement) => JSX.Element;
|
|
179
187
|
mergeEvents: (rawEvents: Record<string, any>, events: Record<string, any>) => {};
|
|
188
|
+
getPopupId: () => string;
|
|
180
189
|
render(): JSX.Element;
|
|
181
190
|
}
|
package/lib/cjs/tooltip/index.js
CHANGED
|
@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
|
|
8
|
+
var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
|
|
9
|
+
|
|
8
10
|
var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
|
|
9
11
|
|
|
10
12
|
var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
|
|
@@ -304,6 +306,10 @@ class Tooltip extends _baseComponent.default {
|
|
|
304
306
|
return mergedEvents;
|
|
305
307
|
};
|
|
306
308
|
|
|
309
|
+
this.getPopupId = () => {
|
|
310
|
+
return this.state.id;
|
|
311
|
+
};
|
|
312
|
+
|
|
307
313
|
this.state = {
|
|
308
314
|
visible: false,
|
|
309
315
|
|
|
@@ -615,7 +621,7 @@ class Tooltip extends _baseComponent.default {
|
|
|
615
621
|
this.props.visible ? this.foundation.delayShow() : this.foundation.delayHide();
|
|
616
622
|
}
|
|
617
623
|
|
|
618
|
-
if (prevProps.rePosKey
|
|
624
|
+
if (!(0, _isEqual2.default)(prevProps.rePosKey, this.props.rePosKey)) {
|
|
619
625
|
this.rePosition();
|
|
620
626
|
}
|
|
621
627
|
}
|
|
@@ -728,6 +734,7 @@ Tooltip.propTypes = {
|
|
|
728
734
|
onVisibleChange: _propTypes.default.func,
|
|
729
735
|
onClickOutSide: _propTypes.default.func,
|
|
730
736
|
spacing: _propTypes.default.number,
|
|
737
|
+
margin: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.object]),
|
|
731
738
|
showArrow: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.node]),
|
|
732
739
|
zIndex: _propTypes.default.number,
|
|
733
740
|
rePosKey: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
@@ -757,6 +764,7 @@ Tooltip.defaultProps = {
|
|
|
757
764
|
onVisibleChange: _noop2.default,
|
|
758
765
|
onClickOutSide: _noop2.default,
|
|
759
766
|
spacing: _constants2.numbers.SPACING,
|
|
767
|
+
margin: _constants2.numbers.MARGIN,
|
|
760
768
|
showArrow: true,
|
|
761
769
|
wrapWhenSpecial: true,
|
|
762
770
|
zIndex: _constants2.numbers.DEFAULT_Z_INDEX,
|
package/lib/es/_base/base.css
CHANGED
|
@@ -9,6 +9,7 @@ body {
|
|
|
9
9
|
--semi-transition_duration-fast:0ms;
|
|
10
10
|
--semi-transition_duration-faster:0ms;
|
|
11
11
|
--semi-transition_duration-fastest:0ms;
|
|
12
|
+
--semi-transition_duration-none:0ms;
|
|
12
13
|
--semi-transition_function-linear:linear;
|
|
13
14
|
--semi-transition_function-ease:ease;
|
|
14
15
|
--semi-transition_function-easeIn:ease-in;
|
|
@@ -71,7 +71,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
|
|
|
71
71
|
selected: boolean;
|
|
72
72
|
loading: boolean;
|
|
73
73
|
};
|
|
74
|
-
renderIcon: (type: string) => JSX.Element;
|
|
74
|
+
renderIcon: (type: string, haveMarginLeft?: boolean) => JSX.Element;
|
|
75
75
|
highlight: (searchText: React.ReactNode[]) => React.ReactNode[];
|
|
76
76
|
renderFlattenOption: (data: Data[]) => JSX.Element;
|
|
77
77
|
renderItem(renderData: Array<Entity>, content?: Array<React.ReactNode>): React.ReactNode[];
|
package/lib/es/cascader/item.js
CHANGED
|
@@ -93,27 +93,33 @@ export default class Item extends PureComponent {
|
|
|
93
93
|
return state;
|
|
94
94
|
};
|
|
95
95
|
|
|
96
|
-
this.renderIcon = type
|
|
96
|
+
this.renderIcon = function (type) {
|
|
97
|
+
let haveMarginLeft = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
98
|
+
|
|
99
|
+
const finalCls = style => {
|
|
100
|
+
return style + (haveMarginLeft ? " ".concat(prefixcls, "-icon-left") : '');
|
|
101
|
+
};
|
|
102
|
+
|
|
97
103
|
switch (type) {
|
|
98
104
|
case 'child':
|
|
99
105
|
return /*#__PURE__*/React.createElement(IconChevronRight, {
|
|
100
|
-
className: "".concat(prefixcls, "-icon ").concat(prefixcls, "-icon-expand")
|
|
106
|
+
className: finalCls("".concat(prefixcls, "-icon ").concat(prefixcls, "-icon-expand"))
|
|
101
107
|
});
|
|
102
108
|
|
|
103
109
|
case 'tick':
|
|
104
110
|
return /*#__PURE__*/React.createElement(IconTick, {
|
|
105
|
-
className: "".concat(prefixcls, "-icon ").concat(prefixcls, "-icon-active")
|
|
111
|
+
className: finalCls("".concat(prefixcls, "-icon ").concat(prefixcls, "-icon-active"))
|
|
106
112
|
});
|
|
107
113
|
|
|
108
114
|
case 'loading':
|
|
109
115
|
return /*#__PURE__*/React.createElement(Spin, {
|
|
110
|
-
wrapperClassName: "".concat(prefixcls, "-spin-icon")
|
|
116
|
+
wrapperClassName: finalCls("".concat(prefixcls, "-spin-icon"))
|
|
111
117
|
});
|
|
112
118
|
|
|
113
119
|
case 'empty':
|
|
114
120
|
return /*#__PURE__*/React.createElement("span", {
|
|
115
121
|
"aria-hidden": true,
|
|
116
|
-
className: "".concat(prefixcls, "-icon ").concat(prefixcls, "-icon-empty")
|
|
122
|
+
className: finalCls("".concat(prefixcls, "-icon ").concat(prefixcls, "-icon-empty"))
|
|
117
123
|
});
|
|
118
124
|
|
|
119
125
|
default:
|
|
@@ -261,7 +267,7 @@ export default class Item extends PureComponent {
|
|
|
261
267
|
indeterminate: halfCheckedKeys.has(item.key),
|
|
262
268
|
checked: checkedKeys.has(item.key),
|
|
263
269
|
className: "".concat(prefixcls, "-label-checkbox")
|
|
264
|
-
}), /*#__PURE__*/React.createElement("span", null, label)), showExpand ? this.renderIcon(loading ? 'loading' : 'child') : null);
|
|
270
|
+
}), /*#__PURE__*/React.createElement("span", null, label)), showExpand ? this.renderIcon(loading ? 'loading' : 'child', true) : null);
|
|
265
271
|
})));
|
|
266
272
|
|
|
267
273
|
if (showChildItem) {
|
|
@@ -9,7 +9,6 @@ declare class DropdownMenu extends BaseComponent<DropdownMenuProps> {
|
|
|
9
9
|
style: PropTypes.Requireable<object>;
|
|
10
10
|
};
|
|
11
11
|
static contextType: React.Context<import("./context").DropdownContextType>;
|
|
12
|
-
menuRef: React.RefObject<HTMLUListElement>;
|
|
13
12
|
constructor(props: DropdownMenuProps);
|
|
14
13
|
get adapter(): {
|
|
15
14
|
getContext(key: string): any;
|
|
@@ -25,7 +24,6 @@ declare class DropdownMenu extends BaseComponent<DropdownMenuProps> {
|
|
|
25
24
|
stopPropagation(e: any): void;
|
|
26
25
|
persistEvent: (event: any) => void;
|
|
27
26
|
};
|
|
28
|
-
componentDidMount(): void;
|
|
29
27
|
render(): JSX.Element;
|
|
30
28
|
}
|
|
31
29
|
export default DropdownMenu;
|
|
@@ -21,7 +21,6 @@ const prefixCls = cssClasses.PREFIX;
|
|
|
21
21
|
class DropdownMenu extends BaseComponent {
|
|
22
22
|
constructor(props) {
|
|
23
23
|
super(props);
|
|
24
|
-
this.menuRef = /*#__PURE__*/React.createRef();
|
|
25
24
|
this.foundation = new Foundation(this.adapter);
|
|
26
25
|
}
|
|
27
26
|
|
|
@@ -29,10 +28,6 @@ class DropdownMenu extends BaseComponent {
|
|
|
29
28
|
return Object.assign({}, super.adapter);
|
|
30
29
|
}
|
|
31
30
|
|
|
32
|
-
componentDidMount() {
|
|
33
|
-
this.foundation.autoFocus(this.menuRef.current);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
31
|
render() {
|
|
37
32
|
const _a = this.props,
|
|
38
33
|
{
|
|
@@ -44,8 +39,7 @@ class DropdownMenu extends BaseComponent {
|
|
|
44
39
|
|
|
45
40
|
return /*#__PURE__*/React.createElement("ul", Object.assign({
|
|
46
41
|
role: "menu",
|
|
47
|
-
"aria-orientation": "vertical"
|
|
48
|
-
ref: this.menuRef
|
|
42
|
+
"aria-orientation": "vertical"
|
|
49
43
|
}, rest, {
|
|
50
44
|
className: classnames("".concat(prefixCls, "-menu"), className),
|
|
51
45
|
style: style,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import BaseComponent from '../_base/baseComponent';
|
|
4
|
-
import { Position, TooltipProps, Trigger } from '../tooltip/index';
|
|
4
|
+
import Tooltip, { Position, TooltipProps, Trigger } from '../tooltip/index';
|
|
5
5
|
import DropdownMenu from './dropdownMenu';
|
|
6
6
|
import DropdownItem, { DropdownItemProps } from './dropdownItem';
|
|
7
7
|
import { DropdownDividerProps } from './dropdownDivider';
|
|
@@ -87,11 +87,13 @@ declare class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
|
|
|
87
87
|
closeOnEsc: boolean;
|
|
88
88
|
onEscKeyDown: (...args: any[]) => void;
|
|
89
89
|
};
|
|
90
|
+
tooltipRef: React.RefObject<Tooltip>;
|
|
90
91
|
constructor(props: DropdownProps);
|
|
91
92
|
context: DropdownContextType;
|
|
92
93
|
get adapter(): {
|
|
93
94
|
setPopVisible: (popVisible: boolean) => void;
|
|
94
95
|
notifyVisibleChange: (visible: boolean) => void;
|
|
96
|
+
getPopupId: () => string;
|
|
95
97
|
getContext(key: string): any;
|
|
96
98
|
getContexts(): any;
|
|
97
99
|
getProp(key: string): any;
|
package/lib/es/dropdown/index.js
CHANGED
|
@@ -39,6 +39,7 @@ class Dropdown extends BaseComponent {
|
|
|
39
39
|
popVisible: props.visible
|
|
40
40
|
};
|
|
41
41
|
this.foundation = new Foundation(this.adapter);
|
|
42
|
+
this.tooltipRef = /*#__PURE__*/React.createRef();
|
|
42
43
|
}
|
|
43
44
|
|
|
44
45
|
get adapter() {
|
|
@@ -46,7 +47,8 @@ class Dropdown extends BaseComponent {
|
|
|
46
47
|
setPopVisible: popVisible => this.setState({
|
|
47
48
|
popVisible
|
|
48
49
|
}),
|
|
49
|
-
notifyVisibleChange: visible => this.props.onVisibleChange(visible)
|
|
50
|
+
notifyVisibleChange: visible => this.props.onVisibleChange(visible),
|
|
51
|
+
getPopupId: () => this.tooltipRef.current.getPopupId()
|
|
50
52
|
});
|
|
51
53
|
}
|
|
52
54
|
|
|
@@ -203,7 +205,8 @@ class Dropdown extends BaseComponent {
|
|
|
203
205
|
trigger: trigger,
|
|
204
206
|
onVisibleChange: this.handleVisibleChange,
|
|
205
207
|
showArrow: false,
|
|
206
|
-
returnFocusOnClose: true
|
|
208
|
+
returnFocusOnClose: true,
|
|
209
|
+
ref: this.tooltipRef
|
|
207
210
|
}, attr), /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, {
|
|
208
211
|
//@ts-ignore
|
|
209
212
|
className: classnames(_get(children, 'props.className'), {
|
package/lib/es/select/index.js
CHANGED
|
@@ -405,7 +405,7 @@ class Select extends BaseComponent {
|
|
|
405
405
|
} // Add isOptionChanged: There may be cases where the value is unchanged, but the optionList is updated. At this time, the label corresponding to the value may change, and the selected item needs to be updated
|
|
406
406
|
|
|
407
407
|
|
|
408
|
-
if (
|
|
408
|
+
if (!_isEqual(this.props.value, prevProps.value) || isOptionsChanged) {
|
|
409
409
|
if ('value' in this.props) {
|
|
410
410
|
this.foundation.handleValueChange(this.props.value);
|
|
411
411
|
} else {
|
|
@@ -37,6 +37,12 @@ export interface TooltipProps extends BaseProps {
|
|
|
37
37
|
onVisibleChange?: (visible: boolean) => void;
|
|
38
38
|
onClickOutSide?: (e: React.MouseEvent) => void;
|
|
39
39
|
spacing?: number;
|
|
40
|
+
margin?: number | {
|
|
41
|
+
marginLeft: number;
|
|
42
|
+
marginTop: number;
|
|
43
|
+
marginRight: number;
|
|
44
|
+
marginBottom: number;
|
|
45
|
+
};
|
|
40
46
|
showArrow?: boolean | React.ReactNode;
|
|
41
47
|
zIndex?: number;
|
|
42
48
|
rePosKey?: string | number;
|
|
@@ -96,6 +102,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
|
|
|
96
102
|
onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
|
|
97
103
|
onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;
|
|
98
104
|
spacing: PropTypes.Requireable<number>;
|
|
105
|
+
margin: PropTypes.Requireable<NonNullable<number | object>>;
|
|
99
106
|
showArrow: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
|
|
100
107
|
zIndex: PropTypes.Requireable<number>;
|
|
101
108
|
rePosKey: PropTypes.Requireable<NonNullable<string | number>>;
|
|
@@ -134,6 +141,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
|
|
|
134
141
|
onVisibleChange: (...args: any[]) => void;
|
|
135
142
|
onClickOutSide: (...args: any[]) => void;
|
|
136
143
|
spacing: 8;
|
|
144
|
+
margin: 0;
|
|
137
145
|
showArrow: boolean;
|
|
138
146
|
wrapWhenSpecial: boolean;
|
|
139
147
|
zIndex: 1060;
|
|
@@ -177,5 +185,6 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
|
|
|
177
185
|
renderPortal: () => JSX.Element;
|
|
178
186
|
wrapSpan: (elem: React.ReactNode | React.ReactElement) => JSX.Element;
|
|
179
187
|
mergeEvents: (rawEvents: Record<string, any>, events: Record<string, any>) => {};
|
|
188
|
+
getPopupId: () => string;
|
|
180
189
|
render(): JSX.Element;
|
|
181
190
|
}
|
package/lib/es/tooltip/index.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _isEqual from "lodash/isEqual";
|
|
1
2
|
import _isFunction from "lodash/isFunction";
|
|
2
3
|
import _isEmpty from "lodash/isEmpty";
|
|
3
4
|
import _each from "lodash/each";
|
|
@@ -273,6 +274,10 @@ export default class Tooltip extends BaseComponent {
|
|
|
273
274
|
return mergedEvents;
|
|
274
275
|
};
|
|
275
276
|
|
|
277
|
+
this.getPopupId = () => {
|
|
278
|
+
return this.state.id;
|
|
279
|
+
};
|
|
280
|
+
|
|
276
281
|
this.state = {
|
|
277
282
|
visible: false,
|
|
278
283
|
|
|
@@ -585,7 +590,7 @@ export default class Tooltip extends BaseComponent {
|
|
|
585
590
|
this.props.visible ? this.foundation.delayShow() : this.foundation.delayHide();
|
|
586
591
|
}
|
|
587
592
|
|
|
588
|
-
if (prevProps.rePosKey
|
|
593
|
+
if (!_isEqual(prevProps.rePosKey, this.props.rePosKey)) {
|
|
589
594
|
this.rePosition();
|
|
590
595
|
}
|
|
591
596
|
}
|
|
@@ -695,6 +700,7 @@ Tooltip.propTypes = {
|
|
|
695
700
|
onVisibleChange: PropTypes.func,
|
|
696
701
|
onClickOutSide: PropTypes.func,
|
|
697
702
|
spacing: PropTypes.number,
|
|
703
|
+
margin: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
|
|
698
704
|
showArrow: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
|
|
699
705
|
zIndex: PropTypes.number,
|
|
700
706
|
rePosKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
@@ -724,6 +730,7 @@ Tooltip.defaultProps = {
|
|
|
724
730
|
onVisibleChange: _noop,
|
|
725
731
|
onClickOutSide: _noop,
|
|
726
732
|
spacing: numbers.SPACING,
|
|
733
|
+
margin: numbers.MARGIN,
|
|
727
734
|
showArrow: true,
|
|
728
735
|
wrapWhenSpecial: true,
|
|
729
736
|
zIndex: numbers.DEFAULT_Z_INDEX,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@douyinfe/semi-ui",
|
|
3
|
-
"version": "2.23.0
|
|
3
|
+
"version": "2.23.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es/index.js",
|
|
@@ -18,11 +18,11 @@
|
|
|
18
18
|
],
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"@douyinfe/semi-animation": "2.12.0",
|
|
21
|
-
"@douyinfe/semi-animation-react": "2.23.0
|
|
22
|
-
"@douyinfe/semi-foundation": "2.23.0
|
|
23
|
-
"@douyinfe/semi-icons": "2.23.0
|
|
21
|
+
"@douyinfe/semi-animation-react": "2.23.0",
|
|
22
|
+
"@douyinfe/semi-foundation": "2.23.0",
|
|
23
|
+
"@douyinfe/semi-icons": "2.23.0",
|
|
24
24
|
"@douyinfe/semi-illustrations": "2.15.0",
|
|
25
|
-
"@douyinfe/semi-theme-default": "2.23.0
|
|
25
|
+
"@douyinfe/semi-theme-default": "2.23.0",
|
|
26
26
|
"async-validator": "^3.5.0",
|
|
27
27
|
"classnames": "^2.2.6",
|
|
28
28
|
"copy-text-to-clipboard": "^2.1.1",
|
|
@@ -69,13 +69,13 @@
|
|
|
69
69
|
],
|
|
70
70
|
"author": "",
|
|
71
71
|
"license": "MIT",
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "a5195872c7df1a97551c6c23357bdb941b8fa807",
|
|
73
73
|
"devDependencies": {
|
|
74
74
|
"@babel/plugin-proposal-decorators": "^7.15.8",
|
|
75
75
|
"@babel/plugin-transform-runtime": "^7.15.8",
|
|
76
76
|
"@babel/preset-env": "^7.15.8",
|
|
77
77
|
"@babel/preset-react": "^7.14.5",
|
|
78
|
-
"@douyinfe/semi-scss-compile": "2.23.0
|
|
78
|
+
"@douyinfe/semi-scss-compile": "2.23.0",
|
|
79
79
|
"@storybook/addon-knobs": "^6.3.1",
|
|
80
80
|
"@types/lodash": "^4.14.176",
|
|
81
81
|
"@types/react": ">=16.0.0",
|