sforkowany z mirror/soapbox
Porównaj commity
22 Commity
develop
...
gleasonato
Autor | SHA1 | Data |
---|---|---|
Alex Gleason | bdb8ce8004 | |
Alex Gleason | 5a2ca1ef34 | |
Alex Gleason | 2aff9c9091 | |
Alex Gleason | f730897323 | |
Alex Gleason | 50457d3b8d | |
Alex Gleason | 6eadaf2942 | |
Alex Gleason | 64f17ef013 | |
Alex Gleason | 072e058764 | |
Alex Gleason | ef5001d38b | |
Alex Gleason | 81bb8b933a | |
Alex Gleason | f68ce9c47b | |
Alex Gleason | 0631657278 | |
Alex Gleason | 9ac2764bfa | |
Alex Gleason | dc597ac765 | |
Alex Gleason | ec7f9b9950 | |
Alex Gleason | 53a930c75c | |
Alex Gleason | 7f6b19aa4a | |
Alex Gleason | aa8f84d352 | |
Alex Gleason | f6f3973eac | |
Alex Gleason | a433d22ba3 | |
Alex Gleason | ab8d162f03 | |
Alex Gleason | cb74b0a37c |
|
@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|||
- Posts: don't have to click the play button twice for embedded videos.
|
||||
- index.html: remove `referrer` meta tag so it doesn't conflict with backend's `Referrer-Policy` header.
|
||||
- Modals: fix media modal automatically switching to video.
|
||||
- Navigation: profile dropdown erratic behavior.
|
||||
|
||||
### Removed
|
||||
- Admin: single user mode. Now the homepage can be redirected to any URL.
|
||||
|
|
|
@ -32,8 +32,8 @@ const getSoapboxConfig = createSelector([
|
|||
}
|
||||
|
||||
// If RGI reacts aren't supported, strip VS16s
|
||||
// // https://git.pleroma.social/pleroma/pleroma/-/issues/2355
|
||||
if (!features.emojiReactsRGI) {
|
||||
// https://git.pleroma.social/pleroma/pleroma/-/issues/2355
|
||||
if (features.emojiReactsNonRGI) {
|
||||
soapboxConfig.set('allowedEmoji', soapboxConfig.allowedEmoji.map(removeVS16s));
|
||||
}
|
||||
});
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
import React from 'react';
|
||||
import React, { useRef } from 'react';
|
||||
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
|
||||
import { Link, useHistory } from 'react-router-dom';
|
||||
|
||||
import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
|
||||
import VerificationBadge from 'soapbox/components/verification-badge';
|
||||
import ActionButton from 'soapbox/features/ui/components/action-button';
|
||||
import { useAppSelector, useOnScreen } from 'soapbox/hooks';
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
import { getAcct } from 'soapbox/utils/accounts';
|
||||
import { displayFqn } from 'soapbox/utils/state';
|
||||
|
||||
|
@ -117,19 +117,14 @@ const Account = ({
|
|||
emoji,
|
||||
note,
|
||||
}: IAccount) => {
|
||||
const overflowRef = React.useRef<HTMLDivElement>(null);
|
||||
const actionRef = React.useRef<HTMLDivElement>(null);
|
||||
// @ts-ignore
|
||||
const isOnScreen = useOnScreen(overflowRef);
|
||||
|
||||
const [style, setStyle] = React.useState<React.CSSProperties>({ visibility: 'hidden' });
|
||||
const overflowRef = useRef<HTMLDivElement>(null);
|
||||
const actionRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const me = useAppSelector((state) => state.me);
|
||||
const username = useAppSelector((state) => account ? getAcct(account, displayFqn(state)) : null);
|
||||
|
||||
const handleAction = () => {
|
||||
// @ts-ignore
|
||||
onActionClick(account);
|
||||
onActionClick!(account);
|
||||
};
|
||||
|
||||
const renderAction = () => {
|
||||
|
@ -162,19 +157,6 @@ const Account = ({
|
|||
|
||||
const intl = useIntl();
|
||||
|
||||
React.useEffect(() => {
|
||||
const style: React.CSSProperties = {};
|
||||
const actionWidth = actionRef.current?.clientWidth || 0;
|
||||
|
||||
if (overflowRef.current) {
|
||||
style.maxWidth = overflowRef.current.clientWidth - 30 - avatarSize - actionWidth;
|
||||
} else {
|
||||
style.visibility = 'hidden';
|
||||
}
|
||||
|
||||
setStyle(style);
|
||||
}, [isOnScreen, overflowRef, actionRef]);
|
||||
|
||||
if (!account) {
|
||||
return null;
|
||||
}
|
||||
|
@ -195,7 +177,7 @@ const Account = ({
|
|||
return (
|
||||
<div data-testid='account' className='group block w-full shrink-0' ref={overflowRef}>
|
||||
<HStack alignItems={actionAlignment} justifyContent='between'>
|
||||
<HStack alignItems={withAccountNote || note ? 'top' : 'center'} space={3}>
|
||||
<HStack alignItems={withAccountNote || note ? 'top' : 'center'} space={3} className='overflow-hidden'>
|
||||
<ProfilePopper
|
||||
condition={showProfileHoverCard}
|
||||
wrapper={(children) => <HoverRefWrapper className='relative' accountId={account.id} inline>{children}</HoverRefWrapper>}
|
||||
|
@ -215,7 +197,7 @@ const Account = ({
|
|||
</LinkEl>
|
||||
</ProfilePopper>
|
||||
|
||||
<div className='grow'>
|
||||
<div className='grow overflow-hidden'>
|
||||
<ProfilePopper
|
||||
condition={showProfileHoverCard}
|
||||
wrapper={(children) => <HoverRefWrapper accountId={account.id} inline>{children}</HoverRefWrapper>}
|
||||
|
@ -225,7 +207,7 @@ const Account = ({
|
|||
title={account.acct}
|
||||
onClick={(event: React.MouseEvent) => event.stopPropagation()}
|
||||
>
|
||||
<HStack space={1} alignItems='center' grow style={style}>
|
||||
<HStack space={1} alignItems='center' grow>
|
||||
<Text
|
||||
size='sm'
|
||||
weight='semibold'
|
||||
|
@ -241,7 +223,7 @@ const Account = ({
|
|||
</ProfilePopper>
|
||||
|
||||
<Stack space={withAccountNote || note ? 1 : 0}>
|
||||
<HStack alignItems='center' space={1} style={style}>
|
||||
<HStack alignItems='center' space={1}>
|
||||
<Text theme='muted' size='sm' direction='ltr' truncate>@{username}</Text>
|
||||
|
||||
{account.favicon && (
|
||||
|
|
|
@ -31,7 +31,3 @@ div:focus[data-reach-menu-list] {
|
|||
[data-reach-menu-link][data-disabled] {
|
||||
@apply opacity-25 cursor-default;
|
||||
}
|
||||
|
||||
[data-reach-menu-popover] hr {
|
||||
@apply my-1 mx-2 border-t-2 border-gray-100 dark:border-gray-800;
|
||||
}
|
||||
|
|
|
@ -37,6 +37,6 @@ const MenuList: React.FC<IMenuList> = (props) => {
|
|||
};
|
||||
|
||||
/** Divides menu items. */
|
||||
const MenuDivider = () => <hr />;
|
||||
const MenuDivider = () => <hr className='my-1 mx-2 border-t-2 border-gray-100 dark:border-gray-800' />;
|
||||
|
||||
export { Menu, MenuButton, MenuDivider, MenuItems, MenuItem, MenuList, MenuLink };
|
||||
|
|
|
@ -43,7 +43,7 @@ interface IChatComposer extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaEl
|
|||
onSelectFile: (files: FileList, intl: IntlShape) => void
|
||||
resetFileKey: number | null
|
||||
attachments?: Attachment[]
|
||||
onDeleteAttachment?: () => void
|
||||
onDeleteAttachment?: (i: number) => void
|
||||
isUploading?: boolean
|
||||
uploadProgress?: number
|
||||
}
|
||||
|
@ -73,13 +73,14 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
|
|||
const isBlocked = useAppSelector((state) => state.getIn(['relationships', chat?.account?.id, 'blocked_by']));
|
||||
const isBlocking = useAppSelector((state) => state.getIn(['relationships', chat?.account?.id, 'blocking']));
|
||||
const maxCharacterCount = useAppSelector((state) => state.instance.getIn(['configuration', 'chats', 'max_characters']) as number);
|
||||
const attachmentLimit = useAppSelector(state => state.instance.configuration.getIn(['chats', 'max_media_attachments']) as number);
|
||||
|
||||
const [suggestions, setSuggestions] = useState<Suggestion>(initialSuggestionState);
|
||||
const isSuggestionsAvailable = suggestions.list.length > 0;
|
||||
|
||||
const hasAttachment = attachments.length > 0;
|
||||
const isOverCharacterLimit = maxCharacterCount && value?.length > maxCharacterCount;
|
||||
const isSubmitDisabled = disabled || isOverCharacterLimit || (value.length === 0 && !hasAttachment);
|
||||
const isSubmitDisabled = disabled || isUploading || isOverCharacterLimit || (value.length === 0 && !hasAttachment);
|
||||
|
||||
const overLimitText = maxCharacterCount ? maxCharacterCount - value?.length : '';
|
||||
|
||||
|
@ -172,6 +173,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
|
|||
resetFileKey={resetFileKey}
|
||||
iconClassName='w-5 h-5'
|
||||
className='text-primary-500'
|
||||
disabled={isUploading || (attachments.length >= attachmentLimit)}
|
||||
/>
|
||||
</Stack>
|
||||
)}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
|
||||
import { Textarea } from 'soapbox/components/ui';
|
||||
import { HStack, Textarea } from 'soapbox/components/ui';
|
||||
import { Attachment } from 'soapbox/types/entities';
|
||||
|
||||
import ChatPendingUpload from './chat-pending-upload';
|
||||
|
@ -8,7 +8,7 @@ import ChatUpload from './chat-upload';
|
|||
|
||||
interface IChatTextarea extends React.ComponentProps<typeof Textarea> {
|
||||
attachments?: Attachment[]
|
||||
onDeleteAttachment?: () => void
|
||||
onDeleteAttachment?: (i: number) => void
|
||||
isUploading?: boolean
|
||||
uploadProgress?: number
|
||||
}
|
||||
|
@ -21,6 +21,14 @@ const ChatTextarea: React.FC<IChatTextarea> = ({
|
|||
uploadProgress = 0,
|
||||
...rest
|
||||
}) => {
|
||||
const handleDeleteAttachment = (i: number) => {
|
||||
return () => {
|
||||
if (onDeleteAttachment) {
|
||||
onDeleteAttachment(i);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`
|
||||
block
|
||||
|
@ -35,19 +43,23 @@ const ChatTextarea: React.FC<IChatTextarea> = ({
|
|||
`}
|
||||
>
|
||||
{(!!attachments?.length || isUploading) && (
|
||||
<div className='flex p-3 pb-0'>
|
||||
{isUploading && (
|
||||
<ChatPendingUpload progress={uploadProgress} />
|
||||
)}
|
||||
|
||||
{attachments?.map(attachment => (
|
||||
<HStack className='-ml-2 -mt-2 p-3 pb-0' wrap>
|
||||
{attachments?.map((attachment, i) => (
|
||||
<div className='ml-2 mt-2 flex'>
|
||||
<ChatUpload
|
||||
key={attachment.id}
|
||||
attachment={attachment}
|
||||
onDelete={onDeleteAttachment}
|
||||
onDelete={handleDeleteAttachment(i)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{isUploading && (
|
||||
<div className='ml-2 mt-2 flex'>
|
||||
<ChatPendingUpload progress={uploadProgress} />
|
||||
</div>
|
||||
)}
|
||||
</HStack>
|
||||
)}
|
||||
|
||||
<Textarea theme='transparent' {...rest} />
|
||||
|
|
|
@ -21,6 +21,7 @@ const ChatUploadPreview: React.FC<IChatUploadPreview> = ({ className, attachment
|
|||
|
||||
switch (attachment.type) {
|
||||
case 'image':
|
||||
case 'gifv':
|
||||
return (
|
||||
<img
|
||||
className='pointer-events-none h-full w-full object-cover'
|
||||
|
|
|
@ -5,17 +5,21 @@ import { defineMessages, useIntl } from 'react-intl';
|
|||
|
||||
import { uploadMedia } from 'soapbox/actions/media';
|
||||
import { Stack } from 'soapbox/components/ui';
|
||||
import { useAppDispatch } from 'soapbox/hooks';
|
||||
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
|
||||
import { normalizeAttachment } from 'soapbox/normalizers';
|
||||
import { IChat, useChatActions } from 'soapbox/queries/chats';
|
||||
import toast from 'soapbox/toast';
|
||||
|
||||
import ChatComposer from './chat-composer';
|
||||
import ChatMessageList from './chat-message-list';
|
||||
|
||||
import type { Attachment } from 'soapbox/types/entities';
|
||||
|
||||
const fileKeyGen = (): number => Math.floor((Math.random() * 0x10000));
|
||||
|
||||
const messages = defineMessages({
|
||||
failedToSend: { id: 'chat.failed_to_send', defaultMessage: 'Message failed to send.' },
|
||||
uploadErrorLimit: { id: 'upload_error.limit', defaultMessage: 'File upload limit exceeded.' },
|
||||
});
|
||||
|
||||
interface ChatInterface {
|
||||
|
@ -49,18 +53,19 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
|
|||
const dispatch = useAppDispatch();
|
||||
|
||||
const { createChatMessage, acceptChat } = useChatActions(chat.id);
|
||||
const attachmentLimit = useAppSelector(state => state.instance.configuration.getIn(['chats', 'max_media_attachments']) as number);
|
||||
|
||||
const [content, setContent] = useState<string>('');
|
||||
const [attachment, setAttachment] = useState<any>(undefined);
|
||||
const [attachments, setAttachments] = useState<Attachment[]>([]);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [uploadProgress, setUploadProgress] = useState(0);
|
||||
const [resetFileKey, setResetFileKey] = useState<number>(fileKeyGen());
|
||||
const [errorMessage, setErrorMessage] = useState<string>();
|
||||
|
||||
const isSubmitDisabled = content.length === 0 && !attachment;
|
||||
const isSubmitDisabled = content.length === 0 && attachments.length === 0;
|
||||
|
||||
const submitMessage = () => {
|
||||
createChatMessage.mutate({ chatId: chat.id, content, mediaId: attachment?.id }, {
|
||||
createChatMessage.mutate({ chatId: chat.id, content, mediaIds: attachments.map(a => a.id) }, {
|
||||
onSuccess: () => {
|
||||
setErrorMessage(undefined);
|
||||
},
|
||||
|
@ -79,7 +84,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
|
|||
clearNativeInputValue(inputRef.current);
|
||||
}
|
||||
setContent('');
|
||||
setAttachment(undefined);
|
||||
setAttachments([]);
|
||||
setIsUploading(false);
|
||||
setUploadProgress(0);
|
||||
setResetFileKey(fileKeyGen());
|
||||
|
@ -126,8 +131,10 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
|
|||
|
||||
const handleMouseOver = () => markRead();
|
||||
|
||||
const handleRemoveFile = () => {
|
||||
setAttachment(undefined);
|
||||
const handleRemoveFile = (i: number) => {
|
||||
const newAttachments = [...attachments];
|
||||
newAttachments.splice(i, 1);
|
||||
setAttachments(newAttachments);
|
||||
setResetFileKey(fileKeyGen());
|
||||
};
|
||||
|
||||
|
@ -137,13 +144,18 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
|
|||
};
|
||||
|
||||
const handleFiles = (files: FileList) => {
|
||||
if (files.length + attachments.length > attachmentLimit) {
|
||||
toast.error(messages.uploadErrorLimit);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsUploading(true);
|
||||
|
||||
const data = new FormData();
|
||||
data.append('file', files[0]);
|
||||
|
||||
dispatch(uploadMedia(data, onUploadProgress)).then((response: any) => {
|
||||
setAttachment(normalizeAttachment(response.data));
|
||||
setAttachments([...attachments, normalizeAttachment(response.data)]);
|
||||
setIsUploading(false);
|
||||
}).catch(() => {
|
||||
setIsUploading(false);
|
||||
|
@ -172,7 +184,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
|
|||
onSelectFile={handleFiles}
|
||||
resetFileKey={resetFileKey}
|
||||
onPaste={handlePaste}
|
||||
attachments={attachment ? [attachment] : []}
|
||||
attachments={attachments}
|
||||
onDeleteAttachment={handleRemoveFile}
|
||||
isUploading={isUploading}
|
||||
uploadProgress={uploadProgress}
|
||||
|
|
|
@ -1,12 +1,14 @@
|
|||
import { useFloating } from '@floating-ui/react';
|
||||
import clsx from 'clsx';
|
||||
import throttle from 'lodash/throttle';
|
||||
import React from 'react';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { fetchOwnAccounts, logOut, switchAccount } from 'soapbox/actions/auth';
|
||||
import Account from 'soapbox/components/account';
|
||||
import { Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList } from 'soapbox/components/ui';
|
||||
import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
|
||||
import { MenuDivider } from 'soapbox/components/ui';
|
||||
import { useAppDispatch, useAppSelector, useClickOutside, useFeatures } from 'soapbox/hooks';
|
||||
import { makeGetAccount } from 'soapbox/selectors';
|
||||
|
||||
import ThemeToggle from './theme-toggle';
|
||||
|
@ -39,6 +41,8 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
|
|||
const features = useFeatures();
|
||||
const intl = useIntl();
|
||||
|
||||
const [visible, setVisible] = useState(false);
|
||||
const { x, y, strategy, refs } = useFloating<HTMLButtonElement>({ placement: 'bottom-end' });
|
||||
const authUsers = useAppSelector((state) => state.auth.users);
|
||||
const otherAccounts = useAppSelector((state) => authUsers.map((authUser: any) => getAccount(state, authUser.id)!));
|
||||
|
||||
|
@ -62,7 +66,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
|
|||
);
|
||||
};
|
||||
|
||||
const menu: IMenuItem[] = React.useMemo(() => {
|
||||
const menu: IMenuItem[] = useMemo(() => {
|
||||
const menu: IMenuItem[] = [];
|
||||
|
||||
menu.push({ text: renderAccount(account), to: `/@${account.acct}` });
|
||||
|
@ -96,42 +100,82 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
|
|||
return menu;
|
||||
}, [account, authUsers, features]);
|
||||
|
||||
React.useEffect(() => {
|
||||
const toggleVisible = () => setVisible(!visible);
|
||||
|
||||
useEffect(() => {
|
||||
fetchOwnAccountThrottled();
|
||||
}, [account, authUsers]);
|
||||
|
||||
return (
|
||||
<Menu>
|
||||
<MenuButton>
|
||||
{children}
|
||||
</MenuButton>
|
||||
useClickOutside(refs, () => {
|
||||
setVisible(false);
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<button type='button' ref={refs.setReference} onClick={toggleVisible}>
|
||||
{children}
|
||||
</button>
|
||||
|
||||
{visible && (
|
||||
<div
|
||||
ref={refs.setFloating}
|
||||
className='z-[1003] mt-2 max-w-xs rounded-md bg-white shadow-lg focus:outline-none dark:bg-gray-900 dark:ring-2 dark:ring-primary-700'
|
||||
style={{
|
||||
position: strategy,
|
||||
top: y ?? 0,
|
||||
left: x ?? 0,
|
||||
width: 'max-content',
|
||||
}}
|
||||
>
|
||||
{menu.map((menuItem, i) => (
|
||||
<MenuItem key={i} menuItem={menuItem} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
interface MenuItemProps {
|
||||
className?: string
|
||||
menuItem: IMenuItem
|
||||
}
|
||||
|
||||
const MenuItem: React.FC<MenuItemProps> = ({ className, menuItem }) => {
|
||||
const baseClassName = clsx(className, 'block w-full cursor-pointer truncate px-4 py-2.5 text-left text-sm text-gray-700 hover:bg-gray-100 rtl:text-right dark:text-gray-500 dark:hover:bg-gray-800');
|
||||
|
||||
<MenuList>
|
||||
{menu.map((menuItem, idx) => {
|
||||
if (menuItem.toggle) {
|
||||
return (
|
||||
<div key={idx} className='flex flex-row items-center justify-between space-x-4 px-4 py-1 text-sm text-gray-700 dark:text-gray-400'>
|
||||
<div className='flex flex-row items-center justify-between space-x-4 px-4 py-1 text-sm text-gray-700 dark:text-gray-400'>
|
||||
<span>{menuItem.text}</span>
|
||||
|
||||
{menuItem.toggle}
|
||||
</div>
|
||||
);
|
||||
} else if (!menuItem.text) {
|
||||
return <MenuDivider key={idx} />;
|
||||
} else {
|
||||
const Comp: any = menuItem.action ? MenuItem : MenuLink;
|
||||
const itemProps = menuItem.action ? { onSelect: menuItem.action } : { to: menuItem.to, as: Link };
|
||||
|
||||
return <MenuDivider />;
|
||||
} else if (menuItem.action) {
|
||||
return (
|
||||
<Comp key={idx} {...itemProps} className='truncate'>
|
||||
<button
|
||||
type='button'
|
||||
onClick={menuItem.action}
|
||||
className={baseClassName}
|
||||
>
|
||||
{menuItem.text}
|
||||
</Comp>
|
||||
</button>
|
||||
);
|
||||
} else if (menuItem.to) {
|
||||
return (
|
||||
<Link
|
||||
to={menuItem.to}
|
||||
className={baseClassName}
|
||||
>
|
||||
{menuItem.text}
|
||||
</Link>
|
||||
);
|
||||
} else {
|
||||
throw menuItem;
|
||||
}
|
||||
})}
|
||||
</MenuList>
|
||||
</Menu>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfileDropdown;
|
||||
|
|
|
@ -2,6 +2,7 @@ export { useAccount } from './useAccount';
|
|||
export { useApi } from './useApi';
|
||||
export { useAppDispatch } from './useAppDispatch';
|
||||
export { useAppSelector } from './useAppSelector';
|
||||
export { useClickOutside } from './useClickOutside';
|
||||
export { useCompose } from './useCompose';
|
||||
export { useDebounce } from './useDebounce';
|
||||
export { useDimensions } from './useDimensions';
|
||||
|
|
|
@ -0,0 +1,29 @@
|
|||
import { ExtendedRefs } from '@floating-ui/react';
|
||||
import { useCallback, useEffect } from 'react';
|
||||
|
||||
/** Trigger `callback` when a Floating UI element is clicked outside from. */
|
||||
export const useClickOutside = <T extends HTMLElement>(
|
||||
refs: ExtendedRefs<T>,
|
||||
callback: (e: MouseEvent) => void,
|
||||
) => {
|
||||
const handleWindowClick = useCallback((e: MouseEvent) => {
|
||||
if (e.target) {
|
||||
const target = e.target as Node;
|
||||
|
||||
const floating = refs.floating.current;
|
||||
const reference = refs.reference.current as T | undefined;
|
||||
|
||||
if (!(floating?.contains(target) || reference?.contains(target))) {
|
||||
callback(e);
|
||||
}
|
||||
}
|
||||
}, [refs.floating.current, refs.reference.current]);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('click', handleWindowClick);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('click', handleWindowClick);
|
||||
};
|
||||
}, []);
|
||||
};
|
|
@ -1,13 +1,17 @@
|
|||
import React from 'react';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
|
||||
export const useOnScreen = (ref: React.MutableRefObject<HTMLElement>) => {
|
||||
const [isIntersecting, setIntersecting] = React.useState(false);
|
||||
/** Detect whether a given element is on the screen. */
|
||||
// https://stackoverflow.com/a/64892655
|
||||
export const useOnScreen = <T>(ref: React.RefObject<T & Element>) => {
|
||||
const [isIntersecting, setIntersecting] = useState(false);
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
const observer = useMemo(() => {
|
||||
return new IntersectionObserver(
|
||||
([entry]) => setIntersecting(entry.isIntersecting),
|
||||
);
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
useEffect(() => {
|
||||
if (ref.current) {
|
||||
observer.observe(ref.current);
|
||||
}
|
||||
|
|
|
@ -10,7 +10,8 @@ describe('normalizeInstance()', () => {
|
|||
configuration: {
|
||||
media_attachments: {},
|
||||
chats: {
|
||||
max_characters: 500,
|
||||
max_characters: 5000,
|
||||
max_media_attachments: 1,
|
||||
},
|
||||
polls: {
|
||||
max_options: 4,
|
||||
|
|
|
@ -22,7 +22,8 @@ export const InstanceRecord = ImmutableRecord({
|
|||
configuration: ImmutableMap<string, any>({
|
||||
media_attachments: ImmutableMap<string, any>(),
|
||||
chats: ImmutableMap<string, number>({
|
||||
max_characters: 500,
|
||||
max_characters: 5000,
|
||||
max_media_attachments: 1,
|
||||
}),
|
||||
polls: ImmutableMap<string, number>({
|
||||
max_options: 4,
|
||||
|
|
|
@ -231,9 +231,13 @@ const useChatActions = (chatId: string) => {
|
|||
};
|
||||
|
||||
const createChatMessage = useMutation(
|
||||
(
|
||||
{ chatId, content, mediaId }: { chatId: string, content: string, mediaId?: string },
|
||||
) => api.post<ChatMessage>(`/api/v1/pleroma/chats/${chatId}/messages`, { content, media_id: mediaId, media_ids: [mediaId] }),
|
||||
({ chatId, content, mediaIds }: { chatId: string, content: string, mediaIds?: string[] }) => {
|
||||
return api.post<ChatMessage>(`/api/v1/pleroma/chats/${chatId}/messages`, {
|
||||
content,
|
||||
media_id: (mediaIds && mediaIds.length === 1) ? mediaIds[0] : undefined, // Pleroma backwards-compat
|
||||
media_ids: mediaIds,
|
||||
});
|
||||
},
|
||||
{
|
||||
retry: false,
|
||||
onMutate: async (variables) => {
|
||||
|
|
|
@ -13,7 +13,8 @@ describe('instance reducer', () => {
|
|||
description_limit: 1500,
|
||||
configuration: {
|
||||
chats: {
|
||||
max_characters: 500,
|
||||
max_characters: 5000,
|
||||
max_media_attachments: 1,
|
||||
},
|
||||
statuses: {
|
||||
max_characters: 500,
|
||||
|
|
|
@ -380,10 +380,10 @@ const getInstanceFeatures = (instance: Instance) => {
|
|||
emojiReacts: v.software === PLEROMA && gte(v.version, '2.0.0'),
|
||||
|
||||
/**
|
||||
* The backend allows only RGI ("Recommended for General Interchange") emoji reactions.
|
||||
* The backend allows only non-RGI ("Recommended for General Interchange") emoji reactions.
|
||||
* @see PUT /api/v1/pleroma/statuses/:id/reactions/:emoji
|
||||
*/
|
||||
emojiReactsRGI: (v.software === PLEROMA && gte(v.version, '2.2.49')) || v.software === TRUTHSOCIAL,
|
||||
emojiReactsNonRGI: v.software === PLEROMA && lt(v.version, '2.2.49'),
|
||||
|
||||
/**
|
||||
* Sign in with an Ethereum wallet.
|
||||
|
|
|
@ -46,6 +46,7 @@
|
|||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@babel/runtime": "^7.20.13",
|
||||
"@floating-ui/react": "^0.19.1",
|
||||
"@fontsource/inter": "^4.5.1",
|
||||
"@fontsource/roboto-mono": "^4.5.8",
|
||||
"@gamestdio/websocket": "^0.3.2",
|
||||
|
|
40
yarn.lock
40
yarn.lock
|
@ -1722,6 +1722,34 @@
|
|||
minimatch "^3.1.2"
|
||||
strip-json-comments "^3.1.1"
|
||||
|
||||
"@floating-ui/core@^1.2.0":
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.0.tgz#ae7ae7923d41f3d84cb2fd88740a89436610bbec"
|
||||
integrity sha512-GHUXPEhMEmTpnpIfesFA2KAoMJPb1SPQw964tToQwt+BbGXdhqTCWT1rOb0VURGylsxsYxiGMnseJ3IlclVpVA==
|
||||
|
||||
"@floating-ui/dom@^1.1.1":
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.0.tgz#a60212069cc58961c478037c30eba4b191c75316"
|
||||
integrity sha512-QXzg57o1cjLz3cGETzKXjI3kx1xyS49DW9l7kV2jw2c8Yftd434t2hllX0sVGn2Q8MtcW/4pNm8bfE1/4n6mng==
|
||||
dependencies:
|
||||
"@floating-ui/core" "^1.2.0"
|
||||
|
||||
"@floating-ui/react-dom@^1.2.2":
|
||||
version "1.2.2"
|
||||
resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-1.2.2.tgz#ed256992fd44fcfcddc96da68b4b92f123d61871"
|
||||
integrity sha512-DbmFBLwFrZhtXgCI2ra7wXYT8L2BN4/4AMQKyu05qzsVji51tXOfF36VE2gpMB6nhJGHa85PdEg75FB4+vnLFQ==
|
||||
dependencies:
|
||||
"@floating-ui/dom" "^1.1.1"
|
||||
|
||||
"@floating-ui/react@^0.19.1":
|
||||
version "0.19.1"
|
||||
resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.19.1.tgz#bcaeaf3856dfeea388816f7e66750cab26208376"
|
||||
integrity sha512-h7hr53rLp+VVvWvbu0dOBvGsLeeZwn1DTLIllIaLYjGWw20YhAgEqegHU+nc7BJ30ttxq4Sq6hqARm0ne6chXQ==
|
||||
dependencies:
|
||||
"@floating-ui/react-dom" "^1.2.2"
|
||||
aria-hidden "^1.1.3"
|
||||
tabbable "^6.0.1"
|
||||
|
||||
"@fontsource/inter@^4.5.1":
|
||||
version "4.5.1"
|
||||
resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-4.5.1.tgz#058d8a02354f3c78e369d452c15d33557ec1b705"
|
||||
|
@ -5381,6 +5409,13 @@ argparse@^2.0.1:
|
|||
resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
|
||||
integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
|
||||
|
||||
aria-hidden@^1.1.3:
|
||||
version "1.2.2"
|
||||
resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.2.tgz#8c4f7cc88d73ca42114106fdf6f47e68d31475b8"
|
||||
integrity sha512-6y/ogyDTk/7YAe91T3E2PR1ALVKyM2QbTio5HwM+N1Q6CMlCKhvClyIjkckBswa0f2xJhjsfzIGa1yVSe1UMVA==
|
||||
dependencies:
|
||||
tslib "^2.0.0"
|
||||
|
||||
aria-query@^4.2.2:
|
||||
version "4.2.2"
|
||||
resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
|
||||
|
@ -16517,6 +16552,11 @@ tabbable@^5.3.3:
|
|||
resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.3.3.tgz#aac0ff88c73b22d6c3c5a50b1586310006b47fbf"
|
||||
integrity sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==
|
||||
|
||||
tabbable@^6.0.1:
|
||||
version "6.0.1"
|
||||
resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.0.1.tgz#427a09b13c83ae41eed3e88abb76a4af28bde1a6"
|
||||
integrity sha512-SYJSIgeyXW7EuX1ytdneO5e8jip42oHWg9xl/o3oTYhmXusZVgiA+VlPvjIN+kHii9v90AmzTZEBcsEvuAY+TA==
|
||||
|
||||
table@^6.8.1:
|
||||
version "6.8.1"
|
||||
resolved "https://registry.yarnpkg.com/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf"
|
||||
|
|
Ładowanie…
Reference in New Issue