@hi-ui/tabs 4.0.0-beta.18 → 4.0.0-beta.19

package/lib/cjs/TabList.js

@@ -35,6 +35,8 @@ var typeAssertion = require('@hi-ui/type-assertion');
 
 var iconButton = require('@hi-ui/icon-button');
 
+var index = require('./hooks/index.js');
+
 function _interopDefaultLegacy(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -103,12 +105,39 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       setTranslateY = _useState4[1];
 
   var itemsRef = React.useRef({});
-  var showScrollBtn = false;
 
-  if (scrollRef && innerRef) {
-    showScrollBtn = direction === 'horizontal' ? scrollRef.clientWidth > innerRef.clientWidth : scrollRef.clientHeight > innerRef.clientHeight;
-  }
+  var _useState5 = React.useState(false),
+      showScrollBtn = _useState5[0],
+      setShowScrollBtn = _useState5[1];
+
+  var showHorizontal = direction === 'horizontal'; // 响应式滚动按钮展示
 
+  index.useResizeObserver({
+    element: innerRef,
+    getSize: function getSize(element) {
+      return showHorizontal ? element.clientWidth : element.clientHeight;
+    },
+    onResize: function onResize(_, size) {
+      if (scrollRef) {
+        var _showScrollBtn = showHorizontal ? scrollRef.clientWidth > size : scrollRef.clientHeight > size;
+
+        setShowScrollBtn(_showScrollBtn);
+      }
+    }
+  });
+  index.useResizeObserver({
+    element: scrollRef,
+    getSize: function getSize(element) {
+      return showHorizontal ? element.clientWidth : element.clientHeight;
+    },
+    onResize: function onResize(_, size) {
+      if (innerRef) {
+        var _showScrollBtn2 = showHorizontal ? size > innerRef.clientWidth : size > innerRef.clientHeight;
+
+        setShowScrollBtn(_showScrollBtn2);
+      }
+    }
+  });
   var onClickTab = React.useCallback(function (key, event) {
     if (onTabClick) {
       onTabClick(key, event);

package/lib/cjs/hooks/index.js

@@ -0,0 +1,55 @@
+/** @LICENSE
+ * @hi-ui/tabs
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/tabs#readme
+ *
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var React = require('react');
+
+var useLatest = require('@hi-ui/use-latest');
+
+var useResizeObserver = function useResizeObserver(_ref) {
+  var element = _ref.element,
+      onResize = _ref.onResize,
+      _ref$initialSize = _ref.initialSize,
+      initialSize = _ref$initialSize === void 0 ? 0 : _ref$initialSize,
+      getSize = _ref.getSize;
+  var getSizeLatestRef = useLatest.useLatestRef(getSize);
+  var onResizeLatest = useLatest.useLatestCallback(onResize);
+  var prevSizeRef = React.useRef(initialSize);
+  React.useEffect(function () {
+    if (element) {
+      var _resizeObserver = new ResizeObserver(function () {
+        var getSize = getSizeLatestRef.current;
+
+        if (element) {
+          if (getSize) {
+            var nextSize = getSize(element);
+
+            if (prevSizeRef.current !== nextSize) {
+              prevSizeRef.current = nextSize;
+              onResizeLatest(element, nextSize);
+            }
+          } else {
+            onResizeLatest(element);
+          }
+        }
+      });
+
+      _resizeObserver.observe(element);
+    }
+
+    return function () {};
+  }, [element, getSizeLatestRef, onResizeLatest]);
+};
+
+exports.useResizeObserver = useResizeObserver;

package/lib/esm/TabList.js

@@ -17,6 +17,7 @@ import { TabInk } from './TabInk.js';
 import { LeftOutlined, UpOutlined, RightOutlined, DownOutlined, PlusOutlined } from '@hi-ui/icons';
 import { isUndef } from '@hi-ui/type-assertion';
 import { IconButton } from '@hi-ui/icon-button';
+import { useResizeObserver } from './hooks/index.js';
 var _role = 'tabs';
 
 var _prefix = getPrefixCls(_role);
@@ -77,12 +78,39 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
       setTranslateY = _useState4[1];
 
   var itemsRef = useRef({});
-  var showScrollBtn = false;
 
-  if (scrollRef && innerRef) {
-    showScrollBtn = direction === 'horizontal' ? scrollRef.clientWidth > innerRef.clientWidth : scrollRef.clientHeight > innerRef.clientHeight;
-  }
+  var _useState5 = useState(false),
+      showScrollBtn = _useState5[0],
+      setShowScrollBtn = _useState5[1];
 
+  var showHorizontal = direction === 'horizontal'; // 响应式滚动按钮展示
+
+  useResizeObserver({
+    element: innerRef,
+    getSize: function getSize(element) {
+      return showHorizontal ? element.clientWidth : element.clientHeight;
+    },
+    onResize: function onResize(_, size) {
+      if (scrollRef) {
+        var _showScrollBtn = showHorizontal ? scrollRef.clientWidth > size : scrollRef.clientHeight > size;
+
+        setShowScrollBtn(_showScrollBtn);
+      }
+    }
+  });
+  useResizeObserver({
+    element: scrollRef,
+    getSize: function getSize(element) {
+      return showHorizontal ? element.clientWidth : element.clientHeight;
+    },
+    onResize: function onResize(_, size) {
+      if (innerRef) {
+        var _showScrollBtn2 = showHorizontal ? size > innerRef.clientWidth : size > innerRef.clientHeight;
+
+        setShowScrollBtn(_showScrollBtn2);
+      }
+    }
+  });
   var onClickTab = useCallback(function (key, event) {
     if (onTabClick) {
       onTabClick(key, event);

package/lib/esm/hooks/index.js

@@ -0,0 +1,48 @@
+/** @LICENSE
+ * @hi-ui/tabs
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/tabs#readme
+ *
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { useRef, useEffect } from 'react';
+import { useLatestRef, useLatestCallback } from '@hi-ui/use-latest';
+
+var useResizeObserver = function useResizeObserver(_ref) {
+  var element = _ref.element,
+      onResize = _ref.onResize,
+      _ref$initialSize = _ref.initialSize,
+      initialSize = _ref$initialSize === void 0 ? 0 : _ref$initialSize,
+      getSize = _ref.getSize;
+  var getSizeLatestRef = useLatestRef(getSize);
+  var onResizeLatest = useLatestCallback(onResize);
+  var prevSizeRef = useRef(initialSize);
+  useEffect(function () {
+    if (element) {
+      var _resizeObserver = new ResizeObserver(function () {
+        var getSize = getSizeLatestRef.current;
+
+        if (element) {
+          if (getSize) {
+            var nextSize = getSize(element);
+
+            if (prevSizeRef.current !== nextSize) {
+              prevSizeRef.current = nextSize;
+              onResizeLatest(element, nextSize);
+            }
+          } else {
+            onResizeLatest(element);
+          }
+        }
+      });
+
+      _resizeObserver.observe(element);
+    }
+
+    return function () {};
+  }, [element, getSizeLatestRef, onResizeLatest]);
+};
+
+export { useResizeObserver };

package/lib/types/hooks/index.d.ts

@@ -0,0 +1,8 @@
+interface UseResizeObserverProps {
+    element: HTMLElement | null;
+    onResize: (element: HTMLElement, size?: any) => void;
+    initialSize?: any;
+    getSize?: (element: HTMLElement) => any;
+}
+export declare const useResizeObserver: ({ element, onResize, initialSize, getSize, }: UseResizeObserverProps) => void;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/tabs",
-  "version": "4.0.0-beta.18",
+  "version": "4.0.0-beta.19",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -50,6 +50,7 @@
     "@hi-ui/icon-button": "^4.0.0-beta.10",
     "@hi-ui/icons": "^4.0.0-beta.11",
     "@hi-ui/type-assertion": "^4.0.0-beta.5",
+    "@hi-ui/use-latest": "^4.0.0-beta.5",
     "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.5"
   },
   "peerDependencies": {
@@ -61,5 +62,5 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
-  "gitHead": "ef96654e009a72c3445d8df4a4182973631d00e9"
+  "gitHead": "9956956831546dfe051b56cf8330912a772fa86f"
 }