96 lines
2.7 KiB
TypeScript
Executable File
96 lines
2.7 KiB
TypeScript
Executable File
import { FC } from "react";
|
|
import { MDLocal, MDRef } from "./utils/typings";
|
|
import { MDHeader } from "./MDHeader";
|
|
|
|
export const should_show_tab = (md: MDLocal) => {
|
|
if (isEditor) {
|
|
if (md.tab.active !== "") return true;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
export const MDTab: FC<{ md: MDLocal; mdr: MDRef }> = ({ md, mdr }) => {
|
|
const detail = md.childs[md.tab.active];
|
|
const PassProp = mdr.PassProp;
|
|
if (!detail) {
|
|
return null;
|
|
}
|
|
|
|
|
|
return (
|
|
<>
|
|
{md.props.show_head === "only-child" && <MDHeader md={md} mdr={mdr} />}
|
|
<div
|
|
className={cx(
|
|
"c-w-full c-h-full c-flex c-flex-1",
|
|
md.props.tab_mode === "v-tab" && "c-flex-col"
|
|
)}
|
|
>
|
|
{md.props.tab_mode !== "hidden" && md.tab.list.length > 1 && (
|
|
<MDNavTab md={md} mdr={mdr} />
|
|
)}
|
|
<PassProp md={md}>{detail.internal}</PassProp>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const MDNavTab: FC<{ md: MDLocal; mdr: MDRef }> = ({ md, mdr }) => {
|
|
const mode = md.props.tab_mode;
|
|
return (
|
|
<div
|
|
className={cx(
|
|
"tab-list c-flex c-text-sm",
|
|
mode === "v-tab" && "c-flex-row c-border-b c-pl-2",
|
|
mode === "h-tab" && "c-flex-col c-border-r c-pl-2 c-min-w-[100px]"
|
|
)}
|
|
>
|
|
{md.tab.list.map((tab_name, idx) => {
|
|
const child = md.childs[tab_name];
|
|
if (!child) return null;
|
|
return (
|
|
<div
|
|
className={cx(
|
|
"tab-item c-py-1 hover:c-bg-blue-50 c-cursor-pointer c-relative",
|
|
tab_name === md.tab.active && "active",
|
|
mode === "v-tab" &&
|
|
cx(
|
|
"c-px-3 c-border-t c-border-r",
|
|
idx === 0 && "c-border-l",
|
|
tab_name === md.tab.active &&
|
|
"c-border-b-[3px] c-border-b-blue-600 c-bg-blue-50"
|
|
),
|
|
mode === "h-tab" &&
|
|
cx(
|
|
"c-pl-3 c-border-l c-border-b",
|
|
idx === 0 && "c-border-t",
|
|
tab_name === md.tab.active && " c-bg-blue-50"
|
|
)
|
|
)}
|
|
key={tab_name}
|
|
onClick={() => {
|
|
if (isEditor) return;
|
|
md.tab.active = tab_name;
|
|
md.params.apply();
|
|
md.render();
|
|
}}
|
|
>
|
|
{tab_name === md.tab.active && (
|
|
<div
|
|
className={cx(
|
|
"c-absolute",
|
|
mode === "h-tab" &&
|
|
cx(
|
|
"c-border-l-4 c-border-l-blue-600 c-left-0 c-bottom-0 c-top-0"
|
|
)
|
|
)}
|
|
></div>
|
|
)}
|
|
{child.label}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|