IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web:Components:CatalogItem: add header view for catalog item

Browse Source
This commit is contained in:
TimofeyBoyko 2022-06-22 16:04:58 +03:00
parent 40d69ea88f
commit e26dfc48b5
2 changed files with 145 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
packages/asc-web-components/catalog-item/index.js
View File

@ -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);

67
packages/asc-web-components/catalog-item/styled-catalog-item.js
View File

@ -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,
};