qt-public-ui/lib/Frame/frame.js

新设计规范下业务组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _variable = _interopRequireDefault(require("../../theme/variable"));
var _ = require("..");
var _reactRouterDom = require("react-router-dom");
var _classnames = _interopRequireDefault(require("classnames"));
var _material2 = _interopRequireDefault(require("../material"));
require("./style");
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 && {}.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; }
/* 提供iframe功能，实现宿主页面事件监听与发送 */

var Frame = function Frame(props) {
  var src = props.src,
    style = props.style,
    _props$reportCenterUR = props.reportCenterURL,
    reportCenterURL = _props$reportCenterUR === void 0 ? '' : _props$reportCenterUR,
    _props$offset = props.offset,
    offset = _props$offset === void 0 ? 0 : _props$offset,
    _props$height = props.height,
    heightProp = _props$height === void 0 ? 0 : _props$height;
  var _useHistory = (0, _reactRouterDom.useHistory)(),
    push = _useHistory.push;
  var _useState = (0, _react.useState)(600),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    height = _useState2[0],
    setHeight = _useState2[1];
  var _useState3 = (0, _react.useState)(''),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    modalCls = _useState4[0],
    setModalCls = _useState4[1];
  var _useState5 = (0, _react.useState)(true),
    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
    loading = _useState6[0],
    setLoading = _useState6[1];

  // load
  var onFrameLoad = (0, _react.useCallback)(function () {
    setLoading(false);
  }, []);

  // 导出控制
  var exportHandler = (0, _react.useCallback)(function (e) {
    var _type = e.data._type;
    _type === 'frame:export' && push(reportCenterURL);
  }, [push, reportCenterURL]);
  (0, _react.useEffect)(function () {
    if (!reportCenterURL) return;
    window.addEventListener('message', exportHandler);
    return function () {
      return window.removeEventListener('message', exportHandler);
    };
  }, [exportHandler, reportCenterURL]);

  // 高度控制
  var heightHandler = (0, _react.useCallback)(function () {
    var _height = document.body.offsetHeight - _variable["default"].TOP_NAV_HEIGHT - offset; // 60 为顶导高度
    setHeight(_height);
  }, [offset]);
  (0, _react.useEffect)(function () {
    var hasHeight = ('height' in props);
    if (!hasHeight) {
      heightHandler();
      window.addEventListener('resize', heightHandler);
    }
    return function () {
      return hasHeight ? undefined : window.removeEventListener('message', heightHandler);
    };
  }, [heightHandler, props.height]);

  // 文档/视频展示
  var docHandler = (0, _react.useCallback)(function (e) {
    var _e$data = e.data,
      _type = _e$data._type,
      _material = _e$data.meterial;
    if (_type === 'frame:material') {
      _material.isVideo ? _material2["default"].showVideo(_material) : _material2["default"].showDoc(_material);
    }
  }, []);
  (0, _react.useEffect)(function () {
    window.addEventListener('message', docHandler);
    return function () {
      window.removeEventListener('message', docHandler);
    };
  }, []);

  // Modal控制
  var modalHandler = (0, _react.useCallback)(function (e) {
    var _e$data2 = e.data,
      _type = _e$data2._type,
      visible = _e$data2.visible;
    if (_type === 'frame:modal') {
      setModalCls(visible ? 'umui-mask-shown' : '');
    }
  }, []);
  (0, _react.useEffect)(function () {
    window.addEventListener('message', modalHandler);
    return function () {
      window.removeEventListener('message', modalHandler);
    };
  }, []);
  (0, _react.useEffect)(function () {
    modalCls ? document.body.style.overflow = 'hidden' : document.body.style.overflow = 'auto';
  }, [modalCls]);
  var _height = 'height' in props ? heightProp : height;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-frame"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _classnames["default"])('umui-frame-mask', modalCls)
  }), /*#__PURE__*/_react["default"].createElement(_.Default.Loading, {
    type: "page",
    spinning: loading
  }, /*#__PURE__*/_react["default"].createElement("iframe", {
    src: src,
    frameBorder: "0",
    scrolling: "no",
    style: style,
    width: "100%",
    height: _height > 0 ? "".concat(_height, "px") : 0,
    onLoad: onFrameLoad,
    allowTransparency: true
  })));
};
Frame.displayName = 'Frame';
var _default = exports["default"] = Frame;