auto-views - npm Package Compare versions

Comparing version 0.0.14 to 0.0.15

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

@@ -9,2 +9,3 @@ /// <reference types="react" />
     formData: any;
+    onChange?: React.EventHandler<any> | undefined;
 }
@@ -21,4 +22,6 @@ export declare enum DisplayMode {
     render(): JSX.Element;
+    private onEntryChange;
+    private validateValues;
     private renderChildren();
 }
-export declare function makeFormEntry(formData: any, displayMode: DisplayMode): (property: SchemaProperty, key: string) => JSX.Element;
+export declare function makeFormEntry(formData: any, displayMode: DisplayMode, onEntryChange: (key: string, e: React.FormEvent<HTMLDivElement>) => void): (property: SchemaProperty, key: string) => JSX.Element;

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

@@ -44,3 +44,20 @@ "use strict";
     function AutoForm(props) {
-        return _super.call(this, props) || this;
+        var _this = _super.call(this, props) || this;
+        _this.onEntryChange = function (key, e) {
+            if (e.target && _this.props.onChange) {
+                var newValues = (_a = {},
+                    _a[key] = e.target.value,
+                    _a);
+                if (_this.validateValues(newValues)) {
+                    _this.props.onChange({ target: {
+                            value: newValues
+                        } });
+                }
+            }
+            var _a;
+        };
+        _this.validateValues = function (values) {
+            return _this.props.repo.isValid(values, _this.props.schemaId);
+        };
+        return _this;
     }
@@ -56,3 +73,3 @@ AutoForm.prototype.render = function () {
         else {
-            return this.props.repo.mapOverProperties(this.props.schemaId, makeFormEntry(this.props.formData, this.props.displayMode));
+            return this.props.repo.mapOverProperties(this.props.schemaId, makeFormEntry(this.props.formData, this.props.displayMode, this.onEntryChange));
         }
@@ -63,5 +80,5 @@ };
 exports.AutoForm = AutoForm;
-function makeFormEntry(formData, displayMode) {
+function makeFormEntry(formData, displayMode, onEntryChange) {
     return function (property, key) {
-        return React.createElement(form_entry_1.Entry, { "data-automation-id": form_entry_1.entrySelector(key), entryKey: key, title: property.title, displayMode: displayMode, type: property.type, value: formData[key] });
+        return React.createElement(form_entry_1.Entry, { "data-automation-id": form_entry_1.entrySelector(key), entryKey: key, title: property.title, displayMode: displayMode, type: property.type, value: formData[key], onChange: function (e) { return onEntryChange(key, e); } });
     };
@@ -68,0 +85,0 @@ }

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

 /// <reference types="react" />
 import * as React from 'react';
 import { DisplayMode } from "./auto-form";
+export interface EntryEventTarget extends EventTarget {
+    value: any;
+}
+export interface EntryFormEvent<T> extends React.FormEvent<T> {
+    target: EntryEventTarget;
+}
 export declare function entrySelector(key: string): string;
-export interface EntryProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface EntryProps {
     entryKey: string;
@@ -11,5 +17,8 @@ title: string;
     value?: any;
+    onChange?: React.EventHandler<any>;
+    valid?: boolean;
 }
 export declare class Entry extends React.Component<EntryProps, {}> {
+    private onChange;
     render(): JSX.Element;
 }

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

@@ -30,3 +30,19 @@ "use strict";
     function Entry() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.onChange = function (e) {
+            var newValue;
+            if (_this.props.type == 'number') {
+                newValue = e.currentTarget.valueAsNumber;
+            }
+            else {
+                newValue = e.currentTarget.value;
+            }
+            if (e.target && _this.props.onChange) {
+                e.stopPropagation();
+                _this.props.onChange({ target: {
+                        value: newValue
+                    } });
+            }
+        };
+        return _this;
     }
@@ -37,6 +53,6 @@ Entry.prototype.render = function () {
             _a);
-        childProps = Object.assign(childProps, this.props.value != undefined ? { value: this.props.value } : {});
+        childProps = Object.assign(childProps, this.props.value != undefined ? { value: this.props.value } : {}, (this.props.valid) ? {} : { style: { borderColor: 'red' } });
         var comp;
         if (this.props.displayMode == auto_form_1.DisplayMode.Edit) {
-            comp = React.createElement("input", __assign({}, childProps, { type: this.props.type }));
+            comp = React.createElement("input", __assign({}, childProps, { type: this.props.type, onChange: this.onChange }));
         }
@@ -43,0 +59,0 @@ else {

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

@@ -28,3 +28,3 @@ /// <reference types="react" />
     getController(controllerID: string): React.ComponentType | null;
-    validate(json: any, schemaId: string): boolean;
+    isValid(json: any, schemaId: string): boolean;
 }

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

@@ -34,3 +34,3 @@ "use strict";
     };
-    SchemaRepository.prototype.validate = function (json, schemaId) {
+    SchemaRepository.prototype.isValid = function (json, schemaId) {
         return this.validator.validate(json, this.getSchema(schemaId)).valid;
@@ -37,0 +37,0 @@ };

package.json

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

src/components/auto-form/schema-repo.ts

@@ -48,5 +48,5 @@ import {Validator} from 'jsonschema';
 
-    validate(json: any, schemaId: string) {
+    isValid(json: any, schemaId: string) {
         return this.validator.validate(json,this.getSchema(schemaId)).valid;
     }
 }

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

50850

increased by9.52%

Lines of code

648

increased by14.89%

No dependency changes