bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Simplify privacy dropdown code

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-08-31 00:03:06 +02:00
parent db19522a54
commit 064e051273
3 changed files with 43 additions and 157 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx
View file

@ -4,20 +4,23 @@ import { useHistory } from 'react-router-dom';
import { userTouching } from 'pl-fe/is-mobile';
import { Counter, Icon } from '../ui';
import { Counter, Icon, Toggle } from '../ui';
interface MenuItem {
action?: React.EventHandler<React.KeyboardEvent | React.MouseEvent>;
active?: boolean;
checked?: boolean;
count?: number;
destructive?: boolean;
href?: string;
icon?: string;
meta?: string;
middleClick?(event: React.MouseEvent): void;
onChange?: (value: boolean) => void;
target?: React.HTMLAttributeAnchorTarget;
text: string;
to?: string;
type?: 'toggle';
}
interface IDropdownMenuItem {
@ -67,6 +70,15 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus }: IDropdownMenuItem
}
};
const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
event.preventDefault();
event.stopPropagation();
if (!item) return;
if (item.onChange) item.onChange(event.target.checked);
};
useEffect(() => {
const firstItem = index === 0;
@ -93,21 +105,29 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus }: IDropdownMenuItem
target={item.target}
title={item.text}
className={
clsx({
'flex px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-gray-800 focus:outline-none cursor-pointer black:hover:bg-gray-900 black:focus:bg-gray-900': true,
clsx('flex cursor-pointer items-center px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-800 focus:bg-gray-100 focus:text-gray-800 focus:outline-none black:hover:bg-gray-900 black:focus:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus:bg-gray-800 dark:focus:text-gray-200', {
'text-danger-600 dark:text-danger-400': item.destructive,
})
}
>
{item.icon && <Icon src={item.icon} className='mr-3 h-5 w-5 flex-none rtl:ml-3 rtl:mr-0' />}
<span className={clsx('truncate font-medium', { 'ml-2': item.count })}>{item.text}</span>
<div className={clsx('text-xs', { 'mr-2': item.count || item.type === 'toggle' })}>
<div className='truncate text-base'>{item.text}</div>
<div className='mt-0.5'>{item.meta}</div>
</div>
{item.count ? (
<span className='ml-auto h-5 w-5 flex-none'>
<Counter count={item.count} />
</span>
) : null}
{item.type === 'toggle' && (
<div className='ml-auto'>
<Toggle checked={item.checked} onChange={handleChange} />
</div>
)}
</a>
</li>
);

1
packages/pl-fe/src/components/icon-button.tsx
View file

@ -33,7 +33,6 @@ const IconButton: React.FC<IIconButton> = ({
text,
title,
}) => {
const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
e.preventDefault();

171
packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx
View file

@ -1,10 +1,9 @@
import clsx from 'clsx';
import React, { useEffect, useMemo, useRef } from 'react';
import { useIntl, defineMessages, FormattedMessage, IntlShape } from 'react-intl';
import React from 'react';
import { useIntl, defineMessages, IntlShape } from 'react-intl';
import { changeComposeFederated, changeComposeVisibility } from 'pl-fe/actions/compose';
import DropdownMenu from 'pl-fe/components/dropdown-menu';
import { Button, Icon, Toggle } from 'pl-fe/components/ui';
import DropdownMenu, { MenuItem } from 'pl-fe/components/dropdown-menu';
import { Button } from 'pl-fe/components/ui';
import { useAppDispatch, useCompose, useFeatures } from 'pl-fe/hooks';
import type { Features } from 'pl-api';
@ -34,10 +33,6 @@ interface Option {
meta: string;
}
interface IPrivacyDropdownMenu {
handleClose: () => any;
}
const getItems = (features: Features, intl: IntlShape) => [
{ icon: require('@tabler/icons/outline/world.svg'), value: 'public', text: intl.formatMessage(messages.public_short), meta: intl.formatMessage(messages.public_long) },
{ icon: require('@tabler/icons/outline/lock-open.svg'), value: 'unlisted', text: intl.formatMessage(messages.unlisted_short), meta: intl.formatMessage(messages.unlisted_long) },
@ -47,143 +42,6 @@ const getItems = (features: Features, intl: IntlShape) => [
features.visibilityLocalOnly ? { icon: require('@tabler/icons/outline/affiliate.svg'), value: 'local', text: intl.formatMessage(messages.local_short), meta: intl.formatMessage(messages.local_long) } : undefined,
].filter((option): option is Option => !!option);
const getPrivacyDropdown = (composeId: string): React.FC<IPrivacyDropdownMenu> => ({ handleClose: handleMenuClose }) => {
const dispatch = useAppDispatch();
const intl = useIntl();
const features = useFeatures();
const compose = useCompose(composeId);
const value = compose.privacy;
const items = getItems(features, intl);
const onChange = (value: string | null) => value && dispatch(changeComposeVisibility(composeId, value));
const onChangeFederated = () => dispatch(changeComposeFederated(composeId));
const node = useRef<HTMLUListElement>(null);
const focusedItem = useRef<HTMLLIElement>(null);
const handleKeyDown: React.KeyboardEventHandler = e => {
const index = [...e.currentTarget.parentElement!.children].indexOf(e.currentTarget);
let element: ChildNode | null | undefined = null;
switch (e.key) {
case 'Escape':
handleMenuClose();
break;
case 'Enter':
handleClick(e);
break;
case 'ArrowDown':
element = node.current?.childNodes[index + 1] || node.current?.firstChild;
break;
case 'ArrowUp':
element = node.current?.childNodes[index - 1] || node.current?.lastChild;
break;
case 'Tab':
if (e.shiftKey) {
element = node.current?.childNodes[index - 1] || node.current?.lastChild;
} else {
element = node.current?.childNodes[index + 1] || node.current?.firstChild;
}
break;
case 'Home':
element = node.current?.firstChild;
break;
case 'End':
element = node.current?.lastChild;
break;
}
if (element) {
(element as HTMLElement).focus();
const value = (element as HTMLElement).getAttribute('data-index');
if (value !== 'local_switch') onChange(value);
e.preventDefault();
e.stopPropagation();
}
};
const handleClick: React.EventHandler<any> = (e: MouseEvent | KeyboardEvent) => {
const value = (e.currentTarget as HTMLElement)?.getAttribute('data-index');
e.preventDefault();
if (value === 'local_switch') onChangeFederated();
else {
handleMenuClose();
onChange(value);
}
};
useEffect(() => {
if (node.current) {
(node.current?.querySelector('li[aria-selected=true]') as HTMLDivElement)?.focus();
}
}, [node.current]);
return (
<ul ref={node}>
{items.map(item => {
const active = item.value === value;
return (
<li
role='option'
tabIndex={0}
key={item.value}
data-index={item.value}
onKeyDown={handleKeyDown}
onClick={handleClick}
className={clsx(
'flex cursor-pointer items-center p-2.5 text-gray-700 hover:bg-gray-100 black:hover:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800',
{ 'bg-gray-100 dark:bg-gray-800 black:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700': active },
)}
aria-selected={active}
ref={active ? focusedItem : null}
>
<Icon src={item.icon} className='mr-2.5 h-5 w-5 flex-none rtl:ml-2.5 rtl:mr-0' />
<div
className={clsx('flex-auto text-xs text-primary-600 dark:text-primary-400', {
'text-black dark:text-white': active,
})}
>
<strong className='block text-sm font-medium text-black dark:text-white'>{item.text}</strong>
{item.meta}
</div>
</li>
);
})}
{features.localOnlyStatuses && (
<li
role='option'
tabIndex={0}
data-index='local_switch'
onKeyDown={handleKeyDown}
onClick={onChangeFederated}
className='flex cursor-pointer items-center p-2.5 text-xs text-gray-700 hover:bg-gray-100 focus:bg-gray-100 black:hover:bg-gray-900 black:focus:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:bg-gray-800'
>
<Icon src={require('@tabler/icons/outline/affiliate.svg')} className='mr-2.5 h-5 w-5 flex-none rtl:ml-2.5 rtl:mr-0' />
<div
className='flex-auto text-xs text-primary-600 dark:text-primary-400'
>
<strong className='block text-sm font-medium text-black focus:text-black dark:text-white dark:focus:text-primary-400'>
<FormattedMessage id='privacy.local.short' defaultMessage='Local-only' />
</strong>
<FormattedMessage id='privacy.local.long' defaultMessage='Only visible on your instance' />
</div>
<Toggle checked={!compose.federated} onChange={onChangeFederated} />
</li>
)}
</ul>
);
};
interface IPrivacyDropdown {
composeId: string;
}
@ -193,26 +51,35 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
}) => {
const intl = useIntl();
const features = useFeatures();
const dispatch = useAppDispatch();
const compose = useCompose(composeId);
const value = compose.privacy;
const unavailable = compose.id;
const items = getItems(features, intl);
const onChange = (value: string) => value && dispatch(changeComposeVisibility(composeId, value));
const PrivacyDropdownMenu = useMemo(() => getPrivacyDropdown(composeId), [composeId]);
const options = getItems(features, intl);
const items: Array<MenuItem> = options.map(item => ({ ...item, action: () => onChange(item.value), active: item.value === value }));
if (features.localOnlyStatuses) items.push({
icon: require('@tabler/icons/outline/affiliate.svg'),
text: intl.formatMessage(messages.local_short),
meta: intl.formatMessage(messages.local_long),
type: 'toggle',
checked: !compose.federated,
onChange: () => dispatch(changeComposeFederated(composeId)),
});
if (unavailable) {
return null;
}
const valueOption = items.find(item => item.value === value);
const valueOption = options.find(item => item.value === value);
return (
<DropdownMenu
component={PrivacyDropdownMenu}
>
<DropdownMenu items={items}>
<Button
theme='muted'
size='xs'