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, Switch, Typography } from '@material-ui/core';
   7 import { Field, WrappedFieldProps, formValues, formValueSelector } from 'redux-form';
   8 import { PermissionSelect } from './permission-select';
   9 import { WithStyles } from '@material-ui/core/styles';
  10 import withStyles from '@material-ui/core/styles/withStyles';
  11 import { connect } from 'react-redux';
  12
  13 const sharingPublicAccessStyles: StyleRulesCallback<'root'> = theme => ({
  14     root: {
  15         padding: `${theme.spacing.unit}px 0`,
  16     }
  17 });
  18
  19 const SharingPublicAccessForm = withStyles(sharingPublicAccessStyles)(
  20     ({ classes }: WithStyles<'root'>) =>
  21         <>
  22             <Divider />
  23             <Grid container alignItems='center' spacing={8} className={classes.root}>
  24                 <Grid item xs={8}>
  25                     <Typography variant='subheading'>Public access</Typography>
  26                 </Grid>
  27                 <Grid item xs={4} container wrap='nowrap'>
  28                     <Field name='permissions' component={PermissionSelectComponent} />
  29                     <Field name='enabled' component={PublicAccessSwitch} />
  30                 </Grid>
  31             </Grid>
  32         </>
  33 );
  34
  35 export default () => <SharingPublicAccessForm />;
  36
  37 const PublicAccessSwitch = (props: WrappedFieldProps) =>
  38     <PublicAccessSwitchComponent {...props} />;
  39
  40 const publicAccessSwitchStyles: StyleRulesCallback<'root'> = theme => ({
  41     root: {
  42         margin: `0 -7px`,
  43     }
  44 });
  45
  46 const PublicAccessSwitchComponent = withStyles(publicAccessSwitchStyles)(
  47     ({ input, classes }: WrappedFieldProps & WithStyles<'root'>) =>
  48         <Switch checked={input.value} onChange={input.onChange} color='primary' classes={classes} />
  49 );
  50
  51 const PermissionSelectComponent = connect(
  52     (state: any, props: WrappedFieldProps) => ({
  53         disabled: !formValueSelector(props.meta.form)(state, 'enabled'),
  54     })
  55 )(({ input, disabled }: WrappedFieldProps & { disabled: boolean }) => {
  56     return <PermissionSelect disabled={disabled} fullWidth disableUnderline {...input} />;
  57 });