// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { Grid, StyleRulesCallback, Divider, Switch, Typography } from '@material-ui/core';
-import { Field, WrappedFieldProps, formValues, formValueSelector } from 'redux-form';
-import { PermissionSelect, formatPermissionLevel, parsePermissionLevel } from './permission-select';
+import { Grid, StyleRulesCallback, Divider, Typography } from '@material-ui/core';
+import { Field, WrappedFieldProps } from 'redux-form';
import { WithStyles } from '@material-ui/core/styles';
import withStyles from '@material-ui/core/styles/withStyles';
-import { connect } from 'react-redux';
+import { VisibilityLevelSelect } from './visibility-level-select';
+import { VisibilityLevel } from '~/store/sharing-dialog/sharing-dialog-types';
const sharingPublicAccessStyles: StyleRulesCallback<'root'> = theme => ({
root: {
- padding: `${theme.spacing.unit}px 0`,
+ padding: `${theme.spacing.unit * 2}px 0`,
}
});
const SharingPublicAccessForm = withStyles(sharingPublicAccessStyles)(
- ({ classes }: WithStyles<'root'>) =>
+ ({ classes, visibility }: WithStyles<'root'> & { visibility: VisibilityLevel }) =>
<>
<Divider />
<Grid container alignItems='center' spacing={8} className={classes.root}>
<Grid item xs={8}>
- <Typography variant='subheading'>Public access</Typography>
+ <Typography variant='subheading'>
+ {renderVisibilityInfo(visibility)}
+ </Typography>
</Grid>
<Grid item xs={4} container wrap='nowrap'>
- <Field
- name='permissions'
- component={PermissionSelectComponent}
- format={formatPermissionLevel}
- parse={parsePermissionLevel}
- />
- <Field name='enabled' component={PublicAccessSwitch} />
+ <Field name='visibility' component={VisibilityLevelSelectComponent} />
</Grid>
</Grid>
</>
);
-export default () => <SharingPublicAccessForm />;
-
-const PublicAccessSwitch = (props: WrappedFieldProps) =>
- <PublicAccessSwitchComponent {...props} />;
-
-const publicAccessSwitchStyles: StyleRulesCallback<'root'> = theme => ({
- root: {
- margin: `0 -7px`,
+const renderVisibilityInfo = (visibility: VisibilityLevel) => {
+ switch (visibility) {
+ case VisibilityLevel.PUBLIC:
+ return 'Anyone can access';
+ case VisibilityLevel.SHARED:
+ return 'Specific people can access';
+ case VisibilityLevel.PRIVATE:
+ return 'Only you can access';
+ default:
+ return '';
}
-});
+};
-const PublicAccessSwitchComponent = withStyles(publicAccessSwitchStyles)(
- ({ input, classes }: WrappedFieldProps & WithStyles<'root'>) =>
- <Switch checked={input.value} onChange={input.onChange} color='primary' classes={classes} />
-);
+export default ({ visibility }: { visibility: VisibilityLevel }) =>
+ <SharingPublicAccessForm {...{ visibility }} />;
-const PermissionSelectComponent = connect(
- (state: any, props: WrappedFieldProps) => ({
- disabled: !formValueSelector(props.meta.form)(state, 'enabled'),
- })
-)(({ input, disabled }: WrappedFieldProps & { disabled: boolean }) => {
- return <PermissionSelect disabled={disabled} fullWidth disableUnderline {...input} />;
-});
+const VisibilityLevelSelectComponent = ({ input }: WrappedFieldProps) =>
+ <VisibilityLevelSelect fullWidth disableUnderline {...input} />;