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

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

@ -4,11 +4,12 @@
align-items: center; align-items: center;
position: relative; position: relative;
height: 40px; height: 40px;
border-radius: $border-radius; border-radius: 8px;
border: 2px solid rgb(0, 0, 0); border: 2px solid rgb(0, 0, 0);
background: #EDEDED; background: #EDEDED;
padding-right: 10px; padding-right: 10px;
width: 100%; width: 100%;
overflow: hidden;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
display: flex; display: flex;
@ -21,9 +22,8 @@
&:before { &:before {
content: ""; content: "";
position: absolute; position: absolute;
width: 98%; width: 100%;
height: 5px; height: 5px;
border-radius: $border-radius;
top: 1px; top: 1px;
left: 0; left: 0;
right: 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 { .nitro-chat-style-selector-container {
width: $chat-input-style-selector-widget-width; width: $chat-input-style-selector-widget-width;
max-height: $chat-input-style-selector-widget-height; max-height: $chat-input-style-selector-widget-height;
@ -82,20 +73,12 @@
max-height: $chat-input-style-selector-widget-height !important; max-height: $chat-input-style-selector-widget-height !important;
} }
.grid-item { .bubble-parent-container {
font-size: $font-size-sm; height: 30px;
height: 30px !important;
border-color: unset !important;
border: 0 !important;
padding: 1px 3px;
&:not(.active) {
background-color: unset !important;
}
.bubble-container { .bubble-container {
visibility: visible; position: relative;
width: 75%; 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 { GetConfiguration, GetSessionDataManager, LocalizeText, RoomWidgetChatMessage, RoomWidgetChatTypingMessage, RoomWidgetUpdateChatInputContentEvent, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUpdateRoomObjectEvent } from '../../../../api';
import { CreateEventDispatcherHook } from '../../../../hooks/events'; import { CreateEventDispatcherHook } from '../../../../hooks/events';
import { useRoomContext } from '../../context/RoomContext'; import { useRoomContext } from '../../context/RoomContext';
import { ChatInputStyleSelectorView } from './style-selector/ChatInputStyleSelectorView'; import { ChatInputStyleSelectorView } from './ChatInputStyleSelectorView';
export const ChatInputView: FC<{}> = props => 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;
}