customization: add string template

this template allows customization of the way a Feature is converted
into a string and can be used for "smaller" customization where a fully
new template with custom styles would be overkill.

Also this applies to the resulting string that is placed in the input
field after an item is selected.

this commit also refactors the way templates are passed to parse them
both in a single function instead of duplicating the logic. This also
allows easily adding more templates in the future.

Author: mxlje

src/autocomplete/autocomplete.js

@@ -24,7 +24,8 @@ export default ({
   onChange: userOnChange,
   onError: userOnError,
   environment = window,
-  rowTemplate
+  rowTemplate,
+  stringTemplate
 }) => {
   const [results, setResults] = useState(emptyResults)
   const [isLoading, setIsLoading] = useState(false)
@@ -106,7 +107,13 @@ export default ({
   }
 
   // turns an autocomplete result (feature) into a string
-  const itemToString = ({ properties: { label } }) => label
+  const itemToString = (feature) => {
+    if (typeof stringTemplate === 'function') {
+      return stringTemplate(escape(feature))
+    }
+
+    return feature.properties.label
+  }
 
   // focus the input field if requested
   useEffect(() => {

src/index.js

@@ -133,7 +133,7 @@ class GEAutocomplete extends HTMLElement {
 
   connectedCallback () {
     this.importStyles()
-    this.importRowTemplate()
+    this.importTemplates()
     this.render()
   }
 
@@ -149,29 +149,38 @@ class GEAutocomplete extends HTMLElement {
     this.shadowRoot.appendChild(styles)
   }
 
-  // importRowTemplate looks for a <template row> tag inside the custom element
-  // and stores its contents as a lodash template, which is then passed on to
-  // the autocomplete component
-  importRowTemplate() {
-    const tmpl = this.querySelector('template[row]')
-    if (tmpl === null) return
+  // importTemplates looks for custom <template> tags inside this custom element,
+  // parses their content as a lodash template and stores them to be passed on
+  // to the autocomplete component
+  importTemplates() {
+    const templates = {
+      stringTemplate: this.querySelector('template[string]'),
+      rowTemplate: this.querySelector('template[row]')
+    }
 
-    this.rowTemplate = _template(
-      _unescape(tmpl.innerHTML.trim()), // unescape is important for `<%` etc. lodash tags
-      { variable: 'feature' } // namespace the passed in Feature as `feature` so missing keys don’t throw
-    )
+    Object.keys(templates).forEach(k => {
+      const tmpl = templates[k]
+      if (tmpl === null) return
 
-    // contrary to the way custom styles are handled above we remove the <template> when we’re done
-    // so it doesn’t hang around in the host document (not the Shadow DOM)
-    tmpl.remove()
+      this[k] = _template(
+        _unescape(tmpl.innerHTML.trim()), // unescape is important for `<%` etc. lodash tags
+        { variable: 'feature' } // namespace the passed in Feature as `feature` so missing keys don’t throw
+      )
+
+      // contrary to the way custom styles are handled above we remove the <template> when we’re done
+      // so it doesn’t hang around in the host document (not the Shadow DOM)
+      tmpl.remove()
+    })
   }
 
   render () {
     ReactDOM.render(
       <WebComponent
         {...this.props}
         host={this}
-        rowTemplate={this.rowTemplate} />,
+        stringTemplate={this.stringTemplate}
+        rowTemplate={this.rowTemplate}
+      />,
       this.shadowRoot
     )
   }