frontend/src/components/Modal/MoveCopyModal.js
// @flow import * as React from 'react';import Button from 'react-bootstrap/lib/Button';import { connect } from 'react-redux';import FormControl from 'react-bootstrap/lib/FormControl';import FormGroup from 'react-bootstrap/lib/FormGroup';import Modal from 'react-bootstrap/lib/Modal';import { fileListActions } from '../../store/files/Files';import FileBreadcrumbs from '../FileBreadcrumbs/FileBreadcrumbs';import DirectoryBrowser from '../DirectoryBrowser/DirectoryBrowser';import { removeModal } from '../../store/ui/modals/Modals';import type { FileType } from '../../types/fileTypes';import LinkComponent from './shared_components/LinkComponent'; type Props = { id: string, action: any, title: string, files: Array<FileType>, promptVerb: string, submitText: string, path: string, systemName: string, removeModal(string): typeof undefined, fileListActionsPending(string): typeof undefined,} type State = { show: boolean, pathPrefix: string, path: string,} class MoveCopyModal extends React.Component<Props, State> { constructor(props) { super(props); const pathTokens = props.path.split('/'); this.state = { show: true, pathPrefix: pathTokens.slice(0, 3).join('/'), path: ['', ...pathTokens.slice(3)].join('/'), }; } closeModal = () => { const { id, removeModal } = this.props; this.setState({ show: false, }); setTimeout(() => { removeModal(id); }, 500); }; getFullDirectoryPath = () => { const { pathPrefix, path } = this.state; return ([ pathPrefix, path, ].join('/').replace(/([^:]\/)\/+/g, '$1')); }; doMoveOrCopy = () => { const { action } = this.props; const { path } = this.state; this.closeModal(); const absolutePath = path; console.log('Absolute path', absolutePath); action(absolutePath); }; updatePath = (path) => { const { fileListActionsPending } = this.props; fileListActionsPending(path); const pathTokens = path.split('/'); this.setState({ pathPrefix: pathTokens.slice(0, 3).join('/'), path: ['', ...pathTokens.slice(3)].join('/'), }); }; render = () => { const { title, promptVerb, files, systemName, submitText, } = this.props; const { show, pathPrefix, path } = this.state; return ( <Modal show={show} backdrop onHide={this.closeModal} > <Modal.Header> <Modal.Title>{title}</Modal.Title> </Modal.Header> <Modal.Body> <p> Select a location to {' '} {promptVerb} {' '} the following files: </p> <ul> {files.map( file => ( <li key={file.fullPath}> {file.name} </li> ), )} </ul> <FileBreadcrumbs systemName={systemName} prefix={pathPrefix} pathname={this.getFullDirectoryPath()} crumbComponent={( <LinkComponent onClick={this.updatePath} /> )} /> <DirectoryBrowser path={this.getFullDirectoryPath()} handleDoubleClick={p => this.updatePath(p)} style={{ maxHeight: '40vh', overflowY: 'auto', }} /> <FormGroup> <FormControl type="text" value={path} onChange={(e) => { this.updatePath(e.target.value); }} /> </FormGroup> </Modal.Body> <Modal.Footer> <Button onClick={this.closeModal}>Cancel</Button> <Button bsStyle="danger" onClick={this.doMoveOrCopy} > {submitText} </Button> </Modal.Footer> </Modal> ); }} const mapDispatchToProps = { removeModal, fileListActionsPending: fileListActions.pending,}; export default connect( null, mapDispatchToProps,)(MoveCopyModal);