Skip to content

Commit

Permalink
Finish composer toolbox actions
Browse files Browse the repository at this point in the history
  • Loading branch information
gabriellsh committed Dec 7, 2023
1 parent e49778c commit fa98d77
Show file tree
Hide file tree
Showing 14 changed files with 57 additions and 561 deletions.
2 changes: 1 addition & 1 deletion apps/meteor/client/providers/LayoutProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const messageToolbox = [
'delete-message',
];

const composerToolbox = ['video', 'audio', 'attachment', 'discussion', 'webdav', 'location', 'apps'];
const composerToolbox = ['video-message' /* 'audio-message' */, 'file-upload', /* 'create-discussion', */ 'webdav-add', 'share-location'];

const LayoutProvider: FC = ({ children }) => {
const showTopNavbarEmbeddedLayout = Boolean(useSetting('UI_Show_top_navbar_embedded_layout'));
Expand Down
31 changes: 7 additions & 24 deletions apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,7 @@ import { useRoom } from '../../contexts/RoomContext';
import ComposerUserActionIndicator from '../ComposerUserActionIndicator';
import { useAutoGrow } from '../RoomComposer/hooks/useAutoGrow';
import { useMessageComposerMergedRefs } from '../hooks/useMessageComposerMergedRefs';
// import MessageBoxActionsToolbar from './MessageBoxActionsToolbar';
import MessageBoxActionsToolbarBuilder from './MessageBoxActionsToolbar/MessageBoxActionsToolbarBuilder';
import { useToolbarActions } from './MessageBoxActionsToolbar/hooks/useToolbarActions';
// TODO fix index for this \/
import MessageBoxActionsToolbarBuilder from './MessageBoxActionsToolbar';
import MessageBoxFormattingToolbar from './MessageBoxFormattingToolbar';
import MessageBoxReplies from './MessageBoxReplies';
import { useMessageBoxAutoFocus } from './hooks/useMessageBoxAutoFocus';
Expand Down Expand Up @@ -349,18 +346,6 @@ const MessageBox = ({

const shouldPopupPreview = useEnablePopupPreview(filter, popup);

// const { messageToolbox: hiddenActions } = useLayoutHiddenActions();

const { data: actions, isSuccess } = useToolbarActions({
canSend,
typing,
isRecording,
isMicrophoneDenied: Boolean(isMicrophoneDenied),
rid: room._id,
tmid,
variant: sizes.inlineSize < 480 ? 'small' : 'large',
});

return (
<>
{chat.composer?.quotedMessages && <MessageBoxReplies />}
Expand Down Expand Up @@ -426,17 +411,15 @@ const MessageBox = ({
disabled={isRecording || !canSend}
/>
)}
<MessageComposerActionsDivider />
{/* <MessageBoxActionsToolbar
variant={sizes.inlineSize < 480 ? 'small' : 'large'}
isRecording={isRecording}
typing={typing}
<MessageBoxActionsToolbarBuilder
canSend={canSend}
typing={typing}
isMicrophoneDenied={isMicrophoneDenied}
rid={room._id}
tmid={tmid}
isMicrophoneDenied={isMicrophoneDenied}
/> */}
{isSuccess && <MessageBoxActionsToolbarBuilder rid={room._id} tmid={tmid} isRecording={isRecording} actions={actions} />}
isRecording={isRecording}
variant={sizes.inlineSize < 480 ? 'small' : 'large'}
/>
</MessageComposerToolbarActions>
<MessageComposerToolbarSubmit>
{!canSend && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ const ActionsToolbarDropdown = ({ actions, isRecording, rid, tmid, ...props }: A
})
}
gap={!option.icon}
disabled={option.disabled}
>
{option.icon && <OptionIcon name={option.icon as ComponentProps<typeof OptionIcon>['name']} />}
<OptionContent>{option.label}</OptionContent>
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,54 +1,70 @@
import type { IRoom, IMessage } from '@rocket.chat/core-typings';
import { MessageComposerAction, MessageComposerActionsDivider } from '@rocket.chat/ui-composer';
import { useLayoutHiddenActions } from '@rocket.chat/ui-contexts';
import type { ComponentProps } from 'react';
import React, { memo } from 'react';

import ActionsToolbarDropdown from './ActionsToolbarDropdown';
import AudioMessageAction from './actions/AudioMessageAction';
import FileUploadAction from './actions/FileUploadAction';
import VideoMessageAction from './actions/VideoMessageAction';
import { useToolbarActions } from './hooks/useToolbarActions';

type MessageBoxActionsToolbarProps = {
canSend: boolean;
typing: boolean;
isMicrophoneDenied: boolean;
variant: 'small' | 'large';
isRecording: boolean;
typing: boolean;
canSend: boolean;
rid: IRoom['_id'];
tmid?: IMessage['_id'];
isMicrophoneDenied?: boolean;
};

const MessageBoxActionsToolbar = ({
variant = 'large',
isRecording,
typing,
const MessageBoxActionsToolbarBuilder = ({
canSend,
typing,
isRecording,
rid,
tmid,
variant = 'large',
isMicrophoneDenied,
}: MessageBoxActionsToolbarProps) => {
useToolbarActions({ canSend, typing, isRecording, isMicrophoneDenied: Boolean(isMicrophoneDenied), rid, tmid, variant });
const actions = [
<VideoMessageAction key='video' collapsed={variant === 'small'} disabled={!canSend || typing || isRecording} />,
<AudioMessageAction
key='audio'
disabled={!canSend || typing || isRecording || isMicrophoneDenied}
isMicrophoneDenied={isMicrophoneDenied}
/>,
<FileUploadAction key='file' collapsed={variant === 'small'} disabled={!canSend || isRecording} />,
];

let featuredAction;
if (variant === 'small') {
featuredAction = actions.splice(1, 1);
const data = useToolbarActions({
canSend,
typing,
isRecording,
isMicrophoneDenied: Boolean(isMicrophoneDenied),
rid,
tmid,
variant,
});
const { composerToolbox: hiddenActions } = useLayoutHiddenActions();

const featured = data.featured.filter((action) => !hiddenActions.includes(action.id));
const menu = data.menu.filter((action) => {
if (typeof action === 'string') {
return action;
}
return !hiddenActions.includes(action.id);
});

const hasValidMenuItems = menu.some((item) => typeof item !== 'string');

if (!featured.length && !hasValidMenuItems) {
return null;
}

return (
<>
{variant !== 'small' && actions}
{variant === 'small' && featuredAction}
<ActionsToolbarDropdown {...(variant === 'small' && { actions })} isRecording={isRecording} rid={rid} tmid={tmid} />
<MessageComposerActionsDivider />
{featured.map((action) => (
<MessageComposerAction
key={action.id}
{...action}
data-qa-id={action.id}
icon={action.icon as ComponentProps<typeof MessageComposerAction>['icon']}
/>
))}
{hasValidMenuItems && <ActionsToolbarDropdown actions={menu} isRecording={isRecording} rid={rid} tmid={tmid} />}
</>
);
};

export default memo(MessageBoxActionsToolbar);
export default memo(MessageBoxActionsToolbarBuilder);

This file was deleted.

This file was deleted.

Loading

0 comments on commit fa98d77

Please sign in to comment.