src/views-components/sharing-dialog/permission-select.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 { MenuItem, Grid, Select, withStyles, StyleRulesCallback } from '@material-ui/core';
   7 import RemoveRedEye from '@material-ui/icons/RemoveRedEye';
   8 import Edit from '@material-ui/icons/Edit';
   9 import Computer from '@material-ui/icons/Computer';
  10 import { WithStyles } from '@material-ui/core/styles';
  11 import { SelectProps } from '@material-ui/core/Select';
  12
  13 export enum PermissionSelectValue {
  14     READ = 'Read',
  15     WRITE = 'Write',
  16     MANAGE = 'Manage',
  17 }
  18
  19 type PermissionSelectClasses = 'value';
  20
  21 const PermissionSelectStyles: StyleRulesCallback<PermissionSelectClasses> = theme => ({
  22     value: {
  23         marginLeft: theme.spacing.unit,
  24     }
  25 });
  26
  27 export const PermissionSelect = withStyles(PermissionSelectStyles)(
  28     ({ classes, ...props }: SelectProps & WithStyles<PermissionSelectClasses>) =>
  29         <Select
  30             {...props}
  31             renderValue={renderPermissionItem}
  32             inputProps={{ classes }}>
  33             <MenuItem value={PermissionSelectValue.READ}>
  34                 {renderPermissionItem(PermissionSelectValue.READ)}
  35             </MenuItem>
  36             <MenuItem value={PermissionSelectValue.WRITE}>
  37                 {renderPermissionItem(PermissionSelectValue.WRITE)}
  38             </MenuItem>
  39             <MenuItem value={PermissionSelectValue.MANAGE}>
  40                 {renderPermissionItem(PermissionSelectValue.MANAGE)}
  41             </MenuItem>
  42         </Select>);
  43
  44 const renderPermissionItem = (value: string) =>
  45     <PermissionItem {...{ value }} />;
  46
  47 type PermissionItemClasses = 'value';
  48
  49 const permissionItemStyles: StyleRulesCallback<PermissionItemClasses> = theme => ({
  50     value: {
  51         marginLeft: theme.spacing.unit,
  52     },
  53 });
  54
  55 const PermissionItem = withStyles(permissionItemStyles)(
  56     ({ value, classes }: { value: string } & WithStyles<PermissionItemClasses>) => {
  57         const Icon = getIcon(value);
  58         return (
  59             <Grid container alignItems='center'>
  60                 <Icon />
  61                 <span className={classes.value}>
  62                     {value}
  63                 </span>
  64             </Grid>);
  65     });
  66
  67 const getIcon = (value: string) => {
  68     switch (value) {
  69         case PermissionSelectValue.READ:
  70             return RemoveRedEye;
  71         case PermissionSelectValue.WRITE:
  72             return Edit;
  73         case PermissionSelectValue.MANAGE:
  74             return Computer;
  75         default:
  76             return Computer;
  77     }
  78 };