I work with React and Typescript.
My goal is to have these three components displayed in a single row.
Currently, the first button appears on the left while the input form and upload button are stacked vertically on the right. How can I arrange all three elements horizontally?
return (
<Box padding={2}>
<Typography variant="h4">
<FormattedMessage defaultMessage="Add file" />
</Typography>
<Grid container alignItems="center" spacing={2} direction="row">
<Grid item>
<Button
startIcon={<Search />}
variant="contained"
component="label"
disabled={rulesFromFile.isLoading}
onClick={() => setUploadedFile(undefined)}
>
<FormattedMessage defaultMessage="Choose file" />
<input
type="file"
hidden
onChange={(event: ChangeEvent<HTMLInputElement>) =>
event.target.files && setSelectedFile(event.target.files[0])
}
/>
</Button>
</Grid>
{selectedFile && (!uploadedFile || rulesFromFile.isLoading) && (
<div>
<Grid item>
<form>
<TextField
type="text"
size="small"
style={{marginLeft: 4}}
label="someNumber"
variant="outlined"
value={someNumber}
onChange={e => setNumber(e.target.value)}
/>
</form>
</Grid>
<Grid item>
<LoadingButton
startIcon={<Upload />}
loadingPosition="start"
variant="contained"
color="secondary"
style={{marginLeft: 4}}
onClick={() => {
selectedFile &&
rulesFromFile.mutateAsync({
file: selectedFile,
someNumber: someNumber,
});
setUploadedFile(selectedFile);
}}
loading={rulesFromFile.isLoading}
>
<FormattedMessage defaultMessage="{fileName} upload" values={{fileName: selectedFile.name}} />
</LoadingButton>
</Grid>
</div>
)}
</Grid>
</Box>
);