@tecsinapse/react-native-kit 1.12.11 → 1.12.12

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.
Files changed (58) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/components/atoms/Modal/ModalLifecycleHandler.js +24 -22
  3. package/dist/components/atoms/Modal/ModalLifecycleHandler.js.map +1 -1
  4. package/dist/components/atoms/Modal/index.d.ts +1 -0
  5. package/dist/components/atoms/Modal/index.js +13 -0
  6. package/dist/components/atoms/Modal/index.js.map +1 -1
  7. package/dist/components/atoms/Modal/ui/BaseModalView.js +20 -8
  8. package/dist/components/atoms/Modal/ui/BaseModalView.js.map +1 -1
  9. package/dist/components/atoms/Modal/ui/types.d.ts +1 -0
  10. package/dist/components/atoms/Modal/useLazyModalManager.d.ts +8 -0
  11. package/dist/components/atoms/Modal/useLazyModalManager.js +40 -0
  12. package/dist/components/atoms/Modal/useLazyModalManager.js.map +1 -0
  13. package/dist/components/molecules/Calendar/Calendar.js +2 -2
  14. package/dist/components/molecules/Calendar/Calendar.js.map +1 -1
  15. package/dist/components/molecules/DatePicker/DatePicker.d.ts +2 -4
  16. package/dist/components/molecules/DatePicker/DatePicker.js +29 -3
  17. package/dist/components/molecules/DatePicker/DatePicker.js.map +1 -1
  18. package/dist/components/molecules/DatePicker/styled.d.ts +4 -0
  19. package/dist/components/molecules/DatePicker/styled.js +20 -0
  20. package/dist/components/molecules/DatePicker/styled.js.map +1 -0
  21. package/dist/components/molecules/DateTimePicker/DateTimePicker.d.ts +1 -1
  22. package/dist/components/molecules/DateTimePicker/DateTimePicker.js +18 -4
  23. package/dist/components/molecules/DateTimePicker/DateTimePicker.js.map +1 -1
  24. package/dist/components/molecules/Select/Modal.d.ts +7 -0
  25. package/dist/components/{atoms → molecules}/Select/Modal.js +31 -18
  26. package/dist/components/molecules/Select/Modal.js.map +1 -0
  27. package/dist/components/{atoms → molecules}/Select/Select.d.ts +2 -1
  28. package/dist/components/{atoms → molecules}/Select/Select.js +35 -36
  29. package/dist/components/molecules/Select/Select.js.map +1 -0
  30. package/dist/components/{atoms → molecules}/Select/index.d.ts +0 -0
  31. package/dist/components/{atoms → molecules}/Select/index.js +0 -0
  32. package/dist/components/molecules/Select/index.js.map +1 -0
  33. package/dist/components/{atoms → molecules}/Select/styled.d.ts +1 -1
  34. package/dist/components/{atoms → molecules}/Select/styled.js +14 -12
  35. package/dist/components/molecules/Select/styled.js.map +1 -0
  36. package/dist/index.d.ts +2 -2
  37. package/dist/index.js +8 -1
  38. package/dist/index.js.map +1 -1
  39. package/package.json +3 -3
  40. package/src/components/atoms/Modal/ModalLifecycleHandler.ts +22 -20
  41. package/src/components/atoms/Modal/index.ts +2 -1
  42. package/src/components/atoms/Modal/ui/BaseModalView.tsx +29 -15
  43. package/src/components/atoms/Modal/ui/types.ts +1 -0
  44. package/src/components/atoms/Modal/useLazyModalManager.ts +43 -0
  45. package/src/components/molecules/Calendar/Calendar.tsx +2 -6
  46. package/src/components/molecules/DatePicker/DatePicker.tsx +31 -10
  47. package/src/components/molecules/DatePicker/styled.ts +6 -0
  48. package/src/components/molecules/DateTimePicker/DateTimePicker.tsx +22 -7
  49. package/src/components/{atoms → molecules}/Select/Modal.tsx +32 -33
  50. package/src/components/{atoms → molecules}/Select/Select.tsx +38 -39
  51. package/src/components/{atoms → molecules}/Select/index.ts +0 -0
  52. package/src/components/{atoms → molecules}/Select/styled.ts +9 -8
  53. package/src/index.ts +2 -2
  54. package/dist/components/atoms/Select/Modal.d.ts +0 -7
  55. package/dist/components/atoms/Select/Modal.js.map +0 -1
  56. package/dist/components/atoms/Select/Select.js.map +0 -1
  57. package/dist/components/atoms/Select/index.js.map +0 -1
  58. package/dist/components/atoms/Select/styled.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.12.12](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.11...@tecsinapse/react-native-kit@1.12.12) (2022-01-18)
7
+
8
+ **Note:** Version bump only for package @tecsinapse/react-native-kit
9
+
10
+
11
+
12
+
13
+
6
14
  ## [1.12.11](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.10...@tecsinapse/react-native-kit@1.12.11) (2022-01-17)
7
15
 
8
16
  **Note:** Version bump only for package @tecsinapse/react-native-kit
@@ -18,30 +18,32 @@ class ModalLifecycleHandler {
18
18
  });
19
19
 
20
20
  _defineProperty(this, "update", () => {
21
- const nodes = Array.from(this.nodeGroup.values()).filter(node => node.visible || !!node.lastVisualization).sort((nodeA, nodeB) => {
22
- var _nodeA$lastVisualizat, _nodeB$lastVisualizat;
23
-
24
- 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);
25
- }).map((node, index, filteredNodes) => {
26
- let modalElement = node.modal();
27
- let {
28
- props
29
- } = modalElement;
30
- return _react.default.cloneElement(modalElement, { ...props,
31
- key: node.id,
32
- visible: node.visible,
33
- isLastShown: filteredNodes.length - 1 === index,
34
- close: () => this.close(node.id),
35
- onClose: () => {
36
- var _props$onClose;
37
-
38
- this.remove(node.id);
39
- (_props$onClose = props.onClose) === null || _props$onClose === void 0 ? void 0 : _props$onClose.call(props);
40
- }
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
+ let modalElement = node.modal();
28
+ let {
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
+ });
41
43
  });
44
+ const [, updateState] = this.state || [];
45
+ updateState === null || updateState === void 0 ? void 0 : updateState(nodes);
42
46
  });
43
- const [, updateState] = this.state || [];
44
- updateState === null || updateState === void 0 ? void 0 : updateState(nodes);
45
47
  });
46
48
 
47
49
  _defineProperty(this, "render", () => {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/atoms/Modal/ModalLifecycleHandler.ts"],"names":["ModalLifecycleHandler","constructor","state","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","get","set","delete","update","undefined","Date","Map","createModalLifecycleHandler"],"mappings":"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","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 \n nodeGroup: Map<string, ModalNode>\n state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>] | 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 = (state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]) => {\n this.state = state\n }\n\n /**\n * Updates all the modal components.\n */\n public update = () => {\n const nodes = Array.from(this.nodeGroup.values())\n .filter(node => node.visible || !!node.lastVisualization)\n .sort((nodeA, nodeB) => (nodeA.lastVisualization?.getTime() || 0) - (nodeB.lastVisualization?.getTime() || 0))\n .map((node, index, filteredNodes) => {\n let modalElement = node.modal()\n let { 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 * 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.nodeGroup.get(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.nodeGroup.get(id)\n savedNode && this.nodeGroup.set(id, { ...savedNode, lastVisualization: undefined })\n this.update()\n }\n\n /**\n * Makes a modal appears.\n * \n * @param id \n */\n public show = (id: string) => {\n const savedNode = this.nodeGroup.get(id)\n savedNode && this.nodeGroup.set(id, { ...savedNode, visible: true, lastVisualization: new Date() })\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.nodeGroup.get(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"],"file":"ModalLifecycleHandler.js"}
1
+ {"version":3,"sources":["../../../../src/components/atoms/Modal/ModalLifecycleHandler.ts"],"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","get","set","delete","update","undefined","Date","Map","createModalLifecycleHandler"],"mappings":"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","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 \n nodeGroup: Map<string, ModalNode>\n state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>] | 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 = (state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]) => {\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((nodeA, nodeB) => (nodeA.lastVisualization?.getTime() || 0) - (nodeB.lastVisualization?.getTime() || 0))\n .map((node, index, filteredNodes) => {\n let modalElement = node.modal()\n let { 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.nodeGroup.get(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.nodeGroup.get(id)\n savedNode && this.nodeGroup.set(id, { ...savedNode, lastVisualization: undefined })\n this.update()\n }\n\n /**\n * Makes a modal appears.\n * \n * @param id \n */\n public show = (id: string) => {\n const savedNode = this.nodeGroup.get(id)\n savedNode && this.nodeGroup.set(id, { ...savedNode, visible: true, lastVisualization: new Date() })\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.nodeGroup.get(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"],"file":"ModalLifecycleHandler.js"}
@@ -3,3 +3,4 @@ export * from './ModalLifecycleHandler';
3
3
  export * from './ui/BaseModalView';
4
4
  export * from './ui/types';
5
5
  export * from './useModalManager';
6
+ export * from './useLazyModalManager';
@@ -68,4 +68,17 @@ Object.keys(_useModalManager).forEach(function (key) {
68
68
  }
69
69
  });
70
70
  });
71
+
72
+ var _useLazyModalManager = require("./useLazyModalManager");
73
+
74
+ Object.keys(_useLazyModalManager).forEach(function (key) {
75
+ if (key === "default" || key === "__esModule") return;
76
+ if (key in exports && exports[key] === _useLazyModalManager[key]) return;
77
+ Object.defineProperty(exports, key, {
78
+ enumerable: true,
79
+ get: function () {
80
+ return _useLazyModalManager[key];
81
+ }
82
+ });
83
+ });
71
84
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/atoms/Modal/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './ModalGroupManager'\nexport * from './ModalLifecycleHandler'\nexport * from './ui/BaseModalView'\nexport * from './ui/types'\nexport * from './useModalManager'"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../../src/components/atoms/Modal/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './ModalGroupManager'\nexport * from './ModalLifecycleHandler'\nexport * from './ui/BaseModalView'\nexport * from './ui/types'\nexport * from './useModalManager'\nexport * from './useLazyModalManager'"],"file":"index.js"}
@@ -30,6 +30,7 @@ const ModalView = ({
30
30
  BoxComponent = _reactCore.BoxContent,
31
31
  frozen,
32
32
  isLastShown,
33
+ showCloseBar = true,
33
34
  close,
34
35
  onClose
35
36
  }) => {
@@ -37,12 +38,25 @@ const ModalView = ({
37
38
  bottom
38
39
  } = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
39
40
  const [ready, setReady] = (0, _react.useState)(false);
40
- const [keyboardOpened, setKeyboardOpened] = (0, _react.useState)(false);
41
+ const [keyboardOpened, setKeyboardOpened] = (0, _react.useState)(0);
41
42
  const [boxHeight, setBoxHeight] = (0, _react.useState)(0);
42
43
  const backgroundCarrier = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
43
44
  const translationCarrier = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
44
45
  const opacityCarrier = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
45
- const offset = isLastShown && keyboardOpened ? 0 : bottom;
46
+ const offset = isLastShown && keyboardOpened > 0 ? 0 : bottom;
47
+
48
+ const getKeyboardHeight = keyboard => {
49
+ if (keyboard === 0) return 0;
50
+ let wHeight = Math.ceil(_reactNative.Dimensions.get('window').height);
51
+ let sHeight = Math.ceil(_reactNative.Dimensions.get('screen').height);
52
+
53
+ if (wHeight !== sHeight) {
54
+ return keyboard + (sHeight - wHeight - (_reactNative.StatusBar.currentHeight || 0));
55
+ }
56
+
57
+ return keyboard;
58
+ };
59
+
46
60
  const show = (0, _react.useCallback)(() => {
47
61
  _reactNative.Animated.sequence([_reactNative.Animated.timing(backgroundCarrier, {
48
62
  toValue: INTERPOLATION_STEPS,
@@ -102,9 +116,9 @@ const ModalView = ({
102
116
  if (!visible && ready) setReady(false);
103
117
  }, [ready, visible]);
104
118
  (0, _react.useEffect)(() => {
105
- const showEvent = _reactNative.Keyboard.addListener('keyboardDidShow', () => setKeyboardOpened(true));
119
+ const showEvent = _reactNative.Keyboard.addListener('keyboardDidShow', e => setKeyboardOpened(e.endCoordinates.height));
106
120
 
107
- const hideEvent = _reactNative.Keyboard.addListener('keyboardDidHide', () => setKeyboardOpened(false));
121
+ const hideEvent = _reactNative.Keyboard.addListener('keyboardDidHide', () => setKeyboardOpened(0));
108
122
 
109
123
  return () => {
110
124
  showEvent.remove();
@@ -117,11 +131,9 @@ const ModalView = ({
117
131
  style: {
118
132
  backgroundColor: backgroundInterpolation
119
133
  }
120
- }, _react.default.createElement(_reactNative.KeyboardAvoidingView, {
121
- enabled: isLastShown,
122
- behavior: "padding"
123
134
  }, _react.default.createElement(_reactNative.Animated.View, {
124
135
  style: {
136
+ paddingBottom: isLastShown ? getKeyboardHeight(keyboardOpened) : 0,
125
137
  opacity: opacityCarrier,
126
138
  transform: [{
127
139
  translateY: translationCarrier
@@ -133,7 +145,7 @@ const ModalView = ({
133
145
  paddingBottom: offset
134
146
  },
135
147
  variant: "bottom"
136
- }, _react.default.createElement(_styled.CloseBar, null), children))))));
148
+ }, showCloseBar && _react.default.createElement(_styled.CloseBar, null), children)))));
137
149
  };
138
150
 
139
151
  exports.ModalView = ModalView;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/atoms/Modal/ui/BaseModalView.tsx"],"names":["BACKDROP_ALPHA","INTERPOLATION_STEPS","INTERPOLATION_DURATION","OPACITY_DURATION","ModalView","children","visible","BoxComponent","BoxContent","frozen","isLastShown","close","onClose","bottom","ready","setReady","keyboardOpened","setKeyboardOpened","boxHeight","setBoxHeight","backgroundCarrier","Animated","Value","current","translationCarrier","opacityCarrier","offset","show","sequence","timing","toValue","duration","easing","Easing","out","circle","useNativeDriver","start","hide","to","parallel","backgroundInterpolation","interpolate","inputRange","outputRange","handleBoxLayoutChanges","lce","boxHeightEvent","nativeEvent","layout","height","setValue","requestAnimationFrame","Keyboard","dismiss","showEvent","addListener","hideEvent","remove","undefined","backgroundColor","opacity","transform","translateY","paddingBottom"],"mappings":"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","sourcesContent":["import { BoxContent } from \"@tecsinapse/react-core\";\nimport React, { FC, useCallback, useEffect, useRef, useState } from \"react\";\nimport { Animated, Easing, Keyboard, KeyboardAvoidingView, LayoutChangeEvent, Pressable } 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 = .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 close,\n onClose\n}) => {\n \n const { bottom } = useSafeAreaInsets()\n const [ ready, setReady ] = useState(false)\n const [ keyboardOpened, setKeyboardOpened ] = useState(false)\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 : bottom\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((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 }, [onClose])\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((lce: LayoutChangeEvent) => {\n let boxHeightEvent = lce.nativeEvent.layout.height\n setBoxHeight(boxHeightEvent)\n \n if (visible && !ready) {\n translationCarrier.setValue(boxHeightEvent)\n setReady(true)\n }\n }, [show, ready, visible, setReady])\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', () => setKeyboardOpened(true))\n const hideEvent = Keyboard.addListener('keyboardDidHide', () => setKeyboardOpened(false))\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 <KeyboardAvoidingView enabled={isLastShown} behavior=\"padding\">\n <Animated.View style={{ opacity: opacityCarrier, transform: [{ translateY: translationCarrier }]}}>\n <Pressable>\n <BoxComponent onLayout={handleBoxLayoutChanges} style={{ paddingBottom: offset }} variant=\"bottom\">\n <CloseBar/>\n {children}\n </BoxComponent>\n </Pressable>\n </Animated.View>\n </KeyboardAvoidingView>\n </BackDropView>\n </StyledPressableBackDrop>\n )\n}"],"file":"BaseModalView.js"}
1
+ {"version":3,"sources":["../../../../../src/components/atoms/Modal/ui/BaseModalView.tsx"],"names":["BACKDROP_ALPHA","INTERPOLATION_STEPS","INTERPOLATION_DURATION","OPACITY_DURATION","ModalView","children","visible","BoxComponent","BoxContent","frozen","isLastShown","showCloseBar","close","onClose","bottom","ready","setReady","keyboardOpened","setKeyboardOpened","boxHeight","setBoxHeight","backgroundCarrier","Animated","Value","current","translationCarrier","opacityCarrier","offset","getKeyboardHeight","keyboard","wHeight","Math","ceil","Dimensions","get","height","sHeight","StatusBar","currentHeight","show","sequence","timing","toValue","duration","easing","Easing","out","circle","useNativeDriver","start","hide","to","parallel","backgroundInterpolation","interpolate","inputRange","outputRange","handleBoxLayoutChanges","lce","boxHeightEvent","nativeEvent","layout","setValue","requestAnimationFrame","Keyboard","dismiss","showEvent","addListener","e","endCoordinates","hideEvent","remove","undefined","backgroundColor","paddingBottom","opacity","transform","translateY"],"mappings":"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","sourcesContent":["import { BoxContent } from \"@tecsinapse/react-core\";\nimport React, { FC, useCallback, useEffect, useRef, useState } from \"react\";\nimport { Animated, Dimensions, Easing, Keyboard, LayoutChangeEvent, Pressable, StatusBar } 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 = .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 \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 let wHeight = Math.ceil(Dimensions.get('window').height)\n let 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((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 }, [onClose])\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((lce: LayoutChangeEvent) => {\n let boxHeightEvent = lce.nativeEvent.layout.height\n setBoxHeight(boxHeightEvent)\n \n if (visible && !ready) {\n translationCarrier.setValue(boxHeightEvent)\n setReady(true)\n }\n }, [show, ready, visible, setReady])\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) => setKeyboardOpened(e.endCoordinates.height))\n const hideEvent = Keyboard.addListener('keyboardDidHide', () => setKeyboardOpened(0))\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 style={{ \n paddingBottom: isLastShown ? getKeyboardHeight(keyboardOpened) : 0, \n opacity: opacityCarrier, \n transform: [{ translateY: translationCarrier }]\n }}>\n <Pressable>\n <BoxComponent onLayout={handleBoxLayoutChanges} style={{ paddingBottom: offset }} variant=\"bottom\">\n {showCloseBar && <CloseBar/>}\n {children}\n </BoxComponent>\n </Pressable>\n </Animated.View>\n </BackDropView>\n </StyledPressableBackDrop>\n )\n}"],"file":"BaseModalView.js"}
@@ -4,6 +4,7 @@ export interface IBaseModal {
4
4
  BoxComponent?: React.FC<any>;
5
5
  frozen?: boolean;
6
6
  isLastShown?: boolean;
7
+ showCloseBar?: boolean;
7
8
  close?: () => void;
8
9
  onClose?: () => void;
9
10
  }
@@ -0,0 +1,8 @@
1
+ import { ReactElement } from "react";
2
+ import { IBaseModal } from "./ui/types";
3
+ export declare const useLazyModalManager: () => {
4
+ requestUpdate: () => void;
5
+ sync: (modal: ReactElement<IBaseModal>) => null;
6
+ show: () => void;
7
+ close: () => void;
8
+ };
@@ -0,0 +1,40 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useLazyModalManager = void 0;
7
+
8
+ var _react = require("react");
9
+
10
+ var _uuid = require("uuid");
11
+
12
+ var _ModalGroupManager = require("./ModalGroupManager");
13
+
14
+ const useLazyModalManager = () => {
15
+ const [id] = (0, _react.useState)((0, _uuid.v4)());
16
+ const requestUpdate = (0, _react.useCallback)(() => _ModalGroupManager.modalLifecycle.update(), []);
17
+ const sync = (0, _react.useCallback)(modal => {
18
+ _ModalGroupManager.modalLifecycle.sync(id, () => modal);
19
+
20
+ return null;
21
+ }, [id]);
22
+ const show = (0, _react.useCallback)(() => {
23
+ _ModalGroupManager.modalLifecycle.show(id);
24
+ }, [id]);
25
+ const close = (0, _react.useCallback)(() => {
26
+ _ModalGroupManager.modalLifecycle.close(id);
27
+ }, [id]);
28
+ (0, _react.useEffect)(() => {
29
+ return () => _ModalGroupManager.modalLifecycle.destroy(id);
30
+ }, []);
31
+ return {
32
+ requestUpdate,
33
+ sync,
34
+ show,
35
+ close
36
+ };
37
+ };
38
+
39
+ exports.useLazyModalManager = useLazyModalManager;
40
+ //# sourceMappingURL=useLazyModalManager.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/components/atoms/Modal/useLazyModalManager.ts"],"names":["useLazyModalManager","id","requestUpdate","modalLifecycle","update","sync","modal","show","close","destroy"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAWO,MAAMA,mBAAmB,GAAG,MAAM;AAErC,QAAM,CAACC,EAAD,IAAO,qBAAS,eAAT,CAAb;AAEA,QAAMC,aAAa,GAAG,wBAAY,MAAMC,kCAAeC,MAAf,EAAlB,EAA2C,EAA3C,CAAtB;AAEA,QAAMC,IAAI,GAAG,wBAAaC,KAAD,IAAqC;AAC1DH,sCAAeE,IAAf,CAAoBJ,EAApB,EAAwB,MAAMK,KAA9B;;AACA,WAAO,IAAP;AACH,GAHY,EAGV,CAACL,EAAD,CAHU,CAAb;AAKA,QAAMM,IAAI,GAAG,wBAAY,MAAM;AAC3BJ,sCAAeI,IAAf,CAAoBN,EAApB;AACH,GAFY,EAEV,CAACA,EAAD,CAFU,CAAb;AAIA,QAAMO,KAAK,GAAG,wBAAY,MAAM;AAC5BL,sCAAeK,KAAf,CAAqBP,EAArB;AACH,GAFa,EAEX,CAACA,EAAD,CAFW,CAAd;AAIA,wBAAU,MAAM;AACZ,WAAO,MAAME,kCAAeM,OAAf,CAAuBR,EAAvB,CAAb;AACH,GAFD,EAEG,EAFH;AAIA,SAAO;AACHC,IAAAA,aADG;AAEHG,IAAAA,IAFG;AAGHE,IAAAA,IAHG;AAIHC,IAAAA;AAJG,GAAP;AAMH,CA7BM","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 useLazyModalManager = () => {\n\n const [id] = useState(uuidv4())\n\n const requestUpdate = useCallback(() => modalLifecycle.update(), [])\n\n const sync = useCallback((modal: ReactElement<IBaseModal>) => {\n modalLifecycle.sync(id, () => modal)\n return null\n }, [id])\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}"],"file":"useLazyModalManager.js"}
@@ -9,10 +9,10 @@ var _reactCore = require("@tecsinapse/react-core");
9
9
 
10
10
  var _react = _interopRequireDefault(require("react"));
11
11
 
12
- var _Text = require("../../atoms/Text");
13
-
14
12
  var _date = require("../../../utils/date");
15
13
 
14
+ var _Text = require("../../atoms/Text");
15
+
16
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
17
 
18
18
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/molecules/Calendar/Calendar.tsx"],"names":["Calendar","locale","rest","Text"],"mappings":";;;;;;;AAAA;;AAKA;;AACA;;AACA;;;;;;AAEO,MAAMA,QAAQ,GAAG,CAA0B;AAChDC,EAAAA,MADgD;AAEhD,KAAGC;AAF6C,CAA1B,KAGL;AACjB,SACE,6BAAC,mBAAD,eACMA,IADN;AAEE,IAAA,aAAa,EAAEC,UAFjB;AAGE,IAAA,MAAM,EAAEF,MAAM,IAAI;AAHpB,KADF;AAOD,CAXM","sourcesContent":["import {\n Calendar as CalendarCore,\n CalendarProps,\n SelectionType,\n} from '@tecsinapse/react-core';\nimport React from 'react';\nimport { Text } from '../../atoms/Text';\nimport { getLocale } from '../../../utils/date';\n\nexport const Calendar = <T extends SelectionType>({\n locale,\n ...rest\n}): JSX.Element => {\n return (\n <CalendarCore\n {...rest}\n TextComponent={Text}\n locale={locale ?? getLocale()}\n />\n );\n};\n"],"file":"Calendar.js"}
1
+ {"version":3,"sources":["../../../../src/components/molecules/Calendar/Calendar.tsx"],"names":["Calendar","locale","rest","Text"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAEO,MAAMA,QAAQ,GAAG,CAA0B;AAChDC,EAAAA,MADgD;AAEhD,KAAGC;AAF6C,CAA1B,KAGL;AACjB,SACE,6BAAC,mBAAD,eACMA,IADN;AAEE,IAAA,aAAa,EAAEC,UAFjB;AAGE,IAAA,MAAM,EAAEF,MAAM,IAAI;AAHpB,KADF;AAOD,CAXM","sourcesContent":["import { Calendar as CalendarCore, SelectionType } from '@tecsinapse/react-core';\nimport React from 'react';\nimport { getLocale } from '../../../utils/date';\nimport { Text } from '../../atoms/Text';\n\nexport const Calendar = <T extends SelectionType>({\n locale,\n ...rest\n}): JSX.Element => {\n return (\n <CalendarCore\n {...rest}\n TextComponent={Text}\n locale={locale ?? getLocale()}\n />\n );\n};\n"],"file":"Calendar.js"}
@@ -1,4 +1,2 @@
1
- export declare const DatePicker: <T extends any>({ locale, ...rest }: {
2
- [x: string]: any;
3
- locale: any;
4
- }) => JSX.Element;
1
+ import { DatePickerProps } from '@tecsinapse/react-core';
2
+ export declare const DatePicker: <T extends any>({ locale, onChange, ...rest }: Omit<any, "CalendarComponent" | "renderCalendar" | "requestCloseCalendar" | "requestShowCalendar">) => JSX.Element;
@@ -9,11 +9,15 @@ var _reactCore = require("@tecsinapse/react-core");
9
9
 
10
10
  var _react = _interopRequireDefault(require("react"));
11
11
 
12
+ var _date = require("../../../utils/date");
13
+
14
+ var _Modal = require("../../atoms/Modal");
15
+
12
16
  var _Text = require("../../atoms/Text");
13
17
 
14
18
  var _Calendar = require("../Calendar");
15
19
 
16
- var _date = require("../../../utils/date");
20
+ var _styled = require("./styled");
17
21
 
18
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
23
 
@@ -21,15 +25,37 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
21
25
 
22
26
  const DatePicker = ({
23
27
  locale,
28
+ onChange,
24
29
  ...rest
25
30
  }) => {
31
+ const modal = (0, _Modal.useLazyModalManager)();
32
+
33
+ const handleChange = value => {
34
+ onChange === null || onChange === void 0 ? void 0 : onChange(value);
35
+ modal.requestUpdate();
36
+ };
37
+
26
38
  return _react.default.createElement(_reactCore.DatePicker, _extends({}, rest, {
27
39
  TextComponent: _Text.Text,
28
40
  CalendarComponent: _Calendar.Calendar,
29
- animationType: "slide",
30
- locale: locale ?? (0, _date.getLocale)()
41
+ locale: locale ?? (0, _date.getLocale)(),
42
+ onChange: handleChange,
43
+ requestShowCalendar: () => modal.show(),
44
+ requestCloseCalendar: () => modal.close(),
45
+ renderCalendar: (calendar, blur) => modal.sync(_react.default.createElement(NativeModal, {
46
+ onClose: blur
47
+ }, calendar))
31
48
  }));
32
49
  };
33
50
 
34
51
  exports.DatePicker = DatePicker;
52
+
53
+ const NativeModal = ({
54
+ children,
55
+ ...others
56
+ }) => {
57
+ return _react.default.createElement(_Modal.ModalView, _extends({
58
+ BoxComponent: _styled.CalendarBoxContent
59
+ }, others), children);
60
+ };
35
61
  //# sourceMappingURL=DatePicker.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"names":["DatePicker","locale","rest","Text","Calendar"],"mappings":";;;;;;;AAAA;;AAKA;;AACA;;AACA;;AACA;;;;;;AAEO,MAAMA,UAAU,GAAG,CAA0B;AAClDC,EAAAA,MADkD;AAElD,KAAGC;AAF+C,CAA1B,KAGP;AACjB,SACE,6BAAC,qBAAD,eACMA,IADN;AAEE,IAAA,aAAa,EAAEC,UAFjB;AAGE,IAAA,iBAAiB,EAAEC,kBAHrB;AAIE,IAAA,aAAa,EAAC,OAJhB;AAKE,IAAA,MAAM,EAAEH,MAAM,IAAI;AALpB,KADF;AASD,CAbM","sourcesContent":["import {\n DatePicker as DatePickerCore,\n DatePickerProps,\n SelectionType,\n} from '@tecsinapse/react-core';\nimport React from 'react';\nimport { Text } from '../../atoms/Text';\nimport { Calendar } from '../Calendar';\nimport { getLocale } from '../../../utils/date';\n\nexport const DatePicker = <T extends SelectionType>({\n locale,\n ...rest\n}): JSX.Element => {\n return (\n <DatePickerCore\n {...rest}\n TextComponent={Text}\n CalendarComponent={Calendar}\n animationType=\"slide\"\n locale={locale ?? getLocale()}\n />\n );\n};\n"],"file":"DatePicker.js"}
1
+ {"version":3,"sources":["../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"names":["DatePicker","locale","onChange","rest","modal","handleChange","value","requestUpdate","Text","Calendar","show","close","calendar","blur","sync","NativeModal","children","others","CalendarBoxContent"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEO,MAAMA,UAAU,GAAG,CAA0B;AAAEC,EAAAA,MAAF;AAAUC,EAAAA,QAAV;AAAoB,KAAGC;AAAvB,CAA1B,KAA4L;AAEpN,QAAMC,KAAK,GAAG,iCAAd;;AAEA,QAAMC,YAAY,GAAIC,KAAD,IAAsB;AACzCJ,IAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGI,KAAH,CAAR;AACAF,IAAAA,KAAK,CAACG,aAAN;AACD,GAHD;;AAKA,SACE,6BAAC,qBAAD,eACMJ,IADN;AAEE,IAAA,aAAa,EAAEK,UAFjB;AAGE,IAAA,iBAAiB,EAAEC,kBAHrB;AAIE,IAAA,MAAM,EAAER,MAAM,IAAI,sBAJpB;AAKE,IAAA,QAAQ,EAAEI,YALZ;AAME,IAAA,mBAAmB,EAAE,MAAMD,KAAK,CAACM,IAAN,EAN7B;AAOE,IAAA,oBAAoB,EAAE,MAAMN,KAAK,CAACO,KAAN,EAP9B;AAQE,IAAA,cAAc,EAAE,CAACC,QAAD,EAAWC,IAAX,KAAoBT,KAAK,CAACU,IAAN,CAClC,6BAAC,WAAD;AAAa,MAAA,OAAO,EAAED;AAAtB,OACGD,QADH,CADkC;AARtC,KADF;AAiBD,CA1BM;;;;AA4BP,MAAMG,WAA2B,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAY,KAAGC;AAAf,CAAD,KAA6B;AAC/D,SACE,6BAAC,gBAAD;AAAW,IAAA,YAAY,EAAEC;AAAzB,KAAiDD,MAAjD,GACGD,QADH,CADF;AAKD,CAND","sourcesContent":["import {\n DatePicker as DatePickerCore, DatePickerProps, SelectionType, Value\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { getLocale } from '../../../utils/date';\nimport { IBaseModal, ModalView, useLazyModalManager } from '../../atoms/Modal';\nimport { Text } from '../../atoms/Text';\nimport { Calendar } from '../Calendar';\nimport { CalendarBoxContent } from './styled';\n\nexport const DatePicker = <T extends SelectionType>({ locale, onChange, ...rest }: Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'>): JSX.Element => {\n\n const modal = useLazyModalManager()\n \n const handleChange = (value?: Value<T>) => {\n onChange?.(value)\n modal.requestUpdate()\n }\n \n return (\n <DatePickerCore\n {...rest}\n TextComponent={Text}\n CalendarComponent={Calendar}\n locale={locale ?? getLocale()}\n onChange={handleChange}\n requestShowCalendar={() => modal.show()}\n requestCloseCalendar={() => modal.close()}\n renderCalendar={(calendar, blur) => modal.sync(\n <NativeModal onClose={blur}>\n {calendar}\n </NativeModal>\n )}\n />\n );\n\n};\n\nconst NativeModal: FC<IBaseModal> = ({ children, ...others }) => {\n return (\n <ModalView BoxComponent={CalendarBoxContent} {...others}>\n {children}\n </ModalView>\n )\n}"],"file":"DatePicker.js"}
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ export declare const CalendarBoxContent: import("@emotion/native").StyledComponent<any, {}, {
3
+ ref?: import("react").Ref<any> | undefined;
4
+ }>;
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.CalendarBoxContent = void 0;
7
+
8
+ var _native = _interopRequireDefault(require("@emotion/native"));
9
+
10
+ var _reactCore = require("@tecsinapse/react-core");
11
+
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+
14
+ const CalendarBoxContent = (0, _native.default)(_reactCore.BoxContent)`
15
+ background-color: ${({
16
+ theme
17
+ }) => theme.color.secondary.xlight};
18
+ `;
19
+ exports.CalendarBoxContent = CalendarBoxContent;
20
+ //# sourceMappingURL=styled.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/components/molecules/DatePicker/styled.ts"],"names":["CalendarBoxContent","BoxContent","theme","color","secondary","xlight"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEO,MAAMA,kBAAkB,GAAG,qBAAOC,qBAAP,CAAwC;AAC1E,wBAAwB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,KAAN,CAAYC,SAAZ,CAAsBC,MAAO;AACpE,CAFO","sourcesContent":["import styled from \"@emotion/native\";\nimport { BoxContent, StyleProps } from \"@tecsinapse/react-core\";\n\nexport const CalendarBoxContent = styled(BoxContent)<Partial<StyleProps>>`\n background-color: ${({ theme }) => theme.color.secondary.xlight};\n`"],"file":"styled.js"}
@@ -1,3 +1,3 @@
1
1
  import { DateTimePickerProps } from '@tecsinapse/react-core';
2
2
  import { FC } from 'react';
3
- export declare const DateTimePicker: FC<DateTimePickerProps>;
3
+ export declare const DateTimePicker: FC<Omit<DateTimePickerProps, 'DateTimeSelectorComponent' | 'renderSelector' | 'requestCloseSelector' | 'requestShowSelector'>>;
@@ -9,12 +9,14 @@ var _reactCore = require("@tecsinapse/react-core");
9
9
 
10
10
  var _react = _interopRequireDefault(require("react"));
11
11
 
12
+ var _date = require("../../../utils/date");
13
+
14
+ var _Modal = require("../../atoms/Modal");
15
+
12
16
  var _Text = require("../../atoms/Text");
13
17
 
14
18
  var _DateTimeSelector = require("../DateTimeSelector");
15
19
 
16
- var _date = require("../../../utils/date");
17
-
18
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
21
 
20
22
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -23,13 +25,25 @@ const DateTimePicker = ({
23
25
  locale,
24
26
  ...rest
25
27
  }) => {
28
+ const modal = (0, _Modal.useLazyModalManager)();
26
29
  return _react.default.createElement(_reactCore.DateTimePicker, _extends({}, rest, {
27
30
  TextComponent: _Text.Text,
28
31
  DateTimeSelectorComponent: _DateTimeSelector.DateTimeSelector,
29
- animationType: "slide",
30
- locale: locale ?? (0, _date.getLocale)()
32
+ locale: locale ?? (0, _date.getLocale)(),
33
+ requestShowSelector: () => modal.show(),
34
+ requestCloseSelector: () => modal.close(),
35
+ renderSelector: (selector, blur) => modal.sync(_react.default.createElement(NativeModal, {
36
+ onClose: blur
37
+ }, selector))
31
38
  }));
32
39
  };
33
40
 
34
41
  exports.DateTimePicker = DateTimePicker;
42
+
43
+ const NativeModal = ({
44
+ children,
45
+ ...others
46
+ }) => {
47
+ return _react.default.createElement(_Modal.ModalView, others, children);
48
+ };
35
49
  //# sourceMappingURL=DateTimePicker.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/DateTimePicker.tsx"],"names":["DateTimePicker","locale","rest","Text","DateTimeSelector"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;AACA;;AACA;;;;;;AAEO,MAAMA,cAAuC,GAAG,CAAC;AACtDC,EAAAA,MADsD;AAEtD,KAAGC;AAFmD,CAAD,KAGjD;AACJ,SACE,6BAAC,yBAAD,eACMA,IADN;AAEE,IAAA,aAAa,EAAEC,UAFjB;AAGE,IAAA,yBAAyB,EAAEC,kCAH7B;AAIE,IAAA,aAAa,EAAC,OAJhB;AAKE,IAAA,MAAM,EAAEH,MAAM,IAAI;AALpB,KADF;AASD,CAbM","sourcesContent":["import {\n DateTimePicker as DateTimePickerCore,\n DateTimePickerProps,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { Text } from '../../atoms/Text';\nimport { DateTimeSelector } from '../DateTimeSelector';\nimport { getLocale } from '../../../utils/date';\n\nexport const DateTimePicker: FC<DateTimePickerProps> = ({\n locale,\n ...rest\n}) => {\n return (\n <DateTimePickerCore\n {...rest}\n TextComponent={Text}\n DateTimeSelectorComponent={DateTimeSelector}\n animationType=\"slide\"\n locale={locale ?? getLocale()}\n />\n );\n};\n"],"file":"DateTimePicker.js"}
1
+ {"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/DateTimePicker.tsx"],"names":["DateTimePicker","locale","rest","modal","Text","DateTimeSelector","show","close","selector","blur","sync","NativeModal","children","others"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEO,MAAMA,cAA8I,GAAG,CAAC;AAAEC,EAAAA,MAAF;AAAU,KAAGC;AAAb,CAAD,KAAyB;AAErL,QAAMC,KAAK,GAAG,iCAAd;AAEA,SACE,6BAAC,yBAAD,eACMD,IADN;AAEE,IAAA,aAAa,EAAEE,UAFjB;AAGE,IAAA,yBAAyB,EAAEC,kCAH7B;AAIE,IAAA,MAAM,EAAEJ,MAAM,IAAI,sBAJpB;AAKE,IAAA,mBAAmB,EAAE,MAAME,KAAK,CAACG,IAAN,EAL7B;AAME,IAAA,oBAAoB,EAAE,MAAMH,KAAK,CAACI,KAAN,EAN9B;AAOE,IAAA,cAAc,EAAE,CAACC,QAAD,EAAWC,IAAX,KAAoBN,KAAK,CAACO,IAAN,CAClC,6BAAC,WAAD;AAAa,MAAA,OAAO,EAAED;AAAtB,OACGD,QADH,CADkC;AAPtC,KADF;AAeD,CAnBM;;;;AAqBP,MAAMG,WAA2B,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAY,KAAGC;AAAf,CAAD,KAA6B;AAC/D,SACE,6BAAC,gBAAD,EAAeA,MAAf,EACGD,QADH,CADF;AAKD,CAND","sourcesContent":["import {\n DateTimePicker as DateTimePickerCore,\n DateTimePickerProps\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { getLocale } from '../../../utils/date';\nimport { IBaseModal, ModalView, useLazyModalManager } from '../../atoms/Modal';\nimport { Text } from '../../atoms/Text';\nimport { DateTimeSelector } from '../DateTimeSelector';\n\nexport const DateTimePicker: FC<Omit<DateTimePickerProps, 'DateTimeSelectorComponent' | 'renderSelector' | 'requestCloseSelector' | 'requestShowSelector'>> = ({ locale, ...rest }) => {\n\n const modal = useLazyModalManager()\n\n return (\n <DateTimePickerCore\n {...rest}\n TextComponent={Text}\n DateTimeSelectorComponent={DateTimeSelector}\n locale={locale ?? getLocale()}\n requestShowSelector={() => modal.show()}\n requestCloseSelector={() => modal.close()}\n renderSelector={(selector, blur) => modal.sync(\n <NativeModal onClose={blur}>\n {selector}\n </NativeModal>\n )}\n />\n );\n};\n\nconst NativeModal: FC<IBaseModal> = ({ children, ...others }) => {\n return (\n <ModalView {...others}>\n {children}\n </ModalView>\n )\n}"],"file":"DateTimePicker.js"}
@@ -0,0 +1,7 @@
1
+ import { IBaseModal } from '../../atoms/Modal';
2
+ import { SelectNativeProps } from './Select';
3
+ interface LoadingProps {
4
+ loading?: boolean;
5
+ }
6
+ export declare const Modal: <Data, Type extends "single" | "multi">({ options, keyExtractor, labelExtractor, groupKeyExtractor, hideSearchBar, searchBarPlaceholder, focused, type, value, onSelect, onSearch, selectModalTitle, selectModalTitleComponent, confirmButtonText, loading, close, closeOnPick, ...others }: SelectNativeProps<Data, Type> & LoadingProps & IBaseModal) => JSX.Element;
7
+ export {};