feat(ui): input component

Author: artyorsh

src/framework/theme/type.ts

@@ -1,12 +1,12 @@
 export enum Interaction {
   ACTIVE = 'active',
+  FOCUSED = 'focused',
 }
 
 export enum State {
   CHECKED = 'checked',
   SELECTED = 'selected',
   DISABLED = 'disabled',
-  FOCUSED = 'focused',
 }
 
 export namespace Interaction {

src/framework/ui/index.ts

@@ -7,6 +7,10 @@ import {
   ButtonGroup as ButtonGroupComponent,
   Props as ButtonGroupProps,
 } from './buttonGroup/buttonGroup.component';
+import {
+  Input as InputComponent,
+  Props as InputProps,
+} from './input/input.component';
 import {
   Text as TextComponent,
   Props as TextProps,
@@ -86,6 +90,7 @@ import {
 
 const Button = styled<ButtonComponent, ButtonProps>(ButtonComponent);
 const ButtonGroup = styled<ButtonGroupComponent, ButtonGroupProps>(ButtonGroupComponent);
+const Input = styled<InputComponent, InputProps>(InputComponent);
 const Text = styled<TextComponent, TextProps>(TextComponent);
 const Radio = styled<RadioComponent, RadioProps>(RadioComponent);
 const RadioGroup = styled<RadioGroupComponent, RadioGroupProps>(RadioGroupComponent);
@@ -106,6 +111,7 @@ const Modal = styled<ModalComponent, ModalProps>(ModalComponent);
 export {
   Button,
   ButtonGroup,
+  Input,
   Text,
   Layout,
   LayoutProps,
@@ -123,6 +129,7 @@ export {
   ViewPager,
   TabView,
   ButtonProps,
+  InputProps,
   ButtonGroupProps,
   CheckBoxProps,
   TabProps,

src/framework/ui/input/input.component.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import {
+  ImageProps,
+  StyleSheet,
+  TextInput,
+  TextInputProps,
+  View,
+} from 'react-native';
+import {
+  Interaction,
+  StyledComponentProps,
+  StyleType,
+} from '@kitten/theme';
+import {
+  InputFocusEvent,
+  InputEndEditEvent,
+} from '../service/type';
+
+interface InputProps {
+  icon?: (style: StyleType) => React.ReactElement<ImageProps>;
+  status?: string;
+  disabled?: boolean;
+}
+
+export type Props = InputProps & StyledComponentProps & TextInputProps;
+
+export class Input extends React.Component<Props> {
+
+  private onFocus = (event: InputFocusEvent) => {
+    this.props.dispatch([Interaction.FOCUSED]);
+
+    if (this.props.onFocus) {
+      this.props.onFocus(event);
+    }
+  };
+
+  private onEndEditing = (event: InputEndEditEvent) => {
+    this.props.dispatch([]);
+
+    if (this.props.onEndEditing) {
+      this.props.onEndEditing(event);
+    }
+  };
+
+  private getComponentStyle = (style: StyleType): StyleType => {
+    const { text, icon, ...container } = style;
+
+    return {
+      container: container,
+      text: text,
+      icon: icon,
+    };
+  };
+
+  private getDerivedStyle = (style: StyleType): StyleType => {
+    const {
+      color,
+      fontFamily,
+      fontSize,
+      fontStyle,
+      fontWeight,
+      letterSpacing,
+      textAlign,
+      ...container
+    } = style;
+
+    return {
+      container: container,
+      text: {
+        color,
+        fontFamily,
+        fontSize,
+        fontStyle,
+        fontWeight,
+        letterSpacing,
+        textAlign,
+      },
+    };
+  };
+
+  private renderImageElement = (style: StyleType): React.ReactElement<ImageProps> => {
+    const { icon } = this.props;
+
+    return React.cloneElement(icon(style), { key: 0 });
+  };
+
+  private renderComponentChildren = (style: StyleType): React.ReactNode => {
+    const { icon } = this.props;
+
+    const hasIcon: boolean = icon !== undefined;
+
+    return [
+      hasIcon ? this.renderImageElement(style) : undefined,
+    ];
+  };
+
+  public render(): React.ReactElement<TextInputProps> {
+    const { style, themedStyle, disabled, ...derivedProps } = this.props;
+
+    const derivedStyle: StyleType = this.getDerivedStyle(style);
+    const componentStyle: StyleType = this.getComponentStyle(themedStyle);
+    const componentChildren: React.ReactNode = this.renderComponentChildren(componentStyle.icon);
+
+    return (
+      <View style={[componentStyle.container, derivedStyle.container, strictStyles.container]}>
+        <TextInput
+          {...derivedProps}
+          editable={!disabled}
+          onFocus={this.onFocus}
+          onEndEditing={this.onEndEditing}
+          style={[componentStyle.text, derivedStyle.text, strictStyles.text]}
+        />
+        {componentChildren}
+      </View>
+    );
+  }
+}
+
+const strictStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  text: {
+    flex: 1,
+  },
+  icon: {
+    flexGrow: 1,
+  },
+});