@riebel/react-native-multiple-select 0.6.0

package/dist/index.js

@@ -0,0 +1,6 @@
+/*!
+ * react-native-multi-select
+ * Copyright(c) 2017 Mustapha Babatunde Oluwaleke
+ * MIT Licensed
+ */
+export { default } from './MultiSelect';

package/dist/styles.d.ts

@@ -0,0 +1,162 @@
+/*!
+ * react-native-multi-select
+ * Copyright(c) 2017 Mustapha Babatunde Oluwaleke
+ * MIT Licensed
+ */
+export declare const colorPack: {
+    readonly primary: "#00A5FF";
+    readonly primaryDark: "#215191";
+    readonly light: "#FFF";
+    readonly textPrimary: "#525966";
+    readonly placeholderTextColor: "#A9A9A9";
+    readonly danger: "#C62828";
+    readonly borderColor: "#e9e9e9";
+    readonly backgroundColor: "#b1b1b1";
+};
+declare const styles: {
+    footerWrapper: {
+        flexWrap: "wrap";
+        alignItems: "flex-start";
+        flexDirection: "row";
+    };
+    footerWrapperNC: {
+        width: number;
+        flexDirection: "column";
+    };
+    subSection: {
+        backgroundColor: "#FFF";
+        borderBottomWidth: number;
+        borderColor: "#e9e9e9";
+        paddingLeft: number;
+        paddingRight: number;
+        flex: number;
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    greyButton: {
+        height: number;
+        borderRadius: number;
+        elevation: number;
+        backgroundColor: "#b1b1b1";
+    };
+    indicator: {
+        fontSize: number;
+        color: "#A9A9A9";
+    };
+    indicatorPadded: {
+        paddingLeft: number;
+        paddingRight: number;
+    };
+    selectedItem: {
+        flexDirection: "row";
+        alignItems: "center";
+        paddingLeft: number;
+        paddingTop: number;
+        paddingRight: number;
+        paddingBottom: number;
+        margin: number;
+        borderRadius: number;
+        borderWidth: number;
+    };
+    button: {
+        height: number;
+        flexDirection: "row";
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    buttonText: {
+        color: "#FFF";
+        fontSize: number;
+    };
+    inputGroup: {
+        flexDirection: "row";
+        alignItems: "center";
+        paddingLeft: number;
+        backgroundColor: "#FFF";
+    };
+    dropdownView: {
+        flexDirection: "row";
+        alignItems: "center";
+        height: number;
+        marginBottom: number;
+    };
+    searchIconMargin: {
+        marginRight: number;
+    };
+    tagLabel: {
+        flex: number;
+        fontSize: number;
+    };
+    tagRemoveIcon: {
+        fontSize: number;
+        marginLeft: number;
+    };
+    rowWrap: {
+        flexDirection: "row";
+        flexWrap: "wrap";
+    };
+    rowItemText: {
+        flex: number;
+        fontSize: number;
+        paddingTop: number;
+        paddingBottom: number;
+    };
+    rowPadding: {
+        paddingLeft: number;
+        paddingRight: number;
+    };
+    rowAlignCenter: {
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    disabledText: {
+        color: string;
+    };
+    checkIcon: {
+        fontSize: number;
+    };
+    noItemsText: {
+        flex: number;
+        marginTop: number;
+        textAlign: "center";
+        color: "#C62828";
+    };
+    noItemsRow: {
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    searchInputFlex: {
+        flex: number;
+    };
+    backArrowMargin: {
+        marginLeft: number;
+    };
+    selectorContent: {
+        flexDirection: "column";
+        backgroundColor: string;
+    };
+    subSectionPadded: {
+        paddingTop: number;
+        paddingBottom: number;
+    };
+    dropdownTouchable: {
+        flex: number;
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    dropdownLabelBase: {
+        flex: number;
+        fontSize: number;
+    };
+    selectedItemLayout: {
+        justifyContent: "center";
+        height: number;
+    };
+};
+export declare const selectorViewStyle: (fixedHeight: boolean) => {
+    height?: number | undefined;
+    flexDirection: "column";
+    marginBottom: number;
+    elevation: number;
+};
+export default styles;

package/dist/styles.js

@@ -0,0 +1,163 @@
+/*!
+ * react-native-multi-select
+ * Copyright(c) 2017 Mustapha Babatunde Oluwaleke
+ * MIT Licensed
+ */
+import { StyleSheet } from 'react-native';
+export const colorPack = {
+    primary: '#00A5FF',
+    primaryDark: '#215191',
+    light: '#FFF',
+    textPrimary: '#525966',
+    placeholderTextColor: '#A9A9A9',
+    danger: '#C62828',
+    borderColor: '#e9e9e9',
+    backgroundColor: '#b1b1b1'
+};
+const styles = StyleSheet.create({
+    footerWrapper: {
+        flexWrap: 'wrap',
+        alignItems: 'flex-start',
+        flexDirection: 'row'
+    },
+    footerWrapperNC: {
+        width: 320,
+        flexDirection: 'column'
+    },
+    subSection: {
+        backgroundColor: colorPack.light,
+        borderBottomWidth: 1,
+        borderColor: colorPack.borderColor,
+        paddingLeft: 0,
+        paddingRight: 20,
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    greyButton: {
+        height: 40,
+        borderRadius: 5,
+        elevation: 0,
+        backgroundColor: colorPack.backgroundColor
+    },
+    indicator: {
+        fontSize: 30,
+        color: colorPack.placeholderTextColor
+    },
+    indicatorPadded: {
+        paddingLeft: 15,
+        paddingRight: 15
+    },
+    selectedItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingLeft: 15,
+        paddingTop: 3,
+        paddingRight: 3,
+        paddingBottom: 3,
+        margin: 3,
+        borderRadius: 20,
+        borderWidth: 2
+    },
+    button: {
+        height: 40,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    buttonText: {
+        color: colorPack.light,
+        fontSize: 14
+    },
+    inputGroup: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingLeft: 16,
+        backgroundColor: colorPack.light
+    },
+    dropdownView: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: 40,
+        marginBottom: 10
+    },
+    searchIconMargin: {
+        marginRight: 10
+    },
+    tagLabel: {
+        flex: 1,
+        fontSize: 15
+    },
+    tagRemoveIcon: {
+        fontSize: 22,
+        marginLeft: 10
+    },
+    rowWrap: {
+        flexDirection: 'row',
+        flexWrap: 'wrap'
+    },
+    rowItemText: {
+        flex: 1,
+        fontSize: 16,
+        paddingTop: 5,
+        paddingBottom: 5
+    },
+    rowPadding: {
+        paddingLeft: 20,
+        paddingRight: 20
+    },
+    rowAlignCenter: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    disabledText: {
+        color: 'grey'
+    },
+    checkIcon: {
+        fontSize: 20
+    },
+    noItemsText: {
+        flex: 1,
+        marginTop: 20,
+        textAlign: 'center',
+        color: colorPack.danger
+    },
+    noItemsRow: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    searchInputFlex: {
+        flex: 1
+    },
+    backArrowMargin: {
+        marginLeft: 5
+    },
+    selectorContent: {
+        flexDirection: 'column',
+        backgroundColor: '#fafafa'
+    },
+    subSectionPadded: {
+        paddingTop: 10,
+        paddingBottom: 10
+    },
+    dropdownTouchable: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    dropdownLabelBase: {
+        flex: 1,
+        fontSize: 16
+    },
+    selectedItemLayout: {
+        justifyContent: 'center',
+        height: 40
+    }
+});
+export const selectorViewStyle = (fixedHeight) => ({
+    flexDirection: 'column',
+    marginBottom: 10,
+    elevation: 2,
+    ...(fixedHeight ? { height: 250 } : {})
+});
+export default styles;

package/dist/types.d.ts

@@ -0,0 +1,82 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { ViewStyle, TextStyle, TextInputProps, StyleProp, FlatListProps } from 'react-native';
+export interface IconProps {
+    name: string;
+    size?: number;
+    color?: string;
+    style?: StyleProp<TextStyle | ViewStyle>;
+    onPress?: () => void;
+}
+export type IconComponentType = ComponentType<IconProps>;
+export interface IconNames {
+    search?: string;
+    close?: string;
+    check?: string;
+    arrowDown?: string;
+    arrowRight?: string;
+    arrowLeft?: string;
+}
+export interface MultiSelectItem {
+    [key: string]: unknown;
+    disabled?: boolean;
+}
+export interface MultiSelectProps {
+    items: MultiSelectItem[];
+    iconComponent: IconComponentType;
+    iconNames?: Partial<IconNames>;
+    onSelectedItemsChange: (items: string[]) => void;
+    single?: boolean;
+    selectedItems?: string[];
+    uniqueKey?: string;
+    displayKey?: string;
+    tagBorderColor?: string;
+    tagTextColor?: string;
+    tagRemoveIconColor?: string;
+    tagContainerStyle?: StyleProp<ViewStyle>;
+    fontFamily?: string;
+    selectedItemFontFamily?: string;
+    selectedItemTextColor?: string;
+    selectedItemIconColor?: string;
+    itemFontFamily?: string;
+    itemTextColor?: string;
+    itemFontSize?: number;
+    searchIcon?: ReactNode;
+    searchInputPlaceholderText?: string;
+    searchInputStyle?: StyleProp<TextStyle>;
+    selectText?: string;
+    selectedText?: string;
+    altFontFamily?: string;
+    fontSize?: number;
+    textColor?: string;
+    fixedHeight?: boolean;
+    hideTags?: boolean;
+    hideSubmitButton?: boolean;
+    hideDropdown?: boolean;
+    submitButtonColor?: string;
+    submitButtonText?: string;
+    canAddItems?: boolean;
+    removeSelected?: boolean;
+    noItemsText?: string;
+    filterMethod?: 'partial' | 'full';
+    onAddItem?: (newItems: MultiSelectItem[]) => void;
+    onChangeInput?: (text: string) => void;
+    onClearSelector?: () => void;
+    onToggleList?: () => void;
+    textInputProps?: TextInputProps;
+    flatListProps?: Partial<FlatListProps<MultiSelectItem>>;
+    styleDropdownMenu?: StyleProp<ViewStyle>;
+    styleDropdownMenuSubsection?: StyleProp<ViewStyle>;
+    styleInputGroup?: StyleProp<ViewStyle>;
+    styleItemsContainer?: StyleProp<ViewStyle>;
+    styleListContainer?: StyleProp<ViewStyle>;
+    styleMainWrapper?: StyleProp<ViewStyle>;
+    styleRowList?: StyleProp<ViewStyle>;
+    styleSelectorContainer?: StyleProp<ViewStyle>;
+    styleTextDropdown?: StyleProp<TextStyle>;
+    styleTextDropdownSelected?: StyleProp<TextStyle>;
+    styleTextTag?: StyleProp<TextStyle>;
+    styleIndicator?: StyleProp<ViewStyle>;
+}
+export interface MultiSelectRef {
+    getSelectedItemsExt: (items?: string[]) => ReactNode;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/eslint.config.mjs

@@ -0,0 +1,65 @@
+import js from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactNative from 'eslint-plugin-react-native'
+import prettier from 'eslint-config-prettier'
+
+export default tseslint.config(
+  js.configs.recommended,
+  ...tseslint.configs.strictTypeChecked,
+  {
+    languageOptions: {
+      parserOptions: {
+        projectService: {
+          allowDefaultProject: ['src/__tests__/*.test.tsx'],
+          defaultProject: 'tsconfig.test.json'
+        },
+        tsconfigRootDir: import.meta.dirname
+      }
+    }
+  },
+  {
+    files: ['src/**/*.{ts,tsx}'],
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-native': reactNative
+    },
+    settings: {
+      react: {
+        version: 'detect'
+      }
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-uses-react': 'off',
+      'react/react-in-jsx-scope': 'off',
+      'react/jsx-no-duplicate-props': 'error',
+      'react/jsx-no-undef': 'error',
+      'react/no-direct-mutation-state': 'error',
+      'react/self-closing-comp': 'error',
+      'react-native/no-unused-styles': 'warn',
+      'react-native/no-inline-styles': 'warn',
+      '@typescript-eslint/no-explicit-any': 'error',
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }]
+    }
+  },
+  {
+    files: ['src/__tests__/**/*.{ts,tsx}'],
+    rules: {
+      '@typescript-eslint/no-unsafe-call': 'off',
+      '@typescript-eslint/no-unsafe-member-access': 'off',
+      '@typescript-eslint/no-unsafe-assignment': 'off',
+      '@typescript-eslint/no-unsafe-argument': 'off',
+      '@typescript-eslint/no-unsafe-return': 'off',
+      '@typescript-eslint/no-floating-promises': 'off',
+      'react-native/no-unused-styles': 'off',
+      'react-native/no-inline-styles': 'off'
+    }
+  },
+  prettier,
+  {
+    ignores: ['dist/', 'node_modules/', 'lib/']
+  }
+)

package/jest.config.ts

@@ -0,0 +1,22 @@
+import type { Config } from 'jest'
+
+const config: Config = {
+  preset: 'react-native',
+  transform: {
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+        tsconfig: 'tsconfig.test.json'
+      }
+    ],
+    '^.+\\.jsx?$': 'babel-jest'
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+  testMatch: ['<rootDir>/src/__tests__/**/*.test.tsx'],
+  setupFiles: ['./jest.setup.ts'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(@react-native|react-native|@react-native-vector-icons)/)'
+  ]
+}
+
+export default config

package/jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/react-native/matchers'

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@riebel/react-native-multiple-select",
+  "version": "0.6.0",
+  "description": "Modernized Simple multi-select component for react-native",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "tsc",
+    "format": "prettier --write src/",
+    "format:check": "prettier --check src/",
+    "lint": "eslint src/",
+    "test": "tsc --noEmit && jest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/riebel/react-native-multiple-select.git"
+  },
+  "keywords": [
+    "reactnative",
+    "multiselect",
+    "multi-select",
+    "react-native"
+  ],
+  "author": "Mustapha Babatunde Oluwaleke",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/riebel/react-native-multiple-select/issues"
+  },
+  "homepage": "https://github.com/riebel/react-native-multiple-select#readme",
+  "devDependencies": {
+    "@eslint/js": "^9.0.0",
+    "@react-native/babel-preset": "^0.83.1",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-test-renderer": "^19.1.0",
+    "eslint": "^9.0.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-native": "^5.0.0",
+    "jest": "^30.2.0",
+    "prettier": "^3.8.1",
+    "react": "^19.2.4",
+    "react-native": "^0.83.1",
+    "react-test-renderer": "^19.2.4",
+    "ts-jest": "^29.4.6",
+    "typescript": "^5.4.0",
+    "typescript-eslint": "^8.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0"
+  }
+}