plain-input.js.flow

// @flow
import * as React from 'react'
import {type StylesCrossPlatform} from '../styles'
import type {TextType} from './text'

export type KeyboardType =
  | 'default'
  | 'email-address'
  | 'numeric'
  | 'phone-pad'
  // iOS only
  | 'ascii-capable'
  | 'numbers-and-punctuation'
  | 'url'
  | 'number-pad'
  | 'name-phone-pad'
  | 'decimal-pad'
  | 'twitter'
  | 'web-search'
  // Android Only
  | 'visible-password'

export type Props = {|
  autoFocus?: boolean,
  className?: string,
  disabled?: boolean,
  // Resize in a flexbox-like fashion
  flexable?: boolean,
  maxLength?: number,
  multiline?: boolean,
  onBlur?: () => void,
  onChangeText?: (text: string) => void,
  onFocus?: () => void,
  placeholder?: string,
  placeholderColor?: string,
  rowsMin?: number,
  rowsMax?: number,
  style?: StylesCrossPlatform,
  textType?: TextType,
  type?: 'password' | 'text' | 'number',
  value?: string, // Makes this a controlled input when passed. Also disables mutating value via `transformText`, see note at component API

  /* Platform discrepancies */
  // Maps to onSubmitEditing on native
  onEnterKeyDown?: () => void,

  // Desktop only
  onClick?: (event: Event) => void,
  onKeyDown?: (event: SyntheticKeyboardEvent<>, isComposingIME: boolean) => void,
  onKeyUp?: (event: SyntheticKeyboardEvent<>, isComposingIME: boolean) => void,

  // Mobile only
  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters',
  autoCorrect?: boolean,
  keyboardType?: KeyboardType,
  returnKeyType?: 'done' | 'go' | 'next' | 'search' | 'send',
  selectTextOnFocus?: boolean,
  onEndEditing?: () => void,
|}

// Use this to mix your props with input props like type Props = PropsWithInput<{foo: number}>
export type PropsWithInput<P> = {|
  ...$Exact<Props>,
  ...$Exact<P>,
|}

/**
 * Flow does the work of making the default props nullable when instantiating
 * this component, but doesn't go as far as letting the props be
 * actually nullable in the type def. This complicates things when trying
 * to make this compatible with PropsWithInput. So here we split up the
 * internal type of Props from the public API, and 'lie' in this file
 * by claiming that this component takes `Props` when the implementations
 * use `InternalProps`.
 * See more discussion here: https://github.com/facebook/flow/issues/1660
 */
export type DefaultProps = {|
  keyboardType: KeyboardType,
  textType: TextType,
|}

export type Selection = {start: number, end: number}

export type TextInfo = {
  text: string,
  selection: Selection,
}

export type InternalProps = {...DefaultProps, ...Props}
declare export default class PlainInput extends React.Component<Props> {
  static defaultProps: DefaultProps;
  blur: () => void;
  focus: () => void;
  /**
   *  This can only be used when the input is controlled. Use `transformText` if
   *  you want to do this on an uncontrolled input. Make sure the Selection is
   *  valid against the `value` prop. Avoid changing `value` and calling this at
   *  the same time if you don't want bad things to happen. Note that a
   *  selection will only appear when the input is focused. Call `focus()`
   *  before this if you want to be sure the user will see the selection.
   **/
  setSelection: Selection => void;
  /**
   *  This can only be used when the input is uncontrolled. Like `setSelection`,
   *  if you want to be sure the user will see a selection use `focus()` before
   *  calling this.
   **/
  transformText: (fn: (TextInfo) => TextInfo, reflectChange?: boolean) => void;
}