@widergy/mobile-ui 1.18.6 → 1.19.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 +14 -0
- package/lib/components/UTModal/index.js +5 -5
- package/lib/components/UTModal/styles.js +0 -1
- package/lib/components/UTSelectableCard/styles.js +1 -0
- package/lib/components/UTTracker/README.md +3 -1
- package/lib/components/UTTracker/components/Connector/index.js +4 -2
- package/lib/components/UTTracker/components/Connector/styles.js +26 -25
- package/lib/components/UTTracker/components/Step/index.js +14 -31
- package/lib/components/UTTracker/components/Step/styles.js +46 -56
- package/lib/components/UTTracker/components/SubStep/index.js +7 -3
- package/lib/components/UTTracker/components/SubStep/styles.js +1 -3
- package/lib/components/UTTracker/index.js +44 -28
- package/lib/components/UTTracker/styles.js +50 -43
- package/lib/utils/analyticsUtils/index.js +58 -3
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
## [1.19.1](https://github.com/widergy/mobile-ui/compare/v1.19.0...v1.19.1) (2024-08-26)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* standarize uttracker ([#336](https://github.com/widergy/mobile-ui/issues/336)) ([b832deb](https://github.com/widergy/mobile-ui/commit/b832deb20b87ee771c4d4ce15c9e80ea4b24974f))
|
|
7
|
+
|
|
8
|
+
# [1.19.0](https://github.com/widergy/mobile-ui/compare/v1.18.6...v1.19.0) (2024-08-23)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* event multitracking ([#334](https://github.com/widergy/mobile-ui/issues/334)) ([5364c58](https://github.com/widergy/mobile-ui/commit/5364c58894d65a5b0662393c17d745e5eca40356))
|
|
14
|
+
|
|
1
15
|
## [1.18.6](https://github.com/widergy/mobile-ui/compare/v1.18.5...v1.18.6) (2024-08-23)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { View, TouchableWithoutFeedback, Keyboard, Modal, ImageBackground } from 'react-native';
|
|
3
3
|
import _ from 'lodash';
|
|
4
4
|
|
|
5
|
-
import
|
|
5
|
+
import UTLabel from '../UTLabel';
|
|
6
6
|
import Button from '../Button';
|
|
7
7
|
import Touchable from '../Touchable';
|
|
8
8
|
import Icon from '../Icon';
|
|
@@ -89,14 +89,14 @@ const UTModal = ({
|
|
|
89
89
|
)}
|
|
90
90
|
|
|
91
91
|
{!!title && (
|
|
92
|
-
<
|
|
92
|
+
<UTLabel variant="title3" weight="medium" style={styles.title}>
|
|
93
93
|
{title}
|
|
94
|
-
</
|
|
94
|
+
</UTLabel>
|
|
95
95
|
)}
|
|
96
96
|
{!!subtitle && (
|
|
97
|
-
<
|
|
97
|
+
<UTLabel colorTheme="gray" {...subtitleProps} style={styles.subtitle}>
|
|
98
98
|
{subtitle}
|
|
99
|
-
</
|
|
99
|
+
</UTLabel>
|
|
100
100
|
)}
|
|
101
101
|
|
|
102
102
|
{children}
|
|
@@ -9,6 +9,8 @@ This component displays a vertical stepper intended to track progress
|
|
|
9
9
|
| Name | Type | Default | Description |
|
|
10
10
|
| ----------- | ----------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
11
11
|
| title | string | | Displays the title above the tracker. |
|
|
12
|
+
| subtitle | string | | Displays under the title |
|
|
13
|
+
| description | string | | Displays under the subtitle |
|
|
12
14
|
| mode | card \| flat | card | Defines whether the component should display as a card or as the bare components without any background. |
|
|
13
15
|
| variant | standard \| error | standard | Defines the color scheme of the tracker steps and the icon on the active step. |
|
|
14
16
|
| steps | stepsType | | Displays a step with a rounded icon on the left for each object received. |
|
|
@@ -19,6 +21,6 @@ This component displays a vertical stepper intended to track progress
|
|
|
19
21
|
|
|
20
22
|
| Type | Shape |
|
|
21
23
|
| ------------ | ------------------------------------------------------------------------------ |
|
|
22
|
-
| stepsType | `{ id: number, title: string,
|
|
24
|
+
| stepsType | `{ id: number, title: string, subSteps: [...subStepsType] }` |
|
|
23
25
|
| subStepsType | `{ id: number, title: string, subtitle: string }` |
|
|
24
26
|
| detailsType | `{ enabled: bool, title: string }` |
|
|
@@ -5,11 +5,13 @@ import merge from 'lodash/merge';
|
|
|
5
5
|
import { ViewPropTypes } from 'deprecated-react-native-prop-types';
|
|
6
6
|
|
|
7
7
|
import { IS_IOS } from '../../../../utils/platformUtils/constants';
|
|
8
|
+
import { useTheme } from '../../../../theming';
|
|
8
9
|
|
|
9
|
-
import
|
|
10
|
+
import { getConnectorStyles } from './styles';
|
|
10
11
|
|
|
11
12
|
const Connector = ({ currentPosition = 0, first, nextPosition = 0, style }) => {
|
|
12
|
-
const
|
|
13
|
+
const theme = useTheme();
|
|
14
|
+
const themedStyles = merge({}, getConnectorStyles(theme), style);
|
|
13
15
|
|
|
14
16
|
return (
|
|
15
17
|
<View
|
|
@@ -2,28 +2,29 @@ import { StyleSheet } from 'react-native';
|
|
|
2
2
|
|
|
3
3
|
import { OVAL_SIZE } from '../../styles';
|
|
4
4
|
|
|
5
|
-
export
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}
|
|
5
|
+
export const getConnectorStyles = theme =>
|
|
6
|
+
StyleSheet.create({
|
|
7
|
+
connector: {
|
|
8
|
+
borderColor: theme.Palette.gray['04'],
|
|
9
|
+
borderLeftWidth: 2,
|
|
10
|
+
borderStyle: 'dashed',
|
|
11
|
+
flexGrow: 1
|
|
12
|
+
},
|
|
13
|
+
connectorIOS: {
|
|
14
|
+
borderWidth: 2,
|
|
15
|
+
margin: -3,
|
|
16
|
+
marginLeft: 0,
|
|
17
|
+
flex: 1
|
|
18
|
+
},
|
|
19
|
+
wrapper: (currentPosition, first, nextPosition) => ({
|
|
20
|
+
height: nextPosition - currentPosition - OVAL_SIZE - (first ? 5 : 0) - 10,
|
|
21
|
+
paddingLeft: OVAL_SIZE / 2 - 1,
|
|
22
|
+
position: 'absolute',
|
|
23
|
+
top: currentPosition + OVAL_SIZE + (first ? 5 : 0) + 5,
|
|
24
|
+
width: 2
|
|
25
|
+
}),
|
|
26
|
+
wrapperIOS: {
|
|
27
|
+
overflow: 'hidden',
|
|
28
|
+
width: OVAL_SIZE
|
|
29
|
+
}
|
|
30
|
+
});
|
|
@@ -3,12 +3,13 @@ import { View } from 'react-native';
|
|
|
3
3
|
import { bool, func, number } from 'prop-types';
|
|
4
4
|
import merge from 'lodash/merge';
|
|
5
5
|
|
|
6
|
-
import Label from '../../../Label';
|
|
7
6
|
import { StepPropTypes, VariantPropTypes } from '../../propTypes';
|
|
8
|
-
import
|
|
7
|
+
import UTIcon from '../../../UTIcon';
|
|
8
|
+
import UTLabel from '../../../UTLabel';
|
|
9
9
|
import { ERROR } from '../../constants';
|
|
10
|
+
import { useTheme } from '../../../../theming';
|
|
10
11
|
|
|
11
|
-
import
|
|
12
|
+
import { getVariantStyles, getStepStyles } from './styles';
|
|
12
13
|
|
|
13
14
|
const ERROR_ICON_SIZE = 16;
|
|
14
15
|
|
|
@@ -16,7 +17,9 @@ const Step = ({ first, index, isActive, isCompleted, setStepsPositions, step, st
|
|
|
16
17
|
const stepCompleted = isCompleted(step.id);
|
|
17
18
|
const stepActive = isActive(step.id);
|
|
18
19
|
|
|
19
|
-
const
|
|
20
|
+
const theme = useTheme();
|
|
21
|
+
const ownStyles = getStepStyles(theme);
|
|
22
|
+
const themedStyles = merge({}, ownStyles, getVariantStyles(theme)[variant], style[variant]);
|
|
20
23
|
const [stepIconOffset, setStepIconOffset] = useState(0);
|
|
21
24
|
const [currentPosition, setCurrentPosition] = useState(0);
|
|
22
25
|
|
|
@@ -54,41 +57,21 @@ const Step = ({ first, index, isActive, isCompleted, setStepsPositions, step, st
|
|
|
54
57
|
]}
|
|
55
58
|
>
|
|
56
59
|
{stepActive && variant === ERROR && (
|
|
57
|
-
<
|
|
58
|
-
color="white"
|
|
59
|
-
height={ERROR_ICON_SIZE}
|
|
60
|
-
name="close"
|
|
61
|
-
size={ERROR_ICON_SIZE}
|
|
62
|
-
style={themedStyles.icon}
|
|
63
|
-
type="antdesign"
|
|
64
|
-
width={ERROR_ICON_SIZE}
|
|
65
|
-
/>
|
|
60
|
+
<UTIcon name="IconX" colorTheme="negative" size={ERROR_ICON_SIZE} style={themedStyles.icon} />
|
|
66
61
|
)}
|
|
67
62
|
</View>
|
|
68
63
|
</View>
|
|
69
64
|
<View style={themedStyles.textContainer}>
|
|
70
65
|
{step.title && (
|
|
71
|
-
<
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
? themedStyles.activeTitleColor
|
|
77
|
-
: themedStyles.titleColor
|
|
66
|
+
<UTLabel
|
|
67
|
+
variant="small"
|
|
68
|
+
weight="medium"
|
|
69
|
+
colorTheme={
|
|
70
|
+
stepCompleted ? 'gray' : stepActive ? (variant === ERROR ? 'error' : 'accent') : 'dark'
|
|
78
71
|
}
|
|
79
72
|
>
|
|
80
73
|
{step.title}
|
|
81
|
-
</
|
|
82
|
-
)}
|
|
83
|
-
{step.subtitle && (
|
|
84
|
-
<Label color={themedStyles.subtitleColor} style={themedStyles.subtitle}>
|
|
85
|
-
{step.subtitle}
|
|
86
|
-
</Label>
|
|
87
|
-
)}
|
|
88
|
-
{step.description && (
|
|
89
|
-
<Label color={themedStyles.descriptionColor} style={themedStyles.description}>
|
|
90
|
-
{step.description}
|
|
91
|
-
</Label>
|
|
74
|
+
</UTLabel>
|
|
92
75
|
)}
|
|
93
76
|
</View>
|
|
94
77
|
</View>
|
|
@@ -3,84 +3,74 @@ import { StyleSheet } from 'react-native';
|
|
|
3
3
|
import { OVAL_SIZE } from '../../styles';
|
|
4
4
|
import { ERROR, STANDARD } from '../../constants';
|
|
5
5
|
|
|
6
|
-
export const
|
|
6
|
+
export const getVariantStyles = theme => ({
|
|
7
7
|
[ERROR]: {
|
|
8
8
|
activeContainer: {
|
|
9
|
-
backgroundColor: '
|
|
10
|
-
borderColor: '
|
|
9
|
+
backgroundColor: theme.Palette.error['04'],
|
|
10
|
+
borderColor: theme.Palette.error['04']
|
|
11
11
|
},
|
|
12
12
|
activeInnerContainer: {
|
|
13
|
-
backgroundColor: '
|
|
13
|
+
backgroundColor: theme.Palette.error['04']
|
|
14
14
|
},
|
|
15
|
-
activeTitleColor: 'red',
|
|
16
15
|
completedContainer: {
|
|
17
|
-
borderColor: '
|
|
16
|
+
borderColor: theme.Palette.error['04']
|
|
18
17
|
},
|
|
19
18
|
completedInnerContainer: {
|
|
20
|
-
backgroundColor: '
|
|
19
|
+
backgroundColor: theme.Palette.error['04']
|
|
21
20
|
},
|
|
22
21
|
completedOuterContainer: {
|
|
23
22
|
opacity: 0.5
|
|
24
|
-
}
|
|
25
|
-
completedTitleColor: 'red'
|
|
23
|
+
}
|
|
26
24
|
},
|
|
27
25
|
[STANDARD]: {
|
|
28
26
|
activeContainer: {
|
|
29
|
-
borderColor: '
|
|
27
|
+
borderColor: theme.Palette.accent['04']
|
|
30
28
|
},
|
|
31
29
|
activeInnerContainer: {
|
|
32
|
-
backgroundColor: '
|
|
30
|
+
backgroundColor: theme.Palette.accent['04']
|
|
33
31
|
},
|
|
34
|
-
activeTitleColor: 'blue',
|
|
35
32
|
completedContainer: {
|
|
36
|
-
borderColor: '
|
|
33
|
+
borderColor: theme.Palette.accent['04']
|
|
37
34
|
},
|
|
38
35
|
completedInnerContainer: {
|
|
39
|
-
backgroundColor: '
|
|
36
|
+
backgroundColor: theme.Palette.accent['04']
|
|
40
37
|
},
|
|
41
38
|
completedOuterContainer: {
|
|
42
39
|
opacity: 0.5
|
|
43
|
-
}
|
|
44
|
-
completedTitleColor: 'blue'
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
export default StyleSheet.create({
|
|
49
|
-
container: {
|
|
50
|
-
alignItems: 'center',
|
|
51
|
-
backgroundColor: 'white',
|
|
52
|
-
borderColor: 'gray',
|
|
53
|
-
borderRadius: OVAL_SIZE / 2,
|
|
54
|
-
borderWidth: OVAL_SIZE / 10,
|
|
55
|
-
height: OVAL_SIZE,
|
|
56
|
-
justifyContent: 'center',
|
|
57
|
-
marginRight: 16,
|
|
58
|
-
width: OVAL_SIZE
|
|
59
|
-
},
|
|
60
|
-
description: {
|
|
61
|
-
marginTop: 4
|
|
62
|
-
},
|
|
63
|
-
descriptionColor: 'gray',
|
|
64
|
-
icon: {
|
|
65
|
-
position: 'absolute',
|
|
66
|
-
right: -3,
|
|
67
|
-
top: -3
|
|
68
|
-
},
|
|
69
|
-
innerContainer: {
|
|
70
|
-
backgroundColor: 'white',
|
|
71
|
-
borderRadius: OVAL_SIZE / 4,
|
|
72
|
-
height: OVAL_SIZE / 2,
|
|
73
|
-
width: OVAL_SIZE / 2
|
|
74
|
-
},
|
|
75
|
-
outerContainer: {
|
|
76
|
-
alignItems: 'center',
|
|
77
|
-
flexDirection: 'row'
|
|
78
|
-
},
|
|
79
|
-
stepMargin: { marginTop: 24 },
|
|
80
|
-
subtitle: {
|
|
81
|
-
marginTop: 4
|
|
82
|
-
},
|
|
83
|
-
textContainer: {
|
|
84
|
-
width: '90%'
|
|
40
|
+
}
|
|
85
41
|
}
|
|
86
42
|
});
|
|
43
|
+
|
|
44
|
+
export const getStepStyles = theme =>
|
|
45
|
+
StyleSheet.create({
|
|
46
|
+
container: {
|
|
47
|
+
alignItems: 'center',
|
|
48
|
+
backgroundColor: 'transparent',
|
|
49
|
+
borderColor: theme.Palette.gray['04'],
|
|
50
|
+
borderRadius: OVAL_SIZE / 2,
|
|
51
|
+
borderWidth: OVAL_SIZE / 10,
|
|
52
|
+
height: OVAL_SIZE,
|
|
53
|
+
justifyContent: 'center',
|
|
54
|
+
marginRight: 16,
|
|
55
|
+
width: OVAL_SIZE
|
|
56
|
+
},
|
|
57
|
+
icon: {
|
|
58
|
+
position: 'absolute',
|
|
59
|
+
right: -3,
|
|
60
|
+
top: -3
|
|
61
|
+
},
|
|
62
|
+
innerContainer: {
|
|
63
|
+
backgroundColor: 'transparent',
|
|
64
|
+
borderRadius: OVAL_SIZE / 4,
|
|
65
|
+
height: OVAL_SIZE / 2,
|
|
66
|
+
width: OVAL_SIZE / 2
|
|
67
|
+
},
|
|
68
|
+
outerContainer: {
|
|
69
|
+
alignItems: 'center',
|
|
70
|
+
flexDirection: 'row'
|
|
71
|
+
},
|
|
72
|
+
stepMargin: { marginTop: 24 },
|
|
73
|
+
textContainer: {
|
|
74
|
+
width: '90%'
|
|
75
|
+
}
|
|
76
|
+
});
|
|
@@ -4,7 +4,7 @@ import { string } from 'prop-types';
|
|
|
4
4
|
import merge from 'lodash/merge';
|
|
5
5
|
import { ViewPropTypes } from 'deprecated-react-native-prop-types';
|
|
6
6
|
|
|
7
|
-
import
|
|
7
|
+
import UTLabel from '../../../UTLabel';
|
|
8
8
|
|
|
9
9
|
import ownStyles from './styles';
|
|
10
10
|
|
|
@@ -13,8 +13,12 @@ const SubStep = ({ style, subtitle, title }) => {
|
|
|
13
13
|
|
|
14
14
|
return (
|
|
15
15
|
<View style={themedStyles.container}>
|
|
16
|
-
<
|
|
17
|
-
|
|
16
|
+
<UTLabel colorTheme="gray" variant="small">
|
|
17
|
+
{title}
|
|
18
|
+
</UTLabel>
|
|
19
|
+
<UTLabel colorTheme="gray" shade="01" variant="small">
|
|
20
|
+
{subtitle}
|
|
21
|
+
</UTLabel>
|
|
18
22
|
</View>
|
|
19
23
|
);
|
|
20
24
|
};
|
|
@@ -4,21 +4,33 @@ import merge from 'lodash/merge';
|
|
|
4
4
|
import { number, object, string } from 'prop-types';
|
|
5
5
|
import Collapsible from 'react-native-collapsible';
|
|
6
6
|
|
|
7
|
-
import
|
|
7
|
+
import UTIcon from '../UTIcon';
|
|
8
|
+
import UTLabel from '../UTLabel';
|
|
8
9
|
import Touchable from '../Touchable';
|
|
9
|
-
import Label from '../Label';
|
|
10
10
|
import { useTheme } from '../../theming';
|
|
11
|
+
import Surface from '../Surface';
|
|
11
12
|
|
|
12
|
-
import
|
|
13
|
+
import { getUTTrackerStyles, getModeStyles } from './styles';
|
|
13
14
|
import Step from './components/Step';
|
|
14
15
|
import Connector from './components/Connector';
|
|
15
16
|
import SubStep from './components/SubStep';
|
|
16
17
|
import { DetailsTabPropTypes, ModePropTypes, StepsPropTypes, VariantPropTypes } from './propTypes';
|
|
17
|
-
import { CARD, FLAT, STANDARD } from './constants';
|
|
18
|
+
import { CARD, ERROR, FLAT, STANDARD } from './constants';
|
|
18
19
|
|
|
19
|
-
const UTTracker = ({
|
|
20
|
+
const UTTracker = ({
|
|
21
|
+
currentStep,
|
|
22
|
+
detailsTab,
|
|
23
|
+
description,
|
|
24
|
+
mode = CARD,
|
|
25
|
+
steps,
|
|
26
|
+
subtitle,
|
|
27
|
+
style,
|
|
28
|
+
title,
|
|
29
|
+
variant = STANDARD
|
|
30
|
+
}) => {
|
|
20
31
|
const theme = useTheme();
|
|
21
|
-
const
|
|
32
|
+
const ownStyles = getUTTrackerStyles(theme);
|
|
33
|
+
const themedStyles = merge({}, ownStyles, getModeStyles(theme)[mode], theme.UTTracker, style);
|
|
22
34
|
|
|
23
35
|
const [isCollapsed, setIsCollapsed] = useState(true);
|
|
24
36
|
const [stepsPositions, setStepsPositions] = useState([]);
|
|
@@ -26,8 +38,10 @@ const UTTracker = ({ currentStep, detailsTab, mode = CARD, steps, style, title,
|
|
|
26
38
|
const isCompleted = stepNumber => stepNumber < currentStep;
|
|
27
39
|
const isActive = stepNumber => stepNumber === currentStep;
|
|
28
40
|
|
|
41
|
+
const WrapperComponent = mode === CARD ? Surface : View;
|
|
42
|
+
|
|
29
43
|
return (
|
|
30
|
-
<
|
|
44
|
+
<WrapperComponent style={themedStyles.outerContainer}>
|
|
31
45
|
<View style={[themedStyles.container, !detailsTab && ownStyles.roundedBorders]}>
|
|
32
46
|
{title && (
|
|
33
47
|
<Touchable
|
|
@@ -36,24 +50,31 @@ const UTTracker = ({ currentStep, detailsTab, mode = CARD, steps, style, title,
|
|
|
36
50
|
style={themedStyles.titleTouchable}
|
|
37
51
|
>
|
|
38
52
|
<View style={themedStyles.titleContainer}>
|
|
39
|
-
<
|
|
53
|
+
<UTLabel variant="subtitle1" weight="medium">
|
|
40
54
|
{title}
|
|
41
|
-
</
|
|
55
|
+
</UTLabel>
|
|
42
56
|
{detailsTab?.enabled && mode === FLAT && (
|
|
43
|
-
<
|
|
44
|
-
color={themedStyles.detailsIconColor || 'black'}
|
|
45
|
-
height={DETAILS_ICON_FLAT_SIZE}
|
|
46
|
-
name={isCollapsed ? 'chevron-down' : 'chevron-up'}
|
|
47
|
-
size={DETAILS_ICON_FLAT_SIZE}
|
|
48
|
-
type="feather"
|
|
49
|
-
width={DETAILS_ICON_FLAT_SIZE}
|
|
50
|
-
/>
|
|
57
|
+
<UTIcon name={isCollapsed ? 'IconChevronDown' : 'IconChevronUp'} colorTheme="neutral" />
|
|
51
58
|
)}
|
|
52
59
|
</View>
|
|
53
60
|
</Touchable>
|
|
54
61
|
)}
|
|
62
|
+
{(subtitle || description) && (
|
|
63
|
+
<View style={[themedStyles.subtitleAndDescription, variant === ERROR && themedStyles.errorBanner]}>
|
|
64
|
+
{subtitle && (
|
|
65
|
+
<UTLabel variant="small" weight="medium" style={themedStyles.subtitle}>
|
|
66
|
+
{subtitle}
|
|
67
|
+
</UTLabel>
|
|
68
|
+
)}
|
|
69
|
+
{description && (
|
|
70
|
+
<UTLabel colorTheme="gray" variant="small" style={themedStyles.description}>
|
|
71
|
+
{description}
|
|
72
|
+
</UTLabel>
|
|
73
|
+
)}
|
|
74
|
+
</View>
|
|
75
|
+
)}
|
|
55
76
|
{steps && (
|
|
56
|
-
<View>
|
|
77
|
+
<View style={(title || subtitle || description) && themedStyles.stepsContainer}>
|
|
57
78
|
{steps.map((step, index) => (
|
|
58
79
|
<Fragment key={step.id}>
|
|
59
80
|
<Step
|
|
@@ -89,27 +110,22 @@ const UTTracker = ({ currentStep, detailsTab, mode = CARD, steps, style, title,
|
|
|
89
110
|
{detailsTab?.enabled && mode === CARD && (
|
|
90
111
|
<Touchable onPress={() => setIsCollapsed(!isCollapsed)} style={themedStyles.detailsTab}>
|
|
91
112
|
<Fragment>
|
|
92
|
-
<
|
|
93
|
-
<
|
|
94
|
-
color={themedStyles.detailsIconColor || 'black'}
|
|
95
|
-
height={DETAILS_ICON_CARD_SIZE}
|
|
96
|
-
name={isCollapsed ? 'chevron-down' : 'chevron-up'}
|
|
97
|
-
size={DETAILS_ICON_CARD_SIZE}
|
|
98
|
-
type="feather"
|
|
99
|
-
width={DETAILS_ICON_CARD_SIZE}
|
|
100
|
-
/>
|
|
113
|
+
<UTLabel weight="medium">{detailsTab.title}</UTLabel>
|
|
114
|
+
<UTIcon name={isCollapsed ? 'IconChevronDown' : 'IconChevronUp'} colorTheme="neutral" />
|
|
101
115
|
</Fragment>
|
|
102
116
|
</Touchable>
|
|
103
117
|
)}
|
|
104
|
-
</
|
|
118
|
+
</WrapperComponent>
|
|
105
119
|
);
|
|
106
120
|
};
|
|
107
121
|
|
|
108
122
|
UTTracker.propTypes = {
|
|
109
123
|
currentStep: number,
|
|
110
124
|
detailsTab: DetailsTabPropTypes,
|
|
125
|
+
description: string,
|
|
111
126
|
mode: ModePropTypes,
|
|
112
127
|
steps: StepsPropTypes,
|
|
128
|
+
subtitle: string,
|
|
113
129
|
// eslint-disable-next-line react/forbid-prop-types
|
|
114
130
|
style: object,
|
|
115
131
|
title: string,
|
|
@@ -3,55 +3,62 @@ import { StyleSheet } from 'react-native';
|
|
|
3
3
|
import { CARD, FLAT } from './constants';
|
|
4
4
|
|
|
5
5
|
export const OVAL_SIZE = 20;
|
|
6
|
-
export const DETAILS_ICON_CARD_SIZE = 20;
|
|
7
|
-
export const DETAILS_ICON_FLAT_SIZE = 24;
|
|
8
6
|
|
|
9
|
-
export const
|
|
7
|
+
export const getModeStyles = theme => ({
|
|
10
8
|
[CARD]: {
|
|
11
|
-
|
|
12
|
-
backgroundColor: '
|
|
13
|
-
elevation: 2,
|
|
14
|
-
shadowColor: 'black',
|
|
15
|
-
shadowOffset: {
|
|
16
|
-
height: 3,
|
|
17
|
-
width: 0
|
|
18
|
-
},
|
|
19
|
-
shadowOpacity: 0.1
|
|
9
|
+
outerContainer: {
|
|
10
|
+
backgroundColor: theme.Palette.light['01']
|
|
20
11
|
}
|
|
21
12
|
},
|
|
22
13
|
[FLAT]: {
|
|
23
|
-
|
|
14
|
+
outerContainer: {
|
|
24
15
|
backgroundColor: 'transparent'
|
|
25
16
|
}
|
|
26
17
|
}
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
export default StyleSheet.create({
|
|
30
|
-
container: {
|
|
31
|
-
borderTopLeftRadius: 8,
|
|
32
|
-
borderTopRightRadius: 8,
|
|
33
|
-
padding: 16
|
|
34
|
-
},
|
|
35
|
-
detailsTab: {
|
|
36
|
-
backgroundColor: 'white',
|
|
37
|
-
borderBottomLeftRadius: 8,
|
|
38
|
-
borderBottomRightRadius: 8,
|
|
39
|
-
borderColor: 'lightgray',
|
|
40
|
-
borderTopWidth: 1,
|
|
41
|
-
flexDirection: 'row',
|
|
42
|
-
justifyContent: 'space-between',
|
|
43
|
-
paddingHorizontal: 16,
|
|
44
|
-
paddingVertical: 12
|
|
45
|
-
},
|
|
46
|
-
roundedBorders: {
|
|
47
|
-
borderBottomLeftRadius: 8,
|
|
48
|
-
borderBottomRightRadius: 8
|
|
49
|
-
},
|
|
50
|
-
titleContainer: {
|
|
51
|
-
flexDirection: 'row',
|
|
52
|
-
justifyContent: 'space-between'
|
|
53
|
-
},
|
|
54
|
-
titleTouchable: {
|
|
55
|
-
marginBottom: 24
|
|
56
|
-
}
|
|
57
18
|
});
|
|
19
|
+
|
|
20
|
+
export const getUTTrackerStyles = theme =>
|
|
21
|
+
StyleSheet.create({
|
|
22
|
+
container: {
|
|
23
|
+
borderTopLeftRadius: 8,
|
|
24
|
+
borderTopRightRadius: 8,
|
|
25
|
+
padding: 16
|
|
26
|
+
},
|
|
27
|
+
detailsTab: {
|
|
28
|
+
backgroundColor: theme.Palette.light['01'],
|
|
29
|
+
borderBottomLeftRadius: 8,
|
|
30
|
+
borderBottomRightRadius: 8,
|
|
31
|
+
borderColor: theme.Palette.light['04'],
|
|
32
|
+
borderTopWidth: 1,
|
|
33
|
+
flexDirection: 'row',
|
|
34
|
+
justifyContent: 'space-between',
|
|
35
|
+
paddingHorizontal: 16,
|
|
36
|
+
paddingVertical: 12
|
|
37
|
+
},
|
|
38
|
+
errorBanner: {
|
|
39
|
+
backgroundColor: theme.Palette.error['01'],
|
|
40
|
+
borderRadius: 4,
|
|
41
|
+
padding: 8
|
|
42
|
+
},
|
|
43
|
+
outerContainer: {
|
|
44
|
+
borderRadius: 8
|
|
45
|
+
},
|
|
46
|
+
roundedBorders: {
|
|
47
|
+
borderBottomLeftRadius: 8,
|
|
48
|
+
borderBottomRightRadius: 8
|
|
49
|
+
},
|
|
50
|
+
stepsContainer: {
|
|
51
|
+
marginTop: 24
|
|
52
|
+
},
|
|
53
|
+
subtitle: {
|
|
54
|
+
marginBottom: 4
|
|
55
|
+
},
|
|
56
|
+
subtitleAndDescription: {},
|
|
57
|
+
titleContainer: {
|
|
58
|
+
flexDirection: 'row',
|
|
59
|
+
justifyContent: 'space-between'
|
|
60
|
+
},
|
|
61
|
+
titleTouchable: {
|
|
62
|
+
marginBottom: 8
|
|
63
|
+
}
|
|
64
|
+
});
|
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
* VERSION 5.X.X ONLY, version 6.x.x introduces breaking changes
|
|
5
5
|
* */
|
|
6
6
|
|
|
7
|
+
import { isEmpty, merge } from 'lodash';
|
|
8
|
+
|
|
7
9
|
const LOG_EVENT = 'LOG_EVENT';
|
|
8
10
|
const SET_CURRENT_SCREEN = 'SET_CURRENT_SCREEN';
|
|
9
11
|
const SET_USER_ID = 'SET_USER_ID';
|
|
@@ -65,11 +67,64 @@ export const multiTracking = trackerArgumentsArray =>
|
|
|
65
67
|
createAnalyticsMiddleware(trackerArguments.eventsMapper, trackerArguments.analytics)
|
|
66
68
|
);
|
|
67
69
|
|
|
70
|
+
export const mixpanelUserIdentify = mixpanelInstance => userProfileProperties => {
|
|
71
|
+
const { id } = userProfileProperties;
|
|
72
|
+
if (mixpanelInstance) {
|
|
73
|
+
mixpanelInstance.identify(`${id}`);
|
|
74
|
+
mixpanelInstance.getPeople().set({
|
|
75
|
+
$name: `${id}`,
|
|
76
|
+
$email: null,
|
|
77
|
+
...userProfileProperties
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
export const mixpanelUserReset = mixpanelInstance => () => {
|
|
83
|
+
if (mixpanelInstance) mixpanelInstance.reset();
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
export const mixpanelEventsFlush = mixpanelInstance => () => {
|
|
87
|
+
if (mixpanelInstance) mixpanelInstance.flush();
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
export const singleMixpanelEvent = mixpanelInstance => eventData => {
|
|
91
|
+
const { name, ...yourProperties } = eventData;
|
|
92
|
+
if (mixpanelInstance) mixpanelInstance.track(name, yourProperties);
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
export const singleFirebaseEvent = analyticsIntance => eventData => {
|
|
96
|
+
const { action, category, currency, label, value } = eventData;
|
|
97
|
+
if (analyticsIntance) analyticsIntance.logEvent(category, { action, currency, label, value });
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
export const singleInhouseEvent = sendInhouseAnalytics => eventData => {
|
|
101
|
+
sendInhouseAnalytics(null, eventData);
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
export const singleEventMultitracking = (trackers, eventDefinitions) => (name, eventData) => {
|
|
105
|
+
const mergedData = merge(eventDefinitions[name] || {}, eventData || {});
|
|
106
|
+
const { sharedProps, ...trackerProps } = mergedData;
|
|
107
|
+
const trackersArray = Object.keys(mergedData);
|
|
108
|
+
if (!isEmpty(trackers))
|
|
109
|
+
trackersArray.forEach(trackerName => {
|
|
110
|
+
const eventTracker = trackers[trackerName];
|
|
111
|
+
const fullEventData = merge(trackerProps[trackerName], sharedProps);
|
|
112
|
+
eventTracker?.(fullEventData);
|
|
113
|
+
});
|
|
114
|
+
};
|
|
115
|
+
|
|
68
116
|
export default {
|
|
69
117
|
createAnalyticsMiddleware,
|
|
118
|
+
mixpanelEventsFlush,
|
|
119
|
+
mixpanelUserIdentify,
|
|
120
|
+
mixpanelUserReset,
|
|
121
|
+
multiTracking,
|
|
122
|
+
setUserTracking,
|
|
123
|
+
singleEventMultitracking,
|
|
124
|
+
singleFirebaseEvent,
|
|
125
|
+
singleInhouseEvent,
|
|
126
|
+
singleMixpanelEvent,
|
|
70
127
|
tracker,
|
|
71
128
|
trackEvent,
|
|
72
|
-
trackScreen
|
|
73
|
-
setUserTracking,
|
|
74
|
-
multiTracking
|
|
129
|
+
trackScreen
|
|
75
130
|
};
|
package/package.json
CHANGED