THIS IS ARCHIVED DOCUMENTATION

(Deprecated) Tab

The Tab headless controller allows the end user to view a subset of results. It is in charge of adding a constant expression to the outgoing query in order to refine the results.

Methods

select

Activates the tab.

subscribe

Adds a callback that will be called on state change.

Parameters

  • listener: () ⇒ void

    A callback to be invoked on state change.

Returns Unsubscribe: An unsubscribe function to remove the listener.

Attributes

state

The state of the Tab controller.

Properties

  • isActive: boolean

    true if the current tab is selected and false otherwise.

Initialize

buildTab

Creates a Tab controller instance.

Parameters

  • engine: Engine<ConfigurationSection & AdvancedSearchQueriesSection>

    The headless engine.

  • props: TabProps

    The configurable Tab properties.

Returns Tab

TabProps

The configurable Tab properties.

Properties

  • options: TabOptions

    The options for the Tab controller.

  • initialState?: TabInitialState

    The initial state that should be applied to this Tab controller.

TabOptions

The options for the Tab controller.

Properties

  • expression: string

    A constant query expression or filter that the Tab should add to any outgoing query.

    Example:

    @objecttype==Message

TabInitialState

The initial state that should be applied to this Tab controller.

Properties

  • isActive: boolean

    Specifies if the tab is currently selected. Note that there can be only one active tab for a given headless engine.

Unsubscribe

Call signatures

  • (): void

Example Implementation

tab.fn.tsx

import {useEffect, useState, FunctionComponent} from 'react';
import {Tab as HeadlessTab} from '@coveo/headless';
 
interface TabProps {
  controller: HeadlessTab;
}
 
export const Tab: FunctionComponent<TabProps> = (props) => {
  const {controller} = props;
  const [state, setState] = useState(controller.state);
 
  useEffect(() => controller.subscribe(() => setState(controller.state)), []);
 
  return (
    <button disabled={state.isActive} onClick={() => controller.select()}>
      {props.children}
    </button>
  );
};
 
// usage
 
/**
 * ```tsx
 * const controller = buildTab(engine, {
 *   initialState: {isActive: true},
 *   options: {expression: '@objecttype==Message'},
 * });
 *
 * <Tab controller={controller}>Messages</Tab>;
 * ```
 */