@widergy/mobile-ui 1.48.2 → 1.49.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
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
## [1.49.1](https://github.com/widergy/mobile-ui/compare/v1.49.0...v1.49.1) (2025-06-12)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* [UGC-1546] modal closes on backdrop press ([#442](https://github.com/widergy/mobile-ui/issues/442)) ([f2d2297](https://github.com/widergy/mobile-ui/commit/f2d22977cc24c16154895f9a16909bd7587d1257))
|
|
7
|
+
|
|
8
|
+
# [1.49.0](https://github.com/widergy/mobile-ui/compare/v1.48.2...v1.49.0) (2025-06-11)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* [UGEE-272] OnBoarding mobile ([#438](https://github.com/widergy/mobile-ui/issues/438)) ([5f0d6de](https://github.com/widergy/mobile-ui/commit/5f0d6defd4afbbffa81575802f21da68017b449d))
|
|
14
|
+
|
|
1
15
|
## [1.48.2](https://github.com/widergy/mobile-ui/compare/v1.48.1...v1.48.2) (2025-06-10)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -5,7 +5,8 @@ import {
|
|
|
5
5
|
Keyboard,
|
|
6
6
|
Modal,
|
|
7
7
|
ImageBackground,
|
|
8
|
-
KeyboardAvoidingView
|
|
8
|
+
KeyboardAvoidingView,
|
|
9
|
+
Pressable
|
|
9
10
|
} from 'react-native';
|
|
10
11
|
import _ from 'lodash';
|
|
11
12
|
|
|
@@ -58,6 +59,16 @@ const UTModal = ({
|
|
|
58
59
|
const styles = _.merge({}, ownStyles, themeStyles, style);
|
|
59
60
|
|
|
60
61
|
const ParentView = disableTouchable ? View : TouchableWithoutFeedback;
|
|
62
|
+
|
|
63
|
+
const handleParentViewPress = () => {
|
|
64
|
+
Keyboard.dismiss();
|
|
65
|
+
if (!loading) onRequestClose();
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
const handleModalContentPress = () => {
|
|
69
|
+
Keyboard.dismiss();
|
|
70
|
+
};
|
|
71
|
+
|
|
61
72
|
return (
|
|
62
73
|
<Modal
|
|
63
74
|
animationType="fade"
|
|
@@ -67,7 +78,7 @@ const UTModal = ({
|
|
|
67
78
|
testID={dataTestId}
|
|
68
79
|
>
|
|
69
80
|
<KeyboardAvoidingView behavior={IS_IOS ? 'padding' : 'height'} style={styles.keyboardAvoidingView}>
|
|
70
|
-
<ParentView onPress={
|
|
81
|
+
<ParentView onPress={handleParentViewPress} style={[disableTouchable && styles.viewContainer]}>
|
|
71
82
|
<View style={styles.childView} forceInset={{ top: 'never' }}>
|
|
72
83
|
<View
|
|
73
84
|
style={[
|
|
@@ -75,86 +86,92 @@ const UTModal = ({
|
|
|
75
86
|
modalBackgroundColor && { backgroundColor: modalBackgroundColor }
|
|
76
87
|
]}
|
|
77
88
|
>
|
|
78
|
-
<
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
{
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
{
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
<View style={
|
|
104
|
-
{!!title &&
|
|
105
|
-
|
|
106
|
-
|
|
89
|
+
<Pressable onPress={handleModalContentPress}>
|
|
90
|
+
<UTLoading
|
|
91
|
+
loading={loading}
|
|
92
|
+
style={[styles.innerContainer, styles.loading]}
|
|
93
|
+
message={loadingText}
|
|
94
|
+
>
|
|
95
|
+
<View style={[styles.innerContainer, modalStyles?.innerContainer]}>
|
|
96
|
+
{!!backgroundImg && (
|
|
97
|
+
<ImageBackground source={backgroundImg} resizeMode="stretch" style={backgroundStyles} />
|
|
98
|
+
)}
|
|
99
|
+
{!!imageComponent && (
|
|
100
|
+
<View style={[styles.content, imageStyles]}>
|
|
101
|
+
{!hideCloseButton && (
|
|
102
|
+
<UTButton
|
|
103
|
+
colorTheme={closeButtonColorTheme}
|
|
104
|
+
Icon="IconX"
|
|
105
|
+
onPress={onRequestClose}
|
|
106
|
+
style={{ root: styles.closeButton }}
|
|
107
|
+
variant="text"
|
|
108
|
+
dataTestId={`${dataTestId}.${closeButton}`}
|
|
109
|
+
/>
|
|
110
|
+
)}
|
|
111
|
+
<View style={styles.imageContainer}>{imageComponent}</View>
|
|
112
|
+
</View>
|
|
113
|
+
)}
|
|
114
|
+
<View style={styles.content}>
|
|
115
|
+
<View style={[styles.headerContainer, !!title && styles.closeButtonContainer]}>
|
|
116
|
+
{!!title && (
|
|
117
|
+
<UTLabel
|
|
118
|
+
variant="title3"
|
|
119
|
+
weight="medium"
|
|
120
|
+
dataTestId={`${dataTestId}.${titleTestId}`}
|
|
121
|
+
>
|
|
122
|
+
{title}
|
|
123
|
+
</UTLabel>
|
|
124
|
+
)}
|
|
125
|
+
{!backgroundImg && !imageComponent && !hideCloseButton && (
|
|
126
|
+
<UTButton
|
|
127
|
+
colorTheme={closeButtonColorTheme}
|
|
128
|
+
Icon="IconX"
|
|
129
|
+
onPress={onRequestClose}
|
|
130
|
+
style={{ root: styles.closeButton }}
|
|
131
|
+
variant="text"
|
|
132
|
+
dataTestId={`${dataTestId}.${closeButton}`}
|
|
133
|
+
/>
|
|
134
|
+
)}
|
|
135
|
+
</View>
|
|
136
|
+
{!!subtitle && (
|
|
137
|
+
<UTLabel
|
|
138
|
+
colorTheme="gray"
|
|
139
|
+
{...subtitleProps}
|
|
140
|
+
dataTestId={`${dataTestId}.${subtitleTestId}`}
|
|
141
|
+
>
|
|
142
|
+
{subtitle}
|
|
107
143
|
</UTLabel>
|
|
108
144
|
)}
|
|
109
|
-
|
|
145
|
+
|
|
146
|
+
{children}
|
|
147
|
+
</View>
|
|
148
|
+
{!hideSeparatorBar && <SeparatorBar />}
|
|
149
|
+
<View style={styles.buttonsContainer}>
|
|
150
|
+
{!!cancelButton && (
|
|
110
151
|
<UTButton
|
|
111
|
-
colorTheme={
|
|
112
|
-
|
|
113
|
-
onPress={
|
|
114
|
-
style={{ root: styles.closeButton }}
|
|
152
|
+
colorTheme={cancelButton.colorTheme || 'secondary'}
|
|
153
|
+
disabled={cancelButton.disabled || loading}
|
|
154
|
+
onPress={cancelButton.onPress}
|
|
115
155
|
variant="text"
|
|
116
|
-
dataTestId={`${dataTestId}.${
|
|
117
|
-
|
|
156
|
+
dataTestId={`${dataTestId}.${cancelButtonTestId}`}
|
|
157
|
+
>
|
|
158
|
+
{cancelButton.text || 'Cancelar'}
|
|
159
|
+
</UTButton>
|
|
160
|
+
)}
|
|
161
|
+
{!!acceptButton && (
|
|
162
|
+
<UTButton
|
|
163
|
+
colorTheme={acceptButton.colorTheme || 'primary'}
|
|
164
|
+
disabled={acceptButton.disabled || loading}
|
|
165
|
+
onPress={acceptButton.onPress}
|
|
166
|
+
dataTestId={`${dataTestId}.${acceptButtonTestId}`}
|
|
167
|
+
>
|
|
168
|
+
{acceptButton.text || 'Aceptar'}
|
|
169
|
+
</UTButton>
|
|
118
170
|
)}
|
|
119
171
|
</View>
|
|
120
|
-
{!!subtitle && (
|
|
121
|
-
<UTLabel
|
|
122
|
-
colorTheme="gray"
|
|
123
|
-
{...subtitleProps}
|
|
124
|
-
dataTestId={`${dataTestId}.${subtitleTestId}`}
|
|
125
|
-
>
|
|
126
|
-
{subtitle}
|
|
127
|
-
</UTLabel>
|
|
128
|
-
)}
|
|
129
|
-
|
|
130
|
-
{children}
|
|
131
|
-
</View>
|
|
132
|
-
{!hideSeparatorBar && <SeparatorBar />}
|
|
133
|
-
<View style={styles.buttonsContainer}>
|
|
134
|
-
{!!cancelButton && (
|
|
135
|
-
<UTButton
|
|
136
|
-
colorTheme={cancelButton.colorTheme || 'secondary'}
|
|
137
|
-
disabled={cancelButton.disabled || loading}
|
|
138
|
-
onPress={cancelButton.onPress}
|
|
139
|
-
variant="text"
|
|
140
|
-
dataTestId={`${dataTestId}.${cancelButtonTestId}`}
|
|
141
|
-
>
|
|
142
|
-
{cancelButton.text || 'Cancelar'}
|
|
143
|
-
</UTButton>
|
|
144
|
-
)}
|
|
145
|
-
{!!acceptButton && (
|
|
146
|
-
<UTButton
|
|
147
|
-
colorTheme={acceptButton.colorTheme || 'primary'}
|
|
148
|
-
disabled={acceptButton.disabled || loading}
|
|
149
|
-
onPress={acceptButton.onPress}
|
|
150
|
-
dataTestId={`${dataTestId}.${acceptButtonTestId}`}
|
|
151
|
-
>
|
|
152
|
-
{acceptButton.text || 'Aceptar'}
|
|
153
|
-
</UTButton>
|
|
154
|
-
)}
|
|
155
172
|
</View>
|
|
156
|
-
</
|
|
157
|
-
</
|
|
173
|
+
</UTLoading>
|
|
174
|
+
</Pressable>
|
|
158
175
|
</View>
|
|
159
176
|
</View>
|
|
160
177
|
</ParentView>
|
|
@@ -11,6 +11,7 @@ const UTTooltip = ({
|
|
|
11
11
|
onClose,
|
|
12
12
|
children,
|
|
13
13
|
dataTestId,
|
|
14
|
+
forceVisible = false,
|
|
14
15
|
onOpen,
|
|
15
16
|
offset = 5,
|
|
16
17
|
disabled,
|
|
@@ -103,7 +104,7 @@ const UTTooltip = ({
|
|
|
103
104
|
<View ref={anchorRef} onLayout={handleAnchorLayout}>
|
|
104
105
|
{children}
|
|
105
106
|
</View>
|
|
106
|
-
<Modal animationType="fade" transparent visible={isOpen}>
|
|
107
|
+
<Modal animationType="fade" transparent visible={forceVisible || isOpen}>
|
|
107
108
|
<TouchableOpacity onPress={closeTooltip} style={styles.overlayTouchable}>
|
|
108
109
|
<View style={styles.overlay} />
|
|
109
110
|
</TouchableOpacity>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useState, useReducer, useEffect } from 'react';
|
|
2
2
|
import { View } from 'react-native';
|
|
3
|
-
import PropTypes, { string, number, objectOf, arrayOf, shape } from 'prop-types';
|
|
3
|
+
import PropTypes, { string, number, objectOf, arrayOf, shape, func } from 'prop-types';
|
|
4
4
|
|
|
5
5
|
import UTLabel from '../UTLabel';
|
|
6
6
|
import UTButton from '../UTButton';
|
|
@@ -12,6 +12,7 @@ import { ACTIONS, COLOR_THEMES } from './constants';
|
|
|
12
12
|
import stylesheet from './styles';
|
|
13
13
|
|
|
14
14
|
const UTWizard = ({
|
|
15
|
+
onCloseCallback,
|
|
15
16
|
images,
|
|
16
17
|
steps,
|
|
17
18
|
variant,
|
|
@@ -22,7 +23,10 @@ const UTWizard = ({
|
|
|
22
23
|
const hasSteps = steps.length > 1;
|
|
23
24
|
const [isOpen, setIsOpen] = useState(true);
|
|
24
25
|
const [isClosed, setIsClosed] = useState(false);
|
|
25
|
-
|
|
26
|
+
const handleClose = () => {
|
|
27
|
+
setIsClosed(true);
|
|
28
|
+
if (onCloseCallback) onCloseCallback();
|
|
29
|
+
};
|
|
26
30
|
const [currentSubstep, updateSubstep] = useReducer((state, action) => {
|
|
27
31
|
switch (action) {
|
|
28
32
|
case ACTIONS.RESET:
|
|
@@ -60,7 +64,7 @@ const UTWizard = ({
|
|
|
60
64
|
<UTButton
|
|
61
65
|
colorTheme={getButtonTheme(variant)}
|
|
62
66
|
Icon="IconX"
|
|
63
|
-
onPress={
|
|
67
|
+
onPress={handleClose}
|
|
64
68
|
size="small"
|
|
65
69
|
variant="text"
|
|
66
70
|
/>
|
|
@@ -120,6 +124,7 @@ const UTWizard = ({
|
|
|
120
124
|
};
|
|
121
125
|
|
|
122
126
|
UTWizard.propTypes = {
|
|
127
|
+
onCloseCallback: func,
|
|
123
128
|
images: objectOf(number),
|
|
124
129
|
steps: arrayOf(
|
|
125
130
|
shape({
|
package/package.json
CHANGED