auto-views - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

docs/auto-form.md

@@ -71,2 +71,3 @@
 }
+
 // applies to the title field if its empty
@@ -73,0 +74,0 @@

lib/components/auto-form/auto-form.d.ts

 /// <reference types="react" />
 import * as React from 'react';
+import { SchemaRepository } from "./schema-repo";
 export interface AutoFormProps extends React.HTMLAttributes<HTMLFormElement> {
@@ -7,2 +8,3 @@ repo: SchemaRepository;
     displayMode: DisplayMode;
+    formData: any;
 }
@@ -13,22 +15,10 @@ export declare enum DisplayMode {
 }
-export interface AutoFormSchema {
-    id: string;
-    properties: {
-        [key: string]: SchemaProperty;
-    };
-}
-export interface SchemaProperty {
-    title: string;
-}
-export declare class SchemaRepository {
-    schemas: {
-        [key: string]: AutoFormSchema;
-    };
-    addSchema(schema: AutoFormSchema): void;
-    getSchema(id: string): AutoFormSchema;
-    clear(): void;
-}
 export declare function newSchemaRepository(): SchemaRepository;
+export declare function fieldValueSelector(key: string): string;
+export declare function fieldLabelSelector(key: string): string;
 export declare class AutoForm extends React.Component<AutoFormProps, {}> {
+    constructor(props: AutoFormProps);
     render(): JSX.Element;
+    private renderChildren();
+    private makeComponent(property, key);
 }

lib/components/auto-form/auto-form.js

@@ -22,2 +22,3 @@ "use strict";
 var React = require("react");
+var schema_repo_1 = require("./schema-repo");
 var DisplayMode;
@@ -28,50 +29,51 @@ (function (DisplayMode) {
 })(DisplayMode = exports.DisplayMode || (exports.DisplayMode = {}));
-var SchemaRepository = (function () {
-    function SchemaRepository() {
-        this.schemas = {};
-    }
-    SchemaRepository.prototype.addSchema = function (schema) {
-        this.schemas[schema.id] = schema;
-    };
-    SchemaRepository.prototype.getSchema = function (id) {
-        return this.schemas[id];
-    };
-    SchemaRepository.prototype.clear = function () {
-        this.schemas = {};
-    };
-    return SchemaRepository;
-}());
-exports.SchemaRepository = SchemaRepository;
 function newSchemaRepository() {
-    return new SchemaRepository();
+    return new schema_repo_1.SchemaRepository();
 }
 exports.newSchemaRepository = newSchemaRepository;
+function fieldValueSelector(key) {
+    return "form_value_" + key;
+}
+exports.fieldValueSelector = fieldValueSelector;
+function fieldLabelSelector(key) {
+    return "form_label_" + key;
+}
+exports.fieldLabelSelector = fieldLabelSelector;
 var AutoForm = (function (_super) {
     __extends(AutoForm, _super);
-    function AutoForm() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function AutoForm(props) {
+        var _this = _super.call(this, props) || this;
+        _this.makeComponent = _this.makeComponent.bind(_this);
+        return _this;
     }
     AutoForm.prototype.render = function () {
-        var _this = this;
-        var children = [];
+        var children = this.renderChildren();
+        return React.createElement("form", __assign({}, this.props), children);
+    };
+    AutoForm.prototype.renderChildren = function () {
         if (!this.props.repo) {
-            children.push(React.createElement("label", { "data-automation-id": "errMessage" }, "can't render form - missing properties"));
+            return [React.createElement("label", { "data-automation-id": "errMessage" }, "can't render form - missing properties")];
         }
         else {
-            var schemaProperties_1 = this.props.repo.getSchema(this.props.schemaId).properties;
-            children = Object.keys(schemaProperties_1).map(function (property) {
-                var comp;
-                if (_this.props.displayMode == DisplayMode.Edit) {
-                    comp = React.createElement("input", { "data-automation-id": "input_" + property });
-                }
-                else {
-                    comp = React.createElement("label", { "data-automation-id": "input_" + property });
-                }
-                return React.createElement("div", null,
-                    React.createElement("label", { "data-automation-id": "label_" + property }, schemaProperties_1[property].title),
-                    comp);
-            });
+            return this.props.repo.mapOverProperties(this.props.schemaId, this.makeComponent);
         }
-        return React.createElement("form", __assign({}, this.props), children);
     };
+    AutoForm.prototype.makeComponent = function (property, key) {
+        var formEntryProps = (_a = {
+                type: property.type
+            },
+            _a['data-automation-id'] = fieldValueSelector(key),
+            _a);
+        var value = this.props.formData[key];
+        if (value) {
+            formEntryProps['value'] = value;
+        }
+        var comp = (this.props.displayMode == DisplayMode.Edit) ?
+            React.createElement("input", __assign({}, formEntryProps)) :
+            React.createElement("label", __assign({}, formEntryProps));
+        return React.createElement("div", null,
+            React.createElement("label", { "data-automation-id": fieldLabelSelector(key) }, property.title),
+            comp);
+        var _a;
+    };
     return AutoForm;
@@ -78,0 +80,0 @@ }(React.Component));

package.json

 {
   "name": "auto-views",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Common, fully-tested, strictly-typed, Wix-styled, auto views library",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

README.md

@@ -328,4 +328,28 @@ # Auto-Views component family
 ![image](https://user-images.githubusercontent.com/2289769/27994104-48742f20-64bf-11e7-8b34-87380415571c.png)
+* icon string, unique id of an icon from the repo
 
+```json
 
+{
+  "$id":"http://example.com/user",
+  "title":"User",
+  "type":"object",
+  "properties":{
+    "fName":{
+        "type":"string"
+      }
+    },
+    "location":{
+      "type":"string",
+      "icon":"locationPin"
+    }
+  }
+}
+
+
+```
+![image](https://user-images.githubusercontent.com/2289769/28169281-7d4c6af4-67ea-11e7-8958-4d801ddbf55a.png)
+
+
+
 #### TBD: Extra views for type
@@ -332,0 +356,0 @@ because the schemas are used to create GUI, it is sometimes usefull to define extra schemas  for the same dataType (views), this should be used only for differnt views and not apply any different validation.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

199510

increased by1.8%

Number of package files

34

increased by13.33%

Lines of code

453

increased by14.97%

Number of lines in readme file

490

increased by5.15%

No dependency changes