Merge pull request #24620 from margelo/feat/##23138-clear-after-status

Status clear after

src/CONST.ts

@@ -2902,6 +2902,10 @@ const CONST = {
             NAVIGATE: 'NAVIGATE',
         },
     },
+    TIME_PERIOD: {
+        AM: 'AM',
+        PM: 'PM',
+    },
     INDENTS: '    ',
     PARENT_CHILD_SEPARATOR: ': ',
     CATEGORY_LIST_THRESHOLD: 8,
@@ -2911,7 +2915,7 @@ const CONST = {
         SBE: 'SbeDemoSetup',
         MONEY2020: 'Money2020DemoSetup',
     },
-
+    COLON: ':',
     MAPBOX: {
         PADDING: 50,
         DEFAULT_ZOOM: 10,

src/ONYXKEYS.ts

@@ -334,10 +334,10 @@ const ONYXKEYS = {
         WAYPOINT_FORM_DRAFT: 'waypointFormDraft',
         SETTINGS_STATUS_SET_FORM: 'settingsStatusSetForm',
         SETTINGS_STATUS_SET_FORM_DRAFT: 'settingsStatusSetFormDraft',
-        SETTINGS_STATUS_CLEAR_AFTER_FORM: 'settingsStatusClearAfterForm',
-        SETTINGS_STATUS_CLEAR_AFTER_FORM_DRAFT: 'settingsStatusClearAfterFormDraft',
         SETTINGS_STATUS_SET_CLEAR_AFTER_FORM: 'settingsStatusSetClearAfterForm',
         SETTINGS_STATUS_SET_CLEAR_AFTER_FORM_DRAFT: 'settingsStatusSetClearAfterFormDraft',
+        SETTINGS_STATUS_CLEAR_DATE_FORM: 'settingsStatusClearDateForm',
+        SETTINGS_STATUS_CLEAR_DATE_FORM_DRAFT: 'settingsStatusClearDateFormDraft',
         PRIVATE_NOTES_FORM: 'privateNotesForm',
         PRIVATE_NOTES_FORM_DRAFT: 'privateNotesFormDraft',
         I_KNOW_A_TEACHER_FORM: 'iKnowTeacherForm',
@@ -508,8 +508,8 @@ type OnyxValues = {
     [ONYXKEYS.FORMS.WAYPOINT_FORM_DRAFT]: OnyxTypes.Form;
     [ONYXKEYS.FORMS.SETTINGS_STATUS_SET_FORM]: OnyxTypes.Form;
     [ONYXKEYS.FORMS.SETTINGS_STATUS_SET_FORM_DRAFT]: OnyxTypes.Form;
-    [ONYXKEYS.FORMS.SETTINGS_STATUS_CLEAR_AFTER_FORM]: OnyxTypes.Form;
-    [ONYXKEYS.FORMS.SETTINGS_STATUS_CLEAR_AFTER_FORM_DRAFT]: OnyxTypes.Form;
+    [ONYXKEYS.FORMS.SETTINGS_STATUS_CLEAR_DATE_FORM]: OnyxTypes.Form;
+    [ONYXKEYS.FORMS.SETTINGS_STATUS_CLEAR_DATE_FORM_DRAFT]: OnyxTypes.Form;
     [ONYXKEYS.FORMS.SETTINGS_STATUS_SET_CLEAR_AFTER_FORM]: OnyxTypes.Form;
     [ONYXKEYS.FORMS.SETTINGS_STATUS_SET_CLEAR_AFTER_FORM_DRAFT]: OnyxTypes.Form;
     [ONYXKEYS.FORMS.PRIVATE_NOTES_FORM]: OnyxTypes.Form;

src/ROUTES.ts

@@ -140,7 +140,9 @@ const ROUTES = {
         getRoute: (backTo?: string) => getUrlWithBackToParam('settings/security/two-factor-auth', backTo),
     },
     SETTINGS_STATUS: 'settings/profile/status',
-    SETTINGS_STATUS_SET: 'settings/profile/status/set',
+    SETTINGS_STATUS_CLEAR_AFTER: 'settings/profile/status/clear-after',
+    SETTINGS_STATUS_CLEAR_AFTER_DATE: 'settings/profile/status/clear-after/date',
+    SETTINGS_STATUS_CLEAR_AFTER_TIME: 'settings/profile/status/clear-after/time',
 
     KEYBOARD_SHORTCUTS: 'keyboard-shortcuts',
 

src/SCREENS.ts

@@ -37,8 +37,10 @@ const SCREENS = {
             CONTACT_METHODS: 'Settings_ContactMethods',
             CONTACT_METHOD_DETAILS: 'Settings_ContactMethodDetails',
             NEW_CONTACT_METHOD: 'Settings_NewContactMethod',
+            STATUS_CLEAR_AFTER: 'Settings_Status_Clear_After',
+            STATUS_CLEAR_AFTER_DATE: 'Settings_Status_Clear_After_Date',
+            STATUS_CLEAR_AFTER_TIME: 'Settings_Status_Clear_After_Time',
             STATUS: 'Settings_Status',
-            STATUS_SET: 'Settings_Status_Set',
             PRONOUNS: 'Settings_Pronouns',
             TIMEZONE: 'Settings_Timezone',
             TIMEZONE_SELECT: 'Settings_Timezone_Select',

src/components/AmountTextInput.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import refPropTypes from './refPropTypes';
@@ -27,6 +28,12 @@ const propTypes = {
     /** Function to call when selection in text input is changed */
     onSelectionChange: PropTypes.func,
 
+    /** Style for the input */
+    style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
+
+    /** Style for the container */
+    containerStyles: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
+
     /** Function to call to handle key presses in the text input */
     onKeyPress: PropTypes.func,
 };
@@ -36,16 +43,19 @@ const defaultProps = {
     selection: undefined,
     onSelectionChange: () => {},
     onKeyPress: () => {},
+    style: {},
+    containerStyles: {},
 };
 
 function AmountTextInput(props) {
     const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
     return (
         <TextInput
             disableKeyboard
             autoGrow
             hideFocusedState
-            inputStyle={[styles.iouAmountTextInput, styles.p0, styles.noLeftBorderRadius, styles.noRightBorderRadius]}
+            inputStyle={[styles.iouAmountTextInput, styles.p0, styles.noLeftBorderRadius, styles.noRightBorderRadius, ...StyleUtils.parseStyleAsArray(props.style)]}
             textInputContainerStyles={[styles.borderNone, styles.noLeftBorderRadius, styles.noRightBorderRadius]}
             onChangeText={props.onChangeAmount}
             ref={props.forwardedRef}
@@ -57,6 +67,7 @@ function AmountTextInput(props) {
             onSelectionChange={props.onSelectionChange}
             role={CONST.ROLE.PRESENTATION}
             onKeyPress={props.onKeyPress}
+            containerStyles={[...StyleUtils.parseStyleAsArray(props.containerStyles)]}
         />
     );
 }

src/components/BigNumberPad.tsx

@@ -15,6 +15,9 @@ type BigNumberPadProps = {
 
     /** Used to locate this view from native classes. */
     id?: string;
+
+    /** Whether long press is disabled */
+    isLongPressDisabled: boolean;
 };
 
 const padNumbers = [
@@ -24,7 +27,7 @@ const padNumbers = [
     ['.', '0', '<'],
 ] as const;
 
-function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, id = 'numPadView'}: BigNumberPadProps) {
+function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, id = 'numPadView', isLongPressDisabled = false}: BigNumberPadProps) {
     const {toLocaleDigit} = useLocalize();
 
     const styles = useThemeStyles();
@@ -85,6 +88,7 @@ function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, i
                                 onMouseDown={(e) => {
                                     e.preventDefault();
                                 }}
+                                isLongPressDisabled={isLongPressDisabled}
                             />
                         );
                     })}

src/components/Button/index.tsx

@@ -106,6 +106,9 @@ type ButtonProps = (ButtonWithText | ChildrenProps) & {
     /** Should enable the haptic feedback? */
     shouldEnableHapticFeedback?: boolean;
 
+    /** Should disable the long press? */
+    isLongPressDisabled?: boolean;
+
     /** Id to use for this button */
     id?: string;
 
@@ -149,6 +152,7 @@ function Button(
         shouldRemoveRightBorderRadius = false,
         shouldRemoveLeftBorderRadius = false,
         shouldEnableHapticFeedback = false,
+        isLongPressDisabled = false,
 
         id = '',
         accessibilityLabel = '',
@@ -255,6 +259,9 @@ function Button(
                 return onPress(event);
             }}
             onLongPress={(event) => {
+                if (isLongPressDisabled) {
+                    return;
+                }
                 if (shouldEnableHapticFeedback) {
                     HapticFeedback.longPress();
                 }

src/components/EmojiPicker/EmojiPickerButtonDropdown.js

@@ -5,7 +5,7 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Text from '@components/Text';
-import Tooltip from '@components/Tooltip';
+import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import getButtonState from '@libs/getButtonState';
 import useStyleUtils from '@styles/useStyleUtils';
@@ -47,7 +47,7 @@ function EmojiPickerButtonDropdown(props) {
         <Tooltip text={props.translate('reportActionCompose.emoji')}>
             <PressableWithoutFeedback
                 ref={emojiPopoverAnchor}
-                style={styles.emojiPickerButtonDropdown}
+                style={[styles.emojiPickerButtonDropdown, props.style]}
                 disabled={props.isDisabled}
                 onPress={onPress}
                 id="emojiDropdownButton"

src/components/Form.js

@@ -1,6 +1,6 @@
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {Keyboard, ScrollView, StyleSheet} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -26,7 +26,7 @@ const propTypes = {
     formID: PropTypes.string.isRequired,
 
     /** Text to be displayed in the submit button */
-    submitButtonText: PropTypes.string.isRequired,
+    submitButtonText: PropTypes.string,
 
     /** Controls the submit button's visibility */
     isSubmitButtonVisible: PropTypes.bool,
@@ -88,6 +88,9 @@ const propTypes = {
     /** Information about the network */
     network: networkPropTypes.isRequired,
 
+    /** Style for the error message for submit button */
+    errorMessageStyle: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
+
     ...withLocalizePropTypes,
 };
 
@@ -104,11 +107,13 @@ const defaultProps = {
     shouldValidateOnBlur: true,
     footerContent: null,
     style: [],
+    errorMessageStyle: [],
     submitButtonStyles: [],
     validate: () => ({}),
+    submitButtonText: '',
 };
 
-function Form(props) {
+const Form = forwardRef((props, forwardedRef) => {
     const styles = useThemeStyles();
     const [errors, setErrors] = useState({});
     const [inputValues, setInputValues] = useState(() => ({...props.draftValues}));
@@ -245,6 +250,30 @@ function Form(props) {
         onSubmit(trimmedStringValues);
     }, [props.formState.isLoading, props.network.isOffline, props.enabledWhenOffline, inputValues, onValidate, onSubmit]);
 
+    /**
+     * Resets the form
+     */
+    const resetForm = useCallback(
+        (optionalValue) => {
+            _.each(inputValues, (inputRef, inputID) => {
+                setInputValues((prevState) => {
+                    const copyPrevState = _.clone(prevState);
+
+                    touchedInputs.current[inputID] = false;
+                    copyPrevState[inputID] = optionalValue[inputID] || '';
+
+                    return copyPrevState;
+                });
+            });
+            setErrors({});
+        },
+        [inputValues],
+    );
+
+    useImperativeHandle(forwardedRef, () => ({
+        resetForm,
+    }));
+
     /**
      * Loops over Form's children and automatically supplies Form props to them
      *
@@ -464,7 +493,9 @@ function Form(props) {
                         containerStyles={[styles.mh0, styles.mt5, styles.flex1, ...props.submitButtonStyles]}
                         enabledWhenOffline={props.enabledWhenOffline}
                         isSubmitActionDangerous={props.isSubmitActionDangerous}
+                        useSmallerSubmitButtonSize={props.useSmallerSubmitButtonSize}
                         disablePressOnEnter
+                        errorMessageStyle={props.errorMessageStyle}
                     />
                 )}
             </FormSubmit>
@@ -474,6 +505,8 @@ function Form(props) {
             props.style,
             props.isSubmitButtonVisible,
             props.submitButtonText,
+            props.useSmallerSubmitButtonSize,
+            props.errorMessageStyle,
             props.formState.errorFields,
             props.formState.isLoading,
             props.footerContent,
@@ -539,7 +572,7 @@ function Form(props) {
             }
         </SafeAreaConsumer>
     );
-}
+});
 
 Form.displayName = 'Form';
 Form.propTypes = propTypes;