GlobalStatus

Properties

Properties	Description
`id`	(optional) the main ID. Defaults to `main`.
`title`	(optional) the title appears as a part of the status content. Defaults to `En feil har skjedd`.
`text` or `children`	(optional) the text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`.
`items`	(optional) the items (list items) appear as a part of the status content. you can both use an JSON array, or a vanilla array with a string or an object content. See Item Object example below.
`icon`	(optional) the icon shown before the status title. Defaults to `exclamation`.
`state`	(optional) defines the visual appearance of the status. There are four main statuses `error`, `warning`, `info` and `success`. The default status is `error`.
`icon_size`	(optional) the icon size of the title icon shows. Defaults to `medium`.
`show`	(optional) set to `true` or `false` to manually make the global status visible. Defaults to `true`.
`autoclose`	(optional) set to `true` to automatically close the global status if there are no more left items in the provider stack. Defaults to `true`.
`autoscroll`	(optional) set to `true` to automatically scroll the page to the appeared global status. Defaults to `true`.
`no_animation`	(optional) set to `true` to disable the show/hide/slide/fade/grow/shrink animation. Defaults to `false`.
`delay`	(optional) defines the delay on how long the automated visibility should wait before it appears to the user. Defaults to `200ms`.
`hide_close_button`	(optional) set to `true` if the close button should be hidden for the user. Defaults to `false`.
`close_text`	(optional) text of the close button. Defaults to `Lukk`.
`status_anchor_text`	(optional) defines the anchor text showing up after every item, in case there is a `status_id` defined. Defaults to `Gå til %s`. The `%s` represents the optional and internal handled label addition.
`omit_set_focus`	(optional) set to `true` to omit setting the focus during visibility. Defaults to `false`. Additionally, there is `omit_set_focus_on_update` which is set to `true` by default.
Space	(optional) spacing properties like `top` or `bottom` are supported.

Translations

More info about translations can be found in the general localization and Eufemia Forms localization docs.

Key	nb-NO	en-GB	en-US
`GlobalStatus.default_title`	En feil har skjedd	An error has occurred	An error has occurred
`GlobalStatus.close_text`	Lukk	Close	Close
`GlobalStatus.status_anchor_text`	Gå til %s	Go to %s	Go to %s

Item Object

// simple
const items = ['Item #1', 'Item #2']

// advanced
const items = [
  { text: 'Item #1', status_id: 'id-1' },
  { text: 'Item #2', status_id: 'id-2', status_anchor_url: 'https://' },
]

Advanced Item Properties	Description
`text`	(required) the text appears as the status content. Beside plain text, you can send in a React component as well.
`status_id`	(required) defines an unique ID so the message can be either updated or removed individual.
`status_anchor_url`	(optional) Use `status_anchor_url={true}` to enable the go-to link, defined as a url hash using the `status_id`. Or provide it with an actual url: `status_anchor_url="https://"`.
`status_anchor_text`	(optional) defines the anchor text showing up after every item. Defaults to `Gå til %s`. The `%s` represents the optional and internal handled label addition.
`status_anchor_label`	(optional) adds an additional text to the anchor (replaces `%s`), showing up after every item. Is used by default by other form components, if they have an `label`.

Controllers

In React, you can make use of the helper components, the function as a kind of a controller component. The goal is to update the content (properties/events) of the target GlobalStatus.

Code Editor{/* Place the status wherever you have to.*/}
<GlobalStatus id="custom-id" />
{/* Manipulate the status later on. Every property is optional.*/}
<GlobalStatus.Add
  id="custom-id"
  status_id="status-1"
  item="Item #1"
  text="New Text"
  on_close={({ status_id }) => {
    console.log('on_close', status_id)
  }}
/>
<GlobalStatus.Add
  id="custom-id"
  status_id="status-2"
  item="Item #2"
  text="New Text"
  title="New Title"
  on_close={({ status_id }) => {
    console.log('on_close', status_id)
  }}
/>
<GlobalStatus.Add
  id="custom-id"
  status_id="status-3"
  item="Item #3"
  text="Text #3"
  on_close={({ status_id }) => {
    console.log('on_close', status_id)
  }}
/>
{/* or update the status.*/}
<GlobalStatus.Update id="custom-id" text="text" />
{/* Later you can remove a resolved item.*/}
<GlobalStatus.Remove id="custom-id" status_id="status-3" />

Controller Properties	Description
`id`	(optional) the main ID. Defaults to `main`.
`status_id`	(optional) define a new stack ID so you can remove it with the same ID later on. Defaults to `null`.
`remove_on_unmount`	(optional) set to `true` if you want that the component `<GlobalStatus.Add remove_on_unmount={true} ... />` should automatically remove the stacked status from the target GlobalStatus on component unmount. Defaults to `false`.

Configuration Object

This object is used as a representation to configure the GlobalStatus component from other components, using the globalStatus property. See Autocomplete, Button, Input, etc, as examples that use the globalStatus property.

{
  id: 'global-status-id',
  message: 'global status message'
}

Configuration Object Properties	Description
`id`	(optional) the main ID. Defaults to `main`.
`message`	(optional) the text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to null.

#GlobalStatus

#Properties

#Translations

#Item Object

#Controllers

#Configuration Object