sailboat-design
Version:
A simple sailboat simulator
34 lines (33 loc) • 1.59 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useContext, useEffect, useState } from 'react';
import { TabsContext } from './tabs';
export var activeBarDisplayName = 'ActiveBar';
var ActiveBar = function (props) {
var context = useContext(TabsContext);
var mode = context.mode, activeIndex = context.activeIndex, tabsDom = context.tabsDom;
var _a = useState({}), style = _a[0], setStyle = _a[1];
useEffect(function () {
if (!tabsDom) {
return;
}
var activeDom = tabsDom.childNodes[Number(activeIndex)];
if (mode === 'horizontal') {
var width = (activeDom === null || activeDom === void 0 ? void 0 : activeDom.clientWidth) + 'px';
var left = (activeDom === null || activeDom === void 0 ? void 0 : activeDom.offsetLeft) + 'px';
var style_1 = { width: width, left: left };
setStyle(style_1);
}
else {
var height = (activeDom === null || activeDom === void 0 ? void 0 : activeDom.clientHeight) + 'px';
var top_1 = (activeDom === null || activeDom === void 0 ? void 0 : activeDom.offsetTop) + 'px';
var style_2 = { height: height, top: top_1 };
setStyle(style_2);
}
}, [activeIndex, props.forceRenderState, tabsDom]);
if (!tabsDom) {
return _jsx("div", { className: "sail-tabs-active_bar" });
}
return _jsx("div", { style: style, className: "sail-tabs-active_bar" });
};
ActiveBar.displayName = activeBarDisplayName;
export default ActiveBar;