@pisell/materials 1.0.983 → 1.0.988

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

@@ -0,0 +1,111 @@
+import { CSSProperties, ReactNode } from 'react';
+/**
+ * Tabbar 数据源项类型
+ */
+export interface TabbarDataSource {
+    /** 唯一标识 */
+    id: string | number;
+    /** 店铺ID */
+    shop_id?: number;
+    /** 父级ID */
+    parent_id?: number;
+    /** 显示名称 */
+    name: string;
+    /** URL slug */
+    slug?: string;
+    /** 图标 URL 或图标名称 */
+    icon?: string;
+    /** 子级数据 */
+    children?: TabbarDataSource[];
+    /** 自定义点击事件标识 */
+    customClick?: boolean;
+    /** 唯一 key */
+    key?: string;
+}
+/**
+ * 层级配置
+ */
+export interface TabbarLevelConfig {
+    /** SuperTabs 背景色 */
+    superTabsBg: string;
+    /** 卡片宽度 */
+    cardWidth: number;
+    /** 卡片高度 */
+    cardHeight: number;
+    /** 左侧缩进 */
+    paddingLeft?: number;
+}
+/**
+ * 展开配置
+ */
+export interface ExpandConfig {
+    /** 激活状态配置 */
+    active: {
+        icon: string;
+        text: string;
+    };
+    /** 未激活状态配置 */
+    inactive: {
+        icon: string;
+        text: string;
+    };
+}
+/**
+ * 展开状态
+ */
+export interface ExpandState {
+    level1: boolean;
+    level2: boolean;
+    level3: boolean;
+}
+/**
+ * 层级类型
+ */
+export declare type LevelType = 'level1' | 'level2' | 'level3';
+/**
+ * TabbarLevel 组件属性
+ */
+export interface TabbarLevelProps {
+    /** SKU ID */
+    skuId: string;
+    /** 数据源 */
+    dataSource: TabbarDataSource[];
+    /** 当前激活的面板 key */
+    activePanelKey: string | number;
+    /** 层级 */
+    level: LevelType;
+    /** 设置激活面板 key */
+    setActivePanelKey: (key: string | number, item?: TabbarDataSource) => void;
+    /** 是否展开 */
+    expand: boolean;
+    /** 展开处理函数 */
+    handleExpand: () => void;
+    /** 渲染子级内容 */
+    renderChildren?: (panelProps: any) => ReactNode;
+    /** 层级配置 */
+    levelConfig?: TabbarLevelConfig;
+    /** 展开配置 */
+    expandConfig?: ExpandConfig;
+}
+/**
+ * PisellTabbar 组件属性
+ */
+export interface PisellTabbarProps {
+    /** 数据源 */
+    dataSource?: TabbarDataSource[];
+    /** 当前选中的值（多层级 key 数组） */
+    value?: (string | number)[];
+    /** 值变化回调 */
+    onChange?: (value: (string | number)[]) => void;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 层级配置（可按层级自定义） */
+    levelConfig?: Partial<Record<LevelType, Partial<TabbarLevelConfig>>>;
+    /** 展开配置 */
+    expandConfig?: ExpandConfig;
+    /** 最大层级数 */
+    maxLevel?: 1 | 2 | 3;
+    __designMode?: boolean;
+}

package/es/components/PisellTabbar/types.js

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

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

@@ -0,0 +1,35 @@
+/**
+ * PisellTabbar 工具函数
+ */
+import { TabbarDataSource } from '../types';
+/**
+ * 向数据源添加特殊项（如 all、search、expand 按钮）
+ *
+ * @param dataSource - 原始数据源
+ * @param keys - 要添加的特殊项 key 数组
+ * @returns 添加了特殊项的新数据源
+ *
+ * @example
+ * ```tsx
+ * const newData = addDataSourceItemsByKey(categoryData, ['expand', 'all']);
+ * // 返回: [expandItem, allItem, ...categoryData]
+ * ```
+ */
+export declare const addDataSourceItemsByKey: (dataSource: TabbarDataSource[], keys: ('all' | 'search' | 'expand')[]) => TabbarDataSource[];
+/**
+ * 获取默认激活的 key 数组
+ *
+ * @param dataSource - 数据源
+ * @param rowKey - 用作唯一标识的字段名
+ * @returns 默认激活的 key 数组（多层级）
+ *
+ * @description
+ * 默认选中第一项，如果第一项有子级，同时选中第一个子级
+ *
+ * @example
+ * ```tsx
+ * const defaultKeys = getDefaultActiveKey(categoryData, 'id');
+ * // 返回: [1, 0] (第一层级的第一项ID，第二层级的第一项ID)
+ * ```
+ */
+export declare const getDefaultActiveKey: (dataSource: TabbarDataSource[], rowKey: string) => (string | number)[];

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

@@ -0,0 +1,93 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+/**
+ * PisellTabbar 工具函数
+ */
+
+/**
+ * 默认的特殊项配置
+ */
+var defaultItems = {
+  all: {
+    id: 0,
+    shop_id: 9,
+    parent_id: 0,
+    name: 'All',
+    slug: 'All',
+    icon: ''
+  },
+  search: {
+    id: -1,
+    shop_id: 9,
+    parent_id: 0,
+    name: 'Search',
+    slug: 'Search',
+    key: 'search',
+    icon: '',
+    customClick: true
+  },
+  expand: {
+    id: -2,
+    shop_id: 9,
+    parent_id: 0,
+    key: 'expand',
+    icon: 'pisell2-expand-01',
+    name: 'Expand',
+    slug: 'expand',
+    customClick: true
+  }
+};
+
+/**
+ * 向数据源添加特殊项（如 all、search、expand 按钮）
+ * 
+ * @param dataSource - 原始数据源
+ * @param keys - 要添加的特殊项 key 数组
+ * @returns 添加了特殊项的新数据源
+ * 
+ * @example
+ * ```tsx
+ * const newData = addDataSourceItemsByKey(categoryData, ['expand', 'all']);
+ * // 返回: [expandItem, allItem, ...categoryData]
+ * ```
+ */
+export var addDataSourceItemsByKey = function addDataSourceItemsByKey(dataSource, keys) {
+  return [].concat(_toConsumableArray(keys.map(function (key) {
+    return defaultItems[key];
+  })), _toConsumableArray(dataSource));
+};
+
+/**
+ * 获取默认激活的 key 数组
+ * 
+ * @param dataSource - 数据源
+ * @param rowKey - 用作唯一标识的字段名
+ * @returns 默认激活的 key 数组（多层级）
+ * 
+ * @description
+ * 默认选中第一项，如果第一项有子级，同时选中第一个子级
+ * 
+ * @example
+ * ```tsx
+ * const defaultKeys = getDefaultActiveKey(categoryData, 'id');
+ * // 返回: [1, 0] (第一层级的第一项ID，第二层级的第一项ID)
+ * ```
+ */
+export var getDefaultActiveKey = function getDefaultActiveKey(dataSource, rowKey) {
+  var _activeKey = [];
+  if (dataSource.length) {
+    var _dataSource$0$childre;
+    // 添加第一层级的第一项
+    _activeKey.push(dataSource[0][rowKey]);
+
+    // 如果第一项有子级，添加第二层级的第一项
+    if ((_dataSource$0$childre = dataSource[0].children) !== null && _dataSource$0$childre !== void 0 && _dataSource$0$childre.length) {
+      _activeKey.push(0);
+    }
+  }
+  return _activeKey;
+};

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { getDefaultActiveKey } from './utils';
+import { PisellTabbarProps } from './types';
+import './PisellTabbar.less';
+/**
+ * PisellTabbar - 多层级 Tabbar 组件
+ *
+ * 支持最多 3 层级的 Tab 导航，每层级可独立展开/收起
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PisellTabbar
+ *   dataSource={categoryData}
+ *   value={[1, 10, 100]}
+ *   onChange={(value) => console.log('当前选中:', value)}
+ * />
+ * ```
+ */
+declare const PisellTabbar: React.FC<PisellTabbarProps> & {
+    getDefaultActiveKey: typeof getDefaultActiveKey;
+};
+export default PisellTabbar;

package/es/components/PisellTabbar2/PisellTabbar.js

@@ -0,0 +1,281 @@
+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 "./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,
+    panelVisible = _useActiveKey.panelVisible,
+    activeKey = _useActiveKey.activeKey;
+  // 展开状态管理
+  var _useExpand = useExpand(),
+    expand = _useExpand.expand,
+    toggleExpand = _useExpand.toggleExpand,
+    getExpand = _useExpand.getExpand;
+  console.log('panelVisiblepanelVisible', panelVisible);
+  /**
+   * 同步外部 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) {
+    if (item.childrenMaxLevel !== undefined && item.childrenMaxLevel < 2) {
+      setActiveKey(0, key, 0);
+    } else {
+      var _item$children, _item$children$;
+      setActiveKey(0, key, item !== null && item !== void 0 && (_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length ? item === null || item === void 0 || (_item$children$ = item.children[0]) === null || _item$children$ === void 0 ? void 0 : _item$children$.id : 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 childrenMaxLevel = panelProps.dataSource.childrenMaxLevel || 2;
+
+    // 如果子级最大层级小于2，则渲染三级 Tabbar 样式
+    if (childrenMaxLevel < 2) {
+      return renderLevel3(panelProps, true);
+    }
+    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,
+      positionId: getLevelConfig('level2').positionId,
+      superTabsProps: {
+        className: 'pisell-tabbar-level-2',
+        style: {
+          width: '104px'
+        },
+        gridProps: {
+          direction: 'vertical',
+          style: {
+            padding: '16px 4px'
+          },
+          gap: 12
+        },
+        startSlot: null,
+        scrollViewProps: {
+          overflow: 'y',
+          width: '100%',
+          height: '100%',
+          style: {
+            padding: 0
+          },
+          scrollActionsConfig: {
+            type: 'tbArrows',
+            show: true
+          }
+        }
+      }
+    });
+  }, [maxLevel, getActiveKey, handleLevel2Change, getExpand, toggleExpand, getLevelConfig, expandConfig]);
+
+  /**
+   * 渲染三级 Tabbar
+   */
+  var renderLevel3 = useCallback(function (panelProps2, isLevel2) {
+    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(isLevel2 ? 1 : 2),
+      level: 'level3',
+      setActivePanelKey: isLevel2 ? handleLevel2Change : handleLevel3Change,
+      expand: getExpand(isLevel2 ? 'level2' : 'level3'),
+      handleExpand: function handleExpand() {
+        return toggleExpand(isLevel2 ? 'level2' : 'level3');
+      },
+      levelConfig: getLevelConfig('level3'),
+      expandConfig: expandConfig,
+      positionId: getLevelConfig(isLevel2 ? 'level2' : 'level3').positionId
+    });
+  }, [maxLevel, getActiveKey, handleLevel3Change, getExpand, toggleExpand, getLevelConfig, expandConfig]);
+  useEffect(function () {
+    document.body.id = 'body';
+  }, []);
+  console.log('activeKeyactiveKey', activeKey);
+  return dataSource.length ? /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-tabbar2', 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,
+    superTabsProps: {
+      gridProps: {
+        direction: 'vertical',
+        style: {
+          padding: '16px 4px'
+        },
+        gap: 12
+      },
+      panelStyle: {
+        position: 'absolute',
+        top: 40,
+        right: 0,
+        height: 'calc(100% - 40px)',
+        transition: '0.3s ease-in-out'
+      },
+      startSlot: null,
+      scrollViewProps: {
+        overflow: 'y',
+        width: '100%',
+        height: '100%',
+        style: {
+          padding: 0
+        },
+        scrollActionsConfig: {
+          type: 'tbArrows',
+          show: true
+        }
+      }
+    },
+    positionId: getLevelConfig('level1').positionId,
+    level2PositionId: getLevelConfig('level2').positionId,
+    panelVisible: panelVisible
+  })) : null;
+};
+PisellTabbar.displayName = 'PisellTabbar';
+PisellTabbar.getDefaultActiveKey = getDefaultActiveKey;
+
+// const Demo = () => {
+//   return (
+//     <div style={{ height: '100vh', width: '100%', display: 'flex' }}>
+//       <div className="" style={{ height: '100%', width: 'calc(100% - 100px)' }}>
+//         <div className="tabbar-level-3-wrap" style={{ width: '100%' }}></div>
+//         <div className="" style={{ height: '400px' }}>
+//           content
+//         </div>
+//       </div>
+//       <div
+//         className=""
+//         style={{
+//           height: '100%',
+//           width: '100px',
+//           display: 'flex',
+//           alignItems: 'flex-start',
+//         }}
+//       >
+//         <div
+//           className="tabbar-level-2-wrap"
+//           style={{
+//             height: '100%',
+//             position: 'relative',
+//           }}
+//         ></div>
+//         <div className="" style={{ height: '100%' }}>
+//           <PisellTabbar __designMode />
+//         </div>
+//       </div>
+//     </div>
+//   );
+// };
+
+export default PisellTabbar;

package/es/components/PisellTabbar2/PisellTabbar.less

@@ -0,0 +1,26 @@
+/**
+ * PisellTabbar 组件样式
+ */
+.pisell-tabbar2 {
+  // height: 100vh;
+  width: 96px;
+  height: 100%;
+  // position: fixed;
+  // top: 0;
+  // right: 0;
+  // z-index: 1000;
+}
+
+
+.pisell-tabbar-level-2 {
+  width: 104px;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 8px 0 0 8px;
+  border-top: 1px solid rgba(255, 255, 255, 0.30);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.30);
+  border-left: 1px solid rgba(255, 255, 255, 0.30);
+  background: rgba(52, 64, 84, 0.80);
+  box-shadow: -2px -1px 4px 0 rgba(0, 0, 0, 0.55), -2px 2px 4px 0 rgba(255, 255, 255, 0.45);
+  backdrop-filter: blur(12px);
+}

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