Snow vor 8 Jahren
Ursprung
Commit
eae9105199
2 geänderte Dateien mit 42 neuen und 41 gelöschten Zeilen
  1. 7 10
      src/components/Nav/index.js
  2. 35 31
      src/components/Toggle/index.js

+ 7 - 10
src/components/Nav/index.js

@@ -1,15 +1,12 @@
 import React from "react";
 import NavLink from "./NavLink";
 
-const Nav = () => {
-  return (
-    <ul className="nav">
-      <li><NavLink to="/" exact={true}>Home</NavLink></li>
-      <li><NavLink to="/Toggle">Toggle</NavLink></li>
-      <li><NavLink to="/tabs">Tab View</NavLink></li>
-      <li><NavLink to="/tabss">Test 404</NavLink></li>
-    </ul>
-  );
-};
+const Nav = () =>
+  <ul className="nav">
+    <li><NavLink to="/" exact={true}>Home</NavLink></li>
+    <li><NavLink to="/Toggle">Toggle</NavLink></li>
+    <li><NavLink to="/tabs">Tab View</NavLink></li>
+    <li><NavLink to="/tabss">Test 404</NavLink></li>
+  </ul>;
 
 export default Nav;

+ 35 - 31
src/components/Toggle/index.js

@@ -1,37 +1,41 @@
-import React from 'react';
-import {Motion, spring} from 'react-motion';
-
-import './style.css'
+import React from "react";
+import { Motion, spring } from "react-motion";
 
+import "./style.css";
 
 export default class Toggle extends React.Component {
-	state = {
-		open:false,
-	}
+  state = {
+    open: false
+  };
 
-	handleClick = () => {
-		this.setState({open: !this.state.open});
-	}
+  handleClick = () => {
+    this.setState({ open: !this.state.open });
+  };
 
-	render() {
-		return (
-			<div>
-				<h2>Try the toggole which controls the status and animation. The block itself is also clickable.</h2>
-				<button onClick={this.handleClick}>
-				Toggle
-				</button>
-				<h2>Status: {this.state.open? "open" : "closed"}</h2>
-				<Motion style={{x: spring(this.state.open ? 200 : 0)}}>
-				{({x}) => 
-					<div className="toggle-bg">
-					<div className="toggle-block" onClick={this.handleClick} style={{
-						transform: `translate3d(${x}px, 0, 0)`,
-					}}>
-					</div>
-					</div>
-				}
-				</Motion>
-			</div>
-		)
-	}
+  render() {
+    return (
+      <div>
+        <h2>
+          Try the toggole which controls the status and animation. The block
+          itself is also clickable.
+        </h2>
+        <button onClick={this.handleClick}>
+          Toggle
+        </button>
+        <h2>Status: {this.state.open ? "open" : "closed"}</h2>
+        <Motion style={{ x: spring(this.state.open ? 200 : 0) }}>
+          {({ x }) =>
+            <div className="toggle-bg">
+              <div
+                className="toggle-block"
+                onClick={this.handleClick}
+                style={{
+                  transform: `translate3d(${x}px, 0, 0)`
+                }}
+              />
+            </div>}
+        </Motion>
+      </div>
+    );
+  }
 }