yylib-quick-mobile/dist/yylib/tabs/YYTabsDev.js

yylib-quick-mobile

/**
 * Created By whh 2017/12/26
 * */
import React, {Component} from 'react';
import {Tabs} from 'antd-mobile';
import classnames from 'classnames';
import './YYTabs.less';
import PropTypes from 'prop-types';
import {isFunction} from '../../utils/FunctionUtil';

class YYTabsDev extends React.Component {
    state = {
        tabBarUnderlineLeft: (this.props.initialPage?(5+this.props.initialPage*20):5)+'%'
    }

    onChange = (tab, index) => {
        this.setState({
            tabBarUnderlineLeft:(5+index*20)+"%"
        })
        if (isFunction(this.props.onChange)){
        	setTimeout(()=>{
        		  this.props.onChange(tab, index)
        	},300);
        	//没有办法的办法 只能先这样处理吧
        }
    }
    onTabClick = (tab, index) => {
        if (isFunction(this.props.onTabClick)) this.props.onTabClick(tab, index)
    }
    /*****解析标签页的子元素 解析出子元素的集合******/
    getTabs(){
    	let {children}=this.props;
    	if(children){
    		Array.prototype.slice.call(children);
            children = (children&&children.constructor==Array)?children:[children];
           return 	children.map((item,index)=>{
    	    return {title:item.props.uititle}
    	   })
    	}
    	return  [];
    }
    render() {
        let {pageSize,usePaged,height,type, tabBarPosition, swipeable, tabDirection,
            tabBarInactiveTextColor,tabBarActiveTextColor,tabBarUnderlineStyle, children, className,visible, ...restProps} = this.props;
        let wrapClz = classnames('yy-tabs-'+(type==='left'?'left':'default'),(!visible&&'hidden'), className);
        var tabs=this.getTabs();
        var defaultStyle={height:height};
        return (
            <div className={wrapClz} style={defaultStyle}>
                <Tabs {...restProps}
                      usePaged={usePaged}
                      tabs={tabs}
                      tabBarPosition={tabBarPosition}
                      renderTabBar={props => <Tabs.DefaultTabBar {...props} page={pageSize} />}
                      swipeable={swipeable}
                      onChange={this.onChange}
                      onTabClick={this.onTabClick}
                      tabDirection={tabDirection}
                      tabBarInactiveTextColor={tabBarInactiveTextColor}
                      tabBarActiveTextColor={tabBarActiveTextColor}
                      tabBarUnderlineStyle={(!tabBarUnderlineStyle)&&(type==='left')?{"width": "10%", "left": this.state.tabBarUnderlineLeft}:tabBarUnderlineStyle}
                >
                    {children}
                </Tabs>
            </div>
        )
    };
}
;

YYTabsDev.defaultProps = {
    type: 'default',
    tabs: [],//tab数据
    tabBarPosition: 'top',//TabBar位置
    //initialPage: null,//初始化Tab, index or key
    //page: null,//当前Tab, index or key
    swipeable: true,//是否可以滑动内容切换
    onChange: null,//tab变化时触发
    onTabClick: null,//tab 被点击的回调
    tabDirection: 'horizontal',//Tab方向 (web only)
    tabBarInactiveTextColor:'#414655',
    tabBarActiveTextColor:'#0091FA',
    tabBarUnderlineStyle:null,
    visible: true,
}

module.exports=YYTabsDev;