Move target as DOM element

Author: compulim

packages/component/src/DOMSetter.js

@@ -8,39 +8,37 @@ export default class ScrollSpy extends React.Component {
   }
 
   componentDidMount() {
-    const { current } = this.props.target || {};
+    const { target } = this.props;
 
-    if (current) {
-      current.addEventListener(this.props.name, this.handleEvent, { passive: true });
-      this.handleEvent(current);
+    if (target) {
+      target.addEventListener(this.props.name, this.handleEvent, { passive: true });
+      this.handleEvent(target);
     }
   }
 
   componentDidUpdate(prevProps) {
     const { name: prevName, target: prevTarget } = prevProps;
-    const { current: prevCurrent } = prevTarget || {};
     const { name, target } = this.props;
-    const { current } = target || {};
 
     if (
-      current !== prevCurrent
+      target !== prevTarget
       || name !== prevName
     ) {
-      if (prevCurrent) {
-        prevCurrent.removeEventListener(prevName, this.handleEvent);
+      if (prevTarget) {
+        prevTarget.removeEventListener(prevName, this.handleEvent);
       }
 
-      if (current) {
-        current.addEventListener(name, this.handleEvent, { passive: true });
-        this.handleEvent(current);
+      if (target) {
+        target.addEventListener(name, this.handleEvent, { passive: true });
+        this.handleEvent(target);
       }
     }
   }
 
   componentWillUnmount() {
-    const { current } = this.props.target || {};
+    const { target } = this.props;
 
-    current && current.removeEventListener(this.props.name, this.handleEvent);
+    target && target.removeEventListener(this.props.name, this.handleEvent);
   }
 
   handleEvent() {

packages/component/src/EventSpy.js

@@ -50,13 +50,13 @@ export default class ScrollToBottomComposer extends React.Component {
         <EventSpy
           name="scroll"
           onEvent={ this.handleScroll }
-          target={ this.state.target }
+          target={ this.state.target && this.state.target.current }
         />
         { typeof this.state.scrollTop === 'number' &&
           <SpineTo
             name="scrollTop"
             onEnd={ this.handleScrollEnd }
-            target={ this.state.target }
+            target={ this.state.target && this.state.target.current }
             value={ this.state.scrollTop }
           />
         }

packages/component/src/ScrollToBottom/Composer.js

@@ -32,62 +32,59 @@ export default class ScrollTo extends React.Component {
 
   componentDidMount() {
     const { name, target } = this.props;
-    const { current } = target || {};
 
-    if (current) {
-      this.addEventListeners(current);
-      this.animate(name, current[name], this.props.value, 1);
+    if (target) {
+      this.addEventListeners(target);
+      this.animate(name, target[name], this.props.value, 1);
     }
   }
 
   componentDidUpdate(prevProps) {
     const { target: prevTarget } = prevProps;
     const { target } = this.props;
-    const { current: prevCurrent } = prevTarget || {};
-    const { current } = target || {};
     const scrollChanged = prevProps.value !== this.props.value;
-    const targetChanged = prevCurrent !== current;
+    const targetChanged = prevTarget !== target;
 
     if (targetChanged) {
-      this.removeEventListeners(prevCurrent);
-      this.addEventListeners(current);
+      this.removeEventListeners(prevTarget);
+      this.addEventListeners(target);
     }
 
-    if ((scrollChanged || targetChanged) && current) {
+    if ((scrollChanged || targetChanged) && target) {
       const { name } = this.props;
 
-      this.animate(name, current[name], this.props.value, 1);
+      this.animate(name, target[name], this.props.value, 1);
     }
   }
 
   componentWillUnmount() {
-    this.removeEventListeners(this.props.target && this.props.target.current);
+    this.removeEventListeners(this.props.target);
     cancelAnimationFrame(this.animator);
   }
 
-  addEventListeners(current) {
-    current && current.addEventListener('pointerdown', this.handleCancelAnimation, { passive: true });
+  addEventListeners(target) {
+    target && target.addEventListener('pointerdown', this.handleCancelAnimation, { passive: true });
   }
 
-  removeEventListeners(current) {
-    current && current.removeEventListener('pointerdown', this.handleCancelAnimation);
+  removeEventListeners(target) {
+    target && target.removeEventListener('pointerdown', this.handleCancelAnimation);
   }
 
   animate(name, from, to, index, start = Date.now()) {
     if (typeof to === 'number') {
       cancelAnimationFrame(this.animator);
 
       this.animator = requestAnimationFrame(() => {
-        const { current } = this.props.target || {};
+        const { target } = this.props;
 
-        if (current) {
+        if (target) {
           let nextValue = step(from, to, squareStepper, (Date.now() - start) / 5);
 
           if (Math.abs(to - nextValue) < .5) {
             nextValue = to;
           }
 
-          current[name] = nextValue;
+          target[name] = nextValue;
 
           if (to === nextValue) {
             this.props.onEnd && this.props.onEnd(true);