react-native-reorderable-list 0.3.0 → 0.5.0

package/package.json

@@ -1,56 +1,216 @@
 {
   "name": "react-native-reorderable-list",
-  "version": "0.3.0",
-  "description": "Reorderable list for React Native applications, powered by Reanimated 2",
-  "scripts": {
-    "lint": "eslint ./src --ext .ts,.tsx",
-    "build": "tsc && tsc-alias"
-  },
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "version": "0.5.0",
+  "description": "Reorderable list for React Native applications, powered by Reanimated",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
   "files": [
-    "dist/*"
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!lib/typescript/example",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
   ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/omahili/react-native-reorderable-list.git"
+  "scripts": {
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepack": "bob build",
+    "release": "release-it",
+    "example": "yarn --cwd example",
+    "bootstrap": "yarn example && yarn install"
   },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "reanimated",
+    "reorderable",
+    "sortable",
+    "flatlist",
+    "list",
+    "drag-and-drop",
+    "dnd"
+  ],
+  "repository": "https://github.com/omahili/react-native-reorderable-list",
   "author": "Omar Mahili",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/omahili/react-native-reorderable-list/issues"
   },
   "homepage": "https://github.com/omahili/react-native-reorderable-list#readme",
-  "dependencies": {
-    "@seznam/compose-react-refs": "^1.0.6",
-    "fast-memoize": "^2.5.2"
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@react-native-community/eslint-config": "^3.0.1",
-    "@types/react": "^17.0.34",
-    "@types/react-native": "^0.66.2",
-    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-plugin-eslint-comments": "^3.1.2",
-    "eslint-plugin-flowtype": "2.50.3",
-    "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-jest": "22.4.1",
-    "eslint-plugin-prettier": "3.1.2",
-    "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-react-hooks": "^4.0.7",
-    "eslint-plugin-react-native": "^3.10.0",
-    "prettier": "^2.4.1",
-    "react": "^17.0.2",
-    "react-native": "^0.66.1",
-    "react-native-gesture-handler": "^1.10.3",
-    "react-native-reanimated": "^2.2.3",
-    "tsc-alias": "^1.4.0",
-    "typescript": "^4.4.4"
+    "@commitlint/config-conventional": "^17.0.2",
+    "@react-native-community/eslint-config": "^3.0.2",
+    "@react-native/babel-preset": "0.75.3",
+    "@react-native/eslint-config": "0.75.3",
+    "@react-native/metro-config": "0.75.3",
+    "@react-native/typescript-config": "0.75.3",
+    "@release-it/conventional-changelog": "^8.0.2",
+    "@types/react": "^18.3.9",
+    "eslint": "^8.4.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^3.5.5",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^29.6.3",
+    "prettier": "^2.8.8",
+    "react": "18.3.1",
+    "react-native": "0.75.3",
+    "react-native-builder-bob": "^0.20.0",
+    "react-native-gesture-handler": "^2.12.0",
+    "react-native-reanimated": "^3.15.3",
+    "release-it": "^17.6.0",
+    "tsc": "^2.0.4",
+    "typescript": "5.0.4"
   },
   "peerDependencies": {
-    "react-native": ">=0.62.0",
-    "react-native-gesture-handler": ">=1.10.0",
-    "react-native-reanimated": ">=2.2.0"
+    "react": "*",
+    "react-native": "*",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=3.6.0"
+  },
+  "engines": {
+    "node": ">= 18.0.0"
+  },
+  "packageManager": "yarn@4.5.0",
+  "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": {
+          "name": "angular"
+        },
+        "infile": "CHANGELOG.md"
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native-community",
+      "plugin:import/recommended",
+      "prettier"
+    ],
+    "plugins": [
+      "import"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "bracketSpacing": false,
+          "bracketSameLine": true,
+          "trailingComma": "all",
+          "arrowParens": "avoid"
+        }
+      ],
+      "import/order": [
+        "error",
+        {
+          "groups": [
+            "builtin",
+            "external"
+          ],
+          "pathGroups": [
+            {
+              "pattern": "react+(|-native)",
+              "group": "builtin",
+              "position": "before"
+            }
+          ],
+          "pathGroupsExcludedImportTypes": [
+            "react"
+          ],
+          "newlines-between": "always",
+          "alphabetize": {
+            "order": "asc",
+            "caseInsensitive": true
+          }
+        }
+      ],
+      "sort-imports": [
+        "error",
+        {
+          "ignoreDeclarationSort": true
+        }
+      ]
+    },
+    "settings": {
+      "import/resolver": {
+        "typescript": {
+          "project": "tsconfig.json"
+        }
+      }
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "bracketSpacing": false,
+    "bracketSameLine": true,
+    "trailingComma": "all",
+    "arrowParens": "avoid"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
   }
 }

package/src/components/ReorderableList/ReorderableList.tsx

@@ -0,0 +1,123 @@
+import React, {useCallback} from 'react';
+import {CellRendererProps, FlatList, FlatListProps} from 'react-native';
+
+import {GestureDetector} from 'react-native-gesture-handler';
+import Animated from 'react-native-reanimated';
+
+import {AUTOSCROLL_DELAY} from './constants';
+import {useReorderableList} from './useReorderableList';
+import {ReorderableListContext} from '../../contexts';
+import type {ReorderableListProps} from '../../types';
+import {ReorderableListCell} from '../ReorderableListCell';
+
+const AnimatedFlatList = Animated.createAnimatedComponent(
+  FlatList,
+) as unknown as <T>(
+  props: FlatListProps<T> & {ref?: React.Ref<FlatList<T>>},
+) => React.ReactElement;
+
+const ReorderableList = <T,>(
+  {
+    data,
+    autoscrollThreshold = 0.1,
+    autoscrollSpeedScale = 1,
+    autoscrollDelay = AUTOSCROLL_DELAY,
+    animationDuration = 200,
+    dragReorderThreshold = 0.2,
+    onLayout,
+    onReorder,
+    onScroll,
+    keyExtractor,
+    extraData,
+    ...rest
+  }: ReorderableListProps<T>,
+  ref: React.ForwardedRef<FlatList<T>>,
+) => {
+  const {
+    gestureHandler,
+    handleScroll,
+    handleFlatListLayout,
+    handleRef,
+    startDrag,
+    listContextValue,
+    itemOffset,
+    itemHeight,
+    dragY,
+    draggedIndex,
+    releasedIndex,
+    duration,
+  } = useReorderableList({
+    ref,
+    autoscrollThreshold,
+    autoscrollSpeedScale,
+    autoscrollDelay,
+    animationDuration,
+    dragReorderThreshold,
+    onLayout,
+    onReorder,
+    onScroll,
+  });
+
+  const renderAnimatedCell = useCallback(
+    ({index, children, item, onLayout: onCellLayout}: CellRendererProps<T>) => (
+      <ReorderableListCell
+        // forces remount of components with key change
+        key={keyExtractor ? keyExtractor(item, index) : index}
+        item={item}
+        extraData={extraData}
+        index={index}
+        itemOffset={itemOffset}
+        itemHeight={itemHeight}
+        dragY={dragY}
+        draggedIndex={draggedIndex}
+        releasedIndex={releasedIndex}
+        animationDuration={duration}
+        startDrag={startDrag}
+        children={children}
+        onLayout={onCellLayout}
+      />
+    ),
+    [
+      itemOffset,
+      itemHeight,
+      startDrag,
+      dragY,
+      draggedIndex,
+      releasedIndex,
+      duration,
+      keyExtractor,
+      extraData,
+    ],
+  );
+
+  return (
+    <ReorderableListContext.Provider value={listContextValue}>
+      <GestureDetector gesture={gestureHandler}>
+        <AnimatedFlatList
+          {...rest}
+          ref={handleRef}
+          data={data}
+          CellRendererComponent={renderAnimatedCell}
+          onLayout={handleFlatListLayout}
+          onScroll={handleScroll}
+          scrollEventThrottle={1}
+          horizontal={false}
+          removeClippedSubviews={false}
+          keyExtractor={keyExtractor}
+          extraData={extraData}
+          numColumns={1}
+        />
+      </GestureDetector>
+    </ReorderableListContext.Provider>
+  );
+};
+
+const MemoizedReorderableList = React.memo(
+  React.forwardRef(ReorderableList),
+) as <T>(
+  props: ReorderableListProps<T> & {
+    ref?: React.ForwardedRef<FlatListProps<T>>;
+  },
+) => React.ReactElement;
+
+export {MemoizedReorderableList as ReorderableList};

package/src/components/ReorderableList/constants.ios.ts

@@ -0,0 +1,3 @@
+// iOS specific constants
+export const AUTOSCROLL_INCREMENT = 80;
+export const AUTOSCROLL_DELAY = 100;

package/src/components/ReorderableList/constants.ts

@@ -0,0 +1,3 @@
+// Default constants
+export const AUTOSCROLL_INCREMENT = 5;
+export const AUTOSCROLL_DELAY = 0;

package/src/components/ReorderableList/index.ts

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