Skip to content

Commit 9d96240

Browse files
LunatiqueCoderLunatiqueCoder
authored
Merge pull request #177 from LunatiqueCoder/drax-v11
v0.11.0
2 parents dbedea9 + 004c67f commit 9d96240

29 files changed

+7944
-6862
lines changed

‎.eslintrc.js‎

Lines changed: 2 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,4 @@
11
module.exports = {
2-
root: true,
3-
parser: '@typescript-eslint/parser',
4-
parserOptions: {
5-
project: [
6-
'./tsconfig.json',
7-
],
8-
ecmaFeatures: {
9-
jsx: true,
10-
},
11-
},
12-
plugins: [
13-
'@typescript-eslint',
14-
'react',
15-
'react-native',
16-
'react-hooks',
17-
],
18-
extends: [
19-
// 'plugin:@typescript-eslint/recommended', <-- consider this when time permits
20-
'plugin:react/recommended',
21-
'plugin:react-native/all',
22-
'airbnb-typescript',
23-
],
24-
env: {
25-
es6: true,
26-
jest: true,
27-
'react-native/react-native': true,
28-
},
29-
settings: {
30-
react: {
31-
version: 'detect',
32-
},
33-
},
34-
rules: {
35-
'no-undef': 0, // TS handles this; https://github.com/eslint/eslint/issues/13699#issuecomment-694223066
36-
'no-tabs': 0,
37-
'no-shadow': 0,
38-
'arrow-body-style': 0,
39-
'arrow-parens': [2, 'always'],
40-
'no-console': 0,
41-
'max-len': [2, {
42-
code: 120,
43-
tabWidth: 4,
44-
ignoreComments: true,
45-
ignoreUrls: true,
46-
ignoreStrings: true,
47-
ignoreTemplateLiterals: true,
48-
ignoreRegExpLiterals: true,
49-
}],
50-
'@typescript-eslint/indent': [2, 'tab', { SwitchCase: 1 }],
51-
'@typescript-eslint/no-use-before-define': [2, { variables: false }],
52-
'import/no-unresolved': 0, // ts already provides errors for this and updates more quickly in VSCode
53-
'import/prefer-default-export': 0,
54-
'import/no-extraneous-dependencies': [2, { devDependencies: true }], // allows import of type def libs
55-
'react/destructuring-assignment': 0,
56-
'react/jsx-props-no-spreading': 0,
57-
'react/jsx-indent': [2, 'tab'],
58-
'react/jsx-indent-props': [2, 'tab'],
59-
'react/jsx-one-expression-per-line': 0,
60-
'react/no-unused-state': 0,
61-
'react/prop-types': 0,
62-
'react/require-default-props': 0,
63-
'react/no-unused-prop-types': 0,
64-
'react/sort-comp': 0,
65-
'react/state-in-constructor': 0,
66-
'react-native/sort-styles': 0,
67-
'react-native/no-color-literals': 0,
68-
'react-hooks/rules-of-hooks': 2,
69-
'react-hooks/exhaustive-deps': 1,
70-
'@typescript-eslint/comma-dangle': [2, "always-multiline"],
71-
},
72-
ignorePatterns: [
73-
'.eslintrc.js',
74-
],
2+
extends: ['universe/web', 'universe/native'],
3+
plugins: ['prettier'],
754
};

‎.prettierrc‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"arrowParens": "avoid",
3+
"bracketSameLine": false,
4+
"printWidth": 120,
5+
"useTabs": false,
6+
"semi": true,
7+
"singleQuote": true,
8+
"trailingComma": "es5",
9+
"bracketSpacing": true,
10+
"rangeStart": 0,
11+
"rangeEnd": 9007199254740991,
12+
"requirePragma": false,
13+
"insertPragma": false,
14+
"proseWrap": "preserve",
15+
"endOfLine": "auto"
16+
}

‎README.md‎

Lines changed: 81 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,41 @@
1111

1212
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.
1313

14-
**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.**
14+
**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.**
15+
16+
### Experimental Alpha Version (v0.11.0)
17+
18+
An experimental alpha version is now available that introduces significant updates and breaking changes. This version focuses on:
19+
20+
- Integration with latest React Native Reanimated and React Native Gesture Handler by SoftwareMansion
21+
- Enhanced animation performance and capabilities
22+
- Works with New Architecture
23+
24+
**Installation:** To install the experimental alpha version:
25+
26+
```bash
27+
# npm
28+
npm install react-native-drax@alpha
29+
30+
# or yarn
31+
yarn add react-native-drax@alpha
32+
```
33+
34+
You'll also need to ensure you have the required peer dependencies:
35+
36+
```bash
37+
yarn add react-native-reanimated react-native-gesture-handler
38+
```
39+
40+
**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.
1541

1642
*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.*
1743

1844
#### Contents
1945

2046
* [Screenshots](#screenshots)
2147
* [Status](#status)
48+
* [Alpha Version Breaking Changes](#alpha-version-breaking-changes)
2249
* [Background](#background)
2350
* [Concept](#concept)
2451
* [Installation](#installation)
@@ -47,6 +74,59 @@ This library adheres to [Semantic Versioning (semver)](https://semver.org/) and
4774

4875
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).
4976

77+
<a name="alpha-version-breaking-changes"></a>
78+
## Alpha Version Breaking Changes
79+
80+
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.
81+
82+
### DraxList Breaking Changes
83+
84+
- `renderItem` property signature receives different props than before and has replaced `renderItemContent` and `renderHoverContent`
85+
- Receives incoming external drag items inside the list.
86+
- Added `monitoringExternalDragStyle` prop for styling during incoming external drags
87+
- `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)
88+
89+
### DraxListItem Component
90+
91+
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.
92+
93+
#### Usage Example
94+
95+
```jsx
96+
import { DraxList, DraxListItem } from 'react-native-drax';
97+
98+
const MyReorderableList = () => (
99+
<DraxList
100+
data={items}
101+
// BREAKING CHANGE: `style` prop is now applied to internal FlatList, not to the parent DraxView
102+
style={styles.list}
103+
104+
// should use this prop if you were using the `style` prop on `DraxList` on v0.10.3.
105+
parentDraxViewProps={{
106+
style: styles.list,
107+
}}
108+
renderItem={(info, itemProps) => (
109+
<DraxListItem
110+
itemProps={itemProps}
111+
style={styles.listItem}
112+
draggingStyle={styles.itemDragging}
113+
dragReleasedStyle={styles.itemReleased}
114+
// Any other DraxView props
115+
>
116+
<Text>{info.item.text}</Text>
117+
</DraxListItem>
118+
)}
119+
onItemReorder={({fromIndex, toIndex}) => {
120+
// Update your data here
121+
const newData = [...items];
122+
const item = newData.splice(fromIndex, 1)[0];
123+
newData.splice(toIndex, 0, item);
124+
setItems(newData);
125+
}}
126+
/>
127+
);
128+
```
129+
50130
<a name="background"></a>
51131
## Background
52132

‎package.json‎

Lines changed: 43 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,45 @@
11
{
2-
"name": "react-native-drax",
3-
"version": "0.10.3",
4-
"description": "A drag-and-drop system for React Native",
5-
"repository": {
6-
"type": "git",
7-
"url": "git+ssh://git@github.com/nuclearpasta/react-native-drax.git"
8-
},
9-
"main": "build/index.js",
10-
"types": "build/index.d.ts",
11-
"scripts": {
12-
"lint": "yarn run eslint src",
13-
"build": "yarn run tsc",
14-
"prepublish": "yarn run build"
15-
},
16-
"author": "Joe Lafiosca <joe@proxi.gg>",
17-
"license": "MIT",
18-
"dependencies": {
19-
"lodash.isequal": "^4.5.0",
20-
"lodash.throttle": "^4.1.1",
21-
"typesafe-actions": "^5.1.0"
22-
},
23-
"peerDependencies": {
24-
"react": "*",
25-
"react-native": ">=0.65.0",
26-
"react-native-gesture-handler": ">=1.8.0"
27-
},
28-
"devDependencies": {
29-
"@types/lodash.isequal": "^4.5.5",
30-
"@types/lodash.throttle": "^4.1.6",
31-
"@types/node": "^14.14.43",
32-
"@types/react-native": "^0.65.22",
33-
"@typescript-eslint/eslint-plugin": "^4.22.0",
34-
"@typescript-eslint/parser": "^4.22.0",
35-
"eslint": "^7.25.0",
36-
"eslint-config-airbnb-typescript": "^12.3.1",
37-
"eslint-plugin-import": "^2.22.1",
38-
"eslint-plugin-jsx-a11y": "^6.4.1",
39-
"eslint-plugin-react": "^7.23.2",
40-
"eslint-plugin-react-hooks": "^4.2.0",
41-
"eslint-plugin-react-native": "^3.10.0",
42-
"react": "^17.0.2",
43-
"react-native": "^0.65.2",
44-
"react-native-gesture-handler": "^1.8.0",
45-
"typescript": "^4.7.3"
46-
}
2+
"name": "react-native-drax",
3+
"version": "0.11.0-alpha.2",
4+
"description": "A drag-and-drop system for React Native",
5+
"repository": {
6+
"type": "git",
7+
"url": "git+ssh://git@github.com/nuclearpasta/react-native-drax.git"
8+
},
9+
"main": "build/index.js",
10+
"types": "build/index.d.ts",
11+
"scripts": {
12+
"lint": "yarn run eslint src",
13+
"build": "yarn run tsc",
14+
"prepublish": "yarn run build",
15+
"publish:alpha": "npm publish --tag alpha"
16+
},
17+
"author": "Joe Lafiosca <joe@proxi.gg>",
18+
"license": "MIT",
19+
"dependencies": {
20+
"lodash.isequal": "^4.5.0",
21+
"lodash.throttle": "^4.1.1",
22+
"typesafe-actions": "^5.1.0"
23+
},
24+
"peerDependencies": {
25+
"react": "*",
26+
"react-native": ">=0.65.0",
27+
"react-native-gesture-handler": ">=1.8.0"
28+
},
29+
"devDependencies": {
30+
"@types/lodash.isequal": "^4.5.5",
31+
"@types/lodash.throttle": "^4.1.6",
32+
"@types/node": "^14.14.43",
33+
"@types/react": "~18.3.14",
34+
"eslint": "8",
35+
"eslint-config-prettier": "^10.0.1",
36+
"eslint-config-universe": "^13.0.0",
37+
"eslint-plugin-prettier": "^5.2.3",
38+
"prettier": "^3.5.1",
39+
"react": "^18.3.1",
40+
"react-native": "^0.75.4",
41+
"react-native-gesture-handler": "^2.20.0",
42+
"react-native-reanimated": "^3.15.5",
43+
"typescript": "^5.6.3"
44+
}
4745
}

‎src/AllHoverViews.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// import React, { useMemo } from "react";
2+
//
3+
// import { ReanimatedHoverView } from "./HoverView";
4+
// import { useDraxContext } from "./hooks";
5+
//
6+
// export const AllHoverViews = ({ allViewIds }: { allViewIds: string[] }) => {
7+
// const { getHoverItems } = useDraxContext();
8+
//
9+
// const hoverViews = useMemo(
10+
// () => allViewIds && getHoverItems(allViewIds),
11+
// [allViewIds, getHoverItems],
12+
// );
13+
// // const updateHoverViews = () => {
14+
// // console.log('getAllViewIds()', allViewIds);
15+
// // console.log('getHoverItems(getAllViewIds())', allViewIds && getHoverItems(allViewIds));
16+
// // allViewIds && setAllHoverViews(getHoverItems(allViewIds));
17+
// // };
18+
// return hoverViews?.map(
19+
// (viewData, index) =>
20+
// viewData?.protocol.hoverPosition?.value && (
21+
// <ReanimatedHoverView
22+
// key={viewData.id || index}
23+
// hoverPosition={viewData?.protocol.hoverPosition}
24+
// scrollPosition={viewData?.scrollPosition}
25+
// {...(viewData?.protocol || {})}
26+
// />
27+
// ),
28+
// );
29+
// };

0 commit comments

Comments
 (0)