From 9fff947ecd25b0494e8e3c6a27a4fa4fea67668f Mon Sep 17 00:00:00 2001 From: Lisa Knox Date: Tue, 2 May 2023 15:13:49 -0400 Subject: [PATCH] 15768: applied filter fragment fix, still not showing close button Arvados-DCO-1.1-Signed-off-by: Lisa Knox --- .../data-table-filters-popover.tsx | 147 ++++++++---------- .../data-table-multiselect-popover.tsx | 4 +- 2 files changed, 67 insertions(+), 84 deletions(-) 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 b518786644..557abd825a 100644 --- a/src/components/data-table-filters/data-table-filters-popover.tsx +++ b/src/components/data-table-filters/data-table-filters-popover.tsx @@ -2,7 +2,7 @@ // // SPDX-License-Identifier: AGPL-3.0 -import React, { useEffect } from "react"; +import React, { useEffect } from 'react'; import { WithStyles, withStyles, @@ -16,28 +16,28 @@ import { Typography, CardContent, Tooltip, - IconButton -} from "@material-ui/core"; -import classnames from "classnames"; -import { DefaultTransformOrigin } from "components/popover/helpers"; + IconButton, +} from '@material-ui/core'; +import classnames from 'classnames'; +import { DefaultTransformOrigin } from 'components/popover/helpers'; import { createTree } from 'models/tree'; -import { DataTableFilters, DataTableFiltersTree } from "./data-table-filters-tree"; +import { DataTableFilters, DataTableFiltersTree } from './data-table-filters-tree'; import { getNodeDescendants } from 'models/tree'; -import debounce from "lodash/debounce"; +import debounce from 'lodash/debounce'; -export type CssRules = "root" | "icon" | "iconButton" | "active" | "checkbox"; +export type CssRules = 'root' | 'icon' | 'iconButton' | 'active' | 'checkbox'; const styles: StyleRulesCallback = (theme: Theme) => ({ root: { - cursor: "pointer", - display: "inline-flex", - justifyContent: "flex-start", - flexDirection: "inherit", - alignItems: "center", - "&:hover": { + cursor: 'pointer', + display: 'inline-flex', + justifyContent: 'flex-start', + flexDirection: 'inherit', + alignItems: 'center', + '&:hover': { color: theme.palette.text.primary, }, - "&:focus": { + '&:focus': { color: theme.palette.text.primary, }, }, @@ -52,7 +52,7 @@ const styles: StyleRulesCallback = (theme: Theme) => ({ userSelect: 'none', width: 16, height: 15, - marginTop: 1 + marginTop: 1, }, iconButton: { color: theme.palette.text.primary, @@ -60,13 +60,13 @@ const styles: StyleRulesCallback = (theme: Theme) => ({ }, checkbox: { width: 24, - height: 24 - } + height: 24, + }, }); enum SelectionMode { ALL = 'all', - NONE = 'none' + NONE = 'none', } export interface DataTableFilterProps { @@ -103,68 +103,52 @@ export const DataTableFiltersPopover = withStyles(styles)( render() { const { name, classes, defaultSelection = SelectionMode.ALL, children } = this.props; - const isActive = getNodeDescendants('')(this.state.filters) - .some(f => defaultSelection === SelectionMode.ALL - ? !f.selected - : f.selected - ); - return <> - - - {children} - - - - - - - - - - {name} - - - - {this.props.mutuallyExclusive || - - - - } - - - - ; + const isActive = getNodeDescendants('')(this.state.filters).some((f) => (defaultSelection === SelectionMode.ALL ? !f.selected : f.selected)); + return ( + <> + + + {children} + + + + + + + + + {name} + + + <> + {this.props.mutuallyExclusive || ( + + + + )} + + + + + + ); } static getDerivedStateFromProps(props: DataTableFilterProps, state: DataTableFilterState): DataTableFilterState { - return props.filters !== state.prevFilters - ? { ...state, filters: props.filters, prevFilters: props.filters } - : state; + return props.filters !== state.prevFilters ? { ...state, filters: props.filters, prevFilters: props.filters } : state; } open = () => { this.setState({ anchorEl: this.icon.current || undefined }); - } + }; onChange = (filters) => { this.setState({ filters }); @@ -179,9 +163,9 @@ export const DataTableFiltersPopover = withStyles(styles)( // Non-mutually exclusive filters are debounced this.submit(); } - } + }; - submit = debounce (() => { + submit = debounce(() => { const { onChange } = this.props; if (onChange) { onChange(this.state.filters); @@ -192,17 +176,16 @@ export const DataTableFiltersPopover = withStyles(styles)( useEffect(() => { return () => { this.submit.cancel(); - } - },[]); + }; + }, []); return null; }; close = () => { - this.setState(prev => ({ + this.setState((prev) => ({ ...prev, - anchorEl: undefined + anchorEl: undefined, })); - } - + }; } ); diff --git a/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx b/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx index 97b50a58fa..8b4175b3d5 100644 --- a/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx +++ b/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx @@ -50,13 +50,13 @@ const styles: StyleRulesCallback = (theme: Theme) => ({ paddingBottom: 5, }, optionsContainer: { - padding: '3px 15px', + paddingBottom: '3px', flex: 1, }, option: { cursor: 'pointer', display: 'flex', - padding: '3px', + padding: '3px 15px', fontSize: '1rem', alignItems: 'center', '&:hover': { -- 2.39.5