@fto-consult/expo-ui 1.0.4

package/src/components/Icon/IconButton.js

@@ -0,0 +1,155 @@
+import * as React from 'react';
+import {
+  StyleSheet,
+} from 'react-native';
+import {TouchableRipple} from "react-native-paper";
+import Icon from './Icon';
+import CrossFadeIcon from './CrossFadeIcon';
+import Surface from '$ecomponents/Surface';
+import PropTypes from "prop-types";
+import theme,{StyleProp,Colors} from "$theme";
+import {defaultStr,isNonNullString} from "$utils";
+
+const IconButton = ({
+  icon,
+  iconColor: customIconColor,
+  containerColor,
+  size = 24,
+  accessibilityLabel,
+  disabled,
+  onPress,
+  selected = false,
+  animated = false,
+  mode,
+  containerProps,
+  style,
+  testID,
+  ...rest
+}) => {
+  const IconComponent = animated ? CrossFadeIcon : Icon;
+  testID = defaultStr(testID,"RN_IconButtonComponent");
+  containerProps = defaultObj(containerProps);
+  const containerStyle = StyleSheet.flatten(containerProps.style) || {};
+  const backgroundColor = Colors.isValid(containerColor)? containerColor : Colors.isValid(containerStyle.color) ? containerStyle.color : undefined;
+  const iconColor = Colors.isValid(customIconColor)? customIconColor : theme.colors.text;
+  const borderColor = theme.colors.outline || theme.colors.divider;
+  const rippleColor = Colors.setAlpha(iconColor,0.32);
+  const buttonSize =  size * 1.5;
+
+  const borderStyles = {
+    borderWidth: 0,
+    borderRadius: buttonSize / 2,
+    borderColor,
+  };
+
+  return (
+    <Surface
+      testID = {testID+"_Container"}
+      style={
+        [
+          {
+            backgroundColor,
+            width: buttonSize,
+            height: buttonSize,
+          },
+          styles.container,
+          borderStyles,
+          disabled && styles.disabled,
+          style,
+        ]
+      }
+    >
+      <TouchableRipple
+        borderless
+        centered
+        onPress={onPress}
+        rippleColor={rippleColor}
+        accessibilityLabel={accessibilityLabel}
+        style={styles.touchable}
+        // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
+        accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
+        accessibilityComponentType="button"
+        accessibilityRole="button"
+        accessibilityState={{ disabled }}
+        disabled={disabled}
+        hitSlop={
+          TouchableRipple.supported
+            ? { top: 10, left: 10, bottom: 10, right: 10 }
+            : { top: 6, left: 6, bottom: 6, right: 6 }
+        }
+        {...rest}
+        testID = {testID}
+      >
+        <IconComponent testID={testID+"_Icon"} color={iconColor} source={icon} size={size} />
+      </TouchableRipple>
+    </Surface>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    margin: 6,
+    elevation: 0,
+  },
+  touchable: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  disabled: {
+    opacity: 0.32,
+  },
+});
+
+IconButton.propTypes = {
+    /**
+   * Icon to display.
+   */
+  icon: PropTypes.oneOfType(PropTypes.string,PropTypes.object),
+  /**
+   * @supported Available in v5.x
+   * Mode of the icon button. By default there is no specified mode - only pressable icon will be rendered.
+   */
+  mode : PropTypes.oneOf([
+    'outlined','contained' ,'contained-tonal'
+  ]),
+  /**
+   * @renamed Renamed from 'color' to 'iconColor' in v5.x
+   * Color of the icon.
+   */
+  iconColor: PropTypes.string,
+  /**
+   * @supported Available in v5.x
+   * Background color of the icon container.
+   */
+  containerColor: PropTypes.string,
+  /**
+   * @supported Available in v5.x
+   * Whether icon button is selected. A selected button receives alternative combination of icon and container colors.
+   */
+  selected: PropTypes.bool,
+  /**
+   * Size of the icon.
+   */
+  size : PropTypes.number,
+  /**
+   * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Whether an icon change is animated.
+   */
+  animated: PropTypes.bool,
+  /**
+   * Accessibility label for the button. This is read by the screen reader when the user taps the button.
+   */
+  accessibilityLabel: PropTypes.string,
+  /**
+   * Function to execute on press.
+   */
+  onPress : PropTypes.func,//(e: GestureResponderEvent) => void;
+  style : StyleProp,
+  ref : PropTypes.object,
+}
+export default theme.withStyles(IconButton,{displayName:"IconButtonComponent"});

package/src/components/Icon/MaterialCommunityIcon.js

@@ -0,0 +1,93 @@
+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");

package/src/components/Icon/index.js

@@ -0,0 +1,10 @@
+import Checkbox from "./Checkbox";
+import Icon from "./Icon";
+
+export * from "./utils";
+
+Icon.Checkbox = Checkbox;
+
+export {Checkbox};
+
+export default Icon;

package/src/components/Icon/utils.js

@@ -0,0 +1,15 @@
+import {isIos} from "$cplatform";
+import theme,{Colors} from "$theme";
+
+export const BACK_ICON = isIos() ? "chevron-left" : "arrow-left";
+
+export const MORE_ICON = isIos() ? 'dots-horizontal' : 'dots-vertical';
+
+export const MENU_ICON = "menu";
+
+export const COPY_ICON = "content-copy";
+
+export const PRINT_ICON = "printer";
+
+export const ICON_SIZE = 24;
+export const ICON_OFFSET = 12;

package/src/components/Image/Editor/index copy.js

@@ -0,0 +1,42 @@
+import React from "$react";
+import { Button, Image, StyleSheet} from 'react-native';
+import View from "$ecomponents/View";
+import { Asset } from 'expo-asset';
+import { manipulateAsync, FlipType, SaveFormat } from 'expo-image-manipulator';
+import {defaultObj} from "$utils";
+import Dialog from "$ecomponents/Dialog";
+
+const ImageEditorComponent = React.forwardRef((props,ref)=>{
+    let {source,dialogProps,visible,imageProps,...rest} = props;
+    const isMounted = React.useIsMounted();
+    const [context] = React.useStateIfMounted({});
+    imageProps = defaultObj(imageProps);
+    dialogProps = defaultObj(dialogProps);
+    context.dialogRef = React.useRef(null);
+    React.useEffect(()=>{
+        React.setRef(ref,context);
+    })
+    return (<Dialog {...dialogProps} visible={visible} actions={[]} ref={context.dialogRef} fullScreen>
+        <View style={styles.container}>
+            <Image
+                resizeMode = {"contain"}
+                {...imageProps}
+                source={source}
+                style={[imageProps.style]}
+            />
+        </View>
+    </Dialog>
+  );
+})
+
+export default ImageEditorComponent;
+
+const styles = StyleSheet.create({
+    container : {
+        flex : 1,
+        alignItems : 'center',
+        justifyContent : 'center',
+        paddingHorizontal : 30,
+        paddingVertical : 30,
+    }
+})

package/src/components/Image/Editor/index.js

@@ -0,0 +1,52 @@
+import React from "$react";
+import { Button, Image, StyleSheet} from 'react-native';
+import View from "$ecomponents/View";
+import { ImageEditor } from "expo-image-editor";
+import {defaultObj} from "$utils";
+
+const ImageEditorComponent = React.forwardRef((props,ref)=>{
+    let {source,uri,onSuccess,imageUri,lockAspectRatio,dialogProps,onDismiss,visible,imageProps,...rest} = props;
+    const isMounted = React.useIsMounted();
+    const [context] = React.useStateIfMounted({});
+    imageProps = defaultObj(imageProps);
+    dialogProps = defaultObj(dialogProps);
+    context.dialogRef = React.useRef(null);
+    const [imageData,setImageData] = React.useStateIfMounted(null);
+
+
+    return <View style={[styles.container]}>
+            <Image
+                style={{ height: 300, width: 300 }}
+                source={{ uri: imageData?.uri }}
+            />
+            <ImageEditor
+                ref = {(el)=>{
+                    React.setRef(ref,el);
+                }}
+                visible={visible}
+                onCloseEditor={onDismiss}
+                imageUri={imageUri || uri}
+                fixedCropAspectRatio={16 / 9}
+                lockAspectRatio={lockAspectRatio}
+                minimumCropDimensions={minimumCropDimensions}
+                onEditingComplete={(result) => {
+                    setImageData(result);
+                }}
+                mode="full"
+            />
+    </View>
+})
+
+export default ImageEditorComponent;
+
+const styles = StyleSheet.create({
+    container : {
+        flex : 1,
+        alignItems : 'center',
+        justifyContent : 'center',
+        paddingHorizontal : 30,
+        paddingVertical : 30,
+    }
+})
+
+ImageEditorComponent.displayName = "ImageEditorComponent";

package/src/components/Image/index.js

@@ -0,0 +1,309 @@
+import {Image,View} from "react-native";
+import Menu from "$ecomponents/Menu";
+import Avatar from "$ecomponents/Avatar";
+import {TouchableOpacity,Pressable} from "react-native";
+import {isDecimal,setQueryParams,isValidURL,defaultStr as defaultString,isDataURL,isPromise,defaultBool,isObj,isNonNullString} from "$utils";
+import {notify} from "$ecomponents/Dialog";
+let maxWidthDiff = 150, maxHeightDiff = 150;
+import {StyleSheet} from "react-native";
+import React from "$react";
+import PropTypes from "prop-types";
+import {isMobileNative} from "$cplatform";
+//import Signature from "$ecomponents/Signature";
+import Label from "$ecomponents/Label";
+//import Editor from "./Editor";
+
+
+import {pickImage,nonZeroMin,canTakePhoto,takePhoto} from "$emedia";
+import addPhoto from "$assets/add_photo.png";
+
+export const isAssets = (asset,staticAssets)=>{
+    return isObj(asset) && isDecimal(asset.width) && isDecimal(asset.height) && isNonNullString(asset.uri) && (staticAssets ? asset.uri.contains("/static/"):true);
+}
+export const isValidImageSrc = (src)=>{
+    if(!isNonNullString(src)) return false;
+    return isDataURL(src)? true : isValidURL(src) ? true : src.contains("/static/media/")? true  : false;
+}
+export const resolveAssetSource = (source)=>{
+    if(!source && !isDecimal(source)) return undefined;
+    try {
+        return Image.resolveAssetSource(source);
+    } catch(e){
+        console.log(r," triing to resolve image asset from source ",source)
+        return undefined;
+    }
+}
+export const getUri = (src,onlySting)=>{
+    if(isAssets(src)) return src.uri;
+    if(isDecimal(src)){
+        if(onlySting !== false){
+            return resolveAssetSource(src)?.uri;
+        }
+        return resolveAssetSource(src);
+    }
+    if(isObj(src) && isValidImageSrc(src.uri)){
+        return src.uri;
+    } else if(isValidImageSrc(src)) return src;
+    return null;
+}
+
+export default function ImageComponent(props){
+    const [src,setSrc] = React.useStateIfMounted(defaultVal(props.src));
+    const prevSrc = React.usePrevious(src);
+    /*const [editorProps,setEditorProps] = React.useStateIfMounted({
+        visible : false,
+        options : {}
+    })*/ 
+    const [isDrawing,setIsDrawing] = React.useStateIfMounted(false);
+    let {disabled,onMount,defaultSource,onUnmount,label,text,labelProps,readOnly,beforeRemove,
+        onChange,draw,round,drawText,drawLabel,rounded,editable,defaultSrc,
+        createSignatureOnly,pickImageProps,width,height,cropProps,size,resizeProps,containerProps,
+        menuProps,pickUri,drawProps,imageProps,testID,...rest} = props;
+    rest = defaultObj(rest);
+    pickImageProps = defaultObj(pickImageProps);
+    cropProps = defaultObj(cropProps);
+    draw = defaultBool(draw,true);
+    label = defaultVal(label,text);
+    labelProps = defaultObj(labelProps);
+    disabled = defaultVal(disabled,false);
+    readOnly = defaultBool(readOnly,false);
+    menuProps = defaultObj(menuProps);
+    round = defaultBool(round,rounded,true);
+    containerProps = defaultObj(containerProps);
+    drawProps = defaultObj(drawProps);
+    let content = null;
+    defaultSrc = defaultVal(defaultSrc);
+    editable = defaultBool(editable,true);
+    if(disabled){
+        editable = false;
+    }
+    React.useEffect(()=>{
+        if(src == props.src) return;
+        setSrc(props.src);
+    },[props.src])
+    
+    if(isDecimal(width) && width > 0){
+        rest.width = width;
+    } 
+    if(isDecimal(height) && height > 0){
+        rest.height = height;
+    } 
+    if(isDecimal(size) && size > 10){
+        rest.size = Math.trunc(size);
+    } else {
+        rest.size = 50;
+    }
+
+    let imageWidth, imageHeight;
+    if(isDecimal(width) && width){
+        imageWidth = width
+    } 
+    if(isDecimal(height) && height){
+        imageHeight = height;
+    } 
+    if(!imageWidth && !imageHeight){
+        imageWidth = imageHeight = rest.size;
+    }
+    let cropWidth = nonZeroMin(cropProps.width,width)
+    let cropHeight = nonZeroMin(cropProps.height,height);
+    if(!cropWidth) cropWidth = undefined;
+    if(!cropHeight) cropHeight = undefined; 
+
+    const getCropProps = (opts)=>{
+        opts = defaultObj(opts);
+        let canCrop = defaultBool(opts.allowsEditing,true); 
+        if(cropWidth || cropHeight){
+            canCrop = true;
+            if(cropWidth) opts.width = cropWidth;
+            else if(cropHeight) opts.height = cropHeight;
+        }
+        opts.allowsEditing = canCrop;
+        return opts;
+    }
+    const handlePickedImage = (image,opts)=>{
+        opts = defaultObj(opts);
+        image.dataUrl = image.dataURL = 'data:image/jpeg;base64,'+image.base64;
+        let diffWidth = image.width - cropWidth - maxWidthDiff,
+        diffHeight = image.height - cropHeight - maxHeightDiff;
+        let canCrop = isMobileNative()? false : ((width && diffWidth > 0) || (height && diffHeight > 0)? true : false);
+        const imageSrc = pickUri ? image.uri : image.dataURL;
+        if(canCrop){
+            return context.cropImage({source:image,uri:image.dataURL,...opts}).then((props)=>{
+                setSrc(imageSrc)
+            });
+        }
+        setSrc(imageSrc);
+        return image;
+    }
+    const context = {
+        setSrc,
+        deleteImage : React.useCallback(()=>{
+            if(typeof beforeRemove =='function'){
+                const r = beforeRemove({context});
+                if(r === false) return;
+                const cb = (r)=>{
+                    if(isNonNullString(r)){
+                        notify.error(r);
+                        return false;
+                    }
+                    setSrc(null);
+                }
+                if(isPromise(r)){
+                    return r.then(cb);
+                } else cb();
+            } else {
+                setSrc(null);
+            }
+        },[src]),
+        cropImage : (props)=>{
+            return Promise.resolve(props);
+            return new Promise((resolve,reject)=>{
+                console.log({...editorProps,visible:true,...props},"is editor props");
+                setEditorProps({...editorProps,visible:true,...props})
+            })
+        },
+        pickImage : (opts)=>{
+            opts = getCropProps(opts);
+            opts.base64 = true;
+            return pickImage(opts).then((image)=>handlePickedImage(image,opts));
+        },
+        draw : ()=>{
+            setIsDrawing(true);
+        },
+    }
+    React.useEffect(()=>{
+        if(src === prevSrc)return;
+        if(typeof onChange =='function'){
+            onChange({context,src,deleted:src == null?true:false,dataURL:src,dataUrl:src})
+        }
+    },[src])
+    React.useEffect(()=>{
+        if(typeof onMount =='function'){
+            onMount({context});
+        }
+        return ()=>{
+            if(typeof onUnmount =='function'){
+                onUnmount({context});
+            }
+        }
+    },[])
+    let defaultURI = getUri(defaultVal(defaultSource,defaultSrc));
+    if(!defaultURI){
+        defaultURI = getUri(addPhoto);
+    }
+    let uri = getUri(src) || defaultURI
+    let canUpdate = uri !== defaultURI;
+    if(isValidURL(uri)){
+        uri = setQueryParams(uri,'cache',(new Date()).getTime());
+    }
+    let source = isNumber(uri)? uri : isObj(uri)? uri : {uri};
+    if(isObj(src)){
+        source = {...src,...source};
+    }
+    imageProps = defaultObj(imageProps);
+    testID = defaultStr(testID,"RN_ImageComponent");
+    let menuItems = []
+    if(editable){
+        menuItems.push({
+            label : 'Sélect Image',
+            icon :'image-search',
+            onPress : (a)=>{
+                context.pickImage();
+            }
+        })
+    }
+    (async ()=>{
+        if(false && await canTakePhoto()){
+            menuItems.push({
+                label : 'Eng photo',
+                icon : 'camera',
+                onPress : (a)=>{
+                    takePhoto().then(handlePickedImage);
+                }
+            })
+        }
+    })();
+
+    if(canUpdate && editable){
+        menuItems.push({
+            key : 'has-photo',
+            label : 'Retirer la photo',
+            icon : "image-off",
+            onPress : x=> context.deleteImage()
+        })
+    }
+    if(false && defaultBool(draw ,true) && editable){
+        menuItems.push({
+            key : "drawImageCustom",
+            label : defaultString(drawText,drawLabel,'Faire un dessin'),
+            icon : "signature-image",
+            onPress : (c)=>{
+                context.draw(c);
+                console.log(c," pressed ")
+            }
+        })
+    }
+    const _label = defaultString(label);
+    const isDisabled = menuItems.length > 0 ? true : false; 
+    const pointerEvents = isDisabled ? "auto" :"none";
+    return <View testID={testID+"_FagmentContainer"}>
+        {!createSignatureOnly ? (<Menu
+                {...menuProps}
+                disabled = {isDisabled}
+                anchor = {(props)=>{
+                    return <View pointerEvents={pointerEvents} accessibilityLabel = {_label} testID={testID+"_Container"} {...containerProps} pointerEvents={disabled|| readOnly? "none":"auto"} style={[label?styles.align:null,containerProps.style,label?styles.container:null]}>
+                        {<Label testID={testID+"_Label"} {...labelProps} disabled={disabled} style={[styles.label,labelProps.style]}>{label}</Label>}
+                        {<Avatar
+                            resizeMethod = {"auto"}
+                            resizeMode = {"contain"}
+                            {...rest}
+                            testID = {testID}
+                            width = {imageWidth}
+                            height = {imageHeight}
+                            imageProps = {imageProps}
+                            {...props}
+                            style = {[rest.style]}
+                            rounded = {round}
+                            image = {true}
+                            source = {source}
+                        />}
+                    </View>
+            }}
+            items = {menuItems}
+        />) : null}
+        {false && <Signature testID={testID+"_Signature"} visible = {isDrawing} dialogProps = {{
+            onDismiss :()=>{
+                setIsDrawing(false);
+                return false;
+            }
+        }} />}
+    </View>
+}
+
+const styles = StyleSheet.create ({
+    align : {
+      alignItems : 'center',
+      justifyContent : 'flex-start',
+    },
+    container : {
+      flexDirection:'row',
+      justifyContent : 'flex-start',
+      alignItems : 'center',
+      width : '100%'
+      //flex:1,
+    },
+    label: {
+        marginRight : 5,
+    },
+})
+
+ImageComponent.propTypes = {
+    containerProps : PropTypes.object,//les props du container entre le lable et l'image rendu
+    menuProps : PropTypes.object, ///les props du menu d'édition du composant,
+    editable : PropTypes.bool,
+    disabled: PropTypes.bool,
+    pickUri : PropTypes.bool,////si l'uri sera retournée lorsqu'on pick l'image en lieu et place du dataURL
+    imageProps : PropTypes.object, ///les props supplémentaires du composant Image
+    draw : PropTypes.bool, //si l'on peut déssiner une image
+    pickImageProps : PropTypes.object, ///les options à passer à la fonction pickImage, pour récupérer une image enregistrée en machine
+}