Merge pull request #29 from jbetancur/28-table-header-fixes

table header should show overflow and hide actions on pending state
jbetancur · Jun 18, 2018 · 6990df2 · 6990df2
2 parents 2f1e781 + 0ff554e
commit 6990df2
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 16 deletions.
diff --git a/src/DataTable/DataTable.js b/src/DataTable/DataTable.js
@@ -290,13 +290,14 @@ class DataTable extends Component {
           overflowY={overflowY}
         >
           {!noHeader &&
-            <TableHeader
-              title={title}
-              showContextMenu={selectedCount > 0}
-              contextTitle={this.generateDefaultContextTitle()}
-              contextActions={contextActions}
-              actions={actions}
-            />}
+          <TableHeader
+            title={title}
+            showContextMenu={selectedCount > 0}
+            contextTitle={this.generateDefaultContextTitle()}
+            contextActions={contextActions}
+            actions={actions}
+            pending={progressPending}
+          />}
 
           <TableWrapper>
             {progressPending &&

diff --git a/src/DataTable/TableHeader.js b/src/DataTable/TableHeader.js
@@ -5,7 +5,7 @@ import ContextMenu from './ContextMenu';
 
 const TableHeaderStyle = styled.header`
   position: relative;
-  overflow: hidden;
+  overflow: visible;
   display: flex;
   flex: 1 0 auto;
   align-items: center;
@@ -26,21 +26,23 @@ const Actions = styled.div`
   flex: 1 0 auto;
   display: flex;
   justify-content: flex-end;
+  align-items: center;
 
   > * {
     margin-left: 5px;
   }
 `;
 
-const TableHeader = ({ title, showContextMenu, contextTitle, actions, contextActions }) => (
+const TableHeader = ({ title, showContextMenu, contextTitle, actions, contextActions, pending }) => (
   <TableHeaderStyle>
     <Title>
       {title}
     </Title>
 
-    <Actions>
-      {actions}
-    </Actions>
+    {!pending &&
+      <Actions>
+        {actions}
+      </Actions>}
 
     <ContextMenu
       visible={showContextMenu}
@@ -59,13 +61,15 @@ TableHeader.propTypes = {
   contextTitle: PropTypes.string,
   actions: PropTypes.arrayOf(PropTypes.node),
   contextActions: PropTypes.arrayOf(PropTypes.node),
+  pending: PropTypes.bool,
 };
 
 TableHeader.defaultProps = {
   showContextMenu: false,
   contextTitle: '',
   actions: [],
   contextActions: [],
+  pending: false,
 };
 
 export default withTheme(TableHeader);
diff --git a/src/DataTable/__tests__/__snapshots__/DataTable.test.js.snap b/src/DataTable/__tests__/__snapshots__/DataTable.test.js.snap
@@ -14,6 +14,7 @@ exports[`component <DataTable /> should render correctly 1`] = `
   <WithTheme(TableHeader)
     contextActions={Array []}
     contextTitle="0 item selected"
+    pending={false}
     showContextMenu={false}
     title=""
   />
@@ -39,6 +40,7 @@ exports[`component <DataTable /> should render correctly if the keyField is over
   <WithTheme(TableHeader)
     contextActions={Array []}
     contextTitle="0 item selected"
+    pending={false}
     showContextMenu={false}
     title=""
   />
@@ -135,6 +137,7 @@ exports[`component <DataTable /> should render correctly with a default sort fie
   <WithTheme(TableHeader)
     contextActions={Array []}
     contextTitle="0 item selected"
+    pending={false}
     showContextMenu={false}
     title=""
   />
@@ -231,6 +234,7 @@ exports[`component <DataTable /> should render correctly with columns/data 1`] =
   <WithTheme(TableHeader)
     contextActions={Array []}
     contextTitle="0 item selected"
+    pending={false}
     showContextMenu={false}
     title=""
   />

diff --git a/src/DataTable/__tests__/__snapshots__/TableHeader.test.js.snap b/src/DataTable/__tests__/__snapshots__/TableHeader.test.js.snap
@@ -40,7 +40,7 @@ exports[`component <TableHeader title /> should render correctly 1`] = `
 
 .c0 {
   position: relative;
-  overflow: hidden;
+  overflow: visible;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -82,6 +82,10 @@ exports[`component <TableHeader title /> should render correctly 1`] = `
   -webkit-justify-content: flex-end;
   -ms-flex-pack: end;
   justify-content: flex-end;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .c2 > * {
@@ -95,6 +99,7 @@ exports[`component <TableHeader title /> should render correctly 1`] = `
     actions={Array []}
     contextActions={Array []}
     contextTitle=""
+    pending={false}
     showContextMenu={false}
     theme={
       Object {
@@ -221,7 +226,7 @@ exports[`component <TableHeader title /> should render correctly 1`] = `
 exports[`component <TableHeader title contextActions /> should render correctly 1`] = `
 .c0 {
   position: relative;
-  overflow: hidden;
+  overflow: visible;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -266,7 +271,7 @@ exports[`component <TableHeader title contextActions /> should render correctly
 exports[`component <TableHeader title contextTitle /> should render correctly 1`] = `
 .c0 {
   position: relative;
-  overflow: hidden;
+  overflow: visible;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -305,7 +310,7 @@ exports[`component <TableHeader title contextTitle /> should render correctly 1`
 exports[`component <TableHeader title showContextMenu /> should render correctly 1`] = `
 .c0 {
   position: relative;
-  overflow: hidden;
+  overflow: visible;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;