feat: add option for custom "not found message" (#284)

assets/css/leaflet.css

@@ -212,6 +212,10 @@
   border-right: none;
 }
 
+.leaflet-bar-notfound {
+  font-style: italic;
+}
+
 .leaflet-control-geosearch a.reset {
   color: black;
   font-weight: bold;

docs/leaflet-control.mdx

@@ -44,6 +44,29 @@ const searchControl = new SearchControl({
 map.addControl(searchControl);
 ```
 
+## Message if address not found
+
+<Playground>
+  <Map
+    provider="OpenStreetMap"
+    controlOptions={{
+      notFoundMessage: 'Sorry, that address could not be found.',
+    }}
+  />
+</Playground>
+
+```js
+import { SearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';
+
+const searchControl = new SearchControl({
+  notFoundMessage: 'Sorry, that address could not be found.',
+  provider: new OpenStreetMapProvider(),
+});
+
+map.addControl(searchControl);
+``
+
 ## Properties
 
 <Props of={SearchControl} />
+```

src/SearchControl.ts

@@ -35,7 +35,7 @@ const defaultOptions: Omit<SearchControlProps, 'provider'> = {
   retainZoomLevel: false,
   animateZoom: true,
   searchLabel: 'Enter address',
-  notFoundMessage: 'Sorry, that address could not be found.',
+  notFoundMessage: '',
   messageHideDelay: 3000,
   zoomLevel: 18,
   classNames: {
@@ -45,6 +45,9 @@ const defaultOptions: Omit<SearchControlProps, 'provider'> = {
     msgbox: 'leaflet-bar message',
     form: '',
     input: '',
+    resultlist: '',
+    item: '',
+    notfound: 'leaflet-bar-notfound',
   },
   autoComplete: true,
   autoCompleteDelay: 250,
@@ -93,6 +96,9 @@ interface SearchControlProps {
     msgbox: string;
     form: string;
     input: string;
+    resultlist: string;
+    item: string;
+    notfound: string;
   };
 
   autoComplete: boolean;
@@ -205,6 +211,12 @@ const Control: SearchControl = {
           this.searchElement.input.value = result.label;
           this.onSubmit({ query: result.label, data: result });
         },
+        classNames: {
+          resultlist: this.classNames.resultlist,
+          item: this.classNames.item,
+          notfound: this.classNames.notfound,
+        },
+        notFoundMessage: this.options.notFoundMessage,
       });
 
       this.searchElement.form.appendChild(this.resultList.container);

src/resultList.ts

@@ -4,9 +4,11 @@ import { SearchResult } from './providers/provider';
 interface ResultListProps {
   handleClick: (args: { result: SearchResult }) => void;
   classNames?: {
-    container?: string;
+    resultlist?: string;
     item?: string;
+    notfound?: string;
   };
+  notFoundMessage?: string;
 }
 
 export default class ResultList {
@@ -16,13 +18,26 @@ export default class ResultList {
 
   container: HTMLDivElement;
   resultItem: HTMLDivElement;
+  notFoundMessage?: HTMLDivElement;
 
-  constructor({ handleClick, classNames = {} }: ResultListProps) {
+  constructor({
+    handleClick,
+    classNames = {},
+    notFoundMessage,
+  }: ResultListProps) {
     this.handleClick = handleClick;
+    this.notFoundMessage = !!notFoundMessage
+      ? createElement<HTMLDivElement>(
+          'div',
+          cx(classNames.notfound),
+          undefined,
+          { html: notFoundMessage! },
+        )
+      : undefined;
 
     this.container = createElement<HTMLDivElement>(
       'div',
-      cx('results', classNames.container),
+      cx('results', classNames.resultlist),
     );
     this.container.addEventListener('click', this.onClick, true);
 
@@ -42,6 +57,9 @@ export default class ResultList {
     if (results.length > 0) {
       addClassName(this.container.parentElement, 'open');
       addClassName(this.container, 'active');
+    } else if (!!this.notFoundMessage) {
+      this.container.appendChild(this.notFoundMessage);
+      addClassName(this.container.parentElement, 'open');
     }
 
     this.results = results;