@mapples/form 1.0.1
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/README.md +411 -0
- package/dist/components/Form.d.ts +37 -0
- package/dist/components/Form.d.ts.map +1 -0
- package/dist/components/Form.js +111 -0
- package/dist/components/Form.js.map +1 -0
- package/dist/components/index.d.ts +3 -0
- package/dist/components/index.d.ts.map +1 -0
- package/dist/components/index.js +3 -0
- package/dist/components/index.js.map +1 -0
- package/dist/context/FormContext.d.ts +19 -0
- package/dist/context/FormContext.d.ts.map +1 -0
- package/dist/context/FormContext.js +28 -0
- package/dist/context/FormContext.js.map +1 -0
- package/dist/context/index.d.ts +4 -0
- package/dist/context/index.d.ts.map +1 -0
- package/dist/context/index.js +4 -0
- package/dist/context/index.js.map +1 -0
- package/dist/hooks/index.d.ts +11 -0
- package/dist/hooks/index.d.ts.map +1 -0
- package/dist/hooks/index.js +11 -0
- package/dist/hooks/index.js.map +1 -0
- package/dist/hooks/useBindFormField.d.ts +43 -0
- package/dist/hooks/useBindFormField.d.ts.map +1 -0
- package/dist/hooks/useBindFormField.js +93 -0
- package/dist/hooks/useBindFormField.js.map +1 -0
- package/dist/hooks/useFormArrayField.d.ts +43 -0
- package/dist/hooks/useFormArrayField.d.ts.map +1 -0
- package/dist/hooks/useFormArrayField.js +88 -0
- package/dist/hooks/useFormArrayField.js.map +1 -0
- package/dist/hooks/useFormContext.d.ts +28 -0
- package/dist/hooks/useFormContext.d.ts.map +1 -0
- package/dist/hooks/useFormContext.js +32 -0
- package/dist/hooks/useFormContext.js.map +1 -0
- package/dist/hooks/useFormField.d.ts +42 -0
- package/dist/hooks/useFormField.d.ts.map +1 -0
- package/dist/hooks/useFormField.js +79 -0
- package/dist/hooks/useFormField.js.map +1 -0
- package/dist/hooks/useFormFieldToggle.d.ts +33 -0
- package/dist/hooks/useFormFieldToggle.d.ts.map +1 -0
- package/dist/hooks/useFormFieldToggle.js +49 -0
- package/dist/hooks/useFormFieldToggle.js.map +1 -0
- package/dist/hooks/useFormHistory.d.ts +30 -0
- package/dist/hooks/useFormHistory.d.ts.map +1 -0
- package/dist/hooks/useFormHistory.js +57 -0
- package/dist/hooks/useFormHistory.js.map +1 -0
- package/dist/hooks/useFormState.d.ts +34 -0
- package/dist/hooks/useFormState.d.ts.map +1 -0
- package/dist/hooks/useFormState.js +54 -0
- package/dist/hooks/useFormState.js.map +1 -0
- package/dist/hooks/useFormSubmit.d.ts +27 -0
- package/dist/hooks/useFormSubmit.d.ts.map +1 -0
- package/dist/hooks/useFormSubmit.js +31 -0
- package/dist/hooks/useFormSubmit.js.map +1 -0
- package/dist/hooks/useFormValue.d.ts +28 -0
- package/dist/hooks/useFormValue.d.ts.map +1 -0
- package/dist/hooks/useFormValue.js +43 -0
- package/dist/hooks/useFormValue.js.map +1 -0
- package/dist/index.d.ts +45 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +49 -0
- package/dist/index.js.map +1 -0
- package/dist/state/index.d.ts +128 -0
- package/dist/state/index.d.ts.map +1 -0
- package/dist/state/index.js +249 -0
- package/dist/state/index.js.map +1 -0
- package/dist/types/index.d.ts +71 -0
- package/dist/types/index.d.ts.map +1 -0
- package/dist/types/index.js +1 -0
- package/dist/types/index.js.map +1 -0
- package/dist/utils/index.d.ts +40 -0
- package/dist/utils/index.d.ts.map +1 -0
- package/dist/utils/index.js +95 -0
- package/dist/utils/index.js.map +1 -0
- package/package.json +40 -0
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { useCallback, useContext, useEffect, useState } from 'react';
|
|
2
|
+
import FormContext from '../context';
|
|
3
|
+
/**
|
|
4
|
+
* Hook to manage form history for undo/redo functionality.
|
|
5
|
+
* This hook provides methods to navigate through form history and check availability of undo/redo operations.
|
|
6
|
+
*
|
|
7
|
+
* @returns Object containing history navigation methods and state
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```tsx
|
|
11
|
+
* const HistoryControls = () => {
|
|
12
|
+
* const { prev, next, canPrev, canNext } = useFormHistory();
|
|
13
|
+
*
|
|
14
|
+
* return (
|
|
15
|
+
* <div>
|
|
16
|
+
* <button onClick={prev} disabled={!canPrev}>Undo</button>
|
|
17
|
+
* <button onClick={next} disabled={!canNext}>Redo</button>
|
|
18
|
+
* </div>
|
|
19
|
+
* );
|
|
20
|
+
* };
|
|
21
|
+
* ```
|
|
22
|
+
*
|
|
23
|
+
* @public
|
|
24
|
+
*/
|
|
25
|
+
const useFormHistory = () => {
|
|
26
|
+
const { form } = useContext(FormContext);
|
|
27
|
+
const [state, setState] = useState({ canPrev: false, canNext: false });
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
const unsubscribe = form?.subscribeOnChange(() => {
|
|
30
|
+
setState({
|
|
31
|
+
canPrev: form?.canPrev() || false,
|
|
32
|
+
canNext: form?.canNext() || false,
|
|
33
|
+
});
|
|
34
|
+
});
|
|
35
|
+
return () => {
|
|
36
|
+
unsubscribe?.();
|
|
37
|
+
};
|
|
38
|
+
}, [form]);
|
|
39
|
+
const prev = useCallback(() => {
|
|
40
|
+
if (!form)
|
|
41
|
+
return false;
|
|
42
|
+
return form.prev();
|
|
43
|
+
}, [form]);
|
|
44
|
+
const next = useCallback(() => {
|
|
45
|
+
if (!form)
|
|
46
|
+
return false;
|
|
47
|
+
return form.next();
|
|
48
|
+
}, [form]);
|
|
49
|
+
return {
|
|
50
|
+
prev,
|
|
51
|
+
next,
|
|
52
|
+
canPrev: state.canPrev,
|
|
53
|
+
canNext: state.canNext,
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
export default useFormHistory;
|
|
57
|
+
//# sourceMappingURL=useFormHistory.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFormHistory.js","sourceRoot":"","sources":["../../src/hooks/useFormHistory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,WAAW,MAAM,YAAY,CAAC;AAErC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,cAAc,GAAG,GAAG,EAAE;IAC1B,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;IAEvE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,IAAI,EAAE,iBAAiB,CAAC,GAAG,EAAE;YAC/C,QAAQ,CAAC;gBACP,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,KAAK;gBACjC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,KAAK;aAClC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,WAAW,EAAE,EAAE,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,IAAI,CAAC,IAAI;YAAE,OAAO,KAAK,CAAC;QACxB,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,IAAI,CAAC,IAAI;YAAE,OAAO,KAAK,CAAC;QACxB,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO;QACL,IAAI;QACJ,IAAI;QACJ,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,OAAO,EAAE,KAAK,CAAC,OAAO;KACvB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Hook to manage the entire form state with reactive values and control methods.
|
|
3
|
+
* This hook provides access to all form values and methods to update them.
|
|
4
|
+
*
|
|
5
|
+
* @template T - The type of the form data object
|
|
6
|
+
* @returns Object containing form values and control methods
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```tsx
|
|
10
|
+
* const MyComponent = () => {
|
|
11
|
+
* const { values, setValues, getValues } = useFormState<UserForm>();
|
|
12
|
+
*
|
|
13
|
+
* const handleReset = () => {
|
|
14
|
+
* setValues({ name: '', email: '' });
|
|
15
|
+
* };
|
|
16
|
+
*
|
|
17
|
+
* return (
|
|
18
|
+
* <div>
|
|
19
|
+
* <p>Current values: {JSON.stringify(values)}</p>
|
|
20
|
+
* <button onClick={handleReset}>Reset Form</button>
|
|
21
|
+
* </div>
|
|
22
|
+
* );
|
|
23
|
+
* };
|
|
24
|
+
* ```
|
|
25
|
+
*
|
|
26
|
+
* @public
|
|
27
|
+
*/
|
|
28
|
+
declare const useFormState: <T extends object>() => {
|
|
29
|
+
values: T | undefined;
|
|
30
|
+
setValues: (values: T) => void;
|
|
31
|
+
getValues: () => T | undefined;
|
|
32
|
+
};
|
|
33
|
+
export default useFormState;
|
|
34
|
+
//# sourceMappingURL=useFormState.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFormState.d.ts","sourceRoot":"","sources":["../../src/hooks/useFormState.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,QAAA,MAAM,YAAY,GAAI,CAAC,SAAS,MAAM;;wBAezB,CAAC;qBAOkB,CAAC,GAAG,SAAS;CAQ5C,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { useCallback, useContext, useEffect, useState } from 'react';
|
|
2
|
+
import FormContext from '../context';
|
|
3
|
+
/**
|
|
4
|
+
* Hook to manage the entire form state with reactive values and control methods.
|
|
5
|
+
* This hook provides access to all form values and methods to update them.
|
|
6
|
+
*
|
|
7
|
+
* @template T - The type of the form data object
|
|
8
|
+
* @returns Object containing form values and control methods
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* const MyComponent = () => {
|
|
13
|
+
* const { values, setValues, getValues } = useFormState<UserForm>();
|
|
14
|
+
*
|
|
15
|
+
* const handleReset = () => {
|
|
16
|
+
* setValues({ name: '', email: '' });
|
|
17
|
+
* };
|
|
18
|
+
*
|
|
19
|
+
* return (
|
|
20
|
+
* <div>
|
|
21
|
+
* <p>Current values: {JSON.stringify(values)}</p>
|
|
22
|
+
* <button onClick={handleReset}>Reset Form</button>
|
|
23
|
+
* </div>
|
|
24
|
+
* );
|
|
25
|
+
* };
|
|
26
|
+
* ```
|
|
27
|
+
*
|
|
28
|
+
* @public
|
|
29
|
+
*/
|
|
30
|
+
const useFormState = () => {
|
|
31
|
+
const [values, setFormValues] = useState();
|
|
32
|
+
const { form } = useContext(FormContext);
|
|
33
|
+
useEffect(() => {
|
|
34
|
+
const unsubscribe = form?.subscribeOnChange((values) => {
|
|
35
|
+
setFormValues(values);
|
|
36
|
+
});
|
|
37
|
+
return () => {
|
|
38
|
+
unsubscribe?.();
|
|
39
|
+
};
|
|
40
|
+
}, [form]);
|
|
41
|
+
const setValues = useCallback((values) => {
|
|
42
|
+
form?.setValues(values);
|
|
43
|
+
}, [form]);
|
|
44
|
+
const getValues = useCallback(() => {
|
|
45
|
+
return form?.getValues();
|
|
46
|
+
}, [form]);
|
|
47
|
+
return {
|
|
48
|
+
values,
|
|
49
|
+
setValues,
|
|
50
|
+
getValues,
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
export default useFormState;
|
|
54
|
+
//# sourceMappingURL=useFormState.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFormState.js","sourceRoot":"","sources":["../../src/hooks/useFormState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,WAAW,MAAM,YAAY,CAAC;AAErC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,YAAY,GAAG,GAAqB,EAAE;IAC1C,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GAAG,QAAQ,EAAK,CAAC;IAE9C,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAEzC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,IAAI,EAAE,iBAAiB,CAAI,CAAC,MAAM,EAAE,EAAE;YACxD,aAAa,CAAC,MAAM,CAAC,CAAC;QACxB,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE;YACV,WAAW,EAAE,EAAE,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,MAAS,EAAE,EAAE;QACZ,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC1B,CAAC,EACD,CAAC,IAAI,CAAC,CACP,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,OAAO,IAAI,EAAE,SAAS,EAAmB,CAAC;IAC5C,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO;QACL,MAAM;QACN,SAAS;QACT,SAAS;KACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Hook to access form submission state and submit function.
|
|
3
|
+
* This hook provides the current submission state and the submit function.
|
|
4
|
+
*
|
|
5
|
+
* @returns Object containing submission state and submit function
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* const SubmitButton = () => {
|
|
10
|
+
* const { submitting, submitForm } = useFormSubmit();
|
|
11
|
+
*
|
|
12
|
+
* return (
|
|
13
|
+
* <button onClick={submitForm} disabled={submitting}>
|
|
14
|
+
* {submitting ? 'Submitting...' : 'Submit'}
|
|
15
|
+
* </button>
|
|
16
|
+
* );
|
|
17
|
+
* };
|
|
18
|
+
* ```
|
|
19
|
+
*
|
|
20
|
+
* @public
|
|
21
|
+
*/
|
|
22
|
+
declare const useFormSubmit: () => {
|
|
23
|
+
submitting: boolean;
|
|
24
|
+
submitForm: () => void;
|
|
25
|
+
};
|
|
26
|
+
export default useFormSubmit;
|
|
27
|
+
//# sourceMappingURL=useFormSubmit.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFormSubmit.d.ts","sourceRoot":"","sources":["../../src/hooks/useFormSubmit.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,aAAa;;;CAOlB,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import useFormContext from './useFormContext';
|
|
2
|
+
/**
|
|
3
|
+
* Hook to access form submission state and submit function.
|
|
4
|
+
* This hook provides the current submission state and the submit function.
|
|
5
|
+
*
|
|
6
|
+
* @returns Object containing submission state and submit function
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```tsx
|
|
10
|
+
* const SubmitButton = () => {
|
|
11
|
+
* const { submitting, submitForm } = useFormSubmit();
|
|
12
|
+
*
|
|
13
|
+
* return (
|
|
14
|
+
* <button onClick={submitForm} disabled={submitting}>
|
|
15
|
+
* {submitting ? 'Submitting...' : 'Submit'}
|
|
16
|
+
* </button>
|
|
17
|
+
* );
|
|
18
|
+
* };
|
|
19
|
+
* ```
|
|
20
|
+
*
|
|
21
|
+
* @public
|
|
22
|
+
*/
|
|
23
|
+
const useFormSubmit = () => {
|
|
24
|
+
const { submitting, submitForm } = useFormContext();
|
|
25
|
+
return {
|
|
26
|
+
submitting,
|
|
27
|
+
submitForm,
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
export default useFormSubmit;
|
|
31
|
+
//# sourceMappingURL=useFormSubmit.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFormSubmit.js","sourceRoot":"","sources":["../../src/hooks/useFormSubmit.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,aAAa,GAAG,GAAG,EAAE;IACzB,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,cAAc,EAAE,CAAC;IAEpD,OAAO;QACL,UAAU;QACV,UAAU;KACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Hook to get a reactive value from the form state.
|
|
3
|
+
* This hook subscribes to value changes and returns the current value.
|
|
4
|
+
*
|
|
5
|
+
* @template T - The type of the value to retrieve
|
|
6
|
+
* @param fieldPath - Optional dot notation path to the field. If not provided, returns all form values
|
|
7
|
+
* @returns The current value at the specified path or all form values
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```tsx
|
|
11
|
+
* const MyComponent = () => {
|
|
12
|
+
* const userName = useFormValue<string>('user.name');
|
|
13
|
+
* const allValues = useFormValue<UserForm>();
|
|
14
|
+
*
|
|
15
|
+
* return (
|
|
16
|
+
* <div>
|
|
17
|
+
* <p>User name: {userName}</p>
|
|
18
|
+
* <p>All values: {JSON.stringify(allValues)}</p>
|
|
19
|
+
* </div>
|
|
20
|
+
* );
|
|
21
|
+
* };
|
|
22
|
+
* ```
|
|
23
|
+
*
|
|
24
|
+
* @public
|
|
25
|
+
*/
|
|
26
|
+
declare const useFormValue: <T>(fieldPath?: string) => T | undefined;
|
|
27
|
+
export default useFormValue;
|
|
28
|
+
//# sourceMappingURL=useFormValue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFormValue.d.ts","sourceRoot":"","sources":["../../src/hooks/useFormValue.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,YAAY,GAAI,CAAC,EAAE,YAAY,MAAM,kBAkB1C,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { useContext, useEffect, useState } from 'react';
|
|
2
|
+
import FormContext from '../context';
|
|
3
|
+
/**
|
|
4
|
+
* Hook to get a reactive value from the form state.
|
|
5
|
+
* This hook subscribes to value changes and returns the current value.
|
|
6
|
+
*
|
|
7
|
+
* @template T - The type of the value to retrieve
|
|
8
|
+
* @param fieldPath - Optional dot notation path to the field. If not provided, returns all form values
|
|
9
|
+
* @returns The current value at the specified path or all form values
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```tsx
|
|
13
|
+
* const MyComponent = () => {
|
|
14
|
+
* const userName = useFormValue<string>('user.name');
|
|
15
|
+
* const allValues = useFormValue<UserForm>();
|
|
16
|
+
*
|
|
17
|
+
* return (
|
|
18
|
+
* <div>
|
|
19
|
+
* <p>User name: {userName}</p>
|
|
20
|
+
* <p>All values: {JSON.stringify(allValues)}</p>
|
|
21
|
+
* </div>
|
|
22
|
+
* );
|
|
23
|
+
* };
|
|
24
|
+
* ```
|
|
25
|
+
*
|
|
26
|
+
* @public
|
|
27
|
+
*/
|
|
28
|
+
const useFormValue = (fieldPath) => {
|
|
29
|
+
const { form } = useContext(FormContext);
|
|
30
|
+
const [value, setValue] = useState();
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
setValue(form?.getValue(fieldPath));
|
|
33
|
+
}, [fieldPath, form]);
|
|
34
|
+
useEffect(() => {
|
|
35
|
+
const unsubscribe = form?.subscribeOnChange(setValue, fieldPath);
|
|
36
|
+
return () => {
|
|
37
|
+
unsubscribe?.();
|
|
38
|
+
};
|
|
39
|
+
}, [fieldPath, form]);
|
|
40
|
+
return value;
|
|
41
|
+
};
|
|
42
|
+
export default useFormValue;
|
|
43
|
+
//# sourceMappingURL=useFormValue.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFormValue.js","sourceRoot":"","sources":["../../src/hooks/useFormValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,WAAW,MAAM,YAAY,CAAC;AAErC;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,YAAY,GAAG,CAAI,SAAkB,EAAE,EAAE;IAC7C,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAEzC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAK,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC;IAEtB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,IAAI,EAAE,iBAAiB,CAAI,QAAQ,EAAE,SAAS,CAAC,CAAC;QAEpE,OAAO,GAAG,EAAE;YACV,WAAW,EAAE,EAAE,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC;IAEtB,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import FormState from './state';
|
|
2
|
+
/**
|
|
3
|
+
* @mapples/form - A comprehensive form management library for React and React Native
|
|
4
|
+
*
|
|
5
|
+
* This package provides a powerful and flexible form state management solution with:
|
|
6
|
+
* - Type-safe form handling with TypeScript support
|
|
7
|
+
* - Yup validation integration
|
|
8
|
+
* - Form history management (undo/redo functionality)
|
|
9
|
+
* - Reactive form state with subscription-based updates
|
|
10
|
+
* - Comprehensive hook-based API for form field management
|
|
11
|
+
* - Support for nested objects and arrays
|
|
12
|
+
* - Touch state tracking for better UX
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```tsx
|
|
16
|
+
* import { Form, useFormField, useFormSubmit } from '@mapples/form';
|
|
17
|
+
* import * as yup from 'yup';
|
|
18
|
+
*
|
|
19
|
+
* const schema = yup.object({
|
|
20
|
+
* name: yup.string().required('Name is required'),
|
|
21
|
+
* email: yup.string().email().required('Email is required'),
|
|
22
|
+
* });
|
|
23
|
+
*
|
|
24
|
+
* const MyForm = () => (
|
|
25
|
+
* <Form
|
|
26
|
+
* initialValues={{ name: '', email: '' }}
|
|
27
|
+
* validationSchema={schema}
|
|
28
|
+
* onSubmit={async (values) => {
|
|
29
|
+
* console.log('Form submitted:', values);
|
|
30
|
+
* }}
|
|
31
|
+
* >
|
|
32
|
+
* <NameField />
|
|
33
|
+
* <EmailField />
|
|
34
|
+
* <SubmitButton />
|
|
35
|
+
* </Form>
|
|
36
|
+
* );
|
|
37
|
+
* ```
|
|
38
|
+
*
|
|
39
|
+
* @public
|
|
40
|
+
*/
|
|
41
|
+
export * from './types';
|
|
42
|
+
export * from './components';
|
|
43
|
+
export * from './hooks';
|
|
44
|
+
export { FormState };
|
|
45
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,SAAS,CAAC;AAEhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAGH,cAAc,SAAS,CAAC;AAGxB,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,OAAO,EAAE,SAAS,EAAE,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import FormState from './state';
|
|
2
|
+
/**
|
|
3
|
+
* @mapples/form - A comprehensive form management library for React and React Native
|
|
4
|
+
*
|
|
5
|
+
* This package provides a powerful and flexible form state management solution with:
|
|
6
|
+
* - Type-safe form handling with TypeScript support
|
|
7
|
+
* - Yup validation integration
|
|
8
|
+
* - Form history management (undo/redo functionality)
|
|
9
|
+
* - Reactive form state with subscription-based updates
|
|
10
|
+
* - Comprehensive hook-based API for form field management
|
|
11
|
+
* - Support for nested objects and arrays
|
|
12
|
+
* - Touch state tracking for better UX
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```tsx
|
|
16
|
+
* import { Form, useFormField, useFormSubmit } from '@mapples/form';
|
|
17
|
+
* import * as yup from 'yup';
|
|
18
|
+
*
|
|
19
|
+
* const schema = yup.object({
|
|
20
|
+
* name: yup.string().required('Name is required'),
|
|
21
|
+
* email: yup.string().email().required('Email is required'),
|
|
22
|
+
* });
|
|
23
|
+
*
|
|
24
|
+
* const MyForm = () => (
|
|
25
|
+
* <Form
|
|
26
|
+
* initialValues={{ name: '', email: '' }}
|
|
27
|
+
* validationSchema={schema}
|
|
28
|
+
* onSubmit={async (values) => {
|
|
29
|
+
* console.log('Form submitted:', values);
|
|
30
|
+
* }}
|
|
31
|
+
* >
|
|
32
|
+
* <NameField />
|
|
33
|
+
* <EmailField />
|
|
34
|
+
* <SubmitButton />
|
|
35
|
+
* </Form>
|
|
36
|
+
* );
|
|
37
|
+
* ```
|
|
38
|
+
*
|
|
39
|
+
* @public
|
|
40
|
+
*/
|
|
41
|
+
// Export all types
|
|
42
|
+
export * from './types';
|
|
43
|
+
// Export all components
|
|
44
|
+
export * from './components';
|
|
45
|
+
// Export all hooks
|
|
46
|
+
export * from './hooks';
|
|
47
|
+
// Export FormState class for advanced usage
|
|
48
|
+
export { FormState };
|
|
49
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,SAAS,CAAC;AAEhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH,mBAAmB;AACnB,cAAc,SAAS,CAAC;AAExB,wBAAwB;AACxB,cAAc,cAAc,CAAC;AAE7B,mBAAmB;AACnB,cAAc,SAAS,CAAC;AAExB,4CAA4C;AAC5C,OAAO,EAAE,SAAS,EAAE,CAAC"}
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
import { ObjectSchema, ValidationError } from 'yup';
|
|
2
|
+
import type { SubscriptionCallBack } from '../types';
|
|
3
|
+
/**
|
|
4
|
+
* FormState manages the state of a form including values, validation, history, and subscriptions.
|
|
5
|
+
* It provides methods to get/set values, validate data, manage history for undo/redo functionality,
|
|
6
|
+
* and subscribe to value changes.
|
|
7
|
+
*
|
|
8
|
+
* @template T - The type of the form data object
|
|
9
|
+
* @public
|
|
10
|
+
*/
|
|
11
|
+
declare class FormState<T extends object> {
|
|
12
|
+
private values;
|
|
13
|
+
private validationSchema?;
|
|
14
|
+
private subscriptions;
|
|
15
|
+
private formHistorySubscriptions;
|
|
16
|
+
private errors;
|
|
17
|
+
private history;
|
|
18
|
+
private historyIndex;
|
|
19
|
+
private readonly historyItems;
|
|
20
|
+
private readonly historyItemThrottle;
|
|
21
|
+
private saveCounter;
|
|
22
|
+
private readonly filterHistoryKeys;
|
|
23
|
+
/**
|
|
24
|
+
* Creates a new FormState instance.
|
|
25
|
+
*
|
|
26
|
+
* @param initialValues - The initial values for the form
|
|
27
|
+
* @param validationSchema - Optional Yup validation schema
|
|
28
|
+
* @param historyItems - Number of history items to keep for undo/redo (0 to disable)
|
|
29
|
+
* @param historyItemThrottle - Throttle for saving history items (every Nth change)
|
|
30
|
+
* @param filterHistoryKeys - Array of field paths to exclude from history tracking
|
|
31
|
+
*/
|
|
32
|
+
constructor(initialValues: T, validationSchema?: ObjectSchema<T>, historyItems?: number, historyItemThrottle?: number, filterHistoryKeys?: string[]);
|
|
33
|
+
/**
|
|
34
|
+
* Gets a deep copy of all form values.
|
|
35
|
+
*
|
|
36
|
+
* @returns A deep copy of the current form values
|
|
37
|
+
*/
|
|
38
|
+
getValues(): T;
|
|
39
|
+
/**
|
|
40
|
+
* Sets validation errors for the form.
|
|
41
|
+
*
|
|
42
|
+
* @param errors - Validation errors organized by field path
|
|
43
|
+
*/
|
|
44
|
+
setErrors(errors: Record<string, ValidationError[]>): void;
|
|
45
|
+
/**
|
|
46
|
+
* Gets the current validation errors.
|
|
47
|
+
*
|
|
48
|
+
* @returns Current validation errors or null if no errors
|
|
49
|
+
*/
|
|
50
|
+
getErrors(): Record<string, ValidationError[]> | null;
|
|
51
|
+
/**
|
|
52
|
+
* Sets all form values and triggers subscriptions.
|
|
53
|
+
*
|
|
54
|
+
* @param values - New values to set for the form
|
|
55
|
+
*/
|
|
56
|
+
setValues(values: T): void;
|
|
57
|
+
/**
|
|
58
|
+
* Sets a value at a specific path and triggers subscriptions.
|
|
59
|
+
*
|
|
60
|
+
* @template V - The type of value being set
|
|
61
|
+
* @param path - Dot notation path to the field (e.g., 'user.name')
|
|
62
|
+
* @param value - The value to set at the specified path
|
|
63
|
+
*/
|
|
64
|
+
setValue<V>(path: string, value?: V): void;
|
|
65
|
+
/**
|
|
66
|
+
* Subscribes to form value changes.
|
|
67
|
+
*
|
|
68
|
+
* @template V - The type of value being subscribed to
|
|
69
|
+
* @param cb - Callback function to execute when values change
|
|
70
|
+
* @param path - Optional path to subscribe to a specific field
|
|
71
|
+
* @returns Unsubscribe function to remove the subscription
|
|
72
|
+
*/
|
|
73
|
+
subscribeOnChange<V>(cb: SubscriptionCallBack<V>, path?: string): () => boolean;
|
|
74
|
+
/**
|
|
75
|
+
* Subscribes to form history changes (undo/redo operations).
|
|
76
|
+
*
|
|
77
|
+
* @param cb - Callback function to execute when history changes
|
|
78
|
+
* @returns Unsubscribe function to remove the subscription
|
|
79
|
+
*/
|
|
80
|
+
subscribeOnHistoryChange(cb: () => void): () => boolean;
|
|
81
|
+
/**
|
|
82
|
+
* Gets a value at a specific path or all values if no path is provided.
|
|
83
|
+
*
|
|
84
|
+
* @template V - The type of value to return
|
|
85
|
+
* @param path - Optional dot notation path to the field
|
|
86
|
+
* @returns The value at the specified path or all form values
|
|
87
|
+
*/
|
|
88
|
+
getValue<V>(path?: string): V;
|
|
89
|
+
/**
|
|
90
|
+
* Validates the form using the provided validation schema.
|
|
91
|
+
*
|
|
92
|
+
* @throws {Record<string, ValidationError[]>} Throws validation errors if validation fails
|
|
93
|
+
*/
|
|
94
|
+
validate(): Promise<void>;
|
|
95
|
+
private saveToHistory;
|
|
96
|
+
/**
|
|
97
|
+
* Moves to the previous state in the form history (undo operation).
|
|
98
|
+
*
|
|
99
|
+
* @returns True if the operation was successful, false if no previous state exists
|
|
100
|
+
*/
|
|
101
|
+
prev(): boolean;
|
|
102
|
+
/**
|
|
103
|
+
* Moves to the next state in the form history (redo operation).
|
|
104
|
+
*
|
|
105
|
+
* @returns True if the operation was successful, false if no next state exists
|
|
106
|
+
*/
|
|
107
|
+
next(): boolean;
|
|
108
|
+
/**
|
|
109
|
+
* Checks if there is a previous state available for undo operation.
|
|
110
|
+
*
|
|
111
|
+
* @returns True if undo operation is possible
|
|
112
|
+
*/
|
|
113
|
+
canPrev(): boolean;
|
|
114
|
+
/**
|
|
115
|
+
* Checks if there is a next state available for redo operation.
|
|
116
|
+
*
|
|
117
|
+
* @returns True if redo operation is possible
|
|
118
|
+
*/
|
|
119
|
+
canNext(): boolean;
|
|
120
|
+
private notifySubscriptions;
|
|
121
|
+
private notifyHistorySubscriptions;
|
|
122
|
+
private remapValidationError;
|
|
123
|
+
private unsubscribeOnChange;
|
|
124
|
+
private unsubscribeOnHistoryChange;
|
|
125
|
+
private generateListenerId;
|
|
126
|
+
}
|
|
127
|
+
export default FormState;
|
|
128
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/state/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAEpD,OAAO,KAAK,EAEV,oBAAoB,EAErB,MAAM,UAAU,CAAC;AAElB;;;;;;;GAOG;AACH,cAAM,SAAS,CAAC,CAAC,SAAS,MAAM;IAC9B,OAAO,CAAC,MAAM,CAAI;IAElB,OAAO,CAAC,gBAAgB,CAAC,CAAkB;IAC3C,OAAO,CAAC,aAAa,CAA6C;IAClE,OAAO,CAAC,wBAAwB,CAAsC;IACtE,OAAO,CAAC,MAAM,CAAkD;IAEhE,OAAO,CAAC,OAAO,CAAW;IAC1B,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAS;IACtC,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAS;IAC7C,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAW;IAE7C;;;;;;;;OAQG;gBAED,aAAa,EAAE,CAAC,EAChB,gBAAgB,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAClC,YAAY,GAAE,MAAU,EACxB,mBAAmB,GAAE,MAAU,EAC/B,iBAAiB,GAAE,MAAM,EAAO;IAclC;;;;OAIG;IACH,SAAS;IAIT;;;;OAIG;IACH,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,EAAE,CAAC;IAInD;;;;OAIG;IACH,SAAS;IAIT;;;;OAIG;IACH,SAAS,CAAC,MAAM,EAAE,CAAC;IAYnB;;;;;;OAMG;IACH,QAAQ,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;IAmBnC;;;;;;;OAOG;IACH,iBAAiB,CAAC,CAAC,EAAE,EAAE,EAAE,oBAAoB,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,MAAM;IAW/D;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,EAAE,MAAM,IAAI;IAQvC;;;;;;OAMG;IACH,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,CAAC;IAI7B;;;;OAIG;IACG,QAAQ;IAYd,OAAO,CAAC,aAAa;IA4BrB;;;;OAIG;IACH,IAAI;IASJ;;;;OAIG;IACH,IAAI;IASJ;;;;OAIG;IACH,OAAO;IAIP;;;;OAIG;IACH,OAAO;IAIP,OAAO,CAAC,mBAAmB;IAU3B,OAAO,CAAC,0BAA0B;IAMlC,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,0BAA0B;IAIlC,OAAO,CAAC,kBAAkB;CAM3B;AAED,eAAe,SAAS,CAAC"}
|