@fto-consult/expo-ui 2.0.14 → 2.1.0

package/package.json

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

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

@@ -17,7 +17,6 @@ let windowWidth = Dimensions.get("window").width;
 const FiltersAccordionComponent = React.forwardRef((props,ref)=>{
     const {filters,isLoading,filteredColumns,children,filterTitle:customFilterTitle,visible:customVisible,orOperator,andOperator,onToggleFilters,context:customContext,...restProps} = props;
     const context = defaultObj(customContext);
-    const filtersValuesRef = React.useRef({});
     const [state,setState] = React.useState({
         visible : defaultBool(customVisible,false),
         visibleColumns : defaultObj(filteredColumns),
@@ -55,8 +54,7 @@ const FiltersAccordionComponent = React.forwardRef((props,ref)=>{
                     }}
                 />)
                 if(!visible) return;
-                const fOp = defaultObj(filtersValuesRef.current[key]);
-                let defVal = isObj(filtersValuesRef.current[key]) ? filtersValuesRef.current[key].defaultValue : "";
+                let defVal = filter.defaultValue;
                 if(typeof defVal !== 'string' && typeof defVal !=='boolean'){
                     if(Array.isArray(defVal)){
                         defVal = "["+defVal.join(",")+"]";
@@ -69,13 +67,11 @@ const FiltersAccordionComponent = React.forwardRef((props,ref)=>{
                 mainFilterTitle +=(content.length?",":"")+"\n"+defaultStr(filter.label,filter.text,filter.field)+" : "+defVal+""
                 content.push(<Filter
                         {...filter}
-                        {...fOp}
                         dynamicRendered
                         isLoading = {isLoading && filteredRef.current[key] ? true : false}
                         orOperator = {defaultBool(orOperator,filter.orOperator,true)}
                         andOperator = {defaultBool(andOperator,filter.andOperator,true)}
                         onChange = {(arg)=>{
-                            filtersValuesRef.current[key] = getFilterStateValues(arg);
                             const canHandle = canHandleFilter(arg);
                             if(filteredRef.current[key] !== canHandle){
                                 if(canHandle){
@@ -90,7 +86,6 @@ const FiltersAccordionComponent = React.forwardRef((props,ref)=>{
                             }
                         }}
                         withBottomSheet
-                        //style = {[styles.filter,filter.style]}
                         containerProps = {{...containerProps}}
                         inputProps = {{containerProps}}
                     />)

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

@@ -245,7 +245,7 @@ const DatagridFactory = (Factory)=>{
         getMaxSelectedRows(){
             return isMobileMedia()? 30 : 50;
         }
-        renderFilter(props,headerFilters){
+        prepareFilter(props,headerFilters){
             return headerFilters.push(props);
         }
         showFilters(){

package/src/components/Datagrid/Common/Common.js

@@ -31,6 +31,7 @@ import copyToClipboard from "$capp/clipboard";
 import { Pressable } from "react-native";
 import TableLink from "$TableLink";
 import appConfig from "$capp/config";
+import stableHash from "stable-hash"
 
 export const arrayValueSeparator = ", ";
 
@@ -115,10 +116,10 @@ export default class CommonDatagridComponent extends AppComponent {
             if(isPlainObject(f)){
                 this.filters[v] = f;
                 this.filters[v].field = defaultStr(f.field,v);
-                this.filters[v].originalValue = defaultVal(this.filters[v].originalValue,f.defaultValue,f.value)
+                this.filters[v].originValue = defaultVal(this.filters[v].originValue,f.defaultValue,f.value)
             } else {
                 this.filters[v] = {
-                    originalValue : f,
+                    originValue : f,
                     field : v
                 }
             }
@@ -845,7 +846,9 @@ export default class CommonDatagridComponent extends AppComponent {
             if(removeFocus) document.body.click();
         });
    }
+   prepareFilter(props,filteredColumns){
 
+   }
    renderFilter(props){
        return <Filter {...props}/>
    }
@@ -884,7 +887,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 width,
                 ...restCol
             } = header;
-            restCol = defaultObj(restCol);
+            restCol = Object.clone(defaultObj(restCol));
             let colFilter = defaultVal(restCol.filter,true);
             field = header.field = defaultStr(header.field,field,headerIndex);
             delete restCol.filter;
@@ -899,7 +902,7 @@ export default class CommonDatagridComponent extends AppComponent {
             }
             totalWidths +=width;
             widths[header.field] = width;
-            let colProps = {id,key}
+            const colProps = {id,key}
             colProps.key = isNonNullString(key)?key : (header.field||("datagrid-column-header-"+headerIndex))
             colProps.style = Object.assign({},StyleSheet.flatten(restCol.style));
             if(!visible){
@@ -937,7 +940,7 @@ export default class CommonDatagridComponent extends AppComponent {
             const sortedProps =  isColumnSorted ? {...sortedColumn} : {};
             let filterProps = {};
             if(colFilter){
-                let fCol = {...defaultObj(this.filters[header.field])}
+                const fCol = defaultObj(this.filters[header.field]);
                 this.filters[header.field] = fCol;
                 delete restCol.sortable;
                 filterProps = {
@@ -948,14 +951,14 @@ export default class CommonDatagridComponent extends AppComponent {
                     andOperator : filterAndOperator,
                     searchIconTooltip : 'Filtre',
                     searchIcon : 'filter_list',  
-                    defaultValue : fCol.originalValue,
+                    defaultValue : fCol.originValue,
                     name : header.field,
                     onClearFilter : this.onClearFilter.bind(this),
                     onChange : this.onFilterChange.bind(this),
                     operator : fCol.operator,
                     action : defaultStr(fCol.originAction,fCol.action),
                 };
-                this.renderFilter(filterProps,headerFilters); 
+                this.prepareFilter(filterProps,headerFilters); 
             }
             this.prepareColumn({
                 visible,
@@ -1129,7 +1132,7 @@ export default class CommonDatagridComponent extends AppComponent {
             if(!isObj(f)) return;
             defValue = undefined;
             if(f.type =="select") defValue = [];
-            filters[i] = {...f,value:defValue,defaultValue:defValue,originalValue:defValue}
+            filters[i] = {...f,value:defValue,defaultValue:defValue,originValue:defValue}
         })
         this.filters = filters;
         this.refresh(true);
@@ -1155,7 +1158,7 @@ export default class CommonDatagridComponent extends AppComponent {
         field = defaultStr(field,name);
         if(field){
             let v = defaultStr(type).toLowerCase() == "select"? []:undefined
-            this.filters[field] = {value:v,defaultValue:v,originalValue:v,originValue:v}
+            this.filters[field] = {value:v,defaultValue:v,originValue:v,originValue:v}
             this.doFilter({value:v,field,force:true})
         }
     }
@@ -1165,11 +1168,20 @@ export default class CommonDatagridComponent extends AppComponent {
     }
     onFilterChange(arg){
         this.filteredValues = defaultObj(this.filteredValues);
-        let {field,operator,action,value} = defaultObj(arg);        
+        let {field,operator,originAction,action,value} = defaultObj(arg);     
+        const filters = this.preparedColumns.filters;   
         if(isNonNullString(field) && isNonNullString(operator) && isNonNullString(action)){
             this.filteredValues[field] = {
                 operator,action,value,field
             }
+            Object.map(filters,(filter)=>{
+                if(isObj(filter) && filter.field == field){
+                    filter.originValue = filter.defaultValue = arg.defaultValue;
+                    filter.operator = operator;
+                    filter.action = defaultStr(originAction,action);
+                }
+            });
+            
         }
         return this.doFilter(arg);
     }
@@ -1369,8 +1381,11 @@ export default class CommonDatagridComponent extends AppComponent {
             }
         },isObj(p) && typeof p.force ==='boolean'?p.force : !this.state.isReady)
     }
+    isTableData(){
+        return false;
+    }
     UNSAFE_componentWillReceiveProps(nextProps){
-        if('data' in nextProps && isObjOrArray(nextProps.data)){
+        if(!this.isTableData() && 'data' in nextProps && isObjOrArray(nextProps.data) && nextProps.data != this.state.data && (stableHash(nextProps.data) != stableHash(this.state.data))){
             this.prepareData({data:nextProps.data,force:true},(state)=>{
                 this.setState(state)
             });

package/src/components/Datagrid/Common/TableData.js

@@ -2,6 +2,7 @@ import CommonDatagrid from "./Common";
 import {defaultObj,extendObj,defaultStr,isNonNullString,isFunction,isPromise} from "$utils";
 import actions from "$actions";
 import PropTypes from "prop-types";
+import stableHash from "stable-hash";
 
 export default class CommonTableDatagrid extends CommonDatagrid{
     constructor(props){
@@ -13,12 +14,12 @@ export default class CommonTableDatagrid extends CommonDatagrid{
         } = props;
         dataSource = CommonDatagrid.getDataSource({...props,dataSource,context:this});
         tableName = defaultStr(tableName,table).toUpperCase();
+        this.prepareFetchData();
         if(tableName){
             Object.defineProperties(this,{
                 tableName : {value:tableName,override:false,writable:false}
             })
         }
-        this.INITIAL_STATE.fetchData = defaultVal(this.props.fetchData);
         let isPv = this.isPivotDatagrid();
         if(isPv){
             isPv = this.props.dbSelector !== false;
@@ -34,7 +35,9 @@ export default class CommonTableDatagrid extends CommonDatagrid{
         }
         this.state.isLoading = true;
     }
-
+    prepareFetchData(fetchData){
+        this.INITIAL_STATE.fetchData = defaultVal(fetchData,this.props.fetchData);
+    }
     /*** lorsque la données est modifiée */
     onUpsertData =(arg) =>{
         if(!this._isMounted()) return;
@@ -57,7 +60,9 @@ export default class CommonTableDatagrid extends CommonDatagrid{
         this.clearEvents();
         this.setSelectedRows();
     }
-
+    isTableData(){
+        return true;
+    }
     onChangeDataSources(args){
         let {dataSources,server} = args;
         this.currentDataSources = dataSources;

package/src/components/Filter/index.js

@@ -170,7 +170,7 @@ export default class Filter extends AppComponent {
       if(!isObjOrArray(value) && (isNullOrEmpty(value,true) || value ==='undefined') ){
           value = undefined;
       }
-      let originalValue = value;
+      let originValue = value;
       const type = defaultStr(this.props.type).toLowerCase().trim();
       value = parseDecimal(value,type);
       if(action =="$today"){
@@ -215,7 +215,7 @@ export default class Filter extends AppComponent {
                 }
              }
           }
-          this.props.onChange({...this.getStateValues(),value,originValue:originalValue,originalValue,field:this.props.field,action,operator,selector,originAction,context:this});
+          this.props.onChange({...this.getStateValues(),value,originValue:originValue,originValue,field:this.props.field,action,operator,selector,originAction,context:this});
       }
   }
   componentDidUpdate (){

package/src/components/Filter/utils.js

@@ -164,6 +164,10 @@ export const matchPouchDBOperator = (operator,value)=>{
           return {operator:"$lt",value}
         case "LTE":
           return {operator:"$lte",value}
+        case "IN":
+            return {operator:"$in",value}
+        case "NOT IN":
+            return {operator:"$in",value}
     }
   }
 
@@ -486,6 +490,7 @@ const operatorsMap = {
     $gte: '>=',
     $ne: '!=',
     $in: 'IN',
+    $nin : 'NOT IN',
     $eq: '=',
     $regex : "LIKE"
   }

package/src/components/TableLink/index.js

@@ -13,9 +13,9 @@ import {styles as _styles} from "$theme";
 import Tooltip from "$ecomponents/Tooltip";
 
 const TableLinKComponent = React.forwardRef((props,ref)=>{
-    let {disabled,labelProps,server,containerProps,id,columnDef,tableName,data,testID,Component,routeName,routeParams,component,primary,triggerProps,onPress,children, ...rest} = props;
+    let {disabled,labelProps,server,containerProps,id,columnDef,tableName,table:customTable,data,testID,Component,routeName,routeParams,component,primary,triggerProps,onPress,children, ...rest} = props;
     testID = defaultStr(testID,"RN_TableDataLinkContainer")
-    tableName = defaultStr(tableName).trim();
+    tableName = defaultStr(tableName,customTable).trim();
     rest = defaultObj(rest);
     containerProps = defaultObj(containerProps)
     labelProps = defaultObj(labelProps);