pixelize-design-library 2.0.22 → 2.1.2

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 (41) hide show
  1. package/dist/Components/FileUpload/FileUpload.d.ts +4 -0
  2. package/dist/Components/FileUpload/FileUpload.js +156 -0
  3. package/dist/Components/FileUpload/FileUploadProps.d.ts +11 -0
  4. package/dist/Components/FileUpload/constants.d.ts +3 -0
  5. package/dist/Components/FileUpload/constants.js +28 -0
  6. package/dist/Components/Header/Header.d.ts +4 -0
  7. package/dist/Components/Header/Header.js +57 -0
  8. package/dist/Components/Header/HeaderProps.d.ts +44 -0
  9. package/dist/Components/Header/HeaderProps.js +2 -0
  10. package/dist/Components/Header/components/desktopMenu.d.ts +4 -0
  11. package/dist/Components/Header/components/desktopMenu.js +33 -0
  12. package/dist/Components/Header/components/mobileMenu.d.ts +4 -0
  13. package/dist/Components/Header/components/mobileMenu.js +32 -0
  14. package/dist/Components/Reorder/Reorder.d.ts +4 -0
  15. package/dist/Components/Reorder/Reorder.js +50 -0
  16. package/dist/Components/Reorder/ReorderProps.d.ts +10 -0
  17. package/dist/Components/Reorder/ReorderProps.js +2 -0
  18. package/dist/Components/SearchSelect/SearchSelect.js +1 -3
  19. package/dist/Layout.js +75 -33
  20. package/dist/Pages/fileUpload.d.ts +2 -0
  21. package/dist/Pages/fileUpload.js +65 -0
  22. package/dist/index.d.ts +4 -1
  23. package/dist/index.js +8 -2
  24. package/package.json +3 -2
  25. package/dist/Components/KaTable/CustomHeader.d.ts +0 -14
  26. package/dist/Components/KaTable/CustomHeader.js +0 -69
  27. package/dist/Components/KaTable/KaTable.d.ts +0 -13
  28. package/dist/Components/KaTable/KaTable.js +0 -111
  29. package/dist/Components/KaTable/KaTableProps.d.ts +0 -23
  30. package/dist/Components/KaTable/SelectionCell.d.ts +0 -8
  31. package/dist/Components/KaTable/SelectionCell.js +0 -38
  32. package/dist/Components/KaTable/SelectionHeader.d.ts +0 -3
  33. package/dist/Components/KaTable/SelectionHeader.js +0 -56
  34. package/dist/Components/KaTable/ka-table.css +0 -27
  35. package/dist/Components/KaTable/useMergedChildComponents.d.ts +0 -14
  36. package/dist/Components/KaTable/useMergedChildComponents.js +0 -224
  37. package/dist/Pages/KaTableExample.d.ts +0 -3
  38. package/dist/Pages/KaTableExample.js +0 -259
  39. package/dist/Theme/Default/fonts.d.ts +0 -35
  40. package/dist/Theme/Default/fonts.js +0 -37
  41. /package/dist/Components/{KaTable/KaTableProps.js → FileUpload/FileUploadProps.js} +0 -0
@@ -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;
@@ -1,259 +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 __importDefault = (this && this.__importDefault) || function (mod) {
37
- return (mod && mod.__esModule) ? mod : { "default": mod };
38
- };
39
- Object.defineProperty(exports, "__esModule", { value: true });
40
- var react_1 = __importStar(require("react"));
41
- var KaTable_1 = __importDefault(require("../Components/KaTable/KaTable"));
42
- var KaTable_2 = require("../Components/KaTable/KaTable");
43
- var icons_1 = require("@chakra-ui/icons");
44
- var react_2 = require("@chakra-ui/react");
45
- var menuItems = [
46
- { label: "Hide column", action: "hidecolumn" },
47
- {
48
- label: "Filter",
49
- submenu: [
50
- { label: "Filter by Date", action: "Filter by Date" },
51
- { label: "Filter by Name", action: "Filter by Name" },
52
- { label: "Filter by Status", action: "Filter by Status" },
53
- ],
54
- },
55
- ];
56
- var DataType = KaTable_2.TableEnums.DataType;
57
- var dataArray = Array(5)
58
- .fill(undefined)
59
- .map(function (_, index) { return ({
60
- column1: index % 2 === 0,
61
- column2: "column:2 row:".concat(index + 1),
62
- column3: "column:3 row:".concat(index + 1),
63
- column4: "column:4 row:".concat(index + 1),
64
- column5: "column:5 row:".concat(index + 1),
65
- column6: index + 20,
66
- column7: index + 25,
67
- column8: index + 30,
68
- column9: index + 35,
69
- column10: index + 40,
70
- column11: index + 45,
71
- column12: index + 50,
72
- column13: index + 55,
73
- column14: index + 60,
74
- column15: new Date(2022, 11, index),
75
- id: index + 1,
76
- }); });
77
- var columns = [
78
- {
79
- key: "column1",
80
- title: "Column 1",
81
- dataType: DataType.Boolean,
82
- width: 100,
83
- columnFreeze: true,
84
- customHeader: false,
85
- },
86
- {
87
- key: "column2",
88
- title: "Column 2",
89
- dataType: DataType.String,
90
- width: 250,
91
- // visible: false,
92
- },
93
- {
94
- key: "column3",
95
- title: "Column 3",
96
- dataType: DataType.Number,
97
- width: 150,
98
- filter: true,
99
- menu: [
100
- {
101
- label: "Filter",
102
- onClick: function () { return console.log("MENU Filter clicks"); },
103
- submenu: [
104
- {
105
- label: "Filter by Date",
106
- onClick: function () { return console.log("SUBMENU Date clicks"); },
107
- },
108
- { label: "Filter by Name" },
109
- // { label: "Filter by Status", action: "Filter by Status" },
110
- ],
111
- },
112
- ],
113
- },
114
- {
115
- key: "column4",
116
- title: "Column 4",
117
- dataType: DataType.Number,
118
- width: 150,
119
- sortable: true,
120
- },
121
- {
122
- key: "column5",
123
- title: "Column 5",
124
- dataType: DataType.Number,
125
- width: 150,
126
- },
127
- {
128
- key: "column6",
129
- title: "Column 6",
130
- dataType: DataType.Number,
131
- width: 150,
132
- },
133
- {
134
- key: "column7",
135
- title: "Column 7",
136
- dataType: DataType.Number,
137
- width: 150,
138
- sortable: true,
139
- },
140
- {
141
- key: "column8",
142
- title: "Column 8",
143
- dataType: DataType.Number,
144
- width: 150,
145
- },
146
- {
147
- key: "column9",
148
- title: "Column 9",
149
- dataType: DataType.Number,
150
- width: 150,
151
- },
152
- {
153
- key: "column10",
154
- title: "Column 10",
155
- dataType: DataType.Number,
156
- width: 150,
157
- },
158
- {
159
- key: "column11",
160
- title: "Column 11",
161
- dataType: DataType.Number,
162
- width: 150,
163
- },
164
- {
165
- key: "column12",
166
- title: "Column 12",
167
- dataType: DataType.Number,
168
- width: 150,
169
- },
170
- {
171
- key: "column13",
172
- title: "Column 13",
173
- dataType: DataType.Number,
174
- width: 150,
175
- },
176
- {
177
- key: "column14",
178
- title: "Column 14",
179
- dataType: DataType.Number,
180
- width: 150,
181
- },
182
- {
183
- key: "column15",
184
- title: "Column 15",
185
- dataType: DataType.Date,
186
- width: 150,
187
- },
188
- {
189
- key: "editColumn",
190
- width: 80,
191
- customHeader: false,
192
- },
193
- ];
194
- var KaTableExample = function () {
195
- var _a = (0, react_1.useState)(false), actionButtons = _a[0], setActionButtons = _a[1];
196
- var _b = (0, react_1.useState)([]), selectedRows = _b[0], setSelectedRows = _b[1];
197
- // const kaTableFormat = (props: any) => {
198
- // if (props.column.dataType === DataType.Date) {
199
- // return (
200
- // props.value &&
201
- // props.value.toLocaleDateString("en", {
202
- // month: "2-digit",
203
- // day: "2-digit",
204
- // year: "numeric",
205
- // })
206
- // );
207
- // }
208
- // };
209
- var EditButton = function (_a) {
210
- var dispatch = _a.dispatch, rowKeyValue = _a.rowKeyValue;
211
- return (react_1.default.createElement("div", { className: "edit-cell-button" },
212
- react_1.default.createElement(icons_1.EditIcon, null),
213
- react_1.default.createElement(icons_1.DeleteIcon, null)));
214
- };
215
- // const handleSortChange = (newSortState: any, columnName: any) => {
216
- // console.log(`Sort state for ${columnName} changed to:`, newSortState);
217
- // };
218
- // const handleMenuItemClick = (action: any, columnName: any) => {
219
- // console.log(`Menu item clicked for ${columnName}:`, action);
220
- // };
221
- var handleCheckSelect = (0, react_1.useCallback)(function (selectedRows) {
222
- console.log("CB", selectedRows);
223
- if (selectedRows.length !== 0) {
224
- setActionButtons(true);
225
- }
226
- else {
227
- setActionButtons(false);
228
- }
229
- setSelectedRows(selectedRows);
230
- }, []);
231
- // console.log(actionButtons, "actionButtons");
232
- var handleExample = function () {
233
- setSelectedRows([]);
234
- };
235
- // console.log(selectedRows, "selectedRows");
236
- return (react_1.default.createElement("div", null,
237
- react_1.default.createElement(react_2.Button, { onClick: handleExample }, "click here"),
238
- react_1.default.createElement(KaTable_1.default, { data: dataArray, columns: columns, checkSelect: true, onRowClick: function (rowKeyValue) {
239
- console.log("Row clicked", rowKeyValue);
240
- }, selected: selectedRows, onSelectionChange: function (selectedRows) {
241
- handleCheckSelect(selectedRows);
242
- }, columnVisibility: true,
243
- // onSortChange={handleSortChange}
244
- // onMenuItemClick={handleMenuItemClick}
245
- // format={kaTableFormat}
246
- childComponents: {
247
- cellText: {
248
- content: function (props) {
249
- if (props.column.key === "editColumn") {
250
- return react_1.default.createElement(EditButton, __assign({}, props));
251
- }
252
- },
253
- },
254
- }, loading: {
255
- enabled: false,
256
- text: "Loading data",
257
- } })));
258
- };
259
- exports.default = KaTableExample;
@@ -1,35 +0,0 @@
1
- import "@fontsource/ubuntu-sans";
2
- declare const fontOptions: {
3
- fonts: {
4
- body: string;
5
- heading: string;
6
- mono: string;
7
- };
8
- fontSizes: {
9
- xs: string;
10
- sm: string;
11
- md: string;
12
- lg: string;
13
- xl: string;
14
- "2xl": string;
15
- "3xl": string;
16
- "4xl": string;
17
- "5xl": string;
18
- "6xl": string;
19
- "7xl": string;
20
- "8xl": string;
21
- "9xl": string;
22
- };
23
- fontWeights: {
24
- hairline: number;
25
- thin: number;
26
- light: number;
27
- normal: number;
28
- medium: number;
29
- semibold: number;
30
- bold: number;
31
- extrabold: number;
32
- black: number;
33
- };
34
- };
35
- export default fontOptions;
@@ -1,37 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- require("@fontsource/ubuntu-sans");
4
- var fontOptions = {
5
- fonts: {
6
- body: "Ubuntu Sans, serif",
7
- heading: "Ubuntu Sans, serif",
8
- mono: "Ubuntu Sans, monospace",
9
- },
10
- fontSizes: {
11
- xs: "0.75rem",
12
- sm: "0.875rem",
13
- md: "1rem",
14
- lg: "1.125rem",
15
- xl: "1.25rem",
16
- "2xl": "1.5rem",
17
- "3xl": "1.875rem",
18
- "4xl": "2.25rem",
19
- "5xl": "3rem",
20
- "6xl": "3.75rem",
21
- "7xl": "4.5rem",
22
- "8xl": "6rem",
23
- "9xl": "8rem",
24
- },
25
- fontWeights: {
26
- hairline: 100,
27
- thin: 200,
28
- light: 300,
29
- normal: 400,
30
- medium: 500,
31
- semibold: 600,
32
- bold: 700,
33
- extrabold: 800,
34
- black: 900,
35
- },
36
- };
37
- exports.default = fontOptions;