56 lines
1.8 KiB
JavaScript
56 lines
1.8 KiB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import raf from "rc-util/es/raf";
|
|
var useIndicator = function useIndicator(_ref) {
|
|
var activeTabOffset = _ref.activeTabOffset,
|
|
horizontal = _ref.horizontal,
|
|
rtl = _ref.rtl,
|
|
indicatorSize = _ref.indicatorSize;
|
|
var _useState = useState(),
|
|
_useState2 = _slicedToArray(_useState, 2),
|
|
inkStyle = _useState2[0],
|
|
setInkStyle = _useState2[1];
|
|
var inkBarRafRef = 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.cancel(inkBarRafRef.current);
|
|
}
|
|
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 = raf(function () {
|
|
setInkStyle(newInkStyle);
|
|
});
|
|
return cleanInkBarRaf;
|
|
}, [activeTabOffset, horizontal, rtl, indicatorSize]);
|
|
return {
|
|
style: inkStyle
|
|
};
|
|
};
|
|
export default useIndicator; |