@skalfa/skalfa-component 1.0.30 → 1.0.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/nav/Sidebar.component.d.ts +3 -1
  2. package/dist/nav/Sidebar.component.js +5 -5
  3. package/package.json +1 -1
  4. package/src/nav/Sidebar.component.tsx +8 -1
package/dist/nav/Sidebar.component.d.ts CHANGED
@@ -5,6 +5,7 @@ export interface SidebarItemProps {
5
5
  leftContent?: any;
6
6
  rightContent?: any;
7
7
  path?: string;
8
+ prefetch?: boolean;
8
9
  items?: SidebarItemProps[];
9
10
  className?: string;
10
11
  }
@@ -20,10 +21,11 @@ export interface sidebarProps {
20
21
  footer?: any;
21
22
  items?: SidebarHeadItemProps[];
22
23
  basePath?: string;
24
+ prefetch?: boolean;
23
25
  /** Use custom class with: "backdrop::", "head-item::", "item::", "child-item::". */
24
26
  className?: string;
25
27
  }
26
- export declare function SidebarComponent({ id, head, footer, items, basePath, className, }: sidebarProps): import("@types/react").JSX.Element;
28
+ export declare function SidebarComponent({ id, head, footer, items, basePath, prefetch, className, }: sidebarProps): import("@types/react").JSX.Element;
27
29
  export declare function SidebarContentComponent({ children }: {
28
30
  children: ReactNode;
29
31
  }): import("@types/react").JSX.Element;
package/dist/nav/Sidebar.component.js CHANGED
@@ -16,15 +16,15 @@ const skalfa_icon_1 = require("@skalfa/skalfa-icon");
16
16
  ;
17
17
  ;
18
18
  ;
19
- function SidebarWrapper({ path, children, onClick, }) {
19
+ function SidebarWrapper({ path, prefetch, children, onClick, }) {
20
20
  if (path) {
21
- return (0, jsx_runtime_1.jsx)(link_1.default, { href: path, children: children });
21
+ return (0, jsx_runtime_1.jsx)(link_1.default, { href: path, prefetch: prefetch, onClick: () => onClick?.(), children: children });
22
22
  }
23
23
  else {
24
24
  return (0, jsx_runtime_1.jsx)("div", { onClick: () => onClick?.(), children: children });
25
25
  }
26
26
  }
27
- function SidebarComponent({ id, head, footer, items, basePath, className = "", }) {
27
+ function SidebarComponent({ id, head, footer, items, basePath, prefetch, className = "", }) {
28
28
  const pathName = (0, navigation_1.usePathname)();
29
29
  const { toggle, setToggle } = (0, _contexts_1.useToggleContext)();
30
30
  const [shows, setShows] = (0, react_1.useState)([]);
@@ -67,12 +67,12 @@ function SidebarComponent({ id, head, footer, items, basePath, className = "", }
67
67
  return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("sidebar-backdrop", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "scale-100 lg:scale-0" : "scale-0", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => setToggle(`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`) }), (0, jsx_runtime_1.jsxs)("aside", { className: (0, _utils_1.cn)("sidebar-base scroll-sm", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "w-full sm:w-[280px]" : "w-0 sm:w-14 lg:w-[280px]", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsx)("div", { className: toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "block" : "hidden lg:block", children: head }), (0, jsx_runtime_1.jsx)("div", { className: toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "hidden" : "flex justify-center pt-4 h-full lg:hidden", onClick: () => setToggle(`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/bars" }) }), (0, jsx_runtime_1.jsx)("nav", { className: (0, _utils_1.cn)("flex flex-col flex-1 overflow-y-auto overflow-x-hidden", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "w-full" : "w-0 lg:w-full"), children: items?.map((menu_head, menu_head_key) => {
68
68
  return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("sidebar-head-item", menu_head?.collapse && "cursor-pointer", (0, _utils_1.pcn)(className, "head-item"), menu_head?.className), onClick: () => setShow(String(menu_head_key)), children: [menu_head?.label, menu_head.collapse && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-down", className: (0, _utils_1.cn)(checkShow(String(menu_head_key)) && "rotate-180") }))] }), (!menu_head?.collapse || checkShow(String(menu_head_key))) &&
69
69
  menu_head?.items?.map((menu, menu_key) => {
70
- return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SidebarWrapper, { path: menu?.path ? `${basePath || ""}${menu?.path}` : "", onClick: () => setShow(`${menu_head_key}.${menu_key}`), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("sidebar-item", menu?.path && cekActive(menu?.path || "") && "sidebar-item-active", (0, _utils_1.pcn)(className, "item"), menu?.className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [menu?.leftContent, (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: menu?.label })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [menu?.rightContent, menu?.items?.length && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-up", className: `text-[10px] ${checkShow(`${menu_head_key}.${menu_key}`) || "rotate-180"}` }))] })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "px-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col", children: menu?.items?.length &&
70
+ return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SidebarWrapper, { path: menu?.path ? `${basePath || ""}${menu?.path}` : "", prefetch: menu?.prefetch ?? prefetch, onClick: () => setShow(`${menu_head_key}.${menu_key}`), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("sidebar-item", menu?.path && cekActive(menu?.path || "") && "sidebar-item-active", (0, _utils_1.pcn)(className, "item"), menu?.className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [menu?.leftContent, (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: menu?.label })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [menu?.rightContent, menu?.items?.length && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-up", className: `text-[10px] ${checkShow(`${menu_head_key}.${menu_key}`) || "rotate-180"}` }))] })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "px-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col", children: menu?.items?.length &&
71
71
  checkShow(`${menu_head_key}.${menu_key}`) &&
72
72
  menu?.items?.map((child, menu_child_key) => {
73
73
  return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(SidebarWrapper, { path: child?.path
74
74
  ? `${basePath || ""}${child?.path}`
75
- : "", onClick: () => setShow(`${menu_head_key}.${menu_key}.${menu_child_key}`), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("sidebar-child-item", child?.path &&
75
+ : "", prefetch: child?.prefetch ?? menu?.prefetch ?? prefetch, onClick: () => setShow(`${menu_head_key}.${menu_key}.${menu_child_key}`), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("sidebar-child-item", child?.path &&
76
76
  cekActive(child?.path || "") &&
77
77
  "sidebar-child-item-active", (0, _utils_1.pcn)(className, "child-item"), child?.className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [child?.leftContent, (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] font-medium", children: child?.label })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [child?.rightContent, child?.items?.length && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-up", className: `block text-[10px] ${checkShow(`${menu_head_key}.${menu_key}`) || "rotate-180"}` }))] })] }) }) }, `${menu_head_key}.${menu_key}.${menu_child_key}`));
78
78
  }) }) })] }, `${menu_head_key}.${menu_key}`));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skalfa/skalfa-component",
3
- "version": "1.0.30",
3
+ "version": "1.0.31",
4
4
  "description": "Reusable UI components for Skalfa App.",
5
5
  "license": "MIT",
6
6
  "keywords": [
package/src/nav/Sidebar.component.tsx CHANGED
@@ -17,6 +17,7 @@ export interface SidebarItemProps {
17
17
  leftContent ?: any;
18
18
  rightContent ?: any;
19
19
  path ?: string;
20
+ prefetch ?: boolean;
20
21
  items ?: SidebarItemProps[];
21
22
  className ?: string;
22
23
  };
@@ -34,6 +35,7 @@ export interface sidebarProps {
34
35
  footer ?: any;
35
36
  items ?: SidebarHeadItemProps[];
36
37
  basePath ?: string;
38
+ prefetch ?: boolean;
37
39
 
38
40
  /** Use custom class with: "backdrop::", "head-item::", "item::", "child-item::". */
39
41
  className?: string;
@@ -41,6 +43,7 @@ export interface sidebarProps {
41
43
 
42
44
  interface sidebarWrapperProps {
43
45
  path ?: string;
46
+ prefetch ?: boolean;
44
47
  onClick ?: () => void;
45
48
  children ?: any;
46
49
  }
@@ -50,11 +53,12 @@ interface sidebarWrapperProps {
50
53
 
51
54
  function SidebarWrapper({
52
55
  path,
56
+ prefetch,
53
57
  children,
54
58
  onClick,
55
59
  } : sidebarWrapperProps) {
56
60
  if (path) {
57
- return <Link href={path}>{children}</Link>;
61
+ return <Link href={path} prefetch={prefetch} onClick={() => onClick?.()}>{children}</Link>;
58
62
  } else {
59
63
  return <div onClick={() => onClick?.()}>{children}</div>;
60
64
  }
@@ -68,6 +72,7 @@ export function SidebarComponent({
68
72
  footer,
69
73
  items,
70
74
  basePath,
75
+ prefetch,
71
76
  className = "",
72
77
  } : sidebarProps) {
73
78
  const pathName = usePathname();
@@ -189,6 +194,7 @@ export function SidebarComponent({
189
194
  path={
190
195
  menu?.path ? `${basePath || ""}${menu?.path}` : ""
191
196
  }
197
+ prefetch={menu?.prefetch ?? prefetch}
192
198
  onClick={() =>
193
199
  setShow(`${menu_head_key}.${menu_key}`)
194
200
  }
@@ -238,6 +244,7 @@ export function SidebarComponent({
238
244
  ? `${basePath || ""}${child?.path}`
239
245
  : ""
240
246
  }
247
+ prefetch={child?.prefetch ?? menu?.prefetch ?? prefetch}
241
248
  onClick={() =>
242
249
  setShow(
243
250
  `${menu_head_key}.${menu_key}.${menu_child_key}`,