Fix collapsed corners for link previews and image attachments
This commit is contained in:
Scott Nonnenberg
GitHub
parent
65dc9d6afb
commit
9d3498d938
9 changed files with 260 additions and 181 deletions
|
|
@ -222,15 +222,30 @@ const renderMany = (propsArray: ReadonlyArray<Props>) =>
|
|||
/>
|
||||
));
|
||||
|
||||
const renderBothDirections = (props: Props) =>
|
||||
renderMany([
|
||||
props,
|
||||
{
|
||||
const renderThree = (props: Props) => renderMany([props, props, props]);
|
||||
|
||||
const renderBothDirections = (props: Props) => (
|
||||
<>
|
||||
{renderThree(props)}
|
||||
{renderThree({
|
||||
...props,
|
||||
author: { ...props.author, id: getDefaultConversation().id },
|
||||
direction: 'outgoing',
|
||||
},
|
||||
]);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
const renderSingleBothDirections = (props: Props) => (
|
||||
<>
|
||||
<Message {...props} />
|
||||
<Message
|
||||
{...{
|
||||
...props,
|
||||
author: { ...props.author, id: getDefaultConversation().id },
|
||||
direction: 'outgoing',
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
story.add('Plain Message', () => {
|
||||
const props = createProps({
|
||||
|
|
@ -353,7 +368,7 @@ story.add('Delivered', () => {
|
|||
text: 'Hello there from a pal! I am sending a long message so that it will wrap a bit, since I like that look.',
|
||||
});
|
||||
|
||||
return <Message {...props} />;
|
||||
return renderThree(props);
|
||||
});
|
||||
|
||||
story.add('Read', () => {
|
||||
|
|
@ -363,7 +378,7 @@ story.add('Read', () => {
|
|||
text: 'Hello there from a pal! I am sending a long message so that it will wrap a bit, since I like that look.',
|
||||
});
|
||||
|
||||
return <Message {...props} />;
|
||||
return renderThree(props);
|
||||
});
|
||||
|
||||
story.add('Sending', () => {
|
||||
|
|
@ -373,7 +388,7 @@ story.add('Sending', () => {
|
|||
text: 'Hello there from a pal! I am sending a long message so that it will wrap a bit, since I like that look.',
|
||||
});
|
||||
|
||||
return <Message {...props} />;
|
||||
return renderThree(props);
|
||||
});
|
||||
|
||||
story.add('Expiring', () => {
|
||||
|
|
@ -502,7 +517,7 @@ story.add('Reactions (wider message)', () => {
|
|||
],
|
||||
});
|
||||
|
||||
return renderBothDirections(props);
|
||||
return renderSingleBothDirections(props);
|
||||
});
|
||||
|
||||
const joyReactions = Array.from({ length: 52 }, () => getJoyReaction());
|
||||
|
|
@ -577,7 +592,7 @@ story.add('Reactions (short message)', () => {
|
|||
],
|
||||
});
|
||||
|
||||
return renderBothDirections(props);
|
||||
return renderSingleBothDirections(props);
|
||||
});
|
||||
|
||||
story.add('Avatar in Group', () => {
|
||||
|
|
@ -588,7 +603,7 @@ story.add('Avatar in Group', () => {
|
|||
text: 'Hello it is me, the saxophone.',
|
||||
});
|
||||
|
||||
return <Message {...props} />;
|
||||
return renderThree(props);
|
||||
});
|
||||
|
||||
story.add('Badge in Group', () => {
|
||||
|
|
@ -599,7 +614,7 @@ story.add('Badge in Group', () => {
|
|||
text: 'Hello it is me, the saxophone.',
|
||||
});
|
||||
|
||||
return <Message {...props} />;
|
||||
return renderThree(props);
|
||||
});
|
||||
|
||||
story.add('Sticker', () => {
|
||||
|
|
@ -673,8 +688,8 @@ story.add('Deleted with error', () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<Message {...propsPartialError} />
|
||||
<Message {...propsError} />
|
||||
{renderThree(propsPartialError)}
|
||||
{renderThree(propsError)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
|
@ -684,9 +699,10 @@ story.add('Can delete for everyone', () => {
|
|||
status: 'read',
|
||||
text: 'I hope you get this.',
|
||||
canDeleteForEveryone: true,
|
||||
direction: 'outgoing',
|
||||
});
|
||||
|
||||
return <Message {...props} direction="outgoing" />;
|
||||
return renderThree(props);
|
||||
});
|
||||
|
||||
story.add('Error', () => {
|
||||
|
|
@ -916,7 +932,7 @@ story.add('Link Preview with too new a date', () => {
|
|||
});
|
||||
|
||||
story.add('Image', () => {
|
||||
const props = createProps({
|
||||
const darkImageProps = createProps({
|
||||
attachments: [
|
||||
fakeAttachment({
|
||||
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
|
||||
|
|
@ -928,8 +944,25 @@ story.add('Image', () => {
|
|||
],
|
||||
status: 'sent',
|
||||
});
|
||||
const lightImageProps = createProps({
|
||||
attachments: [
|
||||
fakeAttachment({
|
||||
url: pngUrl,
|
||||
fileName: 'the-sax.png',
|
||||
contentType: IMAGE_PNG,
|
||||
height: 240,
|
||||
width: 320,
|
||||
}),
|
||||
],
|
||||
status: 'sent',
|
||||
});
|
||||
|
||||
return renderBothDirections(props);
|
||||
return (
|
||||
<>
|
||||
{renderBothDirections(darkImageProps)}
|
||||
{renderBothDirections(lightImageProps)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
for (let i = 2; i <= 5; i += 1) {
|
||||
|
|
@ -937,39 +970,39 @@ for (let i = 2; i <= 5; i += 1) {
|
|||
const props = createProps({
|
||||
attachments: [
|
||||
fakeAttachment({
|
||||
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
|
||||
fileName: 'tina-rolf-269345-unsplash.jpg',
|
||||
contentType: IMAGE_JPEG,
|
||||
width: 128,
|
||||
height: 128,
|
||||
url: pngUrl,
|
||||
fileName: 'the-sax.png',
|
||||
contentType: IMAGE_PNG,
|
||||
height: 240,
|
||||
width: 320,
|
||||
}),
|
||||
fakeAttachment({
|
||||
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
|
||||
fileName: 'tina-rolf-269345-unsplash.jpg',
|
||||
contentType: IMAGE_JPEG,
|
||||
width: 128,
|
||||
height: 128,
|
||||
url: pngUrl,
|
||||
fileName: 'the-sax.png',
|
||||
contentType: IMAGE_PNG,
|
||||
height: 240,
|
||||
width: 320,
|
||||
}),
|
||||
fakeAttachment({
|
||||
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
|
||||
fileName: 'tina-rolf-269345-unsplash.jpg',
|
||||
contentType: IMAGE_JPEG,
|
||||
width: 128,
|
||||
height: 128,
|
||||
url: pngUrl,
|
||||
fileName: 'the-sax.png',
|
||||
contentType: IMAGE_PNG,
|
||||
height: 240,
|
||||
width: 320,
|
||||
}),
|
||||
fakeAttachment({
|
||||
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
|
||||
fileName: 'tina-rolf-269345-unsplash.jpg',
|
||||
contentType: IMAGE_JPEG,
|
||||
width: 128,
|
||||
height: 128,
|
||||
url: pngUrl,
|
||||
fileName: 'the-sax.png',
|
||||
contentType: IMAGE_PNG,
|
||||
height: 240,
|
||||
width: 320,
|
||||
}),
|
||||
fakeAttachment({
|
||||
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
|
||||
fileName: 'tina-rolf-269345-unsplash.jpg',
|
||||
contentType: IMAGE_JPEG,
|
||||
width: 128,
|
||||
height: 128,
|
||||
url: pngUrl,
|
||||
fileName: 'the-sax.png',
|
||||
contentType: IMAGE_PNG,
|
||||
height: 240,
|
||||
width: 320,
|
||||
}),
|
||||
].slice(0, i),
|
||||
status: 'sent',
|
||||
|
|
@ -1316,7 +1349,7 @@ story.add('TapToView Error', () => {
|
|||
status: 'sent',
|
||||
});
|
||||
|
||||
return <Message {...props} />;
|
||||
return renderThree(props);
|
||||
});
|
||||
|
||||
story.add('Dangerous File Type', () => {
|
||||
|
|
@ -1419,23 +1452,23 @@ story.add('Not approved, with link preview', () => {
|
|||
|
||||
story.add('Custom Color', () => (
|
||||
<>
|
||||
<Message
|
||||
{...createProps({ text: 'Solid.' })}
|
||||
direction="outgoing"
|
||||
customColor={{
|
||||
{renderThree({
|
||||
...createProps({ text: 'Solid.' }),
|
||||
direction: 'outgoing',
|
||||
customColor: {
|
||||
start: { hue: 82, saturation: 35 },
|
||||
}}
|
||||
/>
|
||||
},
|
||||
})}
|
||||
<br style={{ clear: 'both' }} />
|
||||
<Message
|
||||
{...createProps({ text: 'Gradient.' })}
|
||||
direction="outgoing"
|
||||
customColor={{
|
||||
{renderThree({
|
||||
...createProps({ text: 'Gradient.' }),
|
||||
direction: 'outgoing',
|
||||
customColor: {
|
||||
deg: 192,
|
||||
start: { hue: 304, saturation: 85 },
|
||||
end: { hue: 231, saturation: 76 },
|
||||
}}
|
||||
/>
|
||||
},
|
||||
})}
|
||||
</>
|
||||
));
|
||||
|
||||
|
|
@ -1506,20 +1539,18 @@ story.add('Collapsing text-only group messages', () => {
|
|||
story.add('Story reply', () => {
|
||||
const conversation = getDefaultConversation();
|
||||
|
||||
return (
|
||||
<Message
|
||||
{...createProps({ text: 'Wow!' })}
|
||||
storyReplyContext={{
|
||||
authorTitle: conversation.title,
|
||||
conversationColor: ConversationColors[0],
|
||||
isFromMe: false,
|
||||
rawAttachment: fakeAttachment({
|
||||
url: '/fixtures/snow.jpg',
|
||||
thumbnail: fakeThumbnail('/fixtures/snow.jpg'),
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
return renderThree({
|
||||
...createProps({ text: 'Wow!' }),
|
||||
storyReplyContext: {
|
||||
authorTitle: conversation.title,
|
||||
conversationColor: ConversationColors[0],
|
||||
isFromMe: false,
|
||||
rawAttachment: fakeAttachment({
|
||||
url: '/fixtures/snow.jpg',
|
||||
thumbnail: fakeThumbnail('/fixtures/snow.jpg'),
|
||||
}),
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
const fullContact = {
|
||||
|
|
@ -1559,7 +1590,7 @@ story.add('EmbeddedContact: Full Contact', () => {
|
|||
return renderBothDirections(props);
|
||||
});
|
||||
|
||||
story.add('EmbeddedContact: 2x Incoming, with Send Message', () => {
|
||||
story.add('EmbeddedContact: with Send Message', () => {
|
||||
const props = createProps({
|
||||
contact: {
|
||||
...fullContact,
|
||||
|
|
@ -1568,19 +1599,7 @@ story.add('EmbeddedContact: 2x Incoming, with Send Message', () => {
|
|||
},
|
||||
direction: 'incoming',
|
||||
});
|
||||
return renderMany([props, props]);
|
||||
});
|
||||
|
||||
story.add('EmbeddedContact: 2x Outgoing, with Send Message', () => {
|
||||
const props = createProps({
|
||||
contact: {
|
||||
...fullContact,
|
||||
firstNumber: fullContact.number[0].value,
|
||||
uuid: UUID.generate().toString(),
|
||||
},
|
||||
direction: 'outgoing',
|
||||
});
|
||||
return renderMany([props, props]);
|
||||
return renderBothDirections(props);
|
||||
});
|
||||
|
||||
story.add('EmbeddedContact: Only Email', () => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue