@pisell/materials 6.7.3 → 6.7.4

package/es/components/PisellCards/components/GraphicTextCard/utils/index.js

@@ -1,78 +0,0 @@
-/**
- * 获取图形区域的默认尺寸
- * 根据样式变体和尺寸返回对应的默认宽高
- * 
- * @param variant - 样式变体
- * @param size - 尺寸
- * @returns 默认的宽度和高度
- * 
- * @example
- * ```ts
- * const size = getDefaultGraphicSize('vertical-image', 'default');
- * // 返回 { width: 36, height: 36 }
- * ```
- */
-export var getDefaultGraphicSize = function getDefaultGraphicSize(variant, size) {
-  // 样式一和样式二（垂直布局）- 正方形图标/图片
-  if (variant === 'vertical-image' || variant === 'vertical-icon') {
-    var sizeMap = {
-      small: {
-        width: 28,
-        height: 28
-      },
-      default: {
-        width: 36,
-        height: 36
-      },
-      large: {
-        width: 44,
-        height: 44
-      }
-    };
-    return sizeMap[size];
-  }
-
-  // 样式三（横向布局）- 矩形图片
-  if (variant === 'horizontal') {
-    var _sizeMap = {
-      small: {
-        width: 48,
-        height: 40
-      },
-      default: {
-        width: 64,
-        height: 52
-      },
-      large: {
-        width: 80,
-        height: 64
-      }
-    };
-    return _sizeMap[size];
-  }
-
-  // 样式四（卡片式）- 矩形图片（上下布局）
-  if (variant === 'card') {
-    var _sizeMap2 = {
-      small: {
-        width: 56,
-        height: 56
-      },
-      default: {
-        width: 72,
-        height: 60
-      },
-      large: {
-        width: 88,
-        height: 72
-      }
-    };
-    return _sizeMap2[size];
-  }
-
-  // 默认尺寸
-  return {
-    width: 36,
-    height: 36
-  };
-};

package/es/components/PisellCards/components/MultilevelCard/MultilevelCard.js

@@ -1,122 +0,0 @@
-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, { useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import classNames from 'classnames';
-import { CardWrapper, PanelWrapper } from "./components";
-import { useMultilevelCardExpand, useMultilevelCardHover } from "./hooks";
-import "./MultilevelCard.less";
-
-/**
- * MultilevelCard 组件
- * 多层级卡片组件，支持点击或 hover 展开次级面板
- *
- * @example
- * ```tsx
- * <MultilevelCard
- *   card={<TextCard text="分类1" />}
- *   panel={<div>次级内容</div>}
- *   trigger="click"
- * />
- * ```
- */
-export var MultilevelCard = function MultilevelCard(props) {
-  var card = props.card,
-    panel = props.panel,
-    dataSource = props.dataSource,
-    active = props.active,
-    disabled = props.disabled,
-    loading = props.loading,
-    children = props.children,
-    onClick = props.onClick,
-    _props$trigger = props.trigger,
-    trigger = _props$trigger === void 0 ? 'click' : _props$trigger,
-    hoverDelay = props.hoverDelay,
-    _props$panelWidthMode = props.panelWidthMode,
-    panelWidthMode = _props$panelWidthMode === void 0 ? 'full' : _props$panelWidthMode,
-    panelWidth = props.panelWidth,
-    panelStyle = props.panelStyle,
-    panelClassName = props.panelClassName,
-    panelContainer = props.panelContainer,
-    _props$animation = props.animation,
-    animation = _props$animation === void 0 ? true : _props$animation,
-    _props$animationDurat = props.animationDuration,
-    animationDuration = _props$animationDurat === void 0 ? 300 : _props$animationDurat,
-    onExpandChange = props.onExpandChange,
-    onPanelMount = props.onPanelMount,
-    onPanelUnmount = props.onPanelUnmount,
-    className = props.className,
-    style = props.style,
-    __designMode = props.__designMode;
-
-  // 展开/收起状态管理
-  var _useMultilevelCardExp = useMultilevelCardExpand({
-      active: active,
-      trigger: trigger,
-      onExpandChange: onExpandChange
-    }),
-    expanded = _useMultilevelCardExp.expanded,
-    setExpanded = _useMultilevelCardExp.setExpanded;
-
-  // Hover 交互处理
-  var _useMultilevelCardHov = useMultilevelCardHover({
-      enabled: trigger === 'hover',
-      delay: hoverDelay,
-      onExpandChange: setExpanded
-    }),
-    onMouseEnter = _useMultilevelCardHov.onMouseEnter,
-    onMouseLeave = _useMultilevelCardHov.onMouseLeave;
-  useEffect(function () {
-    document.body.id = 'body';
-  }, []);
-
-  // 渲染次级面板
-  var renderPanel = function renderPanel() {
-    // 如果没有 panel 内容，不渲染
-    if (!panel) {
-      return null;
-    }
-    var panelElement = /*#__PURE__*/React.createElement(PanelWrapper, {
-      visible: expanded,
-      widthMode: panelWidthMode,
-      width: panelWidth,
-      style: panelStyle,
-      className: panelClassName,
-      animation: animation,
-      animationDuration: animationDuration,
-      onMount: onPanelMount,
-      onUnmount: onPanelUnmount,
-      onMouseEnter: trigger === 'hover' ? onMouseEnter : undefined,
-      onMouseLeave: trigger === 'hover' ? onMouseLeave : undefined,
-      props: props
-    }, panel === null || panel === void 0 ? void 0 : panel(props));
-
-    // 如果指定了容器，使用 Portal 渲染
-    if (panelContainer !== null && panelContainer !== void 0 && panelContainer() && typeof document !== 'undefined') {
-      return /*#__PURE__*/ReactDOM.createPortal(panelElement, panelContainer());
-    }
-    return panelElement;
-  };
-
-  // 组件类名
-  var multilevelCardClassName = classNames('multilevel-card', {
-    'multilevel-card--expanded': expanded,
-    'multilevel-card--click': trigger === 'click',
-    'multilevel-card--hover': trigger === 'hover'
-  }, className);
-  return /*#__PURE__*/React.createElement("div", {
-    className: multilevelCardClassName,
-    style: style
-  }, /*#__PURE__*/React.createElement(CardWrapper, {
-    trigger: trigger,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    className: "multilevel-card__card"
-  }, card === null || card === void 0 ? void 0 : card(props)), renderPanel());
-};
-
-// 设置显示名称（用于调试）
-MultilevelCard.displayName = 'MultilevelCard';
-var Provider = function Provider(props) {
-  return /*#__PURE__*/React.createElement(MultilevelCard, _extends({}, props === null || props === void 0 ? void 0 : props.props, props));
-};
-export default Provider;

package/es/components/PisellCards/components/MultilevelCard/MultilevelCard.less

@@ -1,52 +0,0 @@
-// MultilevelCard 组件样式
-
-.multilevel-card {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  scroll-snap-align: start;
-
-  // 主卡片区域
-  &__card {
-    position: relative;
-  }
-
-  // 次级面板区域
-  .multilevel-card-panel {
-    position: relative;
-    overflow: hidden;
-    max-height: 0;
-    opacity: 0;
-
-    // 可见状态
-    &--visible {
-      max-height: 2000px; // 足够大的值，确保内容完全展示
-      opacity: 1;
-    }
-
-    // 隐藏状态
-    &--hidden {
-      max-height: 0;
-      opacity: 0;
-    }
-  }
-
-  // Click 模式
-  &--click {
-    .multilevel-card__card {
-      cursor: pointer;
-    }
-  }
-
-  // Hover 模式
-  &--hover {
-    .multilevel-card__card {
-      cursor: pointer;
-    }
-  }
-
-  // 展开状态
-  &--expanded {
-    // 可以在这里添加展开状态下的样式
-  }
-}

package/es/components/PisellCards/components/MultilevelCard/components/CardWrapper.js

@@ -1,54 +0,0 @@
-import React from 'react';
-/**
- * CardWrapper 组件
- * 主卡片包装器，负责注入事件监听
- */
-export var CardWrapper = function CardWrapper(props) {
-  var children = props.children,
-    trigger = props.trigger,
-    onClick = props.onClick,
-    onMouseEnter = props.onMouseEnter,
-    onMouseLeave = props.onMouseLeave,
-    className = props.className;
-
-  // 如果 children 不是 ReactElement，直接渲染
-  if (! /*#__PURE__*/React.isValidElement(children)) {
-    console.warn('[MultilevelCard] card 必须是 ReactElement');
-    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
-  }
-
-  // 克隆主卡片元素，注入事件监听
-  var enhancedCard = /*#__PURE__*/React.cloneElement(children, {
-    // onClick: (e: React.MouseEvent<HTMLDivElement>) => {
-    //   // 先调用原有的 onClick
-    //   const originalOnClick = (children as React.ReactElement).props.onClick;
-    //   originalOnClick?.(e);
-    //   // 如果是 click 模式，不需要额外处理（通过 active 控制）
-    //   // 这里预留扩展
-    //   onClick?.();
-    // },
-    // onMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => {
-    //   // 先调用原有的 onMouseEnter
-    //   const originalOnMouseEnter = (children as React.ReactElement).props.onMouseEnter;
-    //   originalOnMouseEnter?.(e);
-    //   // Hover 模式下的处理
-    //   if (trigger === 'hover') {
-    //     onMouseEnter?.();
-    //   }
-    // },
-    // onMouseLeave: (e: React.MouseEvent<HTMLDivElement>) => {
-    //   // 先调用原有的 onMouseLeave
-    //   const originalOnMouseLeave = (children as React.ReactElement).props.onMouseLeave;
-    //   originalOnMouseLeave?.(e);
-    //   // Hover 模式下的处理
-    //   if (trigger === 'hover') {
-    //     onMouseLeave?.();
-    //   }
-    // },
-    // className: classNames(
-    //   (children as React.ReactElement).props.className,
-    //   className
-    // ),
-  });
-  return enhancedCard;
-};

package/es/components/PisellCards/components/MultilevelCard/components/PanelWrapper.js

@@ -1,101 +0,0 @@
-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, { useEffect, useRef } from 'react';
-import classNames from 'classnames';
-import { formatWidth } from "../utils";
-
-/**
- * PanelWrapper 组件
- * 次级面板包装器，负责展开/收起动画和样式处理
- */
-export var PanelWrapper = function PanelWrapper(props) {
-  var children = props.children,
-    visible = props.visible,
-    _props$widthMode = props.widthMode,
-    widthMode = _props$widthMode === void 0 ? 'full' : _props$widthMode,
-    width = props.width,
-    _props$animation = props.animation,
-    animation = _props$animation === void 0 ? true : _props$animation,
-    _props$animationDurat = props.animationDuration,
-    animationDuration = _props$animationDurat === void 0 ? 300 : _props$animationDurat,
-    onMount = props.onMount,
-    onUnmount = props.onUnmount,
-    onMouseEnter = props.onMouseEnter,
-    onMouseLeave = props.onMouseLeave,
-    style = props.style,
-    className = props.className;
-  var panelRef = useRef(null);
-  var isMountedRef = useRef(false);
-
-  // 监听挂载和卸载
-  useEffect(function () {
-    if (visible && !isMountedRef.current) {
-      isMountedRef.current = true;
-      onMount === null || onMount === void 0 || onMount();
-    } else if (!visible && isMountedRef.current) {
-      // 延迟卸载，等待动画完成
-      var timer = setTimeout(function () {
-        isMountedRef.current = false;
-        onUnmount === null || onUnmount === void 0 || onUnmount();
-      }, animation ? animationDuration : 0);
-      return function () {
-        return clearTimeout(timer);
-      };
-    }
-  }, [visible, animation, animationDuration, onMount, onUnmount]);
-
-  // 如果没有内容，不渲染
-  if (!children) {
-    return null;
-  }
-
-  // 计算宽度样式
-  var getWidthStyle = function getWidthStyle() {
-    switch (widthMode) {
-      case 'auto':
-        return {
-          width: 'auto'
-        };
-      case 'fixed':
-        return {
-          width: formatWidth(width)
-        };
-      case 'full':
-        return {
-          width: '100%'
-        };
-      default:
-        return {};
-    }
-  };
-
-  // 计算动画样式
-  var getAnimationStyle = function getAnimationStyle() {
-    if (!animation) {
-      return {};
-    }
-    return {
-      transition: "max-height ".concat(animationDuration, "ms ease, opacity ").concat(animationDuration, "ms ease")
-    };
-  };
-
-  // 合并样式
-  var panelStyle = _objectSpread(_objectSpread(_objectSpread({}, getWidthStyle()), getAnimationStyle()), style);
-
-  // 合并类名
-  var panelClassName = classNames('multilevel-card-panel', {
-    'multilevel-card-panel--visible': visible,
-    'multilevel-card-panel--hidden': !visible
-  }, className);
-  return visible ? /*#__PURE__*/React.createElement("div", {
-    ref: panelRef,
-    className: panelClassName,
-    style: panelStyle,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
-  }, children) : null;
-};

package/es/components/PisellCards/components/MultilevelCard/components/index.js

@@ -1,2 +0,0 @@
-export { CardWrapper } from "./CardWrapper";
-export { PanelWrapper } from "./PanelWrapper";

package/es/components/PisellCards/components/MultilevelCard/hooks/index.js

@@ -1,2 +0,0 @@
-export { useMultilevelCardExpand } from "./useMultilevelCardExpand";
-export { useMultilevelCardHover } from "./useMultilevelCardHover";

package/es/components/PisellCards/components/MultilevelCard/hooks/useMultilevelCardExpand.js

@@ -1,42 +0,0 @@
-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 { useEffect, useState } from 'react';
-
-/**
- * 管理 MultilevelCard 的展开/收起状态
- */
-
-/**
- * 展开/收起状态管理 Hook
- * @param options - 配置选项
- * @returns 展开状态和设置函数
- */
-export var useMultilevelCardExpand = function useMultilevelCardExpand(options) {
-  var active = options.active,
-    trigger = options.trigger,
-    onExpandChange = options.onExpandChange,
-    __designMode = options.__designMode;
-  var _useState = useState(__designMode ? true : false),
-    _useState2 = _slicedToArray(_useState, 2),
-    expanded = _useState2[0],
-    setExpanded = _useState2[1];
-  // Click 模式下，监听主卡片的 active 状态
-  useEffect(function () {
-    if (trigger === 'click') {
-      setExpanded(!!(active !== null && active !== void 0 && active.value));
-    }
-  }, [active === null || active === void 0 ? void 0 : active.value, trigger]);
-
-  // 触发展开状态变化回调
-  useEffect(function () {
-    onExpandChange === null || onExpandChange === void 0 || onExpandChange(expanded);
-  }, [expanded, onExpandChange]);
-  return {
-    expanded: expanded,
-    setExpanded: setExpanded
-  };
-};

package/es/components/PisellCards/components/MultilevelCard/hooks/useMultilevelCardHover.js

@@ -1,80 +0,0 @@
-import { useCallback, useRef } from 'react';
-
-/**
- * Hover 交互 Hook 的配置选项
- */
-
-/**
- * Hover 交互处理 Hook
- * @param options - 配置选项
- * @returns 鼠标事件处理函数
- */
-export var useMultilevelCardHover = function useMultilevelCardHover(options) {
-  var _delay$enter, _delay$leave;
-  var enabled = options.enabled,
-    delay = options.delay,
-    onExpandChange = options.onExpandChange;
-
-  // 定时器引用
-  var enterTimerRef = useRef(null);
-  var leaveTimerRef = useRef(null);
-
-  // 默认延迟时间
-  var enterDelay = (_delay$enter = delay === null || delay === void 0 ? void 0 : delay.enter) !== null && _delay$enter !== void 0 ? _delay$enter : 100;
-  var leaveDelay = (_delay$leave = delay === null || delay === void 0 ? void 0 : delay.leave) !== null && _delay$leave !== void 0 ? _delay$leave : 200;
-
-  /**
-   * 清除所有定时器
-   */
-  var clearTimers = useCallback(function () {
-    if (enterTimerRef.current) {
-      clearTimeout(enterTimerRef.current);
-      enterTimerRef.current = null;
-    }
-    if (leaveTimerRef.current) {
-      clearTimeout(leaveTimerRef.current);
-      leaveTimerRef.current = null;
-    }
-  }, []);
-
-  /**
-   * 鼠标进入事件
-   */
-  var handleMouseEnter = useCallback(function () {
-    if (!enabled) return;
-
-    // 清除离开定时器
-    if (leaveTimerRef.current) {
-      clearTimeout(leaveTimerRef.current);
-      leaveTimerRef.current = null;
-    }
-
-    // 设置进入定时器
-    enterTimerRef.current = setTimeout(function () {
-      onExpandChange(true);
-    }, enterDelay);
-  }, [enabled, enterDelay, onExpandChange]);
-
-  /**
-   * 鼠标离开事件
-   */
-  var handleMouseLeave = useCallback(function () {
-    if (!enabled) return;
-
-    // 清除进入定时器
-    if (enterTimerRef.current) {
-      clearTimeout(enterTimerRef.current);
-      enterTimerRef.current = null;
-    }
-
-    // 设置离开定时器
-    leaveTimerRef.current = setTimeout(function () {
-      onExpandChange(false);
-    }, leaveDelay);
-  }, [enabled, leaveDelay, onExpandChange]);
-  return {
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    clearTimers: clearTimers
-  };
-};

package/es/components/PisellCards/components/MultilevelCard/index.js

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

package/es/components/PisellCards/components/MultilevelCard/types.js

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

package/es/components/PisellCards/components/MultilevelCard/utils/index.js

@@ -1,14 +0,0 @@
-/**
- * 格式化宽度值
- * @param width - 宽度值（数字或字符串）
- * @returns 格式化后的宽度值
- */
-export var formatWidth = function formatWidth(width) {
-  if (width === undefined) {
-    return undefined;
-  }
-  if (typeof width === 'number') {
-    return "".concat(width, "px");
-  }
-  return width;
-};