@pisell/materials 6.8.8 → 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.
Files changed (73) hide show
  1. package/build/lowcode/assets-daily.json +11 -11
  2. package/build/lowcode/assets-dev.json +2 -2
  3. package/build/lowcode/assets-prod.json +11 -11
  4. package/build/lowcode/index.js +1 -1
  5. package/build/lowcode/meta.js +1 -1
  6. package/build/lowcode/preview.js +8 -8
  7. package/build/lowcode/render/default/view.js +16 -16
  8. package/build/lowcode/view.js +16 -16
  9. package/es/components/PisellProcedure/PisellProcedure.stories.d.ts +163 -0
  10. package/es/components/PisellProcedure/PisellProcedure.stories.js +1611 -0
  11. package/es/components/PisellScrollView/PisellScrollView.stories.d.ts +87 -0
  12. package/es/components/PisellScrollView/PisellScrollView.stories.js +772 -0
  13. package/es/components/PisellScrollView/hooks/useScrollEvents.js +18 -3
  14. package/es/components/PisellScrollView/index.d.ts +2 -1
  15. package/es/components/PisellScrollView/index.js +2 -1
  16. package/es/components/PisellSteps/PisellSteps.stories.d.ts +155 -0
  17. package/es/components/PisellSteps/PisellSteps.stories.js +851 -0
  18. package/es/components/PisellSuperTabs/PisellSuperTabs.d.ts +6 -10
  19. package/es/components/PisellSuperTabs/PisellSuperTabs.js +28 -8
  20. package/es/components/PisellSuperTabs/types.d.ts +1 -0
  21. package/es/components/PisellTabbar/PisellTabbar.d.ts +2 -19
  22. package/es/components/PisellTabbar/PisellTabbar.js +2 -1
  23. package/es/components/PisellTabbar/constants.d.ts +4 -4
  24. package/es/components/PisellTabbar/constants.js +5 -5
  25. package/es/components/PisellTabbar/index.d.ts +2 -0
  26. package/es/components/PisellTabbar/index.js +2 -0
  27. package/es/components/PisellTabbar/template/Template1/PisellTabbar.d.ts +20 -0
  28. package/es/components/PisellTabbar/template/Template1/PisellTabbar.js +426 -0
  29. package/es/components/PisellTabbar/template/Template1/constants.d.ts +10 -0
  30. package/es/components/PisellTabbar/template/Template1/constants.js +33 -0
  31. package/es/components/PisellTabbar/template/Template1/index.d.ts +6 -0
  32. package/es/components/PisellTabbar/template/Template1/index.js +7 -0
  33. package/es/components/PisellTabbar/template/Template1/utils/index.d.ts +35 -0
  34. package/es/components/PisellTabbar/template/Template1/utils/index.js +96 -0
  35. package/es/components/PisellTabbar/utils/index.d.ts +33 -0
  36. package/es/components/PisellTabbar/utils/index.js +3 -2
  37. package/es/components/productCard/cartSkuCard/components/packages/utils.d.ts +1 -1
  38. package/es/components/productCard/components/Packages/utils.d.ts +1 -1
  39. package/es/index.d.ts +2 -1
  40. package/es/index.js +2 -1
  41. package/lib/components/PisellProcedure/PisellProcedure.stories.d.ts +163 -0
  42. package/lib/components/PisellProcedure/PisellProcedure.stories.js +925 -0
  43. package/lib/components/PisellScrollView/PisellScrollView.stories.d.ts +87 -0
  44. package/lib/components/PisellScrollView/PisellScrollView.stories.js +535 -0
  45. package/lib/components/PisellScrollView/hooks/useScrollEvents.js +13 -3
  46. package/lib/components/PisellScrollView/index.d.ts +2 -1
  47. package/lib/components/PisellScrollView/index.js +2 -5
  48. package/lib/components/PisellSteps/PisellSteps.stories.d.ts +155 -0
  49. package/lib/components/PisellSteps/PisellSteps.stories.js +570 -0
  50. package/lib/components/PisellSuperTabs/PisellSuperTabs.d.ts +6 -10
  51. package/lib/components/PisellSuperTabs/PisellSuperTabs.js +25 -6
  52. package/lib/components/PisellSuperTabs/types.d.ts +1 -0
  53. package/lib/components/PisellTabbar/PisellTabbar.d.ts +2 -19
  54. package/lib/components/PisellTabbar/PisellTabbar.js +2 -1
  55. package/lib/components/PisellTabbar/constants.d.ts +4 -4
  56. package/lib/components/PisellTabbar/constants.js +5 -5
  57. package/lib/components/PisellTabbar/index.d.ts +2 -0
  58. package/lib/components/PisellTabbar/index.js +6 -0
  59. package/lib/components/PisellTabbar/template/Template1/PisellTabbar.d.ts +20 -0
  60. package/lib/components/PisellTabbar/template/Template1/PisellTabbar.js +437 -0
  61. package/lib/components/PisellTabbar/template/Template1/constants.d.ts +10 -0
  62. package/lib/components/PisellTabbar/template/Template1/constants.js +60 -0
  63. package/lib/components/PisellTabbar/template/Template1/index.d.ts +6 -0
  64. package/lib/components/PisellTabbar/template/Template1/index.js +36 -0
  65. package/lib/components/PisellTabbar/template/Template1/utils/index.d.ts +35 -0
  66. package/lib/components/PisellTabbar/template/Template1/utils/index.js +68 -0
  67. package/lib/components/PisellTabbar/utils/index.d.ts +33 -0
  68. package/lib/components/PisellTabbar/utils/index.js +4 -1
  69. package/lib/components/productCard/cartSkuCard/components/packages/utils.d.ts +1 -1
  70. package/lib/components/productCard/components/Packages/utils.d.ts +1 -1
  71. package/lib/index.d.ts +2 -1
  72. package/lib/index.js +5 -2
  73. package/package.json +23 -4
@@ -1,12 +1,8 @@
1
+ import React from 'react';
1
2
  import type { PisellSuperTabsProps } from './types';
2
3
  import './PisellSuperTabs.less';
3
- /**
4
- * PisellSuperTabs 组件
5
- * @description 通用导航框架封装的全能型 Tab 组件
6
- * @template T - 数据源项的类型
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.PisellScrollView, { ...scrollViewProps }, /* @__PURE__ */ import_react.default.createElement(
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);
@@ -166,6 +166,7 @@ export interface PisellSuperTabsProps<T = any> {
166
166
  slotBottom?: ReactNode;
167
167
  slotBottomClassName?: string;
168
168
  slotBottomStyle?: CSSProperties;
169
+ __designMode?: boolean;
169
170
  }
170
171
  /**
171
172
  * 数据项基础类型
@@ -1,20 +1,3 @@
1
- import React from 'react';
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 = PisellTabbar;
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: number;
15
+ id: string;
16
16
  shop_id: number;
17
17
  parent_id: number;
18
- name: string;
18
+ name: any;
19
19
  slug: string;
20
20
  icon: string;
21
21
  };
22
22
  search: {
23
- id: number;
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: number;
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: "All",
65
- slug: "All",
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')[]>;