@bolttech/form-engine 3.0.2-beta.4 → 3.0.2-beta.6
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
CHANGED
|
@@ -122,7 +122,7 @@ Mappers are the configuration that needs to be provided in order to use componen
|
|
|
122
122
|
The mapper configuration goes as it follows:
|
|
123
123
|
|
|
124
124
|
| Prop | Type | Description |
|
|
125
|
-
|
|
125
|
+
|------------------|------------------------|--------------------------------------------------------------------------------------------------------------------------|
|
|
126
126
|
| componentName | string | name to be used onto schema to identify the component to be rendered on a field |
|
|
127
127
|
| events | TComponentPropsMapping | events mapping that will reference the component prop with the respective form-engine prop that will handle it's content |
|
|
128
128
|
| valueChangeEvent | TValueChangeEvent | component handle function to define how the value is extracted from the 'onChange' event of the component |
|
|
@@ -131,17 +131,18 @@ The mapper configuration goes as it follows:
|
|
|
131
131
|
|
|
132
132
|
`events` are optional and will reference component props that will provide it's dynamic behaviour:
|
|
133
133
|
|
|
134
|
-
| Prop | Type | Description
|
|
135
|
-
|
|
136
|
-
| getValue | string | component property that will contain the value
|
|
137
|
-
| setValue | string | component property that handles onChange events triggered by the component
|
|
138
|
-
| onBlur | string | component property that handles onBlur events triggered by the component
|
|
139
|
-
| onClick | string | component property that handles onClick events triggered by the component
|
|
140
|
-
|
|
|
141
|
-
|
|
|
142
|
-
|
|
|
143
|
-
|
|
|
144
|
-
|
|
|
134
|
+
| Prop | Type | Description |
|
|
135
|
+
|-----------------|--------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
136
|
+
| getValue | string | component property that will contain the value |
|
|
137
|
+
| setValue | string | component property that handles onChange events triggered by the component |
|
|
138
|
+
| onBlur | string | component property that handles onBlur events triggered by the component |
|
|
139
|
+
| onClick | string | component property that handles onClick events triggered by the component |
|
|
140
|
+
| onSubmit | string | component property that handles form submission event triggered by the component (a way to submit a form using AsFormFieldBuilder, if used with AsFormField and Form will trigger submission twice) |
|
|
141
|
+
| onFocus | string | component property that handles onFocus events triggered by the component |
|
|
142
|
+
| onKeyUp | string | component property that handles onKeyUp events triggered by the component |
|
|
143
|
+
| onKeyDown | string | component property that handles onKeyDown events triggered by the component |
|
|
144
|
+
| setErrorMessage | string | component property that receives the errors of the field as string |
|
|
145
|
+
| setErrorState | string | component property that receives the error status of the field as boolean (not implemented) |
|
|
145
146
|
|
|
146
147
|
### component and asynccomponent
|
|
147
148
|
|
|
@@ -1107,10 +1108,11 @@ useFormGroup({ ids: ['form1', 'form2'], onData: (payload) => console.log(payload
|
|
|
1107
1108
|
|
|
1108
1109
|
As `useForm`, `useFormGroup` serves the same purpose, but the difference is that it handles multiple forms and has limited callback functions to set:
|
|
1109
1110
|
|
|
1110
|
-
| method
|
|
1111
|
-
|
|
1112
|
-
| onData
|
|
1113
|
-
| onValid
|
|
1111
|
+
| method | payload | description |
|
|
1112
|
+
|----------|-----------------------------------|-------------------------------------------------------------|
|
|
1113
|
+
| onData | TFormGroupOnDataEventPayload<T> | event occurring when a value is changing via input or logic |
|
|
1114
|
+
| onValid | TFormGroupOnValidEventPayload | event occurring when validation status changes on the form |
|
|
1115
|
+
| onSubmit | TFormGroupOnSubmitEventPayload<T> | event occurring when form submission is trigger |
|
|
1114
1116
|
|
|
1115
1117
|
<a id="asformfield"></a>
|
|
1116
1118
|
|
package/index.esm.js
CHANGED
|
@@ -2207,6 +2207,7 @@ const FieldWrapper = ({
|
|
|
2207
2207
|
if (events === null || events === void 0 ? void 0 : events.getValue) props[events.getValue] = handleChange;
|
|
2208
2208
|
if (events === null || events === void 0 ? void 0 : events.onFocus) props[events.onFocus] = () => handleEvent('ON_FIELD_FOCUS');
|
|
2209
2209
|
if (events === null || events === void 0 ? void 0 : events.onClick) props[events.onClick] = () => handleEvent('ON_FIELD_CLICK');
|
|
2210
|
+
if (events === null || events === void 0 ? void 0 : events.onSubmit) props[events.onSubmit] = () => handleEvent('ON_FORM_SUBMIT');
|
|
2210
2211
|
if (events === null || events === void 0 ? void 0 : events.onKeyUp) props[events.onKeyUp] = () => handleEvent('ON_FIELD_KEYUP');
|
|
2211
2212
|
if (events === null || events === void 0 ? void 0 : events.onKeyDown) props[events.onKeyDown] = () => handleEvent('ON_FIELD_KEYDOWN');
|
|
2212
2213
|
return props;
|
|
@@ -2954,27 +2955,27 @@ const AsFormFieldBuilder = props => {
|
|
|
2954
2955
|
}) : jsx(Fragment, {});
|
|
2955
2956
|
};
|
|
2956
2957
|
|
|
2957
|
-
|
|
2958
|
-
const useFormGroup = ({
|
|
2958
|
+
function useFormGroup({
|
|
2959
2959
|
ids,
|
|
2960
2960
|
onData,
|
|
2961
|
-
onValid
|
|
2962
|
-
|
|
2961
|
+
onValid,
|
|
2962
|
+
onSubmit
|
|
2963
|
+
}, deps) {
|
|
2963
2964
|
const {
|
|
2964
2965
|
formGroupInstance
|
|
2965
2966
|
} = useFormGroupContext({});
|
|
2966
2967
|
const onDataCallbackRef = useRef(onData);
|
|
2967
2968
|
const onValidCallbackRef = useRef(onValid);
|
|
2968
|
-
|
|
2969
|
+
const onSubmitCallbackRef = useRef(onSubmit);
|
|
2969
2970
|
useEffect(() => {
|
|
2970
2971
|
onDataCallbackRef.current = onData;
|
|
2971
2972
|
}, [onData]);
|
|
2972
2973
|
useEffect(() => {
|
|
2973
2974
|
onValidCallbackRef.current = onValid;
|
|
2974
2975
|
}, [onValid]);
|
|
2975
|
-
|
|
2976
|
-
|
|
2977
|
-
|
|
2976
|
+
useEffect(() => {
|
|
2977
|
+
onSubmitCallbackRef.current = onSubmit;
|
|
2978
|
+
}, [onSubmit]);
|
|
2978
2979
|
useEffect(() => {
|
|
2979
2980
|
const onDataCallback = payload => {
|
|
2980
2981
|
var _a;
|
|
@@ -2995,20 +2996,24 @@ const useFormGroup = ({
|
|
|
2995
2996
|
ids,
|
|
2996
2997
|
callback: onValidCallback
|
|
2997
2998
|
});
|
|
2998
|
-
|
|
2999
|
-
|
|
3000
|
-
|
|
3001
|
-
|
|
3002
|
-
|
|
3003
|
-
|
|
3004
|
-
|
|
2999
|
+
const onSubmitCallback = payload => {
|
|
3000
|
+
var _a;
|
|
3001
|
+
if (onSubmitCallbackRef.current) {
|
|
3002
|
+
(_a = onSubmitCallbackRef.current) === null || _a === void 0 ? void 0 : _a.call(onSubmitCallbackRef, payload);
|
|
3003
|
+
}
|
|
3004
|
+
};
|
|
3005
|
+
const onSubmitSub = formGroupInstance.onSubmitSubscription({
|
|
3006
|
+
ids,
|
|
3007
|
+
callback: onSubmitCallback
|
|
3008
|
+
});
|
|
3005
3009
|
return () => {
|
|
3006
3010
|
onDataSub.unsubscribe();
|
|
3007
3011
|
onValidSub.unsubscribe();
|
|
3012
|
+
onSubmitSub.unsubscribe();
|
|
3008
3013
|
};
|
|
3009
3014
|
}, [deps]);
|
|
3010
3015
|
return;
|
|
3011
|
-
}
|
|
3016
|
+
}
|
|
3012
3017
|
|
|
3013
3018
|
const defaultChangeEvent = event => {
|
|
3014
3019
|
return event.currentTarget.value;
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bolttech/form-engine",
|
|
3
|
-
"version": "3.0.2-beta.
|
|
3
|
+
"version": "3.0.2-beta.6",
|
|
4
4
|
"description": "A react adapter for bolttech form engine",
|
|
5
5
|
"module": "./index.esm.js",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./index.esm.js",
|
|
8
8
|
"dependencies": {
|
|
9
|
-
"@bolttech/form-engine-core": "0.0.3-beta.
|
|
9
|
+
"@bolttech/form-engine-core": "0.0.3-beta.6",
|
|
10
10
|
"react": "18.2.0",
|
|
11
11
|
"rxjs": "7.8.1"
|
|
12
12
|
},
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
onData?: ((payload: TFormGroupOnDataEventPayload<Record<string, unknown>>) => void) | undefined;
|
|
5
|
-
onValid?: ((payload: TFormGroupOnValidEventPayload) => void) | undefined;
|
|
6
|
-
}, deps?: React.DependencyList) => void;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { TUseFormGroup } from './useFormGroup.type';
|
|
3
|
+
declare function useFormGroup<T>({ ids, onData, onValid, onSubmit }: TUseFormGroup<T>, deps?: React.DependencyList): void;
|
|
7
4
|
export default useFormGroup;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { TFormGroupOnDataEventPayload, TFormGroupOnSubmitEventPayload, TFormGroupOnValidEventPayload } from '@bolttech/form-engine-core';
|
|
2
|
+
/**
|
|
3
|
+
* Represents the properties for the useFormGroup hook, including a list of ID's and event callback properties.
|
|
4
|
+
*
|
|
5
|
+
* @property {string} ids - The unique identifier for the forms.
|
|
6
|
+
* @property {payload: TFormGroupOnDataEventPayload<T>} onData - callback event occurring when a value is changing via input or logic.
|
|
7
|
+
* @property {payload: TFormGroupOnValidEventPayload} onData - callback event occurring when validation status changes on the form.
|
|
8
|
+
* @property {payload: TFormGroupOnSubmitEventPayload<T>} onData - event occurring when form submission is trigger.
|
|
9
|
+
*
|
|
10
|
+
*/
|
|
11
|
+
type TUseFormGroup<T> = {
|
|
12
|
+
ids: string[];
|
|
13
|
+
onData?: (payload: TFormGroupOnDataEventPayload<T>) => void;
|
|
14
|
+
onValid?: (payload: TFormGroupOnValidEventPayload) => void;
|
|
15
|
+
onSubmit: (payload: TFormGroupOnSubmitEventPayload<T>) => void;
|
|
16
|
+
};
|
|
17
|
+
export type { TUseFormGroup };
|