|
|
"use strict";
|
|
|
(self["webpackChunk"] = self["webpackChunk"] || []).push([[31324],{
|
|
|
|
|
|
/***/ 378:
|
|
|
/*!******************************************************************************************************!*\
|
|
|
!*** ./node_modules/_@ant-design_icons@5.2.6@@ant-design/icons/es/icons/PlusOutlined.js + 1 modules ***!
|
|
|
\******************************************************************************************************/
|
|
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
|
|
|
|
|
|
|
// EXPORTS
|
|
|
__webpack_require__.d(__webpack_exports__, {
|
|
|
Z: function() { return /* binding */ icons_PlusOutlined; }
|
|
|
});
|
|
|
|
|
|
// EXTERNAL MODULE: ./node_modules/_@babel_runtime@7.23.8@@babel/runtime/helpers/esm/extends.js
|
|
|
var esm_extends = __webpack_require__(38850);
|
|
|
// EXTERNAL MODULE: ./node_modules/_react@17.0.2@react/index.js
|
|
|
var _react_17_0_2_react = __webpack_require__(59301);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_@ant-design_icons-svg@4.3.1@@ant-design/icons-svg/es/asn/PlusOutlined.js
|
|
|
// This icon file is generated automatically.
|
|
|
var PlusOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" } }, { "tag": "path", "attrs": { "d": "M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z" } }] }, "name": "plus", "theme": "outlined" };
|
|
|
/* harmony default export */ var asn_PlusOutlined = (PlusOutlined);
|
|
|
|
|
|
// EXTERNAL MODULE: ./node_modules/_@ant-design_icons@5.2.6@@ant-design/icons/es/components/AntdIcon.js + 3 modules
|
|
|
var AntdIcon = __webpack_require__(91851);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_@ant-design_icons@5.2.6@@ant-design/icons/es/icons/PlusOutlined.js
|
|
|
|
|
|
// GENERATE BY ./scripts/generate.ts
|
|
|
// DON NOT EDIT IT MANUALLY
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var PlusOutlined_PlusOutlined = function PlusOutlined(props, ref) {
|
|
|
return /*#__PURE__*/_react_17_0_2_react.createElement(AntdIcon/* default */.Z, (0,esm_extends/* default */.Z)({}, props, {
|
|
|
ref: ref,
|
|
|
icon: asn_PlusOutlined
|
|
|
}));
|
|
|
};
|
|
|
if (false) {}
|
|
|
/* harmony default export */ var icons_PlusOutlined = (/*#__PURE__*/_react_17_0_2_react.forwardRef(PlusOutlined_PlusOutlined));
|
|
|
|
|
|
/***/ }),
|
|
|
|
|
|
/***/ 31324:
|
|
|
/*!**********************************************************************!*\
|
|
|
!*** ./node_modules/_antd@5.12.8@antd/es/tabs/index.js + 24 modules ***!
|
|
|
\**********************************************************************/
|
|
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
|
|
|
|
|
|
|
// EXPORTS
|
|
|
__webpack_require__.d(__webpack_exports__, {
|
|
|
Z: function() { return /* binding */ tabs; }
|
|
|
});
|
|
|
|
|
|
// EXTERNAL MODULE: ./node_modules/_react@17.0.2@react/index.js
|
|
|
var _react_17_0_2_react = __webpack_require__(59301);
|
|
|
// EXTERNAL MODULE: ./node_modules/_@ant-design_icons@5.2.6@@ant-design/icons/es/icons/CloseOutlined.js + 1 modules
|
|
|
var CloseOutlined = __webpack_require__(99174);
|
|
|
// EXTERNAL MODULE: ./node_modules/_@ant-design_icons@5.2.6@@ant-design/icons/es/icons/EllipsisOutlined.js + 1 modules
|
|
|
var EllipsisOutlined = __webpack_require__(93319);
|
|
|
// EXTERNAL MODULE: ./node_modules/_@ant-design_icons@5.2.6@@ant-design/icons/es/icons/PlusOutlined.js + 1 modules
|
|
|
var PlusOutlined = __webpack_require__(378);
|
|
|
// EXTERNAL MODULE: ./node_modules/_classnames@2.5.1@classnames/index.js
|
|
|
var _classnames_2_5_1_classnames = __webpack_require__(92310);
|
|
|
var _classnames_2_5_1_classnames_default = /*#__PURE__*/__webpack_require__.n(_classnames_2_5_1_classnames);
|
|
|
// EXTERNAL MODULE: ./node_modules/_@babel_runtime@7.23.8@@babel/runtime/helpers/esm/extends.js
|
|
|
var esm_extends = __webpack_require__(38850);
|
|
|
// EXTERNAL MODULE: ./node_modules/_@babel_runtime@7.23.8@@babel/runtime/helpers/esm/defineProperty.js
|
|
|
var defineProperty = __webpack_require__(85005);
|
|
|
// EXTERNAL MODULE: ./node_modules/_@babel_runtime@7.23.8@@babel/runtime/helpers/esm/objectSpread2.js
|
|
|
var objectSpread2 = __webpack_require__(96257);
|
|
|
// EXTERNAL MODULE: ./node_modules/_@babel_runtime@7.23.8@@babel/runtime/helpers/esm/slicedToArray.js + 1 modules
|
|
|
var slicedToArray = __webpack_require__(69818);
|
|
|
// EXTERNAL MODULE: ./node_modules/_@babel_runtime@7.23.8@@babel/runtime/helpers/esm/typeof.js
|
|
|
var esm_typeof = __webpack_require__(2442);
|
|
|
// EXTERNAL MODULE: ./node_modules/_@babel_runtime@7.23.8@@babel/runtime/helpers/esm/objectWithoutProperties.js
|
|
|
var objectWithoutProperties = __webpack_require__(46130);
|
|
|
// EXTERNAL MODULE: ./node_modules/_rc-util@5.38.1@rc-util/es/hooks/useMergedState.js
|
|
|
var useMergedState = __webpack_require__(84381);
|
|
|
// EXTERNAL MODULE: ./node_modules/_rc-util@5.38.1@rc-util/es/isMobile.js
|
|
|
var isMobile = __webpack_require__(15639);
|
|
|
// EXTERNAL MODULE: ./node_modules/_rc-util@5.38.1@rc-util/es/warning.js
|
|
|
var warning = __webpack_require__(36014);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-tabs@12.14.1@rc-tabs/es/hooks/useAnimateConfig.js
|
|
|
|
|
|
|
|
|
|
|
|
function useAnimateConfig() {
|
|
|
var animated = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
|
|
|
inkBar: true,
|
|
|
tabPane: false
|
|
|
};
|
|
|
var mergedAnimated;
|
|
|
if (animated === false) {
|
|
|
mergedAnimated = {
|
|
|
inkBar: false,
|
|
|
tabPane: false
|
|
|
};
|
|
|
} else if (animated === true) {
|
|
|
mergedAnimated = {
|
|
|
inkBar: true,
|
|
|
tabPane: false
|
|
|
};
|
|
|
} else {
|
|
|
mergedAnimated = (0,objectSpread2/* default */.Z)({
|
|
|
inkBar: true
|
|
|
}, (0,esm_typeof/* default */.Z)(animated) === 'object' ? animated : {});
|
|
|
}
|
|
|
|
|
|
// Enable tabPane animation if provide motion
|
|
|
if (mergedAnimated.tabPaneMotion && mergedAnimated.tabPane === undefined) {
|
|
|
mergedAnimated.tabPane = true;
|
|
|
}
|
|
|
if (!mergedAnimated.tabPaneMotion && mergedAnimated.tabPane) {
|
|
|
if (false) {}
|
|
|
mergedAnimated.tabPane = false;
|
|
|
}
|
|
|
return mergedAnimated;
|
|
|
}
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-tabs@12.14.1@rc-tabs/es/TabContext.js
|
|
|
|
|
|
/* harmony default export */ var TabContext = (/*#__PURE__*/(0,_react_17_0_2_react.createContext)(null));
|
|
|
// EXTERNAL MODULE: ./node_modules/_@babel_runtime@7.23.8@@babel/runtime/helpers/esm/toConsumableArray.js + 2 modules
|
|
|
var toConsumableArray = __webpack_require__(69202);
|
|
|
// EXTERNAL MODULE: ./node_modules/_rc-resize-observer@1.4.0@rc-resize-observer/es/index.js + 4 modules
|
|
|
var es = __webpack_require__(28647);
|
|
|
// EXTERNAL MODULE: ./node_modules/_rc-util@5.38.1@rc-util/es/hooks/useEvent.js
|
|
|
var useEvent = __webpack_require__(60402);
|
|
|
// EXTERNAL MODULE: ./node_modules/_rc-util@5.38.1@rc-util/es/ref.js
|
|
|
var es_ref = __webpack_require__(88831);
|
|
|
// EXTERNAL MODULE: ./node_modules/_rc-util@5.38.1@rc-util/es/raf.js
|
|
|
var raf = __webpack_require__(90571);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-tabs@12.14.1@rc-tabs/es/hooks/useIndicator.js
|
|
|
|
|
|
|
|
|
|
|
|
var useIndicator = function useIndicator(_ref) {
|
|
|
var activeTabOffset = _ref.activeTabOffset,
|
|
|
horizontal = _ref.horizontal,
|
|
|
rtl = _ref.rtl,
|
|
|
indicatorSize = _ref.indicatorSize;
|
|
|
var _useState = (0,_react_17_0_2_react.useState)(),
|
|
|
_useState2 = (0,slicedToArray/* default */.Z)(_useState, 2),
|
|
|
inkStyle = _useState2[0],
|
|
|
setInkStyle = _useState2[1];
|
|
|
var inkBarRafRef = (0,_react_17_0_2_react.useRef)();
|
|
|
var getLength = function getLength(origin) {
|
|
|
if (typeof indicatorSize === 'function') {
|
|
|
return indicatorSize(origin);
|
|
|
}
|
|
|
if (typeof indicatorSize === 'number') {
|
|
|
return indicatorSize;
|
|
|
}
|
|
|
return origin;
|
|
|
};
|
|
|
|
|
|
// Delay set ink style to avoid remove tab blink
|
|
|
function cleanInkBarRaf() {
|
|
|
raf/* default */.Z.cancel(inkBarRafRef.current);
|
|
|
}
|
|
|
(0,_react_17_0_2_react.useEffect)(function () {
|
|
|
var newInkStyle = {};
|
|
|
if (activeTabOffset) {
|
|
|
if (horizontal) {
|
|
|
if (rtl) {
|
|
|
newInkStyle.right = activeTabOffset.right + activeTabOffset.width / 2;
|
|
|
newInkStyle.transform = 'translateX(50%)';
|
|
|
} else {
|
|
|
newInkStyle.left = activeTabOffset.left + activeTabOffset.width / 2;
|
|
|
newInkStyle.transform = 'translateX(-50%)';
|
|
|
}
|
|
|
newInkStyle.width = getLength(activeTabOffset.width);
|
|
|
} else {
|
|
|
newInkStyle.top = activeTabOffset.top + activeTabOffset.height / 2;
|
|
|
newInkStyle.transform = 'translateY(-50%)';
|
|
|
newInkStyle.height = getLength(activeTabOffset.height);
|
|
|
}
|
|
|
}
|
|
|
cleanInkBarRaf();
|
|
|
inkBarRafRef.current = (0,raf/* default */.Z)(function () {
|
|
|
setInkStyle(newInkStyle);
|
|
|
});
|
|
|
return cleanInkBarRaf;
|
|
|
}, [activeTabOffset, horizontal, rtl, indicatorSize]);
|
|
|
return {
|
|
|
style: inkStyle
|
|
|
};
|
|
|
};
|
|
|
/* harmony default export */ var hooks_useIndicator = (useIndicator);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-tabs@12.14.1@rc-tabs/es/hooks/useOffsets.js
|
|
|
|
|
|
|
|
|
var DEFAULT_SIZE = {
|
|
|
width: 0,
|
|
|
height: 0,
|
|
|
left: 0,
|
|
|
top: 0
|
|
|
};
|
|
|
function useOffsets(tabs, tabSizes, holderScrollWidth) {
|
|
|
return (0,_react_17_0_2_react.useMemo)(function () {
|
|
|
var _tabs$;
|
|
|
var map = new Map();
|
|
|
var lastOffset = tabSizes.get((_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.key) || DEFAULT_SIZE;
|
|
|
var rightOffset = lastOffset.left + lastOffset.width;
|
|
|
for (var i = 0; i < tabs.length; i += 1) {
|
|
|
var key = tabs[i].key;
|
|
|
var data = tabSizes.get(key);
|
|
|
|
|
|
// Reuse last one when not exist yet
|
|
|
if (!data) {
|
|
|
var _tabs;
|
|
|
data = tabSizes.get((_tabs = tabs[i - 1]) === null || _tabs === void 0 ? void 0 : _tabs.key) || DEFAULT_SIZE;
|
|
|
}
|
|
|
var entity = map.get(key) || (0,objectSpread2/* default */.Z)({}, data);
|
|
|
|
|
|
// Right
|
|
|
entity.right = rightOffset - entity.left - entity.width;
|
|
|
|
|
|
// Update entity
|
|
|
map.set(key, entity);
|
|
|
}
|
|
|
return map;
|
|
|
}, [tabs.map(function (tab) {
|
|
|
return tab.key;
|
|
|
}).join('_'), tabSizes, holderScrollWidth]);
|
|
|
}
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-tabs@12.14.1@rc-tabs/es/hooks/useSyncState.js
|
|
|
|
|
|
|
|
|
function useSyncState(defaultState, onChange) {
|
|
|
var stateRef = _react_17_0_2_react.useRef(defaultState);
|
|
|
var _React$useState = _react_17_0_2_react.useState({}),
|
|
|
_React$useState2 = (0,slicedToArray/* default */.Z)(_React$useState, 2),
|
|
|
forceUpdate = _React$useState2[1];
|
|
|
function setState(updater) {
|
|
|
var newValue = typeof updater === 'function' ? updater(stateRef.current) : updater;
|
|
|
if (newValue !== stateRef.current) {
|
|
|
onChange(newValue, stateRef.current);
|
|
|
}
|
|
|
stateRef.current = newValue;
|
|
|
forceUpdate({});
|
|
|
}
|
|
|
return [stateRef.current, setState];
|
|
|
}
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-tabs@12.14.1@rc-tabs/es/hooks/useTouchMove.js
|
|
|
|
|
|
|
|
|
|
|
|
var MIN_SWIPE_DISTANCE = 0.1;
|
|
|
var STOP_SWIPE_DISTANCE = 0.01;
|
|
|
var REFRESH_INTERVAL = 20;
|
|
|
var SPEED_OFF_MULTIPLE = Math.pow(0.995, REFRESH_INTERVAL);
|
|
|
|
|
|
// ================================= Hook =================================
|
|
|
function useTouchMove(ref, onOffset) {
|
|
|
var _useState = (0,_react_17_0_2_react.useState)(),
|
|
|
_useState2 = (0,slicedToArray/* default */.Z)(_useState, 2),
|
|
|
touchPosition = _useState2[0],
|
|
|
setTouchPosition = _useState2[1];
|
|
|
var _useState3 = (0,_react_17_0_2_react.useState)(0),
|
|
|
_useState4 = (0,slicedToArray/* default */.Z)(_useState3, 2),
|
|
|
lastTimestamp = _useState4[0],
|
|
|
setLastTimestamp = _useState4[1];
|
|
|
var _useState5 = (0,_react_17_0_2_react.useState)(0),
|
|
|
_useState6 = (0,slicedToArray/* default */.Z)(_useState5, 2),
|
|
|
lastTimeDiff = _useState6[0],
|
|
|
setLastTimeDiff = _useState6[1];
|
|
|
var _useState7 = (0,_react_17_0_2_react.useState)(),
|
|
|
_useState8 = (0,slicedToArray/* default */.Z)(_useState7, 2),
|
|
|
lastOffset = _useState8[0],
|
|
|
setLastOffset = _useState8[1];
|
|
|
var motionRef = (0,_react_17_0_2_react.useRef)();
|
|
|
|
|
|
// ========================= Events =========================
|
|
|
// >>> Touch events
|
|
|
function onTouchStart(e) {
|
|
|
var _e$touches$ = e.touches[0],
|
|
|
screenX = _e$touches$.screenX,
|
|
|
screenY = _e$touches$.screenY;
|
|
|
setTouchPosition({
|
|
|
x: screenX,
|
|
|
y: screenY
|
|
|
});
|
|
|
window.clearInterval(motionRef.current);
|
|
|
}
|
|
|
function onTouchMove(e) {
|
|
|
if (!touchPosition) return;
|
|
|
e.preventDefault();
|
|
|
var _e$touches$2 = e.touches[0],
|
|
|
screenX = _e$touches$2.screenX,
|
|
|
screenY = _e$touches$2.screenY;
|
|
|
setTouchPosition({
|
|
|
x: screenX,
|
|
|
y: screenY
|
|
|
});
|
|
|
var offsetX = screenX - touchPosition.x;
|
|
|
var offsetY = screenY - touchPosition.y;
|
|
|
onOffset(offsetX, offsetY);
|
|
|
var now = Date.now();
|
|
|
setLastTimestamp(now);
|
|
|
setLastTimeDiff(now - lastTimestamp);
|
|
|
setLastOffset({
|
|
|
x: offsetX,
|
|
|
y: offsetY
|
|
|
});
|
|
|
}
|
|
|
function onTouchEnd() {
|
|
|
if (!touchPosition) return;
|
|
|
setTouchPosition(null);
|
|
|
setLastOffset(null);
|
|
|
|
|
|
// Swipe if needed
|
|
|
if (lastOffset) {
|
|
|
var distanceX = lastOffset.x / lastTimeDiff;
|
|
|
var distanceY = lastOffset.y / lastTimeDiff;
|
|
|
var absX = Math.abs(distanceX);
|
|
|
var absY = Math.abs(distanceY);
|
|
|
|
|
|
// Skip swipe if low distance
|
|
|
if (Math.max(absX, absY) < MIN_SWIPE_DISTANCE) return;
|
|
|
var currentX = distanceX;
|
|
|
var currentY = distanceY;
|
|
|
motionRef.current = window.setInterval(function () {
|
|
|
if (Math.abs(currentX) < STOP_SWIPE_DISTANCE && Math.abs(currentY) < STOP_SWIPE_DISTANCE) {
|
|
|
window.clearInterval(motionRef.current);
|
|
|
return;
|
|
|
}
|
|
|
currentX *= SPEED_OFF_MULTIPLE;
|
|
|
currentY *= SPEED_OFF_MULTIPLE;
|
|
|
onOffset(currentX * REFRESH_INTERVAL, currentY * REFRESH_INTERVAL);
|
|
|
}, REFRESH_INTERVAL);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// >>> Wheel event
|
|
|
var lastWheelDirectionRef = (0,_react_17_0_2_react.useRef)();
|
|
|
function onWheel(e) {
|
|
|
var deltaX = e.deltaX,
|
|
|
deltaY = e.deltaY;
|
|
|
|
|
|
// Convert both to x & y since wheel only happened on PC
|
|
|
var mixed = 0;
|
|
|
var absX = Math.abs(deltaX);
|
|
|
var absY = Math.abs(deltaY);
|
|
|
if (absX === absY) {
|
|
|
mixed = lastWheelDirectionRef.current === 'x' ? deltaX : deltaY;
|
|
|
} else if (absX > absY) {
|
|
|
mixed = deltaX;
|
|
|
lastWheelDirectionRef.current = 'x';
|
|
|
} else {
|
|
|
mixed = deltaY;
|
|
|
lastWheelDirectionRef.current = 'y';
|
|
|
}
|
|
|
if (onOffset(-mixed, -mixed)) {
|
|
|
e.preventDefault();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// ========================= Effect =========================
|
|
|
var touchEventsRef = (0,_react_17_0_2_react.useRef)(null);
|
|
|
touchEventsRef.current = {
|
|
|
onTouchStart: onTouchStart,
|
|
|
onTouchMove: onTouchMove,
|
|
|
onTouchEnd: onTouchEnd,
|
|
|
onWheel: onWheel
|
|
|
};
|
|
|
_react_17_0_2_react.useEffect(function () {
|
|
|
function onProxyTouchStart(e) {
|
|
|
touchEventsRef.current.onTouchStart(e);
|
|
|
}
|
|
|
function onProxyTouchMove(e) {
|
|
|
touchEventsRef.current.onTouchMove(e);
|
|
|
}
|
|
|
function onProxyTouchEnd(e) {
|
|
|
touchEventsRef.current.onTouchEnd(e);
|
|
|
}
|
|
|
function onProxyWheel(e) {
|
|
|
touchEventsRef.current.onWheel(e);
|
|
|
}
|
|
|
document.addEventListener('touchmove', onProxyTouchMove, {
|
|
|
passive: false
|
|
|
});
|
|
|
document.addEventListener('touchend', onProxyTouchEnd, {
|
|
|
passive: false
|
|
|
});
|
|
|
|
|
|
// No need to clean up since element removed
|
|
|
ref.current.addEventListener('touchstart', onProxyTouchStart, {
|
|
|
passive: false
|
|
|
});
|
|
|
ref.current.addEventListener('wheel', onProxyWheel);
|
|
|
return function () {
|
|
|
document.removeEventListener('touchmove', onProxyTouchMove);
|
|
|
document.removeEventListener('touchend', onProxyTouchEnd);
|
|
|
};
|
|
|
}, []);
|
|
|
}
|
|
|
// EXTERNAL MODULE: ./node_modules/_rc-util@5.38.1@rc-util/es/hooks/useLayoutEffect.js
|
|
|
var useLayoutEffect = __webpack_require__(70658);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-tabs@12.14.1@rc-tabs/es/hooks/useUpdate.js
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
* Help to merge callback with `useLayoutEffect`.
|
|
|
* One time will only trigger once.
|
|
|
*/
|
|
|
function useUpdate(callback) {
|
|
|
var _useState = (0,_react_17_0_2_react.useState)(0),
|
|
|
_useState2 = (0,slicedToArray/* default */.Z)(_useState, 2),
|
|
|
count = _useState2[0],
|
|
|
setCount = _useState2[1];
|
|
|
var effectRef = (0,_react_17_0_2_react.useRef)(0);
|
|
|
var callbackRef = (0,_react_17_0_2_react.useRef)();
|
|
|
callbackRef.current = callback;
|
|
|
|
|
|
// Trigger on `useLayoutEffect`
|
|
|
(0,useLayoutEffect/* useLayoutUpdateEffect */.o)(function () {
|
|
|
var _callbackRef$current;
|
|
|
(_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 || _callbackRef$current.call(callbackRef);
|
|
|
}, [count]);
|
|
|
|
|
|
// Trigger to update count
|
|
|
return function () {
|
|
|
if (effectRef.current !== count) {
|
|
|
return;
|
|
|
}
|
|
|
effectRef.current += 1;
|
|
|
setCount(effectRef.current);
|
|
|
};
|
|
|
}
|
|
|
function useUpdateState(defaultState) {
|
|
|
var batchRef = (0,_react_17_0_2_react.useRef)([]);
|
|
|
var _useState3 = (0,_react_17_0_2_react.useState)({}),
|
|
|
_useState4 = (0,slicedToArray/* default */.Z)(_useState3, 2),
|
|
|
forceUpdate = _useState4[1];
|
|
|
var state = (0,_react_17_0_2_react.useRef)(typeof defaultState === 'function' ? defaultState() : defaultState);
|
|
|
var flushUpdate = useUpdate(function () {
|
|
|
var current = state.current;
|
|
|
batchRef.current.forEach(function (callback) {
|
|
|
current = callback(current);
|
|
|
});
|
|
|
batchRef.current = [];
|
|
|
state.current = current;
|
|
|
forceUpdate({});
|
|
|
});
|
|
|
function updater(callback) {
|
|
|
batchRef.current.push(callback);
|
|
|
flushUpdate();
|
|
|
}
|
|
|
return [state.current, updater];
|
|
|
}
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-tabs@12.14.1@rc-tabs/es/hooks/useVisibleRange.js
|
|
|
|
|
|
var useVisibleRange_DEFAULT_SIZE = {
|
|
|
width: 0,
|
|
|
height: 0,
|
|
|
left: 0,
|
|
|
top: 0,
|
|
|
right: 0
|
|
|
};
|
|
|
function useVisibleRange(tabOffsets, visibleTabContentValue, transform, tabContentSizeValue, addNodeSizeValue, operationNodeSizeValue, _ref) {
|
|
|
var tabs = _ref.tabs,
|
|
|
tabPosition = _ref.tabPosition,
|
|
|
rtl = _ref.rtl;
|
|
|
var charUnit;
|
|
|
var position;
|
|
|
var transformSize;
|
|
|
if (['top', 'bottom'].includes(tabPosition)) {
|
|
|
charUnit = 'width';
|
|
|
position = rtl ? 'right' : 'left';
|
|
|
transformSize = Math.abs(transform);
|
|
|
} else {
|
|
|
charUnit = 'height';
|
|
|
position = 'top';
|
|
|
transformSize = -transform;
|
|
|
}
|
|
|
return (0,_react_17_0_2_react.useMemo)(function () {
|
|
|
if (!tabs.length) {
|
|
|
return [0, 0];
|
|
|
}
|
|
|
var len = tabs.length;
|
|
|
var endIndex = len;
|
|
|
for (var i = 0; i < len; i += 1) {
|
|
|
var offset = tabOffsets.get(tabs[i].key) || useVisibleRange_DEFAULT_SIZE;
|
|
|
if (offset[position] + offset[charUnit] > transformSize + visibleTabContentValue) {
|
|
|
endIndex = i - 1;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
var startIndex = 0;
|
|
|
for (var _i = len - 1; _i >= 0; _i -= 1) {
|
|
|
var _offset = tabOffsets.get(tabs[_i].key) || useVisibleRange_DEFAULT_SIZE;
|
|
|
if (_offset[position] < transformSize) {
|
|
|
startIndex = _i + 1;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
return startIndex >= endIndex ? [0, 0] : [startIndex, endIndex];
|
|
|
}, [tabOffsets, visibleTabContentValue, tabContentSizeValue, addNodeSizeValue, operationNodeSizeValue, transformSize, tabPosition, tabs.map(function (tab) {
|
|
|
return tab.key;
|
|
|
}).join('_'), rtl]);
|
|
|
}
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-tabs@12.14.1@rc-tabs/es/util.js
|
|
|
/**
|
|
|
* We trade Map as deps which may change with same value but different ref object.
|
|
|
* We should make it as hash for deps
|
|
|
* */
|
|
|
function stringify(obj) {
|
|
|
var tgt;
|
|
|
if (obj instanceof Map) {
|
|
|
tgt = {};
|
|
|
obj.forEach(function (v, k) {
|
|
|
tgt[k] = v;
|
|
|
});
|
|
|
} else {
|
|
|
tgt = obj;
|
|
|
}
|
|
|
return JSON.stringify(tgt);
|
|
|
}
|
|
|
var RC_TABS_DOUBLE_QUOTE = 'TABS_DQ';
|
|
|
function genDataNodeKey(key) {
|
|
|
return String(key).replace(/"/g, RC_TABS_DOUBLE_QUOTE);
|
|
|
}
|
|
|
function getRemovable(closable, closeIcon, editable, disabled) {
|
|
|
if (
|
|
|
// Only editable tabs can be removed
|
|
|
!editable ||
|
|
|
// Tabs cannot be removed when disabled
|
|
|
disabled ||
|
|
|
// closable is false
|
|
|
closable === false ||
|
|
|
// If closable is undefined, the remove button should be hidden when closeIcon is null or false
|
|
|
closable === undefined && (closeIcon === false || closeIcon === null)) {
|
|
|
return false;
|
|
|
}
|
|
|
return true;
|
|
|
}
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-tabs@12.14.1@rc-tabs/es/TabNavList/AddButton.js
|
|
|
|
|
|
var AddButton = /*#__PURE__*/_react_17_0_2_react.forwardRef(function (props, ref) {
|
|
|
var prefixCls = props.prefixCls,
|
|
|
editable = props.editable,
|
|
|
locale = props.locale,
|
|
|
style = props.style;
|
|
|
if (!editable || editable.showAdd === false) {
|
|
|
return null;
|
|
|
}
|
|
|
return /*#__PURE__*/_react_17_0_2_react.createElement("button", {
|
|
|
ref: ref,
|
|
|
type: "button",
|
|
|
className: "".concat(prefixCls, "-nav-add"),
|
|
|
style: style,
|
|
|
"aria-label": (locale === null || locale === void 0 ? void 0 : locale.addAriaLabel) || 'Add tab',
|
|
|
onClick: function onClick(event) {
|
|
|
editable.onEdit('add', {
|
|
|
event: event
|
|
|
});
|
|
|
}
|
|
|
}, editable.addIcon || '+');
|
|
|
});
|
|
|
/* harmony default export */ var TabNavList_AddButton = (AddButton);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-tabs@12.14.1@rc-tabs/es/TabNavList/ExtraContent.js
|
|
|
|
|
|
|
|
|
var ExtraContent = /*#__PURE__*/_react_17_0_2_react.forwardRef(function (props, ref) {
|
|
|
var position = props.position,
|
|
|
prefixCls = props.prefixCls,
|
|
|
extra = props.extra;
|
|
|
if (!extra) {
|
|
|
return null;
|
|
|
}
|
|
|
var content;
|
|
|
|
|
|
// Parse extra
|
|
|
var assertExtra = {};
|
|
|
if ((0,esm_typeof/* default */.Z)(extra) === 'object' && ! /*#__PURE__*/_react_17_0_2_react.isValidElement(extra)) {
|
|
|
assertExtra = extra;
|
|
|
} else {
|
|
|
assertExtra.right = extra;
|
|
|
}
|
|
|
if (position === 'right') {
|
|
|
content = assertExtra.right;
|
|
|
}
|
|
|
if (position === 'left') {
|
|
|
content = assertExtra.left;
|
|
|
}
|
|
|
return content ? /*#__PURE__*/_react_17_0_2_react.createElement("div", {
|
|
|
className: "".concat(prefixCls, "-extra-content"),
|
|
|
ref: ref
|
|
|
}, content) : null;
|
|
|
});
|
|
|
if (false) {}
|
|
|
/* harmony default export */ var TabNavList_ExtraContent = (ExtraContent);
|
|
|
// EXTERNAL MODULE: ./node_modules/_rc-dropdown@4.1.0@rc-dropdown/es/index.js + 4 modules
|
|
|
var _rc_dropdown_4_1_0_rc_dropdown_es = __webpack_require__(31561);
|
|
|
// EXTERNAL MODULE: ./node_modules/_rc-menu@9.12.4@rc-menu/es/index.js + 26 modules
|
|
|
var _rc_menu_9_12_4_rc_menu_es = __webpack_require__(27484);
|
|
|
// EXTERNAL MODULE: ./node_modules/_rc-util@5.38.1@rc-util/es/KeyCode.js
|
|
|
var KeyCode = __webpack_require__(84821);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-tabs@12.14.1@rc-tabs/es/TabNavList/OperationNode.js
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var OperationNode = /*#__PURE__*/_react_17_0_2_react.forwardRef(function (props, ref) {
|
|
|
var prefixCls = props.prefixCls,
|
|
|
id = props.id,
|
|
|
tabs = props.tabs,
|
|
|
locale = props.locale,
|
|
|
mobile = props.mobile,
|
|
|
_props$moreIcon = props.moreIcon,
|
|
|
moreIcon = _props$moreIcon === void 0 ? 'More' : _props$moreIcon,
|
|
|
moreTransitionName = props.moreTransitionName,
|
|
|
style = props.style,
|
|
|
className = props.className,
|
|
|
editable = props.editable,
|
|
|
tabBarGutter = props.tabBarGutter,
|
|
|
rtl = props.rtl,
|
|
|
removeAriaLabel = props.removeAriaLabel,
|
|
|
onTabClick = props.onTabClick,
|
|
|
getPopupContainer = props.getPopupContainer,
|
|
|
popupClassName = props.popupClassName;
|
|
|
// ======================== Dropdown ========================
|
|
|
var _useState = (0,_react_17_0_2_react.useState)(false),
|
|
|
_useState2 = (0,slicedToArray/* default */.Z)(_useState, 2),
|
|
|
open = _useState2[0],
|
|
|
setOpen = _useState2[1];
|
|
|
var _useState3 = (0,_react_17_0_2_react.useState)(null),
|
|
|
_useState4 = (0,slicedToArray/* default */.Z)(_useState3, 2),
|
|
|
selectedKey = _useState4[0],
|
|
|
setSelectedKey = _useState4[1];
|
|
|
var popupId = "".concat(id, "-more-popup");
|
|
|
var dropdownPrefix = "".concat(prefixCls, "-dropdown");
|
|
|
var selectedItemId = selectedKey !== null ? "".concat(popupId, "-").concat(selectedKey) : null;
|
|
|
var dropdownAriaLabel = locale === null || locale === void 0 ? void 0 : locale.dropdownAriaLabel;
|
|
|
function onRemoveTab(event, key) {
|
|
|
event.preventDefault();
|
|
|
event.stopPropagation();
|
|
|
editable.onEdit('remove', {
|
|
|
key: key,
|
|
|
event: event
|
|
|
});
|
|
|
}
|
|
|
var menu = /*#__PURE__*/_react_17_0_2_react.createElement(_rc_menu_9_12_4_rc_menu_es/* default */.ZP, {
|
|
|
onClick: function onClick(_ref) {
|
|
|
var key = _ref.key,
|
|
|
domEvent = _ref.domEvent;
|
|
|
onTabClick(key, domEvent);
|
|
|
setOpen(false);
|
|
|
},
|
|
|
prefixCls: "".concat(dropdownPrefix, "-menu"),
|
|
|
id: popupId,
|
|
|
tabIndex: -1,
|
|
|
role: "listbox",
|
|
|
"aria-activedescendant": selectedItemId,
|
|
|
selectedKeys: [selectedKey],
|
|
|
"aria-label": dropdownAriaLabel !== undefined ? dropdownAriaLabel : 'expanded dropdown'
|
|
|
}, tabs.map(function (tab) {
|
|
|
var closable = tab.closable,
|
|
|
disabled = tab.disabled,
|
|
|
closeIcon = tab.closeIcon,
|
|
|
key = tab.key,
|
|
|
label = tab.label;
|
|
|
var removable = getRemovable(closable, closeIcon, editable, disabled);
|
|
|
return /*#__PURE__*/_react_17_0_2_react.createElement(_rc_menu_9_12_4_rc_menu_es/* MenuItem */.sN, {
|
|
|
key: key,
|
|
|
id: "".concat(popupId, "-").concat(key),
|
|
|
role: "option",
|
|
|
"aria-controls": id && "".concat(id, "-panel-").concat(key),
|
|
|
disabled: disabled
|
|
|
}, /*#__PURE__*/_react_17_0_2_react.createElement("span", null, label), removable && /*#__PURE__*/_react_17_0_2_react.createElement("button", {
|
|
|
type: "button",
|
|
|
"aria-label": removeAriaLabel || 'remove',
|
|
|
tabIndex: 0,
|
|
|
className: "".concat(dropdownPrefix, "-menu-item-remove"),
|
|
|
onClick: function onClick(e) {
|
|
|
e.stopPropagation();
|
|
|
onRemoveTab(e, key);
|
|
|
}
|
|
|
}, closeIcon || editable.removeIcon || '×'));
|
|
|
}));
|
|
|
function selectOffset(offset) {
|
|
|
var enabledTabs = tabs.filter(function (tab) {
|
|
|
return !tab.disabled;
|
|
|
});
|
|
|
var selectedIndex = enabledTabs.findIndex(function (tab) {
|
|
|
return tab.key === selectedKey;
|
|
|
}) || 0;
|
|
|
var len = enabledTabs.length;
|
|
|
for (var i = 0; i < len; i += 1) {
|
|
|
selectedIndex = (selectedIndex + offset + len) % len;
|
|
|
var tab = enabledTabs[selectedIndex];
|
|
|
if (!tab.disabled) {
|
|
|
setSelectedKey(tab.key);
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
function onKeyDown(e) {
|
|
|
var which = e.which;
|
|
|
if (!open) {
|
|
|
if ([KeyCode/* default */.Z.DOWN, KeyCode/* default */.Z.SPACE, KeyCode/* default */.Z.ENTER].includes(which)) {
|
|
|
setOpen(true);
|
|
|
e.preventDefault();
|
|
|
}
|
|
|
return;
|
|
|
}
|
|
|
switch (which) {
|
|
|
case KeyCode/* default */.Z.UP:
|
|
|
selectOffset(-1);
|
|
|
e.preventDefault();
|
|
|
break;
|
|
|
case KeyCode/* default */.Z.DOWN:
|
|
|
selectOffset(1);
|
|
|
e.preventDefault();
|
|
|
break;
|
|
|
case KeyCode/* default */.Z.ESC:
|
|
|
setOpen(false);
|
|
|
break;
|
|
|
case KeyCode/* default */.Z.SPACE:
|
|
|
case KeyCode/* default */.Z.ENTER:
|
|
|
if (selectedKey !== null) {
|
|
|
onTabClick(selectedKey, e);
|
|
|
}
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// ========================= Effect =========================
|
|
|
(0,_react_17_0_2_react.useEffect)(function () {
|
|
|
// We use query element here to avoid React strict warning
|
|
|
var ele = document.getElementById(selectedItemId);
|
|
|
if (ele && ele.scrollIntoView) {
|
|
|
ele.scrollIntoView(false);
|
|
|
}
|
|
|
}, [selectedKey]);
|
|
|
(0,_react_17_0_2_react.useEffect)(function () {
|
|
|
if (!open) {
|
|
|
setSelectedKey(null);
|
|
|
}
|
|
|
}, [open]);
|
|
|
|
|
|
// ========================= Render =========================
|
|
|
var moreStyle = (0,defineProperty/* default */.Z)({}, rtl ? 'marginRight' : 'marginLeft', tabBarGutter);
|
|
|
if (!tabs.length) {
|
|
|
moreStyle.visibility = 'hidden';
|
|
|
moreStyle.order = 1;
|
|
|
}
|
|
|
var overlayClassName = _classnames_2_5_1_classnames_default()((0,defineProperty/* default */.Z)({}, "".concat(dropdownPrefix, "-rtl"), rtl));
|
|
|
var moreNode = mobile ? null : /*#__PURE__*/_react_17_0_2_react.createElement(_rc_dropdown_4_1_0_rc_dropdown_es/* default */.Z, {
|
|
|
prefixCls: dropdownPrefix,
|
|
|
overlay: menu,
|
|
|
trigger: ['hover'],
|
|
|
visible: tabs.length ? open : false,
|
|
|
transitionName: moreTransitionName,
|
|
|
onVisibleChange: setOpen,
|
|
|
overlayClassName: _classnames_2_5_1_classnames_default()(overlayClassName, popupClassName),
|
|
|
mouseEnterDelay: 0.1,
|
|
|
mouseLeaveDelay: 0.1,
|
|
|
getPopupContainer: getPopupContainer
|
|
|
}, /*#__PURE__*/_react_17_0_2_react.createElement("button", {
|
|
|
type: "button",
|
|
|
className: "".concat(prefixCls, "-nav-more"),
|
|
|
style: moreStyle,
|
|
|
tabIndex: -1,
|
|
|
"aria-hidden": "true",
|
|
|
"aria-haspopup": "listbox",
|
|
|
"aria-controls": popupId,
|
|
|
id: "".concat(id, "-more"),
|
|
|
"aria-expanded": open,
|
|
|
onKeyDown: onKeyDown
|
|
|
}, moreIcon));
|
|
|
return /*#__PURE__*/_react_17_0_2_react.createElement("div", {
|
|
|
className: _classnames_2_5_1_classnames_default()("".concat(prefixCls, "-nav-operations"), className),
|
|
|
style: style,
|
|
|
ref: ref
|
|
|
}, moreNode, /*#__PURE__*/_react_17_0_2_react.createElement(TabNavList_AddButton, {
|
|
|
prefixCls: prefixCls,
|
|
|
locale: locale,
|
|
|
editable: editable
|
|
|
}));
|
|
|
});
|
|
|
/* harmony default export */ var TabNavList_OperationNode = (/*#__PURE__*/_react_17_0_2_react.memo(OperationNode, function (_, next) {
|
|
|
return (
|
|
|
// https://github.com/ant-design/ant-design/issues/32544
|
|
|
// We'd better remove syntactic sugar in `rc-menu` since this has perf issue
|
|
|
next.tabMoving
|
|
|
);
|
|
|
}));
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-tabs@12.14.1@rc-tabs/es/TabNavList/TabNode.js
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var TabNode = function TabNode(props) {
|
|
|
var _classNames;
|
|
|
var prefixCls = props.prefixCls,
|
|
|
id = props.id,
|
|
|
active = props.active,
|
|
|
_props$tab = props.tab,
|
|
|
key = _props$tab.key,
|
|
|
label = _props$tab.label,
|
|
|
disabled = _props$tab.disabled,
|
|
|
closeIcon = _props$tab.closeIcon,
|
|
|
icon = _props$tab.icon,
|
|
|
closable = props.closable,
|
|
|
renderWrapper = props.renderWrapper,
|
|
|
removeAriaLabel = props.removeAriaLabel,
|
|
|
editable = props.editable,
|
|
|
onClick = props.onClick,
|
|
|
onFocus = props.onFocus,
|
|
|
style = props.style;
|
|
|
var tabPrefix = "".concat(prefixCls, "-tab");
|
|
|
var removable = getRemovable(closable, closeIcon, editable, disabled);
|
|
|
function onInternalClick(e) {
|
|
|
if (disabled) {
|
|
|
return;
|
|
|
}
|
|
|
onClick(e);
|
|
|
}
|
|
|
function onRemoveTab(event) {
|
|
|
event.preventDefault();
|
|
|
event.stopPropagation();
|
|
|
editable.onEdit('remove', {
|
|
|
key: key,
|
|
|
event: event
|
|
|
});
|
|
|
}
|
|
|
var labelNode = _react_17_0_2_react.useMemo(function () {
|
|
|
return icon && typeof label === 'string' ? /*#__PURE__*/_react_17_0_2_react.createElement("span", null, label) : label;
|
|
|
}, [label, icon]);
|
|
|
var node = /*#__PURE__*/_react_17_0_2_react.createElement("div", {
|
|
|
key: key
|
|
|
// ref={ref}
|
|
|
,
|
|
|
"data-node-key": genDataNodeKey(key),
|
|
|
className: _classnames_2_5_1_classnames_default()(tabPrefix, (_classNames = {}, (0,defineProperty/* default */.Z)(_classNames, "".concat(tabPrefix, "-with-remove"), removable), (0,defineProperty/* default */.Z)(_classNames, "".concat(tabPrefix, "-active"), active), (0,defineProperty/* default */.Z)(_classNames, "".concat(tabPrefix, "-disabled"), disabled), _classNames)),
|
|
|
style: style,
|
|
|
onClick: onInternalClick
|
|
|
}, /*#__PURE__*/_react_17_0_2_react.createElement("div", {
|
|
|
role: "tab",
|
|
|
"aria-selected": active,
|
|
|
id: id && "".concat(id, "-tab-").concat(key),
|
|
|
className: "".concat(tabPrefix, "-btn"),
|
|
|
"aria-controls": id && "".concat(id, "-panel-").concat(key),
|
|
|
"aria-disabled": disabled,
|
|
|
tabIndex: disabled ? null : 0,
|
|
|
onClick: function onClick(e) {
|
|
|
e.stopPropagation();
|
|
|
onInternalClick(e);
|
|
|
},
|
|
|
onKeyDown: function onKeyDown(e) {
|
|
|
if ([KeyCode/* default */.Z.SPACE, KeyCode/* default */.Z.ENTER].includes(e.which)) {
|
|
|
e.preventDefault();
|
|
|
onInternalClick(e);
|
|
|
}
|
|
|
},
|
|
|
onFocus: onFocus
|
|
|
}, icon && /*#__PURE__*/_react_17_0_2_react.createElement("span", {
|
|
|
className: "".concat(tabPrefix, "-icon")
|
|
|
}, icon), label && labelNode), removable && /*#__PURE__*/_react_17_0_2_react.createElement("button", {
|
|
|
type: "button",
|
|
|
"aria-label": removeAriaLabel || 'remove',
|
|
|
tabIndex: 0,
|
|
|
className: "".concat(tabPrefix, "-remove"),
|
|
|
onClick: function onClick(e) {
|
|
|
e.stopPropagation();
|
|
|
onRemoveTab(e);
|
|
|
}
|
|
|
}, closeIcon || editable.removeIcon || '×'));
|
|
|
return renderWrapper ? renderWrapper(node) : node;
|
|
|
};
|
|
|
/* harmony default export */ var TabNavList_TabNode = (TabNode);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-tabs@12.14.1@rc-tabs/es/TabNavList/index.js
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var getTabSize = function getTabSize(tab, containerRect) {
|
|
|
// tabListRef
|
|
|
var offsetWidth = tab.offsetWidth,
|
|
|
offsetHeight = tab.offsetHeight,
|
|
|
offsetTop = tab.offsetTop,
|
|
|
offsetLeft = tab.offsetLeft;
|
|
|
var _tab$getBoundingClien = tab.getBoundingClientRect(),
|
|
|
width = _tab$getBoundingClien.width,
|
|
|
height = _tab$getBoundingClien.height,
|
|
|
x = _tab$getBoundingClien.x,
|
|
|
y = _tab$getBoundingClien.y;
|
|
|
|
|
|
// Use getBoundingClientRect to avoid decimal inaccuracy
|
|
|
if (Math.abs(width - offsetWidth) < 1) {
|
|
|
return [width, height, x - containerRect.x, y - containerRect.y];
|
|
|
}
|
|
|
return [offsetWidth, offsetHeight, offsetLeft, offsetTop];
|
|
|
};
|
|
|
var getSize = function getSize(refObj) {
|
|
|
var _ref = refObj.current || {},
|
|
|
_ref$offsetWidth = _ref.offsetWidth,
|
|
|
offsetWidth = _ref$offsetWidth === void 0 ? 0 : _ref$offsetWidth,
|
|
|
_ref$offsetHeight = _ref.offsetHeight,
|
|
|
offsetHeight = _ref$offsetHeight === void 0 ? 0 : _ref$offsetHeight;
|
|
|
|
|
|
// Use getBoundingClientRect to avoid decimal inaccuracy
|
|
|
if (refObj.current) {
|
|
|
var _refObj$current$getBo = refObj.current.getBoundingClientRect(),
|
|
|
width = _refObj$current$getBo.width,
|
|
|
height = _refObj$current$getBo.height;
|
|
|
if (Math.abs(width - offsetWidth) < 1) {
|
|
|
return [width, height];
|
|
|
}
|
|
|
}
|
|
|
return [offsetWidth, offsetHeight];
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
* Convert `SizeInfo` to unit value. Such as [123, 456] with `top` position get `123`
|
|
|
*/
|
|
|
var getUnitValue = function getUnitValue(size, tabPositionTopOrBottom) {
|
|
|
return size[tabPositionTopOrBottom ? 0 : 1];
|
|
|
};
|
|
|
var TabNavList = /*#__PURE__*/_react_17_0_2_react.forwardRef(function (props, ref) {
|
|
|
var _classNames;
|
|
|
var className = props.className,
|
|
|
style = props.style,
|
|
|
id = props.id,
|
|
|
animated = props.animated,
|
|
|
activeKey = props.activeKey,
|
|
|
rtl = props.rtl,
|
|
|
extra = props.extra,
|
|
|
editable = props.editable,
|
|
|
locale = props.locale,
|
|
|
tabPosition = props.tabPosition,
|
|
|
tabBarGutter = props.tabBarGutter,
|
|
|
children = props.children,
|
|
|
onTabClick = props.onTabClick,
|
|
|
onTabScroll = props.onTabScroll,
|
|
|
indicatorSize = props.indicatorSize;
|
|
|
var _React$useContext = _react_17_0_2_react.useContext(TabContext),
|
|
|
prefixCls = _React$useContext.prefixCls,
|
|
|
tabs = _React$useContext.tabs;
|
|
|
var containerRef = (0,_react_17_0_2_react.useRef)(null);
|
|
|
var extraLeftRef = (0,_react_17_0_2_react.useRef)(null);
|
|
|
var extraRightRef = (0,_react_17_0_2_react.useRef)(null);
|
|
|
var tabsWrapperRef = (0,_react_17_0_2_react.useRef)(null);
|
|
|
var tabListRef = (0,_react_17_0_2_react.useRef)(null);
|
|
|
var operationsRef = (0,_react_17_0_2_react.useRef)(null);
|
|
|
var innerAddButtonRef = (0,_react_17_0_2_react.useRef)(null);
|
|
|
var tabPositionTopOrBottom = tabPosition === 'top' || tabPosition === 'bottom';
|
|
|
var _useSyncState = useSyncState(0, function (next, prev) {
|
|
|
if (tabPositionTopOrBottom && onTabScroll) {
|
|
|
onTabScroll({
|
|
|
direction: next > prev ? 'left' : 'right'
|
|
|
});
|
|
|
}
|
|
|
}),
|
|
|
_useSyncState2 = (0,slicedToArray/* default */.Z)(_useSyncState, 2),
|
|
|
transformLeft = _useSyncState2[0],
|
|
|
setTransformLeft = _useSyncState2[1];
|
|
|
var _useSyncState3 = useSyncState(0, function (next, prev) {
|
|
|
if (!tabPositionTopOrBottom && onTabScroll) {
|
|
|
onTabScroll({
|
|
|
direction: next > prev ? 'top' : 'bottom'
|
|
|
});
|
|
|
}
|
|
|
}),
|
|
|
_useSyncState4 = (0,slicedToArray/* default */.Z)(_useSyncState3, 2),
|
|
|
transformTop = _useSyncState4[0],
|
|
|
setTransformTop = _useSyncState4[1];
|
|
|
var _useState = (0,_react_17_0_2_react.useState)([0, 0]),
|
|
|
_useState2 = (0,slicedToArray/* default */.Z)(_useState, 2),
|
|
|
containerExcludeExtraSize = _useState2[0],
|
|
|
setContainerExcludeExtraSize = _useState2[1];
|
|
|
var _useState3 = (0,_react_17_0_2_react.useState)([0, 0]),
|
|
|
_useState4 = (0,slicedToArray/* default */.Z)(_useState3, 2),
|
|
|
tabContentSize = _useState4[0],
|
|
|
setTabContentSize = _useState4[1];
|
|
|
var _useState5 = (0,_react_17_0_2_react.useState)([0, 0]),
|
|
|
_useState6 = (0,slicedToArray/* default */.Z)(_useState5, 2),
|
|
|
addSize = _useState6[0],
|
|
|
setAddSize = _useState6[1];
|
|
|
var _useState7 = (0,_react_17_0_2_react.useState)([0, 0]),
|
|
|
_useState8 = (0,slicedToArray/* default */.Z)(_useState7, 2),
|
|
|
operationSize = _useState8[0],
|
|
|
setOperationSize = _useState8[1];
|
|
|
var _useUpdateState = useUpdateState(new Map()),
|
|
|
_useUpdateState2 = (0,slicedToArray/* default */.Z)(_useUpdateState, 2),
|
|
|
tabSizes = _useUpdateState2[0],
|
|
|
setTabSizes = _useUpdateState2[1];
|
|
|
var tabOffsets = useOffsets(tabs, tabSizes, tabContentSize[0]);
|
|
|
|
|
|
// ========================== Unit =========================
|
|
|
var containerExcludeExtraSizeValue = getUnitValue(containerExcludeExtraSize, tabPositionTopOrBottom);
|
|
|
var tabContentSizeValue = getUnitValue(tabContentSize, tabPositionTopOrBottom);
|
|
|
var addSizeValue = getUnitValue(addSize, tabPositionTopOrBottom);
|
|
|
var operationSizeValue = getUnitValue(operationSize, tabPositionTopOrBottom);
|
|
|
var needScroll = containerExcludeExtraSizeValue < tabContentSizeValue + addSizeValue;
|
|
|
var visibleTabContentValue = needScroll ? containerExcludeExtraSizeValue - operationSizeValue : containerExcludeExtraSizeValue - addSizeValue;
|
|
|
|
|
|
// ========================== Util =========================
|
|
|
var operationsHiddenClassName = "".concat(prefixCls, "-nav-operations-hidden");
|
|
|
var transformMin = 0;
|
|
|
var transformMax = 0;
|
|
|
if (!tabPositionTopOrBottom) {
|
|
|
transformMin = Math.min(0, visibleTabContentValue - tabContentSizeValue);
|
|
|
transformMax = 0;
|
|
|
} else if (rtl) {
|
|
|
transformMin = 0;
|
|
|
transformMax = Math.max(0, tabContentSizeValue - visibleTabContentValue);
|
|
|
} else {
|
|
|
transformMin = Math.min(0, visibleTabContentValue - tabContentSizeValue);
|
|
|
transformMax = 0;
|
|
|
}
|
|
|
function alignInRange(value) {
|
|
|
if (value < transformMin) {
|
|
|
return transformMin;
|
|
|
}
|
|
|
if (value > transformMax) {
|
|
|
return transformMax;
|
|
|
}
|
|
|
return value;
|
|
|
}
|
|
|
|
|
|
// ========================= Mobile ========================
|
|
|
var touchMovingRef = (0,_react_17_0_2_react.useRef)(null);
|
|
|
var _useState9 = (0,_react_17_0_2_react.useState)(),
|
|
|
_useState10 = (0,slicedToArray/* default */.Z)(_useState9, 2),
|
|
|
lockAnimation = _useState10[0],
|
|
|
setLockAnimation = _useState10[1];
|
|
|
function doLockAnimation() {
|
|
|
setLockAnimation(Date.now());
|
|
|
}
|
|
|
function clearTouchMoving() {
|
|
|
if (touchMovingRef.current) {
|
|
|
clearTimeout(touchMovingRef.current);
|
|
|
}
|
|
|
}
|
|
|
useTouchMove(tabsWrapperRef, function (offsetX, offsetY) {
|
|
|
function doMove(setState, offset) {
|
|
|
setState(function (value) {
|
|
|
var newValue = alignInRange(value + offset);
|
|
|
return newValue;
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// Skip scroll if place is enough
|
|
|
if (!needScroll) {
|
|
|
return false;
|
|
|
}
|
|
|
if (tabPositionTopOrBottom) {
|
|
|
doMove(setTransformLeft, offsetX);
|
|
|
} else {
|
|
|
doMove(setTransformTop, offsetY);
|
|
|
}
|
|
|
clearTouchMoving();
|
|
|
doLockAnimation();
|
|
|
return true;
|
|
|
});
|
|
|
(0,_react_17_0_2_react.useEffect)(function () {
|
|
|
clearTouchMoving();
|
|
|
if (lockAnimation) {
|
|
|
touchMovingRef.current = setTimeout(function () {
|
|
|
setLockAnimation(0);
|
|
|
}, 100);
|
|
|
}
|
|
|
return clearTouchMoving;
|
|
|
}, [lockAnimation]);
|
|
|
|
|
|
// ===================== Visible Range =====================
|
|
|
// Render tab node & collect tab offset
|
|
|
var _useVisibleRange = useVisibleRange(tabOffsets,
|
|
|
// Container
|
|
|
visibleTabContentValue,
|
|
|
// Transform
|
|
|
tabPositionTopOrBottom ? transformLeft : transformTop,
|
|
|
// Tabs
|
|
|
tabContentSizeValue,
|
|
|
// Add
|
|
|
addSizeValue,
|
|
|
// Operation
|
|
|
operationSizeValue, (0,objectSpread2/* default */.Z)((0,objectSpread2/* default */.Z)({}, props), {}, {
|
|
|
tabs: tabs
|
|
|
})),
|
|
|
_useVisibleRange2 = (0,slicedToArray/* default */.Z)(_useVisibleRange, 2),
|
|
|
visibleStart = _useVisibleRange2[0],
|
|
|
visibleEnd = _useVisibleRange2[1];
|
|
|
|
|
|
// ========================= Scroll ========================
|
|
|
var scrollToTab = (0,useEvent/* default */.Z)(function () {
|
|
|
var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : activeKey;
|
|
|
var tabOffset = tabOffsets.get(key) || {
|
|
|
width: 0,
|
|
|
height: 0,
|
|
|
left: 0,
|
|
|
right: 0,
|
|
|
top: 0
|
|
|
};
|
|
|
if (tabPositionTopOrBottom) {
|
|
|
// ============ Align with top & bottom ============
|
|
|
var newTransform = transformLeft;
|
|
|
|
|
|
// RTL
|
|
|
if (rtl) {
|
|
|
if (tabOffset.right < transformLeft) {
|
|
|
newTransform = tabOffset.right;
|
|
|
} else if (tabOffset.right + tabOffset.width > transformLeft + visibleTabContentValue) {
|
|
|
newTransform = tabOffset.right + tabOffset.width - visibleTabContentValue;
|
|
|
}
|
|
|
}
|
|
|
// LTR
|
|
|
else if (tabOffset.left < -transformLeft) {
|
|
|
newTransform = -tabOffset.left;
|
|
|
} else if (tabOffset.left + tabOffset.width > -transformLeft + visibleTabContentValue) {
|
|
|
newTransform = -(tabOffset.left + tabOffset.width - visibleTabContentValue);
|
|
|
}
|
|
|
setTransformTop(0);
|
|
|
setTransformLeft(alignInRange(newTransform));
|
|
|
} else {
|
|
|
// ============ Align with left & right ============
|
|
|
var _newTransform = transformTop;
|
|
|
if (tabOffset.top < -transformTop) {
|
|
|
_newTransform = -tabOffset.top;
|
|
|
} else if (tabOffset.top + tabOffset.height > -transformTop + visibleTabContentValue) {
|
|
|
_newTransform = -(tabOffset.top + tabOffset.height - visibleTabContentValue);
|
|
|
}
|
|
|
setTransformLeft(0);
|
|
|
setTransformTop(alignInRange(_newTransform));
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// ========================== Tab ==========================
|
|
|
var tabNodeStyle = {};
|
|
|
if (tabPosition === 'top' || tabPosition === 'bottom') {
|
|
|
tabNodeStyle[rtl ? 'marginRight' : 'marginLeft'] = tabBarGutter;
|
|
|
} else {
|
|
|
tabNodeStyle.marginTop = tabBarGutter;
|
|
|
}
|
|
|
var tabNodes = tabs.map(function (tab, i) {
|
|
|
var key = tab.key;
|
|
|
return /*#__PURE__*/_react_17_0_2_react.createElement(TabNavList_TabNode, {
|
|
|
id: id,
|
|
|
prefixCls: prefixCls,
|
|
|
key: key,
|
|
|
tab: tab
|
|
|
/* first node should not have margin left */,
|
|
|
style: i === 0 ? undefined : tabNodeStyle,
|
|
|
closable: tab.closable,
|
|
|
editable: editable,
|
|
|
active: key === activeKey,
|
|
|
renderWrapper: children,
|
|
|
removeAriaLabel: locale === null || locale === void 0 ? void 0 : locale.removeAriaLabel,
|
|
|
onClick: function onClick(e) {
|
|
|
onTabClick(key, e);
|
|
|
},
|
|
|
onFocus: function onFocus() {
|
|
|
scrollToTab(key);
|
|
|
doLockAnimation();
|
|
|
if (!tabsWrapperRef.current) {
|
|
|
return;
|
|
|
}
|
|
|
// Focus element will make scrollLeft change which we should reset back
|
|
|
if (!rtl) {
|
|
|
tabsWrapperRef.current.scrollLeft = 0;
|
|
|
}
|
|
|
tabsWrapperRef.current.scrollTop = 0;
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// Update buttons records
|
|
|
var updateTabSizes = function updateTabSizes() {
|
|
|
return setTabSizes(function () {
|
|
|
var _tabListRef$current;
|
|
|
var newSizes = new Map();
|
|
|
var listRect = (_tabListRef$current = tabListRef.current) === null || _tabListRef$current === void 0 ? void 0 : _tabListRef$current.getBoundingClientRect();
|
|
|
tabs.forEach(function (_ref2) {
|
|
|
var _tabListRef$current2;
|
|
|
var key = _ref2.key;
|
|
|
var btnNode = (_tabListRef$current2 = tabListRef.current) === null || _tabListRef$current2 === void 0 ? void 0 : _tabListRef$current2.querySelector("[data-node-key=\"".concat(genDataNodeKey(key), "\"]"));
|
|
|
if (btnNode) {
|
|
|
var _getTabSize = getTabSize(btnNode, listRect),
|
|
|
_getTabSize2 = (0,slicedToArray/* default */.Z)(_getTabSize, 4),
|
|
|
width = _getTabSize2[0],
|
|
|
height = _getTabSize2[1],
|
|
|
left = _getTabSize2[2],
|
|
|
top = _getTabSize2[3];
|
|
|
newSizes.set(key, {
|
|
|
width: width,
|
|
|
height: height,
|
|
|
left: left,
|
|
|
top: top
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
return newSizes;
|
|
|
});
|
|
|
};
|
|
|
(0,_react_17_0_2_react.useEffect)(function () {
|
|
|
updateTabSizes();
|
|
|
}, [tabs.map(function (tab) {
|
|
|
return tab.key;
|
|
|
}).join('_')]);
|
|
|
var onListHolderResize = useUpdate(function () {
|
|
|
// Update wrapper records
|
|
|
var containerSize = getSize(containerRef);
|
|
|
var extraLeftSize = getSize(extraLeftRef);
|
|
|
var extraRightSize = getSize(extraRightRef);
|
|
|
setContainerExcludeExtraSize([containerSize[0] - extraLeftSize[0] - extraRightSize[0], containerSize[1] - extraLeftSize[1] - extraRightSize[1]]);
|
|
|
var newAddSize = getSize(innerAddButtonRef);
|
|
|
setAddSize(newAddSize);
|
|
|
var newOperationSize = getSize(operationsRef);
|
|
|
setOperationSize(newOperationSize);
|
|
|
|
|
|
// Which includes add button size
|
|
|
var tabContentFullSize = getSize(tabListRef);
|
|
|
setTabContentSize([tabContentFullSize[0] - newAddSize[0], tabContentFullSize[1] - newAddSize[1]]);
|
|
|
|
|
|
// Update buttons records
|
|
|
updateTabSizes();
|
|
|
});
|
|
|
|
|
|
// ======================== Dropdown =======================
|
|
|
var startHiddenTabs = tabs.slice(0, visibleStart);
|
|
|
var endHiddenTabs = tabs.slice(visibleEnd + 1);
|
|
|
var hiddenTabs = [].concat((0,toConsumableArray/* default */.Z)(startHiddenTabs), (0,toConsumableArray/* default */.Z)(endHiddenTabs));
|
|
|
|
|
|
// =================== Link & Operations ===================
|
|
|
var activeTabOffset = tabOffsets.get(activeKey);
|
|
|
var _useIndicator = hooks_useIndicator({
|
|
|
activeTabOffset: activeTabOffset,
|
|
|
horizontal: tabPositionTopOrBottom,
|
|
|
rtl: rtl,
|
|
|
indicatorSize: indicatorSize
|
|
|
}),
|
|
|
indicatorStyle = _useIndicator.style;
|
|
|
|
|
|
// ========================= Effect ========================
|
|
|
(0,_react_17_0_2_react.useEffect)(function () {
|
|
|
scrollToTab();
|
|
|
// eslint-disable-next-line
|
|
|
}, [activeKey, transformMin, transformMax, stringify(activeTabOffset), stringify(tabOffsets), tabPositionTopOrBottom]);
|
|
|
|
|
|
// Should recalculate when rtl changed
|
|
|
(0,_react_17_0_2_react.useEffect)(function () {
|
|
|
onListHolderResize();
|
|
|
// eslint-disable-next-line
|
|
|
}, [rtl]);
|
|
|
|
|
|
// ========================= Render ========================
|
|
|
var hasDropdown = !!hiddenTabs.length;
|
|
|
var wrapPrefix = "".concat(prefixCls, "-nav-wrap");
|
|
|
var pingLeft;
|
|
|
var pingRight;
|
|
|
var pingTop;
|
|
|
var pingBottom;
|
|
|
if (tabPositionTopOrBottom) {
|
|
|
if (rtl) {
|
|
|
pingRight = transformLeft > 0;
|
|
|
pingLeft = transformLeft !== transformMax;
|
|
|
} else {
|
|
|
pingLeft = transformLeft < 0;
|
|
|
pingRight = transformLeft !== transformMin;
|
|
|
}
|
|
|
} else {
|
|
|
pingTop = transformTop < 0;
|
|
|
pingBottom = transformTop !== transformMin;
|
|
|
}
|
|
|
return /*#__PURE__*/_react_17_0_2_react.createElement(es/* default */.Z, {
|
|
|
onResize: onListHolderResize
|
|
|
}, /*#__PURE__*/_react_17_0_2_react.createElement("div", {
|
|
|
ref: (0,es_ref/* useComposeRef */.x1)(ref, containerRef),
|
|
|
role: "tablist",
|
|
|
className: _classnames_2_5_1_classnames_default()("".concat(prefixCls, "-nav"), className),
|
|
|
style: style,
|
|
|
onKeyDown: function onKeyDown() {
|
|
|
// No need animation when use keyboard
|
|
|
doLockAnimation();
|
|
|
}
|
|
|
}, /*#__PURE__*/_react_17_0_2_react.createElement(TabNavList_ExtraContent, {
|
|
|
ref: extraLeftRef,
|
|
|
position: "left",
|
|
|
extra: extra,
|
|
|
prefixCls: prefixCls
|
|
|
}), /*#__PURE__*/_react_17_0_2_react.createElement(es/* default */.Z, {
|
|
|
onResize: onListHolderResize
|
|
|
}, /*#__PURE__*/_react_17_0_2_react.createElement("div", {
|
|
|
className: _classnames_2_5_1_classnames_default()(wrapPrefix, (_classNames = {}, (0,defineProperty/* default */.Z)(_classNames, "".concat(wrapPrefix, "-ping-left"), pingLeft), (0,defineProperty/* default */.Z)(_classNames, "".concat(wrapPrefix, "-ping-right"), pingRight), (0,defineProperty/* default */.Z)(_classNames, "".concat(wrapPrefix, "-ping-top"), pingTop), (0,defineProperty/* default */.Z)(_classNames, "".concat(wrapPrefix, "-ping-bottom"), pingBottom), _classNames)),
|
|
|
ref: tabsWrapperRef
|
|
|
}, /*#__PURE__*/_react_17_0_2_react.createElement(es/* default */.Z, {
|
|
|
onResize: onListHolderResize
|
|
|
}, /*#__PURE__*/_react_17_0_2_react.createElement("div", {
|
|
|
ref: tabListRef,
|
|
|
className: "".concat(prefixCls, "-nav-list"),
|
|
|
style: {
|
|
|
transform: "translate(".concat(transformLeft, "px, ").concat(transformTop, "px)"),
|
|
|
transition: lockAnimation ? 'none' : undefined
|
|
|
}
|
|
|
}, tabNodes, /*#__PURE__*/_react_17_0_2_react.createElement(TabNavList_AddButton, {
|
|
|
ref: innerAddButtonRef,
|
|
|
prefixCls: prefixCls,
|
|
|
locale: locale,
|
|
|
editable: editable,
|
|
|
style: (0,objectSpread2/* default */.Z)((0,objectSpread2/* default */.Z)({}, tabNodes.length === 0 ? undefined : tabNodeStyle), {}, {
|
|
|
visibility: hasDropdown ? 'hidden' : null
|
|
|
})
|
|
|
}), /*#__PURE__*/_react_17_0_2_react.createElement("div", {
|
|
|
className: _classnames_2_5_1_classnames_default()("".concat(prefixCls, "-ink-bar"), (0,defineProperty/* default */.Z)({}, "".concat(prefixCls, "-ink-bar-animated"), animated.inkBar)),
|
|
|
style: indicatorStyle
|
|
|
}))))), /*#__PURE__*/_react_17_0_2_react.createElement(TabNavList_OperationNode, (0,esm_extends/* default */.Z)({}, props, {
|
|
|
removeAriaLabel: locale === null || locale === void 0 ? void 0 : locale.removeAriaLabel,
|
|
|
ref: operationsRef,
|
|
|
prefixCls: prefixCls,
|
|
|
tabs: hiddenTabs,
|
|
|
className: !hasDropdown && operationsHiddenClassName,
|
|
|
tabMoving: !!lockAnimation
|
|
|
})), /*#__PURE__*/_react_17_0_2_react.createElement(TabNavList_ExtraContent, {
|
|
|
ref: extraRightRef,
|
|
|
position: "right",
|
|
|
extra: extra,
|
|
|
prefixCls: prefixCls
|
|
|
})));
|
|
|
/* eslint-enable */
|
|
|
});
|
|
|
|
|
|
/* harmony default export */ var es_TabNavList = (TabNavList);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-tabs@12.14.1@rc-tabs/es/TabPanelList/TabPane.js
|
|
|
|
|
|
|
|
|
var TabPane = /*#__PURE__*/_react_17_0_2_react.forwardRef(function (props, ref) {
|
|
|
var prefixCls = props.prefixCls,
|
|
|
className = props.className,
|
|
|
style = props.style,
|
|
|
id = props.id,
|
|
|
active = props.active,
|
|
|
tabKey = props.tabKey,
|
|
|
children = props.children;
|
|
|
return /*#__PURE__*/_react_17_0_2_react.createElement("div", {
|
|
|
id: id && "".concat(id, "-panel-").concat(tabKey),
|
|
|
role: "tabpanel",
|
|
|
tabIndex: active ? 0 : -1,
|
|
|
"aria-labelledby": id && "".concat(id, "-tab-").concat(tabKey),
|
|
|
"aria-hidden": !active,
|
|
|
style: style,
|
|
|
className: _classnames_2_5_1_classnames_default()(prefixCls, active && "".concat(prefixCls, "-active"), className),
|
|
|
ref: ref
|
|
|
}, children);
|
|
|
});
|
|
|
if (false) {}
|
|
|
/* harmony default export */ var TabPanelList_TabPane = (TabPane);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-tabs@12.14.1@rc-tabs/es/TabNavList/Wrapper.js
|
|
|
|
|
|
|
|
|
|
|
|
var _excluded = ["renderTabBar"],
|
|
|
_excluded2 = ["label", "key"];
|
|
|
// zombieJ: To compatible with `renderTabBar` usage.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// We have to create a TabNavList components.
|
|
|
var TabNavListWrapper = function TabNavListWrapper(_ref) {
|
|
|
var renderTabBar = _ref.renderTabBar,
|
|
|
restProps = (0,objectWithoutProperties/* default */.Z)(_ref, _excluded);
|
|
|
var _React$useContext = _react_17_0_2_react.useContext(TabContext),
|
|
|
tabs = _React$useContext.tabs;
|
|
|
if (renderTabBar) {
|
|
|
var tabNavBarProps = (0,objectSpread2/* default */.Z)((0,objectSpread2/* default */.Z)({}, restProps), {}, {
|
|
|
// Legacy support. We do not use this actually
|
|
|
panes: tabs.map(function (_ref2) {
|
|
|
var label = _ref2.label,
|
|
|
key = _ref2.key,
|
|
|
restTabProps = (0,objectWithoutProperties/* default */.Z)(_ref2, _excluded2);
|
|
|
return /*#__PURE__*/_react_17_0_2_react.createElement(TabPanelList_TabPane, (0,esm_extends/* default */.Z)({
|
|
|
tab: label,
|
|
|
key: key,
|
|
|
tabKey: key
|
|
|
}, restTabProps));
|
|
|
})
|
|
|
});
|
|
|
return renderTabBar(tabNavBarProps, es_TabNavList);
|
|
|
}
|
|
|
return /*#__PURE__*/_react_17_0_2_react.createElement(es_TabNavList, restProps);
|
|
|
};
|
|
|
if (false) {}
|
|
|
/* harmony default export */ var Wrapper = (TabNavListWrapper);
|
|
|
// EXTERNAL MODULE: ./node_modules/_rc-motion@2.9.0@rc-motion/es/index.js + 12 modules
|
|
|
var _rc_motion_2_9_0_rc_motion_es = __webpack_require__(44516);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-tabs@12.14.1@rc-tabs/es/TabPanelList/index.js
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var TabPanelList_excluded = ["key", "forceRender", "style", "className", "destroyInactiveTabPane"];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var TabPanelList = function TabPanelList(props) {
|
|
|
var id = props.id,
|
|
|
activeKey = props.activeKey,
|
|
|
animated = props.animated,
|
|
|
tabPosition = props.tabPosition,
|
|
|
destroyInactiveTabPane = props.destroyInactiveTabPane;
|
|
|
var _React$useContext = _react_17_0_2_react.useContext(TabContext),
|
|
|
prefixCls = _React$useContext.prefixCls,
|
|
|
tabs = _React$useContext.tabs;
|
|
|
var tabPaneAnimated = animated.tabPane;
|
|
|
var tabPanePrefixCls = "".concat(prefixCls, "-tabpane");
|
|
|
return /*#__PURE__*/_react_17_0_2_react.createElement("div", {
|
|
|
className: _classnames_2_5_1_classnames_default()("".concat(prefixCls, "-content-holder"))
|
|
|
}, /*#__PURE__*/_react_17_0_2_react.createElement("div", {
|
|
|
className: _classnames_2_5_1_classnames_default()("".concat(prefixCls, "-content"), "".concat(prefixCls, "-content-").concat(tabPosition), (0,defineProperty/* default */.Z)({}, "".concat(prefixCls, "-content-animated"), tabPaneAnimated))
|
|
|
}, tabs.map(function (item) {
|
|
|
var key = item.key,
|
|
|
forceRender = item.forceRender,
|
|
|
paneStyle = item.style,
|
|
|
paneClassName = item.className,
|
|
|
itemDestroyInactiveTabPane = item.destroyInactiveTabPane,
|
|
|
restTabProps = (0,objectWithoutProperties/* default */.Z)(item, TabPanelList_excluded);
|
|
|
var active = key === activeKey;
|
|
|
return /*#__PURE__*/_react_17_0_2_react.createElement(_rc_motion_2_9_0_rc_motion_es["default"], (0,esm_extends/* default */.Z)({
|
|
|
key: key,
|
|
|
visible: active,
|
|
|
forceRender: forceRender,
|
|
|
removeOnLeave: !!(destroyInactiveTabPane || itemDestroyInactiveTabPane),
|
|
|
leavedClassName: "".concat(tabPanePrefixCls, "-hidden")
|
|
|
}, animated.tabPaneMotion), function (_ref, ref) {
|
|
|
var motionStyle = _ref.style,
|
|
|
motionClassName = _ref.className;
|
|
|
return /*#__PURE__*/_react_17_0_2_react.createElement(TabPanelList_TabPane, (0,esm_extends/* default */.Z)({}, restTabProps, {
|
|
|
prefixCls: tabPanePrefixCls,
|
|
|
id: id,
|
|
|
tabKey: key,
|
|
|
animated: tabPaneAnimated,
|
|
|
active: active,
|
|
|
style: (0,objectSpread2/* default */.Z)((0,objectSpread2/* default */.Z)({}, paneStyle), motionStyle),
|
|
|
className: _classnames_2_5_1_classnames_default()(paneClassName, motionClassName),
|
|
|
ref: ref
|
|
|
}));
|
|
|
});
|
|
|
})));
|
|
|
};
|
|
|
/* harmony default export */ var es_TabPanelList = (TabPanelList);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-tabs@12.14.1@rc-tabs/es/Tabs.js
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var Tabs_excluded = ["id", "prefixCls", "className", "items", "direction", "activeKey", "defaultActiveKey", "editable", "animated", "tabPosition", "tabBarGutter", "tabBarStyle", "tabBarExtraContent", "locale", "moreIcon", "moreTransitionName", "destroyInactiveTabPane", "renderTabBar", "onChange", "onTabClick", "onTabScroll", "getPopupContainer", "popupClassName", "indicatorSize"];
|
|
|
// Accessibility https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
* Should added antd:
|
|
|
* - type
|
|
|
*
|
|
|
* Removed:
|
|
|
* - onNextClick
|
|
|
* - onPrevClick
|
|
|
* - keyboard
|
|
|
*/
|
|
|
|
|
|
// Used for accessibility
|
|
|
var uuid = 0;
|
|
|
var Tabs = /*#__PURE__*/_react_17_0_2_react.forwardRef(function (props, ref) {
|
|
|
var _classNames;
|
|
|
var id = props.id,
|
|
|
_props$prefixCls = props.prefixCls,
|
|
|
prefixCls = _props$prefixCls === void 0 ? 'rc-tabs' : _props$prefixCls,
|
|
|
className = props.className,
|
|
|
items = props.items,
|
|
|
direction = props.direction,
|
|
|
activeKey = props.activeKey,
|
|
|
defaultActiveKey = props.defaultActiveKey,
|
|
|
editable = props.editable,
|
|
|
animated = props.animated,
|
|
|
_props$tabPosition = props.tabPosition,
|
|
|
tabPosition = _props$tabPosition === void 0 ? 'top' : _props$tabPosition,
|
|
|
tabBarGutter = props.tabBarGutter,
|
|
|
tabBarStyle = props.tabBarStyle,
|
|
|
tabBarExtraContent = props.tabBarExtraContent,
|
|
|
locale = props.locale,
|
|
|
moreIcon = props.moreIcon,
|
|
|
moreTransitionName = props.moreTransitionName,
|
|
|
destroyInactiveTabPane = props.destroyInactiveTabPane,
|
|
|
renderTabBar = props.renderTabBar,
|
|
|
onChange = props.onChange,
|
|
|
onTabClick = props.onTabClick,
|
|
|
onTabScroll = props.onTabScroll,
|
|
|
getPopupContainer = props.getPopupContainer,
|
|
|
popupClassName = props.popupClassName,
|
|
|
indicatorSize = props.indicatorSize,
|
|
|
restProps = (0,objectWithoutProperties/* default */.Z)(props, Tabs_excluded);
|
|
|
var tabs = _react_17_0_2_react.useMemo(function () {
|
|
|
return (items || []).filter(function (item) {
|
|
|
return item && (0,esm_typeof/* default */.Z)(item) === 'object' && 'key' in item;
|
|
|
});
|
|
|
}, [items]);
|
|
|
var rtl = direction === 'rtl';
|
|
|
var mergedAnimated = useAnimateConfig(animated);
|
|
|
|
|
|
// ======================== Mobile ========================
|
|
|
var _useState = (0,_react_17_0_2_react.useState)(false),
|
|
|
_useState2 = (0,slicedToArray/* default */.Z)(_useState, 2),
|
|
|
mobile = _useState2[0],
|
|
|
setMobile = _useState2[1];
|
|
|
(0,_react_17_0_2_react.useEffect)(function () {
|
|
|
// Only update on the client side
|
|
|
setMobile((0,isMobile/* default */.Z)());
|
|
|
}, []);
|
|
|
|
|
|
// ====================== Active Key ======================
|
|
|
var _useMergedState = (0,useMergedState/* default */.Z)(function () {
|
|
|
var _tabs$;
|
|
|
return (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.key;
|
|
|
}, {
|
|
|
value: activeKey,
|
|
|
defaultValue: defaultActiveKey
|
|
|
}),
|
|
|
_useMergedState2 = (0,slicedToArray/* default */.Z)(_useMergedState, 2),
|
|
|
mergedActiveKey = _useMergedState2[0],
|
|
|
setMergedActiveKey = _useMergedState2[1];
|
|
|
var _useState3 = (0,_react_17_0_2_react.useState)(function () {
|
|
|
return tabs.findIndex(function (tab) {
|
|
|
return tab.key === mergedActiveKey;
|
|
|
});
|
|
|
}),
|
|
|
_useState4 = (0,slicedToArray/* default */.Z)(_useState3, 2),
|
|
|
activeIndex = _useState4[0],
|
|
|
setActiveIndex = _useState4[1];
|
|
|
|
|
|
// Reset active key if not exist anymore
|
|
|
(0,_react_17_0_2_react.useEffect)(function () {
|
|
|
var newActiveIndex = tabs.findIndex(function (tab) {
|
|
|
return tab.key === mergedActiveKey;
|
|
|
});
|
|
|
if (newActiveIndex === -1) {
|
|
|
var _tabs$newActiveIndex;
|
|
|
newActiveIndex = Math.max(0, Math.min(activeIndex, tabs.length - 1));
|
|
|
setMergedActiveKey((_tabs$newActiveIndex = tabs[newActiveIndex]) === null || _tabs$newActiveIndex === void 0 ? void 0 : _tabs$newActiveIndex.key);
|
|
|
}
|
|
|
setActiveIndex(newActiveIndex);
|
|
|
}, [tabs.map(function (tab) {
|
|
|
return tab.key;
|
|
|
}).join('_'), mergedActiveKey, activeIndex]);
|
|
|
|
|
|
// ===================== Accessibility ====================
|
|
|
var _useMergedState3 = (0,useMergedState/* default */.Z)(null, {
|
|
|
value: id
|
|
|
}),
|
|
|
_useMergedState4 = (0,slicedToArray/* default */.Z)(_useMergedState3, 2),
|
|
|
mergedId = _useMergedState4[0],
|
|
|
setMergedId = _useMergedState4[1];
|
|
|
|
|
|
// Async generate id to avoid ssr mapping failed
|
|
|
(0,_react_17_0_2_react.useEffect)(function () {
|
|
|
if (!id) {
|
|
|
setMergedId("rc-tabs-".concat( false ? 0 : uuid));
|
|
|
uuid += 1;
|
|
|
}
|
|
|
}, []);
|
|
|
|
|
|
// ======================== Events ========================
|
|
|
function onInternalTabClick(key, e) {
|
|
|
onTabClick === null || onTabClick === void 0 || onTabClick(key, e);
|
|
|
var isActiveChanged = key !== mergedActiveKey;
|
|
|
setMergedActiveKey(key);
|
|
|
if (isActiveChanged) {
|
|
|
onChange === null || onChange === void 0 || onChange(key);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// ======================== Render ========================
|
|
|
var sharedProps = {
|
|
|
id: mergedId,
|
|
|
activeKey: mergedActiveKey,
|
|
|
animated: mergedAnimated,
|
|
|
tabPosition: tabPosition,
|
|
|
rtl: rtl,
|
|
|
mobile: mobile
|
|
|
};
|
|
|
var tabNavBarProps = (0,objectSpread2/* default */.Z)((0,objectSpread2/* default */.Z)({}, sharedProps), {}, {
|
|
|
editable: editable,
|
|
|
locale: locale,
|
|
|
moreIcon: moreIcon,
|
|
|
moreTransitionName: moreTransitionName,
|
|
|
tabBarGutter: tabBarGutter,
|
|
|
onTabClick: onInternalTabClick,
|
|
|
onTabScroll: onTabScroll,
|
|
|
extra: tabBarExtraContent,
|
|
|
style: tabBarStyle,
|
|
|
panes: null,
|
|
|
getPopupContainer: getPopupContainer,
|
|
|
popupClassName: popupClassName,
|
|
|
indicatorSize: indicatorSize
|
|
|
});
|
|
|
return /*#__PURE__*/_react_17_0_2_react.createElement(TabContext.Provider, {
|
|
|
value: {
|
|
|
tabs: tabs,
|
|
|
prefixCls: prefixCls
|
|
|
}
|
|
|
}, /*#__PURE__*/_react_17_0_2_react.createElement("div", (0,esm_extends/* default */.Z)({
|
|
|
ref: ref,
|
|
|
id: id,
|
|
|
className: _classnames_2_5_1_classnames_default()(prefixCls, "".concat(prefixCls, "-").concat(tabPosition), (_classNames = {}, (0,defineProperty/* default */.Z)(_classNames, "".concat(prefixCls, "-mobile"), mobile), (0,defineProperty/* default */.Z)(_classNames, "".concat(prefixCls, "-editable"), editable), (0,defineProperty/* default */.Z)(_classNames, "".concat(prefixCls, "-rtl"), rtl), _classNames), className)
|
|
|
}, restProps), /*#__PURE__*/_react_17_0_2_react.createElement(Wrapper, (0,esm_extends/* default */.Z)({}, tabNavBarProps, {
|
|
|
renderTabBar: renderTabBar
|
|
|
})), /*#__PURE__*/_react_17_0_2_react.createElement(es_TabPanelList, (0,esm_extends/* default */.Z)({
|
|
|
destroyInactiveTabPane: destroyInactiveTabPane
|
|
|
}, sharedProps, {
|
|
|
animated: mergedAnimated
|
|
|
}))));
|
|
|
});
|
|
|
if (false) {}
|
|
|
/* harmony default export */ var es_Tabs = (Tabs);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-tabs@12.14.1@rc-tabs/es/index.js
|
|
|
|
|
|
/* harmony default export */ var _rc_tabs_12_14_1_rc_tabs_es = (es_Tabs);
|
|
|
// EXTERNAL MODULE: ./node_modules/_antd@5.12.8@antd/es/config-provider/context.js
|
|
|
var context = __webpack_require__(70330);
|
|
|
// EXTERNAL MODULE: ./node_modules/_antd@5.12.8@antd/es/config-provider/hooks/useSize.js
|
|
|
var useSize = __webpack_require__(10261);
|
|
|
// EXTERNAL MODULE: ./node_modules/_antd@5.12.8@antd/es/_util/motion.js
|
|
|
var motion = __webpack_require__(3);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_antd@5.12.8@antd/es/tabs/hooks/useAnimateConfig.js
|
|
|
|
|
|
const useAnimateConfig_motion = {
|
|
|
motionAppear: false,
|
|
|
motionEnter: true,
|
|
|
motionLeave: true
|
|
|
};
|
|
|
function useAnimateConfig_useAnimateConfig(prefixCls) {
|
|
|
let animated = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
|
|
inkBar: true,
|
|
|
tabPane: false
|
|
|
};
|
|
|
let mergedAnimated;
|
|
|
if (animated === false) {
|
|
|
mergedAnimated = {
|
|
|
inkBar: false,
|
|
|
tabPane: false
|
|
|
};
|
|
|
} else if (animated === true) {
|
|
|
mergedAnimated = {
|
|
|
inkBar: true,
|
|
|
tabPane: true
|
|
|
};
|
|
|
} else {
|
|
|
mergedAnimated = Object.assign({
|
|
|
inkBar: true
|
|
|
}, typeof animated === 'object' ? animated : {});
|
|
|
}
|
|
|
if (mergedAnimated.tabPane) {
|
|
|
mergedAnimated.tabPaneMotion = Object.assign(Object.assign({}, useAnimateConfig_motion), {
|
|
|
motionName: (0,motion/* getTransitionName */.m)(prefixCls, 'switch')
|
|
|
});
|
|
|
}
|
|
|
return mergedAnimated;
|
|
|
}
|
|
|
// EXTERNAL MODULE: ./node_modules/_rc-util@5.38.1@rc-util/es/Children/toArray.js
|
|
|
var toArray = __webpack_require__(45659);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_antd@5.12.8@antd/es/tabs/hooks/useLegacyItems.js
|
|
|
var __rest = undefined && undefined.__rest || function (s, e) {
|
|
|
var t = {};
|
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
|
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
|
}
|
|
|
return t;
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
function filter(items) {
|
|
|
return items.filter(item => item);
|
|
|
}
|
|
|
function useLegacyItems(items, children) {
|
|
|
if (false) {}
|
|
|
if (items) {
|
|
|
return items;
|
|
|
}
|
|
|
const childrenItems = (0,toArray/* default */.Z)(children).map(node => {
|
|
|
if ( /*#__PURE__*/_react_17_0_2_react.isValidElement(node)) {
|
|
|
const {
|
|
|
key,
|
|
|
props
|
|
|
} = node;
|
|
|
const _a = props || {},
|
|
|
{
|
|
|
tab
|
|
|
} = _a,
|
|
|
restProps = __rest(_a, ["tab"]);
|
|
|
const item = Object.assign(Object.assign({
|
|
|
key: String(key)
|
|
|
}, restProps), {
|
|
|
label: tab
|
|
|
});
|
|
|
return item;
|
|
|
}
|
|
|
return null;
|
|
|
});
|
|
|
return filter(childrenItems);
|
|
|
}
|
|
|
// EXTERNAL MODULE: ./node_modules/_@ant-design_cssinjs@1.18.2@@ant-design/cssinjs/es/index.js + 35 modules
|
|
|
var cssinjs_es = __webpack_require__(3775);
|
|
|
// EXTERNAL MODULE: ./node_modules/_antd@5.12.8@antd/es/style/index.js
|
|
|
var style = __webpack_require__(78605);
|
|
|
// EXTERNAL MODULE: ./node_modules/_antd@5.12.8@antd/es/theme/util/genComponentStyleHook.js + 5 modules
|
|
|
var genComponentStyleHook = __webpack_require__(16613);
|
|
|
// EXTERNAL MODULE: ./node_modules/_antd@5.12.8@antd/es/theme/util/statistic.js
|
|
|
var statistic = __webpack_require__(35577);
|
|
|
// EXTERNAL MODULE: ./node_modules/_antd@5.12.8@antd/es/style/motion/slide.js
|
|
|
var slide = __webpack_require__(49344);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_antd@5.12.8@antd/es/tabs/style/motion.js
|
|
|
|
|
|
const genMotionStyle = token => {
|
|
|
const {
|
|
|
componentCls,
|
|
|
motionDurationSlow
|
|
|
} = token;
|
|
|
return [{
|
|
|
[componentCls]: {
|
|
|
[`${componentCls}-switch`]: {
|
|
|
'&-appear, &-enter': {
|
|
|
transition: 'none',
|
|
|
'&-start': {
|
|
|
opacity: 0
|
|
|
},
|
|
|
'&-active': {
|
|
|
opacity: 1,
|
|
|
transition: `opacity ${motionDurationSlow}`
|
|
|
}
|
|
|
},
|
|
|
'&-leave': {
|
|
|
position: 'absolute',
|
|
|
transition: 'none',
|
|
|
inset: 0,
|
|
|
'&-start': {
|
|
|
opacity: 1
|
|
|
},
|
|
|
'&-active': {
|
|
|
opacity: 0,
|
|
|
transition: `opacity ${motionDurationSlow}`
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
// Follow code may reuse in other components
|
|
|
[(0,slide/* initSlideMotion */.oN)(token, 'slide-up'), (0,slide/* initSlideMotion */.oN)(token, 'slide-down')]];
|
|
|
};
|
|
|
/* harmony default export */ var style_motion = (genMotionStyle);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_antd@5.12.8@antd/es/tabs/style/index.js
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const genCardStyle = token => {
|
|
|
const {
|
|
|
componentCls,
|
|
|
tabsCardPadding,
|
|
|
cardBg,
|
|
|
cardGutter,
|
|
|
colorBorderSecondary,
|
|
|
itemSelectedColor
|
|
|
} = token;
|
|
|
return {
|
|
|
[`${componentCls}-card`]: {
|
|
|
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
|
|
[`${componentCls}-tab`]: {
|
|
|
margin: 0,
|
|
|
padding: tabsCardPadding,
|
|
|
background: cardBg,
|
|
|
border: `${(0,cssinjs_es.unit)(token.lineWidth)} ${token.lineType} ${colorBorderSecondary}`,
|
|
|
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`
|
|
|
},
|
|
|
[`${componentCls}-tab-active`]: {
|
|
|
color: itemSelectedColor,
|
|
|
background: token.colorBgContainer
|
|
|
},
|
|
|
[`${componentCls}-ink-bar`]: {
|
|
|
visibility: 'hidden'
|
|
|
}
|
|
|
},
|
|
|
// ========================== Top & Bottom ==========================
|
|
|
[`&${componentCls}-top, &${componentCls}-bottom`]: {
|
|
|
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
|
|
[`${componentCls}-tab + ${componentCls}-tab`]: {
|
|
|
marginLeft: {
|
|
|
_skip_check_: true,
|
|
|
value: (0,cssinjs_es.unit)(cardGutter)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
[`&${componentCls}-top`]: {
|
|
|
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
|
|
[`${componentCls}-tab`]: {
|
|
|
borderRadius: `${(0,cssinjs_es.unit)(token.borderRadiusLG)} ${(0,cssinjs_es.unit)(token.borderRadiusLG)} 0 0`
|
|
|
},
|
|
|
[`${componentCls}-tab-active`]: {
|
|
|
borderBottomColor: token.colorBgContainer
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
[`&${componentCls}-bottom`]: {
|
|
|
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
|
|
[`${componentCls}-tab`]: {
|
|
|
borderRadius: `0 0 ${(0,cssinjs_es.unit)(token.borderRadiusLG)} ${(0,cssinjs_es.unit)(token.borderRadiusLG)}`
|
|
|
},
|
|
|
[`${componentCls}-tab-active`]: {
|
|
|
borderTopColor: token.colorBgContainer
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
// ========================== Left & Right ==========================
|
|
|
[`&${componentCls}-left, &${componentCls}-right`]: {
|
|
|
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
|
|
[`${componentCls}-tab + ${componentCls}-tab`]: {
|
|
|
marginTop: (0,cssinjs_es.unit)(cardGutter)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
[`&${componentCls}-left`]: {
|
|
|
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
|
|
[`${componentCls}-tab`]: {
|
|
|
borderRadius: {
|
|
|
_skip_check_: true,
|
|
|
value: `${(0,cssinjs_es.unit)(token.borderRadiusLG)} 0 0 ${(0,cssinjs_es.unit)(token.borderRadiusLG)}`
|
|
|
}
|
|
|
},
|
|
|
[`${componentCls}-tab-active`]: {
|
|
|
borderRightColor: {
|
|
|
_skip_check_: true,
|
|
|
value: token.colorBgContainer
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
[`&${componentCls}-right`]: {
|
|
|
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
|
|
[`${componentCls}-tab`]: {
|
|
|
borderRadius: {
|
|
|
_skip_check_: true,
|
|
|
value: `0 ${(0,cssinjs_es.unit)(token.borderRadiusLG)} ${(0,cssinjs_es.unit)(token.borderRadiusLG)} 0`
|
|
|
}
|
|
|
},
|
|
|
[`${componentCls}-tab-active`]: {
|
|
|
borderLeftColor: {
|
|
|
_skip_check_: true,
|
|
|
value: token.colorBgContainer
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
};
|
|
|
const genDropdownStyle = token => {
|
|
|
const {
|
|
|
componentCls,
|
|
|
itemHoverColor,
|
|
|
dropdownEdgeChildVerticalPadding
|
|
|
} = token;
|
|
|
return {
|
|
|
[`${componentCls}-dropdown`]: Object.assign(Object.assign({}, (0,style/* resetComponent */.Wf)(token)), {
|
|
|
position: 'absolute',
|
|
|
top: -9999,
|
|
|
left: {
|
|
|
_skip_check_: true,
|
|
|
value: -9999
|
|
|
},
|
|
|
zIndex: token.zIndexPopup,
|
|
|
display: 'block',
|
|
|
'&-hidden': {
|
|
|
display: 'none'
|
|
|
},
|
|
|
[`${componentCls}-dropdown-menu`]: {
|
|
|
maxHeight: token.tabsDropdownHeight,
|
|
|
margin: 0,
|
|
|
padding: `${(0,cssinjs_es.unit)(dropdownEdgeChildVerticalPadding)} 0`,
|
|
|
overflowX: 'hidden',
|
|
|
overflowY: 'auto',
|
|
|
textAlign: {
|
|
|
_skip_check_: true,
|
|
|
value: 'left'
|
|
|
},
|
|
|
listStyleType: 'none',
|
|
|
backgroundColor: token.colorBgContainer,
|
|
|
backgroundClip: 'padding-box',
|
|
|
borderRadius: token.borderRadiusLG,
|
|
|
outline: 'none',
|
|
|
boxShadow: token.boxShadowSecondary,
|
|
|
'&-item': Object.assign(Object.assign({}, style/* textEllipsis */.vS), {
|
|
|
display: 'flex',
|
|
|
alignItems: 'center',
|
|
|
minWidth: token.tabsDropdownWidth,
|
|
|
margin: 0,
|
|
|
padding: `${(0,cssinjs_es.unit)(token.paddingXXS)} ${(0,cssinjs_es.unit)(token.paddingSM)}`,
|
|
|
color: token.colorText,
|
|
|
fontWeight: 'normal',
|
|
|
fontSize: token.fontSize,
|
|
|
lineHeight: token.lineHeight,
|
|
|
cursor: 'pointer',
|
|
|
transition: `all ${token.motionDurationSlow}`,
|
|
|
'> span': {
|
|
|
flex: 1,
|
|
|
whiteSpace: 'nowrap'
|
|
|
},
|
|
|
'&-remove': {
|
|
|
flex: 'none',
|
|
|
marginLeft: {
|
|
|
_skip_check_: true,
|
|
|
value: token.marginSM
|
|
|
},
|
|
|
color: token.colorTextDescription,
|
|
|
fontSize: token.fontSizeSM,
|
|
|
background: 'transparent',
|
|
|
border: 0,
|
|
|
cursor: 'pointer',
|
|
|
'&:hover': {
|
|
|
color: itemHoverColor
|
|
|
}
|
|
|
},
|
|
|
'&:hover': {
|
|
|
background: token.controlItemBgHover
|
|
|
},
|
|
|
'&-disabled': {
|
|
|
'&, &:hover': {
|
|
|
color: token.colorTextDisabled,
|
|
|
background: 'transparent',
|
|
|
cursor: 'not-allowed'
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
};
|
|
|
};
|
|
|
const genPositionStyle = token => {
|
|
|
const {
|
|
|
componentCls,
|
|
|
margin,
|
|
|
colorBorderSecondary,
|
|
|
horizontalMargin,
|
|
|
verticalItemPadding,
|
|
|
verticalItemMargin,
|
|
|
calc
|
|
|
} = token;
|
|
|
return {
|
|
|
// ========================== Top & Bottom ==========================
|
|
|
[`${componentCls}-top, ${componentCls}-bottom`]: {
|
|
|
flexDirection: 'column',
|
|
|
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
|
|
margin: horizontalMargin,
|
|
|
'&::before': {
|
|
|
position: 'absolute',
|
|
|
right: {
|
|
|
_skip_check_: true,
|
|
|
value: 0
|
|
|
},
|
|
|
left: {
|
|
|
_skip_check_: true,
|
|
|
value: 0
|
|
|
},
|
|
|
borderBottom: `${(0,cssinjs_es.unit)(token.lineWidth)} ${token.lineType} ${colorBorderSecondary}`,
|
|
|
content: "''"
|
|
|
},
|
|
|
[`${componentCls}-ink-bar`]: {
|
|
|
height: token.lineWidthBold,
|
|
|
'&-animated': {
|
|
|
transition: `width ${token.motionDurationSlow}, left ${token.motionDurationSlow},
|
|
|
right ${token.motionDurationSlow}`
|
|
|
}
|
|
|
},
|
|
|
[`${componentCls}-nav-wrap`]: {
|
|
|
'&::before, &::after': {
|
|
|
top: 0,
|
|
|
bottom: 0,
|
|
|
width: token.controlHeight
|
|
|
},
|
|
|
'&::before': {
|
|
|
left: {
|
|
|
_skip_check_: true,
|
|
|
value: 0
|
|
|
},
|
|
|
boxShadow: token.boxShadowTabsOverflowLeft
|
|
|
},
|
|
|
'&::after': {
|
|
|
right: {
|
|
|
_skip_check_: true,
|
|
|
value: 0
|
|
|
},
|
|
|
boxShadow: token.boxShadowTabsOverflowRight
|
|
|
},
|
|
|
[`&${componentCls}-nav-wrap-ping-left::before`]: {
|
|
|
opacity: 1
|
|
|
},
|
|
|
[`&${componentCls}-nav-wrap-ping-right::after`]: {
|
|
|
opacity: 1
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
[`${componentCls}-top`]: {
|
|
|
[`> ${componentCls}-nav,
|
|
|
> div > ${componentCls}-nav`]: {
|
|
|
'&::before': {
|
|
|
bottom: 0
|
|
|
},
|
|
|
[`${componentCls}-ink-bar`]: {
|
|
|
bottom: 0
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
[`${componentCls}-bottom`]: {
|
|
|
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
|
|
order: 1,
|
|
|
marginTop: margin,
|
|
|
marginBottom: 0,
|
|
|
'&::before': {
|
|
|
top: 0
|
|
|
},
|
|
|
[`${componentCls}-ink-bar`]: {
|
|
|
top: 0
|
|
|
}
|
|
|
},
|
|
|
[`> ${componentCls}-content-holder, > div > ${componentCls}-content-holder`]: {
|
|
|
order: 0
|
|
|
}
|
|
|
},
|
|
|
// ========================== Left & Right ==========================
|
|
|
[`${componentCls}-left, ${componentCls}-right`]: {
|
|
|
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
|
|
flexDirection: 'column',
|
|
|
minWidth: calc(token.controlHeight).mul(1.25).equal(),
|
|
|
// >>>>>>>>>>> Tab
|
|
|
[`${componentCls}-tab`]: {
|
|
|
padding: verticalItemPadding,
|
|
|
textAlign: 'center'
|
|
|
},
|
|
|
[`${componentCls}-tab + ${componentCls}-tab`]: {
|
|
|
margin: verticalItemMargin
|
|
|
},
|
|
|
// >>>>>>>>>>> Nav
|
|
|
[`${componentCls}-nav-wrap`]: {
|
|
|
flexDirection: 'column',
|
|
|
'&::before, &::after': {
|
|
|
right: {
|
|
|
_skip_check_: true,
|
|
|
value: 0
|
|
|
},
|
|
|
left: {
|
|
|
_skip_check_: true,
|
|
|
value: 0
|
|
|
},
|
|
|
height: token.controlHeight
|
|
|
},
|
|
|
'&::before': {
|
|
|
top: 0,
|
|
|
boxShadow: token.boxShadowTabsOverflowTop
|
|
|
},
|
|
|
'&::after': {
|
|
|
bottom: 0,
|
|
|
boxShadow: token.boxShadowTabsOverflowBottom
|
|
|
},
|
|
|
[`&${componentCls}-nav-wrap-ping-top::before`]: {
|
|
|
opacity: 1
|
|
|
},
|
|
|
[`&${componentCls}-nav-wrap-ping-bottom::after`]: {
|
|
|
opacity: 1
|
|
|
}
|
|
|
},
|
|
|
// >>>>>>>>>>> Ink Bar
|
|
|
[`${componentCls}-ink-bar`]: {
|
|
|
width: token.lineWidthBold,
|
|
|
'&-animated': {
|
|
|
transition: `height ${token.motionDurationSlow}, top ${token.motionDurationSlow}`
|
|
|
}
|
|
|
},
|
|
|
[`${componentCls}-nav-list, ${componentCls}-nav-operations`]: {
|
|
|
flex: '1 0 auto',
|
|
|
// fix safari scroll problem
|
|
|
flexDirection: 'column'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
[`${componentCls}-left`]: {
|
|
|
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
|
|
[`${componentCls}-ink-bar`]: {
|
|
|
right: {
|
|
|
_skip_check_: true,
|
|
|
value: 0
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
[`> ${componentCls}-content-holder, > div > ${componentCls}-content-holder`]: {
|
|
|
marginLeft: {
|
|
|
_skip_check_: true,
|
|
|
value: (0,cssinjs_es.unit)(calc(token.lineWidth).mul(-1).equal())
|
|
|
},
|
|
|
borderLeft: {
|
|
|
_skip_check_: true,
|
|
|
value: `${(0,cssinjs_es.unit)(token.lineWidth)} ${token.lineType} ${token.colorBorder}`
|
|
|
},
|
|
|
[`> ${componentCls}-content > ${componentCls}-tabpane`]: {
|
|
|
paddingLeft: {
|
|
|
_skip_check_: true,
|
|
|
value: token.paddingLG
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
[`${componentCls}-right`]: {
|
|
|
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
|
|
order: 1,
|
|
|
[`${componentCls}-ink-bar`]: {
|
|
|
left: {
|
|
|
_skip_check_: true,
|
|
|
value: 0
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
[`> ${componentCls}-content-holder, > div > ${componentCls}-content-holder`]: {
|
|
|
order: 0,
|
|
|
marginRight: {
|
|
|
_skip_check_: true,
|
|
|
value: calc(token.lineWidth).mul(-1).equal()
|
|
|
},
|
|
|
borderRight: {
|
|
|
_skip_check_: true,
|
|
|
value: `${(0,cssinjs_es.unit)(token.lineWidth)} ${token.lineType} ${token.colorBorder}`
|
|
|
},
|
|
|
[`> ${componentCls}-content > ${componentCls}-tabpane`]: {
|
|
|
paddingRight: {
|
|
|
_skip_check_: true,
|
|
|
value: token.paddingLG
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
};
|
|
|
const genSizeStyle = token => {
|
|
|
const {
|
|
|
componentCls,
|
|
|
cardPaddingSM,
|
|
|
cardPaddingLG,
|
|
|
horizontalItemPaddingSM,
|
|
|
horizontalItemPaddingLG
|
|
|
} = token;
|
|
|
return {
|
|
|
[componentCls]: {
|
|
|
'&-small': {
|
|
|
[`> ${componentCls}-nav`]: {
|
|
|
[`${componentCls}-tab`]: {
|
|
|
padding: horizontalItemPaddingSM,
|
|
|
fontSize: token.titleFontSizeSM
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
'&-large': {
|
|
|
[`> ${componentCls}-nav`]: {
|
|
|
[`${componentCls}-tab`]: {
|
|
|
padding: horizontalItemPaddingLG,
|
|
|
fontSize: token.titleFontSizeLG
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
[`${componentCls}-card`]: {
|
|
|
[`&${componentCls}-small`]: {
|
|
|
[`> ${componentCls}-nav`]: {
|
|
|
[`${componentCls}-tab`]: {
|
|
|
padding: cardPaddingSM
|
|
|
}
|
|
|
},
|
|
|
[`&${componentCls}-bottom`]: {
|
|
|
[`> ${componentCls}-nav ${componentCls}-tab`]: {
|
|
|
borderRadius: `0 0 ${(0,cssinjs_es.unit)(token.borderRadius)} ${(0,cssinjs_es.unit)(token.borderRadius)}`
|
|
|
}
|
|
|
},
|
|
|
[`&${componentCls}-top`]: {
|
|
|
[`> ${componentCls}-nav ${componentCls}-tab`]: {
|
|
|
borderRadius: `${(0,cssinjs_es.unit)(token.borderRadius)} ${(0,cssinjs_es.unit)(token.borderRadius)} 0 0`
|
|
|
}
|
|
|
},
|
|
|
[`&${componentCls}-right`]: {
|
|
|
[`> ${componentCls}-nav ${componentCls}-tab`]: {
|
|
|
borderRadius: {
|
|
|
_skip_check_: true,
|
|
|
value: `0 ${(0,cssinjs_es.unit)(token.borderRadius)} ${(0,cssinjs_es.unit)(token.borderRadius)} 0`
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
[`&${componentCls}-left`]: {
|
|
|
[`> ${componentCls}-nav ${componentCls}-tab`]: {
|
|
|
borderRadius: {
|
|
|
_skip_check_: true,
|
|
|
value: `${(0,cssinjs_es.unit)(token.borderRadius)} 0 0 ${(0,cssinjs_es.unit)(token.borderRadius)}`
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
[`&${componentCls}-large`]: {
|
|
|
[`> ${componentCls}-nav`]: {
|
|
|
[`${componentCls}-tab`]: {
|
|
|
padding: cardPaddingLG
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
};
|
|
|
const genTabStyle = token => {
|
|
|
const {
|
|
|
componentCls,
|
|
|
itemActiveColor,
|
|
|
itemHoverColor,
|
|
|
iconCls,
|
|
|
tabsHorizontalItemMargin,
|
|
|
horizontalItemPadding,
|
|
|
itemSelectedColor,
|
|
|
itemColor
|
|
|
} = token;
|
|
|
const tabCls = `${componentCls}-tab`;
|
|
|
return {
|
|
|
[tabCls]: {
|
|
|
position: 'relative',
|
|
|
WebkitTouchCallout: 'none',
|
|
|
WebkitTapHighlightColor: 'transparent',
|
|
|
display: 'inline-flex',
|
|
|
alignItems: 'center',
|
|
|
padding: horizontalItemPadding,
|
|
|
fontSize: token.titleFontSize,
|
|
|
background: 'transparent',
|
|
|
border: 0,
|
|
|
outline: 'none',
|
|
|
cursor: 'pointer',
|
|
|
color: itemColor,
|
|
|
'&-btn, &-remove': Object.assign({
|
|
|
'&:focus:not(:focus-visible), &:active': {
|
|
|
color: itemActiveColor
|
|
|
}
|
|
|
}, (0,style/* genFocusStyle */.Qy)(token)),
|
|
|
'&-btn': {
|
|
|
outline: 'none',
|
|
|
transition: 'all 0.3s',
|
|
|
[`${tabCls}-icon:not(:last-child)`]: {
|
|
|
marginInlineEnd: token.marginSM
|
|
|
}
|
|
|
},
|
|
|
'&-remove': {
|
|
|
flex: 'none',
|
|
|
marginRight: {
|
|
|
_skip_check_: true,
|
|
|
value: token.calc(token.marginXXS).mul(-1).equal()
|
|
|
},
|
|
|
marginLeft: {
|
|
|
_skip_check_: true,
|
|
|
value: token.marginXS
|
|
|
},
|
|
|
color: token.colorTextDescription,
|
|
|
fontSize: token.fontSizeSM,
|
|
|
background: 'transparent',
|
|
|
border: 'none',
|
|
|
outline: 'none',
|
|
|
cursor: 'pointer',
|
|
|
transition: `all ${token.motionDurationSlow}`,
|
|
|
'&:hover': {
|
|
|
color: token.colorTextHeading
|
|
|
}
|
|
|
},
|
|
|
'&:hover': {
|
|
|
color: itemHoverColor
|
|
|
},
|
|
|
[`&${tabCls}-active ${tabCls}-btn`]: {
|
|
|
color: itemSelectedColor,
|
|
|
textShadow: token.tabsActiveTextShadow
|
|
|
},
|
|
|
[`&${tabCls}-disabled`]: {
|
|
|
color: token.colorTextDisabled,
|
|
|
cursor: 'not-allowed'
|
|
|
},
|
|
|
[`&${tabCls}-disabled ${tabCls}-btn, &${tabCls}-disabled ${componentCls}-remove`]: {
|
|
|
'&:focus, &:active': {
|
|
|
color: token.colorTextDisabled
|
|
|
}
|
|
|
},
|
|
|
[`& ${tabCls}-remove ${iconCls}`]: {
|
|
|
margin: 0
|
|
|
},
|
|
|
[`${iconCls}:not(:last-child)`]: {
|
|
|
marginRight: {
|
|
|
_skip_check_: true,
|
|
|
value: token.marginSM
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
[`${tabCls} + ${tabCls}`]: {
|
|
|
margin: {
|
|
|
_skip_check_: true,
|
|
|
value: tabsHorizontalItemMargin
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
};
|
|
|
const genRtlStyle = token => {
|
|
|
const {
|
|
|
componentCls,
|
|
|
tabsHorizontalItemMarginRTL,
|
|
|
iconCls,
|
|
|
cardGutter,
|
|
|
calc
|
|
|
} = token;
|
|
|
const rtlCls = `${componentCls}-rtl`;
|
|
|
return {
|
|
|
[rtlCls]: {
|
|
|
direction: 'rtl',
|
|
|
[`${componentCls}-nav`]: {
|
|
|
[`${componentCls}-tab`]: {
|
|
|
margin: {
|
|
|
_skip_check_: true,
|
|
|
value: tabsHorizontalItemMarginRTL
|
|
|
},
|
|
|
[`${componentCls}-tab:last-of-type`]: {
|
|
|
marginLeft: {
|
|
|
_skip_check_: true,
|
|
|
value: 0
|
|
|
}
|
|
|
},
|
|
|
[iconCls]: {
|
|
|
marginRight: {
|
|
|
_skip_check_: true,
|
|
|
value: 0
|
|
|
},
|
|
|
marginLeft: {
|
|
|
_skip_check_: true,
|
|
|
value: (0,cssinjs_es.unit)(token.marginSM)
|
|
|
}
|
|
|
},
|
|
|
[`${componentCls}-tab-remove`]: {
|
|
|
marginRight: {
|
|
|
_skip_check_: true,
|
|
|
value: (0,cssinjs_es.unit)(token.marginXS)
|
|
|
},
|
|
|
marginLeft: {
|
|
|
_skip_check_: true,
|
|
|
value: (0,cssinjs_es.unit)(calc(token.marginXXS).mul(-1).equal())
|
|
|
},
|
|
|
[iconCls]: {
|
|
|
margin: 0
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
[`&${componentCls}-left`]: {
|
|
|
[`> ${componentCls}-nav`]: {
|
|
|
order: 1
|
|
|
},
|
|
|
[`> ${componentCls}-content-holder`]: {
|
|
|
order: 0
|
|
|
}
|
|
|
},
|
|
|
[`&${componentCls}-right`]: {
|
|
|
[`> ${componentCls}-nav`]: {
|
|
|
order: 0
|
|
|
},
|
|
|
[`> ${componentCls}-content-holder`]: {
|
|
|
order: 1
|
|
|
}
|
|
|
},
|
|
|
// ====================== Card ======================
|
|
|
[`&${componentCls}-card${componentCls}-top, &${componentCls}-card${componentCls}-bottom`]: {
|
|
|
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
|
|
[`${componentCls}-tab + ${componentCls}-tab`]: {
|
|
|
marginRight: {
|
|
|
_skip_check_: true,
|
|
|
value: cardGutter
|
|
|
},
|
|
|
marginLeft: {
|
|
|
_skip_check_: true,
|
|
|
value: 0
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
[`${componentCls}-dropdown-rtl`]: {
|
|
|
direction: 'rtl'
|
|
|
},
|
|
|
[`${componentCls}-menu-item`]: {
|
|
|
[`${componentCls}-dropdown-rtl`]: {
|
|
|
textAlign: {
|
|
|
_skip_check_: true,
|
|
|
value: 'right'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
};
|
|
|
const genTabsStyle = token => {
|
|
|
const {
|
|
|
componentCls,
|
|
|
tabsCardPadding,
|
|
|
cardHeight,
|
|
|
cardGutter,
|
|
|
itemHoverColor,
|
|
|
itemActiveColor,
|
|
|
colorBorderSecondary
|
|
|
} = token;
|
|
|
return {
|
|
|
[componentCls]: Object.assign(Object.assign(Object.assign(Object.assign({}, (0,style/* resetComponent */.Wf)(token)), {
|
|
|
display: 'flex',
|
|
|
// ========================== Navigation ==========================
|
|
|
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
|
|
position: 'relative',
|
|
|
display: 'flex',
|
|
|
flex: 'none',
|
|
|
alignItems: 'center',
|
|
|
[`${componentCls}-nav-wrap`]: {
|
|
|
position: 'relative',
|
|
|
display: 'flex',
|
|
|
flex: 'auto',
|
|
|
alignSelf: 'stretch',
|
|
|
overflow: 'hidden',
|
|
|
whiteSpace: 'nowrap',
|
|
|
transform: 'translate(0)',
|
|
|
// Fix chrome render bug
|
|
|
// >>>>> Ping shadow
|
|
|
'&::before, &::after': {
|
|
|
position: 'absolute',
|
|
|
zIndex: 1,
|
|
|
opacity: 0,
|
|
|
transition: `opacity ${token.motionDurationSlow}`,
|
|
|
content: "''",
|
|
|
pointerEvents: 'none'
|
|
|
}
|
|
|
},
|
|
|
[`${componentCls}-nav-list`]: {
|
|
|
position: 'relative',
|
|
|
display: 'flex',
|
|
|
transition: `opacity ${token.motionDurationSlow}`
|
|
|
},
|
|
|
// >>>>>>>> Operations
|
|
|
[`${componentCls}-nav-operations`]: {
|
|
|
display: 'flex',
|
|
|
alignSelf: 'stretch'
|
|
|
},
|
|
|
[`${componentCls}-nav-operations-hidden`]: {
|
|
|
position: 'absolute',
|
|
|
visibility: 'hidden',
|
|
|
pointerEvents: 'none'
|
|
|
},
|
|
|
[`${componentCls}-nav-more`]: {
|
|
|
position: 'relative',
|
|
|
padding: tabsCardPadding,
|
|
|
background: 'transparent',
|
|
|
border: 0,
|
|
|
color: token.colorText,
|
|
|
'&::after': {
|
|
|
position: 'absolute',
|
|
|
right: {
|
|
|
_skip_check_: true,
|
|
|
value: 0
|
|
|
},
|
|
|
bottom: 0,
|
|
|
left: {
|
|
|
_skip_check_: true,
|
|
|
value: 0
|
|
|
},
|
|
|
height: token.calc(token.controlHeightLG).div(8).equal(),
|
|
|
transform: 'translateY(100%)',
|
|
|
content: "''"
|
|
|
}
|
|
|
},
|
|
|
[`${componentCls}-nav-add`]: Object.assign({
|
|
|
minWidth: cardHeight,
|
|
|
minHeight: cardHeight,
|
|
|
marginLeft: {
|
|
|
_skip_check_: true,
|
|
|
value: cardGutter
|
|
|
},
|
|
|
padding: `0 ${(0,cssinjs_es.unit)(token.paddingXS)}`,
|
|
|
background: 'transparent',
|
|
|
border: `${(0,cssinjs_es.unit)(token.lineWidth)} ${token.lineType} ${colorBorderSecondary}`,
|
|
|
borderRadius: `${(0,cssinjs_es.unit)(token.borderRadiusLG)} ${(0,cssinjs_es.unit)(token.borderRadiusLG)} 0 0`,
|
|
|
outline: 'none',
|
|
|
cursor: 'pointer',
|
|
|
color: token.colorText,
|
|
|
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
|
|
|
'&:hover': {
|
|
|
color: itemHoverColor
|
|
|
},
|
|
|
'&:active, &:focus:not(:focus-visible)': {
|
|
|
color: itemActiveColor
|
|
|
}
|
|
|
}, (0,style/* genFocusStyle */.Qy)(token))
|
|
|
},
|
|
|
[`${componentCls}-extra-content`]: {
|
|
|
flex: 'none'
|
|
|
},
|
|
|
// ============================ InkBar ============================
|
|
|
[`${componentCls}-ink-bar`]: {
|
|
|
position: 'absolute',
|
|
|
background: token.inkBarColor,
|
|
|
pointerEvents: 'none'
|
|
|
}
|
|
|
}), genTabStyle(token)), {
|
|
|
// =========================== TabPanes ===========================
|
|
|
[`${componentCls}-content`]: {
|
|
|
position: 'relative',
|
|
|
width: '100%'
|
|
|
},
|
|
|
[`${componentCls}-content-holder`]: {
|
|
|
flex: 'auto',
|
|
|
minWidth: 0,
|
|
|
minHeight: 0
|
|
|
},
|
|
|
[`${componentCls}-tabpane`]: {
|
|
|
outline: 'none',
|
|
|
'&-hidden': {
|
|
|
display: 'none'
|
|
|
}
|
|
|
}
|
|
|
}),
|
|
|
[`${componentCls}-centered`]: {
|
|
|
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
|
|
[`${componentCls}-nav-wrap`]: {
|
|
|
[`&:not([class*='${componentCls}-nav-wrap-ping'])`]: {
|
|
|
justifyContent: 'center'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
};
|
|
|
const prepareComponentToken = token => {
|
|
|
const cardHeight = token.controlHeightLG;
|
|
|
return {
|
|
|
zIndexPopup: token.zIndexPopupBase + 50,
|
|
|
cardBg: token.colorFillAlter,
|
|
|
cardHeight,
|
|
|
// Initialize with empty string, because cardPadding will be calculated with cardHeight by default.
|
|
|
cardPadding: `${(cardHeight - Math.round(token.fontSize * token.lineHeight)) / 2 - token.lineWidth}px ${token.padding}px`,
|
|
|
cardPaddingSM: `${token.paddingXXS * 1.5}px ${token.padding}px`,
|
|
|
cardPaddingLG: `${token.paddingXS}px ${token.padding}px ${token.paddingXXS * 1.5}px`,
|
|
|
titleFontSize: token.fontSize,
|
|
|
titleFontSizeLG: token.fontSizeLG,
|
|
|
titleFontSizeSM: token.fontSize,
|
|
|
inkBarColor: token.colorPrimary,
|
|
|
horizontalMargin: `0 0 ${token.margin}px 0`,
|
|
|
horizontalItemGutter: 32,
|
|
|
// Fixed Value
|
|
|
// Initialize with empty string, because horizontalItemMargin will be calculated with horizontalItemGutter by default.
|
|
|
horizontalItemMargin: ``,
|
|
|
horizontalItemMarginRTL: ``,
|
|
|
horizontalItemPadding: `${token.paddingSM}px 0`,
|
|
|
horizontalItemPaddingSM: `${token.paddingXS}px 0`,
|
|
|
horizontalItemPaddingLG: `${token.padding}px 0`,
|
|
|
verticalItemPadding: `${token.paddingXS}px ${token.paddingLG}px`,
|
|
|
verticalItemMargin: `${token.margin}px 0 0 0`,
|
|
|
itemColor: token.colorText,
|
|
|
itemSelectedColor: token.colorPrimary,
|
|
|
itemHoverColor: token.colorPrimaryHover,
|
|
|
itemActiveColor: token.colorPrimaryActive,
|
|
|
cardGutter: token.marginXXS / 2
|
|
|
};
|
|
|
};
|
|
|
// ============================== Export ==============================
|
|
|
/* harmony default export */ var tabs_style = ((0,genComponentStyleHook/* genStyleHooks */.I$)('Tabs', token => {
|
|
|
const tabsToken = (0,statistic/* merge */.TS)(token, {
|
|
|
// `cardPadding` is empty by default, so we could calculate with dynamic `cardHeight`
|
|
|
tabsCardPadding: token.cardPadding,
|
|
|
dropdownEdgeChildVerticalPadding: token.paddingXXS,
|
|
|
tabsActiveTextShadow: '0 0 0.25px currentcolor',
|
|
|
tabsDropdownHeight: 200,
|
|
|
tabsDropdownWidth: 120,
|
|
|
tabsHorizontalItemMargin: `0 0 0 ${(0,cssinjs_es.unit)(token.horizontalItemGutter)}`,
|
|
|
tabsHorizontalItemMarginRTL: `0 0 0 ${(0,cssinjs_es.unit)(token.horizontalItemGutter)}`
|
|
|
});
|
|
|
return [genSizeStyle(tabsToken), genRtlStyle(tabsToken), genPositionStyle(tabsToken), genDropdownStyle(tabsToken), genCardStyle(tabsToken), genTabsStyle(tabsToken), style_motion(tabsToken)];
|
|
|
}, prepareComponentToken));
|
|
|
// EXTERNAL MODULE: ./node_modules/_antd@5.12.8@antd/es/config-provider/hooks/useCSSVarCls.js
|
|
|
var useCSSVarCls = __webpack_require__(70559);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_antd@5.12.8@antd/es/tabs/TabPane.js
|
|
|
const TabPane_TabPane = () => null;
|
|
|
if (false) {}
|
|
|
/* harmony default export */ var tabs_TabPane = (TabPane_TabPane);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_antd@5.12.8@antd/es/tabs/index.js
|
|
|
"use client";
|
|
|
|
|
|
var tabs_rest = undefined && undefined.__rest || function (s, e) {
|
|
|
var t = {};
|
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
|
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
|
}
|
|
|
return t;
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const tabs_Tabs = props => {
|
|
|
const {
|
|
|
type,
|
|
|
className,
|
|
|
rootClassName,
|
|
|
size: customSize,
|
|
|
onEdit,
|
|
|
hideAdd,
|
|
|
centered,
|
|
|
addIcon,
|
|
|
popupClassName,
|
|
|
children,
|
|
|
items,
|
|
|
animated,
|
|
|
style,
|
|
|
indicatorSize
|
|
|
} = props,
|
|
|
otherProps = tabs_rest(props, ["type", "className", "rootClassName", "size", "onEdit", "hideAdd", "centered", "addIcon", "popupClassName", "children", "items", "animated", "style", "indicatorSize"]);
|
|
|
const {
|
|
|
prefixCls: customizePrefixCls,
|
|
|
moreIcon = /*#__PURE__*/_react_17_0_2_react.createElement(EllipsisOutlined/* default */.Z, null)
|
|
|
} = otherProps;
|
|
|
const {
|
|
|
direction,
|
|
|
tabs,
|
|
|
getPrefixCls,
|
|
|
getPopupContainer
|
|
|
} = _react_17_0_2_react.useContext(context/* ConfigContext */.E_);
|
|
|
const prefixCls = getPrefixCls('tabs', customizePrefixCls);
|
|
|
const rootCls = (0,useCSSVarCls/* default */.Z)(prefixCls);
|
|
|
const [wrapCSSVar, hashId, cssVarCls] = tabs_style(prefixCls, rootCls);
|
|
|
let editable;
|
|
|
if (type === 'editable-card') {
|
|
|
editable = {
|
|
|
onEdit: (editType, _ref) => {
|
|
|
let {
|
|
|
key,
|
|
|
event
|
|
|
} = _ref;
|
|
|
onEdit === null || onEdit === void 0 ? void 0 : onEdit(editType === 'add' ? event : key, editType);
|
|
|
},
|
|
|
removeIcon: /*#__PURE__*/_react_17_0_2_react.createElement(CloseOutlined/* default */.Z, null),
|
|
|
addIcon: addIcon || /*#__PURE__*/_react_17_0_2_react.createElement(PlusOutlined/* default */.Z, null),
|
|
|
showAdd: hideAdd !== true
|
|
|
};
|
|
|
}
|
|
|
const rootPrefixCls = getPrefixCls();
|
|
|
if (false) {}
|
|
|
const mergedItems = useLegacyItems(items, children);
|
|
|
const mergedAnimated = useAnimateConfig_useAnimateConfig(prefixCls, animated);
|
|
|
const size = (0,useSize/* default */.Z)(customSize);
|
|
|
const mergedStyle = Object.assign(Object.assign({}, tabs === null || tabs === void 0 ? void 0 : tabs.style), style);
|
|
|
return wrapCSSVar( /*#__PURE__*/_react_17_0_2_react.createElement(_rc_tabs_12_14_1_rc_tabs_es, Object.assign({
|
|
|
direction: direction,
|
|
|
getPopupContainer: getPopupContainer,
|
|
|
moreTransitionName: `${rootPrefixCls}-slide-up`
|
|
|
}, otherProps, {
|
|
|
items: mergedItems,
|
|
|
className: _classnames_2_5_1_classnames_default()({
|
|
|
[`${prefixCls}-${size}`]: size,
|
|
|
[`${prefixCls}-card`]: ['card', 'editable-card'].includes(type),
|
|
|
[`${prefixCls}-editable-card`]: type === 'editable-card',
|
|
|
[`${prefixCls}-centered`]: centered
|
|
|
}, tabs === null || tabs === void 0 ? void 0 : tabs.className, className, rootClassName, hashId, cssVarCls, rootCls),
|
|
|
popupClassName: _classnames_2_5_1_classnames_default()(popupClassName, hashId, cssVarCls, rootCls),
|
|
|
style: mergedStyle,
|
|
|
editable: editable,
|
|
|
moreIcon: moreIcon,
|
|
|
prefixCls: prefixCls,
|
|
|
animated: mergedAnimated,
|
|
|
indicatorSize: indicatorSize !== null && indicatorSize !== void 0 ? indicatorSize : tabs === null || tabs === void 0 ? void 0 : tabs.indicatorSize
|
|
|
})));
|
|
|
};
|
|
|
tabs_Tabs.TabPane = tabs_TabPane;
|
|
|
if (false) {}
|
|
|
/* harmony default export */ var tabs = (tabs_Tabs);
|
|
|
|
|
|
/***/ })
|
|
|
|
|
|
}]); |
