sailboat-design
Version:
A simple sailboat simulator
35 lines (34 loc) • 1.63 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useContext, useEffect, useState } from 'react';
import { MenuContext } from './menu';
export var activeBarDisplayName = 'ActiveBar';
var ActiveBar = function (props) {
var context = useContext(MenuContext);
var mode = context.mode, activeIndex = context.activeIndex, menuDom = context.menuDom;
var readIndex = activeIndex.split('-')[0];
var _a = useState({}), style = _a[0], setStyle = _a[1];
useEffect(function () {
if (!menuDom) {
return;
}
var activeDom = menuDom.childNodes[Number(readIndex)];
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);
}
}, [context.activeIndex, props.forceRenderState, menuDom]);
if (!menuDom) {
return _jsx("div", { className: "menu-active_bar" });
}
return _jsx("div", { style: style, className: "menu-active_bar" });
};
ActiveBar.displayName = activeBarDisplayName;
export default ActiveBar;