wix-style-react
Version:
wix-style-react
50 lines • 2.52 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { skins, dataHooks } from './constants';
import { stVars as colors } from '../Foundation/stylable/colors.st.css';
import Box from '../Box';
import { st, classes } from './PreviewWidget.st.css';
/** Preview content widget*/
class PreviewWidget extends React.PureComponent {
render() {
const { dataHook, skin, contentOutline, backgroundColor, height, width, children, className, scrollable, } = this.props;
const rootStyles = {
height: `${height}`,
width: `${width}`,
background: skin === skins.custom && (colors[backgroundColor] || backgroundColor),
};
return (React.createElement("div", { className: st(classes.root, { skin, contentOutline, scrollable }, className), "data-hook": dataHook, style: rootStyles },
React.createElement("div", { "data-hook": dataHooks.contentArea, className: classes.contentArea }, children)));
}
}
PreviewWidget.displayName = 'PreviewWidget';
PreviewWidget.propTypes = {
/** Applies a data-hook HTML attribute to be used in the tests*/
dataHook: PropTypes.string,
/** Applies a CSS class to the component's root element */
className: PropTypes.string,
/** Sets the color of the content area background (`neutral` or `gradient`). To use custom skin color, set it to `custom` and use the `backgroundColor` prop*/
skin: PropTypes.oneOf(['neutral', 'gradient', 'custom']),
/** Sets content area background color in HEX code. Can be set with custom colors (from WSR design system color palette) */
backgroundColor: PropTypes.string,
/** Sets the content outline as `shadow` (default), `border` or `none`*/
contentOutline: PropTypes.oneOf(['shadow', 'border', 'none']),
/** Adjusts the height of the component or can be set in specific % or px */
height: PropTypes.string,
/** Sets the width of the component in % or px */
width: PropTypes.string,
/** Sets the main preview content. Accepts an image, text paragraph or any other custom element */
children: PropTypes.node.isRequired,
/** Enables vertical scroll of the overflowed content **/
scrollable: PropTypes.bool,
};
PreviewWidget.defaultProps = {
skin: 'neutral',
contentOutline: 'shadow',
height: 'auto',
width: '100%',
scrollable: false,
children: React.createElement(Box, { height: "50px", width: "50px" }),
};
export default PreviewWidget;
//# sourceMappingURL=PreviewWidget.js.map