@fto-consult/expo-ui 1.0.4

package/src/components/Form/List/index.js

@@ -0,0 +1,2 @@
+import List from "./List";
+export default List;

package/src/components/Form/index.js

@@ -0,0 +1,14 @@
+export * from "./FormData";
+
+export * from "./Form";
+
+export {default as List} from "./List";
+
+export {default as Form} from "./Form";
+
+export {default as Action} from "./Action";
+
+export {default as KeyboardAvoidingView} from "./KeyboardAvoidingView";
+
+
+export * from "./utils";

package/src/components/Form/utils/FormsManager.js

@@ -0,0 +1,101 @@
+import {isObj,isNonNullString,isFunction,defaultObj,extendObj,defaultBool} from "$utils";
+import APP from "$capp/instance";
+import {observable,addObserver,isObservable} from "$observable";
+
+let MANAGER = {
+    forms : {
+        
+    },///les actions de formulaire
+    actions : {
+
+    },
+};
+if(!isObj(APP.FormsManager)){
+    Object.defineProperties(APP,{
+        FormsManager : {
+            value : MANAGER,
+            writable:false,
+            override : false
+        }
+    });
+    observable(APP.FormsManager);
+    addObserver(APP.FormsManager);
+    APP.FormsManager.on("mount",(formName,formObject)=>{
+        formObject._fields = defaultObj(formObject._fields);
+        formObject._actions= defaultObj(formObject._actions);
+        APP.FormsManager.forms[formName] = formObject;
+    }).on("unmount",(formName)=>{
+        delete APP.FormsManager.forms[formName];
+    }).on("registerField",(fieldName,formName,fieldObj)=>{
+        if(fieldObj && isObservable(fieldObj)){
+            APP.FormsManager.forms[formName] = defaultObj(APP.FormsManager.forms[formName]);
+            APP.FormsManager.forms[formName]._fields = defaultObj(APP.FormsManager.forms[formName]._fields);
+            APP.FormsManager.forms[formName]._fields[fieldName] = fieldObj;
+            let form = APP.FormsManager.forms[formName];
+            let formField = form._fields[fieldName];
+            if(isFunction(formField.onRegister)) formField.onRegister(fieldName,fieldObj);
+        }
+    }).on("unregisterField",(fieldName,formName)=>{
+        if(isNonNullString(fieldName) && isNonNullString(formName)){
+            APP.FormsManager.forms[formName] = defaultObj(APP.FormsManager.forms[formName]);
+            APP.FormsManager.forms[formName]._fields = defaultObj(APP.FormsManager.forms[formName]._fields);
+            delete APP.FormsManager.forms[formName]._fields[fieldName];
+        }
+    }).on("mountAction",(formName,actionObj)=>{
+        if(!isNonNullString(formName) || !isObj(actionObj)) {
+            console.error("MSForm Action, l'action, nom du formulaire non définit ",formName,actionObj)
+            return;
+        }
+        APP.FormsManager.actions = defaultObj(APP.FormsManager.actions);
+        APP.FormsManager.actions[formName] = defaultObj(APP.FormsManager.actions[formName]);
+        APP.FormsManager.actions[formName][actionObj.getId()] = actionObj;
+    }).on("unmountAction",(formName,actionId)=>{
+        if(!isNonNullString(formName) || !isNonNullString(actionId)) return;
+        if(!isObj(APP.FormsManager.actions) || !isObj(APP.FormsManager.actions[formName])) return;
+        delete APP.FormsManager.actions[formName][actionId]
+    })
+} else {
+    MANAGER = APP.FormsManager;
+}
+
+export default MANAGER;
+
+export const getFormInstance = (formName) =>{
+    return MANAGER.forms[formName];
+}
+export const getForm = getFormInstance;
+
+
+export const getFormFields = (formName)=>{
+    if(!isNonNullString(formName)) return {};
+    if(!isObj(APP.FormsManager.forms[formName]) || !isObj(APP.FormsManager.forms[formName]._fields))return {};
+    return APP.FormsManager.forms[formName]._fields;
+}
+
+/*** retourne l'instance d'un champ à partir du nom du formulaire et celui du champ en question
+ * @param : formName : le nom de la form dans lequel est définit le cham
+ * @parm f: string field name : le nom du champ à récupérer 
+ */
+ export const getFormField = (formName,fieldName)=>{
+    if(!isNonNullString(formName)||!isNonNullString(fieldName)) return null;
+    let fields = getFormFields(formName);
+    if(isObj(fields)){
+        return fields[fieldName];
+    }
+    return null;
+}
+export const getFormData = (formName)=>{
+    const instance = getForm(formName);
+    if(instance) return instance.getData();
+    return {};
+}
+
+export const getActions = (formName) =>{
+    if(!isNonNullString(formName)) return {};
+    if(!isObj(APP.FormsManager.actions)) return {} ;
+    return defaultObj(APP.FormsManager.actions[formName]);
+}
+
+export const warning = (payload,msg) => {if(!isNonNullString(msg)) msg = "⚠ Forms, Missing field name";else msg = "⚠ Forms, "+msg;console.warn(`⚠ Forms, Missing field name: ${payload}`);}
+
+

package/src/components/Form/utils/index.js

@@ -0,0 +1,8 @@
+import Forms from "./FormsManager";
+
+export * from "./FormsManager";
+export {Forms};
+
+export {default as keyboardEvents} from "./keyboardEvents";
+
+export {default as keyboardShortcuts} from "./keyboardShortcuts";

package/src/components/Form/utils/keyboardEvents.js

@@ -0,0 +1,8 @@
+
+import keyboardShortcuts from "./keyboardShortcuts";
+const keyboardEvents = {};
+['enter','down','up','backspace','esc',...Object.keys(keyboardShortcuts)].map((k)=>{
+    keyboardEvents[k]= k;
+})
+
+export default keyboardEvents;

package/src/components/Form/utils/keyboardShortcuts.js

@@ -0,0 +1,57 @@
+export default {
+    'esc' : {
+        action : 'esc',
+        text : 'Annuler',
+        desc : 'Ferme la fenêtre et annule l\'opération en cours'
+    },
+    'ctrl+alt+s': {
+        action : 'save',
+        text : 'Enregistrer',
+        desc : 'Enregistrer le document en cours'
+    },
+    'ctrl+alt+n' : {
+        action : 'save2new',
+        text : 'Enregistrer + Nouveau',
+        desc : 'Enregistre le document en cours puis ouvre la page d\'édition d\'un nouveau document'
+    },
+    'ctrl+alt+c' : {
+        action : 'save2close',
+        text : 'Enregistrer + Fermer',
+        desc : 'Enregistre le document en cours, puis ferme la fenêtre en cours'
+    },
+    'ctrl+alt+p' : {
+        action : 'print',
+        text : 'Imprimer',
+        desc : 'Imprime le document en cours',
+    },
+    'ctrl+alt+i' : {
+        action : 'save2print',
+        text : 'Enregistrer + Imprimer',
+        desc : 'Enregistre puis exécute la fonction permettant d\'imprimer le document enregistré'
+    },
+    'ctrl+alt+d' : {
+        action : 'clone',
+        text : 'Dupliquer',
+        desc : 'Duplique le document en cours',
+    },
+    'ctrl+alt+a' : {
+        action : 'archive',
+        text : 'Archiver',
+        desc : 'Archive le document ouvert'
+    },
+    'ctrl+alt+left' : {
+        action : 'previous',
+        text : 'Précédent',
+        desc : 'Se positionne au document précédent dans la liste'
+    },
+    'ctrl+alt+right' : {
+        action : 'next',
+        text : 'Suivant',
+        desc : 'Se positionne au document suivant dans la liste'
+    },
+    'ctrl+alt+x' : {
+        action : 'copy',
+        text : 'Copier',
+        desc : 'Copier le document'
+    },
+}

package/src/components/Grid/Cell.js

@@ -0,0 +1,108 @@
+'use strict';
+
+import React from '$react';
+import {TouchableOpacity, StyleSheet} from 'react-native';
+import Dimensions from "$cplatform/dimensions";
+import View from "$ecomponents/View";
+import {defaultStr} from "$utils";
+import PropTypes from "prop-types";
+import {medias} from "$theme/grid";
+import theme from "$theme";
+import {Elevations} from "$ecomponents/Surface";
+
+export const totalSize = 12;
+
+export const defaultMobileSize = 12;
+
+export const defaultTabletSize = 6;
+
+export const defaultDesktopSize = 4;
+
+const isV = x=> typeof x =='number' && x && x <= totalSize ? true : false;
+export const getSizeStyle = (props)=>{
+    let {size,smallPhoneSize,paddingMultiplicator,phoneSize,marginMultiplicator,mobileSize,tabletSize,gutter,desktopSize} = defaultObj(props);
+    gutter = gutter === false ? 0 : typeof gutter =='number'? gutter : undefined;
+    if(Dimensions.isSmallPhoneMedia()){
+        size = isV(smallPhoneSize) ? smallPhoneSize : size || defaultMobileSize;
+        gutter = gutter !== undefined ? gutter : medias.sp;
+    } else if(Dimensions.isPhoneMedia()){
+        size = isV(phoneSize) ? phoneSize : size || defaultMobileSize;
+        gutter = gutter !== undefined ? gutter : medias.mp;
+    } else if(Dimensions.isMobileMedia()){
+        size = isV(mobileSize) ? mobileSize : size || defaultMobileSize;
+        gutter = gutter !== undefined ? gutter : medias.xs;
+    } else if(Dimensions.isTabletMedia()){
+        size = isV(tabletSize) ? tabletSize : size || defaultTabletSize;
+        gutter = gutter !== undefined ? gutter : medias.sm;
+    } else {
+        size = isV(desktopSize)? desktopSize : size || defaultDesktopSize;
+        gutter = gutter !== undefined ? gutter : medias.md;
+    }
+    if(!isV(size)){
+        size = totalSize;
+    }
+    if(!gutter){
+        gutter = 0;
+    }
+    paddingMultiplicator = typeof paddingMultiplicator =='number'? paddingMultiplicator : 1.8;
+    marginMultiplicator = typeof marginMultiplicator =="number"? marginMultiplicator : 0;
+    const marginRight = marginMultiplicator*gutter;
+    return {
+        style : {paddingRight:gutter*paddingMultiplicator,marginVertical:gutter,width : (((size)/totalSize)*100)+"%"}
+    }
+}
+
+const GridCellComponent = React.forwardRef((p,ref)=>{
+    const {style,size,children,phoneSize,withSurface,elevation:cElev,mediaQueryUpdateNativeProps,contentProps:cProps,tabletSize,desktopSize,smallPhoneSize,onPress,activeOpacity,onLongPress,flex:customFlex,onPressIn,onPressOut,...props} = p;
+    const testID = defaultStr(props.testID,"RN_Grid.CellComponent");
+    const contentProps = defaultObj(cProps);
+    const C = onPress || onLongPress || onPressIn || onPressOut ? TouchableOpacity : View;
+    const elevation = typeof elevation == "number"? elevation : withSurface ? 5 : undefined;
+    const elevStyle = typeof elevation =="number" ? Elevations[elevation] || null : null;
+    return <View 
+        {...props}
+        testID={testID} 
+        mediaQueryUpdateNativeProps = {(args)=>{
+            if(typeof mediaQueryUpdateNativeProps =='function' && mediaQueryUpdateNativeProps(args) === false) return;
+            return getSizeStyle(p);
+        }}
+        ref={ref} 
+        style = {[styles.container,getSizeStyle(p).style,style]}
+    >
+        <C testID={testID+"_Content"}  activeOpacity={activeOpacity}  {...contentProps}
+             
+            onLongPress={onLongPress} onPressIn={onPressIn} onPressOut={onPressOut} onPress={onPress}
+                style = {[styles.content,withSurface && {backgroundColor:theme.colors.surface},contentProps.style,elevStyle]}
+                children = {children}
+            />
+    </View>
+});
+
+GridCellComponent.displayName = "Grid.Col";
+GridCellComponent.propTypes = {
+    flex : PropTypes.number,
+    size : PropTypes.number,
+    smallPhoneSize : PropTypes.number,
+    phoneSize : PropTypes.number,
+    tabletSize : PropTypes.number,
+    desktopSize : PropTypes.number,
+    gutter : PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.number,
+    ]),
+    withSurface : PropTypes.bool,
+    elevation : PropTypes.number,///l'elévation pour le box shadow
+    contentProps : PropTypes.object,
+}
+const styles = StyleSheet.create({
+    container : {
+        flexDirection:  'column',
+        justifyContent : 'flex-start',
+        alignItems : 'flex-start',
+    },
+    content : {
+        width : '100%'
+    }
+});
+
+export default GridCellComponent;

package/src/components/Grid/Col.js

@@ -0,0 +1,30 @@
+'use strict';
+
+import React from '$react';
+import {TouchableOpacity, StyleSheet} from 'react-native';
+import {defaultStr} from "$utils";
+import PropTypes from "prop-types";
+import View from "$ecomponents/View";
+
+const GridColComponent = React.forwardRef((p,ref)=>{
+    const {style,size,onPress,activeOpacity,onLongPress,flex:customFlex,onPressIn,onPressOut,...props} = p;
+    const flattenedStyle = StyleSheet.flatten(style);
+    const testID = defaultStr(props.testID,"RN_Grid.ColComponent");
+    const flex = customFlex !== undefined ? customFlex : (flattenedStyle && flattenedStyle.width) ? 0 : 1;
+    const C = onPress || onLongPress || onPressIn || onPressOut ? TouchableOpacity : View;
+    return <C {...props} activeOpacity={activeOpacity} onLongPress={onLongPress} onPressIn={onPressIn} onPressOut={onPressOut}
+        testID={testID} style={[styles.container,flattenedStyle,{flex}]} ref={ref} onPress={onPress}
+    />
+});
+
+GridColComponent.displayName = "Grid.Col";
+GridColComponent.propTypes = {
+    flex : PropTypes.number,
+}
+const styles = StyleSheet.create({
+    container : {
+        flexDirection:  'column'
+    }
+});
+
+export default GridColComponent;

package/src/components/Grid/Grid.js

@@ -0,0 +1,35 @@
+import React from  '$react';
+import {TouchableOpacity,StyleSheet} from 'react-native';
+import {grid} from "$theme";
+import {defaultStr} from "$utils";
+import PropTypes from "prop-types";
+import { StyleProp } from '$theme';
+import View from "$ecomponents/View";
+
+const GridComponent = React.forwardRef((p,ref)=>{
+    const {onPress,responsive,activeOpacity,onLongPress,flexGrow =1,flex:customFlex,style,onPressIn,col,onPressOut,...props} = p;
+    const testID = defaultStr(props.testID,"RN_GridComponent");
+    const flattenedStyle = StyleSheet.flatten(style);
+    const flex = customFlex !== undefined ? customFlex :   (flattenedStyle && (col && flattenedStyle.width || !col && flattenedStyle.height)) ? 0 : 1;
+    const C = onPress || onLongPress || onPressIn || onPressOut ? TouchableOpacity : View;
+    return <C {...props} activeOpacity={activeOpacity} onLongPress={onLongPress} onPressIn={onPressIn} onPressOut={onPressOut}
+        testID={testID+"_Container"} onPress={onPress}
+        style={[styles.container,{flexGrow},col && {flexDirection:'column'},responsive!== false && !col && grid.row(false),style,{flex}]} ref={ref}
+    />
+});
+
+const styles = StyleSheet.create({
+    container : {
+        flexDirection:  'row'
+    }
+});
+
+GridComponent.displayName = "GridComponent";
+GridComponent.propTypes = {
+    col : PropTypes.bool,///si le rendu sera en colonne
+    style : StyleProp,
+    flexGrow : PropTypes.number,
+    responsive : PropTypes.bool,///si le contenu de la grille sera responsive, dans ce cas, ses enfants seront les Cell
+}
+
+export default GridComponent;

package/src/components/Grid/Row.js

@@ -0,0 +1,30 @@
+'use strict';
+
+import React from '$react';
+import {TouchableOpacity, StyleSheet} from 'react-native';
+import View from "$ecomponents/View";
+import {defaultStr} from "$utils";
+import PropTypes from "prop-types";
+
+const GridRowComponent = React.forwardRef((p,ref)=>{
+    const {style,size,onPress,activeOpacity,onLongPress,flex:customFlex,onPressIn,onPressOut,...props} = p;
+    const flattenedStyle = StyleSheet.flatten(style);
+    const testID = defaultStr(props.testID,"RN_Grid.RowComponent");
+    const flex = customFlex !== undefined ? customFlex : (flattenedStyle && flattenedStyle.height) ? 0 : 1;
+    const C = onPress || onLongPress || onPressIn || onPressOut ? TouchableOpacity : View;
+    return <C {...props} activeOpacity={activeOpacity} onLongPress={onLongPress} onPressIn={onPressIn} onPressOut={onPressOut}
+        onPress={onPress} testID={testID} style={[styles.container,flattenedStyle,{flex}]} ref={ref}
+    />
+});
+
+GridRowComponent.displayName = "Grid.Row";
+GridRowComponent.propTypes = {
+    flex : PropTypes.number,
+}
+const styles = StyleSheet.create({
+    container : {
+        flexDirection:  'row'
+    }
+});
+
+export default GridRowComponent;

package/src/components/Grid/index.js

@@ -0,0 +1,11 @@
+import Grid from "./Grid";
+import Row from "./Row";
+import Col from "./Col";
+import Cell from "./Cell";
+
+Grid.Row = Row;
+Grid.Col = Col;
+Grid.Cell = Cell;
+
+export {Row,Col,Cell};
+export default Grid;

package/src/components/Hashtag/index.js

@@ -0,0 +1,119 @@
+import {isNonNullString,defaultObj} from "$utils";
+//import dataFileManager from "$database/dataFileManager";
+import {open as showPreloader,close as hidePreloader} from "$preloader";
+import Label from "$ecomponents/Label";
+import templates from "$ecomponents/Form/Fields/sprintfSelectors";
+import Tooltip from "$ecomponents/Tooltip";
+import { Pressable } from "react-native";
+
+/*** 
+ * API The component ReactHashtag is actually pretty generic. Is not something that someone can't do in half an hour. But, this one has some generic API that could make you turn.
+    Name	Type	Description
+    renderHashtag(value: String, onPress: Function)	function	Returns the custom element to be renderer instead of a <span>. You can go wild here.
+    onHashtagPress(value: String, e: Event)	function	The click handler for each hashtags. This will be called with the hashtag value that got clicked
+ *  
+ * 
+ */
+const rule = /([#|＃][^\s]+)/g;
+const parse = (value, renderer,props) => {
+    if(!isNonNullString(value)){
+        return React.isValidElement(value)? value: null;
+    }
+    return value.split(rule).map((chunk,i) => {
+        if (chunk.match(rule)) {
+            return renderer(chunk,props);
+        }
+        return <Label {...props} key={i}>{chunk}</Label>
+    });
+};
+const onHashtagPress = ({dbName,code,table})=>{
+    if(isNonNullString(table) && isNonNullString(code)){
+        code = code.toUpperCase().trim()
+        const run = (cb)=>{
+            if(!isNonNullString(dbName)){
+                cb(dbName);
+            } else if(false) {
+                dbName = dataFileManager.sanitizeName(dbName,table);
+                table = table.toUpperCase();
+                let hasFound = false;
+                let user = defaultObj(Auth.getLoggedUser());
+                dataFileManager.getAll((dF,code)=>{
+                    if(dF.code == dbName){
+                        if(dF.type !== 'seller' || (dF.type == 'seller' && arrayValueExists(dF.users,user.code))){
+                            hasFound = true;
+                        }
+                    }
+                });
+                if(hasFound){
+                    cb(dbName)
+                }
+            }
+        }
+        run((dbName)=>{
+            showPreloader("traitement de la requête ...");
+        })
+    }
+}
+
+const defaultRenderText = ({text,code,value,dbName,table,hashtag})=>{
+    let title = "";
+    text = defaultStr(text);
+    if(code){
+        title +=( (title)? "\n":"") +" Code : [" + code+"]";
+    }
+    if(isNonNullString(table)){
+        title +=( (title)? "\n":"") +" Table : [" + table.toUpperCase()+"]";
+    }
+    if(dbName){
+        title +=( (title)? "\n":"") + dataFileManager.dataFileText +" : ["+dbName+"]";
+    }
+    return <Tooltip Component={Label} cursorPointer primary style={[{textDecorationLine:'underline'}]} title={title}>
+        {"#"+text}
+    </Tooltip>
+}
+const defaultHashtagRenderer = x => (hashtag,hasTagProps) =>{
+    const {Component:CustomComponent,renderText,...props} = defaultObj(hasTagProps);
+    if(!isNonNullString(hashtag)) return null;
+    let val = hashtag;
+    if(!isNonNullString(val)) return;
+    let split = val.split("#");
+    let dbName = '';
+    let code = "";
+    let table = ""
+    if(split[1]){
+        dbName = split[1].trim().split("[")[0];
+        val = split[1].trim();
+        split=val.match(/\[([^)]+)\]/);
+        if(split && split[1] && val.indexOf("-")){
+            val = split[1];
+            let index = val.indexOf('-');
+            table = val.substring(0,index);
+            code = val.substring(index+1,val.length);
+            let ob = defaultObj(templates["&"+table.toLowerCase().trim().ltrim("&").rtrim("&")+"&"])
+            table = defaultStr(ob.table,table);
+        }
+    }
+    const p = {...props,table,value:code||hashtag,code,dbName,text:code||hashtag,hashtag};
+    const text = typeof renderText =="function"? renderText(p) : defaultRenderText(p);
+    if(!React.isValidElement(text,true)) return null;
+    let Component = React.isComponent(Component) ? Component : Pressable;
+    props.style = [{textDecorationLine : 'underline'},props.style]
+    return <Component key={hashtag} {...defaultObj(props)} onPress={(e)=>{
+        React.stopEventPropagation(e);
+        if(props.disabled) return;
+        onHashtagPress({...p,event:e});
+    }}>{text}</Component>
+}
+
+const HashTagComponent = props => {
+    const contents =
+      typeof props.children === "object" && props.children && props.children.length
+        ? !isNaN(props.children.length)
+          ? props.children[0]
+          : props.children
+        : props.children;
+    const hashtagRenderer = props.renderHashtag || defaultHashtagRenderer();
+    return parse(contents, hashtagRenderer,props);
+}
+
+export default HashTagComponent;

package/src/components/HeavyScreen/index.js

@@ -0,0 +1,52 @@
+import React from '$react';
+import {useAfterInteractions }  from "./utils";
+import { Transition, Transitioning } from 'react-native-reanimated'
+import PropTypes from "prop-types";
+import { StylePropTypes } from '$theme';
+import {isNumber,defaultStr} from "$utils";
+
+const OptimizedHeavyScreen = React.forwardRef(({
+  transition = (
+    <Transition.Together>
+      <Transition.Change interpolation="easeInOut" />
+      <Transition.In type="fade" />
+    </Transition.Together>
+  ),
+  style,
+  children,
+  timeout,
+  testID,
+  transitionTimeout,
+  placeholder,
+},ref) => {
+  timeout = isNumber(timeout)? timeout : isNumber(transitionTimeout)? transitionTimeout : undefined;
+  const { transitionRef, areInteractionsComplete } = useAfterInteractions(timeout);
+  let Placeholder = placeholder;
+  placeholder = React.isComponent(Placeholder)? <Placeholder /> : React.isValidElement(Placeholder)? Placeholder :  null;
+  return (
+    <Transitioning.View
+      testID={defaultStr(testID,'RN_OptimizedHeavyScreen')}
+      transition={transition}
+      style={[{flex:1},style]}
+      ref={React.useMergeRefs(transitionRef,ref)}
+    >
+      {areInteractionsComplete ? (children) :  placeholder}
+    </Transitioning.View>
+  )
+});
+
+export default OptimizedHeavyScreen;
+
+OptimizedHeavyScreen.propTypes = {
+    transition: PropTypes.any,
+    children : PropTypes.node,
+    style: StylePropTypes,
+    timeout : PropTypes.number,
+    transitionTimeout : PropTypes.number,
+    placeholder : PropTypes.oneOfType([
+        PropTypes.node,
+        PropTypes.element,
+    ])
+  }
+
+  OptimizedHeavyScreen.displayName = "OptimizedHeavyScreenComponent";

package/src/components/HeavyScreen/utils.js

@@ -0,0 +1,36 @@
+import React from "$react";
+import {InteractionManager} from "react-native";
+/**** options, les options lié à la transition */
+export const useAfterInteractions =  (options) => {
+	const [areInteractionsComplete, setInteractionsComplete] = React.useState(false)
+    if(isNumber(options)){
+        options = {timeout:options};
+    }
+    options = defaultObj(options);
+    let timeout = isNumber(options.timeout)? options.timeout : defaultNumber(options.timeout,options.transitionTimeout,AFTER_INTERACTIONS_TIMEOUT);
+
+	const subscriptionRef = React.useRef(null)
+
+	const transitionRef = React.useRef(null)
+
+	React.useEffect(() => {
+		subscriptionRef.current = InteractionManager.runAfterInteractions(
+			() => {
+				setTimeout(()=>{
+                    //transitionRef.current?.animateNextTransition()
+                    setInteractionsComplete(true)
+                    subscriptionRef.current = null
+                },timeout)
+			}
+		)
+		return () => {
+			subscriptionRef.current?.cancel()
+		}
+	}, [])
+
+	return {
+		areInteractionsComplete,
+        completed : areInteractionsComplete,
+		transitionRef,
+	}
+}

package/src/components/HelperText/index.js

@@ -0,0 +1,36 @@
+import { HelperText} from 'react-native-paper';
+import { StyleSheet } from 'react-native';
+import PropTypes from "prop-types";
+import {defaultBool,defaultObj,isNonNullString} from "$utils";
+import React from "$react";
+export const TYPES = {info:'info',error:'error'};
+import theme,{DISABLED_OPACITY} from "$theme";
+
+export default function HelperTextComponent (props){
+    let {type,visible,style,children,error,...rest} = props;
+    if(!isNonNullString(children)) return React.isValidElement(children)?children:null;
+    rest = defaultObj(rest);
+    type = defaultStr(type,'info').toLowerCase();
+    const _style = {};
+    if(!TYPES[type]) {
+        type = TYPES.info;
+    }
+    if(error){
+        type = TYPES.error;
+        _style.color = theme.colors.error;
+    }
+    return <HelperText {...rest} style={[styles.padding,_style,style,rest.disabled?{opacity:DISABLED_OPACITY}:undefined]} padding={'none'} type={type} children={children} visible={defaultBool(visible,true)} />
+}
+
+HelperTextComponent.propTypes = {
+    ...defaultObj(HelperText.propTypes),
+    error : PropTypes.bool,
+}
+
+const styles = StyleSheet.create({
+    padding: {
+      paddingHorizontal: 0,
+      paddingTop:0,
+      paddingBottom : 5,
+    },
+  });