@wix/design-system
Version:
@wix/design-system
32 lines • 1.51 kB
JavaScript
import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import ButtonCore from '../Button/ButtonCore';
import Proportion from '../Proportion';
import { dataHooks } from './FillPreview.constants';
import { st, classes } from './FillPreview.st.css.js';
import { useStyledContent } from './hooks/useStyledContent';
export const FillPreview = forwardRef(({ selected = false, className, aspectRatio, dataHook, disabled, fill, size, contentClassName, ...rest }, ref) => {
const { children, contentClassName: updatedContentClassName, style, } = useStyledContent({
contentClassName,
disabled,
fill,
});
return (React.createElement("div", { ref: ref, className: st(classes.root, { size }, className) },
React.createElement(Proportion, { dataHook: dataHook, aspectRatio: aspectRatio },
React.createElement(ButtonCore, { ...rest, "data-selected": selected, className: st(classes.button, {
selected,
empty: !fill && !disabled,
}), "data-hook": dataHooks.button, disabled: disabled, style: style, contentClassName: updatedContentClassName, children: children }))));
});
FillPreview.propTypes = {
dataHook: PropTypes.any,
className: PropTypes.any,
as: PropTypes.any,
fill: PropTypes.any,
selected: PropTypes.any,
disabled: PropTypes.any,
aspectRatio: PropTypes.any,
size: PropTypes.any,
};
export default FillPreview;
//# sourceMappingURL=FillPreview.js.map