nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-02-20 18:52:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix friend bar offsets

Browse Source
This commit is contained in:
Bill 2022-04-02 21:31:44 -04:00
parent 40856b8c94
commit 8fd850d8be
1 changed files with 5 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/friends/views/friends-bar/FriendsBarView.tsx
View File

@ -1,5 +1,5 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { FC, useState } from 'react';
import { FC, useRef, useState } from 'react';
import { MessengerFriend } from '../../../../api';
import { Button, Flex } from '../../../../common';
import { FriendBarItemView } from './FriendBarItemView';
@ -10,17 +10,15 @@ export const FriendBarView: FC<{ onlineFriends: MessengerFriend[] }> = props =>
{
const { onlineFriends = null } = props;
const [ indexOffset, setIndexOffset ] = useState(0);
const canDecreaseIndex = () => (indexOffset === 0) ? false : true;
const canIncreaseIndex = () => ((onlineFriends.length <= MAX_DISPLAY_COUNT) || (indexOffset === (onlineFriends.length - 1))) ? false : true;
const elementRef = useRef<HTMLDivElement>();
return (
<Flex alignItems="center" className="friend-bar">
<Button variant="black" className="friend-bar-button" disabled={ !canDecreaseIndex } onClick={ event => setIndexOffset(indexOffset - 1) }>
<Flex innerRef={ elementRef } alignItems="center" className="friend-bar">
<Button variant="black" className="friend-bar-button" disabled={ (indexOffset <= 0) } onClick={ event => setIndexOffset(indexOffset - 1) }>
<FontAwesomeIcon icon="chevron-left" />
</Button>
{ Array.from(Array(MAX_DISPLAY_COUNT), (e, i) => <FriendBarItemView key={ i } friend={ (onlineFriends[ indexOffset + i ] || null) } />) }
<Button variant="black" className="friend-bar-button" disabled={ !canIncreaseIndex } onClick={ event => setIndexOffset(indexOffset + 1) }>
<Button variant="black" className="friend-bar-button" disabled={ !((onlineFriends.length > MAX_DISPLAY_COUNT) && ((indexOffset + MAX_DISPLAY_COUNT) <= (onlineFriends.length - 1))) } onClick={ event => setIndexOffset(indexOffset + 1) }>
<FontAwesomeIcon icon="chevron-right" />
</Button>
</Flex>