events: add onFeature event

Author: missinglink

README.md

@@ -113,6 +113,7 @@ The element also emits **events** as a user interacts with it. This is how you c
 |---------------|--------------|-----------|
 |`select`       |`Feature`     |Dispatched when a user selects a suggested item from the list.|
 |`change`       |`string`      |Dispatched with every keystroke as the user types (not debounced).|
+|`features`       |`[]Feature`      |Dispatched when the GeoJSON features backing the UI change.|
 |`error`        |`Error`       |Dispatched if an error occures during the request (for example if the rate limit was exceeded.)|
 
 

example/index.html

@@ -17,15 +17,25 @@
   <script>
     const el = document.querySelector('ge-autocomplete')
 
+    el.addEventListener('change', ({ detail, currentTarget }) => {
+      console.log('change', currentTarget)
+      console.log(detail)
+    })
+
+    el.addEventListener('features', ({ detail, currentTarget }) => {
+      console.log('features', currentTarget)
+      console.log(detail)
+    })
+
     el.addEventListener('select', ({ detail, currentTarget }) => {
-      console.log(currentTarget)
+      console.log('select', currentTarget)
       console.log(detail)
 
       document.querySelector('#result').innerHTML = JSON.stringify(detail, undefined, 4)
     })
 
     el.addEventListener('error', ({ detail, currentTarget }) => {
-      console.log(currentTarget)
+      console.log('error', currentTarget)
       console.error(detail)
     })
   </script>

src/autocomplete/autocomplete.js

@@ -22,6 +22,7 @@ export default ({
   throttle: throttleWait = 200,
   onSelect: userOnSelectItem,
   onChange: userOnChange,
+  onFeatures: userOnFeatures,
   onError: userOnError,
   environment = window,
   rowTemplate,
@@ -31,6 +32,13 @@ export default ({
   const [isLoading, setIsLoading] = useState(false)
   const inputRef = useRef()
 
+  // call user-supplied onFeatures callback
+  useEffect(() => {
+    if (typeof userOnFeatures === 'function') {
+      userOnFeatures(results.features)
+    }
+  }, [results])
+
   // setting params & options as state so they can be passed to useMemo as dependencies,
   // which doesn’t work if they’re just objects as the internal comparison fails
   const [apiParams, setApiParams] = useState(params)
@@ -94,6 +102,8 @@ export default ({
 
   // called user-supplied callback when an item is selected
   const onSelectItem = ({ selectedItem }) => {
+    setResults(emptyResults)
+
     if (typeof userOnSelectItem === 'function') {
       userOnSelectItem(selectedItem)
     }

src/index.js

@@ -31,6 +31,7 @@ const WebComponent = ({ host, ...autocompleteProps }) => {
   // dispatch custom events on the host (custom element)
   const dispatchEvent = (name, detail) => host.dispatchEvent(new CustomEvent(name, { detail }))
   const onSelect = (item) => dispatchEvent('select', item)
+  const onFeatures = (items) => dispatchEvent('features', items)
   const onError = (error) => dispatchEvent('error', error)
   const onChange = (text) => {
     // reflect the value of the input field on the element by setting the `value` attribute
@@ -43,6 +44,7 @@ const WebComponent = ({ host, ...autocompleteProps }) => {
     onSelect={onSelect}
     onError={onError}
     onChange={onChange}
+    onFeatures={onFeatures}
     environment={environment}
   />
 }