@rudra-studio/rudra-layout 1.0.10 → 1.0.12

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 (2) hide show
  1. package/components/RepeaterTable/index.js +80 -78
  2. package/package.json +1 -1
package/components/RepeaterTable/index.js CHANGED
@@ -1,42 +1,48 @@
1
- import e, { useEffect as t, useMemo as n, useState as r } from "react";
2
- import { jsx as i, jsxs as a } from "react/jsx-runtime";
3
- import { flexRender as o, getCoreRowModel as s, getExpandedRowModel as c, getFilteredRowModel as l, getPaginationRowModel as u, useReactTable as d } from "@tanstack/react-table";
4
- import { ChevronDown as f, ChevronLeft as p, ChevronRight as m, ChevronsLeft as h, ChevronsRight as g, LayoutTemplate as _, Search as v } from "lucide-react";
1
+ import e, { useEffect as t, useMemo as n, useRef as r, useState as i } from "react";
2
+ import { jsx as a, jsxs as o } from "react/jsx-runtime";
3
+ import { flexRender as s, getCoreRowModel as c, getExpandedRowModel as l, getFilteredRowModel as u, getPaginationRowModel as d, useReactTable as f } from "@tanstack/react-table";
4
+ import { ChevronDown as p, ChevronLeft as m, ChevronRight as h, ChevronsLeft as g, ChevronsRight as _, LayoutTemplate as v, Search as y } from "lucide-react";
5
5
  //#region src/components/RepeaterTable/index.tsx
6
- function y({ data: y = [], headers: b = [], cellTemplates: x = [], expandedContent: S, pageSize: C = 5, globalFilterPlaceholder: w = "Search anywhere...", className: T = "" }) {
7
- let [E, D] = r([]), [O, k] = r(""), [A, j] = r({}), M = Array.isArray(y) ? y : [], N = Array.isArray(b) ? b : [], P = Array.isArray(x) ? x : [], F = n(() => {
8
- let e = Math.max(N.length, P.length);
6
+ function b({ data: b = [], headers: x = [], cellTemplates: S = [], expandedContent: C, pageSize: w = 5, globalFilterPlaceholder: T = "Search anywhere...", className: E = "" }) {
7
+ let [D, O] = i([]), [k, A] = i(""), [j, M] = i({}), N = r(x), P = r(S);
8
+ t(() => {
9
+ N.current = x;
10
+ }, [x]), t(() => {
11
+ P.current = S;
12
+ }, [S]);
13
+ let F = n(() => {
14
+ let e = Math.max(N.current.length, P.current.length);
9
15
  return Array.from({ length: e }).map((e, t) => {
10
- let n = N[t] || {
16
+ let n = N.current[t] || {
11
17
  label: `Column ${t + 1}`,
12
18
  accessor: `col_${t}`
13
19
  };
14
20
  return {
15
21
  id: `col_${t}`,
16
22
  accessorFn: (e) => e[n.accessor] ?? e,
17
- header: () => /* @__PURE__ */ i("div", {
23
+ header: () => /* @__PURE__ */ a("div", {
18
24
  className: "font-semibold text-slate-700 dark:text-slate-200 uppercase text-xs",
19
25
  children: n.label
20
26
  }),
21
27
  cell: ({ row: e }) => {
22
- let r = e.original, o = P[t], s = t === 0, c = {
23
- item: r,
28
+ let r = P.current[t], i = t === 0, s = {
29
+ item: e.original,
24
30
  index: e.index,
25
31
  isExpanded: e.getIsExpanded(),
26
32
  toggleExpanded: e.getToggleExpandedHandler()
27
33
  };
28
- return /* @__PURE__ */ a("div", {
34
+ return /* @__PURE__ */ o("div", {
29
35
  className: "flex items-center gap-3",
30
- children: [s && S && /* @__PURE__ */ i("button", {
36
+ children: [i && C && /* @__PURE__ */ a("button", {
31
37
  onClick: e.getToggleExpandedHandler(),
32
38
  className: "p-1 hover:bg-slate-200 dark:hover:bg-white/10 rounded text-slate-500 transition-colors shrink-0",
33
- children: e.getIsExpanded() ? /* @__PURE__ */ i(f, { size: 16 }) : /* @__PURE__ */ i(m, { size: 16 })
34
- }), /* @__PURE__ */ i("div", {
39
+ children: e.getIsExpanded() ? /* @__PURE__ */ a(p, { size: 16 }) : /* @__PURE__ */ a(h, { size: 16 })
40
+ }), /* @__PURE__ */ a("div", {
35
41
  className: "flex-1 w-full min-w-0",
36
- children: typeof o == "function" ? o(c) : o || /* @__PURE__ */ a("div", {
42
+ children: typeof r == "function" ? r(s) : r || /* @__PURE__ */ o("div", {
37
43
  className: "py-2 px-3 border border-dashed border-slate-300 dark:border-slate-700 rounded text-slate-400 dark:text-slate-500 text-xs italic flex items-center gap-2",
38
44
  children: [
39
- /* @__PURE__ */ i(_, { size: 12 }),
45
+ /* @__PURE__ */ a(v, { size: 12 }),
40
46
  " Drop ",
41
47
  n.label,
42
48
  " Cell"
@@ -48,147 +54,143 @@ function y({ data: y = [], headers: b = [], cellTemplates: x = [], expandedConte
48
54
  };
49
55
  });
50
56
  }, [
51
- N,
52
- P,
53
- S
54
- ]), I = d({
55
- data: M,
57
+ x.length,
58
+ S.length,
59
+ C
60
+ ]), I = f({
61
+ data: Array.isArray(b) ? b : [],
56
62
  columns: F,
57
63
  state: {
58
- sorting: E,
59
- globalFilter: O,
60
- expanded: A
64
+ sorting: D,
65
+ globalFilter: k,
66
+ expanded: j
61
67
  },
62
- initialState: { pagination: { pageSize: C } },
63
- onSortingChange: D,
64
- onExpandedChange: j,
65
- onGlobalFilterChange: k,
66
- getCoreRowModel: s(),
67
- getFilteredRowModel: l(),
68
- getPaginationRowModel: u(),
69
- getExpandedRowModel: c(),
68
+ initialState: { pagination: { pageSize: w } },
69
+ onSortingChange: O,
70
+ onExpandedChange: M,
71
+ onGlobalFilterChange: A,
72
+ getCoreRowModel: c(),
73
+ getFilteredRowModel: u(),
74
+ getPaginationRowModel: d(),
75
+ getExpandedRowModel: l(),
70
76
  globalFilterFn: (e, t, n) => {
71
77
  let r = String(n).toLowerCase();
72
78
  return Object.values(e.original).some((e) => String(e).toLowerCase().includes(r));
73
79
  }
74
80
  });
75
81
  return t(() => {
76
- I.setPageSize(C);
77
- }, [C, I]), M.length === 0 && N.length === 0 && P.length === 0 ? /* @__PURE__ */ a("div", {
82
+ I.setPageSize(w);
83
+ }, [w, I]), b.length === 0 && x.length === 0 && S.length === 0 ? /* @__PURE__ */ o("div", {
78
84
  className: "w-full p-12 border-2 border-dashed border-slate-200 dark:border-slate-800 bg-white dark:bg-[#0A0A0A] rounded-2xl flex flex-col items-center justify-center text-slate-400",
79
85
  children: [
80
- /* @__PURE__ */ i(_, {
86
+ /* @__PURE__ */ a(v, {
81
87
  size: 32,
82
88
  className: "mb-4 opacity-50"
83
89
  }),
84
- /* @__PURE__ */ i("p", {
90
+ /* @__PURE__ */ a("p", {
85
91
  className: "text-sm font-medium text-slate-600 dark:text-slate-400",
86
92
  children: "Repeater Table Empty"
87
93
  }),
88
- /* @__PURE__ */ i("p", {
94
+ /* @__PURE__ */ a("p", {
89
95
  className: "text-xs mt-1 text-slate-500",
90
96
  children: "Provide Data and configure Headers to begin."
91
97
  })
92
98
  ]
93
- }) : /* @__PURE__ */ a("div", {
94
- className: `space-y-4 w-full ${T}`,
99
+ }) : /* @__PURE__ */ o("div", {
100
+ className: `space-y-4 w-full ${E}`,
95
101
  children: [
96
- /* @__PURE__ */ a("div", {
102
+ /* @__PURE__ */ o("div", {
97
103
  className: "relative w-full sm:w-96",
98
- children: [/* @__PURE__ */ i(v, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400 dark:text-slate-500" }), /* @__PURE__ */ i("input", {
99
- value: O ?? "",
100
- onChange: (e) => k(e.target.value),
101
- placeholder: w,
104
+ children: [/* @__PURE__ */ a(y, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400 dark:text-slate-500" }), /* @__PURE__ */ a("input", {
105
+ value: k ?? "",
106
+ onChange: (e) => A(e.target.value),
107
+ placeholder: T,
102
108
  className: "w-full bg-white dark:bg-[#0A0A0A] border border-slate-200 dark:border-white/10 rounded-xl pl-10 pr-4 py-2 text-sm text-slate-900 dark:text-slate-200 placeholder:text-slate-400 focus:outline-none focus:border-blue-500 transition-colors shadow-sm dark:shadow-none"
103
109
  })]
104
110
  }),
105
- /* @__PURE__ */ i("div", {
111
+ /* @__PURE__ */ a("div", {
106
112
  className: "rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-[#0A0A0A] overflow-hidden shadow-sm dark:shadow-none",
107
- children: /* @__PURE__ */ i("div", {
113
+ children: /* @__PURE__ */ a("div", {
108
114
  className: "overflow-x-auto custom-scrollbar",
109
- children: /* @__PURE__ */ a("table", {
115
+ children: /* @__PURE__ */ o("table", {
110
116
  className: "w-full text-sm text-left",
111
- children: [/* @__PURE__ */ i("thead", {
117
+ children: [/* @__PURE__ */ a("thead", {
112
118
  className: "bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10 text-slate-500 dark:text-slate-400 tracking-wider",
113
- children: I.getHeaderGroups().map((e) => /* @__PURE__ */ i("tr", { children: e.headers.map((e) => /* @__PURE__ */ i("th", {
119
+ children: I.getHeaderGroups().map((e) => /* @__PURE__ */ a("tr", { children: e.headers.map((e) => /* @__PURE__ */ a("th", {
114
120
  className: "px-6 py-4 whitespace-nowrap",
115
- children: o(e.column.columnDef.header, e.getContext())
121
+ children: s(e.column.columnDef.header, e.getContext())
116
122
  }, e.id)) }, e.id))
117
123
  }), /* @__PURE__ */ a("tbody", {
118
124
  className: "divide-y divide-slate-200 dark:divide-white/5",
119
- children: [I.getRowModel().rows.map((t) => /* @__PURE__ */ a(e.Fragment, { children: [/* @__PURE__ */ i("tr", {
125
+ children: I.getRowModel().rows.map((t) => /* @__PURE__ */ o(e.Fragment, { children: [/* @__PURE__ */ a("tr", {
120
126
  className: "hover:bg-slate-50 dark:hover:bg-white/5 transition-colors group",
121
- children: t.getVisibleCells().map((e) => /* @__PURE__ */ i("td", {
127
+ children: t.getVisibleCells().map((e) => /* @__PURE__ */ a("td", {
122
128
  className: "px-6 py-4 text-slate-700 dark:text-slate-300",
123
- children: o(e.column.columnDef.cell, e.getContext())
129
+ children: s(e.column.columnDef.cell, e.getContext())
124
130
  }, e.id))
125
- }), t.getIsExpanded() && S && /* @__PURE__ */ i("tr", {
131
+ }), t.getIsExpanded() && C && /* @__PURE__ */ a("tr", {
126
132
  className: "bg-slate-50/50 dark:bg-white/[0.02]",
127
- children: /* @__PURE__ */ i("td", {
133
+ children: /* @__PURE__ */ a("td", {
128
134
  colSpan: F.length,
129
135
  className: "p-0 border-b border-slate-200 dark:border-white/5",
130
- children: /* @__PURE__ */ i("div", {
136
+ children: /* @__PURE__ */ a("div", {
131
137
  className: "p-6",
132
- children: typeof S == "function" ? S({
138
+ children: typeof C == "function" ? C({
133
139
  item: t.original,
134
140
  index: t.index,
135
141
  isExpanded: !0,
136
142
  toggleExpanded: t.getToggleExpandedHandler()
137
- }) : S
143
+ }) : C
138
144
  })
139
145
  })
140
- })] }, t.id)), I.getRowModel().rows.length === 0 && /* @__PURE__ */ i("tr", { children: /* @__PURE__ */ i("td", {
141
- colSpan: F.length,
142
- className: "px-6 py-12 text-center text-slate-500",
143
- children: "No results found matching your filters."
144
- }) })]
146
+ })] }, t.id))
145
147
  })]
146
148
  })
147
149
  })
148
150
  }),
149
- /* @__PURE__ */ a("div", {
151
+ /* @__PURE__ */ o("div", {
150
152
  className: "flex items-center justify-between px-4 py-2 text-sm text-slate-500 dark:text-slate-400",
151
- children: [/* @__PURE__ */ a("div", {
153
+ children: [/* @__PURE__ */ o("div", {
152
154
  className: "flex-1",
153
155
  children: [
154
156
  "Page ",
155
- /* @__PURE__ */ i("span", {
157
+ /* @__PURE__ */ a("span", {
156
158
  className: "font-semibold text-slate-700 dark:text-slate-200",
157
159
  children: I.getState().pagination.pageIndex + 1
158
160
  }),
159
161
  " of",
160
162
  " ",
161
- /* @__PURE__ */ i("span", {
163
+ /* @__PURE__ */ a("span", {
162
164
  className: "font-semibold text-slate-700 dark:text-slate-200",
163
165
  children: I.getPageCount() || 1
164
166
  })
165
167
  ]
166
- }), /* @__PURE__ */ a("div", {
168
+ }), /* @__PURE__ */ o("div", {
167
169
  className: "flex items-center gap-1.5",
168
170
  children: [
169
- /* @__PURE__ */ i("button", {
171
+ /* @__PURE__ */ a("button", {
170
172
  onClick: () => I.setPageIndex(0),
171
173
  disabled: !I.getCanPreviousPage(),
172
174
  className: "p-1.5 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5 disabled:opacity-30 transition-colors",
173
- children: /* @__PURE__ */ i(h, { size: 16 })
175
+ children: /* @__PURE__ */ a(g, { size: 16 })
174
176
  }),
175
- /* @__PURE__ */ i("button", {
177
+ /* @__PURE__ */ a("button", {
176
178
  onClick: () => I.previousPage(),
177
179
  disabled: !I.getCanPreviousPage(),
178
180
  className: "p-1.5 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5 disabled:opacity-30 transition-colors",
179
- children: /* @__PURE__ */ i(p, { size: 16 })
181
+ children: /* @__PURE__ */ a(m, { size: 16 })
180
182
  }),
181
- /* @__PURE__ */ i("button", {
183
+ /* @__PURE__ */ a("button", {
182
184
  onClick: () => I.nextPage(),
183
185
  disabled: !I.getCanNextPage(),
184
186
  className: "p-1.5 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5 disabled:opacity-30 transition-colors",
185
- children: /* @__PURE__ */ i(m, { size: 16 })
187
+ children: /* @__PURE__ */ a(h, { size: 16 })
186
188
  }),
187
- /* @__PURE__ */ i("button", {
189
+ /* @__PURE__ */ a("button", {
188
190
  onClick: () => I.setPageIndex(I.getPageCount() - 1),
189
191
  disabled: !I.getCanNextPage(),
190
192
  className: "p-1.5 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5 disabled:opacity-30 transition-colors",
191
- children: /* @__PURE__ */ i(g, { size: 16 })
193
+ children: /* @__PURE__ */ a(_, { size: 16 })
192
194
  })
193
195
  ]
194
196
  })]
@@ -197,4 +199,4 @@ function y({ data: y = [], headers: b = [], cellTemplates: x = [], expandedConte
197
199
  });
198
200
  }
199
201
  //#endregion
200
- export { y as default };
202
+ export { b as default };
package/package.json CHANGED
@@ -42,5 +42,5 @@
42
42
  },
43
43
  "types": "./index.d.ts",
44
44
  "unpkg": "./index.umd.js",
45
- "version": "1.0.10"
45
+ "version": "1.0.12"
46
46
  }