@donglegeyu/company-ui 1.2.10 → 1.2.12
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.
- package/dist/cjs/shared-components/EllipsisText/index.d.ts +12 -0
- package/dist/cjs/shared-components/EllipsisText/index.js +72 -0
- package/dist/cjs/shared-components/index.d.ts +2 -0
- package/dist/cjs/shared-components/index.js +3 -0
- package/dist/cjs/template-components/DetailPageTemplate/index.js +59 -34
- package/dist/cjs/template-components/DetailPageTemplate/index.scss +42 -25
- package/dist/cjs/template-components/SmartListTemplate/index.js +1 -1
- package/dist/cjs/types/index.d.ts +1 -0
- package/dist/es/shared-components/EllipsisText/index.d.ts +12 -0
- package/dist/es/shared-components/EllipsisText/index.js +72 -0
- package/dist/es/shared-components/index.d.ts +2 -0
- package/dist/es/shared-components/index.js +2 -1
- package/dist/es/template-components/DetailPageTemplate/index.js +69 -45
- package/dist/es/template-components/DetailPageTemplate/index.scss +42 -25
- package/dist/es/template-components/SmartListTemplate/index.js +1 -1
- package/dist/es/types/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface EllipsisTextProps {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
title?: React.ReactNode;
|
|
5
|
+
maxWidth?: number | string;
|
|
6
|
+
placement?: 'top' | 'bottom' | 'left' | 'right';
|
|
7
|
+
showTooltip?: boolean;
|
|
8
|
+
style?: React.CSSProperties;
|
|
9
|
+
className?: string;
|
|
10
|
+
}
|
|
11
|
+
declare const EllipsisText: React.FC<EllipsisTextProps>;
|
|
12
|
+
export default EllipsisText;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// src/shared-components/EllipsisText/index.tsx
|
|
20
|
+
var EllipsisText_exports = {};
|
|
21
|
+
__export(EllipsisText_exports, {
|
|
22
|
+
default: () => EllipsisText_default
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(EllipsisText_exports);
|
|
25
|
+
var import_react = require("react");
|
|
26
|
+
var import_antd = require("antd");
|
|
27
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
28
|
+
var EllipsisText = ({
|
|
29
|
+
children,
|
|
30
|
+
title,
|
|
31
|
+
maxWidth,
|
|
32
|
+
placement = "top",
|
|
33
|
+
showTooltip = true,
|
|
34
|
+
style,
|
|
35
|
+
className
|
|
36
|
+
}) => {
|
|
37
|
+
const [open, setOpen] = (0, import_react.useState)(false);
|
|
38
|
+
const handleMouseEnter = (e) => {
|
|
39
|
+
if (!showTooltip)
|
|
40
|
+
return;
|
|
41
|
+
const el = e.currentTarget;
|
|
42
|
+
if (el.scrollWidth > el.clientWidth) {
|
|
43
|
+
setOpen(true);
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
const handleMouseLeave = () => {
|
|
47
|
+
setOpen(false);
|
|
48
|
+
};
|
|
49
|
+
const spanStyle = {
|
|
50
|
+
display: "inline-block",
|
|
51
|
+
overflow: "hidden",
|
|
52
|
+
textOverflow: "ellipsis",
|
|
53
|
+
whiteSpace: "nowrap",
|
|
54
|
+
verticalAlign: "bottom",
|
|
55
|
+
...maxWidth !== void 0 ? { maxWidth } : { width: "100%", maxWidth: "100%" },
|
|
56
|
+
...style
|
|
57
|
+
};
|
|
58
|
+
if (!showTooltip) {
|
|
59
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className, style: spanStyle, children });
|
|
60
|
+
}
|
|
61
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: title ?? children, open, placement, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
62
|
+
"span",
|
|
63
|
+
{
|
|
64
|
+
className,
|
|
65
|
+
style: spanStyle,
|
|
66
|
+
onMouseEnter: handleMouseEnter,
|
|
67
|
+
onMouseLeave: handleMouseLeave,
|
|
68
|
+
children
|
|
69
|
+
}
|
|
70
|
+
) });
|
|
71
|
+
};
|
|
72
|
+
var EllipsisText_default = EllipsisText;
|
|
@@ -9,3 +9,5 @@ export { default as BaseInfoForm } from "./BaseInfoForm";
|
|
|
9
9
|
export type { FormField, BaseInfoFormProps, BaseInfoFormRef } from "./BaseInfoForm";
|
|
10
10
|
export { default as ColorScale } from "./ColorScale";
|
|
11
11
|
export { default as AccessibilityChecker } from "./AccessibilityChecker";
|
|
12
|
+
export { default as EllipsisText } from "./EllipsisText";
|
|
13
|
+
export type { EllipsisTextProps } from "./EllipsisText";
|
|
@@ -33,6 +33,7 @@ __export(shared_components_exports, {
|
|
|
33
33
|
ActionCell: () => import_ActionCell.default,
|
|
34
34
|
BaseInfoForm: () => import_BaseInfoForm.default,
|
|
35
35
|
ColorScale: () => import_ColorScale.default,
|
|
36
|
+
EllipsisText: () => import_EllipsisText.default,
|
|
36
37
|
FilterOptionsDrawer: () => import_FilterOptionsDrawer.default,
|
|
37
38
|
FormFooterActions: () => import_FormFooterActions.default,
|
|
38
39
|
PageTitle: () => import_PageTitle.default,
|
|
@@ -49,12 +50,14 @@ var import_SectionTitle = __toESM(require("./SectionTitle"));
|
|
|
49
50
|
var import_BaseInfoForm = __toESM(require("./BaseInfoForm"));
|
|
50
51
|
var import_ColorScale = __toESM(require("./ColorScale"));
|
|
51
52
|
var import_AccessibilityChecker = __toESM(require("./AccessibilityChecker"));
|
|
53
|
+
var import_EllipsisText = __toESM(require("./EllipsisText"));
|
|
52
54
|
// Annotate the CommonJS export names for ESM import in node:
|
|
53
55
|
0 && (module.exports = {
|
|
54
56
|
AccessibilityChecker,
|
|
55
57
|
ActionCell,
|
|
56
58
|
BaseInfoForm,
|
|
57
59
|
ColorScale,
|
|
60
|
+
EllipsisText,
|
|
58
61
|
FilterOptionsDrawer,
|
|
59
62
|
FormFooterActions,
|
|
60
63
|
PageTitle,
|
|
@@ -57,6 +57,8 @@ function DetailPageTemplate({
|
|
|
57
57
|
var _a;
|
|
58
58
|
const [internalActiveTab, setInternalActiveTab] = (0, import_react.useState)(((_a = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _a.key) ?? "");
|
|
59
59
|
const [isScrolling, setIsScrolling] = (0, import_react.useState)(false);
|
|
60
|
+
const [isTabStuck, setIsTabStuck] = (0, import_react.useState)(false);
|
|
61
|
+
const scrollRef = (0, import_react.useRef)(null);
|
|
60
62
|
const scrollTimeoutRef = (0, import_react.useRef)(null);
|
|
61
63
|
const activeTab = controlledActiveTab ?? internalActiveTab;
|
|
62
64
|
const handleTabChange = (0, import_react.useCallback)(
|
|
@@ -83,6 +85,12 @@ function DetailPageTemplate({
|
|
|
83
85
|
} else {
|
|
84
86
|
target.classList.remove("scrolled");
|
|
85
87
|
}
|
|
88
|
+
const nav = target.querySelector(".dpt-container > .ant-tabs > .ant-tabs-nav");
|
|
89
|
+
if (nav) {
|
|
90
|
+
const containerTop = target.getBoundingClientRect().top;
|
|
91
|
+
const navTop = nav.getBoundingClientRect().top;
|
|
92
|
+
setIsTabStuck(navTop - containerTop <= 1);
|
|
93
|
+
}
|
|
86
94
|
}, []);
|
|
87
95
|
const tagVariantClass = {
|
|
88
96
|
default: "dpt-tag-default",
|
|
@@ -92,6 +100,20 @@ function DetailPageTemplate({
|
|
|
92
100
|
};
|
|
93
101
|
const hasHeader = avatar !== void 0 || primaryName !== void 0 || tags && tags.length > 0;
|
|
94
102
|
const hasInfoCard = hasHeader || infoFields && infoFields.length > 0 || infoArea;
|
|
103
|
+
(0, import_react.useEffect)(() => {
|
|
104
|
+
const el = scrollRef.current;
|
|
105
|
+
if (!el)
|
|
106
|
+
return;
|
|
107
|
+
const nav = el.querySelector(".dpt-container > .ant-tabs > .ant-tabs-nav");
|
|
108
|
+
if (!nav)
|
|
109
|
+
return;
|
|
110
|
+
const check = () => {
|
|
111
|
+
const containerTop = el.getBoundingClientRect().top;
|
|
112
|
+
const navTop = nav.getBoundingClientRect().top;
|
|
113
|
+
setIsTabStuck(navTop - containerTop <= 1);
|
|
114
|
+
};
|
|
115
|
+
check();
|
|
116
|
+
}, [hasInfoCard, showDivider, tabs]);
|
|
95
117
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "detail-page-template", children: [
|
|
96
118
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
97
119
|
import_PageTitle.default,
|
|
@@ -103,43 +125,46 @@ function DetailPageTemplate({
|
|
|
103
125
|
actions: titleActions
|
|
104
126
|
}
|
|
105
127
|
),
|
|
106
|
-
|
|
107
|
-
hasHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpt-info-top", children: [
|
|
108
|
-
(avatar !== void 0 || primaryName !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpt-info-identity", children: [
|
|
109
|
-
avatar !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpt-avatar", children: avatar }),
|
|
110
|
-
primaryName !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpt-primary-name", children: primaryName })
|
|
111
|
-
] }),
|
|
112
|
-
tags && tags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpt-info-tags", children: tags.map((tag, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_basic_components.CompanyTag, { className: tagVariantClass[tag.variant ?? "default"], children: tag.text }, index)) })
|
|
113
|
-
] }),
|
|
114
|
-
infoFields && infoFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpt-info-fields", children: infoFields.map((field, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpt-field-item", children: [
|
|
115
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dpt-field-label", children: [
|
|
116
|
-
field.label,
|
|
117
|
-
"："
|
|
118
|
-
] }),
|
|
119
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpt-field-value", children: field.value ?? "--" })
|
|
120
|
-
] }, index)) }),
|
|
121
|
-
infoArea
|
|
122
|
-
] }),
|
|
123
|
-
showDivider && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpt-divider" }),
|
|
124
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpt-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
128
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
125
129
|
"div",
|
|
126
130
|
{
|
|
127
|
-
|
|
131
|
+
ref: scrollRef,
|
|
132
|
+
className: `dpt-scroll${isScrolling ? " scrolling" : ""}`,
|
|
128
133
|
onScroll: handleScroll,
|
|
129
|
-
children:
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
134
|
+
children: [
|
|
135
|
+
hasInfoCard && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpt-info-card", children: [
|
|
136
|
+
hasHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpt-info-top", children: [
|
|
137
|
+
(avatar !== void 0 || primaryName !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpt-info-identity", children: [
|
|
138
|
+
avatar !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpt-avatar", children: avatar }),
|
|
139
|
+
primaryName !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpt-primary-name", children: primaryName })
|
|
140
|
+
] }),
|
|
141
|
+
tags && tags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpt-info-tags", children: tags.map((tag, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_basic_components.CompanyTag, { className: tagVariantClass[tag.variant ?? "default"], children: tag.text }, index)) })
|
|
142
|
+
] }),
|
|
143
|
+
infoFields && infoFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpt-info-fields", children: infoFields.map((field, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpt-field-item", children: [
|
|
144
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dpt-field-label", children: [
|
|
145
|
+
field.label,
|
|
146
|
+
"："
|
|
147
|
+
] }),
|
|
148
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpt-field-value", children: field.value ?? "--" })
|
|
149
|
+
] }, index)) }),
|
|
150
|
+
infoArea
|
|
151
|
+
] }),
|
|
152
|
+
showDivider && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpt-divider" }),
|
|
153
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `dpt-container${isTabStuck ? " tab-stuck" : ""}`, children: tabs && tabs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
154
|
+
import_basic_components.CompanyTabs,
|
|
155
|
+
{
|
|
156
|
+
activeKey: activeTab,
|
|
157
|
+
onChange: handleTabChange,
|
|
158
|
+
items: tabs.map((tab) => ({
|
|
159
|
+
key: tab.key,
|
|
160
|
+
label: tab.label,
|
|
161
|
+
disabled: tab.disabled,
|
|
162
|
+
children: tab.children
|
|
163
|
+
}))
|
|
164
|
+
}
|
|
165
|
+
) : children })
|
|
166
|
+
]
|
|
142
167
|
}
|
|
143
|
-
)
|
|
168
|
+
)
|
|
144
169
|
] });
|
|
145
170
|
}
|
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
.detail-page-template {
|
|
2
|
+
position: absolute;
|
|
3
|
+
inset: 0;
|
|
2
4
|
width: 100%;
|
|
5
|
+
height: 100%;
|
|
6
|
+
min-height: 0;
|
|
3
7
|
display: flex;
|
|
4
8
|
flex-direction: column;
|
|
5
9
|
padding: 0 0.75rem;
|
|
6
|
-
flex-grow: 1;
|
|
7
|
-
align-self: stretch;
|
|
8
10
|
z-index: 1;
|
|
9
11
|
overflow: hidden;
|
|
10
12
|
background: #f5f5f5;
|
|
11
13
|
|
|
12
14
|
.dpt-page-title {
|
|
13
|
-
|
|
14
|
-
top: 0;
|
|
15
|
-
z-index: 20;
|
|
15
|
+
flex-shrink: 0;
|
|
16
16
|
background: var(--ant-color-bg-container);
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
.dpt-info-card {
|
|
20
|
+
box-sizing: border-box;
|
|
20
21
|
display: flex;
|
|
21
22
|
flex-direction: column;
|
|
22
23
|
gap: 16px;
|
|
@@ -59,7 +60,7 @@
|
|
|
59
60
|
.dpt-info-tags {
|
|
60
61
|
display: flex;
|
|
61
62
|
align-items: center;
|
|
62
|
-
gap:
|
|
63
|
+
gap: 8px;
|
|
63
64
|
}
|
|
64
65
|
}
|
|
65
66
|
|
|
@@ -129,32 +130,15 @@
|
|
|
129
130
|
color: #faad14;
|
|
130
131
|
}
|
|
131
132
|
|
|
132
|
-
.dpt-
|
|
133
|
-
height: 12px;
|
|
134
|
-
flex-shrink: 0;
|
|
135
|
-
background: #f5f5f5;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.dpt-container {
|
|
139
|
-
width: 100%;
|
|
133
|
+
.dpt-scroll {
|
|
140
134
|
flex: 1;
|
|
135
|
+
min-height: 0;
|
|
141
136
|
display: flex;
|
|
142
137
|
flex-direction: column;
|
|
143
|
-
flex-grow: 1;
|
|
144
|
-
align-self: stretch;
|
|
145
|
-
z-index: 3;
|
|
146
|
-
border-radius: 6px 6px 0 0;
|
|
147
|
-
background: #ffffff;
|
|
148
|
-
overflow: hidden;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
.dpt-content {
|
|
152
|
-
flex: 1;
|
|
153
138
|
overflow-y: auto;
|
|
154
139
|
overflow-x: hidden;
|
|
155
140
|
scrollbar-width: thin;
|
|
156
141
|
scrollbar-color: transparent transparent;
|
|
157
|
-
padding: 0 16px 16px;
|
|
158
142
|
|
|
159
143
|
&::-webkit-scrollbar {
|
|
160
144
|
width: 6px;
|
|
@@ -176,4 +160,37 @@
|
|
|
176
160
|
background-color: rgba(0, 0, 0, 0.2);
|
|
177
161
|
}
|
|
178
162
|
}
|
|
163
|
+
|
|
164
|
+
.dpt-divider {
|
|
165
|
+
height: 12px;
|
|
166
|
+
flex-shrink: 0;
|
|
167
|
+
background: #f5f5f5;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.dpt-container {
|
|
171
|
+
box-sizing: border-box;
|
|
172
|
+
flex-grow: 1;
|
|
173
|
+
min-width: 0;
|
|
174
|
+
background: #ffffff;
|
|
175
|
+
border-radius: 6px 6px 0 0;
|
|
176
|
+
padding: 0 16px;
|
|
177
|
+
|
|
178
|
+
.ant-tabs-nav {
|
|
179
|
+
position: sticky;
|
|
180
|
+
top: 0;
|
|
181
|
+
z-index: 10;
|
|
182
|
+
margin: 0;
|
|
183
|
+
padding: 0;
|
|
184
|
+
background: #ffffff;
|
|
185
|
+
transition: box-shadow 0.2s ease;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.ant-tabs-content-holder {
|
|
189
|
+
padding-top: 16px;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
&.tab-stuck .ant-tabs-nav {
|
|
193
|
+
box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.12);
|
|
194
|
+
}
|
|
195
|
+
}
|
|
179
196
|
}
|
|
@@ -247,7 +247,7 @@ function SmartListTemplate({
|
|
|
247
247
|
key: field.key,
|
|
248
248
|
width: field.width || 120,
|
|
249
249
|
fixed: field.fixed,
|
|
250
|
-
ellipsis:
|
|
250
|
+
ellipsis: field.ellipsis !== false,
|
|
251
251
|
render: bodyCell ? (_, record) => {
|
|
252
252
|
const result = bodyCell({ ...field, key: field.key }, record);
|
|
253
253
|
return result !== null ? result : record[field.key];
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface EllipsisTextProps {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
title?: React.ReactNode;
|
|
5
|
+
maxWidth?: number | string;
|
|
6
|
+
placement?: 'top' | 'bottom' | 'left' | 'right';
|
|
7
|
+
showTooltip?: boolean;
|
|
8
|
+
style?: React.CSSProperties;
|
|
9
|
+
className?: string;
|
|
10
|
+
}
|
|
11
|
+
declare const EllipsisText: React.FC<EllipsisTextProps>;
|
|
12
|
+
export default EllipsisText;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
8
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
9
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
10
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
11
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
12
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
13
|
+
import React, { useState } from 'react';
|
|
14
|
+
import { Tooltip } from 'antd';
|
|
15
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
16
|
+
var EllipsisText = function EllipsisText(_ref) {
|
|
17
|
+
var children = _ref.children,
|
|
18
|
+
title = _ref.title,
|
|
19
|
+
maxWidth = _ref.maxWidth,
|
|
20
|
+
_ref$placement = _ref.placement,
|
|
21
|
+
placement = _ref$placement === void 0 ? 'top' : _ref$placement,
|
|
22
|
+
_ref$showTooltip = _ref.showTooltip,
|
|
23
|
+
showTooltip = _ref$showTooltip === void 0 ? true : _ref$showTooltip,
|
|
24
|
+
style = _ref.style,
|
|
25
|
+
className = _ref.className;
|
|
26
|
+
var _useState = useState(false),
|
|
27
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
28
|
+
open = _useState2[0],
|
|
29
|
+
setOpen = _useState2[1];
|
|
30
|
+
var handleMouseEnter = function handleMouseEnter(e) {
|
|
31
|
+
if (!showTooltip) return;
|
|
32
|
+
var el = e.currentTarget;
|
|
33
|
+
if (el.scrollWidth > el.clientWidth) {
|
|
34
|
+
setOpen(true);
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
var handleMouseLeave = function handleMouseLeave() {
|
|
38
|
+
setOpen(false);
|
|
39
|
+
};
|
|
40
|
+
var spanStyle = _objectSpread(_objectSpread({
|
|
41
|
+
display: 'inline-block',
|
|
42
|
+
overflow: 'hidden',
|
|
43
|
+
textOverflow: 'ellipsis',
|
|
44
|
+
whiteSpace: 'nowrap',
|
|
45
|
+
verticalAlign: 'bottom'
|
|
46
|
+
}, maxWidth !== undefined ? {
|
|
47
|
+
maxWidth: maxWidth
|
|
48
|
+
} : {
|
|
49
|
+
width: '100%',
|
|
50
|
+
maxWidth: '100%'
|
|
51
|
+
}), style);
|
|
52
|
+
if (!showTooltip) {
|
|
53
|
+
return /*#__PURE__*/_jsx("span", {
|
|
54
|
+
className: className,
|
|
55
|
+
style: spanStyle,
|
|
56
|
+
children: children
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
return /*#__PURE__*/_jsx(Tooltip, {
|
|
60
|
+
title: title !== null && title !== void 0 ? title : children,
|
|
61
|
+
open: open,
|
|
62
|
+
placement: placement,
|
|
63
|
+
children: /*#__PURE__*/_jsx("span", {
|
|
64
|
+
className: className,
|
|
65
|
+
style: spanStyle,
|
|
66
|
+
onMouseEnter: handleMouseEnter,
|
|
67
|
+
onMouseLeave: handleMouseLeave,
|
|
68
|
+
children: children
|
|
69
|
+
})
|
|
70
|
+
});
|
|
71
|
+
};
|
|
72
|
+
export default EllipsisText;
|
|
@@ -9,3 +9,5 @@ export { default as BaseInfoForm } from "./BaseInfoForm";
|
|
|
9
9
|
export type { FormField, BaseInfoFormProps, BaseInfoFormRef } from "./BaseInfoForm";
|
|
10
10
|
export { default as ColorScale } from "./ColorScale";
|
|
11
11
|
export { default as AccessibilityChecker } from "./AccessibilityChecker";
|
|
12
|
+
export { default as EllipsisText } from "./EllipsisText";
|
|
13
|
+
export type { EllipsisTextProps } from "./EllipsisText";
|
|
@@ -6,4 +6,5 @@ export { default as FormFooterActions } from "./FormFooterActions";
|
|
|
6
6
|
export { default as SectionTitle } from "./SectionTitle";
|
|
7
7
|
export { default as BaseInfoForm } from "./BaseInfoForm";
|
|
8
8
|
export { default as ColorScale } from "./ColorScale";
|
|
9
|
-
export { default as AccessibilityChecker } from "./AccessibilityChecker";
|
|
9
|
+
export { default as AccessibilityChecker } from "./AccessibilityChecker";
|
|
10
|
+
export { default as EllipsisText } from "./EllipsisText";
|
|
@@ -4,7 +4,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
4
4
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
5
5
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
-
import { useState, useRef, useCallback } from 'react';
|
|
7
|
+
import { useState, useRef, useCallback, useEffect } from 'react';
|
|
8
8
|
import { CompanyTag, CompanyTabs } from "../../basic-components";
|
|
9
9
|
import PageTitle from "../../shared-components/PageTitle";
|
|
10
10
|
import "./index.scss";
|
|
@@ -38,6 +38,11 @@ export default function DetailPageTemplate(_ref) {
|
|
|
38
38
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
39
39
|
isScrolling = _useState4[0],
|
|
40
40
|
setIsScrolling = _useState4[1];
|
|
41
|
+
var _useState5 = useState(false),
|
|
42
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
43
|
+
isTabStuck = _useState6[0],
|
|
44
|
+
setIsTabStuck = _useState6[1];
|
|
45
|
+
var scrollRef = useRef(null);
|
|
41
46
|
var scrollTimeoutRef = useRef(null);
|
|
42
47
|
var activeTab = controlledActiveTab !== null && controlledActiveTab !== void 0 ? controlledActiveTab : internalActiveTab;
|
|
43
48
|
var handleTabChange = useCallback(function (key) {
|
|
@@ -61,6 +66,12 @@ export default function DetailPageTemplate(_ref) {
|
|
|
61
66
|
} else {
|
|
62
67
|
target.classList.remove('scrolled');
|
|
63
68
|
}
|
|
69
|
+
var nav = target.querySelector('.dpt-container > .ant-tabs > .ant-tabs-nav');
|
|
70
|
+
if (nav) {
|
|
71
|
+
var containerTop = target.getBoundingClientRect().top;
|
|
72
|
+
var navTop = nav.getBoundingClientRect().top;
|
|
73
|
+
setIsTabStuck(navTop - containerTop <= 1);
|
|
74
|
+
}
|
|
64
75
|
}, []);
|
|
65
76
|
var tagVariantClass = {
|
|
66
77
|
default: 'dpt-tag-default',
|
|
@@ -70,6 +81,18 @@ export default function DetailPageTemplate(_ref) {
|
|
|
70
81
|
};
|
|
71
82
|
var hasHeader = avatar !== undefined || primaryName !== undefined || tags && tags.length > 0;
|
|
72
83
|
var hasInfoCard = hasHeader || infoFields && infoFields.length > 0 || infoArea;
|
|
84
|
+
useEffect(function () {
|
|
85
|
+
var el = scrollRef.current;
|
|
86
|
+
if (!el) return;
|
|
87
|
+
var nav = el.querySelector('.dpt-container > .ant-tabs > .ant-tabs-nav');
|
|
88
|
+
if (!nav) return;
|
|
89
|
+
var check = function check() {
|
|
90
|
+
var containerTop = el.getBoundingClientRect().top;
|
|
91
|
+
var navTop = nav.getBoundingClientRect().top;
|
|
92
|
+
setIsTabStuck(navTop - containerTop <= 1);
|
|
93
|
+
};
|
|
94
|
+
check();
|
|
95
|
+
}, [hasInfoCard, showDivider, tabs]);
|
|
73
96
|
return /*#__PURE__*/_jsxs("div", {
|
|
74
97
|
className: "detail-page-template",
|
|
75
98
|
children: [/*#__PURE__*/_jsx(PageTitle, {
|
|
@@ -78,52 +101,53 @@ export default function DetailPageTemplate(_ref) {
|
|
|
78
101
|
onBack: onBack,
|
|
79
102
|
className: "dpt-page-title",
|
|
80
103
|
actions: titleActions
|
|
81
|
-
}),
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
104
|
+
}), /*#__PURE__*/_jsxs("div", {
|
|
105
|
+
ref: scrollRef,
|
|
106
|
+
className: "dpt-scroll".concat(isScrolling ? ' scrolling' : ''),
|
|
107
|
+
onScroll: handleScroll,
|
|
108
|
+
children: [hasInfoCard && /*#__PURE__*/_jsxs("div", {
|
|
109
|
+
className: "dpt-info-card",
|
|
110
|
+
children: [hasHeader && /*#__PURE__*/_jsxs("div", {
|
|
111
|
+
className: "dpt-info-top",
|
|
112
|
+
children: [(avatar !== undefined || primaryName !== undefined) && /*#__PURE__*/_jsxs("div", {
|
|
113
|
+
className: "dpt-info-identity",
|
|
114
|
+
children: [avatar !== undefined && /*#__PURE__*/_jsx("div", {
|
|
115
|
+
className: "dpt-avatar",
|
|
116
|
+
children: avatar
|
|
117
|
+
}), primaryName !== undefined && /*#__PURE__*/_jsx("span", {
|
|
118
|
+
className: "dpt-primary-name",
|
|
119
|
+
children: primaryName
|
|
120
|
+
})]
|
|
121
|
+
}), tags && tags.length > 0 && /*#__PURE__*/_jsx("div", {
|
|
122
|
+
className: "dpt-info-tags",
|
|
123
|
+
children: tags.map(function (tag, index) {
|
|
124
|
+
var _tag$variant;
|
|
125
|
+
return /*#__PURE__*/_jsx(CompanyTag, {
|
|
126
|
+
className: tagVariantClass[(_tag$variant = tag.variant) !== null && _tag$variant !== void 0 ? _tag$variant : 'default'],
|
|
127
|
+
children: tag.text
|
|
128
|
+
}, index);
|
|
129
|
+
})
|
|
93
130
|
})]
|
|
94
|
-
}),
|
|
95
|
-
className: "dpt-info-
|
|
96
|
-
children:
|
|
97
|
-
var
|
|
98
|
-
return /*#__PURE__*/
|
|
99
|
-
className:
|
|
100
|
-
children:
|
|
131
|
+
}), infoFields && infoFields.length > 0 && /*#__PURE__*/_jsx("div", {
|
|
132
|
+
className: "dpt-info-fields",
|
|
133
|
+
children: infoFields.map(function (field, index) {
|
|
134
|
+
var _field$value;
|
|
135
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
136
|
+
className: "dpt-field-item",
|
|
137
|
+
children: [/*#__PURE__*/_jsxs("span", {
|
|
138
|
+
className: "dpt-field-label",
|
|
139
|
+
children: [field.label, "\uFF1A"]
|
|
140
|
+
}), /*#__PURE__*/_jsx("span", {
|
|
141
|
+
className: "dpt-field-value",
|
|
142
|
+
children: (_field$value = field.value) !== null && _field$value !== void 0 ? _field$value : '--'
|
|
143
|
+
})]
|
|
101
144
|
}, index);
|
|
102
145
|
})
|
|
103
|
-
})]
|
|
104
|
-
}),
|
|
105
|
-
className: "dpt-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
return /*#__PURE__*/_jsxs("div", {
|
|
109
|
-
className: "dpt-field-item",
|
|
110
|
-
children: [/*#__PURE__*/_jsxs("span", {
|
|
111
|
-
className: "dpt-field-label",
|
|
112
|
-
children: [field.label, "\uFF1A"]
|
|
113
|
-
}), /*#__PURE__*/_jsx("span", {
|
|
114
|
-
className: "dpt-field-value",
|
|
115
|
-
children: (_field$value = field.value) !== null && _field$value !== void 0 ? _field$value : '--'
|
|
116
|
-
})]
|
|
117
|
-
}, index);
|
|
118
|
-
})
|
|
119
|
-
}), infoArea]
|
|
120
|
-
}), showDivider && /*#__PURE__*/_jsx("div", {
|
|
121
|
-
className: "dpt-divider"
|
|
122
|
-
}), /*#__PURE__*/_jsx("div", {
|
|
123
|
-
className: "dpt-container",
|
|
124
|
-
children: /*#__PURE__*/_jsx("div", {
|
|
125
|
-
className: "dpt-content".concat(isScrolling ? ' scrolling' : ''),
|
|
126
|
-
onScroll: handleScroll,
|
|
146
|
+
}), infoArea]
|
|
147
|
+
}), showDivider && /*#__PURE__*/_jsx("div", {
|
|
148
|
+
className: "dpt-divider"
|
|
149
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
150
|
+
className: "dpt-container".concat(isTabStuck ? ' tab-stuck' : ''),
|
|
127
151
|
children: tabs && tabs.length > 0 ? /*#__PURE__*/_jsx(CompanyTabs, {
|
|
128
152
|
activeKey: activeTab,
|
|
129
153
|
onChange: handleTabChange,
|
|
@@ -136,7 +160,7 @@ export default function DetailPageTemplate(_ref) {
|
|
|
136
160
|
};
|
|
137
161
|
})
|
|
138
162
|
}) : children
|
|
139
|
-
})
|
|
163
|
+
})]
|
|
140
164
|
})]
|
|
141
165
|
});
|
|
142
166
|
}
|
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
.detail-page-template {
|
|
2
|
+
position: absolute;
|
|
3
|
+
inset: 0;
|
|
2
4
|
width: 100%;
|
|
5
|
+
height: 100%;
|
|
6
|
+
min-height: 0;
|
|
3
7
|
display: flex;
|
|
4
8
|
flex-direction: column;
|
|
5
9
|
padding: 0 0.75rem;
|
|
6
|
-
flex-grow: 1;
|
|
7
|
-
align-self: stretch;
|
|
8
10
|
z-index: 1;
|
|
9
11
|
overflow: hidden;
|
|
10
12
|
background: #f5f5f5;
|
|
11
13
|
|
|
12
14
|
.dpt-page-title {
|
|
13
|
-
|
|
14
|
-
top: 0;
|
|
15
|
-
z-index: 20;
|
|
15
|
+
flex-shrink: 0;
|
|
16
16
|
background: var(--ant-color-bg-container);
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
.dpt-info-card {
|
|
20
|
+
box-sizing: border-box;
|
|
20
21
|
display: flex;
|
|
21
22
|
flex-direction: column;
|
|
22
23
|
gap: 16px;
|
|
@@ -59,7 +60,7 @@
|
|
|
59
60
|
.dpt-info-tags {
|
|
60
61
|
display: flex;
|
|
61
62
|
align-items: center;
|
|
62
|
-
gap:
|
|
63
|
+
gap: 8px;
|
|
63
64
|
}
|
|
64
65
|
}
|
|
65
66
|
|
|
@@ -129,32 +130,15 @@
|
|
|
129
130
|
color: #faad14;
|
|
130
131
|
}
|
|
131
132
|
|
|
132
|
-
.dpt-
|
|
133
|
-
height: 12px;
|
|
134
|
-
flex-shrink: 0;
|
|
135
|
-
background: #f5f5f5;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.dpt-container {
|
|
139
|
-
width: 100%;
|
|
133
|
+
.dpt-scroll {
|
|
140
134
|
flex: 1;
|
|
135
|
+
min-height: 0;
|
|
141
136
|
display: flex;
|
|
142
137
|
flex-direction: column;
|
|
143
|
-
flex-grow: 1;
|
|
144
|
-
align-self: stretch;
|
|
145
|
-
z-index: 3;
|
|
146
|
-
border-radius: 6px 6px 0 0;
|
|
147
|
-
background: #ffffff;
|
|
148
|
-
overflow: hidden;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
.dpt-content {
|
|
152
|
-
flex: 1;
|
|
153
138
|
overflow-y: auto;
|
|
154
139
|
overflow-x: hidden;
|
|
155
140
|
scrollbar-width: thin;
|
|
156
141
|
scrollbar-color: transparent transparent;
|
|
157
|
-
padding: 0 16px 16px;
|
|
158
142
|
|
|
159
143
|
&::-webkit-scrollbar {
|
|
160
144
|
width: 6px;
|
|
@@ -176,4 +160,37 @@
|
|
|
176
160
|
background-color: rgba(0, 0, 0, 0.2);
|
|
177
161
|
}
|
|
178
162
|
}
|
|
163
|
+
|
|
164
|
+
.dpt-divider {
|
|
165
|
+
height: 12px;
|
|
166
|
+
flex-shrink: 0;
|
|
167
|
+
background: #f5f5f5;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.dpt-container {
|
|
171
|
+
box-sizing: border-box;
|
|
172
|
+
flex-grow: 1;
|
|
173
|
+
min-width: 0;
|
|
174
|
+
background: #ffffff;
|
|
175
|
+
border-radius: 6px 6px 0 0;
|
|
176
|
+
padding: 0 16px;
|
|
177
|
+
|
|
178
|
+
.ant-tabs-nav {
|
|
179
|
+
position: sticky;
|
|
180
|
+
top: 0;
|
|
181
|
+
z-index: 10;
|
|
182
|
+
margin: 0;
|
|
183
|
+
padding: 0;
|
|
184
|
+
background: #ffffff;
|
|
185
|
+
transition: box-shadow 0.2s ease;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.ant-tabs-content-holder {
|
|
189
|
+
padding-top: 16px;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
&.tab-stuck .ant-tabs-nav {
|
|
193
|
+
box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.12);
|
|
194
|
+
}
|
|
195
|
+
}
|
|
179
196
|
}
|
|
@@ -333,7 +333,7 @@ export default function SmartListTemplate(_ref) {
|
|
|
333
333
|
key: field.key,
|
|
334
334
|
width: field.width || 120,
|
|
335
335
|
fixed: field.fixed,
|
|
336
|
-
ellipsis:
|
|
336
|
+
ellipsis: field.ellipsis !== false,
|
|
337
337
|
render: bodyCell ? function (_, record) {
|
|
338
338
|
var result = bodyCell(_objectSpread(_objectSpread({}, field), {}, {
|
|
339
339
|
key: field.key
|
package/dist/es/types/index.d.ts
CHANGED