mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Update eslint to 8.27.0

Browse source
This commit is contained in:
Fedor Indutny 2022-11-17 16:45:19 -08:00 • committed by GitHub
parent c8fb43a846
commit 98ef4c627a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
499 changed files with 8995 additions and 8494 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
.eslintrc.js
View file

@ -94,6 +94,33 @@ const rules = {
// Prefer functional components with default params
'react/require-default-props': 'off',
// Empty fragments are used in adapters between backbone and react views.
'react/jsx-no-useless-fragment': ['error', {
allowExpressions: true,
}],
// Our code base has tons of arrow functions passed directly to components.
'react/jsx-no-bind': 'off',
// Does not support forwardRef
'react/no-unused-prop-types': 'off',
// Not useful for us as we have lots of complicated types.
'react/destructuring-assignment': 'off',
'react/function-component-definition': ['error', {
namedComponents: 'function-declaration',
unnamedComponents: 'arrow-function',
}],
'react/display-name': 'error',
// Allow returning values from promise executors for brevity.
'no-promise-executor-return': 'off',
// Redux ducks use this a lot
'default-param-last': 'off',
'jsx-a11y/label-has-associated-control': ['error', { assert: 'either' }],
'no-restricted-syntax': [

20
package.json
View file

@ -259,8 +259,8 @@
"@types/webpack-dev-server": "3.11.3",
"@types/websocket": "1.0.0",
"@types/yargs": "17.0.7",
"@typescript-eslint/eslint-plugin": "5.6.0",
"@typescript-eslint/parser": "5.6.0",
"@typescript-eslint/eslint-plugin": "5.43.0",
"@typescript-eslint/parser": "5.43.0",
"arraybuffer-loader": "1.0.3",
"asar": "3.1.0",
"babel-core": "7.0.0-bridge.0",
@ -281,13 +281,13 @@
"electron-notarize": "1.2.1",
"endanger": "7.0.4",
"esbuild": "0.15.8",
"eslint": "7.7.0",
"eslint-config-airbnb-typescript-prettier": "4.2.0",
"eslint-config-prettier": "6.11.0",
"eslint-plugin-import": "2.22.0",
"eslint-plugin-mocha": "9.0.0",
"eslint-plugin-more": "1.0.0",
"eslint-plugin-react": "7.20.6",
"eslint": "8.27.0",
"eslint-config-airbnb-typescript-prettier": "5.0.0",
"eslint-config-prettier": "8.5.0",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-mocha": "10.1.0",
"eslint-plugin-more": "1.0.5",
"eslint-plugin-react": "7.31.10",
"file-loader": "4.2.0",
"html-webpack-plugin": "5.3.1",
"json-to-ast": "2.1.0",
@ -298,7 +298,7 @@
"nyc": "11.4.1",
"patch-package": "6.4.7",
"playwright": "1.17.1",
"prettier": "2.6.0",
"prettier": "2.7.1",
"sass": "1.49.7",
"sass-loader": "10.2.0",
"sinon": "11.1.1",

6
sticker-creator/app/index.tsx
View file

@ -20,10 +20,10 @@ export type AppPropsType = Readonly<{
hasCustomTitleBar: boolean;
}>;
export const App = ({
export function App({
executeMenuRole,
hasCustomTitleBar,
}: AppPropsType): JSX.Element => {
}: AppPropsType): JSX.Element {
const i18n = useI18n();
const theme = useTheme();
@ -57,4 +57,4 @@ export const App = ({
</div>
</TitleBarContainer>
);
};
}

4
sticker-creator/app/stages/AppStage.tsx
View file

@ -35,7 +35,7 @@ const getClassName = ({ noMessage, empty }: Props) => {
return styles.main;
};
export const AppStage: React.ComponentType<Props> = props => {
export function AppStage(props: Props): JSX.Element {
const {
children,
next,
@ -101,4 +101,4 @@ export const AppStage: React.ComponentType<Props> = props => {
/>
</>
);
};
}

4
sticker-creator/app/stages/DropStage.tsx
View file

@ -10,7 +10,7 @@ import { StickerGrid } from '../../components/StickerGrid';
import { stickersDuck } from '../../store';
import { useI18n } from '../../util/i18n';
export const DropStage: React.ComponentType = () => {
export function DropStage(): JSX.Element {
const i18n = useI18n();
const stickerPaths = stickersDuck.useStickerOrder();
const stickersReady = stickersDuck.useStickersReady();
@ -40,4 +40,4 @@ export const DropStage: React.ComponentType = () => {
</div>
</AppStage>
);
};
}

4
sticker-creator/app/stages/EmojiStage.tsx
View file

@ -9,7 +9,7 @@ import { StickerGrid } from '../../components/StickerGrid';
import { stickersDuck } from '../../store';
import { useI18n } from '../../util/i18n';
export const EmojiStage: React.ComponentType = () => {
export function EmojiStage(): JSX.Element {
const i18n = useI18n();
const emojisReady = stickersDuck.useEmojisReady();
@ -26,4 +26,4 @@ export const EmojiStage: React.ComponentType = () => {
</div>
</AppStage>
);
};
}

4
sticker-creator/app/stages/MetaStage.tsx
View file

@ -14,7 +14,7 @@ import { ConfirmModal } from '../../components/ConfirmModal';
import { stickersDuck } from '../../store';
import { useI18n } from '../../util/i18n';
export const MetaStage: React.ComponentType = () => {
export function MetaStage(): JSX.Element {
const i18n = useI18n();
const actions = stickersDuck.useStickerActions();
const valid = stickersDuck.useAllDataValid();
@ -99,4 +99,4 @@ export const MetaStage: React.ComponentType = () => {
</div>
</AppStage>
);
};
}

4
sticker-creator/app/stages/ShareStage.tsx
View file

@ -15,7 +15,7 @@ import { stickersDuck } from '../../store';
import { useI18n } from '../../util/i18n';
import { Intl } from '../../../ts/components/Intl';
export const ShareStage: React.ComponentType = () => {
export function ShareStage(): JSX.Element {
const i18n = useI18n();
const actions = stickersDuck.useStickerActions();
const title = stickersDuck.useTitle();
@ -94,4 +94,4 @@ export const ShareStage: React.ComponentType = () => {
) : null}
</AppStage>
);
};
}

4
sticker-creator/app/stages/UploadStage.tsx
View file

@ -18,7 +18,7 @@ const handleCancel = () => {
history.push('/add-meta');
};
export const UploadStage: React.ComponentType = () => {
export function UploadStage(): JSX.Element {
const i18n = useI18n();
const actions = stickersDuck.useStickerActions();
const cover = stickersDuck.useCover();
@ -81,4 +81,4 @@ export const UploadStage: React.ComponentType = () => {
</div>
</AppStage>
);
};
}

4
sticker-creator/components/ConfirmModal.tsx
View file

@ -9,7 +9,9 @@ import { ConfirmDialog } from '../elements/ConfirmDialog';
export type Mode = 'removable' | 'pick-emoji' | 'add';
export const ConfirmModal = React.memo((props: Props) => {
export const ConfirmModal = React.memo(function ConfirmModalInner(
props: Props
) {
const { onCancel } = props;
const [popperRoot, setPopperRoot] = React.useState<HTMLDivElement>();

2
sticker-creator/components/ShareButtons.tsx
View file

@ -12,7 +12,7 @@ export type Props = {
};
export const ShareButtons: React.ComponentType<Props> = React.memo(
({ value }) => {
function ShareButtonsInner({ value }) {
const i18n = useI18n();
const buttonPaths = React.useMemo<

4
sticker-creator/components/StickerFrame.stories.tsx
View file

@ -47,7 +47,7 @@ _StickerFrame.story = {
name: 'StickerFrame, add sticker',
};
export const EmojiSelectMode = (): JSX.Element => {
export function EmojiSelectMode(): JSX.Element {
const image = text('image url', '/fixtures/512x515-thumbs-up-lincoln.webp');
const setSkinTone = action('setSkinTone');
const onRemove = action('onRemove');
@ -71,7 +71,7 @@ export const EmojiSelectMode = (): JSX.Element => {
/>
</StoryRow>
);
};
}
EmojiSelectMode.story = {
name: 'StickerFrame, emoji select mode',

12
sticker-creator/components/StickerFrame.tsx
View file

@ -66,8 +66,7 @@ const ImageHandle = SortableHandle((props: { src: string }) => (
<img className={styles.image} {...props} alt="Sticker" />
));
export const StickerFrame = React.memo(
({
export const StickerFrame = React.memo(function StickerFrameInner({
id,
emojiData,
image,
@ -78,7 +77,7 @@ export const StickerFrame = React.memo(
skinTone,
onSetSkinTone,
onDrop,
}: Props) => {
}: Props) {
const i18n = useI18n();
const [emojiPickerOpen, setEmojiPickerOpen] = React.useState(false);
const [emojiPopperRoot, setEmojiPopperRoot] =
@ -113,9 +112,7 @@ export const StickerFrame = React.memo(
return;
}
if (!onRemove) {
throw new Error(
'StickerFrame/handleRemove: onRemove was not provided!'
);
throw new Error('StickerFrame/handleRemove: onRemove was not provided!');
}
onRemove(id);
}, [onRemove, id]);
@ -304,5 +301,4 @@ export const StickerFrame = React.memo(
</PopperReference>
</PopperManager>
);
}
);
});

10
sticker-creator/components/StickerPackPreview.tsx
View file

@ -11,8 +11,11 @@ export type Props = {
author: string;
};
export const StickerPackPreview = React.memo(
({ images, title, author }: Props) => {
export const StickerPackPreview = React.memo(function StickerPackPreviewInner({
images,
title,
author,
}: Props) {
const i18n = useI18n();
return (
@ -33,5 +36,4 @@ export const StickerPackPreview = React.memo(
</div>
</div>
);
}
);
});

6
sticker-creator/components/Toaster.tsx
View file

@ -12,7 +12,11 @@ export type Props = React.HTMLAttributes<HTMLDivElement> & {
const DEFAULT_DISMISS = 1e4;
export const Toaster = React.memo(({ loaf, onDismiss, className }: Props) => {
export const Toaster = React.memo(function ToasterInner({
loaf,
onDismiss,
className,
}: Props) {
const slice = last(loaf);
React.useEffect(() => {

6
sticker-creator/elements/Button.tsx
View file

@ -27,11 +27,11 @@ const getClassName = ({ primary, pill }: Props) => {
return styles.base;
};
export const Button: React.ComponentType<Props> = ({
export function Button({
className,
children,
...otherProps
}) => {
}: React.PropsWithChildren<Props>): JSX.Element {
return (
<button
type="button"
@ -41,4 +41,4 @@ export const Button: React.ComponentType<Props> = ({
{children}
</button>
);
};
}

6
sticker-creator/elements/ConfirmDialog.tsx
View file

@ -14,14 +14,14 @@ export type Props = {
readonly onCancel: () => unknown;
};
export const ConfirmDialog: React.ComponentType<Props> = ({
export function ConfirmDialog({
title,
children,
confirm,
cancel,
onConfirm,
onCancel,
}) => {
}: Props): JSX.Element {
const i18n = useI18n();
const cancelText = cancel || i18n('StickerCreator--ConfirmDialog--cancel');
@ -43,4 +43,4 @@ export const ConfirmDialog: React.ComponentType<Props> = ({
</div>
</div>
);
};
}

2
sticker-creator/elements/CopyText.tsx
View file

@ -14,7 +14,7 @@ export type Props = {
};
export const CopyText: React.ComponentType<Props> = React.memo(
({ label, onCopy, value }) => {
function CopyTextInner({ label, onCopy, value }) {
const i18n = useI18n();
const handleClick = React.useCallback(() => {
copy(value);

6
sticker-creator/elements/DropZone.tsx
View file

@ -28,7 +28,7 @@ const getClassName = ({ inner }: Props, isDragActive: boolean) => {
return styles.standalone;
};
export const DropZone: React.ComponentType<Props> = props => {
export function DropZone(props: Props): JSX.Element {
const { inner, label, onDrop, onDragActive } = props;
const i18n = useI18n();
@ -52,7 +52,7 @@ export const DropZone: React.ComponentType<Props> = props => {
<div
{...getRootProps({ className: getClassName(props, isDragActive) })}
role="button"
area-label={label}
aria-label={label}
>
<input {...getInputProps()} />
<svg viewBox="0 0 36 36" width="36px" height="36px">
@ -67,4 +67,4 @@ export const DropZone: React.ComponentType<Props> = props => {
) : null}
</div>
);
};
}

10
sticker-creator/elements/LabeledCheckbox.tsx
View file

@ -17,8 +17,11 @@ const checkSvg = (
</svg>
);
export const LabeledCheckbox = React.memo(
({ children, value, onChange }: Props) => {
export const LabeledCheckbox = React.memo(function LabeledCheckboxInner({
children,
value,
onChange,
}: Props) {
const handleChange = React.useCallback(() => {
if (onChange !== undefined) {
onChange(!value);
@ -40,5 +43,4 @@ export const LabeledCheckbox = React.memo(
<Inline className={styles.label}>{children}</Inline>
</label>
);
}
);
});

11
sticker-creator/elements/LabeledInput.tsx
View file

@ -12,8 +12,12 @@ export type Props = {
onChange?: (value: string) => unknown;
};
export const LabeledInput = React.memo(
({ children, value, placeholder, onChange }: Props) => {
export const LabeledInput = React.memo(function LabeledInputInner({
children,
value,
placeholder,
onChange,
}: Props) {
const handleChange = React.useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
if (onChange !== undefined) {
@ -35,5 +39,4 @@ export const LabeledInput = React.memo(
/>
</label>
);
}
);
});

7
sticker-creator/elements/MessageBubble.tsx
View file

@ -10,14 +10,11 @@ export type Props = Pick<MessageMetaProps, 'minutesAgo'> & {
children: React.ReactNode;
};
export const MessageBubble: React.ComponentType<Props> = ({
children,
minutesAgo,
}) => {
export function MessageBubble({ children, minutesAgo }: Props): JSX.Element {
return (
<div className={styles.base}>
{children}
<MessageMeta kind="bubble" minutesAgo={minutesAgo} />
</div>
);
};
}

2
sticker-creator/elements/MessageMeta.tsx
View file

@ -22,7 +22,7 @@ const getItemClass = ({ kind }: Props) => {
return styles.bubble;
};
export const MessageMeta = React.memo((props: Props) => {
export const MessageMeta = React.memo(function MessageMetaInner(props: Props) {
const i18n = useI18n();
const itemClass = getItemClass(props);

6
sticker-creator/elements/MessageSticker.tsx
View file

@ -10,15 +10,15 @@ export type Props = MessageMetaProps & {
image: string;
};
export const MessageSticker: React.ComponentType<Props> = ({
export function MessageSticker({
image,
kind,
minutesAgo,
}) => {
}: Props): JSX.Element {
return (
<div className={styles.base}>
<img src={image} alt="Sticker" className={styles.image} />
<MessageMeta kind={kind} minutesAgo={minutesAgo} />
</div>
);
};
}

8
sticker-creator/elements/PageHeader.tsx
View file

@ -9,6 +9,8 @@ export type Props = {
children: React.ReactNode;
};
export const PageHeader = React.memo(({ children }: Props) => (
<H1 className={styles.base}>{children}</H1>
));
export const PageHeader = React.memo(function PageHeaderInner({
children,
}: Props) {
return <H1 className={styles.base}>{children}</H1>;
});

10
sticker-creator/elements/ProgressBar.tsx
View file

@ -11,11 +11,17 @@ export type Props = Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> & {
readonly total: number;
};
export const ProgressBar = React.memo(({ className, count, total }: Props) => (
export const ProgressBar = React.memo(function ProgressBarInner({
className,
count,
total,
}: Props) {
return (
<div className={classnames(styles.base, className)}>
<div
className={styles.bar}
style={{ width: `${Math.floor((count / total) * 100)}%` }}
/>
</div>
));
);
});

6
sticker-creator/elements/StoryRow.tsx
View file

@ -31,7 +31,9 @@ const getClassName = ({ left, right, top, bottom }: Props) => {
return styles.base;
};
export const StoryRow: React.ComponentType<Props> = ({
export function StoryRow({
children,
...props
}) => <div className={getClassName(props)}>{children}</div>;
}: React.PropsWithChildren<Props>): JSX.Element {
return <div className={getClassName(props)}>{children}</div>;
}

10
sticker-creator/elements/Toast.tsx
View file

@ -9,7 +9,12 @@ export type Props = React.HTMLAttributes<HTMLButtonElement> & {
children: React.ReactNode;
};
export const Toast = React.memo(({ children, className, ...rest }: Props) => (
export const Toast = React.memo(function ToastInner({
children,
className,
...rest
}: Props) {
return (
<button
type="button"
className={classNames(styles.base, className)}
@ -17,4 +22,5 @@ export const Toast = React.memo(({ children, className, ...rest }: Props) => (
>
{children}
</button>
));
);
});

10
sticker-creator/elements/Typography.stories.tsx
View file

@ -1,7 +1,7 @@
// Copyright 2019-2020 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
/* eslint-disable no-script-url, jsx-a11y/anchor-is-valid */
/* eslint-disable jsx-a11y/anchor-is-valid */
import * as React from 'react';
import { text } from '@storybook/addon-knobs';
@ -13,7 +13,7 @@ export default {
title: 'Sticker Creator/elements',
};
export const Typography = (): JSX.Element => {
export function Typography(): JSX.Element {
const child = text('text', 'foo bar');
return (
@ -32,11 +32,9 @@ export const Typography = (): JSX.Element => {
<StoryRow left>
<Text>
{child} {child} {child} {child}{' '}
<a href="javascript: void 0;">
Something something something dark side.
</a>
<a href="#">Something something something dark side.</a>
</Text>
</StoryRow>
</>
);
};
}

46
sticker-creator/elements/Typography.tsx
View file

@ -18,30 +18,38 @@ export type ParagraphProps = React.HTMLAttributes<HTMLParagraphElement> & {
};
export type SpanProps = React.HTMLAttributes<HTMLSpanElement>;
export const H1 = React.memo(
({ children, className, ...rest }: Props & HeadingProps) => (
export const H1 = React.memo(function H1Inner({
children,
className,
...rest
}: Props & HeadingProps) {
return (
<h1 className={classnames(styles.h1, className)} {...rest}>
{children}
</h1>
)
);
);
});
export const H2 = React.memo(
({ children, className, ...rest }: Props & HeadingProps) => (
export const H2 = React.memo(function H2Inner({
children,
className,
...rest
}: Props & HeadingProps) {
return (
<h2 className={classnames(styles.h2, className)} {...rest}>
{children}
</h2>
)
);
);
});
export const Text = React.memo(
({
export const Text = React.memo(function TextInner({
children,
className,
center,
secondary,
...rest
}: Props & ParagraphProps) => (
}: Props & ParagraphProps) {
return (
<p
className={classnames(
center ? styles.textCenter : styles.text,
@ -52,13 +60,17 @@ export const Text = React.memo(
>
{children}
</p>
)
);
);
});
export const Inline = React.memo(
({ children, className, ...rest }: Props & SpanProps) => (
export const Inline = React.memo(function InlineInner({
children,
className,
...rest
}: Props & SpanProps) {
return (
<span className={classnames(styles.text, className)} {...rest}>
{children}
</span>
)
);
);
});

6
sticker-creator/elements/icons/AddEmoji.tsx
View file

@ -3,8 +3,10 @@
import * as React from 'react';
export const AddEmoji = React.memo(() => (
export const AddEmoji = React.memo(function AddEmojiInner() {
return (
<svg width="32px" height="20px" viewBox="0 0 32 20">
<path d="M21.993 15.5a5.679 5.679 0 0 1-4.6-2.29.75.75 0 1 1 1.212-.883 4.266 4.266 0 0 0 6.786-.015.749.749 0 0 1 1.216.876 5.671 5.671 0 0 1-4.614 2.312zM22 2.5a7.254 7.254 0 0 0-7.5 7.5 7.254 7.254 0 0 0 7.5 7.5 7.254 7.254 0 0 0 7.5-7.5A7.254 7.254 0 0 0 22 2.5M22 1a8.751 8.751 0 0 1 9 9 8.751 8.751 0 0 1-9 9 8.751 8.751 0 0 1-9-9 8.751 8.751 0 0 1 9-9zm-2.75 5.75A1.476 1.476 0 0 0 18 8.375 1.476 1.476 0 0 0 19.25 10a1.476 1.476 0 0 0 1.25-1.625 1.476 1.476 0 0 0-1.25-1.625zm5.5 0a1.476 1.476 0 0 0-1.25 1.625A1.476 1.476 0 0 0 24.75 10 1.476 1.476 0 0 0 26 8.375a1.476 1.476 0 0 0-1.25-1.625zM10 9.25H6.75V6h-1.5v3.25H2v1.5h3.25V14h1.5v-3.25H10z" />
</svg>
));
);
});

6
sticker-creator/root.tsx
View file

@ -12,7 +12,8 @@ import { I18n } from './util/i18n';
const { localeMessages, SignalContext } = window;
const ColdRoot = () => (
function ColdRoot() {
return (
<ReduxProvider store={store}>
<Router history={history}>
<I18n messages={localeMessages} locale={SignalContext.config.locale}>
@ -23,6 +24,7 @@ const ColdRoot = () => (
</I18n>
</Router>
</ReduxProvider>
);
);
}
export const Root = hot(ColdRoot);

5
sticker-creator/store/ducks/stickers.ts
View file

@ -31,6 +31,8 @@ import type { EmojiPickDataType } from '../../../ts/components/emoji/EmojiPicker
import { convertShortName } from '../../../ts/components/emoji/lib';
import { isNotNil } from '../../../ts/util/isNotNil';
type StickerEmojiData = { id: string; emoji: EmojiPickDataType };
export const initializeStickers = createAction<Array<string>>(
'stickers/initializeStickers'
);
@ -41,8 +43,7 @@ export const removeSticker = createAction<string>('stickers/removeSticker');
export const moveSticker = createAction<SortEnd>('stickers/moveSticker');
export const setCover = createAction<StickerImageData>('stickers/setCover');
export const resetCover = createAction<StickerImageData>('stickers/resetCover');
export const setEmoji =
createAction<{ id: string; emoji: EmojiPickDataType }>('stickers/setEmoji');
export const setEmoji = createAction<StickerEmojiData>('stickers/setEmoji');
export const setTitle = createAction<string>('stickers/setTitle');
export const setAuthor = createAction<string>('stickers/setAuthor');
export const setPackMeta = createAction<PackMetaData>('stickers/setPackMeta');

8
sticker-creator/util/i18n.tsx
View file

@ -27,11 +27,7 @@ export type I18nProps = {
messages: LocaleMessagesType;
};
export const I18n = ({
messages,
locale,
children,
}: I18nProps): JSX.Element => {
export function I18n({ messages, locale, children }: I18nProps): JSX.Element {
const { icuMessages, legacyMessages } = React.useMemo(() => {
return classifyMessages(messages);
}, [messages]);
@ -115,6 +111,6 @@ export const I18n = ({
return (
<I18nContext.Provider value={getMessage}>{children}</I18nContext.Provider>
);
};
}
export const useI18n = (): LocalizerType => React.useContext(I18nContext);

6
ts/components/About.tsx
View file

@ -18,14 +18,14 @@ export type PropsType = {
executeMenuRole: ExecuteMenuRoleType;
};
export const About = ({
export function About({
closeAbout,
i18n,
environment,
version,
hasCustomTitleBar,
executeMenuRole,
}: PropsType): JSX.Element => {
}: PropsType): JSX.Element {
useEscapeHandling(closeAbout);
const theme = useTheme();
@ -63,4 +63,4 @@ export const About = ({
</div>
</TitleBarContainer>
);
};
}

1
ts/components/AddCaptionModal.stories.tsx
View file

@ -37,6 +37,7 @@ export default {
},
} as Meta;
// eslint-disable-next-line react/function-component-definition
const Template: Story<Props> = args => (
<AddCaptionModal {...args} theme={React.useContext(StorybookThemeContext)} />
);

6
ts/components/AddCaptionModal.tsx
View file

@ -19,14 +19,14 @@ export type Props = {
) => JSX.Element;
};
export const AddCaptionModal = ({
export function AddCaptionModal({
i18n,
onClose,
onSubmit,
draftText,
RenderCompositionTextArea,
theme,
}: Props): JSX.Element => {
}: Props): JSX.Element {
const [messageText, setMessageText] = React.useState('');
const [isScrolledTop, setIsScrolledTop] = React.useState(true);
@ -84,4 +84,4 @@ export const AddCaptionModal = ({
/>
</Modal>
);
};
}

6
ts/components/AddGroupMemberErrorDialog.stories.tsx
View file

@ -35,13 +35,15 @@ _MaximumGroupSize.story = {
name: 'Maximum group size',
};
export const MaximumRecommendedGroupSize = (): JSX.Element => (
export function MaximumRecommendedGroupSize(): JSX.Element {
return (
<AddGroupMemberErrorDialog
{...defaultProps}
mode={AddGroupMemberErrorDialogMode.RecommendedMaximumGroupSize}
recommendedMaximumNumberOfContacts={123}
/>
);
);
}
MaximumRecommendedGroupSize.story = {
name: 'Maximum recommended group size',

8
ts/components/AddGroupMemberErrorDialog.tsx
View file

@ -1,7 +1,7 @@
// Copyright 2021-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { FunctionComponent, ReactNode } from 'react';
import type { ReactNode } from 'react';
import React from 'react';
import type { LocalizerType } from '../types/Util';
@ -28,9 +28,7 @@ type PropsType = {
onClose: () => void;
} & PropsDataType;
export const AddGroupMemberErrorDialog: FunctionComponent<
PropsType
> = props => {
export function AddGroupMemberErrorDialog(props: PropsType): JSX.Element {
const { i18n, onClose } = props;
let title: string;
@ -57,4 +55,4 @@ export const AddGroupMemberErrorDialog: FunctionComponent<
}
return <Alert body={body} i18n={i18n} onClose={onClose} title={title} />;
};
}

1
ts/components/AddUserToAnotherGroupModal.stories.tsx
View file

@ -39,6 +39,7 @@ export default {
},
} as Meta;
// eslint-disable-next-line react/function-component-definition
const Template: Story<Props> = args => (
<AddUserToAnotherGroupModal
{...args}

7
ts/components/AddUserToAnotherGroupModal.tsx
View file

@ -42,7 +42,7 @@ type DispatchProps = {
export type Props = OwnProps & DispatchProps;
export const AddUserToAnotherGroupModal = ({
export function AddUserToAnotherGroupModal({
i18n,
theme,
contact,
@ -51,7 +51,7 @@ export const AddUserToAnotherGroupModal = ({
showToast,
candidateConversations,
regionCode,
}: Props): JSX.Element | null => {
}: Props): JSX.Element | null {
const [searchTerm, setSearchTerm] = React.useState('');
const [filteredConversations, setFilteredConversations] = React.useState(
filterAndSortConversationsByRecent(candidateConversations, '', undefined)
@ -177,7 +177,6 @@ export const AddUserToAnotherGroupModal = ({
onClickArchiveButton={noop}
onClickContactCheckbox={noop}
onSelectConversation={setSelectedGroupId}
renderMessageSearchResult={_ => <></>}
showChooseGroupMembers={noop}
lookupConversationWithoutUuid={async _ => undefined}
showUserNotFoundModal={noop}
@ -223,4 +222,4 @@ export const AddUserToAnotherGroupModal = ({
)}
</>
);
};
}

24
ts/components/Alert.stories.tsx
View file

@ -23,19 +23,22 @@ const defaultProps = {
const LOREM_IPSUM =
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.';
export const TitleAndBodyAreStrings = (): JSX.Element => (
export function TitleAndBodyAreStrings(): JSX.Element {
return (
<Alert
{...defaultProps}
title="Hello world"
body="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus."
/>
);
);
}
TitleAndBodyAreStrings.story = {
name: 'Title and body are strings',
};
export const BodyIsAReactNode = (): JSX.Element => (
export function BodyIsAReactNode(): JSX.Element {
return (
<Alert
{...defaultProps}
title="Hello world"
@ -46,13 +49,15 @@ export const BodyIsAReactNode = (): JSX.Element => (
</>
}
/>
);
);
}
BodyIsAReactNode.story = {
name: 'Body is a ReactNode',
};
export const LongBodyWithoutTitle = (): JSX.Element => (
export function LongBodyWithoutTitle(): JSX.Element {
return (
<Alert
{...defaultProps}
body={
@ -64,13 +69,15 @@ export const LongBodyWithoutTitle = (): JSX.Element => (
</>
}
/>
);
);
}
LongBodyWithoutTitle.story = {
name: 'Long body (without title)',
};
export const LongBodyWithTitle = (): JSX.Element => (
export function LongBodyWithTitle(): JSX.Element {
return (
<Alert
{...defaultProps}
title="Hello world"
@ -83,7 +90,8 @@ export const LongBodyWithTitle = (): JSX.Element => (
</>
}
/>
);
);
}
LongBodyWithTitle.story = {
name: 'Long body (with title)',

10
ts/components/Alert.tsx
View file

@ -1,7 +1,7 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { FunctionComponent, ReactNode } from 'react';
import type { ReactNode } from 'react';
import React from 'react';
import type { LocalizerType } from '../types/Util';
@ -17,13 +17,14 @@ type PropsType = {
title?: string;
};
export const Alert: FunctionComponent<PropsType> = ({
export function Alert({
body,
i18n,
onClose,
theme,
title,
}) => (
}: PropsType): JSX.Element {
return (
<Modal
i18n={i18n}
modalFooter={
@ -36,4 +37,5 @@ export const Alert: FunctionComponent<PropsType> = ({
>
{body}
</Modal>
);
);
}

6
ts/components/AnimatedEmojiGalore.stories.tsx
View file

@ -18,6 +18,6 @@ function getDefaultProps(): PropsType {
};
}
export const Hearts = (): JSX.Element => (
<AnimatedEmojiGalore {...getDefaultProps()} />
);
export function Hearts(): JSX.Element {
return <AnimatedEmojiGalore {...getDefaultProps()} />;
}

6
ts/components/AnimatedEmojiGalore.tsx
View file

@ -34,10 +34,10 @@ function transform(y: number, scale: number, rotate: number): string {
return `translateY(${y}px) scale(${scale}) rotate(${rotate}deg)`;
}
export const AnimatedEmojiGalore = ({
export function AnimatedEmojiGalore({
emoji,
onAnimationEnd,
}: PropsType): JSX.Element => {
}: PropsType): JSX.Element {
const [springs] = useSprings(NUM_EMOJIS, i => ({
...to(i, onAnimationEnd),
from: from(i),
@ -69,4 +69,4 @@ export const AnimatedEmojiGalore = ({
))}
</>
);
};
}

6
ts/components/AnnouncementsOnlyGroupBanner.tsx
View file

@ -15,12 +15,12 @@ type PropsType = {
theme: ThemeType;
};
export const AnnouncementsOnlyGroupBanner = ({
export function AnnouncementsOnlyGroupBanner({
groupAdmins,
i18n,
openConversation,
theme,
}: PropsType): JSX.Element => {
}: PropsType): JSX.Element {
const [isShowingAdmins, setIsShowingAdmins] = useState(false);
return (
@ -64,4 +64,4 @@ export const AnnouncementsOnlyGroupBanner = ({
</div>
</>
);
};
}

6
ts/components/App.tsx
View file

@ -55,7 +55,7 @@ type PropsType = {
viewStory: ViewStoryActionCreatorType;
} & ComponentProps<typeof Inbox>;
export const App = ({
export function App({
appView,
executeMenuAction,
executeMenuRole,
@ -89,7 +89,7 @@ export const App = ({
toast,
toggleStoriesView,
viewStory,
}: PropsType): JSX.Element => {
}: PropsType): JSX.Element {
let contents;
if (appView === AppViewType.Installer) {
@ -183,4 +183,4 @@ export const App = ({
</div>
</TitleBarContainer>
);
};
}

6
ts/components/Avatar.stories.tsx
View file

@ -102,6 +102,7 @@ const sizes = Object.values(AvatarSize).filter(
x => typeof x === 'number'
) as Array<AvatarSize>;
// eslint-disable-next-line react/function-component-definition
const Template: Story<Props> = args => (
<>
{sizes.map(size => (
@ -110,6 +111,7 @@ const Template: Story<Props> = args => (
</>
);
// eslint-disable-next-line react/function-component-definition
const TemplateSingle: Story<Props> = args => (
<Avatar {...args} size={AvatarSize.ONE_HUNDRED_TWELVE} />
);
@ -198,7 +200,7 @@ SearchIcon.args = createProps({
searchResult: true,
});
export const Colors = (): JSX.Element => {
export function Colors(): JSX.Element {
const props = createProps();
return (
@ -208,7 +210,7 @@ export const Colors = (): JSX.Element => {
))}
</>
);
};
}
export const BrokenColor = Template.bind({});
BrokenColor.args = createProps({

14
ts/components/Avatar.tsx
View file

@ -1,13 +1,7 @@
// Copyright 2018-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type {
CSSProperties,
FunctionComponent,
MouseEvent,
ReactChild,
ReactNode,
} from 'react';
import type { CSSProperties, MouseEvent, ReactChild, ReactNode } from 'react';
import React, { useEffect, useState } from 'react';
import classNames from 'classnames';
import { noop } from 'lodash';
@ -98,7 +92,7 @@ const getDefaultBlur = (
): AvatarBlur =>
shouldBlurAvatar(...args) ? AvatarBlur.BlurPicture : AvatarBlur.NoBlur;
export const Avatar: FunctionComponent<Props> = ({
export function Avatar({
acceptedMessageRequest,
avatarPath,
badge,
@ -126,7 +120,7 @@ export const Avatar: FunctionComponent<Props> = ({
sharedGroupNames,
unblurredAvatarPath,
}),
}) => {
}: Props): JSX.Element {
const [imageBroken, setImageBroken] = useState(false);
useEffect(() => {
@ -312,7 +306,7 @@ export const Avatar: FunctionComponent<Props> = ({
{badgeNode}
</div>
);
};
}
// This is only exported for testing.
export function _getBadgeSize(avatarSize: number): undefined | number {

12
ts/components/AvatarColorPicker.stories.tsx
View file

@ -23,14 +23,16 @@ export default {
title: 'Components/AvatarColorPicker',
};
export const Default = (): JSX.Element => (
<AvatarColorPicker {...createProps()} />
);
export function Default(): JSX.Element {
return <AvatarColorPicker {...createProps()} />;
}
export const Selected = (): JSX.Element => (
export function Selected(): JSX.Element {
return (
<AvatarColorPicker
{...createProps({
selectedColor: AvatarColors[7],
})}
/>
);
);
}

6
ts/components/AvatarColorPicker.tsx
View file

@ -13,11 +13,11 @@ export type PropsType = {
selectedColor?: AvatarColorType;
};
export const AvatarColorPicker = ({
export function AvatarColorPicker({
i18n,
onColorSelected,
selectedColor,
}: PropsType): JSX.Element => {
}: PropsType): JSX.Element {
return (
<>
<div className="AvatarEditor__avatar-selector-title">
@ -38,4 +38,4 @@ export const AvatarColorPicker = ({
</div>
</>
);
};
}

23
ts/components/AvatarEditor.stories.tsx
View file

@ -82,28 +82,37 @@ export default {
title: 'Components/AvatarEditor',
};
export const NoAvatarGroup = (): JSX.Element => (
export function NoAvatarGroup(): JSX.Element {
return (
<AvatarEditor
{...createProps({ isGroup: true, userAvatarData: getDefaultAvatars(true) })}
{...createProps({
isGroup: true,
userAvatarData: getDefaultAvatars(true),
})}
/>
);
);
}
NoAvatarGroup.story = {
name: 'No Avatar (group)',
};
export const NoAvatarMe = (): JSX.Element => (
export function NoAvatarMe(): JSX.Element {
return (
<AvatarEditor {...createProps({ userAvatarData: getDefaultAvatars() })} />
);
);
}
NoAvatarMe.story = {
name: 'No Avatar (me)',
};
export const HasAvatar = (): JSX.Element => (
export function HasAvatar(): JSX.Element {
return (
<AvatarEditor
{...createProps({
avatarPath: '/fixtures/kitten-3-64-64.jpg',
})}
/>
);
);
}

6
ts/components/AvatarEditor.tsx
View file

@ -44,7 +44,7 @@ enum EditMode {
Text = 'Text',
}
export const AvatarEditor = ({
export function AvatarEditor({
avatarColor,
avatarPath,
avatarValue,
@ -58,7 +58,7 @@ export const AvatarEditor = ({
userAvatarData,
replaceAvatar,
saveAvatarToDisk,
}: PropsType): JSX.Element => {
}: PropsType): JSX.Element {
const [provisionalSelectedAvatar, setProvisionalSelectedAvatar] = useState<
AvatarDataType | undefined
>();
@ -298,4 +298,4 @@ export const AvatarEditor = ({
}
return <div className="AvatarEditor">{content}</div>;
};
}

12
ts/components/AvatarIconEditor.stories.tsx
View file

@ -25,7 +25,8 @@ export default {
title: 'Components/AvatarIconEditor',
};
export const PersonalIcon = (): JSX.Element => (
export function PersonalIcon(): JSX.Element {
return (
<AvatarIconEditor
{...createProps({
avatarData: createAvatarData({
@ -34,9 +35,11 @@ export const PersonalIcon = (): JSX.Element => (
}),
})}
/>
);
);
}
export const GroupIcon = (): JSX.Element => (
export function GroupIcon(): JSX.Element {
return (
<AvatarIconEditor
{...createProps({
avatarData: createAvatarData({
@ -45,4 +48,5 @@ export const GroupIcon = (): JSX.Element => (
}),
})}
/>
);
);
}

6
ts/components/AvatarIconEditor.tsx
View file

@ -17,11 +17,11 @@ export type PropsType = {
onClose: (avatarData?: AvatarDataType) => unknown;
};
export const AvatarIconEditor = ({
export function AvatarIconEditor({
avatarData: initialAvatarData,
i18n,
onClose,
}: PropsType): JSX.Element => {
}: PropsType): JSX.Element {
const [avatarBuffer, setAvatarBuffer] = useState<Uint8Array | undefined>();
const [avatarData, setAvatarData] =
useState<AvatarDataType>(initialAvatarData);
@ -81,4 +81,4 @@ export const AvatarIconEditor = ({
/>
</>
);
};
}

16
ts/components/AvatarLightbox.stories.tsx
View file

@ -32,15 +32,17 @@ export default {
title: 'Components/AvatarLightbox',
};
export const Group = (): JSX.Element => (
export function Group(): JSX.Element {
return (
<AvatarLightbox
{...createProps({
isGroup: true,
})}
/>
);
);
}
export const Person = (): JSX.Element => {
export function Person(): JSX.Element {
const conversation = getDefaultConversation();
return (
<AvatarLightbox
@ -50,12 +52,14 @@ export const Person = (): JSX.Element => {
})}
/>
);
};
}
export const Photo = (): JSX.Element => (
export function Photo(): JSX.Element {
return (
<AvatarLightbox
{...createProps({
avatarPath: '/fixtures/kitten-1-64-64.jpg',
})}
/>
);
);
}

6
ts/components/AvatarLightbox.tsx
View file

@ -17,14 +17,14 @@ export type PropsType = {
onClose: () => unknown;
};
export const AvatarLightbox = ({
export function AvatarLightbox({
avatarColor,
avatarPath,
conversationTitle,
i18n,
isGroup,
onClose,
}: PropsType): JSX.Element => {
}: PropsType): JSX.Element {
return (
<Lightbox close={onClose} i18n={i18n} media={[]}>
<AvatarPreview
@ -43,4 +43,4 @@ export const AvatarLightbox = ({
/>
</Lightbox>
);
};
}

12
ts/components/AvatarModalButtons.stories.tsx
View file

@ -23,21 +23,23 @@ export default {
title: 'Components/AvatarModalButtons',
};
export const HasChanges = (): JSX.Element => (
export function HasChanges(): JSX.Element {
return (
<AvatarModalButtons
{...createProps({
hasChanges: true,
})}
/>
);
);
}
HasChanges.story = {
name: 'Has changes',
};
export const NoChanges = (): JSX.Element => (
<AvatarModalButtons {...createProps()} />
);
export function NoChanges(): JSX.Element {
return <AvatarModalButtons {...createProps()} />;
}
NoChanges.story = {
name: 'No changes',

6
ts/components/AvatarModalButtons.tsx
View file

@ -15,12 +15,12 @@ export type PropsType = {
onSave: () => unknown;
};
export const AvatarModalButtons = ({
export function AvatarModalButtons({
hasChanges,
i18n,
onCancel,
onSave,
}: PropsType): JSX.Element => {
}: PropsType): JSX.Element {
const [confirmDiscardAction, setConfirmDiscardAction] = useState<
(() => unknown) | undefined
>(undefined);
@ -51,4 +51,4 @@ export const AvatarModalButtons = ({
)}
</Modal.ButtonFooter>
);
};
}

24
ts/components/AvatarPopup.stories.tsx
View file

@ -61,54 +61,54 @@ export default {
title: 'Components/Avatar Popup',
};
export const AvatarOnly = (): JSX.Element => {
export function AvatarOnly(): JSX.Element {
const props = useProps();
return <AvatarPopup {...props} />;
};
}
export const HasBadge = (): JSX.Element => {
export function HasBadge(): JSX.Element {
const props = useProps({
badge: getFakeBadge(),
title: 'Janet Yellen',
});
return <AvatarPopup {...props} />;
};
}
HasBadge.story = {
name: 'Has badge',
};
export const Title = (): JSX.Element => {
export function Title(): JSX.Element {
const props = useProps({
title: 'My Great Title',
});
return <AvatarPopup {...props} />;
};
}
export const ProfileName = (): JSX.Element => {
export function ProfileName(): JSX.Element {
const props = useProps({
profileName: 'Sam Neill',
});
return <AvatarPopup {...props} />;
};
}
export const PhoneNumber = (): JSX.Element => {
export function PhoneNumber(): JSX.Element {
const props = useProps({
profileName: 'Sam Neill',
phoneNumber: '(555) 867-5309',
});
return <AvatarPopup {...props} />;
};
}
export const UpdateAvailable = (): JSX.Element => {
export function UpdateAvailable(): JSX.Element {
const props = useProps({
hasPendingUpdate: true,
});
return <AvatarPopup {...props} />;
};
}

4
ts/components/AvatarPopup.tsx
View file

@ -28,7 +28,7 @@ export type Props = {
name?: string;
} & Omit<AvatarProps, 'onClick'>;
export const AvatarPopup = (props: Props): JSX.Element => {
export function AvatarPopup(props: Props): JSX.Element {
const {
hasPendingUpdate,
i18n,
@ -121,4 +121,4 @@ export const AvatarPopup = (props: Props): JSX.Element => {
)}
</div>
);
};
}

42
ts/components/AvatarPreview.stories.tsx
View file

@ -39,33 +39,38 @@ export default {
title: 'Components/AvatarPreview',
};
export const NoStatePersonal = (): JSX.Element => (
export function NoStatePersonal(): JSX.Element {
return (
<AvatarPreview
{...createProps({
avatarColor: AvatarColors[0],
conversationTitle: 'Just Testing',
})}
/>
);
);
}
NoStatePersonal.story = {
name: 'No state (personal)',
};
export const NoStateGroup = (): JSX.Element => (
export function NoStateGroup(): JSX.Element {
return (
<AvatarPreview
{...createProps({
avatarColor: AvatarColors[1],
isGroup: true,
})}
/>
);
);
}
NoStateGroup.story = {
name: 'No state (group)',
};
export const NoStateGroupUploadMe = (): JSX.Element => (
export function NoStateGroupUploadMe(): JSX.Element {
return (
<AvatarPreview
{...createProps({
avatarColor: AvatarColors[1],
@ -73,51 +78,58 @@ export const NoStateGroupUploadMe = (): JSX.Element => (
isGroup: true,
})}
/>
);
);
}
NoStateGroupUploadMe.story = {
name: 'No state (group) + upload me',
};
export const Value = (): JSX.Element => (
<AvatarPreview {...createProps({ avatarValue: TEST_IMAGE })} />
);
export function Value(): JSX.Element {
return <AvatarPreview {...createProps({ avatarValue: TEST_IMAGE })} />;
}
Value.story = {
name: 'value',
};
export const Path = (): JSX.Element => (
export function Path(): JSX.Element {
return (
<AvatarPreview
{...createProps({ avatarPath: '/fixtures/kitten-3-64-64.jpg' })}
/>
);
);
}
Path.story = {
name: 'path',
};
export const ValuePath = (): JSX.Element => (
export function ValuePath(): JSX.Element {
return (
<AvatarPreview
{...createProps({
avatarPath: '/fixtures/kitten-3-64-64.jpg',
avatarValue: TEST_IMAGE,
})}
/>
);
);
}
ValuePath.story = {
name: 'value & path',
};
export const Style = (): JSX.Element => (
export function Style(): JSX.Element {
return (
<AvatarPreview
{...createProps({
avatarValue: TEST_IMAGE,
style: { height: 100, width: 100 },
})}
/>
);
);
}
Style.story = {
name: 'style',

6
ts/components/AvatarPreview.tsx
View file

@ -33,7 +33,7 @@ enum ImageStatus {
HasImage = 'has-image',
}
export const AvatarPreview = ({
export function AvatarPreview({
avatarColor = AvatarColors[0],
avatarPath,
avatarValue,
@ -45,7 +45,7 @@ export const AvatarPreview = ({
onClear,
onClick,
style = {},
}: PropsType): JSX.Element => {
}: PropsType): JSX.Element {
const [avatarPreview, setAvatarPreview] = useState<Uint8Array | undefined>();
// Loads the initial avatarPath if one is provided, but only if we're in editable mode.
@ -199,4 +199,4 @@ export const AvatarPreview = ({
</div>
</div>
);
};
}

8
ts/components/AvatarSpacer.tsx
View file

@ -5,8 +5,8 @@ import type { ReactElement } from 'react';
import React from 'react';
import type { AvatarSize } from './Avatar';
export const AvatarSpacer = ({
export function AvatarSpacer({
size,
}: Readonly<{ size: AvatarSize }>): ReactElement => (
<div style={{ minWidth: size, height: size, width: size }} />
);
}: Readonly<{ size: AvatarSize }>): ReactElement {
return <div style={{ minWidth: size, height: size, width: size }} />;
}

16
ts/components/AvatarTextEditor.stories.tsx
View file

@ -24,9 +24,12 @@ export default {
title: 'Components/AvatarTextEditor',
};
export const Empty = (): JSX.Element => <AvatarTextEditor {...createProps()} />;
export function Empty(): JSX.Element {
return <AvatarTextEditor {...createProps()} />;
}
export const WithData = (): JSX.Element => (
export function WithData(): JSX.Element {
return (
<AvatarTextEditor
{...createProps({
avatarData: {
@ -36,13 +39,15 @@ export const WithData = (): JSX.Element => (
},
})}
/>
);
);
}
WithData.story = {
name: 'with Data',
};
export const WithWideCharacters = (): JSX.Element => (
export function WithWideCharacters(): JSX.Element {
return (
<AvatarTextEditor
{...createProps({
avatarData: {
@ -52,7 +57,8 @@ export const WithWideCharacters = (): JSX.Element => (
},
})}
/>
);
);
}
WithWideCharacters.story = {
name: 'with wide characters',

6
ts/components/AvatarTextEditor.tsx
View file

@ -40,12 +40,12 @@ export type PropsType = {
const BUBBLE_SIZE = 120;
const MAX_LENGTH = 3;
export const AvatarTextEditor = ({
export function AvatarTextEditor({
avatarData,
i18n,
onCancel,
onDone,
}: PropsType): JSX.Element => {
}: PropsType): JSX.Element {
const initialText = useMemo(() => avatarData?.text || '', [avatarData]);
const initialColor = useMemo(
() => avatarData?.color || AvatarColors[0],
@ -194,4 +194,4 @@ export const AvatarTextEditor = ({
</div>
</>
);
};
}

6
ts/components/AvatarUploadButton.stories.tsx
View file

@ -22,6 +22,6 @@ export default {
title: 'Components/AvatarUploadButton',
};
export const Default = (): JSX.Element => (
<AvatarUploadButton {...createProps()} />
);
export function Default(): JSX.Element {
return <AvatarUploadButton {...createProps()} />;
}

6
ts/components/AvatarUploadButton.tsx
View file

@ -14,11 +14,11 @@ export type PropsType = {
onChange: (avatar: Uint8Array) => unknown;
};
export const AvatarUploadButton = ({
export function AvatarUploadButton({
className,
i18n,
onChange,
}: PropsType): JSX.Element => {
}: PropsType): JSX.Element {
const fileInputRef = useRef<null | HTMLInputElement>(null);
const [processingFile, setProcessingFile] = useState<File | undefined>();
@ -84,4 +84,4 @@ export const AvatarUploadButton = ({
/>
</>
);
};
}

4
ts/components/BackboneHost.tsx
View file

@ -9,7 +9,7 @@ type PropsType = {
className?: string;
};
export const BackboneHost = ({ View, className }: PropsType): JSX.Element => {
export function BackboneHost({ View, className }: PropsType): JSX.Element {
const hostRef = useRef<HTMLDivElement | null>(null);
const viewRef = useRef<Backbone.View | undefined>(undefined);
@ -35,4 +35,4 @@ export const BackboneHost = ({ View, className }: PropsType): JSX.Element => {
<div className={className} ref={hostRef} />
</div>
);
};
}

12
ts/components/BadgeDescription.stories.tsx
View file

@ -9,24 +9,28 @@ export default {
title: 'Components/BadgeDescription',
};
export const NormalName = (): JSX.Element => (
export function NormalName(): JSX.Element {
return (
<BadgeDescription
template="{short_name} is here! Hello, {short_name}! {short_name}, I think you're great. This is not replaced: {not_replaced}"
firstName="Alice"
title="Should not be seen"
/>
);
);
}
NormalName.story = {
name: 'Normal name',
};
export const NameWithRtlOverrides = (): JSX.Element => (
export function NameWithRtlOverrides(): JSX.Element {
return (
<BadgeDescription
template="Hello, {short_name}! {short_name}, I think you're great."
title={'Flip-\u202eflop'}
/>
);
);
}
NameWithRtlOverrides.story = {
name: 'Name with RTL overrides',

54
ts/components/BadgeDialog.stories.tsx
View file

@ -27,23 +27,24 @@ const defaultProps: ComponentProps<typeof BadgeDialog> = {
title: 'Alice Levine',
};
export const NoBadgesClosedImmediately = (): JSX.Element => (
<BadgeDialog {...defaultProps} badges={[]} />
);
export function NoBadgesClosedImmediately(): JSX.Element {
return <BadgeDialog {...defaultProps} badges={[]} />;
}
NoBadgesClosedImmediately.story = {
name: 'No badges (closed immediately)',
};
export const OneBadge = (): JSX.Element => (
<BadgeDialog {...defaultProps} badges={getFakeBadges(1)} />
);
export function OneBadge(): JSX.Element {
return <BadgeDialog {...defaultProps} badges={getFakeBadges(1)} />;
}
OneBadge.story = {
name: 'One badge',
};
export const BadgeWithNoImageShouldBeImpossible = (): JSX.Element => (
export function BadgeWithNoImageShouldBeImpossible(): JSX.Element {
return (
<BadgeDialog
{...defaultProps}
badges={[
@ -53,13 +54,15 @@ export const BadgeWithNoImageShouldBeImpossible = (): JSX.Element => (
},
]}
/>
);
);
}
BadgeWithNoImageShouldBeImpossible.story = {
name: 'Badge with no image (should be impossible)',
};
export const BadgeWithPendingImage = (): JSX.Element => (
export function BadgeWithPendingImage(): JSX.Element {
return (
<BadgeDialog
{...defaultProps}
badges={[
@ -74,13 +77,15 @@ export const BadgeWithPendingImage = (): JSX.Element => (
},
]}
/>
);
);
}
BadgeWithPendingImage.story = {
name: 'Badge with pending image',
};
export const BadgeWithOnlyOneLowDetailImage = (): JSX.Element => (
export function BadgeWithOnlyOneLowDetailImage(): JSX.Element {
return (
<BadgeDialog
{...defaultProps}
badges={[
@ -104,31 +109,38 @@ export const BadgeWithOnlyOneLowDetailImage = (): JSX.Element => (
},
]}
/>
);
);
}
BadgeWithOnlyOneLowDetailImage.story = {
name: 'Badge with only one, low-detail image',
};
export const FiveBadges = (): JSX.Element => (
<BadgeDialog {...defaultProps} badges={getFakeBadges(5)} />
);
export function FiveBadges(): JSX.Element {
return <BadgeDialog {...defaultProps} badges={getFakeBadges(5)} />;
}
FiveBadges.story = {
name: 'Five badges',
};
export const ManyBadges = (): JSX.Element => (
<BadgeDialog {...defaultProps} badges={getFakeBadges(50)} />
);
export function ManyBadges(): JSX.Element {
return <BadgeDialog {...defaultProps} badges={getFakeBadges(50)} />;
}
ManyBadges.story = {
name: 'Many badges',
};
export const ManyBadgesUserIsASubscriber = (): JSX.Element => (
<BadgeDialog {...defaultProps} areWeASubscriber badges={getFakeBadges(50)} />
);
export function ManyBadgesUserIsASubscriber(): JSX.Element {
return (
<BadgeDialog
{...defaultProps}
areWeASubscriber
badges={getFakeBadges(50)}
/>
);
}
ManyBadgesUserIsASubscriber.story = {
name: 'Many badges, user is a subscriber',

18
ts/components/BetterAvatar.stories.tsx
View file

@ -30,7 +30,8 @@ export default {
title: 'Components/BetterAvatar',
};
export const Text = (): JSX.Element => (
export function Text(): JSX.Element {
return (
<BetterAvatar
{...createProps({
avatarData: createAvatarData({
@ -39,9 +40,11 @@ export const Text = (): JSX.Element => (
}),
})}
/>
);
);
}
export const PersonalIcon = (): JSX.Element => (
export function PersonalIcon(): JSX.Element {
return (
<BetterAvatar
{...createProps({
avatarData: createAvatarData({
@ -50,9 +53,11 @@ export const PersonalIcon = (): JSX.Element => (
}),
})}
/>
);
);
}
export const GroupIcon = (): JSX.Element => (
export function GroupIcon(): JSX.Element {
return (
<BetterAvatar
{...createProps({
avatarData: createAvatarData({
@ -61,4 +66,5 @@ export const GroupIcon = (): JSX.Element => (
}),
})}
/>
);
);
}

6
ts/components/BetterAvatar.tsx
View file

@ -21,14 +21,14 @@ export type PropsType = {
size?: AvatarSize;
};
export const BetterAvatar = ({
export function BetterAvatar({
avatarData,
i18n,
isSelected,
onClick,
onDelete,
size = 48,
}: PropsType): JSX.Element => {
}: PropsType): JSX.Element {
const [avatarBuffer, setAvatarBuffer] = useState<Uint8Array | undefined>(
avatarData.buffer
);
@ -115,4 +115,4 @@ export const BetterAvatar = ({
)}
</BetterAvatarBubble>
);
};
}

18
ts/components/BetterAvatarBubble.stories.tsx
View file

@ -27,25 +27,30 @@ export default {
title: 'Components/BetterAvatarBubble',
};
export const Children = (): JSX.Element => (
export function Children(): JSX.Element {
return (
<BetterAvatarBubble
{...createProps({
children: <div>HI</div>,
color: AvatarColors[8],
})}
/>
);
);
}
export const Selected = (): JSX.Element => (
export function Selected(): JSX.Element {
return (
<BetterAvatarBubble
{...createProps({
color: AvatarColors[1],
isSelected: true,
})}
/>
);
);
}
export const Style = (): JSX.Element => (
export function Style(): JSX.Element {
return (
<BetterAvatarBubble
{...createProps({
style: {
@ -55,4 +60,5 @@ export const Style = (): JSX.Element => (
color: AvatarColors[2],
})}
/>
);
);
}

6
ts/components/BetterAvatarBubble.tsx
View file

@ -18,7 +18,7 @@ export type PropsType = {
style?: CSSProperties;
};
export const BetterAvatarBubble = ({
export function BetterAvatarBubble({
children,
color,
i18n,
@ -26,7 +26,7 @@ export const BetterAvatarBubble = ({
onDelete,
onSelect,
style,
}: PropsType): JSX.Element => {
}: PropsType): JSX.Element {
return (
<div
className={classNames(
@ -58,4 +58,4 @@ export const BetterAvatarBubble = ({
{children}
</div>
);
};
}

24
ts/components/Button.stories.tsx
View file

@ -10,14 +10,19 @@ export default {
title: 'Components/Button',
};
export const KitchenSink = (): JSX.Element => (
export function KitchenSink(): JSX.Element {
return (
<>
{Object.values(ButtonVariant).map(variant => (
<React.Fragment key={variant}>
{[ButtonSize.Large, ButtonSize.Medium, ButtonSize.Small].map(size => (
<React.Fragment key={size}>
<p>
<Button onClick={action('onClick')} size={size} variant={variant}>
<Button
onClick={action('onClick')}
size={size}
variant={variant}
>
{variant}
</Button>
</p>
@ -36,29 +41,34 @@ export const KitchenSink = (): JSX.Element => (
</React.Fragment>
))}
</>
);
);
}
KitchenSink.story = {
name: 'Kitchen sink',
};
export const AriaLabel = (): JSX.Element => (
export function AriaLabel(): JSX.Element {
return (
<Button
aria-label="hello"
className="module-ForwardMessageModal__header--back"
onClick={action('onClick')}
/>
);
);
}
AriaLabel.story = {
name: 'aria-label',
};
export const CustomStyles = (): JSX.Element => (
export function CustomStyles(): JSX.Element {
return (
<Button onClick={action('onClick')} style={{ transform: 'rotate(5deg)' }}>
Hello world
</Button>
);
);
}
CustomStyles.story = {
name: 'Custom styles',

2
ts/components/Button.tsx
View file

@ -100,7 +100,7 @@ const VARIANT_CLASS_NAMES = new Map<ButtonVariant, string>([
]);
export const Button = React.forwardRef<HTMLButtonElement, PropsType>(
(props, ref) => {
function ButtonInner(props, ref) {
const {
children,
className,

6
ts/components/CallBackgroundBlur.tsx
View file

@ -12,12 +12,12 @@ export type PropsType = {
color?: AvatarColorType;
};
export const CallBackgroundBlur = ({
export function CallBackgroundBlur({
avatarPath,
children,
className,
color,
}: PropsType): JSX.Element => {
}: PropsType): JSX.Element {
return (
<div
className={classNames(
@ -39,4 +39,4 @@ export const CallBackgroundBlur = ({
{children}
</div>
);
};
}

40
ts/components/CallManager.stories.tsx
View file

@ -121,9 +121,12 @@ export default {
title: 'Components/CallManager',
};
export const NoCall = (): JSX.Element => <CallManager {...createProps()} />;
export function NoCall(): JSX.Element {
return <CallManager {...createProps()} />;
}
export const OngoingDirectCall = (): JSX.Element => (
export function OngoingDirectCall(): JSX.Element {
return (
<CallManager
{...createProps({
activeCall: {
@ -137,9 +140,11 @@ export const OngoingDirectCall = (): JSX.Element => (
},
})}
/>
);
);
}
export const OngoingGroupCall = (): JSX.Element => (
export function OngoingGroupCall(): JSX.Element {
return (
<CallManager
{...createProps({
activeCall: {
@ -158,9 +163,11 @@ export const OngoingGroupCall = (): JSX.Element => (
},
})}
/>
);
);
}
export const RingingDirectCall = (): JSX.Element => (
export function RingingDirectCall(): JSX.Element {
return (
<CallManager
{...createProps({
incomingCall: {
@ -170,13 +177,15 @@ export const RingingDirectCall = (): JSX.Element => (
},
})}
/>
);
);
}
RingingDirectCall.story = {
name: 'Ringing (direct call)',
};
export const RingingGroupCall = (): JSX.Element => (
export function RingingGroupCall(): JSX.Element {
return (
<CallManager
{...createProps({
incomingCall: {
@ -194,13 +203,15 @@ export const RingingGroupCall = (): JSX.Element => (
},
})}
/>
);
);
}
RingingGroupCall.story = {
name: 'Ringing (group call)',
};
export const CallRequestNeeded = (): JSX.Element => (
export function CallRequestNeeded(): JSX.Element {
return (
<CallManager
{...createProps({
activeCall: {
@ -215,9 +226,11 @@ export const CallRequestNeeded = (): JSX.Element => (
},
})}
/>
);
);
}
export const GroupCallSafetyNumberChanged = (): JSX.Element => (
export function GroupCallSafetyNumberChanged(): JSX.Element {
return (
<CallManager
{...createProps({
activeCall: {
@ -242,7 +255,8 @@ export const GroupCallSafetyNumberChanged = (): JSX.Element => (
},
})}
/>
);
);
}
GroupCallSafetyNumberChanged.story = {
name: 'Group call - Safety Number Changed',

10
ts/components/CallManager.tsx
View file

@ -105,7 +105,7 @@ type ActiveCallManagerPropsType = PropsType & {
activeCall: ActiveCallType;
};
const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
function ActiveCallManager({
activeCall,
availableCameras,
cancelCall,
@ -137,7 +137,7 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
toggleScreenRecordingPermissionsDialog,
toggleSettings,
toggleSpeakerView,
}) => {
}: ActiveCallManagerPropsType): JSX.Element {
const {
conversation,
hasLocalAudio,
@ -374,9 +374,9 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
) : null}
</>
);
};
}
export const CallManager: React.FC<PropsType> = props => {
export function CallManager(props: PropsType): JSX.Element | null {
const {
acceptCall,
activeCall,
@ -449,7 +449,7 @@ export const CallManager: React.FC<PropsType> = props => {
}
return null;
};
}
function getShouldRing({
activeCall,

6
ts/components/CallNeedPermissionScreen.tsx
View file

@ -29,11 +29,11 @@ type Props = {
const AUTO_CLOSE_MS = 10000;
export const CallNeedPermissionScreen: React.FC<Props> = ({
export function CallNeedPermissionScreen({
conversation,
i18n,
close,
}) => {
}: Props): JSX.Element {
const title = conversation.title || i18n('unknownContact');
const autoCloseAtRef = useRef<number>(Date.now() + AUTO_CLOSE_MS);
@ -79,4 +79,4 @@ export const CallNeedPermissionScreen: React.FC<Props> = ({
</button>
</div>
);
};
}

53
ts/components/CallScreen.stories.tsx
View file

@ -189,11 +189,11 @@ export default {
title: 'Components/CallScreen',
};
export const Default = (): JSX.Element => {
export function Default(): JSX.Element {
return <CallScreen {...createProps()} />;
};
}
export const PreRing = (): JSX.Element => {
export function PreRing(): JSX.Element {
return (
<CallScreen
{...createProps({
@ -202,7 +202,7 @@ export const PreRing = (): JSX.Element => {
})}
/>
);
};
}
PreRing.story = {
name: 'Pre-Ring',
@ -241,7 +241,7 @@ export const _Ended = (): JSX.Element => {
);
};
export const HasLocalAudio = (): JSX.Element => {
export function HasLocalAudio(): JSX.Element {
return (
<CallScreen
{...createProps({
@ -250,13 +250,13 @@ export const HasLocalAudio = (): JSX.Element => {
})}
/>
);
};
}
HasLocalAudio.story = {
name: 'hasLocalAudio',
};
export const HasLocalVideo = (): JSX.Element => {
export function HasLocalVideo(): JSX.Element {
return (
<CallScreen
{...createProps({
@ -265,13 +265,13 @@ export const HasLocalVideo = (): JSX.Element => {
})}
/>
);
};
}
HasLocalVideo.story = {
name: 'hasLocalVideo',
};
export const HasRemoteVideo = (): JSX.Element => {
export function HasRemoteVideo(): JSX.Element {
return (
<CallScreen
{...createProps({
@ -280,13 +280,14 @@ export const HasRemoteVideo = (): JSX.Element => {
})}
/>
);
};
}
HasRemoteVideo.story = {
name: 'hasRemoteVideo',
};
export const GroupCall1 = (): JSX.Element => (
export function GroupCall1(): JSX.Element {
return (
<CallScreen
{...createProps({
callMode: CallMode.Group,
@ -307,7 +308,8 @@ export const GroupCall1 = (): JSX.Element => (
],
})}
/>
);
);
}
GroupCall1.story = {
name: 'Group call - 1',
@ -327,7 +329,7 @@ const allRemoteParticipants = times(MAX_PARTICIPANTS).map(index => ({
}),
}));
export const GroupCallMany = (): JSX.Element => {
export function GroupCallMany(): JSX.Element {
return (
<CallScreen
{...createProps({
@ -344,13 +346,14 @@ export const GroupCallMany = (): JSX.Element => {
})}
/>
);
};
}
GroupCallMany.story = {
name: 'Group call - Many',
};
export const GroupCallReconnecting = (): JSX.Element => (
export function GroupCallReconnecting(): JSX.Element {
return (
<CallScreen
{...createProps({
callMode: CallMode.Group,
@ -372,26 +375,30 @@ export const GroupCallReconnecting = (): JSX.Element => (
],
})}
/>
);
);
}
GroupCallReconnecting.story = {
name: 'Group call - reconnecting',
};
export const GroupCall0 = (): JSX.Element => (
export function GroupCall0(): JSX.Element {
return (
<CallScreen
{...createProps({
callMode: CallMode.Group,
remoteParticipants: [],
})}
/>
);
);
}
GroupCall0.story = {
name: 'Group call - 0',
};
export const GroupCallSomeoneIsSharingScreen = (): JSX.Element => (
export function GroupCallSomeoneIsSharingScreen(): JSX.Element {
return (
<CallScreen
{...createProps({
callMode: CallMode.Group,
@ -404,14 +411,15 @@ export const GroupCallSomeoneIsSharingScreen = (): JSX.Element => (
})),
})}
/>
);
);
}
GroupCallSomeoneIsSharingScreen.story = {
name: 'Group call - someone is sharing screen',
};
export const GroupCallSomeoneIsSharingScreenAndYoureReconnecting =
(): JSX.Element => (
export function GroupCallSomeoneIsSharingScreenAndYoureReconnecting(): JSX.Element {
return (
<CallScreen
{...createProps({
callMode: CallMode.Group,
@ -426,6 +434,7 @@ export const GroupCallSomeoneIsSharingScreenAndYoureReconnecting =
})}
/>
);
}
GroupCallSomeoneIsSharingScreenAndYoureReconnecting.story = {
name: "Group call - someone is sharing screen and you're reconnecting",

6
ts/components/CallScreen.tsx
View file

@ -119,7 +119,7 @@ function DirectCallHeaderMessage({
return null;
}
export const CallScreen: React.FC<PropsType> = ({
export function CallScreen({
activeCall,
getGroupCallVideoFrameSource,
getPresentingSources,
@ -143,7 +143,7 @@ export const CallScreen: React.FC<PropsType> = ({
toggleScreenRecordingPermissionsDialog,
toggleSettings,
toggleSpeakerView,
}) => {
}: PropsType): JSX.Element {
const {
conversation,
hasLocalAudio,
@ -539,7 +539,7 @@ export const CallScreen: React.FC<PropsType> = ({
</div>
</div>
);
};
}
function getCallModeClassSuffix(
callMode: CallMode.Direct | CallMode.Group

8
ts/components/CallingAudioIndicator.stories.tsx
View file

@ -11,7 +11,7 @@ export default {
title: 'Components/CallingAudioIndicator',
};
export const Extreme = (): JSX.Element => {
export function Extreme(): JSX.Element {
const [audioLevel, setAudioLevel] = useState(1);
useEffect(() => {
@ -30,9 +30,9 @@ export const Extreme = (): JSX.Element => {
audioLevel={audioLevel}
/>
);
};
}
export const Random = (): JSX.Element => {
export function Random(): JSX.Element {
const [audioLevel, setAudioLevel] = useState(1);
useEffect(() => {
@ -51,4 +51,4 @@ export const Random = (): JSX.Element => {
audioLevel={audioLevel}
/>
);
};
}

40
ts/components/CallingButton.stories.tsx
View file

@ -32,7 +32,7 @@ export default {
title: 'Components/CallingButton',
};
export const KitchenSink = (): JSX.Element => {
export function KitchenSink(): JSX.Element {
return (
<>
{Object.keys(CallingButtonType).map(buttonType => (
@ -43,71 +43,71 @@ export const KitchenSink = (): JSX.Element => {
))}
</>
);
};
}
export const AudioOn = (): JSX.Element => {
export function AudioOn(): JSX.Element {
const props = createProps({
buttonType: CallingButtonType.AUDIO_ON,
});
return <CallingButton {...props} />;
};
}
export const AudioOff = (): JSX.Element => {
export function AudioOff(): JSX.Element {
const props = createProps({
buttonType: CallingButtonType.AUDIO_OFF,
});
return <CallingButton {...props} />;
};
}
export const AudioDisabled = (): JSX.Element => {
export function AudioDisabled(): JSX.Element {
const props = createProps({
buttonType: CallingButtonType.AUDIO_DISABLED,
});
return <CallingButton {...props} />;
};
}
export const VideoOn = (): JSX.Element => {
export function VideoOn(): JSX.Element {
const props = createProps({
buttonType: CallingButtonType.VIDEO_ON,
});
return <CallingButton {...props} />;
};
}
export const VideoOff = (): JSX.Element => {
export function VideoOff(): JSX.Element {
const props = createProps({
buttonType: CallingButtonType.VIDEO_OFF,
});
return <CallingButton {...props} />;
};
}
export const VideoDisabled = (): JSX.Element => {
export function VideoDisabled(): JSX.Element {
const props = createProps({
buttonType: CallingButtonType.VIDEO_DISABLED,
});
return <CallingButton {...props} />;
};
}
export const TooltipRight = (): JSX.Element => {
export function TooltipRight(): JSX.Element {
const props = createProps({
tooltipDirection: TooltipPlacement.Right,
});
return <CallingButton {...props} />;
};
}
TooltipRight.story = {
name: 'Tooltip right',
};
export const PresentingOn = (): JSX.Element => {
export function PresentingOn(): JSX.Element {
const props = createProps({
buttonType: CallingButtonType.PRESENTING_ON,
});
return <CallingButton {...props} />;
};
}
export const PresentingOff = (): JSX.Element => {
export function PresentingOff(): JSX.Element {
const props = createProps({
buttonType: CallingButtonType.PRESENTING_OFF,
});
return <CallingButton {...props} />;
};
}

6
ts/components/CallingButton.tsx
View file

@ -35,7 +35,7 @@ export type PropsType = {
tooltipDirection?: TooltipPlacement;
};
export const CallingButton = ({
export function CallingButton({
buttonType,
i18n,
isVisible = true,
@ -43,7 +43,7 @@ export const CallingButton = ({
onMouseEnter,
onMouseLeave,
tooltipDirection,
}: PropsType): JSX.Element => {
}: PropsType): JSX.Element {
const uniqueButtonId = useMemo(() => uuid(), []);
let classNameSuffix = '';
@ -145,4 +145,4 @@ export const CallingButton = ({
</div>
</Tooltip>
);
};
}

16
ts/components/CallingDeviceSelection.stories.tsx
View file

@ -41,11 +41,11 @@ export default {
title: 'Components/CallingDeviceSelection',
};
export const Default = (): JSX.Element => {
export function Default(): JSX.Element {
return <CallingDeviceSelection {...createProps()} />;
};
}
export const SomeDevices = (): JSX.Element => {
export function SomeDevices(): JSX.Element {
const availableSpeakers = [
{
name: 'Default',
@ -72,9 +72,9 @@ export const SomeDevices = (): JSX.Element => {
});
return <CallingDeviceSelection {...props} />;
};
}
export const DefaultDevices = (): JSX.Element => {
export function DefaultDevices(): JSX.Element {
const availableSpeakers = [
{
name: 'default (Headphones)',
@ -103,9 +103,9 @@ export const DefaultDevices = (): JSX.Element => {
});
return <CallingDeviceSelection {...props} />;
};
}
export const AllDevices = (): JSX.Element => {
export function AllDevices(): JSX.Element {
const availableSpeakers = [
{
name: 'Default',
@ -179,4 +179,4 @@ export const AllDevices = (): JSX.Element => {
});
return <CallingDeviceSelection {...props} />;
};
}

6
ts/components/CallingDeviceSelection.tsx
View file

@ -116,7 +116,7 @@ function createCameraChangeHandler(
};
}
export const CallingDeviceSelection = ({
export function CallingDeviceSelection({
availableCameras,
availableMicrophones,
availableSpeakers,
@ -126,7 +126,7 @@ export const CallingDeviceSelection = ({
selectedMicrophone,
selectedSpeaker,
toggleSettings,
}: Props): JSX.Element => {
}: Props): JSX.Element {
const selectedMicrophoneIndex = selectedMicrophone
? selectedMicrophone.index
: undefined;
@ -212,4 +212,4 @@ export const CallingDeviceSelection = ({
</div>
</Modal>
);
};
}

34
ts/components/CallingHeader.stories.tsx
View file

@ -34,31 +34,38 @@ export default {
title: 'Components/CallingHeader',
};
export const Default = (): JSX.Element => <CallingHeader {...createProps()} />;
export function Default(): JSX.Element {
return <CallingHeader {...createProps()} />;
}
export const LobbyStyle = (): JSX.Element => (
export function LobbyStyle(): JSX.Element {
return (
<CallingHeader
{...createProps()}
title={undefined}
togglePip={undefined}
onCancel={action('onClose')}
/>
);
);
}
LobbyStyle.story = {
name: 'Lobby style',
};
export const WithParticipants = (): JSX.Element => (
export function WithParticipants(): JSX.Element {
return (
<CallingHeader
{...createProps({
isGroupCall: true,
participantCount: 10,
})}
/>
);
);
}
export const WithParticipantsShown = (): JSX.Element => (
export function WithParticipantsShown(): JSX.Element {
return (
<CallingHeader
{...createProps({
isGroupCall: true,
@ -66,29 +73,34 @@ export const WithParticipantsShown = (): JSX.Element => (
showParticipantsList: true,
})}
/>
);
);
}
WithParticipantsShown.story = {
name: 'With Participants (shown)',
};
export const LongTitle = (): JSX.Element => (
export function LongTitle(): JSX.Element {
return (
<CallingHeader
{...createProps({
title:
'What do I got to, what do I got to do to wake you up? To shake you up, to break the structure up?',
})}
/>
);
);
}
export const TitleWithMessage = (): JSX.Element => (
export function TitleWithMessage(): JSX.Element {
return (
<CallingHeader
{...createProps({
title: 'Hello world',
message: 'Goodbye earth',
})}
/>
);
);
}
TitleWithMessage.story = {
name: 'Title with message',

19
ts/components/CallingHeader.tsx
View file

@ -23,7 +23,7 @@ export type PropsType = {
toggleSpeakerView?: () => void;
};
export const CallingHeader = ({
export function CallingHeader({
i18n,
isInSpeakerView,
isGroupCall = false,
@ -36,7 +36,8 @@ export const CallingHeader = ({
togglePip,
toggleSettings,
toggleSpeakerView,
}: PropsType): JSX.Element => (
}: PropsType): JSX.Element {
return (
<div className="module-calling__header">
{title ? (
<div className="module-calling__header--header-name">{title}</div>
@ -48,16 +49,21 @@ export const CallingHeader = ({
{isGroupCall && participantCount ? (
<div className="module-calling-tools__button">
<Tooltip
content={i18n('calling__participants', [String(participantCount)])}
content={i18n('calling__participants', [
String(participantCount),
])}
theme={Theme.Dark}
>
<button
aria-label={i18n('calling__participants', [
String(participantCount),
])}
className={classNames('CallingButton__participants--container', {
className={classNames(
'CallingButton__participants--container',
{
'CallingButton__participants--shown': showParticipantsList,
})}
}
)}
onClick={toggleParticipants}
type="button"
>
@ -135,4 +141,5 @@ export const CallingHeader = ({
)}
</div>
</div>
);
);
}

48
ts/components/CallingLobby.stories.tsx
View file

@ -94,23 +94,23 @@ export default {
title: 'Components/CallingLobby',
};
export const Default = (): JSX.Element => {
export function Default(): JSX.Element {
const props = createProps();
return <CallingLobby {...props} />;
};
}
export const NoCameraNoAvatar = (): JSX.Element => {
export function NoCameraNoAvatar(): JSX.Element {
const props = createProps({
availableCameras: [],
});
return <CallingLobby {...props} />;
};
}
NoCameraNoAvatar.story = {
name: 'No Camera, no avatar',
};
export const NoCameraLocalAvatar = (): JSX.Element => {
export function NoCameraLocalAvatar(): JSX.Element {
const props = createProps({
availableCameras: [],
me: getDefaultConversation({
@ -121,52 +121,52 @@ export const NoCameraLocalAvatar = (): JSX.Element => {
}),
});
return <CallingLobby {...props} />;
};
}
NoCameraLocalAvatar.story = {
name: 'No Camera, local avatar',
};
export const LocalVideo = (): JSX.Element => {
export function LocalVideo(): JSX.Element {
const props = createProps({
hasLocalVideo: true,
});
return <CallingLobby {...props} />;
};
}
export const InitiallyMuted = (): JSX.Element => {
export function InitiallyMuted(): JSX.Element {
const props = createProps({
hasLocalAudio: false,
});
return <CallingLobby {...props} />;
};
}
InitiallyMuted.story = {
name: 'Initially muted',
};
export const GroupCall0PeekedParticipants = (): JSX.Element => {
export function GroupCall0PeekedParticipants(): JSX.Element {
const props = createProps({ isGroupCall: true, peekedParticipants: [] });
return <CallingLobby {...props} />;
};
}
GroupCall0PeekedParticipants.story = {
name: 'Group Call - 0 peeked participants',
};
export const GroupCall1PeekedParticipant = (): JSX.Element => {
export function GroupCall1PeekedParticipant(): JSX.Element {
const props = createProps({
isGroupCall: true,
peekedParticipants: [{ title: 'Sam' }].map(fakePeekedParticipant),
});
return <CallingLobby {...props} />;
};
}
GroupCall1PeekedParticipant.story = {
name: 'Group Call - 1 peeked participant',
};
export const GroupCall1PeekedParticipantSelf = (): JSX.Element => {
export function GroupCall1PeekedParticipantSelf(): JSX.Element {
const uuid = UUID.generate().toString();
const props = createProps({
isGroupCall: true,
@ -177,13 +177,13 @@ export const GroupCall1PeekedParticipantSelf = (): JSX.Element => {
peekedParticipants: [fakePeekedParticipant({ title: 'Ash', uuid })],
});
return <CallingLobby {...props} />;
};
}
GroupCall1PeekedParticipantSelf.story = {
name: 'Group Call - 1 peeked participant (self)',
};
export const GroupCall4PeekedParticipants = (): JSX.Element => {
export function GroupCall4PeekedParticipants(): JSX.Element {
const props = createProps({
isGroupCall: true,
peekedParticipants: ['Sam', 'Cayce', 'April', 'Logan', 'Carl'].map(title =>
@ -191,13 +191,13 @@ export const GroupCall4PeekedParticipants = (): JSX.Element => {
),
});
return <CallingLobby {...props} />;
};
}
GroupCall4PeekedParticipants.story = {
name: 'Group Call - 4 peeked participants',
};
export const GroupCall4PeekedParticipantsParticipantsList = (): JSX.Element => {
export function GroupCall4PeekedParticipantsParticipantsList(): JSX.Element {
const props = createProps({
isGroupCall: true,
peekedParticipants: ['Sam', 'Cayce', 'April', 'Logan', 'Carl'].map(title =>
@ -206,13 +206,13 @@ export const GroupCall4PeekedParticipantsParticipantsList = (): JSX.Element => {
showParticipantsList: true,
});
return <CallingLobby {...props} />;
};
}
GroupCall4PeekedParticipantsParticipantsList.story = {
name: 'Group Call - 4 peeked participants (participants list)',
};
export const GroupCallCallFull = (): JSX.Element => {
export function GroupCallCallFull(): JSX.Element {
const props = createProps({
isGroupCall: true,
isCallFull: true,
@ -221,19 +221,19 @@ export const GroupCallCallFull = (): JSX.Element => {
),
});
return <CallingLobby {...props} />;
};
}
GroupCallCallFull.story = {
name: 'Group Call - call full',
};
export const GroupCall0PeekedParticipantsBigGroup = (): JSX.Element => {
export function GroupCall0PeekedParticipantsBigGroup(): JSX.Element {
const props = createProps({
isGroupCall: true,
groupMembers: times(100, () => getDefaultConversation()),
});
return <CallingLobby {...props} />;
};
}
GroupCall0PeekedParticipantsBigGroup.story = {
name: 'Group Call - 0 peeked participants, big group',

6
ts/components/CallingLobby.tsx
View file

@ -63,7 +63,7 @@ export type PropsType = {
toggleSettings: () => void;
};
export const CallingLobby = ({
export function CallingLobby({
availableCameras,
conversation,
groupMembers,
@ -86,7 +86,7 @@ export const CallingLobby = ({
toggleParticipants,
toggleSettings,
outgoingRing,
}: PropsType): JSX.Element => {
}: PropsType): JSX.Element {
const [isMutedToastVisible, setIsMutedToastVisible] = React.useState(
!hasLocalAudio
);
@ -303,4 +303,4 @@ export const CallingLobby = ({
</div>
</FocusTrap>
);
};
}

23
ts/components/CallingLobbyJoinButton.tsx
View file

@ -1,7 +1,7 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { FunctionComponent, ReactChild } from 'react';
import type { ReactChild } from 'react';
import React, { useState } from 'react';
import { noop } from 'lodash';
@ -19,6 +19,13 @@ export enum CallingLobbyJoinButtonVariant {
Start = 'Start',
}
type PropsType = {
disabled?: boolean;
i18n: LocalizerType;
onClick: () => void;
variant: CallingLobbyJoinButtonVariant;
};
/**
* This component is a little weird. Why not just render a button with some children?
*
@ -29,12 +36,12 @@ export enum CallingLobbyJoinButtonVariant {
* For example, we might initially render "Join call" and then render a spinner when you
* click the button. The button shouldn't resize in that situation.
*/
export const CallingLobbyJoinButton: FunctionComponent<{
disabled?: boolean;
i18n: LocalizerType;
onClick: () => void;
variant: CallingLobbyJoinButtonVariant;
}> = ({ disabled, i18n, onClick, variant }) => {
export function CallingLobbyJoinButton({
disabled,
i18n,
onClick,
variant,
}: PropsType): JSX.Element {
const [width, setWidth] = useState<undefined | number>();
const [height, setHeight] = useState<undefined | number>();
@ -103,4 +110,4 @@ export const CallingLobbyJoinButton: FunctionComponent<{
</div>
</>
);
};
}

16
ts/components/CallingParticipantsList.stories.tsx
View file

@ -47,16 +47,16 @@ export default {
title: 'Components/CallingParticipantsList',
};
export const NoOne = (): JSX.Element => {
export function NoOne(): JSX.Element {
const props = createProps();
return <CallingParticipantsList {...props} />;
};
}
NoOne.story = {
name: 'No one',
};
export const SoloCall = (): JSX.Element => {
export function SoloCall(): JSX.Element {
const props = createProps({
participants: [
createParticipant({
@ -65,9 +65,9 @@ export const SoloCall = (): JSX.Element => {
],
});
return <CallingParticipantsList {...props} />;
};
}
export const ManyParticipants = (): JSX.Element => {
export function ManyParticipants(): JSX.Element {
const props = createProps({
participants: [
createParticipant({
@ -95,13 +95,13 @@ export const ManyParticipants = (): JSX.Element => {
],
});
return <CallingParticipantsList {...props} />;
};
}
export const Overflow = (): JSX.Element => {
export function Overflow(): JSX.Element {
const props = createProps({
participants: Array(50)
.fill(null)
.map(() => createParticipant({ title: 'Kirby' })),
});
return <CallingParticipantsList {...props} />;
};
}

7
ts/components/CallingParticipantsList.tsx
View file

@ -30,7 +30,12 @@ export type PropsType = {
};
export const CallingParticipantsList = React.memo(
({ i18n, onClose, ourUuid, participants }: PropsType) => {
function CallingParticipantsListInner({
i18n,
onClose,
ourUuid,
participants,
}: PropsType) {
const [root, setRoot] = React.useState<HTMLElement | null>(null);
const modalContainer = useContext(ModalContainerContext) ?? document.body;

20
ts/components/CallingPip.stories.tsx
View file

@ -10,7 +10,7 @@ import { AvatarColors } from '../types/Colors';
import type { ConversationType } from '../state/ducks/conversations';
import type { PropsType } from './CallingPip';
import { CallingPip } from './CallingPip';
import type { ActiveCallType } from '../types/Calling';
import type { ActiveDirectCallType } from '../types/Calling';
import {
CallMode,
CallViewMode,
@ -52,7 +52,7 @@ const getCommonActiveCallData = () => ({
showParticipantsList: false,
});
const defaultCall: ActiveCallType = {
const defaultCall: ActiveDirectCallType = {
...getCommonActiveCallData(),
callMode: CallMode.Direct as CallMode.Direct,
callState: CallState.Accepted,
@ -80,12 +80,12 @@ export default {
title: 'Components/CallingPip',
};
export const Default = (): JSX.Element => {
export function Default(): JSX.Element {
const props = createProps({});
return <CallingPip {...props} />;
};
}
export const ContactWithAvatarAndNoVideo = (): JSX.Element => {
export function ContactWithAvatarAndNoVideo(): JSX.Element {
const props = createProps({
activeCall: {
...defaultCall,
@ -99,13 +99,13 @@ export const ContactWithAvatarAndNoVideo = (): JSX.Element => {
},
});
return <CallingPip {...props} />;
};
}
ContactWithAvatarAndNoVideo.story = {
name: 'Contact (with avatar and no video)',
};
export const ContactNoColor = (): JSX.Element => {
export function ContactNoColor(): JSX.Element {
const props = createProps({
activeCall: {
...defaultCall,
@ -116,13 +116,13 @@ export const ContactNoColor = (): JSX.Element => {
},
});
return <CallingPip {...props} />;
};
}
ContactNoColor.story = {
name: 'Contact (no color)',
};
export const GroupCall = (): JSX.Element => {
export function GroupCall(): JSX.Element {
const props = createProps({
activeCall: {
...getCommonActiveCallData(),
@ -140,4 +140,4 @@ export const GroupCall = (): JSX.Element => {
},
});
return <CallingPip {...props} />;
};
}

6
ts/components/CallingPip.tsx
View file

@ -70,7 +70,7 @@ const PIP_WIDTH = 120;
const PIP_TOP_MARGIN = 56;
const PIP_PADDING = 8;
export const CallingPip = ({
export function CallingPip({
activeCall,
getGroupCallVideoFrameSource,
hangUpActiveCall,
@ -82,7 +82,7 @@ export const CallingPip = ({
switchToPresentationView,
switchFromPresentationView,
togglePip,
}: PropsType): JSX.Element => {
}: PropsType): JSX.Element {
const videoContainerRef = React.useRef<null | HTMLDivElement>(null);
const localVideoRef = React.useRef(null);
@ -315,4 +315,4 @@ export const CallingPip = ({
</div>
</div>
);
};
}

12
ts/components/CallingPipRemoteVideo.tsx
View file

@ -27,13 +27,13 @@ import { nonRenderedRemoteParticipant } from '../util/ringrtc/nonRenderedRemoteP
// less than `MAX_FRAME_HEIGHT`.
const PIP_VIDEO_HEIGHT_PX = 120;
const NoVideo = ({
function NoVideo({
activeCall,
i18n,
}: {
activeCall: ActiveCallType;
i18n: LocalizerType;
}): JSX.Element => {
}): JSX.Element {
const {
acceptedMessageRequest,
avatarPath,
@ -68,7 +68,7 @@ const NoVideo = ({
</CallBackgroundBlur>
</div>
);
};
}
export type PropsType = {
activeCall: ActiveCallType;
@ -81,13 +81,13 @@ export type PropsType = {
setRendererCanvas: (_: SetRendererCanvasType) => void;
};
export const CallingPipRemoteVideo = ({
export function CallingPipRemoteVideo({
activeCall,
getGroupCallVideoFrameSource,
i18n,
setGroupCallVideoRequest,
setRendererCanvas,
}: PropsType): JSX.Element => {
}: PropsType): JSX.Element {
const { conversation } = activeCall;
const getGroupCallFrameBuffer = useGetCallingFrameBuffer();
@ -177,4 +177,4 @@ export const CallingPipRemoteVideo = ({
default:
throw missingCaseError(activeCall);
}
};
}

100
ts/components/CallingPreCallInfo.stories.tsx
View file

@ -24,20 +24,23 @@ export default {
title: 'Components/CallingPreCallInfo',
};
export const DirectConversation = (): JSX.Element => (
export function DirectConversation(): JSX.Element {
return (
<CallingPreCallInfo
conversation={getDefaultConversation()}
i18n={i18n}
me={getDefaultConversation()}
ringMode={RingMode.WillRing}
/>
);
);
}
DirectConversation.story = {
name: 'Direct conversation',
};
export const Ring0 = (): JSX.Element => (
export function Ring0(): JSX.Element {
return (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers.slice(0, 0)}
@ -46,13 +49,15 @@ export const Ring0 = (): JSX.Element => (
peekedParticipants={[]}
ringMode={RingMode.WillRing}
/>
);
);
}
Ring0.story = {
name: 'Group call: Will ring 0 people',
};
export const Ring1 = (): JSX.Element => (
export function Ring1(): JSX.Element {
return (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers.slice(0, 1)}
@ -61,13 +66,15 @@ export const Ring1 = (): JSX.Element => (
peekedParticipants={[]}
ringMode={RingMode.WillRing}
/>
);
);
}
Ring1.story = {
name: 'Group call: Will ring 1 person',
};
export const Ring2 = (): JSX.Element => (
export function Ring2(): JSX.Element {
return (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers.slice(0, 2)}
@ -76,13 +83,15 @@ export const Ring2 = (): JSX.Element => (
peekedParticipants={[]}
ringMode={RingMode.WillRing}
/>
);
);
}
Ring2.story = {
name: 'Group call: Will ring 2 people',
};
export const Ring3 = (): JSX.Element => (
export function Ring3(): JSX.Element {
return (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers.slice(0, 3)}
@ -91,13 +100,15 @@ export const Ring3 = (): JSX.Element => (
peekedParticipants={[]}
ringMode={RingMode.WillRing}
/>
);
);
}
Ring3.story = {
name: 'Group call: Will ring 3 people',
};
export const Ring4 = (): JSX.Element => (
export function Ring4(): JSX.Element {
return (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers.slice(0, 4)}
@ -106,13 +117,15 @@ export const Ring4 = (): JSX.Element => (
peekedParticipants={[]}
ringMode={RingMode.WillRing}
/>
);
);
}
Ring3.story = {
name: 'Group call: Will ring 4 people',
};
export const Notify0 = (): JSX.Element => (
export function Notify0(): JSX.Element {
return (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers.slice(0, 0)}
@ -121,13 +134,15 @@ export const Notify0 = (): JSX.Element => (
peekedParticipants={[]}
ringMode={RingMode.WillNotRing}
/>
);
);
}
Notify0.story = {
name: 'Group call: Will notify 0 people',
};
export const Notify1 = (): JSX.Element => (
export function Notify1(): JSX.Element {
return (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers.slice(0, 1)}
@ -136,13 +151,15 @@ export const Notify1 = (): JSX.Element => (
peekedParticipants={[]}
ringMode={RingMode.WillNotRing}
/>
);
);
}
Notify1.story = {
name: 'Group call: Will notify 1 person',
};
export const Notify2 = (): JSX.Element => (
export function Notify2(): JSX.Element {
return (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers.slice(0, 2)}
@ -151,13 +168,15 @@ export const Notify2 = (): JSX.Element => (
peekedParticipants={[]}
ringMode={RingMode.WillNotRing}
/>
);
);
}
Notify2.story = {
name: 'Group call: Will notify 2 people',
};
export const Notify3 = (): JSX.Element => (
export function Notify3(): JSX.Element {
return (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers.slice(0, 3)}
@ -166,13 +185,15 @@ export const Notify3 = (): JSX.Element => (
peekedParticipants={[]}
ringMode={RingMode.WillNotRing}
/>
);
);
}
Notify3.story = {
name: 'Group call: Will notify 3 people',
};
export const Notify4 = (): JSX.Element => (
export function Notify4(): JSX.Element {
return (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers.slice(0, 4)}
@ -181,13 +202,15 @@ export const Notify4 = (): JSX.Element => (
peekedParticipants={[]}
ringMode={RingMode.WillNotRing}
/>
);
);
}
Notify4.story = {
name: 'Group call: Will notify 4 people',
};
export const Peek1 = (): JSX.Element => (
export function Peek1(): JSX.Element {
return (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers}
@ -196,13 +219,15 @@ export const Peek1 = (): JSX.Element => (
peekedParticipants={otherMembers.slice(0, 1)}
ringMode={RingMode.WillRing}
/>
);
);
}
Peek1.story = {
name: 'Group call: 1 participant peeked',
};
export const Peek2 = (): JSX.Element => (
export function Peek2(): JSX.Element {
return (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers}
@ -211,13 +236,15 @@ export const Peek2 = (): JSX.Element => (
peekedParticipants={otherMembers.slice(0, 2)}
ringMode={RingMode.WillRing}
/>
);
);
}
Peek2.story = {
name: 'Group call: 2 participants peeked',
};
export const Peek3 = (): JSX.Element => (
export function Peek3(): JSX.Element {
return (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers}
@ -226,13 +253,15 @@ export const Peek3 = (): JSX.Element => (
peekedParticipants={otherMembers.slice(0, 3)}
ringMode={RingMode.WillRing}
/>
);
);
}
Peek3.story = {
name: 'Group call: 3 participants peeked',
};
export const Peek4 = (): JSX.Element => (
export function Peek4(): JSX.Element {
return (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers}
@ -241,13 +270,14 @@ export const Peek4 = (): JSX.Element => (
peekedParticipants={otherMembers.slice(0, 4)}
ringMode={RingMode.WillRing}
/>
);
);
}
Peek4.story = {
name: 'Group call: 4 participants peeked',
};
export const GroupConversationYouOnAnOtherDevice = (): JSX.Element => {
export function GroupConversationYouOnAnOtherDevice(): JSX.Element {
const me = getDefaultConversation();
return (
<CallingPreCallInfo
@ -259,13 +289,14 @@ export const GroupConversationYouOnAnOtherDevice = (): JSX.Element => {
ringMode={RingMode.WillRing}
/>
);
};
}
GroupConversationYouOnAnOtherDevice.story = {
name: 'Group conversation, you on an other device',
};
export const GroupConversationCallIsFull = (): JSX.Element => (
export function GroupConversationCallIsFull(): JSX.Element {
return (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers}
@ -275,7 +306,8 @@ export const GroupConversationCallIsFull = (): JSX.Element => (
peekedParticipants={otherMembers}
ringMode={RingMode.WillRing}
/>
);
);
}
GroupConversationCallIsFull.story = {
name: 'Group conversation, call is full',

7
ts/components/CallingPreCallInfo.tsx
View file

@ -1,7 +1,6 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { FunctionComponent } from 'react';
import React from 'react';
import type { ConversationType } from '../state/ducks/conversations';
import type { LocalizerType } from '../types/Util';
@ -42,7 +41,7 @@ type PropsType = {
>;
};
export const CallingPreCallInfo: FunctionComponent<PropsType> = ({
export function CallingPreCallInfo({
conversation,
groupMembers = [],
i18n,
@ -50,7 +49,7 @@ export const CallingPreCallInfo: FunctionComponent<PropsType> = ({
me,
peekedParticipants = [],
ringMode,
}) => {
}: PropsType): JSX.Element {
let subtitle: string;
if (ringMode === RingMode.IsRinging) {
subtitle = i18n('outgoingCallRinging');
@ -183,4 +182,4 @@ export const CallingPreCallInfo: FunctionComponent<PropsType> = ({
<div className="module-CallingPreCallInfo__subtitle">{subtitle}</div>
</div>
);
};
}

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