66 lines
1.5 KiB
JavaScript
66 lines
1.5 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
|
|
import styles from '../DocumentEdit.scss';
|
|
import classNames from 'classnames/bind';
|
|
const cx = classNames.bind(styles);
|
|
|
|
type Props = {
|
|
children?: ?React.Element<any>,
|
|
onScroll?: Function,
|
|
scrollTop?: ?number,
|
|
fullWidth?: ?boolean,
|
|
};
|
|
|
|
class EditorPane extends React.Component {
|
|
props: Props;
|
|
|
|
componentWillReceiveProps = (nextProps: Props) => {
|
|
if (nextProps.scrollTop) {
|
|
this.scrollToPosition(nextProps.scrollTop);
|
|
}
|
|
};
|
|
|
|
componentDidMount = () => {
|
|
this.refs.pane.addEventListener('scroll', this.handleScroll);
|
|
};
|
|
|
|
componentWillUnmount = () => {
|
|
this.refs.pane.removeEventListener('scroll', this.handleScroll);
|
|
};
|
|
|
|
handleScroll = (e: Event) => {
|
|
setTimeout(() => {
|
|
const element = this.refs.pane;
|
|
const contentEl = this.refs.content;
|
|
this.props.onScroll &&
|
|
this.props.onScroll(element.scrollTop / contentEl.offsetHeight);
|
|
}, 50);
|
|
};
|
|
|
|
scrollToPosition = (percentage: number) => {
|
|
const contentEl = this.refs.content;
|
|
|
|
// Push to edges
|
|
if (percentage < 0.02) percentage = 0;
|
|
if (percentage > 0.99) percentage = 100;
|
|
|
|
this.refs.pane.scrollTop = percentage * contentEl.offsetHeight;
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<div
|
|
className={cx(styles.editorPane, { fullWidth: this.props.fullWidth })}
|
|
ref="pane"
|
|
>
|
|
<div ref="content" className={styles.paneContent}>
|
|
{this.props.children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default EditorPane;
|