Skip to content

Commit 08e86f8

Browse files
carlyjacksoncarlyjackson
committed
functional use state button on the customization tab
1 parent 3bb5f86 commit 08e86f8

File tree

8 files changed

+213
-36
lines changed

8 files changed

+213
-36
lines changed

‎app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
194194
/>
195195
<TextField
196196
id="textfield-value"
197-
label="value:"
197+
label="initial value:"
198198
variant="outlined"
199199
value={inputValue}
200200
onChange={(e) => setInputValue(e.target.value)}

‎app/src/components/StateManagement/CreateTab/components/TableParentProps.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ const TableParentProps = props => {
3737
},
3838
{
3939
field: 'value',
40-
headerName: 'Value',
41-
width: 90,
40+
headerName: 'Initial Value',
41+
width: 100,
4242
editable: true
4343
},
4444
{

‎app/src/components/StateManagement/CreateTab/components/TablePassedInProps.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ const TablePassedInProps = props => {
3535
},
3636
{
3737
field: 'value',
38-
headerName: 'Value',
39-
width: 90,
38+
headerName: 'Initial Value',
39+
width: 100,
4040
editable: true
4141
},
4242
{

‎app/src/components/StateManagement/CreateTab/components/TableStateProps.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ const TableStateProps = props => {
3434
},
3535
{
3636
field: 'value',
37-
headerName: 'Value',
38-
width: 90,
37+
headerName: 'Initial Value',
38+
width: 100,
3939
editable: true
4040
},
4141
{

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

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
2+
import React, { useState, useContext, useEffect } from 'react';
3+
import {
4+
DataGrid,
5+
GridEditRowsModel,
6+
} from '@mui/x-data-grid';
7+
import Button from '@material-ui/core/Button';
8+
import ClearIcon from '@material-ui/icons/Clear';
9+
import StateContext from '../../context/context';
10+
import { makeStyles } from '@material-ui/core/styles';
11+
import { StatePropsPanelProps } from '../../interfaces/Interfaces';
12+
13+
const TableStateProps = props => {
14+
const [state, dispatch] = useContext(StateContext);
15+
const classes = useStyles();
16+
const [editRowsModel] = useState<GridEditRowsModel>({});
17+
const [gridColumns, setGridColumns] = useState([]);
18+
const columnTabs = [
19+
{
20+
field: 'id',
21+
headerName: 'ID',
22+
width: 70,
23+
editable: false
24+
},
25+
{
26+
field: 'key',
27+
headerName: 'Key',
28+
width: 90,
29+
editable: true
30+
},
31+
{
32+
field: 'value',
33+
headerName: 'Value',
34+
width: 90,
35+
editable: true
36+
},
37+
{
38+
field: 'type',
39+
headerName: 'Type',
40+
width: 90,
41+
editable: false
42+
},
43+
{
44+
field: 'delete',
45+
headerName: 'X',
46+
width: 70,
47+
editable: false,
48+
renderCell: function renderCell(params: any) {
49+
return (
50+
<Button
51+
style={{ width: `${3}px` }}
52+
onClick={() => {
53+
deleteState(params.id);
54+
}}
55+
>
56+
<ClearIcon style={{ width: `${15}px` }} />
57+
</Button>
58+
);
59+
}
60+
}
61+
];
62+
const deleteState = selectedId => {
63+
// get the current focused component
64+
// remove the state that the button is clicked
65+
// send a dispatch to rerender the table
66+
const currentId = state.canvasFocus.componentId;
67+
const currentComponent = state.components[currentId - 1];
68+
const filtered = currentComponent.stateProps.filter(
69+
element => element.id !== selectedId
70+
);
71+
dispatch({
72+
type: 'DELETE STATE',
73+
payload: { stateProps: filtered, rowId: selectedId }
74+
});
75+
};
76+
77+
useEffect(() => {
78+
setGridColumns(columnTabs);
79+
}, [props.isThemeLight]);
80+
81+
const { selectHandler }: StatePropsPanelProps = props;
82+
// the delete button needs to be updated to remove
83+
// the states from the current focused component
84+
useEffect(() => {
85+
if (props.canDeleteState) {
86+
setGridColumns(columnTabs);
87+
} else {
88+
setGridColumns(columnTabs.slice(0, gridColumns.length - 1));
89+
}
90+
}, [state.canvasFocus.componentId]);
91+
// rows to show are either from current component or from a given provider
92+
let rows = [];
93+
const currentId = state.canvasFocus.componentId;
94+
const currentComponent = state.components[currentId - 1];
95+
let currentProps = currentComponent.stateProps.slice();
96+
97+
98+
99+
//add in passed in props
100+
let propsPassed = currentComponent.passedInProps.slice();
101+
console.log("propsPassed:", propsPassed);
102+
103+
for (let i = 0; i < propsPassed.length; i++) {
104+
currentProps.push(propsPassed[i]);
105+
}
106+
107+
rows = currentProps;
108+
console.log("currentProps on line 108: ", currentProps);
109+
console.log({rows});
110+
111+
return (
112+
<div className={'state-prop-grid'}>
113+
<DataGrid
114+
rows={rows}
115+
columns={gridColumns}
116+
pageSize={5}
117+
editRowsModel={editRowsModel}
118+
onRowClick={selectHandler}
119+
className={props.isThemeLight ? classes.themeLight : classes.themeDark}
120+
/>
121+
</div>
122+
);
123+
};
124+
125+
const useStyles = makeStyles({
126+
themeLight: {
127+
color: 'rgba(0,0,0,0.54)',
128+
'& .MuiTablePagination-root': {
129+
color: 'rbga(0,0,0,0.54)'
130+
}
131+
},
132+
themeDark: {
133+
color: 'white',
134+
'& .MuiTablePagination-root': {
135+
color: 'white'
136+
},
137+
'& .MuiIconButton-root': {
138+
color: 'white'
139+
},
140+
'& .MuiSvgIcon-root': {
141+
color: 'white'
142+
},
143+
'& .MuiDataGrid-window': {
144+
backgroundColor: 'rgba(0,0,0,0.54)'
145+
}
146+
}
147+
});
148+
149+
export default TableStateProps;

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

Lines changed: 54 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React, {useRef, useState, useContext, useEffect } from 'react';
22
import Modal from '@material-ui/core/Modal';
33
import StateContext from '../../context/context';
4-
import TableStateProps from '../right/TableStateProps';
4+
import TableStateProps from './TableStateProps';
5+
import { off } from 'process';
56

67
function UseStateModal({ updateAttributeWithState, attributeToChange, childId }) {
78
const [state, dispatch] = useContext(StateContext);
@@ -11,25 +12,50 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
1112
const [statePropsId, setStatePropsId] = useState(-1);
1213
const [componentProviderId, setComponentProviderId] = useState(1);
1314

15+
const currentId = state.canvasFocus.componentId;
16+
const currentComponent = state.components[currentId - 1];
17+
const passedInProps = (currentComponent.name !== 'App' && currentComponent.name !== 'index')? currentComponent.passedInProps : '';
18+
const currentProps = currentComponent.stateProps;
19+
20+
const allStateToDisplay = {
21+
...currentProps,
22+
...passedInProps
23+
};
24+
25+
console.log({allStateToDisplay});
26+
1427
// make tabs to choose which component to get state from
15-
const componentTabs = [];
16-
for (let i = 0; i < state.components.length; i ++) {
17-
componentTabs.push(<button
18-
onClick={() => {
19-
setComponentProviderId(i+1);
20-
setDisplayObject(null);
21-
setStateKey('');
22-
}}>
23-
{state.components[i].name}
24-
</button>)
25-
}
28+
// const componentTabs = [];
29+
// for (let i = 0; i < state.components.length; i ++) {
30+
// componentTabs.push(<button
31+
// onClick={() => {
32+
// setComponentProviderId(i+1);
33+
// setDisplayObject(null);
34+
// setStateKey('');
35+
// }}>
36+
// {state.components[i].name}
37+
// </button>)
38+
// }
39+
40+
// const componentTabs = [];
41+
// componentTabs.push(<button
42+
// onClick={() => {
43+
// setComponentProviderId(i+1);
44+
// setDisplayObject(null);
45+
// setStateKey('');
46+
// }}>
47+
// {state.components[i].name}
48+
// </button>)
49+
// }
50+
51+
//carly: add a button to exit out of the window?
2652

2753
// table to choose state from
2854
const body = (
2955
<div className="useState-position">
3056
<div className="useState-header">
31-
<span>Choose State Source</span>
32-
<button
57+
<span>Choose State</span>
58+
{/* <button
3359
style={{ margin: '5px 5px' ,padding: '1px', float: 'right' }}
3460
onClick={() => {
3561
setStateKey('');
@@ -38,35 +64,35 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
3864
setOpen(false)}}
3965
>
4066
X
41-
</button>
67+
</button> */}
4268
</div>
4369
<div className="useState-window">
44-
<div className="useState-dropdown">
70+
{/* <div className="useState-dropdown">
4571
{componentTabs}
46-
</div>
72+
</div> */}
4773
<div className="useState-stateDisplay">
4874
<TableStateProps
4975
providerId = {componentProviderId}
5076
canDeleteState = {false}
51-
displayObject = {displayObject}
77+
//displayObject = {allStateToDisplay["0"]}
5278
selectHandler={(table) => {
5379
// if object or array => show sub table
54-
if (table.row.type === "object") {
55-
if (statePropsId < 0) setStatePropsId(table.row.id);
56-
setStateKey(stateKey + table.row.key + '.');
57-
setDisplayObject(table.row.value);
58-
} else if (table.row.type === "array") {
59-
if (statePropsId < 0) setStatePropsId(table.row.id);
60-
setStateKey(stateKey + table.row.key)
61-
setDisplayObject(table.row.value);
62-
} else {
80+
// if (table.row.type === "object") {
81+
// if (statePropsId < 0) setStatePropsId(table.row.id);
82+
// setStateKey(stateKey + table.row.key + '.');
83+
// setDisplayObject(table.row.value);
84+
// } else if (table.row.type === "array") {
85+
// if (statePropsId < 0) setStatePropsId(table.row.id);
86+
// setStateKey(stateKey + table.row.key)
87+
// setDisplayObject(table.row.value);
88+
// } else {
6389
// if not object or array => update state
6490
setDisplayObject(null);
6591
updateAttributeWithState(attributeToChange, componentProviderId, statePropsId > 0 ? statePropsId : table.row.id, table.row, stateKey + table.row.key);
6692
setStateKey('')
6793
setStatePropsId(-1);
6894
setOpen(false);
69-
}
95+
// }
7096
}}
7197
deleteHandler={() => func()}
7298
isThemeLight={true}

‎app/src/containers/CustomizationPanel.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
215215
searchNestedChildren(state.components);
216216
return isLinked;
217217
};
218+
218219
const updateAttributeWithState = (attributeName, componentProviderId, statePropsId, statePropsRow, stateKey='') => {
219220
const newInput = statePropsRow.value;
220221
// get the stateProps of the componentProvider
@@ -241,6 +242,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
241242
setUseContextObj(newContextObj);
242243
}
243244
}
245+
244246
const handleSave = (): Object => {
245247
const styleObj: any = {};
246248
if (displayMode !== '') styleObj.display = displayMode;

‎app/src/public/styles/style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ h4 {
4545
}
4646
.state-prop-grid {
4747
height: 300px;
48-
width: 400px;
48+
width: 410px;
4949
flex-grow: 1;
5050
padding-left: 10px;
5151
padding-right: 10px;

0 commit comments

Comments
 (0)