fix: improve header styles when table has scroll in table component (#…

…1414) * fix: improve header styles when table has scroll in table component * fix: hasScroll control changed from state to method Co-authored-by: Tahimi <[email protected]>
nexxtway · Mar 20, 2020 · 3dc5889 · 3dc5889
1 parent 010819b
commit 3dc5889
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 1 deletion.
diff --git a/src/components/Table/head/header.js b/src/components/Table/head/header.js
@@ -9,6 +9,7 @@ import StyledTh from './styled/th';
 import StyledWrapper from './styled/wrapper';
 import StyledHeaderContainer from './styled/headerContainer';
 import StyledContent from './styled/content';
+import StyledScrollShadow from './styled/scrollShadow';
 
 export default class Header extends Component {
     constructor(props) {
@@ -65,10 +66,13 @@ export default class Header extends Component {
             tableId,
             maxRowSelection,
             bulkSelection,
+            hasScroll,
         } = this.props;
+
         const headerStyles = {
             width: computedWidth,
         };
+
         const isResizable = this.isResizable();
 
         if (type === SELECTABLE_CHECKBOX) {
@@ -79,6 +83,7 @@ export default class Header extends Component {
                     tableId={tableId}
                     maxRowSelection={maxRowSelection}
                     bulkSelection={bulkSelection}
+                    hasScroll={hasScroll}
                     style={headerStyles}
                 />
             );
@@ -118,6 +123,7 @@ export default class Header extends Component {
                         onResize={this.handleResize}
                         headerWidth={computedWidth}
                     />
+                    <StyledScrollShadow hasScroll={hasScroll} />
                 </StyledWrapper>
             </StyledTh>
         );
@@ -144,6 +150,7 @@ Header.propTypes = {
     tableId: PropTypes.string.isRequired,
     maxRowSelection: PropTypes.number,
     bulkSelection: PropTypes.oneOf(['none', 'some', 'all']),
+    hasScroll: PropTypes.bool,
 };
 
 Header.defaultProps = {
@@ -164,4 +171,5 @@ Header.defaultProps = {
     onDeselectAllRows: () => {},
     maxRowSelection: undefined,
     bulkSelection: 'none',
+    hasScroll: false,
 };
diff --git a/src/components/Table/head/index.js b/src/components/Table/head/index.js
@@ -50,11 +50,13 @@ Head.propTypes = {
     sortDirection: PropTypes.string,
     defaultSortDirection: PropTypes.string,
     sortedBy: PropTypes.string,
+    hasScroll: PropTypes.bool,
 };
 
 Head.defaultProps = {
     columns: undefined,
     sortDirection: undefined,
     defaultSortDirection: 'asc',
     sortedBy: undefined,
+    hasScroll: false,
 };
diff --git a/src/components/Table/head/selectableHeader.js b/src/components/Table/head/selectableHeader.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import InputCheckbox from './InputCheckbox';
 import StyledWrapper from './styled/wrapper';
 import StyledCheckboxWrapper from './styled/checkboxWrapper';
+import StyledScrollShadow from './styled/scrollShadow';
 
 export default function SelectableHeader(props) {
     const {
@@ -11,6 +12,7 @@ export default function SelectableHeader(props) {
         tableId,
         maxRowSelection,
         bulkSelection,
+        hasScroll,
         style,
     } = props;
     const name = `${tableId}-options`;
@@ -27,7 +29,11 @@ export default function SelectableHeader(props) {
     };
 
     if (isRadio) {
-        return <StyledWrapper as="th" style={style} scope="col" tabIndex={-1} />;
+        return (
+            <StyledWrapper as="th" style={style} scope="col" tabIndex={-1}>
+                <StyledScrollShadow hasScroll={hasScroll} />
+            </StyledWrapper>
+        );
     }
 
     return (
@@ -45,6 +51,7 @@ export default function SelectableHeader(props) {
                     onClick={handleClick}
                 />
             </StyledCheckboxWrapper>
+            <StyledScrollShadow hasScroll={hasScroll} />
         </th>
     );
 }
@@ -55,6 +62,7 @@ SelectableHeader.propTypes = {
     tableId: PropTypes.string.isRequired,
     maxRowSelection: PropTypes.number,
     bulkSelection: PropTypes.oneOf(['none', 'some', 'all']),
+    hasScroll: PropTypes.bool,
     style: PropTypes.object,
 };
 
@@ -63,5 +71,6 @@ SelectableHeader.defaultProps = {
     onDeselectAllRows: () => {},
     maxRowSelection: undefined,
     bulkSelection: 'none',
+    hasScroll: false,
     style: undefined,
 };
diff --git a/src/components/Table/head/styled/scrollShadow.js b/src/components/Table/head/styled/scrollShadow.js
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import attachThemeAttrs from '../../../../styles/helpers/attachThemeAttrs';
+
+const StyledScrollShadow = attachThemeAttrs(styled.div)`
+    width: inherit;
+    height: 1px;
+    position: absolute;
+    top: 42px;
+
+    ${props =>
+        props.hasScroll &&
+        `
+        box-shadow: 0 1.5px 2.5px 0 ${props.palette.text.header};
+    `}
+`;
+
+export default StyledScrollShadow;
diff --git a/src/components/Table/index.js b/src/components/Table/index.js
@@ -221,6 +221,14 @@ export default class Table extends Component {
         });
     }
 
+    isScrollActive() {
+        if (this.scrollableY.current) {
+            const { clientHeight, scrollHeight } = this.scrollableY.current;
+            return clientHeight < scrollHeight;
+        }
+        return false;
+    }
+
     updateColumnsAndTableWidth(newColumns) {
         const { columns } = this.state;
         const { minColumnWidth, maxColumnWidth } = this.props;
@@ -431,6 +439,7 @@ export default class Table extends Component {
                                                 tableId={this.tableId}
                                                 maxRowSelection={maxRowSelection}
                                                 bulkSelection={bulkSelection}
+                                                hasScroll={this.isScrollActive()}
                                             />
                                         </tr>
                                     </thead>