ar-design 0.2.45 → 0.2.47
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,13 +19,16 @@ 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
|
|
26
28
|
const [selectAll, setSelectAll] = useState(false);
|
|
27
29
|
const [selectionItems, setSelectionItems] = useState([]);
|
|
28
30
|
const [showSubitems, setShowSubitems] = useState({});
|
|
31
|
+
const [isTrueSubitems, setIsTrueSubitems] = useState({});
|
|
29
32
|
// states -> File
|
|
30
33
|
const [files, setFiles] = useState([]);
|
|
31
34
|
const [formData, setFormData] = useState(undefined);
|
|
@@ -165,10 +168,15 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
|
|
|
165
168
|
if (value.length === 0)
|
|
166
169
|
return true;
|
|
167
170
|
else {
|
|
168
|
-
return value.some((v) =>
|
|
171
|
+
return value.some((v) => {
|
|
172
|
+
if (Array.isArray(_itemValue)) {
|
|
173
|
+
return Object.values(_itemValue?.[0] ?? {}).some((objValue) => {
|
|
174
|
+
return String(objValue).toLocaleLowerCase().includes(String(v).toLocaleLowerCase());
|
|
175
|
+
});
|
|
176
|
+
}
|
|
177
|
+
});
|
|
169
178
|
}
|
|
170
179
|
}
|
|
171
|
-
return Object.entries(_itemValue ?? {}).some(([_, objValue]) => String(objValue).toLocaleLowerCase().includes(value.toLocaleLowerCase()));
|
|
172
180
|
}
|
|
173
181
|
if (Array.isArray(_itemValue)) {
|
|
174
182
|
console.log("Buradasın", _itemValue);
|
|
@@ -178,6 +186,16 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
|
|
|
178
186
|
};
|
|
179
187
|
const getData = useMemo(() => {
|
|
180
188
|
let _data = [...data];
|
|
189
|
+
if (_subrowOpenAutomatically) {
|
|
190
|
+
data.forEach((item, index) => {
|
|
191
|
+
if (_subrowSelector in item) {
|
|
192
|
+
setShowSubitems((prev) => ({
|
|
193
|
+
...prev,
|
|
194
|
+
[`${index}`]: true,
|
|
195
|
+
}));
|
|
196
|
+
}
|
|
197
|
+
});
|
|
198
|
+
}
|
|
181
199
|
if (searchedText && Object.keys(searchedText).length > 0) {
|
|
182
200
|
_data = _data.filter((item) => deepSearch(item, searchedText));
|
|
183
201
|
setTotalRecords(_data.length);
|
|
@@ -194,7 +212,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
|
|
|
194
212
|
setTimeout(() => handleScroll(), 0);
|
|
195
213
|
return _data;
|
|
196
214
|
}, [data, searchedText, currentPage]);
|
|
197
|
-
const renderCell = (item, c, cIndex, index) => {
|
|
215
|
+
const renderCell = (item, c, cIndex, index, depth) => {
|
|
198
216
|
let render;
|
|
199
217
|
// `c.key` bir string ise
|
|
200
218
|
if (typeof c.key !== "object") {
|
|
@@ -207,8 +225,8 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
|
|
|
207
225
|
render = c.render ? c.render(item) : _item[c.key.nestedKey];
|
|
208
226
|
}
|
|
209
227
|
}
|
|
210
|
-
// Diğer durumlarda `null` döndür
|
|
211
228
|
else {
|
|
229
|
+
// Diğer durumlarda `null` döndür
|
|
212
230
|
render = null;
|
|
213
231
|
}
|
|
214
232
|
const _className = [];
|
|
@@ -218,9 +236,11 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
|
|
|
218
236
|
_className.push(`align-content-${c.config.alignContent}`);
|
|
219
237
|
if (c.config?.textWrap)
|
|
220
238
|
_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 },
|
|
239
|
+
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 },
|
|
240
|
+
React.createElement("div", { className: "table-cell" }, React.isValidElement(render) ? render : String(render))));
|
|
222
241
|
};
|
|
223
242
|
const renderRow = (item, index) => {
|
|
243
|
+
const isHasSubitems = _subrowSelector in item;
|
|
224
244
|
return (React.createElement(React.Fragment, null,
|
|
225
245
|
React.createElement("tr", { key: `row-${index}` },
|
|
226
246
|
selections && (React.createElement("td", { className: "sticky-left", "data-sticky-position": "left" },
|
|
@@ -230,31 +250,33 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
|
|
|
230
250
|
else
|
|
231
251
|
setSelectionItems((prev) => prev.filter((_item) => _item !== item));
|
|
232
252
|
} }))),
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
253
|
+
_subrowButton && isHasSubitems ? (React.createElement("td", null, item[_subrowSelector] && (React.createElement("div", { className: "subitem-open-button-wrapper" },
|
|
254
|
+
React.createElement("span", { className: `subitem-open-button ${(showSubitems[index] && "opened") ?? ""}`, onClick: () => {
|
|
255
|
+
setShowSubitems((prev) => ({
|
|
256
|
+
...prev,
|
|
257
|
+
[`${index}`]: !prev[`${index}`],
|
|
258
|
+
}));
|
|
259
|
+
} }))))) : _subrowButton ? (React.createElement("td", { style: { width: 0, minWidth: 0 } })) : null,
|
|
260
|
+
columns.map((c, cIndex) => renderCell(item, c, cIndex, index, 0))),
|
|
240
261
|
showSubitems[index] && item[_subrowSelector] && (React.createElement(SubitemList, { items: item[_subrowSelector], columns: columns, index: index, depth: 1.5 }))));
|
|
241
262
|
};
|
|
242
263
|
const SubitemList = ({ items, columns, index, depth }) => {
|
|
243
264
|
return items.map((subitem, subindex) => {
|
|
244
|
-
const
|
|
265
|
+
const _subitem = subitem[_subrowSelector];
|
|
245
266
|
return (React.createElement(React.Fragment, null,
|
|
246
267
|
React.createElement("tr", { key: `subitem-${index}-${subindex}` },
|
|
247
|
-
|
|
248
|
-
React.createElement("
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
268
|
+
_subrowSelector in subitem && _subrowButton && (React.createElement("td", { style: { paddingLeft: `${depth}rem` } },
|
|
269
|
+
React.createElement("div", { className: "subitem-open-button-wrapper" },
|
|
270
|
+
React.createElement("span", { className: `${(showSubitems[`${index}.${subindex}`] && "opened") ?? ""} ${!_subitem && "passive"}`, onClick: () => {
|
|
271
|
+
if (!_subitem)
|
|
272
|
+
return;
|
|
273
|
+
setShowSubitems((prev) => ({
|
|
274
|
+
...prev,
|
|
275
|
+
[`${index}.${subindex}`]: !prev[`${index}.${subindex}`],
|
|
276
|
+
}));
|
|
277
|
+
} })))),
|
|
278
|
+
columns.map((c, cIndex) => renderCell(subitem, c, cIndex, subindex, depth * 1.5))),
|
|
279
|
+
showSubitems[`${index}.${subindex}`] && _subitem && (React.createElement(SubitemList, { items: _subitem, columns: columns, index: subindex, depth: depth * 1.5 }))));
|
|
258
280
|
});
|
|
259
281
|
};
|
|
260
282
|
// useEffects
|
|
@@ -329,7 +351,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
|
|
|
329
351
|
React.createElement("table", { ref: ref },
|
|
330
352
|
React.createElement("thead", null,
|
|
331
353
|
React.createElement("tr", { key: "selection" },
|
|
332
|
-
|
|
354
|
+
_subrowButton && React.createElement("td", { style: { width: 0, minWidth: 0 } }),
|
|
333
355
|
selections && (React.createElement("th", { className: "selection-col sticky-left", "data-sticky-position": "left" },
|
|
334
356
|
React.createElement(Checkbox, { variant: "filled", status: "primary", checked: selectAll, onChange: (event) => {
|
|
335
357
|
if (_checkboxItems.current.length > 0) {
|