Merge pull request #211 from fedspendingtransparency/mod/11014-horizo…

…ntal-scroll-styles Mod/11014 horizontal scroll styles
fedspendingtransparency · Jun 14, 2024 · 0ca2394 · 0ca2394
2 parents cbedeca + 2bc5a47
commit 0ca2394
Show file tree

Hide file tree

Showing 19 changed files with 74 additions and 30 deletions.
diff --git a/components/table/Table.jsx b/components/table/Table.jsx
@@ -3,7 +3,7 @@
  * Created by Lizzie Salita 11/17/20
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes, { shape, oneOf, oneOfType } from 'prop-types';
 import { uniqueId, union } from 'lodash';
 import ErrorMessage from '../messages/ErrorMessage';
@@ -36,7 +36,8 @@ const propTypes = {
     onClickHandler: PropTypes.func,
     isMobile: PropTypes.bool,
     stickyFirstColumn: PropTypes.bool,
-    subAward: PropTypes.bool
+    subAward: PropTypes.bool,
+    checkToAddRightFade: PropTypes.func
 };
 
 const defaultProps = {
@@ -46,22 +47,48 @@ const defaultProps = {
 };
 
 const Table = (props) => {
+    const [isScrolledRight, setIsScrolledRight] = useState(false);
+    const [isScrolledLeft, setIsScrolledLeft] = useState(true);
+
     const stackedClass = props.isStacked ? `usa-dt-table__stacked` : '';
+
     const getTablePickerOptionsAsc = props.columns.map((col) => ({
         name: col.displayName + ' ' + '(ascending)',
         value: col.title,
         onClick: () => {
             props.updateSort(col.title, 'asc');
         }
     }));
+
     const getTablePickerOptionsDesc = props.columns.map((col) => ({
         name: col.displayName + ' ' + '(descending)',
         value: col.title,
         onClick: () => {
             props.updateSort(col.title, 'desc');
         }
     }));
+
+    const element = document.querySelector(".advanced-search__table-wrapper");
+    if (element) {
+        element.addEventListener("scroll", (e) => {
+            if ((e.target.scrollWidth - e.target.clientWidth - e.target.scrollLeft) < 20) {
+                setIsScrolledRight(true);
+            }
+            else {
+                setIsScrolledRight(false);
+            }
+
+            if (e.target.scrollLeft === 0) {
+                setIsScrolledLeft(true);
+            }
+            else {
+                setIsScrolledLeft(false);
+            }
+        });
+    }
+
     let body;
+
     if (props.loading) {
         body = (
             <tr>
@@ -90,8 +117,11 @@ const Table = (props) => {
         );
     }
     else {
-        body = (<TableData {...props} />);
+        body = (<TableData {...props} isScrolledLeft={isScrolledLeft} />);
     }
+
+    props.checkToAddRightFade(isScrolledLeft, isScrolledRight);
+
     return (
         <>
             {props.isStacked && props.updateSort && (
@@ -123,6 +153,7 @@ const Table = (props) => {
                                 currentSort={props.currentSort}
                                 updateSort={props.updateSort}
                                 stickyFirstColumn={props.stickyFirstColumn}
+                                isScrolledLeft={isScrolledLeft}
                                 subAward={props.subAward}
                                 index={index}
                                 {...col} />

diff --git a/components/table/TableData.jsx b/components/table/TableData.jsx
@@ -21,7 +21,8 @@ const propTypes = {
     isMobile: PropTypes.bool,
     atMaxLevel: PropTypes.bool,
     stickyFirstColumn: PropTypes.bool,
-    subAward: PropTypes.bool
+    subAward: PropTypes.bool,
+    isScrolledLeft: PropTypes.bool
 };
 
 const TableData = ({
@@ -34,7 +35,8 @@ const TableData = ({
     isMobile,
     atMaxLevel,
     stickyFirstColumn = false,
-    subAward
+    subAward,
+    isScrolledLeft
 }) => {
     const [firstClick, setFirstClick] = useState(false);
     const [rowIndexForMessage, setRowIndexForMessage] = useState();
@@ -88,7 +90,8 @@ const TableData = ({
                                 localClickHandler(row, i);
                             }
                         }}
-                        className={`usda-table__row-item usda-table__row${oddClass} ${subAward ? 'special-hover-color' : ''}`} style={{ height: rowHeight }}>
+                        className={`usda-table__row-item usda-table__row${oddClass} ${subAward ? 'special-hover-color' : ''}`}
+                        style={{ height: rowHeight }}>
                         {row.map((data, j) => (
                             columns[j]?.bodyHeader
                                 ? (
@@ -103,7 +106,7 @@ const TableData = ({
                                     <td
                                         key={uniqueId()}
                                         className={`usda-table__cell${columns[j]?.right ? ' usda-table__cell_right' : ''}
-                                ${(j === 0 && stickyFirstColumn) ? ' stickyColumn' : ''}`}>
+                                ${(j === 0 && stickyFirstColumn) ? ' stickyColumn' : ''} ${!isScrolledLeft ? ' add-box-shadow' : ''} `}>
                                         {columns[j]
                                         && (
                                             <div className="usda-table__cell-heading-container">

diff --git a/components/table/TableHeader.jsx b/components/table/TableHeader.jsx
@@ -11,8 +11,7 @@ const SortIcon = ({
     clickedSort,
     displayName,
     currentSort,
-    title,
-    stickyFirstColumn = false
+    title
 }) => {
     // highlight the active arrow
     const activeAsc = (currentSort?.field === title && currentSort?.direction === 'asc')
@@ -49,8 +48,7 @@ SortIcon.propTypes = {
         direction: oneOf(['asc', 'desc']),
         field: PropTypes.string
     }).isRequired,
-    clickedSort: PropTypes.func.isRequired,
-    stickyFirstColumn: PropTypes.bool
+    clickedSort: PropTypes.func.isRequired
 };
 
 const propTypes = {
@@ -72,7 +70,8 @@ const propTypes = {
     stickyFirstColumn: PropTypes.bool,
     columnWidth: PropTypes.number,
     subAward: PropTypes.bool,
-    index: PropTypes.number
+    index: PropTypes.number,
+    isScrolledLeft: PropTypes.bool
 };
 
 const TableHeaderCell = ({
@@ -90,7 +89,8 @@ const TableHeaderCell = ({
     stickyFirstColumn = false,
     columnWidth,
     subAward,
-    index
+    index,
+    isScrolledLeft
 }) => {
     const handleClickedSort = (e, sortOn = title) => {
         updateSort(sortOn, e.target.value);
@@ -104,7 +104,8 @@ const TableHeaderCell = ({
     return (
         <th
             className={`${className} table-header${bodyHeader ? ' table-header_body-header' : ''} 
-            ${stickyFirstColumn && index === 0 ? ' stickyColumn' : ''} ${subAward ? 'table-header__subaward-color' : ''} `}
+            ${stickyFirstColumn && index === 0 ? ' stickyColumn' : ''} ${subAward ? 'table-header__subaward-color' : ''}
+             ${!isScrolledLeft ? ' add-box-shadow' : ''}`}
             style={{ minWidth: columnWidth }}
             colSpan={columnWidth ? '' : columnSpan}
             rowSpan={rowsSpan()}

diff --git a/dist/data-transparency-ui.css b/dist/data-transparency-ui.css
diff --git a/dist/index.js b/dist/index.js
diff --git a/docs/211.758cb3ad.iframe.bundle.js b/docs/211.758cb3ad.iframe.bundle.js
diff --git a/...211.fb7a8e7d.iframe.bundle.js.LICENSE.txt → ...211.758cb3ad.iframe.bundle.js.LICENSE.txt b/...211.fb7a8e7d.iframe.bundle.js.LICENSE.txt → ...211.758cb3ad.iframe.bundle.js.LICENSE.txt
diff --git a/docs/211.fb7a8e7d.iframe.bundle.js b/docs/211.fb7a8e7d.iframe.bundle.js
diff --git a/docs/iframe.html b/docs/iframe.html
@@ -338,7 +338,7 @@
         /* eslint-enable object-shorthand */
       })
     );
-  };</script><link href="main.e9804e0aff1366fa1e54.css" rel="stylesheet"><style>#root[hidden],
+  };</script><link href="main.7c479eb17dfd7d1f3ceb.css" rel="stylesheet"><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
       }</style></head><body><div class="sb-preparing-story sb-wrapper"><div class="sb-loader"></div></div><div class="sb-preparing-docs sb-wrapper"><div class="sb-previewBlock"><div class="sb-previewBlock_header"><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div></div><div class="sb-previewBlock_body"><div class="sb-loader"></div></div></div><table aria-hidden="true" class="sb-argstableBlock"><thead class="sb-argstableBlock-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th><th><span>Control</span></th></tr></thead><tbody class="sb-argstableBlock-body"><tr><td><span>propertyName</span><span title="Required">*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr></tbody></table></div><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";
@@ -361,4 +361,4 @@
 
 
 
-            window['STORIES'] = [{"titlePrefix":"","directory":"./.storybook","files":"**/stories/*.stories.@(mdx|js)","importPathMatcher":"^\\.[\\\\/](?:\\.storybook(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)stories[\\\\/](?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(mdx|js))$"}];</script><script src="runtime~main.868a37cc.iframe.bundle.js"></script><script src="211.fb7a8e7d.iframe.bundle.js"></script><script src="main.ac760818.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./.storybook","files":"**/stories/*.stories.@(mdx|js)","importPathMatcher":"^\\.[\\\\/](?:\\.storybook(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)stories[\\\\/](?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(mdx|js))$"}];</script><script src="runtime~main.868a37cc.iframe.bundle.js"></script><script src="211.758cb3ad.iframe.bundle.js"></script><script src="main.6acb136d.iframe.bundle.js"></script></body></html>
diff --git a/docs/main.6acb136d.iframe.bundle.js b/docs/main.6acb136d.iframe.bundle.js