把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