|
@@ -4,7 +4,7 @@ import * as React from 'react';
|
4
|
4
|
import {Badge, IconButton, withTheme} from 'react-native-paper';
|
5
|
5
|
import {View} from "react-native";
|
6
|
6
|
import type {CustomTheme} from "../../managers/ThemeManager";
|
7
|
|
-
|
|
7
|
+import * as Animatable from "react-native-animatable";
|
8
|
8
|
|
9
|
9
|
type Props = {
|
10
|
10
|
color: string,
|
|
@@ -15,6 +15,9 @@ type Props = {
|
15
|
15
|
theme: CustomTheme,
|
16
|
16
|
};
|
17
|
17
|
|
|
18
|
+const AnimatableBadge = Animatable.createAnimatableComponent(Badge);
|
|
19
|
+const AnimatableIconButton = Animatable.createAnimatableComponent(IconButton);
|
|
20
|
+
|
18
|
21
|
/**
|
19
|
22
|
* Component used to render a small dashboard item
|
20
|
23
|
*/
|
|
@@ -31,7 +34,7 @@ class SmallDashboardItem extends React.Component<Props> {
|
31
|
34
|
const colors = props.theme.colors;
|
32
|
35
|
return (
|
33
|
36
|
<View>
|
34
|
|
- <IconButton
|
|
37
|
+ <AnimatableIconButton
|
35
|
38
|
icon={props.icon}
|
36
|
39
|
color={
|
37
|
40
|
props.isAvailable
|
|
@@ -43,14 +46,17 @@ class SmallDashboardItem extends React.Component<Props> {
|
43
|
46
|
/>
|
44
|
47
|
{
|
45
|
48
|
props.badgeNumber > 0 ?
|
46
|
|
- <Badge
|
|
49
|
+ <AnimatableBadge
|
|
50
|
+ animation={"zoomIn"}
|
|
51
|
+ duration={300}
|
|
52
|
+ useNativeDriver
|
47
|
53
|
style={{
|
48
|
54
|
position: 'absolute',
|
49
|
55
|
top: 5,
|
50
|
56
|
right: 5
|
51
|
57
|
}}>
|
52
|
58
|
{props.badgeNumber}
|
53
|
|
- </Badge> : null
|
|
59
|
+ </AnimatableBadge> : null
|
54
|
60
|
}
|
55
|
61
|
</View>
|
56
|
62
|
);
|