@fto-consult/expo-ui 8.46.2 → 8.47.0

package/bin/create-app/dependencies.js

@@ -31,6 +31,7 @@
 	"react-native-gesture-handler": "~2.14.0",
 	"react-native-reanimated": "~3.6.2",
 	"react-native-view-shot": "3.8.0",
-	"expo-intent-launcher": "~10.11.0"
+	"expo-intent-launcher": "~10.11.0",
+	"expo-image-manipulator": "~11.8.0"
 };
                             

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "8.46.2",
+  "version": "8.47.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/Date/TimePickerModal/index.js

@@ -1,9 +1,16 @@
 import {TimePickerModal} from 'react-native-paper-dates';
 import {PaperProvider} from 'react-native-paper';
 import theme from "$theme";
+import FontIcon from "$ecomponents/Icon/Font";
 
 export default function TimePickerModalComponent(props){
-    return <PaperProvider theme={theme}>
+    return <PaperProvider theme={theme}
+        settings={{
+            icon: (props) => {
+              return <FontIcon {...props}/>
+            },
+        }}
+    >
         <TimePickerModal {...props}/>
     </PaperProvider>
 }

package/src/components/Image/Cropper/ExpoImageManipulator.js

@@ -0,0 +1,311 @@
+import React, { Component } from 'react'
+import {
+    Dimensions,
+    Image,
+    ScrollView,
+    Modal,
+    View,
+    Text,
+    SafeAreaView,
+    TouchableOpacity,
+} from 'react-native'
+import * as ImageManipulator from 'expo-image-manipulator'
+import PropTypes from 'prop-types'
+import AutoHeightImage from '../../Avatar/AutoHeightImage'
+import Icon from "$ecomponents/Icon";
+import {isIphoneX } from 'react-native-iphone-x-helper'
+import ImageCropOverlay from './ImageCropOverlay'
+
+const { width, height } = Dimensions.get('window')
+
+
+class ExpoImageManipulator extends Component {
+    constructor(props) {
+        super(props)
+        const { squareAspect } = this.props
+        this.state = {
+            cropMode: true,
+            processing: false,
+            zoomScale: 1,
+            squareAspect,
+        }
+
+        this.scrollOffset = 0
+
+        this.currentPos = {
+            left: 0,
+            top: 0,
+        }
+
+        this.currentSize = {
+            width: 0,
+            height: 0,
+        }
+
+        this.maxSizes = {
+            width: 0,
+            height: 0,
+        }
+
+        this.actualSize = {
+            width: 0,
+            height: 0
+        }
+    }
+
+    async componentDidMount() {
+        await this.onConvertImageToEditableSize()
+    }
+
+    async onConvertImageToEditableSize() {
+        const { photo: { uri: rawUri } } = this.props
+        const { uri, width, height } = await ImageManipulator.manipulateAsync(rawUri,
+            [
+                {
+                    resize: {
+                        width: 1080,
+                    },
+                },
+            ])
+        this.setState({
+            uri,
+        })
+        this.actualSize.width = width
+        this.actualSize.height = height
+    }
+    onCropImage = () => {
+        this.setState({ processing: true })
+        const { uri } = this.state
+        Image.getSize(uri, async (actualWidth, actualHeight) => {
+            let cropObj = this.getCropBounds(actualWidth, actualHeight);
+            if (cropObj.height > 0 && cropObj.width > 0) {
+                let uriToCrop = uri
+                const { uri: uriCroped, base64, width: croppedWidth, height: croppedHeight } = await this.crop(cropObj, uriToCrop)
+
+                this.actualSize.width = croppedWidth
+                this.actualSize.height = croppedHeight
+
+                this.setState({
+                    uri: uriCroped, base64, cropMode: false, processing: false,
+                })
+            } else {
+                this.setState({cropMode: false, processing: false})
+            }
+        })
+    }
+
+    onRotateImage = async () => {
+        const { uri } = this.state
+        let uriToCrop = uri
+        Image.getSize(uri, async (width2, height2) => {
+            const { uri: rotUri, base64 } = await this.rotate(uriToCrop, width2, height2)
+            this.setState({ uri: rotUri, base64 })
+        })
+    }
+
+    onFlipImage = async (orientation) => {
+        const { uri } = this.state
+        let uriToCrop = uri
+        Image.getSize(uri, async (width2, height2) => {
+            const { uri: rotUri, base64 } = await this.filp(uriToCrop, orientation)
+            this.setState({ uri: rotUri, base64 })
+        })
+    }   
+
+    onHandleScroll = (event) => {
+        this.scrollOffset = event.nativeEvent.contentOffset.y
+    }
+
+    getCropBounds = (actualWidth, actualHeight) => {
+        let imageRatio = actualHeight / actualWidth
+        var originalHeight = Dimensions.get('window').height - 64
+        if (isIphoneX()) {
+            originalHeight = Dimensions.get('window').height - 122
+        }
+        let renderedImageWidth = imageRatio < (originalHeight / width) ? width : originalHeight / imageRatio
+        let renderedImageHeight = imageRatio < (originalHeight / width) ? width * imageRatio : originalHeight
+
+        let renderedImageY = (originalHeight - renderedImageHeight) / 2.0
+        let renderedImageX = (width - renderedImageWidth) / 2.0
+
+        const renderImageObj = {
+            left: renderedImageX,
+            top: renderedImageY,
+            width: renderedImageWidth,
+            height: renderedImageHeight,
+        }
+        const cropOverlayObj = {
+            left: this.currentPos.left,
+            top: this.currentPos.top,
+            width: this.currentSize.width,
+            height: this.currentSize.height,
+        }
+
+        var intersectAreaObj = {}
+
+        let x = Math.max(renderImageObj.left, cropOverlayObj.left);
+        let num1 = Math.min(renderImageObj.left + renderImageObj.width, cropOverlayObj.left + cropOverlayObj.width);
+        let y = Math.max(renderImageObj.top, cropOverlayObj.top);
+        let num2 = Math.min(renderImageObj.top + renderImageObj.height, cropOverlayObj.top + cropOverlayObj.height);
+        if (num1 >= x && num2 >= y)
+            intersectAreaObj = {
+                originX: (x - renderedImageX) * (actualWidth / renderedImageWidth) ,
+                originY: (y - renderedImageY) * (actualWidth / renderedImageWidth),
+                width: (num1 - x) * (actualWidth / renderedImageWidth),
+                height: (num2 - y) * (actualWidth / renderedImageWidth)
+            }
+        else {
+            intersectAreaObj = {
+                originX: x - renderedImageX,
+                originY: y - renderedImageY,
+                width: 0,
+                height: 0
+            }
+        }
+        return intersectAreaObj
+    }
+
+    filp = async (uri, orientation) => {
+        const { saveOptions } = this.props
+        const manipResult = await ImageManipulator.manipulateAsync(uri, [{ 
+              flip: orientation == 'vertical' ? ImageManipulator.FlipType.Vertical : ImageManipulator.FlipType.Horizontal
+            }],
+            saveOptions
+        );
+        return manipResult;
+    };
+
+    rotate = async (uri, width2, height2) => {
+        const { saveOptions } = this.props
+        const manipResult = await ImageManipulator.manipulateAsync(uri, [{
+            rotate: -90,
+        }, {
+            resize: {
+                width: this.trueWidth || width2,
+                // height: this.trueHeight || height2,
+            },
+        }], saveOptions)
+        return manipResult
+    }
+
+    crop = async (cropObj, uri) => {
+        const { saveOptions } = this.props
+        if (cropObj.height > 0 && cropObj.width > 0) {
+            const manipResult = await ImageManipulator.manipulateAsync(
+                uri,
+                [{
+                    crop: cropObj,
+                }],
+                saveOptions,
+            )
+            return manipResult
+        }
+        return {
+            uri: null,
+            base64: null,
+        }
+    };
+
+    calculateMaxSizes = (event) => {
+        let w1 = event.nativeEvent.layout.width || 100
+        let h1 = event.nativeEvent.layout.height || 100
+        if (this.state.squareAspect) {
+            if (w1 < h1) h1 = w1
+            else w1 = h1
+        }
+        this.maxSizes.width = w1
+        this.maxSizes.height = h1
+    };
+
+    // eslint-disable-next-line camelcase
+    async UNSAFE_componentWillReceiveProps() {
+        await this.onConvertImageToEditableSize()
+    }
+
+    zoomImage() {
+        // this.refs.imageScrollView.zoomScale = 5
+        // this.setState({width: width})
+        // this.setState({zoomScale: 5})
+
+        // this.setState(curHeight)
+    }
+    
+    render() {
+        const {
+            uri,
+            base64,
+            cropMode,
+            processing,
+            zoomScale
+        } = this.state
+
+        let imageRatio = this.actualSize.height / this.actualSize.width
+        var originalHeight = Dimensions.get('window').height - 64
+        if (isIphoneX()) {
+            originalHeight = Dimensions.get('window').height - 122
+        }
+
+        let cropRatio = originalHeight / width
+
+        let cropWidth = imageRatio < cropRatio ? width : originalHeight / imageRatio
+        let cropHeight = imageRatio < cropRatio ? width * imageRatio : originalHeight
+
+        let cropInitialTop = (originalHeight - cropHeight) / 2.0
+        let cropInitialLeft = (width - cropWidth) / 2.0
+
+
+        if (this.currentSize.width == 0 && cropMode) {
+            this.currentSize.width = cropWidth;
+            this.currentSize.height = cropHeight;
+
+            this.currentPos.top = cropInitialTop;
+            this.currentPos.left = cropInitialLeft;
+        }
+        return <>
+            <AutoHeightImage
+                style={{ backgroundColor: 'black' }}
+                source={{ uri }}
+                resizeMode={imageRatio >= 1 ? "contain" : 'contain'}
+                width={width}
+                height={originalHeight}
+                onLayout={this.calculateMaxSizes}
+            />
+            {!!cropMode && (
+                <ImageCropOverlay onLayoutChanged={(top, left, width, height) => {                                
+                    this.currentSize.width = width;
+                    this.currentSize.height = height;
+                    this.currentPos.top = top
+                    this.currentPos.left = left
+                }} initialWidth={cropWidth} initialHeight={cropHeight} initialTop={cropInitialTop} initialLeft={cropInitialLeft} minHeight={100} minWidth={100} />
+            )}
+        </>
+    }
+}
+
+export default ExpoImageManipulator
+
+ExpoImageManipulator.defaultProps = {
+    onPictureChoosed: ({ uri, base64 }) => console.log('URI:', uri, base64),
+    btnTexts: {
+        crop: 'Crop',
+        rotate: 'Rotate',
+        done: 'Done',
+        processing: 'Processing',
+    },
+    dragVelocity: 100,
+    resizeVelocity: 50,
+    saveOptions: {
+        compress: 1,
+        format: ImageManipulator.SaveFormat.PNG,
+        base64: false,
+    },
+}
+
+ExpoImageManipulator.propTypes = {
+    onPictureChoosed: PropTypes.func,
+    btnTexts: PropTypes.object,
+    saveOptions: PropTypes.object,
+    photo: PropTypes.object.isRequired,
+    dragVelocity: PropTypes.number,
+    resizeVelocity: PropTypes.number,
+}

package/src/components/Image/Cropper/ImageCropOverlay.js

@@ -0,0 +1,219 @@
+import React, { Component } from 'react'
+import { View, PanResponder, Dimensions } from 'react-native';
+
+class ImageCropOverlay extends React.Component {
+
+    state = {
+        draggingTL: false,
+        draggingTM: false,
+        draggingTR: false,
+        draggingML: false,
+        draggingMM: false,
+        draggingMR: false,
+        draggingBL: false,
+        draggingBM: false,
+        draggingBR: false,
+        initialTop: this.props.initialTop,
+        initialLeft: this.props.initialLeft,
+        initialWidth: this.props.initialWidth,
+        initialHeight: this.props.initialHeight,
+
+        offsetTop: 0,
+        offsetLeft: 0,
+    }
+
+    panResponder = {}
+
+    UNSAFE_componentWillMount() {
+        this.panResponder = PanResponder.create({
+            onStartShouldSetPanResponder: this.handleStartShouldSetPanResponder,
+            onPanResponderGrant: this.handlePanResponderGrant,
+            onPanResponderMove: this.handlePanResponderMove,
+            onPanResponderRelease: this.handlePanResponderEnd,
+            onPanResponderTerminate: this.handlePanResponderEnd,
+        })
+    }
+
+    render() {
+        const { draggingTL, draggingTM, draggingTR, draggingML, draggingMM, draggingMR, draggingBL, draggingBM, draggingBR, initialTop, initialLeft, initialHeight, initialWidth, offsetTop, offsetLeft}  = this.state
+        const style = {}
+
+        style.top = initialTop + ((draggingTL || draggingTM || draggingTR || draggingMM) ? offsetTop : 0)
+        style.left = initialLeft + ((draggingTL || draggingML || draggingBL || draggingMM) ? offsetLeft : 0)
+        style.width = initialWidth + ((draggingTL || draggingML || draggingBL) ? - offsetLeft : (draggingTM || draggingMM || draggingBM) ? 0 : offsetLeft)
+        style.height = initialHeight + ((draggingTL || draggingTM || draggingTR) ? - offsetTop : (draggingML || draggingMM || draggingMR) ? 0 : offsetTop)
+
+        if (style.width > this.props.initialWidth) {
+            style.width = this.props.initialWidth
+        }
+        if (style.width < this.props.minWidth) {
+            style.width = this.props.minWidth
+        }
+        if (style.height > this.props.initialHeight) {
+            style.height = this.props.initialHeight
+        }
+        if (style.height < this.props.minHeight) {
+            style.height = this.props.minHeight
+        }
+        return (
+            <View {...this.panResponder.panHandlers} style={[{flex: 1, justifyContent: 'center', alignItems: 'center', position: 'absolute', borderStyle: 'solid', borderWidth: 2, borderColor: '#a4a4a4', backgroundColor: 'rgb(0,0,0,0.5)'}, style]}>
+                <View style={{flexDirection: 'row', width: '100%', flex: 1/3, backgroundColor: 'transparent'}}>
+                    <View style={{borderWidth: '#a4a4a4', borderWidth: 0, backgroundColor: draggingTL ? 'transparent' : 'transparent', flex: 1/3, height: '100%'}}></View>
+                    <View style={{borderWidth: '#a4a4a4', borderWidth: 0, backgroundColor: draggingTM ? 'transparent' : 'transparent', flex: 1/3, height: '100%'}}></View>
+                    <View style={{borderWidth: '#a4a4a4', borderWidth: 0, backgroundColor: draggingTR ? 'transparent' : 'transparent', flex: 1/3, height: '100%'}}></View>
+                </View>
+                <View style={{flexDirection: 'row', width: '100%', flex: 1/3, backgroundColor: 'transparent'}}>
+                    <View style={{borderWidth: '#a4a4a4', borderWidth: 0, backgroundColor: draggingML ? 'transparent' : 'transparent', flex: 1/3, height: '100%'}}></View>
+                    <View style={{borderWidth: '#a4a4a4', borderWidth: 0, backgroundColor: draggingMM ? 'transparent' : 'transparent', flex: 1/3, height: '100%'}}></View>
+                    <View style={{borderWidth: '#a4a4a4', borderWidth: 0, backgroundColor: draggingMR ? 'transparent' : 'transparent', flex: 1/3, height: '100%'}}></View>
+                </View>
+                <View style={{flexDirection: 'row', width: '100%', flex: 1/3, backgroundColor: 'transparent'}}>
+                    <View style={{borderWidth: '#a4a4a4', borderWidth: 0, backgroundColor: draggingBL ? 'transparent' : 'transparent', flex: 1/3, height: '100%'}}></View>
+                    <View style={{borderWidth: '#a4a4a4', borderWidth: 0, backgroundColor: draggingBM ? 'transparent' : 'transparent', flex: 1/3, height: '100%'}}></View>
+                    <View style={{borderWidth: '#a4a4a4', borderWidth: 0, backgroundColor: draggingBR ? 'transparent' : 'transparent', flex: 1/3, height: '100%'}}></View>
+                </View>
+                <View style={{top: 0, left: 0, width: '100%', height: '100%', position: 'absolute', backgroundColor: 'rgba(0, 0, 0, 0.5)'}}>
+                    <View style={{flex: 1/3, flexDirection: 'row'}}>
+                        <View style={{ flex: 3, borderRightWidth: 1, borderBottomWidth: 1, borderColor: '#c9c9c9', borderStyle: 'solid' }}>
+                            <View style={{ position: 'absolute', left: 5, top: 5, borderLeftWidth: 2, borderTopWidth: 2, height: 48, width: 48, borderColor: '#f4f4f4', borderStyle: 'solid' }}/>
+                        </View>
+                        <View style={{ flex: 3, borderRightWidth: 1, borderBottomWidth: 1, borderColor: '#c9c9c9', borderStyle: 'solid' }}>
+                        </View>
+                        <View style={{ flex: 3,  borderBottomWidth: 1, borderColor: '#c9c9c9', borderStyle: 'solid' }}>
+                            <View style={{ position: 'absolute', right: 5, top: 5, borderRightWidth: 2, borderTopWidth: 2, height: 48, width: 48, borderColor: '#f4f4f4', borderStyle: 'solid' }}/>
+                        </View>
+                    </View>
+                    <View style={{flex: 1/3, flexDirection: 'row'}}>
+                        <View style={{ flex: 3, borderRightWidth: 1, borderBottomWidth: 1, borderColor: '#c9c9c9', borderStyle: 'solid' }}>
+                        </View>
+                        <View style={{ flex: 3, borderRightWidth: 1, borderBottomWidth: 1, borderColor: '#c9c9c9', borderStyle: 'solid' }}>
+                        </View>
+                        <View style={{ flex: 3,  borderBottomWidth: 1, borderColor: '#c9c9c9', borderStyle: 'solid' }}>
+                        </View>
+                    </View>
+                    <View style={{flex: 1/3, flexDirection: 'row'}}>
+                        <View style={{ flex: 3, borderRightWidth: 1, borderColor: '#c9c9c9', borderStyle: 'solid', position: 'relative', }}>
+                            <View style={{ position: 'absolute', left: 5, bottom: 5, borderLeftWidth: 2, borderBottomWidth: 2, height: 48, width: 48, borderColor: '#f4f4f4', borderStyle: 'solid' }}/>
+                        </View>
+                        <View style={{ flex: 3, borderRightWidth: 1, borderColor: '#c9c9c9', borderStyle: 'solid' }}>
+                        </View>
+                        <View style={{ flex: 3,  position: 'relative'  }}>
+                            <View style={{ position: 'absolute', right: 5, bottom: 5, borderRightWidth: 2, borderBottomWidth: 2, height: 48, width: 48, borderColor: '#f4f4f4', borderStyle: 'solid' }}/>
+                        </View>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+
+    getTappedItem(x, y) {
+        const { initialLeft, initialTop, initialWidth, initialHeight } = this.state
+        let xPos = parseInt((x - initialLeft) / (initialWidth / 3))
+        let yPos = parseInt((y - initialTop - 64) / (initialHeight / 3))
+
+        let index = yPos * 3 + xPos
+        if (index == 0) {
+            return 'tl';
+        } else if (index == 1) {
+            return 'tm';
+        } else if (index == 2) {
+            return 'tr';
+        } else if (index == 3) {
+            return 'ml';
+        } else if (index == 4) {
+            return 'mm';
+        } else if (index == 5) {
+            return 'mr';
+        } else if (index == 6) {
+            return 'bl';
+        } else if (index == 7) {
+            return 'bm';
+        } else if (index == 8) {
+            return 'br';
+        } else {
+            return '';
+        }
+    }
+
+    // Should we become active when the user presses down on the square?
+    handleStartShouldSetPanResponder = (event) => {
+        return true
+    }
+
+  // We were granted responder status! Let's update the UI
+    handlePanResponderGrant = (event) => {
+        // console.log(event.nativeEvent.locationX + ', ' + event.nativeEvent.locationY)
+
+        let selectedItem = this.getTappedItem(event.nativeEvent.pageX, event.nativeEvent.pageY)
+        if (selectedItem == 'tl') {
+            this.setState({draggingTL: true})
+        } else if (selectedItem == 'tm') {
+            this.setState({draggingTM: true})
+        } else if (selectedItem == 'tr') {
+            this.setState({draggingTR: true})
+        } else if (selectedItem == 'ml') {
+            this.setState({draggingML: true})
+        } else if (selectedItem == 'mm') {
+            this.setState({draggingMM: true})
+        } else if (selectedItem == 'mr') {
+            this.setState({draggingMR: true})
+        } else if (selectedItem == 'bl') {
+            this.setState({draggingBL: true})
+        } else if (selectedItem == 'bm') {
+            this.setState({draggingBM: true})
+        } else if (selectedItem == 'br') {
+            this.setState({draggingBR: true})
+        }
+    }
+
+    // Every time the touch/mouse moves
+    handlePanResponderMove = (e, gestureState) => {
+        // Keep track of how far we've moved in total (dx and dy)
+        this.setState({
+            offsetTop: gestureState.dy,
+            offsetLeft: gestureState.dx,
+        })
+    }
+
+    // When the touch/mouse is lifted
+    handlePanResponderEnd = (e, gestureState) => {
+        const {initialTop, initialLeft, initialWidth, initialHeight, draggingTL, draggingTM, draggingTR, draggingML, draggingMM, draggingMR, draggingBL, draggingBM, draggingBR } = this.state
+
+        const state = {
+            draggingTL: false,
+            draggingTM: false,
+            draggingTR: false,
+            draggingML: false,
+            draggingMM: false,
+            draggingMR: false,
+            draggingBL: false,
+            draggingBM: false,
+            draggingBR: false,
+            offsetTop: 0,
+            offsetLeft: 0,
+        }
+
+        state.initialTop = initialTop + ((draggingTL || draggingTM || draggingTR || draggingMM) ? gestureState.dy : 0)
+        state.initialLeft = initialLeft + ((draggingTL || draggingML || draggingBL || draggingMM) ? gestureState.dx : 0)
+        state.initialWidth = initialWidth + ((draggingTL || draggingML || draggingBL) ? - gestureState.dx : (draggingTM || draggingMM || draggingBM) ? 0 : gestureState.dx)
+        state.initialHeight = initialHeight + ((draggingTL || draggingTM || draggingTR) ? - gestureState.dy : (draggingML || draggingMM || draggingMR) ? 0 : gestureState.dy)
+
+        if (state.initialWidth > this.props.initialWidth) {
+            state.initialWidth = this.props.initialWidth
+        }
+        if (state.initialWidth < this.props.minWidth) {
+            state.initialWidth = this.props.minWidth
+        }
+        if (state.initialHeight > this.props.initialHeight) {
+            state.initialHeight = this.props.initialHeight
+        }
+        if (state.initialHeight < this.props.minHeight) {
+            state.initialHeight = this.props.minHeight
+        }
+
+        this.setState(state)
+        this.props.onLayoutChanged(state.initialTop, state.initialLeft, state.initialWidth, state.initialHeight)
+    }
+}
+
+export default ImageCropOverlay;

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

@@ -0,0 +1,83 @@
+import React, { useState, useEffect,useMemo,useRef } from '$react';
+import { View, StyleSheet,ImageBackground} from 'react-native';
+import theme from "$theme";
+import ActivityIndicator from "$ecomponents/ActivityIndicator";
+import Label from "$ecomponents/Label";
+import PropTypes from "prop-types";
+import { isNonNullString,defaultStr,defaultObj } from '$cutils';
+import Button from "$ecomponents/Button";
+import Dialog from "$ecomponents/Dialog";
+import ExpoImageManipulator from './ExpoImageManipulator';
+import ImageCropOverlay from './ImageCropOverlay';
+
+
+/***@see : https://docs.expo.dev/versions/latest/sdk/bar-code-scanner/ */
+export default function ImageCropperComponent({src,testID,onCancel,dialogProps}) {
+  testID = defaultStr(testID,"RN_ImageCropperComponent");
+  const [visible,setVisible] = useState(true);
+  dialogProps = Object.assign({},dialogProps);
+  const prevVisible = React.usePrevious(visible);
+  const cancelRef = React.useRef(false);
+  const cancel = ()=>{
+    cancelRef.current = true;
+    setVisible(false);
+  }
+  useEffect(()=>{
+    if(prevVisible === visible) return;
+    if(prevVisible && !visible && cancelRef.current && typeof onCancel =="function"){
+        onCancel();
+    }
+    cancelRef.current = false;
+  },[visible]);
+  return <Dialog 
+    fullPage 
+    actions={[]} 
+    title = {`Rogner l'image`}
+    {...dialogProps}
+    onBackActionPress={cancel}
+    visible = {visible}
+  >
+    <ImageBackground
+        resizeMode="contain"
+        style={styles.imageBackground}
+        source={{ uri : src }}
+    >
+        <ImageCropOverlay onLayoutChanged={(top, left, width, height) => {                                
+                console.log(top,lef,width,height," is to lefff")
+        }} initialWidth={50} initialHeight={50} 
+            initialTop={0} initialLeft={0} 
+            minHeight={100} minWidth={100}
+        />
+    </ImageBackground>  
+  </Dialog>;
+}
+const styles = StyleSheet.create({
+  center : {
+    justifyContent : "center",
+    alignItems  : "center",
+    flexDirection : "column",
+    flex : 1,
+  },
+  row : {
+    flexDirection : "row",
+    justifyContent : "center",
+    alignItems : "center",
+    flexWrap :"wrap",
+  },
+  imageBackground : {
+    flex : 1,
+    width : "100%",
+    height : "100%",
+    justifyContent: 'center', 
+    padding: 20, alignItems: 'center',
+  }
+});
+
+/***
+  @see : https://docs.expo.dev/versions/latest/sdk/camera-next
+*/
+ImageCropperComponent.propTypes = {
+    onScan : PropTypes.func,
+    onGrantAccess : PropTypes.func, //lorsque la permission est allouée
+    onDenyAccess : PropTypes.func, //lorsque la permission est refusée
+}

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

@@ -6,7 +6,6 @@ import {defaultObj} from "$cutils";
 
 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.useState({});
     imageProps = defaultObj(imageProps);
     dialogProps = defaultObj(dialogProps);

package/src/components/Image/index.js

@@ -3,15 +3,15 @@ import Menu from "$ecomponents/Menu";
 import Avatar from "$ecomponents/Avatar";
 import {isDecimal,setQueryParams,isValidURL,defaultDecimal,defaultStr as defaultString,isDataURL,isPromise,defaultBool,isObj,isNonNullString} from "$cutils";
 import notify from "$enotify";
-let maxWidthDiff = 150, maxHeightDiff = 150;
+let maxWidthDiff = 100, maxHeightDiff = 100;
 import {StyleSheet} from "react-native";
 import React from "$react";
 import PropTypes from "prop-types";
 import {isMobileNative} from "$cplatform";
+import {uniqid} from "$cutils";
 //import Signature from "$ecomponents/Signature";
 import Label from "$ecomponents/Label";
-//import Editor from "./Editor";
-import {Component as CameraComponent} from "$emedia/camera";
+//import Cropper from "./Cropper";
 
 import {pickImage,nonZeroMin,canTakePhoto,takePhoto} from "$emedia";
 import addPhoto from "$eassets/add_photo.png";
@@ -48,11 +48,8 @@ export const getUri = (src,onlySting)=>{
 
 export default function ImageComponent(props){
     const [src,setSrc] = React.useState(defaultVal(props.src));
+    const [cropWindowProp,setCropWindowProp] = React.useState(null);
     const prevSrc = React.usePrevious(src);
-    /*const [editorProps,setEditorProps] = React.useState({
-        visible : false,
-        options : {}
-    })*/ 
     const [isDrawing,setIsDrawing] = React.useState(false);
     let {disabled,onMount,defaultSource,editable,onUnmount,label,text,labelProps,readOnly,beforeRemove,
         onChange,draw,round,drawText,drawLabel,rounded,defaultSrc,
@@ -114,8 +111,8 @@ export default function ImageComponent(props){
     if(!imageWidth && !imageHeight){
         imageWidth = imageHeight = rest.size;
     }
-    let cropWidth = nonZeroMin(cropProps.width,width)
-    let cropHeight = nonZeroMin(cropProps.height,height);
+    let cropWidth = nonZeroMin(cropProps.width,imageWidth,width,size)
+    let cropHeight = nonZeroMin(cropProps.height,imageHeight,height,size);
     if(!cropWidth) cropWidth = undefined;
     if(!cropHeight) cropHeight = undefined; 
 
@@ -125,24 +122,26 @@ export default function ImageComponent(props){
         if(cropWidth || cropHeight){
             canCrop = true;
             if(cropWidth) opts.width = cropWidth;
-            else if(cropHeight) opts.height = cropHeight;
+            if(cropHeight) opts.height = cropHeight;
         }
         opts.allowsEditing = canCrop;
-        return opts;
+        return {...cropProps,...opts};
     }
     const handlePickedImage = (image,opts)=>{
         opts = defaultObj(opts);
         if(!isDataURL(image.dataURL)){
             return notify.error(`Le fichier sélectionné est une image non valide`);
         }
-        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)
-            });
+        if(imageSrc){
+            const diffWidth = image.width - cropWidth - maxWidthDiff,diffHeight = image.height - cropHeight - maxHeightDiff;
+            const canCrop = isMobileNative()? false : ((diffWidth > 0) || (diffHeight > 0)? true : false);
+            if(canCrop){
+                const cProps = getCropProps(opts);
+                return context.cropImage({...cProps,source:image,uri:image.dataURL,src:imageSrc}).then((props)=>{
+                    setSrc(imageSrc)
+                });
+            }
         }
         pickedImageRef.current = image;
         setSrc(imageSrc);
@@ -170,6 +169,11 @@ export default function ImageComponent(props){
         },[src]),
         cropImage : (props)=>{
             return Promise.resolve(props);
+            if(!isMobileNative()){
+                return new Promise((resolve,reject)=>{
+                    setCropWindowProp(props);
+                });
+            }
             return new Promise((resolve,reject)=>{
                 console.log({...editorProps,visible:true,...props},"is editor props");
                 setEditorProps({...editorProps,visible:true,...props})
@@ -263,6 +267,11 @@ export default function ImageComponent(props){
     const _label = withLabel !== false ? defaultString(label) : "";
     const isDisabled = menuItems.length > 0 ? true : false; 
     return <View testID={testID+"_FagmentContainer"}>
+        {false && src && !isMobileNative() && isObj(cropWindowProp) && Object.size(cropWindowProp,true) ? <Cropper
+            src={src}
+            {...cropWindowProp}
+            key = {uniqid("crop-image")}
+        /> : null}
         {!createSignatureOnly ? (<Menu
                 {...menuProps}
                 disabled = {isDisabled}

package/src/screens/Help/openLibraries.js

@@ -1,6 +1,6 @@
 module.exports = {
 	"@fto-consult/expo-ui": {
-		"version": "8.44.0",
+		"version": "8.46.3",
 		"url": "https://github.com/borispipo/expo-ui#readme",
 		"license": "ISC"
 	},
@@ -15,7 +15,7 @@ module.exports = {
 		"license": "MIT"
 	},
 	"@expo/html-elements": {
-		"version": "0.5.1",
+		"version": "0.9.1",
 		"url": "https://github.com/expo/expo/tree/main/packages/html-elements",
 		"license": "MIT"
 	},
@@ -45,22 +45,22 @@ module.exports = {
 		"license": "MIT"
 	},
 	"@react-native/assets-registry": {
-		"version": "0.72.0",
-		"url": "git@github.com:facebook/react-native.git",
+		"version": "0.74.0",
+		"url": "https://github.com/facebook/react-native/tree/HEAD/packages/assets#readme",
 		"license": "MIT"
 	},
 	"@react-navigation/native": {
-		"version": "6.1.16",
+		"version": "6.1.10",
 		"url": "https://reactnavigation.org",
 		"license": "MIT"
 	},
 	"@react-navigation/native-stack": {
-		"version": "6.9.25",
+		"version": "6.9.18",
 		"url": "https://github.com/software-mansion/react-native-screens#readme",
 		"license": "MIT"
 	},
 	"@react-navigation/stack": {
-		"version": "6.3.28",
+		"version": "6.3.21",
 		"url": "https://reactnavigation.org/docs/stack-navigator/",
 		"license": "MIT"
 	},
@@ -104,11 +104,6 @@ module.exports = {
 		"url": "https://docs.expo.dev/versions/latest/sdk/imagepicker/",
 		"license": "MIT"
 	},
-	"expo-intent-launcher": {
-		"version": "10.11.0",
-		"url": "https://docs.expo.dev/versions/latest/sdk/intent-launcher/",
-		"license": "MIT"
-	},
 	"expo-linking": {
 		"version": "6.2.2",
 		"url": "https://docs.expo.dev/versions/latest/sdk/linking",
@@ -159,7 +154,7 @@ module.exports = {
 		"license": "MIT"
 	},
 	"react-native-reanimated": {
-		"version": "3.6.3",
+		"version": "3.6.2",
 		"url": "https://github.com/software-mansion/react-native-reanimated#readme",
 		"license": "MIT"
 	},
@@ -187,10 +182,5 @@ module.exports = {
 		"version": "13.6.4",
 		"url": "https://github.com/react-native-webview/react-native-webview#readme",
 		"license": "MIT"
-	},
-	"vm": {
-		"version": "0.1.0",
-		"url": "https://github.com/DiegoRBaquero/node-vm#readme",
-		"license": "MIT"
 	}
 };