Add formik

This commit is contained in:
Werner
2023-06-08 18:31:16 -03:00
parent a82cf2bf4e
commit b96b904d34
4 changed files with 195 additions and 137 deletions

View File

@ -10,6 +10,7 @@
},
"dependencies": {
"bootstrap": "^5.3.0",
"formik": "^2.4.1",
"next": "13.4.4",
"react": "18.2.0",
"react-bootstrap": "^2.7.4",

View File

@ -14,17 +14,58 @@ import Button from 'react-bootstrap/Button';
import { useRouter } from 'next/router';
import { useContext } from 'react';
import { ProgramContext } from '../src/ProgramContext';
import * as formik from "formik";
export default function Home() {
const { Formik } = formik;
const router = useRouter();
const { updateProgram } = useContext(ProgramContext);
const handleClick = () => {
updateProgram(instructionList);
const handleClick = async (values) => {
console.log(JSON.stringify(values));
updateProgram(values);
router.push('/runner');
};
let [instructionList, setInstructionList] = useState([{}, {}, {}, {}, {}, {}]);
let instructionList = [
{
operacao: "LD",
registradorR: "F6",
registradorS: "34",
registradorT: "R1",
},
{
operacao: "LD",
registradorR: "F2",
registradorS: "45",
registradorT: "R3",
},
{
operacao: "MULTD",
registradorR: "F0",
registradorS: "F2",
registradorT: "F4",
},
{
operacao: "SUBD",
registradorR: "F8",
registradorS: "F6",
registradorT: "F2",
},
{
operacao: "DIVD",
registradorR: "F10",
registradorS: "F0",
registradorT: "F6",
},
{
operacao: "ADDD",
registradorR: "F6",
registradorS: "F8",
registradorT: "F2",
}
];
return (
<>
@ -47,12 +88,18 @@ export default function Home() {
</Navbar>
<main>
<Container>
<Formik
onSubmit={handleClick}
initialValues={instructionList}
>
{({ handleSubmit, handleChange, values, touched, errors }) => (
<Form noValidate onSubmit={handleSubmit}>
<Row className="row my-4">
<Col>
<h3>Instructions</h3>
</Col>
<Col className="text-end">
<Button className="ms-4" variant="primary" onClick={handleClick}>Execute</Button>
<Button className="ms-4" variant="primary" type="submit">Execute</Button>
</Col>
</Row>
<Row className="row my-4">
@ -70,7 +117,12 @@ export default function Home() {
{instructionList.map((d, i) => (
<tr>
<td>
<Form.Select aria-label="Default select example">
<Form.Select
aria-label="Default select example"
value={values[i].operacao}
onChange={handleChange}
name={`[${i}].operacao`}
>
<option value="">-- Select --</option>
<option value="ADD">ADD</option>
<option value="ADDD">ADDD</option>
@ -88,30 +140,33 @@ export default function Home() {
<Form.Control
className="form-control"
type="text"
name={`formNameR{i}`}
id={`formIdR{i}`}
name={`[${i}].registradorR`}
size="3"
maxLength="3"
value={values[i].registradorR}
onChange={handleChange}
/>
</td>
<td>
<Form.Control
className="form-control"
type="text"
name={`formNameS{i}`}
id={`formIdS{i}`}
name={`[${i}].registradorS`}
size="3"
maxLength="5"
value={values[i].registradorS}
onChange={handleChange}
/>
</td>
<td>
<Form.Control
className="form-control"
type="text"
name={`formNameT{i}`}
id={`formIdT{i}`}
name={`[${i}].registradorT`}
size="3"
maxLength="3"
value={values[i].registradorT}
onChange={handleChange}
/>
</td>
</tr>
@ -120,6 +175,9 @@ export default function Home() {
</Table>
</Col>
</Row>
</Form>
)}
</Formik>
</Container>
</main>
</>

View File

@ -15,6 +15,8 @@ import { ProgramContext } from '../src/ProgramContext';
export default function Home() {
const { program } = useContext(ProgramContext);
console.log(JSON.stringify(program));
let baseI = {
issue: null,
exeCompleta: null,
@ -22,68 +24,15 @@ export default function Home() {
busy: false,
}
let instructions = [
{
let instructions = [];
for (let i = 0; i < program.length; i++) {
instructions[i] = {
posicao: 0,
instrucao: {
operacao: "LD",
registradorR: "F6",
registradorS: "32",
registradorT: "R1",
},
...baseI,
},
{
posicao: 1,
instrucao: {
operacao: "LD",
registradorR: "F2",
registradorS: "45",
registradorT: "R3",
},
...baseI,
},
{
posicao: 2,
instrucao: {
operacao: "MULTD",
registradorR: "F0",
registradorS: "F2",
registradorT: "F4",
},
...baseI,
},
{
posicao: 3,
instrucao: {
operacao: "SUBD",
registradorR: "F8",
registradorS: "F6",
registradorT: "F2",
},
...baseI,
},
{
posicao: 4,
instrucao: {
operacao: "DIVD",
registradorR: "F10",
registradorS: "F0",
registradorT: "F6",
},
...baseI,
},
{
posicao: 5,
instrucao: {
operacao: "ADDD",
registradorR: "F6",
registradorS: "F8",
registradorT: "F2",
},
instrucao: program[i],
...baseI,
};
}
];
let baseFu = {
instrucao: null,

View File

@ -170,6 +170,11 @@ csstype@^3.0.2:
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
deepmerge@^2.1.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
dequal@^2.0.2, dequal@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
@ -183,6 +188,26 @@ dom-helpers@^5.0.1, dom-helpers@^5.2.0, dom-helpers@^5.2.1:
"@babel/runtime" "^7.8.7"
csstype "^3.0.2"
formik@^2.4.1:
version "2.4.1"
resolved "https://registry.yarnpkg.com/formik/-/formik-2.4.1.tgz#f2630b51a866c86144a5faf68d31200c9d8ceea9"
integrity sha512-ajOB9EmFhXb4PACTlaooVEn7PLtLtBJEZ8fPs+wFZjL5KSGwgAoU+n9DHN8JcqNKcXkloEYYtn1lxrLav18ecQ==
dependencies:
deepmerge "^2.1.1"
hoist-non-react-statics "^3.3.0"
lodash "^4.17.21"
lodash-es "^4.17.21"
react-fast-compare "^2.0.1"
tiny-warning "^1.0.2"
tslib "^1.10.0"
hoist-non-react-statics@^3.3.0:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
dependencies:
react-is "^16.7.0"
invariant@^2.2.4:
version "2.2.4"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@ -195,6 +220,16 @@ invariant@^2.2.4:
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
lodash-es@^4.17.21:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
lodash@^4.17.21:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@ -292,7 +327,12 @@ react-dom@18.2.0:
loose-envify "^1.1.0"
scheduler "^0.23.0"
react-is@^16.13.1, react-is@^16.3.2:
react-fast-compare@^2.0.1:
version "2.0.4"
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
react-is@^16.13.1, react-is@^16.3.2, react-is@^16.7.0:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@ -348,6 +388,16 @@ styled-jsx@5.1.1:
dependencies:
client-only "0.0.1"
tiny-warning@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
tslib@^1.10.0:
version "1.14.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
tslib@^2.4.0:
version "2.5.3"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.3.tgz#24944ba2d990940e6e982c4bea147aba80209913"