diff --git a/src/components/basicUIElements/index.js b/src/components/basicUIElements/index.js index f4ff21f63..e4cf494d2 100644 --- a/src/components/basicUIElements/index.js +++ b/src/components/basicUIElements/index.js @@ -19,10 +19,12 @@ import WalletDetailsPlaceHolder from './view/placeHolder/walletDetailsPlaceHolde import WalletUnclaimedPlaceHolder from './view/placeHolder/walletUnclaimedPlaceHolder'; import ListPlaceHolder from './view/placeHolder/listPlaceHolderView'; import BoostPlaceHolder from './view/placeHolder/boostPlaceHolderView'; +import CommentPlaceHolder from './view/placeHolder/commentPlaceHolderView'; export { Card, Chip, + CommentPlaceHolder, GrayWrapper, LineBreak, ListItemPlaceHolder, diff --git a/src/components/basicUIElements/view/placeHolder/commentPlaceHolderView.js b/src/components/basicUIElements/view/placeHolder/commentPlaceHolderView.js new file mode 100644 index 000000000..7f7c51f4f --- /dev/null +++ b/src/components/basicUIElements/view/placeHolder/commentPlaceHolderView.js @@ -0,0 +1,35 @@ +import React from 'react'; +import { View } from 'react-native'; +import Placeholder from 'rn-placeholder'; + +import { ThemeContainer } from '../../../../containers'; + +import styles from './listItemPlaceHolderStyles'; + +const CommentPlaceHolderView = () => { + return ( + + {({ isDarkTheme }) => { + const color = isDarkTheme ? '#2e3d51' : '#f5f5f5'; + return ( + + + + + + ); + }} + + ); +}; + +export default CommentPlaceHolderView; diff --git a/src/components/basicUIElements/view/placeHolder/listItemPlaceHolderStyles.js b/src/components/basicUIElements/view/placeHolder/listItemPlaceHolderStyles.js index c006f721b..c489b1019 100644 --- a/src/components/basicUIElements/view/placeHolder/listItemPlaceHolderStyles.js +++ b/src/components/basicUIElements/view/placeHolder/listItemPlaceHolderStyles.js @@ -16,4 +16,7 @@ export default EStyleSheet.create({ marginTop: 3, flex: 1, }, + paragraphWithoutMargin: { + flex: 1, + }, }); diff --git a/src/components/postElements/body/view/postBodyView.js b/src/components/postElements/body/view/postBodyView.js index 932c891c9..3a3aef673 100644 --- a/src/components/postElements/body/view/postBodyView.js +++ b/src/components/postElements/body/view/postBodyView.js @@ -1,16 +1,16 @@ -import React, {Fragment} from 'react'; -import {Dimensions, Linking, Alert} from 'react-native'; -import {withNavigation} from 'react-navigation'; -import {useIntl, injectIntl} from 'react-intl'; +import React, { Fragment } from 'react'; +import { Dimensions, Linking, Alert } from 'react-native'; +import { withNavigation } from 'react-navigation'; +import { useIntl, injectIntl } from 'react-intl'; import AutoHeightWebView from 'react-native-autoheight-webview'; import EStyleSheet from 'react-native-extended-stylesheet'; import get from 'lodash/get'; import script from './config.js'; -import {PostPlaceHolder, ListItemPlaceHolder} from '../../../basicUIElements'; +import { PostPlaceHolder, CommentPlaceHolder } from '../../../basicUIElements'; // Constants -import {default as ROUTES} from '../../../../constants/routeNames'; +import { default as ROUTES } from '../../../../constants/routeNames'; const WIDTH = Dimensions.get('window').width; @@ -32,16 +32,7 @@ const PostBody = ({ try { const data = JSON.parse(get(event, 'nativeEvent.data')); - const { - type, - href, - author, - category, - permlink, - tag, - proposal, - videoHref, - } = data; + const { type, href, author, category, permlink, tag, proposal, videoHref } = data; switch (type) { case '_external': @@ -95,7 +86,7 @@ const PostBody = ({ if (supported) { Linking.openURL(url); } else { - Alert.alert(intl.formatMessage({id: 'alert.failed_to_open'})); + Alert.alert(intl.formatMessage({ id: 'alert.failed_to_open' })); } }); } @@ -137,6 +128,8 @@ const PostBody = ({ } body { color: ${EStyleSheet.value('$primaryBlack')}; + display: flex; + align-items: center; } a { color: ${EStyleSheet.value('$primaryBlue')}; @@ -218,14 +211,14 @@ const PostBody = ({ source={{ html: test, }} - style={{width: WIDTH - 32}} + style={{ width: isComment ? WIDTH - 61 : WIDTH - 32 }} customStyle={customStyle} onMessage={_handleOnLinkPress} - renderLoading={() => - isComment ? : - } customScript={script.toString()} + renderLoading={() => (isComment ? : )} startInLoadingState={true} + onShouldStartLoadWithRequest={false} + scrollEnabled={false} /> ); diff --git a/src/components/postView/view/postDisplayView.js b/src/components/postView/view/postDisplayView.js index 52c43b16b..6e3d1aa00 100644 --- a/src/components/postView/view/postDisplayView.js +++ b/src/components/postView/view/postDisplayView.js @@ -162,7 +162,9 @@ class PostDisplayView extends PureComponent { const isGetComment = scrollHeight + 300 > postHeight; const formatedTime = post && getTimeFromNow(post.created); - if (isGetComment && !isLoadedComments) this.setState({ isLoadedComments: true }); + if (isGetComment && !isLoadedComments) { + this.setState({ isLoadedComments: true }); + } if (isPostUnavailable) { return (