@ digitalransit- 组件/ digitalransit- 组件- 自动调试

获取新目标

取出目标,并根据自己的位置和位置加以修改

参数

• props 对象

  • props.targets 阵列<字符串> 翻译:
  • props.isLocationSearch 布尔
  • props.isMobile 布尔
  • props.ownPlaces 布尔
  • props.sources 阵列<字符串> 翻译:

回返 阵列<字符串> 翻译: 新目标

DTAUTUSUGEST 软件

自动推荐搜索输入查找地点、站点、站站、路线和车辆租赁站.

参数

• props DTAutosugest 方案

  • props.sources 阵列<字符串> 翻译: (可选,默认) [](中文(简体) )
  • props.pathOpts 对象 (可选,默认) {routesPrefix:'linjat',stopsPrefix:'pysakit'}(中文(简体) )
  • props.refPoint 对象 (可选,默认) {}(中文(简体) )
  • props.appElement
  • props.id
  • props.placeholder
  • props.onSelect
  • props.icon
  • props.value (可选,默认) ''(中文(简体) )
  • props.onClear
  • props.lang (可选,默认) 'fi'(中文(简体) )
  • props.getAutoSuggestIcons
  • props.handleViaPoints
  • props.focusChange
  • props.storeRef
  • props.isMobile (可选,默认) false(中文(简体) )
  • props.mobileLabel
  • props.inputClassName (可选,默认) ''(中文(简体) )
  • props.translatedPlaceholder
  • props.required (可选,默认) false(中文(简体) )
  • props.ariaLabel
  • props.colors (可选,默认) defaultColors(中文(简体) )
  • props.modeSet
  • props.showScroll (可选,默认) false(中文(简体) )
  • props.isEmbedded (可选,默认) false(中文(简体) )
  • props.transportMode
  • props.targets
  • props.geocodingSize
  • props.filterResults
  • props.searchContext

属性

• appElement 字符串
• id 字符串
• placeholder 字符串
• onSelect 函数
• icon 字符串? 吗?
• value 字符串? 吗?
• onClear 函数? 吗?
• lang 字符串? 吗?
• getAutoSuggestIcons 对象? 吗?
• handleViaPoints 函数? 吗?
• focusChange 函数? 吗?
• storeRef 函数? 吗?
• isMobile 布尔? 吗?
• mobileLabel 字符串? 吗?
• inputClassName 字符串? 吗?
• translatedPlaceholder 字符串? 吗?
• required 布尔? 吗?
• colors 对象? 吗?
• modeSet 字符串? 吗?
• showScroll 布尔? 吗?
• isEmbedded 布尔? 吗? 地理编码相关道具
• searchContext 对象
• transportMode 字符串? 吗?
• targets 阵列<字符串? 说?
• sources 阵列<字符串? 说?
• geocodingSize 编号? 吗?
• filterResults 函数? 吗?
• pathOpts 对象? 吗?
• refPoint 对象? 吗?

实例

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.

回返 联合来文十。 元素

-- -- . .

这个模块是Digitransit-ui项目的一部分. 保留在 HSLdevcom/数码-i 库,您可以创建的地方 公关和问题.

安装

单独安装此模块 :

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