Есть компонент PrimitiveTypeEditor, в который передаётся value типа EditorValue. Из него это value передаётся в компоненты TextBox, NumberInput и CheckBox.
В TextBox должен передаваться string, в NumberInput – number, в CheckBox – boolean.
В PropTypes есть метод oneOfType, а как реализовывать без него в TypeScript?
Вопрос — как реализовать интерфейс EditorValue, чтобы value могло быть нужным типом для компонентов
Тип EditorValue
export type EditorValue = string | number | boolean;
Файл PrimitiveTypeEditor.tsx
class PrimitiveTypeEditor extends DojoReactComponent {
render(): ReactElement {
const { dataType, title, value }: PrimitiveTypeEditorState = this.state;
/** Слушатель изменения значения редактора */
const onChangeHandler = (newValue: EditorValue) => {
this.setState({ value: newValue });
};
return (
<div>
{(() => {
switch (dataType) {
case 'STRING':
case 'GUID':
return <TextBox
{...this.state}
title={title}
onChange={onChangeHandler} value={value}/>;
case 'INTEGER':
case 'DOUBLE':
return <NumberInput
{...this.state}
title={title}
onChange={onChangeHandler} value={value} type={dataType}/>;
case 'BOOLEAN':
return <CheckBox
{...this.state}
title={title}
onChange={onChangeHandler} value={value}/>;
case 'DATE':
return <DatePicker
{...this.state}
title={title}
onChange={onChangeHandler} value={value}/>;
default:
throw new Error('Использован несуществующий тип данных для PrimitiveTypeEditor');
}
})()}
</div>
);
}
}
interface PrimitiveTypeEditorState {
dataType?: EditorType,
title?: string,
value?: EditorValue
}
Файл CheckBox.tsx
const CheckBox: FunctionComponent<Props> = ({ title, onChange, ...props }: Props) => {
const [{ value = false, disabled = false, showLabel = true }, setProps] = useState(props);
/** Callback-функция изменения значения */
const onChangeHandler = (_:SyntheticEvent<HTMLElement>, { checked: newValue }: CheckboxProps) => onChange(newValue);
/** Слушатели изменения необязательных свойств */
useEffect(() => setProps(props),
[props.value, props.disabled, props.showLabel]);
return (
<div className={'checkbox-input'}>
<Checkbox
onChange={onChangeHandler} checked={value}
disabled={disabled}/>
{showLabel && <div className={'input-title'}>{title}</div>}
</div>
);
};
interface Props {
title: string,
onChange: (value: EditorValue) => void,
value?: EditorValue,
placeholder?: string,
disabled?: boolean,
showLabel?: boolean,
}