Use plain es6 classes in examples

Author: cvle

docs/src/components/demo.tsx

@@ -44,7 +44,7 @@ const enhance = assemble<DemoInnerProps, DemoProps>(
 );
 
 const DemoInner: StatelessComponent<DemoInnerProps> =
-  ({title, source, component: Component, onClick, active}) => (
+  ({title, source, component: Example, onClick, active}) => (
     <section className={classes.root}>
       <div className={classes.bar}>
         <h3>{title}</h3>
@@ -57,7 +57,7 @@ const DemoInner: StatelessComponent<DemoInnerProps> =
         </SyntaxHighlighter>
       </CSSTransition>
       <div className={classes.main}>
-        <Component />
+        <Example />
       </div>
     </section>
   );

docs/src/examples/appearExample.tsx renamed to docs/src/examples/appearExample.jsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { CSSTransition, transit } from "react-css-transition";
-import { assemble, withState, withHandlers } from "reassemble";
 
 import { prefix } from "../theme";
 import { Button } from "../components";
@@ -29,22 +28,22 @@ const styles = prefix({
   },
 });
 
-// This example uses reassemble to handle internal state.
-// See: https://github.com/wikiwi/reassemble.
-const enhance = assemble(
-  withState("count", "setCount", 1),
-  withHandlers({
-    onClickMount: ({count, setCount}) => () => setCount(count < 6 ? count + 1 : 6),
-    onClickUnmount: ({count, setCount}) => () => setCount(count > 0 ? count - 1 : 0),
-  }),
-);
+class AppearExample extends React.Component {
 
-export const AppearExample = enhance(
-  ({active, onClickMount, onClickUnmount, count}) => (
+  constructor(props) {
+    super(props);
+    this.state = {mounted: 1};
+  }
+
+  onClickMount = () => this.setState({mounted: this.state.mounted < 6 ? this.state.mounted + 1 : 6});
+  onClickUnmount = () => this.setState({mounted: this.state.mounted > 0 ? this.state.mounted - 1 : 0});
+
+  render() {
+    return (
     <div>
       <div style={prefix({ display: "flex", marginBottom: "32px", height: "20px" })}>
         {
-          Array(count).fill("").map((_, idx) =>
+          Array(this.state.mounted).fill("").map((_, idx) =>
             <CSSTransition
               {...styles}
               key={idx}
@@ -54,8 +53,11 @@ export const AppearExample = enhance(
           )
         }
       </div>
-      <Button style={{ marginRight: "16px" }} onClick={onClickMount}>Mount</Button>
-      <Button onClick={onClickUnmount}>Unmount</Button>
-    </div >
-  ),
-);
+      <Button style={{ marginRight: "16px" }} onClick={this.onClickMount}>Mount</Button>
+      <Button onClick={this.onClickUnmount}>Unmount</Button>
+    </div>
+    );
+  }
+}
+
+export default AppearExample;

docs/src/examples/classExample.tsx renamed to docs/src/examples/classExample.jsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { CSSTransition } from "react-css-transition";
-import { assemble, withState, withHandlers } from "reassemble";
 
 import { Button } from "../components";
 
@@ -33,22 +32,26 @@ import { Button } from "../components";
 
 import classes from "./classExample.css";
 
-// This example uses reassemble to handle internal state.
-// See: https://github.com/wikiwi/reassemble.
-const enhance = assemble(
-  withState("active", "setActive", false),
-  withHandlers({
-    onClick: ({active, setActive}) => () => setActive(!active),
-  }),
-);
-
-export const ClassExample = enhance(
-  ({active, onClick}) => (
-    <div>
-      <CSSTransition
-        {...classes}
-        active={active}
-        />
-      <Button onClick={onClick}>Trigger</Button>
-    </div>
-  ));
+class ClassExample extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {active: false};
+  }
+
+  onClick = () => this.setState({active: !this.state.active});
+
+  render() {
+    return (
+      <div>
+        <CSSTransition
+          {...classes}
+          active={this.state.active}
+          />
+        <Button onClick={this.onClick}>Trigger</Button>
+      </div>
+    );
+  }
+}
+
+export default ClassExample;

docs/src/examples/completionExample.jsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { CSSTransition, transit } from "react-css-transition";
+
+import { prefix } from "../theme";
+import { Button } from "../components";
+
+const styles = prefix({
+  style: {
+    boxShadow: "1px 1px 5px 0px rgba(0,0,0,0.25)",
+    borderRadius: "50%",
+    background: "#dc7d16",
+    height: "20px",
+    width: "20px",
+  },
+  defaultStyle: {
+    transform: "translate(0, 0)",
+  },
+  enterStyle: {
+    transform: transit("translate(175px, 0)", 500, "ease-in-out"),
+  },
+  leaveStyle: {
+    transform: transit("translate(0, 0)", 500, "ease-in-out"),
+  },
+  activeStyle: {
+    transform: "translate(175px, 0)",
+  },
+});
+
+class InlineExample extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {active: false, count: 0};
+  }
+
+  onClick = () => this.setState({active: !this.state.active});
+  onTransitionComplete = () => this.setState({count: this.state.count + 1});
+
+  render() {
+    return (
+      <div>
+        <CSSTransition
+          {...styles}
+          onTransitionComplete={this.onTransitionComplete}
+          active={this.state.active}
+          />
+        <p><code>onTransitionComplete calls: {this.state.count}</code></p>
+        <Button onClick={this.onClick}>Trigger</Button>
+      </div>
+    );
+  }
+}
+
+export default InlineExample;

docs/src/examples/completionExample.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { CSSTransition, CSSTransitionGroup, transit } from "react-css-transition";
+
+import { prefix } from "../theme";
+import { Button } from "../components";
+
+const circleStyle = prefix({
+  display: "inline-box",
+  boxShadow: "1px 1px 5px 0px rgba(0,0,0,0.25)",
+  borderRadius: "50%",
+  background: "#dc7d16",
+  height: "20px",
+  width: "20px",
+  marginRight: "8px",
+});
+
+const Circle = () => <div style={circleStyle} />;
+
+const fadeInOutStyles = prefix({
+  defaultStyle: {
+    opacity: 0,
+  },
+  enterStyle: {
+    opacity: transit(1.0, 500, "ease-in-out"),
+  },
+  leaveStyle: {
+    opacity: transit(0, 500, "ease-in-out"),
+  },
+  activeStyle: {
+    opacity: 1,
+  },
+});
+
+const FadeInOut = (props) => (
+  <CSSTransition
+    {...props}
+    {...fadeInOutStyles}
+    />
+);
+
+export const FadeInOutGroup = (props) => (
+  <CSSTransitionGroup {...props}>
+    {React.Children.map(props.children, (child) => <FadeInOut>{child}</FadeInOut>)}
+  </CSSTransitionGroup >
+);
+
+class GroupExample extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {mounted: 1};
+  }
+
+  onClickMount = () => this.setState({mounted: this.state.mounted < 6 ? this.state.mounted + 1 : 6});
+  onClickUnmount = () => this.setState({mounted: this.state.mounted > 0 ? this.state.mounted - 1 : 0});
+
+  render() {
+    return (
+    <div>
+      <FadeInOutGroup
+        style={prefix({ display: "flex", marginBottom: "32px", height: "20px" })}
+        >
+        {
+          Array(this.state.mounted).fill(null).map((_, idx) =>
+            <Circle key={idx} />,
+          )
+        }
+      </FadeInOutGroup>
+      <Button style={{ marginRight: "16px" }} onClick={this.onClickMount}>Mount</Button>
+      <Button onClick={this.onClickUnmount}>Unmount</Button>
+    </div >
+    );
+  }
+}
+
+export default GroupExample;