react-table-edit 0.4.8 → 0.5.0

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 (5) hide show
  1. package/dist/index.d.mts +3 -1
  2. package/dist/index.d.ts +3 -1
  3. package/dist/index.js +91 -70
  4. package/dist/index.mjs +92 -71
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -192,7 +192,9 @@ type IFDataProps = {
192
192
  resourceCodeParent?: string;
193
193
  resourceCode: string;
194
194
  resources: any[];
195
+ renderModal?: any;
196
+ windowSize?: any;
195
197
  };
196
- declare const TabsMenuComponent: ({ buttonWidth, tabParent, tabChild, resourceCodeParent, resources, resourceCode }: IFDataProps) => react_jsx_runtime.JSX.Element;
198
+ declare const TabsMenuComponent: ({ buttonWidth, tabParent, tabChild, resourceCodeParent, resources, resourceCode, windowSize, renderModal }: IFDataProps) => react_jsx_runtime.JSX.Element;
197
199
 
198
200
  export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditPaging, type IFTableEditProps, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFToolbarOptions, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TabsMenuComponent, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };
package/dist/index.d.ts CHANGED
@@ -192,7 +192,9 @@ type IFDataProps = {
192
192
  resourceCodeParent?: string;
193
193
  resourceCode: string;
194
194
  resources: any[];
195
+ renderModal?: any;
196
+ windowSize?: any;
195
197
  };
196
- declare const TabsMenuComponent: ({ buttonWidth, tabParent, tabChild, resourceCodeParent, resources, resourceCode }: IFDataProps) => react_jsx_runtime.JSX.Element;
198
+ declare const TabsMenuComponent: ({ buttonWidth, tabParent, tabChild, resourceCodeParent, resources, resourceCode, windowSize, renderModal }: IFDataProps) => react_jsx_runtime.JSX.Element;
197
199
 
198
200
  export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditPaging, type IFTableEditProps, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFToolbarOptions, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TabsMenuComponent, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };
package/dist/index.js CHANGED
@@ -1535,9 +1535,9 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
1535
1535
  const gridRef = (0, import_react12.useRef)();
1536
1536
  const lag = window.localStorage.getItem("i18nextLng");
1537
1537
  const lang = lag ? lag : "vi";
1538
+ let totalCount = dataSource.length;
1538
1539
  const pagingClient = pagingSetting?.allowPaging && (pagingSetting?.pagingClient || !(editDisable || addDisable));
1539
1540
  const searchClient = searchSetting?.searchEnable && (searchSetting?.searchClient || !(editDisable || addDisable));
1540
- let totalCount = dataSource.length;
1541
1541
  const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? "id";
1542
1542
  const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
1543
1543
  (0, import_react12.useEffect)(() => {
@@ -2148,39 +2148,35 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2148
2148
  );
2149
2149
  }) }) });
2150
2150
  };
2151
- const moveIndexRowToNewPage = () => {
2152
- changeDataSource(dataSource, true);
2153
- if (pagingClient && pagingSetting?.setCurrentPage && totalCount % (pagingSetting?.pageSize ?? 0) === 0) {
2154
- pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 0) + 1);
2155
- }
2156
- if (tableElement) {
2157
- setIndexFocus(totalCount);
2158
- setTimeout(() => {
2159
- tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
2160
- const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${totalCount + 1}`);
2161
- if (element) {
2162
- if (element.className.includes("react-select") || element.className.includes("form-edit")) {
2163
- element.getElementsByTagName("input")[0]?.focus();
2164
- } else {
2165
- element.focus();
2166
- element.scrollIntoView();
2167
- }
2168
- }
2169
- }, 100);
2170
- }
2171
- };
2172
- const focusNewElement = (idElement, onLoad = false) => {
2151
+ const focusNewElement = (col, row, onLoad = false) => {
2173
2152
  setTimeout(() => {
2174
- const element = document.getElementById(idElement);
2153
+ const element = document.getElementById(`${idTable}-col${col}-row${row}`);
2175
2154
  if (element) {
2176
2155
  if (element.className.includes("react-select") || element.className.includes("form-edit")) {
2177
2156
  element.getElementsByTagName("input")[0]?.focus();
2178
2157
  } else {
2179
2158
  element.focus();
2180
2159
  }
2160
+ if ((tableElement.current?.scrollHeight ?? 0) > 0) {
2161
+ if ((tableElement.current?.scrollTop ?? 0) > (row - 1) * 34) {
2162
+ tableElement.current?.scrollTo({ behavior: "smooth", top: (row - 1) * 34 });
2163
+ } else if ((tableElement.current?.clientHeight ?? 0) - (haveSum ? 30 : 0) - headerColumns.length * 42 < row * 34 - (tableElement.current?.scrollTop ?? 0)) {
2164
+ tableElement.current?.scrollTo({ behavior: "smooth", top: (tableElement.current?.scrollTop ?? 0) + 34 });
2165
+ }
2166
+ }
2181
2167
  }
2182
2168
  }, onLoad ? 100 : 0);
2183
2169
  };
2170
+ const moveIndexRowToNewPage = () => {
2171
+ changeDataSource(dataSource, true);
2172
+ if (pagingClient && pagingSetting?.setCurrentPage && totalCount % (pagingSetting?.pageSize ?? 0) === 0) {
2173
+ pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 0) + 1);
2174
+ }
2175
+ if (tableElement) {
2176
+ setIndexFocus(totalCount);
2177
+ focusNewElement(columnFistEdit, totalCount + 1, true);
2178
+ }
2179
+ };
2184
2180
  const checkKeyDown = (e, row, col, indexRow, indexCol) => {
2185
2181
  if (e.code === "ArrowRight") {
2186
2182
  let newIndexCol = -1;
@@ -2191,7 +2187,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2191
2187
  }
2192
2188
  }
2193
2189
  if (newIndexCol > -1) {
2194
- focusNewElement(`${idTable}-col${newIndexCol}-row${indexRow}`);
2190
+ focusNewElement(newIndexCol, indexRow);
2195
2191
  e.preventDefault();
2196
2192
  return e.code;
2197
2193
  }
@@ -2204,7 +2200,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2204
2200
  }
2205
2201
  }
2206
2202
  if (newIndexCol > -1) {
2207
- focusNewElement(`${idTable}-col${newIndexCol}-row${indexRow}`);
2203
+ focusNewElement(newIndexCol, indexRow);
2208
2204
  e.preventDefault();
2209
2205
  return e.code;
2210
2206
  }
@@ -2216,7 +2212,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2216
2212
  pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) - 1);
2217
2213
  }
2218
2214
  setIndexFocus(indexRow - 2);
2219
- focusNewElement(`${idTable}-col${indexCol}-row${indexRow - 1}`, true);
2215
+ focusNewElement(indexCol, indexRow - 1, true);
2220
2216
  e.preventDefault();
2221
2217
  return e.code;
2222
2218
  }
@@ -2229,7 +2225,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2229
2225
  pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
2230
2226
  }
2231
2227
  setIndexFocus(indexRow);
2232
- focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
2228
+ focusNewElement(indexCol, indexRow + 1, true);
2233
2229
  e.preventDefault();
2234
2230
  return e.code;
2235
2231
  }
@@ -2242,7 +2238,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2242
2238
  pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
2243
2239
  }
2244
2240
  setIndexFocus(indexRow);
2245
- focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
2241
+ focusNewElement(indexCol, indexRow + 1, true);
2246
2242
  }
2247
2243
  e.preventDefault();
2248
2244
  return e.code;
@@ -2256,7 +2252,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2256
2252
  pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
2257
2253
  }
2258
2254
  setIndexFocus(indexRow);
2259
- focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
2255
+ focusNewElement(indexCol, indexRow + 1, true);
2260
2256
  }
2261
2257
  e.preventDefault();
2262
2258
  return e.code;
@@ -2296,14 +2292,14 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2296
2292
  }
2297
2293
  });
2298
2294
  const handleAdd = () => {
2295
+ const lengthData = dataSource.length;
2299
2296
  changeDataSource(dataSource, true);
2300
- const lengthData = dataSource.length - 1;
2301
2297
  if (pagingSetting?.setCurrentPage) {
2302
2298
  pagingSetting?.setCurrentPage(Math.floor(lengthData / (pagingSetting?.pageSize ?? 0)) + 1);
2303
2299
  }
2304
2300
  if (tableElement) {
2305
2301
  setIndexFocus(lengthData);
2306
- focusNewElement(`${idTable}-col${columnFistEdit}-row${lengthData + 1}`, true);
2302
+ focusNewElement(columnFistEdit, lengthData + 1, true);
2307
2303
  }
2308
2304
  };
2309
2305
  const handleDuplicate = (data, index) => {
@@ -2387,7 +2383,6 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2387
2383
  const changeDataSource = (data, haveNew = false) => {
2388
2384
  if (!editDisable && !addDisable && setDataSource) {
2389
2385
  if (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm) {
2390
- console.log("\xE1dads");
2391
2386
  if (searchSetting?.setSearchTerm) {
2392
2387
  searchSetting?.setSearchTerm("");
2393
2388
  } else {
@@ -2967,14 +2962,19 @@ var TabsMenuComponent = ({
2967
2962
  tabChild,
2968
2963
  resourceCodeParent,
2969
2964
  resources,
2970
- resourceCode
2965
+ resourceCode,
2966
+ windowSize,
2967
+ renderModal
2971
2968
  }) => {
2969
+ const navigate = (0, import_react_router_dom.useNavigate)();
2972
2970
  const [dataMenu, setDataMenu] = (0, import_react13.useState)([]);
2973
2971
  const [openMenu, setOpenMenu] = (0, import_react13.useState)(false);
2974
2972
  const [url, setUrl] = (0, import_react13.useState)("");
2975
2973
  const [contentWidth, setContentWidth] = (0, import_react13.useState)(0);
2976
2974
  const [componentWidth, setComponentWidth] = (0, import_react13.useState)(0);
2977
2975
  const [scrollPosition, setScrollPosition] = (0, import_react13.useState)(0);
2976
+ const [dataItem, setDataItem] = (0, import_react13.useState)([]);
2977
+ const [openModal, setOpenModal] = (0, import_react13.useState)({});
2978
2978
  const handleWindowResize = () => {
2979
2979
  const tabEle = document.getElementById(`tab-component-${resourceCode}`);
2980
2980
  const tabContent = document.getElementById(`content-component-${resourceCode}`);
@@ -2994,6 +2994,7 @@ var TabsMenuComponent = ({
2994
2994
  setContentWidth(tabContent?.offsetWidth ?? 0);
2995
2995
  }
2996
2996
  }, 100);
2997
+ window.addEventListener("resize", handleWindowResize);
2997
2998
  return () => {
2998
2999
  window.removeEventListener("resize", handleWindowResize);
2999
3000
  };
@@ -3026,42 +3027,62 @@ var TabsMenuComponent = ({
3026
3027
  tabEle.scrollLeft = newScrollPosition;
3027
3028
  }
3028
3029
  };
3029
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: (0, import_classnames11.default)("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
3030
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
3031
- "div",
3032
- {
3033
- onClick: () => handleScroll(-200),
3034
- className: (0, import_classnames11.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
3035
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_becoxy_icons5.ChevronLeft, {})
3036
- }
3037
- ),
3038
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
3039
- if (item?.resAttributes?.IS_MENU === "1") {
3040
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_reactstrap9.UncontrolledDropdown, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
3041
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap9.DropdownToggle, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: item.name }) }),
3042
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap9.DropdownMenu, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap9.DropdownItem, { style: { borderRadius: "5px", margin: "0 0.5rem", width: "95%", padding: "0.5rem 0.5rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_router_dom.Link, { to: x.url, style: { display: "block", width: "100%" }, children: x.name }) }, x.code)) })
3043
- ] }, item.code);
3044
- } else {
3045
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
3046
- import_react_router_dom.Link,
3047
- {
3048
- to: item.url,
3049
- className: (0, import_classnames11.default)("tab-custom-item", { active: item.url === url || tabParent && url?.split("/").length > 3 && item.url.startsWith(url.substring(0, url.lastIndexOf("/"))) }),
3050
- children: item.name
3051
- },
3052
- item.code
3053
- );
3054
- }
3055
- }) }) }),
3056
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
3057
- "div",
3058
- {
3059
- onClick: () => handleScroll(200),
3060
- className: (0, import_classnames11.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
3061
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_becoxy_icons5.ChevronRight, {})
3062
- }
3063
- )
3064
- ] }) });
3030
+ const handleModal = (name) => {
3031
+ setOpenModal((old) => ({ ...old, [name]: !(openModal[name] ?? false) }));
3032
+ };
3033
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react13.Fragment, { children: [
3034
+ renderModal({ handleModal, windowSize, openModal, setDataItem, dataItem }),
3035
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: (0, import_classnames11.default)("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
3036
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
3037
+ "div",
3038
+ {
3039
+ onClick: () => handleScroll(-200),
3040
+ className: (0, import_classnames11.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
3041
+ children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_becoxy_icons5.ChevronLeft, {})
3042
+ }
3043
+ ),
3044
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
3045
+ if (item?.resAttributes?.IS_MENU === "1") {
3046
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_reactstrap9.UncontrolledDropdown, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
3047
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap9.DropdownToggle, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: item.name }) }),
3048
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap9.DropdownMenu, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
3049
+ import_reactstrap9.DropdownItem,
3050
+ {
3051
+ style: { borderRadius: "5px", margin: "0 0.5rem", width: "95%" },
3052
+ onClick: () => {
3053
+ if (x.resAttributes.MODAL_VALUE) {
3054
+ handleModal(x.resAttributes.MODAL_VALUE);
3055
+ } else {
3056
+ navigate(x.url);
3057
+ }
3058
+ },
3059
+ children: x.name
3060
+ },
3061
+ x.code
3062
+ )) })
3063
+ ] }, item.code);
3064
+ } else {
3065
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
3066
+ import_react_router_dom.Link,
3067
+ {
3068
+ to: item.url,
3069
+ className: (0, import_classnames11.default)("tab-custom-item", { active: item.url === url || tabParent && url?.split("/").length > 3 && item.url.startsWith(url.substring(0, url.lastIndexOf("/"))) }),
3070
+ children: item.name
3071
+ },
3072
+ item.code
3073
+ );
3074
+ }
3075
+ }) }) }),
3076
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
3077
+ "div",
3078
+ {
3079
+ onClick: () => handleScroll(200),
3080
+ className: (0, import_classnames11.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
3081
+ children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_becoxy_icons5.ChevronRight, {})
3082
+ }
3083
+ )
3084
+ ] })
3085
+ ] });
3065
3086
  };
3066
3087
 
3067
3088
  // index.ts
package/dist/index.mjs CHANGED
@@ -1493,9 +1493,9 @@ var TableEdit = forwardRef2((props, ref) => {
1493
1493
  const gridRef = useRef2();
1494
1494
  const lag = window.localStorage.getItem("i18nextLng");
1495
1495
  const lang = lag ? lag : "vi";
1496
+ let totalCount = dataSource.length;
1496
1497
  const pagingClient = pagingSetting?.allowPaging && (pagingSetting?.pagingClient || !(editDisable || addDisable));
1497
1498
  const searchClient = searchSetting?.searchEnable && (searchSetting?.searchClient || !(editDisable || addDisable));
1498
- let totalCount = dataSource.length;
1499
1499
  const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? "id";
1500
1500
  const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
1501
1501
  useEffect6(() => {
@@ -2106,39 +2106,35 @@ var TableEdit = forwardRef2((props, ref) => {
2106
2106
  );
2107
2107
  }) }) });
2108
2108
  };
2109
- const moveIndexRowToNewPage = () => {
2110
- changeDataSource(dataSource, true);
2111
- if (pagingClient && pagingSetting?.setCurrentPage && totalCount % (pagingSetting?.pageSize ?? 0) === 0) {
2112
- pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 0) + 1);
2113
- }
2114
- if (tableElement) {
2115
- setIndexFocus(totalCount);
2116
- setTimeout(() => {
2117
- tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
2118
- const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${totalCount + 1}`);
2119
- if (element) {
2120
- if (element.className.includes("react-select") || element.className.includes("form-edit")) {
2121
- element.getElementsByTagName("input")[0]?.focus();
2122
- } else {
2123
- element.focus();
2124
- element.scrollIntoView();
2125
- }
2126
- }
2127
- }, 100);
2128
- }
2129
- };
2130
- const focusNewElement = (idElement, onLoad = false) => {
2109
+ const focusNewElement = (col, row, onLoad = false) => {
2131
2110
  setTimeout(() => {
2132
- const element = document.getElementById(idElement);
2111
+ const element = document.getElementById(`${idTable}-col${col}-row${row}`);
2133
2112
  if (element) {
2134
2113
  if (element.className.includes("react-select") || element.className.includes("form-edit")) {
2135
2114
  element.getElementsByTagName("input")[0]?.focus();
2136
2115
  } else {
2137
2116
  element.focus();
2138
2117
  }
2118
+ if ((tableElement.current?.scrollHeight ?? 0) > 0) {
2119
+ if ((tableElement.current?.scrollTop ?? 0) > (row - 1) * 34) {
2120
+ tableElement.current?.scrollTo({ behavior: "smooth", top: (row - 1) * 34 });
2121
+ } else if ((tableElement.current?.clientHeight ?? 0) - (haveSum ? 30 : 0) - headerColumns.length * 42 < row * 34 - (tableElement.current?.scrollTop ?? 0)) {
2122
+ tableElement.current?.scrollTo({ behavior: "smooth", top: (tableElement.current?.scrollTop ?? 0) + 34 });
2123
+ }
2124
+ }
2139
2125
  }
2140
2126
  }, onLoad ? 100 : 0);
2141
2127
  };
2128
+ const moveIndexRowToNewPage = () => {
2129
+ changeDataSource(dataSource, true);
2130
+ if (pagingClient && pagingSetting?.setCurrentPage && totalCount % (pagingSetting?.pageSize ?? 0) === 0) {
2131
+ pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 0) + 1);
2132
+ }
2133
+ if (tableElement) {
2134
+ setIndexFocus(totalCount);
2135
+ focusNewElement(columnFistEdit, totalCount + 1, true);
2136
+ }
2137
+ };
2142
2138
  const checkKeyDown = (e, row, col, indexRow, indexCol) => {
2143
2139
  if (e.code === "ArrowRight") {
2144
2140
  let newIndexCol = -1;
@@ -2149,7 +2145,7 @@ var TableEdit = forwardRef2((props, ref) => {
2149
2145
  }
2150
2146
  }
2151
2147
  if (newIndexCol > -1) {
2152
- focusNewElement(`${idTable}-col${newIndexCol}-row${indexRow}`);
2148
+ focusNewElement(newIndexCol, indexRow);
2153
2149
  e.preventDefault();
2154
2150
  return e.code;
2155
2151
  }
@@ -2162,7 +2158,7 @@ var TableEdit = forwardRef2((props, ref) => {
2162
2158
  }
2163
2159
  }
2164
2160
  if (newIndexCol > -1) {
2165
- focusNewElement(`${idTable}-col${newIndexCol}-row${indexRow}`);
2161
+ focusNewElement(newIndexCol, indexRow);
2166
2162
  e.preventDefault();
2167
2163
  return e.code;
2168
2164
  }
@@ -2174,7 +2170,7 @@ var TableEdit = forwardRef2((props, ref) => {
2174
2170
  pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) - 1);
2175
2171
  }
2176
2172
  setIndexFocus(indexRow - 2);
2177
- focusNewElement(`${idTable}-col${indexCol}-row${indexRow - 1}`, true);
2173
+ focusNewElement(indexCol, indexRow - 1, true);
2178
2174
  e.preventDefault();
2179
2175
  return e.code;
2180
2176
  }
@@ -2187,7 +2183,7 @@ var TableEdit = forwardRef2((props, ref) => {
2187
2183
  pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
2188
2184
  }
2189
2185
  setIndexFocus(indexRow);
2190
- focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
2186
+ focusNewElement(indexCol, indexRow + 1, true);
2191
2187
  e.preventDefault();
2192
2188
  return e.code;
2193
2189
  }
@@ -2200,7 +2196,7 @@ var TableEdit = forwardRef2((props, ref) => {
2200
2196
  pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
2201
2197
  }
2202
2198
  setIndexFocus(indexRow);
2203
- focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
2199
+ focusNewElement(indexCol, indexRow + 1, true);
2204
2200
  }
2205
2201
  e.preventDefault();
2206
2202
  return e.code;
@@ -2214,7 +2210,7 @@ var TableEdit = forwardRef2((props, ref) => {
2214
2210
  pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
2215
2211
  }
2216
2212
  setIndexFocus(indexRow);
2217
- focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
2213
+ focusNewElement(indexCol, indexRow + 1, true);
2218
2214
  }
2219
2215
  e.preventDefault();
2220
2216
  return e.code;
@@ -2254,14 +2250,14 @@ var TableEdit = forwardRef2((props, ref) => {
2254
2250
  }
2255
2251
  });
2256
2252
  const handleAdd = () => {
2253
+ const lengthData = dataSource.length;
2257
2254
  changeDataSource(dataSource, true);
2258
- const lengthData = dataSource.length - 1;
2259
2255
  if (pagingSetting?.setCurrentPage) {
2260
2256
  pagingSetting?.setCurrentPage(Math.floor(lengthData / (pagingSetting?.pageSize ?? 0)) + 1);
2261
2257
  }
2262
2258
  if (tableElement) {
2263
2259
  setIndexFocus(lengthData);
2264
- focusNewElement(`${idTable}-col${columnFistEdit}-row${lengthData + 1}`, true);
2260
+ focusNewElement(columnFistEdit, lengthData + 1, true);
2265
2261
  }
2266
2262
  };
2267
2263
  const handleDuplicate = (data, index) => {
@@ -2345,7 +2341,6 @@ var TableEdit = forwardRef2((props, ref) => {
2345
2341
  const changeDataSource = (data, haveNew = false) => {
2346
2342
  if (!editDisable && !addDisable && setDataSource) {
2347
2343
  if (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm) {
2348
- console.log("\xE1dads");
2349
2344
  if (searchSetting?.setSearchTerm) {
2350
2345
  searchSetting?.setSearchTerm("");
2351
2346
  } else {
@@ -2916,7 +2911,7 @@ var table_default = TableEdit;
2916
2911
  import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "becoxy-icons";
2917
2912
  import classNames5 from "classnames";
2918
2913
  import { Fragment as Fragment14, useEffect as useEffect7, useState as useState6 } from "react";
2919
- import { Link } from "react-router-dom";
2914
+ import { Link, useNavigate } from "react-router-dom";
2920
2915
  import { DropdownItem as DropdownItem2, DropdownMenu as DropdownMenu3, DropdownToggle as DropdownToggle3, UncontrolledDropdown as UncontrolledDropdown2 } from "reactstrap";
2921
2916
  import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
2922
2917
  var TabsMenuComponent = ({
@@ -2925,14 +2920,19 @@ var TabsMenuComponent = ({
2925
2920
  tabChild,
2926
2921
  resourceCodeParent,
2927
2922
  resources,
2928
- resourceCode
2923
+ resourceCode,
2924
+ windowSize,
2925
+ renderModal
2929
2926
  }) => {
2927
+ const navigate = useNavigate();
2930
2928
  const [dataMenu, setDataMenu] = useState6([]);
2931
2929
  const [openMenu, setOpenMenu] = useState6(false);
2932
2930
  const [url, setUrl] = useState6("");
2933
2931
  const [contentWidth, setContentWidth] = useState6(0);
2934
2932
  const [componentWidth, setComponentWidth] = useState6(0);
2935
2933
  const [scrollPosition, setScrollPosition] = useState6(0);
2934
+ const [dataItem, setDataItem] = useState6([]);
2935
+ const [openModal, setOpenModal] = useState6({});
2936
2936
  const handleWindowResize = () => {
2937
2937
  const tabEle = document.getElementById(`tab-component-${resourceCode}`);
2938
2938
  const tabContent = document.getElementById(`content-component-${resourceCode}`);
@@ -2952,6 +2952,7 @@ var TabsMenuComponent = ({
2952
2952
  setContentWidth(tabContent?.offsetWidth ?? 0);
2953
2953
  }
2954
2954
  }, 100);
2955
+ window.addEventListener("resize", handleWindowResize);
2955
2956
  return () => {
2956
2957
  window.removeEventListener("resize", handleWindowResize);
2957
2958
  };
@@ -2984,42 +2985,62 @@ var TabsMenuComponent = ({
2984
2985
  tabEle.scrollLeft = newScrollPosition;
2985
2986
  }
2986
2987
  };
2987
- return /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsxs12("div", { className: classNames5("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
2988
- /* @__PURE__ */ jsx13(
2989
- "div",
2990
- {
2991
- onClick: () => handleScroll(-200),
2992
- className: classNames5("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
2993
- children: /* @__PURE__ */ jsx13(ChevronLeft2, {})
2994
- }
2995
- ),
2996
- /* @__PURE__ */ jsx13("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ jsx13("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
2997
- if (item?.resAttributes?.IS_MENU === "1") {
2998
- return /* @__PURE__ */ jsxs12(UncontrolledDropdown2, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
2999
- /* @__PURE__ */ jsx13(DropdownToggle3, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ jsx13("div", { children: item.name }) }),
3000
- /* @__PURE__ */ jsx13(DropdownMenu3, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ jsx13(DropdownItem2, { style: { borderRadius: "5px", margin: "0 0.5rem", width: "95%", padding: "0.5rem 0.5rem" }, children: /* @__PURE__ */ jsx13(Link, { to: x.url, style: { display: "block", width: "100%" }, children: x.name }) }, x.code)) })
3001
- ] }, item.code);
3002
- } else {
3003
- return /* @__PURE__ */ jsx13(
3004
- Link,
3005
- {
3006
- to: item.url,
3007
- className: classNames5("tab-custom-item", { active: item.url === url || tabParent && url?.split("/").length > 3 && item.url.startsWith(url.substring(0, url.lastIndexOf("/"))) }),
3008
- children: item.name
3009
- },
3010
- item.code
3011
- );
3012
- }
3013
- }) }) }),
3014
- /* @__PURE__ */ jsx13(
3015
- "div",
3016
- {
3017
- onClick: () => handleScroll(200),
3018
- className: classNames5("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
3019
- children: /* @__PURE__ */ jsx13(ChevronRight2, {})
3020
- }
3021
- )
3022
- ] }) });
2988
+ const handleModal = (name) => {
2989
+ setOpenModal((old) => ({ ...old, [name]: !(openModal[name] ?? false) }));
2990
+ };
2991
+ return /* @__PURE__ */ jsxs12(Fragment14, { children: [
2992
+ renderModal({ handleModal, windowSize, openModal, setDataItem, dataItem }),
2993
+ /* @__PURE__ */ jsxs12("div", { className: classNames5("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
2994
+ /* @__PURE__ */ jsx13(
2995
+ "div",
2996
+ {
2997
+ onClick: () => handleScroll(-200),
2998
+ className: classNames5("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
2999
+ children: /* @__PURE__ */ jsx13(ChevronLeft2, {})
3000
+ }
3001
+ ),
3002
+ /* @__PURE__ */ jsx13("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ jsx13("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
3003
+ if (item?.resAttributes?.IS_MENU === "1") {
3004
+ return /* @__PURE__ */ jsxs12(UncontrolledDropdown2, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
3005
+ /* @__PURE__ */ jsx13(DropdownToggle3, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ jsx13("div", { children: item.name }) }),
3006
+ /* @__PURE__ */ jsx13(DropdownMenu3, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ jsx13(
3007
+ DropdownItem2,
3008
+ {
3009
+ style: { borderRadius: "5px", margin: "0 0.5rem", width: "95%" },
3010
+ onClick: () => {
3011
+ if (x.resAttributes.MODAL_VALUE) {
3012
+ handleModal(x.resAttributes.MODAL_VALUE);
3013
+ } else {
3014
+ navigate(x.url);
3015
+ }
3016
+ },
3017
+ children: x.name
3018
+ },
3019
+ x.code
3020
+ )) })
3021
+ ] }, item.code);
3022
+ } else {
3023
+ return /* @__PURE__ */ jsx13(
3024
+ Link,
3025
+ {
3026
+ to: item.url,
3027
+ className: classNames5("tab-custom-item", { active: item.url === url || tabParent && url?.split("/").length > 3 && item.url.startsWith(url.substring(0, url.lastIndexOf("/"))) }),
3028
+ children: item.name
3029
+ },
3030
+ item.code
3031
+ );
3032
+ }
3033
+ }) }) }),
3034
+ /* @__PURE__ */ jsx13(
3035
+ "div",
3036
+ {
3037
+ onClick: () => handleScroll(200),
3038
+ className: classNames5("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
3039
+ children: /* @__PURE__ */ jsx13(ChevronRight2, {})
3040
+ }
3041
+ )
3042
+ ] })
3043
+ ] });
3023
3044
  };
3024
3045
 
3025
3046
  // index.ts
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-table-edit",
3
3
  "license": "MIT",
4
- "version": "0.4.8",
4
+ "version": "0.5.0",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",