@maif/react-forms 1.0.22 → 1.0.23

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/lib/form.js CHANGED
@@ -41,6 +41,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
41
41
 
42
42
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
43
43
 
44
+ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
45
+
46
+ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
47
+
48
+ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
49
+
50
+ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
51
+
44
52
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
45
53
 
46
54
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -165,6 +173,10 @@ var getDefaultValues = function getDefaultValues(flow, schema) {
165
173
  return flow.reduce(function (acc, key) {
166
174
  var entry = schema[key];
167
175
 
176
+ if (!entry) {
177
+ return acc;
178
+ }
179
+
168
180
  if (_typeof(key) === 'object') {
169
181
  return _objectSpread(_objectSpread({}, acc), getDefaultValues(key.flow, schema));
170
182
  }
@@ -238,7 +250,7 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
238
250
  }
239
251
 
240
252
  return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v));
241
- } else if (!!v && _typeof(v) === 'object') {
253
+ } else if (!!v && _typeof(v) === 'object' && !(v instanceof Date)) {
242
254
  var _subSchema$key;
243
255
 
244
256
  return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, cleanInputArray(v, ((_subSchema$key = subSchema[key]) === null || _subSchema$key === void 0 ? void 0 : _subSchema$key.schema) || {})));
@@ -269,7 +281,7 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
269
281
  }
270
282
 
271
283
  return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v));
272
- } else if (!!v && _typeof(v) === 'object') {
284
+ } else if (!!v && _typeof(v) === 'object' && !(v instanceof Date)) {
273
285
  var _subSchema$key2;
274
286
 
275
287
  return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, cleanOutputArray(v, ((_subSchema$key2 = subSchema[key]) === null || _subSchema$key2 === void 0 ? void 0 : _subSchema$key2.schema) || {})));
@@ -343,6 +355,12 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
343
355
  }, onError)
344
356
  }, formFlow.map(function (entry, idx) {
345
357
  var step = schema[entry];
358
+
359
+ if (!step) {
360
+ console.error("no step found for the entry \"".concat(entry, "\" in the given schema. Your form might not work properly. Please fix it"));
361
+ return null;
362
+ }
363
+
346
364
  var error = _typeof(entry) === 'object' ? undefined : entry.split('.').reduce(function (object, key) {
347
365
  return object && object[key];
348
366
  }, errors);
@@ -457,6 +475,20 @@ var Step = function Step(_ref4) {
457
475
  defaultValue = _ref4.defaultValue,
458
476
  index = _ref4.index;
459
477
  var classes = (0, _styleContext.useCustomStyle)();
478
+ var registeredInput = register(entry);
479
+
480
+ var inputProps = _objectSpread(_objectSpread({}, registeredInput), {}, {
481
+ onChange: function onChange(e) {
482
+ registeredInput.onChange(e);
483
+ (0, _Option.option)(step.onChange).map(function (onChange) {
484
+ return onChange({
485
+ rawValues: getValues(),
486
+ value: e.target.value,
487
+ setValue: _setValue
488
+ });
489
+ });
490
+ }
491
+ });
460
492
 
461
493
  if (entry && _typeof(entry) === 'object') {
462
494
  var errored = entry.flow.some(function (step) {
@@ -517,6 +549,17 @@ var Step = function Step(_ref4) {
517
549
  }));
518
550
  }
519
551
 
552
+ var disabled = function disabled() {
553
+ if (typeof step.disabled === 'function') {
554
+ return step.disabled({
555
+ rawValues: getValues(),
556
+ value: getValues(entry)
557
+ });
558
+ } else {
559
+ return step.disabled;
560
+ }
561
+ };
562
+
520
563
  if (step.array) {
521
564
  return /*#__PURE__*/_react["default"].createElement(ArrayStep, {
522
565
  entry: entry,
@@ -528,12 +571,15 @@ var Step = function Step(_ref4) {
528
571
  setValue: _setValue,
529
572
  values: getValues(entry),
530
573
  defaultValue: step.defaultValue || defaultVal(step.type),
574
+ getValues: getValues,
575
+ disabled: disabled(),
531
576
  component: function component(props, idx) {
532
577
  var _error$idx;
533
578
 
534
579
  return /*#__PURE__*/_react["default"].createElement(Step, {
535
580
  entry: "".concat(entry, "[").concat(idx, "].value"),
536
581
  step: _objectSpread(_objectSpread({}, schema[realEntry || entry]), {}, {
582
+ onChange: undefined,
537
583
  array: false
538
584
  }),
539
585
  error: error && ((_error$idx = error[idx]) === null || _error$idx === void 0 ? void 0 : _error$idx.value),
@@ -575,12 +621,11 @@ var Step = function Step(_ref4) {
575
621
  type: "text",
576
622
  id: entry,
577
623
  className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
578
- readOnly: step.disabled ? 'readOnly' : null
624
+ readOnly: disabled() ? 'readOnly' : null
579
625
  }, step.props, {
580
- name: entry,
581
626
  defaultValue: defaultValue,
582
627
  placeholder: step.placeholder
583
- }, register(entry))));
628
+ }, inputProps)));
584
629
 
585
630
  case _format.format.code:
586
631
  return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
@@ -599,8 +644,17 @@ var Step = function Step(_ref4) {
599
644
  error: error
600
645
  }, /*#__PURE__*/_react["default"].createElement(_index.CodeInput, _extends({
601
646
  className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
602
- readOnly: step.disabled ? true : false,
603
- onChange: field.onChange,
647
+ readOnly: disabled() ? true : false,
648
+ onChange: function onChange(e) {
649
+ field.onChange(e);
650
+ (0, _Option.option)(step.onChange).map(function (onChange) {
651
+ return onChange({
652
+ rawValues: getValues(),
653
+ value: e,
654
+ setValue: _setValue
655
+ });
656
+ });
657
+ },
604
658
  value: field.value,
605
659
  defaultValue: defaultValue
606
660
  }, step.props)));
@@ -624,8 +678,17 @@ var Step = function Step(_ref4) {
624
678
  error: error
625
679
  }, /*#__PURE__*/_react["default"].createElement(_index.MarkdownInput, _extends({}, step.props, {
626
680
  className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
627
- readOnly: step.disabled ? 'readOnly' : null,
628
- onChange: field.onChange,
681
+ readOnly: disabled() ? 'readOnly' : null,
682
+ onChange: function onChange(e) {
683
+ field.onChange(e);
684
+ (0, _Option.option)(step.onChange).map(function (onChange) {
685
+ return onChange({
686
+ rawValues: getValues(),
687
+ value: e,
688
+ setValue: _setValue
689
+ });
690
+ });
691
+ },
629
692
  value: field.value,
630
693
  defaultValue: defaultValue
631
694
  }, step)));
@@ -648,15 +711,24 @@ var Step = function Step(_ref4) {
648
711
  rawValues: getValues()
649
712
  }, field),
650
713
  error: error
651
- }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, {
714
+ }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, step, {
652
715
  className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
653
- readOnly: step.disabled ? 'readOnly' : null,
654
- onChange: field.onChange,
716
+ disabled: disabled(),
655
717
  value: field.value,
656
718
  possibleValues: step.options,
657
719
  defaultValue: defaultValue,
658
- httpClient: httpClient
659
- }, step)));
720
+ httpClient: httpClient,
721
+ onChange: function onChange(value) {
722
+ field.onChange(value);
723
+ (0, _Option.option)(step.onChange).map(function (onChange) {
724
+ return onChange({
725
+ rawValues: getValues(),
726
+ value: value,
727
+ setValue: _setValue
728
+ });
729
+ });
730
+ }
731
+ })));
660
732
  }
661
733
  });
662
734
 
@@ -677,14 +749,13 @@ var Step = function Step(_ref4) {
677
749
  },
678
750
  error: error
679
751
  }, /*#__PURE__*/_react["default"].createElement("input", _extends({
680
- // {...step.props}
681
752
  type: step.format || 'text',
682
753
  id: entry,
683
754
  className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
684
- readOnly: step.disabled ? 'readOnly' : null // defaultValue={defaultValue}
685
- ,
755
+ readOnly: disabled() ? 'readOnly' : null,
756
+ defaultValue: defaultValue,
686
757
  placeholder: step.placeholder
687
- }, register(entry))));
758
+ }, inputProps)));
688
759
  }
689
760
 
690
761
  case _type.type.number:
@@ -705,15 +776,24 @@ var Step = function Step(_ref4) {
705
776
  rawValues: getValues()
706
777
  }, field),
707
778
  error: error
708
- }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, {
779
+ }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, step, {
709
780
  className: (0, _classnames["default"])(classes.content, _defineProperty({}, classes.input__invalid, error)),
710
- readOnly: step.disabled ? 'readOnly' : null,
711
- onChange: field.onChange,
781
+ readOnly: disabled() ? 'readOnly' : null,
782
+ onChange: function onChange(e) {
783
+ field.onChange(e);
784
+ (0, _Option.option)(step.onChange).map(function (onChange) {
785
+ return onChange({
786
+ rawValues: getValues(),
787
+ value: e,
788
+ setValue: _setValue
789
+ });
790
+ });
791
+ },
712
792
  value: field.value,
713
793
  possibleValues: step.options,
714
794
  defaultValue: defaultValue,
715
795
  httpClient: httpClient
716
- }, step)));
796
+ })));
717
797
  }
718
798
  });
719
799
 
@@ -735,11 +815,11 @@ var Step = function Step(_ref4) {
735
815
  type: step.format || 'number',
736
816
  id: entry,
737
817
  className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
738
- readOnly: step.disabled ? 'readOnly' : null,
818
+ readOnly: disabled() ? 'readOnly' : null,
739
819
  name: entry,
740
820
  placeholder: step.placeholder,
741
821
  defaultValue: defaultValue
742
- }, register(entry))));
822
+ }, inputProps)));
743
823
  }
744
824
 
745
825
  case _type.type.bool:
@@ -759,8 +839,17 @@ var Step = function Step(_ref4) {
759
839
  error: error
760
840
  }, /*#__PURE__*/_react["default"].createElement(_index.BooleanInput, _extends({}, step.props, {
761
841
  className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
762
- readOnly: step.disabled ? 'readOnly' : null,
763
- onChange: field.onChange,
842
+ readOnly: disabled() ? 'readOnly' : null,
843
+ onChange: function onChange(e) {
844
+ field.onChange(e);
845
+ (0, _Option.option)(step.onChange).map(function (onChange) {
846
+ return onChange({
847
+ rawValues: getValues(),
848
+ value: e,
849
+ setValue: _setValue
850
+ });
851
+ });
852
+ },
764
853
  value: field.value
765
854
  })));
766
855
  }
@@ -785,18 +874,28 @@ var Step = function Step(_ref4) {
785
874
  rawValues: getValues()
786
875
  }, field),
787
876
  error: error
788
- }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, {
877
+ }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, step, {
789
878
  className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
790
- readOnly: step.disabled ? 'readOnly' : null,
791
- onChange: field.onChange,
879
+ readOnly: disabled() ? 'readOnly' : null,
880
+ onChange: function onChange(e) {
881
+ field.onChange(e);
882
+ (0, _Option.option)(step.onChange).map(function (onChange) {
883
+ return onChange({
884
+ rawValues: getValues(),
885
+ value: e,
886
+ setValue: _setValue
887
+ });
888
+ });
889
+ },
792
890
  value: field.value,
793
891
  possibleValues: step.options,
794
892
  httpClient: httpClient
795
- }, step)));
893
+ })));
796
894
  }
797
895
  });
798
896
 
799
897
  case _format.format.form:
898
+ //todo: disabled ?
800
899
  var flow = (0, _Option.option)(step.flow).getOrElse((0, _Option.option)(step.schema).map(function (s) {
801
900
  return Object.keys(s);
802
901
  }).getOrNull());
@@ -843,13 +942,22 @@ var Step = function Step(_ref4) {
843
942
  rawValues: getValues()
844
943
  }, field),
845
944
  error: error
846
- }, /*#__PURE__*/_react["default"].createElement(_index.ObjectInput, _extends({}, step.props, {
945
+ }, /*#__PURE__*/_react["default"].createElement(_index.ObjectInput, _extends({}, step.props, step, {
847
946
  className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
848
- readOnly: step.disabled ? 'readOnly' : null,
849
- onChange: field.onChange,
947
+ readOnly: disabled() ? 'readOnly' : null,
948
+ onChange: function onChange(e) {
949
+ field.onChange(e);
950
+ (0, _Option.option)(step.onChange).map(function (onChange) {
951
+ return onChange({
952
+ rawValues: getValues(),
953
+ value: e,
954
+ setValue: _setValue
955
+ });
956
+ });
957
+ },
850
958
  value: field.value,
851
959
  possibleValues: step.options
852
- }, step)));
960
+ })));
853
961
  }
854
962
  });
855
963
  }
@@ -873,11 +981,19 @@ var Step = function Step(_ref4) {
873
981
  }, /*#__PURE__*/_react["default"].createElement(_reactRainbowComponents.DatePicker, _extends({}, step.props, {
874
982
  id: "datePicker-1",
875
983
  className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
876
- readOnly: step.disabled ? 'readOnly' : null,
984
+ readOnly: disabled() ? 'readOnly' : null,
877
985
  value: field.value,
878
- onChange: field.onChange,
879
- formatStyle: "large" // locale={state.locale.name}
880
-
986
+ onChange: function onChange(e) {
987
+ field.onChange(e);
988
+ (0, _Option.option)(step.onChange).map(function (onChange) {
989
+ return onChange({
990
+ rawValues: getValues(),
991
+ value: e,
992
+ setValue: _setValue
993
+ });
994
+ });
995
+ },
996
+ formatStyle: "large"
881
997
  })));
882
998
  }
883
999
  });
@@ -927,7 +1043,7 @@ var Step = function Step(_ref4) {
927
1043
  }), /*#__PURE__*/_react["default"].createElement("button", {
928
1044
  type: "button",
929
1045
  className: "".concat(classes.btn, " ").concat(classes.flex, " ").concat(classes.ai_center),
930
- disabled: uploading,
1046
+ disabled: uploading || disabled(),
931
1047
  onClick: trigger
932
1048
  }, uploading && /*#__PURE__*/_react["default"].createElement(_reactFeather.Loader, null), !uploading && /*#__PURE__*/_react["default"].createElement(_reactFeather.Upload, null), /*#__PURE__*/_react["default"].createElement("span", {
933
1049
  className: "".concat(classes.ml_5)
@@ -944,7 +1060,16 @@ var Step = function Step(_ref4) {
944
1060
  }, field),
945
1061
  error: error
946
1062
  }, /*#__PURE__*/_react["default"].createElement(FileInput, {
947
- onChange: field.onChange,
1063
+ onChange: function onChange(e) {
1064
+ field.onChange(e);
1065
+ (0, _Option.option)(step.onChange).map(function (onChange) {
1066
+ return onChange({
1067
+ rawValues: getValues(),
1068
+ value: e,
1069
+ setValue: _setValue
1070
+ });
1071
+ });
1072
+ },
948
1073
  error: error
949
1074
  }));
950
1075
  }
@@ -970,10 +1095,10 @@ var Step = function Step(_ref4) {
970
1095
  type: "file",
971
1096
  id: entry,
972
1097
  className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
973
- readOnly: step.disabled ? 'readOnly' : null,
1098
+ readOnly: disabled() ? 'readOnly' : null,
974
1099
  name: entry,
975
1100
  placeholder: step.placeholder
976
- }, register(entry))));
1101
+ }, inputProps)));
977
1102
 
978
1103
  default:
979
1104
  return null;
@@ -990,7 +1115,9 @@ var ArrayStep = function ArrayStep(_ref15) {
990
1115
  component = _ref15.component,
991
1116
  values = _ref15.values,
992
1117
  defaultValue = _ref15.defaultValue,
993
- setValue = _ref15.setValue;
1118
+ setValue = _ref15.setValue,
1119
+ getValues = _ref15.getValues,
1120
+ disabled = _ref15.disabled;
994
1121
  var classes = (0, _styleContext.useCustomStyle)();
995
1122
 
996
1123
  var _useFieldArray = (0, _reactHookForm.useFieldArray)({
@@ -1018,6 +1145,7 @@ var ArrayStep = function ArrayStep(_ref15) {
1018
1145
  className: "input-group-append"
1019
1146
  }, /*#__PURE__*/_react["default"].createElement("button", {
1020
1147
  className: "btn btn-danger btn-sm",
1148
+ disabled: disabled,
1021
1149
  onClick: function onClick() {
1022
1150
  remove(idx);
1023
1151
  trigger(entry);
@@ -1028,10 +1156,18 @@ var ArrayStep = function ArrayStep(_ref15) {
1028
1156
  className: (0, _classnames["default"])("btn btn-info mt-2", _defineProperty({}, classes.input__invalid, error)),
1029
1157
  onClick: function onClick() {
1030
1158
  append({
1031
- value: step.addableDefaultValue
1159
+ value: step.addableDefaultValue || defaultVal(step.type)
1032
1160
  });
1033
1161
  trigger(entry);
1162
+ (0, _Option.option)(step.onChange).map(function (onChange) {
1163
+ return onChange({
1164
+ rawValues: getValues(),
1165
+ value: getValues(entry),
1166
+ setValue: setValue
1167
+ });
1168
+ });
1034
1169
  },
1170
+ disabled: disabled,
1035
1171
  value: "Add"
1036
1172
  }), error && /*#__PURE__*/_react["default"].createElement("div", {
1037
1173
  className: "invalid-feedback"
@@ -1095,14 +1231,38 @@ var NestedForm = function NestedForm(_ref16) {
1095
1231
  });
1096
1232
  }
1097
1233
  }, [prevSchema, schemaAndFlow.schema]);
1234
+ var test = schemaAndFlow.flow.reduce(function (acc, entry) {
1235
+ var step = schemaAndFlow.schema[entry];
1236
+ var visibleStep = (0, _Option.option)(step).map(function (s) {
1237
+ return s.visible;
1238
+ }).map(function (visible) {
1239
+ switch (_typeof(visible)) {
1240
+ case 'object':
1241
+ var _value2 = watch(visible.ref);
1242
+
1243
+ return (0, _Option.option)(visible.test).map(function (test) {
1244
+ return test(_value2);
1245
+ }).getOrElse(_value2);
1246
+
1247
+ case 'boolean':
1248
+ return visible;
1249
+
1250
+ default:
1251
+ return true;
1252
+ }
1253
+ }).getOrElse(true);
1254
+ return [].concat(_toConsumableArray(acc), [{
1255
+ step: step,
1256
+ visibleStep: visibleStep,
1257
+ entry: entry
1258
+ }]);
1259
+ }, []);
1260
+ var bordered = test.filter(function (x) {
1261
+ return x.visibleStep;
1262
+ }).length <= 1 && step.label === null;
1098
1263
  return /*#__PURE__*/_react["default"].createElement("div", {
1099
- style: {
1100
- borderLeft: '2px solid lightGray',
1101
- paddingLeft: '1rem',
1102
- marginBottom: '.5rem',
1103
- position: 'relative'
1104
- }
1105
- }, schemaAndFlow.flow.length > 1 && collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.ArrowDown, {
1264
+ className: (0, _classnames["default"])(_defineProperty({}, classes.nestedform__border, bordered))
1265
+ }, !!step.collapsable && schemaAndFlow.flow.length > 1 && collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.ArrowDown, {
1106
1266
  size: 30,
1107
1267
  className: classes.cursor_pointer,
1108
1268
  style: {
@@ -1114,7 +1274,7 @@ var NestedForm = function NestedForm(_ref16) {
1114
1274
  onClick: function onClick() {
1115
1275
  return setCollapsed(!collapsed);
1116
1276
  }
1117
- }), schemaAndFlow.flow.length > 1 && !collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.ArrowUp, {
1277
+ }), !!step.collapsable && schemaAndFlow.flow.length > 1 && !collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.ArrowUp, {
1118
1278
  size: 30,
1119
1279
  className: classes.cursor_pointer,
1120
1280
  style: {
@@ -1122,35 +1282,19 @@ var NestedForm = function NestedForm(_ref16) {
1122
1282
  top: '5px',
1123
1283
  left: '-16px'
1124
1284
  },
1125
- "stroke-width": "3",
1285
+ "strok-width": "3",
1126
1286
  onClick: function onClick() {
1127
1287
  return setCollapsed(!collapsed);
1128
1288
  }
1129
- }), schemaAndFlow.flow.map(function (entry, idx) {
1130
- var step = schemaAndFlow.schema[entry];
1289
+ }), test.map(function (_ref17, idx) {
1290
+ var step = _ref17.step,
1291
+ visibleStep = _ref17.visibleStep,
1292
+ entry = _ref17.entry;
1131
1293
  var realError = error && error[entry];
1132
- var oneVisibleSetup = Object.values(schema).some(function (v) {
1294
+ var oneVisibleSetup = Object.values(schemaAndFlow.schema).some(function (v) {
1133
1295
  return !!v.visibleOnCollapse;
1134
1296
  });
1135
1297
  var isCollapsed = collapsed && (oneVisibleSetup ? !step.visibleOnCollapse : idx > 0);
1136
- var visibleStep = (0, _Option.option)(step).map(function (s) {
1137
- return s.visible;
1138
- }).map(function (visible) {
1139
- switch (_typeof(visible)) {
1140
- case 'object':
1141
- var _value2 = watch(visible.ref);
1142
-
1143
- return (0, _Option.option)(visible.test).map(function (test) {
1144
- return test(_value2);
1145
- }).getOrElse(_value2);
1146
-
1147
- case 'boolean':
1148
- return visible;
1149
-
1150
- default:
1151
- return true;
1152
- }
1153
- }).getOrElse(true);
1154
1298
  return /*#__PURE__*/_react["default"].createElement(BasicWrapper, {
1155
1299
  key: "".concat(entry, ".").concat(idx),
1156
1300
  className: (0, _classnames["default"])(_defineProperty({}, classes.display__none, isCollapsed || !visibleStep)),
@@ -189,6 +189,7 @@ var SelectInput = function SelectInput(props) {
189
189
  return /*#__PURE__*/_react["default"].createElement("button", {
190
190
  key: idx,
191
191
  type: "button",
192
+ disabled: props.disabled,
192
193
  className: (0, _classnames["default"])(props.className, classes.btn, classes.btn_grey, classes.ml_5, {
193
194
  active: active
194
195
  }),
@@ -213,7 +214,8 @@ var SelectInput = function SelectInput(props) {
213
214
  return handleCreate(option, props.onCreateOption);
214
215
  },
215
216
  classNamePrefix: "react-form-select",
216
- className: props.className
217
+ className: props.className,
218
+ readOnly: props.disabled ? 'readOnly' : null
217
219
  }));
218
220
  } else {
219
221
  return /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], _extends({}, props, {
@@ -225,7 +227,8 @@ var SelectInput = function SelectInput(props) {
225
227
  options: values,
226
228
  onChange: onChange,
227
229
  classNamePrefix: "react-form-select",
228
- className: props.className
230
+ className: props.className,
231
+ readOnly: props.disabled ? 'readOnly' : null
229
232
  }));
230
233
  }
231
234
  };
package/lib/style.d.ts CHANGED
@@ -216,4 +216,11 @@ export namespace style {
216
216
  marginLeft: string;
217
217
  };
218
218
  };
219
+ namespace nestedform__border {
220
+ export const borderLeft: string;
221
+ export const paddingLeft: string;
222
+ const marginBottom_1: string;
223
+ export { marginBottom_1 as marginBottom };
224
+ export const position: string;
225
+ }
219
226
  }
package/lib/style.js CHANGED
@@ -163,5 +163,10 @@ var style = (_style = {
163
163
  "& .form-group+.form-group": {
164
164
  marginLeft: '20px'
165
165
  }
166
+ }), _defineProperty(_style, "nestedform__border", {
167
+ borderLeft: '2px solid lightGray',
168
+ paddingLeft: '1rem',
169
+ marginBottom: '.5rem',
170
+ position: 'relative'
166
171
  }), _style);
167
172
  exports.style = style;
@@ -1 +1 @@
1
- export function useCustomStyle(overrideStyle?: {}): import("jss").Classes<"code" | "flex" | "input" | "btn" | "btn_sm" | "btn_group" | "btn_red" | "btn_green" | "btn_blue" | "btn_grey" | "txt_red" | "ml_5" | "ml_10" | "mr_5" | "mr_10" | "mt_5" | "mt_10" | "mt_20" | "mb_5" | "p_15" | "pr_15" | "full_width" | "d_none" | "flexColumn" | "justifyContentBetween" | "jc_end" | "ac_center" | "ai_center" | "cursor_pointer" | "collapse" | "collapse_label" | "collapse_error" | "datepicker" | "input__boolean__on" | "input__boolean__off" | "input__invalid" | "invalid_feedback" | "display__none" | "collapse__inline">;
1
+ export function useCustomStyle(overrideStyle?: {}): import("jss").Classes<"code" | "flex" | "input" | "btn" | "btn_sm" | "btn_group" | "btn_red" | "btn_green" | "btn_blue" | "btn_grey" | "txt_red" | "ml_5" | "ml_10" | "mr_5" | "mr_10" | "mt_5" | "mt_10" | "mt_20" | "mb_5" | "p_15" | "pr_15" | "full_width" | "d_none" | "flexColumn" | "justifyContentBetween" | "jc_end" | "ac_center" | "ai_center" | "cursor_pointer" | "collapse" | "collapse_label" | "collapse_error" | "datepicker" | "input__boolean__on" | "input__boolean__off" | "input__invalid" | "invalid_feedback" | "display__none" | "collapse__inline" | "nestedform__border">;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@maif/react-forms",
3
3
  "description": "Build react safe forms as fast as possible",
4
- "version": "1.0.22",
4
+ "version": "1.0.23",
5
5
  "main": "lib/index.js",
6
6
  "author": "MAIF team",
7
7
  "keywords": [