@tecsinapse/react-native-kit 1.20.0 → 1.21.0
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/CHANGELOG.md +8 -0
- package/dist/components/atoms/Avatar/Avatar.js +3 -1
- package/dist/components/atoms/Avatar/Avatar.js.map +1 -1
- package/dist/components/atoms/Avatar/index.js +9 -4
- package/dist/components/atoms/Avatar/index.js.map +1 -1
- package/dist/components/atoms/Badge/Badge.js +10 -7
- package/dist/components/atoms/Badge/Badge.js.map +1 -1
- package/dist/components/atoms/Badge/index.js +15 -5
- package/dist/components/atoms/Badge/index.js.map +1 -1
- package/dist/components/atoms/BottomNavigator/BottomNavigator.js +12 -9
- package/dist/components/atoms/BottomNavigator/BottomNavigator.js.map +1 -1
- package/dist/components/atoms/BottomNavigator/Item.js +10 -7
- package/dist/components/atoms/BottomNavigator/Item.js.map +1 -1
- package/dist/components/atoms/BottomNavigator/index.js +21 -7
- package/dist/components/atoms/BottomNavigator/index.js.map +1 -1
- package/dist/components/atoms/BottomNavigator/styled.js +63 -44
- package/dist/components/atoms/BottomNavigator/styled.js.map +1 -1
- package/dist/components/atoms/Button/Button.js +10 -7
- package/dist/components/atoms/Button/Button.js.map +1 -1
- package/dist/components/atoms/Button/States/Error.js +3 -1
- package/dist/components/atoms/Button/States/Error.js.map +1 -1
- package/dist/components/atoms/Button/States/Loading.js +3 -1
- package/dist/components/atoms/Button/States/Loading.js.map +1 -1
- package/dist/components/atoms/Button/States/Success.js +3 -1
- package/dist/components/atoms/Button/States/Success.js.map +1 -1
- package/dist/components/atoms/Button/States/index.js +21 -8
- package/dist/components/atoms/Button/States/index.js.map +1 -1
- package/dist/components/atoms/Button/index.js +33 -9
- package/dist/components/atoms/Button/index.js.map +1 -1
- package/dist/components/atoms/GroupButton/GroupButtonOption.js +3 -1
- package/dist/components/atoms/GroupButton/GroupButtonOption.js.map +1 -1
- package/dist/components/atoms/GroupButton/index.js +9 -4
- package/dist/components/atoms/GroupButton/index.js.map +1 -1
- package/dist/components/atoms/Header/Header.js +18 -15
- package/dist/components/atoms/Header/Header.js.map +1 -1
- package/dist/components/atoms/Header/index.js +15 -5
- package/dist/components/atoms/Header/index.js.map +1 -1
- package/dist/components/atoms/Header/styled.js +16 -16
- package/dist/components/atoms/Header/styled.js.map +1 -1
- package/dist/components/atoms/Input/Input.js +30 -26
- package/dist/components/atoms/Input/Input.js.map +1 -1
- package/dist/components/atoms/Input/index.js +15 -5
- package/dist/components/atoms/Input/index.js.map +1 -1
- package/dist/components/atoms/Input/styled.js +13 -8
- package/dist/components/atoms/Input/styled.js.map +1 -1
- package/dist/components/atoms/InputMask/InputMask.js +31 -27
- package/dist/components/atoms/InputMask/InputMask.js.map +1 -1
- package/dist/components/atoms/InputMask/index.js +15 -5
- package/dist/components/atoms/InputMask/index.js.map +1 -1
- package/dist/components/atoms/InputMask/styled.js +14 -11
- package/dist/components/atoms/InputMask/styled.js.map +1 -1
- package/dist/components/atoms/Modal/ModalGroupManager.js +8 -5
- package/dist/components/atoms/Modal/ModalGroupManager.js.map +1 -1
- package/dist/components/atoms/Modal/ModalLifecycleHandler.js +87 -72
- package/dist/components/atoms/Modal/ModalLifecycleHandler.js.map +1 -1
- package/dist/components/atoms/Modal/index.js +45 -8
- package/dist/components/atoms/Modal/index.js.map +1 -1
- package/dist/components/atoms/Modal/ui/BaseModalView.js +15 -12
- package/dist/components/atoms/Modal/ui/BaseModalView.js.map +1 -1
- package/dist/components/atoms/Modal/ui/styled.js +18 -20
- package/dist/components/atoms/Modal/ui/styled.js.map +1 -1
- package/dist/components/atoms/Modal/ui/types.js +3 -1
- package/dist/components/atoms/Modal/useLazyModalManager.js +4 -2
- package/dist/components/atoms/Modal/useLazyModalManager.js.map +1 -1
- package/dist/components/atoms/Modal/useModalManager.js +4 -2
- package/dist/components/atoms/Modal/useModalManager.js.map +1 -1
- package/dist/components/atoms/Modal/useModalRemoteControl.js +3 -1
- package/dist/components/atoms/Modal/useModalRemoteControl.js.map +1 -1
- package/dist/components/atoms/Skeleton/Pulse.js +16 -11
- package/dist/components/atoms/Skeleton/Pulse.js.map +1 -1
- package/dist/components/atoms/Skeleton/Skeleton.js +13 -10
- package/dist/components/atoms/Skeleton/Skeleton.js.map +1 -1
- package/dist/components/atoms/Skeleton/Wave.js +17 -12
- package/dist/components/atoms/Skeleton/Wave.js.map +1 -1
- package/dist/components/atoms/Skeleton/animation.js +3 -1
- package/dist/components/atoms/Skeleton/animation.js.map +1 -1
- package/dist/components/atoms/Skeleton/index.js +15 -5
- package/dist/components/atoms/Skeleton/index.js.map +1 -1
- package/dist/components/atoms/Skeleton/styled.js +25 -15
- package/dist/components/atoms/Skeleton/styled.js.map +1 -1
- package/dist/components/atoms/Skeleton/types.js +3 -1
- package/dist/components/atoms/SnappingSlider/SnappingSlider.js +11 -8
- package/dist/components/atoms/SnappingSlider/SnappingSlider.js.map +1 -1
- package/dist/components/atoms/SnappingSlider/index.js +15 -5
- package/dist/components/atoms/SnappingSlider/index.js.map +1 -1
- package/dist/components/atoms/Tag/Tag.js +8 -5
- package/dist/components/atoms/Tag/Tag.js.map +1 -1
- package/dist/components/atoms/Tag/index.js +15 -5
- package/dist/components/atoms/Tag/index.js.map +1 -1
- package/dist/components/atoms/Text/Text.js +8 -5
- package/dist/components/atoms/Text/Text.js.map +1 -1
- package/dist/components/atoms/Text/index.js +15 -5
- package/dist/components/atoms/Text/index.js.map +1 -1
- package/dist/components/atoms/Text/styled.js +16 -12
- package/dist/components/atoms/Text/styled.js.map +1 -1
- package/dist/components/atoms/TextArea/TextArea.js +30 -27
- package/dist/components/atoms/TextArea/TextArea.js.map +1 -1
- package/dist/components/atoms/TextArea/index.js +15 -5
- package/dist/components/atoms/TextArea/index.js.map +1 -1
- package/dist/components/atoms/TextArea/styled.js +3 -1
- package/dist/components/atoms/TextArea/styled.js.map +1 -1
- package/dist/components/molecules/Calendar/Calendar.js +9 -6
- package/dist/components/molecules/Calendar/Calendar.js.map +1 -1
- package/dist/components/molecules/Calendar/index.js +9 -4
- package/dist/components/molecules/Calendar/index.js.map +1 -1
- package/dist/components/molecules/DatePicker/DatePicker.js +16 -12
- package/dist/components/molecules/DatePicker/DatePicker.js.map +1 -1
- package/dist/components/molecules/DatePicker/index.js +15 -5
- package/dist/components/molecules/DatePicker/index.js.map +1 -1
- package/dist/components/molecules/DatePicker/styled.js +13 -6
- package/dist/components/molecules/DatePicker/styled.js.map +1 -1
- package/dist/components/molecules/DateTimePicker/DateTimePicker.js +14 -10
- package/dist/components/molecules/DateTimePicker/DateTimePicker.js.map +1 -1
- package/dist/components/molecules/DateTimePicker/index.js +15 -5
- package/dist/components/molecules/DateTimePicker/index.js.map +1 -1
- package/dist/components/molecules/DateTimeSelector/DateTimeSelector.js +9 -6
- package/dist/components/molecules/DateTimeSelector/DateTimeSelector.js.map +1 -1
- package/dist/components/molecules/DateTimeSelector/index.js +9 -4
- package/dist/components/molecules/DateTimeSelector/index.js.map +1 -1
- package/dist/components/molecules/Grid/Grid.js +19 -13
- package/dist/components/molecules/Grid/Grid.js.map +1 -1
- package/dist/components/molecules/Grid/Item/Item.js +28 -25
- package/dist/components/molecules/Grid/Item/Item.js.map +1 -1
- package/dist/components/molecules/Grid/Item/index.js +15 -5
- package/dist/components/molecules/Grid/Item/index.js.map +1 -1
- package/dist/components/molecules/Grid/index.js +15 -6
- package/dist/components/molecules/Grid/index.js.map +1 -1
- package/dist/components/molecules/IconTextButton/IconTextButton.js +13 -10
- package/dist/components/molecules/IconTextButton/IconTextButton.js.map +1 -1
- package/dist/components/molecules/IconTextButton/TextComponent.js +17 -12
- package/dist/components/molecules/IconTextButton/TextComponent.js.map +1 -1
- package/dist/components/molecules/IconTextButton/index.js +15 -5
- package/dist/components/molecules/IconTextButton/index.js.map +1 -1
- package/dist/components/molecules/IconTextButton/styled.js +31 -29
- package/dist/components/molecules/IconTextButton/styled.js.map +1 -1
- package/dist/components/molecules/InputPassword/InputPassword.js +8 -5
- package/dist/components/molecules/InputPassword/InputPassword.js.map +1 -1
- package/dist/components/molecules/InputPassword/index.js +15 -5
- package/dist/components/molecules/InputPassword/index.js.map +1 -1
- package/dist/components/molecules/LabeledSwitch/LabelComponent.js +16 -11
- package/dist/components/molecules/LabeledSwitch/LabelComponent.js.map +1 -1
- package/dist/components/molecules/LabeledSwitch/LabeledSwitch.js +14 -11
- package/dist/components/molecules/LabeledSwitch/LabeledSwitch.js.map +1 -1
- package/dist/components/molecules/LabeledSwitch/index.js +15 -5
- package/dist/components/molecules/LabeledSwitch/index.js.map +1 -1
- package/dist/components/molecules/LabeledSwitch/styled.js +15 -18
- package/dist/components/molecules/LabeledSwitch/styled.js.map +1 -1
- package/dist/components/molecules/Select/Modal.js +43 -36
- package/dist/components/molecules/Select/Modal.js.map +1 -1
- package/dist/components/molecules/Select/Select.js +36 -33
- package/dist/components/molecules/Select/Select.js.map +1 -1
- package/dist/components/molecules/Select/index.js +15 -5
- package/dist/components/molecules/Select/index.js.map +1 -1
- package/dist/components/molecules/Select/styled.js +77 -84
- package/dist/components/molecules/Select/styled.js.map +1 -1
- package/dist/components/molecules/Snackbar/Snackbar.js +12 -9
- package/dist/components/molecules/Snackbar/Snackbar.js.map +1 -1
- package/dist/components/molecules/Snackbar/index.js +15 -5
- package/dist/components/molecules/Snackbar/index.js.map +1 -1
- package/dist/components/molecules/Snackbar/styled.js +18 -9
- package/dist/components/molecules/Snackbar/styled.js.map +1 -1
- package/dist/index.js +321 -79
- package/dist/index.js.map +1 -1
- package/dist/utils/date.js +3 -1
- package/dist/utils/date.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalGroupManager.js","names":["modalLifecycle","createModalLifecycleHandler","ModalGroupManager","children","others","attach","useState","_render","render","hasModals","length"],"sources":["../../../../src/components/atoms/Modal/ModalGroupManager.tsx"],"sourcesContent":["import React, { FC, ReactElement, useState } from 'react';\nimport { Modal as RNModal, ModalProps } from 'react-native';\nimport { createModalLifecycleHandler } from './ModalLifecycleHandler';\nimport { IBaseModal } from './ui/types';\n\nexport const modalLifecycle = createModalLifecycleHandler();\n\n/**\n * It's responsable for rendering all the modal components.\n *\n * @param param0\n * @returns\n */\nexport const ModalGroupManager: FC<ModalProps> = ({ children, ...others }) => {\n modalLifecycle.attach(useState<ReactElement<IBaseModal>[]>([]));\n const _render = modalLifecycle.render();\n const hasModals = _render.length > 0;\n\n return (\n <>\n {children}\n <RNModal\n transparent\n statusBarTranslucent\n animationType=\"none\"\n visible={hasModals}\n {...others}\n >\n {_render}\n </RNModal>\n </>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ModalGroupManager.js","names":["modalLifecycle","createModalLifecycleHandler","ModalGroupManager","children","others","attach","useState","_render","render","hasModals","length"],"sources":["../../../../src/components/atoms/Modal/ModalGroupManager.tsx"],"sourcesContent":["import React, { FC, ReactElement, useState } from 'react';\nimport { Modal as RNModal, ModalProps } from 'react-native';\nimport { createModalLifecycleHandler } from './ModalLifecycleHandler';\nimport { IBaseModal } from './ui/types';\n\nexport const modalLifecycle = createModalLifecycleHandler();\n\n/**\n * It's responsable for rendering all the modal components.\n *\n * @param param0\n * @returns\n */\nexport const ModalGroupManager: FC<ModalProps> = ({ children, ...others }) => {\n modalLifecycle.attach(useState<ReactElement<IBaseModal>[]>([]));\n const _render = modalLifecycle.render();\n const hasModals = _render.length > 0;\n\n return (\n <>\n {children}\n <RNModal\n transparent\n statusBarTranslucent\n animationType=\"none\"\n visible={hasModals}\n {...others}\n >\n {_render}\n </RNModal>\n </>\n );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAGO,MAAMA,cAAc,GAAG,IAAAC,kDAAA,GAAvB;;;AAQA,MAAMC,iBAAiC,GAAG,QAA6B;EAAA,IAA5B;IAAEC,QAAF;IAAY,GAAGC;EAAf,CAA4B;EAC5EJ,cAAc,CAACK,MAAf,CAAsB,IAAAC,eAAA,EAAqC,EAArC,CAAtB;;EACA,MAAMC,OAAO,GAAGP,cAAc,CAACQ,MAAf,EAAhB;;EACA,MAAMC,SAAS,GAAGF,OAAO,CAACG,MAAR,GAAiB,CAAnC;EAEA,OACE,4DACGP,QADH,EAEE,6BAAC,kBAAD;IACE,WAAW,MADb;IAEE,oBAAoB,MAFtB;IAGE,aAAa,EAAC,MAHhB;IAIE,OAAO,EAAEM;EAJX,GAKML,MALN,GAOGG,OAPH,CAFF,CADF;AAcD,CAnBM"}
|
|
@@ -1,96 +1,111 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
exports
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
4
6
|
exports.createModalLifecycleHandler = exports.ModalLifecycleHandler = void 0;
|
|
5
7
|
|
|
6
8
|
var _react = _interopRequireDefault(require("react"));
|
|
7
9
|
|
|
8
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
11
|
|
|
12
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
13
|
+
|
|
10
14
|
class ModalLifecycleHandler {
|
|
11
15
|
constructor() {
|
|
12
|
-
this
|
|
13
|
-
|
|
14
|
-
|
|
16
|
+
_defineProperty(this, "attach", state => {
|
|
17
|
+
this.state = state;
|
|
18
|
+
});
|
|
15
19
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
20
|
+
_defineProperty(this, "update", () => {
|
|
21
|
+
requestAnimationFrame(() => {
|
|
22
|
+
const nodes = Array.from(this.nodeGroup.values()).filter(node => node.visible || !!node.lastVisualization).sort((nodeA, nodeB) => {
|
|
23
|
+
var _nodeA$lastVisualizat, _nodeB$lastVisualizat;
|
|
24
|
+
|
|
25
|
+
return (((_nodeA$lastVisualizat = nodeA.lastVisualization) === null || _nodeA$lastVisualizat === void 0 ? void 0 : _nodeA$lastVisualizat.getTime()) || 0) - (((_nodeB$lastVisualizat = nodeB.lastVisualization) === null || _nodeB$lastVisualizat === void 0 ? void 0 : _nodeB$lastVisualizat.getTime()) || 0);
|
|
26
|
+
}).map((node, index, filteredNodes) => {
|
|
27
|
+
const modalElement = node.modal();
|
|
28
|
+
const {
|
|
29
|
+
props
|
|
30
|
+
} = modalElement;
|
|
31
|
+
return _react.default.cloneElement(modalElement, { ...props,
|
|
32
|
+
key: node.id,
|
|
33
|
+
visible: node.visible,
|
|
34
|
+
isLastShown: filteredNodes.length - 1 === index,
|
|
35
|
+
close: () => this.close(node.id),
|
|
36
|
+
onClose: () => {
|
|
37
|
+
var _props$onClose;
|
|
38
|
+
|
|
39
|
+
this.remove(node.id);
|
|
40
|
+
(_props$onClose = props.onClose) === null || _props$onClose === void 0 ? void 0 : _props$onClose.call(props);
|
|
41
|
+
}
|
|
42
|
+
});
|
|
39
43
|
});
|
|
44
|
+
const [, updateState] = this.state || [];
|
|
45
|
+
updateState === null || updateState === void 0 ? void 0 : updateState(nodes);
|
|
40
46
|
});
|
|
41
|
-
const [, updateState] = this.state || [];
|
|
42
|
-
updateState == null ? void 0 : updateState(nodes);
|
|
43
47
|
});
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
48
|
+
|
|
49
|
+
_defineProperty(this, "render", () => {
|
|
50
|
+
const [modals] = this.state || [];
|
|
51
|
+
return modals || [];
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
_defineProperty(this, "sync", (id, modal) => {
|
|
55
|
+
if (this.nodeGroup.has(id)) {
|
|
56
|
+
const savedNode = this.findNode(id);
|
|
57
|
+
savedNode && this.nodeGroup.set(id, { ...savedNode,
|
|
58
|
+
modal
|
|
59
|
+
});
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
this.nodeGroup.set(id, {
|
|
64
|
+
id,
|
|
53
65
|
modal
|
|
54
66
|
});
|
|
55
|
-
|
|
56
|
-
|
|
67
|
+
});
|
|
68
|
+
|
|
69
|
+
_defineProperty(this, "destroy", id => {
|
|
70
|
+
this.nodeGroup.delete(id);
|
|
71
|
+
this.update();
|
|
72
|
+
});
|
|
57
73
|
|
|
58
|
-
this
|
|
59
|
-
id
|
|
60
|
-
|
|
74
|
+
_defineProperty(this, "remove", id => {
|
|
75
|
+
const savedNode = this.findNode(id);
|
|
76
|
+
savedNode && this.nodeGroup.set(id, { ...savedNode,
|
|
77
|
+
lastVisualization: undefined
|
|
78
|
+
});
|
|
79
|
+
this.update();
|
|
61
80
|
});
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
remove = id => {
|
|
68
|
-
const savedNode = this.findNode(id);
|
|
69
|
-
savedNode && this.nodeGroup.set(id, { ...savedNode,
|
|
70
|
-
lastVisualization: undefined
|
|
81
|
+
|
|
82
|
+
_defineProperty(this, "findNode", id => {
|
|
83
|
+
const node = this.nodeGroup.get(id);
|
|
84
|
+
!node && console.warn("No modal was found with the id \"".concat(id, "\""));
|
|
85
|
+
return node;
|
|
71
86
|
});
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
const savedNode = this.findNode(id);
|
|
81
|
-
savedNode && this.nodeGroup.set(id, { ...savedNode,
|
|
82
|
-
visible: true,
|
|
83
|
-
lastVisualization: new Date()
|
|
87
|
+
|
|
88
|
+
_defineProperty(this, "show", id => {
|
|
89
|
+
const savedNode = this.findNode(id);
|
|
90
|
+
savedNode && this.nodeGroup.set(id, { ...savedNode,
|
|
91
|
+
visible: true,
|
|
92
|
+
lastVisualization: new Date()
|
|
93
|
+
});
|
|
94
|
+
this.update();
|
|
84
95
|
});
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
96
|
+
|
|
97
|
+
_defineProperty(this, "close", id => {
|
|
98
|
+
const savedNode = this.findNode(id);
|
|
99
|
+
savedNode && this.nodeGroup.set(id, { ...savedNode,
|
|
100
|
+
visible: false
|
|
101
|
+
});
|
|
102
|
+
this.update();
|
|
91
103
|
});
|
|
92
|
-
|
|
93
|
-
|
|
104
|
+
|
|
105
|
+
this.nodeGroup = new Map();
|
|
106
|
+
this.state = undefined;
|
|
107
|
+
}
|
|
108
|
+
|
|
94
109
|
}
|
|
95
110
|
|
|
96
111
|
exports.ModalLifecycleHandler = ModalLifecycleHandler;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalLifecycleHandler.js","names":["ModalLifecycleHandler","constructor","
|
|
1
|
+
{"version":3,"file":"ModalLifecycleHandler.js","names":["ModalLifecycleHandler","constructor","state","requestAnimationFrame","nodes","Array","from","nodeGroup","values","filter","node","visible","lastVisualization","sort","nodeA","nodeB","getTime","map","index","filteredNodes","modalElement","modal","props","React","cloneElement","key","id","isLastShown","length","close","onClose","remove","updateState","modals","has","savedNode","findNode","set","delete","update","undefined","get","console","warn","Date","Map","createModalLifecycleHandler"],"sources":["../../../../src/components/atoms/Modal/ModalLifecycleHandler.ts"],"sourcesContent":["import React, { Dispatch, ReactElement } from 'react';\nimport { IBaseModal } from './ui/types';\n\n/**\n * It Represents a node (usually a modal component) in the modal's lifecycle handler.\n */\ninterface ModalNode {\n id: string;\n visible?: boolean;\n lastVisualization?: Date;\n modal: () => ReactElement<IBaseModal>;\n}\n\n/**\n * Manage all modal's lifecycle.\n */\nexport class ModalLifecycleHandler {\n nodeGroup: Map<string, ModalNode>;\n state:\n | [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]\n | undefined;\n\n constructor() {\n this.nodeGroup = new Map();\n this.state = undefined;\n }\n\n /**\n * Holds the ModalGroupManager state.\n *\n * @param state\n */\n public attach = (\n state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]\n ) => {\n this.state = state;\n };\n\n /**\n * Updates all the modal components.\n */\n public update = () => {\n requestAnimationFrame(() => {\n const nodes = Array.from(this.nodeGroup.values())\n .filter(node => node.visible || !!node.lastVisualization)\n .sort(\n (nodeA, nodeB) =>\n (nodeA.lastVisualization?.getTime() || 0) -\n (nodeB.lastVisualization?.getTime() || 0)\n )\n .map((node, index, filteredNodes) => {\n const modalElement = node.modal();\n const { props } = modalElement;\n return React.cloneElement(modalElement, {\n ...props,\n key: node.id,\n visible: node.visible,\n isLastShown: filteredNodes.length - 1 === index,\n close: () => this.close(node.id),\n onClose: () => {\n this.remove(node.id);\n props.onClose?.();\n },\n });\n });\n\n const [, updateState] = this.state || [];\n updateState?.(nodes);\n });\n };\n\n /**\n * Renders all selected modals.\n *\n * @returns\n */\n public render = (): ReactElement<IBaseModal>[] => {\n const [modals] = this.state || [];\n return modals || [];\n };\n\n /**\n * Tells to the lifecycle handler that a modal component needs to be handled.\n *\n * @param id\n * @param modal\n * @returns\n */\n public sync = (id: string, modal: () => ReactElement<IBaseModal>) => {\n if (this.nodeGroup.has(id)) {\n const savedNode = this.findNode(id);\n savedNode && this.nodeGroup.set(id, { ...savedNode, modal });\n return;\n }\n this.nodeGroup.set(id, { id, modal });\n };\n\n /**\n * Destroy a modal from the lifecycle handler.\n *\n * @param id\n */\n public destroy = (id: string) => {\n this.nodeGroup.delete(id);\n this.update();\n };\n\n /**\n * Removes a modal from the rendering stack. It tells to the lifecycle handler that a modal\n * component is no longer used by the application.\n *\n * @param id\n */\n private remove = (id: string) => {\n const savedNode = this.findNode(id);\n savedNode &&\n this.nodeGroup.set(id, { ...savedNode, lastVisualization: undefined });\n this.update();\n };\n\n /**\n * Find a modal node by id.\n *\n * @param id\n */\n private findNode = (id: string) => {\n const node = this.nodeGroup.get(id);\n !node && console.warn(`No modal was found with the id \"${id}\"`);\n return node;\n };\n\n /**\n * Makes a modal appears.\n *\n * @param id\n */\n public show = (id: string) => {\n const savedNode = this.findNode(id);\n savedNode &&\n this.nodeGroup.set(id, {\n ...savedNode,\n visible: true,\n lastVisualization: new Date(),\n });\n this.update();\n };\n\n /**\n * Makes a modal disappears.\n *\n * @param id\n */\n public close = (id: string) => {\n const savedNode = this.findNode(id);\n savedNode && this.nodeGroup.set(id, { ...savedNode, visible: false });\n this.update();\n };\n}\n\n/**\n * Creates a new ModalLifecycleHandlere instance.\n *\n * @returns\n */\nexport const createModalLifecycleHandler = () => {\n return new ModalLifecycleHandler();\n};\n"],"mappings":"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"}
|
|
@@ -1,13 +1,20 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
exports
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
4
6
|
|
|
5
7
|
var _ModalGroupManager = require("./ModalGroupManager");
|
|
6
8
|
|
|
7
9
|
Object.keys(_ModalGroupManager).forEach(function (key) {
|
|
8
10
|
if (key === "default" || key === "__esModule") return;
|
|
9
11
|
if (key in exports && exports[key] === _ModalGroupManager[key]) return;
|
|
10
|
-
exports
|
|
12
|
+
Object.defineProperty(exports, key, {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return _ModalGroupManager[key];
|
|
16
|
+
}
|
|
17
|
+
});
|
|
11
18
|
});
|
|
12
19
|
|
|
13
20
|
var _ModalLifecycleHandler = require("./ModalLifecycleHandler");
|
|
@@ -15,7 +22,12 @@ var _ModalLifecycleHandler = require("./ModalLifecycleHandler");
|
|
|
15
22
|
Object.keys(_ModalLifecycleHandler).forEach(function (key) {
|
|
16
23
|
if (key === "default" || key === "__esModule") return;
|
|
17
24
|
if (key in exports && exports[key] === _ModalLifecycleHandler[key]) return;
|
|
18
|
-
exports
|
|
25
|
+
Object.defineProperty(exports, key, {
|
|
26
|
+
enumerable: true,
|
|
27
|
+
get: function () {
|
|
28
|
+
return _ModalLifecycleHandler[key];
|
|
29
|
+
}
|
|
30
|
+
});
|
|
19
31
|
});
|
|
20
32
|
|
|
21
33
|
var _BaseModalView = require("./ui/BaseModalView");
|
|
@@ -23,7 +35,12 @@ var _BaseModalView = require("./ui/BaseModalView");
|
|
|
23
35
|
Object.keys(_BaseModalView).forEach(function (key) {
|
|
24
36
|
if (key === "default" || key === "__esModule") return;
|
|
25
37
|
if (key in exports && exports[key] === _BaseModalView[key]) return;
|
|
26
|
-
exports
|
|
38
|
+
Object.defineProperty(exports, key, {
|
|
39
|
+
enumerable: true,
|
|
40
|
+
get: function () {
|
|
41
|
+
return _BaseModalView[key];
|
|
42
|
+
}
|
|
43
|
+
});
|
|
27
44
|
});
|
|
28
45
|
|
|
29
46
|
var _types = require("./ui/types");
|
|
@@ -31,7 +48,12 @@ var _types = require("./ui/types");
|
|
|
31
48
|
Object.keys(_types).forEach(function (key) {
|
|
32
49
|
if (key === "default" || key === "__esModule") return;
|
|
33
50
|
if (key in exports && exports[key] === _types[key]) return;
|
|
34
|
-
exports
|
|
51
|
+
Object.defineProperty(exports, key, {
|
|
52
|
+
enumerable: true,
|
|
53
|
+
get: function () {
|
|
54
|
+
return _types[key];
|
|
55
|
+
}
|
|
56
|
+
});
|
|
35
57
|
});
|
|
36
58
|
|
|
37
59
|
var _useModalManager = require("./useModalManager");
|
|
@@ -39,7 +61,12 @@ var _useModalManager = require("./useModalManager");
|
|
|
39
61
|
Object.keys(_useModalManager).forEach(function (key) {
|
|
40
62
|
if (key === "default" || key === "__esModule") return;
|
|
41
63
|
if (key in exports && exports[key] === _useModalManager[key]) return;
|
|
42
|
-
exports
|
|
64
|
+
Object.defineProperty(exports, key, {
|
|
65
|
+
enumerable: true,
|
|
66
|
+
get: function () {
|
|
67
|
+
return _useModalManager[key];
|
|
68
|
+
}
|
|
69
|
+
});
|
|
43
70
|
});
|
|
44
71
|
|
|
45
72
|
var _useLazyModalManager = require("./useLazyModalManager");
|
|
@@ -47,7 +74,12 @@ var _useLazyModalManager = require("./useLazyModalManager");
|
|
|
47
74
|
Object.keys(_useLazyModalManager).forEach(function (key) {
|
|
48
75
|
if (key === "default" || key === "__esModule") return;
|
|
49
76
|
if (key in exports && exports[key] === _useLazyModalManager[key]) return;
|
|
50
|
-
exports
|
|
77
|
+
Object.defineProperty(exports, key, {
|
|
78
|
+
enumerable: true,
|
|
79
|
+
get: function () {
|
|
80
|
+
return _useLazyModalManager[key];
|
|
81
|
+
}
|
|
82
|
+
});
|
|
51
83
|
});
|
|
52
84
|
|
|
53
85
|
var _useModalRemoteControl = require("./useModalRemoteControl");
|
|
@@ -55,6 +87,11 @@ var _useModalRemoteControl = require("./useModalRemoteControl");
|
|
|
55
87
|
Object.keys(_useModalRemoteControl).forEach(function (key) {
|
|
56
88
|
if (key === "default" || key === "__esModule") return;
|
|
57
89
|
if (key in exports && exports[key] === _useModalRemoteControl[key]) return;
|
|
58
|
-
exports
|
|
90
|
+
Object.defineProperty(exports, key, {
|
|
91
|
+
enumerable: true,
|
|
92
|
+
get: function () {
|
|
93
|
+
return _useModalRemoteControl[key];
|
|
94
|
+
}
|
|
95
|
+
});
|
|
59
96
|
});
|
|
60
97
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/atoms/Modal/index.ts"],"sourcesContent":["export * from './ModalGroupManager';\nexport * from './ModalLifecycleHandler';\nexport * from './ui/BaseModalView';\nexport * from './ui/types';\nexport * from './useModalManager';\nexport * from './useLazyModalManager';\nexport * from './useModalRemoteControl';\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/atoms/Modal/index.ts"],"sourcesContent":["export * from './ModalGroupManager';\nexport * from './ModalLifecycleHandler';\nexport * from './ui/BaseModalView';\nexport * from './ui/types';\nexport * from './useModalManager';\nexport * from './useLazyModalManager';\nexport * from './useModalRemoteControl';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
exports
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
4
6
|
exports.ModalView = void 0;
|
|
5
7
|
|
|
6
8
|
var _reactCore = require("@tecsinapse/react-core");
|
|
@@ -22,16 +24,17 @@ const INTERPOLATION_STEPS = 10;
|
|
|
22
24
|
const INTERPOLATION_DURATION = 195;
|
|
23
25
|
const OPACITY_DURATION = 25;
|
|
24
26
|
|
|
25
|
-
const ModalView =
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
27
|
+
const ModalView = _ref => {
|
|
28
|
+
let {
|
|
29
|
+
children,
|
|
30
|
+
visible,
|
|
31
|
+
BoxComponent = _reactCore.BoxContent,
|
|
32
|
+
frozen,
|
|
33
|
+
isLastShown,
|
|
34
|
+
showCloseBar = true,
|
|
35
|
+
close,
|
|
36
|
+
onClose
|
|
37
|
+
} = _ref;
|
|
35
38
|
const {
|
|
36
39
|
bottom
|
|
37
40
|
} = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
|
|
@@ -91,7 +94,7 @@ const ModalView = ({
|
|
|
91
94
|
}, [onClose]);
|
|
92
95
|
const backgroundInterpolation = backgroundCarrier.interpolate({
|
|
93
96
|
inputRange: [0, INTERPOLATION_STEPS],
|
|
94
|
-
outputRange: ['rgba(0, 0, 0, 0)',
|
|
97
|
+
outputRange: ['rgba(0, 0, 0, 0)', "rgba(0, 0, 0, ".concat(BACKDROP_ALPHA, ")")]
|
|
95
98
|
});
|
|
96
99
|
const handleBoxLayoutChanges = (0, _react.useCallback)(lce => {
|
|
97
100
|
const boxHeightEvent = lce.nativeEvent.layout.height;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseModalView.js","names":["BACKDROP_ALPHA","INTERPOLATION_STEPS","INTERPOLATION_DURATION","OPACITY_DURATION","ModalView","children","visible","BoxComponent","BoxContent","frozen","isLastShown","showCloseBar","close","onClose","bottom","useSafeAreaInsets","ready","setReady","useState","keyboardOpened","setKeyboardOpened","boxHeight","setBoxHeight","backgroundCarrier","useRef","Animated","Value","current","translationCarrier","opacityCarrier","offset","getKeyboardHeight","keyboard","wHeight","Math","ceil","Dimensions","get","height","sHeight","StatusBar","currentHeight","show","useCallback","sequence","timing","toValue","duration","easing","Easing","out","circle","useNativeDriver","start","hide","to","parallel","backgroundInterpolation","interpolate","inputRange","outputRange","handleBoxLayoutChanges","lce","boxHeightEvent","nativeEvent","layout","setValue","useEffect","requestAnimationFrame","Keyboard","dismiss","showEvent","addListener","e","endCoordinates","hideEvent","remove","undefined","backgroundColor","paddingBottom","opacity","transform","translateY"],"sources":["../../../../../src/components/atoms/Modal/ui/BaseModalView.tsx"],"sourcesContent":["import { BoxContent } from '@tecsinapse/react-core';\nimport React, { FC, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n Animated,\n Dimensions,\n Easing,\n Keyboard,\n LayoutChangeEvent,\n Pressable,\n StatusBar,\n} from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { BackDropView, CloseBar, StyledPressableBackDrop } from './styled';\nimport { IBaseModal } from './types';\n\nconst BACKDROP_ALPHA = 0.65;\nconst INTERPOLATION_STEPS = 10;\nconst INTERPOLATION_DURATION = 195; //ms\nconst OPACITY_DURATION = 25; //ms\n\nexport const ModalView: FC<IBaseModal> = ({\n children,\n visible,\n BoxComponent = BoxContent,\n frozen,\n isLastShown,\n showCloseBar = true,\n close,\n onClose,\n}) => {\n const { bottom } = useSafeAreaInsets();\n const [ready, setReady] = useState(false);\n const [keyboardOpened, setKeyboardOpened] = useState(0);\n const [boxHeight, setBoxHeight] = useState(0);\n const backgroundCarrier = useRef(new Animated.Value(0)).current;\n const translationCarrier = useRef(new Animated.Value(0)).current;\n const opacityCarrier = useRef(new Animated.Value(0)).current;\n const offset = isLastShown && keyboardOpened > 0 ? 0 : bottom;\n\n const getKeyboardHeight = (keyboard: number) => {\n if (keyboard === 0) return 0;\n\n const wHeight = Math.ceil(Dimensions.get('window').height);\n const sHeight = Math.ceil(Dimensions.get('screen').height);\n if (wHeight !== sHeight) {\n return keyboard + (sHeight - wHeight - (StatusBar.currentHeight || 0));\n }\n return keyboard;\n };\n\n const show = useCallback(() => {\n Animated.sequence([\n Animated.timing(backgroundCarrier, {\n toValue: INTERPOLATION_STEPS,\n duration: INTERPOLATION_DURATION,\n easing: Easing.out(Easing.circle),\n useNativeDriver: false,\n }),\n Animated.timing(opacityCarrier, {\n toValue: 1,\n duration: OPACITY_DURATION,\n useNativeDriver: true,\n }),\n Animated.timing(translationCarrier, {\n toValue: 0,\n duration: INTERPOLATION_DURATION,\n easing: Easing.out(Easing.circle),\n useNativeDriver: true,\n }),\n ]).start();\n }, []);\n\n const hide = useCallback(\n (to: number) => {\n Animated.sequence([\n Animated.parallel([\n Animated.timing(translationCarrier, {\n toValue: to,\n duration: INTERPOLATION_DURATION,\n easing: Easing.out(Easing.circle),\n useNativeDriver: true,\n }),\n Animated.timing(opacityCarrier, {\n toValue: 0,\n duration: INTERPOLATION_DURATION,\n useNativeDriver: true,\n }),\n ]),\n Animated.timing(backgroundCarrier, {\n toValue: 0,\n duration: INTERPOLATION_DURATION,\n easing: Easing.out(Easing.circle),\n useNativeDriver: false,\n }),\n ]).start(onClose);\n },\n [onClose]\n );\n\n const backgroundInterpolation = backgroundCarrier.interpolate({\n inputRange: [0, INTERPOLATION_STEPS],\n outputRange: ['rgba(0, 0, 0, 0)', `rgba(0, 0, 0, ${BACKDROP_ALPHA})`],\n });\n\n const handleBoxLayoutChanges = useCallback(\n (lce: LayoutChangeEvent) => {\n const boxHeightEvent = lce.nativeEvent.layout.height;\n setBoxHeight(boxHeightEvent);\n\n if (visible && !ready) {\n translationCarrier.setValue(boxHeightEvent);\n setReady(true);\n }\n },\n [show, ready, visible, setReady]\n );\n\n useEffect(() => {\n if (visible && ready) requestAnimationFrame(() => show());\n if (!visible && !ready) {\n Keyboard.dismiss();\n requestAnimationFrame(() => hide(boxHeight));\n }\n if (!visible && ready) setReady(false);\n }, [ready, visible]);\n\n useEffect(() => {\n const showEvent = Keyboard.addListener('keyboardDidShow', e =>\n setKeyboardOpened(e.endCoordinates.height)\n );\n const hideEvent = Keyboard.addListener('keyboardDidHide', () =>\n setKeyboardOpened(0)\n );\n return () => {\n showEvent.remove();\n hideEvent.remove();\n };\n }, []);\n\n return (\n <StyledPressableBackDrop onPress={!frozen ? close : undefined}>\n <BackDropView style={{ backgroundColor: backgroundInterpolation }}>\n <Animated.View\n style={{\n paddingBottom: isLastShown ? getKeyboardHeight(keyboardOpened) : 0,\n opacity: opacityCarrier,\n transform: [{ translateY: translationCarrier }],\n }}\n >\n <Pressable>\n <BoxComponent\n onLayout={handleBoxLayoutChanges}\n style={{ paddingBottom: offset }}\n variant=\"bottom\"\n >\n {showCloseBar && <CloseBar />}\n {children}\n </BoxComponent>\n </Pressable>\n </Animated.View>\n </BackDropView>\n </StyledPressableBackDrop>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BaseModalView.js","names":["BACKDROP_ALPHA","INTERPOLATION_STEPS","INTERPOLATION_DURATION","OPACITY_DURATION","ModalView","children","visible","BoxComponent","BoxContent","frozen","isLastShown","showCloseBar","close","onClose","bottom","useSafeAreaInsets","ready","setReady","useState","keyboardOpened","setKeyboardOpened","boxHeight","setBoxHeight","backgroundCarrier","useRef","Animated","Value","current","translationCarrier","opacityCarrier","offset","getKeyboardHeight","keyboard","wHeight","Math","ceil","Dimensions","get","height","sHeight","StatusBar","currentHeight","show","useCallback","sequence","timing","toValue","duration","easing","Easing","out","circle","useNativeDriver","start","hide","to","parallel","backgroundInterpolation","interpolate","inputRange","outputRange","handleBoxLayoutChanges","lce","boxHeightEvent","nativeEvent","layout","setValue","useEffect","requestAnimationFrame","Keyboard","dismiss","showEvent","addListener","e","endCoordinates","hideEvent","remove","undefined","backgroundColor","paddingBottom","opacity","transform","translateY"],"sources":["../../../../../src/components/atoms/Modal/ui/BaseModalView.tsx"],"sourcesContent":["import { BoxContent } from '@tecsinapse/react-core';\nimport React, { FC, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n Animated,\n Dimensions,\n Easing,\n Keyboard,\n LayoutChangeEvent,\n Pressable,\n StatusBar,\n} from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { BackDropView, CloseBar, StyledPressableBackDrop } from './styled';\nimport { IBaseModal } from './types';\n\nconst BACKDROP_ALPHA = 0.65;\nconst INTERPOLATION_STEPS = 10;\nconst INTERPOLATION_DURATION = 195; //ms\nconst OPACITY_DURATION = 25; //ms\n\nexport const ModalView: FC<IBaseModal> = ({\n children,\n visible,\n BoxComponent = BoxContent,\n frozen,\n isLastShown,\n showCloseBar = true,\n close,\n onClose,\n}) => {\n const { bottom } = useSafeAreaInsets();\n const [ready, setReady] = useState(false);\n const [keyboardOpened, setKeyboardOpened] = useState(0);\n const [boxHeight, setBoxHeight] = useState(0);\n const backgroundCarrier = useRef(new Animated.Value(0)).current;\n const translationCarrier = useRef(new Animated.Value(0)).current;\n const opacityCarrier = useRef(new Animated.Value(0)).current;\n const offset = isLastShown && keyboardOpened > 0 ? 0 : bottom;\n\n const getKeyboardHeight = (keyboard: number) => {\n if (keyboard === 0) return 0;\n\n const wHeight = Math.ceil(Dimensions.get('window').height);\n const sHeight = Math.ceil(Dimensions.get('screen').height);\n if (wHeight !== sHeight) {\n return keyboard + (sHeight - wHeight - (StatusBar.currentHeight || 0));\n }\n return keyboard;\n };\n\n const show = useCallback(() => {\n Animated.sequence([\n Animated.timing(backgroundCarrier, {\n toValue: INTERPOLATION_STEPS,\n duration: INTERPOLATION_DURATION,\n easing: Easing.out(Easing.circle),\n useNativeDriver: false,\n }),\n Animated.timing(opacityCarrier, {\n toValue: 1,\n duration: OPACITY_DURATION,\n useNativeDriver: true,\n }),\n Animated.timing(translationCarrier, {\n toValue: 0,\n duration: INTERPOLATION_DURATION,\n easing: Easing.out(Easing.circle),\n useNativeDriver: true,\n }),\n ]).start();\n }, []);\n\n const hide = useCallback(\n (to: number) => {\n Animated.sequence([\n Animated.parallel([\n Animated.timing(translationCarrier, {\n toValue: to,\n duration: INTERPOLATION_DURATION,\n easing: Easing.out(Easing.circle),\n useNativeDriver: true,\n }),\n Animated.timing(opacityCarrier, {\n toValue: 0,\n duration: INTERPOLATION_DURATION,\n useNativeDriver: true,\n }),\n ]),\n Animated.timing(backgroundCarrier, {\n toValue: 0,\n duration: INTERPOLATION_DURATION,\n easing: Easing.out(Easing.circle),\n useNativeDriver: false,\n }),\n ]).start(onClose);\n },\n [onClose]\n );\n\n const backgroundInterpolation = backgroundCarrier.interpolate({\n inputRange: [0, INTERPOLATION_STEPS],\n outputRange: ['rgba(0, 0, 0, 0)', `rgba(0, 0, 0, ${BACKDROP_ALPHA})`],\n });\n\n const handleBoxLayoutChanges = useCallback(\n (lce: LayoutChangeEvent) => {\n const boxHeightEvent = lce.nativeEvent.layout.height;\n setBoxHeight(boxHeightEvent);\n\n if (visible && !ready) {\n translationCarrier.setValue(boxHeightEvent);\n setReady(true);\n }\n },\n [show, ready, visible, setReady]\n );\n\n useEffect(() => {\n if (visible && ready) requestAnimationFrame(() => show());\n if (!visible && !ready) {\n Keyboard.dismiss();\n requestAnimationFrame(() => hide(boxHeight));\n }\n if (!visible && ready) setReady(false);\n }, [ready, visible]);\n\n useEffect(() => {\n const showEvent = Keyboard.addListener('keyboardDidShow', e =>\n setKeyboardOpened(e.endCoordinates.height)\n );\n const hideEvent = Keyboard.addListener('keyboardDidHide', () =>\n setKeyboardOpened(0)\n );\n return () => {\n showEvent.remove();\n hideEvent.remove();\n };\n }, []);\n\n return (\n <StyledPressableBackDrop onPress={!frozen ? close : undefined}>\n <BackDropView style={{ backgroundColor: backgroundInterpolation }}>\n <Animated.View\n style={{\n paddingBottom: isLastShown ? getKeyboardHeight(keyboardOpened) : 0,\n opacity: opacityCarrier,\n transform: [{ translateY: translationCarrier }],\n }}\n >\n <Pressable>\n <BoxComponent\n onLayout={handleBoxLayoutChanges}\n style={{ paddingBottom: offset }}\n variant=\"bottom\"\n >\n {showCloseBar && <CloseBar />}\n {children}\n </BoxComponent>\n </Pressable>\n </Animated.View>\n </BackDropView>\n </StyledPressableBackDrop>\n );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AASA;;AACA;;;;;;AAGA,MAAMA,cAAc,GAAG,IAAvB;AACA,MAAMC,mBAAmB,GAAG,EAA5B;AACA,MAAMC,sBAAsB,GAAG,GAA/B;AACA,MAAMC,gBAAgB,GAAG,EAAzB;;AAEO,MAAMC,SAAyB,GAAG,QASnC;EAAA,IAToC;IACxCC,QADwC;IAExCC,OAFwC;IAGxCC,YAAY,GAAGC,qBAHyB;IAIxCC,MAJwC;IAKxCC,WALwC;IAMxCC,YAAY,GAAG,IANyB;IAOxCC,KAPwC;IAQxCC;EARwC,CASpC;EACJ,MAAM;IAAEC;EAAF,IAAa,IAAAC,6CAAA,GAAnB;EACA,MAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,IAAAC,eAAA,EAAS,KAAT,CAA1B;EACA,MAAM,CAACC,cAAD,EAAiBC,iBAAjB,IAAsC,IAAAF,eAAA,EAAS,CAAT,CAA5C;EACA,MAAM,CAACG,SAAD,EAAYC,YAAZ,IAA4B,IAAAJ,eAAA,EAAS,CAAT,CAAlC;EACA,MAAMK,iBAAiB,GAAG,IAAAC,aAAA,EAAO,IAAIC,qBAAA,CAASC,KAAb,CAAmB,CAAnB,CAAP,EAA8BC,OAAxD;EACA,MAAMC,kBAAkB,GAAG,IAAAJ,aAAA,EAAO,IAAIC,qBAAA,CAASC,KAAb,CAAmB,CAAnB,CAAP,EAA8BC,OAAzD;EACA,MAAME,cAAc,GAAG,IAAAL,aAAA,EAAO,IAAIC,qBAAA,CAASC,KAAb,CAAmB,CAAnB,CAAP,EAA8BC,OAArD;EACA,MAAMG,MAAM,GAAGpB,WAAW,IAAIS,cAAc,GAAG,CAAhC,GAAoC,CAApC,GAAwCL,MAAvD;;EAEA,MAAMiB,iBAAiB,GAAIC,QAAD,IAAsB;IAC9C,IAAIA,QAAQ,KAAK,CAAjB,EAAoB,OAAO,CAAP;IAEpB,MAAMC,OAAO,GAAGC,IAAI,CAACC,IAAL,CAAUC,uBAAA,CAAWC,GAAX,CAAe,QAAf,EAAyBC,MAAnC,CAAhB;IACA,MAAMC,OAAO,GAAGL,IAAI,CAACC,IAAL,CAAUC,uBAAA,CAAWC,GAAX,CAAe,QAAf,EAAyBC,MAAnC,CAAhB;;IACA,IAAIL,OAAO,KAAKM,OAAhB,EAAyB;MACvB,OAAOP,QAAQ,IAAIO,OAAO,GAAGN,OAAV,IAAqBO,sBAAA,CAAUC,aAAV,IAA2B,CAAhD,CAAJ,CAAf;IACD;;IACD,OAAOT,QAAP;EACD,CATD;;EAWA,MAAMU,IAAI,GAAG,IAAAC,kBAAA,EAAY,MAAM;IAC7BlB,qBAAA,CAASmB,QAAT,CAAkB,CAChBnB,qBAAA,CAASoB,MAAT,CAAgBtB,iBAAhB,EAAmC;MACjCuB,OAAO,EAAE7C,mBADwB;MAEjC8C,QAAQ,EAAE7C,sBAFuB;MAGjC8C,MAAM,EAAEC,mBAAA,CAAOC,GAAP,CAAWD,mBAAA,CAAOE,MAAlB,CAHyB;MAIjCC,eAAe,EAAE;IAJgB,CAAnC,CADgB,EAOhB3B,qBAAA,CAASoB,MAAT,CAAgBhB,cAAhB,EAAgC;MAC9BiB,OAAO,EAAE,CADqB;MAE9BC,QAAQ,EAAE5C,gBAFoB;MAG9BiD,eAAe,EAAE;IAHa,CAAhC,CAPgB,EAYhB3B,qBAAA,CAASoB,MAAT,CAAgBjB,kBAAhB,EAAoC;MAClCkB,OAAO,EAAE,CADyB;MAElCC,QAAQ,EAAE7C,sBAFwB;MAGlC8C,MAAM,EAAEC,mBAAA,CAAOC,GAAP,CAAWD,mBAAA,CAAOE,MAAlB,CAH0B;MAIlCC,eAAe,EAAE;IAJiB,CAApC,CAZgB,CAAlB,EAkBGC,KAlBH;EAmBD,CApBY,EAoBV,EApBU,CAAb;EAsBA,MAAMC,IAAI,GAAG,IAAAX,kBAAA,EACVY,EAAD,IAAgB;IACd9B,qBAAA,CAASmB,QAAT,CAAkB,CAChBnB,qBAAA,CAAS+B,QAAT,CAAkB,CAChB/B,qBAAA,CAASoB,MAAT,CAAgBjB,kBAAhB,EAAoC;MAClCkB,OAAO,EAAES,EADyB;MAElCR,QAAQ,EAAE7C,sBAFwB;MAGlC8C,MAAM,EAAEC,mBAAA,CAAOC,GAAP,CAAWD,mBAAA,CAAOE,MAAlB,CAH0B;MAIlCC,eAAe,EAAE;IAJiB,CAApC,CADgB,EAOhB3B,qBAAA,CAASoB,MAAT,CAAgBhB,cAAhB,EAAgC;MAC9BiB,OAAO,EAAE,CADqB;MAE9BC,QAAQ,EAAE7C,sBAFoB;MAG9BkD,eAAe,EAAE;IAHa,CAAhC,CAPgB,CAAlB,CADgB,EAchB3B,qBAAA,CAASoB,MAAT,CAAgBtB,iBAAhB,EAAmC;MACjCuB,OAAO,EAAE,CADwB;MAEjCC,QAAQ,EAAE7C,sBAFuB;MAGjC8C,MAAM,EAAEC,mBAAA,CAAOC,GAAP,CAAWD,mBAAA,CAAOE,MAAlB,CAHyB;MAIjCC,eAAe,EAAE;IAJgB,CAAnC,CAdgB,CAAlB,EAoBGC,KApBH,CAoBSxC,OApBT;EAqBD,CAvBU,EAwBX,CAACA,OAAD,CAxBW,CAAb;EA2BA,MAAM4C,uBAAuB,GAAGlC,iBAAiB,CAACmC,WAAlB,CAA8B;IAC5DC,UAAU,EAAE,CAAC,CAAD,EAAI1D,mBAAJ,CADgD;IAE5D2D,WAAW,EAAE,CAAC,kBAAD,0BAAsC5D,cAAtC;EAF+C,CAA9B,CAAhC;EAKA,MAAM6D,sBAAsB,GAAG,IAAAlB,kBAAA,EAC5BmB,GAAD,IAA4B;IAC1B,MAAMC,cAAc,GAAGD,GAAG,CAACE,WAAJ,CAAgBC,MAAhB,CAAuB3B,MAA9C;IACAhB,YAAY,CAACyC,cAAD,CAAZ;;IAEA,IAAIzD,OAAO,IAAI,CAACU,KAAhB,EAAuB;MACrBY,kBAAkB,CAACsC,QAAnB,CAA4BH,cAA5B;MACA9C,QAAQ,CAAC,IAAD,CAAR;IACD;EACF,CAT4B,EAU7B,CAACyB,IAAD,EAAO1B,KAAP,EAAcV,OAAd,EAAuBW,QAAvB,CAV6B,CAA/B;EAaA,IAAAkD,gBAAA,EAAU,MAAM;IACd,IAAI7D,OAAO,IAAIU,KAAf,EAAsBoD,qBAAqB,CAAC,MAAM1B,IAAI,EAAX,CAArB;;IACtB,IAAI,CAACpC,OAAD,IAAY,CAACU,KAAjB,EAAwB;MACtBqD,qBAAA,CAASC,OAAT;;MACAF,qBAAqB,CAAC,MAAMd,IAAI,CAACjC,SAAD,CAAX,CAArB;IACD;;IACD,IAAI,CAACf,OAAD,IAAYU,KAAhB,EAAuBC,QAAQ,CAAC,KAAD,CAAR;EACxB,CAPD,EAOG,CAACD,KAAD,EAAQV,OAAR,CAPH;EASA,IAAA6D,gBAAA,EAAU,MAAM;IACd,MAAMI,SAAS,GAAGF,qBAAA,CAASG,WAAT,CAAqB,iBAArB,EAAwCC,CAAC,IACzDrD,iBAAiB,CAACqD,CAAC,CAACC,cAAF,CAAiBpC,MAAlB,CADD,CAAlB;;IAGA,MAAMqC,SAAS,GAAGN,qBAAA,CAASG,WAAT,CAAqB,iBAArB,EAAwC,MACxDpD,iBAAiB,CAAC,CAAD,CADD,CAAlB;;IAGA,OAAO,MAAM;MACXmD,SAAS,CAACK,MAAV;MACAD,SAAS,CAACC,MAAV;IACD,CAHD;EAID,CAXD,EAWG,EAXH;EAaA,OACE,6BAAC,+BAAD;IAAyB,OAAO,EAAE,CAACnE,MAAD,GAAUG,KAAV,GAAkBiE;EAApD,GACE,6BAAC,oBAAD;IAAc,KAAK,EAAE;MAAEC,eAAe,EAAErB;IAAnB;EAArB,GACE,6BAAC,qBAAD,CAAU,IAAV;IACE,KAAK,EAAE;MACLsB,aAAa,EAAErE,WAAW,GAAGqB,iBAAiB,CAACZ,cAAD,CAApB,GAAuC,CAD5D;MAEL6D,OAAO,EAAEnD,cAFJ;MAGLoD,SAAS,EAAE,CAAC;QAAEC,UAAU,EAAEtD;MAAd,CAAD;IAHN;EADT,GAOE,6BAAC,sBAAD,QACE,6BAAC,YAAD;IACE,QAAQ,EAAEiC,sBADZ;IAEE,KAAK,EAAE;MAAEkB,aAAa,EAAEjD;IAAjB,CAFT;IAGE,OAAO,EAAC;EAHV,GAKGnB,YAAY,IAAI,6BAAC,gBAAD,OALnB,EAMGN,QANH,CADF,CAPF,CADF,CADF,CADF;AAwBD,CA/IM"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
exports
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
4
6
|
exports.StyledPressableBackDrop = exports.CloseBar = exports.BackDropView = void 0;
|
|
5
7
|
|
|
6
8
|
var _native = _interopRequireDefault(require("@emotion/native"));
|
|
@@ -9,28 +11,24 @@ var _reactCore = require("@tecsinapse/react-core");
|
|
|
9
11
|
|
|
10
12
|
var _reactNative = require("react-native");
|
|
11
13
|
|
|
14
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
15
|
+
|
|
12
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
17
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
position: absolute;
|
|
17
|
-
|
|
18
|
-
height: 100%;
|
|
19
|
-
`;
|
|
18
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
19
|
+
|
|
20
|
+
const StyledPressableBackDrop = _native.default.Pressable(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n flex: 1;\n position: absolute;\n width: 100%;\n height: 100%;\n"])));
|
|
21
|
+
|
|
20
22
|
exports.StyledPressableBackDrop = StyledPressableBackDrop;
|
|
21
|
-
const BackDropView = (0, _native.default)(_reactNative.Animated.View)
|
|
22
|
-
justify-content: flex-end;
|
|
23
|
-
flex: 1;
|
|
24
|
-
`;
|
|
23
|
+
const BackDropView = (0, _native.default)(_reactNative.Animated.View)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n justify-content: flex-end;\n flex: 1;\n"])));
|
|
25
24
|
exports.BackDropView = BackDropView;
|
|
26
|
-
|
|
27
|
-
background-color:
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
`;
|
|
25
|
+
|
|
26
|
+
const CloseBar = _native.default.View(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background-color: ", ";\n border-radius: ", ";\n margin: ", ";\n width: ", ";\n height: ", ";\n"])), _ref => {
|
|
27
|
+
let {
|
|
28
|
+
theme
|
|
29
|
+
} = _ref;
|
|
30
|
+
return theme.color.secondary.light;
|
|
31
|
+
}, (0, _reactCore.RFValueStr)('10px'), "".concat((0, _reactCore.RFValueStr)('5px'), " auto"), (0, _reactCore.RFValueStr)('42px'), (0, _reactCore.RFValueStr)('5px'));
|
|
32
|
+
|
|
35
33
|
exports.CloseBar = CloseBar;
|
|
36
34
|
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","names":["StyledPressableBackDrop","styled","Pressable","BackDropView","Animated","View","CloseBar","theme","color","secondary","light","RFValueStr"],"sources":["../../../../../src/components/atoms/Modal/ui/styled.ts"],"sourcesContent":["import styled from '@emotion/native';\nimport { RFValueStr, StyleProps } from '@tecsinapse/react-core';\nimport { Animated } from 'react-native';\n\nexport const StyledPressableBackDrop = styled.Pressable<Partial<StyleProps>>`\n flex: 1;\n position: absolute;\n width: 100%;\n height: 100%;\n`;\n\nexport const BackDropView = styled(Animated.View)<Partial<StyleProps>>`\n justify-content: flex-end;\n flex: 1;\n`;\n\nexport const CloseBar = styled.View<Partial<StyleProps>>`\n background-color: ${({ theme }) => theme.color.secondary.light};\n border-radius: ${RFValueStr('10px')};\n margin: ${`${RFValueStr('5px')} auto`};\n width: ${RFValueStr('42px')};\n height: ${RFValueStr('5px')};\n`;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"styled.js","names":["StyledPressableBackDrop","styled","Pressable","BackDropView","Animated","View","CloseBar","theme","color","secondary","light","RFValueStr"],"sources":["../../../../../src/components/atoms/Modal/ui/styled.ts"],"sourcesContent":["import styled from '@emotion/native';\nimport { RFValueStr, StyleProps } from '@tecsinapse/react-core';\nimport { Animated } from 'react-native';\n\nexport const StyledPressableBackDrop = styled.Pressable<Partial<StyleProps>>`\n flex: 1;\n position: absolute;\n width: 100%;\n height: 100%;\n`;\n\nexport const BackDropView = styled(Animated.View)<Partial<StyleProps>>`\n justify-content: flex-end;\n flex: 1;\n`;\n\nexport const CloseBar = styled.View<Partial<StyleProps>>`\n background-color: ${({ theme }) => theme.color.secondary.light};\n border-radius: ${RFValueStr('10px')};\n margin: ${`${RFValueStr('5px')} auto`};\n width: ${RFValueStr('42px')};\n height: ${RFValueStr('5px')};\n`;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAEO,MAAMA,uBAAuB,GAAGC,eAAA,CAAOC,SAAV,2IAA7B;;;AAOA,MAAMC,YAAY,GAAG,IAAAF,eAAA,EAAOG,qBAAA,CAASC,IAAhB,CAAH,mHAAlB;;;AAKA,MAAMC,QAAQ,GAAGL,eAAA,CAAOI,IAAV,+KACC;EAAA,IAAC;IAAEE;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,KAAN,CAAYC,SAAZ,CAAsBC,KAArC;AAAA,CADD,EAEF,IAAAC,qBAAA,EAAW,MAAX,CAFE,YAGN,IAAAA,qBAAA,EAAW,KAAX,CAHM,YAIV,IAAAA,qBAAA,EAAW,MAAX,CAJU,EAKT,IAAAA,qBAAA,EAAW,KAAX,CALS,CAAd"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
exports
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
4
6
|
exports.useLazyModalManager = void 0;
|
|
5
7
|
|
|
6
8
|
var _react = require("react");
|
|
@@ -10,7 +12,7 @@ var _uuid = require("uuid");
|
|
|
10
12
|
var _ModalGroupManager = require("./ModalGroupManager");
|
|
11
13
|
|
|
12
14
|
const useLazyModalManager = modalId => {
|
|
13
|
-
const [id] = (0, _react.useState)(modalId
|
|
15
|
+
const [id] = (0, _react.useState)(modalId !== null && modalId !== void 0 ? modalId : (0, _uuid.v4)());
|
|
14
16
|
const requestUpdate = (0, _react.useCallback)(() => _ModalGroupManager.modalLifecycle.update(), []);
|
|
15
17
|
const sync = (0, _react.useCallback)(modal => {
|
|
16
18
|
_ModalGroupManager.modalLifecycle.sync(id, () => modal);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLazyModalManager.js","names":["useLazyModalManager","modalId","id","useState","uuidv4","requestUpdate","useCallback","modalLifecycle","update","sync","modal","show","close","useEffect","destroy"],"sources":["../../../../src/components/atoms/Modal/useLazyModalManager.ts"],"sourcesContent":["import { ReactElement, useCallback, useEffect, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { modalLifecycle } from './ModalGroupManager';\nimport { IBaseModal } from './ui/types';\n\n/**\n * Use this hook to tell the modal lifecycle handler that you want to add\n * a new modal component.\n *\n * @returns\n * @param modalId\n */\nexport const useLazyModalManager = (modalId?: string) => {\n const [id] = useState(modalId ?? uuidv4());\n\n const requestUpdate = useCallback(() => modalLifecycle.update(), []);\n\n const sync = useCallback(\n (modal: ReactElement<IBaseModal>) => {\n modalLifecycle.sync(id, () => modal);\n return null;\n },\n [id]\n );\n\n const show = useCallback(() => {\n modalLifecycle.show(id);\n }, [id]);\n\n const close = useCallback(() => {\n modalLifecycle.close(id);\n }, [id]);\n\n useEffect(() => {\n return () => modalLifecycle.destroy(id);\n }, []);\n\n return {\n requestUpdate,\n sync,\n show,\n close,\n };\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useLazyModalManager.js","names":["useLazyModalManager","modalId","id","useState","uuidv4","requestUpdate","useCallback","modalLifecycle","update","sync","modal","show","close","useEffect","destroy"],"sources":["../../../../src/components/atoms/Modal/useLazyModalManager.ts"],"sourcesContent":["import { ReactElement, useCallback, useEffect, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { modalLifecycle } from './ModalGroupManager';\nimport { IBaseModal } from './ui/types';\n\n/**\n * Use this hook to tell the modal lifecycle handler that you want to add\n * a new modal component.\n *\n * @returns\n * @param modalId\n */\nexport const useLazyModalManager = (modalId?: string) => {\n const [id] = useState(modalId ?? uuidv4());\n\n const requestUpdate = useCallback(() => modalLifecycle.update(), []);\n\n const sync = useCallback(\n (modal: ReactElement<IBaseModal>) => {\n modalLifecycle.sync(id, () => modal);\n return null;\n },\n [id]\n );\n\n const show = useCallback(() => {\n modalLifecycle.show(id);\n }, [id]);\n\n const close = useCallback(() => {\n modalLifecycle.close(id);\n }, [id]);\n\n useEffect(() => {\n return () => modalLifecycle.destroy(id);\n }, []);\n\n return {\n requestUpdate,\n sync,\n show,\n close,\n };\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAUO,MAAMA,mBAAmB,GAAIC,OAAD,IAAsB;EACvD,MAAM,CAACC,EAAD,IAAO,IAAAC,eAAA,EAASF,OAAT,aAASA,OAAT,cAASA,OAAT,GAAoB,IAAAG,QAAA,GAApB,CAAb;EAEA,MAAMC,aAAa,GAAG,IAAAC,kBAAA,EAAY,MAAMC,iCAAA,CAAeC,MAAf,EAAlB,EAA2C,EAA3C,CAAtB;EAEA,MAAMC,IAAI,GAAG,IAAAH,kBAAA,EACVI,KAAD,IAAqC;IACnCH,iCAAA,CAAeE,IAAf,CAAoBP,EAApB,EAAwB,MAAMQ,KAA9B;;IACA,OAAO,IAAP;EACD,CAJU,EAKX,CAACR,EAAD,CALW,CAAb;EAQA,MAAMS,IAAI,GAAG,IAAAL,kBAAA,EAAY,MAAM;IAC7BC,iCAAA,CAAeI,IAAf,CAAoBT,EAApB;EACD,CAFY,EAEV,CAACA,EAAD,CAFU,CAAb;EAIA,MAAMU,KAAK,GAAG,IAAAN,kBAAA,EAAY,MAAM;IAC9BC,iCAAA,CAAeK,KAAf,CAAqBV,EAArB;EACD,CAFa,EAEX,CAACA,EAAD,CAFW,CAAd;EAIA,IAAAW,gBAAA,EAAU,MAAM;IACd,OAAO,MAAMN,iCAAA,CAAeO,OAAf,CAAuBZ,EAAvB,CAAb;EACD,CAFD,EAEG,EAFH;EAIA,OAAO;IACLG,aADK;IAELI,IAFK;IAGLE,IAHK;IAILC;EAJK,CAAP;AAMD,CA/BM"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
exports
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
4
6
|
exports.useModalManager = void 0;
|
|
5
7
|
|
|
6
8
|
var _react = require("react");
|
|
@@ -10,7 +12,7 @@ var _uuid = require("uuid");
|
|
|
10
12
|
var _ModalGroupManager = require("./ModalGroupManager");
|
|
11
13
|
|
|
12
14
|
const useModalManager = (modal, modalId) => {
|
|
13
|
-
const [id] = (0, _react.useState)(modalId
|
|
15
|
+
const [id] = (0, _react.useState)(modalId !== null && modalId !== void 0 ? modalId : (0, _uuid.v4)());
|
|
14
16
|
|
|
15
17
|
_ModalGroupManager.modalLifecycle.sync(id, modal);
|
|
16
18
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useModalManager.js","names":["useModalManager","modal","modalId","id","useState","uuidv4","modalLifecycle","sync","show","useCallback","close","useEffect","destroy"],"sources":["../../../../src/components/atoms/Modal/useModalManager.ts"],"sourcesContent":["import { ReactElement, useCallback, useEffect, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { modalLifecycle } from './ModalGroupManager';\nimport { IBaseModal } from './ui/types';\n\n/**\n * Use this hook to tell the modal lifecycle handler that you want to add\n * a new modal component.\n *\n * @param id\n * @param modal\n * @returns\n */\nexport const useModalManager = (\n modal: () => ReactElement<IBaseModal>,\n modalId?: string\n) => {\n const [id] = useState(modalId ?? uuidv4());\n modalLifecycle.sync(id, modal);\n\n const show = useCallback(() => {\n modalLifecycle.show(id);\n }, [id]);\n\n const close = useCallback(() => {\n modalLifecycle.close(id);\n }, [id]);\n\n useEffect(() => {\n return () => modalLifecycle.destroy(id);\n }, []);\n\n return {\n show,\n close,\n };\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useModalManager.js","names":["useModalManager","modal","modalId","id","useState","uuidv4","modalLifecycle","sync","show","useCallback","close","useEffect","destroy"],"sources":["../../../../src/components/atoms/Modal/useModalManager.ts"],"sourcesContent":["import { ReactElement, useCallback, useEffect, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { modalLifecycle } from './ModalGroupManager';\nimport { IBaseModal } from './ui/types';\n\n/**\n * Use this hook to tell the modal lifecycle handler that you want to add\n * a new modal component.\n *\n * @param id\n * @param modal\n * @returns\n */\nexport const useModalManager = (\n modal: () => ReactElement<IBaseModal>,\n modalId?: string\n) => {\n const [id] = useState(modalId ?? uuidv4());\n modalLifecycle.sync(id, modal);\n\n const show = useCallback(() => {\n modalLifecycle.show(id);\n }, [id]);\n\n const close = useCallback(() => {\n modalLifecycle.close(id);\n }, [id]);\n\n useEffect(() => {\n return () => modalLifecycle.destroy(id);\n }, []);\n\n return {\n show,\n close,\n };\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAWO,MAAMA,eAAe,GAAG,CAC7BC,KAD6B,EAE7BC,OAF6B,KAG1B;EACH,MAAM,CAACC,EAAD,IAAO,IAAAC,eAAA,EAASF,OAAT,aAASA,OAAT,cAASA,OAAT,GAAoB,IAAAG,QAAA,GAApB,CAAb;;EACAC,iCAAA,CAAeC,IAAf,CAAoBJ,EAApB,EAAwBF,KAAxB;;EAEA,MAAMO,IAAI,GAAG,IAAAC,kBAAA,EAAY,MAAM;IAC7BH,iCAAA,CAAeE,IAAf,CAAoBL,EAApB;EACD,CAFY,EAEV,CAACA,EAAD,CAFU,CAAb;EAIA,MAAMO,KAAK,GAAG,IAAAD,kBAAA,EAAY,MAAM;IAC9BH,iCAAA,CAAeI,KAAf,CAAqBP,EAArB;EACD,CAFa,EAEX,CAACA,EAAD,CAFW,CAAd;EAIA,IAAAQ,gBAAA,EAAU,MAAM;IACd,OAAO,MAAML,iCAAA,CAAeM,OAAf,CAAuBT,EAAvB,CAAb;EACD,CAFD,EAEG,EAFH;EAIA,OAAO;IACLK,IADK;IAELE;EAFK,CAAP;AAID,CAvBM"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useModalRemoteControl.js","names":["useModalRemoteControl","modalId","show","useCallback","modalLifecycle","close"],"sources":["../../../../src/components/atoms/Modal/useModalRemoteControl.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { modalLifecycle } from './ModalGroupManager';\n\n/**\n * Use it to control a specific modal wherever it's.\n * Just provide an id of a specific instance.\n *\n * @param modalId\n * @returns\n */\nexport const useModalRemoteControl = (modalId: string) => {\n const show = useCallback(() => {\n modalLifecycle.show(modalId);\n }, [modalId]);\n\n const close = useCallback(() => {\n modalLifecycle.close(modalId);\n }, [modalId]);\n\n return {\n show,\n close,\n };\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useModalRemoteControl.js","names":["useModalRemoteControl","modalId","show","useCallback","modalLifecycle","close"],"sources":["../../../../src/components/atoms/Modal/useModalRemoteControl.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { modalLifecycle } from './ModalGroupManager';\n\n/**\n * Use it to control a specific modal wherever it's.\n * Just provide an id of a specific instance.\n *\n * @param modalId\n * @returns\n */\nexport const useModalRemoteControl = (modalId: string) => {\n const show = useCallback(() => {\n modalLifecycle.show(modalId);\n }, [modalId]);\n\n const close = useCallback(() => {\n modalLifecycle.close(modalId);\n }, [modalId]);\n\n return {\n show,\n close,\n };\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AASO,MAAMA,qBAAqB,GAAIC,OAAD,IAAqB;EACxD,MAAMC,IAAI,GAAG,IAAAC,kBAAA,EAAY,MAAM;IAC7BC,iCAAA,CAAeF,IAAf,CAAoBD,OAApB;EACD,CAFY,EAEV,CAACA,OAAD,CAFU,CAAb;EAIA,MAAMI,KAAK,GAAG,IAAAF,kBAAA,EAAY,MAAM;IAC9BC,iCAAA,CAAeC,KAAf,CAAqBJ,OAArB;EACD,CAFa,EAEX,CAACA,OAAD,CAFW,CAAd;EAIA,OAAO;IACLC,IADK;IAELG;EAFK,CAAP;AAID,CAbM"}
|