@fto-consult/expo-ui 1.0.4

package/src/components/Form/FormData/FormDataActions.js

@@ -0,0 +1,155 @@
+import FormData from "./FormData";
+import showConfirm from "$ecomponents/Dialog/confirm";
+import Dimensions from "$cplatform/dimensions";
+import {defaultStr,isObj,defaultObj,isNonNullString,defaultVal,defaultFunc} from "$utils";
+import React from "$react";
+import {isWeb} from "$cplatform";
+import PropTypes from "prop-types";
+
+
+export default class FormDataActionComponent extends FormData {
+    isFullScreen(){
+        const mainProps = this.getMainProps();
+        return typeof mainProps.fullScreen =='boolean'? mainProps.fullScreen : typeof mainProps.fullPage =='boolean'? mainProps.fullPage : mainProps.responsive !== false ? Dimensions.isMobileOrTabletMedia() : false;
+    }
+    getMainProps (){
+        return this.props;
+    }
+    getConfirmTitle(){
+        const {title,subtitle,isEditing} = this.getAppBarProps();
+        if(title){
+            return subtitle ? (title+(isWeb()?(isEditing || isWeb()?' | ':''):"\n")+subtitle) : title;
+        }
+        return subtitle;
+    }
+    close (){}
+    getNewElementLabel(){
+        return defaultStr(this.getMainProps().newElementLabel,this.props.newElementLabel,'Nouveau');
+    }
+    getIndexFieldProps(){
+        return defaultVal(this.getMainProps().indexField,this.props.indexField);
+    }
+    getAppBarProps(){
+        const mainProps = this.getMainProps();
+        const data = this.getDataProp();
+        const appBarProps = Object.assign({},mainProps.appBarProps);
+        const indexField = this.getIndexFieldProps();
+        const isEditing = this.isDocEditing(data);
+        let subtitle = (isEditing?'Modifier':this.getNewElementLabel());
+        let title = React.getTextContent(defaultVal(appBarProps.title,mainProps.title,this.props.title));
+        if(isEditing){
+            let _title = "";
+            if(isNonNullString(indexField)){
+                _title = defaultStr(data[indexField]);
+            } else if(isNonNullString(data.code)){
+                _title = data.code;
+            }
+            if(_title){
+                subtitle+= " ["+_title+"]"
+            }
+        } else {
+            subtitle = " ["+subtitle+"]";
+        }
+        if(this.props.title !== false && mainProps.title !== false) {
+            appBarProps.title = title;
+        }
+        appBarProps.isEditing = isEditing;
+        if(appBarProps.subtitle !== false && this.props.subtitle !== false && mainProps.subtitle !== false){
+            appBarProps.subtitle = subtitle = defaultVal(appBarProps.subtitle,subtitle);
+        }
+        return appBarProps;
+    }
+    /*** si l'on doit afficher une boîte de dialogue lorsque l'on veut modifier l'élément en cours de modification */
+    showConfirmOnCancel(){
+        return this.props.confirmOnCancel !== false;
+    }
+    onBackActionPress(args,callback){
+        args = defaultObj(args);
+        const mainProps = this.getMainProps();
+        const hasP = mainProps !== this.props;
+        const cb = ()=>{
+            if(typeof mainProps.onBackActionPress =='function' && mainProps.onBackActionPress(args) === false) return
+            else if(hasP && typeof this.props.onBackActionPress =='function' && this.props.onBackActionPress(args) === false) return;
+            if(typeof callback =='function'){
+              return  callback(args);
+            }
+            return this.close();
+        }
+        if(this.showConfirmOnCancel()){
+            showConfirm({
+                title : defaultStr(this.getConfirmTitle(),'Annuler L\'opération en cours'),
+                message : "Voulez vous annuler l'opération en cours?",
+                onSuccess :cb
+            });
+        } else {
+            cb();
+        }
+        return true;
+    }
+    /*** si l'on autorise la création d'un nouvel élément */
+    canCreateNew(){
+        return true;
+    }
+    getAppBarActionsProps(props){
+        props = defaultObj(props,this.getMainProps(),this.props);
+        let {actions,save2NewAction,save2printAction,save2closeAction,saveAction,newAction} = props;
+        const sArg = {context:this};
+        save2NewAction = typeof save2NewAction =='function' ? save2NewAction (sArg) : save2NewAction;
+        save2closeAction = typeof save2closeAction ==='function'? save2closeAction(sArg) : save2closeAction;
+        saveAction = typeof saveAction ==='function'? saveAction(sArg) : saveAction;
+        newAction = typeof newAction ==='function'? newAction (sArg) : newAction;
+        const context = this;
+        const appBarProps = this.getAppBarProps();
+        const data = this.getDataProp();
+        const isEditing = this.isDocEditing(data);
+        let textSave = isEditing ? "Modifier": 'Enregistrer';
+        const newElementLabel = defaultStr(props.newElementLabel,this.props.newElementLabel,"Nouvel Element");
+        const indexField = this.getIndexFieldProps();
+        if(isEditing){
+            const t = isNonNullString(indexField) && isNonNullString(data[indexField])? data[indexField] : isNonNullString(data.code)? data.code : undefined;
+            if(t){
+                textSave+="["+t+"]"
+            }
+        }
+        if(actions == undefined && actions !== false){
+            actions = {
+                save2new : save2NewAction? {
+                    isAction : true,
+                    text : textSave+' & '+newElementLabel,
+                    icon : 'content-save-edit',
+                    onPress : ()=>{
+                        context.clickedAction = 'save2new';
+                    }
+                } : null,
+                save2close : save2closeAction? {
+                    text : textSave+'+ Fermer',
+                    isAction : true,
+                    icon : 'content-save-all-outline',
+                    onPress : ()=>{
+                        context.clickedAction = 'save2close';
+                    }
+                } : null,
+                save : saveAction !== false ? {
+                    isAction : true,
+                    text : textSave,
+                    icon : 'check',
+                    title : textSave,
+                    onPress : (a)=>{
+                        context.clickedAction = 'save';
+                    }
+                } : null,
+                newElt : isEditing && newAction && this.canCreateNew() ? {
+                    isAction : false,
+                    text : newElementLabel,
+                    icon : 'new-box',
+                    onPress : ()=>{this.createNew.bind(this)}
+                } : null,
+            }
+        }
+        return super.getAppBarActionsProps({actions,...props,fullScreen : this.isFullScreen(),isFormAction:true,appBarProps})
+    }
+}
+
+FormDataActionComponent.propTypes = {
+    ...FormData.propTypes,
+}

package/src/components/Form/FormData/componentsTypes.js

@@ -0,0 +1,117 @@
+import {defaultStr,defaultObj,defaultVal,isObj} from "$utils";
+import Fields from "../Fields";
+//import dataFileManager from "$dataFileManager";
+import i18n from "$i18n";
+
+const componentTypes =  {
+    ...Fields,
+    id : Fields.IdField,
+    idfield : Fields.IdField,
+    piecefield : Fields.PieceField,
+    piece : Fields.PieceField,
+    select : Fields.SelectField,
+    switch : Fields.Switch,
+    select_country : Fields.SelectCountry,
+    selectcountry : Fields.SelectCountry,
+    date : Fields.Date,
+    time : Fields.Time,
+    checkbox : Fields.Checkbox,
+    slider : Fields.Slider,
+    color : Fields.ColorPicker,
+    tel : Fields.Tel,
+    html : Fields.Html,
+    datafile : Fields.DataFile,
+    image : Fields.Image,
+    schedule : Fields.Scheduler,
+    scheduler : Fields.Scheduler,
+    default : Fields.TextField,
+};
+
+export default componentTypes;
+
+
+export const getFilterComponentProps = (_props)=>{
+    let {
+        validType,
+        validRule,
+        required,//label,text,title,
+        onAdd,
+        onAddIconClass,
+        addIcon,
+        disabled,
+        readOnly,
+        onAddIcon,
+        tableName,
+        multiplicater,
+        dbName,
+        table,
+        piece,
+        onChange,
+        error,
+        errorText,
+        label,text,
+        primary,
+        onValidate,
+        checkPiece,
+        check,
+        width,
+        type,
+        ...props
+    } = _props;
+    props = defaultObj(props);
+    let component = Fields.TextField;
+    type = defaultStr(type,'text').toLowerCase().replaceAll("_","").replaceAll("-","").trim();
+    props = defaultObj(props);
+    /*if(type =='datafile'){
+        type = 'select';
+        props = {...selectFieldProps,items : dataFileManager.getAll(),...props};
+        label = defaultStr(label,dataFileManager.dataFileText);
+    }*/
+    if(type.startsWith("select")){
+        props.inputProps = Object.assign({},props.inputProps);
+        props.inputProps.placeholder = defaultStr(props.inputProps.placeholder,i18n.lang("search.."))
+        props.label = label;
+        component = Fields.SelectField;
+        /*if(type !== 'select'){
+            if(type === 'selectstructdata') {
+                dbName = 'structData';
+                component = StructDataSelectField;
+            } else if(type === 'selecttabledata'){
+                component = TableDataSelectField;
+            } 
+            props.tableName = tableName;
+            props.dbName = dbName;
+        }*/
+        type = "select";
+    } else if(type == 'switch' || type =='radio' || type ==='checkbox') {
+        type = 'select';
+        let {checkedLabel,checkedTooltip,uncheckedTooltip,checkedValue,uncheckedLabel,uncheckedValue,label,text,...pR} = props;
+        checkedLabel = defaultVal(checkedLabel,checkedTooltip,'Désactivé/Désélectionné')
+        uncheckedLabel = defaultVal(uncheckedLabel,uncheckedTooltip,'Activé/Sélectionné')
+        checkedValue = defaultVal(checkedValue,1); uncheckedValue = defaultVal(uncheckedValue,0)
+        props = pR;
+        props.items = [{code:checkedValue,label:checkedLabel},{code:uncheckedValue,label:uncheckedLabel}];
+        component = Fields.SelectField;
+    } else if(type == "date" || type =="time"){
+        component = type === 'date'? Fields.Date : Fields.Time;
+    }  else if(type == 'color' || type =='colorpicker') {
+        component = Fields.ColorPicker;
+    } else {
+        delete props.dbName;
+        delete props.tableName;
+        props.label = label; 
+        delete props.fieldName;
+    }
+    type = type || "text"
+    if(type =='select'){
+        props.multiple = true;
+    }
+    props.renderFilter = true;
+    if(type.contains("date") || type.contains("time")){
+        delete props.right;
+    }
+    delete props.width;
+    delete props.onAdd;
+    delete props.onAddProps;
+    return {Component:component,props,type};
+}

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

@@ -0,0 +1,15 @@
+import FormData from "./FormData";
+import Dialog from "./Dialog";
+import Provider from "./DialogProvider";
+
+FormData.Dialog = Dialog;
+
+export {Provider as DialogProvider};
+
+export {Dialog};
+
+export {FormData};
+
+export default FormData;
+
+FormData.DialogProvider = Provider;

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

@@ -0,0 +1,111 @@
+import {isNonNullString,isObj,defaultObj,isPromise,isFunction,defaultStr,isObjOrArray,defaultFunc} from "$utils";
+import notify from "$notify";
+import { getFormData } from "../utils/FormsManager";
+import {isMobileBrowser,isMobileNative} from "$cplatform";
+import { keyboardShortcuts as KeyboardShorts } from "../utils";
+
+export const keyboardShortcuts = {};
+Object.map(KeyboardShorts,(st,i)=>{
+    if(isObj(st) && isNonNullString(st.action)){
+        keyboardShortcuts[st.action] = i;
+    }
+});
+
+export const canHandleShurtCut = x=> !isMobileNative(true) && !isMobileBrowser() ? true : false;
+
+const canHandleS = canHandleShurtCut();
+export const getAppBarActionsProps = function(_props){
+    let {actions,formName,save,cancel,actionMutator,saveButton,saveButtonIcon,data,children,style,...props} = defaultObj(_props);
+    props = Object.assign({},props);
+    cancel = defaultFunc(cancel);
+    save = defaultFunc(save);
+    saveButton = isNonNullString(saveButton)? saveButton : Object.size(data,true) > 0 && (isNonNullString(data.code) || isNonNullString(data._id))? "Modifier":'Enregister';
+    saveButtonIcon = defaultStr(saveButtonIcon,'check')
+    if(typeof actions =='function'){
+        actions = actions(props);
+    }
+    if(actions === undefined){
+        actions = [{
+            formName,
+            text : saveButton,
+            icon : saveButtonIcon,
+            isAction: true,
+        }]
+    } else {
+        actions = (isObjOrArray(actions))?actions : [];
+    }
+    return {
+        ...props,
+        formName,
+        data,
+        actions,
+        actionMutator:({action,...rest})=>{
+            let  {isAction,canSave,shortcut,onPress,...a} = action;
+            action = defaultObj(a);
+            if(canHandleS && isNonNullString(shortcut) && isNonNullString(keyboardShortcuts[shortcut])){
+                action.tooltip = defaultStr(action.tooltip,action.title,action.text,action.label);
+                if(action.tooltip){
+                    action.tooltip +=" ("+keyboardShortcuts[shortcut]+")";
+                }
+            }
+            isAction = defaultBool(isAction,canSave,true);
+            action.formName = formName;
+            if(isAction) {
+                action.isFormAction = true;
+                /*
+                    en cas d'action de formulaire, si la fonction onPress retourne false, alors l'enregistrement du formulaire ne sera pas possible
+                    la fonction onPress du bouton d'action prend en premier paramètre les paramètres du formulaire, et en second, la fonction save permettant d'enregistrer le formulaire
+                    si cette fonction retourne false, alors la fonction save ne sera pas appelée.
+                */
+                action.onPress = (aArg) =>{
+                    const args = {...aArg,data:getFormData(formName),actionElt:action,actionKey:action.key};
+                    if(isFunction(onPress) && onPress(args,save) === false){
+                        return;
+                    }
+                    save(args)
+                }
+            } 
+            else {
+                delete action.handleChange;
+                action.onPress = (event) =>{
+                    if(isFunction(onPress) && onPress(event) === false) return;
+                    cancel(event);
+                }
+            }
+            return typeof actionMutator =='function'? actionMutator({...rest,action}):action;
+    }}
+}
+
+
+/**** permet d'exécuter la fonction before save passée en paramètre en fonction du résultat rétournée*/
+export const handleBeforeSaveCallback = (beforeSaveCallback,successCb,arg)=>{
+    let bF = typeof beforeSaveCallback =='function'?  beforeSaveCallback(arg) : undefined;
+    successCb = typeof successCb =='function'? successCb : x => x;
+    if(bF === false) return;
+    if(isPromise(bF)){
+        bF.then((result)=>{
+            if(result === false) return;
+            if(isNonNullString(result)){
+                notify.error(result);
+                return;
+            }
+            successCb(arg);
+        }).catch((e)=>{
+            console.log(e,' form-list-saving-data')
+            if(isNonNullString(e)){
+                notify.error(e);
+            } else if(e){
+                let ms = defaultStr(e.msg,e.message);
+                if(isNonNullString(ms)){
+                    notify.error(ms);
+                }
+            }
+        })
+        return arg;
+    } else if(isNonNullString(bF)){
+        notify.error(bF);
+        return;
+    } 
+    successCb(arg);
+    return bF;
+} 

package/src/components/Form/KeyboardAvoidingView.js

@@ -0,0 +1,23 @@
+import {isIos} from "$cplatform";
+import {KeyboardAvoidingView,StyleSheet} from 'react-native';
+
+export default function KeyboardAvoidingViewComponent({ children,...rest }){
+    return isIos() ? (
+      <KeyboardAvoidingView
+        style={styles.wrapper}
+        behavior="padding"
+        keyboardVerticalOffset={80}
+        {...rest}
+      >
+        {children}
+      </KeyboardAvoidingView>
+    ) : (
+      <>{children}</>
+    );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+  },
+});

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

@@ -0,0 +1,115 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { findMatchedKey} from './keyEvents';
+import View from "$ecomponents/View";
+import {isWeb} from "$cplatform";
+
+let exclusiveHandlers = [];
+
+export default class KeyboardEventHandler extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.registerExclusiveHandler = this.registerExclusiveHandler.bind(this);
+    this.deregisterExclusiveHandler = this.deregisterExclusiveHandler.bind(this);
+    this.childRef = React.createRef(null);
+    Object.defineProperties(this,{
+      events : {
+        value : {
+          onKeyEvent : this.handleKeyboardEvent.bind(this),
+        }
+      }
+    })
+  }
+  isFilter(){
+    return this.props.isFilter;
+  }
+
+  componentDidUpdate(prevProps) {
+    const { isExclusive, isDisabled } = prevProps;
+    const hasChanged = this.props.isExclusive !== isExclusive ||
+      this.props.isDisabled !== isDisabled;
+
+    if (hasChanged) {
+      if (this.props.isExclusive && !this.props.isDisabled) {
+        this.registerExclusiveHandler();
+      } else {
+        this.deregisterExclusiveHandler();
+      }
+    }
+  }
+
+  registerExclusiveHandler() {
+    this.deregisterExclusiveHandler();
+    exclusiveHandlers.unshift(this);
+  }
+
+  deregisterExclusiveHandler() {
+    if (exclusiveHandlers.includes(this)) {
+      exclusiveHandlers = exclusiveHandlers.filter(h => h !== this);
+    }
+  }
+
+  handleKeyboardEvent(event) {
+    const {
+      isDisabled,disabled,readOnly, handleKeys, onKeyEvent, handleEventType, children, handleFocusableElements,
+    } = this.props;
+    if (isDisabled || disabled || readOnly) {
+      return false;
+    }
+    const isEventTypeMatched = !handleEventType?true :  handleEventType === event.type;
+    if (!isEventTypeMatched) {
+      return false;
+    }
+    const isEligibleEvent = event.target === isWeb() && typeof document !=='undefined' && document.body ? document.body : handleFocusableElements;
+    const isChildrenEvent = this.childRef.current && typeof this.childRef.current.contains =='function' && this.childRef.current.contains(event.target);
+    const isValidSource = children ? isChildrenEvent : isEligibleEvent;
+    if (!isValidSource) {
+      return false;
+    }
+    const matchedKey = findMatchedKey(event, handleKeys);
+    if (matchedKey) {
+      event.formFieldName = this.props.formFieldName;
+      event.testID = this.props.testID;
+      onKeyEvent(matchedKey, event);
+      return true;
+    }
+
+    return false;
+  }
+
+  render() {
+    let { children,isFilter,innerRef,handleKeys,isDisabled,disabled, readOnly,onKeyEvent,handleEventType,handleFocusableElements,...rest} = this.props;
+    rest = Object.assign({},rest);
+    const events = isDisabled || disabled || readOnly || isFilter ? {} : {
+      //onKeyDown : this.events.onKeyEvent,
+      //onKeyUp : this.events.onKeyEvent,
+      onKeyPress : this.events.onKeyEvent,
+    }
+    if(typeof children =='function'){
+      children = children(events);
+    }
+    if(!React.isValidElement(children)) return null;
+    return <View {...rest} ref={React.mergeRefs(this.childRef,innerRef)}>
+      {children}
+    </View>
+  }
+}
+
+KeyboardEventHandler.propTypes = {
+  handleKeys: PropTypes.array,
+  handleEventType: PropTypes.oneOf(['keydown', 'keyup', 'keypress']),
+  handleFocusableElements: PropTypes.bool,
+  onKeyEvent: PropTypes.func,
+  isDisabled: PropTypes.bool,
+  isExclusive: PropTypes.bool,
+  children: PropTypes.any,
+};
+
+KeyboardEventHandler.defaultProps = {
+  handleKeys: [],
+  handleFocusableElements: false,
+  //handleEventType: 'keypress',
+  handleEventType: undefined,
+  onKeyEvent: () => null,
+};

package/src/components/Form/KeyboardEventHandler/keyEvents.js

@@ -0,0 +1,139 @@
+const commonKeys = {
+    backspace: [8],
+    del: [46],
+    delete: [46],
+    ins: [45],
+    insert: [45],
+    tab: [9],
+    enter: [13],
+    return: [13],
+    esc: [27],
+    space: [32],
+    pageup: [33],
+    pagedown: [34],
+    end: [35],
+    home: [36],
+    left: [37],
+    up: [38],
+    right: [39],
+    down: [40],
+    shift: [16],
+    ctrl: [17],
+    alt: [18],
+    cap: [20],
+    num: [144],
+    clear: [12],
+    meta: [91],
+    ';': [186, 59],
+    '=': [187, 61],
+    ',': [188, 44],
+    '-': [189, 45, 173, 109],
+    'minus': [189, 45, 173, 109],
+    '.': [190, 110],
+    '/': [191, 111],
+    '`': [192],
+    '[': [219],
+    '\\': [220],
+    ']': [221],
+    '*': [106],
+    '+': [107],
+    'plus': [107],
+    '\'': [222],
+    'quote': [222],
+  };
+  
+  const commonKeysInUpperCases = Object.keys(commonKeys)
+    .reduce((accumulator, current) =>
+      Object.assign(accumulator, { [current.toUpperCase()]: commonKeys[current] }), {});
+  
+  
+  const numberKeys = '0123456789'.split('')
+    .reduce((accumulator, current, index) =>
+      Object.assign(accumulator, { [current]: [index + 48, index + 96] }), {});
+  
+  
+  const letterKeys = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
+    .reduce((accumulator, current, index) =>
+      Object.assign(
+        accumulator,
+        { [current.toLowerCase()]: [index + 65] },
+        { [current]: [index + 65] }), {});
+  
+  const fnKeys = '1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19'.split(',')
+    .reduce((accumulator, current, index) =>
+      Object.assign(accumulator, { [`f${current}`]: [index + 112] }), {});
+  
+  
+  const modifierKeys = {
+    control: 'ctrl',
+    ctrl: 'ctrl',
+    shift: 'shift',
+    meta: 'meta',
+    cmd: 'meta',
+    command: 'meta',
+    option: 'alt',
+    alt: 'alt',
+  };
+  
+  export const AllKeys = Object.assign({}, commonKeys, commonKeysInUpperCases, numberKeys, letterKeys, fnKeys);
+  const alphanumericKeys = Object.assign({}, numberKeys, letterKeys);
+  
+  const aliasKeys = {
+    all: Object.keys(AllKeys),
+    alphanumeric: Object.keys(alphanumericKeys),
+    numeric: Object.keys(numberKeys),
+    alphabetic: Object.keys(letterKeys),
+    function: Object.keys(fnKeys),
+  };
+  
+  export function matchKeyEvent(event, keyName) {
+    const eventKeyCode = event.which || event.keyCode;
+    const eventType = event.type;
+    const eventModifiers = Object.keys(modifierKeys).filter(modKey => event[`${modKey}Key`]).sort();
+    const cleanKeyName = keyName.toLowerCase().trim();
+    const keyNameParts = cleanKeyName === '+' ? ['+'] : cleanKeyName.split(/\s?\+\s?/); // e.g. 'crtl + a'
+    const mainKeyName = keyNameParts.pop();
+    const mainKeyCode = AllKeys[mainKeyName];
+    const modifierKeyNames = keyNameParts;
+  
+    if (eventType === 'keypress') {
+      const eventKeyCodeString = String.fromCharCode(eventKeyCode);
+      return keyName == eventKeyCodeString.toLowerCase();
+    }
+    
+    if (mainKeyCode && modifierKeyNames.length === 0 && eventModifiers.length === 0) {
+      return mainKeyCode.indexOf(eventKeyCode) >= 0;
+    }
+  
+    if (mainKeyCode && modifierKeyNames.length > 0 && eventModifiers.length > 0) {
+      const modifiers = modifierKeyNames.map(modKey => modifierKeys[modKey]).sort();
+      const modifiersMatched = modifiers.length === eventModifiers.length &&
+        modifiers.every((modKey, index) => eventModifiers[index] === modKey);
+  
+      return mainKeyCode.indexOf(eventKeyCode) >= 0 && modifiersMatched;
+    }
+  
+    if (modifierKeyNames.length == 0 && eventModifiers.length === 1) {
+      return mainKeyName === eventModifiers[0];
+    }
+  
+    return false;
+  }
+  
+  export function findMatchedKey(event, keys) {
+    const lookupAlias = (k) => {
+      const lowerK = k.toLowerCase();
+      const found = aliasKeys[lowerK];
+      return found ? found : [k];
+    };
+  
+    const expandedKeys = keys.map(lookupAlias).reduce((a, b) => a.concat(b), []);
+  
+    let matchedKey = expandedKeys.find(k => matchKeyEvent(event, k));
+  
+    if (!matchedKey && keys.includes('all')) {
+      matchedKey = 'other';
+    }
+  
+    return matchedKey;
+}

package/src/components/Form/KeyboardEventHandler/readMe.md

@@ -0,0 +1 @@
+for web usage @see : https://github.com/linsight/react-keyboard-event-handler