P8-Panels/app/theme/variants/p8p_table_cell_variants.js

94 lines
2.7 KiB
JavaScript

/*
Парус 8 - Панели мониторинга
Расширение стилистики TableCell
*/
//---------
//Константы
//---------
//Общие стили
const STYLES = {
CELL_WIDTH: width => ({
...(width ? { minWidth: width, maxWidth: width } : {})
}),
CELL_DEF: (fixed, theme, left, isHeader = false) => ({
...(fixed
? {
position: "sticky",
left,
zIndex: isHeader ? 1000 : 500
}
: {})
})
};
//----------------
//Интерфейс модуля
//----------------
//Кастомные ячейки таблицы
export const P8P_TABLE_CELLS = ({ theme, width, fixed, left }) => ({
primary: {},
P8PGroupHeader: {
...theme.typography.P8PBody2,
...STYLES.CELL_WIDTH(width),
...(fixed ? { position: "sticky", left: 0 } : {})
},
P8PHeaderExpand: {
...theme.typography.P8PColumn,
...STYLES.CELL_WIDTH("60px"),
...STYLES.CELL_DEF(fixed, theme, 0, true),
backgroundColor: theme.palette.P8PBackground.tableHeader
},
P8PHeaderCell: {
...theme.typography.P8PColumn,
...STYLES.CELL_WIDTH(width),
...STYLES.CELL_DEF(fixed, theme, left, true),
backgroundColor: theme.palette.P8PBackground.tableHeader
},
P8PExpand: {
...theme.typography.P8PBody2,
...STYLES.CELL_WIDTH("60px"),
...STYLES.CELL_DEF(fixed, theme, 0),
backgroundColor: "inherit"
},
P8PCell: {
...theme.typography.P8PBody2,
...STYLES.CELL_WIDTH(width),
...STYLES.CELL_DEF(fixed, theme, left),
backgroundColor: "inherit"
},
P8PExpandContainer: {
paddingBottom: 0,
paddingTop: 0,
paddingLeft: 0,
paddingRight: 0,
...STYLES.CELL_DEF(fixed, theme, left)
}
});
//Наименование кастомных ячеек таблиц
export const P8P_TABLE_CELL_VARIANT = {
GROUP_HEADER: "P8PGroupHeader",
HEADER_EXPAND: "P8PHeaderExpand",
HEADER_CELL: "P8PHeaderCell",
EXPAND: "P8PExpand",
CELL: "P8PCell",
EXPAND_CONTAINER: "P8PExpandContainer"
};
//Кастомная стилистика компонента
export const P8P_TABLE_CELL_OVERRIDES = {
styleOverrides: {
root: ({ ownerState, theme }) => {
//Определяем вариант
const variant = ownerState?.variant || "primary";
//Определяем доп. параметры
const { width, fixed, left } = ownerState["data-variant-props"] || {};
//Возвращаем стили варианта
return P8P_TABLE_CELLS({ theme, width, fixed, left })[variant];
}
}
};