@pisell/materials 6.3.23 → 6.3.25

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

@@ -0,0 +1,67 @@
+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/PisellProcedure/utils/index.ts
+var utils_exports = {};
+__export(utils_exports, {
+  LAYOUT_RATIO_PRESETS: () => import_layoutRatio.LAYOUT_RATIO_PRESETS,
+  calculateRatioPercent: () => import_layoutRatio.calculateRatioPercent,
+  extractButtonLabel: () => import_extractText.extractButtonLabel,
+  extractTextFromNode: () => import_extractText.extractTextFromNode,
+  generateRatioStyles: () => import_layoutRatio.generateRatioStyles,
+  getFooterTargetArea: () => import_footerPosition.getFooterTargetArea,
+  isFooterFixed: () => import_footerPosition.isFooterFixed,
+  isFooterFloat: () => import_footerPosition.isFooterFloat,
+  isFooterGlobal: () => import_footerPosition.isFooterGlobal,
+  isFooterInContent: () => import_footerPosition.isFooterInContent,
+  isFooterInSidebar: () => import_footerPosition.isFooterInSidebar,
+  isValidSlot: () => import_slotHelper.isValidSlot,
+  mergeClassNames: () => import_classNames.mergeClassNames,
+  modifierClassName: () => import_classNames.modifierClassName,
+  parseLayoutRatio: () => import_layoutRatio.parseLayoutRatio,
+  prefixClassName: () => import_classNames.prefixClassName,
+  renderSlotOrDefault: () => import_slotHelper.renderSlotOrDefault,
+  wrapSlotWithClick: () => import_slotHelper.wrapSlotWithClick
+});
+module.exports = __toCommonJS(utils_exports);
+var import_classNames = require("./classNames");
+var import_slotHelper = require("./slotHelper");
+var import_footerPosition = require("./footerPosition");
+var import_extractText = require("./extractText");
+var import_layoutRatio = require("./layoutRatio");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LAYOUT_RATIO_PRESETS,
+  calculateRatioPercent,
+  extractButtonLabel,
+  extractTextFromNode,
+  generateRatioStyles,
+  getFooterTargetArea,
+  isFooterFixed,
+  isFooterFloat,
+  isFooterGlobal,
+  isFooterInContent,
+  isFooterInSidebar,
+  isValidSlot,
+  mergeClassNames,
+  modifierClassName,
+  parseLayoutRatio,
+  prefixClassName,
+  renderSlotOrDefault,
+  wrapSlotWithClick
+});

package/lib/components/PisellProcedure/utils/layoutRatio.d.ts

@@ -0,0 +1,42 @@
+import type { BodyLayoutRatio } from '../types';
+/**
+ * 布局比例工具函数
+ * @description 用于解析和计算内容区与信息区的布局比例
+ */
+/**
+ * 解析比例字符串
+ * @param ratio 比例字符串，如 '7:3'
+ * @returns [内容区比例, 信息区比例]
+ * @example
+ * parseLayoutRatio('7:3') // => [7, 3]
+ * parseLayoutRatio('6:4') // => [6, 4]
+ */
+export declare const parseLayoutRatio: (ratio: BodyLayoutRatio) => [number, number];
+/**
+ * 计算百分比
+ * @param ratio 比例字符串，如 '7:3'
+ * @returns { contentPercent, sidebarPercent }
+ * @example
+ * calculateRatioPercent('7:3') // => { contentPercent: 70, sidebarPercent: 30 }
+ */
+export declare const calculateRatioPercent: (ratio: BodyLayoutRatio) => {
+    contentPercent: number;
+    sidebarPercent: number;
+};
+/**
+ * 生成 flex 比例样式
+ * @param ratio 比例字符串，如 '7:3'
+ * @param gap 间距（px）
+ * @returns { contentStyle, sidebarStyle }
+ */
+export declare const generateRatioStyles: (ratio: BodyLayoutRatio, gap?: number) => {
+    contentStyle: React.CSSProperties;
+    sidebarStyle: React.CSSProperties;
+};
+/**
+ * 预设比例选项
+ */
+export declare const LAYOUT_RATIO_PRESETS: {
+    label: string;
+    value: BodyLayoutRatio;
+}[];

package/lib/components/PisellProcedure/utils/layoutRatio.js

@@ -0,0 +1,78 @@
+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/PisellProcedure/utils/layoutRatio.ts
+var layoutRatio_exports = {};
+__export(layoutRatio_exports, {
+  LAYOUT_RATIO_PRESETS: () => LAYOUT_RATIO_PRESETS,
+  calculateRatioPercent: () => calculateRatioPercent,
+  generateRatioStyles: () => generateRatioStyles,
+  parseLayoutRatio: () => parseLayoutRatio
+});
+module.exports = __toCommonJS(layoutRatio_exports);
+var parseLayoutRatio = (ratio) => {
+  if (!ratio || typeof ratio !== "string") {
+    return [7, 3];
+  }
+  const parts = ratio.split(":");
+  if (parts.length !== 2) {
+    return [7, 3];
+  }
+  const content = Number(parts[0]);
+  const sidebar = Number(parts[1]);
+  if (isNaN(content) || isNaN(sidebar) || content <= 0 || sidebar <= 0) {
+    return [7, 3];
+  }
+  return [content, sidebar];
+};
+var calculateRatioPercent = (ratio) => {
+  const [content, sidebar] = parseLayoutRatio(ratio);
+  const total = content + sidebar;
+  return {
+    contentPercent: content / total * 100,
+    sidebarPercent: sidebar / total * 100
+  };
+};
+var generateRatioStyles = (ratio, gap = 16) => {
+  const { contentPercent, sidebarPercent } = calculateRatioPercent(ratio);
+  const sidebarWidth = `calc(${sidebarPercent}% - ${gap / 2}px)`;
+  const sidebarFlex = `0 0 ${sidebarWidth}`;
+  return {
+    contentStyle: {
+      flex: `0 0 calc(${contentPercent}% - ${gap / 2}px)`,
+      maxWidth: `calc(${contentPercent}% - ${gap / 2}px)`
+    },
+    sidebarStyle: {
+      // 使用 CSS 变量，让 CSS 中的 !important 可以引用这些值
+      "--sidebar-ratio-width": sidebarWidth,
+      "--sidebar-ratio-max-width": sidebarWidth,
+      "--sidebar-ratio-flex": sidebarFlex
+    }
+  };
+};
+var LAYOUT_RATIO_PRESETS = [
+  { label: "7:3", value: "7:3" },
+  { label: "6:4", value: "6:4" }
+];
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LAYOUT_RATIO_PRESETS,
+  calculateRatioPercent,
+  generateRatioStyles,
+  parseLayoutRatio
+});

package/lib/components/PisellProcedure/utils/slotHelper.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+/**
+ * 插槽包装工具函数
+ * @description 用于包装 React 插槽元素，添加额外的事件处理
+ */
+/**
+ * 包装插槽元素，添加点击事件
+ * @param slotContent 插槽内容
+ * @param onClick 点击回调
+ * @returns 包装后的插槽内容
+ * @example
+ * wrapSlotWithClick(leftSlot, handleBackClick)
+ */
+export declare const wrapSlotWithClick: (slotContent: React.ReactNode, onClick?: () => void | boolean) => React.ReactNode;
+/**
+ * 检查插槽是否为有效的 React 元素
+ * @param slotContent 插槽内容
+ * @returns 是否为有效元素
+ */
+export declare const isValidSlot: (slotContent: React.ReactNode) => boolean;
+/**
+ * 渲染插槽内容，如果为空则返回默认内容
+ * @param slotContent 插槽内容
+ * @param defaultContent 默认内容
+ * @returns 最终渲染内容
+ */
+export declare const renderSlotOrDefault: (slotContent: React.ReactNode, defaultContent?: React.ReactNode) => React.ReactNode;

package/lib/components/PisellProcedure/utils/slotHelper.js

@@ -0,0 +1,53 @@
+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/PisellProcedure/utils/slotHelper.ts
+var slotHelper_exports = {};
+__export(slotHelper_exports, {
+  isValidSlot: () => isValidSlot,
+  renderSlotOrDefault: () => renderSlotOrDefault,
+  wrapSlotWithClick: () => wrapSlotWithClick
+});
+module.exports = __toCommonJS(slotHelper_exports);
+var import_react = require("react");
+var wrapSlotWithClick = (slotContent, onClick) => {
+  if (!slotContent) return null;
+  if ((0, import_react.isValidElement)(slotContent)) {
+    return (0, import_react.cloneElement)(slotContent, {
+      onClick: (e) => {
+        var _a;
+        const originalOnClick = (_a = slotContent.props) == null ? void 0 : _a.onClick;
+        originalOnClick == null ? void 0 : originalOnClick(e);
+        onClick == null ? void 0 : onClick();
+      }
+    });
+  }
+  return slotContent;
+};
+var isValidSlot = (slotContent) => {
+  return slotContent !== null && slotContent !== void 0;
+};
+var renderSlotOrDefault = (slotContent, defaultContent) => {
+  return isValidSlot(slotContent) ? slotContent : defaultContent;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  isValidSlot,
+  renderSlotOrDefault,
+  wrapSlotWithClick
+});

package/lib/components/PisellScrollView/PisellScrollView.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { PisellScrollViewProps, PisellScrollViewRef } from './types';
+import './PisellScrollView.less';
+declare const PisellScrollView: React.ForwardRefExoticComponent<Omit<PisellScrollViewProps, "ref"> & React.RefAttributes<PisellScrollViewRef>>;
+export default PisellScrollView;

package/lib/components/PisellScrollView/PisellScrollView.js

@@ -0,0 +1,310 @@
+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/PisellScrollView/PisellScrollView.tsx
+var PisellScrollView_exports = {};
+__export(PisellScrollView_exports, {
+  default: () => PisellScrollView_default
+});
+module.exports = __toCommonJS(PisellScrollView_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_PisellScrollView = require("./PisellScrollView.less");
+var import_hooks = require("./hooks");
+var import_Actions = __toESM(require("./components/Actions"));
+var snapScrollPaddings = {
+  rArrows: {
+    start: 0,
+    end: 117 + 10
+  },
+  lrArrows: {
+    start: 47 + 10,
+    end: 47 + 10
+  },
+  tbArrows: {
+    start: 47 + 10,
+    end: 47 + 10
+  }
+};
+var PisellScrollView = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      style,
+      overflow = "auto",
+      scrollbarStyle = "default",
+      scrollbarClassName,
+      width,
+      height,
+      maxWidth,
+      maxHeight,
+      minWidth,
+      minHeight,
+      onScroll,
+      onScrollStart,
+      onScrollEnd,
+      onReachTop,
+      onReachBottom,
+      onReachLeft,
+      onReachRight,
+      reachThreshold,
+      scrollEndDelay,
+      intersection,
+      scrollActionsConfig = { show: true, type: "rArrows" },
+      snapScroll = { enabled: true, type: "mandatory" },
+      __designMode
+    } = props;
+    const containerRef = (0, import_react.useRef)(null);
+    const { scrollState, updateScrollState } = (0, import_hooks.useScrollState)({
+      containerRef,
+      overflow
+    });
+    const { handleScroll } = (0, import_hooks.useScrollEvents)({
+      containerRef,
+      onScroll,
+      onScrollStart,
+      onScrollEnd,
+      onReachTop,
+      onReachBottom,
+      onReachLeft,
+      onReachRight,
+      reachThreshold,
+      scrollEndDelay,
+      updateScrollState,
+      scrollState
+    });
+    (0, import_react.useEffect)(() => {
+      document.body.id = "body";
+    }, []);
+    (0, import_hooks.useIntersection)({ containerRef, config: intersection });
+    const scrollTo = (position) => {
+      const container = containerRef.current;
+      if (!container) return;
+      const { scrollTop, scrollLeft, behavior = "auto" } = position;
+      const options = { behavior };
+      if (scrollTop !== void 0) options.top = scrollTop;
+      if (scrollLeft !== void 0) options.left = scrollLeft;
+      container.scrollTo(options);
+    };
+    const scrollToElement = (config) => {
+      const container = containerRef.current;
+      if (!container) return;
+      const {
+        targetId,
+        align = "start",
+        behavior = "auto",
+        offset = 0
+      } = config;
+      const target = container.querySelector(`#${targetId}`);
+      if (!target) return;
+      const containerRect = container.getBoundingClientRect();
+      const targetRect = target.getBoundingClientRect();
+      let top = container.scrollTop;
+      let left = container.scrollLeft;
+      if (align === "start") {
+        top += targetRect.top - containerRect.top;
+      } else if (align === "center") {
+        top += targetRect.top - containerRect.top - (container.clientHeight / 2 - targetRect.height / 2);
+      } else if (align === "end") {
+        top += targetRect.bottom - containerRect.bottom;
+      }
+      top += offset;
+      container.scrollTo({ top, left, behavior });
+    };
+    const scrollToPercentage = (percentage) => {
+      const container = containerRef.current;
+      if (!container) return;
+      const { percentX, percentY, behavior = "auto" } = percentage;
+      const maxScrollTop = container.scrollHeight - container.clientHeight;
+      const maxScrollLeft = container.scrollWidth - container.clientWidth;
+      const options = { behavior };
+      if (percentY !== void 0) {
+        options.top = percentY / 100 * maxScrollTop;
+      }
+      if (percentX !== void 0) {
+        options.left = percentX / 100 * maxScrollLeft;
+      }
+      container.scrollTo(options);
+    };
+    const scrollToTop = (behavior = "auto") => {
+      var _a;
+      (_a = containerRef.current) == null ? void 0 : _a.scrollTo({
+        top: 0,
+        behavior
+      });
+    };
+    const scrollToBottom = (behavior = "auto") => {
+      const container = containerRef.current;
+      if (container) {
+        container.scrollTo({
+          top: container.scrollHeight,
+          behavior
+        });
+      }
+    };
+    const scrollToLeft = (behavior = "auto") => {
+      var _a;
+      (_a = containerRef.current) == null ? void 0 : _a.scrollTo({
+        left: 0,
+        behavior
+      });
+    };
+    const scrollToRight = (behavior = "auto") => {
+      const container = containerRef.current;
+      if (container) {
+        container.scrollTo({
+          left: container.scrollWidth,
+          behavior
+        });
+      }
+    };
+    const getScrollData = () => {
+      return scrollState;
+    };
+    const getScrollContainer = () => {
+      return containerRef.current;
+    };
+    (0, import_react.useImperativeHandle)(ref, () => {
+      if (__designMode) {
+        return containerRef.current;
+      }
+      return {
+        scrollTo,
+        scrollToElement,
+        scrollToPercentage,
+        scrollToTop,
+        scrollToBottom,
+        scrollToLeft,
+        scrollToRight,
+        getScrollData,
+        getScrollContainer,
+        // Snap Scroll 占位 (需要更复杂的计算逻辑，此处为基础版)
+        scrollToSnapPoint: (index, behavior = "auto") => {
+        },
+        getSnapPoints: () => [],
+        getCurrentSnapIndex: () => 0,
+        scrollToNextSnap: () => {
+        },
+        scrollToPrevSnap: () => {
+        }
+      };
+    });
+    const handleButtonClick = (direction) => {
+      const container = containerRef.current;
+      if (!container) return;
+      const distance = typeof (scrollActionsConfig == null ? void 0 : scrollActionsConfig.scrollDistance) === "number" ? scrollActionsConfig.scrollDistance : 300;
+      let top = container.scrollTop;
+      let left = container.scrollLeft;
+      if (direction === "top") top -= distance;
+      if (direction === "bottom") top += distance;
+      if (direction === "left") left -= distance;
+      if (direction === "right") left += distance;
+      container.scrollTo({ top, left, behavior: "smooth" });
+    };
+    const containerStyle = {
+      ...style,
+      width,
+      height,
+      maxWidth,
+      maxHeight,
+      minWidth,
+      minHeight
+    };
+    const viewportStyle = (0, import_react.useMemo)(() => {
+      var _a, _b, _c, _d;
+      let _viewportStyle = {};
+      if (overflow === "x") {
+        _viewportStyle.overflowX = "auto";
+      }
+      if (overflow === "y") {
+        _viewportStyle.overflowY = "auto";
+      }
+      if (overflow === "both") {
+        _viewportStyle.overflowX = "auto";
+        _viewportStyle.overflowY = "auto";
+      }
+      if (overflow === "hidden") {
+        _viewportStyle.overflowX = "hidden";
+        _viewportStyle.overflowY = "hidden";
+      }
+      if ((snapScroll == null ? void 0 : snapScroll.enabled) && (scrollActionsConfig == null ? void 0 : scrollActionsConfig.show)) {
+        _viewportStyle.scrollSnapType = `${overflow === "x" ? "x" : "y"} ${snapScroll.type}`;
+        if (overflow === "x") {
+          _viewportStyle.scrollPaddingLeft = ((_a = snapScrollPaddings[scrollActionsConfig.type]) == null ? void 0 : _a.start) || 0;
+          _viewportStyle.scrollPaddingRight = ((_b = snapScrollPaddings[scrollActionsConfig.type]) == null ? void 0 : _b.end) || 0;
+        }
+        if (overflow === "y") {
+          _viewportStyle.scrollPaddingTop = ((_c = snapScrollPaddings[scrollActionsConfig.type]) == null ? void 0 : _c.start) || 0;
+          _viewportStyle.scrollPaddingBottom = ((_d = snapScrollPaddings[scrollActionsConfig.type]) == null ? void 0 : _d.end) || 0;
+        }
+      }
+      return _viewportStyle;
+    }, [
+      overflow,
+      scrollActionsConfig == null ? void 0 : scrollActionsConfig.show,
+      scrollActionsConfig == null ? void 0 : scrollActionsConfig.type,
+      snapScroll
+    ]);
+    const viewportClasses = (0, import_classnames.default)("pisell-scroll-view-viewport", {
+      "pisell-scroll-view-viewport--hide-scrollbar": scrollbarStyle === "none" || !scrollState.isOverflows,
+      [`pisell-scroll-view-viewport--${scrollbarStyle}`]: scrollbarStyle !== "default" && scrollbarStyle !== "custom",
+      [scrollbarClassName || ""]: scrollbarStyle === "custom"
+    });
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames.default)("pisell-scroll-view", className),
+        style: { ...containerStyle }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: (0, import_classnames.default)(viewportClasses),
+          style: { ...viewportStyle },
+          ref: containerRef,
+          "data-scrollbar-style": scrollbarStyle,
+          onScroll: handleScroll
+        },
+        children
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        import_Actions.default,
+        {
+          containerRef,
+          scrollState,
+          overflow,
+          scrollActionsConfig,
+          onClick: handleButtonClick
+        }
+      )
+    );
+  }
+);
+PisellScrollView.displayName = "PisellScrollView";
+var PisellScrollView_default = PisellScrollView;