Refactor react export

IBM · Jan 21, 2022 · 8094388 · 8094388
1 parent a01098e
commit 8094388
Show file tree

Hide file tree

Showing 12 changed files with 183 additions and 133 deletions.
diff --git a/src/fragment-components/a-button.tsx b/src/fragment-components/a-button.tsx
@@ -9,6 +9,7 @@ import { AComponent, ComponentInfo } from './a-component';
 import { ComponentCssClassSelector } from '../components/css-class-selector';
 
 import image from './../assets/component-icons/button.svg';
+import { classNamesFromComponentObj } from '../utils/fragment-tools';
 
 export const AButtonStyleUI = ({selectedComponent, setComponent}: any) => {
 	const kindItems = [
@@ -69,7 +70,7 @@ export const AButton = ({
 export const componentInfo: ComponentInfo = {
 	component: AButton,
 	styleUI: AButtonStyleUI,
-	render: ({componentObj, select, remove, selected}) => <AButton
+	render: ({ componentObj, select, remove, selected }) => <AButton
 		componentObj={componentObj}
 		select={select}
 		remove={remove}
@@ -83,5 +84,13 @@ export const componentInfo: ComponentInfo = {
 		kind: 'primary',
 		text: 'Button'
 	},
-	image
+	image,
+	codeExport: {
+		react: {
+			imports: ['Button'],
+			code: ({ json }) => {
+				return `<Button${json.kind && ` kind="${json.kind}"`} ${classNamesFromComponentObj(json)}>${json.text}</Button>`;
+			}
+		}
+	}
 };
diff --git a/src/fragment-components/a-checkbox.tsx b/src/fragment-components/a-checkbox.tsx
@@ -6,6 +6,7 @@ import { ComponentCssClassSelector } from '../components/css-class-selector';
 import { ComponentInfo } from '.';
 
 import image from './../assets/component-icons/checkbox.svg';
+import { classNamesFromComponentObj } from '../utils/fragment-tools';
 
 export const ACheckboxStyleUI = ({selectedComponent, setComponent}: any) => {
 	return <>
@@ -68,5 +69,24 @@ export const componentInfo: ComponentInfo = {
 		type: 'checkbox',
 		label: 'Checkbox'
 	},
-	image
+	image,
+	codeExport: {
+		react: {
+			imports: ['Checkbox'],
+			code: ({json}) => {
+				return `<Checkbox
+					labelText="${json.label}"
+					name="${json.codeContext?.name}"
+					id="${json.codeContext?.name}"
+					checked={state["${json.codeContext?.name}"]?.checked}
+					${classNamesFromComponentObj(json)}
+					onChange={(checked) => handleInputChange({
+						target: {
+							name: "${json.codeContext?.name}",
+							value: checked
+						}
+					})} />`;
+			}
+		}
+	}
 };
diff --git a/src/fragment-components/a-column.tsx b/src/fragment-components/a-column.tsx
@@ -249,20 +249,27 @@ export const AColumn = ({
 export const componentInfo: ComponentInfo = {
 	component: AColumn,
 	styleUI: AColumnStyleUI,
-	render: ({componentObj, select, remove, selected, onDragOver, onDrop, renderComponents}) => <AColumn
+	render: ({ componentObj, select, remove, selected, onDragOver, onDrop, renderComponents }) => <AColumn
 		componentObj={componentObj}
 		select={select}
 		remove={remove}
 		selected={selected}
 		onDragOver={onDragOver}
 		onDrop={onDrop}>
-			{ componentObj.items.map((column: any) => (
+			{componentObj.items.map((column: any) => (
 				renderComponents(column)
 			))}
 	</AColumn>,
 	keywords: ['column', 'grid'],
 	name: 'Column',
 	hideFromElementsPane: true,
 	defaultComponentObj: undefined,
-	image: undefined
+	image: undefined,
+	codeExport: {
+		react: {
+			imports: ['Column'],
+			isNotDirectExport: true,
+			code: (_) => ''
+		}
+	}
 };
diff --git a/src/fragment-components/a-component.tsx b/src/fragment-components/a-component.tsx
@@ -56,7 +56,15 @@ export interface ComponentInfo {
 	styleUI: any,
 	codeUI?: any,
 	render?: (props: ComponentInfoRenderProps) => any,
-	hideFromElementsPane?: boolean
+	hideFromElementsPane?: boolean,
+	codeExport: {
+		angular?: {},
+		react: {
+			imports: string[],
+			isNotDirectExport?: boolean,
+			code: (props: {json: any, jsonToTemplate: (json: any) => string}) => string
+		}
+	}
 }
 
 export interface ComponentInfoRenderProps {

diff --git a/src/fragment-components/a-grid.tsx b/src/fragment-components/a-grid.tsx
@@ -6,6 +6,7 @@ import { ComponentCssClassSelector } from '../components/css-class-selector';
 import { ComponentInfo } from '.';
 
 import image from './../assets/component-icons/grid.svg';
+import { classNamesFromComponentObj } from '../utils/fragment-tools';
 
 export const AGridStyleUI = ({selectedComponent, setComponent}: any) => {
 	return <>
@@ -72,6 +73,35 @@ export const AGrid = ({
 	);
 };
 
+const getCellAttributeString = (cell: any, sizeShort: string, sizeLong: string) => {
+	const span = cell[`${sizeLong}Span`];
+	const offset = cell[`${sizeLong}Offset`];
+
+	if (!span && ! offset) {
+		return '';
+	}
+
+	const spanString = `span: ${span}`;
+	const offsetString = `offset: ${offset}`;
+
+	const spanAndOffset = `{
+		${span ? spanString : ''}${span && offset ? ',' : ''}
+		${offset ? offsetString : ''}
+	}`;
+
+	return `${sizeShort}={${!offset ? span : spanAndOffset}}`;
+};
+
+const getCellParamsString = (cell: any) => {
+	return `
+		${getCellAttributeString(cell, 'sm', 'small')}
+		${getCellAttributeString(cell, 'md', 'medium')}
+		${getCellAttributeString(cell, 'lg', 'large')}
+		${getCellAttributeString(cell, 'xlg', 'xLarge')}
+		${getCellAttributeString(cell, 'max', 'max')}
+	`;
+};
+
 export const componentInfo: ComponentInfo = {
 	component: AGrid,
 	styleUI: AGridStyleUI,
@@ -94,5 +124,19 @@ export const componentInfo: ComponentInfo = {
 			}
 		]
 	},
-	image
+	image,
+	codeExport: {
+		react: {
+			imports: ['Grid', 'Column', 'Row'],
+			code: ({json, jsonToTemplate}) => {
+				return `<Grid ${classNamesFromComponentObj(json)}>
+					${json.items.map((row: any) => `<Row ${classNamesFromComponentObj(row)}>
+						${row.items.map((cell: any) => `<Column ${getCellParamsString(cell)} ${classNamesFromComponentObj(cell)}>
+								${jsonToTemplate(cell)}
+						</Column>`).join('\n')}
+					</Row>`).join('\n')}
+				</Grid>`;
+			}
+		}
+	}
 };
diff --git a/src/fragment-components/a-row.tsx b/src/fragment-components/a-row.tsx
@@ -123,5 +123,12 @@ export const componentInfo: ComponentInfo = {
 	name: 'Row',
 	hideFromElementsPane: true,
 	defaultComponentObj: undefined,
-	image: undefined
+	image: undefined,
+	codeExport: {
+		react: {
+			imports: ['Row'],
+			isNotDirectExport: true,
+			code: (_) => ''
+		}
+	}
 };
diff --git a/src/fragment-components/a-searchinput.tsx b/src/fragment-components/a-searchinput.tsx
@@ -6,6 +6,7 @@ import { ComponentCssClassSelector } from '../components/css-class-selector';
 import { ComponentInfo } from '.';
 
 import image from './../assets/component-icons/search.svg';
+import { classNamesFromComponentObj } from '../utils/fragment-tools';
 
 export const ASearchInputStyleUI = ({selectedComponent, setComponent}: any) => {
 	const sizeItems = [
@@ -110,5 +111,19 @@ export const componentInfo: ComponentInfo = {
 		placeholder: 'Search',
 		inputSize: 'lg'
 	},
-	image
+	image,
+	codeExport: {
+		react: {
+			imports: ['Search'],
+			code: ({json}) => {
+				return `<Search
+					labelText="${json.label}"
+					name="${json.codeContext?.name}"
+					placeholder="${json.placeholder}"
+					value={state["${json.codeContext?.name}"]}
+					${classNamesFromComponentObj(json)}
+					onChange={handleInputChange} />`
+			}
+		}
+	}
 };
diff --git a/src/fragment-components/a-text.tsx b/src/fragment-components/a-text.tsx
@@ -5,6 +5,7 @@ import { ComponentCssClassSelector } from '../components/css-class-selector';
 import { ComponentInfo } from '.';
 
 import image from './../assets/component-icons/text.svg';
+import { classNamesFromComponentObj } from '../utils/fragment-tools';
 
 export const ATextStyleUI = ({selectedComponent, setComponent}: any) => {
 	return <>
@@ -53,5 +54,16 @@ export const componentInfo: ComponentInfo = {
 		type: 'text',
 		text: 'Text'
 	},
-	image
+	image,
+	codeExport: {
+		react: {
+			imports: [],
+			code: ({json}) => {
+				if (json.cssClasses) {
+					return `<span ${classNamesFromComponentObj(json)}>${json.text}</span>`;
+				}
+				return json.text;
+			}
+		}
+	}
 };
diff --git a/src/fragment-components/a-textarea.tsx b/src/fragment-components/a-textarea.tsx
@@ -5,6 +5,7 @@ import { ComponentCssClassSelector } from '../components/css-class-selector';
 import { ComponentInfo } from '.';
 
 import image from './../assets/component-icons/text-area.svg';
+import { classNamesFromComponentObj } from '../utils/fragment-tools';
 
 export const ATextAreaStyleUI = ({selectedComponent, setComponent}: any) => {
 	return <>
@@ -89,5 +90,20 @@ export const componentInfo: ComponentInfo = {
 		placeholder: 'Text area placeholder',
 		helperText: 'Helper text'
 	},
-	image
+	image,
+	codeExport: {
+		react: {
+			imports: ['TextArea'],
+			code: ({json}) => {
+				return `<TextArea
+					labelText="${json.label}"
+					name="${json.codeContext?.name}"
+					helperText="${json.helperText}"
+					placeholder="${json.placeholder}"
+					value={state["${json.codeContext?.name}"]}
+					${classNamesFromComponentObj(json)}
+					onChange={handleInputChange} />`;
+			}
+		}
+	}
 };
diff --git a/src/fragment-components/a-textinput.tsx b/src/fragment-components/a-textinput.tsx
@@ -6,6 +6,7 @@ import { ComponentCssClassSelector } from '../components/css-class-selector';
 import { ComponentInfo } from '.';
 
 import image from './../assets/component-icons/text-input.svg';
+import { classNamesFromComponentObj } from '../utils/fragment-tools';
 
 export const ATextInputStyleUI = ({selectedComponent, setComponent}: any) => {
 	const typeItems = [
@@ -120,5 +121,20 @@ export const componentInfo: ComponentInfo = {
 		helperText: 'Helper text',
 		inputType: 'text'
 	},
-	image
+	image,
+	codeExport: {
+		react: {
+			imports: ['TextInput'],
+			code: ({json}) => {
+				return `<TextInput
+					labelText="${json.label}"
+					name="${json.codeContext?.name}"
+					helperText="${json.helperText}"
+					placeholder="${json.placeholder}"
+					value={state["${json.codeContext?.name}"]}
+					${classNamesFromComponentObj(json)}
+					onChange={handleInputChange} />`;
+			}
+		}
+	}
 };