ordering-ui-react-native 0.24.17 → 0.24.18

package/themes/kiosk/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/kiosk/src/components/shared/index.tsx

@@ -1,37 +1,37 @@
-import OText from './OText'
-import OButton from './OButton'
-import OInput from './OInput'
-import OSegment from './OSegment'
-import ODropDown from './ODropDown'
-import OIcon from './OIcon'
-import OIconText from './OIconText'
-import OCheckbox from './OCheckbox'
-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 OImage from './OImage'
-import OCard from './OCard'
-
-export {
-	OText,
-	OButton,
-	OInput,
-	OSegment,
-	ODropDown,
-	OIcon,
-	OIconText,
-	OCheckbox,
-	OIconButton,
-	OTextarea,
-	OToggle,
-	OKeyButton,
-	OAlert,
-  OModal,
-	OBottomPopup,
-	OCard,
-	OImage
-}
+import OText from './OText'
+import OButton from './OButton'
+import OInput from './OInput'
+import OSegment from './OSegment'
+import ODropDown from './ODropDown'
+import OIcon from './OIcon'
+import OIconText from './OIconText'
+import OCheckbox from './OCheckbox'
+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 OImage from './OImage'
+import OCard from './OCard'
+
+export {
+	OText,
+	OButton,
+	OInput,
+	OSegment,
+	ODropDown,
+	OIcon,
+	OIconText,
+	OCheckbox,
+	OIconButton,
+	OTextarea,
+	OToggle,
+	OKeyButton,
+	OAlert,
+  OModal,
+	OBottomPopup,
+	OCard,
+	OImage
+}

package/themes/kiosk/src/layouts/Container.tsx

@@ -1,45 +1,45 @@
-import React from 'react';
-import { Platform } from 'react-native';
-import styled, { css } from "styled-components/native";
-
-const ContainerStyled = styled.ScrollView`
-  flex: 1;
-  ${(props: Props) =>
-    !props.nopadding &&
-    css`
-      padding: ${Platform.OS === 'ios' ? '0px 20px 20px' : '20px'};
-    `}
-  background-color: ${(props: any) => props.theme.colors.backgroundPage};
-`;
-
-const SafeAreStyled = styled.SafeAreaView`
-  flex: 1;
-  background-color: ${(props: any) => props.theme.colors.backgroundPage};
-`;
-
-export const Container = (props: Props) => {
-  return (
-    <SafeAreStyled
-      nestedScrollEnabled={props.nestedScrollEnabled}
-    >
-      <ContainerStyled
-        {...props}
-        keyboardShouldPersistTaps="handled"
-        ref={props?.forwardRef}
-      >
-        {props.children}
-      </ContainerStyled>
-    </SafeAreStyled>
-  );
-};
-
-Container.defaultProps = {
-  nestedScrollEnabled: false
-}
-
-interface Props {
-  nestedScrollEnabled: boolean,
-  nopadding?: boolean;
-  children?: any;
-  forwardRef?: any
-}
+import React from 'react';
+import { Platform } from 'react-native';
+import styled, { css } from "styled-components/native";
+
+const ContainerStyled = styled.ScrollView`
+  flex: 1;
+  ${(props: Props) =>
+    !props.nopadding &&
+    css`
+      padding: ${Platform.OS === 'ios' ? '0px 20px 20px' : '20px'};
+    `}
+  background-color: ${(props: any) => props.theme.colors.backgroundPage};
+`;
+
+const SafeAreStyled = styled.SafeAreaView`
+  flex: 1;
+  background-color: ${(props: any) => props.theme.colors.backgroundPage};
+`;
+
+export const Container = (props: Props) => {
+  return (
+    <SafeAreStyled
+      nestedScrollEnabled={props.nestedScrollEnabled}
+    >
+      <ContainerStyled
+        {...props}
+        keyboardShouldPersistTaps="handled"
+        ref={props?.forwardRef}
+      >
+        {props.children}
+      </ContainerStyled>
+    </SafeAreStyled>
+  );
+};
+
+Container.defaultProps = {
+  nestedScrollEnabled: false
+}
+
+interface Props {
+  nestedScrollEnabled: boolean,
+  nopadding?: boolean;
+  children?: any;
+  forwardRef?: any
+}

package/themes/kiosk/src/layouts/GridContainer.tsx

@@ -1,25 +1,25 @@
-import React from 'react';
-import { ViewStyle } from 'react-native';
-
-import styled from 'styled-components/native';
-
-const Wrapper = styled.View`
-	display: flex;
-	flex-wrap: wrap;
-	flex-direction: row;
-`
-
-const GridContainer = (props: Props): React.ReactElement => {
-  return (
-    <Wrapper {...props.style}>
-      {props.children}
-    </Wrapper>
-  );
-}
-
-interface Props {
-  children: any;
-  style?: ViewStyle;
-}
-
-export default GridContainer;
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+import styled from 'styled-components/native';
+
+const Wrapper = styled.View`
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: row;
+`
+
+const GridContainer = (props: Props): React.ReactElement => {
+  return (
+    <Wrapper {...props.style}>
+      {props.children}
+    </Wrapper>
+  );
+}
+
+interface Props {
+  children: any;
+  style?: ViewStyle;
+}
+
+export default GridContainer;

package/themes/kiosk/src/layouts/SafeAreaContainer.tsx

@@ -1,6 +1,6 @@
-import styled from 'styled-components/native';
-
-export const SafeAreaContainer = styled.SafeAreaView`
-  flex: 1;
-  background-color: ${(props: any) => props.theme.colors.backgroundPage};
-`;
+import styled from 'styled-components/native';
+
+export const SafeAreaContainer = styled.SafeAreaView`
+  flex: 1;
+  background-color: ${(props: any) => props.theme.colors.backgroundPage};
+`;

package/themes/kiosk/src/providers/CartBottomSheetProvider.tsx

@@ -1,35 +1,35 @@
-import React, { createContext, useContext, useState } from 'react'
-
-type ICartBottom = any;
-
-type ICartBottomContext = [ICartBottom, ICartBottom];
-
-const CartBottomSheetContext = createContext<ICartBottomContext>([false, {}]);
-
-export const CartBottomSheetProvider = ({ children }: any) => {
-  const [bottomSheetVisibility, setBottomSheetVisibility] = useState<ICartBottom>(false);
-
-  const showCartBottomSheet = () => {
-    setBottomSheetVisibility(true);
-  }
-
-  const hideCartBottomSheet = () => {
-    setBottomSheetVisibility(false);
-  }
-
-  const functions = {
-    showCartBottomSheet,
-    hideCartBottomSheet
-  }
-
-  return (
-    <CartBottomSheetContext.Provider value={[bottomSheetVisibility, functions]}>
-      {children}
-    </CartBottomSheetContext.Provider>
-  );
-};
-
-export function useCartBottomSheet() {
-  const cartBottomManager = useContext(CartBottomSheetContext)
-  return cartBottomManager || [{}]
-}
+import React, { createContext, useContext, useState } from 'react'
+
+type ICartBottom = any;
+
+type ICartBottomContext = [ICartBottom, ICartBottom];
+
+const CartBottomSheetContext = createContext<ICartBottomContext>([false, {}]);
+
+export const CartBottomSheetProvider = ({ children }: any) => {
+  const [bottomSheetVisibility, setBottomSheetVisibility] = useState<ICartBottom>(false);
+
+  const showCartBottomSheet = () => {
+    setBottomSheetVisibility(true);
+  }
+
+  const hideCartBottomSheet = () => {
+    setBottomSheetVisibility(false);
+  }
+
+  const functions = {
+    showCartBottomSheet,
+    hideCartBottomSheet
+  }
+
+  return (
+    <CartBottomSheetContext.Provider value={[bottomSheetVisibility, functions]}>
+      {children}
+    </CartBottomSheetContext.Provider>
+  );
+};
+
+export function useCartBottomSheet() {
+  const cartBottomManager = useContext(CartBottomSheetContext)
+  return cartBottomManager || [{}]
+}