user-fields-component.tsx

importReactfrom'@theia/core/shared/react';
import{BoardUserField}from'../../../common/protocol';
import{nls}from'@theia/core/lib/common';

exportconstUserFieldsComponent=({
 initialBoardUserFields,
 updateUserFields,
 cancel,
 accept,
}: {
initialBoardUserFields: BoardUserField[];
updateUserFields: (userFields: BoardUserField[])=>void;
cancel: ()=>void;
accept: ()=>Promise<void>;
}): React.ReactElement=>{
const[boardUserFields,setBoardUserFields]=React.useState<
BoardUserField[]
>(initialBoardUserFields);
const[uploadButtonDisabled,setUploadButtonDisabled]=
React.useState<boolean>(true);
constfirstInputElement=React.useRef<HTMLInputElement>(null);

React.useEffect(()=>{
setBoardUserFields(initialBoardUserFields);
},[initialBoardUserFields]);

constupdateUserField=
(index: number)=>(e: React.ChangeEvent<HTMLInputElement>)=>{
constnewBoardUserFields=[...boardUserFields];
newBoardUserFields[index].value=e.target.value;
setBoardUserFields(newBoardUserFields);
};

constallFieldsHaveValues=(userFields: BoardUserField[]): boolean=>{
return(
userFields&&
userFields.length>0&&
userFields
.map<boolean>((field: BoardUserField): boolean=>{
returnfield.value.length>0;
})
.reduce((previous: boolean,current: boolean): boolean=>{
returnprevious&&current;
})
);
};

React.useEffect(()=>{
updateUserFields(boardUserFields);
setUploadButtonDisabled(!allFieldsHaveValues(boardUserFields));
if(firstInputElement.current){
firstInputElement.current.focus();
}
},[boardUserFields,updateUserFields]);

return(
<div>
<divclassName="user-fields-container">
<divclassName="user-fields-list">
{boardUserFields.map((field,index)=>{
return(
<divclassName="dialogSection"key={index}>
<divclassName="dialogRow">
<labelclassName="field-label">{field.label}</label>
</div>
<divclassName="dialogRow">
<input
type={field.secret ? 'password' : 'text'}
value={field.value}
className="theia-input"
placeholder={nls.localize(
'arduino/userFields/enterField',
'Enter {0}',
field.label
)}
onChange={updateUserField(index)}
ref={index===0 ? firstInputElement : undefined}
/>
</div>
</div>
);
})}
</div>
</div>
<divclassName="dialogSection">
<divclassName="dialogRow button-container">
<button
type="button"
className="theia-button secondary install-cert-btn"
onClick={cancel}
>
{nls.localize('arduino/userFields/cancel','Cancel')}
</button>
<button
type="button"
className="theia-button primary install-cert-btn"
disabled={uploadButtonDisabled}
onClick={accept}
>
{nls.localize('arduino/userFields/upload','Upload')}
</button>
</div>
</div>
</div>
);
};