refactor: use external version of react-scroll-sync (#1586)
This commit is contained in:
Caleb
Shawn Erquhart
parent
f7e7120db5
commit
b2debb05a1
@ -50,7 +50,7 @@
|
||||
"react-redux": "^4.4.0",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-router-redux": "^5.0.0-alpha.8",
|
||||
"react-scroll-sync": "^0.4.0",
|
||||
"react-scroll-sync": "^0.6.0",
|
||||
"react-sortable-hoc": "^0.6.8",
|
||||
"react-split-pane": "^0.1.82",
|
||||
"react-topbar-progress-indicator": "^2.0.0",
|
||||
|
||||
@ -4,7 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import styled, { css, injectGlobal } from 'react-emotion';
|
||||
import SplitPane from 'react-split-pane';
|
||||
import { colors, colorsRaw, components, transitions } from 'netlify-cms-ui-default';
|
||||
import { ScrollSync, ScrollSyncPane } from './EditorScrollSync';
|
||||
import { ScrollSync, ScrollSyncPane } from 'react-scroll-sync';
|
||||
import EditorControlPane from './EditorControlPane/EditorControlPane';
|
||||
import EditorPreviewPane from './EditorPreviewPane/EditorPreviewPane';
|
||||
import EditorToolbar from './EditorToolbar';
|
||||
|
||||
@ -1,127 +0,0 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
/**
|
||||
* ScrollSync provider component
|
||||
*
|
||||
*/
|
||||
|
||||
export default class ScrollSync extends Component {
|
||||
|
||||
static propTypes = {
|
||||
children: PropTypes.element.isRequired,
|
||||
proportional: PropTypes.bool,
|
||||
vertical: PropTypes.bool,
|
||||
horizontal: PropTypes.bool,
|
||||
enabled: PropTypes.bool
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
proportional: true,
|
||||
vertical: true,
|
||||
horizontal: true,
|
||||
enabled: true
|
||||
};
|
||||
|
||||
static childContextTypes = {
|
||||
registerPane: PropTypes.func,
|
||||
unregisterPane: PropTypes.func
|
||||
}
|
||||
|
||||
getChildContext() {
|
||||
return {
|
||||
registerPane: this.registerPane,
|
||||
unregisterPane: this.unregisterPane
|
||||
}
|
||||
}
|
||||
|
||||
panes = {}
|
||||
|
||||
registerPane = (node, group) => {
|
||||
if (!this.panes[group]) {
|
||||
this.panes[group] = []
|
||||
}
|
||||
|
||||
if (!this.findPane(node, group)) {
|
||||
this.addEvents(node, group)
|
||||
this.panes[group].push(node)
|
||||
}
|
||||
}
|
||||
|
||||
unregisterPane = (node, group) => {
|
||||
if (this.findPane(node, group)) {
|
||||
this.removeEvents(node)
|
||||
this.panes[group].splice(this.panes[group].indexOf(node), 1)
|
||||
}
|
||||
}
|
||||
|
||||
addEvents = (node, group) => {
|
||||
/* For some reason element.addEventListener doesnt work with document.body */
|
||||
node.onscroll = this.handlePaneScroll.bind(this, node, group)
|
||||
}
|
||||
|
||||
removeEvents = (node) => {
|
||||
/* For some reason element.removeEventListener doesnt work with document.body */
|
||||
node.onscroll = null
|
||||
}
|
||||
|
||||
findPane = (node, group) => {
|
||||
if (!this.panes[group]) {
|
||||
return false
|
||||
}
|
||||
|
||||
return this.panes[group].find(pane => pane === node)
|
||||
}
|
||||
|
||||
handlePaneScroll = (node, group) => {
|
||||
if (!this.props.enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
this.syncScrollPositions(node, group)
|
||||
})
|
||||
}
|
||||
|
||||
syncScrollPositions = (scrolledPane, group) => {
|
||||
const {
|
||||
scrollTop,
|
||||
scrollHeight,
|
||||
clientHeight,
|
||||
scrollLeft,
|
||||
scrollWidth,
|
||||
clientWidth
|
||||
} = scrolledPane
|
||||
|
||||
const scrollTopOffset = scrollHeight - clientHeight
|
||||
const scrollLeftOffset = scrollWidth - clientWidth
|
||||
|
||||
const { proportional, vertical, horizontal } = this.props
|
||||
|
||||
this.panes[group].forEach((pane) => {
|
||||
/* For all panes beside the currently scrolling one */
|
||||
if (scrolledPane !== pane) {
|
||||
/* Remove event listeners from the node that we'll manipulate */
|
||||
this.removeEvents(pane, group)
|
||||
/* Calculate the actual pane height */
|
||||
const paneHeight = pane.scrollHeight - clientHeight
|
||||
const paneWidth = pane.scrollWidth - clientWidth
|
||||
/* Adjust the scrollTop position of it accordingly */
|
||||
if (vertical && scrollTopOffset > 0) {
|
||||
pane.scrollTop = proportional ? (paneHeight * scrollTop) / scrollTopOffset : scrollTop
|
||||
}
|
||||
if (horizontal && scrollLeftOffset > 0) {
|
||||
pane.scrollLeft = proportional ? (paneWidth * scrollLeft) / scrollLeftOffset : scrollLeft
|
||||
}
|
||||
/* Re-attach event listeners after we're done scrolling */
|
||||
window.requestAnimationFrame(() => {
|
||||
this.addEvents(pane, group)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
return React.Children.only(this.props.children)
|
||||
}
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
import { Component } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
/**
|
||||
* ScrollSyncPane Component
|
||||
*
|
||||
* Wrap your content in it to keep its scroll position in sync with other panes
|
||||
*
|
||||
* @example ./example.md
|
||||
*/
|
||||
|
||||
|
||||
export default class ScrollSyncPane extends Component {
|
||||
|
||||
static propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
attachTo: PropTypes.object,
|
||||
group: PropTypes.string
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
group: 'default'
|
||||
}
|
||||
|
||||
static contextTypes = {
|
||||
registerPane: PropTypes.func.isRequired,
|
||||
unregisterPane: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.node = this.props.attachTo || ReactDOM.findDOMNode(this) // eslint-disable-line react/no-find-dom-node
|
||||
this.context.registerPane(this.node, this.props.group)
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (prevProps.group !== this.props.group) {
|
||||
this.context.unregisterPane(this.node, prevProps.group)
|
||||
this.context.registerPane(this.node, this.props.group)
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.context.unregisterPane(this.node, this.props.group)
|
||||
}
|
||||
|
||||
render() {
|
||||
return this.props.children
|
||||
}
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
export { default as ScrollSync } from './ScrollSync';
|
||||
export { default as ScrollSyncPane } from './ScrollSyncPane';
|
||||
@ -7083,9 +7083,9 @@ react-router@^4.2.0, react-router@^4.3.1:
|
||||
prop-types "^15.6.1"
|
||||
warning "^4.0.1"
|
||||
|
||||
react-scroll-sync@^0.4.0:
|
||||
version "0.4.1"
|
||||
resolved "https://registry.yarnpkg.com/react-scroll-sync/-/react-scroll-sync-0.4.1.tgz#f2749f90c7a10c2acb9ce83a2a998cbb88770e2c"
|
||||
react-scroll-sync@^0.6.0:
|
||||
version "0.6.0"
|
||||
resolved "https://registry.yarnpkg.com/react-scroll-sync/-/react-scroll-sync-0.6.0.tgz#c87eba2cdd55ae35874277d74b034419d73df59a"
|
||||
|
||||
react-sortable-hoc@^0.6.8:
|
||||
version "0.6.8"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user