forked from CITKParus/P8-Panels
107 lines
3.1 KiB
JavaScript
107 lines
3.1 KiB
JavaScript
/*
|
|
Парус 8 - Панели мониторинга
|
|
Расширение стилистики Button
|
|
*/
|
|
|
|
//---------------------
|
|
//Подключение библиотек
|
|
//---------------------
|
|
|
|
import { getButtonColorStyles } from "../utils"; //Дополнительные функции стилизации
|
|
import { P8P_COMPONENT_HEIGHT, P8P_COMPONENT_WIDTH } from "../styles/common"; //Стили - общие
|
|
|
|
//---------
|
|
//Константы
|
|
//---------
|
|
|
|
//Размеры кнопок
|
|
const P8P_BUTTON_SIZE = {
|
|
small: {
|
|
fontSize: "13px",
|
|
padding: "4px 22px"
|
|
},
|
|
medium: {
|
|
fontSize: "14px",
|
|
padding: "6px 22px"
|
|
},
|
|
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: {
|
|
fontSize: "12px",
|
|
textTransform: "none",
|
|
...P8P_COMPONENT_WIDTH({ width: "150px" }),
|
|
...P8P_COMPONENT_HEIGHT({ width: "90px" }),
|
|
// width: "150px",
|
|
// height: "90px",
|
|
flexDirection: "column",
|
|
justifyContent: "flex-start",
|
|
color: theme.palette.P8PDesktop.main,
|
|
"&:hover": { backgroundColor: theme.palette.P8PDesktop.hover }
|
|
}
|
|
});
|
|
|
|
//Наименование кастомных кнопок
|
|
export const P8P_BUTTON_VARIANT = {
|
|
PRIMARY: "P8PPrimary",
|
|
SECONDARY: "P8PSecondary",
|
|
OUTLINED: "P8POutlined",
|
|
TEXT: "P8PText",
|
|
DESKTOP_PANEL: "P8PDesktopPanel"
|
|
};
|
|
|
|
//Кастомная стилистика компонента
|
|
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
|
|
}))
|
|
};
|
|
}
|
|
}
|
|
};
|