From e2583ec3bb101201a5a7b9a790720878e3644642 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Mon, 6 Jan 2020 20:17:18 +0800
Subject: [PATCH] Revert "feat: Add keepAlign support (#36)"

This reverts commit 4f6ac651d4b25a6894af49c21392d1bce327949e.
---
 examples/position.js  | 79 -------------------------------------------
 src/Align.tsx         | 53 +++--------------------------
 tests/element.test.js | 28 ++-------------
 3 files changed, 7 insertions(+), 153 deletions(-)
 delete mode 100644 examples/position.js

diff --git a/examples/position.js b/examples/position.js
deleted file mode 100644
index fb170a3..0000000
--- a/examples/position.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import React, { Component } from 'react';
-import Align from '../src';
-
-const align = {
-  points: ['cc', 'cc'],
-};
-
-class Demo extends Component {
-  state = {
-    left: 0,
-    top: 0,
-  };
-
-  eleRef = React.createRef();
-
-  render() {
-    const { left, top } = this.state;
-
-    return (
-      <div style={{ marginBottom: 170 }}>
-        <div
-          style={{
-            margin: 20,
-            border: '1px solid red',
-            padding: '100px 0',
-            textAlign: 'center',
-            position: 'relative',
-          }}
-          onClick={this.onClick}
-        >
-          <div
-            ref={this.eleRef}
-            style={{
-              width: 10,
-              height: 10,
-              background: 'red',
-              position: 'absolute',
-              left,
-              top,
-            }}
-          />
-        </div>
-
-        <Align
-          ref={this.alignRef}
-          target={() => this.eleRef.current}
-          align={align}
-          keepingAlign
-        >
-          <div
-            style={{
-              position: 'absolute',
-              width: 100,
-              height: 100,
-              background: 'rgba(0, 255, 0, 0.5)',
-              pointerEvents: 'none',
-            }}
-          >
-            Align
-          </div>
-        </Align>
-
-        <button
-          type="button"
-          onClick={() => {
-            this.setState({
-              left: Math.random() * 500,
-              top: Math.random() * 200,
-            });
-          }}
-        >
-          Random Position
-        </button>
-      </div>
-    );
-  }
-}
-
-export default Demo;
diff --git a/src/Align.tsx b/src/Align.tsx
index 7433ffc..ce6b1ac 100644
--- a/src/Align.tsx
+++ b/src/Align.tsx
@@ -22,8 +22,6 @@ export interface AlignProps {
   monitorWindowResize?: boolean;
   disabled?: boolean;
   children: React.ReactElement;
-  /** Always trigger align with each render */
-  keepAlign?: boolean;
 }
 
 interface MonitorRef {
@@ -45,27 +43,11 @@ function getPoint(point: TargetType) {
   return point;
 }
 
-interface InternalTestProps {
-  INTERNAL_TRIGGER_ALIGN?: Function;
-}
-
 const Align: React.RefForwardingComponent<RefAlign, AlignProps> = (
-  {
-    children,
-    disabled,
-    target,
-    align,
-    onAlign,
-    monitorWindowResize,
-    monitorBufferTime = 0,
-    keepAlign,
-    ...restProps
-  },
+  { children, disabled, target, align, onAlign, monitorWindowResize, monitorBufferTime = 0 },
   ref,
 ) => {
-  const cacheRef = React.useRef<{ element?: HTMLElement; point?: TargetPoint }>(
-    {},
-  );
+  const cacheRef = React.useRef<{ element?: HTMLElement; point?: TargetPoint }>({});
   const nodeRef = React.useRef();
   let childNode = React.Children.only(children);
 
@@ -81,17 +63,7 @@ const Align: React.RefForwardingComponent<RefAlign, AlignProps> = (
   forceAlignPropsRef.current.onAlign = onAlign;
 
   const [forceAlign, cancelForceAlign] = useBuffer(() => {
-    if (
-      process.env.NODE_ENV !== 'production' &&
-      (restProps as InternalTestProps).INTERNAL_TRIGGER_ALIGN
-    ) {
-      (restProps as InternalTestProps).INTERNAL_TRIGGER_ALIGN();
-    }
-
-    const {
-      disabled: latestDisabled,
-      target: latestTarget,
-    } = forceAlignPropsRef.current;
+    const { disabled: latestDisabled, target: latestTarget } = forceAlignPropsRef.current;
     if (!latestDisabled && latestTarget) {
       const source = nodeRef.current;
 
@@ -140,16 +112,10 @@ const Align: React.RefForwardingComponent<RefAlign, AlignProps> = (
     if (nodeRef.current !== sourceResizeMonitor.current.element) {
       sourceResizeMonitor.current.cancel();
       sourceResizeMonitor.current.element = nodeRef.current;
-      sourceResizeMonitor.current.cancel = monitorResize(
-        nodeRef.current,
-        forceAlign,
-      );
+      sourceResizeMonitor.current.cancel = monitorResize(nodeRef.current, forceAlign);
     }
 
-    if (
-      cacheRef.current.element !== element ||
-      !isSamePoint(cacheRef.current.point, point)
-    ) {
+    if (cacheRef.current.element !== element || !isSamePoint(cacheRef.current.point, point)) {
       forceAlign();
 
       // Add resize observer
@@ -170,15 +136,6 @@ const Align: React.RefForwardingComponent<RefAlign, AlignProps> = (
     }
   }, [disabled]);
 
-  /**
-   * [Legacy] Should keep re-algin since we don't know if target position changed.
-   */
-  React.useEffect(() => {
-    if (keepAlign && !disabled) {
-      forceAlign(true);
-    }
-  });
-
   // Listen for window resize
   const winResizeRef = React.useRef<{ remove: Function }>(null);
   React.useEffect(() => {
diff --git a/tests/element.test.js b/tests/element.test.js
index b747632..42d2344 100644
--- a/tests/element.test.js
+++ b/tests/element.test.js
@@ -26,10 +26,7 @@ describe('element align', () => {
     render() {
       return (
         <div style={{ paddingTop: 100 }}>
-          <div
-            ref={this.targetRef}
-            style={{ display: 'inline-block', width: 50, height: 50 }}
-          >
+          <div ref={this.targetRef} style={{ display: 'inline-block', width: 50, height: 50 }}>
             target
           </div>
           <Align target={this.getTarget} align={align} {...this.props}>
@@ -76,33 +73,12 @@ describe('element align', () => {
   it('disabled should trigger align', () => {
     const onAlign = jest.fn();
 
-    const wrapper = mount(
-      <Test monitorWindowResize onAlign={onAlign} disabled />,
-    );
+    const wrapper = mount(<Test monitorWindowResize onAlign={onAlign} disabled />);
     expect(onAlign).not.toHaveBeenCalled();
 
     wrapper.setProps({ disabled: false });
     jest.runAllTimers();
     expect(onAlign).toHaveBeenCalled();
   });
-
-  it('keepAlign', () => {
-    const triggerAlign = jest.fn();
-
-    class TestAlign extends React.Component {
-      state = {};
-
-      render = () => <Test INTERNAL_TRIGGER_ALIGN={triggerAlign} keepAlign />;
-    }
-
-    const wrapper = mount(<TestAlign />);
-    const times = triggerAlign.mock.calls.length;
-
-    for (let i = 0; i < 10; i += 1) {
-      wrapper.instance().forceUpdate();
-    }
-
-    expect(triggerAlign.mock.calls.length > times).toBeTruthy();
-  });
 });
 /* eslint-enable */