@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/.github/workflows/release.yml +1 -1
- package/README.md +5 -1
- package/dist/react-form.js +1 -1
- package/lib/form.js +218 -74
- package/lib/inputs/SelectInput.js +5 -2
- package/lib/style.d.ts +7 -0
- package/lib/style.js +5 -0
- package/lib/styleContext.d.ts +1 -1
- package/package.json +1 -1
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:
|
|
624
|
+
readOnly: disabled() ? 'readOnly' : null
|
|
579
625
|
}, step.props, {
|
|
580
|
-
name: entry,
|
|
581
626
|
defaultValue: defaultValue,
|
|
582
627
|
placeholder: step.placeholder
|
|
583
|
-
},
|
|
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:
|
|
603
|
-
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:
|
|
628
|
-
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
|
-
|
|
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
|
-
|
|
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:
|
|
685
|
-
,
|
|
755
|
+
readOnly: disabled() ? 'readOnly' : null,
|
|
756
|
+
defaultValue: defaultValue,
|
|
686
757
|
placeholder: step.placeholder
|
|
687
|
-
},
|
|
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:
|
|
711
|
-
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
|
-
}
|
|
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:
|
|
818
|
+
readOnly: disabled() ? 'readOnly' : null,
|
|
739
819
|
name: entry,
|
|
740
820
|
placeholder: step.placeholder,
|
|
741
821
|
defaultValue: defaultValue
|
|
742
|
-
},
|
|
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:
|
|
763
|
-
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:
|
|
791
|
-
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
|
-
}
|
|
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:
|
|
849
|
-
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
|
-
}
|
|
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:
|
|
984
|
+
readOnly: disabled() ? 'readOnly' : null,
|
|
877
985
|
value: field.value,
|
|
878
|
-
onChange:
|
|
879
|
-
|
|
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:
|
|
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:
|
|
1098
|
+
readOnly: disabled() ? 'readOnly' : null,
|
|
974
1099
|
name: entry,
|
|
975
1100
|
placeholder: step.placeholder
|
|
976
|
-
},
|
|
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
|
-
|
|
1100
|
-
|
|
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
|
-
"
|
|
1285
|
+
"strok-width": "3",
|
|
1126
1286
|
onClick: function onClick() {
|
|
1127
1287
|
return setCollapsed(!collapsed);
|
|
1128
1288
|
}
|
|
1129
|
-
}),
|
|
1130
|
-
var step =
|
|
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;
|
package/lib/styleContext.d.ts
CHANGED
|
@@ -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">;
|