19231: Add smaller page sizes (10 and 20 items) to load faster
[arvados-workbench2.git] / src / views-components / sharing-dialog / visibility-level-select.tsx
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import React from 'react';
6 import { MenuItem, Select, withStyles, StyleRulesCallback } from '@material-ui/core';
7 import Lock from '@material-ui/icons/Lock';
8 import People from '@material-ui/icons/People';
9 import Public from '@material-ui/icons/Public';
10 import { WithStyles } from '@material-ui/core/styles';
11 import { SelectProps } from '@material-ui/core/Select';
12 import { SelectItem } from './select-item';
13 import { VisibilityLevel } from 'store/sharing-dialog/sharing-dialog-types';
14
15
16 type VisibilityLevelSelectClasses = 'value';
17
18 const VisibilityLevelSelectStyles: StyleRulesCallback<VisibilityLevelSelectClasses> = theme => ({
19     value: {
20         marginLeft: theme.spacing.unit,
21     }
22 });
23 export const VisibilityLevelSelect = withStyles(VisibilityLevelSelectStyles)(
24     ({ classes, ...props }: SelectProps & WithStyles<VisibilityLevelSelectClasses>) =>
25         <Select
26             {...props}
27             renderValue={renderPermissionItem}
28             inputProps={{ classes }}>
29             <MenuItem value={VisibilityLevel.PUBLIC}>
30                 {renderPermissionItem(VisibilityLevel.PUBLIC)}
31             </MenuItem>
32             <MenuItem value={VisibilityLevel.SHARED}>
33                 {renderPermissionItem(VisibilityLevel.SHARED)}
34             </MenuItem>
35             <MenuItem value={VisibilityLevel.PRIVATE}>
36                 {renderPermissionItem(VisibilityLevel.PRIVATE)}
37             </MenuItem>
38         </Select>);
39
40 const renderPermissionItem = (value: string) =>
41     <SelectItem {...{ value, icon: getIcon(value) }} />;
42
43 const getIcon = (value: string) => {
44     switch (value) {
45         case VisibilityLevel.PUBLIC:
46             return Public;
47         case VisibilityLevel.SHARED:
48             return People;
49         case VisibilityLevel.PRIVATE:
50             return Lock;
51         default:
52             return Lock;
53     }
54 };
55