@pisell/materials 6.7.4 → 6.8.2

package/es/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/es/components/PisellSuperTabs/types.js

@@ -0,0 +1 @@
+export {};

package/es/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/es/components/PisellSuperTabs/utils/getRowKey.js

@@ -0,0 +1,33 @@
+/**
+ * 获取数据项的唯一标识
+ * @param record - 数据项
+ * @param index - 索引
+ * @param rowKey - key 字段配置
+ * @returns 唯一标识字符串
+ */
+export var getRowKey = function getRowKey(record, index, rowKey) {
+  // 如果 rowKey 是函数，调用函数获取 key
+  if (typeof rowKey === 'function') {
+    return rowKey(record, index);
+  }
+
+  // 如果 rowKey 是字符串，从 record 中取对应字段的值
+  if (typeof rowKey === 'string') {
+    var key = record === null || record === void 0 ? void 0 : record[rowKey];
+    if (key !== undefined && key !== null) {
+      return String(key);
+    }
+  }
+
+  // 默认尝试从 record.key 取值
+  var defaultKey = record === null || record === void 0 ? void 0 : record.key;
+  if (defaultKey !== undefined && defaultKey !== null) {
+    return String(defaultKey);
+  }
+
+  // 如果都获取不到，使用索引作为 key（开发环境下警告）
+  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);
+};

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

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

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

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

package/es/components/PisellTabbar/PisellTabbar.d.ts

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

package/es/components/PisellTabbar/PisellTabbar.js

@@ -0,0 +1,175 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { useCallback, useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import { TabbarLevel } from "./components";
+import { useActiveKey, useExpand } from "./hooks";
+import { addDataSourceItemsByKey, getDefaultActiveKey } from "./utils";
+import { DEFAULT_LEVEL_CONFIG, LEVEL_ADD_ITEMS } from "./constants";
+import mock from "./mock";
+import PisellTabbar2 from "../PisellTabbar2";
+import "./PisellTabbar.less";
+
+/**
+ * PisellTabbar - 多层级 Tabbar 组件
+ *
+ * 支持最多 3 层级的 Tab 导航，每层级可独立展开/收起
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PisellTabbar
+ *   dataSource={categoryData}
+ *   value={[1, 10, 100]}
+ *   onChange={(value) => console.log('当前选中:', value)}
+ * />
+ * ```
+ */
+var PisellTabbar = function PisellTabbar(props) {
+  var _props$dataSource = props.dataSource,
+    dataSource = _props$dataSource === void 0 ? props !== null && props !== void 0 && props.__designMode ? mock : mock : _props$dataSource,
+    value = props.value,
+    onChange = props.onChange,
+    className = props.className,
+    style = props.style,
+    customLevelConfig = props.levelConfig,
+    expandConfig = props.expandConfig,
+    _props$maxLevel = props.maxLevel,
+    maxLevel = _props$maxLevel === void 0 ? 3 : _props$maxLevel;
+
+  // 激活的 key 管理
+  var _useActiveKey = useActiveKey({
+      initialActiveKey: value || getDefaultActiveKey(dataSource, 'id'),
+      onChange: onChange
+    }),
+    setActiveKey = _useActiveKey.setActiveKey,
+    getActiveKey = _useActiveKey.getActiveKey,
+    _setActiveKey = _useActiveKey._setActiveKey;
+
+  // 展开状态管理
+  var _useExpand = useExpand(),
+    expand = _useExpand.expand,
+    toggleExpand = _useExpand.toggleExpand,
+    getExpand = _useExpand.getExpand;
+
+  /**
+   * 同步外部 value 到内部状态
+   */
+  useEffect(function () {
+    if (value) {
+      _setActiveKey(value);
+    }
+  }, [JSON.stringify(value)]);
+
+  /**
+   * 获取层级配置
+   */
+  var getLevelConfig = useCallback(function (level) {
+    return _objectSpread(_objectSpread({}, DEFAULT_LEVEL_CONFIG[level]), customLevelConfig === null || customLevelConfig === void 0 ? void 0 : customLevelConfig[level]);
+  }, [customLevelConfig]);
+
+  /**
+   * 处理一级 Tab 切换
+   */
+  var handleLevel1Change = useCallback(function (key, item) {
+    var _item$children;
+    setActiveKey(0, key, item !== null && item !== void 0 && (_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length ? 0 : undefined);
+  }, [setActiveKey]);
+
+  /**
+   * 处理二级 Tab 切换
+   */
+  var handleLevel2Change = useCallback(function (key, item) {
+    var _item$children2;
+    setActiveKey(1, key, item !== null && item !== void 0 && (_item$children2 = item.children) !== null && _item$children2 !== void 0 && _item$children2.length ? 0 : undefined);
+  }, [setActiveKey]);
+
+  /**
+   * 处理三级 Tab 切换
+   */
+  var handleLevel3Change = useCallback(function (key) {
+    setActiveKey(2, key);
+  }, [setActiveKey]);
+
+  /**
+   * 渲染一级 Tabbar
+   */
+  var level1DataSource = useMemo(function () {
+    return addDataSourceItemsByKey(dataSource, LEVEL_ADD_ITEMS.level1);
+  }, [dataSource]);
+
+  /**
+   * 渲染二级 Tabbar
+   */
+  var renderLevel2 = useCallback(function (panelProps) {
+    if (maxLevel < 2) return null;
+    var _dataSource = panelProps.dataSource.children || [];
+    if (_dataSource.length) {
+      _dataSource = addDataSourceItemsByKey(_dataSource, LEVEL_ADD_ITEMS.level2);
+    }
+    return /*#__PURE__*/React.createElement(TabbarLevel, {
+      skuId: "sku-list-tabbar-".concat(panelProps.dataSource.id),
+      dataSource: _dataSource,
+      activePanelKey: getActiveKey(1),
+      level: "level2",
+      setActivePanelKey: handleLevel2Change,
+      expand: getExpand('level2'),
+      handleExpand: function handleExpand() {
+        return toggleExpand('level2');
+      },
+      renderChildren: renderLevel3,
+      levelConfig: getLevelConfig('level2'),
+      expandConfig: expandConfig
+    });
+  }, [maxLevel, getActiveKey, handleLevel2Change, getExpand, toggleExpand, getLevelConfig, expandConfig]);
+
+  /**
+   * 渲染三级 Tabbar
+   */
+  var renderLevel3 = useCallback(function (panelProps2) {
+    if (maxLevel < 3) return null;
+    var _dataSource2 = panelProps2.dataSource.children || [];
+    if (_dataSource2.length) {
+      _dataSource2 = addDataSourceItemsByKey(_dataSource2, LEVEL_ADD_ITEMS.level3);
+    }
+    return /*#__PURE__*/React.createElement(TabbarLevel, {
+      skuId: "sku-list-tabbar-".concat(panelProps2.dataSource.id),
+      dataSource: _dataSource2,
+      activePanelKey: getActiveKey(2),
+      level: "level3",
+      setActivePanelKey: handleLevel3Change,
+      expand: getExpand('level3'),
+      handleExpand: function handleExpand() {
+        return toggleExpand('level3');
+      },
+      levelConfig: getLevelConfig('level3'),
+      expandConfig: expandConfig
+    });
+  }, [maxLevel, getActiveKey, handleLevel3Change, getExpand, toggleExpand, getLevelConfig, expandConfig]);
+  return dataSource.length ? /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-tabbar', className),
+    style: style
+  }, /*#__PURE__*/React.createElement(TabbarLevel, {
+    skuId: "sku-list-tabbar",
+    dataSource: level1DataSource,
+    activePanelKey: getActiveKey(0),
+    level: "level1",
+    setActivePanelKey: handleLevel1Change,
+    expand: getExpand('level1'),
+    handleExpand: function handleExpand() {
+      return toggleExpand('level1');
+    },
+    renderChildren: renderLevel2,
+    levelConfig: getLevelConfig('level1'),
+    expandConfig: expandConfig
+  })) : null;
+};
+PisellTabbar.displayName = 'PisellTabbar';
+
+// PisellTabbar.Template1 = PisellTabbar2;
+
+export default PisellTabbar2;

package/es/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/es/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;