@pisell/materials 6.7.3 → 6.7.4

package/lib/components/PisellScrollView/PisellScrollView.js

@@ -1,310 +0,0 @@
-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;

package/lib/components/PisellScrollView/PisellScrollView.less

@@ -1,178 +0,0 @@
-.pisell-scroll-view {
-  position: relative;
-  overflow: hidden;
-
-  &-viewport {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-
-    // 隐藏滚动条样式
-    &--hide-scrollbar {
-      -ms-overflow-style: none !important;
-      /* IE and Edge */
-      scrollbar-width: none !important;
-      /* Firefox */
-
-      &::-webkit-scrollbar {
-        display: none !important;
-      }
-    }
-
-    // 内置滚动条样式
-    &[data-scrollbar-style='thin'] {
-      &::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background-color: rgba(0, 0, 0, 0.2);
-        border-radius: 4px;
-
-        &:hover {
-          background-color: rgba(0, 0, 0, 0.3);
-        }
-      }
-
-      &::-webkit-scrollbar-track {
-        background-color: transparent;
-      }
-    }
-
-    &[data-scrollbar-style='minimal'] {
-      &::-webkit-scrollbar {
-        width: 4px;
-        height: 4px;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background-color: rgba(0, 0, 0, 0.15);
-        border-radius: 2px;
-
-        &:hover {
-          background-color: rgba(0, 0, 0, 0.25);
-        }
-      }
-    }
-
-    &[data-scrollbar-style='rounded'] {
-      &::-webkit-scrollbar {
-        width: 12px;
-        height: 12px;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background-color: rgba(0, 0, 0, 0.2);
-        border-radius: 6px;
-        border: 2px solid transparent;
-        background-clip: content-box;
-
-        &:hover {
-          background-color: rgba(0, 0, 0, 0.3);
-        }
-      }
-    }
-  }
-
-  // 滚动按钮容器
-  &-button-wrapper {
-    position: absolute;
-    z-index: 10;
-    pointer-events: none; // 允许点击穿透到内容，具体按钮开启 pointer-events: auto
-
-    &--top,
-    &--bottom,
-    &--left,
-    &--right {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    // 内部定位
-    &--inside-top {
-      top: 0;
-      left: 0;
-      right: 0;
-      padding: 8px;
-    }
-
-    &--inside-bottom {
-      bottom: 0;
-      left: 0;
-      right: 0;
-      padding: 8px;
-    }
-
-    &--inside-left {
-      top: 0;
-      bottom: 0;
-      left: 0;
-      padding: 8px;
-    }
-
-    &--inside-right {
-      top: 0;
-      bottom: 0;
-      right: 0;
-      padding: 8px;
-    }
-
-    // 外部定位 (通过 margin 或 transform 处理)
-  }
-
-  &-button {
-    pointer-events: auto;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    border: none;
-    outline: none;
-    background: #fff;
-    color: #333;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    transition: all 0.2s;
-
-    &:hover {
-      background: #f5f5f5;
-    }
-
-    &:active {
-      transform: scale(0.95);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      box-shadow: none;
-    }
-
-    &--circle {
-      border-radius: 50%;
-      width: 32px;
-      height: 32px;
-    }
-
-    &--square {
-      border-radius: 4px;
-      width: 32px;
-      height: 32px;
-    }
-
-    &--minimal {
-      background: transparent;
-      box-shadow: none;
-
-      &:hover {
-        background: rgba(0, 0, 0, 0.05);
-      }
-    }
-
-    &--floating {
-      background: rgba(255, 255, 255, 0.8);
-      backdrop-filter: blur(4px);
-    }
-  }
-}

package/lib/components/PisellScrollView/components/Actions/index.js

@@ -1,220 +0,0 @@
-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/components/Actions/index.tsx
-var Actions_exports = {};
-__export(Actions_exports, {
-  default: () => Actions_default
-});
-module.exports = __toCommonJS(Actions_exports);
-var import_react = __toESM(require("react"));
-var import_antd = require("antd");
-var import_iconfont = __toESM(require("../../../iconfont"));
-var import_classnames = __toESM(require("classnames"));
-var import_index = require("./index.less");
-var ActionsContainer = ({
-  containerRef,
-  scrollState,
-  overflow,
-  scrollActionsConfig = { type: "backTop" },
-  onClick
-}) => {
-  if (overflow !== "x" && overflow !== "y") {
-    return null;
-  }
-  if (!scrollState.isOverflows) {
-    return null;
-  }
-  if (!(scrollActionsConfig == null ? void 0 : scrollActionsConfig.show) || !scrollActionsConfig) {
-    return null;
-  }
-  if (overflow === "y" && scrollActionsConfig.type === "backTop") {
-    return /* @__PURE__ */ import_react.default.createElement(
-      import_antd.FloatButton.BackTop,
-      {
-        target: () => containerRef.current || window,
-        visibilityHeight: 300,
-        icon: /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: "pisell2-chevron-up" }),
-        ...scrollActionsConfig.config,
-        style: {
-          position: "absolute",
-          ...scrollActionsConfig.style
-        }
-      }
-    );
-  }
-  if (overflow === "x" && scrollActionsConfig.type === "rArrows") {
-    return /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: "pisell-scroll-view-actions-rArrows-container",
-        style: scrollActionsConfig.style
-      },
-      /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          className: (0, import_classnames.default)(
-            "pisell-scroll-view-actions-rArrows",
-            "pisell-scroll-view-actions-rArrows-left",
-            {
-              "pisell-scroll-view-actions-rArrows-hidden": scrollState.isScrollToLeft,
-              "pisell-scroll-view-actions-rArrows-show": !scrollState.isScrollToLeft
-            }
-          ),
-          onClick: () => onClick("left"),
-          ...scrollActionsConfig.config
-        },
-        /* @__PURE__ */ import_react.default.createElement(
-          import_iconfont.default,
-          {
-            type: "pisell2-chevron-left",
-            className: (0, import_classnames.default)("pisell-scroll-view-actions-rArrows-icon", {
-              "pisell-scroll-view-actions-rArrows-icon-hidden": scrollState.isScrollToLeft
-            })
-          }
-        )
-      ),
-      /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          className: (0, import_classnames.default)(
-            "pisell-scroll-view-actions-rArrows",
-            "pisell-scroll-view-actions-rArrows-right",
-            {
-              "pisell-scroll-view-actions-rArrows-hidden": scrollState.isScrollToRight,
-              "pisell-scroll-view-actions-rArrows-show": !scrollState.isScrollToRight
-            }
-          ),
-          onClick: () => onClick("right"),
-          ...scrollActionsConfig.config
-        },
-        /* @__PURE__ */ import_react.default.createElement(
-          import_iconfont.default,
-          {
-            type: "pisell2-chevron-right",
-            className: (0, import_classnames.default)("pisell-scroll-view-actions-rArrows-icon", {
-              "pisell-scroll-view-actions-rArrows-icon-hidden": scrollState.isScrollToRight
-            })
-          }
-        )
-      )
-    );
-  }
-  if (overflow === "x" && scrollActionsConfig.type === "lrArrows") {
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: (0, import_classnames.default)(
-          "pisell-scroll-view-actions-lrArrows",
-          "pisell-scroll-view-actions-lrArrows-left",
-          {
-            "pisell-scroll-view-actions-lrArrows-hidden": scrollState.isScrollToLeft,
-            "pisell-scroll-view-actions-lrArrows-show": !scrollState.isScrollToLeft
-          }
-        ),
-        onClick: () => onClick("left"),
-        ...scrollActionsConfig.config
-      },
-      /* @__PURE__ */ import_react.default.createElement(
-        import_iconfont.default,
-        {
-          type: "pisell2-chevron-left",
-          className: "pisell-scroll-view-actions-lrArrows-icon"
-        }
-      )
-    ), /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: (0, import_classnames.default)(
-          "pisell-scroll-view-actions-lrArrows",
-          "pisell-scroll-view-actions-lrArrows-right",
-          {
-            "pisell-scroll-view-actions-lrArrows-hidden": scrollState.isScrollToRight,
-            "pisell-scroll-view-actions-lrArrows-show": !scrollState.isScrollToRight
-          }
-        ),
-        onClick: () => onClick("right"),
-        ...scrollActionsConfig.config
-      },
-      /* @__PURE__ */ import_react.default.createElement(
-        import_iconfont.default,
-        {
-          type: "pisell2-chevron-right",
-          className: "pisell-scroll-view-actions-lrArrows-icon"
-        }
-      )
-    ));
-  }
-  if (overflow === "y" && scrollActionsConfig.type === "tbArrows") {
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: (0, import_classnames.default)(
-          "pisell-scroll-view-actions-tbArrows",
-          "pisell-scroll-view-actions-tbArrows-top",
-          {
-            "pisell-scroll-view-actions-tbArrows-hidden": scrollState.isScrollToTop,
-            "pisell-scroll-view-actions-tbArrows-show": !scrollState.isScrollToTop
-          }
-        ),
-        onClick: () => onClick("top"),
-        ...scrollActionsConfig.config
-      },
-      /* @__PURE__ */ import_react.default.createElement(
-        import_iconfont.default,
-        {
-          type: "pisell2-chevron-up",
-          className: "pisell-scroll-view-actions-tbArrows-icon"
-        }
-      )
-    ), /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: (0, import_classnames.default)(
-          "pisell-scroll-view-actions-tbArrows",
-          "pisell-scroll-view-actions-tbArrows-bottom",
-          {
-            "pisell-scroll-view-actions-tbArrows-hidden": scrollState.isScrollToBottom,
-            "pisell-scroll-view-actions-tbArrows-show": !scrollState.isScrollToBottom
-          }
-        ),
-        onClick: () => onClick("bottom"),
-        ...scrollActionsConfig.config
-      },
-      /* @__PURE__ */ import_react.default.createElement(
-        import_iconfont.default,
-        {
-          type: "pisell2-chevron-down",
-          className: "pisell-scroll-view-actions-tbArrows-icon"
-        }
-      )
-    ));
-  }
-  return null;
-};
-var Actions_default = ActionsContainer;