Skip to content

Commit 92a5173

Browse files
MatiPl01MatiPl01
authored
docs: Interactive code examples (#546)
## Description This PR adds interactive code examples to docs. They render example source code together with the example component.
1 parent 0e6ced5 commit 92a5173

25 files changed

+3884
-2875
lines changed

‎packages/docs/babel.config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
plugins: ['react-native-worklets/plugin'],
3+
presets: [require.resolve('@docusaurus/core/lib/babel/preset')]
4+
};

‎packages/docs/docs/grid/examples/active-item-portal.mdx‎

Lines changed: 9 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -11,96 +11,17 @@ This example demonstrates how to use the active item portal to render the active
1111

1212
In this case, the `PortalProvider` is used to render the active item outside of the `ScrollView` content bounds. This is the only way to render only the active item without cropping it whilst keeping the rest of the grid within the `ScrollView` content bounds.
1313

14-
## Source Code
14+
## Example
1515

16-
```tsx
17-
import { useCallback, useState } from 'react';
18-
import { Pressable, StyleSheet, Text, View } from 'react-native';
19-
import Animated, { useAnimatedRef } from 'react-native-reanimated';
20-
import type { SortableGridRenderItem } from 'react-native-sortables';
21-
import Sortable from 'react-native-sortables';
16+
import InteractiveExample from '@site/src/components/InteractiveExample';
17+
import ActiveItemPortalExample from '@site/src/examples/ActiveItemPortal';
18+
import ActiveItemPortalCode from '!!raw-loader!@site/src/examples/ActiveItemPortal';
2219

23-
const DATA = Array.from({ length: 18 }, (_, index) => `Item ${index + 1}`);
24-
25-
export default function Example() {
26-
const [portalEnabled, setPortalEnabled] = useState(false);
27-
const scrollableRef = useAnimatedRef<Animated.ScrollView>();
28-
29-
const renderItem = useCallback<SortableGridRenderItem<string>>(
30-
({ item }) => (
31-
<View style={styles.card}>
32-
<Text style={styles.text}>{item}</Text>
33-
</View>
34-
),
35-
[]
36-
);
37-
38-
return (
39-
<View style={styles.container}>
40-
{/* highlight-start */}
41-
<Sortable.PortalProvider enabled={portalEnabled}>
42-
{/* highlight-end */}
43-
<View style={styles.gridContainer}>
44-
<Animated.ScrollView
45-
contentContainerStyle={styles.contentContainer}
46-
ref={scrollableRef}>
47-
<Sortable.Grid
48-
columnGap={10}
49-
columns={3}
50-
data={DATA}
51-
renderItem={renderItem}
52-
rowGap={10}
53-
scrollableRef={scrollableRef}
54-
/>
55-
</Animated.ScrollView>
56-
</View>
57-
<Pressable onPress={() => setPortalEnabled(prev => !prev)}>
58-
<Text
59-
style={
60-
styles.buttonText
61-
}>{`${portalEnabled ? 'Disable' : 'Enable'} Portal`}</Text>
62-
</Pressable>
63-
{/* highlight-start */}
64-
</Sortable.PortalProvider>
65-
{/* highlight-end */}
66-
</View>
67-
);
68-
}
69-
70-
const styles = StyleSheet.create({
71-
container: {
72-
flex: 1,
73-
alignItems: 'center',
74-
justifyContent: 'center',
75-
backgroundColor: '#DDE2E3'
76-
},
77-
gridContainer: {
78-
margin: 15,
79-
borderRadius: 10,
80-
height: 400,
81-
backgroundColor: '#FFFFFF'
82-
},
83-
card: {
84-
alignItems: 'center',
85-
backgroundColor: '#36877F',
86-
borderRadius: 10,
87-
height: 100,
88-
justifyContent: 'center'
89-
},
90-
contentContainer: {
91-
padding: 10
92-
},
93-
text: {
94-
color: 'white',
95-
fontWeight: 'bold'
96-
},
97-
buttonText: {
98-
color: '#36877F',
99-
fontSize: 18,
100-
fontWeight: 'bold'
101-
}
102-
});
103-
```
20+
<InteractiveExample
21+
component={ActiveItemPortalExample}
22+
code={ActiveItemPortalCode}
23+
metastring='{24,43}'
24+
/>
10425

10526
## Result
10627

‎packages/docs/docs/grid/examples/auto-scroll.mdx‎

Lines changed: 6 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -9,65 +9,13 @@ description: ''
99

1010
This example demonstrates how to use the **auto scroll** feature of the **SortableGrid** component.
1111

12-
## Source Code
12+
## Example
1313

14-
```tsx
15-
import { useCallback } from 'react';
16-
import { StyleSheet, Text, View } from 'react-native';
17-
import Animated, { useAnimatedRef } from 'react-native-reanimated';
18-
import type { SortableGridRenderItem } from 'react-native-sortables';
19-
import Sortable from 'react-native-sortables';
20-
21-
const DATA = Array.from({ length: 30 }, (_, index) => `Item ${index + 1}`);
22-
23-
export default function Example() {
24-
const scrollableRef = useAnimatedRef<Animated.ScrollView>();
25-
26-
const renderItem = useCallback<SortableGridRenderItem<string>>(
27-
({ item }) => (
28-
<View style={styles.card}>
29-
<Text style={styles.text}>{item}</Text>
30-
</View>
31-
),
32-
[]
33-
);
34-
35-
return (
36-
<Animated.ScrollView
37-
contentContainerStyle={styles.contentContainer}
38-
ref={scrollableRef}>
39-
<Sortable.Grid
40-
columnGap={10}
41-
columns={3}
42-
data={DATA}
43-
renderItem={renderItem}
44-
rowGap={10}
45-
scrollableRef={scrollableRef} // required for auto scroll
46-
// autoScrollActivationOffset={75}
47-
// autoScrollSpeed={1}
48-
// autoScrollEnabled={true}
49-
/>
50-
</Animated.ScrollView>
51-
);
52-
}
53-
54-
const styles = StyleSheet.create({
55-
card: {
56-
alignItems: 'center',
57-
backgroundColor: '#36877F',
58-
borderRadius: 10,
59-
height: 100,
60-
justifyContent: 'center'
61-
},
62-
contentContainer: {
63-
padding: 10
64-
},
65-
text: {
66-
color: 'white',
67-
fontWeight: 'bold'
68-
}
69-
});
70-
```
14+
import InteractiveExample from '@site/src/components/InteractiveExample';
15+
import AutoScrollExample from '@site/src/examples/AutoScroll';
16+
import AutoScrollCode from '!!raw-loader!@site/src/examples/AutoScroll';
17+
18+
<InteractiveExample component={AutoScrollExample} code={AutoScrollCode} />
7119

7220
## Result
7321

‎packages/docs/docs/grid/examples/custom-handle.mdx‎

Lines changed: 5 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -9,66 +9,13 @@ description: ''
99

1010
The **Custom Handle** example demonstrates how to use a custom item drag handle.
1111

12-
## Source Code
12+
## Example
1313

14-
```tsx
15-
import { faGripVertical } from '@fortawesome/free-solid-svg-icons';
16-
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
17-
import { useCallback } from 'react';
18-
import { StyleSheet, Text, View } from 'react-native';
19-
import type { SortableGridRenderItem } from 'react-native-sortables';
20-
import Sortable from 'react-native-sortables';
14+
import InteractiveExample from '@site/src/components/InteractiveExample';
15+
import CustomHandleExample from '@site/src/examples/CustomHandle';
16+
import CustomHandleCode from '!!raw-loader!@site/src/examples/CustomHandle';
2117

22-
const DATA = Array.from({ length: 8 }, (_, index) => `Item ${index + 1}`);
23-
24-
export default function Example() {
25-
const renderItem = useCallback<SortableGridRenderItem<string>>(
26-
({ item }) => (
27-
<View style={styles.card}>
28-
<Text style={styles.text}>{item}</Text>
29-
{/* Wraps the handle component (an icon in this case) */}
30-
<Sortable.Handle>
31-
<FontAwesomeIcon color='white' icon={faGripVertical} />
32-
</Sortable.Handle>
33-
</View>
34-
),
35-
[]
36-
);
37-
38-
return (
39-
<View style={styles.container}>
40-
<Sortable.Grid
41-
activeItemScale={1.05}
42-
columns={1}
43-
data={DATA}
44-
overDrag='vertical'
45-
renderItem={renderItem}
46-
rowGap={10}
47-
customHandle // must be set to use a custom handle
48-
/>
49-
</View>
50-
);
51-
}
52-
53-
const styles = StyleSheet.create({
54-
card: {
55-
alignItems: 'center',
56-
backgroundColor: '#36877F',
57-
borderRadius: 12,
58-
flexDirection: 'row',
59-
justifyContent: 'center',
60-
padding: 24
61-
},
62-
container: {
63-
padding: 16
64-
},
65-
text: {
66-
color: 'white',
67-
flex: 1,
68-
fontWeight: 'bold'
69-
}
70-
});
71-
```
18+
<InteractiveExample component={CustomHandleExample} code={CustomHandleCode} />
7219

7320
## Result
7421

‎packages/docs/docs/grid/examples/different-item-heights.mdx‎

Lines changed: 8 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -11,60 +11,16 @@ This example shows that the **Sortable Grid** component can handle **different i
1111

1212
Similar to the **Sortable Grid** component, the **Sortable Flex** component can also handle **different item heights**.
1313

14-
## Source Code
14+
## Example
1515

16-
```tsx
17-
import { useCallback } from 'react';
18-
import { StyleSheet, Text, View } from 'react-native';
19-
import type { SortableGridRenderItem } from 'react-native-sortables';
20-
import Sortable from 'react-native-sortables';
16+
import InteractiveExample from '@site/src/components/InteractiveExample';
17+
import DifferentHeightsExample from '@site/src/examples/DifferentHeights';
18+
import DifferentHeightsCode from '!!raw-loader!@site/src/examples/DifferentHeights';
2119

22-
const DATA = Array.from({ length: 12 }, (_, index) => `Item ${index + 1}`);
23-
24-
export default function Example() {
25-
const renderItem = useCallback<SortableGridRenderItem<string>>(
26-
({ item }) => (
27-
<View
28-
style={[
29-
styles.card,
30-
{ height: Math.random() * 150 + 50 } // random height for demo purposes
31-
]}>
32-
<Text style={styles.text}>{item}</Text>
33-
</View>
34-
),
35-
[]
36-
);
37-
38-
return (
39-
<View style={styles.container}>
40-
<Sortable.Grid
41-
columnGap={10}
42-
columns={3}
43-
data={DATA}
44-
renderItem={renderItem}
45-
rowGap={10}
46-
/>
47-
</View>
48-
);
49-
}
50-
51-
const styles = StyleSheet.create({
52-
card: {
53-
alignItems: 'center',
54-
backgroundColor: '#36877F',
55-
borderRadius: 10,
56-
height: 100,
57-
justifyContent: 'center'
58-
},
59-
container: {
60-
padding: 10
61-
},
62-
text: {
63-
color: 'white',
64-
fontWeight: 'bold'
65-
}
66-
});
67-
```
20+
<InteractiveExample
21+
component={DifferentHeightsExample}
22+
code={DifferentHeightsCode}
23+
/>
6824

6925
## Result
7026

0 commit comments

Comments
 (0)