zent
Version:
一套前端设计语言和基于React的实现
17 lines (16 loc) • 1.23 kB
JavaScript
import { __assign } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Dropdown, DropdownContent, DropdownButton, DropdownClickTrigger, DropdownHoverTrigger, DropdownPosition, } from '../dropdown';
import { useMemo } from 'react';
import Menu, { MenuItem } from '../menu';
var TriggerButtonMap = {
hover: DropdownHoverTrigger,
click: DropdownClickTrigger,
};
export var DropdownNav = function (_a) {
var _b = _a.list, list = _b === void 0 ? [] : _b, _c = _a.trigger, trigger = _c === void 0 ? 'hover' : _c, onItemClick = _a.onItemClick, children = _a.children;
var TriggerButton = useMemo(function () {
return TriggerButtonMap[trigger];
}, [trigger]);
return (_jsxs(Dropdown, __assign({ className: "zent-dropdown-nav", position: DropdownPosition.BottomSameWidth }, { children: [_jsx(TriggerButton, { children: _jsx(DropdownButton, __assign({ className: 'zent-dropdown-nav-btn', type: "text" }, { children: children }), void 0) }, void 0), _jsx(DropdownContent, { children: _jsx(Menu, __assign({ onClick: onItemClick }, { children: list.map(function (item) { return (_jsx(MenuItem, { children: item.label }, item.key)); }) }), void 0) }, void 0)] }), void 0));
};