feat(ui): radio - add text support

Author: artyorsh

src/framework/ui/radio/radio.component.tsx

@@ -1,24 +1,32 @@
 import React from 'react';
 import {
-  TouchableOpacity,
   View,
-  StyleSheet,
+  TouchableOpacity,
   TouchableOpacityProps,
   GestureResponderEvent,
+  StyleSheet,
 } from 'react-native';
 import {
+  styled,
   StyledComponentProps,
   StyleType,
   Interaction,
 } from '@kitten/theme';
+import {
+  Text as TextComponent,
+  Props as TextProps,
+} from '../text/text.component';
 
 interface RadioProps {
+  text?: string;
   checked?: boolean;
   status?: string;
   size?: string;
   onChange?: (selected: boolean) => void;
 }
 
+const Text = styled<TextComponent, TextProps>(TextComponent);
+
 export type Props = RadioProps & StyledComponentProps & TouchableOpacityProps;
 
 export class Radio extends React.Component<Props> {
@@ -46,54 +54,73 @@ export class Radio extends React.Component<Props> {
   };
 
   private getComponentStyle = (style: StyleType): StyleType => {
-    const { select, highlight, ...container } = style;
+    const { text, select, highlight, ...container } = style;
 
     return {
-      container: {
-        ...container,
-        ...styles.container,
-      },
-      select: {
-        ...select,
-        ...styles.select,
-      },
-      highlight: {
-        ...highlight,
-        ...styles.highlight,
-      },
+      selectContainer: container,
+      select: select,
+      highlight: highlight,
+      text: text,
     };
   };
 
+  private renderTextElement = (style: StyleType): React.ReactElement<TextProps> => {
+    const { text } = this.props;
+
+    return (
+      <Text style={[style, styles.text]} key={0}>{text}</Text>
+    );
+  };
+
+  private renderComponentChildren = (style: StyleType): React.ReactNode => {
+    const { text } = this.props;
+
+    return [
+      text ? this.renderTextElement(style.text) : undefined,
+    ];
+  };
+
   public render(): React.ReactElement<TouchableOpacityProps> {
-    const { themedStyle, ...derivedProps } = this.props;
-    const { container, select, highlight } = this.getComponentStyle(themedStyle);
+    const { style, themedStyle, ...derivedProps } = this.props;
+    const { selectContainer, select, highlight, ...componentStyles } = this.getComponentStyle(themedStyle);
+    const componentChildren: React.ReactNode = this.renderComponentChildren(componentStyles);
 
     return (
-      <TouchableOpacity
-        {...derivedProps}
-        activeOpacity={1.0}
-        onPress={this.onPress}
-        onPressIn={this.onPressIn}
-        onPressOut={this.onPressOut}>
-        <View style={styles.container}>
-          <View style={highlight}/>
-          <View style={container}>
-            <View style={select}/>
-          </View>
+      <View style={[style, styles.container]}>
+        <View style={styles.highlightContainer}>
+          <View style={[highlight, styles.highlight]}/>
+          <TouchableOpacity
+            {...derivedProps}
+            style={[selectContainer, styles.selectContainer]}
+            activeOpacity={1.0}
+            onPress={this.onPress}
+            onPressIn={this.onPressIn}
+            onPressOut={this.onPressOut}>
+            <View style={[select, styles.select]}/>
+          </TouchableOpacity>
         </View>
-      </TouchableOpacity>
+        {componentChildren}
+      </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
   container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  highlightContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  selectContainer: {
     justifyContent: 'center',
     alignItems: 'center',
   },
   select: {},
   highlight: {
     position: 'absolute',
-    alignSelf: 'center',
   },
+  text: {},
 });

src/framework/ui/radio/radio.spec.config.ts

@@ -68,6 +68,10 @@ export const mapping: ThemeMappingType = {
         'mapping': {
           'borderWidth': 2,
           'borderColor': 'gray-primary',
+          'text': {
+            'color': 'text-primary',
+            'fontWeight': '500',
+          },
           'select': {
             'backgroundColor': 'transparent',
           },
@@ -89,6 +93,9 @@ export const mapping: ThemeMappingType = {
             },
             'disabled': {
               'borderColor': 'gray-light',
+              'text': {
+                'color': 'gray-300',
+              },
             },
             'checked.active': {
               'borderColor': 'blue-dark',
@@ -132,6 +139,10 @@ export const mapping: ThemeMappingType = {
                 'height': 50,
                 'borderRadius': 25,
               },
+              'text': {
+                'marginLeft': 10,
+                'fontSize': 14,
+              },
             },
             'medium': {
               'width': 36,
@@ -147,6 +158,10 @@ export const mapping: ThemeMappingType = {
                 'height': 60,
                 'borderRadius': 30,
               },
+              'text': {
+                'marginLeft': 12,
+                'fontSize': 16,
+              },
             },
             'large': {
               'width': 42,
@@ -162,6 +177,10 @@ export const mapping: ThemeMappingType = {
                 'height': 70,
                 'borderRadius': 35,
               },
+              'text': {
+                'marginLeft': 14,
+                'fontSize': 18,
+              },
             },
           },
         },
@@ -178,4 +197,11 @@ export const theme: ThemeType = {
   'gray-dark': '#8992A3',
   'gray-highlight': '#EDF0F5',
   'pink-primary': '#FF3D71',
+  'text-primary': '#000000',
+  'text-primary-inverse': '#ffffff',
+
+  'gray-100': '#f7f8fa',
+  'gray-200': '#edf0f5',
+  'gray-300': '#c8cedb',
+  'gray-400': '#a6aebd',
 };