dc53a74459
* style: enforce ordering of imports * style: sort imports in loot-core * style: sort imports in desktop-client * style: sort imports in loot-design * style: manual fixes
70 lines
1.8 KiB
JavaScript
70 lines
1.8 KiB
JavaScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { useTransition, animated } from 'react-spring';
|
|
|
|
import * as actions from 'loot-core/src/client/actions';
|
|
import { View, Text } from 'loot-design/src/components/common';
|
|
import { colors, styles } from 'loot-design/src/style';
|
|
|
|
import AnimatedRefresh from './AnimatedRefresh';
|
|
|
|
function BankSyncStatus({ accountsSyncing }) {
|
|
let name = accountsSyncing
|
|
? accountsSyncing === '__all'
|
|
? 'accounts'
|
|
: accountsSyncing
|
|
: null;
|
|
|
|
const transitions = useTransition(name, null, {
|
|
from: { opacity: 0, transform: 'translateY(-100px)' },
|
|
enter: { opacity: 1, transform: 'translateY(0)' },
|
|
leave: { opacity: 0, transform: 'translateY(-100px)' },
|
|
unique: true
|
|
});
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
marginTop: 5,
|
|
alignItems: 'center',
|
|
zIndex: 501
|
|
}}
|
|
>
|
|
{transitions.map(
|
|
({ item, key, props }) =>
|
|
item && (
|
|
<animated.div key={key} style={props}>
|
|
<View
|
|
style={{
|
|
borderRadius: 4,
|
|
backgroundColor: colors.b9,
|
|
color: colors.b1,
|
|
padding: '5px 13px',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
boxShadow: styles.shadow
|
|
}}
|
|
>
|
|
<AnimatedRefresh
|
|
animating={true}
|
|
iconStyle={{ color: colors.b1 }}
|
|
/>
|
|
<Text>Syncing {item}</Text>
|
|
</View>
|
|
</animated.div>
|
|
)
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default connect(
|
|
state => ({
|
|
accountsSyncing: state.account.accountsSyncing
|
|
}),
|
|
actions
|
|
)(BankSyncStatus);
|