@pisell/materials 6.7.2 → 6.7.3

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.js

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

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.js

@@ -0,0 +1,81 @@
+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 = scrollHeight - clientHeight;
+    var maxScrollLeft = scrollWidth - clientWidth;
+    var percentY = maxScrollTop > 0 ? scrollTop / maxScrollTop * 100 : 0;
+    var percentX = maxScrollLeft > 0 ? scrollLeft / maxScrollLeft * 100 : 0;
+    var currentData = {
+      scrollTop: scrollTop,
+      scrollLeft: scrollLeft,
+      scrollHeight: scrollHeight,
+      scrollWidth: scrollWidth,
+      clientHeight: clientHeight,
+      clientWidth: clientWidth,
+      percentY: percentY,
+      percentX: percentX,
+      direction: null // 在这里计算方向比较麻烦，可以使用 scrollState 中的（虽然有一点延迟）
+    };
+
+    // 触发 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.js

@@ -0,0 +1,105 @@
+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 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); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState, useEffect, useCallback } from 'react';
+export var useScrollState = function useScrollState(_ref) {
+  var _containerRef$current, _containerRef$current2, _containerRef$current3, _containerRef$current4, _containerRef$current6, _containerRef$current7, _containerRef$current8, _containerRef$current9;
+  var containerRef = _ref.containerRef,
+    overflow = _ref.overflow;
+  var _useState = useState({
+      scrollTop: 0,
+      scrollLeft: 0,
+      percentY: 0,
+      percentX: 0,
+      scrollHeight: ((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.scrollHeight) || 0,
+      scrollWidth: ((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.scrollWidth) || 0,
+      clientHeight: ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.clientHeight) || 0,
+      clientWidth: ((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.clientWidth) || 0,
+      direction: null,
+      isScrollToTop: overflow === 'y' ? true : false,
+      isScrollToBottom: false,
+      isScrollToLeft: overflow === 'x' ? true : false,
+      isScrollToRight: false,
+      isOverflows: false
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    scrollState = _useState2[0],
+    setScrollState = _useState2[1];
+  useEffect(function () {
+    if (!containerRef.current) {
+      return;
+    }
+    var _containerRef$current5 = containerRef.current,
+      scrollHeight = _containerRef$current5.scrollHeight,
+      clientHeight = _containerRef$current5.clientHeight,
+      scrollWidth = _containerRef$current5.scrollWidth,
+      clientWidth = _containerRef$current5.clientWidth;
+    var isOverflows = scrollHeight > clientHeight || scrollWidth > clientWidth;
+    setScrollState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        isOverflows: isOverflows
+      });
+    });
+  }, [(_containerRef$current6 = containerRef.current) === null || _containerRef$current6 === void 0 ? void 0 : _containerRef$current6.scrollWidth, (_containerRef$current7 = containerRef.current) === null || _containerRef$current7 === void 0 ? void 0 : _containerRef$current7.scrollHeight, (_containerRef$current8 = containerRef.current) === null || _containerRef$current8 === void 0 ? void 0 : _containerRef$current8.clientHeight, (_containerRef$current9 = containerRef.current) === null || _containerRef$current9 === void 0 ? void 0 : _containerRef$current9.clientWidth]);
+  var updateScrollState = useCallback(function () {
+    var container = containerRef.current;
+    if (!container) return;
+    var scrollTop = container.scrollTop,
+      scrollLeft = container.scrollLeft,
+      scrollHeight = container.scrollHeight,
+      scrollWidth = container.scrollWidth,
+      clientHeight = container.clientHeight,
+      clientWidth = container.clientWidth;
+    var isScrollToTop = scrollTop <= 0;
+    var isScrollToBottom = scrollTop + clientHeight >= scrollHeight;
+    var isScrollToLeft = scrollLeft <= 0;
+    var isScrollToRight = scrollLeft + clientWidth >= scrollWidth;
+    setScrollState(function (prev) {
+      // 计算方向
+      var 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;
+      }
+
+      // 计算百分比
+      var maxScrollTop = scrollHeight - clientHeight;
+      var maxScrollLeft = scrollWidth - clientWidth;
+      var percentY = maxScrollTop > 0 ? scrollTop / maxScrollTop * 100 : 0;
+      var percentX = maxScrollLeft > 0 ? scrollLeft / maxScrollLeft * 100 : 0;
+      var isOverflows = scrollHeight > clientHeight || scrollWidth > clientWidth;
+      return {
+        scrollTop: scrollTop,
+        scrollLeft: scrollLeft,
+        scrollHeight: scrollHeight,
+        scrollWidth: scrollWidth,
+        clientHeight: clientHeight,
+        clientWidth: clientWidth,
+        percentY: percentY,
+        percentX: percentX,
+        direction: direction,
+        isScrollToTop: isScrollToTop,
+        isScrollToBottom: isScrollToBottom,
+        isScrollToLeft: isScrollToLeft,
+        isScrollToRight: isScrollToRight,
+        isOverflows: isOverflows
+      };
+    });
+  }, [containerRef]);
+  return {
+    scrollState: scrollState,
+    updateScrollState: updateScrollState
+  };
+};

package/es/components/PisellScrollView/index.js

@@ -0,0 +1 @@
+export { default as PisellScrollView } from "./PisellScrollView";

package/es/components/PisellScrollView/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+// 自定义工具函数