react-native-select-multiple - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

package.json

 {
   "name": "react-native-select-multiple",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "A customiseable ListView that allows you to select multiple rows",
@@ -5,0 +5,0 @@ "main": "src/SelectMultiple.js",

README.md

@@ -43,2 +43,50 @@ # react-native-select-multiple [![dependencies Status](https://david-dm.org/tableflip/react-native-select-multiple/status.svg)](https://david-dm.org/tableflip/react-native-select-multiple)
 
+## Customize label
+
+```js
+import React, { Component } from 'react'
+import { View, Text, Image } from 'react-native'
+import SelectMultiple from 'react-native-select-multiple'
+
+const fruits = ['Apples', 'Oranges', 'Pears']
+// --- OR ---
+// const fruits = [
+//   { label: 'Apples', value: 'appls' },
+//   { label: 'Oranges', value: 'orngs' },
+//   { label: 'Pears', value: 'pears' }
+// ]
+
+const renderLabel = (label, style) => {
+  return (
+    <View style={{flexDirection: 'row', alignItems: 'center'}}>
+      <Image style={{width: 42, height: 42}} source={{uri: 'https://dummyimage.com/100x100/52c25a/fff&text=S'}} />
+      <View style={{marginLeft: 10}}>
+        <Text style={style}>{label}</Text>
+      </View>
+    </View>
+  )
+}
+
+class App extends Component {
+  state = { selectedFruits: [] }
+
+  onSelectionsChange = (selectedFruits) => {
+    // selectedFruits is array of { label, value }
+    this.setState({ selectedFruits })
+  }
+
+  render () {
+    return (
+      <View>
+        <SelectMultiple
+          items={fruits}
+          renderLabel={renderLabel}
+          selectedItems={this.state.selectedFruits}
+          onSelectionsChange={this.onSelectionsChange} />
+      </View>
+    )
+  }
+}
+```
+
 ## Properties
@@ -61,2 +109,3 @@
 | 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. |
+| renderLabel | null | `func` | Function for render label. |
 
@@ -63,0 +112,0 @@ ----

src/SelectMultiple.js

@@ -11,3 +11,3 @@ import React, { Component } from 'react'
   PropTypes.string,
-  PropTypes.shape({ label: PropTypes.string, value: PropTypes.any })
+  PropTypes.shape({ label: PropTypes.any, value: PropTypes.any })
 ])
@@ -33,5 +33,4 @@
     selectedCheckboxSource: sourceType,
-
+    renderLabel: PropTypes.func,
     listViewProps: PropTypes.any,
-
     style: styleType,
@@ -55,3 +54,4 @@ rowStyle: styleType,
     checkboxSource: checkbox,
-    selectedCheckboxSource: checkboxChecked
+    selectedCheckboxSource: checkboxChecked,
+    renderLabel: null
   }
@@ -120,2 +120,11 @@
 
+  renderLabel = (label, style, selected) => {
+    if (this.props.renderLabel) {
+      return this.props.renderLabel(label, style, selected)
+    }
+    return (
+      <Text style={style}>{label}</Text>
+    )
+  }
+
   renderItemRow = (row) => {
@@ -151,3 +160,3 @@ let {
           <Image style={checkboxStyle} source={checkboxSource} />
-          <Text style={labelStyle}>{row.label}</Text>
+          {this.renderLabel(row.label, labelStyle, row.selected)}
         </View>
@@ -154,0 +163,0 @@ </TouchableWithoutFeedback>

No alert changes

Improved metrics

Total package byte prevSize

13821

22.1%

Number of package files

9

12.5%

Lines of code

204

40.69%

Number of lines in readme file

115

74.24%

No dependency changes