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

Accordion and friend-list clean-up

Browse Source
This commit is contained in:
MyNameIsBatman 2021-05-12 01:29:33 -03:00
parent be2ebf0059
commit 39f7b0ce06
18 changed files with 125 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/layout/card/NitroCardView.scss
View File

@ -2,6 +2,7 @@ $nitro-card-header-height: 33px;
$nitro-card-tabs-height: 33px;
$nitro-card-top-height: $nitro-card-header-height + $nitro-card-tabs-height;
@import './accordion/NitroCardAccordionView';
@import './content/NitroCardContentView';
@import './header/NitroCardHeaderView';
@import './simple-header/NitroCardSimpleHeaderView';

1
src/layout/card/accordion/NitroCardAccordionView.scss Normal file
View File

@ -0,0 +1 @@
@import './item/NitroCardAccordionItemView';

13
src/layout/card/accordion/NitroCardAccordionView.tsx Normal file
View File

@ -0,0 +1,13 @@
import { FC } from 'react';
import { NitroCardAccordionViewProps } from './NitroCardAccordionView.types';
export const NitroCardAccordionView: FC<NitroCardAccordionViewProps> = props =>
{
const { className = '' } = props;
return (
<div className={ "nitro-card-accordion bg-light text-black " + className }>
{ props.children }
</div>
);
}

4
src/layout/card/accordion/NitroCardAccordionView.types.ts Normal file
View File

@ -0,0 +1,4 @@
export interface NitroCardAccordionViewProps
{
className?: string;
}

15
src/layout/card/accordion/item/NitroCardAccordionItemView.scss Normal file
View File

@ -0,0 +1,15 @@
.nitro-card-accordion-item {
.nitro-card-accordion-item-header {
border-bottom: 1px solid rgba($black, 0.2);
}
&.active {
> .nitro-card-accordion-item-header {
background: rgba($white, 0.5);
}
}
.nitro-card-accordion-item-content {
background: rgba($black, 0.1);
}
}

25
src/layout/card/accordion/item/NitroCardAccordionItemView.tsx Normal file
View File

@ -0,0 +1,25 @@
import { FC, useState } from 'react';
import { NitroCardAccordionItemViewProps } from './NitroCardAccordionItemView.types';
export const NitroCardAccordionItemView: FC<NitroCardAccordionItemViewProps> = props =>
{
const { className = '', headerClassName = '', contentClassName = '', headerText = '' } = props;
const [ isExpanded, setIsExpanded ] = useState(false);
return (
<div className={ 'nitro-card-accordion-item ' + className + (isExpanded ? ' active' : '') }>
<div className={ 'nitro-card-accordion-item-header px-2 py-1 d-flex ' + headerClassName } onClick={ () => setIsExpanded((value) => !value) }>
<div className="w-100">
{ headerText }
</div>
<div className="justify-self-center">
<i className={ 'fas fa-caret-' + (isExpanded ? 'up' : 'down') } />
</div>
</div>
<div className={ 'nitro-card-accordion-item-content ' + contentClassName + (!isExpanded ? ' d-none' : '') }>
{ props.children }
</div>
</div>
);
}

7
src/layout/card/accordion/item/NitroCardAccordionItemView.types.ts Normal file
View File

@ -0,0 +1,7 @@
export interface NitroCardAccordionItemViewProps
{
className?: string;
headerClassName?: string;
contentClassName?: string;
headerText: string;
}

42
src/views/friend-list/FriendListView.tsx
View File

@ -1,23 +1,25 @@
import { MessengerInitComposer } from 'nitro-renderer';
import React, { FC, useCallback, useEffect, useState } from 'react';
import { FriendListEvent } from '../../events';
import { DraggableWindow } from '../../hooks/draggable-window/DraggableWindow';
import { useUiEvent } from '../../hooks/events/ui/ui-event';
import { SendMessageHook } from '../../hooks/messages/message-event';
import { NitroCardHeaderView, NitroCardView } from '../../layout';
import { NitroCardAccordionItemView } from '../../layout/card/accordion/item/NitroCardAccordionItemView';
import { NitroCardAccordionView } from '../../layout/card/accordion/NitroCardAccordionView';
import { LocalizeText } from '../../utils/LocalizeText';
import { FriendListMessageHandler } from './FriendListMessageHandler';
import { FriendListTabs, FriendListViewProps, IFriendListContext } from './FriendListView.types';
import { FriendListTabsContentView } from './tabs-content/FriendListTabsContentView';
import { FriendListTabsSelectorView } from './tabs-selector/FriendListTabsSelectorView';
import { FriendListFriendsView } from './friends/FriendListFriendsView';
import { MessengerSettings } from './utils/MessengerSettings';
export const FriendListContext = React.createContext<IFriendListContext>(null);
export const FriendListView: FC<FriendListViewProps> = props =>
{
const tabs = [ FriendListTabs.FRIENDS, FriendListTabs.REQUESTS, FriendListTabs.SEARCH ];
const [ isVisible, setIsVisible ] = useState(false);
const [ currentTab, setCurrentTab ] = useState<string>(null);
const [ tabs, setTabs ] = useState<string[]>([ FriendListTabs.FRIENDS, FriendListTabs.REQUESTS, FriendListTabs.SEARCH ]);
const [ messengerSettings, setMessengerSettings ] = useState<MessengerSettings>(null);
const onFriendListEvent = useCallback((event: FriendListEvent) =>
@ -51,26 +53,24 @@ export const FriendListView: FC<FriendListViewProps> = props =>
SendMessageHook(new MessengerInitComposer());
}, []);
function hideFriendList(): void
{
setIsVisible(false);
}
return (
<FriendListContext.Provider value={{ currentTab: currentTab, onSetCurrentTab: setCurrentTab }}>
<FriendListMessageHandler setMessengerSettings={ setMessengerSettings } />
{ isVisible && <DraggableWindow handle=".drag-handler">
<div className="nitro-friend-list d-flex flex-column bg-primary border border-black shadow rounded">
<div className="drag-handler d-flex justify-content-between align-items-center px-3 pt-3">
<div className="h6 m-0">{ LocalizeText('friendlist.friends') }</div>
<button type="button" className="close" onClick={ hideFriendList }>
<i className="fas fa-times"></i>
</button>
</div>
<FriendListTabsSelectorView tabs={ tabs } />
<FriendListTabsContentView />
</div>
</DraggableWindow> }
{ isVisible &&
<NitroCardView className="nitro-friend-list">
<NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ event => setIsVisible(false) } />
<NitroCardAccordionView>
<NitroCardAccordionItemView headerText="Friends" contentClassName="ps-3">
<FriendListFriendsView />
</NitroCardAccordionItemView>
<NitroCardAccordionItemView headerText="Friend Requests" contentClassName="ps-3">
abc
</NitroCardAccordionItemView>
<NitroCardAccordionItemView headerText="Search" contentClassName="ps-3">
abc
</NitroCardAccordionItemView>
</NitroCardAccordionView>
</NitroCardView> }
</FriendListContext.Provider>
);
}

36
src/views/friend-list/friends/FriendListFriendsView.tsx Normal file
View File

@ -0,0 +1,36 @@
import { FC, useContext, useState } from 'react';
import { NitroCardAccordionItemView } from '../../../layout/card/accordion/item/NitroCardAccordionItemView';
import { NitroCardAccordionView } from '../../../layout/card/accordion/NitroCardAccordionView';
import { FriendListContext } from '../FriendListView';
import { FriendListFriendsViewProps } from './FriendListFriendsView.types';
export const FriendListFriendsView: FC<FriendListFriendsViewProps> = props =>
{
const friendListContext = useContext(FriendListContext);
const [ isOnlineFriendsExtended, setIsOnlineFriendsExtended ] = useState(false);
const [ isOfflineFriendsExtended, setIsOfflineFriendsExtended ] = useState(false);
function toggleOnlineFriends(): void
{
setIsOnlineFriendsExtended(value => !value);
}
function toggleOfflineFriends(): void
{
setIsOfflineFriendsExtended(value => !value);
}
return (
<>
<NitroCardAccordionView>
<NitroCardAccordionItemView headerText="Friends (0)">
abc
</NitroCardAccordionItemView>
<NitroCardAccordionItemView headerText="Offline Friends (0)">
abc
</NitroCardAccordionItemView>
</NitroCardAccordionView>
</>
);
}

2
src/views/friend-list/friends/FriendListFriendsView.types.ts Normal file
View File

@ -0,0 +1,2 @@
export interface FriendListFriendsViewProps
{}

18
src/views/friend-list/tabs-content/FriendListTabsContentView.tsx
View File

@ -1,18 +0,0 @@
import { FC, useContext } from 'react';
import { FriendListContext } from '../FriendListView';
import { FriendListTabs } from '../FriendListView.types';
import { FriendListTabsContentViewProps } from './FriendListTabsContentView.types';
import { FriendListTabFriendsView } from './friends/FriendListTabFriendsView';
export const FriendListTabsContentView: FC<FriendListTabsContentViewProps> = props =>
{
const friendListContext = useContext(FriendListContext);
return (
<div className="px-3 pb-3">
{ friendListContext && friendListContext.currentTab && friendListContext.currentTab === FriendListTabs.FRIENDS && <FriendListTabFriendsView /> }
{ friendListContext && friendListContext.currentTab && friendListContext.currentTab === FriendListTabs.REQUESTS }
{ friendListContext && friendListContext.currentTab && friendListContext.currentTab === FriendListTabs.SEARCH }
</div>
);
}

2
src/views/friend-list/tabs-content/FriendListTabsContentView.types.ts
View File

@ -1,2 +0,0 @@
export interface FriendListTabsContentViewProps
{}

35
src/views/friend-list/tabs-content/friends/FriendListTabFriendsView.tsx
View File

@ -1,35 +0,0 @@
import classNames from 'classnames';
import { FC, useContext, useState } from 'react';
import { FriendListContext } from '../../FriendListView';
import { FriendListTabFriendsViewProps } from './FriendListTabFriendsView.types';
export const FriendListTabFriendsView: FC<FriendListTabFriendsViewProps> = props =>
{
const friendListContext = useContext(FriendListContext);
const [ isOnlineFriendsExtended, setIsOnlineFriendsExtended ] = useState(false);
const [ isOfflineFriendsExtended, setIsOfflineFriendsExtended ] = useState(false);
function toggleOnlineFriends(): void
{
setIsOnlineFriendsExtended(value => !value);
}
function toggleOfflineFriends(): void
{
setIsOfflineFriendsExtended(value => !value);
}
return (
<div>
<div className="d-flex mb-2 small">
<i className={ "fas " + classNames({ 'fa-plus': !isOnlineFriendsExtended, 'fa-minus': isOnlineFriendsExtended })} onClick={ toggleOnlineFriends }></i>
<div className="align-self-center w-100 ml-2">Friends (0)</div>
</div>
<div className="d-flex mb-2 small">
<i className={ "fas " + classNames({ 'fa-plus': !isOfflineFriendsExtended, 'fa-minus': isOfflineFriendsExtended })} onClick={ toggleOfflineFriends }></i>
<div className="align-self-center w-100 ml-2">Offline Friends (0)</div>
</div>
</div>
);
}

2
src/views/friend-list/tabs-content/friends/FriendListTabFriendsView.types.ts
View File

@ -1,2 +0,0 @@
export interface FriendListTabFriendsViewProps
{}

18
src/views/friend-list/tabs-selector/FriendListTabsSelectorView.tsx
View File

@ -1,18 +0,0 @@
import { FC } from 'react';
import { FriendListTabsSelectorViewProps } from './FriendListTabsSelectorView.types';
import { FriendListTabView } from './tab/FriendListTabView';
export const FriendListTabsSelectorView: FC<FriendListTabsSelectorViewProps> = props =>
{
return (
<div className="p-3">
{ props.tabs &&
<div className="btn-group w-100">
{ props.tabs.map((tab, index) =>
{
return <FriendListTabView key={ index } tab={ tab } />
}) }
</div> }
</div>
);
}

4
src/views/friend-list/tabs-selector/FriendListTabsSelectorView.types.ts
View File

@ -1,4 +0,0 @@
export interface FriendListTabsSelectorViewProps
{
tabs: string[];
}

18
src/views/friend-list/tabs-selector/tab/FriendListTabView.tsx
View File

@ -1,18 +0,0 @@
import classNames from 'classnames';
import { FC, useContext } from 'react';
import { LocalizeText } from '../../../../utils/LocalizeText';
import { FriendListContext } from '../../FriendListView';
import { FriendListTabViewProps } from './FriendListTabView.types';
export const FriendListTabView: FC<FriendListTabViewProps> = props =>
{
const friendListContext = useContext(FriendListContext);
return (
<button type="button"
className={ 'btn btn-secondary btn-sm ' + classNames({ 'active': friendListContext.currentTab === props.tab })}
onClick={ () => friendListContext.onSetCurrentTab(props.tab) }>
{ LocalizeText(props.tab) }
</button>
);
}

4
src/views/friend-list/tabs-selector/tab/FriendListTabView.types.ts
View File

@ -1,4 +0,0 @@
export interface FriendListTabViewProps
{
tab: string;
}