Change ESLint rules, lint

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
docker-release-only
marcin mikołajczak 2023-02-15 22:26:27 +01:00
rodzic dec2cc69e8
commit 81de0014d3
337 zmienionych plików z 1301 dodań i 1284 usunięć

Wyświetl plik

@ -260,12 +260,29 @@ module.exports = {
},
],
'@typescript-eslint/no-duplicate-imports': 'error',
'@typescript-eslint/member-delimiter-style': [
'error',
{
multiline: {
delimiter: 'none',
},
singleline: {
delimiter: 'comma',
},
},
],
'promise/catch-or-return': 'error',
'react-hooks/rules-of-hooks': 'error',
'tailwindcss/classnames-order': 'error',
'tailwindcss/classnames-order': [
'error',
{
classRegex: '^(base|container|icon|item|list|outer|wrapper)?[c|C]lass(Name)?$',
config: 'tailwind.config.cjs',
},
],
'tailwindcss/migration-from-tailwind-2': 'error',
},
overrides: [

Wyświetl plik

@ -228,7 +228,7 @@ const fetchAccountFail = (id: string | null, error: AxiosError) => ({
});
type FollowAccountOpts = {
reblogs?: boolean,
reblogs?: boolean
notify?: boolean
};

Wyświetl plik

@ -34,8 +34,8 @@ type ExportDataActions = {
| typeof EXPORT_BLOCKS_FAIL
| typeof EXPORT_MUTES_REQUEST
| typeof EXPORT_MUTES_SUCCESS
| typeof EXPORT_MUTES_FAIL,
error?: any,
| typeof EXPORT_MUTES_FAIL
error?: any
}
function fileExport(content: string, fileName: string) {

Wyświetl plik

@ -11,25 +11,25 @@ export const FAMILIAR_FOLLOWERS_FETCH_SUCCESS = 'FAMILIAR_FOLLOWERS_FETCH_SUCCES
export const FAMILIAR_FOLLOWERS_FETCH_FAIL = 'FAMILIAR_FOLLOWERS_FETCH_FAIL';
type FamiliarFollowersFetchRequestAction = {
type: typeof FAMILIAR_FOLLOWERS_FETCH_REQUEST,
id: string,
type: typeof FAMILIAR_FOLLOWERS_FETCH_REQUEST
id: string
}
type FamiliarFollowersFetchRequestSuccessAction = {
type: typeof FAMILIAR_FOLLOWERS_FETCH_SUCCESS,
id: string,
accounts: Array<APIEntity>,
type: typeof FAMILIAR_FOLLOWERS_FETCH_SUCCESS
id: string
accounts: Array<APIEntity>
}
type FamiliarFollowersFetchRequestFailAction = {
type: typeof FAMILIAR_FOLLOWERS_FETCH_FAIL,
id: string,
error: any,
type: typeof FAMILIAR_FOLLOWERS_FETCH_FAIL
id: string
error: any
}
type AccountsImportAction = {
type: typeof ACCOUNTS_IMPORT,
accounts: Array<APIEntity>,
type: typeof ACCOUNTS_IMPORT
accounts: Array<APIEntity>
}
export type FamiliarFollowersActions = FamiliarFollowersFetchRequestAction | FamiliarFollowersFetchRequestSuccessAction | FamiliarFollowersFetchRequestFailAction | AccountsImportAction

Wyświetl plik

@ -27,8 +27,8 @@ type ImportDataActions = {
| typeof IMPORT_BLOCKS_FAIL
| typeof IMPORT_MUTES_REQUEST
| typeof IMPORT_MUTES_SUCCESS
| typeof IMPORT_MUTES_FAIL,
error?: any,
| typeof IMPORT_MUTES_FAIL
error?: any
config?: string
}

Wyświetl plik

@ -37,8 +37,8 @@ const subscribe = (registration: ServiceWorkerRegistration, getState: () => Root
});
const unsubscribe = ({ registration, subscription }: {
registration: ServiceWorkerRegistration,
subscription: PushSubscription | null,
registration: ServiceWorkerRegistration
subscription: PushSubscription | null
}) =>
subscription ? subscription.unsubscribe().then(() => registration) : new Promise<ServiceWorkerRegistration>(r => r(registration));
@ -82,8 +82,8 @@ const register = () =>
.then(getPushSubscription)
// @ts-ignore
.then(({ registration, subscription }: {
registration: ServiceWorkerRegistration,
subscription: PushSubscription | null,
registration: ServiceWorkerRegistration
subscription: PushSubscription | null
}) => {
if (subscription !== null) {
// We have a subscription, check if it is still valid

Wyświetl plik

@ -21,7 +21,7 @@ const REPORT_BLOCK_CHANGE = 'REPORT_BLOCK_CHANGE';
const REPORT_RULE_CHANGE = 'REPORT_RULE_CHANGE';
type ReportedEntity = {
status?: Status,
status?: Status
chatMessage?: ChatMessage
}

Wyświetl plik

@ -18,7 +18,7 @@ const FE_NAME = 'soapbox_fe';
/** Options when changing/saving settings. */
type SettingOpts = {
/** Whether to display an alert when settings are saved. */
showAlert?: boolean,
showAlert?: boolean
}
const messages = defineMessages({

Wyświetl plik

@ -81,7 +81,7 @@ const updateChatQuery = (chat: IChat) => {
};
interface StreamOpts {
statContext?: IStatContext,
statContext?: IStatContext
}
const connectTimelineStream = (

Wyświetl plik

@ -31,14 +31,14 @@ const AGE: Challenge = 'age';
export type Challenge = 'age' | 'sms' | 'email'
type Challenges = {
email?: 0 | 1,
sms?: 0 | 1,
age?: 0 | 1,
email?: 0 | 1
sms?: 0 | 1
age?: 0 | 1
}
type Verification = {
token?: string,
challenges?: Challenges,
token?: string
challenges?: Challenges
challengeTypes?: Array<'age' | 'sms' | 'email'>
};

Wyświetl plik

@ -1,7 +1,7 @@
import React from 'react';
interface IInlineSVG {
loader?: JSX.Element,
loader?: JSX.Element
}
const InlineSVG: React.FC<IInlineSVG> = ({ loader }): JSX.Element => {

Wyświetl plik

@ -12,9 +12,9 @@ const messages = defineMessages({
interface IAccountSearch {
/** Callback when a searched account is chosen. */
onSelected: (accountId: string) => void,
onSelected: (accountId: string) => void
/** Override the default placeholder of the input. */
placeholder?: string,
placeholder?: string
}
/** Input to search for accounts. */

Wyświetl plik

@ -17,8 +17,8 @@ import type { StatusApprovalStatus } from 'soapbox/normalizers/status';
import type { Account as AccountEntity } from 'soapbox/types/entities';
interface IInstanceFavicon {
account: AccountEntity,
disabled?: boolean,
account: AccountEntity
disabled?: boolean
}
const messages = defineMessages({
@ -53,7 +53,7 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account, disabled }) => {
};
interface IProfilePopper {
condition: boolean,
condition: boolean
wrapper: (children: React.ReactNode) => React.ReactNode
children: React.ReactNode
}
@ -67,30 +67,30 @@ const ProfilePopper: React.FC<IProfilePopper> = ({ condition, wrapper, children
};
export interface IAccount {
account: AccountEntity,
action?: React.ReactElement,
actionAlignment?: 'center' | 'top',
actionIcon?: string,
actionTitle?: string,
account: AccountEntity
action?: React.ReactElement
actionAlignment?: 'center' | 'top'
actionIcon?: string
actionTitle?: string
/** Override other actions for specificity like mute/unmute. */
actionType?: 'muting' | 'blocking' | 'follow_request',
avatarSize?: number,
hidden?: boolean,
hideActions?: boolean,
id?: string,
onActionClick?: (account: any) => void,
showProfileHoverCard?: boolean,
timestamp?: string,
timestampUrl?: string,
futureTimestamp?: boolean,
withAccountNote?: boolean,
withDate?: boolean,
withLinkToProfile?: boolean,
withRelationship?: boolean,
showEdit?: boolean,
approvalStatus?: StatusApprovalStatus,
emoji?: string,
note?: string,
actionType?: 'muting' | 'blocking' | 'follow_request'
avatarSize?: number
hidden?: boolean
hideActions?: boolean
id?: string
onActionClick?: (account: any) => void
showProfileHoverCard?: boolean
timestamp?: string
timestampUrl?: string
futureTimestamp?: boolean
withAccountNote?: boolean
withDate?: boolean
withLinkToProfile?: boolean
withRelationship?: boolean
showEdit?: boolean
approvalStatus?: StatusApprovalStatus
emoji?: string
note?: string
}
const Account = ({
@ -143,7 +143,7 @@ const Account = ({
title={actionTitle}
onClick={handleAction}
className='bg-transparent text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500'
iconClassName='w-4 h-4'
iconClassName='h-4 w-4'
/>
);
}

Wyświetl plik

@ -15,8 +15,8 @@ const obfuscatedCount = (count: number) => {
};
interface IAnimatedNumber {
value: number;
obfuscate?: boolean;
value: number
obfuscate?: boolean
}
const AnimatedNumber: React.FC<IAnimatedNumber> = ({ value, obfuscate }) => {

Wyświetl plik

@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom';
import type { Announcement as AnnouncementEntity, Mention as MentionEntity } from 'soapbox/types/entities';
interface IAnnouncementContent {
announcement: AnnouncementEntity;
announcement: AnnouncementEntity
}
const AnnouncementContent: React.FC<IAnnouncementContent> = ({ announcement }) => {

Wyświetl plik

@ -11,10 +11,10 @@ import type { Map as ImmutableMap } from 'immutable';
import type { Announcement as AnnouncementEntity } from 'soapbox/types/entities';
interface IAnnouncement {
announcement: AnnouncementEntity;
addReaction: (id: string, name: string) => void;
removeReaction: (id: string, name: string) => void;
emojiMap: ImmutableMap<string, ImmutableMap<string, string>>;
announcement: AnnouncementEntity
addReaction: (id: string, name: string) => void
removeReaction: (id: string, name: string) => void
emojiMap: ImmutableMap<string, ImmutableMap<string, string>>
}
const Announcement: React.FC<IAnnouncement> = ({ announcement, addReaction, removeReaction, emojiMap }) => {

Wyświetl plik

@ -7,9 +7,9 @@ import { joinPublicPath } from 'soapbox/utils/static';
import type { Map as ImmutableMap } from 'immutable';
interface IEmoji {
emoji: string;
emojiMap: ImmutableMap<string, ImmutableMap<string, string>>;
hovered: boolean;
emoji: string
emojiMap: ImmutableMap<string, ImmutableMap<string, string>>
hovered: boolean
}
const Emoji: React.FC<IEmoji> = ({ emoji, emojiMap, hovered }) => {

Wyświetl plik

@ -10,12 +10,12 @@ import type { Map as ImmutableMap } from 'immutable';
import type { AnnouncementReaction } from 'soapbox/types/entities';
interface IReaction {
announcementId: string;
reaction: AnnouncementReaction;
emojiMap: ImmutableMap<string, ImmutableMap<string, string>>;
addReaction: (id: string, name: string) => void;
removeReaction: (id: string, name: string) => void;
style: React.CSSProperties;
announcementId: string
reaction: AnnouncementReaction
emojiMap: ImmutableMap<string, ImmutableMap<string, string>>
addReaction: (id: string, name: string) => void
removeReaction: (id: string, name: string) => void
style: React.CSSProperties
}
const Reaction: React.FC<IReaction> = ({ announcementId, reaction, addReaction, removeReaction, emojiMap, style }) => {

Wyświetl plik

@ -13,11 +13,11 @@ import type { Emoji } from 'soapbox/components/autosuggest-emoji';
import type { AnnouncementReaction } from 'soapbox/types/entities';
interface IReactionsBar {
announcementId: string;
reactions: ImmutableList<AnnouncementReaction>;
emojiMap: ImmutableMap<string, ImmutableMap<string, string>>;
addReaction: (id: string, name: string) => void;
removeReaction: (id: string, name: string) => void;
announcementId: string
reactions: ImmutableList<AnnouncementReaction>
emojiMap: ImmutableMap<string, ImmutableMap<string, string>>
addReaction: (id: string, name: string) => void
removeReaction: (id: string, name: string) => void
}
const ReactionsBar: React.FC<IReactionsBar> = ({ announcementId, reactions, addReaction, removeReaction, emojiMap }) => {

Wyświetl plik

@ -12,16 +12,16 @@ import type { InputThemes } from 'soapbox/components/ui/input/input';
const noOp = () => { };
interface IAutosuggestAccountInput {
onChange: React.ChangeEventHandler<HTMLInputElement>,
onSelected: (accountId: string) => void,
autoFocus?: boolean,
value: string,
limit?: number,
className?: string,
autoSelect?: boolean,
menu?: Menu,
onKeyDown?: React.KeyboardEventHandler,
theme?: InputThemes,
onChange: React.ChangeEventHandler<HTMLInputElement>
onSelected: (accountId: string) => void
autoFocus?: boolean
value: string
limit?: number
className?: string
autoSelect?: boolean
menu?: Menu
onKeyDown?: React.KeyboardEventHandler
theme?: InputThemes
}
const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({

Wyświetl plik

@ -4,19 +4,19 @@ import unicodeMapping from 'soapbox/features/emoji/emoji-unicode-mapping-light';
import { joinPublicPath } from 'soapbox/utils/static';
export type Emoji = {
id: string,
custom: boolean,
imageUrl: string,
native: string,
colons: string,
id: string
custom: boolean
imageUrl: string
native: string
colons: string
}
type UnicodeMapping = {
filename: string,
filename: string
}
interface IAutosuggestEmoji {
emoji: Emoji,
emoji: Emoji
}
const AutosuggestEmoji: React.FC<IAutosuggestEmoji> = ({ emoji }) => {

Wyświetl plik

@ -16,23 +16,23 @@ import type { InputThemes } from 'soapbox/components/ui/input/input';
export type AutoSuggestion = string | Emoji;
export interface IAutosuggestInput extends Pick<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'onKeyUp' | 'onKeyDown'> {
value: string,
suggestions: ImmutableList<any>,
disabled?: boolean,
placeholder?: string,
onSuggestionSelected: (tokenStart: number, lastToken: string | null, suggestion: AutoSuggestion) => void,
onSuggestionsClearRequested: () => void,
onSuggestionsFetchRequested: (token: string) => void,
autoFocus: boolean,
autoSelect: boolean,
className?: string,
id?: string,
searchTokens: string[],
maxLength?: number,
menu?: Menu,
renderSuggestion?: React.FC<{ id: string }>,
hidePortal?: boolean,
theme?: InputThemes,
value: string
suggestions: ImmutableList<any>
disabled?: boolean
placeholder?: string
onSuggestionSelected: (tokenStart: number, lastToken: string | null, suggestion: AutoSuggestion) => void
onSuggestionsClearRequested: () => void
onSuggestionsFetchRequested: (token: string) => void
autoFocus: boolean
autoSelect: boolean
className?: string
id?: string
searchTokens: string[]
maxLength?: number
menu?: Menu
renderSuggestion?: React.FC<{ id: string }>
hidePortal?: boolean
theme?: InputThemes
}
export default class AutosuggestInput extends ImmutablePureComponent<IAutosuggestInput> {

Wyświetl plik

@ -19,7 +19,7 @@ export const ADDRESS_ICONS: Record<string, string> = {
};
interface IAutosuggestLocation {
id: string,
id: string
}
const AutosuggestLocation: React.FC<IAutosuggestLocation> = ({ id }) => {

Wyświetl plik

@ -14,23 +14,23 @@ import AutosuggestEmoji, { Emoji } from './autosuggest-emoji';
import type { List as ImmutableList } from 'immutable';
interface IAutosuggesteTextarea {
id?: string,
value: string,
suggestions: ImmutableList<string>,
disabled: boolean,
placeholder: string,
onSuggestionSelected: (tokenStart: number, token: string | null, value: string | undefined) => void,
onSuggestionsClearRequested: () => void,
onSuggestionsFetchRequested: (token: string | number) => void,
onChange: React.ChangeEventHandler<HTMLTextAreaElement>,
onKeyUp?: React.KeyboardEventHandler<HTMLTextAreaElement>,
onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>,
onPaste: (files: FileList) => void,
autoFocus: boolean,
onFocus: () => void,
onBlur?: () => void,
condensed?: boolean,
children: React.ReactNode,
id?: string
value: string
suggestions: ImmutableList<string>
disabled: boolean
placeholder: string
onSuggestionSelected: (tokenStart: number, token: string | null, value: string | undefined) => void
onSuggestionsClearRequested: () => void
onSuggestionsFetchRequested: (token: string | number) => void
onChange: React.ChangeEventHandler<HTMLTextAreaElement>
onKeyUp?: React.KeyboardEventHandler<HTMLTextAreaElement>
onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>
onPaste: (files: FileList) => void
autoFocus: boolean
onFocus: () => void
onBlur?: () => void
condensed?: boolean
children: React.ReactNode
}
class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea> {

Wyświetl plik

@ -2,8 +2,8 @@ import clsx from 'clsx';
import React from 'react';
interface IBadge {
title: React.ReactNode,
slug: string,
title: React.ReactNode
slug: string
}
/** Badge to display on a user's profile. */
const Badge: React.FC<IBadge> = ({ title, slug }) => {

Wyświetl plik

@ -15,9 +15,9 @@ 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<IBirthdayInput> = ({ value, onChange, required }) => {
@ -56,15 +56,15 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ 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 (
<div className='flex flex-col gap-2'>

Wyświetl plik

@ -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
}
/**

Wyświetl plik

@ -5,7 +5,7 @@ import { Button, HStack, Input } from './ui';
interface ICopyableInput {
/** Text to be copied. */
value: string,
value: string
}
/** An input with copy abilities. */

Wyświetl plik

@ -12,7 +12,7 @@ const messages = defineMessages({
});
interface IDomain {
domain: string,
domain: string
}
const Domain: React.FC<IDomain> = ({ domain }) => {

Wyświetl plik

@ -31,10 +31,10 @@ interface Props extends ReturnType<typeof mapStateToProps> {
}
type State = {
hasError: boolean,
error: any,
componentStack: any,
browser?: Bowser.Parser.Parser,
hasError: boolean
error: any
componentStack: any
browser?: Bowser.Parser.Parser
}
class ErrorBoundary extends React.PureComponent<Props, State> {

Wyświetl plik

@ -3,14 +3,14 @@ import React, { useEffect, useRef } from 'react';
import { isIOS } from 'soapbox/is-mobile';
interface IExtendedVideoPlayer {
src: string,
alt?: string,
width?: number,
height?: number,
time?: number,
controls?: boolean,
muted?: boolean,
onClick?: () => void,
src: string
alt?: string
width?: number
height?: number
time?: number
controls?: boolean
muted?: boolean
onClick?: () => void
}
const ExtendedVideoPlayer: React.FC<IExtendedVideoPlayer> = ({ src, alt, time, controls, muted, onClick }) => {

Wyświetl plik

@ -9,9 +9,9 @@ import clsx from 'clsx';
import React from 'react';
export interface IForkAwesomeIcon extends React.HTMLAttributes<HTMLLIElement> {
id: string,
className?: string,
fixedWidth?: boolean,
id: string
className?: string
fixedWidth?: boolean
}
const ForkAwesomeIcon: React.FC<IForkAwesomeIcon> = ({ id, className, fixedWidth, ...rest }) => {

Wyświetl plik

@ -10,7 +10,7 @@ import { HStack, Stack, Text } from './ui';
import type { Tag } from 'soapbox/types/entities';
interface IHashtag {
hashtag: Tag,
hashtag: Tag
}
const Hashtag: React.FC<IHashtag> = ({ hashtag }) => {

Wyświetl plik

@ -15,10 +15,10 @@ const showProfileHoverCard = debounce((dispatch, ref, accountId) => {
}, 600);
interface IHoverRefWrapper {
accountId: string,
inline?: boolean,
className?: string,
children: React.ReactNode,
accountId: string
inline?: boolean
className?: string
children: React.ReactNode
}
/** Makes a profile hover card appear when the wrapped element is hovered. */

Wyświetl plik

@ -14,10 +14,10 @@ const showStatusHoverCard = debounce((dispatch, ref, statusId) => {
}, 300);
interface IHoverStatusWrapper {
statusId: any,
inline: boolean,
className?: string,
children: React.ReactNode,
statusId: any
inline: boolean
className?: string
children: React.ReactNode
}
/** Makes a status hover card appear when the wrapped element is hovered. */

Wyświetl plik

@ -4,10 +4,10 @@ import Icon, { IIcon } from 'soapbox/components/icon';
import { Counter } from 'soapbox/components/ui';
interface IIconWithCounter extends React.HTMLAttributes<HTMLDivElement> {
count: number,
count: number
countMax?: number
icon?: string;
src?: string;
icon?: string
src?: string
}
const IconWithCounter: React.FC<IIconWithCounter> = ({ icon, count, countMax, ...rest }) => {

Wyświetl plik

@ -8,10 +8,10 @@ import React from 'react';
import InlineSVG from 'react-inlinesvg'; // eslint-disable-line no-restricted-imports
export interface IIcon extends React.HTMLAttributes<HTMLDivElement> {
src: string,
id?: string,
alt?: string,
className?: string,
src: string
id?: string
alt?: string
className?: string
}
const Icon: React.FC<IIcon> = ({ src, alt, className, ...rest }) => {

Wyświetl plik

@ -16,9 +16,9 @@ const List: React.FC<IList> = ({ children }) => (
);
interface IListItem {
label: React.ReactNode,
hint?: React.ReactNode,
onClick?(): void,
label: React.ReactNode
hint?: React.ReactNode
onClick?(): void
onSelect?(): void
isSelected?: boolean
children?: React.ReactNode

Wyświetl plik

@ -8,9 +8,9 @@ const messages = defineMessages({
});
interface ILoadGap {
disabled?: boolean,
maxId: string,
onClick: (id: string) => void,
disabled?: boolean
maxId: string
onClick: (id: string) => void
}
const LoadGap: React.FC<ILoadGap> = ({ disabled, maxId, onClick }) => {

Wyświetl plik

@ -4,9 +4,9 @@ import { FormattedMessage } from 'react-intl';
import { Button } from 'soapbox/components/ui';
interface ILoadMore {
onClick: React.MouseEventHandler,
disabled?: boolean,
visible?: Boolean,
onClick: React.MouseEventHandler
disabled?: boolean
visible?: Boolean
}
const LoadMore: React.FC<ILoadMore> = ({ onClick, disabled, visible = true }) => {

Wyświetl plik

@ -18,7 +18,7 @@ const messages = defineMessages({
});
interface ILocationSearch {
onSelected: (locationId: string) => void,
onSelected: (locationId: string) => void
}
const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {

Wyświetl plik

@ -19,21 +19,21 @@ const ATTACHMENT_LIMIT = 4;
const MAX_FILENAME_LENGTH = 45;
interface Dimensions {
w: Property.Width | number,
h: Property.Height | number,
t?: Property.Top,
r?: Property.Right,
b?: Property.Bottom,
l?: Property.Left,
float?: Property.Float,
pos?: Property.Position,
w: Property.Width | number
h: Property.Height | number
t?: Property.Top
r?: Property.Right
b?: Property.Bottom
l?: Property.Left
float?: Property.Float
pos?: Property.Position
}
interface SizeData {
style: React.CSSProperties,
itemsDimensions: Dimensions[],
size: number,
width: number,
style: React.CSSProperties
itemsDimensions: Dimensions[]
size: number
width: number
}
const withinLimits = (aspectRatio: number) => {
@ -48,16 +48,16 @@ const shouldLetterbox = (attachment: Attachment): boolean => {
};
interface IItem {
attachment: Attachment,
standalone?: boolean,
index: number,
size: number,
onClick: (index: number) => void,
displayWidth?: number,
visible: boolean,
dimensions: Dimensions,
last?: boolean,
total: number,
attachment: Attachment
standalone?: boolean
index: number
size: number
onClick: (index: number) => void
displayWidth?: number
visible: boolean
dimensions: Dimensions
last?: boolean
total: number
}
const Item: React.FC<IItem> = ({
@ -261,16 +261,16 @@ const Item: React.FC<IItem> = ({
};
interface IMediaGallery {
sensitive?: boolean,
media: ImmutableList<Attachment>,
height?: number,
onOpenMedia: (media: ImmutableList<Attachment>, index: number) => void,
defaultWidth?: number,
cacheWidth?: (width: number) => void,
visible?: boolean,
onToggleVisibility?: () => void,
displayMedia?: string,
compact: boolean,
sensitive?: boolean
media: ImmutableList<Attachment>
height?: number
onOpenMedia: (media: ImmutableList<Attachment>, index: number) => void
defaultWidth?: number
cacheWidth?: (width: number) => void
visible?: boolean
onToggleVisibility?: () => void
displayMedia?: string
compact: boolean
}
const MediaGallery: React.FC<IMediaGallery> = (props) => {

Wyświetl plik

@ -39,10 +39,10 @@ export const checkEventComposeContent = (compose?: ReturnType<typeof ReducerComp
};
interface IModalRoot {
onCancel?: () => void,
onClose: (type?: ModalType) => void,
type: ModalType,
children: React.ReactNode,
onCancel?: () => void
onClose: (type?: ModalType) => void
type: ModalType
children: React.ReactNode
}
const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type }) => {

Wyświetl plik

@ -2,8 +2,8 @@ import clsx from 'clsx';
import React from 'react';
interface IOutlineBox extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode,
className?: string,
children: React.ReactNode
className?: string
}
/** Wraps children in a container with an outline. */

Wyświetl plik

@ -16,9 +16,9 @@ const messages = defineMessages({
});
interface IPollFooter {
poll: PollEntity,
showResults: boolean,
selected: Selected,
poll: PollEntity
showResults: boolean
selected: Selected
}
const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX.Element => {

Wyświetl plik

@ -29,7 +29,7 @@ const PollPercentageBar: React.FC<{ percent: number, leading: boolean }> = ({ pe
};
interface IPollOptionText extends IPollOption {
percent: number,
percent: number
}
const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active, onToggle }) => {
@ -95,12 +95,12 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
};
interface IPollOption {
poll: PollEntity,
option: PollOptionEntity,
index: number,
showResults?: boolean,
active: boolean,
onToggle: (value: number) => void,
poll: PollEntity
option: PollOptionEntity
index: number
showResults?: boolean
active: boolean
onToggle: (value: number) => void
}
const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {

Wyświetl plik

@ -13,8 +13,8 @@ import PollOption from './poll-option';
export type Selected = Record<number, boolean>;
interface IPoll {
id: string,
status?: string,
id: string
status?: string
}
const messages = defineMessages({

Wyświetl plik

@ -54,7 +54,7 @@ const handleMouseLeave = (dispatch: AppDispatch): React.MouseEventHandler => {
};
interface IProfileHoverCard {
visible: boolean,
visible: boolean
}
/** Popup profile preview that appears when hovering avatars and display names. */

Wyświetl plik

@ -2,10 +2,10 @@ import clsx from 'clsx';
import React from 'react';
interface IProgressCircle {
progress: number,
radius?: number,
stroke?: number,
title?: string,
progress: number
radius?: number
stroke?: number
title?: string
}
const ProgressCircle: React.FC<IProgressCircle> = ({ progress, radius = 12, stroke = 4, title }) => {

Wyświetl plik

@ -4,10 +4,10 @@ import PTRComponent from 'react-simple-pull-to-refresh';
import { Spinner } from 'soapbox/components/ui';
interface IPullToRefresh {
onRefresh?: () => Promise<any>;
refreshingContent?: JSX.Element | string;
pullingContent?: JSX.Element | string;
children: React.ReactNode;
onRefresh?: () => Promise<any>
refreshingContent?: JSX.Element | string
pullingContent?: JSX.Element | string
children: React.ReactNode
}
/**

Wyświetl plik

@ -3,7 +3,7 @@ import React from 'react';
import PullToRefresh from './pull-to-refresh';
interface IPullable {
children: React.ReactNode,
children: React.ReactNode
}
/**

Wyświetl plik

@ -23,11 +23,11 @@ const messages = defineMessages({
interface IQuotedStatus {
/** The quoted status entity. */
status?: StatusEntity,
status?: StatusEntity
/** Callback when cancelled (during compose). */
onCancel?: Function,
onCancel?: Function
/** Whether the status is shown in the post composer. */
compose?: boolean,
compose?: boolean
}
/** Status embedded in a quote post. */

Wyświetl plik

@ -16,11 +16,11 @@ const RadioGroup = ({ onChange, children }: IRadioGroup) => {
};
interface IRadioItem {
label: React.ReactNode,
hint?: React.ReactNode,
value: string,
checked: boolean,
onChange?: React.ChangeEventHandler,
label: React.ReactNode
hint?: React.ReactNode
value: string
checked: boolean
onChange?: React.ChangeEventHandler
}
const RadioItem: React.FC<IRadioItem> = ({ label, hint, checked = false, onChange, value }) => {

Wyświetl plik

@ -113,14 +113,14 @@ const timeRemainingString = (intl: IntlShape, date: Date, now: number) => {
};
interface RelativeTimestampProps extends IText {
intl: IntlShape,
timestamp: string,
year?: number,
futureDate?: boolean,
intl: IntlShape
timestamp: string
year?: number
futureDate?: boolean
}
interface RelativeTimestampState {
now: number,
now: number
}
/** Displays a timestamp compared to the current time, eg "1m" for one minute ago. */

Wyświetl plik

@ -2,13 +2,13 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
interface ISafeEmbed {
/** Styles for the outer frame element. */
className?: string,
className?: string
/** Space-separate list of restrictions to ALLOW for the iframe. */
sandbox?: string,
sandbox?: string
/** Unique title for the iframe. */
title: string,
title: string
/** HTML body to embed. */
html?: string,
html?: string
}
/** Safely embeds arbitrary HTML content on the page (by putting it in an iframe). */

Wyświetl plik

@ -9,15 +9,15 @@ import { useSettings } from 'soapbox/hooks';
interface IScrollTopButton {
/** Callback when clicked, and also when scrolled to the top. */
onClick: () => void,
onClick: () => void
/** Number of unread items. */
count: number,
count: number
/** Message to display in the button (should contain a `{count}` value). */
message: MessageDescriptor,
message: MessageDescriptor
/** Distance from the top of the screen (scrolling down) before the button appears. */
threshold?: number,
threshold?: number
/** Distance from the top of the screen (scrolling up) before the action is triggered. */
autoloadThreshold?: number,
autoloadThreshold?: number
}
/** Floating new post counter above timelines, clicked to scroll to top. */

Wyświetl plik

@ -10,14 +10,14 @@ import { Card, Spinner } from './ui';
/** Custom Viruoso component context. */
type Context = {
itemClassName?: string,
listClassName?: string,
itemClassName?: string
listClassName?: string
}
/** Scroll position saved in sessionStorage. */
type SavedScrollPosition = {
index: number,
offset: number,
index: number
offset: number
}
/** Custom Virtuoso Item component representing a single scrollable item. */
@ -37,44 +37,44 @@ const List: Components<JSX.Element, Context>['List'] = React.forwardRef((props,
interface IScrollableList extends VirtuosoProps<any, any> {
/** Unique key to preserve the scroll position when navigating back. */
scrollKey?: string,
scrollKey?: string
/** Pagination callback when the end of the list is reached. */
onLoadMore?: () => void,
onLoadMore?: () => void
/** Whether the data is currently being fetched. */
isLoading?: boolean,
isLoading?: boolean
/** Whether to actually display the loading state. */
showLoading?: boolean,
showLoading?: boolean
/** Whether we expect an additional page of data. */
hasMore?: boolean,
hasMore?: boolean
/** Additional element to display at the top of the list. */
prepend?: React.ReactNode,
prepend?: React.ReactNode
/** Whether to display the prepended element. */
alwaysPrepend?: boolean,
alwaysPrepend?: boolean
/** Message to display when the list is loaded but empty. */
emptyMessage?: React.ReactNode,
emptyMessage?: React.ReactNode
/** Scrollable content. */
children: Iterable<React.ReactNode>,
children: Iterable<React.ReactNode>
/** Callback when the list is scrolled to the top. */
onScrollToTop?: () => void,
onScrollToTop?: () => void
/** Callback when the list is scrolled. */
onScroll?: () => void,
onScroll?: () => void
/** Placeholder component to render while loading. */
placeholderComponent?: React.ComponentType | React.NamedExoticComponent,
placeholderComponent?: React.ComponentType | React.NamedExoticComponent
/** Number of placeholders to render while loading. */
placeholderCount?: number,
placeholderCount?: number
/**
* Pull to refresh callback.
* @deprecated Put a PTR around the component instead.
*/
onRefresh?: () => Promise<any>,
onRefresh?: () => Promise<any>
/** Extra class names on the Virtuoso element. */
className?: string,
className?: string
/** Class names on each item container. */
itemClassName?: string,
itemClassName?: string
/** `id` attribute on the Virtuoso element. */
id?: string,
id?: string
/** CSS styles on the Virtuoso element. */
style?: React.CSSProperties,
style?: React.CSSProperties
/** Whether to use the window to scroll the content instead of Virtuoso's container. */
useWindowScroll?: boolean
}

Wyświetl plik

@ -43,11 +43,11 @@ const messages = defineMessages({
});
interface ISidebarLink {
href?: string,
to?: string,
icon: string,
text: string | JSX.Element,
onClick: React.EventHandler<React.MouseEvent>,
href?: string
to?: string
icon: string
text: string | JSX.Element
onClick: React.EventHandler<React.MouseEvent>
}
const SidebarLink: React.FC<ISidebarLink> = ({ href, to, icon, text, onClick }) => {

Wyświetl plik

@ -6,17 +6,17 @@ import { Icon, Text } from './ui';
interface ISidebarNavigationLink {
/** Notification count, if any. */
count?: number,
count?: number
/** Optional max to cap count (ie: N+) */
countMax?: number
/** URL to an SVG icon. */
icon: string,
icon: string
/** Link label. */
text: React.ReactNode,
text: React.ReactNode
/** Route to an internal page. */
to?: string,
to?: string
/** Callback when the link is clicked. */
onClick?: React.EventHandler<React.MouseEvent>,
onClick?: React.EventHandler<React.MouseEvent>
}
/** Desktop sidebar navigation link. */

Wyświetl plik

@ -5,9 +5,9 @@ import { useSoapboxConfig, useSettings, useTheme } from 'soapbox/hooks';
interface ISiteLogo extends React.ComponentProps<'img'> {
/** Extra class names for the <img> element. */
className?: string,
className?: string
/** Override theme setting for <SitePreview /> */
theme?: 'dark' | 'light',
theme?: 'dark' | 'light'
}
/** Display the most appropriate site logo based on the theme and configuration. */

Wyświetl plik

@ -97,10 +97,10 @@ const messages = defineMessages({
});
interface IStatusActionBar {
status: Status,
withLabels?: boolean,
expandable?: boolean,
space?: 'expand' | 'compact',
status: Status
withLabels?: boolean
expandable?: boolean
space?: 'expand' | 'compact'
}
const StatusActionBar: React.FC<IStatusActionBar> = ({

Wyświetl plik

@ -12,7 +12,7 @@ const COLORS = {
type Color = keyof typeof COLORS;
interface IStatusActionCounter {
count: number,
count: number
}
/** Action button numerical counter, eg "5" likes. */
@ -25,14 +25,14 @@ const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0 }): JSX
};
interface IStatusActionButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
iconClassName?: string,
icon: string,
count?: number,
active?: boolean,
color?: Color,
filled?: boolean,
emoji?: string,
text?: React.ReactNode,
iconClassName?: string
icon: string
count?: number
active?: boolean
color?: Color
filled?: boolean
emoji?: string
text?: React.ReactNode
}
const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButton>((props, ref): JSX.Element => {

Wyświetl plik

@ -20,7 +20,7 @@ const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top)
const BIG_EMOJI_LIMIT = 10;
interface IReadMoreButton {
onClick: React.MouseEventHandler,
onClick: React.MouseEventHandler
}
/** Button to expand a truncated status (due to too much content) */
@ -32,11 +32,11 @@ const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick }) => (
);
interface IStatusContent {
status: Status,
onClick?: () => void,
collapsable?: boolean,
translatable?: boolean,
textSize?: Sizes,
status: Status
onClick?: () => void
collapsable?: boolean
translatable?: boolean
textSize?: Sizes
}
/** Renders the text content of a status */

Wyświetl plik

@ -15,7 +15,7 @@ import { showStatusHoverCard } from './hover-status-wrapper';
import { Card, CardBody } from './ui';
interface IStatusHoverCard {
visible: boolean,
visible: boolean
}
/** Popup status preview that appears when hovering reply to */

Wyświetl plik

@ -23,31 +23,31 @@ import type { Ad as AdEntity } from 'soapbox/types/soapbox';
interface IStatusList extends Omit<IScrollableList, 'onLoadMore' | 'children'> {
/** Unique key to preserve the scroll position when navigating back. */
scrollKey: string,
scrollKey: string
/** List of status IDs to display. */
statusIds: ImmutableOrderedSet<string>,
statusIds: ImmutableOrderedSet<string>
/** Last _unfiltered_ status ID (maxId) for pagination. */
lastStatusId?: string,
lastStatusId?: string
/** Pinned statuses to show at the top of the feed. */
featuredStatusIds?: ImmutableOrderedSet<string>,
featuredStatusIds?: ImmutableOrderedSet<string>
/** Pagination callback when the end of the list is reached. */
onLoadMore?: (lastStatusId: string) => void,
onLoadMore?: (lastStatusId: string) => void
/** Whether the data is currently being fetched. */
isLoading: boolean,
isLoading: boolean
/** Whether the server did not return a complete page. */
isPartial?: boolean,
isPartial?: boolean
/** Whether we expect an additional page of data. */
hasMore: boolean,
hasMore: boolean
/** Message to display when the list is loaded but empty. */
emptyMessage: React.ReactNode,
emptyMessage: React.ReactNode
/** ID of the timeline in Redux. */
timelineId?: string,
timelineId?: string
/** Whether to display a gap or border between statuses in the list. */
divideType?: 'space' | 'border',
divideType?: 'space' | 'border'
/** Whether to display ads. */
showAds?: boolean,
showAds?: boolean
/** Whether to show group information. */
showGroup?: boolean,
showGroup?: boolean
}
/** Feed of statuses, built atop ScrollableList. */

Wyświetl plik

@ -15,15 +15,15 @@ import type { Status, Attachment } from 'soapbox/types/entities';
interface IStatusMedia {
/** Status entity to render media for. */
status: Status,
status: Status
/** Whether to display compact media. */
muted?: boolean,
muted?: boolean
/** Callback when compact media is clicked. */
onClick?: () => void,
onClick?: () => void
/** Whether or not the media is concealed behind a NSFW banner. */
showMedia?: boolean,
showMedia?: boolean
/** Callback when visibility is toggled (eg clicked through NSFW). */
onToggleVisibility?: () => void,
onToggleVisibility?: () => void
}
/** Render media attachments for a status. */

Wyświetl plik

@ -8,8 +8,8 @@ import { isUserTouching } from 'soapbox/is-mobile';
import { getReactForStatus } from 'soapbox/utils/emoji-reacts';
interface IStatusReactionWrapper {
statusId: string,
children: JSX.Element,
statusId: string
children: JSX.Element
}
/** Provides emoji reaction functionality to the underlying button component */

Wyświetl plik

@ -10,8 +10,8 @@ import { useAppDispatch } from 'soapbox/hooks';
import type { Account, Status } from 'soapbox/types/entities';
interface IStatusReplyMentions {
status: Status,
hoverable?: boolean,
status: Status
hoverable?: boolean
}
const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable = true }) => {

Wyświetl plik

@ -38,22 +38,22 @@ const messages = defineMessages({
});
export interface IStatus {
id?: string,
avatarSize?: number,
status: StatusEntity,
onClick?: () => void,
muted?: boolean,
hidden?: boolean,
unread?: boolean,
onMoveUp?: (statusId: string, featured?: boolean) => void,
onMoveDown?: (statusId: string, featured?: boolean) => void,
focusable?: boolean,
featured?: boolean,
hideActionBar?: boolean,
hoverable?: boolean,
variant?: 'default' | 'rounded',
showGroup?: boolean,
accountAction?: React.ReactElement,
id?: string
avatarSize?: number
status: StatusEntity
onClick?: () => void
muted?: boolean
hidden?: boolean
unread?: boolean
onMoveUp?: (statusId: string, featured?: boolean) => void
onMoveDown?: (statusId: string, featured?: boolean) => void
focusable?: boolean
featured?: boolean
hideActionBar?: boolean
hoverable?: boolean
variant?: 'default' | 'rounded'
showGroup?: boolean
accountAction?: React.ReactElement
}
const Status: React.FC<IStatus> = (props) => {

Wyświetl plik

@ -5,17 +5,17 @@ import { useSettings } from 'soapbox/hooks';
interface IStillImage {
/** Image alt text. */
alt?: string,
alt?: string
/** Extra class names for the outer <div> container. */
className?: string,
className?: string
/** URL to the image */
src: string,
src: string
/** Extra CSS styles on the outer <div> element. */
style?: React.CSSProperties,
style?: React.CSSProperties
/** Whether to display the image contained vs filled in its container. */
letterboxed?: boolean,
letterboxed?: boolean
/** Whether to show the file extension in the corner. */
showExt?: boolean,
showExt?: boolean
}
/** Renders images on a canvas, only playing GIFs if autoPlayGif is enabled. */
@ -80,7 +80,7 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterb
interface IExtensionBadge {
/** File extension. */
ext: string,
ext: string
}
/** Badge displaying a file extension. */

Wyświetl plik

@ -6,13 +6,13 @@ import IconWithCounter from 'soapbox/components/icon-with-counter';
import { Icon, Text } from 'soapbox/components/ui';
interface IThumbNavigationLink {
count?: number,
countMax?: number,
src: string,
text: string | React.ReactElement,
to: string,
exact?: boolean,
paths?: Array<string>,
count?: number
countMax?: number
src: string
text: string | React.ReactElement
to: string
exact?: boolean
paths?: Array<string>
}
const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax, src, text, to, exact, paths }): JSX.Element => {

Wyświetl plik

@ -5,9 +5,9 @@ import { FormattedMessage } from 'react-intl';
import { Text } from 'soapbox/components/ui';
interface ITombstone {
id: string,
onMoveUp: (statusId: string) => void,
onMoveDown: (statusId: string) => void,
id: string
onMoveUp: (statusId: string) => void
onMoveDown: (statusId: string) => void
}
/** Represents a deleted item. */

Wyświetl plik

@ -11,7 +11,7 @@ import { Stack, Button, Text } from './ui';
import type { Account, Status } from 'soapbox/types/entities';
interface ITranslateButton {
status: Status,
status: Status
}
const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {

Wyświetl plik

@ -16,11 +16,11 @@ const messages = defineMessages({
});
interface IAccordion {
headline: React.ReactNode,
children?: React.ReactNode,
menu?: Menu,
expanded?: boolean,
onToggle?: (value: boolean) => void,
headline: React.ReactNode
children?: React.ReactNode
menu?: Menu
expanded?: boolean
onToggle?: (value: boolean) => void
}
/**

Wyświetl plik

@ -7,11 +7,11 @@ const AVATAR_SIZE = 42;
interface IAvatar {
/** URL to the avatar image. */
src: string,
src: string
/** Width and height of the avatar in pixels. */
size?: number,
size?: number
/** Extra class names for the div surrounding the avatar image. */
className?: string,
className?: string
}
/** Round profile avatar for accounts. */

Wyświetl plik

@ -2,9 +2,9 @@ import clsx from 'clsx';
import React from 'react';
interface IBanner {
theme: 'frosted' | 'opaque',
children: React.ReactNode,
className?: string,
theme: 'frosted' | 'opaque'
children: React.ReactNode
className?: string
}
/** Displays a sticky full-width banner at the bottom of the screen. */

Wyświetl plik

@ -10,27 +10,27 @@ import type { ButtonSizes, ButtonThemes } from './useButtonStyles';
interface IButton {
/** Whether this button expands the width of its container. */
block?: boolean,
block?: boolean
/** Elements inside the <button> */
children?: React.ReactNode,
children?: React.ReactNode
/** Extra class names for the button. */
className?: string,
className?: string
/** Prevent the button from being clicked. */
disabled?: boolean,
disabled?: boolean
/** URL to an SVG icon to render inside the button. */
icon?: string,
icon?: string
/** Action when the button is clicked. */
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void,
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
/** A predefined button size. */
size?: ButtonSizes,
size?: ButtonSizes
/** Text inside the button. Takes precedence over `children`. */
text?: React.ReactNode,
text?: React.ReactNode
/** Makes the button into a navlink, if provided. */
to?: string,
to?: string
/** Styles the button visually with a predefined theme. */
theme?: ButtonThemes,
theme?: ButtonThemes
/** Whether this button should submit a form by default. */
type?: 'button' | 'submit',
type?: 'button' | 'submit'
}
/** Customizable button element with various themes. */

Wyświetl plik

@ -42,7 +42,7 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant = 'def
));
interface ICardHeader {
backHref?: string,
backHref?: string
onBackClick?: (event: React.MouseEvent) => void
className?: string
children?: React.ReactNode

Wyświetl plik

@ -35,15 +35,15 @@ const ColumnHeader: React.FC<IColumnHeader> = ({ label, backHref, className }) =
export interface IColumn {
/** Route the back button goes to. */
backHref?: string,
backHref?: string
/** Column title text. */
label?: string,
label?: string
/** Whether this column should have a transparent background. */
transparent?: boolean,
transparent?: boolean
/** Whether this column should have a title and back button. */
withHeader?: boolean,
withHeader?: boolean
/** Extra class name for top <div> element. */
className?: string,
className?: string
/** Ref forwarded to column. */
ref?: React.Ref<HTMLDivElement>
/** Children to display in the column. */

Wyświetl plik

@ -4,7 +4,7 @@ import { shortNumberFormat } from 'soapbox/utils/numbers';
interface ICounter {
/** Number this counter should display. */
count: number,
count: number
/** Optional max number (ie: N+) */
countMax?: number
}

Wyświetl plik

@ -9,13 +9,13 @@ import { useSoapboxConfig } from 'soapbox/hooks';
interface IEmojiButton {
/** Unicode emoji character. */
emoji: string,
emoji: string
/** Event handler when the emoji is clicked. */
onClick(emoji: string): void
/** Extra class name on the <button> element. */
className?: string,
className?: string
/** Tab order of the button. */
tabIndex?: number,
tabIndex?: number
}
/** Clickable emoji button that scales when hovered. */

Wyświetl plik

@ -5,7 +5,7 @@ import { joinPublicPath } from 'soapbox/utils/static';
interface IEmoji extends React.ImgHTMLAttributes<HTMLImageElement> {
/** Unicode emoji character. */
emoji: string,
emoji: string
}
/** A single emoji image. */

Wyświetl plik

@ -7,11 +7,11 @@ import Stack from '../stack/stack';
interface IFormGroup {
/** Input label message. */
labelText?: React.ReactNode,
labelText?: React.ReactNode
/** Input label tooltip message. */
labelTitle?: string,
labelTitle?: string
/** Input hint message. */
hintText?: React.ReactNode,
hintText?: React.ReactNode
/** Input errors. */
errors?: string[]
/** Elements to display within the FormGroup. */

Wyświetl plik

@ -2,11 +2,11 @@ import React from 'react';
interface IForm {
/** Form submission event handler. */
onSubmit?: (event: React.FormEvent) => void,
onSubmit?: (event: React.FormEvent) => void
/** Class name override for the <form> element. */
className?: string,
className?: string
/** Elements to display within the Form. */
children: React.ReactNode,
children: React.ReactNode
}
/** Form element with custom styles. */

Wyświetl plik

@ -44,7 +44,7 @@ interface IHStack extends Pick<React.HTMLAttributes<HTMLDivElement>, 'onClick'>
/** Whether to let the flexbox grow. */
grow?: boolean
/** HTML element to use for container. */
element?: keyof JSX.IntrinsicElements,
element?: keyof JSX.IntrinsicElements
/** Extra CSS styles for the <div> */
style?: React.CSSProperties
/** Whether to let the flexbox wrap onto multiple lines. */

Wyświetl plik

@ -6,15 +6,15 @@ import Text from '../text/text';
interface IIconButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
/** Class name for the <svg> icon. */
iconClassName?: string,
iconClassName?: string
/** URL to the svg icon. */
src: string,
src: string
/** Text to display next ot the button. */
text?: string,
text?: string
/** Don't render a background behind the icon. */
transparent?: boolean,
transparent?: boolean
/** Predefined styles to display for the button. */
theme?: 'seamless' | 'outlined',
theme?: 'seamless' | 'outlined'
/** Override the data-testid */
'data-testid'?: string
}

Wyświetl plik

@ -6,17 +6,17 @@ import SvgIcon from './svg-icon';
interface IIcon extends Pick<React.SVGAttributes<SVGAElement>, 'strokeWidth'> {
/** Class name for the <svg> element. */
className?: string,
className?: string
/** Number to display a counter over the icon. */
count?: number,
count?: number
/** Optional max to cap count (ie: N+) */
countMax?: number,
countMax?: number
/** Tooltip text for the icon. */
alt?: string,
alt?: string
/** URL to the svg icon. */
src: string,
src: string
/** Width and height of the icon in pixels. */
size?: number,
size?: number
}
/** Renders and SVG icon with optional counter. */

Wyświetl plik

@ -3,13 +3,13 @@ import InlineSVG from 'react-inlinesvg'; // eslint-disable-line no-restricted-im
interface ISvgIcon {
/** Class name for the <svg> */
className?: string,
className?: string
/** Tooltip text for the icon. */
alt?: string,
alt?: string
/** URL to the svg file. */
src: string,
src: string
/** Width and height of the icon in pixels. */
size?: number,
size?: number
}
/** Renders an inline SVG with an empty frame loading state */

Wyświetl plik

@ -16,29 +16,29 @@ type InputThemes = 'normal' | 'search'
interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onChange' | 'onBlur' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required' | 'disabled' | 'onClick' | 'readOnly' | 'min' | 'pattern' | 'onKeyDown' | 'onKeyUp' | 'onFocus' | 'style' | 'id'> {
/** Put the cursor into the input on mount. */
autoFocus?: boolean,
autoFocus?: boolean
/** The initial text in the input. */
defaultValue?: string,
defaultValue?: string
/** Extra class names for the <input> element. */
className?: string,
className?: string
/** Extra class names for the outer <div> element. */
outerClassName?: string,
outerClassName?: string
/** URL to the svg icon. Cannot be used with prepend. */
icon?: string,
icon?: string
/** Internal input name. */
name?: string,
name?: string
/** Text to display before a value is entered. */
placeholder?: string,
placeholder?: string
/** Text in the input. */
value?: string | number,
value?: string | number
/** Change event handler for the input. */
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void,
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
/** An element to display as prefix to input. Cannot be used with icon. */
prepend?: React.ReactElement,
prepend?: React.ReactElement
/** An element to display as suffix to input. Cannot be used with password type. */
append?: React.ReactElement,
append?: React.ReactElement
/** Theme to style the input with. */
theme?: InputThemes,
theme?: InputThemes
}
/** Form input element. */

Wyświetl plik

@ -14,9 +14,9 @@ interface ILayout {
}
interface LayoutComponent extends React.FC<ILayout> {
Sidebar: React.FC<ISidebar>,
Main: React.FC<React.HTMLAttributes<HTMLDivElement>>,
Aside: React.FC<IAside>,
Sidebar: React.FC<ISidebar>
Main: React.FC<React.HTMLAttributes<HTMLDivElement>>
Aside: React.FC<IAside>
}
/** Layout container, to hold Sidebar, Main, and Aside. */

Wyświetl plik

@ -25,36 +25,36 @@ const widths = {
interface IModal {
/** Callback when the modal is cancelled. */
cancelAction?: () => void,
cancelAction?: () => void
/** Cancel button text. */
cancelText?: React.ReactNode,
cancelText?: React.ReactNode
/** URL to an SVG icon for the close button. */
closeIcon?: string,
closeIcon?: string
/** Position of the close button. */
closePosition?: 'left' | 'right',
closePosition?: 'left' | 'right'
/** Callback when the modal is confirmed. */
confirmationAction?: (event?: React.MouseEvent<HTMLButtonElement>) => void,
confirmationAction?: (event?: React.MouseEvent<HTMLButtonElement>) => void
/** Whether the confirmation button is disabled. */
confirmationDisabled?: boolean,
confirmationDisabled?: boolean
/** Confirmation button text. */
confirmationText?: React.ReactNode,
confirmationText?: React.ReactNode
/** Confirmation button theme. */
confirmationTheme?: ButtonThemes,
confirmationTheme?: ButtonThemes
/** Whether to use full width style for confirmation button. */
confirmationFullWidth?: boolean,
confirmationFullWidth?: boolean
/** Callback when the modal is closed. */
onClose?: () => void,
onClose?: () => void
/** Callback when the secondary action is chosen. */
secondaryAction?: (event?: React.MouseEvent<HTMLButtonElement>) => void,
secondaryAction?: (event?: React.MouseEvent<HTMLButtonElement>) => void
/** Secondary button text. */
secondaryText?: React.ReactNode,
secondaryDisabled?: boolean,
secondaryText?: React.ReactNode
secondaryDisabled?: boolean
/** Don't focus the "confirm" button on mount. */
skipFocus?: boolean,
skipFocus?: boolean
/** Title text for the modal. */
title?: React.ReactNode,
width?: keyof typeof widths,
children?: React.ReactNode,
title?: React.ReactNode
width?: keyof typeof widths
children?: React.ReactNode
}
/** Displays a modal dialog box. */

Wyświetl plik

@ -3,8 +3,8 @@ import React from 'react';
import { COUNTRY_CODES, CountryCode } from 'soapbox/utils/phone';
interface ICountryCodeDropdown {
countryCode: CountryCode,
onChange(countryCode: CountryCode): void,
countryCode: CountryCode
onChange(countryCode: CountryCode): void
}
/** Dropdown menu to select a country code. */

Wyświetl plik

@ -9,11 +9,11 @@ import CountryCodeDropdown from './country-code-dropdown';
interface IPhoneInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'required' | 'autoFocus'> {
/** E164 phone number. */
value?: string,
value?: string
/** Change handler which receives the E164 phone string. */
onChange?: (phone: string | undefined) => void,
onChange?: (phone: string | undefined) => void
/** Country code that's selected on mount. */
defaultCountryCode?: CountryCode,
defaultCountryCode?: CountryCode
}
/** Internationalized phone input with country code picker. */

Wyświetl plik

@ -2,7 +2,7 @@ import clsx from 'clsx';
import React from 'react';
interface ISelect extends React.SelectHTMLAttributes<HTMLSelectElement> {
children: Iterable<React.ReactNode>,
children: Iterable<React.ReactNode>
}
/** Multiple-select dropdown. */

Wyświetl plik

@ -8,7 +8,7 @@ import './spinner.css';
interface ISpinner {
/** Width and height of the spinner in pixels. */
size?: number,
size?: number
/** Whether to display "Loading..." beneath the spinner. */
withText?: boolean
}

Wyświetl plik

@ -39,7 +39,7 @@ interface IStack extends React.HTMLAttributes<HTMLDivElement> {
/** Whether to let the flexbox grow. */
grow?: boolean
/** HTML element to use for container. */
element?: keyof JSX.IntrinsicElements,
element?: keyof JSX.IntrinsicElements
}
/** Vertical stack of child elements. */

Wyświetl plik

@ -14,27 +14,27 @@ const messages = defineMessages({
/** Type of the inner Streamfield input component. */
export type StreamfieldComponent<T> = React.ComponentType<{
value: T,
onChange: (value: T) => void,
value: T
onChange: (value: T) => void
}>;
interface IStreamfield {
/** Array of values for the streamfield. */
values: any[],
values: any[]
/** Input label message. */
label?: React.ReactNode,
label?: React.ReactNode
/** Input hint message. */
hint?: React.ReactNode,
hint?: React.ReactNode
/** Callback to add an item. */
onAddItem?: () => void,
onAddItem?: () => void
/** Callback to remove an item by index. */
onRemoveItem?: (i: number) => void,
onRemoveItem?: (i: number) => void
/** Callback when values are changed. */
onChange: (values: any[]) => void,
onChange: (values: any[]) => void
/** Input to render for each value. */
component: StreamfieldComponent<any>,
component: StreamfieldComponent<any>
/** Maximum number of allowed inputs. */
maxItems?: number,
maxItems?: number
}
/** List of inputs that can be added or removed. */
@ -72,7 +72,7 @@ const Streamfield: React.FC<IStreamfield> = ({
<Component key={i} onChange={handleChange(i)} value={value} />
{onRemoveItem && (
<IconButton
iconClassName='w-4 h-4'
iconClassName='h-4 w-4'
className='bg-transparent text-gray-400 hover:text-gray-600'
src={require('@tabler/icons/x.svg')}
onClick={() => onRemoveItem(i)}

Wyświetl plik

@ -18,7 +18,7 @@ const AnimatedContext = React.createContext(null);
interface IAnimatedInterface {
/** Callback when a tab is chosen. */
onChange(index: number): void,
onChange(index: number): void
/** Default tab index. */
defaultIndex: number
children: React.ReactNode
@ -63,13 +63,13 @@ const AnimatedTabs: React.FC<IAnimatedInterface> = ({ children, ...rest }) => {
interface IAnimatedTab {
/** ARIA role. */
role: 'button',
role: 'button'
/** Element to represent the tab. */
as: 'a' | 'button',
as: 'a' | 'button'
/** Route to visit when the tab is chosen. */
href?: string,
href?: string
/** Tab title text. */
title: string,
title: string
/** Index value of the tab. */
index: number
}
@ -104,26 +104,26 @@ const AnimatedTab: React.FC<IAnimatedTab> = ({ index, ...props }) => {
/** Structure to represent a tab. */
export type Item = {
/** Tab text. */
text: React.ReactNode,
text: React.ReactNode
/** Tab tooltip text. */
title?: string,
title?: string
/** URL to visit when the tab is selected. */
href?: string,
href?: string
/** Route to visit when the tab is selected. */
to?: string,
to?: string
/** Callback when the tab is selected. */
action?: () => void,
action?: () => void
/** Display a counter over the tab. */
count?: number,
count?: number
/** Unique name for this tab. */
name: string
}
interface ITabs {
/** Array of structured tab items. */
items: Item[],
items: Item[]
/** Name of the active tab item. */
activeItem: string,
activeItem: string
}
/** Animated tabs component. */

Wyświetl plik

@ -5,9 +5,9 @@ import HStack from '../hstack/hstack';
import Tag from './tag';
interface ITagInput {
tags: string[],
onChange: (tags: string[]) => void,
placeholder?: string,
tags: string[]
onChange: (tags: string[]) => void
placeholder?: string
}
/** Manage a list of tags. */

Wyświetl plik

@ -5,9 +5,9 @@ import Text from '../text/text';
interface ITag {
/** Name of the tag. */
tag: string,
tag: string
/** Callback when the X icon is pressed. */
onDelete: (tag: string) => void,
onDelete: (tag: string) => void
}
/** A single editable Tag (used by TagInput). */
@ -17,7 +17,7 @@ const Tag: React.FC<ITag> = ({ tag, onDelete }) => {
<Text theme='white'>{tag}</Text>
<IconButton
iconClassName='w-4 h-4'
iconClassName='h-4 w-4'
src={require('@tabler/icons/x.svg')}
onClick={() => onDelete(tag)}
transparent

Some files were not shown because too many files have changed in this diff Show More