ComposeBox: Move compose buttons into a row below message-text input

Making `multiline` constantly true fixes various urgent bugs where
the message-text input would lose its contents or fail to update
when you press one of these menu buttons on iOS. Details in the
linked issues.

Fixes: #5080
Fixes: #5291
Fixes: #5463
Fixes: #4628

Author: chrisbobbe

src/compose/ComposeBox.js

@@ -199,10 +199,6 @@ const ComposeBox: React$AbstractComponent<Props, ImperativeHandle> = forwardRef(
 
   const inputBlurTimeoutId = useRef<?TimeoutID>(null);
 
-  // TODO(#5141): Encapsulate this in a nice, plain action-sheet pattern
-  //   instead of setting it all over the place
-  const [isMenuExpanded, setIsMenuExpanded] = useState<boolean>(false);
-
   const [height, setHeight] = useState<number>(20);
 
   const [focusState, setFocusState] = useState<{|
@@ -258,20 +254,9 @@ const ComposeBox: React$AbstractComponent<Props, ImperativeHandle> = forwardRef(
       if (!isEditing) {
         dispatch(draftUpdate(narrow, messageInputValue));
       }
-      setIsMenuExpanded(false);
     }
   }, [dispatch, isEditing, narrow, messageInputState, prevMessageInputState]);
 
-  const prevTopicInputState = usePrevious(topicInputState);
-  useEffect(() => {
-    const topicInputValue = topicInputState.value;
-    const prevTopicInputValue = prevTopicInputState?.value;
-
-    if (prevTopicInputValue !== topicInputValue) {
-      setIsMenuExpanded(false);
-    }
-  }, [topicInputState, prevTopicInputState]);
-
   const updateIsFocused = useCallback(() => {
     setFocusState(state => ({ ...state, either: state.message || state.topic }));
   }, []);
@@ -454,10 +439,6 @@ const ComposeBox: React$AbstractComponent<Props, ImperativeHandle> = forwardRef(
   );
   useImperativeHandle(ref, () => ({ doQuoteAndReply }), [doQuoteAndReply]);
 
-  const handleComposeMenuToggle = useCallback(() => {
-    setIsMenuExpanded(x => !x);
-  }, []);
-
   const handleLayoutChange = useCallback((event: LayoutEvent) => {
     setHeight(event.nativeEvent.layout.height);
   }, []);
@@ -495,13 +476,11 @@ const ComposeBox: React$AbstractComponent<Props, ImperativeHandle> = forwardRef(
       topicInputRef.current?.focus();
     } else {
       setFocusState(state => ({ ...state, message: true, either: true }));
-      setIsMenuExpanded(false);
     }
   }, [isEditing, narrow, focusState.either, topicInputState.value, topicInputRef]);
 
   const handleMessageBlur = useCallback(() => {
     setFocusState(state => ({ ...state, message: false }));
-    setIsMenuExpanded(false);
     dispatch(sendTypingStop(narrow));
     // give a chance to the topic input to get the focus
     clearTimeout(inputBlurTimeoutId.current);
@@ -510,21 +489,15 @@ const ComposeBox: React$AbstractComponent<Props, ImperativeHandle> = forwardRef(
 
   const handleTopicFocus = useCallback(() => {
     setFocusState(state => ({ ...state, topic: true, either: true }));
-    setIsMenuExpanded(false);
   }, []);
 
   const handleTopicBlur = useCallback(() => {
     setFocusState(state => ({ ...state, topic: false }));
-    setIsMenuExpanded(false);
     // give a chance to the message input to get the focus
     clearTimeout(inputBlurTimeoutId.current);
     inputBlurTimeoutId.current = setTimeout(updateIsFocused, FOCUS_DEBOUNCE_TIME_MS);
   }, [updateIsFocused]);
 
-  const handleInputTouchStart = useCallback(() => {
-    setIsMenuExpanded(false);
-  }, []);
-
   const destinationNarrow = useMemo(() => {
     if (isStreamNarrow(narrow) || (isTopicNarrow(narrow) && isEditing)) {
       const streamId = streamIdOfNarrow(narrow);
@@ -652,7 +625,8 @@ const ComposeBox: React$AbstractComponent<Props, ImperativeHandle> = forwardRef(
         },
         composeInputs: {
           flex: 1,
-          paddingVertical: 8,
+          paddingTop: 8,
+          paddingLeft: 8,
         },
         submitButtonContainer: {
           padding: 8,
@@ -739,15 +713,6 @@ const ComposeBox: React$AbstractComponent<Props, ImperativeHandle> = forwardRef(
         style={styles.composeBox}
         onLayout={handleLayoutChange}
       >
-        <ComposeMenu
-          destinationNarrow={destinationNarrow}
-          expanded={isMenuExpanded}
-          insertAttachment={insertAttachment}
-          insertVideoCallLink={
-            videoChatProvider !== null ? () => insertVideoCallLink(videoChatProvider) : null
-          }
-          onExpandContract={handleComposeMenuToggle}
-        />
         <View style={styles.composeInputs}>
           <Input
             style={styles.topicInput}
@@ -761,14 +726,12 @@ const ComposeBox: React$AbstractComponent<Props, ImperativeHandle> = forwardRef(
             {...topicInputCallbacks}
             onFocus={handleTopicFocus}
             onBlur={handleTopicBlur}
-            onTouchStart={handleInputTouchStart}
             onSubmitEditing={() => messageInputRef.current?.focus()}
             blurOnSubmit={false}
             returnKeyType="next"
           />
           <Input
-            // TODO(#5291): Don't switch between true/false for multiline
-            multiline={!isMenuExpanded}
+            multiline
             style={styles.composeTextInput}
             underlineColorAndroid="transparent"
             placeholder={placeholder}
@@ -778,7 +741,13 @@ const ComposeBox: React$AbstractComponent<Props, ImperativeHandle> = forwardRef(
             {...messageInputCallbacks}
             onBlur={handleMessageBlur}
             onFocus={handleMessageFocus}
-            onTouchStart={handleInputTouchStart}
+          />
+          <ComposeMenu
+            destinationNarrow={destinationNarrow}
+            insertAttachment={insertAttachment}
+            insertVideoCallLink={
+              videoChatProvider !== null ? () => insertVideoCallLink(videoChatProvider) : null
+            }
           />
         </View>
         <View style={styles.submitButtonContainer}>

src/compose/ComposeMenu.js

@@ -11,25 +11,15 @@ import { TranslationContext } from '../boot/TranslationProvider';
 import type { Narrow } from '../types';
 import { showErrorAlert } from '../utils/info';
 import { BRAND_COLOR, HIGHLIGHT_COLOR, createStyleSheet } from '../styles';
-import {
-  IconPlusCircle,
-  IconLeft,
-  IconImage,
-  IconCamera,
-  IconAttach,
-  IconVideo,
-} from '../common/Icons';
-import AnimatedComponent from '../animation/AnimatedComponent';
+import { IconImage, IconCamera, IconAttach, IconVideo } from '../common/Icons';
 import { uploadFile } from '../actions';
 import { androidEnsureStoragePermission } from '../lightbox/download';
 import type { SpecificIconType } from '../common/Icons';
 
 type Props = $ReadOnly<{|
-  expanded: boolean,
   destinationNarrow: Narrow,
   insertAttachment: ($ReadOnlyArray<DocumentPickerResponse>) => Promise<void>,
   insertVideoCallLink: (() => void) | null,
-  onExpandContract: () => void,
 |}>;
 
 /**
@@ -82,7 +72,7 @@ type MenuButtonProps = $ReadOnly<{|
 
 function MenuButton(props: MenuButtonProps) {
   const { onPress, IconComponent } = props;
-  const style = useMemo(() => ({ padding: 12 }), []);
+  const style = useMemo(() => ({ paddingHorizontal: 12, paddingVertical: 8 }), []);
 
   return (
     <Pressable style={style} onPress={onPress}>
@@ -92,8 +82,7 @@ function MenuButton(props: MenuButtonProps) {
 }
 
 export default function ComposeMenu(props: Props): Node {
-  const { destinationNarrow, insertAttachment, expanded, insertVideoCallLink, onExpandContract } =
-    props;
+  const { destinationNarrow, insertAttachment, insertVideoCallLink } = props;
 
   const dispatch = useDispatch();
   const _ = useContext(TranslationContext);
@@ -232,53 +221,20 @@ export default function ComposeMenu(props: Props): Node {
         container: {
           flexDirection: 'row',
         },
-        composeMenu: {
-          flexDirection: 'row',
-
-          // Hide the buttons when the menu is collapsed. (overflowX would
-          // be great here if RN offered it.)
-          overflow: 'hidden',
-        },
-        expandButton: {
-          padding: 12,
-        },
       }),
     [],
   );
 
-  const numIcons = 2 + (Platform.OS === 'android' ? 1 : 0) + (insertVideoCallLink !== null ? 1 : 0);
-
   return (
     <View style={styles.container}>
-      <AnimatedComponent
-        stylePropertyName="width"
-        fullValue={48 * numIcons}
-        useNativeDriver={false}
-        visible={expanded}
-      >
-        <View style={styles.composeMenu}>
-          {Platform.OS === 'android' && (
-            <MenuButton onPress={handleFilesPicker} IconComponent={IconAttach} />
-          )}
-          <MenuButton onPress={handleImagePicker} IconComponent={IconImage} />
-          <MenuButton onPress={handleCameraCapture} IconComponent={IconCamera} />
-          {insertVideoCallLink !== null ? (
-            <MenuButton onPress={insertVideoCallLink} IconComponent={IconVideo} />
-          ) : null}
-        </View>
-      </AnimatedComponent>
-      {!expanded && (
-        <Pressable style={styles.expandButton} onPress={onExpandContract}>
-          {({ pressed }) => (
-            <IconPlusCircle color={pressed ? HIGHLIGHT_COLOR : BRAND_COLOR} size={24} />
-          )}
-        </Pressable>
-      )}
-      {expanded && (
-        <Pressable style={styles.expandButton} onPress={onExpandContract}>
-          {({ pressed }) => <IconLeft color={pressed ? HIGHLIGHT_COLOR : BRAND_COLOR} size={24} />}
-        </Pressable>
+      {Platform.OS === 'android' && (
+        <MenuButton onPress={handleFilesPicker} IconComponent={IconAttach} />
       )}
+      <MenuButton onPress={handleImagePicker} IconComponent={IconImage} />
+      <MenuButton onPress={handleCameraCapture} IconComponent={IconCamera} />
+      {insertVideoCallLink !== null ? (
+        <MenuButton onPress={insertVideoCallLink} IconComponent={IconVideo} />
+      ) : null}
     </View>
   );
 }