@pisell/materials 6.7.2 → 6.7.3

package/lib/components/PisellScrollView/hooks/useScrollEvents.js

@@ -0,0 +1,104 @@
+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/PisellScrollView/hooks/useScrollEvents.ts
+var useScrollEvents_exports = {};
+__export(useScrollEvents_exports, {
+  useScrollEvents: () => useScrollEvents
+});
+module.exports = __toCommonJS(useScrollEvents_exports);
+var import_react = require("react");
+var import_lodash = require("lodash");
+var useScrollEvents = ({
+  containerRef,
+  onScroll,
+  onScrollStart,
+  onScrollEnd,
+  onReachTop,
+  onReachBottom,
+  onReachLeft,
+  onReachRight,
+  reachThreshold = 0,
+  scrollEndDelay = 150,
+  updateScrollState,
+  scrollState
+}) => {
+  const isScrolling = (0, import_react.useRef)(false);
+  const handleScrollEnd = (0, import_react.useCallback)(
+    (0, import_lodash.debounce)((finalState) => {
+      isScrolling.current = false;
+      onScrollEnd == null ? void 0 : onScrollEnd(finalState);
+    }, scrollEndDelay),
+    [onScrollEnd, scrollEndDelay]
+  );
+  const handleScroll = (0, import_react.useCallback)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    updateScrollState();
+    const {
+      scrollTop,
+      scrollLeft,
+      scrollHeight,
+      scrollWidth,
+      clientHeight,
+      clientWidth
+    } = container;
+    const maxScrollTop = scrollHeight - clientHeight;
+    const maxScrollLeft = scrollWidth - clientWidth;
+    const percentY = maxScrollTop > 0 ? scrollTop / maxScrollTop * 100 : 0;
+    const percentX = maxScrollLeft > 0 ? scrollLeft / maxScrollLeft * 100 : 0;
+    const currentData = {
+      scrollTop,
+      scrollLeft,
+      scrollHeight,
+      scrollWidth,
+      clientHeight,
+      clientWidth,
+      percentY,
+      percentX,
+      direction: null
+      // 在这里计算方向比较麻烦，可以使用 scrollState 中的（虽然有一点延迟）
+    };
+    if (!isScrolling.current) {
+      isScrolling.current = true;
+      onScrollStart == null ? void 0 : onScrollStart(currentData);
+    }
+    onScroll == null ? void 0 : onScroll(currentData);
+    if (scrollTop <= reachThreshold) onReachTop == null ? void 0 : onReachTop(currentData);
+    if (scrollTop + clientHeight >= scrollHeight - reachThreshold) onReachBottom == null ? void 0 : onReachBottom(currentData);
+    if (scrollLeft <= reachThreshold) onReachLeft == null ? void 0 : onReachLeft(currentData);
+    if (scrollLeft + clientWidth >= scrollWidth - reachThreshold) onReachRight == null ? void 0 : onReachRight(currentData);
+    handleScrollEnd(currentData);
+  }, [
+    containerRef,
+    updateScrollState,
+    onScroll,
+    onScrollStart,
+    handleScrollEnd,
+    onReachTop,
+    onReachBottom,
+    onReachLeft,
+    onReachRight,
+    reachThreshold
+  ]);
+  return { handleScroll };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useScrollEvents
+});

package/lib/components/PisellScrollView/hooks/useScrollState.js

@@ -0,0 +1,109 @@
+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/PisellScrollView/hooks/useScrollState.ts
+var useScrollState_exports = {};
+__export(useScrollState_exports, {
+  useScrollState: () => useScrollState
+});
+module.exports = __toCommonJS(useScrollState_exports);
+var import_react = require("react");
+var useScrollState = ({ containerRef, overflow }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const [scrollState, setScrollState] = (0, import_react.useState)({
+    scrollTop: 0,
+    scrollLeft: 0,
+    percentY: 0,
+    percentX: 0,
+    scrollHeight: ((_a = containerRef.current) == null ? void 0 : _a.scrollHeight) || 0,
+    scrollWidth: ((_b = containerRef.current) == null ? void 0 : _b.scrollWidth) || 0,
+    clientHeight: ((_c = containerRef.current) == null ? void 0 : _c.clientHeight) || 0,
+    clientWidth: ((_d = containerRef.current) == null ? void 0 : _d.clientWidth) || 0,
+    direction: null,
+    isScrollToTop: overflow === "y" ? true : false,
+    isScrollToBottom: false,
+    isScrollToLeft: overflow === "x" ? true : false,
+    isScrollToRight: false,
+    isOverflows: false
+  });
+  (0, import_react.useEffect)(() => {
+    if (!containerRef.current) {
+      return;
+    }
+    const { scrollHeight, clientHeight, scrollWidth, clientWidth } = containerRef.current;
+    const isOverflows = scrollHeight > clientHeight || scrollWidth > clientWidth;
+    setScrollState((prev) => {
+      return {
+        ...prev,
+        isOverflows
+      };
+    });
+  }, [(_e = containerRef.current) == null ? void 0 : _e.scrollWidth, (_f = containerRef.current) == null ? void 0 : _f.scrollHeight, (_g = containerRef.current) == null ? void 0 : _g.clientHeight, (_h = containerRef.current) == null ? void 0 : _h.clientWidth]);
+  const updateScrollState = (0, import_react.useCallback)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const {
+      scrollTop,
+      scrollLeft,
+      scrollHeight,
+      scrollWidth,
+      clientHeight,
+      clientWidth
+    } = container;
+    const isScrollToTop = scrollTop <= 0;
+    const isScrollToBottom = scrollTop + clientHeight >= scrollHeight;
+    const isScrollToLeft = scrollLeft <= 0;
+    const isScrollToRight = scrollLeft + clientWidth >= scrollWidth;
+    setScrollState((prev) => {
+      let direction = null;
+      if (Math.abs(scrollTop - prev.scrollTop) > Math.abs(scrollLeft - prev.scrollLeft)) {
+        direction = scrollTop > prev.scrollTop ? "down" : "up";
+      } else if (scrollLeft !== prev.scrollLeft) {
+        direction = scrollLeft > prev.scrollLeft ? "right" : "left";
+      } else {
+        direction = prev.direction;
+      }
+      const maxScrollTop = scrollHeight - clientHeight;
+      const maxScrollLeft = scrollWidth - clientWidth;
+      const percentY = maxScrollTop > 0 ? scrollTop / maxScrollTop * 100 : 0;
+      const percentX = maxScrollLeft > 0 ? scrollLeft / maxScrollLeft * 100 : 0;
+      const isOverflows = scrollHeight > clientHeight || scrollWidth > clientWidth;
+      return {
+        scrollTop,
+        scrollLeft,
+        scrollHeight,
+        scrollWidth,
+        clientHeight,
+        clientWidth,
+        percentY,
+        percentX,
+        direction,
+        isScrollToTop,
+        isScrollToBottom,
+        isScrollToLeft,
+        isScrollToRight,
+        isOverflows
+      };
+    });
+  }, [containerRef]);
+  return { scrollState, updateScrollState };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useScrollState
+});

package/lib/components/PisellScrollView/index.js

@@ -0,0 +1,39 @@
+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/index.tsx
+var PisellScrollView_exports = {};
+__export(PisellScrollView_exports, {
+  PisellScrollView: () => import_PisellScrollView.default
+});
+module.exports = __toCommonJS(PisellScrollView_exports);
+var import_PisellScrollView = __toESM(require("./PisellScrollView"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellScrollView
+});

package/lib/components/PisellScrollView/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/PisellScrollView/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/components/PisellSteps/PisellSteps.js

@@ -0,0 +1,222 @@
+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/PisellSteps/PisellSteps.tsx
+var PisellSteps_exports = {};
+__export(PisellSteps_exports, {
+  default: () => PisellSteps_default
+});
+module.exports = __toCommonJS(PisellSteps_exports);
+var import_antd = require("antd");
+var import_react = __toESM(require("react"));
+var import_PisellSteps = require("./PisellSteps.less");
+var import_hooks = require("./hooks");
+var import_utils = require("./utils");
+var PisellSteps = ({
+  // 基础属性
+  type = "default",
+  current: controlledCurrent,
+  defaultCurrent = 0,
+  direction = "horizontal",
+  size = "default",
+  status = "process",
+  initial = 0,
+  items = [],
+  percent,
+  labelPlacement = "horizontal",
+  responsive = true,
+  onChange,
+  className,
+  style,
+  progressDot,
+  // 扩展功能属性
+  clickable = false,
+  allowClickFinished = true,
+  showProgressPercent = false,
+  iconSize,
+  iconColor,
+  connectorStyle,
+  connectorPosition = "center",
+  animated = true,
+  gridLayout = false,
+  gridColumns,
+  itemLayout = "horizontal",
+  itemGap,
+  enableAnchor = false,
+  anchorContainer,
+  // 低代码属性
+  __designMode,
+  __id,
+  other,
+  ...restProps
+}) => {
+  const [currentStep, setCurrentStep] = (0, import_hooks.useStepsState)(
+    controlledCurrent,
+    defaultCurrent,
+    onChange
+  );
+  const handleStepClick = (0, import_hooks.useStepClick)(
+    currentStep,
+    clickable,
+    allowClickFinished,
+    setCurrentStep
+  );
+  (0, import_hooks.useAnchor)(currentStep, enableAnchor, anchorContainer);
+  const isMobile = (0, import_hooks.useResponsive)(768);
+  const processedItems = (0, import_react.useMemo)(() => {
+    const visibleItems = items.filter((item) => !item.hidden);
+    if (__designMode === "design" && visibleItems.length === 0) {
+      return [
+        {
+          title: "步骤一",
+          description: "This is a description.",
+          status: "finish"
+        },
+        {
+          title: "步骤二",
+          description: "This is a description.",
+          status: "process"
+        },
+        {
+          title: "步骤三",
+          description: "This is a description.",
+          status: "wait"
+        }
+      ];
+    }
+    return visibleItems.map((item, index) => {
+      const adjustedIndex = index + initial;
+      let stepStatus;
+      if (item.status) {
+        stepStatus = item.status;
+      } else if (adjustedIndex === currentStep) {
+        stepStatus = status;
+      } else {
+        stepStatus = (0, import_utils.getStepStatus)(adjustedIndex, currentStep);
+      }
+      const stepClassName = (0, import_utils.mergeStepClassName)(
+        "pisell-steps-item",
+        stepStatus,
+        item.className
+      );
+      const handleClick = () => {
+        var _a;
+        if (!item.disabled) {
+          (_a = item.onClick) == null ? void 0 : _a.call(item);
+          handleStepClick(adjustedIndex, item);
+        }
+      };
+      return {
+        ...item,
+        status: stepStatus,
+        className: stepClassName,
+        onClick: clickable || item.onClick ? handleClick : void 0
+      };
+    });
+  }, [
+    items,
+    currentStep,
+    initial,
+    status,
+    clickable,
+    handleStepClick,
+    __designMode
+  ]);
+  const wrapperClassName = (0, import_react.useMemo)(() => {
+    const classes = ["pisell-steps"];
+    if (className) classes.push(className);
+    if (type !== "default") classes.push(`pisell-steps-${type}`);
+    if (size !== "default") classes.push(`pisell-steps-${size}`);
+    if (direction === "vertical") classes.push("pisell-steps-vertical");
+    if (responsive) classes.push("pisell-steps-responsive");
+    if (animated) classes.push("pisell-steps-animated");
+    if (clickable) classes.push("pisell-steps-clickable");
+    if (gridLayout) classes.push("pisell-steps-grid-layout");
+    if (connectorPosition !== "center")
+      classes.push(`pisell-steps-connector-${connectorPosition}`);
+    if (itemLayout === "vertical") classes.push("pisell-steps-item-vertical");
+    return classes.join(" ");
+  }, [
+    className,
+    type,
+    size,
+    direction,
+    responsive,
+    animated,
+    clickable,
+    gridLayout,
+    connectorPosition,
+    itemLayout
+  ]);
+  const wrapperStyle = (0, import_react.useMemo)(() => {
+    const customStyle = { ...style };
+    if (iconSize) {
+      customStyle["--pisell-steps-icon-size"] = `${iconSize}px`;
+    }
+    if (iconColor) {
+      customStyle["--pisell-steps-icon-color"] = iconColor;
+    }
+    if (itemGap) {
+      customStyle["--pisell-steps-item-gap"] = `${itemGap}px`;
+    }
+    if (gridColumns && gridLayout) {
+      customStyle["--pisell-steps-grid-columns"] = gridColumns;
+    }
+    return customStyle;
+  }, [style, iconSize, iconColor, itemGap, gridColumns, gridLayout]);
+  const effectivePercent = showProgressPercent ? percent : void 0;
+  const antdType = type === "dot" ? "inline" : type === "navigation" ? "navigation" : "default";
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: wrapperClassName,
+      style: wrapperStyle,
+      "data-component": "pisell-steps",
+      "data-id": __id
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Steps,
+      {
+        current: currentStep - initial,
+        direction,
+        size: size === "large" ? "default" : size,
+        status,
+        items: processedItems,
+        percent: effectivePercent,
+        labelPlacement,
+        type: antdType,
+        progressDot: type === "dot" ? progressDot : false,
+        ...restProps,
+        ...other
+      }
+    ),
+    showProgressPercent && percent !== void 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-steps-progress-info" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-steps-progress-percent" }, percent, "%"))
+  );
+};
+PisellSteps.displayName = "PisellSteps";
+var PisellSteps_default = PisellSteps;