diff --git a/__tests__/containers/markdown/__snapshots__/Markdown.stories.storyshot b/__tests__/containers/markdown/__snapshots__/Markdown.stories.storyshot index 1f7ca54d4..e73d12394 100644 --- a/__tests__/containers/markdown/__snapshots__/Markdown.stories.storyshot +++ b/__tests__/containers/markdown/__snapshots__/Markdown.stories.storyshot @@ -2,7 +2,7 @@ exports[`Storyshots Markdown Block Quote 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginHorizontal\\":15,\\"backgroundColor\\":\\"#ffffff\\",\\"marginVertical\\":50}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"alignItems\\":\\"flex-start\\",\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":\\"100%\\",\\"width\\":2,\\"marginRight\\":5},{\\"backgroundColor\\":\\"#e1e5e8\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"This is block quote\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},null,{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"This is block quote\\"]}]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"this is a normal line\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"this is a normal line\\"]}]}]}"`; -exports[`Storyshots Markdown Code 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginHorizontal\\":15,\\"backgroundColor\\":\\"#ffffff\\",\\"marginVertical\\":50}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"This is \\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"This is \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"#f1f2f4\\",\\"fontFamily\\":\\"Courier New\\",\\"fontWeight\\":\\"400\\",\\"borderWidth\\":1,\\"borderRadius\\":4,\\"paddingLeft\\":2,\\"paddingTop\\":2,\\"color\\":\\"#2f343d\\",\\"borderColor\\":\\"#f1f2f4\\"}]},\\"children\\":[\\"inline code\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Inline \\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"Inline \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"#f1f2f4\\",\\"fontFamily\\":\\"Courier New\\",\\"fontWeight\\":\\"400\\",\\"borderWidth\\":1,\\"borderRadius\\":4,\\"paddingLeft\\":2,\\"paddingTop\\":2,\\"color\\":\\"#2f343d\\",\\"borderColor\\":\\"#f1f2f4\\"}]},\\"children\\":[\\"code\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" has \\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\" has \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"#f1f2f4\\",\\"fontFamily\\":\\"Courier New\\",\\"fontWeight\\":\\"400\\",\\"borderWidth\\":1,\\"borderRadius\\":4,\\"paddingLeft\\":2,\\"paddingTop\\":2,\\"color\\":\\"#2f343d\\",\\"borderColor\\":\\"#f1f2f4\\"}]},\\"children\\":[\\"back-ticks around\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" it.\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\" it.\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"borderWidth\\":1,\\"borderRadius\\":4,\\"padding\\":4,\\"backgroundColor\\":\\"#f1f2f4\\",\\"borderColor\\":\\"#e1e5e8\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Courier New\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"Code block 1\\\\n\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"And other code block in sequence\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"And other code block in sequence\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"borderWidth\\":1,\\"borderRadius\\":4,\\"padding\\":4,\\"backgroundColor\\":\\"#f1f2f4\\",\\"borderColor\\":\\"#e1e5e8\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Courier New\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"Code block 2\\\\n\\"]}]}]}"`; +exports[`Storyshots Markdown Code 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginHorizontal\\":15,\\"backgroundColor\\":\\"#ffffff\\",\\"marginVertical\\":50}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"This is \\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"This is \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"#f1f2f4\\",\\"fontFamily\\":\\"Courier New\\",\\"fontWeight\\":\\"400\\",\\"borderWidth\\":1,\\"borderRadius\\":4,\\"paddingLeft\\":2,\\"paddingTop\\":2,\\"color\\":\\"#2f343d\\",\\"borderColor\\":\\"#f1f2f4\\"}]},\\"children\\":[\\"inline code\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Inline \\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"Inline \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"#f1f2f4\\",\\"fontFamily\\":\\"Courier New\\",\\"fontWeight\\":\\"400\\",\\"borderWidth\\":1,\\"borderRadius\\":4,\\"paddingLeft\\":2,\\"paddingTop\\":2,\\"color\\":\\"#2f343d\\",\\"borderColor\\":\\"#f1f2f4\\"}]},\\"children\\":[\\"code\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" has \\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\" has \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"#f1f2f4\\",\\"fontFamily\\":\\"Courier New\\",\\"fontWeight\\":\\"400\\",\\"borderWidth\\":1,\\"borderRadius\\":4,\\"paddingLeft\\":2,\\"paddingTop\\":2,\\"color\\":\\"#2f343d\\",\\"borderColor\\":\\"#f1f2f4\\"}]},\\"children\\":[\\"back-ticks around\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" it.\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\" it.\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"borderWidth\\":1,\\"borderRadius\\":4,\\"padding\\":4,\\"color\\":\\"#2f343d\\",\\"backgroundColor\\":\\"#f1f2f4\\",\\"borderColor\\":\\"#f1f2f4\\"}]},\\"children\\":[\\"Code block\\\\n\\"]}]}"`; exports[`Storyshots Markdown Emoji 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginHorizontal\\":15,\\"backgroundColor\\":\\"#ffffff\\",\\"marginVertical\\":50}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Unicode: 😃😇👍\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"Unicode: 😃😇👍\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Shortnames: \\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"Shortnames: \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#2f343d\\"},{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{}]},\\"children\\":[\\"😂\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#2f343d\\"},{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{}]},\\"children\\":[\\"👍\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Custom emojis: \\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"Custom emojis: \\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},[{\\"width\\":20,\\"height\\":20}]]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/emoji-custom/react_rocket.png\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" \\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\" \\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},[{\\"width\\":20,\\"height\\":20}]]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/emoji-custom/nyan_rocket.png\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" \\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\" \\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},[{\\"width\\":20,\\"height\\":20}]]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/emoji-custom/marioparty.gif\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"😃 \\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{\\"fontSize\\":30,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"😃 \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#2f343d\\"},{\\"fontSize\\":30,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{}]},\\"children\\":[\\"👍\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" \\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{\\"fontSize\\":30,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\" \\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},[{\\"width\\":30,\\"height\\":30}]]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/emoji-custom/marioparty.gif\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]}]}]}"`; diff --git a/app/containers/MessageComposer/__snapshots__/MessageComposer.test.tsx.snap b/app/containers/MessageComposer/__snapshots__/MessageComposer.test.tsx.snap index 6633a23c7..f40e9eb75 100644 --- a/app/containers/MessageComposer/__snapshots__/MessageComposer.test.tsx.snap +++ b/app/containers/MessageComposer/__snapshots__/MessageComposer.test.tsx.snap @@ -4,7 +4,7 @@ exports[`MessageComposer Audio tap record 1`] = ` @@ -51,12 +51,12 @@ exports[`MessageComposer Audio tap record 1`] = ` @@ -143,7 +143,7 @@ exports[`MessageComposer Audio tap record 1`] = ` @@ -239,13 +239,13 @@ exports[`MessageComposer Quote Add quote \`abc\` 1`] = ` @@ -346,8 +346,8 @@ exports[`MessageComposer Quote Add quote \`abc\` 1`] = ` placeholder="" placeholderTextColor="#9EA2A8" style={ - Array [ - Object { + [ + { "backgroundColor": "transparent", "flex": 1, "fontFamily": "Inter", @@ -361,7 +361,7 @@ exports[`MessageComposer Quote Add quote \`abc\` 1`] = ` "textAlign": "left", "textAlignVertical": "center", }, - Object { + { "color": "#2F343D", }, ] @@ -371,7 +371,7 @@ exports[`MessageComposer Quote Add quote \`abc\` 1`] = ` /> @@ -447,7 +447,7 @@ exports[`MessageComposer Quote Add quote \`abc\` 1`] = ` @@ -618,18 +618,18 @@ exports[`MessageComposer Quote Add quote \`abc\` 1`] = ` accessibilityLabel="Message abc" numberOfLines={1} style={ - Array [ - Object { + [ + { "backgroundColor": "transparent", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "400", "textAlign": "left", }, - Object { + { "color": "#2f343d", }, - Object { + { "backgroundColor": "transparent", "color": "#2F343D", "fontFamily": "Inter", @@ -656,13 +656,13 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = ` @@ -763,8 +763,8 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = ` placeholder="" placeholderTextColor="#9EA2A8" style={ - Array [ - Object { + [ + { "backgroundColor": "transparent", "flex": 1, "fontFamily": "Inter", @@ -778,7 +778,7 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = ` "textAlign": "left", "textAlignVertical": "center", }, - Object { + { "color": "#2F343D", }, ] @@ -788,7 +788,7 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = ` /> @@ -864,7 +864,7 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = ` @@ -1036,18 +1036,18 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = ` accessibilityLabel="Message abc" numberOfLines={1} style={ - Array [ - Object { + [ + { "backgroundColor": "transparent", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "400", "textAlign": "left", }, - Object { + { "color": "#2f343d", }, - Object { + { "backgroundColor": "transparent", "color": "#2F343D", "fontFamily": "Inter", @@ -1067,8 +1067,8 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = ` @@ -1213,18 +1213,18 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = ` accessibilityLabel="Message def" numberOfLines={1} style={ - Array [ - Object { + [ + { "backgroundColor": "transparent", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "400", "textAlign": "left", }, - Object { + { "color": "#2f343d", }, - Object { + { "backgroundColor": "transparent", "color": "#2F343D", "fontFamily": "Inter", @@ -1251,13 +1251,13 @@ exports[`MessageComposer Quote Remove a quote 1`] = ` @@ -1358,8 +1358,8 @@ exports[`MessageComposer Quote Remove a quote 1`] = ` placeholder="" placeholderTextColor="#9EA2A8" style={ - Array [ - Object { + [ + { "backgroundColor": "transparent", "flex": 1, "fontFamily": "Inter", @@ -1373,7 +1373,7 @@ exports[`MessageComposer Quote Remove a quote 1`] = ` "textAlign": "left", "textAlignVertical": "center", }, - Object { + { "color": "#2F343D", }, ] @@ -1383,7 +1383,7 @@ exports[`MessageComposer Quote Remove a quote 1`] = ` /> @@ -1459,7 +1459,7 @@ exports[`MessageComposer Quote Remove a quote 1`] = ` @@ -1631,18 +1631,18 @@ exports[`MessageComposer Quote Remove a quote 1`] = ` accessibilityLabel="Message abc" numberOfLines={1} style={ - Array [ - Object { + [ + { "backgroundColor": "transparent", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "400", "textAlign": "left", }, - Object { + { "color": "#2f343d", }, - Object { + { "backgroundColor": "transparent", "color": "#2F343D", "fontFamily": "Inter", @@ -1662,8 +1662,8 @@ exports[`MessageComposer Quote Remove a quote 1`] = ` @@ -1808,18 +1808,18 @@ exports[`MessageComposer Quote Remove a quote 1`] = ` accessibilityLabel="Message def" numberOfLines={1} style={ - Array [ - Object { + [ + { "backgroundColor": "transparent", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "400", "textAlign": "left", }, - Object { + { "color": "#2f343d", }, - Object { + { "backgroundColor": "transparent", "color": "#2F343D", "fontFamily": "Inter", @@ -1846,13 +1846,13 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = ` @@ -1977,7 +1977,7 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = ` @@ -2048,7 +2048,7 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = ` @@ -2119,7 +2119,7 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = ` @@ -2190,7 +2190,7 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = ` @@ -2261,7 +2261,7 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = ` @@ -2332,7 +2332,7 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = ` @@ -2410,13 +2410,13 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = ` @@ -2541,7 +2541,7 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = ` @@ -2612,7 +2612,7 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = ` @@ -2683,7 +2683,7 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = ` @@ -2754,7 +2754,7 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = ` @@ -2825,7 +2825,7 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = ` @@ -2896,7 +2896,7 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = ` @@ -2974,13 +2974,13 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = ` @@ -3105,7 +3105,7 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = ` @@ -3176,7 +3176,7 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = ` @@ -3247,7 +3247,7 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = ` @@ -3318,7 +3318,7 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = ` @@ -3389,7 +3389,7 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = ` @@ -3460,7 +3460,7 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = ` @@ -3538,13 +3538,13 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = ` @@ -3669,7 +3669,7 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = ` @@ -3740,7 +3740,7 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = ` @@ -3811,7 +3811,7 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = ` @@ -3882,7 +3882,7 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = ` @@ -3953,7 +3953,7 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = ` @@ -4024,7 +4024,7 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = ` @@ -4102,13 +4102,13 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = ` @@ -4233,7 +4233,7 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = ` @@ -4304,7 +4304,7 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = ` @@ -4375,7 +4375,7 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = ` @@ -4446,7 +4446,7 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = ` @@ -4517,7 +4517,7 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = ` @@ -4588,7 +4588,7 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = ` @@ -4666,13 +4666,13 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = ` @@ -4797,7 +4797,7 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = ` @@ -4868,7 +4868,7 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = ` @@ -4939,7 +4939,7 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = ` @@ -5010,7 +5010,7 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = ` @@ -5081,7 +5081,7 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = ` @@ -5152,7 +5152,7 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = ` @@ -5230,13 +5230,13 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = ` @@ -5361,7 +5361,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = ` @@ -5432,7 +5432,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = ` @@ -5503,7 +5503,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = ` @@ -5574,7 +5574,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = ` @@ -5645,7 +5645,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = ` @@ -5716,7 +5716,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = ` @@ -5794,13 +5794,13 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = ` @@ -5925,7 +5925,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = ` @@ -5996,7 +5996,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = ` @@ -6067,7 +6067,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = ` @@ -6138,7 +6138,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = ` @@ -6209,7 +6209,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = ` @@ -6280,7 +6280,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = ` @@ -6358,13 +6358,13 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = ` @@ -6489,7 +6489,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = ` @@ -6560,7 +6560,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = ` @@ -6631,7 +6631,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = ` @@ -6702,7 +6702,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = ` @@ -6773,7 +6773,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = ` @@ -6844,7 +6844,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = ` @@ -6922,13 +6922,13 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = ` @@ -7053,7 +7053,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = ` @@ -7124,7 +7124,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = ` @@ -7195,7 +7195,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = ` @@ -7266,7 +7266,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = ` @@ -7337,7 +7337,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = ` @@ -7408,7 +7408,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = ` @@ -7486,13 +7486,13 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = ` @@ -7617,7 +7617,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = ` @@ -7688,7 +7688,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = ` @@ -7759,7 +7759,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = ` @@ -7830,7 +7830,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = ` @@ -7901,7 +7901,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = ` @@ -7972,7 +7972,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = ` @@ -8050,13 +8050,13 @@ exports[`MessageComposer Toolbar tap actions 1`] = ` @@ -8181,7 +8181,7 @@ exports[`MessageComposer Toolbar tap actions 1`] = ` @@ -8252,7 +8252,7 @@ exports[`MessageComposer Toolbar tap actions 1`] = ` @@ -8323,7 +8323,7 @@ exports[`MessageComposer Toolbar tap actions 1`] = ` @@ -8394,7 +8394,7 @@ exports[`MessageComposer Toolbar tap actions 1`] = ` @@ -8472,13 +8472,13 @@ exports[`MessageComposer Toolbar tap emoji 1`] = ` @@ -8603,7 +8603,7 @@ exports[`MessageComposer Toolbar tap emoji 1`] = ` @@ -8674,7 +8674,7 @@ exports[`MessageComposer Toolbar tap emoji 1`] = ` @@ -8749,17 +8749,17 @@ exports[`MessageComposer Toolbar tap emoji 1`] = ` `; exports[`MessageComposer Toolbar tap mention 1`] = ` -Array [ +[ @@ -8884,7 +8884,7 @@ Array [ @@ -8955,7 +8955,7 @@ Array [ @@ -9026,7 +9026,7 @@ Array [ @@ -9097,7 +9097,7 @@ Array [ @@ -9171,8 +9171,8 @@ Array [ , @@ -9615,8 +9615,8 @@ exports[`MessageComposer renders correctly 1`] = ` placeholder="" placeholderTextColor="#9EA2A8" style={ - Array [ - Object { + [ + { "backgroundColor": "transparent", "flex": 1, "fontFamily": "Inter", @@ -9630,7 +9630,7 @@ exports[`MessageComposer renders correctly 1`] = ` "textAlign": "left", "textAlignVertical": "center", }, - Object { + { "color": "#2F343D", }, ] @@ -9640,7 +9640,7 @@ exports[`MessageComposer renders correctly 1`] = ` /> @@ -9722,13 +9722,13 @@ exports[`MessageComposer renders correctly with audio recorder disabled 1`] = ` @@ -9829,8 +9829,8 @@ exports[`MessageComposer renders correctly with audio recorder disabled 1`] = ` placeholder="" placeholderTextColor="#9EA2A8" style={ - Array [ - Object { + [ + { "backgroundColor": "transparent", "flex": 1, "fontFamily": "Inter", @@ -9844,7 +9844,7 @@ exports[`MessageComposer renders correctly with audio recorder disabled 1`] = ` "textAlign": "left", "textAlignVertical": "center", }, - Object { + { "color": "#2F343D", }, ] @@ -9854,7 +9854,7 @@ exports[`MessageComposer renders correctly with audio recorder disabled 1`] = ` /> @@ -9978,8 +9978,8 @@ exports[`MessageComposer renders correctly with audio recorder disabled and with placeholder="" placeholderTextColor="#9EA2A8" style={ - Array [ - Object { + [ + { "backgroundColor": "transparent", "flex": 1, "fontFamily": "Inter", @@ -9993,7 +9993,7 @@ exports[`MessageComposer renders correctly with audio recorder disabled and with "textAlign": "left", "textAlignVertical": "center", }, - Object { + { "color": "#2F343D", }, ] @@ -10003,7 +10003,7 @@ exports[`MessageComposer renders correctly with audio recorder disabled and with /> @@ -10127,8 +10127,8 @@ exports[`MessageComposer renders correctly without audio upload permissions 1`] placeholder="" placeholderTextColor="#9EA2A8" style={ - Array [ - Object { + [ + { "backgroundColor": "transparent", "flex": 1, "fontFamily": "Inter", @@ -10142,7 +10142,7 @@ exports[`MessageComposer renders correctly without audio upload permissions 1`] "textAlign": "left", "textAlignVertical": "center", }, - Object { + { "color": "#2F343D", }, ] @@ -10152,7 +10152,7 @@ exports[`MessageComposer renders correctly without audio upload permissions 1`] /> @@ -10300,7 +10300,7 @@ exports[`MessageComposer renders toolbar when focused 1`] = ` @@ -10371,7 +10371,7 @@ exports[`MessageComposer renders toolbar when focused 1`] = ` @@ -10442,7 +10442,7 @@ exports[`MessageComposer renders toolbar when focused 1`] = ` @@ -10513,7 +10513,7 @@ exports[`MessageComposer renders toolbar when focused 1`] = ` @@ -10591,13 +10591,13 @@ exports[`MessageComposer send message 1`] = ` @@ -10698,8 +10698,8 @@ exports[`MessageComposer send message 1`] = ` placeholder="" placeholderTextColor="#9EA2A8" style={ - Array [ - Object { + [ + { "backgroundColor": "transparent", "flex": 1, "fontFamily": "Inter", @@ -10713,7 +10713,7 @@ exports[`MessageComposer send message 1`] = ` "textAlign": "left", "textAlignVertical": "center", }, - Object { + { "color": "#2F343D", }, ] @@ -10723,7 +10723,7 @@ exports[`MessageComposer send message 1`] = ` /> diff --git a/app/containers/SupportedVersions/SupportedVersionsWarning.test.tsx b/app/containers/SupportedVersions/SupportedVersionsWarning.test.tsx index 3caada0d8..9252d4743 100644 --- a/app/containers/SupportedVersions/SupportedVersionsWarning.test.tsx +++ b/app/containers/SupportedVersions/SupportedVersionsWarning.test.tsx @@ -15,7 +15,7 @@ const Render = () => ( ); const TODAY = '2023-04-01T00:00:00.000Z'; -jest.useFakeTimers('modern'); +jest.useFakeTimers(); jest.setSystemTime(new Date(TODAY)); describe('SupportedVersionsWarning', () => { diff --git a/app/containers/markdown/Markdown.stories.tsx b/app/containers/markdown/Markdown.stories.tsx index 6a6938abd..3b33ecf62 100644 --- a/app/containers/markdown/Markdown.stories.tsx +++ b/app/containers/markdown/Markdown.stories.tsx @@ -158,13 +158,8 @@ export const Code = () => ( diff --git a/app/containers/markdown/index.tsx b/app/containers/markdown/index.tsx index e64b726bb..6d42e960c 100644 --- a/app/containers/markdown/index.tsx +++ b/app/containers/markdown/index.tsx @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { Image, StyleProp, Text, TextStyle, View } from 'react-native'; +import { Image, StyleProp, Text, TextStyle } from 'react-native'; import { Parser } from 'commonmark'; import Renderer from 'commonmark-react-renderer'; import { MarkdownAST } from '@rocket.chat/message-parser'; @@ -171,18 +171,19 @@ class Markdown extends PureComponent { renderCodeBlock = ({ literal }: TLiteral) => { const { theme, style = [] } = this.props; return ( - - {literal} - + {literal} + ); }; diff --git a/app/lib/encryption/helpers/deferred.ts b/app/lib/encryption/helpers/deferred.ts index 28e4f29c4..2a4807e77 100644 --- a/app/lib/encryption/helpers/deferred.ts +++ b/app/lib/encryption/helpers/deferred.ts @@ -1,6 +1,4 @@ export default class Deferred { - [Symbol.toStringTag]: 'Promise'; - private promise: Promise; private _resolve: (value?: unknown) => void; private _reject: (reason?: any) => void; diff --git a/app/lib/hooks/useEndpointData.ts b/app/lib/hooks/useEndpointData.ts index dd3cab16a..3e34165c6 100644 --- a/app/lib/hooks/useEndpointData.ts +++ b/app/lib/hooks/useEndpointData.ts @@ -34,7 +34,7 @@ export const useEndpointData = >( if (!endpoint) return; setLoading(true); sdk - .get(endpoint, params) + .get(endpoint, params as any) .then(e => { setLoading(false); if (e.success) { diff --git a/app/lib/methods/checkSupportedVersions-enforcement.test.ts b/app/lib/methods/checkSupportedVersions-enforcement.test.ts index 528a6e2af..e7bed1bce 100644 --- a/app/lib/methods/checkSupportedVersions-enforcement.test.ts +++ b/app/lib/methods/checkSupportedVersions-enforcement.test.ts @@ -124,7 +124,7 @@ jest.mock('../../../app-supportedversions.json', () => ({ ] })); -jest.useFakeTimers('modern'); +jest.useFakeTimers(); jest.setSystemTime(new Date(TODAY)); describe('checkSupportedVersions', () => { diff --git a/app/lib/methods/checkSupportedVersions.test.ts b/app/lib/methods/checkSupportedVersions.test.ts index 6d1352782..997416a54 100644 --- a/app/lib/methods/checkSupportedVersions.test.ts +++ b/app/lib/methods/checkSupportedVersions.test.ts @@ -124,7 +124,7 @@ jest.mock('../../../app-supportedversions.json', () => ({ ] })); -jest.useFakeTimers('modern'); +jest.useFakeTimers(); jest.setSystemTime(new Date(TODAY)); describe('checkSupportedVersions', () => { diff --git a/app/lib/methods/helpers/fileUpload/index.ios.ts b/app/lib/methods/helpers/fileUpload/index.ios.ts index 96c2ae355..62637b63d 100644 --- a/app/lib/methods/helpers/fileUpload/index.ios.ts +++ b/app/lib/methods/helpers/fileUpload/index.ios.ts @@ -40,6 +40,7 @@ class FileUpload { data.forEach(item => { if (item.uri) { + // @ts-ignore upload.formData.append(item.name, { // @ts-ignore uri: item.uri, diff --git a/app/views/CannedResponsesListView/Dropdown/index.tsx b/app/views/CannedResponsesListView/Dropdown/index.tsx index a2f9156d7..9da55f407 100644 --- a/app/views/CannedResponsesListView/Dropdown/index.tsx +++ b/app/views/CannedResponsesListView/Dropdown/index.tsx @@ -1,10 +1,8 @@ -import React from 'react'; +import React, { useEffect, useRef } from 'react'; import { Animated, Easing, FlatList, TouchableWithoutFeedback } from 'react-native'; -import { withSafeAreaInsets } from 'react-native-safe-area-context'; import styles from '../styles'; -import { themes } from '../../../lib/constants'; -import { TSupportedThemes, withTheme } from '../../../theme'; +import { useTheme } from '../../../theme'; import * as List from '../../../containers/List'; import DropdownItemFilter from './DropdownItemFilter'; import DropdownItemHeader from './DropdownItemHeader'; @@ -12,35 +10,31 @@ import { ROW_HEIGHT } from './DropdownItem'; import { ILivechatDepartment } from '../../../definitions/ILivechatDepartment'; const ANIMATION_DURATION = 200; +const HEIGHT_DESTINATION = 0; +const MAX_ROWS = 5; interface IDropdownProps { - theme?: TSupportedThemes; currentDepartment: ILivechatDepartment; onClose: () => void; onDepartmentSelected: (value: ILivechatDepartment) => void; departments: ILivechatDepartment[]; } -class Dropdown extends React.Component { - private animatedValue: Animated.Value; +const Dropdown = ({ currentDepartment, onClose, onDepartmentSelected, departments }: IDropdownProps) => { + const animatedValue = useRef(new Animated.Value(0)).current; + const { colors } = useTheme(); - constructor(props: IDropdownProps) { - super(props); - this.animatedValue = new Animated.Value(0); - } - - componentDidMount() { - Animated.timing(this.animatedValue, { + useEffect(() => { + Animated.timing(animatedValue, { toValue: 1, duration: ANIMATION_DURATION, easing: Easing.inOut(Easing.quad), useNativeDriver: true }).start(); - } + }, [animatedValue]); - close = () => { - const { onClose } = this.props; - Animated.timing(this.animatedValue, { + const close = () => { + Animated.timing(animatedValue, { toValue: 0, duration: ANIMATION_DURATION, easing: Easing.inOut(Easing.quad), @@ -48,58 +42,54 @@ class Dropdown extends React.Component { }).start(() => onClose()); }; - render() { - const { theme, currentDepartment, onDepartmentSelected, departments } = this.props; - const heightDestination = 0; - const translateY = this.animatedValue.interpolate({ - inputRange: [0, 1], - outputRange: [-300, heightDestination] // approximated height of the component when closed/open - }); - const backdropOpacity = this.animatedValue.interpolate({ - inputRange: [0, 1], - outputRange: [0, themes[theme!].backdropOpacity] - }); + const translateY = animatedValue.interpolate({ + inputRange: [0, 1], + outputRange: [-300, HEIGHT_DESTINATION] // approximated height of the component when closed/open + }); - const maxRows = 5; - return ( - <> - - - + const backdropOpacity = animatedValue.interpolate({ + inputRange: [0, 1], + outputRange: [0, colors.backdropOpacity] + }); + + return ( + <> + - - - item._id} - renderItem={({ item }) => ( - - )} - keyboardShouldPersistTaps='always' - /> - - - ); - } -} + /> + + + + + item._id} + renderItem={({ item }) => ( + + )} + keyboardShouldPersistTaps='always' + /> + + + ); +}; -export default withTheme(withSafeAreaInsets(Dropdown)); +export default Dropdown; diff --git a/app/views/ChangeAvatarView/index.tsx b/app/views/ChangeAvatarView/index.tsx index 1b52c843b..494c8ff21 100644 --- a/app/views/ChangeAvatarView/index.tsx +++ b/app/views/ChangeAvatarView/index.tsx @@ -138,11 +138,13 @@ const ChangeAvatarView = () => { cropperAvoidEmptySpaceAroundImage: false, cropperChooseText: I18n.t('Choose'), cropperCancelText: I18n.t('Cancel'), - includeBase64: true, - useFrontCamera: isCam + includeBase64: true }; try { - const response: Image = isCam === true ? await ImagePicker.openCamera(options) : await ImagePicker.openPicker(options); + const response: Image = + isCam === true + ? await ImagePicker.openCamera({ ...options, useFrontCamera: true }) + : await ImagePicker.openPicker(options); dispatchAvatar({ type: AvatarStateActions.CHANGE_AVATAR, payload: { url: response.path, data: `data:image/jpeg;base64,${response.data}`, service: 'upload' } diff --git a/app/views/DirectoryView/Options.tsx b/app/views/DirectoryView/Options.tsx index 43c84fc09..4003dc13f 100644 --- a/app/views/DirectoryView/Options.tsx +++ b/app/views/DirectoryView/Options.tsx @@ -1,13 +1,13 @@ -import React, { PureComponent } from 'react'; +import React, { useEffect, useRef } from 'react'; import { Animated, Easing, Switch, Text, TouchableWithoutFeedback, View } from 'react-native'; import Touch from '../../containers/Touch'; import { CustomIcon, TIconsName } from '../../containers/CustomIcon'; import Check from '../../containers/Check'; import I18n from '../../i18n'; -import { SWITCH_TRACK_COLOR, themes } from '../../lib/constants'; +import { SWITCH_TRACK_COLOR } from '../../lib/constants'; import styles from './styles'; -import { TSupportedThemes } from '../../theme'; +import { useTheme } from '../../theme'; const ANIMATION_DURATION = 200; const ANIMATION_PROPS = { @@ -23,34 +23,34 @@ interface IDirectoryOptionsProps { close: Function; changeType: Function; toggleWorkspace(): void; - theme: TSupportedThemes; } -export default class DirectoryOptions extends PureComponent { - private animatedValue: Animated.Value; +const DirectoryOptions = ({ + type: propType, + globalUsers, + isFederationEnabled, + close: onClose, + changeType, + toggleWorkspace +}: IDirectoryOptionsProps) => { + const animatedValue = useRef(new Animated.Value(0)).current; + const { colors } = useTheme(); - constructor(props: IDirectoryOptionsProps) { - super(props); - this.animatedValue = new Animated.Value(0); - } - - componentDidMount() { - Animated.timing(this.animatedValue, { + useEffect(() => { + Animated.timing(animatedValue, { toValue: 1, ...ANIMATION_PROPS }).start(); - } + }, [animatedValue]); - close = () => { - const { close } = this.props; - Animated.timing(this.animatedValue, { + const close = () => { + Animated.timing(animatedValue, { toValue: 0, ...ANIMATION_PROPS - }).start(() => close()); + }).start(() => onClose()); }; - renderItem = (itemType: string) => { - const { changeType, type: propType, theme } = this.props; + const renderItem = (itemType: string) => { let text = 'Users'; let icon: TIconsName = 'user'; if (itemType === 'channels') { @@ -66,70 +66,61 @@ export default class DirectoryOptions extends PureComponent changeType(itemType)} style={styles.dropdownItemButton} accessibilityLabel={I18n.t(text)}> - - {I18n.t(text)} + + {I18n.t(text)} {propType === itemType ? : null} ); }; - render() { - const translateY = this.animatedValue.interpolate({ - inputRange: [0, 1], - outputRange: [-326, 0] - }); - const { globalUsers, toggleWorkspace, isFederationEnabled, theme } = this.props; - const backdropOpacity = this.animatedValue.interpolate({ - inputRange: [0, 1], - outputRange: [0, themes[theme].backdropOpacity] - }); - return ( - <> - - - - - - - {I18n.t('Search_by')} - - - - {this.renderItem('channels')} - {this.renderItem('users')} - {this.renderItem('teams')} - {isFederationEnabled ? ( - <> - - - - - {I18n.t('Search_global_users')} - - - {I18n.t('Search_global_users_description')} - - - + const translateY = animatedValue.interpolate({ + inputRange: [0, 1], + outputRange: [-326, 0] + }); + + const backdropOpacity = animatedValue.interpolate({ + inputRange: [0, 1], + outputRange: [0, colors.backdropOpacity] + }); + + return ( + <> + + + + + + + {I18n.t('Search_by')} + + + + {renderItem('channels')} + {renderItem('users')} + {renderItem('teams')} + {isFederationEnabled ? ( + <> + + + + {I18n.t('Search_global_users')} + + {I18n.t('Search_global_users_description')} + - - ) : null} - - - ); - } -} + + + + ) : null} + + + ); +}; + +export default DirectoryOptions; diff --git a/app/views/DirectoryView/index.tsx b/app/views/DirectoryView/index.tsx index ee5f9a357..131ef2cb4 100644 --- a/app/views/DirectoryView/index.tsx +++ b/app/views/DirectoryView/index.tsx @@ -315,7 +315,6 @@ class DirectoryView extends React.Component {showOptionsDropdown ? ( { const { room, member, joined, canForwardGuest, canReturnQueue, canViewCannedResponse, canPlaceLivechatOnHold } = this.state; const { navigation, isMasterDetail } = this.props; if (isMasterDetail) { - // @ts-ignore navigation.navigate('ModalStackNavigator', { screen: screen ?? 'RoomActionsView', params: { @@ -533,6 +532,7 @@ class RoomView extends React.Component { room: room as ISubscription, member, showCloseModal: !!screen, + // @ts-ignore joined, omnichannelPermissions: { canForwardGuest, canReturnQueue, canViewCannedResponse, canPlaceLivechatOnHold } } diff --git a/app/views/RoomsListView/ServerDropdown.tsx b/app/views/RoomsListView/ServerDropdown.tsx index 3c0f7c0e9..d2cefc43f 100644 --- a/app/views/RoomsListView/ServerDropdown.tsx +++ b/app/views/RoomsListView/ServerDropdown.tsx @@ -1,8 +1,8 @@ -import React, { Component } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { View, Text, Animated, Easing, TouchableWithoutFeedback, TouchableOpacity, FlatList, Linking } from 'react-native'; -import { batch, connect } from 'react-redux'; -import { withSafeAreaInsets } from 'react-native-safe-area-context'; +import { batch, useDispatch } from 'react-redux'; import { Subscription } from 'rxjs'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; import * as List from '../../containers/List'; import Button from '../../containers/Button'; @@ -13,82 +13,73 @@ import I18n from '../../i18n'; import EventEmitter from '../../lib/methods/helpers/events'; import ServerItem from '../../containers/ServerItem'; import database from '../../lib/database'; -import { themes, TOKEN_KEY } from '../../lib/constants'; -import { withTheme } from '../../theme'; +import { TOKEN_KEY } from '../../lib/constants'; +import { useTheme } from '../../theme'; import { localAuthenticate } from '../../lib/methods/helpers/localAuthentication'; import { showConfirmationAlert } from '../../lib/methods/helpers/info'; import log, { events, logEvent } from '../../lib/methods/helpers/log'; import { headerHeight } from '../../lib/methods/helpers/navigation'; import { goRoom } from '../../lib/methods/helpers/goRoom'; import UserPreferences from '../../lib/methods/userPreferences'; -import { IApplicationState, IBaseScreen, RootEnum, TServerModel } from '../../definitions'; +import { RootEnum, TServerModel } from '../../definitions'; import styles from './styles'; -import { ChatsStackParamList } from '../../stacks/types'; import { removeServer } from '../../lib/methods'; +import { useAppSelector } from '../../lib/hooks'; const ROW_HEIGHT = 68; const ANIMATION_DURATION = 200; +const MAX_ROWS = 4; -interface IServerDropdownProps extends IBaseScreen { - insets?: { - top: number; - }; - closeServerDropdown: boolean; - server: string; - isMasterDetail: boolean; -} +const ServerDropdown = () => { + const animatedValue = useRef(new Animated.Value(0)).current; + const subscription = useRef(); + const newServerTimeout = useRef | false>(); + const isMounted = useRef(false); + const [servers, setServers] = useState([]); + const dispatch = useDispatch(); + const closeServerDropdown = useAppSelector(state => state.rooms.closeServerDropdown); + const server = useAppSelector(state => state.server.server); + const isMasterDetail = useAppSelector(state => state.app.isMasterDetail); + const { colors } = useTheme(); + const insets = useSafeAreaInsets(); -interface IServerDropdownState { - servers: TServerModel[]; -} + useEffect(() => { + if (isMounted.current) close(); + }, [closeServerDropdown]); -class ServerDropdown extends Component { - private animatedValue: Animated.Value; - private subscription?: Subscription; - private newServerTimeout?: ReturnType | false; + useEffect(() => { + isMounted.current = true; - constructor(props: IServerDropdownProps) { - super(props); - this.state = { servers: [] }; - this.animatedValue = new Animated.Value(0); - } + const init = async () => { + const serversDB = database.servers; + const observable = await serversDB.get('servers').query().observeWithColumns(['name']); - async componentDidMount() { - const serversDB = database.servers; - const observable = await serversDB.get('servers').query().observeWithColumns(['name']); + subscription.current = observable.subscribe(data => { + setServers(data); + }); - this.subscription = observable.subscribe(data => { - this.setState({ servers: data }); - }); + Animated.timing(animatedValue, { + toValue: 1, + duration: ANIMATION_DURATION, + easing: Easing.inOut(Easing.quad), + useNativeDriver: true + }).start(); + }; + init(); - Animated.timing(this.animatedValue, { - toValue: 1, - duration: ANIMATION_DURATION, - easing: Easing.inOut(Easing.quad), - useNativeDriver: true - }).start(); - } + return () => { + if (newServerTimeout.current) { + clearTimeout(newServerTimeout.current); + newServerTimeout.current = false; + } + if (subscription.current && subscription.current.unsubscribe) { + subscription.current.unsubscribe(); + } + }; + }, []); - componentDidUpdate(prevProps: IServerDropdownProps) { - const { closeServerDropdown } = this.props; - if (prevProps.closeServerDropdown !== closeServerDropdown) { - this.close(); - } - } - - componentWillUnmount() { - if (this.newServerTimeout) { - clearTimeout(this.newServerTimeout); - this.newServerTimeout = false; - } - if (this.subscription && this.subscription.unsubscribe) { - this.subscription.unsubscribe(); - } - } - - close = () => { - const { dispatch } = this.props; - Animated.timing(this.animatedValue, { + const close = () => { + Animated.timing(animatedValue, { toValue: 0, duration: ANIMATION_DURATION, easing: Easing.inOut(Easing.quad), @@ -96,7 +87,7 @@ class ServerDropdown extends Component dispatch(toggleServerDropdown())); }; - createWorkspace = async () => { + const createWorkspace = async () => { logEvent(events.RL_CREATE_NEW_WORKSPACE); try { await Linking.openURL('https://cloud.rocket.chat/trial'); @@ -105,52 +96,49 @@ class ServerDropdown extends Component { - const { dispatch } = this.props; + const navToNewServer = (previousServer: string) => { batch(() => { dispatch(appStart({ root: RootEnum.ROOT_OUTSIDE })); dispatch(serverInitAdd(previousServer)); }); }; - addServer = () => { + const addServer = () => { logEvent(events.RL_ADD_SERVER); - const { server } = this.props; - this.close(); + close(); setTimeout(() => { - this.navToNewServer(server); + navToNewServer(server); }, ANIMATION_DURATION); }; - select = async (server: string, version?: string) => { - const { server: currentServer, dispatch, isMasterDetail } = this.props; - this.close(); - if (currentServer !== server) { + const select = async (serverParam: string, version?: string) => { + close(); + if (server !== serverParam) { logEvent(events.RL_CHANGE_SERVER); - const userId = UserPreferences.getString(`${TOKEN_KEY}-${server}`); + const userId = UserPreferences.getString(`${TOKEN_KEY}-${serverParam}`); if (isMasterDetail) { goRoom({ item: {}, isMasterDetail }); } if (!userId) { setTimeout(() => { - this.navToNewServer(currentServer); - this.newServerTimeout = setTimeout(() => { - EventEmitter.emit('NewServer', { server }); + navToNewServer(server); + newServerTimeout.current = setTimeout(() => { + EventEmitter.emit('NewServer', { server: serverParam }); }, ANIMATION_DURATION); }, ANIMATION_DURATION); } else { - await localAuthenticate(server); - dispatch(selectServerRequest(server, version, true, true)); + await localAuthenticate(serverParam); + dispatch(selectServerRequest(serverParam, version, true, true)); } } }; - remove = (server: string) => + const remove = (server: string) => showConfirmationAlert({ message: I18n.t('This_will_remove_all_data_from_this_server'), confirmationText: I18n.t('Delete'), onPress: async () => { - this.close(); + close(); try { await removeServer({ server }); } catch { @@ -159,93 +147,81 @@ class ServerDropdown extends Component { - const { server } = this.props; + const renderItem = ({ item }: { item: { id: string; iconURL: string; name: string; version: string } }) => ( + select(item.id, item.version)} + onLongPress={() => item.id === server || remove(item.id)} + hasCheck={item.id === server} + /> + ); - return ( - this.select(item.id, item.version)} - onLongPress={() => item.id === server || this.remove(item.id)} - hasCheck={item.id === server} - /> - ); - }; + const initialTop = 87 + Math.min(servers.length, MAX_ROWS) * ROW_HEIGHT; + const statusBarHeight = insets?.top ?? 0; + const heightDestination = isMasterDetail ? headerHeight + statusBarHeight : 0; - render() { - const { servers } = this.state; - const { theme, isMasterDetail, insets } = this.props; - const maxRows = 4; - const initialTop = 87 + Math.min(servers.length, maxRows) * ROW_HEIGHT; - const statusBarHeight = insets?.top ?? 0; - const heightDestination = isMasterDetail ? headerHeight + statusBarHeight : 0; - const translateY = this.animatedValue.interpolate({ - inputRange: [0, 1], - outputRange: [-initialTop, heightDestination] - }); - const backdropOpacity = this.animatedValue.interpolate({ - inputRange: [0, 1], - outputRange: [0, themes[theme].backdropOpacity] - }); - return ( - <> - - - + const translateY = animatedValue.interpolate({ + inputRange: [0, 1], + outputRange: [-initialTop, heightDestination] + }); + + const backdropOpacity = animatedValue.interpolate({ + inputRange: [0, 1], + outputRange: [0, colors.backdropOpacity] + }); + + return ( + <> + - - {I18n.t('Server')} - - {I18n.t('Add_Server')} - - - item.id} - renderItem={this.renderServer} - ItemSeparatorComponent={List.Separator} - keyboardShouldPersistTaps='always' - /> - -