@olea-bps/base 1.1.3 → 1.1.5

package/components/AppbarAction/index.js

@@ -0,0 +1,42 @@
+import { useCallback } from 'react';
+import { ColorValue } from 'react-native';
+
+import {
+    Appbar,
+    useTheme,
+} from 'react-native-paper';
+
+import IconsOpenasist from '../../libraries/icons-openasist';
+
+/**
+ * Eine Action, welche die Icons über die {@link IconsOpenasist}-Komponente einbindet.
+ * Es werden alle Properties der {@link Appbar.Action}-Komponente unterstüzt.
+ * Die `icon`-Property wird auf eine andere Art und Weise verwendet.
+ * Wird keine Farbe übergeben, wird die primäre Textfarbe (`primaryText`) aus den Theme verwendet.
+ *
+ * @param {object} props - Es werden die Properties der {@link Appbar.Action}-Komponente unsterstützt
+ * @param {string} props.icon - Name eines Icons, welches über die {@link IconsOpenasist} angezeigt werden kann.
+ * @param {?ColorValue} props.color - Farbe des Icons. Wenn keine Farbe übergeben wird, wird die primäre Textfarbe (`primaryText`) aus den Theme verwendet.
+ * @returns
+ */
+export default function AppbarAction({ icon, color, ...rest }) {
+    const theme = useTheme();
+    const iconColor = color ?? theme?.colors?.primaryText;
+
+    const iconCallback = useCallback(
+        props =>
+            <IconsOpenasist
+                {...props}
+                icon={icon}
+                color={iconColor}
+            />,
+        [icon, iconColor]
+    );
+
+    return (
+        <Appbar.Action
+            {...rest}
+            icon={iconCallback}
+        />
+    );
+}

package/components/BookDetail/index.js

@@ -30,8 +30,9 @@ import { libraryApi } from '../../libraries/core';
 import { handleHtmlEntities } from '../../libraries/core/helper/format.helper';
 
 
-import componentStyles from "./styles"
+import componentStyles from './styles';
 import AppbarComponent from '../AppBar';
+import AppbarAction from '../AppbarAction';
 
 
 class BookDetailComponent extends React.Component {
@@ -248,9 +249,11 @@ class BookDetailComponent extends React.Component {
 
         return (
             <SafeAreaView style={[this.styles.container, themeStyles.safeAreaContainer]}>
-                <AppbarComponent {...this.props}
-                                 title={t('search:title')}
-                                 rightAction={<Appbar.Action icon="share-variant" onPress={this._onShare.bind(this)}/>}/>
+                <AppbarComponent
+                    {...this.props}
+                    title={t('search:title')}
+                    rightAction={<AppbarAction icon='share' onPress={this._onShare.bind(this)} />}
+                />
                 {this._renderContent()}
             </SafeAreaView>
         );

package/components/ContactDetail/index.js

@@ -32,8 +32,9 @@ import { connect } from 'react-redux'
 import {withTranslation} from "react-i18next";
 import merge from 'lodash/merge';
 
-import componentStyles from "./styles"
+import componentStyles from './styles';
 import AppbarComponent from '../AppBar';
+import AppbarAction from '../AppbarAction';
 
 
 /**
@@ -212,9 +213,11 @@ class ContactDetailComponent extends React.Component {
 
         return (
             <SafeAreaView style={[this.styles.container, themeStyles.safeAreaContainer]}>
-                <AppbarComponent {...this.props}
-                                 title={t('contact:contactInformation')}
-                                 rightAction={<Appbar.Action icon="share-variant" onPress={this._onShare.bind(this)}/>}/>
+                <AppbarComponent
+                    {...this.props}
+                    title={t('contact:contactInformation')}
+                    rightAction={<AppbarAction icon='share' onPress={this._onShare.bind(this)} />}
+                />
                 {this._renderContent()}
             </SafeAreaView>
         );

package/components/CourseDetail/index.js

@@ -24,10 +24,11 @@ import {Appbar, Headline, List, withTheme} from "react-native-paper";
 import { connect } from 'react-redux'
 import merge from 'lodash/merge';
 
-import componentStyles from "./styles"
+import componentStyles from './styles';
 import AppbarComponent from '../AppBar';
+import AppbarAction from '../AppbarAction';
 import IconsOpenasist from '../../libraries/icons-openasist';
-import {withTranslation} from "react-i18next";
+import { withTranslation } from 'react-i18next';
 
 
 /**
@@ -339,9 +340,11 @@ class CourseDetailComponent extends React.Component {
 
         return (
             <SafeAreaView style={[this.styles.container, themeStyles.appSafeAreaContainer]}>
-                <AppbarComponent {...this.props}
-                                 title={t('course:lectureInformation')}
-                                 rightAction={<Appbar.Action icon="share-variant" onPress={this._onShare.bind(this)}/>}/>
+                <AppbarComponent
+                    {...this.props}
+                    title={t('course:lectureInformation')}
+                    rightAction={<AppbarAction icon='share' onPress={this._onShare.bind(this)} />}
+                />
                 {this._renderContent()}
             </SafeAreaView>
         );

package/components/NewsDetail/index.js

@@ -37,8 +37,9 @@ import moment from "moment";
 import WebViewAutoHeight from '../../libraries/react-native-webview-autoheight';
 
 
-import componentStyles from "./styles"
+import componentStyles from './styles';
 import AppbarComponent from '../AppBar';
+import AppbarAction from '../AppbarAction';
 import { selectFeedById } from '../../libraries/core/redux/reducers/api';
 
 
@@ -350,9 +351,15 @@ class NewsDetailComponent extends React.Component {
 
         return (
             <SafeAreaView style={[this.styles.container, themeStyles.appSafeAreaContainer]}>
-                <AppbarComponent {...this.props}
-                                 title={title}
-                                 rightAction={newsType ? null : <Appbar.Action icon="share-variant" onPress={this._onShare.bind(this)}/>}/>
+                <AppbarComponent
+                    {...this.props}
+                    title={title}
+                    rightAction={
+                        newsType
+                            ? null
+                            : <AppbarAction icon='share' onPress={this._onShare.bind(this)} />
+                    }
+                />
                 {newsType === NewsDetailComponent.newsTypes.topNews ? this._renderTopNewsContent(news) : this._renderContent(news)}
             </SafeAreaView>
         );

package/components/RoomDetail/index.js

@@ -20,17 +20,22 @@ import {
     Share,
     TouchableOpacity, ActivityIndicator
 } from 'react-native';
-import {connect} from 'react-redux'
-import {Appbar, Headline, List, withTheme} from "react-native-paper";
-import {withTranslation} from "react-i18next";
+import { connect } from 'react-redux'
+import {
+    Appbar,
+    Headline,
+    List,
+    withTheme,
+} from "react-native-paper";
+import { withTranslation } from "react-i18next";
+import { WebView } from "react-native-webview";
 import merge from 'lodash/merge';
 
-
 import AppbarComponent from '../AppBar';
+import AppbarAction from '../AppbarAction';
 import IconsOpenasist from '../../libraries/icons-openasist';
 
-import componentStyles from "./styles";
-import {WebView} from "react-native-webview";
+import componentStyles from './styles';
 
 /**
  * Room Detail Component
@@ -262,9 +267,11 @@ class RoomDetailComponent extends React.Component {
 
         return (
             <SafeAreaView style={[this.styles.container, themeStyles.safeAreaContainer]}>
-                <AppbarComponent {...this.props}
-                             title={t('room:directory')}
-                             rightAction={<Appbar.Action icon="share-variant" onPress={this._onShare.bind(this)}/>}/>
+                <AppbarComponent
+                    {...this.props}
+                    title={t('room:directory')}
+                    rightAction={<AppbarAction icon='share' onPress={this._onShare.bind(this)} />}
+                />
                 {this._renderContent()}
             </SafeAreaView>
         );

package/index.js

@@ -2,7 +2,9 @@
 // Exports Components
 
 export { default as AppBar } from './components/AppBar';
+export { default as AppbarAction } from './components/AppbarAction';
 export { default as BookDetail } from './components/BookDetail';
+export { default as ComponentJobsFilter } from './components/ComponentJobsFilter';
 export { default as ConnectivityWarning } from './components/ConnectivityWarning';
 export { default as ContactDetail } from './components/ContactDetail';
 export { default as CourseDetail } from './components/CourseDetail';
@@ -26,10 +28,10 @@ export { default as QuickLinks } from './components/QuickLinks';
 export { default as RoomDetail } from './components/RoomDetail';
 export { default as ScaledImage } from './components/ScaledImage';
 export { default as SearchResults } from './components/SearchResults';
-export { default as SettingSection } from './components/SettingSection';
 export { default as SettingsDialog } from './components/SettingsDialog';
 export { default as SettingsDialogRadio } from './components/SettingsDialogRadio';
 export { default as SettingsDialogSelect } from './components/SettingsDialogSelect';
+export { default as SettingSection } from './components/SettingSection';
 export { default as TimetableCodeInput } from './components/TimetableCodeInput';
 export { default as TimetableDay } from './components/TimetableDay';
 export { default as TimetableEvent } from './components/TimetableEvent';
@@ -39,7 +41,6 @@ export { default as TimetableWeek } from './components/TimetableWeek';
 export { default as TopNews } from './components/TopNews';
 export { default as TopNewsHtwk } from './components/TopNewsHtwk';
 export { default as WebView } from './components/WebView';
-export { default as ComponentJobsFilter } from './components/ComponentJobsFilter';
 
 // Exports Views
 

package/libraries/icons-openasist/index.js

@@ -12,70 +12,69 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React from 'react'
 
-import { useTheme } from "react-native-paper";
-import createIconSet from '@expo/vector-icons/createIconSet';
-import PropTypes from "prop-types";
-import { SvgCssUri } from 'react-native-svg';
-const glyphMap = {
-    "bus":                      "a",
-    "train":                    "b",
-    "close":                    "c",
-    "messages":                 "d",
-    "menu":                     "e",
-    "grid":                     "f",
-    "more-horizontal":          "g",
-    "more-vertical":            "h",
-    "paperplane-outline":       "i",
-    "partlysunny":              "j",
-    "partlysunny-outline":      "k",
-    "rainy":                    "l",
-    "rainy-outline":            "m",
-    "thunderstorm":             "n",
-    "thunderstorm-outline":     "o",
-    "sunny":                    "p",
-    "sunny-outline":            "q",
-    "down":                     "r",
-    "download":                 "s",
-    "print":                    "t",
-    "hilfe":                    "u",
-    "back":                     "v",
-    "lock":                     "w",
-    "lock-open":                "x",
-    "navigation":               "y",
-    "forward":                  "z",
-    "profile":                  "A",
-    "opal":                     "B",
-    "mensa":                    "C",
-    "location":                 "D",
-    "inbox":                    "E",
-    "imprint":                  "F",
-    "pts":                      "G",
-    "feedback":                 "H",
-    "book":                     "I",
-    "news":                     "J",
-    "up":                       "K",
-    "tram":                     "L",
-    "rss":                      "M",
-    "map-search":               "N",
-    "m-start1":                 "O",
-    "dashboard":                "P",
-    "timetable":                "Q",
-    "search":                   "R",
-    "settings":                 "S",
-    "coffee":                   "T",
-    "check":                    "V",
-    "star":                     "W",
-    "star-selected":            "X",
-    "edit":                     "Y",
-    "time":                     "A1",
-    "open-external":            "A2",
-    "share":                    "1",
-    "accessibility":            "A3",
-};
-const CustomIcon = createIconSet(glyphMap, 'openasist');
+import { useTheme } from 'react-native-paper'
+import createIconSet from '@expo/vector-icons/createIconSet'
+import PropTypes from 'prop-types'
 
+const glyphMap = {
+  bus: 'a',
+  train: 'b',
+  close: 'c',
+  messages: 'd',
+  menu: 'e',
+  grid: 'f',
+  'more-horizontal': 'g',
+  'more-vertical': 'h',
+  'paperplane-outline': 'i',
+  partlysunny: 'j',
+  'partlysunny-outline': 'k',
+  rainy: 'l',
+  'rainy-outline': 'm',
+  thunderstorm: 'n',
+  'thunderstorm-outline': 'o',
+  sunny: 'p',
+  'sunny-outline': 'q',
+  down: 'r',
+  download: 's',
+  print: 't',
+  hilfe: 'u',
+  back: 'v',
+  lock: 'w',
+  'lock-open': 'x',
+  navigation: 'y',
+  forward: 'z',
+  profile: 'A',
+  opal: 'B',
+  mensa: 'C',
+  location: 'D',
+  inbox: 'E',
+  imprint: 'F',
+  pts: 'G',
+  feedback: 'H',
+  book: 'I',
+  news: 'J',
+  up: 'K',
+  tram: 'L',
+  rss: 'M',
+  'map-search': 'N',
+  'm-start1': 'O',
+  dashboard: 'P',
+  timetable: 'Q',
+  search: 'R',
+  settings: 'S',
+  coffee: 'T',
+  check: 'V',
+  star: 'W',
+  'star-selected': 'X',
+  edit: 'Y',
+  time: 'A1',
+  'open-external': 'A2',
+  share: '1',
+  accessibility: 'A3'
+}
+const CustomIcon = createIconSet(glyphMap, 'openasist')
 
 /**
  * Icons of the Openasist app
@@ -97,62 +96,62 @@ const CustomIcon = createIconSet(glyphMap, 'openasist');
  * Navigation-Parameters:
  *  - none
  */
-function IconsOpenasist({ icon, iconSVG: IconSVG, size, color, accessibilityLabel, ...props }) {
-    const theme = useTheme();
-    const { AppIcons } = theme;
-    const ThemeIcon = theme.icons?.[icon];
+function IconsOpenasist ({ icon, iconSVG: IconSVG, size, color, accessibilityLabel, ...props }) {
+  const theme = useTheme()
+  const { AppIcons } = theme
+  const ThemeIcon = theme.icons?.[icon]
 
-    const iconSize = size ?? 26;
-    const iconAriaLabel = props?.['aria-label'] ?? accessibilityLabel ?? null;
-    const iconAriaHidden = iconAriaLabel ? false : true;
+  const iconSize = size ?? 24
+  const iconAriaLabel = props?.['aria-label'] ?? accessibilityLabel ?? null
+  const iconAriaHidden = !iconAriaLabel
 
-    const iconProps = {
-        color: color ?? 'black',
-        'aria-hidden': iconAriaHidden,
-        'aria-label': iconAriaLabel,
-    }
+  const iconProps = {
+    color: color ?? 'black',
+    'aria-hidden': iconAriaHidden,
+    'aria-label': iconAriaLabel
+  }
 
-    if (IconSVG) {
-        return (
-            <IconSVG
-                {...iconProps}
-                width={iconSize}
-                height={iconSize}
-            />
-        );
-    } else if (typeof ThemeIcon === 'function') {
-        return (
-            <ThemeIcon
-                {...iconProps}
-                width={iconSize}
-                height={iconSize}
-            />
-        );
-    } else if (AppIcons) {
-        return (
-            <AppIcons
-                {...iconProps}
-                name={icon}
-                size={iconSize}
-            />
-        );
-    } else {
-        return (
-            <CustomIcon
-                {...iconProps}
-                name={icon}
-                size={iconSize}
-            />
-        );
-    }
+  if (IconSVG) {
+    return (
+      <IconSVG
+        {...iconProps}
+        width={iconSize}
+        height={iconSize}
+      />
+    )
+  } else if (typeof ThemeIcon === 'function') {
+    return (
+      <ThemeIcon
+        {...iconProps}
+        width={iconSize}
+        height={iconSize}
+      />
+    )
+  } else if (AppIcons) {
+    return (
+      <AppIcons
+        {...iconProps}
+        name={icon}
+        size={iconSize}
+      />
+    )
+  } else {
+    return (
+      <CustomIcon
+        {...iconProps}
+        name={icon}
+        size={iconSize}
+      />
+    )
+  }
 }
 
 // propTypes für Funktionen wird in react.js 19 entfernt
 IconsOpenasist.propTypes = {
-    icon: PropTypes.string,
-    iconSVG: PropTypes.func,
-    size: PropTypes.number,
-    color: PropTypes.string
-};
+  icon: PropTypes.string,
+  iconSVG: PropTypes.func,
+  size: PropTypes.number,
+  color: PropTypes.string
+}
 
-export default IconsOpenasist;
+export default IconsOpenasist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olea-bps/base",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "OLEA base library",
   "main": "index.js",
   "repository": {

package/views/PublicTransportTicket/index.js

@@ -56,10 +56,10 @@ export default function PublicTransportTicketView() {
     const [ticketBarcode, ticketOwner, ticketValidFrom, ticketValidTo, refreshTicket] = usePublicTransportTicket();
     // Gültikeitsangabem in lokaliesierte Strings umwandeln
     // Es wird immer in deutsche Datumangaben umgewandelt, weil das Deutschlandticket nur in deutschland gültig ist.
-    const localizedTicketValidFrom = ticketValidFrom?.isValid()
+    const localizedTicketValidFrom = ticketValidFrom?.isValid
         ? ticketValidFrom?.setLocale('de')?.toLocaleString()
         : null;
-    const localizedTicketValidTo = ticketValidTo?.isValid()
+    const localizedTicketValidTo = ticketValidTo?.isValid
         ? ticketValidTo?.setLocale('de')?.toLocaleString()
         : null;