@olea-bps/base 1.1.6 → 1.1.8

package/components/ContactDetail/index.js

@@ -32,14 +32,15 @@ import {
     Headline,
     List,
     useTheme,
-} from "react-native-paper";
+} from 'react-native-paper';
 
-import { useTranslation } from "react-i18next";
+import { useTranslation } from 'react-i18next';
 
-import componentStyles from './styles';
 import AppbarComponent from '../AppBar';
 import AppbarAction from '../AppbarAction';
-import { default as Icon } from '../../libraries/icons-openasist';
+import IconListItem from '../IconListItem';
+
+import componentStyles from './styles';
 
 /**
  * Contact Detail Component
@@ -191,12 +192,12 @@ export default function ContactDetailComponent({ contact, ...restProps }) {
                                             }
                                         }
                                     >
-                                        <List.Item
+                                        <IconListItem
                                             title={title}
                                             description={telephoneNumber}
                                             descriptionStyle={themeStyles.textLighter}
                                             titleStyle={themeStyles.searchDetailTitle}
-                                            right={props => <Icon {...props} icon={'call'} />}
+                                            icon={'call'}
                                         />
                                     </TouchableOpacity>
                                 )

package/components/IconListItem/index.js

@@ -0,0 +1,56 @@
+import {
+    useCallback,
+    useMemo,
+} from 'react';
+import {
+    StyleSheet,
+} from 'react-native';
+
+import {
+    List,
+    useTheme,
+} from 'react-native-paper';
+
+import { default as Icon } from '../../libraries/icons-openasist';
+
+import componentStyles from './styles';
+
+/**
+ * Ein Listenelement, welches ein Icon auf der rechten Seite anzeigt.
+ * Es können alle Properties der {@link List.Item}-Komponente verwendet werden, außer die `right`-Property.
+ * Die `right`-Property wird für das Einbinden des Icons benutzt.
+ * 
+ * @param {object} props
+ * @param {string} props.icon Iconname des anzuzeigenen Icons. Für mögliche Werte siehe {@link Icon}
+ */
+export default function IconListItem({ icon, ...listItemProps }) {
+    const theme = useTheme();
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme, componentStyles]
+    );
+
+    const listItemIcon = useCallback(
+        listIconProps =>
+            <List.Icon
+                {...listIconProps}
+                icon={
+                    props =>
+                        <Icon
+                            {...props}
+                            icon={icon}
+                        />
+                }
+            />
+        ,
+        [icon]
+    );
+
+    return (
+        <List.Item
+            {...listItemProps}
+            right={listItemIcon}
+        />
+    );
+}

package/components/IconListItem/styles.js

@@ -0,0 +1,4 @@
+export default function (theme) {
+    return {
+    }
+};

package/components/NewsDetail/styles.js

@@ -1,77 +1,77 @@
-import {Dimensions} from "react-native";
+import { Dimensions } from 'react-native'
 
-export default function(theme) {
-    const height = Dimensions.get('window').height;
-    const width = Dimensions.get('window').width;
-    return {
-        overflow: {
-            backgroundColor: theme.colors.overlayColor,
-        },
-        image: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            width: null,
-            resizeMode: 'cover',
-        },
-        container: {
-            flex: 1,
-            overflow: 'hidden'
-        },
-        containerInner: {
-            flex: 1
-        },
-        containerContent: {
-            backgroundColor: theme.colors.contentBackground,
-            flex: 1,
-            paddingHorizontal: 5,
-            paddingVertical: 20,
-            minHeight: height * 1.25 // To make sure the animation won't break / stop
-        },
-        activity: {
-            marginTop: 20
-        },
-        badges: {
-            flexDirection: 'row',
-            flexWrap: 'wrap',
-            paddingHorizontal: 10
-        },
-        badge: {
-            marginRight: 5,
-            marginBottom: 5
-        },
-        title: {
-            paddingLeft: 10,
-            fontSize: theme.fontSizes.title,
-            lineHeight: theme.lineHeights.titleBig
-        },
-        bar: {
-            alignItems: 'flex-start',
-            justifyContent: 'center',
-            position: 'absolute',
-            top: 5,
-            left: 0,
-            right: 0,
-        },
-        barText: {
-            color: theme.colors.primaryText,
-            ...theme.fonts.bold,
-        },
-        newsContent : {
-            marginVertical: theme.paddings.default,
-            marginHorizontal: theme.paddings.small,
-            width: width - (2 * theme.paddings.small)
-        },
-        newsContentText: {
-            fontSize: theme.fontSizes.m
-        },
-        imageDesc: {
-            backgroundColor: theme.colors.overlayColor,
-            color: theme.colors.primaryText,
-            paddingVertical: 2,
-            paddingHorizontal: theme.paddings.small,
-            fontSize: theme.fontSizes.xs
-        }
-    };
+export default function (theme) {
+  const height = Dimensions.get('window').height
+  const width = Dimensions.get('window').width
+  return {
+    overflow: {
+      backgroundColor: theme.colors.overlayColor
+    },
+    image: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      width: null,
+      resizeMode: 'cover'
+    },
+    container: {
+      flex: 1,
+      overflow: 'hidden'
+    },
+    containerInner: {
+      flex: 1
+    },
+    containerContent: {
+      backgroundColor: theme.colors.contentBackground,
+      flex: 1,
+      paddingHorizontal: 5,
+      paddingVertical: 20,
+      minHeight: height // enough space for short news without excessive whitespace
+    },
+    activity: {
+      marginTop: 20
+    },
+    badges: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      paddingHorizontal: 10
+    },
+    badge: {
+      marginRight: 5,
+      marginBottom: 5
+    },
+    title: {
+      paddingLeft: 10,
+      fontSize: theme.fontSizes.title,
+      lineHeight: theme.lineHeights.titleBig
+    },
+    bar: {
+      alignItems: 'flex-start',
+      justifyContent: 'center',
+      position: 'absolute',
+      top: 5,
+      left: 0,
+      right: 0
+    },
+    barText: {
+      color: theme.colors.primaryText,
+      ...theme.fonts.bold
+    },
+    newsContent: {
+      marginVertical: theme.paddings.default,
+      marginHorizontal: theme.paddings.small,
+      width: width - (2 * theme.paddings.small)
+    },
+    newsContentText: {
+      fontSize: theme.fontSizes.m
+    },
+    imageDesc: {
+      backgroundColor: theme.colors.overlayColor,
+      color: theme.colors.primaryText,
+      paddingVertical: 2,
+      paddingHorizontal: theme.paddings.small,
+      fontSize: theme.fontSizes.xs
+    }
+  }
 }

package/package.json

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

package/views/Search/index.js

@@ -123,9 +123,7 @@ function SearchView(props) {
                     onSubmitEditing={() => _onPressButton()}
                     onIconPress={() => _onPressButton()}
                     onChangeText={setSearchString}
-                    icon={(props) =>
-                        <IconsOpenasist icon={"search"} size={32} color={colors.icon} />
-                    }
+                    icon={props => <IconsOpenasist {...props} icon={'search'} color={colors.icon} />}
                     style={styles.searchBar}
                     inputStyle={styles.searchBarInput}
                     value={searchString}