Web:Components:Added theme changer for CatalogItem.
This commit is contained in:
parent
c5f396e120
commit
3958ef0173
@ -1,7 +1,6 @@
|
||||
export const ThemeType = {
|
||||
Button: "button",
|
||||
MainButton: "mainButton",
|
||||
CatalogItemText: "catalogItemText",
|
||||
CatalogItemImg: "catalogItemImg",
|
||||
CatalogItem: "catalogItem",
|
||||
Badge: "badge",
|
||||
};
|
||||
|
@ -1,9 +1,13 @@
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
import { StyledCatalogItemContainer } from "@appserver/components/catalog-item/styled-catalog-item";
|
||||
import {
|
||||
StyledCatalogItemContainer,
|
||||
StyledCatalogItemImg,
|
||||
StyledCatalogItemText,
|
||||
} from "@appserver/components/catalog-item/styled-catalog-item";
|
||||
|
||||
const getDefaultStyles = ({ currentColorScheme, isActive }) => css`
|
||||
.color-theme-text {
|
||||
${StyledCatalogItemText} {
|
||||
color: ${isActive && currentColorScheme.accentColor};
|
||||
|
||||
&:hover {
|
||||
@ -11,7 +15,7 @@ const getDefaultStyles = ({ currentColorScheme, isActive }) => css`
|
||||
}
|
||||
}
|
||||
|
||||
.color-theme-img {
|
||||
${StyledCatalogItemImg} {
|
||||
svg {
|
||||
path {
|
||||
fill: ${isActive && currentColorScheme.accentColor} !important;
|
||||
|
@ -16,7 +16,7 @@ import {
|
||||
StyledCatalogItemInitialText,
|
||||
StyledCatalogItemHeaderContainer,
|
||||
} from "./styled-catalog-item";
|
||||
|
||||
import { ColorTheme, ThemeType } from "@appserver/common/components/ColorTheme";
|
||||
const getInitial = (text) => text.substring(0, 1).toUpperCase();
|
||||
|
||||
const CatalogItem = (props) => {
|
||||
@ -47,6 +47,7 @@ const CatalogItem = (props) => {
|
||||
};
|
||||
|
||||
const onClickBadgeAction = (e) => {
|
||||
console.log("PRO", onClickBadge);
|
||||
e.stopPropagation();
|
||||
onClickBadge && onClickBadge(id);
|
||||
};
|
||||
@ -70,12 +71,14 @@ const CatalogItem = (props) => {
|
||||
|
||||
const renderItem = () => {
|
||||
return (
|
||||
<StyledCatalogItemContainer
|
||||
<ColorTheme
|
||||
className={className}
|
||||
id={id}
|
||||
style={style}
|
||||
showText={showText}
|
||||
isEndOfBlock={isEndOfBlock}
|
||||
isActive={isActive}
|
||||
type={ThemeType.CatalogItem}
|
||||
>
|
||||
<StyledCatalogItemSibling
|
||||
isActive={isActive}
|
||||
@ -120,7 +123,7 @@ const CatalogItem = (props) => {
|
||||
)}
|
||||
</StyledCatalogItemBadgeWrapper>
|
||||
)}
|
||||
</StyledCatalogItemContainer>
|
||||
</ColorTheme>
|
||||
);
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user