@laser-ui/components 1.2.0 → 1.4.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/CHANGELOG.md +10 -0
- package/dropdown/Dropdown.js +1 -1
- package/dropdown/internal/DropdownGroup.js +1 -1
- package/dropdown/internal/DropdownSub.js +1 -1
- package/empty/Empty.js +1 -1
- package/menu/internal/MenuGroup.js +1 -1
- package/menu/internal/MenuSub.js +2 -2
- package/package.json +2 -2
- package/resources.json +4 -4
- package/select/Select.js +1 -1
- package/tabs/Tabs.js +23 -9
- package/tabs/types.d.ts +1 -0
- package/tree/internal/TreePanel.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
# [1.4.0](https://github.com/laser-ui/laser-ui/compare/v1.3.0...v1.4.0) (2024-10-10)
|
|
6
|
+
|
|
7
|
+
### Features
|
|
8
|
+
|
|
9
|
+
- **components:** tabs support `lazyLoading` ([f23b605](https://github.com/laser-ui/laser-ui/commit/f23b605cf8d935c8221b962cd352808d05ce2b75))
|
|
10
|
+
|
|
11
|
+
# [1.3.0](https://github.com/laser-ui/laser-ui/compare/v1.2.0...v1.3.0) (2024-09-27)
|
|
12
|
+
|
|
13
|
+
**Note:** Version bump only for package @laser-ui/components
|
|
14
|
+
|
|
5
15
|
# [1.2.0](https://github.com/laser-ui/laser-ui/compare/v1.1.1...v1.2.0) (2024-09-12)
|
|
6
16
|
|
|
7
17
|
### Features
|
package/dropdown/Dropdown.js
CHANGED
|
@@ -372,7 +372,7 @@ function DropdownFC(props, ref) {
|
|
|
372
372
|
}, children: renderPopup(_jsxs("div", Object.assign({}, mergeCS(styled('dropdown-popup'), {
|
|
373
373
|
style: Object.assign({ zIndex }, transitionStyle),
|
|
374
374
|
}), { ref: popupRef, children: [(() => {
|
|
375
|
-
const el = (_jsx("ul", Object.assign({}, styled('dropdown__list'), { ref: ulRef, id: id, tabIndex: -1, role: "menu", "aria-labelledby": triggerId, "aria-activedescendant": isUndefined(focusId) ? undefined : getItemId(focusId), children: list.length === 0 ? _jsx("div", Object.assign({}, styled('dropdown__empty'), { children: t('No
|
|
375
|
+
const el = (_jsx("ul", Object.assign({}, styled('dropdown__list'), { ref: ulRef, id: id, tabIndex: -1, role: "menu", "aria-labelledby": triggerId, "aria-activedescendant": isUndefined(focusId) ? undefined : getItemId(focusId), children: list.length === 0 ? _jsx("div", Object.assign({}, styled('dropdown__empty'), { children: t('No data') })) : nodes })));
|
|
376
376
|
return popupRender ? popupRender(el) : el;
|
|
377
377
|
})(), arrow && _jsx("div", Object.assign({}, styled('dropdown__arrow')))] }))) })));
|
|
378
378
|
} }) })] }));
|
|
@@ -4,5 +4,5 @@ import { mergeCS } from '../../utils';
|
|
|
4
4
|
export function DropdownGroup(props) {
|
|
5
5
|
const { children, styled, id, level, list, empty } = props;
|
|
6
6
|
const { t } = useTranslation();
|
|
7
|
-
return (_jsxs("ul", Object.assign({}, styled('dropdown__group-list'), { role: "group", "aria-labelledby": id, children: [_jsx("li", Object.assign({}, mergeCS(styled('dropdown__group-title'), { style: { paddingLeft: 12 + level * 16 } }), { id: id, role: "presentation", children: children })), empty ? _jsx("div", Object.assign({}, mergeCS(styled('dropdown__empty'), { style: { paddingLeft: 12 + (level + 1) * 16 } }), { children: t('No
|
|
7
|
+
return (_jsxs("ul", Object.assign({}, styled('dropdown__group-list'), { role: "group", "aria-labelledby": id, children: [_jsx("li", Object.assign({}, mergeCS(styled('dropdown__group-title'), { style: { paddingLeft: 12 + level * 16 } }), { id: id, role: "presentation", children: children })), empty ? _jsx("div", Object.assign({}, mergeCS(styled('dropdown__empty'), { style: { paddingLeft: 12 + (level + 1) * 16 } }), { children: t('No data') })) : list] })));
|
|
8
8
|
}
|
|
@@ -82,6 +82,6 @@ export const DropdownSub = forwardRef((props, ref) => {
|
|
|
82
82
|
}
|
|
83
83
|
return renderPopup(_jsx("div", Object.assign({}, mergeCS(styled('dropdown-popup'), {
|
|
84
84
|
style: Object.assign({ zIndex }, transitionStyle),
|
|
85
|
-
}), { ref: popupRef, children: _jsx("ul", Object.assign({}, styled('dropdown__list'), { role: "menu", "aria-labelledby": id, children: empty ? (_jsx("div", Object.assign({}, mergeCS(styled('dropdown__empty'), { style: { paddingLeft: 12 + level * 16 } }), { children: t('No
|
|
85
|
+
}), { ref: popupRef, children: _jsx("ul", Object.assign({}, styled('dropdown__list'), { role: "menu", "aria-labelledby": id, children: empty ? (_jsx("div", Object.assign({}, mergeCS(styled('dropdown__empty'), { style: { paddingLeft: 12 + level * 16 } }), { children: t('No data') }))) : (list) })) })));
|
|
86
86
|
} }) })] })) }));
|
|
87
87
|
});
|
package/empty/Empty.js
CHANGED
|
@@ -13,6 +13,6 @@ export const Empty = (props) => {
|
|
|
13
13
|
return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('empty'), {
|
|
14
14
|
className: restProps.className,
|
|
15
15
|
style: restProps.style,
|
|
16
|
-
}), { children: [(isUndefined(image) || image === SIMPLE_IMG || checkNodeExist(image)) && (_jsx("div", Object.assign({}, styled('empty__img'), { children: isUndefined(image) ? (_jsx(Icon, { size: [115, 95], children: _jsx("svg", { viewBox: "0 0 184 152", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { fill: "none", fillRule: "evenodd", children: [_jsxs("g", { transform: "translate(24 31.67)", children: [_jsx("ellipse", { fillOpacity: ".8", fill: "#F5F5F7", cx: "67.797", cy: "106.89", rx: "67.797", ry: "12.668" }), _jsx("path", { d: "M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z", fill: "#AEB8C2" }), _jsx("path", { d: "M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z", fill: "url(#linearGradient-1)", transform: "translate(13.56)" }), _jsx("path", { d: "M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z", fill: "#F5F5F7" }), _jsx("path", { d: "M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z", fill: "#DCE0E6" })] }), _jsx("path", { d: "M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z", fill: "#DCE0E6" }), _jsxs("g", { transform: "translate(149.65 15.383)", fill: "#FFF", children: [_jsx("ellipse", { cx: "20.654", cy: "3.167", rx: "2.849", ry: "2.815" }), _jsx("path", { d: "M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z" })] })] }) }) })) : image === SIMPLE_IMG ? (_jsx(Icon, { size: [64, 41], children: _jsx("svg", { viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [_jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), _jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [_jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), _jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }) })) : (image) }))), (isUndefined(description) || checkNodeExist(description)) && (_jsx("div", Object.assign({}, styled('empty__description'), { children: isUndefined(description) ? t('No
|
|
16
|
+
}), { children: [(isUndefined(image) || image === SIMPLE_IMG || checkNodeExist(image)) && (_jsx("div", Object.assign({}, styled('empty__img'), { children: isUndefined(image) ? (_jsx(Icon, { size: [115, 95], children: _jsx("svg", { viewBox: "0 0 184 152", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { fill: "none", fillRule: "evenodd", children: [_jsxs("g", { transform: "translate(24 31.67)", children: [_jsx("ellipse", { fillOpacity: ".8", fill: "#F5F5F7", cx: "67.797", cy: "106.89", rx: "67.797", ry: "12.668" }), _jsx("path", { d: "M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z", fill: "#AEB8C2" }), _jsx("path", { d: "M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z", fill: "url(#linearGradient-1)", transform: "translate(13.56)" }), _jsx("path", { d: "M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z", fill: "#F5F5F7" }), _jsx("path", { d: "M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z", fill: "#DCE0E6" })] }), _jsx("path", { d: "M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z", fill: "#DCE0E6" }), _jsxs("g", { transform: "translate(149.65 15.383)", fill: "#FFF", children: [_jsx("ellipse", { cx: "20.654", cy: "3.167", rx: "2.849", ry: "2.815" }), _jsx("path", { d: "M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z" })] })] }) }) })) : image === SIMPLE_IMG ? (_jsx(Icon, { size: [64, 41], children: _jsx("svg", { viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [_jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), _jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [_jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), _jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }) })) : (image) }))), (isUndefined(description) || checkNodeExist(description)) && (_jsx("div", Object.assign({}, styled('empty__description'), { children: isUndefined(description) ? t('No data') : description }))), checkNodeExist(children) && _jsx("div", Object.assign({}, styled('empty__footer'), { children: children }))] })));
|
|
17
17
|
};
|
|
18
18
|
Empty.SIMPLE_IMG = SIMPLE_IMG;
|
|
@@ -4,5 +4,5 @@ import { mergeCS } from '../../utils';
|
|
|
4
4
|
export function MenuGroup(props) {
|
|
5
5
|
const { children, styled, id, level, space, step, list, empty } = props;
|
|
6
6
|
const { t } = useTranslation();
|
|
7
|
-
return (_jsxs("ul", Object.assign({}, styled('menu__group-list'), { role: "group", "aria-labelledby": id, children: [_jsx("li", Object.assign({}, mergeCS(styled('menu__group-title'), { style: { paddingLeft: space + level * step } }), { id: id, role: "presentation", children: children })), empty ? _jsx("div", Object.assign({}, mergeCS(styled('menu__empty'), { style: { paddingLeft: space + (level + 1) * step } }), { children: t('No
|
|
7
|
+
return (_jsxs("ul", Object.assign({}, styled('menu__group-list'), { role: "group", "aria-labelledby": id, children: [_jsx("li", Object.assign({}, mergeCS(styled('menu__group-title'), { style: { paddingLeft: space + level * step } }), { id: id, role: "presentation", children: children })), empty ? _jsx("div", Object.assign({}, mergeCS(styled('menu__empty'), { style: { paddingLeft: space + (level + 1) * step } }), { children: t('No data') })) : list] })));
|
|
8
8
|
}
|
package/menu/internal/MenuSub.js
CHANGED
|
@@ -107,7 +107,7 @@ export const MenuSub = forwardRef((props, ref) => {
|
|
|
107
107
|
}
|
|
108
108
|
return renderPopup(_jsx("div", Object.assign({}, mergeCS(styled('menu-popup'), {
|
|
109
109
|
style: Object.assign({ minWidth: inHorizontalNav ? undefined : 160, zIndex: `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})` }, transitionStyle),
|
|
110
|
-
}), { ref: popupRef, children: _jsx("ul", Object.assign({}, styled('menu__sub-list'), { role: "menu", "aria-labelledby": id, children: empty ? (_jsx("div", Object.assign({}, mergeCS(styled('menu__empty'), { style: { paddingLeft: space + level * step } }), { children: t('No
|
|
110
|
+
}), { ref: popupRef, children: _jsx("ul", Object.assign({}, styled('menu__sub-list'), { role: "menu", "aria-labelledby": id, children: empty ? (_jsx("div", Object.assign({}, mergeCS(styled('menu__empty'), { style: { paddingLeft: space + level * step } }), { children: t('No data') }))) : (list) })) })));
|
|
111
111
|
} }) }))] })) }), _jsx(CollapseTransition, { originalSize: {
|
|
112
112
|
height: 'auto',
|
|
113
113
|
}, collapsedSize: {
|
|
@@ -129,7 +129,7 @@ export const MenuSub = forwardRef((props, ref) => {
|
|
|
129
129
|
}
|
|
130
130
|
return null;
|
|
131
131
|
}
|
|
132
|
-
const node = (_jsx("ul", Object.assign({}, mergeCS(styled('menu__sub-list'), { style: collapseStyle }), { ref: listRef, role: "menu", "aria-labelledby": id, children: empty ? (_jsx("div", Object.assign({}, mergeCS(styled('menu__empty'), { style: { paddingLeft: space + (level + 1) * step } }), { children: t('No
|
|
132
|
+
const node = (_jsx("ul", Object.assign({}, mergeCS(styled('menu__sub-list'), { style: collapseStyle }), { ref: listRef, role: "menu", "aria-labelledby": id, children: empty ? (_jsx("div", Object.assign({}, mergeCS(styled('menu__empty'), { style: { paddingLeft: space + (level + 1) * step } }), { children: t('No data') }))) : (list) })));
|
|
133
133
|
if (mode === 'vertical' && inNav) {
|
|
134
134
|
dataRef.current.nodeCache = node;
|
|
135
135
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@laser-ui/components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"description": "React components.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ui",
|
|
@@ -40,5 +40,5 @@
|
|
|
40
40
|
"access": "public",
|
|
41
41
|
"directory": "../../dist/libs/components"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "e2186ab2e70beb344c2e51a9d0425f0663164056"
|
|
44
44
|
}
|
package/resources.json
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"Create": "Create",
|
|
9
9
|
"Clear": "Clear",
|
|
10
10
|
"More": "More",
|
|
11
|
-
"No
|
|
11
|
+
"No data": "No data"
|
|
12
12
|
},
|
|
13
13
|
"Footer": {
|
|
14
14
|
"Cancel": "Cancel",
|
|
@@ -71,11 +71,11 @@
|
|
|
71
71
|
"Create": "创建",
|
|
72
72
|
"Clear": "清除",
|
|
73
73
|
"More": "更多",
|
|
74
|
-
"No
|
|
74
|
+
"No data": "无数据"
|
|
75
75
|
},
|
|
76
76
|
"Footer": {
|
|
77
|
-
"Cancel": "
|
|
78
|
-
"OK": "
|
|
77
|
+
"Cancel": "取消",
|
|
78
|
+
"OK": "确定"
|
|
79
79
|
},
|
|
80
80
|
"Input": {
|
|
81
81
|
"Password is visible": "密码可见",
|
package/select/Select.js
CHANGED
|
@@ -521,7 +521,7 @@ function SelectFC(props, ref) {
|
|
|
521
521
|
focusVisible && (itemFocused === null || itemFocused === void 0 ? void 0 : itemFocused.value) === itemValue && _jsx("div", { className: `${namespace}-focus-outline` }),
|
|
522
522
|
item[IS_CREATED] ? (_jsx("div", Object.assign({}, styled('select__option-prefix'), { children: _jsx(Icon, { theme: "primary", children: _jsx(AddOutlined, {}) }) }))) : multiple ? (_jsx("div", Object.assign({}, styled('select__option-prefix'), { children: _jsx(Checkbox, { model: isSelected, disabled: itemDisabled }) }))) : null,
|
|
523
523
|
_jsx("div", Object.assign({}, styled('select__option-content'), { children: node }))));
|
|
524
|
-
}, itemFocused: itemFocused === null || itemFocused === void 0 ? void 0 : itemFocused.value, itemEmptyRender: () => (_jsx("li", Object.assign({}, mergeCS(styled('select__empty'), { style: { paddingLeft: 12 + 8 } }), { children: _jsx("div", Object.assign({}, styled('select__option-content'), { children: t('No
|
|
524
|
+
}, itemFocused: itemFocused === null || itemFocused === void 0 ? void 0 : itemFocused.value, itemEmptyRender: () => (_jsx("li", Object.assign({}, mergeCS(styled('select__empty'), { style: { paddingLeft: 12 + 8 } }), { children: _jsx("div", Object.assign({}, styled('select__option-content'), { children: t('No data') })) }))), itemInAriaSetsize: (item) => !item.children, placeholder: "li", onScrollEnd: onScrollBottom, children: (vsList, onScroll) => (_jsx("ul", Object.assign({}, styled('select__list'), { ref: listRef, id: listId, tabIndex: -1, role: "listbox", "aria-multiselectable": multiple, "aria-activedescendant": isUndefined(itemFocused) ? undefined : getItemId(itemFocused.value), onScroll: onScroll, children: list.length === 0 ? _jsx(Empty, { style: { padding: '12px 0' }, image: Empty.SIMPLE_IMG }) : vsList }))) })))] })));
|
|
525
525
|
return popupRender ? popupRender(el) : el;
|
|
526
526
|
})() })));
|
|
527
527
|
} }) })] }));
|
package/tabs/Tabs.js
CHANGED
|
@@ -6,15 +6,15 @@ import { checkScrollEnd, findNested } from '@laser-ui/utils';
|
|
|
6
6
|
import AddOutlined from '@material-design-icons/svg/outlined/add.svg?react';
|
|
7
7
|
import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
|
|
8
8
|
import MoreHorizOutlined from '@material-design-icons/svg/outlined/more_horiz.svg?react';
|
|
9
|
-
import { isUndefined, nth } from 'lodash';
|
|
10
|
-
import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
|
|
9
|
+
import { isNull, isUndefined, nth } from 'lodash';
|
|
10
|
+
import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
|
11
11
|
import { CLASSES } from './vars';
|
|
12
12
|
import { Dropdown } from '../dropdown';
|
|
13
13
|
import { useComponentProps, useControlled, useNamespace, useStyled, useTranslation } from '../hooks';
|
|
14
14
|
import { Icon } from '../icon';
|
|
15
15
|
import { mergeCS } from '../utils';
|
|
16
16
|
function TabsFC(props, ref) {
|
|
17
|
-
const _a = useComponentProps('Tabs', props), { styleOverrides, styleProvider, list, active: activeProp, defaultActive, pattern, placement = 'top', center = false, size = 'medium', addible = false, onActiveChange, onAddClick, onClose } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "list", "active", "defaultActive", "pattern", "placement", "center", "size", "addible", "onActiveChange", "onAddClick", "onClose"]);
|
|
17
|
+
const _a = useComponentProps('Tabs', props), { styleOverrides, styleProvider, list, active: activeProp, defaultActive: _defaultActive, pattern, placement = 'top', center = false, size = 'medium', addible = false, lazyLoading = true, onActiveChange, onAddClick, onClose } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "list", "active", "defaultActive", "pattern", "placement", "center", "size", "addible", "lazyLoading", "onActiveChange", "onAddClick", "onClose"]);
|
|
18
18
|
const namespace = useNamespace();
|
|
19
19
|
const styled = useStyled(CLASSES, { tabs: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.tabs }, styleOverrides);
|
|
20
20
|
const { t } = useTranslation();
|
|
@@ -31,18 +31,35 @@ function TabsFC(props, ref) {
|
|
|
31
31
|
const [scrollEnd, setScrollEnd] = useState(false);
|
|
32
32
|
const iconSize = size === 'small' ? 16 : size === 'large' ? 20 : 18;
|
|
33
33
|
const isHorizontal = placement === 'top' || placement === 'bottom';
|
|
34
|
-
const
|
|
34
|
+
const defaultActive = useMemo(() => {
|
|
35
|
+
if (!isUndefined(_defaultActive)) {
|
|
36
|
+
return _defaultActive;
|
|
37
|
+
}
|
|
35
38
|
for (const tab of list) {
|
|
36
39
|
if (!tab.disabled) {
|
|
37
40
|
return tab.id;
|
|
38
41
|
}
|
|
39
42
|
}
|
|
40
43
|
return null;
|
|
41
|
-
}
|
|
44
|
+
}, []);
|
|
45
|
+
const [active, changeActive] = useControlled(defaultActive, activeProp, (id) => {
|
|
46
|
+
panelLoaded.current.add(id);
|
|
42
47
|
if (onActiveChange) {
|
|
43
48
|
onActiveChange(id, findNested(list, (item) => item.id === id));
|
|
44
49
|
}
|
|
45
50
|
});
|
|
51
|
+
const panelLoaded = useRef(new Set(isNull(defaultActive) ? [] : [defaultActive]));
|
|
52
|
+
const newPanelLoaded = new Set();
|
|
53
|
+
const panels = list.map((item) => {
|
|
54
|
+
const { id: itemId, panel: itemPanel } = item;
|
|
55
|
+
const hidden = itemId !== active;
|
|
56
|
+
const loaded = panelLoaded.current.has(itemId);
|
|
57
|
+
if (loaded) {
|
|
58
|
+
newPanelLoaded.add(itemId);
|
|
59
|
+
}
|
|
60
|
+
return (_createElement("div", Object.assign({}, styled('tabs__tabpanel'), { key: itemId, id: getPanelId(itemId), tabIndex: 0, hidden: hidden, role: "tabpanel", "aria-labelledby": getTabId(itemId) }), lazyLoading && hidden && !loaded ? null : itemPanel));
|
|
61
|
+
});
|
|
62
|
+
panelLoaded.current = newPanelLoaded;
|
|
46
63
|
const refreshTabs = () => {
|
|
47
64
|
const tablistWrapperEl = tablistWrapperRef.current;
|
|
48
65
|
if (tablistWrapperEl) {
|
|
@@ -240,9 +257,6 @@ function TabsFC(props, ref) {
|
|
|
240
257
|
'tabs__button.is-end': scrollEnd,
|
|
241
258
|
}), { "aria-label": t('More'), children: _jsx(Icon, { size: iconSize, children: _jsx(MoreHorizOutlined, {}) }) })) })), addible && (_jsx("div", Object.assign({}, styled('tabs__button', 'tabs__button--add'), { role: "button", "aria-label": t('Add'), onClick: () => {
|
|
242
259
|
onAddClick === null || onAddClick === void 0 ? void 0 : onAddClick();
|
|
243
|
-
}, children: _jsx(Icon, { size: iconSize, children: _jsx(AddOutlined, {}) }) })))] }))), _jsx("div", Object.assign({}, styled(pattern === 'wrap' ? 'tabs__wrap-indicator' : pattern === 'slider' ? 'tabs__slider-indicator' : 'tabs__indicator'), { ref: indicatorRef }))] })) })),
|
|
244
|
-
const { id: itemId, panel: itemPanel } = item;
|
|
245
|
-
return (_createElement("div", Object.assign({}, styled('tabs__tabpanel'), { key: itemId, id: getPanelId(itemId), tabIndex: 0, hidden: itemId !== active, role: "tabpanel", "aria-labelledby": getTabId(itemId) }), itemPanel));
|
|
246
|
-
})] })));
|
|
260
|
+
}, children: _jsx(Icon, { size: iconSize, children: _jsx(AddOutlined, {}) }) })))] }))), _jsx("div", Object.assign({}, styled(pattern === 'wrap' ? 'tabs__wrap-indicator' : pattern === 'slider' ? 'tabs__slider-indicator' : 'tabs__indicator'), { ref: indicatorRef }))] })) })), panels] })));
|
|
247
261
|
}
|
|
248
262
|
export const Tabs = forwardRef(TabsFC);
|
package/tabs/types.d.ts
CHANGED
|
@@ -22,6 +22,7 @@ export interface TabsProps<ID extends React.Key, T extends TabsItem<ID>> extends
|
|
|
22
22
|
center?: boolean;
|
|
23
23
|
size?: Size;
|
|
24
24
|
addible?: boolean;
|
|
25
|
+
lazyLoading?: boolean;
|
|
25
26
|
onActiveChange?: (id: ID, origin: T) => void;
|
|
26
27
|
onAddClick?: () => void;
|
|
27
28
|
onClose?: (id: ID, origin: T) => void;
|
|
@@ -156,7 +156,7 @@ function TreePanelFC(props, ref) {
|
|
|
156
156
|
onNodeClick(item);
|
|
157
157
|
} }) }))),
|
|
158
158
|
_jsx("div", Object.assign({}, styled('tree__option-content'), { children: customItem ? customItem(item.origin) : item.origin.label }))));
|
|
159
|
-
}, itemFocused: itemFocused === null || itemFocused === void 0 ? void 0 : itemFocused.id, itemEmptyRender: () => (_jsx("li", Object.assign({}, styled('tree__empty'), { children: _jsx("div", Object.assign({}, styled('tree__option-content'), { children: t('No
|
|
159
|
+
}, itemFocused: itemFocused === null || itemFocused === void 0 ? void 0 : itemFocused.id, itemEmptyRender: () => (_jsx("li", Object.assign({}, styled('tree__empty'), { children: _jsx("div", Object.assign({}, styled('tree__option-content'), { children: t('No data') })) }))), itemInAriaSetsize: (item) => !item.children, placeholder: "li", onScrollEnd: onScrollBottom, children: (vsList, onScroll) => (_jsx("ul", Object.assign({}, restProps, mergeCS(styled('tree', {
|
|
160
160
|
'tree.is-disabled': disabled,
|
|
161
161
|
'tree--line': showLine,
|
|
162
162
|
}), {
|