ar-design 0.4.48 → 0.4.49

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 (3) hide show
  1. package/dist/components/data-display/table/body/TBody.js +13 -9
  2. package/dist/components/data-display/table/index.js +3 -2
  3. package/package.json +1 -1
package/dist/components/data-display/table/body/TBody.js CHANGED
@@ -17,7 +17,9 @@ function TBody({ data, columns, refs, methods, states, config }) {
17
17
  // hooks
18
18
  const { t } = useTranslation(String(config.locale ?? "tr"));
19
19
  // methods
20
- const renderRow = (item, index, deph) => {
20
+ const renderRow = (item, index, deph, parentKey = "") => {
21
+ const id = methods.trackBy?.(item) ?? index.toString();
22
+ const key = parentKey ? `${parentKey}.${id}` : id;
21
23
  const isHasSubitems = _subrowSelector in item;
22
24
  return (React.createElement(Fragment, { key: `row-${index}` },
23
25
  React.createElement("tr", { ref: (element) => {
@@ -44,10 +46,10 @@ function TBody({ data, columns, refs, methods, states, config }) {
44
46
  setTriggerForRender((prev) => !prev);
45
47
  } }))),
46
48
  isHasSubitems && _subrowButton ? (React.createElement("td", null, item[_subrowSelector] && (React.createElement("div", { className: "subitem-open-button-wrapper" },
47
- React.createElement("span", { className: `subitem-open-button ${(states.showSubitems.get[index] && "opened") ?? ""}`, onClick: () => {
49
+ React.createElement("span", { className: `subitem-open-button ${(states.showSubitems.get[key] && "opened") ?? ""}`, onClick: () => {
48
50
  states.showSubitems.set((prev) => ({
49
51
  ...prev,
50
- [`${index}`]: !prev[`${index}`],
52
+ [`${key}`]: !prev[`${key}`],
51
53
  }));
52
54
  } }))))) : isHasSubitems && _subrowButton ? (React.createElement("td", { style: { width: 0, minWidth: 0 } })) : null,
53
55
  columns.map((column, cIndex) => {
@@ -61,7 +63,7 @@ function TBody({ data, columns, refs, methods, states, config }) {
61
63
  height: rowHeights[index] ?? 0,
62
64
  });
63
65
  })),
64
- states.showSubitems.get[index] && item[_subrowSelector] && (React.createElement(SubitemList, { items: item[_subrowSelector], columns: columns, index: index, depth: 1.5 }))));
66
+ states.showSubitems.get[key] && item[_subrowSelector] && (React.createElement(SubitemList, { items: item[_subrowSelector], columns: columns, index: index, depth: 1.5, parentKey: key }))));
65
67
  };
66
68
  const renderCell = ({ item, column, index, cIndex, depth, level, height = 0, isSubrows = false }) => {
67
69
  let render;
@@ -90,7 +92,7 @@ function TBody({ data, columns, refs, methods, states, config }) {
90
92
  ? { width: column.config.width, minWidth: column.config.width, maxWidth: column.config.width }
91
93
  : {}),
92
94
  }, "data-sticky-position": column.config?.sticky },
93
- React.createElement("div", { style: { paddingLeft: `${depth == 0 ? 1 : depth}rem` }, className: "table-cell" },
95
+ React.createElement("div", { style: { paddingLeft: cIndex === (methods.selections ? 1 : 0) ? `${depth == 0 ? 1 : depth}rem` : "" }, className: "table-cell" },
94
96
  config.isTreeView && cIndex === 0 && (React.createElement(React.Fragment, null,
95
97
  isSubrows &&
96
98
  Array.from({ length: level }).map((_, i) => {
@@ -103,25 +105,27 @@ function TBody({ data, columns, refs, methods, states, config }) {
103
105
  config.isTreeView && cIndex === 0 && (React.createElement("div", { className: "after" },
104
106
  React.createElement("div", { className: "circle" }))))));
105
107
  };
106
- const SubitemList = ({ items, columns, index, depth, level = 1 }) => {
108
+ const SubitemList = ({ items, columns, index, depth, level = 1, parentKey = "" }) => {
107
109
  if (config.subrow?.render) {
108
110
  return (React.createElement("tr", { className: `subrow-item ${_subrowButton ? "type-b" : "type-a"}`, "data-level": level },
109
111
  _subrowButton && React.createElement("td", { style: { ...config.subrow.render.styles, width: 0, minWidth: 0 } }),
110
112
  React.createElement("td", { colSpan: columns.length || 1, style: { ...config.subrow.render.styles, padding: "7.5px 7.5px 7.5px 0" } }, config.subrow?.render.element(items) ?? React.createElement(React.Fragment, null))));
111
113
  }
112
114
  return items.map((subitem, subindex) => {
115
+ const id = methods.trackBy?.(subitem) ?? subindex.toString();
116
+ const key = `${parentKey}.${id}`;
113
117
  const _subitem = subitem[_subrowSelector];
114
118
  const isHasSubitems = _subrowSelector in subitem;
115
119
  return (React.createElement(Fragment, { key: `subitem-${index}-${subindex}-${Math.random()}` },
116
120
  React.createElement("tr", { className: `subrow-item ${_subrowButton ? "type-b" : "type-a"}`, "data-level": level },
117
121
  isHasSubitems && _subrowButton ? (React.createElement("td", null,
118
122
  React.createElement("div", { className: "subitem-open-button-wrapper" },
119
- React.createElement("span", { className: `${(states.showSubitems.get[`${index}.${subindex}`] && "opened") ?? ""} ${!_subitem && "passive"}`, onClick: () => {
123
+ React.createElement("span", { className: `${(states.showSubitems.get[key] && "opened") ?? ""} ${!_subitem && "passive"}`, onClick: () => {
120
124
  if (!_subitem)
121
125
  return;
122
126
  states.showSubitems.set((prev) => ({
123
127
  ...prev,
124
- [`${index}.${subindex}`]: !prev[`${index}.${subindex}`],
128
+ [key]: !prev[key],
125
129
  }));
126
130
  } })))) : !isHasSubitems && _subrowButton ? (React.createElement("td", { style: { width: 0, minWidth: 0 } })) : null,
127
131
  !config.subrow?.render ? (columns.map((column, cIndex) => renderCell({
@@ -134,7 +138,7 @@ function TBody({ data, columns, refs, methods, states, config }) {
134
138
  height: 0,
135
139
  isSubrows: true,
136
140
  }))) : (React.createElement("td", { colSpan: columns.length || 1 }, config.subrow?.render.element(items) ?? React.createElement(React.Fragment, null)))),
137
- states.showSubitems.get[`${index}.${subindex}`] && _subitem && (React.createElement(SubitemList, { items: _subitem, columns: columns, index: subindex, depth: depth + 0.75, level: level + 1 }))));
141
+ states.showSubitems.get[key] && _subitem && (React.createElement(SubitemList, { items: _subitem, columns: columns, index: subindex, depth: depth + 0.75, level: level + 1, parentKey: key }))));
138
142
  });
139
143
  };
140
144
  // useEffects
package/dist/components/data-display/table/index.js CHANGED
@@ -337,8 +337,9 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
337
337
  };
338
338
  const openAllSubrowsRecursively = (data, parentKey = "") => {
339
339
  let result = {};
340
- data.forEach((item, index) => {
341
- const key = parentKey ? `${parentKey}.${index}` : `${index}`;
340
+ data.forEach((item) => {
341
+ const id = trackBy?.(item);
342
+ const key = parentKey ? `${parentKey}.${id}` : `${id}`;
342
343
  const subitems = item[_subrowSelector];
343
344
  if (subitems && Array.isArray(subitems) && subitems.length > 0) {
344
345
  const nested = openAllSubrowsRecursively(subitems, key);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ar-design",
3
- "version": "0.4.48",
3
+ "version": "0.4.49",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",