feat(ui): list component

Author: artyorsh

src/framework/ui/index.ts

@@ -3,6 +3,14 @@ import {
   Avatar as AvatarComponent,
   Props as AvatarProps,
 } from './avatar/avatar.component';
+import {
+  BottomNavigatorTab as BottomNavigatorTabComponent,
+  Props as BottomNavigatorTabProps,
+} from './tabNavigator/bottomNavigatorTab.component';
+import {
+  BottomTabNavigator as BottomTabNavigatorComponent,
+  Props as BottomTabNavigatorProps,
+} from './tabNavigator/bottomTabNavigator.component';
 import {
   Button as ButtonComponent,
   Props as ButtonProps,
@@ -11,14 +19,34 @@ import {
   ButtonGroup as ButtonGroupComponent,
   Props as ButtonGroupProps,
 } from './buttonGroup/buttonGroup.component';
+import {
+  CheckBox as CheckBoxComponent,
+  Props as CheckBoxProps,
+} from './checkbox/checkbox.component';
 import {
   Input as InputComponent,
   Props as InputProps,
 } from './input/input.component';
 import {
-  Text as TextComponent,
-  Props as TextProps,
-} from './text/text.component';
+  Layout as LayoutComponent,
+  Props as LayoutProps,
+} from './layout/layout.component';
+import {
+  List as ListComponent,
+  Props as ListProps,
+} from './list/list.component';
+import {
+  ListItem as ListItemComponent,
+  Props as ListItemProps,
+} from './list/listItem.component';
+import {
+  Modal as ModalComponent,
+  Props as ModalProps,
+} from './modal/modal.component';
+import {
+  Popover as PopoverComponent,
+  Props as PopoverProps,
+} from './popover/popover.component';
 import {
   Radio as RadioComponent,
   Props as RadioProps,
@@ -27,18 +55,6 @@ import {
   RadioGroup as RadioGroupComponent,
   Props as RadioGroupProps,
 } from './radioGroup/radioGroup.component';
-import {
-  Layout as LayoutComponent,
-  Props as LayoutProps,
-} from './layout/layout.component';
-import {
-  Toggle as ToggleComponent,
-  Props as ToggleProps,
-} from './toggle/toggle.component';
-import {
-  CheckBox as CheckBoxComponent,
-  Props as CheckBoxProps,
-} from './checkbox/checkbox.component';
 import {
   Tab as TabComponent,
   Props as TabProps,
@@ -47,26 +63,22 @@ import {
   TabBar as TabBarComponent,
   Props as TabBarProps,
 } from './tab/tabBar.component';
-import {
-  Popover as PopoverComponent,
-  Props as PopoverProps,
-} from './popover/popover.component';
-import {
-  Tooltip as TooltipComponent,
-  Props as TooltipProps,
-} from './tooltip/tooltip.component';
-import {
-  ViewPager,
-  Props as ViewPagerProps,
-} from './viewPager/viewPager.component';
 import {
   TabView,
   Props as TabViewProps,
 } from './tab/tabView.component';
 import {
-  BottomTabNavigator as BottomTabNavigatorComponent,
-  Props as BottomTabNavigatorProps,
-} from './tabNavigator/bottomTabNavigator.component';
+  Text as TextComponent,
+  Props as TextProps,
+} from './text/text.component';
+import {
+  Toggle as ToggleComponent,
+  Props as ToggleProps,
+} from './toggle/toggle.component';
+import {
+  Tooltip as TooltipComponent,
+  Props as TooltipProps,
+} from './tooltip/tooltip.component';
 import {
   TopNavigationBar as TopNavigationBarComponent,
   Props as TopNavigationBarProps,
@@ -76,13 +88,9 @@ import {
   Props as TopNavigationBarActionProps,
 } from './topNavigationBar/topNavigationBarAction.component';
 import {
-  BottomNavigatorTab as BottomNavigatorTabComponent,
-  Props as BottomNavigatorTabProps,
-} from './tabNavigator/bottomNavigatorTab.component';
-import {
-  Modal as ModalComponent,
-  Props as ModalProps,
-} from './modal/modal.component';
+  ViewPager,
+  Props as ViewPagerProps,
+} from './viewPager/viewPager.component';
 import {
   ButtonAlignment,
   ButtonAlignments,
@@ -93,68 +101,80 @@ import {
 } from './popover/type';
 
 const Avatar = styled<AvatarComponent, AvatarProps>(AvatarComponent);
+const BottomNavigatorTab = styled<BottomNavigatorTabComponent, BottomNavigatorTabProps>(BottomNavigatorTabComponent);
+const BottomTabNavigator = styled<BottomTabNavigatorComponent, BottomTabNavigatorProps>(BottomTabNavigatorComponent);
 const Button = styled<ButtonComponent, ButtonProps>(ButtonComponent);
 const ButtonGroup = styled<ButtonGroupComponent, ButtonGroupProps>(ButtonGroupComponent);
+const CheckBox = styled<CheckBoxComponent, CheckBoxProps>(CheckBoxComponent);
 const Input = styled<InputComponent, InputProps>(InputComponent);
-const Text = styled<TextComponent, TextProps>(TextComponent);
+const Layout = styled<LayoutComponent, LayoutProps>(LayoutComponent);
+const List = styled<ListComponent, ListProps>(ListComponent);
+const ListItem = styled<ListItemComponent, ListItemProps>(ListItemComponent);
+const Modal = styled<ModalComponent, ModalProps>(ModalComponent);
+const Popover = styled<PopoverComponent, PopoverProps>(PopoverComponent);
 const Radio = styled<RadioComponent, RadioProps>(RadioComponent);
 const RadioGroup = styled<RadioGroupComponent, RadioGroupProps>(RadioGroupComponent);
-const Layout = styled<LayoutComponent, LayoutProps>(LayoutComponent);
-const Toggle = styled<ToggleComponent, ToggleProps>(ToggleComponent);
-const CheckBox = styled<CheckBoxComponent, CheckBoxProps>(CheckBoxComponent);
 const Tab = styled<TabComponent, TabProps>(TabComponent);
 const TabBar = styled<TabBarComponent, TabBarProps>(TabBarComponent);
-const Popover = styled<PopoverComponent, PopoverProps>(PopoverComponent);
+const Text = styled<TextComponent, TextProps>(TextComponent);
+const Toggle = styled<ToggleComponent, ToggleProps>(ToggleComponent);
 const Tooltip = styled<TooltipComponent, TooltipProps>(TooltipComponent);
-const BottomTabNavigator = styled<BottomTabNavigatorComponent, BottomTabNavigatorProps>(BottomTabNavigatorComponent);
-const BottomNavigatorTab = styled<BottomNavigatorTabComponent, BottomNavigatorTabProps>(BottomNavigatorTabComponent);
 const TopNavigationBar = styled<TopNavigationBarComponent, TopNavigationBarProps>(TopNavigationBarComponent);
 const TopNavigationBarAction =
   styled<TopNavigationBarActionComponent, TopNavigationBarActionProps>(TopNavigationBarActionComponent);
-const Modal = styled<ModalComponent, ModalProps>(ModalComponent);
 
 export {
   Avatar,
+  BottomNavigatorTab,
+  BottomTabNavigator,
   Button,
   ButtonGroup,
+  CheckBox,
   Input,
-  Text,
   Layout,
-  LayoutProps,
+  List,
+  ListItem,
+  Modal,
+  Popover,
   Radio,
-  RadioProps,
   RadioGroup,
-  RadioGroupProps,
-  Toggle,
-  ToggleProps,
-  CheckBox,
   Tab,
   TabBar,
-  Popover,
+  TabView,
+  Text,
+  Toggle,
   Tooltip,
+  TopNavigationBar,
+  TopNavigationBarAction,
   ViewPager,
-  TabView,
+};
+
+export {
   AvatarProps,
+  BottomNavigatorTabProps,
+  BottomTabNavigatorProps,
   ButtonProps,
-  InputProps,
   ButtonGroupProps,
   CheckBoxProps,
+  InputProps,
+  LayoutProps,
+  ListProps,
+  ListItemProps,
+  ModalProps,
+  PopoverProps,
+  RadioProps,
+  RadioGroupProps,
   TabProps,
   TabBarProps,
-  PopoverProps,
-  TooltipProps,
-  ViewPagerProps,
   TabViewProps,
-  BottomTabNavigator,
-  BottomTabNavigatorProps,
-  BottomNavigatorTab,
-  BottomNavigatorTabProps,
-  TopNavigationBar,
+  TooltipProps,
+  ToggleProps,
   TopNavigationBarProps,
-  TopNavigationBarAction,
   TopNavigationBarActionProps,
-  Modal,
-  ModalProps,
+  ViewPagerProps,
+};
+
+export {
   ButtonAlignment,
   ButtonAlignments,
   PopoverPlacement,

src/framework/ui/list/list.component.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import {
+  FlatList,
+  FlatListProps,
+  ListRenderItemInfo,
+  StyleSheet,
+} from 'react-native';
+import {
+  StyledComponentProps,
+  StyleType,
+} from '@kitten/theme';
+import { Props as ListItemProps } from './listItem.component';
+
+// this is basically needed to avoid generics in required props
+type ItemType = any;
+
+interface ListProps<ItemT> {
+  renderItem: (info: ListRenderItemInfo<ItemT>, style: StyleType) => React.ReactElement<any>;
+}
+
+export type Props = ListProps<ItemType> & StyledComponentProps & FlatListProps<ItemType>;
+
+export class List extends React.Component<Props> {
+
+  private listRef: React.RefObject<FlatList<ItemType>> = React.createRef();
+
+  public scrollToEnd = (params?: { animated?: boolean }) => {
+    const { current: list } = this.listRef;
+
+    list.scrollToEnd(params);
+  };
+
+  public scrollToIndex = (params: {
+    animated?: boolean;
+    index: number;
+    viewOffset?: number;
+    viewPosition?: number
+  }) => {
+
+    const { current: list } = this.listRef;
+
+    list.scrollToIndex(params);
+  };
+
+  public scrollToOffset(params: { animated?: boolean; offset: number }) {
+    const { current: list } = this.listRef;
+
+    list.scrollToOffset(params);
+  }
+
+  private getComponentStyle = (source: StyleType): StyleType => {
+    const { item, ...container } = source;
+
+    return {
+      container: container,
+    };
+  };
+
+  private getItemStyle = (source: StyleType, index: number): StyleType => {
+    const { item } = source;
+
+    return item;
+  };
+
+  private extractItemKey = (item: ItemType, index: number): string => {
+    return index.toString();
+  };
+
+  private renderItem = (info: ListRenderItemInfo<ItemType>): React.ReactElement<ListItemProps> => {
+    const { renderItem, themedStyle } = this.props;
+    const { index } = info;
+
+    const itemStyle: StyleType = this.getItemStyle(themedStyle, index);
+    const itemElement: React.ReactElement<ListItemProps> = renderItem(info, itemStyle);
+
+    return React.cloneElement(itemElement, {
+      style: [itemStyle, itemElement.props.style, styles.item],
+      index: index,
+    });
+  };
+
+  public render(): React.ReactElement<FlatListProps<ItemType>> {
+    const { style, themedStyle, ...derivedProps } = this.props;
+    const { container } = this.getComponentStyle(themedStyle);
+
+    return (
+      <FlatList
+        {...derivedProps}
+        ref={this.listRef}
+        style={[container, style, styles.container]}
+        keyExtractor={this.extractItemKey}
+        renderItem={this.renderItem}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {},
+  item: {},
+});