115 lines
3.6 KiB
TypeScript
115 lines
3.6 KiB
TypeScript
import { type FC, useRef, useState } from 'react'
|
|
import Button from '@/components/ui/Button'
|
|
import Dialog from '@/components/ui/Dialog'
|
|
import { useStore } from '@/store'
|
|
import '@/components/wordList/editWordlList.css'
|
|
import Input from '@/components/ui/Input'
|
|
import Textarea from '@/components/ui/Textarea'
|
|
|
|
export interface RenameWordListProps {
|
|
currentWordList: string
|
|
}
|
|
|
|
const EditWordList: FC<RenameWordListProps> = ({ currentWordList }) => {
|
|
const [internalStatus, setInternalStatus] = useState<string>('')
|
|
const [newName, setNewName] = useState<string>('')
|
|
const dialogRef = useRef<HTMLDialogElement>(null)
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
type="button"
|
|
icon
|
|
disabled={currentWordList === ''}
|
|
onClick={() => {
|
|
if (dialogRef.current === null || currentWordList === '') {
|
|
return
|
|
}
|
|
const wordList = useStore.getState().wordLists[currentWordList]
|
|
if (wordList === undefined) {
|
|
return
|
|
}
|
|
setNewName(currentWordList)
|
|
setInternalStatus(wordList.join('\n'))
|
|
dialogRef.current.showModal()
|
|
}}
|
|
>
|
|
<i className="fa fa-fw fa-pencil"></i>
|
|
</Button>
|
|
<Dialog id="st-rnd-wordlist-edit-dialog" ref={dialogRef}>
|
|
<div>
|
|
<h2 id="st-rnd-wordlist-edit-dialog-title">
|
|
Edit Word List: <span>{currentWordList}</span>
|
|
</h2>
|
|
<label htmlFor="st-rnd-wordlist-name">Name</label>
|
|
<p className="st-rnd-small-text">
|
|
Name of the word list, used in placeholder and macros.
|
|
</p>
|
|
<Input
|
|
id="st-rnd-wordlist-name"
|
|
type="text"
|
|
value={newName}
|
|
onChange={(e) => setNewName(e.target.value)}
|
|
/>
|
|
<label htmlFor="st-rnd-wordlist-words">Words</label>
|
|
<p className="st-rnd-small-text">
|
|
Words separated by newlines, words can be more than one word!
|
|
</p>
|
|
<Textarea
|
|
id="st-rnd-wordlist-words"
|
|
value={internalStatus}
|
|
onChange={(e) => setInternalStatus(e.target.value)}
|
|
rows={10}
|
|
/>
|
|
<div id="st-rnd-wordlist-actions">
|
|
<Button
|
|
type="button"
|
|
neutral
|
|
onClick={() => {
|
|
if (dialogRef.current === null) {
|
|
return
|
|
}
|
|
dialogRef.current.close()
|
|
setInternalStatus('')
|
|
setNewName('')
|
|
}}
|
|
>
|
|
Close
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
onClick={() => {
|
|
if (
|
|
currentWordList === '' ||
|
|
newName === undefined ||
|
|
internalStatus === undefined ||
|
|
dialogRef.current === null
|
|
) {
|
|
return
|
|
}
|
|
if (newName === '') {
|
|
alert('Name cannot be empty')
|
|
return
|
|
}
|
|
const addWordList = useStore.getState().addWordList
|
|
if (currentWordList !== newName) {
|
|
const removeWordList = useStore.getState().removeWordList
|
|
removeWordList(currentWordList)
|
|
}
|
|
addWordList(newName, internalStatus.split('\n'))
|
|
dialogRef.current.close()
|
|
setInternalStatus('')
|
|
setNewName('')
|
|
}}
|
|
>
|
|
Save
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default EditWordList
|