@sheinx/base 3.7.0-beta.2 → 3.7.0-beta.21

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

@@ -0,0 +1,149 @@
+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, { useMemo, 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({
+      timer: null,
+      isMouseDown: false
+    }),
+    context = _useRef.current;
+  // TODO: keepScrollTop考虑做成Table的新feat?
+  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,
+    _props$keepScrollTop = props.keepScrollTop,
+    keepScrollTop = _props$keepScrollTop === void 0 ? false : _props$keepScrollTop;
+  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
+  };
+
+  // 当滚动容器的高度为 0 时，paddingTop 为 0，避免滚动条抖动现象
+  var paddingTop = useMemo(function () {
+    if (keepScrollTop) return Math.max(0, Math.floor(scrollHeight - height));
+    return height === 0 ? 0 : Math.max(0, Math.floor(scrollHeight - height));
+  }, [scrollHeight, height]);
+  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;
+    }
+  });
+  return /*#__PURE__*/_jsx("div", {
+    className: props.className,
+    style: props.style,
+    children: /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, util.getDataAttribute({
+      role: 'scroll'
+    })), {}, {
+      style: scrollerStyle,
+      onScroll: handleScroll,
+      ref: wrapperRef,
+      onMouseDown: function onMouseDown() {
+        context.isMouseDown = true;
+      },
+      onMouseUp: function onMouseUp() {
+        context.isMouseDown = false;
+      },
+      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/esm/virtual-scroll/scroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["scroll.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C,UAAU,WAAW;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAChB,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,CAAC;QAClB,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,QAAQ,EAAE,OAAO,CAAC;QAClB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,IAAI,CAAC;IACX,gBAAgB,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,MAAM,UAAW,WAAW,4CAkIjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["scroll.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C,UAAU,WAAW;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAChB,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,CAAC;QAClB,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,QAAQ,EAAE,OAAO,CAAC;QAClB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,IAAI,CAAC;IACX,gBAAgB,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,MAAM,UAAW,WAAW,4CAgIjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/esm/virtual-scroll/scroll.js

@@ -40,13 +40,13 @@ var Scroll = function Scroll(props) {
     width: '100%',
     overflow: 'auto'
   };
-  var containerStyle = _defineProperty(_defineProperty({
+  var containerStyle = {
     height: '100%',
     width: '100%',
     display: 'inline-flex',
-    overflow: 'hidden',
-    position: 'sticky'
-  }, isRtl ? 'right' : 'left', 0), "top", 0);
+    position: 'sticky',
+    top: 0
+  };
 
   // 当滚动容器的高度为 0 时，paddingTop 为 0，避免滚动条抖动现象
   var paddingTop = useMemo(function () {

package/package.json

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