{
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
new file mode 100644
index 00000000..3bf2af2a
--- /dev/null
+++ 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 (
+ <>
+
+
{
+ console.log('[tabs]', tab, index);
+ }}
+ translateZ={false}
+ tabBarHasDivider={false}
+ >
+ Content area
+ Content area
+ Content area
+ Content area
+ Content area
+ Content area
+ Content area
+
+
+ );
+}
+```
+
+```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
index e063d824..c6907e13 100644
--- 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
) => {
const [originArrange, setOriginArrange] = useState(() =>
tabs.length < overflowThreshold ? tabBarArrange : 'start',
);
+ const [forceUpdate, setForceUpdate] = useState(false);
// 默认tab小于overflowThreshold个时不开启加载前隐藏，大于overflowThreshold个时开启
const [showTab, setShowTab] = useState(() =>
hideTabBarBeforeMounted === void 0
@@ -93,6 +94,19 @@ const TabCell = forwardRef((props: TabCellProps, ref: Ref) => {
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) => {
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) => {
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) => {
{...lineProps}
/>
);
- }
+ };
const cellInner = (
<>
@@ -360,6 +358,24 @@ const TabCell = forwardRef((props: TabCellProps, ref: Ref) => {
);
+ 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 (
void;
+ /**
+ * 强制更新 tab-cell
+ * @en Force update tab-cell
+ */
+ updateLayout: () => void;
}
export interface TabPaneProps