apphouse/dist/components/NavigationList.d.ts

Component library for React that uses observable state management and theme-able components.

import React from 'react';
import { CSSProperties } from 'glamor';
import { ApphouseComponent } from './component.interfaces';
import { ButtonStyleVariant, LayoutStyles } from '../styles/defaults/themes.interface';
/**
 * Styles for the NavigationList component.
 */
export interface NavigationListStyles {
    container?: CSSProperties;
    ul?: CSSProperties;
    li?: CSSProperties;
    button?: CSSProperties;
}
/**
 * Represents a navigation item.
 */
export interface NavigationItem {
    /**
     * The ID of the navigation item.
     */
    id: string;
    /**
     * The label displayed for the navigation item.
     */
    label: string;
    /**
     * The callback function to be executed when the navigation item is clicked.
     */
    action?: () => void;
    /**
     * Indicates whether the navigation item should be disabled or not.
     */
    disabled?: boolean;
}
/**
 * Props for the NavigationList component.
 */
export interface NavigationListProps extends ApphouseComponent<NavigationListStyles> {
    /**
     * Unique Id for the navigation list
     */
    id: string;
    /**
     * The current id
     */
    current: string;
    /**
     * The orientation of the NavigationList component.
     */
    orientation: keyof LayoutStyles;
    /**
     * Callback function invoked when a page is changed.
     *
     * @param pageNumber - The selected page number.
     */
    onPageChange: (pageId: string) => void;
    /**
     * If true, the previous and next buttons will be shown.
     * @default false
     * @optional
     */
    showPrevNext?: boolean;
    /**
     * If true, the next button will be disabled.
     * if showPrevNext is false, this prop will block next buttons to be clicked
     * @default false
     */
    disableNext?: boolean;
    /**
     * If true, the page numbers will be hidden.
     * Ensure to set showPrevNext to true.
     * @default false
     */
    hideNumbers?: boolean;
    /**
     * Items to be shown in the navigation.
     */
    items: NavigationItem[];
    /**
     * The variant of the button when the button is active
     * @default 'primary'
     */
    buttonVariantActive?: keyof ButtonStyleVariant;
    /**
     * The variant of the button when the button is inactive
     * @default 'clear'
     * @optional
     */
    buttonVariantInactive?: keyof ButtonStyleVariant;
    /**
     * The variant of the button when the button is disabled
     * @default 'clear'
     * @optional
     */
    buttonVariantDisabled?: keyof ButtonStyleVariant;
}
export declare const NavigationList: React.FC<NavigationListProps>;