office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
262 lines (261 loc) • 8.85 kB
TypeScript
/// <reference types="react" />
import * as React from 'react';
import { Position } from '../../utilities/positioning';
import { IIconProps } from '../../Icon';
import { ITheme, IStyle } from '../../Styling';
import { ISpinButtonClassNames } from './SpinButton.classNames';
import { KeyboardSpinDirection } from './SpinButton';
import { IButtonStyles } from '../../Button';
import { IKeytipProps } from '../../Keytip';
export interface ISpinButton {
/**
* The value of the SpinButton. Use this if you intend to pass in a new value as a result of onChange events.
* This value is mutually exclusive to defaultValue. Use one or the other.
*/
value?: string;
/**
* Sets focus to the spin button.
*/
focus: () => void;
}
export interface ISpinButtonProps {
/**
* Gets the component ref.
*/
componentRef?: (component?: ISpinButton | null) => void;
/**
* The initial value of the SpinButton. Use this if you intend for the SpinButton to be an uncontrolled component.
* This value is mutually exclusive to value. Use one or the other.
* @default 0
*/
defaultValue?: string;
/**
* The value of the SpinButton. Use this if you intend to pass in a new value as a result of onChange events.
* This value is mutually exclusive to defaultValue. Use one or the other.
*/
value?: string;
/**
* The min value of the SpinButton.
* @default 0
*/
min?: number;
/**
* The max value of the SpinButton.
* @default 10
*/
max?: number;
/**
* The difference between the two adjacent values of the SpinButton.
* This value is sued to calculate the precision of the input if no
* precision is given. The precision calculated this way will always
* be >= 0.
* @default 1
*/
step?: number;
/**
* A description of the SpinButton for the benefit of screen readers.
*/
ariaLabel?: string;
/**
* A title for the SpinButton used for a more descriptive name that's also visible on its tooltip.
*/
title?: string;
/**
* Whether or not the SpinButton is disabled.
*/
disabled?: boolean;
/**
* Optional className for SpinButton.
*/
className?: string;
/**
* Descriptive label for the SpinButton.
*/
label: string;
/**
* @default: Left
*/
labelPosition?: Position;
/**
* Icon that goes along with the label for the whole SpinButton
*/
iconProps?: IIconProps;
/**
* This callback is triggered when the value inside the SpinButton should be validated.
* @param value: The value entered in the SpinButton to validate
* @param event: The event that triggered this validate, if any. (For accessibility)
* @return {string | void} If a string is returned, it will be used as the value of the SpinButton.
*/
onValidate?: (value: string, event?: React.SyntheticEvent<HTMLElement>) => string | void;
/**
* This callback is triggered when the increment button is pressed or if the user presses up arrow with focus on the input of the spinButton
* @return {string | void} If a string is returned, it will be used as the value of the SpinButton.
*/
onIncrement?: (value: string) => string | void;
/**
* This callback is triggered when the decrement button is pressed or if the user presses down arrow with focus on the input of the spinButton
* @return {string | void} If a string is returned, it will be used as the value of the SpinButton.
*/
onDecrement?: (value: string) => string | void;
/**
* A callback for when the user put focus on the picker
*/
onFocus?: React.FocusEventHandler<HTMLInputElement>;
/**
* A callback for when the user moves the focus away from the picker
*/
onBlur?: React.FocusEventHandler<HTMLInputElement>;
/**
* Icon for the increment button of the spinButton
*/
incrementButtonIcon?: IIconProps;
/**
* Icon for the decrement button of the spinButton
*/
decrementButtonIcon?: IIconProps;
/**
* Custom styling for individual elements within the button DOM.
*/
styles?: Partial<ISpinButtonStyles>;
/**
* Custom function for providing the classNames for the spinbutton. Can be used to provide
* all styles for the component instead of applying them on top of the default styles.
*/
getClassNames?: (theme: ITheme, disabled: boolean, isFocused: boolean, keyboardSpinDirection: KeyboardSpinDirection, labelPosition?: Position, className?: string) => ISpinButtonClassNames;
/**
* Custom styles for the upArrow button.
*
* Note: The buttons are in a checked state when arrow keys are used to
* incremenent/decrement the spinButton. Use rootChecked instead of rootPressed
* for styling when that is the case.
*/
upArrowButtonStyles?: Partial<IButtonStyles>;
/**
* Custom styles for the downArrow button.
*
* Note: The buttons are in a checked state when arrow keys are used to
* incremenent/decrement the spinButton. Use rootChecked instead of rootPressed
* for styling when that is the case.
*/
downArrowButtonStyles?: Partial<IButtonStyles>;
/**
* Theme provided by HOC.
*/
theme?: ITheme;
/**
* Accessibile label text for the increment button for the benefit of the screen reader.
*/
incrementButtonAriaLabel?: string;
/**
* Accessibile label text for the decrement button for the benefit of the screen reader.
*/
decrementButtonAriaLabel?: string;
/**
* To how many decimal places the value should be rounded to.
* The default value is calculated based on the precision of step.
* IE: if step = 1, precision = 0. step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2.
*/
precision?: number;
/**
* The position in the parent set (if in a set) for aria-posinset.
*/
ariaPositionInSet?: number;
/**
* The total size of the parent set (if in a set) for aria-setsize.
*/
ariaSetSize?: number;
/**
* Sets the aria-valuenow of the spin button. The component must be
* controlled by the creator who controls the value externally.
* ariaValueNow would be the numeric form of value.
*/
ariaValueNow?: number;
ariaValueText?: string;
/**
* Optional keytip for this spin button
*/
keytipProps?: IKeytipProps;
}
export interface ISpinButtonStyles {
/**
* Styles for the root of the spin button component.
*/
root: IStyle;
/**
* Style for the label wrapper element of the component
* The label wrapper contains the icon and the label.
*/
labelWrapper: IStyle;
/**
* Style override when the label is positioned at the start.
*/
labelWrapperStart: IStyle;
/**
* Style override when the label is positioned at the end.
*/
labelWrapperEnd: IStyle;
/**
* Style override when the label is positioned at the top.
*/
labelWrapperTop: IStyle;
/**
* Style override when the label is positioned at the bottom.
*/
labelWrapperBottom: IStyle;
/**
* Style for the icon.
*/
icon: IStyle;
/**
* Style for the icon.
*/
iconDisabled: IStyle;
/**
* Style for the label text
*/
label: IStyle;
/**
* Style for the label text
*/
labelDisabled: IStyle;
/**
* Style for spinButtonWrapper when enabled.
*/
spinButtonWrapper: IStyle;
/**
* Style override when label is positioned at the top/bottom.
*/
spinButtonWrapperTopBottom: IStyle;
/**
* Style override when spinButton is enabled/hovered.
*/
spinButtonWrapperHovered: IStyle;
/**
* Style override when spinButton is enabled/focused.
*/
spinButtonWrapperFocused: IStyle;
/**
* Style override when spinButton is disabled.
*/
spinButtonWrapperDisabled: IStyle;
/**
* Styles for the input.
*/
input: IStyle;
/**
* Style override for ::selection
*/
inputTextSelected: IStyle;
/**
* Style override when spinButton is disabled.
*/
inputDisabled: IStyle;
/**
* Styles for the arrowButtonsContainer
*/
arrowButtonsContainer: IStyle;
/**
* Style override for the arrowButtonsContainer when spin button is disabled.
*/
arrowButtonsContainerDisabled: IStyle;
}