@domonda/form - npm Package Compare versions

Comparing version 2.1.6 to 2.2.0

CHANGELOG.md

@@ -6,2 +6,26 @@ # Change Log
 
+# [2.2.0](https://github.com/domonda/domonda-js/compare/@domonda/form@2.1.6...@domonda/form@2.2.0) (2019-10-01)
+
+
+### Bug Fixes
+
+* **FormField:** override existing values with incoming change ([d6e5469](https://github.com/domonda/domonda-js/commit/d6e5469))
+
+
+### Features
+
+* **Form:** introduce `disableOnSubmit` option ([67257d0](https://github.com/domonda/domonda-js/commit/67257d0))
+* introduce `disabled` and `readOnly` states ([b43f21a](https://github.com/domonda/domonda-js/commit/b43f21a))
+* **FormField:** deep equality for changed state ([0c86167](https://github.com/domonda/domonda-js/commit/0c86167))
+
+
+### Performance Improvements
+
+* **FormField:** first check for `disabled` or `readOnly` changes ([cc9c4bf](https://github.com/domonda/domonda-js/commit/cc9c4bf))
+* **FormField:** use plumb `tag`s for filtering ([5c9a0e6](https://github.com/domonda/domonda-js/commit/5c9a0e6))
+
+
+
+
+
 ## [2.1.6](https://github.com/domonda/domonda-js/compare/@domonda/form@2.1.5...@domonda/form@2.1.6) (2019-09-25)
@@ -8,0 +32,0 @@

createForm.js

@@ -32,2 +32,4 @@ "use strict";
         submitError: null,
+        disabled: false,
+        readOnly: false,
     });
@@ -85,3 +87,3 @@ function applyConfig(usingConfig) {
         return __awaiter(this, void 0, void 0, function* () {
-            const { resetOnSuccessfulSubmit, resetOnFailedSubmit, onSubmit } = configRef.current;
+            const { resetOnSuccessfulSubmit, resetOnFailedSubmit, onSubmit, disableOnSubmit, } = configRef.current;
             if (onSubmit) {
@@ -91,3 +93,3 @@ if (event) {
                 }
-                plumb.next(Object.assign(Object.assign({}, plumb.state), { submitting: true, submitError: null }), FormTag_1.FormTag.SUBMIT);
+                plumb.next(Object.assign(Object.assign({}, plumb.state), { submitting: true, submitError: null, disabled: disableOnSubmit ? true : plumb.state.disabled }), FormTag_1.FormTag.SUBMIT);
                 const { fields } = plumb.state;
@@ -102,3 +104,3 @@ const validityMessages = Object.keys(fields).reduce((acc, key) => {
                 if (validityMessages.some((validityMessages) => validityMessages != null)) {
-                    plumb.next(Object.assign(Object.assign({}, plumb.state), { submitting: false }), FormTag_1.FormTag.SUBMIT);
+                    plumb.next(Object.assign(Object.assign({}, plumb.state), { submitting: false, disabled: false }), FormTag_1.FormTag.SUBMIT);
                     return;
@@ -110,3 +112,3 @@ }
                     if (!plumb.disposed) {
-                        plumb.next(Object.assign(Object.assign({}, plumb.state), { submitting: false, values: resetOnSuccessfulSubmit ? plumb.state.defaultValues : plumb.state.values }), FormTag_1.FormTag.SUBMIT);
+                        plumb.next(Object.assign(Object.assign({}, plumb.state), { submitting: false, disabled: disableOnSubmit ? false : plumb.state.disabled, values: resetOnSuccessfulSubmit ? plumb.state.defaultValues : plumb.state.values }), resetOnSuccessfulSubmit ? FormTag_1.FormTag.SUBMIT_WITH_DEFAULT_VALUES_CHANGE : FormTag_1.FormTag.SUBMIT);
                     }
@@ -116,3 +118,3 @@ }
                     if (!plumb.disposed) {
-                        plumb.next(Object.assign(Object.assign({}, plumb.state), { submitting: false, submitError: error, values: resetOnFailedSubmit ? plumb.state.defaultValues : plumb.state.values }), FormTag_1.FormTag.SUBMIT);
+                        plumb.next(Object.assign(Object.assign({}, plumb.state), { submitting: false, submitError: error, disabled: disableOnSubmit ? false : plumb.state.disabled, values: resetOnFailedSubmit ? plumb.state.defaultValues : plumb.state.values }), resetOnFailedSubmit ? FormTag_1.FormTag.SUBMIT_WITH_DEFAULT_VALUES_CHANGE : FormTag_1.FormTag.SUBMIT);
                     }
@@ -119,0 +121,0 @@ }

createFormField.js

@@ -24,3 +24,2 @@ "use strict";
 const setWith_1 = __importDefault(require("lodash/fp/setWith"));
-const clone_1 = __importDefault(require("lodash/fp/clone"));
 const omit_1 = __importDefault(require("lodash/fp/omit"));
@@ -30,3 +29,3 @@ const fast_equals_1 = require("fast-equals");
 function selector(path, state) {
-    const { fields, defaultValues, values } = state;
+    const { fields, defaultValues, values, disabled, readOnly } = state;
     const defaultValue = get_1.default(defaultValues, path);
@@ -41,6 +40,10 @@ const value = get_1.default(values, path);
             validityMessage: null,
+            disabled,
+            readOnly,
         };
     }
     return Object.assign(Object.assign({}, field), { defaultValue,
-        value });
+        value,
+        disabled,
+        readOnly });
 }
@@ -50,2 +53,4 @@ function createFormField(form, path, // [K in keyof FormDefaultValues]
     const { validate, immediateValidate } = config;
+    let disabled = form.state.disabled;
+    let readOnly = form.state.readOnly;
     let defaultValue;
@@ -57,3 +62,3 @@ let value;
         transformer: (selectedState) => {
-            const changed = !fast_equals_1.shallowEqual(selectedState.defaultValue, selectedState.value);
+            const changed = !fast_equals_1.deepEqual(selectedState.defaultValue, selectedState.value);
             let validityMessage = selectedState.validityMessage;
@@ -69,3 +74,3 @@ if (validate && (changed || (immediateValidate && initialTransform))) {
             var { changed, validityMessage } = _a, rest = __rest(_a, ["changed", "validityMessage"]);
-            return (Object.assign(Object.assign({}, state), { values: setWith_1.default(clone_1.default, path, rest.value, form.state.values), fields: Object.assign(Object.assign({}, form.state.fields), { [path]: {
+            return (Object.assign(Object.assign({}, state), { values: setWith_1.default(() => undefined, path, rest.value, form.state.values), fields: Object.assign(Object.assign({}, form.state.fields), { [path]: {
                         validityMessage,
@@ -75,5 +80,17 @@ changed,
         },
-        filter: (selectedState) => {
-            const changed = !fast_equals_1.shallowEqual(value, selectedState.value) ||
-                !fast_equals_1.shallowEqual(defaultValue, selectedState.defaultValue);
+        filter: (selectedState, tag) => {
+            // ignore everything not field related
+            switch (tag) {
+                case FormTag_1.FormTag.SUBMIT_ERROR_RESET:
+                case FormTag_1.FormTag.CREATE_FIELD:
+                case FormTag_1.FormTag.DISPOSE_FIELD:
+                case FormTag_1.FormTag.SUBMIT:
+                    return false;
+            }
+            const changed = disabled !== selectedState.disabled ||
+                readOnly !== selectedState.readOnly ||
+                !fast_equals_1.deepEqual(value, selectedState.value) ||
+                !fast_equals_1.deepEqual(defaultValue, selectedState.defaultValue);
+            disabled = selectedState.disabled;
+            readOnly = selectedState.readOnly;
             defaultValue = selectedState.defaultValue;
@@ -99,3 +116,3 @@ value = selectedState.value;
             setValue: (nextValue) => {
-                if (!fast_equals_1.shallowEqual(plumb.state.value, nextValue)) {
+                if (!fast_equals_1.deepEqual(plumb.state.value, nextValue)) {
                     value = nextValue;
@@ -106,3 +123,3 @@ plumb.next(Object.assign(Object.assign({}, plumb.state), { value: nextValue }), FormTag_1.FormTag.FIELD_VALUE_CHANGE);
             resetValue: () => {
-                if (!fast_equals_1.shallowEqual(plumb.state.defaultValue, plumb.state.value)) {
+                if (!fast_equals_1.deepEqual(plumb.state.defaultValue, plumb.state.value)) {
                     defaultValue = plumb.state.defaultValue;
@@ -109,0 +126,0 @@ value = plumb.state.value;

Form.d.ts

@@ -38,2 +38,6 @@ /**
     /**
+     * If the whole form should get disabled when submit is in progress.
+     */
+    disableOnSubmit?: boolean;
+    /**
      * Related form element, its onsubmit event will be replaced.
@@ -56,2 +60,4 @@ */
     submitError: null | Error;
+    disabled: boolean;
+    readOnly: boolean;
 }
@@ -58,0 +64,0 @@ export interface Form<T extends FormDefaultValues> {

FormField.d.ts

@@ -12,2 +12,4 @@ /**
     value: Readonly<T>;
+    disabled: boolean;
+    readOnly: boolean;
 }
@@ -14,0 +16,0 @@ export declare type FormFieldValidityMessage = string | null;

FormTag.d.ts

@@ -15,3 +15,5 @@ /**
     FIELD_VALUE_RESET = 7,
-    SUBMIT = 8
+    SUBMIT = 8,
+    SUBMIT_WITH_DEFAULT_VALUES_CHANGE = 9,
+    FORM_TOGGLE_DISABLE_OR_READ_ONLY = 10
 }

FormTag.js

@@ -19,2 +19,4 @@ "use strict";
     FormTag[FormTag["SUBMIT"] = 8] = "SUBMIT";
+    FormTag[FormTag["SUBMIT_WITH_DEFAULT_VALUES_CHANGE"] = 9] = "SUBMIT_WITH_DEFAULT_VALUES_CHANGE";
+    FormTag[FormTag["FORM_TOGGLE_DISABLE_OR_READ_ONLY"] = 10] = "FORM_TOGGLE_DISABLE_OR_READ_ONLY";
 })(FormTag = exports.FormTag || (exports.FormTag = {}));

package.json

 {
   "name": "@domonda/form",
-  "version": "2.1.6",
+  "version": "2.2.0",
   "description": "Powerful yet simple form library built using @domonda/plumb.",
@@ -23,5 +23,4 @@ "keywords": [
   "dependencies": {
-    "@domonda/plumb": "^2.2.3",
+    "@domonda/plumb": "^2.2.4",
     "fast-equals": "^2.0.0",
-    "lodash.clone": "^4.5.0",
     "lodash.get": "^4.4.2",
@@ -28,0 +27,0 @@ "lodash.omit": "^4.5.0",

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

26139

increased by10.25%

Dependency count

5

decreased by-16.67%

Lines of code

468

increased by7.59%

Dependency changes

• - Removedlodash.clone@^4.5.0

• - Removedlodash.clone@4.5.0(transitive)

• Updated@domonda/plumb@^2.2.4