gadgets
Version:
Reusable React UI widgets - This is my widget library. There are many like it, but this one is mine...
89 lines (88 loc) • 2.9 kB
TypeScript
/**
* A checkbox/radio button control. This is a specialized wrapper of the
* ButtonToggle control. It contains an enum named OptionType used to
* determine what visual type the control will take on. The options are:
*
* - square
* - squareFilled
* - squareReverse
* - circle
* - circleFilled
* - circleReverse
* - times
* - timesReverse
* - dot
* - star
*
* ## Screen:
* <img src="https://github.com/jmquigley/gadgets/blob/master/images/option.png" width="50%" />
*
* ## Examples:
*
* ```javascript
* import {Option, OptionType} from 'gadgets';
* <Option
* onClick={(val: boolean, text: string) => debug('val: %o, text: %o', val, text)}
* optionType={OptionType.square}
* selected
* text="lorem ipsum"
* />
* ```
*
* ## API
* #### Events
* - `onSelection(toggle: boolean, text: string)` - When the option is clicked, then
* the button display is changed (toggled). The callback returns the current state of
* the toggle and the text label associated with the option. When the button is "clear",
* it is off and "false" is sent to the callback. When the button is "checked", it is
* on and true is sent to the callback.
*
* #### Styles
* - `ui-option` - Style applied to the root `<div>` of the control.
*
* #### Properties
* - `initialToggle=false {boolean}` - the initial state of the button
* This is different than selected, as it is only used when the button
* is created. It is ignored after creation (where selected is not)
* - `optionType=OptionType.square {OptionType}` - An enumerated type that will
* determine what icons will be displayed. They are listed above.
* - `selected=false {boolean}` - determines the initial state of the
* control. If true, then the control is "checked", otherwise it is "off"
* - `text="" {string}` - text string to the right of the control
*
* @module Option
*/
import * as React from "react";
import { BaseComponent, BaseProps, BaseState } from "../shared";
export declare enum OptionType {
square = 0,
squareFilled = 1,
squareReverse = 2,
circle = 3,
circleFilled = 4,
circleReverse = 5,
times = 6,
timesReverse = 7,
dot = 8,
star = 9
}
export interface OptionProps extends BaseProps {
initialToggle?: boolean;
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
onSelection?: (selected: boolean, text: string) => void;
optionType?: OptionType;
selected?: boolean;
text?: string;
}
export interface OptionState extends BaseState {
selected?: boolean;
}
export declare class Option extends BaseComponent<OptionProps, OptionState> {
static readonly defaultProps: OptionProps;
private readonly icons;
constructor(props: OptionProps);
private handleClick;
static getDerivedStateFromProps(props: OptionProps, state: OptionState): any;
render(): JSX.Element;
}
export default Option;