= ({ account, size, className }) => {
- if (!account) return null;
-
- // : TODO : remove inline and change all avatars to be sized using css
- const style: React.CSSProperties = !size ? {} : {
- width: `${size}px`,
- height: `${size}px`,
- };
-
- return (
-
- );
-};
-
-export default Avatar;
diff --git a/app/soapbox/components/avatar_composite.js b/app/soapbox/components/avatar_composite.js
deleted file mode 100644
index 59e4bab96..000000000
--- a/app/soapbox/components/avatar_composite.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-
-import StillImage from 'soapbox/components/still_image';
-
-export default class AvatarComposite extends React.PureComponent {
-
- static propTypes = {
- accounts: ImmutablePropTypes.list.isRequired,
- size: PropTypes.number.isRequired,
- };
-
- renderItem(account, size, index) {
-
- let width = 50;
- let height = 100;
- let top = 'auto';
- let left = 'auto';
- let bottom = 'auto';
- let right = 'auto';
-
- if (size === 1) {
- width = 100;
- }
-
- if (size === 4 || (size === 3 && index > 0)) {
- height = 50;
- }
-
- if (size === 2) {
- if (index === 0) {
- right = '2px';
- } else {
- left = '2px';
- }
- } else if (size === 3) {
- if (index === 0) {
- right = '2px';
- } else if (index > 0) {
- left = '2px';
- }
-
- if (index === 1) {
- bottom = '2px';
- } else if (index > 1) {
- top = '2px';
- }
- } else if (size === 4) {
- if (index === 0 || index === 2) {
- right = '2px';
- }
-
- if (index === 1 || index === 3) {
- left = '2px';
- }
-
- if (index < 2) {
- bottom = '2px';
- } else {
- top = '2px';
- }
- }
-
- const style = {
- left: left,
- top: top,
- right: right,
- bottom: bottom,
- width: `${width}%`,
- height: `${height}%`,
- };
-
- return (
-
- );
- }
-
- render() {
- const { accounts, size } = this.props;
-
- return (
-
- {accounts.take(4).map((account, i) => this.renderItem(account, accounts.size, i))}
-
- );
- }
-
-}
diff --git a/app/soapbox/components/avatar_overlay.tsx b/app/soapbox/components/avatar_overlay.tsx
deleted file mode 100644
index ae38b5e4c..000000000
--- a/app/soapbox/components/avatar_overlay.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-import StillImage from 'soapbox/components/still_image';
-
-import type { Account as AccountEntity } from 'soapbox/types/entities';
-
-interface IAvatarOverlay {
- account: AccountEntity,
- friend: AccountEntity,
-}
-
-const AvatarOverlay: React.FC
= ({ account, friend }) => (
-
-
-
-
-);
-
-export default AvatarOverlay;
diff --git a/app/soapbox/components/badge.tsx b/app/soapbox/components/badge.tsx
index 7686b1e47..fac7487e0 100644
--- a/app/soapbox/components/badge.tsx
+++ b/app/soapbox/components/badge.tsx
@@ -1,26 +1,29 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
import React from 'react';
interface IBadge {
- title: React.ReactNode,
- slug: 'patron' | 'donor' | 'admin' | 'moderator' | 'bot' | 'opaque',
+ title: React.ReactNode
+ slug: string
}
-
/** Badge to display on a user's profile. */
-const Badge: React.FC = ({ title, slug }) => (
-
- {title}
-
-);
+const Badge: React.FC = ({ title, slug }) => {
+ const fallback = !['patron', 'admin', 'moderator', 'opaque', 'badge:donor'].includes(slug);
+
+ return (
+
+ {title}
+
+ );
+};
export default Badge;
diff --git a/app/soapbox/components/birthday_input.tsx b/app/soapbox/components/birthday-input.tsx
similarity index 78%
rename from app/soapbox/components/birthday_input.tsx
rename to app/soapbox/components/birthday-input.tsx
index e263fb02e..0d21ed287 100644
--- a/app/soapbox/components/birthday_input.tsx
+++ b/app/soapbox/components/birthday-input.tsx
@@ -1,10 +1,10 @@
import React, { useMemo } from 'react';
import { defineMessages, useIntl } from 'react-intl';
-import IconButton from 'soapbox/components/icon_button';
-import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
+import IconButton from 'soapbox/components/icon-button';
+import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
import { DatePicker } from 'soapbox/features/ui/util/async-components';
-import { useAppSelector, useFeatures } from 'soapbox/hooks';
+import { useInstance, useFeatures } from 'soapbox/hooks';
const messages = defineMessages({
birthdayPlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birthday' },
@@ -15,17 +15,18 @@ const messages = defineMessages({
});
interface IBirthdayInput {
- value?: string,
- onChange: (value: string) => void,
- required?: boolean,
+ value?: string
+ onChange: (value: string) => void
+ required?: boolean
}
const BirthdayInput: React.FC = ({ value, onChange, required }) => {
const intl = useIntl();
const features = useFeatures();
+ const instance = useInstance();
const supportsBirthdays = features.birthdays;
- const minAge = useAppSelector((state) => state.instance.pleroma.getIn(['metadata', 'birthday_min_age'])) as number;
+ const minAge = instance.pleroma.getIn(['metadata', 'birthday_min_age']) as number;
const maxDate = useMemo(() => {
if (!supportsBirthdays) return null;
@@ -55,21 +56,21 @@ const BirthdayInput: React.FC = ({ value, onChange, required })
nextYearButtonDisabled,
date,
}: {
- decreaseMonth(): void,
- increaseMonth(): void,
- prevMonthButtonDisabled: boolean,
- nextMonthButtonDisabled: boolean,
- decreaseYear(): void,
- increaseYear(): void,
- prevYearButtonDisabled: boolean,
- nextYearButtonDisabled: boolean,
- date: Date,
+ decreaseMonth(): void
+ increaseMonth(): void
+ prevMonthButtonDisabled: boolean
+ nextMonthButtonDisabled: boolean
+ decreaseYear(): void
+ increaseYear(): void
+ prevYearButtonDisabled: boolean
+ nextYearButtonDisabled: boolean
+ date: Date
}) => {
return (
= ({ value, onChange, required })
/>
{intl.formatDate(date, { month: 'long' })}
= ({ value, onChange, required })
= ({ value, onChange, required })
/>
{intl.formatDate(date, { year: 'numeric' })}
= ({ value, onChange, required })
);
};
- const handleChange = (date: Date) => onChange(new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).toISOString().slice(0, 10));
+ const handleChange = (date: Date) => onChange(date ? new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).toISOString().slice(0, 10) : '');
return (
-
+
{Component => ( = ({ value, onChange, required })
maxDate={maxDate}
required={required}
renderCustomHeader={renderCustomHeader}
+ isClearable={!required}
/>)}
diff --git a/app/soapbox/components/birthday-panel.tsx b/app/soapbox/components/birthday-panel.tsx
index 2cc139357..059b8678b 100644
--- a/app/soapbox/components/birthday-panel.tsx
+++ b/app/soapbox/components/birthday-panel.tsx
@@ -1,30 +1,50 @@
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import * as React from 'react';
+import React, { useRef } from 'react';
import { FormattedMessage } from 'react-intl';
-import { useDispatch } from 'react-redux';
import { fetchBirthdayReminders } from 'soapbox/actions/accounts';
import { Widget } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account_container';
-import { useAppSelector } from 'soapbox/hooks';
+import AccountContainer from 'soapbox/containers/account-container';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+
+const timeToMidnight = () => {
+ const now = new Date();
+ const midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 0);
+
+ return midnight.getTime() - now.getTime();
+};
interface IBirthdayPanel {
limit: number
}
const BirthdayPanel = ({ limit }: IBirthdayPanel) => {
- const dispatch = useDispatch();
+ const dispatch = useAppDispatch();
const birthdays: ImmutableOrderedSet
= useAppSelector(state => state.user_lists.birthday_reminders.get(state.me as string)?.items || ImmutableOrderedSet());
const birthdaysToRender = birthdays.slice(0, limit);
- React.useEffect(() => {
+ const timeout = useRef();
+
+ const handleFetchBirthdayReminders = () => {
const date = new Date();
const day = date.getDate();
const month = date.getMonth() + 1;
- dispatch(fetchBirthdayReminders(month, day));
+ dispatch(fetchBirthdayReminders(month, day))?.then(() => {
+ timeout.current = setTimeout(() => handleFetchBirthdayReminders(), timeToMidnight());
+ });
+ };
+
+ React.useEffect(() => {
+ handleFetchBirthdayReminders();
+
+ return () => {
+ if (timeout.current) {
+ clearTimeout(timeout.current);
+ }
+ };
}, []);
if (birthdaysToRender.isEmpty()) {
diff --git a/app/soapbox/components/blurhash.tsx b/app/soapbox/components/blurhash.tsx
index cdf5cbf9e..d0e0f43b9 100644
--- a/app/soapbox/components/blurhash.tsx
+++ b/app/soapbox/components/blurhash.tsx
@@ -3,18 +3,18 @@ import React, { useRef, useEffect } from 'react';
interface IBlurhash {
/** Hash to render */
- hash: string | null | undefined,
+ hash: string | null | undefined
/** Width of the blurred region in pixels. Defaults to 32. */
- width?: number,
+ width?: number
/** Height of the blurred region in pixels. Defaults to width. */
- height?: number,
+ height?: number
/**
* Whether dummy mode is enabled. If enabled, nothing is rendered
* and canvas left untouched.
*/
- dummy?: boolean,
+ dummy?: boolean
/** className of the canvas element. */
- className?: string,
+ className?: string
}
/**
diff --git a/app/soapbox/components/column_header.js b/app/soapbox/components/column_header.js
deleted file mode 100644
index c5fa73e5d..000000000
--- a/app/soapbox/components/column_header.js
+++ /dev/null
@@ -1,128 +0,0 @@
-'use strict';
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withRouter } from 'react-router-dom';
-
-// import classNames from 'classnames';
-// import { injectIntl, defineMessages } from 'react-intl';
-// import Icon from 'soapbox/components/icon';
-import SubNavigation from 'soapbox/components/sub_navigation';
-
-// const messages = defineMessages({
-// show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
-// hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' },
-// });
-
-export default @withRouter
-class ColumnHeader extends React.PureComponent {
-
- static propTypes = {
- // intl: PropTypes.object.isRequired,
- title: PropTypes.node,
- icon: PropTypes.string,
- active: PropTypes.bool,
- extraButton: PropTypes.node,
- children: PropTypes.node,
- history: PropTypes.object,
- };
-
- state = {
- collapsed: true,
- animating: false,
- };
-
- historyBack = () => {
- if (window.history?.length === 1) {
- this.props.history.push('/');
- } else {
- this.props.history.goBack();
- }
- }
-
- handleToggleClick = (e) => {
- e.stopPropagation();
- this.setState({ collapsed: !this.state.collapsed, animating: true });
- }
-
- handleBackClick = () => {
- this.historyBack();
- }
-
- handleTransitionEnd = () => {
- this.setState({ animating: false });
- }
-
- render() {
- const { title } = this.props;
-
- return ;
- }
-
- // render() {
- // const { title, icon, active, children, extraButton, intl: { formatMessage } } = this.props;
- // const { collapsed, animating } = this.state;
- //
- // const wrapperClassName = classNames('column-header__wrapper', {
- // 'active': active,
- // });
- //
- // const buttonClassName = classNames('column-header', {
- // 'active': active,
- // });
- //
- // const collapsibleClassName = classNames('column-header__collapsible', {
- // 'collapsed': collapsed,
- // 'animating': animating,
- // });
- //
- // const collapsibleButtonClassName = classNames('column-header__button', {
- // 'active': !collapsed,
- // });
- //
- // let extraContent, collapseButton;
- //
- // if (children) {
- // extraContent = (
- //
- // {children}
- //
- // );
- // }
- //
- // const collapsedContent = [
- // extraContent,
- // ];
- //
- // if (children) {
- // collapseButton = ;
- // }
- //
- // const hasTitle = icon && title;
- //
- // return (
- //
- //
- // {hasTitle && (
- //
- // )}
- //
- //
- // {extraButton}
- // {collapseButton}
- //
- //
- //
- //
- //
- // {(!collapsed || animating) && collapsedContent}
- //
- //
- //
-
-
-
- ) : null;
+ const { verified } = account;
const displayName = (
-
-
+
+
+
{verified && }
- {withDate && joinedAt}
-
+
);
const suffix = (@{getAcct(account, displayFqn)});
@@ -42,7 +40,7 @@ const DisplayName: React.FC = ({ account, children, withDate = fal
{displayName}
- {suffix}
+ {withSuffix && suffix}
{children}
);
diff --git a/app/soapbox/components/domain.tsx b/app/soapbox/components/domain.tsx
index 22c8272de..61470ced5 100644
--- a/app/soapbox/components/domain.tsx
+++ b/app/soapbox/components/domain.tsx
@@ -1,10 +1,10 @@
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
-import { useDispatch } from 'react-redux';
-import { unblockDomain } from 'soapbox/actions/domain_blocks';
+import { unblockDomain } from 'soapbox/actions/domain-blocks';
+import { useAppDispatch } from 'soapbox/hooks';
-import IconButton from './icon_button';
+import { HStack, IconButton, Text } from './ui';
const messages = defineMessages({
blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' },
@@ -12,11 +12,11 @@ const messages = defineMessages({
});
interface IDomain {
- domain: string,
+ domain: string
}
const Domain: React.FC = ({ domain }) => {
- const dispatch = useDispatch();
+ const dispatch = useAppDispatch();
const intl = useIntl();
// const onBlockDomain = () => {
@@ -34,17 +34,12 @@ const Domain: React.FC = ({ domain }) => {
};
return (
-
+
+
+ {domain}
+
+
+
);
};
diff --git a/app/soapbox/components/dropdown-menu/dropdown-menu-item.tsx b/app/soapbox/components/dropdown-menu/dropdown-menu-item.tsx
new file mode 100644
index 000000000..3de906dc8
--- /dev/null
+++ b/app/soapbox/components/dropdown-menu/dropdown-menu-item.tsx
@@ -0,0 +1,109 @@
+import clsx from 'clsx';
+import React, { useEffect, useRef } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { Counter, Icon } from '../ui';
+
+export interface MenuItem {
+ action?: React.EventHandler
+ active?: boolean
+ count?: number
+ destructive?: boolean
+ href?: string
+ icon?: string
+ meta?: string
+ middleClick?(event: React.MouseEvent): void
+ target?: React.HTMLAttributeAnchorTarget
+ text: string
+ to?: string
+}
+
+interface IDropdownMenuItem {
+ index: number
+ item: MenuItem | null
+ onClick?(): void
+}
+
+const DropdownMenuItem = ({ index, item, onClick }: IDropdownMenuItem) => {
+ const history = useHistory();
+
+ const itemRef = useRef(null);
+
+ const handleClick: React.EventHandler = (event) => {
+ event.stopPropagation();
+
+ if (!item) return;
+ if (onClick) onClick();
+
+
+ if (item.to) {
+ event.preventDefault();
+ history.push(item.to);
+ } else if (typeof item.action === 'function') {
+ event.preventDefault();
+ item.action(event);
+ }
+ };
+
+ const handleAuxClick: React.EventHandler = (event) => {
+ if (!item) return;
+ if (onClick) onClick();
+
+ if (event.button === 1 && item.middleClick) {
+ item.middleClick(event);
+ }
+ };
+
+ const handleItemKeyPress: React.EventHandler = (event) => {
+ if (event.key === 'Enter' || event.key === ' ') {
+ handleClick(event);
+ }
+ };
+
+ useEffect(() => {
+ const firstItem = index === 0;
+
+ if (itemRef.current && firstItem) {
+ itemRef.current.focus({ preventScroll: true });
+ }
+ }, [itemRef.current, index]);
+
+ if (item === null) {
+ return ;
+ }
+
+ return (
+
+
+ {item.icon && }
+
+ {item.text}
+
+ {item.count ? (
+
+
+
+ ) : null}
+
+
+ );
+};
+
+export default DropdownMenuItem;
\ No newline at end of file
diff --git a/app/soapbox/components/dropdown-menu/dropdown-menu.tsx b/app/soapbox/components/dropdown-menu/dropdown-menu.tsx
new file mode 100644
index 000000000..f4d885b7f
--- /dev/null
+++ b/app/soapbox/components/dropdown-menu/dropdown-menu.tsx
@@ -0,0 +1,342 @@
+import { offset, Placement, useFloating, flip, arrow } from '@floating-ui/react';
+import clsx from 'clsx';
+import { supportsPassiveEvents } from 'detect-passive-events';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import {
+ closeDropdownMenu as closeDropdownMenuRedux,
+ openDropdownMenu,
+} from 'soapbox/actions/dropdown-menu';
+import { closeModal, openModal } from 'soapbox/actions/modals';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { isUserTouching } from 'soapbox/is-mobile';
+
+import { IconButton, Portal } from '../ui';
+
+import DropdownMenuItem, { MenuItem } from './dropdown-menu-item';
+
+import type { Status } from 'soapbox/types/entities';
+
+export type Menu = Array 
-