add buttonStyle in Form

margelo · Aug 23, 2023 · f532d24 · f532d24
1 parent 992b4fc
commit f532d24
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 17 deletions.
diff --git a/src/components/Form.js b/src/components/Form.js
@@ -82,6 +82,9 @@ const propTypes = {
     /** Information about the network */
     network: networkPropTypes.isRequired,
 
+    /** Style for the button */
+    submitButtonStyle: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
+
     ...withLocalizePropTypes,
 };
 
@@ -99,6 +102,7 @@ const defaultProps = {
     footerContent: null,
     style: [],
     validate: () => ({}),
+    submitButtonStyle: {}
 };
 
 function Form(props) {
@@ -397,6 +401,7 @@ function Form(props) {
                         containerStyles={[styles.mh0, styles.mt5, styles.flex1]}
                         enabledWhenOffline={props.enabledWhenOffline}
                         isSubmitActionDangerous={props.isSubmitActionDangerous}
+                        buttonStyle={props.submitButtonStyle}
                         disablePressOnEnter
                     />
                 )}
@@ -419,6 +424,7 @@ function Form(props) {
             props.isSubmitActionDangerous,
             props.isSubmitButtonVisible,
             props.submitButtonText,
+            props.submitButtonStyle,
         ],
     );
 

diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
@@ -46,6 +46,9 @@ const propTypes = {
 
     /** Custom content to display in the footer after submit button */
     footerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+
+    /** Style for the button */
+    buttonStyle: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 };
 
 const defaultProps = {
@@ -59,6 +62,7 @@ const defaultProps = {
     disablePressOnEnter: false,
     isSubmitActionDangerous: false,
     footerContent: null,
+    buttonStyle: {},
 };
 
 function FormAlertWithSubmitButton(props) {
@@ -79,15 +83,15 @@ function FormAlertWithSubmitButton(props) {
                             success
                             isDisabled
                             text={props.buttonText}
-                            style={buttonMarginStyle}
+                            style={[buttonMarginStyle, props.buttonStyle]}
                             danger={props.isSubmitActionDangerous}
                         />
                     ) : (
                         <Button
                             success
                             pressOnEnter={!props.disablePressOnEnter}
                             text={props.buttonText}
-                            style={buttonMarginStyle}
+                            style={[buttonMarginStyle, props.buttonStyle]}
                             onPress={props.onSubmit}
                             isDisabled={props.isDisabled}
                             isLoading={props.isLoading}

diff --git a/src/components/TimePicker.js b/src/components/TimePicker.js
@@ -93,6 +93,7 @@ function TimePicker({forwardedRef, onSubmitButtonPress, defaultValue}) {
 
     const hourInputRef = useRef(null);
     const minuteInputRef = useRef(null);
+    const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
 
     /**
      * Submit amount and navigate to a proper page
@@ -302,6 +303,17 @@ function TimePicker({forwardedRef, onSubmitButtonPress, defaultValue}) {
         };
     }, [amPmValue]);
 
+    const numberPad = useCallback(() => {
+        if (!canUseTouchScreen) return null;
+        return (
+            <BigNumberPad
+                nativeID={NUM_PAD_VIEW_ID}
+                numberPressed={updateAmountNumberPad}
+                isDisabledLongPress
+            />
+        );
+    }, [canUseTouchScreen, updateAmountNumberPad]);
+
     return (
         <>
             <View style={[styles.flex1, styles.w100, styles.alignItemsCenter, styles.justifyContentCenter]}>
@@ -362,7 +374,7 @@ function TimePicker({forwardedRef, onSubmitButtonPress, defaultValue}) {
                         text="AM"
                         onLongPress={() => {}}
                         onPress={() => {
-                            setAmPmValue('AM');
+                            setAmPmValue(CONST.TIME_PERIOD.AM);
                         }}
                         onPressOut={() => {}}
                         onMouseDown={(e) => e.preventDefault()}
@@ -373,7 +385,7 @@ function TimePicker({forwardedRef, onSubmitButtonPress, defaultValue}) {
                         text="PM"
                         onLongPress={() => {}}
                         onPress={() => {
-                            setAmPmValue('PM');
+                            setAmPmValue(CONST.TIME_PERIOD.PM);
                         }}
                         onPressOut={() => {}}
                         onMouseDown={(e) => e.preventDefault()}
@@ -384,13 +396,7 @@ function TimePicker({forwardedRef, onSubmitButtonPress, defaultValue}) {
                 style={[styles.w100, styles.justifyContentEnd, styles.pageWrapper]}
                 nativeID={NUM_PAD_CONTAINER_VIEW_ID}
             >
-                {DeviceCapabilities.canUseTouchScreen() ? (
-                    <BigNumberPad
-                        nativeID={NUM_PAD_VIEW_ID}
-                        numberPressed={updateAmountNumberPad}
-                        isDisabledLongPress
-                    />
-                ) : null}
+                {numberPad()}
                 <Button
                     success
                     style={[styles.w100, styles.mt5]}

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -1,6 +1,6 @@
 import {defaultStyles as defaultPickerStyles} from 'react-native-picker-select/src/styles';
 import lodashClamp from 'lodash/clamp';
-import { StyleSheet } from 'react-native';
+import {StyleSheet} from 'react-native';
 import fontFamily from './fontFamily';
 import addOutlineWidth from './addOutlineWidth';
 import themeColors from './themes/default';
@@ -3794,11 +3794,10 @@ const styles = {
         marginTop: 40,
     },
     selectionListRadioSeparator: {
-      height: StyleSheet.hairlineWidth,
-      backgroundColor: themeColors.border,
-      marginHorizontal: 20,
-
-    }
+        height: StyleSheet.hairlineWidth,
+        backgroundColor: themeColors.border,
+        marginHorizontal: 20,
+    },
 };
 
 export default styles;