@cainiaofe/cn-ui-layout
Version:
- 安装 cone-cli ｜ [Cone-CLI 使用指引](https://alidocs.dingtalk.com/i/nodes/xdqZp24KneBJzvGM6XezJvyb7RA0Nr1E) - `tnpm i -g @alife/cone-cli@latest` - 安装依赖包 - `cone install` - 启动研发 - `cone start`
97 lines (94 loc) • 5 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _context = _interopRequireDefault(require("../common/context"));
var _excluded = ["avatar", "title", "label", "desc", "className", "children", "mode", "noBottomPadding", "divider", "fullWidth"];
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; }
var CustomCnTag = function CustomCnTag(props) {
var clsPrefix = "cn-layout-page-header";
return /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-tag"
}, /*#__PURE__*/_react["default"].createElement("span", null, props === null || props === void 0 ? void 0 : props.children));
};
var PageHeader = function PageHeader(props) {
var _classNames;
var avatar = props.avatar,
title = props.title,
label = props.label,
desc = props.desc,
className = props.className,
children = props.children,
mode = props.mode,
noBottomPadding = props.noBottomPadding,
divider = props.divider,
fullWidth = props.fullWidth,
others = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
var _useContext = (0, _react.useContext)(_context["default"]),
prefix = _useContext.prefix;
var clsPrefix = prefix + "page-header";
var headerCls = (0, _classnames["default"])(className, clsPrefix, (_classNames = {}, _classNames[clsPrefix + "--dividing"] = divider, _classNames[clsPrefix + "--fullwidth"] = fullWidth, _classNames[prefix + "bg--" + mode] = !!mode, _classNames));
/**
* 标签区域
*/
var renderTags = function renderTags() {
if (typeof label === 'string') {
return /*#__PURE__*/_react["default"].createElement(CustomCnTag, null, label);
}
if (Array.isArray(label) && (label === null || label === void 0 ? void 0 : label.length) !== 0) {
return /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-tag-list"
}, label === null || label === void 0 ? void 0 : label.map(function (text) {
return /*#__PURE__*/_react["default"].createElement(CustomCnTag, null, text);
}));
}
return null;
};
/**
* title 区域
*/
var renderTitle = function renderTitle() {
return /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-title-wrapper"
}, (title || label) && /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-title"
}, title && /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-title-text"
}, title), renderTags()), desc && /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-desc"
}, /*#__PURE__*/_react["default"].createElement("div", {
title: desc,
className: clsPrefix + "-desc-content"
}, desc)));
};
return /*#__PURE__*/_react["default"].createElement("header", (0, _extends2["default"])({}, others, {
className: headerCls
}), /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "page-header-inner"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-main"
}, avatar && /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-avatar"
}, /*#__PURE__*/_react["default"].createElement("img", {
className: clsPrefix + "-avatar-img",
src: avatar === null || avatar === void 0 ? void 0 : avatar.src
})), renderTitle()), /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-extra"
}, children)));
};
PageHeader.displayName = 'Header';
PageHeader.typeMark = 'Header';
PageHeader.defaultProps = {
noBottomPadding: false,
divider: false,
fullWidth: false,
mode: 'surface'
};
var _default = exports["default"] = PageHeader;
module.exports = exports.default;
module.exports.default = exports.default;