office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
67 lines (66 loc) • 2.5 kB
TypeScript
/// <reference types="react" />
import * as React from 'react';
import { ITheme, IStyle } from '../../../Styling';
import { IRefObject, IStyleFunctionOrObject } from '../../../Utilities';
import { IChoiceGroupOption } from '../../ChoiceGroup/ChoiceGroup.types';
export declare type OnFocusCallback = (ev?: React.FocusEvent<HTMLElement | HTMLInputElement>, props?: IChoiceGroupOption) => void | undefined;
export declare type OnChangeCallback = (evt?: React.FormEvent<HTMLElement | HTMLInputElement>, props?: IChoiceGroupOption) => void;
export interface IChoiceGroupOptionProps extends IChoiceGroupOption {
/**
* Optional callback to access the IChoiceGroup interface. Use this instead of ref for accessing
* the public methods and properties of the component.
*/
componentRef?: IRefObject<IChoiceGroupOption>;
/**
* A callback for receiving a notification when the choice has been changed.
*/
onChange?: OnChangeCallback;
/**
* A callback for receiving a notification when the choice has received focus.
*/
onFocus?: OnFocusCallback;
/**
* A callback for receiving a notification when the choice has lost focus.
*/
onBlur?: (ev: React.FocusEvent<HTMLElement>, props?: IChoiceGroupOption) => void;
/**
* Indicates if the ChoiceGroupOption should appear focused, visually
*/
focused?: boolean;
/**
* Theme (provided through customization.)
*/
theme?: ITheme;
/**
* Call to provide customized styling that will layer on top of the variant rules.
*/
styles?: IStyleFunctionOrObject<IChoiceGroupOptionStyleProps, IChoiceGroupOptionStyles>;
/**
* If true, it specifies that an option must be selected in the ChoiceGroup before submitting the form
*/
required?: boolean;
/**
* This value is used to group each ChoiceGroupOption into the same logical ChoiceGroup
*/
name?: string;
}
export interface IChoiceGroupOptionStyleProps {
theme: ITheme;
hasIcon?: boolean;
hasImage?: boolean;
checked?: boolean;
disabled?: boolean;
imageIsLarge?: boolean;
focused?: boolean;
}
export interface IChoiceGroupOptionStyles {
root?: IStyle;
choiceFieldWrapper?: IStyle;
input?: IStyle;
field?: IStyle;
innerField?: IStyle;
imageWrapper?: IStyle;
selectedImageWrapper?: IStyle;
iconWrapper?: IStyle;
labelWrapper?: IStyle;
}