diff --git a/src/components/Form.js b/src/components/Form.js
index eb6945f6ec78..b60678382041 100644
--- 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
index 9c941fa9b967..ca9494af236c 100644
--- 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,7 +83,7 @@ function FormAlertWithSubmitButton(props) {
success
isDisabled
text={props.buttonText}
- style={buttonMarginStyle}
+ style={[buttonMarginStyle, props.buttonStyle]}
danger={props.isSubmitActionDangerous}
/>
) : (
@@ -87,7 +91,7 @@ function FormAlertWithSubmitButton(props) {
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
index b9e5b8b748b4..27a8401a2e51 100644
--- 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 (
+
+ );
+ }, [canUseTouchScreen, updateAmountNumberPad]);
+
return (
<>
@@ -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() ? (
-
- ) : null}
+ {numberPad()}