fix(geolocator): fix geolocator result bold text #closes1826

Canadian-Geospatial-Platform · Mar 5, 2024 · 6059cce · 6059cce
1 parent d8e420f
commit 6059cce
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 11 deletions.
diff --git a/packages/geoview-core/src/core/components/geolocator/geo-list.tsx b/packages/geoview-core/src/core/components/geolocator/geo-list.tsx
@@ -3,9 +3,11 @@ import { Box, ListItemButton, Grid, Tooltip, Typography } from '@/ui';
 import { GeoListItem } from './geolocator';
 import { sxClassesList } from './geolocator-style';
 import { useMapStoreActions } from '@/core/stores/store-interface-and-intial-values/map-state';
+import { HtmlToReact } from '@/app';
 
 type GeoListProps = {
   geoListItems: GeoListItem[];
+  searchValue: string;
 };
 
 type tooltipProp = Pick<GeoListItem, 'name' | 'province' | 'category'>;
@@ -30,12 +32,36 @@ const getTooltipTitle = ({ name, province, category }: tooltipProp): string => {
   return title;
 };
 
+/**
+ * Transform the search value in search result with bold css.
+ * @param {string} title list title in search result
+ * @param {string} searchValue value with user did the search
+ * @param {string} province province of the list title in search result
+ * @returns string
+ */
+const transformListTitle = (_title: string, _searchValue: string, province: string) => {
+  const title = _title.toUpperCase();
+  const searchValue = _searchValue.toUpperCase();
+  const idx = title.indexOf(searchValue);
+  if (!searchValue || idx === -1) {
+    return _title; // bail early
+  }
+  const len = searchValue.length;
+  return (
+    <HtmlToReact
+      className="list-title"
+      htmlContent={`${_title.slice(0, idx)}<b>${_title.slice(idx, idx + len)}</b>${_title.slice(idx + len)}${province}`}
+    />
+  );
+};
+
 /**
  * Create list of items to display under search.
- * @param {geoListItems} - items to display
+ * @param {GeoListItem} geoListItems - items to display
+ * @param {string} searchValue - search text
  * @returns {JSX} - React JSX element
  */
-export default function GeoList({ geoListItems }: GeoListProps) {
+export default function GeoList({ geoListItems, searchValue }: GeoListProps) {
   const { zoomToGeoLocatorLocation } = useMapStoreActions();
 
   return (
@@ -45,17 +71,17 @@ export default function GeoList({ geoListItems }: GeoListProps) {
           title={getTooltipTitle(geoListItem)}
           placement="right"
           // sometime when we search by `bay`, response have name and lat same, thats why index is used to distinguish
-          // eslint-disable-next-line react/no-array-index-key
-          key={`${geoListItem.name}-${geoListItem.lat}-${index}`}
+          key={`${geoListItem.name}-${geoListItem.lat}-${index.toString()}`}
         >
           <ListItem component="div" disablePadding>
             <ListItemButton onClick={() => zoomToGeoLocatorLocation([geoListItem.lng, geoListItem.lat], geoListItem.bbox)}>
               <Grid container>
                 <Grid item xs={12} sm={8}>
-                  <Typography component="p" sx={sxClassesList.main}>
-                    <Typography component="span">{geoListItem.name}</Typography>
-                    {!!geoListItem.province && geoListItem.province !== 'null' && (
-                      <Typography component="span">{`, ${geoListItem.province}`}</Typography>
+                  <Typography component="div" sx={sxClassesList.listStyle}>
+                    {transformListTitle(
+                      geoListItem.name,
+                      searchValue,
+                      !!geoListItem.province && geoListItem.province !== 'null' ? `, ${geoListItem.province}` : ''
                     )}
                   </Typography>
                 </Grid>

diff --git a/packages/geoview-core/src/core/components/geolocator/geolocator-result.tsx b/packages/geoview-core/src/core/components/geolocator/geolocator-result.tsx
@@ -190,7 +190,7 @@ export function GeolocatorResult({ geoLocationData, searchValue, error }: Geoloc
       )}
       <Divider />
       <Box sx={{ maxHeight: mapSize![1] - 130, overflowY: 'auto' }}>
-        {!!data.length && <GeoList geoListItems={data} />}
+        {!!data.length && <GeoList geoListItems={data} searchValue={searchValue} />}
         {(!data.length || error) && (
           <Box sx={{ p: 10 }}>
             <Typography component="p" sx={{ fontSize: 14 }}>

diff --git a/packages/geoview-core/src/core/components/geolocator/geolocator-style.ts b/packages/geoview-core/src/core/components/geolocator/geolocator-style.ts
@@ -68,14 +68,23 @@ export const sxClasses = {
 };
 
 export const sxClassesList = {
+  listStyle: {
+    fontSize: '0.875rem',
+    '& .list-title': {
+      '>div': {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+      },
+    },
+  },
   main: {
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     '& span': {
       fontSize: '0.75rem',
       ':first-of-type': {
-        fontWeight: 'bold',
         fontSize: '0.875rem',
       },
     },

diff --git a/packages/geoview-core/src/core/components/geolocator/geolocator.tsx b/packages/geoview-core/src/core/components/geolocator/geolocator.tsx
@@ -96,7 +96,8 @@ export function Geolocator() {
   const onChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target;
     setSearchValue(value);
-    if (value.length) {
+    // do fetch request when user enter alteast 3 characters. #1826
+    if (value.length >= 3) {
       debouncedRequest(value);
     }
     // clear geo list when search term cleared from input field.