gadgets
Version:
Reusable React UI widgets - This is my widget library. There are many like it, but this one is mine...
86 lines (85 loc) • 3.05 kB
TypeScript
/**
* This component creates a grouping of Option components. Within the group
* only one option can be selected at a time.
*
* ## Screen:
* <img src="https://github.com/jmquigley/gadgets/blob/master/images/optionGroup.png" width="50%" />
*
* ## Examples:
*
* ```javascript
* import {OptionGroup} from 'gadgets';
*
* <OptionGroup
* default="option1"
* disabled={this.props['disabled']}
* onSelection={this.handleSelect}
* options={[
* 'option1',
* 'option2',
* 'option3',
* 'option4 this is a longer string'
* ]}
* optionType={OptionType.circle}
* sizing={this.props['sizing']}
* title="test options"
* />
* ```
*
* #### Events
* - `onSelection(text: string)` - When an option is selected in the group this
* callback is invoked. The text value of the option is passed to the
* function.
*
* #### Styles
* - `ui-option-group` - The global style applied to the container `div` around
* the component.
* - `ui-option-group-title` - The style applied to the `title` property
*
* #### Properties
* - `default="" {string}` - The default option selected when the control
* is created.
* - `optionType=OptionType.square {OptionType}` - The Option component has 10
* distinct graphics. This option sets that choice.
* - `options=[] {string[]}` - an array of of strings that represent the option
* choices.
* - `title="" {string}` - a string that represents the option group title
*
* @module OptionGroup
*/
/// <reference types="react" />
import { OrderedMap } from "immutable";
import { BaseComponent, BaseProps, BaseState } from "../shared";
import { OptionType } from "./Option";
export interface OptionGroupProps extends BaseProps {
default?: string;
onSelection?: (text: string) => void;
optionType?: OptionType;
options?: string[];
title?: string;
}
export interface OptionGroupState extends BaseState {
options?: OrderedMap<string, boolean>;
}
export declare class OptionGroup extends BaseComponent<OptionGroupProps, OptionGroupState> {
static readonly defaultProps: OptionGroupProps;
constructor(props: OptionGroupProps);
private buildOptionList;
/**
* Takes the current list of labels and generates an ordered map of
* boolean values related to each label in the group. The value that is
* selected is set to true in the map where the remaining are false.
* This state is then used to build the Option components for the
* grouping with one option in the selected state.
* @param labels {string[]} - the list of option labels in the group
* @param selected {string} - the label string of the option that was
* selected. This is used to set on e option to true and the
* remaining options to false.
* @returns a new Map<string, boolean> structure with labels as the key
* and its current selection status
*/
private static buildOptionState;
private handleSelection;
render(): JSX.Element;
}
export default OptionGroup;