forked from vergnet/application-amicale
Improve planex components to match linter
This commit is contained in:
parent
11b5f2ac71
commit
ab86c1c85c
4 changed files with 753 additions and 679 deletions
|
|
@ -2,91 +2,110 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import {List, withTheme} from 'react-native-paper';
|
||||
import {FlatList, View} from "react-native";
|
||||
import {stringMatchQuery} from "../../../utils/Search";
|
||||
import GroupListItem from "./GroupListItem";
|
||||
import AnimatedAccordion from "../../Animations/AnimatedAccordion";
|
||||
import type {group, groupCategory} from "../../../screens/Planex/GroupSelectionScreen";
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
import {FlatList, View} from 'react-native';
|
||||
import {stringMatchQuery} from '../../../utils/Search';
|
||||
import GroupListItem from './GroupListItem';
|
||||
import AnimatedAccordion from '../../Animations/AnimatedAccordion';
|
||||
import type {
|
||||
PlanexGroupType,
|
||||
PlanexGroupCategoryType,
|
||||
} from '../../../screens/Planex/GroupSelectionScreen';
|
||||
import type {CustomTheme} from '../../../managers/ThemeManager';
|
||||
|
||||
type Props = {
|
||||
item: groupCategory,
|
||||
onGroupPress: (group) => void,
|
||||
onFavoritePress: (group) => void,
|
||||
type PropsType = {
|
||||
item: PlanexGroupCategoryType,
|
||||
onGroupPress: (PlanexGroupType) => void,
|
||||
onFavoritePress: (PlanexGroupType) => void,
|
||||
currentSearchString: string,
|
||||
favoriteNumber: number,
|
||||
height: number,
|
||||
theme: CustomTheme,
|
||||
}
|
||||
};
|
||||
|
||||
const LIST_ITEM_HEIGHT = 64;
|
||||
|
||||
class GroupListAccordion extends React.Component<Props> {
|
||||
|
||||
shouldComponentUpdate(nextProps: Props) {
|
||||
return (nextProps.currentSearchString !== this.props.currentSearchString)
|
||||
|| (nextProps.favoriteNumber !== this.props.favoriteNumber)
|
||||
|| (nextProps.item.content.length !== this.props.item.content.length);
|
||||
class GroupListAccordion extends React.Component<PropsType> {
|
||||
shouldComponentUpdate(nextProps: PropsType): boolean {
|
||||
const {props} = this;
|
||||
return (
|
||||
nextProps.currentSearchString !== props.currentSearchString ||
|
||||
nextProps.favoriteNumber !== props.favoriteNumber ||
|
||||
nextProps.item.content.length !== props.item.content.length
|
||||
);
|
||||
}
|
||||
|
||||
keyExtractor = (item: group) => item.id.toString();
|
||||
|
||||
renderItem = ({item}: { item: group }) => {
|
||||
const onPress = () => this.props.onGroupPress(item);
|
||||
const onStarPress = () => this.props.onFavoritePress(item);
|
||||
getRenderItem = ({item}: {item: PlanexGroupType}): React.Node => {
|
||||
const {props} = this;
|
||||
const onPress = () => {
|
||||
props.onGroupPress(item);
|
||||
};
|
||||
const onStarPress = () => {
|
||||
props.onFavoritePress(item);
|
||||
};
|
||||
return (
|
||||
<GroupListItem
|
||||
height={LIST_ITEM_HEIGHT}
|
||||
item={item}
|
||||
onPress={onPress}
|
||||
onStarPress={onStarPress}/>
|
||||
onStarPress={onStarPress}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
getData() {
|
||||
const originalData = this.props.item.content;
|
||||
let displayData = [];
|
||||
for (let i = 0; i < originalData.length; i++) {
|
||||
if (stringMatchQuery(originalData[i].name, this.props.currentSearchString))
|
||||
displayData.push(originalData[i]);
|
||||
}
|
||||
getData(): Array<PlanexGroupType> {
|
||||
const {props} = this;
|
||||
const originalData = props.item.content;
|
||||
const displayData = [];
|
||||
originalData.forEach((data: PlanexGroupType) => {
|
||||
if (stringMatchQuery(data.name, props.currentSearchString))
|
||||
displayData.push(data);
|
||||
});
|
||||
return displayData;
|
||||
}
|
||||
|
||||
itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
|
||||
itemLayout = (
|
||||
data: ?Array<PlanexGroupType>,
|
||||
index: number,
|
||||
): {length: number, offset: number, index: number} => ({
|
||||
length: LIST_ITEM_HEIGHT,
|
||||
offset: LIST_ITEM_HEIGHT * index,
|
||||
index,
|
||||
});
|
||||
|
||||
keyExtractor = (item: PlanexGroupType): string => item.id.toString();
|
||||
|
||||
render() {
|
||||
const item = this.props.item;
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
const {item} = this.props;
|
||||
return (
|
||||
<View>
|
||||
<AnimatedAccordion
|
||||
title={item.name}
|
||||
style={{
|
||||
height: this.props.height,
|
||||
height: props.height,
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
left={props =>
|
||||
item.id === 0
|
||||
? <List.Icon
|
||||
{...props}
|
||||
icon={"star"}
|
||||
color={this.props.theme.colors.tetrisScore}
|
||||
left={({size}: {size: number}): React.Node =>
|
||||
item.id === 0 ? (
|
||||
<List.Icon
|
||||
size={size}
|
||||
icon="star"
|
||||
color={props.theme.colors.tetrisScore}
|
||||
/>
|
||||
: null}
|
||||
unmountWhenCollapsed={true}// Only render list if expanded for increased performance
|
||||
opened={this.props.item.id === 0 || this.props.currentSearchString.length > 0}
|
||||
>
|
||||
) : null
|
||||
}
|
||||
unmountWhenCollapsed // Only render list if expanded for increased performance
|
||||
opened={props.item.id === 0 || props.currentSearchString.length > 0}>
|
||||
{/* $FlowFixMe */}
|
||||
<FlatList
|
||||
data={this.getData()}
|
||||
extraData={this.props.currentSearchString}
|
||||
renderItem={this.renderItem}
|
||||
extraData={props.currentSearchString}
|
||||
renderItem={this.getRenderItem}
|
||||
keyExtractor={this.keyExtractor}
|
||||
listKey={item.id.toString()}
|
||||
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
|
||||
getItemLayout={this.itemLayout}
|
||||
removeClippedSubviews={true}
|
||||
removeClippedSubviews
|
||||
/>
|
||||
</AnimatedAccordion>
|
||||
</View>
|
||||
|
|
@ -94,4 +113,4 @@ class GroupListAccordion extends React.Component<Props> {
|
|||
}
|
||||
}
|
||||
|
||||
export default withTheme(GroupListAccordion)
|
||||
export default withTheme(GroupListAccordion);
|
||||
|
|
|
|||
|
|
@ -2,60 +2,62 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import {IconButton, List, withTheme} from 'react-native-paper';
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
import type {group} from "../../../screens/Planex/GroupSelectionScreen";
|
||||
import type {CustomTheme} from '../../../managers/ThemeManager';
|
||||
import type {PlanexGroupType} from '../../../screens/Planex/GroupSelectionScreen';
|
||||
|
||||
type Props = {
|
||||
type PropsType = {
|
||||
theme: CustomTheme,
|
||||
onPress: () => void,
|
||||
onStarPress: () => void,
|
||||
item: group,
|
||||
item: PlanexGroupType,
|
||||
height: number,
|
||||
}
|
||||
};
|
||||
|
||||
type State = {
|
||||
type StateType = {
|
||||
isFav: boolean,
|
||||
}
|
||||
};
|
||||
|
||||
class GroupListItem extends React.Component<Props, State> {
|
||||
|
||||
constructor(props) {
|
||||
class GroupListItem extends React.Component<PropsType, StateType> {
|
||||
constructor(props: PropsType) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isFav: (props.item.isFav !== undefined && props.item.isFav),
|
||||
}
|
||||
isFav: props.item.isFav !== undefined && props.item.isFav,
|
||||
};
|
||||
}
|
||||
|
||||
shouldComponentUpdate(prevProps: Props, prevState: State) {
|
||||
return (prevState.isFav !== this.state.isFav);
|
||||
shouldComponentUpdate(prevProps: PropsType, prevState: StateType): boolean {
|
||||
const {isFav} = this.state;
|
||||
return prevState.isFav !== isFav;
|
||||
}
|
||||
|
||||
onStarPress = () => {
|
||||
this.setState({isFav: !this.state.isFav});
|
||||
this.props.onStarPress();
|
||||
}
|
||||
const {props} = this;
|
||||
this.setState((prevState: StateType): StateType => ({
|
||||
isFav: !prevState.isFav,
|
||||
}));
|
||||
props.onStarPress();
|
||||
};
|
||||
|
||||
render() {
|
||||
const colors = this.props.theme.colors;
|
||||
render(): React.Node {
|
||||
const {props, state} = this;
|
||||
const {colors} = props.theme;
|
||||
return (
|
||||
<List.Item
|
||||
title={this.props.item.name}
|
||||
onPress={this.props.onPress}
|
||||
left={props =>
|
||||
<List.Icon
|
||||
{...props}
|
||||
icon={"chevron-right"}/>}
|
||||
right={props =>
|
||||
title={props.item.name}
|
||||
onPress={props.onPress}
|
||||
left={({size}: {size: number}): React.Node => (
|
||||
<List.Icon size={size} icon="chevron-right" />
|
||||
)}
|
||||
right={({size, color}: {size: number, color: string}): React.Node => (
|
||||
<IconButton
|
||||
{...props}
|
||||
icon={"star"}
|
||||
size={size}
|
||||
icon="star"
|
||||
onPress={this.onStarPress}
|
||||
color={this.state.isFav
|
||||
? colors.tetrisScore
|
||||
: props.color}
|
||||
/>}
|
||||
color={state.isFav ? colors.tetrisScore : color}
|
||||
/>
|
||||
)}
|
||||
style={{
|
||||
height: this.props.height,
|
||||
height: props.height,
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,44 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Platform} from "react-native";
|
||||
import i18n from "i18n-js";
|
||||
import {Searchbar} from "react-native-paper";
|
||||
import {stringMatchQuery} from "../../utils/Search";
|
||||
import WebSectionList from "../../components/Screens/WebSectionList";
|
||||
import GroupListAccordion from "../../components/Lists/PlanexGroups/GroupListAccordion";
|
||||
import AsyncStorageManager from "../../managers/AsyncStorageManager";
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
import {Platform} from 'react-native';
|
||||
import i18n from 'i18n-js';
|
||||
import {Searchbar} from 'react-native-paper';
|
||||
import {StackNavigationProp} from '@react-navigation/stack';
|
||||
import {stringMatchQuery} from '../../utils/Search';
|
||||
import WebSectionList from '../../components/Screens/WebSectionList';
|
||||
import GroupListAccordion from '../../components/Lists/PlanexGroups/GroupListAccordion';
|
||||
import AsyncStorageManager from '../../managers/AsyncStorageManager';
|
||||
|
||||
const LIST_ITEM_HEIGHT = 70;
|
||||
|
||||
export type group = {
|
||||
export type PlanexGroupType = {
|
||||
name: string,
|
||||
id: number,
|
||||
isFav: boolean,
|
||||
};
|
||||
|
||||
export type groupCategory = {
|
||||
export type PlanexGroupCategoryType = {
|
||||
name: string,
|
||||
id: number,
|
||||
content: Array<group>,
|
||||
content: Array<PlanexGroupType>,
|
||||
};
|
||||
|
||||
type Props = {
|
||||
type PropsType = {
|
||||
navigation: StackNavigationProp,
|
||||
}
|
||||
|
||||
type State = {
|
||||
currentSearchString: string,
|
||||
favoriteGroups: Array<group>,
|
||||
};
|
||||
|
||||
function sortName(a: group | groupCategory, b: group | groupCategory) {
|
||||
if (a.name.toLowerCase() < b.name.toLowerCase())
|
||||
return -1;
|
||||
if (a.name.toLowerCase() > b.name.toLowerCase())
|
||||
return 1;
|
||||
type StateType = {
|
||||
currentSearchString: string,
|
||||
favoriteGroups: Array<PlanexGroupType>,
|
||||
};
|
||||
|
||||
function sortName(
|
||||
a: PlanexGroupType | PlanexGroupCategoryType,
|
||||
b: PlanexGroupType | PlanexGroupCategoryType,
|
||||
): number {
|
||||
if (a.name.toLowerCase() < b.name.toLowerCase()) return -1;
|
||||
if (a.name.toLowerCase() > b.name.toLowerCase()) return 1;
|
||||
return 0;
|
||||
}
|
||||
|
||||
|
|
@ -47,99 +48,18 @@ const REPLACE_REGEX = /_/g;
|
|||
/**
|
||||
* Class defining planex group selection screen.
|
||||
*/
|
||||
class GroupSelectionScreen extends React.Component<Props, State> {
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
currentSearchString: '',
|
||||
favoriteGroups: AsyncStorageManager.getObject(AsyncStorageManager.PREFERENCES.planexFavoriteGroups.key),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the header content
|
||||
*/
|
||||
componentDidMount() {
|
||||
this.props.navigation.setOptions({
|
||||
headerTitle: this.getSearchBar,
|
||||
headerBackTitleVisible: false,
|
||||
headerTitleContainerStyle: Platform.OS === 'ios' ?
|
||||
{marginHorizontal: 0, width: '70%'} :
|
||||
{marginHorizontal: 0, right: 50, left: 50},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the header search bar
|
||||
*
|
||||
* @return {*}
|
||||
*/
|
||||
getSearchBar = () => {
|
||||
return (
|
||||
<Searchbar
|
||||
placeholder={i18n.t('screens.proximo.search')}
|
||||
onChangeText={this.onSearchStringChange}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Callback used when the search changes
|
||||
*
|
||||
* @param str The new search string
|
||||
*/
|
||||
onSearchStringChange = (str: string) => {
|
||||
this.setState({currentSearchString: str})
|
||||
};
|
||||
|
||||
/**
|
||||
* Callback used when clicking an article in the list.
|
||||
* It opens the modal to show detailed information about the article
|
||||
*
|
||||
* @param item The article pressed
|
||||
*/
|
||||
onListItemPress = (item: group) => {
|
||||
this.props.navigation.navigate("planex", {
|
||||
screen: "index",
|
||||
params: {group: item}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Callback used when the user clicks on the favorite button
|
||||
*
|
||||
* @param item The item to add/remove from favorites
|
||||
*/
|
||||
onListFavoritePress = (item: group) => {
|
||||
this.updateGroupFavorites(item);
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks if the given group is in the favorites list
|
||||
*
|
||||
* @param group The group to check
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isGroupInFavorites(group: group) {
|
||||
let isFav = false;
|
||||
for (let i = 0; i < this.state.favoriteGroups.length; i++) {
|
||||
if (group.id === this.state.favoriteGroups[i].id) {
|
||||
isFav = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return isFav;
|
||||
}
|
||||
|
||||
class GroupSelectionScreen extends React.Component<PropsType, StateType> {
|
||||
/**
|
||||
* Removes the given group from the given array
|
||||
*
|
||||
* @param favorites The array containing favorites groups
|
||||
* @param group The group to remove from the array
|
||||
*/
|
||||
removeGroupFromFavorites(favorites: Array<group>, group: group) {
|
||||
for (let i = 0; i < favorites.length; i++) {
|
||||
static removeGroupFromFavorites(
|
||||
favorites: Array<PlanexGroupType>,
|
||||
group: PlanexGroupType,
|
||||
) {
|
||||
for (let i = 0; i < favorites.length; i += 1) {
|
||||
if (group.id === favorites[i].id) {
|
||||
favorites.splice(i, 1);
|
||||
break;
|
||||
|
|
@ -153,95 +73,91 @@ class GroupSelectionScreen extends React.Component<Props, State> {
|
|||
* @param favorites The array containing favorites groups
|
||||
* @param group The group to add to the array
|
||||
*/
|
||||
addGroupToFavorites(favorites: Array<group>, group: group) {
|
||||
group.isFav = true;
|
||||
favorites.push(group);
|
||||
static addGroupToFavorites(
|
||||
favorites: Array<PlanexGroupType>,
|
||||
group: PlanexGroupType,
|
||||
) {
|
||||
const favGroup = {...group};
|
||||
favGroup.isFav = true;
|
||||
favorites.push(favGroup);
|
||||
favorites.sort(sortName);
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds or removes the given group to the favorites list, depending on whether it is already in it or not.
|
||||
* Favorites are then saved in user preferences
|
||||
*
|
||||
* @param group The group to add/remove to favorites
|
||||
*/
|
||||
updateGroupFavorites(group: group) {
|
||||
let newFavorites = [...this.state.favoriteGroups]
|
||||
if (this.isGroupInFavorites(group))
|
||||
this.removeGroupFromFavorites(newFavorites, group);
|
||||
else
|
||||
this.addGroupToFavorites(newFavorites, group);
|
||||
this.setState({favoriteGroups: newFavorites})
|
||||
AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.planexFavoriteGroups.key, newFavorites);
|
||||
constructor(props: PropsType) {
|
||||
super(props);
|
||||
this.state = {
|
||||
currentSearchString: '',
|
||||
favoriteGroups: AsyncStorageManager.getObject(
|
||||
AsyncStorageManager.PREFERENCES.planexFavoriteGroups.key,
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks whether to display the given group category, depending on user search query
|
||||
*
|
||||
* @param item The group category
|
||||
* @returns {boolean}
|
||||
* Creates the header content
|
||||
*/
|
||||
shouldDisplayAccordion(item: groupCategory) {
|
||||
let shouldDisplay = false;
|
||||
for (let i = 0; i < item.content.length; i++) {
|
||||
if (stringMatchQuery(item.content[i].name, this.state.currentSearchString)) {
|
||||
shouldDisplay = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return shouldDisplay;
|
||||
componentDidMount() {
|
||||
const [navigation] = this.props;
|
||||
navigation.setOptions({
|
||||
headerTitle: this.getSearchBar,
|
||||
headerBackTitleVisible: false,
|
||||
headerTitleContainerStyle:
|
||||
Platform.OS === 'ios'
|
||||
? {marginHorizontal: 0, width: '70%'}
|
||||
: {marginHorizontal: 0, right: 50, left: 50},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the header search bar
|
||||
*
|
||||
* @return {*}
|
||||
*/
|
||||
getSearchBar = (): React.Node => {
|
||||
return (
|
||||
<Searchbar
|
||||
placeholder={i18n.t('screens.proximo.search')}
|
||||
onChangeText={this.onSearchStringChange}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Gets a render item for the given article
|
||||
*
|
||||
* @param item The article to render
|
||||
* @return {*}
|
||||
*/
|
||||
renderItem = ({item}: { item: groupCategory }) => {
|
||||
getRenderItem = ({item}: {item: PlanexGroupCategoryType}): React.Node => {
|
||||
const {currentSearchString, favoriteGroups} = this.state;
|
||||
if (this.shouldDisplayAccordion(item)) {
|
||||
return (
|
||||
<GroupListAccordion
|
||||
item={item}
|
||||
onGroupPress={this.onListItemPress}
|
||||
onFavoritePress={this.onListFavoritePress}
|
||||
currentSearchString={this.state.currentSearchString}
|
||||
favoriteNumber={this.state.favoriteGroups.length}
|
||||
currentSearchString={currentSearchString}
|
||||
favoriteNumber={favoriteGroups.length}
|
||||
height={LIST_ITEM_HEIGHT}
|
||||
/>
|
||||
);
|
||||
} else
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Generates the dataset to be used in the FlatList.
|
||||
* This improves formatting of group names, sorts alphabetically the categories, and adds favorites at the top.
|
||||
*
|
||||
* @param fetchedData The raw data fetched from the server
|
||||
* @returns {[]}
|
||||
*/
|
||||
generateData(fetchedData: { [key: string]: groupCategory }) {
|
||||
let data = [];
|
||||
for (let key in fetchedData) {
|
||||
this.formatGroups(fetchedData[key]);
|
||||
data.push(fetchedData[key]);
|
||||
}
|
||||
data.sort(sortName);
|
||||
data.unshift({name: i18n.t("screens.planex.favorites"), id: 0, content: this.state.favoriteGroups});
|
||||
return data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Replaces underscore by spaces and sets the favorite state of every group in the given category
|
||||
*
|
||||
* @param item The category containing groups to format
|
||||
* @param groups The groups to format
|
||||
* @return {Array<PlanexGroupType>}
|
||||
*/
|
||||
formatGroups(item: groupCategory) {
|
||||
for (let i = 0; i < item.content.length; i++) {
|
||||
item.content[i].name = item.content[i].name.replace(REPLACE_REGEX, " ")
|
||||
item.content[i].isFav = this.isGroupInFavorites(item.content[i]);
|
||||
}
|
||||
getFormattedGroups(groups: Array<PlanexGroupType>): Array<PlanexGroupType> {
|
||||
return groups.map((group: PlanexGroupType): PlanexGroupType => {
|
||||
const newGroup = {...group};
|
||||
newGroup.name = group.name.replace(REPLACE_REGEX, ' ');
|
||||
newGroup.isFav = this.isGroupInFavorites(group);
|
||||
return newGroup;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -250,25 +166,141 @@ class GroupSelectionScreen extends React.Component<Props, State> {
|
|||
* @param fetchedData
|
||||
* @return {*}
|
||||
* */
|
||||
createDataset = (fetchedData: { [key: string]: groupCategory }) => {
|
||||
createDataset = (fetchedData: {
|
||||
[key: string]: PlanexGroupCategoryType,
|
||||
}): Array<{title: string, data: Array<PlanexGroupCategoryType>}> => {
|
||||
return [
|
||||
{
|
||||
title: '',
|
||||
data: this.generateData(fetchedData)
|
||||
}
|
||||
data: this.generateData(fetchedData),
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
/**
|
||||
* Callback used when the search changes
|
||||
*
|
||||
* @param str The new search string
|
||||
*/
|
||||
onSearchStringChange = (str: string) => {
|
||||
this.setState({currentSearchString: str});
|
||||
};
|
||||
|
||||
/**
|
||||
* Callback used when clicking an article in the list.
|
||||
* It opens the modal to show detailed information about the article
|
||||
*
|
||||
* @param item The article pressed
|
||||
*/
|
||||
onListItemPress = (item: PlanexGroupType) => {
|
||||
const {navigation} = this.props;
|
||||
navigation.navigate('planex', {
|
||||
screen: 'index',
|
||||
params: {group: item},
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Callback used when the user clicks on the favorite button
|
||||
*
|
||||
* @param item The item to add/remove from favorites
|
||||
*/
|
||||
onListFavoritePress = (item: PlanexGroupType) => {
|
||||
this.updateGroupFavorites(item);
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks if the given group is in the favorites list
|
||||
*
|
||||
* @param group The group to check
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isGroupInFavorites(group: PlanexGroupType): boolean {
|
||||
let isFav = false;
|
||||
const {favoriteGroups} = this.state;
|
||||
favoriteGroups.forEach((favGroup: PlanexGroupType) => {
|
||||
if (group.id === favGroup.id) isFav = true;
|
||||
});
|
||||
return isFav;
|
||||
}
|
||||
|
||||
render() {
|
||||
/**
|
||||
* Adds or removes the given group to the favorites list, depending on whether it is already in it or not.
|
||||
* Favorites are then saved in user preferences
|
||||
*
|
||||
* @param group The group to add/remove to favorites
|
||||
*/
|
||||
updateGroupFavorites(group: PlanexGroupType) {
|
||||
const {favoriteGroups} = this.state;
|
||||
const newFavorites = [...favoriteGroups];
|
||||
if (this.isGroupInFavorites(group))
|
||||
GroupSelectionScreen.removeGroupFromFavorites(newFavorites, group);
|
||||
else GroupSelectionScreen.addGroupToFavorites(newFavorites, group);
|
||||
this.setState({favoriteGroups: newFavorites});
|
||||
AsyncStorageManager.set(
|
||||
AsyncStorageManager.PREFERENCES.planexFavoriteGroups.key,
|
||||
newFavorites,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks whether to display the given group category, depending on user search query
|
||||
*
|
||||
* @param item The group category
|
||||
* @returns {boolean}
|
||||
*/
|
||||
shouldDisplayAccordion(item: PlanexGroupCategoryType): boolean {
|
||||
const {currentSearchString} = this.state;
|
||||
let shouldDisplay = false;
|
||||
for (let i = 0; i < item.content.length; i += 1) {
|
||||
if (stringMatchQuery(item.content[i].name, currentSearchString)) {
|
||||
shouldDisplay = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return shouldDisplay;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates the dataset to be used in the FlatList.
|
||||
* This improves formatting of group names, sorts alphabetically the categories, and adds favorites at the top.
|
||||
*
|
||||
* @param fetchedData The raw data fetched from the server
|
||||
* @returns {[]}
|
||||
*/
|
||||
generateData(fetchedData: {
|
||||
[key: string]: PlanexGroupCategoryType,
|
||||
}): Array<PlanexGroupCategoryType> {
|
||||
const {favoriteGroups} = this.state;
|
||||
const data = [];
|
||||
// eslint-disable-next-line flowtype/no-weak-types
|
||||
(Object.values(fetchedData): Array<any>).forEach(
|
||||
(category: PlanexGroupCategoryType) => {
|
||||
const newCat = {...category};
|
||||
newCat.content = this.getFormattedGroups(category.content);
|
||||
data.push(newCat);
|
||||
},
|
||||
);
|
||||
data.sort(sortName);
|
||||
data.unshift({
|
||||
name: i18n.t('screens.planex.favorites'),
|
||||
id: 0,
|
||||
content: favoriteGroups,
|
||||
});
|
||||
return data;
|
||||
}
|
||||
|
||||
render(): React.Node {
|
||||
const {props, state} = this;
|
||||
return (
|
||||
<WebSectionList
|
||||
{...this.props}
|
||||
navigation={props.navigation}
|
||||
createDataset={this.createDataset}
|
||||
autoRefreshTime={0}
|
||||
refreshOnFocus={false}
|
||||
fetchUrl={GROUPS_URL}
|
||||
renderItem={this.renderItem}
|
||||
updateData={this.state.currentSearchString + this.state.favoriteGroups.length}
|
||||
renderItem={this.getRenderItem}
|
||||
updateData={state.currentSearchString + state.favoriteGroups.length}
|
||||
itemHeight={LIST_ITEM_HEIGHT}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,37 +1,36 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import type {CustomTheme} from "../../managers/ThemeManager";
|
||||
import ThemeManager from "../../managers/ThemeManager";
|
||||
import WebViewScreen from "../../components/Screens/WebViewScreen";
|
||||
import {withTheme} from "react-native-paper";
|
||||
import i18n from "i18n-js";
|
||||
import {View} from "react-native";
|
||||
import AsyncStorageManager from "../../managers/AsyncStorageManager";
|
||||
import AlertDialog from "../../components/Dialogs/AlertDialog";
|
||||
import {dateToString, getTimeOnlyString} from "../../utils/Planning";
|
||||
import DateManager from "../../managers/DateManager";
|
||||
import AnimatedBottomBar from "../../components/Animations/AnimatedBottomBar";
|
||||
import {CommonActions} from "@react-navigation/native";
|
||||
import ErrorView from "../../components/Screens/ErrorView";
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
import type {group} from "./GroupSelectionScreen";
|
||||
import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
|
||||
import MascotPopup from "../../components/Mascot/MascotPopup";
|
||||
import {withTheme} from 'react-native-paper';
|
||||
import i18n from 'i18n-js';
|
||||
import {View} from 'react-native';
|
||||
import {CommonActions} from '@react-navigation/native';
|
||||
import {StackNavigationProp} from '@react-navigation/stack';
|
||||
import type {CustomTheme} from '../../managers/ThemeManager';
|
||||
import ThemeManager from '../../managers/ThemeManager';
|
||||
import WebViewScreen from '../../components/Screens/WebViewScreen';
|
||||
import AsyncStorageManager from '../../managers/AsyncStorageManager';
|
||||
import AlertDialog from '../../components/Dialogs/AlertDialog';
|
||||
import {dateToString, getTimeOnlyString} from '../../utils/Planning';
|
||||
import DateManager from '../../managers/DateManager';
|
||||
import AnimatedBottomBar from '../../components/Animations/AnimatedBottomBar';
|
||||
import ErrorView from '../../components/Screens/ErrorView';
|
||||
import type {PlanexGroupType} from './GroupSelectionScreen';
|
||||
import {MASCOT_STYLE} from '../../components/Mascot/Mascot';
|
||||
import MascotPopup from '../../components/Mascot/MascotPopup';
|
||||
|
||||
type Props = {
|
||||
type PropsType = {
|
||||
navigation: StackNavigationProp,
|
||||
route: { params: { group: group } },
|
||||
route: {params: {group: PlanexGroupType}},
|
||||
theme: CustomTheme,
|
||||
}
|
||||
};
|
||||
|
||||
type State = {
|
||||
type StateType = {
|
||||
dialogVisible: boolean,
|
||||
dialogTitle: string,
|
||||
dialogMessage: string,
|
||||
currentGroup: group,
|
||||
}
|
||||
|
||||
currentGroup: PlanexGroupType,
|
||||
};
|
||||
|
||||
const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
|
||||
|
||||
|
|
@ -69,21 +68,21 @@ const OBSERVE_MUTATIONS_INJECTED =
|
|||
'function removeAlpha(node) {\n' +
|
||||
' let bg = node.css("background-color");\n' +
|
||||
' if (bg.match("^rgba")) {\n' +
|
||||
' let a = bg.slice(5).split(\',\');\n' +
|
||||
" let a = bg.slice(5).split(',');\n" +
|
||||
' // Fix for tooltips with broken background\n' +
|
||||
' if (parseInt(a[0]) === parseInt(a[1]) && parseInt(a[1]) === parseInt(a[2]) && parseInt(a[2]) === 0) {\n' +
|
||||
' a[0] = a[1] = a[2] = \'255\';\n' +
|
||||
" a[0] = a[1] = a[2] = '255';\n" +
|
||||
' }\n' +
|
||||
' let newBg =\'rgb(\' + a[0] + \',\' + a[1] + \',\' + a[2] + \')\';\n' +
|
||||
" let newBg ='rgb(' + a[0] + ',' + a[1] + ',' + a[2] + ')';\n" +
|
||||
' node.css("background-color", newBg);\n' +
|
||||
' }\n' +
|
||||
'}\n' +
|
||||
'// Observe for planning DOM changes\n' +
|
||||
'let observer = new MutationObserver(function(mutations) {\n' +
|
||||
' for (let i = 0; i < mutations.length; i++) {\n' +
|
||||
' if (mutations[i][\'addedNodes\'].length > 0 &&\n' +
|
||||
" if (mutations[i]['addedNodes'].length > 0 &&\n" +
|
||||
' ($(mutations[i][\'addedNodes\'][0]).hasClass("fc-event") || $(mutations[i][\'addedNodes\'][0]).hasClass("tooltiptopicevent")))\n' +
|
||||
' removeAlpha($(mutations[i][\'addedNodes\'][0]))\n' +
|
||||
" removeAlpha($(mutations[i]['addedNodes'][0]))\n" +
|
||||
' }\n' +
|
||||
'});\n' +
|
||||
'// observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});\n' +
|
||||
|
|
@ -108,20 +107,22 @@ calendar.option({
|
|||
}
|
||||
});`;
|
||||
|
||||
const CUSTOM_CSS = "body>.container{padding-top:20px; padding-bottom: 50px}header,#entite,#groupe_visibility,#calendar .fc-left,#calendar .fc-right{display:none}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-time{font-size:.5rem}#calendar .fc-month-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-month-view .fc-content-skeleton .fc-time{font-size:.7rem}.fc-axis{font-size:.8rem;width:15px!important}.fc-day-header{font-size:.8rem}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}";
|
||||
const CUSTOM_CSS_DARK = "body{background-color:#121212}.fc-unthemed .fc-content,.fc-unthemed .fc-divider,.fc-unthemed .fc-list-heading td,.fc-unthemed .fc-list-view,.fc-unthemed .fc-popover,.fc-unthemed .fc-row,.fc-unthemed tbody,.fc-unthemed td,.fc-unthemed th,.fc-unthemed thead{border-color:#222}.fc-toolbar .fc-center>*,h2,table{color:#fff}.fc-event-container{color:#121212}.fc-event-container .fc-bg{opacity:0.2;background-color:#000}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}";
|
||||
const CUSTOM_CSS =
|
||||
'body>.container{padding-top:20px; padding-bottom: 50px}header,#entite,#groupe_visibility,#calendar .fc-left,#calendar .fc-right{display:none}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-time{font-size:.5rem}#calendar .fc-month-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-month-view .fc-content-skeleton .fc-time{font-size:.7rem}.fc-axis{font-size:.8rem;width:15px!important}.fc-day-header{font-size:.8rem}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}';
|
||||
const CUSTOM_CSS_DARK =
|
||||
'body{background-color:#121212}.fc-unthemed .fc-content,.fc-unthemed .fc-divider,.fc-unthemed .fc-list-heading td,.fc-unthemed .fc-list-view,.fc-unthemed .fc-popover,.fc-unthemed .fc-row,.fc-unthemed tbody,.fc-unthemed td,.fc-unthemed th,.fc-unthemed thead{border-color:#222}.fc-toolbar .fc-center>*,h2,table{color:#fff}.fc-event-container{color:#121212}.fc-event-container .fc-bg{opacity:0.2;background-color:#000}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}';
|
||||
|
||||
const INJECT_STYLE = `
|
||||
$('head').append('<style>` + CUSTOM_CSS + `</style>');
|
||||
$('head').append('<style>${CUSTOM_CSS}</style>');
|
||||
`;
|
||||
|
||||
/**
|
||||
* Class defining the app's Planex screen.
|
||||
* This screen uses a webview to render the page
|
||||
*/
|
||||
class PlanexScreen extends React.Component<Props, State> {
|
||||
|
||||
class PlanexScreen extends React.Component<PropsType, StateType> {
|
||||
webScreenRef: {current: null | WebViewScreen};
|
||||
|
||||
barRef: {current: null | AnimatedBottomBar};
|
||||
|
||||
customInjectedJS: string;
|
||||
|
|
@ -129,23 +130,25 @@ class PlanexScreen extends React.Component<Props, State> {
|
|||
/**
|
||||
* Defines custom injected JavaScript to improve the page display on mobile
|
||||
*/
|
||||
constructor(props) {
|
||||
constructor(props: PropsType) {
|
||||
super(props);
|
||||
this.webScreenRef = React.createRef();
|
||||
this.barRef = React.createRef();
|
||||
|
||||
let currentGroup = AsyncStorageManager.getString(AsyncStorageManager.PREFERENCES.planexCurrentGroup.key);
|
||||
let currentGroup = AsyncStorageManager.getString(
|
||||
AsyncStorageManager.PREFERENCES.planexCurrentGroup.key,
|
||||
);
|
||||
if (currentGroup === '')
|
||||
currentGroup = {name: "SELECT GROUP", id: -1, isFav: false};
|
||||
currentGroup = {name: 'SELECT GROUP', id: -1, isFav: false};
|
||||
else {
|
||||
currentGroup = JSON.parse(currentGroup);
|
||||
props.navigation.setOptions({title: currentGroup.name})
|
||||
props.navigation.setOptions({title: currentGroup.name});
|
||||
}
|
||||
this.state = {
|
||||
dialogVisible: false,
|
||||
dialogTitle: "",
|
||||
dialogMessage: "",
|
||||
currentGroup: currentGroup,
|
||||
dialogTitle: '',
|
||||
dialogMessage: '',
|
||||
currentGroup,
|
||||
};
|
||||
this.generateInjectedJS(currentGroup.id);
|
||||
}
|
||||
|
|
@ -154,62 +157,8 @@ class PlanexScreen extends React.Component<Props, State> {
|
|||
* Register for events and show the banner after 2 seconds
|
||||
*/
|
||||
componentDidMount() {
|
||||
this.props.navigation.addListener('focus', this.onScreenFocus);
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback used when the user clicks on the navigate to settings button.
|
||||
* This will hide the banner and open the SettingsScreen
|
||||
*/
|
||||
onGoToSettings = () => this.props.navigation.navigate('settings');
|
||||
|
||||
onScreenFocus = () => {
|
||||
this.handleNavigationParams();
|
||||
};
|
||||
|
||||
/**
|
||||
* If navigations parameters contain a group, set it as selected
|
||||
*/
|
||||
handleNavigationParams = () => {
|
||||
if (this.props.route.params != null) {
|
||||
if (this.props.route.params.group !== undefined && this.props.route.params.group !== null) {
|
||||
// reset params to prevent infinite loop
|
||||
this.selectNewGroup(this.props.route.params.group);
|
||||
this.props.navigation.dispatch(CommonActions.setParams({group: null}));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Sends the webpage a message with the new group to select and save it to preferences
|
||||
*
|
||||
* @param group The group object selected
|
||||
*/
|
||||
selectNewGroup(group: group) {
|
||||
this.sendMessage('setGroup', group.id);
|
||||
this.setState({currentGroup: group});
|
||||
AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.planexCurrentGroup.key, group);
|
||||
this.props.navigation.setOptions({title: group.name});
|
||||
this.generateInjectedJS(group.id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates custom JavaScript to be injected into the webpage
|
||||
*
|
||||
* @param groupID The current group selected
|
||||
*/
|
||||
generateInjectedJS(groupID: number) {
|
||||
this.customInjectedJS = "$(document).ready(function() {"
|
||||
+ OBSERVE_MUTATIONS_INJECTED
|
||||
+ FULL_CALENDAR_SETTINGS
|
||||
+ "displayAde(" + groupID + ");" // Reset Ade
|
||||
+ (DateManager.isWeekend(new Date()) ? "calendar.next()" : "")
|
||||
+ INJECT_STYLE;
|
||||
|
||||
if (ThemeManager.getNightMode())
|
||||
this.customInjectedJS += "$('head').append('<style>" + CUSTOM_CSS_DARK + "</style>');";
|
||||
|
||||
this.customInjectedJS += 'removeAlpha();});true;'; // Prevents crash on ios
|
||||
const {navigation} = this.props;
|
||||
navigation.addListener('focus', this.onScreenFocus);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -218,12 +167,57 @@ class PlanexScreen extends React.Component<Props, State> {
|
|||
* @param nextProps
|
||||
* @returns {boolean}
|
||||
*/
|
||||
shouldComponentUpdate(nextProps: Props): boolean {
|
||||
if (nextProps.theme.dark !== this.props.theme.dark)
|
||||
this.generateInjectedJS(this.state.currentGroup.id);
|
||||
shouldComponentUpdate(nextProps: PropsType): boolean {
|
||||
const {props, state} = this;
|
||||
if (nextProps.theme.dark !== props.theme.dark)
|
||||
this.generateInjectedJS(state.currentGroup.id);
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the Webview, with an error view on top if no group is selected.
|
||||
*
|
||||
* @returns {*}
|
||||
*/
|
||||
getWebView(): React.Node {
|
||||
const {props, state} = this;
|
||||
const showWebview = state.currentGroup.id !== -1;
|
||||
|
||||
return (
|
||||
<View style={{height: '100%'}}>
|
||||
{!showWebview ? (
|
||||
<ErrorView
|
||||
navigation={props.navigation}
|
||||
icon="account-clock"
|
||||
message={i18n.t('screens.planex.noGroupSelected')}
|
||||
showRetryButton={false}
|
||||
/>
|
||||
) : null}
|
||||
<WebViewScreen
|
||||
ref={this.webScreenRef}
|
||||
navigation={props.navigation}
|
||||
url={PLANEX_URL}
|
||||
customJS={this.customInjectedJS}
|
||||
onMessage={this.onMessage}
|
||||
onScroll={this.onScroll}
|
||||
showAdvancedControls={false}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback used when the user clicks on the navigate to settings button.
|
||||
* This will hide the banner and open the SettingsScreen
|
||||
*/
|
||||
onGoToSettings = () => {
|
||||
const {navigation} = this.props;
|
||||
navigation.navigate('settings');
|
||||
};
|
||||
|
||||
onScreenFocus = () => {
|
||||
this.handleNavigationParams();
|
||||
};
|
||||
|
||||
/**
|
||||
* Sends a FullCalendar action to the web page inside the webview.
|
||||
|
|
@ -232,14 +226,12 @@ class PlanexScreen extends React.Component<Props, State> {
|
|||
* Or "setGroup" with the group id as data to set the selected group
|
||||
* @param data Data to pass to the action
|
||||
*/
|
||||
sendMessage = (action: string, data: any) => {
|
||||
sendMessage = (action: string, data: string) => {
|
||||
let command;
|
||||
if (action === "setGroup")
|
||||
command = "displayAde(" + data + ")";
|
||||
else
|
||||
command = "$('#calendar').fullCalendar('" + action + "', '" + data + "')";
|
||||
if (action === 'setGroup') command = `displayAde(${data})`;
|
||||
else command = `$('#calendar').fullCalendar('${action}', '${data}')`;
|
||||
if (this.webScreenRef.current != null)
|
||||
this.webScreenRef.current.injectJavaScript(command + ';true;'); // Injected javascript must end with true
|
||||
this.webScreenRef.current.injectJavaScript(`${command};true;`); // Injected javascript must end with true
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -248,16 +240,21 @@ class PlanexScreen extends React.Component<Props, State> {
|
|||
* @param event
|
||||
*/
|
||||
onMessage = (event: {nativeEvent: {data: string}}) => {
|
||||
const data: { start: string, end: string, title: string, color: string } = JSON.parse(event.nativeEvent.data);
|
||||
const data: {
|
||||
start: string,
|
||||
end: string,
|
||||
title: string,
|
||||
color: string,
|
||||
} = JSON.parse(event.nativeEvent.data);
|
||||
const startDate = dateToString(new Date(data.start), true);
|
||||
const endDate = dateToString(new Date(data.end), true);
|
||||
const startString = getTimeOnlyString(startDate);
|
||||
const endString = getTimeOnlyString(endDate);
|
||||
|
||||
let msg = DateManager.getInstance().getTranslatedDate(startDate) + "\n";
|
||||
let msg = `${DateManager.getInstance().getTranslatedDate(startDate)}\n`;
|
||||
if (startString != null && endString != null)
|
||||
msg += startString + ' - ' + endString;
|
||||
this.showDialog(data.title, msg)
|
||||
msg += `${startString} - ${endString}`;
|
||||
this.showDialog(data.title, msg);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -289,87 +286,111 @@ class PlanexScreen extends React.Component<Props, State> {
|
|||
* @param event
|
||||
*/
|
||||
onScroll = (event: SyntheticEvent<EventTarget>) => {
|
||||
if (this.barRef.current != null)
|
||||
this.barRef.current.onScroll(event);
|
||||
if (this.barRef.current != null) this.barRef.current.onScroll(event);
|
||||
};
|
||||
|
||||
/**
|
||||
* Gets the Webview, with an error view on top if no group is selected.
|
||||
*
|
||||
* @returns {*}
|
||||
* If navigations parameters contain a group, set it as selected
|
||||
*/
|
||||
getWebView() {
|
||||
const showWebview = this.state.currentGroup.id !== -1;
|
||||
handleNavigationParams = () => {
|
||||
const {props} = this;
|
||||
if (props.route.params != null) {
|
||||
if (
|
||||
props.route.params.group !== undefined &&
|
||||
props.route.params.group !== null
|
||||
) {
|
||||
// reset params to prevent infinite loop
|
||||
this.selectNewGroup(props.route.params.group);
|
||||
props.navigation.dispatch(CommonActions.setParams({group: null}));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={{height: '100%'}}>
|
||||
{!showWebview
|
||||
? <ErrorView
|
||||
{...this.props}
|
||||
icon={'account-clock'}
|
||||
message={i18n.t("screens.planex.noGroupSelected")}
|
||||
showRetryButton={false}
|
||||
/>
|
||||
: null}
|
||||
<WebViewScreen
|
||||
ref={this.webScreenRef}
|
||||
navigation={this.props.navigation}
|
||||
url={PLANEX_URL}
|
||||
customJS={this.customInjectedJS}
|
||||
onMessage={this.onMessage}
|
||||
onScroll={this.onScroll}
|
||||
showAdvancedControls={false}
|
||||
/>
|
||||
</View>
|
||||
/**
|
||||
* Sends the webpage a message with the new group to select and save it to preferences
|
||||
*
|
||||
* @param group The group object selected
|
||||
*/
|
||||
selectNewGroup(group: PlanexGroupType) {
|
||||
const {navigation} = this.props;
|
||||
this.sendMessage('setGroup', group.id.toString());
|
||||
this.setState({currentGroup: group});
|
||||
AsyncStorageManager.set(
|
||||
AsyncStorageManager.PREFERENCES.planexCurrentGroup.key,
|
||||
group,
|
||||
);
|
||||
navigation.setOptions({title: group.name});
|
||||
this.generateInjectedJS(group.id);
|
||||
}
|
||||
|
||||
render() {
|
||||
/**
|
||||
* Generates custom JavaScript to be injected into the webpage
|
||||
*
|
||||
* @param groupID The current group selected
|
||||
*/
|
||||
generateInjectedJS(groupID: number) {
|
||||
this.customInjectedJS = `$(document).ready(function() {${OBSERVE_MUTATIONS_INJECTED}${FULL_CALENDAR_SETTINGS}displayAde(${groupID});${
|
||||
// Reset Ade
|
||||
DateManager.isWeekend(new Date()) ? 'calendar.next()' : ''
|
||||
}${INJECT_STYLE}`;
|
||||
|
||||
if (ThemeManager.getNightMode())
|
||||
this.customInjectedJS += `$('head').append('<style>${CUSTOM_CSS_DARK}</style>');`;
|
||||
|
||||
this.customInjectedJS += 'removeAlpha();});true;'; // Prevents crash on ios
|
||||
}
|
||||
|
||||
render(): React.Node {
|
||||
const {props, state} = this;
|
||||
return (
|
||||
<View
|
||||
style={{flex: 1}}
|
||||
>
|
||||
<View style={{flex: 1}}>
|
||||
{/* Allow to draw webview bellow banner */}
|
||||
<View style={{
|
||||
<View
|
||||
style={{
|
||||
position: 'absolute',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}}>
|
||||
{this.props.theme.dark // Force component theme update by recreating it on theme change
|
||||
? this.getWebView()
|
||||
: <View style={{height: '100%'}}>{this.getWebView()}</View>}
|
||||
{props.theme.dark ? ( // Force component theme update by recreating it on theme change
|
||||
this.getWebView()
|
||||
) : (
|
||||
<View style={{height: '100%'}}>{this.getWebView()}</View>
|
||||
)}
|
||||
</View>
|
||||
{AsyncStorageManager.getString(AsyncStorageManager.PREFERENCES.defaultStartScreen.key)
|
||||
.toLowerCase() !== 'planex'
|
||||
? <MascotPopup
|
||||
{AsyncStorageManager.getString(
|
||||
AsyncStorageManager.PREFERENCES.defaultStartScreen.key,
|
||||
).toLowerCase() !== 'planex' ? (
|
||||
<MascotPopup
|
||||
prefKey={AsyncStorageManager.PREFERENCES.planexShowBanner.key}
|
||||
title={i18n.t("screens.planex.mascotDialog.title")}
|
||||
message={i18n.t("screens.planex.mascotDialog.message")}
|
||||
icon={"emoticon-kiss"}
|
||||
title={i18n.t('screens.planex.mascotDialog.title')}
|
||||
message={i18n.t('screens.planex.mascotDialog.message')}
|
||||
icon="emoticon-kiss"
|
||||
buttons={{
|
||||
action: {
|
||||
message: i18n.t("screens.planex.mascotDialog.ok"),
|
||||
icon: "cog",
|
||||
message: i18n.t('screens.planex.mascotDialog.ok'),
|
||||
icon: 'cog',
|
||||
onPress: this.onGoToSettings,
|
||||
},
|
||||
cancel: {
|
||||
message: i18n.t("screens.planex.mascotDialog.cancel"),
|
||||
icon: "close",
|
||||
color: this.props.theme.colors.warning,
|
||||
}
|
||||
message: i18n.t('screens.planex.mascotDialog.cancel'),
|
||||
icon: 'close',
|
||||
color: props.theme.colors.warning,
|
||||
},
|
||||
}}
|
||||
emotion={MASCOT_STYLE.INTELLO}
|
||||
/> : null }
|
||||
/>
|
||||
) : null}
|
||||
<AlertDialog
|
||||
visible={this.state.dialogVisible}
|
||||
visible={state.dialogVisible}
|
||||
onDismiss={this.hideDialog}
|
||||
title={this.state.dialogTitle}
|
||||
message={this.state.dialogMessage}/>
|
||||
title={state.dialogTitle}
|
||||
message={state.dialogMessage}
|
||||
/>
|
||||
<AnimatedBottomBar
|
||||
{...this.props}
|
||||
navigation={props.navigation}
|
||||
ref={this.barRef}
|
||||
onPress={this.sendMessage}
|
||||
seekAttention={this.state.currentGroup.id === -1}
|
||||
seekAttention={state.currentGroup.id === -1}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue