sailboat-design
Version:
A simple sailboat simulator
73 lines (72 loc) • 3.07 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { createContext, useEffect, useRef, useState } from 'react';
import classNames from 'classnames';
import { menuItemDisplayName } from './menuItem';
import { subMenuDisplayName } from './subMenu';
import { activeBarDisplayName } from './activeBar';
import ActiveBar from './activeBar';
export var MenuContext = createContext({});
export var Menu = function (props) {
var _a;
var mode = props.mode, onSelect = props.onSelect, defaultIndex = props.defaultIndex, className = props.className, style = props.style, children = props.children;
var _b = useState(defaultIndex || '0'), activeIndex = _b[0], setActiveIndex = _b[1];
var _c = useState(0), forceRenderState = _c[0], setForceRenderState = _c[1];
var menuRef = useRef(null);
var _d = useState(null), refState = _d[0], setRefState = _d[1];
var classes = classNames('menu', className, (_a = {},
_a["menu-".concat(mode)] = mode,
_a));
var handleClick = function (index) {
setActiveIndex(index);
if (onSelect) {
onSelect(index);
}
};
var passedContext = {
activeIndex: activeIndex,
onSelect: handleClick,
menuDom: menuRef.current,
mode: mode,
forceRenderCallback: function () {
setForceRenderState(forceRenderState + 1);
}
};
useEffect(function () {
if (!menuRef.current) {
return;
}
setRefState(menuRef.current);
}, []);
// 克隆子元素, 添加index, 判断类型是否是MenuItem
var renderChildren = React.Children.map(children, function (child, index) {
var childElement = child;
var displayName = childElement.type.displayName;
if (displayName !== menuItemDisplayName &&
displayName !== subMenuDisplayName &&
displayName !== activeBarDisplayName) {
console.error('Warning: Menu has a child which is not a MenuItem component');
return null;
}
return React.cloneElement(child, {
index: index.toString()
});
});
return (_jsx("ul", __assign({ ref: menuRef, className: classes, style: style, "data-testid": "test-menu" }, { children: _jsx(MenuContext.Provider, __assign({ value: passedContext }, { children: _jsxs(_Fragment, { children: [renderChildren, _jsx(ActiveBar, { forceRenderState: forceRenderState })] }) })) })));
};
Menu.defaultProps = {
mode: 'horizontal',
defaultIndex: '0'
};
export default Menu;