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()}