@planningcenter/chat-react-native 4.4.1-qa-staging.25 → 4.4.1-qa-staging.27

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

@@ -1,9 +1,9 @@
 import { c as _c } from "react/compiler-runtime";
 import { useNavigation, useRoute } from '@react-navigation/native';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { Alert, StyleSheet, View } from 'react-native';
 import { FilterDropdown, TextButton } from '../../../components';
-import { useAtFontScaleBreakpoint, useCanBrowseArchivedConversations, useCanCreateConversations, useCurrentPersonCache, useDirectMessagesEligible, useHasDirectMessages, useNewConversationEntry, useTheme } from '../../../hooks';
+import { useCanBrowseArchivedConversations, useCanCreateConversations, useCurrentPersonCache, useDirectMessagesEligible, useFontScale, useHasDirectMessages, useNewConversationEntry, useTheme } from '../../../hooks';
 import { useApiGet } from '../../../hooks/use_api';
 import { useMarkAllRead } from '../../../hooks/use_conversations_actions';
 import { useCanDisplayGroups } from '../../../hooks/use_groups';
@@ -14,6 +14,8 @@ import { Haptic } from '../../../utils/native_adapters';
 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) {
@@ -21,6 +23,7 @@ var FilterTypes = /*#__PURE__*/function (FilterTypes) {
   FilterTypes["Groups"] = "Groups";
   FilterTypes["Teams"] = "Teams";
   FilterTypes["DMs"] = "DMs";
+  FilterTypes["Unread"] = "Unread";
   FilterTypes["More"] = "More";
   return FilterTypes;
 }(FilterTypes || {});
@@ -34,10 +37,13 @@ const FILTER_PARAMS = {
   },
   [FilterTypes.DMs]: {
     show_direct_messages: true
+  },
+  [FilterTypes.Unread]: {
+    show_unread: true
   }
 };
 export const FilterDropdownListHeaderComponent = () => {
-  const $ = _c(89);
+  const $ = _c(96);
   const navigation = useNavigation();
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -80,7 +86,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();
@@ -146,6 +153,11 @@ export const FilterDropdownListHeaderComponent = () => {
           if (show_direct_messages) {
             t9 = FilterTypes.DMs;
             break bb0;
+          } else {
+            if (show_unread) {
+              t9 = FilterTypes.Unread;
+              break bb0;
+            }
           }
         }
       }
@@ -197,19 +209,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;
       }
@@ -221,28 +243,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,
@@ -274,108 +296,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();
       }
@@ -386,122 +411,161 @@ export const FilterDropdownListHeaderComponent = () => {
         onPress: () => handleMarkAllRead()
       }]);
     };
-    $[50] = active;
-    $[51] = handleMarkAllRead;
-    $[52] = t24;
+    $[52] = active;
+    $[53] = handleMarkAllRead;
+    $[54] = t25;
   } else {
-    t24 = $[52];
+    t25 = $[54];
   }
-  const alertMarkAllRead = t24;
+  const alertMarkAllRead = t25;
   const showMoreFilters = canFilterByGroups || canFilterByTeams || canBrowseArchived;
-  const styles = useStyles();
-  let t25;
-  if ($[53] !== active || $[54] !== handleOpenConversationFilters || $[55] !== handleSelectFilter || $[56] !== options || $[57] !== showMoreFilters || $[58] !== triggerLabel) {
-    t25 = /*#__PURE__*/_jsx(FilterDropdown, {
+  const stacked = useFontScale() > DEFAULT_FONT_SCALE;
+  let t26;
+  if ($[55] !== stacked) {
+    t26 = {
+      stacked
+    };
+    $[55] = stacked;
+    $[56] = t26;
+  } else {
+    t26 = $[56];
+  }
+  const styles = useStyles(t26);
+  const [rowWidth, setRowWidth] = useState();
+  const [actionsWidth, setActionsWidth] = useState();
+  let t27;
+  if ($[57] === Symbol.for("react.memo_cache_sentinel")) {
+    t27 = event => {
+      setRowWidth(event.nativeEvent.layout.width);
+    };
+    $[57] = t27;
+  } else {
+    t27 = $[57];
+  }
+  const handleRowLayout = t27;
+  let t28;
+  if ($[58] === Symbol.for("react.memo_cache_sentinel")) {
+    t28 = event_0 => {
+      setActionsWidth(event_0.nativeEvent.layout.width);
+    };
+    $[58] = t28;
+  } else {
+    t28 = $[58];
+  }
+  const handleActionsLayout = t28;
+  const triggerMaxWidth = !stacked && rowWidth !== undefined && actionsWidth !== undefined ? rowWidth - ROW_PADDING_HORIZONTAL * 2 - actionsWidth - HEADING_ROW_GAP : undefined;
+  let t29;
+  if ($[59] !== active || $[60] !== handleOpenConversationFilters || $[61] !== handleSelectFilter || $[62] !== options || $[63] !== showMoreFilters || $[64] !== triggerLabel || $[65] !== triggerMaxWidth) {
+    t29 = /*#__PURE__*/_jsx(FilterDropdown, {
       options: options,
       selectedId: active,
       onSelect: handleSelectFilter,
       onMoreFilters: handleOpenConversationFilters,
       showMoreFilters: showMoreFilters,
-      triggerLabel: triggerLabel
+      triggerLabel: triggerLabel,
+      maxWidth: triggerMaxWidth
     });
-    $[53] = active;
-    $[54] = handleOpenConversationFilters;
-    $[55] = handleSelectFilter;
-    $[56] = options;
-    $[57] = showMoreFilters;
-    $[58] = triggerLabel;
-    $[59] = t25;
+    $[59] = active;
+    $[60] = handleOpenConversationFilters;
+    $[61] = handleSelectFilter;
+    $[62] = options;
+    $[63] = showMoreFilters;
+    $[64] = triggerLabel;
+    $[65] = triggerMaxWidth;
+    $[66] = t29;
   } else {
-    t25 = $[59];
+    t29 = $[66];
   }
-  let t26;
-  if ($[60] !== styles.titleContainer || $[61] !== t25) {
-    t26 = /*#__PURE__*/_jsx(View, {
+  let t30;
+  if ($[67] !== styles.titleContainer || $[68] !== t29) {
+    t30 = /*#__PURE__*/_jsx(View, {
       style: styles.titleContainer,
-      children: t25
+      children: t29
     });
-    $[60] = styles.titleContainer;
-    $[61] = t25;
-    $[62] = t26;
+    $[67] = styles.titleContainer;
+    $[68] = t29;
+    $[69] = t30;
   } else {
-    t26 = $[62];
+    t30 = $[69];
   }
-  let t27;
-  if ($[63] !== handleChatSettings) {
-    t27 = /*#__PURE__*/_jsx(ListHeaderActionButton, {
+  let t31;
+  if ($[70] !== handleChatSettings) {
+    t31 = /*#__PURE__*/_jsx(ListHeaderActionButton, {
       name: "general.cog",
       onPress: handleChatSettings,
       accessibilityLabel: "Chat settings",
       testID: "conversations-chat-settings-button",
       maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER_LANDMARK
     });
-    $[63] = handleChatSettings;
-    $[64] = t27;
+    $[70] = handleChatSettings;
+    $[71] = t31;
   } else {
-    t27 = $[64];
+    t31 = $[71];
   }
-  let t28;
-  if ($[65] !== canCreateConversations || $[66] !== handleNewConversationNavigation) {
-    t28 = canCreateConversations && /*#__PURE__*/_jsx(ListHeaderActionButton, {
+  let t32;
+  if ($[72] !== canCreateConversations || $[73] !== handleNewConversationNavigation) {
+    t32 = canCreateConversations && /*#__PURE__*/_jsx(ListHeaderActionButton, {
       name: "churchCenter.signups",
       onPress: handleNewConversationNavigation,
       accessibilityLabel: "New conversation",
       testID: "conversations-new-conversation-button",
       maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER_LANDMARK
     });
-    $[65] = canCreateConversations;
-    $[66] = handleNewConversationNavigation;
-    $[67] = t28;
+    $[72] = canCreateConversations;
+    $[73] = handleNewConversationNavigation;
+    $[74] = t32;
   } else {
-    t28 = $[67];
+    t32 = $[74];
   }
-  let t29;
-  if ($[68] !== handleSearch || $[69] !== searchEnabled) {
-    t29 = searchEnabled && /*#__PURE__*/_jsx(ListHeaderActionButton, {
+  let t33;
+  if ($[75] !== handleSearch || $[76] !== searchEnabled) {
+    t33 = searchEnabled && /*#__PURE__*/_jsx(ListHeaderActionButton, {
       name: "general.search",
       onPress: handleSearch,
       accessibilityLabel: "Search",
       testID: "conversations-search-button",
       maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER_LANDMARK
     });
-    $[68] = handleSearch;
-    $[69] = searchEnabled;
-    $[70] = t29;
+    $[75] = handleSearch;
+    $[76] = searchEnabled;
+    $[77] = t33;
   } else {
-    t29 = $[70];
+    t33 = $[77];
   }
-  let t30;
-  if ($[71] !== styles.actionsContainer || $[72] !== t27 || $[73] !== t28 || $[74] !== t29) {
-    t30 = /*#__PURE__*/_jsxs(View, {
+  let t34;
+  if ($[78] !== styles.actionsContainer || $[79] !== t31 || $[80] !== t32 || $[81] !== t33) {
+    t34 = /*#__PURE__*/_jsxs(View, {
       style: styles.actionsContainer,
-      children: [t27, t28, t29]
+      onLayout: handleActionsLayout,
+      testID: "conversations-filter-actions",
+      children: [t31, t32, t33]
     });
-    $[71] = styles.actionsContainer;
-    $[72] = t27;
-    $[73] = t28;
-    $[74] = t29;
-    $[75] = t30;
+    $[78] = styles.actionsContainer;
+    $[79] = t31;
+    $[80] = t32;
+    $[81] = t33;
+    $[82] = t34;
   } else {
-    t30 = $[75];
+    t34 = $[82];
   }
-  let t31;
-  if ($[76] !== styles.headingRow || $[77] !== t26 || $[78] !== t30) {
-    t31 = /*#__PURE__*/_jsxs(View, {
+  let t35;
+  if ($[83] !== styles.headingRow || $[84] !== t30 || $[85] !== t34) {
+    t35 = /*#__PURE__*/_jsxs(View, {
       style: styles.headingRow,
+      onLayout: handleRowLayout,
       testID: "conversations-filter-heading-row",
-      children: [t26, t30]
+      children: [t30, t34]
     });
-    $[76] = styles.headingRow;
-    $[77] = t26;
-    $[78] = t30;
-    $[79] = t31;
+    $[83] = styles.headingRow;
+    $[84] = t30;
+    $[85] = t34;
+    $[86] = t35;
   } else {
-    t31 = $[79];
+    t35 = $[86];
   }
-  let t32;
-  if ($[80] !== alertMarkAllRead || $[81] !== isPending || $[82] !== show_archived || $[83] !== styles.markAllReadRow) {
-    t32 = !show_archived && /*#__PURE__*/_jsx(View, {
+  let t36;
+  if ($[87] !== alertMarkAllRead || $[88] !== isPending || $[89] !== show_archived || $[90] !== styles.markAllReadRow) {
+    t36 = !show_archived && /*#__PURE__*/_jsx(View, {
       style: styles.markAllReadRow,
       children: /*#__PURE__*/_jsx(TextButton, {
         onPress: alertMarkAllRead,
@@ -512,36 +576,38 @@ export const FilterDropdownListHeaderComponent = () => {
         children: "Mark all read"
       })
     });
-    $[80] = alertMarkAllRead;
-    $[81] = isPending;
-    $[82] = show_archived;
-    $[83] = styles.markAllReadRow;
-    $[84] = t32;
+    $[87] = alertMarkAllRead;
+    $[88] = isPending;
+    $[89] = show_archived;
+    $[90] = styles.markAllReadRow;
+    $[91] = t36;
   } else {
-    t32 = $[84];
+    t36 = $[91];
   }
-  let t33;
-  if ($[85] !== styles.listHeader || $[86] !== t31 || $[87] !== t32) {
-    t33 = /*#__PURE__*/_jsxs(View, {
+  let t37;
+  if ($[92] !== styles.listHeader || $[93] !== t35 || $[94] !== t36) {
+    t37 = /*#__PURE__*/_jsxs(View, {
       style: styles.listHeader,
-      children: [t31, t32]
+      children: [t35, t36]
     });
-    $[85] = styles.listHeader;
-    $[86] = t31;
-    $[87] = t32;
-    $[88] = t33;
+    $[92] = styles.listHeader;
+    $[93] = t35;
+    $[94] = t36;
+    $[95] = t37;
   } else {
-    t33 = $[88];
+    t37 = $[95];
   }
-  return t33;
+  return t37;
 };
-const useStyles = () => {
+const useStyles = t0 => {
   const $ = _c(3);
+  const {
+    stacked
+  } = t0;
   const theme = useTheme();
-  const atFontScaleBreakpoint = useAtFontScaleBreakpoint(MAX_FONT_SIZE_MULTIPLIER_LANDMARK);
-  let t0;
-  if ($[0] !== atFontScaleBreakpoint || $[1] !== theme.colors.fillColorNeutral050Base) {
-    t0 = StyleSheet.create({
+  let t1;
+  if ($[0] !== stacked || $[1] !== theme.colors.fillColorNeutral050Base) {
+    t1 = StyleSheet.create({
       listHeader: {
         borderBottomWidth: 1,
         borderBottomColor: theme.colors.fillColorNeutral050Base,
@@ -549,11 +615,11 @@ const useStyles = () => {
         gap: 8
       },
       headingRow: {
-        gap: 12,
-        flexDirection: atFontScaleBreakpoint ? "column" : "row",
-        alignItems: atFontScaleBreakpoint ? "flex-start" : "center",
+        gap: HEADING_ROW_GAP,
+        flexDirection: stacked ? "column" : "row",
+        alignItems: stacked ? "flex-start" : "center",
         justifyContent: "space-between",
-        paddingBottom: atFontScaleBreakpoint ? 4 : 0,
+        paddingBottom: stacked ? 4 : 0,
         paddingHorizontal: ROW_PADDING_HORIZONTAL
       },
       titleContainer: {
@@ -570,12 +636,12 @@ const useStyles = () => {
         paddingHorizontal: ROW_PADDING_HORIZONTAL
       }
     });
-    $[0] = atFontScaleBreakpoint;
+    $[0] = stacked;
     $[1] = theme.colors.fillColorNeutral050Base;
-    $[2] = t0;
+    $[2] = t1;
   } else {
-    t0 = $[2];
+    t1 = $[2];
   }
-  return t0;
+  return t1;
 };
 //# sourceMappingURL=filter_dropdown_list_header_component.js.map