add a contained list to storybook

bluesky-social · May 5, 2024 · ad15fa0 · ad15fa0
1 parent 04f8d5b
commit ad15fa0
Show file tree

Hide file tree

Showing 3 changed files with 182 additions and 91 deletions.
diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx
@@ -28,6 +28,7 @@ import {
 import {useSession} from '#/state/session'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
+import {ScrollProvider} from 'lib/ScrollContext'
 import {useTheme} from 'lib/ThemeContext'
 import {List, ListRef} from '../util/List'
 import {PostFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
@@ -327,33 +328,35 @@ let Feed = ({
 
   return (
     <View testID={testID} style={style}>
-      <List
-        testID={testID ? `${testID}-flatlist` : undefined}
-        ref={scrollElRef}
-        data={feedItems}
-        keyExtractor={item => item._reactKey}
-        renderItem={renderItem}
-        ListFooterComponent={FeedFooter}
-        ListHeaderComponent={ListHeaderComponent}
-        refreshing={isPTRing}
-        onRefresh={onRefresh}
-        headerOffset={headerOffset}
-        contentContainerStyle={{
-          minHeight: Dimensions.get('window').height * 1.5,
-        }}
-        onScrolledDownChange={onScrolledDownChange}
-        indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'}
-        onEndReached={onEndReached}
-        onEndReachedThreshold={2} // number of posts left to trigger load more
-        removeClippedSubviews={true}
-        extraData={extraData}
-        // @ts-ignore our .web version only -prf
-        desktopFixedHeight={
-          desktopFixedHeightOffset ? desktopFixedHeightOffset : true
-        }
-        initialNumToRender={initialNumToRender}
-        windowSize={11}
-      />
+      <ScrollProvider>
+        <List
+          testID={testID ? `${testID}-flatlist` : undefined}
+          ref={scrollElRef}
+          data={feedItems}
+          keyExtractor={item => item._reactKey}
+          renderItem={renderItem}
+          ListFooterComponent={FeedFooter}
+          ListHeaderComponent={ListHeaderComponent}
+          refreshing={isPTRing}
+          onRefresh={onRefresh}
+          headerOffset={headerOffset}
+          contentContainerStyle={{
+            minHeight: Dimensions.get('window').height * 1.5,
+          }}
+          onScrolledDownChange={onScrolledDownChange}
+          indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'}
+          onEndReached={onEndReached}
+          onEndReachedThreshold={2} // number of posts left to trigger load more
+          removeClippedSubviews={true}
+          extraData={extraData}
+          // @ts-ignore our .web version only -prf
+          desktopFixedHeight={
+            desktopFixedHeightOffset ? desktopFixedHeightOffset : true
+          }
+          initialNumToRender={initialNumToRender}
+          windowSize={11}
+        />
+      </ScrollProvider>
     </View>
   )
 }

diff --git a/src/view/screens/Storybook/ListContained.tsx b/src/view/screens/Storybook/ListContained.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import {View} from 'react-native'
+
+import {ScrollProvider} from 'lib/ScrollContext'
+import {List} from 'view/com/util/List'
+import {Text} from '#/components/Typography'
+
+// 100 random messages
+
+export function ListContained() {
+  const data = React.useMemo(() => {
+    return Array.from({length: 100}, (_, i) => ({
+      id: i,
+      text: `Message ${i}`,
+    }))
+  }, [])
+
+  return (
+    <View style={{width: '100%', height: 300}}>
+      <ScrollProvider
+        onScroll={() => {
+          console.log('onScroll')
+        }}>
+        <List
+          data={data}
+          renderItem={item => {
+            return (
+              <View
+                style={{
+                  padding: 10,
+                  borderBottomWidth: 1,
+                  borderBottomColor: 'rgba(0,0,0,0.1)',
+                }}>
+                <Text>{item.item.text}</Text>
+              </View>
+            )
+          }}
+          keyExtractor={item => item.id.toString()}
+          containWeb={true}
+          style={{flex: 1}}
+          onStartReached={() => {
+            console.log('Start Reached')
+          }}
+          onEndReached={() => {
+            console.log('End Reached (threshold of 2)')
+          }}
+          onEndReachedThreshold={2}
+        />
+      </ScrollProvider>
+    </View>
+  )
+}
diff --git a/src/view/screens/Storybook/index.tsx b/src/view/screens/Storybook/index.tsx
@@ -1,8 +1,10 @@
 import React from 'react'
-import {View} from 'react-native'
+import {ScrollView, View} from 'react-native'
 
 import {useSetThemePrefs} from '#/state/shell'
-import {CenteredView, ScrollView} from '#/view/com/util/Views'
+import {isWeb} from 'platform/detection'
+import {CenteredView} from '#/view/com/util/Views'
+import {ListContained} from 'view/screens/Storybook/ListContained'
 import {atoms as a, ThemeProvider, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {Breakpoints} from './Breakpoints'
@@ -18,77 +20,111 @@ import {Theming} from './Theming'
 import {Typography} from './Typography'
 
 export function Storybook() {
+  if (isWeb) return <StorybookInner />
+
+  return (
+    <ScrollView>
+      <StorybookInner />
+    </ScrollView>
+  )
+}
+
+function StorybookInner() {
   const t = useTheme()
   const {setColorMode, setDarkTheme} = useSetThemePrefs()
+  const [showContainedList, setShowContainedList] = React.useState(false)
 
   return (
-    <ScrollView>
-      <CenteredView style={[t.atoms.bg]}>
-        <View style={[a.p_xl, a.gap_5xl, {paddingBottom: 200}]}>
-          <View style={[a.flex_row, a.align_start, a.gap_md]}>
-            <Button
-              variant="outline"
-              color="primary"
-              size="small"
-              label='Set theme to "system"'
-              onPress={() => setColorMode('system')}>
-              <ButtonText>System</ButtonText>
-            </Button>
-            <Button
-              variant="solid"
-              color="secondary"
-              size="small"
-              label='Set theme to "light"'
-              onPress={() => setColorMode('light')}>
-              <ButtonText>Light</ButtonText>
-            </Button>
+    <CenteredView style={[t.atoms.bg]}>
+      <View style={[a.p_xl, a.gap_5xl, {paddingBottom: 200}]}>
+        {!showContainedList ? (
+          <>
+            <View style={[a.flex_row, a.align_start, a.gap_md]}>
+              <Button
+                variant="outline"
+                color="primary"
+                size="small"
+                label='Set theme to "system"'
+                onPress={() => setColorMode('system')}>
+                <ButtonText>System</ButtonText>
+              </Button>
+              <Button
+                variant="solid"
+                color="secondary"
+                size="small"
+                label='Set theme to "light"'
+                onPress={() => setColorMode('light')}>
+                <ButtonText>Light</ButtonText>
+              </Button>
+              <Button
+                variant="solid"
+                color="secondary"
+                size="small"
+                label='Set theme to "dim"'
+                onPress={() => {
+                  setColorMode('dark')
+                  setDarkTheme('dim')
+                }}>
+                <ButtonText>Dim</ButtonText>
+              </Button>
+              <Button
+                variant="solid"
+                color="secondary"
+                size="small"
+                label='Set theme to "dark"'
+                onPress={() => {
+                  setColorMode('dark')
+                  setDarkTheme('dark')
+                }}>
+                <ButtonText>Dark</ButtonText>
+              </Button>
+            </View>
+
+            <Dialogs />
+            <ThemeProvider theme="light">
+              <Theming />
+            </ThemeProvider>
+            <ThemeProvider theme="dim">
+              <Theming />
+            </ThemeProvider>
+            <ThemeProvider theme="dark">
+              <Theming />
+            </ThemeProvider>
+
+            <Typography />
+            <Spacing />
+            <Shadows />
+            <Buttons />
+            <Icons />
+            <Links />
+            <Forms />
+            <Dialogs />
+            <Menus />
+            <Breakpoints />
+
             <Button
               variant="solid"
-              color="secondary"
-              size="small"
-              label='Set theme to "dim"'
-              onPress={() => {
-                setColorMode('dark')
-                setDarkTheme('dim')
-              }}>
-              <ButtonText>Dim</ButtonText>
+              color="primary"
+              size="large"
+              label="Switch to Contained List"
+              onPress={() => setShowContainedList(true)}>
+              <ButtonText>Switch to Contained List</ButtonText>
             </Button>
+          </>
+        ) : (
+          <>
             <Button
               variant="solid"
-              color="secondary"
-              size="small"
-              label='Set theme to "dark"'
-              onPress={() => {
-                setColorMode('dark')
-                setDarkTheme('dark')
-              }}>
-              <ButtonText>Dark</ButtonText>
+              color="primary"
+              size="large"
+              label="Switch to Storybook"
+              onPress={() => setShowContainedList(false)}>
+              <ButtonText>Switch to Storybook</ButtonText>
             </Button>
-          </View>
-
-          <Dialogs />
-          <ThemeProvider theme="light">
-            <Theming />
-          </ThemeProvider>
-          <ThemeProvider theme="dim">
-            <Theming />
-          </ThemeProvider>
-          <ThemeProvider theme="dark">
-            <Theming />
-          </ThemeProvider>
-
-          <Typography />
-          <Spacing />
-          <Shadows />
-          <Buttons />
-          <Icons />
-          <Links />
-          <Forms />
-          <Dialogs />
-          <Menus />
-          <Breakpoints />
-        </View>
-      </CenteredView>
-    </ScrollView>
+            <ListContained />
+          </>
+        )}
+      </View>
+    </CenteredView>
   )
 }