wix-style-react
Version:
wix-style-react
39 lines • 1.93 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { dataHooks } from './constants';
import { st, classes } from './MobilePreviewWidget.st.css';
import PreviewWidget from '../PreviewWidget';
/** Mobile preview widget */
class MobilePreviewWidget extends React.PureComponent {
render() {
const { dataHook, skin, backgroundColor, height, width, children } = this.props;
return (React.createElement(PreviewWidget, { className: st(classes.root), dataHook: dataHook, skin: skin, backgroundColor: backgroundColor, height: height, width: width },
React.createElement("div", { "data-hook": dataHooks.mobileHeader, className: classes.header },
React.createElement("div", { className: classes.speaker }),
React.createElement("div", { className: classes.camera })),
React.createElement("div", { "data-hook": dataHooks.mobileContent, className: classes.content }, children),
React.createElement("div", { "data-hook": dataHooks.mobileFooter, className: classes.footer })));
}
}
MobilePreviewWidget.displayName = 'MobilePreviewWidget';
MobilePreviewWidget.propTypes = {
/** Mobile preview widget data hook*/
dataHook: PropTypes.string,
/** Background skin. To use `custom` skin, set it to `custom` and use the `backgroundColor` prop*/
skin: PropTypes.oneOf(['neutral', 'gradient', 'custom']),
/** Mobile preview widget background color. Can be set with `design system` colors*/
backgroundColor: PropTypes.string,
/** Sets the height of the component.*/
height: PropTypes.string,
/** Sets the width of the component */
width: PropTypes.string,
/** Node to preview */
children: PropTypes.node.isRequired,
};
MobilePreviewWidget.defaultProps = {
skin: 'neutral',
height: '100%',
width: '100%',
};
export default MobilePreviewWidget;
//# sourceMappingURL=MobilePreviewWidget.js.map