fix layout
This commit is contained in:
Rizky
parent
f3fb37fcec
commit
604b6f4ebf
|
|
@ -149,8 +149,8 @@ export const TableEdit: FC<{
|
||||||
);
|
);
|
||||||
fm.render();
|
fm.render();
|
||||||
},
|
},
|
||||||
add: () => {
|
add: (e: any) => {
|
||||||
tbl.data.push({});
|
tbl.data.push(e ? e : {});
|
||||||
fm.render();
|
fm.render();
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
|
|
@ -163,8 +163,8 @@ export const TableEdit: FC<{
|
||||||
</div>
|
</div>
|
||||||
<PassProp
|
<PassProp
|
||||||
ext_fm={{
|
ext_fm={{
|
||||||
add: () => {
|
add: (e: any) => {
|
||||||
local.tbl.data.push({});
|
local.tbl.data.push(e ? e : {});
|
||||||
fm.render();
|
fm.render();
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|
|
||||||
|
|
@ -1,258 +0,0 @@
|
||||||
import { getPathname } from "lib/utils/pathname";
|
|
||||||
import { useLocal } from "lib/utils/use-local";
|
|
||||||
import get from "lodash.get";
|
|
||||||
import { FC, useRef } from "react";
|
|
||||||
import { IMenu, MenuProp } from "../../preset/menu/utils/type-menu";
|
|
||||||
|
|
||||||
export const Menu: FC<MenuProp> = (props) => {
|
|
||||||
const imenu = props.menu[0];
|
|
||||||
let role = props.role;
|
|
||||||
role = props.on_init() as string;
|
|
||||||
const PassProp = props.PassProp;
|
|
||||||
let menu = imenu[role] || [];
|
|
||||||
const pathname = getPathname();
|
|
||||||
const local = useLocal({
|
|
||||||
open: [] as Array<any>,
|
|
||||||
cache: false,
|
|
||||||
active: null as any,
|
|
||||||
});
|
|
||||||
if (!local.open.length && !local.cache) {
|
|
||||||
const result = findChildMenu(menu, (e: any) => e[2] === pathname);
|
|
||||||
if (Array.isArray(result)) {
|
|
||||||
local.open.push(result);
|
|
||||||
local.active = result;
|
|
||||||
local.cache = true;
|
|
||||||
local.render();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const ref = useRef<HTMLDivElement>(null);
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
ref={ref}
|
|
||||||
className={cx(
|
|
||||||
props.mode === "mini" ? "c-max-w-[35px]" : "",
|
|
||||||
"c-h-full c-w-full c-flex c-flex-row c-flex-grow c-px-3 c-py-4 c-overflow-y-auto c-rounded "
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<SideBar data={menu} local={local} pm={props} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export const SideBar: FC<{
|
|
||||||
data: IMenu[];
|
|
||||||
local: any;
|
|
||||||
dept?: number;
|
|
||||||
pm: MenuProp;
|
|
||||||
}> = ({ data, local, dept, pm }) => {
|
|
||||||
const PassProp = pm.PassProp;
|
|
||||||
console.log({ data });
|
|
||||||
return (
|
|
||||||
<div className="c-flex c-flex-col c-flex-grow">
|
|
||||||
{data.map((item) => {
|
|
||||||
const menu = {
|
|
||||||
label: item[0],
|
|
||||||
icon: item[1],
|
|
||||||
value: item[2],
|
|
||||||
};
|
|
||||||
return <div key={item[0]}>asdas {typeof menu.icon}</div>;
|
|
||||||
// const find_child = findChild(item, (e: any) => local.open.includes(e));
|
|
||||||
// let expand = find_child;
|
|
||||||
// if (find_child && !local.open.includes(item)) local.open.push(item);
|
|
||||||
// return (
|
|
||||||
// <div className="w-full c-flex c-flex-col">
|
|
||||||
// <div
|
|
||||||
// onClick={() => {
|
|
||||||
// const childs = getChilds(item) || [];
|
|
||||||
// if (local.open.includes(item)) {
|
|
||||||
// local.open = local.open.filter(
|
|
||||||
// (e: any) => e !== item && !childs.includes(e)
|
|
||||||
// );
|
|
||||||
// } else {
|
|
||||||
// local.open.push(item);
|
|
||||||
// }
|
|
||||||
// local.active = item;
|
|
||||||
// local.render();
|
|
||||||
// }}
|
|
||||||
// >
|
|
||||||
// <PassProp
|
|
||||||
// item={menu}
|
|
||||||
// dept={dept || 0}
|
|
||||||
// hasChild={Array.isArray(menu.value)}
|
|
||||||
// selected={local.active === item}
|
|
||||||
// expand={expand}
|
|
||||||
// mode={pm.mode}
|
|
||||||
// >
|
|
||||||
// {pm.child}
|
|
||||||
// </PassProp>
|
|
||||||
// </div>
|
|
||||||
// <div className="c-flex c-flex-col">
|
|
||||||
// {Array.isArray(menu.value) && expand ? (
|
|
||||||
// <>
|
|
||||||
// <SideBar
|
|
||||||
// data={menu.value}
|
|
||||||
// local={local}
|
|
||||||
// dept={(dept || 0) + 1}
|
|
||||||
// pm={pm}
|
|
||||||
// />
|
|
||||||
// </>
|
|
||||||
// ) : (
|
|
||||||
// <></>
|
|
||||||
// )}
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
// );
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
// return (
|
|
||||||
// <div className="c-flex c-flex-col c-gap-2 c-flex-grow">
|
|
||||||
// {data.map((e) => {
|
|
||||||
// const label: string = e[0];
|
|
||||||
// const child: any = e[2];
|
|
||||||
// const hasChildren = Array.isArray(child);
|
|
||||||
// const predicate = (item: MenuActive) => {
|
|
||||||
// if (hasChildren) {
|
|
||||||
// return item.label === e[0] && item.path === "";
|
|
||||||
// } else {
|
|
||||||
// return item.label === e[0] && item.path === child;
|
|
||||||
// }
|
|
||||||
// };
|
|
||||||
// const found_local = local.open.find(predicate);
|
|
||||||
// let expand = get(found_local, "expand") ? true : false;
|
|
||||||
// const selected = found(e, (menu: any) =>
|
|
||||||
// local.open.some(
|
|
||||||
// (item: MenuActive) =>
|
|
||||||
// item.label === menu[0] || item.path === menu[2]
|
|
||||||
// )
|
|
||||||
// );
|
|
||||||
// if (selected && !found_local) {
|
|
||||||
// local.open.push({
|
|
||||||
// label: e[0],
|
|
||||||
// path: hasChildren ? "" : e[2],
|
|
||||||
// expand: hasChildren,
|
|
||||||
// });
|
|
||||||
// expand = true;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// return (
|
|
||||||
// <div
|
|
||||||
// className={cx(
|
|
||||||
// "c-flex c-flex-col c-w-full c-gap-1 c-items-center c-rounded c-pb-0"
|
|
||||||
// )}
|
|
||||||
// >
|
|
||||||
// <div
|
|
||||||
// className={cx(
|
|
||||||
// "c-flex c-w-full c-gap-1 c-flex-grow c-items-center c-rounded c-p-2 sidebar-row"
|
|
||||||
// )}
|
|
||||||
// onClick={() => {
|
|
||||||
// const found_local = local.open.find(predicate);
|
|
||||||
// console.log(found_local);
|
|
||||||
// if (found_local) {
|
|
||||||
// found_local.expand = !found_local.expand;
|
|
||||||
// // local.open = local.open.filter((item: MenuActive) => {
|
|
||||||
// // if (hasChildren) {
|
|
||||||
// // return item.label !== e[0] && item.path === "";
|
|
||||||
// // } else {
|
|
||||||
// // return item.label !== e[0] && item.path !== child;
|
|
||||||
// // }
|
|
||||||
// // });
|
|
||||||
// local.render();
|
|
||||||
// } else {
|
|
||||||
// local.open = [
|
|
||||||
// {
|
|
||||||
// label: e[0],
|
|
||||||
// path: hasChildren ? "" : e[2],
|
|
||||||
// expand: hasChildren,
|
|
||||||
// },
|
|
||||||
// ];
|
|
||||||
// }
|
|
||||||
// local.render();
|
|
||||||
// console.log(local.open);
|
|
||||||
// }}
|
|
||||||
// >
|
|
||||||
// <PassProp
|
|
||||||
// item={e}
|
|
||||||
// dept={dept || 0}
|
|
||||||
// hasChild={hasChildren}
|
|
||||||
// selected={selected}
|
|
||||||
// >
|
|
||||||
// {pm.child}
|
|
||||||
// </PassProp>
|
|
||||||
// </div>
|
|
||||||
// {hasChildren && selected && expand ? (
|
|
||||||
// <div className="sidebar-child c-flex c-w-full c-pb-0 c-gap-1 c-pl-2 c-flex-grow c-items-center c-rounded c-py-2">
|
|
||||||
// <SideBar
|
|
||||||
// data={child}
|
|
||||||
// local={local}
|
|
||||||
// dept={(dept || 0) + 1}
|
|
||||||
// pm={pm}
|
|
||||||
// />
|
|
||||||
// </div>
|
|
||||||
// ) : (
|
|
||||||
// <></>
|
|
||||||
// )}
|
|
||||||
// </div>
|
|
||||||
// );
|
|
||||||
// })}
|
|
||||||
// </div>
|
|
||||||
// );
|
|
||||||
};
|
|
||||||
|
|
||||||
const getChilds = (data: Array<any>) => {
|
|
||||||
let childs = [];
|
|
||||||
childs.push(data);
|
|
||||||
const children = data[2]; // array index ke-2 bisa berupa array atau string
|
|
||||||
if (Array.isArray(children)) {
|
|
||||||
for (let child of children) {
|
|
||||||
childs.push(child);
|
|
||||||
if (Array.isArray(child[2])) {
|
|
||||||
const result: any = getChilds(child);
|
|
||||||
childs = childs.concat(result);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return childs;
|
|
||||||
};
|
|
||||||
|
|
||||||
const found = (data: Array<any>, predicate: any) => {
|
|
||||||
const result = findChild(data, predicate);
|
|
||||||
return result ? true : false;
|
|
||||||
};
|
|
||||||
const findChild = (data: Array<any>, predicate: any) => {
|
|
||||||
const children = data[2]; // array index ke-2 bisa berupa array atau string
|
|
||||||
if (predicate(data)) {
|
|
||||||
// kalau data ada yang cocok dari prediksi maka true, kalau gk jalankan false
|
|
||||||
return data;
|
|
||||||
} else {
|
|
||||||
if (Array.isArray(children)) {
|
|
||||||
// jika ada children, loop anaknya dan cari hingga sesuai prediksi
|
|
||||||
for (let child of children) {
|
|
||||||
const result: any = findChild(child, predicate);
|
|
||||||
if (result) return result;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// jika data tidak mengandung children maka cari sesuai prediksi
|
|
||||||
if (predicate(data)) {
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
const findChildMenu = (data: Array<any>, predicate: any) => {
|
|
||||||
let result = null as any;
|
|
||||||
if (data.length) {
|
|
||||||
data.map((e) => {
|
|
||||||
let found = findChild(e, predicate);
|
|
||||||
if (found) {
|
|
||||||
result = found;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const MenuIcon: FC<{ child: any }> = ({ child }) => {
|
|
||||||
return <>{child}</>;
|
|
||||||
};
|
|
||||||
|
|
@ -37,10 +37,11 @@ type LYTChild = {
|
||||||
exception?: Array<string>;
|
exception?: Array<string>;
|
||||||
blank_layout: ReactNode;
|
blank_layout: ReactNode;
|
||||||
login_url: string;
|
login_url: string;
|
||||||
|
PassProp: any;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const Layout: FC<LYTChild> = (props) => {
|
export const Layout: FC<LYTChild> = (props) => {
|
||||||
const local = useLocal({loading: true})
|
const local = useLocal({ loading: false });
|
||||||
const render = local.render;
|
const render = local.render;
|
||||||
useLayoutEffect(() => {
|
useLayoutEffect(() => {
|
||||||
if (!isEditor) {
|
if (!isEditor) {
|
||||||
|
|
@ -78,5 +79,19 @@ export const Layout: FC<LYTChild> = (props) => {
|
||||||
if (path === props.login_url) return props.blank_layout;
|
if (path === props.login_url) return props.blank_layout;
|
||||||
if (!w.user && !isEditor) return props.blank_layout;
|
if (!w.user && !isEditor) return props.blank_layout;
|
||||||
|
|
||||||
return <>{props.default_layout}</>;
|
return (
|
||||||
|
<props.PassProp
|
||||||
|
is_loading={local.loading}
|
||||||
|
page_load={(on_load: (done: () => void) => void) => {
|
||||||
|
local.loading = true;
|
||||||
|
local.render();
|
||||||
|
on_load(() => {
|
||||||
|
local.loading = false;
|
||||||
|
local.render();
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{props.default_layout}
|
||||||
|
</props.PassProp>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -170,8 +170,6 @@ export const SideBar: FC<{
|
||||||
typeof menu.value === "string"
|
typeof menu.value === "string"
|
||||||
) {
|
) {
|
||||||
if (pm.on_load) {
|
if (pm.on_load) {
|
||||||
let done = { exec: () => {} };
|
|
||||||
console.log(preloaded(menu.value));
|
|
||||||
if (preloaded(menu.value)) {
|
if (preloaded(menu.value)) {
|
||||||
pm.on_load((exec) => {
|
pm.on_load((exec) => {
|
||||||
if (typeof menu.value === "string")
|
if (typeof menu.value === "string")
|
||||||
|
|
@ -179,6 +177,7 @@ export const SideBar: FC<{
|
||||||
exec();
|
exec();
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
let done = { exec: () => {} };
|
||||||
pm.on_load((exec) => {
|
pm.on_load((exec) => {
|
||||||
done.exec = exec;
|
done.exec = exec;
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue