Initial implementation of grid data params

per #112
AdobeXD · May 6, 2021 · b212af7 · b212af7
1 parent c6b6ba4
commit b212af7
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 8 deletions.
diff --git a/src/core/nodes/grid.js b/src/core/nodes/grid.js
@@ -14,11 +14,11 @@ const xd = require("scenegraph");
 const $ = require("../../utils/utils");
 const NodeUtils = require("../../utils/nodeutils");
 const { LayoutType } = require("../../utils/layoututils");
-const { getString, getAssetImage } = require("../../utils/exportutils");
+const { getString, getAssetImage, DartType } = require("../../utils/exportutils");
 
 const { AbstractNode } = require("./abstractnode");
 const PropType = require("../proptype");
-
+ 
 class Grid extends AbstractNode {
 	static create(xdNode, ctx) {
 		if (xdNode instanceof xd.RepeatGrid) {
@@ -29,6 +29,7 @@ class Grid extends AbstractNode {
 	constructor(xdNode, ctx) {
 		super(xdNode, ctx);
 		this.item = null;
+		ctx.addParam(this.addParam("data", NodeUtils.getProp(xdNode, PropType.DATA_PARAM_NAME), DartType.GRID_DATA, "const []"));
 	}
 
 	_serialize(ctx) {
@@ -62,15 +63,22 @@ class Grid extends AbstractNode {
 		let params = this._getParams(ctx);
 		let l=o.children.length, childData = new Array(l).fill(""), paramVarStr = "";
 		let ns = !!NodeUtils.getProp(xd.root, PropType.NULL_SAFE) ? "!" : "";
-		
+
 		for (let n in params) {
 			let vals = params[n];
 			paramVarStr += `final ${n} = ${Grid.mapParamName}['${n}']${ns};\n`;
 			for (let i=0; i<l; i++) {
 				childData[i] += `'${n}': ${vals[i]}, `;
 			}
 		}
-		let childDataStr = `{${childData.join("}, {")}}`;
+		let childDataStr = `[{${childData.join("}, {")}}]`;
+
+		let dataParamName = NodeUtils.getProp(o, PropType.DATA_PARAM_NAME);
+		if (dataParamName) {
+			childDataStr = dataParamName;
+		}
+
+
 		let itemStr = item.serialize(ctx);
 
 		let xSpacing = Math.max(0, o.paddingX), ySpacing = Math.max(0, o.paddingY);
@@ -89,13 +97,13 @@ class Grid extends AbstractNode {
 				`mainAxisSpacing: ${ySpacing}, crossAxisSpacing: ${xSpacing}, ` +
 				`crossAxisCount: ${colCount}, ` +
 				`childAspectRatio: ${aspectRatio}, ` +
-				`children: [${childDataStr}].map((${Grid.mapParamName}) { ${paramVarStr} return ${itemStr}; }).toList(),` +
+				`children: ${childDataStr}.map((${Grid.mapParamName}) { ${paramVarStr} return ${itemStr}; }).toList(),` +
 			')'
 			:
 			`SingleChildScrollView(child: Wrap(` +
 				'alignment: WrapAlignment.center, ' +
 				`spacing: ${xSpacing}, runSpacing: ${ySpacing}, ` +
-				`children: [${childDataStr}].map((${Grid.mapParamName}) { ${paramVarStr} return ${itemStr}; }).toList(),` +
+				`children: ${childDataStr}.map((${Grid.mapParamName}) { ${paramVarStr} return ${itemStr}; }).toList(),` +
 			'), )';
 
 		return str;

diff --git a/src/core/nodetype.js b/src/core/nodetype.js
@@ -14,7 +14,8 @@ const xd = require("scenegraph");
 function getType(xdNode) {
     if (xdNode instanceof xd.Text) { return exports.TEXT; }
     if (xdNode instanceof xd.Group || xdNode instanceof xd.ScrollableGroup) { return exports.GROUP; }
-    if (xdNode instanceof xd.SymbolInstance || xdNode instanceof xd.Artboard) {
+    if (xdNode instanceof xd.RepeatGrid) { return exports.GRID; }
+	if (xdNode instanceof xd.SymbolInstance || xdNode instanceof xd.Artboard) {
         return exports.WIDGET;
     }
     if (xdNode instanceof xd.Path || xdNode instanceof xd.Polygon ||
@@ -31,6 +32,7 @@ function getXDLabel(xdNode) {
 	// not necessarily the ideal location for this method, but it's good to maintain proximity to the other similar methods.
 	if (xdNode instanceof xd.Text) { return "text"; }
     if (xdNode instanceof xd.Group || xdNode instanceof xd.ScrollableGroup) { return "group"; }
+	if (xdNode instanceof xd.RepeatGrid) { return "grid"; }
     if (xdNode instanceof xd.SymbolInstance) { return "component"; }
     if (xdNode instanceof xd.Artboard) { return "artboard"; }
     if (xdNode instanceof xd.Path || xdNode instanceof xd.Polygon ||
@@ -53,3 +55,4 @@ exports.GROUP = "group";
 exports.WIDGET = "widget";
 exports.SHAPE = "shape";
 exports.ROOT = "root";
+exports.GRID = "grid";
diff --git a/src/core/proptype.js b/src/core/proptype.js
@@ -44,6 +44,9 @@ module.exports = Object.freeze({
 	BUILD_METHOD_NAME: "buildMethodName",
 	CUSTOM_CODE: "customCode",
 
+	// Grid
+	DATA_PARAM_NAME: "dataParamName",
+
 	// Shared
 	FLATTEN_TO_IMAGE: "flattenToImage",
 });

diff --git a/src/ui/assets/icon-info.png b/src/ui/assets/icon-info.png
diff --git a/src/ui/settings.jsx b/src/ui/settings.jsx
@@ -22,10 +22,12 @@ const NodeType = require("../core/nodetype");
 const PropType = require("../core/proptype");
 const { DEFAULT_CLASS_PREFIX, DEFAULT_COLORS_CLASS_NAME, DEFAULT_CHAR_STYLES_CLASS_NAME } = require("../core/constants");
 const { DefaultPath } = require("../core/project");
+const Alert = require("./alert");
+
 const iconFolder = require('./assets/icon-folder.png');
 const iconEdit = require('./assets/icon-edit.png');
 const iconWarning = require('./assets/icon-warning.png');
-const Alert = require("./alert");
+const iconInfo = require('./assets/icon-info.png');
 
 const { ExportMode, ExportModeOptions, DEFAULT_CUSTOM_CODE } = require('../core/constants');
 
@@ -42,6 +44,8 @@ function Settings(props) {
             return <TextSettings key={props.node.guid} {...props} />;
         case NodeType.GROUP:
             return <GroupSettings key={props.node.guid} {...props} />;
+		case NodeType.GRID:
+            return <GridSettings key={props.node.guid} {...props} />;
         case NodeType.WIDGET:
             return <WidgetSettings key={props.node.guid} {...props} />;
         case NodeType.SHAPE:
@@ -290,6 +294,40 @@ class WidgetSettings extends Component {
     }
 }
 
+class GridSettings extends Component {
+    constructor(props) {
+        super(props);
+        initInputHandlers(this);
+		this.state = props.node.pluginData || {};
+    }
+
+    shouldComponentUpdate() {
+		// this is necessary to react to Undo
+        this.setState(NodeUtils.getState(this.props.node));
+    }
+
+    render(_, state) {
+		let hasParam = !!state[PropType.DATA_PARAM_NAME];
+        return (
+            <div class='settings-container'>
+
+				<TextInputWithLabel
+                    name={PropType.DATA_PARAM_NAME}
+                    label={"DATA PARAMETER"}
+                    state={state}
+                    handleInput={this.handleInput}
+                    onBlur={this.handleBlurAsClassName} />
+
+				{
+				!hasParam ? null :
+					<p class="note"><img src={iconInfo.default}/> data parameter default value includes only the first item.</p>
+				}
+
+            </div>
+        );
+    }
+}
+
 class ShapeSettings extends Component {
     constructor(props) {
         super(props);

diff --git a/src/ui/styles.styl b/src/ui/styles.styl
@@ -122,6 +122,7 @@ a {
     flex-direction: column;
     justify-content: flex-start;
     align-items: start;
+	overflow-x: hidden;
 
     .project-row, .customcode-row {
         display: flex;
@@ -220,6 +221,22 @@ a {
 			margin-top: -3px;
 		}
     }
+
+	p.note {
+		background: #eaeaea;
+		padding: 4px;
+		font-size: 10px;
+		margin: 4px 0;
+		width: 100%;
+		letter-spacing: 0.05em;
+
+		img {
+			height: 1.1em;
+			margin-bottom: -0.25em;
+			margin-top: -0.2;
+			opacity: 0.5;
+		}
+	}
 }
 
 .results-container {

diff --git a/src/utils/exportutils.js b/src/utils/exportutils.js
@@ -23,6 +23,7 @@ exports.DartType = Object.freeze({
 	STRING: "String",
 	TAP_CB: "VoidCallback",
 	BUILDER: "WidgetBuilder",
+	GRID_DATA: "List<Map<String, dynamic>>"
 });
 
 function getColor(color, opacity=1.0) {