improved ui of network and store screen

fleetbase · Feb 22, 2024 · ee28030 · ee28030
1 parent 2b656e5
commit ee28030
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 5 deletions.
diff --git a/src/features/Network/screens/StoreScreen.js b/src/features/Network/screens/StoreScreen.js
@@ -394,7 +394,7 @@ const StoreScreen = ({ navigation, route }) => {
             <View style={tailwind('bg-gray-900 bg-opacity-50')}>
                 <NetworkHeader
                     style={tailwind('absolute top-0 w-full bg-gray-900 bg-opacity-25 z-20')}
-                    wrapperStyle={[tailwind('border-b-0 pb-2')]}
+                    wrapperStyle={[tailwind('border-b-0 py-2')]}
                     backButtonIcon={backButtonIcon}
                     backButtonStyle={tailwind('bg-opacity-50 bg-gray-900')}
                     backButtonIconStyle={tailwind('text-gray-50')}

diff --git a/src/interface/NetworkSearch.js b/src/interface/NetworkSearch.js
@@ -123,8 +123,7 @@ const NetworkSearch = ({ network, wrapperStyle, buttonTitle, buttonTitleStyle, b
                                         disabled={isLoading}
                                         onPress={() => setQuery(tag)}
                                         key={index}
-                                        style={tailwind(`px-2 py-1 border bg-gray-50 border-gray-200 rounded-lg mx-1 my-1.5`)}
-                                    >
+                                        style={tailwind(`px-2 py-1 border bg-gray-50 border-gray-200 rounded-lg mx-1 my-1.5`)}>
                                         <Text style={tailwind('text-xs text-gray-700')}>{tag}</Text>
                                     </TouchableOpacity>
                                 ))}

diff --git a/src/utils/Format.js b/src/utils/Format.js
@@ -61,6 +61,20 @@ export default class FormatUtil {
         return `${Math.round(km)}km`;
     }
 
+    /**
+     * Truncate string
+     * @static
+     * @param {String} str
+     * @param {Number} length
+     * @return {String}
+     */
+    static truncateString(str, length = 20) {
+        if (str.length > length) {
+            return str.substring(0, length) + '...';
+        }
+        return str;
+    }
+
     /**
      * Get styles for statuses
      *
@@ -137,5 +151,6 @@ const formatCurrency = FormatUtil.currency;
 const formatKm = FormatUtil.km;
 const capitalize = FormatUtil.capitalize;
 const getStatusColors = FormatUtil.getStatusColors;
+const truncateString = FormatUtil.truncateString;
 
-export { formatCurrency, formatKm, capitalize, getStatusColors };
+export { formatCurrency, formatKm, capitalize, getStatusColors, truncateString };
diff --git a/src/utils/index.js b/src/utils/index.js
@@ -20,7 +20,7 @@ import {
 } from './Helper';
 import { calculatePercentage, haversine } from './Calculate';
 import { syncDevice } from './Customer';
-import { formatCurrency, capitalize, getStatusColors } from './Format';
+import { formatCurrency, capitalize, getStatusColors, truncateString } from './Format';
 import { geocode, getCurrentLocation, getLocation } from './Geo';
 import { translate } from './Localize';
 import getCurrency from './get-currency';
@@ -55,4 +55,5 @@ export {
     translate,
     getColorCode,
     getCurrency,
+    truncateString,
 };