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         <Grid container alignItems='center'>
  58             {renderPermissionIcon(value)}
  59             <span className={classes.value}>
  60                 {value}
  61             </span>
  62         </Grid>);
  63
  64 const renderPermissionIcon = (value: string) => {
  65     switch (value) {
  66         case PermissionSelectValue.READ:
  67             return <RemoveRedEye />;
  68         case PermissionSelectValue.WRITE:
  69             return <Edit />;
  70         case PermissionSelectValue.MANAGE:
  71             return <Computer />;
  72         default:
  73             return null;
  74     }
  75 };