diff --git a/README.md b/README.md
index 67ae60d..eed44ca 100644
--- a/README.md
+++ b/README.md
@@ -113,6 +113,7 @@ class App extends Component {
| selectedRowStyle | [default styles](src/SelectMultiple.styles.js) | `object` | [Style](https://facebook.github.io/react-native/docs/view.html#style) for the row container when selected. |
| selectedCheckboxStyle | [default styles](src/SelectMultiple.styles.js) | `object` | [Style](https://facebook.github.io/react-native/docs/image.html#style) for the checkbox image when selected. |
| selectedLabelStyle | [default styles](src/SelectMultiple.styles.js) | `object` | [Style](https://facebook.github.io/react-native/docs/text.html#style) for the text label when selected. |
+| renderCheckbox | null | `func` | Function for render custom checkbox. |
| renderLabel | null | `func` | Function for render label. |
## Contribute
diff --git a/src/SelectMultiple.js b/src/SelectMultiple.js
index 19ac7f3..d7304a5 100644
--- a/src/SelectMultiple.js
+++ b/src/SelectMultiple.js
@@ -28,6 +28,7 @@ export default class SelectMultiple extends Component {
onSelectionsChange: PropTypes.func.isRequired,
checkboxSource: sourceType,
+ renderCheckbox: PropTypes.func,
selectedCheckboxSource: sourceType,
renderLabel: PropTypes.func,
listViewProps: PropTypes.any,
@@ -114,46 +115,55 @@ export default class SelectMultiple extends Component {
return
}
- renderLabel = (label, style, selected) => {
+ renderLabel = (row) => {
+ const {labelStyle, selectedLabelStyle} = this.props
+ const labelStyleToRender = row.selected
+ ? mergeStyles(styles.label, labelStyle, selectedLabelStyle)
+ : mergeStyles(styles.label, labelStyle);
+
if (this.props.renderLabel) {
- return this.props.renderLabel(label, style, selected)
+ return this.props.renderLabel(row.label, labelStyleToRender, row.selected)
}
return (
- {label}
+ {row.label}
)
}
- renderItemRow = (row) => {
- let {
- checkboxSource,
- rowStyle,
- labelStyle,
- checkboxStyle
- } = this.props
+ getCheckboxStyle = (row) => {
+ const {renderCheckbox, selectedCheckboxStyle, checkboxStyle} = this.props
- const {
- selectedCheckboxSource,
- selectedRowStyle,
- selectedCheckboxStyle,
- selectedLabelStyle
- } = this.props
+ if (row.selected) {
+ return mergeStyles(styles.checkbox, checkboxStyle, selectedCheckboxStyle)
+ } else {
+ return mergeStyles(styles.checkbox, checkboxStyle)
+ }
+ }
+
+ getRowStyle = (row) => {
+ const {rowStyle, selectedRowStyle} = this.props;
if (row.selected) {
- checkboxSource = selectedCheckboxSource
- rowStyle = mergeStyles(styles.row, rowStyle, selectedRowStyle)
- checkboxStyle = mergeStyles(styles.checkbox, checkboxStyle, selectedCheckboxStyle)
- labelStyle = mergeStyles(styles.label, labelStyle, selectedLabelStyle)
+ return mergeStyles(styles.row, rowStyle, selectedRowStyle)
} else {
- rowStyle = mergeStyles(styles.row, rowStyle)
- checkboxStyle = mergeStyles(styles.checkbox, checkboxStyle)
- labelStyle = mergeStyles(styles.label, labelStyle)
+ return mergeStyles(styles.row, rowStyle)
}
+ }
+
+ renderItemRow = (row) => {
+ const {
+ checkboxSource,
+ renderCheckbox,
+ selectedCheckboxSource
+ } = this.props
return (
this.onRowPress(row)}>
-
-
- {this.renderLabel(row.label, labelStyle, row.selected)}
+
+ {renderCheckbox
+ ? renderCheckbox(row.selected)
+ :
+ }
+ {this.renderLabel(row)}
)