Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Input upload disabled based on channel config #585

Merged
merged 1 commit into from
Oct 19, 2020
Merged

feat: Input upload disabled based on channel config #585

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 34 additions & 33 deletions src/components/MessageInput/EditMessageForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ const EditMessageForm = (props) => {
useEffect(() => {
/** @type {(event: KeyboardEvent) => void} Typescript syntax */
const onKeyDown = (event) => {
console.log('event.keyCode :>> ', event.keyCode);
if (event.keyCode === KEY_CODES.ESC && clearEditingState)
clearEditingState();
};
Expand All @@ -39,13 +38,13 @@ const EditMessageForm = (props) => {
accept={channelContext.acceptedFiles}
multiple={channelContext.multipleUploads}
disabled={
channelContext.maxNumberOfFiles !== undefined &&
messageInput.numberOfUploads >= channelContext.maxNumberOfFiles
!messageInput.isUploadEnabled || messageInput.maxFilesLeft === 0
}
maxNumberOfFiles={messageInput.maxFilesLeft}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

EditMessageForm changed regarding max attachments was missing from #577

handleFiles={messageInput.uploadNewFiles}
>
<form onSubmit={messageInput.handleSubmit}>
<UploadsPreview {...messageInput} />
{messageInput.isUploadEnabled && <UploadsPreview {...messageInput} />}
<EmojiPicker {...messageInput} small />
<ChatAutoComplete
commands={messageInput.getCommands()}
Expand Down Expand Up @@ -75,36 +74,38 @@ const EditMessageForm = (props) => {
/>
</svg>
</span>
<div
className="str-chat__fileupload-wrapper"
data-testid="fileinput"
>
<Tooltip>{t('Attach files')}</Tooltip>
<FileUploadButton
multiple={channelContext.multipleUploads}
disabled={
channelContext.maxNumberOfFiles !== undefined &&
messageInput.numberOfUploads >=
channelContext.maxNumberOfFiles
}
accepts={channelContext.acceptedFiles}
handleFiles={messageInput.uploadNewFiles}
{messageInput.isUploadEnabled && (
<div
className="str-chat__fileupload-wrapper"
data-testid="fileinput"
>
<span className="str-chat__input-fileupload">
<svg
width="14"
height="14"
xmlns="http://www.w3.org/2000/svg"
>
<title>{t('Attach files')}</title>
<path
d="M7 .5c3.59 0 6.5 2.91 6.5 6.5s-2.91 6.5-6.5 6.5S.5 10.59.5 7 3.41.5 7 .5zm0 12c3.031 0 5.5-2.469 5.5-5.5S10.031 1.5 7 1.5A5.506 5.506 0 0 0 1.5 7c0 3.034 2.469 5.5 5.5 5.5zM7.506 3v3.494H11v1.05H7.506V11h-1.05V7.544H3v-1.05h3.456V3h1.05z"
fillRule="nonzero"
/>
</svg>
</span>
</FileUploadButton>
</div>
<Tooltip>
{messageInput.maxFilesLeft
? t('Attach files')
: t("You've reached the maximum number of files")}
</Tooltip>
<FileUploadButton
multiple={channelContext.multipleUploads}
disabled={messageInput.maxFilesLeft === 0}
accepts={channelContext.acceptedFiles}
handleFiles={messageInput.uploadNewFiles}
>
<span className="str-chat__input-fileupload">
<svg
width="14"
height="14"
xmlns="http://www.w3.org/2000/svg"
>
<title>{t('Attach files')}</title>
<path
d="M7 .5c3.59 0 6.5 2.91 6.5 6.5s-2.91 6.5-6.5 6.5S.5 10.59.5 7 3.41.5 7 .5zm0 12c3.031 0 5.5-2.469 5.5-5.5S10.031 1.5 7 1.5A5.506 5.506 0 0 0 1.5 7c0 3.034 2.469 5.5 5.5 5.5zM7.506 3v3.494H11v1.05H7.506V11h-1.05V7.544H3v-1.05h3.456V3h1.05z"
fillRule="nonzero"
/>
</svg>
</span>
</FileUploadButton>
</div>
)}
</div>
<div>
<button onClick={props.clearEditingState}>{t('Cancel')}</button>
Expand Down
68 changes: 37 additions & 31 deletions src/components/MessageInput/MessageInputFlat.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,19 @@ const MessageInputFlat = (props) => {
<ImageDropzone
accept={channelContext.acceptedFiles}
multiple={channelContext.multipleUploads}
disabled={messageInput.maxFilesLeft === 0}
disabled={
!messageInput.isUploadEnabled || messageInput.maxFilesLeft === 0
}
maxNumberOfFiles={messageInput.maxFilesLeft}
handleFiles={messageInput.uploadNewFiles}
>
<div className="str-chat__input-flat-wrapper">
<EmojiPicker {...messageInput} />

<div className="str-chat__input-flat--textarea-wrapper">
<UploadsPreview {...messageInput} />
{messageInput.isUploadEnabled && (
<UploadsPreview {...messageInput} />
)}
<ChatAutoComplete
commands={messageInput.getCommands()}
innerRef={messageInput.textareaRef}
Expand Down Expand Up @@ -69,36 +73,38 @@ const MessageInputFlat = (props) => {
</svg>
</span>
</div>
<div
className="str-chat__fileupload-wrapper"
data-testid="fileinput"
>
<Tooltip>
{messageInput.maxFilesLeft
? t('Attach files')
: t("You've reached the maximum number of files")}
</Tooltip>
<FileUploadButton
multiple={channelContext.multipleUploads}
disabled={messageInput.maxFilesLeft === 0}
accepts={channelContext.acceptedFiles}
handleFiles={messageInput.uploadNewFiles}
{messageInput.isUploadEnabled && (
<div
className="str-chat__fileupload-wrapper"
data-testid="fileinput"
>
<span className="str-chat__input-flat-fileupload">
<svg
width="14"
height="14"
xmlns="http://www.w3.org/2000/svg"
>
<title>{t('Attach files')}</title>
<path
d="M1.667.333h10.666c.737 0 1.334.597 1.334 1.334v10.666c0 .737-.597 1.334-1.334 1.334H1.667a1.333 1.333 0 0 1-1.334-1.334V1.667C.333.93.93.333 1.667.333zm2 1.334a1.667 1.667 0 1 0 0 3.333 1.667 1.667 0 0 0 0-3.333zm-2 9.333v1.333h10.666v-4l-2-2-4 4-2-2L1.667 11z"
fillRule="nonzero"
/>
</svg>
</span>
</FileUploadButton>
</div>
<Tooltip>
{messageInput.maxFilesLeft
? t('Attach files')
: t("You've reached the maximum number of files")}
</Tooltip>
<FileUploadButton
multiple={channelContext.multipleUploads}
disabled={messageInput.maxFilesLeft === 0}
accepts={channelContext.acceptedFiles}
handleFiles={messageInput.uploadNewFiles}
>
<span className="str-chat__input-flat-fileupload">
<svg
width="14"
height="14"
xmlns="http://www.w3.org/2000/svg"
>
<title>{t('Attach files')}</title>
<path
d="M1.667.333h10.666c.737 0 1.334.597 1.334 1.334v10.666c0 .737-.597 1.334-1.334 1.334H1.667a1.333 1.333 0 0 1-1.334-1.334V1.667C.333.93.93.333 1.667.333zm2 1.334a1.667 1.667 0 1 0 0 3.333 1.667 1.667 0 0 0 0-3.333zm-2 9.333v1.333h10.666v-4l-2-2-4 4-2-2L1.667 11z"
fillRule="nonzero"
/>
</svg>
</span>
</FileUploadButton>
</div>
)}
</div>
{SendButton && <SendButton sendMessage={messageInput.handleSubmit} />}
</div>
Expand Down
68 changes: 37 additions & 31 deletions src/components/MessageInput/MessageInputLarge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,14 +56,18 @@ const MessageInputLarge = (props) => {
<ImageDropzone
accept={channelContext.acceptedFiles}
multiple={channelContext.multipleUploads}
disabled={messageInput.maxFilesLeft === 0}
disabled={
!messageInput.isUploadEnabled || messageInput.maxFilesLeft === 0
}
maxNumberOfFiles={messageInput.maxFilesLeft}
handleFiles={messageInput.uploadNewFiles}
>
<div className="str-chat__input">
<EmojiPicker {...messageInput} />
<div className="str-chat__input--textarea-wrapper">
<UploadsPreview {...messageInput} />
{messageInput.isUploadEnabled && (
<UploadsPreview {...messageInput} />
)}
<ChatAutoComplete
commands={messageInput.getCommands()}
innerRef={messageInput.textareaRef}
Expand Down Expand Up @@ -96,36 +100,38 @@ const MessageInputLarge = (props) => {
</svg>
</span>
</div>
<div
className="str-chat__fileupload-wrapper"
data-testid="fileinput"
>
<Tooltip>
{messageInput.maxFilesLeft
? t('Attach files')
: t("You've reached the maximum number of files")}
</Tooltip>
<FileUploadButton
multiple={channelContext.multipleUploads}
disabled={messageInput.maxFilesLeft === 0}
accepts={channelContext.acceptedFiles}
handleFiles={messageInput.uploadNewFiles}
{messageInput.isUploadEnabled && (
<div
className="str-chat__fileupload-wrapper"
data-testid="fileinput"
>
<span className="str-chat__input-fileupload">
<svg
width="14"
height="14"
xmlns="http://www.w3.org/2000/svg"
>
<title>{t('Attach files')}</title>
<path
d="M7 .5c3.59 0 6.5 2.91 6.5 6.5s-2.91 6.5-6.5 6.5S.5 10.59.5 7 3.41.5 7 .5zm0 12c3.031 0 5.5-2.469 5.5-5.5S10.031 1.5 7 1.5A5.506 5.506 0 0 0 1.5 7c0 3.034 2.469 5.5 5.5 5.5zM7.506 3v3.494H11v1.05H7.506V11h-1.05V7.544H3v-1.05h3.456V3h1.05z"
fillRule="nonzero"
/>
</svg>
</span>
</FileUploadButton>
</div>
<Tooltip>
{messageInput.maxFilesLeft
? t('Attach files')
: t("You've reached the maximum number of files")}
</Tooltip>
<FileUploadButton
multiple={channelContext.multipleUploads}
disabled={messageInput.maxFilesLeft === 0}
accepts={channelContext.acceptedFiles}
handleFiles={messageInput.uploadNewFiles}
>
<span className="str-chat__input-fileupload">
<svg
width="14"
height="14"
xmlns="http://www.w3.org/2000/svg"
>
<title>{t('Attach files')}</title>
<path
d="M7 .5c3.59 0 6.5 2.91 6.5 6.5s-2.91 6.5-6.5 6.5S.5 10.59.5 7 3.41.5 7 .5zm0 12c3.031 0 5.5-2.469 5.5-5.5S10.031 1.5 7 1.5A5.506 5.506 0 0 0 1.5 7c0 3.034 2.469 5.5 5.5 5.5zM7.506 3v3.494H11v1.05H7.506V11h-1.05V7.544H3v-1.05h3.456V3h1.05z"
fillRule="nonzero"
/>
</svg>
</span>
</FileUploadButton>
</div>
)}
</div>
{SendButton && <SendButton sendMessage={messageInput.handleSubmit} />}
</div>
Expand Down
69 changes: 37 additions & 32 deletions src/components/MessageInput/MessageInputSmall.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ const MessageInputSmall = (props) => {
<ImageDropzone
accept={channelContext.acceptedFiles}
multiple={channelContext.multipleUploads}
disabled={messageInput.maxFilesLeft === 0}
disabled={
!messageInput.isUploadEnabled || messageInput.maxFilesLeft === 0
}
maxNumberOfFiles={messageInput.maxFilesLeft}
handleFiles={messageInput.uploadNewFiles}
>
Expand All @@ -36,7 +38,9 @@ const MessageInputSmall = (props) => {
>
<EmojiPicker {...messageInput} small />
<div className="str-chat__small-message-input--textarea-wrapper">
<UploadsPreview {...messageInput} />
{messageInput.isUploadEnabled && (
<UploadsPreview {...messageInput} />
)}

<ChatAutoComplete
commands={messageInput.getCommands()}
Expand Down Expand Up @@ -70,37 +74,38 @@ const MessageInputSmall = (props) => {
</svg>
</span>
</div>

<div
className="str-chat__fileupload-wrapper"
data-testid="fileinput"
>
<Tooltip>
{messageInput.maxFilesLeft
? t('Attach files')
: t("You've reached the maximum number of files")}
</Tooltip>
<FileUploadButton
multiple={channelContext.multipleUploads}
disabled={messageInput.maxFilesLeft === 0}
accepts={channelContext.acceptedFiles}
handleFiles={messageInput.uploadNewFiles}
{messageInput.isUploadEnabled && (
<div
className="str-chat__fileupload-wrapper"
data-testid="fileinput"
>
<span className="str-chat__small-message-input-fileupload">
<svg
width="14"
height="14"
xmlns="http://www.w3.org/2000/svg"
>
<title>{t('Attach files')}</title>
<path
d="M7 .5c3.59 0 6.5 2.91 6.5 6.5s-2.91 6.5-6.5 6.5S.5 10.59.5 7 3.41.5 7 .5zm0 12c3.031 0 5.5-2.469 5.5-5.5S10.031 1.5 7 1.5A5.506 5.506 0 0 0 1.5 7c0 3.034 2.469 5.5 5.5 5.5zM7.506 3v3.494H11v1.05H7.506V11h-1.05V7.544H3v-1.05h3.456V3h1.05z"
fillRule="nonzero"
/>
</svg>
</span>
</FileUploadButton>
</div>
<Tooltip>
{messageInput.maxFilesLeft
? t('Attach files')
: t("You've reached the maximum number of files")}
</Tooltip>
<FileUploadButton
multiple={channelContext.multipleUploads}
disabled={messageInput.maxFilesLeft === 0}
accepts={channelContext.acceptedFiles}
handleFiles={messageInput.uploadNewFiles}
>
<span className="str-chat__small-message-input-fileupload">
<svg
width="14"
height="14"
xmlns="http://www.w3.org/2000/svg"
>
<title>{t('Attach files')}</title>
<path
d="M7 .5c3.59 0 6.5 2.91 6.5 6.5s-2.91 6.5-6.5 6.5S.5 10.59.5 7 3.41.5 7 .5zm0 12c3.031 0 5.5-2.469 5.5-5.5S10.031 1.5 7 1.5A5.506 5.506 0 0 0 1.5 7c0 3.034 2.469 5.5 5.5 5.5zM7.506 3v3.494H11v1.05H7.506V11h-1.05V7.544H3v-1.05h3.456V3h1.05z"
fillRule="nonzero"
/>
</svg>
</span>
</FileUploadButton>
</div>
)}
</div>
{SendButton && <SendButton sendMessage={messageInput.handleSubmit} />}
</div>
Expand Down
Loading