UNPKG

gadgets

Version:

Reusable React UI widgets - This is my widget library. There are many like it, but this one is mine...

77 lines (76 loc) 2.53 kB
/** * This is a container element that holds the contents of a list. It creates * the `<ul>` tag that will hold all of the `<li>` tags. The user can * then select an item from the list and it will remain highlighted. Each * item within the list has a title block and a possible left and right * widget control (for buttons, icons, etc). * * ## Screen: * <img src="https://github.com/jmquigley/gadgets/blob/master/images/list.png" width="40%" /> * * ## Examples: * * ```javascript * import {Button, Icon, List, ListItem, ListHeader} from 'gadgets'; * * ... * <List alternating sizing={this.props['sizing']}> * <ListHeader * leftButton={<Button iconName="plus" />} * noedit * rightButton={<Button iconName="plus" />} * title={`Demo List Header (${this.props['sizing']})`} * /> * <ListItem * leftButton={<Button iconName="podcast"/>} * rightButton={<Button iconName="paper-plane-o"/>} * title="List Item 1" * widget="12" * /> * <ListItem * leftButton={<Icon iconName="bolt" />} * rightButton={<Button />} * title="List Item 2 (with icon)" * widget="13" * /> * </List> * ``` * * #### Events * - `onSelection(title: string)` - When the user selects an item from the list * this callback is invoked. It is given the string title associated with * the item. * * #### Styles * - `ui-list` - A class selector placed on the `<ul>` tag wrapper around the * list. * * #### Properties * - `alternating=false {boolean}` - Makes every other `<li>` entry within the * list grey to make viewing the list easier. This is off by default. * - `noselect=false {boolean}` - If set to true then the item that has been * selected within the list will not be highlighted. it's a way to turn of list * selection. * * @module List */ import * as React from "react"; import { BaseComponent, BaseProps, BaseState } from "../shared"; import { ListItem } from "./ListItem"; export interface ListProps extends BaseProps { alternating?: boolean; children?: React.ReactNode; noselect?: boolean; onSelection?: (title: string) => void; } export interface ListState extends BaseState { selectedItem: ListItem; } export declare class List extends BaseComponent<ListProps, ListState> { static readonly defaultProps: ListProps; constructor(props: ListProps); private buildChildList; private selectHandler; render(): JSX.Element; } export default List;