funda-ui 4.7.624 → 4.7.701

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

@@ -1,149 +0,0 @@
-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

@@ -1,351 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,126 +0,0 @@
-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;