From cc582caf2948823c9ad9b5ef2dab330b72a67cbb Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 11 Aug 2020 11:08:49 -0600 Subject: [PATCH 1/3] WIP on html comments --- package-lock.json | 84 ++++++++++++++----- package.json | 3 + src/components/webView/index.js | 3 + src/components/webView/index.native.js | 3 + .../Report/ReportHistoryItemFragment.js | 7 +- src/style/StyleSheet.js | 1 - webpack.common.js | 11 +++ 7 files changed, 90 insertions(+), 22 deletions(-) create mode 100644 src/components/webView/index.js create mode 100644 src/components/webView/index.native.js diff --git a/package-lock.json b/package-lock.json index 1ccdc93d07bc..e354328afbb7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1832,8 +1832,7 @@ "@types/json-schema": { "version": "7.0.5", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.5.tgz", - "integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==", - "dev": true + "integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==" }, "@types/minimatch": { "version": "3.0.3", @@ -2299,7 +2298,6 @@ "version": "6.12.3", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.3.tgz", "integrity": "sha512-4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA==", - "dev": true, "requires": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -2316,8 +2314,7 @@ "ajv-keywords": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", - "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==" }, "anser": { "version": "1.4.9", @@ -3199,8 +3196,7 @@ "big.js": { "version": "5.2.2", "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", - "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==", - "dev": true + "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==" }, "binary-extensions": { "version": "2.1.0", @@ -4755,8 +4751,7 @@ "emojis-list": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", - "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==", - "dev": true + "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==" }, "encodeurl": { "version": "1.0.2", @@ -6267,8 +6262,7 @@ "fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", - "dev": true + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, "fast-diff": { "version": "1.2.0", @@ -6279,8 +6273,7 @@ "fast-json-stable-stringify": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", - "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==", - "dev": true + "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==" }, "fast-levenshtein": { "version": "2.0.6", @@ -6387,6 +6380,37 @@ "flat-cache": "^2.0.1" } }, + "file-loader": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.0.0.tgz", + "integrity": "sha512-/aMOAYEFXDdjG0wytpTL5YQLfZnnTmLNjn+AIrJ/6HVnTfDqLsVKUUwkDf4I4kgex36BvjuXEn/TX9B/1ESyqQ==", + "requires": { + "loader-utils": "^2.0.0", + "schema-utils": "^2.6.5" + }, + "dependencies": { + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, + "schema-utils": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz", + "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==", + "requires": { + "@types/json-schema": "^7.0.4", + "ajv": "^6.12.2", + "ajv-keywords": "^3.4.1" + } + } + } + }, "file-uri-to-path": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", @@ -8623,8 +8647,7 @@ "json-schema-traverse": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", - "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", - "dev": true + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==" }, "json-stable-stringify": { "version": "1.0.1", @@ -11665,8 +11688,7 @@ "punycode": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", - "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==", - "dev": true + "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==" }, "pusher-js": { "version": "7.0.0", @@ -11686,8 +11708,7 @@ "qs": { "version": "6.5.2", "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz", - "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==", - "dev": true + "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==" }, "querystring": { "version": "0.2.0", @@ -12113,6 +12134,30 @@ "react-timer-mixin": "^0.13.4" } }, + "react-native-web-webview": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/react-native-web-webview/-/react-native-web-webview-1.0.2.tgz", + "integrity": "sha512-oNAYNuqUqeqTuAAdIejzDqvUtYA+k5lrvhUYmASdUznZNmyIaoQFA6OKoA4K9F3wdMvark42vUXkUWIp875ewg==", + "requires": { + "qs": "^6.5.1" + } + }, + "react-native-webview": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-10.4.0.tgz", + "integrity": "sha512-S+325GL+JgdoVuAxuYgtxJka8noBSKgy3RmxHAfjI0wM+bQrV4xK/lBSbVvB+zmILZqXdbuDCfjpuvKrx++xdQ==", + "requires": { + "escape-string-regexp": "2.0.0", + "invariant": "2.2.4" + }, + "dependencies": { + "escape-string-regexp": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz", + "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==" + } + } + }, "react-router": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", @@ -14136,7 +14181,6 @@ "version": "4.2.2", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz", "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==", - "dev": true, "requires": { "punycode": "^2.1.0" } diff --git a/package.json b/package.json index f3337de3a474..0ffe471c825f 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "dependencies": { "@react-native-community/async-storage": "^1.11.0", "@react-native-community/netinfo": "^5.9.5", + "file-loader": "^6.0.0", "html-entities": "^1.3.1", "jquery": "^3.5.1", "lodash.get": "^4.4.2", @@ -26,6 +27,8 @@ "react-dom": "^16.13.1", "react-native": "0.63.2", "react-native-web": "^0.13.5", + "react-native-web-webview": "^1.0.2", + "react-native-webview": "^10.4.0", "react-router-dom": "^5.2.0", "react-router-native": "^5.2.0", "save": "^2.4.0", diff --git a/src/components/webView/index.js b/src/components/webView/index.js new file mode 100644 index 000000000000..bcb414fea479 --- /dev/null +++ b/src/components/webView/index.js @@ -0,0 +1,3 @@ +import {WebView} from 'react-native-web-webview'; + +export default WebView; diff --git a/src/components/webView/index.native.js b/src/components/webView/index.native.js new file mode 100644 index 000000000000..da2aef3ff461 --- /dev/null +++ b/src/components/webView/index.native.js @@ -0,0 +1,3 @@ +import {WebView} from 'react-native-webview'; + +export default WebView; diff --git a/src/page/HomePage/Report/ReportHistoryItemFragment.js b/src/page/HomePage/Report/ReportHistoryItemFragment.js index c5ad124d669b..5a004f490bf3 100644 --- a/src/page/HomePage/Report/ReportHistoryItemFragment.js +++ b/src/page/HomePage/Report/ReportHistoryItemFragment.js @@ -1,5 +1,6 @@ import React from 'react'; import {Text} from 'react-native'; +import WebView from '../../../components/webView'; import Str from '../../../lib/Str'; import ReportHistoryFragmentPropTypes from './ReportHistoryFragmentPropTypes'; import styles from '../../../style/StyleSheet'; @@ -12,7 +13,11 @@ const propTypes = { const ReportHistoryItemFragment = ({fragment}) => { switch (fragment.type) { case 'COMMENT': - return {Str.htmlDecode(fragment.text)}; + return fragment.html + ? ( + + ) + : {Str.htmlDecode(fragment.text)}; // return fragment.html // ? ( diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js index 79c9d2ef694c..84b0cdfa3702 100644 --- a/src/style/StyleSheet.js +++ b/src/style/StyleSheet.js @@ -89,7 +89,6 @@ const styles = { width: 40, }, historyItemMessageWrapper: { - flexGrow: 1, }, historyItemAvatar: { borderRadius: 20, diff --git a/webpack.common.js b/webpack.common.js index df1f64d4c9e6..abcd9a986179 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -34,6 +34,17 @@ module.exports = { emitWarning: true, }, }, + + // This is necessary to support react-native-web-webview + { + test: /postMock.html$/, + use: { + loader: 'file-loader', + options: { + name: '[name].[ext]', + }, + }, + } ], }, resolve: { From 3f1ecea975eec11344653d876eff42ed38a24fe7 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 11 Aug 2020 11:46:03 -0600 Subject: [PATCH 2/3] Styled comments on web --- package-lock.json | 27 ++----------------- package.json | 2 -- src/components/webView/index.js | 24 ++++++++++++++++- src/components/webView/index.native.js | 21 ++++++++++++++- .../Report/ReportHistoryItemFragment.js | 4 +-- 5 files changed, 46 insertions(+), 32 deletions(-) diff --git a/package-lock.json b/package-lock.json index e354328afbb7..6d9733a9b448 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11708,7 +11708,8 @@ "qs": { "version": "6.5.2", "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz", - "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==" + "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==", + "dev": true }, "querystring": { "version": "0.2.0", @@ -12134,30 +12135,6 @@ "react-timer-mixin": "^0.13.4" } }, - "react-native-web-webview": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/react-native-web-webview/-/react-native-web-webview-1.0.2.tgz", - "integrity": "sha512-oNAYNuqUqeqTuAAdIejzDqvUtYA+k5lrvhUYmASdUznZNmyIaoQFA6OKoA4K9F3wdMvark42vUXkUWIp875ewg==", - "requires": { - "qs": "^6.5.1" - } - }, - "react-native-webview": { - "version": "10.4.0", - "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-10.4.0.tgz", - "integrity": "sha512-S+325GL+JgdoVuAxuYgtxJka8noBSKgy3RmxHAfjI0wM+bQrV4xK/lBSbVvB+zmILZqXdbuDCfjpuvKrx++xdQ==", - "requires": { - "escape-string-regexp": "2.0.0", - "invariant": "2.2.4" - }, - "dependencies": { - "escape-string-regexp": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz", - "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==" - } - } - }, "react-router": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", diff --git a/package.json b/package.json index 0ffe471c825f..2b92823eb0d5 100644 --- a/package.json +++ b/package.json @@ -27,8 +27,6 @@ "react-dom": "^16.13.1", "react-native": "0.63.2", "react-native-web": "^0.13.5", - "react-native-web-webview": "^1.0.2", - "react-native-webview": "^10.4.0", "react-router-dom": "^5.2.0", "react-router-native": "^5.2.0", "save": "^2.4.0", diff --git a/src/components/webView/index.js b/src/components/webView/index.js index bcb414fea479..f84417a1f454 100644 --- a/src/components/webView/index.js +++ b/src/components/webView/index.js @@ -1,3 +1,25 @@ -import {WebView} from 'react-native-web-webview'; +import {Text} from 'react-native'; +import React from 'react'; +import PropTypes from 'prop-types'; +import ExpensiMark from '../../lib/ExpensiMark'; + +const parser = new ExpensiMark(); +const propTypes = { + html: PropTypes.string, +}; +const defaultProps = { + html: '', +}; + +const WebView = ({html}) => ( + + {/* eslint-disable-next-line react/no-danger */} + + +); + +WebView.propTypes = propTypes; +WebView.defaultProps = defaultProps; +WebView.displayName = 'WebView'; export default WebView; diff --git a/src/components/webView/index.native.js b/src/components/webView/index.native.js index da2aef3ff461..5da7b15f8064 100644 --- a/src/components/webView/index.native.js +++ b/src/components/webView/index.native.js @@ -1,3 +1,22 @@ -import {WebView} from 'react-native-webview'; +import React from 'react'; +import {Text} from 'react-native'; +import Str from '../../lib/Str'; +import PropTypes from 'prop-types'; + +const propTypes = { + html: PropTypes.string, +}; +const defaultProps = { + html: '', +}; + +// @TODO native clients don't support directly injecting HTML so a method needs to be found to do this reliably +const WebView = ({html}) => ( + {Str.htmlDecode(html)} +); + +WebView.propTypes = propTypes; +WebView.defaultProps = defaultProps; +WebView.displayName = 'WebView'; export default WebView; diff --git a/src/page/HomePage/Report/ReportHistoryItemFragment.js b/src/page/HomePage/Report/ReportHistoryItemFragment.js index 5a004f490bf3..fffd5565cc96 100644 --- a/src/page/HomePage/Report/ReportHistoryItemFragment.js +++ b/src/page/HomePage/Report/ReportHistoryItemFragment.js @@ -14,9 +14,7 @@ const ReportHistoryItemFragment = ({fragment}) => { switch (fragment.type) { case 'COMMENT': return fragment.html - ? ( - - ) + ? : {Str.htmlDecode(fragment.text)}; // return fragment.html From 8c0e5eba8443acbcc24d46d091c079a428772ee3 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 11 Aug 2020 15:28:36 -0600 Subject: [PATCH 3/3] Fix comment layout --- src/style/StyleSheet.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js index 22880e8dcedd..c95372fe3a32 100644 --- a/src/style/StyleSheet.js +++ b/src/style/StyleSheet.js @@ -85,6 +85,11 @@ const styles = { historyItemAvatarWrapper: { width: 40, }, + historyItemMessageWrapper: { + flexGrow: 1, + paddingLeft: 50, + marginBottom: 20, + }, historyItemAvatar: { borderRadius: 20, height: 40,