konnosDashboard
MoveItemsModal.tsx92 lines · main
1import { noop } from 'lodash'
2import { useEffect, useState } from 'react'
3import { Button, Input, Modal } from 'ui'
4import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
5
6import { StorageItemWithColumn } from '../Storage.types'
7
8interface MoveItemsModalProps {
9 bucketName: string
10 visible: boolean
11 selectedItemsToMove: StorageItemWithColumn[]
12 onSelectCancel: () => void
13 onSelectMove: (path: string) => void
14}
15
16export const MoveItemsModal = ({
17 bucketName = '',
18 visible = false,
19 selectedItemsToMove = [],
20 onSelectCancel = noop,
21 onSelectMove = noop,
22}: MoveItemsModalProps) => {
23 const [moving, setMoving] = useState(false)
24 const [newPath, setNewPath] = useState('')
25
26 useEffect(() => {
27 setMoving(false)
28 setNewPath('')
29 }, [visible])
30
31 const multipleFiles = selectedItemsToMove.length > 1
32
33 const title = multipleFiles
34 ? `Moving ${selectedItemsToMove.length} items within ${bucketName}`
35 : selectedItemsToMove.length === 1
36 ? `Moving ${selectedItemsToMove[0]?.name} within ${bucketName}`
37 : ``
38
39 const description = `Enter the path to where you'd like to move the file${
40 multipleFiles ? 's' : ''
41 } to.`
42
43 const onConfirmMove = (event: any) => {
44 if (event) {
45 event.preventDefault()
46 }
47 setMoving(true)
48 const formattedPath = newPath[0] === '/' ? newPath.slice(1) : newPath
49 onSelectMove(formattedPath)
50 }
51
52 return (
53 <Modal
54 visible={visible}
55 header={title}
56 description={description}
57 size="medium"
58 onCancel={onSelectCancel}
59 customFooter={
60 <div className="flex items-center gap-2">
61 <Button type="default" onClick={onSelectCancel}>
62 Cancel
63 </Button>
64 <Button type="primary" loading={moving} onClick={onConfirmMove}>
65 {moving ? 'Moving files' : 'Move files'}
66 </Button>
67 </div>
68 }
69 >
70 <Modal.Content>
71 <form>
72 <FormItemLayout
73 label={`Path to new directory in ${bucketName}`}
74 description="Leave blank to move items to the root of the bucket"
75 layout="vertical"
76 isReactForm={false}
77 >
78 <Input
79 autoFocus
80 type="text"
81 placeholder="e.g folder1/subfolder2"
82 value={newPath}
83 onChange={(event) => setNewPath(event.target.value)}
84 />
85 </FormItemLayout>
86
87 <button className="hidden" type="submit" onClick={onConfirmMove} />
88 </form>
89 </Modal.Content>
90 </Modal>
91 )
92}