intelicoreact 1.2.18 → 1.2.20
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/Dropdown/Dropdown.js +2 -2
- package/dist/Atomic/FormElements/FileLoader/partial/LoadedContent.js +2 -2
- package/dist/Atomic/FormElements/FileLoaderLocalGroup/FileLoaderLocalGroup.js +2 -2
- package/dist/Atomic/FormElements/Input/Input.js +2 -2
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js +2 -2
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss +4 -0
- package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js +2 -2
- package/dist/Atomic/FormElements/InputDateRange/dependencies.js +3 -3
- package/dist/Atomic/FormElements/InputMask/InputMask.js +3 -2
- package/dist/Atomic/FormElements/InputMask/functions.js +1 -1
- package/dist/Atomic/FormElements/InputMask2/InputMask2.js +2 -2
- package/dist/Atomic/FormElements/InputMask2/functions.js +1 -1
- package/dist/Atomic/FormElements/InputMask3/InputMask3.js +2 -2
- package/dist/Atomic/FormElements/InputMask3/functions.js +1 -1
- package/dist/Atomic/FormElements/InputsRow/InputsRow.js +2 -2
- package/dist/Atomic/FormElements/NumericInput/NumericInput.js +2 -2
- package/dist/Atomic/FormElements/RadioGroup/RadioGroup.js +2 -2
- package/dist/Atomic/FormElements/RadioGroupWithInput/RadioGroupWithInput.js +2 -2
- package/dist/Atomic/FormElements/RangeInputs/RangeInputs.js +2 -2
- package/dist/Atomic/FormElements/RangeList/RangeList.js +2 -2
- package/dist/Atomic/FormElements/RangeSlider2/RangeSlider2.js +2 -2
- package/dist/Atomic/FormElements/Text/Text.js +2 -2
- package/dist/Atomic/FormElements/WidgetPseudoTable/WidgetPseudoTable.js +2 -2
- package/dist/Atomic/FormElements/WidgetWithSwitchableRows/WidgetWithSwitchableRows.js +2 -2
- package/dist/Atomic/UI/AccordionTable/AccordionTable.js +2 -2
- package/dist/Atomic/UI/Chart/partial/Chart.constants.js +1 -1
- package/dist/Atomic/UI/Chart/partial/datasetSetters.js +3 -3
- package/dist/Atomic/UI/Chart/partial/optionsConstructor.js +3 -3
- package/dist/Atomic/UI/Chart/partial/optionsSetters.js +2 -2
- package/dist/Atomic/UI/Chart/partial/utils.js +3 -3
- package/dist/Atomic/UI/ExampleChartIntegration/ExampleChartIntegration.js +2 -2
- package/dist/Atomic/UI/ExampleChartIntegration/partial/utils.js +1 -1
- package/dist/Atomic/UI/Modal/Modal.js +35 -9
- package/dist/Atomic/UI/Modal/ModalMobile.scss +48 -0
- package/dist/Atomic/UI/Modal/partials/ModalFooter.js +3 -1
- package/dist/Atomic/UI/Modal/partials/ModalTitle.js +5 -2
- package/dist/Atomic/UI/Modal/partials/useMobileModal.js +110 -0
- package/dist/Atomic/UI/ModalBackup/Modal.js +174 -0
- package/dist/Atomic/UI/ModalBackup/Modal.scss +333 -0
- package/dist/Atomic/UI/ModalBackup/ModalHOC.js +51 -0
- package/dist/Atomic/UI/ModalBackup/partials/ModalFooter.js +24 -0
- package/dist/Atomic/UI/ModalBackup/partials/ModalTitle.js +41 -0
- package/dist/Atomic/UI/NavLine/NavLine.js +2 -2
- package/dist/Atomic/UI/Table/Partials/TdCell.js +2 -2
- package/dist/Atomic/UI/Table/Partials/TdRow.js +2 -2
- package/dist/Atomic/UI/TagList/TagList.js +2 -2
- package/dist/Classes/AbortableFetch.js +2 -2
- package/dist/Classes/AnimatedHandler.js +4 -4
- package/dist/Classes/RESTAPI/index.js +2 -2
- package/dist/Classes/RESTAPI/partials/AbortableFetch.js +2 -2
- package/dist/Classes/RESTAPI/partials/ApiBase.js +3 -1
- package/dist/Classes/RESTAPI/partials/ApiRequestCreators.js +2 -2
- package/dist/Classes/RESTAPI/partials/ApiUtils.js +2 -2
- package/dist/Classes/RESTAPI/partials/CredentialsProcessing.js +2 -2
- package/dist/Classes/RESTAPI/partials/Utils.js +2 -2
- package/dist/Classes/RESTAPI/partials/_utils.js +3 -3
- package/dist/Constants/index.constants.js +1 -1
- package/dist/Functions/fieldValueFormatters.js +2 -1
- package/dist/Functions/locale/createTranslator.js +2 -2
- package/dist/Functions/useFieldFocus.js +2 -2
- package/dist/Functions/useFormTools/form-drivers/ObjectWithIterableObjects.js +2 -2
- package/dist/Functions/useFormTools/form-drivers/ObjectWithNamedKeyObjects.js +2 -2
- package/dist/Functions/useFormTools/functions/General.js +2 -2
- package/dist/Functions/useFormTools/functions/RenderFields.js +2 -2
- package/dist/Functions/useFormTools/index.js +2 -2
- package/dist/Functions/useInputHighlightError.js +1 -1
- package/dist/Functions/useLocationParams.js +2 -2
- package/dist/Functions/useMetaInfo.js +1 -1
- package/dist/Functions/usePasswordChecker.js +2 -2
- package/dist/Functions/utils.js +8 -6
- package/package.json +1 -1
- package/dist/Functions/presets/inputMaskPreset.js +0 -176
|
@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
|
-
exports.
|
|
10
|
+
exports.renderModalTitle = exports.default = exports.KEY_CODE = void 0;
|
|
11
11
|
|
|
12
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
13
|
|
|
@@ -15,16 +15,18 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
15
15
|
|
|
16
16
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
17
17
|
|
|
18
|
-
var _reactFeather = require("react-feather");
|
|
19
|
-
|
|
20
18
|
var _Button = _interopRequireDefault(require("../Button/Button"));
|
|
21
19
|
|
|
22
|
-
require("./Modal.scss");
|
|
23
|
-
|
|
24
20
|
var _ModalFooter = _interopRequireDefault(require("./partials/ModalFooter"));
|
|
25
21
|
|
|
26
22
|
var _ModalTitle = _interopRequireDefault(require("./partials/ModalTitle"));
|
|
27
23
|
|
|
24
|
+
var _useMobileModal2 = _interopRequireDefault(require("./partials/useMobileModal"));
|
|
25
|
+
|
|
26
|
+
require("./Modal.scss");
|
|
27
|
+
|
|
28
|
+
require("./ModalMobile.scss");
|
|
29
|
+
|
|
28
30
|
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); }
|
|
29
31
|
|
|
30
32
|
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; }
|
|
@@ -87,6 +89,15 @@ var Modal = function Modal(_ref2) {
|
|
|
87
89
|
leftContentOfFooter = _ref2.leftContentOfFooter,
|
|
88
90
|
testId = _ref2.testId,
|
|
89
91
|
noHeaderCloseBtn = _ref2.noHeaderCloseBtn;
|
|
92
|
+
|
|
93
|
+
var _useMobileModal = (0, _useMobileModal2.default)(),
|
|
94
|
+
modalMobileHeaderRef = _useMobileModal.modalMobileHeaderRef,
|
|
95
|
+
modalMobileBodyRef = _useMobileModal.modalMobileBodyRef,
|
|
96
|
+
modalMobileFooterRef = _useMobileModal.modalMobileFooterRef,
|
|
97
|
+
MODALS_LOGIC = _useMobileModal.MODALS_LOGIC,
|
|
98
|
+
renderModal = _useMobileModal.renderModal,
|
|
99
|
+
isMobile = _useMobileModal.isMobile;
|
|
100
|
+
|
|
90
101
|
if (!isOpen) return null;
|
|
91
102
|
var handle = {
|
|
92
103
|
confirm: function confirm() {
|
|
@@ -122,12 +133,21 @@ var Modal = function Modal(_ref2) {
|
|
|
122
133
|
"data-testid": 'modal-closeOverlay',
|
|
123
134
|
className: isOpen ? 'modal-overlay' : 'hidden',
|
|
124
135
|
onClick: closeModal
|
|
125
|
-
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
136
|
+
}), renderModal( /*#__PURE__*/_react.default.createElement("div", {
|
|
126
137
|
style: {
|
|
127
138
|
width: size
|
|
128
139
|
},
|
|
129
|
-
className: (0, _classnames.default)(className,
|
|
140
|
+
className: (0, _classnames.default)(className, {
|
|
141
|
+
'modal': isOpen,
|
|
142
|
+
'modal-mobile': isOpen && isMobile,
|
|
143
|
+
'hidden': !isOpen
|
|
144
|
+
})
|
|
130
145
|
}, !noHeader && /*#__PURE__*/_react.default.createElement(_ModalTitle.default, {
|
|
146
|
+
wrapperRef: modalMobileHeaderRef,
|
|
147
|
+
className: (0, _classnames.default)({
|
|
148
|
+
'modal__header--hidden': MODALS_LOGIC.IS_HEADER_HIDDEN,
|
|
149
|
+
'modal__header--sticky': !MODALS_LOGIC.IS_HEADER_HIDDEN && MODALS_LOGIC.IS_HEADER_STICKY
|
|
150
|
+
}),
|
|
131
151
|
variant: variant,
|
|
132
152
|
isForced: forced,
|
|
133
153
|
onClose: handle.decline,
|
|
@@ -137,11 +157,17 @@ var Modal = function Modal(_ref2) {
|
|
|
137
157
|
title: title,
|
|
138
158
|
onlyTitle: onlyTitle
|
|
139
159
|
}))), /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, atributesForModalBody, {
|
|
160
|
+
ref: modalMobileBodyRef,
|
|
140
161
|
className: (0, _classnames.default)('modal__body', {
|
|
141
162
|
'modal__body--no-footer': noFooter
|
|
142
163
|
})
|
|
143
164
|
}), children), !noFooter && /*#__PURE__*/_react.default.createElement(_ModalFooter.default, {
|
|
144
|
-
|
|
165
|
+
wrapperRef: modalMobileFooterRef,
|
|
166
|
+
className: (0, _classnames.default)({
|
|
167
|
+
'modal__footer--hidden': MODALS_LOGIC.IS_FOOTER_HIDDEN,
|
|
168
|
+
'modal__footer--sticky': !MODALS_LOGIC.IS_FOOTER_HIDDEN && MODALS_LOGIC.IS_FOOTER_STICKY,
|
|
169
|
+
'modal__footer_with-left-content': leftContentOfFooter
|
|
170
|
+
})
|
|
145
171
|
}, leftContentOfFooter, /*#__PURE__*/_react.default.createElement("div", {
|
|
146
172
|
className: "modal__buttons-block"
|
|
147
173
|
}, !noCloseBtn && /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
@@ -167,7 +193,7 @@ var Modal = function Modal(_ref2) {
|
|
|
167
193
|
disabled: confirmBtnDisable,
|
|
168
194
|
icon: confirmBtnIcon,
|
|
169
195
|
isIconRight: isConfirmBtnIconPositionRight
|
|
170
|
-
})))));
|
|
196
|
+
}))))));
|
|
171
197
|
};
|
|
172
198
|
|
|
173
199
|
var _default = Modal;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
@media only screen and (max-width:767px) {
|
|
2
|
+
.modal-mobile-container {
|
|
3
|
+
height: 100dvh;
|
|
4
|
+
width: 100dvw;
|
|
5
|
+
position: relative;
|
|
6
|
+
top: 0;
|
|
7
|
+
overflow-y: auto;
|
|
8
|
+
box-sizing: border-box;
|
|
9
|
+
border-radius: 16px 16px 0 0;
|
|
10
|
+
|
|
11
|
+
.modal {
|
|
12
|
+
margin-top: 16px!important;
|
|
13
|
+
max-height: unset!important;
|
|
14
|
+
max-width: 100vw;
|
|
15
|
+
border-radius: 16px 16px 0 0;
|
|
16
|
+
|
|
17
|
+
&__header,
|
|
18
|
+
&__footer {
|
|
19
|
+
left: 0;
|
|
20
|
+
width: 100%;
|
|
21
|
+
box-sizing: border-box;
|
|
22
|
+
z-index: 2;
|
|
23
|
+
|
|
24
|
+
&--hidden {
|
|
25
|
+
position: relative;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&--sticky {
|
|
29
|
+
position: sticky;
|
|
30
|
+
box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.15);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&__header {
|
|
35
|
+
top: 0;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&__body,
|
|
39
|
+
&__footer {
|
|
40
|
+
border-radius: 0!important;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&__footer {
|
|
44
|
+
bottom: 0;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
@@ -14,8 +14,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
14
14
|
var ModalFooter = function ModalFooter(_ref) {
|
|
15
15
|
var _ref$className = _ref.className,
|
|
16
16
|
className = _ref$className === void 0 ? '' : _ref$className,
|
|
17
|
-
children = _ref.children
|
|
17
|
+
children = _ref.children,
|
|
18
|
+
wrapperRef = _ref.wrapperRef;
|
|
18
19
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
20
|
+
ref: wrapperRef,
|
|
19
21
|
className: (0, _classnames.default)('modal__footer', className)
|
|
20
22
|
}, children);
|
|
21
23
|
};
|
|
@@ -21,9 +21,12 @@ var ModalTitle = function ModalTitle(_ref) {
|
|
|
21
21
|
children = _ref.children,
|
|
22
22
|
isForced = _ref.isForced,
|
|
23
23
|
onClose = _ref.onClose,
|
|
24
|
-
noHeaderCloseBtn = _ref.noHeaderCloseBtn
|
|
24
|
+
noHeaderCloseBtn = _ref.noHeaderCloseBtn,
|
|
25
|
+
className = _ref.className,
|
|
26
|
+
wrapperRef = _ref.wrapperRef;
|
|
25
27
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
26
|
-
|
|
28
|
+
ref: wrapperRef,
|
|
29
|
+
className: (0, _classnames.default)('modal__header', className, (0, _defineProperty2.default)({}, "modal__header-".concat(variant), variant))
|
|
27
30
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
28
31
|
className: (0, _classnames.default)('modal__header-title', (0, _defineProperty2.default)({}, "modal__header-".concat(variant, "-title"), variant))
|
|
29
32
|
}, children), !isForced && /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.default = useMobileModal;
|
|
11
|
+
|
|
12
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
+
|
|
14
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
15
|
+
|
|
16
|
+
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); }
|
|
17
|
+
|
|
18
|
+
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; }
|
|
19
|
+
|
|
20
|
+
var SCROLL_DIRECTION = {
|
|
21
|
+
UP: 'up',
|
|
22
|
+
DOWN: 'down'
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
function useMobileModal() {
|
|
26
|
+
var _modalMobileContainer, _modalMobileContainer2, _modalMobileHeaderRef, _modalMobileHeaderRef2, _modalMobileFooterRef, _modalMobileFooterRef2, _modalMobileFooterRef3, _modalMobileFooterRef4, _modalMobileBodyRef$c, _modalMobileBodyRef$c2;
|
|
27
|
+
|
|
28
|
+
var _useState = (0, _react.useState)(false),
|
|
29
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
30
|
+
isMobile = _useState2[0],
|
|
31
|
+
setIsMobile = _useState2[1];
|
|
32
|
+
|
|
33
|
+
var modalMobileContainerRef = (0, _react.useRef)(null);
|
|
34
|
+
var modalMobileHeaderRef = (0, _react.useRef)(null);
|
|
35
|
+
var modalMobileFooterRef = (0, _react.useRef)(null);
|
|
36
|
+
var modalMobileBodyRef = (0, _react.useRef)(null);
|
|
37
|
+
|
|
38
|
+
var _useState3 = (0, _react.useState)(0),
|
|
39
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
40
|
+
scrollTop = _useState4[0],
|
|
41
|
+
setScrollTop = _useState4[1];
|
|
42
|
+
|
|
43
|
+
var _useState5 = (0, _react.useState)(0),
|
|
44
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
45
|
+
scrollTopPrev = _useState6[0],
|
|
46
|
+
setScrollTopPrev = _useState6[1];
|
|
47
|
+
|
|
48
|
+
var _useState7 = (0, _react.useState)(SCROLL_DIRECTION.UP),
|
|
49
|
+
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
50
|
+
scrollDirection = _useState8[0],
|
|
51
|
+
setScrollDirection = _useState8[1];
|
|
52
|
+
|
|
53
|
+
var modalMobileContainerHeight = modalMobileContainerRef === null || modalMobileContainerRef === void 0 ? void 0 : (_modalMobileContainer = modalMobileContainerRef.current) === null || _modalMobileContainer === void 0 ? void 0 : (_modalMobileContainer2 = _modalMobileContainer.getBoundingClientRect()) === null || _modalMobileContainer2 === void 0 ? void 0 : _modalMobileContainer2.height;
|
|
54
|
+
var headerTop = modalMobileHeaderRef === null || modalMobileHeaderRef === void 0 ? void 0 : (_modalMobileHeaderRef = modalMobileHeaderRef.current) === null || _modalMobileHeaderRef === void 0 ? void 0 : (_modalMobileHeaderRef2 = _modalMobileHeaderRef.getBoundingClientRect()) === null || _modalMobileHeaderRef2 === void 0 ? void 0 : _modalMobileHeaderRef2.top;
|
|
55
|
+
var footerBottom = modalMobileContainerHeight - (modalMobileFooterRef === null || modalMobileFooterRef === void 0 ? void 0 : (_modalMobileFooterRef = modalMobileFooterRef.current) === null || _modalMobileFooterRef === void 0 ? void 0 : (_modalMobileFooterRef2 = _modalMobileFooterRef.getBoundingClientRect()) === null || _modalMobileFooterRef2 === void 0 ? void 0 : _modalMobileFooterRef2.bottom);
|
|
56
|
+
var footerHeight = modalMobileFooterRef === null || modalMobileFooterRef === void 0 ? void 0 : (_modalMobileFooterRef3 = modalMobileFooterRef.current) === null || _modalMobileFooterRef3 === void 0 ? void 0 : (_modalMobileFooterRef4 = _modalMobileFooterRef3.getBoundingClientRect()) === null || _modalMobileFooterRef4 === void 0 ? void 0 : _modalMobileFooterRef4.height;
|
|
57
|
+
var bodyTop = modalMobileBodyRef === null || modalMobileBodyRef === void 0 ? void 0 : (_modalMobileBodyRef$c = modalMobileBodyRef.current) === null || _modalMobileBodyRef$c === void 0 ? void 0 : (_modalMobileBodyRef$c2 = _modalMobileBodyRef$c.getBoundingClientRect()) === null || _modalMobileBodyRef$c2 === void 0 ? void 0 : _modalMobileBodyRef$c2.top;
|
|
58
|
+
/* MODALS LOGIC | BEGIN */
|
|
59
|
+
// Detect Mobile
|
|
60
|
+
|
|
61
|
+
(0, _react.useEffect)(function () {
|
|
62
|
+
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) setIsMobile(true);
|
|
63
|
+
}, [navigator.userAgent]); // Count ScrollTop
|
|
64
|
+
|
|
65
|
+
(0, _react.useEffect)(function () {
|
|
66
|
+
var el = modalMobileContainerRef === null || modalMobileContainerRef === void 0 ? void 0 : modalMobileContainerRef.current;
|
|
67
|
+
|
|
68
|
+
if (el) {
|
|
69
|
+
el.addEventListener('scroll', function () {
|
|
70
|
+
setScrollTop(function (scrollTop) {
|
|
71
|
+
if (scrollTop !== el.scrollTop) setScrollTopPrev(scrollTop);
|
|
72
|
+
return el.scrollTop;
|
|
73
|
+
});
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
}, [modalMobileContainerRef === null || modalMobileContainerRef === void 0 ? void 0 : modalMobileContainerRef.current]); // Count ScrollDirection
|
|
77
|
+
|
|
78
|
+
(0, _react.useEffect)(function () {
|
|
79
|
+
setScrollDirection(scrollTop < scrollTopPrev ? SCROLL_DIRECTION.UP : SCROLL_DIRECTION.DOWN);
|
|
80
|
+
}, [scrollTop, scrollTopPrev]);
|
|
81
|
+
var MODALS_LOGIC = {
|
|
82
|
+
IS_HEADER_HIDDEN: !isMobile ? false : footerBottom * -1 <= footerHeight || scrollDirection === SCROLL_DIRECTION.DOWN,
|
|
83
|
+
IS_HEADER_STICKY: !isMobile ? false : headerTop <= 0,
|
|
84
|
+
IS_FOOTER_HIDDEN: !isMobile ? false : bodyTop > 0 || scrollDirection === SCROLL_DIRECTION.UP,
|
|
85
|
+
IS_FOOTER_STICKY: !isMobile ? false : footerBottom <= 0
|
|
86
|
+
};
|
|
87
|
+
/* MODALS LOGIC | END */
|
|
88
|
+
|
|
89
|
+
var renderMobileModal = function renderMobileModal(modal) {
|
|
90
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
91
|
+
className: "modal-mobile-container",
|
|
92
|
+
ref: modalMobileContainerRef
|
|
93
|
+
}, modal);
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
var renderModal = function renderModal(modal) {
|
|
97
|
+
return isMobile ? renderMobileModal(modal) : modal;
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
return {
|
|
101
|
+
modalMobileContainerRef: modalMobileContainerRef,
|
|
102
|
+
modalMobileHeaderRef: modalMobileHeaderRef,
|
|
103
|
+
modalMobileBodyRef: modalMobileBodyRef,
|
|
104
|
+
modalMobileFooterRef: modalMobileFooterRef,
|
|
105
|
+
MODALS_LOGIC: MODALS_LOGIC,
|
|
106
|
+
SCROLL_DIRECTION: SCROLL_DIRECTION,
|
|
107
|
+
renderModal: renderModal,
|
|
108
|
+
isMobile: isMobile
|
|
109
|
+
};
|
|
110
|
+
}
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.renderModalTitle = exports.default = exports.KEY_CODE = void 0;
|
|
11
|
+
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
14
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
15
|
+
|
|
16
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
17
|
+
|
|
18
|
+
var _reactFeather = require("react-feather");
|
|
19
|
+
|
|
20
|
+
var _Button = _interopRequireDefault(require("../Button/Button"));
|
|
21
|
+
|
|
22
|
+
require("./Modal.scss");
|
|
23
|
+
|
|
24
|
+
var _ModalFooter = _interopRequireDefault(require("./partials/ModalFooter"));
|
|
25
|
+
|
|
26
|
+
var _ModalTitle = _interopRequireDefault(require("./partials/ModalTitle"));
|
|
27
|
+
|
|
28
|
+
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); }
|
|
29
|
+
|
|
30
|
+
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; }
|
|
31
|
+
|
|
32
|
+
var KEY_CODE = Object.freeze({
|
|
33
|
+
ENTER: 13,
|
|
34
|
+
ESC: 27
|
|
35
|
+
});
|
|
36
|
+
exports.KEY_CODE = KEY_CODE;
|
|
37
|
+
|
|
38
|
+
var renderModalTitle = function renderModalTitle(_ref) {
|
|
39
|
+
var mode = _ref.mode,
|
|
40
|
+
title = _ref.title,
|
|
41
|
+
onlyTitle = _ref.onlyTitle;
|
|
42
|
+
if (mode && mode !== 'default' && !onlyTitle) return "".concat(mode[0].toUpperCase() + mode.slice(1), " ").concat(title);
|
|
43
|
+
return title;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
exports.renderModalTitle = renderModalTitle;
|
|
47
|
+
|
|
48
|
+
var Modal = function Modal(_ref2) {
|
|
49
|
+
var _ref2$zIndex = _ref2.zIndex,
|
|
50
|
+
zIndex = _ref2$zIndex === void 0 ? 100 : _ref2$zIndex,
|
|
51
|
+
isOpen = _ref2.isOpen,
|
|
52
|
+
onConfirm = _ref2.onConfirm,
|
|
53
|
+
onDecline = _ref2.onDecline,
|
|
54
|
+
closeModal = _ref2.closeModal,
|
|
55
|
+
children = _ref2.children,
|
|
56
|
+
className = _ref2.className,
|
|
57
|
+
title = _ref2.title,
|
|
58
|
+
variant = _ref2.variant,
|
|
59
|
+
onlyTitle = _ref2.onlyTitle,
|
|
60
|
+
mode = _ref2.mode,
|
|
61
|
+
size = _ref2.size,
|
|
62
|
+
_ref2$atributesForMod = _ref2.atributesForModalBody,
|
|
63
|
+
atributesForModalBody = _ref2$atributesForMod === void 0 ? {} : _ref2$atributesForMod,
|
|
64
|
+
confirmBtnClassName = _ref2.confirmBtnClassName,
|
|
65
|
+
confirmBtnLabel = _ref2.confirmBtnLabel,
|
|
66
|
+
_ref2$confirmBtnVaria = _ref2.confirmBtnVariant,
|
|
67
|
+
confirmBtnVariant = _ref2$confirmBtnVaria === void 0 ? 'primary' : _ref2$confirmBtnVaria,
|
|
68
|
+
confirmBtnDisable = _ref2.confirmBtnDisable,
|
|
69
|
+
confirmBtnIcon = _ref2.confirmBtnIcon,
|
|
70
|
+
isConfirmBtnIconPositionRight = _ref2.isConfirmBtnIconPositionRight,
|
|
71
|
+
noConfirmBtn = _ref2.noConfirmBtn,
|
|
72
|
+
noCloseBtn = _ref2.noCloseBtn,
|
|
73
|
+
noFooter = _ref2.noFooter,
|
|
74
|
+
noHeader = _ref2.noHeader,
|
|
75
|
+
closeBtnClassName = _ref2.closeBtnClassName,
|
|
76
|
+
closeBtnText = _ref2.closeBtnText,
|
|
77
|
+
closeBtnVariant = _ref2.closeBtnVariant,
|
|
78
|
+
closeBtnDisable = _ref2.closeBtnDisable,
|
|
79
|
+
closeBtnIcon = _ref2.closeBtnIcon,
|
|
80
|
+
forced = _ref2.forced,
|
|
81
|
+
btnClassNames = _ref2.btnClassNames,
|
|
82
|
+
isCloseBtnIconPositionRight = _ref2.isCloseBtnIconPositionRight,
|
|
83
|
+
_ref2$submitOnEnter = _ref2.submitOnEnter,
|
|
84
|
+
submitOnEnter = _ref2$submitOnEnter === void 0 ? false : _ref2$submitOnEnter,
|
|
85
|
+
_ref2$closeOnEsc = _ref2.closeOnEsc,
|
|
86
|
+
closeOnEsc = _ref2$closeOnEsc === void 0 ? false : _ref2$closeOnEsc,
|
|
87
|
+
leftContentOfFooter = _ref2.leftContentOfFooter,
|
|
88
|
+
testId = _ref2.testId,
|
|
89
|
+
noHeaderCloseBtn = _ref2.noHeaderCloseBtn;
|
|
90
|
+
if (!isOpen) return null;
|
|
91
|
+
var handle = {
|
|
92
|
+
confirm: function confirm() {
|
|
93
|
+
onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
|
|
94
|
+
},
|
|
95
|
+
decline: function decline() {
|
|
96
|
+
//? closeModal используется для ESC и оверлея, давно хотелось иметь возможность разделить
|
|
97
|
+
//? Теперь можно не передавать closeModal, а для cancel-кнопки передать отдельный обработчик
|
|
98
|
+
if (typeof onDecline === 'function') onDecline();else closeModal === null || closeModal === void 0 ? void 0 : closeModal();
|
|
99
|
+
},
|
|
100
|
+
pressEnter: function pressEnter(event) {
|
|
101
|
+
if (event.keyCode === KEY_CODE.ENTER && !event.repeat) handle.confirm();
|
|
102
|
+
},
|
|
103
|
+
pressEsc: function pressEsc() {
|
|
104
|
+
if (event.keyCode === KEY_CODE.ESC && !event.repeat) closeModal === null || closeModal === void 0 ? void 0 : closeModal();
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
(0, _react.useEffect)(function () {
|
|
108
|
+
if (submitOnEnter) document.addEventListener('keyup', handle.pressEnter);
|
|
109
|
+
if (closeOnEsc) document.addEventListener('keyup', handle.pressEsc);
|
|
110
|
+
return function () {
|
|
111
|
+
document.removeEventListener('keyup', handle.pressEnter);
|
|
112
|
+
document.removeEventListener('keyup', handle.pressEsc);
|
|
113
|
+
};
|
|
114
|
+
}, [submitOnEnter, closeOnEsc]);
|
|
115
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
116
|
+
style: {
|
|
117
|
+
zIndex: zIndex
|
|
118
|
+
},
|
|
119
|
+
"data-testid": testId,
|
|
120
|
+
className: "modal-box j5"
|
|
121
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
122
|
+
"data-testid": 'modal-closeOverlay',
|
|
123
|
+
className: isOpen ? 'modal-overlay' : 'hidden',
|
|
124
|
+
onClick: closeModal
|
|
125
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
126
|
+
style: {
|
|
127
|
+
width: size
|
|
128
|
+
},
|
|
129
|
+
className: (0, _classnames.default)(className, "".concat(isOpen ? 'modal' : 'hidden'))
|
|
130
|
+
}, !noHeader && /*#__PURE__*/_react.default.createElement(_ModalTitle.default, {
|
|
131
|
+
variant: variant,
|
|
132
|
+
isForced: forced,
|
|
133
|
+
onClose: handle.decline,
|
|
134
|
+
noHeaderCloseBtn: noHeaderCloseBtn
|
|
135
|
+
}, /*#__PURE__*/_react.default.createElement("span", null, renderModalTitle({
|
|
136
|
+
mode: mode,
|
|
137
|
+
title: title,
|
|
138
|
+
onlyTitle: onlyTitle
|
|
139
|
+
}))), /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, atributesForModalBody, {
|
|
140
|
+
className: (0, _classnames.default)('modal__body', {
|
|
141
|
+
'modal__body--no-footer': noFooter
|
|
142
|
+
})
|
|
143
|
+
}), children), !noFooter && /*#__PURE__*/_react.default.createElement(_ModalFooter.default, {
|
|
144
|
+
className: leftContentOfFooter ? 'modal__footer_with-left-content' : ''
|
|
145
|
+
}, leftContentOfFooter, /*#__PURE__*/_react.default.createElement("div", {
|
|
146
|
+
className: "modal__buttons-block"
|
|
147
|
+
}, !noCloseBtn && /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
148
|
+
testId: "modal",
|
|
149
|
+
className: (0, _classnames.default)(closeBtnClassName, btnClassNames),
|
|
150
|
+
variant: closeBtnVariant || 'dark-outline',
|
|
151
|
+
onClick: function onClick() {
|
|
152
|
+
return handle.decline();
|
|
153
|
+
},
|
|
154
|
+
label: closeBtnText || 'Cancel',
|
|
155
|
+
disabled: closeBtnDisable,
|
|
156
|
+
icon: closeBtnIcon,
|
|
157
|
+
isIconRight: isCloseBtnIconPositionRight,
|
|
158
|
+
tabIndex: 1
|
|
159
|
+
}), !noConfirmBtn && /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
160
|
+
testId: "modal",
|
|
161
|
+
onClick: function onClick() {
|
|
162
|
+
return handle.confirm();
|
|
163
|
+
},
|
|
164
|
+
label: confirmBtnLabel || (mode === null || mode === void 0 ? void 0 : mode[0].toUpperCase()) + (mode === null || mode === void 0 ? void 0 : mode.slice(1)) || 'Apply',
|
|
165
|
+
className: (0, _classnames.default)('ml5', confirmBtnClassName, btnClassNames),
|
|
166
|
+
variant: confirmBtnVariant,
|
|
167
|
+
disabled: confirmBtnDisable,
|
|
168
|
+
icon: confirmBtnIcon,
|
|
169
|
+
isIconRight: isConfirmBtnIconPositionRight
|
|
170
|
+
})))));
|
|
171
|
+
};
|
|
172
|
+
|
|
173
|
+
var _default = Modal;
|
|
174
|
+
exports.default = _default;
|