@douyinfe/semi-ui 2.1.0-beta.2 → 2.1.0-beta.3
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 +13 -1
- package/dist/css/semi.min.css +1 -1
- package/dist/umd/semi-ui.js +259 -134
- 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/es/autoComplete/index.d.ts +36 -11
- package/lib/es/button/index.d.ts +0 -1
- package/lib/es/button/index.js +1 -2
- package/lib/es/calendar/dayCalendar.js +1 -1
- package/lib/es/calendar/monthCalendar.js +1 -1
- package/lib/es/calendar/rangeCalendar.js +1 -1
- package/lib/es/calendar/weekCalendar.js +1 -1
- package/lib/es/cascader/index.d.ts +1 -0
- package/lib/es/cascader/index.js +15 -3
- package/lib/es/collapse/index.js +1 -5
- package/lib/es/datePicker/yearAndMonth.d.ts +2 -2
- package/lib/es/datePicker/yearAndMonth.js +1 -1
- package/lib/es/form/baseForm.d.ts +4 -10
- package/lib/es/form/baseForm.js +1 -2
- package/lib/es/form/field.d.ts +4 -22
- package/lib/es/form/field.js +2 -18
- package/lib/es/form/hoc/withField.d.ts +1 -1
- package/lib/es/form/hoc/withField.js +0 -3
- package/lib/es/iconButton/index.d.ts +0 -1
- package/lib/es/iconButton/index.js +0 -1
- package/lib/es/locale/localeConsumer.d.ts +5 -5
- package/lib/es/modal/useModal/HookModal.d.ts +3 -2
- package/lib/es/modal/useModal/index.js +1 -1
- package/lib/es/notification/index.d.ts +1 -1
- package/lib/es/notification/index.js +1 -1
- package/lib/es/popconfirm/index.d.ts +5 -1
- package/lib/es/popconfirm/index.js +10 -4
- package/lib/es/popover/index.d.ts +3 -1
- package/lib/es/popover/index.js +4 -8
- package/lib/es/radio/context.d.ts +1 -1
- package/lib/es/radio/radio.d.ts +2 -2
- package/lib/es/radio/radioGroup.d.ts +4 -4
- package/lib/es/rating/index.d.ts +1 -1
- package/lib/es/resizeObserver/index.js +1 -0
- package/lib/es/scrollList/scrollItem.d.ts +12 -11
- package/lib/es/scrollList/scrollItem.js +8 -8
- package/lib/es/select/index.js +18 -11
- package/lib/es/select/option.js +4 -4
- package/lib/es/select/utils.d.ts +1 -1
- package/lib/es/select/utils.js +12 -8
- package/lib/es/sideSheet/SideSheetContent.d.ts +1 -1
- package/lib/es/sideSheet/index.d.ts +3 -3
- package/lib/es/steps/basicSteps.js +2 -2
- package/lib/es/steps/fillSteps.js +3 -3
- package/lib/es/steps/navSteps.js +2 -2
- package/lib/es/tabs/TabBar.d.ts +5 -3
- package/lib/es/tabs/TabBar.js +12 -4
- package/lib/es/tabs/TabPane.d.ts +2 -1
- package/lib/es/tabs/TabPane.js +3 -2
- package/lib/es/tabs/index.d.ts +3 -1
- package/lib/es/tabs/index.js +85 -16
- package/lib/es/tabs/interface.d.ts +6 -1
- package/lib/es/tagInput/index.d.ts +3 -0
- package/lib/es/tagInput/index.js +6 -1
- package/lib/es/timePicker/Combobox.d.ts +10 -4
- package/lib/es/timePicker/Combobox.js +2 -1
- package/lib/es/timePicker/TimePicker.d.ts +1 -1
- package/lib/es/tooltip/index.d.ts +3 -0
- package/lib/es/tooltip/index.js +3 -0
- package/lib/es/tree/interface.d.ts +2 -2
- package/lib/es/treeSelect/index.d.ts +2 -11
- package/lib/es/treeSelect/index.js +2 -1
- package/lib/es/typography/base.d.ts +1 -1
- package/lib/es/typography/paragraph.d.ts +1 -1
- package/lib/es/typography/text.d.ts +1 -1
- package/lib/es/typography/title.d.ts +1 -1
- package/lib/es/upload/fileCard.d.ts +3 -18
- package/lib/es/upload/index.d.ts +4 -57
- package/lib/es/upload/interface.d.ts +56 -0
- package/lib/es/upload/interface.js +1 -0
- package/package.json +9 -8
|
@@ -8,8 +8,8 @@ import { ArrayElement } from '../_base/base';
|
|
|
8
8
|
import { RadioType } from './radio';
|
|
9
9
|
import { RadioGroupButtonSize, RadioMode } from './context';
|
|
10
10
|
export interface OptionItem {
|
|
11
|
-
label?:
|
|
12
|
-
value?: string;
|
|
11
|
+
label?: React.ReactNode;
|
|
12
|
+
value?: string | number;
|
|
13
13
|
disabled?: boolean;
|
|
14
14
|
extra?: React.ReactNode;
|
|
15
15
|
style?: React.CSSProperties;
|
|
@@ -17,11 +17,11 @@ export interface OptionItem {
|
|
|
17
17
|
}
|
|
18
18
|
export declare type Options = string[] | Array<OptionItem>;
|
|
19
19
|
export declare type RadioGroupProps = {
|
|
20
|
-
defaultValue?:
|
|
20
|
+
defaultValue?: string | number;
|
|
21
21
|
disabled?: boolean;
|
|
22
22
|
name?: string;
|
|
23
23
|
options?: Options;
|
|
24
|
-
value?:
|
|
24
|
+
value?: string | number;
|
|
25
25
|
onChange?: (event: RadioChangeEvent) => void;
|
|
26
26
|
className?: string;
|
|
27
27
|
style?: React.CSSProperties;
|
package/lib/es/rating/index.d.ts
CHANGED
|
@@ -23,7 +23,7 @@ export interface RatingProps {
|
|
|
23
23
|
onFocus?: (e: React.FocusEvent) => void;
|
|
24
24
|
onBlur?: (e: React.FocusEvent) => void;
|
|
25
25
|
onKeyDown?: (e: React.KeyboardEvent) => void;
|
|
26
|
-
onClick?: (e: React.MouseEvent, index: number) => void;
|
|
26
|
+
onClick?: (e: React.MouseEvent | React.KeyboardEvent, index: number) => void;
|
|
27
27
|
autoFocus?: boolean;
|
|
28
28
|
size?: 'small' | 'default' | number;
|
|
29
29
|
tooltips?: string[];
|
|
@@ -12,6 +12,7 @@ export default class ReactResizeObserver extends BaseComponent {
|
|
|
12
12
|
// using findDOMNode for two reasons:
|
|
13
13
|
// 1. cloning to insert a ref is unwieldy and not performant.
|
|
14
14
|
// 2. ensure that we resolve to an actual DOM node (instead of any JSX ref instance).
|
|
15
|
+
// eslint-disable-next-line
|
|
15
16
|
return findDOMNode(this.childNode || this);
|
|
16
17
|
} catch (error) {
|
|
17
18
|
// swallow error if findDOMNode is run on unmounted component.
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
/// <reference types="lodash" />
|
|
2
1
|
import React from 'react';
|
|
3
2
|
import BaseComponent from '../_base/baseComponent';
|
|
4
3
|
import PropTypes from 'prop-types';
|
|
5
4
|
import { Item, ScrollItemAdapter } from '@douyinfe/semi-foundation/lib/es/scrollList/itemFoundation';
|
|
6
5
|
import { Motion } from '../_base/base';
|
|
7
|
-
|
|
6
|
+
declare type DebounceSelectFn = (e: React.UIEvent, newSelectedNode: HTMLElement) => void;
|
|
7
|
+
export interface ScrollItemProps<T extends Item> {
|
|
8
8
|
mode?: string;
|
|
9
9
|
cycled?: boolean;
|
|
10
|
-
list?:
|
|
10
|
+
list?: T[];
|
|
11
11
|
selectedIndex?: number;
|
|
12
|
-
onSelect?: (data:
|
|
12
|
+
onSelect?: (data: T) => void;
|
|
13
13
|
transform?: (value: any, text: string) => string;
|
|
14
14
|
className?: string;
|
|
15
15
|
motion?: Motion;
|
|
@@ -20,7 +20,7 @@ export interface ScrollItemState {
|
|
|
20
20
|
prependCount: number;
|
|
21
21
|
appendCount: number;
|
|
22
22
|
}
|
|
23
|
-
export default class ScrollItem extends BaseComponent<ScrollItemProps
|
|
23
|
+
export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItemProps<T>, ScrollItemState> {
|
|
24
24
|
static propTypes: {
|
|
25
25
|
mode: PropTypes.Requireable<string>;
|
|
26
26
|
cycled: PropTypes.Requireable<boolean>;
|
|
@@ -36,7 +36,7 @@ export default class ScrollItem extends BaseComponent<ScrollItemProps, ScrollIte
|
|
|
36
36
|
static defaultProps: {
|
|
37
37
|
selectedIndex: number;
|
|
38
38
|
motion: boolean;
|
|
39
|
-
list:
|
|
39
|
+
list: readonly [];
|
|
40
40
|
onSelect: (...args: any[]) => void;
|
|
41
41
|
cycled: boolean;
|
|
42
42
|
mode: string;
|
|
@@ -48,12 +48,12 @@ export default class ScrollItem extends BaseComponent<ScrollItemProps, ScrollIte
|
|
|
48
48
|
selector: unknown;
|
|
49
49
|
scrollAnimation: any;
|
|
50
50
|
scrolling: boolean;
|
|
51
|
-
throttledAdjustList:
|
|
52
|
-
debouncedSelect:
|
|
51
|
+
throttledAdjustList: DebounceSelectFn;
|
|
52
|
+
debouncedSelect: DebounceSelectFn;
|
|
53
53
|
constructor(props?: {});
|
|
54
|
-
get adapter(): ScrollItemAdapter<ScrollItemProps,
|
|
54
|
+
get adapter(): ScrollItemAdapter<ScrollItemProps<T>, ScrollItemState, T>;
|
|
55
55
|
componentDidMount(): void;
|
|
56
|
-
componentDidUpdate(prevProps: ScrollItemProps): void;
|
|
56
|
+
componentDidUpdate(prevProps: ScrollItemProps<T>): void;
|
|
57
57
|
_cacheNode: (name: string, node: Element) => Element;
|
|
58
58
|
_cacheSelectedNode: (selectedNode: Element) => Element;
|
|
59
59
|
_cacheWillSelectNode: (node: Element) => Element;
|
|
@@ -74,7 +74,7 @@ export default class ScrollItem extends BaseComponent<ScrollItemProps, ScrollIte
|
|
|
74
74
|
indexIsSame: (index1: number, index2: number) => boolean;
|
|
75
75
|
isDisabledIndex: (index: number) => boolean;
|
|
76
76
|
isDisabledNode: (node: Element) => boolean;
|
|
77
|
-
isDisabledData: (data:
|
|
77
|
+
isDisabledData: (data: T) => boolean;
|
|
78
78
|
isWheelMode: () => boolean;
|
|
79
79
|
addClassToNode: (selectedNode: Element, selectedCls?: string) => void;
|
|
80
80
|
getIndexByNode: (node: Element) => number;
|
|
@@ -102,3 +102,4 @@ export default class ScrollItem extends BaseComponent<ScrollItemProps, ScrollIte
|
|
|
102
102
|
renderInfiniteList: () => JSX.Element;
|
|
103
103
|
render(): JSX.Element;
|
|
104
104
|
}
|
|
105
|
+
export {};
|
|
@@ -21,14 +21,6 @@ export default class ScrollItem extends BaseComponent {
|
|
|
21
21
|
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
22
22
|
super(props);
|
|
23
23
|
_this = this;
|
|
24
|
-
this.throttledAdjustList = throttle((e, nearestNode) => {
|
|
25
|
-
this.foundation.adjustInfiniteList(this.list, this.wrapper, nearestNode);
|
|
26
|
-
}, msPerFrame);
|
|
27
|
-
this.debouncedSelect = debounce((e, nearestNode) => {
|
|
28
|
-
this._cacheSelectedNode(nearestNode);
|
|
29
|
-
|
|
30
|
-
this.foundation.selectNode(nearestNode, this.list);
|
|
31
|
-
}, msPerFrame * 5);
|
|
32
24
|
|
|
33
25
|
this._cacheNode = (name, node) => name && node && Object.prototype.hasOwnProperty.call(this, name) && (this[name] = node);
|
|
34
26
|
|
|
@@ -394,6 +386,14 @@ export default class ScrollItem extends BaseComponent {
|
|
|
394
386
|
this.scrollAnimation = null; // cache if select action comes from outside
|
|
395
387
|
|
|
396
388
|
this.foundation = new ItemFoundation(this.adapter);
|
|
389
|
+
this.throttledAdjustList = throttle((e, nearestNode) => {
|
|
390
|
+
this.foundation.adjustInfiniteList(this.list, this.wrapper, nearestNode);
|
|
391
|
+
}, msPerFrame);
|
|
392
|
+
this.debouncedSelect = debounce((e, nearestNode) => {
|
|
393
|
+
this._cacheSelectedNode(nearestNode);
|
|
394
|
+
|
|
395
|
+
this.foundation.selectNode(nearestNode, this.list);
|
|
396
|
+
}, msPerFrame * 5);
|
|
397
397
|
}
|
|
398
398
|
|
|
399
399
|
get adapter() {
|
package/lib/es/select/index.js
CHANGED
|
@@ -22,10 +22,10 @@ import ConfigContext from '../configProvider/context';
|
|
|
22
22
|
import SelectFoundation from '@douyinfe/semi-foundation/lib/es/select/foundation';
|
|
23
23
|
import { cssClasses, strings, numbers } from '@douyinfe/semi-foundation/lib/es/select/constants';
|
|
24
24
|
import BaseComponent from '../_base/baseComponent';
|
|
25
|
-
import { isEqual, isString, noop } from 'lodash-es';
|
|
25
|
+
import { isEqual, isString, noop, get, isNumber } from 'lodash-es';
|
|
26
26
|
import Tag from '../tag/index';
|
|
27
27
|
import TagGroup from '../tag/group';
|
|
28
|
-
import
|
|
28
|
+
import LocaleConsumer from '../locale/localeConsumer';
|
|
29
29
|
import Popover from '../popover/index';
|
|
30
30
|
import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/lib/es/popover/constants';
|
|
31
31
|
import { FixedSizeList as List } from 'react-window';
|
|
@@ -177,9 +177,10 @@ class Select extends BaseComponent {
|
|
|
177
177
|
} = _this.props;
|
|
178
178
|
|
|
179
179
|
if (optionList && optionList.length) {
|
|
180
|
-
options = _mapInstanceProperty(optionList).call(optionList, itemOpt => _Object$assign({
|
|
180
|
+
options = _mapInstanceProperty(optionList).call(optionList, (itemOpt, index) => _Object$assign({
|
|
181
181
|
_show: true,
|
|
182
|
-
_selected: false
|
|
182
|
+
_selected: false,
|
|
183
|
+
_scrollIndex: index
|
|
183
184
|
}, itemOpt));
|
|
184
185
|
optionGroups[0] = {
|
|
185
186
|
children: options,
|
|
@@ -474,7 +475,7 @@ class Select extends BaseComponent {
|
|
|
474
475
|
}, option, {
|
|
475
476
|
focused: isFocused,
|
|
476
477
|
style: style
|
|
477
|
-
}), /*#__PURE__*/React.createElement(
|
|
478
|
+
}), /*#__PURE__*/React.createElement(LocaleConsumer, {
|
|
478
479
|
componentName: "Select"
|
|
479
480
|
}, locale => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
|
|
480
481
|
className: "".concat(prefixcls, "-create-tips")
|
|
@@ -754,15 +755,21 @@ class Select extends BaseComponent {
|
|
|
754
755
|
}
|
|
755
756
|
|
|
756
757
|
if (virtualize) {
|
|
757
|
-
let
|
|
758
|
+
let minItemIndex = -1;
|
|
758
759
|
|
|
759
|
-
_forEachInstanceProperty(selections).call(selections,
|
|
760
|
-
const
|
|
761
|
-
|
|
760
|
+
_forEachInstanceProperty(selections).call(selections, item => {
|
|
761
|
+
const itemIndex = get(item, '_scrollIndex');
|
|
762
|
+
/* When the itemIndex is legal */
|
|
763
|
+
|
|
764
|
+
if (isNumber(itemIndex) && itemIndex >= 0) {
|
|
765
|
+
minItemIndex = minItemIndex !== -1 && minItemIndex < itemIndex ? minItemIndex : itemIndex;
|
|
766
|
+
}
|
|
762
767
|
});
|
|
763
768
|
|
|
764
|
-
if (
|
|
765
|
-
|
|
769
|
+
if (minItemIndex !== -1) {
|
|
770
|
+
try {
|
|
771
|
+
this.virtualizeListRef.current.scrollToItem(minItemIndex, 'center');
|
|
772
|
+
} catch (error) {}
|
|
766
773
|
}
|
|
767
774
|
} else {
|
|
768
775
|
this.foundation.updateScrollTop();
|
package/lib/es/select/option.js
CHANGED
|
@@ -20,7 +20,7 @@ import classNames from 'classnames';
|
|
|
20
20
|
import PropTypes from 'prop-types';
|
|
21
21
|
import { isString } from 'lodash-es';
|
|
22
22
|
import { cssClasses } from '@douyinfe/semi-foundation/lib/es/select/constants';
|
|
23
|
-
import
|
|
23
|
+
import LocaleConsumer from '../locale/localeConsumer';
|
|
24
24
|
import { IconTick } from '@douyinfe/semi-icons';
|
|
25
25
|
import { getHighLightTextHTML } from '../_utils/index';
|
|
26
26
|
|
|
@@ -97,7 +97,7 @@ class Option extends PureComponent {
|
|
|
97
97
|
return null;
|
|
98
98
|
}
|
|
99
99
|
|
|
100
|
-
return /*#__PURE__*/React.createElement(
|
|
100
|
+
return /*#__PURE__*/React.createElement(LocaleConsumer, {
|
|
101
101
|
componentName: "Select"
|
|
102
102
|
}, locale => /*#__PURE__*/React.createElement("div", {
|
|
103
103
|
className: optionClassName
|
|
@@ -144,14 +144,14 @@ class Option extends PureComponent {
|
|
|
144
144
|
style: style
|
|
145
145
|
}, showTick ? /*#__PURE__*/React.createElement("div", {
|
|
146
146
|
className: selectedIconClassName
|
|
147
|
-
}, /*#__PURE__*/React.createElement(IconTick, null)) : null, /*#__PURE__*/React.createElement("div", {
|
|
147
|
+
}, /*#__PURE__*/React.createElement(IconTick, null)) : null, isString(children) ? /*#__PURE__*/React.createElement("div", {
|
|
148
148
|
className: "".concat(prefixCls, "-text")
|
|
149
149
|
}, this.renderOptionContent({
|
|
150
150
|
children,
|
|
151
151
|
config,
|
|
152
152
|
inputValue,
|
|
153
153
|
prefixCls
|
|
154
|
-
})));
|
|
154
|
+
})) : children);
|
|
155
155
|
}
|
|
156
156
|
|
|
157
157
|
}
|
package/lib/es/select/utils.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { OptionProps } from './option';
|
|
3
3
|
import { OptionGroupProps } from './optionGroup';
|
|
4
|
-
declare const generateOption: (child: React.ReactElement, parent
|
|
4
|
+
declare const generateOption: (child: React.ReactElement, parent: any, index: number) => OptionProps;
|
|
5
5
|
declare const getOptionsFromGroup: (selectChildren: React.ReactNode) => {
|
|
6
6
|
optionGroups: OptionGroupProps[];
|
|
7
7
|
options: OptionProps[];
|
package/lib/es/select/utils.js
CHANGED
|
@@ -20,7 +20,7 @@ var __rest = this && this.__rest || function (s, e) {
|
|
|
20
20
|
import React from 'react';
|
|
21
21
|
import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
|
|
22
22
|
|
|
23
|
-
const generateOption = (child, parent) => {
|
|
23
|
+
const generateOption = (child, parent, index) => {
|
|
24
24
|
const childProps = child.props;
|
|
25
25
|
|
|
26
26
|
if (!child || !childProps) {
|
|
@@ -32,7 +32,8 @@ const generateOption = (child, parent) => {
|
|
|
32
32
|
// Drop-down menu rendering priority label value, children, value in turn downgrade
|
|
33
33
|
label: childProps.label || childProps.children || childProps.value,
|
|
34
34
|
_show: true,
|
|
35
|
-
_selected: false
|
|
35
|
+
_selected: false,
|
|
36
|
+
_scrollIndex: index
|
|
36
37
|
}, childProps), {
|
|
37
38
|
_parentGroup: parent
|
|
38
39
|
});
|
|
@@ -41,8 +42,6 @@ const generateOption = (child, parent) => {
|
|
|
41
42
|
};
|
|
42
43
|
|
|
43
44
|
const getOptionsFromGroup = selectChildren => {
|
|
44
|
-
var _context;
|
|
45
|
-
|
|
46
45
|
let optionGroups = [];
|
|
47
46
|
let options = [];
|
|
48
47
|
const emptyGroup = {
|
|
@@ -52,14 +51,16 @@ const getOptionsFromGroup = selectChildren => {
|
|
|
52
51
|
}; // avoid null
|
|
53
52
|
// eslint-disable-next-line max-len
|
|
54
53
|
|
|
55
|
-
|
|
56
|
-
|
|
54
|
+
let childNodes = React.Children.toArray(selectChildren);
|
|
55
|
+
childNodes = _filterInstanceProperty(childNodes).call(childNodes, childNode => childNode && childNode.props);
|
|
57
56
|
let type = '';
|
|
57
|
+
let optionIndex = -1;
|
|
58
58
|
|
|
59
59
|
_forEachInstanceProperty(childNodes).call(childNodes, child => {
|
|
60
60
|
if (child.type.isSelectOption) {
|
|
61
61
|
type = 'option';
|
|
62
|
-
|
|
62
|
+
optionIndex++;
|
|
63
|
+
const option = generateOption(child, undefined, optionIndex);
|
|
63
64
|
emptyGroup.children.push(option);
|
|
64
65
|
options.push(option);
|
|
65
66
|
} else if (child.type.isSelectOptionGroup) {
|
|
@@ -74,7 +75,10 @@ const getOptionsFromGroup = selectChildren => {
|
|
|
74
75
|
|
|
75
76
|
children = React.Children.toArray(children);
|
|
76
77
|
|
|
77
|
-
const childrenOption = _mapInstanceProperty(children).call(children, option =>
|
|
78
|
+
const childrenOption = _mapInstanceProperty(children).call(children, option => {
|
|
79
|
+
optionIndex++;
|
|
80
|
+
return generateOption(option, restGroupProps, optionIndex);
|
|
81
|
+
});
|
|
78
82
|
|
|
79
83
|
const group = _Object$assign(_Object$assign({}, child.props), {
|
|
80
84
|
children: childrenOption,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { CSSProperties } from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
export interface SideSheetContentProps {
|
|
4
|
-
onClose?: (e: React.MouseEvent
|
|
4
|
+
onClose?: (e: React.MouseEvent) => void;
|
|
5
5
|
mask?: boolean;
|
|
6
6
|
maskStyle?: CSSProperties;
|
|
7
7
|
maskClosable?: boolean;
|
|
@@ -13,7 +13,7 @@ export interface SideSheetReactProps extends SideSheetProps {
|
|
|
13
13
|
title?: React.ReactNode;
|
|
14
14
|
footer?: React.ReactNode;
|
|
15
15
|
children?: React.ReactNode;
|
|
16
|
-
onCancel?: (e: React.MouseEvent) => void;
|
|
16
|
+
onCancel?: (e: React.MouseEvent | React.KeyboardEvent) => void;
|
|
17
17
|
}
|
|
18
18
|
export { SideSheetState };
|
|
19
19
|
export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSheetState> {
|
|
@@ -52,8 +52,8 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
|
|
|
52
52
|
componentDidMount(): void;
|
|
53
53
|
componentDidUpdate(prevProps: SideSheetReactProps, prevState: SideSheetState, snapshot: any): void;
|
|
54
54
|
componentWillUnmount(): void;
|
|
55
|
-
handleCancel: (e: MouseEvent) => void;
|
|
56
|
-
handleKeyDown: (e:
|
|
55
|
+
handleCancel: (e: React.MouseEvent) => void;
|
|
56
|
+
handleKeyDown: (e: KeyboardEvent) => void;
|
|
57
57
|
renderContent(): JSX.Element;
|
|
58
58
|
render(): JSX.Element;
|
|
59
59
|
}
|
|
@@ -2,7 +2,7 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
|
|
|
2
2
|
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
|
3
3
|
import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
|
|
4
4
|
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
|
5
|
-
import React, { cloneElement, Children, useMemo } from 'react';
|
|
5
|
+
import React, { cloneElement, Children, useMemo, isValidElement } from 'react';
|
|
6
6
|
import PropTypes from 'prop-types';
|
|
7
7
|
import cls from 'classnames';
|
|
8
8
|
import { stepsClasses as css } from '@douyinfe/semi-foundation/lib/es/steps/constants';
|
|
@@ -26,7 +26,7 @@ const Steps = props => {
|
|
|
26
26
|
const inner = useMemo(() => {
|
|
27
27
|
var _context;
|
|
28
28
|
|
|
29
|
-
const filteredChildren = _filterInstanceProperty(_context = Children.toArray(children)).call(_context, c =>
|
|
29
|
+
const filteredChildren = _filterInstanceProperty(_context = Children.toArray(children)).call(_context, c => /*#__PURE__*/isValidElement(c));
|
|
30
30
|
|
|
31
31
|
const content = _mapInstanceProperty(Children).call(Children, filteredChildren, (child, index) => {
|
|
32
32
|
if (!child) {
|
|
@@ -2,7 +2,7 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
|
|
|
2
2
|
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
|
3
3
|
import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
|
|
4
4
|
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
|
5
|
-
import React, { cloneElement, Children, useMemo } from 'react';
|
|
5
|
+
import React, { cloneElement, Children, useMemo, isValidElement } from 'react';
|
|
6
6
|
import PropTypes from 'prop-types';
|
|
7
7
|
import cls from 'classnames';
|
|
8
8
|
import { stepsClasses as css } from '@douyinfe/semi-foundation/lib/es/steps/constants';
|
|
@@ -25,7 +25,7 @@ const Steps = props => {
|
|
|
25
25
|
const inner = useMemo(() => {
|
|
26
26
|
var _context;
|
|
27
27
|
|
|
28
|
-
const filteredChildren = _filterInstanceProperty(_context = Children.toArray(children)).call(_context, c =>
|
|
28
|
+
const filteredChildren = _filterInstanceProperty(_context = Children.toArray(children)).call(_context, c => /*#__PURE__*/isValidElement(c));
|
|
29
29
|
|
|
30
30
|
const colStyle = direction === 'vertical' ? null : {
|
|
31
31
|
width: "".concat(100 / filteredChildren.length, "%")
|
|
@@ -69,7 +69,7 @@ const Steps = props => {
|
|
|
69
69
|
});
|
|
70
70
|
|
|
71
71
|
return content;
|
|
72
|
-
}, [children, initial, prefixCls, direction, status, current]);
|
|
72
|
+
}, [children, initial, prefixCls, direction, status, current, onChange]);
|
|
73
73
|
const wrapperCls = cls(className, {
|
|
74
74
|
[prefixCls]: true,
|
|
75
75
|
[_concatInstanceProperty(_context2 = "".concat(prefixCls, "-")).call(_context2, direction)]: true
|
package/lib/es/steps/navSteps.js
CHANGED
|
@@ -2,7 +2,7 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
|
|
|
2
2
|
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
|
3
3
|
import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
|
|
4
4
|
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
|
5
|
-
import React, { cloneElement, Children, useMemo } from 'react';
|
|
5
|
+
import React, { cloneElement, Children, useMemo, isValidElement } from 'react';
|
|
6
6
|
import PropTypes from 'prop-types';
|
|
7
7
|
import cls from 'classnames';
|
|
8
8
|
import { stepsClasses as css } from '@douyinfe/semi-foundation/lib/es/steps/constants';
|
|
@@ -23,7 +23,7 @@ const Steps = props => {
|
|
|
23
23
|
const inner = useMemo(() => {
|
|
24
24
|
var _context;
|
|
25
25
|
|
|
26
|
-
const filteredChildren = _filterInstanceProperty(_context = Children.toArray(children)).call(_context, c =>
|
|
26
|
+
const filteredChildren = _filterInstanceProperty(_context = Children.toArray(children)).call(_context, c => /*#__PURE__*/isValidElement(c));
|
|
27
27
|
|
|
28
28
|
const total = filteredChildren.length;
|
|
29
29
|
|
package/lib/es/tabs/TabBar.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { MouseEvent, ReactNode } from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
|
-
import {
|
|
3
|
+
import { PlainTab, TabBarProps } from './interface';
|
|
4
4
|
export interface TabBarState {
|
|
5
5
|
endInd: number;
|
|
6
6
|
rePosKey: number;
|
|
@@ -22,6 +22,8 @@ declare class TabBar extends React.Component<TabBarProps, TabBarState> {
|
|
|
22
22
|
tabBarExtraContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
23
23
|
tabPosition: PropTypes.Requireable<string>;
|
|
24
24
|
type: PropTypes.Requireable<string>;
|
|
25
|
+
closable: PropTypes.Requireable<boolean>;
|
|
26
|
+
deleteTabItem: PropTypes.Requireable<(...args: any[]) => any>;
|
|
25
27
|
};
|
|
26
28
|
uuid: string;
|
|
27
29
|
constructor(props: TabBarProps);
|
|
@@ -32,7 +34,7 @@ declare class TabBar extends React.Component<TabBarProps, TabBarState> {
|
|
|
32
34
|
renderTabComponents: (list: Array<PlainTab>) => Array<ReactNode>;
|
|
33
35
|
handleArrowClick: (items: Array<OverflowItem>, pos: 'start' | 'end') => void;
|
|
34
36
|
renderCollapse: (items: Array<OverflowItem>, icon: ReactNode, pos: 'start' | 'end') => ReactNode;
|
|
35
|
-
renderOverflow: (items: [
|
|
37
|
+
renderOverflow: (items: any[]) => Array<ReactNode>;
|
|
36
38
|
renderCollapsedTab: () => ReactNode;
|
|
37
39
|
render(): ReactNode;
|
|
38
40
|
private _isActive;
|
package/lib/es/tabs/TabBar.js
CHANGED
|
@@ -24,7 +24,7 @@ import OverflowList from '../overflowList';
|
|
|
24
24
|
import Dropdown from '../dropdown';
|
|
25
25
|
import Button from '../button';
|
|
26
26
|
import { isEmpty } from 'lodash-es';
|
|
27
|
-
import { IconChevronRight,
|
|
27
|
+
import { IconChevronLeft, IconChevronRight, IconClose } from '@douyinfe/semi-icons';
|
|
28
28
|
import { getUuidv4 } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
|
|
29
29
|
|
|
30
30
|
class TabBar extends React.Component {
|
|
@@ -51,9 +51,15 @@ class TabBar extends React.Component {
|
|
|
51
51
|
|
|
52
52
|
this.renderTabItem = panel => {
|
|
53
53
|
const {
|
|
54
|
-
size
|
|
54
|
+
size,
|
|
55
|
+
type,
|
|
56
|
+
deleteTabItem
|
|
55
57
|
} = this.props;
|
|
56
58
|
const panelIcon = panel.icon ? this.renderIcon(panel.icon) : null;
|
|
59
|
+
const closableIcon = type === 'card' && panel.closable ? /*#__PURE__*/React.createElement(IconClose, {
|
|
60
|
+
className: "".concat(cssClasses.TABS_TAB, "-icon-close"),
|
|
61
|
+
onClick: e => deleteTabItem(panel.itemKey, e)
|
|
62
|
+
}) : null;
|
|
57
63
|
let events = {};
|
|
58
64
|
const key = panel.itemKey;
|
|
59
65
|
|
|
@@ -76,7 +82,7 @@ class TabBar extends React.Component {
|
|
|
76
82
|
}, events, {
|
|
77
83
|
className: className,
|
|
78
84
|
key: this._getItemKey(key)
|
|
79
|
-
}), panelIcon, panel.tab);
|
|
85
|
+
}), panelIcon, panel.tab, closableIcon);
|
|
80
86
|
};
|
|
81
87
|
|
|
82
88
|
this.renderTabComponents = list => _mapInstanceProperty(list).call(list, panel => this.renderTabItem(panel));
|
|
@@ -278,6 +284,8 @@ TabBar.propTypes = {
|
|
|
278
284
|
style: PropTypes.object,
|
|
279
285
|
tabBarExtraContent: PropTypes.node,
|
|
280
286
|
tabPosition: PropTypes.oneOf(strings.POSITION_MAP),
|
|
281
|
-
type: PropTypes.oneOf(strings.TYPE_MAP)
|
|
287
|
+
type: PropTypes.oneOf(strings.TYPE_MAP),
|
|
288
|
+
closable: PropTypes.bool,
|
|
289
|
+
deleteTabItem: PropTypes.func
|
|
282
290
|
};
|
|
283
291
|
export default TabBar;
|
package/lib/es/tabs/TabPane.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { PureComponent, ReactNode } from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
|
-
import {
|
|
3
|
+
import { PlainTab, TabPaneProps } from './interface';
|
|
4
4
|
declare class TabPane extends PureComponent<TabPaneProps> {
|
|
5
5
|
static isTabPane: boolean;
|
|
6
6
|
static contextType: React.Context<import("./interface").TabContextValue>;
|
|
@@ -12,6 +12,7 @@ declare class TabPane extends PureComponent<TabPaneProps> {
|
|
|
12
12
|
itemKey: PropTypes.Requireable<string>;
|
|
13
13
|
tab: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
14
14
|
icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
15
|
+
closable: PropTypes.Requireable<boolean>;
|
|
15
16
|
};
|
|
16
17
|
lastActiveKey: string;
|
|
17
18
|
ref: React.RefObject<HTMLDivElement>;
|
package/lib/es/tabs/TabPane.js
CHANGED
|
@@ -15,7 +15,7 @@ var __rest = this && this.__rest || function (s, e) {
|
|
|
15
15
|
return t;
|
|
16
16
|
};
|
|
17
17
|
|
|
18
|
-
import React, {
|
|
18
|
+
import React, { createRef, PureComponent } from 'react';
|
|
19
19
|
import PropTypes from 'prop-types';
|
|
20
20
|
import cls from 'classnames';
|
|
21
21
|
import { cssClasses } from '@douyinfe/semi-foundation/lib/es/tabs/constants';
|
|
@@ -131,6 +131,7 @@ TabPane.propTypes = {
|
|
|
131
131
|
disabled: PropTypes.bool,
|
|
132
132
|
itemKey: PropTypes.string,
|
|
133
133
|
tab: PropTypes.node,
|
|
134
|
-
icon: PropTypes.node
|
|
134
|
+
icon: PropTypes.node,
|
|
135
|
+
closable: PropTypes.bool
|
|
135
136
|
};
|
|
136
137
|
export default TabPane;
|
package/lib/es/tabs/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { MouseEvent, ReactElement, ReactNode, RefCallback, RefObject } from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import TabsFoundation, { TabsAdapter } from '@douyinfe/semi-foundation/lib/es/tabs/foundation';
|
|
4
4
|
import BaseComponent from '../_base/baseComponent';
|
|
@@ -32,6 +32,7 @@ declare class Tabs extends BaseComponent<TabsProps, TabsState> {
|
|
|
32
32
|
tabPaneMotion: PropTypes.Requireable<boolean | object>;
|
|
33
33
|
tabPosition: PropTypes.Requireable<string>;
|
|
34
34
|
type: PropTypes.Requireable<string>;
|
|
35
|
+
onTabClose: PropTypes.Requireable<(...args: any[]) => any>;
|
|
35
36
|
};
|
|
36
37
|
static defaultProps: TabsProps;
|
|
37
38
|
contentRef: RefObject<HTMLDivElement>;
|
|
@@ -45,6 +46,7 @@ declare class Tabs extends BaseComponent<TabsProps, TabsState> {
|
|
|
45
46
|
onTabClick: (activeKey: string, event: MouseEvent<HTMLDivElement>) => void;
|
|
46
47
|
rePosChildren: (children: ReactElement[], activeKey: string) => ReactElement[];
|
|
47
48
|
getActiveItem: () => ReactNode | ReactNode[];
|
|
49
|
+
deleteTabItem: (tabKey: string, event: MouseEvent<HTMLDivElement>) => void;
|
|
48
50
|
render(): ReactNode;
|
|
49
51
|
}
|
|
50
52
|
export default Tabs;
|