Signal/Desktop
1
0
Fork 0
mirror of https://github.com/signalapp/Signal-Desktop.git synced 2026-04-26 03:18:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

New React component: Message

Browse Source 
Also: Use react to render contects on the 'show group members' screen
This commit is contained in:
Scott Nonnenberg
2018-06-27 13:53:49 -07:00
parent 3ea14ce450
commit dc11db92f9
48 changed files with 5299 additions and 2093 deletions
Download Patch File Download Diff File Expand all files Collapse all files

638
ts/components/conversation/EmbeddedContact.md
View File

@@ -3,280 +3,516 @@
#### Including all data types
```jsx
const outgoing = new Whisper.Message({
type: 'outgoing',
sent_at: Date.now() - 18000000,
contact: [
{
name: {
displayName: 'Someone Somewhere',
const contacts = [
{
name: {
displayName: 'Someone Somewhere',
},
number: [
{
value: '(202) 555-0000',
type: 1,
},
number: [
{
value: util.CONTACTS[0].id,
type: 1,
},
],
],
avatar: {
avatar: {
avatar: {
path: util.gifObjectUrl,
},
path: util.gifObjectUrl,
},
},
],
});
const incoming = new Whisper.Message(
Object.assign({}, outgoing.attributes, {
source: '+12025550011',
type: 'incoming',
})
);
const View = Whisper.MessageView;
},
];
<util.ConversationContext theme={util.theme}>
<util.BackboneWrapper View={View} options={{ model: incoming }} />
<util.BackboneWrapper View={View} options={{ model: outgoing }} />
<Message
color="green"
direction="incoming"
i18n={util.i18n}
contacts={contacts}
contactHasSignalAccount
onClickContact={() => console.log('onClickContact')}
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
<Message
direction="outgoing"
status="delivered"
i18n={util.i18n}
contacts={contacts}
contactHasSignalAccount
onClickContact={() => console.log('onClickContact')}
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
<Message
color="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
contacts={contacts}
contactHasSignalAccount
onClickContact={() => console.log('onClickContact')}
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
<Message
direction="outgoing"
collapseMetadata
status="delivered"
i18n={util.i18n}
contacts={contacts}
contactHasSignalAccount
onClickContact={() => console.log('onClickContact')}
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
</util.ConversationContext>;
```
#### Really long long data
```
const contacts = [
{
name: {
displayName: 'Dr. First Middle Last Junior Senior and all that and a bag of chips',
},
number: [
{
value: '(202) 555-0000 0000 0000 0000 0000 0000 0000 0000 0000 0000',
type: 1,
},
],
avatar: {
avatar: {
path: util.gifObjectUrl,
},
},
},
];
<util.ConversationContext theme={util.theme}>
<Message
color="green"
direction="incoming"
i18n={util.i18n}
contacts={contacts}
contactHasSignalAccount
onClickContact={() => console.log('onClickContact')}
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
<Message
direction="outgoing"
status="delivered"
i18n={util.i18n}
contacts={contacts}
contactHasSignalAccount
onClickContact={() => console.log('onClickContact')}
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
</util.ConversationContext>;
```
#### In group conversation
```jsx
const outgoing = new Whisper.Message({
type: 'outgoing',
sent_at: Date.now() - 18000000,
contact: [
{
name: {
displayName: 'Someone Somewhere',
const contacts = [
{
name: {
displayName: 'Someone Somewhere',
},
number: [
{
value: '(202) 555-0000',
type: 1,
},
number: [
{
value: util.CONTACTS[0].id,
type: 1,
},
],
],
avatar: {
avatar: {
avatar: {
path: util.gifObjectUrl,
},
path: util.gifObjectUrl,
},
},
],
});
const incoming = new Whisper.Message(
Object.assign({}, outgoing.attributes, {
source: '+12025550011',
type: 'incoming',
})
);
const View = Whisper.MessageView;
},
];
<util.ConversationContext theme={util.theme} type="group">
<util.BackboneWrapper View={View} options={{ model: incoming }} />
<util.BackboneWrapper View={View} options={{ model: outgoing }} />
<Message
color="green"
conversationType="group"
authorName="Mr. Fire"
authorAvatarPath={util.gifObjectUrl}
direction="incoming"
i18n={util.i18n}
contacts={contacts}
contactHasSignalAccount
onClickContact={() => console.log('onClickContact')}
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
<Message
color="green"
direction="incoming"
authorName="Mr. Fire"
conversationType="group"
collapseMetadata
i18n={util.i18n}
contacts={contacts}
contactHasSignalAccount
onClickContact={() => console.log('onClickContact')}
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
<Message
direction="outgoing"
conversationType="group"
authorName="Mr. Fire"
status="delivered"
i18n={util.i18n}
contacts={contacts}
contactHasSignalAccount
onClickContact={() => console.log('onClickContact')}
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
</util.ConversationContext>;
```
#### If contact has no signal account
```jsx
const outgoing = new Whisper.Message({
type: 'outgoing',
sent_at: Date.now() - 18000000,
contact: [
{
name: {
displayName: 'Someone Somewhere',
const contacts = [
{
name: {
displayName: 'Someone Somewhere',
},
number: [
{
value: '(202) 555-0000',
type: 1,
},
number: [
{
value: '+12025551000',
type: 1,
},
],
],
avatar: {
avatar: {
avatar: {
path: util.gifObjectUrl,
},
path: util.gifObjectUrl,
},
},
],
});
const incoming = new Whisper.Message(
Object.assign({}, outgoing.attributes, {
source: '+12025550011',
type: 'incoming',
})
);
const View = Whisper.MessageView;
},
];
<util.ConversationContext theme={util.theme}>
<util.BackboneWrapper View={View} options={{ model: incoming }} />
<util.BackboneWrapper View={View} options={{ model: outgoing }} />
<Message
color="green"
direction="incoming"
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
/>
<Message
direction="outgoing"
status="delivered"
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
/>
<Message
color="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
/>
<Message
direction="outgoing"
collapseMetadata
status="delivered"
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
/>
</util.ConversationContext>;
```
#### With organization name instead of name
```jsx
const outgoing = new Whisper.Message({
type: 'outgoing',
sent_at: Date.now() - 18000000,
contact: [
{
organization: 'United Somewheres, Inc.',
email: [
{
value: 'someone@somewheres.com',
type: 2,
},
],
const contacts = [
{
organization: 'United Somewheres, Inc.',
email: [
{
value: 'someone@somewheres.com',
type: 2,
},
],
avatar: {
avatar: {
avatar: {
path: util.gifObjectUrl,
},
path: util.gifObjectUrl,
},
},
],
});
const incoming = new Whisper.Message(
Object.assign({}, outgoing.attributes, {
source: '+12025550011',
type: 'incoming',
})
);
const View = Whisper.MessageView;
},
];
<util.ConversationContext theme={util.theme}>
<util.BackboneWrapper View={View} options={{ model: incoming }} />
<util.BackboneWrapper View={View} options={{ model: outgoing }} />
<Message
color="green"
direction="incoming"
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
/>
<Message
direction="outgoing"
status="delivered"
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
/>
<Message
color="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
contacts={contacts}
/>
<Message
direction="outgoing"
collapseMetadata
status="delivered"
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
/>
</util.ConversationContext>;
```
#### No displayName or organization
```jsx
const outgoing = new Whisper.Message({
type: 'outgoing',
sent_at: Date.now() - 18000000,
contact: [
{
name: {
givenName: 'Someone',
const contacts = [
{
name: {
givenName: 'Someone',
},
number: [
{
value: '+12025551000',
type: 1,
},
number: [
{
value: '+12025551000',
type: 1,
},
],
],
avatar: {
avatar: {
avatar: {
path: util.gifObjectUrl,
},
path: util.gifObjectUrl,
},
},
],
});
const incoming = new Whisper.Message(
Object.assign({}, outgoing.attributes, {
source: '+12025550011',
type: 'incoming',
})
);
const View = Whisper.MessageView;
},
];
<util.ConversationContext theme={util.theme}>
<util.BackboneWrapper View={View} options={{ model: incoming }} />
<util.BackboneWrapper View={View} options={{ model: outgoing }} />
<Message
color="green"
direction="incoming"
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
/>
<Message
direction="outgoing"
status="delivered"
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
/>
<Message
color="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
/>
<Message
direction="outgoing"
collapseMetadata
status="delivered"
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
/>
</util.ConversationContext>;
```
#### Default avatar
```jsx
const outgoing = new Whisper.Message({
type: 'outgoing',
sent_at: Date.now() - 18000000,
contact: [
{
name: {
displayName: 'Someone Somewhere',
},
number: [
{
value: util.CONTACTS[0].id,
type: 1,
},
],
const contacts = [
{
name: {
displayName: 'Someone Somewhere',
},
],
});
const incoming = new Whisper.Message(
Object.assign({}, outgoing.attributes, {
source: '+12025550011',
type: 'incoming',
})
);
const View = Whisper.MessageView;
number: [
{
value: util.CONTACTS[0].id,
type: 1,
},
],
},
];
<util.ConversationContext theme={util.theme}>
<util.BackboneWrapper View={View} options={{ model: incoming }} />
<util.BackboneWrapper View={View} options={{ model: outgoing }} />
<Message
color="green"
direction="incoming"
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
/>
<Message
direction="outgoing"
status="delivered"
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
/>
<Message
color="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
/>
<Message
direction="outgoing"
collapseMetadata
status="delivered"
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
/>
</util.ConversationContext>;
```
#### Empty contact
```jsx
const outgoing = new Whisper.Message({
type: 'outgoing',
sent_at: Date.now() - 18000000,
contact: [{}],
});
const incoming = new Whisper.Message(
Object.assign({}, outgoing.attributes, {
source: '+12025550011',
type: 'incoming',
})
);
const View = Whisper.MessageView;
const contacts = [{}];
<util.ConversationContext theme={util.theme}>
<util.BackboneWrapper View={View} options={{ model: incoming }} />
<util.BackboneWrapper View={View} options={{ model: outgoing }} />
<Message
color="green"
direction="incoming"
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
/>
<Message
direction="outgoing"
status="delivered"
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
/>
<Message
color="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
/>
<Message
direction="outgoing"
collapseMetadata
status="delivered"
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
/>
</util.ConversationContext>;
```
#### Contact with caption (cannot currently be sent)
```jsx
const outgoing = new Whisper.Message({
type: 'outgoing',
sent_at: Date.now() - 18000000,
body: 'I want to introduce you to Someone...',
contact: [
{
name: {
displayName: 'Someone Somewhere',
const contacts = [
{
name: {
displayName: 'Someone Somewhere',
},
number: [
{
value: '(202) 555-0000',
type: 1,
},
number: [
{
value: util.CONTACTS[0].id,
type: 1,
},
],
],
avatar: {
avatar: {
avatar: {
path: util.gifObjectUrl,
},
path: util.gifObjectUrl,
},
},
],
});
const incoming = new Whisper.Message(
Object.assign({}, outgoing.attributes, {
source: '+12025550011',
type: 'incoming',
})
);
const View = Whisper.MessageView;
},
];
<util.ConversationContext theme={util.theme}>
<util.BackboneWrapper View={View} options={{ model: incoming }} />
<util.BackboneWrapper View={View} options={{ model: outgoing }} />
<Message
text="I want to introduce you to Someone..."
color="green"
direction="incoming"
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
/>
<Message
text="I want to introduce you to Someone..."
direction="outgoing"
status="delivered"
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
/>
<Message
text="I want to introduce you to Someone..."
color="green"
direction="incoming"
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
contactHasSignalAccount
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
<Message
text="I want to introduce you to Someone..."
direction="outgoing"
status="delivered"
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
contactHasSignalAccount
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
<Message
text="I want to introduce you to Someone..."
color="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
/>
<Message
text="I want to introduce you to Someone..."
direction="outgoing"
collapseMetadata
status="delivered"
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
/>
<Message
text="I want to introduce you to Someone..."
color="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
contactHasSignalAccount
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
<Message
text="I want to introduce you to Someone..."
direction="outgoing"
collapseMetadata
status="delivered"
i18n={util.i18n}
contacts={contacts}
onClickContact={() => console.log('onClickContact')}
contactHasSignalAccount
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
</util.ConversationContext>;
```