Raxol.UI.Components.Input.SelectList (Raxol v0.5.0)

View Source

A component that allows users to select an option from a list.

Features:

  • Single or multiple selections
  • Robust keyboard navigation with stateful scrolling
  • Search/filtering capabilities
  • Accessibility support
  • Custom styling and theming
  • Pagination for very large lists

Summary

Functions

Handles events for the SelectList component, such as keypresses, mouse events, and context changes.

Initializes the SelectList component state from the given props.

Mounts the SelectList component. Performs any setup needed after initialization.

Renders the SelectList component using the current state and context.

Unmounts the SelectList component, performing any necessary cleanup.

Updates the SelectList component state in response to messages or prop changes.

Types

option()

@type option() :: {String.t(), any()}

options()

@type options() :: [option()]

props()

@type props() :: %{
  optional(:id) => String.t(),
  :options => options(),
  optional(:label) => String.t(),
  optional(:on_select) => (any() -> any()),
  optional(:on_cancel) => (-> any()) | nil,
  optional(:on_change) => (any() -> any()) | nil,
  optional(:on_focus) => (integer() -> any()) | nil,
  optional(:theme) => map(),
  optional(:style) => map(),
  optional(:max_height) => integer() | nil,
  optional(:enable_search) => boolean(),
  optional(:multiple) => boolean(),
  optional(:searchable_fields) => [atom()] | nil,
  optional(:placeholder) => String.t(),
  optional(:empty_message) => String.t(),
  optional(:show_pagination) => boolean()
}

state()

@type state() :: %{
  id: String.t() | nil,
  options: options(),
  label: String.t() | nil,
  on_select: (any() -> any()) | nil,
  on_cancel: (-> any()) | nil,
  on_change: (any() -> any()) | nil,
  on_focus: (integer() -> any()) | nil,
  theme: map() | nil,
  style: map() | nil,
  max_height: integer() | nil,
  enable_search: boolean(),
  multiple: boolean(),
  searchable_fields: [atom()] | nil,
  placeholder: String.t(),
  empty_message: String.t(),
  show_pagination: boolean(),
  focused_index: integer(),
  scroll_offset: integer(),
  search_text: String.t(),
  filtered_options: options() | nil,
  is_filtering: boolean(),
  selected_indices: MapSet.t(),
  is_search_focused: boolean(),
  page_size: integer(),
  current_page: integer(),
  has_focus: boolean(),
  visible_height: integer() | nil,
  last_key_time: integer() | nil,
  search_buffer: String.t(),
  search_timer: integer() | nil,
  on_focus: (integer() -> any()) | nil
}

Functions

handle_event(event, context, state)

@spec handle_event(map(), term(), map()) :: {map(), any()} | {map(), nil}

Handles events for the SelectList component, such as keypresses, mouse events, and context changes.

init(props)

@spec init(map()) :: map()

Initializes the SelectList component state from the given props.

mount(state)

Mounts the SelectList component. Performs any setup needed after initialization.

render(state, context)

@spec render(map(), map()) :: any()

Renders the SelectList component using the current state and context.

unmount(state)

Unmounts the SelectList component, performing any necessary cleanup.

update(message, state)

@spec update(term(), map()) :: {map(), any()} | {map(), nil}

Updates the SelectList component state in response to messages or prop changes.