Added form validation, UI improvements (tooltip and current space) + refactoring
This commit is contained in:
parent
67b0160735
commit
a93b3c0de6
@ -1 +1 @@
|
||||
[{"/Users/user/repos/sort-measurer/src/index.js":"1","/Users/user/repos/sort-measurer/src/App.js":"2","/Users/user/repos/sort-measurer/src/reportWebVitals.js":"3","/Users/user/repos/sort-measurer/src/components/Workspace.js":"4","/Users/user/repos/sort-measurer/src/components/Form.js":"5"},{"size":500,"mtime":1612120197176,"results":"6","hashOfConfig":"7"},{"size":287,"mtime":1612381995190,"results":"8","hashOfConfig":"7"},{"size":362,"mtime":1611856800076,"results":"9","hashOfConfig":"7"},{"size":532,"mtime":1612381918124,"results":"10","hashOfConfig":"7"},{"size":1524,"mtime":1612384415506,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"ff9ndh",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/user/repos/sort-measurer/src/index.js",[],"/Users/user/repos/sort-measurer/src/App.js",[],"/Users/user/repos/sort-measurer/src/reportWebVitals.js",[],["23","24"],"/Users/user/repos/sort-measurer/src/components/Workspace.js",[],"/Users/user/repos/sort-measurer/src/components/Form.js",[],{"ruleId":"25","replacedBy":"26"},{"ruleId":"27","replacedBy":"28"},"no-native-reassign",["29"],"no-negated-in-lhs",["30"],"no-global-assign","no-unsafe-negation"]
|
||||
[{"/Users/user/repos/sort-measurer/src/index.js":"1","/Users/user/repos/sort-measurer/src/App.js":"2","/Users/user/repos/sort-measurer/src/reportWebVitals.js":"3","/Users/user/repos/sort-measurer/src/components/Workspace.js":"4","/Users/user/repos/sort-measurer/src/components/Form.js":"5","/Users/user/repos/sort-measurer/src/helpers/RandomColor.js":"6"},{"size":500,"mtime":1612120197176,"results":"7","hashOfConfig":"8"},{"size":287,"mtime":1612381995190,"results":"9","hashOfConfig":"8"},{"size":362,"mtime":1611856800076,"results":"10","hashOfConfig":"8"},{"size":532,"mtime":1612381918124,"results":"11","hashOfConfig":"8"},{"size":2239,"mtime":1612472022382,"results":"12","hashOfConfig":"8"},{"size":108,"mtime":1612467064498,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"ff9ndh",{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"23","messages":"24","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"/Users/user/repos/sort-measurer/src/index.js",[],"/Users/user/repos/sort-measurer/src/App.js",[],"/Users/user/repos/sort-measurer/src/reportWebVitals.js",[],["27","28"],"/Users/user/repos/sort-measurer/src/components/Workspace.js",[],"/Users/user/repos/sort-measurer/src/components/Form.js",["29","30"],"/Users/user/repos/sort-measurer/src/helpers/RandomColor.js",[],{"ruleId":"31","replacedBy":"32"},{"ruleId":"33","replacedBy":"34"},{"ruleId":"35","severity":1,"message":"36","line":19,"column":13,"nodeType":"37","messageId":"38","endLine":19,"endColumn":15},{"ruleId":"35","severity":1,"message":"36","line":20,"column":14,"nodeType":"37","messageId":"38","endLine":20,"endColumn":16},"no-native-reassign",["39"],"no-negated-in-lhs",["40"],"eqeqeq","Expected '===' and instead saw '=='.","BinaryExpression","unexpected","no-global-assign","no-unsafe-negation"]
|
@ -1,27 +1,50 @@
|
||||
import { useState } from "react";
|
||||
import InfoIcon from "@material-ui/icons/Info";
|
||||
import Tooltip from "@material-ui/core/Tooltip";
|
||||
|
||||
import "./Form.css";
|
||||
import Workspace from "./Workspace";
|
||||
import InfoIcon from "@material-ui/icons/Info";
|
||||
import RandomColor from "../helpers/RandomColor";
|
||||
|
||||
export default function Form(props) {
|
||||
var randomColor = Math.floor(Math.random() * 16777215).toString(16);
|
||||
var current = "#" + randomColor;
|
||||
|
||||
const [width, setWidth] = useState("");
|
||||
const [height, setHeight] = useState("");
|
||||
const [rectanglesItems, setRectanglesItems] = useState([]);
|
||||
const [dimensionsError, setDimensionsError] = useState("");
|
||||
|
||||
function Validation() {
|
||||
if (
|
||||
isNaN(width) ||
|
||||
isNaN(height) ||
|
||||
width == 0 ||
|
||||
height == 0 ||
|
||||
width === null ||
|
||||
height === null
|
||||
) {
|
||||
setDimensionsError("Enter correct dimensions");
|
||||
return false;
|
||||
}
|
||||
if (width > 2000 || height > 2000) {
|
||||
setDimensionsError("Dimensions too big");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
//if (w || h == 0 || null) dont display;
|
||||
const handleFormSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
setRectanglesItems([
|
||||
...rectanglesItems,
|
||||
{
|
||||
w: width / 2,
|
||||
h: height / 2,
|
||||
c: current,
|
||||
},
|
||||
]);
|
||||
setDimensionsError("");
|
||||
Validation();
|
||||
if (Validation()) {
|
||||
setRectanglesItems([
|
||||
...rectanglesItems,
|
||||
{
|
||||
w: width / 2,
|
||||
h: height / 2,
|
||||
c: RandomColor(),
|
||||
},
|
||||
]);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@ -29,14 +52,15 @@ export default function Form(props) {
|
||||
<br />
|
||||
<form onSubmit={handleFormSubmit}>
|
||||
<label>
|
||||
<p>Dimensions:</p>
|
||||
<p>Rectangle dimensions:</p>
|
||||
{"Width: "}
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. 200"
|
||||
value={width}
|
||||
onChange={(e) => setWidth(e.target.value)}
|
||||
/>
|
||||
{" x "}
|
||||
{" Height: "}
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. 100"
|
||||
@ -44,13 +68,19 @@ export default function Form(props) {
|
||||
onChange={(e) => setHeight(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
{{ dimensionsError } ? (
|
||||
<p style={{ color: "crimson" }}>{dimensionsError}</p>
|
||||
) : null}
|
||||
<br />
|
||||
<input type="submit" value="Add a rectangle" />
|
||||
<Tooltip
|
||||
title="Some rectangles may appear invisible. That's because the color of
|
||||
the figures probably matches the background color."
|
||||
>
|
||||
<InfoIcon />
|
||||
</Tooltip>
|
||||
</form>
|
||||
<p style={{ display: "block" }}>
|
||||
<InfoIcon /> Some rectangles may appear invisible. That's because the
|
||||
color of the figures probably matches the background color.
|
||||
</p>
|
||||
<p>Current space: 2000 x 2000</p>
|
||||
<Workspace rectangles={rectanglesItems} />
|
||||
</>
|
||||
);
|
||||
|
3
src/helpers/RandomColor.js
Normal file
3
src/helpers/RandomColor.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default function RandomColor() {
|
||||
return "#" + Math.floor(Math.random() * 16777215).toString(16);
|
||||
}
|
Loading…
Reference in New Issue
Block a user