pixelize-design-library 1.1.94 → 1.1.95

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (93) hide show
  1. package/dist/App.js +25 -11
  2. package/dist/Assets/defaultLogo.d.ts +3 -0
  3. package/dist/Assets/defaultLogo.js +15 -0
  4. package/dist/Assets/defaultLogo.tsx +31 -0
  5. package/dist/Components/Button/Button.d.ts +1 -1
  6. package/dist/Components/Button/Button.js +2 -59
  7. package/dist/Components/Button/Button.styles.d.ts +2 -0
  8. package/dist/Components/Button/Button.styles.js +112 -0
  9. package/dist/Components/Button/ButtonProps.d.ts +4 -3
  10. package/dist/Components/Checkbox/Checkbox.styles.d.ts +2 -0
  11. package/dist/Components/Checkbox/Checkbox.styles.js +54 -0
  12. package/dist/Components/Common/FormLabel.js +8 -4
  13. package/dist/Components/Divider/Divider.d.ts +3 -0
  14. package/dist/Components/Divider/Divider.js +14 -0
  15. package/dist/Components/Input/TextInput.d.ts +1 -1
  16. package/dist/Components/Input/TextInput.js +17 -23
  17. package/dist/Components/Input/TextInput.styles.d.ts +2 -0
  18. package/dist/Components/Input/TextInput.styles.js +68 -0
  19. package/dist/Components/Input/TextInputProps.d.ts +3 -1
  20. package/dist/Components/SideBar/SideBar.d.ts +1 -1
  21. package/dist/Components/SideBar/SideBar.js +44 -61
  22. package/dist/Components/SideBar/SideBarProps.d.ts +18 -8
  23. package/dist/Components/SideBar/components/MenuItemBox.d.ts +11 -0
  24. package/dist/Components/SideBar/components/MenuItemBox.js +116 -0
  25. package/dist/Components/SideBar/components/MenuItems.d.ts +4 -0
  26. package/dist/Components/SideBar/components/MenuItems.js +13 -0
  27. package/dist/Components/SideBar/components/MenuPopoverContent.d.ts +9 -0
  28. package/dist/Components/SideBar/components/MenuPopoverContent.js +37 -0
  29. package/dist/Components/SideBar/components/TextTruncation.d.ts +8 -0
  30. package/dist/Components/SideBar/components/TextTruncation.js +65 -0
  31. package/dist/Components/Table/Components/HeaderActions.d.ts +7 -0
  32. package/dist/Components/Table/Components/HeaderActions.js +45 -0
  33. package/dist/Components/Table/Components/Pagination.js +7 -12
  34. package/dist/Components/Table/Components/TableBody.d.ts +1 -1
  35. package/dist/Components/Table/Components/TableBody.js +23 -30
  36. package/dist/Components/Table/Components/TableHeader.js +17 -30
  37. package/dist/Components/Table/Components/TableSearch.d.ts +6 -0
  38. package/dist/Components/Table/Components/TableSearch.js +60 -0
  39. package/dist/Components/Table/Components/useTable.d.ts +1 -0
  40. package/dist/Components/Table/Components/useTable.js +6 -0
  41. package/dist/Components/Table/Table.d.ts +1 -1
  42. package/dist/Components/Table/Table.js +25 -13
  43. package/dist/Components/Table/TableProps.d.ts +16 -0
  44. package/dist/Components/Table/TableSettings/ManageColumns.js +2 -6
  45. package/dist/Components/Table/TableSettings/TableSettings.js +6 -6
  46. package/dist/Components/Toggle/TableToggle.d.ts +4 -0
  47. package/dist/Components/Toggle/TableToggle.js +57 -0
  48. package/dist/Components/Toggle/TableToggleProps.d.ts +5 -0
  49. package/dist/Constants/Sidebar.js +25 -2
  50. package/dist/Layout.js +33 -32
  51. package/dist/Pages/TInput.js +4 -1
  52. package/dist/Pages/button.js +1 -1
  53. package/dist/Pages/input.js +16 -9
  54. package/dist/Pages/modal.js +1 -1
  55. package/dist/Pages/toster.js +1 -1
  56. package/dist/Theme/Default/palette.d.ts +19 -0
  57. package/dist/Theme/Default/palette.js +19 -0
  58. package/dist/Theme/Default/theme.js +2 -1
  59. package/dist/Theme/Meadow/palette.d.ts +168 -0
  60. package/dist/Theme/Meadow/palette.js +186 -32
  61. package/dist/Theme/Meadow/theme.js +2 -1
  62. package/dist/Theme/Radiant/palette.d.ts +168 -0
  63. package/dist/Theme/Radiant/palette.js +186 -32
  64. package/dist/Theme/Radiant/theme.js +2 -1
  65. package/dist/Theme/Skyline/palette.d.ts +168 -0
  66. package/dist/Theme/Skyline/palette.js +185 -31
  67. package/dist/Theme/Skyline/theme.js +2 -1
  68. package/dist/Theme/componentStyles.d.ts +5 -0
  69. package/dist/Theme/componentStyles.js +11 -0
  70. package/dist/Theme/themeProps.d.ts +168 -0
  71. package/dist/Utils/table.d.ts +9 -0
  72. package/dist/Utils/table.js +47 -1
  73. package/dist/index.d.ts +2 -1
  74. package/dist/index.js +4 -2
  75. package/dist/withTheme.js +1 -1
  76. package/package.json +1 -1
  77. package/dist/Components/KaTable/CustomHeader.d.ts +0 -14
  78. package/dist/Components/KaTable/CustomHeader.js +0 -69
  79. package/dist/Components/KaTable/KaTable.d.ts +0 -13
  80. package/dist/Components/KaTable/KaTable.js +0 -111
  81. package/dist/Components/KaTable/KaTableProps.d.ts +0 -23
  82. package/dist/Components/KaTable/SelectionCell.d.ts +0 -8
  83. package/dist/Components/KaTable/SelectionCell.js +0 -38
  84. package/dist/Components/KaTable/SelectionHeader.d.ts +0 -3
  85. package/dist/Components/KaTable/SelectionHeader.js +0 -56
  86. package/dist/Components/KaTable/ka-table.css +0 -27
  87. package/dist/Components/KaTable/useMergedChildComponents.d.ts +0 -14
  88. package/dist/Components/KaTable/useMergedChildComponents.js +0 -224
  89. package/dist/Pages/KaTableExample.d.ts +0 -3
  90. package/dist/Pages/KaTableExample.js +0 -259
  91. package/dist/Theme/Default/fonts.d.ts +0 -35
  92. package/dist/Theme/Default/fonts.js +0 -37
  93. /package/dist/Components/{KaTable/KaTableProps.js → Toggle/TableToggleProps.js} +0 -0
@@ -1,69 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- var react_1 = __importStar(require("react"));
27
- var react_2 = require("@chakra-ui/react");
28
- var bs_1 = require("react-icons/bs");
29
- var fa_1 = require("react-icons/fa");
30
- var useCustomTheme_1 = require("../../Theme/useCustomTheme");
31
- var CustomHeader = (0, react_1.memo)(function (_a) {
32
- var column = _a.column, onSortChange = _a.onSortChange, menuItems = _a.menuItems, isSort = _a.isSort, sortDirection = _a.sortDirection;
33
- var handleSortClick = (0, react_1.useCallback)(function () {
34
- var sortOrder = "none";
35
- if (sortDirection === "none")
36
- sortOrder = "asc";
37
- else if (sortDirection === "asc")
38
- sortOrder = "desc";
39
- onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(sortOrder, column.key);
40
- }, [sortDirection, column.key, onSortChange]);
41
- return (react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center" },
42
- react_1.default.createElement(react_2.Box, { fontWeight: "bold" }, column.title),
43
- react_1.default.createElement(react_2.Flex, { alignItems: "center" },
44
- isSort && (react_1.default.createElement(SortingIcon, { sortState: sortDirection, handleSortClick: handleSortClick })),
45
- menuItems && (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (react_1.default.createElement(react_2.Menu, null,
46
- react_1.default.createElement(react_2.MenuButton, { as: react_2.IconButton, "aria-label": "Options", icon: react_1.default.createElement(bs_1.BsThreeDots, null), size: "sm", variant: "ghost", _hover: { bg: "none" }, _active: { bg: "none" } }),
47
- react_1.default.createElement(react_2.Portal, null,
48
- react_1.default.createElement(react_2.MenuList, null, menuItems.map(function (item, index) { return (react_1.default.createElement(react_1.default.Fragment, { key: index },
49
- react_1.default.createElement(react_2.MenuItem, { onClick: function () { return item === null || item === void 0 ? void 0 : item.onClick(); } }, item.label),
50
- item.submenu && react_1.default.createElement(Submenu, { items: item.submenu }))); }))))) : null)));
51
- });
52
- var SortingIcon = (0, react_1.memo)(function (_a) {
53
- var sortState = _a.sortState, handleSortClick = _a.handleSortClick;
54
- var theme = (0, useCustomTheme_1.useCustomTheme)();
55
- return (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "center", bg: theme.colors.white, borderRadius: "full", cursor: "pointer", w: "24px", h: "24px", onClick: handleSortClick, transition: "transform 0.2s ease-in-out", _hover: { transform: "scale(1.1)" } },
56
- sortState === "none" && react_1.default.createElement(fa_1.FaSort, { size: 14 }),
57
- sortState === "asc" && react_1.default.createElement(fa_1.FaCaretUp, { size: 14 }),
58
- sortState === "desc" && react_1.default.createElement(fa_1.FaCaretDown, { size: 14 })));
59
- });
60
- var Submenu = (0, react_1.memo)(function (_a) {
61
- var items = _a.items;
62
- return (react_1.default.createElement(react_2.MenuGroup, null, items.map(function (subItem, index) { return (react_1.default.createElement(react_2.MenuItem, { key: index, onClick: function () { return (subItem === null || subItem === void 0 ? void 0 : subItem.onClick) && (subItem === null || subItem === void 0 ? void 0 : subItem.onClick()); }, sx: {
63
- pl: 6,
64
- fontSize: "sm",
65
- color: "gray.600",
66
- _hover: { bg: "gray.100", color: "gray.800" }, // Hover styles
67
- } }, subItem.label)); })));
68
- });
69
- exports.default = CustomHeader;
@@ -1,13 +0,0 @@
1
- import React from "react";
2
- import * as TableEnums from "ka-table/enums";
3
- import * as TableProps from "ka-table/props";
4
- import * as TableActionCreator from "ka-table/actionCreators";
5
- import * as TableModel from "ka-table/models";
6
- import * as TableUtils from "ka-table/utils";
7
- import * as TableFun from "ka-table";
8
- import "ka-table/style.css";
9
- import "./ka-table.css";
10
- import { KaTableProps } from "./KaTableProps";
11
- declare const _default: React.MemoExoticComponent<({ columns, data, rowKey, Edit, format, filter, childComponents, columnReorder, columnResizing, editableCells, validation, loading, checkSelect, onRowClick, onSelectionChange, selected, columnVisibility, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, }: KaTableProps) => React.JSX.Element>;
12
- export default _default;
13
- export { TableEnums, TableActionCreator, TableProps, TableModel, TableUtils, TableFun, };
@@ -1,111 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
26
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
27
- if (ar || !(i in from)) {
28
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
29
- ar[i] = from[i];
30
- }
31
- }
32
- return to.concat(ar || Array.prototype.slice.call(from));
33
- };
34
- var __importDefault = (this && this.__importDefault) || function (mod) {
35
- return (mod && mod.__esModule) ? mod : { "default": mod };
36
- };
37
- Object.defineProperty(exports, "__esModule", { value: true });
38
- exports.TableFun = exports.TableUtils = exports.TableModel = exports.TableProps = exports.TableActionCreator = exports.TableEnums = void 0;
39
- var react_1 = __importStar(require("react"));
40
- var ka_table_1 = require("ka-table");
41
- var TableEnums = __importStar(require("ka-table/enums"));
42
- exports.TableEnums = TableEnums;
43
- var TableProps = __importStar(require("ka-table/props"));
44
- exports.TableProps = TableProps;
45
- var TableActionCreator = __importStar(require("ka-table/actionCreators"));
46
- exports.TableActionCreator = TableActionCreator;
47
- var TableModel = __importStar(require("ka-table/models"));
48
- exports.TableModel = TableModel;
49
- var TableUtils = __importStar(require("ka-table/utils"));
50
- exports.TableUtils = TableUtils;
51
- var TableFun = __importStar(require("ka-table"));
52
- exports.TableFun = TableFun;
53
- require("ka-table/style.css");
54
- require("./ka-table.css");
55
- var useMergedChildComponents_1 = __importDefault(require("./useMergedChildComponents"));
56
- var useCustomTheme_1 = require("../../Theme/useCustomTheme");
57
- var table_1 = require("../../Utils/table");
58
- var selectionCellColumn = {
59
- key: "select-cell",
60
- width: 50,
61
- columnFreeze: true,
62
- customHeader: false,
63
- className: "select-cell",
64
- };
65
- var KaTable = function (_a) {
66
- var _b, _c;
67
- var columns = _a.columns, data = _a.data, _d = _a.rowKey, rowKey = _d === void 0 ? "id" : _d, Edit = _a.Edit,
68
- // sorting,
69
- format = _a.format,
70
- // paging,
71
- 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, selected = _a.selected, columnVisibility = _a.columnVisibility, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor;
72
- var theme = (0, useCustomTheme_1.useCustomTheme)();
73
- var _e = (0, react_1.useState)([]), sortState = _e[0], setSortState = _e[1];
74
- if (checkSelect &&
75
- !columns.some(function (column) { return column.key === "select-cell"; })) {
76
- columns.unshift(selectionCellColumn);
77
- }
78
- var dataLength = (_b = data === null || data === void 0 ? void 0 : data.length) !== null && _b !== void 0 ? _b : 0;
79
- // const columnVisibilitys = columnVisibility ?? false;
80
- var handleSort = function (sort) {
81
- setSortState(sort);
82
- };
83
- var sortedData = (0, react_1.useMemo)(function () { return (0, table_1.SortMultiColumnData)(__spreadArray([], data, true), sortState); }, [sortState, data]);
84
- var mergedChildComponents = (0, useMergedChildComponents_1.default)({
85
- childComponents: childComponents,
86
- onSortChange: handleSort,
87
- handleSelection: onSelectionChange,
88
- rowKey: rowKey,
89
- onRowClick: onRowClick,
90
- selected: selected,
91
- dataLength: dataLength,
92
- columns: columns,
93
- headerBgColor: headerBgColor,
94
- freezedBgColor: freezedBgColor,
95
- headerTextColor: headerTextColor,
96
- freezedTextColor: freezedTextColor,
97
- sortState: sortState,
98
- });
99
- return (react_1.default.createElement("div", { style: {
100
- borderRadius: "10px 0 0 10px",
101
- borderWidth: "0px 0px 0px 5px",
102
- borderColor: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[500],
103
- boxShadow: theme.shadows.lg,
104
- } },
105
- react_1.default.createElement(ka_table_1.Table, { columns: columns, data: sortedData, rowKeyField: rowKey, editingMode: Edit, key: columns, sortingMode: TableEnums.SortingMode.MultipleRemote, format: format,
106
- // paging={paging}
107
- filteringMode: undefined, childComponents: mergedChildComponents, columnReordering: columnReorder, columnResizing: columnResizing, editableCells: editableCells, validation: validation, loading: loading, virtualScrolling: {
108
- enabled: true,
109
- } })));
110
- };
111
- exports.default = react_1.default.memo(KaTable);
@@ -1,23 +0,0 @@
1
- export type KaTableProps = {
2
- columns: any;
3
- data: any;
4
- rowKey?: any;
5
- Edit?: any;
6
- format?: (props: any) => void;
7
- validation?: (props: any) => void;
8
- filter?: any;
9
- childComponents?: any;
10
- columnReorder?: any;
11
- columnResizing?: any;
12
- editableCells?: any;
13
- loading?: any;
14
- checkSelect?: any;
15
- onRowClick?: (rowData: any, column: any) => void;
16
- onSelectionChange?: (selectedIds: any[]) => void;
17
- selected?: any;
18
- columnVisibility?: boolean;
19
- headerBgColor?: string;
20
- headerTextColor?: string;
21
- freezedBgColor?: string;
22
- freezedTextColor?: string;
23
- };
@@ -1,8 +0,0 @@
1
- import React from "react";
2
- import { TableProps } from "./KaTable";
3
- declare const _default: React.MemoExoticComponent<({ rowKeyValue, selectedRows, onSelectionChange, selected, }: TableProps.ICellTextProps<any> & {
4
- onSelectionChange: (ids: any[], type: string) => void;
5
- rowKey: any;
6
- selected: any;
7
- }) => React.JSX.Element>;
8
- export default _default;
@@ -1,38 +0,0 @@
1
- "use strict";
2
- var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
3
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
4
- if (ar || !(i in from)) {
5
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
6
- ar[i] = from[i];
7
- }
8
- }
9
- return to.concat(ar || Array.prototype.slice.call(from));
10
- };
11
- var __importDefault = (this && this.__importDefault) || function (mod) {
12
- return (mod && mod.__esModule) ? mod : { "default": mod };
13
- };
14
- Object.defineProperty(exports, "__esModule", { value: true });
15
- var react_1 = __importDefault(require("react"));
16
- var KaTable_1 = require("./KaTable");
17
- var SelectionCell = function (_a) {
18
- var rowKeyValue = _a.rowKeyValue, selectedRows = _a.selectedRows, onSelectionChange = _a.onSelectionChange, selected = _a.selected;
19
- var table = KaTable_1.TableFun.useTableInstance();
20
- var onChangeHandle = function (event) {
21
- if (event.nativeEvent.shiftKey) {
22
- table.selectRowsRange(rowKeyValue, __spreadArray([], selectedRows, true).pop());
23
- }
24
- else {
25
- var isChecked = event.currentTarget.checked;
26
- var action = isChecked ? "add" : "remove";
27
- onSelectionChange(rowKeyValue, action);
28
- if (isChecked) {
29
- table.selectRow(rowKeyValue);
30
- }
31
- else {
32
- table.deselectRow(rowKeyValue);
33
- }
34
- }
35
- };
36
- return react_1.default.createElement("input", { type: "checkbox", checked: selected, onChange: onChangeHandle, style: { marginLeft: "37%" } });
37
- };
38
- exports.default = react_1.default.memo(SelectionCell);
@@ -1,3 +0,0 @@
1
- import React from "react";
2
- declare const _default: React.MemoExoticComponent<({ onSelectionChange, rowKey, selected }: any) => React.JSX.Element>;
3
- export default _default;
@@ -1,56 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- var react_1 = __importStar(require("react"));
27
- var KaTable_1 = require("./KaTable");
28
- var SelectionHeader = function (_a) {
29
- var onSelectionChange = _a.onSelectionChange, rowKey = _a.rowKey, selected = _a.selected;
30
- var table = KaTable_1.TableFun.useTableInstance();
31
- var selectAllRef = (0, react_1.useRef)(null);
32
- (0, react_1.useEffect)(function () {
33
- if (selectAllRef.current) {
34
- selectAllRef.current.indeterminate = selected === null || selected === void 0 ? void 0 : selected.intederminate;
35
- }
36
- }, [selected.intederminate]);
37
- var handleSelectionChange = (0, react_1.useCallback)(function (checked) {
38
- onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(checked);
39
- }, [onSelectionChange]);
40
- return (react_1.default.createElement("input", { ref: selectAllRef, type: "checkbox", checked: selected === null || selected === void 0 ? void 0 : selected.checked, onChange: function (event) {
41
- var _a, _b;
42
- var isChecked = event.currentTarget.checked;
43
- // const action = isChecked ? "add" : "remove";
44
- var totalIds = isChecked
45
- ? (_b = (_a = table === null || table === void 0 ? void 0 : table.props) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.map(function (row) { return row[rowKey]; })
46
- : [];
47
- handleSelectionChange(totalIds);
48
- if (isChecked) {
49
- table.selectAllFilteredRows();
50
- }
51
- else {
52
- table.deselectAllFilteredRows();
53
- }
54
- }, style: { marginLeft: "40%" } }));
55
- };
56
- exports.default = react_1.default.memo(SelectionHeader);
@@ -1,27 +0,0 @@
1
- .ka-thead-cell {
2
- padding: 7px 7px;
3
- }
4
- .ka-cell {
5
- padding: 7px 0px;
6
- }
7
-
8
- .ka-thead-background {
9
- background-color: #bfbcbc;
10
- z-index: 1;
11
- }
12
-
13
- .ka-cell-text {
14
- overflow: hidden;
15
- text-overflow: ellipsis;
16
- white-space: nowrap;
17
- padding-left: 5%;
18
- }
19
- .ka-row {
20
- box-sizing: unset;
21
- border-bottom: none;
22
- border-top: none;
23
- }
24
- .ka-table-wrapper {
25
- border-bottom: 2px solid #d8d9db;
26
- border-right: 2px solid #d8d9db;
27
- }
@@ -1,14 +0,0 @@
1
- import { KaTableProps } from "./KaTableProps";
2
- type MergedChildComponentsProps = Pick<KaTableProps, "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor"> & {
3
- childComponents: any;
4
- onSortChange: any;
5
- handleSelection: any;
6
- rowKey: any;
7
- onRowClick: any;
8
- selected: any;
9
- dataLength: number;
10
- columns: any;
11
- sortState: any;
12
- };
13
- declare const useMergedChildComponents: ({ childComponents, onSortChange, handleSelection, rowKey, onRowClick, selected, dataLength, columns, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, sortState, }: MergedChildComponentsProps) => any;
14
- export default useMergedChildComponents;
@@ -1,224 +0,0 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
- if (k2 === undefined) k2 = k;
15
- var desc = Object.getOwnPropertyDescriptor(m, k);
16
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
17
- desc = { enumerable: true, get: function() { return m[k]; } };
18
- }
19
- Object.defineProperty(o, k2, desc);
20
- }) : (function(o, m, k, k2) {
21
- if (k2 === undefined) k2 = k;
22
- o[k2] = m[k];
23
- }));
24
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
- Object.defineProperty(o, "default", { enumerable: true, value: v });
26
- }) : function(o, v) {
27
- o["default"] = v;
28
- });
29
- var __importStar = (this && this.__importStar) || function (mod) {
30
- if (mod && mod.__esModule) return mod;
31
- var result = {};
32
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
33
- __setModuleDefault(result, mod);
34
- return result;
35
- };
36
- var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
37
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
38
- if (ar || !(i in from)) {
39
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
40
- ar[i] = from[i];
41
- }
42
- }
43
- return to.concat(ar || Array.prototype.slice.call(from));
44
- };
45
- var __importDefault = (this && this.__importDefault) || function (mod) {
46
- return (mod && mod.__esModule) ? mod : { "default": mod };
47
- };
48
- Object.defineProperty(exports, "__esModule", { value: true });
49
- var react_1 = __importStar(require("react"));
50
- var CustomHeader_1 = __importDefault(require("./CustomHeader"));
51
- var SelectionHeader_1 = __importDefault(require("./SelectionHeader"));
52
- var SelectionCell_1 = __importDefault(require("./SelectionCell"));
53
- var useCustomTheme_1 = require("../../Theme/useCustomTheme");
54
- var table_1 = require("../../Utils/table");
55
- var useMergedChildComponents = function (_a) {
56
- var childComponents = _a.childComponents, onSortChange = _a.onSortChange, handleSelection = _a.handleSelection, rowKey = _a.rowKey, onRowClick = _a.onRowClick, selected = _a.selected, dataLength = _a.dataLength, columns = _a.columns, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, sortState = _a.sortState;
57
- var theme = (0, useCustomTheme_1.useCustomTheme)();
58
- var handleSortChange = (0, react_1.useCallback)(function (newState, columnKey) {
59
- var newSortState = __spreadArray([], sortState, true);
60
- var existingIndex = newSortState.findIndex(function (sort) { return sort.column === columnKey; });
61
- if (existingIndex === -1) {
62
- newSortState.push({
63
- column: columnKey,
64
- direction: newState, // Default to ascending when adding a column
65
- });
66
- }
67
- else {
68
- var existingSort = newSortState[existingIndex];
69
- existingSort.direction = newState;
70
- }
71
- var column = columns.find(function (col) { return col.key === columnKey; });
72
- column.sortDirection = newState;
73
- onSortChange(newSortState);
74
- }, [sortState, onSortChange, columns]);
75
- var _b = react_1.default.useState(selected), selections = _b[0], setSelections = _b[1];
76
- (0, react_1.useEffect)(function () {
77
- setSelections(selected);
78
- }, [selected]);
79
- var isAllSelected = (0, react_1.useMemo)(function () {
80
- return {
81
- checked: (selections === null || selections === void 0 ? void 0 : selections.length) === (dataLength || -1),
82
- intederminate: (selections === null || selections === void 0 ? void 0 : selections.length) > 0 && (selections === null || selections === void 0 ? void 0 : selections.length) < dataLength,
83
- };
84
- }, [selections, dataLength]);
85
- var cellSelectionHandle = (0, react_1.useCallback)(function (values, type) {
86
- if (type === "add") {
87
- setSelections(__spreadArray(__spreadArray([], selections, true), [values], false));
88
- handleSelection(__spreadArray(__spreadArray([], selections, true), [values], false));
89
- }
90
- else if (type === "remove") {
91
- setSelections(selections.filter(function (value) { return value !== values; }));
92
- handleSelection(selections.filter(function (value) { return value !== values; }));
93
- }
94
- else {
95
- handleSelection(selections.filter(function (value) { return value !== values; }));
96
- }
97
- }, [selections, handleSelection]);
98
- var headerSelectionHandle = (0, react_1.useCallback)(function (values) {
99
- setSelections(values);
100
- handleSelection(values);
101
- }, [handleSelection]);
102
- return (0, react_1.useMemo)(function () {
103
- return __assign(__assign({}, childComponents), { dataRow: {
104
- elementAttributes: function (props) {
105
- var _a, _b;
106
- var existingElementAttributes = (_a = childComponents.dataRow) === null || _a === void 0 ? void 0 : _a.elementAttributes;
107
- var attributes = existingElementAttributes
108
- ? existingElementAttributes(props)
109
- : {};
110
- var isSelected = selections === null || selections === void 0 ? void 0 : selections.includes(props.rowData[rowKey]);
111
- var className = "".concat(attributes.className || "", " ").concat(isSelected ? "ka-row-selected" : "", " ka-row-hover").trim();
112
- // const className =
113
- // `${attributes.className || ""} ${isSelected ? "ka-row-selected" : ""}`.trim();
114
- return __assign(__assign({}, attributes), { className: className, style: __assign(__assign({}, (attributes.style || {})), { backgroundColor: isSelected
115
- ? theme.colors.backgroundColor.subtle
116
- : undefined, border: "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[200]) }) });
117
- },
118
- }, headCell: {
119
- content: function (props) {
120
- var _a, _b, _c;
121
- var existingContent = (_a = childComponents.headCell) === null || _a === void 0 ? void 0 : _a.content;
122
- if (existingContent) {
123
- var result = existingContent(props);
124
- if (result) {
125
- return result;
126
- }
127
- }
128
- var column = props.column;
129
- if (column.sortable || column.filter) {
130
- return (react_1.default.createElement(CustomHeader_1.default, __assign({}, props, { onSortChange: handleSortChange, menuItems: (_b = column === null || column === void 0 ? void 0 : column.menu) !== null && _b !== void 0 ? _b : [], isSort: props.column.sortable, sortDirection: (_c = props.column.sortDirection) !== null && _c !== void 0 ? _c : "none" })));
131
- }
132
- if (props.column.key === "select-cell") {
133
- return (react_1.default.createElement(SelectionHeader_1.default, { onSelectionChange: headerSelectionHandle, rowKey: rowKey, selected: isAllSelected }));
134
- }
135
- return null;
136
- },
137
- elementAttributes: function (props) {
138
- var _a, _b, _c, _d, _e, _f;
139
- var existingElementAttributes = (_a = childComponents.headCell) === null || _a === void 0 ? void 0 : _a.elementAttributes;
140
- if (existingElementAttributes) {
141
- var result = existingElementAttributes(props);
142
- if (result) {
143
- return result;
144
- }
145
- }
146
- if (props.column.columnFreeze) {
147
- var stickyLeft = (0, table_1.getPreviousColumnWidth)(columns, props.column.key);
148
- return {
149
- style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 3, backgroundColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.backgroundColor.subtle, color: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600] }),
150
- };
151
- }
152
- return {
153
- style: {
154
- backgroundColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : (_d = theme.colors.backgroundColor) === null || _d === void 0 ? void 0 : _d.subtle,
155
- color: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[600],
156
- border: "1px solid ".concat((_f = theme.colors) === null || _f === void 0 ? void 0 : _f.gray[200]),
157
- },
158
- };
159
- },
160
- }, cell: {
161
- elementAttributes: function (props) {
162
- var _a, _b, _c, _d, _e;
163
- var existingElementAttributes = (_a = childComponents.cell) === null || _a === void 0 ? void 0 : _a.elementAttributes;
164
- if (existingElementAttributes) {
165
- var result = existingElementAttributes(props);
166
- if (result) {
167
- return result;
168
- }
169
- }
170
- if (props.column.columnFreeze) {
171
- var stickyLeft = (0, table_1.getPreviousColumnWidth)(columns, props.column.key);
172
- return {
173
- style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 2, backgroundColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.backgroundColor.subtle, color: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], fontWeight: 600 }),
174
- };
175
- }
176
- return {
177
- style: {
178
- color: (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[600],
179
- fontWeight: 500,
180
- border: "1px solid ".concat((_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[200]),
181
- },
182
- onClick: function () {
183
- if (onRowClick) {
184
- onRowClick(props.rowData, props.column.key);
185
- }
186
- },
187
- };
188
- },
189
- }, tableWrapper: {
190
- elementAttributes: function () { return ({ style: { maxHeight: 600 } }); },
191
- }, cellText: {
192
- content: function (props) {
193
- var _a;
194
- var existingContent = (_a = childComponents.cellText) === null || _a === void 0 ? void 0 : _a.content;
195
- if (existingContent) {
196
- var result = existingContent(props);
197
- if (result) {
198
- return result;
199
- }
200
- }
201
- if (props.column.key === "select-cell") {
202
- var isSelected = selections === null || selections === void 0 ? void 0 : selections.includes(props.rowData[rowKey]);
203
- return (react_1.default.createElement(SelectionCell_1.default, __assign({}, props, { selected: isSelected, onSelectionChange: cellSelectionHandle })));
204
- }
205
- },
206
- } });
207
- }, [
208
- childComponents,
209
- rowKey,
210
- onRowClick,
211
- selections,
212
- columns,
213
- cellSelectionHandle,
214
- headerSelectionHandle,
215
- isAllSelected,
216
- theme.colors,
217
- headerBgColor,
218
- headerTextColor,
219
- freezedBgColor,
220
- freezedTextColor,
221
- handleSortChange,
222
- ]);
223
- };
224
- exports.default = useMergedChildComponents;
@@ -1,3 +0,0 @@
1
- import React from "react";
2
- declare const KaTableExample: () => React.JSX.Element;
3
- export default KaTableExample;