feat(react-autocomplete-france): Add doc

Releasing the first version of the package with the docs
c-delouvencourt · Aug 29, 2024 · f8993b1 · f8993b1
1 parent 2abe1dd
commit f8993b1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "react-autocomplete-france",
   "description": "React components for France Address Gouv Autocomplete",
   "private": false,
-  "version": "1.0.1",
+  "version": "1.0.5",
   "type": "module",
   "author": "Clément de Louvencourt <clement@meilleursbiens.com>",
   "license": "MIT",

diff --git a/src/hooks/useAutocomplete.tsx b/src/hooks/useAutocomplete.tsx
@@ -10,6 +10,8 @@ interface UseAutocompleteProps {
     hasWatermark?: boolean
     containerStyle?: React.CSSProperties
     suggestionStyle?: React.CSSProperties
+    suggestionLabelStyle?: React.CSSProperties
+    alignementRef?: React.RefObject<HTMLElement>
 }
 
 const MapPin = (props: SVGProps<any>) => (
@@ -34,10 +36,13 @@ function useAutocomplete({
                              limit = 5,
                              hasWatermark = true,
                              containerStyle = {},
-                             suggestionStyle = {}
+                             suggestionStyle = {},
+    suggestionLabelStyle = {},
+    alignementRef
                          }: UseAutocompleteProps) {
 
     const ref = useRef<HTMLInputElement>(null);
+    const alignementReference = alignementRef || ref;
 
     const [suggestions, setSuggestions] = useState<AutocompleteFeature[]>([]);
     const [query, setQuery] = useState('');
@@ -84,11 +89,11 @@ function useAutocomplete({
     }, [ref]);
 
     useEffect(() => {
-        if (ref.current) {
-            const { top, left, height, width } = ref.current.getBoundingClientRect();
-            setPosition({ top: 0, left: 0, width });
+        if (alignementReference.current) {
+            const { top, left, height, width } = alignementReference.current.getBoundingClientRect();
+            setPosition({ top: top + height, left: left, width });
         }
-    }, [ref.current, suggestions]);
+    }, [alignementReference.current, suggestions]);
 
     useEffect(() => {
         if (ref.current && suggestions.length > 0) {
@@ -105,6 +110,7 @@ function useAutocomplete({
                         maxHeight: '200px',
                         overflowY: 'auto',
                         borderRadius: '4px',
+                        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.04)',
                         ...containerStyle
                     }}
                 >
@@ -121,6 +127,9 @@ function useAutocomplete({
                                     fontFamily: 'inherit',
                                     whiteSpace: 'nowrap',
                                     overflow: 'hidden',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 4,
                                     ...suggestionStyle
                                 }}
                                 onMouseDown={() => {
@@ -130,7 +139,14 @@ function useAutocomplete({
                                     if (onSuggestionSelected) onSuggestionSelected(suggestion);
                                 }}
                             >
-                                <MapPin width={14} color={"#cecece"}/> {suggestion.properties.label}
+                                <MapPin width={15} />
+                                <span style={{
+                                    fontSize: '0.9em',
+                                    textOverflow: 'ellipsis',
+                                    overflow: 'hidden',
+                                    whiteSpace: 'nowrap',
+                                    width: 'calc(100% - 20px)',
+                                }}>{suggestion.properties.label}</span>
                             </li>
                         ))
                     )}
@@ -149,7 +165,9 @@ function useAutocomplete({
             );
 
             const portalElement = document.createElement('div');
+            portalElement.id = 'autocomplete-portal';
             portalElement.style.position = 'absolute';
+            portalElement.style.zIndex = '9999';
             portalElement.style.top = position.top + 'px';
             portalElement.style.left = position.left + 'px';
             portalElement.style.width = position.width + 'px';