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

v5.1.25 PR

Author: hossein-zare

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 
-package-lock.json
+package-lock.json
+.vscode/*

README.md

@@ -20,4 +20,26 @@ We are constantly working to improve this project, help us with your donation as
 
 **Donate Bitcoin**
 + **Payment Address:** `bc1q7sgzww3l0fk3dyy9mzcjxdw9rla3yvhuyf0qku`  
-![QR Code](https://user-images.githubusercontent.com/56504893/116758583-a0031300-aa25-11eb-9624-0009346d2290.png)
+![QR Code](https://user-images.githubusercontent.com/56504893/116758583-a0031300-aa25-11eb-9624-0009346d2290.png)
+
+# Merge and Release Process
+
+## Branches in use
+
+### Development
+
+PRs should be made against and merged into the [`dev-5.x`](https://github.com/hossein-zare/react-native-dropdown-picker) branch, which is set as the `default` branch on github.
+
+### Release
+
+Releases are currently made from the [`5.x`](https://github.com/hossein-zare/react-native-dropdown-picker/tree/5.x) branch.
+
+## Release Process
+
+To make a new release, follow these steps:
+
+* Verify the development branch has all the changes desired in a release and works well
+* Make and merge a final PR into development branch that increments the version number in `package.json`
+* Make and merge a PR from the development branch to the release branch
+* Using the GitHub web UI, draft a new release using tag name `vx.x.x` (replace the `x` values as appropriate of course), with the release branch as the target, with release name `vx.x.x` (again, with appropriate numbers in place of `x` of course)
+* Verify in the GitHub Actions panel for the repository that NPM publish succeeded

index.d.ts

@@ -188,6 +188,7 @@ declare module "react-native-dropdown-picker" {
       showArrowIcon?: boolean;
       showBadgeDot?: boolean;
       showTickIcon?: boolean;
+      stickyHeader?: boolean;
       ArrowUpIconComponent?: (props: {style: StyleProp<ViewStyle>}) => JSX.Element;
       ArrowDownIconComponent?: (props: {style: StyleProp<ViewStyle>}) => JSX.Element;
       TickIconComponent?: (props: {style: StyleProp<ViewStyle>}) => JSX.Element;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-dropdown-picker",
-  "version": "5.1.23",
+  "version": "5.1.25",
   "description": "A single / multiple, categorizable, customizable, localizable and searchable item picker (drop-down) component for react native which supports both Android & iOS.",
   "keywords": [
     "picker",
@@ -43,9 +43,7 @@
   "author": "Hossein Zare",
   "main": "index.js",
   "types": "index.d.ts",
-  "dependencies": {
-    "react-native-gesture-handler": "*"
-  },
+  "dependencies": {},
   "peerDependencies": {
     "react": "*",
     "react-native": "*"

src/components/Picker.js

@@ -24,7 +24,7 @@ import {
     StyleSheet
 } from 'react-native';
 
-const {height: WINDOW_HEIGHT} = Dimensions.get('window');
+const { height: WINDOW_HEIGHT } = Dimensions.get('window');
 
 import Colors from '../constants/colors';
 import {
@@ -113,6 +113,7 @@ function Picker({
     showArrowIcon = true,
     showBadgeDot = true,
     showTickIcon = true,
+    stickyHeader = false,
     ArrowUpIconComponent = null,
     ArrowDownIconComponent = null,
     TickIconComponent = null,
@@ -311,15 +312,33 @@ function Picker({
         const children = items.filter(item => item[_schema.parent] !== undefined && item[_schema.parent] !== null);
 
         children.forEach((child) => {
-            const index = items.findIndex(item => item[_schema.parent] === child[_schema.parent] || item[_schema.value] === child[_schema.parent]);
+            const index = sortedItems.findIndex(item => item[_schema.parent] === child[_schema.parent] || item[_schema.value] === child[_schema.parent]);
 
             if (index > -1) {
                 sortedItems.splice(index + 1, 0, child);
             }
         });
 
         return sortedItems;
-    }, [items, _schema])
+    }, [items, _schema]);
+
+    /**
+     * The indices of all parent items.
+     * @returns {object}
+     */
+     const stickyHeaderIndices = useMemo(() => {
+        const stickyHeaderIndices = [];
+        if (stickyHeader) {
+            const parents = sortedItems.filter(item => item[_schema.parent] === undefined || item[_schema.parent] === null);
+            parents.forEach((parent) => {
+                const index = sortedItems.findIndex(item => item[_schema.value] === parent[_schema.value]);
+                if (index > -1) stickyHeaderIndices.push(index);
+            })
+
+        }
+        return stickyHeaderIndices;
+
+    }, [stickyHeader, sortedItems])
 
     /**
      * The items.
@@ -526,7 +545,6 @@ function Picker({
         open,
         onPressToggle,
         onPress,
-        pickerRef,
         maxHeight,
         pickerHeight,
         bottomOffset,
@@ -982,7 +1000,8 @@ function Picker({
      */
     const _listItemContainerStyle = useMemo(() => ([
         RTL_DIRECTION(rtl, THEME.listItemContainer),
-        ...[listItemContainerStyle].flat()
+        ...[listItemContainerStyle].flat(),
+        stickyHeader && {backgroundColor: THEME.style.backgroundColor},
     ]), [rtl, listItemContainerStyle, THEME]);
 
     /**
@@ -1465,6 +1484,7 @@ function Picker({
             keyExtractor={keyExtractor}
             extraData={_value}
             ItemSeparatorComponent={ItemSeparatorComponent}
+            stickyHeaderIndices={stickyHeaderIndices}
             {...flatListProps}
         />
     ), [
@@ -1484,7 +1504,7 @@ function Picker({
      */
     const DropDownScrollViewComponent = useMemo(() => {
         return (
-            <ScrollView nestedScrollEnabled={true} {...scrollViewProps}>
+            <ScrollView nestedScrollEnabled={true} stickyHeaderIndices={stickyHeaderIndices} {...scrollViewProps} >
                 {_items.map((item, index) => { 
                     return (
                         <Fragment key={item[_itemKey]}>
@@ -1570,4 +1590,4 @@ const styles = StyleSheet.create({
     }
 });
 
-export default memo(Picker);
+export default memo(Picker);