yylib-quick-mobile/dist/yylib/input/YYInput.js

yylib-quick-mobile

import React from 'react';
import {InputItem} from 'antd-mobile';
import YYIcon from '../icon/YYIcon'
import classnames from 'classnames';
import {isFunction} from '../../utils/FunctionUtil';
import YYScan from '../plugin/YYScan';
import YYVoice from '../plugin/YYVoice';
import formatUtils from '../../utils/formatUtils';
import './YYInput.less'

//处理掉千分位
var clearComma = function(value){
    return (value && typeof value == 'string')?value.split(",").join(""):value;
};

/**
 * 格式化精确数值
 * @param value
 * @param options{
 *  symbol 货币符号
 *  decimal 小数位
 *  comma 是否显示千分位
 *  zeroFilling 当小数值不够保留位数时，是否自动补0，默认true
 * }
 * @returns {string}
 */
var formatCurrency = function(value,options){
    var {symbol,decimal,comma,zeroFilling} = options;
    var textValue = '';
    //处理掉千分位，后再进行格式化
    value = clearComma(value);
    if(comma===true){//显示千分位逗号
        textValue = formatUtils.formatNumber(value,decimal,3,value,zeroFilling);
    }else{//不显示千分位逗号
        textValue = formatUtils.formatNumber(value,decimal,0,value,zeroFilling);
    }
    if(symbol&&_.trim(symbol)&&textValue!==''&&textValue!==undefined){//显示货币符号
        textValue = _.trim(symbol)+textValue;
    }
    return textValue;
};

class YYInput extends React.Component {
    state = {
        value: this.props.value,
        isEdit: false
    };

    componentWillReceiveProps(nextProps, nextContext) {
        this.setState({value: nextProps.form.getFieldProps(nextProps.field).value});
    }

    onChange = (value) => {
        //设值到fieldStore
        let fields = {};
        fields[this.props.field] = {
            dirty: true,
            errors: undefined,
            name: this.props.field,
            touched: true,
            validating: true,
            value: value
        }
        this.props.form.setFields(fields);
        //this.setState({value})
        if (isFunction(this.props.onChange)) this.props.onChange(value);
    }

    onBlur = (value) => {
        if (isFunction(this.props.onBlur)) this.props.onBlur(value);
        this.setState({isEdit: false});
    }
    onExtraClick = (e) => {
        if (isFunction(this.props.onExtraClick)) this.props.onExtraClick();
    }
    scanClick = (value) =>{
        var data = {value:value}
        if (isFunction(this.props.scanClick)) this.props.scanClick(data);
        let fields = {};
        fields[this.props.field] = {
            dirty: true,
            errors: undefined,
            name: this.props.field,
            touched: true,
            validating: true,
            value: data.value
        }
        this.props.form.setFields(fields);
    }
    voiceClick = (value) =>{
        var data = {value:value}
        if (isFunction(this.props.voiceClick)) this.props.voiceClick(data);
        let fields = {};
        fields[this.props.field] = {
            dirty: true,
            errors: undefined,
            name: this.props.field,
            touched: true,
            validating: true,
            value: data.value
        }
        this.props.form.setFields(fields);
    }
    /* onClick = (value) => {
     if (isFunction(this.props.onClick)&&this.props.disabled) this.props.onClick(value);
     }*/
    onFocus = (value) => {
        if (isFunction(this.props.onFocus)) this.props.onFocus(value);
        this.setState({isEdit: true});
    }

    onErrorClick = () => {
        if (isFunction(this.props.onErrorClick)) this.props.onErrorClick();
    }

    validateCallBack = (rule, value, callback) => {
        if (isFunction(this.props.validateCallBack)) {
            this.props.validateCallBack(rule, value, callback);
            callback();
        } else {
            callback();
        }
    }
    initExtra() {
      let extra = [];
      let {openScan,openVoice,nid} = this.props;
      if (openScan) {
        extra.push(<YYScan key={nid} onClick={this.scanClick.bind(this)}/>);
      }
      if (openVoice) {
        extra.push(<YYVoice key={nid} onClick={this.voiceClick.bind(this)}/>);
      }
      return extra;
    }
    render() {
        let {getFieldProps} = this.props.form;
        const {field, required, trigger,
            type, placeholder, editable, disabled, clear, maxLength,
            hasError, extra, labelNumber, updatePlaceholder,
            label, showIcon, icon, iconColor,visible,openScan,openVoice,validateCallBack,
            findUI, offline,parentType, uiorigin, RunInDesign, uititle, uitype, uikey, nid,control_event, ...restProps} = this.props;

        const {value, isEdit} = this.state;
        let textValue = value;
        if (type === 'money' && isEdit === false) {
            textValue = formatCurrency(value, {decimal: 2, comma: true, zeroFilling: true});
        }

        let requiredMsg = '必填项' + label + '未填写';
        let wrapClz = classnames('yy-input',(!visible&&'hidden'), this.props.className);
        return (
            <InputItem
                {...restProps}
                className={wrapClz}
                {...isFunction(getFieldProps) ? getFieldProps(field, {
                    initialValue: value,
                    rules: [
                        {required, message: requiredMsg},
                        {validator: this.validateCallBack},
                    ],
                    trigger: trigger,
                    valuePropName: 'value',
                }) : null}
                type={type}
                placeholder={disabled ? null : placeholder}
                editable={editable}
                disabled={disabled}
                clear={clear}
                maxLength={type!='phone'&&maxLength}
                onChange={this.onChange}
                onBlur={this.onBlur}
                onFocus={this.onFocus}
                error={hasError}
                value={textValue}
                onErrorClick={this.onErrorClick}
                extra={extra?extra:this.initExtra()}
                onExtraClick={extra?this.onExtraClick:null}
                labelNumber={showIcon?labelNumber+1:labelNumber}
                updatePlaceholder={updatePlaceholder}
                name={field}
            >
                {showIcon && <YYIcon type={icon} color={iconColor} style={{float:'left',paddingRight:'8px'}} size="xs"/>}
                {required?<span className='yy-label-required'>{label}</span>:label}
            </InputItem>);
    }
}

YYInput.defaultProps = {
    field: "default",
    value: null,
    required: false,
    trigger: "onChange",
    type: "text",
    placeholder: "",
    editable: true,
    disabled: false,
    clear: true,
    maxLength: null,
    hasError: false,
    extra: "",
    labelNumber: 7,
    updatePlaceholder:false,
    label: '输入框',
    showIcon: false,
    openScan:false,
    openVoice:false,
    icon: "Home",
    iconColor: "red",
    validateCallBack:"",
	visible: true,
    //设计器需要的props,不添加会warning
    findUI:'',
    offline:false,
    parentType:'',
    uiorigin:'',
    RunInDesign:false,
    uititle:'',
    uitype:'',
    uikey:'',
    nid:'',
    control_event:{},
}
module.exports = YYInput;