pixelize-design-library 1.1.28 → 1.1.29

package/dist/Components/KaTable/KaTable.js

@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableFun = exports.TableUtils = exports.TableModel = exports.TableProps = exports.TableActionCreator = exports.TableEnums = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var ka_table_1 = require("ka-table");
 var TableEnums = __importStar(require("ka-table/enums"));
 exports.TableEnums = TableEnums;
@@ -62,10 +62,14 @@ var KaTable = function (_a) {
         !columns.some(function (column) { return column.key === "select-cell"; })) {
         columns.unshift(selectionCellColumn);
     }
+    var _d = (0, react_1.useState)(columns), tableColumns = _d[0], setTableColumns = _d[1];
     var dataLength = (_b = data === null || data === void 0 ? void 0 : data.length) !== null && _b !== void 0 ? _b : 0;
     var columnVisibilitys = columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : false;
     var mergedChildComponents = (0, useMergedChildComponents_1.default)(childComponents, onSortChange, onMenuItemClick, menuItems, onSelectionChange, rowKey, onRowClick, selected, dataLength, columns, columnVisibilitys);
-    return (react_1.default.createElement(ka_table_1.Table, { columns: columns, data: data, rowKeyField: rowKey, editingMode: Edit, 
+    (0, react_1.useEffect)(function () {
+        setTableColumns(columns);
+    }, [columns]);
+    return (react_1.default.createElement(ka_table_1.Table, { columns: tableColumns, data: data, rowKeyField: rowKey, editingMode: Edit, 
         // sortingMode={sorting}
         format: format, 
         // paging={paging}

package/dist/Components/KaTable/useMergedChildComponents.js

@@ -82,11 +82,11 @@ var useMergedChildComponents = function (childComponents, onSortChange, onMenuIt
         else {
             handleSelection(selections.filter(function (value) { return value !== values; }));
         }
-    }, [selections]);
+    }, [selections, handleSelection]);
     var headerSelectionHandle = (0, react_1.useCallback)(function (values) {
         setSelections(values);
         handleSelection(values);
-    }, [selections]);
+    }, [handleSelection]);
     return (0, react_1.useMemo)(function () {
         return __assign(__assign({}, childComponents), { dataRow: {
                 elementAttributes: function (props) {
@@ -185,11 +185,15 @@ var useMergedChildComponents = function (childComponents, onSortChange, onMenuIt
         onSortChange,
         onMenuItemClick,
         menuItems,
-        handleSelection,
         rowKey,
         onRowClick,
         selections,
         columnVisibility,
+        columns,
+        cellSelectionHandle,
+        headerSelectionHandle,
+        isAllSelected,
+        theme.colors.backgroundColor.subtle,
     ]);
 };
 exports.default = useMergedChildComponents;

package/dist/Pages/katable.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const katable: () => React.JSX.Element;
+export default katable;

package/dist/Pages/katable.js

@@ -0,0 +1,194 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var KaTable_1 = __importDefault(require("../Components/KaTable/KaTable"));
+var KaTable_2 = require("../Components/KaTable/KaTable");
+var icons_1 = require("@chakra-ui/icons");
+var katable = function () {
+    var DataType = KaTable_2.TableEnums.DataType;
+    var dataArray = Array(50)
+        .fill(undefined)
+        .map(function (_, index) { return ({
+        column1: index % 2 === 0,
+        column2: "column:2 row:".concat(index + 1),
+        column3: index + 5,
+        column4: index + 10,
+        column5: index + 15,
+        column6: index + 20,
+        column7: index + 25,
+        column8: index + 30,
+        column9: index + 35,
+        column10: index + 40,
+        column11: index + 45,
+        column12: index + 50,
+        column13: index + 55,
+        column14: index + 60,
+        column15: new Date(2022, 11, index),
+        id: index + 1,
+    }); });
+    var columns = [
+        {
+            key: "column1",
+            title: "Column 1",
+            dataType: DataType.Boolean,
+            width: 150,
+            columnFreeze: true,
+            customHeader: false,
+        },
+        {
+            key: "column2",
+            title: "Column 2",
+            dataType: DataType.String,
+            width: 150,
+        },
+        {
+            key: "column3",
+            title: "Column 3",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column4",
+            title: "Column 4",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column5",
+            title: "Column 5",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column6",
+            title: "Column 6",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column7",
+            title: "Column 7",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column8",
+            title: "Column 8",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column9",
+            title: "Column 9",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column10",
+            title: "Column 10",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column11",
+            title: "Column 11",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column12",
+            title: "Column 12",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column13",
+            title: "Column 13",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column14",
+            title: "Column 14",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column15",
+            title: "Column 15",
+            dataType: DataType.Date,
+            width: 150,
+        },
+        {
+            key: "editColumn",
+            width: 80,
+            customHeader: false,
+        },
+    ];
+    var kaTableFormat = function (props) {
+        if (props.column.dataType === DataType.Date) {
+            return (props.value &&
+                props.value.toLocaleDateString("en", {
+                    month: "2-digit",
+                    day: "2-digit",
+                    year: "numeric",
+                }));
+        }
+    };
+    var EditButton = function (_a) {
+        var dispatch = _a.dispatch, rowKeyValue = _a.rowKeyValue;
+        return (react_1.default.createElement("div", { className: "edit-cell-button" },
+            react_1.default.createElement(icons_1.EditIcon, null),
+            react_1.default.createElement(icons_1.DeleteIcon, null)));
+    };
+    var handleSortChange = function (newSortState, columnName) {
+        console.log("Sort state for ".concat(columnName, " changed to:"), newSortState);
+    };
+    var handleMenuItemClick = function (action, columnName) {
+        console.log("Menu item clicked for ".concat(columnName, ":"), action);
+    };
+    var menuItems = [
+        { label: "Sort", action: "Sort" },
+        { label: "Hide column", action: "Hide column" },
+        {
+            label: "Filter",
+            submenu: [
+                { label: "Filter by Date", action: "Filter by Date" },
+                { label: "Filter by Name", action: "Filter by Name" },
+                { label: "Filter by Status", action: "Filter by Status" },
+            ],
+        },
+    ];
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(KaTable_1.default, { data: dataArray, columns: columns, checkSelect: true, onRowClick: function (rowKeyValue) {
+                console.log("Row clicked", rowKeyValue);
+            }, onSelectionChange: function (selectedRows) {
+                console.log("Selected rows:", selectedRows);
+            }, menuItems: menuItems, onSortChange: handleSortChange, onMenuItemClick: handleMenuItemClick, format: kaTableFormat, childComponents: {
+                cellText: {
+                    content: function (props) {
+                        if (props.column.key === "editColumn") {
+                            return react_1.default.createElement(EditButton, __assign({}, props));
+                        }
+                    },
+                },
+            }, loading: {
+                enabled: false,
+                text: "Loading data",
+            } })));
+};
+exports.default = katable;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "1.1.28",
+  "version": "1.1.29",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",

package/dist/Theme/Default/fonts.d.ts

@@ -1,35 +0,0 @@
-import "@fontsource/ubuntu-sans";
-declare const fontOptions: {
-    fonts: {
-        body: string;
-        heading: string;
-        mono: string;
-    };
-    fontSizes: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
-        "3xl": string;
-        "4xl": string;
-        "5xl": string;
-        "6xl": string;
-        "7xl": string;
-        "8xl": string;
-        "9xl": string;
-    };
-    fontWeights: {
-        hairline: number;
-        thin: number;
-        light: number;
-        normal: number;
-        medium: number;
-        semibold: number;
-        bold: number;
-        extrabold: number;
-        black: number;
-    };
-};
-export default fontOptions;

package/dist/Theme/Default/fonts.js

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("@fontsource/ubuntu-sans");
-var fontOptions = {
-    fonts: {
-        body: "Ubuntu Sans, serif",
-        heading: "Ubuntu Sans, serif",
-        mono: "Ubuntu Sans, monospace",
-    },
-    fontSizes: {
-        xs: "0.75rem",
-        sm: "0.875rem",
-        md: "1rem",
-        lg: "1.125rem",
-        xl: "1.25rem",
-        "2xl": "1.5rem",
-        "3xl": "1.875rem",
-        "4xl": "2.25rem",
-        "5xl": "3rem",
-        "6xl": "3.75rem",
-        "7xl": "4.5rem",
-        "8xl": "6rem",
-        "9xl": "8rem",
-    },
-    fontWeights: {
-        hairline: 100,
-        thin: 200,
-        light: 300,
-        normal: 400,
-        medium: 500,
-        semibold: 600,
-        bold: 700,
-        extrabold: 800,
-        black: 900,
-    },
-};
-exports.default = fontOptions;