From de531b96329bb4227a6fceef38c5c91c7e0e07b8 Mon Sep 17 00:00:00 2001
From: Artur Yorsh <10753921+artyorsh@users.noreply.github.com>
Date: Tue, 21 Jan 2020 10:58:26 +0300
Subject: [PATCH] refactor(components): select - fix select strategies and add
 tests

---
 src/components/ui/select/select.component.tsx | 147 +++++++------
 src/components/ui/select/select.service.ts    | 169 ++++++++++++++
 src/components/ui/select/select.spec.tsx      |  69 +++++-
 .../ui/select/selectGroupOption.component.tsx | 135 +++++-------
 .../ui/select/selectOption.component.tsx      |  47 ++--
 .../ui/select/selectOptionsList.component.tsx |  52 ++---
 .../ui/select/selection.strategy.ts           | 206 ------------------
 src/components/ui/support/typings/index.ts    |   1 -
 src/components/ui/support/typings/type.ts     |   7 -
 9 files changed, 403 insertions(+), 430 deletions(-)
 create mode 100644 src/components/ui/select/select.service.ts
 delete mode 100644 src/components/ui/select/selection.strategy.ts

diff --git a/src/components/ui/select/select.component.tsx b/src/components/ui/select/select.component.tsx
index daeb4a63b..eacbce804 100644
--- a/src/components/ui/select/select.component.tsx
+++ b/src/components/ui/select/select.component.tsx
@@ -25,36 +25,33 @@ import {
   StyledComponentProps,
   StyleType,
 } from '@kitten/theme';
-import {
-  SelectOptionsList,
-  SelectOptionsListElement,
-} from './selectOptionsList.component';
 import {
   SelectOption,
   SelectOptionType,
 } from './selectOption.component';
 import {
-  MultiSelectStrategy,
-  SelectionStrategy,
-  SingleSelectStrategy,
-} from './selection.strategy';
+  SelectOptionsList,
+  SelectOptionsListElement,
+} from './selectOptionsList.component';
 import {
   Text,
   TextElement,
 } from '../text/text.component';
 import { IconElement } from '../icon/icon.component';
 import { Popover } from '../popover/popover.component';
+import {
+  ChevronDown,
+  ChevronDownElement,
+  ChevronDownProps,
+} from '../support/components/chevronDown.component';
 import {
   allWithPrefix,
   isValidString,
   WebEventResponder,
+  WebEventResponderCallbacks,
   WebEventResponderInstance,
 } from '../support/services';
-import {
-  ChevronDown,
-  ChevronDownElement,
-  ChevronDownProps,
-} from '../support/components/chevronDown.component';
+import { SelectService } from './select.service';
 
 type ControlElement = React.ReactElement<TouchableOpacityProps>;
 type IconProp = (style: ImageStyle, visible: boolean) => IconElement;
@@ -83,7 +80,7 @@ export interface SelectProps extends StyledComponentProps, TouchableOpacityProps
 export type SelectElement = React.ReactElement<SelectProps>;
 
 interface State {
-  visible: boolean;
+  optionsVisible: boolean;
 }
 
 /**
@@ -124,7 +121,7 @@ interface State {
  *
  * @property {SelectOptionType[]} data - Determines items of the Select component.
  *
- * @property {(option: SelectOption, event?: GestureResponderEvent) => void} onSelect - Fires on option selection.
+ * @property {(option: SelectOption, event?: GestureResponderEvent) => void} onSelect - Fires on option select.
  * Returns selected option/options.
  *
  * @property {StyleProp<TextStyle>} label - Determines the `label` of the component.
@@ -170,7 +167,7 @@ interface State {
  *
  * @example SelectInlineStyling
  */
-class SelectComponent extends React.Component<SelectProps, State> {
+class SelectComponent extends React.Component<SelectProps, State> implements WebEventResponderCallbacks {
 
   static styledComponentName: string = 'Select';
 
@@ -180,24 +177,17 @@ class SelectComponent extends React.Component<SelectProps, State> {
   };
 
   public state: State = {
-    visible: false,
+    optionsVisible: false,
   };
 
   private popoverRef: React.RefObject<Popover> = React.createRef();
-
   private webEventResponder: WebEventResponderInstance = WebEventResponder.create(this);
-
-  private selectionStrategy: SelectionStrategy<SelectOption>;
   private iconAnimation: Animated.Value = new Animated.Value(0);
 
-  constructor(props: SelectProps) {
-    super(props);
-    const { multiSelect, selectedOption, keyExtractor, data } = this.props;
-
-    this.selectionStrategy = multiSelect ?
-      new MultiSelectStrategy(selectedOption, data, keyExtractor) :
-      new SingleSelectStrategy(selectedOption, data, keyExtractor);
-  }
+  private selectService: SelectService = new SelectService({
+    multiSelect: this.props.multiSelect,
+    keyExtractor: this.props.keyExtractor,
+  });
 
   public show = (): void => {
     this.popoverRef.current.show();
@@ -208,32 +198,33 @@ class SelectComponent extends React.Component<SelectProps, State> {
   };
 
   public focus = (): void => {
-    this.setState({ visible: true }, this.dispatchActive);
+    this.setState({ optionsVisible: true }, this.onOptionsListVisible);
   };
 
   public blur = (): void => {
-    this.setState({ visible: true }, this.dispatchActive);
+    this.setState({ optionsVisible: false }, this.onOptionsListInvisible);
   };
 
   public isFocused = (): boolean => {
-    return this.state.visible;
+    return this.state.optionsVisible;
   };
 
   public clear = (): void => {
     if (this.props.onSelect) {
-      this.selectionStrategy.select(null);
       this.props.onSelect(null);
     }
   };
 
+  // WebEventResponderCallbacks
+
   public onMouseEnter = (): void => {
-    if (!this.state.visible) {
+    if (!this.state.optionsVisible) {
       this.props.dispatch([Interaction.HOVER]);
     }
   };
 
   public onMouseLeave = (): void => {
-    if (!this.state.visible) {
+    if (!this.state.optionsVisible) {
       this.props.dispatch([]);
     }
   };
@@ -247,7 +238,7 @@ class SelectComponent extends React.Component<SelectProps, State> {
   };
 
   private onPress = (event: GestureResponderEvent): void => {
-    this.toggleVisibility();
+    this.setOptionsListVisible();
 
     if (this.props.onPress) {
       this.props.onPress(event);
@@ -272,38 +263,44 @@ class SelectComponent extends React.Component<SelectProps, State> {
 
   private onSelect = (option: SelectOptionType, event: GestureResponderEvent): void => {
     if (this.props.onSelect) {
-      const selection: SelectOption = this.selectionStrategy.select(option, this.toggleVisibility);
-      this.props.onSelect(selection, event);
-      // FIXME: looks like a bug in selection strategy
-      this.forceUpdate();
+      const options: SelectOption = this.selectService.select(option, this.props.selectedOption);
+      !this.props.multiSelect && this.setOptionsListInvisible();
+
+      this.props.onSelect(options, event);
     }
   };
 
-  private toggleVisibility = (): void => {
-    const visible: boolean = !this.state.visible;
-    this.setState({ visible }, this.handleVisibleChange);
+  private onOptionsListVisible = (): void => {
+    this.props.dispatch([Interaction.ACTIVE]);
+    this.createIconAnimation(-180).start();
+  };
+
+  private onOptionsListInvisible = (): void => {
+    this.props.dispatch([]);
+    this.createIconAnimation(0).start();
+  };
+
+  private setOptionsListVisible = (): void => {
+    this.setState({ optionsVisible: true }, this.onOptionsListVisible);
   };
 
-  private handleVisibleChange = (): void => {
-    this.dispatchActive();
-    this.startIconAnimation();
+  private setOptionsListInvisible = (): void => {
+    this.setState({ optionsVisible: false }, this.onOptionsListInvisible);
   };
 
-  private dispatchActive = (): void => {
-    const interactions: Interaction[] = this.state.visible ? [Interaction.ACTIVE] : [];
-    this.props.dispatch(interactions);
+  private isOptionSelected = (option: SelectOptionType): boolean => {
+    return this.selectService.isSelected(option, this.props.selectedOption);
   };
 
-  private startIconAnimation = (): void => {
-    const deg: number = this.state.visible ? -180 : 0;
-    this.animateIcon(deg);
+  private isOptionGroup = (option: SelectOptionType): boolean => {
+    return SelectService.isGroup(option);
   };
 
-  private animateIcon = (toValue: number): void => {
-    Animated.timing(this.iconAnimation, {
+  private createIconAnimation = (toValue: number): Animated.CompositeAnimation => {
+    return Animated.timing(this.iconAnimation, {
       toValue: toValue,
       duration: 200,
-    }).start();
+    });
   };
 
   private getComponentStyle = (source: StyleType): StyleType => {
@@ -391,45 +388,47 @@ class SelectComponent extends React.Component<SelectProps, State> {
 
     return (
       <Animated.View style={animatedStyle}>
-        <ChevronDown fill={tintColor} {...svgStyle as ChevronDownProps}/>
+        <ChevronDown
+          fill={tintColor}
+          {...svgStyle as ChevronDownProps}
+        />
       </Animated.View>
     );
   };
 
   private renderIconElement = (style: ImageStyle): IconElement => {
-    const iconElement = this.props.icon(style, this.state.visible);
+    const iconElement: React.ReactElement = this.props.icon(style, this.state.optionsVisible);
 
     return React.cloneElement(iconElement, {
       style: [style, iconElement.props.style],
     });
   };
 
-  private renderTextElement = (valueStyle: TextStyle, placeholderStyle: TextStyle): TextElement => {
-    const { placeholder, textStyle } = this.props;
-    const value: string = this.selectionStrategy.getPlaceholder(placeholder);
-    const style: TextStyle = placeholder === value ? placeholderStyle : valueStyle;
+  private renderTextElement = (style: StyleType): TextElement => {
+    const value: string = this.selectService.toStringOptions(this.props.selectedOption);
+    const textStyle: TextStyle = value && style.text;
 
     return (
       <Text
-        style={[style, styles.text, textStyle]}
+        style={[styles.text, style.placeholder, textStyle, this.props.textStyle]}
         numberOfLines={1}
         ellipsizeMode='tail'>
-        {value}
+        {value || this.props.placeholder}
       </Text>
     );
   };
 
   private renderOptionsListElement = (style: StyleType): SelectOptionsListElement => {
-    const { appearance, selectedOption, ...restProps } = this.props;
-
     return (
       <SelectOptionsList
-        {...restProps}
         key={0}
-        style={styles.optionsList}
-        bounces={false}
-        strategy={this.selectionStrategy}
+        style={[styles.optionsList, style]}
+        data={this.props.data}
+        multiSelect={this.props.multiSelect}
+        isOptionSelected={this.isOptionSelected}
+        isOptionGroup={this.isOptionGroup}
         onSelect={this.onSelect}
+        keyExtractor={this.props.keyExtractor}
       />
     );
   };
@@ -439,7 +438,7 @@ class SelectComponent extends React.Component<SelectProps, State> {
 
     return [
       iconElement || this.renderDefaultIconElement(style.icon),
-      this.renderTextElement(style.text, style.placeholder),
+      this.renderTextElement(style),
     ];
   };
 
@@ -474,7 +473,11 @@ class SelectComponent extends React.Component<SelectProps, State> {
     const { themedStyle, style } = this.props;
     const { popover, ...componentStyle }: StyleType = this.getComponentStyle(themedStyle);
 
-    const [optionsListElement, labelElement, controlElement] = this.renderComponentChildren(componentStyle);
+    const [
+      optionsListElement,
+      labelElement,
+      controlElement,
+    ] = this.renderComponentChildren(componentStyle);
 
     return (
       <View style={style}>
@@ -483,9 +486,9 @@ class SelectComponent extends React.Component<SelectProps, State> {
           ref={this.popoverRef}
           style={[popover, styles.popover]}
           fullWidth={true}
-          visible={this.state.visible}
+          visible={this.state.optionsVisible}
           content={optionsListElement}
-          onBackdropPress={this.toggleVisibility}>
+          onBackdropPress={this.setOptionsListInvisible}>
           {controlElement}
         </Popover>
       </View>
diff --git a/src/components/ui/select/select.service.ts b/src/components/ui/select/select.service.ts
new file mode 100644
index 000000000..843cf8183
--- /dev/null
+++ b/src/components/ui/select/select.service.ts
@@ -0,0 +1,169 @@
+import { KeyExtractorType } from './select.component';
+import { SelectOptionType } from './selectOption.component';
+
+type Options = SelectOptionType | SelectOptionType[];
+
+interface SelectStrategy<T = Options> {
+  select: (option: SelectOptionType, selectedOptions: T) => T;
+  isSelected: (option: SelectOptionType, selectedOptions: T) => boolean;
+  toStringOptions: (options: T) => string;
+}
+
+interface SelectServiceOptions {
+  multiSelect?: boolean;
+  keyExtractor?: (option: SelectOptionType) => string;
+}
+
+export class SelectService {
+
+  private strategy: SelectStrategy;
+
+  constructor(options: SelectServiceOptions = {}) {
+    const { multiSelect, keyExtractor } = options;
+    this.strategy = multiSelect ? new MultiSelectStrategy(keyExtractor) : new SingleSelectStrategy(
+      keyExtractor);
+  }
+
+  public select = (option: SelectOptionType, selectedOptions: Options): Options => {
+    return this.strategy.select(option, selectedOptions);
+  };
+
+  public isSelected = (option: SelectOptionType, options: Options): boolean => {
+    return this.strategy.isSelected(option, options);
+  };
+
+  public toStringOptions = (options: Options): string => {
+    return options && this.strategy.toStringOptions(options);
+  };
+
+  static isGroup = (option: SelectOptionType): boolean => {
+    return option.items && option.items.length > 0;
+  };
+
+  static toStringOption = (option: SelectOptionType): string => {
+    return option.text;
+  };
+
+  static isEqualOptions = (lhs: SelectOptionType,
+                           rhs: SelectOptionType,
+                           keyExtractor?: KeyExtractorType): boolean => {
+
+    if (keyExtractor) {
+      return (lhs && rhs) && keyExtractor(lhs) === keyExtractor(rhs);
+    }
+
+    return lhs === rhs;
+  };
+}
+
+class SingleSelectStrategy implements SelectStrategy<SelectOptionType> {
+
+  constructor(private keyExtractor: KeyExtractorType) {
+  }
+
+  public select = (option: SelectOptionType): SelectOptionType => {
+    return option;
+  };
+
+  public isSelected = (option: SelectOptionType, selectedOption: SelectOptionType): boolean => {
+    if (SelectService.isGroup(option)) {
+      return option.items.some(groupOption => this.isSelected(groupOption, selectedOption));
+    }
+    return SelectService.isEqualOptions(selectedOption, option, this.keyExtractor);
+  };
+
+  public toStringOptions = (option: SelectOptionType): string => {
+    return SelectService.toStringOption(option);
+  };
+}
+
+class MultiSelectStrategy implements SelectStrategy<SelectOptionType[]> {
+
+  constructor(private keyExtractor: KeyExtractorType) {
+  }
+
+  public select = (option: SelectOptionType,
+                   selectedOptions: SelectOptionType[] = []): SelectOptionType[] => {
+
+    if (SelectService.isGroup(option)) {
+      return this.selectOptionGroup(option, selectedOptions);
+    } else {
+      return this.selectOption(option, selectedOptions);
+    }
+  };
+
+  public isSelected = (option: SelectOptionType,
+                       selectedOptions: SelectOptionType[] = []): boolean => {
+
+    return this.isOptionSelected(option, selectedOptions);
+  };
+
+  public toStringOptions = (options: SelectOptionType[] = []): string => {
+    return options.map(SelectService.toStringOption).join(', ');
+  };
+
+  private selectOptionGroup = (option: SelectOptionType,
+                               selectedOptions: SelectOptionType[]): SelectOptionType[] => {
+
+    if (this.isGroupSelected(option, selectedOptions)) {
+      return this.removeOptionGroup(option, selectedOptions);
+    } else {
+      return this.addOptionGroup(option, selectedOptions);
+    }
+  };
+
+  private selectOption = (option: SelectOptionType,
+                          selectedOptions: SelectOptionType[]): SelectOptionType[] => {
+
+    if (this.isOptionSelected(option, selectedOptions)) {
+      return this.removeOption(selectedOptions, option);
+    } else {
+      return this.addOption(option, selectedOptions);
+    }
+  };
+
+  private isGroupSelected = (group: SelectOptionType,
+                             selectedOptions: SelectOptionType[]): boolean => {
+
+    return selectedOptions.some((selectedOption: SelectOptionType): boolean => {
+      return this.isOptionSelected(selectedOption, group.items);
+    });
+  };
+
+  private isOptionSelected = (option: SelectOptionType,
+                              selectedOptions: SelectOptionType[]): boolean => {
+
+    return selectedOptions.some((selectedOption: SelectOptionType): boolean => {
+      return SelectService.isEqualOptions(selectedOption, option, this.keyExtractor);
+    });
+  };
+
+  private addOptionGroup = (option: SelectOptionType,
+                            selectedOptions: SelectOptionType[]): SelectOptionType[] => {
+
+    const options: SelectOptionType[] = option.items.filter(groupOption => !groupOption.disabled);
+
+    return selectedOptions.concat(options);
+  };
+
+  private addOption = (option: SelectOptionType,
+                       selectedOptions: SelectOptionType[]) => {
+
+    return selectedOptions.concat(option);
+  };
+
+  private removeOptionGroup = (option: SelectOptionType,
+                               selectedOptions: SelectOptionType[]): SelectOptionType[] => {
+
+    return option.items.reduce(this.removeOption, selectedOptions);
+  };
+
+  private removeOption = (selectedOptions: SelectOptionType[],
+                          option: SelectOptionType): SelectOptionType[] => {
+
+    return selectedOptions.filter((selectedOption: SelectOptionType): boolean => {
+      return !SelectService.isEqualOptions(selectedOption, option, this.keyExtractor);
+    });
+  };
+}
+
diff --git a/src/components/ui/select/select.spec.tsx b/src/components/ui/select/select.spec.tsx
index b69a5c529..6c6bcfefe 100644
--- a/src/components/ui/select/select.spec.tsx
+++ b/src/components/ui/select/select.spec.tsx
@@ -5,8 +5,8 @@ import {
   TouchableOpacity,
 } from 'react-native';
 import {
-  render,
   fireEvent,
+  render,
   RenderAPI,
 } from 'react-native-testing-library';
 import {
@@ -19,6 +19,7 @@ import {
   mapping,
   theme,
 } from '../support/tests';
+import { SelectService } from './select.service';
 
 jest.useFakeTimers();
 
@@ -91,7 +92,8 @@ class TestApplication extends React.Component<Props> {
           onPressIn={onSelectPressIn}
           onPressOut={onSelectPressOut}
           onLongPress={onSelectLongPress}
-          onSelect={() => {}}
+          onSelect={() => {
+          }}
         />
         <Select
           label={selectLabel}
@@ -100,13 +102,74 @@ class TestApplication extends React.Component<Props> {
           multiSelect={true}
           icon={this.renderIcon}
           onPress={onMultiSelectPress}
-          onSelect={() => {}}
+          onSelect={() => {
+          }}
         />
       </ApplicationProvider>
     );
   }
 }
 
+describe('@select: service checks', () => {
+
+  const options: SelectOptionType[] = [
+    { text: 'Option 1' },
+    { text: 'Option 2' },
+    { text: 'Option 3' },
+  ];
+
+  const groupOptions: SelectOptionType[] = [
+    {
+      text: 'Group', items: [
+        { text: 'Option 1' },
+        { text: 'Option 2' },
+      ],
+    },
+  ];
+
+  it('* should select single value', () => {
+    const service = new SelectService();
+    const selectedOption = service.select(options[0], []);
+
+    expect(selectedOption).toEqual({ text: 'Option 1' });
+  });
+
+  it('* should change selected value', () => {
+    const service = new SelectService();
+    const selectedOption = service.select(options[1], [options[0]]);
+
+    expect(selectedOption).toEqual({ text: 'Option 2' });
+  });
+
+  it('* should select single from group', () => {
+    const service = new SelectService();
+    const selectedOption = service.select(groupOptions[0].items[0], []);
+
+    expect(selectedOption).toEqual({ text: 'Option 1' });
+  });
+
+  it('* should select all from group', () => {
+    const service = new SelectService();
+    const selectedOption = service.select(groupOptions[0], []);
+
+    expect(selectedOption).toEqual(groupOptions[0]);
+  });
+
+  it('* should change selected value from group', () => {
+    const service = new SelectService();
+    const selectedOption = service.select(groupOptions[0].items[0], groupOptions[0]);
+
+    expect(selectedOption).toEqual({ text: 'Option 1' });
+  });
+
+  it('* should select multiple values', () => {
+    const service = new SelectService({ multiSelect: true });
+    const selectedOption = service.select(options[1], [options[0]]);
+
+    expect(selectedOption).toEqual([{ text: 'Option 1' }, { text: 'Option 2' }]);
+  });
+
+});
 
 describe('@select component checks', () => {
 
diff --git a/src/components/ui/select/selectGroupOption.component.tsx b/src/components/ui/select/selectGroupOption.component.tsx
index 339a42d68..cb7e23def 100644
--- a/src/components/ui/select/selectGroupOption.component.tsx
+++ b/src/components/ui/select/selectGroupOption.component.tsx
@@ -5,10 +5,7 @@
  */
 
 import React from 'react';
-import {
-  ListRenderItemInfo,
-  View,
-} from 'react-native';
+import { View } from 'react-native';
 import {
   styled,
   StyledComponentProps,
@@ -17,24 +14,16 @@ import {
 import {
   SelectOption,
   SelectOptionElement,
-  SelectOptionProps,
   SelectOptionType,
 } from './selectOption.component';
-import { SelectOption as SelectOptionProp } from './select.component';
-import { SelectionStrategy } from './selection.strategy';
-
-interface ComponentProps {
-  multi?: boolean;
-  strategy: SelectionStrategy<SelectOptionProp>;
-  renderItem?: (item: ListRenderItemInfo<SelectOptionType>) => React.ReactElement;
-}
 
-interface MainItemStatus {
-  selected: boolean;
-  indeterminate: boolean;
+export interface SelectGroupOptionProps extends StyledComponentProps {
+  multi: boolean;
+  item: SelectOptionType;
+  isOptionSelected: (item: SelectOptionType) => boolean;
+  onSelect: (item: SelectOptionType) => void;
 }
 
-export type SelectGroupOptionProps = ComponentProps & Partial<SelectOptionProps> & StyledComponentProps;
 export type SelectGroupOptionElement = React.ReactElement<SelectGroupOptionProps>;
 
 class SelectGroupOptionComponent extends React.Component<SelectGroupOptionProps> {
@@ -42,107 +31,99 @@ class SelectGroupOptionComponent extends React.Component<SelectGroupOptionProps>
   static styledComponentName: string = 'SelectGroupOption';
 
   private getComponentStyle = (source: StyleType): StyleType => {
-    const {
-      itemPaddingHorizontal,
-      ...containerStyles
-    } = source;
+    const { itemPaddingHorizontal, ...containerParameters } = source;
 
     return {
-      container: containerStyles,
+      container: containerParameters,
       item: {
         paddingHorizontal: itemPaddingHorizontal,
       },
     };
   };
 
-  private getMainItemStatus = (subItemsSelectedStatusArray: boolean[]): MainItemStatus => {
-    const someSelected: boolean = subItemsSelectedStatusArray
-      .some((item: boolean) => item === true);
-    const everySelected: boolean = subItemsSelectedStatusArray
-      .every((item: boolean) => item === true);
-
-    switch (true) {
-      case (someSelected && !everySelected):
-        return { selected: true, indeterminate: true };
-      case  !someSelected:
-        return { selected: false, indeterminate: false };
-      case everySelected:
-        return { selected: true, indeterminate: false };
+  private getGroupOptionMainItemProps = (children: SelectOptionElement[]) => {
+    const selectedItems: boolean[] = children.map(element => element.props.selected);
+
+    const someSelected: boolean = selectedItems.some((item: boolean) => item === true);
+    const everySelected: boolean = selectedItems.every((item: boolean) => item === true);
+
+    if (someSelected && !everySelected) {
+      return { selected: true, indeterminate: true };
     }
-  };
 
-  private renderSubItem = (option: SelectOptionType, index: number): SelectOptionElement => {
-    const { item, renderItem, strategy, ...restProps } = this.props;
-    const returningOption: ListRenderItemInfo<SelectOptionType> = {
-      item: option,
-      index: index,
-      separators: null,
-    };
-    const selected: boolean = strategy.isSelected(option);
+    if (!someSelected) {
+      return { selected: false, indeterminate: false };
+    }
+
+    if (everySelected) {
+      return { selected: true, indeterminate: false };
+    }
+  };
 
-    return renderItem ? renderItem(returningOption) : (
+  private renderGroupOptionElement = (option: SelectOptionType, index: number): SelectOptionElement => {
+    return (
       <SelectOption
-        {...restProps}
-        selected={selected}
+        key={index}
+        multi={this.props.multi}
         item={option}
+        selected={this.props.isOptionSelected(option)}
+        onSelect={this.props.onSelect}
       />
     );
   };
 
-  private renderSubItemsElements = (): SelectOptionElement[] => {
-    const { item, themedStyle } = this.props;
-    const { item: itemStyle } = this.getComponentStyle(themedStyle);
+  private renderGroupOptionElements = (componentStyle: StyleType): SelectOptionElement[] => {
+    return this.props.item.items.map((option: SelectOptionType, index: number) => {
+      const optionElement: SelectOptionElement = this.renderGroupOptionElement(option, index);
 
-    return item.items
-      .map((option: SelectOptionType, index: number) => {
-        const element: SelectOptionElement = this.renderSubItem(option, index);
-
-        return React.cloneElement(element, {
-          ...option,
-          style: [element.props.style, itemStyle],
-          key: index,
-        });
+      return React.cloneElement(optionElement, {
+        style: [optionElement.props.style, componentStyle.item],
       });
+    });
   };
 
-  private renderMultiSelectMainElement = (subItemsElements: SelectOptionElement[]): SelectOptionElement => {
-    const { item, ...restProps } = this.props;
-    const subItemsSelectedStatusArray: boolean[] = subItemsElements
-      .map((subItem: SelectOptionElement) => subItem.props.selected);
-    const itemStatus: MainItemStatus = this.getMainItemStatus(subItemsSelectedStatusArray);
-
+  private renderSingleElement = (): SelectOptionElement => {
     return (
       <SelectOption
-        {...restProps}
-        {...itemStatus}
-        item={item}
+        key={0}
+        multi={this.props.multi}
+        item={this.props.item}
+        selected={false}
+        onSelect={this.props.onSelect}
+        disabled={true}
       />
     );
   };
 
-  private renderDefaultMainElement = (): SelectOptionElement => {
+  private renderGroupElement = (children: SelectOptionElement[]): SelectOptionElement => {
     return (
       <SelectOption
+        {...this.getGroupOptionMainItemProps(children)}
+        key={0}
+        multi={this.props.multi}
         item={this.props.item}
-        disabled={true}
+        onSelect={this.props.onSelect}
       />
     );
   };
 
-  private renderMainElement = (subItemsElements: SelectOptionElement[]): SelectOptionElement => {
-    return this.props.multi ? this.renderMultiSelectMainElement(subItemsElements) : this.renderDefaultMainElement();
+  private renderComponentChildren = (componentStyle: StyleType): React.ReactNodeArray => {
+    const groupOptions: SelectOptionElement[] = this.renderGroupOptionElements(componentStyle);
+
+    return [
+      this.props.multi ? this.renderGroupElement(groupOptions) : this.renderSingleElement(),
+      groupOptions,
+    ];
   };
 
   public render(): SelectGroupOptionElement {
-    const { themedStyle } = this.props;
-    const { container } = this.getComponentStyle(themedStyle);
-    const subItemsElements: SelectOptionElement[] = this.renderSubItemsElements();
-    const mainElement: SelectOptionElement = this.renderMainElement(subItemsElements);
+    const { container, ...componentStyle } = this.getComponentStyle(this.props.themedStyle);
+    const [mainElement, groupOptionElements] = this.renderComponentChildren(componentStyle);
 
     return (
       <View style={container}>
         {mainElement}
-        {subItemsElements}
+        {groupOptionElements}
       </View>
     );
   }
diff --git a/src/components/ui/select/selectOption.component.tsx b/src/components/ui/select/selectOption.component.tsx
index cead55c90..3262b9363 100644
--- a/src/components/ui/select/selectOption.component.tsx
+++ b/src/components/ui/select/selectOption.component.tsx
@@ -12,7 +12,7 @@ import {
   TextStyle,
   TouchableOpacity,
   TouchableOpacityProps,
-  View,
+  View, ViewProps,
 } from 'react-native';
 import {
   Interaction,
@@ -22,7 +22,7 @@ import {
 } from '@kitten/theme';
 import {
   Text,
-  TextProps,
+  TextElement,
 } from '../text/text.component';
 import { CheckBox } from '../checkbox/checkbox.component';
 import {
@@ -30,10 +30,6 @@ import {
   WebEventResponderCallbacks,
   WebEventResponderInstance,
 } from '../support/services';
-import { TouchableTypeReturningProps } from '../support/typings';
-
-type TextElement = React.ReactElement<TextProps>;
-type ItemElement = React.ReactElement<TouchableOpacityProps>;
 
 export interface SelectOptionType {
   text: string;
@@ -42,14 +38,14 @@ export interface SelectOptionType {
   items?: SelectOptionType[];
 }
 
-export interface ComponentProps {
+export interface SelectOptionProps extends StyledComponentProps, TouchableOpacityProps {
   item: SelectOptionType;
-  selected?: boolean;
+  selected: boolean;
   indeterminate?: boolean;
   multi?: boolean;
+  onSelect: (item: SelectOptionType) => void;
 }
 
-export type SelectOptionProps = ComponentProps & StyledComponentProps & TouchableTypeReturningProps<SelectOptionType>;
 export type SelectOptionElement = React.ReactElement<SelectOptionProps>;
 
 class SelectOptionComponent extends React.Component<SelectOptionProps> implements WebEventResponderCallbacks {
@@ -58,6 +54,8 @@ class SelectOptionComponent extends React.Component<SelectOptionProps> implement
 
   private webEventResponder: WebEventResponderInstance = WebEventResponder.create(this);
 
+  // WebEventResponderCallbacks
+
   public onMouseEnter = (): void => {
     this.props.dispatch([Interaction.HOVER]);
   };
@@ -67,31 +65,17 @@ class SelectOptionComponent extends React.Component<SelectOptionProps> implement
   };
 
   private onPress = (event: GestureResponderEvent): void => {
-    if (this.props.onPress) {
-      this.props.onPress(this.props.item, event);
+    if (this.props.onSelect) {
+      this.props.onSelect(this.props.item);
     }
   };
 
   private onPressIn = (event: GestureResponderEvent): void => {
     this.props.dispatch([Interaction.ACTIVE]);
-
-    if (this.props.onPressIn) {
-      this.props.onPressIn(this.props.item, event);
-    }
   };
 
   private onPressOut = (event: GestureResponderEvent): void => {
     this.props.dispatch([]);
-
-    if (this.props.onPressOut) {
-      this.props.onPressOut(this.props.item, event);
-    }
-  };
-
-  private onLongPress = (event: GestureResponderEvent): void => {
-    if (this.props.onLongPress) {
-      this.props.onLongPress(this.props.item, event);
-    }
   };
 
   private onMultiSelectItemPress = (value: boolean): void => {
@@ -106,11 +90,11 @@ class SelectOptionComponent extends React.Component<SelectOptionProps> implement
       textFontWeight,
       textLineHeight,
       textMarginHorizontal,
-      ...containerStyles
+      ...containerParameters
     } = source;
 
     return {
-      container: containerStyles,
+      container: containerParameters,
       text: {
         color: textColor,
         fontFamily: textFontFamily,
@@ -130,7 +114,7 @@ class SelectOptionComponent extends React.Component<SelectOptionProps> implement
     );
   };
 
-  private renderDefaultItem = (): ItemElement => {
+  private renderSingleElement = (): React.ReactElement<TouchableOpacityProps> => {
     const { themedStyle, style, item, ...restProps } = this.props;
     const { container, text } = this.getComponentStyle(themedStyle);
     const textElement: TextElement = this.renderTextElement(text);
@@ -143,14 +127,13 @@ class SelectOptionComponent extends React.Component<SelectOptionProps> implement
         style={[styles.container, container, style]}
         onPress={this.onPress}
         onPressIn={this.onPressIn}
-        onPressOut={this.onPressOut}
-        onLongPress={this.onLongPress}>
+        onPressOut={this.onPressOut}>
         {textElement}
       </TouchableOpacity>
     );
   };
 
-  private renderMultiSelectItem = (): ItemElement => {
+  private renderMultiSelectElement = (): React.ReactElement<ViewProps> => {
     const { style, themedStyle, selected, disabled, indeterminate, item, ...restProps } = this.props;
     const { container, text } = this.getComponentStyle(themedStyle);
 
@@ -172,7 +155,7 @@ class SelectOptionComponent extends React.Component<SelectOptionProps> implement
   };
 
   public render(): React.ReactNode {
-    return this.props.multi ? this.renderMultiSelectItem() : this.renderDefaultItem();
+    return this.props.multi ? this.renderMultiSelectElement() : this.renderSingleElement();
   }
 }
 
diff --git a/src/components/ui/select/selectOptionsList.component.tsx b/src/components/ui/select/selectOptionsList.component.tsx
index 65c87ee79..40f5363e5 100644
--- a/src/components/ui/select/selectOptionsList.component.tsx
+++ b/src/components/ui/select/selectOptionsList.component.tsx
@@ -22,63 +22,51 @@ import {
   SelectGroupOption,
   SelectGroupOptionElement,
 } from './selectGroupOption.component';
-import { SelectOption as SelectOptionProp } from './select.component';
-import { SelectionStrategy } from './selection.strategy';
 
-export interface ComponentProps {
-  data: SelectOptionType[];
-  multiSelect?: boolean;
-  strategy: SelectionStrategy<SelectOptionProp>;
+export interface SelectOptionsListProps extends Omit<ListProps, 'renderItem'> {
+  multiSelect: boolean;
+  isOptionSelected: (item: SelectOptionType) => boolean;
+  isOptionGroup: (item: SelectOptionType) => boolean;
   onSelect: (option: SelectOptionType, event?: GestureResponderEvent) => void;
 }
 
-export type SelectOptionsListProps = Partial<ListProps> & ComponentProps;
 export type SelectOptionsListElement = React.ReactElement<SelectOptionsListProps>;
 
 export class SelectOptionsList extends React.Component<SelectOptionsListProps> {
 
-  private onSelect = (option: SelectOptionType, event?: GestureResponderEvent): void => {
-    this.props.onSelect(option, event);
-  };
-
-  private hasItems = (item: SelectOptionType): boolean => {
-    return item.items && item.items.length !== 0;
-  };
-
-  private renderGroupItem = (info: ListRenderItemInfo<SelectOptionType>): SelectGroupOptionElement => {
-    const { renderItem, multiSelect, strategy } = this.props;
-
+  private renderSingleItem = (info: ListRenderItemInfo<SelectOptionType>): SelectOptionElement => {
     return (
-      <SelectGroupOption
-        {...info}
-        strategy={strategy}
-        multi={multiSelect}
-        renderItem={renderItem}
-        onPress={this.onSelect}
+      <SelectOption
+        item={info.item}
+        multi={this.props.multiSelect}
+        selected={this.props.isOptionSelected(info.item)}
+        disabled={info.item.disabled}
+        onSelect={this.props.onSelect}
       />
     );
   };
 
-  private renderSingleItem = (info: ListRenderItemInfo<SelectOptionType>): SelectOptionElement => {
+  private renderGroupItem = (info: ListRenderItemInfo<SelectOptionType>): SelectGroupOptionElement => {
     return (
-      <SelectOption
-        {...info}
-        disabled={info.item.disabled}
-        selected={this.props.strategy.isSelected(info.item)}
+      <SelectGroupOption
+        item={info.item}
         multi={this.props.multiSelect}
-        onPress={this.onSelect}
+        isOptionSelected={this.props.isOptionSelected}
+        onSelect={this.props.onSelect}
       />
     );
   };
 
   private renderItem = (info: ListRenderItemInfo<SelectOptionType>): SelectOptionElement | SelectGroupOptionElement => {
-    return this.hasItems(info.item) ? this.renderGroupItem(info) : this.renderSingleItem(info);
+    return this.props.isOptionGroup(info.item) ? this.renderGroupItem(info) : this.renderSingleItem(info);
   };
 
   public render(): SelectOptionsListElement {
     return (
       <List
-        {...this.props}
+        style={this.props.style}
+        bounces={false}
+        data={this.props.data}
         renderItem={this.renderItem}
       />
     );
diff --git a/src/components/ui/select/selection.strategy.ts b/src/components/ui/select/selection.strategy.ts
deleted file mode 100644
index cf10a4512..000000000
--- a/src/components/ui/select/selection.strategy.ts
+++ /dev/null
@@ -1,206 +0,0 @@
-import { SelectOptionType } from './selectOption.component';
-import { KeyExtractorType } from './select.component';
-
-export abstract class SelectionStrategy<S> {
-
-  public selectedOption: S;
-  protected keyExtractor: KeyExtractorType;
-
-  protected constructor(options: S, data: SelectOptionType[], keyExtractor?: KeyExtractorType) {
-
-    this.selectedOption = options;
-    this.keyExtractor = keyExtractor;
-    this.verifyData(data);
-  }
-
-  public abstract isSelected(item: SelectOptionType): boolean;
-
-  public abstract select(option: SelectOptionType, callback?: () => void): S;
-
-  public abstract getPlaceholder(placeholder: string): string;
-
-  protected abstract verifyData(data: SelectOptionType[]): void;
-
-  protected compareOptions(option1: SelectOptionType, option2: SelectOptionType): boolean {
-    if (!this.keyExtractor) {
-      return option1 === option2;
-    } else {
-      return (option1 && option2) && this.keyExtractor(option1) === this.keyExtractor(option2);
-    }
-  }
-
-  protected hasOptionSubItems(option: SelectOptionType): boolean {
-    return option.items && option.items.length !== 0;
-  }
-
-  protected processData(data: SelectOptionType[]): string[] {
-    return data
-      .reduce((acc: string[], current: SelectOptionType) => {
-        if (this.hasOptionSubItems(current)) {
-          const subTexts: string[] = current.items.map((item: SelectOptionType) => {
-            return item.text;
-          });
-          return acc.concat(subTexts);
-        } else {
-          acc.push(current.text);
-          return acc;
-        }
-      }, []);
-  }
-}
-
-export class MultiSelectStrategy extends SelectionStrategy<SelectOptionType[]> {
-
-  constructor(options: SelectOptionType | SelectOptionType[] = [],
-              data: SelectOptionType[],
-              keyExtractor?: KeyExtractorType) {
-
-    if (Array.isArray(options)) {
-      super(options, data, keyExtractor);
-    }
-  }
-
-  public select(option: SelectOptionType, callback?: () => void): SelectOptionType[] {
-    const subOptionsExist: boolean = this.hasOptionSubItems(option);
-
-    if (subOptionsExist) {
-      this.selectOptionWithSubOptions(option);
-    } else {
-      this.selectDefaultOption(option);
-    }
-
-    return this.selectedOption;
-  }
-
-  private selectDefaultOption(option: SelectOptionType): void {
-    const optionAlreadyExist: boolean = this.selectedOption
-      .some((item: SelectOptionType) => {
-        return this.compareOptions(item, option);
-      });
-    if (optionAlreadyExist) {
-      this.removeOption(option);
-    } else {
-      this.selectedOption.push(option);
-    }
-  }
-
-  private selectOptionWithSubOptions(option: SelectOptionType): void {
-    const subOptionsAlreadyExist: boolean = this.selectedOption
-      .some((item: SelectOptionType) => {
-        return option.items
-          .some((subItem: SelectOptionType) => {
-            return subItem === item;
-          });
-      });
-
-    if (subOptionsAlreadyExist) {
-      option.items.forEach((subItem: SelectOptionType) => this.removeOption(subItem));
-    } else {
-      const enabledItems: SelectOptionType[] = option.items
-        .filter((item: SelectOptionType) => {
-          return !item.disabled;
-        });
-      this.selectedOption = this.selectedOption.concat(enabledItems);
-    }
-  }
-
-  public getPlaceholder(placeholder: string): string {
-    if (this.isSelectedOptionExist()) {
-      return this.selectedOption
-        .map((item: SelectOptionType) => {
-          return item && item.text;
-        })
-        .join(', ');
-    } else {
-      return placeholder;
-    }
-  }
-
-  public isSelected(item: SelectOptionType): boolean {
-    return this.selectedOption
-      .some((option: SelectOptionType) => {
-        return this.compareOptions(item, option);
-      });
-  }
-
-  private isSelectedOptionExist(): boolean {
-    return this.selectedOption && this.selectedOption.length !== 0;
-  }
-
-  private removeOption(option: SelectOptionType): void {
-    const index: number = this.selectedOption
-      .findIndex((item: SelectOptionType) => {
-        return this.compareOptions(item, option);
-      });
-    if (index !== -1) {
-      this.selectedOption.splice(index, 1);
-    }
-  }
-
-  protected verifyData(data: SelectOptionType[]): void {
-    const selectedItemsAreCorrect: boolean = this.processData(data).some((item: string) => {
-      return this.selectedOption.some((selected: SelectOptionType) => {
-        return selected.text === item;
-      });
-    });
-
-    if (!selectedItemsAreCorrect && this.selectedOption.length !== 0) {
-      const message: string = `Some Option doesn't exist in the data array or you ` +
-        'set Main group option selected.';
-      throw Error(message);
-    }
-  }
-}
-
-export class SingleSelectStrategy extends SelectionStrategy<SelectOptionType> {
-
-  constructor(options: SelectOptionType | SelectOptionType[],
-              data: SelectOptionType[],
-              keyExtractor?: KeyExtractorType) {
-
-    if (!Array.isArray(options)) {
-      super(options, data, keyExtractor);
-    }
-  }
-
-  public select(option: SelectOptionType, callback?: () => void): SelectOptionType {
-    this.selectedOption = option;
-
-    if (callback) {
-      callback();
-    }
-
-    return this.selectedOption;
-  }
-
-  public getPlaceholder(placeholder: string): string {
-    if (this.selectedOption) {
-      return this.selectedOption.text;
-    } else {
-      return placeholder;
-    }
-  }
-
-  public isSelected(item: SelectOptionType): boolean {
-    if (this.hasOptionSubItems(item)) {
-      return item.items.some((option: SelectOptionType) => {
-        return this.isSelected(option);
-      });
-    } else {
-      return this.compareOptions(item, this.selectedOption);
-    }
-  }
-
-  protected verifyData(data: SelectOptionType[]): void {
-    const selectedItemsAreCorrect: boolean = this.processData(data).some((item: string) => {
-      if (this.selectedOption) {
-        return item === this.selectedOption.text;
-      }
-    });
-
-    if (!selectedItemsAreCorrect && this.selectedOption) {
-      const message: string = `Option \"${this.selectedOption.text}\" doesn't exist in the data array!`;
-      throw Error(message);
-    }
-  }
-}
diff --git a/src/components/ui/support/typings/index.ts b/src/components/ui/support/typings/index.ts
index 56b9fb675..68ae1a920 100644
--- a/src/components/ui/support/typings/index.ts
+++ b/src/components/ui/support/typings/index.ts
@@ -7,5 +7,4 @@ export {
   InputFocusEvent,
   Override,
   TouchableIndexedProps,
-  TouchableTypeReturningProps,
 } from './type';
diff --git a/src/components/ui/support/typings/type.ts b/src/components/ui/support/typings/type.ts
index 1d64c28b1..9ea702f38 100644
--- a/src/components/ui/support/typings/type.ts
+++ b/src/components/ui/support/typings/type.ts
@@ -15,12 +15,5 @@ export type TouchableIndexedProps = Override<TouchableOpacityProps, {
   onLongPress?: (index: number, event: GestureResponderEvent) => void;
 }>;
 
-export type TouchableTypeReturningProps<T> = Override<TouchableOpacityProps, {
-  onPress?: (item: T, event: GestureResponderEvent) => void;
-  onPressIn?: (item: T, event: GestureResponderEvent) => void;
-  onPressOut?: (item: T, event: GestureResponderEvent) => void;
-  onLongPress?: (item: T, event: GestureResponderEvent) => void;
-}>;
-
 export type ScrollEvent = NativeSyntheticEvent<NativeScrollEvent>;
 export type InputFocusEvent = NativeSyntheticEvent<TextInputFocusEventData>;