Add a button to expand the composer to full screen when the input has 3+ lines

src/CONST.js

@@ -273,6 +273,14 @@ const CONST = {
         MAX_ROOM_NAME_LENGTH: 80,
         LAST_MESSAGE_TEXT_MAX_LENGTH: 80,
     },
+    COMPOSER: {
+        MAX_LINES: 16,
+        MAX_LINES_SMALL_SCREEN: 6,
+        MAX_LINES_FULL: -1,
+
+        // The minimum number of typed lines needed to enable the full screen composer
+        FULL_COMPOSER_MIN_LINES: 3,
+    },
     MODAL: {
         MODAL_TYPE: {
             CONFIRM: 'confirm',

src/ONYXKEYS.js

@@ -105,6 +105,7 @@ export default {
         REPORT_IOUS: 'reportIOUs_',
         POLICY: 'policy_',
         REPORTS_WITH_DRAFT: 'reportWithDraft_',
+        REPORT_IS_COMPOSER_FULL_SIZE: 'reportIsComposerFullSize_',
     },
 
     // Indicates which locale should be used

src/components/Composer/index.android.js

@@ -1,16 +1,11 @@
 import React from 'react';
+import {StyleSheet} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import RNTextInput from '../RNTextInput';
 import themeColors from '../../styles/themes/default';
 import CONST from '../../CONST';
-
-/**
- * On native layers we like to have the Text Input not focused so the user can read new chats without they keyboard in
- * the way of the view
- * On Android, the selection prop is required on the TextInput but this prop has issues on IOS
- * https://github.com/facebook/react-native/issues/29063
- */
+import * as ComposerUtils from '../../libs/ComposerUtils';
 
 const propTypes = {
     /** If the input should clear, it actually gets intercepted instead of .clear() */
@@ -29,6 +24,25 @@ const propTypes = {
     /** Prevent edits and interactions like focus for this input. */
     isDisabled: PropTypes.bool,
 
+    /** Selection Object */
+    selection: PropTypes.shape({
+        start: PropTypes.number,
+        end: PropTypes.number,
+    }),
+
+    /** Whether the full composer can be opened */
+    isFullComposerAvailable: PropTypes.bool,
+
+    /** Allow the full composer to be opened */
+    setIsFullComposerAvailable: PropTypes.func,
+
+    /** Whether the composer is full size */
+    isComposerFullSize: PropTypes.bool.isRequired,
+
+    /** General styles to apply to the text input */
+    // eslint-disable-next-line react/forbid-prop-types
+    style: PropTypes.any,
+
 };
 
 const defaultProps = {
@@ -37,9 +51,24 @@ const defaultProps = {
     autoFocus: false,
     isDisabled: false,
     forwardedRef: null,
+    selection: {
+        start: 0,
+        end: 0,
+    },
+    isFullComposerAvailable: false,
+    setIsFullComposerAvailable: () => {},
+    style: null,
 };
 
 class Composer extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            propStyles: StyleSheet.flatten(this.props.style),
+        };
+    }
+
     componentDidMount() {
         // This callback prop is used by the parent component using the constructor to
         // get a ref to the inner textInput element e.g. if we do
@@ -67,17 +96,19 @@ class Composer extends React.Component {
                 autoComplete="off"
                 placeholderTextColor={themeColors.placeholderText}
                 ref={el => this.textInput = el}
-                maxHeight={CONST.COMPOSER_MAX_HEIGHT}
+                maxHeight={this.props.isComposerFullSize ? '100%' : CONST.COMPOSER_MAX_HEIGHT}
+                onContentSizeChange={e => ComposerUtils.updateNumberOfLines(this.props, e)}
                 rejectResponderTermination={false}
-                editable={!this.props.isDisabled}
+                textAlignVertical="center"
+                style={this.state.propStyles}
                 /* eslint-disable-next-line react/jsx-props-no-spreading */
                 {...this.props}
+                editable={!this.props.isDisabled}
             />
         );
     }
 }
 
-Composer.displayName = 'Composer';
 Composer.propTypes = propTypes;
 Composer.defaultProps = defaultProps;
 

src/components/Composer/index.ios.js

@@ -1,16 +1,11 @@
 import React from 'react';
+import {StyleSheet} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import RNTextInput from '../RNTextInput';
 import themeColors from '../../styles/themes/default';
 import CONST from '../../CONST';
-
-/**
- * On native layers we like to have the Text Input not focused so the user can read new chats without they keyboard in
- * the way of the view
- * On Android, the selection prop is required on the TextInput but this prop has issues on IOS
- * https://github.com/facebook/react-native/issues/29063
- */
+import * as ComposerUtils from '../../libs/ComposerUtils';
 
 const propTypes = {
     /** If the input should clear, it actually gets intercepted instead of .clear() */
@@ -35,6 +30,19 @@ const propTypes = {
         end: PropTypes.number,
     }),
 
+    /** Whether the full composer can be opened */
+    isFullComposerAvailable: PropTypes.bool,
+
+    /** Allow the full composer to be opened */
+    setIsFullComposerAvailable: PropTypes.func,
+
+    /** Whether the composer is full size */
+    isComposerFullSize: PropTypes.bool.isRequired,
+
+    /** General styles to apply to the text input */
+    // eslint-disable-next-line react/forbid-prop-types
+    style: PropTypes.any,
+
 };
 
 const defaultProps = {
@@ -47,9 +55,20 @@ const defaultProps = {
         start: 0,
         end: 0,
     },
+    isFullComposerAvailable: false,
+    setIsFullComposerAvailable: () => {},
+    style: null,
 };
 
 class Composer extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            propStyles: StyleSheet.flatten(this.props.style),
+        };
+    }
+
     componentDidMount() {
         // This callback prop is used by the parent component using the constructor to
         // get a ref to the inner textInput element e.g. if we do
@@ -72,18 +91,24 @@ class Composer extends React.Component {
     }
 
     render() {
-        // Selection Property not worked in IOS properly, So removed from props.
+        // On native layers we like to have the Text Input not focused so the
+        // user can read new chats without the keyboard in the way of the view.
+        // On Android, the selection prop is required on the TextInput but this prop has issues on IOS
+        // https://github.com/facebook/react-native/issues/29063
         const propsToPass = _.omit(this.props, 'selection');
         return (
             <RNTextInput
                 autoComplete="off"
                 placeholderTextColor={themeColors.placeholderText}
                 ref={el => this.textInput = el}
-                maxHeight={CONST.COMPOSER_MAX_HEIGHT}
+                maxHeight={this.props.isComposerFullSize ? '100%' : CONST.COMPOSER_MAX_HEIGHT}
+                onContentSizeChange={e => ComposerUtils.updateNumberOfLines(this.props, e)}
                 rejectResponderTermination={false}
-                editable={!this.props.isDisabled}
+                textAlignVertical="center"
+                style={this.state.propStyles}
                 /* eslint-disable-next-line react/jsx-props-no-spreading */
                 {...propsToPass}
+                editable={!this.props.isDisabled}
             />
         );
     }

src/components/Composer/index.js

@@ -8,6 +8,8 @@ import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import Growl from '../../libs/Growl';
 import themeColors from '../../styles/themes/default';
 import CONST from '../../CONST';
+import updateIsFullComposerAvailable from '../../libs/ComposerUtils/updateIsFullComposerAvailable';
+import getNumberOfLines from '../../libs/ComposerUtils/index';
 
 const propTypes = {
     /** Maximum number of lines in the text input */
@@ -63,6 +65,12 @@ const propTypes = {
         end: PropTypes.number,
     }),
 
+    /** Whether the full composer can be opened */
+    isFullComposerAvailable: PropTypes.bool,
+
+    /** Allow the full composer to be opened */
+    setIsFullComposerAvailable: PropTypes.func,
+
     ...withLocalizePropTypes,
 };
 
@@ -86,6 +94,8 @@ const defaultProps = {
         start: 0,
         end: 0,
     },
+    isFullComposerAvailable: false,
+    setIsFullComposerAvailable: () => {},
 };
 
 const IMAGE_EXTENSIONS = {
@@ -155,7 +165,8 @@ class Composer extends React.Component {
             this.setState({numberOfLines: 1});
             this.props.onClear();
         }
-        if (prevProps.defaultValue !== this.props.defaultValue) {
+        if (prevProps.defaultValue !== this.props.defaultValue
+            || prevProps.isComposerFullSize !== this.props.isComposerFullSize) {
             this.updateNumberOfLines();
         }
 
@@ -178,22 +189,6 @@ class Composer extends React.Component {
         this.textInput.removeEventListener('wheel', this.handleWheel);
     }
 
-    /**
-     * Calculates the max number of lines the text input can have
-     *
-     * @param {Number} lineHeight
-     * @param {Number} paddingTopAndBottom
-     * @param {Number} scrollHeight
-     *
-     * @returns {Number}
-     */
-    getNumberOfLines(lineHeight, paddingTopAndBottom, scrollHeight) {
-        const maxLines = this.props.maxLines;
-        let newNumberOfLines = Math.ceil((scrollHeight - paddingTopAndBottom) / lineHeight);
-        newNumberOfLines = maxLines <= 0 ? newNumberOfLines : Math.min(newNumberOfLines, maxLines);
-        return newNumberOfLines;
-    }
-
     /**
      * Handles all types of drag-N-drop events on the composer
      *
@@ -328,16 +323,21 @@ class Composer extends React.Component {
      * divide by line height to get the total number of rows for the textarea.
      */
     updateNumberOfLines() {
-        const computedStyle = window.getComputedStyle(this.textInput);
-        const lineHeight = parseInt(computedStyle.lineHeight, 10) || 20;
-        const paddingTopAndBottom = parseInt(computedStyle.paddingBottom, 10)
-            + parseInt(computedStyle.paddingTop, 10);
+        // Hide the composer expand button so we can get an accurate reading of
+        // the height of the text input
+        this.props.setIsFullComposerAvailable(false);
 
         // We have to reset the rows back to the minimum before updating so that the scrollHeight is not
         // affected by the previous row setting. If we don't, rows will be added but not removed on backspace/delete.
         this.setState({numberOfLines: 1}, () => {
+            const computedStyle = window.getComputedStyle(this.textInput);
+            const lineHeight = parseInt(computedStyle.lineHeight, 10) || 20;
+            const paddingTopAndBottom = parseInt(computedStyle.paddingBottom, 10)
+            + parseInt(computedStyle.paddingTop, 10);
+            const numberOfLines = getNumberOfLines(this.props.maxLines, lineHeight, paddingTopAndBottom, this.textInput.scrollHeight);
+            updateIsFullComposerAvailable(this.props, numberOfLines);
             this.setState({
-                numberOfLines: this.getNumberOfLines(lineHeight, paddingTopAndBottom, this.textInput.scrollHeight),
+                numberOfLines,
             });
         });
     }

src/components/Icon/Expensicons.js

@@ -16,13 +16,15 @@ import CircleHourglass from '../../../assets/images/circle-hourglass.svg';
 import Clipboard from '../../../assets/images/clipboard.svg';
 import Close from '../../../assets/images/close.svg';
 import ClosedSign from '../../../assets/images/closed-sign.svg';
+import Collapse from '../../../assets/images/collapse.svg';
 import Concierge from '../../../assets/images/concierge.svg';
 import CreditCard from '../../../assets/images/creditcard.svg';
 import DownArrow from '../../../assets/images/down.svg';
 import Download from '../../../assets/images/download.svg';
 import Emoji from '../../../assets/images/emoji.svg';
 import Exclamation from '../../../assets/images/exclamation.svg';
 import Exit from '../../../assets/images/exit.svg';
+import Expand from '../../../assets/images/expand.svg';
 import Eye from '../../../assets/images/eye.svg';
 import EyeDisabled from '../../../assets/images/eye-disabled.svg';
 import ExpensifyCard from '../../../assets/images/expensifycard.svg';
@@ -102,6 +104,7 @@ export {
     Clipboard,
     Close,
     ClosedSign,
+    Collapse,
     Concierge,
     Connect,
     CreditCard,
@@ -112,6 +115,7 @@ export {
     Emoji,
     Exclamation,
     Exit,
+    Expand,
     Eye,
     EyeDisabled,
     ExpensifyCard,

src/languages/en.js

@@ -164,6 +164,8 @@ export default {
         localTime: ({user, time}) => `It's ${time} for ${user}`,
         edited: '(edited)',
         emoji: 'Emoji',
+        collapse: 'Collapse',
+        expand: 'Expand',
     },
     reportActionContextMenu: {
         copyToClipboard: 'Copy to clipboard',

src/languages/es.js

@@ -164,6 +164,8 @@ export default {
         localTime: ({user, time}) => `Son las ${time} para ${user}`,
         edited: '(editado)',
         emoji: 'Emoji',
+        collapse: 'Colapsar',
+        expand: 'Expandir',
     },
     reportActionContextMenu: {
         copyToClipboard: 'Copiar al portapapeles',

src/libs/ComposerUtils/index.js

@@ -0,0 +1,17 @@
+/**
+ * Get the current number of lines in the composer
+ *
+ * @param {Number} maxLines
+ * @param {Number} lineHeight
+ * @param {Number} paddingTopAndBottom
+ * @param {Number} scrollHeight
+ *
+ * @returns {Number}
+ */
+function getNumberOfLines(maxLines, lineHeight, paddingTopAndBottom, scrollHeight) {
+    let newNumberOfLines = Math.ceil((scrollHeight - paddingTopAndBottom) / lineHeight);
+    newNumberOfLines = maxLines <= 0 ? newNumberOfLines : Math.min(newNumberOfLines, maxLines);
+    return newNumberOfLines;
+}
+
+export default getNumberOfLines;