mirror of
https://github.com/ecency/ecency-mobile.git
synced 2024-12-23 21:35:04 +03:00
added popover for details
This commit is contained in:
u-e
parent
e1e4958daa
commit
bd9f538eb9
@ -56,7 +56,6 @@ export default EStyleSheet.create({
|
||||
backgroundColor: '$primaryBlue',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
zIndex: 99,
|
||||
padding: 2,
|
||||
height: 12,
|
||||
minWidth: 18,
|
||||
@ -101,5 +100,24 @@ export default EStyleSheet.create({
|
||||
scrollContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
|
||||
popoverDetails: {
|
||||
flexDirection: 'row',
|
||||
height: 130,
|
||||
width: '$deviceWidth /2',
|
||||
borderRadius: 20,
|
||||
paddingHorizontal: 26,
|
||||
backgroundColor: '$primaryBackgroundColor',
|
||||
},
|
||||
arrow: {
|
||||
borderTopColor: '$primaryBackgroundColor',
|
||||
},
|
||||
popoverWrapper: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
overlay: {
|
||||
backgroundColor: '#403c4449',
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import {
|
||||
Text, View, FlatList, ScrollView, RefreshControl,
|
||||
Text, View, FlatList, ScrollView, RefreshControl, TouchableOpacity,
|
||||
} from 'react-native';
|
||||
import { injectIntl } from 'react-intl';
|
||||
import { Popover, PopoverController } from 'react-native-modal-popover';
|
||||
|
||||
// Components
|
||||
import { LineBreak, WalletLineItem } from '../../basicUIElements';
|
||||
@ -57,6 +58,7 @@ class PointsView extends Component {
|
||||
const isActiveIcon = false;
|
||||
|
||||
return (
|
||||
|
||||
<Fragment>
|
||||
<LineBreak height={12} />
|
||||
<ScrollView
|
||||
@ -65,7 +67,6 @@ class PointsView extends Component {
|
||||
>
|
||||
<Text style={styles.pointText}>{userPoints.points}</Text>
|
||||
<Text style={styles.subText}>eSteem Points</Text>
|
||||
|
||||
{userPoints.unclaimed_points > 0
|
||||
&& (
|
||||
<MainButton
|
||||
@ -91,21 +92,48 @@ class PointsView extends Component {
|
||||
data={POINTS_KEYS}
|
||||
horizontal
|
||||
renderItem={({ item }) => (
|
||||
<View styles={styles.iconWrapper}>
|
||||
<View style={styles.iconWrapper}>
|
||||
<IconButton
|
||||
disabled
|
||||
iconStyle={styles.icon}
|
||||
style={styles.iconButton}
|
||||
iconType={POINTS[item.type].iconType}
|
||||
name={POINTS[item.type].icon}
|
||||
badgeCount={POINTS[item.type].point}
|
||||
badgeStyle={styles.badge}
|
||||
badgeTextStyle={styles.badgeText}
|
||||
/>
|
||||
</View>
|
||||
<Text style={styles.subText}>{intl.formatMessage({ id: POINTS[item.type].nameKey })}</Text>
|
||||
</View>
|
||||
<PopoverController key={item.type}>
|
||||
{({
|
||||
openPopover, closePopover, popoverVisible, setPopoverAnchor, popoverAnchorRect,
|
||||
}) => (
|
||||
<View styles={styles.iconWrapper} key={item.type}>
|
||||
<View style={styles.iconWrapper}>
|
||||
<TouchableOpacity
|
||||
ref={setPopoverAnchor}
|
||||
onPress={openPopover}
|
||||
>
|
||||
<IconButton
|
||||
iconStyle={styles.icon}
|
||||
style={styles.iconButton}
|
||||
iconType={POINTS[item.type].iconType}
|
||||
name={POINTS[item.type].icon}
|
||||
badgeCount={POINTS[item.type].point}
|
||||
badgeStyle={styles.badge}
|
||||
badgeTextStyle={styles.badgeText}
|
||||
disabled
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<Text style={styles.subText}>{intl.formatMessage({ id: POINTS[item.type].nameKey })}</Text>
|
||||
<Popover
|
||||
backgroundStyle={styles.overlay}
|
||||
contentStyle={styles.popoverDetails}
|
||||
arrowStyle={styles.arrow}
|
||||
visible={popoverVisible}
|
||||
onClose={() => {
|
||||
closePopover();
|
||||
}}
|
||||
fromRect={popoverAnchorRect}
|
||||
placement="top"
|
||||
supportedOrientations={['portrait', 'landscape']}
|
||||
>
|
||||
<View style={styles.popoverWrapper}>
|
||||
<Text>{intl.formatMessage({ id: POINTS[item.type].descriptionKey })}</Text>
|
||||
</View>
|
||||
</Popover>
|
||||
</View>
|
||||
)}
|
||||
</PopoverController>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
@ -134,8 +162,11 @@ class PointsView extends Component {
|
||||
)
|
||||
}
|
||||
</View>
|
||||
|
||||
</ScrollView>
|
||||
</Fragment>
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
24
yarn.lock
24
yarn.lock
@ -2341,10 +2341,10 @@ commander@^2.11.0, commander@^2.14.1, commander@^2.9.0, commander@~2.20.0:
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
|
||||
integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
|
||||
|
||||
commander@~2.19.0:
|
||||
version "2.19.0"
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
|
||||
integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
|
||||
commander@~2.13.0:
|
||||
version "2.13.0"
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
|
||||
integrity sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA==
|
||||
|
||||
commander@~2.8.1:
|
||||
version "2.8.1"
|
||||
@ -2603,7 +2603,7 @@ date-fns@^1.27.2:
|
||||
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
|
||||
integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
|
||||
|
||||
debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
|
||||
debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
|
||||
version "2.6.9"
|
||||
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
|
||||
integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
|
||||
@ -2892,10 +2892,10 @@ drbg.js@^1.0.1:
|
||||
create-hash "^1.1.2"
|
||||
create-hmac "^1.1.4"
|
||||
|
||||
dsteem@^0.11.2:
|
||||
version "0.11.2"
|
||||
resolved "https://registry.yarnpkg.com/dsteem/-/dsteem-0.11.2.tgz#1c3b4185999c804a234475738e00a49b55112fed"
|
||||
integrity sha512-hd/JObnTvOnSbqkCTqtj4k0vufB48+TpdylmrquXZNL79Q3fijcwga0Uk4vlb9rcYPZQbDI6z6kt5mEg9RATqA==
|
||||
dsteem@^0.10.1:
|
||||
version "0.10.1"
|
||||
resolved "https://registry.yarnpkg.com/dsteem/-/dsteem-0.10.1.tgz#1921d9f662f138c0b52f8fa77c7abc37ceab42f4"
|
||||
integrity sha512-IF8yMagK+id3qHABEmQSrn7FjNiCTZzbohzig8jE09TBUpwePBxx+1UUedms/EY4oUlziaDa6h7Znb/Pp2dXgQ==
|
||||
dependencies:
|
||||
bs58 "^4.0.1"
|
||||
bytebuffer "^5.0.1"
|
||||
@ -6117,7 +6117,7 @@ mkdirp@^0.5.0, mkdirp@^0.5.1:
|
||||
dependencies:
|
||||
minimist "0.0.8"
|
||||
|
||||
moment@^2.22.2:
|
||||
moment@^2.22.0, moment@^2.22.2:
|
||||
version "2.24.0"
|
||||
resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
|
||||
integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
|
||||
@ -7997,7 +7997,7 @@ scheduler@^0.13.6:
|
||||
loose-envify "^1.1.0"
|
||||
object-assign "^4.1.1"
|
||||
|
||||
secp256k1@^3.5.2:
|
||||
secp256k1@^3.3.1:
|
||||
version "3.6.2"
|
||||
resolved "https://registry.yarnpkg.com/secp256k1/-/secp256k1-3.6.2.tgz#da835061c833c74a12f75c73d2ec2e980f00dc1f"
|
||||
integrity sha512-90nYt7yb0LmI4A2jJs1grglkTAXrBwxYAjP9bpeKjvJKOjG2fOeH/YI/lchDMIvjrOasd5QXwvV2jwN168xNng==
|
||||
@ -8844,9 +8844,11 @@ type-check@~0.3.2:
|
||||
dependencies:
|
||||
prelude-ls "~1.1.2"
|
||||
|
||||
type-fest@^0.3.0:
|
||||
version "0.3.1"
|
||||
resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.3.1.tgz#63d00d204e059474fe5e1b7c011112bbd1dc29e1"
|
||||
integrity sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==
|
||||
|
||||
typedarray@^0.0.6:
|
||||
version "0.0.6"
|
||||
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user