Merge pull request #297 from hossein-zare/dev-5.x

5.1.5

.eslintrc.js

@@ -6,15 +6,28 @@ module.exports = {
         'react',
         "react-hooks",
         "react-native",
-        "jsx-a11y"
+        "prettier",
+        "jsx-a11y",
+        "eslint-comments",
+        "import"
     ],
     extends: [
         'eslint:recommended',
         'plugin:@typescript-eslint/recommended',
+        'airbnb-typescript',
+        "airbnb",
+        "airbnb/hooks",
         "plugin:react/recommended",
         "plugin:react-hooks/recommended",
         "plugin:react-native/all",
-        "plugin:jsx-a11y/strict"
+        "prettier",
+        "plugin:prettier/recommended",
+        "plugin:jsx-a11y/recommended",
+        "plugin:eslint-comments/recommended",
+        "plugin:import/errors",
+        "plugin:import/errors",
+        "plugin:import/warnings",
+        "plugin:import/typescript"
     ],
     env: {
         node: true,
@@ -23,9 +36,52 @@ module.exports = {
     "parserOptions": {
         "ecmaFeatures": {
             "jsx": true
-        }
+        },
+        "ecmaVersion": 2020,
+        "sourceType": "module",
+        "project": "./tsconfig.json"
     },
     "rules": {
-        "@typescript-eslint/no-explicit-any": ["error", { "ignoreRestArgs": false, "fixToUnknown": false }]
-    }
+        "@typescript-eslint/no-explicit-any": ["error", { "ignoreRestArgs": false, "fixToUnknown": false }],
+        "import/no-unresolved": 0,
+        "react/jsx-filename-extension": [1, {
+            "extensions": [
+                ".ts",
+                ".tsx",
+                ".js",
+                ".jsx"
+            ]
+        }],
+        "prettier/prettier": [
+            "error",
+            {
+                // documented at: https://prettier.io/docs/en/configuration.html
+                "printWidth": 80,
+                "tabWidth": 2,
+                "useTabs": false,
+                "semi": true,
+                "singleQuote": true,
+                "quoteProps": "consistent",
+                "jsxSingleQuote": true,
+                "trailingComma": "all",
+                "bracketSpacing": true,
+                "jsxBracketSameLine": true,
+                "arrowParens": "always",
+                "requirePragma": false,
+                "insertPragma": false,
+                "proseWrap": "preserve",
+                "htmlWhitespaceSensitivity": "css",
+                "endOfLine": "lf",
+                "embeddedLanguageFormatting": "auto"
+            }
+        ],
+        "no-use-before-define": "off",
+        "@typescript-eslint/no-use-before-define": ["error"],
+        "import/extensions": ["error", "never"],
+        "react/prop-types": 0,
+        "no-shadow": "off",
+        "@typescript-eslint/no-shadow": ["error"],
+        "no-undef": "off"
+    },
+    "ignorePatterns": [".eslintrc.js"]
 };

index.d.ts

@@ -121,7 +121,6 @@ declare module "react-native-dropdown-picker" {
     export type DropDownDirectionType = "DEFAULT" | "TOP" | "BOTTOM" | "AUTO";
     export type ThemeNameType = "DEFAULT" | "LIGHT" | "DARK" | string;
     export type ThemeType = object; //TODO: give this a specific type; maybe something like StyleSheet.Styles? or an object of all the fields in each type definition in the source files
-    export type SetStateType<ParentComponentStateType> = (state: ParentComponentStateType, callback?: () => void) => void;
 
     export type DropDownPickerProps = {
       items: ItemType[];
@@ -176,6 +175,7 @@ declare module "react-native-dropdown-picker" {
       language?: LanguageType;
       translation?: TranslationInterface;
       multiple?: boolean;
+      multipleText?: string;
       mode?: ModeType;
       key?: string;
       maxHeight?: number;
@@ -207,7 +207,7 @@ declare module "react-native-dropdown-picker" {
       addCustomItem?: boolean;
       setOpen: (open: boolean) => void;
       setItems: (items: ItemType[]) => void;
-      setValue<ParentComponentStateType>(): (value: SetStateAction<ParentComponentStateType>) => void;
+      setValue<ParentComponentStateType>(value: SetStateAction<ParentComponentStateType>): void;
       disableBorderRadius?: boolean;
       containerProps?: ViewProps;
       onLayout?: (e: LayoutChangeEvent) => void;
@@ -237,7 +237,6 @@ declare module "react-native-dropdown-picker" {
       HELPER: {
         GET_SELECTED_ITEM: (items: ItemType[], value: string | number | null, key?: string) => GetSelectedItemOutputType;
         GET_SELECTED_ITEMS: (items: ItemType[], values: string[] | number[] | null, key?: string) => GetSelectedItemsOutputType;
-        SET_STATE<ParentComponentStateType>(): (setState: SetStateType<ParentComponentStateType>, valueProperty: string) =>  void;
       };
       setMode: (mode: string) => void;
       setListMode: (mode: string) => void;
@@ -253,4 +252,4 @@ declare module "react-native-dropdown-picker" {
     export default DropDownPicker;
   }
 
-  //TODO: remove uses of the ambiguous "any" and "object" types
+  //TODO: remove uses of the ambiguous "any" and "object" types

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-dropdown-picker",
-  "version": "5.1.4",
+  "version": "5.1.5",
   "description": "A single / multiple, categorizable, customizable, localizable and searchable item picker (drop-down) component for react native which supports both Android & iOS.",
   "keywords": [
     "picker",
@@ -53,10 +53,17 @@
     "@typescript-eslint/eslint-plugin": "^4.22.1",
     "@typescript-eslint/parser": "^4.22.1",
     "eslint": "^7.25.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-airbnb-typescript": "^12.3.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-eslint-comments": "^3.2.0",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-react-native": "^3.10.0",
+    "prettier": "^2.2.1",
     "typescript": "^4.2.4"
   }
 }

src/components/Picker.js

@@ -99,6 +99,7 @@ function Picker({
     language = LANGUAGE.DEFAULT,
     translation = {},
     multiple = false,
+    multipleText = null,
     mode = MODE.DEFAULT,
     key = null,
     maxHeight = 200,
@@ -412,6 +413,12 @@ function Picker({
      */
     const _placeholder = useMemo(() => placeholder ?? _('PLACEHOLDER'), [placeholder, _]);
 
+    /**
+     * The multiple text.
+     * @returns {string}
+     */
+     const _multipleText = useMemo(() => multipleText ?? _('SELECTED_ITEMS_COUNT_TEXT'), [multipleText, _]);
+
     /**
      * The mode.
      * @returns {string}
@@ -463,7 +470,7 @@ function Picker({
 
         if (multiple)
             if (item.length > 0)
-                return _('SELECTED_ITEMS_COUNT_TEXT').replace('\d', item.length);
+                return _multipleText.replace('\d', item.length);
             else
                 return fallback;
 
@@ -472,7 +479,7 @@ function Picker({
         } catch (e) {
             return fallback;
         }
-    }, [getSelectedItem, multiple, _, _schema]);
+    }, [getSelectedItem, multiple, _multipleText, _schema]);
 
     /**
      * The label of the selected item / placeholder.

src/components/RenderListItem.js

@@ -176,7 +176,7 @@ const areEqual = (nextProps, prevProps) => {
         return false;
     if (nextProps.rtl !== prevProps.rtl)
         return false;
-    if (nextProps.theme !== prevProps.rtl)
+    if (nextProps.theme !== prevProps.theme)
         return false;
 
     return true;

src/constants/index.js

@@ -137,10 +137,5 @@ export const HELPERS = {
             return [];
 
         return items.filter(item => values.includes(item[key]));
-    },
-    SET_STATE: (setState, valueProperty) => {
-        setState(state => ({
-            [valueProperty]: state[valueProperty]
-        }));
     }
 }