@dooboo-ui/gifted-chat/lib/index.js

> [GiftedChat] component contains essential features to be implemented in `Chat` screen.

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
import { FlatList, Keyboard, View } from 'react-native';
import React, { useEffect, useRef, useState } from 'react';
import styled from 'styled-components/native';
var StyledKeyboardAvoidingView = styled.KeyboardAvoidingView(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  justify-content: center;\n  align-self: stretch;\n  flex-direction: column;\n  align-items: center;\n"], ["\n  flex: 1;\n  justify-content: center;\n  align-self: stretch;\n  flex-direction: column;\n  align-items: center;\n"])));
var StyledViewChat = styled.View(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  border-top-width: 0.5px;\n  min-height: 52px;\n  max-height: 52px;\n  padding-right: 8px;\n  padding-left: 8px;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  flex: 1;\n"], ["\n  width: 100%;\n  border-top-width: 0.5px;\n  min-height: 52px;\n  max-height: 52px;\n  padding-right: 8px;\n  padding-left: 8px;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  flex: 1;\n"])));
var StyledInputChat = styled.TextInput(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 80%;\n  font-size: 14px;\n  margin-right: 20px;\n  padding-left: 48px;\n  color: black;\n"], ["\n  width: 80%;\n  font-size: 14px;\n  margin-right: 20px;\n  padding-left: 48px;\n  color: black;\n"])));
var StyledTouchMenu = styled.TouchableOpacity(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  left: 10px;\n  height: 100%;\n  min-width: 20px;\n  justify-content: center;\n"], ["\n  position: absolute;\n  left: 10px;\n  height: 100%;\n  min-width: 20px;\n  justify-content: center;\n"])));
var StyledViewBottom = styled.View(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 0px;\n  width: 100%;\n"], ["\n  position: absolute;\n  bottom: 0px;\n  width: 100%;\n"])));
var StyledViewMenu = styled.View(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  flex-direction: row;\n  flex-wrap: wrap;\n  height: ", "px;\n"], ["\n  flex-direction: row;\n  flex-wrap: wrap;\n  height: ", "px;\n"])), function (_a) {
    var height = _a.height;
    return height;
});
function Shared(props) {
    var keyboardShowListener;
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    var input1 = useRef();
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    var input2 = useRef();
    var inputTestID = props.inputTestID, touchTestID = props.touchTestID, chats = props.chats, borderColor = props.borderColor, backgroundColor = props.backgroundColor, fontColor = props.fontColor, keyboardOffset = props.keyboardOffset, renderItem = props.renderItem, emptyItem = props.emptyItem, renderViewMenu = props.renderViewMenu, optionView = props.optionView, message = props.message, onChangeMessage = props.onChangeMessage, placeholder = props.placeholder, placeholderTextColor = props.placeholderTextColor, renderSendButton = props.renderSendButton;
    var _a = useState(258), keyboardHeight = _a[0], setKeyboardHeight = _a[1];
    var _b = useState(false), showMenu = _b[0], setShowMenu = _b[1];
    useEffect(function () {
        if (showMenu) {
            Keyboard.dismiss();
        }
        else {
            if (input1 && input1.current) {
                input1.current.focus();
            }
        }
    }, [showMenu]);
    useEffect(function () {
        keyboardShowListener = Keyboard.addListener('keyboardDidShow', function (e) {
            setKeyboardHeight(e.endCoordinates.height);
        });
        return function () {
            if (keyboardShowListener) {
                keyboardShowListener.remove();
            }
        };
    });
    return (<>
      <StyledKeyboardAvoidingView keyboardVerticalOffset={keyboardOffset} behavior={'padding'}>
        <FlatList style={{ alignSelf: 'stretch' }} 
    // prettier-ignore
    contentContainerStyle={chats.length === 0
        ? {
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
        }
        : null} keyExtractor={function (item, index) { return index.toString(); }} data={chats} renderItem={renderItem} ListEmptyComponent={emptyItem}/>
        {!showMenu ? (<StyledViewChat style={{
        borderColor: borderColor,
        backgroundColor: backgroundColor,
    }}>
            <StyledInputChat testID={inputTestID} style={{
        color: fontColor,
        backgroundColor: backgroundColor,
    }} 
    // @ts-ignore
    ref={input1} onFocus={function () { return setShowMenu(false); }} multiline={true} placeholder={placeholder} placeholderTextColor={placeholderTextColor} value={message} defaultValue={message} onChangeText={onChangeMessage}/>
            <StyledTouchMenu testID={touchTestID} onPress={function () { return setShowMenu(true); }}>
              {optionView}
            </StyledTouchMenu>
            <View style={{
        flex: 1,
        marginVertical: 8,
    }}>
              {renderSendButton ? renderSendButton() : null}
            </View>
          </StyledViewChat>) : null}
      </StyledKeyboardAvoidingView>
      {showMenu ? (<StyledViewBottom>
          <StyledViewChat style={{
        borderColor: borderColor,
        backgroundColor: backgroundColor,
    }}>
            <StyledInputChat testID={inputTestID} 
    // @ts-ignore
    ref={input2} onFocus={function () { return setShowMenu(false); }} style={{
        color: fontColor,
        backgroundColor: backgroundColor,
    }} multiline={true} placeholder={placeholder} placeholderTextColor={placeholderTextColor} value={message} defaultValue={message}/>
            <StyledTouchMenu testID={touchTestID} onPress={function () { return setShowMenu(false); }}>
              {optionView}
            </StyledTouchMenu>
            <View style={{
        flex: 1,
        marginVertical: 8,
    }}>
              {renderSendButton ? renderSendButton() : null}
            </View>
          </StyledViewChat>
          <StyledViewMenu testID="viewMenu" height={keyboardHeight} style={{
        backgroundColor: backgroundColor,
    }}>
            {renderViewMenu ? renderViewMenu() : null}
          </StyledViewMenu>
        </StyledViewBottom>) : null}
    </>);
}
/* eslint-disable */
Shared.defaultProps = {
    chats: [],
    keyboardOffset: 0,
    optionView: <View />,
    emptyItem: <View />,
    renderItem: function () { return <View />; },
    renderViewMenu: function () { return <View />; },
    message: '',
    onChangeMessage: function () { },
    placeholder: '',
    renderSendButton: function () { return <View />; },
};
/* eslint-enable */
export default Shared;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;