tdesign-react 0.32.0 → 0.32.2-alpha.2

package/dist/tdesign.js

@@ -1,5 +1,5 @@
 /**
- * tdesign v0.32.0
+ * tdesign v0.32.2-alpha.2
  * (c) 2022 tdesign
  * @license MIT
  */
@@ -9520,7 +9520,8 @@
         zIndex = props.zIndex,
         onVisibleChange = props.onVisibleChange,
         _onScroll = props.onScroll,
-        expandAnimation = props.expandAnimation;
+        expandAnimation = props.expandAnimation,
+        updateScrollTop = props.updateScrollTop;
 
     var _useConfig = useConfig$1(),
         classPrefix = _useConfig.classPrefix;
@@ -9648,6 +9649,11 @@
 
       (_popperRef$current$up2 = (_popperRef$current3 = popperRef.current).update) === null || _popperRef$current$up2 === void 0 ? void 0 : _popperRef$current$up2.call(_popperRef$current3);
     }, [content, visible, windowHeight, windowWidth]);
+    React.useEffect(function () {
+      if (visible && overlayRef) {
+        updateScrollTop === null || updateScrollTop === void 0 ? void 0 : updateScrollTop(contentRef === null || contentRef === void 0 ? void 0 : contentRef.current);
+      }
+    }, [visible, overlayRef, updateScrollTop]);
     var portal = visible || overlayRef ? /* @__PURE__ */React__default["default"].createElement(CSSTransition$1, {
       appear: true,
       "in": visible,
@@ -16144,8 +16150,10 @@
           var obj = initialColumnMap.get(colKey || j);
 
           if (obj !== null && obj !== void 0 && (_obj$col = obj.col) !== null && _obj$col !== void 0 && _obj$col.fixed) {
+            var _th$getBoundingClient;
+
             initialColumnMap.set(colKey, _objectSpread$1t(_objectSpread$1t({}, obj), {}, {
-              width: th.getBoundingClientRect().width
+              width: th === null || th === void 0 ? void 0 : (_th$getBoundingClient = th.getBoundingClientRect) === null || _th$getBoundingClient === void 0 ? void 0 : _th$getBoundingClient.call(th).width
             }));
           }
         }
@@ -16166,6 +16174,8 @@
           rowKey = _props$rowKey === void 0 ? "id" : _props$rowKey;
 
       for (var i = 0; i < fixedTopRows; i++) {
+        var _tr$getBoundingClient;
+
         var tr = trList[i];
         var rowId = get_1(data2[i], rowKey);
         var thisRowInfo = initialColumnMap.get(rowId) || {};
@@ -16174,16 +16184,20 @@
         var defaultBottom = 0;
 
         if (i === 0) {
-          defaultBottom = (thead === null || thead === void 0 ? void 0 : thead.getBoundingClientRect().height) || 0;
+          var _thead$getBoundingCli;
+
+          defaultBottom = (thead === null || thead === void 0 ? void 0 : (_thead$getBoundingCli = thead.getBoundingClientRect) === null || _thead$getBoundingCli === void 0 ? void 0 : _thead$getBoundingCli.call(thead).height) || 0;
         }
 
         thisRowInfo.top = (lastRowInfo.top || defaultBottom) + (lastRowInfo.height || 0);
         initialColumnMap.set(rowId, _objectSpread$1t(_objectSpread$1t({}, thisRowInfo), {}, {
-          height: tr.getBoundingClientRect().height
+          height: tr === null || tr === void 0 ? void 0 : (_tr$getBoundingClient = tr.getBoundingClientRect) === null || _tr$getBoundingClient === void 0 ? void 0 : _tr$getBoundingClient.call(tr).height
         }));
       }
 
       for (var _i = data2.length - 1; _i >= data2.length - fixedBottomRows; _i--) {
+        var _tr$getBoundingClient2;
+
         var _tr = trList[_i];
 
         var _rowId = get_1(data2[_i], rowKey);
@@ -16197,12 +16211,14 @@
         var _defaultBottom = 0;
 
         if (_i === data2.length - 1) {
-          _defaultBottom = (tfoot === null || tfoot === void 0 ? void 0 : tfoot.getBoundingClientRect().height) || 0;
+          var _tfoot$getBoundingCli;
+
+          _defaultBottom = (tfoot === null || tfoot === void 0 ? void 0 : (_tfoot$getBoundingCli = tfoot.getBoundingClientRect) === null || _tfoot$getBoundingCli === void 0 ? void 0 : _tfoot$getBoundingCli.call(tfoot).height) || 0;
         }
 
         _thisRowInfo.bottom = (_lastRowInfo.bottom || _defaultBottom) + (_lastRowInfo.height || 0);
         initialColumnMap.set(_rowId, _objectSpread$1t(_objectSpread$1t({}, _thisRowInfo), {}, {
-          height: _tr.getBoundingClientRect().height
+          height: _tr === null || _tr === void 0 ? void 0 : (_tr$getBoundingClient2 = _tr.getBoundingClientRect) === null || _tr$getBoundingClient2 === void 0 ? void 0 : _tr$getBoundingClient2.call(_tr).height
         }));
       }
     };
@@ -16306,14 +16322,16 @@
 
     var updateFixedHeader = function updateFixedHeader() {
       var timer = setTimeout(function () {
+        var _tRef$getBoundingClie;
+
         var tRef = tableContentRef === null || tableContentRef === void 0 ? void 0 : tableContentRef.current;
         if (!tRef) return;
         setIsFixedHeader(tRef.scrollHeight > tRef.clientHeight);
         setIsWidthOverflow(tRef.scrollWidth > tRef.clientWidth);
-        var pos = tRef.getBoundingClientRect();
+        var pos = tRef === null || tRef === void 0 ? void 0 : (_tRef$getBoundingClie = tRef.getBoundingClientRect) === null || _tRef$getBoundingClie === void 0 ? void 0 : _tRef$getBoundingClie.call(tRef);
         setVirtualScrollHeaderPos({
-          top: pos.top,
-          left: pos.left
+          top: pos === null || pos === void 0 ? void 0 : pos.top,
+          left: pos === null || pos === void 0 ? void 0 : pos.left
         });
         clearTimeout(timer);
       }, 0);
@@ -16330,10 +16348,12 @@
     };
 
     var updateTableWidth = function updateTableWidth() {
-      var rect = tableContentRef.current.getBoundingClientRect();
+      var _tableContentRef$curr, _tableContentRef$curr2;
+
+      var rect = (_tableContentRef$curr = tableContentRef.current) === null || _tableContentRef$curr === void 0 ? void 0 : (_tableContentRef$curr2 = _tableContentRef$curr.getBoundingClientRect) === null || _tableContentRef$curr2 === void 0 ? void 0 : _tableContentRef$curr2.call(_tableContentRef$curr);
       var reduceWidth = isFixedHeader ? scrollbarWidth : 0;
       var fixedBordered = isFixedRightColumn ? 1 : 2;
-      setTableWidth(rect.width - reduceWidth - (props.bordered ? fixedBordered : 0));
+      setTableWidth((rect === null || rect === void 0 ? void 0 : rect.width) - reduceWidth - (props.bordered ? fixedBordered : 0));
     };
 
     var updateThWidthList = function updateThWidthList(trList) {
@@ -16343,9 +16363,11 @@
         var thList = trList[i].children;
 
         for (var j = 0, thLen = thList.length; j < thLen; j++) {
+          var _th$getBoundingClient2;
+
           var th = thList[j];
           var colKey = th.dataset.colkey;
-          widthMap[colKey] = th.getBoundingClientRect().width;
+          widthMap[colKey] = th === null || th === void 0 ? void 0 : (_th$getBoundingClient2 = th.getBoundingClientRect) === null || _th$getBoundingClient2 === void 0 ? void 0 : _th$getBoundingClient2.call(th).width;
         }
       }
 
@@ -16369,10 +16391,10 @@
     };
 
     var onDocumentScroll = function onDocumentScroll() {
-      var _affixHeaderRef$curre;
+      var _tableContentRef$curr3, _tableContentRef$curr4, _affixHeaderRef$curre;
 
-      var pos = tableContentRef.current.getBoundingClientRect();
-      var r = ((_affixHeaderRef$curre = affixHeaderRef.current) === null || _affixHeaderRef$curre === void 0 ? void 0 : _affixHeaderRef$curre.offsetHeight) - pos.top < pos.height;
+      var pos = (_tableContentRef$curr3 = tableContentRef.current) === null || _tableContentRef$curr3 === void 0 ? void 0 : (_tableContentRef$curr4 = _tableContentRef$curr3.getBoundingClientRect) === null || _tableContentRef$curr4 === void 0 ? void 0 : _tableContentRef$curr4.call(_tableContentRef$curr3);
+      var r = ((_affixHeaderRef$curre = affixHeaderRef.current) === null || _affixHeaderRef$curre === void 0 ? void 0 : _affixHeaderRef$curre.offsetHeight) - (pos === null || pos === void 0 ? void 0 : pos.top) < (pos === null || pos === void 0 ? void 0 : pos.height);
       setShowAffixHeader(r);
     };
 
@@ -28277,7 +28299,8 @@
       onVisibleChange: onInnerPopupVisibleChange
     }, visibleProps), popupProps), {}, {
       disabled: disabled,
-      overlayStyle: tOverlayStyle
+      overlayStyle: tOverlayStyle,
+      updateScrollTop: props.updateScrollTop
     }), multiple ? renderSelectMultiple({
       commonInputProps: commonInputProps,
       onInnerClear: onInnerClear,
@@ -28300,8 +28323,7 @@
   function ownKeys$1d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
   function _objectSpread$1c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1d(Object(source), !0).forEach(function (key) { _defineProperty$3(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-  var PopupContent = function PopupContent(props) {
+  var PopupContent = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var _classNames;
 
     var onChange = props.onChange,
@@ -28424,13 +28446,14 @@
 
     var isEmpty = Array.isArray(childrenWithProps) && !childrenWithProps.length || options && options.length === 0;
     return /* @__PURE__ */React__default["default"].createElement("div", {
+      ref: ref,
       className: classNames$1("".concat(classPrefix, "-select__dropdown-inner"), (_classNames = {}, _defineProperty$3(_classNames, "".concat(classPrefix, "-select__dropdown-inner--size-s"), size === "small"), _defineProperty$3(_classNames, "".concat(classPrefix, "-select__dropdown-inner--size-l"), size === "large"), _defineProperty$3(_classNames, "".concat(classPrefix, "-select__dropdown-inner--size-m"), size === "medium"), _classNames))
     }, panelTopContent, isEmpty && /* @__PURE__ */React__default["default"].createElement("div", {
       className: "".concat(classPrefix, "-select__empty")
     }, empty ? empty : /* @__PURE__ */React__default["default"].createElement("p", null, emptyText)), !isEmpty && loading && /* @__PURE__ */React__default["default"].createElement("div", {
       className: "".concat(classPrefix, "-select__loading-tips")
     }, loadingText), !isEmpty && !loading && renderOptions(), panelBottomContent);
-  };
+  });
 
   var _excluded$h = ["overlayClassName"];
 
@@ -28497,6 +28520,7 @@
         selectInputProps = props.selectInputProps,
         tagInputProps = props.tagInputProps,
         tagProps = props.tagProps;
+    var selectPopupRef = React.useRef();
 
     var _useDefault = useDefault(props.value, props.defaultValue, props.onChange),
         _useDefault2 = _slicedToArray(_useDefault, 2),
@@ -28760,7 +28784,9 @@
         panelBottomContent: panelBottomContent,
         panelTopContent: panelTopContent
       };
-      return /* @__PURE__ */React__default["default"].createElement(PopupContent, _objectSpread$1b({}, popupContentProps), children);
+      return /* @__PURE__ */React__default["default"].createElement(PopupContent, _objectSpread$1b(_objectSpread$1b({}, popupContentProps), {}, {
+        ref: selectPopupRef
+      }), children);
     };
 
     var renderValueDisplay = function renderValueDisplay() {
@@ -28795,6 +28821,25 @@
         });
       } : null;
     }, [selectedLabel, collapsedItems, minCollapsedNum]);
+    var updateScrollTop = React.useCallback(function (content) {
+      if (!(selectPopupRef !== null && selectPopupRef !== void 0 && selectPopupRef.current)) {
+        return;
+      }
+
+      var firstSelectedNode = (selectPopupRef === null || selectPopupRef === void 0 ? void 0 : selectPopupRef.current).querySelector(".".concat(classPrefix, "-is-selected"));
+
+      if (firstSelectedNode && content) {
+        var _getComputedStyle = getComputedStyle(firstSelectedNode),
+            paddingBottom = _getComputedStyle.paddingBottom;
+
+        var _getComputedStyle2 = getComputedStyle(content),
+            marginBottom = _getComputedStyle2.marginBottom;
+
+        var elementBottomHeight = parseInt(paddingBottom, 10) + parseInt(marginBottom, 10);
+        var updateValue = firstSelectedNode.offsetTop - content.offsetTop - (content.clientHeight - firstSelectedNode.clientHeight) + elementBottomHeight;
+        content.scrollTop = updateValue;
+      }
+    }, [classPrefix]);
     return /* @__PURE__ */React__default["default"].createElement("div", {
       className: classNames$1("".concat(name, "__wrap"), className),
       style: style
@@ -28834,7 +28879,8 @@
       onBlur: onBlur,
       onClear: function onClear(context) {
         onClearValue(context);
-      }
+      },
+      updateScrollTop: updateScrollTop
     }, selectInputProps)));
   }, {
     displayName: "Select",