yylib-quick-mobile/dist/yylib/stepper/YYStepper.js

yylib-quick-mobile

import React from 'react'
import {List, Stepper} from 'antd-mobile'
import {isFunction} from '../../utils/FunctionUtil';
import classnames from 'classnames';
import YYIcon from '../icon/YYIcon';
import './YYStepper.less';

export default class YYStepper extends React.Component {
    state = {
        value:this.props.value!=undefined?this.props.value:this.props.defaultValue,
    }
    componentWillReceiveProps = (nextProps) => {
        let {getFieldProps, getFieldValue} = nextProps.form;
        let value = getFieldValue(nextProps.field);
        if ('defaultValue' in nextProps) {
            if (this.props.defaultValue != nextProps.defaultValue) {
                this.setState({value: nextProps.defaultValue});
            }
        }
        //value优先级高于defaultValue
        if ('value' in nextProps) {
            if (this.props.value != nextProps.value) {
                this.setState({value: nextProps.value});
            }
        }
        if (value) {
           this.setState({value:value});
        }
    }
    _onChange = (value) => {
        this.setState({
            value: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);
        if (isFunction(this.props.onChange)) {
            this.props.onChange(value);
        }
    }

    render() {
        let {getFieldProps} = this.props.form;

        const {field, label, min, max, step, disabled,defaultValue, value, readOnly, showNumber,showIcon, icon, iconColor,required,visible, ...restProps} = this.props;
			  let requiredMsg = '必填项' + label + '未填写';
        let wrapClz = classnames('yy-stepper',(!visible&&'hidden'), this.props.className);
        return (
            <List.Item
                wrap
                {...restProps}
                className={wrapClz}
                {...isFunction(getFieldProps) ? getFieldProps(field, {
                    initialValue: value,
				    rules: [
						{required, message: requiredMsg}
					],
                    valuePropName: 'value',
                }) : null}
                extra={
                    <Stepper
                        style={{width: '100%', minWidth: '100px'}}
                        min={min}
                        max={max}
                        step={step}
                        disabled={disabled}
                        readOnly={readOnly}
                        defaultValue={defaultValue}
                        value={this.state.value}
                        showNumber
                        onChange={this._onChange}/>
                }
            >
               {showIcon && <YYIcon type={icon} color={iconColor} style={{float:'left',paddingRight:'8px'}} size="xs"/>}
							 {required?<span className='yy-label-required'>{label}</span>:label}
            </List.Item>
        )
    }
}

YYStepper.defaultProps = {
    field: 'stepper',
    label: '步进器',
    min: 1,
    max: 100,
    step: 1,
    value: null,
    disabled: false,
    readOnly: false,
    showNumber: true,
    iconColor: "red",
	visible: true,
	required: false,
};