HierarchyPicker

HierarchyPicker.js

import { View, Text, FlatList, TouchableOpacity, ListRenderItem } from "react-native";
import React, { Component } from "react";
import { map } from "lodash";
import { ViewPager } from "rn-viewpager";

interface Page<T> {
  keyExtractor?: (item: T) => any;
  data?: T[];
  renderItem?: ListRenderItem<T>;
  renderPage?: (prePage, nextPage) => JSX.Element;
}

interface HierarchyPickerProps {
  renderHeader: () => JSX.Element;
  pages: Page[] | Page;
  onFinished: (pickedItem: any[]) => void;
}

interface HierarchyPickerState {
  position: number;
  pageSize: number;
  singlePagePicker: boolean;
  pickeredItems: any[];
}


class HierarchyPicker extends Component<HierarchyPickerProps, HierarchyPickerState> {

  constructor(props) {
    super(props);
    if (!this.props.pages) {
      throw new Error("You must give out the pages !");
    }
    this.state = {
      position: 0,
      pageSize: this.props.pages.length,
      singlePagePicker: this.props.pages.length === 1,
      pickeredItems: new Array(this.props.pages.length)
    };
  }

  pager: ViewPager

  prePage() {
    if (!this.state.singlePagePicker) {
      if (this.state.position - 1 >= 0) {
        if (this.pager) {
          this.pager.setPage(this.state.position - 1);
        }
      }
    }
  }

  nextPage() {
    if (this.state.position + 1 < this.state.pageSize) {
      if (this.pager) {
        this.pager.setPage(this.state.position + 1);
      }
    } else {
      if (this.props.onFinished) {
        this.props.onFinished(this.state.pickeredItems);
      }
    }
  }

  _renderPage(page: Page = this.props.pages, index = 0) {
    if (page.renderPage) {
      return page.renderPage(() => { this.prePage(); }, () => { this.nextPage(); });
    }

    const renderItemWrap: ListRenderItem<Page> = info => {

      return page.renderItem ? page.renderItem(info) :
        <TouchableOpacity onPress={() => {
          this.setState({
            pickeredItems: map(this.state.pickeredItems, (pre, idx) => idx === index ? info.item : pre)
          }, () => { this.nextPage(); });
        }}>
          <Text>{info.item}</Text>
        </TouchableOpacity>;
    };

    return (
      <View>
        <FlatList
          data={page.data}
          renderItem={renderItemWrap}
          keyExtractor={page.keyExtractor}
          removeClippedSubviews={false}
        />
      </View>
    );
  }

  _renderPages() {
    return <ViewPager
      ref={page => { this.pager = page; }}
      style={{ height: "100%" }}
      onPageSelected={({ position }) => { this.setState({ position }); }}
      scrollEnabled={false}
    >
      {
        map(this.props.pages, (page, index) => this._renderPage(page, index))
      }
    </ViewPager >;
  }

  render() {
    return (this.state.singlePagePicker ? this._renderPage() : this._renderPages());
  }
}

export default HierarchyPicker;