update the TextFieldWithSubmit component

This commit is contained in:
dorj222
2023-02-01 10:19:29 +01:00
parent 9309ed78f7
commit ad40981668

View File

@ -38,6 +38,7 @@ export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
const [hasChanged, setHasChanged] = useState(false); const [hasChanged, setHasChanged] = useState(false);
const [isPwdInput, setPwdInputField] = useState(false);
const serverStatusData = useContext(ServerStatusContext); const serverStatusData = useContext(ServerStatusContext);
const { setFieldInConfigState } = serverStatusData || {}; const { setFieldInConfigState } = serverStatusData || {};
@ -66,6 +67,13 @@ export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
} }
}, [value]); }, [value]);
useEffect(() => {
if (fieldName === 'adminPassword') {
setPwdInputField(true);
}
setPwdInputField(false);
}, [fieldName]);
// if field is required but value is empty, or equals initial value, then don't show submit/update button. otherwise clear out any result messaging and display button. // if field is required but value is empty, or equals initial value, then don't show submit/update button. otherwise clear out any result messaging and display button.
const handleChange = ({ fieldName: changedFieldName, value: changedValue }: UpdateArgs) => { const handleChange = ({ fieldName: changedFieldName, value: changedValue }: UpdateArgs) => {
if (onChange) { if (onChange) {
@ -119,13 +127,6 @@ export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
submittable: hasChanged, submittable: hasChanged,
}); });
const isPasswordInput = () => {
if (fieldName === 'adminPassword') {
return false;
}
return true;
};
return ( return (
<div className={textfieldContainerClass}> <div className={textfieldContainerClass}>
<div className="textfield-component"> <div className="textfield-component">
@ -143,7 +144,7 @@ export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
<div className="field-tip">{tip}</div> <div className="field-tip">{tip}</div>
<FormStatusIndicator status={status || submitStatus} /> <FormStatusIndicator status={status || submitStatus} />
<div className="update-button-container"> <div className="update-button-container">
{isPasswordInput() && ( {isPwdInput && (
<Button <Button
type="primary" type="primary"
size="small" size="small"