Fix demo lint problems, react-component/react-component.github.io#8

react-component · Dec 1, 2015 · 19cf7f8 · 19cf7f8
1 parent fcb9907
commit 19cf7f8
Show file tree

Hide file tree

Showing 10 changed files with 191 additions and 185 deletions.
diff --git a/examples/animating-class.js b/examples/animating-class.js
@@ -8,40 +8,42 @@ const App = React.createClass({
     return {
       items: [{
         children: '依次进入1',
-        key: 1
+        key: 1,
       }, {
         children: '依次进入2',
-        key: 2
+        key: 2,
       }, {
         children: '依次进入3',
-        key: 3
+        key: 3,
       }, {
         children: '依次进入4',
-        key: 4
+        key: 4,
       }, {
         children: '依次进入5',
-        key: 5
+        key: 5,
       }, {
         children: '依次进入6',
-        key: 6
+        key: 6,
       }],
     };
   },
   removeAll() {
     this.setState({
-      items: []
+      items: [],
     });
   },
   render() {
-    return <div>
-      <QueueAnim>
-      {this.state.items.map((item) => <div key={item.key}>
-        {item.children}
-      </div>)}
-      </QueueAnim>
-      <button onClick={this.removeAll}>移出所有</button>
-    </div>;
-  }
+    return (
+      <div>
+        <QueueAnim>
+        {this.state.items.map((item) => <div key={item.key}>
+          {item.children}
+        </div>)}
+        </QueueAnim>
+        <button onClick={this.removeAll}>移出所有</button>
+      </div>
+    );
+  },
 });
 
 ReactDom.render(<App />, document.getElementById('__react-content'));
diff --git a/examples/dialog-style.js b/examples/dialog-style.js
@@ -8,7 +8,7 @@ import 'rc-dialog/assets/index.css';
 const App = React.createClass({
   getInitialState() {
     return {
-      show: false
+      show: false,
     };
   },
   onClick() {
@@ -18,37 +18,41 @@ const App = React.createClass({
   },
   onClose() {
     this.setState({
-      show: false
+      show: false,
     });
   },
   render() {
     let dialog;
     if (this.state.show) {
-      dialog = <Dialog visible={this.state.show}
-        animation="zoom"
-        maskAnimation="fade"
-        onClose={this.onClose}
-        style={{width: 600}}
-        title={<div> 第二个弹框</div>}>
-        <QueueAnim>
+      dialog = (
+        <Dialog visible={this.state.show}
+          animation="zoom"
+          maskAnimation="fade"
+          onClose={this.onClose}
+          style={{width: 600}}
+          title={<div> 第二个弹框</div>}>
+          <QueueAnim>
+            <div key="1">依次进入</div>
+            <div key="2">依次进入</div>
+            <div key="3">依次进入</div>
+            <div key="4">依次进入</div>
+          </QueueAnim>
+        </Dialog>
+      );
+    }
+    return (
+      <div>
+        <QueueAnim type={['right', 'left']} interval={[100, 200]} delay={[0, 1000]} duration={[500, 2000]} ease={['easeOutBack', 'easeInOutCirc']} leaveReverse>
           <div key="1">依次进入</div>
           <div key="2">依次进入</div>
           <div key="3">依次进入</div>
           <div key="4">依次进入</div>
+          {dialog}
         </QueueAnim>
-      </Dialog>
-    }
-    return <div>
-      <QueueAnim type={['right', 'left']} interval={[100, 200]} delay={[0, 1000]} duration={[500, 2000]} ease={['easeOutBack', 'easeInOutCirc']} leaveReverse={true}>
-        <div key="1">依次进入</div>
-        <div key="2">依次进入</div>
-        <div key="3">依次进入</div>
-        <div key="4">依次进入</div>
-        {dialog}
-      </QueueAnim>
-      <button onClick={this.onClick}>弹出框口</button>
-    </div>;
-  }
+        <button onClick={this.onClick}>弹出框口</button>
+      </div>
+    );
+  },
 });
 
 ReactDom.render(<App />, document.getElementById('__react-content'));
diff --git a/examples/dynamic.js b/examples/dynamic.js
@@ -8,43 +8,43 @@ const App = React.createClass({
     return {
       items: [{
         children: '依次进入1',
-        key: 1
+        key: 1,
       }, {
         children: '依次进入2',
-        key: 2
+        key: 2,
       }, {
         children: '依次进入3',
-        key: 3
+        key: 3,
       }, {
         children: '依次进入4',
-        key: 4
-      }]
+        key: 4,
+      }],
     };
   },
   add() {
-    let items = this.state.items;
+    const items = this.state.items;
     items.push({
       children: '新节点',
-      key: this.index++
+      key: this.index++,
     });
     this.setState({ items });
   },
   addTwo() {
-    let items = this.state.items;
+    const items = this.state.items;
     items.push({
       children: '新节点',
-      key: this.index++
+      key: this.index++,
     });
     items.push({
       children: '新节点',
-      key: this.index++
+      key: this.index++,
     });
     this.setState({ items });
   },
   remove(key, e) {
     e.preventDefault();
-    let items = this.state.items;
-    let target = items.filter(item => item.key === key);
+    const items = this.state.items;
+    const target = items.filter(item => item.key === key);
     let index;
     if (target && target[0]) {
       index = items.indexOf(target[0]);
@@ -56,31 +56,33 @@ const App = React.createClass({
   },
   removeAll() {
     this.setState({
-      items: []
+      items: [],
     });
   },
   removeAndAdd() {
-    let items = this.state.items;
+    const items = this.state.items;
     items.splice(items.length - 1, 1);
     items.push({
       children: '新节点' + Date.now(),
-      key: this.index++
+      key: this.index++,
     });
     this.setState({ items });
   },
   render() {
-    return <div>
-      <button onClick={this.add}>点击新增</button>
-      <button onClick={this.addTwo}>点击新增两个</button>
-      <button onClick={this.removeAll}>移出所有</button>
-      <button onClick={this.removeAndAdd}>移出与添加</button>
-      <QueueAnim>
-        {this.state.items.map((item) => <div key={item.key}>
-          {item.children} <a href="#" onClick={this.remove.bind(this, item.key)}>删除</a>
-        </div>)}
-      </QueueAnim>
-    </div>;
-  }
+    return (
+      <div>
+        <button onClick={this.add}>点击新增</button>
+        <button onClick={this.addTwo}>点击新增两个</button>
+        <button onClick={this.removeAll}>移出所有</button>
+        <button onClick={this.removeAndAdd}>移出与添加</button>
+        <QueueAnim>
+          {this.state.items.map((item) => <div key={item.key}>
+            {item.children} <a href="#" onClick={this.remove.bind(this, item.key)}>删除</a>
+          </div>)}
+        </QueueAnim>
+      </div>
+    );
+  },
 });
 
 ReactDom.render(<App />, document.getElementById('__react-content'));
diff --git a/examples/empty-children.js b/examples/empty-children.js
@@ -6,42 +6,42 @@ const QueueItem = React.createClass({
   render() {
     return (
       <QueueAnim>
-        <div key='1'>Item</div>
-        <div key='2'>Item</div>
-        <div key='3'>Item</div>
+        <div key="1">Item</div>
+        <div key="2">Item</div>
+        <div key="3">Item</div>
       </QueueAnim>
     );
-  }
+  },
 });
 
 const Item = React.createClass({
   render() {
     return (
       <div>Item</div>
     );
-  }
+  },
 });
 
 const Page1 = React.createClass({
   render() {
     return (
       <div>
         <QueueAnim interval={1500}>
-          <Item key='1' />
-          <Item key='2' />
-          <Item key='3' />
-          <Item key='4' />
+          <Item key="1" />
+          <Item key="2" />
+          <Item key="3" />
+          <Item key="4" />
         </QueueAnim>
         <hr />
         <QueueAnim interval={1500}>
-          <QueueItem key='1'>11</QueueItem>
-          <QueueItem key='2'>11</QueueItem>
-          <QueueItem key='3'>11</QueueItem>
-          <QueueItem key='4'>11</QueueItem>
+          <QueueItem key="1">11</QueueItem>
+          <QueueItem key="2">11</QueueItem>
+          <QueueItem key="3">11</QueueItem>
+          <QueueItem key="4">11</QueueItem>
         </QueueAnim>
       </div>
     );
-  }
+  },
 });
 
 ReactDom.render(<Page1 />, document.getElementById('__react-content'));
diff --git a/examples/enter-leave.js b/examples/enter-leave.js
@@ -7,40 +7,42 @@ const App = React.createClass({
     return {
       items: [{
         children: '依次进入1',
-        key: 1
+        key: 1,
       }, {
         children: '依次进入2',
-        key: 2
+        key: 2,
       }, {
         children: '依次进入3',
-        key: 3
+        key: 3,
       }, {
         children: '依次进入4',
-        key: 4
+        key: 4,
       }, {
         children: '依次进入5',
-        key: 5
+        key: 5,
       }, {
         children: '依次进入6',
-        key: 6
+        key: 6,
       }],
     };
   },
   removeAll() {
     this.setState({
-      items: []
+      items: [],
     });
   },
   render() {
-    return <div>
-      <QueueAnim type={['right', 'left']} interval={[100, 200]} delay={[0, 1000]} duration={[500, 2000]} ease={['easeOutBack','easeInOutCirc']} leaveReverse={true}>
-      {this.state.items.map((item) => <div key={item.key}>
-        {item.children}
-      </div>)}
-      </QueueAnim>
-      <button onClick={this.removeAll}>移出所有</button>
-    </div>;
-  }
+    return (
+      <div>
+        <QueueAnim type={['right', 'left']} interval={[100, 200]} delay={[0, 1000]} duration={[500, 2000]} ease={['easeOutBack', 'easeInOutCirc']} leaveReverse>
+        {this.state.items.map((item) => <div key={item.key}>
+          {item.children}
+        </div>)}
+        </QueueAnim>
+        <button onClick={this.removeAll}>移出所有</button>
+      </div>
+    );
+  },
 });
 
 ReactDom.render(<App />, document.getElementById('__react-content'));