Paul Frazee
83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
import React, {useEffect, useState, useRef} from 'react'
|
|
import {StyleSheet, Text, TextInput, View} from 'react-native'
|
|
import {useSharedValue} from 'react-native-reanimated'
|
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
|
import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows'
|
|
import {Selector} from '../com/util/Selector'
|
|
import {colors} from '../lib/styles'
|
|
import {ScreenParams} from '../routes'
|
|
import {useStores} from '../../state'
|
|
|
|
export const Contacts = ({visible, params}: ScreenParams) => {
|
|
const store = useStores()
|
|
const selectorInterp = useSharedValue(0)
|
|
|
|
useEffect(() => {
|
|
if (visible) {
|
|
store.nav.setTitle(`Contacts`)
|
|
}
|
|
}, [store, visible])
|
|
|
|
const [searchText, onChangeSearchText] = useState('')
|
|
const inputRef = useRef<TextInput | null>(null)
|
|
|
|
return (
|
|
<View>
|
|
<View style={styles.section}>
|
|
<Text style={styles.title}>Contacts</Text>
|
|
</View>
|
|
<View style={styles.section}>
|
|
<View style={styles.searchContainer}>
|
|
<FontAwesomeIcon
|
|
icon="magnifying-glass"
|
|
size={16}
|
|
style={styles.searchIcon}
|
|
/>
|
|
<TextInput
|
|
ref={inputRef}
|
|
value={searchText}
|
|
style={styles.searchInput}
|
|
placeholder="Search"
|
|
onChangeText={onChangeSearchText}
|
|
/>
|
|
</View>
|
|
</View>
|
|
<Selector
|
|
items={['All', 'Following', 'Scenes']}
|
|
selectedIndex={0}
|
|
swipeGestureInterp={selectorInterp}
|
|
/>
|
|
{!!store.me.name && <ProfileFollowsComponent name={store.me.name} />}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
section: {
|
|
backgroundColor: colors.white,
|
|
},
|
|
title: {
|
|
fontSize: 30,
|
|
fontWeight: 'bold',
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 6,
|
|
},
|
|
|
|
searchContainer: {
|
|
flexDirection: 'row',
|
|
backgroundColor: colors.gray1,
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 8,
|
|
marginHorizontal: 10,
|
|
marginBottom: 6,
|
|
borderRadius: 4,
|
|
},
|
|
searchIcon: {
|
|
color: colors.gray5,
|
|
marginRight: 8,
|
|
},
|
|
searchInput: {
|
|
flex: 1,
|
|
},
|
|
})
|