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, FieldArray, WrappedFieldArrayProps } from 'redux-form';
   7 import { Grid, FormControl, InputLabel } from '@material-ui/core';
   8 import { PermissionSelect } from './permission-select';
   9 import { PeopleSelect, Person } from './people-select';
  10
  11 export default () =>
  12     <Grid container spacing={8}>
  13         <Grid item xs={8}>
  14             <InvitedPeopleField />
  15         </Grid>
  16         <Grid item xs={4}>
  17             <PermissionSelectField />
  18         </Grid>
  19     </Grid>;
  20
  21 const InvitedPeopleField = () =>
  22     <FieldArray
  23         name='invitedPeople'
  24         component={InvitedPeopleFieldComponent} />;
  25
  26
  27 const InvitedPeopleFieldComponent = ({ fields }: WrappedFieldArrayProps<Person>) =>
  28     <PeopleSelect
  29         items={fields.getAll() || []}
  30         onCreate={fields.push}
  31         onSelect={fields.push}
  32         onDelete={fields.remove} />;
  33
  34 const PermissionSelectField = () =>
  35     <Field
  36         name='permission'
  37         component={PermissionSelectComponent} />;
  38
  39 const PermissionSelectComponent = ({ input }: WrappedFieldProps) =>
  40     <FormControl fullWidth>
  41         <InputLabel>Authorization</InputLabel>
  42         <PermissionSelect {...input} />
  43     </FormControl>;