@ta-interaktiv/react-municipality-search 1.9.3 → 1.11.0

package/src/municipalitySearch.tsx

@@ -1,12 +1,7 @@
 /* eslint-disable @typescript-eslint/camelcase */
 import React, { ChangeEvent, Component } from 'react'
-import '@ta-interaktiv/semantic-ui/semantic/dist/components/icon.css'
-import '@ta-interaktiv/semantic-ui/semantic/dist/components/input.css'
-import '@ta-interaktiv/semantic-ui/semantic/dist/components/label.css'
-// import './styles.scss'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { animated, config as springConfig, Transition } from '@react-spring/web'
-import IntlMessageFormat from 'intl-messageformat'
 import de from './locales/de.yml'
 import fr from './locales/fr.yml'
 import Cookies from 'js-cookie'
@@ -24,13 +19,14 @@ interface LocalisedMessagesList {
 
 export interface Municipality {
   readonly GDENR: number
-  readonly ORTNAME: string
-  readonly PLZ4: number
+  readonly ORTNAME?: string
+  readonly PLZ4?: number
   readonly PLZ6?: number
-  readonly GDENAMK: string
+  readonly GDENAMK?: string
   readonly KTKZ: string
-  readonly NORMORTSNAME: string
+  readonly NORMORTSNAME?: string
   readonly NORMGEMEINDE: string
+  readonly URL?: string
   timestamp?: number
 }
 
@@ -42,9 +38,6 @@ export interface Props {
   /* Deduplicate list of municipality names */
   dedupe?: boolean
 
-  /* Hide the tooltip */
-  hideTooltip?: boolean
-
   /* Reset the component when the user selects a municipality */
   resetOnSelect?: boolean
 
@@ -71,6 +64,18 @@ export interface Props {
 
   /** Custom list of municipalities */
   customMunicipalities?: Municipality[]
+
+  /** currently selected municipality displayed inside the input field */
+  selectedMunicipality?: Municipality
+
+  /** handler for when close button pressed */
+  onCloseHandler?: () => void
+
+  /** input background color */
+  inputBackgroundColor?: string
+
+  /** result background color */
+  resultBackgroundColor?: string
 }
 
 interface State {
@@ -99,7 +104,7 @@ const localStorageItemName = 'selectedMunicipalities'
  */
 const translationServiceFactory = (
   messageList: LocalisedMessagesList,
-  locale: string
+  locale: string,
 ) => {
   return (key: string | null) => {
     if (key == null) {
@@ -110,7 +115,7 @@ const translationServiceFactory = (
         .split('.')
         .reduce(
           (messages: MessageListContent, prop: string) => messages[prop],
-          messageList[locale]
+          messageList[locale],
         ) || 'TRANSLATED STRING NOT FOUND'
     )
   }
@@ -152,6 +157,8 @@ export class MunicipalitySearch extends Component<Props, State> {
     municipalityData: '2021v3',
     locale: 'de',
     numberOfLastSelectedMunicipalities: 1,
+    resultBackgroundColor: 'var(--site-background)',
+    inputBackgroundColor: 'var(--site-background)',
   }
 
   public state = {
@@ -183,7 +190,7 @@ export class MunicipalitySearch extends Component<Props, State> {
         const digits = digitsResultsArray[0]
         results = municipalities.filter(
           (municipality: Municipality) =>
-            municipality.PLZ4.toString() === digits
+            (municipality.PLZ4 ?? '').toString() === digits,
         )
 
         if (results.length < 1) {
@@ -193,7 +200,7 @@ export class MunicipalitySearch extends Component<Props, State> {
         // in case it starts with a number, we're assuming the reader is looking
         // for a zip code
         results = municipalities.filter((municipality: Municipality) =>
-          RegExp(`^${searchTerm}`).test(municipality.PLZ4.toString())
+          RegExp(`^${searchTerm}`).test((municipality.PLZ4 ?? '').toString()),
         )
 
         if (results.length < 1) {
@@ -209,10 +216,10 @@ export class MunicipalitySearch extends Component<Props, State> {
         results = municipalities
           .filter(
             (municipality: Municipality) =>
-              r.test(municipality.ORTNAME) ||
-              r.test(municipality.GDENAMK) ||
-              r.test(municipality.NORMORTSNAME) ||
-              r.test(municipality.NORMGEMEINDE)
+              r.test(municipality.ORTNAME ?? '') ||
+              r.test(municipality.GDENAMK ?? '') ||
+              r.test(municipality.NORMORTSNAME ?? '') ||
+              r.test(municipality.NORMGEMEINDE),
           )
           .slice(0, this.props.maxResults)
 
@@ -234,14 +241,14 @@ export class MunicipalitySearch extends Component<Props, State> {
 
   private removeDuplicates(
     arr: Municipality[],
-    searchTerm: string
+    searchTerm: string,
   ): Municipality[] {
     const map = new Map()
     arr.forEach((v) => {
       if (this.props.dedupe) {
-        map.set(v.ORTNAME + v.GDENR, v)
+        map.set((v.ORTNAME ?? '') + v.GDENR, v)
       } else {
-        map.set(v.PLZ4 + v.ORTNAME + v.GDENR, v)
+        map.set((v.PLZ4 ?? '') + (v.ORTNAME ?? '') + v.GDENR, v)
       }
     })
 
@@ -250,8 +257,8 @@ export class MunicipalitySearch extends Component<Props, State> {
       .reduce(
         (acc, cur) => {
           if (
-            cur.GDENAMK.toLowerCase() === searchTerm.toLowerCase() ||
-            cur.ORTNAME.toLowerCase() === searchTerm.toLowerCase()
+            cur.GDENAMK?.toLowerCase() === searchTerm.toLowerCase() ||
+            cur.ORTNAME?.toLowerCase() === searchTerm.toLowerCase()
           ) {
             acc[0].push(cur)
           } else {
@@ -259,7 +266,7 @@ export class MunicipalitySearch extends Component<Props, State> {
           }
           return acc
         },
-        [[], []]
+        [[], []],
       )
       .flat()
 
@@ -340,7 +347,7 @@ export class MunicipalitySearch extends Component<Props, State> {
           return -1
         }
         return 0
-      }
+      },
     )
     return this.deduplicateMunicipalityArray(ordered)
   }
@@ -355,7 +362,7 @@ export class MunicipalitySearch extends Component<Props, State> {
     // limit the number of stored municipalities
     const slicedArray = prevSelectedMunicipalities.slice(
       0,
-      15
+      15,
     ) as Municipality[]
     newMuni.timestamp = Date.now()
     slicedArray.unshift(newMuni)
@@ -364,7 +371,7 @@ export class MunicipalitySearch extends Component<Props, State> {
     try {
       // deduplicate the array, sort it by timestamp and stringify it for localStorage and cookies
       const newMuniArray = JSON.stringify(
-        this.deduplicateMunicipalityArray(slicedArray)
+        this.deduplicateMunicipalityArray(slicedArray),
       )
       localStorage.setItem(localStorageItemName, newMuniArray)
       Cookies.set(localStorageItemName, newMuniArray, {
@@ -383,7 +390,7 @@ export class MunicipalitySearch extends Component<Props, State> {
    */
 
   private deduplicateMunicipalityArray = (
-    munis: Municipality[]
+    munis: Municipality[],
   ): Municipality[] => {
     return [
       ...new Map(
@@ -391,9 +398,11 @@ export class MunicipalitySearch extends Component<Props, State> {
           .slice()
           .reverse()
           .map((muni: Municipality) => [
-            muni.ORTNAME + muni.GDENR + (this.props.dedupe ? '' : muni.PLZ4),
+            (muni.ORTNAME ?? '') +
+              muni.GDENR +
+              (this.props.dedupe ? '' : muni.PLZ4),
             muni,
-          ])
+          ]),
       ).values(),
     ]
       .reverse()
@@ -430,7 +439,7 @@ export class MunicipalitySearch extends Component<Props, State> {
       .then((res) => {
         if (!res.ok) {
           throw new MunicipalityDownloadError(
-            `Download error: ${res.status}: ${res.statusText}.`
+            `Download error: ${res.status}: ${res.statusText}.`,
           )
         }
         return res.json()
@@ -447,10 +456,10 @@ export class MunicipalitySearch extends Component<Props, State> {
         if (error instanceof MunicipalityDownloadError) {
           console.log(error)
           console.info(
-            'Make sure that you have the municipality and zip code data for the required year uploaded to the Interaktiv server.'
+            'Make sure that you have the municipality and zip code data for the required year uploaded to the Interaktiv server.',
           )
           console.info(
-            'Read more about the data generation in the "data" directory in the project repository for the MunicipalitySearch React component.'
+            'Read more about the data generation in the "data" directory in the project repository for the MunicipalitySearch React component.',
           )
           this.setState({
             isLoading: false,
@@ -482,29 +491,31 @@ export class MunicipalitySearch extends Component<Props, State> {
         prevSelectedMunicipalities.length > 0
       ) {
         const allBfsIdsAndNames = prevSelectedMunicipalities.map(
-          (muni) => muni.GDENR + muni.ORTNAME + muni.PLZ4
+          (muni) => muni.GDENR + muni.ORTNAME + muni.PLZ4,
         )
         const filteredFromFetchedData: Municipality[] = data.filter(
           (muni: Municipality) =>
-            allBfsIdsAndNames.includes(muni.GDENR + muni.ORTNAME + muni.PLZ4)
+            allBfsIdsAndNames.includes(
+              muni.GDENR + (muni.ORTNAME ?? '') + muni.PLZ4,
+            ),
         )
         // sort before deduplication
         filteredFromFetchedData.sort((a, b) => {
           return (
-            allBfsIdsAndNames.indexOf(a.GDENR + a.ORTNAME + a.PLZ4) -
-            allBfsIdsAndNames.indexOf(b.GDENR + b.ORTNAME + b.PLZ4)
+            allBfsIdsAndNames.indexOf(a.GDENR + (a.ORTNAME ?? '') + a.PLZ4) -
+            allBfsIdsAndNames.indexOf(b.GDENR + (b.ORTNAME ?? '') + b.PLZ4)
           )
         })
         // always dedupe bc. sometimes there is duplicate data in the jsons
         const dedupedData = this.deduplicateMunicipalityArray(
-          filteredFromFetchedData
+          filteredFromFetchedData,
         )
 
         // sort the dedupedData in the same order as in the localStorage
         dedupedData.sort((a, b) => {
           return (
-            allBfsIdsAndNames.indexOf(a.GDENR + a.ORTNAME + a.PLZ4) -
-            allBfsIdsAndNames.indexOf(b.GDENR + b.ORTNAME + b.PLZ4)
+            allBfsIdsAndNames.indexOf(a.GDENR + (a.ORTNAME ?? '') + a.PLZ4) -
+            allBfsIdsAndNames.indexOf(b.GDENR + (b.ORTNAME ?? '') + b.PLZ4)
           )
         })
         const muniCount = this.props.numberOfLastSelectedMunicipalities
@@ -524,52 +535,47 @@ export class MunicipalitySearch extends Component<Props, State> {
      */
     const t = translationServiceFactory(MESSAGES, this.props.locale)
 
-    // result string formatter
-    const resultString = new IntlMessageFormat(
-      MESSAGES[this.props.locale].results,
-      this.props.locale + '-CH'
-    )
-
-    const labelContent = () => {
-      if (this.state.error) {
-        return t(this.state.error)
-      }
-
-      if (!!value && value.length >= 2) {
-        return resultString.format({ numResults: results.length })
-      }
-
-      return t('label')
-    }
-
-    const labelDirection = window.matchMedia('screen and (max-width: 599px)')
-      .matches
-      ? 'top pointing'
-      : 'left pointing'
-
     return (
       <MunicipalitySearchContainer className='municipality-search'>
         <InputRow className='inputRow'>
-          <div
-            className={
-              'ui' +
-              (this.props?.iconOnRightSide ? ' right ' : ' left ') +
-              'icon input'
+          <FlexInput
+            // id='search'
+            type='text'
+            // className='prompt flexInput'
+            lessPaddingLeft={
+              !!this.props.selectedMunicipality || this.props.iconOnRightSide
             }
-          >
-            <FlexInput
-              id='search'
-              type='text'
-              className='prompt flexInput'
-              placeholder={
-                this.props.placeholder || (t('placeholder') as string)
-              }
-              value={value}
-              disabled={
-                this.state.error === 'error.municipalitiesNotDownloaded'
-              }
-              onChange={this.handleSearchChange}
-            />
+            placeholder={this.props.placeholder || (t('placeholder') as string)}
+            value={this.props.selectedMunicipality?.NORMGEMEINDE ?? value}
+            disabled={
+              this.state.error === 'error.municipalitiesNotDownloaded' ||
+              !!this.props.selectedMunicipality
+            }
+            onChange={this.handleSearchChange}
+            backgroundColor={this.props.inputBackgroundColor}
+          />
+          {this.props.selectedMunicipality ? (
+            <Icon
+              onClick={() => this.props.onCloseHandler?.()}
+              isClickable
+              id='search-closing-icon'
+              isRight
+            >
+              <svg
+                width='20'
+                height='21'
+                viewBox='0 0 24 25'
+                xmlns='http://www.w3.org/2000/svg'
+                fill='currentColor'
+                strokeWidth="2"
+              >
+                <path
+                  d='M3.9 22L2 20.1L9.6 12.5L2 4.9L3.9 3L11.5 10.6L19.1 3L21 4.9L13.4 12.5L21 20.1L19.1 22L11.5 14.4L3.9 22Z'
+                  fill='currentColor'
+                />
+              </svg>
+            </Icon>
+          ) : (
             <Icon isRight={this.props?.iconOnRightSide}>
               <svg
                 width='18'
@@ -577,35 +583,28 @@ export class MunicipalitySearch extends Component<Props, State> {
                 viewBox='0 0 18 18'
                 fill='none'
                 xmlns='http://www.w3.org/2000/svg'
-                stroke='black'
-                strokeWidth='3'
+                stroke='currentColor'
+                strokeWidth='2'
               >
                 <circle cx='7.5' cy='7.5' r='6' />
                 <line x1='11' y1='11' x2='17' y2='17' />
               </svg>
             </Icon>
-          </div>
-          {!this.props.hideTooltip && (
-            <div>
-              <label
-                htmlFor='search'
-                className={`ui ${
-                  this.state.error ? 'red' : 'basic grey'
-                } ${labelDirection} label`}
-              >
-                {String(labelContent())}
-              </label>
-            </div>
           )}
         </InputRow>
         {showResults(results) && (
-          <Results className='results'>
+          <Results
+            className='results'
+            backgroundColor={this.props.resultBackgroundColor}
+          >
             {showResults(results) && (
               <Transition
                 native
                 items={results}
                 keys={(result: Municipality) =>
-                  result.PLZ4 + result.GDENR + result.ORTNAME
+                  result.GDENR +
+                  String(result.PLZ4 ?? '') +
+                  (result.ORTNAME ?? '')
                 }
                 from={{ transform: 'translate(0,-20px)', opacity: 0 }}
                 enter={{ transform: 'translate(0,0px)', opacity: 1 }}
@@ -643,7 +642,18 @@ export class MunicipalitySearch extends Component<Props, State> {
                     </ResultHeader>
                     <ResultMeta className='resultMeta'>
                       <>
-                        {t('list.municipalityPrefix')} <b>{result.GDENAMK}</b>
+                        {result.ORTNAME ? t('list.municipalityPrefix') : ''}{' '}
+                        <b>
+                          {result.GDENAMK ??
+                            result.NORMGEMEINDE +
+                              (results.find(
+                                (muni: Municipality) =>
+                                  muni !== result &&
+                                  muni.NORMGEMEINDE === result.NORMGEMEINDE,
+                              )
+                                ? ' (' + result.KTKZ + ')'
+                                : '')}
+                        </b>
                       </>
                     </ResultMeta>
                   </animated.div>
@@ -658,7 +668,8 @@ export class MunicipalitySearch extends Component<Props, State> {
 
   // endregion
 }
-const Icon = styled.i<{ isRight?: boolean }>`
+const Icon = styled.i<{ isRight?: boolean; isClickable?: boolean }>`
+  cursor: ${(props) => (props.isClickable ? 'pointer' : 'default')};
   position: absolute;
   top: 50%;
   ${(props) => (props.isRight ? 'right: 0; padding-right: 0.8em;' : '')}
@@ -667,9 +678,43 @@ const Icon = styled.i<{ isRight?: boolean }>`
   display: flex;
   opacity: 0.5;
   transition: opacity 0.5s ease-in-out;
+  animation: fromLeft 0.3s ease-in-out;
+  @keyframes fromLeft {
+    0% {
+      transform: translateY(-50%) translateX(-10px);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(-50%) translateX(0);
+    }
+  }
+  &#search-closing-icon {
+    &:hover {
+      opacity: 1;
+    }
+    animation: fromRight 0.3s ease-in-out;
+    @keyframes fromRight {
+      0% {
+        transform: translateY(-50%) translateX(10px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(-50%) translateX(0);
+      }
+    }
+  }
+`
+const MunicipalitySearchContainer = styled.div`
+  --border-radius: 0.3em;
+  font-size: 18px;
+  @media screen and (max-width: 599px) {
+    max-width: 100%;
+  }
+  max-width: 300px;
+  color: inherit;
 `
-const MunicipalitySearchContainer = styled.div``
 const InputRow = styled.div`
+  position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -678,36 +723,69 @@ const InputRow = styled.div`
   }
   @media screen and (max-width: 599px) {
     flex-direction: column;
-    .ui.input {
-      width: 100%;
-      max-width: 100%;
-    }
+  }
+  .ui.input {
+    width: 100%;
+    max-width: 100%;
+    transition: all 0.5s ease-in-out;
   }
 `
-const FlexInput = styled.input`
+const FlexInput = styled.input<{
+  lessPaddingLeft?: boolean
+  backgroundColor?: string
+}>`
+  // reset the default input styles
+  color: inherit;
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  border: solid 1px #7e7e7e7e;
+  border-radius: var(--border-radius);
+  box-shadow: none;
+  font-size: 1em;
+  outline: none;
+  transition: all 0.3s ease-in-out;
+  padding: 0.5em;
+  padding-left: ${({ lessPaddingLeft }) => (lessPaddingLeft ? '1em' : '2.4em')};
+  margin: 0;
+  width: 100%;
   display: flex;
+  &::placeholder{
+    color: inherit;
+    opacity: 0.5;
+  }
 `
-const Results = styled.div`
-  margin-top: 1ex;
+const Results = styled.div<{ backgroundColor?: string }>`
+  margin-top: .25em;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+  grid-template-columns: 1fr;
   grid-gap: 0;
-  font-family: var(--ui-font-stack);
+  font-family: var(--font-plex);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  pointer-events: auto;
+  position: absolute;
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  width: 100%;
+  border-radius: var(--border-radius);
+  @media screen and (min-width: 599px) {
+    max-width: 300px;
+  }
   .result {
+    max-width: 100%;
+    color: currentColor;
     padding: calc(11 / 16 * 1em) calc(14 / 16 * 1em);
-    border-radius: 0.2ex;
+    border-radius: var(--border-radius);
     box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
     //border: 1px solid #007abf;
-    color: rgba(0, 0, 0, 0.9);
+    color: inherit;
     line-height: 1.1em;
     cursor: pointer;
     transition: box-shadow 200ms ease-in-out;
-    background-color: transparent;
-
     &:hover,
     &:focus {
-      box-shadow: 0 0 0.5ex rgba(0, 0, 0, 0.2), 0 0 0 1px #007abf inset;
-      background-color: $backgroundColor;
+      box-shadow:
+        0 0 0.5ex rgba(0, 0, 0, 0.2),
+        0 0 0 1px #007abf inset;
     }
   }
 `