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

yylib-quick-mobile

import React, {Component} from 'react';
import {List} 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 YYItemSelect extends Component {
    constructor(props) {
      super(props);
      this.state = {
        data: [],
        value: null
      }
    }
    createDesignData() {
      let {selectColor} = this.props;
      let data =[
        {label:'一般',value:'1'},
        {label:'严重',value:'2'},
        {label:'紧急',value:'3'}
      ];

      this.setData(data);
    }
    setData(data){
      this.setState({
        data:data
      });
    }
    onClick(data){
      if (this.props.disabled) {
        return;
      }
      let value = data.value;
      this.setState({value:value},()=>{
            //为了在外部表单中获取到
            let fields = {};
            fields[this.props.field] = {
                name: this.props.field,
                value: value
            }
            this.props.form.setFields(fields);
            if (isFunction(this.props.onChange)) {
                this.props.onChange(value);
            }
      });
    }
    componentDidMount() {
      let {RunInDesign,data,value,field} = this.props;
      let {getFieldValue} = this.props.form;
      let valueField = getFieldValue(field);
      if (RunInDesign) {
        this.createDesignData()
      }
      else {
        if (data) {
          this.setState({
            data:data
          });
        }
       if (value) {
          this.setState({
            value:value
          });
        }
        if (valueField) {
          this.setState({
            value:valueField
          });
        }
      }
    }
    componentWillReceiveProps = (nextProps) => {
      let {getFieldValue} = nextProps.form;
      let valueField = getFieldValue(nextProps.field);
      if(nextProps.data!=this.props.data){
        this.setState({
          data:nextProps.data
        });
      }
      if (nextProps.value) {
        this.setState({
          value:nextProps.value
        });
      }
      if (valueField) {
        this.setState({
          value:valueField
        });
      }

    }
    validateCallBack = (rule, value, callback) => {
        if (isFunction(this.props.validateCallBack)) {
            this.props.validateCallBack(rule, value, callback);
            callback();
        } else {
            callback();
        }
    }
    renderItems(data) {
      let list = [];
      let {unselectColor,selectColor} = this.props;
      data.map((item,index)=>{
        if (item.value===this.state.value) {
          list.push(<div key={index} className="item select-item" style={{background:selectColor?selectColor:'#ffcf24',border:`1px solid ${selectColor?selectColor:'#ffcf24'}`}} onClick={this.onClick.bind(this,item)}>{item.label}</div>);
        }
        else {
          list.push(<div key={index} className="item" style={{background:'#fff',border:'1px solid #ADB2BB'}} onClick={this.onClick.bind(this,item)}>{item.label}</div>);
        }
      });
      return list;

    }
    render() {
        let {getFieldProps,getFieldValue} = this.props.form;
        const {field,label,bottomLine,visible,selectColor,value,disabled,required,trigger,
        findUI, offline,parentType, uiorigin, RunInDesign, uititle, uitype, uikey, nid,control_event, ...restProps} = this.props;
        let wrapClz = classnames('yy-itemselect',(!visible&&'hidden'), (!bottomLine&&'no-bottom-line'),this.props.className);
        let labelWrapClz = classnames('yy-itemselect-label',(!visible&&'hidden'),this.props.className);
        let {data} = this.state;
        let select = [];
        let requiredMsg = '必填项' + label + '未填写';
        return(
           <div>
             <div className={labelWrapClz}>{required?<span className='yy-label-required'>{label}</span>:label}</div>
             <Item
              {...restProps}
              className={wrapClz}
              {...isFunction(getFieldProps) ? getFieldProps(field, {
                    initialValue: value,
                    rules: [
                        {required, message: requiredMsg},
                        {validator: this.validateCallBack},
                    ],
                    trigger: trigger,
                    valuePropName: 'value',
                })  : null}
              >
                <div className='selects'>{this.renderItems(data)}</div>
  			       </Item>
            </div>);
    }
}

YYItemSelect.defaultProps = {
    field: "default",
    label: '',
    visible: true,
    value: null,
    trigger: "onChange",
    //设计器需要的props,不添加会warning
    findUI:'',
    offline:false,
    parentType:'',
    uiorigin:'',
    RunInDesign:false,
    uititle:'',
    uitype:'',
    uikey:'',
    nid:'',
    control_event:{},
}
export default YYItemSelect;