e30ae8ed09
- App.tsx: full navigation (Auth stack + Main tabs with 5 screens) - Auth: LoginScreen, RegisterScreen, ForgotPasswordScreen - HomeScreen: dashboard with IoT metrics, weather widget, alerts, quick actions, sensors - MapScreen: interactive map with layer toggles (6 layers) - MarketplaceScreen: categories (6), products (5), search - ChatScreen: AI chat with quick prompts (4), bot responses - ProfileScreen: user info, stats, menu (9 items), logout - AlertsScreen: alert list with severity, acknowledge - SensorsScreen: sensor list with type filters (6 types), search - ZonesScreen: zone cards with stats - SettingsScreen: language picker (FR/EN/ES/DE), privacy, about - Stores: iotStore (sensors, zones, alerts), notificationStore, uiStore + i18n - Hooks: useSensors, useAlerts, useNotifications, useLocation - Components: Card, Button, LoadingSpinner, ErrorBoundary, Header - Services: iotService, notificationService (with axios API client) - Utils: formatters (temp, AQI, noise, dates), validators (email, password, IBAN) - Theme: colors.ts with full design system (Blue Ocean palette) - Ditto: fixed MongoDB connection, new JWT secrets, official gateway image
95 lines
2.4 KiB
JavaScript
95 lines
2.4 KiB
JavaScript
import * as React from 'react';
|
|
import { Animated, StyleSheet, View } from 'react-native';
|
|
import Icon, { isEqualIcon, isValidIcon } from './Icon';
|
|
import { useInternalTheme } from '../core/theming';
|
|
const CrossFadeIcon = ({
|
|
color,
|
|
size,
|
|
source,
|
|
theme: themeOverrides,
|
|
testID = 'cross-fade-icon'
|
|
}) => {
|
|
const theme = useInternalTheme(themeOverrides);
|
|
const [currentIcon, setCurrentIcon] = React.useState(() => source);
|
|
const [previousIcon, setPreviousIcon] = React.useState(null);
|
|
const {
|
|
current: fade
|
|
} = React.useRef(new Animated.Value(1));
|
|
const {
|
|
scale
|
|
} = theme.animation;
|
|
if (currentIcon !== source) {
|
|
setPreviousIcon(() => currentIcon);
|
|
setCurrentIcon(() => source);
|
|
}
|
|
React.useEffect(() => {
|
|
if (isValidIcon(previousIcon) && !isEqualIcon(previousIcon, currentIcon)) {
|
|
fade.setValue(1);
|
|
Animated.timing(fade, {
|
|
duration: scale * 200,
|
|
toValue: 0,
|
|
useNativeDriver: true
|
|
}).start();
|
|
}
|
|
}, [currentIcon, previousIcon, fade, scale]);
|
|
const opacityPrev = fade;
|
|
const opacityNext = previousIcon ? fade.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: [1, 0]
|
|
}) : 1;
|
|
const rotatePrev = fade.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: ['-90deg', '0deg']
|
|
});
|
|
const rotateNext = previousIcon ? fade.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: ['0deg', '-180deg']
|
|
}) : '0deg';
|
|
return /*#__PURE__*/React.createElement(View, {
|
|
style: [styles.content, {
|
|
height: size,
|
|
width: size
|
|
}]
|
|
}, previousIcon ? /*#__PURE__*/React.createElement(Animated.View, {
|
|
style: [styles.icon, {
|
|
opacity: opacityPrev,
|
|
transform: [{
|
|
rotate: rotatePrev
|
|
}]
|
|
}],
|
|
testID: `${testID}-previous`
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
source: previousIcon,
|
|
size: size,
|
|
color: color,
|
|
theme: theme
|
|
})) : null, /*#__PURE__*/React.createElement(Animated.View, {
|
|
style: [styles.icon, {
|
|
opacity: opacityNext,
|
|
transform: [{
|
|
rotate: rotateNext
|
|
}]
|
|
}],
|
|
testID: `${testID}-current`
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
source: currentIcon,
|
|
size: size,
|
|
color: color,
|
|
theme: theme
|
|
})));
|
|
};
|
|
export default CrossFadeIcon;
|
|
const styles = StyleSheet.create({
|
|
content: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
},
|
|
icon: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0
|
|
}
|
|
});
|
|
//# sourceMappingURL=CrossFadeIcon.js.map
|