@bolttech/form-engine 0.11.5 → 0.11.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/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [0.11.6](http://bitbucket.org/gofrank/bolttech-frontend/compare/form-engine-0.11.5...form-engine-0.11.6) (2024-03-07)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* asFormField - merge props to fieldInstance.props - FIX ([f14070e](http://bitbucket.org/gofrank/bolttech-frontend/commit/f14070e82ba53036bd44fcc9020ee2e5e711f31c))
|
|
11
|
+
* removed last change ([99e0a26](http://bitbucket.org/gofrank/bolttech-frontend/commit/99e0a26f7b173eee4c827168aec23405500fcdd7))
|
|
12
|
+
|
|
5
13
|
## [0.11.5](http://bitbucket.org/gofrank/bolttech-frontend/compare/form-engine-0.11.4...form-engine-0.11.5) (2024-03-07)
|
|
6
14
|
|
|
7
15
|
|
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Achieve form logic re-usage with forms expressed in json format.
|
|
4
4
|
|
|
5
|
-
> stable version 0.11.
|
|
5
|
+
> stable version 0.11.6
|
|
6
6
|
|
|
7
7
|
---
|
|
8
8
|
|
|
@@ -990,9 +990,9 @@ Just like before, you can specify multiple fields with `fields` key for the same
|
|
|
990
990
|
}
|
|
991
991
|
```
|
|
992
992
|
|
|
993
|
-
Additionally, you can specify multiple props to be changed or cleared from the fields that you specified before using `clearedProps`.
|
|
993
|
+
Additionally, you can specify multiple props to be changed or cleared from the fields that you specified before using `clearedProps`.
|
|
994
994
|
Each prop will be changed using the respective field. For example, if I have `fields['input', 'checkbox']` then I need to change the input label
|
|
995
|
-
I can send it as `clearedProps: [{ label: 'value' }]` or `clearedProps: { label: 'value' }`. And only input props will be changed.
|
|
995
|
+
I can send it as `clearedProps: [{ label: 'value' }]` or `clearedProps: { label: 'value' }`. And only input props will be changed.
|
|
996
996
|
It's useful when we have some API calls whose response will be used as a prop value in the component.
|
|
997
997
|
|
|
998
998
|
```json
|
|
@@ -1007,7 +1007,7 @@ It's useful when we have some API calls whose response will be used as a prop va
|
|
|
1007
1007
|
"clearedValue": false,
|
|
1008
1008
|
"defaultClearedValue": true,
|
|
1009
1009
|
"defaultClearedProps": {
|
|
1010
|
-
"disabled": false
|
|
1010
|
+
"disabled": false
|
|
1011
1011
|
}
|
|
1012
1012
|
}
|
|
1013
1013
|
]
|
|
@@ -1022,8 +1022,8 @@ You can also set a `defaultClearedProps` attribute to change the props of the co
|
|
|
1022
1022
|
For definition clearValues runs validations on the target field and not on the field it is declaring.
|
|
1023
1023
|
Therefore, you can set `useCurrentFieldValidation` prop with true if you want validations to be performed on the current field.
|
|
1024
1024
|
|
|
1025
|
-
> Remember, clearValues only performs `rehydration` on the target field, that is, if your target field has an api call, for example,
|
|
1026
|
-
you must listen to the `ON_FIELD_CLEARED` event to execute such a call on the target field.
|
|
1025
|
+
> Remember, clearValues only performs `rehydration` on the target field, that is, if your target field has an api call, for example,
|
|
1026
|
+
> you must listen to the `ON_FIELD_CLEARED` event to execute such a call on the target field.
|
|
1027
1027
|
|
|
1028
1028
|
## Api
|
|
1029
1029
|
|
|
@@ -1048,18 +1048,18 @@ The above example will make form to call the API specified when the field where
|
|
|
1048
1048
|
|
|
1049
1049
|
### Keys
|
|
1050
1050
|
|
|
1051
|
-
| key | type
|
|
1052
|
-
| ----------------------- |
|
|
1053
|
-
| blockRequestWhenInvalid | boolean
|
|
1054
|
-
| method | string
|
|
1055
|
-
| url | string
|
|
1056
|
-
| scope | string
|
|
1057
|
-
| body | object
|
|
1058
|
-
| headers | object
|
|
1059
|
-
| fieldValueAsParams | object
|
|
1060
|
-
| fieldValueAsPathParams | array of strings | an array of field names where he uses it as a key to capture the value and transforms it into path param
|
|
1061
|
-
| debounceTime | number
|
|
1062
|
-
| preConditions | TValidations
|
|
1051
|
+
| key | type | Description |
|
|
1052
|
+
| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1053
|
+
| blockRequestWhenInvalid | boolean | Specify if this call should be blocked when the field is invalid (due to validations) |
|
|
1054
|
+
| method | string | HTTP verb. Get, Post, Put or delete |
|
|
1055
|
+
| url | string | The api url |
|
|
1056
|
+
| scope | string | This lets you put the api result inside the form scope in the given key. THis will allow to use the call result latter on on some field |
|
|
1057
|
+
| body | object | Body to send to the API |
|
|
1058
|
+
| headers | object | Api headers |
|
|
1059
|
+
| fieldValueAsParams | object | An object with key (name of the field in the form) and value (name that I want to be in the query, which if nothing is passed, uses the name of the field as the key) and then it transforms it into a query string |
|
|
1060
|
+
| fieldValueAsPathParams | array of strings | an array of field names where he uses it as a key to capture the value and transforms it into path param |
|
|
1061
|
+
| debounceTime | number | Allow you to debounce the api call by X seconds |
|
|
1062
|
+
| preConditions | TValidations | Allow you to specify validations that should not fail in order to call the API |
|
|
1063
1063
|
|
|
1064
1064
|
### PreConditions
|
|
1065
1065
|
|
|
@@ -1352,16 +1352,16 @@ You can change multiple field values and properties with `bindFields` using the
|
|
|
1352
1352
|
|
|
1353
1353
|
```js
|
|
1354
1354
|
{
|
|
1355
|
-
const ref = useRef<TFormRefActions>
|
|
1355
|
+
const ref = useRef < TFormRefActions > null;
|
|
1356
1356
|
|
|
1357
1357
|
return (
|
|
1358
1358
|
<>
|
|
1359
|
-
<Form id="form" ref={ref} schema={foo}/>
|
|
1359
|
+
<Form id="form" ref={ref} schema={foo} />
|
|
1360
1360
|
</>
|
|
1361
1361
|
);
|
|
1362
1362
|
}
|
|
1363
1363
|
|
|
1364
|
-
const handleFields = (
|
|
1364
|
+
const handleFields = (input1: string, input2: number) =>
|
|
1365
1365
|
ref.current?.bindFields({
|
|
1366
1366
|
input1: {
|
|
1367
1367
|
value: input1,
|
|
@@ -1583,7 +1583,7 @@ You now can use in your [form](#react-form-) the mapped components with names `i
|
|
|
1583
1583
|
Also note the data in `propsMapping`. There you can map up to five form functionalities per component
|
|
1584
1584
|
|
|
1585
1585
|
| Key | Functionality |
|
|
1586
|
-
| ---------------
|
|
1586
|
+
| --------------- | -------------------------------------------------------------------------------------------------------------------- |
|
|
1587
1587
|
| getValue | The name of your component prop that will give back the selected value. |
|
|
1588
1588
|
| setValue | Prop name that receives the value |
|
|
1589
1589
|
| setErrorMessage | Component prop name to receive an error message in case this field will have error and error message is configured |
|
|
@@ -1591,7 +1591,7 @@ Also note the data in `propsMapping`. There you can map up to five form function
|
|
|
1591
1591
|
| onBlur | Prop name that is called when field is blured |
|
|
1592
1592
|
| onFocus | Prop name that is called when field is focused |
|
|
1593
1593
|
| onKeyUp | Prop name that is called when user releases a key on field |
|
|
1594
|
-
| onKeyDown
|
|
1594
|
+
| onKeyDown | Prop name that is called when user presses a key on field |
|
|
1595
1595
|
|
|
1596
1596
|
You can also use default prop names for functionalities like:
|
|
1597
1597
|
|
|
@@ -1630,7 +1630,7 @@ After configuring the provider, `<Form />` components lets you render a form
|
|
|
1630
1630
|
### Props
|
|
1631
1631
|
|
|
1632
1632
|
| Prop | Type | Description |
|
|
1633
|
-
| ---------------------
|
|
1633
|
+
| --------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1634
1634
|
| disable | boolean | Disable all form inputs. It will use the default htm disable attribute |
|
|
1635
1635
|
| group | string | Form group identifier. Used be able to group several forms and then get data with useGroupForm. One will be generated as default if omitted |
|
|
1636
1636
|
| id | string | Form identified. One will be generated as default if omitted |
|
|
@@ -1673,21 +1673,21 @@ Exposed hook that allows you to connect to any form by the formId in any part of
|
|
|
1673
1673
|
|
|
1674
1674
|
You can use the following arguments to tho hook
|
|
1675
1675
|
|
|
1676
|
-
| Prop | Type
|
|
1677
|
-
|
|
1678
|
-
| id | string
|
|
1679
|
-
| ids | array of string
|
|
1680
|
-
| onValid | callback
|
|
1681
|
-
| onClick | callback
|
|
1682
|
-
| onData | callback
|
|
1683
|
-
| onSubmit | callback
|
|
1676
|
+
| Prop | Type | Description |
|
|
1677
|
+
| -------- | --------------- | ------------------------------------------------------ |
|
|
1678
|
+
| id | string | The id of the form you want to connect to |
|
|
1679
|
+
| ids | array of string | A range of ids of the each form you want to connect to |
|
|
1680
|
+
| onValid | callback | Called whenever form validation changes |
|
|
1681
|
+
| onClick | callback | Called whenever field has clicked |
|
|
1682
|
+
| onData | callback | Called whenever data changes |
|
|
1683
|
+
| onSubmit | callback | Called whenever form is submitted |
|
|
1684
1684
|
|
|
1685
1685
|
And it will provide you the following
|
|
1686
1686
|
|
|
1687
|
-
| Prop
|
|
1688
|
-
|
|
1689
|
-
| submitForm
|
|
1690
|
-
| formData
|
|
1687
|
+
| Prop | Type | Description |
|
|
1688
|
+
| ---------- | -------- | ----------------------------------------------------------------------------------------------- |
|
|
1689
|
+
| submitForm | function | Function that lets you call the submit on the form. After, the onSubmit callback will be called |
|
|
1690
|
+
| formData | function | Lets you get the most up-to-date form date |
|
|
1691
1691
|
|
|
1692
1692
|
### Example
|
|
1693
1693
|
|
|
@@ -1736,7 +1736,7 @@ Similar to `useForm`
|
|
|
1736
1736
|
You can use the following arguments to tho hook
|
|
1737
1737
|
|
|
1738
1738
|
| Prop | Type | Description |
|
|
1739
|
-
| -------- | ---------------
|
|
1739
|
+
| -------- | --------------- | --------------------------------------------------------- |
|
|
1740
1740
|
| ids | array of string | The ids we want to listen to |
|
|
1741
1741
|
| group | string | A string to identify the form group we want to connect to |
|
|
1742
1742
|
| onValid | callback | Called whenever form validation changes |
|
|
@@ -1746,10 +1746,10 @@ You can use the following arguments to tho hook
|
|
|
1746
1746
|
|
|
1747
1747
|
And it will provide you the following
|
|
1748
1748
|
|
|
1749
|
-
| Prop
|
|
1750
|
-
|
|
1751
|
-
| submitForm
|
|
1752
|
-
| formData
|
|
1749
|
+
| Prop | Type | Description |
|
|
1750
|
+
| ---------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1751
|
+
| submitForm | function | Function that lets you call the submit on the form. After, the onSubmit callback will be called |
|
|
1752
|
+
| formData | function({aggregate}) | Lets you get the most up-to-date form date in two ways. Aggregate the forms data in a single object or split by the several forms in the group or identified by the id |
|
|
1753
1753
|
|
|
1754
1754
|
### Example
|
|
1755
1755
|
|
|
@@ -1804,15 +1804,15 @@ Allows you to add separate components from a standard form engine form schema. T
|
|
|
1804
1804
|
|
|
1805
1805
|
You can use the following arguments declare a component as a form field
|
|
1806
1806
|
|
|
1807
|
-
| Prop
|
|
1808
|
-
|
|
1809
|
-
| Comp
|
|
1810
|
-
| propsMapping
|
|
1807
|
+
| Prop | Type | Description |
|
|
1808
|
+
| ------------ | ------------------------ | -------------------------------------------------------------------------- |
|
|
1809
|
+
| Comp | React Function Component | The component to be used as form field. |
|
|
1810
|
+
| propsMapping | TComponentPropsMapping | Link for the TComponentPropsMapping likely props mapper from default form. |
|
|
1811
1811
|
|
|
1812
1812
|
And this will give you the following properties in addition to the native ones of your component
|
|
1813
1813
|
|
|
1814
1814
|
| Prop | Type | Description |
|
|
1815
|
-
|
|
1815
|
+
| -------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
1816
1816
|
| validations | TSchemaValidation | Setup validations to be used in the field. |
|
|
1817
1817
|
| masks | TSchemaMasks | Allows you to display the value of the masked component by events |
|
|
1818
1818
|
| clearFields | TSchemaClearFields | Will clear target fields in case they do not pass with the specified validations |
|
|
@@ -1832,10 +1832,14 @@ In the following example `asFormField` hooks are used to create `Component` fiel
|
|
|
1832
1832
|
|
|
1833
1833
|
```javascript
|
|
1834
1834
|
{
|
|
1835
|
-
const FormComponent =
|
|
1836
|
-
|
|
1837
|
-
|
|
1838
|
-
|
|
1835
|
+
const FormComponent =
|
|
1836
|
+
asFormField <
|
|
1837
|
+
React.ComponentProps <
|
|
1838
|
+
typeof Component >>
|
|
1839
|
+
{
|
|
1840
|
+
Comp: Component,
|
|
1841
|
+
propsMapping: propsMapping.component,
|
|
1842
|
+
};
|
|
1839
1843
|
|
|
1840
1844
|
<FormProvider mapper={Mappings} propsMapping={formBuilderPropsMapping}>
|
|
1841
1845
|
<FormComponent
|
|
@@ -1885,6 +1889,6 @@ In the following example `asFormField` hooks are used to create `Component` fiel
|
|
|
1885
1889
|
}}
|
|
1886
1890
|
errorMessages={{ default: 'ERRRO' }}
|
|
1887
1891
|
/>
|
|
1888
|
-
</FormProvider
|
|
1892
|
+
</FormProvider>;
|
|
1889
1893
|
}
|
|
1890
1894
|
```
|