mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-04 23:15:57 -05:00
0cde5be165
Convert React context providers to TypeScript [don't squash!] GitOrigin-RevId: d92a91798286978410956ab791d73c17c5086d86
58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
import { createContext, FC, useContext, useMemo, useReducer } from 'react'
|
|
import { isCleanFilename } from '../util/safe-path'
|
|
|
|
const FileTreeCreateNameContext = createContext<
|
|
| {
|
|
name: string
|
|
touchedName: boolean
|
|
validName: boolean
|
|
setName: (name: string) => void
|
|
}
|
|
| undefined
|
|
>(undefined)
|
|
|
|
export const useFileTreeCreateName = () => {
|
|
const context = useContext(FileTreeCreateNameContext)
|
|
|
|
if (!context) {
|
|
throw new Error(
|
|
'useFileTreeCreateName is only available inside FileTreeCreateNameProvider'
|
|
)
|
|
}
|
|
|
|
return context
|
|
}
|
|
|
|
type State = {
|
|
name: string
|
|
touchedName: boolean
|
|
}
|
|
|
|
const FileTreeCreateNameProvider: FC<{ initialName?: string }> = ({
|
|
children,
|
|
initialName = '',
|
|
}) => {
|
|
const [state, setName] = useReducer(
|
|
(state: State, name: string) => ({
|
|
name, // the file name
|
|
touchedName: true, // whether the name has been edited
|
|
}),
|
|
{
|
|
name: initialName,
|
|
touchedName: false,
|
|
}
|
|
)
|
|
|
|
// validate the file name
|
|
const validName = useMemo(() => isCleanFilename(state.name.trim()), [state])
|
|
|
|
return (
|
|
<FileTreeCreateNameContext.Provider
|
|
value={{ ...state, setName, validName }}
|
|
>
|
|
{children}
|
|
</FileTreeCreateNameContext.Provider>
|
|
)
|
|
}
|
|
|
|
export default FileTreeCreateNameProvider
|