@fto-consult/expo-ui 8.58.1 → 8.58.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "8.58.1",
+  "version": "8.58.3",
   "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/Fab/Fab.js

@@ -1,4 +1,4 @@
-import { FAB } from 'react-native-paper';
+import FAB from "./FabItem";
 import {defaultObj} from "$cutils";
 import React from "$react";
 import { StyleSheet } from 'react-native';

package/src/components/Fab/FabItem/index.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import {FAB} from "react-native-paper";
+import {defaultStr} from "$cutils";
+import {standardSize as mediumSize,largeSize,smallSize} from "./utils";
+const FabItemComponent = React.forwardRef(({size,style,...props},ref)=>{
+    size = defaultStr(size,"medium").toLowerCase().trim();
+    return <FAB
+      {...props}
+      size={size}
+      style = {[size == "small"? smallSize : size == "large"? largeSize : mediumSize,style]}
+      ref = {ref}
+    />
+});
+FabItemComponent.displayName = "FabItemComponent";
+
+export default FabItemComponent;

package/src/components/Fab/FabItem/old/FabItem.js

@@ -0,0 +1,304 @@
+import * as React from 'react';
+import {
+  Animated,
+  StyleSheet,
+  View,
+} from 'react-native';
+import PropTypes from "prop-types";
+
+import {ActivityIndicator,Text,TouchableRipple,Surface} from "react-native-paper";
+import { getExtendedFabStyle, getFABColors, getFabStyle } from '../utils';
+import Icon from "$ecomponents/Icon";
+import theme,{StyleProp} from "$theme";
+
+const FAB = React.forwardRef(
+  (
+    {
+      icon,
+      label,
+      background,
+      accessibilityLabel = label,
+      accessibilityState,
+      animated = true,
+      color: customColor,
+      rippleColor: customRippleColor,
+      disabled,
+      onPress,
+      onLongPress,
+      delayLongPress,
+      theme: themeOverrides,
+      style,
+      visible = true,
+      uppercase: uppercaseProp,
+      loading,
+      testID = 'fab',
+      size = 'medium',
+      customSize,
+      mode = 'elevated',
+      variant = 'primary',
+      labelMaxFontSizeMultiplier,
+      ...rest
+    },ref
+  ) => {
+    const uppercase = uppercaseProp ?? !theme.isV3;
+    const { current: visibility } = React.useRef<Animated.Value>(
+      new Animated.Value(visible ? 1 : 0)
+    );
+    const { isV3, animation } = theme;
+    const { scale } = animation;
+
+    React.useEffect(() => {
+      if (visible) {
+        Animated.timing(visibility, {
+          toValue: 1,
+          duration: 200 * scale,
+          useNativeDriver: true,
+        }).start();
+      } else {
+        Animated.timing(visibility, {
+          toValue: 0,
+          duration: 150 * scale,
+          useNativeDriver: true,
+        }).start();
+      }
+    }, [visible, scale, visibility]);
+
+    const fabStyle = getFabStyle({ customSize, size, theme });
+
+    const {
+      borderRadius = fabStyle.borderRadius,
+      backgroundColor: customBackgroundColor,
+    } = (StyleSheet.flatten(style) || {});
+
+    const { backgroundColor, foregroundColor, rippleColor } = getFABColors({
+      theme,
+      variant,
+      disabled,
+      customColor,
+      customBackgroundColor,
+      customRippleColor,
+    });
+
+    const isLargeSize = size === 'large';
+    const isFlatMode = mode === 'flat';
+    const iconSize = isLargeSize ? 36 : 24;
+    const loadingIndicatorSize = isLargeSize ? 24 : 18;
+    const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium;
+
+    const extendedStyle = getExtendedFabStyle({ customSize, theme });
+    const textStyle = {
+      color: foregroundColor,
+      ...font,
+    };
+
+    const md3Elevation = isFlatMode || disabled ? 0 : 3;
+
+    const newAccessibilityState = { ...accessibilityState, disabled };
+
+    return (
+      <Surface
+        ref={ref}
+        {...rest}
+        style={[
+          {
+            borderRadius,
+            backgroundColor,
+            opacity: visibility,
+            transform: [
+              {
+                scale: visibility,
+              },
+            ],
+          },
+          !isV3 && styles.elevated,
+          !isV3 && disabled && styles.disabled,
+          style,
+        ]}
+        pointerEvents={visible ? 'auto' : 'none'}
+        testID={`${testID}-container`}
+        {...(isV3 && { elevation: md3Elevation })}
+      >
+        <TouchableRipple
+          borderless
+          background={background}
+          onPress={onPress}
+          onLongPress={onLongPress}
+          delayLongPress={delayLongPress}
+          rippleColor={rippleColor}
+          disabled={disabled}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityRole="button"
+          accessibilityState={newAccessibilityState}
+          testID={testID}
+          style={{ borderRadius }}
+          {...rest}
+        >
+          <View
+            style={[styles.content, label ? extendedStyle : fabStyle]}
+            testID={`${testID}-content`}
+            pointerEvents="none"
+          >
+            {icon && loading !== true ? (
+              <Icon
+                icon={icon}
+                size={customSize ? customSize / 2 : iconSize}
+                color={foregroundColor}
+              />
+            ) : null}
+            {loading ? (
+              <ActivityIndicator
+                size={customSize ? customSize / 2 : loadingIndicatorSize}
+                color={foregroundColor}
+              />
+            ) : null}
+            {label ? (
+              <Text
+                variant="labelLarge"
+                selectable={false}
+                testID={`${testID}-text`}
+                style={[
+                  styles.label,
+                  uppercase && styles.uppercaseLabel,
+                  textStyle,
+                ]}
+                maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
+              >
+                {label}
+              </Text>
+            ) : null}
+          </View>
+        </TouchableRipple>
+      </Surface>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  elevated: {
+    elevation: 6,
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+    marginHorizontal: 8,
+  },
+  uppercaseLabel: {
+    textTransform: 'uppercase',
+  },
+  disabled: {
+    elevation: 0,
+  },
+});
+
+FAB.propTypes = {
+    // For `icon` and `label` props their types are duplicated due to the generation of documentation.
+    // Appropriate type for them is `IconOrLabel` contains the both union and intersection types.
+    /**
+     * Icon to display for the `FAB`. It's optional only if `label` is defined.
+     */
+    icon : PropTypes.shape({...Object.assign({},Icon.propTypes)}),
+    /**
+     * Optional label for extended `FAB`. It's optional only if `icon` is defined.
+     */
+    label : PropTypes.node,
+    /**
+     * Make the label text uppercased.
+     */
+    uppercase : PropTypes.bool,
+    /**
+     * Type of background drawabale to display the feedback (Android).
+     * https://reactnative.dev/docs/pressable#rippleconfig
+     */
+    background : PropTypes.any,
+    /**
+     * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.
+     * Uses `label` by default if specified.
+     */
+    accessibilityLabel : PropTypes.string,
+    /**
+     * Whether an icon change is animated.
+     */
+    animated : PropTypes.bool,
+    /**
+     *  @deprecated Deprecated in v.5x - use prop size="small".
+     *
+     *  Whether FAB is mini-sized, used to create visual continuity with other elements. This has no effect if `label` is specified.
+     */
+    small : PropTypes.bool,
+    /**
+     * Custom color for the icon and label of the `FAB`.
+     */
+    color : PropTypes.string,
+    /**
+     * Color of the ripple effect.
+     */
+    rippleColor : PropTypes.string,
+    /**
+     * Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch.
+     */
+    disabled: PropTypes.bool,
+    /**
+     * Whether `FAB` is currently visible.
+     */
+    visible: PropTypes.bool,
+    /**
+     * Whether to show a loading indicator.
+     */
+    loading: PropTypes.bool,
+    /**
+     * Function to execute on press.
+     */
+    onPress: PropTypes.func,
+    /**
+     * Function to execute on long press.
+     */
+    onLongPress: PropTypes.func,
+    /**
+     * The number of milliseconds a user must touch the element before executing `onLongPress`.
+     */
+    delayLongPress : PropTypes.number,
+    /**
+     * @supported Available in v5.x with theme version 3
+     *
+     * Size of the `FAB`.
+     * - `small` - FAB with small height (40).
+     * - `medium` - FAB with default medium height (56).
+     * - `large` - FAB with large height (96).
+     */
+    size : PropTypes.oneOf([`small`,`medium`,`large`]),
+    /**
+     * Custom size for the `FAB`. This prop takes precedence over size prop
+     */
+    customSize : PropTypes.number,
+    /**
+     * @supported Available in v5.x with theme version 3
+     *
+     * Mode of the `FAB`. You can change the mode to adjust the the shadow:
+     * - `flat` - button without a shadow.
+     * - `elevated` - button with a shadow.
+     */
+    mode : PropTypes.oneOf([`flat`,`elevated`]),
+    /**
+     * @supported Available in v5.x with theme version 3
+     *
+     * Color mappings variant for combinations of container and icon colors.
+     */
+    variant : PropTypes.oneOf(['primary' , 'secondary' , 'tertiary' , 'surface']),
+    /**
+     * Specifies the largest possible scale a label font can reach.
+     */
+    labelMaxFontSizeMultiplier : PropTypes.number,
+    style : StyleProp,
+    /**
+     * TestID used for testing purposes
+     */
+    testID: PropTypes.string,
+  }
+
+export default FAB;
+
+// @component-docs ignore-next-line
+export { FAB };

package/src/components/Fab/FabItem/utils.js

@@ -0,0 +1,54 @@
+const getCustomFabSize = (customSize, roundness) => ({
+    height: customSize,
+    width: customSize,
+    borderRadius: roundness === 0 ? 0 : customSize / roundness,
+});
+
+export const standardSize = {
+    height: 56,
+    width: 56,
+    borderRadius: 28,
+  };
+export const smallSize = {
+    height: 40,
+    width: 40,
+    borderRadius: 28,
+  };
+  export const largeSize = {
+    height: 96,
+    width: 96,
+    borderRadius : 45,
+  }
+  const v3SmallSize = {
+    height: 40,
+    width: 40,
+  };
+  const v3MediumSize = {
+    height: 56,
+    width: 56,
+  };
+  const v3LargeSize = {
+    height: 96,
+    width: 96,
+  };
+
+export const getFabStyle = ({size,theme,customSize}) => {
+    const { isV3, roundness } = theme;
+  
+    if (customSize) return getCustomFabSize(customSize, roundness);
+  
+    if (isV3) {
+      switch (size) {
+        case 'small':
+          return { ...v3SmallSize, borderRadius: 3 * roundness };
+        case 'medium':
+          return { ...v3MediumSize, borderRadius: 4 * roundness };
+        case 'large':
+          return { ...v3LargeSize, borderRadius: 7 * roundness };
+      }
+    }
+    if (size === 'small') {
+      return smallSize;
+    }
+    return standardSize;
+  };

package/src/components/Fab/Group.js

@@ -1,4 +1,4 @@
-import { FAB} from 'react-native-paper';
+import FAB from "./FabItem";
 import React from "$react";
 import {StyleSheet} from "react-native";
 import {defaultStr,isNonNullString,isObj,defaultObj} from "$cutils";
@@ -184,7 +184,6 @@ const actionType = PropTypes.shape({
     small : PropTypes.bool,
 });
 FabGroupComponent.propTypes = {
-    ...defaultObj(FAB.Group.propTypes),
     fabId : PropTypes.string,//l'id du fab
     onMount : PropTypes.func, ///lorsque le composant est monté
     onUnmount : PropTypes.func, //lorsque le composant est démonté

package/src/components/Fab/GroupComponent.js

@@ -6,14 +6,12 @@ import {
   TouchableWithoutFeedback
 } from 'react-native';
 import View from "$ecomponents/View";
-import {FAB,Text,Card,withTheme} from "react-native-paper";
-import colorFn from 'color';
+import {Text,Card,withTheme} from "react-native-paper";
 import PropTypes from "prop-types";
 import Action from "$ecomponents/Form/Action";
 import theme,{ disabledStyle,StylePropTypes,cursorPointer,Colors,cursorNotAllowed } from '$theme';
 import {defaultStr} from "$cutils";
-
-
+import CustomFabItem from "./FabItem";
 
 const FABGroup = ({
   actions,
@@ -159,8 +157,8 @@ const FABGroup = ({
             )
           })}
         </View>
-        <FAB
-          small = {false}
+        <CustomFabItem
+          size = 'medium'
           {...defaultObj(rest)}
           onPress={() => {
             onPress?.();
@@ -204,7 +202,6 @@ FABGroup.propTypes = {
    * - `labelTextColor`: custom label text color of the action item
    * - `style`: pass additional styles for the fab item, for example, `backgroundColor`
    * - `labelStyle`: pass additional styles for the fab item label, for example, `backgroundColor`
-   * - `small`: boolean describing whether small or normal sized FAB is rendered. Defaults to `true`
    * - `onPress`: callback that is called when `FAB` is pressed (required)
    */
   actions: PropTypes.arrayOf(PropTypes.shape({
@@ -214,7 +211,6 @@ FABGroup.propTypes = {
     labelTextColor: PropTypes.string,
     style: StylePropTypes,
     labelStyle: StylePropTypes,
-    small: PropTypes.bool,
     onPress: PropTypes.func,
     testID: PropTypes.string,
   })),
@@ -314,8 +310,8 @@ const _FabItem = function({children,label,disabled:customDisabled,pointerEvents,
                </Card>
              </View>
            ) : null}
-           <FAB
-             small={typeof small =='boolean' ? small : true}
+           <CustomFabItem
+             size={typeof small =='boolean' && small ? "small":"medium"}
              icon={icon}
              color={color}
              disabled = {disabled}

package/src/components/Fab/index.js

@@ -1,6 +1,6 @@
 import Group from "./Group";
 import Fab from "./Fab";
-
+export {default as FabItem} from "./FabItem";
 export default Fab;
 
 export {Group};

package/src/layouts/ProfilAvatar/index.js

@@ -82,7 +82,7 @@ const UserProfileAvatarComponent = React.forwardRef(({drawerRef,chevronIconProps
                     });
                 }
             },
-            Auth.canSignOut() || true && {
+            Auth.canSignOut() && {
                 label : i18n.lang("logout",'Déconnexion'),
                 icon : "logout",
                 onPress : (a)=>{

package/src/screens/Help/openLibraries.js

@@ -1,8 +1,12 @@
 module.exports = {
 	"@fto-consult/expo-ui": {
-		"version": "8.57.3",
-		"url": "https://github.com/borispipo/expo-ui#readme",
-		"license": "ISC"
+		"name": "@fto-consult/expo-ui",
+		"version": "8.58.2",
+		"repository": {
+			"type": "git",
+			"url": "git+https://github.com/borispipo/expo-ui.git"
+		},
+		"homepage": "https://github.com/borispipo/expo-ui#readme"
 	},
 	"@babel/plugin-proposal-export-namespace-from": {
 		"version": "7.18.9",