From a5bb9917a79dee941cd404c45b816a43d92cf281 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Metehan=20=C3=96zyurt?= Date: Sun, 15 May 2022 10:33:29 +0300 Subject: [PATCH 1/8] dragOverListener method added to SidebarScreen --- src/pages/home/sidebar/SidebarScreen.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/pages/home/sidebar/SidebarScreen.js b/src/pages/home/sidebar/SidebarScreen.js index d44c40fc75b4..5f29461fbe50 100755 --- a/src/pages/home/sidebar/SidebarScreen.js +++ b/src/pages/home/sidebar/SidebarScreen.js @@ -47,6 +47,7 @@ class SidebarScreen extends Component { this.startTimer = this.startTimer.bind(this); this.navigateToSettings = this.navigateToSettings.bind(this); this.showCreateMenu = this.showCreateMenu.bind(this); + this.dragOverListener = this.dragOverListener.bind(this); this.state = { isCreateMenuActive: false, @@ -68,6 +69,7 @@ class SidebarScreen extends Component { this.setState({ isCreateMenuActive: true, }); + document.addEventListener('dragover', this.dragOverListener); } /** @@ -83,6 +85,7 @@ class SidebarScreen extends Component { * Selecting an item on CreateMenu or closing it by clicking outside of the modal component */ hideCreateMenu() { + document.removeEventListener('dragover', this.dragOverListener); this.setState({ isCreateMenuActive: false, }); @@ -96,6 +99,15 @@ class SidebarScreen extends Component { Performance.markStart(CONST.TIMING.SWITCH_REPORT); } + /** + * Method called when dragover events window + * + * @param {Object} e native Event + */ + dragOverListener() { + this.hideCreateMenu(); + } + render() { // Workspaces are policies with type === 'free' const workspaces = _.filter(this.props.allPolicies, policy => policy && policy.type === CONST.POLICY.TYPE.FREE); From 7573440200573abd9c2e0d12c21bf7754481a692 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Metehan=20=C3=96zyurt?= Date: Sun, 15 May 2022 11:59:55 +0300 Subject: [PATCH 2/8] document changed to window.document and conditions added for unnecessary bind and listeners --- src/pages/home/sidebar/SidebarScreen.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/pages/home/sidebar/SidebarScreen.js b/src/pages/home/sidebar/SidebarScreen.js index 5f29461fbe50..abc3c53d58c3 100755 --- a/src/pages/home/sidebar/SidebarScreen.js +++ b/src/pages/home/sidebar/SidebarScreen.js @@ -47,7 +47,9 @@ class SidebarScreen extends Component { this.startTimer = this.startTimer.bind(this); this.navigateToSettings = this.navigateToSettings.bind(this); this.showCreateMenu = this.showCreateMenu.bind(this); - this.dragOverListener = this.dragOverListener.bind(this); + if (window.document) { + this.dragOverListener = this.dragOverListener.bind(this); + } this.state = { isCreateMenuActive: false, @@ -69,7 +71,9 @@ class SidebarScreen extends Component { this.setState({ isCreateMenuActive: true, }); - document.addEventListener('dragover', this.dragOverListener); + if (window.document) { + window.document.addEventListener('dragover', this.dragOverListener); + } } /** @@ -85,7 +89,9 @@ class SidebarScreen extends Component { * Selecting an item on CreateMenu or closing it by clicking outside of the modal component */ hideCreateMenu() { - document.removeEventListener('dragover', this.dragOverListener); + if (window.document) { + window.document.removeEventListener('dragover', this.dragOverListener); + } this.setState({ isCreateMenuActive: false, }); From c06b30433c32802deefc9448899149888688dd72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Metehan=20=C3=96zyurt?= Date: Mon, 16 May 2022 09:13:27 +0300 Subject: [PATCH 3/8] BaseSidebarScreen.js, index.js and index.native.js created. --- .../BaseSidebarScreen.js} | 64 ++++++++++--------- src/pages/home/sidebar/SidebarScreen/index.js | 40 ++++++++++++ .../sidebar/SidebarScreen/index.native.js | 11 ++++ 3 files changed, 86 insertions(+), 29 deletions(-) rename src/pages/home/sidebar/{SidebarScreen.js => SidebarScreen/BaseSidebarScreen.js} (83%) mode change 100755 => 100644 create mode 100755 src/pages/home/sidebar/SidebarScreen/index.js create mode 100755 src/pages/home/sidebar/SidebarScreen/index.native.js diff --git a/src/pages/home/sidebar/SidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js old mode 100755 new mode 100644 similarity index 83% rename from src/pages/home/sidebar/SidebarScreen.js rename to src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js index abc3c53d58c3..265f3aa3da15 --- a/src/pages/home/sidebar/SidebarScreen.js +++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js @@ -5,26 +5,33 @@ import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import {withNavigation} from '@react-navigation/compat'; -import styles from '../../../styles/styles'; -import SidebarLinks from './SidebarLinks'; -import PopoverMenu from '../../../components/PopoverMenu'; -import FAB from '../../../components/FAB'; -import ScreenWrapper from '../../../components/ScreenWrapper'; -import Navigation from '../../../libs/Navigation/Navigation'; -import ROUTES from '../../../ROUTES'; -import Timing from '../../../libs/actions/Timing'; -import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; -import CONST from '../../../CONST'; -import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; -import compose from '../../../libs/compose'; -import * as Expensicons from '../../../components/Icon/Expensicons'; -import Permissions from '../../../libs/Permissions'; -import ONYXKEYS from '../../../ONYXKEYS'; -import * as Policy from '../../../libs/actions/Policy'; -import Performance from '../../../libs/Performance'; -import * as Welcome from '../../../libs/actions/Welcome'; +import styles from '../../../../styles/styles'; +import SidebarLinks from '../SidebarLinks'; +import PopoverMenu from '../../../../components/PopoverMenu'; +import FAB from '../../../../components/FAB'; +import ScreenWrapper from '../../../../components/ScreenWrapper'; +import Navigation from '../../../../libs/Navigation/Navigation'; +import ROUTES from '../../../../ROUTES'; +import Timing from '../../../../libs/actions/Timing'; +import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions'; +import CONST from '../../../../CONST'; +import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize'; +import compose from '../../../../libs/compose'; +import * as Expensicons from '../../../../components/Icon/Expensicons'; +import Permissions from '../../../../libs/Permissions'; +import ONYXKEYS from '../../../../ONYXKEYS'; +import * as Policy from '../../../../libs/actions/Policy'; +import Performance from '../../../../libs/Performance'; +import * as Welcome from '../../../../libs/actions/Welcome'; const propTypes = { + + /* Create Listener callback */ + afterShowCreateMenu: PropTypes.func, + + /* Remove Listener callback */ + beforeHideCreateMenu: PropTypes.func, + /* Beta features list */ betas: PropTypes.arrayOf(PropTypes.string).isRequired, @@ -36,10 +43,12 @@ const propTypes = { ...withLocalizePropTypes, }; const defaultProps = { + beforeHideCreateMenu: () => {}, + afterShowCreateMenu: () => {}, isCreatingWorkspace: false, }; -class SidebarScreen extends Component { +class BaseSidebarScreen extends Component { constructor(props) { super(props); @@ -47,9 +56,6 @@ class SidebarScreen extends Component { this.startTimer = this.startTimer.bind(this); this.navigateToSettings = this.navigateToSettings.bind(this); this.showCreateMenu = this.showCreateMenu.bind(this); - if (window.document) { - this.dragOverListener = this.dragOverListener.bind(this); - } this.state = { isCreateMenuActive: false, @@ -71,8 +77,8 @@ class SidebarScreen extends Component { this.setState({ isCreateMenuActive: true, }); - if (window.document) { - window.document.addEventListener('dragover', this.dragOverListener); + if (this.props.afterShowCreateMenu) { + this.props.afterShowCreateMenu(this); } } @@ -89,8 +95,8 @@ class SidebarScreen extends Component { * Selecting an item on CreateMenu or closing it by clicking outside of the modal component */ hideCreateMenu() { - if (window.document) { - window.document.removeEventListener('dragover', this.dragOverListener); + if (this.props.beforeHideCreateMenu) { + this.props.beforeHideCreateMenu(); } this.setState({ isCreateMenuActive: false, @@ -202,8 +208,8 @@ class SidebarScreen extends Component { } } -SidebarScreen.propTypes = propTypes; -SidebarScreen.defaultProps = defaultProps; +BaseSidebarScreen.propTypes = propTypes; +BaseSidebarScreen.defaultProps = defaultProps; export default compose( withNavigation, @@ -220,4 +226,4 @@ export default compose( key: ONYXKEYS.IS_CREATING_WORKSPACE, }, }), -)(SidebarScreen); +)(BaseSidebarScreen); diff --git a/src/pages/home/sidebar/SidebarScreen/index.js b/src/pages/home/sidebar/SidebarScreen/index.js new file mode 100755 index 000000000000..aa9264996352 --- /dev/null +++ b/src/pages/home/sidebar/SidebarScreen/index.js @@ -0,0 +1,40 @@ +import React, {PureComponent} from 'react'; +import BaseSidebarScreen from './BaseSidebarScreen'; + +class SidebarScreen extends PureComponent { + /** + * Method create event listener and bind. + * @param {BaseSidebarScreen} baseComponent + */ + createDragoverListener= (baseComponent) => { + this.dragOverListener = this.dragOverListener.bind(baseComponent); + document.addEventListener('dragover', this.dragOverListener); + } + + /** + * Method remove event listener. + */ + removeDragoverListener= () => { + document.removeEventListener('dragover', this.dragOverListener); + } + + /** + * Method called when dragover events on document. + */ + dragOverListener() { + this.hideCreateMenu(); + } + + render() { + return ( + + ); + } +} + +export default SidebarScreen; diff --git a/src/pages/home/sidebar/SidebarScreen/index.native.js b/src/pages/home/sidebar/SidebarScreen/index.native.js new file mode 100755 index 000000000000..712e6926e92b --- /dev/null +++ b/src/pages/home/sidebar/SidebarScreen/index.native.js @@ -0,0 +1,11 @@ +import React, {PureComponent} from 'react'; +import BaseSidebarScreen from './BaseSidebarScreen'; + +class SidebarScreen extends PureComponent { + render() { + // eslint-disable-next-line react/jsx-props-no-spreading + return (); + } +} + +export default SidebarScreen; From 842b0a7bd3f9baa06fd6e41ef7b1239d53444efb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Metehan=20=C3=96zyurt?= Date: Tue, 17 May 2022 20:10:46 +0300 Subject: [PATCH 4/8] index.js and index.native.js files changed to function component, index.js using ref now --- .../SidebarScreen/BaseSidebarScreen.js | 28 ++++------ src/pages/home/sidebar/SidebarScreen/index.js | 51 ++++++++----------- .../sidebar/SidebarScreen/index.native.js | 12 ++--- 3 files changed, 33 insertions(+), 58 deletions(-) diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js index 265f3aa3da15..066e5253f680 100644 --- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js +++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js @@ -27,10 +27,10 @@ import * as Welcome from '../../../../libs/actions/Welcome'; const propTypes = { /* Create Listener callback */ - afterShowCreateMenu: PropTypes.func, + onShowCreateMenu: PropTypes.func, /* Remove Listener callback */ - beforeHideCreateMenu: PropTypes.func, + onHideCreateMenu: PropTypes.func, /* Beta features list */ betas: PropTypes.arrayOf(PropTypes.string).isRequired, @@ -43,8 +43,8 @@ const propTypes = { ...withLocalizePropTypes, }; const defaultProps = { - beforeHideCreateMenu: () => {}, - afterShowCreateMenu: () => {}, + onHideCreateMenu: () => {}, + onShowCreateMenu: () => {}, isCreatingWorkspace: false, }; @@ -68,6 +68,9 @@ class BaseSidebarScreen extends Component { const routes = lodashGet(this.props.navigation.getState(), 'routes', []); Welcome.show({routes, showCreateMenu: this.showCreateMenu}); + if (this.props.innerRef) { + this.props.innerRef.current = this; + } } /** @@ -77,9 +80,7 @@ class BaseSidebarScreen extends Component { this.setState({ isCreateMenuActive: true, }); - if (this.props.afterShowCreateMenu) { - this.props.afterShowCreateMenu(this); - } + this.props.onShowCreateMenu(); } /** @@ -95,9 +96,7 @@ class BaseSidebarScreen extends Component { * Selecting an item on CreateMenu or closing it by clicking outside of the modal component */ hideCreateMenu() { - if (this.props.beforeHideCreateMenu) { - this.props.beforeHideCreateMenu(); - } + this.props.onHideCreateMenu(); this.setState({ isCreateMenuActive: false, }); @@ -111,15 +110,6 @@ class BaseSidebarScreen extends Component { Performance.markStart(CONST.TIMING.SWITCH_REPORT); } - /** - * Method called when dragover events window - * - * @param {Object} e native Event - */ - dragOverListener() { - this.hideCreateMenu(); - } - render() { // Workspaces are policies with type === 'free' const workspaces = _.filter(this.props.allPolicies, policy => policy && policy.type === CONST.POLICY.TYPE.FREE); diff --git a/src/pages/home/sidebar/SidebarScreen/index.js b/src/pages/home/sidebar/SidebarScreen/index.js index aa9264996352..8842769f9d74 100755 --- a/src/pages/home/sidebar/SidebarScreen/index.js +++ b/src/pages/home/sidebar/SidebarScreen/index.js @@ -1,40 +1,29 @@ -import React, {PureComponent} from 'react'; +import React, {useRef} from 'react'; import BaseSidebarScreen from './BaseSidebarScreen'; -class SidebarScreen extends PureComponent { - /** - * Method create event listener and bind. - * @param {BaseSidebarScreen} baseComponent - */ - createDragoverListener= (baseComponent) => { - this.dragOverListener = this.dragOverListener.bind(baseComponent); - document.addEventListener('dragover', this.dragOverListener); - } +export default function (props) { + const BaseSidebarScreenRef = useRef(null); /** - * Method remove event listener. + * Method create event listener */ - removeDragoverListener= () => { - document.removeEventListener('dragover', this.dragOverListener); - } + const createDragoverListener = () => { + document.addEventListener('dragover', BaseSidebarScreenRef.current.hideCreateMenu); + }; /** - * Method called when dragover events on document. + * Method remove event listener. */ - dragOverListener() { - this.hideCreateMenu(); - } - - render() { - return ( - - ); - } + const removeDragoverListener = () => { + document.removeEventListener('dragover', BaseSidebarScreenRef.current.hideCreateMenu); + }; + return ( + + ); } - -export default SidebarScreen; diff --git a/src/pages/home/sidebar/SidebarScreen/index.native.js b/src/pages/home/sidebar/SidebarScreen/index.native.js index 712e6926e92b..94e843577644 100755 --- a/src/pages/home/sidebar/SidebarScreen/index.native.js +++ b/src/pages/home/sidebar/SidebarScreen/index.native.js @@ -1,11 +1,7 @@ -import React, {PureComponent} from 'react'; +import React from 'react'; import BaseSidebarScreen from './BaseSidebarScreen'; -class SidebarScreen extends PureComponent { - render() { - // eslint-disable-next-line react/jsx-props-no-spreading - return (); - } +export default function SidebarScreen(props) { + // eslint-disable-next-line react/jsx-props-no-spreading + return ; } - -export default SidebarScreen; From c221851dd208f305c8328d185f49f49d6261873b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Metehan=20=C3=96zyurt?= Date: Wed, 18 May 2022 00:56:27 +0300 Subject: [PATCH 5/8] sidebarPropTypes.js created,displayName and propTypes added for SidebarScreen. --- .../SidebarScreen/BaseSidebarScreen.js | 25 ++------------ src/pages/home/sidebar/SidebarScreen/index.js | 31 +++++++++++++++-- .../sidebar/SidebarScreen/index.native.js | 33 ++++++++++++++++--- .../sidebar/SidebarScreen/sidebarPropTypes.js | 17 ++++++++++ 4 files changed, 78 insertions(+), 28 deletions(-) create mode 100644 src/pages/home/sidebar/SidebarScreen/sidebarPropTypes.js diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js index 066e5253f680..5ec708b1f5b5 100644 --- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js +++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js @@ -2,9 +2,7 @@ import lodashGet from 'lodash/get'; import _ from 'underscore'; import React, {Component} from 'react'; import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; -import {withNavigation} from '@react-navigation/compat'; import styles from '../../../../styles/styles'; import SidebarLinks from '../SidebarLinks'; import PopoverMenu from '../../../../components/PopoverMenu'; @@ -13,13 +11,11 @@ import ScreenWrapper from '../../../../components/ScreenWrapper'; import Navigation from '../../../../libs/Navigation/Navigation'; import ROUTES from '../../../../ROUTES'; import Timing from '../../../../libs/actions/Timing'; -import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions'; +import {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions'; import CONST from '../../../../CONST'; -import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize'; -import compose from '../../../../libs/compose'; +import {withLocalizePropTypes} from '../../../../components/withLocalize'; import * as Expensicons from '../../../../components/Icon/Expensicons'; import Permissions from '../../../../libs/Permissions'; -import ONYXKEYS from '../../../../ONYXKEYS'; import * as Policy from '../../../../libs/actions/Policy'; import Performance from '../../../../libs/Performance'; import * as Welcome from '../../../../libs/actions/Welcome'; @@ -201,19 +197,4 @@ class BaseSidebarScreen extends Component { BaseSidebarScreen.propTypes = propTypes; BaseSidebarScreen.defaultProps = defaultProps; -export default compose( - withNavigation, - withLocalize, - withWindowDimensions, - withOnyx({ - allPolicies: { - key: ONYXKEYS.COLLECTION.POLICY, - }, - betas: { - key: ONYXKEYS.BETAS, - }, - isCreatingWorkspace: { - key: ONYXKEYS.IS_CREATING_WORKSPACE, - }, - }), -)(BaseSidebarScreen); +export default BaseSidebarScreen; diff --git a/src/pages/home/sidebar/SidebarScreen/index.js b/src/pages/home/sidebar/SidebarScreen/index.js index 8842769f9d74..7acfd5af622f 100755 --- a/src/pages/home/sidebar/SidebarScreen/index.js +++ b/src/pages/home/sidebar/SidebarScreen/index.js @@ -1,7 +1,14 @@ import React, {useRef} from 'react'; +import {withNavigation} from '@react-navigation/compat'; +import {withOnyx} from 'react-native-onyx'; +import compose from '../../../../libs/compose'; +import withWindowDimensions from '../../../../components/withWindowDimensions'; +import withLocalize from '../../../../components/withLocalize'; +import ONYXKEYS from '../../../../ONYXKEYS'; +import propTypes from './sidebarPropTypes'; import BaseSidebarScreen from './BaseSidebarScreen'; -export default function (props) { +const SidebarScreen = (props) => { const BaseSidebarScreenRef = useRef(null); /** @@ -26,4 +33,24 @@ export default function (props) { {...props} /> ); -} +}; + +SidebarScreen.propTypes = propTypes; +SidebarScreen.displayName = 'SidebarScreen'; + +export default compose( + withNavigation, + withLocalize, + withWindowDimensions, + withOnyx({ + allPolicies: { + key: ONYXKEYS.COLLECTION.POLICY, + }, + betas: { + key: ONYXKEYS.BETAS, + }, + isCreatingWorkspace: { + key: ONYXKEYS.IS_CREATING_WORKSPACE, + }, + }), +)(SidebarScreen); diff --git a/src/pages/home/sidebar/SidebarScreen/index.native.js b/src/pages/home/sidebar/SidebarScreen/index.native.js index 94e843577644..1d34b8514f6b 100755 --- a/src/pages/home/sidebar/SidebarScreen/index.native.js +++ b/src/pages/home/sidebar/SidebarScreen/index.native.js @@ -1,7 +1,32 @@ import React from 'react'; +import {withNavigation} from '@react-navigation/compat'; +import {withOnyx} from 'react-native-onyx'; +import compose from '../../../../libs/compose'; +import withWindowDimensions from '../../../../components/withWindowDimensions'; +import withLocalize from '../../../../components/withLocalize'; +import ONYXKEYS from '../../../../ONYXKEYS'; +import propTypes from './sidebarPropTypes'; import BaseSidebarScreen from './BaseSidebarScreen'; -export default function SidebarScreen(props) { - // eslint-disable-next-line react/jsx-props-no-spreading - return ; -} +// eslint-disable-next-line react/jsx-props-no-spreading +const SidebarScreen = props => ; + +SidebarScreen.propTypes = propTypes; +SidebarScreen.displayName = 'SidebarScreen'; + +export default compose( + withNavigation, + withLocalize, + withWindowDimensions, + withOnyx({ + allPolicies: { + key: ONYXKEYS.COLLECTION.POLICY, + }, + betas: { + key: ONYXKEYS.BETAS, + }, + isCreatingWorkspace: { + key: ONYXKEYS.IS_CREATING_WORKSPACE, + }, + }), +)(SidebarScreen); diff --git a/src/pages/home/sidebar/SidebarScreen/sidebarPropTypes.js b/src/pages/home/sidebar/SidebarScreen/sidebarPropTypes.js new file mode 100644 index 000000000000..5e18bcdd7c6a --- /dev/null +++ b/src/pages/home/sidebar/SidebarScreen/sidebarPropTypes.js @@ -0,0 +1,17 @@ +import PropTypes from 'prop-types'; +import {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions'; +import {withLocalizePropTypes} from '../../../../components/withLocalize'; + +const propTypes = { + /* Beta features list */ + betas: PropTypes.arrayOf(PropTypes.string).isRequired, + + /* Is workspace is being created by the user? */ + isCreatingWorkspace: PropTypes.bool, + + ...windowDimensionsPropTypes, + + ...withLocalizePropTypes, +}; + +export default propTypes; From dc06bce8af1e2dc8378ddf698eadbd9adefa62d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Metehan=20=C3=96zyurt?= Date: Sun, 22 May 2022 17:51:04 +0300 Subject: [PATCH 6/8] allPolicies added to sidebarPropTypes. Fixed the use of ref. BaseSidebarScreen using sidebarPropTypes. --- .../sidebar/SidebarScreen/BaseSidebarScreen.js | 18 +++--------------- src/pages/home/sidebar/SidebarScreen/index.js | 15 ++++++++------- .../home/sidebar/SidebarScreen/index.native.js | 5 +++-- .../sidebar/SidebarScreen/sidebarPropTypes.js | 15 +++++++++++++-- 4 files changed, 27 insertions(+), 26 deletions(-) diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js index 5ec708b1f5b5..0cff064eaca0 100644 --- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js +++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js @@ -11,14 +11,13 @@ import ScreenWrapper from '../../../../components/ScreenWrapper'; import Navigation from '../../../../libs/Navigation/Navigation'; import ROUTES from '../../../../ROUTES'; import Timing from '../../../../libs/actions/Timing'; -import {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions'; import CONST from '../../../../CONST'; -import {withLocalizePropTypes} from '../../../../components/withLocalize'; import * as Expensicons from '../../../../components/Icon/Expensicons'; import Permissions from '../../../../libs/Permissions'; import * as Policy from '../../../../libs/actions/Policy'; import Performance from '../../../../libs/Performance'; import * as Welcome from '../../../../libs/actions/Welcome'; +import {sidebarPropTypes, sidebarDefaultProps} from './sidebarPropTypes'; const propTypes = { @@ -28,20 +27,12 @@ const propTypes = { /* Remove Listener callback */ onHideCreateMenu: PropTypes.func, - /* Beta features list */ - betas: PropTypes.arrayOf(PropTypes.string).isRequired, - - /* Is workspace is being created by the user? */ - isCreatingWorkspace: PropTypes.bool, - - ...windowDimensionsPropTypes, - - ...withLocalizePropTypes, + ...sidebarPropTypes, }; const defaultProps = { onHideCreateMenu: () => {}, onShowCreateMenu: () => {}, - isCreatingWorkspace: false, + ...sidebarDefaultProps, }; class BaseSidebarScreen extends Component { @@ -64,9 +55,6 @@ class BaseSidebarScreen extends Component { const routes = lodashGet(this.props.navigation.getState(), 'routes', []); Welcome.show({routes, showCreateMenu: this.showCreateMenu}); - if (this.props.innerRef) { - this.props.innerRef.current = this; - } } /** diff --git a/src/pages/home/sidebar/SidebarScreen/index.js b/src/pages/home/sidebar/SidebarScreen/index.js index 7acfd5af622f..00792c601ffb 100755 --- a/src/pages/home/sidebar/SidebarScreen/index.js +++ b/src/pages/home/sidebar/SidebarScreen/index.js @@ -1,32 +1,32 @@ -import React, {useRef} from 'react'; +import React from 'react'; import {withNavigation} from '@react-navigation/compat'; import {withOnyx} from 'react-native-onyx'; import compose from '../../../../libs/compose'; import withWindowDimensions from '../../../../components/withWindowDimensions'; import withLocalize from '../../../../components/withLocalize'; import ONYXKEYS from '../../../../ONYXKEYS'; -import propTypes from './sidebarPropTypes'; +import {sidebarPropTypes, sidebarDefaultProps} from './sidebarPropTypes'; import BaseSidebarScreen from './BaseSidebarScreen'; const SidebarScreen = (props) => { - const BaseSidebarScreenRef = useRef(null); + let baseSidebarScreen = null; /** * Method create event listener */ const createDragoverListener = () => { - document.addEventListener('dragover', BaseSidebarScreenRef.current.hideCreateMenu); + document.addEventListener('dragover', baseSidebarScreen.hideCreateMenu); }; /** * Method remove event listener. */ const removeDragoverListener = () => { - document.removeEventListener('dragover', BaseSidebarScreenRef.current.hideCreateMenu); + document.removeEventListener('dragover', baseSidebarScreen.hideCreateMenu); }; return ( baseSidebarScreen = el} onShowCreateMenu={createDragoverListener} onHideCreateMenu={removeDragoverListener} // eslint-disable-next-line react/jsx-props-no-spreading @@ -35,7 +35,8 @@ const SidebarScreen = (props) => { ); }; -SidebarScreen.propTypes = propTypes; +SidebarScreen.propTypes = sidebarPropTypes; +SidebarScreen.defaultProps = sidebarDefaultProps; SidebarScreen.displayName = 'SidebarScreen'; export default compose( diff --git a/src/pages/home/sidebar/SidebarScreen/index.native.js b/src/pages/home/sidebar/SidebarScreen/index.native.js index 1d34b8514f6b..651ac0844ba1 100755 --- a/src/pages/home/sidebar/SidebarScreen/index.native.js +++ b/src/pages/home/sidebar/SidebarScreen/index.native.js @@ -5,13 +5,14 @@ import compose from '../../../../libs/compose'; import withWindowDimensions from '../../../../components/withWindowDimensions'; import withLocalize from '../../../../components/withLocalize'; import ONYXKEYS from '../../../../ONYXKEYS'; -import propTypes from './sidebarPropTypes'; +import {sidebarPropTypes, sidebarDefaultProps} from './sidebarPropTypes'; import BaseSidebarScreen from './BaseSidebarScreen'; // eslint-disable-next-line react/jsx-props-no-spreading const SidebarScreen = props => ; -SidebarScreen.propTypes = propTypes; +SidebarScreen.propTypes = sidebarPropTypes; +SidebarScreen.defaultProps = sidebarDefaultProps; SidebarScreen.displayName = 'SidebarScreen'; export default compose( diff --git a/src/pages/home/sidebar/SidebarScreen/sidebarPropTypes.js b/src/pages/home/sidebar/SidebarScreen/sidebarPropTypes.js index 5e18bcdd7c6a..de78dfcb03ff 100644 --- a/src/pages/home/sidebar/SidebarScreen/sidebarPropTypes.js +++ b/src/pages/home/sidebar/SidebarScreen/sidebarPropTypes.js @@ -2,7 +2,14 @@ import PropTypes from 'prop-types'; import {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions'; import {withLocalizePropTypes} from '../../../../components/withLocalize'; -const propTypes = { +const sidebarPropTypes = { + + /** The list of policies the user has access to. */ + allPolicies: PropTypes.shape({ + /** The policy name */ + name: PropTypes.string, + }).isRequired, + /* Beta features list */ betas: PropTypes.arrayOf(PropTypes.string).isRequired, @@ -14,4 +21,8 @@ const propTypes = { ...withLocalizePropTypes, }; -export default propTypes; +const sidebarDefaultProps = { + isCreatingWorkspace: false, +}; + +export {sidebarPropTypes, sidebarDefaultProps}; From c853e4bead060baa13656756b36e0a11ba76038f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Metehan=20=C3=96zyurt?= Date: Tue, 24 May 2022 22:33:56 +0300 Subject: [PATCH 7/8] descriptive comment added. --- src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js index 0cff064eaca0..c7746f74c9a8 100644 --- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js +++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js @@ -21,10 +21,10 @@ import {sidebarPropTypes, sidebarDefaultProps} from './sidebarPropTypes'; const propTypes = { - /* Create Listener callback */ + /* A callback to call when we show create menu */ onShowCreateMenu: PropTypes.func, - /* Remove Listener callback */ + /* A callback to call when we hide create menu */ onHideCreateMenu: PropTypes.func, ...sidebarPropTypes, From e48d2f976a41119c76f8daf7374cc01a185d5780 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Metehan=20=C3=96zyurt?= Date: Thu, 2 Jun 2022 08:16:53 +0300 Subject: [PATCH 8/8] comments changed --- src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js index c7746f74c9a8..a939c5bf4e19 100644 --- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js +++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js @@ -21,10 +21,10 @@ import {sidebarPropTypes, sidebarDefaultProps} from './sidebarPropTypes'; const propTypes = { - /* A callback to call when we show create menu */ + /* Callback function when the menu is shown */ onShowCreateMenu: PropTypes.func, - /* A callback to call when we hide create menu */ + /* Callback function before the menu is hidden */ onHideCreateMenu: PropTypes.func, ...sidebarPropTypes,