goblin-gadgets 4.0.0 → 4.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goblin-gadgets",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "description": "Gadgets library",
   "main": "./builders/builders.js",
   "scripts": {
@@ -17,7 +17,7 @@
   "dependencies": {
     "immutable": "4.0.0-rc.14",
     "xcraft-core-goblin": "^5.0.0",
-    "xcraft-core-stones": "^0.3.0",
+    "xcraft-core-stones": "^0.4.0",
     "xcraft-core-utils": "^4.0.0",
     "goblin-nabu": "^2.0.0",
     "goblin-toolbox": "^1.0.0",

package/test/code-parser.spec.js

@@ -28,6 +28,14 @@ describe('goblin.gadgets', function () {
       });
     });
 
+    it('parseCode other string', function () {
+      const code = `<Button text='hello "world"'/>`;
+      const res = parseCode(code);
+      assert.deepStrictEqual(res, {
+        text: 'hello "world"',
+      });
+    });
+
     it('parseCode boolean', function () {
       const code = `<Button visibility={true} show={true}/>`;
       const res = parseCode(code);

package/widgets/dynamic-toolbar/widget.js

@@ -19,8 +19,8 @@ class DynamicToolbar extends Widget {
       showToolbar: false,
     };
 
-    this.toolbar = null;
-    this.toolbarButton = null;
+    this.toolbar = React.createRef();
+    this.toolbarButton = React.createRef();
     this.counter = 0;
 
     this.onShowToolbar = this.onShowToolbar.bind(this);
@@ -38,8 +38,9 @@ class DynamicToolbar extends Widget {
   }
 
   onShowToolbar() {
-    if (this.toolbarButton) {
-      const rect = this.toolbarButton.getBoundingClientRect();
+    if (this.toolbarButton.current) {
+      const rect = this.toolbarButton.current.getBoundingClientRect();
+
       this.ToolbarLeft = rect.left;
       this.ToolbarTop = rect.top;
     }
@@ -57,8 +58,9 @@ class DynamicToolbar extends Widget {
 
     let x = e.clientX;
     let y = e.clientY;
-    if (this.toolbar) {
-      const rect = this.toolbar.getBoundingClientRect();
+    if (this.toolbar.current) {
+      const rect = this.toolbar.current.getBoundingClientRect();
+
       const margin = this.props.detectMargin ? this.props.detectMargin : 20;
       if (
         x < rect.left - margin ||
@@ -75,14 +77,13 @@ class DynamicToolbar extends Widget {
   renderHoverButton() {
     const style = this.styles.classNames.hoverButton;
     return (
-      <div className={style}>
+      <div className={style} ref={this.toolbarButton}>
         <Button
           width="24px"
           height="24px"
           kind="dynamic-toolbar-top-left"
           glyph={this.props.glyph || 'solid/ellipsis-h'}
           mouseOver={this.onShowToolbar}
-          ref={(node) => (this.toolbarButton = node)}
         />
       </div>
     );
@@ -106,7 +107,7 @@ class DynamicToolbar extends Widget {
       : this.styles.classNames.boxHidden; // toolbar hidden to left
 
     return (
-      <div className={boxClass} ref={(x) => (this.toolbar = x)}>
+      <div className={boxClass} ref={this.toolbar}>
         {this.props.children}
       </div>
     );

package/widgets/widget-doc-preview/parse-code.js

@@ -6,7 +6,7 @@ module.exports = function parseCode(code) {
   const [_, name, propsStr, children] = matchComponent;
 
   // Match propName, opening brace for propValue and propValue
-  const propsRegex = /\s+(\w+)=(?:("[^"]*")|{(.*?(?=}[ /]))})/g;
+  const propsRegex = /\s+(\w+)=(?:("[^"]*"|'[^']*')|{(.*?(?=}))})/g;
 
   let match;
   const props = {};

package/widgets/wizard/widget.js

@@ -75,7 +75,7 @@ class Wizard extends Form {
   }
 
   getGlobalSettingValue(id) {
-    return this.getModelValue(`.globalSettings.${id}.value`);
+    return this.getBackendState(`${this.props.id}.globalSettings.${id}.value`);
   }
 
   setGlobalSettingValue(id, value) {
@@ -91,21 +91,21 @@ class Wizard extends Form {
   }
 
   get widgets() {
-    return this.getModelValue('.properties');
+    return this.getBackendState(`${this.props.id}.properties`);
   }
 
   get properties() {
-    return this.getModelValue('.properties').get(this.widget);
+    return this.getBackendState(`${this.props.id}.properties`).get(this.widget);
   }
 
   get previewSettings() {
-    return this.getModelValue('.previewSettings').filter(
+    return this.getBackendState(`${this.props.id}.previewSettings`).filter(
       (preview) => preview.size > 0
     );
   }
 
   getPreviewSettingValue(id) {
-    return this.getModelValue(`.previewSettings.${id}.value`);
+    return this.getBackendState(`${this.props.id}.previewSettings.${id}.value`);
   }
 
   setPreviewSettingValue(id, value) {
@@ -225,7 +225,10 @@ class Wizard extends Form {
             width="32px"
             focusable={true}
             onChange={() => {
-              this.setModelValue(model, !this.getModelValue(model));
+              this.setModelValue(
+                model,
+                !this.getBackendState(this.props.id + model)
+              );
             }}
           />
         </Container>