fix issue #227

salt-ui · Jul 5, 2018 · 7bc34cd · 7bc34cd
1 parent 38d3b47
commit 7bc34cd
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 35 deletions.
diff --git 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
@@ -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
@@ -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时，才需要进行补位
   */