See types for a detailed description of usage

SwiftList is a component that makes it possible to separate actions (Controller) from UI/UX (View) for large (section) lists with search, selections and actions

• show any data list in any way, with or without sections
• Selection (if activated)
• Search
• Render (list)-headers and -footers
• Render given footer
• pull to refresh
• Either select, show actions, or do action, when clicking on item
• Selection actions
• Section actions

Usage

<SwiftList
  data={sectionArray}
  renderItem={({ item }) => <Text>{item.firstName}</Text>}
  getSearchableString={item => item.firstName + ` ` + item.lastName}
  itemActions={item => [
    {
      index: 0,
      onPress: () => console.log("item", item.firstName),
      title: ""
    }
  ]}
/>

API

Props

| Tools | | ---------- | | navigation | | dispatch |

type SectionActionsGetter = (
title: SectionTitle,
tools: Tools,
sectionData: Object[]
) => Action[];

| SectionTitle: field | type | description | | ------------------- | ---------------------------------------------- | ---------------------------------------------------------------------------- | | field | string | on what field is this section based? | | value | string | number | boolean | What is the value of that field of this section? e.g. Amsterdam, 2, or true | | title | (value: string | number | boolean) => string | What is the title for this section? E.g. Amsterdam, Friends, or Inner Circle | | sectionActions | SectionActionsGetter | Which actions are possible on this section? callback | | returnIfEmpty | (state: State) => boolean | function that returns a boolean based on swiftlist state |

| Section | type | | ------- | ------------ | | title | SectionTitle | | data | Object[] |

| Action | type | | ------- | ---------- | | index | number | | onPress | () => void | | title | string |

export type Props = {
  /**
   * won't be rendered
   */
  children: React.ReactNode,

  /**
   * to know wheter or not to add marginTop
   */
  hasHeader: boolean,

  /**
   * provide tools to do sectionActions
   */
  tools: Tools,

  /**
   * extra style for the main view container
   */
  style: any,

  /**
   * you can give either sections or items. make sure every item has an `id` prop, or selection won't work
   */
  data?: Section[] | Object[],

  /**
   * when true, defaults to selectionview and can't stop this.
   */
  isEditing?: boolean,

  /**
   * use search? defaults to true
   */
  useSearch?: boolean,

  /**
   * pull to see header? defaults to false
   */
  pullHeader?: boolean,

  /**
   * defaults to 1
   */
  numColumns?: number,
  /**
   * maps an item to a string that can be searched from that item
   */
  getSearchableString: (item: Object) => string,

  /**
   * maps an item to a string for a title
   */
  getTitle: (item: Object) => string,

  /**
   * maps an item to a string for a subtitle
   */
  getSubtitle: (item: Object) => string,

  /**
   * render the item
   */
  renderItem: (props: any) => any,

  footer?: (state: State) => any,
  topHeader?: (state: State) => any,
  bottomHeader?: (state: State) => any,
  listFooter?: (state: State) => any,
  listHeader?: (state: State) => any,
  listEmpty?: (state: State) => any,
  listEmptySection?: (state: State, title: SectionTitle) => any,

  /**
   * if given, pull to refresh is enabled and will wait for onRefresh to promise. won't work together with pullHeader
   */
  onRefresh?: () => Promise<void>,

  /**
   * callback that retreives actions from parent based on item. This in turn renders ActionSheet or something else. If there's just one action, just fire that action without button
   */
  itemActions: (item: Object) => Action[],

  /**
   * do one thing based on item. can be used in combination with itemActions
   */
  itemOnPress: (item: Object) => void,

  /**
   * callback that retreives actions from parent based on selection. this in turn renders FAB or something else, depending on optional parameter or platform default
   */
  selectionActions: (selection: Object[]) => Action[],

  /**
   * callback when selection changes
   */
  onChange: (selection: Object[]) => void,

  /**
   * callback when isSearching changes
   */
  isSearching: (isSearching: boolean) => void,

  hideStatusBar: boolean,

  headerButtons: (HeaderIconButton.Props & {
    position: "top" | "bottom" | "left" | "right"
  })[]
};

export type State = {
  search: string,
  isSearching: boolean,
  isEditing: boolean,
  selected: Object[],
  isRefreshing: boolean
};