@digitransit-component/digitransit-component-favourite-modal

isModalOpen

Required. Whether the dialog is open.

Type: boolean

handleClose

Required. Called when the dialog is closed without saving.

Type: function

saveFavourite

Required. Called with the favourite when the user saves it.

Type: function

cancelSelected

Optional, but needed when editing (favourite has a favouriteId): called after saving and when the user presses Cancel, typically to return to the favourites list. Not used when adding a new favourite.

Type: function

autosuggestComponent

Autosuggest component for searching the location of the favourite.

Type: node

favourite

Optional. Object to prefill the dialog. Having a favouriteId puts the dialog in edit mode.

Type: object

Properties

• type string
• address string
• gtfsId string
• gid string
• lat number
• lon number
• name string
• selectedIconId string
• favouriteId string
• layer string
• defaultName string

lang

Optional. Language, fi, en or sv. Defaults to fi.

Type: string

FavouriteModal

A dialog for adding a new favourite place or editing an existing one, built on the HSL design system's Modal. Colors, typography and the mobile/desktop layout are handled by the design system, so the dialog follows the active deployment's theme.

Parameters

• $0 Object

  • $0.isModalOpen
  • $0.handleClose
  • $0.saveFavourite
  • $0.cancelSelected (optional, default noop)
  • $0.autosuggestComponent
  • $0.favourite (optional, default null)
  • $0.lang (optional, default 'fi')

Examples

<FavouriteModal
  isModalOpen={modalOpen}
  handleClose={handleClose}
  saveFavourite={onSaveFavourite}
  favourite={favourite}
  lang={lang}
  autosuggestComponent={
    <AutoSuggest
      sources={['History', 'Datasource']}
      targets={['Locations', 'CurrentPosition']}
      id="favourite"
      autoFocus={false}
      placeholder="search-address-or-place"
      value={favourite.address || ''}
      selectHandler={setLocationProperties}
      lang={lang}
    />
  }
/>

---

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-favourite-modal