fix: Tabs scroll offset in ssr when defaultActiveTab is greater than 0

.gitignore

@@ -19,6 +19,7 @@ output_resource/
 .history
 *.func-info.json
 *.mixin-info.json
+.npmrc
 
 # Emacs
 *~

packages/arcodesign/components/index.ts

@@ -1,12 +1,13 @@
 export { default as Tabs } from './tabs';
 export { default as Sticky } from './sticky';
-export { default as LoadMore } from './load-more';
-export { default as Cell } from './cell';
+export { default as Portal } from './portal';
+export { default as Toast } from './toast';
 export { default as ActionSheet } from './action-sheet';
 export { default as Avatar } from './avatar';
 export { default as Badge } from './badge';
 export { default as Button } from './button';
 export { default as Carousel } from './carousel';
+export { default as Cell } from './cell';
 export { default as Checkbox } from './checkbox';
 export { default as CircleProgress } from './circle-progress';
 export { default as Collapse } from './collapse';
@@ -26,6 +27,7 @@ export { default as ImagePreview } from './image-preview';
 export { default as IndexBar } from './index-bar';
 export { default as Input } from './input';
 export { default as Keyboard } from './keyboard';
+export { default as LoadMore } from './load-more';
 export { default as Loading } from './loading';
 export { default as Masking } from './masking';
 export { default as NavBar } from './nav-bar';
@@ -37,14 +39,13 @@ export { default as PickerView } from './picker-view';
 export { default as Popover } from './popover';
 export { default as Popup } from './popup';
 export { default as PopupSwiper } from './popup-swiper';
-export { default as Portal } from './portal';
 export { default as Progress } from './progress';
 export { default as PullRefresh } from './pull-refresh';
 export { default as Radio } from './radio';
 export { default as Rate } from './rate';
 export { default as SearchBar } from './search-bar';
-export { default as Skeleton } from './skeleton';
 export { default as ShowMonitor } from './show-monitor';
+export { default as Skeleton } from './skeleton';
 export { default as Slider } from './slider';
 export { default as Stepper } from './stepper';
 export { default as Steps } from './steps';
@@ -54,5 +55,4 @@ export { default as Switch } from './switch';
 export { default as TabBar } from './tab-bar';
 export { default as Tag } from './tag';
 export { default as Textarea } from './textarea';
-export { default as Toast } from './toast';
 export { default as Transition } from './transition';

packages/arcodesign/components/style.ts

@@ -1,13 +1,14 @@
 import '../style/public.less';
 import './tabs/style';
 import './sticky/style';
-import './load-more/style';
-import './cell/style';
+import './portal/style';
+import './toast/style';
 import './action-sheet/style';
 import './avatar/style';
 import './badge/style';
 import './button/style';
 import './carousel/style';
+import './cell/style';
 import './checkbox/style';
 import './circle-progress/style';
 import './collapse/style';
@@ -27,6 +28,7 @@ import './image-preview/style';
 import './index-bar/style';
 import './input/style';
 import './keyboard/style';
+import './load-more/style';
 import './loading/style';
 import './masking/style';
 import './nav-bar/style';
@@ -38,14 +40,13 @@ import './picker-view/style';
 import './popover/style';
 import './popup/style';
 import './popup-swiper/style';
-import './portal/style';
 import './progress/style';
 import './pull-refresh/style';
 import './radio/style';
 import './rate/style';
 import './search-bar/style';
-import './skeleton/style';
 import './show-monitor/style';
+import './skeleton/style';
 import './slider/style';
 import './stepper/style';
 import './steps/style';
@@ -55,5 +56,4 @@ import './switch/style';
 import './tab-bar/style';
 import './tag/style';
 import './textarea/style';
-import './toast/style';
 import './transition/style';

packages/arcodesign/components/tabs/tab-pane.tsx

@@ -9,7 +9,7 @@ import React, {
     useMemo,
 } from 'react';
 import lodashThrottle from 'lodash.throttle';
-import { cls, scrollWithAnimation, getScrollContainerRect } from '@arco-design/mobile-utils';
+import { cls, scrollWithAnimation, getScrollContainerRect, isSSR } from '@arco-design/mobile-utils';
 import { getStyleWithVendor } from '../_helpers';
 import { TabPaneProps, TabPaneRef } from './type';
 
@@ -220,19 +220,24 @@ const TabPane = forwardRef((props: TabPaneProps, ref: Ref<TabPaneRef>) => {
             return commonStyle;
         }
         const translateStr = translateZ ? ' translateZ(0)' : '';
+        const translatePercentInSSR = `${
+            (panes.length ? 100 / panes.length : 0) * activeIndex * rtlRatio * -1
+        }%`;
+        const verticalTranslate = `${distance - wrapWidth * activeIndex * rtlRatio}px`;
+        const horizontalTranslate = `${distance - wrapHeight * activeIndex}px`;
         const sizeStyle =
             tabDirection === 'vertical'
                 ? {
                       width: `${100 * panes.length}%`,
                       transform: `translateX(${
-                          distance - wrapWidth * activeIndex * rtlRatio
-                      }px)${translateStr}`,
+                          isSSR() ? translatePercentInSSR : verticalTranslate
+                      })${translateStr}`,
                   }
                 : {
                       height: `${100 * panes.length}%`,
                       transform: `translateY(${
-                          distance - wrapHeight * activeIndex
-                      }px)${translateStr}`,
+                          isSSR() ? translatePercentInSSR : horizontalTranslate
+                      })${translateStr}`,
                   };
         const heightStyle =
             currentPaneHeight && currentPaneHeight !== 'auto'

packages/common-widgets/utils/browser.ts

@@ -55,3 +55,7 @@ export function isIPhoneX() {
         return false;
     }
 }
+
+export function isSSR() {
+    return typeof window === 'undefined';
+}