Export ToolbarContainer

vtex · Jul 22, 2019 · 39d247d · 39d247d
1 parent 5b412cd
commit 39d247d
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 27 deletions.
diff --git a/react/components/TableCompose/README.md b/react/components/TableCompose/README.md
@@ -1936,6 +1936,7 @@ Document
 
 ```js
 const sampleData = require('./sampleData').default
+const InlineGrid = require('../icon/InlineGrid').default
 const useTableState = require('./hooks/useTableState').default
 
 const tableLength = 5
@@ -1972,7 +1973,7 @@ function ResourceListExample() {
   const tableState = useTableState(
     schema,
     sampleData.items.slice(0, tableLength),
-    'low'
+    'high'
   )
 
   const density = {
@@ -2001,15 +2002,17 @@ function ResourceListExample() {
   return (
     <Table tableState={tableState}>
       <Table.Toolbar>
-        <Table.Toolbar.Button
-          icon={<span>🔥</span>}
-          label="High Density"
-          onClick={() => tableState.setDensity('high')}
-        />
-        <Table.Toolbar.ButtonDensity density={density} />
-        <Table.Toolbar.ButtonFields fields={fields} />
-        <Table.Toolbar.ButtonDownload download={download} />
-        <Table.Toolbar.ButtonUpload upload={upload} />
+        <Table.Toolbar.Container justify="center">
+          <Table.Toolbar.Button
+            icon={<InlineGrid />}
+            label="Low Density"
+            onClick={() => tableState.setDensity('low')}
+          />
+          <Table.Toolbar.ButtonDensity density={density} />
+          <Table.Toolbar.ButtonFields fields={fields} />
+          <Table.Toolbar.ButtonDownload download={download} />
+          <Table.Toolbar.ButtonUpload upload={upload} />
+        </Table.Toolbar.Container>
       </Table.Toolbar>
     </Table>
   )

diff --git a/react/components/TableCompose/Toolbar/index.js b/react/components/TableCompose/Toolbar/index.js
@@ -10,6 +10,20 @@ import ButtonNewLine from './ButtonNewLine'
 import ExtraActions from './ExtraActions'
 import ButtonToolbar from './ButtonToolbar'
 
+const Container = ({ justify = 'end', children }) => (
+  <div id="toolbar" className={`mb5 flex flex-row w-100 justify-${justify}`}>
+    {children}
+  </div>
+)
+
+Container.propTypes = {
+  justify: PropTypes.oneOf(['between', 'end', 'start', 'around', 'center']),
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+}
+
 const Toolbar = ({
   actions: {
     inputSearch,
@@ -38,16 +52,12 @@ const Toolbar = ({
     density.highOptionLabel
 
   return (
-    <div
-      id="toolbar"
-      className={`mb5 flex flex-row w-100 ${
-        isSearchBarVisible ? 'justify-between' : 'justify-end'
-      }`}>
-      {inputSearch && (
-        <InputToolbar disabled={loading} inputSearch={inputSearch} />
-      )}
-      <div className="flex flex-row items-center">
-        {children || (
+    children || (
+      <Container justify={isSearchBarVisible ? 'between' : 'end'}>
+        {inputSearch && (
+          <InputToolbar disabled={loading} inputSearch={inputSearch} />
+        )}
+        <div className="flex flex-row items-center">
           <Fragment>
             {isDensityVisible && (
               <ButtonDensity density={density} disabled={loading} />
@@ -68,12 +78,13 @@ const Toolbar = ({
               <ButtonNewLine newLine={newLine} disabled={loading} />
             )}
           </Fragment>
-        )}
-      </div>
-    </div>
+        </div>
+      </Container>
+    )
   )
 }
 
+Toolbar.Container = Container
 Toolbar.ButtonDensity = ButtonDensity
 Toolbar.ButtonFields = ButtonFields
 Toolbar.ButtonDownload = ButtonDownload

diff --git a/react/components/TableCompose/hooks/useTableState.js b/react/components/TableCompose/hooks/useTableState.js
@@ -19,6 +19,7 @@ const useTableState = (
   inheritState
 ) => {
   return (
+    // TODO: Find a better way to inherit states
     inheritState || useHook(schema, items, density, bulkActions, pagination) // eslint-disable-line
   )
 }
@@ -213,7 +214,9 @@ const useHook = (schema, items, density, bulkActions, pagination) => {
 
   return {
     state,
-    dispatch,
+    data,
+    staticSchema,
+    displaySchema,
     setDensity,
     setTableRowHeight,
     setSelectedRows,
@@ -226,9 +229,6 @@ const useHook = (schema, items, density, bulkActions, pagination) => {
     deselectAllRows,
     selectAllVisibleRows,
     selectRow,
-    displaySchema,
-    data,
-    staticSchema,
     hasPrimaryBulkAction,
     hasSecondaryBulkActions,
     hasBulkActions,