1import { css } from '@emotion/react';
2import { theme } from '@expo/styleguide';
3import React, { forwardRef, HTMLAttributes, PropsWithChildren } from 'react';
4
5type LayoutScrollProps = PropsWithChildren<
6  HTMLAttributes<HTMLDivElement> & {
7    /**
8     * If the scroll container should smoothly scroll when scrolled programmatically.
9     */
10    smoothScroll?: boolean;
11    /**
12     * If the overscoll effect should be disabled.
13     */
14    disableOverscroll?: boolean;
15  }
16>;
17
18export const LayoutScroll = forwardRef<HTMLDivElement, LayoutScrollProps>(
19  ({ smoothScroll = true, disableOverscroll = true, children, ...rest }, ref) => (
20    <div
21      css={[
22        scrollStyle,
23        smoothScroll && smoothScrollBehavior,
24        disableOverscroll && disableOverscrollBehavior,
25      ]}
26      {...rest}
27      ref={ref}>
28      {children}
29    </div>
30  )
31);
32
33const scrollStyle = css({
34  flex: 1,
35  overflowY: 'auto',
36  overflowX: 'hidden',
37  /**
38   * Scrollbar
39   */
40  '::-webkit-scrollbar': {
41    width: '6px',
42  },
43  // Track
44  '::-webkit-scrollbar-track': {
45    backgroundColor: 'transparent',
46    cursor: 'pointer',
47  },
48  // Handle
49  '::-webkit-scrollbar-thumb': {
50    backgroundColor: theme.palette.gray5,
51    borderRadius: '10px',
52  },
53  // Handle on hover
54  '::-webkit-scrollbar-thumb:hover': {
55    backgroundColor: theme.palette.gray6,
56  },
57});
58
59const smoothScrollBehavior = css({
60  scrollBehavior: 'smooth',
61});
62
63const disableOverscrollBehavior = css({
64  overscrollBehavior: 'contain',
65});
66