@digitransit-component/digitransit-component-autosuggest-panel

DTAutosuggestPanel

Extends React.Component

Panel that renders two DTAutosuggest search fields, including viapoint handling

Parameters

• props

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.
  getAllBikeRentalStations: () => ({}), // Function that returns all bike rental stations from graphql API.
  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.
  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 origin = {
 lat: 60.169196,
 lon: 24.957674,
 address: 'Aleksanterinkatu, Helsinki',
 set: true,
 ready: true,
}

const destination = {
  lat: 60.199093,
  lon: 24.940536,
  address: 'Opastinsilta 6, Helsinki',
  set: true,
  ready: true,
}
onSelect(item, id) {
 return null;  // Define what to do when a suggestion is being selected. None by default.
 }
onClear(id) {
 return null;  // Define what to do when a suggestion is being selected. None by default.
}
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 targets = ['Locations', 'Stops', 'Routes']; // Defines what you are searching. all available options are Locations, Stops, Stations, Routes, VehicleRentalStation, 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.
<DTAutosuggestPanel
   appElement={appElement} // Required. Root element's id. Needed for react-modal component.
   origin={origin} // Selected origin point
   destination={destination} // Selected destination point
   originPlaceHolder={'Give origin'} // Optional Give string shown initially inside origin search field
   destinationPlaceHolder={'Give destination'} // Optional Give string shown initally inside destination search field
   initialViaPoints={[]} // Optional.  If showViapointControl is set to true, pass initial via points to the panel. Currently no default implementation is given.
   updateViaPoints={() => return []} // Optional. If showViapointControl is set to true, define how to update your via point list with this function. Currenlty no default implementation is given.
   swapOrder={() => return null} // Optional. If showSwapControl is set to true, define how to swap order of your points (origin, destination, viapoints). Currently no default implementation is given.
   searchContext={searchContext}
   getAutoSuggestIcons={getAutoSuggestIcons}
   onSelect={this.onSelect}
   onClear={this.onClear}
   lang="fi" // Define language fi sv or en.
   addAnalyticsEvent={null} // Optional. you can record an analytics event if you wish. if passed, component will pass an category, action, name parameters to addAnalyticsEvent
   disableAutoFocus={false} // Optional. use this to disable autofocus completely from DTAutosuggestPanel
   sources={sources}
   targets={targets}
   isMobile  // Optional. Defaults to false. Whether to use mobile search.
   originMobileLabel="Origin label" // Optional. Custom label text for origin field on mobile.
   destinationMobileLabel="Destination label" // Optional. Custom label text for destination field on mobile.
   handleFocusChange={() => {}} // Optional. If defined overrides default onFocusChange behaviour
   showSwapControl={false} // Optional.
   showViapointControl={false} // Optional.

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-panel

Or install the digitransit-component module that includes it as a class:

$ npm install @digitransit-component/digitransit-component