pixelize-design-library 2.2.51 → 2.2.52
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.
- package/package.json +1 -1
- package/dist/Assets/defaultLogo.tsx +0 -31
- package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.stories.d.ts +0 -1
- package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.stories.js +0 -6
- package/dist/Components/Apexcharts/ApexDonutChart/ApexDonutChart.d.ts +0 -4
- package/dist/Components/Apexcharts/ApexDonutChart/ApexDonutChart.js +0 -58
- package/dist/Components/Apexcharts/ApexDonutChart/ApexDonutChartProps.d.ts +0 -21
- package/dist/Components/Apexcharts/ApexDonutChart/ApexDonutChartProps.js +0 -2
- package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.stories.d.ts +0 -1
- package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.stories.js +0 -6
- package/dist/Components/InputTextArea/InputTextArea.stories.d.ts +0 -1
- package/dist/Components/InputTextArea/InputTextArea.stories.js +0 -7
- package/dist/Components/KaTable/CustomHeader.d.ts +0 -14
- package/dist/Components/KaTable/CustomHeader.js +0 -69
- package/dist/Components/KaTable/KaTable.d.ts +0 -13
- package/dist/Components/KaTable/KaTable.js +0 -111
- package/dist/Components/KaTable/KaTableProps.d.ts +0 -23
- package/dist/Components/KaTable/KaTableProps.js +0 -2
- package/dist/Components/KaTable/SelectionCell.d.ts +0 -8
- package/dist/Components/KaTable/SelectionCell.js +0 -38
- package/dist/Components/KaTable/SelectionHeader.d.ts +0 -3
- package/dist/Components/KaTable/SelectionHeader.js +0 -56
- package/dist/Components/KaTable/ka-table.css +0 -27
- package/dist/Components/KaTable/useMergedChildComponents.d.ts +0 -14
- package/dist/Components/KaTable/useMergedChildComponents.js +0 -224
- package/dist/Components/NumberInput/NumberInput.stories.d.ts +0 -1
- package/dist/Components/NumberInput/NumberInput.stories.js +0 -5
- package/dist/Components/Table/Table.css +0 -16
- package/dist/Theme/Default/fonts.d.ts +0 -35
- package/dist/Theme/Default/fonts.js +0 -37
package/package.json
CHANGED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { useCustomTheme } from "../Theme/useCustomTheme";
|
|
3
|
-
|
|
4
|
-
const DefaultLogo = () => {
|
|
5
|
-
const theme = useCustomTheme();
|
|
6
|
-
return (
|
|
7
|
-
<svg
|
|
8
|
-
width="12.09"
|
|
9
|
-
height="15.95"
|
|
10
|
-
viewBox="0 0 31 29"
|
|
11
|
-
fill="none"
|
|
12
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
13
|
-
>
|
|
14
|
-
<path
|
|
15
|
-
d="M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z"
|
|
16
|
-
fill={theme.colors.black}
|
|
17
|
-
/>
|
|
18
|
-
<path
|
|
19
|
-
d="M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z"
|
|
20
|
-
fill={theme.colors.black}
|
|
21
|
-
/>
|
|
22
|
-
<path
|
|
23
|
-
d="M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z"
|
|
24
|
-
fill={theme.colors.black}
|
|
25
|
-
/>
|
|
26
|
-
</svg>
|
|
27
|
-
|
|
28
|
-
)
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
export default DefaultLogo;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
// import React from 'react';
|
|
3
|
-
// import { StoryFn, Meta } from '@storybook/react';
|
|
4
|
-
// import ApexBarChart from './ApexBarChart';
|
|
5
|
-
// import { ApexBarChartProps } from './ApexBarChartProps';
|
|
6
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { ApexDonutChartProps } from "./ApexDonutChartProps";
|
|
3
|
-
declare const ApexDonutChart: ({ data, labels, title, titlePosition, height, width, donutColors, chartColor, titleStyle, legendStyle, }: ApexDonutChartProps) => React.JSX.Element;
|
|
4
|
-
export default ApexDonutChart;
|
|
@@ -1,58 +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 __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
var react_1 = __importDefault(require("react"));
|
|
18
|
-
var react_apexcharts_1 = __importDefault(require("react-apexcharts"));
|
|
19
|
-
var ApexDonutChart = function (_a) {
|
|
20
|
-
var _b;
|
|
21
|
-
var data = _a.data, labels = _a.labels, title = _a.title, _c = _a.titlePosition, titlePosition = _c === void 0 ? "center" : _c, _d = _a.height, height = _d === void 0 ? 400 : _d, _e = _a.width, width = _e === void 0 ? 500 : _e, donutColors = _a.donutColors, chartColor = _a.chartColor, _f = _a.titleStyle, titleStyle = _f === void 0 ? {
|
|
22
|
-
color: "#3182ce",
|
|
23
|
-
fontSize: "16px",
|
|
24
|
-
fontWeight: 600,
|
|
25
|
-
fontFamily: "Arial",
|
|
26
|
-
} : _f, _g = _a.legendStyle, legendStyle = _g === void 0 ? {
|
|
27
|
-
colors: "#000",
|
|
28
|
-
position: "bottom",
|
|
29
|
-
useSeriesColors: false,
|
|
30
|
-
} : _g;
|
|
31
|
-
var options = {
|
|
32
|
-
chart: {
|
|
33
|
-
type: "donut",
|
|
34
|
-
},
|
|
35
|
-
labels: labels,
|
|
36
|
-
colors: (_b = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _b !== void 0 ? _b : ["#3182ce", "#e53e3e", "#38a169", "#dd6b20"],
|
|
37
|
-
legend: {
|
|
38
|
-
position: legendStyle.position,
|
|
39
|
-
labels: {
|
|
40
|
-
colors: legendStyle.colors,
|
|
41
|
-
useSeriesColors: legendStyle.useSeriesColors,
|
|
42
|
-
},
|
|
43
|
-
},
|
|
44
|
-
title: {
|
|
45
|
-
text: title,
|
|
46
|
-
align: titlePosition,
|
|
47
|
-
style: __assign(__assign({}, titleStyle), { fontSize: (titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.fontSize)
|
|
48
|
-
? String(titleStyle.fontSize) // ✅ ensures string if number passed
|
|
49
|
-
: undefined }),
|
|
50
|
-
},
|
|
51
|
-
dataLabels: {
|
|
52
|
-
enabled: true,
|
|
53
|
-
},
|
|
54
|
-
};
|
|
55
|
-
return (react_1.default.createElement("div", null,
|
|
56
|
-
react_1.default.createElement(react_apexcharts_1.default, { options: options, series: data, type: "donut", height: height, width: width })));
|
|
57
|
-
};
|
|
58
|
-
exports.default = ApexDonutChart;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
export type ApexDonutChartProps = {
|
|
2
|
-
data: number[];
|
|
3
|
-
labels: string[];
|
|
4
|
-
title?: string;
|
|
5
|
-
titlePosition?: "left" | "center" | "right";
|
|
6
|
-
height?: number;
|
|
7
|
-
width?: number;
|
|
8
|
-
donutColors?: string[];
|
|
9
|
-
chartColor?: string[];
|
|
10
|
-
titleStyle?: {
|
|
11
|
-
color?: string;
|
|
12
|
-
fontSize?: string | number;
|
|
13
|
-
fontWeight?: number | string;
|
|
14
|
-
fontFamily?: string;
|
|
15
|
-
};
|
|
16
|
-
legendStyle?: {
|
|
17
|
-
colors?: string | string[];
|
|
18
|
-
useSeriesColors?: boolean;
|
|
19
|
-
position?: "top" | "right" | "bottom" | "left";
|
|
20
|
-
};
|
|
21
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
// import React from 'react';
|
|
3
|
-
// import { StoryFn, Meta } from '@storybook/react';
|
|
4
|
-
// import ApexPieChart from './ApexPieChart';
|
|
5
|
-
// import { ApexPieChartProps } from './ApexPieChartProps';
|
|
6
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
// import React from "react";
|
|
3
|
-
// import type { Meta, StoryObj } from "@storybook/react/*";
|
|
4
|
-
// import { InputTextAreaProps } from "./InputTextAreaProps";
|
|
5
|
-
// import InputTextArea from "./InputTextArea";
|
|
6
|
-
// import { useState } from "react";
|
|
7
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
type CustomHeaderProps = {
|
|
3
|
-
column: any;
|
|
4
|
-
onSortChange?: (sortState: string, columnName: string) => void;
|
|
5
|
-
menuItems?: Array<{
|
|
6
|
-
label: string;
|
|
7
|
-
onClick: () => void;
|
|
8
|
-
submenu?: any[];
|
|
9
|
-
}>;
|
|
10
|
-
isSort?: boolean;
|
|
11
|
-
sortDirection: string;
|
|
12
|
-
};
|
|
13
|
-
declare const CustomHeader: React.MemoExoticComponent<({ column, onSortChange, menuItems, isSort, sortDirection, }: CustomHeaderProps) => React.JSX.Element>;
|
|
14
|
-
export default CustomHeader;
|
|
@@ -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,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 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
.table_wrapper {
|
|
2
|
-
width: 100%;
|
|
3
|
-
border-collapse: collapse;
|
|
4
|
-
/* table-layout: fixed; */
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.table_wrapper th .resize-handle {
|
|
8
|
-
position: absolute;
|
|
9
|
-
top: 0;
|
|
10
|
-
right: 0;
|
|
11
|
-
width: 8px;
|
|
12
|
-
height: 100%;
|
|
13
|
-
cursor: col-resize;
|
|
14
|
-
background-color: transparent;
|
|
15
|
-
z-index: 999;
|
|
16
|
-
}
|
|
@@ -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;
|