src/views-components/resource-properties-form/resource-properties-form.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 { InjectedFormProps } from 'redux-form';
   7 import { Grid, withStyles } from '@material-ui/core';
   8 import { PropertyKeyField, PROPERTY_KEY_FIELD_NAME } from './property-key-field';
   9 import { PropertyValueField, PROPERTY_VALUE_FIELD_NAME } from './property-value-field';
  10 import { ProgressButton } from '~/components/progress-button/progress-button';
  11
  12 export interface ResourcePropertiesFormData {
  13     [PROPERTY_KEY_FIELD_NAME]: string;
  14     [PROPERTY_VALUE_FIELD_NAME]: string;
  15 }
  16
  17 export const ResourcePropertiesForm = ({ handleSubmit, submitting, invalid }: InjectedFormProps<ResourcePropertiesFormData>) =>
  18     <form onSubmit={handleSubmit}>
  19         <Grid container spacing={16}>
  20             <Grid item xs>
  21                 <PropertyKeyField />
  22             </Grid>
  23             <Grid item xs>
  24                 <PropertyValueField />
  25             </Grid>
  26             <Grid item xs>
  27                 <Button
  28                     disabled={invalid}
  29                     loading={submitting}
  30                     color='primary'
  31                     variant='contained'
  32                     type='submit'>
  33                     Add
  34                 </Button>
  35             </Grid>
  36         </Grid>
  37     </form>;
  38
  39 const Button = withStyles(theme => ({
  40     root: { marginTop: theme.spacing.unit }
  41 }))(ProgressButton);