66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { findDOMNode } from 'react-dom';
|
|
import qs from 'query-string';
|
|
import { withRouter, RouteComponentProps } from 'react-router';
|
|
import { Tabs } from 'antd';
|
|
import { TabsProps } from 'antd/lib/tabs';
|
|
|
|
interface OwnProps extends TabsProps {
|
|
scrollToTabs?: boolean;
|
|
ignoredKeys?: string[];
|
|
}
|
|
|
|
type Props = OwnProps & RouteComponentProps;
|
|
|
|
interface State {
|
|
defaultActiveKey: string | undefined;
|
|
}
|
|
|
|
class LinkableTabs extends React.Component<Props, State> {
|
|
constructor(props: Props) {
|
|
super(props);
|
|
|
|
let { defaultActiveKey } = props;
|
|
const { ignoredKeys } = props;
|
|
const tab = this.getTabFromUrl(props.location);
|
|
const shouldSkip = tab && ignoredKeys && ignoredKeys.includes(tab);
|
|
|
|
if (tab && !shouldSkip) {
|
|
defaultActiveKey = tab;
|
|
}
|
|
this.state = { defaultActiveKey };
|
|
}
|
|
|
|
componentDidMount() {
|
|
const tab = this.getTabFromUrl(this.props.location);
|
|
if (tab && this.props.scrollToTabs) {
|
|
setTimeout(() => {
|
|
// Don't wrestle control from the user
|
|
if (window.scrollY !== 0) {
|
|
return;
|
|
}
|
|
|
|
const node = findDOMNode(this);
|
|
if (node instanceof HTMLElement) {
|
|
window.scrollTo({
|
|
top: node.offsetTop,
|
|
behavior: 'smooth',
|
|
});
|
|
}
|
|
}, 500);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { defaultActiveKey } = this.state;
|
|
return <Tabs {...this.props} defaultActiveKey={defaultActiveKey} />;
|
|
}
|
|
|
|
private getTabFromUrl(location: RouteComponentProps['location']): string | undefined {
|
|
const args = qs.parse(location.search);
|
|
return args.tab;
|
|
}
|
|
}
|
|
|
|
export default withRouter(LinkableTabs);
|