index.d.ts

/* eslint-disable no-undef */
import React from 'react';
import { ViewStyle, TextStyle, FlatListProps } from 'react-native';

export interface IOption {
  key: React.Key;
  label?: string;
  section?: boolean;
  accessibilityLabel?: string;
  component?: React.ReactNode;
  [key: string]: any;
}

type AnimationType = 'none' | 'slide' | 'fade';
type OrientationType = 'portrait' | 'portrait-upside-down' | 'landscape' | 'landscape-left' | 'landscape-right';
type ListType = 'SCROLLVIEW' | 'FLATLIST';

interface IModalSelectorProps<TOption> {
  /**
   * Array of objects with a unique key and label to select in the modal
   * Optional component overrides label text
   *
   * Default is `[]`
   */
  data: TOption[],
  /**
   * Control the search box visibility
   *
   * Default is `true`
   */
  search?: boolean,
  /**
   * Hide the caption of related matched items
   *
   * Default is `false`
   */
  hideSectionOnSearch?: boolean,
  /**
   * Sensitive mode on search
   *
   * Default is `false`
   */
  caseSensitiveSearch?: boolean,
  /**
   * Keep the modal size to the maximum regardless of the listed items
   *
   * Default is `false`
   */
  fullHeight?: boolean,
  /**
   * Preserve initial modal size on search
   *
   * Default is `false`
   */
  frozenSearch?: boolean,
  /**
   * Custom search filterer function
   *
   * Default is uses its own function 
   */
  onSearchFilterer?: (searchText: string, data: TOption[]) => TOption[],

  /**
  * List to be render inside modal can be Scrollview or Flatlist
  *
  * Default is `'SCROLLVIEW'`
  */
  listType?: ListType;

  /**
   * Callback function, when the users has selected an option
   *
   * Default is `() => {}`
   */
  onChange?: (option: TOption) => void;
  /**
   * Callback function, when the users has typed in search box 
   *
   * Default is `() => {}`
   */
  onChangeSearch?: (searchText: string) => void,

  /**
   * Callback function, when modal is opening
   *
   * Default is `() => {}`
   */
  onModalOpen?: () => void;

  /**
   * Callback function, when modal is closing
   *
   * Default is `() => {}`
   */
  onModalClose?: () => void;

  /**
   * Callback function, when clicking the cancel button
   *
   * Default is `() => {}`
   */
  onCancel?: () => void;

  /**
   * Extract the key from the data item
   *
   * Default is `(data) => data.key` 
   */
  keyExtractor?: (option: TOption) => React.Key;

  /**
   * Extract the label from the data item
   *
   * Default is `(data) => data.label`
   */
  labelExtractor?: (option: TOption) => string;

  /**
   * Extract the component from the data item
   *
   * Default is `(data) => data.component` 
   */
  componentExtractor?: (option: TOption) => React.ReactNode;

  /**
   * Control open/close state of modal
   *
   * Default is `false`
   */
  visible?: boolean;

  /**
   * Control if modal closes on select
   *
   * Default is `true`
   */
  closeOnChange?: boolean;

  /**
   * Text that is initially shown on the button
   *
   * Default is `'Select me!'`
   */
  initValue?: string;

  /**
   * Text of the cancel button
   *
   * Default is `'cancel'`
   */
  cancelText?: string;

  /**
   * Text of the search placeholder
   *
   * Default is `'search'`
   */
  searchText?: string;

  /**
   * Type of animation to be used to show the modal.
   *
   * Default is `'slide'`
   */
  animationType?: AnimationType;

  /**
   * Style definitions for the root element
   */
  style?: ViewStyle;

  /**
   * Style definitions for the select element (available in default mode only!)
   * NOTE: Due to breaking changes in React Native, RN < 0.39.0 should pass flex:1 explicitly to selectStyle as a prop
   * 
   * Default is `{}`
   */
  selectStyle?: ViewStyle;

  /**
   * Style definitions for the select element (available in default mode only!)
   * 
   * Default is `{}`
   */
  selectTextStyle?: TextStyle;

  /**
   * Style definitions for the option element
   * 
   * Default is `{}`
   */
  optionStyle?: ViewStyle;

  /**
   * Style definitions for the option text element
   * 
   * Default is `{}`
   */
  optionTextStyle?: TextStyle;

  /**
   * Style definitions for the option container element
   * 
   * Default is `{}`
   */
  optionContainerStyle?: ViewStyle;

  /**
   * Style definitions for the section element
   * 
   * Default is `{}`
   */
  sectionStyle?: ViewStyle;

  /**
   * Style definitions for the children container view
   * 
   * Default is `{}`
   */
  childrenContainerStyle?: ViewStyle;

  /**
   * Style definitions for the touchable element
   * 
   * Default is `{}`
   */
  touchableStyle?: ViewStyle;

  /**
   * Opacity for the touchable element on touch
   * 
   * Default is `0.2`
   */
  touchableActiveOpacity?: number;

  /**
   * Style definitions for the select text element
   * 
   * Default is `{}`
   */
  sectionTextStyle?: TextStyle;

  /**
   * Style definitions for the currently selected text element
   * 
   * Default is `{}`
   */
  selectedItemTextStyle?: TextStyle;

  /**
   * Style definitions for the cancel container
   * 
   * Default is `{}`
   */
  cancelContainerStyle?: ViewStyle;

  /**
   * Style definitions for the cancel element
   * 
   * Default is `{}`
   */
  cancelStyle?: ViewStyle;

  /**
   * Style definitions for the cancel text element
   * 
   * Default is `{}`
   */
  cancelTextStyle?: TextStyle;

  /**
   * Style definitions for the overlay background element
   * RN <= 0.41 should override this with pixel value for padding
   * 
   * Default is `{ flex: 1, padding: '5%', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.7)' }`
   */
  overlayStyle?: ViewStyle;

  /**
   * Style definitions for the initValue text element
   * 
   * Default is `{}`
   */
  initValueTextStyle?: TextStyle;


  /**
   * Style definitions for the search view element
   * 
   * Default is `{ borderWidth: 1, borderRadius: 5, borderColor: 'rgba(0,0,0,0.2)', paddingHorizontal: PADDING, marginHorizontal: PADDING, }`
   */
  searchStyle?: ViewStyle;
  /**
   * Style definitions for the search text element
   * 
   * Default is `{}`
   */
  searchTextStyle?: TextStyle;

  /**
   * Color of placeHolder search text
   * 
   * Default is `''`
   */
  placeHolderTextColor?: string;

  /**
   * Keyboard type in the search field
   * 
   * Default is `'default'`
   */
  keyboardType?: string;

  /**
   * Disables opening of the modal
   * 
   * Default is `false`
   */
  disabled?: boolean;

  /**
   * Orientations the modal supports
   * 
   * Default is `['portrait', 'landscape']`
   */
  supportedOrientations?: OrientationType[];

  /**
   * Passed to underlying ScrollView
   * 
   * Default is `'always'`
   */
  keyboardShouldPersistTaps?: string | boolean;

  /**
   * true makes the modal close when the overlay is pressed
   * 
   * Default is `false`
   */
  backdropPressToClose?: boolean;

  /**
   * true enables accessibility for the open button container
   * Note: if false be sure to define accessibility props directly in the wrapped component
   * 
   * Default is `false`
   */
  openButtonContainerAccessible?: boolean;

  /**
   * true enables accessibility for data items. 
   * Note: data items should have an accessibilityLabel property if this is enabled
   * 
   * Default is `false`
   */
  listItemAccessible?: boolean;

  /**
   * true enables accessibility for cancel button.
   * 
   * Default is `false`
   */
  cancelButtonAccessible?: boolean;

  /**
   * true enables accessibility for the scroll view. 
   * Only enable this if you don't want to interact with individual data items.
   * 
   * Default is `false`
   */
  scrollViewAccessible?: boolean;

  /**
   * Accessibility label for the modal ScrollView
   */
  scrollViewAccessibilityLabel?: string;

  /**
   * Accessibility label for the cancel button 
   */
  cancelButtonAccessibilityLabel?: string;

  /**
   * props to pass through to the container View and each option TouchableOpacity (e.g. testID for testing)
   * 
   * Default is `{}`
   */
  passThruProps?: object;

  /**
   * props to pass through to the select text component
   * 
   * Default is `{}`
   */
  selectTextPassThruProps?: object;

  /**
   * props to pass through to the options text components in the modal
   * 
   * Default is `{}`
   */
  optionTextPassThruProps?: object;

  /**
   * props to pass through to the cancel text components in the modal
   *
   * Default is `{}`
   */
  cancelTextPassThruProps?: object;

  /**
   * props to pass through to the internal ScrollView
   *
   * Default is `{}`
   */
  scrollViewPassThruProps?: object;

  /**
   * How far touch can stray away from touchable that opens modal
   * 
   * Default is `{}`
   */
  modalOpenerHitSlop?: object;

  /**
   * Render a custom node instead of the built-in select box
   */
  customSelector?: React.ReactNode;

  /**
   * Key of the item to be initially selected
   * 
   * Default is `''`
   */
  selectedKey?: React.Key;
}

export default class ModalSelector<TOption = IOption> extends React.Component<IModalSelectorProps<TOption> & FlatListProps<any>, any> { }