/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-08-08 17:19:10
|
* @LastEditTime: 2025-04-16 09:52:27
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 导航栏页面
|
*/
|
import React from 'react';
|
import { MoreOutlined, LeftArrow2Outlined } from 'dd-icons';
|
import { useHistory, useLocation } from 'react-router-dom';
|
import './index.less';
|
import { getLocal, isDebug, showToast } from '../../utils/utility';
|
|
/**
|
* title: string; 导航栏标题
|
* leftContentVisible: bool; 是否显示导航栏左侧按钮
|
* leftContentFunc: func; 导航栏左侧按钮方法
|
* rightContentFunc: func; 导航栏右侧按钮方法
|
* rightChildren: React.ReactNode; 导航栏右侧按钮内容
|
* className: string, 导航栏背景颜色
|
*/
|
const NavBarPage = ({ children, title = '标题', leftContentVisible = true, leftContentFunc, rightContentFunc, rightChildren, className }) => {
|
const history = useHistory();
|
|
const location = useLocation();
|
|
// 点击返回icon
|
function handleClickBack() {
|
if (!!leftContentFunc) {
|
leftContentFunc();
|
} else {
|
// showToast({ content: '返回时提示' });
|
history.goBack();
|
}
|
}
|
|
return (
|
<>
|
<div className={`navBarPage-navbar ${className || ''}`}>
|
{!!leftContentVisible && (
|
<div className="navBarPage-navbar-left" onClick={handleClickBack}>
|
<LeftArrow2Outlined />
|
</div>
|
)}
|
<div className="navBarPage-navbar-title">{title}</div>
|
{!!rightContentFunc && (
|
<div onClick={rightContentFunc} className="navBarPage-navbar-right">
|
{rightChildren}
|
</div>
|
)}
|
</div>
|
<div className="navBarPage-height" />
|
{children}
|
</>
|
);
|
};
|
|
export default NavBarPage;
|
