@zjlab-fe/data-hub-ui 0.32.1 → 0.32.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { Flex, Tag, Popover } from 'antd';
|
|
3
3
|
import { useRef, useState, useMemo, useEffect } from 'react';
|
|
4
|
-
import { "new-task-card-item" as new_task_card_item, "card-actived" as card_actived, "new-task-card-header" as new_task_card_header, "new-task-card-title" as new_task_card_title, "new-task-card-update-time" as new_task_card_update_time, "new-task-card-update-time-icon" as new_task_card_update_time_icon, "new-task-card-update-time-text" as new_task_card_update_time_text, "new-task-card-tags" as new_task_card_tags, "new-task-card-tags-measure" as new_task_card_tags_measure, "new-task-card-tag-measure-item" as new_task_card_tag_measure_item, "new-task-card-tags-visible" as new_task_card_tags_visible, "new-task-card-tags-ellipsis" as new_task_card_tags_ellipsis, "new-task-card-tags-popover-content" as new_task_card_tags_popover_content, "new-task-card-description" as new_task_card_description } from './index.module.scss.js';
|
|
4
|
+
import { "new-task-card-item" as new_task_card_item, "card-actived" as card_actived, "new-task-card-header" as new_task_card_header, "new-task-card-title" as new_task_card_title, "new-task-card-update-time" as new_task_card_update_time, "new-task-card-update-time-icon" as new_task_card_update_time_icon, "new-task-card-update-time-text" as new_task_card_update_time_text, "new-task-card-tags" as new_task_card_tags, "new-task-card-tags-measure" as new_task_card_tags_measure, "new-task-card-tag-measure-item" as new_task_card_tag_measure_item, "new-task-card-tags-visible" as new_task_card_tags_visible, "new-task-card-tags-ellipsis" as new_task_card_tags_ellipsis, "new-task-card-tags-popover-content" as new_task_card_tags_popover_content, "new-task-card-description" as new_task_card_description, "new-task-card-description-popover-content" as new_task_card_description_popover_content } from './index.module.scss.js';
|
|
5
5
|
import sourceIcon from '../../assets/source.png.js';
|
|
6
6
|
|
|
7
7
|
function CorpusCard({ card, isActive, width, onClick, onCardClick }) {
|
|
8
8
|
const tagContainerRef = useRef(null);
|
|
9
|
+
const descriptionRef = useRef(null);
|
|
9
10
|
const tagMeasureRefs = useRef([]);
|
|
10
11
|
const [visibleTagCount, setVisibleTagCount] = useState(card.labels.length);
|
|
12
|
+
const [isDescriptionOverflow, setIsDescriptionOverflow] = useState(false);
|
|
11
13
|
const labelTypeColorMap = useMemo(() => {
|
|
12
14
|
var _a;
|
|
13
15
|
return (_a = card.labelTypeColorMap) !== null && _a !== void 0 ? _a : [];
|
|
@@ -77,12 +79,32 @@ function CorpusCard({ card, isActive, width, onClick, onCardClick }) {
|
|
|
77
79
|
resizeObserver.disconnect();
|
|
78
80
|
};
|
|
79
81
|
}, [card.labels, width]);
|
|
82
|
+
useEffect(() => {
|
|
83
|
+
const checkDescriptionOverflow = () => {
|
|
84
|
+
const element = descriptionRef.current;
|
|
85
|
+
if (!element) {
|
|
86
|
+
setIsDescriptionOverflow(false);
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
setIsDescriptionOverflow(element.scrollHeight > element.clientHeight);
|
|
90
|
+
};
|
|
91
|
+
checkDescriptionOverflow();
|
|
92
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
93
|
+
checkDescriptionOverflow();
|
|
94
|
+
});
|
|
95
|
+
if (descriptionRef.current) {
|
|
96
|
+
resizeObserver.observe(descriptionRef.current);
|
|
97
|
+
}
|
|
98
|
+
return () => {
|
|
99
|
+
resizeObserver.disconnect();
|
|
100
|
+
};
|
|
101
|
+
}, [card.description, width]);
|
|
80
102
|
const needCollapseTags = visibleTagCount < card.labels.length;
|
|
81
103
|
const visibleTags = needCollapseTags ? card.labels.slice(0, visibleTagCount) : card.labels;
|
|
82
104
|
const hiddenTags = needCollapseTags ? card.labels.slice(visibleTagCount) : [];
|
|
83
105
|
return (jsx("div", { className: `${new_task_card_item} ${isActive ? card_actived : ''}`, style: { width: width || 375 }, onClick: () => handleCardClick(card.id), children: jsxs(Flex, { vertical: true, gap: 16, children: [jsxs("div", { className: new_task_card_header, children: [jsx("div", { className: new_task_card_title, children: card.name }), jsxs("span", { className: new_task_card_update_time, children: [jsx("img", { src: sourceIcon, alt: "update-time-icon", className: new_task_card_update_time_icon }), jsx("span", { className: new_task_card_update_time_text, children: formattedUpdateTime })] })] }), jsxs("div", { className: new_task_card_tags, children: [jsx("div", { className: new_task_card_tags_measure, children: card.labels.map((label, index) => (jsx("span", { ref: (element) => {
|
|
84
106
|
tagMeasureRefs.current[index] = element;
|
|
85
|
-
}, className: new_task_card_tag_measure_item, children: jsx(Tag, { style: getLabelColor(label.type, labelTypeColorMap), bordered: true, children: label.name }) }, `measure-${card.id}-${label.type}-${label.name}`))) }), jsxs("div", { ref: tagContainerRef, className: new_task_card_tags_visible, children: [visibleTags.map((label) => (jsx(Tag, { style: getLabelColor(label.type, labelTypeColorMap), bordered: true, children: label.name }, `${card.id}-${label.type}-${label.name}`))), needCollapseTags ? (jsx(Popover, { trigger: "hover", content: jsx("div", { className: new_task_card_tags_popover_content, children: hiddenTags.map((label) => (jsx(Tag, { style: getLabelColor(label.type, labelTypeColorMap), bordered: true, children: label.name }, `hidden-${card.id}-${label.type}-${label.name}`))) }), children: jsx(Tag, { className: new_task_card_tags_ellipsis, children: "..." }) })) : null] })] }), jsx("div", { className: new_task_card_description, children: card.description })] }) }, card.id));
|
|
107
|
+
}, className: new_task_card_tag_measure_item, children: jsx(Tag, { style: getLabelColor(label.type, labelTypeColorMap), bordered: true, children: label.name }) }, `measure-${card.id}-${label.type}-${label.name}`))) }), jsxs("div", { ref: tagContainerRef, className: new_task_card_tags_visible, children: [visibleTags.map((label) => (jsx(Tag, { style: getLabelColor(label.type, labelTypeColorMap), bordered: true, children: label.name }, `${card.id}-${label.type}-${label.name}`))), needCollapseTags ? (jsx(Popover, { trigger: "hover", content: jsx("div", { className: new_task_card_tags_popover_content, children: hiddenTags.map((label) => (jsx(Tag, { style: getLabelColor(label.type, labelTypeColorMap), bordered: true, children: label.name }, `hidden-${card.id}-${label.type}-${label.name}`))) }), children: jsx(Tag, { className: new_task_card_tags_ellipsis, children: "..." }) })) : null] })] }), jsx(Popover, { trigger: isDescriptionOverflow ? 'hover' : [], content: jsx("div", { className: new_task_card_description_popover_content, children: card.description }), children: jsx("div", { ref: descriptionRef, className: new_task_card_description, children: card.description }) })] }) }, card.id));
|
|
86
108
|
}
|
|
87
109
|
|
|
88
110
|
export { CorpusCard as default };
|
|
@@ -130,6 +130,16 @@ style.textContent = `@charset "UTF-8";
|
|
|
130
130
|
gap: 4px;
|
|
131
131
|
max-width: 260px;
|
|
132
132
|
}
|
|
133
|
+
.index-module__new-task-card-description-popover-content___Qw4N7 {
|
|
134
|
+
max-width: 320px;
|
|
135
|
+
font-family: "AlibabaPuHuiTi-3-55-Regular";
|
|
136
|
+
font-style: normal;
|
|
137
|
+
font-weight: 400;
|
|
138
|
+
font-size: 14px;
|
|
139
|
+
line-height: 20px;
|
|
140
|
+
color: #545b64;
|
|
141
|
+
word-break: break-word;
|
|
142
|
+
}
|
|
133
143
|
.index-module__new-task-card-tags-ellipsis___GVtdA {
|
|
134
144
|
display: flex;
|
|
135
145
|
flex-direction: row;
|
|
@@ -167,7 +177,7 @@ style.textContent = `@charset "UTF-8";
|
|
|
167
177
|
}`;
|
|
168
178
|
document.head.appendChild(style);
|
|
169
179
|
|
|
170
|
-
var new_task_cards_container = "index-module__new-task-cards-container___ydHyH";var new_task_card_item = "index-module__new-task-card-item___4Ij8K";var card_actived = "index-module__card-actived___Ds-rJ";var new_task_card_header = "index-module__new-task-card-header___YNZyQ";var new_task_card_title = "index-module__new-task-card-title___ij3JL";var new_task_card_update_time = "index-module__new-task-card-update-time___-v0WT";var new_task_card_update_time_icon = "index-module__new-task-card-update-time-icon___1BRTB";var new_task_card_update_time_text = "index-module__new-task-card-update-time-text___JDOy0";var new_task_card_description = "index-module__new-task-card-description___a-I9s";var new_task_card_tags = "index-module__new-task-card-tags___kIHzm";var new_task_card_tags_visible = "index-module__new-task-card-tags-visible___r4txK";var new_task_card_tags_measure = "index-module__new-task-card-tags-measure___B-jpV";var new_task_card_tag_measure_item = "index-module__new-task-card-tag-measure-item___yWIae";var new_task_card_tags_popover_content = "index-module__new-task-card-tags-popover-content___rrMoB";var new_task_card_tags_ellipsis = "index-module__new-task-card-tags-ellipsis___GVtdA";var new_task_card_empty_title = "index-module__new-task-card-empty-title___di6z-";var card_detail_btn = "index-module__card-detail-btn___QHpSP";
|
|
171
|
-
var styles = {"new-task-cards-container":"index-module__new-task-cards-container___ydHyH","new-task-card-item":"index-module__new-task-card-item___4Ij8K","card-actived":"index-module__card-actived___Ds-rJ","new-task-card-header":"index-module__new-task-card-header___YNZyQ","new-task-card-title":"index-module__new-task-card-title___ij3JL","new-task-card-update-time":"index-module__new-task-card-update-time___-v0WT","new-task-card-update-time-icon":"index-module__new-task-card-update-time-icon___1BRTB","new-task-card-update-time-text":"index-module__new-task-card-update-time-text___JDOy0","new-task-card-description":"index-module__new-task-card-description___a-I9s","new-task-card-tags":"index-module__new-task-card-tags___kIHzm","new-task-card-tags-visible":"index-module__new-task-card-tags-visible___r4txK","new-task-card-tags-measure":"index-module__new-task-card-tags-measure___B-jpV","new-task-card-tag-measure-item":"index-module__new-task-card-tag-measure-item___yWIae","new-task-card-tags-popover-content":"index-module__new-task-card-tags-popover-content___rrMoB","new-task-card-tags-ellipsis":"index-module__new-task-card-tags-ellipsis___GVtdA","new-task-card-empty-title":"index-module__new-task-card-empty-title___di6z-","card-detail-btn":"index-module__card-detail-btn___QHpSP"};
|
|
180
|
+
var new_task_cards_container = "index-module__new-task-cards-container___ydHyH";var new_task_card_item = "index-module__new-task-card-item___4Ij8K";var card_actived = "index-module__card-actived___Ds-rJ";var new_task_card_header = "index-module__new-task-card-header___YNZyQ";var new_task_card_title = "index-module__new-task-card-title___ij3JL";var new_task_card_update_time = "index-module__new-task-card-update-time___-v0WT";var new_task_card_update_time_icon = "index-module__new-task-card-update-time-icon___1BRTB";var new_task_card_update_time_text = "index-module__new-task-card-update-time-text___JDOy0";var new_task_card_description = "index-module__new-task-card-description___a-I9s";var new_task_card_tags = "index-module__new-task-card-tags___kIHzm";var new_task_card_tags_visible = "index-module__new-task-card-tags-visible___r4txK";var new_task_card_tags_measure = "index-module__new-task-card-tags-measure___B-jpV";var new_task_card_tag_measure_item = "index-module__new-task-card-tag-measure-item___yWIae";var new_task_card_tags_popover_content = "index-module__new-task-card-tags-popover-content___rrMoB";var new_task_card_description_popover_content = "index-module__new-task-card-description-popover-content___Qw4N7";var new_task_card_tags_ellipsis = "index-module__new-task-card-tags-ellipsis___GVtdA";var new_task_card_empty_title = "index-module__new-task-card-empty-title___di6z-";var card_detail_btn = "index-module__card-detail-btn___QHpSP";
|
|
181
|
+
var styles = {"new-task-cards-container":"index-module__new-task-cards-container___ydHyH","new-task-card-item":"index-module__new-task-card-item___4Ij8K","card-actived":"index-module__card-actived___Ds-rJ","new-task-card-header":"index-module__new-task-card-header___YNZyQ","new-task-card-title":"index-module__new-task-card-title___ij3JL","new-task-card-update-time":"index-module__new-task-card-update-time___-v0WT","new-task-card-update-time-icon":"index-module__new-task-card-update-time-icon___1BRTB","new-task-card-update-time-text":"index-module__new-task-card-update-time-text___JDOy0","new-task-card-description":"index-module__new-task-card-description___a-I9s","new-task-card-tags":"index-module__new-task-card-tags___kIHzm","new-task-card-tags-visible":"index-module__new-task-card-tags-visible___r4txK","new-task-card-tags-measure":"index-module__new-task-card-tags-measure___B-jpV","new-task-card-tag-measure-item":"index-module__new-task-card-tag-measure-item___yWIae","new-task-card-tags-popover-content":"index-module__new-task-card-tags-popover-content___rrMoB","new-task-card-description-popover-content":"index-module__new-task-card-description-popover-content___Qw4N7","new-task-card-tags-ellipsis":"index-module__new-task-card-tags-ellipsis___GVtdA","new-task-card-empty-title":"index-module__new-task-card-empty-title___di6z-","card-detail-btn":"index-module__card-detail-btn___QHpSP"};
|
|
172
182
|
|
|
173
|
-
export { card_actived as "card-actived", card_detail_btn as "card-detail-btn", styles as default, new_task_card_description as "new-task-card-description", new_task_card_empty_title as "new-task-card-empty-title", new_task_card_header as "new-task-card-header", new_task_card_item as "new-task-card-item", new_task_card_tag_measure_item as "new-task-card-tag-measure-item", new_task_card_tags as "new-task-card-tags", new_task_card_tags_ellipsis as "new-task-card-tags-ellipsis", new_task_card_tags_measure as "new-task-card-tags-measure", new_task_card_tags_popover_content as "new-task-card-tags-popover-content", new_task_card_tags_visible as "new-task-card-tags-visible", new_task_card_title as "new-task-card-title", new_task_card_update_time as "new-task-card-update-time", new_task_card_update_time_icon as "new-task-card-update-time-icon", new_task_card_update_time_text as "new-task-card-update-time-text", new_task_cards_container as "new-task-cards-container" };
|
|
183
|
+
export { card_actived as "card-actived", card_detail_btn as "card-detail-btn", styles as default, new_task_card_description as "new-task-card-description", new_task_card_description_popover_content as "new-task-card-description-popover-content", new_task_card_empty_title as "new-task-card-empty-title", new_task_card_header as "new-task-card-header", new_task_card_item as "new-task-card-item", new_task_card_tag_measure_item as "new-task-card-tag-measure-item", new_task_card_tags as "new-task-card-tags", new_task_card_tags_ellipsis as "new-task-card-tags-ellipsis", new_task_card_tags_measure as "new-task-card-tags-measure", new_task_card_tags_popover_content as "new-task-card-tags-popover-content", new_task_card_tags_visible as "new-task-card-tags-visible", new_task_card_title as "new-task-card-title", new_task_card_update_time as "new-task-card-update-time", new_task_card_update_time_icon as "new-task-card-update-time-icon", new_task_card_update_time_text as "new-task-card-update-time-text", new_task_cards_container as "new-task-cards-container" };
|