@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
202 lines (199 loc) • 8.1 kB
JavaScript
'use client';
import { useNativeButton } from "../hooks/useNativeButton.mjs";
import { FloatingLayerProvider } from "../hooks/useFloatingLayer.mjs";
import { placementMap } from "../utils/placement.mjs";
import { CLASSNAMES } from "../styles/classNames.mjs";
import { styles } from "../Menu/sharedStyle.mjs";
import { usePortalContainer } from "../hooks/usePortalContainer.mjs";
import { cloneElement, isValidElement, useCallback, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Switch } from "antd";
import { cx } from "antd-style";
import { mergeProps } from "@base-ui/react/merge-props";
import { mergeRefs } from "react-merge-refs";
import { Menu as Menu$1 } from "@base-ui/react/menu";
import clsx from "clsx";
//#region src/DropdownMenu/atoms.tsx
const DROPDOWN_MENU_CONTAINER_ATTR = "data-lobe-ui-dropdown-menu-container";
const DropdownMenuRoot = (props) => /* @__PURE__ */ jsx(Menu$1.Root, {
modal: false,
...props
});
const DropdownMenuSubmenuRoot = Menu$1.SubmenuRoot;
const DropdownMenuCheckboxItemIndicator = Menu$1.CheckboxItemIndicator;
const mergeStateClassName = (base, className) => {
if (typeof className === "function") return (state) => cx(base, className(state));
return cx(base, className);
};
const DropdownMenuTrigger = ({ children, className, nativeButton, ref: refProp, ...rest }) => {
const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({
children,
nativeButton
});
const renderer = (props) => {
const resolvedProps = (() => {
if (isNativeButtonTriggerElement) return props;
const { type, ...restProps } = props;
return restProps;
})();
const mergedProps = mergeProps(children.props, resolvedProps);
return cloneElement(children, {
...mergedProps,
className: clsx(CLASSNAMES.DropdownMenuTrigger, className, mergedProps.className),
ref: mergeRefs([
children.ref,
props.ref,
refProp
])
});
};
if (isValidElement(children)) return /* @__PURE__ */ jsx(Menu$1.Trigger, {
...rest,
nativeButton: resolvedNativeButton,
render: renderer
});
return /* @__PURE__ */ jsx(Menu$1.Trigger, {
...rest,
className: clsx(CLASSNAMES.DropdownMenuTrigger, className),
nativeButton: resolvedNativeButton,
ref: refProp,
children
});
};
DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
const DropdownMenuPortal = ({ container, ...rest }) => {
const defaultContainer = usePortalContainer(DROPDOWN_MENU_CONTAINER_ATTR);
return /* @__PURE__ */ jsx(Menu$1.Portal, {
container: container ?? defaultContainer,
...rest
});
};
DropdownMenuPortal.displayName = "DropdownMenuPortal";
const DropdownMenuPositioner = ({ className, placement, hoverTrigger, align, side, sideOffset, children, ...rest }) => {
const placementConfig = placement ? placementMap[placement] : void 0;
const [positionerNode, setPositionerNode] = useState(null);
return /* @__PURE__ */ jsx(Menu$1.Positioner, {
...rest,
align: align ?? placementConfig?.align,
className: mergeStateClassName(styles.positioner, className),
"data-hover-trigger": hoverTrigger || void 0,
"data-placement": placement,
ref: setPositionerNode,
side: side ?? placementConfig?.side,
sideOffset: sideOffset ?? (placementConfig ? 6 : void 0),
children: /* @__PURE__ */ jsx(FloatingLayerProvider, {
value: positionerNode,
children
})
});
};
DropdownMenuPositioner.displayName = "DropdownMenuPositioner";
const DropdownMenuPopup = ({ className, ...rest }) => {
return /* @__PURE__ */ jsx(Menu$1.Popup, {
...rest,
className: mergeStateClassName(styles.popup, className)
});
};
DropdownMenuPopup.displayName = "DropdownMenuPopup";
const DropdownMenuItem = ({ className, danger, ...rest }) => {
return /* @__PURE__ */ jsx(Menu$1.Item, {
...rest,
className: (state) => cx(styles.item, danger && styles.danger, typeof className === "function" ? className(state) : className)
});
};
DropdownMenuItem.displayName = "DropdownMenuItem";
const DropdownMenuCheckboxItemPrimitive = ({ className, danger, ...rest }) => {
return /* @__PURE__ */ jsx(Menu$1.CheckboxItem, {
...rest,
className: (state) => cx(styles.item, danger && styles.danger, typeof className === "function" ? className(state) : className)
});
};
DropdownMenuCheckboxItemPrimitive.displayName = "DropdownMenuCheckboxItemPrimitive";
const DropdownMenuSeparator = ({ className, ...rest }) => {
return /* @__PURE__ */ jsx(Menu$1.Separator, {
...rest,
className: (state) => cx(styles.separator, typeof className === "function" ? className(state) : className)
});
};
DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
const DropdownMenuGroup = Menu$1.Group;
const DropdownMenuGroupLabel = ({ className, ...rest }) => {
return /* @__PURE__ */ jsx(Menu$1.GroupLabel, {
...rest,
className: (state) => cx(styles.groupLabel, typeof className === "function" ? className(state) : className)
});
};
DropdownMenuGroupLabel.displayName = "DropdownMenuGroupLabel";
const DropdownMenuSubmenuTrigger = ({ className, danger, ...rest }) => {
return /* @__PURE__ */ jsx(Menu$1.SubmenuTrigger, {
...rest,
className: (state) => cx(styles.item, danger && styles.danger, typeof className === "function" ? className(state) : className)
});
};
DropdownMenuSubmenuTrigger.displayName = "DropdownMenuSubmenuTrigger";
const DropdownMenuItemContent = ({ className, ...rest }) => {
return /* @__PURE__ */ jsx("div", {
...rest,
className: cx(styles.itemContent, className)
});
};
DropdownMenuItemContent.displayName = "DropdownMenuItemContent";
const DropdownMenuItemIcon = ({ className, ...rest }) => {
return /* @__PURE__ */ jsx("span", {
...rest,
className: cx(styles.icon, className)
});
};
DropdownMenuItemIcon.displayName = "DropdownMenuItemIcon";
const DropdownMenuItemLabel = ({ className, ...rest }) => {
return /* @__PURE__ */ jsx("span", {
...rest,
className: cx(styles.label, className)
});
};
DropdownMenuItemLabel.displayName = "DropdownMenuItemLabel";
const DropdownMenuItemExtra = ({ className, ...rest }) => {
return /* @__PURE__ */ jsx("span", {
...rest,
className: cx(styles.extra, className)
});
};
DropdownMenuItemExtra.displayName = "DropdownMenuItemExtra";
const DropdownMenuSubmenuArrow = ({ className, ...rest }) => {
return /* @__PURE__ */ jsx("span", {
...rest,
className: cx(styles.submenuArrow, className)
});
};
DropdownMenuSubmenuArrow.displayName = "DropdownMenuSubmenuArrow";
const DropdownMenuSwitchItem = ({ checked: checkedProp, className, closeOnClick = false, danger, defaultChecked, disabled, onCheckedChange, children, ...rest }) => {
const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);
const isControlled = checkedProp !== void 0;
const checked = isControlled ? checkedProp : internalChecked;
const handleCheckedChange = useCallback((newChecked) => {
if (!isControlled) setInternalChecked(newChecked);
onCheckedChange?.(newChecked);
}, [isControlled, onCheckedChange]);
return /* @__PURE__ */ jsxs(Menu$1.Item, {
...rest,
className: (state) => cx(styles.item, danger && styles.danger, typeof className === "function" ? className(state) : className),
closeOnClick,
disabled,
onClick: (e) => {
e.preventDefault();
if (!disabled) handleCheckedChange(!checked);
},
children: [children, /* @__PURE__ */ jsx(Switch, {
checked,
disabled,
onChange: handleCheckedChange,
onClick: (_, e) => e.stopPropagation(),
size: "small",
style: { marginInlineStart: 16 }
})]
});
};
DropdownMenuSwitchItem.displayName = "DropdownMenuSwitchItem";
//#endregion
export { DROPDOWN_MENU_CONTAINER_ATTR, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem, DropdownMenuTrigger };
//# sourceMappingURL=atoms.mjs.map