Improve people select styles and behaviour
[arvados-workbench2.git] / src / views-components / sharing-dialog / sharing-public-access-form-component.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 { Grid, StyleRulesCallback, Divider, Typography } from '@material-ui/core';
7 import { Field, WrappedFieldProps } from 'redux-form';
8 import { WithStyles } from '@material-ui/core/styles';
9 import withStyles from '@material-ui/core/styles/withStyles';
10 import { VisibilityLevelSelect } from './visibility-level-select';
11 import { VisibilityLevel } from '~/store/sharing-dialog/sharing-dialog-types';
12
13 const sharingPublicAccessStyles: StyleRulesCallback<'root'> = theme => ({
14     root: {
15         padding: `${theme.spacing.unit * 2}px 0`,
16     }
17 });
18
19 const SharingPublicAccessForm = withStyles(sharingPublicAccessStyles)(
20     ({ classes, visibility }: WithStyles<'root'> & { visibility: VisibilityLevel }) =>
21         <>
22             <Divider />
23             <Grid container alignItems='center' spacing={8} className={classes.root}>
24                 <Grid item xs={8}>
25                     <Typography variant='subheading'>
26                         {renderVisibilityInfo(visibility)}
27                     </Typography>
28                 </Grid>
29                 <Grid item xs={4} container wrap='nowrap'>
30                     <Field name='visibility' component={VisibilityLevelSelectComponent} />
31                 </Grid>
32             </Grid>
33         </>
34 );
35
36 const renderVisibilityInfo = (visibility: VisibilityLevel) => {
37     switch (visibility) {
38         case VisibilityLevel.PUBLIC:
39             return 'Anyone can access';
40         case VisibilityLevel.SHARED:
41             return 'Specific people can access';
42         case VisibilityLevel.PRIVATE:
43             return 'Only you can access';
44         default:
45             return '';
46     }
47 };
48
49 export default ({ visibility }: { visibility: VisibilityLevel }) =>
50     <SharingPublicAccessForm {...{ visibility }} />;
51
52 const VisibilityLevelSelectComponent = ({ input }: WrappedFieldProps) =>
53     <VisibilityLevelSelect fullWidth disableUnderline {...input} />;