Skip to content

Commit 5b9da19

Browse files
crlimcrlim
committed
fixed statePropsId to pass correctly for nested objects and arrays
co-authored-by: Chris Tang [email protected]
1 parent 1acccbb commit 5b9da19

File tree

8 files changed

+39
-82
lines changed

8 files changed

+39
-82
lines changed

‎README.md

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
8181
- Delete Project: Command + Backspace
8282
- Open Project: Command + o
8383

84-
**Windows**:
84+
**Windows**:
8585
- Export Project: Control + e
8686
- Undo: Control + z
8787
- Redo: Control + Shift + z
@@ -90,7 +90,7 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
9090
- Delete HTML Tag on Canvas: Backspace
9191
- Delete Project: Control + Backspace
9292
- Open Project: Control + o
93-
93+
9494
#### Contributors
9595

9696
[Alex Yu](https://www.linkedin.com/in/alexjihunyu/) [@buddhajjigae](https://github.com/buddhajjigae)
@@ -111,8 +111,12 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
111111

112112
[Chelsey Fewer](https://www.linkedin.com/in/chelsey-fewer/) [@chelseyeslehc](https://github.com/chelseyeslehc)
113113

114+
[Chris Tang] (https://www.linkedin.com/in/chrisjtang/) [@chrisjtang](https://github.com/chrisjtang)
115+
114116
[Christian Padilla](https://linkedin.com/in/ChristianEdwardPadilla) [@ChristianEdwardPadilla](https://github.com/ChristianEdwardPadilla)
115117

118+
[Crys Lim] (https://linkedin.com/in/crystallim) [@crlim](https://github.com/crlim)
119+
116120
[Danial Reilley](https://linkedin.com/in/daniel-reilley)
117121
[@dreille](https://github.com/dreille)
118122

@@ -156,6 +160,8 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
156160
[Philip Hua](https://www.linkedin.com/in/philip-minh-hua)
157161
[@pmhua](https://github.com/pmhua)
158162

163+
[Ron Fu] (https://www.linkedin.com/in/ronfu)[@rfvisuals] (https://github.com/rfvisuals)
164+
159165
[Sean Sadykoff](https://www.linkedin.com/in/sean-sadykoff/) [@sean1292](https://github.com/sean1292)
160166

161167
[Shana Hoehn](https://www.linkedin.com/in/shana-hoehn-70297b169/) [@slhoehn](https://github.com/slhoehn)
@@ -172,6 +178,8 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
172178

173179
[Tyler Sullberg](https://www.linkedin.com/in/tyler-sullberg) [@tsully](https://github.com/tsully)
174180

181+
[William Cheng] (https://www.linkedin.com/in/william-cheng-0723/) [@williamcheng12345](https://github.com/WilliamCheng12345)
182+
175183
[William Rittwage](https://www.linkedin.com/in/william-rittwage)
176184
[@wbrittwage](https://github.com/wbrittwage)
177185

‎app/src/components/bottom/UseStateModal.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,13 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
99
const [open, setOpen] = useState(false);
1010
const [displayObject, setDisplayObject] = useState(null)
1111
const [stateKey, setStateKey] = useState('');
12+
const [statePropsId, setStatePropsId] = useState(-1);
1213

1314
// make buttons to choose which component to get state from
1415
const [componentProviderId, setComponentProviderId] = useState(1) // for now set to App
1516
const components = [];
1617
for (let i = 0; i < state.components.length; i ++) {
17-
components.push(<button
18+
components.push(<button
1819
onClick={() => {
1920
setComponentProviderId(i+1);
2021
setDisplayObject(null);
@@ -34,6 +35,7 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
3435
style={{ margin: '5px 5px' ,padding: '1px', float: 'right' }}
3536
onClick={() => {
3637
setStateKey('');
38+
setStatePropsId(-1);
3739
setDisplayObject(null)
3840
setOpen(false)}}
3941
>
@@ -49,6 +51,7 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
4951
providerId = {componentProviderId}
5052
displayObject = {displayObject}
5153
selectHandler={(table) => {
54+
if (statePropsId < 0) setStatePropsId(table.row.id);
5255
// if object => show object table
5356
if (table.row.type === "object") {
5457
setStateKey(stateKey + table.row.key + '.');
@@ -59,8 +62,9 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
5962
} else {
6063
// if not object => actually update state
6164
setDisplayObject(null);
62-
updateAttributeWithState(attributeToChange, componentProviderId, table.row, stateKey + table.row.key);
65+
updateAttributeWithState(attributeToChange, componentProviderId, statePropsId, table.row, stateKey + table.row.key);
6366
setStateKey('')
67+
setStatePropsId(-1);
6468
setOpen(false);
6569
}
6670
}}

‎app/src/components/left/DragDropPanel.tsx

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const DragDropPanel = (props): JSX.Element => {
4848
>
4949
<h3>HTML ELEMENTS</h3>
5050
{htmlTypesToRender.map(option => {
51-
if(option.id !== 17 && option.id !== 18 && option.id !== 19) {
51+
if(option.id !== 17 && option.id !== 18) {
5252
return (
5353
<HTMLItem
5454
name={option.name}
@@ -58,7 +58,7 @@ const DragDropPanel = (props): JSX.Element => {
5858
handleDelete={handleDelete}
5959
isThemeLight={isThemeLight}
6060
/>
61-
);
61+
);
6262
}
6363

6464
})}
@@ -74,23 +74,7 @@ const DragDropPanel = (props): JSX.Element => {
7474
handleDelete={handleDelete}
7575
isThemeLight={isThemeLight}
7676
/>
77-
);
78-
}
79-
})}
80-
81-
<h3>STATE TOOLS</h3>
82-
{htmlTypesToRender.map(option => {
83-
if(option.id === 19) {
84-
return (
85-
<HTMLItem
86-
name={option.name}
87-
key={`html-${option.name}`}
88-
id={option.id}
89-
Icon={option.icon}
90-
handleDelete={handleDelete}
91-
isThemeLight={isThemeLight}
92-
/>
93-
);
77+
);
9478
}
9579
})}
9680
</Grid>

‎app/src/components/left/HTMLItem.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const useStyles = makeStyles({
3535
darkThemeFontColor: {
3636
color: '#fff'
3737
}
38-
38+
3939
});
4040

4141
const HTMLItem : React.FC<{
@@ -45,9 +45,9 @@ const HTMLItem : React.FC<{
4545
handleDelete: (id: number) => void;
4646
isThemeLight: boolean;
4747
}> = ({ name, id, Icon, handleDelete, isThemeLight }) => {
48-
48+
4949
const classes = useStyles();
50-
50+
5151
const [modal, setModal] = useState(null);
5252
const [{ isDragging }, drag] = useDrag({
5353
item: {
@@ -122,11 +122,11 @@ const HTMLItem : React.FC<{
122122
// updated the id's to reflect the new element types input and label
123123
return ( // HTML Elements
124124
<Grid item xs={5} key={`html-g${name}`}>
125-
{ id <= 19 &&
125+
{ id <= 18 &&
126126
<div ref={drag} className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
127127
<h3>{name}</h3>
128128
</div>}
129-
{id > 19 &&
129+
{id > 18 &&
130130
<span id="customHTMLElement">
131131
<div ref={drag} className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
132132
<h3>{name}</h3>

‎app/src/components/main/DemoRender.tsx

Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -28,36 +28,14 @@ const DemoRender = (props): JSX.Element => {
2828
const elementType = element.name;
2929
const childId = element.childId;
3030
const elementStyle = element.style;
31-
const innerText = element.attributes.compText;
31+
const innerText = element.attributes.compText;
3232
const classRender = element.attributes.cssClasses;
33-
const activeLink = element.attributes.compLink;
33+
const activeLink = element.attributes.compLink;
3434
let renderedChildren;
3535
if (elementType !== 'input' && elementType !== 'img' && element.children.length > 0) {
3636
renderedChildren = componentBuilder(element.children);
3737
}
3838

39-
// check if innerText or activeLink is an array
40-
const innerTextIsArray = Array.isArray(innerText);
41-
const activeLinkIsArray = Array.isArray(activeLink);
42-
43-
if (innerTextIsArray || activeLinkIsArray) {
44-
// determine how many elements to iterate over
45-
let n;
46-
if (innerTextIsArray && activeLinkIsArray) {
47-
n = Math.min(innerText.length, activeLink.length);
48-
} else {
49-
n = innerTextIsArray ? innerText.length : activeLink.length;
50-
}
51-
// make a new element for each value of the array
52-
for (let i = 0; i < n; i++) {
53-
const elementCopy = JSON.parse(JSON.stringify(element));
54-
elementCopy.attributes.compText = innerTextIsArray ? innerText[i] : innerText;
55-
elementCopy.attributes.compLink = activeLinkIsArray ? activeLink[i] : activeLink;
56-
componentsToRender.push(componentBuilder([elementCopy], key++));
57-
}
58-
continue;
59-
}
60-
6139
if (elementType === 'input') componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
6240
else if (elementType === 'img') componentsToRender.push(<Box component={elementType} src={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
6341
else if (elementType === 'a') componentsToRender.push(<Box component={elementType} href={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}</Box>);

‎app/src/containers/CustomizationPanel.tsx

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -207,9 +207,9 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
207207
};
208208

209209
// function to pass into UseStateModal to use state to update attribute
210-
const updateAttributeWithState = (attributeName, componentProviderId, statePropsRow, stateKey='') => {
210+
const updateAttributeWithState = (attributeName, componentProviderId, statePropsId, statePropsRow, stateKey='') => {
211211

212-
// get the stateProps of the componentProvider
212+
// get the stateProps of the componentProvider
213213
// const currentComponent = state.components[componentProviderId - 1];
214214
// const currentComponentProps = currentComponent.stateProps;
215215
// const newInput = currentComponentProps[statePropsRow.id - 1].value;
@@ -222,8 +222,8 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
222222
if (!newContextObj[componentProviderId]) {
223223
newContextObj[componentProviderId] = {};
224224
}
225-
newContextObj[componentProviderId].compText = statePropsRow.id;
226-
225+
newContextObj[componentProviderId].compText = statePropsId;
226+
227227
// update/create stateUsed.compText
228228
setStateUsedObj(Object.assign(stateUsedObj, {compText: stateKey}));
229229
setCompText(newInput);
@@ -234,23 +234,16 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
234234
if (!newContextObj[componentProviderId]) {
235235
newContextObj[componentProviderId] = {};
236236
}
237-
newContextObj[componentProviderId].compLink = statePropsRow.id;
237+
newContextObj[componentProviderId].compLink = statePropsId;
238238

239239
// update/create stateUsed.compLink
240240
setStateUsedObj(Object.assign(stateUsedObj, {compLink: stateKey}));
241241
setCompLink(newInput);
242242
setUseContextObj(newContextObj);
243243
}
244244

245-
// TODO: set something to signify that state was used
246-
// so it can be handled in generateCode
247-
248-
// update use context object
249-
250245
}
251246

252-
// dispatch to 'UPDATE CSS' called when save button is clicked,
253-
// passing in style object constructed from all changed input values
254247
const handleSave = (): Object => {
255248
const styleObj: any = {};
256249
if (displayMode !== '') styleObj.display = displayMode;
@@ -265,7 +258,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
265258
if (compText !== '') attributesObj.compText = compText;
266259
if (compLink !== '') attributesObj.compLink = compLink;
267260
if (cssClasses !== '') attributesObj.cssClasses = cssClasses;
268-
261+
269262
dispatch({
270263
type: 'UPDATE STATE USED',
271264
payload: {stateUsedObj: stateUsedObj}
@@ -600,9 +593,9 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
600593
</FormControl>
601594
</div>
602595
<div>
603-
<UseStateModal
604-
updateAttributeWithState={updateAttributeWithState}
605-
attributeToChange="compText"
596+
<UseStateModal
597+
updateAttributeWithState={updateAttributeWithState}
598+
attributeToChange="compText"
606599
childId={state.canvasFocus.childId}/>
607600
</div>
608601
</div>
@@ -634,8 +627,8 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
634627
</FormControl>
635628
</div>
636629
<div>
637-
<UseStateModal
638-
updateAttributeWithState={updateAttributeWithState} attributeToChange="compLink"
630+
<UseStateModal
631+
updateAttributeWithState={updateAttributeWithState} attributeToChange="compLink"
639632
childId={state.canvasFocus.childId}/>
640633
</div>
641634
</div>

‎app/src/context/HTMLTypes.tsx

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ const HTMLTypes: HTMLType[] = [
164164
placeHolderShort: 'Switch',
165165
placeHolderLong: '',
166166
icon: ListIcon
167-
},
167+
},
168168
{
169169
id: -1,
170170
tag: 'Route',
@@ -177,20 +177,11 @@ const HTMLTypes: HTMLType[] = [
177177
{
178178
id: 18,
179179
tag: 'LinkTo',
180-
name: 'LinkTo',
180+
name: 'LinkTo',
181181
style: {},
182182
placeHolderShort: 'LinkTo',
183183
placeHolderLong: '',
184184
icon: ListIcon
185-
},
186-
{
187-
id: 19,
188-
tag: 'ForEach',
189-
name: 'ForEach',
190-
style: {},
191-
placeHolderShort: 'ForEach',
192-
placeHolderLong: '',
193-
icon: ListIcon
194185
}
195186
];
196187

‎app/src/helperFunctions/generateCode.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,6 @@ const generateUnformattedCode = (
102102
let customizationDetails = "";
103103
if (childElement.childId && childElement.tag !== 'Route') customizationDetails += (' ' + `id="${+childElement.childId}"`);
104104
if (childElement.attributes && childElement.attributes.cssClasses) {
105-
console.log(childElement.attributes);
106105
customizationDetails += (' ' + `className="${childElement.attributes.cssClasses}"`);
107106
}
108107
if (childElement.style && Object.keys(childElement.style).length > 0) customizationDetails +=(' ' + formatStyles(childElement));

0 commit comments

Comments
 (0)