communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
80 lines • 3.88 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
/* @conditional-compile-remove(file-sharing-acs) */
import { IconButton, mergeStyles, Stack, TooltipHost, useTheme } from '@fluentui/react';
/* @conditional-compile-remove(file-sharing-acs) */
import React from 'react';
/* @conditional-compile-remove(file-sharing-acs) */
import { ChatCompositeIcon } from '../../common/icons';
/* @conditional-compile-remove(file-sharing-acs) */
import { useLocale } from '../../localization';
/* @conditional-compile-remove(file-sharing-acs) */
/**
* @internal
*/
export const AttachmentUploadButton = (props) => {
const inputRef = React.useRef(null);
const theme = useTheme();
// default supportedMediaTypes is ['*'], meaning all media types are supported.
// default disableMultipleUploads is false, meaning multiple files can be selected.
const { supportedMediaTypes = ['*'], disableMultipleUploads = false, onChange } = props;
const attachmentUploadButtonClassName = mergeStyles({
width: '1.5rem',
height: '1.5rem',
cursor: 'pointer',
padding: '0.15rem',
':hover': {
backgroundColor: theme.palette.neutralLighter
}
});
const iconButtonClassName = mergeStyles({
color: 'unset',
width: '1.5rem',
height: '1.5rem',
':hover': {
color: 'unset',
background: 'transparent'
}
});
return (React.createElement(React.Fragment, null,
React.createElement(Stack, { verticalAlign: "center", horizontalAlign: "center", className: attachmentUploadButtonClassName, onClick: () => {
var _a;
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
} },
React.createElement(TooltipHost, { content: uploadAttachmentButtonStringTrampoline(), "data-ui-id": "chat-composite-message-tooltip" },
React.createElement(IconButton, { className: iconButtonClassName, ariaLabel: uploadAttachmentButtonStringTrampoline(), autoFocus: false },
React.createElement(SendBoxAttachFileIconTrampoline, null)))),
React.createElement("input", { "data-testid": "attachment-upload-button", ref: inputRef, autoFocus: false, hidden: true, multiple: !disableMultipleUploads, accept: supportedMediaTypes.join(','), type: "file", onClick: (e) => {
// To ensure that `onChange` is fired even if the same file is picked again.
e.currentTarget.value = '';
}, onChange: (e) => {
onChange === null || onChange === void 0 ? void 0 : onChange(e.currentTarget.files);
} })));
};
/* @conditional-compile-remove(file-sharing-acs) */
const SendBoxAttachFileIconTrampoline = () => {
/* @conditional-compile-remove(file-sharing-acs) */
return React.createElement(ChatCompositeIcon, { iconName: "SendBoxAttachFile" });
// Return _some_ available icon, as the real icon is beta-only.
return React.createElement(ChatCompositeIcon, { iconName: "EditBoxCancel" });
};
/* @conditional-compile-remove(file-sharing-acs) */
/**
* A wrapper to return {@link AttachmentUploadButton} component conditionally.
* It will return `<></>` for stable builds.
* @internal
*/
export const AttachmentUploadButtonWrapper = (
// To make conditional compilation not throw errors.
props) => {
return (React.createElement(React.Fragment, null,
/* @conditional-compile-remove(file-sharing-acs) */
React.createElement(AttachmentUploadButton, Object.assign({}, props))));
};
/* @conditional-compile-remove(file-sharing-acs) */
const uploadAttachmentButtonStringTrampoline = () => {
/* @conditional-compile-remove(file-sharing-acs) */
return useLocale().strings.chat.uploadAttachment;
return '';
};
//# sourceMappingURL=AttachmentUploadButton.js.map