diff --git a/app/containers/RoomHeader/RoomHeader.js b/app/containers/RoomHeader/RoomHeader.tsx similarity index 74% rename from app/containers/RoomHeader/RoomHeader.js rename to app/containers/RoomHeader/RoomHeader.tsx index 0f1ee472e..3faff5a21 100644 --- a/app/containers/RoomHeader/RoomHeader.js +++ b/app/containers/RoomHeader/RoomHeader.tsx @@ -1,8 +1,6 @@ import React, { useCallback } from 'react'; import PropTypes from 'prop-types'; -import { - View, Text, StyleSheet, TouchableOpacity -} from 'react-native'; +import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'; import I18n from '../../i18n'; import sharedStyles from '../../views/Styles'; @@ -17,7 +15,7 @@ const HIT_SLOP = { const TITLE_SIZE = 16; const SUBTITLE_SIZE = 12; -const getSubTitleSize = scale => SUBTITLE_SIZE * scale; +const getSubTitleSize = (scale: number) => SUBTITLE_SIZE * scale; const styles = StyleSheet.create({ container: { @@ -41,9 +39,42 @@ const styles = StyleSheet.create({ } }); -const SubTitle = React.memo(({ - usersTyping, subtitle, renderFunc, theme, scale -}) => { +type TRoomHeaderSubTitle = { + usersTyping: []; + theme: string; + subtitle: string; + renderFunc: any; + scale: number; +}; + +type TRoomHeaderHeaderTitle = { + title: string; + tmid: string; + prid: string; + scale: number; + theme: string; + testID: string; +}; + +interface IRoomHeader { + title: string; + subtitle: string; + type: string; + width: number; + height: number; + prid: string; + tmid: string; + teamMain: boolean; + status: string; + theme: string; + usersTyping: []; + isGroupChat: boolean; + parentTitle: string; + onPress: Function; + testID: string; +} + +const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, theme, scale }: TRoomHeaderSubTitle) => { const fontSize = getSubTitleSize(scale); // typing if (usersTyping.length) { @@ -69,6 +100,7 @@ const SubTitle = React.memo(({ // subtitle if (subtitle) { return ( + // @ts-ignore { +const HeaderTitle = React.memo(({ title, tmid, prid, scale, theme, testID }: TRoomHeaderHeaderTitle) => { const titleStyle = { fontSize: TITLE_SIZE * scale, color: themes[theme].headerTitleColor }; if (!tmid && !prid) { return ( @@ -107,6 +129,7 @@ const HeaderTitle = React.memo(({ } return ( + // @ts-ignore { +}: IRoomHeader) => { const portrait = height > width; let scale = 1; @@ -157,6 +171,7 @@ const Header = React.memo(({ accessibilityLabel={title} onPress={handleOnPress} style={styles.container} + // @ts-ignore disabled={tmid} hitSlop={HIT_SLOP} > @@ -182,26 +197,4 @@ const Header = React.memo(({ ); }); -Header.propTypes = { - title: PropTypes.string.isRequired, - subtitle: PropTypes.string, - type: PropTypes.string.isRequired, - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - prid: PropTypes.string, - tmid: PropTypes.string, - teamMain: PropTypes.bool, - status: PropTypes.string, - theme: PropTypes.string, - usersTyping: PropTypes.array, - isGroupChat: PropTypes.bool, - parentTitle: PropTypes.string, - onPress: PropTypes.func, - testID: PropTypes.string -}; - -Header.defaultProps = { - usersTyping: [] -}; - export default withTheme(Header); diff --git a/app/containers/RoomHeader/index.js b/app/containers/RoomHeader/index.tsx similarity index 77% rename from app/containers/RoomHeader/index.js rename to app/containers/RoomHeader/index.tsx index 7d4d22de8..c83632378 100644 --- a/app/containers/RoomHeader/index.js +++ b/app/containers/RoomHeader/index.tsx @@ -7,30 +7,31 @@ import RoomHeader from './RoomHeader'; import { withDimensions } from '../../dimensions'; import I18n from '../../i18n'; -class RoomHeaderContainer extends Component { - static propTypes = { - title: PropTypes.string, - subtitle: PropTypes.string, - type: PropTypes.string, - prid: PropTypes.string, - tmid: PropTypes.string, - teamMain: PropTypes.bool, - usersTyping: PropTypes.string, - status: PropTypes.string, - statusText: PropTypes.string, - connecting: PropTypes.bool, - connected: PropTypes.bool, - roomUserId: PropTypes.string, - widthOffset: PropTypes.number, - onPress: PropTypes.func, - width: PropTypes.number, - height: PropTypes.number, - parentTitle: PropTypes.string, - isGroupChat: PropTypes.bool, - testID: PropTypes.string - }; +interface IRoomHeaderContainerProps { + title: string; + subtitle: string; + type: string; + prid: string; + tmid: string; + teamMain: boolean; + usersTyping: string; + status: string; + statusText: string; + connecting: boolean; + connected: boolean; + roomUserId: string; + widthOffset: number; + onPress(): void; + width: number; + height: number; + parentTitle: string; + isGroupChat: boolean; + testID: string; +} - shouldComponentUpdate(nextProps) { +class RoomHeaderContainer extends Component { + + shouldComponentUpdate(nextProps: IRoomHeaderContainerProps) { const { type, title, subtitle, status, statusText, connecting, connected, onPress, usersTyping, width, height, teamMain } = this.props; @@ -129,12 +130,10 @@ class RoomHeaderContainer extends Component { } } -const mapStateToProps = (state, ownProps) => { +const mapStateToProps = (state: any, ownProps: any) => { let statusText; let status = 'offline'; - const { - roomUserId, type, visitor = {}, tmid - } = ownProps; + const { roomUserId, type, visitor = {}, tmid } = ownProps; if (state.meteor.connected) { if ((type === 'd' || (tmid && roomUserId)) && state.activeUsers[roomUserId]) {