yylib-quick-mobile/dist/yylib/grid/YYGrid.js

yylib-quick-mobile

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { Grid } from 'antd-mobile';
import './YYGrid.less';
import classnames from 'classnames';
var defaultImg = require('./img/default.png');//默认的图片
class YYGrid extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: []
    }
  }
  getOtherProps(props) {
    let otherProps = {};
    let {activeStyle, hasLine, isCarousel, carouselMaxRow, customDraw,columnNum,itemheight,visible} = props;
    let wrapClz = classnames('yy-grid', this.props.className);
    otherProps={
    	         activeStyle:activeStyle,
    	         hasLine: hasLine,
    	         className:wrapClz,
    	         isCarousel:isCarousel,
               carouselMaxRow:carouselMaxRow,
               columnNum: columnNum,
               itemStyle:customDraw&&{height:itemheight}
              };
    return otherProps;
  }
  createDesignData() {
    const data = [
      {
        icon: require('./img/check.png'),
        text: "安全检查",
        state: "0",
        num: 10,
      }, {
        icon: require('./img/rectify.png'),
        text: "安全整改",
        state: "1",
        num: 10,
      }, {
        icon: require('./img/photo.png'),
        text: "拍照检查",
      },
      {
        icon: require('./img/check.png'),
        text: "安全检查",
        state: "0",
        num: 10,
      }, {
        icon: require('./img/rectify.png'),
        text: "安全整改",
        state: "1",
        num: 10,
      }, {
        icon: require('./img/photo.png'),
        text: "拍照检查",
      },
      {
        icon: require('./img/check.png'),
        text: "安全检查",
        state: "0",
        num: 10,
      }, {
        icon: require('./img/rectify.png'),
        text: "安全整改",
        state: "1",
        num: 10,
      }, {
        icon: require('./img/photo.png'),
        text: "拍照检查",
      }
    ];
    this.setState({
      dataSource: data
    });
  }
  setData(data) {
    this.setState({
      dataSource: data
    });
  }
  onClick(el,index) {
    if(this.props.onClick){
      this.props.onClick(el,index);
    }
  }
  componentDidMount() {
    let {RunInDesign,data}=this.props;
    if(RunInDesign){
      this.createDesignData();
    }
    if (data && data.length > 0) {
        this.setState({
          dataSource: data
        });
    }
  }
  createRow(row,index){
  	let  {iconwidth,columnNum,renderItem,customDraw,type,RunInDesign}=this.props;
    if (RunInDesign&&!customDraw) {
      if (type==='img') {
            return (
              <div className="gridDiv-zk">
                <img className="gridImg-zk" src={row["icon"]}/>
                <div className="gridDec-zk">{row["text"]}</div>
                {row["state"] && row["num"]!==0 ? <span>{row["num"]}</span> : null}
              </div>
            )
      }
      else if(type==='num'){
           return (<li key={index}>
              <span>{row["num"]}</span>
              <p>{row["text"]}</p>
            </li>
          )
      }
    }else {
      if (customDraw) {
        if (renderItem) {
          return renderItem(row,index);
        }
      }else {
      	if (type==='img') {
            return (
              <div className="gridDiv-zk">
                <img className="gridImg-zk" src={row["icon"]?row["icon"]:defaultImg}/>
                <div className="gridDec-zk">{row["text"]}</div>
                {row["state"] && row["num"]!==0 ? <span>{row["num"]}</span> : null}
              </div>
            )
        }
        else if(type==='num'){
             return (<li key={index}>
                <span>{row["num"]}</span>
                <p>{row["text"]}</p>
              </li>
            )
        }
      }
    }
  }
  componentWillReceiveProps(nextprops) {
    if (nextprops.data&&nextprops.data.length>0) {
        this.setState({
            dataSource: nextprops.data
        })
    }
    if(nextprops.RunInDesign){
      this.createDesignData();
    }
  }
  render() {
    let refProps = this.getOtherProps(this.props);
    let {data,headerText,RunInDesign,visible,...restProps} = this.props;
    let {dataSource} = this.state;
    let clz =classnames('grid-zk', (!visible&&'hidden'));
    let wrapClz = classnames('yy-grid', (!visible&&'hidden'), this.props.className);
    return (
      headerText?<div className={clz}>
        <p>{headerText}</p>
        <Grid
          ref="myGrid"
          {...restProps}
          {...refProps}
          className={wrapClz}
          square={true}
          data={this.state.dataSource}
          onClick={this.onClick.bind(this)}
          renderItem={(row,index)=>this.createRow(row,index)}/>
      </div>:<Grid
          ref="myGrid"
          {...restProps}
          {...refProps}
          className={wrapClz}
          square={true}
          data={this.state.dataSource}
          onClick={this.onClick.bind(this)}
          renderItem={(row,index)=>this.createRow(row,index)}/>
    );
  }
}
YYGrid.defaultProps = {
  data: [],
  visible: true
}
export default YYGrid;