fixed drop down and focus select

MikoGome · MikoGome · commit 3db4d993ede1 · 2022-03-03T18:32:53.000-08:00
diff --git a/app/src/components/left/DragDropPanel.tsx b/app/src/components/left/DragDropPanel.tsx
@@ -28,7 +28,7 @@ const DragDropPanel = (props): JSX.Element => {
   };
 
   // filter out separator so that it will not appear on the html panel
-  const htmlTypesToRender = state.HTMLTypes.filter(type => type.name !== 'separator' && type.name !== 'Route');
+  const htmlTypesToRender = state.HTMLTypes.filter(type => type.name !== 'separator');
   return (
     <div className="HTMLItems">
       <div id="HTMLItemsTopHalf">
@@ -37,7 +37,7 @@ const DragDropPanel = (props): JSX.Element => {
         >
           <h3 style={ {color: isThemeLight ? '#000' : '#fff'} }>HTML ELEMENTS</h3>
           {htmlTypesToRender.map(option => {
-            if (!['Switch', 'LinkTo', 'LinkHref', 'Image'].includes(option.name)) {
+            if (!['Switch', 'LinkTo', 'LinkHref', 'Image', 'Route'].includes(option.name)) {
               return (
                 <HTMLItem
                   name={option.name}
@@ -53,7 +53,7 @@ const DragDropPanel = (props): JSX.Element => {
           })}
           {state.projectType === "Classic React" ? <h3 style={ {color: isThemeLight ? '#000' : '#fff' } }>REACT ROUTER</h3> : null}
           {htmlTypesToRender.map(option => {
-            if ((option.name === 'Switch' || option.name === 'LinkTo') && state.projectType === "Classic React") {
+            if ((option.name === 'Switch' || option.name === 'LinkTo' || option.name === 'Route') && state.projectType === "Classic React") {
               return (
                 <HTMLItem
                   name={option.name}
diff --git a/app/src/components/main/AddLink.tsx b/app/src/components/main/AddLink.tsx
@@ -8,7 +8,7 @@ import { InputLabel } from '@material-ui/core';
 
 import { styleContext } from '../../containers/AppContainer';
 
-function AddLink({ id }: AddRoutes) {
+function AddLink({ id, onClickHandler }) {
   const { isThemeLight } = useContext(styleContext);
   const [state, dispatch] = useContext(StateContext);
 
@@ -25,29 +25,33 @@ function AddLink({ id }: AddRoutes) {
 
   const handlePageSelect = event => {
     const currComponent = state.components.find(element => element.id === state.canvasFocus.componentId);
-    currComponent.children.forEach(element => {
+    currComponent.children.some(element => {
       if(element.childId === id) {
         const state = JSON.parse(JSON.stringify(element));
+        state.childId = id;
         state.attributes.compLink = event.target.value;
         dispatch({type: 'UPDATE ATTRIBUTES', payload: state})
+        return true;
       }
     });
   }
 
-  let pagesItems = state.components.filter(comp => state.rootComponents.includes(comp.id));
-  let dropDown = pagesItems.map(comp => <MenuItem value={comp.name}>{comp.name}</MenuItem>);
+  const pagesItems = state.components.filter(comp => state.rootComponents.includes(comp.id));
+  const dropDown = pagesItems.map(comp => <MenuItem value={comp.name}>{comp.name}</MenuItem>);
 
   return (
-    <div style={{paddingBottom: '1px', float: 'right' }}>
-      <FormControl size='small'>
-        <InputLabel style={ { color: isThemeLight? '#000' : '#fff'} }>Pages</InputLabel>
-        <Select variant="outlined"
-          onChange={handlePageSelect}
-          id="page-select"
-          style={ isThemeLight? {backgroundColor: '#eef0f1', color: '#000', border: '1px solid black', height: '28px', width: '200px'} : {backgroundColor: 'gray', color: '#fff', border: '1px solid white', height: '28px', width: '200px'}}
-        >
-          {dropDown}
-        </Select>
+    <div style={{padding: '1px', float: 'right', display: 'flex', border: '2px solid red', alignSelf: 'center'}}>
+      <FormControl size='medium' style={{display: 'flex'}}>
+          <InputLabel style={ { color: isThemeLight? '#000' : '#fff'} }>Pages</InputLabel>
+          <Select label='pages'
+            variant="outlined"
+            onMouseDown={onClickHandler}
+            onChange={handlePageSelect}
+            id="page-select"
+            style={ isThemeLight? {backgroundColor: '#eef0f1', color: '#000', border: '1px solid black', height: '28px', width: '200px'} : {backgroundColor: 'gray', color: '#fff', border: '1px solid white', height: '28px', width: '200px'}}
+            >
+            {dropDown}
+          </Select>
       </FormControl>
     </div>
   );
diff --git a/app/src/components/main/DirectChildHTMLNestable.tsx b/app/src/components/main/DirectChildHTMLNestable.tsx
@@ -143,9 +143,9 @@ function DirectChildHTMLNestable({
     routeButton.push(<AddRoute id={childId} name={name} />);
   }
   if (typeId === 19) {
-    routeButton.push(<AddLink id={childId} name={name} />);
+    routeButton.push(<AddLink id={childId} onClickHandler={onClickHandler} name={name} />);
   }
-
+  
   return (
     <div onClick={onClickHandler} style={combinedStyle} ref={ref} id={`canv${childId}`}>
       <strong style={ {color: isThemeLight ? 'black' : 'white'} }>{HTMLType.placeHolderShort}</strong>
diff --git a/app/src/containers/CustomizationPanel.tsx b/app/src/containers/CustomizationPanel.tsx
@@ -48,13 +48,14 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
   const [stateUsedObj, setStateUsedObj] = useState({});
 
   const resetFields = () => {
-    const childrenArray = state.components[0].children;
-    let attributes;
+    const currComponent = state.components.find(element => element.id === state.canvasFocus.componentId);
+    const childrenArray = currComponent.children;
     for (const element of childrenArray) {
       if (configTarget.child && element.childId === configTarget.child.id) {
-        attributes = element.attributes;
-        setCompText(attributes.text ? attributes.text : '');
-        setCompLink(attributes.link ? attributes.link : '');
+        const attributes = element.attributes;
+        const style = element.style;
+        setCompText(attributes.compText ? attributes.compText : '');
+        setCompLink(attributes.compLink ? attributes.compLink : '');
         setCssClasses(attributes.cssClasses ? attributes.cssClasses : '');
       }
     }
@@ -73,6 +74,9 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
   // after component renders, reset the input fields with the current styles of the selected child
   useEffect(() => {
     resetFields();
+    // const currComponent = state.components.find(element => element.id === state.canvasFocus.componentId);
+    // const childrenArray = currComponent.children;
+    // console.log('childrenArray', childrenArray)
   }, [state.canvasFocus.componentId, state.canvasFocus.childId]);
   // handles all input field changes, with specific updates called based on input's name
   const handleChange = (e: React.ChangeEvent<{ value: any }>) => {
@@ -399,7 +403,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
               <FormSelector
                 classes={classes}
                 isThemeLight={isThemeLight}
-                selectValue={flexAlign}
+                selectValue={displayMode}
                 handleChange={handleChange}
                 title="Display:"
                 name="display"
@@ -415,7 +419,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
                   <FormSelector
                     classes={classes}
                     isThemeLight={isThemeLight}
-                    selectValue={flexAlign}
+                    selectValue={flexDir}
                     handleChange={handleChange}
                     title="Flex direction:"
                     name="flexdir"
@@ -428,7 +432,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
                   <FormSelector
                     classes={classes}
                     isThemeLight={isThemeLight}
-                    selectValue={flexAlign}
+                    selectValue={flexJustify}
                     handleChange={handleChange}
                     title="Justify content:"
                     name="flexjust"
diff --git a/app/src/helperFunctions/generateCode.ts b/app/src/helperFunctions/generateCode.ts
@@ -182,7 +182,8 @@ const generateUnformattedCode = (
       return `${levelSpacer(level, 5)}<${childElement.tag} src=${activeLink} ${elementTagDetails(childElement)}/>`;
     } else if (nestable) { 
       const routePath = (childElement.tag === 'Route') ? (' ' + 'exact path=' + activeLink) : '';
-      return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails(childElement)}${routePath}>${innerText}
+      return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails(childElement)}${routePath}>
+        ${tabSpacer(level)}${innerText}
         ${tabSpacer(level)}${writeNestedElements(childElement.children, level + 1)}
         ${tabSpacer(level - 1)}</${childElement.tag}>${levelSpacer(2, (3 + level))}`;
     } else if (childElement.tag !== 'separator') {

Original file line number	Diff line number	Diff line change
`@@ -143,9 +143,9 @@ function DirectChildHTMLNestable({`
`143`	`143`	`routeButton.push(<AddRoute id={childId} name={name} />);`
`144`	`144`	`}`
`145`	`145`	`if (typeId === 19) {`
`146`		`- routeButton.push(<AddLink id={childId} name={name} />);`
	`146`	`+ routeButton.push(<AddLink id={childId} onClickHandler={onClickHandler} name={name} />);`
`147`	`147`	`}`
`148`		`-`
	`148`	`+`
`149`	`149`	`return (`
`150`	`150`	<div onClick={onClickHandler} style={combinedStyle} ref={ref} id={`canv${childId}`}>
`151`	`151`	`<strong style={ {color: isThemeLight ? 'black' : 'white'} }>{HTMLType.placeHolderShort}</strong>`