@pisell/materials 6.3.22 → 6.3.24

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

@@ -0,0 +1,118 @@
+/**
+ * 计算当前步骤的进度百分比
+ * 
+ * @param current - 当前步骤索引
+ * @param total - 总步骤数
+ * @returns 进度百分比（0-100）
+ */
+export function calculateProgress(current, total) {
+  if (total <= 0) return 0;
+  if (current < 0) return 0;
+  if (current >= total) return 100;
+  return Math.round((current + 1) / total * 100);
+}
+
+/**
+ * 判断步骤是否可点击
+ * 
+ * @param index - 步骤索引
+ * @param current - 当前步骤索引
+ * @param status - 步骤状态
+ * @param clickable - 全局是否可点击
+ * @param allowClickFinished - 是否允许点击已完成步骤
+ * @returns 是否可点击
+ */
+export function isStepClickable(index, current, status, clickable, allowClickFinished) {
+  // 全局不允许点击
+  if (!clickable) {
+    return false;
+  }
+
+  // 当前步骤不可点击（避免重复触发）
+  if (index === current) {
+    return false;
+  }
+
+  // 已完成的步骤
+  if (status === 'finish' || index < current) {
+    return allowClickFinished;
+  }
+
+  // 等待中的步骤默认不可点击
+  if (status === 'wait') {
+    return false;
+  }
+
+  // 错误状态的步骤可以点击（用于修正）
+  if (status === 'error') {
+    return true;
+  }
+  return true;
+}
+
+/**
+ * 获取步骤状态
+ * 
+ * @param index - 步骤索引
+ * @param current - 当前步骤索引
+ * @param customStatus - 自定义状态（优先级最高）
+ * @returns 步骤状态
+ */
+export function getStepStatus(index, current, customStatus) {
+  // 如果有自定义状态，直接返回
+  if (customStatus) {
+    return customStatus;
+  }
+
+  // 根据索引和当前步骤判断状态
+  if (index < current) {
+    return 'finish';
+  } else if (index === current) {
+    return 'process';
+  } else {
+    return 'wait';
+  }
+}
+
+/**
+ * 合并步骤类名
+ * 
+ * @param baseClass - 基础类名
+ * @param status - 步骤状态
+ * @param customClass - 自定义类名
+ * @returns 合并后的类名
+ */
+export function mergeStepClassName(baseClass, status, customClass) {
+  var classes = [baseClass];
+
+  // 添加状态类名
+  classes.push("".concat(baseClass, "-").concat(status));
+
+  // 添加自定义类名
+  if (customClass) {
+    classes.push(customClass);
+  }
+  return classes.join(' ');
+}
+
+/**
+ * 判断步骤变更方向
+ * 
+ * @param from - 原步骤索引
+ * @param to - 目标步骤索引
+ * @returns 变更方向
+ */
+export function getChangeDirection(from, to) {
+  return to > from ? 'forward' : 'backward';
+}
+
+/**
+ * 验证步骤索引是否有效
+ * 
+ * @param index - 步骤索引
+ * @param total - 总步骤数
+ * @returns 是否有效
+ */
+export function isValidStepIndex(index, total) {
+  return index >= 0 && index < total;
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { PisellSuperTabsProps } from './types';
+import './PisellSuperTabs.less';
+interface PisellSuperTabsRef {
+    scrollItemByRowKey: (key: string) => void;
+}
+declare const _default: React.ForwardRefExoticComponent<PisellSuperTabsProps<unknown> & React.RefAttributes<PisellSuperTabsRef>>;
+export default _default;

package/es/components/PisellSuperTabs/PisellSuperTabs.js

@@ -0,0 +1,147 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useImperativeHandle, useRef, forwardRef } from 'react';
+import classNames from 'classnames';
+import { useTabsState } from "./hooks";
+import { getRowKey } from "./utils";
+import PisellBasicGrid from "../PisellBasicGrid";
+import PisellScrollView from "../PisellScrollView";
+import "./PisellSuperTabs.less";
+/**
+ * PisellSuperTabs 组件
+ * @description 通用导航框架封装的全能型 Tab 组件
+ * @template T - 数据源项的类型
+ */
+var PisellSuperTabs = function PisellSuperTabs(props, ref) {
+  var className = props.className,
+    style = props.style,
+    _props$dataSource = props.dataSource,
+    dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
+    _props$rowKey = props.rowKey,
+    rowKey = _props$rowKey === void 0 ? 'key' : _props$rowKey,
+    value = props.value,
+    id = props.id,
+    defaultValue = props.defaultValue,
+    onChange = props.onChange,
+    _renderItem = props.renderItem,
+    _props$gridProps = props.gridProps,
+    gridProps = _props$gridProps === void 0 ? {} : _props$gridProps,
+    _props$scrollViewProp = props.scrollViewProps,
+    scrollViewProps = _props$scrollViewProp === void 0 ? {} : _props$scrollViewProp,
+    children = props.children,
+    slotLeft = props.slotLeft,
+    slotRight = props.slotRight,
+    slotTop = props.slotTop,
+    slotBottom = props.slotBottom,
+    tabItemClassName = props.tabItemClassName,
+    tabItemStyle = props.tabItemStyle,
+    slotLeftClassName = props.slotLeftClassName,
+    slotRightClassName = props.slotRightClassName,
+    slotTopClassName = props.slotTopClassName,
+    slotBottomClassName = props.slotBottomClassName,
+    slotLeftStyle = props.slotLeftStyle,
+    slotRightStyle = props.slotRightStyle,
+    slotTopStyle = props.slotTopStyle,
+    slotBottomStyle = props.slotBottomStyle,
+    __designMode = props.__designMode;
+  var containerRef = useRef(null);
+
+  // 状态管理：处理受控/非受控模式
+  var _useTabsState = useTabsState({
+      value: value,
+      defaultValue: defaultValue,
+      onChange: onChange
+    }),
+    activeKey = _useTabsState.activeKey,
+    handleTabChange = _useTabsState.handleTabChange;
+  var scrollItemByRowKey = function scrollItemByRowKey(key) {
+    var item = document.querySelector(".pisell-super-tabs-item-".concat(id, "-").concat(key));
+    console.log(".pisell-super-tabs-item-".concat(id, "-").concat(key));
+    if (item) {
+      item.scrollIntoView({
+        behavior: 'smooth'
+      });
+    }
+  };
+  useImperativeHandle(ref, function () {
+    if (__designMode) {
+      //@ts-ignore
+      return containerRef.current;
+    }
+    return {
+      scrollItemByRowKey: scrollItemByRowKey
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-super-tabs', className),
+    style: style,
+    id: id,
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-super-tabs-slot-top-' + id, slotTopClassName),
+    style: slotTopStyle
+  }, slotTop), /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-super-tabs-slot-left-' + id, slotLeftClassName),
+    style: slotLeftStyle
+  }, slotLeft), /*#__PURE__*/React.createElement(PisellScrollView, scrollViewProps, /*#__PURE__*/React.createElement(PisellBasicGrid, _extends({}, gridProps, {
+    dataSource: dataSource,
+    rowKey: rowKey,
+    renderItem: function renderItem(item, index) {
+      // 获取当前项的 key
+      var key = getRowKey(item, index, rowKey);
+
+      // 判断是否激活
+      var active = key === String(activeKey);
+
+      // 渲染内容
+      // 支持两种模式：函数模式和插槽模式
+      var content;
+      if (_renderItem) {
+        if (typeof _renderItem === 'function') {
+          // 函数模式：调用用户自定义渲染函数
+          content = _renderItem({
+            dataSource: item,
+            index: index,
+            onClick: function onClick() {
+              if (item.customClick) {
+                return;
+              }
+              handleTabChange(key, item);
+            },
+            tabsState: {
+              activeKey: activeKey,
+              handleTabChange: handleTabChange
+            },
+            tabsProps: props,
+            active: {
+              value: active
+            }
+          });
+        } else {
+          // 插槽模式：直接使用 renderItem
+          content = _renderItem;
+        }
+      } else {
+        content = item['label'];
+      }
+
+      // 包裹点击事件处理
+      return /*#__PURE__*/React.createElement("div", {
+        key: key,
+        className: classNames('pisell-super-tabs-item', "pisell-super-tabs-item-".concat(id, "-").concat(key), {
+          'pisell-super-tabs-item--active': active
+        }, tabItemClassName),
+        style: tabItemStyle
+      }, content);
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-super-tabs-content"
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-super-tabs-slot-right-' + id, slotRightClassName),
+    style: slotRightStyle
+  }, slotRight), /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-super-tabs-slot-bottom-' + id, slotBottomClassName),
+    style: slotBottomStyle
+  }, slotBottom));
+};
+PisellSuperTabs.displayName = 'PisellSuperTabs';
+export default /*#__PURE__*/forwardRef(PisellSuperTabs);

package/es/components/PisellSuperTabs/PisellSuperTabs.less

@@ -0,0 +1,35 @@
+/**
+ * PisellSuperTabs 组件样式
+ */
+
+.pisell-super-tabs {
+  // 基础容器样式
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+
+  // TabItem 基础样式
+  &-item {
+    // 基础样式
+    cursor: pointer;
+    user-select: none;
+    box-sizing: border-box;
+    height: 100%;
+    // 过渡动画
+    // transition: all 0.3s ease;
+
+    // 激活状态
+    &--active {
+      // 激活状态由具体的 Card 组件自己实现
+      // 这里只提供一个默认的 class，方便外部自定义样式
+    }
+
+    // 禁用样式（预留）
+    &--disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+}

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

@@ -0,0 +1 @@
+// 子组件

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

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

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

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

package/es/components/PisellSuperTabs/hooks/useTabsState.d.ts

@@ -0,0 +1,7 @@
+import { UseTabsStateParams, UseTabsStateReturn } from '../types';
+/**
+ * Tabs 状态管理 Hook
+ * @description 处理受控/非受控模式的状态管理
+ * @template T - 数据项类型
+ */
+export declare const useTabsState: <T = any>(params: UseTabsStateParams<T>) => UseTabsStateReturn<T>;

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

@@ -0,0 +1,50 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState, useCallback, useMemo } from 'react';
+/**
+ * Tabs 状态管理 Hook
+ * @description 处理受控/非受控模式的状态管理
+ * @template T - 数据项类型
+ */
+export var useTabsState = function useTabsState(params) {
+  var value = params.value,
+    defaultValue = params.defaultValue,
+    onChange = params.onChange;
+
+  // 内部状态（非受控模式使用）
+  var _useState = useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    innerValue = _useState2[0],
+    setInnerValue = _useState2[1];
+
+  // 判断是否为受控模式
+  var isControlled = useMemo(function () {
+    return value !== undefined;
+  }, [value]);
+
+  // 当前激活的 key
+  // 受控模式：使用外部 value
+  // 非受控模式：使用内部 innerValue
+  var activeKey = isControlled ? value : innerValue;
+
+  /**
+   * 切换 Tab 的处理函数
+   */
+  var handleTabChange = useCallback(function (key, item) {
+    // 非受控模式：更新内部状态
+    if (!isControlled) {
+      setInnerValue(key);
+    }
+
+    // 触发 onChange 回调
+    onChange === null || onChange === void 0 || onChange(key, item);
+  }, [isControlled, onChange]);
+  return {
+    activeKey: activeKey,
+    handleTabChange: handleTabChange
+  };
+};

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

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

package/es/components/PisellSuperTabs/index.js

@@ -0,0 +1,2 @@
+import PisellSuperTabs from "./PisellSuperTabs";
+export default PisellSuperTabs;

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

@@ -0,0 +1,210 @@
+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;
+    __designMode?: boolean;
+}
+/**
+ * 数据项基础类型
+ * @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,20 @@
+import React from 'react';
+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>;
+export default PisellTabbar;