@akinon/akitable 1.0.0 → 1.0.1
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/dist/cjs/akitable.d.ts.map +1 -1
- package/dist/cjs/akitable.js +22 -11
- package/dist/cjs/components/actions.js +3 -3
- package/dist/cjs/components/controls.js +2 -2
- package/dist/cjs/components/datatable.css +10 -5
- package/dist/cjs/components/datatable.d.ts.map +1 -1
- package/dist/cjs/components/datatable.js +53 -20
- package/dist/cjs/components/footer.d.ts.map +1 -1
- package/dist/cjs/components/footer.js +2 -2
- package/dist/cjs/components/header.css +33 -1
- package/dist/cjs/components/header.d.ts.map +1 -1
- package/dist/cjs/components/header.js +19 -11
- package/dist/cjs/components/pagination.css +1 -1
- package/dist/cjs/components/pagination.d.ts.map +1 -1
- package/dist/cjs/components/pagination.js +19 -7
- package/dist/cjs/i18n/translations/en.d.ts +1 -0
- package/dist/cjs/i18n/translations/en.d.ts.map +1 -1
- package/dist/cjs/i18n/translations/en.js +2 -1
- package/dist/cjs/i18n/translations/tr.d.ts +2 -1
- package/dist/cjs/i18n/translations/tr.d.ts.map +1 -1
- package/dist/cjs/i18n/translations/tr.js +3 -2
- package/dist/cjs/types.d.ts +7 -2
- package/dist/cjs/types.d.ts.map +1 -1
- package/dist/cjs/types.js +5 -0
- package/dist/esm/akitable.d.ts.map +1 -1
- package/dist/esm/akitable.js +22 -11
- package/dist/esm/components/actions.js +3 -3
- package/dist/esm/components/controls.js +2 -2
- package/dist/esm/components/datatable.css +10 -5
- package/dist/esm/components/datatable.d.ts.map +1 -1
- package/dist/esm/components/datatable.js +53 -20
- package/dist/esm/components/footer.d.ts.map +1 -1
- package/dist/esm/components/footer.js +2 -2
- package/dist/esm/components/header.css +33 -1
- package/dist/esm/components/header.d.ts.map +1 -1
- package/dist/esm/components/header.js +19 -11
- package/dist/esm/components/pagination.css +1 -1
- package/dist/esm/components/pagination.d.ts.map +1 -1
- package/dist/esm/components/pagination.js +19 -7
- package/dist/esm/i18n/translations/en.d.ts +1 -0
- package/dist/esm/i18n/translations/en.d.ts.map +1 -1
- package/dist/esm/i18n/translations/en.js +2 -1
- package/dist/esm/i18n/translations/tr.d.ts +2 -1
- package/dist/esm/i18n/translations/tr.d.ts.map +1 -1
- package/dist/esm/i18n/translations/tr.js +3 -2
- package/dist/esm/types.d.ts +7 -2
- package/dist/esm/types.d.ts.map +1 -1
- package/dist/esm/types.js +4 -1
- package/package.json +20 -19
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"akitable.d.ts","sourceRoot":"","sources":["../../src/akitable.tsx"],"names":[],"mappings":"AACA,OAAO,gBAAgB,CAAC;AAGxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAuC,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7E;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,QAAQ,UAAW,aAAa,
|
|
1
|
+
{"version":3,"file":"akitable.d.ts","sourceRoot":"","sources":["../../src/akitable.tsx"],"names":[],"mappings":"AACA,OAAO,gBAAgB,CAAC;AAGxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAuC,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7E;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,QAAQ,UAAW,aAAa,sBAuF5C,CAAC"}
|
package/dist/cjs/akitable.js
CHANGED
|
@@ -26,20 +26,31 @@ const header_1 = require("./components/header");
|
|
|
26
26
|
*/
|
|
27
27
|
const Akitable = (props) => {
|
|
28
28
|
const { actions, columns, data, footer, header, isLoading, pagination, rowKey, onPaginationChanged, onRowClick, onRowEdit } = props;
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
const handleGetSplittedDataByPagination = ({ result }) => {
|
|
30
|
+
if (!pagination)
|
|
31
|
+
return result;
|
|
32
|
+
const { page, size } = pagination;
|
|
33
|
+
const startIndex = (page - 1) * size;
|
|
34
|
+
const endIndex = startIndex + size;
|
|
35
|
+
return result.slice(startIndex, endIndex);
|
|
36
|
+
};
|
|
31
37
|
// If there is a pagination object, table data should be accessed from type AkitablePaginatedData.
|
|
32
38
|
// If not, table data should be accessed from type AkitableData.
|
|
33
|
-
|
|
39
|
+
const handleGetParsedData = () => {
|
|
40
|
+
if (pagination) {
|
|
41
|
+
const result = data;
|
|
42
|
+
const total = (result === null || result === void 0 ? void 0 : result.count) || 0;
|
|
43
|
+
const parsedData = handleGetSplittedDataByPagination({
|
|
44
|
+
result: (result === null || result === void 0 ? void 0 : result.results) || []
|
|
45
|
+
});
|
|
46
|
+
return { total, parsedData };
|
|
47
|
+
}
|
|
34
48
|
const result = data;
|
|
35
|
-
total = (result === null || result === void 0 ? void 0 : result.
|
|
36
|
-
parsedData =
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
total = (result === null || result === void 0 ? void 0 : result.length) || 0;
|
|
41
|
-
parsedData = result || [];
|
|
42
|
-
}
|
|
49
|
+
const total = (result === null || result === void 0 ? void 0 : result.length) || 0;
|
|
50
|
+
const parsedData = result || [];
|
|
51
|
+
return { total, parsedData };
|
|
52
|
+
};
|
|
53
|
+
const { total, parsedData } = handleGetParsedData();
|
|
43
54
|
return (react_1.default.createElement("div", { className: "akitable-container" },
|
|
44
55
|
react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { fallbackRender: error_1.fallbackRender },
|
|
45
56
|
react_1.default.createElement(akitable_context_1.AkitableProvider, { actions: actions, isLoading: isLoading, pagination: Object.assign(Object.assign({}, pagination), { total, hasPagination: !!pagination }), onPaginationChanged: onPaginationChanged },
|
|
@@ -20,13 +20,13 @@ const AkitableActions = () => {
|
|
|
20
20
|
setSelectedAction(value);
|
|
21
21
|
};
|
|
22
22
|
const handleActionTrigger = () => {
|
|
23
|
-
if (!selectedAction || !
|
|
23
|
+
if (!selectedAction || !hasSelections)
|
|
24
24
|
return;
|
|
25
25
|
const action = actions === null || actions === void 0 ? void 0 : actions.find((_, index) => index === selectedAction - 1);
|
|
26
26
|
action === null || action === void 0 ? void 0 : action.onSelect(selectedRowKeys);
|
|
27
27
|
};
|
|
28
|
-
return (react_1.default.createElement("div", { className: "akitable-actions" },
|
|
29
|
-
react_1.default.createElement(ui_select_1.Select, { placeholder: t('selectAction'), value: selectedAction, options: options, onChange: value => handleActionChange(value), disabled: isLoading || (pagination === null || pagination === void 0 ? void 0 : pagination.total) === 0, allowClear: true }),
|
|
28
|
+
return (react_1.default.createElement("div", { "data-testid": "akitable-actions", className: "akitable-actions" },
|
|
29
|
+
react_1.default.createElement(ui_select_1.Select, { placeholder: t('selectAction'), value: selectedAction, options: options, onChange: value => handleActionChange(value), disabled: isLoading || (pagination === null || pagination === void 0 ? void 0 : pagination.total) === 0, allowClear: true, "data-testid": "akitable-actions-select" }),
|
|
30
30
|
selectedAction && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
31
31
|
react_1.default.createElement(ui_button_1.Button, { type: "primary", icon: "katalogkontrol", disabled: isLoading || !hasSelections, onClick: handleActionTrigger }, t('apply')),
|
|
32
32
|
hasSelections && (react_1.default.createElement("span", { className: "akitable-actions-info" }, t('selectedCount', { count: selectedRowKeys === null || selectedRowKeys === void 0 ? void 0 : selectedRowKeys.length })))))));
|
|
@@ -10,9 +10,9 @@ const AkitableControls = () => {
|
|
|
10
10
|
const { actions, pagination } = (0, akitable_context_1.useAkitableContext)();
|
|
11
11
|
if (!actions)
|
|
12
12
|
return null;
|
|
13
|
-
return (react_1.default.createElement("div", { className: "akitable-controls" },
|
|
13
|
+
return (react_1.default.createElement("div", { "data-testid": "akitable-controls", className: "akitable-controls" },
|
|
14
14
|
actions && actions.length > 0 && react_1.default.createElement(actions_1.AkitableActions, null),
|
|
15
|
-
(pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination) && (react_1.default.createElement("div", { className: "ml-auto" },
|
|
15
|
+
(pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination) && (react_1.default.createElement("div", { "data-testid": "akitable-controls-pagination", className: "ml-auto" },
|
|
16
16
|
react_1.default.createElement(pagination_1.AkitablePagination, null)))));
|
|
17
17
|
};
|
|
18
18
|
exports.AkitableControls = AkitableControls;
|
|
@@ -40,14 +40,11 @@
|
|
|
40
40
|
|
|
41
41
|
.akitable-wrapper .akinon-table-row.is-selectable {
|
|
42
42
|
cursor: pointer;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.akitable-wrapper .akinon-table-row.is-selectable td {
|
|
46
43
|
transition: background-color 0.2s;
|
|
47
44
|
}
|
|
48
45
|
|
|
49
|
-
.akitable-wrapper .akinon-table-row.is-selectable:hover
|
|
50
|
-
background-color: var(--color-blue-100)
|
|
46
|
+
.akitable-wrapper .akinon-table-row.is-selectable:hover {
|
|
47
|
+
background-color: var(--color-blue-100);
|
|
51
48
|
}
|
|
52
49
|
|
|
53
50
|
.akitable-wrapper
|
|
@@ -61,6 +58,10 @@
|
|
|
61
58
|
position: relative;
|
|
62
59
|
}
|
|
63
60
|
|
|
61
|
+
.akitable-wrapper .akinon-table-cell {
|
|
62
|
+
z-index: 1;
|
|
63
|
+
}
|
|
64
|
+
|
|
64
65
|
.akitable-wrapper .akinon-table-row.akitable-row-pending::after {
|
|
65
66
|
content: '';
|
|
66
67
|
position: absolute;
|
|
@@ -95,3 +96,7 @@
|
|
|
95
96
|
.akitable-wrapper .akinon-table-tbody tr:last-child td {
|
|
96
97
|
border-bottom: 1px solid var(--color-neutral-350);
|
|
97
98
|
}
|
|
99
|
+
|
|
100
|
+
.akitable-wrapper .akinon-table-row .akinon-table-edit-button--disable {
|
|
101
|
+
cursor: not-allowed;
|
|
102
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datatable.d.ts","sourceRoot":"","sources":["../../../src/components/datatable.tsx"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAOzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,
|
|
1
|
+
{"version":3,"file":"datatable.d.ts","sourceRoot":"","sources":["../../../src/components/datatable.tsx"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAOzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAGL,sBAAsB,EAEvB,MAAM,UAAU,CAAC;AAIlB,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,sBAoK9D,CAAC"}
|
|
@@ -1,4 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
+
});
|
|
10
|
+
};
|
|
2
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
12
|
exports.AkitableDataTable = void 0;
|
|
4
13
|
require("./datatable.css");
|
|
@@ -10,6 +19,7 @@ const clsx_1 = require("clsx");
|
|
|
10
19
|
const react_1 = require("react");
|
|
11
20
|
const akitable_context_1 = require("../akitable-context");
|
|
12
21
|
const i18n_1 = require("../i18n");
|
|
22
|
+
const types_1 = require("../types");
|
|
13
23
|
const EditableCell_1 = require("./EditableCell");
|
|
14
24
|
const { t } = i18n_1.i18n;
|
|
15
25
|
const AkitableDataTable = (props) => {
|
|
@@ -18,7 +28,10 @@ const AkitableDataTable = (props) => {
|
|
|
18
28
|
const [form] = akiform_1.Akiform.useForm();
|
|
19
29
|
const [localColumns, setLocalColumns] = react_1.default.useState(columns);
|
|
20
30
|
const [editingKey, setEditingKey] = react_1.default.useState(null);
|
|
31
|
+
const [isLoadingSaveButton, setIsLoadingSaveButton] = react_1.default.useState(false);
|
|
21
32
|
const hasActions = actions && actions.length > 0;
|
|
33
|
+
const getRowKeyData = (record) => record[rowKey];
|
|
34
|
+
const checkIsEditingRow = (recordId) => recordId === editingKey;
|
|
22
35
|
const onSelectChange = (newSelectedRowKeys) => {
|
|
23
36
|
setSelectedRowKeys === null || setSelectedRowKeys === void 0 ? void 0 : setSelectedRowKeys(newSelectedRowKeys);
|
|
24
37
|
};
|
|
@@ -33,6 +46,7 @@ const AkitableDataTable = (props) => {
|
|
|
33
46
|
*/
|
|
34
47
|
react_1.default.useEffect(() => {
|
|
35
48
|
if (!onRowEdit) {
|
|
49
|
+
setLocalColumns(columns);
|
|
36
50
|
return;
|
|
37
51
|
}
|
|
38
52
|
const modifiedColumns = columns.map(column => {
|
|
@@ -42,45 +56,64 @@ const AkitableDataTable = (props) => {
|
|
|
42
56
|
record,
|
|
43
57
|
dataIndex: column.dataIndex,
|
|
44
58
|
title: column.title,
|
|
45
|
-
editing: record
|
|
59
|
+
editing: checkIsEditingRow(getRowKeyData(record))
|
|
46
60
|
}) });
|
|
47
61
|
});
|
|
48
62
|
const editColumn = {
|
|
49
63
|
key: 'edit',
|
|
50
64
|
title: t('edit'),
|
|
51
65
|
render: (record) => {
|
|
52
|
-
const isRowEditing = record
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
} }, t('save')),
|
|
59
|
-
react_1.default.createElement(ui_typography_1.Text, { type: "danger", onClick: () => setEditingKey(null), style: { marginLeft: 8, cursor: 'pointer' } }, t('cancel')))) : (react_1.default.createElement(ui_button_1.Button, { type: "primary", size: "small", onClick: () => {
|
|
66
|
+
const isRowEditing = checkIsEditingRow(getRowKeyData(record));
|
|
67
|
+
const handleOnClickSaveButton = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
68
|
+
try {
|
|
69
|
+
setIsLoadingSaveButton(true);
|
|
70
|
+
yield onRowEdit(record, form.getFieldsValue());
|
|
71
|
+
setEditingKey(null);
|
|
60
72
|
form.resetFields();
|
|
61
|
-
|
|
62
|
-
|
|
73
|
+
}
|
|
74
|
+
finally {
|
|
75
|
+
setIsLoadingSaveButton(false);
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
const handleOnClickEditButton = (e) => {
|
|
79
|
+
if (!isLoadingSaveButton) {
|
|
80
|
+
form.resetFields();
|
|
81
|
+
setEditingKey(getRowKeyData(record));
|
|
82
|
+
}
|
|
83
|
+
e.stopPropagation(); // To prevent row click event
|
|
84
|
+
};
|
|
85
|
+
const handleOnClickCancelButton = () => {
|
|
86
|
+
setEditingKey(null);
|
|
87
|
+
};
|
|
88
|
+
return isRowEditing ? (react_1.default.createElement("span", null,
|
|
89
|
+
react_1.default.createElement(ui_button_1.Button, { size: "small", onClick: handleOnClickSaveButton, loading: isLoadingSaveButton }, t('save')),
|
|
90
|
+
react_1.default.createElement(ui_typography_1.Text, Object.assign({ type: "danger", disabled: isLoadingSaveButton, className: "cursor-pointer ml-2" }, (!isLoadingSaveButton && {
|
|
91
|
+
onClick: handleOnClickCancelButton
|
|
92
|
+
})), t('cancel')))) : (react_1.default.createElement(ui_button_1.Button, { type: "primary", size: "small", onClick: handleOnClickEditButton, className: (0, clsx_1.default)({
|
|
93
|
+
'akinon-table-edit-button--disable': isLoadingSaveButton
|
|
94
|
+
}) }, t('edit')));
|
|
63
95
|
},
|
|
64
96
|
width: 200
|
|
65
97
|
};
|
|
66
98
|
setLocalColumns([...modifiedColumns, editColumn]);
|
|
67
|
-
}, [columns, onRowEdit, editingKey]);
|
|
68
|
-
return (react_1.default.createElement("div", { className: "akitable-wrapper" },
|
|
99
|
+
}, [columns, onRowEdit, editingKey, isLoadingSaveButton]);
|
|
100
|
+
return (react_1.default.createElement("div", { "data-testid": "akitable-datatable-wrapper", className: "akitable-wrapper" },
|
|
69
101
|
react_1.default.createElement(akiform_1.Akiform, { form: form, component: false },
|
|
70
|
-
react_1.default.createElement(ui_table_1.Table, { components: {
|
|
102
|
+
react_1.default.createElement(ui_table_1.Table, { "data-testid": "akitable-datatable", components: {
|
|
71
103
|
body: {
|
|
72
104
|
cell: EditableCell_1.default
|
|
73
105
|
}
|
|
74
|
-
}, columns: localColumns, dataSource: data, rowKey: (record) => record
|
|
75
|
-
|
|
106
|
+
}, columns: localColumns, dataSource: data, rowKey: (record) => getRowKeyData(record), bordered: true, rowHoverable: true, pagination: false, scroll: { x: 'max-content', scrollToFirstRowOnChange: true }, loading: isLoading, onRow: (record, rowIndex) => {
|
|
107
|
+
const isEditingRow = checkIsEditingRow(getRowKeyData(record));
|
|
108
|
+
return Object.assign({}, (!isEditingRow && {
|
|
76
109
|
onClick: (event) => {
|
|
77
110
|
onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(record, event, rowIndex);
|
|
78
111
|
}
|
|
79
|
-
};
|
|
112
|
+
}));
|
|
80
113
|
}, rowClassName: (record) => (0, clsx_1.default)({
|
|
81
|
-
'is-selectable': !!onRowClick,
|
|
82
|
-
'akitable-row-pending': record.rowStatus ===
|
|
83
|
-
'akitable-row-error': record.rowStatus ===
|
|
114
|
+
'is-selectable': !!onRowClick && !checkIsEditingRow(getRowKeyData(record)),
|
|
115
|
+
'akitable-row-pending': record.rowStatus === types_1.AkitableRowStatus.PENDING,
|
|
116
|
+
'akitable-row-error': record.rowStatus === types_1.AkitableRowStatus.ERROR
|
|
84
117
|
}), rowSelection: hasActions ? rowSelection : undefined }))));
|
|
85
118
|
};
|
|
86
119
|
exports.AkitableDataTable = AkitableDataTable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/components/footer.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAGtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAG/C,eAAO,MAAM,cAAc,UAAW,mBAAmB,
|
|
1
|
+
{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/components/footer.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAGtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAG/C,eAAO,MAAM,cAAc,UAAW,mBAAmB,6BAsBxD,CAAC"}
|
|
@@ -11,8 +11,8 @@ const AkitableFooter = (props) => {
|
|
|
11
11
|
const { extra } = props;
|
|
12
12
|
if (!extra && !(pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination))
|
|
13
13
|
return null;
|
|
14
|
-
return (react_1.default.createElement("div", { className: "akitable-footer" },
|
|
15
|
-
extra && (react_1.default.createElement("div", { className: "akitable-footer-extra" }, isLoading ? react_1.default.createElement(ui_spin_1.Spin,
|
|
14
|
+
return (react_1.default.createElement("div", { "data-testid": "akitable-footer", className: "akitable-footer" },
|
|
15
|
+
extra && (react_1.default.createElement("div", { className: "akitable-footer-extra" }, isLoading ? (react_1.default.createElement(ui_spin_1.Spin, { "data-testid": "akitable-footer-extra-loading-skeleton" })) : (extra))),
|
|
16
16
|
react_1.default.createElement("div", { className: "ml-auto" },
|
|
17
17
|
react_1.default.createElement(pagination_1.AkitablePagination, null))));
|
|
18
18
|
};
|
|
@@ -5,13 +5,40 @@
|
|
|
5
5
|
min-height: 40px;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
+
.akitable-header-title-container {
|
|
9
|
+
display: flex;
|
|
10
|
+
align-items: center;
|
|
11
|
+
gap: 0.1rem;
|
|
12
|
+
color: var(--color-gray-900);
|
|
13
|
+
}
|
|
14
|
+
|
|
8
15
|
.akitable-header-title {
|
|
9
16
|
font-size: 1.25rem;
|
|
10
17
|
font-weight: bold;
|
|
11
18
|
margin: 0;
|
|
12
19
|
padding: 0;
|
|
13
20
|
line-height: 1;
|
|
14
|
-
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.akitable-header-title-count-skeleton {
|
|
26
|
+
width: 50px;
|
|
27
|
+
height: 20px;
|
|
28
|
+
margin-left: 0.7rem;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.akitable-header-title-count {
|
|
32
|
+
font-size: 1.25rem;
|
|
33
|
+
font-weight: bold;
|
|
34
|
+
margin: 0;
|
|
35
|
+
padding: 0;
|
|
36
|
+
line-height: 1;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.akitable-header-title-description-skeleton {
|
|
40
|
+
width: 120px;
|
|
41
|
+
height: 10px;
|
|
15
42
|
}
|
|
16
43
|
|
|
17
44
|
.akitable-header-description {
|
|
@@ -20,6 +47,11 @@
|
|
|
20
47
|
margin-top: 0.5rem;
|
|
21
48
|
}
|
|
22
49
|
|
|
50
|
+
.akitable-header-extra-content {
|
|
51
|
+
margin-bottom: 1rem;
|
|
52
|
+
color: var(--color-gray-300);
|
|
53
|
+
}
|
|
54
|
+
|
|
23
55
|
.akitable-header-extra {
|
|
24
56
|
margin-left: auto;
|
|
25
57
|
text-align: right;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/header.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAItB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAG/C,eAAO,MAAM,cAAc,UAAW,mBAAmB,
|
|
1
|
+
{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/header.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAItB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAG/C,eAAO,MAAM,cAAc,UAAW,mBAAmB,6BA4ExD,CAAC"}
|
|
@@ -14,18 +14,26 @@ const AkitableHeader = (props) => {
|
|
|
14
14
|
const hasActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
|
|
15
15
|
if (!title && !extra)
|
|
16
16
|
return null;
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
react_1.default.createElement("h2", { className: "akitable-header-title" },
|
|
20
|
-
|
|
21
|
-
" ",
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
17
|
+
const renderTitle = () => {
|
|
18
|
+
return (react_1.default.createElement("div", { className: "akitable-header-title-container" },
|
|
19
|
+
react_1.default.createElement("h2", { className: "akitable-header-title" }, title),
|
|
20
|
+
isLoading ? (react_1.default.createElement("span", { "data-testid": "akitable-title-loading-skeleton" },
|
|
21
|
+
react_1.default.createElement(ui_skeleton_1.Skeleton.Button, { active: true, size: "small", className: "ml-1" }))) : (react_1.default.createElement("span", { className: "akitable-header-title-count" }, `(${pagination === null || pagination === void 0 ? void 0 : pagination.total})`))));
|
|
22
|
+
};
|
|
23
|
+
const renderTitleDescription = () => {
|
|
24
|
+
const descriptionContent = !(pagination === null || pagination === void 0 ? void 0 : pagination.total)
|
|
25
|
+
? i18n_1.i18n.t('noData')
|
|
26
|
+
: i18n_1.i18n.t('resultsFound', { count: pagination === null || pagination === void 0 ? void 0 : pagination.total });
|
|
27
|
+
return (react_1.default.createElement("span", { "data-testid": "akitable-header-description", className: "akitable-header-description" }, descriptionContent));
|
|
28
|
+
};
|
|
29
|
+
return (react_1.default.createElement("div", { "data-testid": "akitable-header", className: "akitable-header" },
|
|
30
|
+
!!title && (react_1.default.createElement("div", { "data-testid": "akitable-header-title-container" },
|
|
31
|
+
renderTitle(),
|
|
32
|
+
isLoading ? (react_1.default.createElement("span", { "data-testid": "akitable-title-description-loading-skeleton" },
|
|
33
|
+
react_1.default.createElement(ui_skeleton_1.Skeleton.Input, { active: true, size: "small", className: "mt-2" }))) : (renderTitleDescription()))),
|
|
26
34
|
react_1.default.createElement("div", { className: "akitable-header-extra" },
|
|
27
|
-
extra && react_1.default.createElement("div", { className: "
|
|
28
|
-
!hasActions && (pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination) && (react_1.default.createElement("div",
|
|
35
|
+
extra && (react_1.default.createElement("div", { "data-testid": "akitable-header-extra-content", className: "akitable-header-extra-content" }, isLoading ? (react_1.default.createElement(ui_spin_1.Spin, { "data-testid": "akitable-header-extra-loading-skeleton" })) : (extra))),
|
|
36
|
+
!hasActions && (pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination) && (react_1.default.createElement("div", { "data-testid": "akitable-header-pagination" },
|
|
29
37
|
react_1.default.createElement(pagination_1.AkitablePagination, null))))));
|
|
30
38
|
};
|
|
31
39
|
exports.AkitableHeader = AkitableHeader;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAG1B,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAG1B,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,eAAO,MAAM,kBAAkB,yBAuC9B,CAAC"}
|
|
@@ -6,15 +6,27 @@ const ui_pagination_1 = require("@akinon/ui-pagination");
|
|
|
6
6
|
const react_1 = require("react");
|
|
7
7
|
const akitable_context_1 = require("../akitable-context");
|
|
8
8
|
const i18n_1 = require("../i18n");
|
|
9
|
+
const PAGE_SIZE_OPTIONS = [20, 50, 100, 250];
|
|
9
10
|
const AkitablePagination = () => {
|
|
10
11
|
const { isLoading, pagination, onPaginationChanged } = (0, akitable_context_1.useAkitableContext)();
|
|
11
12
|
const { t } = i18n_1.i18n;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
13
|
+
const totalPagination = (pagination === null || pagination === void 0 ? void 0 : pagination.total) || 0;
|
|
14
|
+
const hasItems = totalPagination > 0;
|
|
15
|
+
const locale = {
|
|
16
|
+
items_per_page: t('itemsPerPage')
|
|
17
|
+
};
|
|
18
|
+
const handleShowTotal = (total, range) => {
|
|
19
|
+
return t('paginationShowTotal', {
|
|
20
|
+
from: range[0],
|
|
21
|
+
to: range[1],
|
|
22
|
+
total
|
|
23
|
+
});
|
|
24
|
+
};
|
|
25
|
+
const handleOnChange = (page, size) => {
|
|
26
|
+
onPaginationChanged === null || onPaginationChanged === void 0 ? void 0 : onPaginationChanged(page, size);
|
|
27
|
+
return null;
|
|
28
|
+
};
|
|
29
|
+
return (react_1.default.createElement("div", { className: "akitable-pagination" },
|
|
30
|
+
react_1.default.createElement(ui_pagination_1.Pagination, { disabled: isLoading || !hasItems, current: pagination === null || pagination === void 0 ? void 0 : pagination.page, pageSize: pagination === null || pagination === void 0 ? void 0 : pagination.size, pageSizeOptions: PAGE_SIZE_OPTIONS, total: totalPagination, showTotal: handleShowTotal, showSizeChanger: true, onChange: handleOnChange, locale: locale, theme: "light" })));
|
|
19
31
|
};
|
|
20
32
|
exports.AkitablePagination = AkitablePagination;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY
|
|
1
|
+
{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;CAeR,CAAC;AAEX,eAAe,YAAY,CAAC"}
|
|
@@ -7,10 +7,11 @@ declare const translations: {
|
|
|
7
7
|
readonly noData: "Kayıt bulunamadı.";
|
|
8
8
|
readonly resultsFound: "{{count}} sonuç bulundu.";
|
|
9
9
|
readonly selectAction: "Aksiyon Seçiniz";
|
|
10
|
-
readonly selectedCount: "{{count}}
|
|
10
|
+
readonly selectedCount: "{{count}} kayıt seçildi.";
|
|
11
11
|
readonly edit: "Düzenle";
|
|
12
12
|
readonly save: "Kaydet";
|
|
13
13
|
readonly cancel: "İptal";
|
|
14
|
+
readonly paginationShowTotal: "{{from}}-{{to}} / {{total}} kayıt";
|
|
14
15
|
};
|
|
15
16
|
export default translations;
|
|
16
17
|
//# sourceMappingURL=tr.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY
|
|
1
|
+
{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;CAeR,CAAC;AAEX,eAAe,YAAY,CAAC"}
|
|
@@ -9,9 +9,10 @@ const translations = {
|
|
|
9
9
|
noData: 'Kayıt bulunamadı.',
|
|
10
10
|
resultsFound: '{{count}} sonuç bulundu.',
|
|
11
11
|
selectAction: 'Aksiyon Seçiniz',
|
|
12
|
-
selectedCount: '{{count}}
|
|
12
|
+
selectedCount: '{{count}} kayıt seçildi.',
|
|
13
13
|
edit: 'Düzenle',
|
|
14
14
|
save: 'Kaydet',
|
|
15
|
-
cancel: 'İptal'
|
|
15
|
+
cancel: 'İptal',
|
|
16
|
+
paginationShowTotal: '{{from}}-{{to}} / {{total}} kayıt'
|
|
16
17
|
};
|
|
17
18
|
exports.default = translations;
|
package/dist/cjs/types.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { TableColumnType } from 'antd';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
type RowClickEvent = (record: AkitableData, event?: React.MouseEvent<HTMLElement>, rowIndex?: number) => void;
|
|
4
|
-
type RowEditCallback = (modifiedRecord: AkitableData, payload: AkitableData) => void
|
|
4
|
+
type RowEditCallback = (modifiedRecord: AkitableData, payload: AkitableData) => void | Promise<void>;
|
|
5
5
|
export type PaginationChangeEvent = (page: number, size: number) => void;
|
|
6
6
|
export interface AkitableProps {
|
|
7
7
|
/**
|
|
@@ -108,11 +108,16 @@ export interface AkitableColumn extends TableColumnType<AkitableData> {
|
|
|
108
108
|
*/
|
|
109
109
|
editable?: boolean;
|
|
110
110
|
}
|
|
111
|
+
export declare const AkitableRowStatus: {
|
|
112
|
+
readonly PENDING: "pending";
|
|
113
|
+
readonly ERROR: "error";
|
|
114
|
+
};
|
|
115
|
+
type AllAkitableRowStatuses = `${(typeof AkitableRowStatus)[keyof typeof AkitableRowStatus]}`;
|
|
111
116
|
export interface AkitableData {
|
|
112
117
|
/**
|
|
113
118
|
* Status of the table row.
|
|
114
119
|
*/
|
|
115
|
-
rowStatus?:
|
|
120
|
+
rowStatus?: AllAkitableRowStatuses;
|
|
116
121
|
/**
|
|
117
122
|
* Additional properties for the table row.
|
|
118
123
|
*/
|
package/dist/cjs/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,MAAM,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,KAAK,aAAa,GAAG,CACnB,MAAM,EAAE,YAAY,EACpB,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EACrC,QAAQ,CAAC,EAAE,MAAM,KACd,IAAI,CAAC;AAEV,KAAK,eAAe,GAAG,CACrB,cAAc,EAAE,YAAY,EAC5B,OAAO,EAAE,YAAY,KAClB,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}
|
package/dist/cjs/types.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"akitable.d.ts","sourceRoot":"","sources":["../../src/akitable.tsx"],"names":[],"mappings":"AACA,OAAO,gBAAgB,CAAC;AAGxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAuC,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7E;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,QAAQ,UAAW,aAAa,
|
|
1
|
+
{"version":3,"file":"akitable.d.ts","sourceRoot":"","sources":["../../src/akitable.tsx"],"names":[],"mappings":"AACA,OAAO,gBAAgB,CAAC;AAGxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAuC,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7E;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,QAAQ,UAAW,aAAa,sBAuF5C,CAAC"}
|
package/dist/esm/akitable.js
CHANGED
|
@@ -23,20 +23,31 @@ import { AkitableHeader } from './components/header';
|
|
|
23
23
|
*/
|
|
24
24
|
export const Akitable = (props) => {
|
|
25
25
|
const { actions, columns, data, footer, header, isLoading, pagination, rowKey, onPaginationChanged, onRowClick, onRowEdit } = props;
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
const handleGetSplittedDataByPagination = ({ result }) => {
|
|
27
|
+
if (!pagination)
|
|
28
|
+
return result;
|
|
29
|
+
const { page, size } = pagination;
|
|
30
|
+
const startIndex = (page - 1) * size;
|
|
31
|
+
const endIndex = startIndex + size;
|
|
32
|
+
return result.slice(startIndex, endIndex);
|
|
33
|
+
};
|
|
28
34
|
// If there is a pagination object, table data should be accessed from type AkitablePaginatedData.
|
|
29
35
|
// If not, table data should be accessed from type AkitableData.
|
|
30
|
-
|
|
36
|
+
const handleGetParsedData = () => {
|
|
37
|
+
if (pagination) {
|
|
38
|
+
const result = data;
|
|
39
|
+
const total = (result === null || result === void 0 ? void 0 : result.count) || 0;
|
|
40
|
+
const parsedData = handleGetSplittedDataByPagination({
|
|
41
|
+
result: (result === null || result === void 0 ? void 0 : result.results) || []
|
|
42
|
+
});
|
|
43
|
+
return { total, parsedData };
|
|
44
|
+
}
|
|
31
45
|
const result = data;
|
|
32
|
-
total = (result === null || result === void 0 ? void 0 : result.
|
|
33
|
-
parsedData =
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
total = (result === null || result === void 0 ? void 0 : result.length) || 0;
|
|
38
|
-
parsedData = result || [];
|
|
39
|
-
}
|
|
46
|
+
const total = (result === null || result === void 0 ? void 0 : result.length) || 0;
|
|
47
|
+
const parsedData = result || [];
|
|
48
|
+
return { total, parsedData };
|
|
49
|
+
};
|
|
50
|
+
const { total, parsedData } = handleGetParsedData();
|
|
40
51
|
return (React.createElement("div", { className: "akitable-container" },
|
|
41
52
|
React.createElement(ErrorBoundary, { fallbackRender: fallbackRender },
|
|
42
53
|
React.createElement(AkitableProvider, { actions: actions, isLoading: isLoading, pagination: Object.assign(Object.assign({}, pagination), { total, hasPagination: !!pagination }), onPaginationChanged: onPaginationChanged },
|
|
@@ -17,13 +17,13 @@ export const AkitableActions = () => {
|
|
|
17
17
|
setSelectedAction(value);
|
|
18
18
|
};
|
|
19
19
|
const handleActionTrigger = () => {
|
|
20
|
-
if (!selectedAction || !
|
|
20
|
+
if (!selectedAction || !hasSelections)
|
|
21
21
|
return;
|
|
22
22
|
const action = actions === null || actions === void 0 ? void 0 : actions.find((_, index) => index === selectedAction - 1);
|
|
23
23
|
action === null || action === void 0 ? void 0 : action.onSelect(selectedRowKeys);
|
|
24
24
|
};
|
|
25
|
-
return (React.createElement("div", { className: "akitable-actions" },
|
|
26
|
-
React.createElement(Select, { placeholder: t('selectAction'), value: selectedAction, options: options, onChange: value => handleActionChange(value), disabled: isLoading || (pagination === null || pagination === void 0 ? void 0 : pagination.total) === 0, allowClear: true }),
|
|
25
|
+
return (React.createElement("div", { "data-testid": "akitable-actions", className: "akitable-actions" },
|
|
26
|
+
React.createElement(Select, { placeholder: t('selectAction'), value: selectedAction, options: options, onChange: value => handleActionChange(value), disabled: isLoading || (pagination === null || pagination === void 0 ? void 0 : pagination.total) === 0, allowClear: true, "data-testid": "akitable-actions-select" }),
|
|
27
27
|
selectedAction && (React.createElement(React.Fragment, null,
|
|
28
28
|
React.createElement(Button, { type: "primary", icon: "katalogkontrol", disabled: isLoading || !hasSelections, onClick: handleActionTrigger }, t('apply')),
|
|
29
29
|
hasSelections && (React.createElement("span", { className: "akitable-actions-info" }, t('selectedCount', { count: selectedRowKeys === null || selectedRowKeys === void 0 ? void 0 : selectedRowKeys.length })))))));
|
|
@@ -7,8 +7,8 @@ export const AkitableControls = () => {
|
|
|
7
7
|
const { actions, pagination } = useAkitableContext();
|
|
8
8
|
if (!actions)
|
|
9
9
|
return null;
|
|
10
|
-
return (React.createElement("div", { className: "akitable-controls" },
|
|
10
|
+
return (React.createElement("div", { "data-testid": "akitable-controls", className: "akitable-controls" },
|
|
11
11
|
actions && actions.length > 0 && React.createElement(AkitableActions, null),
|
|
12
|
-
(pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination) && (React.createElement("div", { className: "ml-auto" },
|
|
12
|
+
(pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination) && (React.createElement("div", { "data-testid": "akitable-controls-pagination", className: "ml-auto" },
|
|
13
13
|
React.createElement(AkitablePagination, null)))));
|
|
14
14
|
};
|
|
@@ -40,14 +40,11 @@
|
|
|
40
40
|
|
|
41
41
|
.akitable-wrapper .akinon-table-row.is-selectable {
|
|
42
42
|
cursor: pointer;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.akitable-wrapper .akinon-table-row.is-selectable td {
|
|
46
43
|
transition: background-color 0.2s;
|
|
47
44
|
}
|
|
48
45
|
|
|
49
|
-
.akitable-wrapper .akinon-table-row.is-selectable:hover
|
|
50
|
-
background-color: var(--color-blue-100)
|
|
46
|
+
.akitable-wrapper .akinon-table-row.is-selectable:hover {
|
|
47
|
+
background-color: var(--color-blue-100);
|
|
51
48
|
}
|
|
52
49
|
|
|
53
50
|
.akitable-wrapper
|
|
@@ -61,6 +58,10 @@
|
|
|
61
58
|
position: relative;
|
|
62
59
|
}
|
|
63
60
|
|
|
61
|
+
.akitable-wrapper .akinon-table-cell {
|
|
62
|
+
z-index: 1;
|
|
63
|
+
}
|
|
64
|
+
|
|
64
65
|
.akitable-wrapper .akinon-table-row.akitable-row-pending::after {
|
|
65
66
|
content: '';
|
|
66
67
|
position: absolute;
|
|
@@ -95,3 +96,7 @@
|
|
|
95
96
|
.akitable-wrapper .akinon-table-tbody tr:last-child td {
|
|
96
97
|
border-bottom: 1px solid var(--color-neutral-350);
|
|
97
98
|
}
|
|
99
|
+
|
|
100
|
+
.akitable-wrapper .akinon-table-row .akinon-table-edit-button--disable {
|
|
101
|
+
cursor: not-allowed;
|
|
102
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datatable.d.ts","sourceRoot":"","sources":["../../../src/components/datatable.tsx"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAOzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,
|
|
1
|
+
{"version":3,"file":"datatable.d.ts","sourceRoot":"","sources":["../../../src/components/datatable.tsx"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAOzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAGL,sBAAsB,EAEvB,MAAM,UAAU,CAAC;AAIlB,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,sBAoK9D,CAAC"}
|
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
1
10
|
import './datatable.css';
|
|
2
11
|
import { Akiform } from '@akinon/akiform';
|
|
3
12
|
import { Button } from '@akinon/ui-button';
|
|
@@ -7,6 +16,7 @@ import clsx from 'clsx';
|
|
|
7
16
|
import React from 'react';
|
|
8
17
|
import { useAkitableContext } from '../akitable-context';
|
|
9
18
|
import { i18n } from '../i18n';
|
|
19
|
+
import { AkitableRowStatus } from '../types';
|
|
10
20
|
import EditableCell from './EditableCell';
|
|
11
21
|
const { t } = i18n;
|
|
12
22
|
export const AkitableDataTable = (props) => {
|
|
@@ -15,7 +25,10 @@ export const AkitableDataTable = (props) => {
|
|
|
15
25
|
const [form] = Akiform.useForm();
|
|
16
26
|
const [localColumns, setLocalColumns] = React.useState(columns);
|
|
17
27
|
const [editingKey, setEditingKey] = React.useState(null);
|
|
28
|
+
const [isLoadingSaveButton, setIsLoadingSaveButton] = React.useState(false);
|
|
18
29
|
const hasActions = actions && actions.length > 0;
|
|
30
|
+
const getRowKeyData = (record) => record[rowKey];
|
|
31
|
+
const checkIsEditingRow = (recordId) => recordId === editingKey;
|
|
19
32
|
const onSelectChange = (newSelectedRowKeys) => {
|
|
20
33
|
setSelectedRowKeys === null || setSelectedRowKeys === void 0 ? void 0 : setSelectedRowKeys(newSelectedRowKeys);
|
|
21
34
|
};
|
|
@@ -30,6 +43,7 @@ export const AkitableDataTable = (props) => {
|
|
|
30
43
|
*/
|
|
31
44
|
React.useEffect(() => {
|
|
32
45
|
if (!onRowEdit) {
|
|
46
|
+
setLocalColumns(columns);
|
|
33
47
|
return;
|
|
34
48
|
}
|
|
35
49
|
const modifiedColumns = columns.map(column => {
|
|
@@ -39,44 +53,63 @@ export const AkitableDataTable = (props) => {
|
|
|
39
53
|
record,
|
|
40
54
|
dataIndex: column.dataIndex,
|
|
41
55
|
title: column.title,
|
|
42
|
-
editing: record
|
|
56
|
+
editing: checkIsEditingRow(getRowKeyData(record))
|
|
43
57
|
}) });
|
|
44
58
|
});
|
|
45
59
|
const editColumn = {
|
|
46
60
|
key: 'edit',
|
|
47
61
|
title: t('edit'),
|
|
48
62
|
render: (record) => {
|
|
49
|
-
const isRowEditing = record
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
} }, t('save')),
|
|
56
|
-
React.createElement(Text, { type: "danger", onClick: () => setEditingKey(null), style: { marginLeft: 8, cursor: 'pointer' } }, t('cancel')))) : (React.createElement(Button, { type: "primary", size: "small", onClick: () => {
|
|
63
|
+
const isRowEditing = checkIsEditingRow(getRowKeyData(record));
|
|
64
|
+
const handleOnClickSaveButton = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
65
|
+
try {
|
|
66
|
+
setIsLoadingSaveButton(true);
|
|
67
|
+
yield onRowEdit(record, form.getFieldsValue());
|
|
68
|
+
setEditingKey(null);
|
|
57
69
|
form.resetFields();
|
|
58
|
-
|
|
59
|
-
|
|
70
|
+
}
|
|
71
|
+
finally {
|
|
72
|
+
setIsLoadingSaveButton(false);
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
const handleOnClickEditButton = (e) => {
|
|
76
|
+
if (!isLoadingSaveButton) {
|
|
77
|
+
form.resetFields();
|
|
78
|
+
setEditingKey(getRowKeyData(record));
|
|
79
|
+
}
|
|
80
|
+
e.stopPropagation(); // To prevent row click event
|
|
81
|
+
};
|
|
82
|
+
const handleOnClickCancelButton = () => {
|
|
83
|
+
setEditingKey(null);
|
|
84
|
+
};
|
|
85
|
+
return isRowEditing ? (React.createElement("span", null,
|
|
86
|
+
React.createElement(Button, { size: "small", onClick: handleOnClickSaveButton, loading: isLoadingSaveButton }, t('save')),
|
|
87
|
+
React.createElement(Text, Object.assign({ type: "danger", disabled: isLoadingSaveButton, className: "cursor-pointer ml-2" }, (!isLoadingSaveButton && {
|
|
88
|
+
onClick: handleOnClickCancelButton
|
|
89
|
+
})), t('cancel')))) : (React.createElement(Button, { type: "primary", size: "small", onClick: handleOnClickEditButton, className: clsx({
|
|
90
|
+
'akinon-table-edit-button--disable': isLoadingSaveButton
|
|
91
|
+
}) }, t('edit')));
|
|
60
92
|
},
|
|
61
93
|
width: 200
|
|
62
94
|
};
|
|
63
95
|
setLocalColumns([...modifiedColumns, editColumn]);
|
|
64
|
-
}, [columns, onRowEdit, editingKey]);
|
|
65
|
-
return (React.createElement("div", { className: "akitable-wrapper" },
|
|
96
|
+
}, [columns, onRowEdit, editingKey, isLoadingSaveButton]);
|
|
97
|
+
return (React.createElement("div", { "data-testid": "akitable-datatable-wrapper", className: "akitable-wrapper" },
|
|
66
98
|
React.createElement(Akiform, { form: form, component: false },
|
|
67
|
-
React.createElement(Table, { components: {
|
|
99
|
+
React.createElement(Table, { "data-testid": "akitable-datatable", components: {
|
|
68
100
|
body: {
|
|
69
101
|
cell: EditableCell
|
|
70
102
|
}
|
|
71
|
-
}, columns: localColumns, dataSource: data, rowKey: (record) => record
|
|
72
|
-
|
|
103
|
+
}, columns: localColumns, dataSource: data, rowKey: (record) => getRowKeyData(record), bordered: true, rowHoverable: true, pagination: false, scroll: { x: 'max-content', scrollToFirstRowOnChange: true }, loading: isLoading, onRow: (record, rowIndex) => {
|
|
104
|
+
const isEditingRow = checkIsEditingRow(getRowKeyData(record));
|
|
105
|
+
return Object.assign({}, (!isEditingRow && {
|
|
73
106
|
onClick: (event) => {
|
|
74
107
|
onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(record, event, rowIndex);
|
|
75
108
|
}
|
|
76
|
-
};
|
|
109
|
+
}));
|
|
77
110
|
}, rowClassName: (record) => clsx({
|
|
78
|
-
'is-selectable': !!onRowClick,
|
|
79
|
-
'akitable-row-pending': record.rowStatus ===
|
|
80
|
-
'akitable-row-error': record.rowStatus ===
|
|
111
|
+
'is-selectable': !!onRowClick && !checkIsEditingRow(getRowKeyData(record)),
|
|
112
|
+
'akitable-row-pending': record.rowStatus === AkitableRowStatus.PENDING,
|
|
113
|
+
'akitable-row-error': record.rowStatus === AkitableRowStatus.ERROR
|
|
81
114
|
}), rowSelection: hasActions ? rowSelection : undefined }))));
|
|
82
115
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/components/footer.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAGtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAG/C,eAAO,MAAM,cAAc,UAAW,mBAAmB,
|
|
1
|
+
{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/components/footer.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAGtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAG/C,eAAO,MAAM,cAAc,UAAW,mBAAmB,6BAsBxD,CAAC"}
|
|
@@ -8,8 +8,8 @@ export const AkitableFooter = (props) => {
|
|
|
8
8
|
const { extra } = props;
|
|
9
9
|
if (!extra && !(pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination))
|
|
10
10
|
return null;
|
|
11
|
-
return (React.createElement("div", { className: "akitable-footer" },
|
|
12
|
-
extra && (React.createElement("div", { className: "akitable-footer-extra" }, isLoading ? React.createElement(Spin,
|
|
11
|
+
return (React.createElement("div", { "data-testid": "akitable-footer", className: "akitable-footer" },
|
|
12
|
+
extra && (React.createElement("div", { className: "akitable-footer-extra" }, isLoading ? (React.createElement(Spin, { "data-testid": "akitable-footer-extra-loading-skeleton" })) : (extra))),
|
|
13
13
|
React.createElement("div", { className: "ml-auto" },
|
|
14
14
|
React.createElement(AkitablePagination, null))));
|
|
15
15
|
};
|
|
@@ -5,13 +5,40 @@
|
|
|
5
5
|
min-height: 40px;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
+
.akitable-header-title-container {
|
|
9
|
+
display: flex;
|
|
10
|
+
align-items: center;
|
|
11
|
+
gap: 0.1rem;
|
|
12
|
+
color: var(--color-gray-900);
|
|
13
|
+
}
|
|
14
|
+
|
|
8
15
|
.akitable-header-title {
|
|
9
16
|
font-size: 1.25rem;
|
|
10
17
|
font-weight: bold;
|
|
11
18
|
margin: 0;
|
|
12
19
|
padding: 0;
|
|
13
20
|
line-height: 1;
|
|
14
|
-
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.akitable-header-title-count-skeleton {
|
|
26
|
+
width: 50px;
|
|
27
|
+
height: 20px;
|
|
28
|
+
margin-left: 0.7rem;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.akitable-header-title-count {
|
|
32
|
+
font-size: 1.25rem;
|
|
33
|
+
font-weight: bold;
|
|
34
|
+
margin: 0;
|
|
35
|
+
padding: 0;
|
|
36
|
+
line-height: 1;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.akitable-header-title-description-skeleton {
|
|
40
|
+
width: 120px;
|
|
41
|
+
height: 10px;
|
|
15
42
|
}
|
|
16
43
|
|
|
17
44
|
.akitable-header-description {
|
|
@@ -20,6 +47,11 @@
|
|
|
20
47
|
margin-top: 0.5rem;
|
|
21
48
|
}
|
|
22
49
|
|
|
50
|
+
.akitable-header-extra-content {
|
|
51
|
+
margin-bottom: 1rem;
|
|
52
|
+
color: var(--color-gray-300);
|
|
53
|
+
}
|
|
54
|
+
|
|
23
55
|
.akitable-header-extra {
|
|
24
56
|
margin-left: auto;
|
|
25
57
|
text-align: right;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/header.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAItB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAG/C,eAAO,MAAM,cAAc,UAAW,mBAAmB,
|
|
1
|
+
{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/header.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAItB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAG/C,eAAO,MAAM,cAAc,UAAW,mBAAmB,6BA4ExD,CAAC"}
|
|
@@ -11,17 +11,25 @@ export const AkitableHeader = (props) => {
|
|
|
11
11
|
const hasActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
|
|
12
12
|
if (!title && !extra)
|
|
13
13
|
return null;
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
React.createElement("h2", { className: "akitable-header-title" },
|
|
17
|
-
|
|
18
|
-
" ",
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
14
|
+
const renderTitle = () => {
|
|
15
|
+
return (React.createElement("div", { className: "akitable-header-title-container" },
|
|
16
|
+
React.createElement("h2", { className: "akitable-header-title" }, title),
|
|
17
|
+
isLoading ? (React.createElement("span", { "data-testid": "akitable-title-loading-skeleton" },
|
|
18
|
+
React.createElement(Skeleton.Button, { active: true, size: "small", className: "ml-1" }))) : (React.createElement("span", { className: "akitable-header-title-count" }, `(${pagination === null || pagination === void 0 ? void 0 : pagination.total})`))));
|
|
19
|
+
};
|
|
20
|
+
const renderTitleDescription = () => {
|
|
21
|
+
const descriptionContent = !(pagination === null || pagination === void 0 ? void 0 : pagination.total)
|
|
22
|
+
? i18n.t('noData')
|
|
23
|
+
: i18n.t('resultsFound', { count: pagination === null || pagination === void 0 ? void 0 : pagination.total });
|
|
24
|
+
return (React.createElement("span", { "data-testid": "akitable-header-description", className: "akitable-header-description" }, descriptionContent));
|
|
25
|
+
};
|
|
26
|
+
return (React.createElement("div", { "data-testid": "akitable-header", className: "akitable-header" },
|
|
27
|
+
!!title && (React.createElement("div", { "data-testid": "akitable-header-title-container" },
|
|
28
|
+
renderTitle(),
|
|
29
|
+
isLoading ? (React.createElement("span", { "data-testid": "akitable-title-description-loading-skeleton" },
|
|
30
|
+
React.createElement(Skeleton.Input, { active: true, size: "small", className: "mt-2" }))) : (renderTitleDescription()))),
|
|
23
31
|
React.createElement("div", { className: "akitable-header-extra" },
|
|
24
|
-
extra && React.createElement("div", { className: "
|
|
25
|
-
!hasActions && (pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination) && (React.createElement("div",
|
|
32
|
+
extra && (React.createElement("div", { "data-testid": "akitable-header-extra-content", className: "akitable-header-extra-content" }, isLoading ? (React.createElement(Spin, { "data-testid": "akitable-header-extra-loading-skeleton" })) : (extra))),
|
|
33
|
+
!hasActions && (pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination) && (React.createElement("div", { "data-testid": "akitable-header-pagination" },
|
|
26
34
|
React.createElement(AkitablePagination, null))))));
|
|
27
35
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAG1B,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAG1B,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,eAAO,MAAM,kBAAkB,yBAuC9B,CAAC"}
|
|
@@ -3,14 +3,26 @@ import { Pagination } from '@akinon/ui-pagination';
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { useAkitableContext } from '../akitable-context';
|
|
5
5
|
import { i18n } from '../i18n';
|
|
6
|
+
const PAGE_SIZE_OPTIONS = [20, 50, 100, 250];
|
|
6
7
|
export const AkitablePagination = () => {
|
|
7
8
|
const { isLoading, pagination, onPaginationChanged } = useAkitableContext();
|
|
8
9
|
const { t } = i18n;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
10
|
+
const totalPagination = (pagination === null || pagination === void 0 ? void 0 : pagination.total) || 0;
|
|
11
|
+
const hasItems = totalPagination > 0;
|
|
12
|
+
const locale = {
|
|
13
|
+
items_per_page: t('itemsPerPage')
|
|
14
|
+
};
|
|
15
|
+
const handleShowTotal = (total, range) => {
|
|
16
|
+
return t('paginationShowTotal', {
|
|
17
|
+
from: range[0],
|
|
18
|
+
to: range[1],
|
|
19
|
+
total
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
const handleOnChange = (page, size) => {
|
|
23
|
+
onPaginationChanged === null || onPaginationChanged === void 0 ? void 0 : onPaginationChanged(page, size);
|
|
24
|
+
return null;
|
|
25
|
+
};
|
|
26
|
+
return (React.createElement("div", { className: "akitable-pagination" },
|
|
27
|
+
React.createElement(Pagination, { disabled: isLoading || !hasItems, current: pagination === null || pagination === void 0 ? void 0 : pagination.page, pageSize: pagination === null || pagination === void 0 ? void 0 : pagination.size, pageSizeOptions: PAGE_SIZE_OPTIONS, total: totalPagination, showTotal: handleShowTotal, showSizeChanger: true, onChange: handleOnChange, locale: locale, theme: "light" })));
|
|
16
28
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY
|
|
1
|
+
{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;CAeR,CAAC;AAEX,eAAe,YAAY,CAAC"}
|
|
@@ -7,10 +7,11 @@ declare const translations: {
|
|
|
7
7
|
readonly noData: "Kayıt bulunamadı.";
|
|
8
8
|
readonly resultsFound: "{{count}} sonuç bulundu.";
|
|
9
9
|
readonly selectAction: "Aksiyon Seçiniz";
|
|
10
|
-
readonly selectedCount: "{{count}}
|
|
10
|
+
readonly selectedCount: "{{count}} kayıt seçildi.";
|
|
11
11
|
readonly edit: "Düzenle";
|
|
12
12
|
readonly save: "Kaydet";
|
|
13
13
|
readonly cancel: "İptal";
|
|
14
|
+
readonly paginationShowTotal: "{{from}}-{{to}} / {{total}} kayıt";
|
|
14
15
|
};
|
|
15
16
|
export default translations;
|
|
16
17
|
//# sourceMappingURL=tr.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY
|
|
1
|
+
{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;CAeR,CAAC;AAEX,eAAe,YAAY,CAAC"}
|
|
@@ -7,9 +7,10 @@ const translations = {
|
|
|
7
7
|
noData: 'Kayıt bulunamadı.',
|
|
8
8
|
resultsFound: '{{count}} sonuç bulundu.',
|
|
9
9
|
selectAction: 'Aksiyon Seçiniz',
|
|
10
|
-
selectedCount: '{{count}}
|
|
10
|
+
selectedCount: '{{count}} kayıt seçildi.',
|
|
11
11
|
edit: 'Düzenle',
|
|
12
12
|
save: 'Kaydet',
|
|
13
|
-
cancel: 'İptal'
|
|
13
|
+
cancel: 'İptal',
|
|
14
|
+
paginationShowTotal: '{{from}}-{{to}} / {{total}} kayıt'
|
|
14
15
|
};
|
|
15
16
|
export default translations;
|
package/dist/esm/types.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { TableColumnType } from 'antd';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
type RowClickEvent = (record: AkitableData, event?: React.MouseEvent<HTMLElement>, rowIndex?: number) => void;
|
|
4
|
-
type RowEditCallback = (modifiedRecord: AkitableData, payload: AkitableData) => void
|
|
4
|
+
type RowEditCallback = (modifiedRecord: AkitableData, payload: AkitableData) => void | Promise<void>;
|
|
5
5
|
export type PaginationChangeEvent = (page: number, size: number) => void;
|
|
6
6
|
export interface AkitableProps {
|
|
7
7
|
/**
|
|
@@ -108,11 +108,16 @@ export interface AkitableColumn extends TableColumnType<AkitableData> {
|
|
|
108
108
|
*/
|
|
109
109
|
editable?: boolean;
|
|
110
110
|
}
|
|
111
|
+
export declare const AkitableRowStatus: {
|
|
112
|
+
readonly PENDING: "pending";
|
|
113
|
+
readonly ERROR: "error";
|
|
114
|
+
};
|
|
115
|
+
type AllAkitableRowStatuses = `${(typeof AkitableRowStatus)[keyof typeof AkitableRowStatus]}`;
|
|
111
116
|
export interface AkitableData {
|
|
112
117
|
/**
|
|
113
118
|
* Status of the table row.
|
|
114
119
|
*/
|
|
115
|
-
rowStatus?:
|
|
120
|
+
rowStatus?: AllAkitableRowStatuses;
|
|
116
121
|
/**
|
|
117
122
|
* Additional properties for the table row.
|
|
118
123
|
*/
|
package/dist/esm/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,MAAM,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,KAAK,aAAa,GAAG,CACnB,MAAM,EAAE,YAAY,EACpB,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EACrC,QAAQ,CAAC,EAAE,MAAM,KACd,IAAI,CAAC;AAEV,KAAK,eAAe,GAAG,CACrB,cAAc,EAAE,YAAY,EAC5B,OAAO,EAAE,YAAY,KAClB,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}
|
package/dist/esm/types.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@akinon/akitable",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/esm/index.js",
|
|
@@ -12,30 +12,31 @@
|
|
|
12
12
|
"antd": "5.22.6",
|
|
13
13
|
"clsx": "^2.0.0",
|
|
14
14
|
"react-error-boundary": "^4.0.13",
|
|
15
|
-
"@akinon/akiform": "1.0.
|
|
16
|
-
"@akinon/
|
|
17
|
-
"@akinon/icons": "1.0.
|
|
18
|
-
"@akinon/ui-
|
|
19
|
-
"@akinon/
|
|
20
|
-
"@akinon/ui-
|
|
21
|
-
"@akinon/ui-
|
|
22
|
-
"@akinon/ui-
|
|
23
|
-
"@akinon/ui-
|
|
24
|
-
"@akinon/ui-
|
|
25
|
-
"@akinon/ui-
|
|
26
|
-
"@akinon/ui-
|
|
27
|
-
"@akinon/ui-
|
|
28
|
-
"@akinon/ui-
|
|
29
|
-
"@akinon/ui-
|
|
30
|
-
"@akinon/ui-typography": "1.0.
|
|
31
|
-
"@akinon/ui-
|
|
15
|
+
"@akinon/akiform": "1.0.1",
|
|
16
|
+
"@akinon/akilocale": "1.0.1",
|
|
17
|
+
"@akinon/icons": "1.0.1",
|
|
18
|
+
"@akinon/ui-button": "1.0.1",
|
|
19
|
+
"@akinon/ui-card": "1.0.1",
|
|
20
|
+
"@akinon/ui-input": "1.0.1",
|
|
21
|
+
"@akinon/ui-pagination": "1.0.1",
|
|
22
|
+
"@akinon/ui-progress": "1.0.1",
|
|
23
|
+
"@akinon/ui-result": "1.0.1",
|
|
24
|
+
"@akinon/ui-select": "1.0.1",
|
|
25
|
+
"@akinon/ui-skeleton": "1.0.1",
|
|
26
|
+
"@akinon/ui-space": "1.0.1",
|
|
27
|
+
"@akinon/ui-table": "1.0.1",
|
|
28
|
+
"@akinon/ui-steps": "1.0.1",
|
|
29
|
+
"@akinon/ui-spin": "1.0.1",
|
|
30
|
+
"@akinon/ui-typography": "1.0.1",
|
|
31
|
+
"@akinon/ui-theme": "1.0.1"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"clean-package": "2.2.0",
|
|
35
35
|
"copyfiles": "^2.4.1",
|
|
36
36
|
"rimraf": "^5.0.5",
|
|
37
37
|
"typescript": "*",
|
|
38
|
-
"@akinon/typescript-config": "1.0.
|
|
38
|
+
"@akinon/typescript-config": "1.0.1",
|
|
39
|
+
"@akinon/utils": "1.0.1"
|
|
39
40
|
},
|
|
40
41
|
"peerDependencies": {
|
|
41
42
|
"react": ">=18",
|