feat: add <ExitSensor> and its story

src/ExitSensor/__story__/StoryExitSensorExample.tsx

@@ -0,0 +1,49 @@
+import {Component} from 'react';
+import {h} from '../../util';
+import {ExitSensor} from '..';
+
+const Rectangle = ({exiting}: any) => {
+  return (
+    <div style={{
+      width: 200,
+      height: 200,
+      background: 'tomato',
+      transition: 'all 2s',
+      opacity: exiting ? 0 : 1
+    }} />
+  );
+};
+
+const Circle = ({exiting}: any) => {
+  return (
+    <div style={{
+      width: 200,
+      height: 200,
+      background: 'tomato',
+      borderRadius: '100px',
+      transition: 'all 2s',
+      opacity: exiting ? 0 : 1
+    }} />
+  );
+};
+
+export class StoryExitSensorExample extends Component<any, any> {
+  state = {
+    shape: 'rectangle'
+  };
+
+  render () {
+    const shape = this.state.shape === 'rectangle' ?
+      <Rectangle key='rectangle' /> : <Circle key='circle' />;
+
+    return (
+      <div>
+        <ExitSensor time={2000}>
+          {shape}
+        </ExitSensor>
+        <button onClick={() => this.setState({shape: 'rectangle'})}>Rectangle</button>
+        <button onClick={() => this.setState({shape: 'circle'})}>Circle</button>
+      </div>
+    );
+  }
+}

src/ExitSensor/__story__/story.tsx

@@ -0,0 +1,10 @@
+import {Component, createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {ExitSensor} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+import {StoryExitSensorExample} from './StoryExitSensorExample';
+
+storiesOf('Sensors/ExitSensor', module)
+  .add('Example', () => <StoryExitSensorExample />);

src/ExitSensor/index.ts

@@ -0,0 +1,78 @@
+import {Component, cloneElement} from 'react';
+import {h} from '../util';
+import renderProp from '../util/renderProp';
+
+export interface IExitSensorProps {
+  children?: React.ReactElement<any>;
+  time?: number;
+}
+
+export interface IExitSensorState {
+
+}
+
+export class ExitSensor extends Component<IExitSensorProps, IExitSensorState> {
+  static defaultProps = {
+    time: 200
+  };
+
+  element: React.ReactElement<any>;
+  nextElement: React.ReactElement<any>;
+  exitInFlight: boolean = false;
+  exitFinish: boolean = false;
+  timeout;
+
+  state: IExitSensorState = {
+
+  };
+
+  componentWillUnmount () {
+    clearTimeout(this.timeout);
+  }
+
+  transition = () => {
+    this.exitFinish = true;
+    this.forceUpdate();
+  };
+
+  render () {
+    if (this.exitFinish) {
+      this.exitFinish = false;
+      this.exitInFlight = false;
+      this.element = this.nextElement;
+
+      return this.element;
+    }
+
+    const element = this.props.children;
+
+    if (this.exitInFlight) {
+      this.nextElement = element;
+
+      return this.element;
+    }
+
+    if (!this.element) {
+      this.element = element;
+
+      return element;
+    }
+
+    if (!element || (this.element.key !== element.key)) {
+      this.exitInFlight = true;
+      this.nextElement = element;
+
+      this.timeout = setTimeout(this.transition, this.props.time);
+
+      return cloneElement(this.element, {
+        exiting: true
+      });
+    }
+
+    if (this.exitInFlight) {
+      return this.element;
+    }
+
+    return element;
+  }
+}