diff --git a/README.md b/README.md index 5486fa48..9b7ead2f 100644 --- a/README.md +++ b/README.md @@ -87,11 +87,22 @@ class SampleApp extends Component { ## Data Format -The selector accept a specific format of data: +The selector accepts a specific format of data: ```javascript [{ key: 5, label: 'Red Apples' }] ``` +Optionally provide a `component` key which overrides the default label text: +```javascript +[{ + key: 5, + label: 'Red Apples', + component: Red Apples custom component ☺ +}] +``` + + + If your data has a specific format, you can define extractors of data, example: ```javascript this.setState({data: [{ id: 5, name: 'Red Apples' }]}); @@ -110,14 +121,15 @@ return ( ### Props Prop | Type | Optional | Default | Description ------------------- | -------- | -------- | ------------ | ----------- -`data` | array | No | [] | array of objects with a unique key and label to select in the modal. +`data` | array | No | [] | array of objects with a unique `key` and `label` to select in the modal. Optional `component` overrides label text. `onChange` | function | Yes | () => {} | callback function, when the users has selected an option `onModalOpen` | function | Yes | () => {} | callback function, when modal is opening `onModalClose` | function | Yes | () => {} | callback function, when modal is closing `keyExtractor`      | function | Yes     | (data) => data.key   | extract the key from the data item `labelExtractor`    | function | Yes     | (data) => data.label | extract the label from the data item +`componentExtractor`| function | Yes     | (data) => data.component | extract the component from the data item `visible` | bool | Yes | false | control open/close state of modal -`closeOnChange`´ | bool | Yes | true | control if modal closes on select +`closeOnChange` | bool | Yes | true | control if modal closes on select `initValue` | string | Yes | `Select me!` | text that is initially shown on the button `cancelText` | string | Yes | `cancel` | text of the cancel button `animationType` | string | Yes | `slide` | type of animation to be used to show the modal. Must be one of `none`, `slide` or `fade`. diff --git a/SampleApp/App.js b/SampleApp/App.js index 6fb9a2ee..3b55c1eb 100644 --- a/SampleApp/App.js +++ b/SampleApp/App.js @@ -4,6 +4,7 @@ import React, { Component } from 'react'; import { View, + Text, TextInput, Switch } from 'react-native'; @@ -24,7 +25,7 @@ class SampleApp extends Component { let index = 0; const data = [ { key: index++, section: true, label: 'Fruits' }, - { key: index++, label: 'Red Apples' }, + { key: index++, label: 'Red Apples', component: Red Apples custom component ☺ }, { key: index++, label: 'Cherries' }, { key: index++, label: 'Cranberries' }, { key: index++, label: 'Pink Grapefruit' }, diff --git a/index.js b/index.js index e6514d76..09c99700 100644 --- a/index.js +++ b/index.js @@ -72,6 +72,7 @@ const defaultProps = { onModalClose: () => {}, keyExtractor: (item) => item.key, labelExtractor: (item) => item.label, + componentExtractor: (item) => item.component, visible: false, closeOnChange: true, initValue: 'Select me!', @@ -170,17 +171,29 @@ export default class ModalSelector extends React.Component { } renderSection = (section) => { + const optionComponent = this.props.componentExtractor(section); + let component = optionComponent || ( + {this.props.labelExtractor(section)} + ); + return ( - {this.props.labelExtractor(section)} + {component} ); } renderOption = (option, isLastItem, isFirstItem) => { + const optionComponent = this.props.componentExtractor(option); const optionLabel = this.props.labelExtractor(option); const isSelectedItem = optionLabel === this.state.selected; + let component = optionComponent || ( + + {optionLabel} + + ); + return ( - - - {optionLabel} - + + {component} ); }