[ARVADOS-WORKBENCH2] created: 1.2.0-914-gdade8b5
Git user
git at public.curoverse.com
Wed Nov 21 03:52:46 EST 2018
at dade8b5aa00fa21c7c20b92767cddedabcf612cd (commit)
commit dade8b5aa00fa21c7c20b92767cddedabcf612cd
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Wed Nov 21 09:52:34 2018 +0100
Update data-explorer to use table filters tree
Feature #14258
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 08f52d0..c9009c8 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -8,9 +8,10 @@ import MoreVertIcon from "@material-ui/icons/MoreVert";
import { ColumnSelector } from "../column-selector/column-selector";
import { DataTable, DataColumns } from "../data-table/data-table";
import { DataColumn, SortDirection } from "../data-table/data-column";
-import { DataTableFilterItem } from '../data-table-filters/data-table-filters';
import { SearchInput } from '../search-input/search-input';
import { ArvadosTheme } from "~/common/custom-theme";
+import { createTree } from '~/models/tree';
+import { DataTableFilters } from '../data-table-filters/data-table-filters-tree';
type CssRules = 'searchBox' | "toolbar" | "footer" | "root" | 'moreOptionsButton';
@@ -53,7 +54,7 @@ interface DataExplorerActionProps<T> {
onColumnToggle: (column: DataColumn<T>) => void;
onContextMenu: (event: React.MouseEvent<HTMLElement>, item: T) => void;
onSortToggle: (column: DataColumn<T>) => void;
- onFiltersChange: (filters: DataTableFilterItem[], column: DataColumn<T>) => void;
+ onFiltersChange: (filters: DataTableFilters, column: DataColumn<T>) => void;
onChangePage: (page: number) => void;
onChangeRowsPerPage: (rowsPerPage: number) => void;
extractKey?: (item: T) => React.Key;
@@ -137,7 +138,7 @@ export const DataExplorer = withStyles(styles)(
selected: true,
configurable: false,
sortDirection: SortDirection.NONE,
- filters: [],
+ filters: createTree(),
key: "context-actions",
render: this.renderContextMenuTrigger
};
diff --git a/src/components/data-table/data-column.ts b/src/components/data-table/data-column.ts
index a5f9550..28e93be 100644
--- a/src/components/data-table/data-column.ts
+++ b/src/components/data-table/data-column.ts
@@ -3,15 +3,16 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from "react";
-import { DataTableFilterItem } from "../data-table-filters/data-table-filters";
+import { DataTableFilters } from "../data-table-filters/data-table-filters-tree";
+import { createTree } from '~/models/tree';
-export interface DataColumn<T, F extends DataTableFilterItem = DataTableFilterItem> {
+export interface DataColumn<T> {
key?: React.Key;
name: string;
selected: boolean;
configurable: boolean;
sortDirection?: SortDirection;
- filters: F[];
+ filters: DataTableFilters;
render: (item: T) => React.ReactElement<any>;
renderHeader?: () => React.ReactElement<any>;
}
@@ -34,13 +35,13 @@ export const resetSortDirection = <T>(column: DataColumn<T>): DataColumn<T> => {
return column.sortDirection ? { ...column, sortDirection: SortDirection.NONE } : column;
};
-export const createDataColumn = <T, F extends DataTableFilterItem>(dataColumn: Partial<DataColumn<T, F>>): DataColumn<T, F> => ({
+export const createDataColumn = <T>(dataColumn: Partial<DataColumn<T>>): DataColumn<T> => ({
key: '',
name: '',
selected: true,
configurable: true,
sortDirection: SortDirection.NONE,
- filters: [],
+ filters: createTree(),
render: () => React.createElement('span'),
...dataColumn,
});
diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index 25d81c6..d9157a6 100644
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -5,10 +5,12 @@
import * as React from 'react';
import { Table, TableBody, TableRow, TableCell, TableHead, TableSortLabel, StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core';
import { DataColumn, SortDirection } from './data-column';
-import { DataTableFilters, DataTableFilterItem } from "../data-table-filters/data-table-filters";
import { DataTableDefaultView } from '../data-table-default-view/data-table-default-view';
+import { DataTableFilters } from '../data-table-filters/data-table-filters-tree';
+import { DataTableFiltersPopover } from '../data-table-filters/data-table-filters-popover';
+import { countNodes } from '~/models/tree';
-export type DataColumns<T, F extends DataTableFilterItem = DataTableFilterItem> = Array<DataColumn<T, F>>;
+export type DataColumns<T> = Array<DataColumn<T>>;
export interface DataTableDataProps<T> {
items: T[];
@@ -17,7 +19,7 @@ export interface DataTableDataProps<T> {
onContextMenu: (event: React.MouseEvent<HTMLElement>, item: T) => void;
onRowDoubleClick: (event: React.MouseEvent<HTMLTableRowElement>, item: T) => void;
onSortToggle: (column: DataColumn<T>) => void;
- onFiltersChange: (filters: DataTableFilterItem[], column: DataColumn<T>) => void;
+ onFiltersChange: (filters: DataTableFilters, column: DataColumn<T>) => void;
extractKey?: (item: T) => React.Key;
working?: boolean;
defaultView?: React.ReactNode;
@@ -81,15 +83,15 @@ export const DataTable = withStyles(styles)(
return <TableCell key={key || index}>
{renderHeader ?
renderHeader() :
- filters.length > 0
- ? <DataTableFilters
+ countNodes(filters) > 0
+ ? <DataTableFiltersPopover
name={`${name} filters`}
onChange={filters =>
onFiltersChange &&
onFiltersChange(filters, column)}
filters={filters}>
{name}
- </DataTableFilters>
+ </DataTableFiltersPopover>
: sortDirection
? <TableSortLabel
active={sortDirection !== SortDirection.NONE}
diff --git a/src/models/tree.ts b/src/models/tree.ts
index bdcd730..1bc15bc 100644
--- a/src/models/tree.ts
+++ b/src/models/tree.ts
@@ -95,6 +95,9 @@ export const getNodeAncestorsIds = (id: string) => <T>(tree: Tree<T>): string[]
export const getNodeDescendants = (id: string, limit = Infinity) => <T>(tree: Tree<T>) =>
mapIdsToNodes(getNodeDescendantsIds(id, limit)(tree))(tree);
+export const countNodes = <T>(tree: Tree<T>) =>
+ getNodeDescendantsIds('')(tree).length;
+
export const getNodeDescendantsIds = (id: string, limit = Infinity) => <T>(tree: Tree<T>): string[] => {
const node = getNode(id)(tree);
const children = node ? node.children :
diff --git a/src/store/data-explorer/data-explorer-action.ts b/src/store/data-explorer/data-explorer-action.ts
index a58d20e..7797ae6 100644
--- a/src/store/data-explorer/data-explorer-action.ts
+++ b/src/store/data-explorer/data-explorer-action.ts
@@ -3,14 +3,14 @@
// SPDX-License-Identifier: AGPL-3.0
import { unionize, ofType, UnionOf } from "~/common/unionize";
-import { DataTableFilterItem } from "~/components/data-table-filters/data-table-filters";
import { DataColumns } from "~/components/data-table/data-table";
+import { DataTableFilters } from '~/components/data-table-filters/data-table-filters-tree';
export const dataExplorerActions = unionize({
RESET_PAGINATION: ofType<{ id: string }>(),
REQUEST_ITEMS: ofType<{ id: string }>(),
SET_COLUMNS: ofType<{ id: string, columns: DataColumns<any> }>(),
- SET_FILTERS: ofType<{ id: string, columnName: string, filters: DataTableFilterItem[] }>(),
+ SET_FILTERS: ofType<{ id: string, columnName: string, filters: DataTableFilters }>(),
SET_ITEMS: ofType<{ id: string, items: any[], page: number, rowsPerPage: number, itemsAvailable: number }>(),
SET_PAGE: ofType<{ id: string, page: number }>(),
SET_ROWS_PER_PAGE: ofType<{ id: string, rowsPerPage: number }>(),
@@ -28,7 +28,7 @@ export const bindDataExplorerActions = (id: string) => ({
dataExplorerActions.REQUEST_ITEMS({ id }),
SET_COLUMNS: (payload: { columns: DataColumns<any> }) =>
dataExplorerActions.SET_COLUMNS({ ...payload, id }),
- SET_FILTERS: (payload: { columnName: string, filters: DataTableFilterItem[] }) =>
+ SET_FILTERS: (payload: { columnName: string, filters: DataTableFilters }) =>
dataExplorerActions.SET_FILTERS({ ...payload, id }),
SET_ITEMS: (payload: { items: any[], page: number, rowsPerPage: number, itemsAvailable: number }) =>
dataExplorerActions.SET_ITEMS({ ...payload, id }),
diff --git a/src/store/data-explorer/data-explorer-middleware-service.ts b/src/store/data-explorer/data-explorer-middleware-service.ts
index 934af7b..80ab514 100644
--- a/src/store/data-explorer/data-explorer-middleware-service.ts
+++ b/src/store/data-explorer/data-explorer-middleware-service.ts
@@ -5,9 +5,10 @@
import { Dispatch, MiddlewareAPI } from "redux";
import { RootState } from "../store";
import { DataColumns } from "~/components/data-table/data-table";
-import { DataTableFilterItem } from "~/components/data-table-filters/data-table-filters";
import { DataExplorer } from './data-explorer-reducer';
import { ListResults } from '~/services/common-service/common-resource-service';
+import { createTree } from "~/models/tree";
+import { DataTableFilters } from "~/components/data-table-filters/data-table-filters-tree";
export abstract class DataExplorerMiddlewareService {
protected readonly id: string;
@@ -20,20 +21,19 @@ export abstract class DataExplorerMiddlewareService {
return this.id;
}
- public getColumnFilters<T, F extends DataTableFilterItem>(columns: DataColumns<T, F>, columnName: string): F[] {
- const column = columns.find(c => c.name === columnName);
- return column ? column.filters.filter(f => f.selected) : [];
+ public getColumnFilters<T>(columns: DataColumns<T>, columnName: string): DataTableFilters {
+ return getDataExplorerColumnFilters(columns, columnName);
}
abstract requestItems(api: MiddlewareAPI<Dispatch, RootState>): void;
}
-export const getDataExplorerColumnFilters = <T, F extends DataTableFilterItem>(columns: DataColumns<T, F>, columnName: string): F[] => {
+export const getDataExplorerColumnFilters = <T>(columns: DataColumns<T>, columnName: string): DataTableFilters => {
const column = columns.find(c => c.name === columnName);
- return column ? column.filters.filter(f => f.selected) : [];
+ return column ? column.filters : createTree();
};
-export const dataExplorerToListParams = <R>(dataExplorer: DataExplorer) => ({
+export const dataExplorerToListParams = (dataExplorer: DataExplorer) => ({
limit: dataExplorer.rowsPerPage,
offset: dataExplorer.page * dataExplorer.rowsPerPage,
});
diff --git a/src/store/data-explorer/data-explorer-middleware.test.ts b/src/store/data-explorer/data-explorer-middleware.test.ts
index 814d585..00931bf 100644
--- a/src/store/data-explorer/data-explorer-middleware.test.ts
+++ b/src/store/data-explorer/data-explorer-middleware.test.ts
@@ -8,6 +8,8 @@ import { MiddlewareAPI } from "redux";
import { DataColumns } from "~/components/data-table/data-table";
import { dataExplorerActions } from "./data-explorer-action";
import { SortDirection } from "~/components/data-table/data-column";
+import { createTree } from '~/models/tree';
+import { DataTableFilterItem } from "~/components/data-table-filters/data-table-filters-tree";
describe("DataExplorerMiddleware", () => {
@@ -20,7 +22,7 @@ describe("DataExplorerMiddleware", () => {
selected: true,
configurable: false,
sortDirection: SortDirection.NONE,
- filters: [],
+ filters: createTree<DataTableFilterItem>(),
render: jest.fn()
}],
requestItems: jest.fn(),
@@ -48,7 +50,7 @@ describe("DataExplorerMiddleware", () => {
selected: true,
configurable: false,
sortDirection: SortDirection.NONE,
- filters: [],
+ filters: createTree<DataTableFilterItem>(),
render: jest.fn()
}],
requestItems: jest.fn(),
@@ -115,7 +117,7 @@ describe("DataExplorerMiddleware", () => {
};
const next = jest.fn();
const middleware = dataExplorerMiddleware(service)(api)(next);
- middleware(dataExplorerActions.SET_FILTERS({ id: service.getId(), columnName: "", filters: [] }));
+ middleware(dataExplorerActions.SET_FILTERS({ id: service.getId(), columnName: "", filters: createTree() }));
expect(api.dispatch).toHaveBeenCalledTimes(2);
});
diff --git a/src/store/data-explorer/data-explorer-reducer.ts b/src/store/data-explorer/data-explorer-reducer.ts
index 1657ab7..613bf27 100644
--- a/src/store/data-explorer/data-explorer-reducer.ts
+++ b/src/store/data-explorer/data-explorer-reducer.ts
@@ -4,8 +4,8 @@
import { DataColumn, toggleSortDirection, resetSortDirection, SortDirection } from "~/components/data-table/data-column";
import { dataExplorerActions, DataExplorerAction } from "./data-explorer-action";
-import { DataTableFilterItem } from "~/components/data-table-filters/data-table-filters";
import { DataColumns } from "~/components/data-table/data-table";
+import { DataTableFilters } from "~/components/data-table-filters/data-table-filters-tree";
export interface DataExplorer {
columns: DataColumns<any>;
@@ -103,7 +103,7 @@ const toggleColumn = (columnName: string) =>
? { ...column, selected: !column.selected }
: column;
-const setFilters = (columnName: string, filters: DataTableFilterItem[]) =>
+const setFilters = (columnName: string, filters: DataTableFilters) =>
(column: DataColumn<any>) => column.name === columnName
? { ...column, filters }
: column;
commit 38bcb23ba4dec9b1eda066936541341785fc657a
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Tue Nov 20 14:35:08 2018 +0100
Modify DataTableFiltersPopover to handl filter trees rather than arrays
Feature #14258
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/data-table-filters/data-table-filters-popover.tsx b/src/components/data-table-filters/data-table-filters-popover.tsx
index 7033d36..b79d36b 100644
--- a/src/components/data-table-filters/data-table-filters-popover.tsx
+++ b/src/components/data-table-filters/data-table-filters-popover.tsx
@@ -10,10 +10,6 @@ import {
StyleRulesCallback,
Theme,
Popover,
- List,
- ListItem,
- Checkbox,
- ListItemText,
Button,
Card,
CardActions,
@@ -22,11 +18,10 @@ import {
Tooltip
} from "@material-ui/core";
import * as classnames from "classnames";
-import { DefaultTransformOrigin } from "../popover/helpers";
-import { createTree, initTreeNode, mapTree } from '~/models/tree';
-import { DataTableFilters as DataTableFiltersModel, DataTableFiltersTree } from "./data-table-filters-tree";
-import { pipe } from 'lodash/fp';
-import { setNode } from '~/models/tree';
+import { DefaultTransformOrigin } from "~/components/popover/helpers";
+import { createTree } from '~/models/tree';
+import { DataTableFilters, DataTableFiltersTree } from "./data-table-filters-tree";
+import { getNodeDescendants } from '~/models/tree';
export type CssRules = "root" | "icon" | "active" | "checkbox";
@@ -63,48 +58,30 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
}
});
-export interface DataTableFilterItem {
- name: string;
- selected: boolean;
-}
-
export interface DataTableFilterProps {
name: string;
- filters: DataTableFilterItem[];
- onChange?: (filters: DataTableFilterItem[]) => void;
+ filters: DataTableFilters;
+ onChange?: (filters: DataTableFilters) => void;
}
interface DataTableFilterState {
anchorEl?: HTMLElement;
- filters: DataTableFilterItem[];
- prevFilters: DataTableFilterItem[];
- filtersTree: DataTableFiltersModel;
+ filters: DataTableFilters;
+ prevFilters: DataTableFilters;
}
-const filters: DataTableFiltersModel = pipe(
- createTree,
- setNode(initTreeNode({ id: 'Project', value: { name: 'Project' } })),
- setNode(initTreeNode({ id: 'Process', value: { name: 'Process' } })),
- setNode(initTreeNode({ id: 'Data collection', value: { name: 'Data collection' } })),
- setNode(initTreeNode({ id: 'General', parent: 'Data collection', value: { name: 'General' } })),
- setNode(initTreeNode({ id: 'Output', parent: 'Data collection', value: { name: 'Output' } })),
- setNode(initTreeNode({ id: 'Log', parent: 'Data collection', value: { name: 'Log' } })),
- mapTree(node => ({...node, selected: true})),
-)();
-
-export const DataTableFilters = withStyles(styles)(
+export const DataTableFiltersPopover = withStyles(styles)(
class extends React.Component<DataTableFilterProps & WithStyles<CssRules>, DataTableFilterState> {
state: DataTableFilterState = {
anchorEl: undefined,
- filters: [],
- prevFilters: [],
- filtersTree: filters,
+ filters: createTree(),
+ prevFilters: createTree(),
};
icon = React.createRef<HTMLElement>();
render() {
const { name, classes, children } = this.props;
- const isActive = this.state.filters.some(f => f.selected);
+ const isActive = getNodeDescendants('')(this.state.filters).some(f => f.selected);
return <>
<Tooltip title='Filters'>
<ButtonBase
@@ -130,24 +107,9 @@ export const DataTableFilters = withStyles(styles)(
{name}
</Typography>
</CardContent>
- <List dense>
- {this.state.filters.map((filter, index) =>
- <ListItem
- key={index}>
- <Checkbox
- onClick={this.toggleFilter(filter)}
- color="primary"
- checked={filter.selected}
- className={classes.checkbox} />
- <ListItemText>
- {filter.name}
- </ListItemText>
- </ListItem>
- )}
- </List>
<DataTableFiltersTree
- filters={this.state.filtersTree}
- onChange={filtersTree => this.setState({ filtersTree })} />
+ filters={this.state.filters}
+ onChange={filters => this.setState({ filters })} />
<CardActions>
<Button
color="primary"
@@ -195,14 +157,9 @@ export const DataTableFilters = withStyles(styles)(
}));
}
- toggleFilter = (toggledFilter: DataTableFilterItem) => () => {
- this.setState(prev => ({
- ...prev,
- filters: prev.filters.map(filter =>
- filter === toggledFilter
- ? { ...filter, selected: !filter.selected }
- : filter)
- }));
+ setFilters = (filters: DataTableFilters) => {
+ this.setState({ filters });
}
+
}
);
commit 4ff3ff000c1a0132d29ea4829907f484467b6275
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Tue Nov 20 14:32:55 2018 +0100
CopyDataTableFilters to DataTableFiltersPopover
Feature #14258
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/data-table-filters/data-table-filters-popover.tsx b/src/components/data-table-filters/data-table-filters-popover.tsx
new file mode 100644
index 0000000..7033d36
--- /dev/null
+++ b/src/components/data-table-filters/data-table-filters-popover.tsx
@@ -0,0 +1,208 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import {
+ WithStyles,
+ withStyles,
+ ButtonBase,
+ StyleRulesCallback,
+ Theme,
+ Popover,
+ List,
+ ListItem,
+ Checkbox,
+ ListItemText,
+ Button,
+ Card,
+ CardActions,
+ Typography,
+ CardContent,
+ Tooltip
+} from "@material-ui/core";
+import * as classnames from "classnames";
+import { DefaultTransformOrigin } from "../popover/helpers";
+import { createTree, initTreeNode, mapTree } from '~/models/tree';
+import { DataTableFilters as DataTableFiltersModel, DataTableFiltersTree } from "./data-table-filters-tree";
+import { pipe } from 'lodash/fp';
+import { setNode } from '~/models/tree';
+
+export type CssRules = "root" | "icon" | "active" | "checkbox";
+
+const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
+ root: {
+ cursor: "pointer",
+ display: "inline-flex",
+ justifyContent: "flex-start",
+ flexDirection: "inherit",
+ alignItems: "center",
+ "&:hover": {
+ color: theme.palette.text.primary,
+ },
+ "&:focus": {
+ color: theme.palette.text.primary,
+ },
+ },
+ active: {
+ color: theme.palette.text.primary,
+ '& $icon': {
+ opacity: 1,
+ },
+ },
+ icon: {
+ marginRight: 4,
+ marginLeft: 4,
+ opacity: 0.7,
+ userSelect: "none",
+ width: 16
+ },
+ checkbox: {
+ width: 24,
+ height: 24
+ }
+});
+
+export interface DataTableFilterItem {
+ name: string;
+ selected: boolean;
+}
+
+export interface DataTableFilterProps {
+ name: string;
+ filters: DataTableFilterItem[];
+ onChange?: (filters: DataTableFilterItem[]) => void;
+}
+
+interface DataTableFilterState {
+ anchorEl?: HTMLElement;
+ filters: DataTableFilterItem[];
+ prevFilters: DataTableFilterItem[];
+ filtersTree: DataTableFiltersModel;
+}
+
+const filters: DataTableFiltersModel = pipe(
+ createTree,
+ setNode(initTreeNode({ id: 'Project', value: { name: 'Project' } })),
+ setNode(initTreeNode({ id: 'Process', value: { name: 'Process' } })),
+ setNode(initTreeNode({ id: 'Data collection', value: { name: 'Data collection' } })),
+ setNode(initTreeNode({ id: 'General', parent: 'Data collection', value: { name: 'General' } })),
+ setNode(initTreeNode({ id: 'Output', parent: 'Data collection', value: { name: 'Output' } })),
+ setNode(initTreeNode({ id: 'Log', parent: 'Data collection', value: { name: 'Log' } })),
+ mapTree(node => ({...node, selected: true})),
+)();
+
+export const DataTableFilters = withStyles(styles)(
+ class extends React.Component<DataTableFilterProps & WithStyles<CssRules>, DataTableFilterState> {
+ state: DataTableFilterState = {
+ anchorEl: undefined,
+ filters: [],
+ prevFilters: [],
+ filtersTree: filters,
+ };
+ icon = React.createRef<HTMLElement>();
+
+ render() {
+ const { name, classes, children } = this.props;
+ const isActive = this.state.filters.some(f => f.selected);
+ return <>
+ <Tooltip title='Filters'>
+ <ButtonBase
+ className={classnames([classes.root, { [classes.active]: isActive }])}
+ component="span"
+ onClick={this.open}
+ disableRipple>
+ {children}
+ <i className={classnames(["fas fa-filter", classes.icon])}
+ data-fa-transform="shrink-3"
+ ref={this.icon} />
+ </ButtonBase>
+ </Tooltip>
+ <Popover
+ anchorEl={this.state.anchorEl}
+ open={!!this.state.anchorEl}
+ anchorOrigin={DefaultTransformOrigin}
+ transformOrigin={DefaultTransformOrigin}
+ onClose={this.cancel}>
+ <Card>
+ <CardContent>
+ <Typography variant="caption">
+ {name}
+ </Typography>
+ </CardContent>
+ <List dense>
+ {this.state.filters.map((filter, index) =>
+ <ListItem
+ key={index}>
+ <Checkbox
+ onClick={this.toggleFilter(filter)}
+ color="primary"
+ checked={filter.selected}
+ className={classes.checkbox} />
+ <ListItemText>
+ {filter.name}
+ </ListItemText>
+ </ListItem>
+ )}
+ </List>
+ <DataTableFiltersTree
+ filters={this.state.filtersTree}
+ onChange={filtersTree => this.setState({ filtersTree })} />
+ <CardActions>
+ <Button
+ color="primary"
+ variant="raised"
+ size="small"
+ onClick={this.submit}>
+ Ok
+ </Button>
+ <Button
+ color="primary"
+ variant="outlined"
+ size="small"
+ onClick={this.cancel}>
+ Cancel
+ </Button>
+ </CardActions >
+ </Card>
+ </Popover>
+ </>;
+ }
+
+ static getDerivedStateFromProps(props: DataTableFilterProps, state: DataTableFilterState): DataTableFilterState {
+ return props.filters !== state.prevFilters
+ ? { ...state, filters: props.filters, prevFilters: props.filters }
+ : state;
+ }
+
+ open = () => {
+ this.setState({ anchorEl: this.icon.current || undefined });
+ }
+
+ submit = () => {
+ const { onChange } = this.props;
+ if (onChange) {
+ onChange(this.state.filters);
+ }
+ this.setState({ anchorEl: undefined });
+ }
+
+ cancel = () => {
+ this.setState(prev => ({
+ ...prev,
+ filters: prev.prevFilters,
+ anchorEl: undefined
+ }));
+ }
+
+ toggleFilter = (toggledFilter: DataTableFilterItem) => () => {
+ this.setState(prev => ({
+ ...prev,
+ filters: prev.filters.map(filter =>
+ filter === toggledFilter
+ ? { ...filter, selected: !filter.selected }
+ : filter)
+ }));
+ }
+ }
+);
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list