chore: add stories for mountOnEnter and unmountOnExit

Author: koba04

stories/CSSTransition.js

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+
+import StoryFixture from './StoryFixture';
+import Fade from './transitions/CSSFade';
+
+function ToggleFixture({ defaultIn, description, children }) {
+  const [show, setShow] = useState(defaultIn || false);
+  console.log(show);
+
+  return (
+    <StoryFixture description={description}>
+      <div style={{ marginBottom: 10 }}>
+        <button
+          onClick={() => {
+            setShow(!show);
+          }}
+        >
+          Toggle
+        </button>
+      </div>
+      {React.cloneElement(children, { in: show })}
+    </StoryFixture>
+  );
+}
+
+storiesOf('CSSTransition', module)
+  .add('Fade', () => (
+    <ToggleFixture>
+      <Fade>asaghasg asgasg</Fade>
+    </ToggleFixture>
+  ))
+  .add('Fade with appear', () => (
+    <ToggleFixture defaultIn>
+      <Fade appear>asaghasg asgasg</Fade>
+    </ToggleFixture>
+  ))
+  .add('Fade with mountOnEnter', () => {
+    return (
+      <ToggleFixture>
+        <Fade mountOnEnter>Fade with mountOnEnter</Fade>
+      </ToggleFixture>
+    );
+  })
+  .add('Fade with unmountOnExit', () => {
+    return (
+      <ToggleFixture>
+        <Fade unmountOnExit>Fade with unmountOnExit</Fade>
+      </ToggleFixture>
+    );
+  })

stories/NestedTransition.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import StoryFixture from './StoryFixture';
-import Fade from './transitions/Fade';
+import Fade from './transitions/CSSFadeForTransitionGroup';
 import Scale from './transitions/Scale';
 
 function FadeAndScale(props) {

stories/Transition.js

@@ -59,5 +59,19 @@ storiesOf('Transition', module)
       <ToggleFixture>
         <FadeInnerRef innerRef={nodeRef}>Fade using innerRef</FadeInnerRef>
       </ToggleFixture>
+    )
+  })
+  .add('Fade with mountOnEnter', () => {
+    return (
+      <ToggleFixture>
+        <Fade mountOnEnter>Fade with mountOnEnter</Fade>
+      </ToggleFixture>
+    );
+  })
+  .add('Fade with unmountOnExit', () => {
+    return (
+      <ToggleFixture>
+        <Fade unmountOnExit>Fade with unmountOnExit</Fade>
+      </ToggleFixture>
     );
-  });
+  })

stories/TransitionGroup.js

@@ -6,7 +6,7 @@ import TransitionGroup from '../src/TransitionGroup';
 import CSSTransitionGroupFixture from './CSSTransitionGroupFixture';
 import NestedTransition from './NestedTransition';
 import StoryFixture from './StoryFixture';
-import Fade, { FADE_TIMEOUT } from './transitions/Fade';
+import Fade, { FADE_TIMEOUT } from './transitions/CSSFadeForTransitionGroup';
 
 storiesOf('Css Transition Group', module)
   .add('Animates on all', () => (

stories/index.js

@@ -1,3 +1,4 @@
 import './Transition';
+import './CSSTransition';
 import './TransitionGroup';
 import './ReplaceTransition';

stories/transitions/Bootstrap.js

@@ -12,7 +12,7 @@ import Transition, {
 const styles = css`
   .fade {
     opacity: 0;
-    transition: opacity 0.15s linear;
+    transition: opacity 0.5s linear;
   }
   .fade.in {
     opacity: 1;
@@ -47,7 +47,7 @@ export function Fade(props) {
       {...props}
       nodeRef={nodeRef}
       className={styles.fade}
-      timeout={150}
+      timeout={500}
     >
       {(status) => (
         <div

stories/transitions/CSSFade.js

@@ -0,0 +1,51 @@
+import { css } from 'astroturf';
+import React, { useRef } from 'react';
+
+import CSSTransition from '../../src/CSSTransition';
+
+export const FADE_TIMEOUT = 1000;
+
+const styles = css`
+  .default {
+    opacity: 0;
+  }
+  .enter-done {
+    opacity: 1;
+  }
+
+  .enter,
+  .appear {
+    opacity: 0.01;
+  }
+
+  .enter.enter-active,
+  .appear.appear-active {
+    opacity: 1;
+    transition: opacity ${FADE_TIMEOUT}ms ease-in;
+  }
+
+  .exit {
+    opacity: 1;
+  }
+  .exit.exit-active {
+    opacity: 0.01;
+    transition: opacity ${0.8 * FADE_TIMEOUT}ms ease-in;
+  }
+`;
+
+const defaultProps = {
+  in: false,
+  timeout: FADE_TIMEOUT,
+};
+function Fade(props) {
+  const nodeRef = useRef();
+  return (
+    <CSSTransition {...props} classNames={styles} nodeRef={nodeRef}>
+      <div ref={nodeRef} className={styles.default}>{props.children}</div>
+    </CSSTransition>
+  );
+}
+
+Fade.defaultProps = defaultProps;
+
+export default Fade;