@100mslive/react-native-room-kit/lib/module/components/HMSTextInput.js

100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your 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 * as React from 'react';
import { Platform, StyleSheet, TextInput, TouchableOpacity, View } from 'react-native';
import { useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
import { SendIcon } from '../Icons';
export const HMSTextInput = ({
  value,
  onChangeText,
  style,
  focusedStyle,
  ...resetProps
}) => {
  const [inputFocused, setInputFocused] = React.useState(false);
  const handleInputFocus = () => setInputFocused(true);
  const handleInputBlur = () => setInputFocused(false);
  const {
    on_surface_medium: onSurfaceMediumColor,
    on_surface_high: onSurfaceHighColor
  } = useHMSRoomColorPalette();
  const containerExists = resetProps.leftIcon || resetProps.rightIcon || resetProps.sendIcon;
  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
    // TEXT INPUT STYLES
    input: {
      backgroundColor: theme.palette.surface_default,
      color: theme.palette.on_surface_high,
      borderColor: theme.palette.surface_default,
      fontFamily: `${typography.font_family}-Regular`
    },
    // when text input is inside container
    childInput: {
      color: theme.palette.on_surface_high,
      fontFamily: `${typography.font_family}-Regular`
    },
    focusedInput: {
      borderColor: theme.palette.primary_default,
      borderWidth: 2
    },
    // when text input is inside container
    focusedChildInput: {},
    // CONTAINER STYLES
    container: {
      backgroundColor: theme.palette.surface_default,
      borderColor: theme.palette.surface_default
    },
    focusedContainer: {
      borderColor: theme.palette.primary_default,
      borderWidth: 2
    },
    // ICON STYLES
    sendIcon: {
      tintColor: theme.palette.on_surface_medium
    },
    focusedSendIcon: {
      tintColor: theme.palette.on_surface_high
    }
  }));
  const textInputStyles = [
  // regular styles
  containerExists ? styles.childInput : styles.input, containerExists ? hmsRoomStyles.childInput : hmsRoomStyles.input,
  // theme regular styles
  style,
  // user provided regular styles

  // focused styles
  inputFocused ? containerExists ? hmsRoomStyles.focusedChildInput : hmsRoomStyles.focusedInput : null,
  // theme focused styles
  inputFocused ? focusedStyle : null // user provided focused styles
  ];
  const textInputComp = /*#__PURE__*/React.createElement(TextInput, _extends({}, resetProps, {
    style: textInputStyles,
    value: value,
    onChangeText: onChangeText,
    placeholder: resetProps.placeholder ?? 'Enter Name...',
    autoCapitalize: resetProps.autoCapitalize ?? 'words',
    autoComplete: resetProps.autoComplete ?? 'name',
    placeholderTextColor: resetProps.placeholderTextColor ?? onSurfaceMediumColor,
    selectionColor: resetProps.selectionColor ?? onSurfaceHighColor,
    onFocus: resetProps.onFocus ?? handleInputFocus,
    onBlur: resetProps.onBlur ?? handleInputBlur,
    disableFullscreenUI: true
  }));
  if (!containerExists) {
    return textInputComp;
  }
  const containerStyles = [
  // regular styles
  styles.container, hmsRoomStyles.container,
  // theme regular styles
  resetProps.leftIcon || resetProps.rightIcon || resetProps.sendIcon ? resetProps.containerStyle : null,
  // user provided regular styles

  // focused styles
  inputFocused ? hmsRoomStyles.focusedContainer : null,
  // theme focused styles
  inputFocused && (resetProps.leftIcon || resetProps.rightIcon || resetProps.sendIcon) ? resetProps.focusedContainerStyle : null // user provided focused styles
  ];
  return /*#__PURE__*/React.createElement(View, {
    style: containerStyles
  }, resetProps.leftIcon, textInputComp, resetProps.rightIcon || (resetProps.sendIcon ? /*#__PURE__*/React.createElement(TouchableOpacity, {
    testID: resetProps.sendIconTestID,
    style: styles.sendIconButton,
    onPress: resetProps.onSendIconPress
  }, /*#__PURE__*/React.createElement(SendIcon, {
    style: [hmsRoomStyles.sendIcon, inputFocused ? hmsRoomStyles.focusedSendIcon : null]
  })) : null));
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: 50,
    overflow: 'hidden',
    paddingLeft: 16,
    paddingRight: 8,
    borderRadius: 8,
    borderWidth: 2,
    flexDirection: 'row'
  },
  input: {
    flex: 1,
    height: 50,
    textAlignVertical: 'center',
    paddingHorizontal: 16,
    borderRadius: 8,
    fontSize: 16,
    lineHeight: Platform.OS === 'android' ? 24 : undefined,
    letterSpacing: 0.5,
    borderWidth: 2
  },
  childInput: {
    flex: 1,
    textAlignVertical: 'center',
    fontSize: 16,
    lineHeight: Platform.OS === 'android' ? 24 : undefined,
    letterSpacing: 0.5
  },
  sendIconButton: {
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: 8
  }
});
//# sourceMappingURL=HMSTextInput.js.map