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

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

"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.BackgroundBox = void 0;

var _title_bg_left = _interopRequireDefault(require("../../assets/title_bg_left.svg"));

var _title_bg_right = _interopRequireDefault(require("../../assets/title_bg_right.svg"));

var _utils = require("../../utils");

var _nsnConst = require("nsn-const");

var _react = _interopRequireWildcard(require("react"));

require("./index.less");

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var CLS_PREFIX = "".concat(_utils.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 ? _nsnConst.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];
  (0, _react.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.default.createElement("div", Object.assign({}, boxId, {
    className: "".concat(CLS_PREFIX, " ").concat(className),
    style: {
      height: _utils.PxUtil.getCalcPx(height || DEFAULT_HEIGHT, true),
      width: _utils.PxUtil.getCalcPx(width || '100%')
    }
  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", Object.assign({}, headId, {
    className: "head"
  }), /*#__PURE__*/_react.default.createElement("img", {
    src: _title_bg_left.default
  }), /*#__PURE__*/_react.default.createElement("span", null, title), /*#__PURE__*/_react.default.createElement("img", {
    src: _title_bg_right.default
  })), /*#__PURE__*/_react.default.createElement("div", Object.assign({}, contentId, {
    className: "content"
  }), children)));
};

exports.BackgroundBox = BackgroundBox;