gadgets
Version:
Reusable React UI widgets - This is my widget library. There are many like it, but this one is mine...
82 lines (81 loc) • 3 kB
TypeScript
/**
* A navigation control used to keep track of previous locations visited. The
* rightmost item is the current location. This provides a "path" back to the
* start of some navigation (i.e. trail of bread crumbs).
*
* This is a traditional widget control, in that it responds to new props and
* does not maintain the path of breadcrumbs. An event is used to inform the
* user that one was selected. Rebuilding the path is up to the application
* using the control.
*
* ## Screen:
* <img src="https://github.com/jmquigley/gadgets/blob/master/images/breadcrumbs.png" width="40%" />
*
* ## Examples:
*
* ```javascript
* import {Breadcrumbs} from 'gadgets';
*
* <Breadcrumbs
* chevron="arrow-right"
* icon="pied-piper"
* items={[
* {name: 'name1', uri: 'http://www.example1.com'},
* {name: 'name2', uri: 'http://www.example2.com'},
* {name: 'name3', uri: 'http://www.example3.com'}]
* }]
* onSelection={(name: string, uri: string) => {
* debug('selected => name: %s, uri: %s', name, uri);
* }}
* />
* ```
*
* ## API
* #### Events
* - `onSelection(name: string, uri: string)` - When an item is selected this
* callback is invoked.
*
* #### Styles
* - `ui-breadcrumbs` - Applied to the `<div>` container around the Component
* - `ui-breadcrumbs-name` - Each path/name in the component has this selector.
* The underlying control is a ButtonText widget.
* - `ui-breadcrumbs-chevron` - the path separater is an Icon component between
* each path ButtonText.
* - `ui-breadcrumbs-icon` - A Icon is placed at the front of the control by
* default. This is used to style that first icon.
*
* #### Properties
* - `chevron="chevron-right" {string}` - The font awesome icon used as a
* divider between path elements in the component.
* - `icon="paperclip" {string}` - The font awesome icon placed at the
* front of the component path list.
* - `items=[] {Crumbs[]}` - An array of name/uri pairs that represent the
* path locations that will be displayed. They are displayed in the order
* of the array. The data type is a Crumbs interface that contains name (as
* as string) and uri (as a string).
* - `noicon=false {boolean}` - Suppresses the icon on the front of the
* list when true.
*
* @module Breadcrumbs
*/
/// <reference types="react" />
import { BaseComponent, BaseProps, BaseState } from "../shared";
export interface Crumbs {
name: string;
uri: string;
}
export interface BreadcrumbsProps extends BaseProps {
chevron?: string;
icon?: string;
items?: Crumbs[];
noicon?: boolean;
onSelection?: (name: string, uri: string) => void;
}
export declare type BreadcrumbsState = BaseState;
export declare class Breadcrumbs extends BaseComponent<BreadcrumbsProps, BreadcrumbsState> {
static readonly defaultProps: BreadcrumbsProps;
constructor(props: BreadcrumbsProps);
private buttonSelector;
render(): JSX.Element;
}
export default Breadcrumbs;