services/workbench2/src/views-components/sharing-dialog/select-item.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { CustomStyleRulesCallback } from 'common/custom-theme';
   7 import { Grid } from '@mui/material';
   8 import withStyles from '@mui/styles/withStyles';
   9 import { WithStyles } from '@mui/styles';
  10 import { SvgIconProps } from '@mui/material/SvgIcon';
  11
  12 type SelectItemClasses = 'value' | 'icon';
  13
  14 const permissionItemStyles: CustomStyleRulesCallback<SelectItemClasses> = theme => ({
  15     value: {
  16         marginLeft: theme.spacing(1),
  17     },
  18     icon: {
  19         margin: `${theme.spacing(0.5)} 0`
  20     }
  21 });
  22
  23 /**
  24  * This component should be used as a child of MenuItem component.
  25  */
  26 export const SelectItem = withStyles(permissionItemStyles)(
  27     ({ value, icon: Icon, classes }: { value: string, icon: React.ComponentType<SvgIconProps> } & WithStyles<SelectItemClasses>) => {
  28         return (
  29             <Grid container alignItems='center'>
  30                 <Icon className={classes.icon} />
  31                 <span className={classes.value}>
  32                     {value}
  33                 </span>
  34             </Grid>);
  35     });
  36