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