一、简介
基于项目需求，对Ant Design中CheckBox复选框组件进行了二次封装，主要有以下一些功能：
【a】可直接使用数据库常量表的标识，使用sign标识从后台查询数据源时，以'DMK_'加上对应代码库标识，如：sign={'DMK_XTGL_WJLX'}；
【b】支持自定义数据源，需要遵循一定的格式，如： [{label: 'A', value: 'A'},{label: 'B', value: 'B'},{label: 'C', value: 'C'}]；
【c】使用checkBoxGroupDisabled属性可动态配置整个复选框禁用、启用状态；
【d】使用checkBoxDisabledValueArr属性可控制按钮组中哪些checkbox需要被禁用；
【e】使用filterType集合filterData可以过滤指定按钮, 如: filterType={'save'} filterData={['A']}；
【f】使用columnsNum属性可控制一行显示几个复选框,不传默认显示4个, 取值范围: [1,2,3,4,6,8]；
二、NHCheckBox.js
import React from "react";
import PropTypes from "prop-types";
import {NHFetch} from "xgui-for-react";
import {Checkbox, Col, Row} from 'antd';
const pathUrl = "/proData/selectDataList";
const CheckboxGroup = Checkbox.Group;
/**
* @Description: Checkbox多选框组件
* @author weishihuai
* @date 2019/3/19 11:00
*
* 说明:
* 1. 使用sign标识从后台查询数据源时，以'DMK_'加上对应代码库标识,如: sign={'DMK_WJCF_WJLX'};
* 2. 使用自定义数据源时,需注意格式. 如: [{label: 'A', value: 'A'},{label: 'B', value: 'B'},{label: 'C', value: 'C'}];
* 3. 使用checkBoxGroupDisabled属性可动态配置整个复选框禁用、启用状态;
* 4. 使用checkBoxDisabledValueArr属性可控制按钮组中哪些checkbox需要被禁用;
* 5. 使用filterType集合filterData可以过滤指定按钮, 如: filterType={'save'} filterData={['A']};
* 6. 使用columnsNum属性可控制一行显示几个复选框,不传默认显示4个, 取值范围: [1,2,3,4,6,8];
*
* 使用示例:
<NHCheckBox sign={'DMK_XTGL_WJLX'}
checkBoxGroupDisabled={false}
defaultValue={['Apple']}
onChange={this.onChange}
columnsNum={1}
dataSource={[
{label: 'A', value: 'A'},
{label: 'B', value: 'B'},
{label: 'C', value: 'C'},
]}
filterType={'remove'}
filterData={['A']}
checkBoxDisabledValueArr={['A', 'B']}
/>
*
*/
class NHCheckBox extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
}
}
//默认属性
static defaultProps = {
checkBoxGroupDisabled: false, //按钮组启用/禁用状态
checkBoxDisabledValueArr: [], //需要禁用的复选框的值(数组)
columnsNum: 4, //每行需要显示的复选框数量
};
componentDidMount() {
const {sign} = this.props;
this.getDataSource(sign);
}
UNSAFE_componentWillReceiveProps(nextProps) {
if ('dataSource' in nextProps) {
const dataSource = nextProps.dataSource;
this.setState({
data: dataSource
});
}
}
//根据数据源标识从后台查询DataSource
getDataSource = (sign) => {
if (!sign) {
this.getCustomDataSource();
} else {
NHFetch(pathUrl, 'GET', {sign: sign})
.then(res => {
if (res) {
let data = res.data;
if (data) {
this.setState({
data: [...data]
});
} else {
this.getCustomDataSource();
}
}
});
}
};
//使用自定义的DataSource
getCustomDataSource = () => {
const {dataSource = []} = this.props;
if (dataSource && dataSource.length > 0) {
this.setState({
data: [...dataSource]
});
}
};
//变化时回调函数
onCheckBoxChange = (checkedValues) => {
const {onChange} = this.props;
if (onChange && typeof onChange === 'function') {
onChange(checkedValues);
}
};
//检查复选框是否需要禁用
isCheckBoxIsDisabled = (checkBoxDisabledValueArr, value) => {
if (checkBoxDisabledValueArr && checkBoxDisabledValueArr.length <= 0) {
return false;
}
let val = checkBoxDisabledValueArr.find((key) => {
return value === key || value === key
});
return val !== undefined;
};
//组装CheckBox Options
buildCheckBoxOptions = (columnsNum, filteredData, checkBoxDisabledValueArr) => {
let spanNum = 24 / columnsNum;
return filteredData.map(option => <Col span={spanNum}><Checkbox
key={option.VALUE || option.value}
disabled={this.isCheckBoxIsDisabled(checkBoxDisabledValueArr, option.VALUE || option.value)}
value={option.VALUE || option.value}>{option.LABEL || option.label}</Checkbox></Col>)
};
render() {
const {data = []} = this.state;
const {checkBoxGroupDisabled, defaultValue, checkBoxDisabledValueArr = [], filterType = '', filterData = [], columnsNum = 4} = this.props;
let checkBoxOptions = [];
//同时指定过滤类型和需要过滤的数据VALUE
if (filterType && filterData) {
switch (filterType) {
case 'remove': { //过滤掉指定key的复选框
let filteredData = data.filter((item) => {
let itemVal = item.VALUE || item.value;
let isExist = filterData.find((val) => {
return val === itemVal;
});
return isExist === undefined;
});
if (filteredData && filteredData.length > 0) {
checkBoxOptions = this.buildCheckBoxOptions(columnsNum, filteredData, checkBoxDisabledValueArr);
}
break;
}
case 'save': { //保留指定key值的复选框
let filteredData = data.filter((item) => {
let itemVal = item.VALUE || item.value;
let isExist = filterData.find((val) => {
return val === itemVal;
});
return isExist !== undefined;
});
if (filteredData && filteredData.length > 0) {
checkBoxOptions = this.buildCheckBoxOptions(columnsNum, filteredData, checkBoxDisabledValueArr);
}
break;
}
default: {
checkBoxOptions = this.buildCheckBoxOptions(columnsNum, data, checkBoxDisabledValueArr);
break;
}
}
} else {
//不进行数据过滤
checkBoxOptions = this.buildCheckBoxOptions(columnsNum, data, checkBoxDisabledValueArr);
}
return (
<div>
<CheckboxGroup style={{width: '100%'}} onChange={this.onCheckBoxChange} disabled={checkBoxGroupDisabled}
defaultValue={defaultValue}>
<Row>
{checkBoxOptions}
</Row>
</CheckboxGroup>
</div>
)
}
}
//属性检查
NHCheckBox.propTypes = {
sign: PropTypes.string, //数据源标识
dataSource: PropTypes.arrayOf( //自定义数据源
PropTypes.shape({
value: PropTypes.string,
label: PropTypes.node
})
),
checkBoxGroupDisabled: PropTypes.bool, //整个多选框按钮组启用/禁用状态
defaultValue: PropTypes.array, //默认选中的选项
onChange: PropTypes.func, //选项变化时的回调函数
checkBoxDisabledValueArr: PropTypes.array, //需要禁用的复选框Value集合
filterType: PropTypes.oneOf(['save', 'remove']), //过滤数据类型,save - 保留 remove - 移除
filterData: PropTypes.array, //过滤数据, save - 保留指定的filterData remove - 移除指定的filterData
columnsNum: PropTypes.oneOf([1, 2, 3, 4, 6, 8]) //每行显示复选框的个数,默认为4个
};
export default NHCheckBox;
三、测试
<NHCheckBox sign={'DMK_XTGL_WJLX'} checkBoxGroupDisabled={false}
/*defaultValue={['.doc']}*/
onChange={this.onChange}
columnsNum={4}
/*dataSource={[
{label: 'A', value: 'A'},
{label: 'B', value: 'B'},
{label: 'C', value: 'C'},
]}*/
filterType={'remove'}
filterData={['.png']}
checkBoxDisabledValueArr={['.excel', '.ISO']}
/>文件类型常量信息：
可以看到，ISO以及excel选项被禁用，以及png被过滤了，还有每行显示4个多选框。以上就是关于CheckBox组件的二次封装以及一些使用方法，具体根据项目需求增加、减少配置就行了。