From b2debb05a1c6620093a14cec489d3174753f91d6 Mon Sep 17 00:00:00 2001 From: Caleb Date: Tue, 7 Aug 2018 09:50:41 -0600 Subject: [PATCH] refactor: use external version of react-scroll-sync (#1586) --- packages/netlify-cms-core/package.json | 2 +- .../src/components/Editor/EditorInterface.js | 2 +- .../Editor/EditorScrollSync/ScrollSync.js | 127 ------------------ .../Editor/EditorScrollSync/ScrollSyncPane.js | 50 ------- .../Editor/EditorScrollSync/index.js | 2 - yarn.lock | 6 +- 6 files changed, 5 insertions(+), 184 deletions(-) delete mode 100644 packages/netlify-cms-core/src/components/Editor/EditorScrollSync/ScrollSync.js delete mode 100644 packages/netlify-cms-core/src/components/Editor/EditorScrollSync/ScrollSyncPane.js delete mode 100644 packages/netlify-cms-core/src/components/Editor/EditorScrollSync/index.js diff --git a/packages/netlify-cms-core/package.json b/packages/netlify-cms-core/package.json index d345ae50..4ccd1e06 100644 --- a/packages/netlify-cms-core/package.json +++ b/packages/netlify-cms-core/package.json @@ -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", diff --git a/packages/netlify-cms-core/src/components/Editor/EditorInterface.js b/packages/netlify-cms-core/src/components/Editor/EditorInterface.js index 4b69652f..e24e2c66 100644 --- a/packages/netlify-cms-core/src/components/Editor/EditorInterface.js +++ b/packages/netlify-cms-core/src/components/Editor/EditorInterface.js @@ -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'; diff --git a/packages/netlify-cms-core/src/components/Editor/EditorScrollSync/ScrollSync.js b/packages/netlify-cms-core/src/components/Editor/EditorScrollSync/ScrollSync.js deleted file mode 100644 index 5fbffb17..00000000 --- a/packages/netlify-cms-core/src/components/Editor/EditorScrollSync/ScrollSync.js +++ /dev/null @@ -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) - } -} diff --git a/packages/netlify-cms-core/src/components/Editor/EditorScrollSync/ScrollSyncPane.js b/packages/netlify-cms-core/src/components/Editor/EditorScrollSync/ScrollSyncPane.js deleted file mode 100644 index 2b813beb..00000000 --- a/packages/netlify-cms-core/src/components/Editor/EditorScrollSync/ScrollSyncPane.js +++ /dev/null @@ -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 - } -} diff --git a/packages/netlify-cms-core/src/components/Editor/EditorScrollSync/index.js b/packages/netlify-cms-core/src/components/Editor/EditorScrollSync/index.js deleted file mode 100644 index 5a50c651..00000000 --- a/packages/netlify-cms-core/src/components/Editor/EditorScrollSync/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as ScrollSync } from './ScrollSync'; -export { default as ScrollSyncPane } from './ScrollSyncPane'; diff --git a/yarn.lock b/yarn.lock index e8eae771..6fabfe84 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"