96 lines
3.3 KiB
TypeScript
96 lines
3.3 KiB
TypeScript
import SegmentedControl from '@react-native-community/segmented-control'
|
|
import { ApplicationContext } from '@Root/ApplicationContext'
|
|
import { HistoryStackNavigationProp } from '@Root/HistoryStack'
|
|
import { SCREEN_NOTE_HISTORY, SCREEN_NOTE_HISTORY_PREVIEW } from '@Root/Screens/screens'
|
|
import { NoteHistoryEntry, SNNote } from '@standardnotes/snjs'
|
|
import { ThemeServiceContext } from '@Style/ThemeService'
|
|
import React, { useContext, useState } from 'react'
|
|
import { Dimensions, Platform } from 'react-native'
|
|
import { NavigationState, Route, SceneRendererProps, TabBar, TabView } from 'react-native-tab-view'
|
|
import { ThemeContext } from 'styled-components'
|
|
import { IosTabBarContainer } from './NoteHistory.styled'
|
|
import { RemoteHistory } from './RemoteHistory'
|
|
import { SessionHistory } from './SessionHistory'
|
|
|
|
const initialLayout = { width: Dimensions.get('window').width }
|
|
|
|
type Props = HistoryStackNavigationProp<typeof SCREEN_NOTE_HISTORY>
|
|
export const NoteHistory = (props: Props) => {
|
|
// Context
|
|
const application = useContext(ApplicationContext)
|
|
const theme = useContext(ThemeContext)
|
|
const themeService = useContext(ThemeServiceContext)
|
|
|
|
// State
|
|
const [note] = useState<SNNote>(() => application?.items.findItem(props.route.params.noteUuid) as SNNote)
|
|
const [routes] = React.useState([
|
|
{ key: 'session', title: 'Session' },
|
|
{ key: 'remote', title: 'Remote' },
|
|
])
|
|
const [index, setIndex] = useState(0)
|
|
|
|
const openPreview = (_uuid: string, revision: NoteHistoryEntry, title: string) => {
|
|
props.navigation.navigate(SCREEN_NOTE_HISTORY_PREVIEW, {
|
|
title,
|
|
revision,
|
|
originalNoteUuid: note.uuid,
|
|
})
|
|
}
|
|
|
|
const renderScene = ({ route }: { route: { key: string; title: string } }) => {
|
|
switch (route.key) {
|
|
case 'session':
|
|
return <SessionHistory onPress={openPreview} note={note} />
|
|
case 'remote':
|
|
return <RemoteHistory onPress={openPreview} note={note} />
|
|
default:
|
|
return null
|
|
}
|
|
}
|
|
|
|
const renderTabBar = (
|
|
tabBarProps: SceneRendererProps & {
|
|
navigationState: NavigationState<Route>
|
|
},
|
|
) => {
|
|
return Platform.OS === 'ios' && parseInt(Platform.Version as string, 10) >= 13 ? (
|
|
<IosTabBarContainer>
|
|
<SegmentedControl
|
|
backgroundColor={theme.stylekitContrastBackgroundColor}
|
|
appearance={themeService?.keyboardColorForActiveTheme()}
|
|
fontStyle={{
|
|
color: theme.stylekitForegroundColor,
|
|
}}
|
|
values={routes.map(route => route.title)}
|
|
selectedIndex={tabBarProps.navigationState.index}
|
|
onChange={event => {
|
|
setIndex(event.nativeEvent.selectedSegmentIndex)
|
|
}}
|
|
/>
|
|
</IosTabBarContainer>
|
|
) : (
|
|
<TabBar
|
|
{...tabBarProps}
|
|
indicatorStyle={{ backgroundColor: theme.stylekitInfoColor }}
|
|
inactiveColor={theme.stylekitBorderColor}
|
|
activeColor={theme.stylekitInfoColor}
|
|
style={{
|
|
backgroundColor: theme.stylekitBackgroundColor,
|
|
shadowColor: theme.stylekitShadowColor,
|
|
}}
|
|
labelStyle={{ color: theme.stylekitInfoColor }}
|
|
/>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<TabView
|
|
renderTabBar={renderTabBar}
|
|
navigationState={{ index, routes }}
|
|
renderScene={renderScene}
|
|
onIndexChange={setIndex}
|
|
initialLayout={initialLayout}
|
|
/>
|
|
)
|
|
}
|