@lanaco/lnc-react-ui 2.1.44 → 2.1.45
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/index.esm.js +45 -13
- package/lib/index.js +45 -13
- package/package.json +1 -1
package/lib/index.esm.js
CHANGED
|
@@ -14692,7 +14692,11 @@ function Modal(props) {
|
|
|
14692
14692
|
|
|
14693
14693
|
var onClickOutsideModal = function onClickOutsideModal(event) {
|
|
14694
14694
|
if (event.target !== event.currentTarget) return;
|
|
14695
|
-
|
|
14695
|
+
|
|
14696
|
+
if (clickOutsideToClose || !showHeader) {
|
|
14697
|
+
document.body.style.overflow = "auto";
|
|
14698
|
+
onClose(event);
|
|
14699
|
+
}
|
|
14696
14700
|
};
|
|
14697
14701
|
var containerVariant = {
|
|
14698
14702
|
initial: {
|
|
@@ -14708,6 +14712,11 @@ function Modal(props) {
|
|
|
14708
14712
|
top: "-50%"
|
|
14709
14713
|
}
|
|
14710
14714
|
};
|
|
14715
|
+
|
|
14716
|
+
if (open) {
|
|
14717
|
+
document.body.style.overflow = "hidden";
|
|
14718
|
+
}
|
|
14719
|
+
|
|
14711
14720
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, open && /*#__PURE__*/React__default.createElement(Overlay, _extends$d({}, themeProps, {
|
|
14712
14721
|
onClick: onClickOutsideModal,
|
|
14713
14722
|
className: className
|
|
@@ -14720,7 +14729,8 @@ function Modal(props) {
|
|
|
14720
14729
|
icon: "times",
|
|
14721
14730
|
iconStyle: "solid",
|
|
14722
14731
|
onClick: function onClick(e) {
|
|
14723
|
-
|
|
14732
|
+
document.body.style.overflow = "auto";
|
|
14733
|
+
onClose(e);
|
|
14724
14734
|
},
|
|
14725
14735
|
color: basic ? "transparent" : themeProps.color
|
|
14726
14736
|
})))), /*#__PURE__*/React__default.createElement(Content$4, themeProps, children)))));
|
|
@@ -42129,7 +42139,18 @@ var DateInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
|
|
|
42129
42139
|
var jsDate = fromDateStringToJsDate(value);
|
|
42130
42140
|
setDate(jsDate);
|
|
42131
42141
|
setText(fromJsDateToDateString(jsDate));
|
|
42132
|
-
}, [value]);
|
|
42142
|
+
}, [value]);
|
|
42143
|
+
useEffect(function () {
|
|
42144
|
+
var wheelListener = function wheelListener(e) {
|
|
42145
|
+
setOpenCalendar(false);
|
|
42146
|
+
};
|
|
42147
|
+
|
|
42148
|
+
if (openCalendar) {
|
|
42149
|
+
window.addEventListener("wheel", wheelListener);
|
|
42150
|
+
} else {
|
|
42151
|
+
window.removeEventListener("wheel", wheelListener);
|
|
42152
|
+
}
|
|
42153
|
+
}, [openCalendar]); //=============== METHODS ============================================================
|
|
42133
42154
|
|
|
42134
42155
|
var validateDateFormat = function validateDateFormat() {
|
|
42135
42156
|
var _format = format.toLowerCase();
|
|
@@ -42337,7 +42358,7 @@ var DateInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
|
|
|
42337
42358
|
var calculatedTop = "" + dpContainerDOMRect.top + "px";
|
|
42338
42359
|
var calculatedWidth = "" + dpContainerDOMRect.width + "px";
|
|
42339
42360
|
var el = document.createElement("div");
|
|
42340
|
-
el.style = "position:
|
|
42361
|
+
el.style = "position: fixed;\n background-color: white;\n z-index: 2147483647 !important;\n left: ".concat(calculatedLeft, " !important;\n top: ").concat(calculatedTop, " !important;\n width: ").concat(calculatedWidth, " !important;\n min-height: ").concat(heightBySize$a(size));
|
|
42341
42362
|
|
|
42342
42363
|
if (target !== null) {
|
|
42343
42364
|
target.appendChild(el);
|
|
@@ -42576,6 +42597,17 @@ var DropdownLookup = function DropdownLookup(props) {
|
|
|
42576
42597
|
setValue(selectedOption.value);
|
|
42577
42598
|
}
|
|
42578
42599
|
}, [selectedOption]);
|
|
42600
|
+
useEffect(function () {
|
|
42601
|
+
var wheelListener = function wheelListener(e) {
|
|
42602
|
+
setInFocus(false);
|
|
42603
|
+
};
|
|
42604
|
+
|
|
42605
|
+
if (inFocus) {
|
|
42606
|
+
window.addEventListener("wheel", wheelListener);
|
|
42607
|
+
} else {
|
|
42608
|
+
window.removeEventListener("wheel", wheelListener);
|
|
42609
|
+
}
|
|
42610
|
+
}, [inFocus]);
|
|
42579
42611
|
|
|
42580
42612
|
var updateSelectedValue = function updateSelectedValue(data) {
|
|
42581
42613
|
var updateText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
@@ -42679,10 +42711,10 @@ var DropdownLookup = function DropdownLookup(props) {
|
|
|
42679
42711
|
var calculatedWidth = "" + ddlContainerDOMRect.width + "px";
|
|
42680
42712
|
var calculatedLeft = "" + ddlContainerDOMRect.left + "px";
|
|
42681
42713
|
var calculatedTop = "" + ddlContainerDOMRect.top + "px";
|
|
42682
|
-
el.style = "position:
|
|
42714
|
+
el.style = "position: fixed;\n background-color: white;\n z-index: 2147483647 !important;\n transform: translateY( ".concat(heightBySize$9(size), ");\n left: ").concat(calculatedLeft, " !important;\n top: ").concat(calculatedTop, " !important;\n width: ").concat(calculatedWidth, ";\n min-height: ").concat(heightBySize$9(size));
|
|
42683
42715
|
|
|
42684
42716
|
if (options !== null && options.length > 0 && inFocus) {
|
|
42685
|
-
el.style = "position:
|
|
42717
|
+
el.style = "position: fixed;\n background-color: white;\n z-index: 2147483647 !important;\n transform: translateY( ".concat(heightBySize$9(size), ");\n overflow: auto;\n left: ").concat(calculatedLeft, " !important;\n top: ").concat(calculatedTop, " !important;\n width: ").concat(calculatedWidth, ";\n min-height: ").concat(options.length > 5 ? heightBySize$9(size, 5) : heightBySize$9(size, options.length + 1));
|
|
42686
42718
|
|
|
42687
42719
|
if (target !== null) {
|
|
42688
42720
|
target.appendChild(el);
|
|
@@ -47075,7 +47107,7 @@ var Tooltip = function Tooltip(props) {
|
|
|
47075
47107
|
show = _useState2[0],
|
|
47076
47108
|
setShow = _useState2[1];
|
|
47077
47109
|
|
|
47078
|
-
var _useState3 = useState("position:
|
|
47110
|
+
var _useState3 = useState("position: fixed;"),
|
|
47079
47111
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
47080
47112
|
style = _useState4[0],
|
|
47081
47113
|
setStyle = _useState4[1];
|
|
@@ -47092,13 +47124,13 @@ var Tooltip = function Tooltip(props) {
|
|
|
47092
47124
|
|
|
47093
47125
|
var CalculateStyle = function CalculateStyle(mouseX, mouseY) {
|
|
47094
47126
|
if (mouseX <= window.innerWidth / 2 && mouseY <= window.innerHeight / 2) {
|
|
47095
|
-
return "position:
|
|
47127
|
+
return "position: fixed; \n left: ".concat(mouseX - 10, "px; \n top: ").concat(mouseY - 10, "px; \n width: auto; \n height: auto; \n box-shadow: 0 0 6px #bebebe; \n border-radius: 0.175rem; \n background-color: white; \n overflow: auto; \n max-height: ").concat(window.innerHeight - 20, "px; \n z-index: 999;");
|
|
47096
47128
|
} else if (mouseX > window.innerWidth / 2 && mouseY <= window.innerHeight / 2) {
|
|
47097
|
-
return "position:
|
|
47129
|
+
return "position: fixed; \n right: ".concat(window.innerWidth - mouseX - 10, "px; \n top: ").concat(mouseY - 10, "px; \n width: auto; \n height: auto; \n box-shadow: 0 0 6px #bebebe; \n border-radius: 0.175rem; \n background-color: white; \n overflow: auto; \n max-height: ").concat(window.innerHeight - 20, "px; \n z-index: 999;");
|
|
47098
47130
|
} else if (mouseX <= window.innerWidth / 2 && mouseY > window.innerHeight / 2) {
|
|
47099
|
-
return "position:
|
|
47131
|
+
return "position: fixed; \n left: ".concat(mouseX - 10, "px; \n bottom: ").concat(window.innerHeight - mouseY - 10, "px; \n width: auto; \n height: auto; \n box-shadow: 0 0 6px #bebebe; \n border-radius: 0.175rem; \n background-color: white; \n overflow: auto; \n max-height: ").concat(window.innerHeight - 20, "px; \n z-index: 999;");
|
|
47100
47132
|
} else if (mouseX > window.innerWidth / 2 && mouseY > window.innerHeight / 2) {
|
|
47101
|
-
return "position:
|
|
47133
|
+
return "position: fixed; \n right: ".concat(window.innerWidth - mouseX - 10, "px; \n bottom: ").concat(window.innerHeight - mouseY - 10, "px; \n width: auto; \n height: auto; \n box-shadow: 0 0 6px #bebebe; \n border-radius: 0.175rem; \n background-color: white; \n overflow: auto; \n max-height: ").concat(window.innerHeight - 20, "px; \n z-index: 999;");
|
|
47102
47134
|
}
|
|
47103
47135
|
};
|
|
47104
47136
|
|
|
@@ -47107,7 +47139,7 @@ var Tooltip = function Tooltip(props) {
|
|
|
47107
47139
|
onMouseLeave: function onMouseLeave(event) {
|
|
47108
47140
|
event.stopPropagation();
|
|
47109
47141
|
target.innerHTML = "";
|
|
47110
|
-
setStyle("position:
|
|
47142
|
+
setStyle("position: fixed;");
|
|
47111
47143
|
setShow(false);
|
|
47112
47144
|
}
|
|
47113
47145
|
}, renderContent());
|
|
@@ -47125,7 +47157,7 @@ var Tooltip = function Tooltip(props) {
|
|
|
47125
47157
|
onMouseLeave: function onMouseLeave(event) {
|
|
47126
47158
|
event.stopPropagation();
|
|
47127
47159
|
target.innerHTML = "";
|
|
47128
|
-
setStyle("position:
|
|
47160
|
+
setStyle("position: fixed;");
|
|
47129
47161
|
setShow(false);
|
|
47130
47162
|
}
|
|
47131
47163
|
}, props.children));
|
package/lib/index.js
CHANGED
|
@@ -14733,7 +14733,11 @@ function Modal(props) {
|
|
|
14733
14733
|
|
|
14734
14734
|
var onClickOutsideModal = function onClickOutsideModal(event) {
|
|
14735
14735
|
if (event.target !== event.currentTarget) return;
|
|
14736
|
-
|
|
14736
|
+
|
|
14737
|
+
if (clickOutsideToClose || !showHeader) {
|
|
14738
|
+
document.body.style.overflow = "auto";
|
|
14739
|
+
onClose(event);
|
|
14740
|
+
}
|
|
14737
14741
|
};
|
|
14738
14742
|
var containerVariant = {
|
|
14739
14743
|
initial: {
|
|
@@ -14749,6 +14753,11 @@ function Modal(props) {
|
|
|
14749
14753
|
top: "-50%"
|
|
14750
14754
|
}
|
|
14751
14755
|
};
|
|
14756
|
+
|
|
14757
|
+
if (open) {
|
|
14758
|
+
document.body.style.overflow = "hidden";
|
|
14759
|
+
}
|
|
14760
|
+
|
|
14752
14761
|
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, open && /*#__PURE__*/React__default['default'].createElement(Overlay, _extends__default['default']({}, themeProps, {
|
|
14753
14762
|
onClick: onClickOutsideModal,
|
|
14754
14763
|
className: className
|
|
@@ -14761,7 +14770,8 @@ function Modal(props) {
|
|
|
14761
14770
|
icon: "times",
|
|
14762
14771
|
iconStyle: "solid",
|
|
14763
14772
|
onClick: function onClick(e) {
|
|
14764
|
-
|
|
14773
|
+
document.body.style.overflow = "auto";
|
|
14774
|
+
onClose(e);
|
|
14765
14775
|
},
|
|
14766
14776
|
color: basic ? "transparent" : themeProps.color
|
|
14767
14777
|
})))), /*#__PURE__*/React__default['default'].createElement(Content$4, themeProps, children)))));
|
|
@@ -42170,7 +42180,18 @@ var DateInput = /*#__PURE__*/React__default['default'].forwardRef(function (prop
|
|
|
42170
42180
|
var jsDate = fromDateStringToJsDate(value);
|
|
42171
42181
|
setDate(jsDate);
|
|
42172
42182
|
setText(fromJsDateToDateString(jsDate));
|
|
42173
|
-
}, [value]);
|
|
42183
|
+
}, [value]);
|
|
42184
|
+
React.useEffect(function () {
|
|
42185
|
+
var wheelListener = function wheelListener(e) {
|
|
42186
|
+
setOpenCalendar(false);
|
|
42187
|
+
};
|
|
42188
|
+
|
|
42189
|
+
if (openCalendar) {
|
|
42190
|
+
window.addEventListener("wheel", wheelListener);
|
|
42191
|
+
} else {
|
|
42192
|
+
window.removeEventListener("wheel", wheelListener);
|
|
42193
|
+
}
|
|
42194
|
+
}, [openCalendar]); //=============== METHODS ============================================================
|
|
42174
42195
|
|
|
42175
42196
|
var validateDateFormat = function validateDateFormat() {
|
|
42176
42197
|
var _format = format.toLowerCase();
|
|
@@ -42378,7 +42399,7 @@ var DateInput = /*#__PURE__*/React__default['default'].forwardRef(function (prop
|
|
|
42378
42399
|
var calculatedTop = "" + dpContainerDOMRect.top + "px";
|
|
42379
42400
|
var calculatedWidth = "" + dpContainerDOMRect.width + "px";
|
|
42380
42401
|
var el = document.createElement("div");
|
|
42381
|
-
el.style = "position:
|
|
42402
|
+
el.style = "position: fixed;\n background-color: white;\n z-index: 2147483647 !important;\n left: ".concat(calculatedLeft, " !important;\n top: ").concat(calculatedTop, " !important;\n width: ").concat(calculatedWidth, " !important;\n min-height: ").concat(heightBySize$a(size));
|
|
42382
42403
|
|
|
42383
42404
|
if (target !== null) {
|
|
42384
42405
|
target.appendChild(el);
|
|
@@ -42617,6 +42638,17 @@ var DropdownLookup = function DropdownLookup(props) {
|
|
|
42617
42638
|
setValue(selectedOption.value);
|
|
42618
42639
|
}
|
|
42619
42640
|
}, [selectedOption]);
|
|
42641
|
+
React.useEffect(function () {
|
|
42642
|
+
var wheelListener = function wheelListener(e) {
|
|
42643
|
+
setInFocus(false);
|
|
42644
|
+
};
|
|
42645
|
+
|
|
42646
|
+
if (inFocus) {
|
|
42647
|
+
window.addEventListener("wheel", wheelListener);
|
|
42648
|
+
} else {
|
|
42649
|
+
window.removeEventListener("wheel", wheelListener);
|
|
42650
|
+
}
|
|
42651
|
+
}, [inFocus]);
|
|
42620
42652
|
|
|
42621
42653
|
var updateSelectedValue = function updateSelectedValue(data) {
|
|
42622
42654
|
var updateText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
@@ -42720,10 +42752,10 @@ var DropdownLookup = function DropdownLookup(props) {
|
|
|
42720
42752
|
var calculatedWidth = "" + ddlContainerDOMRect.width + "px";
|
|
42721
42753
|
var calculatedLeft = "" + ddlContainerDOMRect.left + "px";
|
|
42722
42754
|
var calculatedTop = "" + ddlContainerDOMRect.top + "px";
|
|
42723
|
-
el.style = "position:
|
|
42755
|
+
el.style = "position: fixed;\n background-color: white;\n z-index: 2147483647 !important;\n transform: translateY( ".concat(heightBySize$9(size), ");\n left: ").concat(calculatedLeft, " !important;\n top: ").concat(calculatedTop, " !important;\n width: ").concat(calculatedWidth, ";\n min-height: ").concat(heightBySize$9(size));
|
|
42724
42756
|
|
|
42725
42757
|
if (options !== null && options.length > 0 && inFocus) {
|
|
42726
|
-
el.style = "position:
|
|
42758
|
+
el.style = "position: fixed;\n background-color: white;\n z-index: 2147483647 !important;\n transform: translateY( ".concat(heightBySize$9(size), ");\n overflow: auto;\n left: ").concat(calculatedLeft, " !important;\n top: ").concat(calculatedTop, " !important;\n width: ").concat(calculatedWidth, ";\n min-height: ").concat(options.length > 5 ? heightBySize$9(size, 5) : heightBySize$9(size, options.length + 1));
|
|
42727
42759
|
|
|
42728
42760
|
if (target !== null) {
|
|
42729
42761
|
target.appendChild(el);
|
|
@@ -47116,7 +47148,7 @@ var Tooltip = function Tooltip(props) {
|
|
|
47116
47148
|
show = _useState2[0],
|
|
47117
47149
|
setShow = _useState2[1];
|
|
47118
47150
|
|
|
47119
|
-
var _useState3 = React.useState("position:
|
|
47151
|
+
var _useState3 = React.useState("position: fixed;"),
|
|
47120
47152
|
_useState4 = _slicedToArray__default['default'](_useState3, 2),
|
|
47121
47153
|
style = _useState4[0],
|
|
47122
47154
|
setStyle = _useState4[1];
|
|
@@ -47133,13 +47165,13 @@ var Tooltip = function Tooltip(props) {
|
|
|
47133
47165
|
|
|
47134
47166
|
var CalculateStyle = function CalculateStyle(mouseX, mouseY) {
|
|
47135
47167
|
if (mouseX <= window.innerWidth / 2 && mouseY <= window.innerHeight / 2) {
|
|
47136
|
-
return "position:
|
|
47168
|
+
return "position: fixed; \n left: ".concat(mouseX - 10, "px; \n top: ").concat(mouseY - 10, "px; \n width: auto; \n height: auto; \n box-shadow: 0 0 6px #bebebe; \n border-radius: 0.175rem; \n background-color: white; \n overflow: auto; \n max-height: ").concat(window.innerHeight - 20, "px; \n z-index: 999;");
|
|
47137
47169
|
} else if (mouseX > window.innerWidth / 2 && mouseY <= window.innerHeight / 2) {
|
|
47138
|
-
return "position:
|
|
47170
|
+
return "position: fixed; \n right: ".concat(window.innerWidth - mouseX - 10, "px; \n top: ").concat(mouseY - 10, "px; \n width: auto; \n height: auto; \n box-shadow: 0 0 6px #bebebe; \n border-radius: 0.175rem; \n background-color: white; \n overflow: auto; \n max-height: ").concat(window.innerHeight - 20, "px; \n z-index: 999;");
|
|
47139
47171
|
} else if (mouseX <= window.innerWidth / 2 && mouseY > window.innerHeight / 2) {
|
|
47140
|
-
return "position:
|
|
47172
|
+
return "position: fixed; \n left: ".concat(mouseX - 10, "px; \n bottom: ").concat(window.innerHeight - mouseY - 10, "px; \n width: auto; \n height: auto; \n box-shadow: 0 0 6px #bebebe; \n border-radius: 0.175rem; \n background-color: white; \n overflow: auto; \n max-height: ").concat(window.innerHeight - 20, "px; \n z-index: 999;");
|
|
47141
47173
|
} else if (mouseX > window.innerWidth / 2 && mouseY > window.innerHeight / 2) {
|
|
47142
|
-
return "position:
|
|
47174
|
+
return "position: fixed; \n right: ".concat(window.innerWidth - mouseX - 10, "px; \n bottom: ").concat(window.innerHeight - mouseY - 10, "px; \n width: auto; \n height: auto; \n box-shadow: 0 0 6px #bebebe; \n border-radius: 0.175rem; \n background-color: white; \n overflow: auto; \n max-height: ").concat(window.innerHeight - 20, "px; \n z-index: 999;");
|
|
47143
47175
|
}
|
|
47144
47176
|
};
|
|
47145
47177
|
|
|
@@ -47148,7 +47180,7 @@ var Tooltip = function Tooltip(props) {
|
|
|
47148
47180
|
onMouseLeave: function onMouseLeave(event) {
|
|
47149
47181
|
event.stopPropagation();
|
|
47150
47182
|
target.innerHTML = "";
|
|
47151
|
-
setStyle("position:
|
|
47183
|
+
setStyle("position: fixed;");
|
|
47152
47184
|
setShow(false);
|
|
47153
47185
|
}
|
|
47154
47186
|
}, renderContent());
|
|
@@ -47166,7 +47198,7 @@ var Tooltip = function Tooltip(props) {
|
|
|
47166
47198
|
onMouseLeave: function onMouseLeave(event) {
|
|
47167
47199
|
event.stopPropagation();
|
|
47168
47200
|
target.innerHTML = "";
|
|
47169
|
-
setStyle("position:
|
|
47201
|
+
setStyle("position: fixed;");
|
|
47170
47202
|
setShow(false);
|
|
47171
47203
|
}
|
|
47172
47204
|
}, props.children));
|