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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _uikitUtils = require("@sendbird/uikit-utils");
var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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); }
const TextInput = /*#__PURE__*/_react.default.forwardRef(function TextInput({
  children,
  style,
  variant = 'default',
  editable = true,
  originalText,
  supportRTLAlign = true,
  ...props
}, ref) {
  const {
    typography,
    colors
  } = (0, _useUIKitTheme.default)();
  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 = _reactNative.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 (_reactNative.I18nManager.isRTL && supportRTLAlign) {
      const text = originalText || props.value || props.placeholder;
      // Note: TextInput is not affected by doLeftAndRightSwapInRTL
      if (text && (0, _uikitUtils.isStartsWithRTL)(text)) {
        return 'right';
      } else {
        return 'left';
      }
    }
    if (textStyle.textAlign) return textStyle.textAlign;
    return undefined;
  })();
  return /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, _extends({
    ref: ref,
    editable: editable,
    selectionColor: inputStyle.highlight,
    placeholderTextColor: inputStyle.placeholder,
    style: [textStyle, {
      textAlign
    }]
  }, props), children);
});
const styles = (0, _createStyleSheet.default)({
  input: {
    includeFontPadding: false,
    paddingTop: 8,
    paddingBottom: 8,
    paddingStart: 16,
    paddingEnd: 16
  }
});
var _default = exports.default = TextInput;
//# sourceMappingURL=index.js.map