Web:Components:CatalogItem: add header view for catalog item
This commit is contained in:
parent
40d69ea88f
commit
e26dfc48b5
@ -3,7 +3,9 @@ import PropTypes from "prop-types";
|
||||
|
||||
import { ReactSVG } from "react-svg";
|
||||
|
||||
import Badge from "../badge/";
|
||||
import Text from "../text";
|
||||
|
||||
import Badge from "../badge";
|
||||
|
||||
import {
|
||||
StyledCatalogItemContainer,
|
||||
@ -12,6 +14,7 @@ import {
|
||||
StyledCatalogItemBadgeWrapper,
|
||||
StyledCatalogItemText,
|
||||
StyledCatalogItemInitialText,
|
||||
StyledCatalogItemHeaderContainer,
|
||||
} from "./styled-catalog-item";
|
||||
|
||||
const getInitial = (text) => text.substring(0, 1).toUpperCase();
|
||||
@ -35,6 +38,8 @@ const CatalogItem = (props) => {
|
||||
labelBadge,
|
||||
iconBadge,
|
||||
onClickBadge,
|
||||
isHeader,
|
||||
isFirstHeader,
|
||||
} = props;
|
||||
|
||||
const onClickAction = () => {
|
||||
@ -50,59 +55,76 @@ const CatalogItem = (props) => {
|
||||
onDrop && isDragging && onDrop(id, text);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledCatalogItemContainer
|
||||
className={className}
|
||||
id={id}
|
||||
style={style}
|
||||
showText={showText}
|
||||
isEndOfBlock={isEndOfBlock}
|
||||
>
|
||||
<StyledCatalogItemSibling
|
||||
isActive={isActive}
|
||||
isDragging={isDragging}
|
||||
isDragActive={isDragActive}
|
||||
onClick={onClickAction}
|
||||
onMouseUp={onMouseUpAction}
|
||||
></StyledCatalogItemSibling>
|
||||
const renderHeaderItem = () => {
|
||||
return (
|
||||
<StyledCatalogItemHeaderContainer
|
||||
showText={showText}
|
||||
isFirstHeader={isFirstHeader}
|
||||
>
|
||||
<Text className="catalog-item__header-text" truncate noSelect>
|
||||
{showText ? text : ""}
|
||||
</Text>
|
||||
</StyledCatalogItemHeaderContainer>
|
||||
);
|
||||
};
|
||||
|
||||
<StyledCatalogItemImg>
|
||||
<ReactSVG className="icon" src={icon} />
|
||||
{!showText && (
|
||||
<>
|
||||
{showInitial && (
|
||||
<StyledCatalogItemInitialText>
|
||||
{getInitial(text)}
|
||||
</StyledCatalogItemInitialText>
|
||||
)}
|
||||
{showBadge && !iconBadge && (
|
||||
<StyledCatalogItemBadgeWrapper
|
||||
onClick={onClickBadgeAction}
|
||||
showText={showText}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</StyledCatalogItemImg>
|
||||
const renderItem = () => {
|
||||
return (
|
||||
<StyledCatalogItemContainer
|
||||
className={className}
|
||||
id={id}
|
||||
style={style}
|
||||
showText={showText}
|
||||
isEndOfBlock={isEndOfBlock}
|
||||
>
|
||||
<StyledCatalogItemSibling
|
||||
isActive={isActive}
|
||||
isDragging={isDragging}
|
||||
isDragActive={isDragActive}
|
||||
onClick={onClickAction}
|
||||
onMouseUp={onMouseUpAction}
|
||||
></StyledCatalogItemSibling>
|
||||
|
||||
{showText && (
|
||||
<StyledCatalogItemText noSelect={true}>{text}</StyledCatalogItemText>
|
||||
)}
|
||||
|
||||
{showBadge && showText && (
|
||||
<StyledCatalogItemBadgeWrapper
|
||||
showText={showText}
|
||||
onClick={onClickBadgeAction}
|
||||
>
|
||||
{!iconBadge ? (
|
||||
<Badge className="catalog-item__badge" label={labelBadge} />
|
||||
) : (
|
||||
<ReactSVG src={iconBadge} />
|
||||
<StyledCatalogItemImg>
|
||||
<ReactSVG className="icon" src={icon} />
|
||||
{!showText && (
|
||||
<>
|
||||
{showInitial && (
|
||||
<StyledCatalogItemInitialText>
|
||||
{getInitial(text)}
|
||||
</StyledCatalogItemInitialText>
|
||||
)}
|
||||
{showBadge && !iconBadge && (
|
||||
<StyledCatalogItemBadgeWrapper
|
||||
onClick={onClickBadgeAction}
|
||||
showText={showText}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</StyledCatalogItemBadgeWrapper>
|
||||
)}
|
||||
</StyledCatalogItemContainer>
|
||||
);
|
||||
</StyledCatalogItemImg>
|
||||
|
||||
{showText && (
|
||||
<StyledCatalogItemText noSelect={true}>{text}</StyledCatalogItemText>
|
||||
)}
|
||||
|
||||
{showBadge && showText && (
|
||||
<StyledCatalogItemBadgeWrapper
|
||||
showText={showText}
|
||||
onClick={onClickBadgeAction}
|
||||
>
|
||||
{!iconBadge ? (
|
||||
<Badge className="catalog-item__badge" label={labelBadge} />
|
||||
) : (
|
||||
<ReactSVG src={iconBadge} />
|
||||
)}
|
||||
</StyledCatalogItemBadgeWrapper>
|
||||
)}
|
||||
</StyledCatalogItemContainer>
|
||||
);
|
||||
};
|
||||
|
||||
return isHeader ? renderHeaderItem() : renderItem();
|
||||
};
|
||||
|
||||
CatalogItem.propTypes = {
|
||||
@ -140,6 +162,10 @@ CatalogItem.propTypes = {
|
||||
iconBadge: PropTypes.string,
|
||||
/** Call function when user clicked on catalog item badge */
|
||||
onClickBadge: PropTypes.func,
|
||||
/** Call when catalog item show as header */
|
||||
isHeader: PropTypes.bool,
|
||||
/** Disable margin top for catalog item header */
|
||||
isFirstHeader: PropTypes.bool,
|
||||
};
|
||||
|
||||
CatalogItem.defaultProps = {
|
||||
@ -150,6 +176,8 @@ CatalogItem.defaultProps = {
|
||||
isEndOfBlock: false,
|
||||
isDragging: false,
|
||||
isDragActive: false,
|
||||
isHeader: false,
|
||||
isFirstHeader: false,
|
||||
};
|
||||
|
||||
export default React.memo(CatalogItem);
|
||||
|
@ -7,7 +7,6 @@ import { isMobile } from "react-device-detect";
|
||||
|
||||
import Text from "@appserver/components/text";
|
||||
|
||||
// width, height
|
||||
const badgeWithoutText = css`
|
||||
position: absolute;
|
||||
|
||||
@ -30,6 +29,71 @@ const badgeWithoutText = css`
|
||||
margin: 0 !important;
|
||||
`;
|
||||
|
||||
const StyledCatalogItemHeaderContainer = styled.div`
|
||||
width: 100%;
|
||||
|
||||
height: 24px;
|
||||
|
||||
padding: 8px 12px 4px;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
margin-top: ${(props) => (props.isFirstHeader ? "0" : "8px")};
|
||||
|
||||
.catalog-item__header-text {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
line-height: 12px;
|
||||
color: #a3a9ae;
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
padding: ${(props) => (props.showText ? "0px 12px 12px" : "4px 12px 19px")};
|
||||
|
||||
margin-top: ${(props) => (props.isFirstHeader ? "0" : "16px")};
|
||||
|
||||
${(props) =>
|
||||
!props.showText &&
|
||||
css`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.catalog-item__header-text {
|
||||
width: 20px;
|
||||
|
||||
line-height: 1px;
|
||||
height: 1px;
|
||||
|
||||
background: #d0d5da;
|
||||
}
|
||||
`}
|
||||
}
|
||||
|
||||
${isMobile &&
|
||||
css`
|
||||
padding: ${(props) => (props.showText ? "0px 12px 12px" : "4px 12px 19px")};
|
||||
|
||||
margin-top: ${(props) => (props.isFirstHeader ? "0" : "16px")};
|
||||
|
||||
${(props) =>
|
||||
!props.showText &&
|
||||
css`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.catalog-item__header-text {
|
||||
width: 20px;
|
||||
|
||||
line-height: 1px;
|
||||
height: 1px;
|
||||
|
||||
background: #d0d5da;
|
||||
}
|
||||
`}
|
||||
`}
|
||||
`;
|
||||
|
||||
const StyledCatalogItemBadgeWrapper = styled.div`
|
||||
z-index: 3;
|
||||
|
||||
@ -322,4 +386,5 @@ export {
|
||||
StyledCatalogItemText,
|
||||
StyledCatalogItemSibling,
|
||||
StyledCatalogItemBadgeWrapper,
|
||||
StyledCatalogItemHeaderContainer,
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user