@widergy/mobile-ui 1.33.0 → 1.33.1
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 +7 -0
- package/lib/components/UTBottomSheet/README.md +22 -20
- package/lib/components/UTBottomSheet/index.js +26 -35
- package/lib/components/UTBottomSheet/styles.js +0 -4
- package/lib/components/UTFieldLabel/index.js +1 -1
- package/lib/components/UTRating/styles.js +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## [1.33.1](https://github.com/widergy/mobile-ui/compare/v1.33.0...v1.33.1) (2025-01-10)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* [UGEE-72] nps surveys ([#402](https://github.com/widergy/mobile-ui/issues/402)) ([15d6993](https://github.com/widergy/mobile-ui/commit/15d69934f0d222c1698dc6175b4170894a5754a5))
|
|
7
|
+
|
|
1
8
|
# [1.33.0](https://github.com/widergy/mobile-ui/compare/v1.32.16...v1.33.0) (2025-01-07)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -6,26 +6,28 @@
|
|
|
6
6
|
|
|
7
7
|
## Props
|
|
8
8
|
|
|
9
|
-
| Name | Type | Default | Description
|
|
10
|
-
| ------------------------- | -------- | ----------- | ---------------------------------------------------------------------------
|
|
11
|
-
| `
|
|
12
|
-
| `
|
|
13
|
-
| `
|
|
14
|
-
| `
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
19
|
-
| `
|
|
20
|
-
| `
|
|
21
|
-
| `
|
|
22
|
-
| `
|
|
23
|
-
| `
|
|
24
|
-
| `
|
|
25
|
-
| `
|
|
26
|
-
| `
|
|
27
|
-
| `
|
|
28
|
-
| `
|
|
9
|
+
| Name | Type | Default | Description |
|
|
10
|
+
| ------------------------- | -------- | ----------- | --------------------------------------------------------------------------- |
|
|
11
|
+
| `adjustableHeight` | `bool` | `false` | If true the height of the component adjusts to the content. |
|
|
12
|
+
| `buttonText` | `string` | | Text for the button that appears in the top right corner of the header. |
|
|
13
|
+
| `description` | `string` | | Description that appears below the title in the header. |
|
|
14
|
+
| `onClose` | `func` | | Function called when the bottom sheet is closed. |
|
|
15
|
+
| `required` | `bool` | | Indicates if the field is required, showing an asterisk in the title. |
|
|
16
|
+
| `title` | `string` | | Title that appears in the bottom sheet header. |
|
|
17
|
+
| `titleProps` | `object` | | Props for the title label |
|
|
18
|
+
| `visible` | `bool` | | Controls the visibility of the bottom sheet. |
|
|
19
|
+
| `scrolleable` | `bool` | `false` | Determines if the content inside the bottom sheet should be scrollable. |
|
|
20
|
+
| `actionAlignment` | `string` | | Aligns the actions. |
|
|
21
|
+
| `onCloseProps` | `object` | | Additional props passed to the `onClose` function (optional). |
|
|
22
|
+
| `primaryAction` | `func` | | Callback for the primary action button. |
|
|
23
|
+
| `primaryActionProps` | `object` | | Props for the primary action button. |
|
|
24
|
+
| `primaryActionText` | `string` | | Text for the primary action button. |
|
|
25
|
+
| `secondaryAction` | `func` | | Callback for the secondary action button. |
|
|
26
|
+
| `secondaryActionProps` | `object` | | Props for the secondary action button. |
|
|
27
|
+
| `secondaryActionText` | `string` | | Text for the secondary action button. |
|
|
28
|
+
| `tertiaryAction` | `func` | | Callback for the tertiary action button. |
|
|
29
|
+
| `tertiaryActionProps` | `object` | | Props for the tertiary action button . |
|
|
30
|
+
| `tertiaryActionText` | `string` | | Text for the tertiary action button. |
|
|
29
31
|
|
|
30
32
|
### actionAlignment
|
|
31
33
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, { useRef, useState, useEffect, useCallback
|
|
2
|
-
import { SafeAreaView, View,
|
|
1
|
+
import React, { useRef, useState, useEffect, useCallback } from 'react';
|
|
2
|
+
import { SafeAreaView, View, Animated, Dimensions, ScrollView, Keyboard } from 'react-native';
|
|
3
3
|
import Modal from 'react-native-modal';
|
|
4
4
|
import { bool, func, object, string } from 'prop-types';
|
|
5
5
|
|
|
@@ -14,6 +14,7 @@ import { ACTION_ALIGNMENTS } from './constants';
|
|
|
14
14
|
const screenHeight = Dimensions.get('window').height;
|
|
15
15
|
|
|
16
16
|
const UTBottomSheet = ({
|
|
17
|
+
adjustableHeight = false,
|
|
17
18
|
actionAlignment: actionAlignment_,
|
|
18
19
|
buttonText,
|
|
19
20
|
children,
|
|
@@ -32,45 +33,22 @@ const UTBottomSheet = ({
|
|
|
32
33
|
tertiaryActionProps = {},
|
|
33
34
|
tertiaryActionText,
|
|
34
35
|
title,
|
|
36
|
+
titleProps = {},
|
|
35
37
|
visible
|
|
36
38
|
}) => {
|
|
37
|
-
const [
|
|
38
|
-
const [modalHeight, setModalHeight] = useState(
|
|
39
|
+
const [height, setHeight] = useState('70%');
|
|
40
|
+
const [modalHeight, setModalHeight] = useState(height);
|
|
39
41
|
const pan = useRef(new Animated.ValueXY()).current;
|
|
40
42
|
|
|
41
43
|
const theme = useTheme();
|
|
42
44
|
|
|
43
|
-
const panResponder = useMemo(
|
|
44
|
-
() =>
|
|
45
|
-
PanResponder.create({
|
|
46
|
-
onMoveShouldSetPanResponder: (_, gestureState) => gestureState.dy > 0,
|
|
47
|
-
onPanResponderMove: (_, gestureState) => {
|
|
48
|
-
if (gestureState.dy > 0) {
|
|
49
|
-
pan.setValue({ x: 0, y: gestureState.dy });
|
|
50
|
-
}
|
|
51
|
-
},
|
|
52
|
-
onPanResponderRelease: (_, gestureState) => {
|
|
53
|
-
if (gestureState.dy > 50) {
|
|
54
|
-
setIsFullScreen(true);
|
|
55
|
-
pan.flattenOffset();
|
|
56
|
-
} else {
|
|
57
|
-
Animated.spring(pan, {
|
|
58
|
-
toValue: { x: 0, y: 0 },
|
|
59
|
-
useNativeDriver: false
|
|
60
|
-
}).start();
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
}),
|
|
64
|
-
[pan]
|
|
65
|
-
);
|
|
66
|
-
|
|
67
45
|
const handleKeyboardDidShow = useCallback(e => {
|
|
68
46
|
setModalHeight(screenHeight - e.endCoordinates.height);
|
|
69
47
|
}, []);
|
|
70
48
|
|
|
71
49
|
const handleKeyboardDidHide = useCallback(() => {
|
|
72
|
-
setModalHeight(
|
|
73
|
-
}, [
|
|
50
|
+
setModalHeight(height);
|
|
51
|
+
}, [height]);
|
|
74
52
|
|
|
75
53
|
useEffect(() => {
|
|
76
54
|
const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', handleKeyboardDidShow);
|
|
@@ -82,9 +60,14 @@ const UTBottomSheet = ({
|
|
|
82
60
|
};
|
|
83
61
|
}, [handleKeyboardDidShow, handleKeyboardDidHide]);
|
|
84
62
|
|
|
63
|
+
const onLayout = useCallback(event => {
|
|
64
|
+
const { height: layoutHeight } = event.nativeEvent.layout;
|
|
65
|
+
if (adjustableHeight) setHeight(layoutHeight);
|
|
66
|
+
}, []);
|
|
67
|
+
|
|
85
68
|
useEffect(() => {
|
|
86
|
-
setModalHeight(
|
|
87
|
-
}, [
|
|
69
|
+
setModalHeight(height);
|
|
70
|
+
}, [height]);
|
|
88
71
|
|
|
89
72
|
const ChildrenContainer = scrolleable ? ScrollView : View;
|
|
90
73
|
|
|
@@ -107,14 +90,20 @@ const UTBottomSheet = ({
|
|
|
107
90
|
swipeDirection="down"
|
|
108
91
|
>
|
|
109
92
|
<Animated.View style={[styles.animatedContainer, { height: modalHeight }, pan.getLayout()]}>
|
|
110
|
-
<SafeAreaView
|
|
111
|
-
<View style={styles.dragHandle}
|
|
93
|
+
<SafeAreaView onLayout={onLayout}>
|
|
94
|
+
<View style={styles.dragHandle}>
|
|
112
95
|
<View style={styles.handleIndicator(theme)} />
|
|
113
96
|
</View>
|
|
114
97
|
<View style={styles.content}>
|
|
115
98
|
<View style={styles.header}>
|
|
116
99
|
<View style={styles.headerTopRow}>
|
|
117
|
-
<UTFieldLabel
|
|
100
|
+
<UTFieldLabel
|
|
101
|
+
required={required}
|
|
102
|
+
style={styles.title}
|
|
103
|
+
variant="subtitle1"
|
|
104
|
+
weight="medium"
|
|
105
|
+
{...titleProps}
|
|
106
|
+
>
|
|
118
107
|
{title}
|
|
119
108
|
</UTFieldLabel>
|
|
120
109
|
{buttonText && (
|
|
@@ -186,6 +175,7 @@ UTBottomSheet.defaultProps = {
|
|
|
186
175
|
};
|
|
187
176
|
|
|
188
177
|
UTBottomSheet.propTypes = {
|
|
178
|
+
adjustableHeight: bool,
|
|
189
179
|
actionAlignment: string,
|
|
190
180
|
buttonText: string,
|
|
191
181
|
description: string,
|
|
@@ -203,6 +193,7 @@ UTBottomSheet.propTypes = {
|
|
|
203
193
|
tertiaryActionProps: object,
|
|
204
194
|
tertiaryActionText: string,
|
|
205
195
|
title: string,
|
|
196
|
+
titleProps: object,
|
|
206
197
|
visible: bool
|
|
207
198
|
};
|
|
208
199
|
|
|
@@ -13,7 +13,6 @@ const styles = StyleSheet.create({
|
|
|
13
13
|
flexShrink: 1
|
|
14
14
|
},
|
|
15
15
|
content: {
|
|
16
|
-
flex: 1,
|
|
17
16
|
padding: 16,
|
|
18
17
|
rowGap: 16
|
|
19
18
|
},
|
|
@@ -41,9 +40,6 @@ const styles = StyleSheet.create({
|
|
|
41
40
|
justifyContent: 'flex-end',
|
|
42
41
|
margin: 0
|
|
43
42
|
},
|
|
44
|
-
safeArea: {
|
|
45
|
-
flex: 1
|
|
46
|
-
},
|
|
47
43
|
title: {
|
|
48
44
|
flex: 1
|
|
49
45
|
},
|
|
@@ -9,7 +9,7 @@ import styles from './styles';
|
|
|
9
9
|
|
|
10
10
|
const UTFieldLabel = ({ children, colorTheme, required, style, variant, weight, withMarkdown }) => (
|
|
11
11
|
<View style={[styles.label, style]}>
|
|
12
|
-
<UTLabel colorTheme={colorTheme} variant={variant} withMarkdown={withMarkdown}>
|
|
12
|
+
<UTLabel colorTheme={colorTheme} variant={variant} weight={weight} withMarkdown={withMarkdown}>
|
|
13
13
|
{children}
|
|
14
14
|
</UTLabel>
|
|
15
15
|
{required && (
|
|
@@ -26,7 +26,7 @@ export default StyleSheet.create({
|
|
|
26
26
|
return {
|
|
27
27
|
alignContent: 'center',
|
|
28
28
|
display: 'flex',
|
|
29
|
-
flexBasis: breakOptions ? (containerWidth -
|
|
29
|
+
flexBasis: breakOptions ? (containerWidth - topItems * 4) / topItems : 0,
|
|
30
30
|
flexDirection: 'row',
|
|
31
31
|
flexGrow: breakOptions ? 0 : 1,
|
|
32
32
|
flexShrink: 0,
|
package/package.json
CHANGED