diff --git a/app/constants/colors.ts b/app/constants/colors.ts index b28416b86..397f2eb19 100644 --- a/app/constants/colors.ts +++ b/app/constants/colors.ts @@ -66,6 +66,8 @@ export const themes: any = { previewTintColor: '#ffffff', backdropOpacity: 0.3, attachmentLoadingOpacity: 0.7, + collapsibleQuoteBorder: '#CBCED1', + collapsibleChevron: '#6C727A', ...mentions }, dark: { @@ -114,6 +116,8 @@ export const themes: any = { previewTintColor: '#ffffff', backdropOpacity: 0.9, attachmentLoadingOpacity: 0.3, + collapsibleQuoteBorder: '#CBCED1', + collapsibleChevron: '#6C727A', ...mentions }, black: { @@ -162,6 +166,8 @@ export const themes: any = { previewTintColor: '#ffffff', backdropOpacity: 0.9, attachmentLoadingOpacity: 0.3, + collapsibleQuoteBorder: '#CBCED1', + collapsibleChevron: '#6C727A', ...mentions } }; diff --git a/app/containers/message/Attachments.tsx b/app/containers/message/Attachments.tsx index 8ca931836..c2bbcd56e 100644 --- a/app/containers/message/Attachments.tsx +++ b/app/containers/message/Attachments.tsx @@ -10,6 +10,7 @@ import Reply from './Reply'; import Button from '../Button'; import styles from './styles'; import MessageContext from './Context'; +import CollapsibleQuote from './Components/CollapsibleQuote'; const AttachedActions = ({ attachment, theme }: IMessageAttachedActions) => { const { onAnswerButtonPress } = useContext(MessageContext); @@ -51,6 +52,10 @@ const Attachments = React.memo( if (file.actions && file.actions.length > 0) { return ; } + if (file.title) + return ( + + ); return ( ( + + {}, + user: { username: 'Marcos' } + }}> + {}} timeFormat='LT' /> + + +)); diff --git a/app/containers/message/Components/CollapsibleQuote/CollapsibleQuote.test.tsx b/app/containers/message/Components/CollapsibleQuote/CollapsibleQuote.test.tsx new file mode 100644 index 000000000..d94e4c904 --- /dev/null +++ b/app/containers/message/Components/CollapsibleQuote/CollapsibleQuote.test.tsx @@ -0,0 +1,94 @@ +import { fireEvent, render, within } from '@testing-library/react-native'; +import React from 'react'; + +import MessageContext from '../../Context'; +import CollapsibleQuote from '.'; + +// For some reason a general mock didn't work, I have to do a search +jest.mock('react-native-mmkv-storage', () => ({ + Loader: jest.fn().mockImplementation(() => ({ + setProcessingMode: jest.fn().mockImplementation(() => ({ + withEncryption: jest.fn().mockImplementation(() => ({ + initialize: jest.fn() + })) + })) + })), + create: jest.fn(), + MODES: { MULTI_PROCESS: '' } +})); + +const testAttachment = { + ts: '1970-01-01T00:00:00.000Z', + title: 'Engineering (9 today)', + fields: [ + { + title: 'Out Today:\n', + value: + 'Ricardo Mellu, 1 day, until Fri Mar 11\nLoma, 1 day, until Fri Mar 11\nAnitta, 3 hours\nDiego Carlitos, 19 days, until Fri Mar 11\nGabriel Vasconcelos, 5 days, until Fri Mar 11\nJorge Leite, 1 day, until Fri Mar 11\nKevin Aleman, 1 day, until Fri Mar 11\nPierre, 1 day, until Fri Mar 11\nTiago Evangelista Pinto, 1 day, until Fri Mar 11' + } + ], + attachments: [], + collapsed: true +}; + +const mockFn = jest.fn(); + +const Render = () => ( + {}, + user: { username: 'Marcos' } + }}> + + +); + +const touchableTestID = `collapsibleQuoteTouchable-${testAttachment.title}`; + +describe('CollapsibleQuote', () => { + test('rendered', async () => { + const { findByTestId } = render(); + const collapsibleQuoteTouchable = await findByTestId(touchableTestID); + expect(collapsibleQuoteTouchable).toBeTruthy(); + }); + + test('title exists and is correct', async () => { + const { findByText } = render(); + const collapsibleQuoteTitle = await findByText(testAttachment.title); + expect(collapsibleQuoteTitle).toBeTruthy(); + expect(collapsibleQuoteTitle.props.children).toEqual(testAttachment.title); + }); + + test('fields render title correctly', async () => { + const collapsibleQuote = render(); + const collapsibleQuoteTouchable = await collapsibleQuote.findByTestId(touchableTestID); + // open + fireEvent.press(collapsibleQuoteTouchable); + const open = within(collapsibleQuoteTouchable); + const fieldTitleOpen = open.getByTestId('collapsibleQuoteTouchableFieldTitle'); + expect(fieldTitleOpen).toBeTruthy(); + expect(fieldTitleOpen.props.children).toEqual(testAttachment.fields[0].title); + // close + fireEvent.press(collapsibleQuoteTouchable); + collapsibleQuote.rerender(); + const close = within(collapsibleQuoteTouchable); + const fieldTitleClosed = close.queryByTestId('collapsibleQuoteTouchableFieldTitle'); + expect(fieldTitleClosed).toBeNull(); + }); + + test('fields render fields correctly', async () => { + const collapsibleQuote = render(); + const collapsibleQuoteTouchable = await collapsibleQuote.findByTestId(touchableTestID); + // open + fireEvent.press(collapsibleQuoteTouchable); + const open = within(collapsibleQuoteTouchable); + const fieldValueOpen = open.getByLabelText(testAttachment.fields[0].value.split('\n')[0]); + expect(fieldValueOpen).toBeTruthy(); + // close + fireEvent.press(collapsibleQuoteTouchable); + collapsibleQuote.rerender(); + const close = within(collapsibleQuoteTouchable); + const fieldValueClosed = close.queryByTestId(testAttachment.fields[0].value.split('\n')[0]); + expect(fieldValueClosed).toBeNull(); + }); +}); diff --git a/app/containers/message/Components/CollapsibleQuote/__snapshots__/CollapsibleQuote.stories.storyshot b/app/containers/message/Components/CollapsibleQuote/__snapshots__/CollapsibleQuote.stories.storyshot new file mode 100644 index 000000000..a101f5a5b --- /dev/null +++ b/app/containers/message/Components/CollapsibleQuote/__snapshots__/CollapsibleQuote.stories.storyshot @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Message Item 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"padding\\":10}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"testID\\":\\"collapsibleQuoteTouchable-Engineering (9 today)\\",\\"hitSlop\\":{\\"top\\":4,\\"right\\":4,\\"bottom\\":4,\\"left\\":4},\\"focusable\\":true,\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginTop\\":6,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"minHeight\\":40,\\"backgroundColor\\":\\"#f3f4f5\\",\\"borderLeftColor\\":\\"#CBCED1\\",\\"borderTopColor\\":\\"#e1e5e8\\",\\"borderRightColor\\":\\"#e1e5e8\\",\\"borderBottomColor\\":\\"#e1e5e8\\",\\"borderLeftWidth\\":2,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"borderRadius\\":4,\\"padding\\":8}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Engineering (9 today)\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":20,\\"height\\":20,\\"right\\":8,\\"top\\":8,\\"justifyContent\\":\\"center\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":22,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}]}"`; diff --git a/app/containers/message/Components/CollapsibleQuote/index.tsx b/app/containers/message/Components/CollapsibleQuote/index.tsx new file mode 100644 index 000000000..484e690ba --- /dev/null +++ b/app/containers/message/Components/CollapsibleQuote/index.tsx @@ -0,0 +1,185 @@ +import { transparentize } from 'color2k'; +import { dequal } from 'dequal'; +import React, { useContext, useState } from 'react'; +import { StyleSheet, Text, View } from 'react-native'; + +import { themes } from '../../../../constants/colors'; +import { IAttachment } from '../../../../definitions/IAttachment'; +import { TGetCustomEmoji } from '../../../../definitions/IEmoji'; +import { CustomIcon } from '../../../../lib/Icons'; +import { useTheme } from '../../../../theme'; +import sharedStyles from '../../../../views/Styles'; +import Markdown from '../../../markdown'; +import MessageContext from '../../Context'; +import Touchable from '../../Touchable'; +import { BUTTON_HIT_SLOP } from '../../utils'; + +const styles = StyleSheet.create({ + button: { + flexDirection: 'row', + alignItems: 'center', + marginTop: 6, + borderWidth: 1, + borderRadius: 4, + minHeight: 40 + }, + attachmentContainer: { + flex: 1, + borderRadius: 4, + padding: 8 + }, + authorContainer: { + flexDirection: 'row' + }, + fieldContainer: { + flexDirection: 'column', + paddingLeft: 10, + paddingTop: 10, + paddingBottom: 10 + }, + fieldTitle: { + fontSize: 15, + ...sharedStyles.textBold + }, + marginTop: { + marginTop: 4 + }, + marginBottom: { + marginBottom: 4 + }, + title: { + fontSize: 16, + ...sharedStyles.textMedium + }, + touchableContainer: { + flexDirection: 'row' + }, + markdownFontSize: { + fontSize: 15 + }, + iconContainer: { + width: 20, + height: 20, + right: 8, + top: 8, + justifyContent: 'center', + alignItems: 'center' + } +}); + +interface IMessageFields { + attachment: IAttachment; + getCustomEmoji: TGetCustomEmoji; +} + +interface IMessageReply { + attachment: IAttachment; + timeFormat?: string; + index: number; + getCustomEmoji: TGetCustomEmoji; +} + +const Fields = React.memo( + ({ attachment, getCustomEmoji }: IMessageFields) => { + if (!attachment.fields) { + return null; + } + const { baseUrl, user } = useContext(MessageContext); + const { theme } = useTheme(); + return ( + <> + {attachment.fields.map(field => ( + + + {field.title} + + + + ))} + + ); + }, + (prevProps, nextProps) => dequal(prevProps.attachment.fields, nextProps.attachment.fields) +); + +const CollapsibleQuote = React.memo( + ({ attachment, index, getCustomEmoji }: IMessageReply) => { + if (!attachment) { + return null; + } + const [collapsed, setCollapsed] = useState(attachment.collapsed); + const { theme } = useTheme(); + + const onPress = () => { + setCollapsed(!collapsed); + }; + + let { + borderColor, + chatComponentBackground: backgroundColor, + collapsibleQuoteBorder, + collapsibleChevron, + headerTintColor + } = themes[theme]; + + try { + if (attachment.color) { + backgroundColor = transparentize(attachment.color, 0.8); + borderColor = attachment.color; + collapsibleQuoteBorder = attachment.color; + collapsibleChevron = attachment.color; + headerTintColor = headerTintColor; + } + } catch (e) { + // fallback to default + } + + return ( + <> + 0 && styles.marginTop, + attachment.description && styles.marginBottom, + { + backgroundColor, + borderLeftColor: collapsibleQuoteBorder, + borderTopColor: borderColor, + borderRightColor: borderColor, + borderBottomColor: borderColor, + borderLeftWidth: 2 + } + ]} + background={Touchable.Ripple(themes[theme].bannerBackground)} + hitSlop={BUTTON_HIT_SLOP}> + + + + {attachment.title} + + {!collapsed && } + + + + + + + + ); + }, + (prevProps, nextProps) => dequal(prevProps.attachment, nextProps.attachment) +); + +CollapsibleQuote.displayName = 'CollapsibleQuote'; +Fields.displayName = 'CollapsibleQuoteFields'; + +export default CollapsibleQuote; diff --git a/app/definitions/IAttachment.ts b/app/definitions/IAttachment.ts index 06ad1859c..c3fb944aa 100644 --- a/app/definitions/IAttachment.ts +++ b/app/definitions/IAttachment.ts @@ -1,10 +1,10 @@ import { IUser } from './IUser'; export interface IAttachment { - ts: string | Date; + ts?: string | Date; title: string; - type: string; - description: string; + type?: string; + description?: string; title_link?: string; image_url?: string; image_type?: string; @@ -24,6 +24,8 @@ export interface IAttachment { author_link?: string; color?: string; thumb_url?: string; + attachments?: any[]; + collapsed?: boolean; } export interface IServerAttachment { diff --git a/package.json b/package.json index cd28c186e..4d42ca4e1 100644 --- a/package.json +++ b/package.json @@ -143,6 +143,7 @@ "@rocket.chat/eslint-config": "^0.4.0", "@storybook/addon-storyshots": "5.3.21", "@storybook/react-native": "5.3.25", + "@testing-library/jest-native": "^4.0.4", "@testing-library/react-native": "^9.0.0", "@types/bytebuffer": "^5.0.43", "@types/ejson": "^2.1.3", @@ -205,7 +206,10 @@ }, "transform": { "^.+\\.js$": "/node_modules/react-native/jest/preprocessor.js" - } + }, + "setupFilesAfterEnv": [ + "@testing-library/jest-native/extend-expect" + ] }, "snyk": true, "engines": { diff --git a/storybook/stories/__snapshots__/Message.storyshot b/storybook/stories/__snapshots__/Message.storyshot index ac9fa7a75..460962b01 100644 --- a/storybook/stories/__snapshots__/Message.storyshot +++ b/storybook/stories/__snapshots__/Message.storyshot @@ -58,7 +58,7 @@ exports[`Storyshots Message System messages 1`] = `"{\\"type\\":\\"RCTScrollView exports[`Storyshots Message Temp 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":null,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginTop\\":4}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=36\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},{\\"marginLeft\\":10}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"space-between\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"flexShrink\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"lineHeight\\":22,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"diego.mello\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"marginLeft\\":8,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"opacity\\":0.3}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},null,{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Temp message\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"Temp message\\"]}]}]}]}]}]}]}]}]}]}"`; -exports[`Storyshots Message Thumbnail from server 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":null,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginTop\\":4}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=36\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},{\\"marginLeft\\":10}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"space-between\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"flexShrink\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"lineHeight\\":22,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"diego.mello\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"marginLeft\\":8,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},null,{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"this is a thumbnail\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"this is a thumbnail\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginTop\\":6,\\"alignSelf\\":\\"flex-start\\",\\"borderWidth\\":1,\\"borderRadius\\":4,\\"backgroundColor\\":\\"#f3f4f5\\",\\"borderColor\\":\\"#e1e5e8\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"borderRadius\\":4,\\"flexDirection\\":\\"column\\",\\"padding\\":15}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"fontSize\\":16,\\"marginBottom\\":3,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"Title\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":null,\\"height\\":200,\\"flex\\":1,\\"borderTopLeftRadius\\":4,\\"borderTopRightRadius\\":4,\\"marginBottom\\":1}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://images-na.ssl-images-amazon.com/images/I/71jKxPAMFbL._AC_SL1500_.jpg\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},null,{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Image text\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"Image text\\"]}]}]}]}]}]}]}]}]}]}]}"`; +exports[`Storyshots Message Thumbnail from server 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":null,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginTop\\":4}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=36\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},{\\"marginLeft\\":10}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"space-between\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"flexShrink\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"lineHeight\\":22,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"diego.mello\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"marginLeft\\":8,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},null,{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"this is a thumbnail\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"this is a thumbnail\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"testID\\":\\"collapsibleQuoteTouchable-Title\\",\\"hitSlop\\":{\\"top\\":4,\\"right\\":4,\\"bottom\\":4,\\"left\\":4},\\"focusable\\":true,\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginTop\\":6,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"minHeight\\":40,\\"backgroundColor\\":\\"#f3f4f5\\",\\"borderLeftColor\\":\\"#CBCED1\\",\\"borderTopColor\\":\\"#e1e5e8\\",\\"borderRightColor\\":\\"#e1e5e8\\",\\"borderBottomColor\\":\\"#e1e5e8\\",\\"borderLeftWidth\\":2,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"borderRadius\\":4,\\"padding\\":8}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Title\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":20,\\"height\\":20,\\"right\\":8,\\"top\\":8,\\"justifyContent\\":\\"center\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":22,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}]}]}]}]}]}]}]}"`; exports[`Storyshots Message Time format 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":null,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginTop\\":4}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=36\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},{\\"marginLeft\\":10}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"space-between\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"flexShrink\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"lineHeight\\":22,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"diego.mello\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"marginLeft\\":8,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"10 November 2017\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},null,{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Testing\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"Testing\\"]}]}]}]}]}]}]}]}]}]}"`; diff --git a/storybook/stories/index.js b/storybook/stories/index.js index da4d1c7dd..f24e19003 100644 --- a/storybook/stories/index.js +++ b/storybook/stories/index.js @@ -19,6 +19,7 @@ import '../../app/containers/RoomHeader/RoomHeader.stories.js'; import '../../app/views/RoomView/LoadMore/LoadMore.stories'; import '../../app/views/CannedResponsesListView/CannedResponseItem.stories'; import '../../app/containers/TextInput.stories'; +import '../../app/containers/message/Components/CollapsibleQuote/CollapsibleQuote.stories'; // Change here to see themed storybook export const theme = 'light'; diff --git a/yarn.lock b/yarn.lock index e39d74cf8..4f5e32e27 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4143,6 +4143,18 @@ telejson "^3.2.0" util-deprecate "^1.0.2" +"@testing-library/jest-native@^4.0.4": + version "4.0.4" + resolved "https://registry.yarnpkg.com/@testing-library/jest-native/-/jest-native-4.0.4.tgz#25e2046896118f887683202a6e5fd8a4056131cd" + integrity sha512-4q5FeTFyFgPCmQH18uMJsZkVnYvBtK24yhSfbd9hQi0SZzCpbjSeQQcsGXIaX+WjWcMeeip8B7NUvZmLhGHiZw== + dependencies: + chalk "^2.4.1" + jest-diff "^24.0.0" + jest-matcher-utils "^24.0.0" + pretty-format "^27.3.1" + ramda "^0.26.1" + redent "^2.0.0" + "@testing-library/react-native@^9.0.0": version "9.0.0" resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-9.0.0.tgz#e9c63411e93d2e8e70d744b12aeb78c58025c5fc" @@ -9993,6 +10005,11 @@ imurmurhash@^0.1.4: resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea" integrity sha1-khi5srkoojixPcT7a21XbyMUU+o= +indent-string@^3.0.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289" + integrity sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok= + indent-string@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251" @@ -10708,7 +10725,7 @@ jest-config@^27.0.6: micromatch "^4.0.4" pretty-format "^27.0.6" -jest-diff@^24.3.0, jest-diff@^24.9.0: +jest-diff@^24.0.0, jest-diff@^24.3.0, jest-diff@^24.9.0: version "24.9.0" resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da" integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ== @@ -10903,7 +10920,7 @@ jest-leak-detector@^27.0.6: jest-get-type "^27.0.6" pretty-format "^27.0.6" -jest-matcher-utils@^24.9.0: +jest-matcher-utils@^24.0.0, jest-matcher-utils@^24.9.0: version "24.9.0" resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.9.0.tgz#f5b3661d5e628dffe6dd65251dfdae0e87c3a073" integrity sha512-OZz2IXsu6eaiMAwe67c1T+5tUAtQyQx27/EMEkbFAGiw52tB9em+uGbzpcgYVpA8wl0hlxKPZxrly4CXU/GjHA== @@ -13836,6 +13853,15 @@ pretty-format@^27.0.6: ansi-styles "^5.0.0" react-is "^17.0.1" +pretty-format@^27.3.1: + version "27.5.1" + resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e" + integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ== + dependencies: + ansi-regex "^5.0.1" + ansi-styles "^5.0.0" + react-is "^17.0.1" + pretty-hrtime@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1" @@ -14108,6 +14134,11 @@ ramda@^0.21.0: resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.21.0.tgz#a001abedb3ff61077d4ff1d577d44de77e8d0a35" integrity sha1-oAGr7bP/YQd9T/HVd9RN536NCjU= +ramda@^0.26.1: + version "0.26.1" + resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06" + integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ== + random-bytes@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/random-bytes/-/random-bytes-1.0.0.tgz#4f68a1dc0ae58bd3fb95848c30324db75d64360b" @@ -14938,6 +14969,14 @@ recursive-readdir@2.2.2: dependencies: minimatch "3.0.4" +redent@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/redent/-/redent-2.0.0.tgz#c1b2007b42d57eb1389079b3c8333639d5e1ccaa" + integrity sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo= + dependencies: + indent-string "^3.0.0" + strip-indent "^2.0.0" + reduce-flatten@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/reduce-flatten/-/reduce-flatten-2.0.0.tgz#734fd84e65f375d7ca4465c69798c25c9d10ae27" @@ -16262,6 +16301,11 @@ strip-final-newline@^2.0.0: resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad" integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA== +strip-indent@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68" + integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g= + strip-json-comments@3.1.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"