@wordpress/components
Version:
UI components for WordPress.
60 lines • 2.25 kB
TypeScript
/// <reference types="react" />
import type { CircularOptionPickerProps, DropdownLinkActionProps, OptionProps } from './types';
import type { WordPressComponentProps } from '../ui/context';
import type { ButtonAsButtonProps } from '../button/types';
export declare function Option({ className, isSelected, selectedIconProps, tooltipText, ...additionalProps }: OptionProps): JSX.Element;
export declare function DropdownLinkAction({ buttonProps, className, dropdownProps, linkText, }: DropdownLinkActionProps): JSX.Element;
export declare function ButtonAction({ className, children, ...additionalProps }: WordPressComponentProps<ButtonAsButtonProps, 'button', false>): JSX.Element;
/**
*`CircularOptionPicker` is a component that displays a set of options as circular buttons.
*
* ```jsx
* import { CircularOptionPicker } from '../circular-option-picker';
* import { useState } from '@wordpress/element';
*
* const Example = () => {
* const [ currentColor, setCurrentColor ] = useState();
* const colors = [
* { color: '#f00', name: 'Red' },
* { color: '#0f0', name: 'Green' },
* { color: '#00f', name: 'Blue' },
* ];
* const colorOptions = (
* <>
* { colors.map( ( { color, name }, index ) => {
* return (
* <CircularOptionPicker.Option
* key={ `${ color }-${ index }` }
* tooltipText={ name }
* style={ { backgroundColor: color, color } }
* isSelected={ index === currentColor }
* onClick={ () => setCurrentColor( index ) }
* aria-label={ name }
* />
* );
* } ) }
* </>
* );
* return (
* <CircularOptionPicker
* options={ colorOptions }
* actions={
* <CircularOptionPicker.ButtonAction
* onClick={ () => setCurrentColor( undefined ) }
* >
* { 'Clear' }
* </CircularOptionPicker.ButtonAction>
* }
* />
* );
* };
* ```
*/
declare function CircularOptionPicker(props: CircularOptionPickerProps): JSX.Element;
declare namespace CircularOptionPicker {
var Option: typeof import(".").Option;
var ButtonAction: typeof import(".").ButtonAction;
var DropdownLinkAction: typeof import(".").DropdownLinkAction;
}
export default CircularOptionPicker;
//# sourceMappingURL=index.d.ts.map