@sendbird/uikit-react-native-foundation/lib/module/components/TextInput/index.js

A foundational UI kit for building chat-enabled React Native apps.

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React from 'react';
import { I18nManager, TextInput as RNTextInput, StyleSheet } from 'react-native';
import { isStartsWithRTL } from '@sendbird/uikit-utils';
import createStyleSheet from '../../styles/createStyleSheet';
import useUIKitTheme from '../../theme/useUIKitTheme';
const TextInput = /*#__PURE__*/React.forwardRef(function TextInput({
  children,
  style,
  variant = 'default',
  editable = true,
  originalText,
  supportRTLAlign = true,
  ...props
}, ref) {
  const {
    typography,
    colors
  } = useUIKitTheme();
  const variantStyle = colors['ui']['input'][variant];
  const inputStyle = editable ? variantStyle.active : variantStyle.disabled;
  const underlineStyle = variant === 'underline' && {
    borderBottomWidth: 2,
    borderBottomColor: inputStyle.highlight
  };
  const fontStyle = {
    ...typography.body3,
    lineHeight: typography.body3.fontSize ? typography.body3.fontSize * 1.2 : undefined
  };
  const textStyle = StyleSheet.flatten([fontStyle, styles.input, {
    color: inputStyle.text,
    backgroundColor: inputStyle.background
  }, underlineStyle, style]);
  const textAlign = (() => {
    if (textStyle.textAlign && textStyle.textAlign !== 'left' && textStyle.textAlign !== 'right') {
      return textStyle.textAlign;
    }
    if (I18nManager.isRTL && supportRTLAlign) {
      const text = originalText || props.value || props.placeholder;
      // Note: TextInput is not affected by doLeftAndRightSwapInRTL
      if (text && isStartsWithRTL(text)) {
        return 'right';
      } else {
        return 'left';
      }
    }
    if (textStyle.textAlign) return textStyle.textAlign;
    return undefined;
  })();
  return /*#__PURE__*/React.createElement(RNTextInput, _extends({
    ref: ref,
    editable: editable,
    selectionColor: inputStyle.highlight,
    placeholderTextColor: inputStyle.placeholder,
    style: [textStyle, {
      textAlign
    }]
  }, props), children);
});
const styles = createStyleSheet({
  input: {
    includeFontPadding: false,
    paddingTop: 8,
    paddingBottom: 8,
    paddingStart: 16,
    paddingEnd: 16
  }
});
export default TextInput;
//# sourceMappingURL=index.js.map