@fto-consult/expo-ui 1.1.41 → 1.1.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "1.1.41",
+  "version": "1.1.42",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {

package/src/components/Icon/IconButton.js

@@ -3,14 +3,14 @@ import {
   StyleSheet,
 } from 'react-native';
 import {TouchableRipple} from "react-native-paper";
-import Icon from './Icon';
-import CrossFadeIcon from './CrossFadeIcon';
+import CrossFadeIcon from 'react-native-paper/lib/commonjs/components/CrossFadeIcon';
 import Surface from '$ecomponents/Surface';
+import { IconButton } from 'react-native-paper';
 import PropTypes from "prop-types";
 import theme,{StyleProp,Colors} from "$theme";
-import {defaultStr,isNonNullString} from "$utils";
+import {defaultStr} from "$utils";
 
-const IconButton = ({
+const IconButtonComponent = ({
   icon,
   iconColor: customIconColor,
   containerColor,
@@ -26,7 +26,7 @@ const IconButton = ({
   testID,
   ...rest
 }) => {
-  const IconComponent = animated ? CrossFadeIcon : Icon;
+  const IconComponent = animated ? CrossFadeIcon : IconButton;
   testID = defaultStr(testID,"RN_IconButtonComponent");
   containerProps = defaultObj(containerProps);
   const containerStyle = StyleSheet.flatten(containerProps.style) || {};
@@ -102,7 +102,7 @@ const styles = StyleSheet.create({
   },
 });
 
-IconButton.propTypes = {
+IconButtonComponent.propTypes = {
     /**
    * Icon to display.
    */
@@ -152,4 +152,4 @@ IconButton.propTypes = {
   style : StyleProp,
   ref : PropTypes.object,
 }
-export default theme.withStyles(IconButton,{displayName:"IconButtonComponent"});
+export default theme.withStyles(IconButtonComponent,{displayName:"IconButtonComponent"});

package/src/components/Icon/utils.js

@@ -1,5 +1,4 @@
 import {isIos} from "$cplatform";
-import theme,{Colors} from "$theme";
 
 export const BACK_ICON = isIos() ? "chevron-left" : "arrow-left";
 

package/src/components/Logo/Logo.js

@@ -1,12 +1,9 @@
-import {IconButton } from "react-native-paper";
 import { Component } from "react";
 import {isNativeMobile} from "$cplatform";
-import {Image} from "react-native";
 import View from "$ecomponents/View";
 import React from "$react";
 import theme,{remToPixel,Colors,flattenStyle} from '$theme';
 import {StyleSheet} from "react-native";
-import source from "$assets/logo.png";
 import {defaultStr} from "$utils";
 import LogoComponent from "$logoComponent";
 
@@ -17,19 +14,22 @@ export default class Logo extends Component {
         let {icon,color,style,testID,logo,text} = this.props;
         testID = defaultStr(testID,"RN_LogoComponent");
         const styles = getStyle(style,color);
+        let logoImage = null,img,txt=null,hasTwice = false;
+        if(LogoComponent){
+            hasTwice = React.isComponent(LogoComponent.Image) && React.isComponent(LogoComponent.Text);
+            if(!hasTwice){
+                logoImage = React.isValidElement(LogoComponent)? LogoComponent : React.isComponent(LogoComponent)? <LogoComponent {...props} style={styles.logoContent} testID={testID+"_Content"} styles={styles}/> : null;
+            } else {
+                img = icon !== false ? <View testID={testID+"_ContentContainer"} style={styles.logoImage}>
+                    <LogoComponent.Image styles={styles}/>
+                </View> : null;
+                txt = text !== false ? <LogoComponent.Text style={styles.logoContent} styles={styles}/> : null;
+            }
+        }
         return <View testID={testID} style={styles.container}> 
-            {icon !== false ? <View testID={testID+"_ContentContainer"} style={styles.logoImage}>
-                {<IconButton testID={testID+"_IconButton"} style={styles.logoImageContent} 
-                    size={50}
-                    icon={() => (
-                        <Image
-                          source={source}
-                          style={{ width: 50, height: 50}}
-                        />
-                    )}
-                />}
-            </View> : null}
-            {text !== false  && logo !== false ? (React.isValidElement(LogoComponent)? LogoComponent : React.isComponent(LogoComponent)? <LogoComponent {...props} style={styles.logoContent} testID={testID+"_Content"} styles={styles}/> : null) : null}
+            {hasTwice ? img : null}
+            {hasTwice? txt : null}
+            {!hasTwice ? logoImage : null}
         </View>
     }
     

package/src/components/Icon/CrossFadeIcon.js

@@ -1,133 +0,0 @@
-import * as React from 'react';
-import { Animated, StyleSheet, View } from 'react-native';
-import Icon, { isValidIcon, isEqualIcon } from './Icon';
-import PropTypes from 'prop-types';
-import theme from "$theme";
-import {defaultStr,defaultObj} from "$utils";
-
-const CrossFadeIcon = ({ color,testID,containerProps,style, size, source}) => {
-  const [currentIcon, setCurrentIcon] = React.useState(
-    () => source
-  );
-  testID = defaultStr(testID,"RN_CrossFadeIconComponent");
-  const [previousIcon, setPreviousIcon] = React.useState(
-    null
-  );
-
-  const { current: fade } = React.useRef(new Animated.Value(1));
-
-  const { scale } = theme.animation;
-
-  if (currentIcon !== source) {
-    setPreviousIcon(() => currentIcon);
-    setCurrentIcon(() => source);
-  }
-
-  React.useEffect(() => {
-    if (isValidIcon(previousIcon) && !isEqualIcon(previousIcon, currentIcon)) {
-      fade.setValue(1);
-
-      Animated.timing(fade, {
-        duration: scale * 200,
-        toValue: 0,
-        useNativeDriver: true,
-      }).start();
-    }
-  }, [currentIcon, previousIcon, fade, scale]);
-
-  const opacityPrev = fade;
-  const opacityNext = previousIcon
-    ? fade.interpolate({
-        inputRange: [0, 1],
-        outputRange: [1, 0],
-      })
-    : 1;
-
-  const rotatePrev = fade.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['-90deg', '0deg'],
-  });
-  containerProps = defaultObj(containerProps);
-  const rotateNext = previousIcon
-    ? fade.interpolate({
-        inputRange: [0, 1],
-        outputRange: ['0deg', '-180deg'],
-      })
-    : '0deg';
-
-  return (
-    <View
-      testID={testID+"_Container"}
-      {...containerProps}
-      style={[
-        styles.content,
-        {
-          height: size,
-          width: size,
-        },
-        containerProps.style
-      ]}
-    >
-      {previousIcon ? (
-        <Animated.View
-          testID={testID+"_PrevIcon"}
-          style={[
-            styles.icon,
-            {
-              opacity: opacityPrev,
-              transform: [{ rotate: rotatePrev }],
-            },
-          ]}
-        >
-          <Icon testID={testID+"_Left"} source={previousIcon} size={size} color={color} />
-        </Animated.View>
-      ) : null}
-      <Animated.View
-        testID={testID+"_RightIcon"}
-        style={[
-          styles.icon,
-          {
-            opacity: opacityNext,
-            transform: [{ rotate: rotateNext }],
-          },
-        ]}
-      >
-        <Icon testID={testID+"_Right"} source={currentIcon} size={size} color={color} />
-      </Animated.View>
-    </View>
-  );
-};
-
-export default theme.withStyles(CrossFadeIcon,{displayName:"CrossFadeIconComponent",mode:'normal'});
-
-const styles = StyleSheet.create({
-  content: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  icon: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-});
-
-CrossFadeIcon.propTypes = {
-    /**
-   * Icon to display for the `CrossFadeIcon`.
-   */
-  source: PropTypes.oneOfType([
-     PropTypes.string,
-     PropTypes.object,
-  ]),
-  /**
-   * Color of the icon.
-   */
-  color: PropTypes.string,
-  /**
-   * Size of the icon.
-   */
-  size: PropTypes.number,
-}

package/src/components/Icon/MaterialCommunityIcon.js

@@ -1,93 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, Text, Platform} from 'react-native';
-import { black } from "$theme/defaultTheme";
-import theme from "$theme";
-let MaterialCommunityIcons = undefined;
-
-try {
-  // Optionally require vector-icons
-  MaterialCommunityIcons = require('react-native-vector-icons/MaterialCommunityIcons').default;
-} catch (e) {
-  let isErrorLogged = false;
-
-  // Fallback component for icons
-  MaterialCommunityIcons = ({ name, color, size, ...rest }) => {
-    /* eslint-disable no-console */
-    if (!isErrorLogged) {
-      if (
-        !/(Cannot find module|Module not found|Cannot resolve module)/.test(
-          (e).message
-        )
-      ) {
-        console.error(e);
-      }
-
-      console.warn(
-        `Tried to use the icon '${name}' in a component from 'react-native-paper', but 'react-native-vector-icons/MaterialCommunityIcons' could not be loaded.`,
-        `To remove this warning, try installing 'react-native-vector-icons' or use another method to specify icon: https://callstack.github.io/react-native-paper/icons.html.`
-      );
-
-      isErrorLogged = true;
-    }
-    
-    return (
-      <Text
-        {...rest}
-        style={[styles.icon, { color, fontSize: size }]}
-        // @ts-expect-error: Text doesn't support this, but it seems to affect TouchableNativeFeedback
-        pointerEvents="none"
-        selectable={false}
-      >
-        □
-      </Text>
-    );
-  };
-}
-
-export const accessibilityProps =
-  Platform.OS === 'web'
-    ? {
-        role: 'img',
-        focusable: false,
-      }
-    : {
-        accessibilityElementsHidden: true,
-        importantForAccessibility:
-          'no-hide-descendants',
-      };
-
-const defaultIcon = ({
-  name,
-  color = theme.colors.text,
-  size,
-  direction,
-  allowFontScaling,
-  ...rest
-}) => (
-  <MaterialCommunityIcons
-    pointerEvents="none"
-    {...rest}
-    allowFontScaling={allowFontScaling}
-    name={name}
-    color={color}
-    size={size}
-    style={[
-      {
-        transform: [{ scaleX: direction === 'rtl' ? -1 : 1 }],
-        lineHeight: size,
-      },
-      styles.icon,
-      rest.style,
-    ]}
-    selectable={false}
-    {...accessibilityProps}
-  />
-);
-
-const styles = StyleSheet.create({
-  icon: {
-    backgroundColor: 'transparent',
-  },
-});
-
-export default theme.withStyles(defaultIcon,"MaterialIconComponent");