ordering-ui-react-native 0.24.18 → 0.25.1

package/themes/instacart/src/components/shared/OBottomPopup.tsx

@@ -1,118 +1,118 @@
-import React, { useEffect, useRef } from 'react'
-import { Modal, TouchableWithoutFeedback, Dimensions, StyleSheet, View, Text, PanResponder, Animated } from 'react-native'
-const deviceHeight = Dimensions.get('window').height
-
-interface Props {
-	open: boolean;
-	title?: string;
-	children?: any;
-	onClose?: any;
-}
-const OBottomPopup = (props: Props) => {
-	const {
-		open,
-		title,
-		onClose,
-		children
-	} = props
-
-	const panY = useRef(new Animated.Value(deviceHeight)).current;
-	const resetPositionAnim = Animated.timing(panY, {
-		toValue: 0,
-		duration: 300,
-		useNativeDriver: false
-	});
-	const closeAnim = Animated.timing(panY, {
-		toValue: deviceHeight,
-		duration: 500,
-		useNativeDriver: false
-	});
-
-	const panResponders = useRef(
-		PanResponder.create({
-			onStartShouldSetPanResponder: () => true,
-			onMoveShouldSetPanResponder: () => false,
-			onPanResponderMove: Animated.event(
-				[ null, { dy: panY } ],
-				{ useNativeDriver: false }
-			),
-			onPanResponderRelease: (e, gs) => {
-				if (gs.dy > 0 && gs.vy > 1.5) {
-					return closeAnim.start(() => handleDismiss())
-				}
-				return resetPositionAnim.start();
-			},
-		})
-	).current;
-
-	const top = panY.interpolate({
-		inputRange: [-1, 0, 1],
-		outputRange: [0, 0, 1],
-	});
-
-	const handleDismiss = () => {
-		panY.setValue(0);
-		closeAnim.start(() => onClose());
-	}
-
-	useEffect(() => {
-		resetPositionAnim.start(() => resetPositionAnim.reset());
-	}, [open])
-
-	return (
-		<Modal
-			animated
-			animationType="fade"
-			transparent
-			visible={open}
-			onRequestClose={() => handleDismiss()}
-		>
-			<View style={styles.overlay}>
-				<TouchableWithoutFeedback
-					style={styles.touchableOutsideStyle}
-					onPress={() => handleDismiss()}
-				>
-					<View style={styles.touchableOutsideStyle} />
-				</TouchableWithoutFeedback>
-				<Animated.View style={[styles.container, { top }]} {...panResponders.panHandlers}>
-					{title && <Text style={styles.titleStyle}>
-						{title}
-					</Text>}
-					{children}
-				</Animated.View>
-			</View>
-		</Modal>
-	)
-}
-
-const styles = StyleSheet.create({
-	overlay: {
-		backgroundColor: '#000000AA',
-		flex: 1,
-		justifyContent: 'flex-end',
-	},
-	container: {
-		backgroundColor: 'white',
-		paddingTop: 12,
-		borderTopRightRadius: 12,
-		borderTopLeftRadius: 12,
-		paddingHorizontal: 40
-	},
-	box: {
-		height: 150,
-		width: 150,
-		backgroundColor: "blue",
-		borderRadius: 5
-	 },
-	touchableOutsideStyle: {
-		flex: 1,
-		width: '100%'
-	},
-	titleStyle: {
-		fontSize: 18,
-		marginBottom: 16,
-		marginTop: 12
-	}
-})
-
-export default OBottomPopup
+import React, { useEffect, useRef } from 'react'
+import { Modal, TouchableWithoutFeedback, Dimensions, StyleSheet, View, Text, PanResponder, Animated } from 'react-native'
+const deviceHeight = Dimensions.get('window').height
+
+interface Props {
+	open: boolean;
+	title?: string;
+	children?: any;
+	onClose?: any;
+}
+const OBottomPopup = (props: Props) => {
+	const {
+		open,
+		title,
+		onClose,
+		children
+	} = props
+
+	const panY = useRef(new Animated.Value(deviceHeight)).current;
+	const resetPositionAnim = Animated.timing(panY, {
+		toValue: 0,
+		duration: 300,
+		useNativeDriver: false
+	});
+	const closeAnim = Animated.timing(panY, {
+		toValue: deviceHeight,
+		duration: 500,
+		useNativeDriver: false
+	});
+
+	const panResponders = useRef(
+		PanResponder.create({
+			onStartShouldSetPanResponder: () => true,
+			onMoveShouldSetPanResponder: () => false,
+			onPanResponderMove: Animated.event(
+				[ null, { dy: panY } ],
+				{ useNativeDriver: false }
+			),
+			onPanResponderRelease: (e, gs) => {
+				if (gs.dy > 0 && gs.vy > 1.5) {
+					return closeAnim.start(() => handleDismiss())
+				}
+				return resetPositionAnim.start();
+			},
+		})
+	).current;
+
+	const top = panY.interpolate({
+		inputRange: [-1, 0, 1],
+		outputRange: [0, 0, 1],
+	});
+
+	const handleDismiss = () => {
+		panY.setValue(0);
+		closeAnim.start(() => onClose());
+	}
+
+	useEffect(() => {
+		resetPositionAnim.start(() => resetPositionAnim.reset());
+	}, [open])
+
+	return (
+		<Modal
+			animated
+			animationType="fade"
+			transparent
+			visible={open}
+			onRequestClose={() => handleDismiss()}
+		>
+			<View style={styles.overlay}>
+				<TouchableWithoutFeedback
+					style={styles.touchableOutsideStyle}
+					onPress={() => handleDismiss()}
+				>
+					<View style={styles.touchableOutsideStyle} />
+				</TouchableWithoutFeedback>
+				<Animated.View style={[styles.container, { top }]} {...panResponders.panHandlers}>
+					{title && <Text style={styles.titleStyle}>
+						{title}
+					</Text>}
+					{children}
+				</Animated.View>
+			</View>
+		</Modal>
+	)
+}
+
+const styles = StyleSheet.create({
+	overlay: {
+		backgroundColor: '#000000AA',
+		flex: 1,
+		justifyContent: 'flex-end',
+	},
+	container: {
+		backgroundColor: 'white',
+		paddingTop: 12,
+		borderTopRightRadius: 12,
+		borderTopLeftRadius: 12,
+		paddingHorizontal: 40
+	},
+	box: {
+		height: 150,
+		width: 150,
+		backgroundColor: "blue",
+		borderRadius: 5
+	 },
+	touchableOutsideStyle: {
+		flex: 1,
+		width: '100%'
+	},
+	titleStyle: {
+		fontSize: 18,
+		marginBottom: 16,
+		marginTop: 12
+	}
+})
+
+export default OBottomPopup

package/themes/instacart/src/components/shared/OBottomStickBar.tsx

@@ -1,62 +1,62 @@
-import React from 'react';
-import styled, { useTheme } from 'styled-components/native';
-import { OButton, OText } from '.';
-import { useLanguage } from 'ordering-components/native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { ViewStyle } from 'react-native';
-
-const BWrap = styled.View`
-	position: absolute;
-	min-height: 69px;
-	background-color: white;
-	width: 100%;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	padding-horizontal: 40px;
-	padding-vertical: 12px;
-	border-top-width: 1px;
-	border-top-color: ${(props: any) => props.theme.colors.border};
-`;
-
-const TxtButton = styled.TouchableOpacity`
-
-`;
-
-interface Props {
-	rightText?: string;
-	rightAction?: any;
-	leftText?: string;
-	leftAction?: any;
-	customLeftView?: any;
-	customRightView?: any;
-	rightBtnStyle?: ViewStyle;
-}
-
-const OBottomStickBar = (props: Props) => {
-	const [, t] = useLanguage();
-	const { rightText, rightAction, customRightView, leftText, leftAction, customLeftView, rightBtnStyle } = props;
-	const { bottom } = useSafeAreaInsets();
-	const theme = useTheme();
-
-	return (
-		<BWrap style={{bottom: 0, paddingBottom: bottom}}>
-			{customLeftView ? customLeftView : 
-				<TxtButton onPress={leftAction ? leftAction : () => {}}>
-					<OText size={16} weight={'bold'} color={theme.colors.textSecondary}>{leftText || t('SKIP', 'Skip')}</OText>
-				</TxtButton>
-			}
-			{customRightView ? customRightView :
-				<OButton 
-					onClick={rightAction ? rightAction : () => {}}
-					text={rightText || t('CONTINUE', 'Continue')} textStyle={{fontSize: 14, color: 'white', marginEnd: 32}} 
-					style={{paddingStart: 10, paddingEnd: 10, ...rightBtnStyle}}
-					imgRightSrc={theme.images.general.arrow_left}
-					imgRightStyle={{tintColor: 'white', transform: [{ rotate: '180deg' }]}}
-				/>
-			}
-		</BWrap>
-	)
-}
-
-export default OBottomStickBar;
+import React from 'react';
+import styled, { useTheme } from 'styled-components/native';
+import { OButton, OText } from '.';
+import { useLanguage } from 'ordering-components/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ViewStyle } from 'react-native';
+
+const BWrap = styled.View`
+	position: absolute;
+	min-height: 69px;
+	background-color: white;
+	width: 100%;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	padding-horizontal: 40px;
+	padding-vertical: 12px;
+	border-top-width: 1px;
+	border-top-color: ${(props: any) => props.theme.colors.border};
+`;
+
+const TxtButton = styled.TouchableOpacity`
+
+`;
+
+interface Props {
+	rightText?: string;
+	rightAction?: any;
+	leftText?: string;
+	leftAction?: any;
+	customLeftView?: any;
+	customRightView?: any;
+	rightBtnStyle?: ViewStyle;
+}
+
+const OBottomStickBar = (props: Props) => {
+	const [, t] = useLanguage();
+	const { rightText, rightAction, customRightView, leftText, leftAction, customLeftView, rightBtnStyle } = props;
+	const { bottom } = useSafeAreaInsets();
+	const theme = useTheme();
+
+	return (
+		<BWrap style={{bottom: 0, paddingBottom: bottom}}>
+			{customLeftView ? customLeftView : 
+				<TxtButton onPress={leftAction ? leftAction : () => {}}>
+					<OText size={16} weight={'bold'} color={theme.colors.textSecondary}>{leftText || t('SKIP', 'Skip')}</OText>
+				</TxtButton>
+			}
+			{customRightView ? customRightView :
+				<OButton 
+					onClick={rightAction ? rightAction : () => {}}
+					text={rightText || t('CONTINUE', 'Continue')} textStyle={{fontSize: 14, color: 'white', marginEnd: 32}} 
+					style={{paddingStart: 10, paddingEnd: 10, ...rightBtnStyle}}
+					imgRightSrc={theme.images.general.arrow_left}
+					imgRightStyle={{tintColor: 'white', transform: [{ rotate: '180deg' }]}}
+				/>
+			}
+		</BWrap>
+	)
+}
+
+export default OBottomStickBar;

package/themes/instacart/src/components/shared/OButton.tsx

@@ -1,133 +1,133 @@
-import {
-	ActivityIndicator,
-	I18nManager,
-	ImageSourcePropType,
-	ImageStyle,
-	TextStyle,
-	TouchableOpacity,
-	View,
-	ViewStyle,
-} from 'react-native';
-
-import * as React from 'react';
-import styled from 'styled-components/native';
-
-const StyledButton = styled.View<Props>`
-  background-color: ${(props: any) => props.theme.colors.primary};
-  border-radius: 26px;
-  border-width: 2px;
-  height: 52px;
-  border-color: ${(props: any) => props.theme.colors.primary};
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 1px 1px 2px #00000020;
-  position: relative;
-  shadow-opacity: 0;
-`
-const StyledButtonDisabled = styled(StyledButton)`
-  background-color: ${(props: any) => props.theme.colors.disabled};
-  border-color: ${(props: any) => props.theme.colors.disabled};
-`
-
-const StyledText = styled.Text`
-  font-size: 12px;
-  color: ${(props: any) => props.theme.colors.btnFont};
-  margin-left: 10px;
-  margin-right: 10px;
-  font-family: 'Poppins-Regular';
-`
-
-const StyledTextDisabled = styled(StyledText)`
-  color: ${(props: any) => props.theme.colors.primary};
-`
-
-const StyledImage = styled.Image`
-  width: 20px;
-  height: 20px;
-  resize-mode: contain;
-`
-const EndImage = styled.Image`
-  width: 15px;
-  height: 15px;
-  resize-mode: contain;
-  right: 20px;
-  position: absolute;
-  right: 20px;
-`;
-
-interface Props {
-	testID?: string;
-	isLoading?: boolean;
-	isDisabled?: boolean;
-	onClick?: () => void;
-	style?: ViewStyle;
-	parentStyle?: ViewStyle;
-	disabledStyle?: ViewStyle;
-	textStyle?: TextStyle;
-	imgLeftSrc?: ImageSourcePropType | string;
-	imgLeftStyle?: ImageStyle;
-	imgRightSrc?: any;
-	imgRightStyle?: ImageStyle;
-	indicatorColor?: string;
-	activeOpacity?: number;
-	text?: string;
-	isCircle?: boolean;
-	bgColor?: string;
-	borderColor?: string;
-	loadingStyle?: ViewStyle;
-	theme?: any;
-}
-
-const OButton = (props: Props): React.ReactElement => {
-	if (props.isDisabled) {
-		return (
-			<View style={props.parentStyle}>
-				<StyledButtonDisabled style={props.style}>
-					<StyledTextDisabled style={props.textStyle}>
-						{props.text}
-					</StyledTextDisabled>
-				</StyledButtonDisabled>
-			</View>
-		);
-	}
-
-	if (props.isLoading) {
-		return (
-			<StyledButton style={props.style}>
-				<ActivityIndicator size="small" color={props.indicatorColor} style={props.loadingStyle} />
-			</StyledButton>
-		);
-	}
-
-	return (
-		<TouchableOpacity
-			testID={props.testID}
-			activeOpacity={props.activeOpacity}
-			onPress={props.onClick}
-			style={{ width: props.isCircle ? 52 : props.style?.width, ...props.parentStyle }}
-		>
-			<StyledButton style={props.bgColor ? { ...props.style, backgroundColor: props.bgColor, borderColor: props.borderColor } : props.style}>
-				{props.imgLeftSrc ? (
-					<StyledImage style={{ transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }], ...props.imgLeftStyle }} source={props.imgLeftSrc} />
-				) : null}
-				{props.text ? (
-					<StyledText style={props.textStyle}>{props.text}</StyledText>
-				) : null}
-				{props.imgRightSrc ? (
-					<EndImage style={props.imgRightStyle} source={props.imgRightSrc} />
-				) : null}
-			</StyledButton>
-		</TouchableOpacity>
-	);
-}
-
-OButton.defaultProps = {
-	isLoading: false,
-	isDisabled: false,
-	indicatorColor: 'white',
-	activeOpacity: 0.5,
-	imgRightSrc: null
-};
-
-export default OButton;
+import {
+	ActivityIndicator,
+	I18nManager,
+	ImageSourcePropType,
+	ImageStyle,
+	TextStyle,
+	TouchableOpacity,
+	View,
+	ViewStyle,
+} from 'react-native';
+
+import * as React from 'react';
+import styled from 'styled-components/native';
+
+const StyledButton = styled.View<Props>`
+  background-color: ${(props: any) => props.theme.colors.primary};
+  border-radius: 26px;
+  border-width: 2px;
+  height: 52px;
+  border-color: ${(props: any) => props.theme.colors.primary};
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 1px 1px 2px #00000020;
+  position: relative;
+  shadow-opacity: 0;
+`
+const StyledButtonDisabled = styled(StyledButton)`
+  background-color: ${(props: any) => props.theme.colors.disabled};
+  border-color: ${(props: any) => props.theme.colors.disabled};
+`
+
+const StyledText = styled.Text`
+  font-size: 12px;
+  color: ${(props: any) => props.theme.colors.btnFont};
+  margin-left: 10px;
+  margin-right: 10px;
+  font-family: 'Poppins-Regular';
+`
+
+const StyledTextDisabled = styled(StyledText)`
+  color: ${(props: any) => props.theme.colors.primary};
+`
+
+const StyledImage = styled.Image`
+  width: 20px;
+  height: 20px;
+  resize-mode: contain;
+`
+const EndImage = styled.Image`
+  width: 15px;
+  height: 15px;
+  resize-mode: contain;
+  right: 20px;
+  position: absolute;
+  right: 20px;
+`;
+
+interface Props {
+	testID?: string;
+	isLoading?: boolean;
+	isDisabled?: boolean;
+	onClick?: () => void;
+	style?: ViewStyle;
+	parentStyle?: ViewStyle;
+	disabledStyle?: ViewStyle;
+	textStyle?: TextStyle;
+	imgLeftSrc?: ImageSourcePropType | string;
+	imgLeftStyle?: ImageStyle;
+	imgRightSrc?: any;
+	imgRightStyle?: ImageStyle;
+	indicatorColor?: string;
+	activeOpacity?: number;
+	text?: string;
+	isCircle?: boolean;
+	bgColor?: string;
+	borderColor?: string;
+	loadingStyle?: ViewStyle;
+	theme?: any;
+}
+
+const OButton = (props: Props): React.ReactElement => {
+	if (props.isDisabled) {
+		return (
+			<View style={props.parentStyle}>
+				<StyledButtonDisabled style={props.style}>
+					<StyledTextDisabled style={props.textStyle}>
+						{props.text}
+					</StyledTextDisabled>
+				</StyledButtonDisabled>
+			</View>
+		);
+	}
+
+	if (props.isLoading) {
+		return (
+			<StyledButton style={props.style}>
+				<ActivityIndicator size="small" color={props.indicatorColor} style={props.loadingStyle} />
+			</StyledButton>
+		);
+	}
+
+	return (
+		<TouchableOpacity
+			testID={props.testID}
+			activeOpacity={props.activeOpacity}
+			onPress={props.onClick}
+			style={{ width: props.isCircle ? 52 : props.style?.width, ...props.parentStyle }}
+		>
+			<StyledButton style={props.bgColor ? { ...props.style, backgroundColor: props.bgColor, borderColor: props.borderColor } : props.style}>
+				{props.imgLeftSrc ? (
+					<StyledImage style={{ transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }], ...props.imgLeftStyle }} source={props.imgLeftSrc} />
+				) : null}
+				{props.text ? (
+					<StyledText style={props.textStyle}>{props.text}</StyledText>
+				) : null}
+				{props.imgRightSrc ? (
+					<EndImage style={props.imgRightStyle} source={props.imgRightSrc} />
+				) : null}
+			</StyledButton>
+		</TouchableOpacity>
+	);
+}
+
+OButton.defaultProps = {
+	isLoading: false,
+	isDisabled: false,
+	indicatorColor: 'white',
+	activeOpacity: 0.5,
+	imgRightSrc: null
+};
+
+export default OButton;