pageHeader
This commit is contained in:
parent
23b8b949a3
commit
16d47682ff
|
|
@ -0,0 +1,15 @@
|
|||
import React from 'react';
|
||||
declare type PageHeaderProps = {
|
||||
title?: React.ReactNode;
|
||||
showBack?: boolean;
|
||||
onBack?: () => void;
|
||||
backIcon?: React.ReactNode;
|
||||
delta?: number;
|
||||
extra?: React.ReactNode;
|
||||
subTitle?: React.ReactNode;
|
||||
contentMargin?: boolean;
|
||||
tags?: React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
};
|
||||
declare const _default: React.MemoExoticComponent<(props: PageHeaderProps) => JSX.Element>;
|
||||
export default _default;
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var tslib_1 = require("tslib");
|
||||
var jsx_runtime_1 = require("react/jsx-runtime");
|
||||
var react_1 = require("react");
|
||||
var react_router_dom_1 = require("react-router-dom");
|
||||
var tdesign_react_1 = require("tdesign-react");
|
||||
var tdesign_icons_react_1 = require("tdesign-icons-react");
|
||||
var classnames_1 = tslib_1.__importDefault(require("classnames"));
|
||||
var index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
|
||||
exports.default = (0, react_1.memo)(function (props) {
|
||||
var _a;
|
||||
var children = props.children, title = props.title, subTitle = props.subTitle, extra = props.extra, showBack = props.showBack, onBack = props.onBack, backIcon = props.backIcon, delta = props.delta, _b = props.contentMargin, contentMargin = _b === void 0 ? true : _b, tags = props.tags;
|
||||
var navigate = (0, react_router_dom_1.useNavigate)();
|
||||
return ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: index_module_less_1.default.pageHeader }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: index_module_less_1.default.title }, { children: (0, jsx_runtime_1.jsxs)(tdesign_react_1.Row, { children: [(0, jsx_runtime_1.jsxs)(tdesign_react_1.Col, tslib_1.__assign({ flex: "auto" }, { children: [showBack && ((0, jsx_runtime_1.jsx)(tdesign_react_1.Button, tslib_1.__assign({ shape: "square", variant: "text", theme: "primary", className: index_module_less_1.default.back, onClick: function () {
|
||||
if (typeof onBack === 'function') {
|
||||
onBack();
|
||||
return;
|
||||
}
|
||||
navigate(delta || -1);
|
||||
} }, { children: backIcon || ((0, jsx_runtime_1.jsx)(tdesign_icons_react_1.ArrowLeftIcon, { className: index_module_less_1.default.backIcon })) }))), title && (0, jsx_runtime_1.jsx)("h2", tslib_1.__assign({ className: index_module_less_1.default.h2 }, { children: title })), subTitle && ((0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ className: index_module_less_1.default.subTitle }, { children: subTitle }))), tags] })), (0, jsx_runtime_1.jsx)(tdesign_react_1.Col, tslib_1.__assign({ flex: "auto" }, { children: extra }))] }) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, classnames_1.default)(index_module_less_1.default.content, (_a = {},
|
||||
_a[index_module_less_1.default.contentMargin] = contentMargin,
|
||||
_a)) }, { children: children }))] })));
|
||||
});
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
.pageHeader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 0;
|
||||
height: auto;
|
||||
line-height: inherit;
|
||||
min-height: inherit;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #fff;
|
||||
padding: 10px 20px;
|
||||
color: #000;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.backIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-right: 20px;
|
||||
max-width: 70%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.back {
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.contentMargin {
|
||||
margin: 20px;
|
||||
}
|
||||
|
|
@ -29,7 +29,8 @@
|
|||
"react-dom": ">=18.1.0",
|
||||
"tdesign-icons-react": ">=0.1.4",
|
||||
"tdesign-mobile-react": ">=0.2.0",
|
||||
"tdesign-react": "^0.40.5"
|
||||
"tdesign-react": ">=0.40.5",
|
||||
"react-router-dom": ">=6.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.12.13",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
.pageHeader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 0;
|
||||
height: auto;
|
||||
line-height: inherit;
|
||||
min-height: inherit;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #fff;
|
||||
padding: 10px 20px;
|
||||
color: #000;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.backIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-right: 20px;
|
||||
max-width: 70%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.back {
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.contentMargin {
|
||||
margin: 20px;
|
||||
}
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
import React, { memo } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Row, Col, Button } from 'tdesign-react';
|
||||
import { ArrowLeftIcon } from 'tdesign-icons-react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import Style from './index.module.less';
|
||||
|
||||
type PageHeaderProps = {
|
||||
title?: React.ReactNode;
|
||||
showBack?: boolean;
|
||||
onBack?: () => void;
|
||||
backIcon?: React.ReactNode;
|
||||
delta?: number; //有返回按钮时，返回第几层
|
||||
extra?: React.ReactNode;
|
||||
subTitle?: React.ReactNode;
|
||||
contentMargin?: boolean; // 设置内容是否有边距 默认true 边距为20px
|
||||
tags?: React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
};
|
||||
|
||||
export default memo((props: PageHeaderProps) => {
|
||||
const {
|
||||
children,
|
||||
title,
|
||||
subTitle,
|
||||
extra,
|
||||
showBack,
|
||||
onBack,
|
||||
backIcon,
|
||||
delta,
|
||||
contentMargin = true,
|
||||
tags,
|
||||
} = props;
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className={Style.pageHeader}>
|
||||
<div className={Style.title}>
|
||||
<Row>
|
||||
<Col flex="auto">
|
||||
{showBack && (
|
||||
<Button
|
||||
shape="square"
|
||||
variant="text"
|
||||
theme="primary"
|
||||
className={Style.back}
|
||||
onClick={() => {
|
||||
if (typeof onBack === 'function') {
|
||||
onBack();
|
||||
return;
|
||||
}
|
||||
navigate(delta || -1);
|
||||
}}
|
||||
>
|
||||
{backIcon || (
|
||||
<ArrowLeftIcon className={Style.backIcon} />
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
{title && <h2 className={Style.h2}>{title}</h2>}
|
||||
{subTitle && (
|
||||
<span className={Style.subTitle}>{subTitle}</span>
|
||||
)}
|
||||
{tags}
|
||||
</Col>
|
||||
<Col flex="auto">{extra}</Col>
|
||||
</Row>
|
||||
</div>
|
||||
<div
|
||||
className={classNames(Style.content, {
|
||||
[Style.contentMargin]: contentMargin,
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
Loading…
Reference in New Issue