|
@@ -5,6 +5,7 @@ import {
|
|
|
Text,
|
|
|
UIManager,
|
|
|
View,
|
|
|
+ ScrollView
|
|
|
} from 'react-native';
|
|
|
import React, { useState } from 'react';
|
|
|
import NewscoutLogo from '../components/molecules/NewscoutLogo';
|
|
@@ -13,27 +14,38 @@ import CircularPrimaryBackButton from '../components/organisms/Buttons/CircularP
|
|
|
import { List } from 'react-native-paper';
|
|
|
import colors from '../theme/colors';
|
|
|
import EntypoIcon from 'react-native-vector-icons/Entypo'
|
|
|
-import { ScrollView } from 'react-native-gesture-handler';
|
|
|
+import metrics from '../theme/metrics';
|
|
|
+
|
|
|
|
|
|
const data = [
|
|
|
{
|
|
|
title: 'Sector Update',
|
|
|
+ icon: "area-graph",
|
|
|
subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
|
|
|
},
|
|
|
{
|
|
|
title: 'Regional Update',
|
|
|
+ icon: "network",
|
|
|
subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
|
|
|
},
|
|
|
{
|
|
|
title: 'Finance',
|
|
|
+ icon: "database",
|
|
|
subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
|
|
|
},
|
|
|
{
|
|
|
title: 'Economic',
|
|
|
+ icon: "line-graph",
|
|
|
subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
|
|
|
},
|
|
|
{
|
|
|
title: 'Miscellaneous',
|
|
|
+ icon: "documents",
|
|
|
+ subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'RSS',
|
|
|
+ icon: "rss",
|
|
|
subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
|
|
|
},
|
|
|
];
|
|
@@ -48,17 +60,23 @@ const SidebarPage = ({ navigation }) => {
|
|
|
|
|
|
|
|
|
|
|
|
- const [isExpanded, setExpanded] = useState(
|
|
|
- data.map((item) => {
|
|
|
- return {
|
|
|
- key: item.title,
|
|
|
- value: false
|
|
|
- };
|
|
|
- }).reduce((result, item) => {
|
|
|
- result[item.key] = item.value;
|
|
|
- return result;
|
|
|
- }, {})
|
|
|
- )
|
|
|
+ // const [isExpanded, setExpanded] = useState(
|
|
|
+ // data.map((item) => {
|
|
|
+ // return {
|
|
|
+ // key: item.title,
|
|
|
+ // value: false
|
|
|
+ // };
|
|
|
+ // }).reduce((result, item) => {
|
|
|
+ // result[item.key] = item.value;
|
|
|
+ // return result;
|
|
|
+ // }, {})
|
|
|
+ // )
|
|
|
+
|
|
|
+ const [expandedId, setExpandedId] = React.useState('');
|
|
|
+
|
|
|
+ const handleAccordionPress = (accordionId) => {
|
|
|
+ setExpandedId(accordionId === expandedId ? '' : accordionId);
|
|
|
+ };
|
|
|
|
|
|
return (
|
|
|
<View style={styles.sideBarContainer}>
|
|
@@ -68,39 +86,47 @@ const SidebarPage = ({ navigation }) => {
|
|
|
<View style={styles.buttonContainer}>
|
|
|
<CircularPrimaryBackButton onPress={() => navigation.toggleDrawer()} />
|
|
|
</View>
|
|
|
+
|
|
|
<ScrollView>
|
|
|
<View style={styles.accordionContainer}>
|
|
|
- <List.AccordionGroup>
|
|
|
- {data.map(item => (
|
|
|
- <List.Accordion
|
|
|
- key={data.indexOf(item)}
|
|
|
- id={`${data.indexOf(item)}`}
|
|
|
- style={[styles.accordionStyle]}
|
|
|
- titleStyle={[styles.accordionTextStyle, {}]}
|
|
|
- onPress={() => {
|
|
|
- // setExpandedsetIsShowingText(!isShowingText);
|
|
|
- // LayoutAnimation.configureNext(
|
|
|
- // LayoutAnimation.Presets.easeInEaseOut,
|
|
|
- // )
|
|
|
- // const nextState = { ...isExpanded };
|
|
|
- // nextState[item.title] = !nextState[item.title];
|
|
|
- //console.log("set state changes");
|
|
|
- // setExpanded(nextState);
|
|
|
- }}
|
|
|
- expanded={isExpanded[item.title]}
|
|
|
- left={() => <View style={{ paddingLeft: 16, }}><EntypoIcon name="box" size={24} /></View>}
|
|
|
- right={() => <EntypoIcon name="chevron-down" size={12} />}
|
|
|
- title={item.title}>
|
|
|
- {item.subTitles.map(subTitle => (
|
|
|
- <List.Item
|
|
|
- key={item.subTitles.indexOf(subTitle)}
|
|
|
- style={styles.accordionItemStyle}
|
|
|
- titleStyle={styles.accordionItemTextStyle}
|
|
|
- title={subTitle}
|
|
|
- />
|
|
|
- ))}
|
|
|
- </List.Accordion>
|
|
|
- ))}
|
|
|
+ <List.AccordionGroup
|
|
|
+ expandedId={expandedId}
|
|
|
+ onAccordionPress={handleAccordionPress}
|
|
|
+ >
|
|
|
+ {data.map(item => {
|
|
|
+ let acc_check = item.title.toLowerCase()
|
|
|
+ return (
|
|
|
+ <List.Accordion
|
|
|
+ key={acc_check}
|
|
|
+ id={acc_check}
|
|
|
+ style={[styles.accordionStyle, acc_check === expandedId && { backgroundColor: colors.tertiaryColor, borderColor: colors.tertiaryColor }]}
|
|
|
+ titleStyle={[, styles.accordionTextStyle, acc_check === expandedId && { color: colors.white, fontFamily: fonts.type.semibold, }]}
|
|
|
+ onPress={() => {
|
|
|
+ // setExpandedsetIsShowingText(!isShowingText);
|
|
|
+ // LayoutAnimation.configureNext(
|
|
|
+ // LayoutAnimation.Presets.easeInEaseOut,
|
|
|
+ // )
|
|
|
+ // const nextState = { ...isExpanded };
|
|
|
+ // nextState[item.title] = !nextState[item.title];
|
|
|
+ //console.log("set state changes");
|
|
|
+
|
|
|
+ }}
|
|
|
+ left={() => <View style={{ paddingLeft: 16, }}><EntypoIcon name={item.icon} size={24} color={acc_check === expandedId ? colors.white : colors.black} /></View>}
|
|
|
+ right={() => <EntypoIcon name={acc_check === expandedId ? "chevron-up" : "chevron-down"} size={12} color={acc_check === expandedId ? colors.white : colors.black} />}
|
|
|
+ title={item.title}>
|
|
|
+ {item.subTitles.map((subTitle) => (
|
|
|
+ <List.Item
|
|
|
+ // key={`${item.title}_${subTitle}`}
|
|
|
+ // key={`${item.title}_${item.subTitles.indexOf(subTitle)}`}
|
|
|
+ //key={`Sidebar_${item.title}_${item.subTitles.indexOf(subTitle)}`}
|
|
|
+ style={styles.accordionItemStyle}
|
|
|
+ titleStyle={styles.accordionItemTextStyle}
|
|
|
+ title={subTitle}
|
|
|
+ />
|
|
|
+ ))}
|
|
|
+ </List.Accordion>
|
|
|
+ )
|
|
|
+ })}
|
|
|
</List.AccordionGroup>
|
|
|
</View>
|
|
|
</ScrollView>
|
|
@@ -127,15 +153,14 @@ const styles = StyleSheet.create({
|
|
|
accordionContainer: {
|
|
|
paddingVertical: fonts.getSize(16),
|
|
|
gap: fonts.getSize(8),
|
|
|
+ height:"100%"
|
|
|
},
|
|
|
- accordionItemStyle: {},
|
|
|
- accordionItemTextStyle: {},
|
|
|
accordionStyle: {
|
|
|
backgroundColor: colors.white,
|
|
|
borderRadius: fonts.getSize(8),
|
|
|
borderWidth: fonts.getSize(3),
|
|
|
borderColor: colors.lightGray,
|
|
|
- maxHeight: fonts.getSize(52),
|
|
|
+ maxHeight: fonts.getSize(56),
|
|
|
},
|
|
|
accordionTextStyle: { fontFamily: fonts.type.medium },
|
|
|
});
|