@unbxd-ui/unbxd-react-components 0.2.135 → 0.2.137
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.
|
@@ -32,12 +32,14 @@ var InlineModal = function InlineModal(props, ref) {
|
|
|
32
32
|
halign = props.halign,
|
|
33
33
|
onModalStateChange = props.onModalStateChange,
|
|
34
34
|
_props$closeOnBodyCli = props.closeOnBodyClick,
|
|
35
|
-
closeOnBodyClick = _props$closeOnBodyCli === void 0 ? false : _props$closeOnBodyCli
|
|
35
|
+
closeOnBodyClick = _props$closeOnBodyCli === void 0 ? false : _props$closeOnBodyCli,
|
|
36
|
+
closeOnOutsideClick = props.closeOnOutsideClick;
|
|
36
37
|
var _useState = (0, _react.useState)(propIsOpen),
|
|
37
38
|
_useState2 = _slicedToArray(_useState, 2),
|
|
38
39
|
isModalOpen = _useState2[0],
|
|
39
40
|
setIsModalOpen = _useState2[1];
|
|
40
41
|
var activatorProps = {};
|
|
42
|
+
var modalCloseProps = {};
|
|
41
43
|
var inlineModalClassName = "RCB-inline-modal ".concat(className);
|
|
42
44
|
var _useState3 = (0, _react.useState)(isModalOpen),
|
|
43
45
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
@@ -48,7 +50,7 @@ var InlineModal = function InlineModal(props, ref) {
|
|
|
48
50
|
var inlineModalBodyRef = (0, _react.useRef)();
|
|
49
51
|
var isFirstRun = (0, _react.useRef)(true);
|
|
50
52
|
(0, _react.useEffect)(function () {
|
|
51
|
-
setShowModalBody(isModalOpen);
|
|
53
|
+
if (isModalOpen !== undefined) setShowModalBody(isModalOpen);
|
|
52
54
|
}, [isModalOpen]);
|
|
53
55
|
var changeModalState = function changeModalState(newState) {
|
|
54
56
|
setIsModalOpen(newState);
|
|
@@ -57,6 +59,13 @@ var InlineModal = function InlineModal(props, ref) {
|
|
|
57
59
|
//e.stopPropagation();
|
|
58
60
|
changeModalState(!isModalOpen);
|
|
59
61
|
};
|
|
62
|
+
var onActivatorHover = function onActivatorHover(e) {
|
|
63
|
+
//e.stopPropagation();
|
|
64
|
+
setShowModalBody(true);
|
|
65
|
+
};
|
|
66
|
+
var onActivatorMouseOut = function onActivatorMouseOut(e) {
|
|
67
|
+
setShowModalBody(false);
|
|
68
|
+
};
|
|
60
69
|
var onBodyClick = function onBodyClick(e) {
|
|
61
70
|
var eventTarget = e.target;
|
|
62
71
|
var inlineModalNode = inlineModalRef.current;
|
|
@@ -80,7 +89,7 @@ var InlineModal = function InlineModal(props, ref) {
|
|
|
80
89
|
}
|
|
81
90
|
}
|
|
82
91
|
}
|
|
83
|
-
if (!isWithinModal) {
|
|
92
|
+
if (!isWithinModal && closeOnOutsideClick) {
|
|
84
93
|
/* outside click -> close modal */
|
|
85
94
|
changeModalState(false);
|
|
86
95
|
}
|
|
@@ -107,8 +116,13 @@ var InlineModal = function InlineModal(props, ref) {
|
|
|
107
116
|
onClick: onActivatorClick
|
|
108
117
|
};
|
|
109
118
|
} else if (activatorAction === "hover") {
|
|
110
|
-
|
|
111
|
-
|
|
119
|
+
activatorProps = {
|
|
120
|
+
onMouseOver: onActivatorHover
|
|
121
|
+
};
|
|
122
|
+
modalCloseProps = {
|
|
123
|
+
onMouseLeave: onActivatorMouseOut
|
|
124
|
+
};
|
|
125
|
+
// setShowModalBody(true);
|
|
112
126
|
}
|
|
113
127
|
|
|
114
128
|
/* add methods that can be accessed via this component's ref */
|
|
@@ -119,10 +133,10 @@ var InlineModal = function InlineModal(props, ref) {
|
|
|
119
133
|
}
|
|
120
134
|
};
|
|
121
135
|
});
|
|
122
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
136
|
+
return /*#__PURE__*/_react["default"].createElement("div", _extends({
|
|
123
137
|
className: inlineModalClassName,
|
|
124
138
|
ref: inlineModalRef
|
|
125
|
-
}, /*#__PURE__*/_react["default"].createElement("div", _extends({}, activatorProps, {
|
|
139
|
+
}, modalCloseProps), /*#__PURE__*/_react["default"].createElement("div", _extends({}, activatorProps, {
|
|
126
140
|
className: "RCB-inline-modal-btn ".concat(activatorClassName)
|
|
127
141
|
}), children[0]), showModalBody && /*#__PURE__*/_react["default"].createElement("div", {
|
|
128
142
|
className: "RCB-inline-modal-body RCB-align-".concat(halign),
|
|
@@ -156,7 +170,8 @@ InlineModal.defaultProps = {
|
|
|
156
170
|
halign: "left",
|
|
157
171
|
activatorAction: "click",
|
|
158
172
|
// or "hover"
|
|
159
|
-
isModalOpen: false
|
|
173
|
+
isModalOpen: false,
|
|
174
|
+
closeOnOutsideClick: true
|
|
160
175
|
};
|
|
161
176
|
InlineModal.displayName = "InlineModal";
|
|
162
177
|
var _default = exports["default"] = InlineModal;
|