101 lines
2.3 KiB
TypeScript
Executable File
101 lines
2.3 KiB
TypeScript
Executable File
import { useLocal } from "@/utils/use-local";
|
|
import { FC, useEffect, useRef } from "react";
|
|
import { ModeFull } from "./mode/full";
|
|
import { ModeHSplit } from "./mode/h-split";
|
|
import { ModeVSplit } from "./mode/v-split";
|
|
import { MDHeader } from "./parts/MDHeader";
|
|
import { editorMDInit } from "./utils/editor-init";
|
|
import {
|
|
masterDetailApplyParams,
|
|
masterDetailParseHash as masterDetailParseParams,
|
|
} from "./utils/md-hash";
|
|
import { masterDetailInit, masterDetailSelected } from "./utils/md-init";
|
|
import { MDLocalInternal, MDProps } from "./utils/typings";
|
|
|
|
export const MasterDetail: FC<MDProps> = (arg) => {
|
|
const {
|
|
PassProp,
|
|
child,
|
|
name,
|
|
mode,
|
|
show_head,
|
|
tab_mode,
|
|
editor_tab,
|
|
gen_fields,
|
|
gen_table,
|
|
on_init,
|
|
_item,
|
|
} = arg;
|
|
const _ref = useRef({ PassProp, child, item: _item });
|
|
const mdr = _ref.current;
|
|
const md = useLocal<MDLocalInternal>({
|
|
name,
|
|
actions: [],
|
|
breadcrumb: [],
|
|
selected: null,
|
|
tab: {
|
|
active: "",
|
|
list: [],
|
|
},
|
|
internal: { action_should_refresh: true },
|
|
childs: {},
|
|
props: {
|
|
mode,
|
|
show_head,
|
|
tab_mode,
|
|
editor_tab,
|
|
gen_fields,
|
|
gen_table,
|
|
on_init,
|
|
},
|
|
params: {
|
|
hash: {},
|
|
tabs: {},
|
|
parse: () => {
|
|
masterDetailParseParams(md);
|
|
},
|
|
apply: () => {
|
|
masterDetailApplyParams(md);
|
|
},
|
|
},
|
|
master: { internal: null, render() {} },
|
|
panel: {
|
|
size: 25,
|
|
min_size: 0,
|
|
},
|
|
});
|
|
|
|
const local = useLocal({ init: false });
|
|
if (isEditor) {
|
|
editorMDInit(md, arg);
|
|
}
|
|
|
|
mdr.PassProp = PassProp;
|
|
mdr.child = child;
|
|
mdr.item = _item;
|
|
|
|
useEffect(() => {
|
|
local.init = false;
|
|
local.render();
|
|
}, [editor_tab]);
|
|
|
|
if (!local.init || isEditor) {
|
|
local.init = true;
|
|
masterDetailInit(md, child, editor_tab);
|
|
masterDetailSelected(md);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cx(
|
|
"c-flex-1 c-flex-col c-flex c-w-full c-h-full c-overflow-hidden"
|
|
)}
|
|
>
|
|
{md.props.show_head === "always" && <MDHeader md={md} mdr={mdr} />}
|
|
{md.props.mode === "full" && <ModeFull md={md} mdr={mdr} />}
|
|
{md.props.mode === "v-split" && <ModeVSplit md={md} mdr={mdr} />}
|
|
{md.props.mode === "h-split" && <ModeHSplit md={md} mdr={mdr} />}
|
|
</div>
|
|
);
|
|
};
|