react-native-modal-selector - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

index.js

		@@ -62,2 +62,4 @@ 'use strict';
		passThruProps: PropTypes.object,
		selectTextPassThruProps: PropTypes.object,
		optionTextPassThruProps: PropTypes.object,
		modalOpenerHitSlop: PropTypes.object,
		@@ -74,2 +76,3 @@ customSelector: PropTypes.node,
		labelExtractor: (item) => item.label,
		componentExtractor: (item) => item.component,
		visible: false,
		@@ -107,2 +110,4 @@ closeOnChange: true,
		passThruProps: {},
		selectTextPassThruProps: {},
		optionTextPassThruProps: {},
		modalOpenerHitSlop: {top: 0, bottom: 0, left: 0, right: 0},
		@@ -172,5 +177,10 @@ customSelector: undefined,
		renderSection = (section) => {
		const optionComponent = this.props.componentExtractor(section);
		let component = optionComponent \|\| (
		<Text style={[styles.sectionTextStyle,this.props.sectionTextStyle]}>{this.props.labelExtractor(section)}</Text>
		);

		return (
		<View key={this.props.keyExtractor(section)} style={[styles.sectionStyle,this.props.sectionStyle]}>
		<Text style={[styles.sectionTextStyle,this.props.sectionTextStyle]}>{this.props.labelExtractor(section)}</Text>
		{component}
		</View>
		@@ -181,5 +191,12 @@ );
		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 \|\| (
		<Text style={[styles.optionTextStyle,this.props.optionTextStyle,isSelectedItem && this.props.selectedItemTextStyle]} {...this.props.optionTextPassThruProps}>
		{optionLabel}
		</Text>
		);

		return (
		@@ -195,8 +212,4 @@ <TouchableOpacity
		>
		<View style={[styles.optionStyle, this.props.optionStyle, isLastItem &&
		{borderBottomWidth: 0}]}>
		<Text style={[styles.optionTextStyle,this.props.optionTextStyle,
		isSelectedItem && this.props.selectedItemTextStyle]}>
		{optionLabel}
		</Text>
		<View style={[styles.optionStyle, this.props.optionStyle, isLastItem && {borderBottomWidth: 0}]}>
		{component}
		</View>
		@@ -247,3 +260,3 @@ </TouchableOpacity>);
		<View style={[styles.selectStyle, this.props.selectStyle]}>
		<Text style={[styles.selectTextStyle, this.props.selectTextStyle]}>{this.state.selected}</Text>
		<Text style={[styles.selectTextStyle, this.props.selectTextStyle]} {...this.props.selectTextPassThruProps}>{this.state.selected}</Text>
		</View>
		@@ -250,0 +263,0 @@ );

package.json

		{
		"name": "react-native-modal-selector",
		"version": "1.0.0",
		"version": "1.0.1",
		"description": "A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.",
		@@ -5,0 +5,0 @@ "main": "index.js",

README.md

		@@ -90,3 +90,3 @@ # react-native-modal-selector [![npm version](https://badge.fury.io/js/react-native-modal-selector.svg)](https://badge.fury.io/js/react-native-modal-selector)

		The selector accept a specific format of data:
		The selector accepts a specific format of data:
		```javascript
		@@ -96,2 +96,13 @@ [{ key: 5, label: 'Red Apples' }]

		Optionally provide a `component` key which overrides the default label text:
		```javascript
		[{
		key: 5,
		label: 'Red Apples',
		component: <View style={{backgroundColor: 'red'}}><Text style={{color: 'white'}}>Red Apples custom component ☺</Text></View>
		}]
		```

		<img src="https://user-images.githubusercontent.com/6295083/51210593-d3fbae00-18d8-11e9-8f51-d1ca4f9f8267.png" />

		If your data has a specific format, you can define extractors of data, example:
		@@ -115,3 +126,3 @@ ```javascript
		------------------- \| -------- \| -------- \| ------------ \| -----------
		`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
		@@ -122,4 +133,5 @@ `onModalOpen` \| function \| Yes \| () => {} \| callback function, when modal is opening
		`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
		@@ -149,2 +161,4 @@ `cancelText` \| string \| Yes \| `cancel` \| text of the cancel button
		`passThruProps`\| object \| Yes \| {} \| props to pass through to the container View and each option TouchableOpacity (e.g. testID for testing)
		`selectTextPassThruProps`\| object \| Yes \| {} \| props to pass through to the select text component
		`optionTextPassThruProps`\| object \| Yes \| {} \| props to pass through to the options text components in the modal
		`openButtonContainerAccessible`\| bool \| Yes \| false \| `true` enables accessibility for the open button container. Note: if `false` be sure to define accessibility props directly in the wrapped component.
		@@ -151,0 +165,0 @@ `listItemAccessible`\| bool \| Yes \| false \| `true` enables accessibility for data items. Note: data items should have an `accessibilityLabel` property if this is enabled

style.js

@@ -0,0 +0,0 @@ 'use strict';

.eslintignore