@widergy/mobile-ui 1.19.3 → 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.
Files changed (6) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/lib/components/UTBottomSheet/index.js +1 -1
  3. package/lib/components/UTBottomSheet/styles.js +18 -14
  4. package/lib/components/UTWorkflowContainer/versions/V1/index.js +52 -33
  5. package/lib/components/UTWorkflowContainer/versions/V1/styles.js +3 -0
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
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
+
8
+ ## [1.19.4](https://github.com/widergy/mobile-ui/compare/v1.19.3...v1.19.4) (2024-08-26)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * large select titles bug ([#346](https://github.com/widergy/mobile-ui/issues/346)) ([bba65c5](https://github.com/widergy/mobile-ui/commit/bba65c57db1300a6aeb20f583201c1fe23d46125))
14
+
1
15
  ## [1.19.3](https://github.com/widergy/mobile-ui/compare/v1.19.2...v1.19.3) (2024-08-26)
2
16
 
3
17
 
package/lib/components/UTBottomSheet/index.js CHANGED
@@ -97,7 +97,7 @@ const UTBottomSheet = ({
97
97
  <View style={styles.content}>
98
98
  <View style={styles.header}>
99
99
  <View style={styles.headerTopRow}>
100
- <UTFieldLabel required={required} variant="subtitle1" weight="medium">
100
+ <UTFieldLabel required={required} variant="subtitle1" weight="medium" style={styles.title}>
101
101
  {title}
102
102
  </UTFieldLabel>
103
103
  {buttonText && (
package/lib/components/UTBottomSheet/styles.js CHANGED
@@ -7,18 +7,33 @@ const styles = StyleSheet.create({
7
7
  borderTopRightRadius: 20,
8
8
  overflow: 'hidden'
9
9
  },
10
+ childrenContainer: {
11
+ flexShrink: 1
12
+ },
10
13
  content: {
11
14
  flex: 1,
12
15
  padding: 16,
13
16
  rowGap: 16
14
17
  },
18
+ dragHandle: {
19
+ alignItems: 'center',
20
+ backgroundColor: 'transparent',
21
+ padding: 16
22
+ },
23
+ handleIndicator: theme => ({
24
+ backgroundColor: theme.Palette.light['04'], // When the component is standardized, should change to palette color: light 04
25
+ borderRadius: 2.5,
26
+ height: 5,
27
+ width: 40
28
+ }),
15
29
  header: {
16
30
  rowGap: 8
17
31
  },
18
32
  headerTopRow: {
19
33
  alignItems: 'center',
20
34
  flexDirection: 'row',
21
- justifyContent: 'space-between'
35
+ justifyContent: 'space-between',
36
+ columnGap: 16
22
37
  },
23
38
  modal: {
24
39
  justifyContent: 'flex-end',
@@ -27,19 +42,8 @@ const styles = StyleSheet.create({
27
42
  safeArea: {
28
43
  flex: 1
29
44
  },
30
- dragHandle: {
31
- alignItems: 'center',
32
- backgroundColor: 'transparent',
33
- padding: 16
34
- },
35
- handleIndicator: theme => ({
36
- backgroundColor: theme.Palette.light['04'], // When the component is standardized, should change to palette color: light 04
37
- borderRadius: 2.5,
38
- height: 5,
39
- width: 40
40
- }),
41
- childrenContainer: {
42
- flexShrink: 1
45
+ title: {
46
+ flex: 1
43
47
  }
44
48
  });
45
49
 
package/lib/components/UTWorkflowContainer/versions/V1/index.js CHANGED
@@ -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 = {
package/lib/components/UTWorkflowContainer/versions/V1/styles.js CHANGED
@@ -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.3",
5
+ "version": "1.19.5",
6
6
  "repository": "https://github.com/widergy/mobile-ui.git",
7
7
  "main": "lib/index.js",
8
8
  "files": [