fix: Tabs tab-cell support "updateLayout" method (#234)

arco-design · Mar 1, 2024 · 1f17383 · 1f17383
1 parent 1cf9c0e
commit 1f17383
Show file tree

Hide file tree

Showing 5 changed files with 234 additions and 26 deletions.
diff --git a/packages/arcodesign/components/tabs/__test__/__snapshots__/index.spec.js.snap b/packages/arcodesign/components/tabs/__test__/__snapshots__/index.spec.js.snap
@@ -717,6 +717,122 @@ exports[`tabs demo test tabs demo: extra.md renders correctly 1`] = `
 </DocumentFragment>
 `;
 
+exports[`tabs demo test tabs demo: resize.md renders correctly 1`] = `
+<DocumentFragment>
+  <button
+    class="arco-button arco-button-type-primary type-primary arco-button-size-large arco-button-size-large-is-semi size-large is-semi pc"
+    type="button"
+  >
+    <div
+      class="arco-button-text arco-button-text-pc btn-text"
+    >
+      点击放大字体
+    </div>
+  </button>
+  <div
+    class="arco-tabs arco-tabs-top arco-tabs-vertical all-border-box"
+  >
+    <div
+      class="arco-tab-cell-container-wrap vertical type-line pc"
+    >
+      <div
+        class="arco-tab-cell-container-inner vertical pos-top type-line pc"
+      >
+        <div
+          class="arco-tab-cell-container vertical pos-top arrange-start type-line"
+        >
+          <div
+            class="arco-tab-cell vertical line pc no-shrink"
+            style="margin-right: 42px; margin-left: 22px;"
+          >
+            Example1
+          </div>
+          <div
+            class="arco-tab-cell vertical line pc no-shrink"
+            style="margin-right: 42px;"
+          >
+            Example2
+          </div>
+          <div
+            class="arco-tab-cell vertical line pc no-shrink"
+            style="margin-right: 42px;"
+          >
+            Example3
+          </div>
+          <div
+            class="arco-tab-cell vertical line pc active no-shrink"
+            style="margin-right: 42px;"
+          >
+            Example4
+          </div>
+          <div
+            class="arco-tab-cell vertical line pc no-shrink"
+            style="margin-right: 42px;"
+          >
+            Example5
+          </div>
+          <div
+            class="arco-tab-cell vertical line pc no-shrink"
+            style="margin-right: 42px;"
+          >
+            Example6
+          </div>
+          <div
+            class="arco-tab-cell vertical line pc no-shrink last"
+          >
+            Example7
+          </div>
+          <div
+            class="fake-padding"
+            style="width: 64px; height: 100%;"
+          />
+          <div
+            class="arco-tab-cell-underline"
+            style="transition-duration: 0ms; transform: translateX(0px);"
+          >
+            <div
+              class="arco-tab-cell-underline-inner vertical"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="arco-tab-pane-container vertical mode-swipe"
+      style="width: 700%; transform: translateX(0px); transition-duration: 0ms;"
+    >
+      <div
+        class="arco-tab-pane mode-swipe"
+      />
+      <div
+        class="arco-tab-pane mode-swipe"
+      />
+      <div
+        class="arco-tab-pane mode-swipe"
+      />
+      <div
+        class="arco-tab-pane mode-swipe"
+      >
+        <div
+          class="demo-tab-content"
+        >
+          Content area
+        </div>
+      </div>
+      <div
+        class="arco-tab-pane mode-swipe"
+      />
+      <div
+        class="arco-tab-pane mode-swipe"
+      />
+      <div
+        class="arco-tab-pane mode-swipe"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`tabs demo test tabs demo: scroll.md renders correctly 1`] = `
 <DocumentFragment>
   <div

diff --git a/packages/arcodesign/components/tabs/__test__/index.spec.js b/packages/arcodesign/components/tabs/__test__/index.spec.js
@@ -166,10 +166,13 @@ describe('Tabs', () => {
         expect(onChange.mock.calls).toHaveLength(1);
         expect(onChange.mock.calls[0]).toEqual([{ title: 'Title 2' }, 1, 'scroll']);
         const onScroll = jest.fn();
-        const { scrollToIndex } = ref.current;
+        const { scrollToIndex, bar } = ref.current;
+        const { updateLayout } = bar || {};
         expect(typeof scrollToIndex).toBe('function');
+        expect(typeof updateLayout).toBe('function');
         // wrapper.setProps({ onScroll });
         scrollToIndex(0);
+        updateLayout();
         // wrapper.update();
         // expect(onScroll.mock.calls).toHaveLength(1);
     });

diff --git a/packages/arcodesign/components/tabs/demo/resize.md b/packages/arcodesign/components/tabs/demo/resize.md
@@ -0,0 +1,68 @@
+## font-size 改变需要重新 rerender tab-cell @en{Font-size changes require rerendering tab-cell}
+
+#### 12
+
+```js
+import { Tabs, Button } from '@arco-design/mobile-react';
+
+const tabData = [
+    { title: 'Example1' },
+    { title: 'Example2' },
+    { title: 'Example3' },
+    { title: 'Example4' },
+    { title: 'Example5' },
+    { title: 'Example6' },
+    { title: 'Example7' },
+];
+
+export default function TabsDemo() {
+    const theRef = React.useRef();
+    const handleClick = () => {
+        if (theRef.current) {
+            var divNodes = theRef.current.bar.dom.getElementsByTagName("div");
+            for (var i = 0; i < divNodes.length; i++) {
+                divNodes[i].setAttribute("style", "font-size: 32px!important;");
+            }
+            setTimeout(() => {
+                theRef.current.bar.updateLayout();
+            }, 20)
+        }
+    }
+    return (
+        <>
+            <Button onClick={handleClick}>点击放大字体</Button>
+            <Tabs
+                ref={theRef}
+                tabs={tabData}
+                tabBarPadding={{ left: 22, right: 64 }}
+                tabBarGutter={42}
+                defaultActiveTab={3}
+                onAfterChange={(tab, index) => {
+                    console.log('[tabs]', tab, index);
+                }}
+                translateZ={false}
+                tabBarHasDivider={false}
+            >
+                <div className="demo-tab-content">Content area</div>
+                <div className="demo-tab-content">Content area</div>
+                <div className="demo-tab-content">Content area</div>
+                <div className="demo-tab-content">Content area</div>
+                <div className="demo-tab-content">Content area</div>
+                <div className="demo-tab-content">Content area</div>
+                <div className="demo-tab-content">Content area</div>
+            </Tabs>
+        </>
+    );
+}
+```
+
+```less
+.demo-tab-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .rem(font-size, 15);
+    .rem(height, 80);
+    .use-var(color, sub-info-font-color);
+}
+```
diff --git a/packages/arcodesign/components/tabs/tab-cell.tsx b/packages/arcodesign/components/tabs/tab-cell.tsx
@@ -73,6 +73,7 @@ const TabCell = forwardRef((props: TabCellProps, ref: Ref<TabCellRef>) => {
     const [originArrange, setOriginArrange] = useState(() =>
         tabs.length < overflowThreshold ? tabBarArrange : 'start',
     );
+    const [forceUpdate, setForceUpdate] = useState<boolean>(false);
     // 默认tab小于overflowThreshold个时不开启加载前隐藏，大于overflowThreshold个时开启
     const [showTab, setShowTab] = useState(() =>
         hideTabBarBeforeMounted === void 0
@@ -93,6 +94,19 @@ const TabCell = forwardRef((props: TabCellProps, ref: Ref<TabCellRef>) => {
 
     const system = useSystem();
 
+    const updateScrollPosition = () => {
+        if (wrapSize && tabBarScrollChance !== 'none') {
+            setTimeout(
+                () => {
+                    scrollToCenter();
+                },
+                tabBarScrollChance === 'after-jump'
+                    ? Math.max(transitionDuration || 0, duration || 0)
+                    : 0,
+            );
+        }
+    };
+
     useEffect(() => {
         nextTick(() => {
             setCellOverflow();
@@ -119,32 +133,16 @@ const TabCell = forwardRef((props: TabCellProps, ref: Ref<TabCellRef>) => {
         tabDirection,
     ]);
 
-    useImperativeHandle(
-        ref,
-        () => ({
-            dom: domRef.current,
-            scrollTo,
-            scrollToCenter,
-            hasOverflow,
-            setCaterpillarAnimate: ratio => underlineRef.current?.setCaterpillarAnimate(ratio),
-            resetUnderlineStyle: () => underlineRef.current?.resetUnderlineStyle(),
-        }),
-        [scrollToCenter, scrollTo, hasOverflow],
-    );
-
     useEffect(() => {
-        if (wrapSize && tabBarScrollChance !== 'none') {
-            setTimeout(
-                () => {
-                    scrollToCenter();
-                },
-                tabBarScrollChance === 'after-jump'
-                    ? Math.max(transitionDuration || 0, duration || 0)
-                    : 0,
-            );
-        }
+        updateScrollPosition();
     }, [activeIndex, wrapSize]);
 
+    useEffect(() => {
+        setCellOverflow();
+        underlineRef.current?.resetUnderlineStyle();
+        updateScrollPosition();
+    }, [forceUpdate]);
+
     useEffect(() => {
         tabBarScrollChance !== 'none' && scrollToCenter(true);
         // TabCell左右可滚动时，防止触发父级touchmove事件导致滚不动
@@ -275,7 +273,7 @@ const TabCell = forwardRef((props: TabCellProps, ref: Ref<TabCellRef>) => {
         return typeof tab === 'string' ? tab : tab.title;
     }
 
-    function renderTabUnderline() {
+    const renderTabUnderline = () => {
         if (!showUnderline || !isLine) {
             return null;
         }
@@ -308,7 +306,7 @@ const TabCell = forwardRef((props: TabCellProps, ref: Ref<TabCellRef>) => {
                 {...lineProps}
             />
         );
-    }
+    };
 
     const cellInner = (
         <>
@@ -360,6 +358,24 @@ const TabCell = forwardRef((props: TabCellProps, ref: Ref<TabCellRef>) => {
         </>
     );
 
+    const updateLayout = () => {
+        setForceUpdate(!forceUpdate);
+    };
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            dom: domRef.current,
+            scrollTo,
+            scrollToCenter,
+            hasOverflow,
+            setCaterpillarAnimate: ratio => underlineRef.current?.setCaterpillarAnimate(ratio),
+            resetUnderlineStyle: () => underlineRef.current?.resetUnderlineStyle(),
+            updateLayout: () => updateLayout(),
+        }),
+        [scrollToCenter, scrollTo, hasOverflow],
+    );
+
     return (
         <div
             className={cls(

diff --git a/packages/arcodesign/components/tabs/type.ts b/packages/arcodesign/components/tabs/type.ts
@@ -617,6 +617,11 @@ export interface TabCellRef {
      * @en Recalculate underline style
      */
     resetUnderlineStyle: () => void;
+    /**
+     * 强制更新 tab-cell
+     * @en Force update tab-cell
+     */
+    updateLayout: () => void;
 }
 
 export interface TabPaneProps