@sheinx/base 3.7.0-beta.3 → 3.7.0-beta.30

package/esm/virtual-scroll/scroll-table.js

@@ -0,0 +1,175 @@
+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); }
+import React, { useLayoutEffect, useRef } from 'react';
+import { useForkRef, usePersistFn, useResize, util } from '@sheinx/hooks';
+import { useConfig } from "../config";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var extractHeightValue = function extractHeightValue(num) {
+  if (util.isNumber(num)) return num;
+  var match = num.match(/(\d+)/);
+  if (match) {
+    return parseInt(match[0], 10);
+  }
+  return undefined;
+};
+var Scroll = function Scroll(props) {
+  var containerRef = useRef(null);
+  var scrollRef = useRef(null);
+  var wrapperRef = useForkRef(scrollRef, props.wrapperRef);
+  var _useRef = useRef({
+      isMouseDown: false,
+      lastTableHeight: 0
+    }),
+    context = _useRef.current;
+  var _props$scrollHeight = props.scrollHeight,
+    scrollHeight = _props$scrollHeight === void 0 ? 0 : _props$scrollHeight,
+    _props$scrollWidth = props.scrollWidth,
+    scrollWidth = _props$scrollWidth === void 0 ? 0 : _props$scrollWidth,
+    _props$defaultHeight = props.defaultHeight,
+    defaultHeight = _props$defaultHeight === void 0 ? 0 : _props$defaultHeight;
+  var _useResize = useResize({
+      targetRef: containerRef,
+      timer: 100
+    }),
+    width = _useResize.width,
+    h = _useResize.height;
+  var height = h || defaultHeight;
+  var config = useConfig();
+  var isRtl = config.direction === 'rtl';
+  var scrollerStyle = {
+    flex: 1,
+    minWidth: 0,
+    minHeight: 0,
+    overflow: 'auto',
+    width: '100%'
+  };
+  var containerStyle = {
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    position: 'sticky',
+    flexDirection: 'column',
+    overflow: props.isScrollX ? 'initial' : 'hidden',
+    top: 0
+  };
+  var paddingTop = Math.max(0, Math.floor(scrollHeight - height));
+  if (props.isEmpty) {
+    paddingTop = 0;
+    Object.assign(scrollerStyle, {
+      display: 'flex',
+      flexDirection: 'column'
+    });
+  }
+  var placeStyle = {
+    paddingTop: paddingTop,
+    width: scrollWidth,
+    overflow: props.isScrollY ? 'hidden' : 'auto hidden',
+    height: props.isScrollY ? 0 : 1,
+    marginTop: props.isScrollY ? 0 : -1,
+    lineHeight: 0
+  };
+  var handleScroll = usePersistFn(function (e) {
+    var onScrollToBottom = props.onScrollToBottom;
+    var target = e.currentTarget;
+    var scrollLeft = target.scrollLeft,
+      scrollTop = target.scrollTop;
+    if (props.height && onScrollToBottom) {
+      var realHeight = extractHeightValue(props.height);
+      if (realHeight !== undefined) {
+        var touchBottom = target.scrollHeight === scrollTop + realHeight;
+        if (touchBottom) onScrollToBottom();
+      }
+    }
+    var maxY = target.scrollHeight - target.clientHeight;
+    var maxX = target.scrollWidth - target.clientWidth;
+    if (!isRtl) {
+      // 解决浏览器缩放以后导致滚动条长度出现小数
+      if (maxX - scrollLeft < 0 || maxX - scrollLeft < 1) scrollLeft = maxX;
+      if (scrollLeft < 0) scrollLeft = 0;
+    } else {
+      if (maxX + scrollLeft < 0 || maxX + scrollLeft < 1) scrollLeft = 0 - maxX;
+      if (scrollLeft > 0) scrollLeft = 0;
+    }
+    if (scrollTop > maxY || maxY - scrollTop < 1) scrollTop = maxY;
+    if (scrollTop < 0) scrollTop = 0;
+    var x = maxX === 0 ? 0 : Math.min(Math.abs(scrollLeft) / maxX, 1);
+    var y = maxY === 0 ? 0 : Math.min(scrollTop / maxY, 1);
+    if (props.onScroll) props.onScroll({
+      scrollLeft: scrollLeft,
+      scrollTop: scrollTop,
+      x: x,
+      y: y,
+      height: height,
+      width: width,
+      fromDrag: context.isMouseDown
+    });
+  });
+  var handleInnerScroll = usePersistFn(function (e) {
+    var scrollTop = e.currentTarget.scrollTop;
+    if (scrollRef.current) {
+      e.currentTarget.scrollTop = 0;
+      scrollRef.current.scrollTop += scrollTop;
+    }
+  });
+  var scrollRoleProps = _objectSpread(_objectSpread({}, util.getDataAttribute({
+    role: 'scroll'
+  })), {}, {
+    style: scrollerStyle,
+    onScroll: handleScroll,
+    ref: wrapperRef,
+    onMouseDown: function onMouseDown() {
+      context.isMouseDown = true;
+    },
+    onMouseUp: function onMouseUp() {
+      context.isMouseDown = false;
+    }
+  });
+
+  // 非定高的Table但依旧采用了virtual渲染方式，需要渲染出全部的data
+  useLayoutEffect(function () {
+    if (!props.tableRef.current) return;
+    var rootTableHeight = props.tableRef.current.clientHeight;
+    var container = containerRef.current;
+    // 判断内容滚动高度是否真的超过了容器高度
+    var isRealScroll = (container === null || container === void 0 ? void 0 : container.scrollHeight) !== undefined && container.scrollHeight > rootTableHeight;
+    // 判断Table的根节点dom高度是否发生变化，如果变化了，则是因为不定高，被内部元素撑高了导致的
+    if (paddingTop > 0 && context.lastTableHeight > 0 && context.lastTableHeight !== rootTableHeight && !isRealScroll) {
+      props.setFakeVirtual(true);
+      context.lastTableHeight = 0;
+    } else {
+      context.lastTableHeight = rootTableHeight;
+    }
+  }, [paddingTop]);
+  if (props.isEmpty) {
+    return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, scrollRoleProps), {}, {
+      children: [/*#__PURE__*/_jsx("div", {
+        style: {
+          width: scrollWidth
+        }
+      }), props.children]
+    }));
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: props.className,
+    style: props.style,
+    children: /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, scrollRoleProps), {}, {
+      children: [/*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, util.getDataAttribute({
+        role: 'scroll-container'
+      })), {}, {
+        style: containerStyle,
+        ref: containerRef,
+        onScroll: handleInnerScroll,
+        children: props.children
+      })), /*#__PURE__*/_jsx("div", {
+        style: placeStyle,
+        children: "\xA0"
+      })]
+    }))
+  });
+};
+export default Scroll;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sheinx/base",
-  "version": "3.7.0-beta.3",
+  "version": "3.7.0-beta.30",
   "description": "",
   "keywords": [],
   "license": "MIT",
@@ -10,7 +10,7 @@
   "module": "./esm/index.js",
   "typings": "./cjs/index.d.ts",
   "dependencies": {
-    "@sheinx/hooks": "3.7.0-beta.3",
+    "@sheinx/hooks": "3.7.0-beta.30",
     "immer": "^10.0.0",
     "classnames": "^2.0.0",
     "@shined/reactive": "^0.1.3-alpha.0"