@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`
88 lines (86 loc) • 3.54 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["avatar", "title", "label", "desc", "className", "children", "mode", "noBottomPadding", "divider", "fullWidth"];
import React, { useContext } from 'react';
import classNames from 'classnames';
import Context from "../common/context";
var CustomCnTag = function CustomCnTag(props) {
var clsPrefix = "cn-layout-page-header";
return /*#__PURE__*/React.createElement("div", {
className: clsPrefix + "-tag"
}, /*#__PURE__*/React.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 = _objectWithoutPropertiesLoose(props, _excluded);
var _useContext = useContext(Context),
prefix = _useContext.prefix;
var clsPrefix = prefix + "page-header";
var headerCls = classNames(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.createElement(CustomCnTag, null, label);
}
if (Array.isArray(label) && (label === null || label === void 0 ? void 0 : label.length) !== 0) {
return /*#__PURE__*/React.createElement("div", {
className: clsPrefix + "-tag-list"
}, label === null || label === void 0 ? void 0 : label.map(function (text) {
return /*#__PURE__*/React.createElement(CustomCnTag, null, text);
}));
}
return null;
};
/**
* title 区域
*/
var renderTitle = function renderTitle() {
return /*#__PURE__*/React.createElement("div", {
className: clsPrefix + "-title-wrapper"
}, (title || label) && /*#__PURE__*/React.createElement("div", {
className: clsPrefix + "-title"
}, title && /*#__PURE__*/React.createElement("div", {
className: clsPrefix + "-title-text"
}, title), renderTags()), desc && /*#__PURE__*/React.createElement("div", {
className: clsPrefix + "-desc"
}, /*#__PURE__*/React.createElement("div", {
title: desc,
className: clsPrefix + "-desc-content"
}, desc)));
};
return /*#__PURE__*/React.createElement("header", _extends({}, others, {
className: headerCls
}), /*#__PURE__*/React.createElement("div", {
className: prefix + "page-header-inner"
}, /*#__PURE__*/React.createElement("div", {
className: clsPrefix + "-main"
}, avatar && /*#__PURE__*/React.createElement("div", {
className: clsPrefix + "-avatar"
}, /*#__PURE__*/React.createElement("img", {
className: clsPrefix + "-avatar-img",
src: avatar === null || avatar === void 0 ? void 0 : avatar.src
})), renderTitle()), /*#__PURE__*/React.createElement("div", {
className: clsPrefix + "-extra"
}, children)));
};
PageHeader.displayName = 'Header';
PageHeader.typeMark = 'Header';
PageHeader.defaultProps = {
noBottomPadding: false,
divider: false,
fullWidth: false,
mode: 'surface'
};
export default PageHeader;