Merge pull request #1396 from vtex/feature/handle-toggle-columns

Add handle callback on toggle fields visibility

Author: wagnerlduarte

CHANGELOG.md

@@ -7,13 +7,17 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Possibility to get callback on toggle fields visibility with `onToggleColumn`, `onHideAllColumns` and `onShowAllColumns`
+
 ## [9.143.0] - 2021-06-16
 
 ### Fixed
 
 - **Modal** sometimes not loading `window.scroll` polyfill after the browser hard refresh.
 
-### Added 
+### Added
 
 - **Dropdown** `disabled` prop added to options
 

react/components/Table/README.md

@@ -790,6 +790,12 @@ class ResourceListExample extends React.Component {
             label: 'Toggle visible fields',
             showAllLabel: 'Show All',
             hideAllLabel: 'Hide All',
+            onToggleColumn: (params) => {
+              console.log(params.toggledField)
+              console.log(params.activeFields)
+            },
+            onHideAllColumns: (activeFields) => console.log(activeFields),
+            onShowAllColumns: (activeFields) => console.log(activeFields),
           },
           extraActions: {
             label: 'More options',
@@ -1714,6 +1720,12 @@ class ResourceListExample extends React.Component {
             label: 'Toggle visible fields',
             showAllLabel: 'Show All',
             hideAllLabel: 'Hide All',
+            onToggleColumn: (params) => {
+              console.log(params.toggledField)
+              console.log(params.activeFields)
+            },
+            onHideAllColumns: (activeFields) => console.log(activeFields),
+            onShowAllColumns: (activeFields) => console.log(activeFields),
           },
           extraActions: {
             label: 'More options',

react/components/Table/index.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import reduce from 'lodash/reduce'
 import map from 'lodash/map'
 import isEmpty from 'lodash/isEmpty'
+import difference from 'lodash/difference'
 
 import Box from '../Box'
 import EmptyState from '../EmptyState'
@@ -81,14 +82,39 @@ class Table extends PureComponent {
     const index = hiddenFields.indexOf(key)
     index === -1 ? newFieldsArray.push(key) : newFieldsArray.splice(index, 1)
     this.setState({ hiddenFields: newFieldsArray })
+
+    const { toolbar } = this.props
+
+    const activeFields = difference(
+      Object.keys(this.props.schema.properties),
+      newFieldsArray
+    )
+
+    if (toolbar?.fields?.onToggleColumn) {
+      toolbar.fields.onToggleColumn({ toggledField: key, activeFields })
+    }
   }
 
   handleShowAllColumns = () => {
     this.setState({ hiddenFields: [] })
+
+    const { toolbar } = this.props
+
+    if (toolbar?.fields?.onShowAllColumns) {
+      toolbar.fields.onShowAllColumns(Object.keys(this.props.schema.properties))
+    }
   }
 
   handleHideAllColumns = () => {
-    this.setState({ hiddenFields: Object.keys(this.props.schema.properties) })
+    const newFieldsArray = Object.keys(this.props.schema.properties)
+
+    this.setState({ hiddenFields: newFieldsArray })
+
+    const { toolbar } = this.props
+
+    if (toolbar?.fields?.onHideAllColumns) {
+      toolbar.fields.onHideAllColumns([])
+    }
   }
 
   handleSelectionChange = () => {
@@ -441,6 +467,9 @@ Table.propTypes = {
       showAllLabel: PropTypes.string,
       hideAllLabel: PropTypes.string,
       alignMenu: PropTypes.oneOf(['right', 'left']),
+      onToggleColumn: PropTypes.func,
+      onHideAllColumns: PropTypes.func,
+      onShowAllColumns: PropTypes.func,
     }),
     download: PropTypes.shape({
       label: PropTypes.string,