From 665d66c1d5373290b691fad96738a84a72670a5d Mon Sep 17 00:00:00 2001 From: Mohammad Luthfi Fathur Rahman Date: Wed, 1 Jun 2022 11:27:51 +0700 Subject: [PATCH 01/11] create HOC for button state complete --- src/components/withButtonStateComplete.js | 80 +++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 src/components/withButtonStateComplete.js diff --git a/src/components/withButtonStateComplete.js b/src/components/withButtonStateComplete.js new file mode 100644 index 000000000000..de92df50302e --- /dev/null +++ b/src/components/withButtonStateComplete.js @@ -0,0 +1,80 @@ +import React, {Component} from 'react'; +import PropTypes from 'prop-types'; +import getComponentDisplayName from '../libs/getComponentDisplayName'; + +const withButtonStateCompletePropTypes = { + /** A value whether the button state is complete */ + isButtonStateComplete: PropTypes.bool.isRequired, + + /** A function to call to change the complete state */ + toggleButtonStateComplete: PropTypes.func.isRequired, +}; + +export default function (WrappedComponent) { + class WithButtonStateComplete extends Component { + constructor(props) { + super(props); + + this.state = { + isButtonStateComplete: false, + }; + this.toggleButtonStateComplete = this.toggleButtonStateComplete.bind(this); + } + + componentWillUnmount() { + if (!this.resetButtonStateCompleteTimer) { + return; + } + + clearTimeout(this.resetButtonStateCompleteTimer); + } + + /** + * @param {*} autoReset autoReset + */ + toggleButtonStateComplete(autoReset = false) { + this.setState({ + isButtonStateComplete: true, + }); + + if (autoReset) { + this.resetButtonStateCompleteTimer = setTimeout(() => { + this.setState({ + isButtonStateComplete: false, + }); + }, 1800); + } + } + + render() { + return ( + + ); + } + } + + WithButtonStateComplete.displayName = `WithButtonStateComplete(${getComponentDisplayName(WrappedComponent)})`; + WithButtonStateComplete.propTypes = { + forwardedRef: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.shape({current: PropTypes.instanceOf(React.Component)}), + ]), + }; + WithButtonStateComplete.defaultProps = { + forwardedRef: undefined, + }; + + return React.forwardRef((props, ref) => ( + // eslint-disable-next-line react/jsx-props-no-spreading + + )); +} + +export { + withButtonStateCompletePropTypes, +}; From 227afbd92ea05c7964d9c40a119213a848882bd4 Mon Sep 17 00:00:00 2001 From: Mohammad Luthfi Fathur Rahman Date: Wed, 1 Jun 2022 11:30:23 +0700 Subject: [PATCH 02/11] updating the component to use the HOC and remove unused code --- src/components/ContextMenuItem.js | 36 +++++++++++-------------------- 1 file changed, 12 insertions(+), 24 deletions(-) diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js index 339e36afd6eb..4609a051f204 100644 --- a/src/components/ContextMenuItem.js +++ b/src/components/ContextMenuItem.js @@ -7,6 +7,7 @@ import Icon from './Icon'; import styles from '../styles/styles'; import * as StyleUtils from '../styles/StyleUtils'; import getButtonState from '../libs/getButtonState'; +import withButtonStateComplete, {withButtonStateCompletePropTypes} from './withButtonStateComplete'; const propTypes = { /** Icon Component */ @@ -32,6 +33,8 @@ const propTypes = { /** A description text to show under the title */ description: PropTypes.string, + + ...withButtonStateCompletePropTypes, }; const defaultProps = { @@ -45,25 +48,15 @@ const defaultProps = { class ContextMenuItem extends Component { constructor(props) { super(props); - this.state = { - success: false, - }; - this.triggerPressAndUpdateSuccess = this.triggerPressAndUpdateSuccess.bind(this); - } - componentWillUnmount() { - if (!this.successResetTimer) { - return; - } - - clearTimeout(this.successResetTimer); + this.triggerPressAndUpdateSuccess = this.triggerPressAndUpdateSuccess.bind(this); } /** * Called on button press and mark the run */ triggerPressAndUpdateSuccess() { - if (this.state.success) { + if (this.props.isButtonStateComplete) { return; } this.props.onPress(); @@ -71,18 +64,13 @@ class ContextMenuItem extends Component { // We only set the success state when we have icon or text to represent the success state // We may want to replace this check by checking the Result from OnPress Callback in future. if (this.props.successIcon || this.props.successText) { - this.setState({ - success: true, - }); - if (this.props.autoReset) { - this.successResetTimer = setTimeout(() => this.setState({success: false}), 1800); - } + this.props.toggleButtonStateComplete(this.props.autoReset); } } render() { - const icon = this.state.success ? this.props.successIcon || this.props.icon : this.props.icon; - const text = this.state.success ? this.props.successText || this.props.text : this.props.text; + const icon = this.props.isButtonStateComplete ? this.props.successIcon || this.props.icon : this.props.icon; + const text = this.props.isButtonStateComplete ? this.props.successText || this.props.text : this.props.text; return ( this.props.isMini ? ( @@ -94,14 +82,14 @@ class ContextMenuItem extends Component { style={ ({hovered, pressed}) => [ styles.reportActionContextMenuMiniButton, - StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, this.state.success)), + StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, this.props.isButtonStateComplete)), ] } > {({hovered, pressed}) => ( )} @@ -112,7 +100,7 @@ class ContextMenuItem extends Component { icon={icon} onPress={this.triggerPressAndUpdateSuccess} wrapperStyle={styles.pr9} - success={this.state.success} + success={this.props.isButtonStateComplete} description={this.props.description} /> ) @@ -123,4 +111,4 @@ class ContextMenuItem extends Component { ContextMenuItem.propTypes = propTypes; ContextMenuItem.defaultProps = defaultProps; -export default ContextMenuItem; +export default withButtonStateComplete(ContextMenuItem); From ff213e3ccd8f1783d0ad8cb5fd2302ca630d888d Mon Sep 17 00:00:00 2001 From: Mohammad Luthfi Fathur Rahman Date: Wed, 1 Jun 2022 11:31:16 +0700 Subject: [PATCH 03/11] use HOC, updating the component to use class based, replace TouchableOpacity with Pressable, change icon download base on the complete state --- src/components/HeaderWithCloseButton.js | 203 ++++++++++++++---------- 1 file changed, 117 insertions(+), 86 deletions(-) diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js index ef8588709c34..baecf5475dae 100755 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -1,7 +1,7 @@ -import React from 'react'; +import React, {Component} from 'react'; import PropTypes from 'prop-types'; import { - View, TouchableOpacity, Keyboard, + View, Keyboard, Pressable, } from 'react-native'; import styles from '../styles/styles'; import Header from './Header'; @@ -13,6 +13,10 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize'; import Tooltip from './Tooltip'; import ThreeDotsMenu, {ThreeDotsMenuItemPropTypes} from './ThreeDotsMenu'; import VirtualKeyboard from '../libs/VirtualKeyboard'; +import getButtonState from '../libs/getButtonState'; +import * as StyleUtils from '../styles/StyleUtils'; +import withButtonStateComplete, {withButtonStateCompletePropTypes} from './withButtonStateComplete'; +import compose from '../libs/compose'; const propTypes = { /** Title of the Header */ @@ -75,6 +79,8 @@ const propTypes = { }), ...withLocalizePropTypes, + + ...withButtonStateCompletePropTypes, }; const defaultProps = { @@ -100,94 +106,119 @@ const defaultProps = { }, }; -const HeaderWithCloseButton = props => ( - - - {props.shouldShowBackButton && ( - - { - if (VirtualKeyboard.isOpen()) { - Keyboard.dismiss(); - } - props.onBackButtonPress(); - }} - style={[styles.touchableButtonImage]} - > - - - - )} -
- - { - props.shouldShowDownloadButton && ( - - - - - - - ) - } - - {props.shouldShowGetAssistanceButton - && ( - - Navigation.navigate(ROUTES.getGetAssistanceRoute(props.guidesCallTaskID))} - style={[styles.touchableButtonImage, styles.mr0]} - accessibilityRole="button" - accessibilityLabel={props.translate('getAssistancePage.questionMarkButtonTooltip')} - > - - - - )} - - {props.shouldShowThreeDotsButton && ( - + + {this.props.shouldShowBackButton && ( + + { + if (VirtualKeyboard.isOpen()) { + Keyboard.dismiss(); + } + this.props.onBackButtonPress(); + }} + style={[styles.touchableButtonImage]} + > + + + + )} +
- )} - - {props.shouldShowCloseButton - && ( - - - - - - )} + + { + this.props.shouldShowDownloadButton && ( + + + + + + + ) + } + + {this.props.shouldShowGetAssistanceButton + && ( + + Navigation.navigate(ROUTES.getGetAssistanceRoute(this.props.guidesCallTaskID))} + style={[styles.touchableButtonImage, styles.mr0]} + accessibilityRole="button" + accessibilityLabel={this.props.translate('getAssistancePage.questionMarkButtonTooltip')} + > + + + + )} + + {this.props.shouldShowThreeDotsButton && ( + + )} + + {this.props.shouldShowCloseButton + && ( + + + + + + )} + + - - -); + ); + } +} HeaderWithCloseButton.propTypes = propTypes; HeaderWithCloseButton.defaultProps = defaultProps; HeaderWithCloseButton.displayName = 'HeaderWithCloseButton'; -export default withLocalize(HeaderWithCloseButton); +export default compose( + withLocalize, + withButtonStateComplete, +)(HeaderWithCloseButton); From 7fbf84546d9690cc99c6c9163424f18356dbaa97 Mon Sep 17 00:00:00 2001 From: mollfpr Date: Fri, 3 Jun 2022 17:17:24 +0700 Subject: [PATCH 04/11] Update src/components/withButtonStateComplete.js Co-authored-by: Rushat Gabhane --- src/components/withButtonStateComplete.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/withButtonStateComplete.js b/src/components/withButtonStateComplete.js index de92df50302e..3acc64043a78 100644 --- a/src/components/withButtonStateComplete.js +++ b/src/components/withButtonStateComplete.js @@ -30,7 +30,7 @@ export default function (WrappedComponent) { } /** - * @param {*} autoReset autoReset + * @param {Boolean} [resetAfterDelay=false] Impose delay before toggling state */ toggleButtonStateComplete(autoReset = false) { this.setState({ From 8c5af6918aefa359af2209661a3f510834787996 Mon Sep 17 00:00:00 2001 From: Mohammad Luthfi Fathur Rahman Date: Fri, 3 Jun 2022 21:58:18 +0700 Subject: [PATCH 05/11] renaming --- ...plete.js => withDelayToggleButtonState.js} | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) rename src/components/{withButtonStateComplete.js => withDelayToggleButtonState.js} (76%) diff --git a/src/components/withButtonStateComplete.js b/src/components/withDelayToggleButtonState.js similarity index 76% rename from src/components/withButtonStateComplete.js rename to src/components/withDelayToggleButtonState.js index 3acc64043a78..30ee0cea074c 100644 --- a/src/components/withButtonStateComplete.js +++ b/src/components/withDelayToggleButtonState.js @@ -2,7 +2,7 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; import getComponentDisplayName from '../libs/getComponentDisplayName'; -const withButtonStateCompletePropTypes = { +const withDelayToggleButtonStatePropTypes = { /** A value whether the button state is complete */ isButtonStateComplete: PropTypes.bool.isRequired, @@ -11,7 +11,7 @@ const withButtonStateCompletePropTypes = { }; export default function (WrappedComponent) { - class WithButtonStateComplete extends Component { + class WithDelayToggleButtonState extends Component { constructor(props) { super(props); @@ -30,14 +30,14 @@ export default function (WrappedComponent) { } /** - * @param {Boolean} [resetAfterDelay=false] Impose delay before toggling state + * @param {Boolean} [resetAfterDelay=true] Impose delay before toggling state */ - toggleButtonStateComplete(autoReset = false) { + toggleButtonStateComplete(resetAfterDelay = true) { this.setState({ isButtonStateComplete: true, }); - if (autoReset) { + if (resetAfterDelay) { this.resetButtonStateCompleteTimer = setTimeout(() => { this.setState({ isButtonStateComplete: false, @@ -58,23 +58,23 @@ export default function (WrappedComponent) { } } - WithButtonStateComplete.displayName = `WithButtonStateComplete(${getComponentDisplayName(WrappedComponent)})`; - WithButtonStateComplete.propTypes = { + WithDelayToggleButtonState.displayName = `WithDelayToggleButtonState(${getComponentDisplayName(WrappedComponent)})`; + WithDelayToggleButtonState.propTypes = { forwardedRef: PropTypes.oneOfType([ PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)}), ]), }; - WithButtonStateComplete.defaultProps = { + WithDelayToggleButtonState.defaultProps = { forwardedRef: undefined, }; return React.forwardRef((props, ref) => ( // eslint-disable-next-line react/jsx-props-no-spreading - + )); } export { - withButtonStateCompletePropTypes, + withDelayToggleButtonStatePropTypes, }; From 992d302166b582ca859d6dfa33af9d353ab1a0c0 Mon Sep 17 00:00:00 2001 From: Mohammad Luthfi Fathur Rahman Date: Fri, 3 Jun 2022 21:58:49 +0700 Subject: [PATCH 06/11] updating to use new name of HOC --- src/components/ContextMenuItem.js | 6 +++--- src/components/HeaderWithCloseButton.js | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js index 4609a051f204..e577619b5c8f 100644 --- a/src/components/ContextMenuItem.js +++ b/src/components/ContextMenuItem.js @@ -7,7 +7,7 @@ import Icon from './Icon'; import styles from '../styles/styles'; import * as StyleUtils from '../styles/StyleUtils'; import getButtonState from '../libs/getButtonState'; -import withButtonStateComplete, {withButtonStateCompletePropTypes} from './withButtonStateComplete'; +import withDelayToggleButtonState, {withDelayToggleButtonStatePropTypes} from './withDelayToggleButtonState'; const propTypes = { /** Icon Component */ @@ -34,7 +34,7 @@ const propTypes = { /** A description text to show under the title */ description: PropTypes.string, - ...withButtonStateCompletePropTypes, + ...withDelayToggleButtonStatePropTypes, }; const defaultProps = { @@ -111,4 +111,4 @@ class ContextMenuItem extends Component { ContextMenuItem.propTypes = propTypes; ContextMenuItem.defaultProps = defaultProps; -export default withButtonStateComplete(ContextMenuItem); +export default withDelayToggleButtonState(ContextMenuItem); diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js index baecf5475dae..6f89331f8da5 100755 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -15,7 +15,7 @@ import ThreeDotsMenu, {ThreeDotsMenuItemPropTypes} from './ThreeDotsMenu'; import VirtualKeyboard from '../libs/VirtualKeyboard'; import getButtonState from '../libs/getButtonState'; import * as StyleUtils from '../styles/StyleUtils'; -import withButtonStateComplete, {withButtonStateCompletePropTypes} from './withButtonStateComplete'; +import withDelayToggleButtonState, {withDelayToggleButtonStatePropTypes} from './withDelayToggleButtonState'; import compose from '../libs/compose'; const propTypes = { @@ -80,7 +80,7 @@ const propTypes = { ...withLocalizePropTypes, - ...withButtonStateCompletePropTypes, + ...withDelayToggleButtonStatePropTypes, }; const defaultProps = { @@ -119,7 +119,7 @@ class HeaderWithCloseButton extends Component { } this.props.onDownloadButtonPress(); - this.props.toggleButtonStateComplete(true); + this.props.toggleButtonStateComplete(); } render() { @@ -220,5 +220,5 @@ HeaderWithCloseButton.displayName = 'HeaderWithCloseButton'; export default compose( withLocalize, - withButtonStateComplete, + withDelayToggleButtonState, )(HeaderWithCloseButton); From 356db33d8a833d2eeff73132941893c5a0cc4c09 Mon Sep 17 00:00:00 2001 From: Mohammad Luthfi Fathur Rahman Date: Sat, 4 Jun 2022 20:51:12 +0700 Subject: [PATCH 07/11] renaming the state and the toggle function --- src/components/withDelayToggleButtonState.js | 32 +++++++++++--------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/src/components/withDelayToggleButtonState.js b/src/components/withDelayToggleButtonState.js index 30ee0cea074c..586bc566aba9 100644 --- a/src/components/withDelayToggleButtonState.js +++ b/src/components/withDelayToggleButtonState.js @@ -4,10 +4,10 @@ import getComponentDisplayName from '../libs/getComponentDisplayName'; const withDelayToggleButtonStatePropTypes = { /** A value whether the button state is complete */ - isButtonStateComplete: PropTypes.bool.isRequired, + isDelayButtonStateComplete: PropTypes.bool.isRequired, /** A function to call to change the complete state */ - toggleButtonStateComplete: PropTypes.func.isRequired, + toggleDelayButtonState: PropTypes.func.isRequired, }; export default function (WrappedComponent) { @@ -16,9 +16,9 @@ export default function (WrappedComponent) { super(props); this.state = { - isButtonStateComplete: false, + isDelayButtonStateComplete: false, }; - this.toggleButtonStateComplete = this.toggleButtonStateComplete.bind(this); + this.toggleDelayButtonState = this.toggleDelayButtonState.bind(this); } componentWillUnmount() { @@ -30,20 +30,22 @@ export default function (WrappedComponent) { } /** - * @param {Boolean} [resetAfterDelay=true] Impose delay before toggling state + * @param {Boolean} [resetAfterDelay] Impose delay before toggling state */ - toggleButtonStateComplete(resetAfterDelay = true) { + toggleDelayButtonState(resetAfterDelay) { this.setState({ - isButtonStateComplete: true, + isDelayButtonStateComplete: true, }); - if (resetAfterDelay) { - this.resetButtonStateCompleteTimer = setTimeout(() => { - this.setState({ - isButtonStateComplete: false, - }); - }, 1800); + if (!resetAfterDelay) { + return; } + + this.resetButtonStateCompleteTimer = setTimeout(() => { + this.setState({ + isDelayButtonStateComplete: false, + }); + }, 1800); } render() { @@ -51,8 +53,8 @@ export default function (WrappedComponent) { ); } From 66fcab91c85081be1762c151a7e0ca500981673c Mon Sep 17 00:00:00 2001 From: Mohammad Luthfi Fathur Rahman Date: Sat, 4 Jun 2022 20:51:32 +0700 Subject: [PATCH 08/11] updating the state and the toggle function --- src/components/ContextMenuItem.js | 17 +++++++---------- src/components/HeaderWithCloseButton.js | 6 +++--- 2 files changed, 10 insertions(+), 13 deletions(-) diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js index e577619b5c8f..725401a06140 100644 --- a/src/components/ContextMenuItem.js +++ b/src/components/ContextMenuItem.js @@ -52,11 +52,8 @@ class ContextMenuItem extends Component { this.triggerPressAndUpdateSuccess = this.triggerPressAndUpdateSuccess.bind(this); } - /** - * Called on button press and mark the run - */ triggerPressAndUpdateSuccess() { - if (this.props.isButtonStateComplete) { + if (this.props.isDelayButtonStateComplete) { return; } this.props.onPress(); @@ -64,13 +61,13 @@ class ContextMenuItem extends Component { // We only set the success state when we have icon or text to represent the success state // We may want to replace this check by checking the Result from OnPress Callback in future. if (this.props.successIcon || this.props.successText) { - this.props.toggleButtonStateComplete(this.props.autoReset); + this.props.toggleDelayButtonState(this.props.autoReset); } } render() { - const icon = this.props.isButtonStateComplete ? this.props.successIcon || this.props.icon : this.props.icon; - const text = this.props.isButtonStateComplete ? this.props.successText || this.props.text : this.props.text; + const icon = this.props.isDelayButtonStateComplete ? this.props.successIcon || this.props.icon : this.props.icon; + const text = this.props.isDelayButtonStateComplete ? this.props.successText || this.props.text : this.props.text; return ( this.props.isMini ? ( @@ -82,14 +79,14 @@ class ContextMenuItem extends Component { style={ ({hovered, pressed}) => [ styles.reportActionContextMenuMiniButton, - StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, this.props.isButtonStateComplete)), + StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, this.props.isDelayButtonStateComplete)), ] } > {({hovered, pressed}) => ( )} @@ -100,7 +97,7 @@ class ContextMenuItem extends Component { icon={icon} onPress={this.triggerPressAndUpdateSuccess} wrapperStyle={styles.pr9} - success={this.props.isButtonStateComplete} + success={this.props.isDelayButtonStateComplete} description={this.props.description} /> ) diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js index 6f89331f8da5..fbcfdee36f73 100755 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -114,12 +114,12 @@ class HeaderWithCloseButton extends Component { } triggerButtonCompleteAndDownload() { - if (this.props.isButtonStateComplete) { + if (this.props.isDelayButtonStateComplete) { return; } this.props.onDownloadButtonPress(); - this.props.toggleButtonStateComplete(); + this.props.toggleDelayButtonState(); } render() { @@ -164,7 +164,7 @@ class HeaderWithCloseButton extends Component { > From 712e85aedd7f3622f8a127ba551405ef04e5a82b Mon Sep 17 00:00:00 2001 From: Mohammad Luthfi Fathur Rahman Date: Mon, 13 Jun 2022 21:48:36 +0700 Subject: [PATCH 09/11] auto reset on HeaderWithCloseButton --- src/components/HeaderWithCloseButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js index fbcfdee36f73..d5434ab16e82 100755 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -119,7 +119,7 @@ class HeaderWithCloseButton extends Component { } this.props.onDownloadButtonPress(); - this.props.toggleDelayButtonState(); + this.props.toggleDelayButtonState(true); } render() { From b1844d3c51b3977be2881b0b2a1dbab4ef6a2a5b Mon Sep 17 00:00:00 2001 From: Mohammad Luthfi Fathur Rahman Date: Tue, 14 Jun 2022 08:11:44 +0700 Subject: [PATCH 10/11] minor jsdoc --- src/components/ContextMenuItem.js | 3 +++ src/components/HeaderWithCloseButton.js | 3 +++ src/components/withDelayToggleButtonState.js | 2 +- 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js index 725401a06140..9d34fcf446d3 100644 --- a/src/components/ContextMenuItem.js +++ b/src/components/ContextMenuItem.js @@ -52,6 +52,9 @@ class ContextMenuItem extends Component { this.triggerPressAndUpdateSuccess = this.triggerPressAndUpdateSuccess.bind(this); } + /** + * Called on button press and mark the run + */ triggerPressAndUpdateSuccess() { if (this.props.isDelayButtonStateComplete) { return; diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js index d5434ab16e82..8f8077098676 100755 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -113,6 +113,9 @@ class HeaderWithCloseButton extends Component { this.triggerButtonCompleteAndDownload = this.triggerButtonCompleteAndDownload.bind(this); } + /** + * Called on download button press + */ triggerButtonCompleteAndDownload() { if (this.props.isDelayButtonStateComplete) { return; diff --git a/src/components/withDelayToggleButtonState.js b/src/components/withDelayToggleButtonState.js index 586bc566aba9..c312d18fba74 100644 --- a/src/components/withDelayToggleButtonState.js +++ b/src/components/withDelayToggleButtonState.js @@ -30,7 +30,7 @@ export default function (WrappedComponent) { } /** - * @param {Boolean} [resetAfterDelay] Impose delay before toggling state + * @param {Boolean} resetAfterDelay Impose delay before toggling state */ toggleDelayButtonState(resetAfterDelay) { this.setState({ From 20107e219290f2e916756a38ca61e06c2e39b387 Mon Sep 17 00:00:00 2001 From: Mohammad Luthfi Fathur Rahman Date: Tue, 14 Jun 2022 23:54:34 +0700 Subject: [PATCH 11/11] add jsdoc more clearly --- src/components/ContextMenuItem.js | 2 +- src/components/HeaderWithCloseButton.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js index 9d34fcf446d3..639742efa00d 100644 --- a/src/components/ContextMenuItem.js +++ b/src/components/ContextMenuItem.js @@ -53,7 +53,7 @@ class ContextMenuItem extends Component { } /** - * Called on button press and mark the run + * Method to call parent onPress and toggleDelayButtonState */ triggerPressAndUpdateSuccess() { if (this.props.isDelayButtonStateComplete) { diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js index 8f8077098676..8b83e61ac279 100755 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -114,7 +114,8 @@ class HeaderWithCloseButton extends Component { } /** - * Called on download button press + * Method to trigger parent onDownloadButtonPress to download the file + * and toggleDelayButtonState to set button state and revert it after sometime. */ triggerButtonCompleteAndDownload() { if (this.props.isDelayButtonStateComplete) {