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

新设计规范下业务组件库

/* 提供iframe功能，实现宿主页面事件监听与发送 */

import React, { useCallback, useEffect, useState } from 'react';
import variable from '../../theme/variable';
import { Default } from '..';
import { useHistory } from 'react-router-dom';
import classnames from 'classnames';
import material from '../material';
import './style';
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 = useHistory(),
    push = _useHistory.push;
  var _useState = useState(600),
    height = _useState[0],
    setHeight = _useState[1];
  var _useState2 = useState(''),
    modalCls = _useState2[0],
    setModalCls = _useState2[1];
  var _useState3 = useState(true),
    loading = _useState3[0],
    setLoading = _useState3[1];

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

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

  // 高度控制
  var heightHandler = useCallback(function () {
    var _height = document.body.offsetHeight - variable.TOP_NAV_HEIGHT - offset; // 60 为顶导高度
    setHeight(_height);
  }, [offset]);
  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 = useCallback(function (e) {
    var _e$data = e.data,
      _type = _e$data._type,
      _material = _e$data.meterial;
    if (_type === 'frame:material') {
      _material.isVideo ? material.showVideo(_material) : material.showDoc(_material);
    }
  }, []);
  useEffect(function () {
    window.addEventListener('message', docHandler);
    return function () {
      window.removeEventListener('message', docHandler);
    };
  }, []);

  // Modal控制
  var modalHandler = 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' : '');
    }
  }, []);
  useEffect(function () {
    window.addEventListener('message', modalHandler);
    return function () {
      window.removeEventListener('message', modalHandler);
    };
  }, []);
  useEffect(function () {
    modalCls ? document.body.style.overflow = 'hidden' : document.body.style.overflow = 'auto';
  }, [modalCls]);
  var _height = 'height' in props ? heightProp : height;
  return /*#__PURE__*/React.createElement("div", {
    className: "umui-frame"
  }, /*#__PURE__*/React.createElement("div", {
    className: classnames('umui-frame-mask', modalCls)
  }), /*#__PURE__*/React.createElement(Default.Loading, {
    type: "page",
    spinning: loading
  }, /*#__PURE__*/React.createElement("iframe", {
    src: src,
    frameBorder: "0",
    scrolling: "no",
    style: style,
    width: "100%",
    height: _height > 0 ? _height + "px" : 0,
    onLoad: onFrameLoad,
    allowTransparency: true
  })));
};
Frame.displayName = 'Frame';
export default Frame;