lm-form/src/checkboxgroup.js

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

import React from 'react';
import PropTypes from 'prop-types';
import Checkbox from './checkbox';

const Checkboxgroup = props => {
    const { data, checked, name, disabled, ...others } = props;
    const renderCheckbox = (data) => {
        let res;
        if ('checked' in props) {
            res = data.map((i, index) =>
                <Checkbox
                    key={index}
                    label={i.label}
                    value={i.value}
                    name={i.name || name}
                    disabled={'disabled' in i ? i.disabled : disabled}
                    checked={checked.indexOf(`${i.value}`) !== -1}
                    {...others} />)
        } else {
            res = data.map((i, index) =>
                <Checkbox
                    key={index}
                    label={i.label}
                    value={i.value}
                    disabled={'disabled' in i ? i.disabled : disabled}
                    name={i.name || name}
                    {...others} />)
        }
        return res;
    }

    return (
        <div style={{ display: props.inline === false ? 'block' : 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
            {data.length
                ? renderCheckbox(data)
                : null}
        </div>
    );
};

Checkboxgroup.propTypes = {
    data: PropTypes.array.isRequired,  //  数据
    checked: PropTypes.array,          //  多选中值数组    
    disabled: PropTypes.bool,          //  checkbox 禁用
    name: PropTypes.string,            //  checkbox name，如果name不同，可用过data属性传入name
};

Checkboxgroup.defaultProps = {
    data: [],
    disabled: false,
    name: ''
};

export default Checkboxgroup;