56 lines
1.4 KiB
JavaScript
56 lines
1.4 KiB
JavaScript
import React , { useState } from 'react';
|
|
import { Anchor , Input } from 'antd';
|
|
import './sub.scss';
|
|
|
|
const { Link } = Anchor;
|
|
|
|
function ReadmeCatelogue({ menuList , hash }) {
|
|
const [ goHref , setGoHref ] = useState("");
|
|
const [ value , setValue ] = useState("");
|
|
const [ menu , setMenu] = useState(menuList);
|
|
|
|
|
|
function onChange(link){
|
|
setGoHref(link);
|
|
};
|
|
|
|
function changeValue(e) {
|
|
setValue(e.target.value);
|
|
if(e.target.value){
|
|
let m = menuList.filter(i=>i.text.toLowerCase().indexOf(e.target.value.toLowerCase())>-1);
|
|
setMenu(m);
|
|
}else{
|
|
setMenu(menuList);
|
|
}
|
|
}
|
|
return(
|
|
<div>
|
|
<div className="searchBox">
|
|
<Input
|
|
placeholder={"请输入关键字"}
|
|
value={value}
|
|
onChange={changeValue}
|
|
prefix={<i className="iconfont icon-sousuo_icon1 font-14"></i>}/>
|
|
</div>
|
|
{
|
|
menu && menu.length>0?
|
|
<div className="anchorBox">
|
|
<Anchor affix={false} onChange={onChange} offsetTop={140}>
|
|
{
|
|
menu.map((item,key)=>{
|
|
return(
|
|
<div style={{paddingLeft:`${item.level *15}px`}} className={goHref===item.href?"items active":"items"}>
|
|
<Link href={`${item.href}`} title={item.text} />
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</Anchor>
|
|
</div>
|
|
:""
|
|
}
|
|
|
|
</div>
|
|
)
|
|
}
|
|
export default ReadmeCatelogue; |