Skip to content

Commit ba2ec38

Browse files
williamdyoonjonocrbuddhajjigaexkevinparkMadinventorZero
committed
updated table display; refactored codes; wip
Co-authored-by: jonocr <[email protected]> Co-authored-by: buddhajjigae <[email protected]> Co-authored-by: xkevinpark <[email protected]> Co-authored-by: MadinventorZero <[email protected]>
1 parent 6180401 commit ba2ec38

File tree

2 files changed

+32
-203
lines changed

2 files changed

+32
-203
lines changed

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

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
// CARET
2-
import React, {
3-
Component,
4-
useState,
5-
useContext,
6-
useEffect,
7-
useCallback,
8-
useDebugValue
9-
} from 'react';
2+
import React, { useState, useContext } from 'react';
103
import {
114
createStyles,
125
makeStyles,
@@ -48,16 +41,6 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
4841
'currentComponent.useStateCodes:',
4942
currentComponent.useStateCodes
5043
);
51-
// console.log('state:', state);
52-
// console.log('state.canvasFocus:', state.canvasFocus);
53-
// console.log(
54-
// 'state.canvasFocus.components[currentId-1]:',
55-
// state.components[currentId - 1],
56-
// );
57-
// console.log('key', document.getElementById('textfield-key').value);
58-
// console.log('value', document.getElementById('textfield-value').value);
59-
// console.log(document.getElementById('type-input').innerHTML);
60-
// console.log('newStateProp:', newStateProp);
6144
};
6245

6346
const typeConversion = (value, type) => {
@@ -84,10 +67,6 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
8467
const value = document.getElementById('textfield-value').value;
8568
const type = document.getElementById('type-input').innerHTML;
8669

87-
// FOR CONSIDERING USER INPUT DATA VISUALIZATION:
88-
// case 1: [{ name: 'John Doe'}, {age: 99}, {alive: true}]
89-
// case 2: [{ key: 'name', value: 'John Doe', type: 'string'}, {key: 'age', value: '99', type: 'number'}, {key: 'alive', value: true, type: 'boolean'}]
90-
9170
// store key, value, type in newStateProp object
9271
newStateProp.key = key;
9372
newStateProp.type = type.charAt(0).toLowerCase() + type.slice(1);
@@ -109,6 +88,7 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
10988
const currentComponent = state.components[currentId - 1];
11089

11190
const localStateCode = [];
91+
// iterate thru current component's state props to generate code expression for each new state prop entry
11292
currentComponent.stateProps.forEach(el => {
11393
const useStateCode = `const [${el.key}, set${el.key
11494
.charAt(0)

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

Lines changed: 30 additions & 181 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,43 @@
1-
import React, {
2-
Component,
3-
useState,
4-
useContext,
5-
useEffect,
6-
useCallback,
7-
useDebugValue
8-
} from 'react';
1+
// CARET
2+
import React, { useState, useContext } from 'react';
93
import {
104
DataGrid,
115
GridColumns,
126
GridEditRowsModel,
13-
GridEditCellPropsParams
14-
// ColDef,
157
} from '@material-ui/data-grid';
168

179
import StateContext from '../../context/context';
18-
import ComponentPanelItem from './ComponentPanelItem';
19-
import ComponentPanelRoutingItem from './ComponentPanelRoutingItem';
20-
21-
// const columns: ColDef[] = [
22-
// { field: 'id', headerName: 'ID', width: 70 },
23-
// { field: 'key', headerName: 'Key', width: 100, editable: true },
24-
// { field: 'value', headerName: 'Value', width: 100, editable: true },
25-
// {
26-
// field: 'type',
27-
// headerName: 'Type',
28-
// width: 100,
29-
// editable: true
30-
// }
31-
// ];
3210

3311
const columns: GridColumns = [
34-
{ field: 'id', headerName: 'ID', width: 70, editable: false },
35-
{ field: 'key', headerName: 'Key', width: 100, editable: true },
36-
{ field: 'value', headerName: 'Value', width: 100, editable: true },
37-
{ field: 'type', headerName: 'Type', width: 100, editable: false }
12+
{
13+
field: 'id',
14+
headerName: 'ID',
15+
width: 70,
16+
editable: false,
17+
},
18+
{
19+
field: 'key',
20+
headerName: 'Key',
21+
width: 100,
22+
editable: true,
23+
},
24+
{
25+
field: 'value',
26+
headerName: 'Value',
27+
width: 100,
28+
editable: true,
29+
},
30+
{
31+
field: 'type',
32+
headerName: 'Type',
33+
width: 100,
34+
editable: false,
35+
},
3836
];
3937

38+
// This function iterates thru current component's state props array to build rows to display in grid below
4039
const buildRows = () => {
41-
// const rows = [];
42-
const [state, dispatch] = useContext(StateContext);
40+
const [state] = useContext(StateContext);
4341
const currentId = state.canvasFocus.componentId;
4442
const currentComponent = state.components[currentId - 1];
4543
const rows = [];
@@ -56,52 +54,10 @@ const buildRows = () => {
5654
return rows;
5755
};
5856

59-
60-
// const validateKey = (key) => {
61-
// const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
62-
// return re.test(String(email).toLowerCase());
63-
// }
64-
6557
export default function DataTable() {
66-
const [editRowsModel, setEditRowsModel] = useState<GridEditRowsModel>({});
67-
const [state, dispatch] = useContext(StateContext);
68-
69-
const currentId = state.canvasFocus.componentId;
70-
const currentComponent = state.components[currentId - 1];
71-
let rows = buildRows();
72-
73-
// const [rows, setRows] = useState<any[]>(currentComponent.stateProps);
74-
// const handleEditCellChangeCommitted = useCallback(({id,field,props}:GridEditCellPropsParams)=>{});
58+
const [editRowsModel, setEditRowsModel] = useState < GridEditRowsModel > ({});
7559

76-
// const handleEditCellChange = useCallback(
77-
// ({ id, field, props }: GridEditCellPropsParams) => {
78-
// // add switch case
79-
// console.log('hello');
80-
// console.log('id:', id);
81-
// console.log('field:', field);
82-
// console.log('props:', props);
83-
// console.log('currentComponent:', currentComponent)
84-
85-
// switch (field) {
86-
// case 'Key':
87-
// check no special characters or white space
88-
// case 'Value':
89-
// based on type: change or hold errors
90-
// if(rows[id].type)
91-
// }
92-
// if (field === 'email') {
93-
// const data = props; // Fix eslint value is missing in prop-types for JS files
94-
// const isValid = validateEmail(data.value);
95-
// const newState = {};
96-
// newState[id] = {
97-
// ...editRowsModel[id],
98-
// email: { ...props, error: !isValid }
99-
// };
100-
// setEditRowsModel(state => ({ ...state, ...newState }));
101-
// }
102-
// },
103-
// [editRowsModel]
104-
// );
60+
const rows = buildRows();
10561

10662
return (
10763
<div style={{ height: 400, width: '100%' }}>
@@ -110,114 +66,7 @@ export default function DataTable() {
11066
columns={columns}
11167
pageSize={5}
11268
editRowsModel={editRowsModel}
113-
// onEditCellChange={handleEditCellChange}
114-
// onEditCellChangeCommitted={handleEditCellChangeCommitted}
115-
// checkboxSelection
116-
/>
117-
</div>
118-
);
119-
}
120-
121-
/*
122-
import * as React from 'react';
123-
import { makeStyles, Theme } from '@material-ui/core/styles';
124-
import {
125-
DataGrid,
126-
getThemePaletteMode,
127-
GridColumns,
128-
GridEditCellPropsParams,
129-
GridEditRowsModel,
130-
GridRowsProp
131-
} from '@material-ui/data-grid';
132-
133-
const useStyles = makeStyles((theme: Theme) => {
134-
const isDark = getThemePaletteMode(theme.palette) === 'dark';
135-
136-
return {
137-
root: {
138-
'& .MuiDataGrid-cellEditing': {
139-
backgroundColor: 'rgb(255,215,115, 0.19)',
140-
color: '#1a3e72'
141-
},
142-
'& .Mui-error': {
143-
backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`,
144-
color: isDark ? '#ff4343' : '#750f0f'
145-
}
146-
}
147-
};
148-
});
149-
150-
function validateEmail(email) {
151-
const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
152-
return re.test(String(email).toLowerCase());
153-
}
154-
155-
export default function TableStateProps() {
156-
const [editRowsModel, setEditRowsModel] = React.useState<GridEditRowsModel>(
157-
{}
158-
);
159-
const classes = useStyles();
160-
161-
const handleEditCellChange = React.useCallback(
162-
({ id, field, props }: GridEditCellPropsParams) => {
163-
console.log('id:', id);
164-
console.log('field:', field);
165-
console.log('props:', props);
166-
if (field === 'email') {
167-
const data = props; // Fix eslint value is missing in prop-types for JS files
168-
const isValid = validateEmail(data.value);
169-
const newState = {};
170-
newState[id] = {
171-
...editRowsModel[id],
172-
email: { ...props, error: !isValid }
173-
};
174-
setEditRowsModel(state => ({ ...state, ...newState }));
175-
}
176-
},
177-
[editRowsModel]
178-
);
179-
180-
return (
181-
<div style={{ height: 400, width: '100%' }}>
182-
<DataGrid
183-
className={classes.root}
184-
rows={rows}
185-
columns={columns}
186-
editRowsModel={editRowsModel}
187-
onEditCellChange={handleEditCellChange}
18869
/>
18970
</div>
19071
);
19172
}
192-
193-
const columns: GridColumns = [
194-
{ field: 'name', headerName: 'Name', width: 180, editable: true },
195-
{ field: 'email', headerName: 'Email', width: 200, editable: true },
196-
{
197-
field: 'dateCreated',
198-
headerName: 'Date Created',
199-
type: 'date',
200-
width: 180,
201-
editable: true
202-
},
203-
{
204-
field: 'lastLogin',
205-
headerName: 'Last Login',
206-
type: 'dateTime',
207-
width: 220,
208-
editable: true
209-
}
210-
];
211-
const rows: GridRowsProp = [
212-
{
213-
id: 1,
214-
name: 'a',
215-
email: 'aaa@aaa.com'
216-
},
217-
{
218-
id: 2,
219-
name: 'b',
220-
email: 'bbb@bbb.com'
221-
}
222-
];
223-
*/

0 commit comments

Comments
 (0)