wix-style-react
Version:
wix-style-react
79 lines • 3.57 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import Proportion from '../Proportion';
import { parseColor, parseGradient, parseUrl, parseElement } from './utils';
import { dataHooks } from './constants';
import { st, classes } from './FillPreview.st.css';
import ButtonCore from '../Button/ButtonCore';
class FillPreview extends React.PureComponent {
constructor() {
super(...arguments);
this._getBackground = fill => {
const { disabled } = this.props;
if (parseUrl(fill) && !disabled) {
return {
backgroundImage: `url('${fill}')`,
backgroundSize: 'cover',
backgroundPosition: 'center center',
backgroundRepeat: 'no-repeat',
};
}
if (parseColor(fill) && !disabled) {
return { backgroundColor: fill };
}
if (parseGradient(fill) && !disabled) {
return {
backgroundImage: fill,
};
}
if (parseElement(fill) && !disabled) {
return;
}
if (disabled) {
return;
}
return {
background: `linear-gradient(
to top left,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 1) calc(50% - 0.8px),
rgba(214, 69, 61, 1) 50%,
rgba(255, 255, 255, 1) calc(50% + 0.8px),
rgba(255, 255, 255, 1) 100%)`,
};
};
}
render() {
const { fill, onClick, selected, disabled, dataHook, aspectRatio, as, className, ...rest } = this.props;
const background = this._getBackground(fill);
return (React.createElement("div", { className: st(classes.root, { selected }, className) },
React.createElement(Proportion, { dataHook: dataHook, aspectRatio: aspectRatio },
React.createElement(ButtonCore, { ...rest, as: as, "data-selected": selected, className: classes.button, "data-hook": dataHooks.button, style: background, onClick: onClick, disabled: disabled }, !background && React.isValidElement(fill) && fill))));
}
}
FillPreview.displayName = 'FillPreview';
FillPreview.propTypes = {
/** Applies a data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** Specify a CSS class name to be appended to the component’s root element */
className: PropTypes.string,
/** Render fill preview as another component or DOM tag (i.e. anchor element <a/>) */
as: PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.string]),
/** Indicates that element can be focused and where it participates in sequential keyboard navigation. */
tabIndex: PropTypes.number,
/** Specify a color, a gradient, image URL or SVG to be rendered as a preview content */
fill: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/** Specifies whether preview is selected or not. Selected item receives an outline border style. */
selected: PropTypes.bool,
/** Defines a callback handler. Handler is called whenever a preview is clicked. */
onClick: PropTypes.func,
/** Specify whether preview should be disabled or not */
disabled: PropTypes.bool,
/** Control elements aspect ratio value */
aspectRatio: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};
FillPreview.defaultProps = {
selected: false,
};
export default FillPreview;
//# sourceMappingURL=FillPreview.js.map