Tab组件增加canSwipe属性

ZhongAnTech · Aug 18, 2017 · 168ea19 · 168ea19
1 parent 406c0b4
commit 168ea19
Show file tree

Hide file tree

Showing 7 changed files with 146 additions and 113 deletions.
diff --git a/components/Swipe/Swipe.jsx b/components/Swipe/Swipe.jsx
@@ -233,6 +233,10 @@ class Swipe extends Component {
     const newItems = React.Children.map(items, (element, index) => {
       return cloneElement(element, {
         key: index,
+        className: classnames({
+          [`${props.prefixCls}-item`]: true,
+          [element.props.className]: !!element.props.className,
+        }),
       });
     });
 
@@ -290,7 +294,7 @@ class Swipe extends Component {
   }
 
   render() {
-    const { prefixCls, className, height, children } = this.props;
+    const { prefixCls, className, height, showPagination, children } = this.props;
 
     const classes = classnames({
       [`${prefixCls}`]: true,
@@ -322,23 +326,27 @@ class Swipe extends Component {
           onTouchEnd={event => this.onTouchEnd(event)}>
           { this.state.items }
         </div>
-        <div className={`${prefixCls}-pagination`}>
-          <ul>
-            {
-              Children.map(children, (result, index) => {
-                return (
-                  <li
-                    role="tab"
-                    key={`pagination-${index}`}
-                    className={classnames({ active: index === this.state.activeIndex })}
-                    style={style.pagination}
-                    onClick={() => this.onSlideTo(index)}
-                    />
-                );
-              })
-            }
-          </ul>
-        </div>
+        {
+          showPagination
+            ? <div className={`${prefixCls}-pagination`}>
+              <ul>
+                {
+                  Children.map(children, (result, index) => {
+                    return (
+                      <li
+                        role="tab"
+                        key={`pagination-${index}`}
+                        className={classnames({ active: index === this.state.activeIndex })}
+                        style={style.pagination}
+                        onClick={() => this.onSlideTo(index)}
+                        />
+                    );
+                  })
+                }
+              </ul>
+            </div>
+            : null
+        }
       </div>
     );
   }
@@ -355,6 +363,7 @@ Swipe.propTypes = {
   autoPlayIntervalTime: PropTypes.number,
   moveDistanceRatio: PropTypes.number,
   moveTimeSpan: PropTypes.number,
+  showPagination: PropTypes.bool,
   onChange: PropTypes.func,
   onChangeEnd: PropTypes.func,
 };
@@ -370,6 +379,7 @@ Swipe.defaultProps = {
   autoPlayIntervalTime: 3000,
   moveDistanceRatio: 0.5,
   moveTimeSpan: 300,
+  showPagination: true,
   onChange() {},
   onChangeEnd() {},
 };

diff --git a/components/Tab/Tab.jsx b/components/Tab/Tab.jsx
@@ -1,7 +1,8 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import TabContainer from './TabContainer';
+import TabPanel from './TabPanel';
+import Swipe from '../Swipe';
 
 function getSelectIndex(children) {
   let selectIndex;
@@ -13,7 +14,7 @@ function getSelectIndex(children) {
   return selectIndex;
 }
 
-class TabGroup extends PureComponent {
+class Tab extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
@@ -24,21 +25,14 @@ class TabGroup extends PureComponent {
   componentWillReceiveProps(nextProps) {
     if ('value' in nextProps || getSelectIndex(nextProps.children)) {
       this.setState({
-        value: nextProps.value,
+        value: nextProps.value || nextProps.defaultValue || getSelectIndex(nextProps.children) || 0,
       });
       nextProps.onChange(nextProps.value);
     }
   }
 
-  getTitleItemCls(idx) {
-    const { prefixCls } = this.props;
-    return idx === this.state.value
-      ? `${prefixCls}-header-item active`
-      : `${prefixCls}-header-item`;
-  }
-
   render() {
-    const { prefixCls, className, theme, lineWidth, disabled, children, onChange } = this.props;
+    const { prefixCls, className, theme, lineWidth, disabled, canSwipe, children, onChange } = this.props;
 
     const classes = classnames({
       [`${prefixCls}`]: true,
@@ -47,37 +41,59 @@ class TabGroup extends PureComponent {
     });
 
     // 渲染选项
-    const itemsRender = React.Children.map(children, (item, $index) => {
-      const itemClasses = classnames({
+    const tabsRender = React.Children.map(children, (item, $index) => {
+      const itemCls = classnames({
         [`${prefixCls}-header-item`]: true,
+        [item.props.className]: !!item.props.className,
         disabled: disabled || item.props.disabled,
         active: this.state.value === $index,
-        [item.className]: !!item.className,
       });
 
       return (
         <li
           role="tab"
           key={$index}
-          className={itemClasses}
+          className={itemCls}
           onClick={() => {
             if (disabled || item.props.disabled) return;
             this.setState({ value: $index });
-            onChange($index);
+            typeof onChange === 'function' && onChange($index);
+            canSwipe && this.swipe.onSlideTo($index);
           }}>
-          <span ref={(tabItem) => { this.tabItem = tabItem; }}>{item.props.title}</span>
+          {item.props.title}
         </li>
       );
     });
 
     // 渲染内容
-    const contentRender = React.Children.map(children, (item, $index) => {
-      return (
-        <TabContainer {...item.props} selected={this.state.value === $index}>
-          {item.props.children}
-        </TabContainer>
+    let contentRender;
+
+    if (canSwipe) {
+      contentRender = (
+        <Swipe
+          showPagination={false}
+          activeIndex={this.state.value}
+          ref={(ele) => { this.swipe = ele; }}
+          onChange={(value) => {
+            this.setState({ value });
+            typeof onChange === 'function' && onChange(value);
+          }}>
+          {
+            React.Children.map(children, (item) => {
+              return (
+                <div>{item.props.children}</div>
+              );
+            })
+          }
+        </Swipe>
       );
-    });
+    } else {
+      contentRender = React.Children.map(children, (item, $index) => {
+        return (
+          <TabPanel {...item.props} selected={this.state.value === $index} />
+        );
+      });
+    }
 
     const lineStyle = {
       width: `${100 / children.length}%`,
@@ -102,7 +118,7 @@ class TabGroup extends PureComponent {
     return (
       <div className={classes}>
         <div className={`${prefixCls}-header`}>
-          <ul role="tablist">{itemsRender}</ul>
+          <ul role="tablist">{tabsRender}</ul>
           <div className={`${prefixCls}-line`} style={lineStyle}>{lineInnerRender}</div>
         </div>
         <div className={`${prefixCls}-container`}>
@@ -113,22 +129,24 @@ class TabGroup extends PureComponent {
   }
 }
 
-TabGroup.propTypes = {
+Tab.propTypes = {
   prefixCls: PropTypes.string,
   className: PropTypes.string,
   theme: PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'error']),
   lineWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   disabled: PropTypes.bool,
+  canSwipe: PropTypes.bool,
   onChange: PropTypes.func,
 };
 
-TabGroup.defaultProps = {
+Tab.defaultProps = {
   prefixCls: 'za-tab',
   className: null,
   theme: 'primary',
   lineWidth: null,
   disabled: false,
+  canSwipe: false,
   onChange() {},
 };
 
-export default TabGroup;
+export default Tab;
diff --git a/components/Tab/TabContainer.jsx → components/Tab/TabPanel.jsx b/components/Tab/TabContainer.jsx → components/Tab/TabPanel.jsx
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-class TabContainer extends PureComponent {
+class TabPanel extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
@@ -35,14 +35,14 @@ class TabContainer extends PureComponent {
   }
 }
 
-TabContainer.propTypes = {
+TabPanel.propTypes = {
   prefixCls: PropTypes.string,
   className: PropTypes.string,
 };
 
-TabContainer.defaultProps = {
+TabPanel.defaultProps = {
   prefixCls: 'za-tab-container-item',
   className: null,
 };
 
-export default TabContainer;
+export default TabPanel;
diff --git a/components/Tab/index.js b/components/Tab/index.js
@@ -1,6 +1,6 @@
 import Tab from './Tab';
-import TabItem from './TabContainer';
+import TabPanel from './TabPanel';
 
-Tab.Item = TabItem;
+Tab.Panel = TabPanel;
 
 export default Tab;
diff --git a/examples/pages/SwipePage.jsx b/examples/pages/SwipePage.jsx
@@ -6,29 +6,16 @@ import { Panel, Swipe, Button } from '../../components';
 import '../styles/pages/SwipePage';
 
 const ITEMS = [
-  {
-    url: '#',
-    img: require('../images/banners/1.png'),
-  },
-  {
-    url: '#',
-    img: require('../images/banners/2.png'),
-  },
-  {
-    url: '#',
-    img: require('../images/banners/3.png'),
-  },
+  require('../images/banners/1.png'),
+  require('../images/banners/2.png'),
+  require('../images/banners/3.png'),
 ];
 
 function contentRender() {
   return ITEMS.map((item, i) => {
     return (
-      <div className="za-swipe-item" key={+i}>
-        <div className="swipe-item-pic">
-          <a href={item.url}>
-            <img src={item.img} alt={item.title} />
-          </a>
-        </div>
+      <div className="swipe-item-pic" key={+i}>
+        <img src={item} alt="" />
       </div>
     );
   });