feat(scrollview): enable small scrollbar

react95-io · Jan 25, 2021 · 5d3c668 · 5d3c668
1 parent 868f32c
commit 5d3c668
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/example/src/examples/ScrollViewExample.tsx b/example/src/examples/ScrollViewExample.tsx
@@ -26,7 +26,7 @@ const ScrollViewExample = () => {
         </ScrollView>
       </Panel>
       <Panel variant='cutout' style={{ marginTop: 20 }}>
-        <ScrollView alwaysShowScrollbars horizontal>
+        <ScrollView alwaysShowScrollbars horizontal small>
           <View style={{ width: 1000, padding: 4 }}>
             <Text>{lorem}</Text>
           </View>

diff --git a/src/components/ScrollView/ScrollView.tsx b/src/components/ScrollView/ScrollView.tsx
@@ -23,23 +23,24 @@ import { Panel, Button, ArrowIcon } from '../..';
 
 type Direction = -1 | 1;
 
-const scrollbarThickness = 30;
-const scrollbarButtonSize = scrollbarThickness;
-
 type ScrollViewProps = React.ComponentProps<typeof View> & {
   alwaysShowScrollbars?: boolean;
   children: React.ReactNode;
   horizontal?: boolean;
+  small?: boolean;
   scrollViewProps?: React.ComponentProps<typeof RNScrollView>;
   style?: StyleProp<ViewStyle>;
   theme: Theme;
 };
 
 // TODO: performance improvements (callbacks, refs ...etc)
+// TODO: disable scroll buttons when scroll position reached min or max
+// TODO: add 'scrollIncrement' prop (granularity of scroll buttons)
 const ScrollView = ({
   alwaysShowScrollbars = false,
   children,
   horizontal = false,
+  small = false,
   scrollViewProps = {},
   style,
   theme,
@@ -51,6 +52,8 @@ const ScrollView = ({
   const [contentSize, setContentSize] = useAsyncReference(0);
   const [scrollViewSize, setScrollViewSize] = useAsyncReference(0);
 
+  const scrollbarThickness = small ? 26 : 30;
+  const scrollbarButtonSize = scrollbarThickness;
   const scrollbarAxis = horizontal ? 'x' : 'y';
   const scrollbarLengthDimension = horizontal ? 'width' : 'height';
   const scrollbarThicknessDimension = horizontal ? 'height' : 'width';
@@ -183,13 +186,17 @@ const ScrollView = ({
             variant='raised'
             onPress={() => handleScrollButtonPress(-1)}
             disabled={contentFullyVisible}
-            style={[styles.scrollbarButton]}
+            style={{
+              height: scrollbarButtonSize,
+              width: scrollbarButtonSize,
+              padding: 0,
+            }}
           >
             <ArrowIcon
               theme={theme}
               direction={horizontal ? 'left' : 'up'}
               disabled={contentFullyVisible}
-              segments={4}
+              segments={small ? 3 : 4}
             />
           </Button>
           <View style={[styles.scrollbarTrack]}>
@@ -233,13 +240,17 @@ const ScrollView = ({
             variant='raised'
             onPress={() => handleScrollButtonPress(1)}
             disabled={contentFullyVisible}
-            style={[styles.scrollbarButton]}
+            style={{
+              height: scrollbarButtonSize,
+              width: scrollbarButtonSize,
+              padding: 0,
+            }}
           >
             <ArrowIcon
               theme={theme}
               direction={horizontal ? 'right' : 'down'}
               disabled={contentFullyVisible}
-              segments={4}
+              segments={small ? 3 : 4}
             />
           </Button>
         </View>
@@ -257,11 +268,6 @@ const styles = StyleSheet.create({
     flexGrow: 1,
     flexShrink: 1,
   },
-  scrollbarButton: {
-    height: scrollbarButtonSize,
-    width: scrollbarButtonSize,
-    padding: 0,
-  },
   scrollbarTrack: {
     overflow: 'hidden',
     flex: 1,