69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { useFormContext, ErrorMessage } from 'react-hook-form';
|
|
import CustomParamOptions from './CustomParamOptions';
|
|
import { isFirstParam, INDEX_PREFIX } from './CustomParams';
|
|
import { TopicFormCustomParam } from 'redux/interfaces';
|
|
|
|
interface Props {
|
|
isDisabled: boolean;
|
|
index: string;
|
|
name: string;
|
|
}
|
|
|
|
const CustomParamSelect: React.FC<Props> = ({
|
|
isDisabled,
|
|
index,
|
|
name,
|
|
}) => {
|
|
|
|
const { register, unregister, errors, getValues, triggerValidation } = useFormContext();
|
|
const optInputName = `${index}[name]`;
|
|
|
|
React.useEffect(
|
|
() => {
|
|
if (isFirstParam(index)) { unregister(optInputName) }
|
|
},
|
|
);
|
|
|
|
const selectedMustBeUniq = (selected: string) => {
|
|
const values: any = getValues({ nest: true });
|
|
const customParamsValues: TopicFormCustomParam = values.customParams;
|
|
|
|
let valid = true;
|
|
|
|
for (const [key, customParam] of Object.entries(customParamsValues)) {
|
|
if (`${INDEX_PREFIX}.${key}` === index) { continue; }
|
|
if (selected === customParam.name) {
|
|
valid = false;
|
|
break;
|
|
};
|
|
}
|
|
|
|
return valid ? true : 'Custom Parameter must be unique';
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<label className="label">Custom Parameter</label>
|
|
<div className="select is-block">
|
|
<select
|
|
name={optInputName}
|
|
ref={register({
|
|
required: 'Custom Parameter is required.',
|
|
validate: { unique: selected => selectedMustBeUniq(selected) },
|
|
})}
|
|
onChange={() => triggerValidation(optInputName)}
|
|
disabled={isDisabled}
|
|
defaultValue={name}
|
|
>
|
|
<CustomParamOptions />
|
|
</select>
|
|
<p className="help is-danger">
|
|
<ErrorMessage errors={errors} name={optInputName}/>
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default React.memo(CustomParamSelect);
|