docs:导航增加过滤功能 (#1582)

* 导航增加过滤功能

* 删掉没必要的代码
This commit is contained in:
吴多益 2021-02-20 23:34:21 +08:00 committed by GitHub
parent 5e0491780e
commit 1c16c5c649
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -22,6 +22,7 @@ import {
withRouter
} from 'react-router';
import Select from '../../src/components/Select';
import InputBox from '../../src/components/InputBox';
import DocSearch from './DocSearch';
import Doc from './Doc';
import DocNavCN from './DocNavCN';
@ -145,12 +146,14 @@ export class App extends React.PureComponent<{
locale: localStorage.getItem('locale')
? localStorage.getItem('locale').replace('zh-cn', 'zh-CN')
: '',
navigations: []
navigations: [],
filter: '' // 导航过滤,方便找组件
};
constructor(props) {
super(props);
this.setNavigations = this.setNavigations.bind(this);
this.setNavigationFilter = this.setNavigationFilter.bind(this);
}
componentDidUpdate(preProps, preState) {
@ -349,17 +352,45 @@ export class App extends React.PureComponent<{
);
}
setNavigationFilter(value: string) {
this.setState({
filter: value
});
}
renderNavigation() {
return <div className="Doc-navigation">{this.renderAsideNav()}</div>;
return (
<div className="Doc-navigation">
<InputBox
theme={this.state.theme.value}
placeholder={'过滤...'}
onChange={this.setNavigationFilter}
className="m-b m-r"
/>
{this.renderAsideNav()}
</div>
);
}
renderAsideNav() {
const filterReg = new RegExp(
this.state.filter.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&'),
'i'
);
return (
<AsideNav
navigations={this.state.navigations.map(item => ({
...item,
children: item.children
? item.children.map(item => ({
? item.children
.filter(item => {
if (item.label) {
return filterReg.exec(item.label);
}
return true;
})
.map(item => ({
...item,
className: 'is-top'
}))