mirror of
https://github.com/ecency/ecency-mobile.git
synced 2025-01-07 14:41:16 +03:00
Merge pull request #1233 from esteemapp/bugfix/markdown-darktheme
created themeContainer fixed markdown placeholder issue
This commit is contained in:
commit
a68a98b595
src
components
basicUIElements/view/placeHolder
markdownEditor/view
containers
screens/notification/container
@ -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);
|
|
||||||
|
@ -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);
|
|
||||||
|
@ -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()
|
||||||
)}
|
)}
|
||||||
|
@ -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,
|
||||||
};
|
};
|
||||||
|
@ -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,
|
||||||
|
18
src/containers/themeContainer.js
Normal file
18
src/containers/themeContainer.js
Normal 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);
|
@ -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,
|
||||||
|
Loading…
Reference in New Issue
Block a user