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' | 'icon';
  48
  49 const permissionItemStyles: StyleRulesCallback<PermissionItemClasses> = theme => ({
  50     value: {
  51         marginLeft: theme.spacing.unit,
  52     },
  53     icon: {
  54         margin: `-${theme.spacing.unit / 2}px 0`
  55     }
  56 });
  57
  58 const PermissionItem = withStyles(permissionItemStyles)(
  59     ({ value, classes }: { value: string } & WithStyles<PermissionItemClasses>) => {
  60         const Icon = getIcon(value);
  61         return (
  62             <Grid container alignItems='center'>
  63                 <Icon className={classes.icon} />
  64                 <span className={classes.value}>
  65                     {value}
  66                 </span>
  67             </Grid>);
  68     });
  69
  70 const getIcon = (value: string) => {
  71     switch (value) {
  72         case PermissionSelectValue.READ:
  73             return RemoveRedEye;
  74         case PermissionSelectValue.WRITE:
  75             return Edit;
  76         case PermissionSelectValue.MANAGE:
  77             return Computer;
  78         default:
  79             return Computer;
  80     }
  81 };