zhu-jiang-yi-yuan-bigscreen/es/components/background-box/index.js

南方医科大学珠江医院大屏端

import titleBgLeft from '../../assets/title_bg_left.svg';
import titleBgRight from '../../assets/title_bg_right.svg';
import { Const, PxUtil } from '../../utils';
import { NConst } from 'nsn-const';
import React, { useEffect } from 'react';
import './index.less';
var CLS_PREFIX = "".concat(Const.CLS_PREFIX, "-background-box");
var DEFAULT_HEIGHT = 666.15;
/** 背景框 */

var BackgroundBox = function BackgroundBox(props) {
  var title = props.title,
      children = props.children,
      height = props.height,
      width = props.width,
      _props$className = props.className,
      className = _props$className === void 0 ? NConst.EMPTY : _props$className,
      _props$subHeight = props.subHeight,
      subHeight = _props$subHeight === void 0 ? 0 : _props$subHeight,
      selector = props.selector,
      calcRefresh = props.calcRefresh;
  var BOX_ID = "".concat(selector, "-box");
  var boxId = selector ? {
    id: BOX_ID
  } : {};
  var HEAD_ID = "".concat(selector, "-head");
  var headId = selector ? {
    id: HEAD_ID
  } : {};
  var CONTENT_ID = "".concat(selector, "-content");
  var contentId = selector ? {
    id: CONTENT_ID
  } : {};
  var docHeight = calcRefresh === null || calcRefresh === void 0 ? void 0 : calcRefresh[1];
  useEffect(function () {
    if (selector) {
      var boxEle = document.getElementById(BOX_ID);
      var headEle = document.getElementById(HEAD_ID);
      var contentEle = document.getElementById(CONTENT_ID);

      if (boxEle && headEle && contentEle) {
        var boxH = boxEle.offsetHeight;
        var headH = headEle.offsetHeight;
        contentEle.style.height = "".concat(boxH - headH - subHeight, "px"); // if (radioCalc) {
        //   // 计算当前实际宽度和高度
        //   const boxW = boxEle.offsetWidth;
        //   // 理想比例
        //   const radio = (height || DEFAULT_HEIGHT) / PxUtil.BASE_HEIGHT;
        //   //计算理想高度
        //   const perfectHeight = boxH * radio;
        //   // 若实际高度大于理想高度，设置当前高度为理想高度
        // }
      }
    }
  }, [docHeight]);
  return /*#__PURE__*/React.createElement("div", Object.assign({}, boxId, {
    className: "".concat(CLS_PREFIX, " ").concat(className),
    style: {
      height: PxUtil.getCalcPx(height || DEFAULT_HEIGHT, true),
      width: PxUtil.getCalcPx(width || '100%')
    }
  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", Object.assign({}, headId, {
    className: "head"
  }), /*#__PURE__*/React.createElement("img", {
    src: titleBgLeft
  }), /*#__PURE__*/React.createElement("span", null, title), /*#__PURE__*/React.createElement("img", {
    src: titleBgRight
  })), /*#__PURE__*/React.createElement("div", Object.assign({}, contentId, {
    className: "content"
  }), children)));
};

export { BackgroundBox };