@prototyp/skeletor 1.0.7 → 1.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/module/hooks/skeleform/package.json +1 -1
- package/lib/module/hooks/skeleform/src/index.js +35 -10
- package/lib/module/hooks/skeleform/src/index.js.map +1 -1
- package/lib/module/hooks/skeleform/yarn.lock +50 -2967
- package/lib/typescript/hooks/skeleform/src/index.d.ts +3 -5
- package/lib/typescript/hooks/skeleform/src/index.d.ts.map +1 -1
- package/lib/typescript/models/Border.d.ts +7 -14
- package/lib/typescript/models/Border.d.ts.map +1 -1
- package/lib/typescript/models/Spacing.d.ts +12 -19
- package/lib/typescript/models/Spacing.d.ts.map +1 -1
- package/package.json +6 -2
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@prototyp/skeleform",
|
|
3
3
|
"description": "React/React-Native form management utility",
|
|
4
4
|
"author": "Luka Buljan <luka@prototyp.digital>",
|
|
5
|
-
"version": "1.0.
|
|
5
|
+
"version": "1.0.2",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"homepage": "https://github.com/prototypdigital/skeleform",
|
|
8
8
|
"repository": {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useEffect, useState } from "react";
|
|
1
|
+
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
2
2
|
/** One-fits-all solution to manage state changes, field validation and optional entries within a form.
|
|
3
3
|
* @example <caption>Simple use case:</caption>
|
|
4
4
|
* const { state, validation, update } = useForm({ email: '', password: '', });
|
|
@@ -7,9 +7,10 @@ import { useEffect, useState } from "react";
|
|
|
7
7
|
* @example <caption>For more complex form states (ie one field can be of multiple types), you should pass the form's type:</caption>
|
|
8
8
|
* const { state, validation, update } = useForm<{ numericOrUndefined: number | undefined }>({ numericOrUndefined: undefined }, { rules: { numericOrUndefined: (value: number | undefined): boolean | undefined => ... }});
|
|
9
9
|
*
|
|
10
|
+
* Note: Avoid using class constructors for form state as it will continuously re-render the form. Every class construct is a new object, so the initial values parameter will always be different thus causing an infinite loop of re-renders. Use plain objects instead or memoize classes before passing them into the hook.
|
|
10
11
|
*/
|
|
11
12
|
export function useForm(values, config) {
|
|
12
|
-
const keys = Object.keys(values);
|
|
13
|
+
const keys = useMemo(() => Object.keys(values), [values]);
|
|
13
14
|
const [validation, setValidation] = useState({});
|
|
14
15
|
const [initialState, setInitialState] = useState(values);
|
|
15
16
|
const [state, setState] = useState(values);
|
|
@@ -18,6 +19,8 @@ export function useForm(values, config) {
|
|
|
18
19
|
stateValidation,
|
|
19
20
|
isOptional
|
|
20
21
|
} = useFormUtils(config);
|
|
22
|
+
|
|
23
|
+
/** Rehydrate current state with new initial values if changed. */
|
|
21
24
|
useEffect(() => {
|
|
22
25
|
const changed = keys.filter(key => values[key] !== initialState[key]);
|
|
23
26
|
if (!changed.length) {
|
|
@@ -58,17 +61,17 @@ export function useForm(values, config) {
|
|
|
58
61
|
/** Validate entire form, store validation state and return validation value.
|
|
59
62
|
* In human readable terms, use this when you want to validate the form on submit.
|
|
60
63
|
*/
|
|
61
|
-
|
|
64
|
+
const validateForm = useCallback(() => {
|
|
62
65
|
const formValidationState = stateValidation(state);
|
|
63
66
|
setValidation(formValidationState.validation);
|
|
64
67
|
return formValidationState.valid;
|
|
65
|
-
}
|
|
68
|
+
}, [state]);
|
|
66
69
|
|
|
67
70
|
/** Boolean value of whether the form is valid (ie can be submitted). Use this to disable/enable form submission.
|
|
68
71
|
* Only use when validating fields separately, has no value when valiating on form submit. */
|
|
69
|
-
|
|
72
|
+
const isFormValid = useCallback(() => {
|
|
70
73
|
return !keys.some(key => isOptional(key) ? validation[key] === false : !validation[key]);
|
|
71
|
-
}
|
|
74
|
+
}, [validation, config]);
|
|
72
75
|
|
|
73
76
|
/** Resets changed values to initial state */
|
|
74
77
|
function resetState() {
|
|
@@ -91,6 +94,27 @@ export function useForm(values, config) {
|
|
|
91
94
|
resetState();
|
|
92
95
|
resetValidation();
|
|
93
96
|
}
|
|
97
|
+
|
|
98
|
+
/** Whether form values have changed in any way from their initial state. */
|
|
99
|
+
const hasStateChanged = useCallback(() => {
|
|
100
|
+
return keys.some(key => {
|
|
101
|
+
const value = state[key];
|
|
102
|
+
const initialValue = initialState[key];
|
|
103
|
+
|
|
104
|
+
/** Check Date values. Dates are also object instances, but we can check their values easily. */
|
|
105
|
+
if (value instanceof Date) {
|
|
106
|
+
return initialValue instanceof Date ? +value !== +initialValue : true;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/** Check object values in a crude manner. Deep compares are expensive, this works but is sensitive to prop order. Could potentially provide a false positive if objects are the same, but values are ordered differently (ie two arrays, same values but at different indexes == different arrays.) */
|
|
110
|
+
if (state[key] instanceof Object) {
|
|
111
|
+
return JSON.stringify(state[key]) !== JSON.stringify(initialState[key]);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/** Primitive value check. */
|
|
115
|
+
return value !== initialValue;
|
|
116
|
+
});
|
|
117
|
+
}, [state, initialState]);
|
|
94
118
|
return {
|
|
95
119
|
state,
|
|
96
120
|
validation,
|
|
@@ -98,6 +122,7 @@ export function useForm(values, config) {
|
|
|
98
122
|
validate,
|
|
99
123
|
validateForm,
|
|
100
124
|
isFormValid,
|
|
125
|
+
hasStateChanged,
|
|
101
126
|
clearForm,
|
|
102
127
|
resetState,
|
|
103
128
|
resetValidation,
|
|
@@ -122,16 +147,16 @@ export function useFormUtils(config) {
|
|
|
122
147
|
}
|
|
123
148
|
return true;
|
|
124
149
|
}
|
|
125
|
-
|
|
150
|
+
const isOptional = useCallback(key => {
|
|
126
151
|
var _config$optional;
|
|
127
152
|
return (config === null || config === void 0 ? void 0 : (_config$optional = config.optional) === null || _config$optional === void 0 ? void 0 : _config$optional.includes(key)) || false;
|
|
128
|
-
}
|
|
153
|
+
}, [config]);
|
|
129
154
|
|
|
130
155
|
/** Validate by custom validation rule. If the rule does not exist, returns undefined. */
|
|
131
|
-
|
|
156
|
+
const validateByRule = useCallback((key, value, state) => {
|
|
132
157
|
var _config$rules, _config$rules$key;
|
|
133
158
|
return config === null || config === void 0 ? void 0 : (_config$rules = config.rules) === null || _config$rules === void 0 ? void 0 : (_config$rules$key = _config$rules[key]) === null || _config$rules$key === void 0 ? void 0 : _config$rules$key.call(_config$rules, value, state, isOptional(key));
|
|
134
|
-
}
|
|
159
|
+
}, [config]);
|
|
135
160
|
|
|
136
161
|
/** Handles validation for a specific form field.
|
|
137
162
|
* Order of priority:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useEffect","useState","useForm","values","config","keys","Object","validation","setValidation","initialState","setInitialState","state","setState","fieldValidation","stateValidation","isOptional","useFormUtils","changed","filter","key","length","updatedState","forEach","update","value","shouldValidate","s","undefined","validate","validateForm","formValidationState","valid","isFormValid","some","resetState","resetInitialValues","resetValidation","clearForm","
|
|
1
|
+
{"version":3,"names":["useCallback","useEffect","useMemo","useState","useForm","values","config","keys","Object","validation","setValidation","initialState","setInitialState","state","setState","fieldValidation","stateValidation","isOptional","useFormUtils","changed","filter","key","length","updatedState","forEach","update","value","shouldValidate","s","undefined","validate","validateForm","formValidationState","valid","isFormValid","some","resetState","resetInitialValues","resetValidation","clearForm","hasStateChanged","initialValue","Date","JSON","stringify","doesValueExist","isNaN","valueOf","optional","includes","validateByRule","rules","hasValue","map"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"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"}
|