yylib-quick-mobile/dist/yylib/switch/YYSwitch.js

yylib-quick-mobile

import React from 'react';
import {List, Switch} from 'antd-mobile';
import {isFunction} from '../../utils/FunctionUtil';
import classnames from 'classnames';
import YYIcon from '../icon/YYIcon';
import './YYSwitch.less';
class YYSwitch extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          checked: props.checked
        }
    }
    onChange = (checked) => {
        //设值到fieldStore
        let fields = {};
        fields[this.props.field] = {
            dirty: true,
            errors: undefined,
            name: this.props.field,
            touched: true,
            validating: true,
            value: checked
        }
        this.setState({
            checked:checked
        });
        this.props.form.setFields(fields);
        if (isFunction(this.props.onChange)) this.props.onChange(checked)
    }
    onClick = (checked) => {
        this.setState({
            checked:checked
        });
        if (isFunction(this.props.onClick)) this.props.onClick(checked)
    }
   componentWillReceiveProps = (nextProps) => {
     let {getFieldValue} = this.props.form;
     let {field} = this.props;
     let valueField = getFieldValue(field);
     this.setState({
        checked:Boolean(valueField)
     });
   }
    render() {
        let {field,form,label,checkedText,uncheckedText,disabled,onClick,color,platform,showIcon, icon, iconColor, required, visible,RunInDesign,...restProps} = this.props;
			  let getFieldProps = form ? form.getFieldProps : null;
			  let requiredMsg = '必填项' + label + '未填写';
        let wrapClz = classnames('yy-switch',(!visible&&'hidden'),this.props.className);
        let {checked} = this.state;
        return (
                <List.Item
                    {...restProps}
                    className={wrapClz}
                    extra={<Switch
                        {...isFunction(getFieldProps) ? getFieldProps(field,{
                            initialValue:checked,
    						rules: [
    						  {required, message: requiredMsg}
    						],
                            valuePropName:'checked',
                        }):null}
                        disabled={disabled}
                        color={color}
                        platform={platform}
                        onClick={this.onClick}
                        name={field}/>}>
                    {showIcon && <YYIcon type={icon} color={iconColor} style={{float:'left',paddingRight:'8px'}} size="xs"/>}
    				{required?<span className='yy-label-required'>{label}</span>:label}
                    <div style={{position:'absolute',right:'23vw',display:'inline-block',fontSize:'16px',color:'#7D8291'}}>{checked?checkedText:uncheckedText}</div>
                </List.Item>
        )
    };
}

YYSwitch.defaultProps = {
    field:'switch',     //switch的name
    label:'滑动开关',       //开关名称
    checked:false,      //是否默认被选中
    checkedText: '',//选中显示的文本
    uncheckedText:'',//未选中显示的文本
    disabled:false,     //是否不可修改
    color:'#3BC1FF',    //打开后显示颜色
    platform:'ios',         //默认样式风格
    showIcon: false,
    icon: "wage",
    iconColor: "red",
	visible: true,
	required: false,
    RunInDesign:false
}

export default YYSwitch;