UI Improvements to the edit history modal

This commit is contained in:
Josh Perez 2023-06-30 10:11:27 -04:00 committed by GitHub
parent c96565c4c9
commit 2e7cdfdb70
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 4 deletions

View file

@ -3,6 +3,7 @@
.EditHistoryMessagesModal {
&__divider {
border-bottom: 0;
border-style: solid;
margin-block: 24px;

View file

@ -60,7 +60,7 @@ const MESSAGE_DEFAULT_PROPS = {
shouldHideMetadata: false,
showContactModal: shouldNeverBeCalled,
showConversation: noop,
showEditHistoryModal: shouldNeverBeCalled,
showEditHistoryModal: noop,
showExpiredIncomingTapToViewToast: shouldNeverBeCalled,
showExpiredOutgoingTapToViewToast: shouldNeverBeCalled,
showLightboxForViewOnceMedia: shouldNeverBeCalled,
@ -100,6 +100,8 @@ export function EditHistoryMessagesModal({
const [currentMessage, ...pastEdits] = editHistoryMessages;
const currentMessageId = `${currentMessage.id}.${currentMessage.timestamp}`;
let previousItem = currentMessage;
return (
<Modal
hasXButton
@ -110,6 +112,7 @@ export function EditHistoryMessagesModal({
noTransform
>
<div ref={containerElementRef}>
<TimelineDateHeader i18n={i18n} timestamp={currentMessage.timestamp} />
<Message
{...MESSAGE_DEFAULT_PROPS}
{...currentMessage}
@ -118,6 +121,7 @@ export function EditHistoryMessagesModal({
displayLimit={displayLimitById[currentMessageId]}
getPreferredBadge={getPreferredBadge}
i18n={i18n}
isEditedMessage
isSpoilerExpanded={revealedSpoilersById[currentMessageId] || {}}
key={currentMessage.timestamp}
kickOffAttachmentDownload={kickOffAttachmentDownload}
@ -146,11 +150,9 @@ export function EditHistoryMessagesModal({
{i18n('icu:EditHistoryMessagesModal__title')}
</h3>
{pastEdits.map((messageAttributes, index) => {
{pastEdits.map(messageAttributes => {
const syntheticId = `${messageAttributes.id}.${messageAttributes.timestamp}`;
const previousItem = pastEdits[index - 1];
const shouldShowDateHeader = Boolean(
!previousItem ||
// This comparison avoids strange header behavior for out-of-order messages.
@ -164,6 +166,8 @@ export function EditHistoryMessagesModal({
/>
) : null;
previousItem = messageAttributes;
return (
<React.Fragment key={messageAttributes.timestamp}>
{dateHeaderElement}