funda-ui 1.0.272

package/lib/esm/Table/TableRow.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+
+import Radio from 'rpb-radio';
+
+import TableField from './TableField';
+import TableFieldRow from './TableFieldRow';
+
+import { formatPerlineControlVal } from './table-utils';
+
+
+/* Table Row
+-------------------------------------------------*/
+type TableRowProps = {
+    index: React.Key;
+    data?: any[];
+    headerLabel?: any[];
+    checkboxNamePrefix?: string;
+    rowKey?: string;
+    draggable?: boolean;
+    useRadio?: boolean;
+    getCheckedPrint?: any[];
+    updateCheckedPrint?: any;
+    getCheckedData?: any[];
+    updategetCheckedData?: any;
+    getCheckedRootData?: any[];
+    updategetCheckedRootData?: any;
+    onClick?: (el: any, val: any) => void;
+    onCheck?: (val: any) => void;
+    evDragEnd?: (option: any) => void | undefined;
+    evDragStart?: (option: any) => void | undefined;
+};
+
+const TableRow = (props: TableRowProps) => {
+
+    const {
+        index,
+        data,
+        headerLabel,
+        checkboxNamePrefix,
+        rowKey,
+        getCheckedPrint,
+        updateCheckedPrint,
+        getCheckedData,
+        updategetCheckedData,
+        getCheckedRootData,
+        updategetCheckedRootData,
+        draggable,
+        useRadio,
+        onClick,
+        onCheck,
+        evDragEnd,
+        evDragStart
+    } = props;
+
+    
+    const nonExistentRowKey = `row-null`;
+    const rowChecked = getCheckedData!.filter((cur: any) => cur.key === rowKey)[0]?.checked;
+
+    function handleClick(event: any) {
+        const curVal: any = formatPerlineControlVal(event.currentTarget)
+        onClick?.(event, curVal);
+    }
+
+    return (
+        <>
+            <tr draggable={draggable} onDragEnd={evDragEnd} onDragStart={evDragStart} data-id={index} data-key={rowKey} className={`row-obj ${rowChecked ? 'active' : ''} ${typeof onClick === 'undefined' ? '' : 'clickable'}`} onClick={handleClick}>
+                {data ? data.map((el: any, i: number) => {
+                    let headerItem = headerLabel![i];
+                    if (headerItem === undefined) headerItem = {type: false, content: ''};
+
+                    if ( i === 0 ) {
+                        return <TableFieldRow 
+                                    key={'th-row' + i} 
+                                    useRadio={useRadio}
+                                    columnHeader={headerItem.content.replace(/(<([^>]+)>)/ig, '')} 
+                                    cols={el.cols} 
+                                    content={el.content} 
+                                    width={el.width} 
+                                    style={el.style} 
+                                    index={i} 
+                                    checkboxNamePrefix={checkboxNamePrefix} 
+                                    rowKey={rowKey} 
+                                    updateCheckedPrint={updateCheckedPrint}
+                                    getCheckedPrint={getCheckedPrint}
+                                    updategetCheckedData={updategetCheckedData}
+                                    getCheckedData={getCheckedData}
+                                    updategetCheckedRootData={updategetCheckedRootData}
+                                    getCheckedRootData={getCheckedRootData}
+                                    onCheck={onCheck}
+                                    draggable={draggable}
+                                />;
+                    } else {
+                        return <TableField 
+                                    key={'td-row' + i} 
+                                    columnHeader={headerItem.content.replace(/(<([^>]+)>)/ig, '')} 
+                                    cols={el.cols} 
+                                    content={el.content} 
+                                    width={el.width} 
+                                    style={el.style} 
+                                    index={i} 
+                                />;
+                    }
+                    
+                }) : null}
+
+
+                {useRadio ? <>
+                    <td style={{display: 'none'}}>
+                        <Radio
+                            wrapperClassName=""
+                            options={`{
+                                "":"${nonExistentRowKey}"}`}
+                            name={`checkbox-${checkboxNamePrefix}-0`}
+                            tabIndex={-1}
+                            data-index={`${nonExistentRowKey?.replace('row-', '')}`}
+                            data-key={`${nonExistentRowKey}`}
+                            value={`${nonExistentRowKey}`}
+                        />
+                    </td>
+                </> : null}
+            </tr>
+
+        </>
+    )
+}
+
+export default TableRow;

package/lib/esm/Table/TableSummaries.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+/* Table Summaries
+-------------------------------------------------*/		
+type TableSummariesProps = {
+	data: any[];
+    footClassName?: string;
+};
+
+
+const TableSummaries = (props: TableSummariesProps) => {
+
+    const {
+        data,
+        footClassName
+    } = props;
+
+
+    return data ? (
+        <>
+           
+            <tfoot className={footClassName ? footClassName : ''}>
+                <tr>
+                    {data!.map((item: any, i: number) => {
+                        return <th key={i}>{item}</th>;
+                    })
+                    }
+                </tr>
+            </tfoot>
+        </>
+    ) : null;
+
+}
+
+export default TableSummaries;
+

package/lib/esm/Table/index.scss

@@ -0,0 +1,364 @@
+/* ======================================================
+    <!-- Table -->
+/* ====================================================== */
+
+.table__wrapper {
+    --table-alternant-bg: #f0f0f0;
+    --table-dark-bg: #212529;
+    --table-padding-x: 1rem;
+    --table-padding-y: 0.5rem;
+    --table-dis-top: 1rem;
+    --table-checkbox-indeterminate-color: #bbbbbb;
+    --table-row-active-bg: #f0f8ff;
+
+    table {
+        
+        td,
+        th {
+            position: relative;
+        }
+
+        tr {
+            transition: 0.1s ease-in-out;
+            
+            &.active {
+                background-color: var(--table-row-active-bg);
+            }
+
+            &.clickable {
+                cursor: pointer;
+            }
+
+        }
+
+        &.table-colgroup {
+            tbody tr td:first-child,
+            tbody tr th:first-child {
+                color: #fff;
+            }
+
+            col:nth-child(odd) {
+                background-color: var(--table-alternant-bg);
+            }
+
+            col:first-child {
+                background-color: var(--table-dark-bg);
+            }
+
+        }
+
+    }
+
+    .sort-trigger {
+        cursor: pointer;
+
+        svg {
+            transition: 0.1s ease-in-out;
+            opacity: .3;
+        }
+
+        &:hover svg {
+            transform: scale(1.2);
+            opacity: .7;
+        }
+        
+    }
+
+    .checkbox-trigger {
+        display: none;
+        position: absolute;
+        left: calc(var(--table-padding-x) / 2);
+        z-index: 2;
+
+        > div {
+            display: inline-block;
+
+            .form-check {
+                min-height: auto;
+                margin-bottom: 0;
+
+                [type=checkbox]:indeterminate {
+                    background-color: var(--table-checkbox-indeterminate-color);
+                    border-color: var(--table-checkbox-indeterminate-color);
+                }
+
+            }
+        } 
+
+    }
+
+    .drag-trigger {
+        display: none;
+        position: absolute;
+        left: calc(var(--table-padding-x) / 2);
+        z-index: 3;
+        cursor: move;
+        opacity: .5;
+    }
+
+
+
+    /*------ enable sort  ------*/
+    .newsort {
+        animation: table-newsort .5s linear 1 forwards;
+        opacity: 0;
+    }
+    
+    @for $i from 1 to 100 {
+    
+        .newsort:nth-child(#{$i+1}) {
+            animation-delay: #{$i*50}ms;
+        }
+    }
+    
+    
+
+
+    /*------ has checkbox  ------*/
+    &.has-checkbox {
+        .checkbox-trigger {
+            display: inline-block;
+
+            ~span:not(.sort-trigger) {
+                display: inline-block;
+                padding-left: calc(var(--table-padding-x)*1.5);
+            }  
+        }
+
+
+    }
+    
+    
+    /*------ allow drag and drop  ------*/
+    &.allow-dragdrop {
+
+
+        /* Specify a drag trigger point */
+        tbody {
+
+            .row-obj-clonelast {
+
+                height: 0 !important;
+             
+                td {
+                    border: none;
+                    box-shadow: none;
+                }
+            }
+
+            td,
+            th {
+                pointer-events: none;
+                user-select: auto;
+            }
+
+            &.drag-trigger-mousedown {
+
+                td,
+                th {
+                    pointer-events: auto;
+                }
+            }
+
+        }
+
+        /* placeholder */
+        .row-placeholder {
+            border: 2px dotted #b5ba91;
+            background-color: #e4e9c3;
+        }
+        
+        /* trigger */
+        .drag-trigger {
+            display: inline-block;
+            pointer-events: auto;
+
+            ~span:not(.checkbox-trigger) {
+                display: inline-block;
+                padding-left: calc(var(--table-padding-x)*1.5);
+            }  
+        }
+    }
+    
+    &.allow-dragdrop.has-checkbox {
+        .drag-trigger {
+            ~span:not(.checkbox-trigger) {
+                padding-left: calc(var(--table-padding-x)*3);
+            }  
+        }
+        
+        tbody .checkbox-trigger {
+            padding-left: calc(var(--table-padding-x)*1.5);
+        }
+
+    }
+
+
+}
+
+
+@keyframes table-newsort {
+    0%   {
+        opacity: 0;
+        transform: translateX(10px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+
+
+
+@media all and (max-width: 768px) {
+
+    .table__wrapper {
+        --table-border-color: #dee2e6;
+        --table-per-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
+
+        /*------ Enhanced Responsive ------*/
+        &.table-enhanced-responsive {
+
+            table {
+
+                thead {
+                    display: none;
+                }
+
+                tbody {
+
+                    tr {
+                        box-shadow: var(--table-per-shadow);
+                        margin-bottom: 1rem;
+                        display: block;
+                    }
+
+                    tr:nth-of-type(even) {
+                        //background-color: $table-alternant-bg;
+                    }
+
+                    
+                    td,
+                    th {
+                        display: block;
+
+
+                        &::before {
+                            content: attr(data-table-text);
+                            display: block;
+                            float: left;
+                            width: 40%;
+                            font-weight: bold;
+                            border-right: 1px solid var(--table-border-color);
+                            margin-right: 0.5rem;
+                        }
+
+                        &::after {
+                            content: '';
+                            display: block;
+                            clear: both;
+                        }
+                    }
+
+                }
+
+
+            }
+
+            &.has-checkbox {
+                .checkbox-trigger {
+                    position: relative;
+                    left: auto;
+                    
+                    ~span {
+                        padding-left: 0;
+                    }  
+                }
+
+            } 
+        }
+
+
+
+        /*------ Enhanced Responsive with Scroll Bars ------*/
+        &.table-enhanced-responsive-scrolled {
+
+            table {
+                display: block;
+                width: 100%;
+                border-bottom: 0 !important;
+                border-left: 0 !important;
+                border-right: 0 !important;
+                overflow: auto;
+
+
+                thead {
+                    display: block;
+                    float: left;
+                    width: 100px;
+                    border-bottom: 1px solid var(--table-border-color);
+
+                    th {
+                        display: block;
+
+                        &:not(last-child) {
+                            border-bottom: 0;
+                        }
+
+                    }
+                }
+
+                tbody {
+                    width: calc(100% - 100px);
+                    display: block;
+                    float: left;
+                    overflow-x: scroll;
+                    border-bottom: 1px solid var(--table-border-color);
+                    border-right: 1px solid var(--table-border-color);
+                }
+
+                thead tr,
+                tbody tr {
+                    display: block;
+                    border-color: var(--table-border-color);
+                }
+
+                th,
+                tbody td,
+                tbody th {
+                    box-sizing: border-box;
+                    overflow-x: hidden;
+                    overflow-y: auto;
+
+                    &:first-child {
+                        border-top: 0;
+                    }
+
+                    &:not(last-child) {
+                        border-bottom: 0;
+                        border-right: 0;
+                    }
+
+                }
+
+
+                tbody tr {
+                    display: table-cell;
+
+                }
+
+                tbody td,
+                tbody th {
+                    display: block;
+                }
+
+            }
+
+
+        }
+    }
+
+}
+