From 7bc34cd185c2308151bddd52b9a1bd911a26bed9 Mon Sep 17 00:00:00 2001
From: eternalsky <wsj7552715@hotmail.com>
Date: Thu, 5 Jul 2018 10:28:28 +0800
Subject: [PATCH] fix issue #227

---
 demo/Slide/SlideDemo.jsx | 71 ++++++++++++++++++++++++----------------
 demo/Table/TableDemo.jsx | 32 ++++++++++++++++--
 src/Slide/Slide.jsx      |  8 ++---
 3 files changed, 76 insertions(+), 35 deletions(-)

diff --git a/demo/Slide/SlideDemo.jsx b/demo/Slide/SlideDemo.jsx
index 9a02f38b..df9a567e 100644
--- a/demo/Slide/SlideDemo.jsx
+++ b/demo/Slide/SlideDemo.jsx
@@ -15,23 +15,27 @@ class Demo extends React.Component {
     super(props);
     this.state = {
       freeCount: 0,
-      slideList: [{
-        img: 'https://img.alicdn.com/tfs/TB147.cRXXXXXaiXpXXXXXXXXXX-640-387.jpg',
-        url: '',
-        title: 'item0',
-      }, {
-        img: 'https://img.alicdn.com/tfs/TB1WpnPRXXXXXa0aXXXXXXXXXXX-640-340.jpg',
-        url: '',
-        title: 'item1',
-      }, {
-        img: 'https://img.alicdn.com/tfs/TB1KIH2RXXXXXc8XFXXXXXXXXXX-640-340.jpg',
-        url: '',
-        title: 'item2',
-      }, {
-        img: 'https://img.alicdn.com/tfs/TB1gXTqRXXXXXXfaVXXXXXXXXXX-640-340.jpg',
-        url: '',
-        title: 'item3',
-      }],
+      slideList: [
+        {
+          img: 'https://img.alicdn.com/tfs/TB147.cRXXXXXaiXpXXXXXXXXXX-640-387.jpg',
+          url: '',
+          title: 'item0',
+        },
+        // {
+        //   img: 'https://img.alicdn.com/tfs/TB1WpnPRXXXXXa0aXXXXXXXXXXX-640-340.jpg',
+        //   url: '',
+        //   title: 'item1',
+        // },
+        //  {
+        //   img: 'https://img.alicdn.com/tfs/TB1KIH2RXXXXXc8XFXXXXXXXXXX-640-340.jpg',
+        //   url: '',
+        //   title: 'item2',
+        // }, {
+        //   img: 'https://img.alicdn.com/tfs/TB1gXTqRXXXXXXfaVXXXXXXXXXX-640-340.jpg',
+        //   url: '',
+        //   title: 'item3',
+        // },
+      ],
       ajaxList: [],
       slideList2: [
         {
@@ -104,21 +108,23 @@ class Demo extends React.Component {
     console.log(this.state.dynamicList);
     return (<div>
 
-      <h3 className="t-P10">动态添加Slide.Item</h3>
+      {/* <h3 className="t-P10">动态添加Slide.Item</h3>
       <Slide
         loop={false}
         active={this.state.dynamicListActive}
-        height={'2rem'}
+        height="2rem"
         onSlideEnd={(option) => {
-          let dynamicList = this.state.dynamicList;
+          let { dynamicList } = this.state;
           if (option.index === 2) {
-            dynamicList = dynamicList.slice(1, dynamicList.length).concat({ name: dynamicList[dynamicList.length - 1].name + 1 });
+            dynamicList = dynamicList.slice(1, dynamicList.length)
+              .concat({ name: dynamicList[dynamicList.length - 1].name + 1 });
             this.setState({
               dynamicListActive: 1,
               dynamicList,
             });
           } else if (option.index === 0 && dynamicList[option.index].name > 1) {
-            dynamicList = [{ name: dynamicList[0].name - 1 }].concat(dynamicList.slice(0, dynamicList.length - 1));
+            dynamicList = [{ name: dynamicList[0].name - 1 }]
+              .concat(dynamicList.slice(0, dynamicList.length - 1));
             this.setState({
               dynamicListActive: 1,
               dynamicList,
@@ -170,27 +176,31 @@ class Demo extends React.Component {
             <div className="t-FS20 t-FCf">数数玩：{t.state.freeCount}</div>
           </div>
         </Slide.Item>
-      </Slide>
+      </Slide> */}
 
       <h3 className="t-P10">有title</h3>
       <Slide
         showTitle
         showNav
         auto
-        active={2}
+        // active={2}
         onSlideClick={this._onSlideClick.bind(this)}
         onMount={this.onMount.bind(this)}
         onSlideEnd={this.onSlideEnd.bind(this)}
       >
         {
-          t.state.slideList.map((item, index) => (<Slide.Item key={index} className="t-image-slide-item" title="测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试" style={{
+          t.state.slideList.map((item, index) => (<Slide.Item
+            key={index}
+            className="t-image-slide-item"
+            title="测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试"
+            style={{
             backgroundImage: `url(${item.img})`,
           }}
           />))
         }
       </Slide>
 
-      <h3 className="t-P10">无title</h3>
+      {/* <h3 className="t-P10">无title</h3>
       <Slide
         showTitle={false}
         showNav
@@ -201,7 +211,10 @@ class Demo extends React.Component {
         onSlideEnd={this.onSlideEnd.bind(this)}
       >
         {
-          t.state.slideList.map((item, index) => (<Slide.Item key={index} className="t-image-slide-item" style={{
+          t.state.slideList.map((item, index) => (<Slide.Item
+            key={index}
+            className="t-image-slide-item"
+            style={{
             backgroundImage: `url(${item.img})`,
           }}
           />))
@@ -216,12 +229,12 @@ class Demo extends React.Component {
       >
         {
           t.state.slideList2.map((item, index) => (
-            <Slide.Item key={ index }>
+            <Slide.Item key={index}>
               <a href="//work.alibaba-inc.com"><img src={item.img} /></a>
             </Slide.Item>
           ))
         }
-      </Slide>
+      </Slide> */}
     </div>);
   }
 }
diff --git a/demo/Table/TableDemo.jsx b/demo/Table/TableDemo.jsx
index 16520de9..78e1a353 100644
--- a/demo/Table/TableDemo.jsx
+++ b/demo/Table/TableDemo.jsx
@@ -9,6 +9,7 @@
 import React from 'react';
 
 import Table from 'salt-table';
+import Dialog from 'salt-dialog';
 
 // build之后, 测试一下下面一行, 把上面一行注释掉
 // const Table = require('../../dist');
@@ -96,14 +97,41 @@ class Demo extends React.Component {
         totalCount: 20,
       },
       columns: [
-        { dataKey: 'title', title: '表头', align: 'center' },
+        {
+          dataKey: 'title',
+          title: '表头',
+          align: 'center',
+        },
         { dataKey: 'name', title: '姓名', align: 'center' },
         { dataKey: 'sex', title: '性别', align: 'center' },
         { dataKey: 'age', title: '邮件', align: 'center' },
         { dataKey: 'city', title: '城市', align: 'center' },
       ],
       columns2: [
-        { dataKey: 'city', title: '城市', align: 'center' },
+        {
+          dataKey: 'city',
+          title: '城市',
+          align: 'center',
+          render: cellData => (
+            <div
+              onClick={() => {
+                Dialog.alert({
+                  title: '测试',
+
+                  content: '我是 Dialog.alert 的调用',
+                  onConfirm() {
+                    console.log('alert confirm');
+                  },
+                });
+              }}
+            >
+              {cellData}
+              <span style={{ fontSize: 18, color: '#ee3225', marginLeft: 1 }}>
+                ↑
+              </span>
+            </div>
+          ),
+        },
         { dataKey: 'name', title: '姓名', align: 'center' },
         { dataKey: 'email', title: '邮件', align: 'center' },
         { dataKey: 'email', title: '邮件', align: 'center' },
diff --git a/src/Slide/Slide.jsx b/src/Slide/Slide.jsx
index 42e362fe..ab7aef8a 100644
--- a/src/Slide/Slide.jsx
+++ b/src/Slide/Slide.jsx
@@ -107,11 +107,11 @@ class Slide extends React.Component {
 
   componentDidUpdate(prevProps) {
     const t = this;
-    const oldChildrenLength = prevProps.children.length;
-    const newChildrenLength = this.props.children.length;
+    const oldChildrenLength = React.Children.count(prevProps.children);
+    const newChildrenLength = React.Children.count(this.props.children);
     if (newChildrenLength !== oldChildrenLength) {
       t._getLength();
-      t._setContext(prevProps);
+      t._setContext(this.props);
     }
   }
 
@@ -579,7 +579,7 @@ class Slide extends React.Component {
   }
 
   /**
-  * 渲染items 当item数量为2时，该方法会被调用两次，第二次函数为true，以实现循环轮播
+  * 渲染items 当 item 数量为 2 时，该方法会被调用两次，第二次函数为true，以实现循环轮播
   * @param {boolean} dummyMode 是否是在渲染补位的item，
   * @note 只有当`props.children`的长度为2时，才需要进行补位
   */