1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
import { useState } from "react";
import Button from "../commons/Button";
import Form from "../commons/Form";
import MemeFieldset from "./MemeFieldset/MemeFieldset";
function MemeForm({ headlines, setHeadlines }) {
const [fieldsetId, setFieldsetId] = useState(1);
const horizontalOptions = ["Left", "Right", "Center"];
const verticalOptions = ["Top", "Bottom", "Middle"];
const fieldsetData = {
id: fieldsetId,
legend: `Text settings ${fieldsetId}`,
text: "Edit here...",
fontSize: 100,
fontUnit: "%",
xPos: horizontalOptions[(fieldsetId - 1) % horizontalOptions.length],
yPos: verticalOptions[(fieldsetId - 1) % verticalOptions.length],
};
const onSubmit = (e) => {
e.preventDefault();
};
const fieldsetsList = headlines.map((headline) => {
return (
<MemeFieldset
key={headline.id}
headline={headline}
setHeadline={setHeadlines}
xOptions={horizontalOptions}
yOptions={verticalOptions}
/>
);
});
const addNewFieldset = () => {
setFieldsetId((previous) => previous + 1);
setHeadlines((array) => [...array, fieldsetData]);
};
return (
<div className="meme-form">
<Form onSubmitHandler={onSubmit}>
{fieldsetsList}
{fieldsetsList.length < 4 && (
<Button body="Add new text" onClick={addNewFieldset} modifier="add" />
)}
</Form>
</div>
);
}
export default MemeForm;
|
