Skip to content

Commit eea3355

Browse files
m-bertm-bert
committed
Add comparison
1 parent ff36f17 commit eea3355

4 files changed

Lines changed: 174 additions & 64 deletions

File tree

packages/docs-gesture-handler/docs/guides/upgrading-to-3.md renamed to packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx

Lines changed: 74 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,30 @@ title: Upgrading to the new API introduced in Gesture Handler 3
55

66
## Migrating gestures
77

8-
The most important change brought by the Gesture Handler 3 is the new hook API. Migration is pretty straight-forward. Instead of calling builder methods, everything is passed into configuration object. So, the code like this:
98

10-
```tsx
11-
const gesture = Gesture.Pan()
9+
import CodeComparison from '@site/src/components/CodeComparison';
10+
11+
The most important change brought by the Gesture Handler 3 is the new hook API. Migration is pretty straight-forward. Instead of calling builder methods, everything is passed into configuration object.
12+
13+
<CodeComparison
14+
label1={"RNGH 2"}
15+
label2={"RNGH 3"}
16+
code1={
17+
`const gesture = Gesture.Pan()
1218
.onBegin(() => {
1319
console.log('Pan!');
1420
})
1521
.minDistance(25);
16-
```
17-
18-
Now looks like this:
19-
20-
```tsx
21-
const gesture = usePanGesture({
22-
onBegin: () => {
23-
console.log('Pan!');
24-
},
25-
minDistance: 25,
26-
});
27-
```
22+
`}
23+
code2={
24+
`const gesture = usePanGesture({
25+
onBegin: () => {
26+
console.log('Pan!');
27+
},
28+
minDistance: 25,
29+
});
30+
`}
31+
/>
2832

2933
:::danger Force Touch Gesture
3034
[`ForceTouch`](/docs/2.x/gestures/force-touch-gesture) gesture is not available in hook API.
@@ -34,35 +38,36 @@ const gesture = usePanGesture({
3438

3539
In Gesture Handler 3 some of the callbacks were renamed, namely:
3640

37-
| RNGH3 | RNGH3 |
41+
| RNGH2 | RNGH3 |
3842
| --------- | -------------- |
3943
| `onStart` | `onActivate` |
4044
| `onEnd` | `onDeactivate` |
4145

42-
So the following code from Gesture Handler 2:
46+
Here is comparison of the two APIs:
4347

44-
```tsx
45-
const gesture = Gesture.Pan()
48+
<CodeComparison
49+
label1={"RNGH 2"}
50+
label2={"RNGH 3"}
51+
code1={
52+
`const gesture = Gesture.Pan()
4653
.onStart(() => {
47-
console.log('Pan start!');
54+
console.log('Pan started!');
4855
})
4956
.onEnd(() => {
50-
console.log('Pan end!');
57+
console.log('Pan ended!');
5158
});
52-
```
53-
54-
in Gesture Handler 3 looks like this:
55-
56-
```tsx
57-
const gesture = usePanGesture({
59+
`}
60+
code2={
61+
`const gesture = usePanGesture({
5862
onActivate: () => {
5963
console.log('Pan activated!');
6064
},
6165
onDeactivate: () => {
6266
console.log('Pan deactivated!');
6367
},
6468
});
65-
```
69+
`}
70+
/>
6671

6772
<details>
6873
<summary>Full changes</summary>
@@ -80,51 +85,57 @@ const gesture = usePanGesture({
8085
| `Gesture.Manual()` | `useManualGesture()` |
8186
| `Gesture.ForceTouch()` | |
8287

88+
{/* <HooksTable /> */}
89+
8390
</details>
8491

8592
## Migrating relations
8693

8794
### Composed gestures
8895

89-
Previously, composed gestures were created using `Gesture` object. In Gesture Handler 3, relations are set up using relation hooks. For example, the following code from Gesture Handler 2:
96+
Previously, composed gestures were created using `Gesture` object. In Gesture Handler 3, relations are set up using relation hooks.
9097

91-
```tsx
92-
const pan1 = Gesture.Pan();
98+
<CodeComparison
99+
label1={"RNGH 2"}
100+
label2={"RNGH 3"}
101+
code1={
102+
`const pan1 = Gesture.Pan();
93103
const pan2 = Gesture.Pan();
94104
95105
const gesture = Gesture.Simultaneous(pan1, pan2);
96-
```
97-
98-
in Gesture Handler 3 looks like this:
99-
100-
```tsx
101-
const pan1 = usePanGesture({});
106+
`}
107+
code2={
108+
`const pan1 = usePanGesture({});
102109
const pan2 = usePanGesture({});
103110
104111
const gesture = useSimultaneousGestures(pan1, pan2);
105-
```
112+
`}
113+
/>
106114

107115
:::danger Race gesture
108116
In Gesture Handler 3 `Race` gesture was renamed to `Competing` gesture.
109117
:::
110118

111119
### Cross components relations properties
112120

113-
Properties used to define cross-components interactions were renamed. For example, the following code from Gesture Handler 2:
114-
115-
```tsx
116-
const pan1 = Gesture.Pan();
117-
const pan2 = Gesture.Pan().requireExternalGestureToFail(pan1);
118-
```
119-
120-
in Gesture Handler 3 looks like this:
121-
122-
```tsx
123-
const pan1 = usePanGesture({});
121+
Properties used to define cross-components interactions were renamed.
122+
123+
<CodeComparison
124+
label1={"RNGH 2"}
125+
label2={"RNGH 3"}
126+
code1={
127+
`const pan1 = Gesture.Pan();
128+
const pan2 =
129+
Gesture.Pan().requireExternalGestureToFail(pan1);
130+
`}
131+
code2={
132+
`const pan1 = usePanGesture({});
124133
const pan2 = usePanGesture({
125134
requireToFail: pan1,
126135
});
127-
```
136+
`}
137+
skipFormatting1={true}
138+
/>
128139

129140
<details>
130141
<summary>Full changes</summary>
@@ -143,33 +154,32 @@ const pan2 = usePanGesture({
143154

144155
## Using SVG
145156

146-
In Gesture Handler 2 it was possible to use `GestureDetector` directly on `SVG`:
157+
In Gesture Handler 2 it was possible to use `GestureDetector` directly on `SVG`. In Gesture Handler 3, the correct way to interact with `SVG` is to use `InterceptingGestureDetector` and `VirtualGestureDetector`.
147158

148-
```tsx
149-
// highlight-next-line
159+
<CodeComparison
160+
label1={"RNGH 2"}
161+
label2={"RNGH 3"}
162+
code1={
163+
`
150164
<GestureDetector gesture={containerTap}>
151165
<Svg>
152-
// highlight-next-line
153-
<GestureDetector gesture={circleElementTap}>
166+
<GestureDetector gesture={circleTap}>
154167
<Circle />
155168
</GestureDetector>
156169
</Svg>
157170
</GestureDetector>
158-
```
159-
160-
In Gesture Handler 3, the correct way to interact with `SVG` is to use `InterceptingGestureDetector` and `VirtualGestureDetector`:
161-
162-
```tsx
163-
// highlight-next-line
171+
`}
172+
code2={
173+
`
164174
<InterceptingGestureDetector gesture={containerTap}>
165175
<Svg>
166-
// highlight-next-line
167-
<VirtualGestureDetector gesture={circleElementTap}>
176+
<VirtualGestureDetector gesture={circleTap}>
168177
<Circle />
169178
</VirtualGestureDetector>
170179
</Svg>
171180
</InterceptingGestureDetector>
172-
```
181+
`}
182+
/>
173183

174184
:::danger Detectors order
175185
`VirtualGestureDetector` has to be a child of `InterceptingGestureDetector`.

‎packages/docs-gesture-handler/src/components/CodeComparison/index.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react';
2+
import CodeBlock from '@theme/CodeBlock';
3+
import useFormattedCode from '@site/src/hooks/useFormattedCode';
4+
5+
export default function CodeComparison({
6+
label1,
7+
label2,
8+
code1,
9+
code2,
10+
skipFormatting1 = false,
11+
skipFormatting2 = false,
12+
}) {
13+
const formattedCode1 = useFormattedCode(code1);
14+
const formattedCode2 = useFormattedCode(code2);
15+
16+
return (
17+
<div className="codeComparison">
18+
<div className="codeHolder">
19+
<div className="codeComparisonHeader">{label1}</div>
20+
<CodeBlock language="tsx">
21+
{skipFormatting1 ? code1 : formattedCode1}
22+
</CodeBlock>
23+
</div>
24+
25+
<div className="codeHolder">
26+
<div className="codeComparisonHeader">{label2}</div>
27+
<CodeBlock language="tsx">
28+
{skipFormatting2 ? code2 : formattedCode2}
29+
</CodeBlock>
30+
</div>
31+
</div>
32+
);
33+
}

‎packages/docs-gesture-handler/src/css/overrides.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,49 @@ details thead {
119119
font-family: var(--ifm-font-family-monospace);
120120
}
121121

122+
table [class*='codeBlockContent'] pre,
123+
table [class*='codeBlockContent'] code {
124+
border:none;
125+
background-color: transparent;
126+
font-family: var(--ifm-font-family-monospace);
127+
}
128+
129+
.codeCell {
130+
vertical-align: top;
131+
/* padding:0; */
132+
}
133+
134+
.codeComparison {
135+
display: flex;
136+
flex-direction: row;
137+
margin-bottom: 20px;
138+
border: 1px solid var(--swm-border);
139+
}
140+
141+
.codeComparison .codeHolder:first-child {
142+
border-right: 1px solid var(--swm-border);
143+
}
144+
145+
.codeComparison pre,
146+
.codeComparison code {
147+
border:none;
148+
background-color: transparent;
149+
font-family: var(--ifm-font-family-monospace);
150+
151+
}
152+
153+
.codeComparisonHeader {
154+
text-align: center;
155+
font-weight: bold;
156+
padding: 10px;
157+
border-bottom: 1px solid var(--swm-border);
158+
}
159+
160+
.codeHolder {
161+
width: 50%;
162+
/* border: 1px solid var(--swm-border); */
163+
}
164+
122165
/* Add small padding, when some of the lines are too long in a code block */
123166
[class*='codeBlockLines'] span:last-of-type {
124167
margin-right: 1em;

‎packages/docs-gesture-handler/src/hooks/useFormattedCode.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { useEffect, useState } from 'react';
2+
import * as prettier from 'prettier/standalone';
3+
import tsParser from 'prettier/plugins/typescript';
4+
import estreeParser from 'prettier/plugins/estree';
5+
6+
const prettierOptions = {
7+
parser: 'typescript',
8+
plugins: [tsParser, estreeParser],
9+
};
10+
11+
export default function useFormattedCode(code: string) {
12+
const [formattedCode, setFormattedCode] = useState(code);
13+
14+
useEffect(() => {
15+
async function formatCode() {
16+
const newCode = await prettier.format(code, prettierOptions);
17+
setFormattedCode(newCode);
18+
}
19+
20+
void formatCode();
21+
}, [code]);
22+
23+
return formattedCode;
24+
}

0 commit comments

Comments
 (0)