@astral/ui 0.41.0 → 0.41.3
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/DataGrid/DataGrid.d.ts +3 -3
- package/DataGrid/DataGridHead/DataGridHead.d.ts +1 -1
- package/DataGrid/DataGridHead/DataGridHead.js +25 -24
- package/DataGrid/DataGridHeadColumn/DataGridHeadColumn.d.ts +1 -1
- package/DataGrid/DataGridHeadColumn/DataGridHeadColumn.js +3 -3
- package/DataGrid/DataGridHeadColumn/styled.d.ts +1 -0
- package/DataGrid/DataGridHeadColumn/styled.js +10 -1
- package/DataGridPagination/DataGridPagination.d.ts +15 -1
- package/DataGridPagination/DataGridPagination.js +2 -2
- package/DataGridPagination/index.d.ts +0 -1
- package/DataGridPagination/index.js +0 -1
- package/Notification/NotificationContainer/NotificationContainer.js +3 -1
- package/esm/DataGrid/DataGrid.d.ts +3 -3
- package/esm/DataGrid/DataGridHead/DataGridHead.d.ts +1 -1
- package/esm/DataGrid/DataGridHead/DataGridHead.js +25 -24
- package/esm/DataGrid/DataGridHeadColumn/DataGridHeadColumn.d.ts +1 -1
- package/esm/DataGrid/DataGridHeadColumn/DataGridHeadColumn.js +3 -3
- package/esm/DataGrid/DataGridHeadColumn/styled.d.ts +1 -0
- package/esm/DataGrid/DataGridHeadColumn/styled.js +10 -1
- package/esm/DataGridPagination/DataGridPagination.d.ts +15 -1
- package/esm/DataGridPagination/DataGridPagination.js +2 -2
- package/esm/DataGridPagination/index.d.ts +0 -1
- package/esm/DataGridPagination/index.js +0 -1
- package/esm/Notification/NotificationContainer/NotificationContainer.js +3 -1
- package/esm/theme/baseTheme.js +1 -0
- package/esm/theme/components/MuiOutlinedInput.js +4 -3
- package/esm/theme/components/MuiTypography.js +1 -0
- package/esm/theme/hooks/useTheme/index.js +2 -0
- package/package.json +2 -2
- package/theme/baseTheme.js +1 -0
- package/theme/components/MuiOutlinedInput.js +4 -3
- package/theme/components/MuiTypography.js +1 -0
- package/theme/hooks/useTheme/index.js +2 -0
- package/DataGridPagination/types.d.ts +0 -6
- package/DataGridPagination/types.js +0 -2
- package/esm/DataGridPagination/types.d.ts +0 -6
- package/esm/DataGridPagination/types.js +0 -1
package/DataGrid/DataGrid.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { DataGridColumns, DataGridRow, DataGridSort } from './types';
|
|
3
|
-
export declare type DataGridProps<Data = DataGridRow, SortField extends keyof Data = keyof Data> = {
|
|
3
|
+
export declare type DataGridProps<Data extends object = DataGridRow, SortField extends keyof Data = keyof Data> = {
|
|
4
4
|
/**
|
|
5
5
|
* @example <DataGrid rows={[{name: 'test'}]} />
|
|
6
6
|
* Массив данных для таблицы
|
|
@@ -41,7 +41,7 @@ export declare type DataGridProps<Data = DataGridRow, SortField extends keyof Da
|
|
|
41
41
|
* @example <DataGrid onSort={({fieldId: 'test', sort: 'asc'}) => console.log('sorted')} />
|
|
42
42
|
* Обработчик сортировки
|
|
43
43
|
*/
|
|
44
|
-
onSort
|
|
44
|
+
onSort?: (sorting: DataGridSort<SortField>[]) => void;
|
|
45
45
|
/**
|
|
46
46
|
* @example <DataGrid Footer={<DataGridPagination />} />
|
|
47
47
|
* Компонент кастомного футера (н-р Pagination)
|
|
@@ -70,4 +70,4 @@ export declare type DataGridProps<Data = DataGridRow, SortField extends keyof Da
|
|
|
70
70
|
*/
|
|
71
71
|
minDisplayRows?: number;
|
|
72
72
|
};
|
|
73
|
-
export declare function DataGrid<Data extends object, SortField extends keyof Data>({ columns, rows, selectedRows, sorting, maxHeight, minDisplayRows, onRowClick, onSelectRow, Footer, loading, onSort, keyId, emptyCellValue, }: DataGridProps<Data, SortField>): JSX.Element;
|
|
73
|
+
export declare function DataGrid<Data extends object = DataGridRow, SortField extends keyof Data = keyof Data>({ columns, rows, selectedRows, sorting, maxHeight, minDisplayRows, onRowClick, onSelectRow, Footer, loading, onSort, keyId, emptyCellValue, }: DataGridProps<Data, SortField>): JSX.Element;
|
|
@@ -5,7 +5,7 @@ export declare type DataGridHeadProps<Data = DataGridRow, SortField extends keyo
|
|
|
5
5
|
selectable: boolean;
|
|
6
6
|
onSelectAllRows: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
7
7
|
sorting: DataGridSort<SortField>[];
|
|
8
|
-
onSort
|
|
8
|
+
onSort?: (sorting: DataGridSort<SortField>[]) => void;
|
|
9
9
|
uncheckedRowsCount: number;
|
|
10
10
|
rowsCount: number;
|
|
11
11
|
};
|
|
@@ -32,33 +32,34 @@ function DataGridHead(_a) {
|
|
|
32
32
|
var columns = _a.columns, selectable = _a.selectable, onSelectAllRows = _a.onSelectAllRows, rowsCount = _a.rowsCount, onSort = _a.onSort, _b = _a.sorting, sorting = _b === void 0 ? [] : _b, uncheckedRowsCount = _a.uncheckedRowsCount;
|
|
33
33
|
var checked = (0, react_1.useMemo)(function () { return !Boolean(uncheckedRowsCount) && rowsCount > 0; }, [uncheckedRowsCount, rowsCount]);
|
|
34
34
|
var indeterminate = (0, react_1.useMemo)(function () { return uncheckedRowsCount > 0 && uncheckedRowsCount < rowsCount; }, [uncheckedRowsCount, rowsCount]);
|
|
35
|
-
var handleSort = (0, react_1.useCallback)(function (field
|
|
36
|
-
if (
|
|
37
|
-
|
|
35
|
+
var handleSort = (0, react_1.useCallback)(function (field) {
|
|
36
|
+
if (!onSort) {
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
var currentSort = sorting.find(function (_a) {
|
|
40
|
+
var fieldId = _a.fieldId;
|
|
41
|
+
return fieldId === field;
|
|
42
|
+
});
|
|
43
|
+
// если для выбранного столбца текущая сортировка ASC - меняем на DESC
|
|
44
|
+
if (currentSort && currentSort.sort === constants_1.SortStates.ASC) {
|
|
45
|
+
var newSorting = __spreadArray(__spreadArray([], sorting.filter(function (_a) {
|
|
46
|
+
var fieldId = _a.fieldId;
|
|
47
|
+
return fieldId !== field;
|
|
48
|
+
}), true), [
|
|
49
|
+
{ fieldId: field, sort: constants_1.SortStates.DESC },
|
|
50
|
+
], false);
|
|
51
|
+
return onSort(newSorting);
|
|
52
|
+
// если для выбранного столбца текущая сортировка DESC - убираем сортировку
|
|
53
|
+
}
|
|
54
|
+
else if (currentSort && currentSort.sort === constants_1.SortStates.DESC) {
|
|
55
|
+
var newSorting = sorting.filter(function (_a) {
|
|
38
56
|
var fieldId = _a.fieldId;
|
|
39
|
-
return fieldId
|
|
57
|
+
return fieldId !== field;
|
|
40
58
|
});
|
|
41
|
-
|
|
42
|
-
if (currentSort && currentSort.sort === constants_1.SortStates.ASC) {
|
|
43
|
-
var newSorting = __spreadArray(__spreadArray([], sorting.filter(function (_a) {
|
|
44
|
-
var fieldId = _a.fieldId;
|
|
45
|
-
return fieldId !== field;
|
|
46
|
-
}), true), [
|
|
47
|
-
{ fieldId: field, sort: constants_1.SortStates.DESC },
|
|
48
|
-
], false);
|
|
49
|
-
return onSort(newSorting);
|
|
50
|
-
// если для выбранного столбца текущая сортировка DESC - убираем сортировку
|
|
51
|
-
}
|
|
52
|
-
else if (currentSort && currentSort.sort === constants_1.SortStates.DESC) {
|
|
53
|
-
var newSorting = sorting.filter(function (_a) {
|
|
54
|
-
var fieldId = _a.fieldId;
|
|
55
|
-
return fieldId !== field;
|
|
56
|
-
});
|
|
57
|
-
return onSort(newSorting);
|
|
58
|
-
}
|
|
59
|
-
// если для выбранного столбца нет сортировки - добавляем сортировку ASC
|
|
60
|
-
onSort(__spreadArray(__spreadArray([], sorting, true), [{ fieldId: field, sort: constants_1.SortStates.ASC }], false));
|
|
59
|
+
return onSort(newSorting);
|
|
61
60
|
}
|
|
61
|
+
// если для выбранного столбца нет сортировки - добавляем сортировку ASC
|
|
62
|
+
onSort(__spreadArray(__spreadArray([], sorting, true), [{ fieldId: field, sort: constants_1.SortStates.ASC }], false));
|
|
62
63
|
}, [sorting, onSort]);
|
|
63
64
|
var renderColumns = (0, react_1.useMemo)(function () {
|
|
64
65
|
return columns.map(function (_a) {
|
|
@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
|
|
|
2
2
|
import { TableCellProps } from '@mui/material';
|
|
3
3
|
import { DataGridRow, DataGridSort } from '../types';
|
|
4
4
|
export declare type DataGridHeadColumnProps<Data = DataGridRow, SortField extends keyof Data = keyof Data> = {
|
|
5
|
-
onSort: (field: SortField
|
|
5
|
+
onSort: (field: SortField) => void;
|
|
6
6
|
sorting: DataGridSort<SortField>[];
|
|
7
7
|
label?: string;
|
|
8
8
|
sortable?: boolean;
|
|
@@ -26,10 +26,10 @@ function DataGridHeadColumn(_a) {
|
|
|
26
26
|
var hideSortIcon = (0, react_1.useMemo)(function () { return !Boolean(sortParams); }, [sortParams]);
|
|
27
27
|
var sortDirection = (0, react_1.useMemo)(function () { return (sortParams ? sortParams.sort : constants_1.SortStates.ASC); }, [sortParams]);
|
|
28
28
|
var handleSortClick = function () {
|
|
29
|
-
if (field) {
|
|
30
|
-
onSort(field
|
|
29
|
+
if (field && sortable) {
|
|
30
|
+
onSort(field);
|
|
31
31
|
}
|
|
32
32
|
};
|
|
33
|
-
return ((0, jsx_runtime_1.jsxs)(styled_1.StyledTableCell, __assign({ onClick: handleSortClick, align: align, width: width }, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, __assign({ variant: "pointer" }, { children: label })), sortable && ((0, jsx_runtime_1.jsx)(styled_1.StyledTableSortLabel, { hideSortIcon: hideSortIcon, direction: sortDirection, active: true }))] })));
|
|
33
|
+
return ((0, jsx_runtime_1.jsxs)(styled_1.StyledTableCell, __assign({ onClick: handleSortClick, align: align, width: width, sortable: sortable }, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, __assign({ variant: "pointer" }, { children: label })), sortable && ((0, jsx_runtime_1.jsx)(styled_1.StyledTableSortLabel, { hideSortIcon: hideSortIcon, direction: sortDirection, active: true }))] })));
|
|
34
34
|
}
|
|
35
35
|
exports.DataGridHeadColumn = DataGridHeadColumn;
|
|
@@ -13,8 +13,17 @@ exports.StyledTableSortLabel = (0, styles_1.styled)(Table_1.TableSortLabel)(temp
|
|
|
13
13
|
});
|
|
14
14
|
exports.StyledTableCell = (0, styles_1.styled)(Table_1.TableCell, {
|
|
15
15
|
shouldForwardProp: function (prop) { return prop !== 'width'; },
|
|
16
|
-
})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: ", ";\n\n cursor:
|
|
16
|
+
})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: ", ";\n padding: ", ";\n\n color: ", ";\n\n cursor: ", ";\n\n user-select: none;\n"], ["\n width: ", ";\n padding: ", ";\n\n color: ", ";\n\n cursor: ", ";\n\n user-select: none;\n"])), function (_a) {
|
|
17
17
|
var _b = _a.width, width = _b === void 0 ? 'auto' : _b;
|
|
18
18
|
return width;
|
|
19
|
+
}, function (_a) {
|
|
20
|
+
var theme = _a.theme;
|
|
21
|
+
return theme.spacing(3, 4);
|
|
22
|
+
}, function (_a) {
|
|
23
|
+
var theme = _a.theme;
|
|
24
|
+
return theme.palette.grey[700];
|
|
25
|
+
}, function (_a) {
|
|
26
|
+
var sortable = _a.sortable;
|
|
27
|
+
return (sortable ? 'pointer' : 'initial');
|
|
19
28
|
});
|
|
20
29
|
var templateObject_1, templateObject_2;
|
|
@@ -1,3 +1,17 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import { PaginationProps } from '../Pagination';
|
|
3
|
+
export declare type DataGridPaginationProps = Omit<PaginationProps, 'count'> & {
|
|
4
|
+
/**
|
|
5
|
+
* Количество всех записей
|
|
6
|
+
*/
|
|
7
|
+
totalCount: number;
|
|
8
|
+
/**
|
|
9
|
+
* Количество записей на страницу
|
|
10
|
+
*/
|
|
11
|
+
rowsPerPage?: number;
|
|
12
|
+
/**
|
|
13
|
+
* Текущая страница
|
|
14
|
+
*/
|
|
15
|
+
page: number;
|
|
16
|
+
};
|
|
3
17
|
export declare const DataGridPagination: ({ page, rowsPerPage, totalCount, className, ...props }: DataGridPaginationProps) => JSX.Element;
|
|
@@ -30,8 +30,8 @@ var styled_1 = require("./styled");
|
|
|
30
30
|
var DataGridPagination = function (_a) {
|
|
31
31
|
var page = _a.page, _b = _a.rowsPerPage, rowsPerPage = _b === void 0 ? 10 : _b, totalCount = _a.totalCount, className = _a.className, props = __rest(_a, ["page", "rowsPerPage", "totalCount", "className"]);
|
|
32
32
|
var count = Math.ceil(totalCount / rowsPerPage);
|
|
33
|
-
var rangeStart = (0, react_1.useMemo)(function () { return page * rowsPerPage; }, [page]);
|
|
34
|
-
var rangeEnd = (0, react_1.useMemo)(function () { return page * rowsPerPage + rowsPerPage; }, [page]);
|
|
33
|
+
var rangeStart = (0, react_1.useMemo)(function () { return (page - 1) * rowsPerPage + 1; }, [page, rowsPerPage]);
|
|
34
|
+
var rangeEnd = (0, react_1.useMemo)(function () { return (page - 1) * rowsPerPage + rowsPerPage; }, [page, rowsPerPage]);
|
|
35
35
|
var formattedRange = "".concat(rangeStart, " \u2014 ").concat(rangeEnd, " \u0438\u0437 ").concat(totalCount, " \u0437\u0430\u043F\u0438\u0441\u0435\u0439");
|
|
36
36
|
return ((0, jsx_runtime_1.jsxs)(styled_1.PaginationWrapper, __assign({ className: className }, { children: [(0, jsx_runtime_1.jsx)(styled_1.Range, __assign({ variant: "h6" }, { children: formattedRange })), (0, jsx_runtime_1.jsx)(Pagination_1.Pagination, __assign({ count: count }, props))] })));
|
|
37
37
|
};
|
|
@@ -17,7 +17,9 @@ var react_toastify_1 = require("react-toastify");
|
|
|
17
17
|
var inject_style_1 = require("react-toastify/dist/inject-style");
|
|
18
18
|
var constants_1 = require("../constants");
|
|
19
19
|
var styled_1 = require("./styled");
|
|
20
|
-
(
|
|
20
|
+
if (typeof window !== 'undefined') {
|
|
21
|
+
(0, inject_style_1.injectStyle)();
|
|
22
|
+
}
|
|
21
23
|
var NotificationContainer = function (props) {
|
|
22
24
|
return ((0, jsx_runtime_1.jsx)(styled_1.ToastContainerStyled, { children: (0, jsx_runtime_1.jsx)(react_toastify_1.ToastContainer, __assign({ hideProgressBar: true, pauseOnFocusLoss: true, position: constants_1.NOTIFY_POSITIONS.BOTTOM_RIGHT, newestOnTop: false, closeOnClick: false, draggable: false, rtl: false }, props, { closeButton: false, bodyClassName: "notify__body", toastClassName: "notify", progressClassName: "notify__progress", className: "notify__container" })) }));
|
|
23
25
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { DataGridColumns, DataGridRow, DataGridSort } from './types';
|
|
3
|
-
export declare type DataGridProps<Data = DataGridRow, SortField extends keyof Data = keyof Data> = {
|
|
3
|
+
export declare type DataGridProps<Data extends object = DataGridRow, SortField extends keyof Data = keyof Data> = {
|
|
4
4
|
/**
|
|
5
5
|
* @example <DataGrid rows={[{name: 'test'}]} />
|
|
6
6
|
* Массив данных для таблицы
|
|
@@ -41,7 +41,7 @@ export declare type DataGridProps<Data = DataGridRow, SortField extends keyof Da
|
|
|
41
41
|
* @example <DataGrid onSort={({fieldId: 'test', sort: 'asc'}) => console.log('sorted')} />
|
|
42
42
|
* Обработчик сортировки
|
|
43
43
|
*/
|
|
44
|
-
onSort
|
|
44
|
+
onSort?: (sorting: DataGridSort<SortField>[]) => void;
|
|
45
45
|
/**
|
|
46
46
|
* @example <DataGrid Footer={<DataGridPagination />} />
|
|
47
47
|
* Компонент кастомного футера (н-р Pagination)
|
|
@@ -70,4 +70,4 @@ export declare type DataGridProps<Data = DataGridRow, SortField extends keyof Da
|
|
|
70
70
|
*/
|
|
71
71
|
minDisplayRows?: number;
|
|
72
72
|
};
|
|
73
|
-
export declare function DataGrid<Data extends object, SortField extends keyof Data>({ columns, rows, selectedRows, sorting, maxHeight, minDisplayRows, onRowClick, onSelectRow, Footer, loading, onSort, keyId, emptyCellValue, }: DataGridProps<Data, SortField>): JSX.Element;
|
|
73
|
+
export declare function DataGrid<Data extends object = DataGridRow, SortField extends keyof Data = keyof Data>({ columns, rows, selectedRows, sorting, maxHeight, minDisplayRows, onRowClick, onSelectRow, Footer, loading, onSort, keyId, emptyCellValue, }: DataGridProps<Data, SortField>): JSX.Element;
|
|
@@ -5,7 +5,7 @@ export declare type DataGridHeadProps<Data = DataGridRow, SortField extends keyo
|
|
|
5
5
|
selectable: boolean;
|
|
6
6
|
onSelectAllRows: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
7
7
|
sorting: DataGridSort<SortField>[];
|
|
8
|
-
onSort
|
|
8
|
+
onSort?: (sorting: DataGridSort<SortField>[]) => void;
|
|
9
9
|
uncheckedRowsCount: number;
|
|
10
10
|
rowsCount: number;
|
|
11
11
|
};
|
|
@@ -29,33 +29,34 @@ export function DataGridHead(_a) {
|
|
|
29
29
|
var columns = _a.columns, selectable = _a.selectable, onSelectAllRows = _a.onSelectAllRows, rowsCount = _a.rowsCount, onSort = _a.onSort, _b = _a.sorting, sorting = _b === void 0 ? [] : _b, uncheckedRowsCount = _a.uncheckedRowsCount;
|
|
30
30
|
var checked = useMemo(function () { return !Boolean(uncheckedRowsCount) && rowsCount > 0; }, [uncheckedRowsCount, rowsCount]);
|
|
31
31
|
var indeterminate = useMemo(function () { return uncheckedRowsCount > 0 && uncheckedRowsCount < rowsCount; }, [uncheckedRowsCount, rowsCount]);
|
|
32
|
-
var handleSort = useCallback(function (field
|
|
33
|
-
if (
|
|
34
|
-
|
|
32
|
+
var handleSort = useCallback(function (field) {
|
|
33
|
+
if (!onSort) {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
var currentSort = sorting.find(function (_a) {
|
|
37
|
+
var fieldId = _a.fieldId;
|
|
38
|
+
return fieldId === field;
|
|
39
|
+
});
|
|
40
|
+
// если для выбранного столбца текущая сортировка ASC - меняем на DESC
|
|
41
|
+
if (currentSort && currentSort.sort === SortStates.ASC) {
|
|
42
|
+
var newSorting = __spreadArray(__spreadArray([], sorting.filter(function (_a) {
|
|
43
|
+
var fieldId = _a.fieldId;
|
|
44
|
+
return fieldId !== field;
|
|
45
|
+
}), true), [
|
|
46
|
+
{ fieldId: field, sort: SortStates.DESC },
|
|
47
|
+
], false);
|
|
48
|
+
return onSort(newSorting);
|
|
49
|
+
// если для выбранного столбца текущая сортировка DESC - убираем сортировку
|
|
50
|
+
}
|
|
51
|
+
else if (currentSort && currentSort.sort === SortStates.DESC) {
|
|
52
|
+
var newSorting = sorting.filter(function (_a) {
|
|
35
53
|
var fieldId = _a.fieldId;
|
|
36
|
-
return fieldId
|
|
54
|
+
return fieldId !== field;
|
|
37
55
|
});
|
|
38
|
-
|
|
39
|
-
if (currentSort && currentSort.sort === SortStates.ASC) {
|
|
40
|
-
var newSorting = __spreadArray(__spreadArray([], sorting.filter(function (_a) {
|
|
41
|
-
var fieldId = _a.fieldId;
|
|
42
|
-
return fieldId !== field;
|
|
43
|
-
}), true), [
|
|
44
|
-
{ fieldId: field, sort: SortStates.DESC },
|
|
45
|
-
], false);
|
|
46
|
-
return onSort(newSorting);
|
|
47
|
-
// если для выбранного столбца текущая сортировка DESC - убираем сортировку
|
|
48
|
-
}
|
|
49
|
-
else if (currentSort && currentSort.sort === SortStates.DESC) {
|
|
50
|
-
var newSorting = sorting.filter(function (_a) {
|
|
51
|
-
var fieldId = _a.fieldId;
|
|
52
|
-
return fieldId !== field;
|
|
53
|
-
});
|
|
54
|
-
return onSort(newSorting);
|
|
55
|
-
}
|
|
56
|
-
// если для выбранного столбца нет сортировки - добавляем сортировку ASC
|
|
57
|
-
onSort(__spreadArray(__spreadArray([], sorting, true), [{ fieldId: field, sort: SortStates.ASC }], false));
|
|
56
|
+
return onSort(newSorting);
|
|
58
57
|
}
|
|
58
|
+
// если для выбранного столбца нет сортировки - добавляем сортировку ASC
|
|
59
|
+
onSort(__spreadArray(__spreadArray([], sorting, true), [{ fieldId: field, sort: SortStates.ASC }], false));
|
|
59
60
|
}, [sorting, onSort]);
|
|
60
61
|
var renderColumns = useMemo(function () {
|
|
61
62
|
return columns.map(function (_a) {
|
|
@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
|
|
|
2
2
|
import { TableCellProps } from '@mui/material';
|
|
3
3
|
import { DataGridRow, DataGridSort } from '../types';
|
|
4
4
|
export declare type DataGridHeadColumnProps<Data = DataGridRow, SortField extends keyof Data = keyof Data> = {
|
|
5
|
-
onSort: (field: SortField
|
|
5
|
+
onSort: (field: SortField) => void;
|
|
6
6
|
sorting: DataGridSort<SortField>[];
|
|
7
7
|
label?: string;
|
|
8
8
|
sortable?: boolean;
|
|
@@ -23,9 +23,9 @@ export function DataGridHeadColumn(_a) {
|
|
|
23
23
|
var hideSortIcon = useMemo(function () { return !Boolean(sortParams); }, [sortParams]);
|
|
24
24
|
var sortDirection = useMemo(function () { return (sortParams ? sortParams.sort : SortStates.ASC); }, [sortParams]);
|
|
25
25
|
var handleSortClick = function () {
|
|
26
|
-
if (field) {
|
|
27
|
-
onSort(field
|
|
26
|
+
if (field && sortable) {
|
|
27
|
+
onSort(field);
|
|
28
28
|
}
|
|
29
29
|
};
|
|
30
|
-
return (_jsxs(StyledTableCell, __assign({ onClick: handleSortClick, align: align, width: width }, { children: [_jsx(Typography, __assign({ variant: "pointer" }, { children: label })), sortable && (_jsx(StyledTableSortLabel, { hideSortIcon: hideSortIcon, direction: sortDirection, active: true }))] })));
|
|
30
|
+
return (_jsxs(StyledTableCell, __assign({ onClick: handleSortClick, align: align, width: width, sortable: sortable }, { children: [_jsx(Typography, __assign({ variant: "pointer" }, { children: label })), sortable && (_jsx(StyledTableSortLabel, { hideSortIcon: hideSortIcon, direction: sortDirection, active: true }))] })));
|
|
31
31
|
}
|
|
@@ -10,8 +10,17 @@ export var StyledTableSortLabel = styled(TableSortLabel)(templateObject_1 || (te
|
|
|
10
10
|
});
|
|
11
11
|
export var StyledTableCell = styled(TableCell, {
|
|
12
12
|
shouldForwardProp: function (prop) { return prop !== 'width'; },
|
|
13
|
-
})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: ", ";\n\n cursor:
|
|
13
|
+
})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: ", ";\n padding: ", ";\n\n color: ", ";\n\n cursor: ", ";\n\n user-select: none;\n"], ["\n width: ", ";\n padding: ", ";\n\n color: ", ";\n\n cursor: ", ";\n\n user-select: none;\n"])), function (_a) {
|
|
14
14
|
var _b = _a.width, width = _b === void 0 ? 'auto' : _b;
|
|
15
15
|
return width;
|
|
16
|
+
}, function (_a) {
|
|
17
|
+
var theme = _a.theme;
|
|
18
|
+
return theme.spacing(3, 4);
|
|
19
|
+
}, function (_a) {
|
|
20
|
+
var theme = _a.theme;
|
|
21
|
+
return theme.palette.grey[700];
|
|
22
|
+
}, function (_a) {
|
|
23
|
+
var sortable = _a.sortable;
|
|
24
|
+
return (sortable ? 'pointer' : 'initial');
|
|
16
25
|
});
|
|
17
26
|
var templateObject_1, templateObject_2;
|
|
@@ -1,3 +1,17 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import { PaginationProps } from '../Pagination';
|
|
3
|
+
export declare type DataGridPaginationProps = Omit<PaginationProps, 'count'> & {
|
|
4
|
+
/**
|
|
5
|
+
* Количество всех записей
|
|
6
|
+
*/
|
|
7
|
+
totalCount: number;
|
|
8
|
+
/**
|
|
9
|
+
* Количество записей на страницу
|
|
10
|
+
*/
|
|
11
|
+
rowsPerPage?: number;
|
|
12
|
+
/**
|
|
13
|
+
* Текущая страница
|
|
14
|
+
*/
|
|
15
|
+
page: number;
|
|
16
|
+
};
|
|
3
17
|
export declare const DataGridPagination: ({ page, rowsPerPage, totalCount, className, ...props }: DataGridPaginationProps) => JSX.Element;
|
|
@@ -27,8 +27,8 @@ import { PaginationWrapper, Range } from './styled';
|
|
|
27
27
|
export var DataGridPagination = function (_a) {
|
|
28
28
|
var page = _a.page, _b = _a.rowsPerPage, rowsPerPage = _b === void 0 ? 10 : _b, totalCount = _a.totalCount, className = _a.className, props = __rest(_a, ["page", "rowsPerPage", "totalCount", "className"]);
|
|
29
29
|
var count = Math.ceil(totalCount / rowsPerPage);
|
|
30
|
-
var rangeStart = useMemo(function () { return page * rowsPerPage; }, [page]);
|
|
31
|
-
var rangeEnd = useMemo(function () { return page * rowsPerPage + rowsPerPage; }, [page]);
|
|
30
|
+
var rangeStart = useMemo(function () { return (page - 1) * rowsPerPage + 1; }, [page, rowsPerPage]);
|
|
31
|
+
var rangeEnd = useMemo(function () { return (page - 1) * rowsPerPage + rowsPerPage; }, [page, rowsPerPage]);
|
|
32
32
|
var formattedRange = "".concat(rangeStart, " \u2014 ").concat(rangeEnd, " \u0438\u0437 ").concat(totalCount, " \u0437\u0430\u043F\u0438\u0441\u0435\u0439");
|
|
33
33
|
return (_jsxs(PaginationWrapper, __assign({ className: className }, { children: [_jsx(Range, __assign({ variant: "h6" }, { children: formattedRange })), _jsx(Pagination, __assign({ count: count }, props))] })));
|
|
34
34
|
};
|
|
@@ -14,7 +14,9 @@ import { ToastContainer } from 'react-toastify';
|
|
|
14
14
|
import { injectStyle } from 'react-toastify/dist/inject-style';
|
|
15
15
|
import { NOTIFY_POSITIONS } from '../constants';
|
|
16
16
|
import { ToastContainerStyled } from './styled';
|
|
17
|
-
|
|
17
|
+
if (typeof window !== 'undefined') {
|
|
18
|
+
injectStyle();
|
|
19
|
+
}
|
|
18
20
|
export var NotificationContainer = function (props) {
|
|
19
21
|
return (_jsx(ToastContainerStyled, { children: _jsx(ToastContainer, __assign({ hideProgressBar: true, pauseOnFocusLoss: true, position: NOTIFY_POSITIONS.BOTTOM_RIGHT, newestOnTop: false, closeOnClick: false, draggable: false, rtl: false }, props, { closeButton: false, bodyClassName: "notify__body", toastClassName: "notify", progressClassName: "notify__progress", className: "notify__container" })) }));
|
|
20
22
|
};
|
package/esm/theme/baseTheme.js
CHANGED
|
@@ -17,5 +17,6 @@ export var createTheme = function (params) {
|
|
|
17
17
|
components: getComponents(fontsUrls),
|
|
18
18
|
};
|
|
19
19
|
var muiTheme = createMuiTheme(merge({}, themeOptions, options));
|
|
20
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
20
21
|
return merge(muiTheme, { elevation: elevation, shape: shape });
|
|
21
22
|
};
|
|
@@ -33,6 +33,7 @@ export var MuiOutlinedInput = {
|
|
|
33
33
|
input: function (_a) {
|
|
34
34
|
var theme = _a.theme;
|
|
35
35
|
return {
|
|
36
|
+
height: 20,
|
|
36
37
|
padding: theme.spacing(2.5, 2),
|
|
37
38
|
borderRadius: theme.shape.small,
|
|
38
39
|
'&:disabled': {
|
|
@@ -47,14 +48,14 @@ export var MuiOutlinedInput = {
|
|
|
47
48
|
inputSizeSmall: function (_a) {
|
|
48
49
|
var theme = _a.theme;
|
|
49
50
|
return {
|
|
50
|
-
paddingBlock: theme.spacing(
|
|
51
|
-
paddingInline: theme.spacing(
|
|
51
|
+
paddingBlock: theme.spacing(1.5),
|
|
52
|
+
paddingInline: theme.spacing(2),
|
|
52
53
|
};
|
|
53
54
|
},
|
|
54
55
|
notchedOutline: function (_a) {
|
|
55
56
|
var theme = _a.theme;
|
|
56
57
|
return {
|
|
57
|
-
borderWidth:
|
|
58
|
+
borderWidth: 2,
|
|
58
59
|
borderColor: theme.palette.grey[300],
|
|
59
60
|
};
|
|
60
61
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astral/ui",
|
|
3
|
-
"version": "0.41.
|
|
3
|
+
"version": "0.41.3",
|
|
4
4
|
"browser": "./src/index.ts",
|
|
5
5
|
"jest": {
|
|
6
6
|
"moduleNameMapper": {
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
}
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@astral/icons": "^0.41.
|
|
11
|
+
"@astral/icons": "^0.41.3",
|
|
12
12
|
"@emotion/cache": "11.7.1",
|
|
13
13
|
"@emotion/react": "11.9.0",
|
|
14
14
|
"@emotion/server": "11.4.0",
|
package/theme/baseTheme.js
CHANGED
|
@@ -20,6 +20,7 @@ var createTheme = function (params) {
|
|
|
20
20
|
components: (0, components_1.getComponents)(fontsUrls),
|
|
21
21
|
};
|
|
22
22
|
var muiTheme = (0, styles_1.createTheme)((0, lodash_es_1.merge)({}, themeOptions, options));
|
|
23
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
23
24
|
return (0, lodash_es_1.merge)(muiTheme, { elevation: elevation_1.elevation, shape: shape_1.shape });
|
|
24
25
|
};
|
|
25
26
|
exports.createTheme = createTheme;
|
|
@@ -36,6 +36,7 @@ exports.MuiOutlinedInput = {
|
|
|
36
36
|
input: function (_a) {
|
|
37
37
|
var theme = _a.theme;
|
|
38
38
|
return {
|
|
39
|
+
height: 20,
|
|
39
40
|
padding: theme.spacing(2.5, 2),
|
|
40
41
|
borderRadius: theme.shape.small,
|
|
41
42
|
'&:disabled': {
|
|
@@ -50,14 +51,14 @@ exports.MuiOutlinedInput = {
|
|
|
50
51
|
inputSizeSmall: function (_a) {
|
|
51
52
|
var theme = _a.theme;
|
|
52
53
|
return {
|
|
53
|
-
paddingBlock: theme.spacing(
|
|
54
|
-
paddingInline: theme.spacing(
|
|
54
|
+
paddingBlock: theme.spacing(1.5),
|
|
55
|
+
paddingInline: theme.spacing(2),
|
|
55
56
|
};
|
|
56
57
|
},
|
|
57
58
|
notchedOutline: function (_a) {
|
|
58
59
|
var theme = _a.theme;
|
|
59
60
|
return {
|
|
60
|
-
borderWidth:
|
|
61
|
+
borderWidth: 2,
|
|
61
62
|
borderColor: theme.palette.grey[300],
|
|
62
63
|
};
|
|
63
64
|
},
|
|
@@ -2,5 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useTheme = void 0;
|
|
4
4
|
var react_1 = require("@emotion/react");
|
|
5
|
+
// any необходим для коннекта темы
|
|
6
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
5
7
|
var useTheme = function () { return (0, react_1.useTheme)(); };
|
|
6
8
|
exports.useTheme = useTheme;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|