src/views-components/rename-file-dialog/rename-file-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 { compose } from 'redux';
   7 import { reduxForm, InjectedFormProps, Field } from 'redux-form';
   8 import { withDialog, WithDialogProps } from '~/store/dialog/with-dialog';
   9 import { FormDialog } from '~/components/form-dialog/form-dialog';
  10 import { DialogContentText } from '@material-ui/core';
  11 import { TextField } from '~/components/text-field/text-field';
  12 import { RENAME_FILE_DIALOG, RenameFileDialogData, renameFile } from '~/store/collection-panel/collection-panel-files/collection-panel-files-actions';
  13 import { WarningCollection } from '~/components/warning-collection/warning-collection';
  14 import { RENAME_FILE_VALIDATION } from '~/validators/validators';
  15
  16 export const RenameFileDialog = compose(
  17     withDialog(RENAME_FILE_DIALOG),
  18     reduxForm({
  19         form: RENAME_FILE_DIALOG,
  20         touchOnChange: true,
  21         onSubmit: (data: { path: string }, dispatch) => {
  22             dispatch<any>(renameFile(data.path));
  23         }
  24     })
  25 )((props: WithDialogProps<RenameFileDialogData> & InjectedFormProps<{ name: string, path: string }>) =>
  26     <FormDialog
  27         dialogTitle='Rename'
  28         formFields={RenameDialogFormFields}
  29         submitLabel='Ok'
  30         {...props}
  31     />);
  32
  33 const RenameDialogFormFields = (props: WithDialogProps<RenameFileDialogData>) => <>
  34     <DialogContentText>
  35         {`Please, enter a new name for ${props.data.name}`}
  36     </DialogContentText>
  37     <Field
  38         name='path'
  39         component={TextField}
  40         autoFocus={true}
  41         validate={RENAME_FILE_VALIDATION}
  42     />
  43     <WarningCollection text="Renaming a file will change the collection's content address." />
  44 </>;