ordering-ui-react-native 0.24.16 → 0.24.18

package/themes/original/src/components/shared/OToast.tsx

@@ -1,93 +1,93 @@
-import * as React from "react";
-import { Animated, StyleSheet, Text, View } from "react-native";
-import { ToastType, useToast } from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-
-const fadeDuration = 300;
-const bottomPosition = 20;
-
-export const Toast: React.FC = () => {
-	const theme = useTheme();
-	// const insets = useSafeAreaInsets();
-	const [, { toastConfig, hideToast }] = useToast();
-	const opacity = React.useRef(new Animated.Value(0)).current;
-
-	const fadeIn = React.useCallback(() => {
-		Animated.timing(opacity, {
-			toValue: 1,
-			duration: fadeDuration,
-			useNativeDriver: true,
-		}).start();
-	}, [opacity]);
-
-	const fadeOut = React.useCallback(() => {
-		Animated.timing(opacity, {
-			toValue: 0,
-			duration: fadeDuration,
-			useNativeDriver: true,
-		}).start(() => {
-			hideToast && hideToast();
-		});
-	}, [opacity, hideToast]);
-
-	React.useEffect(() => {
-		if (!toastConfig) {
-			return;
-		}
-
-		fadeIn();
-		const timer = setTimeout(fadeOut, toastConfig.duration);
-
-		return () => clearTimeout(timer);
-	}, [toastConfig, fadeIn, fadeOut]);
-
-	if (!toastConfig) {
-		return null;
-	}
-
-	const { type, message } = toastConfig;
-
-	let backgroundColor;
-	switch (type) {
-		case ToastType.Info:
-			backgroundColor = '#6ba4ff';
-			break;
-		case ToastType.Error:
-			backgroundColor = theme.colors.primary;
-			break;
-		case ToastType.Success:
-			backgroundColor = '#73bd24';
-			break;
-	}
-
-	return (
-		<Animated.View
-			style={[
-				styles.container,
-				{ bottom: bottomPosition, opacity },
-			]}
-		>
-			<View style={[styles.toast, { backgroundColor }]}>
-				<Text style={styles.message}>{message}</Text>
-			</View>
-		</Animated.View>
-	);
-};
-
-const styles = StyleSheet.create({
-	container: {
-		alignSelf: "center",
-		position: "absolute",
-		maxWidth: 480,
-		zIndex: 9999999999
-	},
-	toast: {
-		borderRadius: 16,
-		padding: 16,
-	},
-	message: {
-		fontSize: 14,
-		textAlign: "center",
-		color: '#fff',
-	},
-});
+import * as React from "react";
+import { Animated, StyleSheet, Text, View } from "react-native";
+import { ToastType, useToast } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+
+const fadeDuration = 300;
+const bottomPosition = 20;
+
+export const Toast: React.FC = () => {
+	const theme = useTheme();
+	// const insets = useSafeAreaInsets();
+	const [, { toastConfig, hideToast }] = useToast();
+	const opacity = React.useRef(new Animated.Value(0)).current;
+
+	const fadeIn = React.useCallback(() => {
+		Animated.timing(opacity, {
+			toValue: 1,
+			duration: fadeDuration,
+			useNativeDriver: true,
+		}).start();
+	}, [opacity]);
+
+	const fadeOut = React.useCallback(() => {
+		Animated.timing(opacity, {
+			toValue: 0,
+			duration: fadeDuration,
+			useNativeDriver: true,
+		}).start(() => {
+			hideToast && hideToast();
+		});
+	}, [opacity, hideToast]);
+
+	React.useEffect(() => {
+		if (!toastConfig) {
+			return;
+		}
+
+		fadeIn();
+		const timer = setTimeout(fadeOut, toastConfig.duration);
+
+		return () => clearTimeout(timer);
+	}, [toastConfig, fadeIn, fadeOut]);
+
+	if (!toastConfig) {
+		return null;
+	}
+
+	const { type, message } = toastConfig;
+
+	let backgroundColor;
+	switch (type) {
+		case ToastType.Info:
+			backgroundColor = '#6ba4ff';
+			break;
+		case ToastType.Error:
+			backgroundColor = theme.colors.primary;
+			break;
+		case ToastType.Success:
+			backgroundColor = '#73bd24';
+			break;
+	}
+
+	return (
+		<Animated.View
+			style={[
+				styles.container,
+				{ bottom: bottomPosition, opacity },
+			]}
+		>
+			<View style={[styles.toast, { backgroundColor }]}>
+				<Text style={styles.message}>{message}</Text>
+			</View>
+		</Animated.View>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		alignSelf: "center",
+		position: "absolute",
+		maxWidth: 480,
+		zIndex: 9999999999
+	},
+	toast: {
+		borderRadius: 16,
+		padding: 16,
+	},
+	message: {
+		fontSize: 14,
+		textAlign: "center",
+		color: '#fff',
+	},
+});

package/themes/original/src/components/shared/OToggle.tsx

@@ -1,158 +1,158 @@
-import * as React from 'react';
-import {
-    StyleSheet,
-    Text,
-    View,
-    TouchableOpacity,
-    Animated,
-    Platform,
-    TextStyle
-} from "react-native";
-
-interface propTypes {
-    isOn: boolean,
-    label?: string,
-    onColor?: string,
-    offColor?: string,
-    size?: string,
-    labelStyle?: TextStyle,
-    thumbOnStyle?: any,
-    thumbOffStyle?: any,
-    trackOnStyle?: any,
-    trackOffStyle?: any,
-    onToggle: any,
-    icon?: any,
-    disabled?: boolean,
-    animationSpeed?: number,
-    useNativeDriver?: boolean,
-    circleColor?: string,
-};
-
-const OToggleSwitch = (props: propTypes) => {
-
-    const calculateDimensions = (size: string) => {
-        switch (size) {
-            case "small":
-                return {
-                    width: 40,
-                    padding: 10,
-                    circleWidth: 15,
-                    circleHeight: 15,
-                    translateX: 22
-                };
-            case "large":
-                return {
-                    width: 70,
-                    padding: 20,
-                    circleWidth: 30,
-                    circleHeight: 30,
-                    translateX: 38
-                };
-            default:
-                return {
-                    width: 50,
-                    padding: 15,
-                    circleWidth: 25,
-                    circleHeight: 25,
-                    translateX: 30
-                };
-        }
-    }
-
-    const offsetX = new Animated.Value(0);
-    const dimensions = calculateDimensions(props.size || 'medium');
-
-    const createToggleSwitchStyle = () => [
-        {
-            justifyContent: "center",
-            width: dimensions.width,
-            borderRadius: 20,
-            padding: dimensions.padding,
-            backgroundColor: props.isOn ? props.onColor : props.offColor
-        },
-        props.isOn ? props.trackOnStyle : props.trackOffStyle
-    ];
-
-    const createInsideCircleStyle = () => [
-        {
-            alignItems: "center",
-            justifyContent: "center",
-            margin: Platform.OS === "web" ? 0 : 4,
-            left: Platform.OS === "web" ? 4 : 0,
-            position: "absolute",
-            backgroundColor: props.circleColor,
-            transform: [{ translateX: offsetX }],
-            width: dimensions.circleWidth,
-            height: dimensions.circleHeight,
-            borderRadius: dimensions.circleWidth / 2,
-            shadowColor: "#000",
-            shadowOffset: {
-                width: 0,
-                height: 2
-            },
-            shadowOpacity: 0.2,
-            shadowRadius: 2.5,
-            elevation: 1.5
-        },
-        props.isOn ? props.thumbOnStyle : props.thumbOffStyle
-    ];
-
-
-    const { isOn, onToggle, disabled, labelStyle, label, icon } = props;
-
-    const toValue = isOn
-        ? dimensions.width - dimensions.translateX
-        : 0;
-
-    Animated.timing(offsetX, {
-        toValue,
-        duration: props.animationSpeed,
-        useNativeDriver: props.useNativeDriver || false,
-    }).start();
-
-    return (
-        <View style={styles.container}>
-            {label ? (
-                <Text style={[styles.labelStyle, labelStyle]}>{label}</Text>
-            ) : null}
-            <TouchableOpacity
-                style={createToggleSwitchStyle()}
-                activeOpacity={0.8}
-                onPress={() => (disabled ? null : onToggle(!isOn))}
-            >
-                <Animated.View style={createInsideCircleStyle()}>
-                    {icon}
-                </Animated.View>
-            </TouchableOpacity>
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    container: {
-        flexDirection: "row",
-        alignItems: "center"
-    },
-    labelStyle: {
-        marginHorizontal: 10
-    }
-});
-
-OToggleSwitch.defaultProps = {
-    isOn: false,
-    onColor: "#4cd137",
-    offColor: "#ecf0f1",
-    size: "medium",
-    labelStyle: {},
-    thumbOnStyle: {},
-    thumbOffStyle: {},
-    trackOnStyle: {},
-    trackOffStyle: {},
-    icon: null,
-    disabled: false,
-    animationSpeed: 300,
-    useNativeDriver: true,
-    circleColor: 'white'
-};
-
+import * as React from 'react';
+import {
+    StyleSheet,
+    Text,
+    View,
+    TouchableOpacity,
+    Animated,
+    Platform,
+    TextStyle
+} from "react-native";
+
+interface propTypes {
+    isOn: boolean,
+    label?: string,
+    onColor?: string,
+    offColor?: string,
+    size?: string,
+    labelStyle?: TextStyle,
+    thumbOnStyle?: any,
+    thumbOffStyle?: any,
+    trackOnStyle?: any,
+    trackOffStyle?: any,
+    onToggle: any,
+    icon?: any,
+    disabled?: boolean,
+    animationSpeed?: number,
+    useNativeDriver?: boolean,
+    circleColor?: string,
+};
+
+const OToggleSwitch = (props: propTypes) => {
+
+    const calculateDimensions = (size: string) => {
+        switch (size) {
+            case "small":
+                return {
+                    width: 40,
+                    padding: 10,
+                    circleWidth: 15,
+                    circleHeight: 15,
+                    translateX: 22
+                };
+            case "large":
+                return {
+                    width: 70,
+                    padding: 20,
+                    circleWidth: 30,
+                    circleHeight: 30,
+                    translateX: 38
+                };
+            default:
+                return {
+                    width: 50,
+                    padding: 15,
+                    circleWidth: 25,
+                    circleHeight: 25,
+                    translateX: 30
+                };
+        }
+    }
+
+    const offsetX = new Animated.Value(0);
+    const dimensions = calculateDimensions(props.size || 'medium');
+
+    const createToggleSwitchStyle = () => [
+        {
+            justifyContent: "center",
+            width: dimensions.width,
+            borderRadius: 20,
+            padding: dimensions.padding,
+            backgroundColor: props.isOn ? props.onColor : props.offColor
+        },
+        props.isOn ? props.trackOnStyle : props.trackOffStyle
+    ];
+
+    const createInsideCircleStyle = () => [
+        {
+            alignItems: "center",
+            justifyContent: "center",
+            margin: Platform.OS === "web" ? 0 : 4,
+            left: Platform.OS === "web" ? 4 : 0,
+            position: "absolute",
+            backgroundColor: props.circleColor,
+            transform: [{ translateX: offsetX }],
+            width: dimensions.circleWidth,
+            height: dimensions.circleHeight,
+            borderRadius: dimensions.circleWidth / 2,
+            shadowColor: "#000",
+            shadowOffset: {
+                width: 0,
+                height: 2
+            },
+            shadowOpacity: 0.2,
+            shadowRadius: 2.5,
+            elevation: 1.5
+        },
+        props.isOn ? props.thumbOnStyle : props.thumbOffStyle
+    ];
+
+
+    const { isOn, onToggle, disabled, labelStyle, label, icon } = props;
+
+    const toValue = isOn
+        ? dimensions.width - dimensions.translateX
+        : 0;
+
+    Animated.timing(offsetX, {
+        toValue,
+        duration: props.animationSpeed,
+        useNativeDriver: props.useNativeDriver || false,
+    }).start();
+
+    return (
+        <View style={styles.container}>
+            {label ? (
+                <Text style={[styles.labelStyle, labelStyle]}>{label}</Text>
+            ) : null}
+            <TouchableOpacity
+                style={createToggleSwitchStyle()}
+                activeOpacity={0.8}
+                onPress={() => (disabled ? null : onToggle(!isOn))}
+            >
+                <Animated.View style={createInsideCircleStyle()}>
+                    {icon}
+                </Animated.View>
+            </TouchableOpacity>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    labelStyle: {
+        marginHorizontal: 10
+    }
+});
+
+OToggleSwitch.defaultProps = {
+    isOn: false,
+    onColor: "#4cd137",
+    offColor: "#ecf0f1",
+    size: "medium",
+    labelStyle: {},
+    thumbOnStyle: {},
+    thumbOffStyle: {},
+    trackOnStyle: {},
+    trackOffStyle: {},
+    icon: null,
+    disabled: false,
+    animationSpeed: 300,
+    useNativeDriver: true,
+    circleColor: 'white'
+};
+
 export default OToggleSwitch;

package/themes/original/src/components/shared/index.tsx

@@ -1,31 +1,31 @@
-import OText from './OText'
-import OButton from './OButton'
-import OInput from './OInput'
-import ODropDown from './ODropDown'
-import OIcon from './OIcon'
-import OIconText from './OIconText'
-import OIconButton from './OIconButton'
-import OTextarea from './OTextarea'
-import OToggle from './OToggle'
-import OKeyButton from './OKeyButton'
-import OModal from './OModal'
-import OAlert from './OAlert'
-import OBottomPopup from './OBottomPopup'
-import HeaderTitle from './HeaderTitle'
-
-export {
-	OText,
-	OButton,
-	OInput,
-	ODropDown,
-	OIcon,
-	OIconText,
-	OIconButton,
-	OTextarea,
-	OToggle,
-	OKeyButton,
-	OAlert,
-  	OModal,
-	OBottomPopup,
-  HeaderTitle
-}
+import OText from './OText'
+import OButton from './OButton'
+import OInput from './OInput'
+import ODropDown from './ODropDown'
+import OIcon from './OIcon'
+import OIconText from './OIconText'
+import OIconButton from './OIconButton'
+import OTextarea from './OTextarea'
+import OToggle from './OToggle'
+import OKeyButton from './OKeyButton'
+import OModal from './OModal'
+import OAlert from './OAlert'
+import OBottomPopup from './OBottomPopup'
+import HeaderTitle from './HeaderTitle'
+
+export {
+	OText,
+	OButton,
+	OInput,
+	ODropDown,
+	OIcon,
+	OIconText,
+	OIconButton,
+	OTextarea,
+	OToggle,
+	OKeyButton,
+	OAlert,
+  	OModal,
+	OBottomPopup,
+  HeaderTitle
+}

package/themes/original/src/config/constants.tsx

@@ -1,43 +1,43 @@
-export const USER_TYPE = {
-	BUSINESS: 'business',
-	CUSTOMER: 'customer',
-	DRIVER: 'driver'
-}
-
-export const ORDER_TYPES = [
-	{
-		value: 1,
-		content: 'DELIVERY',
-		description: 'ORDERTYPE_DESCRIPTION_DELIVERY'
-	},
-	{
-		value: 2,
-		content: 'PICKUP',
-		description: 'ORDERTYPE_DESCRIPTION_PICKUP',
-	},
-	{
-		value: 3,
-		content: 'EAT_IN',
-		description: 'ORDERTYPE_DESCRIPTION_EATIN',
-	},
-	{
-		value: 4,
-		content: 'CURBSIDE',
-		description: 'ORDERTYPE_DESCRIPTION_CURBSIDE',
-	},
-	{
-		value: 5,
-		content: 'DRIVE_THRU',
-		description: 'ORDERTYPE_DESCRIPTION_DRIVETHRU',
-	},
-	{
-		value: 7,
-		content: 'CATERING_DELIVERY',
-		description: 'ORDERTYPE_DESCRIPTION_CATERING_DELIVERY',
-	},
-	{
-		value: 8,
-		content: 'CATERING_PICKUP',
-		description: 'ORDERTYPE_DESCRIPTION_CATERING_PICKUP',
-	}
-]
+export const USER_TYPE = {
+	BUSINESS: 'business',
+	CUSTOMER: 'customer',
+	DRIVER: 'driver'
+}
+
+export const ORDER_TYPES = [
+	{
+		value: 1,
+		content: 'DELIVERY',
+		description: 'ORDERTYPE_DESCRIPTION_DELIVERY'
+	},
+	{
+		value: 2,
+		content: 'PICKUP',
+		description: 'ORDERTYPE_DESCRIPTION_PICKUP',
+	},
+	{
+		value: 3,
+		content: 'EAT_IN',
+		description: 'ORDERTYPE_DESCRIPTION_EATIN',
+	},
+	{
+		value: 4,
+		content: 'CURBSIDE',
+		description: 'ORDERTYPE_DESCRIPTION_CURBSIDE',
+	},
+	{
+		value: 5,
+		content: 'DRIVE_THRU',
+		description: 'ORDERTYPE_DESCRIPTION_DRIVETHRU',
+	},
+	{
+		value: 7,
+		content: 'CATERING_DELIVERY',
+		description: 'ORDERTYPE_DESCRIPTION_CATERING_DELIVERY',
+	},
+	{
+		value: 8,
+		content: 'CATERING_PICKUP',
+		description: 'ORDERTYPE_DESCRIPTION_CATERING_PICKUP',
+	}
+]