funda-ui 1.0.272

package/lib/esm/Switch/index.tsx

@@ -0,0 +1,143 @@
+import React, { useId, useState, useEffect, useRef, forwardRef } from 'react';
+
+declare module 'react' {
+    interface ReactI18NextChildren<T> {
+        children?: any;
+    }
+}
+
+type SwitchOptionChangeFnType = (arg1: any, arg2: any) => void;
+
+
+type SwitchProps = {
+    wrapperClassName?: 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, ref: any) => {
+    const {
+        wrapperClassName,
+        disabled,
+        required,
+        value,
+        label,
+        name,
+        id,
+        checked,
+        style,
+        tabIndex,
+        onChange,
+        onBlur,
+        onFocus,
+        ...attributes
+    } = props;
+
+    const uniqueID = useId();
+    const idRes = id || uniqueID;
+    const rootRef = useRef<any>(null);
+    const [val, setVal] = useState<any>(null);
+
+    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(() => {
+        setVal(checked);
+    }, [checked]);
+
+
+    return (
+        <>
+
+            <div className={wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative"} ref={rootRef}>
+                <div className="form-check form-switch">
+                    <input 
+                        ref={ref}
+                        tabIndex={tabIndex || 0}
+                        type="checkbox"
+                        className="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"
+                        id={idRes}
+                        name={name}
+                        value={val ? value as string || '' : ''}  // do not use `defaultValue`
+                    />
+
+
+                    {label ? <><label htmlFor={`label-${idRes}`} className="form-check-label">{label}</label></> : null}
+                </div>
+            </div>
+
+
+        </>
+    )
+});
+
+export default Switch;

package/lib/esm/Table/TableColgroup.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+
+/* Table Colgroup
+-------------------------------------------------*/
+type TableColgroupProps = {
+    data?: any[];
+};
+
+const TableColgroup = (props: TableColgroupProps) => {
+
+    const {
+        data
+    } = props;
+
+    return (
+        <>
+            <colgroup>
+                <col></col>
+                {data ? data.map((el: any, i: number) => {
+                    return <col key={i}></col>;
+                }) : null}
+            </colgroup>
+        </>
+    )
+}
+
+export default TableColgroup;
+

package/lib/esm/Table/TableField.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+/* Table Field
+-------------------------------------------------*/
+type TableFieldProps = {
+	cols?: number;
+	content?: any;
+    width?: string;
+    className?: string;
+    style?: React.CSSProperties;
+	columnHeader?: string;
+	index?: React.Key;
+};
+
+const TableField = (props: TableFieldProps) => {
+
+    const {
+        cols,
+        width,
+        className,
+        style,
+        columnHeader,
+        index,
+        content
+    } = props;
+
+
+    function handleTbodyLeave(e: any) {
+        e.target.closest('table').querySelector('tbody').classList.remove('drag-trigger-mousedown');
+    }
+
+    return (
+        <>
+            <td colSpan={cols} data-table-text={columnHeader} data-table-col={index}  onMouseEnter={handleTbodyLeave} style={style ? style : (width ? ((typeof window !== 'undefined' && window.innerWidth > 768) ? {width: width} : {}) : {})} className={className || ''}>{content}</td>
+        </>
+    )
+}
+
+export default TableField;
+

package/lib/esm/Table/TableFieldRow.tsx

@@ -0,0 +1,212 @@
+import React, { useRef } from 'react';
+
+import Checkbox from 'rpb-checkbox';
+import Radio from 'rpb-radio';
+
+
+import { getChildren } from './utils/dom'; 
+import { removeItemOnce, formatCheckboxControlVal, setCheckboxCheckedData } from './table-utils'; 
+
+/* Table Field Row
+-------------------------------------------------*/
+type TableFieldRowProps = {
+    draggable?: boolean;
+    useRadio?: boolean;
+    cols?: number;
+    content?: any;
+    width?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    columnHeader?: string;
+    index?: number;
+    checkboxNamePrefix?: string;
+    rowKey?: string;
+    getCheckedPrint?: any[];
+    updateCheckedPrint?: any;
+    getCheckedData?: any[];
+    updategetCheckedData?: any;
+    getCheckedRootData?: any[];
+    updategetCheckedRootData?: any; 
+    onCheck?: (val: any) => void;
+};
+
+const TableFieldRow = (props: TableFieldRowProps) => {
+
+    
+    const {
+        draggable,
+        useRadio,
+        cols,
+        width,
+        className,
+        style,
+        columnHeader,
+        index,
+        content,
+        checkboxNamePrefix,
+        rowKey,
+        getCheckedPrint,
+        updateCheckedPrint,
+        getCheckedData,
+        updategetCheckedData,
+        getCheckedRootData,
+        updategetCheckedRootData,
+        onCheck,
+    } = props;
+
+    const contentRef = useRef<any>(null);
+    const checkboxRef = useRef<any>(null);
+
+    const rowIndex = rowKey?.replace('row-', '');
+
+
+    function handleTbodyEnter(e: any) {
+        e.target.closest('table').querySelector('tbody').classList.add('drag-trigger-mousedown');
+    }
+
+    return (
+        <>
+            <th scope="row" colSpan={cols} data-table-text={columnHeader} data-table-col={index} style={style ? style : (width ? ((typeof window !== 'undefined' && window.innerWidth > 768) ? {width: width} : {}) : {})} className={className || ''}>
+                {draggable ? <span className="drag-trigger" data-id={rowIndex} onMouseEnter={handleTbodyEnter}>
+                    <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none">
+                        <g>
+                            <path d="M18 14C17.4477 14 17 14.4477 17 15C17 15.5523 17.4477 16 18 16C18.5523 16 19 15.5523 19 15C19 14.4477 18.5523 14 18 14Z" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                            <path d="M12 14C11.4477 14 11 14.4477 11 15C11 15.5523 11.4477 16 12 16C12.5523 16 13 15.5523 13 15C13 14.4477 12.5523 14 12 14Z" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                            <path d="M6 14C5.44772 14 5 14.4477 5 15C5 15.5523 5.44772 16 6 16C6.55228 16 7 15.5523 7 15C7 14.4477 6.55228 14 6 14Z" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                            <path d="M18 8C17.4477 8 17 8.44772 17 9C17 9.55228 17.4477 10 18 10C18.5523 10 19 9.55228 19 9C19 8.44772 18.5523 8 18 8Z" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                            <path d="M12 8C11.4477 8 11 8.44772 11 9C11 9.55228 11.4477 10 12 10C12.5523 10 13 9.55228 13 9C13 8.44772 12.5523 8 12 8Z" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                            <path d="M6 8C5.44772 8 5 8.44772 5 9C5 9.55228 5.44772 10 6 10C6.55228 10 7 9.55228 7 9C7 8.44772 6.55228 8 6 8Z" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                        </g>
+                    </svg>
+                </span> : null}
+                
+                <span className="checkbox-trigger">
+                    {useRadio ? <>
+                        <Radio
+                            wrapperClassName=""
+                            options={`{
+                                "":"${rowKey}"}`}
+                            name={`checkbox-${checkboxNamePrefix}-0`}
+                            tabIndex={-1}
+                            data-index={`${rowIndex}`}
+                            data-key={`${rowKey}`}
+                            value={`${rowKey}`}
+                            onClick={(e: any, val: any) => {
+
+                                // callback
+                                //-----------
+                                onCheck?.(formatCheckboxControlVal(e.target));
+                    
+                                
+                            }}
+
+                        />
+                   
+                    </> : <>
+                    <Checkbox
+                            ref={checkboxRef}
+                            wrapperClassName=""
+                            name={`checkbox-${checkboxNamePrefix}-${rowIndex}`}
+                            tabIndex={-1}
+                            data-index={`${rowIndex}`}
+                            data-key={`${rowKey}`}
+                            value={`${rowKey}`}
+                            checked={getCheckedData!.filter((cur: any) => cur.key === rowKey)[0]?.checked}
+                            onChange={(e: any, val: any) => {
+
+                                const _curKey: string = e.target.value;
+                                const _checkedData: any = getCheckedData;
+
+                                let _res: any = getCheckedPrint;
+                        
+                                
+                                // STEP 1:
+                                // Current checkbox
+                                //-----------
+                                if ( val === true ) {
+                                    _res.push(formatCheckboxControlVal(e.target));
+                                    setCheckboxCheckedData(_checkedData, _curKey, true);
+                                } else {
+                                    setCheckboxCheckedData(_checkedData, _curKey, false);
+                                    _res = removeItemOnce(_res, _curKey);
+                                    
+                                }
+
+                                // STEP 2:
+                                // Array deduplication
+                                //-----------
+                                _res = _res.filter((item: any, index: number, self: any[]) => index === self.findIndex((t) => (t.key === item.key)))
+
+
+
+                                
+                                // STEP 3:
+                                // ALl parent checkboxes
+                                //-----------
+                                const _headRow = e.target.closest('table').querySelectorAll('thead th')[0];
+                                if ( typeof _headRow !== 'undefined' ) {
+                                    const _rootCheckbox = _headRow.querySelector('[type="checkbox"]');
+                                    const _checkboxes = getChildren(e.target.closest('table').querySelector('tbody'), '[type="checkbox"]');
+                                    const _checkedLength = _checkboxes.filter((el: any) => {
+                                        return el.checked === true;
+                                    }).length;
+
+                                    if ( _checkedLength === 0 ) {
+                                        _rootCheckbox.indeterminate = false;
+                                        updategetCheckedRootData([{
+                                            key: `row-all`,
+                                            checked: false
+                                        }]);
+                                    } else {
+                                        if ( _checkedLength === _checkboxes.length )  {
+                                            _rootCheckbox.indeterminate = false;
+                                            updategetCheckedRootData([{
+                                                key: `row-all`,
+                                                checked: true
+                                            }]);
+                                        }
+                                        
+                                        if ( _checkedLength < _checkboxes.length )  {
+                                            updategetCheckedRootData([{
+                                                key: `row-all`,
+                                                checked: false
+                                            }]);
+                                            _rootCheckbox.indeterminate = true;
+                                            
+                                        }
+                                    }
+
+                                }
+
+
+                                // STEP 4:
+                                // Update checked data
+                                //-----------
+                                updategetCheckedData(_checkedData);    
+
+
+                                // STEP 5:
+                                // Update checked print
+                                //-----------
+                                updateCheckedPrint(_res);
+
+
+                                // STEP 6:
+                                // callback
+                                //-----------
+                                onCheck?.(_res);
+                    
+                                
+                            }}
+                        />
+                    </>}
+                    
+                </span>
+                <span ref={contentRef}>{content}</span>
+            </th>
+        </>
+    )
+}
+
+export default TableFieldRow;
+

package/lib/esm/Table/TableHeaders.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+
+import Checkbox from 'rpb-checkbox';
+
+
+import { getChildren } from './utils/dom';
+import { formatCheckboxControlVal, setCheckboxCheckedData } from './table-utils';
+
+/* Table Headers
+-------------------------------------------------*/
+type TableHeadersProps = {
+    data: any[];
+    useRadio?: boolean;
+    headClassName?: string;
+    checkboxNamePrefix?: string;
+    sortable?: boolean;
+    getCheckedPrint?: any[];
+    updateCheckedPrint?: any;
+    getCheckedData?: any[];
+    updategetCheckedData?: any;
+    getCheckedRootData?: any[];
+    updategetCheckedRootData?: any;
+    onCheck?: (val: any) => void;
+    evSort?: (option: any) => void;
+};
+
+const TableHeaders = (props: TableHeadersProps) => {
+
+    const {
+        data,
+        useRadio,
+        headClassName,
+        checkboxNamePrefix,
+        sortable,
+        getCheckedPrint,
+        updateCheckedPrint,
+        getCheckedData,
+        updategetCheckedData,
+        getCheckedRootData,
+        updategetCheckedRootData,
+        onCheck,
+        evSort
+    } = props;
+    
+
+
+    return data ? (
+        <>
+            <thead className={headClassName ? headClassName : ''}>
+                <tr>
+                    {data.map((item: any, i: number) => {
+                        return <th key={i} scope="col" data-sort-type={item.type} data-table-text={item.content.replace(/(<([^>]+)>)/ig, '')} data-table-col={i} style={item.style ? item.style : (item.width ? ((typeof window !== 'undefined' && window.innerWidth > 768) ? {width: item.width} : {}) : {})} className={item.className || ''}>
+                            {i === 0 ? <span className="checkbox-trigger" style={{visibility: useRadio ? 'hidden' : 'visible'}}>
+                                <Checkbox
+                                    wrapperClassName=""
+                                    name={`checkbox-${checkboxNamePrefix}-all`}
+                                    tabIndex={-1}
+                                    value={`row-all`}
+                                    checked={getCheckedRootData!.filter((cur: any) => cur.key === 'row-all')[0]?.checked}
+                                    onChange={(e: any, val: any) => {
+
+                                        const _checkedData: any = getCheckedData;
+                                        let _res: any = getCheckedPrint;
+
+
+                                        // STEP 1:
+                                        // Current checkbox
+                                        //-----------
+                                        if (val === true) {
+                                            updategetCheckedRootData([{
+                                                key: `row-all`,
+                                                checked: true
+                                            }]);
+                                        } else {
+                                            updategetCheckedRootData([{
+                                                key: `row-all`,
+                                                checked: false
+                                            }]);
+                                        }
+
+
+                                        // STEP 2:
+                                        // All child checkboxes
+                                        //-----------
+                                        const _checkboxes = getChildren(e.target.closest('table').querySelector('tbody'), '[type="checkbox"]');
+                                        [].slice.call(_checkboxes).forEach((node: any) => {
+                                            if (val === true) {
+                                                setCheckboxCheckedData(_checkedData, node.dataset.key, true);
+                                                _res.push(formatCheckboxControlVal(node));
+                                            } else {
+                                                setCheckboxCheckedData(_checkedData, node.dataset.key, false);
+                                                _res = [];
+
+                                            }
+                                        });
+
+
+                                        // STEP 3:
+                                        // Array deduplication
+                                        //-----------
+                                        _res = _res.filter((item: any, index: number, self: any[]) => index === self.findIndex((t) => (t.key === item.key)))
+
+
+                                        // STEP 4:
+                                        // Update checked data
+                                        //-----------
+                                        updategetCheckedData(_checkedData);
+
+                                        // STEP 5:
+                                        // Update checked print
+                                        //-----------
+                                        updateCheckedPrint(_res);
+
+
+                                        // STEP 6:
+                                        // callback
+                                        //-----------
+                                        onCheck?.(_res);
+
+
+                                    }}
+                                />
+                            </span> : null}
+                            <span dangerouslySetInnerHTML={{ __html: `${item.content}` }}></span>
+                            {sortable ? <span className="sort-trigger" onClick={evSort}><svg width="1em" height="1em" viewBox="0 0 18 18">
+                                <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+                                    <path d="M9.5,3 L13,8 L6,8 L9.5,3 L9.5,3 Z M6,11 L13,11 L9.5,16 L6,11 L6,11 Z" id="path" fill="#000000">
+                                    </path>
+                                </g>
+                            </svg></span> : null}
+
+                        </th>;
+                    })}
+
+                    {useRadio ? <>
+                        <th style={{display: 'none'}}></th>
+                    </> : null}
+                </tr>
+            </thead>
+        </>
+    ) : null;
+
+}
+
+export default TableHeaders;
+