src/views-components/move-to-dialog/move-to-dialog.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, Field, WrappedFieldProps } from 'redux-form';
   7 import { WithDialogProps } from '~/store/dialog/with-dialog';
   8 import { FormDialog } from '~/components/form-dialog/form-dialog';
   9 import { ProjectTreePicker } from '~/views-components/project-tree-picker/project-tree-picker';
  10 import { Typography } from "@material-ui/core";
  11 import { MOVE_TO_VALIDATION } from '~/validators/validators';
  12 import { MoveToFormDialogData } from '~/store/move-to-dialog/move-to-dialog';
  13
  14 export const MoveToFormDialog = (props: WithDialogProps<string> & InjectedFormProps<MoveToFormDialogData>) =>
  15     <FormDialog
  16         dialogTitle='Move to'
  17         formFields={MoveToDialogFields}
  18         submitLabel='Move'
  19         {...props}
  20     />;
  21
  22 const MoveToDialogFields = () =>
  23     <Field
  24         name="ownerUuid"
  25         component={ProjectPicker}
  26         validate={MOVE_TO_VALIDATION} />;
  27
  28 const ProjectPicker = (props: WrappedFieldProps) =>
  29     <div style={{ height: '200px', display: 'flex', flexDirection: 'column' }}>
  30         <ProjectTreePicker onChange={handleChange(props)} />
  31         {props.meta.dirty && props.meta.error &&
  32             <Typography variant='caption' color='error'>
  33                 {props.meta.error}
  34             </Typography>}
  35     </div>;
  36
  37 const handleChange = (props: WrappedFieldProps) => (value: string) =>
  38     props.input.value === value
  39         ? props.input.onChange('')
  40         : props.input.onChange(value);