@fto-consult/expo-ui 3.1.1 → 3.3.0

package/babel.config.alias.js

@@ -113,7 +113,6 @@ module.exports = (opts)=>{
     });
     const $assets = r.$assets;
     const electronPaths = {
-        ...r,
         assets : $assets,
         images : r.$images,
         projectRoot : base,//la racine au projet

package/bin/electron/index copy.js

@@ -1,48 +1,48 @@
-#!/usr/bin/env node
-/**@see : https://blog.shahednasser.com/how-to-create-a-npx-tool/ */
-'use strict';
-process.on('unhandledRejection', err => {
-  throw err;
-});
-const spawnAsync = require('cross-spawn').spawn;
-const { realpathSync } = require('fs-extra');
-
-//const { ensureMinProjectSetupAsync } = require('../build/Config');
-
-const args = process.argv.slice(2);
-
-const scriptIndex = args.findIndex(x => x === 'start' || x === 'customize');
-const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
-const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
-console.log(args," is argggggg",script);
-if (['start', 'customize'].includes(script)) {
-  spawnAsync(
-    'node',
-    nodeArgs.concat(require.resolve('./scripts/' + script)).concat(args.slice(scriptIndex + 1)),
-    { stdio: 'inherit' }
-  ).then(result => {
-    if (result.signal) {
-      if (result.signal === 'SIGKILL') {
-        console.log(
-          'The build failed because the process exited too early. ' +
-            'This probably means the system ran out of memory or someone called ' +
-            '`kill -9` on the process.'
-        );
-      } else if (result.signal === 'SIGTERM') {
-        console.log(
-          'The build failed because the process exited too early. ' +
-            'Someone might have called `kill` or `killall`, or the system could ' +
-            'be shutting down.'
-        );
-      }
-      process.exit(1);
-    }
-    process.exit(result.status);
-  });
-} else if (script === undefined) {
-  const projectRoot = realpathSync(process.cwd());
-
-  //ensureMinProjectSetupAsync(projectRoot);
-} else {
-  console.log('Invalid command "' + script + '".');
-}
+#!/usr/bin/env node
+/**@see : https://blog.shahednasser.com/how-to-create-a-npx-tool/ */
+'use strict';
+process.on('unhandledRejection', err => {
+  throw err;
+});
+const spawnAsync = require('cross-spawn').spawn;
+const { realpathSync } = require('fs-extra');
+
+//const { ensureMinProjectSetupAsync } = require('../build/Config');
+
+const args = process.argv.slice(2);
+
+const scriptIndex = args.findIndex(x => x === 'start' || x === 'customize');
+const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
+const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
+console.log(args," is argggggg",script);
+if (['start', 'customize'].includes(script)) {
+  spawnAsync(
+    'node',
+    nodeArgs.concat(require.resolve('./scripts/' + script)).concat(args.slice(scriptIndex + 1)),
+    { stdio: 'inherit' }
+  ).then(result => {
+    if (result.signal) {
+      if (result.signal === 'SIGKILL') {
+        console.log(
+          'The build failed because the process exited too early. ' +
+            'This probably means the system ran out of memory or someone called ' +
+            '`kill -9` on the process.'
+        );
+      } else if (result.signal === 'SIGTERM') {
+        console.log(
+          'The build failed because the process exited too early. ' +
+            'Someone might have called `kill` or `killall`, or the system could ' +
+            'be shutting down.'
+        );
+      }
+      process.exit(1);
+    }
+    process.exit(result.status);
+  });
+} else if (script === undefined) {
+  const projectRoot = realpathSync(process.cwd());
+
+  //ensureMinProjectSetupAsync(projectRoot);
+} else {
+  console.log('Invalid command "' + script + '".');
+}

package/bin/electron/index.js

@@ -1,11 +1,11 @@
-#!/usr/bin/env node
-/**@see : https://blog.shahednasser.com/how-to-create-a-npx-tool/ */
-'use strict';
-process.on('unhandledRejection', err => {
-  throw err;
-});
-const args = process.argv.slice(2);
-
-console.log(args," is arggggg");
-
+#!/usr/bin/env node
+/**@see : https://blog.shahednasser.com/how-to-create-a-npx-tool/ */
+'use strict';
+process.on('unhandledRejection', err => {
+  throw err;
+});
+const args = process.argv.slice(2);
+
+console.log(args," is arggggg");
+
 process.exist();

package/bin/electron/scripts/customize.js

@@ -1,21 +1,21 @@
-const chalk = require('chalk');
-const fs = require('fs-extra');
-
-const { copyTemplateToProject, ensureMinProjectSetupAsync } = require('..');
-process.on('unhandledRejection', err => {
-  throw err;
-});
-
-const projectRoot = fs.realpathSync(process.cwd());
-
-console.log();
-console.log(chalk.magenta('\u203A Copying Expo Electron main process to local project...'));
-
-copyTemplateToProject(projectRoot);
-ensureMinProjectSetupAsync(projectRoot);
-
-console.log(
-  chalk.magenta(
-    '\u203A You can now edit the Electron main process in the `electron/main` folder of your project...'
-  )
-);
+const chalk = require('chalk');
+const fs = require('fs-extra');
+
+const { copyTemplateToProject, ensureMinProjectSetupAsync } = require('..');
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+const projectRoot = fs.realpathSync(process.cwd());
+
+console.log();
+console.log(chalk.magenta('\u203A Copying Expo Electron main process to local project...'));
+
+copyTemplateToProject(projectRoot);
+ensureMinProjectSetupAsync(projectRoot);
+
+console.log(
+  chalk.magenta(
+    '\u203A You can now edit the Electron main process in the `electron/main` folder of your project...'
+  )
+);

package/bin/electron/scripts/start.js

@@ -1,8 +1,8 @@
-const { ensureElectronConfig } = require('..');
-
-ensureElectronConfig(process.cwd());
-
-process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 1;
-process.env.platform = "electron";
-
-require('electron-webpack/out/dev/dev-runner');
+const { ensureElectronConfig } = require('..');
+
+ensureElectronConfig(process.cwd());
+
+process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 1;
+process.env.platform = "electron";
+
+require('electron-webpack/out/dev/dev-runner');

package/package.json

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

package/src/auth/Login.js

@@ -86,7 +86,11 @@ export default function LoginComponent(props){
             },1000)
         }
     },[withPortal])
-    const {header,withScrollView:customWithScrollView,children,initialize,contentTop,data:loginData,canGoToNext,keyboardEvents,onSuccess:onLoginSuccess,mutateData,beforeSubmit:beforeSubmitForm,canSubmit:canSubmitForm,onStepChange,...loginProps} = defaultObj(getProps({
+    const {header,
+        headerTopContent:HeaderTopContent,
+        containerProps : customContainerProps,
+        contentProp,
+        withScrollView:customWithScrollView,children,initialize,contentTop,data:loginData,canGoToNext,keyboardEvents,onSuccess:onLoginSuccess,mutateData,beforeSubmit:beforeSubmitForm,canSubmit:canSubmitForm,onStepChange,...loginProps} = defaultObj(getProps({
         ...state,
         setState,
         state,
@@ -101,6 +105,8 @@ export default function LoginComponent(props){
         ProviderSelector,
         previousButtonRef,
     }));
+    const containerProps = defaultObj(customContainerProps);
+
     React.useEffect(()=>{
         Preloader.closeAll();
         /*** pour initializer les cordonnées du composant login */
@@ -191,13 +197,22 @@ export default function LoginComponent(props){
     });
     const withScrollView = typeof customWithScrollView =='boolean'? customWithScrollView : true;
     const Wrapper = withPortal ? ScreenWithoutAuthContainer  : withScrollView ? ScrollView: View;
+    const mQueryUpdateProps = (a)=>{
+        const style = StyleSheet.flatten([updateMediaQueryStyle(),containerProps.style]);
+        if(typeof containerProps.updateMediaQueryStyle =='function'){
+            return containerProps.updateMediaQueryStyle({style})
+        }
+        return {style};
+    };
     const wrapperProps = withPortal ? {appBarProps,authRequired:false,title:loginTitle,withScrollView} : { style:styles.wrapper};
+    const sH = React.isComponent(HeaderTopContent)? <HeaderTopContent
+        mediaQueryUpdateNativeProps = {mQueryUpdateProps}
+    /> : React.isValidElement(HeaderTopContent)? HeaderTopContent : null;
     return <Wrapper testID = {testID+"_Wrapper" }{...wrapperProps}>
         <DialogProvider ref={dialogProviderRef}/>
+        {sH}
         <Surface style={[styles.container,{backgroundColor}]} testID={testID}>
-            <Surface elevation = {0} mediaQueryUpdateNativeProps = {(a)=>{
-                return {style:updateMediaQueryStyle()}
-            }} testID={testID+"_Content"} style={[styles.content,updateMediaQueryStyle(),{backgroundColor}]}>
+            <Surface elevation = {0} {...containerProps} mediaQueryUpdateNativeProps = {mQueryUpdateProps} {...containerProps} testID={testID+"_Content"} style={[styles.content,updateMediaQueryStyle(),{backgroundColor},containerProps.style]}>
                 <FormData 
                     formName = {formName}
                     testID = {testID+"_FormData"}

package/src/components/Avatar/AutoHeightImage/index.js

@@ -1,5 +1,5 @@
 ///@see : https://github.com/vivaxy/react-native-auto-height-image
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef } from '$react';
 import ImagePolyfill from './ImagePolyfill';
 import AnimatableImage from './AnimatableImage';
 import PropTypes from 'prop-types';
@@ -22,6 +22,7 @@ function AutoHeightImage(props) {
     maxHeight,
     onError,
     testID:cTestID,
+    preloader,
     ...rest
   } = props;
   const [height, setHeight] = useState(
@@ -29,14 +30,14 @@ function AutoHeightImage(props) {
       DEFAULT_HEIGHT
   );
   const mountedRef = useRef(false);
-
-  useEffect(function () {
+  const toolgeMounted = function () {
     mountedRef.current = true;
     return function () {
       mountedRef.current = false;
     };
-  }, []);
-
+  }
+  useEffect(toolgeMounted,[])
+  React.useOnRender(toolgeMounted,0);
   useEffect(
     function () {
       (async function () {
@@ -75,7 +76,7 @@ function AutoHeightImage(props) {
         onError={onError}
         {...rest}
       />
-      {!mountedRef.current ? <ActivityIndicator testID={testID+"_ActivityIndicator"} color={theme.colors.primary}/> : null}
+      {!mountedRef.current && preloader !== false && (!width || !height) ? <ActivityIndicator testID={testID+"_ActivityIndicator"} color={theme.colors.primary}/> : null}
   </View>
   );
 }
@@ -85,13 +86,15 @@ AutoHeightImage.propTypes = {
   width: PropTypes.number.isRequired,
   maxHeight: PropTypes.number,
   onHeightChange: PropTypes.func,
-  animated: PropTypes.bool
+  animated: PropTypes.bool,
+  preloader : PropTypes.bool,//si l'on affichera le preloader
 };
 
 AutoHeightImage.defaultProps = {
   maxHeight: Infinity,
   onHeightChange: NOOP,
-  animated: false
+  animated: false,
+  preloader : true,
 };
 
 export default AutoHeightImage;