Refactor modals to use context provider

src/app/components/generator/FileRenaming.tsx

@@ -1,16 +1,17 @@
 import { useState } from 'preact/hooks'
 import { Analytics } from '../../Analytics.js'
 import { useLocale } from '../../contexts/index.js'
+import { useModal } from '../../contexts/Modal.jsx'
 import { Btn } from '../Btn.js'
 import { TextInput } from '../forms/index.js'
 import { Modal } from '../Modal.js'
 
 interface Props {
 	uri: string,
-	onClose: () => void,
 }
-export function FileRenaming({ uri, onClose }: Props) {
+export function FileRenaming({ uri }: Props) {
 	const { locale } = useLocale()
+	const { hideModal } = useModal()
 	const [fileId, setFileId] = useState(uri) // TODO: get original file id
 	const [error, setError] = useState<string>()
 
@@ -26,12 +27,12 @@ export function FileRenaming({ uri, onClose }: Props) {
 		}
 		Analytics.renameProjectFile('menu')
 		// TODO: rename file
-		onClose()
+		hideModal()
 	}
 
-	return <Modal class="file-modal" onDismiss={onClose}>
+	return <Modal class="file-modal">
 		<p>{locale('project.rename_file')}</p>
-		<TextInput autofocus class="btn btn-input" value={fileId} onChange={changeFileId} onEnter={doSave} onCancel={onClose} placeholder={locale('resource_location')} spellcheck={false} />
+		<TextInput autofocus class="btn btn-input" value={fileId} onChange={changeFileId} onEnter={doSave} onCancel={hideModal} placeholder={locale('resource_location')} spellcheck={false} />
 		{error !== undefined && <span class="invalid">{error}</span>}
 		<Btn icon="pencil" label={locale('project.rename')} onClick={doSave} />
 	</Modal>