Skip to content

Commit 5ede225

Browse files
WilliamCheng12345WilliamCheng12345
authored
Merge branch 'dev-46' into ron-william-changes
2 parents 790750f + f04de67 commit 5ede225

File tree

12 files changed

+223
-103
lines changed

12 files changed

+223
-103
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: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,39 @@ import Modal from '@material-ui/core/Modal';
33
import StateContext from '../../context/context';
44
import TableStateProps from '../right/TableStateProps';
55

6-
// TODO: typescript interface or type check
7-
function UseStateModal({ updateAttributeWithState, attributeToChange }) {
6+
function UseStateModal({ updateAttributeWithState, attributeToChange, childId }) {
87
const [state, dispatch] = useContext(StateContext);
98
const [open, setOpen] = useState(false);
10-
const [componentProviderId, setComponentProviderId] = useState(1) // id is initialized to App
9+
const [displayObject, setDisplayObject] = useState(null)
10+
const [stateKey, setStateKey] = useState('');
11+
const [statePropsId, setStatePropsId] = useState(-1);
12+
const [componentProviderId, setComponentProviderId] = useState(1);
1113

1214
// make tabs to choose which component to get state from
1315
const componentTabs = [];
1416
for (let i = 0; i < state.components.length; i ++) {
15-
componentTabs.push(<button onClick={() => setComponentProviderId(i+1)}>{state.components[i].name}</button>)
17+
components.push(<button
18+
onClick={() => {
19+
setComponentProviderId(i+1);
20+
setDisplayObject(null);
21+
setStateKey('');
22+
}}>
23+
{state.components[i].name}
24+
</button>)
1625
}
1726

18-
// return the selected state's ID back so the value of it can be updated in the customizationpanel. to the assign the value of selected state to attribute tied to useState button (currently just text)
19-
// attribute to change as parameter for
27+
// table to choose state from
2028
const body = (
2129
<div className="useState-position">
2230
<div className="useState-header">
2331
<span>Choose State Source</span>
2432
<button
2533
style={{ margin: '5px 5px' ,padding: '1px', float: 'right' }}
26-
onClick={() => setOpen(false)}
34+
onClick={() => {
35+
setStateKey('');
36+
setStatePropsId(-1);
37+
setDisplayObject(null)
38+
setOpen(false)}}
2739
>
2840
X
2941
</button>
@@ -36,8 +48,24 @@ function UseStateModal({ updateAttributeWithState, attributeToChange }) {
3648
<TableStateProps
3749
providerId = {componentProviderId}
3850
canDeleteState = {false}
51+
displayObject = {displayObject}
3952
selectHandler={(table) => {
40-
updateAttributeWithState(attributeToChange, componentProviderId, table.row.id);
53+
if (statePropsId < 0) setStatePropsId(table.row.id);
54+
// if object or array => show sub table
55+
if (table.row.type === "object") {
56+
setStateKey(stateKey + table.row.key + '.');
57+
setDisplayObject(table.row.value);
58+
} else if (table.row.type === "array") {
59+
setStateKey(stateKey + table.row.key)
60+
setDisplayObject(table.row.value);
61+
} else {
62+
// if not object or array => update state
63+
setDisplayObject(null);
64+
updateAttributeWithState(attributeToChange, componentProviderId, statePropsId, table.row, stateKey + table.row.key);
65+
setStateKey('')
66+
setStatePropsId(-1);
67+
setOpen(false);
68+
}
4169
}}
4270
isThemeLight={true}
4371
/>
@@ -54,4 +82,4 @@ function UseStateModal({ updateAttributeWithState, attributeToChange }) {
5482
);
5583
}
5684

57-
export default UseStateModal;
85+
export default UseStateModal;

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const DragDropPanel = (props): JSX.Element => {
5858
handleDelete={handleDelete}
5959
isThemeLight={isThemeLight}
6060
/>
61-
);
61+
);
6262
}
6363

6464
})}
@@ -74,10 +74,9 @@ const DragDropPanel = (props): JSX.Element => {
7474
handleDelete={handleDelete}
7575
isThemeLight={isThemeLight}
7676
/>
77-
);
77+
);
7878
}
7979
})}
80-
8180
</Grid>
8281
</div>
8382
</div>

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

Lines changed: 3 additions & 3 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: {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ const DemoRender = (props): JSX.Element => {
3535
if (elementType !== 'input' && elementType !== 'img' && element.children.length > 0) {
3636
renderedChildren = componentBuilder(element.children);
3737
}
38+
3839
if (elementType === 'input') componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
3940
else if (elementType === 'img') componentsToRender.push(<Box component={elementType} src={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
4041
else if (elementType === 'a') componentsToRender.push(<Box component={elementType} href={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}</Box>);

‎app/src/components/right/StatePropsPanel.tsx

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import TableStateProps from "./TableStateProps";
3131
const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
3232
const [state, dispatch] = useContext(StateContext);
3333
const classes = useStyles();
34-
34+
3535

3636
const [inputKey, setInputKey] = useState("");
3737
const [inputValue, setInputValue] = useState("");
@@ -45,12 +45,16 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
4545
// convert value to correct type based on user input
4646
const typeConversion = (value, type) => {
4747
switch (type) {
48-
case "String":
48+
case "string":
4949
return String(value);
50-
case "Number":
50+
case "number":
5151
return Number(value);
52-
case "Boolean":
52+
case "boolean":
5353
return Boolean(value);
54+
case "array":
55+
return JSON.parse(value);
56+
case "object":
57+
return JSON.parse(value);
5458
default:
5559
return value;
5660
}
@@ -87,24 +91,24 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
8791
key: inputKey,
8892
value: typeConversion(inputValue, inputType),
8993
type: inputType,
90-
};
91-
94+
};
95+
9296
dispatch({
93-
type: 'ADD STATE',
97+
type: 'ADD STATE',
9498
payload: {newState: newState}
9599
});
96100
resetError();
97101
clearForm();
98102
};
99-
100-
101-
// find table row using its id and if it exists, populate form with its details
103+
104+
105+
// find table row using its id and if it exists, populate form with its details
102106
const handlerRowSelect = (table) => {
103107
let exists = false;
104108
currentComponent.stateProps.forEach((stateProp) => {
105109
// if stateProp id matches current row's id (table.row.id), flip exists to true
106110
if (stateProp.id === table.row.id) exists = true;
107-
});
111+
});
108112
// if row id exists, populate form with corresponding inputs (key, value, type) from table row
109113
if (exists) {
110114
setInputKey(table.row.key);
@@ -125,18 +129,18 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
125129
value={inputKey}
126130
error={errorStatus}
127131
onChange={(e) => setInputKey(e.target.value)}
128-
className={isThemeLight ? `${classes.rootLight} ${classes.inputTextLight}` : `${classes.rootDark} ${classes.inputTextDark}`}
132+
className={isThemeLight ? `${classes.rootLight} ${classes.inputTextLight}` : `${classes.rootDark} ${classes.inputTextDark}`}
129133
/>
130134
<TextField
131135
id="textfield-value"
132136
label="value:"
133137
variant="outlined"
134138
value={inputValue}
135139
onChange={(e) => setInputValue(e.target.value)}
136-
className={isThemeLight ? `${classes.rootLight} ${classes.inputTextLight}` : `${classes.rootDark} ${classes.inputTextDark}`}
140+
className={isThemeLight ? `${classes.rootLight} ${classes.inputTextLight}` : `${classes.rootDark} ${classes.inputTextDark}`}
137141
/>
138142
<FormControl required className={isThemeLight ? `${classes.formControl} ${classes.lightThemeFontColor}` : `${classes.formControl} ${classes.darkThemeFontColor}`}>
139-
<InputLabel
143+
<InputLabel
140144
id="select-required-label"
141145
className={isThemeLight ? classes.greyThemeFontColor : classes.darkThemeFontColor}>
142146
Type
@@ -163,6 +167,9 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
163167
<MenuItem id="type-selector" value={"array"}>
164168
Array
165169
</MenuItem>
170+
<MenuItem id="type-selector" value={"object"}>
171+
Object
172+
</MenuItem>
166173
<MenuItem id="type-selector" value={"undefined"}>
167174
Undefined
168175
</MenuItem>
@@ -176,8 +183,8 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
176183
</FormHelperText>
177184
</FormControl>
178185
<br></br>
179-
<MyButton
180-
type="submit"
186+
<MyButton
187+
type="submit"
181188
onClick={submitNewState}
182189
className={isThemeLight ? `${classes.addComponentButton} ${classes.lightThemeFontColor}` : `${classes.addComponentButton} ${classes.darkThemeFontColor}`}
183190
>

‎app/src/components/right/TableStateProps.tsx

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@ import StateContext from '../../context/context';
1010
import { makeStyles } from '@material-ui/core/styles';
1111
import { StatePropsPanelProps } from '../../interfaces/Interfaces';
1212

13-
1413
const TableStateProps = (props) => {
1514
const [state, dispatch] = useContext(StateContext);
1615
const classes = useStyles();
1716
const [editRowsModel] = useState <GridEditRowsModel> ({});
1817
const [gridColumns, setGridColumns] = useState([]);
18+
1919
const [rows, setRows] = useState([]);
2020

2121
const columnTabs = [
@@ -68,6 +68,26 @@ const deleteState = (selectedId) => {
6868
const currentId = state.canvasFocus.componentId;
6969
const currentComponent = state.components[currentId - 1];
7070

71+
// rows to show are either from current component or from a given provider
72+
let rows = [];
73+
if (!props.providerId) {
74+
rows = currentComponent.stateProps.slice();
75+
} else {
76+
const providerComponent = state.components[props.providerId - 1];
77+
// changed to get whole object
78+
if (props.displayObject){
79+
const displayObject = props.displayObject;
80+
// format for DataGrid
81+
let id=1;
82+
for (const key in displayObject) {
83+
// if key is a number make it a string with brackets aroung number
84+
rows.push({ id: id++, key: ( isNaN(key) ? key : '[' + key + ']' ), value: displayObject[key], type: typeof(displayObject[key])});
85+
}
86+
} else {
87+
rows = providerComponent.stateProps.slice();
88+
}
89+
}
90+
7191
const filtered = currentComponent.stateProps.filter(element => element.id !== selectedId);
7292
dispatch({
7393
type: 'DELETE STATE',
@@ -82,6 +102,7 @@ const deleteState = (selectedId) => {
82102

83103

84104
const { selectHandler } : StatePropsPanelProps = props;
105+
85106

86107
// the delete button needs to be updated to remove
87108
// the states from the current focused component
@@ -109,7 +130,6 @@ const deleteState = (selectedId) => {
109130
}
110131
}, [props.providerId, state]);
111132

112-
113133
return (
114134
<div className={'state-prop-grid'}>
115135
<DataGrid

0 commit comments

Comments
 (0)