funda-ui 4.7.615 → 4.7.624

package/publish/lib/esm/Switch/index.tsx

@@ -0,0 +1,149 @@
+import React, { useState, useEffect, useRef, forwardRef } from 'react';
+
+
+import useComId from 'funda-utils/dist/cjs/useComId';
+import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
+
+
+export type SwitchOptionChangeFnType = (arg1: any, arg2: any) => void;
+
+
+export type SwitchProps = {
+    wrapperClassName?: string;
+    controlClassName?: string;
+    value: string | boolean;
+    label?: React.ReactNode | string;
+    name?: string;
+    disabled?: any;
+    required?: any;
+    checked?: boolean;
+    /** -- */
+    id?: string;
+    style?: React.CSSProperties;
+    tabIndex?: number;
+    [key: `data-${string}`]: string | undefined;
+    /** This function is called whenever the data is updated.
+     *  Exposes the JSON format data about the option as an argument.
+     */
+    onChange?: SwitchOptionChangeFnType | null;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+};
+
+const Switch = forwardRef((props: SwitchProps, externalRef: any) => {
+    const {
+        wrapperClassName,
+        controlClassName,
+        disabled,
+        required,
+        value,
+        label,
+        name,
+        id,
+        checked,
+        style,
+        tabIndex,
+        onChange,
+        onBlur,
+        onFocus,
+        ...attributes
+    } = props;
+
+    const uniqueID = useComId();
+    const idRes = id || uniqueID;
+    const rootRef = useRef<any>(null);
+    const [val, setVal] = useState<boolean>(false);  // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
+
+    function handleFocus(event: any) {
+        rootRef.current?.classList.add('focus');
+
+        //
+        onFocus?.(event);    
+    }
+
+
+    function handleChange(event: any) {
+        const _val = event.target.checked;
+
+        setVal(_val);
+        
+        //----
+        //remove focus style
+        rootRef.current?.classList.remove('focus');
+
+        //
+        if (typeof (onChange) === 'function') {
+            onChange(event, _val);
+        }
+
+        
+
+    }
+
+
+    function handleBlur(event: any) {
+
+        //----
+        //remove focus style
+        rootRef.current?.classList.remove('focus');
+
+        //
+        onBlur?.(event);
+    }
+
+
+    useEffect(() => {
+        if (typeof checked === 'boolean') {
+            setVal(checked);
+        }
+    }, [checked]);
+
+
+    return (
+        <>
+
+            <div className={clsWrite(wrapperClassName, 'mb-3 position-relative')} ref={rootRef}>
+                <div className="form-check form-switch">
+                    <input 
+                        ref={externalRef}
+                        tabIndex={tabIndex || 0}
+                        type="checkbox"
+                        className={clsWrite(controlClassName, 'form-check-input')}
+                        id={`label-${idRes}`}
+                        
+                        // Don't use "name", it's just a container to display the label
+                        data-name={name?.match(/(\[.*?\])/gi) ? `${name.split('[')[0]}-label[]` : `${name}-label`}    
+                        data-checkbox
+                        disabled={disabled || null}
+                        required={required || null}
+                        onChange={handleChange}
+                        onFocus={handleFocus}
+                        onBlur={handleBlur}
+                        defaultValue={value as string || ''}
+                        checked={val}   // component status will not change if defaultChecked is used
+                        style={{cursor: 'pointer', ...style}}
+                        {...attributes}
+                    />
+
+
+                    <input 
+                        type="hidden"
+                        tabIndex={-1}
+                        id={idRes}
+                        name={name}
+                        value={val ? value as string || '' : ''}  // do not use `defaultValue`
+                        onChange={() => void(0)}
+                        {...attributes}
+                    />
+
+
+                    {label ? <>{typeof label === 'string' ? <label htmlFor={`label-${idRes}`} className="form-check-label" dangerouslySetInnerHTML={{__html: `${label}`}}></label> : <label htmlFor={`label-${idRes}`} className="form-check-label">{label}</label>}</> : null}
+                </div>
+            </div>
+
+
+        </>
+    )
+});
+
+export default Switch;

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

@@ -0,0 +1,351 @@
+import React, { useEffect, useState, forwardRef, useRef, useLayoutEffect, useImperativeHandle } from 'react';
+
+
+import useComId from 'funda-utils/dist/cjs/useComId';
+import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
+
+
+import { TableProvider } from './TableContext';
+import useTableResponsive from './utils/hooks/useTableResponsive';
+import useTableDraggable from './utils/hooks/useTableDraggable';
+import useTableKeyPress from './utils/hooks/useTableKeyPress';
+import { cellMark, removeCellFocusClassName, initRowColProps, getTableRowsColCount } from './utils/func';
+
+export interface TableProps extends React.HTMLAttributes<HTMLDivElement> {
+    // content ref
+    contentRef?: React.ForwardedRef<any>; // could use "Array" on contentRef.current, such as contentRef.current[0], contentRef.current[1]
+
+    // basic
+    wrapperClassName?: string;
+    tableClassName?: string;
+    bordered?: boolean;
+    colGroup?: boolean;
+    cellAutoWidth?: boolean;
+
+    // sort
+    colSortable?: boolean;
+    onColSort?: (fetchData: any) => void;
+
+    // drag & drop
+    rowDraggable?: boolean;
+    onRowDrag?: (dragStart: any, dragEnd: any) => void;
+
+    // responsive
+    responsive?: boolean;
+    enhancedResponsive?: boolean;
+    enhancedResponsiveWithScrollBar?: boolean;
+
+    // filter
+    data?: any[];
+    filterFields?: string[];
+    filterControlClassName?: string;
+    filterControlPlaceholder?: string;
+    filterLabel?: React.ReactNode;
+    onChangeFilter?: (fetchData: any) => void;
+
+    // selection
+    dataSelected?: number[];
+    rowSelectable?: boolean;
+    onChangeRowSelect?: (fetchData: any[]) => void;
+
+    // key press
+    keyboardFocusable?: boolean;
+    onCellKeyPressed?: (
+        classname: string,
+        elem: HTMLTableCellElement,
+        event: React.KeyboardEvent<Element>,
+        isLeftEdge: boolean,
+        isRightEdge: boolean,
+        isTopEdge: boolean,
+        isBottomEdge: boolean
+    ) => void;
+    onCellPressEnter?: (classname: string, elem: HTMLTableCellElement, event: React.KeyboardEvent<Element>) => void;
+    
+}
+
+
+const Table = forwardRef<HTMLDivElement, TableProps>((
+    {
+        contentRef,
+        
+        // basic
+        children,
+        wrapperClassName,
+        tableClassName,
+        bordered,
+        colGroup,
+        cellAutoWidth,
+
+        // sort
+        colSortable,
+        onColSort,
+
+        // drag & drop
+        rowDraggable,
+        onRowDrag,
+
+        // responsive
+        responsive,
+        enhancedResponsive,
+        enhancedResponsiveWithScrollBar,
+
+        // filter
+        data,
+        filterFields,
+        filterControlClassName,
+        filterControlPlaceholder,
+        filterLabel,
+        onChangeFilter,
+        
+        // selection
+        dataSelected,
+        rowSelectable,
+        onChangeRowSelect,
+
+        // key press
+        keyboardFocusable,
+        onCellKeyPressed,
+        onCellPressEnter,
+
+        ...attributes
+    },
+    externalRef
+) => {
+
+    const uniqueID = useComId();
+    const rootRef = useRef<any>(null);
+
+    // context
+    const [instance, setInstance] = useState<any>(null);
+
+    // selection
+    const [selectedItems, setSelectedItems] = useState<any>(new Set());
+    
+    // effective element movement on keystroke
+    const [rootDataInfo, setRootDataInfo] = useState<null | {totalRow: number; totalCol: {row: number; colCount: number}[];}>(null);
+    const refNode = useRef(new Map<string, HTMLTableElement>());
+    const [focusableCellId, setFocusableCellId] = useState<string>('');
+
+
+    // responsive
+    const responsiveClasses = typeof responsive === 'undefined' || responsive === true ? 'table-responsive' : '';
+    let enhancedResponsiveClasses = '';
+    if (enhancedResponsive && !enhancedResponsiveWithScrollBar) enhancedResponsiveClasses += ' table-enhanced-responsive';
+    if (enhancedResponsiveWithScrollBar && !enhancedResponsive) enhancedResponsiveClasses += ' table-enhanced-responsive-scrolled';
+
+
+    //Set the class names of different styles
+    let tableClasses = '';
+    if (bordered) tableClasses += ' table-bordered';
+    if (colGroup) tableClasses += ' table-colgroup';
+
+    
+    // responsive table initialization
+    useTableResponsive({
+        enabled: enhancedResponsiveWithScrollBar && rootRef.current,
+        spyElement: rootRef.current
+    }, [rootRef]);
+
+    // initialize drag & drop data
+    const {
+        handleDragStart,
+        handleDragEnd,
+        handledragOver,
+        handleTbodyEnter
+    } = useTableDraggable({
+        enabled: rowDraggable && rootRef.current,
+        data: data,
+        spyElement: rootRef.current,
+        onRowDrag: onRowDrag
+    }, [data, rootRef]);
+
+    const tableKeyPress = useTableKeyPress({
+        enabled: keyboardFocusable,
+        data: data,
+        spyElement: rootRef.current,
+        rootDataInfo,
+        refNode,
+        focusableCellId,
+        setFocusableCellId,
+        onCellKeyPressed,
+        onCellPressEnter,
+    }, [data, rootRef, rootDataInfo, refNode, focusableCellId]);
+
+    const updateFocusableCell = (row: number, col: number) => {
+            
+        setFocusableCellId(cellMark(row, col));
+
+        // Find and focus the cell element
+        const targetCell = refNode.current.get(cellMark(row, col)) as HTMLElement;
+
+        if (typeof targetCell !== 'undefined') {
+            removeCellFocusClassName(rootRef.current);
+            targetCell.classList.add('cell-focus');
+        }
+    };
+
+    // initialize context
+    useEffect(() => {
+        setInstance(data);
+    }, [data]);
+
+
+    // The items are selected by default
+    useEffect(() => {
+        if (Array.isArray(data) && Array.isArray(dataSelected) && dataSelected.length > 0) {
+            const newSelectedItems = new Set(selectedItems);
+            dataSelected.forEach((s: number) => {
+                newSelectedItems.add(String(s));
+            });
+
+            setSelectedItems(newSelectedItems);
+        }
+    }, [data, dataSelected]);
+
+    // Synchronous execution, which blocks rendering
+    useLayoutEffect(() => {
+        if (rootRef.current) {
+            // Initialize custom props of table elements
+            initRowColProps(rootRef.current);
+
+            // Count the number of columns per row
+            const totalCol = getTableRowsColCount(rootRef.current);
+            setRootDataInfo({
+                totalRow: Array.isArray(data) ? data.length : 0,
+                totalCol
+            });
+
+            // Initialize the focused index
+            if (keyboardFocusable) {
+                updateFocusableCell(0, 0);
+            }
+            
+        }
+    }, [data]); // Re-run when data changes
+
+
+    // exposes the following methods
+    useImperativeHandle(contentRef, () => ({
+        setFocusableCell: updateFocusableCell,
+        clearAllCellFocus: () => {
+            if (rootRef.current) {
+                removeCellFocusClassName(rootRef.current);
+                
+                const focusedCells = rootRef.current.querySelectorAll('td.cell-focus, th.cell-focus');
+                focusedCells.forEach((cell: any) => {
+                    if (typeof cell.blur === 'function') cell.blur();
+                    if (cell.classList) cell.classList.remove('cell-focus');
+                });
+            }
+        },
+        getCellElement: (row: number, col: number) => {
+            // Find and focus the cell element
+            const targetCell = refNode.current.get(cellMark(row, col)) as HTMLElement;
+            return typeof targetCell !== 'undefined' ? targetCell : null;
+        },
+        forceFocusCell: (row: number, col: number) => {
+            // Find and focus the cell element
+            const targetCell = refNode.current.get(cellMark(row, col)) as HTMLElement;
+
+            if (typeof targetCell !== 'undefined') {
+                // After forcing focus, you can use the keyboard to listen directly
+                targetCell.focus(); 
+            }
+        },
+        triggerCellKeyPressed: tableKeyPress.triggerCellKeyPressed
+    }), [rootRef, data, rootDataInfo]);
+
+    return (
+        <>
+
+            <TableProvider value={{
+                originData: data,
+                rootRef: rootRef,
+
+                // sort
+                colSortable,
+                onColSort,
+
+                // drag & drop
+                rowDraggable,
+                handleDragStart,
+                handleDragEnd,
+                handledragOver,
+                handleTbodyEnter,
+                
+
+                // filter
+                filterFields,
+                instance,
+                setInstance,
+                onChangeFilter,
+
+                // selection
+                dataSelected,
+                rowSelectable,
+                selectedItems,
+                setSelectedItems,
+                onChangeRowSelect,
+
+                // key press
+                keyboardFocusable,
+                rootDataInfo, 
+                setRootDataInfo,
+                refNode,
+                focusableCellId,
+                setFocusableCellId,
+                onCellKeyPressed,
+                onCellPressEnter,
+
+
+            }}>
+
+
+                {/** Main */}
+                <div
+                    {...attributes}
+                    id={uniqueID}
+                    ref={(node) => {
+                        rootRef.current = node;
+                        if (typeof externalRef === 'function') {
+                            externalRef(node);
+                        } else if (externalRef) {
+                            externalRef.current = node;
+                        }
+                    }}
+                    className={combinedCls(
+                        'syntable__wrapper',
+                        clsWrite(wrapperClassName, 'mb-3 position-relative'),
+                        responsiveClasses,
+                        enhancedResponsiveClasses,
+                        {
+                            'has-checkbox': rowSelectable,
+                            'allow-dragdrop': rowDraggable,
+                            'allow-sort': colSortable
+
+                        }
+                    )}
+                >
+
+                    <table
+                        className={combinedCls(
+                            clsWrite(tableClassName, 'table'),
+                            tableClasses,
+                            {
+                                'cell-autowidth': cellAutoWidth
+                            }
+
+                        )}
+                    >
+                        {children}
+                    </table>
+
+                </div>
+
+            </TableProvider>
+
+        </>
+    )
+});
+
+export default Table;

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,126 @@
+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,
+        onCellPressEnter,
+     } = useContext(TableContext);
+
+
+    const CellComponent = scope ? 'th' : 'td';
+
+    // key press initialization
+    const { handleKeyPressed } = useTableKeyPress({
+        enabled: keyboardFocusable,
+        data: originData,
+        spyElement: rootRef.current,
+        rootDataInfo,
+        refNode,
+        focusableCellId,
+        setFocusableCellId,
+        onCellKeyPressed,
+        onCellPressEnter,
+        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;
+                        if (typeof _row !== 'undefined' && typeof _col !== 'undefined') {
+                            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;