Skip to content

Commit bdbd73d

Browse files
szuperazszuperaz
committed
refactor: uploadProgress renamed to Progress and moved outside of message composer
1 parent b2f51d6 commit bdbd73d

21 files changed

Lines changed: 87 additions & 84 deletions

‎src/components/Loading/ProgressIndicator.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react';
2+
3+
import { useTranslationContext } from '../../context/TranslationContext';
4+
5+
const RING_RADIUS = 12;
6+
const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
7+
8+
export type ProgressIndicatorProps = {
9+
/** Clamped 0–100 completion. */
10+
percent: number;
11+
};
12+
13+
/** Circular progress indicator with input from 0 to 100. */
14+
export const ProgressIndicator = ({ percent }: ProgressIndicatorProps) => {
15+
const { t } = useTranslationContext('ProgressIndicator');
16+
const dashOffset = RING_CIRCUMFERENCE * (1 - percent / 100);
17+
18+
return (
19+
<div className='str-chat__progress-indicator'>
20+
<svg
21+
aria-label={t('aria/Progress', { percent })}
22+
aria-valuemax={100}
23+
aria-valuemin={0}
24+
aria-valuenow={percent}
25+
data-testid='progress-ring'
26+
height='100%'
27+
role='progressbar'
28+
viewBox='0 0 32 32'
29+
width='100%'
30+
xmlns='http://www.w3.org/2000/svg'
31+
>
32+
<circle
33+
cx='16'
34+
cy='16'
35+
fill='none'
36+
r={RING_RADIUS}
37+
stroke='currentColor'
38+
strokeOpacity={0.35}
39+
strokeWidth='2.5'
40+
/>
41+
<circle
42+
cx='16'
43+
cy='16'
44+
fill='none'
45+
r={RING_RADIUS}
46+
stroke='currentColor'
47+
strokeDasharray={RING_CIRCUMFERENCE}
48+
strokeDashoffset={dashOffset}
49+
strokeLinecap='round'
50+
strokeWidth='2.5'
51+
transform='rotate(-90 16 16)'
52+
/>
53+
</svg>
54+
</div>
55+
);
56+
};

‎src/components/Loading/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ export * from './LoadingChannel';
22
export * from './LoadingChannels';
33
export * from './LoadingErrorIndicator';
44
export * from './LoadingIndicator';
5+
export * from './ProgressIndicator';

‎src/components/Loading/styling/ProgressIndicator.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.str-chat__progress-indicator {
2+
width: 100%;
3+
height: 100%;
4+
5+
svg {
6+
display: block;
7+
}
8+
}

‎src/components/Loading/styling/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
@use 'LoadingChannels';
22
@use 'LoadingIndicator';
3+
@use 'ProgressIndicator';

‎src/components/MessageComposer/AttachmentPreviewList/AttachmentUploadProgressIndicator.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import clsx from 'clsx';
22
import React, { type ReactNode } from 'react';
33

4+
import { ProgressIndicator as DefaultProgressIndicator } from '../../Loading';
45
import { useComponentContext } from '../../../context';
5-
import { UploadProgress as DefaultUploadProgress, LoadingIndicatorIcon } from '../icons';
6+
import { LoadingIndicatorIcon } from '../icons';
67
import { clampUploadPercent } from './utils/uploadProgress';
78

89
export type AttachmentUploadProgressVariant = 'inline' | 'overlay';
@@ -21,7 +22,7 @@ export const AttachmentUploadProgressIndicator = ({
2122
uploadProgress,
2223
variant,
2324
}: AttachmentUploadProgressIndicatorProps) => {
24-
const { UploadProgress = DefaultUploadProgress } = useComponentContext(
25+
const { ProgressIndicator = DefaultProgressIndicator } = useComponentContext(
2526
'AttachmentUploadProgressIndicator',
2627
);
2728

@@ -39,7 +40,7 @@ export const AttachmentUploadProgressIndicator = ({
3940
className,
4041
)}
4142
>
42-
<UploadProgress percent={percent} />
43+
<ProgressIndicator percent={percent} />
4344
</div>
4445
);
4546
};

‎src/components/MessageComposer/__tests__/AttachmentPreviewList.test.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -353,9 +353,7 @@ describe('AttachmentPreviewList', () => {
353353
});
354354

355355
expect(screen.getByTestId(LOADING_INDICATOR_TEST_ID)).toBeInTheDocument();
356-
expect(
357-
screen.queryByTestId('attachment-upload-progress-ring'),
358-
).not.toBeInTheDocument();
356+
expect(screen.queryByTestId('progress-ring')).not.toBeInTheDocument();
359357
});
360358

361359
it('shows ring while uploading when uploadProgress is numeric', async () => {
@@ -372,7 +370,7 @@ describe('AttachmentPreviewList', () => {
372370
],
373371
});
374372

375-
expect(screen.getByTestId('attachment-upload-progress-ring')).toBeInTheDocument();
373+
expect(screen.getByTestId('progress-ring')).toBeInTheDocument();
376374
expect(screen.queryByTestId(LOADING_INDICATOR_TEST_ID)).not.toBeInTheDocument();
377375
});
378376

‎src/components/MessageComposer/icons.tsx‎

Lines changed: 0 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -3,59 +3,6 @@ import { nanoid } from 'nanoid';
33

44
import { useTranslationContext } from '../../context/TranslationContext';
55

6-
const UPLOAD_RING_RADIUS = 12;
7-
const UPLOAD_RING_CIRCUMFERENCE = 2 * Math.PI * UPLOAD_RING_RADIUS;
8-
9-
export type UploadProgressProps = {
10-
/** Clamped 0–100 upload completion. */
11-
percent: number;
12-
};
13-
14-
/** Determinate circular upload progress ring (not a spinner; uses `str-chat__upload-progress`, not the loading-indicator spinner). */
15-
export const UploadProgress = ({ percent }: UploadProgressProps) => {
16-
const { t } = useTranslationContext('UploadProgress');
17-
const dashOffset = UPLOAD_RING_CIRCUMFERENCE * (1 - percent / 100);
18-
19-
return (
20-
<div className='str-chat__upload-progress'>
21-
<svg
22-
aria-label={t('aria/Upload progress', { percent })}
23-
aria-valuemax={100}
24-
aria-valuemin={0}
25-
aria-valuenow={percent}
26-
data-testid='attachment-upload-progress-ring'
27-
height='100%'
28-
role='progressbar'
29-
viewBox='0 0 32 32'
30-
width='100%'
31-
xmlns='http://www.w3.org/2000/svg'
32-
>
33-
<circle
34-
cx='16'
35-
cy='16'
36-
fill='none'
37-
r={UPLOAD_RING_RADIUS}
38-
stroke='currentColor'
39-
strokeOpacity={0.35}
40-
strokeWidth='2.5'
41-
/>
42-
<circle
43-
cx='16'
44-
cy='16'
45-
fill='none'
46-
r={UPLOAD_RING_RADIUS}
47-
stroke='currentColor'
48-
strokeDasharray={UPLOAD_RING_CIRCUMFERENCE}
49-
strokeDashoffset={dashOffset}
50-
strokeLinecap='round'
51-
strokeWidth='2.5'
52-
transform='rotate(-90 16 16)'
53-
/>
54-
</svg>
55-
</div>
56-
);
57-
};
58-
596
export const LoadingIndicatorIcon = () => {
607
const id = useMemo(() => nanoid(), []);
618

‎src/components/MessageComposer/styling/AttachmentPreview.scss‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -78,15 +78,6 @@
7878

7979
.str-chat__attachment-upload-progress {
8080
color: var(--str-chat__primary-color);
81-
82-
.str-chat__upload-progress {
83-
width: 100%;
84-
height: 100%;
85-
}
86-
87-
svg {
88-
display: block;
89-
}
9081
}
9182

9283
.str-chat__message-composer-voice-preview-slot {

‎src/context/ComponentContext.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ import type { VideoPlayerProps } from '../components/VideoPlayer';
7474
import type { EditedMessagePreviewProps } from '../components/MessageComposer/EditedMessagePreview';
7575
import type { FileIconProps } from '../components/FileIcon/FileIcon';
7676
import type { CommandChipProps } from '../components/MessageComposer/CommandChip';
77-
import type { UploadProgressProps } from '../components/MessageComposer/icons';
77+
import type { ProgressIndicatorProps } from '../components/Loading/ProgressIndicator';
7878

7979
export type ComponentContextValue = {
8080
/** Custom UI component to display additional message composer action buttons left to the textarea, defaults to and accepts same props as: [AdditionalMessageComposerActions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/MessageComposerActions.tsx) */
@@ -149,8 +149,8 @@ export type ComponentContextValue = {
149149
LoadingErrorIndicator?: React.ComponentType<LoadingErrorIndicatorProps>;
150150
/** Custom UI component to render while the `MessageList` is loading new messages, defaults to and accepts same props as: [LoadingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingIndicator.tsx) */
151151
LoadingIndicator?: React.ComponentType<LoadingIndicatorProps>;
152-
/** Custom UI component for determinate attachment upload progress (0–100) in attachment previews, defaults to and accepts same props as: [UploadProgress](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/icons.tsx) */
153-
UploadProgress?: React.ComponentType<UploadProgressProps>;
152+
/** Custom UI component for determinate progress (0–100), defaults to and accepts same props as: [ProgressIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/ProgressIndicator.tsx) */
153+
ProgressIndicator?: React.ComponentType<ProgressIndicatorProps>;
154154
/** Custom UI component to display a message in the standard `MessageList`, defaults to and accepts the same props as: [MessageUI](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageUI.tsx) */
155155
Message?: React.ComponentType<MessageUIComponentProps>;
156156
/** Custom UI component for message actions popup, accepts no props, all the defaults are set within [MessageActions (unstable)](https://github.com/GetStream/stream-chat-react/blob/master/src/experimental/MessageActions/MessageActions.tsx) */

‎src/i18n/de.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@
8484
"aria/Open Reaction Selector": "Reaktionsauswahl öffnen",
8585
"aria/Open Thread": "Thread öffnen",
8686
"aria/Pin Message": "Nachricht anheften",
87+
"aria/Progress": "{{percent}} Prozent abgeschlossen",
8788
"aria/Quote Message": "Nachricht zitieren",
8889
"aria/Reaction list": "Reaktionsliste",
8990
"aria/Remind Me Message": "Erinnern",
@@ -102,7 +103,6 @@
102103
"aria/Unblock User": "Benutzer entsperren",
103104
"aria/Unmute User": "Stummschaltung aufheben",
104105
"aria/Unpin Message": "Anheftung aufheben",
105-
"aria/Upload progress": "{{percent}} Prozent hochgeladen",
106106
"Ask a question": "Eine Frage stellen",
107107
"Attach": "Anhängen",
108108
"Attach files": "Dateien anhängen",

0 commit comments

Comments
 (0)