ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-20 20:01:56 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'bugfix/markdown-darktheme' of github.com:esteemapp/esteem-mobile into development

Browse Source
This commit is contained in:
Mustafa Buyukcelebi 2019-10-29 17:21:20 +03:00
commit 7592a3a5cc
25 changed files with 293 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/basicUIElements/view/placeHolder/boostPlaceHolderView.js
View File

@ -1,26 +1,36 @@
/* eslint-disable radix */
import React from 'react';
import { connect } from 'react-redux';
import { Dimensions, View } from 'react-native';
import times from 'lodash/times';
import Placeholder from 'rn-placeholder';
import { ThemeContainer } from '../../../../containers';
import styles from './boostPlaceHolderStyles';
const HEIGHT = Dimensions.get('window').height;
const BoostPlaceHolder = ({ isDarkTheme }) => {
const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
const BoostPlaceHolder = () => {
const ratio = (HEIGHT - 300) / 50 / 1.3;
const listElements = [];
times(parseInt(ratio), i => {
listElements.push(
<ThemeContainer>
{({ isDarkTheme }) => {
const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
return (
<View style={styles.container} key={i}>
<View style={styles.line}>
<Placeholder.Box color={color} width={90} height={40} animate="fade" />
<View style={styles.paragraphWrapper}>
<Placeholder.Box color={color} width={140} radius={25} height={50} animate="fade" />
<Placeholder.Box
color={color}
width={140}
radius={25}
height={50}
animate="fade"
/>
</View>
<Placeholder.Box
style={styles.rightBox}
@ -30,15 +40,14 @@ const BoostPlaceHolder = ({ isDarkTheme }) => {
animate="fade"
/>
</View>
</View>,
</View>
);
}}
</ThemeContainer>,
);
});
return <View style={styles.container}>{listElements}</View>;
};
const mapStateToProps = state => ({
isDarkTheme: state.application.isDarkTheme,
});
export default connect(mapStateToProps)(BoostPlaceHolder);
export default BoostPlaceHolder;

18
src/components/basicUIElements/view/placeHolder/listItemPlaceHolderView.js
View File

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

8
src/components/basicUIElements/view/placeHolder/listPlaceHolderView.js
View File

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

19
src/components/basicUIElements/view/placeHolder/postCardPlaceHolderView.js
View File

@ -1,13 +1,16 @@
import React from 'react';
import { connect } from 'react-redux';
import { View } from 'react-native';
import Placeholder from 'rn-placeholder';
import { ThemeContainer } from '../../../../containers';
import styles from './postCardPlaceHolderStyles';
// TODO: make container for place holder wrapper after alpha
const PostCardPlaceHolder = ({ isDarkTheme }) => {
const PostCardPlaceHolder = () => {
return (
<ThemeContainer>
{({ isDarkTheme }) => {
const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
return (
<View style={styles.container}>
<View style={styles.textWrapper}>
@ -29,10 +32,8 @@ const PostCardPlaceHolder = ({ isDarkTheme }) => {
</View>
</View>
);
}}
</ThemeContainer>
);
};
const mapStateToProps = state => ({
isDarkTheme: state.application.isDarkTheme,
});
export default connect(mapStateToProps)(PostCardPlaceHolder);
export default PostCardPlaceHolder;

19
src/components/basicUIElements/view/placeHolder/postPlaceHolderView.js
View File

@ -1,11 +1,15 @@
import React from 'react';
import { connect } from 'react-redux';
import { View } from 'react-native';
import Placeholder from 'rn-placeholder';
import { ThemeContainer } from '../../../../containers';
import styles from './postCardPlaceHolderStyles';
// TODO: make container for place holder wrapper after alpha
const PostPlaceHolder = ({ isDarkTheme }) => {
const PostPlaceHolder = () => {
return (
<ThemeContainer>
{({ isDarkTheme }) => {
const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
return (
@ -38,10 +42,9 @@ const PostPlaceHolder = ({ isDarkTheme }) => {
</View>
</View>
);
}}
</ThemeContainer>
);
};
const mapStateToProps = state => ({
isDarkTheme: state.application.isDarkTheme,
});
export default connect(mapStateToProps)(PostPlaceHolder);
export default PostPlaceHolder;

17
src/components/basicUIElements/view/placeHolder/profileSummaryPlaceHolder.js
View File

@ -1,11 +1,15 @@
import React from 'react';
import { connect } from 'react-redux';
import { View } from 'react-native';
import Placeholder from 'rn-placeholder';
import { ThemeContainer } from '../../../../containers';
import styles from './profileSummaryPlaceHolderStyles';
// TODO: make container for place holder wrapper after alpha
const ProfileSummaryPlaceHolder = ({ isDarkTheme }) => {
const ProfileSummaryPlaceHolder = () => {
return (
<ThemeContainer>
{({ isDarkTheme }) => {
const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
return (
@ -28,10 +32,9 @@ const ProfileSummaryPlaceHolder = ({ isDarkTheme }) => {
</View>
</View>
);
}}
</ThemeContainer>
);
};
const mapStateToProps = state => ({
isDarkTheme: state.application.isDarkTheme,
});
export default connect(mapStateToProps)(ProfileSummaryPlaceHolder);
export default ProfileSummaryPlaceHolder;

17
src/components/basicUIElements/view/placeHolder/walletDetailsPlaceHolder.js
View File

@ -1,10 +1,11 @@
/* eslint-disable radix */
import React, { Fragment } from 'react';
import { connect } from 'react-redux';
import { View, Dimensions } from 'react-native';
import Placeholder from 'rn-placeholder';
import times from 'lodash/times';
import { ThemeContainer } from '../../../../containers';
import styles from './walletDetailsPlaceHolderStyles';
const HEIGHT = Dimensions.get('window').height;
@ -24,7 +25,9 @@ const listPlaceHolderView = color => {
return <Fragment>{listElements}</Fragment>;
};
const WalletDetailsPlaceHolder = ({ isDarkTheme }) => {
const WalletDetailsPlaceHolder = () => (
<ThemeContainer>
{({ isDarkTheme }) => {
const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
return (
@ -35,10 +38,8 @@ const WalletDetailsPlaceHolder = ({ isDarkTheme }) => {
{listPlaceHolderView(color)}
</View>
);
};
}}
</ThemeContainer>
);
const mapStateToProps = state => ({
isDarkTheme: state.application.isDarkTheme,
});
export default connect(mapStateToProps)(WalletDetailsPlaceHolder);
export default WalletDetailsPlaceHolder;

6
src/components/bottomTabBar/view/bottomTabBarView.js
View File

@ -10,7 +10,7 @@ import { updateActiveBottomTab } from '../../../redux/actions/uiAction';
import ROUTES from '../../../constants/routeNames';
// Container
import { DarkThemeContainer } from '../../../containers';
import { ThemeContainer } from '../../../containers';
// Components
import TabBar from './tabbar';
@ -44,7 +44,7 @@ const BottomTabBarView = ({
}, [dispatch, index, routes]);
return (
<DarkThemeContainer>
<ThemeContainer>
{({ isDarkTheme }) => (
<SafeAreaView style={styles.wrapper}>
<TabBar
@ -74,7 +74,7 @@ const BottomTabBarView = ({
</TabBar>
</SafeAreaView>
)}
</DarkThemeContainer>
</ThemeContainer>
);
};

1
src/components/header/view/headerView.js
View File

@ -34,7 +34,6 @@ class HeaderView extends Component {
render() {
const {
avatarUrl,
displayName,
handleOnPressBackButton,
handleOpenDrawer,

8
src/components/markdownEditor/view/markdownEditorView.js
View File

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

12
src/components/notification/view/notificationView.js
View File

@ -10,6 +10,7 @@ import { ContainerHeader } from '../../containerHeader';
import { FilterBar } from '../../filterBar';
import { NotificationLine } from '../..';
import { ListPlaceHolder } from '../../basicUIElements';
import { ThemeContainer } from '../../../containers';
// Utils
import { isToday, isYesterday, isThisWeek, isThisMonth } from '../../../utils/time';
@ -149,12 +150,7 @@ class NotificationView extends PureComponent {
);
render() {
const {
readAllNotification,
getActivities,
isNotificationRefreshing,
isDarkTheme,
} = this.props;
const { readAllNotification, getActivities, isNotificationRefreshing } = this.props;
const { filters, selectedFilter } = this.state;
const _notifications = this._getNotificationsArrays();
@ -178,6 +174,8 @@ class NotificationView extends PureComponent {
ListFooterComponent={this._renderFooterLoading}
ListEmptyComponent={<ListPlaceHolder />}
refreshControl={
<ThemeContainer>
{({ isDarkTheme }) => (
<RefreshControl
refreshing={isNotificationRefreshing}
progressBackgroundColor="#357CE6"
@ -185,6 +183,8 @@ class NotificationView extends PureComponent {
titleColor="#fff"
colors={['#fff']}
/>
)}
</ThemeContainer>
}
renderItem={({ item, index }) => (
<Fragment>

2
src/components/points/view/pointsStyles.js
View File

@ -119,7 +119,7 @@ export default EStyleSheet.create({
},
scrollContainer: {
flex: 1,
backgroundColor: '$pureWhite',
backgroundColor: '$primaryBackgroundColor',
},
popoverDetails: {
flexDirection: 'row',

7
src/components/points/view/pointsView.js
View File

@ -13,6 +13,7 @@ import { Icon } from '../../icon';
import { MainButton } from '../../mainButton';
import { DropdownButton } from '../../dropdownButton';
import { CollapsibleCard } from '../../collapsibleCard';
import { ThemeContainer } from '../../../containers';
// Utils
import { getTimeFromNow } from '../../../utils/time';
@ -40,9 +41,11 @@ class PointsView extends Component {
// Component Functions
refreshControl = () => {
const { fetchUserActivity, refreshing, isDarkTheme } = this.props;
const { fetchUserActivity, refreshing } = this.props;
return (
<ThemeContainer>
{isDarkTheme => (
<RefreshControl
refreshing={refreshing}
onRefresh={fetchUserActivity}
@ -51,6 +54,8 @@ class PointsView extends Component {
titleColor="#fff"
colors={['#fff']}
/>
)}
</ThemeContainer>
);
};

3
src/components/posts/container/postsContainer.js
View File

@ -55,7 +55,6 @@ class PostsContainer extends PureComponent {
tag,
isLoginDone,
isLoggedIn,
isDarkTheme,
nsfw,
} = this.props;
const { promotedPosts } = this.state;
@ -80,7 +79,6 @@ class PostsContainer extends PureComponent {
tag={tag}
isLoginDone={isLoginDone}
isLoggedIn={isLoggedIn}
isDarkTheme={isDarkTheme}
nsfw={nsfw}
/>
);
@ -89,7 +87,6 @@ class PostsContainer extends PureComponent {
const mapStateToProps = state => ({
currentAccount: state.account.currentAccount,
isDarkTheme: state.application.isDarkTheme,
isLoggedIn: state.application.isLoggedIn,
isLoginDone: state.application.isLoginDone,
nsfw: state.application.nsfw,

7
src/components/posts/view/postsView.js
View File

@ -14,6 +14,7 @@ import { PostCard } from '../../postCard';
import { FilterBar } from '../../filterBar';
import { PostCardPlaceHolder, NoPost } from '../../basicUIElements';
import { POPULAR_FILTERS, PROFILE_FILTERS } from '../../../constants/options/filters';
import { ThemeContainer } from '../../../containers';
// Styles
import styles from './postsStyles';
@ -141,7 +142,6 @@ class PostsView extends Component {
? POPULAR_FILTERS[selectedFilterIndex].toLowerCase()
: PROFILE_FILTERS[selectedFilterIndex].toLowerCase();
let options;
const newPosts = [];
const limit = 3;
if (!isConnected) {
@ -362,7 +362,6 @@ class PostsView extends Component {
const {
filterOptions,
selectedOptionIndex,
isDarkTheme,
isHideImage,
handleImagesHide,
} = this.props;
@ -401,6 +400,8 @@ class PostsView extends Component {
onScrollEndDrag={this._handleOnScroll}
ListEmptyComponent={this._renderEmptyContent}
refreshControl={
<ThemeContainer>
{({ isDarkTheme }) => (
<RefreshControl
refreshing={refreshing}
onRefresh={this._handleOnRefreshPosts}
@ -409,6 +410,8 @@ class PostsView extends Component {
titleColor="#fff"
colors={['#fff']}
/>
)}
</ThemeContainer>
}
ref={ref => {
this.flatList = ref;

15
src/components/textInput/view/textInputView.js
View File

@ -1,21 +1,22 @@
import React from 'react';
import { TextInput } from 'react-native';
import { connect } from 'react-redux';
import { ThemeContainer } from '../../../containers';
// Styles
import styles from './textInputStyles';
const TextInputView = ({ isDarkTheme, innerRef, height, style, ...props }) => (
const TextInputView = ({ innerRef, height, style, ...props }) => (
<ThemeContainer>
{({ isDarkTheme }) => (
<TextInput
ref={innerRef}
keyboardAppearance={isDarkTheme ? 'dark' : 'light'}
{...props}
style={[styles.input, { minHeight: height }, style]}
/>
)}
</ThemeContainer>
);
const mapStateToProps = state => ({
isDarkTheme: state.application.isDarkTheme,
});
export default connect(mapStateToProps)(TextInputView);
export default TextInputView;

4
src/components/wallet/container/walletContainer.js
View File

@ -137,7 +137,7 @@ class WalletContainer extends Component {
};
render() {
const { currentAccount, selectedUser, isDarkTheme, handleOnScroll } = this.props;
const { currentAccount, selectedUser, handleOnScroll } = this.props;
const { walletData, isClaiming, isRefreshing } = this.state;
return (
@ -149,7 +149,6 @@ class WalletContainer extends Component {
isClaiming={isClaiming}
handleOnWalletRefresh={this._handleOnWalletRefresh}
isRefreshing={isRefreshing}
isDarkTheme={isDarkTheme}
handleOnScroll={handleOnScroll}
/>
);
@ -159,7 +158,6 @@ class WalletContainer extends Component {
const mapStateToProps = state => ({
currentAccount: state.account.currentAccount,
pinCode: state.application.pin,
isDarkTheme: state.application.isDarkTheme,
globalProps: state.account.globalProps,
});

6
src/components/wallet/view/walletView.js
View File

@ -10,6 +10,7 @@ import { CollapsibleCard } from '../../collapsibleCard';
import { WalletDetails } from '../../walletDetails';
import { Transaction } from '../../transaction';
import { WalletDetailsPlaceHolder } from '../../basicUIElements';
import { ThemeContainer } from '../../../containers';
// Styles
import styles from './walletStyles';
@ -53,7 +54,6 @@ class WalletView extends PureComponent {
isRefreshing,
selectedUsername,
walletData,
isDarkTheme,
handleOnScroll,
} = this.props;
@ -62,6 +62,8 @@ class WalletView extends PureComponent {
onScroll={handleOnScroll && handleOnScroll}
style={styles.scrollView}
refreshControl={
<ThemeContainer>
{isDarkTheme => (
<RefreshControl
refreshing={isRefreshing}
onRefresh={handleOnWalletRefresh}
@ -70,6 +72,8 @@ class WalletView extends PureComponent {
titleColor="#fff"
colors={['#fff']}
/>
)}
</ThemeContainer>
}
>
{!walletData ? (

14
src/containers/darkThemeContainer.js
View File

@ -1,14 +0,0 @@
import { React } from 'react';
import { connect } from 'react-redux';
const DarkThemeContainer = ({ children, isDarkTheme }) =>
children &&
children({
isDarkTheme,
});
const mapStateToProps = state => ({
isDarkTheme: state.application.isDarkTheme,
});
export default connect(mapStateToProps)(DarkThemeContainer);

4
src/containers/index.js
View File

@ -1,4 +1,3 @@
import DarkThemeContainer from './darkThemeContainer';
import InAppPurchaseContainer from './inAppPurchaseContainer';
import PointsContainer from './pointsContainer';
import ProfileContainer from './profileContainer';
@ -6,9 +5,9 @@ import ProfileEditContainer from './profileEditContainer';
import RedeemContainer from './redeemContainer';
import SpinGameContainer from './spinGameContainer';
import TransferContainer from './transferContainer';
import ThemeContainer from './themeContainer';
export {
DarkThemeContainer,
InAppPurchaseContainer,
PointsContainer,
ProfileContainer,
@ -16,4 +15,5 @@ export {
RedeemContainer,
SpinGameContainer,
TransferContainer,
ThemeContainer,
};

3
src/containers/pointsContainer.js
View File

@ -231,7 +231,6 @@ class PointsContainer extends Component {
const {
balance,
isClaiming,
isDarkTheme,
isLoading,
navigationParams,
refreshing,
@ -257,7 +256,6 @@ class PointsContainer extends Component {
handleOnDropdownSelected: this._handleOnDropdownSelected,
handleOnPressTransfer: this._handleOnPressTransfer,
isClaiming,
isDarkTheme,
isLoading,
navigationParams,
refreshing,
@ -271,7 +269,6 @@ class PointsContainer extends Component {
const mapStateToProps = state => ({
username: state.account.currentAccount.name,
isDarkTheme: state.application.isDarkTheme,
activeBottomTab: state.ui.activeBottomTab,
isConnected: state.application.isConnected,
accounts: state.account.otherAccounts,

1
src/containers/redeemContainer.js
View File

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

18
src/containers/themeContainer.js Normal file
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);

4
src/screens/notification/container/notificationContainer.js
View File

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

2
src/screens/points/screen/pointsScreen.js
View File

@ -25,7 +25,6 @@ const PointsScreen = ({ isLoggedIn, handleLoginPress }) => {
claimPoints,
fetchUserActivity,
isClaiming,
isDarkTheme,
isLoading,
refreshing,
userActivities,
@ -35,7 +34,6 @@ const PointsScreen = ({ isLoggedIn, handleLoginPress }) => {
claimPoints={claimPoints}
fetchUserActivity={fetchUserActivity}
isClaiming={isClaiming}
isDarkTheme={isDarkTheme}
isLoading={isLoading}
refreshing={refreshing}
userActivities={userActivities}