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

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _ImageSt = require("./Image.st.css");

var _excluded = ["dataHook", "src", "fit", "position", "style", "className", "borderRadius", "showBorder", "transparent"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

var placeholderSource = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='164' height='120' viewBox='0 0 164 120'%3E%3Cg fill='none'%3E%3Crect width='164' height='120' fill='%23DAEFFE'/%3E%3Cpath fill='%23B9E3FF' d='M-8.52651283e-14,120 L49.0917544,74.9616932 C52.151039,72.1550101 56.848961,72.1550101 59.9082456,74.9616932 L71.293,85.4057534 L96.9019846,59.8591624 C100.0299,56.7386931 105.095216,56.744729 108.215685,59.8726439 C108.284098,59.9412201 108.35126,60.0110332 108.417137,60.0820486 L164,120 L-8.52651283e-14,120 Z'/%3E%3Ccircle cx='67.5' cy='43.5' r='10.5' fill='%23F5FBFF'/%3E%3C/g%3E%3C/svg%3E%0A";
var placeholderStyle = {
  objectFit: 'cover'
};

var Image = function Image(_ref) {
  var dataHook = _ref.dataHook,
      src = _ref.src,
      fit = _ref.fit,
      position = _ref.position,
      style = _ref.style,
      className = _ref.className,
      borderRadius = _ref.borderRadius,
      showBorder = _ref.showBorder,
      transparent = _ref.transparent,
      otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  var source = src || placeholderSource;
  var isTiled = !!src && fit === 'tile';
  var imgStyle = !src ? placeholderStyle : isTiled ? {
    backgroundPosition: position,
    backgroundImage: source ? "url(\"".concat(source, "\")") : undefined
  } : {
    objectFit: fit,
    objectPosition: position
  };
  return /*#__PURE__*/_react["default"].createElement("img", (0, _extends2["default"])({}, otherProps, {
    className: (0, _ImageSt.st)(_ImageSt.classes.root, {
      tiled: isTiled,
      showBorder: showBorder,
      transparent: transparent
    }, className),
    "data-hook": dataHook,
    "data-transparent": transparent,
    src: source,
    style: _objectSpread(_objectSpread(_objectSpread({}, style), imgStyle), {}, {
      borderRadius: borderRadius
    })
  }));
};

Image.propTypes = {
  /**
   * Sets the border radius of the image box.
   */
  borderRadius: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),

  /** Applies a data-hook HTML attribute that can be used in the tests. */
  dataHook: _propTypes["default"].string,

  /** Specifies a CSS class name to be appended to the component’s root element. */
  className: _propTypes["default"].string,

  /**
   * Specifies whether to display a border around an image.
   */
  showBorder: _propTypes["default"].bool,

  /** Specifies an URL link to image source. If not provided, a default placeholder image will be displayed. */
  src: _propTypes["default"].string,

  /** Sets the width of the image box. */
  width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),

  /** Sets the height of the image box. */
  height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),

  /**
   * Specifies image fit mode inside a box.
   * Check [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property values for more info.
   */
  fit: _propTypes["default"].oneOf(['contain', 'cover', 'tile', 'none']),

  /**
   * Specifies source content position inside of an image box. Accepts any valid
   * [CSS position](https://developer.mozilla.org/en-US/docs/Web/CSS/position_value) value.
   */
  position: _propTypes["default"].string,

  /** Specifies whether background of Image is transparent */
  transparent: _propTypes["default"].bool
};
Image.defaultProps = {
  width: '100%',
  fit: 'cover',
  position: 'center',
  showBorder: false,
  borderRadius: '8px',
  transparent: false
};
Image.displayName = 'Image';
var _default = Image;
exports["default"] = _default;