把pageheader移到了这里
This commit is contained in:
parent
75513c3259
commit
828cdba781
|
|
@ -0,0 +1,21 @@
|
|||
import React from 'react';
|
||||
import './index.less';
|
||||
declare type PageHeaderProps = {
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
title?: React.ReactNode;
|
||||
showBack?: boolean;
|
||||
onBack?: () => void;
|
||||
backIcon?: React.ReactNode;
|
||||
delta?: number;
|
||||
extra?: React.ReactNode;
|
||||
subTitle?: React.ReactNode;
|
||||
contentMargin?: boolean;
|
||||
contentStyle?: React.CSSProperties;
|
||||
contentClassName?: string;
|
||||
tags?: React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
showHeader?: boolean;
|
||||
};
|
||||
declare const _default: React.MemoExoticComponent<(props: PageHeaderProps) => JSX.Element>;
|
||||
export default _default;
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
"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");
|
||||
// @ts-ignore
|
||||
var react_router_dom_1 = require("react-router-dom");
|
||||
var antd_1 = require("antd");
|
||||
var icons_1 = require("@ant-design/icons");
|
||||
var classnames_1 = tslib_1.__importDefault(require("classnames"));
|
||||
require("./index.less");
|
||||
exports.default = (0, react_1.memo)(function (props) {
|
||||
var _a;
|
||||
var style = props.style, className = props.className, children = props.children, title = props.title, subTitle = props.subTitle, extra = props.extra, _b = props.showBack, showBack = _b === void 0 ? false : _b, onBack = props.onBack, backIcon = props.backIcon, delta = props.delta, _c = props.contentMargin, contentMargin = _c === void 0 ? true : _c, contentStyle = props.contentStyle, contentClassName = props.contentClassName, tags = props.tags, _d = props.showHeader, showHeader = _d === void 0 ? true : _d;
|
||||
var prefixCls = 'oak';
|
||||
var navigate = (0, react_router_dom_1.useNavigate)();
|
||||
return ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ style: style, className: (0, classnames_1.default)("".concat(prefixCls, "-pageHeader"), className) }, { children: [showHeader && (title || showBack || subTitle || tags || extra) && ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "".concat(prefixCls, "-pageHeader-header") }, { children: (0, jsx_runtime_1.jsxs)(antd_1.Row, tslib_1.__assign({ justify: "center" }, { children: [(0, jsx_runtime_1.jsxs)(antd_1.Col, tslib_1.__assign({ flex: "auto", className: "".concat(prefixCls, "-pageHeader-header-col") }, { children: [showBack && ((0, jsx_runtime_1.jsx)(antd_1.Button, tslib_1.__assign({ type: "text", className: "".concat(prefixCls, "-pageHeader-header-back"), onClick: function () {
|
||||
if (typeof onBack === 'function') {
|
||||
onBack();
|
||||
return;
|
||||
}
|
||||
navigate(delta || -1);
|
||||
} }, { children: backIcon || ((0, jsx_runtime_1.jsx)(icons_1.ArrowLeftOutlined, { className: "".concat(prefixCls, "-pageHeader-header-backIcon") })) }))), title && ((0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ className: "".concat(prefixCls, "-pageHeader-header-title") }, { children: title }))), subTitle && ((0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ className: "".concat(prefixCls, "-pageHeader-header-subTitle") }, { children: subTitle }))), tags] })), (0, jsx_runtime_1.jsx)(antd_1.Col, tslib_1.__assign({ flex: "auto" }, { children: extra }))] })) }))), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: contentStyle, className: (0, classnames_1.default)("".concat(prefixCls, "-pageHeader-content"), contentClassName, (_a = {},
|
||||
_a["".concat(prefixCls, "-pageHeader-content-margin")] = contentMargin,
|
||||
_a)) }, { children: children }))] })));
|
||||
});
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
.oak-pageHeader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
&-header {
|
||||
margin: 0;
|
||||
font-size: 0;
|
||||
height: auto;
|
||||
line-height: inherit;
|
||||
min-height: inherit;
|
||||
position: relative;
|
||||
padding: 10px 20px;
|
||||
color: #000;
|
||||
background: var(--oak-bg-color-container);
|
||||
|
||||
&-backIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&-title {
|
||||
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;
|
||||
}
|
||||
|
||||
&-col {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&-margin {
|
||||
margin: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
import React, { memo } from 'react';
|
||||
// @ts-ignore
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Row, Col, Button } from 'antd';
|
||||
import { ArrowLeftOutlined } from '@ant-design/icons';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import './index.less';
|
||||
|
||||
type PageHeaderProps = {
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
title?: React.ReactNode;
|
||||
showBack?: boolean;
|
||||
onBack?: () => void;
|
||||
backIcon?: React.ReactNode;
|
||||
delta?: number; //有返回按钮时，返回第几层
|
||||
extra?: React.ReactNode;
|
||||
subTitle?: React.ReactNode;
|
||||
contentMargin?: boolean; // 设置内容是否有边距 默认true 边距为20px
|
||||
contentStyle?: React.CSSProperties;
|
||||
contentClassName?: string;
|
||||
tags?: React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
showHeader?: boolean; //默认true 显示头部
|
||||
};
|
||||
|
||||
export default memo((props: PageHeaderProps) => {
|
||||
const {
|
||||
style,
|
||||
className,
|
||||
children,
|
||||
title,
|
||||
subTitle,
|
||||
extra,
|
||||
showBack = false,
|
||||
onBack,
|
||||
backIcon,
|
||||
delta,
|
||||
contentMargin = true,
|
||||
contentStyle,
|
||||
contentClassName,
|
||||
tags,
|
||||
showHeader = true,
|
||||
} = props;
|
||||
const prefixCls = 'oak';
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div
|
||||
style={style}
|
||||
className={classNames(`${prefixCls}-pageHeader`, className)}
|
||||
>
|
||||
{showHeader && (title || showBack || subTitle || tags || extra) && (
|
||||
<div className={`${prefixCls}-pageHeader-header`}>
|
||||
<Row justify="center">
|
||||
<Col
|
||||
flex="auto"
|
||||
className={`${prefixCls}-pageHeader-header-col`}
|
||||
>
|
||||
{showBack && (
|
||||
<Button
|
||||
type="text"
|
||||
className={`${prefixCls}-pageHeader-header-back`}
|
||||
onClick={() => {
|
||||
if (typeof onBack === 'function') {
|
||||
onBack();
|
||||
return;
|
||||
}
|
||||
navigate(delta || -1);
|
||||
}}
|
||||
>
|
||||
{backIcon || (
|
||||
<ArrowLeftOutlined
|
||||
className={`${prefixCls}-pageHeader-header-backIcon`}
|
||||
/>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
{title && (
|
||||
<span
|
||||
className={`${prefixCls}-pageHeader-header-title`}
|
||||
>
|
||||
{title}
|
||||
</span>
|
||||
)}
|
||||
{subTitle && (
|
||||
<span
|
||||
className={`${prefixCls}-pageHeader-header-subTitle`}
|
||||
>
|
||||
{subTitle}
|
||||
</span>
|
||||
)}
|
||||
{tags}
|
||||
</Col>
|
||||
<Col flex="auto">{extra}</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
style={contentStyle}
|
||||
className={classNames(
|
||||
`${prefixCls}-pageHeader-content`,
|
||||
contentClassName,
|
||||
{
|
||||
[`${prefixCls}-pageHeader-content-margin`]:
|
||||
contentMargin,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
Loading…
Reference in New Issue