@maif/react-forms 1.0.55 → 1.0.56

package/README.md

@@ -18,12 +18,12 @@ 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)
 
 ## example
 
 ```javascript
-import { Form, type, format, constraints } from 'react-forms'
+import { Form, type, format, constraints } from '@maif/react-forms'
 
 export const Example = () => { 
   const schema = {
@@ -64,7 +64,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)
@@ -226,6 +226,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 +280,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 +289,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 +353,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 +385,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 +400,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'}
 ```

package/lib/esm/index.js

@@ -74,7 +74,8 @@ var _matches = function matches() {
   var message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "This field does not match the pattern";
   return function (r) {
     return r.matches(regexp, {
-      message: message
+      message: message,
+      excludeEmptyString: false
     });
   };
 }; //string & number
@@ -215,7 +216,7 @@ var _oneOf = function oneOf(arrayOfValues) {
   return function (r) {
     return r.oneOf(arrayOfValues.map(maybeRef), message);
   };
-};
+}; //todo: rename by notOneOf
 
 var _blacklist = function blacklist(arrayOfValues) {
   var message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "This value can't include the following values ".concat(arrayOfValues.join(', '));
@@ -936,6 +937,9 @@ var arrayFlatten = function arrayFlatten(array) {
 
   return array;
 };
+var isDefined = function isDefined(value) {
+  return value !== null && value !== undefined;
+};
 
 var valueToSelectOption = function valueToSelectOption(value) {
   var possibleValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -1116,7 +1120,6 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function (props, _) {
       value: value,
       isDisabled: props.disabled,
       placeholder: props.placeholder,
-      isClearable: true,
       onChange: onChange,
       options: values,
       onCreateOption: function onCreateOption(option) {
@@ -1131,7 +1134,6 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function (props, _) {
       name: "".concat(props.label, "-search"),
       isLoading: loading,
       value: value,
-      isClearable: true,
       defaultValue: value,
       isDisabled: props.disabled,
       placeholder: props.placeholder,
@@ -28963,15 +28965,14 @@ var CustomizableInput$1 = /*#__PURE__*/React.memo(function (props) {
   return prev.field.value === next.field.value && next.errorDisplayed === prev.errorDisplayed;
 });
 var ControlledInput = function ControlledInput(_ref) {
-  var defaultValue = _ref.defaultValue,
-      step = _ref.step,
+  var step = _ref.step,
       entry = _ref.entry,
       children = _ref.children,
       component = _ref.component,
       errorDisplayed = _ref.errorDisplayed;
 
   var _useController = useController({
-    defaultValue: defaultValue || null,
+    defaultValue: isDefined(step.defaultValue) ? step.defaultValue : null,
     name: entry
   }),
       field = _useController.field;
@@ -29131,8 +29132,8 @@ var CustomizableInput = function CustomizableInput(props) {
   return props.children;
 };
 
-var defaultVal = function defaultVal(value, array, defaultValue) {
-  if (!!defaultValue) return defaultValue;
+var defaultVal = function defaultVal(value, array, defaultValue, type) {
+  if (isDefined(defaultValue)) return defaultValue;
   if (!!array) return [];
   return value;
 };
@@ -29169,9 +29170,17 @@ var cleanInputArray = function cleanInputArray(obj, defaultValues, flow, subSche
         key = _ref5[0],
         step = _ref5[1];
 
-    var v;
-    if (obj) v = obj[key];
-    if ((step.type === type.bool && v === null || step.type !== type.bool && !v) && defaultValues) v = defaultValues[key];
+    var v = null;
+
+    if (obj) {
+      v = obj[key];
+    }
+
+    var maybeDefaultValue = defaultValues[key];
+
+    if (!v && isDefined(maybeDefaultValue)) {
+      v = maybeDefaultValue;
+    }
 
     if (step.array && !step.render) {
       return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, (v || []).map(function (value) {
@@ -29333,16 +29342,15 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      initialReseted = _useState2[0],
-      setReset = _useState2[1];
+      initialReseted = _useState2[0];
+      _useState2[1]; // useEffect(() => {
+  //   reset(cleanInputArray(value, defaultValues, flow, schema))
+  //   setReset(true)
+  // }, [reset])
 
-  useEffect(function () {
-    _reset(cleanInputArray(value, defaultValues, flow, schema));
 
-    setReset(true);
-  }, [_reset]);
   useEffect(function () {
-    initialReseted && trigger();
+    trigger();
   }, [trigger, initialReseted]);
   var _handleSubmit = methods.handleSubmit,
       _methods$formState = methods.formState;
@@ -29355,7 +29363,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
   var prev = usePrevious(value);
   var prevSchema = usePrevious(schema);
   useEffect(function () {
-    if (!deepEqual(value, prev) || !deepEqual(schema, prevSchema)) {
+    if (prev && prevSchema && !deepEqual(value, prev) || !deepEqual(schema, prevSchema)) {
       _reset(_objectSpread2$1({}, cleanInputArray(value, defaultValues, flow, schema)));
     }
   }, [value, schema]);
@@ -29695,9 +29703,10 @@ var Step = function Step(_ref8) {
               step: step,
               entry: entry,
               errorDisplayed: errorDisplayed
-            }, /*#__PURE__*/React.createElement(SelectInput, {
+            }, /*#__PURE__*/React.createElement(SelectInput, _extends({
               className: classNames(classes.flex_grow_1, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
-              disabled: functionalProperty(entry, step.disabled),
+              disabled: functionalProperty(entry, step.disabled)
+            }, step.props, {
               possibleValues: step.options,
               httpClient: httpClient,
               isMulti: step.isMulti,
@@ -29705,7 +29714,7 @@ var Step = function Step(_ref8) {
               transformer: step.transformer,
               buttons: step.format === format.buttonsSelect,
               optionsFrom: step.optionsFrom
-            }));
+            })));
           }
 
         default:
@@ -29729,8 +29738,9 @@ var Step = function Step(_ref8) {
             step: step,
             entry: entry,
             errorDisplayed: errorDisplayed
-          }, /*#__PURE__*/React.createElement(SelectInput, {
-            className: classNames(classes.content, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
+          }, /*#__PURE__*/React.createElement(SelectInput, _extends({
+            className: classNames(classes.content, _defineProperty$1({}, classes.input__invalid, errorDisplayed))
+          }, step.props, {
             possibleValues: step.options,
             httpClient: httpClient,
             isMulti: step.isMulti,
@@ -29739,7 +29749,7 @@ var Step = function Step(_ref8) {
             transformer: step.transformer,
             buttons: step.format === format.buttonsSelect,
             optionsFrom: step.optionsFrom
-          }));
+          })));
 
         default:
           return /*#__PURE__*/React.createElement(ControlledInput, {
@@ -29755,7 +29765,6 @@ var Step = function Step(_ref8) {
 
     case type.bool:
       return /*#__PURE__*/React.createElement(ControlledInput, {
-        defaultValue: defaultValue,
         step: step,
         entry: entry,
         errorDisplayed: errorDisplayed
@@ -29772,8 +29781,9 @@ var Step = function Step(_ref8) {
             step: step,
             entry: entry,
             errorDisplayed: errorDisplayed
-          }, /*#__PURE__*/React.createElement(SelectInput, {
-            className: classNames(classes.flex_grow_1, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
+          }, /*#__PURE__*/React.createElement(SelectInput, _extends({
+            className: classNames(classes.flex_grow_1, _defineProperty$1({}, classes.input__invalid, errorDisplayed))
+          }, step.props, {
             possibleValues: step.options,
             httpClient: httpClient,
             isMulti: step.isMulti,
@@ -29782,7 +29792,7 @@ var Step = function Step(_ref8) {
             transformer: step.transformer,
             buttons: step.format === format.buttonsSelect,
             optionsFrom: step.optionsFrom
-          }));
+          })));
 
         case format.form:
           //todo: disabled ?

package/lib/index.js

@@ -108,7 +108,8 @@ var _matches = function matches() {
   var message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "This field does not match the pattern";
   return function (r) {
     return r.matches(regexp, {
-      message: message
+      message: message,
+      excludeEmptyString: false
     });
   };
 }; //string & number
@@ -249,7 +250,7 @@ var _oneOf = function oneOf(arrayOfValues) {
   return function (r) {
     return r.oneOf(arrayOfValues.map(maybeRef), message);
   };
-};
+}; //todo: rename by notOneOf
 
 var _blacklist = function blacklist(arrayOfValues) {
   var message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "This value can't include the following values ".concat(arrayOfValues.join(', '));
@@ -970,6 +971,9 @@ var arrayFlatten = function arrayFlatten(array) {
 
   return array;
 };
+var isDefined = function isDefined(value) {
+  return value !== null && value !== undefined;
+};
 
 var valueToSelectOption = function valueToSelectOption(value) {
   var possibleValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -1150,7 +1154,6 @@ var SelectInput = /*#__PURE__*/React__default["default"].forwardRef(function (pr
       value: value,
       isDisabled: props.disabled,
       placeholder: props.placeholder,
-      isClearable: true,
       onChange: onChange,
       options: values,
       onCreateOption: function onCreateOption(option) {
@@ -1165,7 +1168,6 @@ var SelectInput = /*#__PURE__*/React__default["default"].forwardRef(function (pr
       name: "".concat(props.label, "-search"),
       isLoading: loading,
       value: value,
-      isClearable: true,
       defaultValue: value,
       isDisabled: props.disabled,
       placeholder: props.placeholder,
@@ -28997,15 +28999,14 @@ var CustomizableInput$1 = /*#__PURE__*/React__default["default"].memo(function (
   return prev.field.value === next.field.value && next.errorDisplayed === prev.errorDisplayed;
 });
 var ControlledInput = function ControlledInput(_ref) {
-  var defaultValue = _ref.defaultValue,
-      step = _ref.step,
+  var step = _ref.step,
       entry = _ref.entry,
       children = _ref.children,
       component = _ref.component,
       errorDisplayed = _ref.errorDisplayed;
 
   var _useController = reactHookForm.useController({
-    defaultValue: defaultValue || null,
+    defaultValue: isDefined(step.defaultValue) ? step.defaultValue : null,
     name: entry
   }),
       field = _useController.field;
@@ -29165,8 +29166,8 @@ var CustomizableInput = function CustomizableInput(props) {
   return props.children;
 };
 
-var defaultVal = function defaultVal(value, array, defaultValue) {
-  if (!!defaultValue) return defaultValue;
+var defaultVal = function defaultVal(value, array, defaultValue, type) {
+  if (isDefined(defaultValue)) return defaultValue;
   if (!!array) return [];
   return value;
 };
@@ -29203,9 +29204,17 @@ var cleanInputArray = function cleanInputArray(obj, defaultValues, flow, subSche
         key = _ref5[0],
         step = _ref5[1];
 
-    var v;
-    if (obj) v = obj[key];
-    if ((step.type === type.bool && v === null || step.type !== type.bool && !v) && defaultValues) v = defaultValues[key];
+    var v = null;
+
+    if (obj) {
+      v = obj[key];
+    }
+
+    var maybeDefaultValue = defaultValues[key];
+
+    if (!v && isDefined(maybeDefaultValue)) {
+      v = maybeDefaultValue;
+    }
 
     if (step.array && !step.render) {
       return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, (v || []).map(function (value) {
@@ -29367,16 +29376,15 @@ var Form = /*#__PURE__*/React__default["default"].forwardRef(function (_ref7, re
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      initialReseted = _useState2[0],
-      setReset = _useState2[1];
+      initialReseted = _useState2[0];
+      _useState2[1]; // useEffect(() => {
+  //   reset(cleanInputArray(value, defaultValues, flow, schema))
+  //   setReset(true)
+  // }, [reset])
 
-  React.useEffect(function () {
-    _reset(cleanInputArray(value, defaultValues, flow, schema));
 
-    setReset(true);
-  }, [_reset]);
   React.useEffect(function () {
-    initialReseted && trigger();
+    trigger();
   }, [trigger, initialReseted]);
   var _handleSubmit = methods.handleSubmit,
       _methods$formState = methods.formState;
@@ -29389,7 +29397,7 @@ var Form = /*#__PURE__*/React__default["default"].forwardRef(function (_ref7, re
   var prev = usePrevious(value);
   var prevSchema = usePrevious(schema);
   React.useEffect(function () {
-    if (!deepEqual__default["default"](value, prev) || !deepEqual__default["default"](schema, prevSchema)) {
+    if (prev && prevSchema && !deepEqual__default["default"](value, prev) || !deepEqual__default["default"](schema, prevSchema)) {
       _reset(_objectSpread2$1({}, cleanInputArray(value, defaultValues, flow, schema)));
     }
   }, [value, schema]);
@@ -29729,9 +29737,10 @@ var Step = function Step(_ref8) {
               step: step,
               entry: entry,
               errorDisplayed: errorDisplayed
-            }, /*#__PURE__*/React__default["default"].createElement(SelectInput, {
+            }, /*#__PURE__*/React__default["default"].createElement(SelectInput, _extends({
               className: classNames__default["default"](classes.flex_grow_1, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
-              disabled: functionalProperty(entry, step.disabled),
+              disabled: functionalProperty(entry, step.disabled)
+            }, step.props, {
               possibleValues: step.options,
               httpClient: httpClient,
               isMulti: step.isMulti,
@@ -29739,7 +29748,7 @@ var Step = function Step(_ref8) {
               transformer: step.transformer,
               buttons: step.format === format.buttonsSelect,
               optionsFrom: step.optionsFrom
-            }));
+            })));
           }
 
         default:
@@ -29763,8 +29772,9 @@ var Step = function Step(_ref8) {
             step: step,
             entry: entry,
             errorDisplayed: errorDisplayed
-          }, /*#__PURE__*/React__default["default"].createElement(SelectInput, {
-            className: classNames__default["default"](classes.content, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
+          }, /*#__PURE__*/React__default["default"].createElement(SelectInput, _extends({
+            className: classNames__default["default"](classes.content, _defineProperty$1({}, classes.input__invalid, errorDisplayed))
+          }, step.props, {
             possibleValues: step.options,
             httpClient: httpClient,
             isMulti: step.isMulti,
@@ -29773,7 +29783,7 @@ var Step = function Step(_ref8) {
             transformer: step.transformer,
             buttons: step.format === format.buttonsSelect,
             optionsFrom: step.optionsFrom
-          }));
+          })));
 
         default:
           return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
@@ -29789,7 +29799,6 @@ var Step = function Step(_ref8) {
 
     case type.bool:
       return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
-        defaultValue: defaultValue,
         step: step,
         entry: entry,
         errorDisplayed: errorDisplayed
@@ -29806,8 +29815,9 @@ var Step = function Step(_ref8) {
             step: step,
             entry: entry,
             errorDisplayed: errorDisplayed
-          }, /*#__PURE__*/React__default["default"].createElement(SelectInput, {
-            className: classNames__default["default"](classes.flex_grow_1, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
+          }, /*#__PURE__*/React__default["default"].createElement(SelectInput, _extends({
+            className: classNames__default["default"](classes.flex_grow_1, _defineProperty$1({}, classes.input__invalid, errorDisplayed))
+          }, step.props, {
             possibleValues: step.options,
             httpClient: httpClient,
             isMulti: step.isMulti,
@@ -29816,7 +29826,7 @@ var Step = function Step(_ref8) {
             transformer: step.transformer,
             buttons: step.format === format.buttonsSelect,
             optionsFrom: step.optionsFrom
-          }));
+          })));
 
         case format.form:
           //todo: disabled ?

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maif/react-forms",
   "description": "Build react safe forms as fast as possible",
-  "version": "1.0.55",
+  "version": "1.0.56",
   "main": "lib/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/index.js",