@momo-kits/foundation 0.169.7-beta.6 → 0.169.7-beta.7

package/Application/Components/HeaderExtendHeader.tsx

@@ -17,7 +17,7 @@ import BackgroundImageView from './BackgroundImageView';
 import { type AnimatedCompatValue } from '../utils';
 import { useNormalizedSharedValue } from '../hooks';
 import { useScreenLayout } from '../../Layout';
-import { DuoMetrics, HeaderMetrics } from '../../Layout/utils';
+import { HeaderMetrics } from '../../Layout/utils';
 import {
   HeaderBarMetrics,
   type HeaderContentLayout,
@@ -66,17 +66,10 @@ const HeaderExtendHeader: React.FC<{
   // the stretch frame pulls the search in from both bar edges
   const frameShift = headerLayout.frameInset - sidePadding;
 
-  let backWidth = buttonSize;
-  let toolkitWidth = TOOLKIT_WIDTH;
-  // the iPhone Duo status bar row keeps side bar sized back and toolkit
-  if (layout.statusBarClearance) {
-    backWidth = DuoMetrics.controlSize;
-    toolkitWidth = DuoMetrics.itemPitch * 2 + SCREEN_PADDING;
-  }
-  const backLeft = backWidth + sidePadding + titleGap;
+  const backLeft = buttonSize + sidePadding + titleGap;
   const defaultLeft = layout.sideBar ? SCREEN_PADDING : backLeft;
   const leftPosition = inputSearchProps?.leftPosition || defaultLeft;
-  const defaultRightWidth = layout.sideBar ? 0 : toolkitWidth;
+  const defaultRightWidth = layout.sideBar ? 0 : TOOLKIT_WIDTH;
   const headerRightWidth = customHeaderRightWidth ?? defaultRightWidth;
   const contentLeft = layout.insetLeft + SCREEN_PADDING + frameShift;
   const contentRight = layout.insetLeft + layout.contentWidth - frameShift;
@@ -92,9 +85,8 @@ const HeaderExtendHeader: React.FC<{
   const titleRowHeight = layout.headerHeight - layout.headerStatusBarHeight;
   const collapsedRaise = (titleRowHeight - HeaderMetrics.barHeight) / 2;
 
-  // the iPhone Duo side bar and status bar row keep the content search size
-  const isDuoRow = !!layout.sideBar || !!layout.statusBarClearance;
-  const searchSize = isDuoRow ? 'default' : 'header';
+  // the iPhone Duo side bar keeps the content search size
+  const searchSize = layout.sideBar ? 'default' : 'header';
 
   let useShadowHeader = useShadowHeaderProp;
   if (inputSearchProps && Platform.OS === 'android') {

package/Application/Components/HeaderLeft.tsx

@@ -6,13 +6,13 @@ import { PopupNotify } from '../../Popup';
 import { NavigationButton } from './NavigationButton';
 import { SideBarButton } from './SideBarButton';
 import Animated from 'react-native-reanimated';
-import { useScreenLayout, useSideBarItemStyle } from '../../Layout/utils';
+import { useSideBarItemStyle } from '../../Layout/utils';
 import { useSideBarCounterStyle } from './DuoQuickReturnHeader';
 import { HeaderBarMetrics } from '../headerLayout';
 
 /**
  * Header back button, also bound to the Android hardware back. `preventBack`
- * confirms in a popup first; the iPhone Duo layouts use the 48pt side bar button.
+ * confirms in a popup first; the iPhone Duo side bar uses the 48pt side bar button.
  */
 const HeaderLeft: React.FC<HeaderBackProps> = ({
   tintColor,
@@ -25,7 +25,6 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   const { navigator } = useContext(ApplicationContext);
   const sideBarStyle = useSideBarItemStyle('left', 0);
   const counterStyle = useSideBarCounterStyle();
-  const { statusBarClearance } = useScreenLayout();
 
   const goBack = useCallback(() => {
     const canGoBack = navigator?.ref?.current?.canGoBack?.();
@@ -98,20 +97,6 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     );
   }
 
-  // on the status bar row the controls keep the side bar size
-  if (statusBarClearance) {
-    return (
-      <View style={styles.headerLeft}>
-        <SideBarButton
-          accessibilityLabel="btn_navigation_back"
-          icon="arrow-back"
-          tintColor={tintColor}
-          onPress={goBackSafe}
-        />
-      </View>
-    );
-  }
-
   return (
     <View style={styles.headerLeft}>
       <NavigationButton

package/Application/Components/HeaderRight.styles.ts

@@ -74,10 +74,6 @@ export const styles = StyleSheet.create({
   sideBarColumn: {
     gap: Spacing.M,
   },
-  sideBarRow: {
-    flexDirection: 'row',
-    gap: Spacing.M,
-  },
   headerLeft: {
     marginLeft: 12,
   },

package/Application/Components/HeaderTitle.shared.ts

@@ -23,28 +23,22 @@ const useHeaderFontFamily = (): string => {
 const HEADER_ACTIONS_WIDTH =
   sidePadding * 2 + buttonSize + titleGap * 2 + clusterWidth;
 
-/**
- * extra width the 48pt back and toolkit take on the iPhone Duo status bar row
- */
-const STATUS_BAR_ROW_ACTIONS_EXTRA = 43;
-
 /**
  * Max header title width. The iPhone Duo side bar takes back and toolkit out of
- * the bar, so the title gets the content width; otherwise it shares the bar with them.
+ * the bar, so the title gets the content width; otherwise it shares the bar with
+ * them, minus the status bar clusters on the iPhone Duo inner portrait row.
  */
 const useTitleMaxWidth = () => {
   const layout = useScreenLayout();
   const { width, contentWidth, sideBar, statusBarClearance } = layout;
   let clearance = 0;
-  let rowActionsExtra = 0;
   if (statusBarClearance) {
     clearance = statusBarClearance.left + statusBarClearance.right;
-    rowActionsExtra = STATUS_BAR_ROW_ACTIONS_EXTRA;
   }
   if (sideBar) {
     return contentWidth - Spacing.M * 2 - clearance;
   }
-  return width - HEADER_ACTIONS_WIDTH - rowActionsExtra - clearance;
+  return width - HEADER_ACTIONS_WIDTH - clearance;
 };
 
 export { useHeaderFontFamily, HEADER_ACTIONS_WIDTH, useTitleMaxWidth };

package/Application/Components/HeaderToolkitAction.tsx

@@ -4,7 +4,7 @@ import { NavigationButton } from './NavigationButton';
 import { MiniAppContext } from '../../Context';
 import { Colors, Spacing, Styles } from '../../Consts';
 import { Icon } from '../../Icon';
-import { DuoMetrics, useScreenLayout } from '../../Layout/utils';
+import { DuoMetrics } from '../../Layout/utils';
 import { SideBarButton, SideBarGroup, SideBarGroupItem } from './SideBarButton';
 import { useDuoBarCompression } from '../BottomTab/DuoBarCompression';
 import { styles } from './HeaderRight.styles';
@@ -32,7 +32,6 @@ const HeaderToolkitAction: React.FC<any> = ({
   const compression = useDuoBarCompression();
   const { toolbarCompressed, toolbarHidden } = compression;
   const { expandToolbar, setToolbarHeight } = compression;
-  const { statusBarClearance } = useScreenLayout();
   const {
     isLoading,
     iconShortcut,
@@ -132,39 +131,6 @@ const HeaderToolkitAction: React.FC<any> = ({
     );
   }
 
-  // on the status bar row the controls keep the side bar size
-  if (statusBarClearance) {
-    return (
-      <View style={styles.sideBarRow}>
-        {useShortcut && (
-          <SideBarButton
-            disabled={isLoading}
-            icon={iconShortcut}
-            onPress={shortcutOnPress}
-            tintColor={tintColor}
-            showBadge={showBadge}
-          />
-        )}
-        <SideBarGroup tintColor={tintColor} horizontal>
-          {useHelpCenter && (
-            <SideBarGroupItem
-              accessibilityLabel={'btn_navigation_help_center'}
-              icon={'help_center'}
-              tintColor={tintColor}
-              onPress={onPressHelpCenter}
-            />
-          )}
-          <SideBarGroupItem
-            accessibilityLabel={'btn_navigation_close'}
-            icon={closeIcon}
-            tintColor={tintColor}
-            onPress={onClose}
-          />
-        </SideBarGroup>
-      </View>
-    );
-  }
-
   return (
     <View style={Styles.row}>
       {useShortcut && (

package/Application/Components/SearchHeader.tsx

@@ -8,13 +8,12 @@ import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Text } from '../../Text';
 import { useNormalizedSharedValue } from '../hooks';
 import { useScreenLayout } from '../../Layout';
-import { DuoMetrics } from '../../Layout/utils';
 import { HeaderBarMetrics } from '../headerLayout';
 
 const { buttonSize, pillWidth, sidePadding, titleGap } = HeaderBarMetrics;
 // help center | home pill and the bar padding right of it
 const TOOLKIT_WIDTH = pillWidth + sidePadding;
-// the iPhone Duo side bar and status bar row keep their right header width
+// the iPhone Duo side bar keeps its right header width
 const DUO_TOOLKIT_WIDTH = 73;
 
 /**
@@ -35,20 +34,15 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
     const { theme, navigator } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
     const layout = useScreenLayout();
-    // the iPhone Duo status bar row keeps a side bar sized back button
-    let backWidth = buttonSize;
-    if (layout.statusBarClearance) {
-      backWidth = DuoMetrics.controlSize;
-    }
     let defaultRightWidth = TOOLKIT_WIDTH;
     let searchSize: InputSearchProps['size'] = 'header';
-    if (layout.sideBar || layout.statusBarClearance) {
+    if (layout.sideBar) {
       defaultRightWidth = DUO_TOOLKIT_WIDTH;
       searchSize = 'default';
     }
 
     const sharedValue = useNormalizedSharedValue(animatedValue);
-    const defaultLeft = backWidth + sidePadding + titleGap;
+    const defaultLeft = buttonSize + sidePadding + titleGap;
     const leftPosition = props?.leftPosition ?? defaultLeft;
     const headerRightWidth = props?.headerRightWidth ?? defaultRightWidth;
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.169.7-beta.6",
+    "version": "0.169.7-beta.7",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},