Merge pull request from esteemapp/bugfix/markdown-darktheme

created themeContainer fixed markdown placeholder issue
This commit is contained in:
Mustafa Buyukcelebi 2019-10-28 21:53:30 +03:00 committed by GitHub
commit a68a98b595
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 72 additions and 51 deletions
src
components
basicUIElements/view/placeHolder
markdownEditor/view
containers
screens/notification/container

View File

@ -1,19 +1,25 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux';
import { View } from 'react-native'; import { View } from 'react-native';
import Placeholder from 'rn-placeholder'; import Placeholder from 'rn-placeholder';
import { ThemeContainer } from '../../../../containers';
import styles from './listItemPlaceHolderStyles'; import styles from './listItemPlaceHolderStyles';
const ListItemPlaceHolderView = ({ isDarkTheme }) => { const ListItemPlaceHolderView = () => {
const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
return ( return (
<ThemeContainer>
{({ isDarkTheme }) => (
<View style={styles.container}> <View style={styles.container}>
<Placeholder.Media size={30} hasRadius animate="fade" color={color} /> <Placeholder.Media
size={30}
hasRadius
animate="fade"
color={isDarkTheme ? '#2e3d51' : '#f5f5f5'}
/>
<View style={styles.paragraphWrapper}> <View style={styles.paragraphWrapper}>
<Placeholder.Paragraph <Placeholder.Paragraph
color={color} color={isDarkTheme ? '#2e3d51' : '#f5f5f5'}
lineNumber={2} lineNumber={2}
textSize={12} textSize={12}
lineSpacing={8} lineSpacing={8}
@ -24,11 +30,9 @@ const ListItemPlaceHolderView = ({ isDarkTheme }) => {
/> />
</View> </View>
</View> </View>
)}
</ThemeContainer>
); );
}; };
const mapStateToProps = state => ({ export default ListItemPlaceHolderView;
isDarkTheme: state.application.isDarkTheme,
});
export default connect(mapStateToProps)(ListItemPlaceHolderView);

View File

@ -1,6 +1,5 @@
/* eslint-disable radix */ /* eslint-disable radix */
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import { connect } from 'react-redux';
import { Dimensions } from 'react-native'; import { Dimensions } from 'react-native';
import times from 'lodash/times'; import times from 'lodash/times';
@ -18,9 +17,4 @@ const ListPlaceHolderView = () => {
return <Fragment>{listElements}</Fragment>; return <Fragment>{listElements}</Fragment>;
}; };
export default ListPlaceHolderView;
const mapStateToProps = state => ({
isDarkTheme: state.application.isDarkTheme,
});
export default connect(mapStateToProps)(ListPlaceHolderView);

View File

@ -13,6 +13,8 @@ import { PostBody } from '../../postElements';
import { StickyBar } from '../../basicUIElements'; import { StickyBar } from '../../basicUIElements';
import { TextInput } from '../../textInput'; import { TextInput } from '../../textInput';
import { ThemeContainer } from '../../../containers';
// Styles // Styles
import styles from './markdownEditorStyles'; import styles from './markdownEditorStyles';
@ -201,6 +203,8 @@ export default class MarkdownEditorView extends Component {
behavior={Platform.OS === 'ios' ? 'padding' : null} behavior={Platform.OS === 'ios' ? 'padding' : null}
> >
{!isPreviewActive ? ( {!isPreviewActive ? (
<ThemeContainer>
{({ isDarkTheme }) => (
<TextInput <TextInput
multiline multiline
onChangeText={this._changeText} onChangeText={this._changeText}
@ -208,7 +212,7 @@ export default class MarkdownEditorView extends Component {
placeholder={intl.formatMessage({ placeholder={intl.formatMessage({
id: isReply ? 'editor.reply_placeholder' : 'editor.default_placeholder', id: isReply ? 'editor.reply_placeholder' : 'editor.default_placeholder',
})} })}
placeholderTextColor="#c1c5c7" placeholderTextColor={isDarkTheme ? '#526d91' : '#c1c5c7'}
selection={selection} selection={selection}
selectionColor="#357ce6" selectionColor="#357ce6"
style={styles.textWrapper} style={styles.textWrapper}
@ -217,6 +221,8 @@ export default class MarkdownEditorView extends Component {
innerRef={this.inputRef} innerRef={this.inputRef}
editable={!isLoading} editable={!isLoading}
/> />
)}
</ThemeContainer>
) : ( ) : (
this._renderPreview() this._renderPreview()
)} )}

View File

@ -6,6 +6,7 @@ import ProfileEditContainer from './profileEditContainer';
import RedeemContainer from './redeemContainer'; import RedeemContainer from './redeemContainer';
import SpinGameContainer from './spinGameContainer'; import SpinGameContainer from './spinGameContainer';
import TransferContainer from './transferContainer'; import TransferContainer from './transferContainer';
import ThemeContainer from './themeContainer';
export { export {
DarkThemeContainer, DarkThemeContainer,
@ -16,4 +17,5 @@ export {
RedeemContainer, RedeemContainer,
SpinGameContainer, SpinGameContainer,
TransferContainer, TransferContainer,
ThemeContainer,
}; };

View File

@ -140,7 +140,6 @@ class RedeemContainer extends Component {
const mapStateToProps = state => ({ const mapStateToProps = state => ({
username: state.account.currentAccount.name, username: state.account.currentAccount.name,
isDarkTheme: state.application.isDarkTheme,
activeBottomTab: state.ui.activeBottomTab, activeBottomTab: state.ui.activeBottomTab,
isConnected: state.application.isConnected, isConnected: state.application.isConnected,
accounts: state.account.otherAccounts, accounts: state.account.otherAccounts,

View File

@ -0,0 +1,18 @@
/* eslint-disable no-unused-vars */
import React from 'react';
import { connect } from 'react-redux';
const ThemeContainer = ({ children, isDarkTheme }) => {
return (
children &&
children({
isDarkTheme,
})
);
};
const mapStateToProps = state => ({
isDarkTheme: state.application.isDarkTheme,
});
export default connect(mapStateToProps)(ThemeContainer);

View File

@ -151,13 +151,12 @@ class NotificationContainer extends Component {
render() { render() {
const { isLoggedIn } = this.props; const { isLoggedIn } = this.props;
const { notifications, isNotificationRefreshing, isDarkTheme } = this.state; const { notifications, isNotificationRefreshing } = this.state;
return ( return (
<NotificationScreen <NotificationScreen
getActivities={this._getAvtivities} getActivities={this._getAvtivities}
notifications={notifications} notifications={notifications}
isDarkTheme={isDarkTheme}
navigateToNotificationRoute={this._navigateToNotificationRoute} navigateToNotificationRoute={this._navigateToNotificationRoute}
readAllNotification={this._readAllNotification} readAllNotification={this._readAllNotification}
handleLoginPress={this._handleOnPressLogin} handleLoginPress={this._handleOnPressLogin}
@ -171,7 +170,6 @@ class NotificationContainer extends Component {
const mapStateToProps = state => ({ const mapStateToProps = state => ({
isLoggedIn: state.application.isLoggedIn, isLoggedIn: state.application.isLoggedIn,
isDarkTheme: state.application.isDarkTheme,
isConnected: state.application.isConnected, isConnected: state.application.isConnected,
username: state.account.currentAccount.name, username: state.account.currentAccount.name,