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

packages/dx-grid-core/src/column-chooser/computeds.js

@@ -1,2 +1,2 @@
-export const columnChooserItems = (columns, hiddenColumns) =>
-  columns.map(column => ({ column, hidden: hiddenColumns.indexOf(column.name) !== -1 }));
+export const columnChooserItems = (columns, hiddenColumnNames) =>
+  columns.map(column => ({ column, hidden: hiddenColumnNames.indexOf(column.name) !== -1 }));

packages/dx-grid-core/src/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 },

packages/dx-grid-core/src/column-chooser/reducers.js

@@ -1,5 +1,5 @@
-export const toggleColumn = (hiddenColumns, columnName) => (
-  hiddenColumns.indexOf(columnName) === -1
-    ? [...hiddenColumns, columnName]
-    : hiddenColumns.filter(hiddenColumn => hiddenColumn !== columnName)
+export const toggleColumn = (hiddenColumnNames, columnName) => (
+  hiddenColumnNames.indexOf(columnName) === -1
+    ? [...hiddenColumnNames, columnName]
+    : hiddenColumnNames.filter(hiddenColumn => hiddenColumn !== columnName)
 );

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);

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' } }]);
     });
   });

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.hiddenColumnsChange = (hiddenColumnNames) => {
+      this.setState({ hiddenColumnNames });
     };
   }
 
   render() {
     const {
-      columns, rows, tableColumnExtensions, hiddenColumns,
+      columns, rows, tableColumnExtensions, hiddenColumnNames,
     } = this.state;
 
     return (
@@ -49,7 +49,7 @@ export default class Demo extends React.PureComponent {
         />
         <TableHeaderRow />
         <TableColumnVisibility
-          hiddenColumns={hiddenColumns}
+          hiddenColumnNames={hiddenColumnNames}
           onHiddenColumnsChange={this.hiddenColumnsChange}
         />
         <Toolbar />

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 />

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 />

packages/dx-react-demos/src/material-ui/column-chooser/basic.jsx

@@ -29,17 +29,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.hiddenColumnsChange = (hiddenColumnNames) => {
+      this.setState({ hiddenColumnNames });
     };
   }
 
   render() {
     const {
-      columns, rows, hiddenColumns, tableColumnExtensions,
+      columns, rows, hiddenColumnNames, tableColumnExtensions,
     } = this.state;
     return (
       <MUIGrid container>
@@ -54,7 +54,7 @@ export default class Demo extends React.PureComponent {
               />
               <TableHeaderRow />
               <TableColumnVisibility
-                hiddenColumns={hiddenColumns}
+                hiddenColumnNames={hiddenColumnNames}
               />
             </Grid>
           </Paper>
@@ -68,7 +68,7 @@ export default class Demo extends React.PureComponent {
             </Toolbar>
             <ColumnChooser
               columns={columns}
-              hiddenColumns={hiddenColumns}
+              hiddenColumnNames={hiddenColumnNames}
               onHiddenColumnsChange={this.hiddenColumnsChange}
             />
           </Paper>

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.hiddenColumnsChange = (hiddenColumnNames) => {
+      this.setState({ hiddenColumnNames });
     };
   }
 
   render() {
-    const { columns, rows, hiddenColumns } = this.state;
+    const { columns, rows, hiddenColumnNames } = this.state;
     return (
       <Paper>
         <Grid
@@ -44,7 +44,7 @@ export default class Demo extends React.PureComponent {
           <Toolbar />
           <TableHeaderRow />
           <TableColumnVisibility
-            hiddenColumns={hiddenColumns}
+            hiddenColumnNames={hiddenColumnNames}
             onHiddenColumnsChange={this.hiddenColumnsChange}
           />
           <ColumnChooser />

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>

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 />

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,
   }),
 };
 

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}

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 columns 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 columns to the `TableColumnVisibility` plugin's `hiddenColumnNames` property and handle the `onHiddenColumnsChange` event to control column visibility externally.
 
 .embedded-demo(column-chooser/controlled)

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<[Column](grid.md#column)> | Grid columns.
-hiddenColumns | Getter | Array<[Column](grid.md#column)> | Columns to be hidden.
+hiddenColumnNames | Getter | Array<string> | 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.
 

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<string> | [] | Hidden column names.
-defaultHiddenColumns | Array<string> | [] | Names of initially hidden columns in uncontrolled mode.
-onHiddenColumnsChange | (hiddenColumns: Array<string>) => void | | Handles hidden columns adding or removing.
+hiddenColumnNames | Array<string> | [] | Hidden column names.
+defaultHiddenColumnNames | Array<string> | [] | Names of initially hidden columns in uncontrolled mode.
+onHiddenColumnsChange | (hiddenColumnNames: Array<string>) => void | | Handles hidden columns adding or removing.
 emptyMessageComponent | ElementType<[EmptyMessageProps](#emptymessageprops)> | | 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<[TableColumn](table.md#tablecolumn)> | Visible table columns.
-hiddenColumns | Getter | Array<[TableColumn](table.md#tablecolumn)> | Hidden table columns.
+hiddenColumnNames | Getter | Array<string> | Hidden table column names.
 toggleVisibility | Action | ({ columnName: string }) => void | Toggles a column's visibility.

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}

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);
   });
 });