forked from CITKParus/P8-Panels
126 lines
3.7 KiB
JavaScript
126 lines
3.7 KiB
JavaScript
/*
|
|
Парус 8 - Панели мониторинга
|
|
Расширение стилистики Button
|
|
*/
|
|
|
|
//---------------------
|
|
//Подключение библиотек
|
|
//---------------------
|
|
|
|
import { P8P_COMPONENT_SIZE } from "../constants"; //Общие константы стилей
|
|
import { getButtonColorStyles } from "../utils"; //Дополнительные функции стилизации
|
|
|
|
//---------
|
|
//Константы
|
|
//---------
|
|
|
|
//Отступы кнопки заголовка
|
|
const P8P_BUTTON_HDR_SIZE = {
|
|
[P8P_COMPONENT_SIZE.SMALL]: "0px 8px",
|
|
[P8P_COMPONENT_SIZE.MEDIUM]: "0px 16px",
|
|
[P8P_COMPONENT_SIZE.LARGE]: "0px 24px"
|
|
};
|
|
|
|
//Размеры кнопок
|
|
const P8P_BUTTON_SIZE = {
|
|
[P8P_COMPONENT_SIZE.SMALL]: {
|
|
fontSize: "13px",
|
|
padding: "4px 22px"
|
|
},
|
|
[P8P_COMPONENT_SIZE.MEDIUM]: {
|
|
fontSize: "14px",
|
|
padding: "6px 22px"
|
|
},
|
|
[P8P_COMPONENT_SIZE.LARGE]: {
|
|
fontSize: "15px",
|
|
padding: "8px 22px"
|
|
},
|
|
default: {
|
|
fontSize: "15px",
|
|
padding: "6px 22px"
|
|
}
|
|
};
|
|
|
|
//Общие стили
|
|
const defaultStyles = (theme, size) => ({
|
|
borderRadius: "4px",
|
|
...theme.typography.P8PButton,
|
|
...(size ? P8P_BUTTON_SIZE[size] : P8P_BUTTON_SIZE.default)
|
|
});
|
|
|
|
//----------------
|
|
//Интерфейс модуля
|
|
//----------------
|
|
|
|
//Кастомные кнопки
|
|
export const P8P_BUTTONS = ({ theme, color, size }) => ({
|
|
P8PPrimary: {
|
|
...defaultStyles(theme, size),
|
|
...getButtonColorStyles(color === "primary" ? "P8PInfo" : color, theme)
|
|
},
|
|
P8PSecondary: {
|
|
...defaultStyles(theme, size),
|
|
...getButtonColorStyles(color === "primary" ? "P8PSecondary" : color, theme)
|
|
},
|
|
P8POutlined: {
|
|
...defaultStyles(theme, size),
|
|
...getButtonColorStyles(color === "primary" ? "P8PSecondary" : color, theme, true)
|
|
},
|
|
P8PText: {
|
|
...theme.typography.P8PSubtitle2,
|
|
...getButtonColorStyles(color === "primary" ? "P8PInfo" : color, theme, true),
|
|
...(size ? P8P_BUTTON_SIZE[size] : P8P_BUTTON_SIZE.default),
|
|
border: "none"
|
|
},
|
|
P8PDesktopPanel: {
|
|
width: "150px",
|
|
height: "90px",
|
|
fontSize: "12px",
|
|
textTransform: "none",
|
|
flexDirection: "column",
|
|
justifyContent: "flex-start",
|
|
color: theme.palette.P8PDesktop.main,
|
|
"&:hover": { backgroundColor: theme.palette.P8PDesktop.hover }
|
|
},
|
|
P8PHeader: {
|
|
height: "100%",
|
|
width: "100%",
|
|
borderRadius: "0px",
|
|
borderColor: theme.palette.P8PHeader.border,
|
|
boxShadow: "none",
|
|
textTransform: "none",
|
|
color: theme.palette.P8PHeader.link,
|
|
backgroundColor: "transparent",
|
|
padding: P8P_BUTTON_HDR_SIZE[size] || P8P_BUTTON_HDR_SIZE[P8P_COMPONENT_SIZE.LARGE],
|
|
overflow: "hidden",
|
|
"&:hover": { backgroundColor: "inherit", opacity: "0.8" }
|
|
}
|
|
});
|
|
|
|
//Наименование кастомных кнопок
|
|
export const P8P_BUTTON_VARIANT = {
|
|
PRIMARY: "P8PPrimary",
|
|
SECONDARY: "P8PSecondary",
|
|
OUTLINED: "P8POutlined",
|
|
TEXT: "P8PText",
|
|
DESKTOP_PANEL: "P8PDesktopPanel",
|
|
HEADER: "P8PHeader"
|
|
};
|
|
|
|
//Кастомная стилистика компонента
|
|
export const P8P_BUTTON_OVERRIDES = {
|
|
styleOverrides: {
|
|
root: ({ ownerState, theme }) => {
|
|
//Определяем цвет
|
|
const { color, size } = ownerState;
|
|
//Возвращаем варианты
|
|
return {
|
|
variants: Object.entries(P8P_BUTTONS({ theme, color, size })).map(([name, styles]) => ({
|
|
props: { variant: name },
|
|
style: styles
|
|
}))
|
|
};
|
|
}
|
|
}
|
|
};
|