sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx

   1
   2 import * as React from 'react';
   3 import { ColumnModel, ColumnType } from './columnModel';
   4 import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
   5
   6
   7 import TableCell from '@material-ui/core/TableCell';
   8 import TableRow from '@material-ui/core/TableRow';
   9 import Input from '@material-ui/core/Input';
  10
  11
  12 const styles = (theme: Theme) => createStyles({
  13   container: {
  14     display: 'flex',
  15     flexWrap: 'wrap',
  16   },
  17   input: {
  18     margin: theme.spacing.unit,
  19   },
  20 });
  21
  22 interface IEnhancedTableFilterComponentProps extends WithStyles<typeof styles> {
  23   onFilterChanged: (property: string, filterTerm: string) => void;
  24   filter: { [property: string]: string };
  25   columns: ColumnModel<{}>[];
  26   enableSelection?: boolean;
  27 }
  28
  29 class EnhancedTableFilterComponent extends React.Component<IEnhancedTableFilterComponentProps> {
  30   createFilterHandler = (property: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
  31     this.props.onFilterChanged && this.props.onFilterChanged(property, event.target.value);
  32   };
  33
  34   render() {
  35     const { columns, filter, classes } = this.props;
  36     return (
  37       <TableRow>
  38          { this.props.enableSelection
  39            ? <TableCell padding="checkbox" style={ { width: "50px" } }>
  40              </TableCell>
  41            : null
  42          }
  43         { columns.map(col => {
  44           const style = col.width ? { width: col.width } : {};
  45           return (
  46             <TableCell
  47               key={ col.property }
  48               padding={ col.disablePadding ? 'none' : 'default' }
  49               style={ style }
  50             >
  51               { col.disableFilter || (col.type === ColumnType.custom) ? null : <Input
  52                 className={ classes.input }
  53                 inputProps={ {
  54                   'aria-label': 'Filter',
  55                 } }
  56                 value={ filter[col.property] || '' }
  57                 onChange={ this.createFilterHandler(col.property) }
  58               /> }
  59             </TableCell>
  60           );
  61         }, this) }
  62       </TableRow>
  63     );
  64   }
  65 }
  66
  67 export const EnhancedTableFilter = withStyles(styles)(EnhancedTableFilterComponent);