1 | "use strict";
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _extends2 = require("babel-runtime/helpers/extends");
|
8 |
|
9 | var _extends3 = _interopRequireDefault(_extends2);
|
10 |
|
11 | var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");
|
12 |
|
13 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
14 |
|
15 | var _react = require("react");
|
16 |
|
17 | var _react2 = _interopRequireDefault(_react);
|
18 |
|
19 | var _recompose = require("recompose");
|
20 |
|
21 | var _propTypes = require("prop-types");
|
22 |
|
23 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
24 |
|
25 | var _SVGCancel = require("./svg/SVGCancel");
|
26 |
|
27 | var _SVGCancel2 = _interopRequireDefault(_SVGCancel);
|
28 |
|
29 | var _helperFunctions = require("./helperFunctions");
|
30 |
|
31 | var _defaultStyles = require("./defaultStyles");
|
32 |
|
33 | var _StyledModal = require("./StyledModal");
|
34 |
|
35 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 | var ModalDialog = function ModalDialog(_ref) {
|
54 | var closeModal = _ref.closeModal,
|
55 | _ref$useStyleTemplate = _ref.useStyleTemplate,
|
56 | useStyleTemplate = _ref$useStyleTemplate === undefined ? "default" : _ref$useStyleTemplate,
|
57 | customStyleTemplate = _ref.customStyleTemplate,
|
58 | style = _ref.style,
|
59 | className = _ref.className,
|
60 | _onClick6 = _ref.onClick,
|
61 | onMount = _ref.onMount,
|
62 | onUnmount = _ref.onUnmount,
|
63 | _ref$shouldKeepCount = _ref.shouldKeepCount,
|
64 | shouldKeepCount = _ref$shouldKeepCount === undefined ? true : _ref$shouldKeepCount,
|
65 | dataTestId = _ref.dataTestId,
|
66 | renderBody = _ref.renderBody,
|
67 | renderHeader = _ref.renderHeader,
|
68 | noCloseModalButton = _ref.noCloseModalButton,
|
69 | renderButtons = _ref.renderButtons,
|
70 | renderCloseModalButton = _ref.renderCloseModalButton;
|
71 |
|
72 | (0, _react.useEffect)(function () {
|
73 | document.addEventListener("keydown", function cb(e) {
|
74 | if (e.keyCode === 27) {
|
75 | e.currentTarget.removeEventListener(e.type, cb);
|
76 | closeModal();
|
77 | }
|
78 | });
|
79 | if (typeof window !== "undefined" && shouldKeepCount) {
|
80 | window.modalCount ? window.modalCount++ : window.modalCount = 1;
|
81 | console.log("window.modalCount", window.modalCount);
|
82 | onMount && onMount();
|
83 | }
|
84 | return function () {
|
85 | if (typeof window !== "undefined" && shouldKeepCount) {
|
86 | window.modalCount ? window.modalCount-- : window.modalCount = 0;
|
87 | console.log("window.modalCount", window.modalCount);
|
88 | if (window.modalCount === 0) {
|
89 | onUnmount && onUnmount();
|
90 | }
|
91 | }
|
92 | };
|
93 | }, []);
|
94 | var styleTemplate = customStyleTemplate ? customStyleTemplate : useStyleTemplate ? _defaultStyles.modalStyleTemplates[useStyleTemplate] : {};
|
95 | var getHeaderProps = function getHeaderProps() {
|
96 | var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
97 |
|
98 | var _onClick = _ref2.onClick,
|
99 | className = _ref2.className,
|
100 | _ref2$style = _ref2.style,
|
101 | style = _ref2$style === undefined ? {} : _ref2$style,
|
102 | props = (0, _objectWithoutProperties3.default)(_ref2, ["onClick", "className", "style"]);
|
103 | return (0, _extends3.default)({
|
104 | onClick: function onClick(e) {
|
105 | for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
106 | args[_key - 1] = arguments[_key];
|
107 | }
|
108 |
|
109 | e.stopPropagation();
|
110 | _onClick && _onClick.apply(undefined, [e].concat(args));
|
111 | },
|
112 | className: className ? "modal__header " + className : "modal__header",
|
113 | style: (0, _extends3.default)({}, styleTemplate.header, style)
|
114 | }, props);
|
115 | };
|
116 | var getCloseModalButtonProps = function getCloseModalButtonProps() {
|
117 | var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
118 |
|
119 | var _onClick2 = _ref3.onClick,
|
120 | className = _ref3.className,
|
121 | _ref3$style = _ref3.style,
|
122 | style = _ref3$style === undefined ? {} : _ref3$style,
|
123 | props = (0, _objectWithoutProperties3.default)(_ref3, ["onClick", "className", "style"]);
|
124 | return (0, _extends3.default)({
|
125 | onClick: function onClick(e) {
|
126 | for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
127 | args[_key2 - 1] = arguments[_key2];
|
128 | }
|
129 |
|
130 | e.stopPropagation();
|
131 | closeModal();
|
132 | _onClick2 && _onClick2.apply(undefined, [e].concat(args));
|
133 | },
|
134 | className: className ? "modal__closemodalbutton " + className : "modal__closemodalbutton",
|
135 | style: (0, _extends3.default)({}, styleTemplate.closemodalbutton, style)
|
136 | }, props);
|
137 | };
|
138 | var hasHeader = Boolean(renderHeader) ? "true" : "false";
|
139 | var hasFooter = Boolean(renderButtons) ? "true" : "false";
|
140 |
|
141 | var getBodyProps = function getBodyProps() {
|
142 | var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
143 |
|
144 | var _onClick3 = _ref4.onClick,
|
145 | className = _ref4.className,
|
146 | _ref4$style = _ref4.style,
|
147 | style = _ref4$style === undefined ? {} : _ref4$style,
|
148 | props = (0, _objectWithoutProperties3.default)(_ref4, ["onClick", "className", "style"]);
|
149 | return (0, _extends3.default)({
|
150 | onClick: function onClick(e) {
|
151 | for (var _len3 = arguments.length, args = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
|
152 | args[_key3 - 1] = arguments[_key3];
|
153 | }
|
154 |
|
155 | e.stopPropagation();
|
156 | _onClick3 && _onClick3.apply(undefined, [e].concat(args));
|
157 | },
|
158 | className: className ? "modal__body " + className : "modal__body",
|
159 | style: (0, _extends3.default)({}, style),
|
160 | hasheader: hasHeader,
|
161 | hasfooter: hasFooter
|
162 | }, props);
|
163 | };
|
164 | var getButtonsProps = function getButtonsProps() {
|
165 | var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
166 |
|
167 | var _onClick4 = _ref5.onClick,
|
168 | className = _ref5.className,
|
169 | _ref5$style = _ref5.style,
|
170 | style = _ref5$style === undefined ? {} : _ref5$style,
|
171 | props = (0, _objectWithoutProperties3.default)(_ref5, ["onClick", "className", "style"]);
|
172 | return (0, _extends3.default)({
|
173 | onClick: function onClick(e) {
|
174 | for (var _len4 = arguments.length, args = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
|
175 | args[_key4 - 1] = arguments[_key4];
|
176 | }
|
177 |
|
178 | e.stopPropagation();
|
179 | _onClick4 && _onClick4.apply(undefined, [e].concat(args));
|
180 | },
|
181 | className: className ? "modal__buttons " + className : "modal__buttons",
|
182 | style: (0, _extends3.default)({}, styleTemplate.buttons, style)
|
183 | }, props);
|
184 | };
|
185 | var getButtonProps = function getButtonProps() {
|
186 | var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
187 |
|
188 | var _onClick5 = _ref6.onClick,
|
189 | className = _ref6.className,
|
190 | _ref6$style = _ref6.style,
|
191 | style = _ref6$style === undefined ? {} : _ref6$style,
|
192 | props = (0, _objectWithoutProperties3.default)(_ref6, ["onClick", "className", "style"]);
|
193 | return (0, _extends3.default)({
|
194 | onClick: function onClick(e) {
|
195 | for (var _len5 = arguments.length, args = Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
|
196 | args[_key5 - 1] = arguments[_key5];
|
197 | }
|
198 |
|
199 | e.stopPropagation();
|
200 | _onClick5 && _onClick5.apply(undefined, [e].concat(args));
|
201 | },
|
202 | className: className ? "modal__button " + className : "modal__button",
|
203 | style: (0, _extends3.default)({}, styleTemplate.button, style)
|
204 | }, props);
|
205 | };
|
206 | var getContainerProps = function getContainerProps() {
|
207 | return {
|
208 | "data-testid": dataTestId,
|
209 | onClick: function onClick(e) {
|
210 | for (var _len6 = arguments.length, args = Array(_len6 > 1 ? _len6 - 1 : 0), _key6 = 1; _key6 < _len6; _key6++) {
|
211 | args[_key6 - 1] = arguments[_key6];
|
212 | }
|
213 |
|
214 | e.stopPropagation();
|
215 | _onClick6 && _onClick6.apply(undefined, [e].concat(args));
|
216 | },
|
217 | className: (0, _helperFunctions.advancedMulti)({
|
218 | unflattenedBases: [className, "modal__container"]
|
219 | }),
|
220 | style: (0, _extends3.default)({}, styleTemplate.container, style)
|
221 | };
|
222 | };
|
223 | return _react2.default.createElement(
|
224 | _StyledModal.CONTAINER,
|
225 | (0, _extends3.default)({}, getContainerProps({ style: style })),
|
226 | renderCloseModalButton && renderCloseModalButton({ getCloseModalButtonProps: getCloseModalButtonProps }),
|
227 | !noCloseModalButton && !renderCloseModalButton && _react2.default.createElement(
|
228 | _StyledModal.EXIT_BUTTON,
|
229 | (0, _extends3.default)({}, getCloseModalButtonProps()),
|
230 | _react2.default.createElement(_SVGCancel2.default, null)
|
231 | ),
|
232 | renderHeader && (typeof renderHeader === "function" ? renderHeader({ getHeaderProps: getHeaderProps }) : _react2.default.createElement(
|
233 | _StyledModal.HEADER,
|
234 | (0, _extends3.default)({}, getHeaderProps()),
|
235 | renderHeader
|
236 | )),
|
237 | typeof renderBody === "function" ? renderBody({ getBodyProps: getBodyProps }) : _react2.default.createElement(
|
238 | _StyledModal.BODY,
|
239 | (0, _extends3.default)({}, getBodyProps({ style: style })),
|
240 | renderBody
|
241 | ),
|
242 | renderButtons && renderButtons({ getButtonsProps: getButtonsProps, getButtonProps: getButtonProps, closeModal: closeModal })
|
243 | );
|
244 | };
|
245 |
|
246 | var hideScrollBar = function hideScrollBar() {
|
247 | return (0, _helperFunctions.styleElement)("body", {
|
248 | overflow: "hidden"
|
249 | });
|
250 | };
|
251 | var showScrollBar = function showScrollBar() {
|
252 | return (0, _helperFunctions.styleElement)("body", {
|
253 | overflow: "auto"
|
254 | });
|
255 | };
|
256 |
|
257 | var enhance = (0, _recompose.compose)();
|
258 |
|
259 | ModalDialog.propTypes = {
|
260 | buttons: _propTypes2.default.object
|
261 | };
|
262 | ModalDialog.defaultProps = {
|
263 | useStyleTemplate: "default",
|
264 | noCloseModalButton: false,
|
265 | dataTestId: "",
|
266 | classNameAppend: "",
|
267 | classNameOverride: "",
|
268 | style: {},
|
269 | onMount: function onMount() {
|
270 | return null;
|
271 | },
|
272 | onUnmount: function onUnmount() {
|
273 | return null;
|
274 | }
|
275 | };
|
276 |
|
277 | exports.default = enhance(ModalDialog); |
\ | No newline at end of file |