Swiper/App.tsx

80 lines
2.1 KiB
TypeScript
Raw Normal View History

2022-12-18 18:32:44 +13:00
import {useState} from 'react'
import {Button, Dimensions, Pressable, Text, View} from 'react-native'
import DocumentPicker, {
DocumentPickerResponse,
types,
2022-12-18 18:32:44 +13:00
} from 'react-native-document-picker'
import {backgroundColor} from './constants'
2022-12-18 23:15:36 +13:00
import Item from './Item'
2022-12-18 20:01:00 +13:00
const buttonWidth = '45%'
export default function App() {
2022-12-18 18:32:44 +13:00
const [files, setFiles] = useState<DocumentPickerResponse[]>([])
const [selected, setSelected] = useState(0)
const [paused, setPaused] = useState(false)
const pick = async () => {
2022-12-18 23:15:36 +13:00
const picked = await DocumentPicker.pickMultiple({
type: [types.video, types.images],
})
setSelected(0)
2022-12-18 18:32:44 +13:00
console.log(`Picked ${picked.length} files.`)
setFiles(picked)
}
const prev = () => {
if (selected <= 0) return
setSelected(selected - 1)
setPaused(false)
}
const next = () => {
if (selected >= files.length - 1) return
setSelected(selected + 1)
setPaused(false)
2022-12-18 18:32:44 +13:00
}
return (
2022-12-18 18:32:44 +13:00
<View
style={{
backgroundColor,
2022-12-18 20:01:00 +13:00
justifyContent: 'center',
alignItems: 'center',
2022-12-18 18:32:44 +13:00
flex: 1,
flexGrow: 1,
padding: 10,
}}>
{files.length > 0 ? (
2022-12-18 23:15:36 +13:00
<>
<Item
paused={paused}
setPaused={setPaused}
onLongPress={pick}
selected={selected}
files={files}
/>
2022-12-18 20:01:00 +13:00
<View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
<View style={{width: buttonWidth, marginRight: 10}}>
<Button title="Prev" disabled={selected <= 0} onPress={prev} />
</View>
<View style={{width: buttonWidth}}>
<Button
title="Next"
disabled={selected >= files.length - 1}
onPress={next}
/>
</View>
</View>
2022-12-18 23:15:36 +13:00
</>
) : (
2022-12-18 23:15:36 +13:00
<Pressable
onPress={pick}
style={{height: '100%', justifyContent: 'center'}}>
2022-12-18 22:25:18 +13:00
<Text style={{color: 'white', fontSize: 24}}>Select video(s)...</Text>
</Pressable>
2022-12-18 20:01:00 +13:00
)}
</View>
2022-12-18 18:32:44 +13:00
)
}