feat(react-grid): extract ToggleButton component in TableFilterRow (#…

…1403)
DevExpress · Oct 1, 2018 · 687fe3b · 687fe3b
1 parent e58d609
commit 687fe3b
Show file tree

Hide file tree

Showing 20 changed files with 290 additions and 39 deletions.
diff --git a/packages/dx-react-grid-bootstrap3/src/plugins/table-filter-row.jsx b/packages/dx-react-grid-bootstrap3/src/plugins/table-filter-row.jsx
@@ -4,11 +4,12 @@ import { TableFilterCell as Cell } from '../templates/table-filter-cell';
 import { TableRow as Row } from '../templates/table-row';
 import { Editor } from '../templates/filter-row/editor';
 import { FilterSelector } from '../templates/filter-row/filter-selector';
+import { ToggleButton } from '../templates/filter-row/filter-selector/toggle-button';
 import { Icon } from '../templates/filter-row/icon';
 
 
 export const TableFilterRow = withComponents({
-  Row, Cell, Editor, FilterSelector, Icon,
+  Row, Cell, Editor, FilterSelector, Icon, ToggleButton,
 })(TableFilterRowBase);
 
 TableFilterRow.ROW_TYPE = TableFilterRowBase.ROW_TYPE;
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/filter-row/filter-selector.jsx b/packages/dx-react-grid-bootstrap3/src/templates/filter-row/filter-selector.jsx
@@ -24,21 +24,20 @@ export class FilterSelector extends React.PureComponent {
 
   render() {
     const {
-      value, availableValues, disabled, getMessage, iconComponent: Icon,
+      value, availableValues, disabled, getMessage,
+      iconComponent: Icon, toggleButtonComponent: ToggleButton,
     } = this.props;
     const { opened } = this.state;
 
     return availableValues.length ? (
       <span className="input-group-btn">
-        <button
-          type="button"
-          className="btn btn-default"
+        <ToggleButton
           disabled={disabled || availableValues.length === 1}
-          onClick={this.handleButtonClick}
-          ref={(ref) => { this.targetElement = ref; }}
+          onToggle={this.handleButtonClick}
+          buttonRef={(ref) => { this.targetElement = ref; }}
         >
           <Icon type={value} />
-        </button>
+        </ToggleButton>
         <Overlay
           visible={opened}
           target={this.targetElement}
@@ -79,6 +78,7 @@ FilterSelector.propTypes = {
   onChange: PropTypes.func,
   disabled: PropTypes.bool,
   iconComponent: PropTypes.func.isRequired,
+  toggleButtonComponent: PropTypes.func.isRequired,
   getMessage: PropTypes.func.isRequired,
 };
 

diff --git a/packages/dx-react-grid-bootstrap3/src/templates/filter-row/filter-selector.test.jsx b/packages/dx-react-grid-bootstrap3/src/templates/filter-row/filter-selector.test.jsx
@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
 import { FilterSelector } from './filter-selector';
 
 const defaultProps = {
+  toggleButtonComponent: () => null,
   iconComponent: () => null,
   getMessage: key => key,
 };
@@ -23,7 +24,7 @@ describe('FilterSelector', () => {
       />
     ));
 
-    expect(tree.find('button').prop('disabled'))
+    expect(tree.find(defaultProps.toggleButtonComponent).prop('disabled'))
       .toBeTruthy();
   });
 
@@ -36,7 +37,7 @@ describe('FilterSelector', () => {
       />
     ));
 
-    expect(tree.find('button').prop('disabled'))
+    expect(tree.find(defaultProps.toggleButtonComponent).prop('disabled'))
       .toBeTruthy();
   });
 });
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/filter-row/filter-selector/toggle-button.jsx b/packages/dx-react-grid-bootstrap3/src/templates/filter-row/filter-selector/toggle-button.jsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const ToggleButton = ({
+  buttonRef, onToggle, disabled, children, className, ...restProps
+}) => (
+  <button
+    type="button"
+    className={classNames('btn btn-outline-secondary', className)}
+    disabled={disabled}
+    onClick={onToggle}
+    ref={buttonRef}
+    {...restProps}
+  >
+    {children}
+  </button>
+);
+
+ToggleButton.propTypes = {
+  buttonRef: PropTypes.func.isRequired,
+  onToggle: PropTypes.func.isRequired,
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
+};
+
+ToggleButton.defaultProps = {
+  children: undefined,
+  disabled: false,
+};
diff --git a/.../dx-react-grid-bootstrap3/src/templates/filter-row/filter-selector/toggle-button.test.jsx b/.../dx-react-grid-bootstrap3/src/templates/filter-row/filter-selector/toggle-button.test.jsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { ToggleButton } from './toggle-button';
+
+const defaultProps = {
+  onToggle: () => {},
+  getMessage: key => key,
+  buttonRef: () => {},
+};
+
+describe('ToggleButton', () => {
+  it('should pass className to the root element', () => {
+    const tree = shallow((
+      <ToggleButton
+        {...defaultProps}
+        className="class"
+      />
+    ));
+
+    expect(tree.is('.class'))
+      .toBeTruthy();
+  });
+
+  it('should pass rest props to the root element', () => {
+    const tree = shallow((
+      <ToggleButton
+        {...defaultProps}
+        data={{ a: 1 }}
+      />
+    ));
+
+    expect(tree.props().data)
+      .toMatchObject({ a: 1 });
+  });
+
+  it('should pass children', () => {
+    const tree = shallow((
+      <ToggleButton
+        {...defaultProps}
+      >
+        <div className="content" />
+      </ToggleButton>
+    ));
+
+    expect(tree.find('.content').exists())
+      .toBeTruthy();
+  });
+});
diff --git a/packages/dx-react-grid-bootstrap4/src/plugins/table-filter-row.jsx b/packages/dx-react-grid-bootstrap4/src/plugins/table-filter-row.jsx
@@ -4,10 +4,11 @@ import { TableFilterCell as Cell } from '../templates/table-filter-cell';
 import { TableRow as Row } from '../templates/table-row';
 import { Editor } from '../templates/filter-row/editor';
 import { FilterSelector } from '../templates/filter-row/filter-selector';
+import { ToggleButton } from '../templates/filter-row/filter-selector/toggle-button';
 import { Icon } from '../templates/filter-row/icon';
 
 export const TableFilterRow = withComponents({
-  Row, Cell, Editor, FilterSelector, Icon,
+  Row, Cell, Editor, FilterSelector, Icon, ToggleButton,
 })(TableFilterRowBase);
 
 TableFilterRow.ROW_TYPE = TableFilterRowBase.ROW_TYPE;
diff --git a/packages/dx-react-grid-bootstrap4/src/templates/filter-row/filter-selector.jsx b/packages/dx-react-grid-bootstrap4/src/templates/filter-row/filter-selector.jsx
@@ -25,20 +25,19 @@ export class FilterSelector extends React.PureComponent {
 
   render() {
     const {
-      value, availableValues, disabled, getMessage, iconComponent: Icon,
+      value, availableValues, disabled, getMessage,
+      iconComponent: Icon, toggleButtonComponent: ToggleButton,
     } = this.props;
     const { opened } = this.state;
     return availableValues.length ? (
       <div className="input-group-prepend">
-        <button
-          type="button"
-          className="btn btn-outline-secondary"
+        <ToggleButton
           disabled={disabled || availableValues.length === 1}
-          onClick={this.handleButtonClick}
-          ref={(ref) => { this.targetElement = ref; }}
+          onToggle={this.handleButtonClick}
+          buttonRef={(ref) => { this.targetElement = ref; }}
         >
           <Icon type={value} />
-        </button>
+        </ToggleButton>
         {
           this.targetElement ? (
             <Popover
@@ -81,6 +80,7 @@ FilterSelector.propTypes = {
   onChange: PropTypes.func,
   disabled: PropTypes.bool,
   iconComponent: PropTypes.func.isRequired,
+  toggleButtonComponent: PropTypes.func.isRequired,
   getMessage: PropTypes.func.isRequired,
 };
 

diff --git a/packages/dx-react-grid-bootstrap4/src/templates/filter-row/filter-selector.test.jsx b/packages/dx-react-grid-bootstrap4/src/templates/filter-row/filter-selector.test.jsx
@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
 import { FilterSelector } from './filter-selector';
 
 const defaultProps = {
+  toggleButtonComponent: () => null,
   iconComponent: () => null,
   getMessage: key => key,
 };
@@ -23,7 +24,7 @@ describe('FilterSelector', () => {
       />
     ));
 
-    expect(tree.find('button').prop('disabled'))
+    expect(tree.find(defaultProps.toggleButtonComponent).prop('disabled'))
       .toBeTruthy();
   });
 
@@ -36,7 +37,7 @@ describe('FilterSelector', () => {
       />
     ));
 
-    expect(tree.find('button').prop('disabled'))
+    expect(tree.find(defaultProps.toggleButtonComponent).prop('disabled'))
       .toBeTruthy();
   });
 });
diff --git a/packages/dx-react-grid-bootstrap4/src/templates/filter-row/filter-selector/toggle-button.jsx b/packages/dx-react-grid-bootstrap4/src/templates/filter-row/filter-selector/toggle-button.jsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const ToggleButton = ({
+  buttonRef, onToggle, disabled, children, className, ...restProps
+}) => (
+  <button
+    type="button"
+    className={classNames('btn btn-outline-secondary', className)}
+    disabled={disabled}
+    onClick={onToggle}
+    ref={buttonRef}
+    {...restProps}
+  >
+    {children}
+  </button>
+);
+
+ToggleButton.propTypes = {
+  buttonRef: PropTypes.func.isRequired,
+  onToggle: PropTypes.func.isRequired,
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
+};
+
+ToggleButton.defaultProps = {
+  children: undefined,
+  disabled: false,
+};
diff --git a/.../dx-react-grid-bootstrap4/src/templates/filter-row/filter-selector/toggle-button.test.jsx b/.../dx-react-grid-bootstrap4/src/templates/filter-row/filter-selector/toggle-button.test.jsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { ToggleButton } from './toggle-button';
+
+const defaultProps = {
+  onToggle: () => {},
+  getMessage: key => key,
+  buttonRef: () => {},
+};
+
+describe('ToggleButton', () => {
+  it('should pass className to the root element', () => {
+    const tree = shallow((
+      <ToggleButton
+        {...defaultProps}
+        className="class"
+      />
+    ));
+
+    expect(tree.is('.class'))
+      .toBeTruthy();
+  });
+
+  it('should pass rest props to the root element', () => {
+    const tree = shallow((
+      <ToggleButton
+        {...defaultProps}
+        data={{ a: 1 }}
+      />
+    ));
+
+    expect(tree.props().data)
+      .toMatchObject({ a: 1 });
+  });
+
+  it('should pass children', () => {
+    const tree = shallow((
+      <ToggleButton
+        {...defaultProps}
+      >
+        <div className="content" />
+      </ToggleButton>
+    ));
+
+    expect(tree.find('.content').exists())
+      .toBeTruthy();
+  });
+});
diff --git a/packages/dx-react-grid-material-ui/src/plugins/table-filter-row.jsx b/packages/dx-react-grid-material-ui/src/plugins/table-filter-row.jsx
@@ -4,11 +4,12 @@ import { TableFilterCell as Cell } from '../templates/table-filter-cell';
 import { TableRow as Row } from '../templates/table-row';
 import { Editor } from '../templates/filter-row/editor';
 import { FilterSelector } from '../templates/filter-row/filter-selector';
+import { ToggleButton } from '../templates/filter-row/filter-selector/toggle-button';
 import { Icon } from '../templates/filter-row/icon';
 
 
 export const TableFilterRow = withComponents({
-  Row, Cell, Editor, FilterSelector, Icon,
+  Row, Cell, Editor, FilterSelector, Icon, ToggleButton,
 })(TableFilterRowBase);
 
 TableFilterRow.ROW_TYPE = TableFilterRowBase.ROW_TYPE;
diff --git a/packages/dx-react-grid-material-ui/src/templates/column-chooser/toggle-button.jsx b/packages/dx-react-grid-material-ui/src/templates/column-chooser/toggle-button.jsx
@@ -13,11 +13,11 @@ export const ToggleButton = ({
     title={getMessage('showColumnChooser')}
     placement="bottom"
     enterDelay={300}
-    {...restProps}
   >
     <IconButton
       onClick={onToggle}
       buttonRef={buttonRef}
+      {...restProps}
     >
       <VisibilityOff />
     </IconButton>

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
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import Tooltip from '@material-ui/core/Tooltip';
+import IconButton from '@material-ui/core/IconButton';
 import { ToggleButton } from './toggle-button';
 
 const defaultProps = {
@@ -30,7 +31,7 @@ describe('ToggleButton', () => {
       />
     ));
 
-    expect(tree.props().data)
+    expect(tree.find(IconButton).props().data)
       .toMatchObject({ a: 1 });
   });
 });