cx 23.4.0 → 23.4.2

package/dist/widgets.js

@@ -7392,6 +7392,7 @@ var ValidationError = /*#__PURE__*/ (function(_Widget) {
 			{
 				className: data.classNames,
 				htmlFor: data.fieldId,
+				style: data.style,
 				children: data.errorMessage
 			},
 			key
@@ -17046,8 +17047,9 @@ var Validator = /*#__PURE__*/ (function(_Field) {
 		return false;
 	};
 
-	_proto.render = function render() {
-		return null;
+	_proto.render = function render(context, instance, key) {
+		if (!instance.state.visited || !instance.data.error) return;
+		return this.renderChildren(context, instance, key);
 	};
 
 	return Validator;

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "23.4.0",
+   "version": "23.4.2",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "main": "index.js",
    "jsnext:main": "src/index.js",

package/src/data/Binding.js

@@ -7,18 +7,8 @@ export class Binding {
    constructor(path) {
       this.path = path;
       this.parts = path.split(".");
-      let body = "return (x";
-      let selector = "x";
-
-      for (let i = 0; i < this.parts.length; i++) {
-         if (this.parts[i][0] >= "0" && this.parts[i][0] <= "9") selector += "[" + this.parts[i] + "]";
-         else selector += "." + this.parts[i];
-
-         if (i + 1 < this.parts.length) body += " && " + selector;
-         else body += " ? " + selector + " : undefined";
-      }
-
-      body += ")";
+      let body = "return x";
+      for (let i = 0; i < this.parts.length; i++) body += '?.["' + this.parts[i] + '"]';
       this.value = new Function("x", body);
    }
 

package/src/data/Binding.spec.js

@@ -1,49 +1,59 @@
-import {Binding} from './Binding';
-import assert from 'assert';
-
-describe('Binding', function() {
-
-    describe('#get()', function () {
-        it('should get value if value is defined', function () {
-            var state = {person: {name: 'Joe'}};
-            var b = Binding.get('person.name');
-            assert.equal(b.value(state), 'Joe');
-        });
-    });
+import { Binding } from "./Binding";
+import assert from "assert";
+
+describe("Binding", function () {
+   describe("#get()", function () {
+      it("should get value if value is defined", function () {
+         var state = { person: { name: "Joe" } };
+         var b = Binding.get("person.name");
+         assert.equal(b.value(state), "Joe");
+      });
 
-    describe('#set()', function () {
+      it("allows non-standard property identifiers", function () {
+         var state = { person: { "@schema": "Person" } };
+         var b = Binding.get("person.@schema");
+         assert.equal(b.value(state), "Person");
+      });
+   });
 
-        it('produces new objects along the binding path', function () {
-            var state = {person: {name: 'Joe'}};
-            var b = Binding.get('person.name');
-            var ns = b.set(state, 'Jack');
-            assert.equal(ns.person.name, 'Jack');
-            assert.notEqual(state, ns);
-            assert.notEqual(state.person, ns.person);
-            assert.notEqual(state.person.name, ns.person.name);
-        });
+   describe("#set()", function () {
+      it("produces new objects along the binding path", function () {
+         var state = { person: { name: "Joe" } };
+         var b = Binding.get("person.name");
+         var ns = b.set(state, "Jack");
+         assert.equal(ns.person.name, "Jack");
+         assert.notEqual(state, ns);
+         assert.notEqual(state.person, ns.person);
+         assert.notEqual(state.person.name, ns.person.name);
+      });
 
-        it('returns same state object if value does not change', function () {
-            var state = {person: {name: 'Joe'}};
-            var b = Binding.get('person.name');
-            var ns = b.set(state, 'Joe');
-            assert.equal(state, ns);
-        });
-    });
+      it("returns same state object if value does not change", function () {
+         var state = { person: { name: "Joe" } };
+         var b = Binding.get("person.name");
+         var ns = b.set(state, "Joe");
+         assert.equal(state, ns);
+      });
 
-   describe('.delete()', function () {
+      it("allows non-standard property identifiers", function () {
+         var state = { person: { "@schema": "Person" } };
+         var b = Binding.get("person.@schema");
+         var ns = b.set(state, "Test");
+         assert.equal(ns.person["@schema"], "Test");
+      });
+   });
 
-      it('correctly removes pointed properties', function () {
-         var state = {person: {name: 'Joe'}};
-         var b = Binding.get('person.name');
+   describe(".delete()", function () {
+      it("correctly removes pointed properties", function () {
+         var state = { person: { name: "Joe" } };
+         var b = Binding.get("person.name");
          var ns = b.delete(state);
-         assert('person' in ns);
-         assert(!('name' in ns.person));
+         assert("person" in ns);
+         assert(!("name" in ns.person));
       });
 
-      it('does not change state if property is non-existent', function () {
-         var state = {person: {name: 'Joe'}};
-         var b = Binding.get('person.name2');
+      it("does not change state if property is non-existent", function () {
+         var state = { person: { name: "Joe" } };
+         var b = Binding.get("person.name2");
          var ns = b.delete(state);
          assert(ns == state);
       });

package/src/data/StructuredSelector.d.ts

@@ -1,4 +1,4 @@
-import { StructuredProp, Record, StructuredSelector as SS } from "../core";
+import { StructuredProp, Record, Selector } from "../core";
 import { View } from "./View";
 
 interface StructuredSelectorConfig {
@@ -11,5 +11,7 @@ export class StructuredSelector {
 
    init(store: View);
 
-   create(memoize?: bool = true): SS;
+   create(memoize?: bool = true): Selector<Record>;
+
+   createStoreSelector(): (store: View) => Record;
 }

package/src/data/createAccessorModelProxy.spec.tsx

@@ -7,6 +7,7 @@ interface Model {
       city: string;
       streetNumber: number;
    };
+   "@crazy": string;
 }
 
 describe("createAccessorModelProxy", () => {
@@ -35,4 +36,9 @@ describe("createAccessorModelProxy", () => {
       assert.strictEqual(streetNumber.nameOf(), "streetNumber");
       assert.strictEqual(city.nameOf(), "city");
    });
+
+   it("allows non-standard property identifiers ", () => {
+      let model = createAccessorModelProxy<Model>();
+      assert.strictEqual(model["@crazy"].nameOf(), "@crazy");
+   });
 });

package/src/widgets/form/ValidationError.js

@@ -1,10 +1,15 @@
-import {Widget, VDOM} from '../../ui/Widget';
+import { Widget, VDOM } from "../../ui/Widget";
 
 export class ValidationError extends Widget {
-
    checkVisible(context, instance, data) {
-      if (data.visible && context.lastFieldId && context.validation && context.validation.errors && context.validation.errors.length > 0) {
-         var lastError = instance.lastError = context.validation.errors[context.validation.errors.length - 1];
+      if (
+         data.visible &&
+         context.lastFieldId &&
+         context.validation &&
+         context.validation.errors &&
+         context.validation.errors.length > 0
+      ) {
+         var lastError = (instance.lastError = context.validation.errors[context.validation.errors.length - 1]);
          return lastError.fieldId == context.lastFieldId && lastError.visited;
       }
 
@@ -12,9 +17,9 @@ export class ValidationError extends Widget {
    }
 
    explore(context, instance) {
-      var {data, lastError} = instance;
-      let c1 = instance.cache('lastErrorMessage', lastError.message);
-      let c2 = instance.cache('lastErrorFieldId', lastError.fieldId);
+      var { data, lastError } = instance;
+      let c1 = instance.cache("lastErrorMessage", lastError.message);
+      let c2 = instance.cache("lastErrorFieldId", lastError.fieldId);
       if (c1 || c2) {
          data.errorMessage = lastError.message;
          data.fieldId = lastError.fieldId;
@@ -24,14 +29,16 @@ export class ValidationError extends Widget {
    }
 
    render(context, instance, key) {
-      var {data} = instance;
-      return <label key={key} className={data.classNames} htmlFor={data.fieldId}>
-         {data.errorMessage}
-      </label>
+      var { data } = instance;
+      return (
+         <label key={key} className={data.classNames} htmlFor={data.fieldId} style={data.style}>
+            {data.errorMessage}
+         </label>
+      );
    }
 }
 
-ValidationError.prototype.baseClass = 'validationerror';
+ValidationError.prototype.baseClass = "validationerror";
 ValidationError.prototype.styled = true;
 
-Widget.alias('validation-error', ValidationError);
+Widget.alias("validation-error", ValidationError);

package/src/widgets/form/Validator.d.ts

@@ -1,6 +1,8 @@
-import * as Cx from '../../core';
-import { FieldProps } from './Field';
+import * as Cx from "../../core";
+import { FieldProps } from "./Field";
 
-interface ValidatorProps extends FieldProps {}
+interface ValidatorProps extends FieldProps {
+   value: Cx.StructuredProp;
+}
 
 export class Validator extends Cx.Widget<ValidatorProps> {}

package/src/widgets/form/Validator.js

@@ -14,7 +14,8 @@ export class Validator extends Field {
       return false;
    }
 
-   render() {
-      return null;
+   render(context, instance, key) {
+      if (!instance.state.visited || !instance.data.error) return;
+      return this.renderChildren(context, instance, key);
    }
 }