From 9715eb4fe28076ccd77451e15fd2debba2266147 Mon Sep 17 00:00:00 2001
From: Skander Hatira <skander.hatira@inrae.fr>
Date: Thu, 25 Feb 2021 03:43:42 +0100
Subject: [PATCH] second form almost done 2.0
---
src/components/SampleForm/SampleForm.js | 32 ++++++++++++++-----------
src/components/UnitForm/UnitForm.js | 21 +++++++++-------
2 files changed, 30 insertions(+), 23 deletions(-)
diff --git a/src/components/SampleForm/SampleForm.js b/src/components/SampleForm/SampleForm.js
index 4985f49..11ca3d2 100644
--- a/src/components/SampleForm/SampleForm.js
+++ b/src/components/SampleForm/SampleForm.js
@@ -2,6 +2,7 @@ import React, { useState } from "react";
import classnames from "classnames";
import UnitForm from "../UnitForm/UnitForm";
import Grid from "@material-ui/core/Grid";
+import Box from "@material-ui/core/Box";
import Fab from "@material-ui/core/Fab";
import AddIcon from "@material-ui/icons/Add";
import Typography from "@material-ui/core/Typography";
@@ -35,15 +36,15 @@ const SampleForm = () => {
return (
<Grid container spacing={3}>
{sampleState.map((val, idx) => {
- const sampleId = `sample${idx}`;
+ const sampleId = `sample-${idx}`;
return (
- <div key={`sample-${idx}`}>
- <Grid item xs={12} gutterBottom>
+ <Box borderColor="primary.main" border={2} m={1}>
+ <Grid item xs={12} md={6} gutterBottom>
<FormControl className={classes.formControl}>
<TextField
id={sampleId}
data-idx={idx}
- label={`sample-${idx + 1}`}
+ label={`sample ${idx + 1}`}
className={classnames("", {
invalid: sampleState.sample,
})}
@@ -57,18 +58,21 @@ const SampleForm = () => {
</FormControl>
</Grid>
<UnitForm classes={classes} />
- </div>
+ </Box>
);
})}
- <Fab
- size="small"
- onClick={addSample}
- value="Add New Sample"
- color="primary"
- aria-label="add"
- >
- <AddIcon />
- </Fab>
+ <Grid xs={12} md={6} gutterBottom>
+ <Fab
+ m={1}
+ size="small"
+ onClick={addSample}
+ value="Add New Sample"
+ color="primary"
+ aria-label="add"
+ >
+ <AddIcon />
+ </Fab>{" "}
+ </Grid>
</Grid>
);
};
diff --git a/src/components/UnitForm/UnitForm.js b/src/components/UnitForm/UnitForm.js
index 783135b..cf1d328 100644
--- a/src/components/UnitForm/UnitForm.js
+++ b/src/components/UnitForm/UnitForm.js
@@ -4,6 +4,7 @@ import Fab from "@material-ui/core/Fab";
import AddIcon from "@material-ui/icons/Add";
import FormControl from "@material-ui/core/FormControl";
import FormHelperText from "@material-ui/core/FormHelperText";
+import Box from "@material-ui/core/Box";
const UnitForm = ({ classes }) => {
const blankUnit = { r1: "", r2: "" };
@@ -19,15 +20,17 @@ const UnitForm = ({ classes }) => {
};
return (
<Grid item xs={12}>
- <Fab
- size="small"
- onClick={addUnit}
- value="Add Unit Pair"
- color="primary"
- aria-label="add"
- >
- <AddIcon />
- </Fab>{" "}
+ <Box m={1}>
+ <Fab
+ size="small"
+ onClick={addUnit}
+ value="Add Unit Pair"
+ color="primary"
+ aria-label="add"
+ >
+ <AddIcon />
+ </Fab>{" "}
+ </Box>
{unitState.map((val, idx) => {
const r1Id = `read1-${idx}`;
const r2Id = `read2-${idx}`;
--
GitLab