yylib-quick-mobile/dist/yylib/item/YYItemImage.js

yylib-quick-mobile

import React, {Component} from 'react';
import {List,Carousel} from 'antd-mobile';
import YYIcon from '../icon/YYIcon';
import classnames from 'classnames';
import {isFunction} from '../../utils/FunctionUtil';
const Item = List.Item;
const Brief = Item.Brief;
import './YYItemText.less';
class YYItemImage extends Component {
    constructor(props) {
      super(props)
      this.state = {
        classNamec:'hidden',
        selectedIndex: 0,
      };
    }
    imageClick(item) {
     this.setState({
       classNamec: 'item-image-popup-mask',
       selectedIndex: item.index
     });
    }
    close() {
      this.setState({
       classNamec: 'hidden'
     });
    }
    createDesignData() {
      let {selectColor} = this.props;
      let img = [];
      let imgCarousel = [];
      let value =[{url:'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg'},{url:'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg'}];
      value.map((item,index)=>{
        var defaultUrl = 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png';
        var url = item.url?item.url:defaultUrl;
        img.push(<img key={index} onClick={this.imageClick.bind(this,{index,url})} className="item" src={url}/>);
        imgCarousel.push(<img
          src={url}
          key={`carousel${index}`}
          alt=""
          style={{ width: '100vw',height:'80vh', marginTop:'10vh' }}
          onLoad={() => {
            window.dispatchEvent(new Event('resize'));
            this.setState({ imgHeight: '80vh' });
          }}/>);
      });
      return {img,imgCarousel};
    }
    render() {
        let {getFieldProps,getFieldValue} = this.props.form;
        const {field,label,bottomLine,inline,visible,selectColor,size, ...restProps} = this.props;
        let wrapClz = classnames('yy-item-image',(!visible&&'hidden'),size, (!bottomLine&&'no-bottom-line'), this.props.className);
        let value = getFieldValue(field);
        let img = [];
        let imgCarousel = [];
        if (this.props.RunInDesign){
          let data = this.createDesignData();
          img = data.img;
          imgCarousel = data.imgCarousel;
        }
        else if (value&&value.length>0) {
            value.map((item,index)=>{
              var defaultUrl = 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png';
              var url = item.url?item.url:defaultUrl;
              img.push(<img key={index} onClick={this.imageClick.bind(this,{index,url})} className="item" src={url}/>);
              imgCarousel.push(<img
                src={url}
                key={`carousel${index}`}
                alt=""
                style={{ width: '100vw',height:'80vh', marginTop:'10vh' }}
                onLoad={() => {
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: '80vh' });
                }}/>);
            });
        }
        var labelContent = label&&<div className="imgs-title">{label}</div>
        return (
           <Item
            {...restProps}
            className={wrapClz}
            {...isFunction(getFieldProps) ? getFieldProps(field, {
            }) : null}
            >
              {labelContent}
              <div className='imgs'>{img}</div>
              <div id="img"  className={this.state.classNamec} onClick={this.close.bind(this)}>
                <Carousel
                  autoplay={false}
                  infinite
                  dots={false}
                  selectedIndex={this.state.selectedIndex}
                >
                  {imgCarousel}
                </Carousel>
              </div>
      </Item>);
    }
}

YYItemImage.defaultProps = {
    field: "default",
    label: '',
    visible: true,
    size: 'big'
}
export default YYItemImage;