import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap'; import HistoryList from './history-list'; import CommentsList from './comments-list'; import OutlineView from './outline'; const URL = require('url-parse'); const propTypes = { editorUtilities: PropTypes.object.isRequired, markdownContent: PropTypes.string.isRequired, commentsNumber: PropTypes.number.isRequired, viewer: PropTypes.object.isRequired, value: PropTypes.object.isRequired, activeTab: PropTypes.string.isRequired, showDiffViewer: PropTypes.func.isRequired, setDiffViewerContent: PropTypes.func.isRequired, reloadDiffContent: PropTypes.func.isRequired, tabItemClick: PropTypes.func.isRequired, getCommentsNumber: PropTypes.func.isRequired, }; class MarkdownViewerSidePanel extends React.Component { constructor(props) { super(props); } tabItemClick = (tab) => { this.props.tabItemClick(tab); } showNavItem = (showTab) => { switch(showTab) { case 'outline': return ( { this.tabItemClick('outline');}} > ); case 'comments': return ( {this.tabItemClick('comments');}}> {this.props.commentsNumber > 0 &&
{this.props.commentsNumber}
}
); case 'history': return ( { this.tabItemClick('history');}}> ); } } renderNavItems = () => { return ( ); } scrollToNode = (node) => { let url = new URL(window.location.href); url.set('hash', 'user-content-' + node.text); window.location.href = url.toString(); } findScrollContainer = (el, window) => { let parent = el.parentNode; const OVERFLOWS = ['auto', 'overlay', 'scroll']; let scroller; while (!scroller) { if (!parent.parentNode) break; const style = window.getComputedStyle(parent); const { overflowY } = style; if (OVERFLOWS.includes(overflowY)) { scroller = parent; break; } parent = parent.parentNode; } if (!scroller) { return window.document.body; } return scroller; } scrollToQuote = (path) => { if (!path) return; const win = window; if (path.length > 2) { // deal with code block or chart path[0] = path[0] > 1 ? path[0] - 1 : path[0] + 1; path = path.slice(0, 1); } let node = this.props.value.document.getNode(path); if (!node) { path = path.slice(0, 1); node = this.props.value.document.getNode(path); } if (node) { let element = win.document.querySelector(`[data-key="${node.key}"]`); while (element.tagName === 'CODE') { element = element.parentNode; } const scroller = this.findScrollContainer(element, win); const isWindow = scroller == win.document.body || scroller == win.document.documentElement; if (isWindow) { win.scrollTo(0, element.offsetTop); } else { scroller.scrollTop = element.offsetTop; } } } componentDidMount() { this.tabItemClick('outline'); } render() { return (
{this.renderNavItems()}
); } } MarkdownViewerSidePanel.propTypes = propTypes; export default MarkdownViewerSidePanel;