85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
import clsx from 'clsx';
|
|
import React from 'react';
|
|
import { defineMessages, useIntl } from 'react-intl';
|
|
import { useLocation, useRouteMatch } from 'react-router-dom';
|
|
|
|
import { groupComposeModal } from 'soapbox/actions/compose';
|
|
import { openModal } from 'soapbox/actions/modals';
|
|
import { useGroupLookup } from 'soapbox/api/hooks';
|
|
import { Avatar, HStack, Icon } from 'soapbox/components/ui';
|
|
import { useAppDispatch } from 'soapbox/hooks';
|
|
|
|
const messages = defineMessages({
|
|
publish: { id: 'compose_form.publish', defaultMessage: 'Publish' },
|
|
});
|
|
|
|
/** FloatingActionButton (aka FAB), a composer button that floats in the corner on mobile. */
|
|
const FloatingActionButton: React.FC = () => {
|
|
const location = useLocation();
|
|
|
|
if (location.pathname.startsWith('/group/')) {
|
|
return <GroupFAB />;
|
|
}
|
|
|
|
return <HomeFAB />;
|
|
};
|
|
|
|
const HomeFAB: React.FC = () => {
|
|
const intl = useIntl();
|
|
const dispatch = useAppDispatch();
|
|
|
|
const handleOpenComposeModal = () => {
|
|
dispatch(openModal('COMPOSE'));
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={handleOpenComposeModal}
|
|
className={clsx(
|
|
'inline-flex appearance-none items-center rounded-full border p-4 font-medium transition-all focus:outline-none focus:ring-2 focus:ring-offset-2',
|
|
'border-transparent bg-secondary-500 text-gray-100 hover:bg-secondary-400 focus:bg-secondary-500 focus:ring-secondary-300',
|
|
)}
|
|
aria-label={intl.formatMessage(messages.publish)}
|
|
>
|
|
<Icon
|
|
src={require('@tabler/icons/pencil-plus.svg')}
|
|
className='h-6 w-6'
|
|
/>
|
|
</button>
|
|
);
|
|
};
|
|
|
|
const GroupFAB: React.FC = () => {
|
|
const intl = useIntl();
|
|
const dispatch = useAppDispatch();
|
|
|
|
const match = useRouteMatch<{ groupSlug: string }>('/group/:groupSlug');
|
|
const { entity: group } = useGroupLookup(match?.params.groupSlug || '');
|
|
|
|
if (!group) return null;
|
|
|
|
const handleOpenComposeModal = () => {
|
|
dispatch(groupComposeModal(group));
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={handleOpenComposeModal}
|
|
className={clsx(
|
|
'inline-flex appearance-none items-center rounded-full border p-4 font-medium transition-all focus:outline-none focus:ring-2 focus:ring-offset-2',
|
|
'border-transparent bg-secondary-500 text-gray-100 hover:bg-secondary-400 focus:bg-secondary-500 focus:ring-secondary-300',
|
|
)}
|
|
aria-label={intl.formatMessage(messages.publish)}
|
|
>
|
|
<HStack space={3} alignItems='center'>
|
|
<Avatar className='-my-3 -ml-2 border-white' size={42} src={group.avatar} />
|
|
<Icon
|
|
src={require('@tabler/icons/pencil-plus.svg')}
|
|
className='h-6 w-6'
|
|
/>
|
|
</HStack>
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default FloatingActionButton;
|