refactor(react-grid): rename the *hiddenColumns getters and props (#651)

BREAKING CHANGES: We renamed the following TableColumnVisibility plugin's properties to improve the API consistency: - `hiddenColumns` -> `hiddenColumnNames` - `defaultHiddenColumns` -> `defaultHiddenColumnNames` - `onHiddenColumnsChange` -> `onHiddenColumnNamesChange` The `hiddenColumns` getter has been renamed to `hiddenColumnNames`.
DevExpress · Jan 11, 2018 · 068604d · 068604d
1 parent bb5ef97
commit 068604d
Show file tree

Hide file tree

Showing 25 changed files with 87 additions and 165 deletions.
diff --git a/packages/dx-grid-core/src/column-chooser/computeds.js b/packages/dx-grid-core/src/column-chooser/computeds.js
diff --git a/packages/dx-grid-core/src/column-chooser/reducers.js b/packages/dx-grid-core/src/column-chooser/reducers.js
diff --git a/packages/dx-grid-core/src/index.js b/packages/dx-grid-core/src/index.js
@@ -68,8 +68,8 @@ export * from './plugins/table/computeds';
 
 export * from './plugins/table-column-visibility/computeds';
 
-export * from './column-chooser/computeds';
-export * from './column-chooser/reducers';
+export * from './plugins/column-chooser/computeds';
+export * from './plugins/column-chooser/reducers';
 
 export { getColumnExtension } from './utils/column';
 

diff --git a/packages/dx-grid-core/src/plugins/column-chooser/computeds.js b/packages/dx-grid-core/src/plugins/column-chooser/computeds.js
@@ -0,0 +1,2 @@
+export const columnChooserItems = (columns, hiddenColumnNames) =>
+  columns.map(column => ({ column, hidden: hiddenColumnNames.indexOf(column.name) !== -1 }));
diff --git a/...core/src/column-chooser/computeds.test.js → .../plugins/column-chooser/computeds.test.js b/...core/src/column-chooser/computeds.test.js → .../plugins/column-chooser/computeds.test.js
@@ -4,9 +4,9 @@ describe('ColumnChooser computeds', () => {
   describe('#columnChooserItems', () => {
     it('should return items correctly', () => {
       const columns = [{ name: 'a' }, { name: 'b' }, { name: 'c' }];
-      const hiddenColumns = ['c', 'a'];
+      const hiddenColumnNames = ['c', 'a'];
 
-      expect(columnChooserItems(columns, hiddenColumns))
+      expect(columnChooserItems(columns, hiddenColumnNames))
         .toEqual([
           { column: { name: 'a' }, hidden: true },
           { column: { name: 'b' }, hidden: false },

diff --git a/packages/dx-grid-core/src/plugins/column-chooser/reducers.js b/packages/dx-grid-core/src/plugins/column-chooser/reducers.js
@@ -0,0 +1,5 @@
+export const toggleColumn = (hiddenColumnNames, columnName) => (
+  hiddenColumnNames.indexOf(columnName) === -1
+    ? [...hiddenColumnNames, columnName]
+    : hiddenColumnNames.filter(hiddenColumn => hiddenColumn !== columnName)
+);
diff --git a/...-core/src/column-chooser/reducers.test.js → ...c/plugins/column-chooser/reducers.test.js b/...-core/src/column-chooser/reducers.test.js → ...c/plugins/column-chooser/reducers.test.js
diff --git a/packages/dx-grid-core/src/plugins/table-column-visibility/computeds.js b/packages/dx-grid-core/src/plugins/table-column-visibility/computeds.js
@@ -1,5 +1,6 @@
 import { TABLE_DATA_TYPE } from './../table/constants';
 
-export const visibleTableColumns = (tableColumns, hiddenColumns) =>
+export const visibleTableColumns = (tableColumns, hiddenColumnNames) =>
   tableColumns.filter(tableColumn =>
-    tableColumn.type !== TABLE_DATA_TYPE || hiddenColumns.indexOf(tableColumn.column.name) === -1);
+    tableColumn.type !== TABLE_DATA_TYPE ||
+    hiddenColumnNames.indexOf(tableColumn.column.name) === -1);
diff --git a/packages/dx-grid-core/src/plugins/table-column-visibility/computeds.test.js b/packages/dx-grid-core/src/plugins/table-column-visibility/computeds.test.js
@@ -10,9 +10,9 @@ describe('TableColumnVisibility computeds', () => {
         { type: TABLE_DATA_TYPE, column: { name: 'c' } },
         { type: TABLE_DATA_TYPE, column: { name: 'd' } },
       ];
-      const hiddenColumns = ['a', 'c', 'd'];
+      const hiddenColumnNames = ['a', 'c', 'd'];
 
-      expect(visibleTableColumns(tableColumns, hiddenColumns))
+      expect(visibleTableColumns(tableColumns, hiddenColumnNames))
         .toEqual([{ type: TABLE_DATA_TYPE, column: { name: 'b' } }]);
     });
 
@@ -22,9 +22,9 @@ describe('TableColumnVisibility computeds', () => {
         { type: TABLE_DATA_TYPE, column: { name: 'a' } },
         { type: TABLE_DATA_TYPE, column: { name: 'b' } },
       ];
-      const hiddenColumns = ['a'];
+      const hiddenColumnNames = ['a'];
 
-      expect(visibleTableColumns(tableColumns, hiddenColumns))
+      expect(visibleTableColumns(tableColumns, hiddenColumnNames))
         .toEqual([{ key: 'editCommand' }, { type: TABLE_DATA_TYPE, column: { name: 'b' } }]);
     });
   });

diff --git a/packages/dx-react-demos/src/bootstrap3/column-chooser/controlled.jsx b/packages/dx-react-demos/src/bootstrap3/column-chooser/controlled.jsx
@@ -26,17 +26,17 @@ export default class Demo extends React.PureComponent {
         { columnName: 'sex', width: 100 },
       ],
       rows: generateRows({ length: 6 }),
-      hiddenColumns: ['sex', 'car'],
+      hiddenColumnNames: ['sex', 'car'],
     };
 
-    this.hiddenColumnsChange = (hiddenColumns) => {
-      this.setState({ hiddenColumns });
+    this.hiddenColumnNamesChange = (hiddenColumnNames) => {
+      this.setState({ hiddenColumnNames });
     };
   }
 
   render() {
     const {
-      columns, rows, tableColumnExtensions, hiddenColumns,
+      columns, rows, tableColumnExtensions, hiddenColumnNames,
     } = this.state;
 
     return (
@@ -49,8 +49,8 @@ export default class Demo extends React.PureComponent {
         />
         <TableHeaderRow />
         <TableColumnVisibility
-          hiddenColumns={hiddenColumns}
-          onHiddenColumnsChange={this.hiddenColumnsChange}
+          hiddenColumnNames={hiddenColumnNames}
+          onHiddenColumnNamesChange={this.hiddenColumnNamesChange}
         />
         <Toolbar />
         <ColumnChooser />

diff --git a/packages/dx-react-demos/src/bootstrap3/column-chooser/uncontrolled.jsx b/packages/dx-react-demos/src/bootstrap3/column-chooser/uncontrolled.jsx
@@ -23,12 +23,12 @@ export default class Demo extends React.PureComponent {
         { name: 'car', title: 'Car' },
       ],
       rows: generateRows({ length: 6 }),
-      defaultHiddenColumns: ['sex', 'car'],
+      defaultHiddenColumnNames: ['sex', 'car'],
     };
   }
 
   render() {
-    const { columns, rows, defaultHiddenColumns } = this.state;
+    const { columns, rows, defaultHiddenColumnNames } = this.state;
     return (
       <Grid
         rows={rows}
@@ -37,7 +37,7 @@ export default class Demo extends React.PureComponent {
         <Table />
         <TableHeaderRow />
         <TableColumnVisibility
-          defaultHiddenColumns={defaultHiddenColumns}
+          defaultHiddenColumnNames={defaultHiddenColumnNames}
         />
         <Toolbar />
         <ColumnChooser />

diff --git a/packages/dx-react-demos/src/bootstrap3/featured-uncontrolled-mode/demo.jsx b/packages/dx-react-demos/src/bootstrap3/featured-uncontrolled-mode/demo.jsx
@@ -108,7 +108,7 @@ export default class Demo extends React.PureComponent {
         />
         <TableSelection showSelectAll />
         <TableColumnVisibility
-          defaultHiddenColumns={['customer']}
+          defaultHiddenColumnNames={['customer']}
         />
         <Toolbar />
         <GroupingPanel showSortingControls />

diff --git a/packages/dx-react-demos/src/material-ui/column-chooser/basic.jsx b/packages/dx-react-demos/src/material-ui/column-chooser/basic.jsx
diff --git a/packages/dx-react-demos/src/material-ui/column-chooser/controlled.jsx b/packages/dx-react-demos/src/material-ui/column-chooser/controlled.jsx
@@ -24,16 +24,16 @@ export default class Demo extends React.PureComponent {
         { name: 'car', title: 'Car' },
       ],
       rows: generateRows({ length: 6 }),
-      hiddenColumns: ['sex', 'car'],
+      hiddenColumnNames: ['sex', 'car'],
     };
 
-    this.hiddenColumnsChange = (hiddenColumns) => {
-      this.setState({ hiddenColumns });
+    this.hiddenColumnNamesChange = (hiddenColumnNames) => {
+      this.setState({ hiddenColumnNames });
     };
   }
 
   render() {
-    const { columns, rows, hiddenColumns } = this.state;
+    const { columns, rows, hiddenColumnNames } = this.state;
     return (
       <Paper>
         <Grid
@@ -44,8 +44,8 @@ export default class Demo extends React.PureComponent {
           <Toolbar />
           <TableHeaderRow />
           <TableColumnVisibility
-            hiddenColumns={hiddenColumns}
-            onHiddenColumnsChange={this.hiddenColumnsChange}
+            hiddenColumnNames={hiddenColumnNames}
+            onHiddenColumnNamesChange={this.hiddenColumnNamesChange}
           />
           <ColumnChooser />
         </Grid>

diff --git a/packages/dx-react-demos/src/material-ui/column-chooser/uncontrolled.jsx b/packages/dx-react-demos/src/material-ui/column-chooser/uncontrolled.jsx
@@ -24,12 +24,12 @@ export default class Demo extends React.PureComponent {
         { name: 'car', title: 'Car' },
       ],
       rows: generateRows({ length: 6 }),
-      defaultHiddenColumns: ['sex', 'car'],
+      defaultHiddenColumnNames: ['sex', 'car'],
     };
   }
 
   render() {
-    const { columns, rows, defaultHiddenColumns } = this.state;
+    const { columns, rows, defaultHiddenColumnNames } = this.state;
     return (
       <Paper>
         <Grid
@@ -40,7 +40,7 @@ export default class Demo extends React.PureComponent {
           <Toolbar />
           <TableHeaderRow />
           <TableColumnVisibility
-            defaultHiddenColumns={defaultHiddenColumns}
+            defaultHiddenColumnNames={defaultHiddenColumnNames}
           />
           <ColumnChooser />
         </Grid>

diff --git a/packages/dx-react-demos/src/material-ui/featured-uncontrolled-mode/demo.jsx b/packages/dx-react-demos/src/material-ui/featured-uncontrolled-mode/demo.jsx
@@ -114,7 +114,7 @@ export default class Demo extends React.PureComponent {
 
           <TableGroupRow />
           <TableColumnVisibility
-            defaultHiddenColumns={['customer']}
+            defaultHiddenColumnNames={['customer']}
           />
           <Toolbar />
           <GroupingPanel showSortingControls />

diff --git a/packages/dx-react-grid-material-ui/src/plugins/column-chooser.jsx b/packages/dx-react-grid-material-ui/src/plugins/column-chooser.jsx
@@ -32,7 +32,7 @@ ColumnChooser.Overlay = Overlay;
 
 ColumnChooser.propTypes = {
   messages: PropTypes.shape({
-    hiddenColumns: PropTypes.string,
+    hiddenColumnNames: PropTypes.string,
   }),
 };
 

diff --git a/packages/dx-react-grid-material-ui/src/templates/column-chooser/toggle-button.test.jsx b/packages/dx-react-grid-material-ui/src/templates/column-chooser/toggle-button.test.jsx
@@ -10,7 +10,7 @@ const defaultProps = {
 };
 
 describe('ToggleButton', () => {
-  it('should provide a hiddenColumns message text', () => {
+  it('should provide a correct message text', () => {
     const tree = shallow((
       <ToggleButton
         {...defaultProps}

diff --git a/packages/dx-react-grid/docs/guides/column-visibility.md b/packages/dx-react-grid/docs/guides/column-visibility.md
@@ -14,12 +14,12 @@ Import the plugins listed above to enable a user to hide or show columns at runt
 
 ### Uncontrolled Mode
 
-In [uncontrolled mode](controlled-and-uncontrolled-modes.md#uncontrolled-mode), specify initially hidden columns via the `TableColumnVisibility` plugin's `defaultHiddenColumns` property.
+In [uncontrolled mode](controlled-and-uncontrolled-modes.md#uncontrolled-mode), specify initially hidden column names via the `TableColumnVisibility` plugin's `defaultHiddenColumnNames` property.
 
 .embedded-demo(column-chooser/uncontrolled)
 
 ### Controlled Mode
 
-In [controlled mode](controlled-and-uncontrolled-modes.md#controlled-mode), pass the hidden columns to the `TableColumnVisibility` plugin's `hiddenColumns` property and handle the `onHiddenColumnsChange` event to control column visibility externally.
+In [controlled mode](controlled-and-uncontrolled-modes.md#controlled-mode), pass the hidden column names to the `TableColumnVisibility` plugin's `hiddenColumnNames` property and handle the `onHiddenColumnNamesChange` event to control column visibility externally.
 
 .embedded-demo(column-chooser/controlled)
diff --git a/packages/dx-react-grid/docs/reference/column-chooser.md b/packages/dx-react-grid/docs/reference/column-chooser.md
@@ -104,7 +104,7 @@ If you specify additional properties, they are added to a component's root eleme
 Name | Plugin | Type | Description
 -----|--------|------|------------
 columns | Getter | Array&lt;[Column](grid.md#column)&gt; | Grid columns.
-hiddenColumns | Getter | Array&lt;[Column](grid.md#column)&gt; | Columns to be hidden.
+hiddenColumnNames | Getter | Array&lt;string&gt; | Names of columns to be hidden.
 toggleColumnVisibility | Action | ({ columnName: string }) => void | Toggles a column's visibility.
 toolbarContent | Template | Object? | A template that renders toolbar content.
 

diff --git a/packages/dx-react-grid/docs/reference/table-column-visibility.md b/packages/dx-react-grid/docs/reference/table-column-visibility.md
@@ -12,9 +12,9 @@ A plugin that manages Grid columns' visibility.
 
 Name | Type | Default | Description
 -----|------|---------|------------
-hiddenColumns | Array&lt;string&gt; | | Hidden column names.
-defaultHiddenColumns | Array&lt;string&gt; | [] | Names of initially hidden columns in uncontrolled mode.
-onHiddenColumnsChange | (hiddenColumns: Array&lt;string&gt;) => void | | Handles hidden columns adding or removing.
+hiddenColumnNames | Array&lt;string&gt; | | Hidden column names.
+defaultHiddenColumnNames | Array&lt;string&gt; | [] | Names of initially hidden columns in uncontrolled mode.
+onHiddenColumnNamesChange | (hiddenColumnNames: Array&lt;string&gt;) => void | | Handles hidden columns adding or removing.
 emptyMessageComponent | ElementType&lt;[EmptyMessageProps](#emptymessageprops)&gt; | | A component that renders a message that is displayed when all columns are hidden.
 messages | object | | An object that specifies [localization messages](#localization-messages).
 
@@ -58,5 +58,5 @@ table | Template | Object? | A template that renders a table.
 Name | Plugin | Type | Description
 -----|--------|------|------------
 tableColumns | Getter | Array&lt;[TableColumn](table.md#tablecolumn)&gt; | Visible table columns.
-hiddenColumns | Getter | Array&lt;[TableColumn](table.md#tablecolumn)&gt; | Hidden table columns.
+hiddenColumnNames | Getter | Array&lt;string&gt; | Hidden table column names.
 toggleColumnVisibility | Action | ({ columnName: string }) => void | Toggles a column's visibility.
diff --git a/packages/dx-react-grid/src/plugins/column-chooser.jsx b/packages/dx-react-grid/src/plugins/column-chooser.jsx
@@ -50,7 +50,7 @@ export class ColumnChooser extends React.PureComponent {
         <Template name="toolbarContent">
           <TemplatePlaceholder />
           <TemplateConnector>
-            {({ columns, hiddenColumns }, { toggleColumnVisibility }) => (
+            {({ columns, hiddenColumnNames }, { toggleColumnVisibility }) => (
               <React.Fragment>
                 <ToggleButton
                   buttonRef={this.buttonRef}
@@ -63,7 +63,7 @@ export class ColumnChooser extends React.PureComponent {
                   onHide={this.handleHide}
                 >
                   <Container>
-                    {columnChooserItems(columns, hiddenColumns)
+                    {columnChooserItems(columns, hiddenColumnNames)
                       .map(item => (
                         <Item
                           key={item.column.name}

diff --git a/packages/dx-react-grid/src/plugins/column-chooser.test.jsx b/packages/dx-react-grid/src/plugins/column-chooser.test.jsx
@@ -17,7 +17,7 @@ const defaultDeps = {
       { name: 'b' },
       { name: 'c' },
     ],
-    hiddenColumns: ['a'],
+    hiddenColumnNames: ['a'],
   },
   action: {
     toggleVisibility: () => { },
@@ -117,6 +117,6 @@ describe('ColumnChooser', () => {
     expect(columnChooserItems)
       .toHaveBeenCalledTimes(1);
     expect(columnChooserItems)
-      .toHaveBeenCalledWith(defaultDeps.getter.columns, defaultDeps.getter.hiddenColumns);
+      .toHaveBeenCalledWith(defaultDeps.getter.columns, defaultDeps.getter.hiddenColumnNames);
   });
 });