refactor(playground): update playground to use typescript

src/playground/src/app.component.tsx

@@ -18,20 +18,19 @@ interface State {
   theme: ThemeType;
 }
 
-export default class App extends React.Component<any, State> {
+type Props = any;
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      mapping: mapping,
-      styles: style,
-      theme: theme,
-    };
-  }
+export default class App extends React.Component<Props, State> {
+
+  public state: State = {
+    mapping: mapping,
+    styles: style,
+    theme: theme,
+  };
 
-  render() {
-    const { RadioScreen: RootScreen, ...nestedScreens } = Screens;
-    const Router = withNavigation(RootScreen, nestedScreens);
+  public render(): React.ReactNode {
+    const { RadioScreen: RootScreen, ...screens } = Screens;
+    const Router: React.ComponentClass = withNavigation(RootScreen, screens);
 
     return (
       <StyleProvider styles={this.state.styles} theme={this.state.theme} mapping={mapping}>

src/playground/src/navigation/navigation.component.tsx

@@ -17,31 +17,38 @@ export interface Props {
 
 const ROUTE_INITIAL = 'root';
 
-export const withNavigation = <P extends object>(Root: React.ComponentType<P>,
-                                                 routes: NavigationRouteConfigMap) => {
+export const withNavigation = <P extends object>(Root: React.ComponentType<P>, routes: NavigationRouteConfigMap) => {
 
   type WrapperProps = Props & P;
 
   class RootWrapper extends React.Component<WrapperProps> {
 
-    getComponentName = (Component: React.ComponentType) => Component.displayName || Component.name;
+    private getComponentName = (Component: React.ComponentType): string => {
+      return Component.displayName || Component.name;
+    };
+
+    private isComponentRoute = (name: string): boolean => {
+      const rootRouteName: string = this.getComponentName(Root);
+      const componentRouteName: string = this.getComponentName(routes[name]);
+
+      return componentRouteName !== rootRouteName;
+    };
 
-    createCustomProps = (): Props => {
-      const toRoute = (key: string): RouteType => ({ name: key });
+    private createRoute = (name: string): RouteType => {
       return {
-        routes: Object.keys(routes).filter(key => {
-          const rootComponentName = this.getComponentName(Root);
-          const componentName = this.getComponentName(routes[key]);
-          return rootComponentName !== componentName;
-        }).map(toRoute),
+        name: name,
       };
     };
 
-    render() {
+    private createRoutes = (): RouteType[] => {
+      return Object.keys(routes).filter(this.isComponentRoute).map(this.createRoute);
+    };
+
+    public render(): React.ReactNode {
       return (
         <Root
-          {...this.createCustomProps()}
           {...this.props}
+          routes={this.createRoutes()}
         />
       );
     }

src/playground/src/ui/screen/home.component.tsx

@@ -1,16 +1,17 @@
+import {
+  ThemedComponentProps,
+  ThemeType,
+  withStyles,
+} from '@kitten/theme';
 import React from 'react';
-import { NavigationScreenProps } from 'react-navigation';
 import {
   FlatList,
+  ListRenderItemInfo,
   Text,
   TouchableOpacity,
-  ListRenderItemInfo,
+  TouchableOpacityProps,
 } from 'react-native';
-import {
-  withStyles,
-  ThemeType,
-  ThemedComponentProps,
-} from '@kitten/theme';
+import { NavigationScreenProps } from 'react-navigation';
 import {
   NavigatorProps,
   RouteType,
@@ -24,13 +25,15 @@ class Home extends React.Component<Props> {
     title: 'Home',
   };
 
-  onItemPress = (route: RouteType) => {
+  private onItemPress = (route: RouteType) => {
     this.props.navigation.navigate(route.name);
   };
 
-  extractItemKey = (item: RouteType, index: number) => `${index}`;
+  private extractItemKey = (item: RouteType, index: number): string => {
+    return index.toString();
+  };
 
-  renderItem = (info: ListRenderItemInfo<any>) => (
+  private renderItem = (info: ListRenderItemInfo<RouteType>): React.ReactElement<TouchableOpacityProps> => (
     <TouchableOpacity
       style={this.props.themedStyle.itemContainer}
       key={info.index}
@@ -39,7 +42,7 @@ class Home extends React.Component<Props> {
     </TouchableOpacity>
   );
 
-  render() {
+  public render(): React.ReactNode {
     return (
       <FlatList
         keyExtractor={this.extractItemKey}

src/playground/src/ui/screen/radio.component.tsx

@@ -18,7 +18,6 @@ interface State {
   isRadio2Checked: boolean;
   isRadio3Checked: boolean;
   isRadio4Checked: boolean;
-  variant: string;
 }
 
 class Radio extends React.Component<Props, State> {
@@ -27,31 +26,30 @@ class Radio extends React.Component<Props, State> {
     title: 'Radio',
   };
 
-  state: State = {
+  public state: State = {
     isRadio1Checked: false,
     isRadio2Checked: true,
     isRadio3Checked: false,
     isRadio4Checked: true,
-    variant: 'default',
   };
 
-  onRadio1Change = (selected: boolean) => {
+  private onRadio1Change = (selected: boolean) => {
     this.setState({ isRadio1Checked: !selected });
   };
 
-  onRadio2Change = (selected: boolean) => {
+  private onRadio2Change = (selected: boolean) => {
     this.setState({ isRadio2Checked: !selected });
   };
 
-  onRadio3Change = (selected: boolean) => {
+  private onRadio3Change = (selected: boolean) => {
     this.setState({ isRadio3Checked: !selected });
   };
 
-  onRadio4Change = (selected: boolean) => {
+  private onRadio4Change = (selected: boolean) => {
     this.setState({ isRadio4Checked: !selected });
   };
 
-  render() {
+  public render(): React.ReactNode {
     return (
       <View style={this.props.themedStyle.container}>
         <View style={this.props.themedStyle.containerSection}>

src/playground/src/ui/screen/radioGroup.component.tsx

@@ -28,7 +28,7 @@ class RadioGroup extends React.Component<Props, State> {
     title: 'Radio Group',
   };
 
-  state: State = {
+  public state: State = {
     selectedIndexGroup1: 0,
     selectedIndexGroup2: 0,
     selectedIndexGroup3: 0,
@@ -52,7 +52,7 @@ class RadioGroup extends React.Component<Props, State> {
     });
   };
 
-  render() {
+  public render(): React.ReactNode {
     return (
       <View style={this.props.themedStyle.container}>
         <View style={this.props.themedStyle.containerSection}>