61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { useFormContext, ErrorMessage } from 'react-hook-form';
|
|
import { CUSTOM_PARAMS_OPTIONS } from './customParamsOptions';
|
|
import { isFirstParam } from './CustomParams';
|
|
|
|
interface Props {
|
|
isDisabled: boolean;
|
|
index: string;
|
|
name: string;
|
|
defaultValue: string;
|
|
}
|
|
|
|
const CustomParamValue: React.FC<Props> = ({
|
|
isDisabled,
|
|
index,
|
|
name,
|
|
defaultValue,
|
|
}) => {
|
|
|
|
const { register, unregister, errors, watch, setValue } = useFormContext();
|
|
const selectInputName: string = `${index}[name]`;
|
|
const valInputName: string = `${index}[value]`;
|
|
const selectedParamName: any = watch(selectInputName, name);
|
|
|
|
React.useEffect(
|
|
() => {
|
|
if (selectedParamName) {
|
|
setValue(valInputName, CUSTOM_PARAMS_OPTIONS[selectedParamName].defaultValue, true);
|
|
}
|
|
},
|
|
[selectedParamName],
|
|
);
|
|
|
|
React.useEffect(
|
|
() => {
|
|
if (isFirstParam(index)) { unregister(valInputName) }
|
|
},
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<label className="label">Value</label>
|
|
<input
|
|
className="input"
|
|
placeholder="Value"
|
|
ref={register({
|
|
required: 'Value is required.',
|
|
})}
|
|
name={valInputName}
|
|
defaultValue={defaultValue}
|
|
autoComplete="off"
|
|
disabled={isDisabled}
|
|
/>
|
|
<p className="help is-danger">
|
|
<ErrorMessage errors={errors} name={valInputName}/>
|
|
</p>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default React.memo(CustomParamValue);
|