Merge pull request #602 from innucesolutions/master

Allow the toolbar to be rendered when a row is selected
gregnb · Jun 5, 2020 · 4209312 · 4209312
2 parents b8eec4c + 626f56a
commit 4209312
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -161,7 +161,7 @@ The component accepts the following props:
 |**`selectableRows`**|string|'multiple'|Numbers of rows that can be selected. Options are "multiple", "single", "none". **(Boolean options have been deprecated.)**
 |**`selectableRowsHideCheckboxes`**|boolean|false|Hides the checkboxes that appear when selectableRows is set to "multiple" or "single". Can provide a more custom UX, especially when paired with selectableRowsOnClick.
 |**`selectableRowsOnClick`**|boolean|false|Enable/disable select toggle when row is clicked. When False, only checkbox will trigger this action.
-|**`disableToolbarSelect`**|boolean|false|Enable/disable the Select Toolbar that appears when a row is selected.
+|**`disableToolbarSelect` DEPRECATED (use `selectToolbarPlacement='none'`)**|boolean|false|Enable/disable the Select Toolbar that appears when a row is selected.
 |**`isRowSelectable`**|function||Enable/disable selection on certain rows with custom function. Returns true if not provided. `function(dataIndex: number, selectedRows: object(lookup: {dataindex: boolean}, data: arrayOfObjects: {index, dataIndex})) => boolean`.
 |**`isRowExpandable`**|function||Enable/disable expansion or collapse on certain expandable rows with custom function. Will be considered true if not provided. `function(dataIndex: number, expandedRows: object(lookup: {dataIndex: number}, data: arrayOfObjects: {index: number, dataIndex: number})) => boolean`.
 |**`selectableRowsHeader`**|boolean|true|Show/hide the select all/deselect all checkbox header for selectable rows
@@ -219,7 +219,7 @@ The component accepts the following props:
 |**`onTableInit`**|function||Callback function that triggers when table state has been initialized. `function(action: string, tableState: object) => void`
 |**`setRowProps`**|function||Is called for each row and allows you to return custom props for this row based on its data. `function(row: array, dataIndex: number) => object` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js)
 |**`setTableProps`**|function||Is called for the table and allows you to return custom props for the table based on its data. `function() => object` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js)
-
+|**`selectToolbarPlacement`**|string|'replace'|Controls the visibility of the Select Toolbar, options are 'replace' (select toolbar replaces default toolbar when a row is selected), 'above' (select toolbar will appear above default toolbar when a row is selected) and 'none' (select toolbar will never appear)
 ## Customize Columns
 
 On each column object, you have the ability to customize columns to your liking with the 'options' property. Example:

diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
@@ -88,6 +88,12 @@ const hasToolbarItem = (options, title) => {
   return !isUndefined(find(TOOLBAR_ITEMS, i => options[i]));
 };
 
+const SELECT_TOOLBAR_PLACEMENT_OPTIONS = {
+  REPLACE: 'replace',
+  ABOVE: 'above',
+  NONE: 'none'
+}
+
 class MUIDataTable extends React.Component {
   static propTypes = {
     /** Title of the table */
@@ -206,6 +212,7 @@ class MUIDataTable extends React.Component {
       searchPlaceholder: PropTypes.string,
       searchText: PropTypes.string,
       setRowProps: PropTypes.func,
+      selectToolbarPlacement: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([SELECT_TOOLBAR_PLACEMENT_OPTIONS.REPLACE, SELECT_TOOLBAR_PLACEMENT_OPTIONS.ABOVE, SELECT_TOOLBAR_PLACEMENT_OPTIONS.NONE])]),
       setTableProps: PropTypes.func,
       sort: PropTypes.bool,
       viewColumns: PropTypes.bool,
@@ -307,6 +314,12 @@ class MUIDataTable extends React.Component {
   }
 
   updateOptions(options, props) {
+    // set backwards compatibility options
+    if (props.options.disableToolbarSelect === true && props.options.selectToolbarPlacement === undefined) {
+      // if deprecated option disableToolbarSelect is set and selectToolbarPlacement is default then use it
+      props.options.selectToolbarPlacement = SELECT_TOOLBAR_PLACEMENT_OPTIONS.NONE;
+    }
+
     this.options = assignwith(options, props.options, (objValue, srcValue, key) => {
       // Merge any default options that are objects, as they will be overwritten otherwise
       if (key === 'textLabels' || key === 'downloadOptions') return merge(objValue, srcValue);
@@ -360,6 +373,7 @@ class MUIDataTable extends React.Component {
     sortFilterList: true,
     textLabels: getTextLabels(),
     viewColumns: true,
+    selectToolbarPlacement: SELECT_TOOLBAR_PLACEMENT_OPTIONS.REPLACE,
   });
 
   handleOptionDeprecation = () => {
@@ -392,6 +406,18 @@ class MUIDataTable extends React.Component {
         );
       }
     });
+
+    if (this.options.disableToolbarSelect === true) {
+      console.error(
+        'The option "disableToolbarSelect" has been deprecated. It is being replaced by "selectToolbarPlacement"="none".',
+      );
+    }
+
+    if (Object.values(SELECT_TOOLBAR_PLACEMENT_OPTIONS).indexOf(this.options.selectToolbarPlacement) === -1) {
+      console.error(
+        'Invalid option value for selectToolbarPlacement. Please check the documentation.',
+      );
+    }
   };
 
   /*
@@ -1314,7 +1340,7 @@ class MUIDataTable extends React.Component {
           let selectedMap = buildMap(newRows);
 
           // if the select toolbar is disabled, the rules are a little different
-          if (this.options.disableToolbarSelect === true) {
+          if (this.options.selectToolbarPlacement === SELECT_TOOLBAR_PLACEMENT_OPTIONS.NONE) {
             if (selectedRowsLen > displayData.length) {
               isDeselect = true;
             } else {
@@ -1538,7 +1564,7 @@ class MUIDataTable extends React.Component {
 
     return (
       <Paper elevation={this.options.elevation} ref={this.tableContent} className={paperClasses}>
-        {selectedRows.data.length && this.options.disableToolbarSelect !== true ? (
+        {selectedRows.data.length > 0 && this.options.selectToolbarPlacement !== SELECT_TOOLBAR_PLACEMENT_OPTIONS.NONE && (
           <TableToolbarSelectComponent
             options={this.options}
             selectedRows={selectedRows}
@@ -1547,7 +1573,8 @@ class MUIDataTable extends React.Component {
             selectRowUpdate={this.selectRowUpdate}
             components={this.props.components}
           />
-        ) : (
+        )}
+        {(selectedRows.data.length === 0 || [SELECT_TOOLBAR_PLACEMENT_OPTIONS.ABOVE, SELECT_TOOLBAR_PLACEMENT_OPTIONS.NONE].includes(this.options.selectToolbarPlacement)) &&
           showToolbar && (
             <TableToolbarComponent
               columns={columns}
@@ -1567,8 +1594,7 @@ class MUIDataTable extends React.Component {
               setTableAction={this.setTableAction}
               components={this.props.components}
             />
-          )
-        )}
+          )}
         <TableFilterListComponent
           options={this.options}
           serverSideFilterList={this.props.options.serverSideFilterList || []}