@pisell/private-materials 6.2.35 → 6.2.37
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/build/lowcode/assets-daily.json +11 -11
- package/build/lowcode/assets-dev.json +2 -2
- package/build/lowcode/assets-prod.json +11 -11
- package/build/lowcode/index.js +1 -1
- package/build/lowcode/meta.js +1 -1
- package/build/lowcode/preview.js +13 -29
- package/build/lowcode/render/default/view.css +1 -1
- package/build/lowcode/render/default/view.js +6 -6
- package/build/lowcode/view.css +1 -1
- package/build/lowcode/view.js +8 -8
- package/es/components/appointmentBooking/components/Content/index.js +1 -1
- package/es/components/appointmentBooking/components/Content/index.less +3 -3
- package/es/components/appointmentBooking/components/Services/index.js +2 -2
- package/es/components/appointmentBooking/index.js +8 -2
- package/es/components/booking/components/voucher/index.js +5 -0
- package/es/components/booking/deposit/ClientItem/index.js +1 -1
- package/es/components/booking/deposit/DepositItem/index.js +1 -1
- package/es/components/booking/forms/single/RenderValueById.d.ts +1 -0
- package/es/components/booking/forms/single/RenderValueById.js +68 -17
- package/es/components/booking/forms/single/index.less +67 -1
- package/es/components/booking/hooks/useQuotation.js +1 -1
- package/es/components/booking/info/clientVariant/utils.d.ts +2 -0
- package/es/components/booking/info/clientVariant/utils.js +7 -0
- package/es/components/booking/info/clientVariant/vertical/index.js +3 -2
- package/es/components/booking/info2/service/addService/utils.js +2 -1
- package/es/components/booking/info2/service/addTimeModal/index.js +0 -1
- package/es/components/booking/info2/service/editService/index.js +37 -29
- package/es/components/booking/info2/utilsByBooking.js +4 -4
- package/es/components/booking/locales.d.ts +3 -0
- package/es/components/booking/locales.js +6 -3
- package/es/components/booking/materiels/duration/index.js +1 -1
- package/es/components/booking/materiels/startTime/index.d.ts +1 -0
- package/es/components/booking/materiels/startTime/index.js +1 -1
- package/es/components/booking/utils.js +3 -3
- package/es/components/eftposPay/amount.d.ts +1 -1
- package/es/components/eftposPay/device.d.ts +1 -1
- package/es/components/eftposPay/store/index.d.ts +3 -3
- package/es/components/eventBooking/index.js +8 -1
- package/es/components/productSelect/components/TabProduct/index.js +7 -2
- package/es/components/schedules/utils.d.ts +1 -1
- package/es/components/shoppingCart/components/Cart/Product.js +2 -1
- package/es/components/ticketBooking/components/addServiceVariant/addService.js +172 -91
- package/es/components/ticketBooking/components/timeBar/index.js +3 -3
- package/es/components/ticketBooking/utils/index.d.ts +3 -1
- package/es/components/ticketBooking/utils/index.js +18 -2
- package/es/hooks/useWindowSize.js +8 -1
- package/es/plus/productSelect/CategoryTabs/CategorySkeleton.d.ts +10 -0
- package/es/plus/productSelect/CategoryTabs/CategorySkeleton.js +29 -0
- package/es/plus/productSelect/CategoryTabs/CategorySkeleton.less +30 -0
- package/es/plus/productSelect/CategoryTabs/index.d.ts +18 -0
- package/es/plus/productSelect/CategoryTabs/index.js +171 -0
- package/es/plus/productSelect/ProductCard/ProductCardSkeleton.d.ts +10 -0
- package/es/plus/productSelect/ProductCard/ProductCardSkeleton.js +37 -0
- package/es/plus/productSelect/ProductCard/ProductCardSkeleton.less +81 -0
- package/es/plus/productSelect/ProductCard/index.d.ts +45 -0
- package/es/plus/productSelect/ProductCard/index.js +170 -0
- package/es/plus/productSelect/ProductCard/index.less +270 -0
- package/es/plus/productSelect/ProductList/gridComponents.d.ts +44 -0
- package/es/plus/productSelect/ProductList/gridComponents.js +149 -0
- package/es/plus/productSelect/ProductList/index.d.ts +22 -0
- package/es/plus/productSelect/ProductList/index.js +72 -0
- package/es/plus/productSelect/ProductList/index.less +0 -0
- package/es/plus/productSelect/components/IntersectionObserver.d.ts +42 -0
- package/es/plus/productSelect/components/IntersectionObserver.js +276 -0
- package/es/plus/productSelect/components/TabsStructure/TabsStructure.d.ts +30 -0
- package/es/plus/productSelect/components/TabsStructure/TabsStructure.js +357 -0
- package/es/plus/productSelect/components/TabsStructure/TabsStructure.less +224 -0
- package/es/plus/productSelect/components/TabsStructure/hooks.d.ts +22 -0
- package/es/plus/productSelect/components/TabsStructure/hooks.js +243 -0
- package/es/plus/productSelect/components/TabsStructure/index.d.ts +5 -0
- package/es/plus/productSelect/components/TabsStructure/index.js +13 -0
- package/es/plus/productSelect/components/TabsStructure/styles.d.ts +47 -0
- package/es/plus/productSelect/components/TabsStructure/styles.js +87 -0
- package/es/plus/productSelect/components/TabsStructure/types.d.ts +105 -0
- package/es/plus/productSelect/components/TabsStructure/types.js +1 -0
- package/es/plus/productSelect/components/TabsStructure/utils.d.ts +12 -0
- package/es/plus/productSelect/components/TabsStructure/utils.js +56 -0
- package/es/plus/productSelect/components/pisellPriceText/index.d.ts +11 -0
- package/es/plus/productSelect/components/pisellPriceText/index.js +43 -0
- package/es/plus/productSelect/hooks/useToken.d.ts +18 -0
- package/es/plus/productSelect/hooks/useToken.js +34 -0
- package/es/plus/productSelect/index.d.ts +31 -0
- package/es/plus/productSelect/index.js +270 -0
- package/es/plus/productSelect/index.less +56 -0
- package/es/plus/productSelect/locales.d.ts +18 -0
- package/es/plus/productSelect/locales.js +17 -0
- package/es/plus/productSelect/theme/token.d.ts +17 -0
- package/es/plus/productSelect/theme/token.js +19 -0
- package/es/plus/productSelect/utils.d.ts +39 -0
- package/es/plus/productSelect/utils.js +162 -0
- package/es/pro/pisellNumberSelector/index.js +3 -3
- package/es/pro/pisellPhoneKeyboard/index.js +1 -1
- package/es/utils/index.d.ts +1 -1
- package/lib/components/appointmentBooking/components/Content/index.js +1 -1
- package/lib/components/appointmentBooking/components/Content/index.less +3 -3
- package/lib/components/appointmentBooking/components/Services/index.js +2 -2
- package/lib/components/appointmentBooking/index.js +6 -1
- package/lib/components/booking/components/voucher/index.js +5 -0
- package/lib/components/booking/deposit/ClientItem/index.js +1 -1
- package/lib/components/booking/deposit/DepositItem/index.js +1 -1
- package/lib/components/booking/forms/single/RenderValueById.d.ts +1 -0
- package/lib/components/booking/forms/single/RenderValueById.js +37 -9
- package/lib/components/booking/forms/single/index.less +67 -1
- package/lib/components/booking/hooks/useQuotation.js +1 -1
- package/lib/components/booking/info/clientVariant/utils.d.ts +2 -0
- package/lib/components/booking/info/clientVariant/utils.js +13 -2
- package/lib/components/booking/info/clientVariant/vertical/index.js +7 -6
- package/lib/components/booking/info2/service/addService/utils.js +3 -3
- package/lib/components/booking/info2/service/addTimeModal/index.js +0 -1
- package/lib/components/booking/info2/service/editService/index.js +22 -12
- package/lib/components/booking/info2/utilsByBooking.js +7 -8
- package/lib/components/booking/locales.d.ts +3 -0
- package/lib/components/booking/locales.js +6 -3
- package/lib/components/booking/materiels/duration/index.js +1 -1
- package/lib/components/booking/materiels/startTime/index.d.ts +1 -0
- package/lib/components/booking/materiels/startTime/index.js +1 -1
- package/lib/components/booking/utils.js +3 -3
- package/lib/components/eftposPay/amount.d.ts +1 -1
- package/lib/components/eftposPay/device.d.ts +1 -1
- package/lib/components/eftposPay/store/index.d.ts +3 -3
- package/lib/components/eventBooking/index.js +6 -1
- package/lib/components/productSelect/components/TabProduct/index.js +7 -1
- package/lib/components/schedules/utils.d.ts +1 -1
- package/lib/components/shoppingCart/components/Cart/Product.js +7 -4
- package/lib/components/ticketBooking/components/addServiceVariant/addService.js +87 -14
- package/lib/components/ticketBooking/components/timeBar/index.js +89 -70
- package/lib/components/ticketBooking/utils/index.d.ts +3 -1
- package/lib/components/ticketBooking/utils/index.js +21 -0
- package/lib/hooks/useWindowSize.js +6 -1
- package/lib/plus/productSelect/CategoryTabs/CategorySkeleton.d.ts +10 -0
- package/lib/plus/productSelect/CategoryTabs/CategorySkeleton.js +62 -0
- package/lib/plus/productSelect/CategoryTabs/CategorySkeleton.less +30 -0
- package/lib/plus/productSelect/CategoryTabs/index.d.ts +18 -0
- package/lib/plus/productSelect/CategoryTabs/index.js +183 -0
- package/lib/plus/productSelect/ProductCard/ProductCardSkeleton.d.ts +10 -0
- package/lib/plus/productSelect/ProductCard/ProductCardSkeleton.js +58 -0
- package/lib/plus/productSelect/ProductCard/ProductCardSkeleton.less +81 -0
- package/lib/plus/productSelect/ProductCard/index.d.ts +45 -0
- package/lib/plus/productSelect/ProductCard/index.js +184 -0
- package/lib/plus/productSelect/ProductCard/index.less +270 -0
- package/lib/plus/productSelect/ProductList/gridComponents.d.ts +44 -0
- package/lib/plus/productSelect/ProductList/gridComponents.js +148 -0
- package/lib/plus/productSelect/ProductList/index.d.ts +22 -0
- package/lib/plus/productSelect/ProductList/index.js +86 -0
- package/lib/plus/productSelect/ProductList/index.less +0 -0
- package/lib/plus/productSelect/components/IntersectionObserver.d.ts +42 -0
- package/lib/plus/productSelect/components/IntersectionObserver.js +269 -0
- package/lib/plus/productSelect/components/TabsStructure/TabsStructure.d.ts +30 -0
- package/lib/plus/productSelect/components/TabsStructure/TabsStructure.js +393 -0
- package/lib/plus/productSelect/components/TabsStructure/TabsStructure.less +224 -0
- package/lib/plus/productSelect/components/TabsStructure/hooks.d.ts +22 -0
- package/lib/plus/productSelect/components/TabsStructure/hooks.js +209 -0
- package/lib/plus/productSelect/components/TabsStructure/index.d.ts +5 -0
- package/lib/plus/productSelect/components/TabsStructure/index.js +92 -0
- package/lib/plus/productSelect/components/TabsStructure/styles.d.ts +47 -0
- package/lib/plus/productSelect/components/TabsStructure/styles.js +122 -0
- package/lib/plus/productSelect/components/TabsStructure/types.d.ts +105 -0
- package/lib/plus/productSelect/components/TabsStructure/types.js +17 -0
- package/lib/plus/productSelect/components/TabsStructure/utils.d.ts +12 -0
- package/lib/plus/productSelect/components/TabsStructure/utils.js +72 -0
- package/lib/plus/productSelect/components/pisellPriceText/index.d.ts +11 -0
- package/lib/plus/productSelect/components/pisellPriceText/index.js +72 -0
- package/lib/plus/productSelect/hooks/useToken.d.ts +18 -0
- package/lib/plus/productSelect/hooks/useToken.js +50 -0
- package/lib/plus/productSelect/index.d.ts +31 -0
- package/lib/plus/productSelect/index.js +299 -0
- package/lib/plus/productSelect/index.less +56 -0
- package/lib/plus/productSelect/locales.d.ts +18 -0
- package/lib/plus/productSelect/locales.js +41 -0
- package/lib/plus/productSelect/theme/token.d.ts +17 -0
- package/lib/plus/productSelect/theme/token.js +47 -0
- package/lib/plus/productSelect/utils.d.ts +39 -0
- package/lib/plus/productSelect/utils.js +138 -0
- package/lib/pro/pisellNumberSelector/index.js +3 -3
- package/lib/pro/pisellPhoneKeyboard/index.js +1 -1
- package/lib/utils/index.d.ts +1 -1
- package/package.json +4 -4
@@ -0,0 +1,276 @@
|
|
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
|
+
var _excluded = ["children", "className", "style"];
|
3
|
+
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; }
|
4
|
+
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; }
|
5
|
+
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; }
|
6
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
7
|
+
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); }
|
8
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
9
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
10
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
11
|
+
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."); }
|
12
|
+
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); }
|
13
|
+
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; }
|
14
|
+
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; } }
|
15
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
16
|
+
import React, { createContext, useContext, useState, useRef, useEffect, useCallback, useMemo } from 'react';
|
17
|
+
var IntersectionObserverContext = /*#__PURE__*/createContext({
|
18
|
+
initialized: false,
|
19
|
+
register: function register() {},
|
20
|
+
unregister: function unregister() {}
|
21
|
+
});
|
22
|
+
var Provider = IntersectionObserverContext.Provider,
|
23
|
+
Consumer = IntersectionObserverContext.Consumer;
|
24
|
+
export var IntersectionObserverProvider = function IntersectionObserverProvider(_ref) {
|
25
|
+
var children = _ref.children,
|
26
|
+
_ref$root = _ref.root,
|
27
|
+
root = _ref$root === void 0 ? null : _ref$root,
|
28
|
+
_ref$rootMargin = _ref.rootMargin,
|
29
|
+
rootMargin = _ref$rootMargin === void 0 ? '0px' : _ref$rootMargin,
|
30
|
+
_ref$threshold = _ref.threshold,
|
31
|
+
threshold = _ref$threshold === void 0 ? 0 : _ref$threshold,
|
32
|
+
priorityMode = _ref.priorityMode;
|
33
|
+
var _useState = useState(false),
|
34
|
+
_useState2 = _slicedToArray(_useState, 2),
|
35
|
+
mounted = _useState2[0],
|
36
|
+
setMounted = _useState2[1];
|
37
|
+
var _useState3 = useState(false),
|
38
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
39
|
+
initialized = _useState4[0],
|
40
|
+
setInitialized = _useState4[1];
|
41
|
+
var observerRef = useRef(null);
|
42
|
+
var callbackMapRef = useRef(new Map());
|
43
|
+
var findCallback = useCallback(function (target) {
|
44
|
+
return callbackMapRef.current.get(target);
|
45
|
+
}, []);
|
46
|
+
|
47
|
+
// 选择优先级元素的函数
|
48
|
+
var selectPriorityEntry = useCallback(function (entries, mode) {
|
49
|
+
if (entries.length === 0) return undefined;
|
50
|
+
if (entries.length === 1) return entries[0];
|
51
|
+
switch (mode) {
|
52
|
+
case 'top':
|
53
|
+
return entries.reduce(function (prev, curr) {
|
54
|
+
return curr.boundingClientRect.top < prev.boundingClientRect.top ? curr : prev;
|
55
|
+
});
|
56
|
+
case 'bottom':
|
57
|
+
return entries.reduce(function (prev, curr) {
|
58
|
+
return curr.boundingClientRect.bottom > prev.boundingClientRect.bottom ? curr : prev;
|
59
|
+
});
|
60
|
+
case 'left':
|
61
|
+
return entries.reduce(function (prev, curr) {
|
62
|
+
return curr.boundingClientRect.left < prev.boundingClientRect.left ? curr : prev;
|
63
|
+
});
|
64
|
+
case 'right':
|
65
|
+
return entries.reduce(function (prev, curr) {
|
66
|
+
return curr.boundingClientRect.right > prev.boundingClientRect.right ? curr : prev;
|
67
|
+
});
|
68
|
+
default:
|
69
|
+
return entries[0];
|
70
|
+
}
|
71
|
+
}, []);
|
72
|
+
|
73
|
+
// 创建 IntersectionObserver 实例
|
74
|
+
var observerOptions = useMemo(function () {
|
75
|
+
return {
|
76
|
+
root: root,
|
77
|
+
rootMargin: rootMargin,
|
78
|
+
threshold: threshold
|
79
|
+
};
|
80
|
+
}, [root, rootMargin, threshold]);
|
81
|
+
var createObserver = useCallback(function () {
|
82
|
+
if (typeof window !== 'undefined' && !window.IntersectionObserver) {
|
83
|
+
console.warn('IntersectionObserver is not supported in this browser');
|
84
|
+
return null;
|
85
|
+
}
|
86
|
+
return new IntersectionObserver(function (entries) {
|
87
|
+
if (entries.length === 0) return;
|
88
|
+
try {
|
89
|
+
// 如果没有设置priorityMode,触发所有元素的回调(包括可见和不可见)
|
90
|
+
if (!priorityMode) {
|
91
|
+
entries.forEach(function (entry) {
|
92
|
+
var callback = findCallback(entry.target);
|
93
|
+
if (callback) {
|
94
|
+
callback(entry);
|
95
|
+
}
|
96
|
+
});
|
97
|
+
return;
|
98
|
+
}
|
99
|
+
|
100
|
+
// 遍历处理所有元素
|
101
|
+
var visibleEntries = [];
|
102
|
+
var invisibleEntries = [];
|
103
|
+
entries.forEach(function (entry) {
|
104
|
+
if (entry.isIntersecting) {
|
105
|
+
visibleEntries.push(entry);
|
106
|
+
} else {
|
107
|
+
invisibleEntries.push(entry);
|
108
|
+
}
|
109
|
+
});
|
110
|
+
|
111
|
+
// 处理不可见元素
|
112
|
+
invisibleEntries.forEach(function (entry) {
|
113
|
+
var callback = findCallback(entry.target);
|
114
|
+
if (callback) {
|
115
|
+
callback(entry);
|
116
|
+
}
|
117
|
+
});
|
118
|
+
|
119
|
+
// 处理可见元素,根据优先级选择一个
|
120
|
+
if (visibleEntries.length > 0) {
|
121
|
+
var selectedEntry = selectPriorityEntry(visibleEntries, priorityMode);
|
122
|
+
if (selectedEntry) {
|
123
|
+
var callback = findCallback(selectedEntry.target);
|
124
|
+
if (callback) {
|
125
|
+
callback(selectedEntry);
|
126
|
+
}
|
127
|
+
}
|
128
|
+
}
|
129
|
+
} catch (error) {
|
130
|
+
console.error('IntersectionObserver callback error:', error);
|
131
|
+
}
|
132
|
+
}, observerOptions);
|
133
|
+
}, [observerOptions, priorityMode, findCallback, selectPriorityEntry]);
|
134
|
+
|
135
|
+
// 注册元素到观察器
|
136
|
+
var register = useCallback(function (_ref2) {
|
137
|
+
var ref = _ref2.ref,
|
138
|
+
callback = _ref2.callback;
|
139
|
+
if (ref !== null && ref !== void 0 && ref.current && observerRef !== null && observerRef !== void 0 && observerRef.current) {
|
140
|
+
var element = ref.current;
|
141
|
+
|
142
|
+
// 检查是否已经注册,避免重复注册
|
143
|
+
if (callbackMapRef.current.has(element)) {
|
144
|
+
return;
|
145
|
+
}
|
146
|
+
callbackMapRef.current.set(element, callback);
|
147
|
+
observerRef.current.observe(element);
|
148
|
+
}
|
149
|
+
}, []);
|
150
|
+
|
151
|
+
// 从观察器中注销元素
|
152
|
+
var unregister = useCallback(function (_ref3) {
|
153
|
+
var ref = _ref3.ref;
|
154
|
+
if (ref !== null && ref !== void 0 && ref.current && observerRef !== null && observerRef !== void 0 && observerRef.current) {
|
155
|
+
var element = ref.current;
|
156
|
+
|
157
|
+
// 从Map中移除回调
|
158
|
+
callbackMapRef.current.delete(element);
|
159
|
+
observerRef.current.unobserve(element);
|
160
|
+
}
|
161
|
+
}, []);
|
162
|
+
|
163
|
+
// 初始化观察器
|
164
|
+
useEffect(function () {
|
165
|
+
if (mounted) {
|
166
|
+
// 清理旧的observer
|
167
|
+
if (observerRef.current) {
|
168
|
+
observerRef.current.disconnect();
|
169
|
+
}
|
170
|
+
observerRef.current = createObserver();
|
171
|
+
setInitialized(true);
|
172
|
+
}
|
173
|
+
}, [mounted, createObserver]);
|
174
|
+
|
175
|
+
// 组件挂载和清理
|
176
|
+
useEffect(function () {
|
177
|
+
setMounted(true);
|
178
|
+
return function () {
|
179
|
+
if (observerRef.current) {
|
180
|
+
observerRef.current.disconnect();
|
181
|
+
callbackMapRef.current.clear();
|
182
|
+
setInitialized(false);
|
183
|
+
}
|
184
|
+
};
|
185
|
+
}, []);
|
186
|
+
var contextValue = {
|
187
|
+
initialized: initialized,
|
188
|
+
register: register,
|
189
|
+
unregister: unregister
|
190
|
+
};
|
191
|
+
return /*#__PURE__*/React.createElement(Provider, {
|
192
|
+
value: contextValue
|
193
|
+
}, children);
|
194
|
+
};
|
195
|
+
|
196
|
+
// IntersectionTrigger Hook - 内部使用
|
197
|
+
var useIntersectionTrigger = function useIntersectionTrigger(elementRef) {
|
198
|
+
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
199
|
+
var _options$once = options.once,
|
200
|
+
once = _options$once === void 0 ? false : _options$once,
|
201
|
+
onHide = options.onHide,
|
202
|
+
onShow = options.onShow;
|
203
|
+
var _useContext = useContext(IntersectionObserverContext),
|
204
|
+
initialized = _useContext.initialized,
|
205
|
+
register = _useContext.register,
|
206
|
+
unregister = _useContext.unregister;
|
207
|
+
var _useState5 = useState(false),
|
208
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
209
|
+
isIntersecting = _useState6[0],
|
210
|
+
setIsIntersecting = _useState6[1];
|
211
|
+
var cleanup = useCallback(function () {
|
212
|
+
return unregister({
|
213
|
+
ref: elementRef
|
214
|
+
});
|
215
|
+
}, [elementRef, unregister]);
|
216
|
+
|
217
|
+
// 使用useCallback优化回调函数,避免竞态条件
|
218
|
+
var intersectionCallback = useCallback(function (entry) {
|
219
|
+
if (entry.isIntersecting) {
|
220
|
+
onShow === null || onShow === void 0 || onShow(cleanup);
|
221
|
+
if (once) {
|
222
|
+
unregister({
|
223
|
+
ref: elementRef
|
224
|
+
});
|
225
|
+
}
|
226
|
+
} else {
|
227
|
+
onHide === null || onHide === void 0 || onHide(cleanup);
|
228
|
+
}
|
229
|
+
setIsIntersecting(entry.isIntersecting);
|
230
|
+
}, [onShow, onHide, once, cleanup, unregister, elementRef]);
|
231
|
+
var registerRef = useRef();
|
232
|
+
registerRef.current = function () {
|
233
|
+
return register({
|
234
|
+
ref: elementRef,
|
235
|
+
callback: intersectionCallback
|
236
|
+
});
|
237
|
+
};
|
238
|
+
useEffect(function () {
|
239
|
+
if (initialized) {
|
240
|
+
var _registerRef$current;
|
241
|
+
(_registerRef$current = registerRef.current) === null || _registerRef$current === void 0 || _registerRef$current.call(registerRef);
|
242
|
+
}
|
243
|
+
return function () {
|
244
|
+
cleanup();
|
245
|
+
};
|
246
|
+
}, [initialized, cleanup]);
|
247
|
+
return {
|
248
|
+
isIntersecting: isIntersecting
|
249
|
+
};
|
250
|
+
};
|
251
|
+
|
252
|
+
// IntersectionTrigger 组件
|
253
|
+
export var IntersectionTrigger = function IntersectionTrigger(_ref4) {
|
254
|
+
var children = _ref4.children,
|
255
|
+
className = _ref4.className,
|
256
|
+
_ref4$style = _ref4.style,
|
257
|
+
style = _ref4$style === void 0 ? {} : _ref4$style,
|
258
|
+
options = _objectWithoutProperties(_ref4, _excluded);
|
259
|
+
var elementRef = useRef(null);
|
260
|
+
// 使用内部 hook
|
261
|
+
var _useIntersectionTrigg = useIntersectionTrigger(elementRef, options),
|
262
|
+
isIntersecting = _useIntersectionTrigg.isIntersecting;
|
263
|
+
return /*#__PURE__*/React.createElement("div", {
|
264
|
+
className: className,
|
265
|
+
ref: elementRef,
|
266
|
+
style: _objectSpread({
|
267
|
+
width: '100%',
|
268
|
+
height: '100%'
|
269
|
+
}, style)
|
270
|
+
}, children);
|
271
|
+
};
|
272
|
+
|
273
|
+
// 导出类型和组件
|
274
|
+
|
275
|
+
export { IntersectionObserverContext, Consumer as IntersectionObserverConsumer };
|
276
|
+
export default IntersectionObserverProvider;
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import type { TabsStructureProps, TabListContainerProps, TabItemProps, RailProps, SelectionIndicatorProps, ScrollShadowProps, ChevronControlsProps, ChevronButtonProps } from './types';
|
3
|
+
declare global {
|
4
|
+
interface WeakRef<T extends object> {
|
5
|
+
deref(): T | undefined;
|
6
|
+
}
|
7
|
+
interface WeakRefConstructor {
|
8
|
+
new <T extends object>(target: T): WeakRef<T>;
|
9
|
+
}
|
10
|
+
const WeakRef: WeakRefConstructor | undefined;
|
11
|
+
}
|
12
|
+
declare const TabListContainer: React.ForwardRefExoticComponent<Omit<TabListContainerProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
|
13
|
+
declare const TabItem: React.ForwardRefExoticComponent<Omit<TabItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
14
|
+
declare const Rail: React.ForwardRefExoticComponent<Omit<RailProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
15
|
+
declare const SelectionIndicator: React.ForwardRefExoticComponent<Omit<SelectionIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
16
|
+
declare const ScrollShadow: React.ForwardRefExoticComponent<Omit<ScrollShadowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
17
|
+
declare const ChevronButton: React.ForwardRefExoticComponent<Omit<ChevronButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
18
|
+
declare const ChevronControls: React.FC<ChevronControlsProps>;
|
19
|
+
declare type TabsStructureComponent = React.FC<TabsStructureProps> & {
|
20
|
+
Rail: typeof Rail;
|
21
|
+
ListContainer: typeof TabListContainer;
|
22
|
+
Item: typeof TabItem;
|
23
|
+
SelectionIndicator: typeof SelectionIndicator;
|
24
|
+
ScrollShadow: typeof ScrollShadow;
|
25
|
+
ChevronControls: typeof ChevronControls;
|
26
|
+
ChevronButton: typeof ChevronButton;
|
27
|
+
};
|
28
|
+
declare const TabsStructureWithSubComponents: TabsStructureComponent;
|
29
|
+
export default TabsStructureWithSubComponents;
|
30
|
+
export { TabListContainer, TabItem, Rail, SelectionIndicator, ScrollShadow, ChevronControls, ChevronButton, };
|
@@ -0,0 +1,357 @@
|
|
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
|
+
var _excluded = ["children", "className"],
|
3
|
+
_excluded2 = ["children", "isSelected", "isDisabled", "className", "onClick", "tabId", "autoRegister"],
|
4
|
+
_excluded3 = ["children", "className"],
|
5
|
+
_excluded4 = ["focusRingClasses", "isFocusVisible", "style", "className"],
|
6
|
+
_excluded5 = ["visible", "location", "className"],
|
7
|
+
_excluded6 = ["direction", "disabled", "onClick", "className", "aria-label"],
|
8
|
+
_excluded7 = ["isPrevDisabled", "isNextDisabled", "onPrevClick", "onNextClick", "prevAction", "nextAction", "className"],
|
9
|
+
_excluded8 = ["selectedTab", "onTabChange", "autoScrollToSelected", "children", "className", "railRef"];
|
10
|
+
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; }
|
11
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
12
|
+
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); }
|
13
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
14
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
15
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
16
|
+
import React, { forwardRef, useMemo, useContext, createContext, useCallback, useRef, useEffect } from 'react';
|
17
|
+
import classNames from 'classnames';
|
18
|
+
import { tabWrapperClasses, tabListClasses, tabItemClasses, railClasses, selectionClasses, shadowClasses, chevronClasses, chevronButtonClasses } from "./styles";
|
19
|
+
import { safeScrollTo } from "./utils";
|
20
|
+
import ChevronLeft from '@pisell/icon/es/ChevronLeft';
|
21
|
+
import ChevronRight from '@pisell/icon/es/ChevronRight';
|
22
|
+
|
23
|
+
// WeakRef 类型声明(用于兼容性检测)
|
24
|
+
|
25
|
+
// Tab上下文
|
26
|
+
var TabContext = /*#__PURE__*/createContext({});
|
27
|
+
|
28
|
+
// Hook to use tab context
|
29
|
+
var useTabContext = function useTabContext() {
|
30
|
+
var context = useContext(TabContext);
|
31
|
+
if (!context) {
|
32
|
+
throw new Error('useTabContext must be used within a TabContext.Provider');
|
33
|
+
}
|
34
|
+
return context;
|
35
|
+
};
|
36
|
+
var TabListContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
37
|
+
var children = _ref.children,
|
38
|
+
className = _ref.className,
|
39
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
40
|
+
return /*#__PURE__*/React.createElement("ul", _extends({
|
41
|
+
ref: ref,
|
42
|
+
className: classNames(tabListClasses.list, className),
|
43
|
+
role: "tablist"
|
44
|
+
}, props), children);
|
45
|
+
});
|
46
|
+
var TabItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
|
47
|
+
var children = _ref2.children,
|
48
|
+
_ref2$isSelected = _ref2.isSelected,
|
49
|
+
isSelected = _ref2$isSelected === void 0 ? false : _ref2$isSelected,
|
50
|
+
_ref2$isDisabled = _ref2.isDisabled,
|
51
|
+
isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
|
52
|
+
className = _ref2.className,
|
53
|
+
onClick = _ref2.onClick,
|
54
|
+
tabId = _ref2.tabId,
|
55
|
+
_ref2$autoRegister = _ref2.autoRegister,
|
56
|
+
autoRegister = _ref2$autoRegister === void 0 ? true : _ref2$autoRegister,
|
57
|
+
props = _objectWithoutProperties(_ref2, _excluded2);
|
58
|
+
var _useTabContext = useTabContext(),
|
59
|
+
selectedTab = _useTabContext.selectedTab,
|
60
|
+
onTabChange = _useTabContext.onTabChange,
|
61
|
+
registerTab = _useTabContext.registerTab,
|
62
|
+
unregisterTab = _useTabContext.unregisterTab;
|
63
|
+
var elementRef = useRef(null);
|
64
|
+
|
65
|
+
// ref 合并逻辑已在 combinedRef 中处理
|
66
|
+
|
67
|
+
// 组合内部ref和外部ref
|
68
|
+
var combinedRef = useCallback(function (element) {
|
69
|
+
elementRef.current = element;
|
70
|
+
if (typeof ref === 'function') {
|
71
|
+
ref(element);
|
72
|
+
} else if (ref && 'current' in ref) {
|
73
|
+
ref.current = element;
|
74
|
+
}
|
75
|
+
}, [ref]);
|
76
|
+
|
77
|
+
// 自动注册tab
|
78
|
+
useEffect(function () {
|
79
|
+
if (autoRegister && tabId && elementRef.current && registerTab) {
|
80
|
+
registerTab(tabId, elementRef.current);
|
81
|
+
return function () {
|
82
|
+
if (unregisterTab) {
|
83
|
+
unregisterTab(tabId);
|
84
|
+
}
|
85
|
+
};
|
86
|
+
}
|
87
|
+
}, [tabId, autoRegister, registerTab, unregisterTab]);
|
88
|
+
|
89
|
+
// 处理点击事件
|
90
|
+
var handleClick = useCallback(function () {
|
91
|
+
if (!isDisabled) {
|
92
|
+
if (tabId && onTabChange) {
|
93
|
+
onTabChange(tabId);
|
94
|
+
}
|
95
|
+
onClick === null || onClick === void 0 || onClick(tabId);
|
96
|
+
}
|
97
|
+
}, [isDisabled, tabId, onTabChange, onClick]);
|
98
|
+
|
99
|
+
// 确定是否选中
|
100
|
+
var isTabSelected = tabId ? selectedTab === tabId : isSelected;
|
101
|
+
return /*#__PURE__*/React.createElement("li", {
|
102
|
+
role: "presentation",
|
103
|
+
style: {
|
104
|
+
lineHeight: 0
|
105
|
+
}
|
106
|
+
}, /*#__PURE__*/React.createElement("button", _extends({
|
107
|
+
id: tabId,
|
108
|
+
ref: combinedRef,
|
109
|
+
className: classNames(tabItemClasses.item, isTabSelected && tabItemClasses.selected, isDisabled && tabItemClasses.disabled, className),
|
110
|
+
role: "tab",
|
111
|
+
"aria-selected": isTabSelected,
|
112
|
+
"aria-disabled": isDisabled,
|
113
|
+
disabled: isDisabled,
|
114
|
+
onClick: handleClick,
|
115
|
+
tabIndex: isTabSelected ? 0 : -1
|
116
|
+
}, props), children));
|
117
|
+
});
|
118
|
+
var Rail = /*#__PURE__*/forwardRef(function (_ref3, ref) {
|
119
|
+
var children = _ref3.children,
|
120
|
+
className = _ref3.className,
|
121
|
+
props = _objectWithoutProperties(_ref3, _excluded3);
|
122
|
+
var _useTabContext2 = useTabContext(),
|
123
|
+
contextRailRef = _useTabContext2.railRef;
|
124
|
+
|
125
|
+
// 合并context ref和外部ref
|
126
|
+
var mergedRef = useCallback(function (element) {
|
127
|
+
// 安全地设置context中的railRef
|
128
|
+
if (contextRailRef && 'current' in contextRailRef) {
|
129
|
+
contextRailRef.current = element;
|
130
|
+
}
|
131
|
+
|
132
|
+
// 设置外部传入的ref
|
133
|
+
if (typeof ref === 'function') {
|
134
|
+
ref(element);
|
135
|
+
} else if (ref && 'current' in ref) {
|
136
|
+
ref.current = element;
|
137
|
+
}
|
138
|
+
}, [ref, contextRailRef]);
|
139
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
140
|
+
ref: mergedRef,
|
141
|
+
className: classNames(railClasses.rail, className)
|
142
|
+
}, props), children);
|
143
|
+
});
|
144
|
+
var SelectionIndicator = /*#__PURE__*/forwardRef(function (_ref4, ref) {
|
145
|
+
var focusRingClasses = _ref4.focusRingClasses,
|
146
|
+
_ref4$isFocusVisible = _ref4.isFocusVisible,
|
147
|
+
isFocusVisible = _ref4$isFocusVisible === void 0 ? false : _ref4$isFocusVisible,
|
148
|
+
style = _ref4.style,
|
149
|
+
className = _ref4.className,
|
150
|
+
props = _objectWithoutProperties(_ref4, _excluded4);
|
151
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
152
|
+
ref: ref,
|
153
|
+
className: classNames(selectionClasses.selection, selectionClasses.position, _defineProperty({}, selectionClasses.focused, isFocusVisible && focusRingClasses), className),
|
154
|
+
style: style,
|
155
|
+
"aria-hidden": "true"
|
156
|
+
}, props));
|
157
|
+
});
|
158
|
+
var ScrollShadow = /*#__PURE__*/forwardRef(function (_ref5, ref) {
|
159
|
+
var visible = _ref5.visible,
|
160
|
+
location = _ref5.location,
|
161
|
+
className = _ref5.className,
|
162
|
+
props = _objectWithoutProperties(_ref5, _excluded5);
|
163
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
164
|
+
ref: ref,
|
165
|
+
className: classNames(shadowClasses.shadow, _defineProperty(_defineProperty(_defineProperty({}, shadowClasses.isVisible, visible), shadowClasses.locationStart, location === 'start'), shadowClasses.locationEnd, location === 'end'), className)
|
166
|
+
}, props));
|
167
|
+
});
|
168
|
+
var ChevronButton = /*#__PURE__*/forwardRef(function (_ref6, ref) {
|
169
|
+
var direction = _ref6.direction,
|
170
|
+
_ref6$disabled = _ref6.disabled,
|
171
|
+
disabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
|
172
|
+
onClick = _ref6.onClick,
|
173
|
+
className = _ref6.className,
|
174
|
+
ariaLabel = _ref6['aria-label'],
|
175
|
+
props = _objectWithoutProperties(_ref6, _excluded6);
|
176
|
+
var defaultAriaLabel = direction === 'prev' ? 'prev' : 'next';
|
177
|
+
return /*#__PURE__*/React.createElement("button", _extends({
|
178
|
+
ref: ref,
|
179
|
+
className: classNames(chevronButtonClasses.button, _defineProperty(_defineProperty(_defineProperty({}, chevronButtonClasses.disabled, disabled), chevronButtonClasses.prev, direction === 'prev'), chevronButtonClasses.next, direction === 'next'), className),
|
180
|
+
disabled: disabled,
|
181
|
+
onClick: onClick,
|
182
|
+
"aria-label": ariaLabel || defaultAriaLabel,
|
183
|
+
type: "button"
|
184
|
+
}, props), direction === 'prev' ? /*#__PURE__*/React.createElement(ChevronLeft, null) : /*#__PURE__*/React.createElement(ChevronRight, null));
|
185
|
+
});
|
186
|
+
var ChevronControls = function ChevronControls(_ref7) {
|
187
|
+
var _ref7$isPrevDisabled = _ref7.isPrevDisabled,
|
188
|
+
isPrevDisabled = _ref7$isPrevDisabled === void 0 ? false : _ref7$isPrevDisabled,
|
189
|
+
_ref7$isNextDisabled = _ref7.isNextDisabled,
|
190
|
+
isNextDisabled = _ref7$isNextDisabled === void 0 ? false : _ref7$isNextDisabled,
|
191
|
+
onPrevClick = _ref7.onPrevClick,
|
192
|
+
onNextClick = _ref7.onNextClick,
|
193
|
+
prevAction = _ref7.prevAction,
|
194
|
+
nextAction = _ref7.nextAction,
|
195
|
+
className = _ref7.className,
|
196
|
+
props = _objectWithoutProperties(_ref7, _excluded7);
|
197
|
+
// 支持两种命名方式
|
198
|
+
var handlePrevClick = onPrevClick || prevAction;
|
199
|
+
var handleNextClick = onNextClick || nextAction;
|
200
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
201
|
+
className: classNames(chevronClasses.controls, className)
|
202
|
+
}, props), /*#__PURE__*/React.createElement(ChevronButton, {
|
203
|
+
direction: "prev",
|
204
|
+
disabled: isPrevDisabled,
|
205
|
+
onClick: handlePrevClick
|
206
|
+
}), /*#__PURE__*/React.createElement(ChevronButton, {
|
207
|
+
direction: "next",
|
208
|
+
disabled: isNextDisabled,
|
209
|
+
onClick: handleNextClick
|
210
|
+
}));
|
211
|
+
};
|
212
|
+
var TabsStructure = function TabsStructure(_ref8) {
|
213
|
+
var selectedTab = _ref8.selectedTab,
|
214
|
+
onTabChange = _ref8.onTabChange,
|
215
|
+
_ref8$autoScrollToSel = _ref8.autoScrollToSelected,
|
216
|
+
autoScrollToSelected = _ref8$autoScrollToSel === void 0 ? true : _ref8$autoScrollToSel,
|
217
|
+
children = _ref8.children,
|
218
|
+
className = _ref8.className,
|
219
|
+
externalRailRef = _ref8.railRef,
|
220
|
+
props = _objectWithoutProperties(_ref8, _excluded8);
|
221
|
+
// 使用WeakRef优化内存管理,避免内存泄漏(支持降级到直接引用)
|
222
|
+
var tabElementsRef = useRef(new Map());
|
223
|
+
var internalRailRef = useRef(null);
|
224
|
+
|
225
|
+
// 使用外部传入的railRef,如果没有则使用内部的
|
226
|
+
var railRef = externalRailRef || internalRailRef;
|
227
|
+
if (!selectedTab && children) {
|
228
|
+
console.warn('TabsStructure: No selectedTab provided, consider setting a default value');
|
229
|
+
}
|
230
|
+
var registerTab = useCallback(function (tabId, element) {
|
231
|
+
if (!tabId || !element) {
|
232
|
+
console.warn('TabsStructure: Invalid tabId or element provided to registerTab');
|
233
|
+
return;
|
234
|
+
}
|
235
|
+
|
236
|
+
// 特性检测:检查浏览器是否支持 WeakRef
|
237
|
+
if (typeof WeakRef !== 'undefined') {
|
238
|
+
// 支持 WeakRef 的现代浏览器
|
239
|
+
tabElementsRef.current.set(tabId, new WeakRef(element));
|
240
|
+
} else {
|
241
|
+
// 降级到直接引用(需要手动清理)
|
242
|
+
tabElementsRef.current.set(tabId, element);
|
243
|
+
}
|
244
|
+
}, []);
|
245
|
+
|
246
|
+
// 注销tab元素
|
247
|
+
var unregisterTab = useCallback(function (tabId) {
|
248
|
+
if (tabId) {
|
249
|
+
tabElementsRef.current.delete(tabId);
|
250
|
+
}
|
251
|
+
}, []);
|
252
|
+
|
253
|
+
// 清理所有tab引用(主要用于降级模式的内存管理)
|
254
|
+
var clearAllTabs = useCallback(function () {
|
255
|
+
tabElementsRef.current.clear();
|
256
|
+
}, []);
|
257
|
+
|
258
|
+
// 组件卸载时清理所有引用
|
259
|
+
useEffect(function () {
|
260
|
+
return function () {
|
261
|
+
// 在降级模式下,确保清理所有直接引用
|
262
|
+
if (typeof WeakRef === 'undefined') {
|
263
|
+
clearAllTabs();
|
264
|
+
}
|
265
|
+
};
|
266
|
+
}, [clearAllTabs]);
|
267
|
+
var getTabElement = useCallback(function (tabId) {
|
268
|
+
var ref = tabElementsRef.current.get(tabId);
|
269
|
+
if (!ref) return null;
|
270
|
+
|
271
|
+
// 特性检测:检查是否为 WeakRef 实例
|
272
|
+
if (typeof WeakRef !== 'undefined' && ref instanceof WeakRef) {
|
273
|
+
var element = ref.deref();
|
274
|
+
if (!element) {
|
275
|
+
// 元素已被垃圾回收,清理引用
|
276
|
+
tabElementsRef.current.delete(tabId);
|
277
|
+
return null;
|
278
|
+
}
|
279
|
+
return element;
|
280
|
+
} else {
|
281
|
+
// 降级模式:直接返回元素
|
282
|
+
return ref;
|
283
|
+
}
|
284
|
+
}, []);
|
285
|
+
|
286
|
+
// 优化的滚动函数,包含错误处理和边界检查
|
287
|
+
var scrollToTab = useCallback(function (tabId) {
|
288
|
+
if (!tabId || !railRef.current) {
|
289
|
+
return;
|
290
|
+
}
|
291
|
+
var targetElement = getTabElement(tabId);
|
292
|
+
if (!targetElement) {
|
293
|
+
console.warn("TabsStructure: Tab element with id \"".concat(tabId, "\" not found"));
|
294
|
+
return;
|
295
|
+
}
|
296
|
+
|
297
|
+
// 检查元素是否有有效的offsetParent(即是否在DOM中且可见)
|
298
|
+
if (!targetElement.offsetParent) {
|
299
|
+
console.warn("TabsStructure: Tab element \"".concat(tabId, "\" is not visible or not in DOM"));
|
300
|
+
return;
|
301
|
+
}
|
302
|
+
var rail = railRef.current;
|
303
|
+
var targetLeft = targetElement.offsetLeft;
|
304
|
+
var currentScrollLeft = rail.scrollLeft;
|
305
|
+
|
306
|
+
// 只有当需要滚动时才执行
|
307
|
+
if (Math.abs(targetLeft - currentScrollLeft) > 1) {
|
308
|
+
safeScrollTo(rail, {
|
309
|
+
left: targetLeft,
|
310
|
+
behavior: 'smooth'
|
311
|
+
});
|
312
|
+
}
|
313
|
+
}, [getTabElement]);
|
314
|
+
|
315
|
+
// 自动滚动到选中的tab
|
316
|
+
useEffect(function () {
|
317
|
+
if (autoScrollToSelected && selectedTab) {
|
318
|
+
scrollToTab(selectedTab);
|
319
|
+
}
|
320
|
+
}, [selectedTab, autoScrollToSelected, scrollToTab]);
|
321
|
+
|
322
|
+
// 上下文值
|
323
|
+
var contextValue = useMemo(function () {
|
324
|
+
return {
|
325
|
+
selectedTab: selectedTab,
|
326
|
+
onTabChange: onTabChange,
|
327
|
+
registerTab: registerTab,
|
328
|
+
unregisterTab: unregisterTab,
|
329
|
+
railRef: railRef
|
330
|
+
};
|
331
|
+
}, [selectedTab, onTabChange, registerTab, unregisterTab, railRef]);
|
332
|
+
return /*#__PURE__*/React.createElement(TabContext.Provider, {
|
333
|
+
value: contextValue
|
334
|
+
}, /*#__PURE__*/React.createElement("div", _extends({}, props, {
|
335
|
+
className: classNames(tabWrapperClasses.wrapper, className)
|
336
|
+
}), children));
|
337
|
+
};
|
338
|
+
var TabsStructureWithSubComponents = TabsStructure;
|
339
|
+
TabsStructureWithSubComponents.Rail = Rail;
|
340
|
+
TabsStructureWithSubComponents.ListContainer = TabListContainer;
|
341
|
+
TabsStructureWithSubComponents.Item = TabItem;
|
342
|
+
TabsStructureWithSubComponents.SelectionIndicator = SelectionIndicator;
|
343
|
+
TabsStructureWithSubComponents.ScrollShadow = ScrollShadow;
|
344
|
+
TabsStructureWithSubComponents.ChevronControls = ChevronControls;
|
345
|
+
TabsStructureWithSubComponents.ChevronButton = ChevronButton;
|
346
|
+
TabsStructure.displayName = 'TabsStructure';
|
347
|
+
Rail.displayName = 'TabsStructure.Rail';
|
348
|
+
TabListContainer.displayName = 'TabsStructure.ListContainer';
|
349
|
+
TabItem.displayName = 'TabsStructure.Item';
|
350
|
+
SelectionIndicator.displayName = 'TabsStructure.SelectionIndicator';
|
351
|
+
ScrollShadow.displayName = 'TabsStructure.ScrollShadow';
|
352
|
+
ChevronControls.displayName = 'TabsStructure.ChevronControls';
|
353
|
+
ChevronButton.displayName = 'TabsStructure.ChevronButton';
|
354
|
+
export default TabsStructureWithSubComponents;
|
355
|
+
|
356
|
+
// 导出所有子组件
|
357
|
+
export { TabListContainer, TabItem, Rail, SelectionIndicator, ScrollShadow, ChevronControls, ChevronButton };
|