mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Give minWidth to tab indicator only (#7095)

authored by danabra.mov and committed by

GitHub f6aecf5c 41228dce

+43 -14
+15 -3
src/view/com/pager/TabBar.tsx
··· 237 237 opacity: 0, 238 238 } 239 239 } 240 + 241 + function getScaleX(index: number) { 242 + const textWidth = textLayoutsValue[index].width 243 + const itemWidth = layoutsValue[index].width 244 + const minIndicatorWidth = 45 245 + const maxIndicatorWidth = itemWidth - 2 * CONTENT_PADDING 246 + const indicatorWidth = Math.min( 247 + Math.max(minIndicatorWidth, textWidth), 248 + maxIndicatorWidth, 249 + ) 250 + return indicatorWidth / contentSize.get() 251 + } 252 + 240 253 if (textLayoutsValue.length === 1) { 241 254 return { 242 255 opacity: 1, 243 256 transform: [ 244 257 { 245 - scaleX: textLayoutsValue[0].width / contentSize.get(), 258 + scaleX: getScaleX(0), 246 259 }, 247 260 ], 248 261 } ··· 261 274 scaleX: interpolate( 262 275 dragProgress.get(), 263 276 textLayoutsValue.map((l, i) => i), 264 - textLayoutsValue.map(l => l.width / contentSize.get()), 277 + textLayoutsValue.map((l, i) => getScaleX(i)), 265 278 ), 266 279 }, 267 280 ], ··· 429 442 }, 430 443 itemText: { 431 444 lineHeight: 20, 432 - minWidth: 45, 433 445 textAlign: 'center', 434 446 }, 435 447 outerBottomBorder: {
+28 -11
src/view/com/pager/TabBar.web.tsx
··· 25 25 testID, 26 26 selectedPage, 27 27 items, 28 - indicatorColor, 29 28 onSelect, 30 29 onPressSelected, 31 30 }: TabBarProps) { 32 31 const t = useTheme() 33 32 const scrollElRef = useRef<ScrollView>(null) 34 33 const itemRefs = useRef<Array<Element>>([]) 35 - const indicatorStyle = { 36 - borderBottomColor: indicatorColor || t.palette.primary_500, 37 - } 38 34 const {gtMobile} = useBreakpoints() 39 35 const styles = gtMobile ? desktopStyles : mobileStyles 40 36 ··· 122 118 style={[ 123 119 styles.itemText, 124 120 selected ? t.atoms.text : t.atoms.text_contrast_medium, 125 - selected && indicatorStyle, 126 121 a.text_md, 127 122 a.font_bold, 128 123 {lineHeight: 20}, 129 124 ]}> 130 125 {item} 126 + <View 127 + style={[ 128 + styles.itemIndicator, 129 + selected && { 130 + backgroundColor: t.palette.primary_500, 131 + }, 132 + ]} 133 + /> 131 134 </Text> 132 135 </View> 133 136 </PressableWithHover> ··· 158 161 }, 159 162 itemInner: { 160 163 alignItems: 'center', 164 + overflowX: 'hidden', 161 165 }, 162 166 itemText: { 163 167 textAlign: 'center', 168 + paddingBottom: 10 + 3, 169 + }, 170 + itemIndicator: { 171 + position: 'absolute', 172 + bottom: 0, 173 + height: 3, 174 + left: '50%', 175 + transform: 'translateX(-50%)', 164 176 minWidth: 45, 165 - paddingBottom: 12, 166 - borderBottomWidth: 3, 167 - borderBottomColor: 'transparent', 177 + width: '100%', 168 178 }, 169 179 outerBottomBorder: { 170 180 position: 'absolute', ··· 194 204 itemInner: { 195 205 flexGrow: 1, 196 206 alignItems: 'center', 207 + overflowX: 'hidden', 197 208 }, 198 209 itemText: { 199 210 textAlign: 'center', 211 + paddingBottom: 10 + 3, 212 + }, 213 + itemIndicator: { 214 + position: 'absolute', 215 + bottom: 0, 216 + height: 3, 217 + left: '50%', 218 + transform: 'translateX(-50%)', 200 219 minWidth: 45, 201 - paddingBottom: 10, 202 - borderBottomWidth: 3, 203 - borderBottomColor: 'transparent', 220 + width: '100%', 204 221 }, 205 222 outerBottomBorder: { 206 223 position: 'absolute',