react-native-drax 0.10.2 → 0.11.0-alpha.1

package/.eslintrc.js

@@ -1,75 +1,4 @@
 module.exports = {
-	root: true,
-	parser: '@typescript-eslint/parser',
-	parserOptions: {
-		project: [
-			'./tsconfig.json',
-		],
-		ecmaFeatures: {
-			jsx: true,
-		},
-	},
-	plugins: [
-		'@typescript-eslint',
-		'react',
-		'react-native',
-		'react-hooks',
-	],
-	extends: [
-		// 'plugin:@typescript-eslint/recommended', <-- consider this when time permits
-		'plugin:react/recommended',
-		'plugin:react-native/all',
-		'airbnb-typescript',
-	],
-	env: {
-		es6: true,
-		jest: true,
-		'react-native/react-native': true,
-	},
-	settings: {
-		react: {
-			version: 'detect',
-		},
-	},
-	rules: {
-		'no-undef': 0, // TS handles this; https://github.com/eslint/eslint/issues/13699#issuecomment-694223066
-		'no-tabs': 0,
-		'no-shadow': 0,
-		'arrow-body-style': 0,
-		'arrow-parens': [2, 'always'],
-		'no-console': 0,
-		'max-len': [2, {
-			code: 120,
-			tabWidth: 4,
-			ignoreComments: true,
-			ignoreUrls: true,
-			ignoreStrings: true,
-			ignoreTemplateLiterals: true,
-			ignoreRegExpLiterals: true,
-		}],
-		'@typescript-eslint/indent': [2, 'tab', { SwitchCase: 1 }],
-		'@typescript-eslint/no-use-before-define': [2, { variables: false }],
-		'import/no-unresolved': 0, // ts already provides errors for this and updates more quickly in VSCode
-		'import/prefer-default-export': 0,
-		'import/no-extraneous-dependencies': [2, { devDependencies: true }], // allows import of type def libs
-		'react/destructuring-assignment': 0,
-		'react/jsx-props-no-spreading': 0,
-		'react/jsx-indent': [2, 'tab'],
-		'react/jsx-indent-props': [2, 'tab'],
-		'react/jsx-one-expression-per-line': 0,
-		'react/no-unused-state': 0,
-		'react/prop-types': 0,
-		'react/require-default-props': 0,
-		'react/no-unused-prop-types': 0,
-		'react/sort-comp': 0,
-		'react/state-in-constructor': 0,
-		'react-native/sort-styles': 0,
-		'react-native/no-color-literals': 0,
-		'react-hooks/rules-of-hooks': 2,
-		'react-hooks/exhaustive-deps': 1,
-		'@typescript-eslint/comma-dangle': [2, "always-multiline"],
-	},
-	ignorePatterns: [
-		'.eslintrc.js',
-	],
+    extends: ['universe/web', 'universe/native'],
+    plugins: ['prettier'],
 };

package/.prettierrc

@@ -0,0 +1,16 @@
+{
+  "arrowParens": "avoid",
+  "bracketSameLine": false,
+  "printWidth": 120,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "rangeStart": 0,
+  "rangeEnd": 9007199254740991,
+  "requirePragma": false,
+  "insertPragma": false,
+  "proseWrap": "preserve",
+  "endOfLine": "auto"
+}

package/CHANGELOG.md

@@ -9,6 +9,12 @@ Changes marked as (BREAKING) may break your app logic. Changes marked as (BREAKI
 ## [Unreleased]
 - Nothing yet
 
+
+## [0.10.3] - 2022-09-06
+
+### Fixed
+- Fix clipping sizes to properly take position into account (#151) - Thank you @FrancoisDupayrat!
+
 ## [0.10.2] - 2022-06-10
 
 ### Added
@@ -235,7 +241,8 @@ Changes marked as (BREAKING) may break your app logic. Changes marked as (BREAKI
 
 *(More history to be added later?)*
 
-[Unreleased]: https://github.com/nuclearpasta/react-native-drax/compare/v0.10.2...HEAD
+[Unreleased]: https://github.com/nuclearpasta/react-native-drax/compare/v0.10.3...HEAD
+[0.10.3]: https://github.com/nuclearpasta/react-native-drax/compare/v0.10.2...v0.10.3
 [0.10.2]: https://github.com/nuclearpasta/react-native-drax/compare/v0.10.1...v0.10.2
 [0.10.1]: https://github.com/nuclearpasta/react-native-drax/compare/v0.10.0...v0.10.1
 [0.10.0]: https://github.com/nuclearpasta/react-native-drax/compare/v0.9.3...v0.10.0

package/README.md

@@ -11,7 +11,33 @@
 
 Drax is a declarative drag-and-drop system for React Native, written in TypeScript. It is designed to be flexible and powerful with the goal of supporting many use cases, while its stock components and default settings should cover the most common scenarios with minimal configuration.
 
-**Note: as of version 0.10.0, React Native 0.65 or higher is required. For RN 0.62-0.64 projects, you may be able to use 0.9.3, but it will no longer be supported. For RN 0.61 projects, you may be able to use 0.6.0, but it will no longer be supported.**
+**Note: We currently only support the latest Expo and React Native versions. Other older version might work just fine, but we won't respond to bug reports or feature requests for them.**
+
+### Experimental Alpha Version (v0.11.0)
+
+An experimental alpha version is now available that introduces significant updates and breaking changes. This version focuses on:
+
+- Integration with latest React Native Reanimated and React Native Gesture Handler by SoftwareMansion
+- Enhanced animation performance and capabilities
+- Works with New Architecture
+
+**Installation:** To install the experimental alpha version:
+
+```bash
+# npm
+npm install react-native-drax@alpha
+
+# or yarn
+yarn add react-native-drax@alpha
+```
+
+You'll also need to ensure you have the required peer dependencies:
+
+```bash
+yarn add react-native-reanimated react-native-gesture-handler
+```
+
+**Important:** This alpha version contains breaking changes, especially to the `DraxList` component. See the [Alpha Version Breaking Changes](#alpha-version-breaking-changes) section for details.
 
 *Personal note from Joe: this project is in need of additional [contributors/shepherds](#contributing). I have not been focused on React Native over the past year, and the state of the library has fallen behind the times. At a minimum, it should be updated to use the latest RNGH and take advantage of any fixes and new features in that and RN. I apologize that I do not have the availability to maintain this project to my own high standards and thank everyone who has been understanding of that.*
 
@@ -19,6 +45,7 @@ Drax is a declarative drag-and-drop system for React Native, written in TypeScri
 
 * [Screenshots](#screenshots)
 * [Status](#status)
+* [Alpha Version Breaking Changes](#alpha-version-breaking-changes)
 * [Background](#background)
 * [Concept](#concept)
 * [Installation](#installation)
@@ -47,6 +74,59 @@ This library adheres to [Semantic Versioning (semver)](https://semver.org/) and
 
 The author of this library has not had significant availability to work on it for quite a while now, due to higher priority life and work concerns. Newer versions of Drax's major dependencies have been released in that time, and many people have opened issues asking questions about usage and potential features. Relatively small fixes and easy questions are handled reasonably often, but ultimately another round of research, testing, and architecture are what would take this library to the next level of usability. It is not clear when that might happen, but [contributors are welcome](#contributing).
 
+<a name="alpha-version-breaking-changes"></a>
+## Alpha Version Breaking Changes
+
+The experimental alpha version (v0.11.0) includes significant updates to modernize the library and improve performance. However, these changes introduce breaking changes, particularly to the `DraxList` component.
+
+### DraxList Breaking Changes
+
+   - `renderItem` property signature receives different props than before and has replaced `renderItemContent` and `renderHoverContent`
+   - Receives incoming external drag items inside the list.
+   - Added `monitoringExternalDragStyle` prop for styling during incoming external drags
+   - `parentDraxViewProps` prop for customizing the parent DraxView wrapping the FlatList. You should use this prop if you were using the `style` prop on `DraxList`. (see example below)
+
+### DraxListItem Component
+
+The alpha version introduces a new `DraxListItem` component that works with `DraxList` to simplify implementation of reorderable lists. This component handles animations, measurement caching, and shift calculations internally.
+
+#### Usage Example
+
+```jsx
+import { DraxList, DraxListItem } from 'react-native-drax';
+
+const MyReorderableList = () => (
+  <DraxList
+    data={items}
+    // BREAKING CHANGE: `style` prop is now applied to internal FlatList, not to the parent DraxView
+    style={styles.list}
+
+    // should use this prop if you were using the `style` prop on `DraxList` on v0.10.3. 
+    parentDraxViewProps={{
+      style: styles.list,
+    }}
+    renderItem={(info, itemProps) => (
+      <DraxListItem
+        itemProps={itemProps}
+        style={styles.listItem}
+        draggingStyle={styles.itemDragging}
+        dragReleasedStyle={styles.itemReleased}
+        // Any other DraxView props
+      >
+        <Text>{info.item.text}</Text>
+      </DraxListItem>
+    )}
+    onItemReorder={({fromIndex, toIndex}) => {
+      // Update your data here
+      const newData = [...items];
+      const item = newData.splice(fromIndex, 1)[0];
+      newData.splice(toIndex, 0, item);
+      setItems(newData);
+    }}
+  />
+);
+```
+
 <a name="background"></a>
 ## Background
 

package/build/AllHoverViews.js

@@ -0,0 +1,30 @@
+"use strict";
+// import React, { useMemo } from "react";
+//
+// import { ReanimatedHoverView } from "./HoverView";
+// import { useDraxContext } from "./hooks";
+//
+// export const AllHoverViews = ({ allViewIds }: { allViewIds: string[] }) => {
+// 	const { getHoverItems } = useDraxContext();
+//
+// 	const hoverViews = useMemo(
+// 		() => allViewIds && getHoverItems(allViewIds),
+// 		[allViewIds, getHoverItems],
+// 	);
+// 	//   const updateHoverViews = () => {
+// 	//     console.log('getAllViewIds()', allViewIds);
+// 	//     console.log('getHoverItems(getAllViewIds())', allViewIds && getHoverItems(allViewIds));
+// 	//     allViewIds && setAllHoverViews(getHoverItems(allViewIds));
+// 	//   };
+// 	return hoverViews?.map(
+// 		(viewData, index) =>
+// 			viewData?.protocol.hoverPosition?.value && (
+// 				<ReanimatedHoverView
+// 					key={viewData.id || index}
+// 					hoverPosition={viewData?.protocol.hoverPosition}
+// 					scrollPosition={viewData?.scrollPosition}
+// 					{...(viewData?.protocol || {})}
+// 				/>
+// 			),
+// 	);
+// };

package/build/DraxContext.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { DraxContextValue } from './types';
 export declare const DraxContext: import("react").Context<DraxContextValue | undefined>;

package/build/DraxList.d.ts

@@ -1,8 +1,8 @@
-import { PropsWithChildren, Ref } from 'react';
+import { PropsWithChildren, ReactNode, Ref } from 'react';
 import { FlatList } from 'react-native';
 import { DraxListProps } from './types';
-declare type DraxListType = <T extends unknown>(props: PropsWithChildren<DraxListProps<T>> & {
+type DraxListType = <T extends unknown>(props: PropsWithChildren<DraxListProps<T>> & {
     ref?: Ref<FlatList>;
-}) => JSX.Element;
+}) => ReactNode;
 export declare const DraxList: DraxListType;
 export {};