lm-form/src/checkedinput.js

* 作者：liuduan * 邮箱：liuduan.05.05@163.com * 版本：**`1.0.2`**

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import { Cell, Label } from 'lm-cell';

import './index.scss';

const Checkedinput = props => {
    let {
        className,
        children,
        inline,
        type,
        checked,
        label,
        defaultChecked,
        disabled,
        onChange,
        ...other
    } = props, cls, inputModel;

    label = label ? label : children;

    if (['checkbox', 'radio'].indexOf(type) !== -1) {
        inputModel = type;
        cls = classNames(`lm-${inputModel}-${inline ? 'label' : 'wrapper'}`, className);
    } else {
        inputModel = type;
        cls = classNames(`lm-${inputModel}`, className);
    }

    const inputComponent = (<input
        className={`lm-${inputModel}-input`}
        type={type === 'radio' ? type : 'checkbox'}
        defaultChecked={defaultChecked}
        checked={checked}
        disabled={disabled}
        onChange={e => onChange(e, type)}
        {...other} />);      

    // 多个checkbox同行时渲染
    const renderInline = (inputComponent, label) => (
        <label className={cls}>
            {inputComponent}
            {
                ['checkbox', 'radio'].indexOf(inputModel) !== -1 ?
                    <div className={`lm-${inputModel}-content`}>
                        {inline ? label : null}
                    </div>
                : null
            }
        </label>
    );

    // 非同行时渲染
    const renderItem = (inputComponent, label) => (
        <Cell>
            <Label>{label}</Label>
            <label className="lm-cell-checkbox">
                {renderInline(inputComponent, label)}
            </label>
        </Cell>
    );

    if (inline) {
        return renderInline(inputComponent, label);
    } else {
        return renderItem(inputComponent, label);
    }
}

Checkedinput.propTypes = {
    className: PropTypes.string,    // 自定义类名
    inline: PropTypes.bool,         // 多个checkbox是否在一行显示
    type: PropTypes.string,         // 类型  checkbox radio areement swtich
    defaultChecked: PropTypes.bool, // 默认是否选中，用于非控制checkbox
    checked: PropTypes.bool,        // 是否选中，配合onChange使用
    label: PropTypes.oneOfType([              
        PropTypes.string, PropTypes.element, PropTypes.number
    ]),                             // label
    disabled: PropTypes.bool,       // 禁用
    onChange: PropTypes.func,       // 回调
};

Checkedinput.defaultProps = {
    className: '',
    inline: true,
    type: 'checkbox',
    disabled: false,
    label: '',
    onChange() { }
};

export default Checkedinput;