@olea-bps/base 1.1.11 → 1.1.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -131,7 +131,8 @@ class JobFilterComponent extends React.Component {
131
131
  title={item.name}
132
132
  textStyle={this.styles.title}
133
133
  onPress={() => this.handleChange(index)}
134
- checkedColor={colors.primary}
134
+ checkedColor={colors.checkboxChecked}
135
+ uncheckedColor={colors.checkboxUnchecked}
135
136
  />}
136
137
  keyExtractor={this._keyExtractor}
137
138
  />
@@ -12,78 +12,91 @@
12
12
  * limitations under the License.
13
13
  */
14
14
 
15
- import { useMemo } from 'react';
15
+ import { useMemo } from 'react'
16
16
  import {
17
- Text,
18
- StyleSheet,
19
- View,
20
- TouchableOpacity,
21
- Image,
22
- } from 'react-native';
17
+ Text,
18
+ StyleSheet,
19
+ View,
20
+ TouchableOpacity,
21
+ Image
22
+ } from 'react-native'
23
23
 
24
- import { useTheme } from 'react-native-paper';
25
- import { useTranslation } from 'react-i18next';
26
- import { useNavigation } from '@react-navigation/native';
24
+ import { useTheme } from 'react-native-paper'
25
+ import { useTranslation } from 'react-i18next'
26
+ import { useNavigation } from '@react-navigation/native'
27
27
 
28
- import { DateTime } from 'luxon';
28
+ import { DateTime } from 'luxon'
29
29
 
30
- import { useLanguage } from '../../libraries/core';
31
- import IconsOpenasist from '../../libraries/icons-openasist';
30
+ import { useLanguage } from '../../libraries/core'
31
+ import IconsOpenasist from '../../libraries/icons-openasist'
32
32
 
33
- import componentStyles from './styles';
33
+ import componentStyles from './styles'
34
34
 
35
- export default function NewsListItem({ news }) {
36
- const componentName = NewsListItem.name;
37
- const language = useLanguage();
38
- const { t } = useTranslation();
39
- const theme = useTheme()
40
- const { themeStyles, colors, fontSizes } = theme;
41
- const navigation = useNavigation();
35
+ export default function NewsListItem ({ news }) {
36
+ const componentName = NewsListItem.name
37
+ const language = useLanguage()
38
+ const { t } = useTranslation()
39
+ const theme = useTheme()
40
+ const { themeStyles, colors, fontSizes, appSettings } = theme
41
+ const navigation = useNavigation()
42
42
 
43
- const styles = useMemo(
44
- () => StyleSheet.create(componentStyles(theme)),
45
- [theme, componentStyles]
46
- );
43
+ const styles = useMemo(
44
+ () => StyleSheet.create(componentStyles(theme)),
45
+ [theme, componentStyles]
46
+ )
47
47
 
48
- const description = news.shortDesc
49
- .replace(/<(?:.|\n)*?>/gm, '')
50
- .replace('Weiterlesen ›', '');
48
+ const description = news.shortDesc
49
+ .replace(/<(?:.|\n)*?>/gm, '')
50
+ .replace('Weiterlesen ›', '')
51
51
 
52
- console.debug(componentName, ':', `news ${news?.guid} pub date`, ':', news.pubdate);
53
- const publicationDate = news?.pubdate
54
- ? DateTime.fromISO(news.pubdate, { locale: language }).toLocaleString(DateTime.DATETIME_SHORT)
55
- : null;
52
+ console.debug(componentName, ':', `news ${news?.guid} pub date`, ':', news.pubdate)
53
+ const publicationDate = news?.pubdate
54
+ ? DateTime.fromISO(news.pubdate, { locale: language }).toLocaleString(DateTime.DATETIME_SHORT)
55
+ : null
56
56
 
57
- return (
58
- <TouchableOpacity
59
- onPress={() => navigation.navigate('NewsDetail', { news: news })}
60
- accessible={true}
61
- accessibilityLabel={t('accessibility:feedNewsItem', { news: [news.title, description].join('. '), date: publicationDate })}
62
- accessibilityHint={t('accessibility:feedNewsItemHint')}
63
- >
64
- <View style={themeStyles.flexRow}>
65
- <View style={[themeStyles.cardContent, styles.contentContainer]}>
66
- {
67
- news?.imageUrl
68
- ? <Image
69
- source={{ uri: news.imageUrl }}
70
- resizeMode="cover"
71
- style={styles.image}>
72
- </Image>
73
- : null
74
- }
75
- <Text style={styles.title}>{news.title}</Text>
76
- <Text style={styles.description}>{description}</Text>
77
- {
78
- publicationDate
79
- ? <View style={[themeStyles.flexRow, { alignItems: 'center', alignContent: 'center' }]}>
80
- <IconsOpenasist icon={'time'} size={fontSizes.l} color={colors.iconSubtitle} />
81
- <Text style={[themeStyles.cardSubTitle, styles.publicationDate]}>{publicationDate}</Text>
82
- </View>
83
- : null
84
- }
85
- </View>
86
- </View>
87
- </TouchableOpacity>
88
- );
57
+ // Keep the fallback enabled unless the app configuration explicitly disables it.
58
+ const showFallbackImage = appSettings?.modules?.news?.showFallbackImage !== false
59
+
60
+ let newsImageSource = news?.imageUrl
61
+ ? { uri: news.imageUrl }
62
+ : null
63
+
64
+ // Show the app-specific fallback image so news without an image still have a visual preview.
65
+ // Each university can disable this fallback in its news settings.
66
+ if (newsImageSource == null && showFallbackImage) {
67
+ newsImageSource = appSettings.header
68
+ }
69
+
70
+ return (
71
+ <TouchableOpacity
72
+ onPress={() => navigation.navigate('NewsDetail', { news })}
73
+ accessible
74
+ accessibilityLabel={t('accessibility:feedNewsItem', { news: [news.title, description].join('. '), date: publicationDate })}
75
+ accessibilityHint={t('accessibility:feedNewsItemHint')}
76
+ >
77
+ <View style={themeStyles.flexRow}>
78
+ <View style={[themeStyles.cardContent, styles.contentContainer]}>
79
+ {newsImageSource != null
80
+ ? (
81
+ <Image
82
+ source={newsImageSource}
83
+ resizeMode='cover'
84
+ style={styles.image}
85
+ />
86
+ )
87
+ : null}
88
+ <Text style={styles.title}>{news.title}</Text>
89
+ <Text style={styles.description}>{description}</Text>
90
+ {publicationDate
91
+ ? (
92
+ <View style={[themeStyles.flexRow, { alignItems: 'center', alignContent: 'center' }]}>
93
+ <IconsOpenasist icon='time' size={fontSizes.l} color={colors.iconSubtitle} />
94
+ <Text style={[themeStyles.cardSubTitle, styles.publicationDate]}>{publicationDate}</Text>
95
+ </View>
96
+ )
97
+ : null}
98
+ </View>
99
+ </View>
100
+ </TouchableOpacity>
101
+ )
89
102
  }
@@ -1,32 +1,35 @@
1
- export default function(theme) {
2
- return {
3
- contentContainer: {
4
- paddingTop: theme.paddings.default,
5
- paddingLeft: theme.paddings.default,
6
- paddingRight: theme.paddings.default,
7
- marginBottom: theme.paddings.default
8
- },
9
- publicationDate: {
10
- ...theme.fonts.bold,
11
- marginTop: 3,
12
- paddingLeft: theme.paddings.small,
13
- },
14
- image: {
15
- aspectRatio: 16/9,
16
- paddingBottom: theme.paddings.small,
17
- },
18
- title: {
19
- ...theme.fonts.bold,
20
- fontSize: theme.fontSizes.subtitle,
21
- lineHeight: theme.lineHeights.titleSmall,
22
- marginTop: theme.paddings.default,
23
- marginBottom: theme.paddings.small,
24
- },
25
- description: {
26
- ...theme.fonts.regular,
27
- fontSize: theme.fontSizes.itemText,
28
- lineHeight: theme.lineHeights.s,
29
- marginBottom: theme.paddings.small,
30
- }
1
+ export default function (theme) {
2
+ return {
3
+ contentContainer: {
4
+ paddingTop: theme.paddings.default,
5
+ paddingLeft: theme.paddings.default,
6
+ paddingRight: theme.paddings.default,
7
+ marginBottom: theme.paddings.default
8
+ },
9
+ publicationDate: {
10
+ ...theme.fonts.bold,
11
+ marginTop: 3,
12
+ paddingLeft: theme.paddings.small
13
+ },
14
+ image: {
15
+ width: '100%',
16
+ // Override the bundled image's intrinsic height so aspectRatio determines it.
17
+ height: undefined,
18
+ aspectRatio: 16 / 9,
19
+ paddingBottom: theme.paddings.small
20
+ },
21
+ title: {
22
+ ...theme.fonts.bold,
23
+ fontSize: theme.fontSizes.subtitle,
24
+ lineHeight: theme.lineHeights.titleSmall,
25
+ marginTop: theme.paddings.default,
26
+ marginBottom: theme.paddings.small
27
+ },
28
+ description: {
29
+ ...theme.fonts.regular,
30
+ fontSize: theme.fontSizes.itemText,
31
+ lineHeight: theme.lineHeights.s,
32
+ marginBottom: theme.paddings.small
31
33
  }
32
- };
34
+ }
35
+ }
@@ -0,0 +1,35 @@
1
+ import React from 'react';
2
+ import { View } from 'react-native';
3
+ import { useTheme } from 'react-native-paper';
4
+
5
+ import IconsOpenasist from '../../libraries/icons-openasist';
6
+
7
+ /**
8
+ * Renders a theme-aware icon for the bottom tab navigation.
9
+ *
10
+ * @param {Object} props - Component properties.
11
+ * @param {string} props.icon - Name of the icon to render.
12
+ * @param {string} props.color - Color provided by the tab navigator.
13
+ * @param {number} [props.size] - Optional icon size overriding the theme setting.
14
+ * @returns {React.JSX.Element} The rendered tab bar icon.
15
+ */
16
+ export default function TabBarIcon({ icon, color, size }) {
17
+ const theme = useTheme();
18
+ const iconSize = size ?? theme?.tabBar?.iconSize;
19
+
20
+ return (
21
+ <View
22
+ style={{
23
+ flex: 1,
24
+ alignContent: 'center',
25
+ justifyContent: 'center',
26
+ }}
27
+ >
28
+ <IconsOpenasist
29
+ icon={icon}
30
+ color={color}
31
+ size={iconSize}
32
+ />
33
+ </View>
34
+ );
35
+ }
@@ -1,58 +1,58 @@
1
1
  export default function (theme) {
2
- return {
3
- eventContainer: {
4
- borderTopWidth: 8,
5
- paddingTop: 5,
6
- paddingLeft: 5,
7
- paddingBottom: 10,
8
- marginBottom: 10,
9
- backgroundColor: theme.colors.eventContainerBackground,
10
- borderRadius: 8,
11
- shadowColor: '#000',
12
- shadowOffset: { width: 0, height: 2 },
13
- shadowOpacity: 0.3,
14
- shadowRadius: 3,
15
- elevation: 5,
16
- overflow: 'visible'
17
- },
18
- eventTitle: {
19
- fontSize: 12,
20
- fontWeight: 'bold',
21
- },
22
- eventRoom: {
23
- fontSize: 11,
24
- color: '#757575',
25
- },
26
- highlightDateContainer: {
27
- borderRadius: 100,
28
- borderWidth: 3,
29
- borderColor: 'red',
30
- height: 48,
31
- width: 48,
32
- },
33
- line: {
34
- backgroundColor: '#000',
35
- },
36
- strip: {
37
- height: 65,
38
- width: '89%',
39
- paddingTop: 5,
40
- paddingBottom: 5,
41
- backgroundColor: '#fff',
42
- alignSelf: 'flex-end'
43
- },
44
- viewStrip: {
45
- height: 65,
46
- backgroundColor: '#fff',
47
- elevation: 4,
48
- shadowColor: '#000',
49
- shadowOffset: { width: 0, height: 3 },
50
- shadowOpacity: 0.2,
51
- shadowRadius: 2,
52
- },
53
- hourStyle: {
54
- fontSize: 12,
55
- color: theme.colors.text,
56
- },
57
- };
2
+ return {
3
+ eventContainer: {
4
+ borderTopWidth: 8,
5
+ paddingTop: 5,
6
+ paddingLeft: 5,
7
+ paddingBottom: 10,
8
+ marginBottom: 10,
9
+ backgroundColor: theme.colors.eventContainerBackground,
10
+ borderRadius: 8,
11
+ shadowColor: '#000',
12
+ shadowOffset: { width: 0, height: 2 },
13
+ shadowOpacity: 0.3,
14
+ shadowRadius: 3,
15
+ elevation: 5,
16
+ overflow: 'visible'
17
+ },
18
+ eventTitle: {
19
+ fontSize: 12,
20
+ fontWeight: 'bold'
21
+ },
22
+ eventRoom: {
23
+ fontSize: 11,
24
+ color: theme.colors.text
25
+ },
26
+ highlightDateContainer: {
27
+ borderRadius: 100,
28
+ borderWidth: 3,
29
+ borderColor: 'red',
30
+ height: 48,
31
+ width: 48
32
+ },
33
+ line: {
34
+ backgroundColor: '#000'
35
+ },
36
+ strip: {
37
+ height: 65,
38
+ width: '89%',
39
+ paddingTop: 5,
40
+ paddingBottom: 5,
41
+ backgroundColor: '#fff',
42
+ alignSelf: 'flex-end'
43
+ },
44
+ viewStrip: {
45
+ height: 65,
46
+ backgroundColor: '#fff',
47
+ elevation: 4,
48
+ shadowColor: '#000',
49
+ shadowOffset: { width: 0, height: 3 },
50
+ shadowOpacity: 0.2,
51
+ shadowRadius: 2
52
+ },
53
+ hourStyle: {
54
+ fontSize: 12,
55
+ color: theme.colors.text
56
+ }
57
+ }
58
58
  }