@pisell/materials 6.3.22 → 6.3.24

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

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

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

@@ -0,0 +1,134 @@
+.pisell-scroll-view-actions-lrArrows {
+  height: 100%;
+  position: absolute;
+  top: 0;
+  z-index: 99;
+  width: 47px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.50);
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(8px);
+  cursor: pointer;
+  opacity: 0;
+
+  &-left {
+    left: 0;
+  }
+
+  &-right {
+    right: 0;
+  }
+
+  &-icon {
+    font-size: 28px;
+    color: #000;
+  }
+
+  &-show {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+
+  }
+
+  &-hidden {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+}
+
+.pisell-scroll-view-actions-tbArrows {
+  height: 100%;
+  position: absolute;
+  z-index: 99;
+  width: 100%;
+  height: 47px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.50);
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(8px);
+  cursor: pointer;
+  opacity: 0;
+
+  &-top {
+    top: 0;
+  }
+
+  &-bottom {
+    bottom: 0;
+  }
+
+  &-icon {
+    font-size: 28px;
+    color: #000;
+  }
+
+  &-show {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+
+  }
+
+  &-hidden {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+}
+
+.pisell-scroll-view-actions-rArrows-container {
+  height: 100%;
+  position: absolute;
+  top: 0;
+  z-index: 99;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  right: 0;
+  top: 0;
+  background: linear-gradient(270deg, #FFF 78.63%, rgba(255, 255, 255, 0.00) 100%);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 117px;
+  transition: .2s;
+
+  .pisell-scroll-view-actions-rArrows {
+    padding: 10px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      background-color: #f2f4f7;
+    }
+
+    &-icon {
+      font-size: 24px;
+      color: #000;
+
+      &-hidden {
+        color: #f2f4f7 !important;
+      }
+    }
+
+    &-show {
+      cursor: pointer;
+    }
+
+    &-hidden {
+      cursor: not-allowed;
+
+      &:hover {
+        background-color: transparent !important;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+export * from './useScrollState';
+export * from './useScrollEvents';
+export * from './useIntersection';

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

@@ -0,0 +1,27 @@
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellScrollView/hooks/index.ts
+var hooks_exports = {};
+module.exports = __toCommonJS(hooks_exports);
+__reExport(hooks_exports, require("./useScrollState"), module.exports);
+__reExport(hooks_exports, require("./useScrollEvents"), module.exports);
+__reExport(hooks_exports, require("./useIntersection"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./useScrollState"),
+  ...require("./useScrollEvents"),
+  ...require("./useIntersection")
+});

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

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+import { PisellScrollViewProps } from '../types';
+interface UseIntersectionProps {
+    containerRef: RefObject<HTMLElement>;
+    config?: PisellScrollViewProps['intersection'];
+}
+export declare const useIntersection: ({ containerRef, config }: UseIntersectionProps) => void;
+export {};

package/lib/components/PisellScrollView/hooks/useIntersection.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/PisellScrollView/hooks/useIntersection.ts
+var useIntersection_exports = {};
+__export(useIntersection_exports, {
+  useIntersection: () => useIntersection
+});
+module.exports = __toCommonJS(useIntersection_exports);
+var import_react = require("react");
+var useIntersection = ({ containerRef, config }) => {
+  (0, import_react.useEffect)(() => {
+    if (!(config == null ? void 0 : config.enabled) || !containerRef.current) return;
+    const {
+      threshold = 0,
+      rootMargin = "0px",
+      targetSelector,
+      onEnterViewport,
+      onLeaveViewport,
+      onVisibilityChange
+    } = config;
+    const container = containerRef.current;
+    const targets = targetSelector ? container.querySelectorAll(targetSelector) : container.children;
+    if (!targets || targets.length === 0) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const element = entry.target;
+          onVisibilityChange == null ? void 0 : onVisibilityChange(entry, element);
+          if (entry.isIntersecting) {
+            onEnterViewport == null ? void 0 : onEnterViewport(entry, element);
+          } else {
+            onLeaveViewport == null ? void 0 : onLeaveViewport(entry, element);
+          }
+        });
+      },
+      {
+        root: container,
+        rootMargin,
+        threshold
+      }
+    );
+    Array.from(targets).forEach((target) => observer.observe(target));
+    return () => {
+      observer.disconnect();
+    };
+  }, [config, containerRef]);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useIntersection
+});

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

@@ -0,0 +1,20 @@
+import { RefObject } from 'react';
+import { ScrollEventData, PisellScrollViewProps } from '../types';
+interface UseScrollEventsProps {
+    containerRef: RefObject<HTMLElement>;
+    onScroll?: PisellScrollViewProps['onScroll'];
+    onScrollStart?: PisellScrollViewProps['onScrollStart'];
+    onScrollEnd?: PisellScrollViewProps['onScrollEnd'];
+    onReachTop?: PisellScrollViewProps['onReachTop'];
+    onReachBottom?: PisellScrollViewProps['onReachBottom'];
+    onReachLeft?: PisellScrollViewProps['onReachLeft'];
+    onReachRight?: PisellScrollViewProps['onReachRight'];
+    reachThreshold?: number;
+    scrollEndDelay?: number;
+    updateScrollState: () => void;
+    scrollState: ScrollEventData;
+}
+export declare const useScrollEvents: ({ containerRef, onScroll, onScrollStart, onScrollEnd, onReachTop, onReachBottom, onReachLeft, onReachRight, reachThreshold, scrollEndDelay, updateScrollState, scrollState, }: UseScrollEventsProps) => {
+    handleScroll: () => void;
+};
+export {};

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

@@ -0,0 +1,114 @@
+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 = Math.max(0, scrollHeight - clientHeight);
+    const maxScrollLeft = Math.max(0, scrollWidth - clientWidth);
+    const percentY = maxScrollTop > 0 ? scrollTop / maxScrollTop * 100 : 0;
+    const percentX = maxScrollLeft > 0 ? scrollLeft / maxScrollLeft * 100 : 0;
+    const isScrollToTop = scrollTop <= reachThreshold;
+    const isScrollToBottom = scrollTop + clientHeight >= scrollHeight - reachThreshold;
+    const isScrollToLeft = scrollLeft <= reachThreshold;
+    const isScrollToRight = scrollLeft + clientWidth >= scrollWidth - reachThreshold;
+    const isOverflows = scrollHeight > clientHeight || scrollWidth > clientWidth;
+    const currentData = {
+      scrollTop,
+      scrollLeft,
+      scrollHeight,
+      scrollWidth,
+      clientHeight,
+      clientWidth,
+      percentY,
+      percentX,
+      direction: null,
+      // 在这里计算方向比较麻烦，可以使用 scrollState 中的（虽然有一点延迟）
+      isScrollToTop,
+      isScrollToBottom,
+      isScrollToLeft,
+      isScrollToRight,
+      isOverflows
+    };
+    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.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+import { ScrollEventData, PisellScrollViewProps } from '../types';
+/**
+ * 滚动状态管理 Hook
+ * @description 管理滚动容器的状态，包括滚动位置、溢出检测等
+ */
+export declare const useScrollState: ({ containerRef, overflow, }: {
+    containerRef: RefObject<HTMLElement>;
+    overflow: PisellScrollViewProps['overflow'];
+}) => {
+    scrollState: ScrollEventData;
+    updateScrollState: () => void;
+};