yylib-quick-mobile/dist/yylib/carousel/YYCarousel.js

yylib-quick-mobile

import React, {Component} from 'react';
import './YYCarousel.less';
import { Carousel } from 'antd-mobile';
import classnames from 'classnames';
import {isFunction} from '../../utils/FunctionUtil';
class YYCarousel extends Component {
  constructor(props) {
    super(props)
    this.state = {
    	data:[]
    };
  }
  beforeChange = (from, to) => {
    if (isFunction(this.props.beforeChange)) {
      this.props.beforeChange(from, to);
    }
  }
  afterChange = (index) => {
    if (isFunction(this.props.afterChange)) {
      this.props.afterChange(index);
    }
  }
  imgClick(item) {
    if (isFunction(this.props.imgClick)) {
      this.props.imgClick(item);
    }
  }
  getCarouselPanel() {
  	  let {data}=this.state;
  	  let {height,type}=this.props;
  	  if(type==='img'&&data.length){
  	  	/****图片模式****/
  	  	return data.map((item)=>{
  	  		return  <img key={item.id} src={item.imgsrc} style={{display:"block",position:"relative",height:height}} onClick={this.imgClick.bind(this,item)}></img>
  	  	})
  	  }
  	  else{
  	  let {children}=this.props;
      if(children){
      Array.prototype.slice.call(children);
         children = (children&&children.constructor==Array)?children:[children];
          return  children.map((item,index)=>{
            let {nid,children:child}=item.props;
            child = (child&&child.constructor==Array)?child:[child];
            child=child&&child.length?child:<div><center>{"走马灯"+(index+1)}</center></div>
            return(
              <div key={nid}  style={{"height":"100%","width":"100%"}}>{child}</div>
            );
         })
       }
  	  }
      return  [];
  }
  /****只支持图片*****/
  setData(data){
  	this.setState({data:data})
  }
  render() {
    let {height,selectedIndex,dots,vertical,autoplay,autoplayInterval,infinite,swipeSpeed,slideWidth,visible} = this.props;
    let wrapClz = classnames('yy-carousel', (!visible&&'hidden'), this.props.className);
    let  swidth=parseInt(slideWidth);
    let  itemwidth=slideWidth;
    if(slideWidth.replace(swidth,"")=="%"){
    	itemwidth=swidth/100;
    }
    let  style={height:height}
    return (
      <Carousel
        selectedIndex={selectedIndex}
        dots={dots}
        vertical={vertical}
        autoplay={autoplay}
        autoplayInterval={autoplayInterval}
        infinite={infinite}
        swipeSpeed={swipeSpeed}
        slideWidth={itemwidth}
        className={wrapClz}
        beforeChange={this.beforeChange}
        afterChange={this.afterChange}
        style={style}>
        {this.getCarouselPanel()}
      </Carousel>
    );
  }
}
YYCarousel.defaultProps = {
  selectedIndex:0,
  dots:true,
  vertical:false,
  autoplay:false,
  autoplayInterval:3000,
  infinite:false,
  height: "120px",
  swipeSpeed:12,
  slideWidth:"100%",
  visible:true,
  type:'basic'
}
export default YYCarousel;