Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 2x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 2x 2x | import React, { useRef, useState } from 'react';
import { Animated, StyleSheet, View, LayoutChangeEvent } from 'react-native';
import { ScrollAreaNativeProps } from '../ScrollArea.types';
import { useTheme } from '@sb/ui/components/Themes/ThemeProvider';
import { colors } from '@sb/styles/colors';
export const ScrollArea: React.FC<ScrollAreaNativeProps> = ({
id,
style,
children,
thin = 6,
color,
stickyIndices,
thumbLength,
ariaLabel,
}) => {
const theme = useTheme();
const themeColors = colors[theme.theme];
const defaultColor = color || themeColors.scrollAreaThumbColor;
const scrollY = useRef(new Animated.Value(0)).current;
const [contentHeight, setContentHeight] = useState(1);
const [visibleHeight, setVisibleHeight] = useState(0);
const computedThumbHeight =
visibleHeight > 0 ? (visibleHeight * visibleHeight) / contentHeight : 0;
const thumbHeight = thumbLength !== undefined ? thumbLength : computedThumbHeight;
const translateY = scrollY.interpolate({
inputRange: [0, Math.max(contentHeight - visibleHeight, 1)],
outputRange: [0, Math.max(visibleHeight - thumbHeight, 0)],
extrapolate: 'clamp',
});
const onContentSizeChange = (_w: number, h: number) => setContentHeight(h);
const onLayout = (e: LayoutChangeEvent) => setVisibleHeight(e.nativeEvent.layout.height);
const onScroll = Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
useNativeDriver: false,
});
return (
<View nativeID={id} style={[styles.container, style]} testID={id}>
<Animated.ScrollView
showsVerticalScrollIndicator={false}
onContentSizeChange={onContentSizeChange}
onLayout={onLayout}
scrollEventThrottle={16}
onScroll={onScroll}
tabIndex={0}
stickyHeaderIndices={stickyIndices}
accessibilityLabel={ariaLabel || 'Scroll Area'}
accessibilityRole="scrollbar"
>
{children}
</Animated.ScrollView>
{contentHeight > visibleHeight && (
<Animated.View
style={[
styles.thumb,
{
width: thin,
backgroundColor: defaultColor,
height: thumbHeight,
transform: [{ translateY }],
},
]}
/>
)}
</View>
);
};
const styles = StyleSheet.create({
container: { flex: 1, position: 'relative' },
thumb: {
position: 'absolute',
right: 1,
borderRadius: 2,
},
});
ScrollArea.displayName = 'ScrollArea';
|