Create moderation inbox reports list (#11570)

src/view/com/pager/TabBar.tsx

@@ -25,6 +25,7 @@ export interface TabBarProps {
   testID?: string
   selectedPage: number
   items: string[]
+  align?: 'center' | 'left'
   onSelect?: (index: number) => void
   onPressSelected?: (index: number) => void
   dragProgress: SharedValue<number>
@@ -42,6 +43,7 @@ export function TabBar({
   testID,
   selectedPage,
   items,
+  align = 'center',
   onSelect,
   onPressSelected,
   dragProgress,
@@ -77,10 +79,13 @@ export function TabBar({
       'worklet'
       const layout = layouts.get()[index]
       const availableSize = containerSize.get() - 2 * CONTENT_PADDING
+      const maxOffset = Math.max(0, contentSize.get() - availableSize)
       if (!layout) {
         // Should not happen, but fall back to equal sizes.
-        const offsetPerPage = contentSize.get() - availableSize
-        return (index / (itemsLength - 1)) * offsetPerPage
+        return itemsLength > 1 ? (index / (itemsLength - 1)) * maxOffset : 0
+      }
+      if (maxOffset === 0) {
+        return 0
       }
       const freeSpace = availableSize - layout.width
       const accumulatingOffset = interpolate(
@@ -91,7 +96,7 @@ export function TabBar({
         [0, freeSpace],
         'clamp',
       )
-      return layout.x - accumulatingOffset
+      return Math.min(Math.max(layout.x - accumulatingOffset, 0), maxOffset)
     },
     [itemsLength, contentSize, containerSize, layouts],
   )
@@ -338,7 +343,7 @@ export function TabBar({
             onLayout={e => {
               contentSize.set(e.nativeEvent.layout.width)
             }}
-            style={{flexDirection: 'row', flexGrow: 1}}>
+            style={[styles.items, align === 'center' && styles.itemsCentered]}>
             {items.map((item, i) => {
               return (
                 <TabBarItem
@@ -350,6 +355,7 @@ export function TabBar({
                   onPressItem={onPressItem}
                   onItemLayout={onItemLayout}
                   onTextLayout={onTextLayout}
+                  align={align}
                 />
               )
             })}
@@ -382,6 +388,7 @@ function TabBarItem({
   onPressItem,
   onItemLayout,
   onTextLayout,
+  align,
 }: {
   index: number
   testID: string | undefined
@@ -390,6 +397,7 @@ function TabBarItem({
   onPressItem: (index: number) => void
   onItemLayout: (index: number, layout: {x: number; width: number}) => void
   onTextLayout: (index: number, layout: {width: number}) => void
+  align: 'center' | 'left'
 }) {
   const t = useTheme()
   const style = useAnimatedStyle(() => {
@@ -421,10 +429,15 @@ function TabBarItem({
   )
 
   return (
-    <View onLayout={handleLayout} style={{flexGrow: 1}}>
+    <View
+      onLayout={handleLayout}
+      style={[
+        styles.itemContainer,
+        align === 'center' && styles.itemContainerCentered,
+      ]}>
       <PressableWithHover
         testID={`${testID}-selector-${index}`}
-        style={styles.item}
+        style={[styles.item, align === 'center' && styles.itemCentered]}
         hoverStyle={t.atoms.bg_contrast_25}
         onPress={() => onPressItem(index)}
         accessibilityRole="tab">
@@ -448,12 +461,26 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
     paddingHorizontal: CONTENT_PADDING,
   },
-  item: {
+  items: {
+    flexDirection: 'row',
+  },
+  itemsCentered: {
     flexGrow: 1,
+  },
+  itemContainer: {
+    flexShrink: 0,
+  },
+  itemContainerCentered: {
+    flexGrow: 1,
+  },
+  item: {
     paddingTop: 10,
     paddingHorizontal: ITEM_PADDING,
     justifyContent: 'center',
   },
+  itemCentered: {
+    flexGrow: 1,
+  },
   itemInner: {
     alignItems: 'center',
     flexGrow: 1,

src/view/com/pager/TabBar.web.tsx

@@ -11,6 +11,7 @@ export interface TabBarProps {
   testID?: string
   selectedPage: number
   items: string[]
+  align?: 'center' | 'left'
   indicatorColor?: string
   backgroundColor?: string
 
@@ -34,6 +35,7 @@ export function TabBar({
   testID,
   selectedPage,
   items,
+  align = 'center',
   onSelect,
   onPressSelected,
 }: TabBarProps) {
@@ -87,7 +89,7 @@ export function TabBar({
         behavior: 'smooth',
       })
     }
-  }, [scrollElRef, selectedPage, styles])
+  }, [scrollElRef, selectedPage, styles, align])
 
   const onPressItem = useCallback(
     (index: number) => {
@@ -119,7 +121,7 @@ export function TabBar({
               ref={node => {
                 itemRefs.current[i] = node as any
               }}
-              style={styles.item}
+              style={[styles.item, align === 'left' && leftAlignedStyles.item]}
               hoverStyle={t.atoms.bg_contrast_25}
               onPress={() => onPressItem(i)}
               accessibilityRole="tab">
@@ -239,3 +241,10 @@ const mobileStyles = StyleSheet.create({
     borderBottomWidth: StyleSheet.hairlineWidth,
   },
 })
+
+const leftAlignedStyles = StyleSheet.create({
+  item: {
+    flexGrow: 0,
+    flexShrink: 0,
+  },
+})