@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
JavaScript
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