pixelize-design-library 1.0.99 → 1.1.2

package/dist/Components/KaTable/KaTable.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -22,12 +33,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableProps = exports.TableActionCreator = exports.TableEnums = void 0;
-var react_1 = __importDefault(require("react"));
+exports.TableFun = exports.TableUtils = exports.TableModel = exports.TableProps = exports.TableActionCreator = exports.TableEnums = void 0;
+var react_1 = __importStar(require("react"));
 var ka_table_1 = require("ka-table");
 var TableEnums = __importStar(require("ka-table/enums"));
 exports.TableEnums = TableEnums;
@@ -35,9 +55,172 @@ var TableProps = __importStar(require("ka-table/props"));
 exports.TableProps = TableProps;
 var TableActionCreator = __importStar(require("ka-table/actionCreators"));
 exports.TableActionCreator = TableActionCreator;
+var TableModel = __importStar(require("ka-table/models"));
+exports.TableModel = TableModel;
+var TableUtils = __importStar(require("ka-table/utils"));
+exports.TableUtils = TableUtils;
+var TableFun = __importStar(require("ka-table"));
+exports.TableFun = TableFun;
 require("ka-table/style.css");
+require("./ka-table.css");
+var CustomHeader_1 = __importDefault(require("./CustomHeader"));
 var KaTable = function (_a) {
-    var columns = _a.columns, data = _a.data, _b = _a.rowKey, rowKey = _b === void 0 ? 'id' : _b, Edit = _a.Edit, shorting = _a.shorting, format = _a.format, paging = _a.paging, filter = _a.filter, childComponents = _a.childComponents, columnReorder = _a.columnReorder, columnResizing = _a.columnResizing, editableCells = _a.editableCells, validation = _a.validation, loading = _a.loading;
-    return (react_1.default.createElement(ka_table_1.Table, { columns: columns, data: data, rowKeyField: rowKey, editingMode: Edit, sortingMode: shorting, format: format, paging: paging, filteringMode: filter, childComponents: childComponents, columnReordering: columnReorder, columnResizing: columnResizing, editableCells: editableCells, validation: validation, loading: loading }));
+    var columns = _a.columns, data = _a.data, _b = _a.rowKey, rowKey = _b === void 0 ? "id" : _b, Edit = _a.Edit, sorting = _a.sorting, format = _a.format, paging = _a.paging, filter = _a.filter, childComponents = _a.childComponents, columnReorder = _a.columnReorder, columnResizing = _a.columnResizing, editableCells = _a.editableCells, validation = _a.validation, loading = _a.loading, checkSelect = _a.checkSelect, onRowClick = _a.onRowClick, onSelectionChange = _a.onSelectionChange, onSortChange = _a.onSortChange, onMenuItemClick = _a.onMenuItemClick, menuItems = _a.menuItems;
+    var SelectionHeader = function () {
+        var _a;
+        var table = TableFun.useTableInstance();
+        var areAllRowsSelected = TableUtils.kaPropsUtils.areAllFilteredRowsSelected(table.props);
+        var selectedRows = ((_a = table.props.data) !== null && _a !== void 0 ? _a : []).filter(function (row) { var _a; return ((_a = table.props.selectedRows) !== null && _a !== void 0 ? _a : []).includes(row[rowKey]); });
+        var areSomeRowsSelected = selectedRows.length > 0 && !areAllRowsSelected;
+        var selectAllRef = (0, react_1.useRef)(null);
+        var prevSelectedRowsRef = (0, react_1.useRef)([]);
+        (0, react_1.useEffect)(function () {
+            if (selectAllRef.current) {
+                selectAllRef.current.indeterminate = areSomeRowsSelected;
+            }
+        }, [areSomeRowsSelected]);
+        (0, react_1.useEffect)(function () {
+            var prevSelectedRows = prevSelectedRowsRef.current;
+            if (onSelectionChange &&
+                selectedRows &&
+                JSON.stringify(prevSelectedRows) !== JSON.stringify(selectedRows)) {
+                var selectedRowIds = selectedRows.map(function (row) { return row[rowKey]; });
+                onSelectionChange(selectedRowIds);
+                prevSelectedRowsRef.current = selectedRows;
+            }
+        }, [selectedRows]);
+        return (react_1.default.createElement("input", { ref: selectAllRef, type: "checkbox", checked: areAllRowsSelected, onChange: function (event) {
+                if (event.currentTarget.checked) {
+                    table.selectAllFilteredRows();
+                }
+                else {
+                    table.deselectAllFilteredRows();
+                }
+            } }));
+    };
+    var SelectionCell = function (_a) {
+        var rowKeyValue = _a.rowKeyValue, isSelectedRow = _a.isSelectedRow, selectedRows = _a.selectedRows, onSelectionChange = _a.onSelectionChange, rowKey = _a.rowKey;
+        var table = TableFun.useTableInstance();
+        var prevSelectedRowsRef = (0, react_1.useRef)([]);
+        (0, react_1.useEffect)(function () {
+            var prevSelectedRows = prevSelectedRowsRef.current;
+            if (onSelectionChange &&
+                selectedRows &&
+                JSON.stringify(prevSelectedRows) !== JSON.stringify(selectedRows)) {
+                var selectedRowIds = selectedRows
+                    .filter(function (row) { return row && row[rowKey] !== undefined; })
+                    .map(function (row) { return row[rowKey]; });
+                onSelectionChange(selectedRowIds);
+                prevSelectedRowsRef.current = selectedRows;
+            }
+        }, [selectedRows, onSelectionChange, rowKey]);
+        return (react_1.default.createElement("input", { type: "checkbox", checked: isSelectedRow, onChange: function (event) {
+                if (event.nativeEvent.shiftKey) {
+                    table.selectRowsRange(rowKeyValue, __spreadArray([], selectedRows, true).pop());
+                }
+                else if (event.currentTarget.checked) {
+                    table.selectRow(rowKeyValue);
+                }
+                else {
+                    table.deselectRow(rowKeyValue);
+                }
+            } }));
+    };
+    var selectionCellColumn = {
+        key: "selection-cell",
+        isFilterable: false,
+        width: 50,
+        columnFreeze: true,
+        customHeader: false,
+    };
+    if (checkSelect &&
+        !columns.some(function (column) { return column.key === "selection-cell"; })) {
+        columns.unshift(selectionCellColumn);
+    }
+    var getPreviousColumnWidth = function (key) {
+        var index = columns.findIndex(function (column) { return column.key === key; });
+        if (index > 0) {
+            return columns[index - 1].width;
+        }
+        return 0;
+    };
+    var mergedChildComponents = __assign(__assign({}, childComponents), { headCell: {
+            content: function (props) {
+                var _a;
+                var existingContent = (_a = childComponents.headCell) === null || _a === void 0 ? void 0 : _a.content;
+                if (existingContent) {
+                    var result = existingContent(props);
+                    if (result) {
+                        return result;
+                    }
+                }
+                if (props.column.customHeader === undefined ||
+                    props.column.customHeader === true) {
+                    return (react_1.default.createElement(CustomHeader_1.default, __assign({}, props, { onSortChange: onSortChange, onMenuItemClick: onMenuItemClick, menuItems: menuItems })));
+                }
+                if (props.column.key === "selection-cell") {
+                    return react_1.default.createElement(SelectionHeader, null);
+                }
+            },
+            elementAttributes: function (props) {
+                var _a;
+                var existingElementAttributes = (_a = childComponents.headCell) === null || _a === void 0 ? void 0 : _a.elementAttributes;
+                if (existingElementAttributes) {
+                    var result = existingElementAttributes(props);
+                    if (result) {
+                        return result;
+                    }
+                }
+                if (props.column.columnFreeze) {
+                    var stickyLeft = getPreviousColumnWidth(props.column.key);
+                    return {
+                        style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 3, backgroundColor: "#d9d9db" }),
+                    };
+                }
+            },
+        }, cell: {
+            elementAttributes: function (props) {
+                var _a;
+                var existingElementAttributes = (_a = childComponents.cell) === null || _a === void 0 ? void 0 : _a.elementAttributes;
+                if (existingElementAttributes) {
+                    var result = existingElementAttributes(props);
+                    if (result) {
+                        return result;
+                    }
+                }
+                if (props.column.columnFreeze) {
+                    var stickyLeft = getPreviousColumnWidth(props.column.key);
+                    return {
+                        style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 2, backgroundColor: "#d9d9db" }),
+                    };
+                }
+                return {
+                    onClick: function () {
+                        if (onRowClick) {
+                            onRowClick(props.rowData, props.column.key);
+                        }
+                    },
+                };
+            },
+        }, tableWrapper: {
+            elementAttributes: function () { return ({ style: { maxHeight: 600 } }); },
+        }, cellText: {
+            content: function (props) {
+                var _a;
+                var existingContent = (_a = childComponents.cellText) === null || _a === void 0 ? void 0 : _a.content;
+                if (existingContent) {
+                    var result = existingContent(props);
+                    if (result) {
+                        return result;
+                    }
+                }
+                if (props.column.key === "selection-cell") {
+                    return react_1.default.createElement(SelectionCell, __assign({}, props));
+                }
+            },
+        } });
+    return (react_1.default.createElement(ka_table_1.Table, { columns: columns, data: data, rowKeyField: rowKey, editingMode: Edit, sortingMode: sorting, format: format, paging: paging, filteringMode: filter, childComponents: mergedChildComponents, columnReordering: columnReorder, columnResizing: columnResizing, editableCells: editableCells, validation: validation, loading: loading, virtualScrolling: {
+            enabled: true,
+        } }));
 };
 exports.default = KaTable;

package/dist/Components/KaTable/KaTableProps.d.ts

@@ -3,7 +3,7 @@ export type KaTableProps = {
     data: any;
     rowKey?: any;
     Edit?: any;
-    shorting?: any;
+    sorting?: any;
     format?: (props: any) => void;
     validation?: (props: any) => void;
     paging?: any;
@@ -13,4 +13,10 @@ export type KaTableProps = {
     columnResizing?: any;
     editableCells?: any;
     loading?: any;
+    checkSelect?: any;
+    onRowClick?: (rowData: any, column: any) => void;
+    onSelectionChange?: (selectedIds: any[]) => void;
+    onSortChange?: (newSortState: string, columnName: string) => void;
+    onMenuItemClick?: (action: string, columnName: string) => void;
+    menuItems?: any;
 };