Skip to content

Commit 33a85a3

Browse files
m-bertm-bert
committed
Add CodeWithDetails
1 parent eb83d43 commit 33a85a3

3 files changed

Lines changed: 274 additions & 8 deletions

File tree

‎packages/docs-gesture-handler/docs/fundamentals/callbacks-events.mdx‎

Lines changed: 74 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ sidebar_position: 5
66
---
77

88
import {GestureEventFlowChart, TouchEventFlowChart} from '@site/src/examples/CallbacksFlowCharts'
9+
import CodeWithTypes from '@site/src/components/CodeWithTypes';
910

1011
Every gesture can be treated as ["state machine"](https://en.wikipedia.org/wiki/Finite-state_machine).
1112
At any given time, each handler instance has an assigned state that can change when new touch events occur or can be forced to change by the touch system in certain circumstances.
@@ -26,10 +27,79 @@ States manage the internal recognition process. You can hook into these transiti
2627

2728
## Events
2829

29-
There are two types of events in RNGH3: `GestureEvent` and `TouchEvent`.
30-
31-
- `GestureEvent` carries a gesture-specific data along with `handlerTag`.
32-
- `TouchEvent` carries information about raw touch events, like touching the screen or moving the finger.
30+
### GestureEvent
31+
32+
<CodeWithTypes
33+
srcCode={`
34+
export type GestureEvent<HandlerData> = {
35+
handlerTag: number;
36+
numberOfPointers: number;
37+
pointerType: PointerType;
38+
} & HandlerData;
39+
`}
40+
srcDetails={`
41+
export enum PointerType {
42+
TOUCH,
43+
STYLUS,
44+
MOUSE,
45+
KEY,
46+
OTHER,
47+
}`}
48+
/>
49+
50+
`GestureEvent` contains properties common to all gestures (`handlerTag`, `numberOfPointers`, `pointerType`) along with gesture-specific data defined in each gesture's documentation.
51+
52+
### TouchEvent
53+
54+
<CodeWithTypes
55+
srcCode={`
56+
export type GestureTouchEvent = {
57+
handlerTag: number;
58+
numberOfTouches: number;
59+
state: State;
60+
eventType: TouchEventType;
61+
allTouches: TouchData[];
62+
changedTouches: TouchData[];
63+
pointerType: PointerType;
64+
};
65+
`}
66+
srcDetails={`
67+
export const State = {
68+
UNDETERMINED: 0,
69+
FAILED: 1,
70+
BEGAN: 2,
71+
CANCELLED: 3,
72+
ACTIVE: 4,
73+
END: 5,
74+
} as const;
75+
76+
export const TouchEventType = {
77+
UNDETERMINED: 0,
78+
TOUCHES_DOWN: 1,
79+
TOUCHES_MOVE: 2,
80+
TOUCHES_UP: 3,
81+
TOUCHES_CANCEL: 4,
82+
} as const;
83+
84+
export const TouchEventType = {
85+
UNDETERMINED: 0,
86+
TOUCHES_DOWN: 1,
87+
TOUCHES_MOVE: 2,
88+
TOUCHES_UP: 3,
89+
TOUCHES_CANCEL: 4,
90+
} as const;
91+
92+
export enum PointerType {
93+
TOUCH,
94+
STYLUS,
95+
MOUSE,
96+
KEY,
97+
OTHER,
98+
}
99+
`}
100+
/>
101+
102+
`TouchEvent` carries information about raw touch events, like touching the screen or moving the finger.
33103

34104
## Callbacks flow
35105

@@ -43,10 +113,6 @@ There are two types of events in RNGH3: `GestureEvent` and `TouchEvent`.
43113

44114
## Callbacks
45115

46-
:::info
47-
`HandlerData` in the following callbacks refers to gesture-specific event data documented in each gesture's page.
48-
:::
49-
50116
### onBegin
51117

52118
```ts

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

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import React, { useEffect, useState } from 'react';
2+
import clsx from 'clsx';
3+
4+
import BrowserOnly from '@docusaurus/BrowserOnly';
5+
import CodeBlock from '@theme/CodeBlock';
6+
7+
import styles from './styles.module.css';
8+
9+
import * as prettier from 'prettier/standalone';
10+
import tsParser from 'prettier/plugins/typescript';
11+
import estreeParser from 'prettier/plugins/estree';
12+
13+
interface Props {
14+
srcCode: string;
15+
srcDetails: string;
16+
}
17+
18+
const prettierOptions = {
19+
parser: 'typescript',
20+
plugins: [tsParser, estreeParser],
21+
};
22+
23+
export default function CodeWithTypes({ srcCode, srcDetails }: Props) {
24+
const [showCode, setShowCode] = useState(true);
25+
const [code, setCode] = useState<string>(srcCode);
26+
const [details, setDetails] = useState<string>('');
27+
28+
useEffect(() => {
29+
async function formatCode() {
30+
const formattedCode = await prettier.format(srcCode, prettierOptions);
31+
const formattedDetails = await prettier.format(
32+
srcDetails,
33+
prettierOptions
34+
);
35+
36+
setCode(formattedCode);
37+
setDetails(formattedDetails);
38+
}
39+
40+
void formatCode();
41+
}, [srcCode, srcDetails]);
42+
43+
return (
44+
<BrowserOnly fallback={<div>Loading...</div>}>
45+
{() => (
46+
<div
47+
className={clsx(styles.container, styles.code, styles.marginBottom)}>
48+
<div
49+
className={clsx(
50+
styles.buttonsContainer,
51+
styles.upperButtonsContainer
52+
)}>
53+
<div>
54+
<button
55+
type="button"
56+
className={clsx(
57+
styles.actionButton,
58+
showCode ? styles.actionButtonActive : ''
59+
)}
60+
onClick={() => setShowCode(true)}>
61+
Type
62+
</button>
63+
<button
64+
type="button"
65+
className={clsx(
66+
styles.actionButton,
67+
!showCode ? styles.actionButtonActive : ''
68+
)}
69+
onClick={() => setShowCode(false)}>
70+
Details
71+
</button>
72+
</div>
73+
</div>
74+
75+
{showCode ? (
76+
<div className={styles.codeBlock}>
77+
<CodeBlock language="tsx">{code}</CodeBlock>
78+
</div>
79+
) : (
80+
<div className={styles.codeBlock}>
81+
<CodeBlock language="tsx">{details}</CodeBlock>
82+
</div>
83+
)}
84+
</div>
85+
)}
86+
</BrowserOnly>
87+
);
88+
}

‎packages/docs-gesture-handler/src/components/CodeWithTypes/styles.module.css‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
5+
contain: content;
6+
7+
background-color: var(--swm-off-background);
8+
border: 1px solid var(--swm-border);
9+
10+
width: 100%;
11+
align-self: stretch;
12+
}
13+
14+
.marginBottom {
15+
margin-bottom: var(--ifm-leading);
16+
}
17+
18+
/* Classes used to omit default docusaurus styling. */
19+
[class*='codeBlockContainer'] {
20+
box-shadow: none;
21+
}
22+
23+
.codeBlock {
24+
overflow-y: auto;
25+
}
26+
27+
.codeBlock [class*='codeBlockContent'] pre {
28+
border: none;
29+
padding: 16px 20px;
30+
}
31+
32+
.codeBlock [class*='codeBlockContent'] code {
33+
background-color: var(--swm-off-background);
34+
width: 100%;
35+
padding: 0;
36+
border: none;
37+
text-wrap: wrap;
38+
}
39+
40+
41+
/* Hide default action buttons, displayed by Docusaurus */
42+
.codeBlock [class*='buttonGroup'] {
43+
display: none;
44+
}
45+
46+
.code {
47+
flex: 1;
48+
}
49+
50+
.buttonsContainer {
51+
display: flex;
52+
justify-content: space-around;
53+
align-items: center;
54+
55+
margin: 1em 1em 1em 1em;
56+
}
57+
58+
.container .buttonsContainer {
59+
position: absolute;
60+
right: 0;
61+
top: 0;
62+
63+
z-index: 1;
64+
}
65+
66+
@media (max-width: 996px) {
67+
.container .buttonsContainer {
68+
position: relative;
69+
width: fit-content;
70+
margin: 1.5em auto;
71+
}
72+
}
73+
74+
/* .previewContainer {
75+
flex: 1 1 auto;
76+
} */
77+
78+
/* Style preview only when user is in the 'code' section. */
79+
.container .previewContainer {
80+
flex: 1 1 auto;
81+
overflow-y: auto;
82+
83+
padding: 0 24px;
84+
margin: 16px 8px 8px 0;
85+
}
86+
87+
@media (max-width: 996px) {
88+
.container .previewContainer {
89+
margin-top: 0;
90+
}
91+
}
92+
93+
.actionButton {
94+
margin-right: 0.5em;
95+
padding: 0 0 2px 0;
96+
97+
border: none;
98+
background-color: inherit;
99+
color: var(--swm-interactive-button-color);
100+
cursor: pointer;
101+
102+
font-family: var(--swm-body-font);
103+
font-weight: 500;
104+
font-size: 16px;
105+
106+
text-align: center;
107+
}
108+
109+
.actionButtonActive {
110+
color: var(--swm-interactive-button-active);
111+
border-bottom: 1px solid var(--swm-interactive-button-active);
112+
}

0 commit comments

Comments
 (0)