@pisell/materials 6.8.9 → 6.8.10
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/build/lowcode/assets-daily.json +11 -11
- package/build/lowcode/assets-dev.json +2 -2
- package/build/lowcode/assets-prod.json +11 -11
- package/build/lowcode/index.js +1 -1
- package/build/lowcode/meta.js +1 -1
- package/build/lowcode/preview.js +8 -8
- package/build/lowcode/render/default/view.js +16 -16
- package/build/lowcode/view.js +16 -16
- package/es/components/PisellProcedure/PisellProcedure.stories.d.ts +163 -0
- package/es/components/PisellProcedure/PisellProcedure.stories.js +1611 -0
- package/es/components/PisellScrollView/PisellScrollView.stories.d.ts +87 -0
- package/es/components/PisellScrollView/PisellScrollView.stories.js +772 -0
- package/es/components/PisellScrollView/hooks/useScrollEvents.js +18 -3
- package/es/components/PisellScrollView/index.d.ts +2 -1
- package/es/components/PisellScrollView/index.js +2 -1
- package/es/components/PisellSteps/PisellSteps.stories.d.ts +155 -0
- package/es/components/PisellSteps/PisellSteps.stories.js +851 -0
- package/es/components/PisellSuperTabs/PisellSuperTabs.d.ts +6 -10
- package/es/components/PisellSuperTabs/PisellSuperTabs.js +28 -8
- package/es/components/PisellSuperTabs/types.d.ts +1 -0
- package/es/components/PisellTabbar/PisellTabbar.d.ts +2 -19
- package/es/components/PisellTabbar/PisellTabbar.js +2 -1
- package/es/components/PisellTabbar/constants.d.ts +4 -4
- package/es/components/PisellTabbar/constants.js +5 -5
- package/es/components/PisellTabbar/index.d.ts +2 -0
- package/es/components/PisellTabbar/index.js +2 -0
- package/es/components/PisellTabbar/template/Template1/PisellTabbar.d.ts +20 -0
- package/es/components/PisellTabbar/template/Template1/PisellTabbar.js +426 -0
- package/es/components/PisellTabbar/template/Template1/constants.d.ts +10 -0
- package/es/components/PisellTabbar/template/Template1/constants.js +33 -0
- package/es/components/PisellTabbar/template/Template1/index.d.ts +6 -0
- package/es/components/PisellTabbar/template/Template1/index.js +7 -0
- package/es/components/PisellTabbar/template/Template1/utils/index.d.ts +35 -0
- package/es/components/PisellTabbar/template/Template1/utils/index.js +96 -0
- package/es/components/PisellTabbar/utils/index.d.ts +33 -0
- package/es/components/PisellTabbar/utils/index.js +3 -2
- package/es/components/productCard/cartSkuCard/components/packages/utils.d.ts +1 -1
- package/es/components/productCard/components/Packages/utils.d.ts +1 -1
- package/es/index.d.ts +2 -1
- package/es/index.js +2 -1
- package/lib/components/PisellProcedure/PisellProcedure.stories.d.ts +163 -0
- package/lib/components/PisellProcedure/PisellProcedure.stories.js +925 -0
- package/lib/components/PisellScrollView/PisellScrollView.stories.d.ts +87 -0
- package/lib/components/PisellScrollView/PisellScrollView.stories.js +535 -0
- package/lib/components/PisellScrollView/hooks/useScrollEvents.js +13 -3
- package/lib/components/PisellScrollView/index.d.ts +2 -1
- package/lib/components/PisellScrollView/index.js +2 -5
- package/lib/components/PisellSteps/PisellSteps.stories.d.ts +155 -0
- package/lib/components/PisellSteps/PisellSteps.stories.js +570 -0
- package/lib/components/PisellSuperTabs/PisellSuperTabs.d.ts +6 -10
- package/lib/components/PisellSuperTabs/PisellSuperTabs.js +25 -6
- package/lib/components/PisellSuperTabs/types.d.ts +1 -0
- package/lib/components/PisellTabbar/PisellTabbar.d.ts +2 -19
- package/lib/components/PisellTabbar/PisellTabbar.js +2 -1
- package/lib/components/PisellTabbar/constants.d.ts +4 -4
- package/lib/components/PisellTabbar/constants.js +5 -5
- package/lib/components/PisellTabbar/index.d.ts +2 -0
- package/lib/components/PisellTabbar/index.js +6 -0
- package/lib/components/PisellTabbar/template/Template1/PisellTabbar.d.ts +20 -0
- package/lib/components/PisellTabbar/template/Template1/PisellTabbar.js +437 -0
- package/lib/components/PisellTabbar/template/Template1/constants.d.ts +10 -0
- package/lib/components/PisellTabbar/template/Template1/constants.js +60 -0
- package/lib/components/PisellTabbar/template/Template1/index.d.ts +6 -0
- package/lib/components/PisellTabbar/template/Template1/index.js +36 -0
- package/lib/components/PisellTabbar/template/Template1/utils/index.d.ts +35 -0
- package/lib/components/PisellTabbar/template/Template1/utils/index.js +68 -0
- package/lib/components/PisellTabbar/utils/index.d.ts +33 -0
- package/lib/components/PisellTabbar/utils/index.js +4 -1
- package/lib/components/productCard/cartSkuCard/components/packages/utils.d.ts +1 -1
- package/lib/components/productCard/components/Packages/utils.d.ts +1 -1
- package/lib/index.d.ts +2 -1
- package/lib/index.js +5 -2
- package/package.json +21 -2
|
@@ -1,12 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import type { PisellSuperTabsProps } from './types';
|
|
2
3
|
import './PisellSuperTabs.less';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
declare const PisellSuperTabs: {
|
|
9
|
-
<T>(props: PisellSuperTabsProps<T>): JSX.Element;
|
|
10
|
-
displayName: string;
|
|
11
|
-
};
|
|
12
|
-
export default PisellSuperTabs;
|
|
4
|
+
interface PisellSuperTabsRef {
|
|
5
|
+
scrollItemByRowKey: (key: string) => void;
|
|
6
|
+
}
|
|
7
|
+
declare const _default: React.ForwardRefExoticComponent<PisellSuperTabsProps<unknown> & React.RefAttributes<PisellSuperTabsRef>>;
|
|
8
|
+
export default _default;
|
|
@@ -37,9 +37,9 @@ var import_classnames = __toESM(require("classnames"));
|
|
|
37
37
|
var import_hooks = require("./hooks");
|
|
38
38
|
var import_utils = require("./utils");
|
|
39
39
|
var import_PisellBasicGrid = __toESM(require("../PisellBasicGrid"));
|
|
40
|
-
var import_PisellScrollView = require("../PisellScrollView");
|
|
40
|
+
var import_PisellScrollView = __toESM(require("../PisellScrollView"));
|
|
41
41
|
var import_PisellSuperTabs = require("./PisellSuperTabs.less");
|
|
42
|
-
var PisellSuperTabs = (props) => {
|
|
42
|
+
var PisellSuperTabs = (props, ref) => {
|
|
43
43
|
const {
|
|
44
44
|
// 基础属性
|
|
45
45
|
className,
|
|
@@ -69,19 +69,37 @@ var PisellSuperTabs = (props) => {
|
|
|
69
69
|
slotLeftStyle,
|
|
70
70
|
slotRightStyle,
|
|
71
71
|
slotTopStyle,
|
|
72
|
-
slotBottomStyle
|
|
72
|
+
slotBottomStyle,
|
|
73
|
+
__designMode
|
|
73
74
|
} = props;
|
|
75
|
+
const containerRef = (0, import_react.useRef)(null);
|
|
74
76
|
const { activeKey, handleTabChange } = (0, import_hooks.useTabsState)({
|
|
75
77
|
value,
|
|
76
78
|
defaultValue,
|
|
77
79
|
onChange
|
|
78
80
|
});
|
|
81
|
+
const scrollItemByRowKey = (key) => {
|
|
82
|
+
const item = document.querySelector(`.pisell-super-tabs-item-${id}-${key}`);
|
|
83
|
+
console.log(`.pisell-super-tabs-item-${id}-${key}`);
|
|
84
|
+
if (item) {
|
|
85
|
+
item.scrollIntoView({ behavior: "smooth" });
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
(0, import_react.useImperativeHandle)(ref, () => {
|
|
89
|
+
if (__designMode) {
|
|
90
|
+
return containerRef.current;
|
|
91
|
+
}
|
|
92
|
+
return {
|
|
93
|
+
scrollItemByRowKey
|
|
94
|
+
};
|
|
95
|
+
});
|
|
79
96
|
return /* @__PURE__ */ import_react.default.createElement(
|
|
80
97
|
"div",
|
|
81
98
|
{
|
|
82
99
|
className: (0, import_classnames.default)("pisell-super-tabs", className),
|
|
83
100
|
style,
|
|
84
|
-
id
|
|
101
|
+
id,
|
|
102
|
+
ref: containerRef
|
|
85
103
|
},
|
|
86
104
|
/* @__PURE__ */ import_react.default.createElement(
|
|
87
105
|
"div",
|
|
@@ -105,7 +123,7 @@ var PisellSuperTabs = (props) => {
|
|
|
105
123
|
},
|
|
106
124
|
slotLeft
|
|
107
125
|
),
|
|
108
|
-
/* @__PURE__ */ import_react.default.createElement(import_PisellScrollView.
|
|
126
|
+
/* @__PURE__ */ import_react.default.createElement(import_PisellScrollView.default, { ...scrollViewProps }, /* @__PURE__ */ import_react.default.createElement(
|
|
109
127
|
import_PisellBasicGrid.default,
|
|
110
128
|
{
|
|
111
129
|
...gridProps,
|
|
@@ -147,6 +165,7 @@ var PisellSuperTabs = (props) => {
|
|
|
147
165
|
key,
|
|
148
166
|
className: (0, import_classnames.default)(
|
|
149
167
|
"pisell-super-tabs-item",
|
|
168
|
+
`pisell-super-tabs-item-${id}-${key}`,
|
|
150
169
|
{
|
|
151
170
|
"pisell-super-tabs-item--active": active
|
|
152
171
|
},
|
|
@@ -185,4 +204,4 @@ var PisellSuperTabs = (props) => {
|
|
|
185
204
|
);
|
|
186
205
|
};
|
|
187
206
|
PisellSuperTabs.displayName = "PisellSuperTabs";
|
|
188
|
-
var PisellSuperTabs_default = PisellSuperTabs;
|
|
207
|
+
var PisellSuperTabs_default = (0, import_react.forwardRef)(PisellSuperTabs);
|
|
@@ -1,20 +1,3 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { PisellTabbarProps } from './types';
|
|
1
|
+
import PisellTabbar4 from './template/Template1';
|
|
3
2
|
import './PisellTabbar.less';
|
|
4
|
-
|
|
5
|
-
* PisellTabbar - 多层级 Tabbar 组件
|
|
6
|
-
*
|
|
7
|
-
* 支持最多 3 层级的 Tab 导航,每层级可独立展开/收起
|
|
8
|
-
*
|
|
9
|
-
* @component
|
|
10
|
-
* @example
|
|
11
|
-
* ```tsx
|
|
12
|
-
* <PisellTabbar
|
|
13
|
-
* dataSource={categoryData}
|
|
14
|
-
* value={[1, 10, 100]}
|
|
15
|
-
* onChange={(value) => console.log('当前选中:', value)}
|
|
16
|
-
* />
|
|
17
|
-
* ```
|
|
18
|
-
*/
|
|
19
|
-
declare const PisellTabbar: React.FC<PisellTabbarProps>;
|
|
20
|
-
export default PisellTabbar;
|
|
3
|
+
export default PisellTabbar4;
|
|
@@ -39,6 +39,7 @@ var import_hooks = require("./hooks");
|
|
|
39
39
|
var import_utils = require("./utils");
|
|
40
40
|
var import_constants = require("./constants");
|
|
41
41
|
var import_mock = __toESM(require("./mock"));
|
|
42
|
+
var import_Template1 = __toESM(require("./template/Template1"));
|
|
42
43
|
var import_PisellTabbar = require("./PisellTabbar.less");
|
|
43
44
|
var PisellTabbar = (props) => {
|
|
44
45
|
const {
|
|
@@ -182,4 +183,4 @@ var PisellTabbar = (props) => {
|
|
|
182
183
|
)) : null;
|
|
183
184
|
};
|
|
184
185
|
PisellTabbar.displayName = "PisellTabbar";
|
|
185
|
-
var PisellTabbar_default =
|
|
186
|
+
var PisellTabbar_default = import_Template1.default;
|
|
@@ -12,15 +12,15 @@ export declare const getExpandConfig: () => ExpandConfig;
|
|
|
12
12
|
*/
|
|
13
13
|
export declare const DEFAULT_ITEMS: {
|
|
14
14
|
all: {
|
|
15
|
-
id:
|
|
15
|
+
id: string;
|
|
16
16
|
shop_id: number;
|
|
17
17
|
parent_id: number;
|
|
18
|
-
name:
|
|
18
|
+
name: any;
|
|
19
19
|
slug: string;
|
|
20
20
|
icon: string;
|
|
21
21
|
};
|
|
22
22
|
search: {
|
|
23
|
-
id:
|
|
23
|
+
id: string;
|
|
24
24
|
shop_id: number;
|
|
25
25
|
parent_id: number;
|
|
26
26
|
name: string;
|
|
@@ -30,7 +30,7 @@ export declare const DEFAULT_ITEMS: {
|
|
|
30
30
|
customClick: boolean;
|
|
31
31
|
};
|
|
32
32
|
expand: {
|
|
33
|
-
id:
|
|
33
|
+
id: string;
|
|
34
34
|
shop_id: number;
|
|
35
35
|
parent_id: number;
|
|
36
36
|
key: string;
|
|
@@ -58,15 +58,15 @@ var getExpandConfig = () => ({
|
|
|
58
58
|
});
|
|
59
59
|
var DEFAULT_ITEMS = {
|
|
60
60
|
all: {
|
|
61
|
-
id: 0,
|
|
61
|
+
id: "0",
|
|
62
62
|
shop_id: 9,
|
|
63
63
|
parent_id: 0,
|
|
64
|
-
name: "
|
|
65
|
-
slug: "
|
|
64
|
+
name: (0, import_locales.getText)("pisell-tabbar-all"),
|
|
65
|
+
slug: "all",
|
|
66
66
|
icon: ""
|
|
67
67
|
},
|
|
68
68
|
search: {
|
|
69
|
-
id: -1,
|
|
69
|
+
id: "-1",
|
|
70
70
|
shop_id: 9,
|
|
71
71
|
parent_id: 0,
|
|
72
72
|
name: "Search",
|
|
@@ -76,7 +76,7 @@ var DEFAULT_ITEMS = {
|
|
|
76
76
|
customClick: true
|
|
77
77
|
},
|
|
78
78
|
expand: {
|
|
79
|
-
id: -2,
|
|
79
|
+
id: "-2",
|
|
80
80
|
shop_id: 9,
|
|
81
81
|
parent_id: 0,
|
|
82
82
|
key: "expand",
|
|
@@ -3,5 +3,7 @@
|
|
|
3
3
|
* @module PisellTabbar
|
|
4
4
|
*/
|
|
5
5
|
import PisellTabbar from './PisellTabbar';
|
|
6
|
+
import PisellTabbarTemplate1 from './template/Template1';
|
|
6
7
|
export type { PisellTabbarProps, TabbarDataSource, LevelType } from './types';
|
|
8
|
+
export { PisellTabbarTemplate1 };
|
|
7
9
|
export default PisellTabbar;
|
|
@@ -29,8 +29,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
29
29
|
// src/components/PisellTabbar/index.tsx
|
|
30
30
|
var PisellTabbar_exports = {};
|
|
31
31
|
__export(PisellTabbar_exports, {
|
|
32
|
+
PisellTabbarTemplate1: () => import_Template1.default,
|
|
32
33
|
default: () => PisellTabbar_default
|
|
33
34
|
});
|
|
34
35
|
module.exports = __toCommonJS(PisellTabbar_exports);
|
|
35
36
|
var import_PisellTabbar = __toESM(require("./PisellTabbar"));
|
|
37
|
+
var import_Template1 = __toESM(require("./template/Template1"));
|
|
36
38
|
var PisellTabbar_default = import_PisellTabbar.default;
|
|
39
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
40
|
+
0 && (module.exports = {
|
|
41
|
+
PisellTabbarTemplate1
|
|
42
|
+
});
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PisellTabbarProps } from '../../types';
|
|
3
|
+
import '../../PisellTabbar.less';
|
|
4
|
+
/**
|
|
5
|
+
* PisellTabbar - 多层级 Tabbar 组件
|
|
6
|
+
*
|
|
7
|
+
* 支持最多 3 层级的 Tab 导航,每层级可独立展开/收起
|
|
8
|
+
*
|
|
9
|
+
* @component
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* <PisellTabbar
|
|
13
|
+
* dataSource={categoryData}
|
|
14
|
+
* value={[1, 10, 100]}
|
|
15
|
+
* onChange={(value) => console.log('当前选中:', value)}
|
|
16
|
+
* />
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
declare const PisellTabbar: React.FC<PisellTabbarProps>;
|
|
20
|
+
export default PisellTabbar;
|
|
@@ -0,0 +1,437 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
|
|
29
|
+
// src/components/PisellTabbar/template/Template1/PisellTabbar.tsx
|
|
30
|
+
var PisellTabbar_exports = {};
|
|
31
|
+
__export(PisellTabbar_exports, {
|
|
32
|
+
default: () => PisellTabbar_default
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(PisellTabbar_exports);
|
|
35
|
+
var import_react = __toESM(require("react"));
|
|
36
|
+
var import_classnames = __toESM(require("classnames"));
|
|
37
|
+
var import_PisellSuperTabs = __toESM(require("../../../PisellSuperTabs"));
|
|
38
|
+
var import_PisellCards = __toESM(require("../../../PisellCards"));
|
|
39
|
+
var import_iconfont = __toESM(require("../../../iconfont"));
|
|
40
|
+
var import_hooks = require("../../hooks");
|
|
41
|
+
var import_utils = require("./utils");
|
|
42
|
+
var import_constants = require("./constants");
|
|
43
|
+
var import_mock = __toESM(require("../../mock"));
|
|
44
|
+
var import_PisellTabbar = require("../../PisellTabbar.less");
|
|
45
|
+
var PisellTabbar = (props) => {
|
|
46
|
+
const {
|
|
47
|
+
dataSource = (props == null ? void 0 : props.__designMode) ? import_mock.default : import_mock.default,
|
|
48
|
+
value,
|
|
49
|
+
onChange,
|
|
50
|
+
className,
|
|
51
|
+
style,
|
|
52
|
+
levelConfig: customLevelConfig,
|
|
53
|
+
expandConfig: customExpandConfig,
|
|
54
|
+
maxLevel = 3
|
|
55
|
+
} = props;
|
|
56
|
+
const { setActiveKey, getActiveKey, _setActiveKey, activeKey } = (0, import_hooks.useActiveKey)(
|
|
57
|
+
{
|
|
58
|
+
initialActiveKey: value || (0, import_utils.getDefaultActiveKey)(dataSource, "id"),
|
|
59
|
+
onChange
|
|
60
|
+
}
|
|
61
|
+
);
|
|
62
|
+
console.log("getActiveKey", activeKey);
|
|
63
|
+
const { expand, toggleExpand, getExpand } = (0, import_hooks.useExpand)();
|
|
64
|
+
const expandConfig = customExpandConfig || (0, import_constants.getExpandConfig)();
|
|
65
|
+
(0, import_react.useEffect)(() => {
|
|
66
|
+
if (value) {
|
|
67
|
+
_setActiveKey(value);
|
|
68
|
+
}
|
|
69
|
+
}, [JSON.stringify(value)]);
|
|
70
|
+
const getLevelConfig = (0, import_react.useCallback)(
|
|
71
|
+
(level) => {
|
|
72
|
+
return {
|
|
73
|
+
...import_constants.DEFAULT_LEVEL_CONFIG[level],
|
|
74
|
+
...customLevelConfig == null ? void 0 : customLevelConfig[level]
|
|
75
|
+
};
|
|
76
|
+
},
|
|
77
|
+
[customLevelConfig]
|
|
78
|
+
);
|
|
79
|
+
const handleLevel1Change = (0, import_react.useCallback)(
|
|
80
|
+
(key, item) => {
|
|
81
|
+
var _a;
|
|
82
|
+
setActiveKey(0, key, ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? 0 : void 0);
|
|
83
|
+
},
|
|
84
|
+
[setActiveKey, activeKey]
|
|
85
|
+
);
|
|
86
|
+
const handleLevel2Change = (0, import_react.useCallback)(
|
|
87
|
+
(key, item) => {
|
|
88
|
+
var _a;
|
|
89
|
+
setActiveKey(1, key, ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? 0 : void 0);
|
|
90
|
+
},
|
|
91
|
+
[setActiveKey, activeKey]
|
|
92
|
+
);
|
|
93
|
+
const handleLevel3Change = (0, import_react.useCallback)(
|
|
94
|
+
(key) => {
|
|
95
|
+
setActiveKey(2, key);
|
|
96
|
+
},
|
|
97
|
+
[setActiveKey, activeKey]
|
|
98
|
+
);
|
|
99
|
+
const renderExpandCard = (0, import_react.useCallback)(
|
|
100
|
+
(cardProps, level, isExpanded) => {
|
|
101
|
+
var _a;
|
|
102
|
+
const config = expandConfig[isExpanded ? "active" : "inactive"];
|
|
103
|
+
const levelCfg = getLevelConfig(level);
|
|
104
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
105
|
+
import_PisellCards.default.TextCard,
|
|
106
|
+
{
|
|
107
|
+
...cardProps,
|
|
108
|
+
text: config.text,
|
|
109
|
+
variant: "outlined",
|
|
110
|
+
widthMode: "auto",
|
|
111
|
+
prefixIcon: /* @__PURE__ */ import_react.default.createElement(
|
|
112
|
+
import_iconfont.default,
|
|
113
|
+
{
|
|
114
|
+
type: config.icon,
|
|
115
|
+
style: { color: "#000", fontSize: 20 }
|
|
116
|
+
}
|
|
117
|
+
),
|
|
118
|
+
textConfig: {
|
|
119
|
+
textAlign: "center",
|
|
120
|
+
color: "#000000",
|
|
121
|
+
flex: "none"
|
|
122
|
+
},
|
|
123
|
+
style: {
|
|
124
|
+
borderRadius: "20px",
|
|
125
|
+
background: "#ffffff",
|
|
126
|
+
display: "flex",
|
|
127
|
+
alignItems: "center",
|
|
128
|
+
justifyContent: "center",
|
|
129
|
+
height: levelCfg.cardHeight,
|
|
130
|
+
minWidth: 100
|
|
131
|
+
},
|
|
132
|
+
width: "auto",
|
|
133
|
+
active: {
|
|
134
|
+
...cardProps.active,
|
|
135
|
+
style: {
|
|
136
|
+
...(_a = cardProps.active) == null ? void 0 : _a.style,
|
|
137
|
+
color: "#ffffff",
|
|
138
|
+
background: "#7f56d9"
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
);
|
|
143
|
+
},
|
|
144
|
+
[expandConfig, activeKey, getLevelConfig]
|
|
145
|
+
);
|
|
146
|
+
const renderNormalCard = (0, import_react.useCallback)(
|
|
147
|
+
(cardProps, level) => {
|
|
148
|
+
var _a;
|
|
149
|
+
const { dataSource: itemData } = cardProps;
|
|
150
|
+
const levelCfg = getLevelConfig(level);
|
|
151
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
152
|
+
import_PisellCards.default.TextCard,
|
|
153
|
+
{
|
|
154
|
+
...cardProps,
|
|
155
|
+
text: itemData.name,
|
|
156
|
+
variant: "outlined",
|
|
157
|
+
widthMode: "auto",
|
|
158
|
+
textConfig: {
|
|
159
|
+
textAlign: "center",
|
|
160
|
+
color: "#000",
|
|
161
|
+
maxLines: 2,
|
|
162
|
+
ellipsis: true
|
|
163
|
+
},
|
|
164
|
+
style: {
|
|
165
|
+
height: levelCfg.cardHeight,
|
|
166
|
+
borderRadius: "20px",
|
|
167
|
+
background: "#ffffff",
|
|
168
|
+
minWidth: 100
|
|
169
|
+
},
|
|
170
|
+
width: "auto",
|
|
171
|
+
active: {
|
|
172
|
+
...cardProps.active,
|
|
173
|
+
style: {
|
|
174
|
+
...(_a = cardProps.active) == null ? void 0 : _a.style,
|
|
175
|
+
color: "#fff",
|
|
176
|
+
background: "#7f56d9"
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
);
|
|
181
|
+
},
|
|
182
|
+
[getLevelConfig]
|
|
183
|
+
);
|
|
184
|
+
const level1DataSource = (0, import_react.useMemo)(
|
|
185
|
+
() => (0, import_utils.addDataSourceItemsByKey)(dataSource, import_constants.LEVEL_ADD_ITEMS.level1),
|
|
186
|
+
[dataSource]
|
|
187
|
+
);
|
|
188
|
+
const renderLevel1Item = (0, import_react.useCallback)(
|
|
189
|
+
(itemProps) => {
|
|
190
|
+
const { dataSource: itemData } = itemProps;
|
|
191
|
+
const level1Config2 = getLevelConfig("level1");
|
|
192
|
+
const isExpanded = getExpand("level1");
|
|
193
|
+
if (itemData == null ? void 0 : itemData.customClick) {
|
|
194
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
195
|
+
import_PisellCards.default.MultilevelCard,
|
|
196
|
+
{
|
|
197
|
+
...itemProps,
|
|
198
|
+
card: (cardProps) => renderExpandCard(cardProps, "level1", isExpanded),
|
|
199
|
+
onClick: () => toggleExpand("level1")
|
|
200
|
+
}
|
|
201
|
+
);
|
|
202
|
+
}
|
|
203
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
204
|
+
import_PisellCards.default.MultilevelCard,
|
|
205
|
+
{
|
|
206
|
+
...itemProps,
|
|
207
|
+
card: (cardProps) => renderNormalCard(cardProps, "level1"),
|
|
208
|
+
panel: (panelProps) => {
|
|
209
|
+
var _a, _b;
|
|
210
|
+
if (((_b = (_a = panelProps == null ? void 0 : panelProps.dataSource) == null ? void 0 : _a.children) == null ? void 0 : _b.length) && maxLevel >= 2) {
|
|
211
|
+
return renderLevel2Panel(panelProps);
|
|
212
|
+
}
|
|
213
|
+
return null;
|
|
214
|
+
},
|
|
215
|
+
panelContainer: () => document.querySelector(
|
|
216
|
+
".pisell-super-tabs-slot-bottom-sku-list-tabbar"
|
|
217
|
+
)
|
|
218
|
+
}
|
|
219
|
+
);
|
|
220
|
+
},
|
|
221
|
+
[getLevelConfig, getExpand, toggleExpand, maxLevel, activeKey]
|
|
222
|
+
);
|
|
223
|
+
const renderLevel2Panel = (0, import_react.useCallback)(
|
|
224
|
+
(panelProps) => {
|
|
225
|
+
if (maxLevel < 2) return null;
|
|
226
|
+
let _dataSource = panelProps.dataSource.children || [];
|
|
227
|
+
if (_dataSource.length) {
|
|
228
|
+
_dataSource = (0, import_utils.addDataSourceItemsByKey)(
|
|
229
|
+
_dataSource,
|
|
230
|
+
import_constants.LEVEL_ADD_ITEMS.level2
|
|
231
|
+
);
|
|
232
|
+
}
|
|
233
|
+
const level2Config = getLevelConfig("level2");
|
|
234
|
+
const isExpanded2 = getExpand("level2");
|
|
235
|
+
const skuId = `sku-list-tabbar-${panelProps.dataSource.id}`;
|
|
236
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
237
|
+
import_PisellSuperTabs.default,
|
|
238
|
+
{
|
|
239
|
+
id: skuId,
|
|
240
|
+
tabItemStyle: {},
|
|
241
|
+
dataSource: _dataSource,
|
|
242
|
+
value: String(getActiveKey(1)),
|
|
243
|
+
onChange: handleLevel2Change,
|
|
244
|
+
rowKey: "id",
|
|
245
|
+
style: {
|
|
246
|
+
flex: 1,
|
|
247
|
+
background: level2Config.superTabsBg
|
|
248
|
+
},
|
|
249
|
+
gridProps: {
|
|
250
|
+
direction: "horizontal",
|
|
251
|
+
gap: 4,
|
|
252
|
+
wrap: isExpanded2 ? "wrap" : "nowrap",
|
|
253
|
+
startSlot: /* @__PURE__ */ import_react.default.createElement("div", { style: { paddingLeft: level2Config.paddingLeft } }, /* @__PURE__ */ import_react.default.createElement(
|
|
254
|
+
import_iconfont.default,
|
|
255
|
+
{
|
|
256
|
+
type: "pisell2-trend-down-01",
|
|
257
|
+
style: { color: "#fff", fontSize: 24, marginRight: 8 }
|
|
258
|
+
}
|
|
259
|
+
))
|
|
260
|
+
},
|
|
261
|
+
scrollViewProps: {
|
|
262
|
+
style: {
|
|
263
|
+
padding: "4px 8px"
|
|
264
|
+
},
|
|
265
|
+
overflow: !isExpanded2 ? "x" : "hidden",
|
|
266
|
+
scrollbarStyle: "none",
|
|
267
|
+
scrollActionsConfig: {
|
|
268
|
+
type: "lrArrows",
|
|
269
|
+
show: true
|
|
270
|
+
}
|
|
271
|
+
},
|
|
272
|
+
renderItem: (itemProps) => {
|
|
273
|
+
const { dataSource: itemData } = itemProps;
|
|
274
|
+
if (itemData == null ? void 0 : itemData.customClick) {
|
|
275
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
276
|
+
import_PisellCards.default.MultilevelCard,
|
|
277
|
+
{
|
|
278
|
+
...itemProps,
|
|
279
|
+
card: (cardProps) => renderExpandCard(cardProps, "level2", isExpanded2),
|
|
280
|
+
onClick: () => toggleExpand("level2")
|
|
281
|
+
}
|
|
282
|
+
);
|
|
283
|
+
}
|
|
284
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
285
|
+
import_PisellCards.default.MultilevelCard,
|
|
286
|
+
{
|
|
287
|
+
...itemProps,
|
|
288
|
+
card: (cardProps) => renderNormalCard(cardProps, "level2"),
|
|
289
|
+
panel: (panelProps2) => {
|
|
290
|
+
var _a, _b;
|
|
291
|
+
if (((_b = (_a = panelProps2 == null ? void 0 : panelProps2.dataSource) == null ? void 0 : _a.children) == null ? void 0 : _b.length) && maxLevel >= 3) {
|
|
292
|
+
return renderLevel3Panel(panelProps2);
|
|
293
|
+
}
|
|
294
|
+
return null;
|
|
295
|
+
},
|
|
296
|
+
panelContainer: () => document.querySelector(
|
|
297
|
+
`.pisell-super-tabs-slot-bottom-${skuId}`
|
|
298
|
+
)
|
|
299
|
+
}
|
|
300
|
+
);
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
);
|
|
304
|
+
},
|
|
305
|
+
[
|
|
306
|
+
maxLevel,
|
|
307
|
+
activeKey,
|
|
308
|
+
getActiveKey,
|
|
309
|
+
handleLevel2Change,
|
|
310
|
+
getExpand,
|
|
311
|
+
toggleExpand,
|
|
312
|
+
getLevelConfig,
|
|
313
|
+
renderExpandCard,
|
|
314
|
+
renderNormalCard
|
|
315
|
+
]
|
|
316
|
+
);
|
|
317
|
+
const renderLevel3Panel = (0, import_react.useCallback)(
|
|
318
|
+
(panelProps2) => {
|
|
319
|
+
if (maxLevel < 3) return null;
|
|
320
|
+
let _dataSource2 = panelProps2.dataSource.children || [];
|
|
321
|
+
if (_dataSource2.length) {
|
|
322
|
+
_dataSource2 = (0, import_utils.addDataSourceItemsByKey)(
|
|
323
|
+
_dataSource2,
|
|
324
|
+
import_constants.LEVEL_ADD_ITEMS.level3
|
|
325
|
+
);
|
|
326
|
+
}
|
|
327
|
+
const level3Config = getLevelConfig("level3");
|
|
328
|
+
const isExpanded3 = getExpand("level3");
|
|
329
|
+
const skuId = `sku-list-tabbar-${panelProps2.dataSource.id}`;
|
|
330
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
331
|
+
import_PisellSuperTabs.default,
|
|
332
|
+
{
|
|
333
|
+
id: skuId,
|
|
334
|
+
tabItemStyle: {},
|
|
335
|
+
dataSource: _dataSource2,
|
|
336
|
+
value: String(getActiveKey(2)),
|
|
337
|
+
onChange: handleLevel3Change,
|
|
338
|
+
rowKey: "id",
|
|
339
|
+
style: {
|
|
340
|
+
flex: 1,
|
|
341
|
+
background: level3Config.superTabsBg
|
|
342
|
+
},
|
|
343
|
+
gridProps: {
|
|
344
|
+
direction: "horizontal",
|
|
345
|
+
gap: 4,
|
|
346
|
+
wrap: isExpanded3 ? "wrap" : "nowrap",
|
|
347
|
+
startSlot: /* @__PURE__ */ import_react.default.createElement("div", { style: { paddingLeft: level3Config.paddingLeft } }, /* @__PURE__ */ import_react.default.createElement(
|
|
348
|
+
import_iconfont.default,
|
|
349
|
+
{
|
|
350
|
+
type: "pisell2-trend-down-01",
|
|
351
|
+
style: { color: "#fff", fontSize: 24, marginRight: 8 }
|
|
352
|
+
}
|
|
353
|
+
))
|
|
354
|
+
},
|
|
355
|
+
scrollViewProps: {
|
|
356
|
+
style: {
|
|
357
|
+
padding: "4px 8px"
|
|
358
|
+
},
|
|
359
|
+
overflow: !isExpanded3 ? "x" : "hidden",
|
|
360
|
+
scrollbarStyle: "none",
|
|
361
|
+
scrollActionsConfig: {
|
|
362
|
+
type: "lrArrows",
|
|
363
|
+
show: true
|
|
364
|
+
}
|
|
365
|
+
},
|
|
366
|
+
renderItem: (itemProps) => {
|
|
367
|
+
const { dataSource: itemData } = itemProps;
|
|
368
|
+
if (itemData == null ? void 0 : itemData.customClick) {
|
|
369
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
370
|
+
import_PisellCards.default.MultilevelCard,
|
|
371
|
+
{
|
|
372
|
+
...itemProps,
|
|
373
|
+
card: (cardProps) => renderExpandCard(cardProps, "level3", isExpanded3),
|
|
374
|
+
onClick: () => toggleExpand("level3")
|
|
375
|
+
}
|
|
376
|
+
);
|
|
377
|
+
}
|
|
378
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
379
|
+
import_PisellCards.default.MultilevelCard,
|
|
380
|
+
{
|
|
381
|
+
...itemProps,
|
|
382
|
+
card: (cardProps) => renderNormalCard(cardProps, "level3")
|
|
383
|
+
}
|
|
384
|
+
);
|
|
385
|
+
}
|
|
386
|
+
}
|
|
387
|
+
);
|
|
388
|
+
},
|
|
389
|
+
[
|
|
390
|
+
maxLevel,
|
|
391
|
+
activeKey,
|
|
392
|
+
getActiveKey,
|
|
393
|
+
handleLevel3Change,
|
|
394
|
+
getExpand,
|
|
395
|
+
toggleExpand,
|
|
396
|
+
getLevelConfig,
|
|
397
|
+
renderExpandCard,
|
|
398
|
+
renderNormalCard
|
|
399
|
+
]
|
|
400
|
+
);
|
|
401
|
+
const level1Config = getLevelConfig("level1");
|
|
402
|
+
const isExpanded1 = getExpand("level1");
|
|
403
|
+
return dataSource.length ? /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-tabbar", className), style }, /* @__PURE__ */ import_react.default.createElement(
|
|
404
|
+
import_PisellSuperTabs.default,
|
|
405
|
+
{
|
|
406
|
+
id: "sku-list-tabbar",
|
|
407
|
+
tabItemStyle: {},
|
|
408
|
+
dataSource: level1DataSource,
|
|
409
|
+
value: String(getActiveKey(0)),
|
|
410
|
+
onChange: handleLevel1Change,
|
|
411
|
+
rowKey: "id",
|
|
412
|
+
style: {
|
|
413
|
+
flex: 1,
|
|
414
|
+
background: level1Config.superTabsBg
|
|
415
|
+
},
|
|
416
|
+
gridProps: {
|
|
417
|
+
direction: "horizontal",
|
|
418
|
+
gap: 4,
|
|
419
|
+
wrap: isExpanded1 ? "wrap" : "nowrap"
|
|
420
|
+
},
|
|
421
|
+
scrollViewProps: {
|
|
422
|
+
style: {
|
|
423
|
+
padding: "4px 8px"
|
|
424
|
+
},
|
|
425
|
+
overflow: !isExpanded1 ? "x" : "hidden",
|
|
426
|
+
scrollbarStyle: "none",
|
|
427
|
+
scrollActionsConfig: {
|
|
428
|
+
type: "lrArrows",
|
|
429
|
+
show: true
|
|
430
|
+
}
|
|
431
|
+
},
|
|
432
|
+
renderItem: renderLevel1Item
|
|
433
|
+
}
|
|
434
|
+
)) : null;
|
|
435
|
+
};
|
|
436
|
+
PisellTabbar.displayName = "PisellTabbar";
|
|
437
|
+
var PisellTabbar_default = PisellTabbar;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { TabbarLevelConfig, LevelType } from '../../types';
|
|
2
|
+
export { getExpandConfig, DEFAULT_ITEMS } from '../../constants';
|
|
3
|
+
/**
|
|
4
|
+
* 默认层级配置
|
|
5
|
+
*/
|
|
6
|
+
export declare const DEFAULT_LEVEL_CONFIG: Record<LevelType, TabbarLevelConfig>;
|
|
7
|
+
/**
|
|
8
|
+
* 获取层级对应的添加项配置
|
|
9
|
+
*/
|
|
10
|
+
export declare const LEVEL_ADD_ITEMS: Record<LevelType, ('all' | 'search' | 'expand')[]>;
|