Adds prop to control scrollbar visibility (#180)

Co-authored-by: Tiago Peres França <[email protected]>
ZupIT · Feb 19, 2021 · e6a67de · e6a67de
1 parent 0c92726
commit e6a67de
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 0 deletions.
diff --git a/packages/beagle-react/src/components/BeagleListView/index.tsx b/packages/beagle-react/src/components/BeagleListView/index.tsx
@@ -38,6 +38,7 @@ const BeagleListView: FC<BeagleListViewInterface> = ({
   useParentScroll = false,
   _key,
   __suffix__,
+  isScrollIndicatorVisible = true,
   accessibility,
 }) => {
   const elementRef = useRef() as React.MutableRefObject<HTMLDivElement>
@@ -90,6 +91,7 @@ const BeagleListView: FC<BeagleListViewInterface> = ({
       direction={direction}
       useParentScroll={useParentScroll}
       style={style}
+      isScrollIndicatorVisible = {isScrollIndicatorVisible}
       {
         ...({ [direction === 'VERTICAL' ? 
           'aria-rowcount' : 'aria-colcount']: Children.count(children) || 0 })

diff --git a/packages/beagle-react/src/components/BeagleListView/styled.ts b/packages/beagle-react/src/components/BeagleListView/styled.ts
@@ -20,6 +20,7 @@ import { Direction } from 'common/models'
 interface StyledListViewInterface {
   direction: Direction,
   useParentScroll?: boolean,
+  isScrollIndicatorVisible?: boolean,
 }
 
 export const StyledListView = styled.div<StyledListViewInterface>`
@@ -28,4 +29,10 @@ export const StyledListView = styled.div<StyledListViewInterface>`
   overflow: ${({ useParentScroll }) => useParentScroll ? 'inherit' : 'auto'};
   width: ${({ direction }) => direction === 'HORIZONTAL' ? '100%' : 'auto'};
   height: ${({ direction }) => direction === 'VERTICAL' ? '100%' : 'auto'};
+  & ::-webkit-scrollbar {
+    display: ${({ isScrollIndicatorVisible }) => isScrollIndicatorVisible ? 'auto' : 'none'};
+  }
+  -ms-overflow-style: ${({ isScrollIndicatorVisible }) => isScrollIndicatorVisible ? 
+    'auto' : 'none'};
+  scrollbar-width: ${({ isScrollIndicatorVisible }) => isScrollIndicatorVisible ? 'auto' : 'none'};
 `
diff --git a/packages/beagle-react/src/components/BeagleListView/types.ts b/packages/beagle-react/src/components/BeagleListView/types.ts
@@ -33,6 +33,7 @@ export interface BeagleListViewInterface extends BeagleDefaultComponent, BeagleC
   Beagle receives "key", it transforms it into "_key" */
   _key?: string,
   __suffix__?: string,
+  isScrollIndicatorVisible?: boolean,
 }
 
 export interface ScrollInterface {