@fto-consult/expo-ui 6.24.2 → 6.25.0

package/src/components/Datagrid/Accordion/index.js

@@ -27,6 +27,7 @@ import {getRowStyle,styles as rStyles} from "../utils";
 import Avatar from "$ecomponents/Avatar";
 import {defaultObj,isOb,isNonNullString} from "$cutils";
 import PropTypes from "prop-types";
+import DatagridProvider from "../hooks/Provider";
 
 const DatagridFactory = (Factory)=>{
     Factory = Factory || CommonDatagrid;
@@ -44,7 +45,6 @@ const DatagridFactory = (Factory)=>{
                 },
             });
             this.state.refreshing = false;
-            //this.state.isReady = !this.bindResizeEvents();
             this.updateLayout = this.updateLayout.bind(this);
         }
         isDatagrid(){
@@ -67,7 +67,7 @@ const DatagridFactory = (Factory)=>{
             const {render,key,style} = super.renderRowCell(arg);
             if(render===null || !React.isValidElement(render)) return null;
             return <Label style={[style,{paddingTop:10,paddingBottom:10}]} key={key}>
-                    {render}
+                 {render}
             </Label>
         }
         rangeChanged(state){
@@ -95,19 +95,17 @@ const DatagridFactory = (Factory)=>{
             return {...this.getActionsArgs(),valueFormatter:formatValue,formatValue,abreviateValues:this.state.abreviateValues,row:item,items:this.state.data,item,rowData:item,index,rowIndex:index,rowCounterIndex:rowIndexCount,rowIndexCount};
         }
         getRenderingItemProps ({item,rowKey,numColumns,index}){
-            const rKey = rowKey;
             this.renderingItemsProps = isObj(this.renderingItemsProps)? this.renderingItemsProps : {};
             const wrapperStyle = getRowStyle({row:item,index,numColumns,isAccordion:true,rowIndex:index});
-            if(isObj(this.renderingItemsProps) && isObj(this.renderingItemsProps[rKey]) && this.renderingItemsProps[rKey].title){
-                const it = this.renderingItemsProps[rKey];
-                it.numColumns = numColumns;
+            if(this.renderingItemsProps[rowKey]){
+                const it = this.renderingItemsProps[rowKey];
                 it.wrapperStyle = wrapperStyle;
                 return it;
             }
             const callArgs = this.getItemCallArgs({item,index});
             const accordion = this.props.accordion;
             const accordionProps = defaultObj(this.props.accordionProps);
-            const testID = "RN_DatagridAccordionRow_"+rKey;
+            const testID = "RN_DatagridAccordionRow_"+rowKey;
             let renderedContent = isFunction(accordion) ? accordion(callArgs) : isFunction(accordionProps.accordion) ? accordionProps.accordion(callArgs) : isObj(accordion) && accordion ? accordion : isObj(accordionProps.accordion) ? accordionProps.accordion : undefined;;
             let title = null, avatarContent = null,right = null,rightProps={},description = null,rowProps = {},avatarProps = {};
             let descriptionProps = Object.assign({},this.accordionDescriptionProps)
@@ -131,7 +129,6 @@ const DatagridFactory = (Factory)=>{
                 } else if(isObj(renderedContent.contentProps)){
                     descriptionProps = {...descriptionProps,...renderedContent.contentProps,style:[descriptionProps.style,renderedContent.contentProps.style]}
                 }
-                //
                 rowProps = defaultObj(renderedContent.rowProps);
                 avatarProps.color = color;
                 if(typeof avatarContent =='function'){
@@ -170,16 +167,15 @@ const DatagridFactory = (Factory)=>{
             } else if(!React.isValidElement(title)){
                 title = null;
             }
-            this.renderingItemsProps[rKey] = {
+            this.renderingItemsProps[rowKey] = {
                 testID,
-                numColumns,
                 wrapperStyle,title,right,rightProps,description,avatarContent,rowProps,avatarProps,
                 bottomSheetTitlePrefix : defaultStr(renderedContent?.bottomSheetTitlePrefix,accordionProps.bottomSheetTitlePrefix,accordion?.bottomSheetTitlePrefix)
             }
-            return this.renderingItemsProps[rKey];
+            return this.renderingItemsProps[rowKey];
         }
         renderItem(args){
-            const {index,numColumns,item,isSectionListHeader,isScrolling:_isScrolling,style,setSize} = args;
+            const {index,numColumns,item,isSectionListHeader,isScrolling:_isScrolling,style} = args;
             args.isAccordion = true;
             if(isSectionListHeader || item.isSectionListHeader){
                 const rowStyle = style ? [style] : [];
@@ -194,18 +190,19 @@ const DatagridFactory = (Factory)=>{
                 </View>;
             }
             if(!(item) || typeof item !== 'object') return null;
-            const rowKey = this.getRowKey(item,index);
+            const canHandleRow = typeof this.props.filter =='function' ? this.props.filter(this.getItemCallArgs({item,index})) : true;
+            if(canHandleRow === false || canHandleRow === null) return null;
+            const rowKey = this.getRowKeyByIndex(index);
             return <DatagridAccordionRow 
                 item = {item}
                 index = {index}
-                context = {this}
                 rowKey = {rowKey}
-                isScrolling = {defaultBool(this.isScrolling(),_isScrolling)}
                 selectable = {this.props.selectable}
-                isRowSelected = {this.isRowSelected.bind(this)}
                 {...defaultObj(this.props.accordionProps)}
+                accordion = {this.props.accordion}
+                numColumns = {numColumns}
                 {...this.getRenderingItemProps({item,numColumns,index,rowKey})}
-                key = {rowKey}
+                key = {index}
                 ref = {(el)=>{
                     if(isObj(this.renderingItemsProps) && isObj(this.renderingItemsProps[rowKey]) ){
                         this.renderingItemsProps[rowKey].ref = el;
@@ -253,6 +250,7 @@ const DatagridFactory = (Factory)=>{
             return null;
         }
         getItem(index){
+            return this.getRowByIndex(index);
             if(typeof index !=='number') return null;
             return isObj(this.state.data[index])? this.state.data[index] : null;
         }
@@ -507,16 +505,13 @@ const DatagridFactory = (Factory)=>{
                     </View>
             </ScrollView>
         </View>  
-        return <View testID={testID+"_Container"} pointerEvents={pointerEvents} style={[styles.container]} collapsable={false}>
-                { <View testID={testID+"_ContentContainer"}> 
-                    <View testID={testID+"_AccordionHeader"} style={[styles.accordionHeader]} ref={this.layoutRef} onLayout={this.updateLayout.bind(this)}>
+        return <DatagridProvider context={this}>
+                <View testID={testID+"_Container"} pointerEvents={pointerEvents} style={[styles.container,this.props.style]} collapsable={false}>
+                     <View testID={testID+"_AccordionHeader"} style={[styles.accordionHeader]} ref={this.layoutRef} onLayout={this.updateLayout.bind(this)}>
                         {this.props.showActions !== false ? <DatagridActions 
                             testID={testID+"_Actions"}
                             pointerEvents = {pointerEvents}
                             title = {this.renderDataSourceSelector()}
-                            context = {this}
-                            selectedRows = {Object.assign({},this.selectedRows)}
-                            selectedRowsActions = {this.renderSelectedRowsActions.bind(this)}
                             actions = {actions}
                         /> : null}
                         {datagridHeader}
@@ -545,9 +540,9 @@ const DatagridFactory = (Factory)=>{
                     </View>
                     {hasData && !canRenderChart ? <List
                         estimatedItemSize = {150}
-                        prepareItems = {false}
                         {...rest}
                         {...accordionProps}
+                        prepareItems = {false}
                         onRender = {this.onRender.bind(this)}
                         testID = {testID}
                         extraData = {this.state.refresh}
@@ -569,18 +564,17 @@ const DatagridFactory = (Factory)=>{
                     </View> :  <View onRender = {this.onRender.bind(this)} style={styles.hasNotData}>
                         {this.renderEmpty()}
                     </View>}
-                </View>}
-                {!canRenderChart && backToTopRef ? <BackToTop testID={testID+"_BackToTop"} {...backToTopProps} ref={this.backToTopRef} style={[styles.backToTop,backToTopProps.style]} onPress={this.scrollToTop.bind(this)}/>:null}
-                <BottomSheet
-                    testID = {testID+"_BottomSheet"}
-                    renderMenuContent = {false}
-                    ref = {(el)=>{
-                        this.bottomSheetContext = el;
-                    }}
-                />
-            </View>
+                    {!canRenderChart && backToTopRef ? <BackToTop testID={testID+"_BackToTop"} {...backToTopProps} ref={this.backToTopRef} style={[styles.backToTop,backToTopProps.style]} onPress={this.scrollToTop.bind(this)}/>:null}
+                    <BottomSheet
+                        testID = {testID+"_BottomSheet"}
+                        renderMenuContent = {false}
+                        ref = {(el)=>{
+                            this.bottomSheetContext = el;
+                        }}
+                    />
+                </View>
+            </DatagridProvider>
         }
-        
     }
     clx.propTypes = {
         ...Factory.propTypes,
@@ -619,6 +613,7 @@ const styles = StyleSheet.create({
         flexDirection :'column',
         justifyContent : 'flex-start',
         width : '100%',
+        flex : 1,
         paddingHorizontal : isNativeMobile()? 5:1,
     },
     accordionHeader : {

package/src/components/Datagrid/Actions/index.js

@@ -10,35 +10,13 @@ import Button from "$ecomponents/Button";
 import { StyleSheet } from "react-native";
 import Label from "$ecomponents/Label";
 import { useWindowDimensions } from "react-native";
-
-export default function DatagridActions (_props){
-  let {actions,actionProps,selectedRowsActions,bindResizeEvent,context,selectedRows:_selectedRows,...props} = _props;
-  props = defaultObj(props);
-  context = defaultObj(context);
-  const [state,setState] = React.useState({
-    selectedRows : defaultObj(_selectedRows),
-  });
-  const selectedRowsCallBackRef = React.useRef(null);
-  const setSelectedRows = (selectedRows,cb)=>{
-    if(isObj(selectedRows)){
-      selectedRowsCallBackRef.current = cb;
-      setState({...state,selectedRows:Object.assign({},selectedRows)})
-    }
-  }
-  const dimensions = bindResizeEvent !== false ? useWindowDimensions() : {};
-  React.useEffect(()=>{
-    setSelectedRows(_selectedRows,null);
-  },[_selectedRows]);
-  const selectedRows = state.selectedRows;
-  React.useEffect(()=>{
-    if(typeof selectedRowsCallBackRef.current =='function'){
-      selectedRowsCallBackRef.current({});
-    }
-    selectedRowsCallBackRef.current = null;
-  },[selectedRows]);
-  let sCounts = Object.size(selectedRows);
-  const selected = sCounts > 0 ? true : false;
-  actions = selected ? selectedRowsActions : actions;
+import {useDatagrid,useGetSelectedRowsCount} from "../hooks";
+export default function DatagridActions ({actions,actionProps,...props}){
+  const {context} = useDatagrid();
+  const selectedRowsCount = useGetSelectedRowsCount();
+  useWindowDimensions();
+  const selected = !!selectedRowsCount;
+  actions = selected ? context?.renderSelectedRowsActions.call(context,actions) : actions;
   if(selected){
     actionProps = Object.assign({},actionProps);
     actionProps.style = Object.assign({},StyleSheet.flatten(actionProps.style));
@@ -51,18 +29,17 @@ export default function DatagridActions (_props){
       if(!sArg || typeof sArg !=='object'){
         sArg = {};
       }
-      sArg.selectedRows = selectedRows;
-      sArg.size = sArg.selectedRowsCount = sCounts;
+      sArg.selectedRows = context.getSelectedRows();
+      sArg.size = sArg.selectedRowsCount = selectedRowsCount;
       sArg.context = context;
       actions = actions.call(context,sArg);
   }
   const splitedActions = isObjOrArray(actions)? splitActions({...props,...sArg,actionProps,actions,isAppBarAction:false,alwaysSplitOnMobile:true}) : undefined;
   let contextualTitle = "";
-  if(sCounts > 0){
-    let sLetter = (sCounts>1?'s':'');
-    contextualTitle = (sCounts<10?'0':'')+sCounts+(' ligne'+sLetter+' sélectionnée'+sLetter),1;
+  if(selectedRowsCount > 0){
+    let sLetter = (selectedRowsCount>1?'s':'');
+    contextualTitle = (selectedRowsCount<10?'0':'')+selectedRowsCount+(' ligne'+sLetter+' sélectionnée'+sLetter),1;
   }
-  context.datagridActionsContext = {setSelectedRows};
   const children = renderSplitedActions(splitedActions,{
       anchor : (props)=>{
         return <Button
@@ -75,10 +52,6 @@ export default function DatagridActions (_props){
         />
       }
   });
-  ///la fonction updateDatagridActions est définies dans les actions du datagrid
-  context.updateDatagridActions = ()=>{
-      return setSelectedRows({...selectedRows});
-  }
   return <Header
         {...props}
         title = {contextualTitle}
@@ -95,9 +68,4 @@ DatagridActions.propTypes = {
   /*** le tire du menu contextuel */
   title : PropTypes.node,
   visible: PropTypes.bool,
-  selectedRowsActions : PropTypes.oneOfType([
-    PropTypes.func, PropTypes.object, PropTypes.array,
-  ]),
-  bindResizeEvent : PropTypes.bool,
-  context : PropTypes.object.isRequired,///le context d'exécution du datagridAction
 };

package/src/components/Datagrid/Checkbox.js

@@ -3,19 +3,16 @@ import React from "$react";
 import {defaultObj,isObj} from "$cutils";
 import PropTypes from "prop-types";
 import theme from "$theme";
+import {useDatagrid,useIsRowSelected,useIsAllRowsSelected} from "./hooks";
 
 const DatagridCheckboxComponent = React.forwardRef((props,ref)=>{
-    const {onChange,rowKey,rowData,row,rowIndex,index,rowsRefs,...rest} = props;
+    const {onChange,rowKey,rowData,row,rowIndex,index,toggleAll,...rest} = props;
+    const checked = toggleAll ? useIsAllRowsSelected() : useIsRowSelected(rowKey);
     return <Checkbox
         secondaryOnCheck
         {...rest}
+        checked = {checked}
         style = {[rest.style,theme.styles.alignItemsCenter]}
-        ref = {(el)=>{
-            React.setRef(ref,el);
-            if(isObj(rowsRefs) && rowKey){
-                rowsRefs[rowKey] = el;
-            }
-        }}
         onChange = {(o)=>{
             if(onChange){
                 onChange({...o,row,rowKey,rowData,rowIndex:typeof rowIndex ==='number' ? rowIndex : typeof index =='number'? index : undefined})