wix-style-react
Version:
wix-style-react
61 lines • 2.35 kB
JavaScript
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { withFocusable } from '../common/Focusable';
import { AddSmall } from '@wix/wix-ui-icons-common';
import Color from 'color';
import { st, classes } from './ColorPickerConverter.st.css';
import Tooltip from '../Tooltip';
import { DataHooks } from './constants';
function getContrastColor(bg, light = '#ffffff', dark = '#162d3d') {
try {
const color = Color(bg);
const luminosity = color.luminosity();
if (luminosity > 0.5) {
return dark;
}
else {
return light;
}
}
catch (err) { }
}
class ColorPickerConverterViewer extends PureComponent {
constructor() {
super(...arguments);
this.onAddClick = () => {
const { color, onAdd } = this.props;
const noColorSelected = color.alpha() === 0;
!!onAdd && !noColorSelected && onAdd(color.hex());
};
this.addTooltip = element => {
const { addTooltipContent } = this.props;
return (React.createElement(Tooltip, { disabled: !addTooltipContent, content: addTooltipContent, size: "small" }, element));
};
}
render() {
const { color, onAdd, focusableOnFocus, focusableOnBlur, className } = this.props;
const noColorSelected = color.alpha() === 0;
const clickable = !!onAdd && !noColorSelected;
const viewer = React.createElement(clickable ? 'button' : 'div', {
style: {
backgroundColor: noColorSelected ? undefined : color.hex(),
},
'data-hook': DataHooks.addColor,
onFocus: focusableOnFocus,
onBlur: focusableOnBlur,
className: st(classes.preview, {
clickable,
noColorSelected,
}, className),
onClick: this.onAddClick,
}, clickable && (React.createElement(AddSmall, { style: { color: getContrastColor(color.hex()) } })));
return clickable ? this.addTooltip(viewer) : viewer;
}
}
ColorPickerConverterViewer.propTypes = {
color: PropTypes.object,
onAdd: PropTypes.func,
addTooltipContent: PropTypes.node,
};
export default withFocusable(ColorPickerConverterViewer);
//# sourceMappingURL=ColorPickerConverterViewer.js.map