├── LICENSE ├── ListPopover.js ├── README.md ├── Screenshots ├── screen1.png ├── screen2.png └── screen3.png └── package.json /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Bulent Tastan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /ListPopover.js: -------------------------------------------------------------------------------- 1 | /** 2 | * ListPopover - Popover rendered with a selectable list. 3 | */ 4 | "use strict"; 5 | 6 | import React from 'react'; 7 | import PropTypes from 'prop-types'; 8 | import { 9 | ListView, 10 | StyleSheet, 11 | Text, 12 | Dimensions, 13 | TouchableOpacity, 14 | View 15 | } from 'react-native'; 16 | const SCREEN_HEIGHT = Dimensions.get('window').height; 17 | const noop = () => {}; 18 | const ds = new ListView.DataSource({rowHasChanged: (r1,r2)=>(r1!==r2)}); 19 | 20 | class ListPopover extends React.Component { 21 | constructor(props) { 22 | super(props); 23 | this.state = { 24 | dataSource: ds.cloneWithRows(this.props.list) 25 | }; 26 | } 27 | 28 | componentWillReceiveProps(nextProps) { 29 | if (nextProps.list !== this.props.list) { 30 | this.setState({dataSource: ds.cloneWithRows(nextProps.list)}); 31 | } 32 | } 33 | 34 | handleClick(data) { 35 | this.props.onClick(data); 36 | this.props.onClose(); 37 | } 38 | 39 | renderRow(rowData) { 40 | const separatorStyle = this.props.separatorStyle || DefaultStyles.separator; 41 | const rowTextStyle = this.props.rowText || DefaultStyles.rowText; 42 | 43 | let separator = ; 44 | if (rowData === this.props.list[0]) { 45 | separator = null; 46 | } 47 | 48 | let row = {rowData} 49 | if (this.props.renderRow) { 50 | row = this.props.renderRow(rowData); 51 | } 52 | 53 | return ( 54 | 55 | {separator} 56 | this.handleClick(rowData)}> 57 | {row} 58 | 59 | 60 | ); 61 | } 62 | 63 | renderList() { 64 | const styles = this.props.style || DefaultStyles; 65 | let maxHeight = {}; 66 | if (this.props.list.length > 12) { 67 | maxHeight = {height: SCREEN_HEIGHT * 3/4}; 68 | } 69 | return ( 70 | this.renderRow(rowData)} 74 | /> 75 | ); 76 | } 77 | 78 | render() { 79 | const containerStyle = this.props.containerStyle || DefaultStyles.container; 80 | const popoverStyle = this.props.popoverStyle || DefaultStyles.popover; 81 | 82 | if (this.props.isVisible) { 83 | return ( 84 | 85 | 86 | {this.renderList()} 87 | 88 | 89 | ); 90 | } else { 91 | return (); 92 | } 93 | } 94 | } 95 | 96 | ListPopover.propTypes = { 97 | list: PropTypes.array.isRequired, 98 | isVisible: PropTypes.bool, 99 | onClick: PropTypes.func, 100 | onClose: PropTypes.func, 101 | }; 102 | 103 | ListPopover.defaultProps = { 104 | list: [""], 105 | isVisible: false, 106 | onClick: noop, 107 | onClose: noop 108 | }; 109 | 110 | const DefaultStyles = StyleSheet.create({ 111 | container: { 112 | alignItems: 'center', 113 | justifyContent: 'center', 114 | position: 'absolute', 115 | width: '100%', 116 | zIndex: 10, 117 | }, 118 | popover: { 119 | backgroundColor: '#fff', 120 | borderRadius: 3, 121 | padding: 3, 122 | width: '96%', 123 | }, 124 | rowText: { 125 | padding: 10, 126 | }, 127 | separator: { 128 | backgroundColor: '#ccc', 129 | height: 0.5, 130 | marginLeft: 8, 131 | marginRight: 8, 132 | }, 133 | }); 134 | 135 | export default ListPopover; 136 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React-Native List Popover 2 | 3 | Popover is a great way to show a list of items for users to choose from. With component you can add a very simple pop over screen with a list of items as the child component and access the selected item from the parent component. It is a very easy way of adding a list of options to the UI. 4 | 5 | The main properties to send from the parent component: 6 | * `list` list of items to choose from 7 | * `isVisible` indicator that makes the popover visible or not 8 | * `onClick` callback function that takes an `item` parameter to handle the click operation 9 | * `onClose` callback function to set the isVisible to false to close the popover 10 | 11 | 12 | ## Screenshots 13 | Before | List Popover | Selected 14 | -------|--------------|--------- 15 | ![](https://raw.githubusercontent.com/bulenttastan/react-native-list-popover/master/Screenshots/screen1.png) | ![](https://raw.githubusercontent.com/bulenttastan/react-native-list-popover/master/Screenshots/screen2.png) | ![](https://raw.githubusercontent.com/bulenttastan/react-native-list-popover/master/Screenshots/screen3.png) 16 | 17 | # Usage 18 | 19 | ```js 20 | import React from 'react'; 21 | import {StyleSheet, Text, View, TouchableHighlight} from 'react-native'; 22 | import ListPopover from 'react-native-list-popover'; 23 | 24 | const items = ['Item 1', 'Item 2']; 25 | 26 | export default class App extends React.Component { 27 | constructor(props) { 28 | super(props); 29 | this.state = { 30 | isVisible: false 31 | }; 32 | } 33 | 34 | render() { 35 | return ( 36 | 37 | this.setState({isVisible: true})}> 40 | {this.state.item || 'Select'} 41 | 42 | this.setState({item: item})} 46 | onClose={() => this.setState({isVisible: false})}/> 47 | 48 | ); 49 | } 50 | } 51 | 52 | const styles = StyleSheet.create({ 53 | container: { 54 | flex: 1, 55 | alignItems: 'center', 56 | backgroundColor: '#532860', 57 | justifyContent: 'center', 58 | }, 59 | button: { 60 | backgroundColor: '#b8c', 61 | borderRadius: 4, 62 | marginLeft: 10, 63 | marginRight: 10, 64 | padding: 10, 65 | }, 66 | }); 67 | ``` 68 | -------------------------------------------------------------------------------- /Screenshots/screen1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bulenttastan/react-native-list-popover/82d445766a6aa37a86e620ca50a22a3e70b0416b/Screenshots/screen1.png -------------------------------------------------------------------------------- /Screenshots/screen2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bulenttastan/react-native-list-popover/82d445766a6aa37a86e620ca50a22a3e70b0416b/Screenshots/screen2.png -------------------------------------------------------------------------------- /Screenshots/screen3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bulenttastan/react-native-list-popover/82d445766a6aa37a86e620ca50a22a3e70b0416b/Screenshots/screen3.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-list-popover", 3 | "version": "1.1.1", 4 | "description": " component to render a selectable list", 5 | "main": "ListPopover.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/bulenttastan/react-native-list-popover.git" 9 | }, 10 | "keywords": [ 11 | "list", 12 | "popover", 13 | "selectable", 14 | "modal" 15 | ], 16 | "author": "Bulent Tastan @bulenttastan", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/bulenttastan/react-native-list-popover/issues" 20 | }, 21 | "homepage": "https://github.com/bulenttastan/react-native-list-popover" 22 | } 23 | --------------------------------------------------------------------------------