wix-style-react/dist/src/PreviewWidget/PreviewWidget.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _constants = require("./constants");
var _colorsSt = require("../Foundation/stylable/colors.st.css");
var _Box = _interopRequireDefault(require("../Box"));
var _PreviewWidgetSt = require("./PreviewWidget.st.css");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/PreviewWidget/PreviewWidget.js",
  _PreviewWidget;
/** Preview content widget*/
class PreviewWidget extends _react.default.PureComponent {
  render() {
    var {
      dataHook,
      skin,
      contentOutline,
      backgroundColor,
      height,
      width,
      children,
      className,
      scrollable
    } = this.props;
    var rootStyles = {
      height: "".concat(height),
      width: "".concat(width),
      background: skin === _constants.skins.custom && (_colorsSt.stVars[backgroundColor] || backgroundColor)
    };
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _PreviewWidgetSt.st)(_PreviewWidgetSt.classes.root, {
        skin,
        contentOutline,
        scrollable
      }, className),
      "data-hook": dataHook,
      style: rootStyles,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 71,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": _constants.dataHooks.contentArea,
      className: _PreviewWidgetSt.classes.contentArea,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 80,
        columnNumber: 9
      }
    }, children));
  }
}
_PreviewWidget = PreviewWidget;
PreviewWidget.displayName = 'PreviewWidget';
PreviewWidget.propTypes = {
  /** Applies a data-hook HTML attribute to be used in the tests*/
  dataHook: _propTypes.default.string,
  /** Applies a CSS class to the component's root element */
  className: _propTypes.default.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.default.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.default.string,
  /** Sets the content outline as `shadow` (default), `border` or `none`*/
  contentOutline: _propTypes.default.oneOf(['shadow', 'border', 'none']),
  /** Adjusts the height of the component or can be set in specific % or px */
  height: _propTypes.default.string,
  /** Sets the width of the component in % or px */
  width: _propTypes.default.string,
  /** Sets the main preview content. Accepts an image, text paragraph or any other custom element */
  children: _propTypes.default.node.isRequired,
  /** Enables vertical scroll of the overflowed content **/
  scrollable: _propTypes.default.bool
};
PreviewWidget.defaultProps = {
  skin: 'neutral',
  contentOutline: 'shadow',
  height: 'auto',
  width: '100%',
  scrollable: false,
  children: /*#__PURE__*/_react.default.createElement(_Box.default, {
    height: "50px",
    width: "50px",
    __self: _PreviewWidget,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 47,
      columnNumber: 15
    }
  })
};
var _default = exports.default = PreviewWidget;
//# sourceMappingURL=PreviewWidget.js.map