office-ui-fabric-react/lib/components/SwatchColorPicker/SwatchColorPicker.d.ts

Reusable React components for building experiences for Office 365.

import { BaseComponent } from '../../Utilities';
import { ISwatchColorPicker, ISwatchColorPickerProps } from './SwatchColorPicker.Props';
export interface ISwatchColorPickerState {
    selectedIndex?: number;
    expanded?: boolean;
}
export declare class SwatchColorPicker extends BaseComponent<ISwatchColorPickerProps, ISwatchColorPickerState> implements ISwatchColorPicker {
    static defaultProps: {
        cellShape: string;
        updateButtonIconWithColor: boolean;
        disabled: boolean;
    };
    private _id;
    private _buttonWrapper;
    constructor(props: ISwatchColorPickerProps);
    componentWillReceiveProps(newProps: ISwatchColorPickerProps): void;
    render(): JSX.Element;
    /**
     * Get the selected item's index
     * @param items - The items to search
     * @param selectedId - The selected item's id to find
     * @returns {number} - The index of the selected item's id, -1 if there was no match
     */
    private _getSelectedIndex(items, selectedId);
    /**
     * Gets the color for the selected index
     * @returns {string} - The color for the selected index,
     *   or undefined if: we are not updating the button icon with color,
     *   there is not a valid selected index, or if we do not have a valid color
     */
    private _getSelectedColorToSet();
    /**
     * Render all the items
     * @param items - The swatch color picker items
     * @returns {JSX.Element[]} - An array of all the items in the swatch color picker
     */
    private _onRenderItems(items);
    /**
     * Renders the next consecutive chunk of cells
     * @param items - The items to process
     * @param posInSet - Optional, the position in the set for this chunk
     * @param setSize - Optional, the size of the total set
     * @returns {JSX.Element} - The grid that represents the chunk
     */
    private _renderNextChunkOfCellItems(items, posInSet?, setSize?);
    /**
     * Get the position in set for the given id
     * @param firstExecutableItemsPerChunk - The list of fist executable items per chunk
     * @param itemId - The id of item to find the index of
     * @returns {number} - The position in the set
     */
    private _getPositionInSet(firstExecutableItemsPerChunk, itemId);
    /**
     * Gets the next chunk of consecutive cells starting a index zero.
     * Note, index zero should be of type cell
     * @param items - The list of items to process where index zero is the start of the chunk
     * @returns {ISwatchColorPickerItemProps[]} - the array of consecutive cells starting at index zero
     *   (and continuing to the first non-cell type or the end of the items)
     */
    private _getNextChunkOfCellItems(items);
    /**
     * Get only the executable items (cells and menuItems)
     * @returns {ISwatchColorPickerItemProps[]} - an array of the executable items
     */
    private _getFirstExecutableItemsPerChunk();
    /**
     * Render the separator
     * @param item - The divider item to get the data to render from
     * @returns {JSX.Element} - Element that represents the separator
     */
    private _renderSeparator(item);
    /**
     * Render the header
     * @param item - The header item to get the data to render from
     * @returns {JSX.Element} - Element that represents the header
     */
    private _renderHeader(item);
    /**
     * Handle the rendering of the header/divider
     * @param item - The item to get the data to render from
     * @param role - The role of the element
     * @param className - the className to use
     * @returns {JSX.Element} - Element that represents the header
     */
    private _renderHeaderOrDivider(item, role, className);
    /**
     * Render a cell or menu item
     * @param item - The item to render
     * @param posInSet - Optional, the position in the set of the item
     * @param setSize - Optional, the total set size this item is in
     * @returns {JSX.Element} - Element representing the item
     */
    private _renderOption(item, posInSet?, setSize?);
    /**
     * Handle the click on a cell
     * @param item - The cell that the click was fired against
     */
    private _onCellClick(item);
    /**
     * Handle the click on a menu item
     * @param item - The menu item that the click was fired against
     */
    private _onMenuItemClick(item);
    /**
     * Clear the colors by calling the given callbacks
     * @param callbacks - The callbacks to handle the clear operation
     */
    private _clearColors(callbacks);
    /**
     * Clear the focus color
     * @param id - The id of the item
     * @param color - The color for the item
     */
    private _clearFocusColorOnMenuItem(id?, color?);
    /**
     * onClick Handler for the button
     */
    private _onButtonClick();
    /**
     * Render the menu (callout) for when the swatch color picker
     * is behind a button and is expanded
     */
    private _onRenderContainer();
    /**
     * Handle dismissing the menu
     */
    private _onDismiss();
}