Merge pull request #16 from MadinventorZero/styleandlink

Styleandlink

Author: jonocr

app/src/components/main/DemoRender.tsx

@@ -27,11 +27,14 @@ const DemoRender = (props): JSX.Element => {
         const elementStyle = element.style;
         const innerText = element.attributes.compText;
         const classRender = element.attributes.cssClasses;
+        const activeLink = element.attributes.compLink;
         let renderedChildren;
         if (elementType !== 'input' && elementType !== 'img' && element.children.length > 0) {
           renderedChildren = componentBuilder(element.children);
         }
-        if (elementType === 'input' || elementType === 'img') componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={childId}></Box>);
+        if (elementType === 'input') componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={childId}></Box>);
+        else if (elementType === 'img') componentsToRender.push(<Box component={elementType} src={activeLink} className={classRender} style={elementStyle} key={key} id={childId}></Box>);
+        else if (elementType === 'a') componentsToRender.push(<Box component={elementType} href={activeLink} className={classRender} style={elementStyle} key={key} id={childId}>{innerText}</Box>);
         else componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={childId}>{innerText}{renderedChildren}</Box>);
         key += 1;
       }

app/src/components/main/DirectChildHTMLNestable.tsx

@@ -70,7 +70,6 @@ const snapShotFunc = () => {
       // updates state with new instance
       // if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
       if (item.newInstance) {
-        console.log("Child added directly to an existing element")
         dispatch({
           type: 'ADD CHILD',
           payload: {

app/src/containers/RightContainer.tsx

@@ -40,6 +40,7 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
   const [BGColor, setBGColor] = useState('');
   // Caret Start
   const [compText, setCompText] = useState('');
+  const [compLink, setCompLink] = useState('');
   const [cssClasses, setCssClasses] = useState('');
   // Caret End
   const [compWidth, setCompWidth] = useState('');
@@ -58,10 +59,10 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
       if (configTarget.child && element.childId === configTarget.child.id) {
         attributes = element.attributes;
         setCompText(attributes.text ? attributes.text : '');
+        setCompLink(attributes.link ? attributes.link : '');
         setCssClasses(attributes.cssClasses ? attributes.cssClasses : '');
       }
     }
-    console.log('Canvas Element Detail: ', configTarget.child);
     // Caret End
     const style = configTarget.child
       ? configTarget.child.style
@@ -111,6 +112,9 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
       case 'compText':
         setCompText(inputVal);
         break;
+      case 'compLink':
+        setCompLink(inputVal);
+        break;
       case 'cssClasses':
         setCssClasses(inputVal);
         break;
@@ -220,6 +224,7 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
     // Caret
     const attributesObj: any = {};
     if (compText !== '') attributesObj.compText = compText;
+    if (compLink !== '') attributesObj.compLink = compLink;
     if (cssClasses !== '') attributesObj.cssClasses = cssClasses;
 
     dispatch({
@@ -552,6 +557,34 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
               </FormControl>
             </div>
           </div>
+          <div className={classes.configRow}>
+            <div
+              className={
+                isThemeLight
+                  ? `${classes.configType} ${classes.lightThemeFontColor}`
+                  : `${classes.configType} ${classes.darkThemeFontColor}`
+              }
+            >
+              <h3>Link:</h3>
+            </div>
+            <div className={classes.configValue}>
+              <FormControl variant="filled" className={classes.formControl}>
+                <TextField
+                  variant="filled"
+                  name="compLink"
+                  className={classes.select}
+                  inputProps={{
+                    className: isThemeLight
+                      ? `${classes.selectInput} ${classes.lightThemeFontColor}`
+                      : `${classes.selectInput} ${classes.darkThemeFontColor}`
+                  }}
+                  value={compLink}
+                  onChange={handleChange}
+                  placeholder="Text"
+                />
+              </FormControl>
+            </div>
+          </div>
           <div className={classes.configRow}>
             <div
               className={

app/src/helperFunctions/generateCode.ts

@@ -101,7 +101,9 @@ const generateUnformattedCode = (
   // function to dynamically generate a complete html (& also other library type) elements
   const elementGenerator = (childElement: object, level: number = 2) => {
     let innerText = '';
+    let activeLink = '';
     if (childElement.attributes && childElement.attributes.compText) innerText = childElement.attributes.compText;
+    if (childElement.attributes && childElement.attributes.compLink) activeLink = childElement.attributes.compLink;
 
     const tabSpacer = (level: number) => {
       let tabs = ''
@@ -122,9 +124,9 @@ const generateUnformattedCode = (
     childElement.tag === 'li';
 
     if (childElement.tag === 'img') {
-      return `${levelSpacer(level, 5)}<${childElement.tag} src="" ${elementTagDetails(childElement)}/>${levelSpacer(2, (3 + level))}`;
+      return `${levelSpacer(level, 5)}<${childElement.tag} src=${activeLink} ${elementTagDetails(childElement)}/>${levelSpacer(2, (3 + level))}`;
     } else if (childElement.tag === 'a') {
-      return `${levelSpacer(level, 5)}<${childElement.tag} href=""${elementTagDetails(childElement)}>${innerText}</${childElement.tag}>${levelSpacer(2, (3 + level))}`;
+      return `${levelSpacer(level, 5)}<${childElement.tag} href=${activeLink} ${elementTagDetails(childElement)}>${innerText}</${childElement.tag}>${levelSpacer(2, (3 + level))}`;
     } else if (childElement.tag === 'input') {
       return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails(childElement)}></${childElement.tag}>${levelSpacer(2, (3 + level))}`;
     } else if (nestable) {