Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Migrate to function component #22025

Merged
merged 5 commits into from
Jul 7, 2023
Merged

Migrate to function component #22025

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f25302c
Migrate to function component
neonbhai Jul 1, 2023
8d535eb
Merge branch 'main' into 16215-migrating-BaseVideoChatButtonAndMenu
neonbhai Jul 5, 2023
3879ca0
Change setter function name
neonbhai Jul 7, 2023
456762b
Replace closePopover() with inline anonymous function
neonbhai Jul 7, 2023
4b80fb5
Replace DimensionsEventListenerRef with local variable
neonbhai Jul 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
205 changes: 94 additions & 111 deletions src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import _ from 'underscore';
import React, {Component} from 'react';
import React, {useState, useRef, useEffect, useCallback} from 'react';
import {View, Dimensions, Linking} from 'react-native';
import PropTypes from 'prop-types';
import Icon from '../Icon';
Expand Down Expand Up @@ -28,131 +28,114 @@ const propTypes = {
...windowDimensionsPropTypes,
};

class BaseVideoChatButtonAndMenu extends Component {
constructor(props) {
super(props);
function BaseVideoChatButtonAndMenu(props) {
const [isVideoChatMenuActive, setIsVideoChatMenuActive] = useState(false);
const [videoChatIconPosition, setVideoChatIconPosition] = useState({x: 0, y: 0});
const videoChatIconWrapperRef = useRef(null);
const videoChatButtonRef = useRef(null);

this.dimensionsEventListener = null;

this.measureVideoChatIconPosition = this.measureVideoChatIconPosition.bind(this);
this.videoChatIconWrapper = null;
this.menuItemData = [
{
icon: ZoomIcon,
text: props.translate('videoChatButtonAndMenu.zoom'),
onPress: () => {
this.setMenuVisibility(false);
Linking.openURL(CONST.NEW_ZOOM_MEETING_URL);
},
const menuItemData = [
{
icon: ZoomIcon,
text: props.translate('videoChatButtonAndMenu.zoom'),
onPress: () => {
setIsVideoChatMenuActive(false);
Linking.openURL(CONST.NEW_ZOOM_MEETING_URL);
},
{
icon: GoogleMeetIcon,
text: props.translate('videoChatButtonAndMenu.googleMeet'),
onPress: () => {
this.setMenuVisibility(false);
Linking.openURL(this.props.googleMeetURL);
},
},
{
icon: GoogleMeetIcon,
text: props.translate('videoChatButtonAndMenu.googleMeet'),
onPress: () => {
setIsVideoChatMenuActive(false);
Linking.openURL(props.googleMeetURL);
},
];

this.state = {
isVideoChatMenuActive: false,
videoChatIconPosition: {x: 0, y: 0},
};
}

componentDidMount() {
this.dimensionsEventListener = Dimensions.addEventListener('change', this.measureVideoChatIconPosition);
}

componentWillUnmount() {
if (!this.dimensionsEventListener) {
return;
}
this.dimensionsEventListener.remove();
}
},
];

/**
* Set the state variable isVideoChatMenuActive
* @param {Boolean} isVideoChatMenuActive
* This gets called onLayout to find the coordinates of the wrapper for the video chat button.
*/
setMenuVisibility(isVideoChatMenuActive) {
this.setState({isVideoChatMenuActive});
}

/**
* This gets called onLayout to find the cooridnates of the wrapper for the video chat button.
*/
measureVideoChatIconPosition() {
if (!this.videoChatIconWrapper) {
const measureVideoChatIconPosition = useCallback(() => {
if (!videoChatIconWrapperRef.current) {
return;
}

this.videoChatIconWrapper.measureInWindow((x, y) =>
this.setState({
videoChatIconPosition: {x, y},
}),
);
}
videoChatIconWrapperRef.current.measureInWindow((x, y) => {
setVideoChatIconPosition({x, y});
});
}, []);

useEffect(() => {
const dimensionsEventListener = Dimensions.addEventListener('change', measureVideoChatIconPosition);

return () => {
if (!dimensionsEventListener) {
return;
}

dimensionsEventListener.remove();
};
}, [measureVideoChatIconPosition]);

return (
<>
<View
ref={videoChatIconWrapperRef}
onLayout={measureVideoChatIconPosition}
>
<Tooltip text={props.translate('videoChatButtonAndMenu.tooltip')}>
<PressableWithoutFeedback
ref={videoChatButtonRef}
onPress={Session.checkIfActionIsAllowed(() => {
// Drop focus to avoid blue focus ring.
videoChatButtonRef.current.blur();

render() {
return (
<>
<View
ref={(el) => (this.videoChatIconWrapper = el)}
onLayout={this.measureVideoChatIconPosition}
>
<Tooltip text={this.props.translate('videoChatButtonAndMenu.tooltip')}>
<PressableWithoutFeedback
ref={(el) => (this.videoChatButton = el)}
onPress={Session.checkIfActionIsAllowed(() => {
// Drop focus to avoid blue focus ring.
this.videoChatButton.blur();
// If this is the Concierge chat, we'll open the modal for requesting a setup call instead
if (props.isConcierge && props.guideCalendarLink) {
Linking.openURL(props.guideCalendarLink);
return;
}
setIsVideoChatMenuActive(true);
})}
style={styles.touchableButtonImage}
accessibilityLabel={props.translate('videoChatButtonAndMenu.tooltip')}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
>
<Icon
src={Expensicons.Phone}
fill={isVideoChatMenuActive ? themeColors.heading : themeColors.icon}
/>
</PressableWithoutFeedback>
</Tooltip>
</View>

// If this is the Concierge chat, we'll open the modal for requesting a setup call instead
if (this.props.isConcierge && this.props.guideCalendarLink) {
Linking.openURL(this.props.guideCalendarLink);
return;
}
this.setMenuVisibility(true);
})}
style={styles.touchableButtonImage}
accessibilityLabel={this.props.translate('videoChatButtonAndMenu.tooltip')}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
>
<Icon
src={Expensicons.Phone}
fill={this.state.isVideoChatMenuActive ? themeColors.heading : themeColors.icon}
/>
</PressableWithoutFeedback>
</Tooltip>
<Popover
onClose={() => setIsVideoChatMenuActive(false)}
isVisible={isVideoChatMenuActive}
anchorPosition={{
left: videoChatIconPosition.x - 150,
top: videoChatIconPosition.y + 40,
}}
>
<View style={props.isSmallScreenWidth ? {} : styles.pv3}>
{_.map(menuItemData, ({icon, text, onPress}) => (
<MenuItem
wrapperStyle={styles.mr3}
key={text}
icon={icon}
title={text}
onPress={onPress}
/>
))}
</View>
<Popover
onClose={() => this.setMenuVisibility(false)}
isVisible={this.state.isVideoChatMenuActive}
anchorPosition={{
left: this.state.videoChatIconPosition.x - 150,
top: this.state.videoChatIconPosition.y + 40,
}}
>
<View style={this.props.isSmallScreenWidth ? {} : styles.pv3}>
{_.map(this.menuItemData, ({icon, text, onPress}) => (
<MenuItem
wrapperStyle={styles.mr3}
key={text}
icon={icon}
title={text}
onPress={onPress}
/>
))}
</View>
</Popover>
</>
);
}
</Popover>
</>
);
}

BaseVideoChatButtonAndMenu.propTypes = propTypes;
BaseVideoChatButtonAndMenu.defaultProps = defaultProps;
BaseVideoChatButtonAndMenu.displayName = 'BaseVideoChatButtonAndMenu';

export default compose(withWindowDimensions, withLocalize)(BaseVideoChatButtonAndMenu);