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 * as React from 'react';
   6 import { Grid, withStyles, StyleRulesCallback } from '@material-ui/core';
   7 import { WithStyles } from '@material-ui/core/styles';
   8 import { SvgIconProps } from '@material-ui/core/SvgIcon';
   9
  10 type SelectItemClasses = 'value' | 'icon';
  11
  12 const permissionItemStyles: StyleRulesCallback<SelectItemClasses> = theme => ({
  13     value: {
  14         marginLeft: theme.spacing.unit,
  15     },
  16     icon: {
  17         margin: `-${theme.spacing.unit / 2}px 0`
  18     }
  19 });
  20
  21 /**
  22  * This component should be used as a child of MenuItem component.
  23  */
  24 export const SelectItem = withStyles(permissionItemStyles)(
  25     ({ value, icon: Icon, classes }: { value: string, icon: React.ComponentType<SvgIconProps> } & WithStyles<SelectItemClasses>) => {
  26         return (
  27             <Grid container alignItems='center'>
  28                 <Icon className={classes.icon} />
  29                 <span className={classes.value}>
  30                     {value}
  31                 </span>
  32             </Grid>);
  33     });
  34