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 doorbell widget

Browse Source
This commit is contained in:
Bill 2022-02-25 19:40:53 -05:00
parent da810998c5
commit de682dac3a
6 changed files with 41 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/views/room/widgets/RoomWidgets.scss
View File

@ -3,7 +3,6 @@
@import './chat-input/ChatInputView';
@import './choosers/ChooserWidgetView';
@import './context-menu/ContextMenu';
@import './doorbell/DoorbellWidgetView';
@import './friend-request/FriendRequestDialogView';
@import './furniture/FurnitureWidgets';
@import './infostand/InfoStandWidgetView';

29
src/views/room/widgets/doorbell/DoorbellWidgetItemView.tsx Normal file
View File

@ -0,0 +1,29 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { FC } from 'react';
import { Button, ButtonGroup, Flex, Text } from '../../../../common';
interface DoorbellWidgetItemViewProps
{
userName: string;
accept: () => void;
deny: () => void;
}
export const DoorbellWidgetItemView: FC<DoorbellWidgetItemViewProps> = props =>
{
const { userName = '', accept = null, deny = null } = props;
return (
<Flex alignItems="center" justifyContent="between">
<Text bold>{ userName }</Text>
<ButtonGroup>
<Button variant="success" onClick={ accept }>
<FontAwesomeIcon icon="check" />
</Button>
<Button variant="danger" onClick={ deny }>
<FontAwesomeIcon icon="times" />
</Button>
</ButtonGroup>
</Flex>
);
}

22
src/views/room/widgets/doorbell/DoorbellWidgetView.scss
View File

@ -1,22 +0,0 @@
.nitro-widget-doorbell {
width: 250px;
.content-area {
min-height: 143px;
height: 143px;
}
.doorbell-user-list {
.list-item {
background: $grid-active-bg-color;
}
.col:nth-child(even) {
.list-item {
background: $white !important;
}
}
}
}

23
src/views/room/widgets/doorbell/DoorbellWidgetView.tsx
View File

@ -1,9 +1,10 @@
import { FC, useCallback, useState } from 'react';
import { LocalizeText, RoomWidgetDoorbellEvent, RoomWidgetLetUserInMessage } from '../../../../api';
import { CreateEventDispatcherHook } from '../../../../hooks';
import { Column } from '../../../../common';
import { BatchUpdates, CreateEventDispatcherHook } from '../../../../hooks';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
import { useRoomContext } from '../../context/RoomContext';
import { DoorbellWidgetItemView } from './doorbell-item/DoorbellWidgetItemView';
import { DoorbellWidgetItemView } from './DoorbellWidgetItemView';
export const DoorbellWidgetView: FC<{}> = props =>
{
@ -15,10 +16,11 @@ export const DoorbellWidgetView: FC<{}> = props =>
{
if(users.indexOf(userName) >= 0) return;
const newUsers = [ ...users, userName ];
setUsers(newUsers);
BatchUpdates(() =>
{
setUsers([ ...users, userName ]);
setIsVisible(true);
});
}, [ users ]);
const removeUser = useCallback((userName: string) =>
@ -66,13 +68,10 @@ export const DoorbellWidgetView: FC<{}> = props =>
return (
<NitroCardView className="nitro-widget-doorbell" simple={ true }>
<NitroCardHeaderView headerText={ LocalizeText('navigator.doorbell.title') } onCloseClick={ event => setIsVisible(false) } />
<NitroCardContentView>
<div className="row row-cols-1 doorbell-user-list">
{ (users.length > 0) && users.map(userName =>
{
return <DoorbellWidgetItemView key={ userName } userName={ userName } accept={ () => answer(userName, true) } deny={ () => answer(userName, false) } />;
}) }
</div>
<NitroCardContentView overflow="hidden">
<Column overflow="auto">
{ users && (users.length > 0) && users.map(userName => <DoorbellWidgetItemView key={ userName } userName={ userName } accept={ () => answer(userName, true) } deny={ () => answer(userName, false) } />) }
</Column>
</NitroCardContentView>
</NitroCardView>
);

21
src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.tsx
View File

@ -1,21 +0,0 @@
import { FC } from 'react';
import { DoorbellWidgetItemViewProps } from './DoorbellWidgetItemView.types';
export const DoorbellWidgetItemView: FC<DoorbellWidgetItemViewProps> = props =>
{
const { userName = '', accept = null, deny = null } = props;
return (
<div className="d-flex col align-items-center justify-content-between">
<span className="fw-bold text-black">{ userName }</span>
<div>
<button type="button" className="btn btn-success btn-sm me-1" onClick={ accept }>
<i className="fas fa-check" />
</button>
<button type="button" className="btn btn-danger btn-sm" onClick={ deny }>
<i className="fas fa-times" />
</button>
</div>
</div>
);
}

6
src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.types.ts
View File

@ -1,6 +0,0 @@
export interface DoorbellWidgetItemViewProps
{
userName: string;
accept: () => void;
deny: () => void;
}