@botonic/react
Version:
Build Chatbots using React
65 lines • 3.12 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Textarea = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_textarea_autosize_1 = tslib_1.__importDefault(require("react-textarea-autosize"));
const index_types_1 = require("../../index-types");
const context_1 = require("../../webchat/context");
const hooks_1 = require("../hooks");
const styles_1 = require("./styles");
const Textarea = ({ host, textareaRef, sendChatEvent, sendTextAreaText, }) => {
var _a, _b, _c, _d, _e;
const { webchatState, setIsInputFocused } = (0, react_1.useContext)(context_1.WebchatContext);
(0, hooks_1.useDeviceAdapter)(host, webchatState.isWebchatOpen);
let isTyping = false;
let typingTimeout;
const persistentMenuOptions = (_a = webchatState.theme.userInput) === null || _a === void 0 ? void 0 : _a.persistentMenu;
const placeholder = (_c = (_b = webchatState.theme.userInput) === null || _b === void 0 ? void 0 : _b.box) === null || _c === void 0 ? void 0 : _c.placeholder;
const userInputBoxStyle = (_e = (_d = webchatState.theme.userInput) === null || _d === void 0 ? void 0 : _d.box) === null || _e === void 0 ? void 0 : _e.style;
const onKeyDown = event => {
if (event.keyCode === 13 && event.shiftKey === false) {
event.preventDefault();
sendTextAreaText();
stopTyping();
}
};
const onKeyUp = () => {
if (!textareaRef.current)
return;
if (textareaRef.current.value === '') {
stopTyping();
return;
}
if (!isTyping) {
startTyping();
}
clearTimeoutWithReset(true);
};
const clearTimeoutWithReset = (reset) => {
const waitTime = 20 * 1000;
if (typingTimeout)
clearTimeout(typingTimeout);
if (reset)
typingTimeout = setTimeout(stopTyping, waitTime);
};
const startTyping = () => {
isTyping = true;
sendChatEvent(index_types_1.Typing.On);
};
const stopTyping = () => {
clearTimeoutWithReset(false);
isTyping = false;
sendChatEvent(index_types_1.Typing.Off);
};
const handleFocus = () => {
setIsInputFocused(true);
};
const handleBlur = () => {
setIsInputFocused(false);
};
return ((0, jsx_runtime_1.jsx)(styles_1.TextAreaContainer, { children: (0, jsx_runtime_1.jsx)(react_textarea_autosize_1.default, { ref: (ref) => (textareaRef.current = ref), onFocus: handleFocus, onBlur: handleBlur, name: 'text', maxRows: 4, wrap: 'soft', maxLength: 1000, placeholder: placeholder, autoFocus: false, onKeyDown: e => onKeyDown(e), onKeyUp: onKeyUp, style: Object.assign({ display: 'flex', fontSize: 16, width: '100%', border: 'none', resize: 'none', overflow: 'auto', outline: 'none', flex: '1 1 auto', padding: 10, paddingLeft: persistentMenuOptions ? 0 : 10, fontFamily: 'inherit' }, userInputBoxStyle) }) }));
};
exports.Textarea = Textarea;
//# sourceMappingURL=textarea.js.map