src/views-components/sharing-dialog/sharing-invitation-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 { Field, WrappedFieldProps } from 'redux-form';
   7 import { Grid, Input, FormControl, FormHelperText, FormLabel, InputLabel } from '@material-ui/core';
   8 import { ChipsInput } from '~/components/chips-input/chips-input';
   9 import { identity } from 'lodash';
  10 import { PermissionSelect } from './permission-select';
  11
  12 export default () =>
  13     <Grid container spacing={8}>
  14         <Grid item xs={8}>
  15             <InvitedPeopleField />
  16         </Grid>
  17         <Grid item xs={4}>
  18             <PermissionSelectField />
  19         </Grid>
  20     </Grid>;
  21
  22 const InvitedPeopleField = () =>
  23     <Field
  24         name='invitedPeople'
  25         component={InvitedPeopleFieldComponent} />;
  26
  27
  28 const InvitedPeopleFieldComponent = (props: WrappedFieldProps) =>
  29     <FormControl fullWidth>
  30         <FormLabel>
  31             Invite people
  32         </FormLabel>
  33         <ChipsInput
  34             {...props.input}
  35             value={['Test User']}
  36             createNewValue={identity}
  37             inputComponent={Input} />
  38         <FormHelperText>
  39             Helper text
  40         </FormHelperText>
  41     </FormControl>;
  42
  43 const PermissionSelectField = () =>
  44     <Field
  45         name='permission'
  46         component={PermissionSelectComponent} />;
  47
  48 const PermissionSelectComponent = ({ input }: WrappedFieldProps) =>
  49     <FormControl fullWidth>
  50         <InputLabel>Authorization</InputLabel>
  51         <PermissionSelect {...input} />
  52     </FormControl>;