@twreporter/react-article-components 2.8.1 → 2.9.0-rc.0

package/lib/components/body/image.js

@@ -1,14 +1,16 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = Image;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _paragraph = require("@twreporter/react-components/lib/text/paragraph");
 var _color = require("@twreporter/core/lib/constants/color");
+var _button = require("@twreporter/react-components/lib/button");
 var _imgWithPlaceholder = _interopRequireDefault(require("../img-with-placeholder"));
 var _multimedia = _interopRequireDefault(require("./multimedia"));
 var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
@@ -16,20 +18,12 @@ var _get = _interopRequireDefault(require("lodash/get"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-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, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); 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 } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : 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.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } // @twreporter
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // @twreporter
 // components
 // constants
 // lodash
@@ -45,55 +39,73 @@ var CaptionForTrackingSection = /*#__PURE__*/(0, _styledComponents["default"])(_
   displayName: "image__CaptionForTrackingSection",
   componentId: "os4hbb-0"
 })(["color:", ";margin-top:8px;"], _color.colorGrayscale.gray700);
-var Image = exports["default"] = /*#__PURE__*/function (_PureComponent) {
-  _inherits(Image, _PureComponent);
-  var _super = _createSuper(Image);
-  function Image() {
-    _classCallCheck(this, Image);
-    return _super.apply(this, arguments);
-  }
-  _createClass(Image, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        className = _this$props.className,
-        data = _this$props.data,
-        small = _this$props.small,
-        forTrackingSection = _this$props.forTrackingSection;
-      var image = _.get(data, ['content', 0]);
-      var caption = _.get(image, 'description');
-      var alt = _.get(image, 'keywords', caption);
-      var appendedClassName = className + ' avoid-break';
-      return /*#__PURE__*/_react["default"].createElement(Container, {
-        className: appendedClassName,
-        $small: small
-      }, /*#__PURE__*/_react["default"].createElement("figure", {
-        itemScope: true,
-        itemType: "http://schema.org/ImageObject"
-      }, /*#__PURE__*/_react["default"].createElement(_imgWithPlaceholder["default"], {
-        alt: alt,
-        imgProps: imgProps,
-        imageSet: [image.mobile, image.tablet, image.desktop, image.tiny],
-        defaultImage: image.mobile,
-        clickable: true
-        /* TODO: add sizes */
-      }), caption ? forTrackingSection ? /*#__PURE__*/_react["default"].createElement(CaptionForTrackingSection, {
-        text: caption
-      }) : /*#__PURE__*/_react["default"].createElement(Caption, {
-        itemprop: "description"
-      }, caption) : null));
-    }
-  }]);
-  return Image;
-}(_react.PureComponent);
-_defineProperty(Image, "propTypes", {
+var ImageWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "image__ImageWrapper",
+  componentId: "os4hbb-1"
+})(["position:relative;"]);
+var SensitiveMask = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "image__SensitiveMask",
+  componentId: "os4hbb-2"
+})(["position:absolute;top:0;left:0;width:100%;height:100%;background-color:", ";backdrop-filter:blur(80px);"], _color.colorOpacity['black_0.2']);
+var SensitiveMaskContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "image__SensitiveMaskContent",
+  componentId: "os4hbb-3"
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:20px;gap:24px;height:100%;width:100%;"]);
+var SensitiveMaskText = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P1).withConfig({
+  displayName: "image__SensitiveMaskText",
+  componentId: "os4hbb-4"
+})(["color:", ";"], _color.colorGrayscale.white);
+function Image(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    data = _ref.data,
+    _ref$small = _ref.small,
+    small = _ref$small === void 0 ? false : _ref$small,
+    _ref$forTrackingSecti = _ref.forTrackingSection,
+    forTrackingSection = _ref$forTrackingSecti === void 0 ? false : _ref$forTrackingSecti;
+  var _useState = (0, _react.useState)(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMaskVisible = _useState2[0],
+    setIsMaskVisible = _useState2[1];
+  var handleMaskClose = (0, _react.useCallback)(function () {
+    setIsMaskVisible(false);
+  }, []);
+  var image = _.get(data, ['content', 0]);
+  var caption = _.get(image, 'description');
+  var alt = _.get(image, 'keywords', caption);
+  var isSensitive = _.get(image, 'is_sensitive', false);
+  var showMask = isSensitive && isMaskVisible;
+  var appendedClassName = className + ' avoid-break';
+  return /*#__PURE__*/_react["default"].createElement(Container, {
+    className: appendedClassName,
+    $small: small
+  }, /*#__PURE__*/_react["default"].createElement("figure", {
+    itemScope: true,
+    itemType: "http://schema.org/ImageObject"
+  }, /*#__PURE__*/_react["default"].createElement(ImageWrapper, null, /*#__PURE__*/_react["default"].createElement(_imgWithPlaceholder["default"], {
+    alt: alt,
+    imgProps: imgProps,
+    imageSet: [image.mobile, image.tablet, image.desktop, image.tiny],
+    defaultImage: image.mobile,
+    clickable: !showMask
+    /* TODO: add sizes */
+  }), showMask ? /*#__PURE__*/_react["default"].createElement(SensitiveMask, null, /*#__PURE__*/_react["default"].createElement(SensitiveMaskContent, null, /*#__PURE__*/_react["default"].createElement(SensitiveMaskText, {
+    text: "\u672C\u5716\u6050\u9020\u6210\u8EAB\u9AD4\u4E0D\u9069\u8207\u6050\u61FC\uFF0C\u8ACB\u659F\u914C\u9EDE\u95B1"
+  }), /*#__PURE__*/_react["default"].createElement(_button.PillButton, {
+    text: "\u986F\u793A\u7167\u7247",
+    theme: _button.PillButton.THEME.transparent,
+    size: _button.PillButton.Size.L,
+    type: _button.PillButton.Type.SECONDARY,
+    onClick: handleMaskClose
+  }))) : null), caption ? forTrackingSection ? /*#__PURE__*/_react["default"].createElement(CaptionForTrackingSection, {
+    text: caption
+  }) : /*#__PURE__*/_react["default"].createElement(Caption, {
+    itemprop: "description"
+  }, caption) : null));
+}
+Image.propTypes = {
   className: _propTypes["default"].string,
   data: _body["default"].elementData.isRequired,
   small: _propTypes["default"].bool,
   forTrackingSection: _propTypes["default"].bool
-});
-_defineProperty(Image, "defaultProps", {
-  className: '',
-  small: false,
-  forTrackingSection: false
-});
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "2.8.1",
+  "version": "2.9.0-rc.0",
   "description": "The Reporter react article components, which are used in article page",
   "main": "lib/components/article-page.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
@@ -42,5 +42,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "f3663f312a472cec422eba9da42ff2b137f319b6"
+  "gitHead": "19e3b9c3304cc350ed8277e08fac8cc4ef08ffe8"
 }