2021-09-23 08:08:08 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
|
|
|
|
|
|
|
import { ReactSVG } from "react-svg";
|
|
|
|
|
2022-06-22 13:04:58 +00:00
|
|
|
import Text from "../text";
|
|
|
|
|
|
|
|
import Badge from "../badge";
|
2021-09-23 08:08:08 +00:00
|
|
|
|
|
|
|
import {
|
|
|
|
StyledCatalogItemContainer,
|
|
|
|
StyledCatalogItemImg,
|
|
|
|
StyledCatalogItemSibling,
|
|
|
|
StyledCatalogItemBadgeWrapper,
|
|
|
|
StyledCatalogItemText,
|
|
|
|
StyledCatalogItemInitialText,
|
2022-06-22 13:04:58 +00:00
|
|
|
StyledCatalogItemHeaderContainer,
|
2021-09-23 08:08:08 +00:00
|
|
|
} from "./styled-catalog-item";
|
2022-08-12 15:07:44 +00:00
|
|
|
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
|
2021-09-30 13:17:10 +00:00
|
|
|
const getInitial = (text) => text.substring(0, 1).toUpperCase();
|
2021-09-23 08:08:08 +00:00
|
|
|
|
|
|
|
const CatalogItem = (props) => {
|
|
|
|
const {
|
|
|
|
className,
|
|
|
|
id,
|
|
|
|
style,
|
|
|
|
icon,
|
|
|
|
text,
|
|
|
|
showText,
|
|
|
|
onClick,
|
2022-02-07 08:07:26 +00:00
|
|
|
onDrop,
|
2021-09-23 08:08:08 +00:00
|
|
|
isEndOfBlock,
|
2021-09-27 12:59:37 +00:00
|
|
|
isActive,
|
2022-02-07 08:07:26 +00:00
|
|
|
isDragging,
|
2022-05-26 08:49:46 +00:00
|
|
|
isDragActive,
|
2021-09-23 08:08:08 +00:00
|
|
|
showInitial,
|
|
|
|
showBadge,
|
|
|
|
labelBadge,
|
|
|
|
iconBadge,
|
|
|
|
onClickBadge,
|
2022-06-22 13:04:58 +00:00
|
|
|
isHeader,
|
|
|
|
isFirstHeader,
|
2022-11-15 07:57:25 +00:00
|
|
|
folderId,
|
2021-09-23 08:08:08 +00:00
|
|
|
} = props;
|
|
|
|
|
2021-09-27 12:59:37 +00:00
|
|
|
const onClickAction = () => {
|
2022-07-14 04:11:57 +00:00
|
|
|
onClick && onClick(id);
|
2021-09-23 08:08:08 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const onClickBadgeAction = (e) => {
|
2022-07-25 07:40:03 +00:00
|
|
|
console.log("PRO", onClickBadge);
|
2021-09-27 12:59:37 +00:00
|
|
|
e.stopPropagation();
|
|
|
|
onClickBadge && onClickBadge(id);
|
2021-09-23 08:08:08 +00:00
|
|
|
};
|
|
|
|
|
2022-02-07 08:07:26 +00:00
|
|
|
const onMouseUpAction = () => {
|
|
|
|
onDrop && isDragging && onDrop(id, text);
|
|
|
|
};
|
|
|
|
|
2022-06-22 13:04:58 +00:00
|
|
|
const renderHeaderItem = () => {
|
|
|
|
return (
|
|
|
|
<StyledCatalogItemHeaderContainer
|
|
|
|
showText={showText}
|
|
|
|
isFirstHeader={isFirstHeader}
|
|
|
|
>
|
|
|
|
<Text className="catalog-item__header-text" truncate noSelect>
|
|
|
|
{showText ? text : ""}
|
|
|
|
</Text>
|
|
|
|
</StyledCatalogItemHeaderContainer>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const renderItem = () => {
|
|
|
|
return (
|
2022-07-25 07:40:03 +00:00
|
|
|
<ColorTheme
|
2022-06-22 13:04:58 +00:00
|
|
|
className={className}
|
|
|
|
style={style}
|
|
|
|
showText={showText}
|
|
|
|
isEndOfBlock={isEndOfBlock}
|
2022-07-25 07:40:03 +00:00
|
|
|
isActive={isActive}
|
2022-08-31 12:38:39 +00:00
|
|
|
themeId={ThemeType.CatalogItem}
|
2022-06-22 13:04:58 +00:00
|
|
|
>
|
|
|
|
<StyledCatalogItemSibling
|
2022-11-15 07:57:25 +00:00
|
|
|
id={folderId}
|
2022-06-22 13:04:58 +00:00
|
|
|
isActive={isActive}
|
|
|
|
isDragging={isDragging}
|
|
|
|
isDragActive={isDragActive}
|
|
|
|
onClick={onClickAction}
|
|
|
|
onMouseUp={onMouseUpAction}
|
2022-09-14 11:05:38 +00:00
|
|
|
/>
|
2022-06-22 13:04:58 +00:00
|
|
|
|
2022-08-16 10:53:24 +00:00
|
|
|
<StyledCatalogItemImg isActive={isActive}>
|
2022-06-22 13:04:58 +00:00
|
|
|
<ReactSVG className="icon" src={icon} />
|
|
|
|
{!showText && (
|
|
|
|
<>
|
|
|
|
{showInitial && (
|
|
|
|
<StyledCatalogItemInitialText>
|
|
|
|
{getInitial(text)}
|
|
|
|
</StyledCatalogItemInitialText>
|
|
|
|
)}
|
|
|
|
{showBadge && !iconBadge && (
|
|
|
|
<StyledCatalogItemBadgeWrapper
|
|
|
|
onClick={onClickBadgeAction}
|
|
|
|
showText={showText}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</StyledCatalogItemImg>
|
|
|
|
|
|
|
|
{showText && (
|
2022-08-16 10:53:24 +00:00
|
|
|
<StyledCatalogItemText isActive={isActive} noSelect={true}>
|
|
|
|
{text}
|
|
|
|
</StyledCatalogItemText>
|
2022-06-22 13:04:58 +00:00
|
|
|
)}
|
|
|
|
|
|
|
|
{showBadge && showText && (
|
|
|
|
<StyledCatalogItemBadgeWrapper
|
|
|
|
showText={showText}
|
|
|
|
onClick={onClickBadgeAction}
|
|
|
|
>
|
|
|
|
{!iconBadge ? (
|
|
|
|
<Badge className="catalog-item__badge" label={labelBadge} />
|
|
|
|
) : (
|
2022-09-21 07:35:52 +00:00
|
|
|
<ReactSVG className="catalog-item__icon" src={iconBadge} />
|
2021-09-23 08:08:08 +00:00
|
|
|
)}
|
2022-06-22 13:04:58 +00:00
|
|
|
</StyledCatalogItemBadgeWrapper>
|
2021-09-23 08:08:08 +00:00
|
|
|
)}
|
2022-07-25 07:40:03 +00:00
|
|
|
</ColorTheme>
|
2022-06-22 13:04:58 +00:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
return isHeader ? renderHeaderItem() : renderItem();
|
2021-09-23 08:08:08 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
CatalogItem.propTypes = {
|
|
|
|
/** Accepts className */
|
|
|
|
className: PropTypes.string,
|
|
|
|
/** Accepts id */
|
2021-09-27 12:59:37 +00:00
|
|
|
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
2021-09-23 08:08:08 +00:00
|
|
|
/** Accepts css style */
|
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
|
|
/** Catalog item icon */
|
|
|
|
icon: PropTypes.string,
|
|
|
|
/** Catalog item text */
|
|
|
|
text: PropTypes.string,
|
|
|
|
/** Tells when the catalog item should display text */
|
|
|
|
showText: PropTypes.bool,
|
|
|
|
/** Call function when user clicked on catalog item */
|
|
|
|
onClick: PropTypes.func,
|
2022-02-07 08:07:26 +00:00
|
|
|
/** Call function when user mouse up on catalog item with dragging */
|
|
|
|
onDrop: PropTypes.func,
|
2021-09-23 08:08:08 +00:00
|
|
|
/** Tells when the catalog item should display initial on icon, text should be hidden */
|
|
|
|
showInitial: PropTypes.bool,
|
|
|
|
/** Tells when the catalog item should be end of block */
|
|
|
|
isEndOfBlock: PropTypes.bool,
|
2021-09-27 12:59:37 +00:00
|
|
|
/** Tells when the catalog item should be active */
|
|
|
|
isActive: PropTypes.bool,
|
2022-02-07 08:07:26 +00:00
|
|
|
/** Tells when the catalog item available for drag`n`drop */
|
|
|
|
isDragging: PropTypes.bool,
|
2022-05-26 08:49:46 +00:00
|
|
|
/** Tells when the catalog item active for drag`n`drop */
|
|
|
|
isDragActive: PropTypes.bool,
|
2021-09-23 08:08:08 +00:00
|
|
|
/** Tells when the catalog item should display badge */
|
|
|
|
showBadge: PropTypes.bool,
|
|
|
|
/** Label in catalog item badge */
|
|
|
|
labelBadge: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
|
|
/** Special icon for badge, change default badge */
|
|
|
|
iconBadge: PropTypes.string,
|
|
|
|
/** Call function when user clicked on catalog item badge */
|
|
|
|
onClickBadge: PropTypes.func,
|
2022-06-22 13:04:58 +00:00
|
|
|
/** Call when catalog item show as header */
|
|
|
|
isHeader: PropTypes.bool,
|
|
|
|
/** Disable margin top for catalog item header */
|
|
|
|
isFirstHeader: PropTypes.bool,
|
2022-11-15 07:57:25 +00:00
|
|
|
folderId: PropTypes.string,
|
2021-09-23 08:08:08 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
CatalogItem.defaultProps = {
|
|
|
|
showText: false,
|
|
|
|
showBadge: false,
|
2021-09-27 12:59:37 +00:00
|
|
|
isActive: false,
|
2021-09-23 08:08:08 +00:00
|
|
|
showInitial: false,
|
|
|
|
isEndOfBlock: false,
|
2022-02-07 08:07:26 +00:00
|
|
|
isDragging: false,
|
2022-05-26 08:49:46 +00:00
|
|
|
isDragActive: false,
|
2022-06-22 13:04:58 +00:00
|
|
|
isHeader: false,
|
|
|
|
isFirstHeader: false,
|
2021-09-23 08:08:08 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default React.memo(CatalogItem);
|