@spec component_tag() :: :tabbed_content

The component tag this widget registers under.

iex> Drafter.Widget.TabbedContent.component_tag()
:tabbed_content

@spec from_component_opts(
  list() | nil,
  keyword()
) :: Drafter.Widget.props()

Builds the props map for a {:tabbed_content, tabs, opts} element.

tabs is used when it is a non-empty list, otherwise opts[:tabs], defaulting to []; the descriptors are passed through as given and mount/1 normalises them. :on_tab_change goes through Drafter.Widget.Callback.wrap_1/1. :width falls back to the width of opts[:__rect__], itself defaulting to %{width: 80}. :on_item_select is not forwarded and the emitted :classes key is not read by mount/1.

iex> props = Drafter.Widget.TabbedContent.from_component_opts(["One"], title: "Browser")
iex> {props.tabs, props.active_tab, props.title, props.title_align, props.width}
{["One"], 0, "Browser", :left, 80}

iex> props = Drafter.Widget.TabbedContent.from_component_opts(nil, tabs: ["A"], on_tab_change: :switched)
iex> {props.tabs, is_function(props.on_tab_change, 1)}
{["A"], true}

@spec handle_event(term(), t()) :: {:ok, t()} | {:ok, t(), list()} | {:noreply, t()}

Handles the panel's own events, replacing the dispatch use Drafter.Widget would otherwise generate.

Recognised events are the key bindings and mouse handling listed in the module doc, plus {:focus} and {:blur}; blurring also clears :hovered_tab. A tab change resets :highlighted_item to 0 and notifies :on_tab_change with the new tab's :id. Anything unrecognised returns {:noreply, state}.

iex> state = Drafter.Widget.TabbedContent.mount(%{tabs: ["One", "Two"]})
iex> {:ok, switched} = Drafter.Widget.TabbedContent.handle_event({:key, :right}, state)
iex> switched.active_tab
1

iex> state = Drafter.Widget.TabbedContent.mount(%{tabs: ["One", "Two"]})
iex> Drafter.Widget.TabbedContent.handle_event({:key, :left}, state) == {:noreply, state}
true

iex> state = Drafter.Widget.TabbedContent.mount(%{tabs: [{"One", ["a", "b"]}]})
iex> {:ok, moved} = Drafter.Widget.TabbedContent.handle_event({:key, :down}, state)
iex> moved.highlighted_item
1

iex> state = Drafter.Widget.TabbedContent.mount(%{tabs: ["One"]})
iex> Drafter.Widget.TabbedContent.handle_event({:key, :tab}, state) == {:noreply, state}
true

@spec mount(Drafter.Widget.props()) :: t()

Builds the widget state from props.

Tabs are normalised into %{id: _, label: _, content: _} maps, and a tab whose content is a single widget tuple has that widget mounted into :child_widgets at the same index; every other tab gets nil there. :hovered_tab starts as nil and :highlighted_item at 0.

iex> state = Drafter.Widget.TabbedContent.mount(%{tabs: ["One", {"Two", ["a", "b"]}]})
iex> state.tabs
[%{id: "One", label: "One", content: []}, %{id: "Two", label: "Two", content: ["a", "b"]}]

iex> state = Drafter.Widget.TabbedContent.mount(%{tabs: ["One"]})
iex> {state.active_tab, state.highlighted_item, state.hovered_tab, state.title_align, state.width}
{0, 0, nil, :left, nil}

iex> Drafter.Widget.TabbedContent.mount(%{tabs: ["One"]}).child_widgets
[nil]

@spec preferred_height(
  term(),
  keyword()
) :: pos_integer()

The number of rows the element asks for: opts[:height], default 8.

iex> Drafter.Widget.TabbedContent.preferred_height(nil, [])
8

iex> Drafter.Widget.TabbedContent.preferred_height(nil, height: 20)
20

@spec render(t(), Drafter.Widget.rect()) :: [Drafter.Draw.Strip.t()]

Draws the panel into rect.

The layout is a title row, the tab bar, a separator, then the active tab's content and the bottom border. The panel is state.width columns wide, falling back to rect.width when that is nil.

Callback implementation for Drafter.Widget.unmount/1.

@spec update(Drafter.Widget.props(), t()) :: t()

Replaces the state fields named in props, keeping the current value for any key that is absent.

New :tabs are normalised. :highlighted_item resets to 0 when :active_tab changes and is otherwise kept. The embedded child widgets are remounted only when the number of tabs changes, so replacing a tab's widget content in place does not take effect.

iex> state = Drafter.Widget.TabbedContent.mount(%{tabs: ["One", "Two"]})
iex> state = %{state | highlighted_item: 3}
iex> updated = Drafter.Widget.TabbedContent.update(%{active_tab: 1}, state)
iex> {updated.active_tab, updated.highlighted_item}
{1, 0}

iex> state = Drafter.Widget.TabbedContent.mount(%{tabs: ["One"]})
iex> Drafter.Widget.TabbedContent.update(%{title: "Browser"}, state).title
"Browser"

@spec update_props_from_mount(Drafter.Widget.props(), term(), keyword()) ::
  Drafter.Widget.props()

Narrows a re-render to :tabs, :title_align, :width and :classes.

:active_tab, :title, :on_tab_change and :on_item_select are dropped, so they are mount-only through the component tree and the tab the user switched to survives a re-render.

iex> props = Drafter.Widget.TabbedContent.from_component_opts(["One"], title: "Browser")
iex> Drafter.Widget.TabbedContent.update_props_from_mount(props, %{}, []) |> Map.keys() |> Enum.sort()
[:classes, :tabs, :title_align, :width]