ordering-ui-react-native 0.17.82 → 0.17.83-release

package/themes/business/src/components/shared/OSegment.tsx

@@ -1,86 +1,86 @@
-import * as React from 'react';
-import { TouchableOpacity } from 'react-native-gesture-handler';
-import styled from 'styled-components/native';
-import { normalize } from '../../providers/Responsive';
-import { useTheme } from 'styled-components/native';
-
-const Wrapper = styled.View`
-  background-color: white;
-  flex-direction: row;
-  justify-content: space-between;
-`;
-const SegItem = styled.View`
-  background-color: grey;
-  padding: 8px 8px;
-  flex-direction: row;
-  align-items: center;
-  border-radius: 18px;
-`;
-const ItemIcon = styled.Image`
-  resize-mode: contain;
-  margin-right: 5px;
-  width: 14px;
-  height: 14px;
-`;
-const ItemLabel = styled.Text`
-  font-family: 'Poppins-Regular';
-`;
-
-// Props for component
-
-interface ItemProps {
-  text?: string;
-  image?: any;
-}
-interface Props {
-  items: Array<ItemProps>;
-  background?: string;
-  labelStyle?: string;
-  selectedIdx?: number;
-  onSelectItem?: any;
-}
-
-const OSegment = (props: Props) => {
-  var [curIndex, onSelected] = React.useState(props.selectedIdx);
-  const onSelectItem = (idx: number) => {
-    onSelected(idx);
-    props.onSelectItem(idx);
-  };
-  const theme = useTheme();
-  return (
-    <Wrapper>
-      {props.items.map((item, index) => (
-        <TouchableOpacity
-          key={`SegmentItem_${index}`}
-          onPress={() => onSelectItem(index)}>
-          <SegItem
-            style={{
-              backgroundColor:
-                index == curIndex ? theme.colors.primary : 'white',
-            }}>
-            <ItemIcon
-              source={item.image}
-              style={{
-                tintColor: index == curIndex ? 'white' : '#ADADAD',
-              }}></ItemIcon>
-            <ItemLabel
-              style={{
-                fontSize: normalize(8.8),
-                color: index == curIndex ? 'white' : '#ADADAD',
-              }}>
-              {props.labelStyle == 'uppercase'
-                ? item.text?.toUpperCase()
-                : item.text}
-            </ItemLabel>
-          </SegItem>
-        </TouchableOpacity>
-      ))}
-    </Wrapper>
-  );
-};
-
-OSegment.defaultProps = {
-  labelStyle: 'uppercase',
-};
-
-export default OSegment;
+import * as React from 'react';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import styled from 'styled-components/native';
+import { normalize } from '../../providers/Responsive';
+import { useTheme } from 'styled-components/native';
+
+const Wrapper = styled.View`
+  background-color: white;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+const SegItem = styled.View`
+  background-color: grey;
+  padding: 8px 8px;
+  flex-direction: row;
+  align-items: center;
+  border-radius: 18px;
+`;
+const ItemIcon = styled.Image`
+  resize-mode: contain;
+  margin-right: 5px;
+  width: 14px;
+  height: 14px;
+`;
+const ItemLabel = styled.Text`
+  font-family: 'Poppins-Regular';
+`;
+
+// Props for component
+
+interface ItemProps {
+  text?: string;
+  image?: any;
+}
+interface Props {
+  items: Array<ItemProps>;
+  background?: string;
+  labelStyle?: string;
+  selectedIdx?: number;
+  onSelectItem?: any;
+}
+
+const OSegment = (props: Props) => {
+  var [curIndex, onSelected] = React.useState(props.selectedIdx);
+  const onSelectItem = (idx: number) => {
+    onSelected(idx);
+    props.onSelectItem(idx);
+  };
+  const theme = useTheme();
+  return (
+    <Wrapper>
+      {props.items.map((item, index) => (
+        <TouchableOpacity
+          key={`SegmentItem_${index}`}
+          onPress={() => onSelectItem(index)}>
+          <SegItem
+            style={{
+              backgroundColor:
+                index == curIndex ? theme.colors.primary : 'white',
+            }}>
+            <ItemIcon
+              source={item.image}
+              style={{
+                tintColor: index == curIndex ? 'white' : '#ADADAD',
+              }}></ItemIcon>
+            <ItemLabel
+              style={{
+                fontSize: normalize(8.8),
+                color: index == curIndex ? 'white' : '#ADADAD',
+              }}>
+              {props.labelStyle == 'uppercase'
+                ? item.text?.toUpperCase()
+                : item.text}
+            </ItemLabel>
+          </SegItem>
+        </TouchableOpacity>
+      ))}
+    </Wrapper>
+  );
+};
+
+OSegment.defaultProps = {
+  labelStyle: 'uppercase',
+};
+
+export default OSegment;

package/themes/business/src/components/shared/OText.tsx

@@ -1,61 +1,61 @@
-import * as React from 'react';
-import { TextStyle } from 'react-native';
-import styled, { css } from 'styled-components/native';
-
-const SText = styled.Text`
-  color: ${(props: any) => props.color || '#344050'};
-  font-family: 'Poppins-Regular';
-  font-size: ${(props: any) => (props.size ? `${props.size}px` : '14px')};
-  flex-wrap: wrap;
-  margin-bottom: ${(props: any) =>
-    props.hasBottom ? '10px' : props.mBottom ? `${props.mBottom}px` : 0};
-  margin-right: ${(props: any) =>
-    props.hasBottom ? '10px' : props.mRight ? `${props.mRight}px` : 0};
-  margin-left: ${(props: any) =>
-    props.hasBottom ? '10px' : props.mLeft ? `${props.mLeft}px` : 0};
-  ${(props: any) =>
-    props.weight &&
-    css`
-      font-weight: ${props.weight};
-    `};
-  ${(props: any) =>
-    props.isWrap &&
-    css`
-      flex: ${props.weight ? 1 : 0};
-    `};
-  text-decoration: ${(props : any) => props.textDecorationLine};
-`;
-interface Props {
-  color?: string;
-  size?: number;
-  weight?: any;
-  style?: TextStyle;
-  children?: JSX.Element | JSX.Element[] | string;
-  isWrap?: boolean;
-  hasBottom?: boolean;
-  mBottom?: any;
-  space?: any;
-  mRight?: number;
-  mLeft?: number;
-  numberOfLines?: number;
-  ellipsizeMode?: string;
-  adjustsFontSizeToFit?: boolean;
-  textDecorationLine?: string;
-  lineHeight?: number;
-  onTextLayout?: (e : any) => void;
-}
-
-const OText = (props: Props): React.ReactElement => {
-  return (
-    <SText {...props} style={[props.style, { lineHeight: props.lineHeight }]} onTextLayout={props.onTextLayout}>
-      {props.children}
-      {props.space && ' '}
-    </SText>
-  );
-};
-
-OText.defaultProps = {
-  onTextLayout: (e: any) => {}
-};
-
-export default OText;
+import * as React from 'react';
+import { TextStyle } from 'react-native';
+import styled, { css } from 'styled-components/native';
+
+const SText = styled.Text`
+  color: ${(props: any) => props.color || '#344050'};
+  font-family: 'Poppins-Regular';
+  font-size: ${(props: any) => (props.size ? `${props.size}px` : '14px')};
+  flex-wrap: wrap;
+  margin-bottom: ${(props: any) =>
+    props.hasBottom ? '10px' : props.mBottom ? `${props.mBottom}px` : 0};
+  margin-right: ${(props: any) =>
+    props.hasBottom ? '10px' : props.mRight ? `${props.mRight}px` : 0};
+  margin-left: ${(props: any) =>
+    props.hasBottom ? '10px' : props.mLeft ? `${props.mLeft}px` : 0};
+  ${(props: any) =>
+    props.weight &&
+    css`
+      font-weight: ${props.weight};
+    `};
+  ${(props: any) =>
+    props.isWrap &&
+    css`
+      flex: ${props.weight ? 1 : 0};
+    `};
+  text-decoration: ${(props : any) => props.textDecorationLine};
+`;
+interface Props {
+  color?: string;
+  size?: number;
+  weight?: any;
+  style?: TextStyle;
+  children?: JSX.Element | JSX.Element[] | string;
+  isWrap?: boolean;
+  hasBottom?: boolean;
+  mBottom?: any;
+  space?: any;
+  mRight?: number;
+  mLeft?: number;
+  numberOfLines?: number;
+  ellipsizeMode?: string;
+  adjustsFontSizeToFit?: boolean;
+  textDecorationLine?: string;
+  lineHeight?: number;
+  onTextLayout?: (e : any) => void;
+}
+
+const OText = (props: Props): React.ReactElement => {
+  return (
+    <SText {...props} style={[props.style, { lineHeight: props.lineHeight }]} onTextLayout={props.onTextLayout}>
+      {props.children}
+      {props.space && ' '}
+    </SText>
+  );
+};
+
+OText.defaultProps = {
+  onTextLayout: (e: any) => {}
+};
+
+export default OText;

package/themes/business/src/components/shared/OTextarea.tsx

@@ -1,47 +1,47 @@
-import * as React from 'react';
-import styled from 'styled-components/native';
-import { useTheme } from 'styled-components/native';
-
-const Wrapper = styled.View`
-  border-radius: 10px;
-  border: 1px solid ${(props: any) => props.theme.colors.lightGray};
-`;
-const Inner = styled.TextInput`
-  height: 100px;
-  padding: 5px 10px 5px 10px;
-`;
-
-interface Props {
-  lines?: number;
-  value?: string;
-  placeholder?: string;
-  onChange?: any;
-  onFocus?: any;
-  textTareaRef?: any;
-  autoFocus?: boolean;
-}
-
-const OTextarea = (props: Props) => {
-  const theme = useTheme();
-  return (
-    <Wrapper>
-      <Inner
-        ref={props.textTareaRef}
-        onFocus={() => props.onFocus()}
-        onChangeText={(txt: any) => props.onChange(txt)}
-        textAlignVertical={'top'}
-        placeholder={props.placeholder}
-        placeholderTextColor={theme.colors.arrowColor}
-        numberOfLines={props.lines}
-        underlineColorAndroid={'transparent'}
-        value={props.value}
-        autoFocus={props.autoFocus}
-        multiline={true}
-        selectionColor={theme.colors.primary}
-        color={theme.colors.textGray}
-      />
-    </Wrapper>
-  );
-};
-
-export default OTextarea;
+import * as React from 'react';
+import styled from 'styled-components/native';
+import { useTheme } from 'styled-components/native';
+
+const Wrapper = styled.View`
+  border-radius: 10px;
+  border: 1px solid ${(props: any) => props.theme.colors.lightGray};
+`;
+const Inner = styled.TextInput`
+  height: 100px;
+  padding: 5px 10px 5px 10px;
+`;
+
+interface Props {
+  lines?: number;
+  value?: string;
+  placeholder?: string;
+  onChange?: any;
+  onFocus?: any;
+  textTareaRef?: any;
+  autoFocus?: boolean;
+}
+
+const OTextarea = (props: Props) => {
+  const theme = useTheme();
+  return (
+    <Wrapper>
+      <Inner
+        ref={props.textTareaRef}
+        onFocus={() => props.onFocus()}
+        onChangeText={(txt: any) => props.onChange(txt)}
+        textAlignVertical={'top'}
+        placeholder={props.placeholder}
+        placeholderTextColor={theme.colors.arrowColor}
+        numberOfLines={props.lines}
+        underlineColorAndroid={'transparent'}
+        value={props.value}
+        autoFocus={props.autoFocus}
+        multiline={true}
+        selectionColor={theme.colors.primary}
+        color={theme.colors.textGray}
+      />
+    </Wrapper>
+  );
+};
+
+export default OTextarea;

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

@@ -1,92 +1,92 @@
-import * as React from 'react';
-import { Animated, StyleSheet, Text, View } from 'react-native';
-import { ToastType, useToast, useLanguage } from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import { getTraduction } from '../../utils';
-
-const fadeDuration = 300;
-const bottomPosition = 20;
-
-export const Toast = (props: any) => {
-  const [toastConfig, { hideToast }] = useToast();
-  const [, t] = useLanguage();
-  const opacity = React.useRef(new Animated.Value(0)).current;
-  const theme = useTheme();
-
-  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 = theme.colors.toastInfo || '#6BA4FF';
-      break;
-    case ToastType.Error:
-      backgroundColor = theme.colors.toastError || '#D83520';
-      break;
-    case ToastType.Success:
-      backgroundColor = theme.colors.toastSuccess || '#90C68E';
-      break;
-  }
-
-  return (
-    <Animated.View
-      style={[styles.container, { bottom: bottomPosition, opacity }]}>
-      <View style={[styles.toast, { backgroundColor }]}>
-        <Text style={{ ...styles.message, ...props.messageStyle }}>
-          {getTraduction(message, t)}
-        </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, useLanguage } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { getTraduction } from '../../utils';
+
+const fadeDuration = 300;
+const bottomPosition = 20;
+
+export const Toast = (props: any) => {
+  const [toastConfig, { hideToast }] = useToast();
+  const [, t] = useLanguage();
+  const opacity = React.useRef(new Animated.Value(0)).current;
+  const theme = useTheme();
+
+  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 = theme.colors.toastInfo || '#6BA4FF';
+      break;
+    case ToastType.Error:
+      backgroundColor = theme.colors.toastError || '#D83520';
+      break;
+    case ToastType.Success:
+      backgroundColor = theme.colors.toastSuccess || '#90C68E';
+      break;
+  }
+
+  return (
+    <Animated.View
+      style={[styles.container, { bottom: bottomPosition, opacity }]}>
+      <View style={[styles.toast, { backgroundColor }]}>
+        <Text style={{ ...styles.message, ...props.messageStyle }}>
+          {getTraduction(message, t)}
+        </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/business/src/components/shared/index.tsx

@@ -1,27 +1,27 @@
-import OText from './OText';
-import OButton from './OButton';
-import OInput from './OInput';
-import OIcon from './OIcon';
-import OIconButton from './OIconButton';
-import OTextarea from './OTextarea';
-import OModal from './OModal';
-import OAlert from './OAlert';
-import OFab from './OFab';
-import OLink from './OLink';
-import ODropDown from './ODropDown';
-import ODropDownCalendar from './ODropDownCalendar';
-
-export {
-  OText,
-  OButton,
-  OInput,
-  OIcon,
-  OIconButton,
-  OTextarea,
-  OAlert,
-  OModal,
-  OFab,
-  OLink,
-  ODropDown,
-  ODropDownCalendar
-};
+import OText from './OText';
+import OButton from './OButton';
+import OInput from './OInput';
+import OIcon from './OIcon';
+import OIconButton from './OIconButton';
+import OTextarea from './OTextarea';
+import OModal from './OModal';
+import OAlert from './OAlert';
+import OFab from './OFab';
+import OLink from './OLink';
+import ODropDown from './ODropDown';
+import ODropDownCalendar from './ODropDownCalendar';
+
+export {
+  OText,
+  OButton,
+  OInput,
+  OIcon,
+  OIconButton,
+  OTextarea,
+  OAlert,
+  OModal,
+  OFab,
+  OLink,
+  ODropDown,
+  ODropDownCalendar
+};

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

@@ -1,10 +1,10 @@
-export const USER_TYPE = {
-  BUSINESS: 'business',
-  CUSTOMER: 'customer',
-  DRIVER: 'driver',
-};
-
-export const DIRECTION = {
-  RIGHT: 'right',
-  LEFT: 'left',
-};
+export const USER_TYPE = {
+  BUSINESS: 'business',
+  CUSTOMER: 'customer',
+  DRIVER: 'driver',
+};
+
+export const DIRECTION = {
+  RIGHT: 'right',
+  LEFT: 'left',
+};