albinasoft-ui-package 1.1.18 → 1.1.19
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.
|
@@ -1,40 +1,41 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ColDef } from "ag-grid-community";
|
|
3
|
-
import
|
|
4
|
-
interface CustomDatatableProps<T> {
|
|
3
|
+
import "../assets/css/custom-datatable.css";
|
|
4
|
+
export interface CustomDatatableProps<T> {
|
|
5
5
|
rowData: T[];
|
|
6
6
|
columnDefs: ColDef<T>[];
|
|
7
|
-
|
|
8
|
-
floatingFilter?: boolean;
|
|
9
|
-
minWidth?: number;
|
|
7
|
+
loading?: boolean;
|
|
10
8
|
pagination?: boolean;
|
|
11
9
|
paginationPageSize?: number;
|
|
12
10
|
paginationPageSizeSelector?: number[];
|
|
13
|
-
localeText?: any;
|
|
14
11
|
filterAll?: boolean;
|
|
15
12
|
tableTitle?: string;
|
|
16
13
|
tableHeight?: number;
|
|
14
|
+
localeText?: any;
|
|
15
|
+
filter?: boolean;
|
|
16
|
+
floatingFilter?: boolean;
|
|
17
|
+
minWidth?: number;
|
|
17
18
|
labelButton1?: string;
|
|
18
|
-
onClickButton1?: (
|
|
19
|
+
onClickButton1?: (e: React.FormEvent) => void;
|
|
19
20
|
typeButton1?: string;
|
|
20
21
|
disabledButton1?: boolean;
|
|
21
22
|
labelButton2?: string;
|
|
22
|
-
onClickButton2?: (
|
|
23
|
+
onClickButton2?: (e: React.FormEvent) => void;
|
|
23
24
|
typeButton2?: string;
|
|
24
25
|
disabledButton2?: boolean;
|
|
25
26
|
labelButton3?: string;
|
|
26
|
-
onClickButton3?: (
|
|
27
|
+
onClickButton3?: (e: React.FormEvent) => void;
|
|
27
28
|
typeButton3?: string;
|
|
28
29
|
disabledButton3?: boolean;
|
|
29
30
|
labelButton4?: string;
|
|
30
|
-
onClickButton4?: (
|
|
31
|
+
onClickButton4?: (e: React.FormEvent) => void;
|
|
31
32
|
typeButton4?: string;
|
|
32
33
|
disabledButton4?: boolean;
|
|
33
34
|
labelButton5?: string;
|
|
34
|
-
onClickButton5?: (
|
|
35
|
+
onClickButton5?: (e: React.FormEvent) => void;
|
|
35
36
|
typeButton5?: string;
|
|
36
37
|
disabledButton5?: boolean;
|
|
37
38
|
}
|
|
38
|
-
declare function CustomDatatable<T extends {}>({ rowData, columnDefs,
|
|
39
|
+
declare function CustomDatatable<T extends {}>({ rowData, columnDefs, loading, pagination, paginationPageSize, paginationPageSizeSelector, filterAll, tableTitle, tableHeight, localeText, filter, floatingFilter, minWidth, labelButton1, onClickButton1, typeButton1, disabledButton1, labelButton2, onClickButton2, typeButton2, disabledButton2, labelButton3, onClickButton3, typeButton3, disabledButton3, labelButton4, onClickButton4, typeButton4, disabledButton4, labelButton5, onClickButton5, typeButton5, disabledButton5, }: CustomDatatableProps<T>): React.JSX.Element;
|
|
39
40
|
export { CustomDatatable, ColDef };
|
|
40
41
|
export default CustomDatatable;
|
|
@@ -31,15 +31,16 @@ var react_1 = __importStar(require("react"));
|
|
|
31
31
|
var ag_grid_react_1 = require("ag-grid-react");
|
|
32
32
|
var ag_grid_community_1 = require("ag-grid-community");
|
|
33
33
|
var locale_1 = require("@ag-grid-community/locale");
|
|
34
|
-
|
|
34
|
+
require("../assets/css/custom-datatable.css");
|
|
35
35
|
var CustomText_1 = __importStar(require("./CustomText"));
|
|
36
36
|
var CustomButton_1 = __importDefault(require("./CustomButton"));
|
|
37
|
-
require("
|
|
37
|
+
var CustomInput_1 = __importDefault(require("./CustomInput"));
|
|
38
38
|
ag_grid_community_1.ModuleRegistry.registerModules([ag_grid_community_1.AllCommunityModule]);
|
|
39
39
|
function CustomDatatable(_a) {
|
|
40
|
-
var rowData = _a.rowData, columnDefs = _a.columnDefs, _b = _a.
|
|
41
|
-
var
|
|
42
|
-
|
|
40
|
+
var rowData = _a.rowData, columnDefs = _a.columnDefs, _b = _a.loading, loading = _b === void 0 ? false : _b, _c = _a.pagination, pagination = _c === void 0 ? true : _c, _d = _a.paginationPageSize, paginationPageSize = _d === void 0 ? 10 : _d, _e = _a.paginationPageSizeSelector, paginationPageSizeSelector = _e === void 0 ? [10, 20, 50, 100] : _e, _f = _a.filterAll, filterAll = _f === void 0 ? true : _f, _g = _a.tableTitle, tableTitle = _g === void 0 ? "" : _g, tableHeight = _a.tableHeight, _h = _a.localeText, localeText = _h === void 0 ? locale_1.AG_GRID_LOCALE_TR : _h, _j = _a.filter, filter = _j === void 0 ? true : _j, _k = _a.floatingFilter, floatingFilter = _k === void 0 ? true : _k, _l = _a.minWidth, minWidth = _l === void 0 ? 100 : _l, labelButton1 = _a.labelButton1, onClickButton1 = _a.onClickButton1, typeButton1 = _a.typeButton1, disabledButton1 = _a.disabledButton1, labelButton2 = _a.labelButton2, onClickButton2 = _a.onClickButton2, typeButton2 = _a.typeButton2, disabledButton2 = _a.disabledButton2, labelButton3 = _a.labelButton3, onClickButton3 = _a.onClickButton3, typeButton3 = _a.typeButton3, disabledButton3 = _a.disabledButton3, labelButton4 = _a.labelButton4, onClickButton4 = _a.onClickButton4, typeButton4 = _a.typeButton4, disabledButton4 = _a.disabledButton4, labelButton5 = _a.labelButton5, onClickButton5 = _a.onClickButton5, typeButton5 = _a.typeButton5, disabledButton5 = _a.disabledButton5;
|
|
41
|
+
var _m = (0, react_1.useState)(""), quickFilterText = _m[0], setQuickFilterText = _m[1];
|
|
42
|
+
// Tema ayarları
|
|
43
|
+
var theme = ag_grid_community_1.themeQuartz.withParams({
|
|
43
44
|
accentColor: "var(--bs-grid-accentColor)",
|
|
44
45
|
backgroundColor: "var(--bs-grid-backgroundColor)",
|
|
45
46
|
foregroundColor: "var(--bs-grid-foregroundColor)",
|
|
@@ -47,42 +48,27 @@ function CustomDatatable(_a) {
|
|
|
47
48
|
headerTextColor: "var(--bs-grid-headerTextColor)",
|
|
48
49
|
});
|
|
49
50
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
50
|
-
react_1.default.createElement("div", { style: { marginBottom:
|
|
51
|
+
react_1.default.createElement("div", { style: { marginBottom: 5 } },
|
|
51
52
|
react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center" },
|
|
52
53
|
react_1.default.createElement("div", { className: "text-start" }, tableTitle && (react_1.default.createElement(CustomText_1.default, { value: tableTitle, textType: CustomText_1.TextType.HEADING, textAlign: CustomText_1.TextAlign.START, lineHeight: CustomText_1.LineHeight.XXS }))),
|
|
53
54
|
react_1.default.createElement("div", { className: "text-end" },
|
|
54
|
-
labelButton5 && onClickButton5 && (react_1.default.createElement(CustomButton_1.default, { label: labelButton5, onClick: onClickButton5
|
|
55
|
-
labelButton4 && onClickButton4 && (react_1.default.createElement(CustomButton_1.default, { label: labelButton4, onClick: onClickButton4
|
|
56
|
-
labelButton3 && onClickButton3 && (react_1.default.createElement(CustomButton_1.default, { label: labelButton3, onClick: onClickButton3
|
|
57
|
-
labelButton2 && onClickButton2 && (react_1.default.createElement(CustomButton_1.default, { label: labelButton2, onClick: onClickButton2
|
|
58
|
-
labelButton1 && onClickButton1 && (react_1.default.createElement(CustomButton_1.default, { label: labelButton1, onClick: onClickButton1
|
|
55
|
+
labelButton5 && onClickButton5 && (react_1.default.createElement(CustomButton_1.default, { label: labelButton5, onClick: onClickButton5, className: "btn btn-".concat(typeButton5, " me-1"), disabled: disabledButton5 })),
|
|
56
|
+
labelButton4 && onClickButton4 && (react_1.default.createElement(CustomButton_1.default, { label: labelButton4, onClick: onClickButton4, className: "btn btn-".concat(typeButton4, " me-1"), disabled: disabledButton4 })),
|
|
57
|
+
labelButton3 && onClickButton3 && (react_1.default.createElement(CustomButton_1.default, { label: labelButton3, onClick: onClickButton3, className: "btn btn-".concat(typeButton3, " me-1"), disabled: disabledButton3 })),
|
|
58
|
+
labelButton2 && onClickButton2 && (react_1.default.createElement(CustomButton_1.default, { label: labelButton2, onClick: onClickButton2, className: "btn btn-".concat(typeButton2, " me-1"), disabled: disabledButton2 })),
|
|
59
|
+
labelButton1 && onClickButton1 && (react_1.default.createElement(CustomButton_1.default, { label: labelButton1, onClick: onClickButton1, className: "btn btn-".concat(typeButton1, " me-1"), disabled: disabledButton1 })))),
|
|
59
60
|
filterAll && (react_1.default.createElement(CustomInput_1.default, { value: quickFilterText, onChange: function (e) { return setQuickFilterText(e.target.value); }, placeholder: "B\u00FCt\u00FCn tabloda ara...", style: {
|
|
60
|
-
marginTop:
|
|
61
|
+
marginTop: -15,
|
|
61
62
|
width: "100%",
|
|
62
|
-
padding:
|
|
63
|
+
padding: 5,
|
|
63
64
|
border: "2px solid var(--bs-grid-searchBoxBorderColor)",
|
|
64
65
|
background: "var(--bs-grid-searchBoxBackgroundColor)",
|
|
65
|
-
borderRadius:
|
|
66
|
+
borderRadius: 10,
|
|
66
67
|
} }))),
|
|
67
68
|
react_1.default.createElement("div", { style: { width: "100%", height: tableHeight ? "".concat(tableHeight, "px") : "auto" } },
|
|
68
|
-
react_1.default.createElement(ag_grid_react_1.AgGridReact, { domLayout: tableHeight ? undefined : "autoHeight", theme:
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
resizable: true,
|
|
72
|
-
filter: filter,
|
|
73
|
-
floatingFilter: floatingFilter,
|
|
74
|
-
getQuickFilterText: function (params) {
|
|
75
|
-
return params.value ? params.value.toString().toLocaleLowerCase("tr-TR") : "";
|
|
76
|
-
},
|
|
77
|
-
filterParams: {
|
|
78
|
-
textFormatter: function (value) {
|
|
79
|
-
return value ? value.toString().toLocaleLowerCase("tr-TR") : null;
|
|
80
|
-
},
|
|
81
|
-
filterOptions: ["contains"],
|
|
82
|
-
defaultOption: "contains",
|
|
83
|
-
suppressAndOrCondition: true,
|
|
84
|
-
},
|
|
85
|
-
}, quickFilterText: quickFilterText ? quickFilterText.toString().toLocaleLowerCase("tr-TR") : "", pagination: pagination, paginationPageSize: paginationPageSize, paginationPageSizeSelector: paginationPageSizeSelector }))));
|
|
69
|
+
react_1.default.createElement(ag_grid_react_1.AgGridReact, { loading: loading, domLayout: tableHeight ? undefined : "autoHeight", theme: theme, rowData: rowData, columnDefs: columnDefs, localeText: localeText, quickFilterText: quickFilterText.toLowerCase(), suppressServerSideFullWidthLoadingRow: true,
|
|
70
|
+
// Spinner içeren overlay
|
|
71
|
+
overlayLoadingTemplate: "\n <div class=\"ag-overlay-loading-center\">\n <div class=\"spinner-border spinner-border-sm\" role=\"status\">\n <span class=\"visually-hidden\">Y\u00FCkleniyor\u2026</span>\n </div>\n </div>", overlayNoRowsTemplate: '<span class="ag-overlay-no-rows-center">G\u00F6sterilecek Sat\u0131r Yok</span>', pagination: pagination, paginationPageSize: paginationPageSize, paginationPageSizeSelector: paginationPageSizeSelector }))));
|
|
86
72
|
}
|
|
87
73
|
exports.CustomDatatable = CustomDatatable;
|
|
88
74
|
exports.default = CustomDatatable;
|