@becklyn/forms 3.0.8 → 3.0.10
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/dist/cjs/context/data/FormDataProvider.d.ts.map +1 -1
- package/dist/cjs/hook/useRefEffect.d.ts.map +1 -1
- package/dist/cjs/hook/useRefEffect.js +1 -0
- package/dist/es/components/FormBuilder.js +10 -14
- package/dist/es/components/FormCustom.js +5 -12
- package/dist/es/components/FormEntry.js +27 -31
- package/dist/es/components/FormField.js +13 -17
- package/dist/es/components/FormRow.js +4 -8
- package/dist/es/components/FormSection.js +4 -8
- package/dist/es/components/FormWatch.js +6 -13
- package/dist/es/condition/index.js +1 -5
- package/dist/es/context/FormProvider.js +16 -21
- package/dist/es/context/context.js +3 -7
- package/dist/es/context/data/FormDataProvider.d.ts.map +1 -1
- package/dist/es/context/data/FormDataProvider.js +12 -16
- package/dist/es/context/data/context.js +3 -6
- package/dist/es/context/data/index.js +1 -2
- package/dist/es/context/index.js +3 -22
- package/dist/es/guard/index.js +5 -12
- package/dist/es/hook/useFormData.js +7 -12
- package/dist/es/hook/useFormErrors.js +5 -9
- package/dist/es/hook/useFormStore.js +8 -12
- package/dist/es/hook/useFormValidations.js +14 -18
- package/dist/es/hook/useRefEffect.d.ts.map +1 -1
- package/dist/es/hook/useRefEffect.js +4 -7
- package/dist/es/type/common.js +1 -2
- package/dist/es/type/condition.js +1 -2
- package/dist/es/type/config.js +1 -2
- package/dist/es/type/extract.js +1 -2
- package/dist/es/type/field.js +1 -2
- package/dist/es/type/form.js +1 -2
- package/dist/es/type/index.js +7 -23
- package/dist/es/type/validation.js +1 -2
- package/dist/es/util/index.js +24 -37
- package/dist/es/validation/index.js +10 -15
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormDataProvider.d.ts","sourceRoot":"","sources":["../../../../context/data/FormDataProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAsB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAgB,MAAM,yBAAyB,CAAC;AAClE,OAAO,EACH,UAAU,EACV,UAAU,EACV,eAAe,EACf,aAAa,EACb,sBAAsB,EACzB,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,iBAAiB,CAC9B,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,cAAc,CAAC,EAC3D,cAAc,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAE1C,MAAM,EAAE,UAAU,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC;IACtC,WAAW,EAAE,cAAc,CAAC;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,sBAAsB,CAAC;IAC5C;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CACnB,CAAC,EACD,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,EAChE,cAAc,CACjB,CAAC;CACL;AAED,eAAO,MAAM,gBAAgB,GACzB,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,cAAc,CAAC,EAC3D,cAAc,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC5C,6CAKC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"FormDataProvider.d.ts","sourceRoot":"","sources":["../../../../context/data/FormDataProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAsB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAgB,MAAM,yBAAyB,CAAC;AAClE,OAAO,EACH,UAAU,EACV,UAAU,EACV,eAAe,EACf,aAAa,EACb,sBAAsB,EACzB,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,iBAAiB,CAC9B,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,cAAc,CAAC,EAC3D,cAAc,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAE1C,MAAM,EAAE,UAAU,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC;IACtC,WAAW,EAAE,cAAc,CAAC;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,sBAAsB,CAAC;IAC5C;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CACnB,CAAC,EACD,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,EAChE,cAAc,CACjB,CAAC;CACL;AAED,eAAO,MAAM,gBAAgB,GACzB,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,cAAc,CAAC,EAC3D,cAAc,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC5C,6CAKC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,4CAiBzD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRefEffect.d.ts","sourceRoot":"","sources":["../../../hook/useRefEffect.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,GAAI,CAAC,EAAE,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"useRefEffect.d.ts","sourceRoot":"","sources":["../../../hook/useRefEffect.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,GAAI,CAAC,EAAE,OAAO,CAAC,iCAMvC,CAAC"}
|
|
@@ -1,20 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
const FormEntry_1 = require("./FormEntry");
|
|
9
|
-
const FormBuilder = ({ Components, children, }) => {
|
|
10
|
-
return (0, jsx_runtime_1.jsx)(FormBuilderComponent, { Components: Components, children: children });
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { memo, useContext } from "react";
|
|
3
|
+
import { FormConfigContext } from "../context/data/context";
|
|
4
|
+
import { isFormFieldConfig } from "../guard";
|
|
5
|
+
import { FormEntry } from "./FormEntry";
|
|
6
|
+
export const FormBuilder = ({ Components, children, }) => {
|
|
7
|
+
return _jsx(FormBuilderComponent, { Components: Components, children: children });
|
|
11
8
|
};
|
|
12
|
-
|
|
13
|
-
const FormBuilderComponent = (0, react_1.memo)(
|
|
9
|
+
const FormBuilderComponent = memo(
|
|
14
10
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
15
11
|
({ Components, children, }) => {
|
|
16
12
|
const { BuilderWrapper } = Components;
|
|
17
|
-
const { config } =
|
|
18
|
-
return ((
|
|
13
|
+
const { config } = useContext(FormConfigContext);
|
|
14
|
+
return (_jsx(BuilderWrapper, { children: config.map((entry, index) => (_jsx(FormEntry, { entry: entry, Components: Components, children: children }, index + (isFormFieldConfig(entry) ? entry.name : "")))) }));
|
|
19
15
|
});
|
|
20
16
|
FormBuilderComponent.displayName = "FormBuilderComponent";
|
|
@@ -1,13 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { FormEntry } from "./FormEntry";
|
|
4
|
+
export const FormCustom = ({ Components, custom, children, }) => {
|
|
5
|
+
return (_jsx(React.Fragment, { children: custom.wrapper(custom.content.map((entry, index) => (_jsx(FormEntry, { entry: entry, Components: Components, children: children }, index)))) }));
|
|
4
6
|
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.FormCustom = void 0;
|
|
7
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
-
const react_1 = __importDefault(require("react"));
|
|
9
|
-
const FormEntry_1 = require("./FormEntry");
|
|
10
|
-
const FormCustom = ({ Components, custom, children, }) => {
|
|
11
|
-
return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: custom.wrapper(custom.content.map((entry, index) => ((0, jsx_runtime_1.jsx)(FormEntry_1.FormEntry, { entry: entry, Components: Components, children: children }, index)))) }));
|
|
12
|
-
};
|
|
13
|
-
exports.FormCustom = FormCustom;
|
|
@@ -1,30 +1,27 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
const FormEntry = ({ Components, entry, children, }) => {
|
|
15
|
-
const { data, fieldConfigs } = (0, context_1.useForm)();
|
|
16
|
-
const getHasChildren = (0, react_1.useCallback)((formData) => {
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useEffect, useState } from "react";
|
|
3
|
+
import { fieldFulfillsConditions } from "../condition";
|
|
4
|
+
import { useForm } from "../context";
|
|
5
|
+
import { isFormCustomConfig, isFormRowConfig, isFormSectionConfig } from "../guard";
|
|
6
|
+
import { someFieldConfigs } from "../util";
|
|
7
|
+
import { FormCustom } from "./FormCustom";
|
|
8
|
+
import { FormField } from "./FormField";
|
|
9
|
+
import { FormRow } from "./FormRow";
|
|
10
|
+
import { FormSection } from "./FormSection";
|
|
11
|
+
export const FormEntry = ({ Components, entry, children, }) => {
|
|
12
|
+
const { data, fieldConfigs } = useForm();
|
|
13
|
+
const getHasChildren = useCallback((formData) => {
|
|
17
14
|
switch (true) {
|
|
18
|
-
case
|
|
19
|
-
case
|
|
20
|
-
case
|
|
21
|
-
return
|
|
15
|
+
case isFormRowConfig(entry):
|
|
16
|
+
case isFormSectionConfig(entry):
|
|
17
|
+
case isFormCustomConfig(entry):
|
|
18
|
+
return someFieldConfigs([entry], field => field ? fieldFulfillsConditions(field, fieldConfigs, formData) : false);
|
|
22
19
|
default:
|
|
23
|
-
return entry ?
|
|
20
|
+
return entry ? fieldFulfillsConditions(entry, fieldConfigs, formData) : false;
|
|
24
21
|
}
|
|
25
22
|
}, [entry, fieldConfigs]);
|
|
26
|
-
const [hasChildren, setHasChildren] =
|
|
27
|
-
|
|
23
|
+
const [hasChildren, setHasChildren] = useState(getHasChildren(data.get()));
|
|
24
|
+
useEffect(() => {
|
|
28
25
|
const remove = data.subscribe(() => {
|
|
29
26
|
setHasChildren(getHasChildren(data.get()));
|
|
30
27
|
});
|
|
@@ -34,14 +31,13 @@ const FormEntry = ({ Components, entry, children, }) => {
|
|
|
34
31
|
return null;
|
|
35
32
|
}
|
|
36
33
|
switch (true) {
|
|
37
|
-
case
|
|
38
|
-
return ((
|
|
39
|
-
case
|
|
40
|
-
return ((
|
|
41
|
-
case
|
|
42
|
-
return ((
|
|
34
|
+
case isFormCustomConfig(entry):
|
|
35
|
+
return (_jsx(FormCustom, { custom: entry, Components: Components, children: children }));
|
|
36
|
+
case isFormSectionConfig(entry):
|
|
37
|
+
return (_jsx(FormSection, { section: entry, Components: Components, children: children }));
|
|
38
|
+
case isFormRowConfig(entry):
|
|
39
|
+
return (_jsx(FormRow, { row: entry, Components: Components, children: children }));
|
|
43
40
|
default:
|
|
44
|
-
return (entry && ((
|
|
41
|
+
return (entry && (_jsx(FormField, { field: entry, Components: Components, children: children })));
|
|
45
42
|
}
|
|
46
43
|
};
|
|
47
|
-
exports.FormEntry = FormEntry;
|
|
@@ -1,28 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
const useFormErrors_1 = require("../hook/useFormErrors");
|
|
9
|
-
const FormField = ({ Components, field, children, }) => {
|
|
10
|
-
const { editData, validationStrategy: contextValidationStrategy, validateField, onInput, } = (0, context_1.useForm)();
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useMemo } from "react";
|
|
3
|
+
import { useForm } from "../context";
|
|
4
|
+
import { useFormData } from "../hook/useFormData";
|
|
5
|
+
import { useFormErrors } from "../hook/useFormErrors";
|
|
6
|
+
export const FormField = ({ Components, field, children, }) => {
|
|
7
|
+
const { editData, validationStrategy: contextValidationStrategy, validateField, onInput, } = useForm();
|
|
11
8
|
const { name, columns, conditions, validations, valueFn, validationStrategy: fieldValidationStrategy, onInput: onFieldInput, fieldConfig: fieldConfigFunc, } = field;
|
|
12
|
-
const validationStrategy =
|
|
9
|
+
const validationStrategy = useMemo(() => [fieldValidationStrategy, contextValidationStrategy], [fieldValidationStrategy, contextValidationStrategy]);
|
|
13
10
|
const hasValueFn = !!valueFn;
|
|
14
11
|
const hasConditions = !!conditions && Object.keys(conditions).length > 0;
|
|
15
12
|
const hasFieldConfigFunc = typeof fieldConfigFunc === "function";
|
|
16
13
|
const hasValidationFunc = !!validations && validations.some(({ validation }) => typeof validation === "function");
|
|
17
14
|
const rerenderWithData = hasValueFn || hasConditions || hasFieldConfigFunc || hasValidationFunc;
|
|
18
|
-
const [data, setStore, getStore] =
|
|
19
|
-
const [fieldError] =
|
|
15
|
+
const [data, setStore, getStore] = useFormData(rerenderWithData ? store => store : store => store[name]);
|
|
16
|
+
const [fieldError] = useFormErrors(store => store[name]);
|
|
20
17
|
const value = rerenderWithData ? data[name] : data;
|
|
21
18
|
const normalizedValue = valueFn ? valueFn(data) : value;
|
|
22
19
|
const fieldConfig = hasFieldConfigFunc
|
|
23
20
|
? fieldConfigFunc({ value: normalizedValue, data })
|
|
24
21
|
: fieldConfigFunc;
|
|
25
|
-
const handleInput =
|
|
22
|
+
const handleInput = useCallback(value => {
|
|
26
23
|
let normalizedValue;
|
|
27
24
|
if (onFieldInput) {
|
|
28
25
|
normalizedValue = onFieldInput({
|
|
@@ -46,7 +43,7 @@ const FormField = ({ Components, field, children, }) => {
|
|
|
46
43
|
},
|
|
47
44
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
48
45
|
[field, setStore, getStore, onFieldInput, onInput]);
|
|
49
|
-
const handleBlur =
|
|
46
|
+
const handleBlur = useCallback(() => {
|
|
50
47
|
if (!validations || !validationStrategy.includes("blur")) {
|
|
51
48
|
return;
|
|
52
49
|
}
|
|
@@ -73,6 +70,5 @@ const FormField = ({ Components, field, children, }) => {
|
|
|
73
70
|
if (!FieldWrapper) {
|
|
74
71
|
throw new Error("No field component found");
|
|
75
72
|
}
|
|
76
|
-
return (
|
|
73
|
+
return _jsx(FieldWrapper, { columns: columns, children: children(childrenProps) });
|
|
77
74
|
};
|
|
78
|
-
exports.FormField = FormField;
|
|
@@ -1,13 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const FormEntry_1 = require("./FormEntry");
|
|
6
|
-
const FormRow = ({ Components, row, children, }) => {
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { FormEntry } from "./FormEntry";
|
|
3
|
+
export const FormRow = ({ Components, row, children, }) => {
|
|
7
4
|
const { RowWrapper } = Components;
|
|
8
5
|
if (!RowWrapper) {
|
|
9
6
|
throw new Error(`No row component found.`);
|
|
10
7
|
}
|
|
11
|
-
return ((
|
|
8
|
+
return (_jsx(RowWrapper, { children: row.content.map((entry, index) => (_jsx(FormEntry, { entry: entry, Components: Components, children: children }, index))) }));
|
|
12
9
|
};
|
|
13
|
-
exports.FormRow = FormRow;
|
|
@@ -1,13 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const FormEntry_1 = require("./FormEntry");
|
|
6
|
-
const FormSection = ({ Components, section, children, }) => {
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { FormEntry } from "./FormEntry";
|
|
3
|
+
export const FormSection = ({ Components, section, children, }) => {
|
|
7
4
|
const { SectionWrapper } = Components;
|
|
8
5
|
if (!SectionWrapper) {
|
|
9
6
|
throw new Error(`No section component found.`);
|
|
10
7
|
}
|
|
11
|
-
return ((
|
|
8
|
+
return (_jsx(SectionWrapper, { children: section.content.map((entry, index) => (_jsx(FormEntry, { entry: entry, Components: Components, children: children }, index))) }));
|
|
12
9
|
};
|
|
13
|
-
exports.FormSection = FormSection;
|
|
@@ -1,14 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { useFormData } from "../hook/useFormData";
|
|
4
|
+
export const FormWatch = ({ name, children }) => {
|
|
5
|
+
const [value] = useFormData(store => (name ? store[name] : store));
|
|
6
|
+
return _jsx(React.Fragment, { children: children(value) });
|
|
4
7
|
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.FormWatch = void 0;
|
|
7
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
-
const react_1 = __importDefault(require("react"));
|
|
9
|
-
const useFormData_1 = require("../hook/useFormData");
|
|
10
|
-
const FormWatch = ({ name, children }) => {
|
|
11
|
-
const [value] = (0, useFormData_1.useFormData)(store => (name ? store[name] : store));
|
|
12
|
-
return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: children(value) });
|
|
13
|
-
};
|
|
14
|
-
exports.FormWatch = FormWatch;
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.fieldFulfillsConditions = void 0;
|
|
4
|
-
const fieldFulfillsConditions = ({ conditions }, fieldConfigs, data) => {
|
|
1
|
+
export const fieldFulfillsConditions = ({ conditions }, fieldConfigs, data) => {
|
|
5
2
|
if (!conditions) {
|
|
6
3
|
return true;
|
|
7
4
|
}
|
|
@@ -11,7 +8,6 @@ const fieldFulfillsConditions = ({ conditions }, fieldConfigs, data) => {
|
|
|
11
8
|
: fulfillsConditions(condition, fieldConfigs, data);
|
|
12
9
|
});
|
|
13
10
|
};
|
|
14
|
-
exports.fieldFulfillsConditions = fieldFulfillsConditions;
|
|
15
11
|
const fulfillsConditions = (conditions, fieldConfigs, data) => {
|
|
16
12
|
return Object.entries(conditions).every(([key, condition]) => {
|
|
17
13
|
const { valueFn } = fieldConfigs[key] ?? {};
|
|
@@ -1,27 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
const context_2 = require("./data/context");
|
|
11
|
-
const FormProvider = ({ children, ...props }) => {
|
|
12
|
-
return ((0, jsx_runtime_1.jsx)(FormDataProvider_1.FormDataProvider, { ...props, children: (0, jsx_runtime_1.jsx)(exports.FormProviderInner, { ...props, children: children }) }));
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useContext, useMemo } from "react";
|
|
3
|
+
import { useFormValidations } from "../hook/useFormValidations";
|
|
4
|
+
import { fieldsFromConfig } from "../util";
|
|
5
|
+
import { FormContext, useForm } from "./context";
|
|
6
|
+
import { FormDataProvider } from "./data/FormDataProvider";
|
|
7
|
+
import { FormDataContext } from "./data/context";
|
|
8
|
+
export const FormProvider = ({ children, ...props }) => {
|
|
9
|
+
return (_jsx(FormDataProvider, { ...props, children: _jsx(FormProviderInner, { ...props, children: children }) }));
|
|
13
10
|
};
|
|
14
|
-
|
|
15
|
-
const
|
|
16
|
-
const
|
|
17
|
-
const { data, editData } = (0, react_1.useContext)(context_2.FormDataContext);
|
|
11
|
+
export const FormProviderInner = ({ children, ...props }) => {
|
|
12
|
+
const externalForm = useForm();
|
|
13
|
+
const { data, editData } = useContext(FormDataContext);
|
|
18
14
|
const { config, validationStrategy = "blur", onInput: internalOnInput, inheritData } = props;
|
|
19
15
|
const onInput = inheritData && externalForm ? externalForm.onInput : internalOnInput;
|
|
20
|
-
const fieldConfigs =
|
|
21
|
-
return
|
|
16
|
+
const fieldConfigs = useMemo(() => {
|
|
17
|
+
return fieldsFromConfig(config);
|
|
22
18
|
}, [config]);
|
|
23
|
-
const formValidations =
|
|
24
|
-
return ((
|
|
19
|
+
const formValidations = useFormValidations(config, fieldConfigs);
|
|
20
|
+
return (_jsx(FormContext.Provider, { value: {
|
|
25
21
|
...formValidations,
|
|
26
22
|
data,
|
|
27
23
|
editData,
|
|
@@ -31,4 +27,3 @@ const FormProviderInner = ({ children, ...props }) => {
|
|
|
31
27
|
onInput,
|
|
32
28
|
}, children: children }));
|
|
33
29
|
};
|
|
34
|
-
exports.FormProviderInner = FormProviderInner;
|
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useForm = exports.FormContext = void 0;
|
|
4
1
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const useForm = () =>
|
|
8
|
-
exports.useForm = useForm;
|
|
2
|
+
import { createContext, useContext } from "react";
|
|
3
|
+
export const FormContext = createContext(undefined);
|
|
4
|
+
export const useForm = () => useContext(FormContext);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormDataProvider.d.ts","sourceRoot":"","sources":["../../../../context/data/FormDataProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAsB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAgB,MAAM,yBAAyB,CAAC;AAClE,OAAO,EACH,UAAU,EACV,UAAU,EACV,eAAe,EACf,aAAa,EACb,sBAAsB,EACzB,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,iBAAiB,CAC9B,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,cAAc,CAAC,EAC3D,cAAc,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAE1C,MAAM,EAAE,UAAU,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC;IACtC,WAAW,EAAE,cAAc,CAAC;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,sBAAsB,CAAC;IAC5C;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CACnB,CAAC,EACD,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,EAChE,cAAc,CACjB,CAAC;CACL;AAED,eAAO,MAAM,gBAAgB,GACzB,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,cAAc,CAAC,EAC3D,cAAc,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC5C,6CAKC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"FormDataProvider.d.ts","sourceRoot":"","sources":["../../../../context/data/FormDataProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAsB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAgB,MAAM,yBAAyB,CAAC;AAClE,OAAO,EACH,UAAU,EACV,UAAU,EACV,eAAe,EACf,aAAa,EACb,sBAAsB,EACzB,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,iBAAiB,CAC9B,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,cAAc,CAAC,EAC3D,cAAc,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAE1C,MAAM,EAAE,UAAU,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC;IACtC,WAAW,EAAE,cAAc,CAAC;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,sBAAsB,CAAC;IAC5C;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CACnB,CAAC,EACD,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,EAChE,cAAc,CACjB,CAAC;CACL;AAED,eAAO,MAAM,gBAAgB,GACzB,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,cAAc,CAAC,EAC3D,cAAc,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC5C,6CAKC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,4CAiBzD,CAAC"}
|
|
@@ -1,29 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.FormDataProvider = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
2
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
const FormDataProvider = ({ config, initialData, children, ...props }) => {
|
|
3
|
+
import { useContext, useRef } from "react";
|
|
4
|
+
import { useFormStore } from "../../hook/useFormStore";
|
|
5
|
+
import { FormConfigContext, FormDataContext } from "./context";
|
|
6
|
+
export const FormDataProvider = ({ config, initialData, children, ...props }) => {
|
|
10
7
|
if (!config) {
|
|
11
8
|
throw new Error("Config is undefined");
|
|
12
9
|
}
|
|
13
|
-
const initialDataRef =
|
|
10
|
+
const initialDataRef = useRef({
|
|
14
11
|
...(initialData ?? {}),
|
|
15
12
|
});
|
|
16
|
-
return ((
|
|
13
|
+
return (_jsx(FormConfigContext.Provider, { value: { config }, children: _jsx(FormDataReadyProvider, { ...props, initialData: initialDataRef.current, children: children }) }));
|
|
17
14
|
};
|
|
18
|
-
exports.FormDataProvider = FormDataProvider;
|
|
19
15
|
const FormDataReadyProvider = ({ initialData, inheritData, inheritErrors, children, data: inputData, editData: inputEditData, errors: inputErrors, }) => {
|
|
20
|
-
const externalContext =
|
|
21
|
-
const internalData =
|
|
22
|
-
const internalEditData =
|
|
23
|
-
const internalErrors =
|
|
16
|
+
const externalContext = useContext(FormDataContext);
|
|
17
|
+
const internalData = useFormStore(initialData ?? {});
|
|
18
|
+
const internalEditData = useFormStore({});
|
|
19
|
+
const internalErrors = useFormStore({});
|
|
24
20
|
const data = inputData || (inheritData && externalContext ? externalContext.data : internalData);
|
|
25
21
|
const editData = inputEditData ||
|
|
26
22
|
(inheritData && externalContext ? externalContext.editData : internalEditData);
|
|
27
23
|
const errors = inputErrors || (inheritErrors && externalContext ? externalContext.errors : internalErrors);
|
|
28
|
-
return ((
|
|
24
|
+
return (_jsx(FormDataContext.Provider, { value: { data, editData, errors }, children: children }));
|
|
29
25
|
};
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.FormDataContext = exports.FormConfigContext = void 0;
|
|
4
1
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
import { createContext } from "react";
|
|
3
|
+
export const FormConfigContext = createContext(undefined);
|
|
4
|
+
export const FormDataContext = createContext(undefined);
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
1
|
+
export {};
|
package/dist/es/context/index.js
CHANGED
|
@@ -1,22 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.FormProvider = exports.useForm = void 0;
|
|
18
|
-
__exportStar(require("./data"), exports);
|
|
19
|
-
var context_1 = require("./context");
|
|
20
|
-
Object.defineProperty(exports, "useForm", { enumerable: true, get: function () { return context_1.useForm; } });
|
|
21
|
-
var FormProvider_1 = require("./FormProvider");
|
|
22
|
-
Object.defineProperty(exports, "FormProvider", { enumerable: true, get: function () { return FormProvider_1.FormProvider; } });
|
|
1
|
+
export * from "./data";
|
|
2
|
+
export { useForm } from "./context";
|
|
3
|
+
export { FormProvider } from "./FormProvider";
|
package/dist/es/guard/index.js
CHANGED
|
@@ -1,19 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.isFormFieldConfig = exports.isFormCustomConfig = exports.isFormSectionConfig = exports.isFormRowConfig = void 0;
|
|
4
|
-
const isFormRowConfig = (config) => {
|
|
1
|
+
export const isFormRowConfig = (config) => {
|
|
5
2
|
return !!config && config.type === "row";
|
|
6
3
|
};
|
|
7
|
-
|
|
8
|
-
const isFormSectionConfig = (config) => {
|
|
4
|
+
export const isFormSectionConfig = (config) => {
|
|
9
5
|
return !!config && config.type === "section";
|
|
10
6
|
};
|
|
11
|
-
|
|
12
|
-
const isFormCustomConfig = (config) => {
|
|
7
|
+
export const isFormCustomConfig = (config) => {
|
|
13
8
|
return !!config && config.type === "custom";
|
|
14
9
|
};
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
return !(0, exports.isFormRowConfig)(config) && !(0, exports.isFormSectionConfig)(config) && !(0, exports.isFormCustomConfig)(config);
|
|
10
|
+
export const isFormFieldConfig = (config) => {
|
|
11
|
+
return !isFormRowConfig(config) && !isFormSectionConfig(config) && !isFormCustomConfig(config);
|
|
18
12
|
};
|
|
19
|
-
exports.isFormFieldConfig = isFormFieldConfig;
|
|
@@ -1,19 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
exports.useData = exports.useFormData = void 0;
|
|
4
|
-
const react_1 = require("react");
|
|
5
|
-
const context_1 = require("../context/data/context");
|
|
1
|
+
import { useContext, useSyncExternalStore } from "react";
|
|
2
|
+
import { FormDataContext } from "../context/data/context";
|
|
6
3
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
7
|
-
const useFormData = (selector) => {
|
|
8
|
-
const { data } =
|
|
4
|
+
export const useFormData = (selector) => {
|
|
5
|
+
const { data } = useContext(FormDataContext);
|
|
9
6
|
if (!data) {
|
|
10
7
|
throw new Error("Store not found");
|
|
11
8
|
}
|
|
12
|
-
return
|
|
9
|
+
return useData(data, selector);
|
|
13
10
|
};
|
|
14
|
-
|
|
15
|
-
const
|
|
16
|
-
const state = (0, react_1.useSyncExternalStore)(data.subscribe, () => selector(data.get()), () => selector(data.initialValue));
|
|
11
|
+
export const useData = (data, selector) => {
|
|
12
|
+
const state = useSyncExternalStore(data.subscribe, () => selector(data.get()), () => selector(data.initialValue));
|
|
17
13
|
return [state, data.set, data.get];
|
|
18
14
|
};
|
|
19
|
-
exports.useData = useData;
|
|
@@ -1,14 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const
|
|
5
|
-
const context_1 = require("../context/data/context");
|
|
6
|
-
const useFormErrors = (selector) => {
|
|
7
|
-
const { errors } = (0, react_1.useContext)(context_1.FormDataContext);
|
|
1
|
+
import { useContext, useSyncExternalStore } from "react";
|
|
2
|
+
import { FormDataContext } from "../context/data/context";
|
|
3
|
+
export const useFormErrors = (selector) => {
|
|
4
|
+
const { errors } = useContext(FormDataContext);
|
|
8
5
|
if (!errors) {
|
|
9
6
|
throw new Error("Store not found");
|
|
10
7
|
}
|
|
11
|
-
const state =
|
|
8
|
+
const state = useSyncExternalStore(errors.subscribe, () => selector(errors.get()), () => selector(errors.initialValue));
|
|
12
9
|
return [state, errors.set, errors.get];
|
|
13
10
|
};
|
|
14
|
-
exports.useFormErrors = useFormErrors;
|
|
@@ -1,20 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
const get = (0, react_1.useCallback)(() => store.current, []);
|
|
8
|
-
const subscribers = (0, react_1.useRef)(new Set());
|
|
9
|
-
const set = (0, react_1.useCallback)((value) => {
|
|
1
|
+
import { useCallback, useMemo, useRef } from "react";
|
|
2
|
+
export const useFormStore = (initialValue) => {
|
|
3
|
+
const store = useRef(initialValue);
|
|
4
|
+
const get = useCallback(() => store.current, []);
|
|
5
|
+
const subscribers = useRef(new Set());
|
|
6
|
+
const set = useCallback((value) => {
|
|
10
7
|
store.current = { ...store.current, ...value };
|
|
11
8
|
subscribers.current.forEach(callback => callback());
|
|
12
9
|
}, []);
|
|
13
|
-
const subscribe =
|
|
10
|
+
const subscribe = useCallback((callback) => {
|
|
14
11
|
subscribers.current.add(callback);
|
|
15
12
|
return () => subscribers.current.delete(callback);
|
|
16
13
|
}, []);
|
|
17
|
-
return
|
|
14
|
+
return useMemo(() => {
|
|
18
15
|
return {
|
|
19
16
|
get,
|
|
20
17
|
set,
|
|
@@ -23,4 +20,3 @@ const useFormStore = (initialValue) => {
|
|
|
23
20
|
};
|
|
24
21
|
}, [get, set, subscribe, initialValue]);
|
|
25
22
|
};
|
|
26
|
-
exports.useFormStore = useFormStore;
|
|
@@ -1,16 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
const { data, errors } = (0, react_1.useContext)(context_1.FormDataContext);
|
|
12
|
-
const validateForm = (0, react_1.useCallback)((input = configRef.current, skipUpdate) => {
|
|
13
|
-
const formErrors = (0, validation_1.handleValidateConfig)(input, fieldConfigsRef.current, data.get());
|
|
1
|
+
import { useCallback, useContext } from "react";
|
|
2
|
+
import { FormDataContext } from "../context/data/context";
|
|
3
|
+
import { handleValidateConfig, handleValidateField } from "../validation";
|
|
4
|
+
import { useRefEffect } from "./useRefEffect";
|
|
5
|
+
export const useFormValidations = (config, fieldConfigs) => {
|
|
6
|
+
const configRef = useRefEffect(config);
|
|
7
|
+
const fieldConfigsRef = useRefEffect(fieldConfigs);
|
|
8
|
+
const { data, errors } = useContext(FormDataContext);
|
|
9
|
+
const validateForm = useCallback((input = configRef.current, skipUpdate) => {
|
|
10
|
+
const formErrors = handleValidateConfig(input, fieldConfigsRef.current, data.get());
|
|
14
11
|
if (!skipUpdate) {
|
|
15
12
|
errors.set(formErrors);
|
|
16
13
|
}
|
|
@@ -23,9 +20,9 @@ const useFormValidations = (config, fieldConfigs) => {
|
|
|
23
20
|
}, {});
|
|
24
21
|
return Object.keys(filteredErrors).length ? filteredErrors : null;
|
|
25
22
|
}, [configRef, fieldConfigsRef, data, errors]);
|
|
26
|
-
const validateCategory =
|
|
23
|
+
const validateCategory = useCallback((category) => {
|
|
27
24
|
const fieldConfigs = fieldConfigsRef.current;
|
|
28
|
-
const formErrors =
|
|
25
|
+
const formErrors = handleValidateConfig(Object.keys(fieldConfigs).flatMap(key => {
|
|
29
26
|
const fieldConfig = fieldConfigs[key];
|
|
30
27
|
return fieldConfig.categories && fieldConfig.categories.includes(category)
|
|
31
28
|
? fieldConfig
|
|
@@ -34,8 +31,8 @@ const useFormValidations = (config, fieldConfigs) => {
|
|
|
34
31
|
errors.set(formErrors);
|
|
35
32
|
return formErrors;
|
|
36
33
|
}, [fieldConfigsRef, data, errors]);
|
|
37
|
-
const validateField =
|
|
38
|
-
const formErrors =
|
|
34
|
+
const validateField = useCallback((field, skipUpdate) => {
|
|
35
|
+
const formErrors = handleValidateField(field, fieldConfigsRef.current, data.get());
|
|
39
36
|
if (!skipUpdate) {
|
|
40
37
|
errors.set(formErrors);
|
|
41
38
|
}
|
|
@@ -43,4 +40,3 @@ const useFormValidations = (config, fieldConfigs) => {
|
|
|
43
40
|
}, [fieldConfigsRef, data, errors]);
|
|
44
41
|
return { errors, validateField, validateCategory, validateForm };
|
|
45
42
|
};
|
|
46
|
-
exports.useFormValidations = useFormValidations;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRefEffect.d.ts","sourceRoot":"","sources":["../../../hook/useRefEffect.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,GAAI,CAAC,EAAE,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"useRefEffect.d.ts","sourceRoot":"","sources":["../../../hook/useRefEffect.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,GAAI,CAAC,EAAE,OAAO,CAAC,iCAMvC,CAAC"}
|
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const useRefEffect = (state) => {
|
|
6
|
-
const value = (0, react_1.useRef)(state);
|
|
1
|
+
import { useRef } from "react";
|
|
2
|
+
export const useRefEffect = (state) => {
|
|
3
|
+
const value = useRef(state);
|
|
4
|
+
// eslint-disable-next-line react-hooks/refs
|
|
7
5
|
value.current = state;
|
|
8
6
|
return value;
|
|
9
7
|
};
|
|
10
|
-
exports.useRefEffect = useRefEffect;
|
package/dist/es/type/common.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
1
|
+
export {};
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
1
|
+
export {};
|
package/dist/es/type/config.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
1
|
+
export {};
|
package/dist/es/type/extract.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
1
|
+
export {};
|
package/dist/es/type/field.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
1
|
+
export {};
|
package/dist/es/type/form.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
1
|
+
export {};
|
package/dist/es/type/index.js
CHANGED
|
@@ -1,23 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("./common"), exports);
|
|
18
|
-
__exportStar(require("./condition"), exports);
|
|
19
|
-
__exportStar(require("./config"), exports);
|
|
20
|
-
__exportStar(require("./extract"), exports);
|
|
21
|
-
__exportStar(require("./field"), exports);
|
|
22
|
-
__exportStar(require("./form"), exports);
|
|
23
|
-
__exportStar(require("./validation"), exports);
|
|
1
|
+
export * from "./common";
|
|
2
|
+
export * from "./condition";
|
|
3
|
+
export * from "./config";
|
|
4
|
+
export * from "./extract";
|
|
5
|
+
export * from "./field";
|
|
6
|
+
export * from "./form";
|
|
7
|
+
export * from "./validation";
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
1
|
+
export {};
|
package/dist/es/util/index.js
CHANGED
|
@@ -1,26 +1,18 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.someFieldConfigs = exports.reduceFieldConfigs = exports.mapFieldConfigs = exports.fieldsFromConfig = exports.fieldConfigFromFormField = exports.generateValueFn = exports.generateFormFieldConfigFn = exports.generateOnInput = exports.generateInitialValue = void 0;
|
|
4
|
-
exports.eitherOr = eitherOr;
|
|
5
1
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
6
|
-
|
|
7
|
-
const generateInitialValue = (value) => {
|
|
2
|
+
import { isFormCustomConfig, isFormRowConfig, isFormSectionConfig } from "../guard";
|
|
3
|
+
export const generateInitialValue = (value) => {
|
|
8
4
|
return value;
|
|
9
5
|
};
|
|
10
|
-
|
|
11
|
-
const generateOnInput = (inputFunction) => {
|
|
6
|
+
export const generateOnInput = (inputFunction) => {
|
|
12
7
|
return inputFunction;
|
|
13
8
|
};
|
|
14
|
-
|
|
15
|
-
const generateFormFieldConfigFn = (fieldConfig) => {
|
|
9
|
+
export const generateFormFieldConfigFn = (fieldConfig) => {
|
|
16
10
|
return fieldConfig;
|
|
17
11
|
};
|
|
18
|
-
|
|
19
|
-
const generateValueFn = (valueFn) => {
|
|
12
|
+
export const generateValueFn = (valueFn) => {
|
|
20
13
|
return valueFn;
|
|
21
14
|
};
|
|
22
|
-
|
|
23
|
-
function eitherOr(configOrCondition, either, or) {
|
|
15
|
+
export function eitherOr(configOrCondition, either, or) {
|
|
24
16
|
if (typeof configOrCondition === "boolean") {
|
|
25
17
|
return configOrCondition ? either : or;
|
|
26
18
|
}
|
|
@@ -28,14 +20,13 @@ function eitherOr(configOrCondition, either, or) {
|
|
|
28
20
|
return configOrCondition;
|
|
29
21
|
}
|
|
30
22
|
}
|
|
31
|
-
const fieldConfigFromFormField = ({ name, fieldConfig }, data) => {
|
|
23
|
+
export const fieldConfigFromFormField = ({ name, fieldConfig }, data) => {
|
|
32
24
|
return typeof fieldConfig === "function"
|
|
33
25
|
? fieldConfig({ value: data[name], data })
|
|
34
26
|
: fieldConfig;
|
|
35
27
|
};
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
return (0, exports.reduceFieldConfigs)(config, (acc, field) => {
|
|
28
|
+
export const fieldsFromConfig = (config) => {
|
|
29
|
+
return reduceFieldConfigs(config, (acc, field) => {
|
|
39
30
|
if (field) {
|
|
40
31
|
// @ts-expect-error: ts does not understand this
|
|
41
32
|
acc[field.name] = field;
|
|
@@ -43,33 +34,31 @@ const fieldsFromConfig = (config) => {
|
|
|
43
34
|
return acc;
|
|
44
35
|
});
|
|
45
36
|
};
|
|
46
|
-
|
|
47
|
-
const mapFieldConfigs = (entries, callbackFn) => {
|
|
37
|
+
export const mapFieldConfigs = (entries, callbackFn) => {
|
|
48
38
|
return entries.flatMap((entry, index) => {
|
|
49
39
|
if (!entry) {
|
|
50
40
|
return [];
|
|
51
41
|
}
|
|
52
42
|
switch (true) {
|
|
53
|
-
case
|
|
54
|
-
case
|
|
55
|
-
case
|
|
43
|
+
case isFormRowConfig(entry):
|
|
44
|
+
case isFormSectionConfig(entry):
|
|
45
|
+
case isFormCustomConfig(entry):
|
|
56
46
|
return {
|
|
57
47
|
...entry,
|
|
58
|
-
content:
|
|
48
|
+
content: mapFieldConfigs(entry.content, callbackFn),
|
|
59
49
|
};
|
|
60
50
|
default:
|
|
61
51
|
return callbackFn(entry, index);
|
|
62
52
|
}
|
|
63
53
|
});
|
|
64
54
|
};
|
|
65
|
-
|
|
66
|
-
const reduceFieldConfigs = (entries, callbackFn) => {
|
|
55
|
+
export const reduceFieldConfigs = (entries, callbackFn) => {
|
|
67
56
|
return entries.reduce((acc, entry, index) => {
|
|
68
57
|
switch (true) {
|
|
69
|
-
case
|
|
70
|
-
case
|
|
71
|
-
case
|
|
72
|
-
acc = { ...acc, ...
|
|
58
|
+
case isFormRowConfig(entry):
|
|
59
|
+
case isFormSectionConfig(entry):
|
|
60
|
+
case isFormCustomConfig(entry):
|
|
61
|
+
acc = { ...acc, ...reduceFieldConfigs(entry.content, callbackFn) };
|
|
73
62
|
break;
|
|
74
63
|
default:
|
|
75
64
|
callbackFn(acc, entry, index);
|
|
@@ -78,17 +67,15 @@ const reduceFieldConfigs = (entries, callbackFn) => {
|
|
|
78
67
|
return acc;
|
|
79
68
|
}, {});
|
|
80
69
|
};
|
|
81
|
-
|
|
82
|
-
const someFieldConfigs = (entries, callbackFn) => {
|
|
70
|
+
export const someFieldConfigs = (entries, callbackFn) => {
|
|
83
71
|
return entries.some((entry, index) => {
|
|
84
72
|
switch (true) {
|
|
85
|
-
case
|
|
86
|
-
case
|
|
87
|
-
case
|
|
88
|
-
return
|
|
73
|
+
case isFormRowConfig(entry):
|
|
74
|
+
case isFormSectionConfig(entry):
|
|
75
|
+
case isFormCustomConfig(entry):
|
|
76
|
+
return someFieldConfigs(entry.content, callbackFn);
|
|
89
77
|
default:
|
|
90
78
|
return callbackFn(entry, index);
|
|
91
79
|
}
|
|
92
80
|
});
|
|
93
81
|
};
|
|
94
|
-
exports.someFieldConfigs = someFieldConfigs;
|
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.handleValidateField = exports.handleValidateConfig = void 0;
|
|
4
1
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const handleValidateConfig = (config, fieldConfigs, data) => {
|
|
2
|
+
import { fieldFulfillsConditions } from "../condition";
|
|
3
|
+
import { isFormCustomConfig, isFormRowConfig, isFormSectionConfig } from "../guard";
|
|
4
|
+
export const handleValidateConfig = (config, fieldConfigs, data) => {
|
|
8
5
|
const errors = {};
|
|
9
6
|
config.forEach(entry => {
|
|
10
7
|
const entryErrors = handleValidateEntry(entry, fieldConfigs, data);
|
|
@@ -14,23 +11,22 @@ const handleValidateConfig = (config, fieldConfigs, data) => {
|
|
|
14
11
|
});
|
|
15
12
|
return errors;
|
|
16
13
|
};
|
|
17
|
-
exports.handleValidateConfig = handleValidateConfig;
|
|
18
14
|
const handleValidateEntry = (entry, fieldConfigs, data) => {
|
|
19
15
|
switch (true) {
|
|
20
|
-
case
|
|
21
|
-
case
|
|
22
|
-
case
|
|
23
|
-
return
|
|
16
|
+
case isFormRowConfig(entry):
|
|
17
|
+
case isFormSectionConfig(entry):
|
|
18
|
+
case isFormCustomConfig(entry):
|
|
19
|
+
return handleValidateConfig(entry.content, fieldConfigs, data);
|
|
24
20
|
default:
|
|
25
21
|
if (!entry) {
|
|
26
22
|
return {};
|
|
27
23
|
}
|
|
28
|
-
return
|
|
24
|
+
return handleValidateField(entry, fieldConfigs, data);
|
|
29
25
|
}
|
|
30
26
|
};
|
|
31
|
-
const handleValidateField = ({ name, validations, conditions, valueFn }, fieldConfigs, data) => {
|
|
27
|
+
export const handleValidateField = ({ name, validations, conditions, valueFn }, fieldConfigs, data) => {
|
|
32
28
|
if (!validations ||
|
|
33
|
-
(conditions && !
|
|
29
|
+
(conditions && !fieldFulfillsConditions({ conditions }, fieldConfigs, data))) {
|
|
34
30
|
return { [name]: false };
|
|
35
31
|
}
|
|
36
32
|
const value = valueFn ? valueFn(data) : data[name];
|
|
@@ -57,4 +53,3 @@ const handleValidateField = ({ name, validations, conditions, valueFn }, fieldCo
|
|
|
57
53
|
});
|
|
58
54
|
return { [name]: error && error.message ? error.message : !!error };
|
|
59
55
|
};
|
|
60
|
-
exports.handleValidateField = handleValidateField;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@becklyn/forms",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"homepage": "https://github.com/Becklyn-Studios/ts-libs/tree/main/packages/forms",
|
|
6
6
|
"repository": {
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
"devDependencies": {
|
|
17
17
|
"@becklyn/eslint": "*",
|
|
18
18
|
"@becklyn/tsconfig": "*",
|
|
19
|
-
"@types/react": "^19.2.
|
|
19
|
+
"@types/react": "^19.2.10",
|
|
20
20
|
"@types/styled-components": "^5.1.36",
|
|
21
|
-
"react": "^19.2.
|
|
22
|
-
"react-dom": "^19.2.
|
|
21
|
+
"react": "^19.2.4",
|
|
22
|
+
"react-dom": "^19.2.4",
|
|
23
23
|
"styled-components": "^5.3.11"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|