@fto-consult/expo-ui 8.48.3 → 8.49.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "8.48.3",
+  "version": "8.49.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "react-native-paper-doc": "https://github.com/callstack/react-native-paper/tree/main/docs/docs/guides",
   "scripts": {

package/src/components/Notifications/index.js

@@ -0,0 +1,160 @@
+import { forwardRef } from "react";
+import View from "$ecomponents/View";
+import { Badge as RNBadge } from "react-native-paper";
+import { StyleSheet, Pressable } from "react-native";
+import Menu from "$ecomponents/Menu";
+import List from "$ecomponents/List";
+import theme from "$theme";
+import Icon from "$ecomponents/Icon";
+import { defaultStr,isPlainObj } from "$utils";
+import { HStack } from "$ecomponents/Stack";
+import Label from "$ecomponents/Label";
+import Divider from "$ecomponents/Divider";
+import Button from "$ecomponents/Button";
+import Dimensions from "$cdimensions";
+import React from "$react";
+import PropTypes from "prop-types";
+
+const Notifications = forwardRef(({testID,items:cItems,menuProps,title,containerProps,contentContainerProps,clearAllButton,clearAll,...rest}, ref) => {
+  const items = React.useMemo(()=>{
+    return Array.isArray(cItems) ? cItems : [];
+  },[cItems]);
+  testID = defaultStr(testID, "RN_Main_Notifications");
+  const { height } = Dimensions.get("window");
+  menuProps = Object.assign({},menuProps);
+  containerProps = Object.assign({},containerProps);
+  contentContainerProps = Object.assign({},contentContainerProps);
+  return (
+    <Menu
+      testID = {`${testID}_NotificationsMenu`}
+      ref = {ref}
+      anchor={(p) => {
+        const { onPress } = p;
+        return (
+          <Pressable {...p} style={[p.style, styles.anchor]}>
+            <RNBadge
+              onPress={onPress}
+              style={[
+                styles.badge,
+                {
+                  color: theme.colors.onSecondary,
+                  backgroundColor: theme.colors.secondary,
+                },
+              ]}
+            >
+              {items.length}
+            </RNBadge>
+            <Icon
+              containerColor={theme.colors.onPrimary}
+              mode={"contained"}
+              onPress={onPress}
+              size={22}
+              style={[theme.styles.noMargin]}
+              color={theme.colors.primary}
+              name={
+                items.length ? "material-notifications" : "material-notifications-none"
+              }
+            />
+          </Pressable>
+        );
+      }}
+      {...menuProps}
+      style={[styles.menu,menuProps.style]}
+      children={
+        <View {...containerProps} style={[styles.container,containerProps.style]} testID={`${testID}_Container`}>
+          {items.length ? (
+            <View
+              style={theme.styles.w100}
+              testID={testID + "_TiteleContainer"}
+            >
+              <HStack
+                testID={`${testID}_LabelContainer`}
+                style={[theme.styles.justifyContentSpaceBetween]}
+              >
+                {title !== false ? (
+                    React.isValidElement(title)? title : <Label fontSize={17} textBold primary>
+                        Notifications{meter.name||""}
+                    </Label>
+                ) : null}
+                {clearAllButton !== false && (React.isValidElement(clearAllButton)? clearAllButton : 
+                    <Button
+                        borderRadius={10}
+                        style={[theme.styles.cursorPointer]}
+                        title={`Effacer les ${items.length.formatNumber()} notifications?`}
+                        error
+                        upperCase={false}
+                        mode="contained"
+                        onPress={(event)=>{
+                            if(typeof clearAll =="function"){
+                                return clearAll({items,event});
+                            }
+                        }}
+                        icon="delete"
+                      >
+                        Effacer tout
+                      </Button>
+                )  || null}
+                <Label success textBold>
+                  {items.length?.formatNumber()}
+                </Label>
+              </HStack>
+              <Divider style={[theme.styles.w100, theme.styles.mt1]} />
+            </View>
+          ) : null}
+          <View
+            testID={`${testID}_ListContainer`}
+            {...contentContainerProps}
+            style={[{ maxHeight: Math.max(height - 150, 230) },contentContainerProps.style]}
+          >
+            <List
+              items={items}
+              testID = {testID}
+              {...rest}
+            />
+          </View>
+        </View>
+      }
+    />
+  );
+});
+
+Notifications.displayName = "NotificationsComponents";
+
+Notifications.propTypes = {
+    ...Object.assign({},List.propTypes), ///les props identiques au composant List
+    items : PropTypes.array.isRequired,//les items à afficher dans le menu
+    menuProps : Object.assign({},Menu.propTypes), //les props du composant menu
+    containerProps : PropTypes.object,
+    contentContainerProps : PropTypes.object, //les props du contentContainer, composant wrapper au composant List
+    title : PropTypes.oneOfType([
+        PropTypes.bool, //si false, alors le titre qui s'affiche lorsque le menu est ouvert ne sera pas rendu
+        PropTypes.ReactNode, //si un composant react alors il sera utilisé pour substituer le composant title par défaut
+    ]),
+    clearAllButton : PropTypes.oneOfType([
+        PropTypes.bool, //si false, alors le bouton clearAll ne sera pas affiché
+        PropTypes.ReactNode, //si un composant react alors il sera utilisé pour substituer le composant bouton par défaut
+    ])
+}
+
+const styles = StyleSheet.create({
+  container: {
+    minWidth: 300,
+    padding: 15,
+  },
+  anchor: {
+    position: "relative",
+    marginRight: 10,
+    marginTop: 10,
+  },
+  badge: {
+    position: "absolute",
+    top: -8,
+    right: -10,
+    zIndex: 1000,
+  },
+  menu: {
+    maxWidth: 300,
+  },
+});
+
+export default Notifications;