ordering-ui-react-native 0.14.48 → 0.14.49
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/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
|
-
import { StyleSheet, View, RefreshControl, ScrollView } from 'react-native';
|
|
2
|
+
import { StyleSheet, View, RefreshControl, ScrollView, Pressable } from 'react-native';
|
|
3
3
|
import { useLanguage } from 'ordering-components/native';
|
|
4
4
|
import { useTheme } from 'styled-components/native';
|
|
5
5
|
|
|
@@ -41,64 +41,15 @@ const Intro = (props: any): React.ReactElement => {
|
|
|
41
41
|
/>
|
|
42
42
|
}
|
|
43
43
|
>
|
|
44
|
-
<
|
|
45
|
-
{orientationState.orientation ===
|
|
46
|
-
|
|
47
|
-
style={{
|
|
48
|
-
height: orientationState?.dimensions?.height - _offset,
|
|
49
|
-
padding: 4,
|
|
50
|
-
justifyContent: 'space-around',
|
|
51
|
-
alignItems: 'center'
|
|
52
|
-
}}
|
|
53
|
-
>
|
|
54
|
-
<OImage
|
|
55
|
-
source={theme.images.logos.logotype}
|
|
56
|
-
width={(orientationState?.dimensions?.width * 0.4) - _offset}
|
|
57
|
-
height={orientationState?.dimensions?.height * 0.1}
|
|
58
|
-
/>
|
|
59
|
-
|
|
60
|
-
<OImage
|
|
61
|
-
source={theme.images.general.homeHero}
|
|
62
|
-
width={orientationState?.dimensions?.width}
|
|
63
|
-
height={orientationState?.dimensions?.height * 0.6}
|
|
64
|
-
/>
|
|
65
|
-
|
|
66
|
-
<OButton
|
|
67
|
-
text={t('TOUCH_TO_ORDER', 'Touch to order')}
|
|
68
|
-
parentStyle={{
|
|
69
|
-
alignItems: 'center',
|
|
70
|
-
width: orientationState?.dimensions?.width - _offset
|
|
71
|
-
}}
|
|
72
|
-
onClick={goBusiness}
|
|
73
|
-
/>
|
|
74
|
-
<LanguageSelector />
|
|
75
|
-
</View>
|
|
76
|
-
) : (
|
|
77
|
-
<View
|
|
78
|
-
style={{
|
|
79
|
-
flexDirection: 'row',
|
|
80
|
-
justifyContent: 'flex-start',
|
|
81
|
-
alignItems: 'center',
|
|
82
|
-
padding: 0,
|
|
83
|
-
margin: 0
|
|
84
|
-
}}
|
|
85
|
-
>
|
|
86
|
-
<OImage
|
|
87
|
-
source={theme.images.general.homeHeroLandscape}
|
|
88
|
-
width={orientationState?.dimensions?.width * 0.40}
|
|
89
|
-
height={orientationState?.dimensions?.height * 1.1}
|
|
90
|
-
style={{ bottom: 100, right: 100 }}
|
|
91
|
-
resizeMode='cover'
|
|
92
|
-
/>
|
|
93
|
-
|
|
44
|
+
<Pressable onPress={goBusiness}>
|
|
45
|
+
<Container nopadding={orientationState.orientation === LANDSCAPE}>
|
|
46
|
+
{orientationState.orientation === PORTRAIT ? (
|
|
94
47
|
<View
|
|
95
48
|
style={{
|
|
96
|
-
height: orientationState?.dimensions?.height,
|
|
97
|
-
|
|
49
|
+
height: orientationState?.dimensions?.height - _offset,
|
|
50
|
+
padding: 4,
|
|
98
51
|
justifyContent: 'space-around',
|
|
99
|
-
alignItems: 'center'
|
|
100
|
-
paddingBottom: '5%',
|
|
101
|
-
paddingTop: '10%',
|
|
52
|
+
alignItems: 'center'
|
|
102
53
|
}}
|
|
103
54
|
>
|
|
104
55
|
<OImage
|
|
@@ -107,31 +58,82 @@ const Intro = (props: any): React.ReactElement => {
|
|
|
107
58
|
height={orientationState?.dimensions?.height * 0.1}
|
|
108
59
|
/>
|
|
109
60
|
|
|
110
|
-
<
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
61
|
+
<OImage
|
|
62
|
+
source={theme.images.general.homeHero}
|
|
63
|
+
width={orientationState?.dimensions?.width}
|
|
64
|
+
height={orientationState?.dimensions?.height * 0.6}
|
|
65
|
+
/>
|
|
66
|
+
|
|
67
|
+
<OButton
|
|
68
|
+
text={t('TOUCH_TO_ORDER', 'Touch to order')}
|
|
69
|
+
parentStyle={{
|
|
70
|
+
alignItems: 'center',
|
|
71
|
+
width: orientationState?.dimensions?.width - _offset
|
|
72
|
+
}}
|
|
73
|
+
onClick={goBusiness}
|
|
74
|
+
/>
|
|
75
|
+
<LanguageSelector />
|
|
76
|
+
</View>
|
|
77
|
+
) : (
|
|
78
|
+
<View
|
|
79
|
+
style={{
|
|
80
|
+
flexDirection: 'row',
|
|
81
|
+
justifyContent: 'flex-start',
|
|
82
|
+
alignItems: 'center',
|
|
83
|
+
padding: 0,
|
|
84
|
+
margin: 0
|
|
85
|
+
}}
|
|
86
|
+
>
|
|
87
|
+
<OImage
|
|
88
|
+
source={theme.images.general.homeHeroLandscape}
|
|
89
|
+
width={orientationState?.dimensions?.width * 0.40}
|
|
90
|
+
height={orientationState?.dimensions?.height * 1.1}
|
|
91
|
+
style={{ bottom: 100, right: 100 }}
|
|
92
|
+
resizeMode='cover'
|
|
93
|
+
/>
|
|
114
94
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
95
|
+
<View
|
|
96
|
+
style={{
|
|
97
|
+
height: orientationState?.dimensions?.height,
|
|
98
|
+
width: '50%',
|
|
99
|
+
justifyContent: 'space-around',
|
|
100
|
+
alignItems: 'center',
|
|
101
|
+
paddingBottom: '5%',
|
|
102
|
+
paddingTop: '10%',
|
|
103
|
+
}}
|
|
104
|
+
>
|
|
105
|
+
<OImage
|
|
106
|
+
source={theme.images.logos.logotype}
|
|
107
|
+
width={(orientationState?.dimensions?.width * 0.4) - _offset}
|
|
108
|
+
height={orientationState?.dimensions?.height * 0.1}
|
|
123
109
|
/>
|
|
124
|
-
|
|
110
|
+
|
|
111
|
+
<View style={{
|
|
112
|
+
justifyContent: 'space-around',
|
|
113
|
+
alignItems: 'center'
|
|
114
|
+
}}>
|
|
115
|
+
|
|
116
|
+
<OButton
|
|
117
|
+
style={styles.buttonLandStyle}
|
|
118
|
+
text={t('TOUCH_ANYWHERE_TO_ORDER', 'Touch anywhere to order')}
|
|
119
|
+
parentStyle={{
|
|
120
|
+
alignItems: 'center',
|
|
121
|
+
width: orientationState?.dimensions?.width - _offset
|
|
122
|
+
}}
|
|
123
|
+
onClick={goBusiness}
|
|
124
|
+
/>
|
|
125
|
+
<LanguageSelector />
|
|
126
|
+
</View>
|
|
125
127
|
</View>
|
|
126
128
|
</View>
|
|
127
|
-
|
|
128
|
-
)}
|
|
129
|
+
)}
|
|
129
130
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
131
|
+
<LogoutPopup
|
|
132
|
+
open={showLogoutPopup}
|
|
133
|
+
onClose={() => setShowLogoutPopup(false)}
|
|
134
|
+
/>
|
|
135
|
+
</Container>
|
|
136
|
+
</Pressable>
|
|
135
137
|
</ScrollView>
|
|
136
138
|
);
|
|
137
139
|
};
|
|
@@ -10,6 +10,8 @@ import {
|
|
|
10
10
|
|
|
11
11
|
import * as React from 'react';
|
|
12
12
|
import styled from 'styled-components/native';
|
|
13
|
+
import AntDesignIcon from 'react-native-vector-icons/AntDesign'
|
|
14
|
+
import { Icon, IconProps } from 'react-native-vector-icons/Icon';
|
|
13
15
|
|
|
14
16
|
const StyledButton = styled.View<Props>`
|
|
15
17
|
background-color: ${(props: any) => props.theme.colors.primary};
|
|
@@ -77,17 +79,19 @@ interface Props {
|
|
|
77
79
|
isCircle?: boolean;
|
|
78
80
|
bgColor?: string;
|
|
79
81
|
borderColor?: string;
|
|
82
|
+
iconProps?: IconProps;
|
|
83
|
+
IconCustom?: React.FunctionComponent
|
|
80
84
|
}
|
|
81
85
|
|
|
82
86
|
const OButton = (props: Props): React.ReactElement => {
|
|
83
87
|
if (props.isDisabled) {
|
|
84
88
|
return (
|
|
85
89
|
<View style={props.parentStyle}>
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
90
|
+
<StyledButtonDisabled style={props.style}>
|
|
91
|
+
<StyledTextDisabled style={props.disabledTextStyle ? props.disabledTextStyle : props.textStyle}>
|
|
92
|
+
{props.text}
|
|
93
|
+
</StyledTextDisabled>
|
|
94
|
+
</StyledButtonDisabled>
|
|
91
95
|
</View>
|
|
92
96
|
);
|
|
93
97
|
}
|
|
@@ -111,6 +115,15 @@ const OButton = (props: Props): React.ReactElement => {
|
|
|
111
115
|
{props.imgLeftSrc ? (
|
|
112
116
|
<StyledImage style={props.imgLeftStyle} source={props.imgLeftSrc} />
|
|
113
117
|
) : null}
|
|
118
|
+
{props.iconProps ? (
|
|
119
|
+
<>
|
|
120
|
+
{props?.IconCustom ? (
|
|
121
|
+
<props.IconCustom {...props.iconProps} />
|
|
122
|
+
) : (
|
|
123
|
+
<AntDesignIcon {...props.iconProps} />
|
|
124
|
+
)}
|
|
125
|
+
</>
|
|
126
|
+
) : null}
|
|
114
127
|
{props.text ? (
|
|
115
128
|
<StyledText style={props.textStyle}>{props.text}</StyledText>
|
|
116
129
|
) : null}
|