wix-style-react
Version:
wix-style-react
63 lines • 2.51 kB
JavaScript
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 { tooltip, iconSize, popoverProps: customPopoverProps } = this.props;
const { shown, color } = this.state;
const isEmptyColor = color.alpha() === 0;
const noColorSelected = !shown || isEmptyColor;
const buttonColor = noColorSelected ? undefined : color.hex();
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,
React.createElement(ColorPicker, { allowEmpty: false, dataHook: dataHooks.addButtonColorPicker, onCancel: this.cancel, onChange: this.setColor, onConfirm: this.confirm, showConverter: false, showInput: false, value: isEmptyColor ? '' : color }))));
}
}
export default AddColor;
//# sourceMappingURL=AddColor.js.map