feat: cr问题修改&增加demo&补齐单测

arco-design · Feb 27, 2024 · 9a742b7 · 9a742b7
1 parent 4adcc56
commit 9a742b7
Show file tree

Hide file tree

Showing 5 changed files with 194 additions and 14 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,112 @@ exports[`tabs demo test tabs demo: extra.md renders correctly 1`] = `
 </DocumentFragment>
 `;
 
+exports[`tabs demo test tabs demo: resize.md renders correctly 1`] = `
+<DocumentFragment>
+  <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,67 @@
+## font-size 改变需要重新 rerender tab-cell @en{Font-size changes require rerendering tab-cell}
+
+#### 12
+
+```js
+import { Tabs } 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();
+    React.useEffect(() => {
+        setTimeout(() => {
+            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();
+                }, 1000)
+            }
+        }, 1000)
+    }, [])
+    return (
+        <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
@@ -94,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();
@@ -121,16 +134,7 @@ const TabCell = forwardRef((props: TabCellProps, ref: Ref<TabCellRef>) => {
     ]);
 
     useEffect(() => {
-        if (wrapSize && tabBarScrollChance !== 'none') {
-            setTimeout(
-                () => {
-                    scrollToCenter();
-                },
-                tabBarScrollChance === 'after-jump'
-                    ? Math.max(transitionDuration || 0, duration || 0)
-                    : 0,
-            );
-        }
+        updateScrollPosition();
     }, [activeIndex, wrapSize, forceUpdate]);
 
     useEffect(() => {
@@ -348,7 +352,7 @@ const TabCell = forwardRef((props: TabCellProps, ref: Ref<TabCellRef>) => {
         </>
     );
 
-    const updateForce = () => {
+    const updateLayout = () => {
         setForceUpdate(!forceUpdate);
         underlineRef.current?.resetUnderlineStyle();
     };
@@ -362,7 +366,7 @@ const TabCell = forwardRef((props: TabCellProps, ref: Ref<TabCellRef>) => {
             hasOverflow,
             setCaterpillarAnimate: ratio => underlineRef.current?.setCaterpillarAnimate(ratio),
             resetUnderlineStyle: () => underlineRef.current?.resetUnderlineStyle(),
-            updateForce: () => updateForce(),
+            updateLayout: () => updateLayout(),
         }),
         [scrollToCenter, scrollTo, hasOverflow],
     );

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