Skip to content

Commit 25db73e

Browse files
kilbotkilbot
committed
update ResizeHandle component for examples
1 parent acc2836 commit 25db73e

File tree

15 files changed

+126
-75
lines changed

15 files changed

+126
-75
lines changed

‎apps/example/app/(examples)/_layout.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Slot, Stack, usePathname } from 'expo-router';
22
import { ScrollView } from 'react-native-gesture-handler';
3+
34
import { links } from '../index';
45

56
export default function ExampleLayout() {

‎apps/example/app/(examples)/collapsible-panels.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
import { useReducer } from 'react';
2+
import { Pressable, Text, View } from 'react-native';
3+
import { Panel, PanelGroup, assert } from 'react-native-resizable-panels';
4+
15
import {
26
TUTORIAL_CODE_CSS,
37
TUTORIAL_CODE_HTML,
@@ -7,10 +11,8 @@ import {
711
import { Code } from '@/components/Code';
812
import { ExamplePage } from '@/components/ExamplePage';
913
import { Icon } from '@/components/Icon';
14+
import { ResizeHandle } from '@/components/ResizeHandle';
1015
import { colors, styles } from '@/styles/common';
11-
import { useReducer } from 'react';
12-
import { Pressable, Text, View } from 'react-native';
13-
import { Panel, PanelGroup, PanelResizeHandle, assert } from 'react-native-resizable-panels';
1416

1517
function Description() {
1618
return (
@@ -25,7 +27,7 @@ const code = `<PanelGroup direction="horizontal">
2527
<Panel collapsible={true} collapsedSize={35} minSize={10}>
2628
<SourceBrowser />
2729
</Panel>
28-
<PanelResizeHandle />
30+
<ResizeHandle />
2931
<Panel>
3032
<SourceViewer />
3133
</Panel>
@@ -38,7 +40,7 @@ type File = {
3840
path: string[];
3941
};
4042

41-
const FILE_PATHS: Array<[path: string, code: string]> = [
43+
const FILE_PATHS: [path: string, code: string][] = [
4244
['source/index.html', TUTORIAL_CODE_HTML],
4345
['source/README.md', TUTORIAL_CODE_README],
4446
['source/styles.css', TUTORIAL_CODE_CSS],
@@ -84,7 +86,7 @@ function reducer(state: FilesState, action: FilesAction): FilesState {
8486
const { file } = action;
8587
const { currentFileIndex, openFiles } = state;
8688

87-
let fileIndex = openFiles.findIndex(({ fileName }) => fileName === file.fileName);
89+
const fileIndex = openFiles.findIndex(({ fileName }) => fileName === file.fileName);
8890
if (fileIndex === -1) {
8991
// File not open; this shouldn't happen.
9092
return state;
@@ -188,9 +190,7 @@ export default function CollapsiblePanelsScreen() {
188190
))}
189191
</View>
190192
</Panel>
191-
<PanelResizeHandle
192-
style={fileListCollapsed ? styles.ResizeHandleCollapsed : styles.ResizeHandle}
193-
/>
193+
<ResizeHandle />
194194
<Panel style={styles.PanelColumn} minSize={50}>
195195
{currentFile && (
196196
<Code code={currentFile.code.trim()} language={currentFile.language} showLineNumbers />

‎apps/example/app/(examples)/conditional-panels.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
import React, { useState } from 'react';
2+
import { Text } from 'react-native';
3+
import { Panel, PanelGroup } from 'react-native-resizable-panels';
4+
15
import { Button } from '@/components/Button';
26
import { ExamplePage } from '@/components/ExamplePage';
7+
import { ResizeHandle } from '@/components/ResizeHandle';
38
import { colors, styles } from '@/styles/common';
4-
import React, { useState } from 'react';
5-
import { Text } from 'react-native';
6-
import { Panel, PanelGroup, PanelResizeHandle } from 'react-native-resizable-panels';
79

810
const description =
911
'Panels can be conditionally rendered. The `order` ensures they are (re)added in the correct order.';
@@ -14,15 +16,15 @@ const code = `<PanelGroup autoSaveId="conditional" direction="horizontal">
1416
<Panel id="left" minSize={10} order={1}>
1517
<View>left</View>
1618
</Panel>
17-
<PanelResizeHandle />
19+
<ResizeHandle />
1820
</>
1921
)}
2022
<Panel id="center" minSize={10} order={2}>
2123
<View>middle</View>
2224
</Panel>
2325
{showRightPanel && (
2426
<>
25-
<PanelResizeHandle />
27+
<ResizeHandle />
2628
<Panel id="right" minSize={10} order={3}>
2729
<View>right</View>
2830
</Panel>
@@ -44,15 +46,15 @@ export default function ConditionalPanelsScreen() {
4446
<Panel style={styles.Panel} id="left" minSize={10} order={1}>
4547
<Text style={{ ...styles.Centered, color: colors.default }}>left</Text>
4648
</Panel>
47-
<PanelResizeHandle style={styles.ResizeHandle} />
49+
<ResizeHandle />
4850
</>
4951
)}
5052
<Panel style={styles.Panel} id="center" minSize={10} order={2}>
5153
<Text style={{ ...styles.Centered, color: colors.default }}>middle</Text>
5254
</Panel>
5355
{showRightPanel && (
5456
<>
55-
<PanelResizeHandle style={styles.ResizeHandle} />
57+
<ResizeHandle />
5658
<Panel style={styles.Panel} id="right" minSize={10} order={3}>
5759
<Text style={{ ...styles.Centered, color: colors.default }}>right</Text>
5860
</Panel>

‎apps/example/app/(examples)/external-persistence.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
1+
import { Text } from 'react-native';
2+
import { Panel, PanelGroup } from 'react-native-resizable-panels';
3+
14
import { ExamplePage } from '@/components/ExamplePage';
5+
import { ResizeHandle } from '@/components/ResizeHandle';
26
import { colors, styles } from '@/styles/common';
3-
import { Text } from 'react-native';
4-
import { Panel, PanelGroup, PanelResizeHandle } from 'react-native-resizable-panels';
57

68
const description =
79
'External persistence is useful when you want to persist the panel state across sessions.';
810

911
const code = `<PanelGroup autoSaveId="example" direction="horizontal">
1012
<Panel>left</Panel>
11-
<PanelResizeHandle />
13+
<ResizeHandle />
1214
<Panel>middle</Panel>
13-
<PanelResizeHandle />
15+
<ResizeHandle />
1416
<Panel>right</Panel>
1517
</PanelGroup>`;
1618

@@ -21,11 +23,11 @@ export default function ExternalPersistenceScreen() {
2123
<Panel style={styles.PanelRow} collapsible={true} minSize={10}>
2224
<Text style={{ ...styles.Centered, color: colors.default }}>left</Text>
2325
</Panel>
24-
<PanelResizeHandle style={styles.ResizeHandle} />
26+
<ResizeHandle />
2527
<Panel style={styles.PanelRow} minSize={10}>
2628
<Text style={{ ...styles.Centered, color: colors.default }}>middle</Text>
2729
</Panel>
28-
<PanelResizeHandle style={styles.ResizeHandle} />
30+
<ResizeHandle />
2931
<Panel style={styles.PanelRow} collapsible={true} minSize={10}>
3032
<Text style={{ ...styles.Centered, color: colors.default }}>right</Text>
3133
</Panel>

‎apps/example/app/(examples)/horizontal-layouts.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
import { Text } from 'react-native';
2+
import { Panel, PanelGroup } from 'react-native-resizable-panels';
3+
14
import { ExamplePage } from '@/components/ExamplePage';
5+
import { ResizeHandle } from '@/components/ResizeHandle';
26
import { colors, styles } from '@/styles/common';
3-
import { Text } from 'react-native';
4-
import { Panel, PanelGroup, PanelResizeHandle } from 'react-native-resizable-panels';
57

68
const description =
79
'Horizontal layouts are defined by setting the "direction" prop to "horizontal".';
@@ -10,11 +12,11 @@ const code = `<PanelGroup direction="horizontal">
1012
<Panel defaultSize={30} minSize={20}>
1113
<Text>left</Text>
1214
</Panel>
13-
<PanelResizeHandle />
15+
<ResizeHandle />
1416
<Panel minSize={30}>
1517
<Text>middle</Text>
1618
</Panel>
17-
<PanelResizeHandle />
19+
<ResizeHandle />
1820
<Panel defaultSize={30} minSize={20}>
1921
<Text>right</Text>
2022
</Panel>
@@ -27,11 +29,11 @@ export default function HorizontalLayoutsScreen() {
2729
<Panel defaultSize={30} minSize={20}>
2830
<Text style={{ ...styles.Centered, color: colors.default }}>left</Text>
2931
</Panel>
30-
<PanelResizeHandle style={styles.ResizeHandle} />
32+
<ResizeHandle />
3133
<Panel minSize={30}>
3234
<Text style={{ ...styles.Centered, color: colors.default }}>middle</Text>
3335
</Panel>
34-
<PanelResizeHandle style={styles.ResizeHandle} />
36+
<ResizeHandle />
3537
<Panel defaultSize={30} minSize={20}>
3638
<Text style={{ ...styles.Centered, color: colors.default }}>right</Text>
3739
</Panel>

‎apps/example/app/(examples)/imperative-panel-api.tsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
1-
import { Button } from '@/components/Button';
2-
import { ExamplePage } from '@/components/ExamplePage';
3-
import { colors, styles } from '@/styles/common';
41
import { useRef, useState } from 'react';
52
import { Text, View } from 'react-native';
3+
import { ImperativePanelHandle, Panel, PanelGroup } from 'react-native-resizable-panels';
64

7-
import {
8-
ImperativePanelHandle,
9-
Panel,
10-
PanelGroup,
11-
PanelResizeHandle,
12-
} from 'react-native-resizable-panels';
5+
import { Button } from '@/components/Button';
6+
import { ExamplePage } from '@/components/ExamplePage';
7+
import { ResizeHandle } from '@/components/ResizeHandle';
8+
import { colors, styles } from '@/styles/common';
139

1410
type Sizes = {
1511
left: number;
@@ -91,7 +87,7 @@ const code = `import {
9187
<Panel collapsible ref={ref}>
9288
<Text>left</Text>
9389
</Panel>
94-
<PanelResizeHandle />
90+
<ResizeHandle />
9591
<Panel>
9692
<Text>right</Text>
9793
</Panel>
@@ -143,7 +139,7 @@ export default function ImperativePanelApiScreen() {
143139
left: {Math.round(sizes.left)}
144140
</Text>
145141
</Panel>
146-
<PanelResizeHandle style={styles.ResizeHandle} />
142+
<ResizeHandle />
147143
<Panel
148144
style={styles.PanelRow}
149145
collapsible={true}
@@ -158,7 +154,7 @@ export default function ImperativePanelApiScreen() {
158154
middle: {Math.round(sizes.middle)}
159155
</Text>
160156
</Panel>
161-
<PanelResizeHandle style={styles.ResizeHandle} />
157+
<ResizeHandle />
162158
<Panel
163159
style={styles.PanelRow}
164160
collapsible

‎apps/example/app/(examples)/imperative-panelgroup-api.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import { Button } from '@/components/Button';
2-
import { ExamplePage } from '@/components/ExamplePage';
3-
import { colors, styles } from '@/styles/common';
41
import { useRef, useState } from 'react';
52
import { Text, View } from 'react-native';
63
import type { ImperativePanelGroupHandle } from 'react-native-resizable-panels';
7-
import { Panel, PanelGroup, PanelResizeHandle } from 'react-native-resizable-panels';
4+
import { Panel, PanelGroup } from 'react-native-resizable-panels';
5+
6+
import { Button } from '@/components/Button';
7+
import { ExamplePage } from '@/components/ExamplePage';
8+
import { ResizeHandle } from '@/components/ResizeHandle';
9+
import { colors, styles } from '@/styles/common';
810

911
function Description() {
1012
const apiMethods = [
@@ -44,8 +46,7 @@ const code = `import {
4446
ImperativePanelGroupHandle,
4547
Panel,
4648
PanelGroup,
47-
PanelResizeHandle,
48-
} from "react-resizable-panels";
49+
} from "react-native-resizable-panels";
4950
5051
const ref = useRef<ImperativePanelGroupHandle>(null);
5152
@@ -59,7 +60,7 @@ const code = `import {
5960
6061
<PanelGroup direction="horizontal" ref={ref}>
6162
<Panel>left</Panel>
62-
<PanelResizeHandle />
63+
<ResizeHandle />
6364
<Panel>right</Panel>
6465
</PanelGroup>`;
6566

@@ -99,7 +100,7 @@ export default function ImperativePanelGroupApiScreen() {
99100
left: {left ? Math.round(left) : '-'}
100101
</Text>
101102
</Panel>
102-
<PanelResizeHandle style={styles.ResizeHandle} />
103+
<ResizeHandle />
103104
<Panel style={styles.PanelRow} minSize={10}>
104105
<Text style={{ ...styles.Centered, color: colors.default }}>
105106
right: {right ? Math.round(right) : '-'}

‎apps/example/app/(examples)/nested-groups.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
import { Text } from 'react-native';
2+
import { Panel, PanelGroup } from 'react-native-resizable-panels';
3+
14
import { ExamplePage } from '@/components/ExamplePage';
5+
import { ResizeHandle } from '@/components/ResizeHandle';
26
import { colors, styles } from '@/styles/common';
3-
import { Text } from 'react-native';
4-
import { Panel, PanelGroup, PanelResizeHandle } from 'react-native-resizable-panels';
57

68
const description =
79
'This example shows nested groups. Click near the intersection of two groups to resize in multiple directions at once.';
@@ -10,27 +12,27 @@ const code = `<PanelGroup direction="horizontal">
1012
<Panel>
1113
left
1214
</Panel>
13-
<PanelResizeHandle />
15+
<ResizeHandle />
1416
<Panel>
1517
<PanelGroup direction="vertical">
1618
<Panel>
1719
top
1820
</Panel>
19-
<PanelResizeHandle />
21+
<ResizeHandle />
2022
<Panel>
2123
<PanelGroup direction="horizontal">
2224
<Panel>
2325
left
2426
</Panel>
25-
<PanelResizeHandle />
27+
<ResizeHandle />
2628
<Panel>
2729
right
2830
</Panel>
2931
</PanelGroup>
3032
</Panel>
3133
</PanelGroup>
3234
</Panel>
33-
<PanelResizeHandle />
35+
<ResizeHandle />
3436
<Panel>
3537
right
3638
</Panel>
@@ -43,27 +45,27 @@ export default function NestedGroupsScreen() {
4345
<Panel style={styles.PanelRow} defaultSize={20} minSize={10}>
4446
<Text style={{ ...styles.Centered, color: colors.default }}>left</Text>
4547
</Panel>
46-
<PanelResizeHandle style={styles.ResizeHandle} />
48+
<ResizeHandle />
4749
<Panel style={styles.PanelRow} minSize={35}>
4850
<PanelGroup style={styles.PanelGroup} direction="vertical">
4951
<Panel style={styles.PanelColumn} defaultSize={35} minSize={10}>
5052
<Text style={{ ...styles.Centered, color: colors.default }}>top</Text>
5153
</Panel>
52-
<PanelResizeHandle style={styles.ResizeHandle} />
54+
<ResizeHandle />
5355
<Panel style={styles.PanelColumn} minSize={10}>
5456
<PanelGroup style={styles.PanelGroup} direction="horizontal">
5557
<Panel style={styles.PanelRow} minSize={10}>
5658
<Text style={{ ...styles.Centered, color: colors.default }}>left</Text>
5759
</Panel>
58-
<PanelResizeHandle style={styles.ResizeHandle} />
60+
<ResizeHandle />
5961
<Panel style={styles.PanelRow} minSize={10}>
6062
<Text style={{ ...styles.Centered, color: colors.default }}>right</Text>
6163
</Panel>
6264
</PanelGroup>
6365
</Panel>
6466
</PanelGroup>
6567
</Panel>
66-
<PanelResizeHandle style={styles.ResizeHandle} />
68+
<ResizeHandle />
6769
<Panel style={styles.PanelRow} defaultSize={20} minSize={10}>
6870
<Text style={{ ...styles.Centered, color: colors.default }}>right</Text>
6971
</Panel>

‎apps/example/app/(examples)/overflow-content.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1+
import { ScrollView, useWindowDimensions } from 'react-native';
2+
import { Panel, PanelGroup } from 'react-native-resizable-panels';
3+
14
import { Code } from '@/components/Code';
25
import { ExamplePage } from '@/components/ExamplePage';
6+
import { ResizeHandle } from '@/components/ResizeHandle';
37
import { styles } from '@/styles/common';
4-
import { ScrollView, useWindowDimensions } from 'react-native';
5-
import { Panel, PanelGroup, PanelResizeHandle } from 'react-native-resizable-panels';
68

79
const description =
810
'Panels clip their content by default, to avoid showing scrollbars while resizing. Content can still be configured to overflow within a panel though. This example shows how.';
@@ -13,7 +15,7 @@ const code = `<PanelGroup direction="horizontal">
1315
{/* Content */}
1416
</ScrollView>
1517
</Panel>
16-
<PanelResizeHandle />
18+
<ResizeHandle />
1719
<Panel>
1820
<ScrollView>
1921
{/* Content */}
@@ -35,7 +37,7 @@ export default function OverflowContentScreen() {
3537
</Code>
3638
</ScrollView>
3739
</Panel>
38-
<PanelResizeHandle style={styles.ResizeHandle} />
40+
<ResizeHandle />
3941
<Panel style={styles.PanelColumn} defaultSize={50} minSize={25}>
4042
<ScrollView>
4143
<Code language="javascript" showLineNumbers>

0 commit comments

Comments
 (0)