@blockle/form - npm Package Compare versions

Comparing version 0.0.1-alpha.9 to 0.0.1-alpha.10

dist/blockle-form.cjs.js

 /**
-  * @blockle/form v0.0.1-alpha.8
+  * @blockle/form v0.0.1-alpha.9
   * (C) 2019-2019 Niek Saarberg
@@ -15,7 +15,4 @@ * Released under the MIT License.
 
-const FormContext = React__default.createContext({
-    getState: () => ({}),
-    dispatch: () => { },
-    subscribe: () => () => { },
-});
+const FormContext = React__default.createContext(null);
+//# sourceMappingURL=context.js.map
 
@@ -57,3 +54,3 @@ const initialState = {};
                 const field = state[key];
-                nextState[key] = { ...field, touched: true };
+                nextState[key] = field.touched ? field : { ...field, touched: true };
             });
@@ -92,2 +89,3 @@ return nextState;
 };
+//# sourceMappingURL=createStore.js.map
 
@@ -103,2 +101,3 @@ const getFormData = (state) => {
 const isFormInvalid = (state) => Object.values(state).some(({ validationMessage }) => validationMessage !== null);
+//# sourceMappingURL=selectors.js.map
 
@@ -119,2 +118,3 @@ const createActionWithPayload = (type, payload) => ({
 const setTouchedAll = () => ({ type: 'SET_TOUCHED_ALL' });
+//# sourceMappingURL=actions.js.map
 
@@ -159,5 +159,9 @@ const Form = ({ render, className, autocomplete, onSubmit, noValidate = true }) => {
 };
+//# sourceMappingURL=Form.js.map
 
+const globalStore = createStore();
+//# sourceMappingURL=globalStore.js.map
+
 const useFieldState = (name, initialValue) => {
-    const store = React.useContext(FormContext);
+    const store = React.useContext(FormContext) || globalStore;
     const [state, setState] = React.useState({
@@ -187,16 +191,22 @@ name,
 };
+//# sourceMappingURL=useFieldState.js.map
 
 const useField = (name, options) => {
     const state = useFieldState(name, options.value);
-    const store = React.useContext(FormContext);
-    // Update value whenever value (given by props) changes
-    React.useEffect(() => {
+    const store = React.useContext(FormContext) || globalStore;
+    const initialCall = React.useRef(true);
+    const setValue = (value) => {
         store.dispatch(updateField(name, {
-            value: options.value,
-            dirty: false,
-            validationMessage: options.validate(options.value),
+            value,
+            dirty: value !== options.value,
+            validationMessage: options.validate(value),
+            touched: true,
         }));
-    }, [options && JSON.stringify(options.value)]);
+    };
     // Init store state
     React.useEffect(() => {
+        const state = store.getState()[name];
+        if (state) {
+            return;
+        }
         store.dispatch(initField(name, {
@@ -206,17 +216,18 @@ value: options.value,
         }));
+        // TODO How to handle "removeField" when multiple components have the same name?
         return () => {
-            // TODO How to handle "removeField" when multiple components have the same name?
             store.dispatch(removeField(name));
         };
     }, [name]);
+    // Update value whenever value (given by props) changes
+    // Check is done with JSON.stringify to compare objects etc
+    React.useEffect(() => {
+        if (!initialCall.current) {
+            setValue(options.value);
+        }
+        initialCall.current = false;
+    }, [JSON.stringify(options.value)]);
     return {
         ...state,
-        setValue(value) {
-            store.dispatch(updateField(name, {
-                value,
-                dirty: value !== options.value,
-                validationMessage: options.validate(value),
-                touched: true,
-            }));
-        },
+        setValue,
         setTouched() {
@@ -227,5 +238,8 @@ store.dispatch(setTouched(name));
 };
+//# sourceMappingURL=useField.js.map
 
+//# sourceMappingURL=index.js.map
+
 exports.Form = Form;
 exports.useField = useField;
 exports.useFieldState = useFieldState;

dist/blockle-form.esm.js

 /**
-  * @blockle/form v0.0.1-alpha.8
+  * @blockle/form v0.0.1-alpha.9
   * (C) 2019-2019 Niek Saarberg
@@ -8,7 +8,4 @@ * Released under the MIT License.
 
-const FormContext = React.createContext({
-    getState: () => ({}),
-    dispatch: () => { },
-    subscribe: () => () => { },
-});
+const FormContext = React.createContext(null);
+//# sourceMappingURL=context.js.map
 
@@ -50,3 +47,3 @@ const initialState = {};
                 const field = state[key];
-                nextState[key] = { ...field, touched: true };
+                nextState[key] = field.touched ? field : { ...field, touched: true };
             });
@@ -85,2 +82,3 @@ return nextState;
 };
+//# sourceMappingURL=createStore.js.map
 
@@ -96,2 +94,3 @@ const getFormData = (state) => {
 const isFormInvalid = (state) => Object.values(state).some(({ validationMessage }) => validationMessage !== null);
+//# sourceMappingURL=selectors.js.map
 
@@ -112,2 +111,3 @@ const createActionWithPayload = (type, payload) => ({
 const setTouchedAll = () => ({ type: 'SET_TOUCHED_ALL' });
+//# sourceMappingURL=actions.js.map
 
@@ -152,5 +152,9 @@ const Form = ({ render, className, autocomplete, onSubmit, noValidate = true }) => {
 };
+//# sourceMappingURL=Form.js.map
 
+const globalStore = createStore();
+//# sourceMappingURL=globalStore.js.map
+
 const useFieldState = (name, initialValue) => {
-    const store = useContext(FormContext);
+    const store = useContext(FormContext) || globalStore;
     const [state, setState] = useState({
@@ -180,16 +184,22 @@ name,
 };
+//# sourceMappingURL=useFieldState.js.map
 
 const useField = (name, options) => {
     const state = useFieldState(name, options.value);
-    const store = useContext(FormContext);
-    // Update value whenever value (given by props) changes
-    useEffect(() => {
+    const store = useContext(FormContext) || globalStore;
+    const initialCall = useRef(true);
+    const setValue = (value) => {
         store.dispatch(updateField(name, {
-            value: options.value,
-            dirty: false,
-            validationMessage: options.validate(options.value),
+            value,
+            dirty: value !== options.value,
+            validationMessage: options.validate(value),
+            touched: true,
         }));
-    }, [options && JSON.stringify(options.value)]);
+    };
     // Init store state
     useEffect(() => {
+        const state = store.getState()[name];
+        if (state) {
+            return;
+        }
         store.dispatch(initField(name, {
@@ -199,17 +209,18 @@ value: options.value,
         }));
+        // TODO How to handle "removeField" when multiple components have the same name?
         return () => {
-            // TODO How to handle "removeField" when multiple components have the same name?
             store.dispatch(removeField(name));
         };
     }, [name]);
+    // Update value whenever value (given by props) changes
+    // Check is done with JSON.stringify to compare objects etc
+    useEffect(() => {
+        if (!initialCall.current) {
+            setValue(options.value);
+        }
+        initialCall.current = false;
+    }, [JSON.stringify(options.value)]);
     return {
         ...state,
-        setValue(value) {
-            store.dispatch(updateField(name, {
-                value,
-                dirty: value !== options.value,
-                validationMessage: options.validate(value),
-                touched: true,
-            }));
-        },
+        setValue,
         setTouched() {
@@ -220,3 +231,6 @@ store.dispatch(setTouched(name));
 };
+//# sourceMappingURL=useField.js.map
 
+//# sourceMappingURL=index.js.map
+
 export { Form, useField, useFieldState };

dist/context.d.ts

@@ -16,2 +16,2 @@ import React from 'react';
     }) => void;
-}>;
+} | null>;

dist/store/actions.d.ts

@@ -1,2 +0,2 @@
-import { FieldState } from 'types';
+import { FieldState } from '../types';
 export interface ActionWithPayload<T extends string, P> {
@@ -3,0 +3,0 @@ type: T;

dist/store/reducer.d.ts

@@ -1,2 +0,2 @@
-import { FieldState } from 'types';
+import { FieldState } from '../types';
 export declare type FormReducer = {
@@ -3,0 +3,0 @@ [type: string]: FieldState<unknown>;

dist/useField.d.ts

@@ -6,3 +6,3 @@ declare type Options<V> = {
 export declare const useField: <V>(name: string, options: Options<V>) => {
-    setValue(value: V): void;
+    setValue: (value: V) => void;
     setTouched(): void;
@@ -9,0 +9,0 @@ invalid: boolean;

package.json

 {
   "name": "@blockle/form",
-  "version": "0.0.1-alpha.9",
+  "version": "0.0.1-alpha.10",
   "description": "Blockle Form",
@@ -5,0 +5,0 @@ "scripts": {

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

25328

increased by7.22%

Number of package files

17

increased by6.25%

Lines of code

581

increased by7.2%

No dependency changes