communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
82 lines • 4.16 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useCallback } from 'react';
import { Stack, TextField, mergeStyles, concatStyleSets } from '@fluentui/react';
import { isEnterKeyEventFromCompositionSession } from './utils';
import { inputBoxStyle, inputBoxWrapperStyle, textFieldStyle, textContainerStyle } from './styles/InputBoxComponent.style';
/* @conditional-compile-remove(mention) */
import { TextFieldWithMention } from './TextFieldWithMention/TextFieldWithMention';
/**
* @private
*/
export const InputBoxComponent = (props) => {
const { styles, id, 'data-ui-id': dataUiId, textValue, onChange, textFieldRef, placeholderText, onKeyDown, onEnterKeyDown, supportNewline, inputClassName, errorMessage, disabled, children } = props;
const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles === null || styles === void 0 ? void 0 : styles.root);
const mergedInputFieldStyle = mergeStyles(inputBoxStyle, inputClassName);
const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles === null || styles === void 0 ? void 0 : styles.textFieldContainer);
const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {
fieldGroup: styles === null || styles === void 0 ? void 0 : styles.textField,
errorMessage: styles === null || styles === void 0 ? void 0 : styles.systemMessage,
suffix: {
backgroundColor: 'transparent',
padding: '0 0'
}
});
const onTextFieldKeyDown = useCallback((ev) => {
if (isEnterKeyEventFromCompositionSession(ev.nativeEvent)) {
return;
}
if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {
ev.preventDefault();
onEnterKeyDown && onEnterKeyDown();
}
onKeyDown && onKeyDown(ev);
}, [onEnterKeyDown, onKeyDown, supportNewline]);
const onRenderChildren = () => {
return React.createElement(React.Fragment, null, children);
};
const renderTextField = () => {
const textFieldProps = {
autoFocus: props.autoFocus === 'sendBoxTextField',
multiline: true,
autoAdjustHeight: true,
multiple: false,
resizable: false,
componentRef: textFieldRef,
id,
inputClassName: mergedInputFieldStyle,
placeholder: placeholderText,
autoComplete: 'off',
styles: mergedTextFieldStyle,
disabled,
errorMessage,
onRenderSuffix: props.children ? onRenderChildren : undefined
};
/* @conditional-compile-remove(mention) */
const textFieldWithMentionProps = {
textFieldProps: textFieldProps,
dataUiId: dataUiId,
textValue: textValue,
onChange: onChange,
onKeyDown: onKeyDown,
onEnterKeyDown: onEnterKeyDown,
textFieldRef: textFieldRef,
supportNewline: supportNewline,
mentionLookupOptions: props.mentionLookupOptions
};
/* @conditional-compile-remove(mention) */
if (props.mentionLookupOptions) {
return React.createElement(TextFieldWithMention, Object.assign({}, textFieldWithMentionProps));
}
return (React.createElement("div", { style: textFieldProps.errorMessage ? { padding: '0 0 5px 5px' } : undefined },
React.createElement(TextField, Object.assign({}, textFieldProps, { "data-ui-id": dataUiId, value: textValue, onChange: onChange, onKeyDown: onTextFieldKeyDown, onFocus: (e) => {
// Fix for setting the cursor to the correct position when multiline is true
// This approach should be reviewed during migration to FluentUI v9
e.currentTarget.value = '';
e.currentTarget.value = textValue;
} }))));
};
return (React.createElement(Stack, { className: mergedRootStyle },
React.createElement("div", { className: mergedTextContainerStyle }, renderTextField())));
};
//# sourceMappingURL=InputBoxComponent.js.map