tntd/lib/page/index.js

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireDefault(require("react"));
var _tntdIcon = _interopRequireDefault(require("../tntd-icon"));
var _Box = _interopRequireDefault(require("./Box"));
var _utils = require("./utils");
require("./index.less");
function _interopRequireDefault(e) {
  return e && e.__esModule ? e : {
    "default": e
  };
}
function _defineProperty(e, r, t) {
  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
    value: t,
    enumerable: !0,
    configurable: !0,
    writable: !0
  }) : e[r] = t, e;
}
function _toPropertyKey(t) {
  var i = _toPrimitive(t, "string");
  return "symbol" == _typeof(i) ? i : i + "";
}
function _toPrimitive(t, r) {
  if ("object" != _typeof(t) || !t) return t;
  var e = t[Symbol.toPrimitive];
  if (void 0 !== e) {
    var i = e.call(t, r || "default");
    if ("object" != _typeof(i)) return i;
    throw new TypeError("@@toPrimitive must return a primitive value.");
  }
  return ("string" === r ? String : Number)(t);
}
function _toConsumableArray(r) {
  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
}
function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _unsupportedIterableToArray(r, a) {
  if (r) {
    if ("string" == typeof r) return _arrayLikeToArray(r, a);
    var t = {}.toString.call(r).slice(8, -1);
    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
  }
}
function _iterableToArray(r) {
  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
}
function _arrayWithoutHoles(r) {
  if (Array.isArray(r)) return _arrayLikeToArray(r);
}
function _arrayLikeToArray(r, a) {
  (null == a || a > r.length) && (a = r.length);
  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
  return 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);
}
var __rest = void 0 && (void 0).__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
var clsPrefix = 'tntd-page';
var isPageBox = function isPageBox(child) {
  var _a;
  return (child === null || child === void 0 ? void 0 : child.type) === _Box["default"] || ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.pageBox);
};
var PageLayout = function PageLayout(_a) {
  var _b;
  var _a$height = _a.height,
    height = _a$height === void 0 ? '100vh' : _a$height,
    _a$headerHeight = _a.headerHeight,
    headerHeight = _a$headerHeight === void 0 ? 50 : _a$headerHeight,
    children = _a.children,
    title = _a.title,
    goBack = _a.goBack,
    goBackText = _a.goBackText,
    center = _a.center,
    extra = _a.extra,
    _a$size = _a.size,
    size = _a$size === void 0 ? 'small' : _a$size,
    _a$inLayout = _a.inLayout,
    inLayout = _a$inLayout === void 0 ? false : _a$inLayout,
    className = _a.className,
    restProps = __rest(_a, ["height", "headerHeight", "children", "title", "goBack", "goBackText", "center", "extra", "size", "inLayout", "className"]);
  // 如果传入只有数字，需要默认加px
  var computedHeaderHeight = (0, _utils.addUnitForValue)(headerHeight);
  var computedHeight = (0, _utils.addUnitForValue)(height);
  // 判断是否有标题栏
  if (!(title || extra || center)) {
    computedHeaderHeight = '0px';
  }
  if (inLayout) {
    computedHeaderHeight = '40px';
  }
  // 计算中间的zIndex，灰色递减，白色递增
  var whiteCols = 0;
  var childrenToArray = [];
  // 计算children type是box的数量
  var boxCount = 0;
  // 如果children是单个节点，统一转为数组处理计算层级
  if (_typeof(children) === 'object') {
    childrenToArray = [children];
  } else if (Array.isArray(children)) {
    childrenToArray = _toConsumableArray(children);
  }
  _react["default"].Children.map(children, function (child) {
    if (isPageBox(child)) {
      boxCount += 1;
    }
  });
  whiteCols = (_b = childrenToArray === null || childrenToArray === void 0 ? void 0 : childrenToArray.filter(function (_ref) {
    var props = _ref.props;
    return (props === null || props === void 0 ? void 0 : props.mode) === 'white';
  })) === null || _b === void 0 ? void 0 : _b.length;
  var total = (childrenToArray === null || childrenToArray === void 0 ? void 0 : childrenToArray.length) + 5;
  var startIndex = total - whiteCols - 1;
  var endIndex = total - 2;
  var headerStyle = {
    height: computedHeaderHeight,
    padding: "".concat(size === 'small' ? 20 : 24, "px"),
    zIndex: inLayout ? 1 : total || 1
  };
  var contentStyle = {
    display: boxCount > 0 ? 'flex' : 'block',
    marginTop: computedHeaderHeight,
    padding: inLayout ? '16px 20px' : '0px'
  };
  return _react["default"].createElement("section", Object.assign({
    className: (0, _classnames["default"])(clsPrefix, _defineProperty(_defineProperty(_defineProperty({}, className, className), 'in-layout', inLayout), 'not-in-layout', !inLayout))
  }, restProps), (title || goBack || center || extra) && _react["default"].createElement("div", {
    className: "".concat(clsPrefix, "-header"),
    style: headerStyle
  }, _react["default"].createElement("div", {
    className: "".concat(clsPrefix, "-header-section")
  }, goBack && _react["default"].createElement("div", {
    className: "page-header-section-back",
    onClick: function onClick() {
      goBack();
    }
  }, _react["default"].createElement(_tntdIcon["default"], {
    type: "left"
  }), _react["default"].createElement("span", null, goBackText ? goBackText : '返回')), title), [center, extra].map(function (item, i) {
    return _react["default"].createElement("div", {
      className: "".concat(clsPrefix, "-header-section"),
      key: i
    }, item);
  })), _react["default"].createElement("div", {
    className: "".concat(clsPrefix, "-content"),
    style: contentStyle
  }, _react["default"].Children.map(children, function (child) {
    // 如果children不是Box,就不需要多列布局
    if (!child.type) {
      return _react["default"].cloneElement(_react["default"].createElement("div", null, child));
    }
    var extraProps = Object.assign({
      headerHeight: computedHeaderHeight,
      size: size,
      height: computedHeight,
      contentTotalMargin: inLayout ? '32px' : '0px',
      inLayout: inLayout
    }, child.props);
    if (!isPageBox(child)) {
      return _react["default"].cloneElement(child, {}); // 如果是自定义的children，不需要读取参数
    }
    var _child$props = child.props,
      _child$props$mode = _child$props.mode,
      mode = _child$props$mode === void 0 ? 'gray' : _child$props$mode,
      width = _child$props.width;
    var style = {
      flex: (0, _utils.computeWidth)(width),
      // 设置cols层级关系
      zIndex: mode === 'gray' ? endIndex-- : startIndex++
    };
    var className = (0, _classnames["default"])("".concat(clsPrefix, "-box ").concat(clsPrefix, "-box-").concat(mode));
    return _react["default"].createElement('div', {
      className: className,
      style: style
    }, _react["default"].cloneElement(child, extraProps));
  })));
};
PageLayout.Box = _Box["default"];
var _default = exports["default"] = PageLayout;