@fto-consult/expo-ui 6.24.2 → 6.25.0

package/src/components/Table/{Row.js → Header/Component.native.js}

@@ -4,10 +4,10 @@
 import React from "$react";
 import { View } from "react-native";
 import PropTypes from "prop-types";
-export default function TableRowComponent({cells,columns,...rest}){
+export default function TableHeaderComponent({cells,columns,...rest}){
     const children = React.useMemo(()=>{
         if(Array.isArray(cells)){
-            return cells.map((cell,index)=>columns[index]? <React.Fragment key={index}>{cell}</React.Fragment> : null )
+            return null;
         }
         return cells;
     },[cells,columns]);
@@ -16,6 +16,6 @@ export default function TableRowComponent({cells,columns,...rest}){
     </View>
 }
 
-TableRowComponent.propTypes = {
+TableHeaderComponent.propTypes = {
     columns : PropTypes.arrayOf(PropTypes.bool)
 }

package/src/components/Table/Header/index.js

@@ -0,0 +1,12 @@
+// Copyright 2023 @fto-consult/Boris Fouomene. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+import Cell from "./Cell";
+import RowHeaderComponent from "./Header";
+
+export {Cell};
+
+RowHeaderComponent.Cell = Cell;
+
+export default RowHeaderComponent;

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

@@ -12,4 +12,6 @@ const AutoSizeVerticalList = React.forwardRef(({testID,autoSizerProps,...props},
 })
 
 AutoSizeVerticalList.displayName = "AutoSizeVerticalListComponent";
-export default AutoSizeVerticalList;
+export default AutoSizeVerticalList;
+
+export * from "$ecomponents/List/Virtuoso";

package/src/components/Table/List/index.native.js

@@ -1 +1,2 @@
-export {default} from "$ecomponents/List/FlashList";
+export {default} from "$ecomponents/List/Virtuoso";
+export * from "$ecomponents/List/Virtuoso";

package/src/components/Table/Row/Cell/Content.js

@@ -0,0 +1,17 @@
+// Copyright 2023 @fto-consult/Boris Fouomene. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+import React from "react";
+import {classNames} from "$cutils";
+import { StyleSheet } from "react-native";
+import theme from "$theme";
+
+function TableCellContentComponent({children,style,...rest}){
+    return (<td  {...rest} className={classNames(rest.className,"table-row-cell")} style={StyleSheet.flatten([style])}>
+        {children}
+    </td>);
+}
+//const TableCellContentComponent = React.memo(TableCellContentComponent);;
+export default TableCellContentComponent;
+TableCellContentComponent.displayName = "TableCellContentComponent";
+const styles = {paddingLeft:"10px",paddingTop:"5px",paddingBottom:"5px",paddingRight:"10px"};

package/src/components/Table/Row/Cell/Content.native.js

@@ -0,0 +1,15 @@
+// Copyright 2023 @fto-consult/Boris Fouomene. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+import React from "react";
+import View from "$ecomponents/View";
+import { StyleSheet } from "react-native";
+
+function TableCellContentComponent({children,style,colSpan,...rest}){
+    return (<View testID={"RN_TableRowCellContentComponent"} {...rest} style={StyleSheet.flatten(style)}>
+        {children}
+    </View>);
+}
+//const TableCellContentComponent = React.memo(TableCellContentComponent);;
+export default TableCellContentComponent;
+TableCellContentComponent.displayName = "TableCellContentComponent";

package/src/components/Table/Row/Cell/index.js

@@ -0,0 +1,29 @@
+import React from "$react";
+import CellContent from "./Content";
+import { useTable } from "../../hooks";
+import {defaultObj} from "$cutils";
+import Label from "$ecomponents/Label";
+const TableRowCellComponent = React.forwardRef(({children,rowData,colSpan,isSectionListHeader,rowIndex,style,...rest},ref)=>{
+    if(isSectionListHeader){
+        return <CellContent colSpan={colSpan} ref={ref} style={[style]} >
+            {children}
+        </CellContent>
+    }
+    const {renderCell} = useTable();
+    const {content,containerProps} = React.useMemo(()=>{
+        const rArgs = {...rest,rowData,rowIndex,containerProps : {}};
+        const r = typeof renderCell =='function' && renderCell (rArgs) ||  children;
+        return {
+            content : typeof r =='string' || typeof r =='number' && r ? <Label children={r}/> : React.isValidElement(r)? r : children,
+            containerProps : defaultObj(rArgs.containerProps)
+        }
+    },[children]);
+    return (<CellContent ref={ref}  {...containerProps} style={[style,containerProps.style]} >
+        {content}
+    </CellContent>);
+});
+
+
+TableRowCellComponent.displayName = "TableRowCellComponent";
+
+export default TableRowCellComponent;

package/src/components/Table/Row/RowWrapper.js

@@ -0,0 +1,7 @@
+import { forwardRef } from "react";
+
+const TableRowWrapperComponent = forwardRef(({children},ref)=>children);
+
+TableRowWrapperComponent.displayName = "TableRowWrapperComponent";
+
+export default TableRowWrapperComponent;

package/src/components/Table/Row/RowWrapper.native.js

@@ -0,0 +1,10 @@
+import { forwardRef } from "react";
+import View from "$ecomponents/View"
+
+const TableRowWrapperComponent = forwardRef(({children,colSpan,...props},ref)=>{
+    return <View ref={ref} {...props} children={children}/>
+});
+
+TableRowWrapperComponent.displayName = "TableRowWrapperComponent";
+
+export default TableRowWrapperComponent;

package/src/components/Table/Row/index.js

@@ -0,0 +1,38 @@
+// Copyright 2023 @fto-consult/Boris Fouomene. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+import Cell from "./Cell";
+import PropTypes from "prop-types";
+import {isObj} from "$cutils";
+import styles from "../styles";
+import {useTable} from "../hooks";
+import RowWrapper from "./RowWrapper";
+import React from "$react";
+import theme from "$theme";
+export default function TableRowComponent({cells,rowKey,rowData,index,...rest}){
+    const {visibleColsNames,renderItem,renderSectionHeader,columns} = useTable();
+    const content = React.useMemo(()=>{
+        if(rowData.isSectionListHeader && typeof renderSectionHeader ==='function'){
+            return <RowWrapper style={[styles.row,theme.styles.pv1]}>
+                <Cell isSectionListHeader colSpan={visibleColsNames.length}>{renderSectionHeader({isSectionListHeader:true,rowData,item:rowData,index,rowIndex:index,isTable:true,rowKey})}</Cell>
+            </RowWrapper> 
+        }
+        return visibleColsNames.map((columnField,cIndex)=>{
+            const columnDef = columns[columnField];
+            if(!isObj(columnDef)) return null;
+            return <Cell rowData={rowData} rowKey={rowKey} children={columnDef[columnField]} rowIndex={index} columnDef={columnDef} index={cIndex} key={columnField} columnField={columnField}/>
+        });
+    },[rowKey,index,JSON.stringify(visibleColsNames)]);
+    return <RowWrapper style={[styles.row]}>
+        {content}
+    </RowWrapper>;
+}
+
+TableRowComponent.propTypes = {
+    rowData : PropTypes.object.isRequired,
+}
+
+export {Cell};
+
+TableRowComponent.Cell = Cell;

package/src/components/Table/RowTemplate/index.js

@@ -0,0 +1,10 @@
+import React from "$react";
+import View from "$ecomponents/View";
+
+const RowHeaderComponent = React.forwardRef(({...props},ref)=>{
+
+});
+
+
+RowHeaderComponent.displayName = "TableRowHeaderComponent";
+export default RowHeaderComponent;

package/src/components/Table/RowTemplate/index.web.js

@@ -0,0 +1,9 @@
+import React from "$react";
+
+const RowHeaderComponent = React.forwardRef(({...props},ref)=>{
+
+});
+
+
+RowHeaderComponent.displayName = "TableRowHeaderComponent";
+export default RowHeaderComponent;

package/src/components/Table/ScrollNative/index.js

@@ -0,0 +1,7 @@
+import React from "$react";
+const TableScrollViewNative = React.forwardRef(({children,...props},ref)=>{
+    return children;
+});
+TableScrollViewNative.displayName = "TableScrollViewNative";
+
+export default TableScrollViewNative;

package/src/components/Table/ScrollNative/index.native.js

@@ -0,0 +1,8 @@
+import { ScrollView } from "react-native";
+import React from "$react";
+const TableScrollViewNative = React.forwardRef(({children,...props},ref)=>{
+    return <ScrollView {...props} children={children} ref={ref}/>
+});
+TableScrollViewNative.displayName = "TableScrollViewNative";
+
+export default TableScrollViewNative;

package/src/components/Table/VirtuosoTable/index.js

@@ -0,0 +1,5 @@
+import { StyleSheet } from "react-native"
+import {classNames} from "$cutils";
+export default function VirtuosoTableComponent({style,className,...props}){
+    return <table{...props} className={classNames(className,"virtuoso-table-component")} style={StyleSheet.flatten([{ borderCollapse: 'separate',width:"100%" },style])} />
+}

package/src/components/Table/VirtuosoTable/index.native.js

@@ -0,0 +1,3 @@
+export default function VirtuosoTableComponent({children}){
+    return children;
+}

package/src/components/Table/hooks.js

@@ -0,0 +1,84 @@
+import React,{useMemo,useContext,createContext} from "$react";
+import {defaultStr,isObj} from "$cutils";
+import {DEFAULT_COLUMN_WIDTH} from "./utils";
+import Label from "$ecomponents/Label";
+import HeaderCell from "./Header/Cell";
+import { StyleSheet } from "react-native";
+import styles from "./styles";
+import theme from "$theme";
+
+export const usePrepareColumns = ({columns,sortedColumn,forceRender,testID,renderFooterCell,renderHeaderCell,renderFilterCell,columnsWidths,headerCellContainerProps,colsWidths,columnProps,footers,footerCellContainerProps,filterCellContainerProps})=>{
+   return useMemo(()=>{
+        testID = defaultStr(testID,"RN_TableColumns")
+        const cols = {},headers = {},footers = {},filters = {},visibleColsNames = [],columnsVisibilities=[],columnsNames = [];
+        let hasFooters = false;
+        columnProps = defaultObj(columnProps);
+        let columnIndex = 0;
+        const widths = defaultObj(columnsWidths,colsWidths);
+        headerCellContainerProps = defaultObj(headerCellContainerProps);
+        footerCellContainerProps = defaultObj(footerCellContainerProps);
+        filterCellContainerProps = defaultObj(filterCellContainerProps);
+        Object.map(columns,(columnDef,field)=>{
+            if(!isObj(columnDef)) return;
+            const columnField = defaultStr(columnDef.field,field);
+            let {visible,width,type,style} = columnDef;
+            visible = typeof visible =='boolean'? visible : true;
+            type = defaultStr(type,"text").toLowerCase().trim();
+            width = defaultDecimal(widths[columnField],width,DEFAULT_COLUMN_WIDTH);
+            const colArgs = {width,type,columnDef,containerProps:{},columnField,index:columnIndex,columnIndex};
+            const content = typeof renderHeaderCell =='function'? renderHeaderCell(colArgs) : defaultVal(columnDef.text,columnDef.label,columnField);
+            const hContainerProps = defaultObj(colArgs.containerProps);
+            if(!React.isValidElement(content,true)){
+                console.error(content," is not valid element of header ",columnDef," it could not be render on table");
+                return null;
+            }
+            const rArgs = {columnDef,width};
+            headers[columnField] = <HeaderCell {...rArgs} testID={testID+"_HeaderCell_"+columnField} {...headerCellContainerProps} {...hContainerProps} key={columnField} style={[styles.headerItem,styles.headerItemOrCell,headerCellContainerProps.style,hContainerProps.style,style]}>
+                <Label splitText numberOfLines={2} style={[theme.styles.w100,theme.styles.h100,{maxHeight:70}]} textBold primary>{content}</Label>
+            </HeaderCell>;
+            if(typeof renderFilterCell =='function'){
+                const filterCell = renderFilterCell(colArgs);
+                filters[columnField] = <HeaderCell {...rArgs} testID={testID+"_Filter_Cell_"+columnField} {...filterCellContainerProps} key={columnField} style={[styles.headerItem,styles.headerItemOrCell,styles.filterCell,filterCellContainerProps.style,style]}>
+                    {React.isValidElement(filterCell)? filterCell : null}
+                </HeaderCell>
+            }
+            if(typeof renderFooterCell ==='function') {
+                const footerProps = {...colArgs,containerProps:{}};
+                let cellFooter = renderFooterCell(footerProps);
+                let fContainerProps = {};
+                if(!React.isValidElement(cellFooter,true) && isObj(cellFooter)){
+                    fContainerProps = isObj(cellFooter.containerProps)? cellFooter.containerProps : {};
+                    cellFooter = React.isValidElement(cellFooter.children)? cellFooter.children : React.isValidElement(cellFooter.content)? cellFooter.content : null;
+                } else if(isObj(footerProps.containerProps)){
+                    fContainerProps = footerProps.containerProps;
+                }
+                cellFooter = React.isValidElement(cellFooter,true)? cellFooter : null;
+                if(!hasFooters && cellFooter){
+                    hasFooters = true;
+                }
+                footers[columnField] = <HeaderCell {...rArgs} testID={testID+"_Footer_Cell_"+columnField}  key={columnField} style={[styles.headerItem,styles.headerItemOrCell,footerCellContainerProps.style,style]}>
+                    <Label primary children={cellFooter}/>
+                </HeaderCell>
+          }
+          columnsVisibilities.push(visible);
+          if(visible){
+            visibleColsNames.push(columnField);
+          }
+          columnsNames.push(columnField);
+          cols[columnField] = {
+            ...columnDef,
+            width,
+            index : columnIndex,
+            field : columnField,
+            visible,
+            columnField,
+          };
+          columnIndex++;
+        });
+        return {columns:cols,columnsNames,headers,columnsVisibilities,visibleColsNames,hasFooters,footers,filters};
+      },[columns,sortedColumn,footers,forceRender]);
+}
+
+export const TableContext = createContext(null);
+
+export const useTable = ()=> useContext(TableContext);