import { h, Fragment, JSX } from 'preact'; import { useCallback, useContext } from 'preact/hooks'; import { Modal, ModalContent, ModalFooter } from './Modal'; import { OptionsContext } from './OptionsContext'; import { BOOLEAN_OPTION, SELECT_OPTION, BooleanOption, Option, OptionSection, SelectOption, } from '../options'; import styles from './css/OptionsModal.module.css'; /** * Boolean property interface */ interface BooleanProps { option: BooleanOption; value: boolean; setValue: (name: string, value: boolean) => void; } /** * * @param option Boolean option * @param value Current value * @param setValue Value setter * @returns Boolean component */ const Boolean = ({ option, value, setValue } : BooleanProps) => { const { label, name } = option; const onChange = useCallback( (event: JSX.TargetedMouseEvent) => setValue(name, event.currentTarget.checked) , [name, setValue] ); return (
  • ); }; /** * Select property interface */ interface SelectProps { option: SelectOption; value: string; setValue: (name: string, value: string) => void; } /** * Select component that provides a dropdown to choose between * options. * * @param option Select option * @param value Current value * @param setValue Value setter * @returns Select component */ const Select = ({ option, value, setValue } : SelectProps) => { const { label, name } = option; const onChange = useCallback( (event: JSX.TargetedMouseEvent) => { setValue(name, event.currentTarget.value); }, [name, setValue] ); const makeOption = (option: { name: string; value: string }) => ( ); return (
  • ); }; /** * OptionsModal properties */ export interface OptionsModalProps { isOpen: boolean; onClose: (closeBox?: boolean) => void; } /** * Modal to allow editing of various component provided * options, like screen and cpu type * * @param Modal params * @returns OptionsModal component */ export const OptionsModal = ({ isOpen, onClose }: OptionsModalProps) => { const options = useContext(OptionsContext); const sections = options.getSections(); const setValue = useCallback(( name: string, value: string | boolean ) => { options.setOption(name, value); }, [options]); const makeOption = (option: Option) => { const { name, type } = option; const value = options.getOption(name); switch (type) { case BOOLEAN_OPTION: return ( ); case SELECT_OPTION: return (