Toolbar, refresh and locale

Maintenance mode (deprecated)

@ahoo-wang/fetcher-viewer is deprecated and in maintenance mode: existing functionality is maintained, with no new features. Further data-view development belongs to @ahoo-wang/fetcher-view-engine; use View Engine for new projects. This page remains a maintenance reference for existing consumers. The packages use different models and APIs, so migration requires adaptation.

TopBar combines view actions, filter/panel toggles, row density, refresh, monitor, share and fullscreen controls. Its props include activeView/views/viewerDefinitionId, selected records and mutation callbacks. Buttons use application callbacks; saving is not an implicit local-storage operation.

API	Behavior / defaults
RefreshDataBarItem	Publishes to the definition-scoped refresh bus; no separate onClick prop is exposed.
AutoRefreshBarItem	viewId + viewerDefinitionId; choices default 1/3/5 minutes plus Never (0). Selection stored per view under view:refresh. No selection means Never.
FilterBarItem	defaultShowFilter initializes and synchronizes local active state; onChange receives toggled boolean.
ColumnHeightBarItem	defaultTableSize and onChange drive density selection.
DataMonitorBarItem	Delegates to React useDataMonitor; count polling is separate from refresh-data publishing.
FullscreenBarItem	Reads React fullscreen context; renders nothing outside a provider.
ShareLinkBarItem	Copies window.location.href; clipboard failures show an error message. Does not serialize the active filter state.
BarItem / Point	Presentational icon-active marker / separator dot; no independent data logic.

useRefreshDataEventBus(subscriberId?) defaults its scope to React useId. Returns bus, publish(overrideId?): Promise<void>, subscribe(handler,overrideId?): boolean. It prefixes handler names with target subscriber ID and filters delivery by that ID. Unmount/scope change removes only handlers registered by that hook instance; shared bus remains alive. A definition ID lets Viewer and refresh controls coordinate. Duplicate final handler names can fail registration; no automatic distinct suffix is generated for them. Timer changes/unmount clear AutoRefresh intervals; timer callbacks can overlap and do not serialize network requests.

useLocale() returns local React locale state and setLocale. Defaults are Chinese. setLocale shallow-merges top-level defined keys onto defaults, so supplying a partial nested object replaces that entire nested section. It is not a global LocaleProvider and changing one hook instance does not update every component. Locale declares only the currently supported strings; many controls still contain Chinese literals/fallbacks. Do not promise a site-wide English switch through this hook. OPERATOR_zh_CN is the separate filter-operator label map. Locale and generated wire fields do not alter server language or query behavior.

Complete example

import { useEffect } from 'react';
import { useRefreshDataEventBus } from '@ahoo-wang/fetcher-viewer';
export function Refresh({ reload }: { reload: () => Promise<void> }) {
  const { subscribe, publish } = useRefreshDataEventBus('users');
  useEffect(() => {
    subscribe({ name: 'reload-users', handle: reload });
  }, [subscribe, reload]);
  return (
    <button
      onClick={() => {
        void publish().catch(console.error);
      }}
    >
      Refresh users
    </button>
  );
}

Public signatures and types

These signatures follow declarations reachable from the current root entry. ? marks optional input; generics/interfaces only constrain compile-time types. Locate inherited and related types through the symbol index. Runtime defaults and failure behavior are described above.

useRefreshDataEventBus

export function useRefreshDataEventBus(
  subscriberId?: string,
): RefreshDataEventBusReturn;

packages/viewer/src/hooks/useRefreshDataEventBus.ts:29

RefreshDataEvent

export interface RefreshDataEvent {
  type: 'REFRESH';
  subscriberId: string;
}

packages/viewer/src/hooks/useRefreshDataEventBus.ts:10

RefreshDataEventBusReturn

export interface RefreshDataEventBusReturn {
  bus: BroadcastTypedEventBus<RefreshDataEvent>;
  publish: (subscriberId?: string) => Promise<void>;
  subscribe: (
    handler: EventHandler<RefreshDataEvent>,
    subscriberId?: string,
  ) => boolean;
}

packages/viewer/src/hooks/useRefreshDataEventBus.ts:15

AutoRefreshBarItem

export function AutoRefreshBarItem(
  options: AutoRefreshBarItemProps,
): import('react').JSX.Element;

Implementation defaults: items = DefaultAutoRefreshItems.

packages/viewer/src/topbar/AutoRefreshBarItem.tsx:52

AutoRefreshItem

export interface AutoRefreshItem {
  label: string;
  key: string;
  refreshInterval: number;
}

packages/viewer/src/topbar/AutoRefreshBarItem.tsx:9

AutoRefreshBarItemProps

export interface AutoRefreshBarItemProps {
  items?: AutoRefreshItem[];
  viewId: string;
  viewerDefinitionId: string;
}

packages/viewer/src/topbar/AutoRefreshBarItem.tsx:15

BarItem

export function BarItem(props: BarItemProps): React.JSX.Element;

packages/viewer/src/topbar/BarItem.tsx:9

BarItemProps

export interface BarItemProps {
  icon: React.ReactNode;
  active: boolean;
}

packages/viewer/src/topbar/BarItem.tsx:4

ColumnHeightBarItem

export function ColumnHeightBarItem(
  props: ColumnHeightBarItemProps,
): import('react').JSX.Element;

packages/viewer/src/topbar/ColumnHeightBarItem.tsx:15

ColumnHeightBarItemProps

export interface ColumnHeightBarItemProps extends TopBarItemProps {
  defaultTableSize: SizeType;
  onChange?: (size: SizeType) => void;
}

packages/viewer/src/topbar/ColumnHeightBarItem.tsx:10

DataMonitorBarItem

export function DataMonitorBarItem(
  props: DataMonitorBarItemProps,
): import('react').JSX.Element;

packages/viewer/src/topbar/DataMonitorBarItem.tsx:20

DataMonitorBarItemProps

export interface DataMonitorBarItemProps extends TopBarItemProps {
  viewId: string;
  countUrl: string;
  viewName: string;
  condition: Condition;
  notification: DataMonitorNotificationConfig;
  interval?: number;
}

packages/viewer/src/topbar/DataMonitorBarItem.tsx:11

FilterBarItem

export function FilterBarItem(
  props: FilterBarItemProps,
): import('react').JSX.Element;

packages/viewer/src/topbar/FilterBarItem.tsx:12

FilterBarItemProps

export interface FilterBarItemProps extends TopBarItemProps {
  defaultShowFilter: boolean;
  onChange?: (show: boolean) => void;
}

packages/viewer/src/topbar/FilterBarItem.tsx:7

FullscreenBarItem

export function FullscreenBarItem(
  props: FullscreenBarItemProps,
): import('react').JSX.Element | null;

packages/viewer/src/topbar/FullscreenBarItem.tsx:11

FullscreenBarItemProps

export interface FullscreenBarItemProps
  extends UseFullscreenOptions, TopBarItemProps {}

packages/viewer/src/topbar/FullscreenBarItem.tsx:8

Point

export function Point(): import('react').JSX.Element;

packages/viewer/src/topbar/Point.tsx:1

RefreshDataBarItem

export function RefreshDataBarItem(
  props: RefreshDataBarItemProps,
): import('react').JSX.Element;

packages/viewer/src/topbar/RefreshDataBarItem.tsx:11

RefreshDataBarItemProps

export interface RefreshDataBarItemProps extends TopBarItemProps {
  viewerDefinitionId?: string;
}

packages/viewer/src/topbar/RefreshDataBarItem.tsx:7

ShareLinkBarItem

export function ShareLinkBarItem(
  props: ShareLinkBarItemProps,
): import('react').JSX.Element;

packages/viewer/src/topbar/ShareLinkBarItem.tsx:8

ShareLinkBarItemProps

export interface ShareLinkBarItemProps extends TopBarItemProps {}

packages/viewer/src/topbar/ShareLinkBarItem.tsx:6

TopBar

export function TopBar<RecordType>(
  props: TopBarProps<RecordType>,
): React.JSX.Element;

packages/viewer/src/topbar/TopBar.tsx:107

TopBarProps

Expand all fields and members

export interface TopBarProps<
  RecordType,
> extends TopbarActionsCapable<RecordType> {
  title: string;
  viewerDefinitionId: string;
  activeView: ViewState;
  views: ViewState[];
  viewChanged: boolean;
  onReset?: () => void;
  tableSelectedItems: RecordType[];
  showViewPanel: boolean;
  onShowViewPanelChange?: (showViewPanel: boolean) => void;
  showFilter: boolean;
  onShowFilterChange?: (show: boolean) => void;
  defaultTableSize: SizeType;
  onTableSizeChange?: (size: SizeType) => void;
  onCreateView: (view: ViewState, onSuccess?: () => void) => void;
  onUpdateView: (view: ViewState, onSuccess?: () => void) => void;
  onDeleteView: (view: ViewState, onSuccess?: () => void) => void;
  fullscreenTarget?: RefObject<HTMLElement | null>;
  dataMonitorProps?: {
    viewId: string;
    countUrl: string;
    viewName: string;
    condition: Condition;
    notification: DataMonitorNotificationConfig;
  };
}

packages/viewer/src/topbar/TopBar.tsx:35

TopBarItemProps

export interface TopBarItemProps extends StyleCapable {}

packages/viewer/src/topbar/types.ts:3

Locale

Expand all fields and members

export interface Locale {
  personalView?: string;
  sharedView?: string;
  view?: {
    viewName?: string;
    viewType?: {
      name?: string;
      personal?: string;
      shared?: string;
    };
  };
  filterPanel?: {
    addFilterTitle?: string;
    searchButtonTitle?: string;
  };
  topBar?: {
    tableSize?: {
      middle?: string;
      small?: string;
    };
    autoRefresh?: {
      title?: string;
    };
  };
  selectedCountLabel?: string;
  createViewMethod?: {
    create?: string;
    saveAs?: string;
  };
  viewPanel?: {
    saveButton?: string;
    cancelButton?: string;
  };
}

packages/viewer/src/locale/Locale.ts:1

useLocale

export function useLocale(): UseLocaleReturn;

packages/viewer/src/locale/useLocale.ts:12

UseLocaleReturn

export interface UseLocaleReturn {
  locale: Locale;
  setLocale: (locale: Locale) => void;
}

packages/viewer/src/locale/useLocale.ts:7

Related topics

Models and state ownership · View and Viewer composition · Saved-view panels and persistence callbacks · FetcherViewer remote integration · Filters and editable panels · Tables, columns and cells · Registries, inputs and fullscreen button