UNPKG

4.53 kBSource Map (JSON)View Raw
1{"version":3,"file":"ChoiceGroup.types.js","sourceRoot":"../src/","sources":["components/ChoiceGroup/ChoiceGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { IIconProps } from '../../Icon';\nimport type { IStyle, ITheme } from '../../Styling';\nimport type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities';\nimport type {\n IChoiceGroupOptionStyleProps,\n IChoiceGroupOptionStyles,\n IChoiceGroupOptionProps,\n} from './ChoiceGroupOption/ChoiceGroupOption.types';\n\n/**\n * {@docCategory ChoiceGroup}\n */\nexport interface IChoiceGroup {\n /**\n * Gets the current checked option.\n */\n checkedOption: IChoiceGroupOption | undefined;\n\n /**\n * Sets focus to the checked option or the first enabled option in the ChoiceGroup.\n */\n focus: () => void;\n}\n\n/**\n * {@docCategory ChoiceGroup}\n */\nexport interface IChoiceGroupProps\n extends React.InputHTMLAttributes<HTMLElement | HTMLInputElement>,\n React.RefAttributes<HTMLDivElement> {\n /**\n * Optional callback to access the `IChoiceGroup` interface. Use this instead of `ref` for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject<IChoiceGroup>;\n\n /**\n * The options for the choice group.\n */\n options?: IChoiceGroupOption[];\n\n /**\n * The key of the option that will be initially checked.\n */\n // TODO (Fabric 8?): defaultSelectedKey/selectedKey allow numbers but IChoiceGroupOption doesn't.\n // This should be consistent one way or the other everywhere.\n defaultSelectedKey?: string | number;\n\n /**\n * The key of the selected option. If you provide this, you must maintain selection\n * state by observing onChange events and passing a new value in when changed.\n */\n selectedKey?: string | number | null;\n\n /**\n * A callback for receiving a notification when the choice has been changed.\n */\n onChange?: (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, option?: IChoiceGroupOption) => void;\n\n /**\n * Descriptive label for the choice group.\n */\n label?: string;\n\n /**\n * Theme (provided through customization).\n */\n theme?: ITheme;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject<IChoiceGroupStyleProps, IChoiceGroupStyles>;\n\n /**\n * ID of an element to use as the aria label for this ChoiceGroup.\n */\n ariaLabelledBy?: string;\n}\n\n/**\n * {@docCategory ChoiceGroup}\n */\nexport interface IChoiceGroupOption extends Omit<React.InputHTMLAttributes<HTMLElement | HTMLInputElement>, 'checked'> {\n /**\n * A required key to uniquely identify the option.\n */\n key: string;\n\n /**\n * The text string for the option.\n */\n text: string;\n\n /**\n * Used to customize option rendering.\n */\n onRenderField?: IRenderFunction<IChoiceGroupOptionProps>;\n\n /**\n * Used to customize label rendering.\n */\n onRenderLabel?: IRenderFunction<IChoiceGroupOptionProps>;\n\n /**\n * Props for an icon to display with this option.\n */\n iconProps?: IIconProps;\n\n /**\n * Image to display with this option.\n */\n imageSrc?: string;\n\n /**\n * Alt text if the option is an image.\n * @default `''` (empty string)\n */\n imageAlt?: string;\n\n /**\n * The src of image for choice field which is selected.\n */\n selectedImageSrc?: string;\n\n /**\n * The width and height of the image in px for choice field.\n * @defaultvalue `{ width: 32, height: 32 }`\n */\n imageSize?: { width: number; height: number };\n\n /**\n * Whether or not the option is disabled.\n */\n disabled?: boolean;\n\n /**\n * ID used on the option's input element.\n */\n id?: string;\n\n /**\n * ID used on the option's label.\n */\n labelId?: string;\n\n /**\n * Aria label of the option for the benefit of screen reader users.\n */\n ariaLabel?: string;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject<IChoiceGroupOptionStyleProps, IChoiceGroupOptionStyles>;\n}\n\n/**\n * {@docCategory ChoiceGroup}\n */\nexport interface IChoiceGroupStyleProps {\n theme: ITheme;\n className?: string;\n optionsContainIconOrImage?: boolean;\n}\n\n/**\n * {@docCategory ChoiceGroup}\n */\nexport interface IChoiceGroupStyles {\n root?: IStyle;\n label?: IStyle;\n flexContainer?: IStyle;\n}\n"]}
\No newline at end of file