chore(ts): converted channels folder to TS [branch ch18108] (#410)

* chore(ts): converted channels folder to TS [branch ch18108] * chore: use ViewStyle instead of object for typings * chore: bump package-lock.json
anri-asaturov · Jan 2, 2019 · bf3b7f3 · bf3b7f3
1 parent 870b4a4
commit bf3b7f3
Show file tree

Hide file tree

Showing 15 changed files with 80 additions and 71 deletions.
diff --git a/app/components/buttons/blue-round-button.tsx b/app/components/buttons/blue-round-button.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View, TextStyle } from 'react-native';
 import { observer } from 'mobx-react/native';
 import SafeComponent from '../shared/safe-component';
 import { vars } from '../../styles/styles';
@@ -15,13 +15,13 @@ const touchableStyle = {
     justifyContent: 'center'
 };
 
-const textStyle = {
+const textStyle: TextStyle = {
     textAlign: 'center',
     color: vars.white,
     fontSize: vars.font.size14
 };
 
-const subtitleStyle = {
+const subtitleStyle: TextStyle = {
     textAlign: 'center',
     color: vars.textWhite50,
     fontSize: vars.font.size10

diff --git a/app/components/buttons/white-round-button.tsx b/app/components/buttons/white-round-button.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TouchableOpacity, View, ViewStyle } from 'react-native';
+import { TouchableOpacity, View, ViewStyle, TextStyle } from 'react-native';
 import { observer } from 'mobx-react/native';
 import SafeComponent from '../shared/safe-component';
 import { vars } from '../../styles/styles';
@@ -15,13 +15,13 @@ const touchableStyle = {
     justifyContent: 'center'
 };
 
-const textStyle = {
+const textStyle: TextStyle = {
     textAlign: 'center',
     color: vars.peerioBlue,
     fontSize: vars.font.size14
 };
 
-const subtitleStyle = {
+const subtitleStyle: TextStyle = {
     textAlign: 'center',
     color: vars.black54,
     fontSize: vars.font.size10

diff --git a/...nents/channels/channel-info-list-state.js → ...ents/channels/channel-info-list-state.tsx b/...nents/channels/channel-info-list-state.js → ...ents/channels/channel-info-list-state.tsx
@@ -4,7 +4,7 @@ import { View } from 'react-native';
 import { action } from 'mobx';
 import SafeComponent from '../shared/safe-component';
 import RecentFilesList from '../files/recent-files-list';
-import MemberList from '../channels/member-list';
+import MemberList from './member-list';
 import chatState from '../messaging/chat-state';
 
 @observer

diff --git a/...ponents/channels/channel-upgrade-offer.js → ...onents/channels/channel-upgrade-offer.tsx b/...ponents/channels/channel-upgrade-offer.js → ...onents/channels/channel-upgrade-offer.tsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { View, Platform } from 'react-native';
+import { View, Platform, ViewStyle, TextStyle } from 'react-native';
 import { observer } from 'mobx-react/native';
 import { User } from '../../lib/icebear';
 import { T } from '../utils/translator';
@@ -14,7 +14,7 @@ export default class ChannelUpgradeOffer extends Component {
     render() {
         if (User.current.channelsLeft > 0) return null;
 
-        const container = {
+        const container: ViewStyle = {
             flexGrow: 1,
             flex: 1,
             flexDirection: 'row',
@@ -27,7 +27,7 @@ export default class ChannelUpgradeOffer extends Component {
             marginRight: vars.spacing.medium.midi2x
         };
 
-        const offerTextStyle = {
+        const offerTextStyle: TextStyle = {
             color: 'white',
             backgroundColor: 'transparent',
             fontSize: vars.font.size12,
@@ -37,7 +37,7 @@ export default class ChannelUpgradeOffer extends Component {
             paddingBottom: Platform.OS === 'android' ? vars.spacing.small.midi : 0
         };
 
-        const buttonStyle = {
+        const buttonStyle: ViewStyle = {
             maxWidth: '25%',
             justifyContent: 'center',
             marginTop: vars.spacing.medium.midi

diff --git a/...onents/channels/create-channel-textbox.js → ...nents/channels/create-channel-textbox.tsx b/...onents/channels/create-channel-textbox.js → ...nents/channels/create-channel-textbox.tsx
@@ -8,11 +8,22 @@ import testLabel from '../helpers/test-label';
 import Text from '../controls/custom-text';
 import TextInputUncontrolled from '../controls/text-input-uncontrolled';
 import fonts from '../../styles/fonts';
+import { config } from '../../lib/icebear';
 
 const height = vars.inputHeight;
 const fontSize = vars.font.size14;
 
-const container = {
+export interface CreateChannelTextBoxProps {
+    state?: object;
+    labelText?: string;
+    placeholderText?: string;
+    property?: string;
+    bottomText?: string;
+    maxLength?: number;
+    multiline?: boolean;
+}
+
+const container: object = {
     flexDirection: 'row',
     alignItems: 'center',
     paddingHorizontal: vars.spacing.medium.maxi,
@@ -45,7 +56,7 @@ const titleStyle = {
 };
 
 @observer
-export default class CreateChannelTextBox extends Component {
+export default class CreateChannelTextBox extends Component<CreateChannelTextBoxProps> {
     @action.bound
     changeText(text) {
         this.props.state[this.props.property] = text;
@@ -84,7 +95,9 @@ export default class CreateChannelTextBox extends Component {
                         {...testLabel(testID)}
                     />
                 </View>
-                <Text style={bottomTextStyle}>{tx(bottomText)}</Text>
+                <Text style={bottomTextStyle}>{tx(bottomText, {
+                        maxChatNameLength: config.chat.maxChatNameLength
+                    })}</Text>
             </View>
         );
     }

diff --git a/app/components/channels/create-channel.js → app/components/channels/create-channel.tsx b/app/components/channels/create-channel.js → app/components/channels/create-channel.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { View, ScrollView, Dimensions, Keyboard } from 'react-native';
 import { observer } from 'mobx-react/native';
@@ -16,7 +15,7 @@ import Text from '../controls/custom-text';
 import ModalHeader from '../shared/modal-header';
 import { transitionAnimation } from '../helpers/animations';
 
-const fillView = { flex: 1, flexGrow: 1, backgroundColor: vars.darkBlueBackground05 };
+const fillView: object = { flex: 1, flexGrow: 1, backgroundColor: vars.darkBlueBackground05 };
 
 const { width } = Dimensions.get('window');
 
@@ -37,7 +36,10 @@ export default class CreateChannel extends Component {
     @observable channelName = '';
     @observable step = 0;
     @observable inProgress = false;
-
+    _disableScrollUpdate: boolean;
+    _scrollView: ScrollView;
+    _contactSelector: ContactSelectorUniversal;
+
     componentDidMount() {
         reaction(
             () => this.step,
@@ -101,7 +103,7 @@ export default class CreateChannel extends Component {
         return icons.disabledText(tu('button_next'));
     }
 
-    exitRow(testID) {
+    exitRow(testID?: string) {
         const leftIcon = icons.dark('close', () => chatState.routerModal.discard());
         const rightIcon = this.isValid ? this.nextIcon() : this.nextIconDisabled();
         const title = 'button_createChannel';
@@ -117,9 +119,7 @@ export default class CreateChannel extends Component {
                     placeholderText="title_channelNamePlaceholder"
                     property="channelName"
                     state={this}
-                    bottomText={tx('title_channelNameLimit', {
-                        maxChatNameLength: config.chat.maxChatNameLength
-                    })}
+                    bottomText="title_channelNameLimit"
                     maxLength={config.chat.maxChatNameLength}
                 />
             </View>
@@ -174,14 +174,10 @@ export default class CreateChannel extends Component {
 
     render() {
         return (
-            <View style={fillView} contentContainerStyle={fillView}>
+            <View style={fillView}>
                 {User.current.channelsLeft <= 0 ? this.paywall : this.scrollView}
                 <SnackBarConnection />
             </View>
         );
     }
 }
-
-CreateChannel.propTypes = {
-    createChat: PropTypes.any
-};
diff --git a/app/components/channels/member-list-item.js → app/components/channels/member-list-item.tsx b/app/components/channels/member-list-item.js → app/components/channels/member-list-item.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { observer } from 'mobx-react/native';
 import { View, TouchableOpacity } from 'react-native';
@@ -8,15 +7,23 @@ import chatState from '../messaging/chat-state';
 import icons from '../helpers/icons';
 import { tx } from '../utils/translator';
 import { vars } from '../../styles/styles';
-import { User } from '../../lib/icebear';
+import { User, Contact } from '../../lib/icebear';
 import testLabel from '../helpers/test-label';
 import Text from '../controls/custom-text';
 import ContactCard from '../shared/contact-card';
 import GrayLabel from '../controls/gray-label';
+import { Chat } from '../../lib/peerio-icebear/models';
+
+export interface MemberListItemProps {
+    contact: Contact;
+    channel: Chat;
+    onRemove: Function;
+    section: any;
+}
 
 @observer
-export default class MemberListItem extends SafeComponent {
-    rowStyle = {
+export default class MemberListItem extends SafeComponent<MemberListItemProps> {
+    rowStyle: Object = {
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
@@ -33,7 +40,7 @@ export default class MemberListItem extends SafeComponent {
         flexGrow: 1
     };
 
-    moreBtnStyle = {
+    moreBtnStyle: object = {
         flex: 0,
         flexDirection: 'row',
         alignItems: 'center'
@@ -118,6 +125,3 @@ export default class MemberListItem extends SafeComponent {
     }
 }
 
-MemberListItem.propTypes = {
-    contact: PropTypes.any.isRequired
-};
diff --git a/app/components/channels/member-list.js → app/components/channels/member-list.tsx b/app/components/channels/member-list.js → app/components/channels/member-list.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { observer } from 'mobx-react/native';
 import { SectionList } from 'react-native';
@@ -10,9 +9,16 @@ import { tx } from '../utils/translator';
 import MemberListItem from './member-list-item';
 import uiState from '../layout/ui-state';
 
+export interface MemberListProps {
+    collapsed: boolean,
+    toggleCollapsed: Function
+}
+
 @observer
-export default class MemberList extends SafeComponent {
-    get sections() {
+export default class MemberList extends SafeComponent<MemberListProps> {
+    reaction: Function;
+
+    get sections(): any[] {
         return [
             { data: this.channelMembers, key: tx('title_Members') },
             { data: this.channelInvites, key: tx('title_invited') }
@@ -60,7 +66,7 @@ export default class MemberList extends SafeComponent {
         };
     }
 
-    headers = ({ section: { key } }) => {
+    headers: any = ({ section: { key } }) => {
         let hidden = false;
         let toggleCollapsed = null;
         if (key === tx('title_Members')) {
@@ -89,7 +95,7 @@ export default class MemberList extends SafeComponent {
         }
     };
 
-    participant = ({ item, section }) => {
+    participant: any = ({ item, section }) => {
         return (
             <MemberListItem
                 contact={item}
@@ -114,7 +120,3 @@ export default class MemberList extends SafeComponent {
     }
 }
 
-MemberList.propTypes = {
-    collapsed: PropTypes.bool,
-    toggleCollapsed: PropTypes.func
-};
diff --git a/app/components/controls/custom-text.tsx b/app/components/controls/custom-text.tsx
@@ -1,19 +1,13 @@
 import React from 'react';
 import { observer } from 'mobx-react/native';
 /* eslint-disable */
-import { Text as RNText, Platform, TextProps } from 'react-native';
+import { Text as RNText, TextStyle, StyleProp, Platform, TextProps } from 'react-native';
 /* eslint-enable */
 import SafeComponent from '../shared/safe-component';
 import fonts from '../../styles/fonts';
 
-interface TextStyle {
-    fontWeight: string;
-    fontStyle: string;
-    fontFamily: string;
-}
-
 export interface CustomTextProps extends TextProps {
-    style?: object;
+    style?: StyleProp<TextStyle>;
     semibold?: boolean;
     bold?: boolean;
     italic?: boolean;

diff --git a/app/components/helpers/icons.tsx b/app/components/helpers/icons.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { TouchableOpacity, View, Image } from 'react-native';
+import { TouchableOpacity, View, Image, TextStyle } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { vars } from '../../styles/styles';
 import testLabel from './test-label';
 import Text from '../controls/custom-text';
 
-const goStyle = {
+const goStyle: TextStyle = {
     fontSize: vars.font.size14,
     color: vars.peerioBlue
 };
@@ -43,7 +43,7 @@ const icons = {
         );
     },
 
-    plaindark(name, size, style) {
+    plaindark(name, size?, style?) {
         return icons.plain(name, size, vars.darkIcon, undefined, style);
     },
 
@@ -122,7 +122,7 @@ const icons = {
         return <View style={s} />;
     },
 
-    text(text, onPress, style, testID, extraWidth) {
+    text(text, onPress?, style?: TextStyle, testID?, extraWidth?) {
         const size = vars.iconPadding * 2 + vars.iconSize;
         const containerStyle: object = {
             marginHorizontal: vars.iconPadding,
@@ -145,7 +145,7 @@ const icons = {
         );
     },
 
-    disabledText(text, style, extraWidth) {
+    disabledText(text, style?, extraWidth?) {
         const size = vars.iconPadding * 2 + vars.iconSize;
         const containerStyle: object = {
             marginHorizontal: vars.iconPadding,
@@ -179,7 +179,7 @@ const icons = {
             alignItems: 'center',
             justifyContent: 'center'
         };
-        const textStyle = {
+        const textStyle: TextStyle = {
             color: fgColor,
             fontSize: vars.font.size14,
             textAlign: 'center'

diff --git a/app/components/messaging/channel-invite-list-item.tsx b/app/components/messaging/channel-invite-list-item.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { observable, when, IReactionDisposer } from 'mobx';
 import { observer } from 'mobx-react/native';
-import { View, TouchableOpacity, ViewStyle } from 'react-native';
+import { View, TouchableOpacity, ViewStyle, TextStyle } from 'react-native';
 import Text from '../controls/custom-text';
 import SafeComponent from '../shared/safe-component';
 import { vars } from '../../styles/styles';
@@ -68,7 +68,7 @@ export default class ChannelInviteListItem extends SafeComponent<ChannelInviteLi
             overflow: 'hidden'
         };
 
-        const textStyle = {
+        const textStyle: TextStyle = {
             fontSize: vars.font.size16,
             color: vars.unreadTextColor,
             fontWeight: 'bold',