Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(web): broken at dropping #3125

Merged
merged 4 commits into from
Oct 8, 2024
Merged

fix(web): broken at dropping #3125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c867570
fix(web): broken at dropping
MJRT Sep 25, 2024
3a39732
Fix crashes
m-bert Oct 8, 2024
8d7a486
Merge branch 'main' into main
m-bert Oct 8, 2024
0b4c407
Remove combo example from web
m-bert Oct 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion example/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,11 @@
{ name: 'Double draggable', component: DoubleDraggable },
{ name: 'Rows', component: Rows },
{ name: 'Nested Fling', component: NestedFling },
{ name: 'Combo', component: ComboWithGHScroll },
{
name: 'Combo',
component: ComboWithGHScroll,
unsupportedPlatforms: new Set(['web']),
},
{ name: 'Touchables', component: TouchablesIndex as React.ComponentType },
{ name: 'MouseButtons', component: MouseButtons },
{
Expand Down Expand Up @@ -309,7 +313,7 @@
renderSectionHeader={({ section: { sectionTitle } }) => (
<Text style={styles.sectionTitle}>{sectionTitle}</Text>
)}
ItemSeparatorComponent={() => <View style={styles.separator} />}

Check warning on line 316 in example/App.tsx

View workflow job for this annotation

GitHub Actions / check (example) 

Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “MainScreen” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true
/>
</SafeAreaView>
);
Expand Down
27 changes: 23 additions & 4 deletions src/RNGestureHandlerModule.web.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,13 @@
import * as HammerNodeManager from './web_hammer/NodeManager';
import { GestureHandlerWebDelegate } from './web/tools/GestureHandlerWebDelegate';

// init method is called inside attachGestureHandler function. However, this function may
// fail when received view is not valid HTML element. On the other hand, dropGestureHandler
// will be called even if attach failed, which will result in crash.
//
// We use this flag to check whether or not dropGestureHandler should be called.
let shouldPreventDrop = false;

export default {
handleSetJSResponder(tag: number, blockNativeResponder: boolean) {
console.warn('handleSetJSResponder: ', tag, blockNativeResponder);
Expand Down Expand Up @@ -60,18 +67,26 @@
_actionType: ActionType,
propsRef: React.RefObject<unknown>
) {
if (
!(newView instanceof HTMLElement || newView instanceof React.Component)
) {
return;
if (!(newView instanceof Element || newView instanceof React.Component)) {
shouldPreventDrop = true;

const handler = isNewWebImplementationEnabled()

Check warning on line 73 in src/RNGestureHandlerModule.web.ts

View workflow job for this annotation

GitHub Actions / check 

Unsafe assignment of an `any` value
? NodeManager.getHandler(handlerTag)
: HammerNodeManager.getHandler(handlerTag);

const handlerName = handler.constructor.name;

Check warning on line 77 in src/RNGestureHandlerModule.web.ts

View workflow job for this annotation

GitHub Actions / check 

Unsafe assignment of an `any` value

Check warning on line 77 in src/RNGestureHandlerModule.web.ts

View workflow job for this annotation

GitHub Actions / check 

Unsafe member access .constructor on an `any` value

throw new Error(
`${handlerName} with tag ${handlerTag} received child that is not valid HTML element.`

Check warning on line 80 in src/RNGestureHandlerModule.web.ts

View workflow job for this annotation

GitHub Actions / check 

Invalid type "any" of template literal expression
);
}

if (isNewWebImplementationEnabled()) {
// @ts-ignore Types should be HTMLElement or React.Component
NodeManager.getHandler(handlerTag).init(newView, propsRef);

Check warning on line 86 in src/RNGestureHandlerModule.web.ts

View workflow job for this annotation

GitHub Actions / check 

Unsafe call of an `any` typed value
} else {
// @ts-ignore Types should be HTMLElement or React.Component
HammerNodeManager.getHandler(handlerTag).setView(newView, propsRef);

Check warning on line 89 in src/RNGestureHandlerModule.web.ts

View workflow job for this annotation

GitHub Actions / check 

Unsafe member access .setView on an `any` value

Check warning on line 89 in src/RNGestureHandlerModule.web.ts

View workflow job for this annotation

GitHub Actions / check 

Unsafe call of an `any` typed value
}
},
updateGestureHandler(handlerTag: number, newConfig: Config) {
Expand All @@ -83,17 +98,21 @@
newConfig
);
} else {
HammerNodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);

Check warning on line 101 in src/RNGestureHandlerModule.web.ts

View workflow job for this annotation

GitHub Actions / check 

Unsafe member access .updateGestureConfig on an `any` value

Check warning on line 101 in src/RNGestureHandlerModule.web.ts

View workflow job for this annotation

GitHub Actions / check 

Unsafe call of an `any` typed value
}
},
getGestureHandlerNode(handlerTag: number) {
if (isNewWebImplementationEnabled()) {
return NodeManager.getHandler(handlerTag);
} else {
return HammerNodeManager.getHandler(handlerTag);

Check warning on line 108 in src/RNGestureHandlerModule.web.ts

View workflow job for this annotation

GitHub Actions / check 

Unsafe return of an `any` typed value
}
},
dropGestureHandler(handlerTag: number) {
if (shouldPreventDrop) {
return;
}

if (isNewWebImplementationEnabled()) {
NodeManager.dropGestureHandler(handlerTag);
} else {
Expand Down
Loading