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, 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 import { SelectItem } from './select-item';
  13 import { PermissionLevel } from '../../models/permission';
  14
  15 export enum PermissionSelectValue {
  16     READ = 'Read',
  17     WRITE = 'Write',
  18     MANAGE = 'Manage',
  19 }
  20
  21 export const parsePermissionLevel = (value: PermissionSelectValue) => {
  22     switch (value) {
  23         case PermissionSelectValue.READ:
  24             return PermissionLevel.CAN_READ;
  25         case PermissionSelectValue.WRITE:
  26             return PermissionLevel.CAN_WRITE;
  27         case PermissionSelectValue.MANAGE:
  28             return PermissionLevel.CAN_MANAGE;
  29         default:
  30             return PermissionLevel.NONE;
  31     }
  32 };
  33
  34 export const formatPermissionLevel = (value: PermissionLevel) => {
  35     switch (value) {
  36         case PermissionLevel.CAN_READ:
  37             return PermissionSelectValue.READ;
  38         case PermissionLevel.CAN_WRITE:
  39             return PermissionSelectValue.WRITE;
  40         case PermissionLevel.CAN_MANAGE:
  41             return PermissionSelectValue.MANAGE;
  42         default:
  43             return PermissionSelectValue.READ;
  44     }
  45 };
  46
  47 type PermissionSelectClasses = 'value';
  48
  49 const PermissionSelectStyles: StyleRulesCallback<PermissionSelectClasses> = theme => ({
  50     value: {
  51         marginLeft: theme.spacing.unit,
  52     }
  53 });
  54
  55 export const PermissionSelect = withStyles(PermissionSelectStyles)(
  56     ({ classes, ...props }: SelectProps & WithStyles<PermissionSelectClasses>) =>
  57         <Select
  58             {...props}
  59             renderValue={renderPermissionItem}
  60             inputProps={{ classes }}>
  61             <MenuItem value={PermissionSelectValue.READ}>
  62                 {renderPermissionItem(PermissionSelectValue.READ)}
  63             </MenuItem>
  64             <MenuItem value={PermissionSelectValue.WRITE}>
  65                 {renderPermissionItem(PermissionSelectValue.WRITE)}
  66             </MenuItem>
  67             <MenuItem value={PermissionSelectValue.MANAGE}>
  68                 {renderPermissionItem(PermissionSelectValue.MANAGE)}
  69             </MenuItem>
  70         </Select>);
  71
  72 const renderPermissionItem = (value: string) =>
  73     <SelectItem {...{ value, icon: getIcon(value) }} />;
  74
  75 const getIcon = (value: string) => {
  76     switch (value) {
  77         case PermissionSelectValue.READ:
  78             return RemoveRedEye;
  79         case PermissionSelectValue.WRITE:
  80             return Edit;
  81         case PermissionSelectValue.MANAGE:
  82             return Computer;
  83         default:
  84             return Computer;
  85     }
  86 };