projects
/
arvados-workbench2.git
/ blobdiff
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
15768: selected list passes into popover functions Arvados-DCO-1.1-Signed-off-by...
[arvados-workbench2.git]
/
src
/
components
/
data-table-multiselect-popover
/
data-table-multiselect-popover.tsx
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 6f41b6dae9d2bbaf5e919938b01fecfa7be17569..cd9071a3e3ce0d79c697fecb71ac05dad3bc8ce6 100644
(file)
--- a/
src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
+++ b/
src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
@@
-25,12
+25,10
@@
import { getNodeDescendants } from 'models/tree';
import debounce from 'lodash/debounce';
import { green, grey } from '@material-ui/core/colors';
import debounce from 'lodash/debounce';
import { green, grey } from '@material-ui/core/colors';
-export type CssRules = 'root' | 'icon' | 'iconButton' | '
active' | 'checkbox
';
+export type CssRules = 'root' | 'icon' | 'iconButton' | '
option
';
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
root: {
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
root: {
- // border: '1px dashed green',
- margin: 0,
borderRadius: '7px',
'&:hover': {
backgroundColor: grey[200],
borderRadius: '7px',
'&:hover': {
backgroundColor: grey[200],
@@
-39,14
+37,7
@@
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
color: theme.palette.text.primary,
},
},
color: theme.palette.text.primary,
},
},
- active: {
- color: theme.palette.text.primary,
- '& $iconButton': {
- opacity: 1,
- },
- },
icon: {
icon: {
- // border: '1px solid red',
cursor: 'pointer',
fontSize: 20,
userSelect: 'none',
cursor: 'pointer',
fontSize: 20,
userSelect: 'none',
@@
-60,20
+51,28
@@
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
padding: 1,
paddingBottom: 5,
},
padding: 1,
paddingBottom: 5,
},
- checkbox: {
- width: 24,
- height: 24,
+ option: {
+ // border: '1px dashed green',
+ cursor: 'pointer',
+ display: 'flex',
+ padding: '3px 20px',
+ fontSize: '0.875rem',
+ alignItems: 'center',
+ '&:hover': {
+ backgroundColor: 'rgba(0, 0, 0, 0.08)',
+ },
},
});
},
});
-e
num SelectionMode
{
- ALL = 'all',
- NONE = 'none',
-}
+e
xport type DataTableMultiselectOption =
{
+ name: string;
+ fn: (checkedList) => void;
+}
;
export interface DataTableMultiselectProps {
name: string;
export interface DataTableMultiselectProps {
name: string;
- options: string[];
+ options: DataTableMultiselectOption[];
+ checkedList: Record<string, boolean>;
}
interface DataTableFMultiselectPopState {
}
interface DataTableFMultiselectPopState {
@@
-88,7
+87,7
@@
export const DataTableMultiselectPopover = withStyles(styles)(
icon = React.createRef<HTMLElement>();
render() {
icon = React.createRef<HTMLElement>();
render() {
- const { name, classes, children, options } = this.props;
+ const { name, classes, children, options
, checkedList
} = this.props;
return (
<>
<Tooltip disableFocusListener title='Multiselect Actions'>
return (
<>
<Tooltip disableFocusListener title='Multiselect Actions'>
@@
-108,9
+107,14
@@
export const DataTableMultiselectPopover = withStyles(styles)(
>
<Card>
<CardContent>
>
<Card>
<CardContent>
- <Typography variant='caption'>{'O
PTIONS
'}</Typography>
+ <Typography variant='caption'>{'O
ptions
'}</Typography>
</CardContent>
</CardContent>
- {options.length && options.map((option, i) => <div key={i}>{option}</div>)}
+ {options.length &&
+ options.map((option, i) => (
+ <div key={i} className={classes.option} onClick={() => option.fn(checkedList)}>
+ {option.name}
+ </div>
+ ))}
<CardActions>
<Button color='primary' variant='outlined' size='small' onClick={this.close}>
Close
<CardActions>
<Button color='primary' variant='outlined' size='small' onClick={this.close}>
Close