@widergy/mobile-ui 0.34.3 → 0.35.2
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 +34 -0
- package/lib/components/Button/index.js +1 -1
- package/lib/components/UTModal/constants.js +1 -0
- package/lib/components/UTModal/index.js +156 -0
- package/lib/components/UTModal/proptypes.js +35 -0
- package/lib/components/UTModal/styles.js +84 -0
- package/lib/components/UTSwitch/index.js +6 -2
- package/lib/index.js +1 -0
- package/lib/theming/DefaultTheme.js +2 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,37 @@
|
|
|
1
|
+
## [0.35.2](https://github.com/widergy/mobile-ui/compare/v0.35.1...v0.35.2) (2022-08-12)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* added subtitle and separator bar ([#225](https://github.com/widergy/mobile-ui/issues/225)) ([29dc57e](https://github.com/widergy/mobile-ui/commit/29dc57e9b777228ce22f3edadf3dffb3d568a06e))
|
|
7
|
+
|
|
8
|
+
## [0.35.1](https://github.com/widergy/mobile-ui/compare/v0.35.0...v0.35.1) (2022-07-14)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* adding a parameter to utswitch ([#223](https://github.com/widergy/mobile-ui/issues/223)) ([2c3bb48](https://github.com/widergy/mobile-ui/commit/2c3bb480da94325c20480f834ffa1f166be9b135))
|
|
14
|
+
|
|
15
|
+
# [0.35.0](https://github.com/widergy/mobile-ui/compare/v0.34.3...v0.35.0) (2022-06-03)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Bug Fixes
|
|
19
|
+
|
|
20
|
+
* added opacity when disabled button ([6d75fdb](https://github.com/widergy/mobile-ui/commit/6d75fdb3023308ffaa6cbd5c70d88deb338440b6))
|
|
21
|
+
* adjusted loading in modal ([4b175e4](https://github.com/widergy/mobile-ui/commit/4b175e4b8f220444db5abebcee7b2a69c61f8eae))
|
|
22
|
+
* avoid falsy condition in buttons and adjusted its style ([1d83ab4](https://github.com/widergy/mobile-ui/commit/1d83ab4096418c678da0988b41ef2a1c691c5759))
|
|
23
|
+
* avoid falsy condition in title ([8a364dd](https://github.com/widergy/mobile-ui/commit/8a364dd3b61131ae64dca26153e79477658ded49))
|
|
24
|
+
* backgroundImg prop ([ea7d415](https://github.com/widergy/mobile-ui/commit/ea7d415a14a7960252fa1ef20a73e38a5b367e69))
|
|
25
|
+
* delete outsideContent prop ([5c2bbbc](https://github.com/widergy/mobile-ui/commit/5c2bbbc10057ad0ee3a4acc4c7c7acce92b70656))
|
|
26
|
+
* deleted withTheme hook and left useTheme hoc ([775ca6b](https://github.com/widergy/mobile-ui/commit/775ca6bd7ddb142be721b73868ca44776b87f306))
|
|
27
|
+
* separted img and backgound img styles ([e347885](https://github.com/widergy/mobile-ui/commit/e347885847883b5912624e1add844a630ab30c5b))
|
|
28
|
+
* UTModal and Modal components in mobile ui ([23dc89b](https://github.com/widergy/mobile-ui/commit/23dc89b26bd3776cb78206474b95ce7c01bbdb0b))
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
### Features
|
|
32
|
+
|
|
33
|
+
* add UTModal component ([8303a57](https://github.com/widergy/mobile-ui/commit/8303a5732600f21f600ebecbbe37dfcc321eab90))
|
|
34
|
+
|
|
1
35
|
## [0.34.3](https://github.com/widergy/mobile-ui/compare/v0.34.2...v0.34.3) (2022-05-19)
|
|
2
36
|
|
|
3
37
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const CLOSE_ICON = 'close';
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { View, TouchableWithoutFeedback, Keyboard, Modal, ImageBackground } from 'react-native';
|
|
3
|
+
import _ from 'lodash';
|
|
4
|
+
|
|
5
|
+
import Label from '../Label';
|
|
6
|
+
import Button from '../Button';
|
|
7
|
+
import Touchable from '../Touchable';
|
|
8
|
+
import Icon from '../Icon';
|
|
9
|
+
import { useTheme } from '../../theming';
|
|
10
|
+
import UTLoading from '../UTLoading';
|
|
11
|
+
import SeparatorBar from '../SeparatorBar';
|
|
12
|
+
|
|
13
|
+
import ModalTypes from './proptypes';
|
|
14
|
+
import ownStyles from './styles';
|
|
15
|
+
import { CLOSE_ICON } from './constants';
|
|
16
|
+
|
|
17
|
+
const UTModal = ({
|
|
18
|
+
children,
|
|
19
|
+
onRequestClose,
|
|
20
|
+
acceptButton,
|
|
21
|
+
cancelButton,
|
|
22
|
+
visible,
|
|
23
|
+
title,
|
|
24
|
+
subtitle,
|
|
25
|
+
subtitleProps = {},
|
|
26
|
+
loading,
|
|
27
|
+
backgroundStyles,
|
|
28
|
+
imageStyles,
|
|
29
|
+
disableTouchable,
|
|
30
|
+
loadingText,
|
|
31
|
+
modalBackgroundColor,
|
|
32
|
+
color,
|
|
33
|
+
imageComponent,
|
|
34
|
+
labelProps,
|
|
35
|
+
modalStyles,
|
|
36
|
+
backgroundImg,
|
|
37
|
+
hideSeparatorBar
|
|
38
|
+
}) => {
|
|
39
|
+
const theme = useTheme();
|
|
40
|
+
const themeStyles = theme.simpleButton;
|
|
41
|
+
const styles = _.merge({}, ownStyles, themeStyles);
|
|
42
|
+
|
|
43
|
+
const ParentView = disableTouchable ? View : TouchableWithoutFeedback;
|
|
44
|
+
return (
|
|
45
|
+
<Modal
|
|
46
|
+
animationType="fade"
|
|
47
|
+
transparent
|
|
48
|
+
visible={visible}
|
|
49
|
+
onRequestClose={loading ? () => {} : onRequestClose}
|
|
50
|
+
>
|
|
51
|
+
<ParentView onPress={() => Keyboard.dismiss()} style={[disableTouchable && styles.viewContainer]}>
|
|
52
|
+
<View style={styles.childView} forceInset={{ top: 'never' }}>
|
|
53
|
+
<View
|
|
54
|
+
style={[
|
|
55
|
+
styles.modalBackground,
|
|
56
|
+
modalBackgroundColor && { backgroundColor: modalBackgroundColor }
|
|
57
|
+
]}
|
|
58
|
+
>
|
|
59
|
+
<UTLoading
|
|
60
|
+
loading={loading}
|
|
61
|
+
style={[styles.innerContainer, styles.content, styles.loading]}
|
|
62
|
+
message={loadingText}
|
|
63
|
+
>
|
|
64
|
+
<View style={[styles.innerContainer, modalStyles?.innerContainer]}>
|
|
65
|
+
{!!backgroundImg && (
|
|
66
|
+
<ImageBackground source={backgroundImg} resizeMode="stretch" style={backgroundStyles} />
|
|
67
|
+
)}
|
|
68
|
+
{!!imageComponent && (
|
|
69
|
+
<View style={[styles.content, imageStyles]}>
|
|
70
|
+
<Touchable
|
|
71
|
+
borderless
|
|
72
|
+
style={styles.closeIcon}
|
|
73
|
+
onPress={onRequestClose || cancelButton.onPress}
|
|
74
|
+
>
|
|
75
|
+
<Icon name={CLOSE_ICON} color={color || 'black'} style={styles.iconSpacing} />
|
|
76
|
+
</Touchable>
|
|
77
|
+
<View style={styles.imageContainer}>{imageComponent}</View>
|
|
78
|
+
</View>
|
|
79
|
+
)}
|
|
80
|
+
<View style={styles.content}>
|
|
81
|
+
{!backgroundImg && !imageComponent && (
|
|
82
|
+
<Touchable borderless style={styles.closeIcon} onPress={onRequestClose}>
|
|
83
|
+
<Icon name={CLOSE_ICON} color={color || 'black'} style={styles.iconSpacing} />
|
|
84
|
+
</Touchable>
|
|
85
|
+
)}
|
|
86
|
+
|
|
87
|
+
{!!title && (
|
|
88
|
+
<Label bold center style={styles.title}>
|
|
89
|
+
{title}
|
|
90
|
+
</Label>
|
|
91
|
+
)}
|
|
92
|
+
{!!subtitle && (
|
|
93
|
+
<Label midGray {...subtitleProps} style={styles.subtitle}>
|
|
94
|
+
{subtitle}
|
|
95
|
+
</Label>
|
|
96
|
+
)}
|
|
97
|
+
|
|
98
|
+
{children}
|
|
99
|
+
</View>
|
|
100
|
+
{!hideSeparatorBar && <SeparatorBar />}
|
|
101
|
+
<View style={styles.buttonsContainer}>
|
|
102
|
+
{!!cancelButton && (
|
|
103
|
+
<Button
|
|
104
|
+
borderless
|
|
105
|
+
lowerCase
|
|
106
|
+
mode="text"
|
|
107
|
+
elevation={0}
|
|
108
|
+
containerStyle={[
|
|
109
|
+
styles.containerStyle,
|
|
110
|
+
{ backgroundColor: cancelButton.backgroundColor }
|
|
111
|
+
]}
|
|
112
|
+
title={cancelButton.text || 'Cancelar'}
|
|
113
|
+
onPress={cancelButton.onPress}
|
|
114
|
+
disabled={cancelButton.disabled || loading}
|
|
115
|
+
labelColor={cancelButton.textColor || theme.button.defaultButtonColor}
|
|
116
|
+
titleStyle={styles.buttonText}
|
|
117
|
+
/>
|
|
118
|
+
)}
|
|
119
|
+
{!!acceptButton && (
|
|
120
|
+
<Button
|
|
121
|
+
borderless
|
|
122
|
+
lowerCase
|
|
123
|
+
mode="text"
|
|
124
|
+
elevation={0}
|
|
125
|
+
outerContainerStyles={styles.outerContainerStyles}
|
|
126
|
+
containerStyle={[
|
|
127
|
+
styles.containerStyle,
|
|
128
|
+
{ backgroundColor: acceptButton.backgroundColor ?? theme.button.defaultButtonColor },
|
|
129
|
+
// eslint-disable-next-line react-native/no-inline-styles
|
|
130
|
+
acceptButton.disabled && { opacity: 0.5 }
|
|
131
|
+
]}
|
|
132
|
+
title={acceptButton.text || 'Aceptar'}
|
|
133
|
+
onPress={acceptButton.onPress}
|
|
134
|
+
disabled={acceptButton.disabled || loading}
|
|
135
|
+
labelColor={acceptButton.textColor || theme.colors.buttonLabelColor}
|
|
136
|
+
titleStyle={styles.buttonText}
|
|
137
|
+
labelProps={labelProps}
|
|
138
|
+
/>
|
|
139
|
+
)}
|
|
140
|
+
</View>
|
|
141
|
+
</View>
|
|
142
|
+
</UTLoading>
|
|
143
|
+
</View>
|
|
144
|
+
</View>
|
|
145
|
+
</ParentView>
|
|
146
|
+
</Modal>
|
|
147
|
+
);
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
UTModal.defaultProps = {
|
|
151
|
+
onRequestClose: () => {}
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
UTModal.propTypes = ModalTypes;
|
|
155
|
+
|
|
156
|
+
export default UTModal;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { string, func, shape, number, bool, element } from 'prop-types';
|
|
2
|
+
import { ViewPropTypes } from 'react-native';
|
|
3
|
+
|
|
4
|
+
import { themeType } from '../../theming';
|
|
5
|
+
import { IS_ANDROID } from '../../utils/platformUtils/constants';
|
|
6
|
+
|
|
7
|
+
const buttonPropType = shape({
|
|
8
|
+
backgroundColor: string,
|
|
9
|
+
text: string,
|
|
10
|
+
onPress: func,
|
|
11
|
+
disabled: bool,
|
|
12
|
+
loadingText: string,
|
|
13
|
+
textColor: string
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
export default {
|
|
17
|
+
onRequestClose: IS_ANDROID ? func.isRequired : func,
|
|
18
|
+
cancelButton: buttonPropType,
|
|
19
|
+
acceptButton: buttonPropType,
|
|
20
|
+
visible: bool.isRequired,
|
|
21
|
+
loading: bool,
|
|
22
|
+
title: string,
|
|
23
|
+
disableTouchable: bool,
|
|
24
|
+
modalBackgroundColor: string,
|
|
25
|
+
onKeyboardDismiss: func,
|
|
26
|
+
loadingText: string,
|
|
27
|
+
fill: string,
|
|
28
|
+
imageStyles: ViewPropTypes.style,
|
|
29
|
+
backgroundStyles: ViewPropTypes.style,
|
|
30
|
+
modalStyles: ViewPropTypes.style,
|
|
31
|
+
image: element,
|
|
32
|
+
backgroundImg: number,
|
|
33
|
+
labelProps: shape(bool),
|
|
34
|
+
theme: themeType
|
|
35
|
+
};
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { StyleSheet } from 'react-native';
|
|
2
|
+
|
|
3
|
+
import { verticalScale, moderateHorizontalScale, WINDOW_WIDTH, WINDOW_HEIGHT } from '../../utils/scaleUtils';
|
|
4
|
+
import { DEFAULT_ICON_SIZE } from '../Icon/constants';
|
|
5
|
+
import { ICON_MARGIN } from '../IconButton/styles';
|
|
6
|
+
|
|
7
|
+
export default StyleSheet.create({
|
|
8
|
+
container: {
|
|
9
|
+
flexDirection: 'row',
|
|
10
|
+
alignItems: 'center',
|
|
11
|
+
marginVertical: verticalScale(4),
|
|
12
|
+
width: '95%'
|
|
13
|
+
},
|
|
14
|
+
modalBackground: {
|
|
15
|
+
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
|
16
|
+
flex: 1,
|
|
17
|
+
justifyContent: 'center',
|
|
18
|
+
padding: 15
|
|
19
|
+
},
|
|
20
|
+
childView: {
|
|
21
|
+
flex: 1
|
|
22
|
+
},
|
|
23
|
+
innerContainer: {
|
|
24
|
+
backgroundColor: 'white',
|
|
25
|
+
borderRadius: 15,
|
|
26
|
+
alignItems: 'stretch',
|
|
27
|
+
alignSelf: 'center',
|
|
28
|
+
width: WINDOW_WIDTH * 0.78
|
|
29
|
+
},
|
|
30
|
+
buttonsContainer: {
|
|
31
|
+
flexDirection: 'row',
|
|
32
|
+
justifyContent: 'flex-end',
|
|
33
|
+
alignItems: 'center',
|
|
34
|
+
paddingVertical: 20,
|
|
35
|
+
paddingHorizontal: 15
|
|
36
|
+
},
|
|
37
|
+
viewContainer: {
|
|
38
|
+
flex: 1
|
|
39
|
+
},
|
|
40
|
+
loading: {
|
|
41
|
+
height: WINDOW_HEIGHT * 0.3,
|
|
42
|
+
justifyContent: 'center',
|
|
43
|
+
alignItems: 'center'
|
|
44
|
+
},
|
|
45
|
+
title: {
|
|
46
|
+
marginBottom: 12
|
|
47
|
+
},
|
|
48
|
+
subtitle: {
|
|
49
|
+
marginHorizontal: '4%',
|
|
50
|
+
marginBottom: 12
|
|
51
|
+
},
|
|
52
|
+
buttonText: {
|
|
53
|
+
fontWeight: 'normal',
|
|
54
|
+
padding: 0,
|
|
55
|
+
margin: 0
|
|
56
|
+
},
|
|
57
|
+
content: {
|
|
58
|
+
padding: 15,
|
|
59
|
+
paddingBottom: 5
|
|
60
|
+
},
|
|
61
|
+
closeIcon: {
|
|
62
|
+
alignItems: 'center',
|
|
63
|
+
justifyContent: 'center',
|
|
64
|
+
borderRadius: (DEFAULT_ICON_SIZE + ICON_MARGIN) / 2,
|
|
65
|
+
height: DEFAULT_ICON_SIZE + ICON_MARGIN,
|
|
66
|
+
width: DEFAULT_ICON_SIZE + ICON_MARGIN,
|
|
67
|
+
alignSelf: 'flex-end'
|
|
68
|
+
},
|
|
69
|
+
imageContainer: {
|
|
70
|
+
alignItems: 'center',
|
|
71
|
+
justifyContent: 'center',
|
|
72
|
+
marginBottom: verticalScale(25),
|
|
73
|
+
height: verticalScale(35)
|
|
74
|
+
},
|
|
75
|
+
iconSpacing: {
|
|
76
|
+
marginRight: moderateHorizontalScale(10)
|
|
77
|
+
},
|
|
78
|
+
containerStyle: {
|
|
79
|
+
borderRadius: 25,
|
|
80
|
+
justifyContent: 'center',
|
|
81
|
+
marginHorizontal: moderateHorizontalScale(5)
|
|
82
|
+
},
|
|
83
|
+
disabledContainer: { opacity: 0.5 }
|
|
84
|
+
});
|
|
@@ -20,7 +20,8 @@ const UTSwitch = ({
|
|
|
20
20
|
trackSize = 20,
|
|
21
21
|
input,
|
|
22
22
|
thumbSize = 10,
|
|
23
|
-
rippleSize = 3
|
|
23
|
+
rippleSize = 3,
|
|
24
|
+
movingStartPosition
|
|
24
25
|
}) => {
|
|
25
26
|
const theme = useTheme();
|
|
26
27
|
|
|
@@ -122,7 +123,10 @@ const UTSwitch = ({
|
|
|
122
123
|
{
|
|
123
124
|
translateX: switchPosition.interpolate({
|
|
124
125
|
inputRange: [0, 1],
|
|
125
|
-
outputRange: [
|
|
126
|
+
outputRange: [
|
|
127
|
+
movingStartPosition ? thumpInitPosition - movingStartPosition : thumpInitPosition,
|
|
128
|
+
thumpFinishPosition
|
|
129
|
+
]
|
|
126
130
|
})
|
|
127
131
|
}
|
|
128
132
|
]
|
package/lib/index.js
CHANGED
|
@@ -7,6 +7,7 @@ export { default as ActionButton } from './components/ActionButton';
|
|
|
7
7
|
export { default as UTSwitch } from './components/UTSwitch';
|
|
8
8
|
// Feedback
|
|
9
9
|
export { default as Modal } from './components/Modal';
|
|
10
|
+
export { default as UTModal } from './components/UTModal';
|
|
10
11
|
export { default as Snackbar } from './components/Snackbar';
|
|
11
12
|
// Forms
|
|
12
13
|
export { default as Checkbox } from './components/Checkbox';
|
package/package.json
CHANGED