@pisell/materials 6.7.4 → 6.8.2

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;

package/lib/components/PisellScrollView/PisellScrollView.less

@@ -0,0 +1,178 @@
+.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.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ScrollEventData, PisellScrollViewProps, ScrollActionsConfig } from '../../types';
+import './index.less';
+interface ActionsContainerProps {
+    scrollState: ScrollEventData;
+    overflow: PisellScrollViewProps['overflow'];
+    scrollActionsConfig: ScrollActionsConfig;
+    containerRef: React.RefObject<HTMLDivElement>;
+    onClick: (direction: 'left' | 'right' | 'top' | 'bottom') => void;
+}
+declare const ActionsContainer: ({ containerRef, scrollState, overflow, scrollActionsConfig, onClick, }: ActionsContainerProps) => React.JSX.Element | null;
+export default ActionsContainer;