provide local values to list header

2025-12-23 23:19:40 +01:00 · 2020-12-08 12:25:54 +05:00
parent 03549779f6
commit 1a79552e38
12 changed files with 52 additions and 40 deletions
--- a/apps/mobile/src/components/SimpleList/ListHeaderComponent.js
+++ b/apps/mobile/src/components/SimpleList/ListHeaderComponent.js
@@ -13,7 +13,6 @@ import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
 import {MessageCard} from './MessageCard';

-const opacity = new Animated.Value(1);
 export const ListHeaderComponent = ({
  type,
  messageCard = true,
@@ -24,9 +23,8 @@ export const ListHeaderComponent = ({
  shouldShow = false,
 }) => {
  const [state] = useTracked();
-  const {colors, headerTextState, currentScreen} = state;
+  const {colors} = state;

-  console.log(headerTextState)
  return type === 'search' ? null : DDS.isLargeTablet() && !shouldShow ? (
    <View
      style={{
@@ -46,11 +44,11 @@ export const ListHeaderComponent = ({
        marginBottom: 5,
        padding: 12,
        width: '100%',
-        backgroundColor:  COLORS_NOTE[headerTextState.heading.toLowerCase()]
-          ? hexToRGBA(COLORS_NOTE[headerTextState.heading.toLowerCase()], 0.15)
+        backgroundColor: COLORS_NOTE[title.toLowerCase()]
+          ? hexToRGBA(COLORS_NOTE[title.toLowerCase()], 0.15)
          : color || colors.shade,
      }}>
-      {messageCard && <MessageCard />}
+      {messageCard && <MessageCard color={COLORS_NOTE[title.toLowerCase()] || colors.accent} />}

      <View
        style={{
@@ -62,7 +60,7 @@ export const ListHeaderComponent = ({
          position: 'absolute',
        }}>
        <Placeholder
-          color={COLORS_NOTE[headerTextState.heading.toLowerCase()]}
+          color={COLORS_NOTE[title.toLowerCase()] || colors.accent}
          w={normalize(150)}
          h={normalize(150)}
          type={type}
@@ -77,17 +75,12 @@ export const ListHeaderComponent = ({
        }}>
        <Heading
          style={{marginBottom: paragraph ? -10 : 0}}
-          size={SIZE.xxxl * 1.5}
-          color={headerTextState.color}>
+          size={SIZE.xxxl * 1.5}>
          <Heading size={SIZE.xxxl * 1.5} color={colors.accent}>
-            {headerTextState.heading.slice(0, 1) === '#' ? '#' : null}
+            {title.slice(0, 1) === '#' ? '#' : null}
          </Heading>

-          {title
-            ? title
-            : headerTextState.heading.slice(0, 1) === '#'
-            ? headerTextState.heading.slice(1)
-            : headerTextState.heading}
+          {title.slice(0, 1) === '#' ? title.slice(1) : title}
        </Heading>
        {paragraph && (
          <Paragraph color={colors.icon}>
--- a/apps/mobile/src/components/SimpleList/MessageCard.js
+++ b/apps/mobile/src/components/SimpleList/MessageCard.js
@@ -8,9 +8,9 @@ import {COLORS_NOTE} from '../../utils/Colors';
 import {SIZE} from '../../utils/SizeUtils';
 import Paragraph from '../Typography/Paragraph';

-export const MessageCard = ({data}) => {
+export const MessageCard = ({data,color}) => {
  const [state] = useTracked();
-  const {colors, selectionMode, currentScreen, messageBoardState,headerTextState} = state;
+  const {colors, selectionMode,  messageBoardState,headerTextState} = state;

  return (
    <View>
@@ -33,11 +33,7 @@ export const MessageCard = ({data}) => {
              alignItems: 'center',
            }}>
            <Paragraph
-              color={
-                COLORS_NOTE[headerTextState.heading.toLowerCase()]
-                  ? COLORS_NOTE[headerTextState.heading.toLowerCase()]
-                  : colors.accent
-              }
+              color={color}
              style={{
                marginRight: 10,
              }}>
@@ -47,11 +43,7 @@ export const MessageCard = ({data}) => {
            <Icon
              name="arrow-right"
              size={SIZE.sm}
-              color={
-                COLORS_NOTE[headerTextState.heading.toLowerCase()]
-                  ? COLORS_NOTE[headerTextState.heading.toLowerCase()]
-                  : colors.accent
-              }
+              color={color}
            />
          </View>
        </TouchableOpacity>
--- a/apps/mobile/src/components/SimpleList/index.js
+++ b/apps/mobile/src/components/SimpleList/index.js
@@ -47,6 +47,9 @@ const SimpleList = ({
  jumpToDialog,
  placeholderData,
  loading,
+  headerProps={
+    heading:"Home"
+  }
 }) => {
  const [state, dispatch] = useTracked();
  const {colors, searchResults,headerTextState} = state;
@@ -267,7 +270,7 @@ const SimpleList = ({
        );
      case 'MAIN_HEADER':
        return (
-          <ListHeaderComponent type={dataType} index={index} data={listData} />
+          <ListHeaderComponent title={headerProps.heading} type={dataType} index={index} data={listData} />
        );
      case 'header':
        return <RenderSectionHeader item={data} index={index} />;
--- a/apps/mobile/src/navigation/Drawer.js
+++ b/apps/mobile/src/navigation/Drawer.js
@@ -1,6 +1,7 @@
 import {createDrawerNavigator} from '@react-navigation/drawer';
 import {NavigationContainer} from '@react-navigation/native';
 import * as React from 'react';
+import {Platform} from 'react-native';
 import {State} from 'react-native-gesture-handler';
 import {Menu} from '../components/Menu';
 import {useTracked} from '../provider';
@@ -27,11 +28,11 @@ export const NavigationStack = ({component = NavigatorStack}) => {
  }, []);

  const setGestureDisabled = () => {
-    //setLocked(true);
+    setLocked(true);
  };

  const setGestureEnabled = () => {
-    //setLocked(false);
+    setLocked(false);
  };

  React.useEffect(() => {
@@ -44,14 +45,15 @@ export const NavigationStack = ({component = NavigatorStack}) => {
  }, []);

  const onStateChange = (state) => {
-      let s = state[0];
-      if (s && s !== State.ACTIVE && s !== State.BEGAN) {
-        let state = sideMenuRef.current.getRootState();
-        if (state.history.findIndex((o) => o.type === 'drawer') === -1) {
-          tabBarRef.current?.setScrollEnabled(true);
-        }
+    if (Platform.OS === 'android') return;
+    let s = state[0];
+    if (s && s !== State.ACTIVE && s !== State.BEGAN) {
+      let state = sideMenuRef.current.getRootState();
+      if (state.history.findIndex((o) => o.type === 'drawer') === -1) {
+        tabBarRef.current?.setScrollEnabled(true);
      }
-  }
+    }
+  };

  return (
    <NavigationContainer ref={sideMenuRef}>
--- a/apps/mobile/src/views/Favorites/index.js
+++ b/apps/mobile/src/views/Favorites/index.js
@@ -75,6 +75,9 @@ export const Favorites = ({route, navigation}) => {
        paragraph: 'You have not added any notes to favorites yet.',
        button: null,
      }}
+      headerProps={{
+        heading: "Favorites",
+      }}
      focused={() => navigation.isFocused()}
      placeholder={<Placeholder type="favorites" />}
      placeholderText="Notes you favorite appear here"
--- a/apps/mobile/src/views/Folders/index.js
+++ b/apps/mobile/src/views/Folders/index.js
@@ -82,6 +82,9 @@ export const Folders = ({route, navigation}) => {
          button: 'Add a Notebook',
          action: _onPressBottomButton,
        }}
+        headerProps={{
+          heading: "Notebooks",
+        }}
        placeholder={<Placeholder type="notebooks" />}
      />

--- a/apps/mobile/src/views/Home/index.js
+++ b/apps/mobile/src/views/Home/index.js
@@ -93,6 +93,9 @@ export const Home = ({route, navigation}) => {
        pinned={true}
        loading={loading}
        sortMenuButton={true}
+        headerProps={{
+          heading: "Home",
+        }}
        placeholderText={`Notes you write appear here`}
        jumpToDialog={true}
        placeholderData={{
--- a/apps/mobile/src/views/Notebook/index.js
+++ b/apps/mobile/src/views/Notebook/index.js
@@ -84,6 +84,9 @@ export const Notebook = ({route, navigation}) => {
        refreshCallback={() => {
          onLoad();
        }}
+        headerProps={{
+          heading: params.title,
+        }}
        focused={() => navigation.isFocused()}
        placeholderData={{
          heading: route.params.notebook.title,
--- a/apps/mobile/src/views/Notes/index.js
+++ b/apps/mobile/src/views/Notes/index.js
@@ -178,7 +178,11 @@ export const Notes = ({route, navigation}) => {
        refreshCallback={() => {
          init();
        }}
-        
+        headerProps={{
+          heading: params.type === 'tag'
+          ? '#' + params.title
+          : params.title.slice(0, 1).toUpperCase() + params.title.slice(1),
+        }}
        focused={() => navigation.isFocused()}
        RenderItem={NoteItemWrapper}
        placeholderText={`Add some notes to this" ${
--- a/apps/mobile/src/views/Settings/index.js
+++ b/apps/mobile/src/views/Settings/index.js
@@ -150,7 +150,7 @@ export const Settings = ({navigation}) => {
          paddingHorizontal: 0,
        }}>
        {!DDS.isLargeTablet() && (
-          <ListHeaderComponent type="settings" messageCard={false} />
+          <ListHeaderComponent title="Settings" type="settings" messageCard={false} />
        )}

        <SettingsUserSection />
--- a/apps/mobile/src/views/Tags/index.js
+++ b/apps/mobile/src/views/Tags/index.js
@@ -68,6 +68,9 @@ export const Tags = ({route, navigation}) => {
    <SimpleList
      data={tags}
      type="tags"
+      headerProps={{
+        heading: "Tags",
+      }}
      focused={() => navigation.isFocused()}
      placeholderData={{
        heading: 'Your Tags',
--- a/apps/mobile/src/views/Trash/index.js
+++ b/apps/mobile/src/views/Trash/index.js
@@ -82,6 +82,9 @@ export const Trash = ({route, navigation}) => {
            'Items in the trash will be permanently deleted after 7 days.',
          button: null,
        }}
+        headerProps={{
+          heading: 'Trash',
+        }}
        placeholder={<Placeholder type="trash" />}
        placeholderText="Deleted notes & notebooks appear here."
      />