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    /** If the scroll container should smoothly scroll when scrolled programatically */
8    smoothScroll?: boolean;
9  }
10>;
11
12export const LayoutScroll = forwardRef<HTMLDivElement, LayoutScrollProps>(
13  ({ smoothScroll, children, ...rest }, ref) => (
14    <div css={[scrollStyle, smoothScroll && smoothScrollBehavior]} {...rest} ref={ref}>
15      {children}
16    </div>
17  )
18);
19
20const scrollStyle = css({
21  height: '100%',
22  overflowY: 'auto',
23  /* width */
24  '::-webkit-scrollbar': {
25    width: '6px',
26  },
27  /* Track */
28  '::-webkit-scrollbar-track': {
29    backgroundColor: 'transparent',
30    cursor: 'pointer',
31  },
32  /* Handle */
33  '::-webkit-scrollbar-thumb': {
34    backgroundColor: theme.background.tertiary,
35    borderRadius: '10px',
36  },
37  /* Handle on hover */
38  '::-webkit-scrollbar-thumb:hover': {
39    backgroundColor: theme.background.quaternary,
40  },
41});
42
43const smoothScrollBehavior = css({
44  scrollBehavior: 'smooth',
45});
46