@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
69 lines (68 loc) • 2.22 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
import Icon from "../Icon/Icon.js";
import Inline from "../Inline/Inline.js";
import InlineStretch from "../Inline/Inline.Stretch.js";
import DropdownItem from "./Dropdown.Item.js";
import Dropdown from "./Dropdown.js";
/**
* Nested group of dropdown items.
* Useful for dropdown menus with multiple levels, can be nested inside eachother.
* @example
* <Dropdown
* content={
* <Dropdown.Group name="Group">
* <Dropdown.Item>Item 1</Dropdown.Item>
* <Dropdown.Item>Item 2</Dropdown.Item>
* </Dropdown.Group>
* }
* >
* <Button>Two levels</Button>
* </Dropdown>
* @example
* <Dropdown
* content={
* <Dropdown.Group name="Group">
* <Dropdown.Group name="Nested Group A">
* <Dropdown.Item>Item A1</Dropdown.Item>
* <Dropdown.Item>Item A2</Dropdown.Item>
* </Dropdown.Group>
* <Dropdown.Group name="Nested Group B">
* <Dropdown.Item>Item B1</Dropdown.Item>
* <Dropdown.Item>Item B2</Dropdown.Item>
* </Dropdown.Group>
* </Dropdown.Group>
* }
* >
* <Button>Three levels</Button>
* </Dropdown>
* */ const DropdownGroup = ({ icon, children, name })=>{
return /*#__PURE__*/ _jsx(Dropdown, {
placement: "right-start",
offset: [
-9,
19
],
content: children,
children: /*#__PURE__*/ _jsx("button", {
type: "button",
children: /*#__PURE__*/ _jsx(DropdownItem, {
icon: icon,
children: /*#__PURE__*/ _jsxs(Inline, {
align: "center",
children: [
/*#__PURE__*/ _jsx(InlineStretch, {
children: name
}),
/*#__PURE__*/ _jsx(Icon, {
icon: faAngleRight,
widthAuto: true
})
]
})
})
})
});
};
DropdownGroup.displayName = "Dropdown.Group";
export default DropdownGroup;