chore: work in progress

trendmicro-frontend · Jun 15, 2021 · 42be733 · 42be733
1 parent 2cbc178
commit 42be733
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 65 deletions.
diff --git a/packages/react-styled-ui/src/Scrollbar/Scrollbar.js b/packages/react-styled-ui/src/Scrollbar/Scrollbar.js
@@ -18,8 +18,7 @@ const Scrollbar = forwardRef((
     onScroll,
     onUpdate,
     autoHide = false,
-    autoHideTimeout = 1000,
-    autoHideDuration = 200,
+    autoHideDelay = 1000,
     thumbSize,
     thumbMinSize = 30,
     autoHeight = false,
@@ -57,8 +56,8 @@ const Scrollbar = forwardRef((
 
   const containerStyle = useContainerStyle({ autoHeight, autoHeightMin, autoHeightMax, style });
   const viewStyle = useViewStyle({ scrollbarWidth, autoHeight, autoHeightMin, autoHeightMax });
-  const trackHorizontalStyle = useTrackHorizontalStyle({ scrollbarWidth, autoHide, autoHideDuration });
-  const trackVerticalStyle = useTrackVerticalStyle({ scrollbarWidth, autoHide, autoHideDuration });
+  const trackHorizontalStyle = useTrackHorizontalStyle({ scrollbarWidth, autoHide });
+  const trackVerticalStyle = useTrackVerticalStyle({ scrollbarWidth, autoHide });
   const thumbHorizontalStyle = useThumbHorizontalStyle();
   const thumbVerticalStyle = useThumbVerticalStyle();
 
@@ -161,7 +160,7 @@ const Scrollbar = forwardRef((
       if (trackVerticalRef.current) {
         trackVerticalRef.current.style.opacity = 0;
       }
-    }, autoHideTimeout);
+    }, autoHideDelay);
   };
   const showTracks = () => {
     clearTimeout(hideTracksTimeout);

diff --git a/packages/react-styled-ui/src/Scrollbar/styles.js b/packages/react-styled-ui/src/Scrollbar/styles.js
@@ -41,35 +41,35 @@ const useViewStyle = props => {
   };
 };
 
-const useTrackAutoHeightStyle = props => ({
-  transition: `opacity ${props.autoHideDuration}ms`,
+const useTrackAutoHideStyle = props => ({
+  transition: `opacity 200ms`,
   opacity: 0,
 });
 
 const useTrackHorizontalStyle = props => {
-  const { autoHide, scrollbarWidth, autoHideDuration } = props;
-  const trackAutoHeightStyle = useTrackAutoHeightStyle({ autoHideDuration });
+  const { autoHide, scrollbarWidth } = props;
+  const trackAutoHideStyle = useTrackAutoHideStyle();
   return {
     position: 'absolute',
     height: styledScrollbarWidth,
     right: 0,
     bottom: 0,
     left: 0,
-    ...(autoHide && trackAutoHeightStyle),
+    ...(autoHide && trackAutoHideStyle),
     ...(!scrollbarWidth && { display: 'none' }),
   };
 };
 
 const useTrackVerticalStyle = props => {
-  const { autoHide, scrollbarWidth, autoHideDuration } = props;
-  const trackAutoHeightStyle = useTrackAutoHeightStyle({ autoHideDuration });
+  const { autoHide, scrollbarWidth } = props;
+  const trackAutoHideStyle = useTrackAutoHideStyle();
   return {
     position: 'absolute',
     width: styledScrollbarWidth,
     right: 0,
     bottom: 0,
     top: 0,
-    ...(autoHide && trackAutoHeightStyle),
+    ...(autoHide && trackAutoHideStyle),
     ...(!scrollbarWidth && { display: 'none' }),
   };
 };
@@ -137,7 +137,7 @@ const useThumbVerticalStyle = props => {
 export {
   useContainerStyle,
   useViewStyle,
-  useTrackAutoHeightStyle,
+  useTrackAutoHideStyle,
   useTrackHorizontalStyle,
   useTrackVerticalStyle,
   useThumbHorizontalStyle,

diff --git a/packages/styled-ui-docs/pages/scrollbar.mdx b/packages/styled-ui-docs/pages/scrollbar.mdx
@@ -37,6 +37,48 @@ import {
 ### The scrollbar in the `Table`
 
 ```jsx noInline
+function CustomScrollbar({
+  showVerticalScrollbar,
+  showHorizontalScrollbar,
+  children,
+  ...props
+}) {
+  const renderScrollView = props => {
+    return (
+      <Box
+        {...props}
+        right={showVerticalScrollbar ? "8px" : 0}
+        bottom={showHorizontalScrollbar ? "8px" : 0}
+      />
+    );
+  };
+
+  const renderScrollTrack = props => {
+    const [colorMode] = useColorMode();
+    const bgColor = {
+      dark: 'gray:70',
+      light: 'gray:70',
+    }[colorMode];
+    return (
+      <Box
+        {...props}
+        bg={bgColor}
+      />
+    );
+  };
+
+  return (
+    <Scrollbar
+      renderView={renderScrollView}
+      renderTrackHorizontal={renderScrollTrack}
+      renderTrackVertical={renderScrollTrack}
+      {...props}
+    >
+      {children}
+    </Scrollbar>
+  );
+}
+
 function StickyTable() {
   const columns = React.useMemo(() => [
     {
@@ -69,7 +111,7 @@ function StickyTable() {
 
   const onScroll = (e) => {
     const scrollLeft = e.target.scrollLeft;
-    if (!!tableHeaderRef && tableHeaderRef.current.scrollLeft !== scrollLeft) {
+    if (tableHeaderRef.current && tableHeaderRef.current.scrollLeft !== scrollLeft) {
       tableHeaderRef.current.scrollLeft = scrollLeft;
     }
   };
@@ -82,30 +124,6 @@ function StickyTable() {
     setShowVerticalScrollbar(hasVerticalScrollbar);
   };
 
-  const renderScrollView = props => {
-    return (
-      <Box
-        {...props}
-        right={showVerticalScrollbar ? "8px" : 0}
-        bottom={showHorizontalScrollbar ? "8px" : 0}
-      />
-    );
-  };
-
-  const renderScrollTrack = props => {
-    const [colorMode] = useColorMode();
-    const bgColor = {
-      dark: 'gray:70',
-      light: 'gray:70',
-    }[colorMode];
-    return (
-      <Box
-        {...props}
-        bg={bgColor}
-      />
-    );
-  };
-
   const {
     getTableProps,
     getTableBodyProps,
@@ -137,27 +155,27 @@ function StickyTable() {
           }
           return (
             <TableHeaderRow style={{...style, width: headerWidth}} {...props}>
-              {headerGroup.headers.map(column => (
+              {headerGroup.headers.map((column, index) => (
                 <TableHeaderCell
                   key={column.accessor}
-                  css={showVerticalScrollbar && {
-                    '&:last-of-type': {
-                      borderRight: 0,
-                    },
+                  {...(showVerticalScrollbar && index === headerGroup.headers.length - 1) && {
+                    borderRight: 0,
                   }}
                   {...column.getHeaderProps()}
                 >
                   {column.render('Header')}
                 </TableHeaderCell>
               ))}
+              {showVerticalScrollbar && (
+                <TableHeaderCell width="8px" padding={0} borderLeft={0} />
+              )}
             </TableHeaderRow>
           );
         })}
       </TableHeader>
-      <Scrollbar
-        renderView={renderScrollView}
-        renderTrackHorizontal={renderScrollTrack}
-        renderTrackVertical={renderScrollTrack}
+      <CustomScrollbar
+        showVerticalScrollbar
+        showHorizontalScrollbar
         onScroll={onScroll}
         onUpdate={onUpdate}
       >
@@ -177,7 +195,7 @@ function StickyTable() {
             );
           })}
         </TableBody>
-      </Scrollbar>
+      </CustomScrollbar>
     </Table>
   );
 }
@@ -228,39 +246,34 @@ function ShadowScrollbar(props) {
   );
 }
 
+function Lorem({ count }) {
+  const items = [];
+  for(let i = 0; i < count; i++) {
+    items.push(<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>);
+  }
+  return items;
+}
+
 render(
   <ShadowScrollbar height={300}>
-    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+    <Lorem count={12} />
   </ShadowScrollbar>
 );
 ```
 
-
 ## Props
 
 `Scrollbar` composes the [`PseudoBox`](./pseudoBox) component. You can override the default styles with style props.
 
 | Name | Type | Default | Description |
 | :--- | :--- | :------ | :---------- |
 | autoHide | boolean | false | Enable auto-hide mode. |
-| autoHideDuration | number | 200 | Duration for hide animation in ms. |
-| autoHideTimeout | number | 1000 | Hide delay in ms. |
+| autoHideDelay | number | 1000 | Hide delay in ms. |
 | autoHeight | boolean | false | Enable auto-height mode. |
 | autoHeightMax | number | 200 | Set a maximum height for auto-height mode. |
 | autoHeightMin | number | 0 | Set a minimum height for auto-height mode. |
 | onScroll | function | | Event handler. |
-| onUpdate | function({ values, hasHorizontalScrollbar, hasVerticalScrollbar }) | | Called whenever the component is updated. Runs inside the animation frame. |
+| onUpdate | function({ values, hasHorizontalScrollbar, hasVerticalScrollbar }) | | Called whenever the component is updated. |
 | renderView | function | | The element your content will be rendered in. |
 | renderTrackHorizontal | function | | Horizontal track element. |
 | renderTrackVertical | function | | Vertical track element. |