funda-ui 4.5.682 → 4.5.711

package/publish/lib/esm/Table/TableBody.tsx

@@ -0,0 +1,41 @@
+import React, { useContext, forwardRef } from 'react';
+
+import { TableContext } from './TableContext';
+
+
+export interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    className?: string
+}
+
+const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>((
+    { 
+        children, 
+        className, 
+        ...attributes 
+    },
+    externalRef
+) => {
+
+    const { 
+        rowDraggable,
+        handledragOver
+     } = useContext(TableContext);
+     
+
+    return (
+        <>
+
+            <tbody
+                {...attributes}
+                ref={externalRef}
+                onDragOver={rowDraggable ? handledragOver: () => void(0)} 
+                className={className || ''}
+            >
+                {children}
+            </tbody>
+
+        </>
+    )
+});
+
+export default TableBody;

package/publish/lib/esm/Table/TableCaption.tsx

@@ -0,0 +1,34 @@
+import React, { forwardRef } from 'react';
+
+
+export interface TableCaptionProps extends React.HTMLAttributes<HTMLTableCaptionElement> {
+    className?: string;
+    captionSide?: string;
+}
+
+const TableCaption = forwardRef<HTMLTableCaptionElement, TableCaptionProps>((
+    { 
+        children, 
+        captionSide,
+        className, 
+        ...attributes 
+    },
+    externalRef
+) => {
+
+    return (
+        <>
+
+            <caption
+                {...attributes}
+                ref={externalRef}
+                className={`syntable__caption ${className || ''} syntable__caption--${captionSide || 'top'}`}
+            >
+                {children}
+            </caption>
+
+        </>
+    )
+});
+
+export default TableCaption;

package/publish/lib/esm/Table/TableCell.tsx

@@ -0,0 +1,123 @@
+import React, { forwardRef, useContext } from 'react';
+
+import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
+
+
+
+import { TableContext } from './TableContext';
+
+import { cellMark, removeCellFocusClassName } from './utils/func';
+import useTableKeyPress from './utils/hooks/useTableKeyPress';
+
+export interface TableCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+    active?: boolean;
+    nowrap?: boolean;
+    activeClassName?: string;
+    className?: string;
+    colSpan?: number;
+    style?: React.CSSProperties;
+    scope?: `col` | `row` | `colgroup` | `rowgroup`;
+    onClick?: (e: any) => void;
+    onKeyDown?: (e: any) => void;
+}
+
+const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>((
+    { 
+        children, 
+        active, 
+        nowrap,
+        activeClassName, 
+        className: myClassName, 
+        colSpan,
+        style,
+        scope,
+        onClick,
+        onKeyDown,
+        ...attributes 
+    },
+    externalRef
+) => {
+
+    const { 
+        originData,
+        rootRef,
+        rootDataInfo, 
+        setRootDataInfo,
+        refNode,
+        focusableCellId,
+        setFocusableCellId,
+        keyboardFocusable,
+        onCellKeyPressed,
+     } = useContext(TableContext);
+
+
+    const CellComponent = scope ? 'th' : 'td';
+
+    // key press initialization
+    const { handleKeyPressed } = useTableKeyPress({
+        enabled: keyboardFocusable,
+        data: originData,
+        spyElement: rootRef.current,
+        rootDataInfo,
+        setRootDataInfo,
+        refNode,
+        focusableCellId,
+        setFocusableCellId,
+        onCellKeyPressed,
+        onKeyDown
+    }, [rootRef]);
+    
+
+    return (
+        <>
+
+            <CellComponent
+                {...attributes}
+                style={typeof nowrap === 'undefined' ? style : { whiteSpace: clsWrite(nowrap, 'normal', 'nowrap'), ...style }}
+                ref={(node) => {
+                    if (typeof externalRef === 'function') {
+                        externalRef(node);
+                    } else if (externalRef) {
+                        externalRef.current = node;
+                    }
+
+                    if (node) {
+                        const _row = node.dataset.tableRow;
+                        const _col = node.dataset.tableCol;
+                        refNode.current.set(cellMark(_row, _col), node);
+                    }
+
+                }}
+                colSpan={colSpan} 
+                tabIndex={-1}
+                onKeyDown={handleKeyPressed}  // require "tabIndex" attribute
+                onClick={(e: React.MouseEvent) => {
+                    const _el: any = e.currentTarget;
+
+                    // key press initialization
+                    if (keyboardFocusable) {
+                        const _row = Number(_el.dataset.tableRow);
+                        const _col = Number(_el.dataset.tableCol);
+
+                        removeCellFocusClassName(rootRef.current);
+                        setFocusableCellId(cellMark(_row, _col));
+                        _el.classList.add('cell-focus');
+
+                    }
+
+                    // callback
+                    onClick?.(e);
+                }}
+                className={combinedCls(
+                    myClassName,
+                    active ? clsWrite(activeClassName, 'active') : undefined
+                )}
+            >
+                {children}
+            </CellComponent>
+
+        </>
+    )
+});
+
+export default TableCell;

package/publish/lib/esm/Table/TableColgroup.tsx

@@ -0,0 +1,38 @@
+import React, { forwardRef } from 'react';
+
+
+export interface TableColgroupProps extends React.HTMLAttributes<HTMLTableColElement> {
+    className?: string;
+    length?: number;
+}
+
+const TableColgroup = forwardRef<HTMLTableColElement, TableColgroupProps>((
+    { className, length, ...attributes },
+    externalRef
+) => {
+
+    return (
+        <>
+
+            <colgroup
+                {...attributes}
+                ref={externalRef}
+                className={className || ''}
+            >
+                {Array.from({
+                    length: length || 0
+                },
+                function (v, k) {
+                    return k; // Return k(ey) as value for this index
+                }
+                ).map((el: any, i: number) => {
+                    return <col key={i}></col>;
+                })}
+            </colgroup>
+
+        </>
+    )
+});
+
+export default TableColgroup;
+

package/publish/lib/esm/Table/TableContext.tsx

@@ -0,0 +1,26 @@
+import React, { createContext } from 'react';
+
+
+export type TableProviderProps = {
+    value?: any;
+    children?: React.ReactNode;
+};
+
+
+const TableContext = createContext<any>(undefined);
+
+const TableProvider = (props: TableProviderProps) => {
+    const {
+        children,
+        value
+    } = props;
+
+    return (
+        <TableContext.Provider value={value}>
+            {children}
+        </TableContext.Provider>
+    );
+
+};
+
+export { TableContext, TableProvider };

package/publish/lib/esm/Table/TableFoot.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from 'react';
+
+
+export interface TableFootProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    className?: string;
+}
+
+const TableFoot = forwardRef<HTMLTableSectionElement, TableFootProps>((
+    { children, className, ...attributes },
+    externalRef
+) => {
+
+    return (
+        <>
+
+            <tfoot
+                {...attributes}
+                ref={externalRef}
+                className={className || ''}
+            >
+                {children}
+            </tfoot>
+
+        </>
+    )
+});
+
+export default TableFoot;

package/publish/lib/esm/Table/TableHead.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from 'react';
+
+
+export interface TableHeadProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    className?: string;
+}
+
+const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>((
+    { children, className, ...attributes },
+    externalRef
+) => {
+
+    return (
+        <>
+
+            <thead
+                {...attributes}
+                ref={externalRef}
+                className={className || ''}
+            >
+                {children}
+            </thead>
+
+        </>
+    )
+});
+
+export default TableHead;

package/publish/lib/esm/Table/TableRow.tsx

@@ -0,0 +1,76 @@
+import React, { useContext, forwardRef } from 'react';
+
+import { TableContext } from './TableContext';
+import { convertMapToArr } from './utils/func';
+
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    active?: boolean;
+    activeClassName?: string;
+    className?: string;
+    itemData?: any;
+}
+
+const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>((
+    { 
+        children, 
+        active, 
+        activeClassName, 
+        className, 
+        itemData,
+        ...attributes 
+    },
+    externalRef
+) => {
+
+    const { 
+        originData,
+        filterFields,
+        selectedItems,
+        instance,
+        rowDraggable,
+        handleDragStart,
+        handleDragEnd, 
+     } = useContext(TableContext);
+     
+
+    // ================================================================
+    // filter
+    // ================================================================
+    const filteredData = instance || [];
+    const filterFieldsData = filterFields || [];
+
+
+    // ================================================================
+    // selection
+    // ================================================================
+    const _res = convertMapToArr(selectedItems);
+    const filteredSelectedItems = _res.map((v: any) => Number(v)).map((rowNum: number) => {
+        if (JSON.stringify(itemData) === JSON.stringify(originData[rowNum])) {
+            return originData[rowNum];
+        }
+    }).filter(Boolean);
+    const selectedClassName = activeClassName || 'active';
+
+
+
+    return (
+        <>
+
+            <tr
+                {...attributes}
+                ref={externalRef}
+                draggable={rowDraggable} 
+                onDragStart={rowDraggable ? handleDragStart: () => void(0)} 
+                onDragEnd={rowDraggable ? handleDragEnd : () => void(0)} 
+                data-row-data={`${itemData && typeof itemData === 'object' ? JSON.stringify(itemData) : itemData}`}
+                
+                className={`row-obj ${className || ''} ${active ? selectedClassName : ''} ${itemData && originData ? (filteredData.every((item: any) => filterFieldsData.some((s: string) => !item[s]?.toLowerCase().includes(itemData[s]?.toLowerCase())) ) ? 'd-none' : '') : ''} ${itemData && originData ? (filteredSelectedItems.some((item: any) => JSON.stringify(itemData) === JSON.stringify(item) ) ? selectedClassName : '') : ''}`}
+            >
+                {children}
+            </tr>
+
+        </>
+    )
+});
+
+export default TableRow;