@planningcenter/chat-react-native 4.4.1-qa-staging.26 → 4.4.1-qa-staging.28

package/build/screens/conversations/components/filter_dropdown_list_header_component.js

@@ -3,7 +3,7 @@ import { useNavigation, useRoute } from '@react-navigation/native';
 import React, { useCallback, useMemo, useState } from 'react';
 import { Alert, StyleSheet, View } from 'react-native';
 import { FilterDropdown, TextButton } from '../../../components';
-import { useCanBrowseArchivedConversations, useCanCreateConversations, useCurrentPersonCache, useDirectMessagesEligible, useFontScale, useHasDirectMessages, useNewConversationEntry, useTheme } from '../../../hooks';
+import { useCanBrowseArchivedConversations, useCanCreateConversations, useCurrentPersonCache, useDirectMessagesEligible, useHasDirectMessages, useNewConversationEntry, useTheme } from '../../../hooks';
 import { useApiGet } from '../../../hooks/use_api';
 import { useMarkAllRead } from '../../../hooks/use_conversations_actions';
 import { useCanDisplayGroups } from '../../../hooks/use_groups';
@@ -15,7 +15,6 @@ import { ListHeaderActionButton } from './list_header_action_button';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ROW_PADDING_HORIZONTAL = 16;
 const HEADING_ROW_GAP = 12;
-const DEFAULT_FONT_SCALE = 1;
 const ALL_CONVERSATIONS_LABEL = 'All conversations';
 const ARCHIVED_LABEL = 'Archived';
 var FilterTypes = /*#__PURE__*/function (FilterTypes) {
@@ -23,6 +22,7 @@ var FilterTypes = /*#__PURE__*/function (FilterTypes) {
   FilterTypes["Groups"] = "Groups";
   FilterTypes["Teams"] = "Teams";
   FilterTypes["DMs"] = "DMs";
+  FilterTypes["Unread"] = "Unread";
   FilterTypes["More"] = "More";
   return FilterTypes;
 }(FilterTypes || {});
@@ -36,10 +36,13 @@ const FILTER_PARAMS = {
   },
   [FilterTypes.DMs]: {
     show_direct_messages: true
+  },
+  [FilterTypes.Unread]: {
+    show_unread: true
   }
 };
 export const FilterDropdownListHeaderComponent = () => {
-  const $ = _c(94);
+  const $ = _c(93);
   const navigation = useNavigation();
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -82,7 +85,8 @@ export const FilterDropdownListHeaderComponent = () => {
     chat_group_graph_id,
     group_source_app_name: t3,
     show_direct_messages,
-    show_archived
+    show_archived,
+    show_unread
   } = t2;
   const group_source_app_name = t3 === undefined ? "" : t3;
   const currentPersonCache = useCurrentPersonCache();
@@ -148,6 +152,11 @@ export const FilterDropdownListHeaderComponent = () => {
           if (show_direct_messages) {
             t9 = FilterTypes.DMs;
             break bb0;
+          } else {
+            if (show_unread) {
+              t9 = FilterTypes.Unread;
+              break bb0;
+            }
           }
         }
       }
@@ -199,19 +208,29 @@ export const FilterDropdownListHeaderComponent = () => {
     t13 = $[15];
   }
   let t14;
-  if ($[16] !== t11 || $[17] !== t12 || $[18] !== t13) {
-    t14 = [t10, ...t11, ...t12, ...t13];
-    $[16] = t11;
-    $[17] = t12;
-    $[18] = t13;
-    $[19] = t14;
+  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = {
+      id: FilterTypes.Unread,
+      label: FilterTypes.Unread
+    };
+    $[16] = t14;
   } else {
-    t14 = $[19];
+    t14 = $[16];
   }
-  const options = t14;
   let t15;
-  if ($[20] !== active || $[21] !== chat_group_graph_id || $[22] !== group?.name || $[23] !== show_archived || $[24] !== title) {
-    t15 = () => {
+  if ($[17] !== t11 || $[18] !== t12 || $[19] !== t13) {
+    t15 = [t10, ...t11, ...t12, ...t13, t14];
+    $[17] = t11;
+    $[18] = t12;
+    $[19] = t13;
+    $[20] = t15;
+  } else {
+    t15 = $[20];
+  }
+  const options = t15;
+  let t16;
+  if ($[21] !== active || $[22] !== chat_group_graph_id || $[23] !== group?.name || $[24] !== show_archived || $[25] !== title) {
+    t16 = () => {
       if (chat_group_graph_id) {
         return group?.name || title || ALL_CONVERSATIONS_LABEL;
       }
@@ -223,28 +242,28 @@ export const FilterDropdownListHeaderComponent = () => {
       }
       return active;
     };
-    $[20] = active;
-    $[21] = chat_group_graph_id;
-    $[22] = group?.name;
-    $[23] = show_archived;
-    $[24] = title;
-    $[25] = t15;
+    $[21] = active;
+    $[22] = chat_group_graph_id;
+    $[23] = group?.name;
+    $[24] = show_archived;
+    $[25] = title;
+    $[26] = t16;
   } else {
-    t15 = $[25];
+    t16 = $[26];
   }
   group?.name;
-  let t16;
-  if ($[26] !== t15) {
-    t16 = t15();
-    $[26] = t15;
+  let t17;
+  if ($[27] !== t16) {
+    t17 = t16();
     $[27] = t16;
+    $[28] = t17;
   } else {
-    t16 = $[27];
+    t17 = $[28];
   }
-  const triggerLabel = t16;
-  let t17;
-  if ($[28] !== entryMode || $[29] !== navigation || $[30] !== newConversationFromFilter || $[31] !== route.params) {
-    t17 = () => {
+  const triggerLabel = t17;
+  let t18;
+  if ($[29] !== entryMode || $[30] !== navigation || $[31] !== newConversationFromFilter || $[32] !== route.params) {
+    t18 = () => {
       if (newConversationFromFilter || entryMode === "select_type") {
         return navigation.navigate("ConversationSelectType", {
           ...route.params,
@@ -276,108 +295,111 @@ export const FilterDropdownListHeaderComponent = () => {
         });
       }
     };
-    $[28] = entryMode;
-    $[29] = navigation;
-    $[30] = newConversationFromFilter;
-    $[31] = route.params;
-    $[32] = t17;
+    $[29] = entryMode;
+    $[30] = navigation;
+    $[31] = newConversationFromFilter;
+    $[32] = route.params;
+    $[33] = t18;
   } else {
-    t17 = $[32];
+    t18 = $[33];
   }
-  const handleNewConversationNavigation = t17;
-  let t18;
-  if ($[33] !== navigation) {
-    t18 = params => {
+  const handleNewConversationNavigation = t18;
+  let t19;
+  if ($[34] !== navigation) {
+    t19 = params => {
       navigation.setParams({
         title: undefined,
         chat_group_graph_id: undefined,
         group_source_app_name: undefined,
         show_direct_messages: undefined,
         show_archived: undefined,
+        show_unread: undefined,
         ...params
       });
     };
-    $[33] = navigation;
-    $[34] = t18;
+    $[34] = navigation;
+    $[35] = t19;
   } else {
-    t18 = $[34];
+    t19 = $[35];
   }
-  const handleSetFilter = t18;
-  let t19;
-  if ($[35] !== handleSetFilter) {
-    t19 = id => {
+  const handleSetFilter = t19;
+  let t20;
+  if ($[36] !== handleSetFilter) {
+    t20 = id => {
       const params_0 = FILTER_PARAMS[id];
       if (params_0) {
         handleSetFilter(params_0);
       }
     };
-    $[35] = handleSetFilter;
-    $[36] = t19;
+    $[36] = handleSetFilter;
+    $[37] = t20;
   } else {
-    t19 = $[36];
+    t20 = $[37];
   }
-  const handleSelectFilter = t19;
-  let t20;
-  if ($[37] !== navigation) {
-    t20 = () => {
+  const handleSelectFilter = t20;
+  let t21;
+  if ($[38] !== navigation) {
+    t21 = () => {
       navigation.navigate("Search");
     };
-    $[37] = navigation;
-    $[38] = t20;
+    $[38] = navigation;
+    $[39] = t21;
   } else {
-    t20 = $[38];
+    t21 = $[39];
   }
-  const handleSearch = t20;
-  let t21;
-  if ($[39] !== navigation) {
-    t21 = () => {
+  const handleSearch = t21;
+  let t22;
+  if ($[40] !== navigation) {
+    t22 = () => {
       navigation.navigate("ChatSettings", {});
     };
-    $[39] = navigation;
-    $[40] = t21;
+    $[40] = navigation;
+    $[41] = t22;
   } else {
-    t21 = $[40];
+    t22 = $[41];
   }
-  const handleChatSettings = t21;
-  let t22;
-  if ($[41] !== chat_group_graph_id || $[42] !== group_source_app_name || $[43] !== navigation || $[44] !== show_archived || $[45] !== show_direct_messages) {
-    t22 = () => {
+  const handleChatSettings = t22;
+  let t23;
+  if ($[42] !== chat_group_graph_id || $[43] !== group_source_app_name || $[44] !== navigation || $[45] !== show_archived || $[46] !== show_direct_messages || $[47] !== show_unread) {
+    t23 = () => {
       navigation.navigate("ConversationFilters", {
         chat_group_graph_id,
         group_source_app_name,
         show_direct_messages,
-        show_archived
+        show_archived,
+        show_unread
       });
     };
-    $[41] = chat_group_graph_id;
-    $[42] = group_source_app_name;
-    $[43] = navigation;
-    $[44] = show_archived;
-    $[45] = show_direct_messages;
-    $[46] = t22;
+    $[42] = chat_group_graph_id;
+    $[43] = group_source_app_name;
+    $[44] = navigation;
+    $[45] = show_archived;
+    $[46] = show_direct_messages;
+    $[47] = show_unread;
+    $[48] = t23;
   } else {
-    t22 = $[46];
+    t23 = $[48];
   }
-  const handleOpenConversationFilters = t22;
-  let t23;
-  if ($[47] !== currentPersonCache || $[48] !== markAllRead) {
-    t23 = () => {
+  const handleOpenConversationFilters = t23;
+  let t24;
+  if ($[49] !== currentPersonCache || $[50] !== markAllRead) {
+    t24 = () => {
       currentPersonCache.update({
         unreadCount: 0
       });
       Haptic.notificationSuccess();
       markAllRead();
     };
-    $[47] = currentPersonCache;
-    $[48] = markAllRead;
-    $[49] = t23;
+    $[49] = currentPersonCache;
+    $[50] = markAllRead;
+    $[51] = t24;
   } else {
-    t23 = $[49];
+    t24 = $[51];
   }
-  const handleMarkAllRead = t23;
-  let t24;
-  if ($[50] !== active || $[51] !== handleMarkAllRead) {
-    t24 = () => {
+  const handleMarkAllRead = t24;
+  let t25;
+  if ($[52] !== active || $[53] !== handleMarkAllRead) {
+    t25 = () => {
       if (active === FilterTypes.All) {
         return handleMarkAllRead();
       }
@@ -388,28 +410,16 @@ export const FilterDropdownListHeaderComponent = () => {
         onPress: () => handleMarkAllRead()
       }]);
     };
-    $[50] = active;
-    $[51] = handleMarkAllRead;
-    $[52] = t24;
-  } else {
-    t24 = $[52];
-  }
-  const alertMarkAllRead = t24;
-  const showMoreFilters = canFilterByGroups || canFilterByTeams || canBrowseArchived;
-  const stacked = useFontScale() > DEFAULT_FONT_SCALE;
-  let t25;
-  if ($[53] !== stacked) {
-    t25 = {
-      stacked
-    };
-    $[53] = stacked;
+    $[52] = active;
+    $[53] = handleMarkAllRead;
     $[54] = t25;
   } else {
     t25 = $[54];
   }
-  const styles = useStyles(t25);
+  const alertMarkAllRead = t25;
+  const showMoreFilters = canFilterByGroups || canFilterByTeams || canBrowseArchived;
+  const styles = useStyles();
   const [rowWidth, setRowWidth] = useState();
-  const [actionsWidth, setActionsWidth] = useState();
   let t26;
   if ($[55] === Symbol.for("react.memo_cache_sentinel")) {
     t26 = event => {
@@ -420,20 +430,10 @@ export const FilterDropdownListHeaderComponent = () => {
     t26 = $[55];
   }
   const handleRowLayout = t26;
+  const triggerMaxWidth = rowWidth !== undefined ? rowWidth - ROW_PADDING_HORIZONTAL * 2 : undefined;
   let t27;
-  if ($[56] === Symbol.for("react.memo_cache_sentinel")) {
-    t27 = event_0 => {
-      setActionsWidth(event_0.nativeEvent.layout.width);
-    };
-    $[56] = t27;
-  } else {
-    t27 = $[56];
-  }
-  const handleActionsLayout = t27;
-  const triggerMaxWidth = !stacked && rowWidth !== undefined && actionsWidth !== undefined ? rowWidth - ROW_PADDING_HORIZONTAL * 2 - actionsWidth - HEADING_ROW_GAP : undefined;
-  let t28;
-  if ($[57] !== active || $[58] !== handleOpenConversationFilters || $[59] !== handleSelectFilter || $[60] !== options || $[61] !== showMoreFilters || $[62] !== triggerLabel || $[63] !== triggerMaxWidth) {
-    t28 = /*#__PURE__*/_jsx(FilterDropdown, {
+  if ($[56] !== active || $[57] !== handleOpenConversationFilters || $[58] !== handleSelectFilter || $[59] !== options || $[60] !== showMoreFilters || $[61] !== triggerLabel || $[62] !== triggerMaxWidth) {
+    t27 = /*#__PURE__*/_jsx(FilterDropdown, {
       options: options,
       selectedId: active,
       onSelect: handleSelectFilter,
@@ -442,107 +442,105 @@ export const FilterDropdownListHeaderComponent = () => {
       triggerLabel: triggerLabel,
       maxWidth: triggerMaxWidth
     });
-    $[57] = active;
-    $[58] = handleOpenConversationFilters;
-    $[59] = handleSelectFilter;
-    $[60] = options;
-    $[61] = showMoreFilters;
-    $[62] = triggerLabel;
-    $[63] = triggerMaxWidth;
-    $[64] = t28;
+    $[56] = active;
+    $[57] = handleOpenConversationFilters;
+    $[58] = handleSelectFilter;
+    $[59] = options;
+    $[60] = showMoreFilters;
+    $[61] = triggerLabel;
+    $[62] = triggerMaxWidth;
+    $[63] = t27;
   } else {
-    t28 = $[64];
+    t27 = $[63];
   }
-  let t29;
-  if ($[65] !== styles.titleContainer || $[66] !== t28) {
-    t29 = /*#__PURE__*/_jsx(View, {
+  let t28;
+  if ($[64] !== styles.titleContainer || $[65] !== t27) {
+    t28 = /*#__PURE__*/_jsx(View, {
       style: styles.titleContainer,
-      children: t28
+      children: t27
     });
-    $[65] = styles.titleContainer;
+    $[64] = styles.titleContainer;
+    $[65] = t27;
     $[66] = t28;
-    $[67] = t29;
   } else {
-    t29 = $[67];
+    t28 = $[66];
   }
-  let t30;
-  if ($[68] !== handleChatSettings) {
-    t30 = /*#__PURE__*/_jsx(ListHeaderActionButton, {
+  let t29;
+  if ($[67] !== handleChatSettings) {
+    t29 = /*#__PURE__*/_jsx(ListHeaderActionButton, {
       name: "general.cog",
       onPress: handleChatSettings,
       accessibilityLabel: "Chat settings",
       testID: "conversations-chat-settings-button",
       maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER_LANDMARK
     });
-    $[68] = handleChatSettings;
-    $[69] = t30;
+    $[67] = handleChatSettings;
+    $[68] = t29;
   } else {
-    t30 = $[69];
+    t29 = $[68];
   }
-  let t31;
-  if ($[70] !== canCreateConversations || $[71] !== handleNewConversationNavigation) {
-    t31 = canCreateConversations && /*#__PURE__*/_jsx(ListHeaderActionButton, {
+  let t30;
+  if ($[69] !== canCreateConversations || $[70] !== handleNewConversationNavigation) {
+    t30 = canCreateConversations && /*#__PURE__*/_jsx(ListHeaderActionButton, {
       name: "churchCenter.signups",
       onPress: handleNewConversationNavigation,
       accessibilityLabel: "New conversation",
       testID: "conversations-new-conversation-button",
       maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER_LANDMARK
     });
-    $[70] = canCreateConversations;
-    $[71] = handleNewConversationNavigation;
-    $[72] = t31;
+    $[69] = canCreateConversations;
+    $[70] = handleNewConversationNavigation;
+    $[71] = t30;
   } else {
-    t31 = $[72];
+    t30 = $[71];
   }
-  let t32;
-  if ($[73] !== handleSearch || $[74] !== searchEnabled) {
-    t32 = searchEnabled && /*#__PURE__*/_jsx(ListHeaderActionButton, {
+  let t31;
+  if ($[72] !== handleSearch || $[73] !== searchEnabled) {
+    t31 = searchEnabled && /*#__PURE__*/_jsx(ListHeaderActionButton, {
       name: "general.search",
       onPress: handleSearch,
       accessibilityLabel: "Search",
       testID: "conversations-search-button",
       maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER_LANDMARK
     });
-    $[73] = handleSearch;
-    $[74] = searchEnabled;
-    $[75] = t32;
+    $[72] = handleSearch;
+    $[73] = searchEnabled;
+    $[74] = t31;
   } else {
-    t32 = $[75];
+    t31 = $[74];
   }
-  let t33;
-  if ($[76] !== styles.actionsContainer || $[77] !== t30 || $[78] !== t31 || $[79] !== t32) {
-    t33 = /*#__PURE__*/_jsxs(View, {
+  let t32;
+  if ($[75] !== styles.actionsContainer || $[76] !== t29 || $[77] !== t30 || $[78] !== t31) {
+    t32 = /*#__PURE__*/_jsxs(View, {
       style: styles.actionsContainer,
-      onLayout: handleActionsLayout,
-      testID: "conversations-filter-actions",
-      children: [t30, t31, t32]
+      children: [t29, t30, t31]
     });
-    $[76] = styles.actionsContainer;
+    $[75] = styles.actionsContainer;
+    $[76] = t29;
     $[77] = t30;
     $[78] = t31;
     $[79] = t32;
-    $[80] = t33;
   } else {
-    t33 = $[80];
+    t32 = $[79];
   }
-  let t34;
-  if ($[81] !== styles.headingRow || $[82] !== t29 || $[83] !== t33) {
-    t34 = /*#__PURE__*/_jsxs(View, {
+  let t33;
+  if ($[80] !== styles.headingRow || $[81] !== t28 || $[82] !== t32) {
+    t33 = /*#__PURE__*/_jsxs(View, {
       style: styles.headingRow,
       onLayout: handleRowLayout,
       testID: "conversations-filter-heading-row",
-      children: [t29, t33]
+      children: [t28, t32]
     });
-    $[81] = styles.headingRow;
-    $[82] = t29;
+    $[80] = styles.headingRow;
+    $[81] = t28;
+    $[82] = t32;
     $[83] = t33;
-    $[84] = t34;
   } else {
-    t34 = $[84];
+    t33 = $[83];
   }
-  let t35;
-  if ($[85] !== alertMarkAllRead || $[86] !== isPending || $[87] !== show_archived || $[88] !== styles.markAllReadRow) {
-    t35 = !show_archived && /*#__PURE__*/_jsx(View, {
+  let t34;
+  if ($[84] !== alertMarkAllRead || $[85] !== isPending || $[86] !== show_archived || $[87] !== styles.markAllReadRow) {
+    t34 = !show_archived && /*#__PURE__*/_jsx(View, {
       style: styles.markAllReadRow,
       children: /*#__PURE__*/_jsx(TextButton, {
         onPress: alertMarkAllRead,
@@ -553,38 +551,35 @@ export const FilterDropdownListHeaderComponent = () => {
         children: "Mark all read"
       })
     });
-    $[85] = alertMarkAllRead;
-    $[86] = isPending;
-    $[87] = show_archived;
-    $[88] = styles.markAllReadRow;
-    $[89] = t35;
+    $[84] = alertMarkAllRead;
+    $[85] = isPending;
+    $[86] = show_archived;
+    $[87] = styles.markAllReadRow;
+    $[88] = t34;
   } else {
-    t35 = $[89];
+    t34 = $[88];
   }
-  let t36;
-  if ($[90] !== styles.listHeader || $[91] !== t34 || $[92] !== t35) {
-    t36 = /*#__PURE__*/_jsxs(View, {
+  let t35;
+  if ($[89] !== styles.listHeader || $[90] !== t33 || $[91] !== t34) {
+    t35 = /*#__PURE__*/_jsxs(View, {
       style: styles.listHeader,
-      children: [t34, t35]
+      children: [t33, t34]
     });
-    $[90] = styles.listHeader;
+    $[89] = styles.listHeader;
+    $[90] = t33;
     $[91] = t34;
     $[92] = t35;
-    $[93] = t36;
   } else {
-    t36 = $[93];
+    t35 = $[92];
   }
-  return t36;
+  return t35;
 };
-const useStyles = t0 => {
-  const $ = _c(3);
-  const {
-    stacked
-  } = t0;
+const useStyles = () => {
+  const $ = _c(2);
   const theme = useTheme();
-  let t1;
-  if ($[0] !== stacked || $[1] !== theme.colors.fillColorNeutral050Base) {
-    t1 = StyleSheet.create({
+  let t0;
+  if ($[0] !== theme.colors.fillColorNeutral050Base) {
+    t0 = StyleSheet.create({
       listHeader: {
         borderBottomWidth: 1,
         borderBottomColor: theme.colors.fillColorNeutral050Base,
@@ -593,15 +588,14 @@ const useStyles = t0 => {
       },
       headingRow: {
         gap: HEADING_ROW_GAP,
-        flexDirection: stacked ? "column" : "row",
-        alignItems: stacked ? "flex-start" : "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        alignItems: "center",
         justifyContent: "space-between",
-        paddingBottom: stacked ? 4 : 0,
         paddingHorizontal: ROW_PADDING_HORIZONTAL
       },
       titleContainer: {
-        flexShrink: 1,
-        minWidth: 0
+        flexShrink: 0
       },
       actionsContainer: {
         flexDirection: "row",
@@ -613,12 +607,11 @@ const useStyles = t0 => {
         paddingHorizontal: ROW_PADDING_HORIZONTAL
       }
     });
-    $[0] = stacked;
-    $[1] = theme.colors.fillColorNeutral050Base;
-    $[2] = t1;
+    $[0] = theme.colors.fillColorNeutral050Base;
+    $[1] = t0;
   } else {
-    t1 = $[2];
+    t0 = $[1];
   }
-  return t1;
+  return t0;
 };
 //# sourceMappingURL=filter_dropdown_list_header_component.js.map