@olea-bps/base 1.1.6 → 1.1.7

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/package.json

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