Merge pull request #309 from bikehopper/graue/autocomplete-align

Align autocomplete icons better
bikehopper · Feb 1, 2024 · e0d5c10 · e0d5c10
2 parents 2ef20a7 + 4f77d10
commit e0d5c10
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 59 deletions.
diff --git a/src/components/SearchAutocompleteDropdown.css b/src/components/SearchAutocompleteDropdown.css
diff --git a/src/components/SearchAutocompleteDropdown.jsx b/src/components/SearchAutocompleteDropdown.jsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import classnames from 'classnames';
 import { removeRecentlyUsedLocation } from '../features/geocoding';
 import {
   LocationSourceType,
@@ -15,8 +16,6 @@ import SelectionListItem from './SelectionListItem';
 
 import { ReactComponent as Position } from 'iconoir/icons/position.svg';
 
-import './SearchAutocompleteDropdown.css';
-
 const LIST_ITEM_CLASSNAME = 'SearchAutocompleteDropdown_place';
 
 let _resultMousedownTime = 0;
@@ -159,43 +158,36 @@ export default function SearchAutocompleteDropdown(props) {
   };
 
   return (
-    <SelectionList className="SearchAutocompleteDropdown">
-      {showCurrentLocationOption && (
-        <SelectionListItem
-          buttonClassName={LIST_ITEM_CLASSNAME}
-          onClick={handleCurrentLocationClick}
-          onMouseDown={handleResultMousedown}
-        >
-          <Icon className="SearchAutocompleteDropdown_icon">
-            <Position />
-          </Icon>
-          <span className="SearchAutocompleteDropdown_placeDescription">
-            {currentLocationString}
-          </span>
-        </SelectionListItem>
-      )}
-      {features.map((feature, index) => (
-        <SelectionListItem
-          buttonClassName={LIST_ITEM_CLASSNAME}
-          key={feature.properties.osm_id + ':' + feature.properties.type}
-          onClick={handleClick.bind(null, index)}
-          onMouseDown={handleResultMousedown}
-          onRemoveClick={
-            feature.fromRecentlyUsed
-              ? handleRemoveClick.bind(null, index)
-              : null
-          }
-        >
-          <PlaceIcon
-            className="SearchAutocompleteDropdown_icon"
-            place={feature}
+    <div className="flex flex-col m-0">
+      <SelectionList className="flex-grow pointer-events-auto">
+        {showCurrentLocationOption && (
+          <AutocompleteItem
+            onClick={handleCurrentLocationClick}
+            onMouseDown={handleResultMousedown}
+            icon={
+              <Icon>
+                <Position />
+              </Icon>
+            }
+            text={currentLocationString}
           />
-          <span className="SearchAutocompleteDropdown_placeDescription">
-            {describePlace(feature)}
-          </span>
-        </SelectionListItem>
-      ))}
-    </SelectionList>
+        )}
+        {features.map((feature, index) => (
+          <AutocompleteItem
+            key={feature.properties.osm_id + ':' + feature.properties.type}
+            onClick={handleClick.bind(null, index)}
+            onMouseDown={handleResultMousedown}
+            onRemoveClick={
+              feature.fromRecentlyUsed
+                ? handleRemoveClick.bind(null, index)
+                : null
+            }
+            icon={<PlaceIcon place={feature} />}
+            text={describePlace(feature)}
+          />
+        ))}
+      </SelectionList>
+    </div>
   );
 }
 
@@ -210,3 +202,22 @@ export function isAutocompleteResultElement(domElement) {
 export function getLastAutocompleteResultMousedownTime() {
   return _resultMousedownTime;
 }
+
+function AutocompleteItem({ onClick, onMouseDown, onRemoveClick, icon, text }) {
+  return (
+    <SelectionListItem
+      buttonClassName={classnames(
+        LIST_ITEM_CLASSNAME,
+        'flex flex-row items-center text-[13px]',
+      )}
+      onClick={onClick}
+      onMouseDown={onMouseDown}
+      onRemoveClick={onRemoveClick}
+    >
+      {React.cloneElement(icon, {
+        className: 'relative top-0.5 my-0 -ml-2 md:ml-6 mr-2',
+      })}
+      <span className="align-middle">{text}</span>
+    </SelectionListItem>
+  );
+}