WIP

Author: toystars

src/components/expanded-multi-select-view/ExpandedMultiSelectView.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { View, TextInput, TouchableOpacity, Platform, Text } from 'react-native';
+import Ionicons from "react-native-vector-icons/Ionicons";
+import { SearchIcon } from '../search-icon';
+import { ColorsPack } from '../../styles/colors.enum';
+import styles from './styles';
+
+interface Props {
+    searchTerm: string;
+    hideSubmitButton: boolean;
+    singleSelection: boolean;
+    onChangeSearchTerm: (searchTerm: string) => void;
+    onSubmitEditing: () => void;
+    onSubmitButtonPress: () => void;
+    children: React.ReactElement;
+}
+
+export class ExpandedMultiSelectView extends React.Component<Props> {
+    render() {
+        const {
+            searchTerm,
+            hideSubmitButton,
+            singleSelection,
+            onChangeSearchTerm,
+            onSubmitEditing,
+            onSubmitButtonPress,
+            children
+        } = this.props;
+        return (
+            <View style={styles.container}>
+                <View style={styles.inputGroup}>
+                    <SearchIcon />
+                    <TextInput
+                        autoFocus
+                        onChangeText={(searchTerm: string) => onChangeSearchTerm(searchTerm)}
+                        onSubmitEditing={() => onSubmitEditing()}
+                        placeholder="Search"
+                        placeholderTextColor={ColorsPack.placeholderTextColor}
+                        underlineColorAndroid="transparent"
+                        style={styles.searchInput}
+                        value={searchTerm}
+                    />
+                    {hideSubmitButton && (
+                        <TouchableOpacity onPress={onSubmitButtonPress}>
+                            <Ionicons
+                                name={Platform.OS === 'ios' ? 'ios-caret-down-outline' : 'md-caret-down-outline'}
+                                style={styles.indicator}
+                            />
+                        </TouchableOpacity>
+                    )}
+                </View>
+                <View style={styles.expandedItemsContainer}>
+                    {children}
+                    {!singleSelection && !hideSubmitButton && (
+                        <TouchableOpacity onPress={onSubmitButtonPress} style={styles.submitButton}>
+                            <Text style={styles.submitButtonText}>
+                                Submit
+                            </Text>
+                        </TouchableOpacity>
+                    )}
+                </View>
+            </View>
+        );
+    }
+}

src/components/expanded-multi-select-view/index.ts

@@ -0,0 +1 @@
+export * from './ExpandedMultiSelectView';

src/components/expanded-multi-select-view/styles.ts

@@ -0,0 +1,38 @@
+import { StyleSheet } from 'react-native';
+import { ColorsPack } from '../../styles/colors.enum';
+
+export default StyleSheet.create({
+    container: {
+        height: 250,
+        marginBottom: 10,
+        elevation: 2
+    },
+    inputGroup: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingLeft: 16,
+        backgroundColor: ColorsPack.backgroundColor
+    },
+    searchInput: {
+        flex: 1
+    },
+    indicator: {
+        fontSize: 30,
+        color: ColorsPack.placeholderTextColor,
+    },
+    expandedItemsContainer: {
+        flexDirection: 'column',
+        backgroundColor: '#fafafa'
+    },
+    submitButton: {
+        height: 40,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: ColorsPack.primary
+    },
+    submitButtonText: {
+        color: ColorsPack.light,
+        fontSize: 14,
+    },
+});