@widergy/mobile-ui 1.19.4 → 1.19.5

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 CHANGED
@@ -1,3 +1,10 @@
1
+ ## [1.19.5](https://github.com/widergy/mobile-ui/compare/v1.19.4...v1.19.5) (2024-08-26)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * keyboard avoid for utworkflowcontainer ([#344](https://github.com/widergy/mobile-ui/issues/344)) ([dec152b](https://github.com/widergy/mobile-ui/commit/dec152bf85b95b7503825574afb56596066c42bc))
7
+
1
8
  ## [1.19.4](https://github.com/widergy/mobile-ui/compare/v1.19.3...v1.19.4) (2024-08-26)
2
9
 
3
10
 
@@ -1,5 +1,5 @@
1
- import React, { useEffect } from 'react';
2
- import { ScrollView, View } from 'react-native';
1
+ import React, { useEffect, useState } from 'react';
2
+ import { ScrollView, View, KeyboardAvoidingView, Keyboard } from 'react-native';
3
3
  import { number, func, shape, bool, string, element, oneOfType } from 'prop-types';
4
4
  import { merge } from 'lodash';
5
5
  import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -9,6 +9,7 @@ import UTHeader from '../../../UTHeader';
9
9
  import UTTopbar from '../../../UTTopbar';
10
10
  import { StagesPropTypes } from '../../../UTStepper/types';
11
11
  import { TopbarPropTypes } from '../../../UTTopbar/types';
12
+ import { IS_IOS } from '../../../../utils/platformUtils/constants';
12
13
 
13
14
  import ownStyles from './styles';
14
15
  import BottomActions from './components/BottomActions';
@@ -40,46 +41,64 @@ const UTWorkflowContainer = ({
40
41
  const { bottom: bottomSafeArea, top: topSafeArea } = useSafeAreaInsets();
41
42
  // eslint-disable-next-line react-hooks/exhaustive-deps
42
43
  useEffect(() => () => onExit?.(), []);
44
+
45
+ const [isKeyboardVisible, setKeyboardVisible] = useState(false);
46
+ useEffect(() => {
47
+ const keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', () => {
48
+ setKeyboardVisible(true);
49
+ });
50
+ const keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', () => {
51
+ setKeyboardVisible(false);
52
+ });
53
+
54
+ return () => {
55
+ keyboardWillHideListener.remove();
56
+ keyboardWillShowListener.remove();
57
+ };
58
+ }, []);
59
+
43
60
  const theme = useTheme();
44
61
  const themedStyles = merge({}, ownStyles, theme?.UTWorkflowContainer, style);
45
62
 
46
63
  return (
47
- <View style={[themedStyles.container, topbar && themedStyles.topSafeArea(topSafeArea)]}>
48
- {topbar && <UTTopbar {...{ currentStage, currentStep, stages, stepsCount, theme, topbar }} />}
49
- <ScrollView
50
- contentContainerStyle={themedStyles.content}
51
- keyboardShouldPersistTaps="handled"
52
- scrollEnabled={scrollable}
53
- >
54
- {title && (
55
- <UTHeader
64
+ <KeyboardAvoidingView behavior={IS_IOS ? 'padding' : ''} style={themedStyles.layoutContainer}>
65
+ <View style={[themedStyles.container, topbar && themedStyles.topSafeArea(topSafeArea)]}>
66
+ {topbar && <UTTopbar {...{ currentStage, currentStep, stages, stepsCount, theme, topbar }} />}
67
+ <ScrollView
68
+ contentContainerStyle={themedStyles.content}
69
+ keyboardShouldPersistTaps="handled"
70
+ scrollEnabled={scrollable}
71
+ >
72
+ {title && (
73
+ <UTHeader
74
+ {...{
75
+ banner,
76
+ helpText,
77
+ requiredFieldInfo,
78
+ style: themedStyles,
79
+ subtitle,
80
+ tagline,
81
+ title,
82
+ useMarkdown
83
+ }}
84
+ />
85
+ )}
86
+ {children}
87
+ </ScrollView>
88
+ {((nextButton && !nextButton?.hidden) || (returnButton && !returnButton?.hidden)) && (
89
+ <BottomActions
56
90
  {...{
57
- banner,
58
- helpText,
59
- requiredFieldInfo,
91
+ message,
92
+ nextButton,
93
+ returnButton,
60
94
  style: themedStyles,
61
- subtitle,
62
- tagline,
63
- title,
64
- useMarkdown
95
+ bottomSafeArea: isKeyboardVisible ? 0 : bottomSafeArea,
96
+ summary
65
97
  }}
66
98
  />
67
99
  )}
68
- {children}
69
- </ScrollView>
70
- {((nextButton && !nextButton?.hidden) || (returnButton && !returnButton?.hidden)) && (
71
- <BottomActions
72
- {...{
73
- message,
74
- nextButton,
75
- returnButton,
76
- style: themedStyles,
77
- bottomSafeArea,
78
- summary
79
- }}
80
- />
81
- )}
82
- </View>
100
+ </View>
101
+ </KeyboardAvoidingView>
83
102
  );
84
103
  };
85
104
  UTWorkflowContainer.propTypes = {
@@ -1,6 +1,9 @@
1
1
  import { StyleSheet } from 'react-native';
2
2
 
3
3
  export default StyleSheet.create({
4
+ layoutContainer: {
5
+ flex: 1
6
+ },
4
7
  container: {
5
8
  backgroundColor: 'white',
6
9
  flex: 1,
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@widergy/mobile-ui",
3
3
  "description": "Widergy Mobile Components",
4
4
  "author": "widergy",
5
- "version": "1.19.4",
5
+ "version": "1.19.5",
6
6
  "repository": "https://github.com/widergy/mobile-ui.git",
7
7
  "main": "lib/index.js",
8
8
  "files": [