72 lines
2.3 KiB
JavaScript
72 lines
2.3 KiB
JavaScript
|
import {ScrollView, Text, useWindowDimensions, View} from 'react-native';
|
||
|
|
import {SceneMap, TabBar, TabView} from "react-native-tab-view";
|
||
|
|
import {useState} from "react";
|
||
|
|
import ConnectionStore from "../../store/connectionStore";
|
||
|
|
import {useSnapshot} from "valtio";
|
||
|
|
|
||
|
|
const Layout = ({title, children}) => {
|
||
|
|
const {internet} = useSnapshot(ConnectionStore)
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{
|
||
|
|
!internet &&
|
||
|
|
<View style={{backgroundColor: '#E5352D', opacity: .8}}>
|
||
|
|
<Text style={{fontSize: 16, fontWeight: 'bold', paddingLeft: 20, paddingTop: 20, paddingBottom: 20, color: "#fefefe"}}>Нет подключения к сети, данные в офлайн режиме</Text>
|
||
|
|
</View>
|
||
|
|
}
|
||
|
|
|
||
|
|
<Text style={{fontSize: 48, fontWeight: 'bold', paddingLeft: 20, paddingTop: 60}}>{title}</Text>
|
||
|
|
|
||
|
|
{children}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
const renderTabBar = props => (
|
||
|
|
<TabBar
|
||
|
|
{...props}
|
||
|
|
indicatorStyle={{ backgroundColor: '#E5352D' }}
|
||
|
|
style={{ backgroundColor: "transparent" }}
|
||
|
|
renderLabel={
|
||
|
|
({route, focused }) => (
|
||
|
|
<Text style={focused ? {color: "#E5352D", opacity: 1, fontWeight: "bold"} : {color: "#646567", opacity: .4, fontWeight: "bold"}}>{route.title}</Text>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
export const LayoutWithTabs = ({components, primaryIdx}) => {
|
||
|
|
const sceneData = Object.fromEntries(components.map(d => [d.key, d.elem]))
|
||
|
|
const sceneRenderer = SceneMap(
|
||
|
|
sceneData
|
||
|
|
)
|
||
|
|
const layout = useWindowDimensions();
|
||
|
|
|
||
|
|
const [index, setIndex] = useState(primaryIdx || 0);
|
||
|
|
const [routes] = useState(components.map(elem => ({key: elem.key, title: elem.title}
|
||
|
|
))
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Layout title={routes[index].title}>
|
||
|
|
<TabView
|
||
|
|
navigationState={{index, routes}}
|
||
|
|
renderScene={sceneRenderer}
|
||
|
|
onIndexChange={setIndex}
|
||
|
|
initialLayout={{ width: layout.width }}
|
||
|
|
renderTabBar={renderTabBar}>
|
||
|
|
</TabView>
|
||
|
|
</Layout>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export const LayoutScrollView = ({children, title}) => {
|
||
|
|
return (
|
||
|
|
<Layout title={title}>
|
||
|
|
<ScrollView style={{padding: 20}}>
|
||
|
|
{children}
|
||
|
|
</ScrollView>
|
||
|
|
</Layout>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Layout;
|