aio-table 14.0.0 → 14.0.1

package/index.css

@@ -163,9 +163,9 @@
     background: #f8f8f8;
     z-index: 100;
     box-sizing: border-box;
-    min-height: 36px;
-    gap: 6px;
-    padding: 6px;
+    height:3em;
+    gap: 0.4em;
+    padding: 0.4em;
 }
 
 .aio-table-toolbar-content {
@@ -219,6 +219,7 @@
     flex: 1;
     height: 100%;
     box-sizing: border-box;
+    border:none;
 }
 
 .aio-table-search .aio-input {

package/index.d.ts

@@ -93,6 +93,13 @@ export type I_table_column<T> = {
     pattern?: string;
     affix?: string;
     prefix?: string;
+    cellAttrs?: (p: {
+        row: T;
+        column: I_table_column<T>;
+        value: any;
+        rowIndex: number;
+    }) => any;
+    titleAttrs?: (column: I_table_column<T>) => any;
 };
 export type I_table_filter_saved = {
     name: string;
@@ -125,25 +132,18 @@ export type I_table<T> = {
     columns?: I_table_column<T>[];
     excel?: string | ((value: any[]) => any[]);
     headerAttrs?: any;
-    onAdd?: () => Promise<T | undefined>;
-    onRemove?: (p: {
-        row: T;
-        rowIndex?: number;
-    }) => Promise<boolean>;
     onChangePaging?: (newPaging: I_table_paging) => void;
     onChangeSort?: (sorts: I_table_sort<T>[]) => Promise<boolean>;
-    onSwap?: true | ((newValue: T[], startRow: T, endRow: T) => void);
+    onSwap?: (newValue: T[], startRow: T, endRow: T) => void;
     onSearch?: true | ((searchValue: string) => void);
     paging?: I_table_paging;
     removeText?: string;
-    rowOption?: {
-        before?: I_rowOption<T, ReactNode>;
-        after?: I_rowOption<T, ReactNode>;
-        attrs?: I_rowOption<T, {
-            [attrs: string]: any;
-        }>;
-        template?: I_rowOption<T, ReactNode>;
-    };
+    rowAttrs?: I_rowOption<T, {
+        [attrs: string]: any;
+    }>;
+    rowBefore?: I_rowOption<T, ReactNode>;
+    rowAfter?: I_rowOption<T, ReactNode>;
+    rowTemplate?: I_rowOption<T, ReactNode>;
     rowsTemplate?: (rows: T[]) => ReactNode;
     toolbar?: ReactNode | (() => ReactNode);
     toolbarAttrs?: any;
@@ -227,4 +227,3 @@ export type I_pagingHook<T> = {
     getPagedRows: (rows: T[]) => T[];
     changePaging: (obj: Partial<I_table_paging>) => void;
 };
-export declare function sortRows<T>(rows: T[], sorts: I_table_sort<T>[]): T[];

package/index.js

@@ -57,7 +57,11 @@ const AIOTable = (props) => {
                 }
             }
         }
-        return Object.assign(Object.assign({}, column), col);
+        const res = Object.assign(Object.assign({}, column), col);
+        if (!res.value) {
+            res.value = `row.${column.id}`;
+        }
+        return res;
     };
     const getColumns = () => {
         let { columns = [] } = props;
@@ -141,28 +145,6 @@ const AIOTable = (props) => {
             pagingHook.changePaging(props.paging);
         }
     }, [JSON.stringify(props.paging)]);
-    function add() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!props.onAdd) {
-                return;
-            }
-            const res = yield props.onAdd();
-            if (res && props.onChange) {
-                props.onChange([res, ...props.value]);
-            }
-        });
-    }
-    function remove(row, index) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!props.onRemove) {
-                return;
-            }
-            const res = yield props.onRemove({ row, rowIndex: index });
-            if (res === true && props.onChange) {
-                props.onChange(props.value.filter((o) => o._id !== row._id));
-            }
-        });
-    }
     function exportToExcel() {
         let list = [];
         if (typeof props.excel === 'function') {
@@ -230,11 +212,11 @@ const AIOTable = (props) => {
             props.onSearch(searchValue);
         }
     }
-    let ROWS = getRows();
     const { columns, searchColumns, excelColumns, filterColumns, toggleColumns } = useMemo(() => getColumns(), [props.columns]);
+    let ROWS = getRows();
     const context = {
         rootProps: props, excelColumns, filterColumns, tableHook, sortHook, ROWS, toggleColumns, pagingHook,
-        add, remove, search, exportToExcel, DragColumns, popup, columns
+        search, exportToExcel, DragColumns, popup, columns
     };
     return (_jsxs(Provider, { value: context, children: [_jsx(AIOTableComponent, Object.assign({}, props)), popup.render()] }));
 };
@@ -250,27 +232,50 @@ const AIOTableComponent = (props) => {
 };
 const TableRows = () => {
     let { ROWS, rootProps } = useProvider();
-    let { rowOption = {}, rowsTemplate, placeholder = 'there is not any items' } = rootProps;
-    const { before: rowBefore = () => null, after: rowAfter = () => null, template: rowTemplate, } = rowOption;
+    let { rowBefore = () => null, rowAfter = () => null, rowTemplate, rowsTemplate, placeholder = 'there is not any items' } = rootProps;
     let rows = ROWS.pagedRows || [];
     let content;
     if (rowsTemplate) {
         content = rowsTemplate(rows);
     }
     else if (rows.length) {
-        content = rows.map((o, i) => {
-            let { id = 'ailr' + Math.round(Math.random() * 10000000) } = o;
-            o._id = o._id === undefined ? id : o._id;
-            const rowDetail = { row: o, rowIndex: i };
-            let Row;
-            if (rowTemplate) {
-                Row = rowTemplate(rowDetail);
-            }
-            else {
-                Row = _jsx(TableRow, { rowDetail: rowDetail }, o._id);
-            }
-            return (_jsxs(Fragment, { children: [rowBefore(rowDetail), Row, rowAfter(rowDetail)] }, o._id));
-        });
+        if (rootProps.onSwap) {
+            content = (_jsx(UT.DragAndDrop, { data: rows, getId: (o) => {
+                    let { id = 'ailr' + Math.round(Math.random() * 10000000) } = o;
+                    o._id = o._id === undefined ? id : o._id;
+                    return o._id;
+                }, getContent: (o, { index, id }) => {
+                    o._id = o._id === undefined ? id : o._id;
+                    const rowDetail = { row: o, rowIndex: index };
+                    let Row;
+                    if (rowTemplate) {
+                        Row = rowTemplate(rowDetail);
+                    }
+                    else {
+                        Row = _jsx(TableRow, { rowDetail: rowDetail }, o._id);
+                    }
+                    return (_jsxs(Fragment, { children: [rowBefore(rowDetail), Row, rowAfter(rowDetail)] }, o._id));
+                }, onChange: (newRows) => {
+                    if (rootProps.onChange) {
+                        rootProps.onChange(newRows);
+                    }
+                } }));
+        }
+        else {
+            content = rows.map((o, i) => {
+                let { id = 'ailr' + Math.round(Math.random() * 10000000) } = o;
+                o._id = o._id === undefined ? id : o._id;
+                const rowDetail = { row: o, rowIndex: i };
+                let Row;
+                if (rowTemplate) {
+                    Row = rowTemplate(rowDetail);
+                }
+                else {
+                    Row = _jsx(TableRow, { rowDetail: rowDetail }, o._id);
+                }
+                return (_jsxs(Fragment, { children: [rowBefore(rowDetail), Row, rowAfter(rowDetail)] }, o._id));
+            });
+        }
     }
     else if (placeholder) {
         content = _jsx("div", { style: { width: '100%', textAlign: 'center', padding: 12, boxSizing: 'border-box' }, children: placeholder });
@@ -282,12 +287,12 @@ const TableRows = () => {
     return _jsx("div", { className: 'aio-table-rows', style: { gap: gap[1] }, children: content });
 };
 const TableToolbar = ({ filterHook }) => {
-    let { add, exportToExcel, search, rootProps, excelColumns, toggleColumns, sortHook, columns } = useProvider();
-    let { toolbarAttrs, toolbar, onAdd, onSearch, value, onChangeColumns, fa, filter, inlineSort } = rootProps;
+    let { exportToExcel, search, rootProps, excelColumns, toggleColumns, sortHook, columns } = useProvider();
+    let { toolbarAttrs, toolbar, onSearch, value, onChangeColumns, fa, filter, inlineSort } = rootProps;
     const columnsRef = useRef(columns);
     columnsRef.current = columns;
     toolbarAttrs = UT.AddToAttrs(toolbarAttrs, { className: 'aio-table-toolbar' });
-    if (!onAdd && !toolbar && !onSearch && !sortHook.sorts.length && !excelColumns.length && !toggleColumns.length && !filter) {
+    if (!toolbar && !onSearch && !sortHook.sorts.length && !excelColumns.length && !toggleColumns.length && !filter) {
         return null;
     }
     function getAddText() {
@@ -317,18 +322,17 @@ const TableToolbar = ({ filterHook }) => {
                         show: () => true,
                         justify: () => false,
                         close: () => false
-                    } }), !!onAdd && _jsx("div", { className: 'aio-table-toolbar-button aio-table-add-button', onClick: () => add(), children: getAddText() })] })));
+                    } })] })));
 };
 const TableHeader = () => {
     let { rootProps, columns } = useProvider();
-    let { headerAttrs, onRemove, gap = [] } = rootProps;
+    let { headerAttrs, gap = [] } = rootProps;
     headerAttrs = UT.AddToAttrs(headerAttrs, { className: 'aio-table-header', style: { gap: gap[0] } });
     let Titles = columns.map((column, i) => {
         const columnId = column.id;
         return _jsx(TableTitle, { column: column, isLast: i === columns.length - 1, colIndex: i }, columnId);
     });
-    let RemoveTitle = !onRemove ? null : _jsx("div", { className: 'aio-table-remove-title' });
-    return _jsxs("div", Object.assign({}, headerAttrs, { children: [Titles, RemoveTitle] }));
+    return _jsx("div", Object.assign({}, headerAttrs, { children: Titles }));
 };
 const TableTitle = (p) => {
     const { column, colIndex } = p;
@@ -344,7 +348,7 @@ const TableRow = (props) => {
     const { rowDetail } = props;
     const { row, rowIndex } = rowDetail;
     const rowId = row._id;
-    let { remove, rootProps, tableHook, columns } = useProvider();
+    let { rootProps, tableHook, columns } = useProvider();
     function getCells() {
         return columns.map((column) => {
             const { show = true } = column;
@@ -356,14 +360,12 @@ const TableRow = (props) => {
             return (_jsx(TableCell, { row: row, rowIndex: rowIndex, column: column }, key));
         });
     }
-    let { onRemove } = rootProps;
-    return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({}, tableHook.getRowAttrs({ row, rowIndex }), { children: [getCells(), onRemove ? _jsx("button", { className: 'aio-table-remove', onClick: () => remove(row, rowIndex), children: new UT.GetSvg('em').getIcon('mdiClose', 0.8) }) : null] }), rowId) }));
+    return (_jsx("div", Object.assign({}, tableHook.getRowAttrs({ row, rowIndex }), { children: getCells() }), rowId));
 };
 const TableCell = (props) => {
     var _a, _b;
     let { row, column, rowIndex } = props;
-    const { tableHook, rootProps } = useProvider();
-    const { templates } = rootProps;
+    const { tableHook } = useProvider();
     const { type = 'text', id } = column;
     let cellValue = tableHook.getCellValue({ row, rowIndex, column });
     if (type === 'date') {
@@ -417,18 +419,6 @@ const TableCell = (props) => {
     return (_jsx(Fragment, { children: _jsxs("div", Object.assign({}, tableHook.getCellAttrs({ row, column, rowIndex }), { children: [before !== undefined && _jsx("div", { className: "aio-table-cell-before", children: before }), _jsx("div", { className: `aio-table-cell-value${subtext !== undefined ? ' has-subtext' : ''}`, "data-subtext": subtext, children: content }), after !== undefined && _jsx("div", { className: "aio-table-cell-after", children: after })] })) }, rowId + ' ' + colId));
 };
 const useTable = (getProps, getPaging) => {
-    const DragRows = UT.useDrag((dragIndex, dropIndex, reOrder) => {
-        const { onSwap, onChange, value: rows } = getProps();
-        const newRows = reOrder(rows, dragIndex, dropIndex);
-        const from = rows[dragIndex];
-        const to = rows[dropIndex];
-        if (typeof onSwap === 'function') {
-            onSwap(newRows, from, to);
-        }
-        else if (onChange) {
-            onChange(newRows);
-        }
-    }, 'aio-table-row');
     const fixIndexByPaging = (rowIndex) => {
         const paging = getPaging();
         if (paging) {
@@ -531,7 +521,9 @@ const useTable = (getProps, getPaging) => {
         const { row, rowIndex, column } = p;
         const { cellAttrs } = getProps();
         const cellValue = getCellValue({ row, column, rowIndex });
-        const attrs = cellAttrs ? cellAttrs({ row, rowIndex: fixIndexByPaging(rowIndex), column, value: cellValue }) : {};
+        const propsCellAttrs = cellAttrs ? cellAttrs({ row, rowIndex: fixIndexByPaging(rowIndex), column, value: cellValue }) : {};
+        const columnCellAttrs = column.cellAttrs ? column.cellAttrs({ row, rowIndex: fixIndexByPaging(rowIndex), column, value: cellValue }) : {};
+        const attrs = Object.assign(Object.assign({}, propsCellAttrs), columnCellAttrs);
         const { justify, width, minWidth } = column;
         const className = `aio-table-cell` + (justify ? ` aio-table-cell-justify` : '');
         let isNumber = false;
@@ -550,19 +542,20 @@ const useTable = (getProps, getPaging) => {
     const getTitleAttrs = (column) => {
         const { justify, width, minWidth, title } = column;
         const { titleAttrs } = getProps();
-        const attrs = titleAttrs ? titleAttrs(column) : {};
+        const propsTitleAttrs = titleAttrs ? titleAttrs(column) : {};
+        const columnTitleAttrs = column.titleAttrs ? column.titleAttrs(column) : {};
+        const attrs = Object.assign(Object.assign({}, propsTitleAttrs), columnTitleAttrs);
         const className = `aio-table-title` + (justify ? ` aio-table-title-justify` : '');
         const style = { width, minWidth, flex: width ? undefined : 1 };
         return UT.AddToAttrs(attrs, { className, style, attrs: { title: typeof title === 'string' ? title : undefined } });
     };
     const getRowAttrs = (p) => {
         const { row, rowIndex } = p;
-        const { rowOption = {}, onSwap, gap = [] } = getProps();
-        const { attrs: rowAttrs } = rowOption;
+        const { onSwap, gap = [], rowAttrs } = getProps();
         const attrs = rowAttrs ? rowAttrs({ row, rowIndex }) : {};
         let obj = UT.AddToAttrs(attrs, { className: ['aio-table-row', rowIndex % 2 === 0 ? 'aio-table-row-odd' : 'aio-table-row-even'], style: { gap: gap[0] } });
         if (onSwap) {
-            obj = Object.assign(Object.assign(Object.assign({}, obj), DragRows.getDragAttrs(rowIndex)), DragRows.getDropAttrs(rowIndex));
+            obj = Object.assign({}, obj);
         }
         return obj;
     };
@@ -571,6 +564,10 @@ const useTable = (getProps, getPaging) => {
 export const useSort = (p) => {
     let [sorts, setSorts] = useState(p.sorts);
     const isInitSortExecutedRef = useRef(false);
+    const getActiveSorts = (sorts) => {
+        let activeSorts = (sorts || []).filter((sort) => sort.active !== false);
+        return activeSorts.map((o) => ({ getValue: o.getValue, dir: o.dir }));
+    };
     const getSortedRows = (rows) => {
         if (isInitSortExecutedRef.current) {
             return rows;
@@ -578,44 +575,17 @@ export const useSort = (p) => {
         if (p.onChangeSort) {
             return rows;
         }
-        let activeSorts = sorts.filter((sort) => sort.active !== false);
+        let activeSorts = getActiveSorts(sorts);
         if (!activeSorts.length || !rows.length) {
             return rows;
         }
         isInitSortExecutedRef.current = true;
-        let sortedRows = sortRows(rows, activeSorts);
+        let sortedRows = UT.SortArray(rows, activeSorts);
         if (p.onChangeRows) {
             p.onChangeRows(sortedRows);
         }
         return sortedRows;
     };
-    const sortRows = (rows, sorts) => {
-        if (!rows) {
-            return [];
-        }
-        if (!sorts || !sorts.length) {
-            return rows;
-        }
-        return rows.sort((a, b) => {
-            for (let i = 0; i < sorts.length; i++) {
-                let { dir, getValue } = sorts[i];
-                if (!getValue) {
-                    return 0;
-                }
-                let aValue = getValue(a), bValue = getValue(b);
-                if (aValue < bValue) {
-                    return -1 * (dir === 'dec' ? -1 : 1);
-                }
-                if (aValue > bValue) {
-                    return 1 * (dir === 'dec' ? -1 : 1);
-                }
-                if (i === sorts.length - 1) {
-                    return 0;
-                }
-            }
-            return 0;
-        });
-    };
     const changeSort = (sortId, changeObject) => {
         let newSorts = sorts.map((sort) => {
             if (sort.sortId === sortId) {
@@ -635,9 +605,9 @@ export const useSort = (p) => {
         }
         else {
             setSorts(sorts);
-            let activeSorts = sorts.filter((sort) => sort.active !== false);
+            const activeSorts = getActiveSorts(sorts);
             if (activeSorts.length && !!p.onChangeRows) {
-                p.onChangeRows(sortRows(p.rows, activeSorts));
+                p.onChangeRows(UT.SortArray(p.rows, activeSorts));
             }
         }
     });
@@ -1222,30 +1192,3 @@ const useFilterData = (popup, trans) => {
     };
     return { getSaves, getData, save, removeSave, removeFilterItem, changeColumnsFilterItem, activeName, activeSave, addColumnsFilterItem };
 };
-export function sortRows(rows, sorts) {
-    if (!rows) {
-        return [];
-    }
-    if (!sorts || !sorts.length) {
-        return rows;
-    }
-    return rows.sort((a, b) => {
-        for (let i = 0; i < sorts.length; i++) {
-            let { dir, getValue } = sorts[i];
-            if (!getValue) {
-                return 0;
-            }
-            let aValue = getValue(a), bValue = getValue(b);
-            if (aValue < bValue) {
-                return -1 * (dir === 'dec' ? -1 : 1);
-            }
-            if (aValue > bValue) {
-                return 1 * (dir === 'dec' ? -1 : 1);
-            }
-            if (i === sorts.length - 1) {
-                return 0;
-            }
-        }
-        return 0;
-    });
-}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "aio-table",
-    "version": "14.0.0",
+    "version": "14.0.1",
     "description": "all in one table. tree mode , simple mode , tree mode, gantt mode , groupby mode, freeze mode.",
     "main": "index.js",
     "types": "index.d.ts",