Skip to content

Commit

Permalink
Merge pull request #40 from ibeeliot/master
Browse files Browse the repository at this point in the history 
[FIXED: #38] REPUSH: Children added to parent components will have their children props destructured to parents automatically
  • Loading branch information
@tonyito
tonyito authored Mar 25, 2020
2 parents 88bbbea + cd7da54 commit 9fc8c1d
Show file tree
Hide file tree
Showing 5 changed files with 180 additions and 80 deletions.
4 changes: 2 additions & 2 deletions src/actions/actionCreators.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,9 @@ export const addComponent = ({ title }: { title: string }) => (
dispatch({ type: ADD_COMPONENT, payload: { title } });
};

export const addProp = (prop: PropInt) => ({
export const addProp = ({ key, type }: { key: string; type: string }) => ({
type: ADD_PROP,
payload: { ...prop }
payload: { key, type }
});

export const changeTutorial = (tutorial: number) => ({
Expand Down
10 changes: 5 additions & 5 deletions src/components/bottom/BottomTabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { ComponentsInt, PropInt, PropsInt } from '../../interfaces/Interfaces';

interface BottomTabsPropsInt extends PropsInt {
deleteProp(id: number): void;
addProp(prop: PropInt): void;
addProp(arg: { key: string; type: string }): void;
classes: any;
changeFocusComponent(arg: { title: string }): void;
updateCode(arg: { componentId: number; code: string }): void;
Expand Down Expand Up @@ -165,12 +165,12 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
<Tab
disableRipple
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
label="Application Tree"
label='Application Tree'
/>
<Tab
disableRipple
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
label="Code Preview"
label='Code Preview'
/>
<Tab
disableRipple
Expand All @@ -187,13 +187,13 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
<Tab
disableRipple
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
label="Add Child Props"
label='Add Child Props'
/>
</Tabs>

{value === 0 && (
<div
id="treeWrapper"
id='treeWrapper'
style={{
width: '100%',
height: '100%'
Expand Down
87 changes: 66 additions & 21 deletions src/components/bottom/DataTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,20 +11,57 @@ import { IconButton } from '@material-ui/core';

const styles = (theme: Theme) => ({
root: {
width: '80%',
width: '650px',
marginTop: theme.spacing.unit * 3,
marginRight: '100px'
// overflowX: "auto"
borderRadius: '8px',
// boxShadow: '0px 0px 5px 2px #97ffb6'
boxShadow: '0px 0px 5px 2px lightgray'
},
tableContainer: {
borderRadius: '7px',
border: 'none',
backgroundColor: '#55585b'
},
table: {
minWidth: 500,
marginRight: '100px'
minWidth: 300,
borderRadius: '7px',
backgroundColor: '#55585b'
},
tableHeader: {
fontWeight: '900',
fontSize: '25px',
color: '#01d46d',
border: 'none',
textShadow: '2px 2px 5px 5px #8dffce'
},
tableCell: {
fontWeight: '500',
fontSize: '17px',
letterSpacing: '2px',
color: 'lightgray',
padding: '3px',
borderRadius: '7px',
border: 'none',
'&:hover': {
transform: 'scale(1.1)',
color: '#fff'
}
},
tableCellShaded: {
fontWeight: '900',
fontSize: '1.2rem',
fontSize: '15px',
color: '#91D1F9',
border: '1px solid red'
borderRadius: '7px'
},
trashIcon: {
backgroundColor: 'none',
color: 'gray',
'&:hover': {
transform: 'scale(1.08)',
backgroundColor: 'gray',
color: '#b30000',
border: 'none'
}
}
});

Expand Down Expand Up @@ -54,7 +91,11 @@ function dataTable(props: dataTableProps) {
const { classes, rowData, rowHeader, deletePropHandler } = props;

const renderHeader = rowHeader.map((col: any, idx: number) => (
<TableCell align={'center'} key={`head_+${idx}`}>
<TableCell
className={classes.tableHeader}
align={'center'}
key={`head_+${idx}`}
>
{col}
</TableCell>
));
Expand All @@ -64,18 +105,23 @@ function dataTable(props: dataTableProps) {
// for some reason we must put each value in a div.
return rowHeader.map((header: string, idx: number) => (
<TableCell align={'center'} key={`td_${idx}`}>
{/* <div align={'center'} padding = {'none'} >{typeof row[header] === 'string' ? row[header] : row[header].toString()}</div> */}
{/* {row[header]} */}
{typeof row[header] === 'string' ? row[header] : row[header].toString()}
<div className={classes.tableCell} align={'center'} padding={'none'}>
{row[header]}
</div>
</TableCell>
));
}
// style={{height: 30}}
const renderRows = rowData.map((row: any) => (
<TableRow key={`row-${row.id}`}>
{renderRowCells(row)}
<TableCell align={'center'} padding={'none'}>
<TableCell
style={{ height: '15px', width: '15px' }}
align={'center'}
padding={'none'}
>
<IconButton
className={classes.trashIcon}
color='default'
// fontSize='small' - commented/removed b/c not a valid attribute for IconButton component
onClick={() => deletePropHandler(row.id)}
Expand All @@ -89,15 +135,14 @@ function dataTable(props: dataTableProps) {

return (
<Paper className={classes.root}>
<Table
className={classes.table}
// selectable={'true'} - commented/removed b/c not a valid attr for Table (no adverse effects noted)
>
<TableHead>
<TableRow>{renderHeader}</TableRow>
</TableHead>
<TableBody>{renderRows}</TableBody>
</Table>
<div className={classes.tableContainer}>
<Table className={classes.table} selectable={'true'}>
<TableHead>
<TableRow>{renderHeader}</TableRow>
</TableHead>
<TableBody>{renderRows}</TableBody>
</Table>
</div>
</Paper>
);
}
Expand Down
97 changes: 71 additions & 26 deletions src/components/left/LeftColExpansionPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,16 @@ import Tooltip from '@material-ui/core/Tooltip';
import Collapse from '@material-ui/core/Collapse';
import Switch from '@material-ui/core/Switch'; // for state/class toggling
import InputLabel from '@material-ui/core/InputLabel'; // labeling of state/class toggles
import { ComponentInt, ComponentsInt, PropsInt } from '../../interfaces/Interfaces'; // unused
import {
ComponentInt,
ComponentsInt,
PropsInt
} from '../../interfaces/Interfaces'; // unused
interface LeftColExpPanPropsInt extends PropsInt {
classes: any;
id?: number;
component: ComponentInt;
addProp(arg: { title: string; type: string }): void;
addChild(arg: { title: string; childType: string; HTMLInfo?: object }): void;
changeFocusComponent(arg: { title: string }): void;
selectableChildren: number[];
Expand All @@ -45,6 +50,7 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
focusComponent,
components,
component,
addProp,
addChild,
changeFocusComponent,
selectableChildren,
Expand All @@ -65,8 +71,6 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
// state/class toggles will be displayed when a component is focused
const focusedToggle = isFocused() === 'focused' ? true : false;



//this function determines whether edit mode for component name should be entered or not
//resets the title if 'escape' key is hit
const handleEdit = () => {
Expand All @@ -78,12 +82,54 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
}
};

// function adds childProps & also addsChild at the same time to the parents and updates state
// to reflect the childrenArray to be update inside the parent as well as the props from the child
// automatically destructured in the parents
const addChildProps = () => {
const addedChildProps = components.find(
(component: ComponentInt) => component.title === title
);

const parentKeys: any[] = [];
if (focusComponent.props.length > 0) {
focusComponent.props.forEach(key => parentKeys.push(key.key));
}
console.log('this is parentKeys', parentKeys);
// sorting through object keys of the focusComponent

let i = 0;
while (i <= addedChildProps.props.length) {
if (addedChildProps.props.length) {
if (i === 0) {
addChild({ title, childType: 'COMP' });
changeFocusComponent({ title: focusComponent.title });
}
if (addedChildProps.props[i]) {
const newKey = addedChildProps.props[i]['key'],
newType = addedChildProps.props[i]['type'];
if (!parentKeys.includes(newKey))
addProp({
key: newKey,
type: newType
});
else console.log('child prop already exists in parent!');
}
} else {
if (i === 0) {
addChild({ title, childType: 'COMP' });
changeFocusComponent({ title: focusComponent.title });
}
}
i++;
}
};

return (
<Grid
container
direction="row"
justify="center"
alignItems="center"
direction='row'
justify='center'
alignItems='center'
style={{
minWidth: '470px'
}}
Expand All @@ -106,7 +152,7 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
in={focusedToggle}
collapsedHeight={'80px'} //The type for the Collapse component is asking for a string, but if you put in a string and not a number, the component itself breaks.
style={{ borderRadius: '5px' }}
timeout="auto"
timeout='auto'
>
{/* NOT SURE WHY COLOR: RED IS USED, TRIED REMOVING IT AND NO VISIBLE CHANGE OCCURED. */}
<Grid
Expand Down Expand Up @@ -156,10 +202,10 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
</Typography>
) : (
<TextField //show a text field for editing instead if edit mode entered
id="filled"
label="Change Component Name"
id='filled'
label='Change Component Name'
defaultValue={title}
variant="outlined"
variant='outlined'
className={classes.text}
InputProps={{
className: classes.light //all of these styling makes the input box border, label, and text default to white.
Expand Down Expand Up @@ -191,7 +237,7 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
{focusedToggle ? (
<span style={{ display: 'inline-flex' }}>
<InputLabel
htmlFor="stateful"
htmlFor='stateful'
style={{
color: '#fff',
marginBottom: '0px',
Expand All @@ -210,12 +256,12 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
toggleComponentState({ id });
changeFocusComponent({ title });
}}
value="stateful"
color="primary"
value='stateful'
color='primary'
// id={props.id.toString()}
/>
<InputLabel
htmlFor="classBased"
htmlFor='classBased'
style={{
color: '#fff',
marginBottom: '0px',
Expand All @@ -234,19 +280,19 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
toggleComponentClass({ id });
changeFocusComponent({ title });
}}
value="classBased"
color="primary"
value='classBased'
color='primary'
/>
</span>
) : (
''
)}
{focusedToggle && component.id !== 1 ? (
<Button
variant="text"
size="small"
color="default"
aria-label="Delete"
variant='text'
size='small'
color='default'
aria-label='Delete'
className={classes.margin}
onClick={() =>
deleteComponent({
Expand Down Expand Up @@ -295,15 +341,14 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
<div />
) : (
<Tooltip
title="add as child"
aria-label="add as child"
placement="left"
title='add as child'
aria-label='add as child'
placement='left'
>
<IconButton
aria-label="Add"
aria-label='Add'
onClick={() => {
addChild({ title, childType: 'COMP' });
changeFocusComponent({ title: focusComponent.title });
addChildProps();
}}
>
<AddIcon style={{ color, float: 'right', marginTop: '10px' }} />
Expand Down
Loading

0 comments on commit 9fc8c1d

Please sign in to comment.