feat: add disabled prop

trendmicro-frontend · Jun 17, 2021 · 44ecb46 · 44ecb46
1 parent e605845
commit 44ecb46
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 19 deletions.
diff --git a/packages/react-styled-ui/src/Scrollbar/Scrollbar.js b/packages/react-styled-ui/src/Scrollbar/Scrollbar.js
@@ -15,28 +15,29 @@ let scrollbarWidth = false;
 
 const Scrollbar = forwardRef((
   {
-    onScroll,
-    onUpdate,
-    scrollbarVisibility = 'auto',
     autoHideDelay = 1000,
-    thumbSize,
-    minThumbSize = 30,
-    minHeight = 'auto',
+    children,
+    disabled,
     maxHeight = 'auto',
+    minHeight = 'auto',
+    minThumbSize = 30,
+    onScroll,
+    onUpdate,
     renderView = renderViewDefault,
     renderHorizontalTrack = renderTrackHorizontalDefault,
     renderHorizontalThumb = renderThumbHorizontalDefault,
     renderVerticalTrack = renderTrackVerticalDefault,
     renderVerticalThumb = renderThumbVerticalDefault,
+    scrollbarVisibility = 'auto',
     style,
-    children,
+    thumbSize,
     ...reset
   },
   ref,
 ) => {
   const autoHeight = (maxHeight !== 'auto');
-  const horizontalScrollbarVisibility = scrollbarVisibility;
-  const verticalScrollbarVisibility = scrollbarVisibility;
+  const horizontalScrollbarVisibility = disabled ? 'hidden' : scrollbarVisibility;
+  const verticalScrollbarVisibility = disabled ? 'hidden' : scrollbarVisibility;
   let hideHorizontalTrackTimeout;
   let hideVerticalTrackTimeout;
   let viewScrollLeft = 0;
@@ -58,7 +59,7 @@ const Scrollbar = forwardRef((
   const thumbVerticalRef = useRef(null);
 
   const containerStyle = useContainerStyle({ autoHeight, minHeight, maxHeight, style });
-  const viewStyle = useViewStyle({ scrollbarWidth, autoHeight, minHeight, maxHeight });
+  const viewStyle = useViewStyle({ scrollbarWidth, autoHeight, minHeight, maxHeight, disabled });
   const trackHorizontalStyle = useTrackHorizontalStyle({ scrollbarWidth, horizontalScrollbarVisibility });
   const trackVerticalStyle = useTrackVerticalStyle({ scrollbarWidth, verticalScrollbarVisibility });
   const thumbHorizontalStyle = useThumbHorizontalStyle();
@@ -86,7 +87,7 @@ const Scrollbar = forwardRef((
   };
   const update = (callback) => {
     const scrollbarWidth = getScrollbarWidth();
-    if (!scrollbarWidth) {
+    if (!scrollbarWidth || disabled) {
       return;
     }
     const values = getValues();

diff --git a/packages/react-styled-ui/src/Scrollbar/styles.js b/packages/react-styled-ui/src/Scrollbar/styles.js
@@ -15,15 +15,14 @@ const useContainerStyle = props => ({
   ...props.style,
 });
 
-const useViewStyle = props => {
-  const { scrollbarWidth, autoHeight, minHeight, maxHeight } = props;
+const useViewStyle = ({ scrollbarWidth, autoHeight, minHeight, maxHeight, disabled }) => {
   return {
     position: 'absolute',
     top: 0,
     left: 0,
     right: 0,
     bottom: 0,
-    overflow: 'scroll',
+    overflow: disabled ? 'hidden' : 'scroll',
     WebkitOverflowScrolling: 'touch',
     // Hide scrollbars by setting a negative margin
     marginRight: scrollbarWidth ? -scrollbarWidth : 0,

diff --git a/packages/styled-ui-docs/pages/scrollbar.mdx b/packages/styled-ui-docs/pages/scrollbar.mdx
@@ -107,8 +107,8 @@ function StickyTable() {
 
   const tableHeaderRef = React.createRef();
 
-  const [showHorizontalScrollbar, setShowHorizontalScrollbar] = React.useState(0);
-  const [showVerticalScrollbar, setShowVerticalScrollbar] = React.useState(0);
+  const [showHorizontalScrollbar, setShowHorizontalScrollbar] = React.useState(false);
+  const [showVerticalScrollbar, setShowVerticalScrollbar] = React.useState(false);
 
   const onScroll = (e) => {
     const scrollLeft = e.target.scrollLeft;
@@ -118,9 +118,6 @@ function StickyTable() {
   };
 
   const onUpdate = ({ hasHorizontalScrollbar, hasVerticalScrollbar, ...props }) => {
-    if (showHorizontalScrollbar !== 0 && showHorizontalScrollbar !== 0) {
-      return;
-    }
     setShowHorizontalScrollbar(hasHorizontalScrollbar);
     setShowVerticalScrollbar(hasVerticalScrollbar);
   };
@@ -261,6 +258,7 @@ render(
 | Name | Type | Default | Description |
 | :--- | :--- | :------ | :---------- |
 | autoHideDelay | number | 1000 | Hide delay in ms. |
+| disabled | boolean | | If `true`, the overflow is clipped, and the rest of the content is hidden. |
 | maxHeight | number \| string | 'auto' | Set a minimum height (in pixels) for auto-height mode. If `maxHeight` is not `'auto'`, activate auto height mode. |
 | minHeight | number \| string | 'auto' | Set a maximum height (in pixels) for auto-height mode. |
 | minThumbSize | number | 30 | Minimal thumb size in pixels. |