Skip to content

Commit 6525dba

Browse files
lodev09lodev09
committed
refactor: componentized example
1 parent 66f340a commit 6525dba

File tree

12 files changed

+347
-238
lines changed

12 files changed

+347
-238
lines changed

‎example/src/App.tsx

Lines changed: 19 additions & 238 deletions
Original file line numberDiff line numberDiff line change
@@ -1,197 +1,33 @@
11
import React, { useRef } from 'react'
2-
import {
3-
Text,
4-
TouchableOpacity,
5-
View,
6-
type TouchableOpacityProps,
7-
type ViewStyle,
8-
type TextStyle,
9-
type ViewProps,
10-
ScrollView,
11-
FlatList,
12-
type ColorValue,
13-
TextInput,
14-
} from 'react-native'
2+
import { View, type ViewStyle } from 'react-native'
153
import { TrueSheet } from '@lodev09/react-native-true-sheet'
164

17-
import { random, times } from './utils'
18-
19-
const SPACING = 16
20-
const INPUT_HEIGHT = SPACING * 3
21-
const FOOTER_HEIGHT = SPACING * 6
22-
const BORDER_RADIUS = 4
23-
const GRABBER_COLOR = 'rgba(121, 135, 160, 0.5)'
24-
25-
const DARK = '#282e37'
26-
const GRAY = '#b2bac8'
27-
const DARK_GRAY = '#333b48'
28-
const LIGHT_GRAY = '#ebedf1'
29-
const BLUE = '#3784d7'
30-
const DARK_BLUE = '#1f64ae'
31-
32-
const randomTexts: string[] = [
33-
`Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
34-
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.`,
35-
`Duis aute irure dolor in reprehenderit in voluptate velit esse
36-
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.`,
37-
]
38-
39-
interface ButtonProps extends TouchableOpacityProps {
40-
text: string
41-
}
42-
43-
interface DemoContentProps extends ViewProps {
44-
radius?: number
45-
color?: ColorValue
46-
text?: string
47-
}
5+
import { BasicSheet, FlatListSheet, PromptSheet, ScrollViewSheet } from './sheets'
6+
import { Button } from './components'
7+
import { BLUE } from './utils'
488

499
export default function App() {
50-
const sheet1 = useRef<TrueSheet>(null)
51-
const sheetPrompt = useRef<TrueSheet>(null)
52-
const sheetScrollView = useRef<TrueSheet>(null)
53-
const sheetFlatList = useRef<TrueSheet>(null)
10+
const basicSheet = useRef<TrueSheet>(null)
11+
const promptSheet = useRef<TrueSheet>(null)
12+
const scrollViewSheet = useRef<TrueSheet>(null)
13+
const flatListSheet = useRef<TrueSheet>(null)
5414

55-
const scrollViewRef = useRef<ScrollView>(null)
56-
const flatListRef = useRef<FlatList>(null)
57-
58-
const presentSheet1 = async (index = 0) => {
59-
await sheet1.current?.present(index)
15+
const presentBasicSheet = async (index = 0) => {
16+
await basicSheet.current?.present(index)
6017
console.log('Sheet 1 present async')
6118
}
6219

63-
const resizeSheet1 = async (index: number) => {
64-
await sheet1.current?.resize(index)
65-
console.log(`Sheet 1 resize to ${index} async`)
66-
}
67-
68-
const dismissSheet1 = async () => {
69-
await sheet1.current?.dismiss()
70-
console.log('Sheet 1 dismiss asynced')
71-
}
72-
7320
return (
7421
<View style={$container}>
75-
<Button text="TrueSheet View" onPress={() => presentSheet1(0)} />
76-
<Button text="TrueSheet Prompt" onPress={() => sheetPrompt.current?.present()} />
77-
<Button text="TrueSheet ScrollView" onPress={() => sheetScrollView.current?.present()} />
78-
<Button text="TrueSheet FlatList" onPress={() => sheetFlatList.current?.present()} />
79-
80-
<TrueSheet
81-
sizes={['auto', '80%', 'large']}
82-
ref={sheet1}
83-
contentContainerStyle={$content}
84-
blurTint="dark"
85-
backgroundColor={DARK}
86-
cornerRadius={12}
87-
grabberProps={{ color: GRABBER_COLOR }}
88-
onDismiss={() => console.log('Sheet 1 dismissed!')}
89-
onPresent={({ index, value }) =>
90-
console.log(`Sheet 1 presented with size of ${value} at index: ${index}`)
91-
}
92-
onSizeChange={({ index, value }) => console.log(`Resized to:`, value, 'at index:', index)}
93-
FooterComponent={<Footer />}
94-
>
95-
<DemoContent color={DARK_BLUE} text={random(randomTexts)} />
96-
<Button text="Present Large" onPress={() => resizeSheet1(2)} />
97-
<Button text="Present 80%" onPress={() => resizeSheet1(1)} />
98-
<Button text="Present Auto" onPress={() => resizeSheet1(0)} />
99-
<Button text="Dismis" onPress={dismissSheet1} />
100-
</TrueSheet>
101-
102-
<TrueSheet
103-
ref={sheetPrompt}
104-
sizes={['auto', '80%']}
105-
contentContainerStyle={$content}
106-
blurTint="dark"
107-
backgroundColor={DARK}
108-
cornerRadius={12}
109-
grabberProps={{ color: GRABBER_COLOR }}
110-
onDismiss={() => console.log('Sheet Prompt dismissed!')}
111-
onPresent={({ index, value }) =>
112-
console.log(`Sheet Prompt presented with size of ${value} at index: ${index}`)
113-
}
114-
onSizeChange={({ index, value }) => console.log(`Resized to:`, value, 'at index:', index)}
115-
FooterComponent={<Footer />}
116-
>
117-
<DemoContent color={DARK_BLUE} text={random(randomTexts)} />
118-
<Input />
119-
<Button text="Dismis" onPress={() => sheetPrompt.current?.dismiss()} />
120-
</TrueSheet>
121-
122-
<TrueSheet
123-
ref={sheetScrollView}
124-
scrollRef={scrollViewRef}
125-
onDismiss={() => console.log('Sheet ScrollView dismissed!')}
126-
onPresent={() => console.log(`Sheet ScrollView presented!`)}
127-
FooterComponent={<Footer />}
128-
>
129-
<ScrollView
130-
ref={scrollViewRef}
131-
contentContainerStyle={[$content, $scrollable]}
132-
indicatorStyle="black"
133-
>
134-
{times(25, (i) => (
135-
<DemoContent key={i} />
136-
))}
137-
</ScrollView>
138-
</TrueSheet>
139-
140-
<TrueSheet
141-
ref={sheetFlatList}
142-
scrollRef={flatListRef}
143-
sizes={['large']}
144-
cornerRadius={24}
145-
grabber={false}
146-
maxHeight={600}
147-
onDismiss={() => console.log('Sheet FlatList dismissed!')}
148-
onPresent={() => console.log(`Sheet FlatList presented!`)}
149-
>
150-
<FlatList<number>
151-
ref={flatListRef}
152-
data={times(50, (i) => i)}
153-
contentContainerStyle={$content}
154-
indicatorStyle="black"
155-
renderItem={() => <DemoContent radius={24} />}
156-
/>
157-
</TrueSheet>
158-
</View>
159-
)
160-
}
161-
162-
const Input = () => {
163-
return (
164-
<View style={$inputContainer}>
165-
<TextInput style={$input} placeholder="Enter some text..." placeholderTextColor={GRAY} />
166-
</View>
167-
)
168-
}
169-
170-
const Footer = () => {
171-
return (
172-
<View style={$footer}>
173-
<Text style={$whiteText}>FOOTER</Text>
174-
</View>
175-
)
176-
}
177-
178-
const Button = (props: ButtonProps) => {
179-
const { text, ...rest } = props
180-
return (
181-
<TouchableOpacity activeOpacity={0.6} style={$button} {...rest}>
182-
<Text style={$whiteText}>{text}</Text>
183-
</TouchableOpacity>
184-
)
185-
}
186-
187-
const DemoContent = (props: DemoContentProps) => {
188-
const { text, radius = BORDER_RADIUS, style: $style, color = LIGHT_GRAY, ...rest } = props
189-
return (
190-
<View
191-
style={[$demoContent, { backgroundColor: color, borderRadius: radius }, $style]}
192-
{...rest}
193-
>
194-
{text && <Text style={$demoText}>{text}</Text>}
22+
<Button text="TrueSheet View" onPress={() => presentBasicSheet(0)} />
23+
<Button text="TrueSheet Prompt" onPress={() => promptSheet.current?.present()} />
24+
<Button text="TrueSheet ScrollView" onPress={() => scrollViewSheet.current?.present()} />
25+
<Button text="TrueSheet FlatList" onPress={() => flatListSheet.current?.present()} />
26+
27+
<BasicSheet ref={basicSheet} />
28+
<PromptSheet ref={promptSheet} />
29+
<ScrollViewSheet ref={scrollViewSheet} />
30+
<FlatListSheet ref={flatListSheet} />
19531
</View>
19632
)
19733
}
@@ -202,58 +38,3 @@ const $container: ViewStyle = {
20238
padding: 24,
20339
flex: 1,
20440
}
205-
206-
const $inputContainer: ViewStyle = {
207-
backgroundColor: 'white',
208-
paddingHorizontal: SPACING,
209-
height: INPUT_HEIGHT,
210-
borderRadius: BORDER_RADIUS,
211-
justifyContent: 'center',
212-
marginBottom: SPACING * 2,
213-
}
214-
215-
const $input: TextStyle = {
216-
fontSize: 16,
217-
height: SPACING * 3,
218-
}
219-
220-
const $content: ViewStyle = {
221-
padding: SPACING,
222-
}
223-
224-
const $scrollable: ViewStyle = {
225-
paddingBottom: FOOTER_HEIGHT + SPACING,
226-
}
227-
228-
const $footer: ViewStyle = {
229-
height: FOOTER_HEIGHT,
230-
backgroundColor: DARK_GRAY,
231-
alignItems: 'center',
232-
justifyContent: 'center',
233-
}
234-
235-
const $demoContent: ViewStyle = {
236-
height: 100,
237-
marginBottom: 16,
238-
padding: SPACING / 2,
239-
alignItems: 'center',
240-
}
241-
242-
const $button: ViewStyle = {
243-
height: 40,
244-
padding: 12,
245-
borderRadius: BORDER_RADIUS,
246-
backgroundColor: DARK_BLUE,
247-
marginBottom: 12,
248-
alignItems: 'center',
249-
}
250-
251-
const $whiteText: TextStyle = {
252-
color: 'white',
253-
}
254-
255-
const $demoText: TextStyle = {
256-
fontSize: 16,
257-
lineHeight: 20,
258-
color: 'white',
259-
}

‎example/src/components/Button.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react'
2+
import { Text, TouchableOpacity, type TouchableOpacityProps, type ViewStyle } from 'react-native'
3+
4+
import { $WHITE_TEXT, BORDER_RADIUS, DARK_BLUE } from '../utils'
5+
6+
interface ButtonProps extends TouchableOpacityProps {
7+
text: string
8+
}
9+
10+
export const Button = (props: ButtonProps) => {
11+
const { text, ...rest } = props
12+
return (
13+
<TouchableOpacity activeOpacity={0.6} style={$button} {...rest}>
14+
<Text style={$WHITE_TEXT}>{text}</Text>
15+
</TouchableOpacity>
16+
)
17+
}
18+
19+
const $button: ViewStyle = {
20+
height: 40,
21+
padding: 12,
22+
borderRadius: BORDER_RADIUS,
23+
backgroundColor: DARK_BLUE,
24+
marginBottom: 12,
25+
alignItems: 'center',
26+
}

‎example/src/components/DemoContent.tsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react'
2+
import {
3+
View,
4+
type ColorValue,
5+
type ViewProps,
6+
type TextStyle,
7+
type ViewStyle,
8+
Text,
9+
} from 'react-native'
10+
import { BORDER_RADIUS, LIGHT_GRAY, SPACING } from '../utils'
11+
12+
interface DemoContentProps extends ViewProps {
13+
radius?: number
14+
color?: ColorValue
15+
text?: string
16+
}
17+
18+
export const DemoContent = (props: DemoContentProps) => {
19+
const { text, radius = BORDER_RADIUS, style: $style, color = LIGHT_GRAY, ...rest } = props
20+
return (
21+
<View
22+
style={[$demoContent, { backgroundColor: color, borderRadius: radius }, $style]}
23+
{...rest}
24+
>
25+
{text && <Text style={$demoText}>{text}</Text>}
26+
</View>
27+
)
28+
}
29+
30+
const $demoContent: ViewStyle = {
31+
height: 100,
32+
marginBottom: 16,
33+
padding: SPACING / 2,
34+
alignItems: 'center',
35+
}
36+
37+
const $demoText: TextStyle = {
38+
fontSize: 16,
39+
lineHeight: 20,
40+
color: 'white',
41+
}

‎example/src/components/Footer.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react'
2+
import { Text, View, type ViewStyle } from 'react-native'
3+
4+
import { $WHITE_TEXT, DARK_GRAY, FOOTER_HEIGHT } from '../utils'
5+
6+
export const Footer = () => {
7+
return (
8+
<View style={$footer}>
9+
<Text style={$WHITE_TEXT}>FOOTER</Text>
10+
</View>
11+
)
12+
}
13+
14+
const $footer: ViewStyle = {
15+
height: FOOTER_HEIGHT,
16+
backgroundColor: DARK_GRAY,
17+
alignItems: 'center',
18+
justifyContent: 'center',
19+
}

‎example/src/components/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export * from './Footer'
2+
export * from './DemoContent'
3+
export * from './Button'

0 commit comments

Comments
 (0)