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)} )