yylib-quick-mobile/dist/yylib/segmented-control/YYSegmentedControls.js

yylib-quick-mobile

import React from 'react';
import './YYSegmentedControls.less';
import classnames from 'classnames';
import { SegmentedControl } from 'antd-mobile';
import YYSegmentedControl from './YYSegmentedControl';
import {isFunction} from '../../utils/FunctionUtil';
class YYSegmentedControls extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      selectSegment: 0
    };
  }

  onChange = (e) => {
    const _this = this;
    this.setState({selectSegment: e.nativeEvent.selectedSegmentIndex}, () => {
      if (isFunction(_this.props.onChange)) {
        this.props.onChange(_this.state.selectSegment);
      }
    });
  };

  onValueChange = (value) => {
    if (isFunction(this.props.onValueChange)) {
      this.props.onValueChange(value);
    }
  }
  /*****解析标签页的子元素 解析出子元素的集合******/
  getSegment(){
    let {children}=this.props;
    if(children){
      Array.prototype.slice.call(children);
        return  children.map((item,index)=>{
          return item.props.uititle
        })
    }
    return  [];
  }
  getChildren(){
    let {children} = this.props;
    children = (children&&children.constructor==Array)?children:[children];
    let {selectSegment} = this.state;
    if(children&&children.length){
      Array.prototype.slice.call(children)
    return children.map((child,index)=>{
      let  {uititle,badge,icon,selectedIcon,iconColor,selectedIconColor,dot,selected,nid,...restProps}=child.props;
			let SegmentedControls = [];
			if (selectSegment===index) {
				SegmentedControls.push(<YYSegmentedControl
          key={index}
          children={child.props.children}/>);
			}
			else {
				SegmentedControls.push(<YYSegmentedControl className='hidden'
          key={index}
          children={child.props.children}/>);
			}
      return SegmentedControls;
    })
    }
    return []
  }
  render () {
    let {tintColor, children,visible, ...restProps} = this.props;
    var segments = this.getSegment();
		let {selectSegment} = this.state;
    let wrapClz = classnames('yy-segmented-control',(!visible&&'hidden'), this.props.className);
    return (
      <div>
        <SegmentedControl
          {...restProps}
          className={wrapClz}
          values={segments}
          tintColor={tintColor}
          onChange={this.onChange}
          onValueChange={this.onValueChange}
			    selectedIndex={selectSegment}
        >
        </SegmentedControl>
        {
          this.getChildren()
        }
      </div>
    );
  }
}
YYSegmentedControls.defaultProps = {
  visible:true,
}
module.exports = YYSegmentedControls;