react-native-input-select 0.2.0

package/package.json

@@ -0,0 +1,151 @@
+{
+  "name": "react-native-input-select",
+  "version": "0.2.0",
+  "description": "Dropdown package for react-native",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "react-native-select.podspec",
+    "!lib/typescript/example",
+    "!android/build",
+    "!ios/build",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typescript": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepare": "bob build",
+    "release": "release-it -- minor --ci",
+    "example": "yarn --cwd example",
+    "pods": "cd example && pod-install --quiet",
+    "bootstrap": "yarn example && yarn && yarn pods"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": "https://github.com/azeezat/react-native-select",
+  "author": "Azeezat <azeezat94@gmail.com> (https://github.com/azeezat)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/azeezat/react-native-select/issues"
+  },
+  "homepage": "https://github.com/azeezat/react-native-select#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^11.0.0",
+    "@react-native-community/eslint-config": "^2.0.0",
+    "@release-it/conventional-changelog": "^2.0.0",
+    "@types/jest": "^26.0.0",
+    "@types/react": "^16.9.19",
+    "@types/react-native": "^0.66.11",
+    "commitlint": "^11.0.0",
+    "eslint": "^7.2.0",
+    "eslint-config-prettier": "^7.0.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "husky": "^6.0.0",
+    "jest": "^26.0.1",
+    "pod-install": "^0.1.0",
+    "prettier": "^2.0.5",
+    "react": "16.13.1",
+    "react-native": "0.63.4",
+    "react-native-builder-bob": "^0.18.2",
+    "release-it": "^14.11.8",
+    "typescript": "^4.1.3"
+  },
+  "peerDependencies": {
+    "@react-native-community/checkbox": "^0.5.9",
+    "react": "*",
+    "react-native": "*"
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native-community",
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "dependencies": {
+    "@react-native-community/checkbox": "^0.5.9"
+  }
+}

package/src/Dropdown.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Image,
+} from 'react-native';
+import { colors } from './styles/colors';
+import { typography } from './styles/typography';
+
+const Dropdown = ({
+  label,
+  placeholder,
+  helperText,
+  error,
+  getSelectedItemsLabel,
+  setOpen,
+  open,
+  isMultiple,
+  selectedItem,
+  selectedItems,
+  labelStyle,
+  dropdownStyle,
+  dropdownContainerStyle,
+  selectedItemStyle,
+}: any) => {
+  return (
+    <View style={[styles.dropdownInputContainer, dropdownContainerStyle]}>
+      {label && label !== '' && (
+        <Text style={[styles.label, labelStyle]}>{label}</Text>
+      )}
+      <Pressable
+        onPress={() => setOpen(!open)}
+        style={({ pressed }) => [
+          pressed && styles.inputFocusState,
+          styles.input,
+          dropdownStyle,
+        ]}
+      >
+        <ScrollView
+          horizontal
+          alwaysBounceHorizontal
+          showsHorizontalScrollIndicator={false}
+        >
+          <View
+            style={styles.selectedItemsContainer}
+            onStartShouldSetResponder={() => true}
+          >
+            {isMultiple ? (
+              getSelectedItemsLabel().map((item: any, i: Number) => (
+                <Text
+                  key={`SelectedItems${i}`}
+                  style={[styles.selectedItems, selectedItemStyle]}
+                >
+                  {item}
+                </Text>
+              ))
+            ) : (
+              <Text style={styles.blackText}>{getSelectedItemsLabel()}</Text>
+            )}
+          </View>
+
+          {!selectedItem && selectedItems?.length === 0 && (
+            <Text style={styles.blackText}>
+              {placeholder ?? 'Select an option'}
+            </Text>
+          )}
+        </ScrollView>
+        <View style={styles.iconStyle}>
+          <Image source={require('../src/asset/arrow-down.png')} />
+        </View>
+      </Pressable>
+
+      {error && error !== '' && <Text style={styles.error}>{error}</Text>}
+
+      {helperText && helperText !== '' && !error && (
+        <Text style={styles.helper}>{helperText}</Text>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  label: { marginBottom: 16, color: colors.gray, ...typography.caption },
+  input: {
+    paddingVertical: 18,
+    paddingHorizontal: 23,
+    backgroundColor: colors.lightGray,
+    borderRadius: 8,
+    borderColor: colors.dark,
+    borderWidth: 1,
+    color: colors.dark,
+    width: '100%',
+    minHeight: 64,
+  },
+  inputFocusState: {
+    borderWidth: 2,
+    borderStyle: 'solid',
+    borderColor: colors.primary,
+    borderRadius: 8,
+  },
+  inputFocusErrorState: {
+    borderWidth: 2,
+    borderStyle: 'solid',
+    borderColor: colors.cliqkiRed,
+  },
+  iconStyle: { position: 'absolute', right: 25, top: 25 },
+  error: { color: colors.cliqkiRed, marginTop: 8, ...typography.caption },
+  helper: { marginTop: 8, color: colors.primary, ...typography.caption },
+  dropdownInputContainer: { marginBottom: 23, width: '100%' },
+  selectedItemsContainer: { flexDirection: 'row', flexWrap: 'nowrap' },
+  selectedItems: {
+    color: colors.white,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 10,
+    backgroundColor: colors.primary,
+    marginRight: 10,
+  },
+  blackText: { color: colors.black },
+});
+
+export default Dropdown;

package/src/DropdownList.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { View, FlatList, StyleSheet } from 'react-native';
+import DropdownListItem from './DropdownListItem';
+import { colors } from './styles/colors';
+
+const DropdownList = ({
+  options,
+  optionLabel,
+  optionValue,
+  isMultiple,
+  selectedItems,
+  selectedItem,
+  handleMultipleSelections,
+  handleSingleSelection,
+}: any) => {
+  return (
+    <FlatList
+      data={options}
+      extraData={isMultiple ? selectedItems : selectedItem}
+      initialNumToRender={5}
+      // ListEmptyComponent={
+      //   <EmptyStateComponent
+      //     style={{alignItems: 'flex-start', marginTop: 30}}
+      //     message="Be the first to reply"
+      //   />
+      // }
+      ItemSeparatorComponent={() => <View style={styles.itemSeparatorStyle} />}
+      renderItem={(item) =>
+        _renderItem(item, {
+          optionLabel,
+          optionValue,
+          isMultiple,
+          selectedOption: isMultiple ? selectedItems : selectedItem,
+          onChange: isMultiple
+            ? handleMultipleSelections
+            : handleSingleSelection,
+        })
+      }
+      keyExtractor={(_item, index) => `Options${index}`}
+    />
+  );
+};
+
+const _renderItem = ({ item }: any, props: any) => {
+  return (
+    <DropdownListItem
+      item={item}
+      optionLabel={props.optionLabel}
+      optionValue={props.optionValue}
+      isMultiple={props.isMultiple}
+      selectedOption={props.selectedOption}
+      onChange={props.onChange}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  modalBackgroundStyle: { backgroundColor: 'rgba(0, 0, 0, 0.5)' },
+  modalOptionsContainer: {
+    maxHeight: '50%',
+    backgroundColor: colors.white,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+  },
+  itemSeparatorStyle: {
+    backgroundColor: colors.gray,
+    height: 1,
+    opacity: 0.15,
+  },
+});
+
+export default DropdownList;

package/src/DropdownListItem.tsx

@@ -0,0 +1,51 @@
+import React, { memo } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import CheckBox from '@react-native-community/checkbox';
+import { colors } from './styles/colors';
+
+const DropdownListItem = ({
+  item,
+  optionLabel,
+  optionValue,
+  isMultiple,
+  selectedOption,
+  onChange,
+}: any) => {
+  const selectedOptionValue = optionValue ?? 'value';
+  return (
+    <TouchableOpacity
+      style={styles.modalOptions}
+      onPress={() => onChange(item[selectedOptionValue])}
+    >
+      <View style={styles.spacing}>
+        <CheckBox
+          value={
+            isMultiple
+              ? selectedOption.includes(item[selectedOptionValue])
+              : [selectedOption].includes(item[selectedOptionValue])
+          }
+          onChange={() => onChange(item[selectedOptionValue])}
+          boxType="circle" //works on ios only
+          tintColors={{ true: colors.primary }} //android control
+          onCheckColor={colors.primary} //ios checkmark colour control
+          onTintColor={colors.primary} //ios box colour control
+        />
+      </View>
+      <View>
+        <Text>{item[optionLabel ?? 'label']}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  spacing: { marginRight: 10 },
+  modalOptions: {
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
+
+export default memo(DropdownListItem);

package/src/Modal.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  Modal,
+  TouchableOpacity,
+  SafeAreaView,
+  StyleSheet,
+} from 'react-native';
+import { colors } from './styles/colors';
+
+const CustomModal = ({
+  open,
+  setOpen,
+  onRequestClose,
+  modalBackgroundStyle,
+  modalOptionsContainerStyle,
+  children,
+}: any) => {
+  return (
+    <Modal
+      transparent={true}
+      visible={open}
+      onRequestClose={() => onRequestClose()}
+      animationType="fade"
+    >
+      <TouchableOpacity
+        onPress={() => setOpen(!open)}
+        style={[
+          styles.modalContainer,
+          styles.modalBackgroundStyle,
+          modalBackgroundStyle,
+        ]}
+      >
+        <SafeAreaView
+          style={[styles.modalOptionsContainer, modalOptionsContainerStyle]}
+        >
+          {children}
+        </SafeAreaView>
+      </TouchableOpacity>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  modalBackgroundStyle: { backgroundColor: 'rgba(0, 0, 0, 0.5)' },
+  modalOptionsContainer: {
+    maxHeight: '50%',
+    backgroundColor: colors.white,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+  },
+});
+
+export default CustomModal;

package/src/index.tsx

@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import Dropdown from './Dropdown';
+import CustomModal from './Modal';
+import DropdownList from './DropdownList';
+
+export const DropdownSelect = ({
+  placeholder,
+  label,
+  error,
+  helperText,
+  options,
+  optionLabel,
+  optionValue,
+  onValueChange,
+  selectedValue,
+  isMultiple,
+  labelStyle,
+  dropdownStyle,
+  dropdownContainerStyle,
+  selectedItemStyle,
+  modalBackgroundStyle,
+  modalOptionsContainer,
+}: any) => {
+  const [open, setOpen] = useState(false);
+  const [selectedItem, setSelectedItem] = useState(selectedValue); //for single selection
+  const [selectedItems, setSelectedItems] = useState(
+    Array.isArray(selectedValue) ? selectedValue : []
+  ); //for multiple selection
+
+  /*===========================================
+   * Selection handlers
+   *==========================================*/
+  const handleSingleSelection = (value: any) => {
+    if (selectedItem === value) {
+      setSelectedItem(null);
+    } else {
+      setSelectedItem(value);
+      onValueChange(value); //send value to parent
+      setOpen(false); //close modal upon selection
+    }
+  };
+
+  const handleMultipleSelections = (value: any) => {
+    let selectedValues = [...selectedItems];
+
+    if (selectedValues.includes(value)) {
+      selectedValues = selectedValues.filter((item) => item !== value);
+    } else {
+      selectedValues.push(value);
+    }
+    setSelectedItems(selectedValues);
+  };
+
+  /*===========================================
+   * Get label handler
+   *==========================================*/
+  const getSelectedItemsLabel = () => {
+    if (isMultiple) {
+      let selectedLabels: Array<string> = [];
+      selectedItems &&
+        selectedItems.forEach((element) => {
+          let selectedItemLabel =
+            options &&
+            options.find(
+              (item: string) => item[optionValue ?? 'value'] === element
+            )?.[optionLabel];
+          selectedLabels.push(selectedItemLabel);
+        });
+      return selectedLabels;
+    }
+
+    let selectedItemLabel =
+      options &&
+      options.find(
+        (item: string) => item[optionValue ?? 'value'] === selectedItem
+      );
+    return selectedItemLabel?.[optionLabel];
+  };
+
+  return (
+    <>
+      <Dropdown
+        label={label}
+        placeholder={placeholder}
+        helperText={helperText}
+        error={error}
+        getSelectedItemsLabel={getSelectedItemsLabel}
+        selectedItem={selectedItem}
+        selectedItems={selectedItems}
+        setOpen={setOpen}
+        open={open}
+        labelStyle={labelStyle}
+        dropdownStyle={dropdownStyle}
+        dropdownContainerStyle={dropdownContainerStyle}
+        selectedItemStyle={selectedItemStyle}
+        isMultiple={isMultiple}
+      />
+      <CustomModal
+        open={open}
+        setOpen={setOpen}
+        modalBackgroundStyle={modalBackgroundStyle}
+        modalOptionsContainer={modalOptionsContainer}
+        onRequestClose={() => {}}
+      >
+        <DropdownList
+          options={options}
+          optionLabel={optionLabel}
+          optionValue={optionValue}
+          isMultiple={isMultiple}
+          selectedItems={selectedItems}
+          selectedItem={selectedItem}
+          handleMultipleSelections={handleMultipleSelections}
+          handleSingleSelection={handleSingleSelection}
+        />
+      </CustomModal>
+    </>
+  );
+};
+
+export default DropdownSelect;

package/src/styles/colors.ts

@@ -0,0 +1,8 @@
+export const colors: any = {
+  primary: '#EF8031',
+  black: '#000000',
+  white: '#FFFFFF',
+  dark: '#11142D',
+  gray: '#808191',
+  lightGray: '#F7F7F7',
+};

package/src/styles/typography.ts

@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native';
+
+export const typography: any = StyleSheet.create({
+  caption: {
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 12,
+    lineHeight: 15,
+  },
+});