@twreporter/react-components 8.5.0-rc.1

package/lib/bookmark-list/bookmark.js

@@ -0,0 +1,251 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _date = require("@twreporter/core/lib/utils/date");
+
+var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
+
+var _propTypes = _interopRequireDefault(require("@twreporter/core/lib/constants/prop-types"));
+
+var _customizedLink = _interopRequireDefault(require("./customized-link"));
+
+var _imageWrapper = _interopRequireDefault(require("./image-wrapper"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _truncate = _interopRequireDefault(require("@twreporter/core/lib/utils/truncate"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var BookmarkIcon = function BookmarkIcon(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M14.666 23.217l-7.161-4.924-7.16 4.924A.22.22 0 0 1 0 23.036V1.499A1.5 1.5 0 0 1 1.5 0h12.012a1.5 1.5 0 0 1 1.498 1.5v21.536a.22.22 0 0 1-.344.18",
+    fill: "#C7000D",
+    fillRule: "evenodd"
+  }));
+};
+
+BookmarkIcon.defaultProps = {
+  width: "16",
+  height: "24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var _ = {
+  get: _get["default"]
+};
+var READ_MORE = '閱讀更多...';
+var styles = {
+  desktop: {
+    imageWidth: 209,
+    // px
+    imageHeight: 209,
+    // px
+    imageBoxPadding: [32, 32, 35, 20],
+    // px
+    textBoxPadding: [32, 32, 35, 0] // px
+
+  },
+  tablet: {
+    imageWidth: 181,
+    // px
+    imageHeight: 181,
+    // px
+    imageBoxPadding: [32, 32, 35, 20],
+    // px
+    textBoxPadding: [32, 32, 35, 0] // px
+
+  },
+  mobile: {
+    imageHeight: 121,
+    // px
+    imageBoxPadding: [22, 22, 22, 22],
+    // px
+    textBoxPadding: [0, 21, 26, 21] // px
+
+  }
+};
+var BookmarkIconComp = /*#__PURE__*/(0, _styledComponents["default"])(BookmarkIcon).withConfig({
+  displayName: "bookmark__BookmarkIconComp",
+  componentId: "sc-1y8p1w5-0"
+})(["&:hover{path{fill:#99000a;transition:fill 200ms linear;}}"]);
+
+var BookmarkFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "bookmark__BookmarkFrame",
+  componentId: "sc-1y8p1w5-1"
+})(["margin:0;margin-bottom:15px;"]);
+
+var BookmarkContentContainer = /*#__PURE__*/_styledComponents["default"].li.withConfig({
+  displayName: "bookmark__BookmarkContentContainer",
+  componentId: "sc-1y8p1w5-2"
+})(["position:relative;width:100%;background-color:#ffffff;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;", " margin:0;:last-of-type{margin-bottom:0;}"], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    flex-direction: column;\n    align-items: center;\n  "]))));
+
+var ImageBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "bookmark__ImageBox",
+  componentId: "sc-1y8p1w5-3"
+})(["padding:", ";", " ", " flex-basis:auto;flex-grow:0;line-height:1;"], styles.desktop.imageBoxPadding.map(function (value) {
+  return "".concat(value, "px");
+}).join(' '), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding: ", ";\n  "])), styles.tablet.imageBoxPadding.map(function (value) {
+  return "".concat(value, "px");
+}).join(' ')), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding: ", ";\n    width: 100%;\n  "])), styles.mobile.imageBoxPadding.map(function (value) {
+  return "".concat(value, "px");
+}).join(' ')));
+
+var ImageFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "bookmark__ImageFrame",
+  componentId: "sc-1y8p1w5-4"
+})(["width:", "px;height:", "px;", " ", " line-height:1;"], styles.desktop.imageWidth, styles.desktop.imageHeight, _mediaQuery["default"].tabletOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: ", "px;\n    height: ", "px;\n  "])), styles.tablet.imageWidth, styles.tablet.imageHeight), _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    width: 100%;\n    height: ", "px;\n  "])), styles.mobile.imageHeight));
+
+var TextBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "bookmark__TextBox",
+  componentId: "sc-1y8p1w5-5"
+})(["padding:", ";min-height:", "px;", " ", " position:relative;flex-basis:auto;flex-grow:1;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;"], styles.desktop.textBoxPadding.map(function (value) {
+  return "".concat(value, "px");
+}).join(' '), styles.desktop.imageHeight + styles.desktop.imageBoxPadding[0] + styles.desktop.imageBoxPadding[2], _mediaQuery["default"].tabletOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    padding: ", ";\n    min-height: ", "px;\n  "])), styles.tablet.textBoxPadding.map(function (value) {
+  return "".concat(value, "px");
+}).join(' '), styles.tablet.imageHeight + styles.tablet.imageBoxPadding[0] + styles.tablet.imageBoxPadding[2]), _mediaQuery["default"].mobileOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    padding: ", ";\n    min-height: 0;\n    width: 100%;\n  "])), styles.mobile.textBoxPadding.map(function (value) {
+  return "".concat(value, "px");
+}).join(' ')));
+
+var Category = /*#__PURE__*/_styledComponents["default"].span.withConfig({
+  displayName: "bookmark__Category",
+  componentId: "sc-1y8p1w5-6"
+})(["font-size:16px;", " line-height:1;color:#c4333e;"], _mediaQuery["default"].mobileOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    font-size: 14px;\n  "]))));
+
+var FirstRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "bookmark__FirstRow",
+  componentId: "sc-1y8p1w5-7"
+})(["margin-bottom:0.8em;", " width:100%;flex-basis:auto;flex-grow:0;"], _mediaQuery["default"].mobileOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    margin-bottom: .5em;\n  "]))));
+
+var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "bookmark__Title",
+  componentId: "sc-1y8p1w5-8"
+})(["font-size:27px;line-height:1.41;margin-bottom:18px;", " font-weight:", ";color:#3e3f3f;flex-basis:auto;flex-grow:0;"], _mediaQuery["default"].mobileOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    font-size: 20px;\n    line-height: 1.55;\n    margin-bottom: 0;\n  "]))), _fontWeight.sourceHanSansTC.bold);
+
+var Description = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "bookmark__Description",
+  componentId: "sc-1y8p1w5-9"
+})(["width:98%;color:#3e3f3f;font-size:18px;", ";flex-basis:auto;flex-grow:0;", ""], (0, _truncate["default"])('relative', 1.57, 2, '#ffffff', 'justify'), _mediaQuery["default"].mobileOnly(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    flex-basis: 0;\n    display: none;\n  "]))));
+
+var LastRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "bookmark__LastRow",
+  componentId: "sc-1y8p1w5-10"
+})(["margin-top:1em;width:100%;position:relative;"]);
+
+var ReadMore = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "bookmark__ReadMore",
+  componentId: "sc-1y8p1w5-11"
+})(["font-size:14px;text-align:left;color:#8c8c8c;cursor:pointer;display:inline-block;"]);
+
+var Date = /*#__PURE__*/_styledComponents["default"].span.withConfig({
+  displayName: "bookmark__Date",
+  componentId: "sc-1y8p1w5-12"
+})(["vertical-align:top;font-size:16px;font-weight:", ";color:#4a4a4a;float:right;"], _fontWeight.sourceHanSansTC.light);
+
+var RemoveBookMarkBtn = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "bookmark__RemoveBookMarkBtn",
+  componentId: "sc-1y8p1w5-13"
+})(["position:absolute;right:0;top:50%;transform:translateY(-44%);line-height:1;svg{width:15px;height:auto;}cursor:pointer;"]);
+
+var Bookmark = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(Bookmark, _React$PureComponent);
+
+  var _super = _createSuper(Bookmark);
+
+  function Bookmark(props) {
+    var _this;
+
+    _classCallCheck(this, Bookmark);
+
+    _this = _super.call(this, props);
+    _this.handleDelete = _this.handleDelete.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(Bookmark, [{
+    key: "handleDelete",
+    value: function handleDelete() {
+      return this.props.handleDelete(_.get(this.props, 'bookmark.id'));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _$get = _.get(this.props, 'bookmark', {}),
+          thumbnail = _$get.thumbnail,
+          category = _$get.category,
+          title = _$get.title,
+          desc = _$get.desc,
+          published_date = _$get.published_date,
+          slug = _$get.slug,
+          is_external = _$get.is_external,
+          host = _$get.host;
+
+      return /*#__PURE__*/_react["default"].createElement(BookmarkFrame, null, /*#__PURE__*/_react["default"].createElement(BookmarkContentContainer, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], {
+        isExternal: is_external,
+        slug: slug,
+        host: host
+      }, /*#__PURE__*/_react["default"].createElement(ImageBox, null, /*#__PURE__*/_react["default"].createElement(ImageFrame, null, /*#__PURE__*/_react["default"].createElement(_imageWrapper["default"], {
+        src: thumbnail,
+        alt: "Bookmark_Image_".concat(title)
+      })))), /*#__PURE__*/_react["default"].createElement(TextBox, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], {
+        isExternal: is_external,
+        slug: slug,
+        host: host
+      }, /*#__PURE__*/_react["default"].createElement(FirstRow, null, /*#__PURE__*/_react["default"].createElement(Category, null, category), /*#__PURE__*/_react["default"].createElement(Date, null, (0, _date.date2yyyymmdd)(published_date * 1000, '.'))), /*#__PURE__*/_react["default"].createElement(Title, null, title), /*#__PURE__*/_react["default"].createElement(Description, null, desc)), /*#__PURE__*/_react["default"].createElement(LastRow, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], {
+        isExternal: is_external,
+        slug: slug,
+        host: host
+      }, /*#__PURE__*/_react["default"].createElement(ReadMore, null, READ_MORE)), /*#__PURE__*/_react["default"].createElement(RemoveBookMarkBtn, null, /*#__PURE__*/_react["default"].createElement(BookmarkIconComp, {
+        onClick: this.handleDelete
+      }))))));
+    }
+  }]);
+
+  return Bookmark;
+}(_react["default"].PureComponent);
+
+exports["default"] = Bookmark;
+
+_defineProperty(Bookmark, "propTypes", {
+  bookmark: _propTypes["default"].bookmark.isRequired,
+  handleDelete: _propTypes2["default"].func.isRequired
+});

package/lib/bookmark-list/bookmarks.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
+
+var _bookmark = _interopRequireDefault(require("./bookmark"));
+
+var _propTypes = _interopRequireDefault(require("@twreporter/core/lib/constants/prop-types"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _map = _interopRequireDefault(require("lodash/map"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var _ = {
+  get: _get["default"],
+  map: _map["default"]
+};
+
+var PageContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "bookmarks__PageContainer",
+  componentId: "sc-1m95x6z-0"
+})(["padding:50px 0;margin:0;", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 25px 0;\n  "]))));
+
+var Column = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "bookmarks__Column",
+  componentId: "sc-1m95x6z-1"
+})(["margin:0 auto;width:97%;max-width:834px;", " ", ""], _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 100%;\n    max-width: 707px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 100%;\n  "]))));
+
+var StatusBar = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "bookmarks__StatusBar",
+  componentId: "sc-1m95x6z-2"
+})(["", " padding-bottom:25px;width:100%;"], _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding-left: 1em;\n  "]))));
+
+var CountTitle = /*#__PURE__*/_styledComponents["default"].span.withConfig({
+  displayName: "bookmarks__CountTitle",
+  componentId: "sc-1m95x6z-3"
+})(["font-size:20px;", " margin-right:1em;"], _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    font-size: 18px;\n  "]))));
+
+var CountNumber = /*#__PURE__*/_styledComponents["default"].span.withConfig({
+  displayName: "bookmarks__CountNumber",
+  componentId: "sc-1m95x6z-4"
+})(["font-size:20px;", " font-weight:", ";"], _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-size: 18px;\n  "]))), _fontWeight.sourceHanSansTC.bold);
+
+var BookmarksContainer = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
+  displayName: "bookmarks__BookmarksContainer",
+  componentId: "sc-1m95x6z-5"
+})(["margin:0;width:100%;padding:0;"]);
+
+function Bookmarks(_ref) {
+  var total = _ref.total,
+      bookmarks = _ref.bookmarks,
+      handleDelete = _ref.handleDelete;
+
+  var buildBookmark = function buildBookmark(bookmark) {
+    return /*#__PURE__*/_react["default"].createElement(_bookmark["default"], {
+      key: "bookmark_".concat(_.get(bookmark, 'id')),
+      bookmark: bookmark,
+      handleDelete: handleDelete
+    });
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(PageContainer, null, /*#__PURE__*/_react["default"].createElement(Column, null, /*#__PURE__*/_react["default"].createElement(StatusBar, null, /*#__PURE__*/_react["default"].createElement(CountTitle, null, "\u5168\u90E8"), /*#__PURE__*/_react["default"].createElement(CountNumber, null, total)), /*#__PURE__*/_react["default"].createElement(BookmarksContainer, null, _.map(bookmarks, buildBookmark))));
+}
+
+Bookmarks.defaultProps = {
+  bookmarks: [],
+  total: 0
+};
+Bookmarks.propTypes = {
+  bookmarks: _propTypes2["default"].arrayOf(_propTypes["default"]).isRequired,
+  handleDelete: _propTypes2["default"].func.isRequired,
+  total: _propTypes2["default"].number
+};
+var _default = Bookmarks;
+exports["default"] = _default;

package/lib/bookmark-list/customized-link.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _entityPath = _interopRequireDefault(require("@twreporter/core/lib/constants/entity-path"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var CustomizedLink = function CustomizedLink(_ref) {
+  var children = _ref.children,
+      isExternal = _ref.isExternal,
+      slug = _ref.slug,
+      host = _ref.host;
+
+  if (isExternal) {
+    return /*#__PURE__*/_react["default"].createElement("a", {
+      href: "".concat(host).concat(_entityPath["default"].interactiveArticle).concat(slug)
+    }, children);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
+    to: "".concat(_entityPath["default"].article).concat(slug)
+  }, children);
+};
+
+CustomizedLink.defaultProps = {
+  children: null
+};
+CustomizedLink.propTypes = {
+  children: _propTypes["default"].node,
+  isExternal: _propTypes["default"].bool.isRequired,
+  slug: _propTypes["default"].string.isRequired,
+  host: _propTypes["default"].string.isRequired
+};
+var _default = CustomizedLink;
+exports["default"] = _default;

package/lib/bookmark-list/image-wrapper.js

@@ -0,0 +1,119 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _storageUrlProcessor = require("@twreporter/core/lib/utils/storage-url-processor");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var _ = {
+  get: _get["default"]
+};
+
+var ImgObjectFit = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "image-wrapper__ImgObjectFit",
+  componentId: "zom1jf-0"
+})(["width:100%;height:100%;> img{width:100%;height:100%;object-fit:cover;}"]);
+
+var ImgFallback = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "image-wrapper__ImgFallback",
+  componentId: "zom1jf-1"
+})(["width:100%;height:100%;background-size:cover;background-image:", ";background-position:center center;"], function (props) {
+  return "url(".concat(_.get(props, 'url'), ")");
+});
+
+var ImgWrapper = /*#__PURE__*/function (_React$Component) {
+  _inherits(ImgWrapper, _React$Component);
+
+  var _super = _createSuper(ImgWrapper);
+
+  function ImgWrapper(props) {
+    var _this;
+
+    _classCallCheck(this, ImgWrapper);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      isObjectFit: true
+    };
+    return _this;
+  }
+
+  _createClass(ImgWrapper, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.setState({
+        isObjectFit: 'objectFit' in _.get(document, 'documentElement.style')
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          src = _this$props.src,
+          alt = _this$props.alt,
+          srcSet = _this$props.srcSet;
+      var isObjectFit = this.state.isObjectFit;
+      return isObjectFit ? /*#__PURE__*/_react["default"].createElement(ImgObjectFit, null, /*#__PURE__*/_react["default"].createElement("img", {
+        alt: alt,
+        src: (0, _storageUrlProcessor.replaceGCSUrlOrigin)(src),
+        srcSet: srcSet,
+        style: {
+          transform: 'translateZ(0)'
+        }
+      }), this.props.children) : /*#__PURE__*/_react["default"].createElement(ImgFallback, {
+        url: (0, _storageUrlProcessor.replaceGCSUrlOrigin)(src)
+      }, this.props.children);
+    }
+  }]);
+
+  return ImgWrapper;
+}(_react["default"].Component);
+
+ImgWrapper.defaultProps = {
+  alt: '',
+  children: null,
+  src: '',
+  srcSet: ''
+};
+ImgWrapper.propTypes = {
+  alt: _propTypes["default"].string,
+  children: _propTypes["default"].node,
+  src: _propTypes["default"].string.isRequired,
+  srcSet: _propTypes["default"].string
+};
+var _default = ImgWrapper;
+exports["default"] = _default;