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