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

Add max display count

Browse Source
This commit is contained in:
Bill 2021-07-03 22:50:03 -04:00
parent 2d2e04764f
commit 2e93a72c56
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/views/friend-list/views/friend-bar/FriendBarView.tsx
View File

@ -3,13 +3,12 @@ import { useFriendListContext } from '../../context/FriendListContext';
import { FriendBarItemView } from '../friend-bar-item/FriendBarItemView';
import { FriendBarViewProps } from './FriendBarView.types';
const MAX_DISPLAY_COUNT: number = 3;
export const FriendBarView: FC<FriendBarViewProps> = props =>
{
const { friendListState = null } = useFriendListContext();
const { friends = null } = friendListState;
const [ indexOffset, setIndexOffset ] = useState(0);
const [ maxDisplayCount, setMaxDisplayCount ] = useState(3);
const onlineFriends = useMemo(() =>
{
@ -25,19 +24,20 @@ export const FriendBarView: FC<FriendBarViewProps> = props =>
const canIncreaseIndex = useMemo(() =>
{
if((onlineFriends.length <= MAX_DISPLAY_COUNT) || (indexOffset === (onlineFriends.length - 1))) return false;
if((onlineFriends.length <= maxDisplayCount) || (indexOffset === (onlineFriends.length - 1))) return false;
return true;
}, [ indexOffset, onlineFriends ]);
}, [ maxDisplayCount, indexOffset, onlineFriends ]);
return (
<div className="d-flex friend-bar align-items-center">
<button type="button" className="btn btn-sm btn-black align-self-center friend-bar-button" disabled={ !canDecreaseIndex } onClick={ event => setIndexOffset(indexOffset - 1) }>
<i className="fas fa-chevron-left" />
</button>
<FriendBarItemView friend={ (onlineFriends[ indexOffset ] || null) } />
<FriendBarItemView friend={ (onlineFriends[ indexOffset + 1 ] || null) } />
<FriendBarItemView friend={ (onlineFriends[ indexOffset + 2 ] || null) } />
{ Array.from(Array(maxDisplayCount), (e, i) =>
{
return <FriendBarItemView friend={ (onlineFriends[ indexOffset + i ] || null) } />;
}) }
<button type="button" className="btn btn-sm btn-black align-self-center friend-bar-button" disabled={ !canIncreaseIndex } onClick={ event => setIndexOffset(indexOffset + 1) }>
<i className="fas fa-chevron-right" />
</button>