@bolttech/form-engine 3.0.1-beta.7 → 3.0.2-beta.2

package/README.md

@@ -24,6 +24,7 @@ This is an adapter to be used with the bolttech form engine. Compatible with Nex
 - 6.6 [api](#api)
 - 6.7 [resetValues](#resetvalues)
 - 6.8 [visibilityConditions](#visibilityconditions)
+- 6.9 [resetPropertyValues](#resetpropertyvalues)
 
 7. [templating](#templating)
 
@@ -36,6 +37,7 @@ This is an adapter to be used with the bolttech form engine. Compatible with Nex
 10. [AsFormFieldBuilder](#asformfieldbuilder)
 
 <a id="sample"></a>
+
 ## **Sample**
 
 ```typescript
@@ -110,6 +112,7 @@ const Sample = () => {
   );
 };
 ```
+
 <a id="mappers"></a>
 
 ## **Mappers**
@@ -245,7 +248,7 @@ const mapper = [
 
 <a id="form-group-context"></a>
 
-## **Form Group Context** 
+## **Form Group Context**
 
 <a id="formgroupcontextprovider"></a>
 
@@ -406,6 +409,7 @@ const FormComponent = (): React.ReactElement => {
 
 export default FormComponent;
 ```
+
 <a id="form"></a>
 
 ## **Form**
@@ -449,6 +453,7 @@ A simple example of rendering a basic form
 ```javascript
 <Form schema={schema} />
 ```
+
 <a id="submit-form"></a>
 
 ## **Submit Form**
@@ -621,6 +626,7 @@ Schema components contains the information of the component that will be rendere
   }]
 }
 ```
+
 <a id="formatters"></a>
 
 ## **formatters**
@@ -659,6 +665,7 @@ const formatters = {
   upperCase: true,
 };
 ```
+
 <a id="nametosubmit"></a>
 
 ## **nameToSubmit**
@@ -686,6 +693,7 @@ when calling the `onSubmit` or `onData` the field section of this field will out
   }
 }
 ```
+
 <a id="props"></a>
 
 ## **props**
@@ -813,6 +821,7 @@ Each config you opt to use, needs to be filled with an API configuration, the co
 | url                      | string                            | Request url ex: http://mockapi.org                                                    |
 | body?                    | Record<string, unknown>           | Request body (only POST requests)                                                     |
 | headers?                 | OutgoingHttpHeaders               | Avaliable HTTP headers                                                                |
+| queryParams?             | Record<string,string>             | url query params (to be appended to the already existing ones)                        |
 | resultPath?              | string                            | response dot notation path to the value needed from the response                      |
 | fallbackValue?           | unknown                           | default value to return if the API returns error                                      |
 | preConditions?           | TSchemaValidation                 | validations to occur before the request is made (check validations section)           |
@@ -904,6 +913,7 @@ const resetValues = [
   },
 ];
 ```
+
 <a id="visibilityconditions"></a>
 
 ## **visibilityConditions**
@@ -952,6 +962,46 @@ const visibilityConditions = [
 ];
 ```
 
+<a id="resetpropertyvalues"></a>
+
+## **resetPropertyValues**
+
+resetPropertyValues will change a property value based on validation rules
+
+> WARNING: do not rely on this to make mutations on your properties, templating already is a powerful tool and with this you can destroy some schema configurations accidentaly, this is a last resort schema manipulation tool to solve some edge cases with API requests callbacks handling
+
+| Prop           | Type                                         | Description                                                    |
+| -------------- | -------------------------------------------- | -------------------------------------------------------------- |
+| property       | typeof ALLOWED_RESET_PROPS_MUTATIONS[number] | property to be changed, ex: api, resetValues, etc..            |
+| path           | string                                       | path where the property to be changed is located               |
+| field          | string                                       | field that will recieve the property change                    |
+| resettledValue | unknown                                      | value to be replaced onto the property                         |
+| validations    | TSchemaValidation                            | validations rules to be validated to change the property value |
+| events         | Partial<TEvents>[]                           | events to listen to apply this change                          |
+
+example:
+
+this will change the `api.named.chuck` property onto field `postalCode` when the `ON_FIELD_CHANGE` event occurs,
+will change the content to: `{ status: null, response: ''}`
+
+```typescript
+resetPropertyValues: [
+  {
+    property: 'api',
+    path: 'named.chuck',
+    events: ['ON_FIELD_CHANGE'],
+    field: 'postalCode',
+    resettledValue: {
+      status: null,
+      response: '',
+    },
+    validations: {
+      bool: false,
+    },
+  },
+],
+```
+
 <a id="templating"></a>
 
 ## **templating**

package/index.esm.js

@@ -2499,6 +2499,7 @@ function Form({
   iVars,
   action,
   method,
+  config,
   onSubmit,
   onFormMount,
   onData,
@@ -2518,7 +2519,8 @@ function Form({
     removeForm,
     getForm,
     mappers,
-    debugMode
+    debugMode,
+    formGroupInstance
   } = useFormGroupContext({});
   const [tree, setTree] = useState();
   const schemaIndex = useMemo(() => index || (schema === null || schema === void 0 ? void 0 : schema.index) || 'defaultChange', [index, schema]);
@@ -2536,7 +2538,8 @@ function Form({
       action: action || (schema === null || schema === void 0 ? void 0 : schema.action),
       method: method || (schema === null || schema === void 0 ? void 0 : schema.method),
       index: schemaIndex,
-      mappers
+      mappers,
+      config: config || formGroupInstance.config
     });
     addForm({
       key: schemaIndex,
@@ -2594,18 +2597,9 @@ function Form({
    * initialValues setter for async initialValues
    */
   useEffect(() => {
-    const form = getForm({
+    if (initialValues) getForm({
       key: schemaIndex
-    });
-    if (initialValues && form) {
-      Object.keys(initialValues).forEach(fieldName => {
-        var _a;
-        (_a = form.fields.get(fieldName)) === null || _a === void 0 ? void 0 : _a.emitValue({
-          event: 'ON_FIELD_MOUNT',
-          value: initialValues[fieldName]
-        });
-      });
-    }
+    }).setInitialValues(initialValues);
   }, [initialValues]);
   /**
    * hook usage to keep event bindings updated on callback functions passed as props

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@bolttech/form-engine",
-  "version": "3.0.1-beta.7",
+  "version": "3.0.2-beta.2",
   "description": "A react adapter for bolttech form engine",
   "module": "./index.esm.js",
   "type": "module",
   "main": "./index.esm.js",
   "dependencies": {
-    "@bolttech/form-engine-core": "0.0.2-beta.7",
+    "@bolttech/form-engine-core": "0.0.3-beta.2",
     "react": "18.2.0",
     "rxjs": "7.8.1"
   },

package/src/components/Form/Form.d.ts

@@ -5,5 +5,5 @@ import { TFormProps } from './Form.type';
  * @param {TFormProps} param form properties initializor
  * @returns {ReactElement}
  */
-declare function Form<T>({ schema, index, initialValues, iVars, action, method, onSubmit, onFormMount, onData, onBlur, onChange, onApiResponse, onClick, onFocus, onKeyDown, onKeyUp, onMount, onValid, children, }: TFormProps<T>): ReactElement;
+declare function Form<T>({ schema, index, initialValues, iVars, action, method, config, onSubmit, onFormMount, onData, onBlur, onChange, onApiResponse, onClick, onFocus, onKeyDown, onKeyUp, onMount, onValid, children, }: TFormProps<T>): ReactElement;
 export default Form;