@digitransit-component/digitransit-component-autosuggest

getNewTargets

Takes the targets and modifies them based on ownPlaces and isLocationSearch

Parameters

• props object

  • props.targets Array<string>
  • props.isLocationSearch boolean
  • props.isMobile boolean
  • props.ownPlaces boolean
  • props.sources Array<string>

Returns Array<string> newTargets

DTAutosuggest

An autosuggest search input for finding locations, stops, stations, routes and vehicle rental stations.

Parameters

• props DTAutosuggestProps

  • props.sources Array<string> (optional, default [])
  • props.pathOpts Object (optional, default {routesPrefix:'linjat',stopsPrefix:'pysakit'})
  • props.refPoint Object (optional, default {})
  • props.appElement
  • props.id
  • props.placeholder
  • props.onSelect
  • props.icon
  • props.value (optional, default '')
  • props.onClear
  • props.lang (optional, default 'fi')
  • props.getAutoSuggestIcons
  • props.handleViaPoints
  • props.focusChange
  • props.storeRef
  • props.isMobile (optional, default false)
  • props.mobileLabel
  • props.inputClassName (optional, default '')
  • props.translatedPlaceholder
  • props.required (optional, default false)
  • props.ariaLabel
  • props.colors (optional, default defaultColors)
  • props.modeSet
  • props.showScroll (optional, default false)
  • props.isEmbedded (optional, default false)
  • props.transportMode
  • props.targets
  • props.geocodingSize
  • props.filterResults
  • props.searchContext

Properties

• appElement string
• id string
• placeholder string
• onSelect function
• icon string?
• value string?
• onClear function?
• lang string?
• getAutoSuggestIcons Object?
• handleViaPoints function?
• focusChange function?
• storeRef function?
• isMobile boolean?
• mobileLabel string?
• inputClassName string?
• translatedPlaceholder string?
• required boolean?
• colors Object?
• modeSet string?
• showScroll boolean?
• isEmbedded boolean? Geocoding related props
• searchContext Object
• transportMode string?
• targets Array<string>?
• sources Array<string>?
• geocodingSize number?
• filterResults function?
• pathOpts Object?
• refPoint Object?

Examples

const searchContext = {
  isPeliasLocationAware: false // true / false does Let Pelias suggest based on current user location
  minimalRegexp: undefined // used for testing min. regexp. For example: new RegExp('.{2,}'),
  lineRegexp: undefined //  identify searches for route numbers/labels: bus | train | metro. For example: new RegExp(
   //   '(^[0-9]+[a-z]?$|^[yuleapinkrtdz]$|(^m[12]?b?$))',
   //  'i',
   //  ),
  URL_PELIAS: '' // url for pelias searches
  feedIDs: ['HSL', 'HSLLautta'] // FeedId's like  [HSL, HSLLautta]
  geocodingSources: ['oa','osm','nlsfi']  // sources for geocoding
  geocodingSearchParams; {}  // Searchparmas fro geocoding
  getFavouriteLocations: () => ({}),    // Function that returns array of favourite locations.
  getFavouriteStops: () => ({}),        // Function that returns array of favourite stops.
  getLanguage: () => ({}),              // Function that returns current language.
  getFavouriteRoutes: () => ({}),       // Function that returns array of favourite routes.
  getPositions: () => ({}),             // Function that returns user's geolocation.
  getRoutesQuery: () => ({}),           // Function that returns query for fetching routes.
  getStopAndStationsQuery: () => ({}),  // Function that fetches favourite stops and stations from graphql API.
  getFavouriteRoutesQuery: () => ({}),  // Function that returns query for fetching favourite routes.
  getFavouriteVehicleRentalStations: () => ({}),  // Function that returns favourite bike rental station.
  getFavouriteVehicleRentalStationsQuery: () => ({}), // Function that returns query for fetching favourite bike rental stations.
  getHasOtpLocationFavourites: () => ({}), // Optional. Function that returns whether any OTP-backed favourite is currently available.
  startLocationWatch: () => ({}),       // Function that locates users geolocation.
  saveSearch: () => ({}),               // Function that saves search to old searches store.
  clearOldSearches: () => ({}),         // Function that clears old searches store.
  getFutureRoutes: () => ({}),          // Function that return future routes
  saveFutureRoute: () => ({}),          // Function that saves a future route
  clearFutureRoutes: () => ({}),        // Function that clears future routes
};
const lang = 'fi'; // en, fi or sv
const onSelect = (item, id) => {
   // Funtionality when user selects a suggesions. No default implementation is given.
   return null;
};
const onClear = id => {
   // Called  when user clicks the clear search string button. No default implementation.
   return null;
};
const getAutoSuggestIcons: {
  // Called for every city bike station rendered as a search suggestion. Should return the icon and
  // color used for that station. Two icons are available, 'citybike-stop-digitransit' anditybike-stop-digitransit-secondary'.
  citybikes: station => {
     return ['citybike-stop-digitransit', '#f2b62d'];
  }
}
const transportMode = undefined;
const placeholder = "stop-near-you";
const targets = ['Locations', 'Stops', 'Routes']; // Defines what you are searching. Options are Locations, Stops, Stations, Routes, VehicleRentalStations, FutureRoutes, MapPosition and CurrentPosition. Leave empty to search all targets.
const sources = ['Favourite', 'History', 'Datasource'] // Defines where you are searching. all available are: Favourite, History (previously searched searches) and Datasource. Leave empty to use all sources.
return (
 <DTAutosuggest
   appElement={appElement} // Required. Root element's id. Needed for react-modal component.
   searchContext={searchContext}
   icon="origin" // Optional String for icon that is shown left of searchfield. used with Icon library
   id="origin" // used for style props and info for component.
   placeholder={placeholder} // String that is showns initally in search field
   value="" // e.g. user typed string that is shown in search field
   onSelect={onSelect}
   onClear={onClear}
   lang={lang}
   getAutoSuggestIcons={getAutoSuggestIcons}
   transportMode={transportMode} // transportmode with which we filter the routes, e.g. route-BUS
   geocodingSize={10} // defines how many stops and stations to fetch from geocoding. Useful if you want to filter the results and still get a reasonable amount of suggestions.
   filterResults={results => return results} // Optional filtering function for routes and stops
   handelViaPoints={() => return null } // Optional Via point handling logic. This is currently managed with DTAutosuggestpanel by default, but if DTAutosuggest is used seperatelly own implementation must be provided.
   focusChange={() => return null} // When suggestion is selected, handle changing focus. This is currently managed with DTAutosuggestpanel by default, but if DTAutosuggest is used seperatelly own implementation must be provided.
   storeRef={() => return null} // Functionality to store refs. Currenlty managed with DTAutosuggestpanel by default, but if DTAutosuggest is used seperatelly own implementation must be provided.
   sources={sources}
   targets={targets}
   isMobile  // Optional. Defaults to false. Whether to use mobile search.
   mobileLabel="Custom label" // Optional. Custom label text for autosuggest field on mobile.
   inputClassName="" // Optional. Custom classname applied to the input element of the component for providing CSS styles.
   translatedPlaceholder= // Optional. Custon translated placeholder text for autosuggest field.

Returns JSX.Element

---

This module is part of the Digitransit-ui project. It is maintained in the HSLdevcom/digitransit-ui repository, where you can create PRs and issues.

Installation

Install this module individually:

$ npm install @digitransit-component/digitransit-component-autosuggest