@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
66 lines • 3.37 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';
/**
* @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
};
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