src/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 { Field, InjectedFormProps, WrappedFieldProps } from "redux-form";
   7 import { Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress } from "@material-ui/core";
   8
   9 import { WithDialogProps } from "~/store/dialog/with-dialog";
  10 import { ProjectTreePicker } from "~/views-components/project-tree-picker/project-tree-picker";
  11 import { MOVE_TO_VALIDATION } from "~/validators/validators";
  12
  13 export const MoveToDialog = (props: WithDialogProps<string> & InjectedFormProps<{ name: string }>) =>
  14     <form>
  15         <Dialog open={props.open}
  16             disableBackdropClick={true}
  17             disableEscapeKeyDown={true}>
  18             <DialogTitle>Move to</DialogTitle>
  19             <DialogContent>
  20                 <Field
  21                     name="projectUuid"
  22                     component={Picker}
  23                     validate={MOVE_TO_VALIDATION} />
  24             </DialogContent>
  25             <DialogActions>
  26                 <Button
  27                     variant='flat'
  28                     color='primary'
  29                     disabled={props.submitting}
  30                     onClick={props.closeDialog}>
  31                     Cancel
  32                     </Button>
  33                 <Button
  34                     variant='contained'
  35                     color='primary'
  36                     type='submit'
  37                     onClick={props.handleSubmit}
  38                     disabled={props.pristine || props.invalid || props.submitting}>
  39                     {props.submitting ? <CircularProgress size={20} /> : 'Move'}
  40                 </Button>
  41             </DialogActions>
  42         </Dialog>
  43     </form>;
  44
  45 const Picker = (props: WrappedFieldProps) =>
  46     <div style={{ width: '400px', height: '144px', display: 'flex', flexDirection: 'column' }}>
  47        <ProjectTreePicker onChange={projectUuid => props.input.onChange(projectUuid)} />
  48     </div>;