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 { FriendBarItemView } from '../friend-bar-item/FriendBarItemView';
import { FriendBarViewProps } from './FriendBarView.types'; import { FriendBarViewProps } from './FriendBarView.types';
const MAX_DISPLAY_COUNT: number = 3;
export const FriendBarView: FC<FriendBarViewProps> = props => export const FriendBarView: FC<FriendBarViewProps> = props =>
{ {
const { friendListState = null } = useFriendListContext(); const { friendListState = null } = useFriendListContext();
const { friends = null } = friendListState; const { friends = null } = friendListState;
const [ indexOffset, setIndexOffset ] = useState(0); const [ indexOffset, setIndexOffset ] = useState(0);
const [ maxDisplayCount, setMaxDisplayCount ] = useState(3);
const onlineFriends = useMemo(() => const onlineFriends = useMemo(() =>
{ {
@ -25,19 +24,20 @@ export const FriendBarView: FC<FriendBarViewProps> = props =>
const canIncreaseIndex = useMemo(() => 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; return true;
}, [ indexOffset, onlineFriends ]); }, [ maxDisplayCount, indexOffset, onlineFriends ]);
return ( return (
<div className="d-flex friend-bar align-items-center"> <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) }> <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" /> <i className="fas fa-chevron-left" />
</button> </button>
<FriendBarItemView friend={ (onlineFriends[ indexOffset ] || null) } /> { Array.from(Array(maxDisplayCount), (e, i) =>
<FriendBarItemView friend={ (onlineFriends[ indexOffset + 1 ] || null) } /> {
<FriendBarItemView friend={ (onlineFriends[ indexOffset + 2 ] || null) } /> 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) }> <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" /> <i className="fas fa-chevron-right" />
</button> </button>