Files
node-factorio-recipes/components/home/Preferences/Preferences.tsx
2022-08-20 14:47:04 +02:00

75 lines
2.4 KiB
TypeScript

import { forwardRef, ForwardRefRenderFunction, useImperativeHandle, useState } from 'react'
import { FactorySelect } from '../FactorySelect/FactorySelect'
import { useGroups } from '../../contexts/GroupProvider'
import { i18n, I18n } from '../../shared/I18n/I18n'
import { useIntl } from 'react-intl'
interface Handle {
addGroup(preferredName: string, exported?: string[], mall?: string[]): boolean
}
const PreferencesBase: ForwardRefRenderFunction<Handle> = (_, forwardedRef) => {
const intl = useIntl()
const DEFAULT_NAME = i18n(intl, 'page.home.group.add.default_group_name')
useImperativeHandle(forwardedRef, () => ({
addGroup(preferredName: string, exported?: string[], mall?: string[]) {
const name = newGroupValue !== DEFAULT_NAME ? newGroupValue : preferredName
const result = addGroup(name, exported, mall)
result && setNewGroupValue(DEFAULT_NAME)
return result
}
}))
const { addGroup, baseFactories, setBaseFactories, ignoredFactories, setIgnoredFactories } =
useGroups()
const [newGroupValue, setNewGroupValue] = useState(DEFAULT_NAME)
return (
<>
<fieldset>
<legend>
<I18n id={'page.home.pref.basic.title'} />
</legend>
<span>
<I18n id={'page.home.pref.basic.description'} />
</span>
<FactorySelect
id={'baseFactoriesSelect'}
factories={baseFactories}
onSetFactories={setBaseFactories}
fixInputs={true}
/>
</fieldset>
<fieldset>
<legend>
<I18n id={'page.home.pref.ignored.title'} />
</legend>
<span>
<I18n id={'page.home.pref.ignored.description'} />
</span>
<FactorySelect
id={'ignoredFactoriesSelect'}
factories={ignoredFactories}
onSetFactories={setIgnoredFactories}
/>
</fieldset>
<fieldset>
<legend>
<I18n id={'page.home.group.add.title'} />
</legend>
<input value={newGroupValue} onChange={e => setNewGroupValue(e.target.value)} />
<button
disabled={!newGroupValue}
onClick={() => {
addGroup(newGroupValue)
setNewGroupValue(DEFAULT_NAME)
}}
>
<I18n id={'page.home.group.add.button_text'} values={{ name: newGroupValue }} />
</button>
</fieldset>
</>
)
}
export const Preferences = forwardRef(PreferencesBase)