ordering-ui-react-native 0.16.56-release → 0.16.57-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.16.56-release",
+  "version": "0.16.57-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react'
+import React, { useState, useCallback } from 'react'
 
-import { Platform, StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View, TouchableOpacity } from 'react-native';
 
 import { OButton, OText, OLink, OModal } from '../shared'
 import {
@@ -44,6 +44,9 @@ export const OrderContentComponent = (props: OrderContent) => {
   const [{ configs }] = useConfig();
   const [openReviewModal, setOpenReviewModal] = useState(false)
 
+  const [isReadMore, setIsReadMore] = useState(false)
+  const [lengthMore, setLengthMore] = useState(false)
+
   const pastOrderStatuses = [1, 2, 5, 6, 10, 11, 12, 16, 17]
 
   const walletName: any = {
@@ -95,6 +98,10 @@ export const OrderContentComponent = (props: OrderContent) => {
     return /^\d+$/.test(str);
   }
 
+  const onTextLayout = useCallback((e: any) => {
+    setLengthMore(e.nativeEvent.lines.length >= 3); //to check the text is more than 2 lines or not
+  },[]);
+
   return (
     <OrderContent isOrderGroup={isOrderGroup} lastOrder={lastOrder}>
       {isOrderGroup && (
@@ -180,6 +187,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                 ios: `maps:0,0?q=${order?.business?.address}`,
                 android: `geo:0,0?q=${order?.business?.address}`,
               })}
+              numberOfLines={2}
               shorcut={order?.business?.address}
               TextStyle={styles.textLink}
             />
@@ -297,17 +305,26 @@ export const OrderContentComponent = (props: OrderContent) => {
         )}
 
         {!!order?.customer?.address && (
-          <View style={styles.linkWithIcons}>
-            <OLink
-              PressStyle={styles.linkWithIcons}
-              url={Platform.select({
-                ios: `maps:0,0?q=${order?.customer?.address}`,
-                android: `geo:0,0?q=${order?.customer?.address}`,
-              })}
-              shorcut={order?.customer?.address}
-              TextStyle={styles.textLink}
-            />
-          </View>
+          <>
+            <View style={styles.linkWithIcons}>
+              <OLink
+                PressStyle={{ ...styles.linkWithIcons, marginBottom: 0 }}
+                url={Platform.select({
+                  ios: `maps:0,0?q=${order?.customer?.address}`,
+                  android: `geo:0,0?q=${order?.customer?.address}`,
+                })}
+                onTextLayout={onTextLayout}
+                numberOfLines={isReadMore ? 20 : 2}
+                shorcut={order?.customer?.address}
+                TextStyle={styles.textLink}
+              />
+            </View>
+            {lengthMore && (
+              <TouchableOpacity onPress={() => setIsReadMore(!isReadMore)}>
+                <OText size={12} color={theme.colors.statusOrderBlue}>{isReadMore ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+              </TouchableOpacity>
+            )}
+          </>
         )}
 
         {!!order?.customer?.internal_number && (

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

@@ -12,10 +12,12 @@ interface Props {
   TextStyle?: TextStyle;
   type?: string;
   hasButton?: boolean;
+  numberOfLines?: number;
+  onTextLayout?: (e : any) => void;
 }
 
 const OLink = (props: Props): React.ReactElement => {
-  const { url, shorcut, color, PressStyle, TextStyle, type, hasButton } = props;
+  const { url, shorcut, color, PressStyle, TextStyle, type, hasButton, numberOfLines, onTextLayout } = props;
   const [, t] = useLanguage();
 
   const handleAlert = () =>
@@ -75,9 +77,11 @@ const OLink = (props: Props): React.ReactElement => {
       ) : (
         <OText
           style={TextStyle}
-          numberOfLines={1}
+          numberOfLines={numberOfLines ?? 1}
           ellipsizeMode="tail"
-          color={color}>
+          color={color}
+          onTextLayout={onTextLayout}
+        >
           {shorcut}
         </OText>
       )}
@@ -85,4 +89,8 @@ const OLink = (props: Props): React.ReactElement => {
   );
 };
 
+OLink.defaultProps = {
+  onTextLayout: (e: any) => {}
+};
+
 export default OLink;

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

@@ -42,15 +42,20 @@ interface Props {
   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 }]}>
+    <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/original/src/components/SingleOrderCard/index.tsx

@@ -84,9 +84,13 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
       marginRight: 2,
     },
     reorderLoading: {
-      width: 80,
-      height: 40,
-      borderRadius: 10,
+      height: 23,
+      paddingLeft: 20,
+      paddingRight: 20,
+      borderRadius: 23,
+      shadowOpacity: 0,
+      backgroundColor: theme.colors.primary,
+      borderWidth: 0,
     },
     reorderbutton: {
       height: 23,
@@ -183,8 +187,6 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
 
   const handleOriginalReorder = () => {
     setConfirm({ ...confirm, open: false, title: null })
-    setReorderSelected(order?.id);
-    handleReorder && handleReorder(order?.id);
   }
 
   return (