@tecsinapse/react-native-kit 4.0.0-beta.5 → 4.0.0-beta.6

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 (5) hide show
  1. package/dist/cjs/components/atoms/Modal/ui/BaseModalView.js +21 -4
  2. package/dist/esm/components/atoms/Modal/ui/BaseModalView.js +23 -6
  3. package/dist/types/components/atoms/Modal/ui/types.d.ts +1 -0
  4. package/dist/types/components/molecules/Select/hooks/useModal.d.ts +1 -0
  5. package/package.json +3 -3
package/dist/cjs/components/atoms/Modal/ui/BaseModalView.js CHANGED
@@ -17,6 +17,7 @@ const ModalView = ({
17
17
  BoxComponent = reactCore.BoxContent,
18
18
  frozen,
19
19
  isLastShown,
20
+ isRaiseKeyboard = true,
20
21
  showCloseBar = true,
21
22
  close,
22
23
  onClose
@@ -29,6 +30,15 @@ const ModalView = ({
29
30
  const translationCarrier = React.useRef(new reactNative.Animated.Value(0)).current;
30
31
  const opacityCarrier = React.useRef(new reactNative.Animated.Value(0)).current;
31
32
  const offset = isLastShown && keyboardOpened > 0 ? 0 : bottom;
33
+ const getKeyboardHeight = (keyboard) => {
34
+ if (keyboard === 0) return 0;
35
+ const wHeight = Math.ceil(reactNative.Dimensions.get("window").height);
36
+ const sHeight = Math.ceil(reactNative.Dimensions.get("screen").height);
37
+ if (wHeight !== sHeight) {
38
+ return keyboard + (sHeight - wHeight - (reactNative.StatusBar.currentHeight || 0));
39
+ }
40
+ return keyboard;
41
+ };
32
42
  const show = React.useCallback(() => {
33
43
  reactNative.Animated.sequence([
34
44
  reactNative.Animated.timing(backgroundCarrier, {
@@ -113,13 +123,20 @@ const ModalView = ({
113
123
  hideEvent.remove();
114
124
  };
115
125
  }, []);
116
- return /* @__PURE__ */ jsxRuntime.jsx(styled.StyledPressableBackDrop, { onPress: !frozen ? close : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(styled.BackDropView, { style: { backgroundColor: backgroundInterpolation }, children: /* @__PURE__ */ jsxRuntime.jsx(
117
- reactNative.Animated.View,
118
- {
119
- style: {
126
+ const viewStyle = React.useMemo(
127
+ () => [
128
+ {
120
129
  opacity: opacityCarrier,
121
130
  transform: [{ translateY: translationCarrier }]
122
131
  },
132
+ isLastShown && isRaiseKeyboard ? { paddingBottom: getKeyboardHeight(keyboardOpened) } : null
133
+ ],
134
+ [opacityCarrier, translationCarrier, isLastShown, isRaiseKeyboard, keyboardOpened]
135
+ );
136
+ return /* @__PURE__ */ jsxRuntime.jsx(styled.StyledPressableBackDrop, { onPress: !frozen ? close : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(styled.BackDropView, { style: { backgroundColor: backgroundInterpolation }, children: /* @__PURE__ */ jsxRuntime.jsx(
137
+ reactNative.Animated.View,
138
+ {
139
+ style: viewStyle,
123
140
  children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { children: /* @__PURE__ */ jsxRuntime.jsxs(
124
141
  BoxComponent,
125
142
  {
package/dist/esm/components/atoms/Modal/ui/BaseModalView.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import { BoxContent } from '@tecsinapse/react-core';
3
- import { useState, useRef, useCallback, useEffect } from 'react';
4
- import { Animated, Easing, Keyboard, Pressable } from 'react-native';
3
+ import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
4
+ import { Animated, Easing, Keyboard, Pressable, Dimensions, StatusBar } from 'react-native';
5
5
  import { useSafeAreaInsets } from 'react-native-safe-area-context';
6
6
  import { StyledPressableBackDrop, BackDropView, CloseBar } from './styled.js';
7
7
 
@@ -15,6 +15,7 @@ const ModalView = ({
15
15
  BoxComponent = BoxContent,
16
16
  frozen,
17
17
  isLastShown,
18
+ isRaiseKeyboard = true,
18
19
  showCloseBar = true,
19
20
  close,
20
21
  onClose
@@ -27,6 +28,15 @@ const ModalView = ({
27
28
  const translationCarrier = useRef(new Animated.Value(0)).current;
28
29
  const opacityCarrier = useRef(new Animated.Value(0)).current;
29
30
  const offset = isLastShown && keyboardOpened > 0 ? 0 : bottom;
31
+ const getKeyboardHeight = (keyboard) => {
32
+ if (keyboard === 0) return 0;
33
+ const wHeight = Math.ceil(Dimensions.get("window").height);
34
+ const sHeight = Math.ceil(Dimensions.get("screen").height);
35
+ if (wHeight !== sHeight) {
36
+ return keyboard + (sHeight - wHeight - (StatusBar.currentHeight || 0));
37
+ }
38
+ return keyboard;
39
+ };
30
40
  const show = useCallback(() => {
31
41
  Animated.sequence([
32
42
  Animated.timing(backgroundCarrier, {
@@ -111,13 +121,20 @@ const ModalView = ({
111
121
  hideEvent.remove();
112
122
  };
113
123
  }, []);
114
- return /* @__PURE__ */ jsx(StyledPressableBackDrop, { onPress: !frozen ? close : void 0, children: /* @__PURE__ */ jsx(BackDropView, { style: { backgroundColor: backgroundInterpolation }, children: /* @__PURE__ */ jsx(
115
- Animated.View,
116
- {
117
- style: {
124
+ const viewStyle = useMemo(
125
+ () => [
126
+ {
118
127
  opacity: opacityCarrier,
119
128
  transform: [{ translateY: translationCarrier }]
120
129
  },
130
+ isLastShown && isRaiseKeyboard ? { paddingBottom: getKeyboardHeight(keyboardOpened) } : null
131
+ ],
132
+ [opacityCarrier, translationCarrier, isLastShown, isRaiseKeyboard, keyboardOpened]
133
+ );
134
+ return /* @__PURE__ */ jsx(StyledPressableBackDrop, { onPress: !frozen ? close : void 0, children: /* @__PURE__ */ jsx(BackDropView, { style: { backgroundColor: backgroundInterpolation }, children: /* @__PURE__ */ jsx(
135
+ Animated.View,
136
+ {
137
+ style: viewStyle,
121
138
  children: /* @__PURE__ */ jsx(Pressable, { children: /* @__PURE__ */ jsxs(
122
139
  BoxComponent,
123
140
  {
package/dist/types/components/atoms/Modal/ui/types.d.ts CHANGED
@@ -4,6 +4,7 @@ export interface IBaseModal {
4
4
  BoxComponent?: React.FC<any>;
5
5
  frozen?: boolean;
6
6
  isLastShown?: boolean;
7
+ isRaiseKeyboard?: boolean;
7
8
  showCloseBar?: boolean;
8
9
  close?: () => void;
9
10
  onClose?: () => void;
package/dist/types/components/molecules/Select/hooks/useModal.d.ts CHANGED
@@ -39,6 +39,7 @@ declare const useModal: <Data, Type extends SelectType>({ keyExtractor, labelExt
39
39
  BoxComponent?: React.FC<any>;
40
40
  frozen?: boolean;
41
41
  isLastShown?: boolean;
42
+ isRaiseKeyboard?: boolean;
42
43
  showCloseBar?: boolean;
43
44
  onClose?: () => void;
44
45
  children?: React.ReactNode;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tecsinapse/react-native-kit",
3
3
  "description": "React Native components library",
4
- "version": "4.0.0-beta.5",
4
+ "version": "4.0.0-beta.6",
5
5
  "license": "MIT",
6
6
  "main": "dist/esm/index.js",
7
7
  "module": "dist/esm/index.js",
@@ -18,7 +18,7 @@
18
18
  "dependencies": {
19
19
  "@emotion/native": "~11.11.0",
20
20
  "@emotion/react": "~11.11.0",
21
- "@tecsinapse/react-core": "4.0.0-beta.5",
21
+ "@tecsinapse/react-core": "4.0.0-beta.6",
22
22
  "react-native-linear-gradient": "~2.8.3"
23
23
  },
24
24
  "devDependencies": {
@@ -40,5 +40,5 @@
40
40
  "react-native-safe-area-context": "^4.0.0",
41
41
  "react-native-vector-icons": "^9.2.0"
42
42
  },
43
- "gitHead": "efb59880531ec51a7e64d29ead2cc8bf53095d71"
43
+ "gitHead": "c12a0719e81731c8248d9310b98025a58d69e1a6"
44
44
  }