Commit dacd052c authored by XieZhiXiong's avatar XieZhiXiong

chore: 删除无用组件

parent 6bd38c45
@import '~antd/es/style/themes/default.less';
.anchor-page {
&-header {
background: #FFFFFF;
&-main {
padding: 0 16px;
display: flex;
}
&-left {
flex: 1;
overflow: hidden;
}
&-right {
padding-top: 14px;
flex-shrink: 0;
margin-left: 12px;
}
&-heading {
padding: 14px 0 9px 0;
display: flex;
align-items: center;
&-title {
margin-bottom: 0;
color: rgba(0, 0, 0, 0.85);
font-weight: 600;
font-size: 18px;
line-height: 32px;
min-height: 32px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
&-back {
margin-right: 12px;
font-size: 16px;
cursor: pointer;
&:hover {
color: @primary-color;
}
}
&-anchors {
display: flex;
align-items: center;
}
:global {
.ant-anchor {
background-color: #FFFFFF;
&-link {
padding: 0 16px;
font-size: 14px;
font-weight: 400;
color: @text-color;
&-title {
padding: 16px 0;
border-bottom: 2px solid transparent;
}
&-active,
&:hover {
font-weight: 500;
color: @text-color;
.ant-anchor-link-title {
border-bottom: 2px solid @primary-color;
}
}
}
&-ink {
display: none;
}
}
}
}
&-content {
padding: 16px;
}
}
\ No newline at end of file
/*
* @Author: XieZhiXiong
* @Date: 2021-05-10 11:36:58
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-05-11 10:16:12
* @Description: 页面公用锚点头部
*/
import React, { useState } from 'react';
import { Anchor } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { history } from 'umi';
import useClientRect from '@/hooks/useClientRect';
import styles from './index.less';
export interface AnchorsItem {
/**
* 跳转标识
*/
key: string,
/**
* 名称
*/
name: React.ReactNode,
}
interface IProps {
/**
* 标题
*/
title: React.ReactNode,
/**
* 右侧拓展部分
*/
extra?: React.ReactNode,
/**
* 锚点数据
*/
anchors: (AnchorsItem | null)[],
/**
* 自定义样式
*/
customStyle?: React.CSSProperties,
/**
* 自定义返回事件
*/
onBack?: () => void,
children?: React.ReactNode,
}
const AnchorPage: React.FC<IProps> = (props: IProps) => {
const {
title,
extra,
anchors,
customStyle,
onBack,
children,
} = props;
const firstKey = anchors.length ? `#${anchors[0].key}` : '';
const [current, setCurrent] = useState(firstKey);
const [rect, measuredRef] = useClientRect();
const handleBack = () => {
if (onBack) {
onBack();
return;
}
history.goBack();
};
const handleAnchorChange = (currentActiveLink: string) => {
if (currentActiveLink) {
setCurrent('');
return;
}
if (!currentActiveLink) {
setCurrent(firstKey);
}
};
const handleAnchorClick = (e: React.MouseEvent<HTMLElement>) => {
e.preventDefault();
};
return (
<div
className={styles['anchor-page']}
style={customStyle}
>
<div
className={styles['anchor-page-header']}
ref={measuredRef}
>
<Anchor
showInkInFixed={false}
targetOffset={rect.height}
onChange={handleAnchorChange}
onClick={handleAnchorClick}
>
<div className={styles['anchor-page-header-main']}>
<div className={styles['anchor-page-header-left']}>
<div className={styles['anchor-page-header-heading']}>
<ArrowLeftOutlined
className={styles['anchor-page-header-back']}
onClick={handleBack}
/>
<span className={styles['anchor-page-header-heading-title']}>
{title}
</span>
</div>
<div className={styles['anchor-page-header-content']}>
<div className={styles['anchor-page-header-anchors']}>
{anchors.map((item, index) => (
<Anchor.Link
className={current && index === 0 ? 'ant-anchor-link-active' : null}
key={item.key}
href={`#${item.key}`}
title={item.name}
/>
))}
</div>
</div>
</div>
{extra ? (
<div className={styles['anchor-page-header-right']}>
{extra}
</div>
) : null}
</div>
</Anchor>
</div>
<div className={styles['anchor-page-content']}>
{children}
</div>
</div>
);
};
AnchorPage.defaultProps = {
extra: null,
customStyle: {},
onBack: undefined,
children: null,
};
export default AnchorPage;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment