@momo-kits/tab-view 0.167.1-beta.10 → 0.167.1-beta.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.tsx +1 -2
- package/package.json +1 -1
- package/tabBar/CardTabBar.tsx +12 -28
- package/tabItem/TabItem.tsx +4 -3
package/index.tsx
CHANGED
|
@@ -43,8 +43,7 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
|
|
|
43
43
|
},
|
|
44
44
|
ref,
|
|
45
45
|
) => {
|
|
46
|
-
const startPage =
|
|
47
|
-
initialPage > tabs.length - 1 ? tabs.length - 1 : initialPage;
|
|
46
|
+
const startPage = Math.min(initialPage, tabs.length - 1);
|
|
48
47
|
const [selectedIndex, setSelectedIndex] = useState(startPage);
|
|
49
48
|
const [tabBarWidth, setTabBarWidth] = useState(0);
|
|
50
49
|
const isCardTab = type === 'card';
|
package/package.json
CHANGED
package/tabBar/CardTabBar.tsx
CHANGED
|
@@ -31,6 +31,15 @@ const CardTabBar: FC<TabBarProps> = ({
|
|
|
31
31
|
const pathWidth = tabs.length > 2 ? 22 : 28;
|
|
32
32
|
const backSpace = isFirst ? 0 : pathWidth;
|
|
33
33
|
const isWeb = Platform.OS === 'web';
|
|
34
|
+
const overlayLeft = itemWidth * selectedIndex;
|
|
35
|
+
const pathInset = isWeb ? 8 - pathWidth : 8;
|
|
36
|
+
const pathPosition = isWeb ? { position: 'absolute' as const, top: 0 } : {};
|
|
37
|
+
const leftPathStyle = {
|
|
38
|
+
...pathPosition,
|
|
39
|
+
left: pathInset,
|
|
40
|
+
transform: [{ rotateY: '180deg' }],
|
|
41
|
+
};
|
|
42
|
+
const rightPathStyle = { ...pathPosition, right: pathInset };
|
|
34
43
|
|
|
35
44
|
const renderIconTabBar = () => {
|
|
36
45
|
return (
|
|
@@ -80,26 +89,10 @@ const CardTabBar: FC<TabBarProps> = ({
|
|
|
80
89
|
Platform.OS === 'ios' && Shadow.Light,
|
|
81
90
|
{
|
|
82
91
|
width: containerWidth / tabs.length,
|
|
83
|
-
left: isWeb
|
|
84
|
-
? itemWidth * selectedIndex
|
|
85
|
-
: itemWidth * selectedIndex - backSpace,
|
|
92
|
+
left: isWeb ? overlayLeft : overlayLeft - backSpace,
|
|
86
93
|
},
|
|
87
94
|
]}>
|
|
88
|
-
{!isFirst &&
|
|
89
|
-
<PathSvg
|
|
90
|
-
style={
|
|
91
|
-
isWeb
|
|
92
|
-
? {
|
|
93
|
-
position: 'absolute',
|
|
94
|
-
left: 8 - pathWidth,
|
|
95
|
-
top: 0,
|
|
96
|
-
transform: [{rotateY: '180deg'}],
|
|
97
|
-
}
|
|
98
|
-
: {transform: [{rotateY: '180deg'}], left: 8}
|
|
99
|
-
}
|
|
100
|
-
pathWidth={pathWidth}
|
|
101
|
-
/>
|
|
102
|
-
)}
|
|
95
|
+
{!isFirst && <PathSvg style={leftPathStyle} pathWidth={pathWidth} />}
|
|
103
96
|
<View
|
|
104
97
|
accessibilityLabel={
|
|
105
98
|
accessibilityLabelForSelectedCard ??
|
|
@@ -140,16 +133,7 @@ const CardTabBar: FC<TabBarProps> = ({
|
|
|
140
133
|
</View>
|
|
141
134
|
)}
|
|
142
135
|
</View>
|
|
143
|
-
{!isLast &&
|
|
144
|
-
<PathSvg
|
|
145
|
-
style={
|
|
146
|
-
isWeb
|
|
147
|
-
? {position: 'absolute', right: 8 - pathWidth, top: 0}
|
|
148
|
-
: {right: 8}
|
|
149
|
-
}
|
|
150
|
-
pathWidth={pathWidth}
|
|
151
|
-
/>
|
|
152
|
-
)}
|
|
136
|
+
{!isLast && <PathSvg style={rightPathStyle} pathWidth={pathWidth} />}
|
|
153
137
|
</View>
|
|
154
138
|
</View>
|
|
155
139
|
);
|
package/tabItem/TabItem.tsx
CHANGED
|
@@ -33,9 +33,10 @@ const TabItem: FC<TabItemProps> = ({
|
|
|
33
33
|
accessibilityLabel,
|
|
34
34
|
} = tab;
|
|
35
35
|
const scaledHeight = useScaleSize(68);
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
let typography: Typography = 'body_default_regular';
|
|
37
|
+
if (active) {
|
|
38
|
+
typography = 'header_s_semibold';
|
|
39
|
+
}
|
|
39
40
|
const color = active ? selectedColor : unselectedColor;
|
|
40
41
|
const dotStyle = dotSize === 'large' ? styles.dot : styles.dotSmall;
|
|
41
42
|
const app = useContext<any>(MiniAppContext);
|