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

@wix/design-system

import React from 'react';
import ColorPicker from '../ColorPicker';
import Color from 'color';
import PopoverNext from '../PopoverNext';
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 = e => {
            e.preventDefault();
            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,
            open: shown,
            focusManagerEnabled: false,
            onOpenChange: (open, reason) => {
                if (!open && (reason === 'outside-press' || reason === 'escape-key')) {
                    this.cancel();
                }
            },
            ...customPopoverProps,
        };
        return (React.createElement(PopoverNext, { dataHook: dataHooks.addButtonPopover, autoUpdateOptions: { animationFrame: true }, ...popoverProps },
            React.createElement(PopoverNext.Trigger, null,
                React.createElement("span", null,
                    React.createElement(FillButton, { dataHook: dataHooks.addButton, iconSize: iconSize, fill: buttonColor, onClick: this.toggleColorPicker, tooltipProps: { disabled: shown, timeout: 0, content: tooltip } }))),
            React.createElement(PopoverNext.Content, null, renderColorPicker({
                cancel: this.cancel,
                confirm: this.confirm,
                setColor: this.setColor,
                currentColor: isEmptyColor ? '' : color,
            }))));
    }
}
export default AddColor;
//# sourceMappingURL=AddColor.js.map