You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Input.tsx 5.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. /* eslint-disable lines-around-comment */
  2. import React, { forwardRef, useCallback, useState } from 'react';
  3. import {
  4. KeyboardTypeOptions,
  5. NativeSyntheticEvent, ReturnKeyTypeOptions,
  6. StyleProp,
  7. Text,
  8. TextInput,
  9. TextInputChangeEventData,
  10. TextInputFocusEventData, TextInputKeyPressEventData,
  11. TextInputSubmitEditingEventData,
  12. TouchableOpacity,
  13. View,
  14. ViewStyle
  15. } from 'react-native';
  16. import Icon from '../../../icons/components/Icon';
  17. import { IconCloseCircle } from '../../../icons/svg';
  18. import BaseTheme from '../../../ui/components/BaseTheme.native';
  19. import { IInputProps } from '../types';
  20. import styles from './inputStyles';
  21. interface IProps extends IInputProps {
  22. accessibilityLabel?: any;
  23. autoCapitalize?: string | undefined;
  24. autoFocus?: boolean;
  25. blurOnSubmit?: boolean | undefined;
  26. customStyles?: ICustomStyles;
  27. editable?: boolean | undefined;
  28. keyboardType?: KeyboardTypeOptions;
  29. maxLength?: number | undefined;
  30. minHeight?: number | string | undefined;
  31. multiline?: boolean | undefined;
  32. numberOfLines?: number | undefined;
  33. onBlur?: ((e: NativeSyntheticEvent<TextInputFocusEventData>) => void) | undefined;
  34. onFocus?: ((e: NativeSyntheticEvent<TextInputFocusEventData>) => void) | undefined;
  35. onKeyPress?: ((e: NativeSyntheticEvent<TextInputKeyPressEventData>) => void) | undefined;
  36. onSubmitEditing?: (value: string) => void;
  37. returnKeyType?: ReturnKeyTypeOptions | undefined;
  38. secureTextEntry?: boolean | undefined;
  39. textContentType?: any;
  40. }
  41. interface ICustomStyles {
  42. container?: Object;
  43. input?: Object;
  44. }
  45. const Input = forwardRef<TextInput, IInputProps>(({
  46. accessibilityLabel,
  47. autoCapitalize,
  48. autoFocus,
  49. blurOnSubmit,
  50. clearable,
  51. customStyles,
  52. disabled,
  53. error,
  54. icon,
  55. keyboardType,
  56. label,
  57. maxLength,
  58. minHeight,
  59. multiline,
  60. numberOfLines,
  61. onBlur,
  62. onChange,
  63. onFocus,
  64. onKeyPress,
  65. onSubmitEditing,
  66. placeholder,
  67. returnKeyType,
  68. secureTextEntry,
  69. textContentType,
  70. value
  71. }: IProps, ref) => {
  72. const [ focused, setFocused ] = useState(false);
  73. const handleChange = useCallback((e: NativeSyntheticEvent<TextInputChangeEventData>) => {
  74. const { nativeEvent: { text } } = e;
  75. onChange?.(text);
  76. }, []);
  77. const clearInput = useCallback(() => {
  78. onChange?.('');
  79. }, []);
  80. const handleBlur = useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
  81. setFocused(false);
  82. onBlur?.(e);
  83. }, []);
  84. const handleFocus = useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
  85. setFocused(true);
  86. onFocus?.(e);
  87. }, []);
  88. const handleKeyPress = useCallback((e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
  89. onKeyPress?.(e);
  90. }, []);
  91. const handleSubmitEditing = useCallback((e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => {
  92. const { nativeEvent: { text } } = e;
  93. onSubmitEditing?.(text);
  94. }, []);
  95. return (<View style = { [ styles.inputContainer, customStyles?.container ] }>
  96. {label && <Text style = { styles.label }>{ label }</Text>}
  97. <View style = { styles.fieldContainer as StyleProp<ViewStyle> }>
  98. {icon && <Icon
  99. size = { 22 }
  100. src = { icon }
  101. style = { styles.icon } />}
  102. <TextInput
  103. accessibilityLabel = { accessibilityLabel }
  104. // @ts-ignore
  105. autoCapitalize = { autoCapitalize }
  106. autoComplete = { 'off' }
  107. autoCorrect = { false }
  108. autoFocus = { autoFocus }
  109. blurOnSubmit = { blurOnSubmit }
  110. editable = { !disabled }
  111. keyboardType = { keyboardType }
  112. maxLength = { maxLength }
  113. minHeight = { minHeight }
  114. multiline = { multiline }
  115. numberOfLines = { numberOfLines }
  116. onBlur = { handleBlur }
  117. onChange = { handleChange }
  118. onFocus = { handleFocus }
  119. onKeyPress = { handleKeyPress }
  120. onSubmitEditing = { handleSubmitEditing }
  121. placeholder = { placeholder }
  122. placeholderTextColor = { BaseTheme.palette.text02 }
  123. ref = { ref }
  124. returnKeyType = { returnKeyType }
  125. secureTextEntry = { secureTextEntry }
  126. spellCheck = { false }
  127. style = { [
  128. styles.input,
  129. clearable && styles.clearableInput,
  130. customStyles?.input,
  131. disabled && styles.inputDisabled,
  132. error && styles.inputError,
  133. focused && styles.inputFocused,
  134. icon && styles.iconInput,
  135. multiline && styles.inputMultiline
  136. ] }
  137. textContentType = { textContentType }
  138. value = { typeof value === 'number' ? `${value}` : value } />
  139. { clearable && !disabled && value !== '' && (
  140. <TouchableOpacity
  141. onPress = { clearInput }
  142. style = { styles.clearButton as StyleProp<ViewStyle> }>
  143. <Icon
  144. size = { 22 }
  145. src = { IconCloseCircle }
  146. style = { styles.clearIcon } />
  147. </TouchableOpacity>
  148. )}
  149. </View>
  150. </View>);
  151. });
  152. export default Input;