@iobroker/adapter-react/Components/ColorPicker.d.ts

React classes to develop admin interfaces for ioBroker with react.

export default _export;
export type Rgb = {
    /**
     * The red component of the color (0-255).
     */
    r: number;
    /**
     * The green component of the color (0-255).
     */
    g: number;
    /**
     * The blue component of the color (0-255).
     */
    b: number;
    /**
     * The alpha component of the color (0-255).
     */
    a: number;
};
/**
 * Definition of a color.
 */
export type Color = string | Rgb | {
    rgb: Rgb;
};
export type ColorPickerProps = {
    /**
     * Set to true to disable the color picker.
     */
    disabled?: boolean;
    /**
     * The currently selected color.
     */
    value?: Color;
    /**
     * The color change callback.
     */
    onChange?: (rgba: string) => void;
    /**
     * The name.
     */
    name?: string;
    /**
     * Additional styling for this component.
     */
    style?: React.CSSProperties;
    /**
     * The CSS class name.
     */
    className?: string;
    /**
     * Open the color picker above the field?
     */
    openAbove?: boolean;
};
/** @type {typeof ColorPicker} */
declare const _export: typeof ColorPicker;
/**
 * @typedef {object} Rgb
 * @property {number} r The red component of the color (0-255).
 * @property {number} g The green component of the color (0-255).
 * @property {number} b The blue component of the color (0-255).
 * @property {number} a The alpha component of the color (0-255).
 *
 * @typedef {string | Rgb | { rgb: Rgb }} Color Definition of a color.
 *
 * @typedef {object} ColorPickerProps
 * @property {boolean} [disabled] Set to true to disable the color picker.
 * @property {Color} [value] The currently selected color.
 * @property {(rgba: string) => void} [onChange] The color change callback.
 * @property {string} [name] The name.
 * @property {React.CSSProperties} [style] Additional styling for this component.
 * @property {string} [className] The CSS class name.
 * @property {boolean} [openAbove] Open the color picker above the field?
 *
 * @extends {React.Component<ColorPickerProps>}
 */
declare class ColorPicker extends React.Component<ColorPickerProps, any, any> {
    /**
     * Get the state derived from the given properties and state.
     * @param {{ color: Color; }} props
     * @param {{ color: Color; }} state
     */
    static getDerivedStateFromProps(props: {
        color: Color;
    }, state: {
        color: Color;
    }): {
        color: any;
    };
    /**
     * Convert the given color to hex ('#rrggbb') or rgba ('rgba(r,g,b,a)') format.
     * @param {Color} [color]
     * @param {boolean} [isHex] The returning string should be in hex format
     * @returns {string} the hex or rgba representation of the given color.
     */
    static getColor(color?: Color, isHex?: boolean): string;
    /**
     * Convert rgb() or rgba() format to hex format #rrggbb.
     * @param {string} rgb
     * @returns {string}
     */
    static rgb2hex(rgb: string): string;
    /**
     * @param {Readonly<ColorPickerProps>} props
     */
    constructor(props: Readonly<ColorPickerProps>);
    state: {
        displayColorPicker: boolean;
        color: any;
    };
    /**
     * @private
     */
    private handleClick;
    /**
     * @private
     */
    private handleClose;
    /**
     * @private
     */
    private handleChange;
    render(): JSX.Element;
}
declare namespace ColorPicker {
    namespace propTypes {
        const disabled: PropTypes.Requireable<boolean>;
        const value: PropTypes.Requireable<string>;
        const onChange: PropTypes.Validator<(...args: any[]) => any>;
        const name: PropTypes.Requireable<string>;
        const style: PropTypes.Requireable<object>;
        const className: PropTypes.Requireable<string>;
        const openAbove: PropTypes.Requireable<boolean>;
    }
}
import React from "react";
import PropTypes from "prop-types";