From 2edef95361c8e1f976547ecbec3ce6ddb75fbb99 Mon Sep 17 00:00:00 2001 From: keplyx Date: Sun, 23 Feb 2020 21:47:36 +0100 Subject: [PATCH] Removed other arrow functions for increased performance --- App.js | 4 ++ components/BaseContainer.js | 59 +++++++++++++--------- components/CustomHeader.js | 4 +- components/CustomIntroSlider.js | 6 +-- components/FetchedDataSectionList.js | 40 +++++++++------ components/Sidebar.js | 20 ++------ components/WebViewScreen.js | 75 +++++++++++++++++++--------- screens/About/AboutScreen.js | 50 ++++++++----------- screens/Proximo/ProximoListScreen.js | 8 +-- screens/Proximo/ProximoMainScreen.js | 5 +- screens/Proxiwash/ProxiwashScreen.js | 7 +-- screens/SettingsScreen.js | 21 ++++++-- 12 files changed, 172 insertions(+), 127 deletions(-) diff --git a/App.js b/App.js index ac44a28..7c5ac2d 100644 --- a/App.js +++ b/App.js @@ -31,6 +31,10 @@ export default class App extends React.Component { currentTheme: null, }; + onIntroDone: Function; + loadAssetsAsync: Function; + onLoadFinished: Function; + constructor(props: Object) { super(props); LocaleManager.initTranslations(); diff --git a/components/BaseContainer.js b/components/BaseContainer.js index e712347..c0b5bd0 100644 --- a/components/BaseContainer.js +++ b/components/BaseContainer.js @@ -46,47 +46,60 @@ export default class BaseContainer extends React.Component { }; onDrawerPress: Function; + onWillFocus: Function; + onWillBlur: Function; + onChangeOrientation: Function; constructor() { super(); this.onDrawerPress = this.onDrawerPress.bind(this); + this.onWillFocus = this.onWillFocus.bind(this); + this.onWillBlur = this.onWillBlur.bind(this); + this.onChangeOrientation = this.onChangeOrientation.bind(this); } onDrawerPress() { this.props.navigation.toggleDrawer(); } + onWillFocus() { + if (this.props.enableRotation) { + ScreenOrientation.unlockAsync(); + ScreenOrientation.addOrientationChangeListener(this.onChangeOrientation); + } + } + + onWillBlur() { + if (this.props.enableRotation) + ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT); + } + + onChangeOrientation(OrientationChangeEvent) { + if (this.props.hideHeaderOnLandscape) { + let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE || + OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT || + OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT; + this.setState({isHeaderVisible: !isLandscape}); + const setParamsAction = NavigationActions.setParams({ + params: {showTabBar: !isLandscape}, + key: this.props.navigation.state.key, + }); + this.props.navigation.dispatch(setParamsAction); + StatusBar.setHidden(isLandscape); + } + } + /** * Register for blur event to close side menu on screen change */ componentDidMount() { this.willFocusSubscription = this.props.navigation.addListener( 'willFocus', - () => { - if (this.props.enableRotation) { - ScreenOrientation.unlockAsync(); - ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => { - if (this.props.hideHeaderOnLandscape) { - let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE || - OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT || - OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT; - this.setState({isHeaderVisible: !isLandscape}); - const setParamsAction = NavigationActions.setParams({ - params: {showTabBar: !isLandscape}, - key: this.props.navigation.state.key, - }); - this.props.navigation.dispatch(setParamsAction); - StatusBar.setHidden(isLandscape); - } - }); - } - }); + this.onWillFocus + ); this.willBlurSubscription = this.props.navigation.addListener( 'willBlur', - () => { - if (this.props.enableRotation) - ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT); - } + this.onWillBlur ); } diff --git a/components/CustomHeader.js b/components/CustomHeader.js index f0ca286..c72e46f 100644 --- a/components/CustomHeader.js +++ b/components/CustomHeader.js @@ -35,7 +35,7 @@ export default class CustomHeader extends React.Component { static defaultProps = { hasBackButton: false, hasSearchField: false, - searchCallback: () => null, + searchCallback: null, shouldFocusSearchBar: false, title: '', subtitle: '', @@ -65,7 +65,7 @@ export default class CustomHeader extends React.Component { componentDidMount() { if (this.refs.searchInput !== undefined && this.refs.searchInput._root !== undefined && this.props.shouldFocusSearchBar) { // does not work if called too early for some reason... - setTimeout(() => this.refs.searchInput._root.focus(), 500); + setTimeout(this.refs.searchInput._root.focus, 500); } } diff --git a/components/CustomIntroSlider.js b/components/CustomIntroSlider.js index 6e430e3..1ad4221 100644 --- a/components/CustomIntroSlider.js +++ b/components/CustomIntroSlider.js @@ -117,7 +117,7 @@ export default class CustomIntroSlider extends React.Component { * @param item * @param dimensions */ - static getIntroRenderItem(item: Object, dimensions: Object) { + static getIntroRenderItem({item, dimensions}: Object) { return ( { render() { return ( CustomIntroSlider.getIntroRenderItem(item, dimensions)} + renderItem={CustomIntroSlider.getIntroRenderItem} slides={this.props.isUpdate ? this.updateSlides : this.introSlides} - onDone={() => this.props.onDone()} + onDone={this.props.onDone} bottomButton showSkipButton skipLabel={i18n.t('intro.buttons.skip')} diff --git a/components/FetchedDataSectionList.js b/components/FetchedDataSectionList.js index 75c763c..413eb25 100644 --- a/components/FetchedDataSectionList.js +++ b/components/FetchedDataSectionList.js @@ -42,6 +42,8 @@ export default class FetchedDataSectionList extends React.Component { - this.setState({ - fetchedData: fetchedData, - refreshing: false, - firstLoading: false - }); - this.lastRefresh = new Date(); - }) - .catch(() => { - this.setState({ - fetchedData: {}, - refreshing: false, - firstLoading: false - }); - this.webDataManager.showUpdateToast(this.getUpdateToastTranslations()[0], this.getUpdateToastTranslations()[1]); - }); + .then(this.onFetchSuccess) + .catch(this.onFetchError); } } diff --git a/components/Sidebar.js b/components/Sidebar.js index 5517f99..cac9553 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -40,7 +40,6 @@ export default class SideBar extends React.Component { constructor(props: Props) { super(props); // Dataset used to render the drawer - // If the link field is defined, clicking on the item will open the link this.dataSet = [ { name: i18n.t('sidenav.divider1'), @@ -113,11 +112,8 @@ export default class SideBar extends React.Component { } - onListItemPress(item: Object) { - if (item.link !== undefined) - Linking.openURL(item.link).catch((err) => console.error('Error opening link', err)); - else - this.navigateToScreen(item.route); + onListItemPress(route: string) { + this.props.navigation.navigate(route); } @@ -127,13 +123,15 @@ export default class SideBar extends React.Component { getRenderItem({item}: Object) { + const onListItemPress = this.onListItemPress.bind(this, item.route); + if (item.icon !== undefined) { return ( { } - /** - * Navigate to the selected route - * @param route {string} The route name to navigate to - */ - navigateToScreen(route: string) { - this.props.navigation.navigate(route); - }; - render() { // console.log("rendering SideBar"); return ( diff --git a/components/WebViewScreen.js b/components/WebViewScreen.js index b908e69..69aa465 100644 --- a/components/WebViewScreen.js +++ b/components/WebViewScreen.js @@ -35,6 +35,21 @@ export default class WebViewScreen extends React.Component { }; webviewArray: Array = []; + onRefreshClicked: Function; + onWebviewRef: Function; + onGoBackWebview: Function; + onGoForwardWebview: Function; + onOpenWebLink: Function; + + constructor() { + super(); + this.onRefreshClicked = this.onRefreshClicked.bind(this); + this.onWebviewRef = this.onWebviewRef.bind(this); + this.onGoBackWebview = this.onGoBackWebview.bind(this); + this.onGoForwardWebview = this.onGoForwardWebview.bind(this); + this.onOpenWebLink = this.onOpenWebLink.bind(this); + } + openWebLink(url: string) { Linking.openURL(url).catch((err) => console.error('Error opening link', err)); } @@ -43,7 +58,7 @@ export default class WebViewScreen extends React.Component { return ( clickAction()}> + onPress={clickAction}> @@ -54,36 +69,62 @@ export default class WebViewScreen extends React.Component { getRefreshButton() { return ( - {this.getHeaderButton(() => this.refreshWebview(), 'refresh')} + {this.getHeaderButton(this.onRefreshClicked, 'refresh')} ); }; - refreshWebview() { + onRefreshClicked() { for (let view of this.webviewArray) { if (view !== null) view.reload(); } } - goBackWebview() { + onGoBackWebview() { for (let view of this.webviewArray) { if (view !== null) view.goBack(); } } - goForwardWebview() { + onGoForwardWebview() { for (let view of this.webviewArray) { if (view !== null) view.goForward(); } } + onOpenWebLink() { + this.openWebLink(this.props.data[0]['url']) + } + + onWebviewRef(ref: WebView) { + this.webviewArray.push(ref) + } + + getRenderLoading() { + return ( + + + + ); + } + getWebview(obj: Object) { return ( (this.webviewArray.push(ref))} + ref={this.onWebviewRef} source={{uri: obj['url']}} style={{ width: '100%', @@ -92,21 +133,7 @@ export default class WebViewScreen extends React.Component { startInLoadingState={true} injectedJavaScript={obj['customJS']} javaScriptEnabled={true} - renderLoading={() => - - - - } + renderLoading={this.getRenderLoading} /> ); } @@ -167,7 +194,7 @@ export default class WebViewScreen extends React.Component { - {this.getHeaderButton(() => this.openWebLink(this.props.data[0]['url']), 'open-in-new')} + {this.getHeaderButton(this.onOpenWebLink, 'open-in-new')} { marginRight: 0, marginLeft: 'auto' }}> - {this.getHeaderButton(() => this.goBackWebview(), 'chevron-left')} - {this.getHeaderButton(() => this.goForwardWebview(), 'chevron-right')} + {this.getHeaderButton(this.onGoBackWebview, 'chevron-left')} + {this.getHeaderButton(this.onGoForwardWebview, 'chevron-right')} : } diff --git a/screens/About/AboutScreen.js b/screens/About/AboutScreen.js index 14d77a2..c866909 100644 --- a/screens/About/AboutScreen.js +++ b/screens/About/AboutScreen.js @@ -187,9 +187,14 @@ export default class AboutScreen extends React.Component { }, ]; + getCardItem: Function; + getMainCard: Function; + constructor(props: any) { super(props); this.modalRef = React.createRef(); + this.getCardItem = this.getCardItem.bind(this); + this.getMainCard = this.getMainCard.bind(this); } getAppCard() { @@ -211,9 +216,7 @@ export default class AboutScreen extends React.Component { extraData={this.state} keyExtractor={(item) => item.icon} listKey={"app"} - renderItem={({item}) => - this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug) - } + renderItem={this.getCardItem} /> ); @@ -242,9 +245,7 @@ export default class AboutScreen extends React.Component { extraData={this.state} keyExtractor={(item) => item.icon} listKey={"team1"} - renderItem={({item}) => - this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug) - } + renderItem={this.getCardItem} /> {i18n.t('aboutScreen.additionalDev')} @@ -254,9 +255,7 @@ export default class AboutScreen extends React.Component { extraData={this.state} keyExtractor={(item) => item.icon} listKey={"team2"} - renderItem={({item}) => - this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug) - } + renderItem={this.getCardItem} /> ); @@ -273,9 +272,7 @@ export default class AboutScreen extends React.Component { extraData={this.state} keyExtractor={(item) => item.icon} listKey={"techno"} - renderItem={({item}) => - this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug) - } + renderItem={this.getCardItem} /> ); @@ -284,24 +281,19 @@ export default class AboutScreen extends React.Component { /** * Get a clickable card item to be rendered inside a card. * - * @param onPressCallback The callback to use when the item is clicked - * @param icon The icon name to use from MaterialCommunityIcons - * @param text The text to show - * @param showChevron Whether to show a chevron indicating this button will change screen - * @param showOnlyInDebug Should we show te current item only in debug mode? * @returns {React.Node} */ - getCardItem(onPressCallback: Function, icon: string, text: string, showChevron: boolean, showOnlyInDebug: boolean) { - let shouldShow = !showOnlyInDebug || (showOnlyInDebug && this.state.isDebugUnlocked); + getCardItem({item}: Object) { + let shouldShow = !item.showOnlyInDebug || (item.showOnlyInDebug && this.state.isDebugUnlocked); if (shouldShow) { return ( + onPress={item.onPressCallback}> - - {text} + + {item.text} - {showChevron ? + {item.showChevron ? @@ -331,6 +323,8 @@ export default class AboutScreen extends React.Component { } getBugReportModal() { + const onPressMail = openWebLink.bind(this, links.bugsMail); + const onPressGit = openWebLink.bind(this, links.bugsGit); return ( { marginLeft: 'auto', marginRight: 'auto', }} - onPress={() => openWebLink(links.bugsMail)}> + onPress={onPressMail}> @@ -361,7 +355,7 @@ export default class AboutScreen extends React.Component { marginLeft: 'auto', marginRight: 'auto', }} - onPress={() => openWebLink(links.bugsGit)}> + onPress={onPressGit}> @@ -378,7 +372,7 @@ export default class AboutScreen extends React.Component { } } - getMainCard(item: Object) { + getMainCard({item}: Object) { switch (item.id) { case 'app': return this.getAppCard(); @@ -401,9 +395,7 @@ export default class AboutScreen extends React.Component { data={this.dataOrder} extraData={this.state} keyExtractor={(item) => item.id} - renderItem={({item}) => - this.getMainCard(item) - } + renderItem={this.getMainCard} /> ); diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index b4809e1..3df22a6 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -78,6 +78,7 @@ export default class ProximoListScreen extends React.Component { onSelectSortModePrice: Function; onSortMenuPress: Function; renderItem: Function; + onListItemPress: Function; constructor(props: any) { super(props); @@ -90,6 +91,7 @@ export default class ProximoListScreen extends React.Component { this.onSelectSortModePrice = this.onSelectSortModePrice.bind(this); this.onSortMenuPress = this.onSortMenuPress.bind(this); this.renderItem = this.renderItem.bind(this); + this.onListItemPress = this.onListItemPress.bind(this); } /** @@ -265,7 +267,7 @@ export default class ProximoListScreen extends React.Component { ); } - showItemDetails(item: Object) { + onListItemPress(item: Object) { this.setState({ modalCurrentDisplayItem: item }); @@ -318,9 +320,7 @@ export default class ProximoListScreen extends React.Component { renderItem({item}: Object) { return ( { - this.showItemDetails(item); - }} + onPress={this.onListItemPress} > diff --git a/screens/Proximo/ProximoMainScreen.js b/screens/Proximo/ProximoMainScreen.js index 932c689..b33cdd1 100644 --- a/screens/Proximo/ProximoMainScreen.js +++ b/screens/Proximo/ProximoMainScreen.js @@ -154,14 +154,13 @@ export default class ProximoMainScreen extends FetchedDataSectionList { shouldFocusSearchBar: false, data: item, }; + const onPress = this.props.navigation.navigate.bind(this, 'ProximoListScreen', dataToSend); if (item.data.length > 0) { return ( { - this.props.navigation.navigate('ProximoListScreen', dataToSend); - }} + onPress={onPress} > { @@ -245,13 +244,14 @@ export default class ProxiwashScreen extends FetchedDataSectionList { showAlert(title: string, item: Object, isDryer: boolean) { let buttons = [{text: i18n.t("proxiwashScreen.modal.ok")}]; let message = modalStateStrings[MACHINE_STATES[item.state]]; + const onPress = this.setupNotifications.bind(this, item.number); if (MACHINE_STATES[item.state] === MACHINE_STATES["EN COURS"]) { buttons = [ { text: this.isMachineWatched(item.number) ? i18n.t("proxiwashScreen.modal.disableNotifications") : i18n.t("proxiwashScreen.modal.enableNotifications"), - onPress: () => this.setupNotifications(item.number) + onPress: onPress }, { text: i18n.t("proxiwashScreen.modal.cancel") @@ -303,6 +303,7 @@ export default class ProxiwashScreen extends FetchedDataSectionList { let isMachineRunning = MACHINE_STATES[item.state] === MACHINE_STATES["EN COURS"]; let machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')) + ' n°' + item.number; let isDryer = section.title === i18n.t('proxiwashScreen.dryers'); + const onPress = this.showAlert.bind(this, machineName, item, isDryer); return ( this.showAlert(machineName, item, isDryer)} + onPress={onPress} style={{ height: 64, position: 'absolute', diff --git a/screens/SettingsScreen.js b/screens/SettingsScreen.js index 02047a0..53b7d68 100644 --- a/screens/SettingsScreen.js +++ b/screens/SettingsScreen.js @@ -43,6 +43,17 @@ export default class SettingsScreen extends React.Component { startScreenPickerSelected: AsyncStorageManager.getInstance().preferences.defaultStartScreen.current, }; + onProxiwashNotifPickerValueChange: Function; + onStartScreenPickerValueChange: Function; + onToggleNightMode: Function; + + constructor() { + super(); + this.onProxiwashNotifPickerValueChange = this.onProxiwashNotifPickerValueChange.bind(this); + this.onStartScreenPickerValueChange = this.onStartScreenPickerValueChange.bind(this); + this.onToggleNightMode = this.onToggleNightMode.bind(this); + } + /** * Get a list item using the specified control * @@ -118,7 +129,7 @@ export default class SettingsScreen extends React.Component { mode="dropdown" style={{width: 120}} selectedValue={this.state.proxiwashNotifPickerSelected} - onValueChange={(value) => this.onProxiwashNotifPickerValueChange(value)} + onValueChange={this.onProxiwashNotifPickerValueChange} > @@ -141,7 +152,7 @@ export default class SettingsScreen extends React.Component { mode="dropdown" style={{width: 120}} selectedValue={this.state.startScreenPickerSelected} - onValueChange={(value) => this.onStartScreenPickerValueChange(value)} + onValueChange={this.onStartScreenPickerValueChange} > @@ -155,7 +166,7 @@ export default class SettingsScreen extends React.Component { /** * Toggle night mode and save it to preferences */ - toggleNightMode() { + onToggleNightMode() { ThemeManager.getInstance().setNightMode(!this.state.nightMode); this.setState({nightMode: !this.state.nightMode}); this.resetStack(); @@ -203,7 +214,7 @@ export default class SettingsScreen extends React.Component { this.toggleNightMode()} + onPress={onPressCallback} style={{marginRight: 20}}/> @@ -221,7 +232,7 @@ export default class SettingsScreen extends React.Component { {i18n.t('settingsScreen.generalCard')} - {this.getToggleItem(() => this.toggleNightMode(), 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))} + {this.getToggleItem(this.onToggleNightMode, 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))} {SettingsScreen.getGeneralItem(this.getStartScreenPicker(), 'power', i18n.t('settingsScreen.startScreen'), i18n.t('settingsScreen.startScreenSub'))}