amis/examples/components/Doc.tsx

91 lines
2.5 KiB
TypeScript
Raw Normal View History

2020-07-24 17:20:08 +08:00
import React from 'react';
import {Switch} from 'react-router-dom';
2020-07-24 17:20:08 +08:00
2022-06-01 21:35:49 +08:00
import {flattenTree, filterTree, mapTree} from 'amis-core';
import {navigations2route} from './App';
2020-07-24 17:20:08 +08:00
2021-01-04 20:10:08 +08:00
import DocNavCN from './DocNavCN';
2020-07-24 17:20:08 +08:00
export default class Doc extends React.PureComponent<any> {
2020-07-28 14:55:49 +08:00
state = {
prevDoc: null,
nextDoc: null
};
2020-07-24 17:20:08 +08:00
componentDidMount() {
2021-01-11 14:12:08 +08:00
if (location.hash && location.hash.length > 1) {
// 禁用自动跳转
if (window.history && 'scrollRestoration' in window.history) {
window.history.scrollRestoration = 'manual';
}
const dom = document.querySelector(
`[name="${location.hash.substring(1)}"]`
);
dom && dom.scrollIntoView();
} else {
window.scrollTo(0, 0);
}
2021-01-04 20:10:08 +08:00
this.props.setNavigations(DocNavCN);
2020-07-28 14:55:49 +08:00
this.setDocFooter();
2020-07-24 17:20:08 +08:00
}
componentDidUpdate(preProps: any) {
2020-07-28 14:55:49 +08:00
if (this.props.location.pathname !== preProps.location.pathname) {
this.props.setNavigations(DocNavCN, false);
2020-07-28 14:55:49 +08:00
this.setDocFooter();
}
}
setDocFooter() {
const newDocs = mapTree(DocNavCN, (doc: any) => ({
2020-07-28 18:23:02 +08:00
...doc,
children:
Array.isArray(doc.children) && doc.children.length
? doc.children.map((item: any) => ({
2020-07-28 18:23:02 +08:00
...item,
group: doc.group || doc.label
}))
: null
}));
const flattenDocs = flattenTree(newDocs).filter(i => !!i.path);
2020-07-31 13:18:44 +08:00
const docIndex = flattenDocs.findIndex(
d => `${this.props.ContextPath}${d.path}` === location.pathname
);
2020-07-28 14:55:49 +08:00
this.setState({
prevDoc: flattenDocs[docIndex - 1],
nextDoc: flattenDocs[docIndex + 1]
});
2020-07-24 17:20:08 +08:00
}
render() {
return (
<Switch>
{navigations2route(DocNavCN, {
2020-07-24 17:20:08 +08:00
theme: this.props.theme,
classPrefix: this.props.classPrefix,
2020-07-28 14:55:49 +08:00
locale: this.props.locale,
viewMode: this.props.viewMode,
2020-10-22 20:04:52 +08:00
offScreen: this.props.offScreen,
2020-07-31 13:18:44 +08:00
ContextPath: this.props.ContextPath,
2020-07-28 14:55:49 +08:00
prevDoc: this.state.prevDoc,
nextDoc: this.state.nextDoc
2020-07-24 17:20:08 +08:00
})}
{/* {React.cloneElement(this.props.children, {
...this.props.children.props,
theme: this.props.theme,
classPrefix: this.props.classPrefix,
locale: this.props.locale,
viewMode: this.props.viewMode,
offScreen: this.props.offScreen,
ContextPath: this.props.ContextPath,
prevDoc: this.state.prevDoc,
nextDoc: this.state.nextDoc
})} */}
</Switch>
2020-07-24 17:20:08 +08:00
);
}
}