From 6f005a5d7d831ac413a323159c62f1ff4215300d Mon Sep 17 00:00:00 2001 From: keplyx Date: Tue, 25 Feb 2020 22:06:02 +0100 Subject: [PATCH 01/66] Fixed proximo list details --- screens/Proximo/ProximoListScreen.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index 3df22a6..2943fee 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -78,7 +78,6 @@ export default class ProximoListScreen extends React.Component { onSelectSortModePrice: Function; onSortMenuPress: Function; renderItem: Function; - onListItemPress: Function; constructor(props: any) { super(props); @@ -91,7 +90,6 @@ export default class ProximoListScreen extends React.Component { this.onSelectSortModePrice = this.onSelectSortModePrice.bind(this); this.onSortMenuPress = this.onSortMenuPress.bind(this); this.renderItem = this.renderItem.bind(this); - this.onListItemPress = this.onListItemPress.bind(this); } /** @@ -318,9 +316,10 @@ export default class ProximoListScreen extends React.Component { } renderItem({item}: Object) { + const onListItemPress = this.onListItemPress.bind(this, item); return ( From 7acbb886411c772771a86e9d1c1cb4f38aab0489 Mon Sep 17 00:00:00 2001 From: keplyx Date: Tue, 25 Feb 2020 22:07:03 +0100 Subject: [PATCH 02/66] Updated version --- app.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app.json b/app.json index 70c074f..f1ef51b 100644 --- a/app.json +++ b/app.json @@ -10,7 +10,7 @@ "android", "web" ], - "version": "1.5.1", + "version": "1.5.2", "orientation": "portrait", "primaryColor": "#be1522", "icon": "./assets/android.icon.png", @@ -36,7 +36,7 @@ }, "android": { "package": "fr.amicaleinsat.application", - "versionCode": 14, + "versionCode": 15, "icon": "./assets/android.icon.png", "adaptiveIcon": { "foregroundImage": "./assets/android.adaptive-icon.png", From 7e48300fa0222260aee2e3a64462dc7d81bffd5c Mon Sep 17 00:00:00 2001 From: keplyx Date: Thu, 5 Mar 2020 10:29:15 +0100 Subject: [PATCH 03/66] Updated react navigation to v5 --- App.js | 54 +++---- components/BaseContainer.js | 65 +-------- navigation/AppNavigator.js | 14 -- navigation/DrawerNavigator.js | 191 ++++++++++++++++++------- navigation/MainTabNavigator.js | 252 ++++++++++++++++++++------------- package.json | 13 +- 6 files changed, 326 insertions(+), 263 deletions(-) delete mode 100644 navigation/AppNavigator.js diff --git a/App.js b/App.js index 7c5ac2d..821cbdc 100644 --- a/App.js +++ b/App.js @@ -3,15 +3,17 @@ import * as React from 'react'; import {Platform, StatusBar} from 'react-native'; import {Root, StyleProvider} from 'native-base'; -import {createAppContainerWithInitialRoute} from './navigation/AppNavigator'; import LocaleManager from './utils/LocaleManager'; import * as Font from 'expo-font'; import {clearThemeCache} from 'native-base-shoutem-theme'; import AsyncStorageManager from "./utils/AsyncStorageManager"; import CustomIntroSlider from "./components/CustomIntroSlider"; -import {AppLoading} from 'expo'; +import {SplashScreen} from 'expo'; import NotificationsManager from "./utils/NotificationsManager"; import ThemeManager from './utils/ThemeManager'; +import { NavigationContainer } from '@react-navigation/native'; +import { createStackNavigator } from '@react-navigation/stack'; +import DrawerNavigator from './navigation/DrawerNavigator'; type Props = {}; @@ -22,6 +24,8 @@ type State = { currentTheme: ?Object, }; +const Stack = createStackNavigator(); + export default class App extends React.Component { state = { @@ -31,16 +35,9 @@ export default class App extends React.Component { currentTheme: null, }; - onIntroDone: Function; - loadAssetsAsync: Function; - onLoadFinished: Function; - constructor(props: Object) { super(props); LocaleManager.initTranslations(); - this.onIntroDone = this.onIntroDone.bind(this); - this.loadAssetsAsync = this.loadAssetsAsync.bind(this); - this.onLoadFinished = this.onLoadFinished.bind(this); } /** @@ -76,19 +73,29 @@ export default class App extends React.Component { AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.showUpdate5.key, '0'); } + async componentDidMount() { + await this.loadAssetsAsync(); + } + async loadAssetsAsync() { // Wait for custom fonts to be loaded before showing the app + console.log("loading Fonts"); + SplashScreen.preventAutoHide(); await Font.loadAsync({ - 'Roboto': require('native-base/Fonts/Roboto.ttf'), 'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'), - 'material-community': require('native-base/Fonts/MaterialCommunityIcons.ttf'), }); + console.log("loading preferences"); await AsyncStorageManager.getInstance().loadPreferences(); ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme()); + console.log("loading Expo token"); await NotificationsManager.initExpoToken(); + console.log("loaded"); + this.onLoadFinished(); } onLoadFinished() { + + console.log("finished"); // Only show intro if this is the first time starting the app this.setState({ isLoading: false, @@ -97,33 +104,30 @@ export default class App extends React.Component { showUpdate: AsyncStorageManager.getInstance().preferences.showUpdate5.current === '1' }); // Status bar goes dark if set too fast - setTimeout(this.setupStatusBar, - 1000 - ) + setTimeout(this.setupStatusBar, 1000); + SplashScreen.hide(); } /** * Renders the app based on loading state */ render() { + console.log("render"); if (this.state.isLoading) { - return ( - - ); - } - if (this.state.showIntro || this.state.showUpdate) { + return null; + } else if (this.state.showIntro || this.state.showUpdate) { return ; } else { - const AppNavigator = createAppContainerWithInitialRoute(AsyncStorageManager.getInstance().preferences.defaultStartScreen.current); + return ( - + + + + + ); diff --git a/components/BaseContainer.js b/components/BaseContainer.js index c0b5bd0..1d7563d 100644 --- a/components/BaseContainer.js +++ b/components/BaseContainer.js @@ -4,11 +4,9 @@ import * as React from 'react'; import {Container} from "native-base"; import CustomHeader from "./CustomHeader"; import CustomMaterialIcon from "./CustomMaterialIcon"; -import {Platform, StatusBar, View} from "react-native"; +import {Platform, View} from "react-native"; import ThemeManager from "../utils/ThemeManager"; import Touchable from "react-native-platform-touchable"; -import {ScreenOrientation} from "expo"; -import {NavigationActions} from "react-navigation"; type Props = { @@ -39,81 +37,22 @@ export default class BaseContainer extends React.Component { hideHeaderOnLandscape: false, headerSubtitle: '', }; - willBlurSubscription: function; - willFocusSubscription: function; + state = { isHeaderVisible: true, }; onDrawerPress: Function; - onWillFocus: Function; - onWillBlur: Function; - onChangeOrientation: Function; constructor() { super(); this.onDrawerPress = this.onDrawerPress.bind(this); - this.onWillFocus = this.onWillFocus.bind(this); - this.onWillBlur = this.onWillBlur.bind(this); - this.onChangeOrientation = this.onChangeOrientation.bind(this); } onDrawerPress() { this.props.navigation.toggleDrawer(); } - onWillFocus() { - if (this.props.enableRotation) { - ScreenOrientation.unlockAsync(); - ScreenOrientation.addOrientationChangeListener(this.onChangeOrientation); - } - } - - onWillBlur() { - if (this.props.enableRotation) - ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT); - } - - onChangeOrientation(OrientationChangeEvent) { - if (this.props.hideHeaderOnLandscape) { - let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE || - OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT || - OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT; - this.setState({isHeaderVisible: !isLandscape}); - const setParamsAction = NavigationActions.setParams({ - params: {showTabBar: !isLandscape}, - key: this.props.navigation.state.key, - }); - this.props.navigation.dispatch(setParamsAction); - StatusBar.setHidden(isLandscape); - } - } - - /** - * Register for blur event to close side menu on screen change - */ - componentDidMount() { - this.willFocusSubscription = this.props.navigation.addListener( - 'willFocus', - this.onWillFocus - ); - this.willBlurSubscription = this.props.navigation.addListener( - 'willBlur', - this.onWillBlur - ); - } - - /** - * Unregister from event when un-mounting components - */ - componentWillUnmount() { - if (this.willBlurSubscription !== undefined) - this.willBlurSubscription.remove(); - if (this.willFocusSubscription !== undefined) - this.willFocusSubscription.remove(); - } - - render() { // console.log("rendering BaseContainer"); return ( diff --git a/navigation/AppNavigator.js b/navigation/AppNavigator.js deleted file mode 100644 index e43a316..0000000 --- a/navigation/AppNavigator.js +++ /dev/null @@ -1,14 +0,0 @@ -// @flow - -import {createAppContainer} from 'react-navigation'; -import {createDrawerNavigatorWithInitialRoute} from './DrawerNavigator'; - - -/** - * Create a stack navigator using the drawer to handle navigation between screens - */ -function createAppContainerWithInitialRoute(initialRoute: string) { - return createAppContainer(createDrawerNavigatorWithInitialRoute(initialRoute)); -} - -export {createAppContainerWithInitialRoute}; diff --git a/navigation/DrawerNavigator.js b/navigation/DrawerNavigator.js index ba16eef..ebadd29 100644 --- a/navigation/DrawerNavigator.js +++ b/navigation/DrawerNavigator.js @@ -1,7 +1,8 @@ // @flow -import { createDrawerNavigator } from 'react-navigation-drawer'; -import {createMaterialBottomTabNavigatorWithInitialRoute} from './MainTabNavigator'; +import * as React from 'react'; +import {createDrawerNavigator} from '@react-navigation/drawer'; +import TabNavigator from './MainTabNavigator'; import SettingsScreen from '../screens/SettingsScreen'; import AboutScreen from '../screens/About/AboutScreen'; import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen'; @@ -15,65 +16,145 @@ import EntScreen from "../screens/Websites/EntScreen"; import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen"; import DebugScreen from '../screens/DebugScreen'; import Sidebar from "../components/Sidebar"; -import {createStackNavigator, TransitionPresets} from "react-navigation-stack"; +import {createStackNavigator, TransitionPresets} from "@react-navigation/stack"; -const AboutStack = createStackNavigator({ - AboutScreen: {screen: AboutScreen}, - AboutDependenciesScreen: {screen: AboutDependenciesScreen}, - DebugScreen: {screen: DebugScreen}, - }, - { - initialRouteName: "AboutScreen", - mode: 'card', - headerMode: "none", - defaultNavigationOptions: { - gestureEnabled: true, - cardOverlayEnabled: true, - ...TransitionPresets.SlideFromRightIOS, - }, - }); +const AboutStack = createStackNavigator(); - -// Create a stack to use animations -function createDrawerStackWithInitialRoute(initialRoute: string) { - return createStackNavigator({ - Main: createMaterialBottomTabNavigatorWithInitialRoute(initialRoute), - SettingsScreen: {screen: SettingsScreen}, - AboutScreen: AboutStack, - SelfMenuScreen: {screen: SelfMenuScreen}, - TutorInsaScreen: {screen: TutorInsaScreen}, - AmicaleScreen: {screen: AmicaleScreen}, - WiketudScreen: {screen: WiketudScreen}, - ElusEtudScreen: {screen: ElusEtudScreen}, - BlueMindScreen: {screen: BlueMindScreen}, - EntScreen: {screen: EntScreen}, - AvailableRoomScreen: {screen: AvailableRoomScreen}, - }, - { - initialRouteName: "Main", - mode: 'card', - headerMode: "none", - defaultNavigationOptions: { +function AboutStackComponent() { + return ( + + + + + + ); } -/** - * Creates the drawer navigation stack - */ -function createDrawerNavigatorWithInitialRoute(initialRoute: string) { - return createDrawerNavigator({ - Main: createDrawerStackWithInitialRoute(initialRoute), - }, { - contentComponent: Sidebar, - initialRouteName: 'Main', - backBehavior: 'initialRoute', - drawerType: 'front', - useNativeAnimations: true, - }); +const Drawer = createDrawerNavigator(); + +function getDrawerContent(nav) { + return } -export {createDrawerNavigatorWithInitialRoute}; +export default function DrawerNavigator() { + return ( + getDrawerContent(props.navigation)} + screenOptions={{ + gestureEnabled: true, + cardOverlayEnabled: true, + ...TransitionPresets.SlideFromRightIOS, + }} + > + + + + + + + + + + + + + + ); +} +// +// // Create a stack to use animations +// function createDrawerStackWithInitialRoute(initialRoute: string) { +// return createStackNavigator({ +// Main: createMaterialBottomTabNavigatorWithInitialRoute(initialRoute), +// SettingsScreen: {screen: SettingsScreen}, +// AboutScreen: AboutStack, +// SelfMenuScreen: {screen: SelfMenuScreen}, +// TutorInsaScreen: {screen: TutorInsaScreen}, +// AmicaleScreen: {screen: AmicaleScreen}, +// WiketudScreen: {screen: WiketudScreen}, +// ElusEtudScreen: {screen: ElusEtudScreen}, +// BlueMindScreen: {screen: BlueMindScreen}, +// EntScreen: {screen: EntScreen}, +// AvailableRoomScreen: {screen: AvailableRoomScreen}, +// }, +// { +// initialRouteName: "Main", +// mode: 'card', +// headerMode: "none", +// defaultNavigationOptions: { +// gestureEnabled: true, +// cardOverlayEnabled: true, +// ...TransitionPresets.SlideFromRightIOS, +// }, +// }); +// } + +// /** +// * Creates the drawer navigation stack +// */ +// function createDrawerNavigatorWithInitialRoute(initialRoute: string) { +// return createDrawerNavigator({ +// Main: createDrawerStackWithInitialRoute(initialRoute), +// }, { +// contentComponent: Sidebar, +// initialRouteName: 'Main', +// backBehavior: 'initialRoute', +// drawerType: 'front', +// useNativeAnimations: true, +// }); +// } +// +// export {createDrawerNavigatorWithInitialRoute}; diff --git a/navigation/MainTabNavigator.js b/navigation/MainTabNavigator.js index 1d0e556..efae773 100644 --- a/navigation/MainTabNavigator.js +++ b/navigation/MainTabNavigator.js @@ -1,6 +1,6 @@ import * as React from 'react'; -import {createStackNavigator, TransitionPresets} from 'react-navigation-stack'; -import {createMaterialBottomTabNavigator} from "react-navigation-material-bottom-tabs"; +import {createStackNavigator, TransitionPresets} from '@react-navigation/stack'; +import {createMaterialBottomTabNavigator} from "@react-navigation/material-bottom-tabs"; import HomeScreen from '../screens/HomeScreen'; import PlanningScreen from '../screens/PlanningScreen'; @@ -13,6 +13,11 @@ import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen"; import PlanexScreen from '../screens/Websites/PlanexScreen'; import CustomMaterialIcon from "../components/CustomMaterialIcon"; import ThemeManager from "../utils/ThemeManager"; +import AboutScreen from "../screens/About/AboutScreen"; +import AboutDependenciesScreen from "../screens/About/AboutDependenciesScreen"; +import DebugScreen from "../screens/DebugScreen"; +import SettingsScreen from "../screens/SettingsScreen"; +import AsyncStorageManager from "../utils/AsyncStorageManager"; const TAB_ICONS = { Home: 'triangle', @@ -22,106 +27,153 @@ const TAB_ICONS = { Planex: 'timetable', }; -const ProximoStack = createStackNavigator({ - ProximoMainScreen: {screen: ProximoMainScreen}, - ProximoListScreen: {screen: ProximoListScreen}, - ProximoAboutScreen: { - screen: ProximoAboutScreen, - navigationOptions: () => ({ - ...TransitionPresets.ModalSlideFromBottomIOS, - }), - }, - }, - { - initialRouteName: "ProximoMainScreen", - mode: 'card', - headerMode: "none", - defaultNavigationOptions: { - gestureEnabled: true, - cardOverlayEnabled: true, - ...TransitionPresets.SlideFromRightIOS, - }, - }); +const ProximoStack = createStackNavigator(); -const ProxiwashStack = createStackNavigator({ - ProxiwashScreen: {screen: ProxiwashScreen}, - ProxiwashAboutScreen: {screen: ProxiwashAboutScreen}, - }, - { - initialRouteName: "ProxiwashScreen", - mode: 'card', - headerMode: "none", - defaultNavigationOptions: { - gestureEnabled: true, - cardOverlayEnabled: true, - ...TransitionPresets.ModalSlideFromBottomIOS, - }, - }); - -const PlanningStack = createStackNavigator({ - PlanningScreen: {screen: PlanningScreen}, - PlanningDisplayScreen: {screen: PlanningDisplayScreen}, - }, - { - initialRouteName: "PlanningScreen", - mode: 'card', - headerMode: "none", - defaultNavigationOptions: { - gestureEnabled: true, - cardOverlayEnabled: true, - ...TransitionPresets.ModalSlideFromBottomIOS, - }, - }); - -const HomeStack = createStackNavigator({ - HomeScreen: {screen: HomeScreen}, - PlanningDisplayScreen: {screen: PlanningDisplayScreen}, - }, - { - initialRouteName: "HomeScreen", - mode: 'card', - headerMode: "none", - defaultNavigationOptions: { - gestureEnabled: true, - cardOverlayEnabled: true, - ...TransitionPresets.ModalSlideFromBottomIOS, - }, - }); - -function createMaterialBottomTabNavigatorWithInitialRoute(initialRoute: string) { - return createMaterialBottomTabNavigator({ - Home: HomeStack, - Planning: PlanningStack, - Proxiwash: ProxiwashStack, - Proximo: ProximoStack, - Planex: { - screen: PlanexScreen, - navigationOptions: ({navigation}) => { - const showTabBar = navigation.state && navigation.state.params ? navigation.state.params.showTabBar : true; - return { - tabBarVisible: showTabBar, - }; - }, - }, - }, { - defaultNavigationOptions: ({navigation}) => ({ - tabBarIcon: ({focused, tintColor}) => { - let icon = TAB_ICONS[navigation.state.routeName]; - // tintColor is ignoring activeColor et inactiveColor for some reason - let color = focused ? "#f0edf6" : "#4e1108"; - return ; - }, - tabBarVisible: true, - }), - order: ['Proximo', 'Planning', 'Home', 'Proxiwash', 'Planex'], - initialRouteName: initialRoute, - activeColor: '#f0edf6', - inactiveColor: '#4e1108', - backBehavior: 'initialRoute', - barStyle: {backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary}, - }); +function ProximoStackComponent() { + return ( + + + + + + ); } +const ProxiwashStack = createStackNavigator(); -export {createMaterialBottomTabNavigatorWithInitialRoute}; +function ProxiwashStackComponent() { + return ( + + + + + ); +} +const PlanningStack = createStackNavigator(); + +function PlanningStackComponent() { + return ( + + + + + ); +} + +const HomeStack = createStackNavigator(); + +function HomeStackComponent() { + return ( + + + + + ); +} + +const Tab = createMaterialBottomTabNavigator(); + +export default function TabNavigator() { + return ( + ({ + tabBarIcon: ({ focused, color, size }) => { + let icon = TAB_ICONS[route.name]; + // tintColor is ignoring activeColor and inactiveColor for some reason + color = focused ? "#f0edf6" : "#4e1108"; + return ; + }, + })} + > + + + + + + + ); +} diff --git a/package.json b/package.json index 7919241..01a8847 100644 --- a/package.json +++ b/package.json @@ -9,11 +9,17 @@ }, "dependencies": { "@react-native-community/masked-view": "0.1.5", + "@react-navigation/bottom-tabs": "^5.1.1", + "@react-navigation/drawer": "^5.1.1", + "@react-navigation/material-bottom-tabs": "^5.1.1", + "@react-navigation/native": "^5.0.9", + "@react-navigation/stack": "^5.1.1", "expo": "^36.0.0", "expo-font": "~8.0.0", "expo-linear-gradient": "~8.0.0", "expo-localization": "~8.0.0", "expo-permissions": "~8.0.0", + "expo-web-browser": "~8.0.0", "i18n-js": "^3.3.0", "native-base": "^2.12.1", "native-base-shoutem-theme": "^0.3.1", @@ -33,12 +39,7 @@ "react-native-safe-area-context": "0.6.0", "react-native-screens": "2.0.0-alpha.12", "react-native-status-bar-height": "^2.3.1", - "react-native-webview": "7.4.3", - "react-navigation": "^4.1.0", - "react-navigation-drawer": "^2.3.3", - "react-navigation-material-bottom-tabs": "^2.1.5", - "react-navigation-stack": "^2.1.0", - "react-navigation-transitions": "^1.0.12" + "react-native-webview": "7.4.3" }, "devDependencies": { "babel-preset-expo": "^8.0.0" From f5702297f5835f91f916b36a831d20760982c914 Mon Sep 17 00:00:00 2001 From: keplyx Date: Thu, 5 Mar 2020 10:40:25 +0100 Subject: [PATCH 04/66] Use expo web browser for drawer links --- components/Sidebar.js | 16 ++++- navigation/DrawerNavigator.js | 30 ---------- navigation/MainTabNavigator.js | 2 +- screens/Websites/AmicaleScreen.js | 38 ------------ screens/Websites/BlueMindScreen.js | 52 ----------------- screens/Websites/ElusEtudScreen.js | 38 ------------ screens/Websites/EntScreen.js | 90 ----------------------------- screens/Websites/TutorInsaScreen.js | 38 ------------ screens/Websites/WiketudScreen.js | 38 ------------ 9 files changed, 14 insertions(+), 328 deletions(-) delete mode 100644 screens/Websites/AmicaleScreen.js delete mode 100644 screens/Websites/BlueMindScreen.js delete mode 100644 screens/Websites/ElusEtudScreen.js delete mode 100644 screens/Websites/EntScreen.js delete mode 100644 screens/Websites/TutorInsaScreen.js delete mode 100644 screens/Websites/WiketudScreen.js diff --git a/components/Sidebar.js b/components/Sidebar.js index cac9553..a91cf46 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -6,6 +6,7 @@ import {Badge, Container, Left, ListItem, Right, Text} from "native-base"; import i18n from "i18n-js"; import CustomMaterialIcon from '../components/CustomMaterialIcon'; import ThemeManager from "../utils/ThemeManager"; +import * as WebBrowser from 'expo-web-browser'; const deviceWidth = Dimensions.get("window").width; @@ -48,21 +49,25 @@ export default class SideBar extends React.Component { { name: "Amicale", route: "AmicaleScreen", + link: "https://amicale-insat.fr/", icon: "alpha-a-box", }, { name: "Élus Étudiants", route: "ElusEtudScreen", + link: "https://etud.insa-toulouse.fr/~eeinsat/", icon: "alpha-e-box", }, { name: "Wiketud", route: "WiketudScreen", + link: "https://wiki.etud.insa-toulouse.fr", icon: "wikipedia", }, { name: "Tutor'INSA", route: "TutorInsaScreen", + link: "https://www.etud.insa-toulouse.fr/~tutorinsa/", icon: "school", }, { @@ -72,11 +77,13 @@ export default class SideBar extends React.Component { { name: i18n.t('screens.bluemind'), route: "BlueMindScreen", + link: "https://etud-mel.insa-toulouse.fr/webmail/", icon: "email", }, { name: i18n.t('screens.ent'), route: "EntScreen", + link: "https://ent.insa-toulouse.fr/", icon: "notebook", }, { @@ -112,8 +119,11 @@ export default class SideBar extends React.Component { } - onListItemPress(route: string) { - this.props.navigation.navigate(route); + onListItemPress(item: Object) { + if (item.link === undefined) + this.props.navigation.navigate(item.route); + else + WebBrowser.openBrowserAsync(item.link); } @@ -123,7 +133,7 @@ export default class SideBar extends React.Component { getRenderItem({item}: Object) { - const onListItemPress = this.onListItemPress.bind(this, item.route); + const onListItemPress = this.onListItemPress.bind(this, item); if (item.icon !== undefined) { return ( diff --git a/navigation/DrawerNavigator.js b/navigation/DrawerNavigator.js index ebadd29..c84af0b 100644 --- a/navigation/DrawerNavigator.js +++ b/navigation/DrawerNavigator.js @@ -7,12 +7,6 @@ import SettingsScreen from '../screens/SettingsScreen'; import AboutScreen from '../screens/About/AboutScreen'; import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen'; import SelfMenuScreen from '../screens/SelfMenuScreen'; -import TutorInsaScreen from "../screens/Websites/TutorInsaScreen"; -import AmicaleScreen from "../screens/Websites/AmicaleScreen"; -import WiketudScreen from "../screens/Websites/WiketudScreen"; -import ElusEtudScreen from "../screens/Websites/ElusEtudScreen"; -import BlueMindScreen from "../screens/Websites/BlueMindScreen"; -import EntScreen from "../screens/Websites/EntScreen"; import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen"; import DebugScreen from '../screens/DebugScreen'; import Sidebar from "../components/Sidebar"; @@ -83,30 +77,6 @@ export default function DrawerNavigator() { name="SelfMenuScreen" component={SelfMenuScreen} /> - - - - - - ({ tabBarIcon: ({ focused, color, size }) => { diff --git a/screens/Websites/AmicaleScreen.js b/screens/Websites/AmicaleScreen.js deleted file mode 100644 index 9cb43d7..0000000 --- a/screens/Websites/AmicaleScreen.js +++ /dev/null @@ -1,38 +0,0 @@ -// @flow - -import * as React from 'react'; -import WebViewScreen from "../../components/WebViewScreen"; - -type Props = { - navigation: Object, -} - - -const URL = 'https://amicale-insat.fr/'; - -/** - * Class defining the app's planex screen. - * This screen uses a webview to render the planex page - */ -export default class AmicaleScreen extends React.Component { - - render() { - const nav = this.props.navigation; - return ( - - ); - } -} - diff --git a/screens/Websites/BlueMindScreen.js b/screens/Websites/BlueMindScreen.js deleted file mode 100644 index 1bad89f..0000000 --- a/screens/Websites/BlueMindScreen.js +++ /dev/null @@ -1,52 +0,0 @@ -// @flow - -import * as React from 'react'; -import WebViewScreen from "../../components/WebViewScreen"; -import i18n from "i18n-js"; - -type Props = { - navigation: Object, -} - - -const URL = 'https://etud-mel.insa-toulouse.fr/webmail/'; - -const CUSTOM_CSS_GENERAL = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/bluemind/customMobile.css'; - - -/** - * Class defining the app's planex screen. - * This screen uses a webview to render the planex page - */ -export default class BlueMindScreen extends React.Component { - - customInjectedJS: string; - - constructor() { - super(); - // Breaks website on ios - this.customInjectedJS = ''; - // '$("head").append(\'\');' + - // '$("head").append(\'\');true;'; - } - - render() { - const nav = this.props.navigation; - return ( - - ); - } -} - diff --git a/screens/Websites/ElusEtudScreen.js b/screens/Websites/ElusEtudScreen.js deleted file mode 100644 index 5227c2d..0000000 --- a/screens/Websites/ElusEtudScreen.js +++ /dev/null @@ -1,38 +0,0 @@ -// @flow - -import * as React from 'react'; -import WebViewScreen from "../../components/WebViewScreen"; - -type Props = { - navigation: Object, -} - - -const URL = 'https://etud.insa-toulouse.fr/~eeinsat/'; - -/** - * Class defining the app's planex screen. - * This screen uses a webview to render the planex page - */ -export default class ElusEtudScreen extends React.Component { - - render() { - const nav = this.props.navigation; - return ( - - ); - } -} - diff --git a/screens/Websites/EntScreen.js b/screens/Websites/EntScreen.js deleted file mode 100644 index da0c1a7..0000000 --- a/screens/Websites/EntScreen.js +++ /dev/null @@ -1,90 +0,0 @@ -// @flow - -import * as React from 'react'; -import WebViewScreen from "../../components/WebViewScreen"; -import i18n from "i18n-js"; - -type Props = { - navigation: Object, -} - - -const URL = 'https://ent.insa-toulouse.fr/'; - -const CUSTOM_CSS_GENERAL = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/ent/customMobile.css'; - -// let stylesheet = document.createElement('link'); -// stylesheet.type = 'text/css'; -// stylesheet.rel = 'stylesheet'; -// stylesheet.href = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/ent/customMobile.css'; -// let mobileSpec = document.createElement('meta'); -// mobileSpec.name = 'viewport'; -// mobileSpec.content = 'width=device-width, initial-scale=1.0'; -// document.getElementsByTagName('head')[0].appendChild(mobileSpec); -// // document.getElementsByTagName('head')[0].appendChild(stylesheet); -// document.getElementsByClassName('preference-items')[0].style.display = 'none'; -// document.getElementsByClassName('logoInsa')[0].style.display = 'none'; -// document.getElementsByClassName('logoPress')[0].style.display = 'none'; -// document.getElementsByClassName('ent')[0].style.display = 'none'; -// document.getElementById('portal-page-header').style.margin = 0; -// document.querySelectorAll('.uportal-navigation-category').forEach(element => { -// element.style.cssText = "width: 100%; display: flex; height: 50px;"; -// if (element.children.length > 0) -// element.children[0].style.margin = 'auto'; -// }); -// true; - - -/** - * Class defining the app's ent screen. - * This screen uses a webview to render the ent page - */ -export default class EntScreen extends React.Component { - - customInjectedJS: string; - - constructor() { - super(); - this.customInjectedJS = - 'let stylesheet = document.createElement(\'link\');\n' + - 'stylesheet.type = \'text/css\';\n' + - 'stylesheet.rel = \'stylesheet\';\n' + - 'stylesheet.href = \'' + CUSTOM_CSS_GENERAL + '\';\n' + - 'let mobileSpec = document.createElement(\'meta\');\n' + - 'mobileSpec.name = \'viewport\';\n' + - 'mobileSpec.content = \'width=device-width, initial-scale=1.0\';\n' + - 'document.getElementsByTagName(\'head\')[0].appendChild(mobileSpec);\n' + - 'document.getElementsByTagName(\'head\')[0].appendChild(stylesheet);\n' + - 'document.getElementsByClassName(\'preference-items\')[0].style.display = \'none\';\n' + - 'document.getElementsByClassName(\'logoInsa\')[0].style.display = \'none\';\n' + - 'document.getElementsByClassName(\'logoPress\')[0].style.display = \'none\';\n' + - 'document.getElementsByClassName(\'ent\')[0].style.display = \'none\';\n' + - 'document.getElementById(\'portal-page-header\').style.margin = 0;\n' + - 'document.querySelectorAll(\'.uportal-navigation-category\').forEach(element => {\n' + - ' element.style.cssText = "width: 100%; display: flex; height: 50px;";\n' + - ' if (element.children.length > 0)\n' + - ' element.children[0].style.margin = \'auto\';\n' + - '});' + - 'true;'; - } - - render() { - const nav = this.props.navigation; - return ( - - ); - } -} - diff --git a/screens/Websites/TutorInsaScreen.js b/screens/Websites/TutorInsaScreen.js deleted file mode 100644 index c0bef99..0000000 --- a/screens/Websites/TutorInsaScreen.js +++ /dev/null @@ -1,38 +0,0 @@ -// @flow - -import * as React from 'react'; -import WebViewScreen from "../../components/WebViewScreen"; - -type Props = { - navigation: Object, -} - - -const URL = 'https://www.etud.insa-toulouse.fr/~tutorinsa/'; - -/** - * Class defining the app's planex screen. - * This screen uses a webview to render the planex page - */ -export default class TutorInsaScreen extends React.Component { - - render() { - const nav = this.props.navigation; - return ( - - ); - } -} - diff --git a/screens/Websites/WiketudScreen.js b/screens/Websites/WiketudScreen.js deleted file mode 100644 index a29a87e..0000000 --- a/screens/Websites/WiketudScreen.js +++ /dev/null @@ -1,38 +0,0 @@ -// @flow - -import * as React from 'react'; -import WebViewScreen from "../../components/WebViewScreen"; - -type Props = { - navigation: Object, -} - - -const URL = 'https://wiki.etud.insa-toulouse.fr/'; - -/** - * Class defining the app's planex screen. - * This screen uses a webview to render the planex page - */ -export default class WiketudScreen extends React.Component { - - render() { - const nav = this.props.navigation; - return ( - - ); - } -} - From b562357a9555356a2626d30073a5c4a9c0c1141e Mon Sep 17 00:00:00 2001 From: keplyx Date: Thu, 5 Mar 2020 19:54:56 +0100 Subject: [PATCH 05/66] Reworked section list to use react native design --- App.js | 2 + components/CustomHeader.js | 4 +- components/FetchedDataSectionList.js | 399 --------------------------- components/WebSectionList.js | 221 +++++++++++++++ screens/HomeScreen.js | 213 +++++++------- screens/Proximo/ProximoListScreen.js | 27 +- screens/Proximo/ProximoMainScreen.js | 63 +++-- screens/Proxiwash/ProxiwashScreen.js | 91 +++--- screens/SelfMenuScreen.js | 63 +++-- utils/WebDataManager.js | 5 +- 10 files changed, 484 insertions(+), 604 deletions(-) delete mode 100644 components/FetchedDataSectionList.js create mode 100644 components/WebSectionList.js diff --git a/App.js b/App.js index 821cbdc..b50c13f 100644 --- a/App.js +++ b/App.js @@ -14,6 +14,7 @@ import ThemeManager from './utils/ThemeManager'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import DrawerNavigator from './navigation/DrawerNavigator'; +import { enableScreens } from 'react-native-screens'; type Props = {}; @@ -38,6 +39,7 @@ export default class App extends React.Component { constructor(props: Object) { super(props); LocaleManager.initTranslations(); + enableScreens(); } /** diff --git a/components/CustomHeader.js b/components/CustomHeader.js index c72e46f..1a9f738 100644 --- a/components/CustomHeader.js +++ b/components/CustomHeader.js @@ -8,7 +8,6 @@ import Touchable from 'react-native-platform-touchable'; import ThemeManager from "../utils/ThemeManager"; import CustomMaterialIcon from "./CustomMaterialIcon"; import i18n from "i18n-js"; -import {NavigationActions} from 'react-navigation'; type Props = { hasBackButton: boolean, @@ -105,8 +104,7 @@ export default class CustomHeader extends React.Component { onPressBack() { - const backAction = NavigationActions.back(); - this.props.navigation.dispatch(backAction); + this.props.navigation.goBack(); } render() { diff --git a/components/FetchedDataSectionList.js b/components/FetchedDataSectionList.js deleted file mode 100644 index df715e1..0000000 --- a/components/FetchedDataSectionList.js +++ /dev/null @@ -1,399 +0,0 @@ -// @flow - -import * as React from 'react'; -import WebDataManager from "../utils/WebDataManager"; -import {H3, Spinner, Tab, TabHeading, Tabs, Text} from "native-base"; -import {RefreshControl, SectionList, View} from "react-native"; -import CustomMaterialIcon from "./CustomMaterialIcon"; -import i18n from 'i18n-js'; -import ThemeManager from "../utils/ThemeManager"; -import BaseContainer from "./BaseContainer"; - -type Props = { - navigation: Object, -} - -type State = { - refreshing: boolean, - firstLoading: boolean, - fetchedData: Object, - machinesWatched: Array, -}; - -/** - * Class used to create a basic list view using online json data. - * Used by inheriting from it and redefining getters. - */ -export default class FetchedDataSectionList extends React.Component { - webDataManager: WebDataManager; - - willFocusSubscription: function; - willBlurSubscription: function; - refreshInterval: IntervalID; - refreshTime: number; - lastRefresh: Date; - - minTimeBetweenRefresh = 60; - state = { - refreshing: false, - firstLoading: true, - fetchedData: {}, - machinesWatched: [], - }; - - onRefresh: Function; - onFetchSuccess: Function; - onFetchError: Function; - renderSectionHeaderEmpty: Function; - renderSectionHeaderNotEmpty: Function; - renderItemEmpty: Function; - renderItemNotEmpty: Function; - - constructor(fetchUrl: string, refreshTime: number) { - super(); - this.webDataManager = new WebDataManager(fetchUrl); - this.refreshTime = refreshTime; - // creating references to functions used in render() - this.onRefresh = this.onRefresh.bind(this); - this.onFetchSuccess = this.onFetchSuccess.bind(this); - this.onFetchError = this.onFetchError.bind(this); - this.renderSectionHeaderEmpty = this.renderSectionHeader.bind(this, true); - this.renderSectionHeaderNotEmpty = this.renderSectionHeader.bind(this, false); - this.renderItemEmpty = this.renderItem.bind(this, true); - this.renderItemNotEmpty = this.renderItem.bind(this, false); - } - - - /** - * Get the translation for the header in the current language - * @return {string} - */ - getHeaderTranslation(): string { - return "Header"; - } - - /** - * Get the translation for the toasts in the current language - * @return {string} - */ - getUpdateToastTranslations(): Array { - return ["whoa", "nah"]; - } - - setMinTimeRefresh(value: number) { - this.minTimeBetweenRefresh = value; - } - - /** - * Register react navigation events on first screen load. - * Allows to detect when the screen is focused - */ - componentDidMount() { - this.willFocusSubscription = this.props.navigation.addListener( - 'willFocus', this.onScreenFocus.bind(this)); - this.willBlurSubscription = this.props.navigation.addListener( - 'willBlur', this.onScreenBlur.bind(this)); - } - - /** - * Refresh data when focusing the screen and setup a refresh interval if asked to - */ - onScreenFocus() { - this.onRefresh(); - if (this.refreshTime > 0) - this.refreshInterval = setInterval(this.onRefresh.bind(this), this.refreshTime) - } - - /** - * Remove any interval on un-focus - */ - onScreenBlur() { - clearInterval(this.refreshInterval); - } - - /** - * Unregister from event when un-mounting components - */ - componentWillUnmount() { - if (this.willBlurSubscription !== undefined) - this.willBlurSubscription.remove(); - if (this.willFocusSubscription !== undefined) - this.willFocusSubscription.remove(); - } - - onFetchSuccess(fetchedData: Object) { - this.setState({ - fetchedData: fetchedData, - refreshing: false, - firstLoading: false - }); - this.lastRefresh = new Date(); - } - - onFetchError() { - this.setState({ - fetchedData: {}, - refreshing: false, - firstLoading: false - }); - this.webDataManager.showUpdateToast(this.getUpdateToastTranslations()[0], this.getUpdateToastTranslations()[1]); - } - - /** - * Refresh data and show a toast if any error occurred - * @private - */ - onRefresh() { - let canRefresh; - if (this.lastRefresh !== undefined) - canRefresh = (new Date().getTime() - this.lastRefresh.getTime()) / 1000 > this.minTimeBetweenRefresh; - else - canRefresh = true; - - if (canRefresh) { - this.setState({refreshing: true}); - this.webDataManager.readData() - .then(this.onFetchSuccess) - .catch(this.onFetchError); - } - } - - /** - * Get the render item to be used for display in the list. - * Must be overridden by inheriting class. - * - * @param item - * @param section - * @return {*} - */ - getRenderItem(item: Object, section: Object) { - return ; - } - - /** - * Get the render item to be used for the section title in the list. - * Must be overridden by inheriting class. - * - * @param title - * @return {*} - */ - getRenderSectionHeader(title: string) { - return ; - } - - /** - * Get the render item to be used when the list is empty. - * No need to be overridden, has good defaults. - * - * @param text - * @param isSpinner - * @param icon - * @return {*} - */ - getEmptyRenderItem(text: string, isSpinner: boolean, icon: string) { - return ( - - - {isSpinner ? - - : - } - - -

- {text} -

-
); - } - - /** - * Create the dataset to be used in the list from the data fetched. - * Must be overridden. - * - * @param fetchedData {Object} - * @return {Array} - */ - createDataset(fetchedData: Object): Array { - return []; - } - - - datasetKeyExtractor(item: Object) { - return item.text - } - - /** - * Create the dataset when no fetched data is available. - * No need to be overridden, has good defaults. - * - * @return - */ - createEmptyDataset() { - return [ - { - title: '', - data: [ - { - text: this.state.refreshing ? - i18n.t('general.loading') : - i18n.t('general.networkError'), - isSpinner: this.state.refreshing, - icon: this.state.refreshing ? - 'refresh' : - 'access-point-network-off' - } - ], - keyExtractor: this.datasetKeyExtractor, - } - ]; - } - - /** - * Should the app use a tab layout instead of a section list ? - * If yes, each section will be rendered in a new tab. - * Can be overridden. - * - * @return {boolean} - */ - hasTabs() { - return false; - } - - hasBackButton() { - return false; - } - - getRightButton() { - return - } - - hasStickyHeader() { - return false; - } - - hasSideMenu() { - return true; - } - - - renderSectionHeader(isEmpty: boolean, {section: {title}} : Object) { - return isEmpty ? - : - this.getRenderSectionHeader(title) - } - - renderItem(isEmpty: boolean, {item, section}: Object) { - return isEmpty ? - this.getEmptyRenderItem(item.text, item.isSpinner, item.icon) : - this.getRenderItem(item, section) - } - - /** - * Get the section list render using the generated dataset - * - * @param dataset - * @return - */ - getSectionList(dataset: Array) { - let isEmpty = dataset[0].data.length === 0; - if (isEmpty) - dataset = this.createEmptyDataset(); - return ( - - } - renderSectionHeader={isEmpty ? this.renderSectionHeaderEmpty : this.renderSectionHeaderNotEmpty} - renderItem={isEmpty ? this.renderItemEmpty : this.renderItemNotEmpty} - style={{minHeight: 300, width: '100%'}} - contentContainerStyle={ - isEmpty ? - {flexGrow: 1, justifyContent: 'center', alignItems: 'center'} : {} - } - /> - ); - } - - /** - * Generate the tabs containing the lists - * - * @param dataset - * @return - */ - getTabbedView(dataset: Array) { - let tabbedView = []; - for (let i = 0; i < dataset.length; i++) { - tabbedView.push( - - - {dataset[i].title} - } - key={dataset[i].title} - style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> - {this.getSectionList( - [ - { - title: dataset[i].title, - data: dataset[i].data, - extraData: dataset[i].extraData, - keyExtractor: dataset[i].keyExtractor - } - ] - )} - ); - } - return tabbedView; - } - - render() { - // console.log("rendering FetchedDataSectionList"); - const dataset = this.createDataset(this.state.fetchedData); - return ( - - {this.hasTabs() ? - - {this.getTabbedView(dataset)} - - : - this.getSectionList(dataset) - } - - ); - } -} diff --git a/components/WebSectionList.js b/components/WebSectionList.js new file mode 100644 index 0000000..9a57c50 --- /dev/null +++ b/components/WebSectionList.js @@ -0,0 +1,221 @@ +// @flow + +import * as React from 'react'; +import {H3, Spinner, View} from "native-base"; +import ThemeManager from '../utils/ThemeManager'; +import WebDataManager from "../utils/WebDataManager"; +import CustomMaterialIcon from "./CustomMaterialIcon"; +import i18n from "i18n-js"; +import {RefreshControl, SectionList} from "react-native"; + +type Props = { + navigation: Object, + fetchUrl: string, + refreshTime: number, + renderItem: React.Node, + renderSectionHeader: React.Node, + stickyHeader: boolean, + createDataset: Function, + updateErrorText: string, +} + +type State = { + refreshing: boolean, + firstLoading: boolean, + fetchedData: Object, +}; + +/** + * Custom component defining a material icon using native base + * + * @prop active {boolean} Whether to set the icon color to active + * @prop icon {string} The icon string to use from MaterialCommunityIcons + * @prop color {string} The icon color. Use default theme color if unspecified + * @prop fontSize {number} The icon size. Use 26 if unspecified + * @prop width {number} The icon width. Use 30 if unspecified + */ +export default class WebSectionList extends React.Component { + + static defaultProps = { + renderSectionHeader: undefined, + stickyHeader: false, + }; + + webDataManager: WebDataManager; + + refreshInterval: IntervalID; + lastRefresh: Date; + + state = { + refreshing: false, + firstLoading: true, + fetchedData: {}, + }; + + onRefresh: Function; + onFetchSuccess: Function; + onFetchError: Function; + getEmptyRenderItem: Function; + getEmptySectionHeader: Function; + + constructor() { + super(); + // creating references to functions used in render() + this.onRefresh = this.onRefresh.bind(this); + this.onFetchSuccess = this.onFetchSuccess.bind(this); + this.onFetchError = this.onFetchError.bind(this); + this.getEmptyRenderItem = this.getEmptyRenderItem.bind(this); + this.getEmptySectionHeader = this.getEmptySectionHeader.bind(this); + } + + /** + * Register react navigation events on first screen load. + * Allows to detect when the screen is focused + */ + componentDidMount() { + this.webDataManager = new WebDataManager(this.props.fetchUrl); + const onScreenFocus = this.onScreenFocus.bind(this); + const onScreenBlur = this.onScreenBlur.bind(this); + this.props.navigation.addListener('focus', onScreenFocus); + this.props.navigation.addListener('blur', onScreenBlur); + } + + /** + * Refresh data when focusing the screen and setup a refresh interval if asked to + */ + onScreenFocus() { + this.onRefresh(); + if (this.props.refreshTime > 0) + this.refreshInterval = setInterval(this.onRefresh, this.props.refreshTime) + } + + /** + * Remove any interval on un-focus + */ + onScreenBlur() { + clearInterval(this.refreshInterval); + } + + + onFetchSuccess(fetchedData: Object) { + this.setState({ + fetchedData: fetchedData, + refreshing: false, + firstLoading: false + }); + this.lastRefresh = new Date(); + } + + onFetchError() { + this.setState({ + fetchedData: {}, + refreshing: false, + firstLoading: false + }); + this.webDataManager.showUpdateToast(this.props.updateErrorText); + } + + /** + * Refresh data and show a toast if any error occurred + * @private + */ + onRefresh() { + let canRefresh; + if (this.lastRefresh !== undefined) + canRefresh = (new Date().getTime() - this.lastRefresh.getTime()) > this.props.refreshTime; + else + canRefresh = true; + if (canRefresh) { + this.setState({refreshing: true}); + this.webDataManager.readData() + .then(this.onFetchSuccess) + .catch(this.onFetchError); + } + } + + getEmptySectionHeader({section}: Object) { + return ; + } + + getEmptyRenderItem({item}: Object) { + return ( + + + {this.state.refreshing ? + + : + } + + +

+ {item.text} +

+
); + } + + createEmptyDataset() { + return [ + { + title: '', + data: [ + { + text: this.state.refreshing ? + i18n.t('general.loading') : + i18n.t('general.networkError'), + isSpinner: this.state.refreshing, + icon: this.state.refreshing ? + 'refresh' : + 'access-point-network-off' + } + ], + keyExtractor: this.datasetKeyExtractor, + } + ]; + } + + datasetKeyExtractor(item: Object) { + return item.text + } + + render() { + let dataset = this.props.createDataset(this.state.fetchedData); + const isEmpty = dataset[0].data.length === 0; + const shouldRenderHeader = isEmpty || (this.props.renderSectionHeader !== undefined); + if (isEmpty) + dataset = this.createEmptyDataset(); + return ( + + } + renderSectionHeader={shouldRenderHeader ? this.getEmptySectionHeader : this.props.renderSectionHeader} + renderItem={isEmpty ? this.getEmptyRenderItem : this.props.renderItem} + style={{minHeight: 300, width: '100%'}} + stickySectionHeadersEnabled={this.props.stickyHeader} + contentContainerStyle={ + isEmpty ? + {flexGrow: 1, justifyContent: 'center', alignItems: 'center'} : {} + } + /> + ); + } +} diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js index 2640ef5..03a4cbd 100644 --- a/screens/HomeScreen.js +++ b/screens/HomeScreen.js @@ -1,14 +1,16 @@ // @flow import * as React from 'react'; -import {Image, Linking, TouchableOpacity, View} from 'react-native'; -import {Body, Button, Card, CardItem, H1, Left, Text, Thumbnail} from 'native-base'; +import {Image, TouchableOpacity, View} from 'react-native'; +import {Body, Button, Card, CardItem, Left, Text, Thumbnail} from 'native-base'; import i18n from "i18n-js"; import CustomMaterialIcon from '../components/CustomMaterialIcon'; -import FetchedDataSectionList from "../components/FetchedDataSectionList"; import Autolink from 'react-native-autolink'; import ThemeManager from "../utils/ThemeManager"; import DashboardItem from "../components/DashboardItem"; +import * as WebBrowser from 'expo-web-browser'; +import BaseContainer from "../components/BaseContainer"; +import WebSectionList from "../components/WebSectionList"; // import DATA from "../dashboard_data.json"; @@ -25,46 +27,30 @@ const REFRESH_TIME = 1000 * 20; // Refresh every 20 seconds const CARD_BORDER_RADIUS = 10; -/** - * Opens a link in the device's browser - * @param link The link to open - */ -function openWebLink(link) { - Linking.openURL(link).catch((err) => console.error('Error opening link', err)); +type Props = { + navigation: Object, } /** * Class defining the app's home screen */ -export default class HomeScreen extends FetchedDataSectionList { +export default class HomeScreen extends React.Component { onProxiwashClick: Function; onTutorInsaClick: Function; onMenuClick: Function; onProximoClick: Function; + getRenderItem: Function; + createDataset: Function; constructor() { - super(DATA_URL, REFRESH_TIME); + super(); this.onProxiwashClick = this.onProxiwashClick.bind(this); this.onTutorInsaClick = this.onTutorInsaClick.bind(this); this.onMenuClick = this.onMenuClick.bind(this); this.onProximoClick = this.onProximoClick.bind(this); - } - - onProxiwashClick() { - this.props.navigation.navigate('Proxiwash'); - } - - onTutorInsaClick() { - this.props.navigation.navigate('TutorInsaScreen'); - } - - onProximoClick() { - this.props.navigation.navigate('Proximo'); - } - - onMenuClick() { - this.props.navigation.navigate('SelfMenuScreen'); + this.getRenderItem = this.getRenderItem.bind(this); + this.createDataset = this.createDataset.bind(this); } /** @@ -77,12 +63,20 @@ export default class HomeScreen extends FetchedDataSectionList { return date.toLocaleString(); } - getHeaderTranslation() { - return i18n.t("screens.home"); + onProxiwashClick() { + this.props.navigation.navigate('Proxiwash'); } - getUpdateToastTranslations() { - return [i18n.t("homeScreen.listUpdated"), i18n.t("homeScreen.listUpdateFail")]; + onTutorInsaClick() { + WebBrowser.openBrowserAsync("https://www.etud.insa-toulouse.fr/~tutorinsa/"); + } + + onProximoClick() { + this.props.navigation.navigate('Proximo'); + } + + onMenuClick() { + this.props.navigation.navigate('SelfMenuScreen'); } getKeyExtractor(item: Object) { @@ -154,25 +148,6 @@ export default class HomeScreen extends FetchedDataSectionList { return dataset } - getRenderSectionHeader(title: string) { - if (title === '') { - return ; - } else { - return ( - -

{title}

-
- ); - } - } - getDashboardItem(item: Object) { let content = item['content']; if (item['id'] === 'event') @@ -318,7 +293,7 @@ export default class HomeScreen extends FetchedDataSectionList { if (isAvailable) this.props.navigation.navigate('PlanningDisplayScreen', {data: displayEvent}); else - this.props.navigation.navigate('PlanningScreen'); + this.props.navigation.navigate('Planning'); }; @@ -345,13 +320,13 @@ export default class HomeScreen extends FetchedDataSectionList { subtitle = i18n.t('homeScreen.dashboard.todayEventsSubtitleNA'); let displayEvent = this.getDisplayEvent(futureEvents); - + const clickAction = this.clickAction.bind(this, isAvailable, displayEvent); return ( + - - - - - {NAME_AMICALE} - {HomeScreen.getFormattedDate(item.created_time)} - - - - + + - {item.full_picture !== '' && item.full_picture !== undefined ? - - - - : } - {item.message !== undefined ? - : - } + {NAME_AMICALE} + {HomeScreen.getFormattedDate(item.created_time)} - - - - - - - + + + + + {item.full_picture !== '' && item.full_picture !== undefined ? + + + + : } + {item.message !== undefined ? + : + } + + + + + + + + + ); + } + + getRenderItem({item, section}: Object) { + return (section['id'] === SECTIONS_ID[0] ? + this.getDashboardItem(item) : this.getFeedItem(item)); + } + + render() { + const nav = this.props.navigation; + return ( + + + ); } } diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index 2943fee..23887aa 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -41,7 +41,8 @@ function sortNameReverse(a, b) { } type Props = { - navigation: Object + navigation: Object, + route: Object, } type State = { @@ -60,16 +61,8 @@ export default class ProximoListScreen extends React.Component { modalRef: { current: null | Modalize }; originalData: Array; - navData = this.props.navigation.getParam('data', []); - shouldFocusSearchBar = this.props.navigation.getParam('shouldFocusSearchBar', false); - state = { - currentlyDisplayedData: this.navData['data'].sort(sortPrice), - currentSortMode: sortMode.price, - isSortReversed: false, - sortPriceIcon: '', - sortNameIcon: '', - modalCurrentDisplayItem: {}, - }; + shouldFocusSearchBar: boolean; + sortMenuRef: Menu; onMenuRef: Function; @@ -82,7 +75,16 @@ export default class ProximoListScreen extends React.Component { constructor(props: any) { super(props); this.modalRef = React.createRef(); - this.originalData = this.navData['data']; + this.originalData = this.props.route.params['data']['data']; + this.shouldFocusSearchBar = this.props.route.params['shouldFocusSearchBar']; + this.state = { + currentlyDisplayedData: this.originalData, + currentSortMode: sortMode.price, + isSortReversed: false, + sortPriceIcon: '', + sortNameIcon: '', + modalCurrentDisplayItem: {}, + }; this.onMenuRef = this.onMenuRef.bind(this); this.onSearchStringChange = this.onSearchStringChange.bind(this); @@ -365,7 +367,6 @@ export default class ProximoListScreen extends React.Component { shouldFocusSearchBar={this.shouldFocusSearchBar} rightButton={this.getSortMenu()} /> - { + + articles: Object; onPressSearchBtn: Function; onPressAboutBtn: Function; + getRenderItem: Function; + createDataset: Function; constructor() { - super(DATA_URL, 0); + super(); this.onPressSearchBtn = this.onPressSearchBtn.bind(this); this.onPressAboutBtn = this.onPressAboutBtn.bind(this); + this.getRenderItem = this.getRenderItem.bind(this); + this.createDataset = this.createDataset.bind(this); } static sortFinalData(a: Object, b: Object) { @@ -45,14 +59,6 @@ export default class ProximoMainScreen extends FetchedDataSectionList { return 0; } - getHeaderTranslation() { - return i18n.t("screens.proximo"); - } - - getUpdateToastTranslations() { - return [i18n.t("proximoScreen.listUpdated"), i18n.t("proximoScreen.listUpdateFail")]; - } - getKeyExtractor(item: Object) { return item !== undefined ? item.type['id'] : undefined; } @@ -62,7 +68,7 @@ export default class ProximoMainScreen extends FetchedDataSectionList { { title: '', data: this.generateData(fetchedData), - extraData: super.state, + extraData: this.state, keyExtractor: this.getKeyExtractor } ]; @@ -77,21 +83,22 @@ export default class ProximoMainScreen extends FetchedDataSectionList { */ generateData(fetchedData: Object) { let finalData = []; + this.articles = undefined; if (fetchedData.types !== undefined && fetchedData.articles !== undefined) { let types = fetchedData.types; - let articles = fetchedData.articles; + this.articles = fetchedData.articles; finalData.push({ type: { id: -1, name: i18n.t('proximoScreen.all'), icon: 'star' }, - data: this.getAvailableArticles(articles, undefined) + data: this.getAvailableArticles(this.articles, undefined) }); for (let i = 0; i < types.length; i++) { finalData.push({ type: types[i], - data: this.getAvailableArticles(articles, types[i]) + data: this.getAvailableArticles(this.articles, types[i]) }); } @@ -128,8 +135,8 @@ export default class ProximoMainScreen extends FetchedDataSectionList { name: i18n.t('proximoScreen.all'), icon: 'star' }, - data: this.state.fetchedData.articles !== undefined ? - this.getAvailableArticles(this.state.fetchedData.articles, undefined) : [] + data: this.articles !== undefined ? + this.getAvailableArticles(this.articles, undefined) : [] }, }; this.props.navigation.navigate('ProximoListScreen', searchScreenData); @@ -163,7 +170,7 @@ export default class ProximoMainScreen extends FetchedDataSectionList { ); } - getRenderItem(item: Object, section: Object) { + getRenderItem({item}: Object) { let dataToSend = { shouldFocusSearchBar: false, data: item, @@ -196,10 +203,26 @@ export default class ProximoMainScreen extends FetchedDataSectionList { ); - } else { + } else return ; - } + } + render() { + const nav = this.props.navigation; + return ( + + + + ); } } diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js index ae7e7cc..46be088 100644 --- a/screens/Proxiwash/ProxiwashScreen.js +++ b/screens/Proxiwash/ProxiwashScreen.js @@ -6,12 +6,13 @@ import {Body, Card, CardItem, Left, Right, Text} from 'native-base'; import ThemeManager from '../../utils/ThemeManager'; import i18n from "i18n-js"; import CustomMaterialIcon from "../../components/CustomMaterialIcon"; -import FetchedDataSectionList from "../../components/FetchedDataSectionList"; +import WebSectionList from "../../components/WebSectionList"; import NotificationsManager from "../../utils/NotificationsManager"; import PlatformTouchable from "react-native-platform-touchable"; import Touchable from "react-native-platform-touchable"; import AsyncStorageManager from "../../utils/AsyncStorageManager"; import * as Expo from "expo"; +import BaseContainer from "../../components/BaseContainer"; const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json"; @@ -30,19 +31,41 @@ let stateColors = {}; const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds +type Props = { + navigation: Object, +} + +type State = { + refreshing: boolean, + firstLoading: boolean, + fetchedData: Object, + machinesWatched: Array, +}; + + /** * Class defining the app's proxiwash screen. This screen shows information about washing machines and * dryers, taken from a scrapper reading proxiwash website */ -export default class ProxiwashScreen extends FetchedDataSectionList { +export default class ProxiwashScreen extends React.Component { onAboutPress: Function; + getRenderItem: Function; + createDataset: Function; + + state = { + refreshing: false, + firstLoading: true, + fetchedData: {}, + // machinesWatched: JSON.parse(dataString), + machinesWatched: [], + }; /** * Creates machine state parameters using current theme and translations */ constructor() { - super(DATA_URL, REFRESH_TIME); + super(); let colors = ThemeManager.getCurrentThemeVariables(); stateColors[MACHINE_STATES.TERMINE] = colors.proxiwashFinishedColor; stateColors[MACHINE_STATES.DISPONIBLE] = colors.proxiwashReadyColor; @@ -69,23 +92,16 @@ export default class ProxiwashScreen extends FetchedDataSectionList { stateIcons[MACHINE_STATES.ERREUR] = 'alert'; // let dataString = AsyncStorageManager.getInstance().preferences.proxiwashWatchedMachines.current; - this.state = { - refreshing: false, - firstLoading: true, - fetchedData: {}, - // machinesWatched: JSON.parse(dataString), - machinesWatched: [], - }; - this.setMinTimeRefresh(30); - + // this.setMinTimeRefresh(30); this.onAboutPress = this.onAboutPress.bind(this); + this.getRenderItem = this.getRenderItem.bind(this); + this.createDataset = this.createDataset.bind(this); } /** * Setup notification channel for android and add listeners to detect notifications fired */ componentDidMount() { - super.componentDidMount(); if (AsyncStorageManager.getInstance().preferences.expoToken.current !== '') { // Get latest watchlist from server NotificationsManager.getMachineNotificationWatchlist((fetchedList) => { @@ -107,14 +123,6 @@ export default class ProxiwashScreen extends FetchedDataSectionList { } } - getHeaderTranslation() { - return i18n.t("screens.proxiwash"); - } - - getUpdateToastTranslations() { - return [i18n.t("proxiwashScreen.listUpdated"), i18n.t("proxiwashScreen.listUpdateFail")]; - } - getDryersKeyExtractor(item: Object) { return item !== undefined ? "dryer" + item.number : undefined; } @@ -212,28 +220,23 @@ export default class ProxiwashScreen extends FetchedDataSectionList { createDataset(fetchedData: Object) { return [ - { - title: i18n.t('proxiwashScreen.washers'), - icon: 'washing-machine', - data: fetchedData.washers === undefined ? [] : fetchedData.washers, - extraData: super.state, - keyExtractor: this.getWashersKeyExtractor - }, { title: i18n.t('proxiwashScreen.dryers'), icon: 'tumble-dryer', data: fetchedData.dryers === undefined ? [] : fetchedData.dryers, - extraData: super.state, + extraData: this.state, keyExtractor: this.getDryersKeyExtractor }, - + { + title: i18n.t('proxiwashScreen.washers'), + icon: 'washing-machine', + data: fetchedData.washers === undefined ? [] : fetchedData.washers, + extraData: this.state, + keyExtractor: this.getWashersKeyExtractor + }, ]; } - hasTabs(): boolean { - return true; - } - /** * Show an alert fo a machine, allowing to enable/disable notifications if running * @@ -292,6 +295,24 @@ export default class ProxiwashScreen extends FetchedDataSectionList { ); } + render() { + const nav = this.props.navigation; + return ( + + + + ); + } + /** * Get list item to be rendered * @@ -299,7 +320,7 @@ export default class ProxiwashScreen extends FetchedDataSectionList { * @param section The object describing the current SectionList section * @returns {React.Node} */ - getRenderItem(item: Object, section: Object) { + getRenderItem({item, section} : Object) { let isMachineRunning = MACHINE_STATES[item.state] === MACHINE_STATES["EN COURS"]; let machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')) + ' n°' + item.number; let isDryer = section.title === i18n.t('proxiwashScreen.dryers'); diff --git a/screens/SelfMenuScreen.js b/screens/SelfMenuScreen.js index 98e01f8..e92cb08 100644 --- a/screens/SelfMenuScreen.js +++ b/screens/SelfMenuScreen.js @@ -5,22 +5,31 @@ import {View} from 'react-native'; import {Card, CardItem, H2, H3, Text} from 'native-base'; import ThemeManager from "../utils/ThemeManager"; import i18n from "i18n-js"; -import FetchedDataSectionList from "../components/FetchedDataSectionList"; +import BaseContainer from "../components/BaseContainer"; +import WebSectionList from "../components/WebSectionList"; const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json"; +type Props = { + navigation: Object, +} + /** * Class defining the app's menu screen. * This screen fetches data from etud to render the RU menu */ -export default class SelfMenuScreen extends FetchedDataSectionList { +export default class SelfMenuScreen extends React.Component { // Hard code strings as toLocaleDateString does not work on current android JS engine daysOfWeek = []; monthsOfYear = []; + getRenderItem: Function; + getRenderSectionHeader: Function; + createDataset: Function; + constructor() { - super(DATA_URL, 0); + super(); this.daysOfWeek.push(i18n.t("date.daysOfWeek.monday")); this.daysOfWeek.push(i18n.t("date.daysOfWeek.tuesday")); this.daysOfWeek.push(i18n.t("date.daysOfWeek.wednesday")); @@ -41,32 +50,16 @@ export default class SelfMenuScreen extends FetchedDataSectionList { this.monthsOfYear.push(i18n.t("date.monthsOfYear.october")); this.monthsOfYear.push(i18n.t("date.monthsOfYear.november")); this.monthsOfYear.push(i18n.t("date.monthsOfYear.december")); - } - getHeaderTranslation() { - return i18n.t("screens.menuSelf"); - } - - getUpdateToastTranslations() { - return [i18n.t("homeScreen.listUpdated"), i18n.t("homeScreen.listUpdateFail")]; + this.getRenderItem = this.getRenderItem.bind(this); + this.getRenderSectionHeader = this.getRenderSectionHeader.bind(this); + this.createDataset = this.createDataset.bind(this); } getKeyExtractor(item: Object) { return item !== undefined ? item['name'] : undefined; } - hasBackButton() { - return true; - } - - hasStickyHeader(): boolean { - return true; - } - - hasSideMenu(): boolean { - return false; - } - createDataset(fetchedData: Object) { let result = []; // Prevent crash by giving a default value when fetchedData is empty (not yet available) @@ -101,7 +94,8 @@ export default class SelfMenuScreen extends FetchedDataSectionList { return this.daysOfWeek[date.getDay() - 1] + " " + date.getDate() + " " + this.monthsOfYear[date.getMonth()] + " " + date.getFullYear(); } - getRenderSectionHeader(title: string) { + getRenderSectionHeader({section}: Object) { + let title = ""; return ( {title} + }}>{section.title} ); } - getRenderItem(item: Object, section: Object) { + getRenderItem({item}: Object) { return ( + + + ); + } } diff --git a/utils/WebDataManager.js b/utils/WebDataManager.js index d828f01..45eda76 100644 --- a/utils/WebDataManager.js +++ b/utils/WebDataManager.js @@ -45,14 +45,13 @@ export default class WebDataManager { /** * Show a toast message depending on the validity of the fetched data * - * @param successString * @param errorString */ - showUpdateToast(successString, errorString) { + showUpdateToast(errorString) { let isSuccess = this.isDataObjectValid(); if (!isSuccess) { Toast.show({ - text: isSuccess ? successString : errorString, + text: errorString, buttonText: 'OK', type: isSuccess ? "success" : "danger", duration: 2000 From cec72be88c27da09778699e9f1ea91134a22ba2b Mon Sep 17 00:00:00 2001 From: keplyx Date: Thu, 5 Mar 2020 21:48:37 +0100 Subject: [PATCH 06/66] Use expo material icons instead of custom class --- App.js | 21 ++++---- components/BaseContainer.js | 7 +-- components/CustomHeader.js | 12 +++-- components/CustomIntroSlider.js | 7 ++- components/CustomMaterialIcon.js | 61 --------------------- components/DashboardItem.js | 13 ++--- components/Sidebar.js | 36 ++++--------- components/WebSectionList.js | 9 ++-- components/WebViewScreen.js | 13 ++--- navigation/DrawerNavigator.js | 64 ++++++++--------------- navigation/MainTabNavigator.js | 13 ++--- package.json | 1 + screens/About/AboutScreen.js | 32 +++++++----- screens/DebugScreen.js | 4 +- screens/HomeScreen.js | 8 +-- screens/Proximo/ProximoAboutScreen.js | 10 ++-- screens/Proximo/ProximoListScreen.js | 19 ++++--- screens/Proximo/ProximoMainScreen.js | 27 ++++++---- screens/Proxiwash/ProxiwashAboutScreen.js | 30 +++++++---- screens/Proxiwash/ProxiwashScreen.js | 28 +++++----- screens/SettingsScreen.js | 14 +++-- 21 files changed, 186 insertions(+), 243 deletions(-) delete mode 100644 components/CustomMaterialIcon.js diff --git a/App.js b/App.js index b50c13f..3c146e9 100644 --- a/App.js +++ b/App.js @@ -9,12 +9,11 @@ import {clearThemeCache} from 'native-base-shoutem-theme'; import AsyncStorageManager from "./utils/AsyncStorageManager"; import CustomIntroSlider from "./components/CustomIntroSlider"; import {SplashScreen} from 'expo'; -import NotificationsManager from "./utils/NotificationsManager"; import ThemeManager from './utils/ThemeManager'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import DrawerNavigator from './navigation/DrawerNavigator'; -import { enableScreens } from 'react-native-screens'; +import NotificationsManager from "./utils/NotificationsManager"; type Props = {}; @@ -36,10 +35,12 @@ export default class App extends React.Component { currentTheme: null, }; - constructor(props: Object) { - super(props); + onIntroDone: Function; + + constructor() { + super(); LocaleManager.initTranslations(); - enableScreens(); + this.onIntroDone = this.onIntroDone.bind(this); } /** @@ -81,23 +82,21 @@ export default class App extends React.Component { async loadAssetsAsync() { // Wait for custom fonts to be loaded before showing the app - console.log("loading Fonts"); + // console.log("loading Fonts"); SplashScreen.preventAutoHide(); await Font.loadAsync({ 'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'), }); - console.log("loading preferences"); + // console.log("loading preferences"); await AsyncStorageManager.getInstance().loadPreferences(); ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme()); - console.log("loading Expo token"); + // console.log("loading Expo token"); await NotificationsManager.initExpoToken(); - console.log("loaded"); this.onLoadFinished(); } onLoadFinished() { - - console.log("finished"); + // console.log("finished"); // Only show intro if this is the first time starting the app this.setState({ isLoading: false, diff --git a/components/BaseContainer.js b/components/BaseContainer.js index 1d7563d..582c492 100644 --- a/components/BaseContainer.js +++ b/components/BaseContainer.js @@ -3,7 +3,7 @@ import * as React from 'react'; import {Container} from "native-base"; import CustomHeader from "./CustomHeader"; -import CustomMaterialIcon from "./CustomMaterialIcon"; +import {MaterialCommunityIcons} from "@expo/vector-icons"; import {Platform, View} from "react-native"; import ThemeManager from "../utils/ThemeManager"; import Touchable from "react-native-platform-touchable"; @@ -66,9 +66,10 @@ export default class BaseContainer extends React.Component { - + size={26} + name="menu"/> } rightButton={this.props.headerRightButton} diff --git a/components/CustomHeader.js b/components/CustomHeader.js index 1a9f738..e567575 100644 --- a/components/CustomHeader.js +++ b/components/CustomHeader.js @@ -6,7 +6,7 @@ import {Platform, StyleSheet, View} from "react-native"; import {getStatusBarHeight} from "react-native-status-bar-height"; import Touchable from 'react-native-platform-touchable'; import ThemeManager from "../utils/ThemeManager"; -import CustomMaterialIcon from "./CustomMaterialIcon"; +import {MaterialCommunityIcons} from "@expo/vector-icons"; import i18n from "i18n-js"; type Props = { @@ -76,8 +76,9 @@ export default class CustomHeader extends React.Component { width: '100%', marginBottom: 7 }}> - { - + name={Platform.OS === 'ios' ? 'chevron-left' : "arrow-left"} + size={26}/> ; else button = this.props.leftButton; diff --git a/components/CustomIntroSlider.js b/components/CustomIntroSlider.js index 1ad4221..55552a8 100644 --- a/components/CustomIntroSlider.js +++ b/components/CustomIntroSlider.js @@ -3,7 +3,7 @@ import * as React from 'react'; import {LinearGradient} from "expo-linear-gradient"; import {Image, StyleSheet, View} from "react-native"; -import CustomMaterialIcon from "./CustomMaterialIcon"; +import {MaterialCommunityIcons} from "@expo/vector-icons"; import {Text} from "native-base"; import i18n from 'i18n-js'; import AppIntroSlider from "react-native-app-intro-slider"; @@ -131,7 +131,10 @@ export default class CustomIntroSlider extends React.Component { > {item.image !== undefined ? - : } + : } {item.title} {item.text} diff --git a/components/CustomMaterialIcon.js b/components/CustomMaterialIcon.js deleted file mode 100644 index 4792b81..0000000 --- a/components/CustomMaterialIcon.js +++ /dev/null @@ -1,61 +0,0 @@ -// @flow - -import * as React from 'react'; -import {Icon} from "native-base"; -import ThemeManager from '../utils/ThemeManager'; - -type Props = { - active: boolean, - icon: string, - color: ?string, - fontSize: number, - width: number | string, -} - -/** - * Custom component defining a material icon using native base - * - * @prop active {boolean} Whether to set the icon color to active - * @prop icon {string} The icon string to use from MaterialCommunityIcons - * @prop color {string} The icon color. Use default theme color if unspecified - * @prop fontSize {number} The icon size. Use 26 if unspecified - * @prop width {number} The icon width. Use 30 if unspecified - */ -export default class CustomMaterialIcon extends React.Component { - - static defaultProps = { - active: false, - color: undefined, - fontSize: 26, - width: 30, - }; - - shouldComponentUpdate(nextProps: Props): boolean { - return nextProps.icon !== this.props.icon || - nextProps.active !== this.props.active || - nextProps.width !== this.props.width || - nextProps.fontSize !== this.props.fontSize || - nextProps.color !== this.props.color; - } - - render() { - // console.log("rendering icon " + this.props.icon); - return ( - - ); - } -} diff --git a/components/DashboardItem.js b/components/DashboardItem.js index 7695cae..1d5b2f4 100644 --- a/components/DashboardItem.js +++ b/components/DashboardItem.js @@ -2,7 +2,7 @@ import * as React from 'react'; import {Body, Card, CardItem, H3, Left, Text, Thumbnail} from "native-base"; -import CustomMaterialIcon from "./CustomMaterialIcon"; +import {MaterialCommunityIcons} from "@expo/vector-icons"; import {View} from "react-native"; import ThemeManager from "../utils/ThemeManager"; import HTML from "react-native-render-html"; @@ -132,7 +132,9 @@ export default class DashboardItem extends React.Component { }}> {i18n.t("homeScreen.dashboard.seeMore")} - + @@ -145,15 +147,14 @@ export default class DashboardItem extends React.Component { getIcon() { return ( - + size={this.props.isSquare ? 50 : 40}/> ); } diff --git a/components/Sidebar.js b/components/Sidebar.js index a91cf46..72db945 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -1,17 +1,15 @@ // @flow import * as React from 'react'; -import {Dimensions, FlatList, Image, Linking, Platform, StyleSheet} from 'react-native'; -import {Badge, Container, Left, ListItem, Right, Text} from "native-base"; +import {Dimensions, FlatList, Image,Platform, StyleSheet} from 'react-native'; +import {Container, Left, ListItem, Text} from "native-base"; import i18n from "i18n-js"; -import CustomMaterialIcon from '../components/CustomMaterialIcon'; +import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../utils/ThemeManager"; import * as WebBrowser from 'expo-web-browser'; const deviceWidth = Dimensions.get("window").width; -const drawerCover = require("../assets/drawer-cover.png"); - type Props = { navigation: Object, }; @@ -134,7 +132,7 @@ export default class SideBar extends React.Component { getRenderItem({item}: Object) { const onListItemPress = this.onListItemPress.bind(this, item); - + // return ; if (item.icon !== undefined) { return ( { onPress={onListItemPress} > - {item.name} - {item.types && - - - {`${item.types} Types`} - - } ); } else { @@ -180,12 +164,12 @@ export default class SideBar extends React.Component { } render() { - // console.log("rendering SideBar"); + console.log("rendering SideBar"); return ( - + { {this.state.refreshing ? : - } diff --git a/components/WebViewScreen.js b/components/WebViewScreen.js index 69aa465..87c2d55 100644 --- a/components/WebViewScreen.js +++ b/components/WebViewScreen.js @@ -5,7 +5,7 @@ import {Linking, Platform, View} from 'react-native'; import {Body, Footer, Left, Right, Spinner, Tab, TabHeading, Tabs, Text} from 'native-base'; import WebView from "react-native-webview"; import Touchable from "react-native-platform-touchable"; -import CustomMaterialIcon from "../components/CustomMaterialIcon"; +import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../utils/ThemeManager"; import BaseContainer from "../components/BaseContainer"; @@ -59,9 +59,10 @@ export default class WebViewScreen extends React.Component { - + name={icon} + size={26}/> ); } @@ -144,10 +145,10 @@ export default class WebViewScreen extends React.Component { tabbedView.push( - {this.props.data[i]['name']} } diff --git a/navigation/DrawerNavigator.js b/navigation/DrawerNavigator.js index c84af0b..d8a9a1a 100644 --- a/navigation/DrawerNavigator.js +++ b/navigation/DrawerNavigator.js @@ -11,6 +11,7 @@ import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen"; import DebugScreen from '../screens/DebugScreen'; import Sidebar from "../components/Sidebar"; import {createStackNavigator, TransitionPresets} from "@react-navigation/stack"; +import PerfHomeScreen from '../screens/PerfHomeScreen'; const AboutStack = createStackNavigator(); @@ -84,47 +85,24 @@ export default function DrawerNavigator() { ); } -// -// // Create a stack to use animations -// function createDrawerStackWithInitialRoute(initialRoute: string) { -// return createStackNavigator({ -// Main: createMaterialBottomTabNavigatorWithInitialRoute(initialRoute), -// SettingsScreen: {screen: SettingsScreen}, -// AboutScreen: AboutStack, -// SelfMenuScreen: {screen: SelfMenuScreen}, -// TutorInsaScreen: {screen: TutorInsaScreen}, -// AmicaleScreen: {screen: AmicaleScreen}, -// WiketudScreen: {screen: WiketudScreen}, -// ElusEtudScreen: {screen: ElusEtudScreen}, -// BlueMindScreen: {screen: BlueMindScreen}, -// EntScreen: {screen: EntScreen}, -// AvailableRoomScreen: {screen: AvailableRoomScreen}, -// }, -// { -// initialRouteName: "Main", -// mode: 'card', -// headerMode: "none", -// defaultNavigationOptions: { -// gestureEnabled: true, -// cardOverlayEnabled: true, -// ...TransitionPresets.SlideFromRightIOS, -// }, -// }); -// } -// /** -// * Creates the drawer navigation stack -// */ -// function createDrawerNavigatorWithInitialRoute(initialRoute: string) { -// return createDrawerNavigator({ -// Main: createDrawerStackWithInitialRoute(initialRoute), -// }, { -// contentComponent: Sidebar, -// initialRouteName: 'Main', -// backBehavior: 'initialRoute', -// drawerType: 'front', -// useNativeAnimations: true, -// }); -// } -// -// export {createDrawerNavigatorWithInitialRoute}; +const basicStack = createStackNavigator(); + +function DrawerNavigator1() { + return ( + + + + ); +} diff --git a/navigation/MainTabNavigator.js b/navigation/MainTabNavigator.js index 59cba2d..b9c2152 100644 --- a/navigation/MainTabNavigator.js +++ b/navigation/MainTabNavigator.js @@ -3,6 +3,7 @@ import {createStackNavigator, TransitionPresets} from '@react-navigation/stack'; import {createMaterialBottomTabNavigator} from "@react-navigation/material-bottom-tabs"; import HomeScreen from '../screens/HomeScreen'; +import PerfHomeScreen from '../screens/PerfHomeScreen'; import PlanningScreen from '../screens/PlanningScreen'; import PlanningDisplayScreen from '../screens/PlanningDisplayScreen'; import ProxiwashScreen from '../screens/Proxiwash/ProxiwashScreen'; @@ -11,12 +12,8 @@ import ProximoMainScreen from '../screens/Proximo/ProximoMainScreen'; import ProximoListScreen from "../screens/Proximo/ProximoListScreen"; import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen"; import PlanexScreen from '../screens/Websites/PlanexScreen'; -import CustomMaterialIcon from "../components/CustomMaterialIcon"; +import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../utils/ThemeManager"; -import AboutScreen from "../screens/About/AboutScreen"; -import AboutDependenciesScreen from "../screens/About/AboutDependenciesScreen"; -import DebugScreen from "../screens/DebugScreen"; -import SettingsScreen from "../screens/SettingsScreen"; import AsyncStorageManager from "../utils/AsyncStorageManager"; const TAB_ICONS = { @@ -145,12 +142,12 @@ export default function TabNavigator() { ({ - tabBarIcon: ({ focused, color, size }) => { + screenOptions={({route}) => ({ + tabBarIcon: ({focused, color, size}) => { let icon = TAB_ICONS[route.name]; // tintColor is ignoring activeColor and inactiveColor for some reason color = focused ? "#f0edf6" : "#4e1108"; - return ; + return ; }, })} > diff --git a/package.json b/package.json index 01a8847..90050a9 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "eject": "expo eject" }, "dependencies": { + "@expo/vector-icons": "~10.0.0", "@react-native-community/masked-view": "0.1.5", "@react-navigation/bottom-tabs": "^5.1.1", "@react-navigation/drawer": "^5.1.1", diff --git a/screens/About/AboutScreen.js b/screens/About/AboutScreen.js index aba7149..02a4ad3 100644 --- a/screens/About/AboutScreen.js +++ b/screens/About/AboutScreen.js @@ -7,7 +7,7 @@ import CustomHeader from "../../components/CustomHeader"; import i18n from "i18n-js"; import appJson from '../../app'; import packageJson from '../../package'; -import CustomMaterialIcon from "../../components/CustomMaterialIcon"; +import {MaterialCommunityIcons} from "@expo/vector-icons"; import AsyncStorageManager from "../../utils/AsyncStorageManager"; import {Modalize} from "react-native-modalize"; import ThemeManager from "../../utils/ThemeManager"; @@ -227,11 +227,10 @@ export default class AboutScreen extends React.Component { - +

{i18n.t('aboutScreen.team')}

@@ -290,13 +289,18 @@ export default class AboutScreen extends React.Component { - + {item.text} {item.showChevron ? - + : @@ -344,8 +348,9 @@ export default class AboutScreen extends React.Component { marginRight: 'auto', }} onPress={onPressMail}> - {i18n.t('aboutScreen.bugsMail')} @@ -356,8 +361,9 @@ export default class AboutScreen extends React.Component { marginRight: 'auto', }} onPress={onPressGit}> - {i18n.t('aboutScreen.bugsGit')} diff --git a/screens/DebugScreen.js b/screens/DebugScreen.js index ea2b33e..85b22eb 100644 --- a/screens/DebugScreen.js +++ b/screens/DebugScreen.js @@ -23,7 +23,7 @@ import { import CustomHeader from "../components/CustomHeader"; import ThemeManager from '../utils/ThemeManager'; import i18n from "i18n-js"; -import CustomMaterialIcon from "../components/CustomMaterialIcon"; +import {MaterialCommunityIcons} from "@expo/vector-icons"; import {Alert, Clipboard, View} from "react-native"; import AsyncStorageManager from "../utils/AsyncStorageManager"; import NotificationsManager from "../utils/NotificationsManager"; @@ -64,7 +64,7 @@ export default class DebugScreen extends React.Component { > {icon !== undefined ? - + : } diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js index 03a4cbd..a7799e0 100644 --- a/screens/HomeScreen.js +++ b/screens/HomeScreen.js @@ -4,7 +4,7 @@ import * as React from 'react'; import {Image, TouchableOpacity, View} from 'react-native'; import {Body, Button, Card, CardItem, Left, Text, Thumbnail} from 'native-base'; import i18n from "i18n-js"; -import CustomMaterialIcon from '../components/CustomMaterialIcon'; +import {MaterialCommunityIcons} from "@expo/vector-icons"; import Autolink from 'react-native-autolink'; import ThemeManager from "../utils/ThemeManager"; import DashboardItem from "../components/DashboardItem"; @@ -551,10 +551,10 @@ export default class HomeScreen extends React.Component { diff --git a/screens/Proximo/ProximoAboutScreen.js b/screens/Proximo/ProximoAboutScreen.js index 65a19cf..fa2abcf 100644 --- a/screens/Proximo/ProximoAboutScreen.js +++ b/screens/Proximo/ProximoAboutScreen.js @@ -5,7 +5,7 @@ import {Image, View} from 'react-native'; import {Card, CardItem, Container, Content, H2, Left, Text} from 'native-base'; import CustomHeader from "../../components/CustomHeader"; import i18n from "i18n-js"; -import CustomMaterialIcon from "../../components/CustomMaterialIcon"; +import {MaterialCommunityIcons} from "@expo/vector-icons"; type Props = { navigation: Object, @@ -39,7 +39,9 @@ export default class ProximoAboutScreen extends React.Component { - +

{i18n.t('proximoScreen.openingHours')}

@@ -50,7 +52,9 @@ export default class ProximoAboutScreen extends React.Component { - +

{i18n.t('proximoScreen.paymentMethods')}

diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index 23887aa..bfbf925 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -7,7 +7,7 @@ import {FlatList, Image, Platform, View} from "react-native"; import Touchable from 'react-native-platform-touchable'; import Menu, {MenuItem} from 'react-native-material-menu'; import i18n from "i18n-js"; -import CustomMaterialIcon from "../../components/CustomMaterialIcon"; +import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../../utils/ThemeManager"; import {Modalize} from 'react-native-modalize'; @@ -182,11 +182,15 @@ export default class ProximoListScreen extends React.Component { */ setupSortIcons(mode: string, isReverse: boolean) { const downSortIcon = - ; + ; const upSortIcon = - ; + ; switch (mode) { case sortMode.price: this.setState({sortNameIcon: ''}); @@ -297,9 +301,10 @@ export default class ProximoListScreen extends React.Component { - + name={'sort'} + size={26}/> } > diff --git a/screens/Proximo/ProximoMainScreen.js b/screens/Proximo/ProximoMainScreen.js index 328782c..5297b2e 100644 --- a/screens/Proximo/ProximoMainScreen.js +++ b/screens/Proximo/ProximoMainScreen.js @@ -4,7 +4,7 @@ import * as React from 'react'; import {Platform, View} from 'react-native' import {Body, Left, ListItem, Right, Text} from 'native-base'; import i18n from "i18n-js"; -import CustomMaterialIcon from "../../components/CustomMaterialIcon"; +import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../../utils/ThemeManager"; import Touchable from "react-native-platform-touchable"; import BaseContainer from "../../components/BaseContainer"; @@ -155,16 +155,18 @@ export default class ProximoMainScreen extends React.Component { - + - +
); @@ -184,9 +186,9 @@ export default class ProximoMainScreen extends React.Component { onPress={onPress} > - @@ -199,7 +201,10 @@ export default class ProximoMainScreen extends React.Component { - + ); diff --git a/screens/Proxiwash/ProxiwashAboutScreen.js b/screens/Proxiwash/ProxiwashAboutScreen.js index 86dda4f..0bcafce 100644 --- a/screens/Proxiwash/ProxiwashAboutScreen.js +++ b/screens/Proxiwash/ProxiwashAboutScreen.js @@ -5,7 +5,7 @@ import {Image, View} from 'react-native'; import {Body, Card, CardItem, Container, Content, H2, H3, Left, Tab, TabHeading, Tabs, Text} from 'native-base'; import CustomHeader from "../../components/CustomHeader"; import i18n from "i18n-js"; -import CustomMaterialIcon from "../../components/CustomMaterialIcon"; +import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../../utils/ThemeManager"; type Props = { @@ -32,10 +32,10 @@ export default class ProxiwashAboutScreen extends React.Component { - {i18n.t('proxiwashScreen.informationTab')} @@ -60,7 +60,9 @@ export default class ProxiwashAboutScreen extends React.Component { - +

{i18n.t('proxiwashScreen.dryer')}

@@ -80,7 +82,9 @@ export default class ProxiwashAboutScreen extends React.Component { - +

{i18n.t('proxiwashScreen.washer')}

@@ -102,10 +106,10 @@ export default class ProxiwashAboutScreen extends React.Component { - {i18n.t('proxiwashScreen.paymentTab')} @@ -116,7 +120,9 @@ export default class ProxiwashAboutScreen extends React.Component { - +

{i18n.t('proxiwashScreen.tariffs')}

@@ -130,7 +136,9 @@ export default class ProxiwashAboutScreen extends React.Component { - +

{i18n.t('proxiwashScreen.paymentMethods')}

diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js index 46be088..d26b4bf 100644 --- a/screens/Proxiwash/ProxiwashScreen.js +++ b/screens/Proxiwash/ProxiwashScreen.js @@ -5,7 +5,7 @@ import {Alert, Platform, View} from 'react-native'; import {Body, Card, CardItem, Left, Right, Text} from 'native-base'; import ThemeManager from '../../utils/ThemeManager'; import i18n from "i18n-js"; -import CustomMaterialIcon from "../../components/CustomMaterialIcon"; +import {MaterialCommunityIcons} from "@expo/vector-icons"; import WebSectionList from "../../components/WebSectionList"; import NotificationsManager from "../../utils/NotificationsManager"; import PlatformTouchable from "react-native-platform-touchable"; @@ -288,9 +288,10 @@ export default class ProxiwashScreen extends React.Component { - + name="information" + size={26}/> ); } @@ -320,7 +321,7 @@ export default class ProxiwashScreen extends React.Component { * @param section The object describing the current SectionList section * @returns {React.Node} */ - getRenderItem({item, section} : Object) { + getRenderItem({item, section}: Object) { let isMachineRunning = MACHINE_STATES[item.state] === MACHINE_STATES["EN COURS"]; let machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')) + ' n°' + item.number; let isDryer = section.title === i18n.t('proxiwashScreen.dryers'); @@ -361,18 +362,19 @@ export default class ProxiwashScreen extends React.Component { - {machineName + ' '} {this.isMachineWatched(item.number) ? - : ''} @@ -386,8 +388,10 @@ export default class ProxiwashScreen extends React.Component { > {stateStrings[MACHINE_STATES[item.state]]} -
diff --git a/screens/SettingsScreen.js b/screens/SettingsScreen.js index 53b7d68..ce49bc2 100644 --- a/screens/SettingsScreen.js +++ b/screens/SettingsScreen.js @@ -18,8 +18,8 @@ import { import CustomHeader from "../components/CustomHeader"; import ThemeManager from '../utils/ThemeManager'; import i18n from "i18n-js"; -import {NavigationActions, StackActions} from "react-navigation"; -import CustomMaterialIcon from "../components/CustomMaterialIcon"; +import {NavigationActions, StackActions} from "@react-navigation/native"; +import {MaterialCommunityIcons} from "@expo/vector-icons"; import AsyncStorageManager from "../utils/AsyncStorageManager"; import NotificationsManager from "../utils/NotificationsManager"; @@ -69,7 +69,10 @@ export default class SettingsScreen extends React.Component { thumbnail > - + @@ -201,7 +204,10 @@ export default class SettingsScreen extends React.Component { onPress={onPressCallback} > - + From 14960794bc2eed1f12ae3f1ee98b373d77dccd0e Mon Sep 17 00:00:00 2001 From: keplyx Date: Thu, 5 Mar 2020 23:40:50 +0100 Subject: [PATCH 07/66] Start using react navigation header --- navigation/MainTabNavigator.js | 27 ++++++++++++++--- screens/Proximo/ProximoAboutScreen.js | 1 - screens/Proximo/ProximoListScreen.js | 43 ++++++++++++++++++++------- screens/Proximo/ProximoMainScreen.js | 21 ++++++++----- 4 files changed, 68 insertions(+), 24 deletions(-) diff --git a/navigation/MainTabNavigator.js b/navigation/MainTabNavigator.js index b9c2152..f6a8e79 100644 --- a/navigation/MainTabNavigator.js +++ b/navigation/MainTabNavigator.js @@ -3,7 +3,6 @@ import {createStackNavigator, TransitionPresets} from '@react-navigation/stack'; import {createMaterialBottomTabNavigator} from "@react-navigation/material-bottom-tabs"; import HomeScreen from '../screens/HomeScreen'; -import PerfHomeScreen from '../screens/PerfHomeScreen'; import PlanningScreen from '../screens/PlanningScreen'; import PlanningDisplayScreen from '../screens/PlanningDisplayScreen'; import ProxiwashScreen from '../screens/Proxiwash/ProxiwashScreen'; @@ -15,6 +14,8 @@ import PlanexScreen from '../screens/Websites/PlanexScreen'; import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../utils/ThemeManager"; import AsyncStorageManager from "../utils/AsyncStorageManager"; +import {StyleSheet, View} from "react-native"; +import Touchable from "react-native-platform-touchable"; const TAB_ICONS = { Home: 'triangle', @@ -26,13 +27,24 @@ const TAB_ICONS = { const ProximoStack = createStackNavigator(); +const styles = StyleSheet.create({ + header: { + backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary, + }, + headerTitle: { + color: "#ffffff", + }, +}); + + function ProximoStackComponent() { return ( @@ -116,7 +135,7 @@ function HomeStackComponent() { { const nav = this.props.navigation; return ( - { break; } this.setupSortIcons(mode, isReverse); - this.sortMenuRef.hide(); + if (this.sortMenuRef !== undefined) + this.sortMenuRef.hide(); } /** * Set the sort mode from state when components are ready */ componentDidMount() { + const button = this.getSortMenu.bind(this); + const title = this.getSearchBar.bind(this); + this.props.navigation.setOptions({ + headerRight: button, + headerTitle: title, + }); this.setSortMode(this.state.currentSortMode, this.state.isSortReversed); } + getSearchBar() { + return ( + + + + + + + ); + } + /** * get color depending on quantity available * @@ -299,7 +328,7 @@ export default class ProximoListScreen extends React.Component { ref={this.onMenuRef} button={ { modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> {this.getModalContent()} - { this.createDataset = this.createDataset.bind(this); } + componentDidMount() { + const button = this.getRightButton.bind(this); + this.props.navigation.setOptions({ + headerRight: button + , + }); + } + static sortFinalData(a: Object, b: Object) { let str1 = a.type.name.toLowerCase(); let str2 = b.type.name.toLowerCase(); @@ -150,7 +157,8 @@ export default class ProximoMainScreen extends React.Component { return ( { render() { const nav = this.props.navigation; return ( - + { fetchUrl={DATA_URL} renderItem={this.getRenderItem} updateErrorText={i18n.t("homeScreen.listUpdateFail")}/> - + ); } } From 79eaefab88d716814de0e077e98d2d87045712b5 Mon Sep 17 00:00:00 2001 From: keplyx Date: Fri, 6 Mar 2020 09:12:56 +0100 Subject: [PATCH 08/66] Use React navigation header --- components/BaseContainer.js | 83 ------- components/CustomHeader.js | 150 ------------- components/Sidebar.js | 62 +++--- components/WebViewScreen.js | 52 ++--- navigation/DrawerNavigator.js | 201 +++++++++++++---- navigation/MainTabNavigator.js | 132 ++++++++--- screens/About/AboutDependenciesScreen.js | 46 ++-- screens/About/AboutScreen.js | 12 +- screens/DebugScreen.js | 4 - screens/HomeScreen.js | 17 +- screens/PlanningDisplayScreen.js | 24 +- screens/PlanningScreen.js | 112 +++++----- screens/Proximo/ProximoAboutScreen.js | 1 - screens/Proximo/ProximoListScreen.js | 7 +- screens/Proximo/ProximoMainScreen.js | 34 ++- screens/Proxiwash/ProxiwashAboutScreen.js | 259 +++++++++++----------- screens/Proxiwash/ProxiwashScreen.js | 29 +-- screens/SelfMenuScreen.js | 23 +- screens/SettingsScreen.js | 58 ++--- screens/Websites/AvailableRoomScreen.js | 19 -- screens/Websites/BibScreen.js | 66 ++++++ 21 files changed, 659 insertions(+), 732 deletions(-) delete mode 100644 components/BaseContainer.js delete mode 100644 components/CustomHeader.js create mode 100644 screens/Websites/BibScreen.js diff --git a/components/BaseContainer.js b/components/BaseContainer.js deleted file mode 100644 index 582c492..0000000 --- a/components/BaseContainer.js +++ /dev/null @@ -1,83 +0,0 @@ -// @flow - -import * as React from 'react'; -import {Container} from "native-base"; -import CustomHeader from "./CustomHeader"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; -import {Platform, View} from "react-native"; -import ThemeManager from "../utils/ThemeManager"; -import Touchable from "react-native-platform-touchable"; - - -type Props = { - navigation: Object, - headerTitle: string, - headerSubtitle: string, - headerRightButton: React.Node, - children: React.Node, - hasTabs: boolean, - hasBackButton: boolean, - hasSideMenu: boolean, - enableRotation: boolean, - hideHeaderOnLandscape: boolean, -} - -type State = { - isHeaderVisible: boolean -} - - -export default class BaseContainer extends React.Component { - static defaultProps = { - headerRightButton: , - hasTabs: false, - hasBackButton: false, - hasSideMenu: true, - enableRotation: false, - hideHeaderOnLandscape: false, - headerSubtitle: '', - }; - - state = { - isHeaderVisible: true, - }; - - onDrawerPress: Function; - - constructor() { - super(); - this.onDrawerPress = this.onDrawerPress.bind(this); - } - - onDrawerPress() { - this.props.navigation.toggleDrawer(); - } - - render() { - // console.log("rendering BaseContainer"); - return ( - - {this.state.isHeaderVisible ? - - - - } - rightButton={this.props.headerRightButton} - hasTabs={this.props.hasTabs} - hasBackButton={this.props.hasBackButton}/> - : } - {this.props.children} - - ); - } -} diff --git a/components/CustomHeader.js b/components/CustomHeader.js deleted file mode 100644 index e567575..0000000 --- a/components/CustomHeader.js +++ /dev/null @@ -1,150 +0,0 @@ -// @flow - -import * as React from "react"; -import {Body, Header, Input, Item, Left, Right, Subtitle, Title} from "native-base"; -import {Platform, StyleSheet, View} from "react-native"; -import {getStatusBarHeight} from "react-native-status-bar-height"; -import Touchable from 'react-native-platform-touchable'; -import ThemeManager from "../utils/ThemeManager"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; -import i18n from "i18n-js"; - -type Props = { - hasBackButton: boolean, - hasSearchField: boolean, - searchCallback: Function, - shouldFocusSearchBar: boolean, - leftButton: React.Node, - rightButton: React.Node, - title: string, - subtitle: string, - navigation: Object, - hasTabs: boolean, -}; - -/** - * Custom component defining a header using native base - * - * @prop hasBackButton {boolean} Whether to show a back button or a burger menu. Use burger if unspecified - * @prop rightMenu {React.Node} Element to place at the right of the header. Use nothing if unspecified - * @prop title {string} This header title - * @prop navigation {Object} The navigation object from react navigation - */ -export default class CustomHeader extends React.Component { - static defaultProps = { - hasBackButton: false, - hasSearchField: false, - searchCallback: null, - shouldFocusSearchBar: false, - title: '', - subtitle: '', - leftButton: , - rightButton: , - hasTabs: false, - }; - - onPressBack: Function; - - constructor() { - super(); - this.onPressBack = this.onPressBack.bind(this); - } - - shouldComponentUpdate(nextProps: Props): boolean { - return nextProps.title !== this.props.title || - nextProps.subtitle !== this.props.subtitle || - nextProps.hasBackButton !== this.props.hasBackButton || - nextProps.hasSearchField !== this.props.hasSearchField || - nextProps.shouldFocusSearchBar !== this.props.shouldFocusSearchBar || - nextProps.hasTabs !== this.props.hasTabs || - nextProps.rightButton !== this.props.rightButton || - nextProps.leftButton !== this.props.leftButton; - } - - componentDidMount() { - if (this.refs.searchInput !== undefined && this.refs.searchInput._root !== undefined && this.props.shouldFocusSearchBar) { - // does not work if called too early for some reason... - setTimeout(this.refs.searchInput._root.focus, 500); - } - } - - getSearchBar() { - return ( - - - - - - - ); - } - - getHeaderTitle() { - return ( - - - {this.props.title} - - {this.props.subtitle !== '' ? {this.props.subtitle} : null} - - ); - } - - - onPressBack() { - this.props.navigation.goBack(); - } - - render() { - // console.log("rendering CustomHeader"); - let button; - // Does the app have a back button or a burger menu ? - if (this.props.hasBackButton) - button = - - - ; - else - button = this.props.leftButton; - - return ( -
- - {button} - - {this.props.hasSearchField ? - this.getSearchBar() : - this.getHeaderTitle()} - - {this.props.rightButton} - -
); - } -}; - -// Fix header in status bar on Android -const styles = StyleSheet.create({ - header: { - paddingTop: getStatusBarHeight(), - height: 54 + getStatusBarHeight(), - }, -}); diff --git a/components/Sidebar.js b/components/Sidebar.js index 72db945..353d15a 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -40,6 +40,42 @@ export default class SideBar extends React.Component { super(props); // Dataset used to render the drawer this.dataSet = [ + { + name: "Home", + route: "Main", + icon: "home", + }, + { + name: i18n.t('sidenav.divider2'), + route: "Divider2" + }, + { + name: i18n.t('screens.menuSelf'), + route: "SelfMenuScreen", + icon: "silverware-fork-knife", + }, + { + name: i18n.t('screens.availableRooms'), + route: "AvailableRoomScreen", + icon: "calendar-check", + }, + { + name: 'Bib', + route: "BibScreen", + icon: "book", + }, + { + name: i18n.t('screens.bluemind'), + route: "BlueMindScreen", + link: "https://etud-mel.insa-toulouse.fr/webmail/", + icon: "email", + }, + { + name: i18n.t('screens.ent'), + route: "EntScreen", + link: "https://ent.insa-toulouse.fr/", + icon: "notebook", + }, { name: i18n.t('sidenav.divider1'), route: "Divider1" @@ -68,32 +104,6 @@ export default class SideBar extends React.Component { link: "https://www.etud.insa-toulouse.fr/~tutorinsa/", icon: "school", }, - { - name: i18n.t('sidenav.divider2'), - route: "Divider2" - }, - { - name: i18n.t('screens.bluemind'), - route: "BlueMindScreen", - link: "https://etud-mel.insa-toulouse.fr/webmail/", - icon: "email", - }, - { - name: i18n.t('screens.ent'), - route: "EntScreen", - link: "https://ent.insa-toulouse.fr/", - icon: "notebook", - }, - { - name: i18n.t('screens.availableRooms'), - route: "AvailableRoomScreen", - icon: "calendar-check", - }, - { - name: i18n.t('screens.menuSelf'), - route: "SelfMenuScreen", - icon: "silverware-fork-knife", - }, { name: i18n.t('sidenav.divider3'), route: "Divider3" diff --git a/components/WebViewScreen.js b/components/WebViewScreen.js index 87c2d55..fe88437 100644 --- a/components/WebViewScreen.js +++ b/components/WebViewScreen.js @@ -1,13 +1,12 @@ // @flow import * as React from 'react'; -import {Linking, Platform, View} from 'react-native'; -import {Body, Footer, Left, Right, Spinner, Tab, TabHeading, Tabs, Text} from 'native-base'; +import {Platform, View} from 'react-native'; +import {Container, Spinner, Tab, TabHeading, Tabs, Text} from 'native-base'; import WebView from "react-native-webview"; import Touchable from "react-native-platform-touchable"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../utils/ThemeManager"; -import BaseContainer from "../components/BaseContainer"; type Props = { navigation: Object, @@ -50,8 +49,11 @@ export default class WebViewScreen extends React.Component { this.onOpenWebLink = this.onOpenWebLink.bind(this); } - openWebLink(url: string) { - Linking.openURL(url).catch((err) => console.error('Error opening link', err)); + componentDidMount() { + const rightButton = this.getRefreshButton.bind(this); + this.props.navigation.setOptions({ + headerRight: rightButton, + }); } getHeaderButton(clickAction: Function, icon: string) { @@ -69,7 +71,10 @@ export default class WebViewScreen extends React.Component { getRefreshButton() { return ( - + {this.getHeaderButton(this.onRefreshClicked, 'refresh')} ); @@ -165,15 +170,7 @@ export default class WebViewScreen extends React.Component { const nav = this.props.navigation; this.webviewArray = []; return ( - 1}> + {this.props.data.length === 1 ? this.getWebview(this.props.data[0]) : { > {this.getTabbedWebview()} } - {this.props.hasFooter && this.props.data.length === 1 ? -
- - {this.getHeaderButton(this.onOpenWebLink, 'open-in-new')} - - - - - {this.getHeaderButton(this.onGoBackWebview, 'chevron-left')} - {this.getHeaderButton(this.onGoForwardWebview, 'chevron-right')} - - -
: } -
+ ); } } diff --git a/navigation/DrawerNavigator.js b/navigation/DrawerNavigator.js index d8a9a1a..0231262 100644 --- a/navigation/DrawerNavigator.js +++ b/navigation/DrawerNavigator.js @@ -8,10 +8,52 @@ import AboutScreen from '../screens/About/AboutScreen'; import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen'; import SelfMenuScreen from '../screens/SelfMenuScreen'; import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen"; +import BibScreen from "../screens/Websites/BibScreen"; import DebugScreen from '../screens/DebugScreen'; import Sidebar from "../components/Sidebar"; import {createStackNavigator, TransitionPresets} from "@react-navigation/stack"; import PerfHomeScreen from '../screens/PerfHomeScreen'; +import {Platform, StyleSheet, View} from "react-native"; +import ThemeManager from "../utils/ThemeManager"; +import Touchable from "react-native-platform-touchable"; +import {MaterialCommunityIcons} from "@expo/vector-icons"; + + +const styles = StyleSheet.create({ + header: { + backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary, + }, + headerTitle: { + color: "#ffffff", + }, +}); + +const defaultScreenOptions = { + headerTintColor: 'white', + headerStyle: styles.header, + gestureEnabled: true, + cardOverlayEnabled: true, + ...TransitionPresets.SlideFromRightIOS, +}; + +function getDrawerButton(navigation: Object) { + return ( + + + + + + ); +} const AboutStack = createStackNavigator(); @@ -19,30 +61,134 @@ function AboutStackComponent() { return ( { + const openDrawer = getDrawerButton.bind(this, navigation); + return { + title: 'About', + headerLeft: openDrawer + }; + }} /> ); } +const SettingsStack = createStackNavigator(); + +function SettingsStackComponent() { + return ( + + { + const openDrawer = getDrawerButton.bind(this, navigation); + return { + title: 'Settings', + headerLeft: openDrawer + }; + }} + /> + + ); +} + +const SelfMenuStack = createStackNavigator(); + +function SelfMenuStackComponent() { + return ( + + { + const openDrawer = getDrawerButton.bind(this, navigation); + return { + title: 'Menu RU', + headerLeft: openDrawer + }; + }} + /> + + ); +} + +const AvailableRoomStack = createStackNavigator(); + +function AvailableRoomStackComponent() { + return ( + + { + const openDrawer = getDrawerButton.bind(this, navigation); + return { + title: 'Available Rooms', + headerLeft: openDrawer + }; + }} + /> + + ); +} + +const BibStack = createStackNavigator(); + +function BibStackComponent() { + return ( + + { + const openDrawer = getDrawerButton.bind(this, navigation); + return { + title: 'Bib', + headerLeft: openDrawer + }; + }} + /> + + ); +} + const Drawer = createDrawerNavigator(); function getDrawerContent(nav) { @@ -53,13 +199,11 @@ export default function DrawerNavigator() { return ( getDrawerContent(props.navigation)} - screenOptions={{ - gestureEnabled: true, - cardOverlayEnabled: true, - ...TransitionPresets.SlideFromRightIOS, - }} + screenOptions={defaultScreenOptions} > + ); } - -const basicStack = createStackNavigator(); - -function DrawerNavigator1() { - return ( - - - - ); -} diff --git a/navigation/MainTabNavigator.js b/navigation/MainTabNavigator.js index f6a8e79..53a724d 100644 --- a/navigation/MainTabNavigator.js +++ b/navigation/MainTabNavigator.js @@ -14,7 +14,7 @@ import PlanexScreen from '../screens/Websites/PlanexScreen'; import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../utils/ThemeManager"; import AsyncStorageManager from "../utils/AsyncStorageManager"; -import {StyleSheet, View} from "react-native"; +import {Platform, StyleSheet, View} from "react-native"; import Touchable from "react-native-platform-touchable"; const TAB_ICONS = { @@ -25,8 +25,6 @@ const TAB_ICONS = { Planex: 'timetable', }; -const ProximoStack = createStackNavigator(); - const styles = StyleSheet.create({ header: { backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary, @@ -36,24 +34,50 @@ const styles = StyleSheet.create({ }, }); +const defaultScreenOptions = { + headerTintColor: 'white', + headerStyle: styles.header, + gestureEnabled: true, + cardOverlayEnabled: true, + ...TransitionPresets.SlideFromRightIOS, +}; + +function getDrawerButton(navigation: Object) { + return ( + + + + + + ); +} + +const ProximoStack = createStackNavigator(); function ProximoStackComponent() { return ( { + const openDrawer = getDrawerButton.bind(this, navigation); + return { + title: 'Proximo', + headerLeft: openDrawer + }; }} component={ProximoMainScreen} /> @@ -82,21 +106,27 @@ function ProxiwashStackComponent() { return ( { + const openDrawer = getDrawerButton.bind(this, navigation); + return { + title: 'Proxiwash', + headerLeft: openDrawer + }; + }} /> ); @@ -108,21 +138,27 @@ function PlanningStackComponent() { return ( { + const openDrawer = getDrawerButton.bind(this, navigation); + return { + title: 'Planning', + headerLeft: openDrawer + }; + }} /> ); @@ -134,26 +170,56 @@ function HomeStackComponent() { return ( { + const openDrawer = getDrawerButton.bind(this, navigation); + return { + title: 'Home', + headerLeft: openDrawer + }; + }} /> ); } +const PlanexStack = createStackNavigator(); + +function PlanexStackComponent() { + return ( + + { + const openDrawer = getDrawerButton.bind(this, navigation); + return { + title: 'Planex', + headerLeft: openDrawer + }; + }} + /> + + ); +} + const Tab = createMaterialBottomTabNavigator(); export default function TabNavigator() { @@ -188,7 +254,7 @@ export default function TabNavigator() { />
); diff --git a/screens/About/AboutDependenciesScreen.js b/screens/About/AboutDependenciesScreen.js index 7a28866..1c97915 100644 --- a/screens/About/AboutDependenciesScreen.js +++ b/screens/About/AboutDependenciesScreen.js @@ -1,10 +1,9 @@ // @flow import * as React from 'react'; -import {Body, Container, ListItem, Text} from 'native-base'; -import CustomHeader from "../../components/CustomHeader"; +import {Body, ListItem, Text} from 'native-base'; import {FlatList} from "react-native"; -import i18n from "i18n-js"; +import packageJson from '../../package'; function generateListFromObject(object) { let list = []; @@ -17,7 +16,8 @@ function generateListFromObject(object) { } type Props = { - navigation: Object + navigation: Object, + route: Object } /** @@ -26,28 +26,24 @@ type Props = { export default class AboutDependenciesScreen extends React.Component { render() { - const nav = this.props.navigation; - const data = generateListFromObject(nav.getParam('data', {})); + const data = generateListFromObject(packageJson.dependencies); return ( - - - item.name} - style={{minHeight: 300, width: '100%'}} - renderItem={({item}) => - - - - {item.name} - - - {item.version.replace('^', '')} - - - } - /> - + item.name} + style={{minHeight: 300, width: '100%'}} + renderItem={({item}) => + + + + {item.name} + + + {item.version.replace('^', '')} + + + } + /> ); } } diff --git a/screens/About/AboutScreen.js b/screens/About/AboutScreen.js index 02a4ad3..45541d6 100644 --- a/screens/About/AboutScreen.js +++ b/screens/About/AboutScreen.js @@ -2,11 +2,9 @@ import * as React from 'react'; import {FlatList, Linking, Platform, View} from 'react-native'; -import {Body, Button, Card, CardItem, Container, H1, Left, Right, Text, Thumbnail} from 'native-base'; -import CustomHeader from "../../components/CustomHeader"; +import {Body, Button, Card, CardItem, Content, H1, Left, Right, Text, Thumbnail} from 'native-base'; import i18n from "i18n-js"; import appJson from '../../app'; -import packageJson from '../../package'; import {MaterialCommunityIcons} from "@expo/vector-icons"; import AsyncStorageManager from "../../utils/AsyncStorageManager"; import {Modalize} from "react-native-modalize"; @@ -169,7 +167,7 @@ export default class AboutScreen extends React.Component { showChevron: true }, { - onPressCallback: () => this.props.navigation.navigate('AboutDependenciesScreen', {data: packageJson.dependencies}), + onPressCallback: () => this.props.navigation.navigate('AboutDependenciesScreen'), icon: 'developer-board', text: i18n.t('aboutScreen.libs'), showChevron: true @@ -391,11 +389,9 @@ export default class AboutScreen extends React.Component { } render() { - const nav = this.props.navigation; return ( - + {this.getBugReportModal()} - { keyExtractor={(item) => item.id} renderItem={this.getMainCard} /> - + ); } } diff --git a/screens/DebugScreen.js b/screens/DebugScreen.js index 85b22eb..cf0d5d3 100644 --- a/screens/DebugScreen.js +++ b/screens/DebugScreen.js @@ -20,9 +20,7 @@ import { Right, Text } from "native-base"; -import CustomHeader from "../components/CustomHeader"; import ThemeManager from '../utils/ThemeManager'; -import i18n from "i18n-js"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import {Alert, Clipboard, View} from "react-native"; import AsyncStorageManager from "../utils/AsyncStorageManager"; @@ -150,7 +148,6 @@ export default class DebugScreen extends React.Component { } render() { - const nav = this.props.navigation; return ( { modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> {this.getModalContent()} - diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js index a7799e0..f4bb0a3 100644 --- a/screens/HomeScreen.js +++ b/screens/HomeScreen.js @@ -9,7 +9,6 @@ import Autolink from 'react-native-autolink'; import ThemeManager from "../utils/ThemeManager"; import DashboardItem from "../components/DashboardItem"; import * as WebBrowser from 'expo-web-browser'; -import BaseContainer from "../components/BaseContainer"; import WebSectionList from "../components/WebSectionList"; // import DATA from "../dashboard_data.json"; @@ -571,17 +570,13 @@ export default class HomeScreen extends React.Component { render() { const nav = this.props.navigation; return ( - - - + refreshTime={REFRESH_TIME} + fetchUrl={DATA_URL} + renderItem={this.getRenderItem} + updateErrorText={i18n.t("homeScreen.listUpdateFail")}/> ); } } diff --git a/screens/PlanningDisplayScreen.js b/screens/PlanningDisplayScreen.js index 0203f5f..37d8996 100644 --- a/screens/PlanningDisplayScreen.js +++ b/screens/PlanningDisplayScreen.js @@ -3,7 +3,6 @@ import * as React from 'react'; import {Image} from 'react-native'; import {Container, Content, H1, H3, View} from 'native-base'; -import CustomHeader from "../components/CustomHeader"; import ThemeManager from "../utils/ThemeManager"; import HTML from "react-native-render-html"; import {Linking} from "expo"; @@ -11,6 +10,7 @@ import PlanningEventManager from '../utils/PlanningEventManager'; type Props = { navigation: Object, + route: Object }; function openWebLink(event, link) { @@ -21,37 +21,33 @@ function openWebLink(event, link) { * Class defining an about screen. This screen shows the user information about the app and it's author. */ export default class PlanningDisplayScreen extends React.Component { + + displayData = this.props.route.params['data']; + render() { // console.log("rendering planningDisplayScreen"); - const nav = this.props.navigation; - const displayData = nav.getParam('data', []); return ( -

- {displayData.title} + {this.displayData.title}

- {PlanningEventManager.getFormattedTime(displayData)} + {PlanningEventManager.getFormattedTime(this.displayData)}

- {displayData.logo !== null ? + {this.displayData.logo !== null ? + source={{uri: this.displayData.logo}}/> : } - {displayData.description !== null ? + {this.displayData.description !== null ? // Surround description with div to allow text styling if the description is not html - " + displayData.description + ""} + " + this.displayData.description + ""} tagsStyles={{ p: { color: ThemeManager.getCurrentThemeVariables().textColor, diff --git a/screens/PlanningScreen.js b/screens/PlanningScreen.js index 7d2a631..2b941e3 100644 --- a/screens/PlanningScreen.js +++ b/screens/PlanningScreen.js @@ -5,7 +5,6 @@ import {BackHandler, Image} from 'react-native'; import {H3, Text, View} from 'native-base'; import i18n from "i18n-js"; import ThemeManager from "../utils/ThemeManager"; -import BaseContainer from "../components/BaseContainer"; import {Agenda, LocaleConfig} from 'react-native-calendars'; import Touchable from 'react-native-platform-touchable'; import WebDataManager from "../utils/WebDataManager"; @@ -61,6 +60,7 @@ export default class PlanningScreen extends React.Component { onAgendaRef: Function; onCalendarToggled: Function; onBackButtonPressAndroid: Function; + currentDate = this.getCurrentDate(); constructor(props: any) { super(props); @@ -271,66 +271,62 @@ export default class PlanningScreen extends React.Component { this.setState({calendarShowing: isCalendarOpened}); } - currentDate = this.getCurrentDate(); - render() { // console.log("rendering PlanningScreen"); return ( - - - + ); } } diff --git a/screens/Proximo/ProximoAboutScreen.js b/screens/Proximo/ProximoAboutScreen.js index 66a91e3..3c25636 100644 --- a/screens/Proximo/ProximoAboutScreen.js +++ b/screens/Proximo/ProximoAboutScreen.js @@ -3,7 +3,6 @@ import * as React from 'react'; import {Image, View} from 'react-native'; import {Card, CardItem, Container, Content, H2, Left, Text} from 'native-base'; -import CustomHeader from "../../components/CustomHeader"; import i18n from "i18n-js"; import {MaterialCommunityIcons} from "@expo/vector-icons"; diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index 4c14a41..ee1b90f 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -1,8 +1,7 @@ // @flow import * as React from 'react'; -import {Body, Container, Content, H1, H3, Input, Item, Left, ListItem, Right, Text, Thumbnail} from 'native-base'; -import CustomHeader from "../../components/CustomHeader"; +import {Body, Content, H1, H3, Input, Item, Left, ListItem, Right, Text, Thumbnail} from 'native-base'; import {FlatList, Image, Platform, View} from "react-native"; import Touchable from 'react-native-platform-touchable'; import Menu, {MenuItem} from 'react-native-material-menu'; @@ -387,7 +386,7 @@ export default class ProximoListScreen extends React.Component { // console.log("rendering ProximoListScreen"); const nav = this.props.navigation; return ( - + @@ -400,7 +399,7 @@ export default class ProximoListScreen extends React.Component { style={{minHeight: 300, width: '100%'}} renderItem={this.renderItem} /> - + ); } } diff --git a/screens/Proximo/ProximoMainScreen.js b/screens/Proximo/ProximoMainScreen.js index 284f237..6bca253 100644 --- a/screens/Proximo/ProximoMainScreen.js +++ b/screens/Proximo/ProximoMainScreen.js @@ -2,7 +2,7 @@ import * as React from 'react'; import {Platform, View} from 'react-native' -import {Body, Left, ListItem, Right, Text, Container} from 'native-base'; +import {Body, Left, ListItem, Right, Text} from 'native-base'; import i18n from "i18n-js"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../../utils/ThemeManager"; @@ -40,14 +40,6 @@ export default class ProximoMainScreen extends React.Component { this.createDataset = this.createDataset.bind(this); } - componentDidMount() { - const button = this.getRightButton.bind(this); - this.props.navigation.setOptions({ - headerRight: button - , - }); - } - static sortFinalData(a: Object, b: Object) { let str1 = a.type.name.toLowerCase(); let str2 = b.type.name.toLowerCase(); @@ -66,6 +58,13 @@ export default class ProximoMainScreen extends React.Component { return 0; } + componentDidMount() { + const rightButton = this.getRightButton.bind(this); + this.props.navigation.setOptions({ + headerRight: rightButton, + }); + } + getKeyExtractor(item: Object) { return item !== undefined ? item.type['id'] : undefined; } @@ -180,6 +179,7 @@ export default class ProximoMainScreen extends React.Component { ); } + getRenderItem({item}: Object) { let dataToSend = { shouldFocusSearchBar: false, @@ -223,15 +223,13 @@ export default class ProximoMainScreen extends React.Component { render() { const nav = this.props.navigation; return ( - - - + ); } } diff --git a/screens/Proxiwash/ProxiwashAboutScreen.js b/screens/Proxiwash/ProxiwashAboutScreen.js index 0bcafce..14e6c1c 100644 --- a/screens/Proxiwash/ProxiwashAboutScreen.js +++ b/screens/Proxiwash/ProxiwashAboutScreen.js @@ -2,8 +2,7 @@ import * as React from 'react'; import {Image, View} from 'react-native'; -import {Body, Card, CardItem, Container, Content, H2, H3, Left, Tab, TabHeading, Tabs, Text} from 'native-base'; -import CustomHeader from "../../components/CustomHeader"; +import {Body, Card, CardItem, Content, H2, H3, Left, Tab, TabHeading, Tabs, Text} from 'native-base'; import i18n from "i18n-js"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../../utils/ThemeManager"; @@ -18,140 +17,130 @@ type Props = { export default class ProxiwashAboutScreen extends React.Component { render() { - const nav = this.props.navigation; return ( - - - - - - {i18n.t('proxiwashScreen.informationTab')} - - } - key={1} - style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> - - - - - {i18n.t('proxiwashScreen.description')} - - - - -

{i18n.t('proxiwashScreen.dryer')}

-
-
- - -

{i18n.t('proxiwashScreen.procedure')}

- {i18n.t('proxiwashScreen.dryerProcedure')} - -
- - -

{i18n.t('proxiwashScreen.tips')}

- {i18n.t('proxiwashScreen.dryerTips')} - -
-
- - - - -

{i18n.t('proxiwashScreen.washer')}

-
-
- - -

{i18n.t('proxiwashScreen.procedure')}

- {i18n.t('proxiwashScreen.washerProcedure')} - -
- - -

{i18n.t('proxiwashScreen.tips')}

- {i18n.t('proxiwashScreen.washerTips')} - -
-
-
-
- - - {i18n.t('proxiwashScreen.paymentTab')} - - } - key={2} - style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> - - - - - -

{i18n.t('proxiwashScreen.tariffs')}

-
-
- - - {i18n.t('proxiwashScreen.washersTariff')} - {i18n.t('proxiwashScreen.dryersTariff')} - - -
- - - - -

{i18n.t('proxiwashScreen.paymentMethods')}

-
-
- - - {i18n.t('proxiwashScreen.paymentMethodsDescription')} - - -
-
-
-
-
+ + + + {i18n.t('proxiwashScreen.informationTab')} + + } + key={1} + style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> + + + + + {i18n.t('proxiwashScreen.description')} + + + + +

{i18n.t('proxiwashScreen.dryer')}

+
+
+ + +

{i18n.t('proxiwashScreen.procedure')}

+ {i18n.t('proxiwashScreen.dryerProcedure')} + +
+ + +

{i18n.t('proxiwashScreen.tips')}

+ {i18n.t('proxiwashScreen.dryerTips')} + +
+
+ + + + +

{i18n.t('proxiwashScreen.washer')}

+
+
+ + +

{i18n.t('proxiwashScreen.procedure')}

+ {i18n.t('proxiwashScreen.washerProcedure')} + +
+ + +

{i18n.t('proxiwashScreen.tips')}

+ {i18n.t('proxiwashScreen.washerTips')} + +
+
+
+
+ + + {i18n.t('proxiwashScreen.paymentTab')} + + } + key={2} + style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> + + + + + +

{i18n.t('proxiwashScreen.tariffs')}

+
+
+ + + {i18n.t('proxiwashScreen.washersTariff')} + {i18n.t('proxiwashScreen.dryersTariff')} + + +
+ + + + +

{i18n.t('proxiwashScreen.paymentMethods')}

+
+
+ + + {i18n.t('proxiwashScreen.paymentMethodsDescription')} + + +
+
+
+
); } } diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js index d26b4bf..fd84a4f 100644 --- a/screens/Proxiwash/ProxiwashScreen.js +++ b/screens/Proxiwash/ProxiwashScreen.js @@ -12,7 +12,6 @@ import PlatformTouchable from "react-native-platform-touchable"; import Touchable from "react-native-platform-touchable"; import AsyncStorageManager from "../../utils/AsyncStorageManager"; import * as Expo from "expo"; -import BaseContainer from "../../components/BaseContainer"; const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json"; @@ -102,6 +101,10 @@ export default class ProxiwashScreen extends React.Component { * Setup notification channel for android and add listeners to detect notifications fired */ componentDidMount() { + const rightButton = this.getRightButton.bind(this); + this.props.navigation.setOptions({ + headerRight: rightButton, + }); if (AsyncStorageManager.getInstance().preferences.expoToken.current !== '') { // Get latest watchlist from server NotificationsManager.getMachineNotificationWatchlist((fetchedList) => { @@ -283,10 +286,13 @@ export default class ProxiwashScreen extends React.Component { this.props.navigation.navigate('ProxiwashAboutScreen'); } - getRightButton(): * { + getRightButton() { return ( { render() { const nav = this.props.navigation; return ( - - - + refreshTime={REFRESH_TIME} + fetchUrl={DATA_URL} + renderItem={this.getRenderItem} + updateErrorText={i18n.t("proxiwashScreen.listUpdateFail")}/> ); } diff --git a/screens/SelfMenuScreen.js b/screens/SelfMenuScreen.js index e92cb08..127224b 100644 --- a/screens/SelfMenuScreen.js +++ b/screens/SelfMenuScreen.js @@ -5,7 +5,6 @@ import {View} from 'react-native'; import {Card, CardItem, H2, H3, Text} from 'native-base'; import ThemeManager from "../utils/ThemeManager"; import i18n from "i18n-js"; -import BaseContainer from "../components/BaseContainer"; import WebSectionList from "../components/WebSectionList"; const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json"; @@ -95,7 +94,6 @@ export default class SelfMenuScreen extends React.Component { } getRenderSectionHeader({section}: Object) { - let title = ""; return ( { render() { const nav = this.props.navigation; return ( - - - + refreshTime={0} + fetchUrl={DATA_URL} + renderItem={this.getRenderItem} + renderSectionHeader={this.getRenderSectionHeader} + updateErrorText={i18n.t("homeScreen.listUpdateFail")} + stickyHeader={true}/> ); } } diff --git a/screens/SettingsScreen.js b/screens/SettingsScreen.js index ce49bc2..20ca284 100644 --- a/screens/SettingsScreen.js +++ b/screens/SettingsScreen.js @@ -1,21 +1,7 @@ // @flow import * as React from 'react'; -import { - Body, - Card, - CardItem, - CheckBox, - Container, - Content, - Left, - List, - ListItem, - Picker, - Right, - Text, -} from "native-base"; -import CustomHeader from "../components/CustomHeader"; +import {Body, Card, CardItem, CheckBox, Content, Left, List, ListItem, Picker, Right, Text,} from "native-base"; import ThemeManager from '../utils/ThemeManager'; import i18n from "i18n-js"; import {NavigationActions, StackActions} from "@react-navigation/native"; @@ -228,30 +214,26 @@ export default class SettingsScreen extends React.Component { } render() { - const nav = this.props.navigation; return ( - - - - - - {i18n.t('settingsScreen.generalCard')} - - - {this.getToggleItem(this.onToggleNightMode, 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))} - {SettingsScreen.getGeneralItem(this.getStartScreenPicker(), 'power', i18n.t('settingsScreen.startScreen'), i18n.t('settingsScreen.startScreenSub'))} - - - - - Proxiwash - - - {SettingsScreen.getGeneralItem(this.getProxiwashNotifPicker(), 'washing-machine', i18n.t('settingsScreen.proxiwashNotifReminder'), i18n.t('settingsScreen.proxiwashNotifReminderSub'))} - - - - + + + + {i18n.t('settingsScreen.generalCard')} + + + {this.getToggleItem(this.onToggleNightMode, 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))} + {SettingsScreen.getGeneralItem(this.getStartScreenPicker(), 'power', i18n.t('settingsScreen.startScreen'), i18n.t('settingsScreen.startScreenSub'))} + + + + + Proxiwash + + + {SettingsScreen.getGeneralItem(this.getProxiwashNotifPicker(), 'washing-machine', i18n.t('settingsScreen.proxiwashNotifReminder'), i18n.t('settingsScreen.proxiwashNotifReminderSub'))} + + + ); } diff --git a/screens/Websites/AvailableRoomScreen.js b/screens/Websites/AvailableRoomScreen.js index 17d372c..4ca15d4 100644 --- a/screens/Websites/AvailableRoomScreen.js +++ b/screens/Websites/AvailableRoomScreen.js @@ -11,9 +11,7 @@ type Props = { const ROOM_URL = 'http://planex.insa-toulouse.fr/salles.php'; const PC_URL = 'http://planex.insa-toulouse.fr/sallesInfo.php'; -const BIB_URL = 'https://bibbox.insa-toulouse.fr/'; const CUSTOM_CSS_GENERAL = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customMobile.css'; -const CUSTOM_CSS_Bib = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customBibMobile.css'; /** * Class defining the app's planex screen. @@ -32,17 +30,6 @@ export default class AvailableRoomScreen extends React.Component { 'let header = $(".table tbody tr:first");' + '$("table").prepend("");true;' + // Fix for crash on ios '$("thead").append(header);true;'; - - this.customBibInjectedJS = - 'document.querySelector(\'head\').innerHTML += \'\';' + - 'document.querySelector(\'head\').innerHTML += \'\';' + - 'if ($(".hero-unit-form").length > 0 && $("#customBackButton").length === 0)' + - '$(".hero-unit-form").append("' + - '
' + - '' + - '' + - '' + - '
");true;'; } render() { @@ -63,12 +50,6 @@ export default class AvailableRoomScreen extends React.Component { name: i18n.t('availableRoomScreen.computerRoom'), customJS: this.customInjectedJS }, - { - url: BIB_URL, - icon: 'book', - name: i18n.t('availableRoomScreen.bibRoom'), - customJS: this.customBibInjectedJS - }, ]} customInjectedJS={this.customInjectedJS} headerTitle={i18n.t('screens.availableRooms')} diff --git a/screens/Websites/BibScreen.js b/screens/Websites/BibScreen.js new file mode 100644 index 0000000..b3a6642 --- /dev/null +++ b/screens/Websites/BibScreen.js @@ -0,0 +1,66 @@ +// @flow + +import * as React from 'react'; +import WebViewScreen from "../../components/WebViewScreen"; +import i18n from "i18n-js"; + +type Props = { + navigation: Object, +} + +const BIB_URL = 'https://bibbox.insa-toulouse.fr/'; +const CUSTOM_CSS_GENERAL = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customMobile.css'; +const CUSTOM_CSS_Bib = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customBibMobile.css'; + +/** + * Class defining the app's planex screen. + * This screen uses a webview to render the planex page + */ +export default class AvailableRoomScreen extends React.Component { + + customInjectedJS: string; + customBibInjectedJS: string; + + constructor() { + super(); + this.customInjectedJS = + 'document.querySelector(\'head\').innerHTML += \'\';' + + 'document.querySelector(\'head\').innerHTML += \'\';' + + 'let header = $(".table tbody tr:first");' + + '$("table").prepend("");true;' + // Fix for crash on ios + '$("thead").append(header);true;'; + + this.customBibInjectedJS = + 'document.querySelector(\'head\').innerHTML += \'\';' + + 'document.querySelector(\'head\').innerHTML += \'\';' + + 'if ($(".hero-unit-form").length > 0 && $("#customBackButton").length === 0)' + + '$(".hero-unit-form").append("' + + '
' + + '' + + '' + + '' + + '
");true;'; + } + + render() { + const nav = this.props.navigation; + return ( + + ); + } +} + From 1f64c734aa27f40b3c1e4bc15ac061a8a5fe2039 Mon Sep 17 00:00:00 2001 From: keplyx Date: Fri, 6 Mar 2020 23:15:01 +0100 Subject: [PATCH 09/66] Replaced native base with react native paper --- App.js | 38 +- components/CustomIntroSlider.js | 2 +- components/DashboardItem.js | 205 ++++---- components/Sidebar.js | 47 +- components/WebSectionList.js | 17 +- components/WebViewScreen.js | 56 +-- native-base-theme/components/Badge.js | 39 -- native-base-theme/components/Body.js | 11 - native-base-theme/components/Button.js | 386 --------------- native-base-theme/components/Card.js | 37 -- native-base-theme/components/CardItem.js | 198 -------- native-base-theme/components/CheckBox.js | 38 -- native-base-theme/components/Container.js | 17 - native-base-theme/components/Content.js | 14 - native-base-theme/components/Fab.js | 25 - native-base-theme/components/Footer.js | 119 ----- native-base-theme/components/FooterTab.js | 79 ---- native-base-theme/components/Form.js | 86 ---- native-base-theme/components/H1.js | 13 - native-base-theme/components/H2.js | 13 - native-base-theme/components/H3.js | 13 - native-base-theme/components/Header.js | 419 ---------------- native-base-theme/components/Icon.js | 12 - native-base-theme/components/Input.js | 19 - native-base-theme/components/InputGroup.js | 132 ------ native-base-theme/components/Item.js | 241 ---------- native-base-theme/components/Label.js | 12 - native-base-theme/components/Left.js | 11 - native-base-theme/components/ListItem.js | 446 ------------------ .../components/Picker.android.js | 14 - native-base-theme/components/Picker.ios.js | 7 - native-base-theme/components/Picker.js | 14 - native-base-theme/components/Radio.js | 31 -- native-base-theme/components/Right.js | 14 - native-base-theme/components/Segment.js | 57 --- native-base-theme/components/Separator.js | 49 -- native-base-theme/components/Spinner.js | 9 - native-base-theme/components/Subtitle.js | 19 - native-base-theme/components/SwipeRow.js | 46 -- native-base-theme/components/Switch.js | 9 - native-base-theme/components/Tab.js | 10 - native-base-theme/components/TabBar.js | 57 --- native-base-theme/components/TabContainer.js | 26 - native-base-theme/components/TabHeading.js | 40 -- native-base-theme/components/Text.js | 17 - native-base-theme/components/Textarea.js | 25 - native-base-theme/components/Thumbnail.js | 40 -- native-base-theme/components/Title.js | 21 - native-base-theme/components/Toast.js | 41 -- native-base-theme/components/View.js | 13 - native-base-theme/components/index.js | 249 ---------- native-base-theme/variables/commonColor.js | 311 ------------ native-base-theme/variables/material.js | 304 ------------ native-base-theme/variables/platform.js | 362 -------------- native-base-theme/variables/platformDark.js | 362 -------------- navigation/DrawerNavigator.js | 27 +- navigation/MainTabNavigator.js | 17 +- package.json | 5 +- screens/About/AboutDependenciesScreen.js | 16 +- screens/About/AboutScreen.js | 180 ++++--- screens/DebugScreen.js | 133 +++--- screens/HomeScreen.js | 87 ++-- screens/PlanningDisplayScreen.js | 60 ++- screens/PlanningScreen.js | 119 ++--- screens/Proximo/ProximoAboutScreen.js | 84 ++-- screens/Proximo/ProximoListScreen.js | 145 ++---- screens/Proximo/ProximoMainScreen.js | 71 +-- screens/Proxiwash/ProxiwashAboutScreen.js | 190 +++----- screens/Proxiwash/ProxiwashScreen.js | 133 ++---- screens/SelfMenuScreen.js | 34 +- screens/SettingsScreen.js | 169 +++---- utils/ThemeManager.js | 130 +++-- utils/WebDataManager.js | 19 +- 73 files changed, 828 insertions(+), 5683 deletions(-) delete mode 100644 native-base-theme/components/Badge.js delete mode 100644 native-base-theme/components/Body.js delete mode 100644 native-base-theme/components/Button.js delete mode 100644 native-base-theme/components/Card.js delete mode 100644 native-base-theme/components/CardItem.js delete mode 100644 native-base-theme/components/CheckBox.js delete mode 100644 native-base-theme/components/Container.js delete mode 100644 native-base-theme/components/Content.js delete mode 100644 native-base-theme/components/Fab.js delete mode 100644 native-base-theme/components/Footer.js delete mode 100644 native-base-theme/components/FooterTab.js delete mode 100644 native-base-theme/components/Form.js delete mode 100644 native-base-theme/components/H1.js delete mode 100644 native-base-theme/components/H2.js delete mode 100644 native-base-theme/components/H3.js delete mode 100644 native-base-theme/components/Header.js delete mode 100644 native-base-theme/components/Icon.js delete mode 100644 native-base-theme/components/Input.js delete mode 100644 native-base-theme/components/InputGroup.js delete mode 100644 native-base-theme/components/Item.js delete mode 100644 native-base-theme/components/Label.js delete mode 100644 native-base-theme/components/Left.js delete mode 100644 native-base-theme/components/ListItem.js delete mode 100644 native-base-theme/components/Picker.android.js delete mode 100644 native-base-theme/components/Picker.ios.js delete mode 100644 native-base-theme/components/Picker.js delete mode 100644 native-base-theme/components/Radio.js delete mode 100644 native-base-theme/components/Right.js delete mode 100644 native-base-theme/components/Segment.js delete mode 100644 native-base-theme/components/Separator.js delete mode 100644 native-base-theme/components/Spinner.js delete mode 100644 native-base-theme/components/Subtitle.js delete mode 100644 native-base-theme/components/SwipeRow.js delete mode 100644 native-base-theme/components/Switch.js delete mode 100644 native-base-theme/components/Tab.js delete mode 100644 native-base-theme/components/TabBar.js delete mode 100644 native-base-theme/components/TabContainer.js delete mode 100644 native-base-theme/components/TabHeading.js delete mode 100644 native-base-theme/components/Text.js delete mode 100644 native-base-theme/components/Textarea.js delete mode 100644 native-base-theme/components/Thumbnail.js delete mode 100644 native-base-theme/components/Title.js delete mode 100644 native-base-theme/components/Toast.js delete mode 100644 native-base-theme/components/View.js delete mode 100644 native-base-theme/components/index.js delete mode 100644 native-base-theme/variables/commonColor.js delete mode 100644 native-base-theme/variables/material.js delete mode 100644 native-base-theme/variables/platform.js delete mode 100644 native-base-theme/variables/platformDark.js diff --git a/App.js b/App.js index 3c146e9..f54c899 100644 --- a/App.js +++ b/App.js @@ -2,18 +2,17 @@ import * as React from 'react'; import {Platform, StatusBar} from 'react-native'; -import {Root, StyleProvider} from 'native-base'; import LocaleManager from './utils/LocaleManager'; import * as Font from 'expo-font'; -import {clearThemeCache} from 'native-base-shoutem-theme'; import AsyncStorageManager from "./utils/AsyncStorageManager"; import CustomIntroSlider from "./components/CustomIntroSlider"; import {SplashScreen} from 'expo'; import ThemeManager from './utils/ThemeManager'; -import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import {NavigationContainer} from '@react-navigation/native'; +import {createStackNavigator} from '@react-navigation/stack'; import DrawerNavigator from './navigation/DrawerNavigator'; import NotificationsManager from "./utils/NotificationsManager"; +import {Provider as PaperProvider} from 'react-native-paper'; type Props = {}; @@ -24,6 +23,17 @@ type State = { currentTheme: ?Object, }; +const MyTheme = { + dark: false, + colors: { + primary: 'rgb(255, 45, 85)', + background: 'rgb(242, 242, 242)', + card: 'rgb(255, 255, 255)', + text: 'rgb(28, 28, 30)', + border: 'rgb(199, 199, 204)', + }, +}; + const Stack = createStackNavigator(); export default class App extends React.Component { @@ -51,7 +61,6 @@ export default class App extends React.Component { currentTheme: ThemeManager.getCurrentTheme() }); this.setupStatusBar(); - clearThemeCache(); } setupStatusBar() { @@ -84,9 +93,6 @@ export default class App extends React.Component { // Wait for custom fonts to be loaded before showing the app // console.log("loading Fonts"); SplashScreen.preventAutoHide(); - await Font.loadAsync({ - 'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'), - }); // console.log("loading preferences"); await AsyncStorageManager.getInstance().loadPreferences(); ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme()); @@ -122,15 +128,13 @@ export default class App extends React.Component { } else { return ( - - - - - - - - - + + + + + + + ); } } diff --git a/components/CustomIntroSlider.js b/components/CustomIntroSlider.js index 55552a8..bde99f9 100644 --- a/components/CustomIntroSlider.js +++ b/components/CustomIntroSlider.js @@ -4,7 +4,7 @@ import * as React from 'react'; import {LinearGradient} from "expo-linear-gradient"; import {Image, StyleSheet, View} from "react-native"; import {MaterialCommunityIcons} from "@expo/vector-icons"; -import {Text} from "native-base"; +import {Text} from "react-native-paper"; import i18n from 'i18n-js'; import AppIntroSlider from "react-native-app-intro-slider"; diff --git a/components/DashboardItem.js b/components/DashboardItem.js index 1d5b2f4..adedc27 100644 --- a/components/DashboardItem.js +++ b/components/DashboardItem.js @@ -1,16 +1,13 @@ // @flow import * as React from 'react'; -import {Body, Card, CardItem, H3, Left, Text, Thumbnail} from "native-base"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import {View} from "react-native"; import ThemeManager from "../utils/ThemeManager"; import HTML from "react-native-render-html"; import {LinearGradient} from "expo-linear-gradient"; -import PlatformTouchable from "react-native-platform-touchable"; import i18n from "i18n-js"; - -const CARD_BORDER_RADIUS = 10; +import {Avatar, Card, Text, Title} from 'react-native-paper'; type Props = { isAvailable: boolean, @@ -72,74 +69,73 @@ export default class DashboardItem extends React.Component { getEventPreviewContainer() { if (this.props.displayEvent !== undefined && this.props.displayEvent !== null) { + const hasImage = this.props.displayEvent['logo'] !== '' && this.props.displayEvent['logo'] !== null; return ( - - - - {this.props.displayEvent['logo'] !== '' && this.props.displayEvent['logo'] !== null ? - : - } - - {this.props.displayEvent['title']} - {this.getFormattedEventTime(this.props.displayEvent)} - - - - - 50 ? 70 : 20, + + {hasImage ? + + + } + /> : + } + + 70 ? 100 : 50, overflow: 'hidden', }}> " + this.props.displayEvent['description'] + ""} tagsStyles={{ p: { - color: ThemeManager.getCurrentThemeVariables().textColor, - fontSize: ThemeManager.getCurrentThemeVariables().fontSizeBase, + color: ThemeManager.getCurrentThemeVariables().text, }, - div: {color: ThemeManager.getCurrentThemeVariables().textColor}, + div: {color: ThemeManager.getCurrentThemeVariables().text}, }}/> - - + + + - - {i18n.t("homeScreen.dashboard.seeMore")} - - - - - - - + {i18n.t("homeScreen.dashboard.seeMore")} + + +
+ + + ); } else return @@ -152,7 +148,7 @@ export default class DashboardItem extends React.Component { color={ this.props.isAvailable ? this.props.color : - ThemeManager.getCurrentThemeVariables().textDisabledColor + ThemeManager.getCurrentThemeVariables().textDisabled } size={this.props.isSquare ? 50 : 40}/> ); @@ -163,19 +159,19 @@ export default class DashboardItem extends React.Component { -

{this.props.title} -

+ @@ -188,21 +184,12 @@ export default class DashboardItem extends React.Component { getContent() { if (this.props.isSquare) { return ( - + {this.getIcon()} {this.getText()} - - ); - } else { - return ( - - {this.getIcon()} - - {this.getText()} - - + ); } } @@ -217,33 +204,41 @@ export default class DashboardItem extends React.Component { else marginRight = 0 } + const color = this.props.isAvailable ? + ThemeManager.getCurrentThemeVariables().text : + ThemeManager.getCurrentThemeVariables().textDisabled; return ( - - + + {this.props.isSquare ? + + {this.getContent()} + + : - - {this.getContent()} - - {this.getEventPreviewContainer()} - - + } + /> + + {this.getEventPreviewContainer()} + +
} ); } diff --git a/components/Sidebar.js b/components/Sidebar.js index 353d15a..76ad5f0 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -1,17 +1,19 @@ // @flow import * as React from 'react'; -import {Dimensions, FlatList, Image,Platform, StyleSheet} from 'react-native'; -import {Container, Left, ListItem, Text} from "native-base"; +import {Dimensions, FlatList, Image, Platform, StyleSheet, View} from 'react-native'; import i18n from "i18n-js"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../utils/ThemeManager"; import * as WebBrowser from 'expo-web-browser'; +import {List} from 'react-native-paper'; +import {DrawerItem} from '@react-navigation/drawer'; const deviceWidth = Dimensions.get("window").width; type Props = { navigation: Object, + state: Object, }; type State = { @@ -142,32 +144,29 @@ export default class SideBar extends React.Component { getRenderItem({item}: Object) { const onListItemPress = this.onListItemPress.bind(this, item); - // return ; if (item.icon !== undefined) { return ( - + } selected={this.state.active === item.route} onPress={onListItemPress} - > - - - - {item.name} - - - + style={{ + marginLeft: 0, + marginRight: 0, + padding: 0, + borderRadius: 0 + }} + /> ); } else { return ( - - {item.name} - + ); } @@ -176,9 +175,7 @@ export default class SideBar extends React.Component { render() { console.log("rendering SideBar"); return ( - + { keyExtractor={this.listKeyExtractor} renderItem={this.getRenderItem} /> - + ); } } diff --git a/components/WebSectionList.js b/components/WebSectionList.js index 812196e..497b33e 100644 --- a/components/WebSectionList.js +++ b/components/WebSectionList.js @@ -1,12 +1,12 @@ // @flow import * as React from 'react'; -import {H3, Spinner, View} from "native-base"; import ThemeManager from '../utils/ThemeManager'; import WebDataManager from "../utils/WebDataManager"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import i18n from "i18n-js"; -import {RefreshControl, SectionList} from "react-native"; +import {ActivityIndicator, Subheading} from 'react-native-paper'; +import {RefreshControl, SectionList, View} from "react-native"; type Props = { navigation: Object, @@ -148,22 +148,25 @@ export default class WebSectionList extends React.Component { marginBottom: 20 }}> {this.state.refreshing ? - + : } + color={ThemeManager.getCurrentThemeVariables().textDisabled}/>}
-

{item.text} -

+ ); } diff --git a/components/WebViewScreen.js b/components/WebViewScreen.js index fe88437..76bdeae 100644 --- a/components/WebViewScreen.js +++ b/components/WebViewScreen.js @@ -1,12 +1,12 @@ // @flow import * as React from 'react'; -import {Platform, View} from 'react-native'; -import {Container, Spinner, Tab, TabHeading, Tabs, Text} from 'native-base'; +import {View} from 'react-native'; import WebView from "react-native-webview"; import Touchable from "react-native-platform-touchable"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../utils/ThemeManager"; +import {ActivityIndicator} from 'react-native-paper'; type Props = { navigation: Object, @@ -62,9 +62,9 @@ export default class WebViewScreen extends React.Component { style={{padding: 6}} onPress={clickAction}> + size={26} + color={ThemeManager.getCurrentThemeVariables().text}/> ); } @@ -112,7 +112,7 @@ export default class WebViewScreen extends React.Component { getRenderLoading() { return ( { alignItems: 'center', justifyContent: 'center' }}> - + ); } @@ -144,50 +147,11 @@ export default class WebViewScreen extends React.Component { ); } - getTabbedWebview() { - let tabbedView = []; - for (let i = 0; i < this.props.data.length; i++) { - tabbedView.push( - - - {this.props.data[i]['name']} - } - key={this.props.data[i]['url']} - style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> - {this.getWebview(this.props.data[i])} - ); - } - return tabbedView; - } - render() { // console.log("rendering WebViewScreen"); - const nav = this.props.navigation; this.webviewArray = []; return ( - - {this.props.data.length === 1 ? - this.getWebview(this.props.data[0]) : - - {this.getTabbedWebview()} - } - + this.getWebview(this.props.data[0]) ); } } diff --git a/native-base-theme/components/Badge.js b/native-base-theme/components/Badge.js deleted file mode 100644 index 8a38fc0..0000000 --- a/native-base-theme/components/Badge.js +++ /dev/null @@ -1,39 +0,0 @@ -// @flow - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const badgeTheme = { - '.primary': { - backgroundColor: variables.buttonPrimaryBg - }, - '.warning': { - backgroundColor: variables.buttonWarningBg - }, - '.info': { - backgroundColor: variables.buttonInfoBg - }, - '.success': { - backgroundColor: variables.buttonSuccessBg - }, - '.danger': { - backgroundColor: variables.buttonDangerBg - }, - 'NativeBase.Text': { - color: variables.badgeColor, - fontSize: variables.fontSizeBase, - lineHeight: variables.lineHeight - 1, - textAlign: 'center', - paddingHorizontal: 3 - }, - backgroundColor: variables.badgeBg, - padding: variables.badgePadding, - paddingHorizontal: 6, - alignSelf: 'flex-start', - justifyContent: variables.platform === PLATFORM.IOS ? 'center' : undefined, - borderRadius: 13.5, - height: 27 - }; - return badgeTheme; -}; diff --git a/native-base-theme/components/Body.js b/native-base-theme/components/Body.js deleted file mode 100644 index 6de0c88..0000000 --- a/native-base-theme/components/Body.js +++ /dev/null @@ -1,11 +0,0 @@ -// @flow - -export default () => { - const bodyTheme = { - flex: 1, - alignItems: 'center', - alignSelf: 'center' - }; - - return bodyTheme; -}; diff --git a/native-base-theme/components/Button.js b/native-base-theme/components/Button.js deleted file mode 100644 index 507b6ec..0000000 --- a/native-base-theme/components/Button.js +++ /dev/null @@ -1,386 +0,0 @@ -// @flow - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const platformStyle = variables.platformStyle; - const platform = variables.platform; - const darkCommon = { - 'NativeBase.Text': { - color: variables.brandDark - }, - 'NativeBase.Icon': { - color: variables.brandDark - }, - 'NativeBase.IconNB': { - color: variables.brandDark - } - }; - const lightCommon = { - 'NativeBase.Text': { - color: variables.brandLight - }, - 'NativeBase.Icon': { - color: variables.brandLight - }, - 'NativeBase.IconNB': { - color: variables.brandLight - } - }; - const primaryCommon = { - 'NativeBase.Text': { - color: variables.buttonPrimaryBg - }, - 'NativeBase.Icon': { - color: variables.buttonPrimaryBg - }, - 'NativeBase.IconNB': { - color: variables.buttonPrimaryBg - } - }; - const successCommon = { - 'NativeBase.Text': { - color: variables.buttonSuccessBg - }, - 'NativeBase.Icon': { - color: variables.buttonSuccessBg - }, - 'NativeBase.IconNB': { - color: variables.buttonSuccessBg - } - }; - const infoCommon = { - 'NativeBase.Text': { - color: variables.buttonInfoBg - }, - 'NativeBase.Icon': { - color: variables.buttonInfoBg - }, - 'NativeBase.IconNB': { - color: variables.buttonInfoBg - } - }; - const warningCommon = { - 'NativeBase.Text': { - color: variables.buttonWarningBg - }, - 'NativeBase.Icon': { - color: variables.buttonWarningBg - }, - 'NativeBase.IconNB': { - color: variables.buttonWarningBg - } - }; - const dangerCommon = { - 'NativeBase.Text': { - color: variables.buttonDangerBg - }, - 'NativeBase.Icon': { - color: variables.buttonDangerBg - }, - 'NativeBase.IconNB': { - color: variables.buttonDangerBg - } - }; - const buttonTheme = { - '.disabled': { - '.transparent': { - backgroundColor: 'transparent', - 'NativeBase.Text': { - color: variables.buttonDisabledBg - }, - 'NativeBase.Icon': { - color: variables.buttonDisabledBg - }, - 'NativeBase.IconNB': { - color: variables.buttonDisabledBg - } - }, - 'NativeBase.Icon': { - color: variables.brandLight - }, - 'NativeBase.IconNB': { - color: variables.brandLight - }, - backgroundColor: variables.buttonDisabledBg - }, - '.bordered': { - '.dark': { - ...darkCommon, - backgroundColor: 'transparent', - borderColor: variables.brandDark, - borderWidth: variables.borderWidth * 2 - }, - '.light': { - ...lightCommon, - backgroundColor: 'transparent', - borderColor: variables.brandLight, - borderWidth: variables.borderWidth * 2 - }, - '.primary': { - ...primaryCommon, - backgroundColor: 'transparent', - borderColor: variables.buttonPrimaryBg, - borderWidth: variables.borderWidth * 2 - }, - '.success': { - ...successCommon, - backgroundColor: 'transparent', - borderColor: variables.buttonSuccessBg, - borderWidth: variables.borderWidth * 2 - }, - '.info': { - ...infoCommon, - backgroundColor: 'transparent', - borderColor: variables.buttonInfoBg, - borderWidth: variables.borderWidth * 2 - }, - '.warning': { - ...warningCommon, - backgroundColor: 'transparent', - borderColor: variables.buttonWarningBg, - borderWidth: variables.borderWidth * 2 - }, - '.danger': { - ...dangerCommon, - backgroundColor: 'transparent', - borderColor: variables.buttonDangerBg, - borderWidth: variables.borderWidth * 2 - }, - '.disabled': { - backgroundColor: 'transparent', - borderColor: variables.buttonDisabledBg, - borderWidth: variables.borderWidth * 2, - 'NativeBase.Text': { - color: variables.buttonDisabledBg - } - }, - ...primaryCommon, - borderWidth: variables.borderWidth * 2, - elevation: null, - shadowColor: null, - shadowOffset: null, - shadowOpacity: null, - shadowRadius: null, - backgroundColor: 'transparent' - }, - - '.dark': { - '.bordered': { - ...darkCommon - }, - backgroundColor: variables.brandDark - }, - '.light': { - '.transparent': { - ...lightCommon, - backgroundColor: 'transparent' - }, - '.bordered': { - ...lightCommon - }, - ...darkCommon, - backgroundColor: variables.brandLight - }, - - '.primary': { - '.bordered': { - ...primaryCommon - }, - backgroundColor: variables.buttonPrimaryBg - }, - - '.success': { - '.bordered': { - ...successCommon - }, - backgroundColor: variables.buttonSuccessBg - }, - - '.info': { - '.bordered': { - ...infoCommon - }, - backgroundColor: variables.buttonInfoBg - }, - - '.warning': { - '.bordered': { - ...warningCommon - }, - backgroundColor: variables.buttonWarningBg - }, - - '.danger': { - '.bordered': { - ...dangerCommon - }, - backgroundColor: variables.buttonDangerBg - }, - - '.block': { - justifyContent: 'center', - alignSelf: 'stretch' - }, - - '.full': { - justifyContent: 'center', - alignSelf: 'stretch', - borderRadius: 0 - }, - - '.rounded': { - borderRadius: variables.borderRadiusLarge - }, - - '.transparent': { - backgroundColor: 'transparent', - elevation: 0, - shadowColor: null, - shadowOffset: null, - shadowRadius: null, - shadowOpacity: null, - ...primaryCommon, - '.dark': { - ...darkCommon, - }, - '.danger': { - ...dangerCommon, - }, - '.warning': { - ...warningCommon, - }, - '.info': { - ...infoCommon, - }, - '.primary': { - ...primaryCommon, - }, - '.success': { - ...successCommon, - }, - '.light': { - ...lightCommon, - }, - '.disabled': { - backgroundColor: 'transparent', - borderColor: variables.buttonDisabledBg, - borderWidth: variables.borderWidth * 2, - 'NativeBase.Text': { - color: variables.buttonDisabledBg - }, - 'NativeBase.Icon': { - color: variables.buttonDisabledBg - }, - 'NativeBase.IconNB': { - color: variables.buttonDisabledBg - } - } - }, - - '.small': { - height: 30, - 'NativeBase.Text': { - fontSize: 14 - }, - 'NativeBase.Icon': { - fontSize: 20, - paddingTop: 0 - }, - 'NativeBase.IconNB': { - fontSize: 20, - paddingTop: 0 - } - }, - - '.large': { - height: 60, - 'NativeBase.Text': { - fontSize: 22 - } - }, - - '.capitalize': {}, - - '.vertical': { - flexDirection: 'column', - height: null - }, - - 'NativeBase.Text': { - fontFamily: variables.buttonFontFamily, - marginLeft: 0, - marginRight: 0, - color: variables.buttonTextColor, - fontSize: variables.buttonTextSize, - paddingHorizontal: 16, - backgroundColor: 'transparent' - }, - - 'NativeBase.Icon': { - color: variables.buttonTextColor, - fontSize: 24, - marginHorizontal: 16, - paddingTop: platform === PLATFORM.IOS ? 2 : undefined - }, - 'NativeBase.IconNB': { - color: variables.buttonTextColor, - fontSize: 24, - marginHorizontal: 16, - paddingTop: platform === PLATFORM.IOS ? 2 : undefined - }, - - '.iconLeft': { - 'NativeBase.Text': { - marginLeft: 0 - }, - 'NativeBase.IconNB': { - marginRight: 0, - marginLeft: 16 - }, - 'NativeBase.Icon': { - marginRight: 0, - marginLeft: 16 - } - }, - '.iconRight': { - 'NativeBase.Text': { - marginRight: 0 - }, - 'NativeBase.IconNB': { - marginLeft: 0, - marginRight: 16 - }, - 'NativeBase.Icon': { - marginLeft: 0, - marginRight: 16 - } - }, - '.picker': { - 'NativeBase.Text': { - '.note': { - fontSize: 16, - lineHeight: null - } - } - }, - paddingVertical: variables.buttonPadding, - backgroundColor: variables.buttonPrimaryBg, - borderRadius: variables.borderRadiusBase, - borderColor: variables.buttonPrimaryBg, - borderWidth: null, - height: 45, - flexDirection: 'row', - elevation: 2, - shadowColor: - platformStyle === PLATFORM.MATERIAL ? variables.brandDark : undefined, - shadowOffset: - platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined, - shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined, - shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined, - alignItems: 'center', - justifyContent: 'space-between' - }; - return buttonTheme; -}; diff --git a/native-base-theme/components/Card.js b/native-base-theme/components/Card.js deleted file mode 100644 index de4f9f4..0000000 --- a/native-base-theme/components/Card.js +++ /dev/null @@ -1,37 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const cardTheme = { - '.transparent': { - shadowColor: null, - shadowOffset: null, - shadowOpacity: null, - shadowRadius: null, - elevation: null, - backgroundColor: 'transparent', - borderWidth: 0 - }, - '.noShadow': { - shadowColor: null, - shadowOffset: null, - shadowOpacity: null, - elevation: null - }, - marginVertical: 5, - marginHorizontal: 2, - borderWidth: variables.borderWidth, - borderRadius: variables.cardBorderRadius, - borderColor: variables.cardBorderColor, - flexWrap: 'nowrap', - backgroundColor: variables.cardDefaultBg, - shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.1, - shadowRadius: 1.5, - elevation: 3 - }; - - return cardTheme; -}; diff --git a/native-base-theme/components/CardItem.js b/native-base-theme/components/CardItem.js deleted file mode 100644 index bfb1757..0000000 --- a/native-base-theme/components/CardItem.js +++ /dev/null @@ -1,198 +0,0 @@ -// @flow - -import { StyleSheet } from 'react-native'; - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const platform = variables.platform; - const transparentBtnCommon = { - 'NativeBase.Text': { - fontSize: variables.DefaultFontSize - 3, - color: variables.sTabBarActiveTextColor - }, - 'NativeBase.Icon': { - fontSize: variables.iconFontSize - 10, - color: variables.sTabBarActiveTextColor, - marginHorizontal: null - }, - 'NativeBase.IconNB': { - fontSize: variables.iconFontSize - 10, - color: variables.sTabBarActiveTextColor - }, - paddingVertical: null, - paddingHorizontal: null - }; - - const cardItemTheme = { - 'NativeBase.Left': { - 'NativeBase.Body': { - 'NativeBase.Text': { - '.note': { - color: variables.listNoteColor, - fontWeight: '400', - marginRight: 20 - } - }, - flex: 1, - marginLeft: 10, - alignItems: null - }, - 'NativeBase.Icon': { - fontSize: variables.iconFontSize - }, - 'NativeBase.IconNB': { - fontSize: variables.iconFontSize - }, - 'NativeBase.Text': { - marginLeft: 10, - alignSelf: 'center' - }, - 'NativeBase.Button': { - '.transparent': { - ...transparentBtnCommon, - paddingRight: variables.cardItemPadding + 5 - } - }, - flex: 1, - flexDirection: 'row', - alignItems: 'center' - }, - '.content': { - 'NativeBase.Text': { - color: platform === PLATFORM.IOS ? '#555' : '#222', - fontSize: variables.DefaultFontSize - 2 - } - }, - '.cardBody': { - padding: -5, - 'NativeBase.Text': { - marginTop: 5 - } - }, - 'NativeBase.Body': { - 'NativeBase.Text': { - '.note': { - color: variables.listNoteColor, - fontWeight: '200', - marginRight: 20 - } - }, - 'NativeBase.Button': { - '.transparent': { - ...transparentBtnCommon, - paddingRight: variables.cardItemPadding + 5, - alignSelf: 'stretch' - } - }, - flex: 1, - alignSelf: 'stretch', - alignItems: 'flex-start' - }, - 'NativeBase.Right': { - 'NativeBase.Badge': { - alignSelf: null - }, - 'NativeBase.Button': { - '.transparent': { - ...transparentBtnCommon - }, - alignSelf: null - }, - 'NativeBase.Icon': { - alignSelf: null, - fontSize: variables.iconFontSize - 8, - color: variables.cardBorderColor - }, - 'NativeBase.IconNB': { - alignSelf: null, - fontSize: variables.iconFontSize - 8, - color: variables.cardBorderColor - }, - 'NativeBase.Text': { - fontSize: variables.DefaultFontSize - 1, - alignSelf: null - }, - 'NativeBase.Thumbnail': { - alignSelf: null - }, - 'NativeBase.Image': { - alignSelf: null - }, - 'NativeBase.Radio': { - alignSelf: null - }, - 'NativeBase.Checkbox': { - alignSelf: null - }, - 'NativeBase.Switch': { - alignSelf: null - }, - flex: 0.8 - }, - '.header': { - 'NativeBase.Text': { - fontSize: 16, - fontWeight: platform === PLATFORM.IOS ? '600' : '500' - }, - '.bordered': { - 'NativeBase.Text': { - color: variables.brandPrimary, - fontWeight: platform === PLATFORM.IOS ? '600' : '500' - }, - borderBottomWidth: variables.borderWidth - }, - borderBottomWidth: null, - paddingVertical: variables.cardItemPadding + 5 - }, - '.footer': { - 'NativeBase.Text': { - fontSize: 16, - fontWeight: platform === PLATFORM.IOS ? '600' : '500' - }, - '.bordered': { - 'NativeBase.Text': { - color: variables.brandPrimary, - fontWeight: platform === PLATFORM.IOS ? '600' : '500' - }, - borderTopWidth: variables.borderWidth - }, - borderBottomWidth: null - }, - 'NativeBase.Text': { - '.note': { - color: variables.listNoteColor, - fontWeight: '200' - } - }, - 'NativeBase.Icon': { - width: variables.iconFontSize + 5, - fontSize: variables.iconFontSize - 2 - }, - 'NativeBase.IconNB': { - width: variables.iconFontSize + 5, - fontSize: variables.iconFontSize - 2 - }, - '.bordered': { - borderBottomWidth: StyleSheet.hairlineWidth, - borderColor: variables.cardBorderColor - }, - '.first': { - borderTopLeftRadius: variables.cardBorderRadius, - borderTopRightRadius: variables.cardBorderRadius - }, - '.last': { - borderBottomLeftRadius: variables.cardBorderRadius, - borderBottomRightRadius: variables.cardBorderRadius - }, - flexDirection: 'row', - alignItems: 'center', - borderRadius: variables.cardBorderRadius, - padding: variables.cardItemPadding + 5, - paddingVertical: variables.cardItemPadding, - backgroundColor: variables.cardDefaultBg - }; - - return cardItemTheme; -}; diff --git a/native-base-theme/components/CheckBox.js b/native-base-theme/components/CheckBox.js deleted file mode 100644 index 7a858c3..0000000 --- a/native-base-theme/components/CheckBox.js +++ /dev/null @@ -1,38 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const checkBoxTheme = { - '.checked': { - 'NativeBase.Icon': { - color: variables.checkboxTickColor - }, - 'NativeBase.IconNB': { - color: variables.checkboxTickColor - } - }, - 'NativeBase.Icon': { - color: 'transparent', - lineHeight: variables.CheckboxIconSize, - marginTop: variables.CheckboxIconMarginTop, - fontSize: variables.CheckboxFontSize - }, - 'NativeBase.IconNB': { - color: 'transparent', - lineHeight: variables.CheckboxIconSize, - marginTop: variables.CheckboxIconMarginTop, - fontSize: variables.CheckboxFontSize - }, - borderRadius: variables.CheckboxRadius, - overflow: 'hidden', - width: variables.checkboxSize, - height: variables.checkboxSize, - borderWidth: variables.CheckboxBorderWidth, - paddingLeft: variables.CheckboxPaddingLeft - 1, - paddingBottom: variables.CheckboxPaddingBottom, - left: 10 - }; - - return checkBoxTheme; -}; diff --git a/native-base-theme/components/Container.js b/native-base-theme/components/Container.js deleted file mode 100644 index cfd7e28..0000000 --- a/native-base-theme/components/Container.js +++ /dev/null @@ -1,17 +0,0 @@ -// @flow - -import { Platform, Dimensions } from 'react-native'; - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -const deviceHeight = Dimensions.get('window').height; -export default (variables /* : * */ = variable) => { - const theme = { - flex: 1, - height: Platform.OS === PLATFORM.IOS ? deviceHeight : deviceHeight - 20, - backgroundColor: variables.containerBgColor - }; - - return theme; -}; diff --git a/native-base-theme/components/Content.js b/native-base-theme/components/Content.js deleted file mode 100644 index 97bd81c..0000000 --- a/native-base-theme/components/Content.js +++ /dev/null @@ -1,14 +0,0 @@ -// @flow - -export default () => { - const contentTheme = { - flex: 1, - backgroundColor: 'transparent', - 'NativeBase.Segment': { - borderWidth: 0, - backgroundColor: 'transparent' - } - }; - - return contentTheme; -}; diff --git a/native-base-theme/components/Fab.js b/native-base-theme/components/Fab.js deleted file mode 100644 index 4d2b9cb..0000000 --- a/native-base-theme/components/Fab.js +++ /dev/null @@ -1,25 +0,0 @@ -// @flow - -export default () => { - const fabTheme = { - 'NativeBase.Button': { - alignItems: 'center', - padding: null, - justifyContent: 'center', - 'NativeBase.Icon': { - alignSelf: 'center', - fontSize: 20, - marginLeft: 0, - marginRight: 0 - }, - 'NativeBase.IconNB': { - alignSelf: 'center', - fontSize: 20, - marginLeft: 0, - marginRight: 0 - } - } - }; - - return fabTheme; -}; diff --git a/native-base-theme/components/Footer.js b/native-base-theme/components/Footer.js deleted file mode 100644 index 292b35c..0000000 --- a/native-base-theme/components/Footer.js +++ /dev/null @@ -1,119 +0,0 @@ -// @flow - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const platformStyle = variables.platformStyle; - const platform = variables.platform; - - const iconCommon = { - 'NativeBase.Icon': { - color: variables.tabBarActiveTextColor - } - }; - const iconNBCommon = { - 'NativeBase.IconNB': { - color: variables.tabBarActiveTextColor - } - }; - const textCommon = { - 'NativeBase.Text': { - color: variables.tabBarActiveTextColor - } - }; - const footerTheme = { - 'NativeBase.Left': { - 'NativeBase.Button': { - '.transparent': { - backgroundColor: 'transparent', - borderColor: null, - elevation: 0, - shadowColor: null, - shadowOffset: null, - shadowRadius: null, - shadowOpacity: null, - ...iconCommon, - ...iconNBCommon, - ...textCommon - }, - alignSelf: null, - ...iconCommon, - ...iconNBCommon - // ...textCommon - }, - flex: 1, - alignSelf: 'center', - alignItems: 'flex-start' - }, - 'NativeBase.Body': { - flex: 1, - alignItems: 'center', - alignSelf: 'center', - flexDirection: 'row', - 'NativeBase.Button': { - alignSelf: 'center', - '.transparent': { - backgroundColor: 'transparent', - borderColor: null, - elevation: 0, - shadowColor: null, - shadowOffset: null, - shadowRadius: null, - shadowOpacity: null, - ...iconCommon, - ...iconNBCommon, - ...textCommon - }, - '.full': { - height: variables.footerHeight, - paddingBottom: variables.footerPaddingBottom, - flex: 1 - }, - ...iconCommon, - ...iconNBCommon - // ...textCommon - } - }, - 'NativeBase.Right': { - 'NativeBase.Button': { - '.transparent': { - backgroundColor: 'transparent', - borderColor: null, - elevation: 0, - shadowColor: null, - shadowOffset: null, - shadowRadius: null, - shadowOpacity: null, - ...iconCommon, - ...iconNBCommon, - ...textCommon - }, - alignSelf: null, - ...iconCommon, - ...iconNBCommon - // ...textCommon - }, - flex: 1, - alignSelf: 'center', - alignItems: 'flex-end' - }, - backgroundColor: variables.footerDefaultBg, - flexDirection: 'row', - justifyContent: 'center', - borderTopWidth: - platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL - ? variables.borderWidth - : undefined, - borderColor: - platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL - ? '#cbcbcb' - : undefined, - height: variables.footerHeight, - paddingBottom: variables.footerPaddingBottom, - elevation: 3, - left: 0, - right: 0 - }; - return footerTheme; -}; diff --git a/native-base-theme/components/FooterTab.js b/native-base-theme/components/FooterTab.js deleted file mode 100644 index abaa023..0000000 --- a/native-base-theme/components/FooterTab.js +++ /dev/null @@ -1,79 +0,0 @@ -// @flow - -import { Platform } from 'react-native'; - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const platform = variables.platform; - - const footerTabTheme = { - 'NativeBase.Button': { - '.active': { - 'NativeBase.Text': { - color: variables.tabBarActiveTextColor, - fontSize: variables.tabBarTextSize, - lineHeight: 16 - }, - 'NativeBase.Icon': { - color: variables.tabBarActiveTextColor - }, - 'NativeBase.IconNB': { - color: variables.tabBarActiveTextColor - }, - backgroundColor: variables.tabActiveBgColor - }, - flexDirection: null, - backgroundColor: 'transparent', - borderColor: null, - elevation: 0, - shadowColor: null, - shadowOffset: null, - shadowRadius: null, - shadowOpacity: null, - alignSelf: 'center', - flex: 1, - height: variables.footerHeight, - justifyContent: 'center', - '.badge': { - 'NativeBase.Badge': { - 'NativeBase.Text': { - fontSize: 11, - fontWeight: platform === PLATFORM.IOS ? '600' : undefined, - lineHeight: 14 - }, - top: -3, - alignSelf: 'center', - left: 10, - zIndex: 99, - height: 18, - padding: 1.7, - paddingHorizontal: 3 - }, - 'NativeBase.Icon': { - marginTop: -18 - } - }, - 'NativeBase.Icon': { - color: variables.tabBarTextColor - }, - 'NativeBase.IconNB': { - color: variables.tabBarTextColor - }, - 'NativeBase.Text': { - color: variables.tabBarTextColor, - fontSize: variables.tabBarTextSize, - lineHeight: 16 - } - }, - backgroundColor: - Platform.OS === PLATFORM.ANDROID ? variables.footerDefaultBg : undefined, - flexDirection: 'row', - justifyContent: 'space-between', - flex: 1, - alignSelf: 'stretch' - }; - - return footerTabTheme; -}; diff --git a/native-base-theme/components/Form.js b/native-base-theme/components/Form.js deleted file mode 100644 index 3040f30..0000000 --- a/native-base-theme/components/Form.js +++ /dev/null @@ -1,86 +0,0 @@ -// @flow - -export default () => { - const theme = { - 'NativeBase.Item': { - '.fixedLabel': { - 'NativeBase.Label': { - paddingLeft: null - }, - marginLeft: 15 - }, - '.inlineLabel': { - 'NativeBase.Label': { - paddingLeft: null - }, - marginLeft: 15 - }, - '.placeholderLabel': { - 'NativeBase.Input': {} - }, - '.stackedLabel': { - 'NativeBase.Label': { - top: 5, - paddingLeft: null - }, - 'NativeBase.Input': { - paddingLeft: null, - marginLeft: null - }, - 'NativeBase.Icon': { - marginTop: 36 - }, - marginLeft: 15 - }, - '.floatingLabel': { - 'NativeBase.Input': { - paddingLeft: null, - top: 10, - marginLeft: null - }, - 'NativeBase.Label': { - left: 0, - top: 6 - }, - 'NativeBase.Icon': { - top: 6 - }, - marginTop: 15, - marginLeft: 15 - }, - '.regular': { - 'NativeBase.Label': { - left: 0 - }, - marginLeft: 0 - }, - '.rounded': { - 'NativeBase.Label': { - left: 0 - }, - marginLeft: 0 - }, - '.underline': { - 'NativeBase.Label': { - left: 0, - top: 0, - position: 'relative' - }, - 'NativeBase.Input': { - left: -15 - }, - marginLeft: 15 - }, - '.last': { - marginLeft: 0, - paddingLeft: 15 - }, - 'NativeBase.Label': { - paddingRight: 5 - }, - marginLeft: 15 - } - }; - - return theme; -}; diff --git a/native-base-theme/components/H1.js b/native-base-theme/components/H1.js deleted file mode 100644 index 20aa8db..0000000 --- a/native-base-theme/components/H1.js +++ /dev/null @@ -1,13 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const h1Theme = { - color: variables.textColor, - fontSize: variables.fontSizeH1, - lineHeight: variables.lineHeightH1 - }; - - return h1Theme; -}; diff --git a/native-base-theme/components/H2.js b/native-base-theme/components/H2.js deleted file mode 100644 index cad4057..0000000 --- a/native-base-theme/components/H2.js +++ /dev/null @@ -1,13 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const h2Theme = { - color: variables.textColor, - fontSize: variables.fontSizeH2, - lineHeight: variables.lineHeightH2 - }; - - return h2Theme; -}; diff --git a/native-base-theme/components/H3.js b/native-base-theme/components/H3.js deleted file mode 100644 index 19917f5..0000000 --- a/native-base-theme/components/H3.js +++ /dev/null @@ -1,13 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const h3Theme = { - color: variables.textColor, - fontSize: variables.fontSizeH3, - lineHeight: variables.lineHeightH3 - }; - - return h3Theme; -}; diff --git a/native-base-theme/components/Header.js b/native-base-theme/components/Header.js deleted file mode 100644 index 944f6c3..0000000 --- a/native-base-theme/components/Header.js +++ /dev/null @@ -1,419 +0,0 @@ -// @flow - -import { PixelRatio, StatusBar } from 'react-native'; - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const platformStyle = variables.platformStyle; - const platform = variables.platform; - - const headerTheme = { - '.span': { - height: 128, - 'NativeBase.Left': { - alignSelf: 'flex-start' - }, - 'NativeBase.Body': { - alignSelf: 'flex-end', - alignItems: 'flex-start', - justifyContent: 'center', - paddingBottom: 26 - }, - 'NativeBase.Right': { - alignSelf: 'flex-start' - } - }, - '.hasSubtitle': { - 'NativeBase.Body': { - 'NativeBase.Title': { - fontSize: variables.titleFontSize - 2, - fontFamily: variables.titleFontfamily, - textAlign: 'center', - fontWeight: '500', - paddingBottom: 3 - }, - 'NativeBase.Subtitle': { - fontSize: variables.subTitleFontSize, - fontFamily: variables.titleFontfamily, - color: variables.subtitleColor, - textAlign: 'center' - } - } - }, - '.transparent': { - backgroundColor: 'transparent', - borderBottomColor: 'transparent', - elevation: 0, - shadowColor: null, - shadowOffset: null, - shadowRadius: null, - shadowOpacity: null, - paddingTop: - platform === PLATFORM.ANDROID ? StatusBar.currentHeight : undefined, - height: - platform === PLATFORM.ANDROID - ? variables.toolbarHeight + StatusBar.currentHeight - : variables.toolbarHeight - }, - '.noShadow': { - elevation: 0, - shadowColor: null, - shadowOffset: null, - shadowRadius: null, - shadowOpacity: null - }, - '.hasTabs': { - elevation: 0, - shadowColor: null, - shadowOffset: null, - shadowRadius: null, - shadowOpacity: null, - borderBottomWidth: null - }, - '.hasSegment': { - elevation: 0, - shadowColor: null, - shadowOffset: null, - shadowRadius: null, - shadowOpacity: null, - borderBottomWidth: null, - 'NativeBase.Left': { - flex: 0.3 - }, - 'NativeBase.Right': { - flex: 0.3 - }, - 'NativeBase.Body': { - flex: 1, - 'NativeBase.Segment': { - marginRight: 0, - alignSelf: 'center', - 'NativeBase.Button': { - paddingLeft: 0, - paddingRight: 0 - } - } - } - }, - '.noLeft': { - 'NativeBase.Left': { - width: platform === PLATFORM.IOS ? undefined : 0, - flex: platform === PLATFORM.IOS ? 1 : 0 - }, - 'NativeBase.Body': { - 'NativeBase.Title': { - paddingLeft: platform === PLATFORM.IOS ? undefined : 10 - }, - 'NativeBase.Subtitle': { - paddingLeft: platform === PLATFORM.IOS ? undefined : 10 - } - } - }, - 'NativeBase.Button': { - justifyContent: 'center', - alignSelf: 'center', - alignItems: 'center', - '.transparent': { - 'NativeBase.Text': { - color: variables.toolbarBtnTextColor, - fontWeight: '600' - }, - 'NativeBase.Icon': { - color: variables.toolbarBtnColor - }, - 'NativeBase.IconNB': { - color: variables.toolbarBtnColor - }, - paddingHorizontal: variables.buttonPadding - }, - paddingHorizontal: 15 - }, - '.searchBar': { - 'NativeBase.Item': { - 'NativeBase.Icon': { - backgroundColor: 'transparent', - color: variables.dropdownLinkColor, - fontSize: variables.toolbarSearchIconSize, - alignItems: 'center', - marginTop: 2, - paddingRight: 10, - paddingLeft: 10 - }, - 'NativeBase.IconNB': { - backgroundColor: 'transparent', - color: null, - alignSelf: 'center' - }, - 'NativeBase.Input': { - alignSelf: 'center', - lineHeight: null, - height: variables.searchBarInputHeight - }, - alignSelf: 'center', - alignItems: 'center', - justifyContent: 'flex-start', - flex: 1, - height: variables.searchBarHeight, - borderColor: 'transparent', - backgroundColor: variables.toolbarInputColor - }, - 'NativeBase.Button': { - '.transparent': { - 'NativeBase.Text': { - fontWeight: '500' - }, - paddingHorizontal: null, - paddingLeft: platform === PLATFORM.IOS ? 10 : null - }, - paddingHorizontal: platform === PLATFORM.IOS ? undefined : null, - width: platform === PLATFORM.IOS ? undefined : 0, - height: platform === PLATFORM.IOS ? undefined : 0 - } - }, - '.rounded': { - 'NativeBase.Item': { - borderRadius: - platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL - ? 25 - : 3 - } - }, - 'NativeBase.Left': { - 'NativeBase.Button': { - '.hasText': { - marginLeft: -10, - height: 30, - 'NativeBase.Icon': { - color: variables.toolbarBtnColor, - fontSize: variables.iconHeaderSize, - marginTop: 2, - marginRight: 5, - marginLeft: 2 - }, - 'NativeBase.Text': { - color: variables.toolbarBtnTextColor, - fontSize: platform === PLATFORM.IOS ? 17 : 0, - marginLeft: 7, - lineHeight: 19.5 - }, - 'NativeBase.IconNB': { - color: variables.toolbarBtnColor, - fontSize: variables.iconHeaderSize, - marginTop: 2, - marginRight: 5, - marginLeft: 2 - } - }, - '.transparent': { - marginLeft: - platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL - ? -3 - : 0, - 'NativeBase.Icon': { - color: variables.toolbarBtnColor, - fontSize: - platform === PLATFORM.IOS && - variables.platformStyle !== PLATFORM.MATERIAL - ? variables.iconHeaderSize + 1 - : variables.iconHeaderSize, - marginTop: 0, - marginRight: 2, - marginLeft: 1, - paddingTop: 1 - }, - 'NativeBase.IconNB': { - color: variables.toolbarBtnColor, - fontSize: - platform === PLATFORM.IOS && - variables.platformStyle !== PLATFORM.MATERIAL - ? variables.iconHeaderSize + 1 - : variables.iconHeaderSize - 2, - marginTop: 0, - marginRight: 2, - marginLeft: 1, - paddingTop: 1 - }, - 'NativeBase.Text': { - color: variables.toolbarBtnTextColor, - fontSize: platform === PLATFORM.IOS ? 17 : 0, - top: platform === PLATFORM.IOS ? 1 : -1.5, - paddingLeft: - platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL - ? 2 - : 5, - paddingRight: - platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL - ? undefined - : 10 - }, - backgroundColor: 'transparent', - borderColor: null, - elevation: 0, - shadowColor: null, - shadowOffset: null, - shadowRadius: null, - shadowOpacity: null - }, - 'NativeBase.Icon': { - color: variables.toolbarBtnColor - }, - 'NativeBase.IconNB': { - color: variables.toolbarBtnColor - }, - alignSelf: null, - paddingRight: variables.buttonPadding, - paddingLeft: - platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL - ? 4 - : 8 - }, - flex: - platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL - ? 1 - : 0.4, - alignSelf: 'center', - alignItems: 'flex-start' - }, - 'NativeBase.Body': { - flex: 1, - alignItems: - platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL - ? 'center' - : 'flex-start', - alignSelf: 'center', - 'NativeBase.Segment': { - borderWidth: 0, - alignSelf: 'flex-end', - marginRight: platform === PLATFORM.IOS ? -40 : -55 - }, - 'NativeBase.Button': { - alignSelf: 'center', - '.transparent': { - backgroundColor: 'transparent' - }, - 'NativeBase.Icon': { - color: variables.toolbarBtnColor - }, - 'NativeBase.IconNB': { - color: variables.toolbarBtnColor - }, - 'NativeBase.Text': { - color: variables.inverseTextColor, - backgroundColor: 'transparent' - } - } - }, - 'NativeBase.Right': { - 'NativeBase.Button': { - '.hasText': { - height: 30, - 'NativeBase.Icon': { - color: variables.toolbarBtnColor, - fontSize: variables.iconHeaderSize - 2, - marginTop: 2, - marginRight: 2, - marginLeft: 5 - }, - 'NativeBase.Text': { - color: variables.toolbarBtnTextColor, - fontSize: platform === PLATFORM.IOS ? 17 : 14, - lineHeight: 19.5 - }, - 'NativeBase.IconNB': { - color: variables.toolbarBtnColor, - fontSize: variables.iconHeaderSize - 2, - marginTop: 2, - marginRight: 2, - marginLeft: 5 - } - }, - '.transparent': { - marginRight: platform === PLATFORM.IOS ? -9 : -5, - paddingLeft: 15, - paddingRight: 12, - paddingHorizontal: 15, - borderRadius: 50, - 'NativeBase.Icon': { - color: variables.toolbarBtnColor, - fontSize: variables.iconHeaderSize - 2, - marginTop: 0, - marginLeft: 2, - marginRight: 0 - // paddingTop: 0 - }, - 'NativeBase.IconNB': { - color: variables.toolbarBtnColor, - fontSize: variables.iconHeaderSize - 2, - marginTop: 0, - marginLeft: 2, - marginRight: 0 - // paddingTop: 0 - }, - 'NativeBase.Text': { - color: variables.toolbarBtnTextColor, - fontSize: platform === PLATFORM.IOS ? 17 : 14, - top: platform === PLATFORM.IOS ? 1 : -1.5, - paddingRight: - platform === PLATFORM.IOS && - variables.platformStyle !== PLATFORM.MATERIAL - ? 0 - : undefined - }, - backgroundColor: 'transparent', - borderColor: null, - elevation: 0, - shadowColor: null, - shadowOffset: null, - shadowRadius: null, - shadowOpacity: null - }, - 'NativeBase.Icon': { - color: variables.toolbarBtnColor - }, - 'NativeBase.IconNB': { - color: variables.toolbarBtnColor - }, - alignSelf: null, - paddingHorizontal: variables.buttonPadding - }, - flex: 1, - alignSelf: 'center', - alignItems: 'flex-end', - flexDirection: 'row', - justifyContent: 'flex-end' - }, - backgroundColor: variables.toolbarDefaultBg, - flexDirection: 'row', - // paddingHorizontal: 10, - paddingLeft: - platform === PLATFORM.IOS && variables.platformStyle !== PLATFORM.MATERIAL - ? 6 - : 10, - paddingRight: 10, - justifyContent: 'center', - paddingTop: platform === PLATFORM.IOS ? 18 : 0, - borderBottomWidth: - platform === PLATFORM.IOS - ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) - : 0, - borderBottomColor: variables.toolbarDefaultBorder, - height: - variables.platform === PLATFORM.IOS && - variables.platformStyle === PLATFORM.MATERIAL - ? variables.toolbarHeight + 10 - : variables.toolbarHeight, - elevation: 3, - shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined, - shadowOffset: - platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined, - shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined, - shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined, - top: 0, - left: 0, - right: 0 - }; - - return headerTheme; -}; diff --git a/native-base-theme/components/Icon.js b/native-base-theme/components/Icon.js deleted file mode 100644 index 5cff95d..0000000 --- a/native-base-theme/components/Icon.js +++ /dev/null @@ -1,12 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const iconTheme = { - fontSize: variables.iconFontSize, - color: variable.textColor - }; - - return iconTheme; -}; diff --git a/native-base-theme/components/Input.js b/native-base-theme/components/Input.js deleted file mode 100644 index d0dd6af..0000000 --- a/native-base-theme/components/Input.js +++ /dev/null @@ -1,19 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const inputTheme = { - '.multiline': { - height: null - }, - height: variables.inputHeightBase, - color: variables.inputColor, - paddingLeft: 5, - paddingRight: 5, - flex: 1, - fontSize: variables.inputFontSize - }; - - return inputTheme; -}; diff --git a/native-base-theme/components/InputGroup.js b/native-base-theme/components/InputGroup.js deleted file mode 100644 index 7988ca5..0000000 --- a/native-base-theme/components/InputGroup.js +++ /dev/null @@ -1,132 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const inputGroupTheme = { - 'NativeBase.Icon': { - fontSize: 24, - color: variables.sTabBarActiveTextColor, - paddingHorizontal: 5 - }, - 'NativeBase.IconNB': { - fontSize: 24, - color: variables.sTabBarActiveTextColor, - paddingHorizontal: 5 - }, - 'NativeBase.Input': { - height: variables.inputHeightBase, - color: variables.inputColor, - paddingLeft: 5, - paddingRight: 5, - flex: 1, - fontSize: variables.inputFontSize, - lineHeight: variables.inputLineHeight - }, - '.underline': { - '.success': { - borderColor: variables.inputSuccessBorderColor - }, - '.error': { - borderColor: variables.inputErrorBorderColor - }, - paddingLeft: 5, - borderWidth: variables.borderWidth, - borderTopWidth: 0, - borderRightWidth: 0, - borderLeftWidth: 0, - borderColor: variables.inputBorderColor - }, - '.regular': { - '.success': { - borderColor: variables.inputSuccessBorderColor - }, - '.error': { - borderColor: variables.inputErrorBorderColor - }, - paddingLeft: 5, - borderWidth: variables.borderWidth, - borderColor: variables.inputBorderColor - }, - '.rounded': { - '.success': { - borderColor: variables.inputSuccessBorderColor - }, - '.error': { - borderColor: variables.inputErrorBorderColor - }, - paddingLeft: 5, - borderWidth: variables.borderWidth, - borderRadius: variables.inputGroupRoundedBorderRadius, - borderColor: variables.inputBorderColor - }, - - '.success': { - 'NativeBase.Icon': { - color: variables.inputSuccessBorderColor - }, - 'NativeBase.IconNB': { - color: variables.inputSuccessBorderColor - }, - '.rounded': { - borderRadius: 30, - borderColor: variables.inputSuccessBorderColor - }, - '.regular': { - borderColor: variables.inputSuccessBorderColor - }, - '.underline': { - borderWidth: variables.borderWidth, - borderTopWidth: 0, - borderRightWidth: 0, - borderLeftWidth: 0, - borderColor: variables.inputSuccessBorderColor - }, - borderColor: variables.inputSuccessBorderColor - }, - - '.error': { - 'NativeBase.Icon': { - color: variables.inputErrorBorderColor - }, - 'NativeBase.IconNB': { - color: variables.inputErrorBorderColor - }, - '.rounded': { - borderRadius: 30, - borderColor: variables.inputErrorBorderColor - }, - '.regular': { - borderColor: variables.inputErrorBorderColor - }, - '.underline': { - borderWidth: variables.borderWidth, - borderTopWidth: 0, - borderRightWidth: 0, - borderLeftWidth: 0, - borderColor: variables.inputErrorBorderColor - }, - borderColor: variables.inputErrorBorderColor - }, - '.disabled': { - 'NativeBase.Icon': { - color: '#384850' - }, - 'NativeBase.IconNB': { - color: '#384850' - } - }, - - paddingLeft: 5, - borderWidth: variables.borderWidth, - borderTopWidth: 0, - borderRightWidth: 0, - borderLeftWidth: 0, - borderColor: variables.inputBorderColor, - backgroundColor: 'transparent', - flexDirection: 'row', - alignItems: 'center' - }; - - return inputGroupTheme; -}; diff --git a/native-base-theme/components/Item.js b/native-base-theme/components/Item.js deleted file mode 100644 index 2305604..0000000 --- a/native-base-theme/components/Item.js +++ /dev/null @@ -1,241 +0,0 @@ -// @flow - -import { Platform } from 'react-native'; - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const itemTheme = { - '.floatingLabel': { - 'NativeBase.Input': { - height: 50, - top: 8, - paddingTop: 3, - paddingBottom: 7, - '.multiline': { - minHeight: variables.inputHeightBase, - paddingTop: Platform.OS === PLATFORM.IOS ? 10 : 3, - paddingBottom: Platform.OS === PLATFORM.IOS ? 14 : 10 - } - }, - 'NativeBase.Label': { - paddingTop: 5 - }, - 'NativeBase.Icon': { - top: 6, - paddingTop: 8 - }, - 'NativeBase.IconNB': { - top: 6, - paddingTop: 8 - } - }, - '.fixedLabel': { - 'NativeBase.Label': { - position: null, - top: null, - left: null, - right: null, - flex: 1, - height: null, - width: null, - fontSize: variables.inputFontSize - }, - 'NativeBase.Input': { - flex: 2, - fontSize: variables.inputFontSize - } - }, - '.stackedLabel': { - 'NativeBase.Label': { - position: null, - top: null, - left: null, - right: null, - paddingTop: 5, - alignSelf: 'flex-start', - fontSize: variables.inputFontSize - 2 - }, - 'NativeBase.Icon': { - marginTop: 36 - }, - 'NativeBase.Input': { - alignSelf: Platform.OS === PLATFORM.IOS ? 'stretch' : 'flex-start', - flex: 1, - width: Platform.OS === PLATFORM.IOS ? null : variables.deviceWidth - 25, - fontSize: variables.inputFontSize, - lineHeight: variables.inputLineHeight - 6, - '.secureTextEntry': { - fontSize: variables.inputFontSize - }, - '.multiline': { - paddingTop: Platform.OS === PLATFORM.IOS ? 9 : undefined, - paddingBottom: Platform.OS === PLATFORM.IOS ? 9 : undefined - } - }, - flexDirection: null, - minHeight: variables.inputHeightBase + 15 - }, - '.inlineLabel': { - 'NativeBase.Label': { - position: null, - top: null, - left: null, - right: null, - paddingRight: 20, - height: null, - width: null, - fontSize: variables.inputFontSize - }, - 'NativeBase.Input': { - paddingLeft: 5, - fontSize: variables.inputFontSize - }, - flexDirection: 'row' - }, - 'NativeBase.Label': { - fontSize: variables.inputFontSize, - color: variables.inputColorPlaceholder, - paddingRight: 5 - }, - 'NativeBase.Icon': { - fontSize: 24, - paddingRight: 8 - }, - 'NativeBase.IconNB': { - fontSize: 24, - paddingRight: 8 - }, - 'NativeBase.Input': { - '.multiline': { - height: null - }, - height: variables.inputHeightBase, - color: variables.inputColor, - flex: 1, - top: Platform.OS === PLATFORM.IOS ? 1.5 : undefined, - fontSize: variables.inputFontSize - }, - '.underline': { - 'NativeBase.Input': { - paddingLeft: 15 - }, - '.success': { - borderColor: variables.inputSuccessBorderColor - }, - '.error': { - borderColor: variables.inputErrorBorderColor - }, - borderWidth: variables.borderWidth * 2, - borderTopWidth: 0, - borderRightWidth: 0, - borderLeftWidth: 0, - borderColor: variables.inputBorderColor - }, - '.regular': { - 'NativeBase.Input': { - paddingLeft: 8 - }, - 'NativeBase.Icon': { - paddingLeft: 10 - }, - '.success': { - borderColor: variables.inputSuccessBorderColor - }, - '.error': { - borderColor: variables.inputErrorBorderColor - }, - borderWidth: variables.borderWidth * 2, - borderColor: variables.inputBorderColor - }, - '.rounded': { - 'NativeBase.Input': { - paddingLeft: 8 - }, - 'NativeBase.Icon': { - paddingLeft: 10 - }, - '.success': { - borderColor: variables.inputSuccessBorderColor - }, - '.error': { - borderColor: variables.inputErrorBorderColor - }, - borderWidth: variables.borderWidth * 2, - borderRadius: 30, - borderColor: variables.inputBorderColor - }, - - '.success': { - 'NativeBase.Icon': { - color: variables.inputSuccessBorderColor - }, - 'NativeBase.IconNB': { - color: variables.inputSuccessBorderColor - }, - '.rounded': { - borderRadius: 30, - borderColor: variables.inputSuccessBorderColor - }, - '.regular': { - borderColor: variables.inputSuccessBorderColor - }, - '.underline': { - borderWidth: variables.borderWidth * 2, - borderTopWidth: 0, - borderRightWidth: 0, - borderLeftWidth: 0, - borderColor: variables.inputSuccessBorderColor - }, - borderColor: variables.inputSuccessBorderColor - }, - - '.error': { - 'NativeBase.Icon': { - color: variables.inputErrorBorderColor - }, - 'NativeBase.IconNB': { - color: variables.inputErrorBorderColor - }, - '.rounded': { - borderRadius: 30, - borderColor: variables.inputErrorBorderColor - }, - '.regular': { - borderColor: variables.inputErrorBorderColor - }, - '.underline': { - borderWidth: variables.borderWidth * 2, - borderTopWidth: 0, - borderRightWidth: 0, - borderLeftWidth: 0, - borderColor: variables.inputErrorBorderColor - }, - borderColor: variables.inputErrorBorderColor - }, - '.disabled': { - 'NativeBase.Icon': { - color: '#384850' - }, - 'NativeBase.IconNB': { - color: '#384850' - } - }, - '.picker': { - marginLeft: 0 - }, - - borderWidth: variables.borderWidth * 2, - borderTopWidth: 0, - borderRightWidth: 0, - borderLeftWidth: 0, - borderColor: variables.inputBorderColor, - backgroundColor: 'transparent', - flexDirection: 'row', - alignItems: 'center', - marginLeft: 2 - }; - - return itemTheme; -}; diff --git a/native-base-theme/components/Label.js b/native-base-theme/components/Label.js deleted file mode 100644 index 118f648..0000000 --- a/native-base-theme/components/Label.js +++ /dev/null @@ -1,12 +0,0 @@ -// @flow - -export default () => { - const labelTheme = { - '.focused': { - width: 0 - }, - fontSize: 17 - }; - - return labelTheme; -}; diff --git a/native-base-theme/components/Left.js b/native-base-theme/components/Left.js deleted file mode 100644 index e01d693..0000000 --- a/native-base-theme/components/Left.js +++ /dev/null @@ -1,11 +0,0 @@ -// @flow - -export default () => { - const leftTheme = { - flex: 1, - alignSelf: 'center', - alignItems: 'flex-start' - }; - - return leftTheme; -}; diff --git a/native-base-theme/components/ListItem.js b/native-base-theme/components/ListItem.js deleted file mode 100644 index c41ec5d..0000000 --- a/native-base-theme/components/ListItem.js +++ /dev/null @@ -1,446 +0,0 @@ -// @flow - -import { Platform, PixelRatio } from 'react-native'; - -import pickerTheme from './Picker'; -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const platform = variables.platform; - const selectedStyle = { - 'NativeBase.Text': { - color: variables.listItemSelected - }, - 'NativeBase.Icon': { - color: variables.listItemSelected - } - }; - - const listItemTheme = { - 'NativeBase.InputGroup': { - 'NativeBase.Icon': { - paddingRight: 5 - }, - 'NativeBase.IconNB': { - paddingRight: 5 - }, - 'NativeBase.Input': { - paddingHorizontal: 5 - }, - flex: 1, - borderWidth: null, - margin: -10, - borderBottomColor: 'transparent' - }, - '.searchBar': { - 'NativeBase.Item': { - 'NativeBase.Icon': { - backgroundColor: 'transparent', - color: variables.dropdownLinkColor, - fontSize: - platform === PLATFORM.IOS - ? variables.iconFontSize - 10 - : variables.iconFontSize - 5, - alignItems: 'center', - marginTop: 2, - paddingRight: 8 - }, - 'NativeBase.IconNB': { - backgroundColor: 'transparent', - color: null, - alignSelf: 'center' - }, - 'NativeBase.Input': { - alignSelf: 'center' - }, - alignSelf: 'center', - alignItems: 'center', - justifyContent: 'flex-start', - flex: 1, - height: platform === PLATFORM.IOS ? 30 : 40, - borderColor: 'transparent', - backgroundColor: '#fff', - borderRadius: 5 - }, - 'NativeBase.Button': { - '.transparent': { - 'NativeBase.Text': { - fontWeight: '500' - }, - paddingHorizontal: null, - paddingLeft: platform === PLATFORM.IOS ? 10 : null - }, - paddingHorizontal: platform === PLATFORM.IOS ? undefined : null, - width: platform === PLATFORM.IOS ? undefined : 0, - height: platform === PLATFORM.IOS ? undefined : 0 - }, - backgroundColor: variables.toolbarInputColor, - padding: 10, - marginLeft: null - }, - 'NativeBase.CheckBox': { - marginLeft: -10, - marginRight: 10 - }, - '.first': { - '.itemHeader': { - paddingTop: variables.listItemPadding + 3 - } - }, - '.itemHeader': { - '.first': { - paddingTop: variables.listItemPadding + 3 - }, - borderBottomWidth: - platform === PLATFORM.IOS ? variables.borderWidth : null, - marginLeft: null, - padding: variables.listItemPadding, - paddingLeft: variables.listItemPadding + 5, - paddingTop: - platform === PLATFORM.IOS ? variables.listItemPadding + 25 : undefined, - paddingBottom: - platform === PLATFORM.ANDROID ? variables.listItemPadding + 20 : undefined, - flexDirection: 'row', - borderColor: variables.listBorderColor, - 'NativeBase.Text': { - fontSize: 14, - color: platform === PLATFORM.IOS ? undefined : variables.listNoteColor - } - }, - '.itemDivider': { - borderBottomWidth: null, - marginLeft: null, - padding: variables.listItemPadding, - paddingLeft: variables.listItemPadding + 5, - backgroundColor: variables.listDividerBg, - flexDirection: 'row', - borderColor: variables.listBorderColor - }, - '.selected': { - 'NativeBase.Left': { - ...selectedStyle - }, - 'NativeBase.Body': { - ...selectedStyle - }, - 'NativeBase.Right': { - ...selectedStyle - }, - ...selectedStyle - }, - 'NativeBase.Left': { - 'NativeBase.Body': { - 'NativeBase.Text': { - '.note': { - color: variables.listNoteColor, - fontWeight: '200' - }, - fontWeight: '600' - }, - marginLeft: 10, - alignItems: null, - alignSelf: null - }, - 'NativeBase.Icon': { - width: variables.iconFontSize - 10, - fontSize: variables.iconFontSize - 10 - }, - 'NativeBase.IconNB': { - width: variables.iconFontSize - 10, - fontSize: variables.iconFontSize - 10 - }, - 'NativeBase.Text': { - alignSelf: 'center' - }, - flexDirection: 'row' - }, - 'NativeBase.Body': { - 'NativeBase.Text': { - marginHorizontal: variables.listItemPadding, - '.note': { - color: variables.listNoteColor, - fontWeight: '200' - } - }, - alignSelf: null, - alignItems: null - }, - 'NativeBase.Right': { - 'NativeBase.Badge': { - alignSelf: null - }, - 'NativeBase.PickerNB': { - 'NativeBase.Button': { - marginRight: -15, - 'NativeBase.Text': { - color: variables.topTabBarActiveTextColor - } - } - }, - 'NativeBase.Button': { - alignSelf: null, - '.transparent': { - 'NativeBase.Text': { - color: variables.topTabBarActiveTextColor - } - } - }, - 'NativeBase.Icon': { - alignSelf: null, - fontSize: variables.iconFontSize - 8, - color: '#c9c8cd' - }, - 'NativeBase.IconNB': { - alignSelf: null, - fontSize: variables.iconFontSize - 8, - color: '#c9c8cd' - }, - 'NativeBase.Text': { - '.note': { - color: variables.listNoteColor, - fontWeight: '200' - }, - alignSelf: null - }, - 'NativeBase.Thumbnail': { - alignSelf: null - }, - 'NativeBase.Image': { - alignSelf: null - }, - 'NativeBase.Radio': { - alignSelf: null - }, - 'NativeBase.Checkbox': { - alignSelf: null - }, - 'NativeBase.Switch': { - alignSelf: null - }, - padding: null, - flex: 0.28 - }, - 'NativeBase.Text': { - '.note': { - color: variables.listNoteColor, - fontWeight: '200' - }, - alignSelf: 'center' - }, - '.last': { - marginLeft: -(variables.listItemPadding + 5), - paddingLeft: (variables.listItemPadding + 5) * 2, - top: 1 - }, - '.avatar': { - 'NativeBase.Left': { - flex: 0, - alignSelf: 'flex-start', - paddingTop: 14 - }, - 'NativeBase.Body': { - 'NativeBase.Text': { - marginLeft: null - }, - flex: 1, - paddingVertical: variables.listItemPadding, - borderBottomWidth: variables.borderWidth, - borderColor: variables.listBorderColor, - marginLeft: variables.listItemPadding + 5 - }, - 'NativeBase.Right': { - 'NativeBase.Text': { - '.note': { - fontSize: variables.noteFontSize - 2 - } - }, - flex: 0, - paddingRight: variables.listItemPadding + 5, - alignSelf: 'stretch', - paddingVertical: variables.listItemPadding, - borderBottomWidth: variables.borderWidth, - borderColor: variables.listBorderColor - }, - '.noBorder': { - 'NativeBase.Body': { - borderBottomWidth: null - }, - 'NativeBase.Right': { - borderBottomWidth: null - } - }, - borderBottomWidth: null, - paddingVertical: null, - paddingRight: null - }, - '.thumbnail': { - 'NativeBase.Left': { - flex: 0 - }, - 'NativeBase.Body': { - 'NativeBase.Text': { - marginLeft: null - }, - flex: 1, - paddingVertical: variables.listItemPadding + 8, - borderBottomWidth: variables.borderWidth, - borderColor: variables.listBorderColor, - marginLeft: variables.listItemPadding + 5 - }, - 'NativeBase.Right': { - 'NativeBase.Button': { - '.transparent': { - 'NativeBase.Text': { - fontSize: variables.listNoteSize, - color: variables.sTabBarActiveTextColor - } - }, - height: null - }, - flex: 0, - justifyContent: 'center', - alignSelf: 'stretch', - paddingRight: variables.listItemPadding + 5, - paddingVertical: variables.listItemPadding + 5, - borderBottomWidth: variables.borderWidth, - borderColor: variables.listBorderColor - }, - '.noBorder': { - 'NativeBase.Body': { - borderBottomWidth: null - }, - 'NativeBase.Right': { - borderBottomWidth: null - } - }, - borderBottomWidth: null, - paddingVertical: null, - paddingRight: null - }, - '.icon': { - '.last': { - 'NativeBase.Body': { - borderBottomWidth: null - }, - 'NativeBase.Right': { - borderBottomWidth: null - }, - borderBottomWidth: variables.borderWidth, - borderColor: variables.listBorderColor - }, - 'NativeBase.Left': { - 'NativeBase.Button': { - 'NativeBase.IconNB': { - marginHorizontal: null, - fontSize: variables.iconFontSize - 5 - }, - 'NativeBase.Icon': { - marginHorizontal: null, - fontSize: variables.iconFontSize - 8 - }, - alignSelf: 'center', - height: 29, - width: 29, - borderRadius: 6, - paddingVertical: null, - paddingHorizontal: null, - alignItems: 'center', - justifyContent: 'center' - }, - 'NativeBase.Icon': { - width: variables.iconFontSize - 5, - fontSize: variables.iconFontSize - 2 - }, - 'NativeBase.IconNB': { - width: variables.iconFontSize - 5, - fontSize: variables.iconFontSize - 2 - }, - paddingRight: variables.listItemPadding + 5, - flex: 0, - height: 44, - justifyContent: 'center', - alignItems: 'center' - }, - 'NativeBase.Body': { - 'NativeBase.Text': { - marginLeft: null, - fontSize: 17 - }, - flex: 1, - height: 44, - justifyContent: 'center', - borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), - borderColor: variables.listBorderColor - }, - 'NativeBase.Right': { - 'NativeBase.Text': { - textAlign: 'center', - color: '#8F8E95', - fontSize: 17 - }, - 'NativeBase.IconNB': { - color: '#C8C7CC', - fontSize: variables.iconFontSize - 10, - alignSelf: 'center', - paddingLeft: 10, - paddingTop: 3 - }, - 'NativeBase.Icon': { - color: '#C8C7CC', - fontSize: variables.iconFontSize - 10, - alignSelf: 'center', - paddingLeft: 10, - paddingTop: 3 - }, - 'NativeBase.Switch': { - marginRight: Platform.OS === PLATFORM.IOS ? undefined : -5, - alignSelf: null - }, - 'NativeBase.PickerNB': { - ...pickerTheme() - }, - flexDirection: 'row', - alignItems: 'center', - flex: 0, - alignSelf: 'stretch', - height: 44, - justifyContent: 'flex-end', - borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), - borderColor: variables.listBorderColor, - paddingRight: variables.listItemPadding + 5 - }, - '.noBorder': { - 'NativeBase.Body': { - borderBottomWidth: null - }, - 'NativeBase.Right': { - borderBottomWidth: null - } - }, - borderBottomWidth: null, - paddingVertical: null, - paddingRight: null, - height: 44, - justifyContent: 'center' - }, - '.noBorder': { - borderBottomWidth: null - }, - '.noIndent': { - marginLeft: null, - padding: variables.listItemPadding, - paddingLeft: variables.listItemPadding + 6 - }, - alignItems: 'center', - flexDirection: 'row', - paddingRight: variables.listItemPadding + 6, - paddingVertical: variables.listItemPadding + 3, - marginLeft: variables.listItemPadding + 6, - borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), - backgroundColor: variables.listBg, - borderColor: variables.listBorderColor - }; - - return listItemTheme; -}; diff --git a/native-base-theme/components/Picker.android.js b/native-base-theme/components/Picker.android.js deleted file mode 100644 index 300a743..0000000 --- a/native-base-theme/components/Picker.android.js +++ /dev/null @@ -1,14 +0,0 @@ -// @flow - -export default () => { - const pickerTheme = { - '.note': { - color: '#8F8E95' - }, - // width: 90, - marginRight: -4, - flexGrow: 1 - }; - - return pickerTheme; -}; diff --git a/native-base-theme/components/Picker.ios.js b/native-base-theme/components/Picker.ios.js deleted file mode 100644 index b81b056..0000000 --- a/native-base-theme/components/Picker.ios.js +++ /dev/null @@ -1,7 +0,0 @@ -// @flow - -export default () => { - const pickerTheme = {}; - - return pickerTheme; -}; diff --git a/native-base-theme/components/Picker.js b/native-base-theme/components/Picker.js deleted file mode 100644 index 300a743..0000000 --- a/native-base-theme/components/Picker.js +++ /dev/null @@ -1,14 +0,0 @@ -// @flow - -export default () => { - const pickerTheme = { - '.note': { - color: '#8F8E95' - }, - // width: 90, - marginRight: -4, - flexGrow: 1 - }; - - return pickerTheme; -}; diff --git a/native-base-theme/components/Radio.js b/native-base-theme/components/Radio.js deleted file mode 100644 index d1e0e5f..0000000 --- a/native-base-theme/components/Radio.js +++ /dev/null @@ -1,31 +0,0 @@ -// @flow - -import { Platform } from 'react-native'; - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const radioTheme = { - '.selected': { - 'NativeBase.IconNB': { - color: - Platform.OS === PLATFORM.IOS - ? variables.radioColor - : variables.radioSelectedColorAndroid, - lineHeight: - Platform.OS === PLATFORM.IOS ? 25 : variables.radioBtnLineHeight, - height: Platform.OS === PLATFORM.IOS ? 20 : undefined - } - }, - 'NativeBase.IconNB': { - color: Platform.OS === PLATFORM.IOS ? 'transparent' : undefined, - lineHeight: - Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnLineHeight, - fontSize: - Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnSize - } - }; - - return radioTheme; -}; diff --git a/native-base-theme/components/Right.js b/native-base-theme/components/Right.js deleted file mode 100644 index 53b3308..0000000 --- a/native-base-theme/components/Right.js +++ /dev/null @@ -1,14 +0,0 @@ -// @flow - -export default () => { - const rightTheme = { - 'NativeBase.Button': { - alignSelf: null - }, - flex: 1, - alignSelf: 'center', - alignItems: 'flex-end' - }; - - return rightTheme; -}; diff --git a/native-base-theme/components/Segment.js b/native-base-theme/components/Segment.js deleted file mode 100644 index 8ad669c..0000000 --- a/native-base-theme/components/Segment.js +++ /dev/null @@ -1,57 +0,0 @@ -// @flow - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const platform = variables.platform; - - const segmentTheme = { - height: 45, - borderColor: variables.segmentBorderColorMain, - flexDirection: 'row', - justifyContent: 'center', - backgroundColor: variables.segmentBackgroundColor, - 'NativeBase.Button': { - alignSelf: 'center', - borderRadius: 0, - paddingTop: 3, - paddingBottom: 3, - height: 30, - backgroundColor: 'transparent', - borderWidth: 1, - borderLeftWidth: 0, - borderColor: variables.segmentBorderColor, - elevation: 0, - '.active': { - backgroundColor: variables.segmentActiveBackgroundColor, - 'NativeBase.Text': { - color: variables.segmentActiveTextColor - }, - 'NativeBase.Icon': { - color: variables.segmentActiveTextColor - } - }, - '.first': { - borderTopLeftRadius: platform === PLATFORM.IOS ? 5 : undefined, - borderBottomLeftRadius: platform === PLATFORM.IOS ? 5 : undefined, - borderLeftWidth: 1 - }, - '.last': { - borderTopRightRadius: platform === PLATFORM.IOS ? 5 : undefined, - borderBottomRightRadius: platform === PLATFORM.IOS ? 5 : undefined - }, - 'NativeBase.Text': { - color: variables.segmentTextColor, - fontSize: 14 - }, - 'NativeBase.Icon': { - fontSize: 22, - paddingTop: 0, - color: variables.segmentTextColor - } - } - }; - - return segmentTheme; -}; diff --git a/native-base-theme/components/Separator.js b/native-base-theme/components/Separator.js deleted file mode 100644 index 7fdf313..0000000 --- a/native-base-theme/components/Separator.js +++ /dev/null @@ -1,49 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const theme = { - '.group': { - height: 50, - paddingVertical: variables.listItemPadding - 8, - paddingTop: variables.listItemPadding + 12, - '.bordered': { - height: 50, - paddingVertical: variables.listItemPadding - 8, - paddingTop: variables.listItemPadding + 12 - } - }, - '.bordered': { - '.noTopBorder': { - borderTopWidth: 0 - }, - '.noBottomBorder': { - borderBottomWidth: 0 - }, - height: 35, - paddingTop: variables.listItemPadding + 2, - paddingBottom: variables.listItemPadding, - borderBottomWidth: variables.borderWidth, - borderTopWidth: variables.borderWidth, - borderColor: variables.listBorderColor - }, - 'NativeBase.Text': { - fontSize: variables.tabBarTextSize - 2, - color: '#777' - }, - '.noTopBorder': { - borderTopWidth: 0 - }, - '.noBottomBorder': { - borderBottomWidth: 0 - }, - height: 38, - backgroundColor: '#F0EFF5', - flex: 1, - justifyContent: 'center', - paddingLeft: variables.listItemPadding + 5 - }; - - return theme; -}; diff --git a/native-base-theme/components/Spinner.js b/native-base-theme/components/Spinner.js deleted file mode 100644 index a453b3f..0000000 --- a/native-base-theme/components/Spinner.js +++ /dev/null @@ -1,9 +0,0 @@ -// @flow - -export default () => { - const spinnerTheme = { - height: 80 - }; - - return spinnerTheme; -}; diff --git a/native-base-theme/components/Subtitle.js b/native-base-theme/components/Subtitle.js deleted file mode 100644 index bb8ea0a..0000000 --- a/native-base-theme/components/Subtitle.js +++ /dev/null @@ -1,19 +0,0 @@ -// @flow - -import { Platform } from 'react-native'; - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const subtitleTheme = { - fontSize: variables.subTitleFontSize, - fontFamily: variables.titleFontfamily, - color: variables.subtitleColor, - textAlign: 'center', - paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0, - marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3 - }; - - return subtitleTheme; -}; diff --git a/native-base-theme/components/SwipeRow.js b/native-base-theme/components/SwipeRow.js deleted file mode 100644 index 41d6083..0000000 --- a/native-base-theme/components/SwipeRow.js +++ /dev/null @@ -1,46 +0,0 @@ -// @flow - -export default () => { - const swipeRowTheme = { - 'NativeBase.ListItem': { - '.list': { - backgroundColor: '#FFF' - }, - marginLeft: 0 - }, - 'NativeBase.Left': { - flex: 0, - alignSelf: null, - alignItems: null, - 'NativeBase.Button': { - flex: 1, - alignItems: 'center', - justifyContent: 'center', - alignSelf: 'stretch', - borderRadius: 0 - } - }, - 'NativeBase.Right': { - flex: 0, - alignSelf: null, - alignItems: null, - 'NativeBase.Button': { - flex: 1, - alignItems: 'center', - justifyContent: 'center', - alignSelf: 'stretch', - borderRadius: 0 - } - }, - 'NativeBase.Button': { - flex: 1, - height: null, - alignItems: 'center', - justifyContent: 'center', - alignSelf: 'stretch', - borderRadius: 0 - } - }; - - return swipeRowTheme; -}; diff --git a/native-base-theme/components/Switch.js b/native-base-theme/components/Switch.js deleted file mode 100644 index 6b667bc..0000000 --- a/native-base-theme/components/Switch.js +++ /dev/null @@ -1,9 +0,0 @@ -// @flow - -export default () => { - const switchTheme = { - marginVertical: -5 - }; - - return switchTheme; -}; diff --git a/native-base-theme/components/Tab.js b/native-base-theme/components/Tab.js deleted file mode 100644 index b242306..0000000 --- a/native-base-theme/components/Tab.js +++ /dev/null @@ -1,10 +0,0 @@ -// @flow - -export default () => { - const tabTheme = { - flex: 1, - backgroundColor: '#FFF' - }; - - return tabTheme; -}; diff --git a/native-base-theme/components/TabBar.js b/native-base-theme/components/TabBar.js deleted file mode 100644 index fa1490d..0000000 --- a/native-base-theme/components/TabBar.js +++ /dev/null @@ -1,57 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const tabBarTheme = { - '.tabIcon': { - height: undefined - }, - '.vertical': { - height: 60 - }, - 'NativeBase.Button': { - '.transparent': { - 'NativeBase.Text': { - fontSize: variables.tabFontSize, - color: variables.sTabBarActiveTextColor, - fontWeight: '400' - }, - 'NativeBase.IconNB': { - color: variables.sTabBarActiveTextColor - } - }, - 'NativeBase.IconNB': { - color: variables.sTabBarActiveTextColor - }, - 'NativeBase.Text': { - fontSize: variables.tabFontSize, - color: variables.sTabBarActiveTextColor, - fontWeight: '400' - }, - '.isTabActive': { - 'NativeBase.Text': { - fontWeight: '900' - } - }, - flex: 1, - alignSelf: 'stretch', - alignItems: 'center', - justifyContent: 'center', - borderRadius: null, - borderBottomColor: 'transparent', - backgroundColor: variables.tabBgColor - }, - height: 45, - flexDirection: 'row', - justifyContent: 'space-around', - borderWidth: 1, - borderTopWidth: 0, - borderLeftWidth: 0, - borderRightWidth: 0, - borderBottomColor: '#ccc', - backgroundColor: variables.tabBgColor - }; - - return tabBarTheme; -}; diff --git a/native-base-theme/components/TabContainer.js b/native-base-theme/components/TabContainer.js deleted file mode 100644 index fa91548..0000000 --- a/native-base-theme/components/TabContainer.js +++ /dev/null @@ -1,26 +0,0 @@ -// @flow - -import { Platform } from 'react-native'; - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const platformStyle = variables.platformStyle; - - const tabContainerTheme = { - elevation: 3, - height: 50, - flexDirection: 'row', - shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined, - shadowOffset: - platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined, - shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined, - shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined, - justifyContent: 'space-around', - borderBottomWidth: Platform.OS === PLATFORM.IOS ? variables.borderWidth : 0, - borderColor: variables.topTabBarBorderColor - }; - - return tabContainerTheme; -}; diff --git a/native-base-theme/components/TabHeading.js b/native-base-theme/components/TabHeading.js deleted file mode 100644 index 74cd6f4..0000000 --- a/native-base-theme/components/TabHeading.js +++ /dev/null @@ -1,40 +0,0 @@ -// @flow - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const platform = variables.platform; - - const tabHeadingTheme = { - flexDirection: 'row', - backgroundColor: variables.tabDefaultBg, - flex: 1, - alignItems: 'center', - justifyContent: 'center', - '.scrollable': { - paddingHorizontal: 20, - flex: platform === PLATFORM.ANDROID ? 0 : 1, - minWidth: platform === PLATFORM.ANDROID ? undefined : 60 - }, - 'NativeBase.Text': { - color: variables.topTabBarTextColor, - marginHorizontal: 7 - }, - 'NativeBase.Icon': { - color: variables.topTabBarTextColor, - fontSize: platform === PLATFORM.IOS ? 26 : undefined - }, - '.active': { - 'NativeBase.Text': { - color: variables.topTabBarActiveTextColor, - fontWeight: '600' - }, - 'NativeBase.Icon': { - color: variables.topTabBarActiveTextColor - } - } - }; - - return tabHeadingTheme; -}; diff --git a/native-base-theme/components/Text.js b/native-base-theme/components/Text.js deleted file mode 100644 index 8c3fa24..0000000 --- a/native-base-theme/components/Text.js +++ /dev/null @@ -1,17 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const textTheme = { - fontSize: variables.DefaultFontSize, - fontFamily: variables.fontFamily, - color: variables.textColor, - '.note': { - color: '#a7a7a7', - fontSize: variables.noteFontSize - } - }; - - return textTheme; -}; diff --git a/native-base-theme/components/Textarea.js b/native-base-theme/components/Textarea.js deleted file mode 100644 index a46d93b..0000000 --- a/native-base-theme/components/Textarea.js +++ /dev/null @@ -1,25 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const textAreaTheme = { - '.underline': { - borderBottomWidth: variables.borderWidth, - marginTop: 5, - borderColor: variables.inputBorderColor - }, - '.bordered': { - borderWidth: 1, - marginTop: 5, - borderColor: variables.inputBorderColor - }, - color: variables.textColor, - paddingLeft: 10, - paddingRight: 5, - fontSize: 15, - textAlignVertical: 'top' - }; - - return textAreaTheme; -}; diff --git a/native-base-theme/components/Thumbnail.js b/native-base-theme/components/Thumbnail.js deleted file mode 100644 index c6c9f68..0000000 --- a/native-base-theme/components/Thumbnail.js +++ /dev/null @@ -1,40 +0,0 @@ -// @flow - -export default () => { - const thumbnailTheme = { - '.square': { - borderRadius: 0, - '.small': { - width: 36, - height: 36, - borderRadius: 0 - }, - '.large': { - width: 80, - height: 80, - borderRadius: 0 - } - }, - '.small': { - width: 36, - height: 36, - borderRadius: 18, - '.square': { - borderRadius: 0 - } - }, - '.large': { - width: 80, - height: 80, - borderRadius: 40, - '.square': { - borderRadius: 0 - } - }, - width: 56, - height: 56, - borderRadius: 28 - }; - - return thumbnailTheme; -}; diff --git a/native-base-theme/components/Title.js b/native-base-theme/components/Title.js deleted file mode 100644 index 33e96bf..0000000 --- a/native-base-theme/components/Title.js +++ /dev/null @@ -1,21 +0,0 @@ -// @flow - -import { Platform } from 'react-native'; - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const titleTheme = { - fontSize: variables.titleFontSize, - fontFamily: variables.titleFontfamily, - color: variables.titleFontColor, - fontWeight: Platform.OS === PLATFORM.IOS ? '700' : undefined, - textAlign: 'center', - paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0, - marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3, - paddingTop: 1 - }; - - return titleTheme; -}; diff --git a/native-base-theme/components/Toast.js b/native-base-theme/components/Toast.js deleted file mode 100644 index f01db74..0000000 --- a/native-base-theme/components/Toast.js +++ /dev/null @@ -1,41 +0,0 @@ -// @flow - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const platform = variables.platform; - - const toastTheme = { - '.danger': { - backgroundColor: variables.brandDanger - }, - '.warning': { - backgroundColor: variables.brandWarning - }, - '.success': { - backgroundColor: variables.brandSuccess - }, - backgroundColor: 'rgba(0,0,0,0.8)', - borderRadius: platform === PLATFORM.IOS ? 5 : 0, - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - padding: 10, - minHeight: 50, - 'NativeBase.Text': { - color: '#fff', - flex: 1 - }, - 'NativeBase.Button': { - backgroundColor: 'transparent', - height: 30, - elevation: 0, - 'NativeBase.Text': { - fontSize: 14 - } - } - }; - - return toastTheme; -}; diff --git a/native-base-theme/components/View.js b/native-base-theme/components/View.js deleted file mode 100644 index 827581e..0000000 --- a/native-base-theme/components/View.js +++ /dev/null @@ -1,13 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const viewTheme = { - '.padder': { - padding: variables.contentPadding - } - }; - - return viewTheme; -}; diff --git a/native-base-theme/components/index.js b/native-base-theme/components/index.js deleted file mode 100644 index 8b6be3e..0000000 --- a/native-base-theme/components/index.js +++ /dev/null @@ -1,249 +0,0 @@ -/* eslint-disable no-param-reassign */ -// @flow - -import _ from 'lodash'; - -import bodyTheme from './Body'; -import leftTheme from './Left'; -import rightTheme from './Right'; -import headerTheme from './Header'; -import switchTheme from './Switch'; -import thumbnailTheme from './Thumbnail'; -import containerTheme from './Container'; -import contentTheme from './Content'; -import buttonTheme from './Button'; -import titleTheme from './Title'; -import subtitleTheme from './Subtitle'; -import inputGroupTheme from './InputGroup'; -import badgeTheme from './Badge'; -import checkBoxTheme from './CheckBox'; -import cardTheme from './Card'; -import radioTheme from './Radio'; -import h3Theme from './H3'; -import h2Theme from './H2'; -import h1Theme from './H1'; -import footerTheme from './Footer'; -import footerTabTheme from './FooterTab'; -import fabTheme from './Fab'; -import itemTheme from './Item'; -import labelTheme from './Label'; -import textAreaTheme from './Textarea'; -import textTheme from './Text'; -import toastTheme from './Toast'; -import tabTheme from './Tab'; -import tabBarTheme from './TabBar'; -import tabContainerTheme from './TabContainer'; -import viewTheme from './View'; -import tabHeadingTheme from './TabHeading'; -import iconTheme from './Icon'; -import inputTheme from './Input'; -import swipeRowTheme from './SwipeRow'; -import segmentTheme from './Segment'; -import spinnerTheme from './Spinner'; -import cardItemTheme from './CardItem'; -import listItemTheme from './ListItem'; -import formTheme from './Form'; -import separatorTheme from './Separator'; -import pickerTheme from './Picker'; -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const theme = { - variables, - 'NativeBase.Left': { - ...leftTheme(variables) - }, - 'NativeBase.Right': { - ...rightTheme(variables) - }, - 'NativeBase.Body': { - ...bodyTheme(variables) - }, - - 'NativeBase.Header': { - ...headerTheme(variables) - }, - - 'NativeBase.Button': { - ...buttonTheme(variables) - }, - - 'NativeBase.Title': { - ...titleTheme(variables) - }, - 'NativeBase.Subtitle': { - ...subtitleTheme(variables) - }, - - 'NativeBase.InputGroup': { - ...inputGroupTheme(variables) - }, - - 'NativeBase.Input': { - ...inputTheme(variables) - }, - - 'NativeBase.Badge': { - ...badgeTheme(variables) - }, - - 'NativeBase.CheckBox': { - ...checkBoxTheme(variables) - }, - - 'NativeBase.Radio': { - ...radioTheme(variables) - }, - - 'NativeBase.Card': { - ...cardTheme(variables) - }, - - 'NativeBase.CardItem': { - ...cardItemTheme(variables) - }, - - 'NativeBase.Toast': { - ...toastTheme(variables) - }, - - 'NativeBase.H1': { - ...h1Theme(variables) - }, - 'NativeBase.H2': { - ...h2Theme(variables) - }, - 'NativeBase.H3': { - ...h3Theme(variables) - }, - 'NativeBase.Form': { - ...formTheme(variables) - }, - - 'NativeBase.Container': { - ...containerTheme(variables) - }, - 'NativeBase.Content': { - ...contentTheme(variables) - }, - - 'NativeBase.Footer': { - ...footerTheme(variables) - }, - - 'NativeBase.Tabs': { - flex: 1 - }, - - 'NativeBase.FooterTab': { - ...footerTabTheme(variables) - }, - - 'NativeBase.ListItem': { - ...listItemTheme(variables) - }, - - 'NativeBase.ListItem1': { - ...listItemTheme(variables) - }, - - 'NativeBase.Icon': { - ...iconTheme(variables) - }, - 'NativeBase.IconNB': { - ...iconTheme(variables) - }, - 'NativeBase.Text': { - ...textTheme(variables) - }, - 'NativeBase.Spinner': { - ...spinnerTheme(variables) - }, - - 'NativeBase.Fab': { - ...fabTheme(variables) - }, - - 'NativeBase.Item': { - ...itemTheme(variables) - }, - - 'NativeBase.Label': { - ...labelTheme(variables) - }, - - 'NativeBase.Textarea': { - ...textAreaTheme(variables) - }, - - 'NativeBase.PickerNB': { - ...pickerTheme(variables), - 'NativeBase.Button': { - 'NativeBase.Text': {} - } - }, - - 'NativeBase.Tab': { - ...tabTheme(variables) - }, - - 'NativeBase.Segment': { - ...segmentTheme(variables) - }, - - 'NativeBase.TabBar': { - ...tabBarTheme(variables) - }, - 'NativeBase.ViewNB': { - ...viewTheme(variables) - }, - 'NativeBase.TabHeading': { - ...tabHeadingTheme(variables) - }, - 'NativeBase.TabContainer': { - ...tabContainerTheme(variables) - }, - 'NativeBase.Switch': { - ...switchTheme(variables) - }, - 'NativeBase.Separator': { - ...separatorTheme(variables) - }, - 'NativeBase.SwipeRow': { - ...swipeRowTheme(variables) - }, - 'NativeBase.Thumbnail': { - ...thumbnailTheme(variables) - } - }; - - const cssifyTheme = (grandparent, parent, parentKey) => { - _.forEach(parent, (style, styleName) => { - if ( - styleName.indexOf('.') === 0 && - parentKey && - parentKey.indexOf('.') === 0 - ) { - if (grandparent) { - if (!grandparent[styleName]) { - grandparent[styleName] = {}; - } else { - grandparent[styleName][parentKey] = style; - } - } - } - if ( - style && - typeof style === 'object' && - styleName !== 'fontVariant' && - styleName !== 'transform' - ) { - cssifyTheme(parent, style, styleName); - } - }); - }; - - cssifyTheme(null, theme, null); - - return theme; -}; diff --git a/native-base-theme/variables/commonColor.js b/native-base-theme/variables/commonColor.js deleted file mode 100644 index 5b3aa80..0000000 --- a/native-base-theme/variables/commonColor.js +++ /dev/null @@ -1,311 +0,0 @@ -// @flow - -import color from 'color'; -import { Platform, Dimensions, PixelRatio } from 'react-native'; - -export const PLATFORM = { - ANDROID: 'android', - IOS: 'ios', - MATERIAL: 'material', - WEB: 'web' -}; - -const deviceHeight = Dimensions.get('window').height; -const deviceWidth = Dimensions.get('window').width; -const platform = Platform.OS; -const platformStyle = undefined; -const isIphoneX = - platform === PLATFORM.IOS && - (deviceHeight === 812 || - deviceWidth === 812 || - deviceHeight === 896 || - deviceWidth === 896); - -export default { - platformStyle, - platform, - - // Accordion - headerStyle: '#edebed', - iconStyle: '#000', - contentStyle: '#f5f4f5', - expandedIconStyle: '#000', - accordionBorderColor: '#d3d3d3', - - // ActionSheet - elevation: 4, - containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)', - innerTouchableBackgroundColor: '#fff', - listItemHeight: 50, - listItemBorderColor: 'transparent', - marginHorizontal: -15, - marginLeft: 14, - marginTop: 15, - minHeight: 56, - padding: 15, - touchableTextColor: '#757575', - - // Android - androidRipple: true, - androidRippleColor: 'rgba(256, 256, 256, 0.3)', - androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', - buttonUppercaseAndroidText: true, - - // Badge - badgeBg: '#ED1727', - badgeColor: '#fff', - badgePadding: platform === PLATFORM.IOS ? 3 : 0, - - // Button - buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', - buttonDisabledBg: '#b5b5b5', - buttonPadding: 6, - get buttonPrimaryBg() { - return this.brandPrimary; - }, - get buttonPrimaryColor() { - return this.inverseTextColor; - }, - get buttonInfoBg() { - return this.brandInfo; - }, - get buttonInfoColor() { - return this.inverseTextColor; - }, - get buttonSuccessBg() { - return this.brandSuccess; - }, - get buttonSuccessColor() { - return this.inverseTextColor; - }, - get buttonDangerBg() { - return this.brandDanger; - }, - get buttonDangerColor() { - return this.inverseTextColor; - }, - get buttonWarningBg() { - return this.brandWarning; - }, - get buttonWarningColor() { - return this.inverseTextColor; - }, - get buttonTextSize() { - return platform === PLATFORM.IOS - ? this.fontSizeBase * 1.1 - : this.fontSizeBase - 1; - }, - get buttonTextSizeLarge() { - return this.fontSizeBase * 1.5; - }, - get buttonTextSizeSmall() { - return this.fontSizeBase * 0.8; - }, - get borderRadiusLarge() { - return this.fontSizeBase * 3.8; - }, - get iconSizeLarge() { - return this.iconFontSize * 1.5; - }, - get iconSizeSmall() { - return this.iconFontSize * 0.6; - }, - - // Card - cardDefaultBg: '#fff', - cardBorderColor: '#ccc', - cardBorderRadius: 2, - cardItemPadding: platform === PLATFORM.IOS ? 10 : 12, - - // CheckBox - CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0, - CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2, - CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2, - CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5, - CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16, - CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1, - CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17, - checkboxBgColor: '#039BE5', - checkboxSize: 20, - checkboxTickColor: '#fff', - - // Color - brandPrimary: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5', - brandInfo: '#62B1F6', - brandSuccess: '#5cb85c', - brandDanger: '#d9534f', - brandWarning: '#f0ad4e', - brandDark: '#000', - brandLight: '#f4f4f4', - - // Container - containerBgColor: '#fff', - - // Date Picker - datePickerTextColor: '#000', - datePickerBg: 'transparent', - - // FAB - fabWidth: 56, - - // Font - DefaultFontSize: 16, - fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto', - fontSizeBase: 15, - get fontSizeH1() { - return this.fontSizeBase * 1.8; - }, - get fontSizeH2() { - return this.fontSizeBase * 1.6; - }, - get fontSizeH3() { - return this.fontSizeBase * 1.4; - }, - - // Footer - footerHeight: 55, - footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', - footerPaddingBottom: 0, - - // FooterTab - tabBarTextColor: platform === PLATFORM.IOS ? '#737373' : '#bfc6ea', - tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11, - activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff', - sTabBarActiveTextColor: '#007aff', - tabBarActiveTextColor: platform === PLATFORM.IOS ? '#2874F0' : '#fff', - tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5', - - // Header - toolbarBtnColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', - toolbarHeight: platform === PLATFORM.IOS ? 64 : 56, - toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23, - toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff', - searchBarHeight: platform === PLATFORM.IOS ? 30 : 40, - searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50, - toolbarBtnTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - iosStatusbar: 'dark-content', - toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5', - get statusBarColor() { - return color(this.toolbarDefaultBg) - .darken(0.2) - .hex(); - }, - get darkenHeader() { - return color(this.tabBgColor) - .darken(0.03) - .hex(); - }, - - // Icon - iconFamily: 'Ionicons', - iconFontSize: platform === PLATFORM.IOS ? 30 : 28, - iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24, - - // InputGroup - inputFontSize: 17, - inputBorderColor: '#D9D5DC', - inputSuccessBorderColor: '#2b8339', - inputErrorBorderColor: '#ed2f2f', - inputHeightBase: 50, - get inputColor() { - return this.textColor; - }, - get inputColorPlaceholder() { - return '#575757'; - }, - - // Line Height - buttonLineHeight: 19, - lineHeightH1: 32, - lineHeightH2: 27, - lineHeightH3: 22, - lineHeight: platform === PLATFORM.IOS ? 20 : 24, - - // List - listBg: 'transparent', - listBorderColor: '#c9c9c9', - listDividerBg: '#f4f4f4', - listBtnUnderlayColor: '#DDD', - listItemPadding: platform === PLATFORM.IOS ? 10 : 12, - listNoteColor: '#808080', - listNoteSize: 13, - listItemSelected: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5', - - // Progress Bar - defaultProgressColor: '#E4202D', - inverseProgressColor: '#1A191B', - - // Radio Button - radioBtnSize: platform === PLATFORM.IOS ? 25 : 23, - radioSelectedColorAndroid: '#3F51B5', - radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24, - get radioColor() { - return this.brandPrimary; - }, - - // Segment - segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', - segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5', - segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5', - - // Spinner - defaultSpinnerColor: '#45D56E', - inverseSpinnerColor: '#1A191B', - - // Tab - tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', - topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9', - topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff', - topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - - // Tabs - tabBgColor: '#F8F8F8', - tabFontSize: 15, - - // Text - textColor: '#000', - inverseTextColor: '#fff', - noteFontSize: 14, - get defaultTextColor() { - return this.textColor; - }, - - // Title - titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', - titleFontSize: platform === PLATFORM.IOS ? 17 : 19, - subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14, - subtitleColor: platform === PLATFORM.IOS ? '#000' : '#fff', - titleFontColor: platform === PLATFORM.IOS ? '#000' : '#fff', - - // Other - borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2, - borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), - contentPadding: 10, - dropdownLinkColor: '#414142', - inputLineHeight: 24, - deviceWidth, - deviceHeight, - isIphoneX, - inputGroupRoundedBorderRadius: 30, - - // iPhoneX SafeArea - Inset: { - portrait: { - topInset: 24, - leftInset: 0, - rightInset: 0, - bottomInset: 34 - }, - landscape: { - topInset: 0, - leftInset: 44, - rightInset: 44, - bottomInset: 21 - } - } -}; diff --git a/native-base-theme/variables/material.js b/native-base-theme/variables/material.js deleted file mode 100644 index 13329ff..0000000 --- a/native-base-theme/variables/material.js +++ /dev/null @@ -1,304 +0,0 @@ -// @flow - -import color from 'color'; -import { Platform, Dimensions, PixelRatio } from 'react-native'; - -import { PLATFORM } from './commonColor'; - -const deviceHeight = Dimensions.get('window').height; -const deviceWidth = Dimensions.get('window').width; -const platform = Platform.OS; -const platformStyle = PLATFORM.MATERIAL; -const isIphoneX = - platform === PLATFORM.IOS && - (deviceHeight === 812 || - deviceWidth === 812 || - deviceHeight === 896 || - deviceWidth === 896); - -export default { - platformStyle, - platform, - - // Accordion - headerStyle: '#edebed', - iconStyle: '#000', - contentStyle: '#f5f4f5', - expandedIconStyle: '#000', - accordionBorderColor: '#d3d3d3', - - // ActionSheet - elevation: 4, - containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)', - innerTouchableBackgroundColor: '#fff', - listItemHeight: 50, - listItemBorderColor: 'transparent', - marginHorizontal: -15, - marginLeft: 14, - marginTop: 15, - minHeight: 56, - padding: 15, - touchableTextColor: '#757575', - - // Android - androidRipple: true, - androidRippleColor: 'rgba(256, 256, 256, 0.3)', - androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', - buttonUppercaseAndroidText: true, - - // Badge - badgeBg: '#ED1727', - badgeColor: '#fff', - badgePadding: 0, - - // Button - buttonFontFamily: 'Roboto', - buttonDisabledBg: '#b5b5b5', - buttonPadding: 6, - get buttonPrimaryBg() { - return this.brandPrimary; - }, - get buttonPrimaryColor() { - return this.inverseTextColor; - }, - get buttonInfoBg() { - return this.brandInfo; - }, - get buttonInfoColor() { - return this.inverseTextColor; - }, - get buttonSuccessBg() { - return this.brandSuccess; - }, - get buttonSuccessColor() { - return this.inverseTextColor; - }, - get buttonDangerBg() { - return this.brandDanger; - }, - get buttonDangerColor() { - return this.inverseTextColor; - }, - get buttonWarningBg() { - return this.brandWarning; - }, - get buttonWarningColor() { - return this.inverseTextColor; - }, - get buttonTextSize() { - return this.fontSizeBase - 1; - }, - get buttonTextSizeLarge() { - return this.fontSizeBase * 1.5; - }, - get buttonTextSizeSmall() { - return this.fontSizeBase * 0.8; - }, - get borderRadiusLarge() { - return this.fontSizeBase * 3.8; - }, - get iconSizeLarge() { - return this.iconFontSize * 1.5; - }, - get iconSizeSmall() { - return this.iconFontSize * 0.6; - }, - - // Card - cardDefaultBg: '#fff', - cardBorderColor: '#ccc', - cardBorderRadius: 2, - cardItemPadding: platform === PLATFORM.IOS ? 10 : 12, - - // CheckBox - CheckboxRadius: 0, - CheckboxBorderWidth: 2, - CheckboxPaddingLeft: 2, - CheckboxPaddingBottom: 5, - CheckboxIconSize: 16, - CheckboxIconMarginTop: 1, - CheckboxFontSize: 17, - checkboxBgColor: '#039BE5', - checkboxSize: 20, - checkboxTickColor: '#fff', - - // Color - brandPrimary: '#3F51B5', - brandInfo: '#62B1F6', - brandSuccess: '#5cb85c', - brandDanger: '#d9534f', - brandWarning: '#f0ad4e', - brandDark: '#000', - brandLight: '#f4f4f4', - - // Container - containerBgColor: '#fff', - - // Date Picker - datePickerTextColor: '#000', - datePickerBg: 'transparent', - - // FAB - fabWidth: 56, - - // Font - DefaultFontSize: 16, - fontFamily: 'Roboto', - fontSizeBase: 15, - get fontSizeH1() { - return this.fontSizeBase * 1.8; - }, - get fontSizeH2() { - return this.fontSizeBase * 1.6; - }, - get fontSizeH3() { - return this.fontSizeBase * 1.4; - }, - - // Footer - footerHeight: 55, - footerDefaultBg: '#3F51B5', - footerPaddingBottom: 0, - - // FooterTab - tabBarTextColor: '#bfc6ea', - tabBarTextSize: 11, - activeTab: '#fff', - sTabBarActiveTextColor: '#007aff', - tabBarActiveTextColor: '#fff', - tabActiveBgColor: '#3F51B5', - - // Header - toolbarBtnColor: '#fff', - toolbarDefaultBg: '#3F51B5', - toolbarHeight: 56, - toolbarSearchIconSize: 23, - toolbarInputColor: '#fff', - searchBarHeight: platform === PLATFORM.IOS ? 30 : 40, - searchBarInputHeight: platform === PLATFORM.IOS ? 40 : 50, - toolbarBtnTextColor: '#fff', - toolbarDefaultBorder: '#3F51B5', - iosStatusbar: 'light-content', - get statusBarColor() { - return color(this.toolbarDefaultBg) - .darken(0.2) - .hex(); - }, - get darkenHeader() { - return color(this.tabBgColor) - .darken(0.03) - .hex(); - }, - - // Icon - iconFamily: 'Ionicons', - iconFontSize: 28, - iconHeaderSize: 24, - - // InputGroup - inputFontSize: 17, - inputBorderColor: '#D9D5DC', - inputSuccessBorderColor: '#2b8339', - inputErrorBorderColor: '#ed2f2f', - inputHeightBase: 50, - get inputColor() { - return this.textColor; - }, - get inputColorPlaceholder() { - return '#575757'; - }, - - // Line Height - buttonLineHeight: 19, - lineHeightH1: 32, - lineHeightH2: 27, - lineHeightH3: 22, - lineHeight: 24, - - // List - listBg: 'transparent', - listBorderColor: '#c9c9c9', - listDividerBg: '#f4f4f4', - listBtnUnderlayColor: '#DDD', - listItemPadding: 12, - listNoteColor: '#808080', - listNoteSize: 13, - listItemSelected: '#3F51B5', - - // Progress Bar - defaultProgressColor: '#E4202D', - inverseProgressColor: '#1A191B', - - // Radio Button - radioBtnSize: 23, - radioSelectedColorAndroid: '#3F51B5', - radioBtnLineHeight: 24, - get radioColor() { - return this.brandPrimary; - }, - - // Segment - segmentBackgroundColor: '#3F51B5', - segmentActiveBackgroundColor: '#fff', - segmentTextColor: '#fff', - segmentActiveTextColor: '#3F51B5', - segmentBorderColor: '#fff', - segmentBorderColorMain: '#3F51B5', - - // Spinner - defaultSpinnerColor: '#45D56E', - inverseSpinnerColor: '#1A191B', - - // Tab - tabDefaultBg: '#3F51B5', - topTabBarTextColor: '#b3c7f9', - topTabBarActiveTextColor: '#fff', - topTabBarBorderColor: '#fff', - topTabBarActiveBorderColor: '#fff', - - // Tabs - tabBgColor: '#F8F8F8', - tabFontSize: 15, - - // Text - textColor: '#000', - inverseTextColor: '#fff', - noteFontSize: 14, - get defaultTextColor() { - return this.textColor; - }, - - // Title - titleFontfamily: 'Roboto', - titleFontSize: 19, - subTitleFontSize: 14, - subtitleColor: '#FFF', - titleFontColor: '#FFF', - - // Other - borderRadiusBase: 2, - borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), - contentPadding: 10, - dropdownLinkColor: '#414142', - inputLineHeight: 24, - deviceWidth, - deviceHeight, - isIphoneX, - inputGroupRoundedBorderRadius: 30, - - // iPhoneX SafeArea - Inset: { - portrait: { - topInset: 24, - leftInset: 0, - rightInset: 0, - bottomInset: 34 - }, - landscape: { - topInset: 0, - leftInset: 44, - rightInset: 44, - bottomInset: 21 - } - } -}; diff --git a/native-base-theme/variables/platform.js b/native-base-theme/variables/platform.js deleted file mode 100644 index 0e708c6..0000000 --- a/native-base-theme/variables/platform.js +++ /dev/null @@ -1,362 +0,0 @@ -// @flow - -import color from 'color'; -import { Platform, Dimensions, PixelRatio } from 'react-native'; - -import { PLATFORM } from './commonColor'; - -const deviceHeight = Dimensions.get('window').height; -const deviceWidth = Dimensions.get('window').width; -const platform = Platform.OS; -const platformStyle = undefined; -const isIphoneX = - platform === PLATFORM.IOS && - (deviceHeight === 812 || - deviceWidth === 812 || - deviceHeight === 896 || - deviceWidth === 896); - -export default { - platformStyle, - platform, - - // Accordion - accordionBorderColor: '#d3d3d3', - accordionContentPadding: 10, - accordionIconFontSize: 18, - contentStyle: '#f5f4f5', - expandedIconStyle: '#000', - headerStyle: '#edebed', - iconStyle: '#000', - - // ActionSheet - elevation: 4, - containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)', - innerTouchableBackgroundColor: '#fff', - listItemHeight: 50, - listItemBorderColor: 'transparent', - marginHorizontal: -15, - marginLeft: 14, - marginTop: 15, - minHeight: 56, - padding: 15, - touchableTextColor: '#757575', - - // Android - androidRipple: true, - androidRippleColor: 'rgba(256, 256, 256, 0.3)', - androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', - buttonUppercaseAndroidText: true, - - // Badge - badgeBg: '#ED1727', - badgeColor: '#fff', - badgePadding: platform === PLATFORM.IOS ? 3 : 0, - - // Button - buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', - buttonTextColor: '#fff', - buttonDisabledBg: '#b5b5b5', - buttonPadding: 6, - buttonDefaultActiveOpacity: 0.5, - buttonDefaultFlex: 1, - buttonDefaultBorderRadius: 2, - buttonDefaultBorderWidth: 1, - get buttonPrimaryBg() { - return this.brandPrimary; - }, - get buttonPrimaryColor() { - return this.inverseTextColor; - }, - get buttonInfoBg() { - return this.brandInfo; - }, - get buttonInfoColor() { - return this.inverseTextColor; - }, - get buttonSuccessBg() { - return this.brandSuccess; - }, - get buttonSuccessColor() { - return this.inverseTextColor; - }, - get buttonDangerBg() { - return this.brandDanger; - }, - get buttonDangerColor() { - return this.inverseTextColor; - }, - get buttonWarningBg() { - return this.brandWarning; - }, - get buttonWarningColor() { - return this.inverseTextColor; - }, - get buttonTextSize() { - return platform === PLATFORM.IOS - ? this.fontSizeBase * 1.1 - : this.fontSizeBase - 1; - }, - get buttonTextSizeLarge() { - return this.fontSizeBase * 1.5; - }, - get buttonTextSizeSmall() { - return this.fontSizeBase * 0.8; - }, - get borderRadiusLarge() { - return this.fontSizeBase * 3.8; - }, - get iconSizeLarge() { - return this.iconFontSize * 1.5; - }, - get iconSizeSmall() { - return this.iconFontSize * 0.6; - }, - - // Card - cardDefaultBg: '#fff', - cardBorderColor: '#ccc', - cardBorderRadius: 2, - cardItemPadding: platform === PLATFORM.IOS ? 10 : 12, - - // CheckBox - CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0, - CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2, - CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2, - CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5, - CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16, - CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1, - CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17, - checkboxBgColor: '#be1522', - checkboxSize: 20, - checkboxTickColor: '#fff', - checkboxDefaultColor: 'transparent', - checkboxTextShadowRadius: 0, - - // Color - brandPrimary: '#be1522', - brandInfo: '#62B1F6', - brandSuccess: '#5cb85c', - brandDanger: '#d9534f', - brandWarning: '#f0ad4e', - brandDark: '#000', - brandLight: '#f4f4f4', - - // Container - containerBgColor: '#fff', - sideMenuBgColor: "#f2f2f2", - - // Date Picker - datePickerFlex: 1, - datePickerPadding: 10, - datePickerTextColor: '#000', - datePickerBg: 'transparent', - - // FAB - fabBackgroundColor: 'blue', - fabBorderRadius: 28, - fabBottom: 0, - fabButtonBorderRadius: 20, - fabButtonHeight: 40, - fabButtonLeft: 7, - fabButtonMarginBottom: 10, - fabContainerBottom: 20, - fabDefaultPosition: 20, - fabElevation: 4, - fabIconColor: '#fff', - fabIconSize: 24, - fabShadowColor: '#000', - fabShadowOffsetHeight: 2, - fabShadowOffsetWidth: 0, - fabShadowOpacity: 0.4, - fabShadowRadius: 2, - fabWidth: 56, - - // Font - DefaultFontSize: 16, - fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto', - fontSizeBase: 15, - get fontSizeH1() { - return this.fontSizeBase * 1.8; - }, - get fontSizeH2() { - return this.fontSizeBase * 1.6; - }, - get fontSizeH3() { - return this.fontSizeBase * 1.4; - }, - - // Footer - footerHeight: 55, - footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522', - footerPaddingBottom: 0, - - // FooterTab - tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9', - tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11, - activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff', - sTabBarActiveTextColor: '#007aff', - tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5', - - // Header - toolbarBtnColor: platform === PLATFORM.IOS ? '#be1522' : '#fff', - toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522', - toolbarHeight: platform === PLATFORM.IOS ? 64 : 56, - toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23, - toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff', - searchBarHeight: platform === PLATFORM.IOS ? 30 : 40, - searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50, - toolbarBtnTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff', - toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#be1522', - iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content', - toolbarTextColor: platform === PLATFORM.IOS ? '#000000' : '#ffffff', - get statusBarColor() { - return color(this.toolbarDefaultBg) - .darken(0.2) - .hex(); - }, - get darkenHeader() { - return color(this.tabBgColor) - .darken(0.03) - .hex(); - }, - - // Icon - iconFamily: 'Ionicons', - iconFontSize: platform === PLATFORM.IOS ? 30 : 28, - iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24, - - // InputGroup - inputFontSize: 17, - inputBorderColor: '#D9D5DC', - inputSuccessBorderColor: '#2b8339', - inputErrorBorderColor: '#ed2f2f', - inputHeightBase: 50, - get inputColor() { - return this.textColor; - }, - get inputColorPlaceholder() { - return '#575757'; - }, - - // Line Height - buttonLineHeight: 19, - lineHeightH1: 32, - lineHeightH2: 27, - lineHeightH3: 22, - lineHeight: platform === PLATFORM.IOS ? 20 : 24, - listItemSelected: '#be1522', - - // List - listBg: 'transparent', - listBorderColor: '#c9c9c9', - listDividerBg: '#e2e2e2', - listBtnUnderlayColor: '#DDD', - listItemPadding: platform === PLATFORM.IOS ? 10 : 12, - listNoteColor: '#808080', - listNoteSize: 13, - - // Progress Bar - defaultProgressColor: '#E4202D', - inverseProgressColor: '#1A191B', - - // Radio Button - radioBtnSize: platform === PLATFORM.IOS ? 25 : 23, - radioSelectedColorAndroid: '#be1522', - radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24, - get radioColor() { - return this.brandPrimary; - }, - - // Segment - segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', - segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5', - segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5', - - // Spinner - defaultSpinnerColor: '#be1522', - inverseSpinnerColor: '#1A191B', - - // Tab - tabBarDisabledTextColor: '#BDBDBD', - tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522', - topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9', - topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff', - topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff', - topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#be1522' : '#fff', - - // Tabs - tabBgColor: '#F8F8F8', - tabIconColor: platform === "ios" ? "#5d5d5d" : "#fff", - tabFontSize: 15, - - // Text - textColor: '#000', - textDisabledColor: "#c1c1c1", - inverseTextColor: '#fff', - noteFontSize: 14, - get defaultTextColor() { - return this.textColor; - }, - - // Title - titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', - titleFontSize: platform === PLATFORM.IOS ? 17 : 19, - subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14, - subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF', - titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF', - - // CUSTOM - customMaterialIconColor: "#5d5d5d", - fetchedDataSectionListErrorText: "#898989", - - // Calendar/Agenda - agendaBackgroundColor: '#f3f3f4', - agendaEmptyLine: '#dbdbdc', - - // PROXIWASH - proxiwashFinishedColor: "rgba(54,165,22,0.31)", - proxiwashReadyColor: "transparent", - proxiwashRunningColor: "rgba(94,104,241,0.3)", - proxiwashBrokenColor: "rgba(162,162,162,0.31)", - proxiwashErrorColor: "rgba(204,7,0,0.31)", - - // Screens - planningColor: '#d9b10a', - proximoColor: '#ec5904', - proxiwashColor: '#1fa5ee', - menuColor: '#e91314', - tutorinsaColor: '#f93943', - - - // Other - borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2, - borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), - contentPadding: 10, - dropdownLinkColor: '#414142', - inputLineHeight: 24, - deviceWidth, - deviceHeight, - isIphoneX, - inputGroupRoundedBorderRadius: 30, - - // iPhoneX SafeArea - Inset: { - portrait: { - topInset: 24, - leftInset: 0, - rightInset: 0, - bottomInset: 34 - }, - landscape: { - topInset: 0, - leftInset: 44, - rightInset: 44, - bottomInset: 21 - } - } -}; diff --git a/native-base-theme/variables/platformDark.js b/native-base-theme/variables/platformDark.js deleted file mode 100644 index 2b5e1a4..0000000 --- a/native-base-theme/variables/platformDark.js +++ /dev/null @@ -1,362 +0,0 @@ -// @flow - -import color from 'color'; -import { Platform, Dimensions, PixelRatio } from 'react-native'; - -import { PLATFORM } from './commonColor'; - -const deviceHeight = Dimensions.get('window').height; -const deviceWidth = Dimensions.get('window').width; -const platform = Platform.OS; -const platformStyle = undefined; -const isIphoneX = - platform === PLATFORM.IOS && - (deviceHeight === 812 || - deviceWidth === 812 || - deviceHeight === 896 || - deviceWidth === 896); - -export default { - platformStyle, - platform, - - // Accordion - accordionBorderColor: '#d3d3d3', - accordionContentPadding: 10, - accordionIconFontSize: 18, - contentStyle: '#f5f4f5', - expandedIconStyle: '#000', - headerStyle: '#edebed', - iconStyle: '#000', - - // ActionSheet - elevation: 4, - containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)', - innerTouchableBackgroundColor: '#fff', - listItemHeight: 50, - listItemBorderColor: 'transparent', - marginHorizontal: -15, - marginLeft: 14, - marginTop: 15, - minHeight: 56, - padding: 15, - touchableTextColor: '#757575', - - // Android - androidRipple: true, - androidRippleColor: 'rgba(256, 256, 256, 0.3)', - androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', - buttonUppercaseAndroidText: true, - - // Badge - badgeBg: '#ED1727', - badgeColor: '#fff', - badgePadding: platform === PLATFORM.IOS ? 3 : 0, - - // Button - buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', - buttonTextColor: '#fff', - buttonDisabledBg: '#b5b5b5', - buttonPadding: 6, - buttonDefaultActiveOpacity: 0.5, - buttonDefaultFlex: 1, - buttonDefaultBorderRadius: 2, - buttonDefaultBorderWidth: 1, - get buttonPrimaryBg() { - return this.brandPrimary; - }, - get buttonPrimaryColor() { - return this.textColor; - }, - get buttonInfoBg() { - return this.brandInfo; - }, - get buttonInfoColor() { - return this.textColor; - }, - get buttonSuccessBg() { - return this.brandSuccess; - }, - get buttonSuccessColor() { - return this.textColor; - }, - get buttonDangerBg() { - return this.brandDanger; - }, - get buttonDangerColor() { - return this.textColor; - }, - get buttonWarningBg() { - return this.brandWarning; - }, - get buttonWarningColor() { - return this.textColor; - }, - get buttonTextSize() { - return platform === PLATFORM.IOS - ? this.fontSizeBase * 1.1 - : this.fontSizeBase - 1; - }, - get buttonTextSizeLarge() { - return this.fontSizeBase * 1.5; - }, - get buttonTextSizeSmall() { - return this.fontSizeBase * 0.8; - }, - get borderRadiusLarge() { - return this.fontSizeBase * 3.8; - }, - get iconSizeLarge() { - return this.iconFontSize * 1.5; - }, - get iconSizeSmall() { - return this.iconFontSize * 0.6; - }, - - // Card - cardDefaultBg: '#2A2A2A', - cardBorderColor: '#1a1a1a', - cardBorderRadius: 2, - cardItemPadding: platform === PLATFORM.IOS ? 10 : 12, - - // CheckBox - CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0, - CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2, - CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2, - CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5, - CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16, - CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1, - CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17, - checkboxBgColor: '#be1522', - checkboxSize: 20, - checkboxTickColor: '#fff', - checkboxDefaultColor: 'transparent', - checkboxTextShadowRadius: 0, - - // Color - brandPrimary: '#be1522', - brandInfo: '#62B1F6', - brandSuccess: '#5cb85c', - brandDanger: '#d9534f', - brandWarning: '#f0ad4e', - brandDark: '#000', - brandLight: '#f4f4f4', - - // Container - containerBgColor: '#222222', - sideMenuBgColor: "#1c1c1c", - - // Date Picker - datePickerFlex: 1, - datePickerPadding: 10, - datePickerTextColor: '#fff', - datePickerBg: 'transparent', - - // FAB - fabBackgroundColor: 'blue', - fabBorderRadius: 28, - fabBottom: 0, - fabButtonBorderRadius: 20, - fabButtonHeight: 40, - fabButtonLeft: 7, - fabButtonMarginBottom: 10, - fabContainerBottom: 20, - fabDefaultPosition: 20, - fabElevation: 4, - fabIconColor: '#fff', - fabIconSize: 24, - fabShadowColor: '#000', - fabShadowOffsetHeight: 2, - fabShadowOffsetWidth: 0, - fabShadowOpacity: 0.4, - fabShadowRadius: 2, - fabWidth: 56, - - // Font - DefaultFontSize: 16, - fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto', - fontSizeBase: 15, - get fontSizeH1() { - return this.fontSizeBase * 1.8; - }, - get fontSizeH2() { - return this.fontSizeBase * 1.6; - }, - get fontSizeH3() { - return this.fontSizeBase * 1.4; - }, - - // Footer - footerHeight: 55, - footerDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522', - footerPaddingBottom: 0, - - // FooterTab - tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9', - tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11, - activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff', - sTabBarActiveTextColor: '#007aff', - tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5', - - // Header - toolbarBtnColor: platform === PLATFORM.IOS ? '#be1522' : '#fff', - toolbarDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522', - toolbarHeight: platform === PLATFORM.IOS ? 64 : 56, - toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23, - toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff', - searchBarHeight: platform === PLATFORM.IOS ? 30 : 40, - searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50, - toolbarBtnTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff', - toolbarDefaultBorder: platform === PLATFORM.IOS ? '#3f3f3f' : '#be1522', - iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content', - toolbarTextColor: '#ffffff', - get statusBarColor() { - return color(this.toolbarDefaultBg) - .darken(0.2) - .hex(); - }, - get darkenHeader() { - return color(this.tabBgColor) - .darken(0.03) - .hex(); - }, - - // Icon - iconFamily: 'Ionicons', - iconFontSize: platform === PLATFORM.IOS ? 30 : 28, - iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24, - - // InputGroup - inputFontSize: 17, - inputBorderColor: '#D9D5DC', - inputSuccessBorderColor: '#2b8339', - inputErrorBorderColor: '#ed2f2f', - inputHeightBase: 50, - get inputColor() { - return this.textColor; - }, - get inputColorPlaceholder() { - return '#575757'; - }, - - // Line Height - buttonLineHeight: 19, - lineHeightH1: 32, - lineHeightH2: 27, - lineHeightH3: 22, - lineHeight: platform === PLATFORM.IOS ? 20 : 24, - listItemSelected: '#be1522', - - // List - listBg: 'transparent', - listBorderColor: '#3e3e3e', - listDividerBg: '#222222', - listBtnUnderlayColor: '#3a3a3a', - listItemPadding: platform === PLATFORM.IOS ? 10 : 12, - listNoteColor: '#acacac', - listNoteSize: 13, - - // Progress Bar - defaultProgressColor: '#E4202D', - inverseProgressColor: '#1A191B', - - // Radio Button - radioBtnSize: platform === PLATFORM.IOS ? 25 : 23, - radioSelectedColorAndroid: '#be1522', - radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24, - get radioColor() { - return this.brandPrimary; - }, - - // Segment - segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', - segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5', - segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5', - - // Spinner - defaultSpinnerColor: '#be1522', - inverseSpinnerColor: '#1A191B', - - // Tab - tabBarDisabledTextColor: '#BDBDBD', - tabDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522', - topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9', - topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff', - topTabBarBorderColor: platform === PLATFORM.IOS ? '#3f3f3f' : '#fff', - topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#be1522' : '#fff', - - // Tabs - tabBgColor: '#2b2b2b', - tabIconColor: "#fff", - tabFontSize: 15, - - // Text - textColor: '#ebebeb', - textDisabledColor: "#5b5b5b", - inverseTextColor: '#000', - noteFontSize: 14, - get defaultTextColor() { - return this.textColor; - }, - - // Title - titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', - titleFontSize: platform === PLATFORM.IOS ? 17 : 19, - subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14, - subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF', - titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF', - - // CUSTOM - customMaterialIconColor: "#b3b3b3", - fetchedDataSectionListErrorText: "#acacac", - - // Calendar/Agenda - agendaBackgroundColor: '#373737', - agendaEmptyLine: '#464646', - - // PROXIWASH - proxiwashFinishedColor: "rgba(17,149,32,0.53)", - proxiwashReadyColor: "transparent", - proxiwashRunningColor: "rgba(29,59,175,0.65)", - proxiwashBrokenColor: "#000000", - proxiwashErrorColor: "rgba(213,8,0,0.57)", - - // Screens - planningColor: '#d99e09', - proximoColor: '#ec5904', - proxiwashColor: '#1fa5ee', - menuColor: '#b81213', - tutorinsaColor: '#f93943', - - - // Other - borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2, - borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), - contentPadding: 10, - dropdownLinkColor: '#414142', - inputLineHeight: 24, - deviceWidth, - deviceHeight, - isIphoneX, - inputGroupRoundedBorderRadius: 30, - - // iPhoneX SafeArea - Inset: { - portrait: { - topInset: 24, - leftInset: 0, - rightInset: 0, - bottomInset: 34 - }, - landscape: { - topInset: 0, - leftInset: 44, - rightInset: 44, - bottomInset: 21 - } - } -}; diff --git a/navigation/DrawerNavigator.js b/navigation/DrawerNavigator.js index 0231262..a3a0f14 100644 --- a/navigation/DrawerNavigator.js +++ b/navigation/DrawerNavigator.js @@ -12,25 +12,12 @@ import BibScreen from "../screens/Websites/BibScreen"; import DebugScreen from '../screens/DebugScreen'; import Sidebar from "../components/Sidebar"; import {createStackNavigator, TransitionPresets} from "@react-navigation/stack"; -import PerfHomeScreen from '../screens/PerfHomeScreen'; -import {Platform, StyleSheet, View} from "react-native"; -import ThemeManager from "../utils/ThemeManager"; +import {View} from "react-native"; import Touchable from "react-native-platform-touchable"; import {MaterialCommunityIcons} from "@expo/vector-icons"; - - -const styles = StyleSheet.create({ - header: { - backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary, - }, - headerTitle: { - color: "#ffffff", - }, -}); +import ThemeManager from "../utils/ThemeManager"; const defaultScreenOptions = { - headerTintColor: 'white', - headerStyle: styles.header, gestureEnabled: true, cardOverlayEnabled: true, ...TransitionPresets.SlideFromRightIOS, @@ -49,7 +36,7 @@ function getDrawerButton(navigation: Object) { + color={ThemeManager.getCurrentThemeVariables().text}/> ); @@ -191,8 +178,8 @@ function BibStackComponent() { const Drawer = createDrawerNavigator(); -function getDrawerContent(nav) { - return +function getDrawerContent(props) { + return } export default function DrawerNavigator() { @@ -201,8 +188,8 @@ export default function DrawerNavigator() { initialRouteName={'Main'} headerMode={'float'} backBehavior={'initialRoute'} - drawerType={'back'} - drawerContent={props => getDrawerContent(props.navigation)} + drawerType={'front'} + drawerContent={(props) => getDrawerContent(props)} screenOptions={defaultScreenOptions} > + color={ThemeManager.getCurrentThemeVariables().text}/> ); @@ -226,7 +215,7 @@ export default function TabNavigator() { return ( ({ tabBarIcon: ({focused, color, size}) => { let icon = TAB_ICONS[route.name]; diff --git a/package.json b/package.json index 90050a9..e3063d5 100644 --- a/package.json +++ b/package.json @@ -22,8 +22,6 @@ "expo-permissions": "~8.0.0", "expo-web-browser": "~8.0.0", "i18n-js": "^3.3.0", - "native-base": "^2.12.1", - "native-base-shoutem-theme": "^0.3.1", "react": "16.9.0", "react-dom": "16.9.0", "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz", @@ -31,9 +29,8 @@ "react-native-autolink": "^1.8.1", "react-native-calendars": "^1.260.0", "react-native-gesture-handler": "~1.5.0", - "react-native-material-menu": "^1.0.0", "react-native-modalize": "^1.3.6", - "react-native-paper": "^3.5.1", + "react-native-paper": "^3.6.0", "react-native-platform-touchable": "^1.1.1", "react-native-reanimated": "~1.4.0", "react-native-render-html": "^4.1.2", diff --git a/screens/About/AboutDependenciesScreen.js b/screens/About/AboutDependenciesScreen.js index 1c97915..e351280 100644 --- a/screens/About/AboutDependenciesScreen.js +++ b/screens/About/AboutDependenciesScreen.js @@ -1,9 +1,9 @@ // @flow import * as React from 'react'; -import {Body, ListItem, Text} from 'native-base'; import {FlatList} from "react-native"; import packageJson from '../../package'; +import {List} from 'react-native-paper'; function generateListFromObject(object) { let list = []; @@ -33,16 +33,10 @@ export default class AboutDependenciesScreen extends React.Component { keyExtractor={(item) => item.name} style={{minHeight: 300, width: '100%'}} renderItem={({item}) => - - - - {item.name} - - - {item.version.replace('^', '')} - - - } + } /> ); } diff --git a/screens/About/AboutScreen.js b/screens/About/AboutScreen.js index 45541d6..165e1d6 100644 --- a/screens/About/AboutScreen.js +++ b/screens/About/AboutScreen.js @@ -2,13 +2,12 @@ import * as React from 'react'; import {FlatList, Linking, Platform, View} from 'react-native'; -import {Body, Button, Card, CardItem, Content, H1, Left, Right, Text, Thumbnail} from 'native-base'; import i18n from "i18n-js"; import appJson from '../../app'; -import {MaterialCommunityIcons} from "@expo/vector-icons"; import AsyncStorageManager from "../../utils/AsyncStorageManager"; import {Modalize} from "react-native-modalize"; import ThemeManager from "../../utils/ThemeManager"; +import {Avatar, Card, Text, Title, List, Button} from 'react-native-paper'; const links = { appstore: 'https://apps.apple.com/us/app/campus-amicale-insat/id1477722148', @@ -197,80 +196,65 @@ export default class AboutScreen extends React.Component { getAppCard() { return ( - - - - - -

{appJson.expo.name}

- - v.{appJson.expo.version} - - -
-
- item.icon} - listKey={"app"} - renderItem={this.getCardItem} - /> + + }/> + + item.icon} + listKey={"app"} + renderItem={this.getCardItem} + /> + ); } getTeamCard() { return ( - - - - - -

{i18n.t('aboutScreen.team')}

- -
-
- - {i18n.t('aboutScreen.author')} - - item.icon} - listKey={"team1"} - renderItem={this.getCardItem} - /> - - {i18n.t('aboutScreen.additionalDev')} - - item.icon} - listKey={"team2"} - renderItem={this.getCardItem} - /> + + }/> + + {i18n.t('aboutScreen.author')} + item.icon} + listKey={"team1"} + renderItem={this.getCardItem} + /> + {i18n.t('aboutScreen.additionalDev')} + item.icon} + listKey={"team2"} + renderItem={this.getCardItem} + /> + ); } getTechnoCard() { return ( - - - {i18n.t('aboutScreen.technologies')} - - item.icon} - listKey={"techno"} - renderItem={this.getCardItem} - /> + + + {i18n.t('aboutScreen.technologies')} + item.icon} + listKey={"techno"} + renderItem={this.getCardItem} + /> + ); } @@ -282,31 +266,29 @@ export default class AboutScreen extends React.Component { */ getCardItem({item}: Object) { let shouldShow = !item.showOnlyInDebug || (item.showOnlyInDebug && this.state.isDebugUnlocked); + console.log(item.text); if (shouldShow) { - return ( - - - - {item.text} - - {item.showChevron ? - - - - : - - } - ) - ; + if (item.showChevron) { + return ( + } + right={props => } + onPress={item.onPressCallback} + /> + ); + } else { + return ( + } + onPress={item.onPressCallback} + /> + ); + } + } else { - return + return null; } } @@ -330,39 +312,39 @@ export default class AboutScreen extends React.Component { return ( + modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().surface}}> -

{i18n.t('aboutScreen.bugs')}

+ {i18n.t('aboutScreen.bugs')} {i18n.t('aboutScreen.bugsDescription')}
@@ -390,7 +372,7 @@ export default class AboutScreen extends React.Component { render() { return ( - + {this.getBugReportModal()} { keyExtractor={(item) => item.id} renderItem={this.getMainCard} /> - +
); } } diff --git a/screens/DebugScreen.js b/screens/DebugScreen.js index cf0d5d3..1c4b423 100644 --- a/screens/DebugScreen.js +++ b/screens/DebugScreen.js @@ -1,31 +1,12 @@ // @flow import * as React from 'react'; -import { - Body, - Button, - Card, - CardItem, - Container, - Content, - Form, - H1, - H3, - Input, - Item, - Label, - Left, - List, - ListItem, - Right, - Text -} from "native-base"; import ThemeManager from '../utils/ThemeManager'; -import {MaterialCommunityIcons} from "@expo/vector-icons"; -import {Alert, Clipboard, View} from "react-native"; +import {Alert, Clipboard, ScrollView, View} from "react-native"; import AsyncStorageManager from "../utils/AsyncStorageManager"; import NotificationsManager from "../utils/NotificationsManager"; import {Modalize} from "react-native-modalize"; +import {Button, Card, List, Subheading, TextInput, Title} from 'react-native-paper'; type Props = { navigation: Object, @@ -54,29 +35,24 @@ export default class DebugScreen extends React.Component { } static getGeneralItem(onPressCallback: Function, icon: ?string, title: string, subtitle: string) { - return ( - - {icon !== undefined ? - - - - : - } - - - {title} - - - {subtitle} - - - - - ); + if (icon !== undefined) { + return ( + } + onPress={onPressCallback} + /> + ); + } else { + return ( + + ); + } } alertCurrentExpoToken() { @@ -111,26 +87,30 @@ export default class DebugScreen extends React.Component { flex: 1, padding: 20 }}> -

{this.state.modalCurrentDisplayItem.key}

-

Default: {this.state.modalCurrentDisplayItem.default}

-

Current: {this.state.modalCurrentDisplayItem.current}

-
- - - this.modalInputValue = text}/> - -
+ {this.state.modalCurrentDisplayItem.key} + Default: {this.state.modalCurrentDisplayItem.default} + Current: {this.state.modalCurrentDisplayItem.current} + this.modalInputValue = text} + /> - @@ -149,42 +129,37 @@ export default class DebugScreen extends React.Component { render() { return ( - + + modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().surface}}> {this.getModalContent()} - - - - - Notifications - - - + + + + {DebugScreen.getGeneralItem(() => this.alertCurrentExpoToken(), 'bell', 'Get current Expo Token', '')} {DebugScreen.getGeneralItem(() => this.forceExpoTokenUpdate(), 'bell-ring', 'Force Expo token update', '')} - + - - - - Preferences - - - + + + {Object.values(this.state.currentPreferences).map((object) => {DebugScreen.getGeneralItem(() => this.showEditModal(object), undefined, object.key, 'Click to edit')} )} - + - - - + + ); } } diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js index f4bb0a3..563ab1f 100644 --- a/screens/HomeScreen.js +++ b/screens/HomeScreen.js @@ -1,8 +1,7 @@ // @flow import * as React from 'react'; -import {Image, TouchableOpacity, View} from 'react-native'; -import {Body, Button, Card, CardItem, Left, Text, Thumbnail} from 'native-base'; +import {TouchableOpacity, View} from 'react-native'; import i18n from "i18n-js"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import Autolink from 'react-native-autolink'; @@ -10,6 +9,8 @@ import ThemeManager from "../utils/ThemeManager"; import DashboardItem from "../components/DashboardItem"; import * as WebBrowser from 'expo-web-browser'; import WebSectionList from "../components/WebSectionList"; +import PlatformTouchable from "react-native-platform-touchable"; +import {Avatar, Card, Text} from 'react-native-paper'; // import DATA from "../dashboard_data.json"; @@ -405,11 +406,11 @@ export default class HomeScreen extends React.Component { let proxiwashIsAvailable = parseInt(proxiwashData['dryers']) > 0 || parseInt(proxiwashData['washers']) > 0; let proxiwashSubtitle; let dryerColor = parseInt(proxiwashData['dryers']) > 0 ? - ThemeManager.getCurrentThemeVariables().textColor : - ThemeManager.getCurrentThemeVariables().listNoteColor; + ThemeManager.getCurrentThemeVariables().text : + ThemeManager.getCurrentThemeVariables().textDisabled; let washerColor = parseInt(proxiwashData['washers']) > 0 ? - ThemeManager.getCurrentThemeVariables().textColor : - ThemeManager.getCurrentThemeVariables().listNoteColor; + ThemeManager.getCurrentThemeVariables().text : + ThemeManager.getCurrentThemeVariables().textDisabled; let availableDryers = proxiwashData['dryers']; let availableWashers = proxiwashData['washers']; if (proxiwashIsAvailable) { @@ -505,59 +506,35 @@ export default class HomeScreen extends React.Component { const onImagePress = this.openLink.bind(this, item.full_picture); const onOutLinkPress = this.openLink.bind(this, item.permalink_url); return ( - - - - - - {NAME_AMICALE} - {HomeScreen.getFormattedDate(item.created_time)} - - - - - - {item.full_picture !== '' && item.full_picture !== undefined ? - - - - : } - {item.message !== undefined ? - : - } - - - - - - - + En savoir plus + + + ); } diff --git a/screens/PlanningDisplayScreen.js b/screens/PlanningDisplayScreen.js index 37d8996..b79628a 100644 --- a/screens/PlanningDisplayScreen.js +++ b/screens/PlanningDisplayScreen.js @@ -1,12 +1,12 @@ // @flow import * as React from 'react'; -import {Image} from 'react-native'; -import {Container, Content, H1, H3, View} from 'native-base'; +import {Image, ScrollView, View} from 'react-native'; import ThemeManager from "../utils/ThemeManager"; import HTML from "react-native-render-html"; import {Linking} from "expo"; import PlanningEventManager from '../utils/PlanningEventManager'; +import {Subheading, Title} from 'react-native-paper'; type Props = { navigation: Object, @@ -27,38 +27,32 @@ export default class PlanningDisplayScreen extends React.Component { render() { // console.log("rendering planningDisplayScreen"); return ( - - -

- {this.displayData.title} -

-

- {PlanningEventManager.getFormattedTime(this.displayData)} -

- {this.displayData.logo !== null ? - - - - : } + + + {this.displayData.title} + + + {PlanningEventManager.getFormattedTime(this.displayData)} + + {this.displayData.logo !== null ? + + + + : } - {this.displayData.description !== null ? - // Surround description with div to allow text styling if the description is not html - " + this.displayData.description + ""} - tagsStyles={{ - p: { - color: ThemeManager.getCurrentThemeVariables().textColor, - fontSize: ThemeManager.getCurrentThemeVariables().fontSizeBase - }, - div: {color: ThemeManager.getCurrentThemeVariables().textColor} - }} - onLinkPress={openWebLink}/> - : } -
-
+ {this.displayData.description !== null ? + // Surround description with div to allow text styling if the description is not html + " + this.displayData.description + ""} + tagsStyles={{ + p: { + color: ThemeManager.getCurrentThemeVariables().text, + }, + div: {color: ThemeManager.getCurrentThemeVariables().text} + }} + onLinkPress={openWebLink}/> + : } + ); } } diff --git a/screens/PlanningScreen.js b/screens/PlanningScreen.js index 2b941e3..32f4460 100644 --- a/screens/PlanningScreen.js +++ b/screens/PlanningScreen.js @@ -1,14 +1,13 @@ // @flow import * as React from 'react'; -import {BackHandler, Image} from 'react-native'; -import {H3, Text, View} from 'native-base'; +import {BackHandler, Image, View} from 'react-native'; import i18n from "i18n-js"; import ThemeManager from "../utils/ThemeManager"; import {Agenda, LocaleConfig} from 'react-native-calendars'; -import Touchable from 'react-native-platform-touchable'; import WebDataManager from "../utils/WebDataManager"; import PlanningEventManager from '../utils/PlanningEventManager'; +import {Text, Title, List, Avatar, Divider} from 'react-native-paper'; LocaleConfig.locales['fr'] = { monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], @@ -87,12 +86,6 @@ export default class PlanningScreen extends React.Component { this.onBackButtonPressAndroid = this.onBackButtonPressAndroid.bind(this); } - shouldComponentUpdate(nextProps: Props, nextState: State): boolean { - return nextState.refreshing === false && this.state.refreshing === true || - nextState.agendaItems !== this.state.agendaItems || - nextState.calendarShowing !== this.state.calendarShowing; - } - componentDidMount() { this.onRefresh(); this.willBlurSubscription = this.props.navigation.addListener( @@ -114,11 +107,6 @@ export default class PlanningScreen extends React.Component { } }; - componentWillUnmount() { - this.didFocusSubscription && this.didFocusSubscription.remove(); - this.willBlurSubscription && this.willBlurSubscription.remove(); - } - getCurrentDate() { let today = new Date(); return this.getFormattedDate(today); @@ -141,63 +129,36 @@ export default class PlanningScreen extends React.Component { } getRenderItem(item: Object) { - return ( - this.props.navigation.navigate('PlanningDisplayScreen', {data: item})}> - - - - {PlanningEventManager.getFormattedTime(item)} - -

{item.title}

-
- - {item.logo !== null ? - - : } - + const onPress = this.props.navigation.navigate.bind(this, 'PlanningDisplayScreen', {data: item}); + if (item.logo !== null) { + return ( + + + } + onPress={onPress} + /> -
- ); + ); + } else { + return ( + + + + + ); + } } getRenderEmptyDate() { return ( - - - + ); } @@ -303,28 +264,28 @@ export default class PlanningScreen extends React.Component { // agenda theme theme={{ backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor, - calendarBackground: ThemeManager.getCurrentThemeVariables().containerBgColor, - textSectionTitleColor: ThemeManager.getCurrentThemeVariables().listNoteColor, - selectedDayBackgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary, + calendarBackground: ThemeManager.getCurrentThemeVariables().background, + textSectionTitleColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor, + selectedDayBackgroundColor: ThemeManager.getCurrentThemeVariables().primary, selectedDayTextColor: '#ffffff', - todayTextColor: ThemeManager.getCurrentThemeVariables().brandPrimary, - dayTextColor: ThemeManager.getCurrentThemeVariables().textColor, - textDisabledColor: ThemeManager.getCurrentThemeVariables().textDisabledColor, - dotColor: ThemeManager.getCurrentThemeVariables().brandPrimary, + todayTextColor: ThemeManager.getCurrentThemeVariables().primary, + dayTextColor: ThemeManager.getCurrentThemeVariables().text, + textDisabledColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor, + dotColor: ThemeManager.getCurrentThemeVariables().primary, selectedDotColor: '#ffffff', arrowColor: 'orange', - monthTextColor: ThemeManager.getCurrentThemeVariables().brandPrimary, - indicatorColor: ThemeManager.getCurrentThemeVariables().brandPrimary, + monthTextColor: ThemeManager.getCurrentThemeVariables().primary, + indicatorColor: ThemeManager.getCurrentThemeVariables().primary, textDayFontWeight: '300', textMonthFontWeight: 'bold', textDayHeaderFontWeight: '300', textDayFontSize: 16, textMonthFontSize: 16, textDayHeaderFontSize: 16, - agendaDayTextColor: ThemeManager.getCurrentThemeVariables().listNoteColor, - agendaDayNumColor: ThemeManager.getCurrentThemeVariables().listNoteColor, - agendaTodayColor: ThemeManager.getCurrentThemeVariables().brandPrimary, - agendaKnobColor: ThemeManager.getCurrentThemeVariables().brandPrimary, + agendaDayTextColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor, + agendaDayNumColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor, + agendaTodayColor: ThemeManager.getCurrentThemeVariables().primary, + agendaKnobColor: ThemeManager.getCurrentThemeVariables().primary, }} /> ); diff --git a/screens/Proximo/ProximoAboutScreen.js b/screens/Proximo/ProximoAboutScreen.js index 3c25636..25581c0 100644 --- a/screens/Proximo/ProximoAboutScreen.js +++ b/screens/Proximo/ProximoAboutScreen.js @@ -1,10 +1,9 @@ // @flow import * as React from 'react'; -import {Image, View} from 'react-native'; -import {Card, CardItem, Container, Content, H2, Left, Text} from 'native-base'; +import {Image, ScrollView, View} from 'react-native'; import i18n from "i18n-js"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; +import {Text, Card, List, Paragraph} from 'react-native-paper'; type Props = { navigation: Object, @@ -16,52 +15,41 @@ type Props = { export default class ProximoAboutScreen extends React.Component { render() { - const nav = this.props.navigation; return ( - - - - - - {i18n.t('proximoScreen.description')} - - - - -

{i18n.t('proximoScreen.openingHours')}

-
-
- - 18h30 - 19h30 - -
- - - - -

{i18n.t('proximoScreen.paymentMethods')}

-
-
- - {i18n.t('proximoScreen.paymentMethodsDescription')} - -
-
-
+ + + + + {i18n.t('proximoScreen.description')} + + } + /> + + 18h30 - 19h30 + + + + } + /> + + 18{i18n.t('proximoScreen.paymentMethodsDescription')} + + + ); } } diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index ee1b90f..3a9b5a9 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -1,14 +1,12 @@ // @flow import * as React from 'react'; -import {Body, Content, H1, H3, Input, Item, Left, ListItem, Right, Text, Thumbnail} from 'native-base'; -import {FlatList, Image, Platform, View} from "react-native"; -import Touchable from 'react-native-platform-touchable'; -import Menu, {MenuItem} from 'react-native-material-menu'; +import {FlatList, Image, ScrollView, View} from "react-native"; import i18n from "i18n-js"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../../utils/ThemeManager"; import {Modalize} from 'react-native-modalize'; +import {Avatar, Divider, IconButton, List, Menu, Searchbar, Subheading, Text, Title} from "react-native-paper"; const sortMode = { price: "0", @@ -51,6 +49,7 @@ type State = { sortNameIcon: React.Node, modalCurrentDisplayItem: Object, currentlyDisplayedData: Array, + menuVisible: boolean, }; /** @@ -62,13 +61,11 @@ export default class ProximoListScreen extends React.Component { originalData: Array; shouldFocusSearchBar: boolean; - sortMenuRef: Menu; - - onMenuRef: Function; onSearchStringChange: Function; onSelectSortModeName: Function; onSelectSortModePrice: Function; onSortMenuPress: Function; + onSortMenuDismiss: Function; renderItem: Function; constructor(props: any) { @@ -83,24 +80,17 @@ export default class ProximoListScreen extends React.Component { sortPriceIcon: '', sortNameIcon: '', modalCurrentDisplayItem: {}, + menuVisible: false, }; - this.onMenuRef = this.onMenuRef.bind(this); this.onSearchStringChange = this.onSearchStringChange.bind(this); this.onSelectSortModeName = this.onSelectSortModeName.bind(this); this.onSelectSortModePrice = this.onSelectSortModePrice.bind(this); this.onSortMenuPress = this.onSortMenuPress.bind(this); + this.onSortMenuDismiss = this.onSortMenuPress.bind(this); this.renderItem = this.renderItem.bind(this); } - /** - * Saves the reference to the sort menu for later use - * - * @param ref The menu reference - */ - onMenuRef(ref: Menu) { - this.sortMenuRef = ref; - }; /** * Sets the sort mode based on the one selected. @@ -146,8 +136,6 @@ export default class ProximoListScreen extends React.Component { break; } this.setupSortIcons(mode, isReverse); - if (this.sortMenuRef !== undefined) - this.sortMenuRef.hide(); } /** @@ -165,23 +153,10 @@ export default class ProximoListScreen extends React.Component { getSearchBar() { return ( - - - - - - + ); } @@ -194,11 +169,11 @@ export default class ProximoListScreen extends React.Component { getStockColor(availableStock: number) { let color: string; if (availableStock > 3) - color = ThemeManager.getCurrentThemeVariables().brandSuccess; + color = ThemeManager.getCurrentThemeVariables().success; else if (availableStock > 0) - color = ThemeManager.getCurrentThemeVariables().brandWarning; + color = ThemeManager.getCurrentThemeVariables().warning; else - color = ThemeManager.getCurrentThemeVariables().brandDanger; + color = ThemeManager.getCurrentThemeVariables().danger; return color; } @@ -212,12 +187,10 @@ export default class ProximoListScreen extends React.Component { const downSortIcon = ; const upSortIcon = ; switch (mode) { case sortMode.price: @@ -274,27 +247,27 @@ export default class ProximoListScreen extends React.Component { flex: 1, padding: 20 }}> -

{this.state.modalCurrentDisplayItem.name}

+ {this.state.modalCurrentDisplayItem.name} -

{this.state.modalCurrentDisplayItem.quantity + ' ' + i18n.t('proximoScreen.inStock')} -

-

{this.state.modalCurrentDisplayItem.price}€

+ + {this.state.modalCurrentDisplayItem.price}€
- + {this.state.modalCurrentDisplayItem.description} - + ); } @@ -317,65 +290,50 @@ export default class ProximoListScreen extends React.Component { } onSortMenuPress() { - this.sortMenuRef.show(); + this.setState({menuVisible: true}); + console.log('pressed'); } + onSortMenuDismiss() { + this.setState({menuVisible: false}); + } getSortMenu() { return ( - - + visible={this.state.menuVisible} + onDismiss={this.onSortMenuDismiss} + anchor={ + } > - - {this.state.sortNameIcon} - {i18n.t('proximoScreen.sortName')} - - - {this.state.sortPriceIcon} - {i18n.t('proximoScreen.sortPrice')} - + + + ); } renderItem({item}: Object) { - const onListItemPress = this.onListItemPress.bind(this, item); - return ( - - - - - - {item.name} - - - {item.quantity + ' ' + i18n.t('proximoScreen.inStock')} - - - - - {item.price}€ - - - ); + const onPress = this.onListItemPress.bind(this, item); + return ( + } + right={props => + + {item.price}€ + } + /> + ); } keyExtractor(item: Object) { @@ -384,12 +342,11 @@ export default class ProximoListScreen extends React.Component { render() { // console.log("rendering ProximoListScreen"); - const nav = this.props.navigation; return ( + modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().card}}> {this.getModalContent()} { - - - - - - + + ); } @@ -185,36 +178,20 @@ export default class ProximoMainScreen extends React.Component { shouldFocusSearchBar: false, data: item, }; + const subtitle = item.data.length + " " + (item.data.length > 1 ? i18n.t('proximoScreen.articles') : i18n.t('proximoScreen.article')); const onPress = this.props.navigation.navigate.bind(this, 'ProximoListScreen', dataToSend); if (item.data.length > 0) { return ( - - - - - - - {item.type.name} - - - {item.data.length} {item.data.length > 1 ? i18n.t('proximoScreen.articles') : i18n.t('proximoScreen.article')} - - - - - - + left={props => } + right={props => } + /> ); } else return ; diff --git a/screens/Proxiwash/ProxiwashAboutScreen.js b/screens/Proxiwash/ProxiwashAboutScreen.js index 14e6c1c..0176460 100644 --- a/screens/Proxiwash/ProxiwashAboutScreen.js +++ b/screens/Proxiwash/ProxiwashAboutScreen.js @@ -1,11 +1,9 @@ // @flow import * as React from 'react'; -import {Image, View} from 'react-native'; -import {Body, Card, CardItem, Content, H2, H3, Left, Tab, TabHeading, Tabs, Text} from 'native-base'; +import {Image, View, ScrollView} from 'react-native'; import i18n from "i18n-js"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; -import ThemeManager from "../../utils/ThemeManager"; +import {Card, List, Paragraph, Text, Title} from 'react-native-paper'; type Props = { navigation: Object, @@ -18,129 +16,67 @@ export default class ProxiwashAboutScreen extends React.Component { render() { return ( - - - - {i18n.t('proxiwashScreen.informationTab')} - - } - key={1} - style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> - - - - - {i18n.t('proxiwashScreen.description')} - - - - -

{i18n.t('proxiwashScreen.dryer')}

-
-
- - -

{i18n.t('proxiwashScreen.procedure')}

- {i18n.t('proxiwashScreen.dryerProcedure')} - -
- - -

{i18n.t('proxiwashScreen.tips')}

- {i18n.t('proxiwashScreen.dryerTips')} - -
-
- - - - -

{i18n.t('proxiwashScreen.washer')}

-
-
- - -

{i18n.t('proxiwashScreen.procedure')}

- {i18n.t('proxiwashScreen.washerProcedure')} - -
- - -

{i18n.t('proxiwashScreen.tips')}

- {i18n.t('proxiwashScreen.washerTips')} - -
-
-
-
- - - {i18n.t('proxiwashScreen.paymentTab')} - - } - key={2} - style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> - - - - - -

{i18n.t('proxiwashScreen.tariffs')}

-
-
- - - {i18n.t('proxiwashScreen.washersTariff')} - {i18n.t('proxiwashScreen.dryersTariff')} - - -
- - - - -

{i18n.t('proxiwashScreen.paymentMethods')}

-
-
- - - {i18n.t('proxiwashScreen.paymentMethodsDescription')} - - -
-
-
-
+ + + + + {i18n.t('proxiwashScreen.description')} + + } + /> + + {i18n.t('proxiwashScreen.procedure')} + {i18n.t('proxiwashScreen.dryerProcedure')} + {i18n.t('proxiwashScreen.tips')} + {i18n.t('proxiwashScreen.dryerTips')} + + + + + } + /> + + {i18n.t('proxiwashScreen.procedure')} + {i18n.t('proxiwashScreen.washerProcedure')} + {i18n.t('proxiwashScreen.tips')} + {i18n.t('proxiwashScreen.washerTips')} + + + + + } + /> + + {i18n.t('proxiwashScreen.washersTariff')} + {i18n.t('proxiwashScreen.dryersTariff')} + + + + } + /> + + {i18n.t('proxiwashScreen.paymentMethodsDescription')} + + + ); } } diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js index fd84a4f..8477b9f 100644 --- a/screens/Proxiwash/ProxiwashScreen.js +++ b/screens/Proxiwash/ProxiwashScreen.js @@ -2,16 +2,13 @@ import * as React from 'react'; import {Alert, Platform, View} from 'react-native'; -import {Body, Card, CardItem, Left, Right, Text} from 'native-base'; import ThemeManager from '../../utils/ThemeManager'; import i18n from "i18n-js"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; import WebSectionList from "../../components/WebSectionList"; import NotificationsManager from "../../utils/NotificationsManager"; -import PlatformTouchable from "react-native-platform-touchable"; -import Touchable from "react-native-platform-touchable"; import AsyncStorageManager from "../../utils/AsyncStorageManager"; import * as Expo from "expo"; +import {Divider, IconButton, List, Text} from 'react-native-paper'; const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json"; @@ -288,17 +285,12 @@ export default class ProxiwashScreen extends React.Component { getRightButton() { return ( - - - + ); } @@ -327,75 +319,52 @@ export default class ProxiwashScreen extends React.Component { let machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')) + ' n°' + item.number; let isDryer = section.title === i18n.t('proxiwashScreen.dryers'); const onPress = this.showAlert.bind(this, machineName, item, isDryer); + let width = item.donePercent !== '' ? (parseInt(item.donePercent)).toString() + '%' : 0; + if (MACHINE_STATES[item.state] === '0') + width = '100%'; return ( - - - + + - - - - - - - - - {machineName + ' '} - {this.isMachineWatched(item.number) ? - : ''} - - - {isMachineRunning ? item.startTime + '/' + item.endTime : ''} - - - - - - {stateStrings[MACHINE_STATES[item.state]]} - - - - - ); + left={props => this.isMachineWatched(item.number) ? + : + } + right={props => ( + + + + {stateStrings[MACHINE_STATES[item.state]]} + + + + + )} + /> + +
+ ); } } diff --git a/screens/SelfMenuScreen.js b/screens/SelfMenuScreen.js index 127224b..226e108 100644 --- a/screens/SelfMenuScreen.js +++ b/screens/SelfMenuScreen.js @@ -2,10 +2,10 @@ import * as React from 'react'; import {View} from 'react-native'; -import {Card, CardItem, H2, H3, Text} from 'native-base'; import ThemeManager from "../utils/ThemeManager"; import i18n from "i18n-js"; import WebSectionList from "../components/WebSectionList"; +import {Card, Text, Title} from 'react-native-paper'; const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json"; @@ -102,11 +102,11 @@ export default class SelfMenuScreen extends React.Component { marginBottom: 10, borderRadius: 50 }}> -

{section.title}

+ }}>{section.title} ); } @@ -115,42 +115,32 @@ export default class SelfMenuScreen extends React.Component { return ( - -

{item.name}

+ -
- + {item.dishes.map((object) => {object.name !== "" ? {this.formatName(object.name)} : } )} - +
); } diff --git a/screens/SettingsScreen.js b/screens/SettingsScreen.js index 20ca284..1de1a6e 100644 --- a/screens/SettingsScreen.js +++ b/screens/SettingsScreen.js @@ -1,13 +1,12 @@ // @flow import * as React from 'react'; -import {Body, Card, CardItem, CheckBox, Content, Left, List, ListItem, Picker, Right, Text,} from "native-base"; +import {ScrollView, View} from "react-native"; import ThemeManager from '../utils/ThemeManager'; import i18n from "i18n-js"; -import {NavigationActions, StackActions} from "@react-navigation/native"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; import AsyncStorageManager from "../utils/AsyncStorageManager"; import NotificationsManager from "../utils/NotificationsManager"; +import {Card, List, Switch, RadioButton, Text, TouchableRipple} from 'react-native-paper'; type Props = { navigation: Object, @@ -51,28 +50,25 @@ export default class SettingsScreen extends React.Component { */ static getGeneralItem(control: React.Node, icon: string, title: string, subtitle: string) { return ( - - - - - - - {title} - - - {subtitle} - - + } + right={props => control} + /> + ); + } - - {control} - - + getRadioButton(onPress: Function, value: string, label: string) { + return ( + + + {label} + + + ); } @@ -113,19 +109,16 @@ export default class SettingsScreen extends React.Component { */ getProxiwashNotifPicker() { return ( - - - - - - - + + + + + + ); } @@ -136,19 +129,16 @@ export default class SettingsScreen extends React.Component { */ getStartScreenPicker() { return ( - - - - - - - + + + + + + ); } @@ -158,19 +148,6 @@ export default class SettingsScreen extends React.Component { onToggleNightMode() { ThemeManager.getInstance().setNightMode(!this.state.nightMode); this.setState({nightMode: !this.state.nightMode}); - this.resetStack(); - } - - /** - * Reset react navigation stack to allow for a theme reset - */ - resetStack() { - const resetAction = StackActions.reset({ - index: 0, - key: null, - actions: [NavigationActions.navigate({routeName: 'Main'})], - }); - this.props.navigation.dispatch(resetAction); } /** @@ -184,57 +161,47 @@ export default class SettingsScreen extends React.Component { */ getToggleItem(onPressCallback: Function, icon: string, title: string, subtitle: string) { return ( - - - - - - - {title} - - - {subtitle} - - - - - - + } + right={props => + } + /> ); } render() { return ( - - - - {i18n.t('settingsScreen.generalCard')} - - + + + + {this.getToggleItem(this.onToggleNightMode, 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))} - {SettingsScreen.getGeneralItem(this.getStartScreenPicker(), 'power', i18n.t('settingsScreen.startScreen'), i18n.t('settingsScreen.startScreenSub'))} - + } + > + {this.getStartScreenPicker()} + + - - - Proxiwash - - - {SettingsScreen.getGeneralItem(this.getProxiwashNotifPicker(), 'washing-machine', i18n.t('settingsScreen.proxiwashNotifReminder'), i18n.t('settingsScreen.proxiwashNotifReminderSub'))} - + + + } + > + {this.getProxiwashNotifPicker()} + - + ); } } diff --git a/utils/ThemeManager.js b/utils/ThemeManager.js index cad5868..207ffcd 100644 --- a/utils/ThemeManager.js +++ b/utils/ThemeManager.js @@ -1,10 +1,8 @@ // @flow -import platform from '../native-base-theme/variables/platform'; -import platformDark from '../native-base-theme/variables/platformDark'; -import getTheme from '../native-base-theme/components'; import AsyncStorageManager from "./AsyncStorageManager"; - +// import {DarkTheme as NavDarkTheme, DefaultTheme as NavDefaultTheme} from '@react-navigation/native'; +import {DarkTheme, DefaultTheme} from 'react-native-paper'; /** * Singleton class used to manage themes */ @@ -17,6 +15,78 @@ export default class ThemeManager { this.updateThemeCallback = null; } + static getWhiteTheme() { + return { + ...DefaultTheme, + colors: { + ...DefaultTheme.colors, + primary: '#be1522', + accent: '#be1522', + card: "rgb(255, 255, 255)", + dividerBackground: '#e2e2e2', + textDisabled: '#c1c1c1', + icon: '#5d5d5d', + success: "#5cb85c", + warning: "#f0ad4e", + danger: "#d9534f", + + // Calendar/Agenda + agendaBackgroundColor: '#f3f3f4', + agendaDayTextColor: '#636363', + + // PROXIWASH + proxiwashFinishedColor: "rgba(54,165,22,0.31)", + proxiwashReadyColor: "transparent", + proxiwashRunningColor: "rgba(94,104,241,0.3)", + proxiwashBrokenColor: "rgba(162,162,162,0.31)", + proxiwashErrorColor: "rgba(204,7,0,0.31)", + + // Screens + planningColor: '#d9b10a', + proximoColor: '#ec5904', + proxiwashColor: '#1fa5ee', + menuColor: '#e91314', + tutorinsaColor: '#f93943', + }, + }; + } + + static getDarkTheme() { + return { + ...DarkTheme, + colors: { + ...DarkTheme.colors, + primary: '#be1522', + accent: '#be1522', + card: "rgb(18, 18, 18)", + dividerBackground: '#222222', + textDisabled: '#5b5b5b', + icon: '#b3b3b3', + success: "#5cb85c", + warning: "#f0ad4e", + danger: "#d9534f", + + // Calendar/Agenda + agendaBackgroundColor: '#171717', + agendaDayTextColor: '#6d6d6d', + + // PROXIWASH + proxiwashFinishedColor: "rgba(17,149,32,0.53)", + proxiwashReadyColor: "transparent", + proxiwashRunningColor: "rgba(29,59,175,0.65)", + proxiwashBrokenColor: "#000000", + proxiwashErrorColor: "rgba(213,8,0,0.57)", + + // Screens + planningColor: '#d99e09', + proximoColor: '#ec5904', + proxiwashColor: '#1fa5ee', + menuColor: '#b81213', + tutorinsaColor: '#f93943', + }, + }; + } + /** * Get this class instance or create one if none is found * @returns {ThemeManager} @@ -27,6 +97,32 @@ export default class ThemeManager { ThemeManager.instance; } + /** + * @returns {boolean} Night mode state + */ + static getNightMode(): boolean { + return AsyncStorageManager.getInstance().preferences.nightMode.current === '1'; + } + + /** + * Get the current theme based on night mode + * @returns {Object} + */ + static getCurrentTheme(): Object { + if (ThemeManager.getNightMode()) + return ThemeManager.getDarkTheme(); + else + return ThemeManager.getWhiteTheme(); + } + + /** + * Get the variables contained in the current theme + * @returns {Object} + */ + static getCurrentThemeVariables(): Object { + return ThemeManager.getCurrentTheme().colors; + } + /** * Set the function to be called when the theme is changed (allows for general reload of the app) * @param callback Function to call after theme change @@ -47,30 +143,4 @@ export default class ThemeManager { this.updateThemeCallback(); } - /** - * @returns {boolean} Night mode state - */ - static getNightMode(): boolean { - return AsyncStorageManager.getInstance().preferences.nightMode.current === '1'; - } - - /** - * Get the current theme based on night mode - * @returns {Object} - */ - static getCurrentTheme(): Object { - if (ThemeManager.getNightMode()) - return getTheme(platformDark); - else - return getTheme(platform); - } - - /** - * Get the variables contained in the current theme - * @returns {Object} - */ - static getCurrentThemeVariables(): Object { - return ThemeManager.getCurrentTheme().variables; - } - }; diff --git a/utils/WebDataManager.js b/utils/WebDataManager.js index 45eda76..251c299 100644 --- a/utils/WebDataManager.js +++ b/utils/WebDataManager.js @@ -1,4 +1,3 @@ -import {Toast} from "native-base"; /** * Class used to get json data from the web @@ -48,15 +47,15 @@ export default class WebDataManager { * @param errorString */ showUpdateToast(errorString) { - let isSuccess = this.isDataObjectValid(); - if (!isSuccess) { - Toast.show({ - text: errorString, - buttonText: 'OK', - type: isSuccess ? "success" : "danger", - duration: 2000 - }); - } + // let isSuccess = this.isDataObjectValid(); + // if (!isSuccess) { + // Toast.show({ + // text: errorString, + // buttonText: 'OK', + // type: isSuccess ? "success" : "danger", + // duration: 2000 + // }); + // } } } From 38ada0c0276f4fd92e1da9af7269f91c2e39a6fb Mon Sep 17 00:00:00 2001 From: keplyx Date: Sat, 7 Mar 2020 09:15:25 +0100 Subject: [PATCH 10/66] Improved layout --- components/WebSectionList.js | 71 +++++++++++++++++++--------- screens/HomeScreen.js | 3 +- screens/Proximo/ProximoListScreen.js | 2 +- screens/Proximo/ProximoMainScreen.js | 3 +- screens/Proxiwash/ProxiwashScreen.js | 18 +++++-- screens/SelfMenuScreen.js | 17 +------ 6 files changed, 69 insertions(+), 45 deletions(-) diff --git a/components/WebSectionList.js b/components/WebSectionList.js index 497b33e..90dc594 100644 --- a/components/WebSectionList.js +++ b/components/WebSectionList.js @@ -5,7 +5,7 @@ import ThemeManager from '../utils/ThemeManager'; import WebDataManager from "../utils/WebDataManager"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import i18n from "i18n-js"; -import {ActivityIndicator, Subheading} from 'react-native-paper'; +import {ActivityIndicator, Snackbar, Subheading} from 'react-native-paper'; import {RefreshControl, SectionList, View} from "react-native"; type Props = { @@ -16,13 +16,13 @@ type Props = { renderSectionHeader: React.Node, stickyHeader: boolean, createDataset: Function, - updateErrorText: string, } type State = { refreshing: boolean, firstLoading: boolean, fetchedData: Object, + snackbarVisible: boolean }; /** @@ -37,7 +37,7 @@ type State = { export default class WebSectionList extends React.Component { static defaultProps = { - renderSectionHeader: undefined, + renderSectionHeader: null, stickyHeader: false, }; @@ -50,6 +50,7 @@ export default class WebSectionList extends React.Component { refreshing: false, firstLoading: true, fetchedData: {}, + snackbarVisible: false }; onRefresh: Function; @@ -57,6 +58,8 @@ export default class WebSectionList extends React.Component { onFetchError: Function; getEmptyRenderItem: Function; getEmptySectionHeader: Function; + showSnackBar: Function; + hideSnackBar: Function; constructor() { super(); @@ -66,6 +69,8 @@ export default class WebSectionList extends React.Component { this.onFetchError = this.onFetchError.bind(this); this.getEmptyRenderItem = this.getEmptyRenderItem.bind(this); this.getEmptySectionHeader = this.getEmptySectionHeader.bind(this); + this.showSnackBar = this.showSnackBar.bind(this); + this.hideSnackBar = this.hideSnackBar.bind(this); } /** @@ -112,7 +117,8 @@ export default class WebSectionList extends React.Component { refreshing: false, firstLoading: false }); - this.webDataManager.showUpdateToast(this.props.updateErrorText); + this.showSnackBar(); + // this.webDataManager.showUpdateToast(this.props.updateErrorText); } /** @@ -194,30 +200,51 @@ export default class WebSectionList extends React.Component { return item.text } + showSnackBar() { + this.setState({snackbarVisible: true}) + } + + hideSnackBar() { + this.setState({snackbarVisible: false}) + } + render() { let dataset = this.props.createDataset(this.state.fetchedData); const isEmpty = dataset[0].data.length === 0; - const shouldRenderHeader = isEmpty || (this.props.renderSectionHeader !== undefined); + const shouldRenderHeader = !isEmpty || (this.props.renderSectionHeader !== null); if (isEmpty) dataset = this.createEmptyDataset(); return ( - - } - renderSectionHeader={shouldRenderHeader ? this.getEmptySectionHeader : this.props.renderSectionHeader} - renderItem={isEmpty ? this.getEmptyRenderItem : this.props.renderItem} - style={{minHeight: 300, width: '100%'}} - stickySectionHeadersEnabled={this.props.stickyHeader} - contentContainerStyle={ - isEmpty ? - {flexGrow: 1, justifyContent: 'center', alignItems: 'center'} : {} - } - /> + + + {i18n.t("homeScreen.listUpdateFail")} + + + } + renderSectionHeader={shouldRenderHeader ? this.props.renderSectionHeader : this.getEmptySectionHeader} + renderItem={isEmpty ? this.getEmptyRenderItem : this.props.renderItem} + style={{minHeight: 300, width: '100%'}} + stickySectionHeadersEnabled={this.props.stickyHeader} + contentContainerStyle={ + isEmpty ? + {flexGrow: 1, justifyContent: 'center', alignItems: 'center'} : {} + } + /> + ); } } diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js index 563ab1f..3ac0274 100644 --- a/screens/HomeScreen.js +++ b/screens/HomeScreen.js @@ -552,8 +552,7 @@ export default class HomeScreen extends React.Component { navigation={nav} refreshTime={REFRESH_TIME} fetchUrl={DATA_URL} - renderItem={this.getRenderItem} - updateErrorText={i18n.t("homeScreen.listUpdateFail")}/> + renderItem={this.getRenderItem}/> ); } } diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index 3a9b5a9..b1bcc72 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -327,7 +327,7 @@ export default class ProximoListScreen extends React.Component { description={item.quantity + ' ' + i18n.t('proximoScreen.inStock')} descriptionStyle={{color: this.getStockColor(parseInt(item.quantity))}} onPress={onPress} - left={props => } + left={props => } right={props => {item.price}€ diff --git a/screens/Proximo/ProximoMainScreen.js b/screens/Proximo/ProximoMainScreen.js index eaf7b5c..ece17df 100644 --- a/screens/Proximo/ProximoMainScreen.js +++ b/screens/Proximo/ProximoMainScreen.js @@ -205,8 +205,7 @@ export default class ProximoMainScreen extends React.Component { navigation={nav} refreshTime={0} fetchUrl={DATA_URL} - renderItem={this.getRenderItem} - updateErrorText={i18n.t("homeScreen.listUpdateFail")}/> + renderItem={this.getRenderItem}/> ); } } diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js index 8477b9f..e409547 100644 --- a/screens/Proxiwash/ProxiwashScreen.js +++ b/screens/Proxiwash/ProxiwashScreen.js @@ -8,7 +8,7 @@ import WebSectionList from "../../components/WebSectionList"; import NotificationsManager from "../../utils/NotificationsManager"; import AsyncStorageManager from "../../utils/AsyncStorageManager"; import * as Expo from "expo"; -import {Divider, IconButton, List, Text} from 'react-native-paper'; +import {Divider, IconButton, List, Text, Title} from 'react-native-paper'; const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json"; @@ -47,6 +47,7 @@ export default class ProxiwashScreen extends React.Component { onAboutPress: Function; getRenderItem: Function; + getRenderSectionHeader: Function; createDataset: Function; state = { @@ -88,9 +89,9 @@ export default class ProxiwashScreen extends React.Component { stateIcons[MACHINE_STATES.ERREUR] = 'alert'; // let dataString = AsyncStorageManager.getInstance().preferences.proxiwashWatchedMachines.current; - // this.setMinTimeRefresh(30); this.onAboutPress = this.onAboutPress.bind(this); this.getRenderItem = this.getRenderItem.bind(this); + this.getRenderSectionHeader = this.getRenderSectionHeader.bind(this); this.createDataset = this.createDataset.bind(this); } @@ -303,7 +304,18 @@ export default class ProxiwashScreen extends React.Component { refreshTime={REFRESH_TIME} fetchUrl={DATA_URL} renderItem={this.getRenderItem} - updateErrorText={i18n.t("proxiwashScreen.listUpdateFail")}/> + renderSectionHeader={this.getRenderSectionHeader}/> + ); + } + + getRenderSectionHeader({section}: Object) { + return ( + + {section.title} + ); } diff --git a/screens/SelfMenuScreen.js b/screens/SelfMenuScreen.js index 226e108..4e15f8b 100644 --- a/screens/SelfMenuScreen.js +++ b/screens/SelfMenuScreen.js @@ -95,19 +95,7 @@ export default class SelfMenuScreen extends React.Component { getRenderSectionHeader({section}: Object) { return ( - - {section.title} - + {section.title} ); } @@ -119,7 +107,7 @@ export default class SelfMenuScreen extends React.Component { }}> + /> { fetchUrl={DATA_URL} renderItem={this.getRenderItem} renderSectionHeader={this.getRenderSectionHeader} - updateErrorText={i18n.t("homeScreen.listUpdateFail")} stickyHeader={true}/> ); } From 8d914c97f54adc4b7ad949e09614e886b42fe5f3 Mon Sep 17 00:00:00 2001 From: keplyx Date: Sat, 7 Mar 2020 11:49:32 +0100 Subject: [PATCH 11/66] Removed unused libs and improved style responsiveness --- App.js | 14 +-- components/CustomAgenda.js | 40 +++++++++ components/DashboardItem.js | 6 -- components/EmptyWebSectionListItem.js | 41 +++++++++ components/FeedItem.js | 42 +++++++++ components/HeaderButton.js | 16 ++++ components/ProxiwashListItem.js | 66 ++++++++++++++ components/Sidebar.js | 9 +- components/SidebarDivider.js | 23 +++++ components/SquareDashboardItem.js | 55 ++++++++++++ components/WebSectionList.js | 40 ++------- components/WebViewScreen.js | 12 +-- constants/ProxiwashConstants.js | 10 +++ navigation/DrawerNavigator.js | 20 +---- navigation/MainTabNavigator.js | 18 +--- package.json | 3 - screens/HomeScreen.js | 76 ++++++---------- screens/PlanningDisplayScreen.js | 2 +- screens/PlanningScreen.js | 51 +++-------- screens/Proximo/ProximoListScreen.js | 2 +- screens/Proximo/ProximoMainScreen.js | 15 +--- screens/Proxiwash/ProxiwashScreen.js | 123 ++++++++------------------ screens/SettingsScreen.js | 102 ++++++++------------- translations/en.json | 15 +--- translations/fr.json | 15 +--- utils/ThemeManager.js | 2 + utils/WebDataManager.js | 28 ------ 27 files changed, 439 insertions(+), 407 deletions(-) create mode 100644 components/CustomAgenda.js create mode 100644 components/EmptyWebSectionListItem.js create mode 100644 components/FeedItem.js create mode 100644 components/HeaderButton.js create mode 100644 components/ProxiwashListItem.js create mode 100644 components/SidebarDivider.js create mode 100644 components/SquareDashboardItem.js create mode 100644 constants/ProxiwashConstants.js diff --git a/App.js b/App.js index f54c899..58bcf0d 100644 --- a/App.js +++ b/App.js @@ -3,7 +3,6 @@ import * as React from 'react'; import {Platform, StatusBar} from 'react-native'; import LocaleManager from './utils/LocaleManager'; -import * as Font from 'expo-font'; import AsyncStorageManager from "./utils/AsyncStorageManager"; import CustomIntroSlider from "./components/CustomIntroSlider"; import {SplashScreen} from 'expo'; @@ -23,17 +22,6 @@ type State = { currentTheme: ?Object, }; -const MyTheme = { - dark: false, - colors: { - primary: 'rgb(255, 45, 85)', - background: 'rgb(242, 242, 242)', - card: 'rgb(255, 255, 255)', - text: 'rgb(28, 28, 30)', - border: 'rgb(199, 199, 204)', - }, -}; - const Stack = createStackNavigator(); export default class App extends React.Component { @@ -54,7 +42,7 @@ export default class App extends React.Component { } /** - * Updates the theme and clears the cache to force reloading the app colors. Need to edit shoutem theme for ti to work + * Updates the theme */ updateTheme() { this.setState({ diff --git a/components/CustomAgenda.js b/components/CustomAgenda.js new file mode 100644 index 0000000..ee2b61c --- /dev/null +++ b/components/CustomAgenda.js @@ -0,0 +1,40 @@ +import * as React from 'react'; +import {withTheme} from 'react-native-paper'; +import {Agenda} from "react-native-calendars"; + +function CustomAgenda(props) { + const { colors } = props.theme; + return ( + + ); +} + +export default withTheme(CustomAgenda); diff --git a/components/DashboardItem.js b/components/DashboardItem.js index adedc27..fdabb1d 100644 --- a/components/DashboardItem.js +++ b/components/DashboardItem.js @@ -28,12 +28,6 @@ export default class DashboardItem extends React.Component { displayEvent: undefined, }; - shouldComponentUpdate(nextProps: Props): boolean { - return nextProps.isAvailable !== this.props.isAvailable || - nextProps.subtitle !== this.props.subtitle; - } - - /** * Convert the date string given by in the event list json to a date object * @param dateString diff --git a/components/EmptyWebSectionListItem.js b/components/EmptyWebSectionListItem.js new file mode 100644 index 0000000..ecba4e0 --- /dev/null +++ b/components/EmptyWebSectionListItem.js @@ -0,0 +1,41 @@ +import * as React from 'react'; +import {ActivityIndicator, Subheading, withTheme} from 'react-native-paper'; +import {View} from "react-native"; +import {MaterialCommunityIcons} from "@expo/vector-icons"; + +function EmptyWebSectionListItem(props) { + const { colors } = props.theme; + return ( + + + {props.refreshing ? + + : + } + + + + {props.text} + + + ); +} + +export default withTheme(EmptyWebSectionListItem); diff --git a/components/FeedItem.js b/components/FeedItem.js new file mode 100644 index 0000000..d77b101 --- /dev/null +++ b/components/FeedItem.js @@ -0,0 +1,42 @@ +import * as React from 'react'; +import {Avatar, Button, Card, withTheme} from 'react-native-paper'; +import {TouchableOpacity, View} from "react-native"; +import Autolink from "react-native-autolink"; +import i18n from "i18n-js"; + +const ICON_AMICALE = require('../assets/amicale.png'); + +function FeedItem(props) { + const {colors} = props.theme; + return ( + + } + /> + {props.full_picture !== '' && props.full_picture !== undefined ? + + + : } + + {props.message !== undefined ? + : + } + + + + + + ); +} + +export default withTheme(FeedItem); diff --git a/components/HeaderButton.js b/components/HeaderButton.js new file mode 100644 index 0000000..663dd44 --- /dev/null +++ b/components/HeaderButton.js @@ -0,0 +1,16 @@ +import * as React from 'react'; +import {IconButton, withTheme} from 'react-native-paper'; + +function HeaderButton(props) { + const { colors } = props.theme; + return ( + + ); +} + +export default withTheme(HeaderButton); diff --git a/components/ProxiwashListItem.js b/components/ProxiwashListItem.js new file mode 100644 index 0000000..cfb2c39 --- /dev/null +++ b/components/ProxiwashListItem.js @@ -0,0 +1,66 @@ +import * as React from 'react'; +import {Divider, List, Text, withTheme} from 'react-native-paper'; +import {View} from "react-native"; +import ProxiwashConstants from "../constants/ProxiwashConstants"; + +function ProxiwashListItem(props) { + const {colors} = props.theme; + let stateColors = {}; + stateColors[ProxiwashConstants.machineStates.TERMINE] = colors.proxiwashFinishedColor; + stateColors[ProxiwashConstants.machineStates.DISPONIBLE] = colors.proxiwashReadyColor; + stateColors[ProxiwashConstants.machineStates["EN COURS"]] = colors.proxiwashRunningColor; + stateColors[ProxiwashConstants.machineStates.HS] = colors.proxiwashBrokenColor; + stateColors[ProxiwashConstants.machineStates.ERREUR] = colors.proxiwashErrorColor; + const icon = ( + props.isWatched ? + : + + ); + return ( + + + icon} + right={() => ( + + + + {props.statusText} + + + + + )} + /> + + + ); +} + +export default withTheme(ProxiwashListItem); diff --git a/components/Sidebar.js b/components/Sidebar.js index 76ad5f0..b5ed72f 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -6,7 +6,7 @@ import i18n from "i18n-js"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../utils/ThemeManager"; import * as WebBrowser from 'expo-web-browser'; -import {List} from 'react-native-paper'; +import SidebarDivider from "./SidebarDivider"; import {DrawerItem} from '@react-navigation/drawer'; const deviceWidth = Dimensions.get("window").width; @@ -143,6 +143,7 @@ export default class SideBar extends React.Component { getRenderItem({item}: Object) { + console.log("rendering SideBar Item"); const onListItemPress = this.onListItemPress.bind(this, item); if (item.icon !== undefined) { return ( @@ -151,7 +152,6 @@ export default class SideBar extends React.Component { focused={false} icon={({color, size}) => } - selected={this.state.active === item.route} onPress={onListItemPress} style={{ marginLeft: 0, @@ -163,10 +163,7 @@ export default class SideBar extends React.Component { ); } else { return ( - + ); } diff --git a/components/SidebarDivider.js b/components/SidebarDivider.js new file mode 100644 index 0000000..ec0927b --- /dev/null +++ b/components/SidebarDivider.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import { withTheme } from 'react-native-paper'; +import {DrawerItem} from "@react-navigation/drawer"; + +function SidebarDivider(props) { + const { colors } = props.theme; + return ( + + ); +} + +export default withTheme(SidebarDivider); diff --git a/components/SquareDashboardItem.js b/components/SquareDashboardItem.js new file mode 100644 index 0000000..c071bce --- /dev/null +++ b/components/SquareDashboardItem.js @@ -0,0 +1,55 @@ +import * as React from 'react'; +import {Card, Text, Title, withTheme} from 'react-native-paper'; +import {View} from "react-native"; +import {MaterialCommunityIcons} from "@expo/vector-icons"; + +function SquareDashboardItem(props) { + const { colors } = props.theme; + return ( + + + + + + + + {props.title} + + + {props.subtitle} + + + + + ); +} + +export default withTheme(SquareDashboardItem); diff --git a/components/WebSectionList.js b/components/WebSectionList.js index 90dc594..1f34617 100644 --- a/components/WebSectionList.js +++ b/components/WebSectionList.js @@ -1,12 +1,11 @@ // @flow import * as React from 'react'; -import ThemeManager from '../utils/ThemeManager'; import WebDataManager from "../utils/WebDataManager"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; import i18n from "i18n-js"; -import {ActivityIndicator, Snackbar, Subheading} from 'react-native-paper'; +import {Snackbar} from 'react-native-paper'; import {RefreshControl, SectionList, View} from "react-native"; +import EmptyWebSectionListItem from "./EmptyWebSectionListItem"; type Props = { navigation: Object, @@ -145,35 +144,12 @@ export default class WebSectionList extends React.Component { getEmptyRenderItem({item}: Object) { return ( - - - {this.state.refreshing ? - - : - } - - - - {item.text} - - ); + + ); } createEmptyDataset() { diff --git a/components/WebViewScreen.js b/components/WebViewScreen.js index 76bdeae..24fd705 100644 --- a/components/WebViewScreen.js +++ b/components/WebViewScreen.js @@ -3,10 +3,9 @@ import * as React from 'react'; import {View} from 'react-native'; import WebView from "react-native-webview"; -import Touchable from "react-native-platform-touchable"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../utils/ThemeManager"; import {ActivityIndicator} from 'react-native-paper'; +import HeaderButton from "./HeaderButton"; type Props = { navigation: Object, @@ -58,14 +57,7 @@ export default class WebViewScreen extends React.Component { getHeaderButton(clickAction: Function, icon: string) { return ( - - - + ); } diff --git a/constants/ProxiwashConstants.js b/constants/ProxiwashConstants.js new file mode 100644 index 0000000..ae2599f --- /dev/null +++ b/constants/ProxiwashConstants.js @@ -0,0 +1,10 @@ + +export default { + machineStates: { + "TERMINE": "0", + "DISPONIBLE": "1", + "EN COURS": "2", + "HS": "3", + "ERREUR": "4" + }, +}; diff --git a/navigation/DrawerNavigator.js b/navigation/DrawerNavigator.js index a3a0f14..2d7c698 100644 --- a/navigation/DrawerNavigator.js +++ b/navigation/DrawerNavigator.js @@ -12,10 +12,7 @@ import BibScreen from "../screens/Websites/BibScreen"; import DebugScreen from '../screens/DebugScreen'; import Sidebar from "../components/Sidebar"; import {createStackNavigator, TransitionPresets} from "@react-navigation/stack"; -import {View} from "react-native"; -import Touchable from "react-native-platform-touchable"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; -import ThemeManager from "../utils/ThemeManager"; +import HeaderButton from "../components/HeaderButton"; const defaultScreenOptions = { gestureEnabled: true, @@ -25,20 +22,7 @@ const defaultScreenOptions = { function getDrawerButton(navigation: Object) { return ( - - - - - + ); } diff --git a/navigation/MainTabNavigator.js b/navigation/MainTabNavigator.js index 7a2e3ca..79f5306 100644 --- a/navigation/MainTabNavigator.js +++ b/navigation/MainTabNavigator.js @@ -14,8 +14,7 @@ import PlanexScreen from '../screens/Websites/PlanexScreen'; import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../utils/ThemeManager"; import AsyncStorageManager from "../utils/AsyncStorageManager"; -import {View} from "react-native"; -import Touchable from "react-native-platform-touchable"; +import HeaderButton from "../components/HeaderButton"; const TAB_ICONS = { Home: 'triangle', @@ -33,20 +32,7 @@ const defaultScreenOptions = { function getDrawerButton(navigation: Object) { return ( - - - - - + ); } diff --git a/package.json b/package.json index e3063d5..39ade1f 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,6 @@ "@react-navigation/native": "^5.0.9", "@react-navigation/stack": "^5.1.1", "expo": "^36.0.0", - "expo-font": "~8.0.0", "expo-linear-gradient": "~8.0.0", "expo-localization": "~8.0.0", "expo-permissions": "~8.0.0", @@ -31,12 +30,10 @@ "react-native-gesture-handler": "~1.5.0", "react-native-modalize": "^1.3.6", "react-native-paper": "^3.6.0", - "react-native-platform-touchable": "^1.1.1", "react-native-reanimated": "~1.4.0", "react-native-render-html": "^4.1.2", "react-native-safe-area-context": "0.6.0", "react-native-screens": "2.0.0-alpha.12", - "react-native-status-bar-height": "^2.3.1", "react-native-webview": "7.4.3" }, "devDependencies": { diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js index 3ac0274..8e6a589 100644 --- a/screens/HomeScreen.js +++ b/screens/HomeScreen.js @@ -3,18 +3,17 @@ import * as React from 'react'; import {TouchableOpacity, View} from 'react-native'; import i18n from "i18n-js"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; import Autolink from 'react-native-autolink'; import ThemeManager from "../utils/ThemeManager"; import DashboardItem from "../components/DashboardItem"; import * as WebBrowser from 'expo-web-browser'; import WebSectionList from "../components/WebSectionList"; -import PlatformTouchable from "react-native-platform-touchable"; -import {Avatar, Card, Text} from 'react-native-paper'; +import {Avatar, Button, Card, Text} from 'react-native-paper'; +import FeedItem from "../components/FeedItem"; +import SquareDashboardItem from "../components/SquareDashboardItem"; // import DATA from "../dashboard_data.json"; -const ICON_AMICALE = require('../assets/amicale.png'); const NAME_AMICALE = 'Amicale INSA Toulouse'; const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/dashboard/dashboard_data.json"; @@ -373,24 +372,24 @@ export default class HomeScreen extends React.Component { flexDirection: 'row', marginLeft: 10, marginRight: 10, + marginBottom: 10, }}> - - + + isAvailable={isProximoAvailable} + isLeft={false}/> ); } @@ -477,23 +476,22 @@ export default class HomeScreen extends React.Component { marginLeft: 10, marginRight: 10, }}> - - + + isAvailable={tutorinsaIsAvailable} + isLeft={false}/> ); } @@ -506,36 +504,14 @@ export default class HomeScreen extends React.Component { const onImagePress = this.openLink.bind(this, item.full_picture); const onOutLinkPress = this.openLink.bind(this, item.permalink_url); return ( - - } - /> - {item.full_picture !== '' && item.full_picture !== undefined ? - - - : } - - {item.message !== undefined ? - : - } - - - - En savoir plus - - - - + ); } diff --git a/screens/PlanningDisplayScreen.js b/screens/PlanningDisplayScreen.js index b79628a..530326c 100644 --- a/screens/PlanningDisplayScreen.js +++ b/screens/PlanningDisplayScreen.js @@ -27,7 +27,7 @@ export default class PlanningDisplayScreen extends React.Component { render() { // console.log("rendering planningDisplayScreen"); return ( - + {this.displayData.title} diff --git a/screens/PlanningScreen.js b/screens/PlanningScreen.js index 32f4460..6281ff9 100644 --- a/screens/PlanningScreen.js +++ b/screens/PlanningScreen.js @@ -4,10 +4,11 @@ import * as React from 'react'; import {BackHandler, Image, View} from 'react-native'; import i18n from "i18n-js"; import ThemeManager from "../utils/ThemeManager"; -import {Agenda, LocaleConfig} from 'react-native-calendars'; +import {LocaleConfig} from 'react-native-calendars'; import WebDataManager from "../utils/WebDataManager"; import PlanningEventManager from '../utils/PlanningEventManager'; import {Text, Title, List, Avatar, Divider} from 'react-native-paper'; +import CustomAgenda from "../components/CustomAgenda"; LocaleConfig.locales['fr'] = { monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], @@ -64,14 +65,6 @@ export default class PlanningScreen extends React.Component { constructor(props: any) { super(props); this.webDataManager = new WebDataManager(FETCH_URL); - this.didFocusSubscription = props.navigation.addListener( - 'didFocus', - () => - BackHandler.addEventListener( - 'hardwareBackPress', - this.onBackButtonPressAndroid - ) - ); if (i18n.currentLocale().startsWith("fr")) { LocaleConfig.defaultLocale = 'fr'; } @@ -88,8 +81,16 @@ export default class PlanningScreen extends React.Component { componentDidMount() { this.onRefresh(); + this.didFocusSubscription = this.props.navigation.addListener( + 'focus', + () => + BackHandler.addEventListener( + 'hardwareBackPress', + this.onBackButtonPressAndroid + ) + ); this.willBlurSubscription = this.props.navigation.addListener( - 'willBlur', + 'blur', () => BackHandler.removeEventListener( 'hardwareBackPress', @@ -235,7 +236,7 @@ export default class PlanningScreen extends React.Component { render() { // console.log("rendering PlanningScreen"); return ( - { // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday. firstDay={1} // ref to this agenda in order to handle back button event - ref={this.onAgendaRef} - // agenda theme - theme={{ - backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor, - calendarBackground: ThemeManager.getCurrentThemeVariables().background, - textSectionTitleColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor, - selectedDayBackgroundColor: ThemeManager.getCurrentThemeVariables().primary, - selectedDayTextColor: '#ffffff', - todayTextColor: ThemeManager.getCurrentThemeVariables().primary, - dayTextColor: ThemeManager.getCurrentThemeVariables().text, - textDisabledColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor, - dotColor: ThemeManager.getCurrentThemeVariables().primary, - selectedDotColor: '#ffffff', - arrowColor: 'orange', - monthTextColor: ThemeManager.getCurrentThemeVariables().primary, - indicatorColor: ThemeManager.getCurrentThemeVariables().primary, - textDayFontWeight: '300', - textMonthFontWeight: 'bold', - textDayHeaderFontWeight: '300', - textDayFontSize: 16, - textMonthFontSize: 16, - textDayHeaderFontSize: 16, - agendaDayTextColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor, - agendaDayNumColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor, - agendaTodayColor: ThemeManager.getCurrentThemeVariables().primary, - agendaKnobColor: ThemeManager.getCurrentThemeVariables().primary, - }} + onRef={this.onAgendaRef} /> ); } diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index b1bcc72..f8a2b2c 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -341,7 +341,7 @@ export default class ProximoListScreen extends React.Component { } render() { - // console.log("rendering ProximoListScreen"); + console.log("rendering ProximoListScreen"); return ( { style={{ flexDirection: 'row', }}> - - + + ); } diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js index e409547..de461c0 100644 --- a/screens/Proxiwash/ProxiwashScreen.js +++ b/screens/Proxiwash/ProxiwashScreen.js @@ -9,21 +9,15 @@ import NotificationsManager from "../../utils/NotificationsManager"; import AsyncStorageManager from "../../utils/AsyncStorageManager"; import * as Expo from "expo"; import {Divider, IconButton, List, Text, Title} from 'react-native-paper'; +import HeaderButton from "../../components/HeaderButton"; +import ProxiwashListItem from "../../components/ProxiwashListItem"; +import ProxiwashConstants from "../../constants/ProxiwashConstants"; const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json"; -const MACHINE_STATES = { - "TERMINE": "0", - "DISPONIBLE": "1", - "EN COURS": "2", - "HS": "3", - "ERREUR": "4" -}; - let stateStrings = {}; let modalStateStrings = {}; let stateIcons = {}; -let stateColors = {}; const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds @@ -63,30 +57,23 @@ export default class ProxiwashScreen extends React.Component { */ constructor() { super(); - let colors = ThemeManager.getCurrentThemeVariables(); - stateColors[MACHINE_STATES.TERMINE] = colors.proxiwashFinishedColor; - stateColors[MACHINE_STATES.DISPONIBLE] = colors.proxiwashReadyColor; - stateColors[MACHINE_STATES["EN COURS"]] = colors.proxiwashRunningColor; - stateColors[MACHINE_STATES.HS] = colors.proxiwashBrokenColor; - stateColors[MACHINE_STATES.ERREUR] = colors.proxiwashErrorColor; + stateStrings[ProxiwashConstants.machineStates.TERMINE] = i18n.t('proxiwashScreen.states.finished'); + stateStrings[ProxiwashConstants.machineStates.DISPONIBLE] = i18n.t('proxiwashScreen.states.ready'); + stateStrings[ProxiwashConstants.machineStates["EN COURS"]] = i18n.t('proxiwashScreen.states.running'); + stateStrings[ProxiwashConstants.machineStates.HS] = i18n.t('proxiwashScreen.states.broken'); + stateStrings[ProxiwashConstants.machineStates.ERREUR] = i18n.t('proxiwashScreen.states.error'); - stateStrings[MACHINE_STATES.TERMINE] = i18n.t('proxiwashScreen.states.finished'); - stateStrings[MACHINE_STATES.DISPONIBLE] = i18n.t('proxiwashScreen.states.ready'); - stateStrings[MACHINE_STATES["EN COURS"]] = i18n.t('proxiwashScreen.states.running'); - stateStrings[MACHINE_STATES.HS] = i18n.t('proxiwashScreen.states.broken'); - stateStrings[MACHINE_STATES.ERREUR] = i18n.t('proxiwashScreen.states.error'); + modalStateStrings[ProxiwashConstants.machineStates.TERMINE] = i18n.t('proxiwashScreen.modal.finished'); + modalStateStrings[ProxiwashConstants.machineStates.DISPONIBLE] = i18n.t('proxiwashScreen.modal.ready'); + modalStateStrings[ProxiwashConstants.machineStates["EN COURS"]] = i18n.t('proxiwashScreen.modal.running'); + modalStateStrings[ProxiwashConstants.machineStates.HS] = i18n.t('proxiwashScreen.modal.broken'); + modalStateStrings[ProxiwashConstants.machineStates.ERREUR] = i18n.t('proxiwashScreen.modal.error'); - modalStateStrings[MACHINE_STATES.TERMINE] = i18n.t('proxiwashScreen.modal.finished'); - modalStateStrings[MACHINE_STATES.DISPONIBLE] = i18n.t('proxiwashScreen.modal.ready'); - modalStateStrings[MACHINE_STATES["EN COURS"]] = i18n.t('proxiwashScreen.modal.running'); - modalStateStrings[MACHINE_STATES.HS] = i18n.t('proxiwashScreen.modal.broken'); - modalStateStrings[MACHINE_STATES.ERREUR] = i18n.t('proxiwashScreen.modal.error'); - - stateIcons[MACHINE_STATES.TERMINE] = 'check-circle'; - stateIcons[MACHINE_STATES.DISPONIBLE] = 'radiobox-blank'; - stateIcons[MACHINE_STATES["EN COURS"]] = 'progress-check'; - stateIcons[MACHINE_STATES.HS] = 'alert-octagram-outline'; - stateIcons[MACHINE_STATES.ERREUR] = 'alert'; + stateIcons[ProxiwashConstants.machineStates.TERMINE] = 'check-circle'; + stateIcons[ProxiwashConstants.machineStates.DISPONIBLE] = 'radiobox-blank'; + stateIcons[ProxiwashConstants.machineStates["EN COURS"]] = 'progress-check'; + stateIcons[ProxiwashConstants.machineStates.HS] = 'alert-octagram-outline'; + stateIcons[ProxiwashConstants.machineStates.ERREUR] = 'alert'; // let dataString = AsyncStorageManager.getInstance().preferences.proxiwashWatchedMachines.current; this.onAboutPress = this.onAboutPress.bind(this); @@ -247,9 +234,9 @@ export default class ProxiwashScreen extends React.Component { */ showAlert(title: string, item: Object, isDryer: boolean) { let buttons = [{text: i18n.t("proxiwashScreen.modal.ok")}]; - let message = modalStateStrings[MACHINE_STATES[item.state]]; + let message = modalStateStrings[ProxiwashConstants.machineStates[item.state]]; const onPress = this.setupNotifications.bind(this, item.number); - if (MACHINE_STATES[item.state] === MACHINE_STATES["EN COURS"]) { + if (ProxiwashConstants.machineStates[item.state] === ProxiwashConstants.machineStates["EN COURS"]) { buttons = [ { text: this.isMachineWatched(item.number) ? @@ -267,7 +254,7 @@ export default class ProxiwashScreen extends React.Component { end: item.endTime, remaining: item.remainingTime }); - } else if (MACHINE_STATES[item.state] === MACHINE_STATES.DISPONIBLE) { + } else if (ProxiwashConstants.machineStates[item.state] === ProxiwashConstants.machineStates.DISPONIBLE) { if (isDryer) message += '\n' + i18n.t('proxiwashScreen.dryersTariff'); else @@ -286,12 +273,7 @@ export default class ProxiwashScreen extends React.Component { getRightButton() { return ( - + ); } @@ -327,56 +309,25 @@ export default class ProxiwashScreen extends React.Component { * @returns {React.Node} */ getRenderItem({item, section}: Object) { - let isMachineRunning = MACHINE_STATES[item.state] === MACHINE_STATES["EN COURS"]; - let machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')) + ' n°' + item.number; - let isDryer = section.title === i18n.t('proxiwashScreen.dryers'); + const isMachineRunning = ProxiwashConstants.machineStates[item.state] === ProxiwashConstants.machineStates["EN COURS"]; + const machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')) + ' n°' + item.number; + const isDryer = section.title === i18n.t('proxiwashScreen.dryers'); const onPress = this.showAlert.bind(this, machineName, item, isDryer); let width = item.donePercent !== '' ? (parseInt(item.donePercent)).toString() + '%' : 0; - if (MACHINE_STATES[item.state] === '0') + if (ProxiwashConstants.machineStates[item.state] === '0') width = '100%'; return ( - - - this.isMachineWatched(item.number) ? - : - } - right={props => ( - - - - {stateStrings[MACHINE_STATES[item.state]]} - - - - - )} - /> - - + ); } } diff --git a/screens/SettingsScreen.js b/screens/SettingsScreen.js index 1de1a6e..614d71a 100644 --- a/screens/SettingsScreen.js +++ b/screens/SettingsScreen.js @@ -1,12 +1,12 @@ // @flow import * as React from 'react'; -import {ScrollView, View} from "react-native"; +import {ScrollView} from "react-native"; import ThemeManager from '../utils/ThemeManager'; import i18n from "i18n-js"; import AsyncStorageManager from "../utils/AsyncStorageManager"; import NotificationsManager from "../utils/NotificationsManager"; -import {Card, List, Switch, RadioButton, Text, TouchableRipple} from 'react-native-paper'; +import {Card, List, Switch, ToggleButton} from 'react-native-paper'; type Props = { navigation: Object, @@ -39,39 +39,6 @@ export default class SettingsScreen extends React.Component { this.onToggleNightMode = this.onToggleNightMode.bind(this); } - /** - * Get a list item using the specified control - * - * @param control The custom control to use - * @param icon The icon name to display on the list item - * @param title The text to display as this list item title - * @param subtitle The text to display as this list item subtitle - * @returns {React.Node} - */ - static getGeneralItem(control: React.Node, icon: string, title: string, subtitle: string) { - return ( - } - right={props => control} - /> - ); - } - - getRadioButton(onPress: Function, value: string, label: string) { - return ( - - - {label} - - - - ); - } - /** * Save the value for the proxiwash reminder notification time * @@ -95,11 +62,13 @@ export default class SettingsScreen extends React.Component { * @param value The value to store */ onStartScreenPickerValueChange(value: string) { - let key = AsyncStorageManager.getInstance().preferences.defaultStartScreen.key; - AsyncStorageManager.getInstance().savePref(key, value); - this.setState({ - startScreenPickerSelected: value - }); + if (value != null) { + let key = AsyncStorageManager.getInstance().preferences.defaultStartScreen.key; + AsyncStorageManager.getInstance().savePref(key, value); + this.setState({ + startScreenPickerSelected: value + }); + } } /** @@ -109,16 +78,14 @@ export default class SettingsScreen extends React.Component { */ getProxiwashNotifPicker() { return ( - - - - - - - + + + + ); } @@ -129,16 +96,16 @@ export default class SettingsScreen extends React.Component { */ getStartScreenPicker() { return ( - - - - - - - + + + + + + ); } @@ -180,11 +147,18 @@ export default class SettingsScreen extends React.Component { - {this.getToggleItem(this.onToggleNightMode, 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))} + {this.getToggleItem( + this.onToggleNightMode, + 'theme-light-dark', + i18n.t('settingsScreen.nightMode'), + this.state.nightMode ? + i18n.t('settingsScreen.nightModeSubOn') : + i18n.t('settingsScreen.nightModeSubOff') + )} } + left={props => } > {this.getStartScreenPicker()} @@ -192,13 +166,15 @@ export default class SettingsScreen extends React.Component { - } - > - {this.getProxiwashNotifPicker()} - + + } + > + {this.getProxiwashNotifPicker()} + + diff --git a/translations/en.json b/translations/en.json index 852f257..0e3e36f 100644 --- a/translations/en.json +++ b/translations/en.json @@ -60,21 +60,12 @@ "settingsScreen": { "generalCard": "General", "nightMode": "Night Mode", - "nightModeSub": "Switch the app to a dark or light theme", + "nightModeSubOn": "Your eyes are at peace", + "nightModeSubOff": "Your eyes are burning", "startScreen": "Start Screen", "startScreenSub": "Select which screen to start the app on", "proxiwashNotifReminder": "Machine running reminder", - "proxiwashNotifReminderSub": "Choose when to send a notification to remind you a machine is running with your laundry", - "proxiwashNotifReminderPicker": { - "never": "Never", - "1": "1 min", - "2": "2 min", - "3": "3 min", - "5": "5 min", - "10": "10 min", - "20": "20 min", - "30": "30 min" - } + "proxiwashNotifReminderSub": "How many minutes before", }, "homeScreen": { "listUpdated": "List updated!", diff --git a/translations/fr.json b/translations/fr.json index 8d506a8..e9807dc 100644 --- a/translations/fr.json +++ b/translations/fr.json @@ -60,21 +60,12 @@ "settingsScreen": { "generalCard": "Général", "nightMode": "Mode Nuit", - "nightModeSub": "Passer l'application dans un thème sombre ou clair", + "nightModeSubOn": "Vos yeux brulent", + "nightModeSubOff": "Vos yeux vous remercient", "startScreen": "Écran de démarrage", "startScreenSub": "Choisissez l'écran utilisé au démarrage", "proxiwashNotifReminder": "Rappel de machine en cours", - "proxiwashNotifReminderSub": "Choississez quand envoyer une notification pour vous rappeler qu'une machine avec votre linge est en cours", - "proxiwashNotifReminderPicker": { - "never": "Jamais", - "1": "1 min", - "2": "2 min", - "3": "3 min", - "5": "5 min", - "10": "10 min", - "20": "20 min", - "30": "30 min" - } + "proxiwashNotifReminderSub": "Combien de minutes avant", }, "homeScreen": { "listUpdated": "List mise à jour!", diff --git a/utils/ThemeManager.js b/utils/ThemeManager.js index 207ffcd..134e7f6 100644 --- a/utils/ThemeManager.js +++ b/utils/ThemeManager.js @@ -38,6 +38,7 @@ export default class ThemeManager { proxiwashFinishedColor: "rgba(54,165,22,0.31)", proxiwashReadyColor: "transparent", proxiwashRunningColor: "rgba(94,104,241,0.3)", + proxiwashRunningBgColor: "rgba(99,109,255,0.14)", proxiwashBrokenColor: "rgba(162,162,162,0.31)", proxiwashErrorColor: "rgba(204,7,0,0.31)", @@ -74,6 +75,7 @@ export default class ThemeManager { proxiwashFinishedColor: "rgba(17,149,32,0.53)", proxiwashReadyColor: "transparent", proxiwashRunningColor: "rgba(29,59,175,0.65)", + proxiwashRunningBgColor: "rgba(99,109,255,0.14)", proxiwashBrokenColor: "#000000", proxiwashErrorColor: "rgba(213,8,0,0.57)", diff --git a/utils/WebDataManager.js b/utils/WebDataManager.js index 251c299..2ee84cc 100644 --- a/utils/WebDataManager.js +++ b/utils/WebDataManager.js @@ -24,38 +24,10 @@ export default class WebDataManager { let response = await fetch(this.FETCH_URL); fetchedData = await response.json(); } catch (error) { - // console.log('Could not read FetchedData from server'); - // console.log(error); throw new Error('Could not read FetchedData from server'); } this.lastDataFetched = fetchedData; return fetchedData; } - /** - * Detects if the fetched data is not an empty object - * - * @return - */ - isDataObjectValid(): boolean { - return Object.keys(this.lastDataFetched).length > 0; - } - - /** - * Show a toast message depending on the validity of the fetched data - * - * @param errorString - */ - showUpdateToast(errorString) { - // let isSuccess = this.isDataObjectValid(); - // if (!isSuccess) { - // Toast.show({ - // text: errorString, - // buttonText: 'OK', - // type: isSuccess ? "success" : "danger", - // duration: 2000 - // }); - // } - } - } From 922f15f3d2d50d2b0e6c5eeb5c1eca2ae16c314b Mon Sep 17 00:00:00 2001 From: keplyx Date: Sat, 7 Mar 2020 22:31:08 +0100 Subject: [PATCH 12/66] Set sort menu with modalize --- screens/Proximo/ProximoListScreen.js | 246 +++++++++++---------------- translations/en.json | 4 +- translations/fr.json | 4 +- 3 files changed, 110 insertions(+), 144 deletions(-) diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index f8a2b2c..22cf447 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -3,15 +3,9 @@ import * as React from 'react'; import {FlatList, Image, ScrollView, View} from "react-native"; import i18n from "i18n-js"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../../utils/ThemeManager"; import {Modalize} from 'react-native-modalize'; -import {Avatar, Divider, IconButton, List, Menu, Searchbar, Subheading, Text, Title} from "react-native-paper"; - -const sortMode = { - price: "0", - name: '1', -}; +import {Avatar, IconButton, List, RadioButton, Searchbar, Subheading, Text, Title} from "react-native-paper"; function sortPrice(a, b) { return a.price - b.price; @@ -22,17 +16,17 @@ function sortPriceReverse(a, b) { } function sortName(a, b) { - if (a.name < b.name) + if (a.name.toLowerCase() < b.name.toLowerCase()) return -1; - if (a.name > b.name) + if (a.name.toLowerCase() > b.name.toLowerCase()) return 1; return 0; } function sortNameReverse(a, b) { - if (a.name < b.name) + if (a.name.toLowerCase() < b.name.toLowerCase()) return 1; - if (a.name > b.name) + if (a.name.toLowerCase() > b.name.toLowerCase()) return -1; return 0; } @@ -43,13 +37,9 @@ type Props = { } type State = { - currentSortMode: string, - isSortReversed: boolean, - sortPriceIcon: React.Node, - sortNameIcon: React.Node, - modalCurrentDisplayItem: Object, + currentSortMode: number, + modalCurrentDisplayItem: React.Node, currentlyDisplayedData: Array, - menuVisible: boolean, }; /** @@ -62,10 +52,7 @@ export default class ProximoListScreen extends React.Component { shouldFocusSearchBar: boolean; onSearchStringChange: Function; - onSelectSortModeName: Function; - onSelectSortModePrice: Function; onSortMenuPress: Function; - onSortMenuDismiss: Function; renderItem: Function; constructor(props: any) { @@ -75,67 +62,42 @@ export default class ProximoListScreen extends React.Component { this.shouldFocusSearchBar = this.props.route.params['shouldFocusSearchBar']; this.state = { currentlyDisplayedData: this.originalData, - currentSortMode: sortMode.price, - isSortReversed: false, - sortPriceIcon: '', - sortNameIcon: '', - modalCurrentDisplayItem: {}, - menuVisible: false, + currentSortMode: 1, + modalCurrentDisplayItem: , }; this.onSearchStringChange = this.onSearchStringChange.bind(this); - this.onSelectSortModeName = this.onSelectSortModeName.bind(this); - this.onSelectSortModePrice = this.onSelectSortModePrice.bind(this); this.onSortMenuPress = this.onSortMenuPress.bind(this); - this.onSortMenuDismiss = this.onSortMenuPress.bind(this); this.renderItem = this.renderItem.bind(this); } - - /** - * Sets the sort mode based on the one selected. - * If the selected mode is the current one, reverse it. - * - * @param mode The string representing the mode - */ - sortModeSelected(mode: string) { - let isReverse = this.state.isSortReversed; - if (mode === this.state.currentSortMode) // reverse mode - isReverse = !isReverse; // this.state not updating on this function cycle - else - isReverse = false; - this.setSortMode(mode, isReverse); - } - /** * Set the current sort mode. * - * @param mode The string representing the mode - * @param isReverse Whether to use a reverse sort + * @param mode The number representing the mode */ - setSortMode(mode: string, isReverse: boolean) { + setSortMode(mode: number) { this.setState({ currentSortMode: mode, - isSortReversed: isReverse }); let data = this.state.currentlyDisplayedData; switch (mode) { - case sortMode.price: - if (isReverse) { - data.sort(sortPriceReverse); - } else { - data.sort(sortPrice); - } + case 1: + data.sort(sortPrice); break; - case sortMode.name: - if (isReverse) { - data.sort(sortNameReverse); - } else { - data.sort(sortName); - } + case 2: + data.sort(sortPriceReverse); + break; + case 3: + data.sort(sortName); + break; + case 4: + data.sort(sortNameReverse); break; } - this.setupSortIcons(mode, isReverse); + if (this.modalRef.current && mode !== this.state.currentSortMode) { + this.modalRef.current.close(); + } } /** @@ -148,7 +110,7 @@ export default class ProximoListScreen extends React.Component { headerRight: button, headerTitle: title, }); - this.setSortMode(this.state.currentSortMode, this.state.isSortReversed); + this.setSortMode(1); } getSearchBar() { @@ -177,42 +139,6 @@ export default class ProximoListScreen extends React.Component { return color; } - /** - * Set the sort menu icon based on the given mode. - * - * @param mode The string representing the mode - * @param isReverse Whether to use a reversed icon - */ - setupSortIcons(mode: string, isReverse: boolean) { - const downSortIcon = - ; - const upSortIcon = - ; - switch (mode) { - case sortMode.price: - this.setState({sortNameIcon: ''}); - if (isReverse) { - this.setState({sortPriceIcon: upSortIcon}); - } else { - this.setState({sortPriceIcon: downSortIcon}); - } - break; - case sortMode.name: - this.setState({sortPriceIcon: ''}); - if (isReverse) { - this.setState({sortNameIcon: upSortIcon}); - } else { - this.setState({sortNameIcon: downSortIcon}); - } - break; - } - } - - sanitizeString(str: string) { return str.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""); } @@ -241,81 +167,112 @@ export default class ProximoListScreen extends React.Component { }) } - getModalContent() { + getModalItemContent(item: Object) { return ( - {this.state.modalCurrentDisplayItem.name} + {item.name} - {this.state.modalCurrentDisplayItem.quantity + ' ' + i18n.t('proximoScreen.inStock')} + {item.quantity + ' ' + i18n.t('proximoScreen.inStock')} - {this.state.modalCurrentDisplayItem.price}€ + {item.price}€ + source={{uri: item.image}}/> - {this.state.modalCurrentDisplayItem.description} + {item.description} ); } + getModalSortMenu() { + console.log(this.state.currentSortMode); + return ( + + Sort Order + this.setSortMode(value)} + value={this.state.currentSortMode} + > + + {i18n.t('proximoScreen.sortPrice')} + + + + {i18n.t('proximoScreen.sortPriceReverse')} + + + + {i18n.t('proximoScreen.sortName')} + + + + {i18n.t('proximoScreen.sortNameReverse')} + + + + + ); + } + onListItemPress(item: Object) { this.setState({ - modalCurrentDisplayItem: item + modalCurrentDisplayItem: this.getModalItemContent(item) }); if (this.modalRef.current) { this.modalRef.current.open(); } } - onSelectSortModeName() { - this.sortModeSelected(sortMode.name); - } - - onSelectSortModePrice() { - this.sortModeSelected(sortMode.price); - } - onSortMenuPress() { - this.setState({menuVisible: true}); - console.log('pressed'); - } - - onSortMenuDismiss() { - this.setState({menuVisible: false}); + this.setState({ + modalCurrentDisplayItem: this.getModalSortMenu() + }); + if (this.modalRef.current) { + this.modalRef.current.open(); + } } getSortMenu() { return ( - - } - > - - - - + ); } @@ -327,7 +284,8 @@ export default class ProximoListScreen extends React.Component { description={item.quantity + ' ' + i18n.t('proximoScreen.inStock')} descriptionStyle={{color: this.getStockColor(parseInt(item.quantity))}} onPress={onPress} - left={props => } + left={props => } right={props => {item.price}€ @@ -344,10 +302,14 @@ export default class ProximoListScreen extends React.Component { console.log("rendering ProximoListScreen"); return ( - - {this.getModalContent()} + + {this.state.modalCurrentDisplayItem} Date: Sat, 7 Mar 2020 22:52:55 +0100 Subject: [PATCH 13/66] Improved drawer item display and fixed modal position --- components/Sidebar.js | 18 ++++-------------- components/SidebarItem.js | 28 ++++++++++++++++++++++++++++ screens/Proximo/ProximoListScreen.js | 4 +++- 3 files changed, 35 insertions(+), 15 deletions(-) create mode 100644 components/SidebarItem.js diff --git a/components/Sidebar.js b/components/Sidebar.js index b5ed72f..cd9bc18 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -3,11 +3,9 @@ import * as React from 'react'; import {Dimensions, FlatList, Image, Platform, StyleSheet, View} from 'react-native'; import i18n from "i18n-js"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; -import ThemeManager from "../utils/ThemeManager"; import * as WebBrowser from 'expo-web-browser'; import SidebarDivider from "./SidebarDivider"; -import {DrawerItem} from '@react-navigation/drawer'; +import SidebarItem from "./SidebarItem"; const deviceWidth = Dimensions.get("window").width; @@ -147,18 +145,10 @@ export default class SideBar extends React.Component { const onListItemPress = this.onListItemPress.bind(this, item); if (item.icon !== undefined) { return ( - - } + ); } else { diff --git a/components/SidebarItem.js b/components/SidebarItem.js new file mode 100644 index 0000000..3781d29 --- /dev/null +++ b/components/SidebarItem.js @@ -0,0 +1,28 @@ +import * as React from 'react'; +import {withTheme} from 'react-native-paper'; +import {DrawerItem} from "@react-navigation/drawer"; +import {MaterialCommunityIcons} from "@expo/vector-icons"; + +function SidebarItem(props) { + const {colors} = props.theme; + return ( + + } + style={{ + marginLeft: 0, + marginRight: 0, + padding: 0, + borderRadius: 0, + }} + labelStyle={{ + color: colors.text, + }} + /> + ); +} + +export default withTheme(SidebarItem); diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index 22cf447..2c06188 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -301,7 +301,9 @@ export default class ProximoListScreen extends React.Component { render() { console.log("rendering ProximoListScreen"); return ( - + Date: Sun, 8 Mar 2020 00:05:41 +0100 Subject: [PATCH 14/66] Improved proxiwash screen + show help banner on proxiwash and planex --- components/ProxiwashListItem.js | 58 +++++++++++++------ components/WebSectionList.js | 2 +- screens/Proxiwash/ProxiwashScreen.js | 72 +++++++++++++++++++----- screens/Websites/PlanexScreen.js | 84 +++++++++++++++++++++++----- translations/en.json | 6 +- translations/fr.json | 7 ++- utils/AsyncStorageManager.js | 12 +++- utils/ThemeManager.js | 20 +++---- 8 files changed, 197 insertions(+), 64 deletions(-) diff --git a/components/ProxiwashListItem.js b/components/ProxiwashListItem.js index cfb2c39..2accefa 100644 --- a/components/ProxiwashListItem.js +++ b/components/ProxiwashListItem.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import {Divider, List, Text, withTheme} from 'react-native-paper'; +import {Card, Avatar, List, Text, withTheme} from 'react-native-paper'; import {View} from "react-native"; import ProxiwashConstants from "../constants/ProxiwashConstants"; @@ -13,27 +13,48 @@ function ProxiwashListItem(props) { stateColors[ProxiwashConstants.machineStates.ERREUR] = colors.proxiwashErrorColor; const icon = ( props.isWatched ? - : - + : + ); return ( - - + {ProxiwashConstants.machineStates[props.state] === ProxiwashConstants.machineStates["EN COURS"] ? + : null + } + + - - )} /> - - + ); } diff --git a/components/WebSectionList.js b/components/WebSectionList.js index 1f34617..ee305a6 100644 --- a/components/WebSectionList.js +++ b/components/WebSectionList.js @@ -187,7 +187,7 @@ export default class WebSectionList extends React.Component { render() { let dataset = this.props.createDataset(this.state.fetchedData); const isEmpty = dataset[0].data.length === 0; - const shouldRenderHeader = !isEmpty || (this.props.renderSectionHeader !== null); + const shouldRenderHeader = !isEmpty && (this.props.renderSectionHeader !== null); if (isEmpty) dataset = this.createEmptyDataset(); return ( diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js index de461c0..6a834fa 100644 --- a/screens/Proxiwash/ProxiwashScreen.js +++ b/screens/Proxiwash/ProxiwashScreen.js @@ -2,13 +2,12 @@ import * as React from 'react'; import {Alert, Platform, View} from 'react-native'; -import ThemeManager from '../../utils/ThemeManager'; import i18n from "i18n-js"; import WebSectionList from "../../components/WebSectionList"; import NotificationsManager from "../../utils/NotificationsManager"; import AsyncStorageManager from "../../utils/AsyncStorageManager"; import * as Expo from "expo"; -import {Divider, IconButton, List, Text, Title} from 'react-native-paper'; +import {Card, Banner, Avatar} from 'react-native-paper'; import HeaderButton from "../../components/HeaderButton"; import ProxiwashListItem from "../../components/ProxiwashListItem"; import ProxiwashConstants from "../../constants/ProxiwashConstants"; @@ -30,6 +29,7 @@ type State = { firstLoading: boolean, fetchedData: Object, machinesWatched: Array, + bannerVisible: boolean, }; @@ -43,6 +43,7 @@ export default class ProxiwashScreen extends React.Component { getRenderItem: Function; getRenderSectionHeader: Function; createDataset: Function; + onHideBanner: Function; state = { refreshing: false, @@ -50,6 +51,7 @@ export default class ProxiwashScreen extends React.Component { fetchedData: {}, // machinesWatched: JSON.parse(dataString), machinesWatched: [], + bannerVisible: AsyncStorageManager.getInstance().preferences.proxiwashShowBanner.current === '1', }; /** @@ -80,6 +82,15 @@ export default class ProxiwashScreen extends React.Component { this.getRenderItem = this.getRenderItem.bind(this); this.getRenderSectionHeader = this.getRenderSectionHeader.bind(this); this.createDataset = this.createDataset.bind(this); + this.onHideBanner = this.onHideBanner.bind(this); + } + + onHideBanner() { + this.setState({bannerVisible: false}); + AsyncStorageManager.getInstance().savePref( + AsyncStorageManager.getInstance().preferences.proxiwashShowBanner.key, + '0' + ); } /** @@ -280,24 +291,57 @@ export default class ProxiwashScreen extends React.Component { render() { const nav = this.props.navigation; return ( - + + } + > + {i18n.t('proxiwashScreen.enableNotificationsTip')} + + + + ); } getRenderSectionHeader({section}: Object) { return ( - - {section.title} - + + ); } diff --git a/screens/Websites/PlanexScreen.js b/screens/Websites/PlanexScreen.js index ccfd8f3..2228659 100644 --- a/screens/Websites/PlanexScreen.js +++ b/screens/Websites/PlanexScreen.js @@ -3,11 +3,19 @@ import * as React from 'react'; import ThemeManager from "../../utils/ThemeManager"; import WebViewScreen from "../../components/WebViewScreen"; +import {Avatar, Banner} from "react-native-paper"; +import i18n from "i18n-js"; +import {View} from "react-native"; +import AsyncStorageManager from "../../utils/AsyncStorageManager"; type Props = { navigation: Object, } +type State = { + bannerVisible: boolean, +} + const PLANEX_URL = 'http://planex.insa-toulouse.fr/'; @@ -75,9 +83,11 @@ const OBSERVE_MUTATIONS_INJECTED = * Class defining the app's planex screen. * This screen uses a webview to render the planex page */ -export default class PlanexScreen extends React.Component { +export default class PlanexScreen extends React.Component { customInjectedJS: string; + onHideBanner: Function; + onGoToSettings: Function; constructor() { super(); @@ -93,26 +103,70 @@ export default class PlanexScreen extends React.Component { this.customInjectedJS += 'removeAlpha();' + '});true;'; // Prevent crash on ios + this.onHideBanner = this.onHideBanner.bind(this); + this.onGoToSettings = this.onGoToSettings.bind(this); + } + state = { + bannerVisible: + AsyncStorageManager.getInstance().preferences.planexShowBanner.current === '1' && + AsyncStorageManager.getInstance().preferences.defaultStartScreen.current !== 'Planex', + }; + + onHideBanner() { + this.setState({bannerVisible: false}); + AsyncStorageManager.getInstance().savePref( + AsyncStorageManager.getInstance().preferences.planexShowBanner.key, + '0' + ); + } + + onGoToSettings() { + this.onHideBanner(); + this.props.navigation.navigate('SettingsScreen'); } render() { const nav = this.props.navigation; return ( - + + } + > + {i18n.t('planexScreen.enableStartScreen')} + + + ); } } diff --git a/translations/en.json b/translations/en.json index 6924f8c..64ed254 100644 --- a/translations/en.json +++ b/translations/en.json @@ -160,6 +160,7 @@ "dryerTips": "The advised dryer length is 35 minutes for 14 kg of laundry. You can choose a shorter length if the dryer is not fully charged.", "procedure": "Procedure", "tips": "Tips", + "enableNotificationsTip": "Click on a running machine to enable notifications", "modal": { "enableNotifications": "Notify me", "disableNotifications": "Stop notifications", @@ -188,8 +189,9 @@ } }, "planexScreen": { - "rotateToLandscape": "Turn your screen to see the whole week", - "rotateToPortrait": "Turn your screen to see only 2 days" + "enableStartScreen": "Come here often? Set it as default screen!", + "enableStartOK": "Yes please!", + "enableStartCancel": "Later" }, "availableRoomScreen": { "normalRoom": "Work", diff --git a/translations/fr.json b/translations/fr.json index 92c880c..aa5e7ea 100644 --- a/translations/fr.json +++ b/translations/fr.json @@ -160,7 +160,7 @@ "dryerTips": "La durée conseillée est de 35 minutes pour 14kg de linge. Vous pouvez choisir une durée plus courte si le sèche-linge n'est pas chargé.", "procedure": "Procédure", "tips": "Conseils", - + "enableNotificationsTip": "Cliquez sur une machine en cours pour activer les notifications", "modal": { "enableNotifications": "Me Notifier", "disableNotifications": "Désactiver les notifications", @@ -190,8 +190,9 @@ } }, "planexScreen": { - "rotateToLandscape": "Tournez votre téléphone pour voir la semaine entière", - "rotateToPortrait": "Tournez votre téléphone pour voir seulement 2 jours" + "enableStartScreen": "Vous venez souvent ici ? Démarrez l'appli sur cette page!", + "enableStartOK": "Oui svp!", + "enableStartCancel": "Plus tard" }, "availableRoomScreen": { "normalRoom": "Travail", diff --git a/utils/AsyncStorageManager.js b/utils/AsyncStorageManager.js index 8a009dc..80d50e3 100644 --- a/utils/AsyncStorageManager.js +++ b/utils/AsyncStorageManager.js @@ -63,7 +63,17 @@ export default class AsyncStorageManager { key: 'defaultStartScreen', default: 'Home', current: '', - } + }, + proxiwashShowBanner: { + key: 'proxiwashShowBanner', + default: '1', + current: '', + }, + planexShowBanner: { + key: 'planexShowBanner', + default: '1', + current: '', + }, }; /** diff --git a/utils/ThemeManager.js b/utils/ThemeManager.js index 134e7f6..72105b9 100644 --- a/utils/ThemeManager.js +++ b/utils/ThemeManager.js @@ -35,12 +35,12 @@ export default class ThemeManager { agendaDayTextColor: '#636363', // PROXIWASH - proxiwashFinishedColor: "rgba(54,165,22,0.31)", + proxiwashFinishedColor: "#a5dc9d", proxiwashReadyColor: "transparent", - proxiwashRunningColor: "rgba(94,104,241,0.3)", - proxiwashRunningBgColor: "rgba(99,109,255,0.14)", - proxiwashBrokenColor: "rgba(162,162,162,0.31)", - proxiwashErrorColor: "rgba(204,7,0,0.31)", + proxiwashRunningColor: "#a0ceff", + proxiwashRunningBgColor: "#c7e3ff", + proxiwashBrokenColor: "#8e8e8e", + proxiwashErrorColor: "rgba(204,7,0,0.31)#e35f57", // Screens planningColor: '#d9b10a', @@ -72,12 +72,12 @@ export default class ThemeManager { agendaDayTextColor: '#6d6d6d', // PROXIWASH - proxiwashFinishedColor: "rgba(17,149,32,0.53)", + proxiwashFinishedColor: "#31682c", proxiwashReadyColor: "transparent", - proxiwashRunningColor: "rgba(29,59,175,0.65)", - proxiwashRunningBgColor: "rgba(99,109,255,0.14)", - proxiwashBrokenColor: "#000000", - proxiwashErrorColor: "rgba(213,8,0,0.57)", + proxiwashRunningColor: "#213c79", + proxiwashRunningBgColor: "#1a2033", + proxiwashBrokenColor: "#656565", + proxiwashErrorColor: "#7e2e2f", // Screens planningColor: '#d99e09', From 198fca639ee27b33bdec8de57206e2724f95bb37 Mon Sep 17 00:00:00 2001 From: keplyx Date: Sun, 8 Mar 2020 00:20:26 +0100 Subject: [PATCH 15/66] Improved roxiwash section headers --- screens/Proxiwash/ProxiwashScreen.js | 24 +++++++++++++++++++++--- translations/en.json | 1 + translations/fr.json | 1 + 3 files changed, 23 insertions(+), 3 deletions(-) diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js index 6a834fa..e96984f 100644 --- a/screens/Proxiwash/ProxiwashScreen.js +++ b/screens/Proxiwash/ProxiwashScreen.js @@ -27,7 +27,6 @@ type Props = { type State = { refreshing: boolean, firstLoading: boolean, - fetchedData: Object, machinesWatched: Array, bannerVisible: boolean, }; @@ -45,6 +44,8 @@ export default class ProxiwashScreen extends React.Component { createDataset: Function; onHideBanner: Function; + fetchedData: Object; + state = { refreshing: false, firstLoading: true, @@ -218,6 +219,7 @@ export default class ProxiwashScreen extends React.Component { } createDataset(fetchedData: Object) { + this.fetchedData = fetchedData; return [ { title: i18n.t('proxiwashScreen.dryers'), @@ -319,18 +321,34 @@ export default class ProxiwashScreen extends React.Component { ); } + getMachineAvailableNumber(isDryer: boolean) { + let data; + if (isDryer) + data = this.fetchedData.dryers; + else + data = this.fetchedData.washers; + let count = 0; + for (let i = 0; i < data.length; i++) { + if (ProxiwashConstants.machineStates[data[i].state] === ProxiwashConstants.machineStates["DISPONIBLE"]) + count += 1; + } + return count; + } + getRenderSectionHeader({section}: Object) { + const subtitle = this.getMachineAvailableNumber(section.title === i18n.t('proxiwashScreen.dryers')) + ' ' + i18n.t('proxiwashScreen.numAvailable'); return ( Date: Sun, 8 Mar 2020 00:22:46 +0100 Subject: [PATCH 16/66] Improved RU menu section headers --- screens/SelfMenuScreen.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/screens/SelfMenuScreen.js b/screens/SelfMenuScreen.js index 4e15f8b..690a1cd 100644 --- a/screens/SelfMenuScreen.js +++ b/screens/SelfMenuScreen.js @@ -95,7 +95,27 @@ export default class SelfMenuScreen extends React.Component { getRenderSectionHeader({section}: Object) { return ( - {section.title} + + + ); } From 60a8fedb48851165878976869347a3f93c4edd1f Mon Sep 17 00:00:00 2001 From: keplyx Date: Sun, 8 Mar 2020 00:33:08 +0100 Subject: [PATCH 17/66] Removed console.log and changed tab colors --- App.js | 1 - components/Sidebar.js | 2 -- navigation/MainTabNavigator.js | 11 +++++++---- screens/About/AboutScreen.js | 1 - screens/Proximo/ProximoListScreen.js | 2 -- 5 files changed, 7 insertions(+), 10 deletions(-) diff --git a/App.js b/App.js index 58bcf0d..c491d35 100644 --- a/App.js +++ b/App.js @@ -107,7 +107,6 @@ export default class App extends React.Component { * Renders the app based on loading state */ render() { - console.log("render"); if (this.state.isLoading) { return null; } else if (this.state.showIntro || this.state.showUpdate) { diff --git a/components/Sidebar.js b/components/Sidebar.js index cd9bc18..8cf54bd 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -141,7 +141,6 @@ export default class SideBar extends React.Component { getRenderItem({item}: Object) { - console.log("rendering SideBar Item"); const onListItemPress = this.onListItemPress.bind(this, item); if (item.icon !== undefined) { return ( @@ -160,7 +159,6 @@ export default class SideBar extends React.Component { } render() { - console.log("rendering SideBar"); return ( diff --git a/navigation/MainTabNavigator.js b/navigation/MainTabNavigator.js index 79f5306..c977c93 100644 --- a/navigation/MainTabNavigator.js +++ b/navigation/MainTabNavigator.js @@ -12,9 +12,9 @@ import ProximoListScreen from "../screens/Proximo/ProximoListScreen"; import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen"; import PlanexScreen from '../screens/Websites/PlanexScreen'; import {MaterialCommunityIcons} from "@expo/vector-icons"; -import ThemeManager from "../utils/ThemeManager"; import AsyncStorageManager from "../utils/AsyncStorageManager"; import HeaderButton from "../components/HeaderButton"; +import {withTheme} from 'react-native-paper'; const TAB_ICONS = { Home: 'triangle', @@ -197,16 +197,17 @@ function PlanexStackComponent() { const Tab = createMaterialBottomTabNavigator(); -export default function TabNavigator() { +function TabNavigator(props) { + const {colors} = props.theme; return ( ({ tabBarIcon: ({focused, color, size}) => { let icon = TAB_ICONS[route.name]; // tintColor is ignoring activeColor and inactiveColor for some reason - color = focused ? "#f0edf6" : "#4e1108"; + color = focused ? colors.text : colors.textDisabled; return ; }, })} @@ -234,3 +235,5 @@ export default function TabNavigator() { ); } + +export default withTheme(TabNavigator); diff --git a/screens/About/AboutScreen.js b/screens/About/AboutScreen.js index 165e1d6..e17263f 100644 --- a/screens/About/AboutScreen.js +++ b/screens/About/AboutScreen.js @@ -266,7 +266,6 @@ export default class AboutScreen extends React.Component { */ getCardItem({item}: Object) { let shouldShow = !item.showOnlyInDebug || (item.showOnlyInDebug && this.state.isDebugUnlocked); - console.log(item.text); if (shouldShow) { if (item.showChevron) { return ( diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index 2c06188..8f520d7 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -199,7 +199,6 @@ export default class ProximoListScreen extends React.Component { } getModalSortMenu() { - console.log(this.state.currentSortMode); return ( { } render() { - console.log("rendering ProximoListScreen"); return ( Date: Sun, 8 Mar 2020 10:37:01 +0100 Subject: [PATCH 18/66] Changed tab icons --- navigation/MainTabNavigator.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/navigation/MainTabNavigator.js b/navigation/MainTabNavigator.js index c977c93..468f12b 100644 --- a/navigation/MainTabNavigator.js +++ b/navigation/MainTabNavigator.js @@ -19,9 +19,9 @@ import {withTheme} from 'react-native-paper'; const TAB_ICONS = { Home: 'triangle', Planning: 'calendar-range', - Proxiwash: 'washing-machine', - Proximo: 'shopping', - Planex: 'timetable', + Proxiwash: 'tshirt-crew', + Proximo: 'cart', + Planex: 'clock', }; const defaultScreenOptions = { @@ -207,8 +207,8 @@ function TabNavigator(props) { tabBarIcon: ({focused, color, size}) => { let icon = TAB_ICONS[route.name]; // tintColor is ignoring activeColor and inactiveColor for some reason - color = focused ? colors.text : colors.textDisabled; - return ; + icon = focused ? icon : icon + ('-outline'); + return ; }, })} > From 1a15ff4589b3ab2b1049622194d9f730fe3616aa Mon Sep 17 00:00:00 2001 From: Yohan Simard Date: Sun, 8 Mar 2020 11:17:47 +0100 Subject: [PATCH 19/66] Grayed out tab icons when unfocused --- navigation/MainTabNavigator.js | 3 ++- utils/ThemeManager.js | 5 +++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/navigation/MainTabNavigator.js b/navigation/MainTabNavigator.js index 468f12b..a3705e1 100644 --- a/navigation/MainTabNavigator.js +++ b/navigation/MainTabNavigator.js @@ -208,7 +208,8 @@ function TabNavigator(props) { let icon = TAB_ICONS[route.name]; // tintColor is ignoring activeColor and inactiveColor for some reason icon = focused ? icon : icon + ('-outline'); - return ; + let iconColor = focused ? colors.tabIconFocused : colors.tabIcon; + return ; }, })} > diff --git a/utils/ThemeManager.js b/utils/ThemeManager.js index 72105b9..1c2a754 100644 --- a/utils/ThemeManager.js +++ b/utils/ThemeManager.js @@ -22,6 +22,8 @@ export default class ThemeManager { ...DefaultTheme.colors, primary: '#be1522', accent: '#be1522', + tabIcon: "#929292", + tabIconFocused: "#000000", card: "rgb(255, 255, 255)", dividerBackground: '#e2e2e2', textDisabled: '#c1c1c1', @@ -59,6 +61,9 @@ export default class ThemeManager { ...DarkTheme.colors, primary: '#be1522', accent: '#be1522', + tabBackground: "#181818", + tabIcon: "#6d6d6d", + tabIconFocused: "#ffffff", card: "rgb(18, 18, 18)", dividerBackground: '#222222', textDisabled: '#5b5b5b', From 798617d8810d10335be11374e1d99741f29a84e4 Mon Sep 17 00:00:00 2001 From: keplyx Date: Sun, 8 Mar 2020 11:27:05 +0100 Subject: [PATCH 20/66] Fixed watchlist fetch + use modal instead of alert --- components/FeedItem.js | 2 +- screens/About/AboutScreen.js | 13 ++-- screens/Proxiwash/ProxiwashScreen.js | 96 +++++++++++++++++++++------- utils/NotificationsManager.js | 5 +- 4 files changed, 87 insertions(+), 29 deletions(-) diff --git a/components/FeedItem.js b/components/FeedItem.js index d77b101..a7de279 100644 --- a/components/FeedItem.js +++ b/components/FeedItem.js @@ -9,7 +9,7 @@ const ICON_AMICALE = require('../assets/amicale.png'); function FeedItem(props) { const {colors} = props.theme; return ( - + { return ( } - right={props => } + left={props => } + right={props => } onPress={item.onPressCallback} /> ); @@ -280,7 +280,7 @@ export default class AboutScreen extends React.Component { return ( } + left={props => } onPress={item.onPressCallback} /> ); @@ -311,7 +311,10 @@ export default class AboutScreen extends React.Component { return ( + handlePosition={'inside'} + modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().surface}} + handleStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().text}} + > , bannerVisible: boolean, }; @@ -38,6 +41,8 @@ type State = { */ export default class ProxiwashScreen extends React.Component { + modalRef: { current: null | Modalize }; + onAboutPress: Function; getRenderItem: Function; getRenderSectionHeader: Function; @@ -52,6 +57,7 @@ export default class ProxiwashScreen extends React.Component { fetchedData: {}, // machinesWatched: JSON.parse(dataString), machinesWatched: [], + modalCurrentDisplayItem: null, bannerVisible: AsyncStorageManager.getInstance().preferences.proxiwashShowBanner.current === '1', }; @@ -60,6 +66,7 @@ export default class ProxiwashScreen extends React.Component { */ constructor() { super(); + this.modalRef = React.createRef(); stateStrings[ProxiwashConstants.machineStates.TERMINE] = i18n.t('proxiwashScreen.states.finished'); stateStrings[ProxiwashConstants.machineStates.DISPONIBLE] = i18n.t('proxiwashScreen.states.ready'); stateStrings[ProxiwashConstants.machineStates["EN COURS"]] = i18n.t('proxiwashScreen.states.running'); @@ -238,29 +245,40 @@ export default class ProxiwashScreen extends React.Component { ]; } - /** - * Show an alert fo a machine, allowing to enable/disable notifications if running - * - * @param title - * @param item - * @param isDryer - */ - showAlert(title: string, item: Object, isDryer: boolean) { - let buttons = [{text: i18n.t("proxiwashScreen.modal.ok")}]; + showModal(title: string, item: Object, isDryer: boolean) { + this.setState({ + modalCurrentDisplayItem: this.getModalContent(title, item, isDryer) + }); + if (this.modalRef.current) { + this.modalRef.current.open(); + } + } + + onSetupNotificationsPress(machineId: string) { + if (this.modalRef.current) { + this.modalRef.current.close(); + } + this.setupNotifications(machineId) + } + + getModalContent(title: string, item: Object, isDryer: boolean) { + let button = { + text: i18n.t("proxiwashScreen.modal.ok"), + icon: '', + onPress: undefined + }; let message = modalStateStrings[ProxiwashConstants.machineStates[item.state]]; - const onPress = this.setupNotifications.bind(this, item.number); + const onPress = this.onSetupNotificationsPress.bind(this, item.number); if (ProxiwashConstants.machineStates[item.state] === ProxiwashConstants.machineStates["EN COURS"]) { - buttons = [ + button = { text: this.isMachineWatched(item.number) ? i18n.t("proxiwashScreen.modal.disableNotifications") : i18n.t("proxiwashScreen.modal.enableNotifications"), + icon: '', onPress: onPress - }, - { - text: i18n.t("proxiwashScreen.modal.cancel") } - ]; + ; message = i18n.t('proxiwashScreen.modal.running', { start: item.startTime, @@ -273,13 +291,39 @@ export default class ProxiwashScreen extends React.Component { else message += '\n' + i18n.t('proxiwashScreen.washersTariff'); } - Alert.alert( - title, - message, - buttons + return ( + + } + + /> + + {message} + + + {button.onPress !== undefined ? + + + : null} + ); } + onAboutPress() { this.props.navigation.navigate('ProxiwashAboutScreen'); } @@ -305,10 +349,18 @@ export default class ProxiwashScreen extends React.Component { icon={() => } + />} > {i18n.t('proxiwashScreen.enableNotificationsTip')} + + {this.state.modalCurrentDisplayItem} + { const isMachineRunning = ProxiwashConstants.machineStates[item.state] === ProxiwashConstants.machineStates["EN COURS"]; const machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')) + ' n°' + item.number; const isDryer = section.title === i18n.t('proxiwashScreen.dryers'); - const onPress = this.showAlert.bind(this, machineName, item, isDryer); + const onPress = this.showModal.bind(this, machineName, item, isDryer); let width = item.donePercent !== '' ? (parseInt(item.donePercent)).toString() + '%' : 0; if (ProxiwashConstants.machineStates[item.state] === '0') width = '100%'; diff --git a/utils/NotificationsManager.js b/utils/NotificationsManager.js index c424429..da83e20 100644 --- a/utils/NotificationsManager.js +++ b/utils/NotificationsManager.js @@ -123,7 +123,10 @@ export default class NotificationsManager { 'Content-Type': 'application/json', }), body: JSON.stringify(data) // <-- Post parameters - }); + }).then((response) => response.json()) + .then((responseJson) => { + callback(responseJson); + }); } } From 2e579368a809a2f01b39e0315c1f3cc949b3468a Mon Sep 17 00:00:00 2001 From: keplyx Date: Sun, 8 Mar 2020 11:35:11 +0100 Subject: [PATCH 21/66] Changed tab focused icon color --- navigation/MainTabNavigator.js | 5 +++-- utils/ThemeManager.js | 2 -- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/navigation/MainTabNavigator.js b/navigation/MainTabNavigator.js index a3705e1..ea4caaf 100644 --- a/navigation/MainTabNavigator.js +++ b/navigation/MainTabNavigator.js @@ -208,10 +208,11 @@ function TabNavigator(props) { let icon = TAB_ICONS[route.name]; // tintColor is ignoring activeColor and inactiveColor for some reason icon = focused ? icon : icon + ('-outline'); - let iconColor = focused ? colors.tabIconFocused : colors.tabIcon; - return ; + return ; }, })} + activeColor={colors.primary} + inactiveColor={colors.tabIcon} > Date: Sun, 8 Mar 2020 12:05:22 +0100 Subject: [PATCH 22/66] Improved planning display --- screens/PlanningDisplayScreen.js | 30 ++++++++++++++---------------- screens/PlanningScreen.js | 19 +++++++++++-------- 2 files changed, 25 insertions(+), 24 deletions(-) diff --git a/screens/PlanningDisplayScreen.js b/screens/PlanningDisplayScreen.js index 530326c..ffb96e5 100644 --- a/screens/PlanningDisplayScreen.js +++ b/screens/PlanningDisplayScreen.js @@ -6,7 +6,7 @@ import ThemeManager from "../utils/ThemeManager"; import HTML from "react-native-render-html"; import {Linking} from "expo"; import PlanningEventManager from '../utils/PlanningEventManager'; -import {Subheading, Title} from 'react-native-paper'; +import {Card} from 'react-native-paper'; type Props = { navigation: Object, @@ -28,14 +28,12 @@ export default class PlanningDisplayScreen extends React.Component { // console.log("rendering planningDisplayScreen"); return ( - - {this.displayData.title} - - - {PlanningEventManager.getFormattedTime(this.displayData)} - + {this.displayData.logo !== null ? - + @@ -43,14 +41,14 @@ export default class PlanningDisplayScreen extends React.Component { {this.displayData.description !== null ? // Surround description with div to allow text styling if the description is not html - " + this.displayData.description + ""} - tagsStyles={{ - p: { - color: ThemeManager.getCurrentThemeVariables().text, - }, - div: {color: ThemeManager.getCurrentThemeVariables().text} - }} - onLinkPress={openWebLink}/> + + " + this.displayData.description + ""} + tagsStyles={{ + p: {color: ThemeManager.getCurrentThemeVariables().text,}, + div: {color: ThemeManager.getCurrentThemeVariables().text} + }} + onLinkPress={openWebLink}/> + : } ); diff --git a/screens/PlanningScreen.js b/screens/PlanningScreen.js index 6281ff9..c61b97a 100644 --- a/screens/PlanningScreen.js +++ b/screens/PlanningScreen.js @@ -1,13 +1,12 @@ // @flow import * as React from 'react'; -import {BackHandler, Image, View} from 'react-native'; +import {BackHandler, View} from 'react-native'; import i18n from "i18n-js"; -import ThemeManager from "../utils/ThemeManager"; import {LocaleConfig} from 'react-native-calendars'; import WebDataManager from "../utils/WebDataManager"; import PlanningEventManager from '../utils/PlanningEventManager'; -import {Text, Title, List, Avatar, Divider} from 'react-native-paper'; +import {Avatar, Divider, List} from 'react-native-paper'; import CustomAgenda from "../components/CustomAgenda"; LocaleConfig.locales['fr'] = { @@ -31,7 +30,7 @@ type State = { const FETCH_URL = "https://amicale-insat.fr/event/json/list"; -const AGENDA_MONTH_SPAN = 6; +const AGENDA_MONTH_SPAN = 3; /** * Class defining the app's planning screen @@ -138,7 +137,10 @@ export default class PlanningScreen extends React.Component { } + left={props => } onPress={onPress} /> @@ -164,9 +166,10 @@ export default class PlanningScreen extends React.Component { } rowHasChanged(r1: Object, r2: Object) { - if (r1 !== undefined && r2 !== undefined) - return r1.title !== r2.title; - else return !(r1 === undefined && r2 === undefined); + return false; + // if (r1 !== undefined && r2 !== undefined) + // return r1.title !== r2.title; + // else return !(r1 === undefined && r2 === undefined); } /** From b625ac72552a61522c5cb4de1ddfdbee5090edab Mon Sep 17 00:00:00 2001 From: keplyx Date: Sun, 8 Mar 2020 12:17:04 +0100 Subject: [PATCH 23/66] Updated translations --- components/Sidebar.js | 4 ++-- navigation/DrawerNavigator.js | 15 ++++++++------- translations/en.json | 1 + translations/fr.json | 1 + 4 files changed, 12 insertions(+), 9 deletions(-) diff --git a/components/Sidebar.js b/components/Sidebar.js index 8cf54bd..d6805c8 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -41,7 +41,7 @@ export default class SideBar extends React.Component { // Dataset used to render the drawer this.dataSet = [ { - name: "Home", + name: i18n.t('screens.home'), route: "Main", icon: "home", }, @@ -60,7 +60,7 @@ export default class SideBar extends React.Component { icon: "calendar-check", }, { - name: 'Bib', + name: i18n.t('screens.bib'), route: "BibScreen", icon: "book", }, diff --git a/navigation/DrawerNavigator.js b/navigation/DrawerNavigator.js index 2d7c698..3b7a56b 100644 --- a/navigation/DrawerNavigator.js +++ b/navigation/DrawerNavigator.js @@ -13,6 +13,7 @@ import DebugScreen from '../screens/DebugScreen'; import Sidebar from "../components/Sidebar"; import {createStackNavigator, TransitionPresets} from "@react-navigation/stack"; import HeaderButton from "../components/HeaderButton"; +import i18n from "i18n-js"; const defaultScreenOptions = { gestureEnabled: true, @@ -41,7 +42,7 @@ function AboutStackComponent() { options={({navigation}) => { const openDrawer = getDrawerButton.bind(this, navigation); return { - title: 'About', + title: i18n.t('screens.about'), headerLeft: openDrawer }; }} @@ -50,14 +51,14 @@ function AboutStackComponent() { name="AboutDependenciesScreen" component={AboutDependenciesScreen} options={{ - title: 'Dependencies' + title: i18n.t('aboutScreen.libs') }} /> @@ -79,7 +80,7 @@ function SettingsStackComponent() { options={({navigation}) => { const openDrawer = getDrawerButton.bind(this, navigation); return { - title: 'Settings', + title: i18n.t('screens.settings'), headerLeft: openDrawer }; }} @@ -103,7 +104,7 @@ function SelfMenuStackComponent() { options={({navigation}) => { const openDrawer = getDrawerButton.bind(this, navigation); return { - title: 'Menu RU', + title: i18n.t('screens.menuSelf'), headerLeft: openDrawer }; }} @@ -127,7 +128,7 @@ function AvailableRoomStackComponent() { options={({navigation}) => { const openDrawer = getDrawerButton.bind(this, navigation); return { - title: 'Available Rooms', + title: i18n.t('screens.availableRooms'), headerLeft: openDrawer }; }} @@ -151,7 +152,7 @@ function BibStackComponent() { options={({navigation}) => { const openDrawer = getDrawerButton.bind(this, navigation); return { - title: 'Bib', + title: i18n.t('screens.bib'), headerLeft: openDrawer }; }} diff --git a/translations/en.json b/translations/en.json index 24ab416..19eb9e0 100644 --- a/translations/en.json +++ b/translations/en.json @@ -8,6 +8,7 @@ "menuSelf": "RU Menu", "settings": "Settings", "availableRooms": "Available rooms", + "bib": "Bib'Box", "bluemind": "INSA Mails", "ent": "INSA ENT", "about": "About", diff --git a/translations/fr.json b/translations/fr.json index bc2771c..7da6def 100644 --- a/translations/fr.json +++ b/translations/fr.json @@ -8,6 +8,7 @@ "menuSelf": "Menu du RU", "settings": "Paramètres", "availableRooms": "Salles dispo", + "bib": "Bib'Box", "bluemind": "Mails INSA", "ent": "ENT INSA", "about": "À Propos", From 9e90c9d8f31f25792abdfd4e00ad37f182c3c971 Mon Sep 17 00:00:00 2001 From: keplyx Date: Sun, 8 Mar 2020 12:50:18 +0100 Subject: [PATCH 24/66] Added basic april fools functionality --- screens/PlanningScreen.js | 3 ++ screens/SelfMenuScreen.js | 29 +++++++++++--------- utils/AprilFoolsManager.js | 56 ++++++++++++++++++++++++++++++++++++++ utils/ThemeManager.js | 31 ++++++++++++++++++++- 4 files changed, 105 insertions(+), 14 deletions(-) create mode 100644 utils/AprilFoolsManager.js diff --git a/screens/PlanningScreen.js b/screens/PlanningScreen.js index c61b97a..9efb51e 100644 --- a/screens/PlanningScreen.js +++ b/screens/PlanningScreen.js @@ -8,6 +8,7 @@ import WebDataManager from "../utils/WebDataManager"; import PlanningEventManager from '../utils/PlanningEventManager'; import {Avatar, Divider, List} from 'react-native-paper'; import CustomAgenda from "../components/CustomAgenda"; +import AprilFoolsManager from "../utils/AprilFoolsManager"; LocaleConfig.locales['fr'] = { monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], @@ -209,6 +210,8 @@ export default class PlanningScreen extends React.Component { this.pushEventInOrder(agendaItems, eventList[i], PlanningEventManager.getEventStartDate(eventList[i])); } } + if (AprilFoolsManager.getInstance().isAprilFoolsEnabled()) + agendaItems["2020-04-01"].push(AprilFoolsManager.getFakeEvent()); this.setState({agendaItems: agendaItems}) } diff --git a/screens/SelfMenuScreen.js b/screens/SelfMenuScreen.js index 690a1cd..478803c 100644 --- a/screens/SelfMenuScreen.js +++ b/screens/SelfMenuScreen.js @@ -5,7 +5,8 @@ import {View} from 'react-native'; import ThemeManager from "../utils/ThemeManager"; import i18n from "i18n-js"; import WebSectionList from "../components/WebSectionList"; -import {Card, Text, Title} from 'react-native-paper'; +import {Card, Text} from 'react-native-paper'; +import AprilFoolsManager from "../utils/AprilFoolsManager"; const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json"; @@ -72,6 +73,8 @@ export default class SelfMenuScreen extends React.Component { } ]; } + if (AprilFoolsManager.getInstance().isAprilFoolsEnabled() && fetchedData.length > 0) + fetchedData[0].meal[0].foodcategory = AprilFoolsManager.getFakeMenuItem(fetchedData[0].meal[0].foodcategory); // fetched data is an array here for (let i = 0; i < fetchedData.length; i++) { result.push( @@ -125,18 +128,18 @@ export default class SelfMenuScreen extends React.Component { flex: 0, margin: 10, }}> - - + + {item.dishes.map((object) => diff --git a/utils/AprilFoolsManager.js b/utils/AprilFoolsManager.js new file mode 100644 index 0000000..058738f --- /dev/null +++ b/utils/AprilFoolsManager.js @@ -0,0 +1,56 @@ +// @flow + +/** + * Singleton class used to manage themes + */ +export default class AprilFoolsManager { + + static instance: AprilFoolsManager | null = null; + + aprilFoolsEnabled: boolean; + + constructor() { + let today = new Date(); + this.aprilFoolsEnabled = (today.getDate() === 1 && today.getMonth() === 3); + } + + /** + * Get this class instance or create one if none is found + * @returns {ThemeManager} + */ + static getInstance(): AprilFoolsManager { + return AprilFoolsManager.instance === null ? + AprilFoolsManager.instance = new AprilFoolsManager() : + AprilFoolsManager.instance; + } + + static getFakeEvent() { + return { + category_id: 1, + club: "Coucou", + date_begin: "2020-04-01 20:30:00", + date_end: "2020-04-01 23:59:00", + description: "Trop génial", + id: "-1", + logo: null, + title: "Super event trop whoaou", + url: null + }; + } + + static getFakeMenuItem(menu: Object) { + if (menu[1]["dishes"].length >= 3) { + menu[1]["dishes"].splice(0, 0, {name: "Truc à la con"}); + menu[1]["dishes"].splice(2, 0, {name: "Autre truc à la con"}); + } else { + menu[1]["dishes"].push({name: "Truc à la con"}); + menu[1]["dishes"].push({name: "Autre truc à la con"}); + } + return menu; + } + + isAprilFoolsEnabled() { + return this.aprilFoolsEnabled; + } + +}; diff --git a/utils/ThemeManager.js b/utils/ThemeManager.js index f7e22b5..024e8c4 100644 --- a/utils/ThemeManager.js +++ b/utils/ThemeManager.js @@ -1,8 +1,9 @@ // @flow import AsyncStorageManager from "./AsyncStorageManager"; -// import {DarkTheme as NavDarkTheme, DefaultTheme as NavDefaultTheme} from '@react-navigation/native'; import {DarkTheme, DefaultTheme} from 'react-native-paper'; +import AprilFoolsManager from "./AprilFoolsManager"; + /** * Singleton class used to manage themes */ @@ -92,6 +93,27 @@ export default class ThemeManager { }; } + static getAprilFoolsTheme() { + return { + ...ThemeManager.getBaseTheme(), + colors: { + ...ThemeManager.getBaseTheme().colors, + primary: '#bebe03', + accent: '#bebe03', + background: '#5b3e02', + tabBackground: "#5b3e02", + card: "#5b3e02", + surface: "#5b3e02", + dividerBackground: '#362201', + textDisabled: '#b9b9b9', + + // Calendar/Agenda + agendaBackgroundColor: '#5b3e02', + agendaDayTextColor: '#6d6d6d', + }, + }; + } + /** * Get this class instance or create one if none is found * @returns {ThemeManager} @@ -114,6 +136,13 @@ export default class ThemeManager { * @returns {Object} */ static getCurrentTheme(): Object { + if (AprilFoolsManager.getInstance().isAprilFoolsEnabled()) + return ThemeManager.getAprilFoolsTheme(); + else + ThemeManager.getBaseTheme() + } + + static getBaseTheme() { if (ThemeManager.getNightMode()) return ThemeManager.getDarkTheme(); else From 3c767aea658b3052290b2f544f57e89566a8e1fe Mon Sep 17 00:00:00 2001 From: Yohan Simard Date: Sun, 8 Mar 2020 13:01:12 +0100 Subject: [PATCH 25/66] Fixed translation --- navigation/MainTabNavigator.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/navigation/MainTabNavigator.js b/navigation/MainTabNavigator.js index ea4caaf..89bdc16 100644 --- a/navigation/MainTabNavigator.js +++ b/navigation/MainTabNavigator.js @@ -15,6 +15,8 @@ import {MaterialCommunityIcons} from "@expo/vector-icons"; import AsyncStorageManager from "../utils/AsyncStorageManager"; import HeaderButton from "../components/HeaderButton"; import {withTheme} from 'react-native-paper'; +import i18n from "i18n-js"; + const TAB_ICONS = { Home: 'triangle', @@ -154,7 +156,7 @@ function HomeStackComponent() { options={({navigation}) => { const openDrawer = getDrawerButton.bind(this, navigation); return { - title: 'Home', + title: i18n.t('screens.home'), headerLeft: openDrawer }; }} @@ -225,6 +227,7 @@ function TabNavigator(props) { Date: Sun, 8 Mar 2020 13:21:14 +0100 Subject: [PATCH 26/66] Show intro slider on first start for april fools --- App.js | 17 +++++++++++++---- components/CustomIntroSlider.js | 22 +++++++++++++++++++--- translations/en.json | 4 ++++ translations/fr.json | 4 ++++ utils/AsyncStorageManager.js | 5 +++++ 5 files changed, 45 insertions(+), 7 deletions(-) diff --git a/App.js b/App.js index c491d35..0e2e740 100644 --- a/App.js +++ b/App.js @@ -12,6 +12,7 @@ import {createStackNavigator} from '@react-navigation/stack'; import DrawerNavigator from './navigation/DrawerNavigator'; import NotificationsManager from "./utils/NotificationsManager"; import {Provider as PaperProvider} from 'react-native-paper'; +import AprilFoolsManager from "./utils/AprilFoolsManager"; type Props = {}; @@ -19,6 +20,7 @@ type State = { isLoading: boolean, showIntro: boolean, showUpdate: boolean, + showAprilFools: boolean, currentTheme: ?Object, }; @@ -30,6 +32,7 @@ export default class App extends React.Component { isLoading: true, showIntro: true, showUpdate: true, + showAprilFools: false, currentTheme: null, }; @@ -68,9 +71,11 @@ export default class App extends React.Component { this.setState({ showIntro: false, showUpdate: false, + showAprilFools: false, }); AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.showIntro.key, '0'); AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.showUpdate5.key, '0'); + AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.showAprilFoolsStart.key, '0'); } async componentDidMount() { @@ -96,7 +101,8 @@ export default class App extends React.Component { isLoading: false, currentTheme: ThemeManager.getCurrentTheme(), showIntro: AsyncStorageManager.getInstance().preferences.showIntro.current === '1', - showUpdate: AsyncStorageManager.getInstance().preferences.showUpdate5.current === '1' + showUpdate: AsyncStorageManager.getInstance().preferences.showUpdate5.current === '1', + showAprilFools: AprilFoolsManager.getInstance().isAprilFoolsEnabled() && AsyncStorageManager.getInstance().preferences.showAprilFoolsStart.current === '1', }); // Status bar goes dark if set too fast setTimeout(this.setupStatusBar, 1000); @@ -109,9 +115,12 @@ export default class App extends React.Component { render() { if (this.state.isLoading) { return null; - } else if (this.state.showIntro || this.state.showUpdate) { - return ; + } else if (this.state.showIntro || this.state.showUpdate || this.state.showAprilFools) { + return ; } else { return ( diff --git a/components/CustomIntroSlider.js b/components/CustomIntroSlider.js index bde99f9..9ca2e50 100644 --- a/components/CustomIntroSlider.js +++ b/components/CustomIntroSlider.js @@ -39,13 +39,15 @@ const styles = StyleSheet.create({ type Props = { onDone: Function, - isUpdate: boolean + isUpdate: boolean, + isAprilFools: boolean, }; export default class CustomIntroSlider extends React.Component { introSlides: Array; updateSlides: Array; + aprilFoolsSlides: Array; constructor() { super(); @@ -108,7 +110,16 @@ export default class CustomIntroSlider extends React.Component { icon: 'email', colors: ['#e01928', '#be1522'], }, - ] + ]; + this.aprilFoolsSlides = [ + { + key: '1', + title: i18n.t('intro.aprilFoolsSlide.title'), + text: i18n.t('intro.aprilFoolsSlide.text'), + icon: 'information', + colors: ['#e01928', '#be1522'], + }, + ]; } @@ -144,10 +155,15 @@ export default class CustomIntroSlider extends React.Component { } render() { + let slides = this.introSlides; + if (this.props.isUpdate) + slides = this.updateSlides; + else if (this.props.isAprilFools) + slides = this.aprilFoolsSlides; return ( Date: Sun, 8 Mar 2020 13:26:14 +0100 Subject: [PATCH 27/66] Fixed crash --- utils/ThemeManager.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/utils/ThemeManager.js b/utils/ThemeManager.js index 024e8c4..cdd972f 100644 --- a/utils/ThemeManager.js +++ b/utils/ThemeManager.js @@ -139,7 +139,7 @@ export default class ThemeManager { if (AprilFoolsManager.getInstance().isAprilFoolsEnabled()) return ThemeManager.getAprilFoolsTheme(); else - ThemeManager.getBaseTheme() + return ThemeManager.getBaseTheme() } static getBaseTheme() { From bcdd1f9875cb80373fff2cfe73a77fe52172c0a8 Mon Sep 17 00:00:00 2001 From: keplyx Date: Sun, 8 Mar 2020 13:29:43 +0100 Subject: [PATCH 28/66] Moved custom theme in AprilFoolsManager.js --- utils/AprilFoolsManager.js | 21 +++++++++++++++++++++ utils/ThemeManager.js | 23 +---------------------- 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/utils/AprilFoolsManager.js b/utils/AprilFoolsManager.js index 058738f..c664210 100644 --- a/utils/AprilFoolsManager.js +++ b/utils/AprilFoolsManager.js @@ -49,6 +49,27 @@ export default class AprilFoolsManager { return menu; } + static getAprilFoolsTheme(currentTheme : Object) { + return { + ...currentTheme, + colors: { + ...currentTheme.colors, + primary: '#bebe03', + accent: '#bebe03', + background: '#5b3e02', + tabBackground: "#5b3e02", + card: "#5b3e02", + surface: "#5b3e02", + dividerBackground: '#362201', + textDisabled: '#b9b9b9', + + // Calendar/Agenda + agendaBackgroundColor: '#5b3e02', + agendaDayTextColor: '#6d6d6d', + }, + }; + } + isAprilFoolsEnabled() { return this.aprilFoolsEnabled; } diff --git a/utils/ThemeManager.js b/utils/ThemeManager.js index cdd972f..90ce5eb 100644 --- a/utils/ThemeManager.js +++ b/utils/ThemeManager.js @@ -93,27 +93,6 @@ export default class ThemeManager { }; } - static getAprilFoolsTheme() { - return { - ...ThemeManager.getBaseTheme(), - colors: { - ...ThemeManager.getBaseTheme().colors, - primary: '#bebe03', - accent: '#bebe03', - background: '#5b3e02', - tabBackground: "#5b3e02", - card: "#5b3e02", - surface: "#5b3e02", - dividerBackground: '#362201', - textDisabled: '#b9b9b9', - - // Calendar/Agenda - agendaBackgroundColor: '#5b3e02', - agendaDayTextColor: '#6d6d6d', - }, - }; - } - /** * Get this class instance or create one if none is found * @returns {ThemeManager} @@ -137,7 +116,7 @@ export default class ThemeManager { */ static getCurrentTheme(): Object { if (AprilFoolsManager.getInstance().isAprilFoolsEnabled()) - return ThemeManager.getAprilFoolsTheme(); + return AprilFoolsManager.getAprilFoolsTheme(ThemeManager.getBaseTheme()); else return ThemeManager.getBaseTheme() } From 97d84d92f5534d6623596eb303a73fc243bad392 Mon Sep 17 00:00:00 2001 From: keplyx Date: Sun, 8 Mar 2020 13:57:09 +0100 Subject: [PATCH 29/66] Prevent unselecting machine reminder value --- screens/SettingsScreen.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/screens/SettingsScreen.js b/screens/SettingsScreen.js index 614d71a..47e36f1 100644 --- a/screens/SettingsScreen.js +++ b/screens/SettingsScreen.js @@ -45,15 +45,17 @@ export default class SettingsScreen extends React.Component { * @param value The value to store */ onProxiwashNotifPickerValueChange(value: string) { - let key = AsyncStorageManager.getInstance().preferences.proxiwashNotifications.key; - AsyncStorageManager.getInstance().savePref(key, value); - this.setState({ - proxiwashNotifPickerSelected: value - }); - let intVal = 0; - if (value !== 'never') - intVal = parseInt(value); - NotificationsManager.setMachineReminderNotificationTime(intVal); + if (value != null) { + let key = AsyncStorageManager.getInstance().preferences.proxiwashNotifications.key; + AsyncStorageManager.getInstance().savePref(key, value); + this.setState({ + proxiwashNotifPickerSelected: value + }); + let intVal = 0; + if (value !== 'never') + intVal = parseInt(value); + NotificationsManager.setMachineReminderNotificationTime(intVal); + } } /** From 8bf8529331c9a21fe7d567d4e237e5ba66db2722 Mon Sep 17 00:00:00 2001 From: keplyx Date: Sun, 8 Mar 2020 14:19:47 +0100 Subject: [PATCH 30/66] Moved modalized component inside custom component --- components/CustomModal.js | 23 +++++++ screens/About/AboutScreen.js | 96 ++++++++++++++-------------- screens/DebugScreen.js | 23 ++++--- screens/Proximo/ProximoListScreen.js | 37 ++++++----- screens/Proxiwash/ProxiwashScreen.js | 29 ++++----- 5 files changed, 116 insertions(+), 92 deletions(-) create mode 100644 components/CustomModal.js diff --git a/components/CustomModal.js b/components/CustomModal.js new file mode 100644 index 0000000..99b38d6 --- /dev/null +++ b/components/CustomModal.js @@ -0,0 +1,23 @@ +// @flow + +import * as React from 'react'; +import {withTheme} from 'react-native-paper'; +import {Modalize} from "react-native-modalize"; + +function CustomModal(props) { + const { colors } = props.theme; + return ( + + {props.children} + + ); +} + +export default withTheme(CustomModal); + diff --git a/screens/About/AboutScreen.js b/screens/About/AboutScreen.js index 54e257e..69edff9 100644 --- a/screens/About/AboutScreen.js +++ b/screens/About/AboutScreen.js @@ -5,7 +5,7 @@ import {FlatList, Linking, Platform, View} from 'react-native'; import i18n from "i18n-js"; import appJson from '../../app'; import AsyncStorageManager from "../../utils/AsyncStorageManager"; -import {Modalize} from "react-native-modalize"; +import CustomModal from "../../components/CustomModal"; import ThemeManager from "../../utils/ThemeManager"; import {Avatar, Button, Card, List, Text, Title} from 'react-native-paper'; @@ -62,7 +62,7 @@ function openWebLink(link) { export default class AboutScreen extends React.Component { debugTapCounter = 0; - modalRef: { current: null | Modalize }; + modalRef: Object; state = { isDebugUnlocked: AsyncStorageManager.getInstance().preferences.debugUnlocked.current === '1' @@ -186,12 +186,13 @@ export default class AboutScreen extends React.Component { getCardItem: Function; getMainCard: Function; + onModalRef: Function; constructor(props: any) { super(props); - this.modalRef = React.createRef(); this.getCardItem = this.getCardItem.bind(this); this.getMainCard = this.getMainCard.bind(this); + this.onModalRef = this.onModalRef.bind(this); } getAppCard() { @@ -309,54 +310,47 @@ export default class AboutScreen extends React.Component { const onPressMail = openWebLink.bind(this, links.bugsMail); const onPressGit = openWebLink.bind(this, links.bugsGit); return ( - - - {i18n.t('aboutScreen.bugs')} - - {i18n.t('aboutScreen.bugsDescription')} - - - - - + + {i18n.t('aboutScreen.bugs')} + + {i18n.t('aboutScreen.bugsDescription')} + + + + ); } openBugReportModal() { - if (this.modalRef.current) { - this.modalRef.current.open(); + if (this.modalRef) { + this.modalRef.open(); } } @@ -372,10 +366,16 @@ export default class AboutScreen extends React.Component { return ; } + onModalRef(ref: Object) { + this.modalRef = ref; + } + render() { return ( - {this.getBugReportModal()} + + {this.getBugReportModal()} + { - modalRef: { current: null | Modalize }; + modalRef: Object; modalInputValue = ''; state = { modalCurrentDisplayItem: {}, currentPreferences: JSON.parse(JSON.stringify(AsyncStorageManager.getInstance().preferences)) }; + onModalRef: Function; + constructor(props: any) { super(props); - this.modalRef = React.createRef(); + this.onModalRef = this.onModalRef.bind(this); } static getGeneralItem(onPressCallback: Function, icon: ?string, title: string, subtitle: string) { @@ -76,8 +78,8 @@ export default class DebugScreen extends React.Component { this.setState({ modalCurrentDisplayItem: item }); - if (this.modalRef.current) { - this.modalRef.current.open(); + if (this.modalRef) { + this.modalRef.open(); } } @@ -127,15 +129,16 @@ export default class DebugScreen extends React.Component { AsyncStorageManager.getInstance().savePref(key, value); } + onModalRef(ref: Object) { + this.modalRef = ref; + } + render() { return ( - + {this.getModalContent()} - + { - modalRef: { current: null | Modalize }; + modalRef: Object; originalData: Array; shouldFocusSearchBar: boolean; onSearchStringChange: Function; onSortMenuPress: Function; renderItem: Function; + onModalRef: Function; constructor(props: any) { super(props); - this.modalRef = React.createRef(); this.originalData = this.props.route.params['data']['data']; this.shouldFocusSearchBar = this.props.route.params['shouldFocusSearchBar']; this.state = { @@ -69,6 +69,7 @@ export default class ProximoListScreen extends React.Component { this.onSearchStringChange = this.onSearchStringChange.bind(this); this.onSortMenuPress = this.onSortMenuPress.bind(this); this.renderItem = this.renderItem.bind(this); + this.onModalRef = this.onModalRef.bind(this); } /** @@ -95,8 +96,8 @@ export default class ProximoListScreen extends React.Component { data.sort(sortNameReverse); break; } - if (this.modalRef.current && mode !== this.state.currentSortMode) { - this.modalRef.current.close(); + if (this.modalRef && mode !== this.state.currentSortMode) { + this.modalRef.close(); } } @@ -250,8 +251,8 @@ export default class ProximoListScreen extends React.Component { this.setState({ modalCurrentDisplayItem: this.getModalItemContent(item) }); - if (this.modalRef.current) { - this.modalRef.current.open(); + if (this.modalRef) { + this.modalRef.open(); } } @@ -259,8 +260,8 @@ export default class ProximoListScreen extends React.Component { this.setState({ modalCurrentDisplayItem: this.getModalSortMenu() }); - if (this.modalRef.current) { - this.modalRef.current.open(); + if (this.modalRef) { + this.modalRef.open(); } } @@ -283,9 +284,9 @@ export default class ProximoListScreen extends React.Component { description={item.quantity + ' ' + i18n.t('proximoScreen.inStock')} descriptionStyle={{color: this.getStockColor(parseInt(item.quantity))}} onPress={onPress} - left={props => } - right={props => + right={() => {item.price}€ } @@ -297,20 +298,18 @@ export default class ProximoListScreen extends React.Component { return item.name + item.code; } + onModalRef(ref: Object) { + this.modalRef = ref; + } + render() { return ( - + {this.state.modalCurrentDisplayItem} - + { - modalRef: { current: null | Modalize }; + modalRef: Object; onAboutPress: Function; getRenderItem: Function; getRenderSectionHeader: Function; createDataset: Function; onHideBanner: Function; + onModalRef: Function; fetchedData: Object; @@ -66,7 +67,6 @@ export default class ProxiwashScreen extends React.Component { */ constructor() { super(); - this.modalRef = React.createRef(); stateStrings[ProxiwashConstants.machineStates.TERMINE] = i18n.t('proxiwashScreen.states.finished'); stateStrings[ProxiwashConstants.machineStates.DISPONIBLE] = i18n.t('proxiwashScreen.states.ready'); stateStrings[ProxiwashConstants.machineStates["EN COURS"]] = i18n.t('proxiwashScreen.states.running'); @@ -91,6 +91,7 @@ export default class ProxiwashScreen extends React.Component { this.getRenderSectionHeader = this.getRenderSectionHeader.bind(this); this.createDataset = this.createDataset.bind(this); this.onHideBanner = this.onHideBanner.bind(this); + this.onModalRef = this.onModalRef.bind(this); } onHideBanner() { @@ -249,14 +250,14 @@ export default class ProxiwashScreen extends React.Component { this.setState({ modalCurrentDisplayItem: this.getModalContent(title, item, isDryer) }); - if (this.modalRef.current) { - this.modalRef.current.open(); + if (this.modalRef) { + this.modalRef.open(); } } onSetupNotificationsPress(machineId: string) { - if (this.modalRef.current) { - this.modalRef.current.close(); + if (this.modalRef) { + this.modalRef.close(); } this.setupNotifications(machineId) } @@ -323,7 +324,6 @@ export default class ProxiwashScreen extends React.Component { ); } - onAboutPress() { this.props.navigation.navigate('ProxiwashAboutScreen'); } @@ -334,6 +334,10 @@ export default class ProxiwashScreen extends React.Component { ); } + onModalRef(ref: Object) { + this.modalRef = ref; + } + render() { const nav = this.props.navigation; return ( @@ -353,14 +357,9 @@ export default class ProxiwashScreen extends React.Component { > {i18n.t('proxiwashScreen.enableNotificationsTip')} - + {this.state.modalCurrentDisplayItem} - + Date: Sun, 8 Mar 2020 14:21:25 +0100 Subject: [PATCH 31/66] Fixed search bar padding in ProximoListScreen --- screens/Proximo/ProximoListScreen.js | 1 + 1 file changed, 1 insertion(+) diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index 53a4431..d57cf16 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -110,6 +110,7 @@ export default class ProximoListScreen extends React.Component { this.props.navigation.setOptions({ headerRight: button, headerTitle: title, + headerTitleContainerStyle: {marginHorizontal: 0, right: 50, left: 50}, }); this.setSortMode(1); } From 850a64571cac5050bc39842731986a93fd8d19bb Mon Sep 17 00:00:00 2001 From: keplyx Date: Sun, 8 Mar 2020 14:22:03 +0100 Subject: [PATCH 32/66] Improved files path coherence --- navigation/DrawerNavigator.js | 2 +- navigation/MainTabNavigator.js | 4 ++-- screens/{ => About}/DebugScreen.js | 8 ++++---- screens/{ => Planning}/PlanningDisplayScreen.js | 4 ++-- screens/{ => Planning}/PlanningScreen.js | 8 ++++---- 5 files changed, 13 insertions(+), 13 deletions(-) rename screens/{ => About}/DebugScreen.js (95%) rename screens/{ => Planning}/PlanningDisplayScreen.js (94%) rename screens/{ => Planning}/PlanningScreen.js (97%) diff --git a/navigation/DrawerNavigator.js b/navigation/DrawerNavigator.js index 3b7a56b..71235ee 100644 --- a/navigation/DrawerNavigator.js +++ b/navigation/DrawerNavigator.js @@ -9,7 +9,7 @@ import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen'; import SelfMenuScreen from '../screens/SelfMenuScreen'; import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen"; import BibScreen from "../screens/Websites/BibScreen"; -import DebugScreen from '../screens/DebugScreen'; +import DebugScreen from '../screens/About/DebugScreen'; import Sidebar from "../components/Sidebar"; import {createStackNavigator, TransitionPresets} from "@react-navigation/stack"; import HeaderButton from "../components/HeaderButton"; diff --git a/navigation/MainTabNavigator.js b/navigation/MainTabNavigator.js index 89bdc16..3392976 100644 --- a/navigation/MainTabNavigator.js +++ b/navigation/MainTabNavigator.js @@ -3,8 +3,8 @@ import {createStackNavigator, TransitionPresets} from '@react-navigation/stack'; import {createMaterialBottomTabNavigator} from "@react-navigation/material-bottom-tabs"; import HomeScreen from '../screens/HomeScreen'; -import PlanningScreen from '../screens/PlanningScreen'; -import PlanningDisplayScreen from '../screens/PlanningDisplayScreen'; +import PlanningScreen from '../screens/Planning/PlanningScreen'; +import PlanningDisplayScreen from '../screens/Planning/PlanningDisplayScreen'; import ProxiwashScreen from '../screens/Proxiwash/ProxiwashScreen'; import ProxiwashAboutScreen from '../screens/Proxiwash/ProxiwashAboutScreen'; import ProximoMainScreen from '../screens/Proximo/ProximoMainScreen'; diff --git a/screens/DebugScreen.js b/screens/About/DebugScreen.js similarity index 95% rename from screens/DebugScreen.js rename to screens/About/DebugScreen.js index a2b258d..98e1565 100644 --- a/screens/DebugScreen.js +++ b/screens/About/DebugScreen.js @@ -1,11 +1,11 @@ // @flow import * as React from 'react'; -import ThemeManager from '../utils/ThemeManager'; +import ThemeManager from '../../utils/ThemeManager'; import {Alert, Clipboard, ScrollView, View} from "react-native"; -import AsyncStorageManager from "../utils/AsyncStorageManager"; -import NotificationsManager from "../utils/NotificationsManager"; -import CustomModal from "../components/CustomModal"; +import AsyncStorageManager from "../../utils/AsyncStorageManager"; +import NotificationsManager from "../../utils/NotificationsManager"; +import CustomModal from "../../components/CustomModal"; import {Button, Card, List, Subheading, TextInput, Title} from 'react-native-paper'; type Props = { diff --git a/screens/PlanningDisplayScreen.js b/screens/Planning/PlanningDisplayScreen.js similarity index 94% rename from screens/PlanningDisplayScreen.js rename to screens/Planning/PlanningDisplayScreen.js index ffb96e5..9caf9a8 100644 --- a/screens/PlanningDisplayScreen.js +++ b/screens/Planning/PlanningDisplayScreen.js @@ -2,10 +2,10 @@ import * as React from 'react'; import {Image, ScrollView, View} from 'react-native'; -import ThemeManager from "../utils/ThemeManager"; +import ThemeManager from "../../utils/ThemeManager"; import HTML from "react-native-render-html"; import {Linking} from "expo"; -import PlanningEventManager from '../utils/PlanningEventManager'; +import PlanningEventManager from '../../utils/PlanningEventManager'; import {Card} from 'react-native-paper'; type Props = { diff --git a/screens/PlanningScreen.js b/screens/Planning/PlanningScreen.js similarity index 97% rename from screens/PlanningScreen.js rename to screens/Planning/PlanningScreen.js index 9efb51e..565b253 100644 --- a/screens/PlanningScreen.js +++ b/screens/Planning/PlanningScreen.js @@ -4,11 +4,11 @@ import * as React from 'react'; import {BackHandler, View} from 'react-native'; import i18n from "i18n-js"; import {LocaleConfig} from 'react-native-calendars'; -import WebDataManager from "../utils/WebDataManager"; -import PlanningEventManager from '../utils/PlanningEventManager'; +import WebDataManager from "../../utils/WebDataManager"; +import PlanningEventManager from '../../utils/PlanningEventManager'; import {Avatar, Divider, List} from 'react-native-paper'; -import CustomAgenda from "../components/CustomAgenda"; -import AprilFoolsManager from "../utils/AprilFoolsManager"; +import CustomAgenda from "../../components/CustomAgenda"; +import AprilFoolsManager from "../../utils/AprilFoolsManager"; LocaleConfig.locales['fr'] = { monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], From d514d701260536251be799802b2ecd0949e1605b Mon Sep 17 00:00:00 2001 From: keplyx Date: Sun, 8 Mar 2020 14:29:57 +0100 Subject: [PATCH 33/66] Improved proximo list loading --- screens/Proximo/ProximoListScreen.js | 32 ++++++++++++++-------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index d57cf16..e4b78b5 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -61,9 +61,9 @@ export default class ProximoListScreen extends React.Component { this.originalData = this.props.route.params['data']['data']; this.shouldFocusSearchBar = this.props.route.params['shouldFocusSearchBar']; this.state = { - currentlyDisplayedData: this.originalData, + currentlyDisplayedData: this.originalData.sort(sortPrice), currentSortMode: 1, - modalCurrentDisplayItem: , + modalCurrentDisplayItem: null, }; this.onSearchStringChange = this.onSearchStringChange.bind(this); @@ -72,6 +72,20 @@ export default class ProximoListScreen extends React.Component { this.onModalRef = this.onModalRef.bind(this); } + + /** + * Set the sort mode from state when components are ready + */ + componentDidMount() { + const button = this.getSortMenu.bind(this); + const title = this.getSearchBar.bind(this); + this.props.navigation.setOptions({ + headerRight: button, + headerTitle: title, + headerTitleContainerStyle: {marginHorizontal: 0, right: 50, left: 50}, + }); + } + /** * Set the current sort mode. * @@ -101,20 +115,6 @@ export default class ProximoListScreen extends React.Component { } } - /** - * Set the sort mode from state when components are ready - */ - componentDidMount() { - const button = this.getSortMenu.bind(this); - const title = this.getSearchBar.bind(this); - this.props.navigation.setOptions({ - headerRight: button, - headerTitle: title, - headerTitleContainerStyle: {marginHorizontal: 0, right: 50, left: 50}, - }); - this.setSortMode(1); - } - getSearchBar() { return ( Date: Sun, 8 Mar 2020 14:36:20 +0100 Subject: [PATCH 34/66] Improved some padding in Menu --- screens/SelfMenuScreen.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/screens/SelfMenuScreen.js b/screens/SelfMenuScreen.js index 478803c..d798114 100644 --- a/screens/SelfMenuScreen.js +++ b/screens/SelfMenuScreen.js @@ -99,11 +99,11 @@ export default class SelfMenuScreen extends React.Component { getRenderSectionHeader({section}: Object) { return ( { return ( { marginRight: 'auto', borderBottomWidth: 1, borderBottomColor: ThemeManager.getCurrentThemeVariables().primary, - marginTop: 10, + marginTop: 5, marginBottom: 5, }}/> From 9bbd3dd6b2ca9dbb1c635638fe9f0b8dd5ca7b29 Mon Sep 17 00:00:00 2001 From: Yohan Simard Date: Sun, 8 Mar 2020 14:41:04 +0100 Subject: [PATCH 35/66] Better formatting for sort order selection in ProximoListScreen --- screens/Proximo/ProximoListScreen.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index e4b78b5..9756a18 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -213,35 +213,35 @@ export default class ProximoListScreen extends React.Component { > - {i18n.t('proximoScreen.sortPrice')} + {i18n.t('proximoScreen.sortPrice')} - {i18n.t('proximoScreen.sortPriceReverse')} + {i18n.t('proximoScreen.sortPriceReverse')} - {i18n.t('proximoScreen.sortName')} + {i18n.t('proximoScreen.sortName')} - {i18n.t('proximoScreen.sortNameReverse')} + {i18n.t('proximoScreen.sortNameReverse')} From 8b8afd69eb7f4195784842d71171ab0bd598813b Mon Sep 17 00:00:00 2001 From: keplyx Date: Sun, 8 Mar 2020 14:43:02 +0100 Subject: [PATCH 36/66] Removed unused code and some arrow functions --- components/DashboardItem.js | 107 ++++++++++-------------------------- components/FeedItem.js | 10 +++- 2 files changed, 37 insertions(+), 80 deletions(-) diff --git a/components/DashboardItem.js b/components/DashboardItem.js index fdabb1d..7e61752 100644 --- a/components/DashboardItem.js +++ b/components/DashboardItem.js @@ -7,7 +7,7 @@ import ThemeManager from "../utils/ThemeManager"; import HTML from "react-native-render-html"; import {LinearGradient} from "expo-linear-gradient"; import i18n from "i18n-js"; -import {Avatar, Card, Text, Title} from 'react-native-paper'; +import {Avatar, Card, Text} from 'react-native-paper'; type Props = { isAvailable: boolean, @@ -28,6 +28,13 @@ export default class DashboardItem extends React.Component { displayEvent: undefined, }; + getIcon: Function; + + constructor() { + super(); + this.getIcon = this.getIcon.bind(this); + } + /** * Convert the date string given by in the event list json to a date object * @param dateString @@ -64,18 +71,17 @@ export default class DashboardItem extends React.Component { getEventPreviewContainer() { if (this.props.displayEvent !== undefined && this.props.displayEvent !== null) { const hasImage = this.props.displayEvent['logo'] !== '' && this.props.displayEvent['logo'] !== null; + const getImage = () => ; return ( {hasImage ? - - } + left={getImage} /> : { getIcon() { return ( - + ); } - getText() { - return ( - - - {this.props.title} - - - {this.props.subtitle} - - - ); - } - - getContent() { - if (this.props.isSquare) { - return ( - - - {this.getIcon()} - - {this.getText()} - - ); - } - } - - render() { // console.log("rendering DashboardItem " + this.props.title); let marginRight = 10; @@ -211,28 +173,17 @@ export default class DashboardItem extends React.Component { overflow: 'hidden', }} onPress={this.props.clickAction}> - {this.props.isSquare ? - - {this.getContent()} - - : - - } - /> - - {this.getEventPreviewContainer()} - - } + + + + {this.getEventPreviewContainer()} + ); } diff --git a/components/FeedItem.js b/components/FeedItem.js index a7de279..58294a9 100644 --- a/components/FeedItem.js +++ b/components/FeedItem.js @@ -6,6 +6,13 @@ import i18n from "i18n-js"; const ICON_AMICALE = require('../assets/amicale.png'); +function getAvatar() { + return ( + + ); +} + function FeedItem(props) { const {colors} = props.theme; return ( @@ -13,8 +20,7 @@ function FeedItem(props) { } + left={getAvatar} /> {props.full_picture !== '' && props.full_picture !== undefined ? From ff7e7cb2797a39662640461786d71616c87245ec Mon Sep 17 00:00:00 2001 From: Yohan Simard Date: Sun, 8 Mar 2020 14:48:44 +0100 Subject: [PATCH 37/66] Added missing translation + other improvements --- screens/Proximo/ProximoListScreen.js | 2 +- translations/en.json | 9 +++++---- translations/fr.json | 13 +++++++------ 3 files changed, 13 insertions(+), 11 deletions(-) diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index 9756a18..3fbed58 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -206,7 +206,7 @@ export default class ProximoListScreen extends React.Component { flex: 1, padding: 20 }}> - Sort Order + {i18n.t('proximoScreen.sortOrder')} this.setSortMode(value)} value={this.state.currentSortMode} diff --git a/translations/en.json b/translations/en.json index 2b47ce0..fd9f2ca 100644 --- a/translations/en.json +++ b/translations/en.json @@ -126,10 +126,11 @@ "emptyList": "Empty List", "article": "Article", "articles": "Articles", - "sortName": "Sort by name", - "sortNameReverse": "Sort by name (reverse)", - "sortPrice": "Sort by price", - "sortPriceReverse": "Sort by price (reverse)", + "sortOrder": "Sort by", + "sortName": "Name", + "sortNameReverse": "Name (reverse)", + "sortPrice": "Price", + "sortPriceReverse": "Price (reverse)", "listUpdated": "Article list updated!", "listUpdateFail": "Error while updating article list", "loading": "Loading...", diff --git a/translations/fr.json b/translations/fr.json index 5a77bcf..8326246 100644 --- a/translations/fr.json +++ b/translations/fr.json @@ -126,18 +126,19 @@ "emptyList": "Liste Vide", "article": "Article", "articles": "Articles", - "sortName": "Trier par nom", - "sortNameReverse": "Trier par nom (inversé)", - "sortPrice": "Trier par prix", - "sortPriceReverse": "Trier par prix (inversé)", + "sortOrder": "Trier par :", + "sortName": "Nom", + "sortNameReverse": "Nom (inversé)", + "sortPrice": "Prix", + "sortPriceReverse": "Prix (inversé)", "listUpdated": "Liste d'articles mise à jour !", "listUpdateFail": "Erreur lors de la mise à jour de la list d'articles", "loading": "Chargement...", "inStock": "en stock", "description": "Le Proximo c’est ta petite épicerie étudiante tenue par les étudiants directement sur le campus. Ouverte tous les jours de 18h30 à 19h30, nous t’accueillons et te sauvons quand tu n’as plus de pâtes ou de diluant ! Différents produits pour différentes galères, le tout à prix coûtant. Tu peux payer par Lydia ou par espèce.", "openingHours": "Horaires d'ouverture", - "paymentMethods" : "Moyens de Paiement", - "paymentMethodsDescription" : "Espèce ou Lydia", + "paymentMethods": "Moyens de Paiement", + "paymentMethodsDescription": "Espèce ou Lydia", "search": "Rechercher", "all": "Tout" }, From 9ebf34fca9bbfddef265956a27e4b367a495e987 Mon Sep 17 00:00:00 2001 From: keplyx Date: Sun, 8 Mar 2020 15:33:29 +0100 Subject: [PATCH 38/66] Improved section headers --- screens/Proxiwash/ProxiwashScreen.js | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js index c832904..5ae43c1 100644 --- a/screens/Proxiwash/ProxiwashScreen.js +++ b/screens/Proxiwash/ProxiwashScreen.js @@ -387,12 +387,12 @@ export default class ProxiwashScreen extends React.Component { } getRenderSectionHeader({section}: Object) { - const subtitle = this.getMachineAvailableNumber(section.title === i18n.t('proxiwashScreen.dryers')) + ' ' + i18n.t('proxiwashScreen.numAvailable'); + const isDryer = section.title === i18n.t('proxiwashScreen.dryers'); + const subtitle = this.getMachineAvailableNumber(isDryer) + ' ' + i18n.t('proxiwashScreen.numAvailable'); return ( { } /> ); From 81b44f64fdfe8e891720cd8ff5e998eac419ebfd Mon Sep 17 00:00:00 2001 From: keplyx Date: Sun, 8 Mar 2020 15:50:34 +0100 Subject: [PATCH 39/66] Improved refresh handling --- components/WebSectionList.js | 17 ++++++++++++----- screens/HomeScreen.js | 3 ++- screens/Proximo/ProximoMainScreen.js | 3 ++- screens/Proxiwash/ProxiwashScreen.js | 5 +++-- screens/SelfMenuScreen.js | 3 ++- 5 files changed, 21 insertions(+), 10 deletions(-) diff --git a/components/WebSectionList.js b/components/WebSectionList.js index ee305a6..13bc60e 100644 --- a/components/WebSectionList.js +++ b/components/WebSectionList.js @@ -10,7 +10,8 @@ import EmptyWebSectionListItem from "./EmptyWebSectionListItem"; type Props = { navigation: Object, fetchUrl: string, - refreshTime: number, + autoRefreshTime: number, + refreshOnFocus: boolean, renderItem: React.Node, renderSectionHeader: React.Node, stickyHeader: boolean, @@ -24,6 +25,8 @@ type State = { snackbarVisible: boolean }; + +const MIN_REFRESH_TIME = 5 * 1000; /** * Custom component defining a material icon using native base * @@ -82,15 +85,19 @@ export default class WebSectionList extends React.Component { const onScreenBlur = this.onScreenBlur.bind(this); this.props.navigation.addListener('focus', onScreenFocus); this.props.navigation.addListener('blur', onScreenBlur); + this.onRefresh(); } + + /** * Refresh data when focusing the screen and setup a refresh interval if asked to */ onScreenFocus() { - this.onRefresh(); - if (this.props.refreshTime > 0) - this.refreshInterval = setInterval(this.onRefresh, this.props.refreshTime) + if (this.props.refreshOnFocus && this.lastRefresh !== undefined) + this.onRefresh(); + if (this.props.autoRefreshTime > 0) + this.refreshInterval = setInterval(this.onRefresh, this.props.autoRefreshTime) } /** @@ -127,7 +134,7 @@ export default class WebSectionList extends React.Component { onRefresh() { let canRefresh; if (this.lastRefresh !== undefined) - canRefresh = (new Date().getTime() - this.lastRefresh.getTime()) > this.props.refreshTime; + canRefresh = (new Date().getTime() - this.lastRefresh.getTime()) > MIN_REFRESH_TIME; else canRefresh = true; if (canRefresh) { diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js index 8e6a589..69e6639 100644 --- a/screens/HomeScreen.js +++ b/screens/HomeScreen.js @@ -526,7 +526,8 @@ export default class HomeScreen extends React.Component { ); diff --git a/screens/Proximo/ProximoMainScreen.js b/screens/Proximo/ProximoMainScreen.js index 78c58c0..a4dd547 100644 --- a/screens/Proximo/ProximoMainScreen.js +++ b/screens/Proximo/ProximoMainScreen.js @@ -194,7 +194,8 @@ export default class ProximoMainScreen extends React.Component { ); diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js index 5ae43c1..515df53 100644 --- a/screens/Proxiwash/ProxiwashScreen.js +++ b/screens/Proxiwash/ProxiwashScreen.js @@ -363,10 +363,11 @@ export default class ProxiwashScreen extends React.Component { + renderSectionHeader={this.getRenderSectionHeader} + autoRefreshTime={REFRESH_TIME} + refreshOnFocus={true}/> ); diff --git a/screens/SelfMenuScreen.js b/screens/SelfMenuScreen.js index d798114..716f9cc 100644 --- a/screens/SelfMenuScreen.js +++ b/screens/SelfMenuScreen.js @@ -168,7 +168,8 @@ export default class SelfMenuScreen extends React.Component { Date: Sun, 8 Mar 2020 16:31:12 +0100 Subject: [PATCH 40/66] Updated README.md --- README.md | 60 +++++++++++++++++++++++++++++++++---------------------- 1 file changed, 36 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 1411b72..3304eb2 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,20 @@ -# Application pour l'Amicale +# CAMPUS - Application pour l'Amicale Créée pendant l'été 2019, cette application compatible Android et iOS permet aux étudiants d'avoir un accès facile aux informations du campus : - News de l'amicale - État des machines à laver + - Liste des événements sur le campus - Stock du Proximo - Emploi du temps - Menu du RU - -Ce dépot contient les source de cette application, modifiable par les étudiants de l'INSA Toulouse, sous licence GPLv3. + - Disponibilité des salles libre accès + - Réservation des Bib'Box + +Ce dépot contient la source de cette application, modifiable par les étudiants de l'INSA Toulouse, sous licence GPLv3. ## Contribuer -Si vous voulez influencer le développement ? C'est très simple ! +Vous voulez influencer le développement ? C'est très simple ! Pas besoin de connaissance, il est possible d'aider simplement en proposant des améliorations ou en rapportant des bugs par mail (vergnet@etud.insa-toulouse.fr) ou sur [cette page](https://git.etud.insa-toulouse.fr/vergnet/application-amicale/issues), en vous connectant avec vos login INSA. @@ -20,30 +23,34 @@ Si vous avez assez de connaissances et vous souhaitez proposer des modification ## Technologies Utilisées Cette application est faite en JavaScript avec React Native (framework Open Source créé par Facebook), combinée avec Expo. -Cette combinaison permet de n'avoir qu'un seul code JavaScript à écrire pour Android et iOS. Pour compiler pour la plateforme souhaitée, il suffit d'effectuer une commande, qui envoie le code sur les serveurs d'Expo pour compilation (voir section Installer). Plus besoin de Mac pour développer une application iOS ! +Cette combinaison permet de n'avoir qu'un seul code JavaScript à écrire pour Android et iOS. Pour compiler pour la plateforme souhaitée, il suffit d'effectuer une commande, qui envoie le code sur les serveurs d'Expo pour compilation (voir section Installer). Plus besoin de Mac pour développer une application iOS ! (Mais toujours besoin d'un pour publier sur l'App store...) ## Installer l'application depuis ce dépot -**Avant de commencer, installez git et npm sur votre machine, puis clonez ce dépot.** +**Avant de commencer, installez git, node et npm sur votre machine, puis clonez ce dépot.** ### Téléchargement du dépot et des dépendances Il est conseillé d'utiliser un logiciel comme **PHPStorm** (logiciel pro gratuit pour les étudiants) pour éditer l'application car ce logiciel est compatible avec les technologies utilisées. -Une fois le dépot sur votre machine, ouvrez le projet dans PHPStorm, ouvrez le terminal et tapez `npm install`. Ceci installera toutes les dépendances listées dans le fichier _package.json_. Cette opération peut prendre quelques minutes et utilisera beaucoup d'espace disque (plus de 400Mo). +Une fois le dépot sur votre machine, ouvrez le projet dans PHPStorm, ouvrez le terminal et tapez `npm install`. Ceci installera toutes les dépendances listées dans le fichier _package.json_. Cette opération peut prendre quelques minutes et utilisera beaucoup d'espace disque (plus de 300Mo). -**--> /!\ Pour pouvoir changer de mode nuit/jour dynamiquement sans redémarrer l'application, j'ai été obligé de modifier une librairie. Il est possible que l'appplication plante si vous ne refaites pas les modifications vous même /!\ <--** +### Lancement de l'appli -Ceci est temporaire (on espère), car cette modification devrait être implémentée dans la librairie originale (un jour...). +#### En console -En attendant, allez dans le dossier de la librairie **native-base-shoutem-theme**, et ouvrez le fichier _index.js_ et _src/connectStyle.js_. Ensuite, faites les modification [comme indiqué ici](https://github.com/GeekyAnts/theme/pull/5/files/91f67c55ca6e65fe3af779586b506950c9f331be#diff-4cfc2dd4d5dae7954012899f2268a422). +Ouvrez simplement une console dans le répertoire du projet et tapez : -Ces modifications ont été acceptées dans la librairié originale, mais pas encore présentes dans la version sur npm. +`expo start` -### Paramétrage de PHPStorm +Cette commande va démarrer le Metro Bundler permettant de lancer l'appli. Attendez quelques instants, quand un QR code apparait, l'application est prête à être lancée sur votre téléphone. -Il faut maintenant paramétrer PHPStorm pour pouvoir lancer facilement l'application. Nous utilisons ici expo, il faut donc dire à PHPStorm de lancer une commande expo quand nous cliquons sur le bouton play. +**Ne stoppez pas le Metro Bundler dans la console a chaque changement !** Toutes les modifications sont appliquées automatiquement, pas besoin de stopper et de redémarrer pour des petits changements ! Il est seulement nécessaire de redémarrer le Metro Bundler quand vous changez des librairies ou des fichiers. + +#### Directement avec PHPStorm + +Si vous n'aimez pas la console et voulez utiliser le merveilleux bouton play de PHPStorm, il faut le paramétrer. Nous utilisons ici expo, il faut donc dire à PHPStorm de lancer une commande expo quand nous cliquons sur le bouton play. Pour cela, cliquez sur **Edit Configurations** en haut à droite, dans la nouvelle fenêtre, cliquez sur **+**, et choisissez **React Native**. @@ -54,29 +61,34 @@ Ensuite, dans **Before Launch**; cliquez sur **+** pour ajouter une nouvelle con [Plus d'informations ici](https://www.jetbrains.com/help/phpstorm/react-native.html) Le projet est maintenant pret, quand vous cliquez sur run (ou shift+F10), le projet sera lancé (cela peut prendre plusieurs minutes). -Une fois lancé, vous pouvez tester sur un appareil. +Quand un QR code apparait, vous pouvez tester sur un appareil. + +**Ne stoppez pas le Metro Bundler dans la console a chaque changement !** Toutes les modifications sont appliquées automatiquement, pas besoin de stopper et de redémarrer pour des petits changements ! Il est seulement nécessaire de redémarrer le Metro Bundler quand vous changez des librairies ou des fichiers. ### Tester sur un appareil -Assurez vous d'avoir installer et lancé le projet comme expliqué plus haut. +Assurez vous d'avoir installé et lancé le projet comme expliqué plus haut. -#### Emulateur android +#### Émulateur android -[Suivez la procédure sur ce lien](https://docs.expo.io/versions/latest/workflow/android-studio-emulator/). +[Suivez la procédure sur ce lien pour installer un émulateur](https://docs.expo.io/versions/latest/workflow/android-studio-emulator/). -Une fois l'emulateur installé et démarré, lancez le projet, puis appuyez sur la touche **a** dans la console _Run_, cela lancera l'aplication dans l'émulateur. - -**Ne stoppez pas l'application depuis PhpStorm ! Toutes les modifications sont appliquées automatiquement, pas besoin de stopper et de redémarrer !** +Une fois l'emulateur installé et démarré, lancez le projet, puis appuyez sur la touche **a** dans la console, cela lancera l'aplication dans l'émulateur. #### Appareil Physique Installez l'application **Expo** sur votre appareil (android ou iOS), assurez vous d'avoir démarré le projet et d'avoir votre machine de développement et le téléphone sur le même réseau wifi (non publique). Ouvrez l'application expo, Votre projet devrait apparaitre dans la liste. Cliquez dessus et c'est bon ! -**Ne stoppez pas l'application depuis PhpStorm ! Toutes les modifications sont appliquées automatiquement, pas besoin de stopper et de redémarrer !** - +Si vous utilisez le réseau Wifirst des résidences INSA (ou tout autre wifi publique), il y a une méthode très simple pour créer un réseau privé entre votre PC et votre téléphone (en tout cas avec un téléphone android). Connectez votre téléphone en Wifi au réseau, puis connectez le en USB à votre PC. Une fois connecté, allez dans les paramètres et activez le "USB Tethering". Votre PC est maintenant connecté en réseau filaire à votre téléphone, qui lui est connecté à Internet par la wifi. Si vous voulez connecter d'autres appareils, il suffit de créer un Hotspot sur votre PC et de connecter vos autres appareils à ce Hotspot. Profitez de votre réseau privé dans votre Promolo ! ## Compilation -Pour compiler sur android, tapez la commande `expo build:android` dans une terminal dans le projet. Ensuite attendez. +Avant de compiler, créez vous un compte Expo. Ensuite, lancez le Metro Bundler et connectez vous a votre compte dans la console (les touches sont indiquées). -Pou compiler sur iOS, vous aurez besoin du compte développeur de l'amicale. +Pour compiler sur android, vous avez deux solutions: + - Vous voulez générer un `.apk` pour pour l'installer sur votre téléphone, lancez cette commande dans un terminal dans le projet : `expo build:android`. Cette commande va générer les paquets nécessaires à Expo et les envoyer sur leurs serveurs. Ne touchez à rien pendant la création des paquets (cela peut prendre une à deux minutes). Une fois que vous voyez écrit `Build in progress...`, vous pouvez fermer votre console : les serveurs ont pris la main et vous avez un lien pour analyser la progression. Ce processus dure en général 8 minutes. Si vous ne fermez pas la console, vous aurez un lien direct pour télécharger le fichier `.apk`, sinon connectez vous sur votre compte Expo, rubrique Builds pour le télécharger. + + - Vous voulez compiler pour ensuite publier sur le Play Store, lancez cette commande dans un terminal dans le projet : `expo build:android -t app-bundle`. Cette commande fait exactement la même chose que la précédente à une chose près. Vous obtiendre un fichier `.aab`, qui est un format optimisé pour le Play Store. Ce fichier est plus volumineux mais permet au Play Store de générer les apk les plus optimisés possible pour différentes architectures de téléphone. + + +Pou compiler sur iOS, vous aurez besoin du compte développeur de l'amicale car un tel compte est payant. From 9ec986574fa0b1176c4fe019034e7c5853a3e6ac Mon Sep 17 00:00:00 2001 From: keplyx Date: Sun, 8 Mar 2020 19:50:17 +0100 Subject: [PATCH 41/66] Follow system night mode when available --- App.js | 8 ++----- app.json | 1 + package.json | 3 ++- screens/SettingsScreen.js | 45 ++++++++++++++++++++++++++++++------ translations/en.json | 1 + translations/fr.json | 5 ++-- utils/AsyncStorageManager.js | 5 ++++ utils/ThemeManager.js | 6 ++++- 8 files changed, 57 insertions(+), 17 deletions(-) diff --git a/App.js b/App.js index 0e2e740..e97ad3a 100644 --- a/App.js +++ b/App.js @@ -42,6 +42,7 @@ export default class App extends React.Component { super(); LocaleManager.initTranslations(); this.onIntroDone = this.onIntroDone.bind(this); + SplashScreen.preventAutoHide(); } /** @@ -84,13 +85,9 @@ export default class App extends React.Component { async loadAssetsAsync() { // Wait for custom fonts to be loaded before showing the app - // console.log("loading Fonts"); - SplashScreen.preventAutoHide(); - // console.log("loading preferences"); await AsyncStorageManager.getInstance().loadPreferences(); ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme()); - // console.log("loading Expo token"); - await NotificationsManager.initExpoToken(); + // await NotificationsManager.initExpoToken(); this.onLoadFinished(); } @@ -122,7 +119,6 @@ export default class App extends React.Component { isAprilFools={this.state.showAprilFools && !this.state.showIntro} />; } else { - return ( diff --git a/app.json b/app.json index f1ef51b..57500e5 100644 --- a/app.json +++ b/app.json @@ -13,6 +13,7 @@ "version": "1.5.2", "orientation": "portrait", "primaryColor": "#be1522", + "userInterfaceStyle": "automatic", "icon": "./assets/android.icon.png", "splash": { "backgroundColor": "#be1522", diff --git a/package.json b/package.json index 39ade1f..d446175 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,8 @@ "react-native-render-html": "^4.1.2", "react-native-safe-area-context": "0.6.0", "react-native-screens": "2.0.0-alpha.12", - "react-native-webview": "7.4.3" + "react-native-webview": "7.4.3", + "react-native-appearance": "~0.3.1" }, "devDependencies": { "babel-preset-expo": "^8.0.0" diff --git a/screens/SettingsScreen.js b/screens/SettingsScreen.js index 47e36f1..9d2c328 100644 --- a/screens/SettingsScreen.js +++ b/screens/SettingsScreen.js @@ -7,6 +7,7 @@ import i18n from "i18n-js"; import AsyncStorageManager from "../utils/AsyncStorageManager"; import NotificationsManager from "../utils/NotificationsManager"; import {Card, List, Switch, ToggleButton} from 'react-native-paper'; +import {Appearance} from "react-native-appearance"; type Props = { navigation: Object, @@ -14,6 +15,7 @@ type Props = { type State = { nightMode: boolean, + nightModeFollowSystem: boolean, proxiwashNotifPickerSelected: string, startScreenPickerSelected: string, }; @@ -24,6 +26,8 @@ type State = { export default class SettingsScreen extends React.Component { state = { nightMode: ThemeManager.getNightMode(), + nightModeFollowSystem: AsyncStorageManager.getInstance().preferences.nightModeFollowSystem.current === '1' && + Appearance.getColorScheme() !== 'no-preference', proxiwashNotifPickerSelected: AsyncStorageManager.getInstance().preferences.proxiwashNotifications.current, startScreenPickerSelected: AsyncStorageManager.getInstance().preferences.defaultStartScreen.current, }; @@ -31,12 +35,14 @@ export default class SettingsScreen extends React.Component { onProxiwashNotifPickerValueChange: Function; onStartScreenPickerValueChange: Function; onToggleNightMode: Function; + onToggleNightModeFollowSystem: Function; constructor() { super(); this.onProxiwashNotifPickerValueChange = this.onProxiwashNotifPickerValueChange.bind(this); this.onStartScreenPickerValueChange = this.onStartScreenPickerValueChange.bind(this); this.onToggleNightMode = this.onToggleNightMode.bind(this); + this.onToggleNightModeFollowSystem = this.onToggleNightModeFollowSystem.bind(this); } /** @@ -119,6 +125,18 @@ export default class SettingsScreen extends React.Component { this.setState({nightMode: !this.state.nightMode}); } + onToggleNightModeFollowSystem() { + const value = !this.state.nightModeFollowSystem; + this.setState({nightModeFollowSystem: value}); + let key = AsyncStorageManager.getInstance().preferences.nightModeFollowSystem.key; + AsyncStorageManager.getInstance().savePref(key, value ? '1' : '0'); + if (value) { + const nightMode = Appearance.getColorScheme() === 'dark'; + ThemeManager.getInstance().setNightMode(nightMode); + this.setState({nightMode: nightMode}); + } + } + /** * Get a list item using a checkbox control * @@ -128,7 +146,7 @@ export default class SettingsScreen extends React.Component { * @param subtitle The text to display as this list item subtitle * @returns {React.Node} */ - getToggleItem(onPressCallback: Function, icon: string, title: string, subtitle: string) { + getToggleItem(onPressCallback: Function, icon: string, title: string, subtitle: string, state: boolean) { return ( { left={props => } right={props => } /> @@ -149,14 +167,27 @@ export default class SettingsScreen extends React.Component { - {this.getToggleItem( - this.onToggleNightMode, + {Appearance.getColorScheme() !== 'no-preference' ? this.getToggleItem( + this.onToggleNightModeFollowSystem, 'theme-light-dark', - i18n.t('settingsScreen.nightMode'), + i18n.t('settingsScreen.nightModeAuto'), this.state.nightMode ? i18n.t('settingsScreen.nightModeSubOn') : - i18n.t('settingsScreen.nightModeSubOff') - )} + i18n.t('settingsScreen.nightModeSubOff'), + this.state.nightModeFollowSystem + ) : null} + { + Appearance.getColorScheme() === 'no-preference' || !this.state.nightModeFollowSystem ? + this.getToggleItem( + this.onToggleNightMode, + 'theme-light-dark', + i18n.t('settingsScreen.nightMode'), + this.state.nightMode ? + i18n.t('settingsScreen.nightModeSubOn') : + i18n.t('settingsScreen.nightModeSubOff'), + this.state.nightMode + ) : null + } Date: Mon, 9 Mar 2020 19:00:12 +0100 Subject: [PATCH 42/66] Improved dashboard event item --- components/DashboardItem.js | 190 ------------------------ components/EventDashboardItem.js | 49 ++++++ components/PreviewEventDashboardItem.js | 65 ++++++++ screens/HomeScreen.js | 30 ++-- utils/PlanningEventManager.js | 48 +++++- 5 files changed, 168 insertions(+), 214 deletions(-) delete mode 100644 components/DashboardItem.js create mode 100644 components/EventDashboardItem.js create mode 100644 components/PreviewEventDashboardItem.js diff --git a/components/DashboardItem.js b/components/DashboardItem.js deleted file mode 100644 index 7e61752..0000000 --- a/components/DashboardItem.js +++ /dev/null @@ -1,190 +0,0 @@ -// @flow - -import * as React from 'react'; -import {MaterialCommunityIcons} from "@expo/vector-icons"; -import {View} from "react-native"; -import ThemeManager from "../utils/ThemeManager"; -import HTML from "react-native-render-html"; -import {LinearGradient} from "expo-linear-gradient"; -import i18n from "i18n-js"; -import {Avatar, Card, Text} from 'react-native-paper'; - -type Props = { - isAvailable: boolean, - icon: string, - color: string, - title: string, - subtitle: React.Node, - clickAction: Function, - isSquare: boolean, - isSquareLeft: boolean, - displayEvent: ?Object, -} - -export default class DashboardItem extends React.Component { - static defaultProps = { - isSquare: false, - isSquareLeft: true, - displayEvent: undefined, - }; - - getIcon: Function; - - constructor() { - super(); - this.getIcon = this.getIcon.bind(this); - } - - /** - * Convert the date string given by in the event list json to a date object - * @param dateString - * @return {Date} - */ - stringToDate(dateString: ?string): ?Date { - let date = new Date(); - if (dateString === undefined || dateString === null) - date = undefined; - else if (dateString.split(' ').length > 1) { - let timeStr = dateString.split(' ')[1]; - date.setHours(parseInt(timeStr.split(':')[0]), parseInt(timeStr.split(':')[1]), 0); - } else - date = undefined; - return date; - } - - padStr(i: number) { - return (i < 10) ? "0" + i : "" + i; - } - - getFormattedEventTime(event: Object): string { - let formattedStr = ''; - let startDate = this.stringToDate(event['date_begin']); - let endDate = this.stringToDate(event['date_end']); - if (startDate !== undefined && startDate !== null && endDate !== undefined && endDate !== null) - formattedStr = this.padStr(startDate.getHours()) + ':' + this.padStr(startDate.getMinutes()) + - ' - ' + this.padStr(endDate.getHours()) + ':' + this.padStr(endDate.getMinutes()); - else if (startDate !== undefined && startDate !== null) - formattedStr = this.padStr(startDate.getHours()) + ':' + this.padStr(startDate.getMinutes()); - return formattedStr - } - - getEventPreviewContainer() { - if (this.props.displayEvent !== undefined && this.props.displayEvent !== null) { - const hasImage = this.props.displayEvent['logo'] !== '' && this.props.displayEvent['logo'] !== null; - const getImage = () => ; - return ( - - {hasImage ? - : - } - - 70 ? 100 : 50, - overflow: 'hidden', - }}> - " + this.props.displayEvent['description'] + ""} - tagsStyles={{ - p: { - color: ThemeManager.getCurrentThemeVariables().text, - }, - div: {color: ThemeManager.getCurrentThemeVariables().text}, - }}/> - - - - - - {i18n.t("homeScreen.dashboard.seeMore")} - - - - - - - ); - } else - return - } - - getIcon() { - return ( - - ); - } - - render() { - // console.log("rendering DashboardItem " + this.props.title); - let marginRight = 10; - if (this.props.isSquare) { - if (this.props.isSquareLeft) - marginRight = '4%'; - else - marginRight = 0 - } - const color = this.props.isAvailable ? - ThemeManager.getCurrentThemeVariables().text : - ThemeManager.getCurrentThemeVariables().textDisabled; - return ( - - - - - {this.getEventPreviewContainer()} - - - ); - } -} diff --git a/components/EventDashboardItem.js b/components/EventDashboardItem.js new file mode 100644 index 0000000..a265caa --- /dev/null +++ b/components/EventDashboardItem.js @@ -0,0 +1,49 @@ +// @flow + +import * as React from 'react'; +import {Avatar, Card, withTheme} from 'react-native-paper'; + +function getIcon(icon, color) { + return ( + + ); +} + +function EventDashBoardItem(props) { + const {colors} = props.theme; + const iconColor = props.isAvailable ? + colors.planningColor : + colors.textDisabled; + const textColor = props.isAvailable ? + colors.text : + colors.textDisabled; + return ( + + + getIcon(props.icon, iconColor)} + /> + + {props.children} + + + ); +} + +export default withTheme(EventDashBoardItem); diff --git a/components/PreviewEventDashboardItem.js b/components/PreviewEventDashboardItem.js new file mode 100644 index 0000000..e8322bb --- /dev/null +++ b/components/PreviewEventDashboardItem.js @@ -0,0 +1,65 @@ +// @flow + +import * as React from 'react'; +import {MaterialCommunityIcons} from "@expo/vector-icons"; +import {View} from "react-native"; +import HTML from "react-native-render-html"; +import i18n from "i18n-js"; +import {Avatar, Card, Text, withTheme, Button} from 'react-native-paper'; +import PlanningEventManager from "../utils/PlanningEventManager"; + + +function PreviewEventDashboardItem(props) { + const {colors} = props.theme; + + if (props.event !== undefined && props.event !== null) { + const hasImage = props.event['logo'] !== '' && props.event['logo'] !== null; + const getImage = () => ; + return ( + + {hasImage ? + : + } + 70 ? 100 : 50, + overflow: 'hidden', + }}> + " + props.event['description'] + ""} + tagsStyles={{ + p: {color: colors.text,}, + div: {color: colors.text}, + }}/> + + + + + + + ); + } else + return +} + +export default withTheme(PreviewEventDashboardItem); diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js index 69e6639..5cfd4be 100644 --- a/screens/HomeScreen.js +++ b/screens/HomeScreen.js @@ -5,12 +5,13 @@ import {TouchableOpacity, View} from 'react-native'; import i18n from "i18n-js"; import Autolink from 'react-native-autolink'; import ThemeManager from "../utils/ThemeManager"; -import DashboardItem from "../components/DashboardItem"; +import DashboardItem from "../components/EventDashboardItem"; import * as WebBrowser from 'expo-web-browser'; import WebSectionList from "../components/WebSectionList"; import {Avatar, Button, Card, Text} from 'react-native-paper'; import FeedItem from "../components/FeedItem"; import SquareDashboardItem from "../components/SquareDashboardItem"; +import PreviewEventDashboardItem from "../components/PreviewEventDashboardItem"; // import DATA from "../dashboard_data.json"; @@ -24,8 +25,6 @@ const SECTIONS_ID = [ const REFRESH_TIME = 1000 * 20; // Refresh every 20 seconds -const CARD_BORDER_RADIUS = 10; - type Props = { navigation: Object, } @@ -288,17 +287,8 @@ export default class HomeScreen extends React.Component { } - clickAction(isAvailable: boolean, displayEvent: Object) { - if (isAvailable) - this.props.navigation.navigate('PlanningDisplayScreen', {data: displayEvent}); - else - this.props.navigation.navigate('Planning'); - }; - - getDashboardEventItem(content: Array) { let icon = 'calendar-range'; - let color = ThemeManager.getCurrentThemeVariables().planningColor; let title = i18n.t('homeScreen.dashboard.todayEventsTitle'); let subtitle; let futureEvents = this.getFutureEvents(content); @@ -319,17 +309,23 @@ export default class HomeScreen extends React.Component { subtitle = i18n.t('homeScreen.dashboard.todayEventsSubtitleNA'); let displayEvent = this.getDisplayEvent(futureEvents); - const clickAction = this.clickAction.bind(this, isAvailable, displayEvent); + const clickContainerAction = () => this.props.navigation.navigate('Planning'); + const clickPreviewAction = () => this.props.navigation.navigate('PlanningDisplayScreen', {data: displayEvent});; return ( + > + + ); } diff --git a/utils/PlanningEventManager.js b/utils/PlanningEventManager.js index a853057..2206e01 100644 --- a/utils/PlanningEventManager.js +++ b/utils/PlanningEventManager.js @@ -3,9 +3,9 @@ export default class PlanningEventManager { static isEventBefore(event1: Object, event2: Object) { let date1 = new Date(); let date2 = new Date(); - let timeArray = this.getEventStartTime(event1).split(":"); + let timeArray = PlanningEventManager.getEventStartTime(event1).split(":"); date1.setHours(parseInt(timeArray[0]), parseInt(timeArray[1])); - timeArray = this.getEventStartTime(event2).split(":"); + timeArray = PlanningEventManager.getEventStartTime(event2).split(":"); date2.setHours(parseInt(timeArray[0]), parseInt(timeArray[1])); return date1 < date2; } @@ -16,27 +16,61 @@ export default class PlanningEventManager { static getEventStartTime(event: Object) { if (event !== undefined && Object.keys(event).length > 0 && event.date_begin !== null) - return this.formatTime(event.date_begin.split(" ")[1]); + return PlanningEventManager.formatTime(event.date_begin.split(" ")[1]); else return ""; } static getEventEndTime(event: Object) { if (event !== undefined && Object.keys(event).length > 0 && event.date_end !== null) - return this.formatTime(event.date_end.split(" ")[1]); + return PlanningEventManager.formatTime(event.date_end.split(" ")[1]); else return ""; } static getFormattedTime(event: Object) { - if (this.getEventEndTime(event) !== "") - return this.getEventStartTime(event) + " - " + this.getEventEndTime(event); + if (PlanningEventManager.getEventEndTime(event) !== "") + return PlanningEventManager.getEventStartTime(event) + " - " + PlanningEventManager.getEventEndTime(event); else - return this.getEventStartTime(event); + return PlanningEventManager.getEventStartTime(event); } static formatTime(time: string) { let array = time.split(':'); return array[0] + ':' + array[1]; } + + /** + * Convert the date string given by in the event list json to a date object + * @param dateString + * @return {Date} + */ + static stringToDate(dateString: ?string): ?Date { + let date = new Date(); + if (dateString === undefined || dateString === null) + date = undefined; + else if (dateString.split(' ').length > 1) { + let timeStr = dateString.split(' ')[1]; + date.setHours(parseInt(timeStr.split(':')[0]), parseInt(timeStr.split(':')[1]), 0); + } else + date = undefined; + return date; + } + + static padStr(i: number) { + return (i < 10) ? "0" + i : "" + i; + } + + static getFormattedEventTime(event: Object): string { + let formattedStr = ''; + let startDate = PlanningEventManager.stringToDate(event['date_begin']); + let endDate = PlanningEventManager.stringToDate(event['date_end']); + if (startDate !== undefined && startDate !== null && endDate !== undefined && endDate !== null) + formattedStr = PlanningEventManager.padStr(startDate.getHours()) + ':' + PlanningEventManager.padStr(startDate.getMinutes()) + + ' - ' + PlanningEventManager.padStr(endDate.getHours()) + ':' + PlanningEventManager.padStr(endDate.getMinutes()); + else if (startDate !== undefined && startDate !== null) + formattedStr = PlanningEventManager.padStr(startDate.getHours()) + ':' + PlanningEventManager.padStr(startDate.getMinutes()); + return formattedStr + } + } From 1bc0b312837ea15057551fde05b9a11f4b133623 Mon Sep 17 00:00:00 2001 From: keplyx Date: Mon, 9 Mar 2020 19:18:10 +0100 Subject: [PATCH 43/66] Improved AF --- screens/About/AboutScreen.js | 6 ++++- screens/Planning/PlanningScreen.js | 3 --- utils/AprilFoolsManager.js | 36 +++++++++--------------------- utils/ThemeManager.js | 2 +- 4 files changed, 17 insertions(+), 30 deletions(-) diff --git a/screens/About/AboutScreen.js b/screens/About/AboutScreen.js index 69edff9..3c00b05 100644 --- a/screens/About/AboutScreen.js +++ b/screens/About/AboutScreen.js @@ -201,7 +201,11 @@ export default class AboutScreen extends React.Component { }/> + left={(props) => }/> { this.pushEventInOrder(agendaItems, eventList[i], PlanningEventManager.getEventStartDate(eventList[i])); } } - if (AprilFoolsManager.getInstance().isAprilFoolsEnabled()) - agendaItems["2020-04-01"].push(AprilFoolsManager.getFakeEvent()); this.setState({agendaItems: agendaItems}) } diff --git a/utils/AprilFoolsManager.js b/utils/AprilFoolsManager.js index c664210..cf00f31 100644 --- a/utils/AprilFoolsManager.js +++ b/utils/AprilFoolsManager.js @@ -24,27 +24,13 @@ export default class AprilFoolsManager { AprilFoolsManager.instance; } - static getFakeEvent() { - return { - category_id: 1, - club: "Coucou", - date_begin: "2020-04-01 20:30:00", - date_end: "2020-04-01 23:59:00", - description: "Trop génial", - id: "-1", - logo: null, - title: "Super event trop whoaou", - url: null - }; - } - static getFakeMenuItem(menu: Object) { if (menu[1]["dishes"].length >= 3) { - menu[1]["dishes"].splice(0, 0, {name: "Truc à la con"}); - menu[1]["dishes"].splice(2, 0, {name: "Autre truc à la con"}); + menu[1]["dishes"].splice(0, 0, {name: "Coq au vin"}); + menu[1]["dishes"].splice(2, 0, {name: "Pave de loup"}); } else { - menu[1]["dishes"].push({name: "Truc à la con"}); - menu[1]["dishes"].push({name: "Autre truc à la con"}); + menu[1]["dishes"].push({name: "Coq au vin"}); + menu[1]["dishes"].push({name: "Pave de loup"}); } return menu; } @@ -54,13 +40,13 @@ export default class AprilFoolsManager { ...currentTheme, colors: { ...currentTheme.colors, - primary: '#bebe03', - accent: '#bebe03', - background: '#5b3e02', - tabBackground: "#5b3e02", - card: "#5b3e02", - surface: "#5b3e02", - dividerBackground: '#362201', + primary: '#00be45', + accent: '#00be45', + background: '#50005b', + tabBackground: "#50005b", + card: "#50005b", + surface: "#50005b", + dividerBackground: '#3e0047', textDisabled: '#b9b9b9', // Calendar/Agenda diff --git a/utils/ThemeManager.js b/utils/ThemeManager.js index f51360c..3faaa40 100644 --- a/utils/ThemeManager.js +++ b/utils/ThemeManager.js @@ -120,7 +120,7 @@ export default class ThemeManager { */ static getCurrentTheme(): Object { if (AprilFoolsManager.getInstance().isAprilFoolsEnabled()) - return AprilFoolsManager.getAprilFoolsTheme(ThemeManager.getBaseTheme()); + return AprilFoolsManager.getAprilFoolsTheme(ThemeManager.getDarkTheme()); else return ThemeManager.getBaseTheme() } From da24621c67833ff9fde1f97e7b7dd1015b9d88d0 Mon Sep 17 00:00:00 2001 From: keplyx Date: Mon, 9 Mar 2020 22:02:09 +0100 Subject: [PATCH 44/66] Improved AF + improved dashboard buttons --- components/CustomIntroSlider.js | 2 +- components/SquareDashboardItem.js | 70 ++++------ screens/HomeScreen.js | 218 +++++++----------------------- utils/AprilFoolsManager.js | 25 ++-- utils/ThemeManager.js | 2 +- 5 files changed, 88 insertions(+), 229 deletions(-) diff --git a/components/CustomIntroSlider.js b/components/CustomIntroSlider.js index 9ca2e50..47a467f 100644 --- a/components/CustomIntroSlider.js +++ b/components/CustomIntroSlider.js @@ -116,7 +116,7 @@ export default class CustomIntroSlider extends React.Component { key: '1', title: i18n.t('intro.aprilFoolsSlide.title'), text: i18n.t('intro.aprilFoolsSlide.text'), - icon: 'information', + icon: 'fish', colors: ['#e01928', '#be1522'], }, ]; diff --git a/components/SquareDashboardItem.js b/components/SquareDashboardItem.js index c071bce..da23cfb 100644 --- a/components/SquareDashboardItem.js +++ b/components/SquareDashboardItem.js @@ -1,54 +1,32 @@ import * as React from 'react'; -import {Card, Text, Title, withTheme} from 'react-native-paper'; +import {Badge, IconButton, withTheme} from 'react-native-paper'; import {View} from "react-native"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; function SquareDashboardItem(props) { - const { colors } = props.theme; + const {colors} = props.theme; return ( - - - - - - - - {props.title} - - - {props.subtitle} - - - - + + + { + props.badgeNumber > 0 ? + {props.badgeNumber} : null + } + + ); } diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js index 5cfd4be..be79447 100644 --- a/screens/HomeScreen.js +++ b/screens/HomeScreen.js @@ -1,14 +1,13 @@ // @flow import * as React from 'react'; -import {TouchableOpacity, View} from 'react-native'; +import {View} from 'react-native'; import i18n from "i18n-js"; -import Autolink from 'react-native-autolink'; import ThemeManager from "../utils/ThemeManager"; import DashboardItem from "../components/EventDashboardItem"; import * as WebBrowser from 'expo-web-browser'; import WebSectionList from "../components/WebSectionList"; -import {Avatar, Button, Card, Text} from 'react-native-paper'; +import {Text} from 'react-native-paper'; import FeedItem from "../components/FeedItem"; import SquareDashboardItem from "../components/SquareDashboardItem"; import PreviewEventDashboardItem from "../components/PreviewEventDashboardItem"; @@ -109,36 +108,32 @@ export default class HomeScreen extends React.Component { generateDashboardDataset(dashboardData: Object) { let dataset = [ + + { + id: 'middle', + content: [] + }, { id: 'event', content: undefined }, - { - id: 'middle', - content: [{}, {}] - }, - { - id: 'bottom', - content: [{}, {}] - }, - ]; for (let [key, value] of Object.entries(dashboardData)) { switch (key) { case 'today_events': - dataset[0]['content'] = value; + dataset[1]['content'] = value; break; case 'available_machines': - dataset[1]['content'][0] = {id: key, data: value}; + dataset[0]['content'][0] = {id: key, data: value}; break; case 'available_tutorials': - dataset[1]['content'][1] = {id: key, data: value}; + dataset[0]['content'][1] = {id: key, data: value}; break; case 'proximo_articles': - dataset[2]['content'][0] = {id: key, data: value}; + dataset[0]['content'][2] = {id: key, data: value}; break; case 'today_menu': - dataset[2]['content'][1] = {id: key, data: value}; + dataset[0]['content'][3] = {id: key, data: value}; break; } @@ -152,8 +147,6 @@ export default class HomeScreen extends React.Component { return this.getDashboardEventItem(content); else if (item['id'] === 'middle') return this.getDashboardMiddleItem(content); - else - return this.getDashboardBottomItem(content); } /** @@ -310,7 +303,8 @@ export default class HomeScreen extends React.Component { let displayEvent = this.getDisplayEvent(futureEvents); const clickContainerAction = () => this.props.navigation.navigate('Planning'); - const clickPreviewAction = () => this.props.navigation.navigate('PlanningDisplayScreen', {data: displayEvent});; + const clickPreviewAction = () => this.props.navigation.navigate('PlanningDisplayScreen', {data: displayEvent}); + return ( { } - getDashboardBottomItem(content: Array) { - let proximoData = content[0]['data']; - let menuData = content[1]['data']; - let proximoIcon = 'shopping'; - let proximoColor = ThemeManager.getCurrentThemeVariables().proximoColor; - let proximoTitle = i18n.t('homeScreen.dashboard.proximoTitle'); - let isProximoAvailable = parseInt(proximoData) > 0; - let proximoSubtitle; - if (isProximoAvailable) { - proximoSubtitle = - - {proximoData} - - { - proximoData > 1 ? - i18n.t('homeScreen.dashboard.proximoSubtitlePlural') : - i18n.t('homeScreen.dashboard.proximoSubtitle') - } - - ; - } else - proximoSubtitle = i18n.t('homeScreen.dashboard.proximoSubtitleNA'); - - - let menuIcon = 'silverware-fork-knife'; - let menuColor = ThemeManager.getCurrentThemeVariables().menuColor; - let menuTitle = i18n.t('homeScreen.dashboard.menuTitle'); - let isMenuAvailable = menuData.length > 0; - let menuSubtitle; - if (isMenuAvailable) { - menuSubtitle = i18n.t('homeScreen.dashboard.menuSubtitle'); - } else - menuSubtitle = i18n.t('homeScreen.dashboard.menuSubtitleNA'); - return ( - - - - - ); - } - - getDashboardMiddleItem(content: Array) { let proxiwashData = content[0]['data']; let tutorinsaData = content[1]['data']; - - let proxiwashIcon = 'washing-machine'; - let proxiwashColor = ThemeManager.getCurrentThemeVariables().proxiwashColor; - let proxiwashTitle = i18n.t('homeScreen.dashboard.proxiwashTitle'); - let proxiwashIsAvailable = parseInt(proxiwashData['dryers']) > 0 || parseInt(proxiwashData['washers']) > 0; - let proxiwashSubtitle; - let dryerColor = parseInt(proxiwashData['dryers']) > 0 ? - ThemeManager.getCurrentThemeVariables().text : - ThemeManager.getCurrentThemeVariables().textDisabled; - let washerColor = parseInt(proxiwashData['washers']) > 0 ? - ThemeManager.getCurrentThemeVariables().text : - ThemeManager.getCurrentThemeVariables().textDisabled; - let availableDryers = proxiwashData['dryers']; - let availableWashers = proxiwashData['washers']; - if (proxiwashIsAvailable) { - proxiwashSubtitle = - - 0 ? - 'bold' : - 'normal', - color: dryerColor - }}> - {availableDryers} - - - { - availableDryers > 1 ? - i18n.t('homeScreen.dashboard.proxiwashSubtitle1Plural') : - i18n.t('homeScreen.dashboard.proxiwashSubtitle1') - } - - {"\n"} - 0 ? - 'bold' : - 'normal', - color: washerColor - }}> - {availableWashers} - - - { - availableWashers > 1 ? - i18n.t('homeScreen.dashboard.proxiwashSubtitle2Plural') : - i18n.t('homeScreen.dashboard.proxiwashSubtitle2') - } - - ; - } else - proxiwashSubtitle = i18n.t('homeScreen.dashboard.proxiwashSubtitleNA'); - - let tutorinsaIcon = 'school'; - let tutorinsaColor = ThemeManager.getCurrentThemeVariables().tutorinsaColor; - let tutorinsaTitle = 'Tutor\'INSA'; - let tutorinsaIsAvailable = tutorinsaData > 0; - let tutorinsaSubtitle; - if (tutorinsaIsAvailable) { - tutorinsaSubtitle = - - {tutorinsaData} - - { - tutorinsaData > 1 ? - i18n.t('homeScreen.dashboard.tutorinsaSubtitlePlural') : - i18n.t('homeScreen.dashboard.tutorinsaSubtitle') - } - - ; - } else - tutorinsaSubtitle = i18n.t('homeScreen.dashboard.tutorinsaSubtitleNA'); - + let proximoData = content[2]['data']; + let menuData = content[3]['data']; return ( + isAvailable={parseInt(proxiwashData['washers']) > 0} + badgeNumber={proxiwashData['washers']} + /> 0} + badgeNumber={proxiwashData['dryers']} + /> + + isAvailable={tutorinsaData > 0} + badgeNumber={tutorinsaData} + /> + 0} + badgeNumber={parseInt(proximoData)} + /> + 0} + badgeNumber={0} + /> ); } diff --git a/utils/AprilFoolsManager.js b/utils/AprilFoolsManager.js index cf00f31..c2b97b0 100644 --- a/utils/AprilFoolsManager.js +++ b/utils/AprilFoolsManager.js @@ -25,32 +25,29 @@ export default class AprilFoolsManager { } static getFakeMenuItem(menu: Object) { - if (menu[1]["dishes"].length >= 3) { - menu[1]["dishes"].splice(0, 0, {name: "Coq au vin"}); - menu[1]["dishes"].splice(2, 0, {name: "Pave de loup"}); - } else { - menu[1]["dishes"].push({name: "Coq au vin"}); - menu[1]["dishes"].push({name: "Pave de loup"}); - } + menu[1]["dishes"].splice(2, 0, {name: "Coq au vin"}); + menu[1]["dishes"].splice(1, 0, {name: "Pave de loup"}); + menu[1]["dishes"].splice(0, 0, {name: "Béranger à point"}); + menu[1]["dishes"].splice(0, 0, {name: "Pieds d'Arnaud"}); return menu; } - static getAprilFoolsTheme(currentTheme : Object) { + static getAprilFoolsTheme(currentTheme: Object) { return { ...currentTheme, colors: { ...currentTheme.colors, primary: '#00be45', accent: '#00be45', - background: '#50005b', - tabBackground: "#50005b", - card: "#50005b", - surface: "#50005b", - dividerBackground: '#3e0047', + background: '#d02eee', + tabIcon: "#380d43", + card: "#eed639", + surface: "#eed639", + dividerBackground: '#c72ce4', textDisabled: '#b9b9b9', // Calendar/Agenda - agendaBackgroundColor: '#5b3e02', + agendaBackgroundColor: '#c72ce4', agendaDayTextColor: '#6d6d6d', }, }; diff --git a/utils/ThemeManager.js b/utils/ThemeManager.js index 3faaa40..91fd936 100644 --- a/utils/ThemeManager.js +++ b/utils/ThemeManager.js @@ -120,7 +120,7 @@ export default class ThemeManager { */ static getCurrentTheme(): Object { if (AprilFoolsManager.getInstance().isAprilFoolsEnabled()) - return AprilFoolsManager.getAprilFoolsTheme(ThemeManager.getDarkTheme()); + return AprilFoolsManager.getAprilFoolsTheme(ThemeManager.getWhiteTheme()); else return ThemeManager.getBaseTheme() } From 7bac5a6ddc7a54c36d9c3d5dce507a5abdf7d3cb Mon Sep 17 00:00:00 2001 From: keplyx Date: Mon, 9 Mar 2020 23:15:13 +0100 Subject: [PATCH 45/66] Improved theme handling and performance --- components/PreviewEventDashboardItem.js | 43 ++++++----- components/ProxiwashListItem.js | 2 +- components/Sidebar.js | 7 +- components/WebSectionList.js | 2 +- components/WebViewScreen.js | 80 +++++++++------------ screens/About/AboutScreen.js | 16 +++-- screens/About/DebugScreen.js | 16 +++-- screens/HomeScreen.js | 25 ++++--- screens/Planning/PlanningDisplayScreen.js | 17 +++-- screens/Proximo/ProximoAboutScreen.js | 2 +- screens/Proximo/ProximoListScreen.js | 22 +++--- screens/Proximo/ProximoMainScreen.js | 15 ++-- screens/Proxiwash/ProxiwashAboutScreen.js | 2 +- screens/Proxiwash/ProxiwashScreen.js | 88 ++++++++++++----------- screens/SelfMenuScreen.js | 14 ++-- utils/ThemeManager.js | 8 --- 16 files changed, 183 insertions(+), 176 deletions(-) diff --git a/components/PreviewEventDashboardItem.js b/components/PreviewEventDashboardItem.js index e8322bb..d3781ed 100644 --- a/components/PreviewEventDashboardItem.js +++ b/components/PreviewEventDashboardItem.js @@ -1,11 +1,10 @@ // @flow import * as React from 'react'; -import {MaterialCommunityIcons} from "@expo/vector-icons"; import {View} from "react-native"; import HTML from "react-native-render-html"; import i18n from "i18n-js"; -import {Avatar, Card, Text, withTheme, Button} from 'react-native-paper'; +import {Avatar, Button, Card, withTheme} from 'react-native-paper'; import PlanningEventManager from "../utils/PlanningEventManager"; @@ -34,28 +33,28 @@ function PreviewEventDashboardItem(props) { title={props.event['title']} subtitle={PlanningEventManager.getFormattedEventTime(props.event)} />} - 70 ? 100 : 50, - overflow: 'hidden', - }}> - " + props.event['description'] + ""} - tagsStyles={{ - p: {color: colors.text,}, - div: {color: colors.text}, - }}/> + 70 ? 100 : 50, + overflow: 'hidden', + }}> + " + props.event['description'] + ""} + tagsStyles={{ + p: {color: colors.text,}, + div: {color: colors.text}, + }}/> - - - - + > + {i18n.t("homeScreen.dashboard.seeMore")} + + ); } else diff --git a/components/ProxiwashListItem.js b/components/ProxiwashListItem.js index 2accefa..1e6f2c2 100644 --- a/components/ProxiwashListItem.js +++ b/components/ProxiwashListItem.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import {Card, Avatar, List, Text, withTheme} from 'react-native-paper'; +import {Avatar, Card, Text, withTheme} from 'react-native-paper'; import {View} from "react-native"; import ProxiwashConstants from "../constants/ProxiwashConstants"; diff --git a/components/Sidebar.js b/components/Sidebar.js index d6805c8..4f8fb9f 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -21,7 +21,7 @@ type State = { /** * Class used to define a navigation drawer */ -export default class SideBar extends React.Component { +export default class SideBar extends React.PureComponent { dataSet: Array; @@ -122,11 +122,6 @@ export default class SideBar extends React.Component { this.getRenderItem = this.getRenderItem.bind(this); } - shouldComponentUpdate(nextProps: Props, nextState: State): boolean { - return nextState.active !== this.state.active; - } - - onListItemPress(item: Object) { if (item.link === undefined) this.props.navigation.navigate(item.route); diff --git a/components/WebSectionList.js b/components/WebSectionList.js index 13bc60e..481a9e1 100644 --- a/components/WebSectionList.js +++ b/components/WebSectionList.js @@ -36,7 +36,7 @@ const MIN_REFRESH_TIME = 5 * 1000; * @prop fontSize {number} The icon size. Use 26 if unspecified * @prop width {number} The icon width. Use 30 if unspecified */ -export default class WebSectionList extends React.Component { +export default class WebSectionList extends React.PureComponent { static defaultProps = { renderSectionHeader: null, diff --git a/components/WebViewScreen.js b/components/WebViewScreen.js index 24fd705..bdeb5b5 100644 --- a/components/WebViewScreen.js +++ b/components/WebViewScreen.js @@ -3,8 +3,7 @@ import * as React from 'react'; import {View} from 'react-native'; import WebView from "react-native-webview"; -import ThemeManager from "../utils/ThemeManager"; -import {ActivityIndicator} from 'react-native-paper'; +import {ActivityIndicator, withTheme} from 'react-native-paper'; import HeaderButton from "./HeaderButton"; type Props = { @@ -24,28 +23,31 @@ type Props = { /** * Class defining a webview screen. */ -export default class WebViewScreen extends React.Component { +class WebViewScreen extends React.PureComponent { static defaultProps = { hasBackButton: false, hasSideMenu: true, hasFooter: true, }; - webviewArray: Array = []; + webviewRef: Object; onRefreshClicked: Function; onWebviewRef: Function; onGoBackWebview: Function; onGoForwardWebview: Function; - onOpenWebLink: Function; + getRenderLoading: Function; - constructor() { - super(); + colors: Object; + + constructor(props) { + super(props); this.onRefreshClicked = this.onRefreshClicked.bind(this); this.onWebviewRef = this.onWebviewRef.bind(this); this.onGoBackWebview = this.onGoBackWebview.bind(this); this.onGoForwardWebview = this.onGoForwardWebview.bind(this); - this.onOpenWebLink = this.onOpenWebLink.bind(this); + this.getRenderLoading = this.getRenderLoading.bind(this); + this.colors = props.theme.colors; } componentDidMount() { @@ -73,38 +75,28 @@ export default class WebViewScreen extends React.Component { }; onRefreshClicked() { - for (let view of this.webviewArray) { - if (view !== null) - view.reload(); - } + if (this.webviewRef !== null) + this.webviewRef.reload(); } onGoBackWebview() { - for (let view of this.webviewArray) { - if (view !== null) - view.goBack(); - } + if (this.webviewRef !== null) + this.webviewRef.goBack(); } onGoForwardWebview() { - for (let view of this.webviewArray) { - if (view !== null) - view.goForward(); - } + if (this.webviewRef !== null) + this.webviewRef.goForward(); } - onOpenWebLink() { - this.openWebLink(this.props.data[0]['url']) - } - - onWebviewRef(ref: WebView) { - this.webviewArray.push(ref) + onWebviewRef(ref: Object) { + this.webviewRef = ref } getRenderLoading() { return ( { + color={this.colors.primary}/> ); } - getWebview(obj: Object) { - return ( - - ); - } - render() { // console.log("rendering WebViewScreen"); - this.webviewArray = []; return ( - this.getWebview(this.props.data[0]) + ); } } +export default withTheme(WebViewScreen); diff --git a/screens/About/AboutScreen.js b/screens/About/AboutScreen.js index 3c00b05..d93fb0c 100644 --- a/screens/About/AboutScreen.js +++ b/screens/About/AboutScreen.js @@ -6,8 +6,7 @@ import i18n from "i18n-js"; import appJson from '../../app'; import AsyncStorageManager from "../../utils/AsyncStorageManager"; import CustomModal from "../../components/CustomModal"; -import ThemeManager from "../../utils/ThemeManager"; -import {Avatar, Button, Card, List, Text, Title} from 'react-native-paper'; +import {Avatar, Button, Card, List, Text, Title, withTheme} from 'react-native-paper'; const links = { appstore: 'https://apps.apple.com/us/app/campus-amicale-insat/id1477722148', @@ -59,7 +58,7 @@ function openWebLink(link) { /** * Class defining an about screen. This screen shows the user information about the app and it's author. */ -export default class AboutScreen extends React.Component { +class AboutScreen extends React.Component { debugTapCounter = 0; modalRef: Object; @@ -188,11 +187,14 @@ export default class AboutScreen extends React.Component { getMainCard: Function; onModalRef: Function; - constructor(props: any) { + colors: object; + + constructor(props) { super(props); this.getCardItem = this.getCardItem.bind(this); this.getMainCard = this.getMainCard.bind(this); this.onModalRef = this.onModalRef.bind(this); + this.colors = props.theme.colors; } getAppCard() { @@ -326,7 +328,7 @@ export default class AboutScreen extends React.Component { icon="email" mode="contained" dark={true} - color={ThemeManager.getCurrentThemeVariables().primary} + color={this.colors.primary} style={{ marginTop: 20, marginLeft: 'auto', @@ -339,7 +341,7 @@ export default class AboutScreen extends React.Component { icon="git" mode="contained" dark={true} - color={ThemeManager.getCurrentThemeVariables().primary} + color={this.colors.primary} style={{ marginTop: 20, marginLeft: 'auto', @@ -391,3 +393,5 @@ export default class AboutScreen extends React.Component { ); } } + +export default withTheme(AboutScreen); diff --git a/screens/About/DebugScreen.js b/screens/About/DebugScreen.js index 98e1565..09df31e 100644 --- a/screens/About/DebugScreen.js +++ b/screens/About/DebugScreen.js @@ -1,12 +1,11 @@ // @flow import * as React from 'react'; -import ThemeManager from '../../utils/ThemeManager'; import {Alert, Clipboard, ScrollView, View} from "react-native"; import AsyncStorageManager from "../../utils/AsyncStorageManager"; import NotificationsManager from "../../utils/NotificationsManager"; import CustomModal from "../../components/CustomModal"; -import {Button, Card, List, Subheading, TextInput, Title} from 'react-native-paper'; +import {Button, Card, List, Subheading, TextInput, Title, withTheme} from 'react-native-paper'; type Props = { navigation: Object, @@ -20,7 +19,7 @@ type State = { /** * Class defining the Debug screen. This screen allows the user to get detailed information on the app/device. */ -export default class DebugScreen extends React.Component { +class DebugScreen extends React.Component { modalRef: Object; modalInputValue = ''; @@ -31,9 +30,12 @@ export default class DebugScreen extends React.Component { onModalRef: Function; - constructor(props: any) { + colors: Object; + + constructor(props) { super(props); this.onModalRef = this.onModalRef.bind(this); + this.colors = props.theme.colors; } static getGeneralItem(onPressCallback: Function, icon: ?string, title: string, subtitle: string) { @@ -103,14 +105,14 @@ export default class DebugScreen extends React.Component { @@ -166,3 +168,5 @@ export default class DebugScreen extends React.Component { ); } } + +export default withTheme(DebugScreen); diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js index be79447..464f196 100644 --- a/screens/HomeScreen.js +++ b/screens/HomeScreen.js @@ -3,11 +3,10 @@ import * as React from 'react'; import {View} from 'react-native'; import i18n from "i18n-js"; -import ThemeManager from "../utils/ThemeManager"; import DashboardItem from "../components/EventDashboardItem"; import * as WebBrowser from 'expo-web-browser'; import WebSectionList from "../components/WebSectionList"; -import {Text} from 'react-native-paper'; +import {Text, withTheme} from 'react-native-paper'; import FeedItem from "../components/FeedItem"; import SquareDashboardItem from "../components/SquareDashboardItem"; import PreviewEventDashboardItem from "../components/PreviewEventDashboardItem"; @@ -26,12 +25,13 @@ const REFRESH_TIME = 1000 * 20; // Refresh every 20 seconds type Props = { navigation: Object, + theme: Object, } /** * Class defining the app's home screen */ -export default class HomeScreen extends React.Component { +class HomeScreen extends React.Component { onProxiwashClick: Function; onTutorInsaClick: Function; @@ -40,14 +40,17 @@ export default class HomeScreen extends React.Component { getRenderItem: Function; createDataset: Function; - constructor() { - super(); + colors : Object; + + constructor(props) { + super(props); this.onProxiwashClick = this.onProxiwashClick.bind(this); this.onTutorInsaClick = this.onTutorInsaClick.bind(this); this.onMenuClick = this.onMenuClick.bind(this); this.onProximoClick = this.onProximoClick.bind(this); this.getRenderItem = this.getRenderItem.bind(this); this.createDataset = this.createDataset.bind(this); + this.colors = props.theme.colors; } /** @@ -338,35 +341,35 @@ export default class HomeScreen extends React.Component { margin: 10, }}> 0} badgeNumber={proxiwashData['washers']} /> 0} badgeNumber={proxiwashData['dryers']} /> 0} badgeNumber={tutorinsaData} /> 0} badgeNumber={parseInt(proximoData)} /> 0} @@ -413,3 +416,5 @@ export default class HomeScreen extends React.Component { ); } } + +export default withTheme(HomeScreen); diff --git a/screens/Planning/PlanningDisplayScreen.js b/screens/Planning/PlanningDisplayScreen.js index 9caf9a8..bbb4a2b 100644 --- a/screens/Planning/PlanningDisplayScreen.js +++ b/screens/Planning/PlanningDisplayScreen.js @@ -6,7 +6,7 @@ import ThemeManager from "../../utils/ThemeManager"; import HTML from "react-native-render-html"; import {Linking} from "expo"; import PlanningEventManager from '../../utils/PlanningEventManager'; -import {Card} from 'react-native-paper'; +import {Card, withTheme} from 'react-native-paper'; type Props = { navigation: Object, @@ -20,10 +20,17 @@ function openWebLink(event, link) { /** * Class defining an about screen. This screen shows the user information about the app and it's author. */ -export default class PlanningDisplayScreen extends React.Component { +class PlanningDisplayScreen extends React.Component { displayData = this.props.route.params['data']; + colors: Object; + + constructor(props) { + super(props); + this.colors = props.theme.colors; + } + render() { // console.log("rendering planningDisplayScreen"); return ( @@ -44,8 +51,8 @@ export default class PlanningDisplayScreen extends React.Component { " + this.displayData.description + ""} tagsStyles={{ - p: {color: ThemeManager.getCurrentThemeVariables().text,}, - div: {color: ThemeManager.getCurrentThemeVariables().text} + p: {color: this.colors.text,}, + div: {color: this.colors.text} }} onLinkPress={openWebLink}/> @@ -54,3 +61,5 @@ export default class PlanningDisplayScreen extends React.Component { ); } } + +export default withTheme(PlanningDisplayScreen); diff --git a/screens/Proximo/ProximoAboutScreen.js b/screens/Proximo/ProximoAboutScreen.js index 25581c0..b7e0118 100644 --- a/screens/Proximo/ProximoAboutScreen.js +++ b/screens/Proximo/ProximoAboutScreen.js @@ -3,7 +3,7 @@ import * as React from 'react'; import {Image, ScrollView, View} from 'react-native'; import i18n from "i18n-js"; -import {Text, Card, List, Paragraph} from 'react-native-paper'; +import {Card, List, Paragraph, Text} from 'react-native-paper'; type Props = { navigation: Object, diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index 3fbed58..3d7bd77 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -3,9 +3,8 @@ import * as React from 'react'; import {FlatList, Image, ScrollView, View} from "react-native"; import i18n from "i18n-js"; -import ThemeManager from "../../utils/ThemeManager"; import CustomModal from "../../components/CustomModal"; -import {Avatar, IconButton, List, RadioButton, Searchbar, Subheading, Text, Title} from "react-native-paper"; +import {Avatar, IconButton, List, RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper"; function sortPrice(a, b) { return a.price - b.price; @@ -45,7 +44,7 @@ type State = { /** * Class defining proximo's article list of a certain category. */ -export default class ProximoListScreen extends React.Component { +class ProximoListScreen extends React.Component { modalRef: Object; originalData: Array; @@ -56,7 +55,9 @@ export default class ProximoListScreen extends React.Component { renderItem: Function; onModalRef: Function; - constructor(props: any) { + colors: Object; + + constructor(props) { super(props); this.originalData = this.props.route.params['data']['data']; this.shouldFocusSearchBar = this.props.route.params['shouldFocusSearchBar']; @@ -70,6 +71,7 @@ export default class ProximoListScreen extends React.Component { this.onSortMenuPress = this.onSortMenuPress.bind(this); this.renderItem = this.renderItem.bind(this); this.onModalRef = this.onModalRef.bind(this); + this.colors = props.theme.colors; } @@ -133,11 +135,11 @@ export default class ProximoListScreen extends React.Component { getStockColor(availableStock: number) { let color: string; if (availableStock > 3) - color = ThemeManager.getCurrentThemeVariables().success; + color = this.colors.success; else if (availableStock > 0) - color = ThemeManager.getCurrentThemeVariables().warning; + color = this.colors.warning; else - color = ThemeManager.getCurrentThemeVariables().danger; + color = this.colors.danger; return color; } @@ -270,7 +272,7 @@ export default class ProximoListScreen extends React.Component { return ( @@ -286,7 +288,7 @@ export default class ProximoListScreen extends React.Component { descriptionStyle={{color: this.getStockColor(parseInt(item.quantity))}} onPress={onPress} left={() => } + source={{uri: item.image}}/>} right={() => {item.price}€ @@ -322,3 +324,5 @@ export default class ProximoListScreen extends React.Component { ); } } + +export default withTheme(ProximoListScreen); diff --git a/screens/Proximo/ProximoMainScreen.js b/screens/Proximo/ProximoMainScreen.js index a4dd547..c278608 100644 --- a/screens/Proximo/ProximoMainScreen.js +++ b/screens/Proximo/ProximoMainScreen.js @@ -3,9 +3,8 @@ import * as React from 'react'; import {View} from 'react-native' import i18n from "i18n-js"; -import ThemeManager from "../../utils/ThemeManager"; import WebSectionList from "../../components/WebSectionList"; -import {IconButton, List} from 'react-native-paper'; +import {List, withTheme} from 'react-native-paper'; import HeaderButton from "../../components/HeaderButton"; const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json"; @@ -22,7 +21,7 @@ type State = { * Class defining the main proximo screen. This screen shows the different categories of articles * offered by proximo. */ -export default class ProximoMainScreen extends React.Component { +class ProximoMainScreen extends React.Component { articles: Object; @@ -31,12 +30,15 @@ export default class ProximoMainScreen extends React.Component { getRenderItem: Function; createDataset: Function; - constructor() { - super(); + colors: Object; + + constructor(props) { + super(props); this.onPressSearchBtn = this.onPressSearchBtn.bind(this); this.onPressAboutBtn = this.onPressAboutBtn.bind(this); this.getRenderItem = this.getRenderItem.bind(this); this.createDataset = this.createDataset.bind(this); + this.colors = props.theme.colors; } static sortFinalData(a: Object, b: Object) { @@ -180,7 +182,7 @@ export default class ProximoMainScreen extends React.Component { left={props => } + color={this.colors.primary}/>} right={props => } /> ); @@ -202,3 +204,4 @@ export default class ProximoMainScreen extends React.Component { } } +export default withTheme(ProximoMainScreen); diff --git a/screens/Proxiwash/ProxiwashAboutScreen.js b/screens/Proxiwash/ProxiwashAboutScreen.js index 0176460..dd4cd21 100644 --- a/screens/Proxiwash/ProxiwashAboutScreen.js +++ b/screens/Proxiwash/ProxiwashAboutScreen.js @@ -1,7 +1,7 @@ // @flow import * as React from 'react'; -import {Image, View, ScrollView} from 'react-native'; +import {Image, ScrollView, View} from 'react-native'; import i18n from "i18n-js"; import {Card, List, Paragraph, Text, Title} from 'react-native-paper'; diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js index 515df53..0232658 100644 --- a/screens/Proxiwash/ProxiwashScreen.js +++ b/screens/Proxiwash/ProxiwashScreen.js @@ -7,12 +7,11 @@ import WebSectionList from "../../components/WebSectionList"; import NotificationsManager from "../../utils/NotificationsManager"; import AsyncStorageManager from "../../utils/AsyncStorageManager"; import * as Expo from "expo"; -import {Avatar, Banner, Button, Card, Text} from 'react-native-paper'; +import {Avatar, Banner, Button, Card, Text, withTheme} from 'react-native-paper'; import HeaderButton from "../../components/HeaderButton"; import ProxiwashListItem from "../../components/ProxiwashListItem"; import ProxiwashConstants from "../../constants/ProxiwashConstants"; import CustomModal from "../../components/CustomModal"; -import ThemeManager from "../../utils/ThemeManager"; const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json"; @@ -24,6 +23,7 @@ const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds type Props = { navigation: Object, + theme: Object, } type State = { @@ -39,7 +39,7 @@ type State = { * Class defining the app's proxiwash screen. This screen shows information about washing machines and * dryers, taken from a scrapper reading proxiwash website */ -export default class ProxiwashScreen extends React.Component { +class ProxiwashScreen extends React.Component { modalRef: Object; @@ -51,6 +51,7 @@ export default class ProxiwashScreen extends React.Component { onModalRef: Function; fetchedData: Object; + colors: Object; state = { refreshing: false, @@ -65,8 +66,8 @@ export default class ProxiwashScreen extends React.Component { /** * Creates machine state parameters using current theme and translations */ - constructor() { - super(); + constructor(props) { + super(props); stateStrings[ProxiwashConstants.machineStates.TERMINE] = i18n.t('proxiwashScreen.states.finished'); stateStrings[ProxiwashConstants.machineStates.DISPONIBLE] = i18n.t('proxiwashScreen.states.ready'); stateStrings[ProxiwashConstants.machineStates["EN COURS"]] = i18n.t('proxiwashScreen.states.running'); @@ -92,6 +93,7 @@ export default class ProxiwashScreen extends React.Component { this.createDataset = this.createDataset.bind(this); this.onHideBanner = this.onHideBanner.bind(this); this.onModalRef = this.onModalRef.bind(this); + this.colors = props.theme.colors; } onHideBanner() { @@ -301,7 +303,7 @@ export default class ProxiwashScreen extends React.Component { title={title} left={() => } /> @@ -338,41 +340,6 @@ export default class ProxiwashScreen extends React.Component { this.modalRef = ref; } - render() { - const nav = this.props.navigation; - return ( - - } - > - {i18n.t('proxiwashScreen.enableNotificationsTip')} - - - {this.state.modalCurrentDisplayItem} - - - - - ); - } - getMachineAvailableNumber(isDryer: boolean) { let data; if (isDryer) @@ -403,7 +370,7 @@ export default class ProxiwashScreen extends React.Component { subtitle={subtitle} left={() => } /> @@ -440,4 +407,41 @@ export default class ProxiwashScreen extends React.Component { /> ); } + + render() { + const nav = this.props.navigation; + return ( + + } + > + {i18n.t('proxiwashScreen.enableNotificationsTip')} + + + {this.state.modalCurrentDisplayItem} + + + + + ); + } } + +export default withTheme(ProxiwashScreen); diff --git a/screens/SelfMenuScreen.js b/screens/SelfMenuScreen.js index 716f9cc..45369cf 100644 --- a/screens/SelfMenuScreen.js +++ b/screens/SelfMenuScreen.js @@ -2,10 +2,9 @@ import * as React from 'react'; import {View} from 'react-native'; -import ThemeManager from "../utils/ThemeManager"; import i18n from "i18n-js"; import WebSectionList from "../components/WebSectionList"; -import {Card, Text} from 'react-native-paper'; +import {Card, Text, withTheme} from 'react-native-paper'; import AprilFoolsManager from "../utils/AprilFoolsManager"; const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json"; @@ -18,7 +17,7 @@ type Props = { * Class defining the app's menu screen. * This screen fetches data from etud to render the RU menu */ -export default class SelfMenuScreen extends React.Component { +class SelfMenuScreen extends React.Component { // Hard code strings as toLocaleDateString does not work on current android JS engine daysOfWeek = []; @@ -27,9 +26,10 @@ export default class SelfMenuScreen extends React.Component { getRenderItem: Function; getRenderSectionHeader: Function; createDataset: Function; + colors: Object; - constructor() { - super(); + constructor(props) { + super(props); this.daysOfWeek.push(i18n.t("date.daysOfWeek.monday")); this.daysOfWeek.push(i18n.t("date.daysOfWeek.tuesday")); this.daysOfWeek.push(i18n.t("date.daysOfWeek.wednesday")); @@ -54,6 +54,7 @@ export default class SelfMenuScreen extends React.Component { this.getRenderItem = this.getRenderItem.bind(this); this.getRenderSectionHeader = this.getRenderSectionHeader.bind(this); this.createDataset = this.createDataset.bind(this); + this.colors = props.theme.colors; } getKeyExtractor(item: Object) { @@ -138,7 +139,7 @@ export default class SelfMenuScreen extends React.Component { marginLeft: 'auto', marginRight: 'auto', borderBottomWidth: 1, - borderBottomColor: ThemeManager.getCurrentThemeVariables().primary, + borderBottomColor: this.colors.primary, marginTop: 5, marginBottom: 5, }}/> @@ -178,3 +179,4 @@ export default class SelfMenuScreen extends React.Component { } } +export default withTheme(SelfMenuScreen); diff --git a/utils/ThemeManager.js b/utils/ThemeManager.js index 91fd936..760f68f 100644 --- a/utils/ThemeManager.js +++ b/utils/ThemeManager.js @@ -132,14 +132,6 @@ export default class ThemeManager { return ThemeManager.getWhiteTheme(); } - /** - * Get the variables contained in the current theme - * @returns {Object} - */ - static getCurrentThemeVariables(): Object { - return ThemeManager.getCurrentTheme().colors; - } - /** * Set the function to be called when the theme is changed (allows for general reload of the app) * @param callback Function to call after theme change From 67357227c055bb1138cafa92e071b0cd49df0aa2 Mon Sep 17 00:00:00 2001 From: keplyx Date: Tue, 10 Mar 2020 11:33:22 +0100 Subject: [PATCH 46/66] removed more arrow functions --- App.js | 6 ++- components/EventDashboardItem.js | 17 +++------ screens/About/AboutScreen.js | 64 +++++++++++++++++++++----------- 3 files changed, 53 insertions(+), 34 deletions(-) diff --git a/App.js b/App.js index e97ad3a..5ebd217 100644 --- a/App.js +++ b/App.js @@ -37,18 +37,20 @@ export default class App extends React.Component { }; onIntroDone: Function; + onUpdateTheme: Function; constructor() { super(); LocaleManager.initTranslations(); this.onIntroDone = this.onIntroDone.bind(this); + this.onUpdateTheme = this.onUpdateTheme.bind(this); SplashScreen.preventAutoHide(); } /** * Updates the theme */ - updateTheme() { + onUpdateTheme() { this.setState({ currentTheme: ThemeManager.getCurrentTheme() }); @@ -86,7 +88,7 @@ export default class App extends React.Component { async loadAssetsAsync() { // Wait for custom fonts to be loaded before showing the app await AsyncStorageManager.getInstance().loadPreferences(); - ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme()); + ThemeManager.getInstance().setUpdateThemeCallback(this.onUpdateTheme); // await NotificationsManager.initExpoToken(); this.onLoadFinished(); } diff --git a/components/EventDashboardItem.js b/components/EventDashboardItem.js index a265caa..cfcd2ee 100644 --- a/components/EventDashboardItem.js +++ b/components/EventDashboardItem.js @@ -3,16 +3,6 @@ import * as React from 'react'; import {Avatar, Card, withTheme} from 'react-native-paper'; -function getIcon(icon, color) { - return ( - - ); -} - function EventDashBoardItem(props) { const {colors} = props.theme; const iconColor = props.isAvailable ? @@ -37,7 +27,12 @@ function EventDashBoardItem(props) { titleStyle={{color: textColor}} subtitle={props.subtitle} subtitleStyle={{color: textColor}} - left={() => getIcon(props.icon, iconColor)} + left={() => + } /> {props.children} diff --git a/screens/About/AboutScreen.js b/screens/About/AboutScreen.js index d93fb0c..ac890e8 100644 --- a/screens/About/AboutScreen.js +++ b/screens/About/AboutScreen.js @@ -186,33 +186,47 @@ class AboutScreen extends React.Component { getCardItem: Function; getMainCard: Function; onModalRef: Function; + onPressMail: Function; + onPressGit: Function; - colors: object; + colors: Object; constructor(props) { super(props); this.getCardItem = this.getCardItem.bind(this); this.getMainCard = this.getMainCard.bind(this); this.onModalRef = this.onModalRef.bind(this); + this.onPressMail = openWebLink.bind(this, links.bugsMail); + this.onPressGit = openWebLink.bind(this, links.bugsGit); this.colors = props.theme.colors; } + getAppIcon(props) { + return ( + + ); + } + + keyExtractor(item: Object) { + return item.icon; + } + getAppCard() { return ( }/> + left={this.getAppIcon}/> item.icon} + keyExtractor={this.keyExtractor} listKey={"app"} renderItem={this.getCardItem} /> @@ -232,7 +246,7 @@ class AboutScreen extends React.Component { item.icon} + keyExtractor={this.keyExtractor} listKey={"team1"} renderItem={this.getCardItem} /> @@ -240,7 +254,7 @@ class AboutScreen extends React.Component { item.icon} + keyExtractor={this.keyExtractor} listKey={"team2"} renderItem={this.getCardItem} /> @@ -257,7 +271,7 @@ class AboutScreen extends React.Component { item.icon} + keyExtractor={this.keyExtractor} listKey={"techno"} renderItem={this.getCardItem} /> @@ -266,6 +280,18 @@ class AboutScreen extends React.Component { ); } + getChevronIcon(props: Object) { + return ( + + ); + } + + getItemIcon(item: Object, props: Object) { + return ( + + ); + } + /** * Get a clickable card item to be rendered inside a card. * @@ -273,13 +299,14 @@ class AboutScreen extends React.Component { */ getCardItem({item}: Object) { let shouldShow = !item.showOnlyInDebug || (item.showOnlyInDebug && this.state.isDebugUnlocked); + const getItemIcon = this.getItemIcon.bind(this, item); if (shouldShow) { if (item.showChevron) { return ( } - right={props => } + left={getItemIcon} + right={this.getChevronIcon} onPress={item.onPressCallback} /> ); @@ -287,16 +314,13 @@ class AboutScreen extends React.Component { return ( } + left={getItemIcon} onPress={item.onPressCallback} /> ); } - - } else { + } else return null; - } - } tryUnlockDebugMode() { @@ -313,8 +337,6 @@ class AboutScreen extends React.Component { } getBugReportModal() { - const onPressMail = openWebLink.bind(this, links.bugsMail); - const onPressGit = openWebLink.bind(this, links.bugsGit); return ( { marginLeft: 'auto', marginRight: 'auto', }} - onPress={onPressMail}> + onPress={this.onPressMail}> {i18n.t('aboutScreen.bugsMail')} From 1bb52839d92131ea5dfcc105f21d6106a986aab7 Mon Sep 17 00:00:00 2001 From: Yohan Simard Date: Tue, 10 Mar 2020 15:33:01 +0100 Subject: [PATCH 47/66] Improved ProxiwashScreen UI --- screens/Proxiwash/ProxiwashScreen.js | 38 +++++++++++++++++++--------- translations/en.json | 1 + translations/fr.json | 5 ++-- utils/ThemeManager.js | 2 ++ 4 files changed, 32 insertions(+), 14 deletions(-) diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js index 0232658..ac760c6 100644 --- a/screens/Proxiwash/ProxiwashScreen.js +++ b/screens/Proxiwash/ProxiwashScreen.js @@ -356,25 +356,39 @@ class ProxiwashScreen extends React.Component { getRenderSectionHeader({section}: Object) { const isDryer = section.title === i18n.t('proxiwashScreen.dryers'); - const subtitle = this.getMachineAvailableNumber(isDryer) + ' ' + i18n.t('proxiwashScreen.numAvailable'); + const nbAvailable = this.getMachineAvailableNumber(isDryer); + const subtitle = nbAvailable + ' ' + ((nbAvailable <= 1) ? i18n.t('proxiwashScreen.numAvailable') + : i18n.t('proxiwashScreen.numAvailablePlural')); return ( - - } + - + + + {section.title} + + + + {subtitle} + + + ); } diff --git a/translations/en.json b/translations/en.json index 0158432..f679bac 100644 --- a/translations/en.json +++ b/translations/en.json @@ -169,6 +169,7 @@ "tips": "Tips", "enableNotificationsTip": "Click on a running machine to enable notifications", "numAvailable": "available", + "numAvailablePlural": "available", "modal": { "enableNotifications": "Notify me", "disableNotifications": "Stop notifications", diff --git a/translations/fr.json b/translations/fr.json index b0193b3..81f3177 100644 --- a/translations/fr.json +++ b/translations/fr.json @@ -160,7 +160,7 @@ "washersTariff": "3€ la machine + 0.80€ avec la lessive.", "dryersTariff": "0.35€ pour 5min de sèche linge.", "paymentMethods": "Moyens de Paiement", - "paymentMethodsDescription" : "Toute monnaie jusqu'à 10€.\nCarte bancaire acceptée.", + "paymentMethodsDescription": "Toute monnaie jusqu'à 10€.\nCarte bancaire acceptée.", "washerProcedure": "Déposer le linge dans le tambour sans le tasser et en respectant les charges.\n\nFermer la porte de l'appareil.\n\nSélectionner un programme avec l'une des quatre touches de programme favori standard.\n\nAprès avoir payé à la centrale de commande, appuyer sur le bouton marqué START du lave-linge.\n\nDès que le programme est terminé, l’afficheur indique 'Programme terminé', appuyer sur le bouton jaune d’ouverture du hublot pour récupérer le linge.", "washerTips": "Programme blanc/couleur : 6kg de linge sec (textiles en coton, lin, linge de corps, draps, jeans,serviettes de toilettes).\n\nProgramme nonrepassable : 3,5 kg de linge sec (textiles en fibres synthétiques, cotonet polyester mélangés).\n\nProgramme fin 30°C : 2,5 kg de linge sec (textiles délicats en fibres synthétiques, rayonne).\n\nProgramme laine 30°C : 2,5 kg de linge sec (textiles en laine et lainages lavables).", "dryerProcedure": "Déposer le linge dans le tambour sans le tasser et en respectant les charges.\n\nFermer la porte de l'appareil.\n\nSélectionner un programme avec l'une des quatre touches de programme favori standard.\n\nAprès avoir payé à la centrale de commande, appuyer sur le bouton marqué START du lave-linge.", @@ -168,7 +168,8 @@ "procedure": "Procédure", "tips": "Conseils", "enableNotificationsTip": "Cliquez sur une machine en cours pour activer les notifications", - "numAvailable": "disponibles", + "numAvailable": "disponible", + "numAvailablePlural": "disponibles", "modal": { "enableNotifications": "Me Notifier", "disableNotifications": "Désactiver les notifications", diff --git a/utils/ThemeManager.js b/utils/ThemeManager.js index 760f68f..ce1d435 100644 --- a/utils/ThemeManager.js +++ b/utils/ThemeManager.js @@ -31,6 +31,7 @@ export default class ThemeManager { dividerBackground: '#e2e2e2', textDisabled: '#c1c1c1', icon: '#5d5d5d', + subtitle: '#707070', success: "#5cb85c", warning: "#f0ad4e", danger: "#d9534f", @@ -70,6 +71,7 @@ export default class ThemeManager { dividerBackground: '#222222', textDisabled: '#5b5b5b', icon: '#b3b3b3', + subtitle: '#aaaaaa', success: "#5cb85c", warning: "#f0ad4e", danger: "#d9534f", From 434a9cc1e5baca595253d65285897e1e9604b08a Mon Sep 17 00:00:00 2001 From: Yohan Simard Date: Tue, 10 Mar 2020 15:57:25 +0100 Subject: [PATCH 48/66] Reduced the text size of machines number --- components/ProxiwashListItem.js | 1 + 1 file changed, 1 insertion(+) diff --git a/components/ProxiwashListItem.js b/components/ProxiwashListItem.js index 1e6f2c2..e4d091c 100644 --- a/components/ProxiwashListItem.js +++ b/components/ProxiwashListItem.js @@ -54,6 +54,7 @@ function ProxiwashListItem(props) { }}/> Date: Tue, 10 Mar 2020 16:01:24 +0100 Subject: [PATCH 49/66] Added proxiwash AF --- screens/Proxiwash/ProxiwashScreen.js | 19 ++++++++++-- utils/AprilFoolsManager.js | 45 +++++++++++++++++++++++++++- 2 files changed, 60 insertions(+), 4 deletions(-) diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js index 0232658..109afd4 100644 --- a/screens/Proxiwash/ProxiwashScreen.js +++ b/screens/Proxiwash/ProxiwashScreen.js @@ -12,6 +12,7 @@ import HeaderButton from "../../components/HeaderButton"; import ProxiwashListItem from "../../components/ProxiwashListItem"; import ProxiwashConstants from "../../constants/ProxiwashConstants"; import CustomModal from "../../components/CustomModal"; +import AprilFoolsManager from "../../utils/AprilFoolsManager"; const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json"; @@ -229,19 +230,26 @@ class ProxiwashScreen extends React.Component { } createDataset(fetchedData: Object) { + let data = fetchedData; + if (AprilFoolsManager.getInstance().isAprilFoolsEnabled()) { + data = JSON.parse(JSON.stringify(fetchedData)); // Deep copy + AprilFoolsManager.getNewProxiwashDryerOrderedList(data.dryers); + AprilFoolsManager.getNewProxiwashWasherOrderedList(data.washers); + } this.fetchedData = fetchedData; + return [ { title: i18n.t('proxiwashScreen.dryers'), icon: 'tumble-dryer', - data: fetchedData.dryers === undefined ? [] : fetchedData.dryers, + data: data.dryers === undefined ? [] : data.dryers, extraData: this.state, keyExtractor: this.getDryersKeyExtractor }, { title: i18n.t('proxiwashScreen.washers'), icon: 'washing-machine', - data: fetchedData.washers === undefined ? [] : fetchedData.washers, + data: data.washers === undefined ? [] : data.washers, extraData: this.state, keyExtractor: this.getWashersKeyExtractor }, @@ -387,7 +395,12 @@ class ProxiwashScreen extends React.Component { */ getRenderItem({item, section}: Object) { const isMachineRunning = ProxiwashConstants.machineStates[item.state] === ProxiwashConstants.machineStates["EN COURS"]; - const machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')) + ' n°' + item.number; + let displayNumber = item.number; + if (AprilFoolsManager.getInstance().isAprilFoolsEnabled()) + displayNumber = AprilFoolsManager.getProxiwashMachineDisplayNumber(parseInt(item.number)); + const machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? + i18n.t('proxiwashScreen.dryer') : + i18n.t('proxiwashScreen.washer')) + ' n°' + displayNumber; const isDryer = section.title === i18n.t('proxiwashScreen.dryers'); const onPress = this.showModal.bind(this, machineName, item, isDryer); let width = item.donePercent !== '' ? (parseInt(item.donePercent)).toString() + '%' : 0; diff --git a/utils/AprilFoolsManager.js b/utils/AprilFoolsManager.js index c2b97b0..ae918d4 100644 --- a/utils/AprilFoolsManager.js +++ b/utils/AprilFoolsManager.js @@ -9,6 +9,22 @@ export default class AprilFoolsManager { aprilFoolsEnabled: boolean; + static fakeMachineNumber = [ + "", + "a", + "b", + "c", + "d", + "e", + "f", + "g", + "h", + "i", + "j", + "k", + "l", + ]; + constructor() { let today = new Date(); this.aprilFoolsEnabled = (today.getDate() === 1 && today.getMonth() === 3); @@ -25,13 +41,40 @@ export default class AprilFoolsManager { } static getFakeMenuItem(menu: Object) { - menu[1]["dishes"].splice(2, 0, {name: "Coq au vin"}); + menu[1]["dishes"].splice(4, 0, {name: "Coq au vin"}); + menu[1]["dishes"].splice(2, 0, {name: "Bat'Soupe"}); menu[1]["dishes"].splice(1, 0, {name: "Pave de loup"}); menu[1]["dishes"].splice(0, 0, {name: "Béranger à point"}); menu[1]["dishes"].splice(0, 0, {name: "Pieds d'Arnaud"}); return menu; } + static getNewProxiwashDryerOrderedList(dryers: Array) { + if (dryers !== undefined) { + let second = dryers[1]; + dryers.splice(1, 1); + dryers.push(second); + } + } + + static getNewProxiwashWasherOrderedList(washers: Array) { + if (washers !== undefined) { + let first = washers[0]; + let second = washers[1]; + let fifth = washers[4]; + let ninth = washers[8]; + washers.splice(8, 1, second); + washers.splice(4, 1, ninth); + washers.splice(1, 1, first); + washers.splice(0, 1, fifth); + // washers.push(fifth); + } + } + + static getProxiwashMachineDisplayNumber(number: number) { + return AprilFoolsManager.fakeMachineNumber[number]; + } + static getAprilFoolsTheme(currentTheme: Object) { return { ...currentTheme, From a10d357d8fa585a11bebaf22605e9b31780edc5d Mon Sep 17 00:00:00 2001 From: keplyx Date: Tue, 10 Mar 2020 16:43:52 +0100 Subject: [PATCH 50/66] Fixed purecomponent not updating --- components/WebSectionList.js | 13 ++++--------- screens/Proxiwash/ProxiwashScreen.js | 3 ++- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/components/WebSectionList.js b/components/WebSectionList.js index 481a9e1..3e2c58d 100644 --- a/components/WebSectionList.js +++ b/components/WebSectionList.js @@ -16,6 +16,7 @@ type Props = { renderSectionHeader: React.Node, stickyHeader: boolean, createDataset: Function, + updateData: number, } type State = { @@ -28,19 +29,15 @@ type State = { const MIN_REFRESH_TIME = 5 * 1000; /** - * Custom component defining a material icon using native base - * - * @prop active {boolean} Whether to set the icon color to active - * @prop icon {string} The icon string to use from MaterialCommunityIcons - * @prop color {string} The icon color. Use default theme color if unspecified - * @prop fontSize {number} The icon size. Use 26 if unspecified - * @prop width {number} The icon width. Use 30 if unspecified + * This is a pure component, meaning it will only update if a shallow comparison of state and props is different. + * To force the component to update, change the value of updateData. */ export default class WebSectionList extends React.PureComponent { static defaultProps = { renderSectionHeader: null, stickyHeader: false, + updateData: null, }; webDataManager: WebDataManager; @@ -88,8 +85,6 @@ export default class WebSectionList extends React.PureComponent { this.onRefresh(); } - - /** * Refresh data when focusing the screen and setup a refresh interval if asked to */ diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js index 6eef91a..16430d7 100644 --- a/screens/Proxiwash/ProxiwashScreen.js +++ b/screens/Proxiwash/ProxiwashScreen.js @@ -464,7 +464,8 @@ class ProxiwashScreen extends React.Component { renderItem={this.getRenderItem} renderSectionHeader={this.getRenderSectionHeader} autoRefreshTime={REFRESH_TIME} - refreshOnFocus={true}/> + refreshOnFocus={true} + updateData={this.state.machinesWatched.length}/> ); From 651435dfc619302c7717c85bf3db17c784b09567 Mon Sep 17 00:00:00 2001 From: keplyx Date: Tue, 10 Mar 2020 17:08:57 +0100 Subject: [PATCH 51/66] Improved proximo list performance by using a pure component --- components/PureFlatList.js | 17 +++++++++++++++++ screens/Proximo/ProximoListScreen.js | 5 ++--- 2 files changed, 19 insertions(+), 3 deletions(-) create mode 100644 components/PureFlatList.js diff --git a/components/PureFlatList.js b/components/PureFlatList.js new file mode 100644 index 0000000..fd87c69 --- /dev/null +++ b/components/PureFlatList.js @@ -0,0 +1,17 @@ +import * as React from 'react'; +import {FlatList} from "react-native"; + + +export default class PureFlatList extends React.PureComponent{ + + render() { + return ( + + ); + } +} diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index 3d7bd77..c909402 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -5,6 +5,7 @@ import {FlatList, Image, ScrollView, View} from "react-native"; import i18n from "i18n-js"; import CustomModal from "../../components/CustomModal"; import {Avatar, IconButton, List, RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper"; +import PureFlatList from "../../components/PureFlatList"; function sortPrice(a, b) { return a.price - b.price; @@ -313,11 +314,9 @@ class ProximoListScreen extends React.Component { {this.state.modalCurrentDisplayItem} - From 35948ddfba50ca2cb1e8beb3f8d8eb9f7be3df89 Mon Sep 17 00:00:00 2001 From: keplyx Date: Tue, 10 Mar 2020 17:18:02 +0100 Subject: [PATCH 52/66] Fixed proximo list sorting not working --- components/PureFlatList.js | 14 ++++++++++++++ screens/Proximo/ProximoListScreen.js | 1 + 2 files changed, 15 insertions(+) diff --git a/components/PureFlatList.js b/components/PureFlatList.js index fd87c69..8389d5e 100644 --- a/components/PureFlatList.js +++ b/components/PureFlatList.js @@ -1,9 +1,23 @@ import * as React from 'react'; import {FlatList} from "react-native"; +type Props = { + data: Array, + keyExtractor: Function, + renderItem: Function, + updateData: number, +} +/** + * This is a pure component, meaning it will only update if a shallow comparison of state and props is different. + * To force the component to update, change the value of updateData. + */ export default class PureFlatList extends React.PureComponent{ + static defaultProps = { + updateData: null, + }; + render() { return ( { data={this.state.currentlyDisplayedData} keyExtractor={this.keyExtractor} renderItem={this.renderItem} + updateData={this.state.currentSortMode} /> ); From 31cdb4aea0ce27f70d843b4baa6f76c27069befb Mon Sep 17 00:00:00 2001 From: Yohan Simard Date: Tue, 10 Mar 2020 17:29:34 +0100 Subject: [PATCH 53/66] =?UTF-8?q?Added=20some=20maths...=20=F0=9F=98=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utils/AprilFoolsManager.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/utils/AprilFoolsManager.js b/utils/AprilFoolsManager.js index ae918d4..5f453db 100644 --- a/utils/AprilFoolsManager.js +++ b/utils/AprilFoolsManager.js @@ -11,23 +11,23 @@ export default class AprilFoolsManager { static fakeMachineNumber = [ "", - "a", - "b", - "c", - "d", - "e", - "f", - "g", - "h", - "i", - "j", - "k", - "l", + "cos(ln(1))", + "0,5⁻¹", + "567/189", + "√2×√8", + "√50×sin(9π/4)", + "⌈π+e⌉", + "div(rot(B))+7", + "4×sinh(0)+4", + "8-(-i)²", + "|5√2+5√2i|", + "1×10¹+1×10⁰", + "Re(√192e^(iπ/6))", ]; constructor() { let today = new Date(); - this.aprilFoolsEnabled = (today.getDate() === 1 && today.getMonth() === 3); + this.aprilFoolsEnabled = (today.getDate() === 10 && today.getMonth() === 2); // TODO changer date ! } /** From c7dfbe50e661e8eb5f7d4c77a61d675929113f00 Mon Sep 17 00:00:00 2001 From: Yohan Simard Date: Tue, 10 Mar 2020 17:31:18 +0100 Subject: [PATCH 54/66] oops forgot to change the date --- utils/AprilFoolsManager.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/utils/AprilFoolsManager.js b/utils/AprilFoolsManager.js index 5f453db..90f9b43 100644 --- a/utils/AprilFoolsManager.js +++ b/utils/AprilFoolsManager.js @@ -27,7 +27,7 @@ export default class AprilFoolsManager { constructor() { let today = new Date(); - this.aprilFoolsEnabled = (today.getDate() === 10 && today.getMonth() === 2); // TODO changer date ! + this.aprilFoolsEnabled = (today.getDate() === 1 && today.getMonth() === 3); } /** From ef37ed629fe121c52a9741cff0785712ef3127dc Mon Sep 17 00:00:00 2001 From: keplyx Date: Tue, 10 Mar 2020 21:26:14 +0100 Subject: [PATCH 55/66] Fixed proximo search field on IOS --- screens/Proximo/ProximoListScreen.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index 2c94575..842fda0 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -1,7 +1,7 @@ // @flow import * as React from 'react'; -import {FlatList, Image, ScrollView, View} from "react-native"; +import {Platform, Image, ScrollView, View} from "react-native"; import i18n from "i18n-js"; import CustomModal from "../../components/CustomModal"; import {Avatar, IconButton, List, RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper"; @@ -85,7 +85,10 @@ class ProximoListScreen extends React.Component { this.props.navigation.setOptions({ headerRight: button, headerTitle: title, - headerTitleContainerStyle: {marginHorizontal: 0, right: 50, left: 50}, + headerBackTitleVisible: false, + headerTitleContainerStyle: Platform.OS === 'ios' ? + {marginHorizontal: 0, width: '70%'} : + {marginHorizontal: 0, right: 50, left: 50}, }); } From f06d5c36e42b4e313d98f7fd258d7df0f000081d Mon Sep 17 00:00:00 2001 From: keplyx Date: Tue, 10 Mar 2020 21:35:31 +0100 Subject: [PATCH 56/66] Fixed auto dark mode --- utils/ThemeManager.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/utils/ThemeManager.js b/utils/ThemeManager.js index ce1d435..86ae540 100644 --- a/utils/ThemeManager.js +++ b/utils/ThemeManager.js @@ -3,7 +3,7 @@ import AsyncStorageManager from "./AsyncStorageManager"; import {DarkTheme, DefaultTheme} from 'react-native-paper'; import AprilFoolsManager from "./AprilFoolsManager"; -import { Appearance } from 'react-native-appearance'; +import {Appearance} from 'react-native-appearance'; const colorScheme = Appearance.getColorScheme(); @@ -112,8 +112,10 @@ export default class ThemeManager { * @returns {boolean} Night mode state */ static getNightMode(): boolean { - return AsyncStorageManager.getInstance().preferences.nightMode.current === '1' || - AsyncStorageManager.getInstance().preferences.nightModeFollowSystem.current === '1' && colorScheme === 'dark'; + return (AsyncStorageManager.getInstance().preferences.nightMode.current === '1' && + (AsyncStorageManager.getInstance().preferences.nightModeFollowSystem.current !== '1' || + colorScheme === 'no-preference')) || + (AsyncStorageManager.getInstance().preferences.nightModeFollowSystem.current === '1' && colorScheme === 'dark'); } /** @@ -123,7 +125,7 @@ export default class ThemeManager { static getCurrentTheme(): Object { if (AprilFoolsManager.getInstance().isAprilFoolsEnabled()) return AprilFoolsManager.getAprilFoolsTheme(ThemeManager.getWhiteTheme()); - else + else return ThemeManager.getBaseTheme() } From ac898b9d6426b03a82f65bf4de95e6cfd214721e Mon Sep 17 00:00:00 2001 From: keplyx Date: Wed, 11 Mar 2020 09:17:47 +0100 Subject: [PATCH 57/66] Removed unused lib --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index d446175..5e31f94 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,6 @@ "@react-navigation/native": "^5.0.9", "@react-navigation/stack": "^5.1.1", "expo": "^36.0.0", - "expo-linear-gradient": "~8.0.0", "expo-localization": "~8.0.0", "expo-permissions": "~8.0.0", "expo-web-browser": "~8.0.0", From bd99727c5f8246e049e737af24034f1466efd320 Mon Sep 17 00:00:00 2001 From: Yohan Simard Date: Wed, 11 Mar 2020 13:26:54 +0100 Subject: [PATCH 58/66] Fixed a mistake in a formula --- utils/AprilFoolsManager.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/utils/AprilFoolsManager.js b/utils/AprilFoolsManager.js index 90f9b43..30ac90c 100644 --- a/utils/AprilFoolsManager.js +++ b/utils/AprilFoolsManager.js @@ -18,7 +18,7 @@ export default class AprilFoolsManager { "√50×sin(9π/4)", "⌈π+e⌉", "div(rot(B))+7", - "4×sinh(0)+4", + "4×cosh(0)+4", "8-(-i)²", "|5√2+5√2i|", "1×10¹+1×10⁰", From 91326689439f7fda530a426c949c505c11f0007b Mon Sep 17 00:00:00 2001 From: keplyx Date: Wed, 11 Mar 2020 15:29:27 +0100 Subject: [PATCH 59/66] Remove AF theme and start screen --- App.js | 11 ++--------- components/CustomIntroSlider.js | 13 ------------- utils/AprilFoolsManager.js | 22 ---------------------- utils/AsyncStorageManager.js | 7 +------ utils/ThemeManager.js | 8 -------- 5 files changed, 3 insertions(+), 58 deletions(-) diff --git a/App.js b/App.js index 5ebd217..ad94488 100644 --- a/App.js +++ b/App.js @@ -12,7 +12,6 @@ import {createStackNavigator} from '@react-navigation/stack'; import DrawerNavigator from './navigation/DrawerNavigator'; import NotificationsManager from "./utils/NotificationsManager"; import {Provider as PaperProvider} from 'react-native-paper'; -import AprilFoolsManager from "./utils/AprilFoolsManager"; type Props = {}; @@ -20,7 +19,6 @@ type State = { isLoading: boolean, showIntro: boolean, showUpdate: boolean, - showAprilFools: boolean, currentTheme: ?Object, }; @@ -32,7 +30,6 @@ export default class App extends React.Component { isLoading: true, showIntro: true, showUpdate: true, - showAprilFools: false, currentTheme: null, }; @@ -74,11 +71,9 @@ export default class App extends React.Component { this.setState({ showIntro: false, showUpdate: false, - showAprilFools: false, }); AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.showIntro.key, '0'); AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.showUpdate5.key, '0'); - AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.showAprilFoolsStart.key, '0'); } async componentDidMount() { @@ -89,7 +84,7 @@ export default class App extends React.Component { // Wait for custom fonts to be loaded before showing the app await AsyncStorageManager.getInstance().loadPreferences(); ThemeManager.getInstance().setUpdateThemeCallback(this.onUpdateTheme); - // await NotificationsManager.initExpoToken(); + await NotificationsManager.initExpoToken(); this.onLoadFinished(); } @@ -101,7 +96,6 @@ export default class App extends React.Component { currentTheme: ThemeManager.getCurrentTheme(), showIntro: AsyncStorageManager.getInstance().preferences.showIntro.current === '1', showUpdate: AsyncStorageManager.getInstance().preferences.showUpdate5.current === '1', - showAprilFools: AprilFoolsManager.getInstance().isAprilFoolsEnabled() && AsyncStorageManager.getInstance().preferences.showAprilFoolsStart.current === '1', }); // Status bar goes dark if set too fast setTimeout(this.setupStatusBar, 1000); @@ -114,11 +108,10 @@ export default class App extends React.Component { render() { if (this.state.isLoading) { return null; - } else if (this.state.showIntro || this.state.showUpdate || this.state.showAprilFools) { + } else if (this.state.showIntro || this.state.showUpdate) { return ; } else { return ( diff --git a/components/CustomIntroSlider.js b/components/CustomIntroSlider.js index 47a467f..261cd6e 100644 --- a/components/CustomIntroSlider.js +++ b/components/CustomIntroSlider.js @@ -40,14 +40,12 @@ const styles = StyleSheet.create({ type Props = { onDone: Function, isUpdate: boolean, - isAprilFools: boolean, }; export default class CustomIntroSlider extends React.Component { introSlides: Array; updateSlides: Array; - aprilFoolsSlides: Array; constructor() { super(); @@ -111,15 +109,6 @@ export default class CustomIntroSlider extends React.Component { colors: ['#e01928', '#be1522'], }, ]; - this.aprilFoolsSlides = [ - { - key: '1', - title: i18n.t('intro.aprilFoolsSlide.title'), - text: i18n.t('intro.aprilFoolsSlide.text'), - icon: 'fish', - colors: ['#e01928', '#be1522'], - }, - ]; } @@ -158,8 +147,6 @@ export default class CustomIntroSlider extends React.Component { let slides = this.introSlides; if (this.props.isUpdate) slides = this.updateSlides; - else if (this.props.isAprilFools) - slides = this.aprilFoolsSlides; return ( Date: Wed, 11 Mar 2020 16:08:02 +0100 Subject: [PATCH 60/66] Do not display html component if description is only empty tags --- components/PreviewEventDashboardItem.js | 24 +++++++++++++----------- utils/PlanningEventManager.js | 7 +++++++ 2 files changed, 20 insertions(+), 11 deletions(-) diff --git a/components/PreviewEventDashboardItem.js b/components/PreviewEventDashboardItem.js index d3781ed..83cdc8b 100644 --- a/components/PreviewEventDashboardItem.js +++ b/components/PreviewEventDashboardItem.js @@ -10,7 +10,7 @@ import PlanningEventManager from "../utils/PlanningEventManager"; function PreviewEventDashboardItem(props) { const {colors} = props.theme; - + const isEmpty = PlanningEventManager.isDescriptionEmpty(props.event['description']); if (props.event !== undefined && props.event !== null) { const hasImage = props.event['logo'] !== '' && props.event['logo'] !== null; const getImage = () => } - 70 ? 100 : 50, - overflow: 'hidden', - }}> - " + props.event['description'] + ""} - tagsStyles={{ - p: {color: colors.text,}, - div: {color: colors.text}, - }}/> + {!isEmpty ? + + " + props.event['description'] + ""} + tagsStyles={{ + p: {color: colors.text,}, + div: {color: colors.text}, + }}/> + + : null} - ', '') + .replace('

', '') + .replace('
', '').trim() === ''; + } + } From 30c1c9c5bf39f767f8cccd267a4f12ae8083032e Mon Sep 17 00:00:00 2001 From: keplyx Date: Wed, 11 Mar 2020 19:55:20 +0100 Subject: [PATCH 61/66] Fixed crash when no event to display --- components/PreviewEventDashboardItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/PreviewEventDashboardItem.js b/components/PreviewEventDashboardItem.js index 83cdc8b..37b0845 100644 --- a/components/PreviewEventDashboardItem.js +++ b/components/PreviewEventDashboardItem.js @@ -10,7 +10,7 @@ import PlanningEventManager from "../utils/PlanningEventManager"; function PreviewEventDashboardItem(props) { const {colors} = props.theme; - const isEmpty = PlanningEventManager.isDescriptionEmpty(props.event['description']); + const isEmpty = props.event === undefined ? true : PlanningEventManager.isDescriptionEmpty(props.event['description']); if (props.event !== undefined && props.event !== null) { const hasImage = props.event['logo'] !== '' && props.event['logo'] !== null; const getImage = () => Date: Wed, 11 Mar 2020 19:55:48 +0100 Subject: [PATCH 62/66] Revert "Remove AF theme and start screen" This reverts commit 91326689 --- App.js | 11 +++++++++-- components/CustomIntroSlider.js | 13 +++++++++++++ utils/AprilFoolsManager.js | 22 ++++++++++++++++++++++ utils/AsyncStorageManager.js | 7 ++++++- utils/ThemeManager.js | 8 ++++++++ 5 files changed, 58 insertions(+), 3 deletions(-) diff --git a/App.js b/App.js index ad94488..5ebd217 100644 --- a/App.js +++ b/App.js @@ -12,6 +12,7 @@ import {createStackNavigator} from '@react-navigation/stack'; import DrawerNavigator from './navigation/DrawerNavigator'; import NotificationsManager from "./utils/NotificationsManager"; import {Provider as PaperProvider} from 'react-native-paper'; +import AprilFoolsManager from "./utils/AprilFoolsManager"; type Props = {}; @@ -19,6 +20,7 @@ type State = { isLoading: boolean, showIntro: boolean, showUpdate: boolean, + showAprilFools: boolean, currentTheme: ?Object, }; @@ -30,6 +32,7 @@ export default class App extends React.Component { isLoading: true, showIntro: true, showUpdate: true, + showAprilFools: false, currentTheme: null, }; @@ -71,9 +74,11 @@ export default class App extends React.Component { this.setState({ showIntro: false, showUpdate: false, + showAprilFools: false, }); AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.showIntro.key, '0'); AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.showUpdate5.key, '0'); + AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.showAprilFoolsStart.key, '0'); } async componentDidMount() { @@ -84,7 +89,7 @@ export default class App extends React.Component { // Wait for custom fonts to be loaded before showing the app await AsyncStorageManager.getInstance().loadPreferences(); ThemeManager.getInstance().setUpdateThemeCallback(this.onUpdateTheme); - await NotificationsManager.initExpoToken(); + // await NotificationsManager.initExpoToken(); this.onLoadFinished(); } @@ -96,6 +101,7 @@ export default class App extends React.Component { currentTheme: ThemeManager.getCurrentTheme(), showIntro: AsyncStorageManager.getInstance().preferences.showIntro.current === '1', showUpdate: AsyncStorageManager.getInstance().preferences.showUpdate5.current === '1', + showAprilFools: AprilFoolsManager.getInstance().isAprilFoolsEnabled() && AsyncStorageManager.getInstance().preferences.showAprilFoolsStart.current === '1', }); // Status bar goes dark if set too fast setTimeout(this.setupStatusBar, 1000); @@ -108,10 +114,11 @@ export default class App extends React.Component { render() { if (this.state.isLoading) { return null; - } else if (this.state.showIntro || this.state.showUpdate) { + } else if (this.state.showIntro || this.state.showUpdate || this.state.showAprilFools) { return ; } else { return ( diff --git a/components/CustomIntroSlider.js b/components/CustomIntroSlider.js index 261cd6e..47a467f 100644 --- a/components/CustomIntroSlider.js +++ b/components/CustomIntroSlider.js @@ -40,12 +40,14 @@ const styles = StyleSheet.create({ type Props = { onDone: Function, isUpdate: boolean, + isAprilFools: boolean, }; export default class CustomIntroSlider extends React.Component { introSlides: Array; updateSlides: Array; + aprilFoolsSlides: Array; constructor() { super(); @@ -109,6 +111,15 @@ export default class CustomIntroSlider extends React.Component { colors: ['#e01928', '#be1522'], }, ]; + this.aprilFoolsSlides = [ + { + key: '1', + title: i18n.t('intro.aprilFoolsSlide.title'), + text: i18n.t('intro.aprilFoolsSlide.text'), + icon: 'fish', + colors: ['#e01928', '#be1522'], + }, + ]; } @@ -147,6 +158,8 @@ export default class CustomIntroSlider extends React.Component { let slides = this.introSlides; if (this.props.isUpdate) slides = this.updateSlides; + else if (this.props.isAprilFools) + slides = this.aprilFoolsSlides; return ( Date: Wed, 11 Mar 2020 21:04:17 +0100 Subject: [PATCH 63/66] Improved update management --- App.js | 7 ++++--- components/CustomIntroSlider.js | 7 ++++--- constants/Update.js | 25 +++++++++++++++++++++++++ package.json | 3 ++- translations/en.json | 2 +- translations/fr.json | 2 +- utils/AsyncStorageManager.js | 4 ++-- 7 files changed, 39 insertions(+), 11 deletions(-) create mode 100644 constants/Update.js diff --git a/App.js b/App.js index 5ebd217..585b137 100644 --- a/App.js +++ b/App.js @@ -13,6 +13,7 @@ import DrawerNavigator from './navigation/DrawerNavigator'; import NotificationsManager from "./utils/NotificationsManager"; import {Provider as PaperProvider} from 'react-native-paper'; import AprilFoolsManager from "./utils/AprilFoolsManager"; +import Update from "./constants/Update"; type Props = {}; @@ -77,7 +78,7 @@ export default class App extends React.Component { showAprilFools: false, }); AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.showIntro.key, '0'); - AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.showUpdate5.key, '0'); + AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.updateNumber.key, Update.number.toString()); AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.showAprilFoolsStart.key, '0'); } @@ -89,7 +90,7 @@ export default class App extends React.Component { // Wait for custom fonts to be loaded before showing the app await AsyncStorageManager.getInstance().loadPreferences(); ThemeManager.getInstance().setUpdateThemeCallback(this.onUpdateTheme); - // await NotificationsManager.initExpoToken(); + await NotificationsManager.initExpoToken(); this.onLoadFinished(); } @@ -100,7 +101,7 @@ export default class App extends React.Component { isLoading: false, currentTheme: ThemeManager.getCurrentTheme(), showIntro: AsyncStorageManager.getInstance().preferences.showIntro.current === '1', - showUpdate: AsyncStorageManager.getInstance().preferences.showUpdate5.current === '1', + showUpdate: AsyncStorageManager.getInstance().preferences.updateNumber.current !== Update.number.toString(), showAprilFools: AprilFoolsManager.getInstance().isAprilFoolsEnabled() && AsyncStorageManager.getInstance().preferences.showAprilFoolsStart.current === '1', }); // Status bar goes dark if set too fast diff --git a/components/CustomIntroSlider.js b/components/CustomIntroSlider.js index 47a467f..8c19ba3 100644 --- a/components/CustomIntroSlider.js +++ b/components/CustomIntroSlider.js @@ -7,6 +7,7 @@ import {MaterialCommunityIcons} from "@expo/vector-icons"; import {Text} from "react-native-paper"; import i18n from 'i18n-js'; import AppIntroSlider from "react-native-app-intro-slider"; +import Update from "../constants/Update"; // Content to be used int the intro slides @@ -105,9 +106,9 @@ export default class CustomIntroSlider extends React.Component { this.updateSlides = [ { key: '1', - title: i18n.t('intro.updateSlide.title'), - text: i18n.t('intro.updateSlide.text'), - icon: 'email', + title: Update.getInstance().title, + text: Update.getInstance().description, + icon: Update.icon, colors: ['#e01928', '#be1522'], }, ]; diff --git a/constants/Update.js b/constants/Update.js new file mode 100644 index 0000000..072a50e --- /dev/null +++ b/constants/Update.js @@ -0,0 +1,25 @@ +import i18n from "i18n-js"; + +export default class Update { + + static number = 5; + static icon = 'surround-sound-2-0'; + + static instance: Update | null = null; + + constructor() { + this.title = i18n.t('intro.updateSlide.title'); + this.description = i18n.t('intro.updateSlide.text'); + } + + /** + * Get this class instance or create one if none is found + * @returns {Update} + */ + static getInstance(): Update { + return Update.instance === null ? + Update.instance = new Update() : + Update.instance; + } + +}; diff --git a/package.json b/package.json index 5e31f94..7c6672f 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,8 @@ "react-native-safe-area-context": "0.6.0", "react-native-screens": "2.0.0-alpha.12", "react-native-webview": "7.4.3", - "react-native-appearance": "~0.3.1" + "react-native-appearance": "~0.3.1", + "expo-linear-gradient": "~8.0.0" }, "devDependencies": { "babel-preset-expo": "^8.0.0" diff --git a/translations/en.json b/translations/en.json index f679bac..6bf72c7 100644 --- a/translations/en.json +++ b/translations/en.json @@ -50,7 +50,7 @@ }, "updateSlide": { "title": "New in this update!", - "text": "Never miss an email anymore! Acces your INSA webmail from the app using the left menu.\nPlanex has also seen some improvements!\n\nSome of your remarks where taken into account for this update, more to come.\nThanks for your feedback on the survey! " + "text": "The app got a new UI ! Faster, prettier and more modern, we hope you'll love it!" }, "aprilFoolsSlide": { "title": "New in this update!", diff --git a/translations/fr.json b/translations/fr.json index 81f3177..1c5d442 100644 --- a/translations/fr.json +++ b/translations/fr.json @@ -50,7 +50,7 @@ }, "updateSlide": { "title": "Nouveau dans cette mise à jour !", - "text": "Ne ratez plus jamais un email ! Accédez à vos mails INSA depuis le menu à gauche.\nPlanex a aussi été un peu amélioré !\n\nUne partie de vos remarques ont été prises en compte pour cette mise à jour, d'autres sont à venir.\nMerci pour votre retour lors du sondage !" + "text": "L'appli fait peau neuve ! Avec une interface plus rapide, plus jolie et moderne, nous espérons que vous allez l'apprécier !" }, "aprilFoolsSlide": { "title": "Nouveau dans cette mise à jour !", diff --git a/utils/AsyncStorageManager.js b/utils/AsyncStorageManager.js index 70975a5..94f27ab 100644 --- a/utils/AsyncStorageManager.js +++ b/utils/AsyncStorageManager.js @@ -29,8 +29,8 @@ export default class AsyncStorageManager { default: '1', current: '', }, - showUpdate5: { - key: 'showUpdate5', + updateNumber: { + key: 'updateNumber', default: '1', current: '', }, From 4c6905a5d5e378469d3d97f3eae1d5930e0c8490 Mon Sep 17 00:00:00 2001 From: keplyx Date: Thu, 12 Mar 2020 12:31:02 +0100 Subject: [PATCH 64/66] Changed default sort order --- screens/Proximo/ProximoListScreen.js | 4 ++-- utils/AsyncStorageManager.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index 842fda0..fc0b3cc 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -63,8 +63,8 @@ class ProximoListScreen extends React.Component { this.originalData = this.props.route.params['data']['data']; this.shouldFocusSearchBar = this.props.route.params['shouldFocusSearchBar']; this.state = { - currentlyDisplayedData: this.originalData.sort(sortPrice), - currentSortMode: 1, + currentlyDisplayedData: this.originalData.sort(sortName), + currentSortMode: 3, modalCurrentDisplayItem: null, }; diff --git a/utils/AsyncStorageManager.js b/utils/AsyncStorageManager.js index 94f27ab..46461ed 100644 --- a/utils/AsyncStorageManager.js +++ b/utils/AsyncStorageManager.js @@ -31,7 +31,7 @@ export default class AsyncStorageManager { }, updateNumber: { key: 'updateNumber', - default: '1', + default: '0', current: '', }, proxiwashNotifications: { From 72693d14f2146bece1b7a6119358b3e49427dcb5 Mon Sep 17 00:00:00 2001 From: keplyx Date: Thu, 12 Mar 2020 18:13:25 +0100 Subject: [PATCH 65/66] Fixed crash on emulator --- utils/NotificationsManager.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/utils/NotificationsManager.js b/utils/NotificationsManager.js index da83e20..368fa96 100644 --- a/utils/NotificationsManager.js +++ b/utils/NotificationsManager.js @@ -94,10 +94,14 @@ export default class NotificationsManager { static async initExpoToken() { let token = AsyncStorageManager.getInstance().preferences.expoToken.current; if (token === '') { - await NotificationsManager.askPermissions(); - let expoToken = await Notifications.getExpoPushTokenAsync(); - // Save token for instant use later on - AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.expoToken.key, expoToken); + try { + await NotificationsManager.askPermissions(); + let expoToken = await Notifications.getExpoPushTokenAsync(); + // Save token for instant use later on + AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.expoToken.key, expoToken); + } catch(e) { + console.log(e); + } } } From 14c6ae16b5c6de47078aba567cc06af3f309f627 Mon Sep 17 00:00:00 2001 From: keplyx Date: Thu, 12 Mar 2020 18:14:24 +0100 Subject: [PATCH 66/66] Updated version number --- app.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app.json b/app.json index 57500e5..31a7e78 100644 --- a/app.json +++ b/app.json @@ -10,7 +10,7 @@ "android", "web" ], - "version": "1.5.2", + "version": "2.0.0", "orientation": "portrait", "primaryColor": "#be1522", "userInterfaceStyle": "automatic", @@ -37,7 +37,7 @@ }, "android": { "package": "fr.amicaleinsat.application", - "versionCode": 15, + "versionCode": 16, "icon": "./assets/android.icon.png", "adaptiveIcon": { "foregroundImage": "./assets/android.adaptive-icon.png",