office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
129 lines (128 loc) • 4.95 kB
TypeScript
import { BaseComponent } from '../../Utilities';
import { ISwatchColorPickerProps } from './SwatchColorPicker.Props';
export interface ISwatchColorPickerState {
selectedIndex?: number;
expanded?: boolean;
}
export declare class SwatchColorPicker extends BaseComponent<ISwatchColorPickerProps, ISwatchColorPickerState> {
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();
}