wix-style-react/dist/es/src/ColorPicker/ColorPickerConverter.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import Tabs from '../Tabs';
import ColorPickerConverterHex from './ColorPickerConverterHex';
import ColorPickerConverterRGB from './ColorPickerConverterRGB';
import ColorPickerConverterHsb from './ColorPickerConverterHsb';
const HEX = 'HEX';
const RGB = 'RGB';
const HSB = 'HSB';
const tabs = [
    { id: HEX, title: HEX, dataHook: 'hex-tab' },
    { id: RGB, title: RGB, dataHook: 'rgb-tab' },
    { id: HSB, title: HSB, dataHook: 'hsb-tab' },
];
class ColorPickerConverter extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            activeTab: HEX,
        };
        this.changeTab = this.changeTab.bind(this);
    }
    render() {
        const { dataHook, current, showConverter, showInput, addTooltipContent, allowEmpty, hexPlaceholder, } = this.props;
        const dataHooks = {
            hex: 'color-picker-hex-input',
            rgb: 'color-picker-rgb-inputs',
            hsb: 'color-picker-hsb-inputs',
        };
        if (!showConverter && !showInput) {
            return null;
        }
        if (!showConverter) {
            return (React.createElement(ColorPickerConverterHex, { placeholder: hexPlaceholder, dataHook: dataHooks.hex, current: current, onChange: this.props.onChange, onEnter: this.props.onEnter, onAdd: this.props.onAdd, addTooltipContent: addTooltipContent, allowEmpty: allowEmpty }));
        }
        const { activeTab } = this.state;
        return (React.createElement("div", { "data-hook": dataHook },
            React.createElement(Tabs, { minWidth: 0, items: tabs, activeId: activeTab, type: "uniformFull", onClick: this.changeTab, size: "small" }),
            activeTab === HEX && (React.createElement(ColorPickerConverterHex, { placeholder: hexPlaceholder, dataHook: dataHooks.hex, current: current, onChange: this.props.onChange, onAdd: this.props.onAdd, onEnter: this.props.onEnter, addTooltipContent: addTooltipContent, allowEmpty: allowEmpty })),
            activeTab === RGB && (React.createElement(ColorPickerConverterRGB, { dataHook: dataHooks.rgb, current: current, onChange: this.props.onChange, onAdd: this.props.onAdd, addTooltipContent: addTooltipContent, allowEmpty: allowEmpty })),
            activeTab === HSB && (React.createElement(ColorPickerConverterHsb, { dataHook: dataHooks.hsb, current: current, onChange: this.props.onChange, onAdd: this.props.onAdd, addTooltipContent: addTooltipContent, allowEmpty: allowEmpty }))));
    }
    changeTab({ id }) {
        this.setState({ activeTab: id });
    }
}
ColorPickerConverter.propTypes = {
    current: PropTypes.object.isRequired,
    showConverter: PropTypes.bool.isRequired,
    showInput: PropTypes.bool.isRequired,
    onChange: PropTypes.func.isRequired,
    onEnter: PropTypes.func.isRequired,
    onAdd: PropTypes.func,
    allowEmpty: PropTypes.bool,
    hexPlaceholder: PropTypes.string,
};
export default ColorPickerConverter;
//# sourceMappingURL=ColorPickerConverter.js.map