@maif/react-forms 1.0.54 → 1.0.57

package/README.md

@@ -18,12 +18,14 @@ yarn add @maif/react-forms
 ```
 
 # Usage
-You must define a form flow (this is just a javascript array which that represent the rendering order of the form fields) and a schema (that is define all field of your form with type or constraints for example)
+You must define a form flow (this is just a javascript array which represents the rendering order of the form fields) and a schema (that defines all fields of your form with types or constraints for example)
+You can import the default stylesheet or use your own style by using default classname or passing a classname in your schema.
 
 ## example
 
 ```javascript
-import { Form, type, format, constraints } from 'react-forms'
+import { Form, type, format, constraints } from '@maif/react-forms'
+import '@maif/react-forms/lib/index.css'
 
 export const Example = () => { 
   const schema = {
@@ -32,6 +34,7 @@ export const Example = () => {
       label: 'age',
       placeholder: 'Your age',
       help: "Just your age",
+      className: "input-number",
       constraints: [
         constraints.required("your age is required"),
         constraints.min(18, 'You must be an adult'),
@@ -64,7 +67,7 @@ export const Example = () => {
 ## schema properties
 
 - **type** (required): the type of value. It provided by the imported object `type`. It could be just string like `string`, `number`, `bool`, `object`, `date` or `file`
-- **format**: Over the type you can display a special format for the field. It provided by the imported object `format` or just a string
+- **format**: Over the type you can display a special format for the field. It is provided by the imported object `format` or just a string
   - `select`: display a [react-select](https://react-select.com/home) field with provided options
   - `buttonsSelect`: display a buttons group, drawn with the same options than the format `select`
   - `code`: if the type is `string`, display a code input (draw with [react-ace](https://github.com/securingsincity/react-ace)) (add a props.setRef to get ace editor ref)
@@ -138,7 +141,7 @@ export const Example = () => {
         switch: [
           {
             default: true,
-            condition: ({rawData, ref}) => ref === "mammal",
+            condition: ({rawValues, ref}) => ref === "mammal",
             schema: {
               continent: {
                 type: type.string,
@@ -226,6 +229,7 @@ By default all fields of the form are nullable (they can accept `null` or `undef
     - [`constraints.test(name: string, message?:string, test: (val: any) => boolean | Promise<boolean>)`](#constraintstestname-string-messagestring-test-val-any--boolean--promiseboolean)
     - [`constraints.when(ref: string, test: (val: any) => boolean, then: any = [], otherwise: any = [])`](#constraintswhenref-string-test-val-any--boolean-then-any---otherwise-any--)
     - [`constraints.oneOf(arrayOfValues: any[], message?:string)`](#constraintsoneofarrayofvalues-any-messagestring)
+    - [`constraints.ref(ref: any)`](#constraintsrefrefany)
   - [string](#string)
   - [string or number](#string-or-number)
   - [number](#number)
@@ -279,6 +283,7 @@ the following methods works for all type types of value.
 
 #### `constraints.oneOf(arrayOfValues: any[], message?:string)`
   Whitelist a set of values and display an error under field if the provided value is not contains in this set.
+  Values can also be a [`reference`](#constraintsrefrefany) of value
 
   ```javascript
   constraints.oneOf(['foo', 'bar'], 'not foo or bar :(')
@@ -287,6 +292,33 @@ the following methods works for all type types of value.
   {type: 'oneOf', arrayOfValues: ['foo', 'bar'], message: 'not foo or bar :('}
   ```
 
+#### `constraints.ref(ref:any)`
+  Some constraints accepts reference as property. This methods create a reference to another field.
+  Refs are evaluated in the proper order so that the ref value is resolved before the field using the ref (be careful of circular dependencies!).
+
+   ```javascript
+    const schema = {
+      dad_age: { type: type.number},
+      son_age: {
+          type: type.number,
+          constraints: [
+            constraints.lessThan(constraints.ref('dad_age'), 'too old')
+          ]
+        }
+    }
+  ```
+  ```javascript
+const schema = {
+      dad_age: { type: 'number'},
+      son_age: {
+          type: 'number',
+          constraints: [
+            {type: 'lessThan', ref: { ref: 'dad_age' }, message: 'too old !'}
+          ]
+        }
+    }
+  ```
+
 ### string
 the following methods works for string values. All methods for [mixed](#mixed) are available.
 
@@ -324,13 +356,13 @@ the following methods works for string or number values. All methods for [mixed]
 
 
 #### `constraints.min(ref: number | Reference<number>, message: string)`
-Set the minimum value allowed and display an error if the provided value (for a number) or the length of the string is bigger.
+Set the minimum value allowed and display an error if the provided value (for a number) or the length of the string is bigger. Provided value can be a number or a [`reference`](#constraintsrefrefany) to a number
 ```javascript
 {type: 'min', ref: 1, message: 'too small'}
 ```
 
 #### `constraints.max(ref: number | Reference<number>, message: string)`
-Set the maximun value allowed and display an error if provided value (for a number) or the length of the string is smaller.
+Set the maximun value allowed and display an error if provided value (for a number) or the length of the string is smaller. value can be a number or a [`reference`](#constraintsrefrefany) to a number
 ```javascript
 {type: 'max', ref: 5, message: 'too high'}
 ```
@@ -356,13 +388,13 @@ The value must be aa integer number and display an error if it's not.
 ```
 
 #### `constraints.lessThan(ref: number | Reference<number>, message: string)`
-Set the maximun value allowed and display an error if provided value (for a number) or the length of the string is smaller.
+Set the maximun value allowed and display an error if provided value (for a number) or the length of the string is smaller. value can be a number or a [`reference`](#constraintsrefrefany) to a number
 ```javascript
 {type: 'lessThan', ref: 5, message: 'less please'}
 ```
 
 #### `constraints.moreThan(ref: number | Reference<number>, message: string)`
-Set the minimum value allowed and display an error if provided value (for a number) or the length of the string is bigger.
+Set the minimum value allowed and display an error if provided value (for a number) or the length of the string is bigger. value can be a number or a [`reference`](#constraintsrefrefany) to a number
 ```javascript
 {type: 'moreThan', ref: 5, message: 'more please'}
 ```
@@ -371,7 +403,7 @@ Set the minimum value allowed and display an error if provided value (for a numb
 the following methods works for basic types if the format is define to `array`. All methods for [mixed](#mixed) are available.
 
 #### `constraints.length(value: number | Reference<number>, message?:string)`
-Set the length of the array and display an error if it's different.
+Set the length of the array and display an error if it's different. value can be a number or a [`reference`](#constraintsrefrefany) to a number
 ```javascript
 {type: 'length', ref: 5, message: 'this array must have 5 elements'}
 ```