nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 14:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update chat style selector

Browse Source
This commit is contained in:
Bill 2022-03-01 00:50:24 -05:00
parent 86d1d8ceba
commit 02556310b1
4 changed files with 38 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/views/room/widgets/chat-input/style-selector/ChatInputStyleSelectorView.tsx → src/views/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
View File

@ -1,8 +1,15 @@
import { FC, MouseEvent, useCallback, useEffect, useState } from 'react';
import { FC, MouseEvent, useEffect, useState } from 'react';
import { Overlay, Popover } from 'react-bootstrap';
import { BatchUpdates } from '../../../../../hooks';
import { NitroCardContentView, NitroCardGridItemView, NitroCardGridView } from '../../../../../layout';
import { ChatInputStyleSelectorViewProps } from './ChatInputStyleSelectorView.types';
import { Base, Flex, Grid } from '../../../../common';
import { BatchUpdates } from '../../../../hooks';
import { NitroCardContentView } from '../../../../layout';
interface ChatInputStyleSelectorViewProps
{
chatStyleId: number;
chatStyleIds: number[];
selectChatStyleId: (styleId: number) => void;
}
export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = props =>
{
@ -10,13 +17,6 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
const [ target, setTarget ] = useState<(EventTarget & HTMLElement)>(null);
const [ selectorVisible, setSelectorVisible ] = useState(false);
useEffect(() =>
{
if(selectorVisible) return;
setTarget(null);
}, [ selectorVisible ]);
const selectStyle = (styleId: number) =>
{
BatchUpdates(() =>
@ -26,7 +26,7 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
});
}
const toggleSelector = useCallback((event: MouseEvent<HTMLElement>) =>
const toggleSelector = (event: MouseEvent<HTMLElement>) =>
{
BatchUpdates(() =>
{
@ -41,26 +41,33 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
if(visible) setTarget((event.target as (EventTarget & HTMLElement)));
})
}, []);
}
useEffect(() =>
{
if(selectorVisible) return;
setTarget(null);
}, [ selectorVisible ]);
return (
<>
<i className="icon chatstyles-icon cursor-pointer" onClick={ toggleSelector } />
<Base pointer className="icon chatstyles-icon" onClick={ toggleSelector } />
<Overlay show={ selectorVisible } target={ target } placement="top">
<Popover className="nitro-chat-style-selector-container" id="chat-style-selector">
<NitroCardContentView className="bg-transparent overflow-hidden">
<NitroCardGridView>
<Popover className="nitro-chat-style-selector-container">
<NitroCardContentView overflow="hidden" className="bg-transparent">
<Grid columnCount={ 3 } overflow="auto">
{ chatStyleIds && (chatStyleIds.length > 0) && chatStyleIds.map((styleId) =>
{
return (
<NitroCardGridItemView key={ styleId } itemActive={ (chatStyleId === styleId) } onClick={ event => selectStyle(styleId) }>
<div className="bubble-container">
<div className={ 'w-100 chat-bubble bubble-' + styleId }>&nbsp;</div>
</div>
</NitroCardGridItemView>
<Flex center pointer key={ styleId } className="bubble-parent-container" onClick={ event => selectStyle(styleId) }>
<Base key={ styleId } className="bubble-container">
<Base className={ `chat-bubble bubble-${ styleId }` }>&nbsp;</Base>
</Base>
</Flex>
);
}) }
</NitroCardGridView>
</Grid>
</NitroCardContentView>
</Popover>
</Overlay>

31
src/views/room/widgets/chat-input/ChatInputView.scss
View File

@ -4,11 +4,12 @@
align-items: center;
position: relative;
height: 40px;
border-radius: $border-radius;
border-radius: 8px;
border: 2px solid rgb(0, 0, 0);
background: #EDEDED;
padding-right: 10px;
width: 100%;
overflow: hidden;
@include media-breakpoint-down(sm) {
display: flex;
@ -21,9 +22,8 @@
&:before {
content: "";
position: absolute;
width: 98%;
width: 100%;
height: 5px;
border-radius: $border-radius;
top: 1px;
left: 0;
right: 0;
@ -65,15 +65,6 @@
}
}
.nitro-chat-style-selector-button {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
right: 7px;
}
.nitro-chat-style-selector-container {
width: $chat-input-style-selector-widget-width;
max-height: $chat-input-style-selector-widget-height;
@ -82,20 +73,12 @@
max-height: $chat-input-style-selector-widget-height !important;
}
.grid-item {
font-size: $font-size-sm;
height: 30px !important;
border-color: unset !important;
border: 0 !important;
padding: 1px 3px;
&:not(.active) {
background-color: unset !important;
}
.bubble-parent-container {
height: 30px;
.bubble-container {
visibility: visible;
width: 75%;
position: relative;
width: 50px;
}
}
}

2
src/views/room/widgets/chat-input/ChatInputView.tsx
View File

@ -4,7 +4,7 @@ import { createPortal } from 'react-dom';
import { GetConfiguration, GetSessionDataManager, LocalizeText, RoomWidgetChatMessage, RoomWidgetChatTypingMessage, RoomWidgetUpdateChatInputContentEvent, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUpdateRoomObjectEvent } from '../../../../api';
import { CreateEventDispatcherHook } from '../../../../hooks/events';
import { useRoomContext } from '../../context/RoomContext';
import { ChatInputStyleSelectorView } from './style-selector/ChatInputStyleSelectorView';
import { ChatInputStyleSelectorView } from './ChatInputStyleSelectorView';
export const ChatInputView: FC<{}> = props =>
{

6
src/views/room/widgets/chat-input/style-selector/ChatInputStyleSelectorView.types.ts
View File

@ -1,6 +0,0 @@
export interface ChatInputStyleSelectorViewProps
{
chatStyleId: number;
chatStyleIds: number[];
selectChatStyleId: (styleId: number) => void;
}