Commit 59544eb2 authored by PiTrem's avatar PiTrem
Browse files

checkBoxes css fix closes #254

parent c2268b17
import React from 'react'
import {Table} from 'react-bootstrap'
import PropTypes from 'prop-types'
const CheckBoxs = ({items, toggleCheckbox, toggleCheckAll, checkedAll}) => {
const CheckBoxs = ({items, toggleCheckbox, toggleCheckAll, checkedAll, customClass = 'check-box-list' , customStyle = {}}) => {
let checkBoxs = items.map( (setting, i) => {
const {text, checked} = setting
return(
......@@ -11,7 +12,10 @@ const CheckBoxs = ({items, toggleCheckbox, toggleCheckAll, checkedAll}) => {
toggleCheckbox={toggleCheckbox.bind(null, text, checked)} />
)
})
const lgth = items && items.length
if (customClass == 'check-box-list') {
customClass = lgth && lgth < 4 ? `check-box-list-${lgth}` : 'check-box-list'
}
return (
<Table striped>
<thead>
......@@ -31,7 +35,7 @@ const CheckBoxs = ({items, toggleCheckbox, toggleCheckAll, checkedAll}) => {
<tbody>
<tr >
<td>
<ul id="export-import">
<ul className={customClass} style={customStyle}>
{checkBoxs}
</ul>
</td>
......@@ -41,11 +45,12 @@ const CheckBoxs = ({items, toggleCheckbox, toggleCheckAll, checkedAll}) => {
)
}
CheckBoxs.propTypes = {
items: React.PropTypes.array,
checkedAll: React.PropTypes.bool,
toggleCheckAll: React.PropTypes.func,
toggleCheckbox: React.PropTypes.func,
items: PropTypes.array,
checkedAll: PropTypes.bool,
toggleCheckAll: PropTypes.func,
toggleCheckbox: PropTypes.func,
customClass: PropTypes.string,
customStyle: PropTypes.object,
}
const CheckBox = ({text, checked, toggleCheckbox}) => {
......@@ -60,10 +65,11 @@ const CheckBox = ({text, checked, toggleCheckbox}) => {
)
}
CheckBox.propTypes = {
text: React.PropTypes.string,
checked: React.PropTypes.bool,
toggleCheckbox: React.PropTypes.func,
text: PropTypes.string,
checked: PropTypes.bool,
toggleCheckbox: PropTypes.func,
}
export default CheckBoxs
......@@ -47,18 +47,31 @@
margin-bottom: 10px;
}
#export-import {
list-style-type: none;
-moz-column-count: 4;
-moz-column-gap: 20px;
-webkit-column-count: 4;
-webkit-column-gap: 20px;
column-count: 4;
column-gap: 20px;
@mixin check-box-list-common($i) {
list-style-type: none;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;
-moz-column-count: $i;
-webkit-column-count: $i;
column-count: $i;
}
.check-box-list {
@include check-box-list-common(4);
}
.check-box-list-1 {
@include check-box-list-common(1);
}
.check-box-list-2 {
@include check-box-list-common(2);
}
.check-box-list-3 {
@include check-box-list-common(3);
}
.select-assign-collection {
.separator {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment