awing-library 2.1.2-dev.99 → 2.1.2-stable.1

package/lib/AWING/TableEditable/components/TableEditable.test.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var _1 = __importDefault(require("."));
+var react_1 = require("@testing-library/react");
+var icons_material_1 = require("@mui/icons-material");
+jest.mock("./components/TableEditableBody", function () { return function (props) { return ((0, jsx_runtime_1.jsx)("div", { children: props.items.map(function (item, index) { return ((0, jsx_runtime_1.jsx)("div", { children: "Row ".concat(index) })); }) })); }; });
+describe("TableEditable", function () {
+    var columnDefinitions = [
+        {
+            fieldName: "field1",
+            headerName: "Field 1",
+            editFieldDefinition: { fieldName: "field1", type: "text" },
+        },
+        {
+            headerName: "Field 2",
+            editFieldDefinition: { fieldName: "field2", type: "text" },
+        },
+    ];
+    var mockOnChange = jest.fn();
+    var mockOnAddNew = jest.fn();
+    var mockOnSelectedChange = jest.fn();
+    var defaultItems = [
+        { field1: "value11", field2: "value12" },
+        { field1: "value21", field2: "value22" },
+    ];
+    it("should render number of row correct", function () {
+        var getByText = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.default, { columnDefinitions: columnDefinitions, items: defaultItems, onChange: mockOnChange })).getByText;
+        var row0 = getByText("Row 0");
+        expect(row0).toBeInTheDocument();
+        var row1 = getByText("Row 1");
+        expect(row1).toBeInTheDocument();
+    });
+    it("should render create button", function () {
+        var getByText = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.default, { columnDefinitions: columnDefinitions, items: defaultItems, onChange: mockOnChange, onAddNew: mockOnAddNew })).getByText;
+        var createButton = getByText("Common.Create");
+        expect(createButton).toBeInTheDocument();
+        react_1.fireEvent.click(createButton);
+        expect(mockOnAddNew.mock.calls.length).toEqual(1);
+    });
+    it("should render TopBarAction", function () {
+        var mockEditAction = jest.fn();
+        var mockClearAction = jest.fn();
+        var selectionActions = [
+            {
+                icon: (0, jsx_runtime_1.jsx)(icons_material_1.Edit, {}),
+                tooltipTitle: "Action 1",
+                action: mockEditAction,
+            },
+            {
+                icon: (0, jsx_runtime_1.jsx)(icons_material_1.Clear, {}),
+                tooltipTitle: "Action 1",
+                action: mockClearAction,
+            },
+        ];
+        var getByTestId = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.default, { columnDefinitions: columnDefinitions, items: defaultItems, onChange: mockOnChange, onAddNew: mockOnAddNew, onSelectedChange: mockOnSelectedChange, selectionActions: selectionActions, selected: [0] })).getByTestId;
+        var editButton = getByTestId("EditIcon");
+        var clearButton = getByTestId("ClearIcon");
+        react_1.fireEvent.click(editButton);
+        expect(mockEditAction.mock.calls.length).toEqual(1);
+        react_1.fireEvent.click(clearButton);
+        expect(mockClearAction.mock.calls.length).toEqual(1);
+    });
+    it("should hide Header when hideHeader is true", function () {
+        var queryByText = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.default, { columnDefinitions: columnDefinitions, items: defaultItems, onChange: mockOnChange, hideHeader: true })).queryByText;
+        var header = queryByText("Field 1");
+        expect(header).not.toBeInTheDocument();
+    });
+});

package/lib/AWING/TableEditable/components/TableEditableBody.d.ts

@@ -0,0 +1,21 @@
+import { DataObject } from "../../interface";
+import { ColumnDefinition } from "../interface";
+import { ReactNode } from "react";
+interface Props<T extends DataObject> {
+    items: Array<Partial<T>>;
+    getId: (item: Partial<T>) => string | number | undefined;
+    selected?: any[];
+    onSelectedChange?: (selected: any[]) => void;
+    onSelect: (id: string | number) => void;
+    columnDefinitions: Array<ColumnDefinition<Partial<T>>>;
+    dataValidation: Partial<{
+        [K in keyof T]: boolean;
+    }>[];
+    includeDelete?: boolean;
+    spanningRows?: ReactNode[];
+    onChange: (indexes: number[], fieldName: keyof T, newValue: any, valid: boolean) => void;
+    onDelete: (rowIdx: number) => void;
+    mergeRowsBy?: string;
+}
+export default function TableEditableBody<T extends DataObject>(props: Props<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/AWING/TableEditable/components/TableEditableBody.js

@@ -0,0 +1,173 @@
+"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);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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.default = TableEditableBody;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var Tooltip_1 = __importStar(require("@mui/material/Tooltip"));
+var Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
+var TableCellEditable_1 = __importDefault(require("./TableCellEditable"));
+var styles_1 = require("@mui/material/styles");
+var lodash_1 = require("lodash");
+var StyleTooltip = (0, styles_1.styled)(function (_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({}, props, { arrow: true, classes: { popper: className } })));
+})(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {},
+        _b["& .".concat(Tooltip_1.tooltipClasses.arrow)] = {
+            color: "#bbbbbb",
+            maxWidth: 450,
+        },
+        _b["& .".concat(Tooltip_1.tooltipClasses.tooltip)] = {
+            backgroundColor: "#f5f5f5",
+            maxWidth: 900,
+            boxShadow: "0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)",
+        },
+        _b);
+});
+function TableEditableBody(props) {
+    var items = props.items, getId = props.getId, selected = props.selected, onSelectedChange = props.onSelectedChange, onSelect = props.onSelect, columnDefinitions = props.columnDefinitions, dataValidation = props.dataValidation, includeDelete = props.includeDelete, spanningRows = props.spanningRows, onChange = props.onChange, onDelete = props.onDelete, mergeRowsBy = props.mergeRowsBy;
+    var convertToMergeAbleItems = function (keyValue) {
+        var result = [];
+        var temp = __spreadArray([], items.map(function (item, index) { return (__assign(__assign({}, item), { originalIndex: index })); }), true);
+        (0, lodash_1.uniqBy)(temp, keyValue).map(function (t) {
+            var childs = temp.filter(function (item) { return item[keyValue] === t[keyValue]; });
+            result.push.apply(result, childs);
+        });
+        return result;
+    };
+    var convertItems = mergeRowsBy
+        ? convertToMergeAbleItems(mergeRowsBy)
+        : items;
+    return ((0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [convertItems.map(function (row, index) {
+                var _a, _b;
+                var rowIdx = (_a = row.originalIndex) !== null && _a !== void 0 ? _a : index;
+                var id = (_b = getId(row)) !== null && _b !== void 0 ? _b : rowIdx;
+                return ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [selected && onSelectedChange && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { padding: "checkbox", sx: {
+                                border: "1px solid rgb(224, 224, 224)",
+                            }, children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { color: "primary", checked: selected.includes(id), onClick: function (e) { return e.stopPropagation(); }, onChange: function () { return onSelect(id); }, inputProps: {
+                                    "aria-labelledby": "enhanced-table-checkbox-".concat(id),
+                                } }) })), columnDefinitions.map(function (colDef, idx) {
+                            var _a, _b, _c;
+                            if (colDef.contentGetter) {
+                                var content = colDef.contentGetter(row, rowIdx);
+                                var fieldName_1 = (_a = colDef.fieldName) !== null && _a !== void 0 ? _a : "";
+                                var isMergeColumn = fieldName_1 === mergeRowsBy;
+                                var isDisplay = isMergeColumn
+                                    ? index == 0 ||
+                                        convertItems[index - 1][fieldName_1] !==
+                                            row[fieldName_1]
+                                    : true;
+                                var numOfRowSpan = isMergeColumn
+                                    ? convertItems.filter(function (c) { return c[fieldName_1] === row[fieldName_1]; }).length
+                                    : 1;
+                                return (isDisplay && ((0, jsx_runtime_1.jsx)(material_1.TableCell, __assign({ sx: {
+                                        border: "1px solid rgb(224, 224, 224)",
+                                    } }, colDef.TableCellProps, { rowSpan: numOfRowSpan, children: colDef.isTooltip ? ((0, jsx_runtime_1.jsx)(StyleTooltip, { title: (colDef.getTitleTooltip &&
+                                            colDef.getTitleTooltip(content)) ||
+                                            "", placement: "top-start", children: (0, jsx_runtime_1.jsx)("div", { children: content }) })) : (colDef.contentGetter(row, rowIdx)) }), idx)));
+                            }
+                            if (colDef.editFieldDefinition) {
+                                var fieldName_2 = colDef.editFieldDefinition.fieldName;
+                                var isMergeColumn_1 = fieldName_2 === mergeRowsBy;
+                                var isDisplay = isMergeColumn_1
+                                    ? index == 0 ||
+                                        convertItems[index - 1][fieldName_2] !==
+                                            row[fieldName_2]
+                                    : true;
+                                var numOfRowSpan = isMergeColumn_1
+                                    ? convertItems.filter(function (c) { return c[fieldName_2] === row[fieldName_2]; }).length
+                                    : 1;
+                                var error = ((_b = dataValidation === null || dataValidation === void 0 ? void 0 : dataValidation[rowIdx]) === null || _b === void 0 ? void 0 : _b[fieldName_2]) !==
+                                    undefined &&
+                                    !((_c = dataValidation === null || dataValidation === void 0 ? void 0 : dataValidation[rowIdx]) === null || _c === void 0 ? void 0 : _c[fieldName_2]);
+                                return (isDisplay && ((0, jsx_runtime_1.jsx)(TableCellEditable_1.default, { cellDefinition: __assign(__assign({}, colDef.editFieldDefinition), { row: row, TableCellProps: colDef.TableCellProps, isTooltip: colDef.isTooltip, getTitleTooltip: colDef.getTitleTooltip }), numOfRowSpan: numOfRowSpan, value: row[fieldName_2], error: error, onChange: function (newValue, valid) {
+                                        var indexes = [rowIdx];
+                                        if (isMergeColumn_1) {
+                                            indexes = convertItems
+                                                .filter(function (c) {
+                                                return c[fieldName_2] ===
+                                                    row[fieldName_2];
+                                            })
+                                                .map(function (c) {
+                                                var _a;
+                                                return (_a = c.originalIndex) !== null && _a !== void 0 ? _a : 0;
+                                            });
+                                        }
+                                        onChange(indexes, fieldName_2, newValue, valid);
+                                    } }, idx)));
+                            }
+                        }), includeDelete === true && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { align: "center", sx: {
+                                p: 0,
+                                border: "1px solid rgb(224, 224, 224)",
+                            }, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { "aria-label": "delete", onClick: function () { return onDelete(rowIdx); }, children: (0, jsx_runtime_1.jsx)(Delete_1.default, {}) }) }))] }, rowIdx));
+            }), spanningRows === null || spanningRows === void 0 ? void 0 : spanningRows.map(function (row) { return row; })] }));
+}

package/lib/AWING/TableEditable/components/TableEditableBody.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/AWING/TableEditable/components/TableEditableBody.test.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+var TableEditableBody_1 = __importDefault(require("./TableEditableBody"));
+describe("TableEditableBody", function () {
+    var items = [
+        { id: 1, name: "John", age: 30 },
+        { id: 2, name: "Jane", age: 25 },
+    ];
+    var getId = function (item) { return item.id; };
+    var mockOnSelect = jest.fn();
+    var mockOnChange = jest.fn();
+    var mockOnDelete = jest.fn();
+    var mockOnSelectChange = jest.fn();
+    var columnDefinitions = [
+        {
+            header: "Name",
+            contentGetter: function (row) { return row.name; },
+        },
+        {
+            header: "Age",
+            editFieldDefinition: {
+                fieldName: "age",
+                type: "number",
+            },
+        },
+    ];
+    it("renders a table row for each item", function () {
+        var getAllByRole = (0, react_1.render)((0, jsx_runtime_1.jsx)(TableEditableBody_1.default, { items: items, getId: getId, onSelect: mockOnSelect, onChange: mockOnChange, onDelete: mockOnDelete, columnDefinitions: columnDefinitions, dataValidation: {} })).getAllByRole;
+        var rows = getAllByRole("row");
+        expect(rows).toHaveLength(items.length);
+    });
+    it("renders a checkbox if selected prop is provided", function () {
+        var getAllByRole = (0, react_1.render)((0, jsx_runtime_1.jsx)(TableEditableBody_1.default, { items: items, getId: getId, selected: [1], onSelectedChange: mockOnSelectChange, onSelect: mockOnSelect, onChange: mockOnChange, onDelete: mockOnDelete, columnDefinitions: columnDefinitions })).getAllByRole;
+        var checkboxes = getAllByRole("checkbox");
+        expect(checkboxes).toHaveLength(items.length);
+        expect(checkboxes[0]).toBeChecked();
+    });
+    it("renders a delete button if includeDelete prop is true", function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(TableEditableBody_1.default, { items: items, getId: getId, onSelect: mockOnSelect, onChange: mockOnChange, onDelete: mockOnDelete, columnDefinitions: columnDefinitions, includeDelete: true }));
+        var deleteButtons = react_1.screen.getAllByLabelText("delete");
+        expect(deleteButtons).toHaveLength(items.length);
+    });
+    it("calls onSelectChange when a checkbox is clicked", function () {
+        var getAllByRole = (0, react_1.render)((0, jsx_runtime_1.jsx)(TableEditableBody_1.default, { items: items, getId: getId, selected: [1], onSelectedChange: mockOnSelectChange, onSelect: mockOnSelect, onChange: mockOnChange, onDelete: mockOnDelete, columnDefinitions: columnDefinitions })).getAllByRole;
+        var checkboxes = getAllByRole("checkbox");
+        react_1.fireEvent.click(checkboxes[0]);
+        expect(mockOnSelect.mock.calls[0][0]).toEqual(1);
+    });
+    it("calls onChange when an editable cell is changed", function () {
+        var getByDisplayValue = (0, react_1.render)((0, jsx_runtime_1.jsx)(TableEditableBody_1.default, { items: items, getId: getId, onSelect: mockOnSelect, onChange: mockOnChange, onDelete: mockOnDelete, columnDefinitions: columnDefinitions })).getByDisplayValue;
+        var ageInput = getByDisplayValue("30");
+        react_1.fireEvent.change(ageInput, { target: { value: "31" } });
+        expect(mockOnChange).toHaveBeenCalledWith(0, "age", 31, true);
+    });
+    it("calls onDelete when a delete button is clicked", function () {
+        var getAllByLabelText = (0, react_1.render)((0, jsx_runtime_1.jsx)(TableEditableBody_1.default, { items: items, getId: getId, onSelect: mockOnSelect, onChange: mockOnChange, onDelete: mockOnDelete, columnDefinitions: columnDefinitions, includeDelete: true })).getAllByLabelText;
+        var deleteButtons = getAllByLabelText("delete");
+        react_1.fireEvent.click(deleteButtons[0]);
+        expect(mockOnDelete).toHaveBeenCalledWith(0);
+    });
+});

package/lib/AWING/TableEditable/components/TableHeader.d.ts

@@ -0,0 +1,12 @@
+import { ColumnDefinition } from "../interface";
+import { DataObject } from "../../interface";
+interface Props<T extends DataObject> {
+    selected?: any[];
+    onSelectedChange?: (selected: any[]) => void;
+    numOfRows: number;
+    onSelectAll: () => void;
+    includeDelete?: boolean;
+    columnDefinitions: Array<ColumnDefinition<Partial<T>>>;
+}
+export default function TableHeader<T extends DataObject>(props: Props<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/AWING/TableEditable/components/TableHeader.js

@@ -0,0 +1,35 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TableHeader;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+function TableHeader(props) {
+    var selected = props.selected, onSelectedChange = props.onSelectedChange, numOfRows = props.numOfRows, onSelectAll = props.onSelectAll, includeDelete = props.includeDelete, columnDefinitions = props.columnDefinitions;
+    return ((0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [selected && onSelectedChange && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { padding: "checkbox", sx: {
+                        border: "1px solid rgb(224, 224, 224)",
+                    }, children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { color: "primary", indeterminate: selected.length > 0 &&
+                            selected.length < numOfRows, checked: selected.length > 0 &&
+                            selected.length === numOfRows, onChange: function () { return onSelectAll(); }, inputProps: {
+                            "aria-label": "select all desserts",
+                        } }) })), columnDefinitions.map(function (colDef, idx) {
+                    var _a;
+                    var headerName = colDef.headerName, width = colDef.width, TableCellProps = colDef.TableCellProps;
+                    return ((0, jsx_runtime_1.jsx)(material_1.TableCell, __assign({ sx: __assign({ border: "1px solid rgb(224, 224, 224)" }, (width && {
+                            width: width,
+                        })) }, TableCellProps, { children: "".concat(headerName).concat(((_a = colDef === null || colDef === void 0 ? void 0 : colDef.editFieldDefinition) === null || _a === void 0 ? void 0 : _a.required) ? "*" : "") }), idx));
+                }), includeDelete === true && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { sx: {
+                        width: 60,
+                        border: "1px solid rgb(224, 224, 224)",
+                    } }))] }) }));
+}

package/lib/AWING/TableEditable/components/TableHeader.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/AWING/TableEditable/components/TableHeader.test.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var TableHeader_1 = __importDefault(require("./TableHeader"));
+var react_1 = require("@testing-library/react");
+describe("TableHeader", function () {
+    var mockSelected = [];
+    var mockOnSelectedChange = jest.fn();
+    var mockNumOfRows = 10;
+    var mockOnSelectAll = jest.fn();
+    var mockIncludeDelete = true;
+    var mockColumnDefinitions = [
+        { headerName: "Name" },
+        { headerName: "Age" },
+    ];
+    it("renders the correct number of columns", function () {
+        var getAllByRole = (0, react_1.render)((0, jsx_runtime_1.jsx)(TableHeader_1.default, { columnDefinitions: mockColumnDefinitions, numOfRows: mockNumOfRows, onSelectAll: mockOnSelectAll })).getAllByRole;
+        var columnHeaders = getAllByRole("columnheader");
+        expect(columnHeaders).toHaveLength(mockColumnDefinitions.length);
+        expect(columnHeaders[0]).toHaveTextContent(mockColumnDefinitions[0].headerName);
+        expect(columnHeaders[1]).toHaveTextContent(mockColumnDefinitions[1].headerName);
+    });
+    it("renders the delete column", function () {
+        var getAllByRole = (0, react_1.render)((0, jsx_runtime_1.jsx)(TableHeader_1.default, { columnDefinitions: mockColumnDefinitions, numOfRows: mockNumOfRows, onSelectAll: mockOnSelectAll, includeDelete: mockIncludeDelete })).getAllByRole;
+        var columnHeaders = getAllByRole("columnheader");
+        expect(columnHeaders).toHaveLength(mockColumnDefinitions.length + 1);
+    });
+    it("calls onSelectAll when a checkbox is clicked", function () {
+        var getAllByRole = (0, react_1.render)((0, jsx_runtime_1.jsx)(TableHeader_1.default, { columnDefinitions: mockColumnDefinitions, numOfRows: mockNumOfRows, onSelectAll: mockOnSelectAll, selected: mockSelected, onSelectedChange: mockOnSelectedChange })).getAllByRole;
+        var checkboxes = getAllByRole("checkbox");
+        react_1.fireEvent.click(checkboxes[0]);
+        expect(mockOnSelectAll).toHaveBeenCalledTimes(1);
+    });
+});

package/lib/AWING/TableEditable/components/TopBarActions.d.ts

@@ -0,0 +1,7 @@
+import { SelectionActionDefinition } from "../../DataGrid/interface";
+interface Props {
+    selected: any[];
+    selectionActions?: SelectionActionDefinition[];
+}
+export default function TopBarActions(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/AWING/TableEditable/components/TopBarActions.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TopBarActions;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var react_i18next_1 = require("react-i18next");
+function TopBarActions(props) {
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var selected = props.selected, selectionActions = props.selectionActions;
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { position: "relative" }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                padding: "10px 16px",
+                width: "100%",
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "space-between",
+                background: "#EEEEEE",
+            }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", style: { display: "flex", alignItems: "center" }, children: "".concat(selected.length, " ").concat(t("Common.Selected").toLowerCase()) }), (0, jsx_runtime_1.jsx)(material_1.Box, { style: {
+                        display: "flex",
+                        flexDirection: "row",
+                        justifyContent: "flex-end",
+                    }, children: selectionActions &&
+                        selectionActions.map(function (actionDef, actIdx) { return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: actionDef.tooltipTitle, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: function () { return actionDef.action(); }, sx: { mx: 0.5 }, disabled: actionDef.disabled, children: actionDef.icon }) }, actIdx)); }) })] }) }));
+}

package/lib/AWING/TableEditable/components/TopBarActions.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/AWING/TableEditable/components/TopBarActions.test.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var TopBarActions_1 = __importDefault(require("./TopBarActions"));
+var react_1 = require("@testing-library/react");
+var icons_material_1 = require("@mui/icons-material");
+describe("TopBarActions", function () {
+    var defaultSelected = [0];
+    var mockEditAction = jest.fn();
+    var mockClearAction = jest.fn();
+    var defaultSelectionActions = [
+        { icon: (0, jsx_runtime_1.jsx)(icons_material_1.Edit, {}), tooltipTitle: "Edit", action: mockEditAction },
+        { icon: (0, jsx_runtime_1.jsx)(icons_material_1.Clear, {}), tooltipTitle: "Clear", action: mockClearAction },
+    ];
+    it("should render without crashing", function () {
+        var container = (0, react_1.render)((0, jsx_runtime_1.jsx)(TopBarActions_1.default, { selected: defaultSelected, selectionActions: defaultSelectionActions })).container;
+        expect(container).toBeTruthy();
+    });
+    it("should render selection actions", function () {
+        var getByTestId = (0, react_1.render)((0, jsx_runtime_1.jsx)(TopBarActions_1.default, { selected: defaultSelected, selectionActions: defaultSelectionActions })).getByTestId;
+        var editButton = getByTestId("EditIcon");
+        var clearButton = getByTestId("ClearIcon");
+        expect(editButton).toBeTruthy();
+        expect(clearButton).toBeTruthy();
+        react_1.fireEvent.click(editButton);
+        expect(mockEditAction).toHaveBeenCalled();
+        react_1.fireEvent.click(clearButton);
+        expect(mockClearAction).toHaveBeenCalled();
+    });
+});

package/lib/AWING/TableEditable/components/index.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from "react";
+import { TableCellProps } from "@mui/material/TableCell";
+import { DataObject } from "../../interface";
+import { TableEditableProps } from "../interface";
+import { CellDefinition } from "./TableCellEditable";
+export interface ColumnDefinition<T extends DataObject> {
+    headerName: ReactNode;
+    /**
+     * Độ rộng của cột
+     */
+    width?: string | number;
+    TableCellProps?: TableCellProps;
+    editFieldDefinition?: CellDefinition<T>;
+    isRowGroup?: boolean;
+    contentGetter?: (obj: T, idx?: number) => ReactNode;
+    isTooltip?: boolean;
+    getTitleTooltip?: (value: any) => NonNullable<React.ReactNode>;
+}
+export default function TableEditable<T extends DataObject>(props: TableEditableProps<T>): import("react/jsx-runtime").JSX.Element;