mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-05 06:50:28 +03:00
open profile view on left side in member drawer
This commit is contained in:
parent
2f77b3fd85
commit
a44cefedcf
4 changed files with 10 additions and 8 deletions
|
|
@ -10,7 +10,7 @@ import { SpaceProvider } from '../hooks/useSpace';
|
||||||
import { RoomProvider } from '../hooks/useRoom';
|
import { RoomProvider } from '../hooks/useRoom';
|
||||||
|
|
||||||
function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState }) {
|
function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState }) {
|
||||||
const { roomId, spaceId, userId, cords } = state;
|
const { roomId, spaceId, userId, cords, position } = state;
|
||||||
const allJoinedRooms = useAllJoinedRoomsSet();
|
const allJoinedRooms = useAllJoinedRoomsSet();
|
||||||
const getRoom = useGetRoom(allJoinedRooms);
|
const getRoom = useGetRoom(allJoinedRooms);
|
||||||
const room = getRoom(roomId);
|
const room = getRoom(roomId);
|
||||||
|
|
@ -23,7 +23,7 @@ function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState })
|
||||||
return (
|
return (
|
||||||
<PopOut
|
<PopOut
|
||||||
anchor={cords}
|
anchor={cords}
|
||||||
position="Top"
|
position={position ?? 'Top'}
|
||||||
align="Start"
|
align="Start"
|
||||||
content={
|
content={
|
||||||
<FocusTrap
|
<FocusTrap
|
||||||
|
|
|
||||||
|
|
@ -147,7 +147,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
|
||||||
const btn = evt.currentTarget as HTMLButtonElement;
|
const btn = evt.currentTarget as HTMLButtonElement;
|
||||||
const userId = btn.getAttribute('data-user-id');
|
const userId = btn.getAttribute('data-user-id');
|
||||||
if (!userId) return;
|
if (!userId) return;
|
||||||
openUserRoomProfile(room.roomId, space?.roomId, userId, btn.getBoundingClientRect());
|
openUserRoomProfile(room.roomId, space?.roomId, userId, btn.getBoundingClientRect(), 'Left');
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import { useCallback } from 'react';
|
import { useCallback } from 'react';
|
||||||
import { useAtomValue, useSetAtom } from 'jotai';
|
import { useAtomValue, useSetAtom } from 'jotai';
|
||||||
import { RectCords } from 'folds';
|
import { Position, RectCords } from 'folds';
|
||||||
import { userRoomProfileAtom, UserRoomProfileState } from '../userRoomProfile';
|
import { userRoomProfileAtom, UserRoomProfileState } from '../userRoomProfile';
|
||||||
|
|
||||||
export const useUserRoomProfileState = (): UserRoomProfileState | undefined => {
|
export const useUserRoomProfileState = (): UserRoomProfileState | undefined => {
|
||||||
|
|
@ -24,14 +24,15 @@ type OpenCallback = (
|
||||||
roomId: string,
|
roomId: string,
|
||||||
spaceId: string | undefined,
|
spaceId: string | undefined,
|
||||||
userId: string,
|
userId: string,
|
||||||
cords: RectCords
|
cords: RectCords,
|
||||||
|
position?: Position
|
||||||
) => void;
|
) => void;
|
||||||
export const useOpenUserRoomProfile = (): OpenCallback => {
|
export const useOpenUserRoomProfile = (): OpenCallback => {
|
||||||
const setUserRoomProfile = useSetAtom(userRoomProfileAtom);
|
const setUserRoomProfile = useSetAtom(userRoomProfileAtom);
|
||||||
|
|
||||||
const open: OpenCallback = useCallback(
|
const open: OpenCallback = useCallback(
|
||||||
(roomId, spaceId, userId, cords) => {
|
(roomId, spaceId, userId, cords, position) => {
|
||||||
setUserRoomProfile({ roomId, spaceId, userId, cords });
|
setUserRoomProfile({ roomId, spaceId, userId, cords, position });
|
||||||
},
|
},
|
||||||
[setUserRoomProfile]
|
[setUserRoomProfile]
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { RectCords } from 'folds';
|
import { Position, RectCords } from 'folds';
|
||||||
import { atom } from 'jotai';
|
import { atom } from 'jotai';
|
||||||
|
|
||||||
export type UserRoomProfileState = {
|
export type UserRoomProfileState = {
|
||||||
|
|
@ -6,6 +6,7 @@ export type UserRoomProfileState = {
|
||||||
roomId: string;
|
roomId: string;
|
||||||
spaceId?: string;
|
spaceId?: string;
|
||||||
cords: RectCords;
|
cords: RectCords;
|
||||||
|
position?: Position;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const userRoomProfileAtom = atom<UserRoomProfileState | undefined>(undefined);
|
export const userRoomProfileAtom = atom<UserRoomProfileState | undefined>(undefined);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue