@donglegeyu/company-ui 1.2.11 → 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 +24 -1
- package/dist/cjs/template-components/DetailPageTemplate/index.scss +19 -4
- 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 +26 -2
- package/dist/es/template-components/DetailPageTemplate/index.scss +19 -4
- 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,
|
|
@@ -106,6 +128,7 @@ function DetailPageTemplate({
|
|
|
106
128
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
107
129
|
"div",
|
|
108
130
|
{
|
|
131
|
+
ref: scrollRef,
|
|
109
132
|
className: `dpt-scroll${isScrolling ? " scrolling" : ""}`,
|
|
110
133
|
onScroll: handleScroll,
|
|
111
134
|
children: [
|
|
@@ -127,7 +150,7 @@ function DetailPageTemplate({
|
|
|
127
150
|
infoArea
|
|
128
151
|
] }),
|
|
129
152
|
showDivider && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpt-divider" }),
|
|
130
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className:
|
|
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)(
|
|
131
154
|
import_basic_components.CompanyTabs,
|
|
132
155
|
{
|
|
133
156
|
activeKey: activeTab,
|
|
@@ -1,10 +1,12 @@
|
|
|
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;
|
|
@@ -15,6 +17,7 @@
|
|
|
15
17
|
}
|
|
16
18
|
|
|
17
19
|
.dpt-info-card {
|
|
20
|
+
box-sizing: border-box;
|
|
18
21
|
display: flex;
|
|
19
22
|
flex-direction: column;
|
|
20
23
|
gap: 16px;
|
|
@@ -57,7 +60,7 @@
|
|
|
57
60
|
.dpt-info-tags {
|
|
58
61
|
display: flex;
|
|
59
62
|
align-items: center;
|
|
60
|
-
gap:
|
|
63
|
+
gap: 8px;
|
|
61
64
|
}
|
|
62
65
|
}
|
|
63
66
|
|
|
@@ -129,6 +132,7 @@
|
|
|
129
132
|
|
|
130
133
|
.dpt-scroll {
|
|
131
134
|
flex: 1;
|
|
135
|
+
min-height: 0;
|
|
132
136
|
display: flex;
|
|
133
137
|
flex-direction: column;
|
|
134
138
|
overflow-y: auto;
|
|
@@ -164,8 +168,9 @@
|
|
|
164
168
|
}
|
|
165
169
|
|
|
166
170
|
.dpt-container {
|
|
167
|
-
|
|
171
|
+
box-sizing: border-box;
|
|
168
172
|
flex-grow: 1;
|
|
173
|
+
min-width: 0;
|
|
169
174
|
background: #ffffff;
|
|
170
175
|
border-radius: 6px 6px 0 0;
|
|
171
176
|
padding: 0 16px;
|
|
@@ -175,7 +180,17 @@
|
|
|
175
180
|
top: 0;
|
|
176
181
|
z-index: 10;
|
|
177
182
|
margin: 0;
|
|
183
|
+
padding: 0;
|
|
178
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);
|
|
179
194
|
}
|
|
180
195
|
}
|
|
181
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, {
|
|
@@ -79,6 +102,7 @@ export default function DetailPageTemplate(_ref) {
|
|
|
79
102
|
className: "dpt-page-title",
|
|
80
103
|
actions: titleActions
|
|
81
104
|
}), /*#__PURE__*/_jsxs("div", {
|
|
105
|
+
ref: scrollRef,
|
|
82
106
|
className: "dpt-scroll".concat(isScrolling ? ' scrolling' : ''),
|
|
83
107
|
onScroll: handleScroll,
|
|
84
108
|
children: [hasInfoCard && /*#__PURE__*/_jsxs("div", {
|
|
@@ -123,7 +147,7 @@ export default function DetailPageTemplate(_ref) {
|
|
|
123
147
|
}), showDivider && /*#__PURE__*/_jsx("div", {
|
|
124
148
|
className: "dpt-divider"
|
|
125
149
|
}), /*#__PURE__*/_jsx("div", {
|
|
126
|
-
className: "dpt-container",
|
|
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,
|
|
@@ -1,10 +1,12 @@
|
|
|
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;
|
|
@@ -15,6 +17,7 @@
|
|
|
15
17
|
}
|
|
16
18
|
|
|
17
19
|
.dpt-info-card {
|
|
20
|
+
box-sizing: border-box;
|
|
18
21
|
display: flex;
|
|
19
22
|
flex-direction: column;
|
|
20
23
|
gap: 16px;
|
|
@@ -57,7 +60,7 @@
|
|
|
57
60
|
.dpt-info-tags {
|
|
58
61
|
display: flex;
|
|
59
62
|
align-items: center;
|
|
60
|
-
gap:
|
|
63
|
+
gap: 8px;
|
|
61
64
|
}
|
|
62
65
|
}
|
|
63
66
|
|
|
@@ -129,6 +132,7 @@
|
|
|
129
132
|
|
|
130
133
|
.dpt-scroll {
|
|
131
134
|
flex: 1;
|
|
135
|
+
min-height: 0;
|
|
132
136
|
display: flex;
|
|
133
137
|
flex-direction: column;
|
|
134
138
|
overflow-y: auto;
|
|
@@ -164,8 +168,9 @@
|
|
|
164
168
|
}
|
|
165
169
|
|
|
166
170
|
.dpt-container {
|
|
167
|
-
|
|
171
|
+
box-sizing: border-box;
|
|
168
172
|
flex-grow: 1;
|
|
173
|
+
min-width: 0;
|
|
169
174
|
background: #ffffff;
|
|
170
175
|
border-radius: 6px 6px 0 0;
|
|
171
176
|
padding: 0 16px;
|
|
@@ -175,7 +180,17 @@
|
|
|
175
180
|
top: 0;
|
|
176
181
|
z-index: 10;
|
|
177
182
|
margin: 0;
|
|
183
|
+
padding: 0;
|
|
178
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);
|
|
179
194
|
}
|
|
180
195
|
}
|
|
181
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