Skip to content

Commit c9e4622

Browse files
committed
feat: fixed issue with x button on modal not resetting form values to default
1 parent 076094b commit c9e4622

1 file changed

Lines changed: 33 additions & 20 deletions

File tree

components/core/CreateShape.js

Lines changed: 33 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { harperFetch } from "../../utils/HarperFetch";
1818

1919
const CreateShape = (props) => {
2020

21+
// Store the default state as a variable so resetting form is easier
2122
const initialState = {
2223
"name": "Tilted Square",
2324
"formula": "polygon(10% 10%, 90% 10%, 90% 90%, 10% 80%)",
@@ -66,13 +67,19 @@ const CreateShape = (props) => {
6667
...shapeInformation,
6768
"name": value,
6869
});
69-
} else if (name === 'private') {
70+
return;
71+
}
72+
73+
if (name === 'private') {
7074
setShapeInformation({
7175
...shapeInformation,
7276
"private": !shapeInformation.private,
7377

7478
});
75-
} else if (name === "formula") {
79+
return;
80+
}
81+
82+
if (name === "formula") {
7683
const edgeVerticeNumber = shapeInformation.clipPathType === "polygon" && value !== "" ? value.split(",").length: 0;
7784

7885
// If user deletes all, set formula to the Clip-Path type with an empty set of parentheses
@@ -87,8 +94,10 @@ const CreateShape = (props) => {
8794
} else {
8895
handleFormulaChange(value, edgeVerticeNumber);
8996
}
90-
91-
} else if (name === "clipPathType") { // If Clip-Path Type is changed, change the value of the clipPathType
97+
return;
98+
}
99+
100+
if (name === "clipPathType") { // If Clip-Path Type is changed, change the value of the clipPathType
92101

93102
if (value === "polygon") {
94103
setShapeInformation({
@@ -125,9 +134,11 @@ const CreateShape = (props) => {
125134
"vertices": value === "polygon" ? 4 : 0,
126135
"notes": "",
127136
}
128-
})
129-
130-
} else if (name === "mousemove") { // If DraggableVertice is moved, adjust verticeCoordinates and formula
137+
});
138+
return;
139+
}
140+
141+
if (name === "mousemove") { // If DraggableVertice is moved, adjust verticeCoordinates and formula
131142

132143
const newVerticeCoordinates = addNewVerticeCoordinates(data.x, data.y, number);
133144
const newFormula = generateNewFormula(newVerticeCoordinates);
@@ -137,8 +148,10 @@ const CreateShape = (props) => {
137148
"verticeCoordinates": newVerticeCoordinates,
138149
"formula": newFormula,
139150
});
140-
141-
} else if (name === "click" && event.target.id === "shapeShadow" && shapeInformation.clipPathType === "polygon") { // If background of preview is clicked, add a verticeCoordinate value at its location and adjust formula
151+
return;
152+
}
153+
154+
if (name === "click" && event.target.id === "shapeShadow" && shapeInformation.clipPathType === "polygon") { // If background of preview is clicked, add a verticeCoordinate value at its location and adjust formula
142155

143156
const newVerticeCoordinates = addNewVerticeCoordinates(event.nativeEvent.offsetX, event.nativeEvent.offsetY, shapeInformation.verticeCoordinates.length);
144157
const newFormula = generateNewFormula(newVerticeCoordinates);
@@ -150,8 +163,10 @@ const CreateShape = (props) => {
150163
"verticeCoordinates": newVerticeCoordinates,
151164
"formula": newFormula,
152165
});
153-
154-
} else if (event.target.id.includes("deleteButton") && number !== undefined) { // If delete button is pressed, remove the corresponding verticeCoordinate and adjust formula
166+
return;
167+
}
168+
169+
if (event.target.id.includes("deleteButton") && number !== undefined) { // If delete button is pressed, remove the corresponding verticeCoordinate and adjust formula
155170

156171
let newVerticeCoordinates = [];
157172

@@ -170,15 +185,13 @@ const CreateShape = (props) => {
170185
"verticeCoordinates": newVerticeCoordinates,
171186
"formula": newFormula,
172187
});
173-
174-
} else { // Handles all other changes
175-
176-
setShapeInformation({
177-
...shapeInformation,
178-
[name]: value,
179-
});
180-
188+
return;
181189
}
190+
191+
setShapeInformation({
192+
...shapeInformation,
193+
[name]: value,
194+
});
182195
}
183196

184197
function handleFormulaChange(formula, edgeVerticeNumber, clipPathType) {
@@ -307,7 +320,7 @@ const CreateShape = (props) => {
307320
show={props.show}
308321
centered
309322
size="lg"
310-
onHide={props.handleClose}
323+
onHide={() => {setShapeInformation({ ...initialState }); props.handleClose(); }}
311324
backdrop="static"
312325
>
313326
<Modal.Header closeButton>

0 commit comments

Comments
 (0)