nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-19 05:46:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update RoomToolsWidgetView

Browse Source
This commit is contained in:
Bill 2022-01-12 23:54:53 -05:00
parent 9c77ee70b2
commit af019da6e7
1 changed files with 10 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx
View File

@ -2,6 +2,8 @@ import { RoomLikeRoomComposer } from '@nitrots/nitro-renderer';
import classNames from 'classnames';
import { FC, useCallback, useState } from 'react';
import { LocalizeText, RoomWidgetZoomToggleMessage } from '../../../../api';
import { Base } from '../../../../common/Base';
import { Column } from '../../../../common/Column';
import { NavigatorEvent } from '../../../../events';
import { ChatHistoryEvent } from '../../../../events/chat-history/ChatHistoryEvent';
import { dispatchUiEvent } from '../../../../hooks/events';
@ -10,11 +12,9 @@ import { useRoomContext } from '../../context/RoomContext';
export const RoomToolsWidgetView: FC<{}> = props =>
{
const { widgetHandler = null } = useRoomContext();
const [ isExpended, setIsExpanded ] = useState(false);
const [ isZoomedIn, setIsZoomedIn ] = useState(false);
const [ isLiked, setIsLiked ] = useState(false);
const { widgetHandler = null } = useRoomContext();
const handleToolClick = useCallback((action: string) =>
{
@ -29,7 +29,6 @@ export const RoomToolsWidgetView: FC<{}> = props =>
return;
case 'chat_history':
dispatchUiEvent(new ChatHistoryEvent(ChatHistoryEvent.TOGGLE_CHAT_HISTORY));
//setIsExpanded(false); close this ??
return;
case 'like_room':
if(isLiked) return;
@ -44,27 +43,11 @@ export const RoomToolsWidgetView: FC<{}> = props =>
}, [ isZoomedIn, isLiked, widgetHandler ]);
return (
<div className={'nitro-room-tools ps-3 d-flex' + classNames({ ' open': isExpended })}>
<div className="d-flex flex-column gap-2 w-100 py-2 pe-2">
<div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('settings') }>
<i className="icon icon-cog" /> { LocalizeText('room.settings.button.text') }
</div>
<div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('zoom') }>
<i className={ 'icon ' +classNames({ 'icon-zoom-less': !isZoomedIn, 'icon-zoom-more': isZoomedIn }) } />{ LocalizeText('room.zoom.button.text') }
</div>
<div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('chat_history') }>
<i className="icon icon-chat-history" />{ LocalizeText('room.chathistory.button.text') }
</div>
<div className={ 'd-flex align-items-center gap-2 cursor-pointer tools-item' + classNames({ ' disabled': isLiked })} onClick={ () => handleToolClick('like_room') }>
<i className="icon icon-like-room" /> { LocalizeText('room.like.button.text') }
</div>
<div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('toggle_room_link') }>
<i className="icon icon-room-link" />{ LocalizeText('navigator.embed.caption') }
</div>
</div>
<div className="cursor-pointer d-flex align-items-center px-2" onClick={() => setIsExpanded(value => !value)}>
<i className={ 'fas ' + classNames({ 'fa-chevron-left': isExpended, 'fa-chevron-right': !isExpended }) } />
</div>
</div>
<Column center className="nitro-room-tools p-2">
<Base pointer title={ LocalizeText('room.settings.button.text') } className="icon icon-cog" onClick={ () => handleToolClick('settings') } />
<Base pointer title={ LocalizeText('room.zoom.button.text') } onClick={ () => handleToolClick('zoom') } className={ 'icon ' + classNames({ 'icon-zoom-less': !isZoomedIn, 'icon-zoom-more': isZoomedIn }) } />
<Base pointer title={ LocalizeText('room.chathistory.button.text') } onClick={ () => handleToolClick('chat_history') } className="icon icon-chat-history" />
{ !isLiked && <Base pointer title={ LocalizeText('room.like.button.text') } onClick={ () => handleToolClick('like_room') } className="icon icon-like-room" /> }
</Column>
);
};
}