@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
68 lines (65 loc) • 1.78 kB
JavaScript
"use client";
import DropdownMenu from "../DropdownMenu/DropdownMenu.mjs";
import Button from "./Button.mjs";
import { createContext, use, useMemo } from "react";
import { jsx } from "react/jsx-runtime";
import { createStaticStyles, cx } from "antd-style";
import { ChevronDownIcon } from "lucide-react";
//#region src/base-ui/Button/SplitButton.tsx
const SplitButtonContext = createContext({});
const styles = createStaticStyles(({ css }) => ({ splitButton: css`
display: inline-flex;
flex-direction: row;
& > :where(button, a):first-of-type {
border-start-end-radius: 0;
border-end-end-radius: 0;
}
& > :where(button, a):last-of-type {
margin-inline-start: -1px;
border-start-start-radius: 0;
border-end-start-radius: 0;
}
` }));
const SplitButton = ({ children, className, style, danger, disabled, loading, size, type }) => {
return /* @__PURE__ */ jsx(SplitButtonContext, {
value: useMemo(() => ({
danger,
disabled,
loading,
size,
type
}), [
danger,
disabled,
loading,
size,
type
]),
children: /* @__PURE__ */ jsx("div", {
className: cx(styles.splitButton, className),
style,
children
})
});
};
const SplitButtonMain = (props) => {
return /* @__PURE__ */ jsx(Button, {
...use(SplitButtonContext),
...props
});
};
const SplitButtonMenu = ({ icon = /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14 }), ...menuProps }) => {
const shared = use(SplitButtonContext);
return /* @__PURE__ */ jsx(DropdownMenu, {
...menuProps,
children: /* @__PURE__ */ jsx(Button, {
...shared,
icon
})
});
};
SplitButton.Main = SplitButtonMain;
SplitButton.Menu = SplitButtonMenu;
//#endregion
export { SplitButton as default };
//# sourceMappingURL=SplitButton.mjs.map