@wix/design-system/dist/esm/Swatches/AddColor.js

@wix/design-system

import React from 'react';
import ColorPicker from '../ColorPicker';
import Color from 'color';
import Popover from '../Popover';
import FillButton from '../FillButton';
import { dataHooks } from './constants';
const EMPTY_COLOR = Color('#00000000');
class AddColor extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = {
            color: EMPTY_COLOR,
            shown: false,
        };
        this.toggleColorPicker = () => this.setState({
            shown: !this.state.shown,
        });
        this.hideColorPicker = () => this.setState({
            shown: false,
            color: EMPTY_COLOR,
        });
        this.setColor = (color) => {
            this.setState({
                color,
            });
            if (this.props.onChange) {
                this.props.onChange(color.hex());
            }
        };
        this.confirm = () => {
            this.hideColorPicker();
            this.props.onAdd(this.state.color.hex());
        };
        this.cancel = () => {
            this.hideColorPicker();
            if (this.props.onCancel) {
                this.props.onCancel();
            }
        };
    }
    render() {
        const { shown, color } = this.state;
        const isEmptyColor = color.alpha() === 0;
        const noColorSelected = !shown || isEmptyColor;
        const buttonColor = noColorSelected ? undefined : color.hex();
        const { tooltip, iconSize, popoverProps: customPopoverProps, renderColorPicker = ({ cancel, confirm, setColor, currentColor }) => (React.createElement(ColorPicker, { dataHook: dataHooks.addButtonColorPicker, onCancel: cancel, onChange: setColor, onConfirm: confirm, value: currentColor, allowEmpty: false, showConverter: false, showInput: false })), } = this.props;
        const popoverProps = {
            appendTo: 'window',
            placement: 'top',
            showArrow: true,
            shown,
            onClickOutside: this.cancel,
            ...customPopoverProps,
        };
        return (React.createElement(Popover, { dataHook: dataHooks.addButtonPopover, ...popoverProps },
            React.createElement(Popover.Element, null,
                React.createElement(FillButton, { dataHook: dataHooks.addButton, iconSize: iconSize, fill: buttonColor, onClick: this.toggleColorPicker, tooltipProps: { disabled: shown, timeout: 0, content: tooltip } })),
            React.createElement(Popover.Content, null, renderColorPicker({
                cancel: this.cancel,
                confirm: this.confirm,
                setColor: this.setColor,
                currentColor: isEmptyColor ? '' : color,
            }))));
    }
}
export default AddColor;
//# sourceMappingURL=AddColor.js.map