UNPKG

@airplane/views

Version:

A React library for building Airplane views. Views components are optimized in style and functionality to produce internal apps that are easy to build and maintain.

130 lines (129 loc) 3.89 kB
import { jsx, jsxs } from "react/jsx-runtime"; import { Tabs as Tabs$1 } from "@mantine/core"; import { useEffect, useMemo, isValidElement } from "react"; import { ComponentErrorBoundary } from "../errorBoundary/ComponentErrorBoundary.js"; import { Text } from "../text/Text.js"; import { useTabsRouting } from "../../routing/useTabsRouting.js"; import { useTabsState } from "../../state/components/tabs/useTabsState.js"; import { useComponentId } from "../../state/components/useId.js"; import flattenChildren from "./flattenchildren.js"; import { useStyles } from "./Tabs.styles.js"; const DEFAULT_PLACEMENT = "top"; const DEFAULT_POSITION = "start"; const DEFAULT_GROW = false; const POSITION_TO_MANTINE_POSITION = { start: "left", end: "right", apart: "apart", center: "center" }; const TabsComponent = ({ placement = DEFAULT_PLACEMENT, position = DEFAULT_POSITION, grow = DEFAULT_GROW, children, ...props }) => { const { classes } = useStyles({ placement }); const panelContents = useMemo(() => flattenChildren(children).filter((c) => /* @__PURE__ */ isValidElement(c) && c.props.value && c.props.children).map((c) => ({ value: c.props.value, contents: c.props.children })), [children]); const TabsList = useMemo(() => /* @__PURE__ */ jsx(Tabs$1.List, { position: POSITION_TO_MANTINE_POSITION[position], grow, children }), [children, grow, position]); let orientation; let inverted = false; let mantinePlacement; switch (placement) { case "top": orientation = "horizontal"; break; case "bottom": orientation = "horizontal"; inverted = true; break; case "left": orientation = "vertical"; mantinePlacement = "left"; break; case "right": orientation = "vertical"; mantinePlacement = "right"; break; } return /* @__PURE__ */ jsxs(Tabs$1, { ...props, inverted, orientation, placement: mantinePlacement, classNames: { root: classes.root, tabLabel: classes.tabLabel, tabIcon: classes.tabIcon, tab: classes.tab, tabsList: classes.tabsList }, children: [ placement !== "bottom" && TabsList, panelContents.map((p) => /* @__PURE__ */ jsx(Tabs$1.Panel, { value: p.value, className: classes.panel, children: /* @__PURE__ */ jsx(Text, { children: p.contents }) }, p.value)), placement === "bottom" && TabsList ] }); }; const Tabs = ({ defaultValue = null, id: propId, onTabChange: propsOnTabChange, value: controlledValue, routingKey = null, ...props }) => { const id = useComponentId(propId); const { routerValue, navigateTab } = useTabsRouting(routingKey); const { value, setValue } = useTabsState(id, { initialState: { value: controlledValue || routerValue || defaultValue } }); useEffect(() => { if (routingKey !== null) { if (routerValue !== void 0) { setValue(routerValue); } else { setValue(defaultValue); } } }, [routingKey, routerValue, defaultValue, setValue]); return /* @__PURE__ */ jsx(ComponentErrorBoundary, { componentName: Tabs.displayName, children: /* @__PURE__ */ jsx(TabsComponent, { value: controlledValue !== void 0 ? controlledValue : value, onTabChange: (v) => { setValue(v); if (propsOnTabChange) { propsOnTabChange(v); } navigateTab(v); }, ...props }) }); }; const TabComponent = ({ children, value, label = value, ...props }) => { return /* @__PURE__ */ jsx(Tabs$1.Tab, { value, ...props, children: label }); }; const Tab = ({ ...props }) => { return /* @__PURE__ */ jsx(ComponentErrorBoundary, { componentName: Tab.displayName, children: /* @__PURE__ */ jsx(TabComponent, { ...props }) }); }; Tabs.displayName = "Tabs"; Tab.displayName = "Tabs.Tab"; Tabs.Tab = Tab; export { Tab, TabComponent, Tabs, TabsComponent }; //# sourceMappingURL=Tabs.js.map