@pisell/materials 6.7.4 → 6.8.2

package/lib/components/PisellSuperTabs/hooks/useTabsState.js

@@ -0,0 +1,50 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellSuperTabs/hooks/useTabsState.ts
+var useTabsState_exports = {};
+__export(useTabsState_exports, {
+  useTabsState: () => useTabsState
+});
+module.exports = __toCommonJS(useTabsState_exports);
+var import_react = require("react");
+var useTabsState = (params) => {
+  const { value, defaultValue, onChange } = params;
+  const [innerValue, setInnerValue] = (0, import_react.useState)(
+    defaultValue
+  );
+  const isControlled = (0, import_react.useMemo)(() => value !== void 0, [value]);
+  const activeKey = isControlled ? value : innerValue;
+  const handleTabChange = (0, import_react.useCallback)(
+    (key, item) => {
+      if (!isControlled) {
+        setInnerValue(key);
+      }
+      onChange == null ? void 0 : onChange(key, item);
+    },
+    [isControlled, onChange]
+  );
+  return {
+    activeKey,
+    handleTabChange
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useTabsState
+});

package/lib/components/PisellSuperTabs/index.d.ts

@@ -0,0 +1,3 @@
+import PisellSuperTabs from './PisellSuperTabs';
+export default PisellSuperTabs;
+export type { PisellSuperTabsProps, TabDataItem } from './types';

package/lib/components/PisellSuperTabs/index.js

@@ -0,0 +1,36 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellSuperTabs/index.tsx
+var PisellSuperTabs_exports = {};
+__export(PisellSuperTabs_exports, {
+  default: () => PisellSuperTabs_default
+});
+module.exports = __toCommonJS(PisellSuperTabs_exports);
+var import_PisellSuperTabs = __toESM(require("./PisellSuperTabs"));
+var PisellSuperTabs_default = import_PisellSuperTabs.default;

package/lib/components/PisellSuperTabs/types.d.ts

@@ -0,0 +1,209 @@
+import { CSSProperties, ReactNode } from 'react';
+import type { PisellBasicGridProps } from '../PisellBasicGrid/types';
+import type { PisellScrollViewProps } from '../PisellScrollView/types';
+import type { PisellBasicCardProps } from '../PisellCards/types';
+/**
+ * useTabsState Hook 参数
+ */
+export interface UseTabsStateParams<T = any> {
+    /**
+     * 当前激活的 Tab key（受控）
+     */
+    value?: string;
+    /**
+     * 默认激活的 Tab key（非受控）
+     */
+    defaultValue?: string;
+    /**
+     * Tab 切换时的回调
+     */
+    onChange?: (key: string, item: T) => void;
+}
+/**
+ * useTabsState Hook 返回值
+ */
+export interface UseTabsStateReturn<T = any> {
+    /**
+     * 当前激活的 Tab key
+     */
+    activeKey: string | undefined;
+    /**
+     * 切换 Tab 的方法
+     */
+    handleTabChange: (key: string, item: T) => void;
+}
+export interface RenderItemProps<T = any> extends PisellBasicCardProps {
+    index: number;
+    tabsState: UseTabsStateReturn<T>;
+    tabsProps: PisellSuperTabsProps<T>;
+}
+/**
+ * PisellSuperTabs 组件 Props
+ * @template T - 数据源项的类型
+ * @description 通用导航框架封装的全能型 Tab 组件
+ */
+export interface PisellSuperTabsProps<T = any> {
+    /**
+     * 自定义类名
+     * @description 添加到最外层容器的类名
+     */
+    className?: string;
+    tabItemClassName?: string;
+    tabItemStyle?: CSSProperties;
+    /**
+     * 自定义样式
+     * @description 添加到最外层容器的样式
+     */
+    style?: CSSProperties;
+    /**
+     * 唯一标识
+     * @description 必填，用于区分不同的 TabItem
+     */
+    id?: string;
+    /**
+     * 数据源
+     * @description 支持多级嵌套，递归字段为 children
+     * @example
+     * [
+     *   { key: 'home', label: '首页' },
+     *   { key: 'products', label: '产品', children: [...] }
+     * ]
+     */
+    dataSource?: T[];
+    /**
+     * 数据项的唯一标识字段
+     * @default 'key'
+     * @description 可以是字符串（字段名）或函数（自定义获取逻辑）
+     * @example
+     * // 字符串形式
+     * rowKey="id"
+     *
+     * // 函数形式
+     * rowKey={(record, index) => `${record.type}-${index}`}
+     */
+    rowKey?: string | ((record: T, index: number) => string);
+    /**
+     * 当前激活的 Tab key
+     * @description 受控模式，需配合 onChange 使用
+     */
+    value?: string;
+    /**
+     * 默认激活的 Tab key
+     * @description 非受控模式，仅初始化时生效
+     */
+    defaultValue?: string;
+    /**
+     * Tab 切换时的回调
+     * @param key - 切换到的 Tab key
+     * @param item - 切换到的数据项
+     */
+    onChange?: (key: string, item: T) => void;
+    /**
+     * 自定义 TabItem 渲染
+     * @description 支持两种模式：
+     * 1. 函数模式：(item, index, active) => ReactNode
+     * 2. 插槽模式：直接传入 ReactNode
+     * @example
+     * // 函数模式
+     * renderItem={(item, index, active) => (
+     *   <PisellCards.TabCard
+     *     {...item}
+     *     active={{ value: active }}
+     *   />
+     * )}
+     *
+     * // 插槽模式
+     * renderItem={<PisellCards.TabCard />}
+     */
+    renderItem?: ((props: RenderItemProps<T>) => ReactNode) | ReactNode;
+    /**
+     * PisellBasicGrid 组件的配置
+     * @description 透传给 PisellBasicGrid 组件的所有 Props
+     * @see PisellBasicGridProps
+     * @example
+     * gridProps={{
+     *   direction: 'horizontal',
+     *   gap: 16,
+     *   wrap: 'wrap',
+     *   columns: 4,
+     * }}
+     */
+    gridProps?: Omit<PisellBasicGridProps<T>, 'dataSource' | 'renderItem' | 'rowKey' | 'children'>;
+    /**
+     * PisellScrollView 组件的配置
+     * @description 透传给 PisellScrollView 组件的所有 Props
+     * @see PisellScrollViewProps
+     * @example
+     * scrollViewProps={{
+     *   overflow: 'x',
+     *   scrollbarStyle: 'thin',
+     *   scrollActionsConfig: { show: true, type: 'lrArrows' },
+     * }}
+     */
+    scrollViewProps?: Omit<PisellScrollViewProps, 'children'>;
+    children?: ReactNode;
+    /**
+     * 左侧插槽
+     */
+    slotLeft?: ReactNode;
+    slotLeftClassName?: string;
+    slotLeftStyle?: CSSProperties;
+    /**
+     * 右侧插槽
+     */
+    slotRight?: ReactNode;
+    slotRightClassName?: string;
+    slotRightStyle?: CSSProperties;
+    /**
+     * 顶部插槽
+     */
+    slotTop?: ReactNode;
+    slotTopClassName?: string;
+    slotTopStyle?: CSSProperties;
+    /**
+     * 底部插槽
+     */
+    slotBottom?: ReactNode;
+    slotBottomClassName?: string;
+    slotBottomStyle?: CSSProperties;
+}
+/**
+ * 数据项基础类型
+ * @description 建议数据源中的每一项都包含这些字段
+ */
+export interface TabDataItem {
+    /**
+     * 唯一标识
+     * @description 必填，用于区分不同的 TabItem
+     */
+    key: string;
+    /**
+     * 标签文本
+     */
+    label?: string;
+    /**
+     * 图标
+     */
+    icon?: ReactNode;
+    /**
+     * 徽章配置
+     */
+    badge?: {
+        count?: number;
+        dot?: boolean;
+        text?: string;
+    };
+    /**
+     * 子级数据（多级嵌套）
+     * @description 用于多级导航场景，具体渲染逻辑由 Card 组件实现
+     */
+    children?: TabDataItem[];
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 其他自定义字段
+     */
+    [key: string]: any;
+}

package/lib/components/PisellSuperTabs/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellSuperTabs/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/components/PisellSuperTabs/utils/getRowKey.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 获取数据项的唯一标识
+ * @param record - 数据项
+ * @param index - 索引
+ * @param rowKey - key 字段配置
+ * @returns 唯一标识字符串
+ */
+export declare const getRowKey: <T = any>(record: T, index: number, rowKey?: string | ((record: T, index: number) => string) | undefined) => string;

package/lib/components/PisellSuperTabs/utils/getRowKey.js

@@ -0,0 +1,50 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellSuperTabs/utils/getRowKey.ts
+var getRowKey_exports = {};
+__export(getRowKey_exports, {
+  getRowKey: () => getRowKey
+});
+module.exports = __toCommonJS(getRowKey_exports);
+var getRowKey = (record, index, rowKey) => {
+  if (typeof rowKey === "function") {
+    return rowKey(record, index);
+  }
+  if (typeof rowKey === "string") {
+    const key = record == null ? void 0 : record[rowKey];
+    if (key !== void 0 && key !== null) {
+      return String(key);
+    }
+  }
+  const defaultKey = record == null ? void 0 : record.key;
+  if (defaultKey !== void 0 && defaultKey !== null) {
+    return String(defaultKey);
+  }
+  if (process.env.NODE_ENV === "development") {
+    console.warn(
+      "[PisellSuperTabs] rowKey is not found in data item, using index as fallback. This may cause issues with state management.",
+      record
+    );
+  }
+  return String(index);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getRowKey
+});

package/lib/components/PisellSuperTabs/utils/index.d.ts

@@ -0,0 +1 @@
+export { getRowKey } from './getRowKey';

package/lib/components/PisellSuperTabs/utils/index.js

@@ -0,0 +1,29 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellSuperTabs/utils/index.ts
+var utils_exports = {};
+__export(utils_exports, {
+  getRowKey: () => import_getRowKey.getRowKey
+});
+module.exports = __toCommonJS(utils_exports);
+var import_getRowKey = require("./getRowKey");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getRowKey
+});

package/lib/components/PisellTabbar/PisellTabbar.d.ts

@@ -0,0 +1,3 @@
+import PisellTabbar2 from '../PisellTabbar2';
+import './PisellTabbar.less';
+export default PisellTabbar2;

package/lib/components/PisellTabbar/PisellTabbar.js

@@ -0,0 +1,186 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellTabbar/PisellTabbar.tsx
+var PisellTabbar_exports = {};
+__export(PisellTabbar_exports, {
+  default: () => PisellTabbar_default
+});
+module.exports = __toCommonJS(PisellTabbar_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_components = require("./components");
+var import_hooks = require("./hooks");
+var import_utils = require("./utils");
+var import_constants = require("./constants");
+var import_mock = __toESM(require("./mock"));
+var import_PisellTabbar2 = __toESM(require("../PisellTabbar2"));
+var import_PisellTabbar = require("./PisellTabbar.less");
+var PisellTabbar = (props) => {
+  const {
+    dataSource = (props == null ? void 0 : props.__designMode) ? import_mock.default : import_mock.default,
+    value,
+    onChange,
+    className,
+    style,
+    levelConfig: customLevelConfig,
+    expandConfig,
+    maxLevel = 3
+  } = props;
+  const { setActiveKey, getActiveKey, _setActiveKey } = (0, import_hooks.useActiveKey)({
+    initialActiveKey: value || (0, import_utils.getDefaultActiveKey)(dataSource, "id"),
+    onChange
+  });
+  const { expand, toggleExpand, getExpand } = (0, import_hooks.useExpand)();
+  (0, import_react.useEffect)(() => {
+    if (value) {
+      _setActiveKey(value);
+    }
+  }, [JSON.stringify(value)]);
+  const getLevelConfig = (0, import_react.useCallback)(
+    (level) => {
+      return {
+        ...import_constants.DEFAULT_LEVEL_CONFIG[level],
+        ...customLevelConfig == null ? void 0 : customLevelConfig[level]
+      };
+    },
+    [customLevelConfig]
+  );
+  const handleLevel1Change = (0, import_react.useCallback)(
+    (key, item) => {
+      var _a;
+      setActiveKey(0, key, ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? 0 : void 0);
+    },
+    [setActiveKey]
+  );
+  const handleLevel2Change = (0, import_react.useCallback)(
+    (key, item) => {
+      var _a;
+      setActiveKey(1, key, ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? 0 : void 0);
+    },
+    [setActiveKey]
+  );
+  const handleLevel3Change = (0, import_react.useCallback)(
+    (key) => {
+      setActiveKey(2, key);
+    },
+    [setActiveKey]
+  );
+  const level1DataSource = (0, import_react.useMemo)(
+    () => (0, import_utils.addDataSourceItemsByKey)(dataSource, import_constants.LEVEL_ADD_ITEMS.level1),
+    [dataSource]
+  );
+  const renderLevel2 = (0, import_react.useCallback)(
+    (panelProps) => {
+      if (maxLevel < 2) return null;
+      let _dataSource = panelProps.dataSource.children || [];
+      if (_dataSource.length) {
+        _dataSource = (0, import_utils.addDataSourceItemsByKey)(
+          _dataSource,
+          import_constants.LEVEL_ADD_ITEMS.level2
+        );
+      }
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_components.TabbarLevel,
+        {
+          skuId: `sku-list-tabbar-${panelProps.dataSource.id}`,
+          dataSource: _dataSource,
+          activePanelKey: getActiveKey(1),
+          level: "level2",
+          setActivePanelKey: handleLevel2Change,
+          expand: getExpand("level2"),
+          handleExpand: () => toggleExpand("level2"),
+          renderChildren: renderLevel3,
+          levelConfig: getLevelConfig("level2"),
+          expandConfig
+        }
+      );
+    },
+    [
+      maxLevel,
+      getActiveKey,
+      handleLevel2Change,
+      getExpand,
+      toggleExpand,
+      getLevelConfig,
+      expandConfig
+    ]
+  );
+  const renderLevel3 = (0, import_react.useCallback)(
+    (panelProps2) => {
+      if (maxLevel < 3) return null;
+      let _dataSource2 = panelProps2.dataSource.children || [];
+      if (_dataSource2.length) {
+        _dataSource2 = (0, import_utils.addDataSourceItemsByKey)(
+          _dataSource2,
+          import_constants.LEVEL_ADD_ITEMS.level3
+        );
+      }
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_components.TabbarLevel,
+        {
+          skuId: `sku-list-tabbar-${panelProps2.dataSource.id}`,
+          dataSource: _dataSource2,
+          activePanelKey: getActiveKey(2),
+          level: "level3",
+          setActivePanelKey: handleLevel3Change,
+          expand: getExpand("level3"),
+          handleExpand: () => toggleExpand("level3"),
+          levelConfig: getLevelConfig("level3"),
+          expandConfig
+        }
+      );
+    },
+    [
+      maxLevel,
+      getActiveKey,
+      handleLevel3Change,
+      getExpand,
+      toggleExpand,
+      getLevelConfig,
+      expandConfig
+    ]
+  );
+  return dataSource.length ? /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-tabbar", className), style }, /* @__PURE__ */ import_react.default.createElement(
+    import_components.TabbarLevel,
+    {
+      skuId: "sku-list-tabbar",
+      dataSource: level1DataSource,
+      activePanelKey: getActiveKey(0),
+      level: "level1",
+      setActivePanelKey: handleLevel1Change,
+      expand: getExpand("level1"),
+      handleExpand: () => toggleExpand("level1"),
+      renderChildren: renderLevel2,
+      levelConfig: getLevelConfig("level1"),
+      expandConfig
+    }
+  )) : null;
+};
+PisellTabbar.displayName = "PisellTabbar";
+var PisellTabbar_default = import_PisellTabbar2.default;

package/lib/components/PisellTabbar/PisellTabbar.less

@@ -0,0 +1,26 @@
+/**
+ * PisellTabbar 组件样式
+ */
+.pisell-tabbar {
+  width: 100%;
+  position: relative;
+
+  /* 层级容器样式 */
+  &-level {
+    &-wrapper {
+      position: relative;
+    }
+  }
+
+  /* 响应式适配 */
+  @media (max-width: 768px) {
+    .pisell-tabbar-level {
+      font-size: 14px;
+    }
+  }
+
+  /* 过渡动画 */
+  .pisell-super-tabs {
+    transition: all 0.3s ease;
+  }
+}

package/lib/components/PisellTabbar/components/TabbarLevel.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TabbarLevelProps } from '../types';
+/**
+ * Tabbar 层级组件
+ * 负责渲染单个层级的 Tab 导航
+ */
+declare const TabbarLevel: React.FC<TabbarLevelProps>;
+export default TabbarLevel;