Fix error in <Timeline> stories
This commit is contained in:
parent
6c6eed0b1e
commit
23b0a5698f
1 changed files with 115 additions and 47 deletions
|
@ -2,7 +2,8 @@
|
||||||
// SPDX-License-Identifier: AGPL-3.0-only
|
// SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { times } from 'lodash';
|
import * as moment from 'moment';
|
||||||
|
import { isBoolean, times } from 'lodash';
|
||||||
import { v4 as uuid } from 'uuid';
|
import { v4 as uuid } from 'uuid';
|
||||||
import { storiesOf } from '@storybook/react';
|
import { storiesOf } from '@storybook/react';
|
||||||
import { text, boolean, number } from '@storybook/addon-knobs';
|
import { text, boolean, number } from '@storybook/addon-knobs';
|
||||||
|
@ -35,27 +36,42 @@ const items: Record<string, TimelineItemType> = {
|
||||||
'id-1': {
|
'id-1': {
|
||||||
type: 'message',
|
type: 'message',
|
||||||
data: {
|
data: {
|
||||||
id: 'id-1',
|
author: getDefaultConversation({
|
||||||
direction: 'incoming',
|
|
||||||
timestamp: Date.now(),
|
|
||||||
author: {
|
|
||||||
phoneNumber: '(202) 555-2001',
|
phoneNumber: '(202) 555-2001',
|
||||||
color: 'forest',
|
color: 'forest',
|
||||||
},
|
}),
|
||||||
|
canDeleteForEveryone: false,
|
||||||
|
canDownload: true,
|
||||||
|
canReply: true,
|
||||||
|
conversationColor: 'forest',
|
||||||
|
conversationId: 'conversation-id',
|
||||||
|
conversationType: 'group',
|
||||||
|
direction: 'incoming',
|
||||||
|
id: 'id-1',
|
||||||
|
isBlocked: false,
|
||||||
|
isMessageRequestAccepted: true,
|
||||||
|
previews: [],
|
||||||
text: '🔥',
|
text: '🔥',
|
||||||
|
timestamp: Date.now(),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
'id-2': {
|
'id-2': {
|
||||||
type: 'message',
|
type: 'message',
|
||||||
data: {
|
data: {
|
||||||
id: 'id-2',
|
author: getDefaultConversation({ color: 'forest' }),
|
||||||
|
canDeleteForEveryone: false,
|
||||||
|
canDownload: true,
|
||||||
|
canReply: true,
|
||||||
|
conversationColor: 'forest',
|
||||||
|
conversationId: 'conversation-id',
|
||||||
conversationType: 'group',
|
conversationType: 'group',
|
||||||
direction: 'incoming',
|
direction: 'incoming',
|
||||||
timestamp: Date.now(),
|
id: 'id-2',
|
||||||
author: {
|
isBlocked: false,
|
||||||
color: 'forest',
|
isMessageRequestAccepted: true,
|
||||||
},
|
previews: [],
|
||||||
text: 'Hello there from the new world! http://somewhere.com',
|
text: 'Hello there from the new world! http://somewhere.com',
|
||||||
|
timestamp: Date.now(),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
'id-2.5': {
|
'id-2.5': {
|
||||||
|
@ -64,6 +80,8 @@ const items: Record<string, TimelineItemType> = {
|
||||||
id: 'id-2.5',
|
id: 'id-2.5',
|
||||||
canProcessNow: false,
|
canProcessNow: false,
|
||||||
contact: {
|
contact: {
|
||||||
|
id: '061d3783-5736-4145-b1a2-6b6cf1156393',
|
||||||
|
isMe: false,
|
||||||
phoneNumber: '(202) 555-1000',
|
phoneNumber: '(202) 555-1000',
|
||||||
profileName: 'Mr. Pig',
|
profileName: 'Mr. Pig',
|
||||||
title: 'Mr. Pig',
|
title: 'Mr. Pig',
|
||||||
|
@ -73,30 +91,39 @@ const items: Record<string, TimelineItemType> = {
|
||||||
'id-3': {
|
'id-3': {
|
||||||
type: 'message',
|
type: 'message',
|
||||||
data: {
|
data: {
|
||||||
id: 'id-3',
|
author: getDefaultConversation({ color: 'crimson' }),
|
||||||
collapseMetadata: true,
|
canDeleteForEveryone: false,
|
||||||
|
canDownload: true,
|
||||||
|
canReply: true,
|
||||||
|
conversationColor: 'crimson',
|
||||||
|
conversationId: 'conversation-id',
|
||||||
|
conversationType: 'group',
|
||||||
direction: 'incoming',
|
direction: 'incoming',
|
||||||
timestamp: Date.now(),
|
id: 'id-3',
|
||||||
author: {
|
isBlocked: false,
|
||||||
color: 'crimson',
|
isMessageRequestAccepted: true,
|
||||||
},
|
previews: [],
|
||||||
text: 'Hello there from the new world!',
|
text: 'Hello there from the new world!',
|
||||||
|
timestamp: Date.now(),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
'id-4': {
|
'id-4': {
|
||||||
type: 'timerNotification',
|
type: 'timerNotification',
|
||||||
data: {
|
data: {
|
||||||
|
disabled: false,
|
||||||
|
expireTimer: moment.duration(2, 'hours').asSeconds(),
|
||||||
|
title: "It's Me",
|
||||||
type: 'fromMe',
|
type: 'fromMe',
|
||||||
timespan: '5 minutes',
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
'id-5': {
|
'id-5': {
|
||||||
type: 'timerNotification',
|
type: 'timerNotification',
|
||||||
data: {
|
data: {
|
||||||
type: 'fromOther',
|
disabled: false,
|
||||||
title: '(202) 555-0000',
|
expireTimer: moment.duration(2, 'hours').asSeconds(),
|
||||||
phoneNumber: '(202) 555-0000',
|
phoneNumber: '(202) 555-0000',
|
||||||
timespan: '1 hour',
|
title: '(202) 555-0000',
|
||||||
|
type: 'fromOther',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
'id-6': {
|
'id-6': {
|
||||||
|
@ -106,15 +133,18 @@ const items: Record<string, TimelineItemType> = {
|
||||||
id: '+1202555000',
|
id: '+1202555000',
|
||||||
phoneNumber: '(202) 555-0000',
|
phoneNumber: '(202) 555-0000',
|
||||||
profileName: 'Mr. Fire',
|
profileName: 'Mr. Fire',
|
||||||
|
title: 'Mr. Fire',
|
||||||
},
|
},
|
||||||
|
isGroup: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
'id-7': {
|
'id-7': {
|
||||||
type: 'verificationNotification',
|
type: 'verificationNotification',
|
||||||
data: {
|
data: {
|
||||||
contact: {
|
contact: {
|
||||||
phoneNumber: '(202) 555-0001',
|
|
||||||
name: 'Mrs. Ice',
|
name: 'Mrs. Ice',
|
||||||
|
phoneNumber: '(202) 555-0001',
|
||||||
|
title: 'Mrs. Ice',
|
||||||
},
|
},
|
||||||
isLocal: true,
|
isLocal: true,
|
||||||
type: 'markVerified',
|
type: 'markVerified',
|
||||||
|
@ -148,8 +178,8 @@ const items: Record<string, TimelineItemType> = {
|
||||||
phoneNumber: '(202) 555-0001',
|
phoneNumber: '(202) 555-0001',
|
||||||
name: 'Mrs. Ice',
|
name: 'Mrs. Ice',
|
||||||
title: 'Mrs. Ice',
|
title: 'Mrs. Ice',
|
||||||
|
isMe: false,
|
||||||
},
|
},
|
||||||
isMe: false,
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
'id-9': {
|
'id-9': {
|
||||||
|
@ -159,72 +189,110 @@ const items: Record<string, TimelineItemType> = {
|
||||||
'id-10': {
|
'id-10': {
|
||||||
type: 'message',
|
type: 'message',
|
||||||
data: {
|
data: {
|
||||||
id: 'id-6',
|
author: getDefaultConversation({ color: 'plum' }),
|
||||||
|
canDeleteForEveryone: false,
|
||||||
|
canDownload: true,
|
||||||
|
canReply: true,
|
||||||
|
conversationColor: 'plum',
|
||||||
|
conversationId: 'conversation-id',
|
||||||
|
conversationType: 'group',
|
||||||
direction: 'outgoing',
|
direction: 'outgoing',
|
||||||
timestamp: Date.now(),
|
id: 'id-6',
|
||||||
|
isBlocked: false,
|
||||||
|
isMessageRequestAccepted: true,
|
||||||
|
previews: [],
|
||||||
status: 'sent',
|
status: 'sent',
|
||||||
author: {
|
|
||||||
color: 'plum',
|
|
||||||
},
|
|
||||||
text: '🔥',
|
text: '🔥',
|
||||||
|
timestamp: Date.now(),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
'id-11': {
|
'id-11': {
|
||||||
type: 'message',
|
type: 'message',
|
||||||
data: {
|
data: {
|
||||||
id: 'id-7',
|
author: getDefaultConversation({ color: 'plum' }),
|
||||||
|
canDeleteForEveryone: false,
|
||||||
|
canDownload: true,
|
||||||
|
canReply: true,
|
||||||
|
conversationColor: 'crimson',
|
||||||
|
conversationId: 'conversation-id',
|
||||||
|
conversationType: 'group',
|
||||||
direction: 'outgoing',
|
direction: 'outgoing',
|
||||||
timestamp: Date.now(),
|
id: 'id-7',
|
||||||
|
isBlocked: false,
|
||||||
|
isMessageRequestAccepted: true,
|
||||||
|
previews: [],
|
||||||
status: 'read',
|
status: 'read',
|
||||||
author: {
|
|
||||||
color: 'plum',
|
|
||||||
},
|
|
||||||
text: 'Hello there from the new world! http://somewhere.com',
|
text: 'Hello there from the new world! http://somewhere.com',
|
||||||
|
timestamp: Date.now(),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
'id-12': {
|
'id-12': {
|
||||||
type: 'message',
|
type: 'message',
|
||||||
data: {
|
data: {
|
||||||
id: 'id-8',
|
author: getDefaultConversation({ color: 'crimson' }),
|
||||||
collapseMetadata: true,
|
canDeleteForEveryone: false,
|
||||||
|
canDownload: true,
|
||||||
|
canReply: true,
|
||||||
|
conversationColor: 'crimson',
|
||||||
|
conversationId: 'conversation-id',
|
||||||
|
conversationType: 'group',
|
||||||
direction: 'outgoing',
|
direction: 'outgoing',
|
||||||
|
id: 'id-8',
|
||||||
|
isBlocked: false,
|
||||||
|
isMessageRequestAccepted: true,
|
||||||
|
previews: [],
|
||||||
status: 'sent',
|
status: 'sent',
|
||||||
timestamp: Date.now(),
|
|
||||||
text: 'Hello there from the new world! 🔥',
|
text: 'Hello there from the new world! 🔥',
|
||||||
|
timestamp: Date.now(),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
'id-13': {
|
'id-13': {
|
||||||
type: 'message',
|
type: 'message',
|
||||||
data: {
|
data: {
|
||||||
id: 'id-9',
|
author: getDefaultConversation({ color: 'blue' }),
|
||||||
|
canDeleteForEveryone: false,
|
||||||
|
canDownload: true,
|
||||||
|
canReply: true,
|
||||||
|
conversationColor: 'crimson',
|
||||||
|
conversationId: 'conversation-id',
|
||||||
|
conversationType: 'group',
|
||||||
direction: 'outgoing',
|
direction: 'outgoing',
|
||||||
|
id: 'id-9',
|
||||||
|
isBlocked: false,
|
||||||
|
isMessageRequestAccepted: true,
|
||||||
|
previews: [],
|
||||||
status: 'sent',
|
status: 'sent',
|
||||||
timestamp: Date.now(),
|
|
||||||
author: {
|
|
||||||
color: 'blue',
|
|
||||||
},
|
|
||||||
text:
|
text:
|
||||||
'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
|
'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
|
||||||
|
timestamp: Date.now(),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
'id-14': {
|
'id-14': {
|
||||||
type: 'message',
|
type: 'message',
|
||||||
data: {
|
data: {
|
||||||
id: 'id-10',
|
author: getDefaultConversation({ color: 'crimson' }),
|
||||||
|
canDeleteForEveryone: false,
|
||||||
|
canDownload: true,
|
||||||
|
canReply: true,
|
||||||
|
conversationColor: 'crimson',
|
||||||
|
conversationId: 'conversation-id',
|
||||||
|
conversationType: 'group',
|
||||||
direction: 'outgoing',
|
direction: 'outgoing',
|
||||||
|
id: 'id-10',
|
||||||
|
isBlocked: false,
|
||||||
|
isMessageRequestAccepted: true,
|
||||||
|
previews: [],
|
||||||
status: 'read',
|
status: 'read',
|
||||||
timestamp: Date.now(),
|
|
||||||
collapseMetadata: true,
|
|
||||||
text:
|
text:
|
||||||
'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
|
'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
|
||||||
|
timestamp: Date.now(),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
'id-15': {
|
'id-15': {
|
||||||
type: 'linkNotification',
|
type: 'linkNotification',
|
||||||
data: null,
|
data: null,
|
||||||
},
|
},
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
};
|
||||||
} as any;
|
|
||||||
|
|
||||||
const actions = () => ({
|
const actions = () => ({
|
||||||
acknowledgeGroupMemberNameCollisions: action(
|
acknowledgeGroupMemberNameCollisions: action(
|
||||||
|
@ -390,7 +458,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
||||||
renderTypingBubble,
|
renderTypingBubble,
|
||||||
typingContact: boolean(
|
typingContact: boolean(
|
||||||
'typingContact',
|
'typingContact',
|
||||||
!!overrideProps.typingContact || false
|
isBoolean(overrideProps.typingContact) ? overrideProps.typingContact : false
|
||||||
),
|
),
|
||||||
|
|
||||||
...actions(),
|
...actions(),
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue