ar-design 0.2.45 → 0.2.46
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.
|
@@ -56,9 +56,13 @@
|
|
|
56
56
|
|
|
57
57
|
.ar-table > .content > table > thead > tr > th,
|
|
58
58
|
.ar-table > .content > table > tbody > tr > td {
|
|
59
|
-
height:
|
|
60
|
-
padding: 0 1.5rem;
|
|
59
|
+
height: 2.5rem;
|
|
61
60
|
}
|
|
61
|
+
.ar-table > .content > table > thead > tr > th,
|
|
62
|
+
.ar-table > .content > table > tbody > tr > td > .table-cell {
|
|
63
|
+
padding: 0 1rem;
|
|
64
|
+
}
|
|
65
|
+
|
|
62
66
|
.ar-table > .content > table > thead > tr > th.min-w,
|
|
63
67
|
.ar-table > .content > table > tbody > tr > td.min-w {
|
|
64
68
|
min-width: 150px;
|
|
@@ -157,7 +161,10 @@
|
|
|
157
161
|
text-wrap: nowrap;
|
|
158
162
|
}
|
|
159
163
|
|
|
160
|
-
.ar-table > .content > table > tbody > tr > td >
|
|
164
|
+
.ar-table > .content > table > tbody > tr > td > .subitem-open-button-wrapper {
|
|
165
|
+
padding: 0 1rem;
|
|
166
|
+
}
|
|
167
|
+
.ar-table > .content > table > tbody > tr > td > .subitem-open-button-wrapper > span {
|
|
161
168
|
display: inline-block;
|
|
162
169
|
width: 0.75rem;
|
|
163
170
|
height: 0.75rem;
|
|
@@ -168,10 +175,10 @@
|
|
|
168
175
|
cursor: pointer;
|
|
169
176
|
transition: transform 100ms ease-in-out;
|
|
170
177
|
}
|
|
171
|
-
.ar-table > .content > table > tbody > tr > td >
|
|
178
|
+
.ar-table > .content > table > tbody > tr > td > .subitem-open-button-wrapper > span.opened {
|
|
172
179
|
transform: rotate(135deg);
|
|
173
180
|
}
|
|
174
|
-
.ar-table > .content > table > tbody > tr > td >
|
|
181
|
+
.ar-table > .content > table > tbody > tr > td > .subitem-open-button-wrapper > span.passive {
|
|
175
182
|
border-top-color: var(--gray-300);
|
|
176
183
|
border-right-color: var(--gray-300);
|
|
177
184
|
cursor: no-drop;
|
|
@@ -19,7 +19,9 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
|
|
|
19
19
|
const _searchTextInputs = useRef([]);
|
|
20
20
|
const _searchTimeOut = useRef(null);
|
|
21
21
|
// variables
|
|
22
|
-
const
|
|
22
|
+
const _subrowOpenAutomatically = config.subrow?.openAutomatically ?? false;
|
|
23
|
+
const _subrowSelector = config.subrow?.selector ?? "subitems";
|
|
24
|
+
const _subrowButton = config.subrow?.button ?? false;
|
|
23
25
|
// className
|
|
24
26
|
const _tableClassName = ["ar-table", "scroll"];
|
|
25
27
|
// states
|
|
@@ -165,10 +167,15 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
|
|
|
165
167
|
if (value.length === 0)
|
|
166
168
|
return true;
|
|
167
169
|
else {
|
|
168
|
-
return value.some((v) =>
|
|
170
|
+
return value.some((v) => {
|
|
171
|
+
if (Array.isArray(_itemValue)) {
|
|
172
|
+
return Object.values(_itemValue?.[0] ?? {}).some((objValue) => {
|
|
173
|
+
return String(objValue).toLocaleLowerCase().includes(String(v).toLocaleLowerCase());
|
|
174
|
+
});
|
|
175
|
+
}
|
|
176
|
+
});
|
|
169
177
|
}
|
|
170
178
|
}
|
|
171
|
-
return Object.entries(_itemValue ?? {}).some(([_, objValue]) => String(objValue).toLocaleLowerCase().includes(value.toLocaleLowerCase()));
|
|
172
179
|
}
|
|
173
180
|
if (Array.isArray(_itemValue)) {
|
|
174
181
|
console.log("Buradasın", _itemValue);
|
|
@@ -178,6 +185,22 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
|
|
|
178
185
|
};
|
|
179
186
|
const getData = useMemo(() => {
|
|
180
187
|
let _data = [...data];
|
|
188
|
+
if (_subrowOpenAutomatically) {
|
|
189
|
+
data.forEach((item, index) => {
|
|
190
|
+
if (_subrowSelector in item) {
|
|
191
|
+
setShowSubitems((prev) => ({
|
|
192
|
+
...prev,
|
|
193
|
+
[`${index}`]: !prev[`${index}`],
|
|
194
|
+
}));
|
|
195
|
+
}
|
|
196
|
+
else {
|
|
197
|
+
setShowSubitems((prev) => ({
|
|
198
|
+
...prev,
|
|
199
|
+
[`${index}`]: false,
|
|
200
|
+
}));
|
|
201
|
+
}
|
|
202
|
+
});
|
|
203
|
+
}
|
|
181
204
|
if (searchedText && Object.keys(searchedText).length > 0) {
|
|
182
205
|
_data = _data.filter((item) => deepSearch(item, searchedText));
|
|
183
206
|
setTotalRecords(_data.length);
|
|
@@ -194,7 +217,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
|
|
|
194
217
|
setTimeout(() => handleScroll(), 0);
|
|
195
218
|
return _data;
|
|
196
219
|
}, [data, searchedText, currentPage]);
|
|
197
|
-
const renderCell = (item, c, cIndex, index) => {
|
|
220
|
+
const renderCell = (item, c, cIndex, index, depth) => {
|
|
198
221
|
let render;
|
|
199
222
|
// `c.key` bir string ise
|
|
200
223
|
if (typeof c.key !== "object") {
|
|
@@ -207,8 +230,8 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
|
|
|
207
230
|
render = c.render ? c.render(item) : _item[c.key.nestedKey];
|
|
208
231
|
}
|
|
209
232
|
}
|
|
210
|
-
// Diğer durumlarda `null` döndür
|
|
211
233
|
else {
|
|
234
|
+
// Diğer durumlarda `null` döndür
|
|
212
235
|
render = null;
|
|
213
236
|
}
|
|
214
237
|
const _className = [];
|
|
@@ -218,9 +241,11 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
|
|
|
218
241
|
_className.push(`align-content-${c.config.alignContent}`);
|
|
219
242
|
if (c.config?.textWrap)
|
|
220
243
|
_className.push(`text-${c.config.textWrap}`);
|
|
221
|
-
return (React.createElement("td", { key: `cell-${index}-${cIndex}`, className: _className.join(" "), style: c.config?.width ? { minWidth: c.config.width, maxWidth: c.config.width } : {}, "data-sticky-position": c.config?.sticky },
|
|
244
|
+
return (React.createElement("td", { key: `cell-${index}-${cIndex}`, className: _className.join(" "), style: c.config?.width ? { minWidth: c.config.width, maxWidth: c.config.width, paddingLeft: `${depth}rem` } : {}, "data-sticky-position": c.config?.sticky },
|
|
245
|
+
React.createElement("div", { className: "table-cell" }, React.isValidElement(render) ? render : String(render))));
|
|
222
246
|
};
|
|
223
247
|
const renderRow = (item, index) => {
|
|
248
|
+
const isHasSubitems = _subrowSelector in item;
|
|
224
249
|
return (React.createElement(React.Fragment, null,
|
|
225
250
|
React.createElement("tr", { key: `row-${index}` },
|
|
226
251
|
selections && (React.createElement("td", { className: "sticky-left", "data-sticky-position": "left" },
|
|
@@ -230,31 +255,34 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
|
|
|
230
255
|
else
|
|
231
256
|
setSelectionItems((prev) => prev.filter((_item) => _item !== item));
|
|
232
257
|
} }))),
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
258
|
+
_subrowButton && isHasSubitems ? (React.createElement("td", null, item[_subrowSelector] && (React.createElement("div", { className: "subitem-open-button-wrapper" },
|
|
259
|
+
React.createElement("span", { className: `subitem-open-button ${(showSubitems[index] && "opened") ?? ""}`, onClick: () => {
|
|
260
|
+
console.log(showSubitems);
|
|
261
|
+
setShowSubitems((prev) => ({
|
|
262
|
+
...prev,
|
|
263
|
+
[`${index}`]: !prev[`${index}`],
|
|
264
|
+
}));
|
|
265
|
+
} }))))) : _subrowButton ? (React.createElement("td", { style: { width: 0, minWidth: 0 } })) : null,
|
|
266
|
+
columns.map((c, cIndex) => renderCell(item, c, cIndex, index, 0))),
|
|
240
267
|
showSubitems[index] && item[_subrowSelector] && (React.createElement(SubitemList, { items: item[_subrowSelector], columns: columns, index: index, depth: 1.5 }))));
|
|
241
268
|
};
|
|
242
269
|
const SubitemList = ({ items, columns, index, depth }) => {
|
|
243
270
|
return items.map((subitem, subindex) => {
|
|
244
|
-
const
|
|
271
|
+
const _subitem = subitem[_subrowSelector];
|
|
245
272
|
return (React.createElement(React.Fragment, null,
|
|
246
273
|
React.createElement("tr", { key: `subitem-${index}-${subindex}` },
|
|
247
|
-
|
|
248
|
-
React.createElement("
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
274
|
+
_subrowSelector in subitem && _subrowButton && (React.createElement("td", { style: { paddingLeft: `${depth}rem` } },
|
|
275
|
+
React.createElement("div", { className: "subitem-open-button-wrapper" },
|
|
276
|
+
React.createElement("span", { className: `${(showSubitems[`${index}.${subindex}`] && "opened") ?? ""} ${!_subitem && "passive"}`, onClick: () => {
|
|
277
|
+
if (!_subitem)
|
|
278
|
+
return;
|
|
279
|
+
setShowSubitems((prev) => ({
|
|
280
|
+
...prev,
|
|
281
|
+
[`${index}.${subindex}`]: !prev[`${index}.${subindex}`],
|
|
282
|
+
}));
|
|
283
|
+
} })))),
|
|
284
|
+
columns.map((c, cIndex) => renderCell(subitem, c, cIndex, subindex, depth * 1.5))),
|
|
285
|
+
showSubitems[`${index}.${subindex}`] && _subitem && (React.createElement(SubitemList, { items: _subitem, columns: columns, index: subindex, depth: depth * 1.5 }))));
|
|
258
286
|
});
|
|
259
287
|
};
|
|
260
288
|
// useEffects
|
|
@@ -329,7 +357,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
|
|
|
329
357
|
React.createElement("table", { ref: ref },
|
|
330
358
|
React.createElement("thead", null,
|
|
331
359
|
React.createElement("tr", { key: "selection" },
|
|
332
|
-
|
|
360
|
+
_subrowButton && React.createElement("td", { style: { width: 0, minWidth: 0 } }),
|
|
333
361
|
selections && (React.createElement("th", { className: "selection-col sticky-left", "data-sticky-position": "left" },
|
|
334
362
|
React.createElement(Checkbox, { variant: "filled", status: "primary", checked: selectAll, onChange: (event) => {
|
|
335
363
|
if (_checkboxItems.current.length > 0) {
|