@skalfa/skalfa-component 1.0.15 → 1.0.17

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/supervision/TableSupervision.component.d.ts +10 -6
  2. package/dist/supervision/TableSupervision.component.js +9 -7
  3. package/package.json +1 -1
  4. package/src/supervision/TableSupervision.component.tsx +20 -14
package/dist/supervision/TableSupervision.component.d.ts CHANGED
@@ -29,11 +29,14 @@ export interface TableSupervisionFormProps {
29
29
  modalControl?: Omit<FloatingPageProps, "show" | "onClose" | "children"> | Omit<BottomSheetProps, "show" | "onClose" | "children">;
30
30
  contentType?: "application/json" | "multipart/form-data";
31
31
  }
32
- export type TableSupervisionDetailProps = boolean | (string | {
33
- label: string;
34
- item: string | ((data: Record<string, any>) => ReactNode);
35
- conversion?: keyof typeof conversion;
36
- } | ((data: Record<string, any>) => ReactNode))[] | ((data: Record<string, any>) => ReactNode);
32
+ export type TableSupervisionDetailProps = boolean | {
33
+ modalControl: Omit<FloatingPageProps, "show" | "onClose">;
34
+ content: (string | {
35
+ label: string;
36
+ item: string | ((data: Record<string, any>) => ReactNode);
37
+ conversion?: keyof typeof conversion;
38
+ } | ((data: Record<string, any>) => ReactNode))[] | ((data: Record<string, any>) => ReactNode);
39
+ };
37
40
  export type TableSupervisionProps = {
38
41
  fetchControl: UseResourceProps;
39
42
  title?: string;
@@ -48,12 +51,13 @@ export type TableSupervisionProps = {
48
51
  detailControl?: TableSupervisionDetailProps;
49
52
  actionControl?: boolean | ('EDIT' | 'DELETE' | {
50
53
  label: string;
51
- modal?: ModalConfirmProps;
54
+ modal?: Omit<ModalConfirmProps, "show" | "onClose">;
52
55
  button?: ButtonProps;
53
56
  shortcut?: {
54
57
  key: string;
55
58
  description: string;
56
59
  };
60
+ on?: (item: Record<string, any>) => boolean;
57
61
  } | ((row: object, setModal?: (type: "EDIT" | "DELETE") => void, setDataSelected?: () => void, reset?: () => void, size?: string) => ReactNode))[];
58
62
  block?: boolean;
59
63
  noIndex?: boolean;
package/dist/supervision/TableSupervision.component.js CHANGED
@@ -92,7 +92,9 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
92
92
  } }, key));
93
93
  }
94
94
  if (typeof action == "object") {
95
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { label: action?.button?.label || action?.label, variant: action?.button?.variant || "outline", paint: action?.button?.paint || "primary", size: action?.button?.size || options?.size || "xs", rounded: action?.button?.rounded || true, className: action?.button?.className, onClick: () => {
95
+ if (action.on && !action.on?.(item || {}))
96
+ return;
97
+ return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { label: action?.button?.label || action?.label, variant: action?.button?.variant || "outline", paint: action?.button?.paint || "primary", size: action?.button?.size || options?.size || "xs", rounded: action?.button?.rounded || true, className: action?.button?.className, onClick: () => {
96
98
  if (action?.button?.onClick) {
97
99
  action?.button?.onClick(item);
98
100
  }
@@ -100,7 +102,7 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
100
102
  setToggle(`MODAL_${_utils_1.conversion.strSnake(action?.label).toUpperCase()}_${toggleKey}`);
101
103
  item && setSelected?.(item);
102
104
  }
103
- }, ...action.button }, `action-object-${key}`) }));
105
+ }, ...action.button }) }, `action-object-${key}`));
104
106
  }
105
107
  if (typeof action == "function") {
106
108
  return ((0, jsx_runtime_1.jsx)("span", { children: action(item || {}, (type) => {
@@ -134,7 +136,7 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
134
136
  const detailPage = (0, react_1.useMemo)(() => {
135
137
  if (!toggle[`MODAL_SHOW_${toggleKey}`])
136
138
  return null;
137
- return ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("flex flex-col gap-y-4"), children: !!selected && (typeof detailControl === "object" && detailControl?.length ? detailControl?.map((column, key) => {
139
+ return ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("flex flex-col gap-y-4"), children: !!selected && (typeof detailControl === "object" && typeof detailControl.content === "object" && detailControl?.content?.length ? detailControl?.content?.map((column, key) => {
138
140
  if (typeof column === "string") {
139
141
  return ((0, jsx_runtime_1.jsx)(__1.TypographyColumnComponent, { title: columns?.find((c) => c.selector == column)?.label, content: selected[column] }, key));
140
142
  }
@@ -144,7 +146,7 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
144
146
  else {
145
147
  return column?.(selected);
146
148
  }
147
- }) : typeof detailControl == "function" ? detailControl(selected) : columns?.map((column, key) => ((0, jsx_runtime_1.jsx)(__1.TypographyColumnComponent, { title: column.label, content: selected[column.selector] }, key)))) }) }));
149
+ }) : typeof detailControl === "object" && typeof detailControl.content === "function" ? detailControl?.content?.(selected) : columns?.map((column, key) => ((0, jsx_runtime_1.jsx)(__1.TypographyColumnComponent, { title: column.label, content: selected[column.selector] }, key)))) }) }));
148
150
  }, [selected, detailControl]);
149
151
  // ============================
150
152
  // ## Form preparation
@@ -166,7 +168,7 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
166
168
  construction: {
167
169
  name: typeof col == "string" ? col : col?.selector,
168
170
  label: typeof col == "string" ? col : col?.label,
169
- placeholder: l.base.inputPlaceholder ? l.base.inputPlaceholder(`${typeof col == "string" ? col : col?.label}`) : `Enter ${typeof col == "string" ? col : col?.label}...`,
171
+ placeholder: l.base.inputPlaceholder ? l.base.inputPlaceholder({ field: `${typeof col == "string" ? col : col?.label}` }) : `Enter ${typeof col == "string" ? col : col?.label}...`,
170
172
  },
171
173
  };
172
174
  }) || (data?.data?.at(0) ? Object.keys(data.data[0]).map((col) => {
@@ -176,7 +178,7 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
176
178
  construction: {
177
179
  name: col,
178
180
  label: col,
179
- placeholder: l.base.inputPlaceholder ? l.base.inputPlaceholder(col) : `Enter ${col}...`,
181
+ placeholder: l.base.inputPlaceholder ? l.base.inputPlaceholder({ field: col }) : `Enter ${col}...`,
180
182
  },
181
183
  };
182
184
  })
@@ -255,7 +257,7 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
255
257
  } : undefined, ...tableControl }), controlBar?.find((cb) => cb == "CREATE") && ((0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/plus", className: "fixed bottom-24 right-4 w-14 h-14 z-20 md:hidden", size: "lg", rounded: true, onClick: () => {
256
258
  setToggle(`MODAL_FORM_${toggleKey}`);
257
259
  setSelected(null);
258
- } })), (0, jsx_runtime_1.jsx)(__1.FloatingPageComponent, { show: !!toggle[`MODAL_SHOW_${toggleKey}`], onClose: () => setToggle(`MODAL_SHOW_${toggleKey}`, false), title: l.base.detailTitle ? l.base.detailTitle() : "Detail", className: "bg-background", footer: renderTableAction(actionControl, undefined, { className: isSm ? "justify-end p-2 bg-background" : "justify-end", size: isSm ? "sm" : "md" }), children: detailPage }), (0, jsx_runtime_1.jsx)(__1.FloatingPageComponent, { show: !!toggle[`MODAL_FORM_${toggleKey}`], onClose: () => setToggle(`MODAL_FORM_${toggleKey}`, false), title: !!selected ? (l.base.editTitle ? l.base.editTitle() : "Edit") : (l.base.addTitle ? l.base.addTitle() : "Add"), className: (0, _utils_1.cn)("bg-white", formControl?.modalControl?.className), children: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: formPage }) }), (0, jsx_runtime_1.jsx)(__1.FloatingPageComponent, { show: !!toggle[`MODAL_EXPORT_${toggleKey}`], onClose: () => setToggle(`MODAL_EXPORT_${toggleKey}`, false), title: l.base.exportTitle ? l.base.exportTitle() : "Export", className: "bg-white md:w-[1200px] max-w-[1200px]", children: (0, jsx_runtime_1.jsx)(ExportExcel, { fetchControl: fetchControl, filename: "export", columnControl: columns?.map((cc) => ({
260
+ } })), (0, jsx_runtime_1.jsx)(__1.FloatingPageComponent, { show: !!toggle[`MODAL_SHOW_${toggleKey}`], onClose: () => setToggle(`MODAL_SHOW_${toggleKey}`, false), title: l.base.detailTitle ? l.base.detailTitle() : "Detail", className: "bg-background", footer: renderTableAction(actionControl, undefined, { className: isSm ? "justify-end p-2 bg-background" : "justify-end", size: isSm ? "sm" : "md" }), ...(typeof detailControl === "object" ? detailControl?.modalControl || {} : {}), children: detailPage }), (0, jsx_runtime_1.jsx)(__1.FloatingPageComponent, { show: !!toggle[`MODAL_FORM_${toggleKey}`], onClose: () => setToggle(`MODAL_FORM_${toggleKey}`, false), title: !!selected ? (l.base.editTitle ? l.base.editTitle() : "Edit") : (l.base.addTitle ? l.base.addTitle() : "Add"), className: (0, _utils_1.cn)("bg-white", formControl?.modalControl?.className), children: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: formPage }) }), (0, jsx_runtime_1.jsx)(__1.FloatingPageComponent, { show: !!toggle[`MODAL_EXPORT_${toggleKey}`], onClose: () => setToggle(`MODAL_EXPORT_${toggleKey}`, false), title: l.base.exportTitle ? l.base.exportTitle() : "Export", className: "bg-white md:w-[1200px] max-w-[1200px]", children: (0, jsx_runtime_1.jsx)(ExportExcel, { fetchControl: fetchControl, filename: "export", columnControl: columns?.map((cc) => ({
259
261
  label: cc.label || "",
260
262
  selector: cc.selector || "",
261
263
  })) }) }), (0, jsx_runtime_1.jsx)(__1.FloatingPageComponent, { show: !!toggle[`MODAL_IMPORT_${toggleKey}`], onClose: () => setToggle(`MODAL_IMPORT_${toggleKey}`, false), title: l.base.importTitle ? l.base.importTitle() : "Import", className: "bg-white md:w-[1200px] max-w-[1200px]", children: (0, jsx_runtime_1.jsx)(ImportExcel, { submitControl: { path: fetchControl?.path + "/import" }, columnControl: columns?.map((cc) => ({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skalfa/skalfa-component",
3
- "version": "1.0.15",
3
+ "version": "1.0.17",
4
4
  "description": "Reusable UI components for Skalfa App.",
5
5
  "license": "MIT",
6
6
  "keywords": [
package/src/supervision/TableSupervision.component.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  "use client"
2
2
 
3
- import { ReactNode, useEffect, useMemo } from "react";
3
+ import { Fragment, ReactNode, useEffect, useMemo } from "react";
4
4
  import { ApiType, cn, conversion, registry, shortcut, ShortcutHandler, UseResourceIdb, UseResourceProps, useResponsive, useTable } from "@utils";
5
5
  import { useToggleContext } from "@contexts";
6
6
  import { FloatingPageComponent, FloatingPageProps, ButtonComponent, TableColumnType, TableComponent, FormSupervisionComponent, FormType, ModalConfirmComponent, TypographyColumnComponent, ButtonProps, ModalConfirmProps, TableProps, ControlBarOptionType, SwipeActionType, BottomSheetProps } from "../";
@@ -36,12 +36,15 @@ export interface TableSupervisionFormProps {
36
36
  };
37
37
 
38
38
  export type TableSupervisionDetailProps = boolean
39
- | (
40
- | string
41
- | { label: string, item: string | ((data: Record<string, any>) => ReactNode), conversion?: keyof typeof conversion }
39
+ | {
40
+ modalControl: Omit<FloatingPageProps, "show" | "onClose">
41
+ content: (
42
+ | string
43
+ | { label: string, item: string | ((data: Record<string, any>) => ReactNode), conversion?: keyof typeof conversion }
44
+ | ((data: Record<string, any>) => ReactNode)
45
+ )[]
42
46
  | ((data: Record<string, any>) => ReactNode)
43
- )[]
44
- | ((data: Record<string, any>) => ReactNode);
47
+ };
45
48
 
46
49
  export type TableSupervisionProps = {
47
50
  fetchControl : UseResourceProps;
@@ -56,9 +59,10 @@ export type TableSupervisionProps = {
56
59
  actionControl ?: boolean | (
57
60
  | 'EDIT' | 'DELETE' | {
58
61
  label : string,
59
- modal ?: ModalConfirmProps,
62
+ modal ?: Omit<ModalConfirmProps, "show" | "onClose">,
60
63
  button ?: ButtonProps,
61
64
  shortcut ?: { key: string, description: string },
65
+ on ?: (item: Record<string, any>) => boolean,
62
66
  } | ((
63
67
  row : object,
64
68
  setModal ?: (type: "EDIT" | "DELETE") => void,
@@ -222,10 +226,11 @@ export function TableSupervisionComponent({
222
226
  }
223
227
 
224
228
  if(typeof action == "object") {
229
+ if (action.on && !action.on?.(item || {})) return
230
+
225
231
  return (
226
- <>
232
+ <Fragment key={`action-object-${key}`}>
227
233
  <ButtonComponent
228
- key={`action-object-${key}`}
229
234
  label={action?.button?.label || action?.label}
230
235
  variant={action?.button?.variant || "outline"}
231
236
  paint={action?.button?.paint || "primary"}
@@ -242,7 +247,7 @@ export function TableSupervisionComponent({
242
247
  }}
243
248
  {...action.button}
244
249
  />
245
- </>
250
+ </Fragment>
246
251
  )
247
252
  }
248
253
 
@@ -295,7 +300,7 @@ export function TableSupervisionComponent({
295
300
  <div className={cn(
296
301
  "flex flex-col gap-y-4",
297
302
  )}>
298
- {!!selected && (typeof detailControl === "object" && detailControl?.length ? detailControl?.map((column, key) => {
303
+ {!!selected && (typeof detailControl === "object" && typeof detailControl.content === "object" && detailControl?.content?.length ? detailControl?.content?.map((column, key) => {
299
304
  if (typeof column === "string") {
300
305
  return (<TypographyColumnComponent
301
306
  key={key}
@@ -311,7 +316,7 @@ export function TableSupervisionComponent({
311
316
  } else {
312
317
  return column?.(selected)
313
318
  }
314
- }) : typeof detailControl == "function" ? detailControl(selected) : columns?.map((column, key) => (
319
+ }) : typeof detailControl === "object" && typeof detailControl.content === "function" ? detailControl?.content?.(selected) : columns?.map((column, key) => (
315
320
  <TypographyColumnComponent
316
321
  key={key}
317
322
  title={column.label}
@@ -346,7 +351,7 @@ export function TableSupervisionComponent({
346
351
  construction : {
347
352
  name : typeof col == "string" ? col : col?.selector,
348
353
  label : typeof col == "string" ? col : col?.label,
349
- placeholder : l.base.inputPlaceholder ? l.base.inputPlaceholder(`${ typeof col == "string" ? col : col?.label}`) : `Enter ${ typeof col == "string" ? col : col?.label}...`,
354
+ placeholder : l.base.inputPlaceholder ? l.base.inputPlaceholder({field: `${ typeof col == "string" ? col : col?.label}`}) : `Enter ${ typeof col == "string" ? col : col?.label}...`,
350
355
  },
351
356
  };
352
357
  }) || (data?.data?.at(0) ? Object.keys(data.data[0]).map((col) => {
@@ -356,7 +361,7 @@ export function TableSupervisionComponent({
356
361
  construction : {
357
362
  name : col,
358
363
  label : col,
359
- placeholder : l.base.inputPlaceholder ? l.base.inputPlaceholder(col) : `Enter ${col}...`,
364
+ placeholder : l.base.inputPlaceholder ? l.base.inputPlaceholder({field: col}) : `Enter ${col}...`,
360
365
  },
361
366
  };
362
367
  })
@@ -539,6 +544,7 @@ export function TableSupervisionComponent({
539
544
  title={l.base.detailTitle ? l.base.detailTitle() : "Detail"}
540
545
  className="bg-background"
541
546
  footer={renderTableAction(actionControl, undefined, {className: isSm ? "justify-end p-2 bg-background" : "justify-end", size: isSm ? "sm" : "md"})}
547
+ {...(typeof detailControl === "object" ? detailControl?.modalControl || {} : {})}
542
548
  >
543
549
  {detailPage}
544
550
  </FloatingPageComponent>