intelicoreact 0.1.75 → 0.1.78
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/dist/Atomic/FormElements/InputMask/InputMask.js +164 -137
- package/dist/Atomic/UI/Modal/Modal.js +2 -1
- package/dist/Functions/useFormTools/form-drivers/ObjectWithNamedKeyObjects.js +31 -6
- package/dist/Functions/useFormTools/functions/RenderFields.js +9 -2
- package/dist/Functions/useFormTools/index.js +268 -77
- package/package.json +2 -2
|
@@ -67,8 +67,6 @@ function InputMask() {
|
|
|
67
67
|
isIconLeft = _ref.isIconLeft,
|
|
68
68
|
isIconRight = _ref.isIconRight,
|
|
69
69
|
value = _ref.value,
|
|
70
|
-
_ref$onChange = _ref.onChange,
|
|
71
|
-
onChangeProp = _ref$onChange === void 0 ? function () {} : _ref$onChange,
|
|
72
70
|
_ref$blinkErrors = _ref.blinkErrors,
|
|
73
71
|
blinkErrors = _ref$blinkErrors === void 0 ? true : _ref$blinkErrors,
|
|
74
72
|
_ref$blinkDuration = _ref.blinkDuration,
|
|
@@ -82,10 +80,14 @@ function InputMask() {
|
|
|
82
80
|
_ref$error = _ref.error,
|
|
83
81
|
customError = _ref$error === void 0 ? '' : _ref$error,
|
|
84
82
|
ref = _ref.ref,
|
|
83
|
+
_ref$onChange = _ref.onChange,
|
|
84
|
+
onChangeProp = _ref$onChange === void 0 ? function () {} : _ref$onChange,
|
|
85
85
|
_ref$onFocus = _ref.onFocus,
|
|
86
86
|
onFocusProp = _ref$onFocus === void 0 ? function () {} : _ref$onFocus,
|
|
87
87
|
_ref$onBlur = _ref.onBlur,
|
|
88
88
|
onBlurProp = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
|
|
89
|
+
_ref$onKeyDown = _ref.onKeyDown,
|
|
90
|
+
onKeyDownProp = _ref$onKeyDown === void 0 ? function () {} : _ref$onKeyDown,
|
|
89
91
|
_ref$imitateTypingOnP = _ref.imitateTypingOnPaste,
|
|
90
92
|
imitateTypingOnPaste = _ref$imitateTypingOnP === void 0 ? false : _ref$imitateTypingOnP,
|
|
91
93
|
_ref$imitateTypingOnP2 = _ref.imitateTypingOnPasteDelay,
|
|
@@ -102,6 +104,8 @@ function InputMask() {
|
|
|
102
104
|
isHintLeft = _ref$isHintLeft === void 0 ? false : _ref$isHintLeft,
|
|
103
105
|
_ref$hintPosition = _ref.hintPosition,
|
|
104
106
|
hintPosition = _ref$hintPosition === void 0 ? 'right' : _ref$hintPosition,
|
|
107
|
+
_ref$hideMaskOnBlur = _ref.hideMaskOnBlur,
|
|
108
|
+
hideMaskOnBlur = _ref$hideMaskOnBlur === void 0 ? true : _ref$hideMaskOnBlur,
|
|
105
109
|
name = _ref.name;
|
|
106
110
|
|
|
107
111
|
var errors = _objectSpread(_objectSpread({}, _config.DEFAULT_ERRORS), customErrors);
|
|
@@ -498,84 +502,38 @@ function InputMask() {
|
|
|
498
502
|
return true;
|
|
499
503
|
};
|
|
500
504
|
|
|
501
|
-
var onDeleteDown =
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
break;
|
|
511
|
-
}
|
|
512
|
-
|
|
513
|
-
return _context.abrupt("return", deleteSelectedText());
|
|
514
|
-
|
|
515
|
-
case 2:
|
|
516
|
-
nextIndex = i + 1;
|
|
517
|
-
charObj = getCharByIndex(i);
|
|
518
|
-
|
|
519
|
-
if (charObj) {
|
|
520
|
-
_context.next = 6;
|
|
521
|
-
break;
|
|
522
|
-
}
|
|
523
|
-
|
|
524
|
-
return _context.abrupt("return", false);
|
|
525
|
-
|
|
526
|
-
case 6:
|
|
527
|
-
char = charObj.char, isSpecialSymbol = charObj.isSpecialSymbol;
|
|
528
|
-
|
|
529
|
-
if (!isSpecialSymbol) {
|
|
530
|
-
_context.next = 9;
|
|
531
|
-
break;
|
|
532
|
-
}
|
|
533
|
-
|
|
534
|
-
return _context.abrupt("return", onDeleteDown(e, i + 1));
|
|
535
|
-
|
|
536
|
-
case 9:
|
|
537
|
-
if (!(char === '')) {
|
|
538
|
-
_context.next = 11;
|
|
539
|
-
break;
|
|
540
|
-
}
|
|
541
|
-
|
|
542
|
-
return _context.abrupt("return", false);
|
|
543
|
-
|
|
544
|
-
case 11:
|
|
545
|
-
if (maskAsPlaceholder) {
|
|
546
|
-
newText = innerValue.slice(0, i).concat(innerValue.slice(nextIndex, maxEditableLen !== -1 ? maxEditableLen : innerValue.length)).reduce(function (text, _ref14) {
|
|
547
|
-
var char = _ref14.char;
|
|
548
|
-
return text.concat(char);
|
|
549
|
-
}, ''); // const newText = getInnerValueAsString().substring(0, i) + getInnerValueAsString().substring(nextIndex, maxEditableLen !== -1 ? maxEditableLen : getInnerValueAsString().length);
|
|
505
|
+
var onDeleteDown = function onDeleteDown(e, i) {
|
|
506
|
+
if ((0, _functions.getSelectionText)().length) return deleteSelectedText();
|
|
507
|
+
var nextIndex = i + 1;
|
|
508
|
+
var charObj = getCharByIndex(i);
|
|
509
|
+
if (!charObj) return false;
|
|
510
|
+
var char = charObj.char,
|
|
511
|
+
isSpecialSymbol = charObj.isSpecialSymbol;
|
|
512
|
+
if (isSpecialSymbol) return onDeleteDown(e, i + 1);
|
|
513
|
+
if (char === '') return false;
|
|
550
514
|
|
|
551
|
-
|
|
515
|
+
if (maskAsPlaceholder) {
|
|
516
|
+
var newText = innerValue.slice(0, i).concat(innerValue.slice(nextIndex, maxEditableLen !== -1 ? maxEditableLen : innerValue.length)).reduce(function (text, _ref13) {
|
|
517
|
+
var char = _ref13.char;
|
|
518
|
+
return text.concat(char);
|
|
519
|
+
}, ''); // const newText = getInnerValueAsString().substring(0, i) + getInnerValueAsString().substring(nextIndex, maxEditableLen !== -1 ? maxEditableLen : getInnerValueAsString().length);
|
|
552
520
|
|
|
553
|
-
|
|
554
|
-
text: newText
|
|
555
|
-
}, 0);
|
|
556
|
-
|
|
557
|
-
setFocusOnChar(i, i);
|
|
558
|
-
} else {
|
|
559
|
-
updateInnerValueChar({
|
|
560
|
-
char: ''
|
|
561
|
-
}, i);
|
|
562
|
-
setFocusOnChar(nextIndex, i);
|
|
563
|
-
}
|
|
521
|
+
resetInnerValue();
|
|
564
522
|
|
|
565
|
-
|
|
523
|
+
_onPaste({
|
|
524
|
+
text: newText
|
|
525
|
+
}, 0);
|
|
566
526
|
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
}
|
|
527
|
+
setFocusOnChar(i, i);
|
|
528
|
+
} else {
|
|
529
|
+
updateInnerValueChar({
|
|
530
|
+
char: ''
|
|
531
|
+
}, i);
|
|
532
|
+
setFocusOnChar(nextIndex, i);
|
|
533
|
+
}
|
|
574
534
|
|
|
575
|
-
return
|
|
576
|
-
|
|
577
|
-
};
|
|
578
|
-
}();
|
|
535
|
+
return true;
|
|
536
|
+
};
|
|
579
537
|
|
|
580
538
|
var onHomeDown = function onHomeDown(e, i) {
|
|
581
539
|
return setFocusOnChar(0, -1);
|
|
@@ -624,11 +582,11 @@ function InputMask() {
|
|
|
624
582
|
};
|
|
625
583
|
|
|
626
584
|
var handleKeyDown = /*#__PURE__*/function () {
|
|
627
|
-
var
|
|
585
|
+
var _ref14 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e, i) {
|
|
628
586
|
var _getClearInnerValueAs;
|
|
629
587
|
|
|
630
|
-
var
|
|
631
|
-
|
|
588
|
+
var _ref15,
|
|
589
|
+
_ref15$disableErrors,
|
|
632
590
|
disableErrors,
|
|
633
591
|
key,
|
|
634
592
|
keyCode,
|
|
@@ -639,13 +597,13 @@ function InputMask() {
|
|
|
639
597
|
isReadOnly,
|
|
640
598
|
fromIndex,
|
|
641
599
|
text,
|
|
642
|
-
|
|
600
|
+
_args = arguments;
|
|
643
601
|
|
|
644
|
-
return _regenerator.default.wrap(function
|
|
602
|
+
return _regenerator.default.wrap(function _callee$(_context) {
|
|
645
603
|
while (1) {
|
|
646
|
-
switch (
|
|
604
|
+
switch (_context.prev = _context.next) {
|
|
647
605
|
case 0:
|
|
648
|
-
|
|
606
|
+
_ref15 = _args.length > 2 && _args[2] !== undefined ? _args[2] : {}, _ref15$disableErrors = _ref15.disableErrors, disableErrors = _ref15$disableErrors === void 0 ? false : _ref15$disableErrors;
|
|
649
607
|
|
|
650
608
|
try {
|
|
651
609
|
e.stopPropagation();
|
|
@@ -657,12 +615,12 @@ function InputMask() {
|
|
|
657
615
|
// eslint-disable-next-line eqeqeq
|
|
658
616
|
|
|
659
617
|
if (!(keyCode == _config.ANDROID_CHROME_TEXT_CODE)) {
|
|
660
|
-
|
|
618
|
+
_context.next = 9;
|
|
661
619
|
break;
|
|
662
620
|
}
|
|
663
621
|
|
|
664
622
|
charRef = charObj.ref;
|
|
665
|
-
|
|
623
|
+
_context.next = 8;
|
|
666
624
|
return new Promise(function (resolve) {
|
|
667
625
|
setTimeout(function () {
|
|
668
626
|
var _charRef$current, _charRef$current$inne;
|
|
@@ -685,72 +643,80 @@ function InputMask() {
|
|
|
685
643
|
});
|
|
686
644
|
|
|
687
645
|
case 8:
|
|
688
|
-
key =
|
|
646
|
+
key = _context.sent;
|
|
689
647
|
|
|
690
648
|
case 9:
|
|
691
649
|
if (!(!charObj || i === innerValue.length - 1)) {
|
|
692
|
-
|
|
650
|
+
_context.next = 11;
|
|
693
651
|
break;
|
|
694
652
|
}
|
|
695
653
|
|
|
696
|
-
return
|
|
654
|
+
return _context.abrupt("return", false);
|
|
697
655
|
|
|
698
656
|
case 11:
|
|
699
657
|
if (!(maskAsPlaceholder && i > getLastTypedIndex() + 1)) {
|
|
700
|
-
|
|
658
|
+
_context.next = 15;
|
|
701
659
|
break;
|
|
702
660
|
}
|
|
703
661
|
|
|
704
|
-
|
|
662
|
+
_context.next = 14;
|
|
663
|
+
return handleKeyDown(e, getLastTypedIndex() === 0 ? 0 : getLastTypedIndex() + 1, {
|
|
705
664
|
disableErrors: disableErrors
|
|
706
|
-
})
|
|
665
|
+
});
|
|
707
666
|
|
|
708
|
-
case
|
|
667
|
+
case 14:
|
|
668
|
+
return _context.abrupt("return", _context.sent);
|
|
669
|
+
|
|
670
|
+
case 15:
|
|
709
671
|
isSpecialSymbol = charObj.isSpecialSymbol, maskChar = charObj.maskChar, isReadOnly = charObj.isReadOnly;
|
|
710
672
|
|
|
711
673
|
if (!isReadOnly) {
|
|
712
|
-
|
|
674
|
+
_context.next = 18;
|
|
713
675
|
break;
|
|
714
676
|
}
|
|
715
677
|
|
|
716
|
-
return
|
|
678
|
+
return _context.abrupt("return", false);
|
|
717
679
|
|
|
718
|
-
case
|
|
680
|
+
case 18:
|
|
719
681
|
if (!(maskChar === _config.SPACE_CHAR)) {
|
|
720
|
-
|
|
682
|
+
_context.next = 22;
|
|
721
683
|
break;
|
|
722
684
|
}
|
|
723
685
|
|
|
724
|
-
|
|
686
|
+
_context.next = 21;
|
|
687
|
+
return handleKeyDown(e, i + 1);
|
|
725
688
|
|
|
726
|
-
case
|
|
689
|
+
case 21:
|
|
690
|
+
return _context.abrupt("return", _context.sent);
|
|
691
|
+
|
|
692
|
+
case 22:
|
|
727
693
|
if (!(isSpecialSymbol && maskChar !== key)) {
|
|
728
|
-
|
|
694
|
+
_context.next = 24;
|
|
729
695
|
break;
|
|
730
696
|
}
|
|
731
697
|
|
|
732
|
-
return
|
|
698
|
+
return _context.abrupt("return", false);
|
|
733
699
|
|
|
734
|
-
case
|
|
700
|
+
case 24:
|
|
735
701
|
if (isValidChar({
|
|
736
702
|
char: key,
|
|
737
703
|
i: i,
|
|
738
704
|
disableErrors: disableErrors
|
|
739
705
|
})) {
|
|
740
|
-
|
|
706
|
+
_context.next = 26;
|
|
741
707
|
break;
|
|
742
708
|
}
|
|
743
709
|
|
|
744
|
-
return
|
|
710
|
+
return _context.abrupt("return", false);
|
|
745
711
|
|
|
746
|
-
case
|
|
712
|
+
case 26:
|
|
747
713
|
if (maskAsPlaceholder && ((_getClearInnerValueAs = getClearInnerValueAsString(i)) === null || _getClearInnerValueAs === void 0 ? void 0 : _getClearInnerValueAs.length) !== 0) {
|
|
748
714
|
fromIndex = i + 1;
|
|
749
|
-
text = innerValue.slice().filter(function (
|
|
750
|
-
var isCharSymbol =
|
|
715
|
+
text = innerValue.slice().filter(function (_ref16, index) {
|
|
716
|
+
var isCharSymbol = _ref16.isCharSymbol;
|
|
751
717
|
return index >= i && !isCharSymbol;
|
|
752
|
-
}).map(function (
|
|
753
|
-
var char =
|
|
718
|
+
}).map(function (_ref17, index) {
|
|
719
|
+
var char = _ref17.char;
|
|
754
720
|
return char;
|
|
755
721
|
}).join('');
|
|
756
722
|
|
|
@@ -763,18 +729,18 @@ function InputMask() {
|
|
|
763
729
|
char: key
|
|
764
730
|
}, i);
|
|
765
731
|
onArrowRightDown(e, i);
|
|
766
|
-
return
|
|
732
|
+
return _context.abrupt("return", true);
|
|
767
733
|
|
|
768
|
-
case
|
|
734
|
+
case 30:
|
|
769
735
|
case "end":
|
|
770
|
-
return
|
|
736
|
+
return _context.stop();
|
|
771
737
|
}
|
|
772
738
|
}
|
|
773
|
-
},
|
|
739
|
+
}, _callee);
|
|
774
740
|
}));
|
|
775
741
|
|
|
776
|
-
return function handleKeyDown(
|
|
777
|
-
return
|
|
742
|
+
return function handleKeyDown(_x, _x2) {
|
|
743
|
+
return _ref14.apply(this, arguments);
|
|
778
744
|
};
|
|
779
745
|
}();
|
|
780
746
|
|
|
@@ -790,29 +756,92 @@ function InputMask() {
|
|
|
790
756
|
}
|
|
791
757
|
};
|
|
792
758
|
|
|
793
|
-
var _onKeyDown = function
|
|
794
|
-
var
|
|
795
|
-
|
|
796
|
-
var key = e.key,
|
|
797
|
-
ctrlKey = e.ctrlKey,
|
|
798
|
-
altKey = e.altKey;
|
|
799
|
-
if (_indexConstants.KEYBOARD_SERVICE_KEYS.includes(key) && _config.EXCLUDED_KEYS.includes(key)) return true;
|
|
800
|
-
setError(false);
|
|
801
|
-
clearErrorMessage();
|
|
759
|
+
var _onKeyDown = /*#__PURE__*/function () {
|
|
760
|
+
var _ref18 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(e) {
|
|
761
|
+
var _innerValue$0$ref;
|
|
802
762
|
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
763
|
+
var i,
|
|
764
|
+
key,
|
|
765
|
+
ctrlKey,
|
|
766
|
+
altKey,
|
|
767
|
+
handleResult,
|
|
768
|
+
_args2 = arguments;
|
|
769
|
+
return _regenerator.default.wrap(function _callee2$(_context2) {
|
|
770
|
+
while (1) {
|
|
771
|
+
switch (_context2.prev = _context2.next) {
|
|
772
|
+
case 0:
|
|
773
|
+
i = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : null;
|
|
807
774
|
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
775
|
+
if (isFocused) {
|
|
776
|
+
_context2.next = 3;
|
|
777
|
+
break;
|
|
778
|
+
}
|
|
811
779
|
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
780
|
+
return _context2.abrupt("return", false);
|
|
781
|
+
|
|
782
|
+
case 3:
|
|
783
|
+
key = e.key, ctrlKey = e.ctrlKey, altKey = e.altKey;
|
|
784
|
+
e.target = ((_innerValue$0$ref = innerValue[0].ref) === null || _innerValue$0$ref === void 0 ? void 0 : _innerValue$0$ref.current) || e.target;
|
|
785
|
+
onKeyDownProp(e, i);
|
|
786
|
+
|
|
787
|
+
if (!(_indexConstants.KEYBOARD_SERVICE_KEYS.includes(key) && _config.EXCLUDED_KEYS.includes(key))) {
|
|
788
|
+
_context2.next = 8;
|
|
789
|
+
break;
|
|
790
|
+
}
|
|
791
|
+
|
|
792
|
+
return _context2.abrupt("return", true);
|
|
793
|
+
|
|
794
|
+
case 8:
|
|
795
|
+
setError(false);
|
|
796
|
+
clearErrorMessage();
|
|
797
|
+
|
|
798
|
+
if (!(ctrlKey || altKey)) {
|
|
799
|
+
_context2.next = 13;
|
|
800
|
+
break;
|
|
801
|
+
}
|
|
802
|
+
|
|
803
|
+
if (!_indexConstants.KEYBOARD_SERVICE_KEYS.includes(key)) handleKeyCombinations(e, i);
|
|
804
|
+
return _context2.abrupt("return", true);
|
|
805
|
+
|
|
806
|
+
case 13:
|
|
807
|
+
e.preventDefault();
|
|
808
|
+
e.stopPropagation();
|
|
809
|
+
|
|
810
|
+
if (!_indexConstants.KEYBOARD_SERVICE_KEYS.includes(key)) {
|
|
811
|
+
_context2.next = 19;
|
|
812
|
+
break;
|
|
813
|
+
}
|
|
814
|
+
|
|
815
|
+
_context2.t0 = handleServiceKeyDown(e, i);
|
|
816
|
+
_context2.next = 22;
|
|
817
|
+
break;
|
|
818
|
+
|
|
819
|
+
case 19:
|
|
820
|
+
_context2.next = 21;
|
|
821
|
+
return handleKeyDown(e, i);
|
|
822
|
+
|
|
823
|
+
case 21:
|
|
824
|
+
_context2.t0 = _context2.sent;
|
|
825
|
+
|
|
826
|
+
case 22:
|
|
827
|
+
handleResult = _context2.t0;
|
|
828
|
+
|
|
829
|
+
if (blinkErrors && !handleResult && i !== null) {
|
|
830
|
+
setBlinkError(true);
|
|
831
|
+
}
|
|
832
|
+
|
|
833
|
+
case 24:
|
|
834
|
+
case "end":
|
|
835
|
+
return _context2.stop();
|
|
836
|
+
}
|
|
837
|
+
}
|
|
838
|
+
}, _callee2);
|
|
839
|
+
}));
|
|
840
|
+
|
|
841
|
+
return function onKeyDown(_x3) {
|
|
842
|
+
return _ref18.apply(this, arguments);
|
|
843
|
+
};
|
|
844
|
+
}();
|
|
816
845
|
|
|
817
846
|
var onClick = function onClick(e, cb) {
|
|
818
847
|
var _ref19 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
|
|
@@ -1224,9 +1253,7 @@ function InputMask() {
|
|
|
1224
1253
|
tabIndex: i === 0 ? 0 : -1,
|
|
1225
1254
|
key: i,
|
|
1226
1255
|
"attr-char-id": i,
|
|
1227
|
-
className: "\n input-mask_value_item\n ".concat(className, "\n ").concat((0, _functions.isDigitMaskChar)(obj.maskChar) ? 'input-mask_value_item--digit' : '', "\n ").concat((0, _functions.isLetterMaskChar)(obj.maskChar) ? 'input-mask_value_item--letter' : '', "\n ").concat(obj.isSpecialSymbol ? 'input-mask_value_item--spec' : '', "\n ")
|
|
1228
|
-
// ${!isSelecting && (char === '' || isSpecialSymbol) ? 'unselectable' : ''}
|
|
1229
|
-
,
|
|
1256
|
+
className: "\n input-mask_value_item\n ".concat(className, "\n ").concat((0, _functions.isDigitMaskChar)(obj.maskChar) ? 'input-mask_value_item--digit' : '', "\n ").concat((0, _functions.isLetterMaskChar)(obj.maskChar) ? 'input-mask_value_item--letter' : '', "\n ").concat(obj.isSpecialSymbol ? 'input-mask_value_item--spec' : '', "\n "),
|
|
1230
1257
|
onClick: function onClick(e) {
|
|
1231
1258
|
return onCharClick(e, i);
|
|
1232
1259
|
},
|
|
@@ -1266,7 +1293,7 @@ function InputMask() {
|
|
|
1266
1293
|
onMouseMove: function onMouseMove(e) {
|
|
1267
1294
|
return cancelDefaultAction(e, onMouseDownMove);
|
|
1268
1295
|
}
|
|
1269
|
-
}, isSpecialSymbol ? maskChar : char === '' ? getPlaceholderCharByIndex(i) : char);
|
|
1296
|
+
}, !isFocused && hideMaskOnBlur && getClearInnerValueAsString().length === 0 ? _config.SPACE_CHAR : isSpecialSymbol ? maskChar : char === '' ? getPlaceholderCharByIndex(i) : char);
|
|
1270
1297
|
};
|
|
1271
1298
|
|
|
1272
1299
|
var renderMaskChar = function renderMaskChar(obj, i) {
|
|
@@ -49,6 +49,7 @@ var Modal = function Modal(_ref) {
|
|
|
49
49
|
noConfirmBtn = _ref.noConfirmBtn,
|
|
50
50
|
noCloseBtn = _ref.noCloseBtn,
|
|
51
51
|
noFooter = _ref.noFooter,
|
|
52
|
+
noHeader = _ref.noHeader,
|
|
52
53
|
closeBtnClassName = _ref.closeBtnClassName,
|
|
53
54
|
closeBtnText = _ref.closeBtnText,
|
|
54
55
|
closeBtnVariant = _ref.closeBtnVariant,
|
|
@@ -87,7 +88,7 @@ var Modal = function Modal(_ref) {
|
|
|
87
88
|
width: size
|
|
88
89
|
},
|
|
89
90
|
className: (0, _classnames.default)(className, "".concat(isOpen ? 'modal' : 'hidden'))
|
|
90
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
91
|
+
}, !noHeader && /*#__PURE__*/_react.default.createElement("div", {
|
|
91
92
|
className: (0, _classnames.default)('modal__header', (0, _defineProperty2.default)({}, "modal__header-".concat(variant), variant))
|
|
92
93
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
93
94
|
className: (0, _classnames.default)('modal__header-title', (0, _defineProperty2.default)({}, "modal__header-".concat(variant, "-title"), variant))
|
|
@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.default = ObjectWithNamedKeyObjects;
|
|
9
9
|
|
|
10
|
+
var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
|
|
11
|
+
|
|
10
12
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
13
|
|
|
12
14
|
var _General2 = _interopRequireDefault(require("../functions/General"));
|
|
@@ -18,7 +20,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
18
20
|
var noop = function noop() {};
|
|
19
21
|
|
|
20
22
|
function ObjectWithNamedKeyObjects() {
|
|
21
|
-
var
|
|
23
|
+
var _ref4;
|
|
22
24
|
|
|
23
25
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
24
26
|
form = _ref.form,
|
|
@@ -72,18 +74,41 @@ function ObjectWithNamedKeyObjects() {
|
|
|
72
74
|
return setFormFields({});
|
|
73
75
|
};
|
|
74
76
|
|
|
75
|
-
|
|
77
|
+
var removeFormField = function removeFormField(key) {
|
|
78
|
+
return setFormFields(function (state) {
|
|
79
|
+
return Object.keys(state).filter(function (fKey) {
|
|
80
|
+
return fKey !== key;
|
|
81
|
+
}).reduce(function (obj, key) {
|
|
82
|
+
return _objectSpread(_objectSpread({}, obj), {}, (0, _defineProperty2.default)({}, key, state[key]));
|
|
83
|
+
}, {});
|
|
84
|
+
});
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
var removeFormFields = function removeFormFields(_ref2) {
|
|
88
|
+
var _ref3 = (0, _toArray2.default)(_ref2),
|
|
89
|
+
keys = _ref3.slice(0);
|
|
90
|
+
|
|
91
|
+
return setFormFields(function (state) {
|
|
92
|
+
return Object.keys(state).filter(function (fKey) {
|
|
93
|
+
return !keys.includes(fKey);
|
|
94
|
+
}).reduce(function (obj, key) {
|
|
95
|
+
return _objectSpread(_objectSpread({}, obj), {}, (0, _defineProperty2.default)({}, key, state[key]));
|
|
96
|
+
}, {});
|
|
97
|
+
});
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
return _ref4 = {
|
|
76
101
|
joinData: joinData,
|
|
77
102
|
getFieldData: getFieldData,
|
|
78
103
|
getFormFields: _getFormFields,
|
|
79
104
|
getFormField: getFormField,
|
|
80
105
|
setFormFields: setFormFields,
|
|
81
106
|
setFormField: setFormField
|
|
82
|
-
}, (0, _defineProperty2.default)(
|
|
107
|
+
}, (0, _defineProperty2.default)(_ref4, "getFormFields", function getFormFields() {
|
|
83
108
|
return _getFormFields(form);
|
|
84
|
-
}), (0, _defineProperty2.default)(
|
|
109
|
+
}), (0, _defineProperty2.default)(_ref4, "getFormFieldsAsArray", function getFormFieldsAsArray() {
|
|
85
110
|
return _getFormFieldsAsArray(_getFormFields(form));
|
|
86
|
-
}), (0, _defineProperty2.default)(
|
|
111
|
+
}), (0, _defineProperty2.default)(_ref4, "getFormFieldsKeys", function getFormFieldsKeys() {
|
|
87
112
|
return _getFormFieldsKeys(_getFormFields(form));
|
|
88
|
-
}), (0, _defineProperty2.default)(
|
|
113
|
+
}), (0, _defineProperty2.default)(_ref4, "removeAllFormFields", removeAllFormFields), (0, _defineProperty2.default)(_ref4, "removeFormField", removeFormField), (0, _defineProperty2.default)(_ref4, "removeFormFields", removeFormFields), _ref4;
|
|
89
114
|
}
|
|
@@ -70,7 +70,14 @@ function RenderFields() {
|
|
|
70
70
|
key: key
|
|
71
71
|
});
|
|
72
72
|
|
|
73
|
-
|
|
73
|
+
var wrapperRef = field.wrapperRef;
|
|
74
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
75
|
+
key: "render-field-wrapper-".concat(key),
|
|
76
|
+
id: "render-field-wrapper-".concat(key),
|
|
77
|
+
ref: wrapperRef ? typeof wrapperRef === 'function' ? function (node) {
|
|
78
|
+
return wrapperRef(node, key);
|
|
79
|
+
} : wrapperRef : null
|
|
80
|
+
}, /*#__PURE__*/React.createElement(RenderFieldComponent, {
|
|
74
81
|
key: key,
|
|
75
82
|
field: field,
|
|
76
83
|
onChange: function onChange(value) {
|
|
@@ -79,7 +86,7 @@ function RenderFields() {
|
|
|
79
86
|
onBlur: function onBlur() {
|
|
80
87
|
return onFieldBlur.apply(void 0, arguments);
|
|
81
88
|
}
|
|
82
|
-
});
|
|
89
|
+
}));
|
|
83
90
|
} catch (e) {
|
|
84
91
|
return null;
|
|
85
92
|
}
|
|
@@ -2,11 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
|
+
var _typeof3 = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
|
6
8
|
value: true
|
|
7
9
|
});
|
|
8
10
|
exports.default = useFormTools;
|
|
9
11
|
|
|
12
|
+
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
13
|
+
|
|
14
|
+
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
15
|
+
|
|
10
16
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
11
17
|
|
|
12
18
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
@@ -15,7 +21,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
|
|
|
15
21
|
|
|
16
22
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
17
23
|
|
|
18
|
-
var _react = require("react");
|
|
24
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
19
25
|
|
|
20
26
|
var _General2 = _interopRequireDefault(require("./functions/General"));
|
|
21
27
|
|
|
@@ -27,6 +33,10 @@ var _ObjectWithNamedKeyObjects = _interopRequireDefault(require("./form-drivers/
|
|
|
27
33
|
|
|
28
34
|
var _RenderFields = _interopRequireDefault(require("./functions/RenderFields"));
|
|
29
35
|
|
|
36
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
37
|
+
|
|
38
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; }
|
|
39
|
+
|
|
30
40
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
31
41
|
|
|
32
42
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
@@ -43,11 +53,13 @@ function useFormTools() {
|
|
|
43
53
|
FormType = _ref.FormType,
|
|
44
54
|
FormFields = _ref.FormFields,
|
|
45
55
|
_ref$FormDataDriverNa = _ref.FormDataDriverName,
|
|
46
|
-
FormDataDriverName = _ref$FormDataDriverNa === void 0 ? 'ArrayWithObjects' : _ref$FormDataDriverNa,
|
|
56
|
+
FormDataDriverName = _ref$FormDataDriverNa === void 0 ? 'ArrayWithObjects' || 'ObjectWithIterableObjects' || 'ObjectWithNamedKeyObjects' : _ref$FormDataDriverNa,
|
|
47
57
|
_ref$FormDataDriver = _ref.FormDataDriver,
|
|
48
58
|
FormDataDriver = _ref$FormDataDriver === void 0 ? null : _ref$FormDataDriver,
|
|
49
59
|
_ref$FocusControllerP = _ref.FocusControllerProps,
|
|
50
|
-
FocusControllerProps = _ref$FocusControllerP === void 0 ? DefaultFocusControllerProps : _ref$FocusControllerP
|
|
60
|
+
FocusControllerProps = _ref$FocusControllerP === void 0 ? DefaultFocusControllerProps : _ref$FocusControllerP,
|
|
61
|
+
_ref$goToNextFieldOnE = _ref.goToNextFieldOnEnterPressed,
|
|
62
|
+
goToNextFieldOnEnterPressed = _ref$goToNextFieldOnE === void 0 ? true : _ref$goToNextFieldOnE;
|
|
51
63
|
|
|
52
64
|
FocusControllerProps = _objectSpread(_objectSpread({}, DefaultFocusControllerProps), FocusControllerProps);
|
|
53
65
|
var FormDataDrivers = {
|
|
@@ -93,10 +105,12 @@ function useFormTools() {
|
|
|
93
105
|
getFieldData = _getFormDataDriverIns.getFieldData,
|
|
94
106
|
getFormField = _getFormDataDriverIns.getFormField,
|
|
95
107
|
setFormFields = _getFormDataDriverIns.setFormFields,
|
|
96
|
-
|
|
108
|
+
_setFormField = _getFormDataDriverIns.setFormField,
|
|
97
109
|
getFormFieldsAsArray = _getFormDataDriverIns.getFormFieldsAsArray,
|
|
98
110
|
getFormFieldsKeys = _getFormDataDriverIns.getFormFieldsKeys,
|
|
99
|
-
removeAllFormFields = _getFormDataDriverIns.removeAllFormFields
|
|
111
|
+
removeAllFormFields = _getFormDataDriverIns.removeAllFormFields,
|
|
112
|
+
removeFormField = _getFormDataDriverIns.removeFormField,
|
|
113
|
+
removeFormFields = _getFormDataDriverIns.removeFormFields; ///////////////////////////////////////////////////////////////
|
|
100
114
|
//--- OnChange Observer ---//--- START ---//
|
|
101
115
|
|
|
102
116
|
|
|
@@ -143,22 +157,17 @@ function useFormTools() {
|
|
|
143
157
|
};
|
|
144
158
|
|
|
145
159
|
var onFieldChange = function onFieldChange(key, value) {
|
|
146
|
-
|
|
160
|
+
var _getFormField;
|
|
161
|
+
|
|
162
|
+
if (value === ((_getFormField = getFormField(key)) === null || _getFormField === void 0 ? void 0 : _getFormField.value)) return false;
|
|
147
163
|
onChangeObserver(key, value);
|
|
148
|
-
|
|
164
|
+
|
|
165
|
+
_setFormField(function (field) {
|
|
149
166
|
return _objectSpread(_objectSpread({}, field), {}, {
|
|
150
167
|
error: '',
|
|
151
168
|
value: value
|
|
152
169
|
});
|
|
153
|
-
}, key);
|
|
154
|
-
// if (autoFocusedField === key) {
|
|
155
|
-
// setTimeout(() => {
|
|
156
|
-
// // eslint-disable-next-line no-use-before-define
|
|
157
|
-
// setFieldFocus({key, form});
|
|
158
|
-
// // eslint-disable-next-line no-use-before-define
|
|
159
|
-
// setAutoFocusedField(null);
|
|
160
|
-
// }, 1);
|
|
161
|
-
// }
|
|
170
|
+
}, key);
|
|
162
171
|
}; //--- OnChange Observer ---//--- END ---//
|
|
163
172
|
///////////////////////////////////////////////////////////////
|
|
164
173
|
///////////////////////////////////////////////////////////////
|
|
@@ -229,11 +238,106 @@ function useFormTools() {
|
|
|
229
238
|
var _useState9 = (0, _react.useState)(false),
|
|
230
239
|
_useState10 = (0, _slicedToArray2.default)(_useState9, 2),
|
|
231
240
|
isFormRendered = _useState10[0],
|
|
232
|
-
setIsFormRendered = _useState10[1];
|
|
241
|
+
setIsFormRendered = _useState10[1];
|
|
242
|
+
|
|
243
|
+
var submitIsFormRendered = function submitIsFormRendered() {
|
|
244
|
+
return setIsFormRendered(true);
|
|
245
|
+
};
|
|
246
|
+
|
|
247
|
+
var resetIsFormRendered = function resetIsFormRendered() {
|
|
248
|
+
return setIsFormRendered(false);
|
|
249
|
+
};
|
|
250
|
+
|
|
251
|
+
var onEnterDown = /*#__PURE__*/function () {
|
|
252
|
+
var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
|
|
253
|
+
var focusable, currentIndex, nextIndex, nextItem;
|
|
254
|
+
return _regenerator.default.wrap(function _callee$(_context) {
|
|
255
|
+
while (1) {
|
|
256
|
+
switch (_context.prev = _context.next) {
|
|
257
|
+
case 0:
|
|
258
|
+
if (goToNextFieldOnEnterPressed) {
|
|
259
|
+
_context.next = 2;
|
|
260
|
+
break;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
return _context.abrupt("return", false);
|
|
264
|
+
|
|
265
|
+
case 2:
|
|
266
|
+
focusable = document.querySelectorAll('a, button, input, [tabindex]:not([tabindex="-1"])');
|
|
267
|
+
_context.next = 5;
|
|
268
|
+
return new Promise(function (resolve) {
|
|
269
|
+
focusable.forEach(function (node, i) {
|
|
270
|
+
if (node === e.target) resolve(i);
|
|
271
|
+
});
|
|
272
|
+
});
|
|
273
|
+
|
|
274
|
+
case 5:
|
|
275
|
+
currentIndex = _context.sent;
|
|
276
|
+
|
|
277
|
+
if (currentIndex) {
|
|
278
|
+
_context.next = 8;
|
|
279
|
+
break;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
return _context.abrupt("return", false);
|
|
283
|
+
|
|
284
|
+
case 8:
|
|
285
|
+
nextIndex = currentIndex + 1;
|
|
286
|
+
|
|
287
|
+
if (!(nextIndex >= focusable.length)) {
|
|
288
|
+
_context.next = 11;
|
|
289
|
+
break;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
return _context.abrupt("return", false);
|
|
293
|
+
|
|
294
|
+
case 11:
|
|
295
|
+
nextItem = focusable[nextIndex];
|
|
296
|
+
nextItem.focus();
|
|
297
|
+
|
|
298
|
+
case 13:
|
|
299
|
+
case "end":
|
|
300
|
+
return _context.stop();
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
}, _callee);
|
|
304
|
+
}));
|
|
305
|
+
|
|
306
|
+
return function onEnterDown(_x) {
|
|
307
|
+
return _ref2.apply(this, arguments);
|
|
308
|
+
};
|
|
309
|
+
}();
|
|
310
|
+
|
|
311
|
+
var onKeyDown = function onKeyDown() {
|
|
312
|
+
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
313
|
+
args[_key2] = arguments[_key2];
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
var event = args.reduce(function (e, item) {
|
|
317
|
+
if ((item === null || item === void 0 ? void 0 : item.nativeEvent) instanceof KeyboardEvent) return item;
|
|
318
|
+
return e;
|
|
319
|
+
}, null);
|
|
320
|
+
if (!event) return false;
|
|
321
|
+
var keyCode = event.keyCode;
|
|
322
|
+
|
|
323
|
+
switch (keyCode) {
|
|
324
|
+
//OnEnterDown
|
|
325
|
+
case 13:
|
|
326
|
+
onEnterDown(event);
|
|
327
|
+
break;
|
|
328
|
+
|
|
329
|
+
default:
|
|
330
|
+
break;
|
|
331
|
+
}
|
|
332
|
+
}; //On Type Change
|
|
233
333
|
|
|
234
334
|
|
|
235
335
|
(0, _react.useEffect)(function () {
|
|
236
|
-
|
|
336
|
+
resetIsFormRendered();
|
|
337
|
+
}, [FormType]); //On Render Fields Change
|
|
338
|
+
|
|
339
|
+
(0, _react.useEffect)(function () {
|
|
340
|
+
if (isFormFieldsAdded) resetIsFormRendered(false); //Add Form Fields
|
|
237
341
|
|
|
238
342
|
if (renderFormFields.length === 0) return null;
|
|
239
343
|
setFormFields(function (fields) {
|
|
@@ -241,10 +345,9 @@ function useFormTools() {
|
|
|
241
345
|
var _field$className;
|
|
242
346
|
|
|
243
347
|
var fieldData = getFieldData(key);
|
|
244
|
-
var field = !getFormField(key) ? fieldData : getFormField(key);
|
|
348
|
+
var field = !getFormField(key) ? fieldData : getFormField(key);
|
|
245
349
|
|
|
246
350
|
if (!(field !== null && field !== void 0 && field.className) || (field === null || field === void 0 ? void 0 : (_field$className = field.className) === null || _field$className === void 0 ? void 0 : _field$className.indexOf(getFieldClassName(key, FormType))) === -1) {
|
|
247
|
-
// eslint-disable-next-line no-use-before-define
|
|
248
351
|
field.className = "".concat(field === null || field === void 0 ? void 0 : field.className, " ").concat(getFieldClassName(key, FormType));
|
|
249
352
|
}
|
|
250
353
|
|
|
@@ -253,16 +356,27 @@ function useFormTools() {
|
|
|
253
356
|
}
|
|
254
357
|
|
|
255
358
|
field.ref = /*#__PURE__*/(0, _react.createRef)();
|
|
256
|
-
field.
|
|
359
|
+
field.wrapperRef = /*#__PURE__*/(0, _react.createRef)();
|
|
360
|
+
field.isValueChangedByUser = false;
|
|
361
|
+
|
|
362
|
+
if (goToNextFieldOnEnterPressed) {
|
|
363
|
+
var onKeyDownProp = field.onKeyDown || function () {};
|
|
364
|
+
|
|
365
|
+
field.onKeyDown = function () {
|
|
366
|
+
onKeyDown.apply(void 0, arguments);
|
|
367
|
+
onKeyDownProp.apply(void 0, arguments);
|
|
368
|
+
};
|
|
369
|
+
} //Is Field Value Changed By USER
|
|
257
370
|
// eslint-disable-next-line no-use-before-define
|
|
258
371
|
|
|
372
|
+
|
|
259
373
|
addOnFieldRenderedObserver(key, function () {
|
|
260
|
-
var
|
|
374
|
+
var _getFormField2, _getFormField2$ref, _getFormField2$ref$cu;
|
|
261
375
|
|
|
262
|
-
var element = (
|
|
376
|
+
var element = (_getFormField2 = getFormField(key)) === null || _getFormField2 === void 0 ? void 0 : (_getFormField2$ref = _getFormField2.ref) === null || _getFormField2$ref === void 0 ? void 0 : (_getFormField2$ref$cu = _getFormField2$ref.current) === null || _getFormField2$ref$cu === void 0 ? void 0 : _getFormField2$ref$cu.querySelector((field === null || field === void 0 ? void 0 : field.focusSelector) || 'input');
|
|
263
377
|
|
|
264
378
|
var handler = function handler() {
|
|
265
|
-
return
|
|
379
|
+
return _setFormField({
|
|
266
380
|
isValueChangedByUser: true
|
|
267
381
|
}, key);
|
|
268
382
|
};
|
|
@@ -285,9 +399,9 @@ function useFormTools() {
|
|
|
285
399
|
setOnFormRenderObservers = _useState12[1];
|
|
286
400
|
|
|
287
401
|
var addOnFormRenderObserver = function addOnFormRenderObserver(cb) {
|
|
288
|
-
var
|
|
289
|
-
|
|
290
|
-
once =
|
|
402
|
+
var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
403
|
+
_ref3$once = _ref3.once,
|
|
404
|
+
once = _ref3$once === void 0 ? false : _ref3$once;
|
|
291
405
|
|
|
292
406
|
setOnFormRenderObservers(function (state) {
|
|
293
407
|
return [].concat((0, _toConsumableArray2.default)(state), [{
|
|
@@ -296,7 +410,8 @@ function useFormTools() {
|
|
|
296
410
|
isWorkedOut: false
|
|
297
411
|
}]);
|
|
298
412
|
});
|
|
299
|
-
};
|
|
413
|
+
}; // eslint-disable-next-line no-unused-vars
|
|
414
|
+
|
|
300
415
|
|
|
301
416
|
var updateOnFormRenderObserver = function updateOnFormRenderObserver(key, data) {
|
|
302
417
|
setOnFormRenderObservers(function (state) {
|
|
@@ -306,14 +421,27 @@ function useFormTools() {
|
|
|
306
421
|
});
|
|
307
422
|
};
|
|
308
423
|
|
|
424
|
+
var removeOnFormRenderObserver = function removeOnFormRenderObserver(key) {
|
|
425
|
+
setOnFormRenderObservers(function (state) {
|
|
426
|
+
return state.slice().filter(function (v, i) {
|
|
427
|
+
return i !== key;
|
|
428
|
+
});
|
|
429
|
+
});
|
|
430
|
+
};
|
|
431
|
+
|
|
309
432
|
var onFormRenderWorker = function onFormRenderWorker() {
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
433
|
+
// eslint-disable-next-line default-param-last
|
|
434
|
+
onFormRenderObservers.map(function () {
|
|
435
|
+
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
436
|
+
once = _ref4.once,
|
|
437
|
+
isWorkedOut = _ref4.isWorkedOut,
|
|
438
|
+
_ref4$cb = _ref4.cb,
|
|
439
|
+
cb = _ref4$cb === void 0 ? function () {} : _ref4$cb;
|
|
440
|
+
|
|
441
|
+
var key = arguments.length > 1 ? arguments[1] : undefined;
|
|
314
442
|
if (once && isWorkedOut) return null;
|
|
315
443
|
cb(form);
|
|
316
|
-
updateOnFormRenderObserver(key, {
|
|
444
|
+
if (once) removeOnFormRenderObserver(key);else updateOnFormRenderObserver(key, {
|
|
317
445
|
isWorkedOut: true
|
|
318
446
|
});
|
|
319
447
|
return null;
|
|
@@ -323,12 +451,17 @@ function useFormTools() {
|
|
|
323
451
|
|
|
324
452
|
(0, _react.useEffect)(function () {
|
|
325
453
|
if (isFormRendered || !onFormRenderObservers.length) return null;
|
|
454
|
+
var formFieldsKeys = getFormFieldsKeys(form);
|
|
455
|
+
var isAllFieldsRendered = renderFormFields.reduce(function (result, key) {
|
|
456
|
+
if (!formFieldsKeys.includes(key)) result = false;
|
|
457
|
+
return result;
|
|
458
|
+
}, true);
|
|
326
459
|
|
|
327
|
-
if (
|
|
328
|
-
|
|
460
|
+
if (isAllFieldsRendered) {
|
|
461
|
+
submitIsFormRendered(true);
|
|
329
462
|
onFormRenderWorker();
|
|
330
463
|
}
|
|
331
|
-
}, [form, renderFormFields]); //--- Render Fields Controller ---//--- END ---//
|
|
464
|
+
}, [form, renderFormFields, onFormRenderObservers]); //--- Render Fields Controller ---//--- END ---//
|
|
332
465
|
///////////////////////////////////////////////////////////////
|
|
333
466
|
///////////////////////////////////////////////////////////////
|
|
334
467
|
//--- HIGHTLIGHT LABELS IF FIELD WITH ERROR ---//--- START ---//
|
|
@@ -383,14 +516,14 @@ function useFormTools() {
|
|
|
383
516
|
return setIsInitFocused(false);
|
|
384
517
|
};
|
|
385
518
|
|
|
386
|
-
var toggleFieldFocus = function toggleFieldFocus(
|
|
387
|
-
var key =
|
|
388
|
-
|
|
389
|
-
cb =
|
|
390
|
-
argForm =
|
|
391
|
-
field =
|
|
519
|
+
var toggleFieldFocus = function toggleFieldFocus(_ref5) {
|
|
520
|
+
var key = _ref5.key,
|
|
521
|
+
_ref5$cb = _ref5.cb,
|
|
522
|
+
cb = _ref5$cb === void 0 ? function () {} : _ref5$cb,
|
|
523
|
+
argForm = _ref5.form,
|
|
524
|
+
field = _ref5.field;
|
|
392
525
|
var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'focus';
|
|
393
|
-
if (!key) return null;
|
|
526
|
+
if (!key && !field) return null;
|
|
394
527
|
if (!argForm) argForm = form;
|
|
395
528
|
var formField = field || getFormField(key, argForm);
|
|
396
529
|
|
|
@@ -407,12 +540,12 @@ function useFormTools() {
|
|
|
407
540
|
}, 50);
|
|
408
541
|
};
|
|
409
542
|
|
|
410
|
-
var setFieldFocus = function setFieldFocus(
|
|
411
|
-
var key =
|
|
412
|
-
|
|
413
|
-
cb =
|
|
414
|
-
argForm =
|
|
415
|
-
field =
|
|
543
|
+
var setFieldFocus = function setFieldFocus(_ref6) {
|
|
544
|
+
var key = _ref6.key,
|
|
545
|
+
_ref6$cb = _ref6.cb,
|
|
546
|
+
cb = _ref6$cb === void 0 ? function () {} : _ref6$cb,
|
|
547
|
+
argForm = _ref6.form,
|
|
548
|
+
field = _ref6.field;
|
|
416
549
|
return toggleFieldFocus({
|
|
417
550
|
key: key,
|
|
418
551
|
cb: cb,
|
|
@@ -421,12 +554,12 @@ function useFormTools() {
|
|
|
421
554
|
}, 'focus');
|
|
422
555
|
};
|
|
423
556
|
|
|
424
|
-
var setFieldBlur = function setFieldBlur(
|
|
425
|
-
var key =
|
|
426
|
-
|
|
427
|
-
cb =
|
|
428
|
-
argForm =
|
|
429
|
-
field =
|
|
557
|
+
var setFieldBlur = function setFieldBlur(_ref7) {
|
|
558
|
+
var key = _ref7.key,
|
|
559
|
+
_ref7$cb = _ref7.cb,
|
|
560
|
+
cb = _ref7$cb === void 0 ? function () {} : _ref7$cb,
|
|
561
|
+
argForm = _ref7.form,
|
|
562
|
+
field = _ref7.field;
|
|
430
563
|
return toggleFieldFocus({
|
|
431
564
|
key: key,
|
|
432
565
|
cb: cb,
|
|
@@ -456,9 +589,10 @@ function useFormTools() {
|
|
|
456
589
|
setAutoFocusedField(field.key);
|
|
457
590
|
|
|
458
591
|
var callback = function callback() {
|
|
459
|
-
|
|
592
|
+
_setFormField({
|
|
460
593
|
value: field.value
|
|
461
594
|
}, field.key);
|
|
595
|
+
|
|
462
596
|
setFirstFieldInitFocused();
|
|
463
597
|
};
|
|
464
598
|
|
|
@@ -516,15 +650,15 @@ function useFormTools() {
|
|
|
516
650
|
};
|
|
517
651
|
|
|
518
652
|
(0, _react.useEffect)(function () {
|
|
519
|
-
if (FocusControllerProps.setAutoFocus && !isInitFocused && !autoFocusedField) setFirstFieldFocus();
|
|
653
|
+
if (FocusControllerProps.setAutoFocus && !isInitFocused && !autoFocusedField && isFormRendered) setFirstFieldFocus();
|
|
520
654
|
|
|
521
655
|
if (focusOnRenderFields.length) {
|
|
522
656
|
var _getFormFieldsKeys;
|
|
523
657
|
|
|
524
658
|
(_getFormFieldsKeys = getFormFieldsKeys(form)) === null || _getFormFieldsKeys === void 0 ? void 0 : _getFormFieldsKeys.map(function (key) {
|
|
525
|
-
var
|
|
659
|
+
var _getFormField3, _getFormField3$value;
|
|
526
660
|
|
|
527
|
-
if (focusOnRenderFields.includes(key) && ((
|
|
661
|
+
if (focusOnRenderFields.includes(key) && ((_getFormField3 = getFormField(key)) === null || _getFormField3 === void 0 ? void 0 : (_getFormField3$value = _getFormField3.value) === null || _getFormField3$value === void 0 ? void 0 : _getFormField3$value.length) === 0) {
|
|
528
662
|
var cb = function cb() {
|
|
529
663
|
removeFocusFieldOnRender(key);
|
|
530
664
|
callOnFieldFocusCallbacks(key);
|
|
@@ -540,7 +674,7 @@ function useFormTools() {
|
|
|
540
674
|
return null;
|
|
541
675
|
});
|
|
542
676
|
}
|
|
543
|
-
}, [form, focusOnRenderFields, isInitFocused]);
|
|
677
|
+
}, [form, focusOnRenderFields, isInitFocused, isFormRendered]);
|
|
544
678
|
(0, _react.useEffect)(function () {
|
|
545
679
|
setAutoFocusedField(null);
|
|
546
680
|
}, [isInitFocused]);
|
|
@@ -572,9 +706,10 @@ function useFormTools() {
|
|
|
572
706
|
var resetOnFieldRenderObserversWorkedOut = function resetOnFieldRenderObserversWorkedOut() {
|
|
573
707
|
if (!isFieldObserversReset && renderFormFields.length) {
|
|
574
708
|
renderFormFields.map(function (key) {
|
|
575
|
-
|
|
709
|
+
_setFormField({
|
|
576
710
|
isOnRenderObserversWorkedOut: false
|
|
577
711
|
}, key);
|
|
712
|
+
|
|
578
713
|
return key;
|
|
579
714
|
});
|
|
580
715
|
setIsFieldObserversReset(true);
|
|
@@ -626,12 +761,14 @@ function useFormTools() {
|
|
|
626
761
|
return !(observer !== null && observer !== void 0 && observer.isObserverWorkedOut);
|
|
627
762
|
});
|
|
628
763
|
if (FilteredObservers.length === 0) return null;
|
|
629
|
-
|
|
764
|
+
|
|
765
|
+
_setFormField({
|
|
630
766
|
isOnRenderObserversWorkedOut: true
|
|
631
767
|
}, key);
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
768
|
+
|
|
769
|
+
FilteredObservers.map(function (_ref8, id) {
|
|
770
|
+
var f = _ref8.f,
|
|
771
|
+
isOnceCallable = _ref8.isOnceCallable;
|
|
635
772
|
f(data);
|
|
636
773
|
if (isOnceCallable) updateOnFieldRenderedObserver(key, id, {
|
|
637
774
|
isObserverWorkedOut: true
|
|
@@ -698,6 +835,48 @@ function useFormTools() {
|
|
|
698
835
|
// }, {});
|
|
699
836
|
// });
|
|
700
837
|
// };
|
|
838
|
+
///////////////////////////////////////////////////////////////
|
|
839
|
+
///////////////////////////////////////////////////////////////
|
|
840
|
+
//--- WindowScrollController ---//--- START ---//
|
|
841
|
+
|
|
842
|
+
var scrollToField = function scrollToField(_ref9) {
|
|
843
|
+
var _field2, _field3, _wrapperRef$current;
|
|
844
|
+
|
|
845
|
+
var _ref9$key = _ref9.key,
|
|
846
|
+
key = _ref9$key === void 0 ? null : _ref9$key,
|
|
847
|
+
_ref9$field = _ref9.field,
|
|
848
|
+
field = _ref9$field === void 0 ? null : _ref9$field,
|
|
849
|
+
argForm = _ref9.form;
|
|
850
|
+
if (!key && !field) return false;
|
|
851
|
+
if (!argForm) argForm = form;
|
|
852
|
+
if (!field) field = getFormField(key, argForm);
|
|
853
|
+
var wrapperRef = ((_field2 = field) === null || _field2 === void 0 ? void 0 : _field2.wrapperRef) || ((_field3 = field) === null || _field3 === void 0 ? void 0 : _field3.ref); // eslint-disable-next-line no-unsafe-optional-chaining
|
|
854
|
+
|
|
855
|
+
var _wrapperRef$current$g = wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.getBoundingClientRect(),
|
|
856
|
+
topOffset = _wrapperRef$current$g.top;
|
|
857
|
+
|
|
858
|
+
var scrollTop = Math.abs(Math.abs(topOffset) - Math.abs(window.scrollY)) - 16;
|
|
859
|
+
window.scrollTo({
|
|
860
|
+
top: scrollTop
|
|
861
|
+
});
|
|
862
|
+
}; //--- WindowScrollController ---//--- END ---//
|
|
863
|
+
///////////////////////////////////////////////////////////////
|
|
864
|
+
///////////////////////////////////////////////////////////////
|
|
865
|
+
|
|
866
|
+
|
|
867
|
+
var addErrorsToForm = function addErrorsToForm(errors) {
|
|
868
|
+
var argForm = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : form;
|
|
869
|
+
if (!argForm) argForm = form;
|
|
870
|
+
setFormFields(function (fields) {
|
|
871
|
+
return errors.reduce(function (fields, _ref10) {
|
|
872
|
+
var error = _ref10.message,
|
|
873
|
+
errKey = _ref10.propertyPath;
|
|
874
|
+
return updateFormField(fields, {
|
|
875
|
+
error: error
|
|
876
|
+
}, errKey);
|
|
877
|
+
}, fields);
|
|
878
|
+
});
|
|
879
|
+
};
|
|
701
880
|
|
|
702
881
|
return {
|
|
703
882
|
FormDataDrivers: FormDataDrivers,
|
|
@@ -733,19 +912,18 @@ function useFormTools() {
|
|
|
733
912
|
addOnFieldRenderedObserver: addOnFieldRenderedObserver,
|
|
734
913
|
removeOnFieldRenderedObserver: removeOnFieldRenderedObserver,
|
|
735
914
|
onFieldRenderedObservers: onFieldRenderedObservers,
|
|
736
|
-
setFormField: setFormField,
|
|
737
|
-
setFormFields: setFormFields,
|
|
738
|
-
removeAllFormFields: removeAllFormFields,
|
|
739
915
|
updateFormField: updateFormField,
|
|
740
916
|
addOnFormRenderObserver: addOnFormRenderObserver,
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
917
|
+
submitIsFormRendered: submitIsFormRendered,
|
|
918
|
+
resetIsFormRendered: resetIsFormRendered,
|
|
919
|
+
renderFields: function renderFields(_ref11) {
|
|
920
|
+
var _ref11$form = _ref11.form,
|
|
921
|
+
argForm = _ref11$form === void 0 ? form : _ref11$form,
|
|
922
|
+
_ref11$fields = _ref11.fields,
|
|
923
|
+
argFields = _ref11$fields === void 0 ? renderFormFields : _ref11$fields,
|
|
924
|
+
_ref11$cols = _ref11.cols,
|
|
925
|
+
argCols = _ref11$cols === void 0 ? 1 : _ref11$cols,
|
|
926
|
+
RenderFieldComponent = _ref11.RenderFieldComponent;
|
|
749
927
|
return (0, _RenderFields.default)({
|
|
750
928
|
form: argForm,
|
|
751
929
|
fields: argFields,
|
|
@@ -754,6 +932,19 @@ function useFormTools() {
|
|
|
754
932
|
onFieldChange: onFieldChange,
|
|
755
933
|
FormDataDriver: getFormDataDriver(FormDataDriverName)
|
|
756
934
|
});
|
|
757
|
-
}
|
|
935
|
+
},
|
|
936
|
+
scrollToField: scrollToField,
|
|
937
|
+
getFieldData: getFieldData,
|
|
938
|
+
getFormField: getFormField,
|
|
939
|
+
setFormFields: setFormFields,
|
|
940
|
+
setFormField: function setFormField(data, key) {
|
|
941
|
+
return _setFormField(data, key);
|
|
942
|
+
},
|
|
943
|
+
getFormFieldsAsArray: getFormFieldsAsArray,
|
|
944
|
+
getFormFieldsKeys: getFormFieldsKeys,
|
|
945
|
+
removeAllFormFields: removeAllFormFields,
|
|
946
|
+
removeFormField: removeFormField,
|
|
947
|
+
removeFormFields: removeFormFields,
|
|
948
|
+
addErrorsToForm: addErrorsToForm
|
|
758
949
|
};
|
|
759
950
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "intelicoreact",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.1.78",
|
|
4
|
+
"description": "Hide Placeholder if Field Value is Empty | Added possibility to switch to next field by Enter Key Press",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"files": [
|
|
7
7
|
"dist/*",
|