@pisell/materials 6.3.22 → 6.3.24

package/es/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) => JSX.Element | null;
+export default ActionsContainer;

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

@@ -0,0 +1,130 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import { FloatButton } from 'antd';
+import IconFont from "../../../iconfont";
+import classNames from 'classnames';
+import "./index.less";
+var ActionsContainer = function ActionsContainer(_ref) {
+  var containerRef = _ref.containerRef,
+    scrollState = _ref.scrollState,
+    overflow = _ref.overflow,
+    _ref$scrollActionsCon = _ref.scrollActionsConfig,
+    scrollActionsConfig = _ref$scrollActionsCon === void 0 ? {
+      type: 'backTop'
+    } : _ref$scrollActionsCon,
+    _onClick = _ref.onClick;
+  if (overflow !== 'x' && overflow !== 'y') {
+    return null;
+  }
+  if (!scrollState.isOverflows) {
+    return null;
+  }
+  if (!(scrollActionsConfig !== null && scrollActionsConfig !== void 0 && scrollActionsConfig.show) || !scrollActionsConfig) {
+    return null;
+  }
+  if (overflow === 'y' && scrollActionsConfig.type === 'backTop') {
+    return /*#__PURE__*/React.createElement(FloatButton.BackTop, _extends({
+      target: function target() {
+        return containerRef.current || window;
+      },
+      visibilityHeight: 300,
+      icon: /*#__PURE__*/React.createElement(IconFont, {
+        type: "pisell2-chevron-up"
+      })
+    }, scrollActionsConfig.config, {
+      style: _objectSpread({
+        position: 'absolute'
+      }, scrollActionsConfig.style)
+    }));
+  }
+  if (overflow === 'x' && scrollActionsConfig.type === 'rArrows') {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pisell-scroll-view-actions-rArrows-container",
+      style: scrollActionsConfig.style
+    }, /*#__PURE__*/React.createElement("div", _extends({
+      className: classNames('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: function onClick() {
+        return _onClick('left');
+      }
+    }, scrollActionsConfig.config), /*#__PURE__*/React.createElement(IconFont, {
+      type: "pisell2-chevron-left",
+      className: classNames('pisell-scroll-view-actions-rArrows-icon', {
+        'pisell-scroll-view-actions-rArrows-icon-hidden': scrollState.isScrollToLeft
+      })
+    })), /*#__PURE__*/React.createElement("div", _extends({
+      className: classNames('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: function onClick() {
+        return _onClick('right');
+      }
+    }, scrollActionsConfig.config), /*#__PURE__*/React.createElement(IconFont, {
+      type: "pisell2-chevron-right",
+      className: classNames('pisell-scroll-view-actions-rArrows-icon', {
+        'pisell-scroll-view-actions-rArrows-icon-hidden': scrollState.isScrollToRight
+      })
+    })));
+  }
+  if (overflow === 'x' && scrollActionsConfig.type === 'lrArrows') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
+      className: classNames('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: function onClick() {
+        return _onClick('left');
+      }
+    }, scrollActionsConfig.config), /*#__PURE__*/React.createElement(IconFont, {
+      type: "pisell2-chevron-left",
+      className: "pisell-scroll-view-actions-lrArrows-icon"
+    })), /*#__PURE__*/React.createElement("div", _extends({
+      className: classNames('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: function onClick() {
+        return _onClick('right');
+      }
+    }, scrollActionsConfig.config), /*#__PURE__*/React.createElement(IconFont, {
+      type: "pisell2-chevron-right",
+      className: "pisell-scroll-view-actions-lrArrows-icon"
+    })));
+  }
+  if (overflow === 'y' && scrollActionsConfig.type === 'tbArrows') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
+      className: classNames('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: function onClick() {
+        return _onClick('top');
+      }
+    }, scrollActionsConfig.config), /*#__PURE__*/React.createElement(IconFont, {
+      type: "pisell2-chevron-up",
+      className: "pisell-scroll-view-actions-tbArrows-icon"
+    })), /*#__PURE__*/React.createElement("div", _extends({
+      className: classNames('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: function onClick() {
+        return _onClick('bottom');
+      }
+    }, scrollActionsConfig.config), /*#__PURE__*/React.createElement(IconFont, {
+      type: "pisell2-chevron-down",
+      className: "pisell-scroll-view-actions-tbArrows-icon"
+    })));
+  }
+  return null;
+};
+export default ActionsContainer;

package/es/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/es/components/PisellScrollView/hooks/index.d.ts

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

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

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

package/es/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/es/components/PisellScrollView/hooks/useIntersection.js

@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+export var useIntersection = function useIntersection(_ref) {
+  var containerRef = _ref.containerRef,
+    config = _ref.config;
+  useEffect(function () {
+    if (!(config !== null && config !== void 0 && config.enabled) || !containerRef.current) return;
+    var _config$threshold = config.threshold,
+      threshold = _config$threshold === void 0 ? 0 : _config$threshold,
+      _config$rootMargin = config.rootMargin,
+      rootMargin = _config$rootMargin === void 0 ? '0px' : _config$rootMargin,
+      targetSelector = config.targetSelector,
+      onEnterViewport = config.onEnterViewport,
+      onLeaveViewport = config.onLeaveViewport,
+      onVisibilityChange = config.onVisibilityChange;
+    var container = containerRef.current;
+
+    // 如果没有 targetSelector，监听 children
+    // 但通常 IntersectionObserver 最好是用户指定 selector
+    // 或者我们遍历所有直接子元素
+    var targets = targetSelector ? container.querySelectorAll(targetSelector) : container.children;
+    if (!targets || targets.length === 0) return;
+    var observer = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        var element = entry.target;
+        onVisibilityChange === null || onVisibilityChange === void 0 || onVisibilityChange(entry, element);
+        if (entry.isIntersecting) {
+          onEnterViewport === null || onEnterViewport === void 0 || onEnterViewport(entry, element);
+        } else {
+          onLeaveViewport === null || onLeaveViewport === void 0 || onLeaveViewport(entry, element);
+        }
+      });
+    }, {
+      root: container,
+      rootMargin: rootMargin,
+      threshold: threshold
+    });
+    Array.from(targets).forEach(function (target) {
+      return observer.observe(target);
+    });
+    return function () {
+      observer.disconnect();
+    };
+  }, [config, containerRef]);
+};

package/es/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/es/components/PisellScrollView/hooks/useScrollEvents.js

@@ -0,0 +1,96 @@
+import { useRef, useCallback } from 'react';
+import { debounce } from 'lodash';
+export var useScrollEvents = function useScrollEvents(_ref) {
+  var containerRef = _ref.containerRef,
+    onScroll = _ref.onScroll,
+    onScrollStart = _ref.onScrollStart,
+    onScrollEnd = _ref.onScrollEnd,
+    onReachTop = _ref.onReachTop,
+    onReachBottom = _ref.onReachBottom,
+    onReachLeft = _ref.onReachLeft,
+    onReachRight = _ref.onReachRight,
+    _ref$reachThreshold = _ref.reachThreshold,
+    reachThreshold = _ref$reachThreshold === void 0 ? 0 : _ref$reachThreshold,
+    _ref$scrollEndDelay = _ref.scrollEndDelay,
+    scrollEndDelay = _ref$scrollEndDelay === void 0 ? 150 : _ref$scrollEndDelay,
+    updateScrollState = _ref.updateScrollState,
+    scrollState = _ref.scrollState;
+  var isScrolling = useRef(false);
+
+  // 滚动结束处理（防抖）
+  var handleScrollEnd = useCallback(debounce(function (finalState) {
+    isScrolling.current = false;
+    onScrollEnd === null || onScrollEnd === void 0 || onScrollEnd(finalState);
+  }, scrollEndDelay), [onScrollEnd, scrollEndDelay]);
+  var handleScroll = useCallback(function () {
+    var container = containerRef.current;
+    if (!container) return;
+    updateScrollState();
+
+    // 获取最新的状态需要直接从 DOM 拿，因为 state 更新是异步的
+    // 为了简化，这里我们在下一帧或通过 ref 获取实时数据可能会更准，
+    // 但复用 updateScrollState 逻辑保持一致性
+    // 这里我们直接构造临时数据用于触发回调
+    var scrollTop = container.scrollTop,
+      scrollLeft = container.scrollLeft,
+      scrollHeight = container.scrollHeight,
+      scrollWidth = container.scrollWidth,
+      clientHeight = container.clientHeight,
+      clientWidth = container.clientWidth;
+
+    // 简单的方向计算需要依赖上一次状态，这里暂简化
+    // 实际使用中 scrollState 的更新会有延迟，所以 callback 中的 data 最好实时计算
+
+    var maxScrollTop = Math.max(0, scrollHeight - clientHeight);
+    var maxScrollLeft = Math.max(0, scrollWidth - clientWidth);
+    var percentY = maxScrollTop > 0 ? scrollTop / maxScrollTop * 100 : 0;
+    var percentX = maxScrollLeft > 0 ? scrollLeft / maxScrollLeft * 100 : 0;
+
+    // 计算边界状态
+    var isScrollToTop = scrollTop <= reachThreshold;
+    var isScrollToBottom = scrollTop + clientHeight >= scrollHeight - reachThreshold;
+    var isScrollToLeft = scrollLeft <= reachThreshold;
+    var isScrollToRight = scrollLeft + clientWidth >= scrollWidth - reachThreshold;
+
+    // 计算是否溢出
+    var isOverflows = scrollHeight > clientHeight || scrollWidth > clientWidth;
+    var currentData = {
+      scrollTop: scrollTop,
+      scrollLeft: scrollLeft,
+      scrollHeight: scrollHeight,
+      scrollWidth: scrollWidth,
+      clientHeight: clientHeight,
+      clientWidth: clientWidth,
+      percentY: percentY,
+      percentX: percentX,
+      direction: null,
+      // 在这里计算方向比较麻烦，可以使用 scrollState 中的（虽然有一点延迟）
+      isScrollToTop: isScrollToTop,
+      isScrollToBottom: isScrollToBottom,
+      isScrollToLeft: isScrollToLeft,
+      isScrollToRight: isScrollToRight,
+      isOverflows: isOverflows
+    };
+
+    // 触发 ScrollStart
+    if (!isScrolling.current) {
+      isScrolling.current = true;
+      onScrollStart === null || onScrollStart === void 0 || onScrollStart(currentData);
+    }
+
+    // 触发 Scroll
+    onScroll === null || onScroll === void 0 || onScroll(currentData);
+
+    // 触发边界事件
+    if (scrollTop <= reachThreshold) onReachTop === null || onReachTop === void 0 || onReachTop(currentData);
+    if (scrollTop + clientHeight >= scrollHeight - reachThreshold) onReachBottom === null || onReachBottom === void 0 || onReachBottom(currentData);
+    if (scrollLeft <= reachThreshold) onReachLeft === null || onReachLeft === void 0 || onReachLeft(currentData);
+    if (scrollLeft + clientWidth >= scrollWidth - reachThreshold) onReachRight === null || onReachRight === void 0 || onReachRight(currentData);
+
+    // 触发 ScrollEnd
+    handleScrollEnd(currentData);
+  }, [containerRef, updateScrollState, onScroll, onScrollStart, handleScrollEnd, onReachTop, onReachBottom, onReachLeft, onReachRight, reachThreshold]);
+  return {
+    handleScroll: handleScroll
+  };
+};

package/es/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;
+};