aio-table 9.3.1 → 11.0.0

package/index.d.ts

@@ -12,7 +12,7 @@ type I_rowDetail<T> = {
 type I_cellDetail<T> = I_rowDetail<T> & {
     column: I_table_column<T>;
     change: (newRow: T) => void;
-    isDate: boolean;
+    date: number[];
 };
 export type I_table_paging = UT.I_paging;
 export type I_table_sort<T> = UT.I_sort<T>;
@@ -22,10 +22,10 @@ export type I_table_filter_saved_item = UT.I_filter_saved_item;
 export type I_table_column<T> = {
     title?: any;
     sort?: true | I_table_sort<T>;
+    jalali?: boolean;
     filterId?: string;
     search?: boolean;
-    id?: string;
-    _id?: string;
+    id: string;
     width?: any;
     minWidth?: any;
     excel?: string | boolean;
@@ -41,7 +41,10 @@ export type I_table_column<T> = {
     titleAttrs?: {
         [attrs: string]: any;
     };
-    type?: 'text' | 'number' | 'month' | 'day' | 'hour' | 'minute';
+    type?: 'text' | 'number' | 'date';
+    show?: boolean;
+    pattern?: string;
+    data?: any;
 };
 export type I_table<T> = {
     fa?: boolean;
@@ -94,8 +97,8 @@ export type I_table<T> = {
     filter?: I_table_filter;
     gap?: [number, number];
     striped?: [string, string];
-    visibleColumns?: {
-        [columnId: string]: boolean | undefined;
+    columnOption?: {
+        [key in keyof I_table_column<any>]?: (p: I_cellDetail<any>) => any;
     };
     onChangeColumns?: (v: I_table_column<any>[]) => void;
 };

package/index.js

@@ -21,7 +21,6 @@ const AIOTable = (props) => {
     const popup = usePopup();
     let [dom] = useState(createRef());
     let [searchValue, setSearchValue] = useState('');
-    const [columns, setColumns] = useState([]);
     const [searchColumns, setSearchColumns] = useState([]);
     const [excelColumns, setExcelColumns] = useState([]);
     const [filterColumns, setFilterColumns] = useState([]);
@@ -33,24 +32,46 @@ const AIOTable = (props) => {
     const propsRef = useRef(props);
     propsRef.current = props;
     const pagingHook = UT.usePaging({ rows: props.value, paging: props.paging, onChange: props.onChangePaging });
-    const tableHook = useTable(() => propsRef.current, () => props.paging);
+    const getColumnOption = (key, cellDetails) => {
+        const columnValue = cellDetails.column[key];
+        if (columnValue !== undefined) {
+            const { getValue = {} } = props;
+            if (getValue[columnValue]) {
+                return getValue[columnValue](cellDetails);
+            }
+            return cellDetails.column[key];
+        }
+        const { columnOption } = props;
+        const fn = (columnOption || {})[key] || (() => { });
+        const res = fn(cellDetails);
+        if (res !== undefined) {
+            return res;
+        }
+        if (key === 'value') {
+            return cellDetails.row[cellDetails.column.id];
+        }
+        const defaults = { show: true, title: '', justify: false, titleAttrs: {} };
+        return defaults[key];
+    };
+    const tableHook = useTable(() => propsRef.current, () => props.paging, getColumnOption);
     const getIconRef = useRef(new UT.GetSvg());
     const getIcon = getIconRef.current.getIcon;
     const DragColumns = UT.useDrag((dragIndex, dropIndex, reOrder) => {
-        const newColumns = reOrder(columns, dragIndex, dropIndex);
+        const newColumns = reOrder(props.columns || [], dragIndex, dropIndex);
         if (props.onChangeColumns) {
             props.onChangeColumns(newColumns);
         }
-        setColumns(newColumns);
-    });
+    }, 'aio-table-title', 'aio-table-unit');
     const getGetValue = (sort, column) => {
         if (sort.getValue) {
             return sort.getValue;
         }
         return (row) => {
-            const isDate = ['month', 'day', 'hour', 'minute'].indexOf(column.type || 'text') !== -1;
-            const cellValue = tableHook.getCellValue({ row, rowIndex: 0, isFirst: false, isLast: false, column, change: () => { }, isDate }, column.value);
-            if (isDate) {
+            const cellDetail = tableHook.getCellDetail({ column, row });
+            const type = getColumnOption('type', cellDetail) || 'text';
+            const value = getColumnOption('value', cellDetail);
+            const cellValue = tableHook.getCellValue(cellDetail, value);
+            if (type === 'date') {
                 const DATE = new AIODate();
                 try {
                     return DATE.getTime(cellValue);
@@ -66,38 +87,37 @@ const AIOTable = (props) => {
         let sorts = [];
         for (let i = 0; i < columns.length; i++) {
             const column = columns[i];
-            const { _id } = column;
-            const sort = column.sort === true ? { sortId: _id } : column.sort;
+            const cellDetail = tableHook.getCellDetail({ column });
+            const columnId = getColumnOption('id', cellDetail);
+            const sortValue = getColumnOption('sort', cellDetail);
+            const sort = sortValue === true ? { sortId: columnId } : sortValue;
             if (!sort) {
                 continue;
             }
             let { active = false, dir = 'dec', sortId } = sort;
-            let sortItem = { dir, title: sort.title || column.title, sortId, active, getValue: getGetValue(sort, column) };
+            let sortItem = { dir, title: sort.title || getColumnOption('title', cellDetail), sortId, active, getValue: getGetValue(sort, column) };
             sorts.push(sortItem);
         }
         return sorts;
     };
-    const isColumnVisible = (column) => {
-        const { visibleColumns = {} } = props;
-        const { filterId } = column;
-        if (!filterId) {
-            return true;
-        }
-        return !!visibleColumns[filterId];
-    };
     const sortHook = UT.useSort({
         sorts: [],
         rows: propsRef.current.value,
         onChangeRows: props.onChange,
         onChangeSort: props.onChangeSort,
     });
-    const isDate = (column) => ['month', 'day', 'hour', 'minute'].indexOf(column.type || 'text') !== -1;
     function getColumns() {
         let { columns = [] } = props;
         let searchColumns = [], excelColumns = [], filterColumns = [];
-        let updatedColumns = columns.map((o) => {
-            let { id = 'aitc' + Math.round(Math.random() * 1000000), filterId, search, excel } = o;
-            let column = Object.assign(Object.assign({}, o), { _id: id });
+        let updatedColumns = columns.map((column, i) => {
+            const cellDetail = tableHook.getCellDetail({ column });
+            const filterId = getColumnOption('filterId', cellDetail);
+            const search = getColumnOption('search', cellDetail);
+            const excel = getColumnOption('excel', cellDetail);
+            const id = getColumnOption('id', cellDetail);
+            if (id === undefined) {
+                console.error(`aio-table error => missing column id in props.columns[${i}]`);
+            }
             if (search) {
                 searchColumns.push(column);
             }
@@ -109,7 +129,9 @@ const AIOTable = (props) => {
             }
             return column;
         });
-        setColumns(updatedColumns);
+        if (props.onChangeColumns) {
+            props.onChangeColumns(updatedColumns);
+        }
         setSearchColumns(searchColumns);
         setExcelColumns(excelColumns);
         setFilterColumns(filterColumns);
@@ -124,27 +146,6 @@ const AIOTable = (props) => {
             pagingHook.changePaging(props.paging);
         }
     }, [JSON.stringify(props.paging)]);
-    function getTimeText(column, value) {
-        if (!value || value === null) {
-            return '';
-        }
-        const t = column.type;
-        const DATE = new AIODate();
-        let pattern = '{year}/{month}';
-        if (t !== 'month') {
-            pattern += '/{day}';
-            if (t !== 'day') {
-                pattern += ' {hour}';
-                if (t === 'minute') {
-                    pattern += ' : {minute}';
-                }
-                else {
-                    pattern += ' : 00';
-                }
-            }
-        }
-        return DATE.getDateByPattern(value, pattern);
-    }
     function add() {
         return __awaiter(this, void 0, void 0, function* () {
             if (!props.onAdd) {
@@ -178,11 +179,14 @@ const AIOTable = (props) => {
                 const isLast = rowIndex === props.value.length - 1;
                 let row = props.value[rowIndex], json = {};
                 for (let j = 0; j < excelColumns.length; j++) {
-                    const column = excelColumns[j], { excel } = column;
+                    const column = excelColumns[j];
+                    const cellDetail = tableHook.getCellDetail({ row, rowIndex, isFirst, isLast, column });
+                    const excel = getColumnOption('excel', cellDetail);
                     let key = '';
                     if (excel === true) {
-                        if (typeof column.title === 'string') {
-                            key = column.title;
+                        const title = getColumnOption('title', cellDetail);
+                        if (typeof title === 'string') {
+                            key = title;
                         }
                         else {
                             key = 'untitle';
@@ -194,8 +198,8 @@ const AIOTable = (props) => {
                     else {
                         continue;
                     }
-                    const cellDetail = { row, rowIndex, isFirst, isLast, column, change: () => { }, isDate: isDate(column) };
-                    json[key] = tableHook.getCellValue(cellDetail, column.value, '');
+                    const value = getColumnOption('value', cellDetail);
+                    json[key] = tableHook.getCellValue(cellDetail, value, '');
                 }
                 list.push(json);
             }
@@ -215,8 +219,9 @@ const AIOTable = (props) => {
             let str = '';
             for (let i = 0; i < searchColumns.length; i++) {
                 let column = searchColumns[i];
-                const cellDetail = { row, rowIndex, isFirst, isLast, column, change: () => { }, isDate: isDate(column) };
-                let cellValue = tableHook.getCellValue(cellDetail, column.value, '');
+                const cellDetail = tableHook.getCellDetail({ row, rowIndex, isFirst, isLast, column });
+                const value = getColumnOption('value', cellDetail);
+                let cellValue = tableHook.getCellValue(cellDetail, value, '');
                 if (cellValue) {
                     str += cellValue + ' ';
                 }
@@ -244,29 +249,19 @@ const AIOTable = (props) => {
             props.onSearch(searchValue);
         }
     }
-    const changeCell = (cellDetail, cellNewValue) => {
-        if (cellNewValue) { }
-        if (!props.onChange) {
-            return;
-        }
-        const { column } = cellDetail;
-        if (typeof column.value !== 'string' || column.value.indexOf('row.') !== 0) {
-            return;
-        }
-        let row = JSON.parse(JSON.stringify(cellDetail.row));
-        const rowId = row._id;
-        eval(`${column.value} = cellNewValue`);
-        props.onChange(props.value.map((o) => o._id !== rowId ? o : row));
-    };
     let ROWS = getRows();
     const { gap = [0, 1] } = props;
     let attrs = UT.AddToAttrs(props.attrs, { className: ['aio-table', props.className], style: Object.assign({ gap: gap[1] }, props.style), attrs: { ref: dom } });
     const context = {
-        rootProps: props, getTimeText, isDate, columns, excelColumns, filterColumns, changeCell, tableHook, sortHook, ROWS,
-        getRowsIndexDic, add, remove, search, exportToExcel, DragColumns, getIcon, popup, isColumnVisible
+        rootProps: props, excelColumns, filterColumns, tableHook, sortHook, ROWS,
+        getRowsIndexDic, add, remove, search, exportToExcel, DragColumns, getIcon, popup, getColumnOption
     };
     return (_jsxs(Provider, { value: context, children: [_jsxs("div", Object.assign({}, attrs, { children: [_jsx(TableToolbar, {}), !!props.filter &&
-                        _jsx(UT.Filterbar, { columns: filterColumns, filter: props.filter, fa: props.fa, columnOption: { text: (column) => column.title, id: (column) => column.filterId, type: (column) => column.type || 'text' } }), _jsxs("div", { className: 'aio-table-unit aio-table-scroll', style: { gap: gap[1] }, children: [_jsx(TableHeader, {}), _jsx(TableRows, {})] }), pagingHook.render()] })), popup.render()] }));
+                        _jsx(UT.Filterbar, { columns: filterColumns, filter: props.filter, fa: props.fa, columnOption: {
+                                text: (column) => getColumnOption('title', tableHook.getCellDetail({ column })),
+                                id: (column) => getColumnOption('filterId', tableHook.getCellDetail({ column })),
+                                type: (column) => getColumnOption('type', tableHook.getCellDetail({ column })) || 'text'
+                            } }), _jsxs("div", { className: 'aio-table-unit aio-table-scroll', style: { gap: gap[1] }, children: [_jsx(TableHeader, {}), _jsx(TableRows, {})] }), pagingHook.render()] })), popup.render()] }));
 };
 export default AIOTable;
 const TableRows = () => {
@@ -324,17 +319,20 @@ const TableToolbar = () => {
                 _jsx("div", { className: 'aio-table-search', children: _jsx(AIOInput, { type: 'text', onChange: (value) => search(value), after: getIcon('mdiMagnify', 0.7) }) }), sortHook.renderSortButton(), !!excelColumns.length && _jsx("div", { className: 'aio-table-toolbar-button', onClick: () => exportToExcel(), children: getIcon('mdiFileExcel', 0.8) }), !!onAdd && _jsx("div", { className: 'aio-table-toolbar-button', onClick: () => add(), children: getAddText() })] })));
 };
 const TableHeader = () => {
-    let { rootProps, columns } = useProvider();
-    let { headerAttrs, onRemove, gap = [0, 1] } = rootProps;
+    let { rootProps, getColumnOption, tableHook } = useProvider();
+    let { headerAttrs, onRemove, gap = [0, 1], columns = [] } = rootProps;
     headerAttrs = UT.AddToAttrs(headerAttrs, { className: 'aio-table-header', style: { gap: gap[0] } });
-    let Titles = columns.map((o, i) => _jsx(TableTitle, { column: o, isLast: i === columns.length - 1, colIndex: i }, o._id));
+    let Titles = columns.map((column, i) => {
+        const columnId = getColumnOption('id', tableHook.getCellDetail({ column }));
+        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] }));
 };
 const TableTitle = (p) => {
     const { column, colIndex } = p;
-    let { tableHook, DragColumns, isColumnVisible } = useProvider();
-    if (!isColumnVisible(column)) {
+    let { tableHook, DragColumns, getColumnOption } = useProvider();
+    if (!getColumnOption('show', tableHook.getCellDetail({ column }))) {
         return null;
     }
     const attrs = Object.assign(Object.assign(Object.assign({}, tableHook.getTitleAttrs(column)), DragColumns.getDragAttrs(colIndex)), DragColumns.getDropAttrs(colIndex));
@@ -344,27 +342,19 @@ const TableRow = (props) => {
     const { rowDetail } = props;
     const { row, rowIndex } = rowDetail;
     const rowId = row._id;
-    let { remove, rootProps, columns, tableHook, getIcon, isDate, isColumnVisible } = useProvider();
+    let { remove, rootProps, tableHook, getIcon, getColumnOption } = useProvider();
+    const { columns = [] } = rootProps;
     const isOdd = rowIndex % 2 === 0;
     function getCells() {
         return columns.map((column) => {
-            if (!isColumnVisible(column)) {
+            if (!getColumnOption('show', tableHook.getCellDetail(Object.assign(Object.assign({}, rowDetail), { column })))) {
                 return null;
             }
-            const key = rowId + ' ' + column._id;
-            const cellDetail = Object.assign(Object.assign({}, rowDetail), { column, change: (cellNewValue) => {
-                    if (cellNewValue) { }
-                    if (!rootProps.onChange) {
-                        return;
-                    }
-                    if (typeof column.value !== 'string' || column.value.indexOf('row.') !== 0) {
-                        return;
-                    }
-                    let row = JSON.parse(JSON.stringify(cellDetail.row));
-                    eval(`${column.value} = cellNewValue`);
-                    rootProps.onChange(rootProps.value.map((o) => o._id !== rowId ? o : row));
-                }, isDate: isDate(column) });
-            const cellValue = tableHook.getCellValue(cellDetail, column.value);
+            const cellDetail = tableHook.getCellDetail(Object.assign(Object.assign({}, rowDetail), { column, change: (v) => tableHook.changeCell(tableHook.getCellDetail(Object.assign(Object.assign({}, rowDetail), { column })), v) }));
+            const columnId = getColumnOption('id', cellDetail);
+            const key = rowId + ' ' + columnId;
+            const value = getColumnOption('value', cellDetail);
+            const cellValue = tableHook.getCellValue(cellDetail, value);
             return (_jsx(TableCell, { cellDetail: cellDetail, cellValue: cellValue, isOdd: isOdd }, key));
         });
     }
@@ -372,24 +362,49 @@ const TableRow = (props) => {
     return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({}, tableHook.getRowAttrs(props.rowDetail, isOdd), { children: [getCells(), onRemove ? _jsx("button", { className: 'aio-table-remove', onClick: () => remove(row, rowIndex), children: getIcon('mdiClose', 0.8) }) : null] }), rowId) }));
 };
 const TableCell = (props) => {
-    const { cellDetail, cellValue, isOdd } = props;
+    let { cellDetail, cellValue, isOdd } = props;
     const { row, column } = cellDetail;
-    const { tableHook, getTimeText, rootProps } = useProvider();
-    const { template, before, after, subtext } = column;
+    const { tableHook, rootProps, getColumnOption } = useProvider();
+    const { columnOption } = rootProps;
+    const type = getColumnOption('type', cellDetail);
+    if (type === 'number') {
+        cellValue = UT.SplitNumber(cellValue);
+    }
+    const before = getColumnOption('before', cellDetail);
+    const after = getColumnOption('after', cellDetail);
+    const subtext = getColumnOption('subtext', cellDetail);
     const rowId = row._id;
-    const colId = column._id;
-    const isTime = ['month', 'day', 'hour', 'minute'].indexOf(column.type || 'text') !== -1;
-    const templateValue = isTime ? getTimeText(cellValue) : tableHook.getCellValue(cellDetail, template);
+    const colId = getColumnOption('id', cellDetail);
+    const getTemplateValue = () => {
+        const { getValue = {} } = rootProps;
+        if (typeof column.template === 'function') {
+            return column.template(cellDetail);
+        }
+        if (typeof column.template === 'string' && getValue[column.template]) {
+            return getValue[column.template](cellDetail);
+        }
+        if ((columnOption || {}).template) {
+            return columnOption.template(cellDetail);
+        }
+        const pattern = getColumnOption('pattern', cellDetail);
+        if (pattern) {
+            if (type === 'date') {
+                return new AIODate().getDateByPattern(cellValue, pattern);
+            }
+            else {
+                return pattern.replace('{value}', cellValue);
+            }
+        }
+    };
+    const templateValue = getTemplateValue();
     const beforeValue = tableHook.getCellValue(cellDetail, before, undefined);
     const afterValue = tableHook.getCellValue(cellDetail, after, undefined);
     const subtextValue = tableHook.getCellValue(cellDetail, subtext, undefined);
     return (_jsx(Fragment, { children: _jsxs("div", Object.assign({}, tableHook.getCellAttrs(props.cellDetail, props.cellValue, isOdd, rootProps.striped), { children: [beforeValue !== undefined && _jsx("div", { className: "aio-table-cell-before", children: beforeValue }), _jsxs("div", { className: `aio-table-cell-value${subtext !== undefined ? ' has-subtext' : ''}`, "data-subtext": subtextValue, children: [templateValue !== undefined && templateValue, templateValue === undefined && cellValue] }), afterValue !== undefined && _jsx("div", { className: "aio-table-cell-after", children: afterValue })] })) }, rowId + ' ' + colId));
 };
-const useTable = (getProps, getPaging) => {
-    const DragRows = UT.useDrag((dragData, dropData, reOrder) => {
-        const { onSwap, onChange } = getProps();
-        const { dragIndex } = dragData;
-        const { dropIndex, rows } = dropData;
+const useTable = (getProps, getPaging, getColumnOption) => {
+    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];
@@ -399,7 +414,7 @@ const useTable = (getProps, getPaging) => {
         else if (onChange) {
             onChange(newRows);
         }
-    });
+    }, 'aio-table-row', 'aio-table-rows');
     const getCellValue = (cellDetail, cellValue, def) => {
         const { getValue = {} } = getProps();
         const paging = getPaging();
@@ -433,24 +448,28 @@ const useTable = (getProps, getPaging) => {
         }
         return cellValue === undefined ? def : cellValue;
     };
-    const getColValue = (column, field, def) => {
-        const colValue = column[field];
-        let type = typeof colValue;
-        let result;
-        if (type === 'function') {
-            result = colValue(column);
-        }
-        else {
-            result = colValue;
+    function changeCell(cellDetail, newRow) {
+        if (newRow) { }
+        const { onChange, value: propsValue } = getProps();
+        if (!onChange) {
+            return;
         }
-        return result === undefined ? def : result;
-    };
+        const rowId = cellDetail.row._id;
+        onChange(propsValue.map((o) => o._id !== rowId ? o : newRow));
+    }
+    function getCellDetail(v) {
+        const res = Object.assign({ column: {}, row: {}, rowIndex: 0, isFirst: false, isLast: false, date: [], change: () => { } }, v);
+        const value = getColumnOption('value', res);
+        const jalali = getColumnOption('jalali', res);
+        const date = res.column.type === 'date' ? new AIODate().convertToArray(getCellValue(res, value), jalali) : [];
+        return Object.assign(Object.assign(Object.assign({}, res), { date }), v);
+    }
     const getCellAttrs = (cellDetail, cellValue, isOdd, striped) => {
         const { column } = cellDetail;
         const attrs = getCellValue(cellDetail, column.attrs, {});
-        const justify = getColValue(column, 'justify', false);
-        const width = getColValue(column, 'width');
-        const minWidth = getColValue(column, 'minWidth');
+        const justify = getColumnOption('justify', cellDetail);
+        const width = getColumnOption('width', cellDetail);
+        const minWidth = getColumnOption('minWidth', cellDetail);
         const className = `aio-table-cell` + (justify ? ` aio-table-cell-justify` : '');
         const style = { width, minWidth, flex: width ? undefined : 1 };
         if (striped) {
@@ -459,13 +478,15 @@ const useTable = (getProps, getPaging) => {
         return UT.AddToAttrs(attrs, { className: [className, isOdd ? 'aio-table-cell-odd' : 'aio-table-cell-even'], style, attrs: { title: typeof cellValue === 'string' ? cellValue : undefined } });
     };
     const getTitleAttrs = (column) => {
-        const attrs = getColValue(column, 'titleAttrs', {});
-        const justify = getColValue(column, 'justify', false);
-        const width = getColValue(column, 'width');
-        const minWidth = getColValue(column, 'minWidth');
+        const cellDetail = getCellDetail({ column });
+        const attrs = getColumnOption('titleAttrs', cellDetail);
+        const justify = getColumnOption('justify', cellDetail);
+        const width = getColumnOption('width', cellDetail);
+        const minWidth = getColumnOption('minWidth', cellDetail);
         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 column.title === 'string' ? column.title : undefined } });
+        const title = getColumnOption('title', cellDetail);
+        return UT.AddToAttrs(attrs, { className, style, attrs: { title: typeof title === 'string' ? title : undefined } });
     };
     const getRowAttrs = (rowDetail, isOdd) => {
         const { rowOption = {}, onSwap, value, gap = [0, 1] } = getProps();
@@ -477,5 +498,5 @@ const useTable = (getProps, getPaging) => {
         }
         return obj;
     };
-    return { getCellValue, getColValue, getCellAttrs, getTitleAttrs, getRowAttrs };
+    return { getCellValue, getCellAttrs, getTitleAttrs, getRowAttrs, changeCell, getCellDetail };
 };

package/package.json

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