@fto-consult/expo-ui 1.0.4

package/src/components/TextField/utils.js

@@ -0,0 +1,64 @@
+import {defaultStr,parseDecimal as NParseDecimal,defaultDecimal} from "$utils";
+
+
+export const flatMode = 'flat';
+export const outlinedMode = 'outlined';
+export const normalMode = "normal";
+export const shadowMode = "shadow";
+
+export const defaultMode = outlinedMode;
+
+export const modes = {flat:flatMode,shadow:shadowMode,outlined:outlinedMode,normal:normalMode};
+
+export const modesObject = {
+    flat : {
+        code : flatMode,
+        label : 'Flottant',
+    },
+    shadow : {
+        code : shadowMode,
+        label : 'Ombre',
+    },
+    normal : {
+        code : normalMode,
+        label : 'Normal',
+    },
+    outlined : {
+        code : outlinedMode,
+        label : 'Décrit',
+    }
+}
+
+
+export const HEIGHT = 56;
+
+
+export const AutoCapitalizeTypes = {
+    characters : "characters", ///all characters.
+    words : "words", //first letter of each word.
+    sentences :"sentences", //first letter of each sentence (default).
+    none : "none", ///don't auto capitalize anything.
+}
+
+export const keyboardTypes = {
+    default : 'default',
+    number : "number-pad",
+    numberPad : "number-pad",
+    decimal : "decimal-pad",
+    numeric : "numeric",
+    email : "email-address",
+    tel : "phone-pad",
+    phone : "phone-pad",
+}
+export const FONT_SIZE = 16;
+
+export const parseDecimal = (v,type,preserveDecimalLength)=>{
+    type = defaultStr(type).trim().toLowerCase();
+    if((type =='number' || type =='decimal') && !isDecimal(v)){
+        if(v == undefined || v == null){
+            v = '';
+        }
+        v = defaultDecimal(NParseDecimal(v,preserveDecimalLength),0);
+    }
+    return v;
+}

package/src/components/Tooltip/Popover/index.js

@@ -0,0 +1,254 @@
+/***@see : https://github.com/alimek/react-native-tooltip-menu */
+import React, {useRef, useMemo, useState } from 'react';
+import PropTypes from "prop-types";
+import theme,{ StyleProps} from '$theme';
+import {defaultObj} from "$utils";
+import Label from "$ecomponents/Label";
+import View from "$ecomponents/View";
+import {
+  Modal,
+  Animated,
+  TouchableOpacity,
+  StyleSheet,
+  Pressable,
+  Dimensions,
+} from 'react-native';
+
+const INDENT = 30;
+const PADDING = 5;
+const ARROW_SIZE = 10;
+
+const TooltipPopoverComponent = React.forwardRef(({
+  children,
+  content,
+  //style,
+  overlayStyle,
+  widthType,
+  modalButtonStyle,
+  onRequestClose,
+  onLayout,
+  trianglePosition,
+  ...rest
+},ref) => {
+  const buttonRef = useRef(null);
+  const innerRef = React.useMergeRefs(ref,buttonRef);
+  const [state,setState] = useState({
+    componentPosition : null,
+    isModalOpen : false,
+  })
+  const opacity = useMemo(() => new Animated.Value(0), []);
+  const {isModalOpen,componentPosition,innerContentLayout} = state;
+  const { width: windowWidth, height: windowHeight } = Dimensions.get("window");
+  const toggleModal = () => {
+    if(!isModalOpen){
+      if(!buttonRef.current || !buttonRef.current.measureInWindow) return;
+      return buttonRef.current.measureInWindow((x, y,width,height,pageX,pageY) => {
+        if(typeof x !=='number' || typeof y !=='number') return;
+          setState({...state,
+            isModalOpen : true,
+            componentPosition:{
+              x,
+              y,
+              width,
+              height,
+            }
+          })
+      });
+    };
+    setState({...state,isModalOpen:false});
+  };
+
+  const openModal = () => {
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 300,
+      useNativeDriver: true,
+    }).start(toggleModal);
+  };
+
+  const hideModal = () => {
+    Animated.timing(opacity, {
+      toValue: 0,
+      duration: 300,
+      useNativeDriver: true,
+    }).start(toggleModal);
+  };
+
+  const handleClick = (onClickItem) => {
+    const method = isModalOpen ? hideModal : openModal;
+    method();
+
+    onClickItem();
+  };
+  trianglePosition = 'center';
+  const arrowStyle = {color:theme.colors.primary};
+  const containerStyle = {};
+  if(componentPosition){
+     containerStyle.top = componentPosition.y;
+     containerStyle.left = componentPosition.x;
+  }
+  let left, top ;
+  if(innerContentLayout && componentPosition){
+     const {width:contentWidth,height:contentHeight} = innerContentLayout;
+     const {width:componentWidth,height:componentHeight,x:componentLeft,y:componentTop} = componentPosition;
+     let spaceTop = componentTop, spaceBottom = windowHeight - componentHeight - componentTop,
+     spaceLeft = componentLeft, spaceRight = windowWidth - componentWidth - componentLeft;
+     ///on évalue la position du tooltip : 
+     if(spaceBottom - contentHeight >= INDENT){   
+        ///on va positionner le tooltip dans l'espace bas , le triangle va regarder en haut
+        arrowStyle.top = componentTop + componentHeight;
+        top = arrowStyle.top + ARROW_SIZE;
+        arrowStyle.borderTopWidth = 0;
+        arrowStyle.borderBottomColor = theme.colors.primary;
+     } else if(spaceTop - contentHeight >= INDENT) {
+       ///peut positionner le tooltip en haut du bouton, le triangle va regarder le bas
+       arrowStyle.top = componentTop - componentHeight;
+       top = arrowStyle.top - ARROW_SIZE;
+       arrowStyle.borderBottomWidth = 0;
+       arrowStyle.borderTopColor = theme.colors.primary;
+     } else {
+        top = 0;
+        arrowStyle.display = "none";
+        left = 0;
+     }
+     if(arrowStyle.display != "none"){
+      arrowStyle.left = componentLeft + componentWidth/2 - ARROW_SIZE/2; 
+      if(componentWidth >= contentWidth){
+          left = arrowStyle.left - contentWidth/2+ ARROW_SIZE;
+      } else {
+        if(spaceLeft - contentWidth > INDENT){
+            left = componentLeft - contentWidth;
+        } else if(spaceRight - contentWidth > INDENT){
+            left = componentLeft;
+        } else {
+          left = 0;
+        }
+      }
+      
+     }
+     //on peut positionner le tooltip en bas du bouton, on vérifie la position du triangle
+  }
+  if(typeof top =='number'){
+     containerStyle.top = top;
+  }
+  if(typeof left ==='number'){
+    containerStyle.left = left;
+  }
+  const onInnerContentLayout = ({nativeEvent:{layout}}) => {
+    if (layout.width === 0 || layout.height === 0) {
+      return;
+    }
+    setState({...state,innerContentLayout:layout});
+  }
+  const cProps = {
+    ...defaultObj(rest),
+    onLongPress : openModal,
+    onLayout,
+  }
+  const modalContent = <Modal visible={isModalOpen} transparent onRequestClose={(a)=>{
+    if(onRequestClose && onRequestClose(a)=== false) return;
+    hideModal();
+  }}>
+        <View style={[styles.overlay, overlayStyle]} />
+        <TouchableOpacity
+          activeOpacity={1}
+          style={[{ flex: 1 }, modalButtonStyle]}
+          onPress={hideModal}
+        >
+          <View
+            style={[
+              styles.component,
+              {width:'100%',height:'100%'},
+              containerStyle,
+            ]}
+          >
+            <TouchableOpacity onPress={isModalOpen ? hideModal : openModal}>
+                  <View
+                    style={[styles.innerContainer]}
+                  >
+                  <Label 
+                    onLayout={onInnerContentLayout} 
+                    style={[{color:theme.colors.primaryText,backgroundColor:theme.colors.primary,padding:10,borderRadius:5}]}>{content}</Label>
+              </View>
+            </TouchableOpacity>
+          </View>
+          <Animated.View
+            style={[
+              styles.triangle,
+              { opacity },
+              arrowStyle,
+            ]}
+          />
+        </TouchableOpacity>
+      </Modal>;
+  if(typeof children =='function'){
+      return <>
+          {<Label>{children(cProps,innerRef)}</Label>}
+          {modalContent}
+      </>
+  }
+  return <Pressable
+      {...cProps}
+      ref={innerRef}
+    >
+      <Label>{children}</Label>
+      {modalContent}
+    </Pressable>
+});
+
+TooltipPopoverComponent.defaultProps = {
+  widthType: 'auto',
+  onRequestClose: undefined,
+  trianglePosition: 'center',
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+  tooltipMargin: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#E1E1E1',
+  },
+  innerContainer: {
+    backgroundColor: 'transparent',
+    flexGrow : 0,
+    flexShrink : 0,
+    alignItems: 'flex-start'
+  },
+  component: {
+    position: 'absolute',
+  },
+  triangle: {
+    position: 'absolute',
+    width: ARROW_SIZE,
+    height: ARROW_SIZE,
+    backgroundColor: 'transparent',
+    borderStyle: 'solid',
+    borderTopWidth: ARROW_SIZE,
+    borderRightWidth: ARROW_SIZE,
+    borderBottomWidth: ARROW_SIZE,
+    borderLeftWidth: ARROW_SIZE,
+    borderTopColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderBottomColor: 'transparent',
+    borderLeftColor: 'transparent',
+  },
+});
+
+TooltipPopoverComponent.propTypes = {
+    children: PropTypes.oneOfType([
+      PropTypes.node,
+      /*** si children est une fonction alors elle doit retourner un composant de type Pressable */
+      PropTypes.func,
+    ]),
+    style : StyleProps,
+    overlayStyle: StyleProps,
+    labelContainerStyle: StyleProps,
+    modalButtonStyle: StyleProps,
+    labelStyle: StyleProps,
+    onRequestClose : PropTypes.func,
+}
+
+export default TooltipPopoverComponent;

package/src/components/Tooltip/Popover/index.web.js

@@ -0,0 +1,60 @@
+import tippy from 'tippy.js';
+import 'tippy.js/dist/tippy.css';
+import React from "$react";
+import {getMaxZindex} from "$utils/dom";
+import PropTypes from "prop-types";
+import Label from "$ecomponents/Label";
+import { TIPPY_THEME } from '$theme/updateNative/utils';
+import {isDOMElement} from "$utils/dom";
+import {uniqid,defaultStr,defaultObj} from "$utils";
+
+const TippyTooltipComponent  = React.forwardRef((props,ref)=>{
+    let {children,content,...rest} = props;
+    const instanceIdRef = React.useRef(uniqid("tippy-instance-id")); 
+    const buttonRef = React.useRef(null);
+    const innerRef = React.useMergeRefs(ref,buttonRef);
+    const selector = "#"+instanceIdRef.current;
+    React.useEffect(()=>{
+        content = React.getTextContent(content);
+        if(typeof content =='string'){
+            content = content.replaceAll("\n","<br/>");
+        }
+        if(!content) return;
+        const tpI = tippy(isDOMElement(buttonRef.current)? buttonRef.current:selector,{
+            content,
+            allowHTML : true,
+            theme : TIPPY_THEME,
+            onShow : (instance)=>{
+                if(instance && typeof(instance.setProps) ==="function"){
+                    instance.setProps({
+                        zIndex:getMaxZindex()
+                    })
+                }
+            }
+        });
+        const instance = Array.isArray(tpI) ? tpI[0] : tpI;
+        //React.setRef(ref,instance);
+        return ()=>{
+            React.setRef(ref,null);
+            if(instance && instance.destroy){
+                instance.destroy();
+            }
+        }
+    },[content])
+    const cProps = {
+        ...defaultObj(rest),
+        nativeID:instanceIdRef.current,
+    }
+    if(typeof children =='function'){
+        return children(cProps,innerRef);
+    }
+    return  <Label {...cProps} ref={innerRef}>
+        {children}
+    </Label>
+});
+TippyTooltipComponent.propTypes = {
+    content: PropTypes.any, //le contenu du tooltip
+    title : PropTypes.string, //le contenu du tooltip
+}
+
+export default TippyTooltipComponent;

package/src/components/Tooltip/index.js

@@ -0,0 +1,42 @@
+import Popover from "./Popover";
+import {defaultObj,defaultVal} from "$utils";
+import View from "$ecomponents/View";
+import Label from "$ecomponents/Label";
+import React from "$react";
+export const actions = {press:'press',longpress:'longpress',hover:'hover'};
+
+export const positions = {top:"top",right:"right",bottom:"bottom",left:"left"}
+
+/***
+ * for more documentation @see : https://github.com/eveningkid/react-native-popable#popable.children
+ */
+
+const TooltipComponent = React.forwardRef((props,ref)=>{
+    let {tooltipProps,position,Component,children,strictPosition,...rest} = props;
+    rest = defaultObj(rest);
+    tooltipProps = defaultObj(tooltipProps);
+    Component = React.isComponent(tooltipProps.Component) ? tooltipProps.Component : React.isComponent(Component) ? Component : Label;
+    delete tooltipProps.position;
+    const content = defaultVal(rest.content,rest.tooltip,rest.title,rest.label,rest.accessibilityLabel);
+    if(typeof children !=='function'){
+        rest.children = children;
+    }
+    const ct = <Component {...rest}/>
+    if(!content || rest.disabled === true || rest.readOnly === true || rest.editable === false){
+        return typeof children =='function'? children(rest,ref) : ct;
+    }
+    return <Popover 
+        {...tooltipProps} 
+        content = {content}  
+        onLongPress = {rest.onLongPress}
+        onPressIn = {rest.onPressIn}
+        onPressOut = {rest.onPressOut}
+        onPress = {rest.onPress}
+        ref = {ref}
+    >
+        {typeof children =='function'? children : ct}
+    </Popover>
+})
+
+export default TooltipComponent;
+TooltipComponent.displayName = "TooltipComponent";

package/src/components/View/index.js

@@ -0,0 +1,49 @@
+import {View} from "react-native";
+import PropTypes from "prop-types";
+import React from "$react";
+import {isMobileNative} from "$cplatform";
+import {debounce,isNumber} from "$utils";
+
+
+const ViewComponent = React.forwardRef(({mediaQueryUpdateNativeProps,onLayoutTimeout,onLayout,autoHeight,autoWidth,elevation,...props},ref)=>{
+    const style = React.useMediaQueryUpdateStyle(props);
+    const autoSize = autoHeight||autoWidth ? true : false;
+    const [state,setState] = autoSize ? React.useState({}) : [{}];
+    const {width,height} = state;
+    const onL = (e)=>{
+        if(!e || !e.nativeEvent || !e.nativeEvent.layout) return;
+        const h = e.nativeEvent.layout.height,w = e.nativeEvent.layout.width;
+        if(onLayout && onLayout(e) === false) return;
+        if(autoSize && typeof h =='number' && typeof w ==='number'){
+            if(isObj(state)){
+                if(autoWidth && typeof state.width == 'number' && Math.abs(state.width-w) < 50) return;
+                if(autoHeight && typeof state.height =='number' && Math.abs(state.height-h) < 50) return;
+            }
+            setState({height:h,width:w});
+        }
+    };
+    return <View
+         {...props} 
+         style = {[style,
+            autoSize && [
+                autoHeight && isNumber(height) && height > 10 && {height},
+                autoWidth && isNumber(width) && width > 10 && {width}
+            ]
+         ]}
+         onLayout = {isMobileNative()? onL : debounce(onL,typeof onLayoutTimeout =='number'? onLayoutTimeout : 100)}
+         ref={typeof mediaQueryUpdateNativeProps =='function' ? React.useMediaQueryUpdateNativeProps(mediaQueryUpdateNativeProps,ref) : ref}
+    />
+});
+
+export default ViewComponent;
+
+ViewComponent.displayName = "ViewComponent";
+
+ViewComponent.propTypes = {
+    mediaQueryUpdateNativeProps : PropTypes.func,
+    mediaQueryUpdateStyle : PropTypes.func,
+    autoWidth : PropTypes.bool,//si la taille de la vue est calculée automatiquement
+    autoHeight : PropTypes.bool,//si la taille de 
+    onLayout : PropTypes.func,
+    ///si useCurrentMedia est à true, alors la mise à jour sera opérée uniquement lorsque le current media change
+}

package/src/components/WebView/Component/index.native.js

@@ -0,0 +1,2 @@
+import {WebView} from "react-native-webview";
+export default WebView;

package/src/components/WebView/Component/index.web.js

@@ -0,0 +1,154 @@
+/**@see : https://github.com/react-native-web-community/react-native-web-webview */
+import Qs from 'qs';
+import React, { Component } from 'react';
+import { StyleSheet, View, ActivityIndicator, unstable_createElement as createElement } from 'react-native';
+
+export class WebView extends Component {
+  static defaultProps = {
+    scrollEnabled: true,
+  };
+
+  state = { html: null };
+
+  constructor(props) {
+    super(props);
+    this.handleSource(props.source, props.newWindow);
+  }
+
+  setRef = (ref) => (this.frameRef = ref);
+
+  handleSource = (source, newWindow) => {
+    if (!source.method) return;
+
+    if (newWindow) {
+      this.handleSourceInNewWindow(source, newWindow);
+    } else {
+      this.handleSourceInIFrame(source);
+    }
+  };
+
+  handleSourceInIFrame = (source) => {
+    const { uri, ...options } = source;
+    const baseUrl = uri.substr(0, uri.lastIndexOf('/') + 1);
+    fetch(uri, options)
+      .then((response) => response.text())
+      .then((html) => this.setState({ html: `<base href="${baseUrl}" />` + html }));
+  };
+
+  handleSourceInNewWindow = (source, newWindow) => {
+    if (source.method === 'POST') {
+      const contentType = source.headers['Content-Type'];
+      let body = '';
+      if (contentType && contentType.includes('application/x-www-form-urlencoded')) {
+        body = Qs.parse(source.body);
+      } else {
+        console.warn(
+          '[WebView] When opening a new window, this content-type is not supported yet, please make a PR!',
+          contentType
+        );
+        return;
+      }
+
+      window.open(
+        require('./postMock.html') +
+          '?' +
+          Qs.stringify({
+            uri: source.uri,
+            body: JSON.stringify(body),
+          }),
+        newWindow.name || 'webview',
+        newWindow.features || undefined
+      );
+    } else {
+      console.warn(
+        '[WebView] When opening a new window, this method is not supported yet, please make a PR!',
+        source.method
+      );
+    }
+  };
+
+  componentDidMount() {
+    if (this.props.onMessage) {
+      window.addEventListener('message', this.onMessage, true);
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (
+      this.props.source.uri !== nextProps.source.uri ||
+      this.props.source.method !== nextProps.source.method ||
+      this.props.source.body !== nextProps.source.body
+    ) {
+      this.handleSource(nextProps.source, nextProps.newWindow);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.props.onMessage) {
+      window.removeEventListener('message', this.onMessage, true);
+    }
+  }
+
+  onMessage = (nativeEvent) => this.props.onMessage({ nativeEvent });
+
+  postMessage = (message, origin) => {
+    this.frameRef.contentWindow.postMessage(message, origin);
+  };
+
+  handleInjectedJavaScript = (html) => {
+    if (this.props.injectedJavaScript) {
+      if (html) {
+        return html.replace('</body>', `<script>${this.props.injectedJavaScript}</script></body>`);
+      } else {
+        return html;
+      }
+    } else {
+      return html;
+    }
+  };
+
+  render() {
+    if (this.props.newWindow) {
+      return (
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator />
+        </View>
+      );
+    }
+
+    const { title, source, onLoad, scrollEnabled } = this.props;
+    const styleObj = StyleSheet.flatten(this.props.style);
+    return createElement('iframe', {
+      title,
+      ref: this.setRef,
+      src: !source.method ? source.uri : undefined,
+      srcDoc: this.handleInjectedJavaScript(this.state.html || source.html),
+      width: styleObj && styleObj.width,
+      height: styleObj && styleObj.height,
+      style: StyleSheet.flatten([styles.iframe, scrollEnabled && styles.noScroll, this.props.style]),
+      allowFullScreen: true,
+      allowpaymentrequest: 'true',
+      frameBorder: '0',
+      seamless: true,
+      onLoad,
+    });
+  }
+}
+
+export default WebView;
+
+const styles = StyleSheet.create({
+  loadingContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iframe: {
+    width: '100%',
+    height: '100%',
+    borderWidth: 0,
+  },
+  noScroll: {
+    overflow: 'hidden',
+  },
+});

package/src/components/WebView/Component/postMock.html

@@ -0,0 +1,21 @@
+<html>
+  <body>
+    <div id="content" style="display: none;"></div>
+  </body>
+  <script>
+    const source = new URLSearchParams(window.location.search);
+
+    let html = `<form method="POST" action="${source.get('uri')}">`;
+
+    const params = JSON.parse(source.get('body'));
+
+    Object.entries(params).forEach(([name, value]) => (html += `<input name="${name}" value="${value}" />`));
+
+    html += "<input id='submit' type='submit' />" + '</form>';
+
+    const div = document.createElement('div');
+    div.innerHTML = html;
+    document.getElementById('content').appendChild(div);
+    document.getElementById('submit').click();
+  </script>
+</html>