react-table-edit 0.4.7 → 0.4.8
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.
- package/dist/index.js +41 -70
- package/dist/index.mjs +62 -91
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -73,6 +73,11 @@ var ReactInput = (props) => {
|
|
|
73
73
|
setValue("");
|
|
74
74
|
setSearchTerm("");
|
|
75
75
|
};
|
|
76
|
+
(0, import_react.useEffect)(() => {
|
|
77
|
+
if (!props.value) {
|
|
78
|
+
setValue("");
|
|
79
|
+
}
|
|
80
|
+
}, [props.value]);
|
|
76
81
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
|
|
77
82
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
78
83
|
import_reactstrap.Input,
|
|
@@ -1536,7 +1541,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
1536
1541
|
const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? "id";
|
|
1537
1542
|
const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
|
|
1538
1543
|
(0, import_react12.useEffect)(() => {
|
|
1539
|
-
if (pagingClient && pagingSetting.setCurrentPage &&
|
|
1544
|
+
if (pagingClient && pagingSetting.setCurrentPage && Math.ceil(totalCount / (pagingSetting?.pageSize ?? 1)) < (pagingSetting.currentPage ?? 1)) {
|
|
1540
1545
|
pagingSetting.setCurrentPage(1);
|
|
1541
1546
|
}
|
|
1542
1547
|
}, [dataSource]);
|
|
@@ -2164,6 +2169,18 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2164
2169
|
}, 100);
|
|
2165
2170
|
}
|
|
2166
2171
|
};
|
|
2172
|
+
const focusNewElement = (idElement, onLoad = false) => {
|
|
2173
|
+
setTimeout(() => {
|
|
2174
|
+
const element = document.getElementById(idElement);
|
|
2175
|
+
if (element) {
|
|
2176
|
+
if (element.className.includes("react-select") || element.className.includes("form-edit")) {
|
|
2177
|
+
element.getElementsByTagName("input")[0]?.focus();
|
|
2178
|
+
} else {
|
|
2179
|
+
element.focus();
|
|
2180
|
+
}
|
|
2181
|
+
}
|
|
2182
|
+
}, onLoad ? 100 : 0);
|
|
2183
|
+
};
|
|
2167
2184
|
const checkKeyDown = (e, row, col, indexRow, indexCol) => {
|
|
2168
2185
|
if (e.code === "ArrowRight") {
|
|
2169
2186
|
let newIndexCol = -1;
|
|
@@ -2174,14 +2191,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2174
2191
|
}
|
|
2175
2192
|
}
|
|
2176
2193
|
if (newIndexCol > -1) {
|
|
2177
|
-
|
|
2178
|
-
if (element) {
|
|
2179
|
-
if (element.className.includes("react-select") || element.className.includes("form-edit")) {
|
|
2180
|
-
element.getElementsByTagName("input")[0]?.focus();
|
|
2181
|
-
} else {
|
|
2182
|
-
element.focus();
|
|
2183
|
-
}
|
|
2184
|
-
}
|
|
2194
|
+
focusNewElement(`${idTable}-col${newIndexCol}-row${indexRow}`);
|
|
2185
2195
|
e.preventDefault();
|
|
2186
2196
|
return e.code;
|
|
2187
2197
|
}
|
|
@@ -2194,14 +2204,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2194
2204
|
}
|
|
2195
2205
|
}
|
|
2196
2206
|
if (newIndexCol > -1) {
|
|
2197
|
-
|
|
2198
|
-
if (element) {
|
|
2199
|
-
if (element.className.includes("react-select") || element.className.includes("form-edit")) {
|
|
2200
|
-
element.getElementsByTagName("input")[0]?.focus();
|
|
2201
|
-
} else {
|
|
2202
|
-
element.focus();
|
|
2203
|
-
}
|
|
2204
|
-
}
|
|
2207
|
+
focusNewElement(`${idTable}-col${newIndexCol}-row${indexRow}`);
|
|
2205
2208
|
e.preventDefault();
|
|
2206
2209
|
return e.code;
|
|
2207
2210
|
}
|
|
@@ -2213,16 +2216,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2213
2216
|
pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) - 1);
|
|
2214
2217
|
}
|
|
2215
2218
|
setIndexFocus(indexRow - 2);
|
|
2216
|
-
|
|
2217
|
-
const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow - 1}`);
|
|
2218
|
-
if (element2) {
|
|
2219
|
-
if (element2.className.includes("react-select") || element2.className.includes("form-edit")) {
|
|
2220
|
-
element2.getElementsByTagName("input")[0]?.focus();
|
|
2221
|
-
} else {
|
|
2222
|
-
element2.focus();
|
|
2223
|
-
}
|
|
2224
|
-
}
|
|
2225
|
-
}, 100);
|
|
2219
|
+
focusNewElement(`${idTable}-col${indexCol}-row${indexRow - 1}`, true);
|
|
2226
2220
|
e.preventDefault();
|
|
2227
2221
|
return e.code;
|
|
2228
2222
|
}
|
|
@@ -2235,16 +2229,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2235
2229
|
pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
|
|
2236
2230
|
}
|
|
2237
2231
|
setIndexFocus(indexRow);
|
|
2238
|
-
|
|
2239
|
-
const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
|
|
2240
|
-
if (element2) {
|
|
2241
|
-
if (element2.className.includes("react-select") || element2.className.includes("form-edit")) {
|
|
2242
|
-
element2.getElementsByTagName("input")[0]?.focus();
|
|
2243
|
-
} else {
|
|
2244
|
-
element2.focus();
|
|
2245
|
-
}
|
|
2246
|
-
}
|
|
2247
|
-
}, 100);
|
|
2232
|
+
focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
|
|
2248
2233
|
e.preventDefault();
|
|
2249
2234
|
return e.code;
|
|
2250
2235
|
}
|
|
@@ -2257,16 +2242,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2257
2242
|
pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
|
|
2258
2243
|
}
|
|
2259
2244
|
setIndexFocus(indexRow);
|
|
2260
|
-
|
|
2261
|
-
const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
|
|
2262
|
-
if (element) {
|
|
2263
|
-
if (element.className.includes("react-select") || element.className.includes("form-edit")) {
|
|
2264
|
-
element.getElementsByTagName("input")[0]?.focus();
|
|
2265
|
-
} else {
|
|
2266
|
-
element.focus();
|
|
2267
|
-
}
|
|
2268
|
-
}
|
|
2269
|
-
}, 100);
|
|
2245
|
+
focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
|
|
2270
2246
|
}
|
|
2271
2247
|
e.preventDefault();
|
|
2272
2248
|
return e.code;
|
|
@@ -2280,16 +2256,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2280
2256
|
pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
|
|
2281
2257
|
}
|
|
2282
2258
|
setIndexFocus(indexRow);
|
|
2283
|
-
|
|
2284
|
-
const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
|
|
2285
|
-
if (element2) {
|
|
2286
|
-
if (element2.className.includes("react-select") || element2.className.includes("form-edit")) {
|
|
2287
|
-
element2.getElementsByTagName("input")[0]?.focus();
|
|
2288
|
-
} else {
|
|
2289
|
-
element2.focus();
|
|
2290
|
-
}
|
|
2291
|
-
}
|
|
2292
|
-
}, 100);
|
|
2259
|
+
focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
|
|
2293
2260
|
}
|
|
2294
2261
|
e.preventDefault();
|
|
2295
2262
|
return e.code;
|
|
@@ -2330,22 +2297,13 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2330
2297
|
});
|
|
2331
2298
|
const handleAdd = () => {
|
|
2332
2299
|
changeDataSource(dataSource, true);
|
|
2300
|
+
const lengthData = dataSource.length - 1;
|
|
2333
2301
|
if (pagingSetting?.setCurrentPage) {
|
|
2334
|
-
pagingSetting?.setCurrentPage(Math.floor(
|
|
2302
|
+
pagingSetting?.setCurrentPage(Math.floor(lengthData / (pagingSetting?.pageSize ?? 0)) + 1);
|
|
2335
2303
|
}
|
|
2336
2304
|
if (tableElement) {
|
|
2337
|
-
setIndexFocus(
|
|
2338
|
-
|
|
2339
|
-
tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
|
|
2340
|
-
const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${totalCount + 1}`);
|
|
2341
|
-
if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("select-100__control--menu-is-open").length > 0 || element.getElementsByClassName("select-200__control--menu-is-open").length > 0 || element.getElementsByClassName("select-300__control--menu-is-open").length > 0 || element.getElementsByClassName("select-400__control--menu-is-open").length > 0 || element.getElementsByClassName("select-500__control--menu-is-open").length > 0)) {
|
|
2342
|
-
if (element.className.includes("react-select") || element.className.includes("form-edit")) {
|
|
2343
|
-
element.getElementsByTagName("input")[0]?.focus();
|
|
2344
|
-
} else {
|
|
2345
|
-
element.focus();
|
|
2346
|
-
}
|
|
2347
|
-
}
|
|
2348
|
-
}, 100);
|
|
2305
|
+
setIndexFocus(lengthData);
|
|
2306
|
+
focusNewElement(`${idTable}-col${columnFistEdit}-row${lengthData + 1}`, true);
|
|
2349
2307
|
}
|
|
2350
2308
|
};
|
|
2351
2309
|
const handleDuplicate = (data, index) => {
|
|
@@ -2428,6 +2386,14 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2428
2386
|
};
|
|
2429
2387
|
const changeDataSource = (data, haveNew = false) => {
|
|
2430
2388
|
if (!editDisable && !addDisable && setDataSource) {
|
|
2389
|
+
if (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm) {
|
|
2390
|
+
console.log("\xE1dads");
|
|
2391
|
+
if (searchSetting?.setSearchTerm) {
|
|
2392
|
+
searchSetting?.setSearchTerm("");
|
|
2393
|
+
} else {
|
|
2394
|
+
setSearchTerm("");
|
|
2395
|
+
}
|
|
2396
|
+
}
|
|
2431
2397
|
if (haveNew) {
|
|
2432
2398
|
data.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
|
|
2433
2399
|
setDataSource([...data]);
|
|
@@ -2937,6 +2903,11 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2937
2903
|
}
|
|
2938
2904
|
});
|
|
2939
2905
|
};
|
|
2906
|
+
(0, import_react12.useEffect)(() => {
|
|
2907
|
+
if (pagingClient && pagingSetting?.setCurrentPage && (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm)) {
|
|
2908
|
+
pagingSetting?.setCurrentPage(1);
|
|
2909
|
+
}
|
|
2910
|
+
}, [searchTerm, searchSetting?.searchTerm]);
|
|
2940
2911
|
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react12.Fragment, { children: [
|
|
2941
2912
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "react-table-edit", children: [
|
|
2942
2913
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "r-grid", ref: gridRef, children: [
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// test-app/src/component/table/index.tsx
|
|
2
|
-
import { Fragment as Fragment12, forwardRef as forwardRef2, useEffect as
|
|
2
|
+
import { Fragment as Fragment12, forwardRef as forwardRef2, useEffect as useEffect6, useImperativeHandle, useRef as useRef2, useState as useState5 } from "react";
|
|
3
3
|
import { Button as Button3, DropdownMenu as DropdownMenu2, DropdownToggle as DropdownToggle2, Input as Input6, UncontrolledDropdown } from "reactstrap";
|
|
4
4
|
import classnames6 from "classnames";
|
|
5
5
|
import { useTranslation as useTranslation8 } from "react-i18next";
|
|
@@ -11,7 +11,7 @@ import { AlertCircle, Info as Info2, Settings } from "becoxy-icons";
|
|
|
11
11
|
// test-app/src/component/react-input/index.tsx
|
|
12
12
|
import { X } from "becoxy-icons";
|
|
13
13
|
import classNames from "classnames";
|
|
14
|
-
import { Fragment, useState } from "react";
|
|
14
|
+
import { Fragment, useEffect, useState } from "react";
|
|
15
15
|
import { Input } from "reactstrap";
|
|
16
16
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
17
17
|
var ReactInput = (props) => {
|
|
@@ -21,6 +21,11 @@ var ReactInput = (props) => {
|
|
|
21
21
|
setValue("");
|
|
22
22
|
setSearchTerm("");
|
|
23
23
|
};
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
if (!props.value) {
|
|
26
|
+
setValue("");
|
|
27
|
+
}
|
|
28
|
+
}, [props.value]);
|
|
24
29
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
25
30
|
/* @__PURE__ */ jsx(
|
|
26
31
|
Input,
|
|
@@ -178,9 +183,9 @@ var messageBoxConfirm2 = async (t, data, data2, message) => {
|
|
|
178
183
|
};
|
|
179
184
|
|
|
180
185
|
// test-app/src/component/utils.ts
|
|
181
|
-
import { useEffect } from "react";
|
|
186
|
+
import { useEffect as useEffect2 } from "react";
|
|
182
187
|
var useOnClickOutside = (ref, handler) => {
|
|
183
|
-
|
|
188
|
+
useEffect2(
|
|
184
189
|
() => {
|
|
185
190
|
const listener = (event) => {
|
|
186
191
|
if (!ref.current || ref.current.contains(event.target)) {
|
|
@@ -293,7 +298,7 @@ import moment from "moment";
|
|
|
293
298
|
import { DropDownTreeComponent } from "@syncfusion/ej2-react-dropdowns";
|
|
294
299
|
|
|
295
300
|
// test-app/src/component/edit-form/index.tsx
|
|
296
|
-
import { forwardRef, useEffect as
|
|
301
|
+
import { forwardRef, useEffect as useEffect3, useRef, useState as useState2 } from "react";
|
|
297
302
|
import {
|
|
298
303
|
DropdownItem,
|
|
299
304
|
DropdownMenu,
|
|
@@ -748,14 +753,14 @@ var EditForm = forwardRef((props, ref) => {
|
|
|
748
753
|
defaultValues,
|
|
749
754
|
resolver: yupResolver(schema)
|
|
750
755
|
});
|
|
751
|
-
|
|
756
|
+
useEffect3(() => {
|
|
752
757
|
if (dropdownOpen) {
|
|
753
758
|
if (onFormOpen && itemsField.length === 0) {
|
|
754
759
|
onFormOpen(rowData, itemsField, setItemsField);
|
|
755
760
|
}
|
|
756
761
|
}
|
|
757
762
|
}, [dropdownOpen]);
|
|
758
|
-
|
|
763
|
+
useEffect3(() => {
|
|
759
764
|
if (dropdownOpen && itemsField.length > 0) {
|
|
760
765
|
itemsField.forEach((ele) => {
|
|
761
766
|
setValue(ele.name, rowData[ele.name] ?? "");
|
|
@@ -1031,7 +1036,7 @@ var EditForm = forwardRef((props, ref) => {
|
|
|
1031
1036
|
var edit_form_default = EditForm;
|
|
1032
1037
|
|
|
1033
1038
|
// test-app/src/component/sidebar-setting-column/index.tsx
|
|
1034
|
-
import { Fragment as Fragment10, useEffect as
|
|
1039
|
+
import { Fragment as Fragment10, useEffect as useEffect5, useState as useState4 } from "react";
|
|
1035
1040
|
import { Button as Button2, Input as Input5 } from "reactstrap";
|
|
1036
1041
|
import { useTranslation as useTranslation7 } from "react-i18next";
|
|
1037
1042
|
|
|
@@ -1082,7 +1087,7 @@ var modal_header_default = ModalHeader;
|
|
|
1082
1087
|
// test-app/src/component/sidebar/index.tsx
|
|
1083
1088
|
import { ChevronLeft, ChevronRight } from "becoxy-icons";
|
|
1084
1089
|
import classNames4 from "classnames";
|
|
1085
|
-
import { useEffect as
|
|
1090
|
+
import { useEffect as useEffect4, useState as useState3 } from "react";
|
|
1086
1091
|
import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
1087
1092
|
var Sidebar = (props) => {
|
|
1088
1093
|
const {
|
|
@@ -1096,7 +1101,7 @@ var Sidebar = (props) => {
|
|
|
1096
1101
|
} = props;
|
|
1097
1102
|
const [isFullScreen, setIsFullScreen] = useState3(false);
|
|
1098
1103
|
const [flag, setFlag] = useState3(open);
|
|
1099
|
-
|
|
1104
|
+
useEffect4(() => {
|
|
1100
1105
|
if (open !== flag) {
|
|
1101
1106
|
if (open) {
|
|
1102
1107
|
setFlag(open);
|
|
@@ -1191,7 +1196,7 @@ var SidebarSetColumn = (props) => {
|
|
|
1191
1196
|
const { t } = useTranslation7();
|
|
1192
1197
|
const [dataSource, setDataSource] = useState4([]);
|
|
1193
1198
|
const [indexFocus, setIndexFocus] = useState4();
|
|
1194
|
-
|
|
1199
|
+
useEffect5(() => {
|
|
1195
1200
|
if (openSidebar) {
|
|
1196
1201
|
setDataSource(column.map((e) => ({ ...e })));
|
|
1197
1202
|
}
|
|
@@ -1209,7 +1214,7 @@ var SidebarSetColumn = (props) => {
|
|
|
1209
1214
|
return { innerWidth, innerHeight };
|
|
1210
1215
|
};
|
|
1211
1216
|
const [windowSize, setWindowSize] = useState4(getWindowSize());
|
|
1212
|
-
|
|
1217
|
+
useEffect5(() => {
|
|
1213
1218
|
const handleWindowResize = () => {
|
|
1214
1219
|
setWindowSize(getWindowSize());
|
|
1215
1220
|
};
|
|
@@ -1493,12 +1498,12 @@ var TableEdit = forwardRef2((props, ref) => {
|
|
|
1493
1498
|
let totalCount = dataSource.length;
|
|
1494
1499
|
const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? "id";
|
|
1495
1500
|
const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
|
|
1496
|
-
|
|
1497
|
-
if (pagingClient && pagingSetting.setCurrentPage &&
|
|
1501
|
+
useEffect6(() => {
|
|
1502
|
+
if (pagingClient && pagingSetting.setCurrentPage && Math.ceil(totalCount / (pagingSetting?.pageSize ?? 1)) < (pagingSetting.currentPage ?? 1)) {
|
|
1498
1503
|
pagingSetting.setCurrentPage(1);
|
|
1499
1504
|
}
|
|
1500
1505
|
}, [dataSource]);
|
|
1501
|
-
|
|
1506
|
+
useEffect6(() => {
|
|
1502
1507
|
let indexFirst = -1;
|
|
1503
1508
|
let indexlast = -1;
|
|
1504
1509
|
let letfWidthFix = 0;
|
|
@@ -1531,7 +1536,7 @@ var TableEdit = forwardRef2((props, ref) => {
|
|
|
1531
1536
|
setColumnFistEdit(indexFirst + 1);
|
|
1532
1537
|
setColumnlastEdit(indexlast + 1);
|
|
1533
1538
|
}, [contentColumns]);
|
|
1534
|
-
|
|
1539
|
+
useEffect6(() => {
|
|
1535
1540
|
const arrHeaderColumns = [];
|
|
1536
1541
|
const arrContentColumns = [];
|
|
1537
1542
|
let headerLevelRow = 0;
|
|
@@ -1548,7 +1553,7 @@ var TableEdit = forwardRef2((props, ref) => {
|
|
|
1548
1553
|
setHeaderColumns(arrHeaderColumns);
|
|
1549
1554
|
setContentColumns(arrContentColumns);
|
|
1550
1555
|
}, [columns]);
|
|
1551
|
-
|
|
1556
|
+
useEffect6(() => {
|
|
1552
1557
|
const arrHeaderColumns = [];
|
|
1553
1558
|
const arrContentColumns = [];
|
|
1554
1559
|
let headerLevelRow = 0;
|
|
@@ -2122,6 +2127,18 @@ var TableEdit = forwardRef2((props, ref) => {
|
|
|
2122
2127
|
}, 100);
|
|
2123
2128
|
}
|
|
2124
2129
|
};
|
|
2130
|
+
const focusNewElement = (idElement, onLoad = false) => {
|
|
2131
|
+
setTimeout(() => {
|
|
2132
|
+
const element = document.getElementById(idElement);
|
|
2133
|
+
if (element) {
|
|
2134
|
+
if (element.className.includes("react-select") || element.className.includes("form-edit")) {
|
|
2135
|
+
element.getElementsByTagName("input")[0]?.focus();
|
|
2136
|
+
} else {
|
|
2137
|
+
element.focus();
|
|
2138
|
+
}
|
|
2139
|
+
}
|
|
2140
|
+
}, onLoad ? 100 : 0);
|
|
2141
|
+
};
|
|
2125
2142
|
const checkKeyDown = (e, row, col, indexRow, indexCol) => {
|
|
2126
2143
|
if (e.code === "ArrowRight") {
|
|
2127
2144
|
let newIndexCol = -1;
|
|
@@ -2132,14 +2149,7 @@ var TableEdit = forwardRef2((props, ref) => {
|
|
|
2132
2149
|
}
|
|
2133
2150
|
}
|
|
2134
2151
|
if (newIndexCol > -1) {
|
|
2135
|
-
|
|
2136
|
-
if (element) {
|
|
2137
|
-
if (element.className.includes("react-select") || element.className.includes("form-edit")) {
|
|
2138
|
-
element.getElementsByTagName("input")[0]?.focus();
|
|
2139
|
-
} else {
|
|
2140
|
-
element.focus();
|
|
2141
|
-
}
|
|
2142
|
-
}
|
|
2152
|
+
focusNewElement(`${idTable}-col${newIndexCol}-row${indexRow}`);
|
|
2143
2153
|
e.preventDefault();
|
|
2144
2154
|
return e.code;
|
|
2145
2155
|
}
|
|
@@ -2152,14 +2162,7 @@ var TableEdit = forwardRef2((props, ref) => {
|
|
|
2152
2162
|
}
|
|
2153
2163
|
}
|
|
2154
2164
|
if (newIndexCol > -1) {
|
|
2155
|
-
|
|
2156
|
-
if (element) {
|
|
2157
|
-
if (element.className.includes("react-select") || element.className.includes("form-edit")) {
|
|
2158
|
-
element.getElementsByTagName("input")[0]?.focus();
|
|
2159
|
-
} else {
|
|
2160
|
-
element.focus();
|
|
2161
|
-
}
|
|
2162
|
-
}
|
|
2165
|
+
focusNewElement(`${idTable}-col${newIndexCol}-row${indexRow}`);
|
|
2163
2166
|
e.preventDefault();
|
|
2164
2167
|
return e.code;
|
|
2165
2168
|
}
|
|
@@ -2171,16 +2174,7 @@ var TableEdit = forwardRef2((props, ref) => {
|
|
|
2171
2174
|
pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) - 1);
|
|
2172
2175
|
}
|
|
2173
2176
|
setIndexFocus(indexRow - 2);
|
|
2174
|
-
|
|
2175
|
-
const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow - 1}`);
|
|
2176
|
-
if (element2) {
|
|
2177
|
-
if (element2.className.includes("react-select") || element2.className.includes("form-edit")) {
|
|
2178
|
-
element2.getElementsByTagName("input")[0]?.focus();
|
|
2179
|
-
} else {
|
|
2180
|
-
element2.focus();
|
|
2181
|
-
}
|
|
2182
|
-
}
|
|
2183
|
-
}, 100);
|
|
2177
|
+
focusNewElement(`${idTable}-col${indexCol}-row${indexRow - 1}`, true);
|
|
2184
2178
|
e.preventDefault();
|
|
2185
2179
|
return e.code;
|
|
2186
2180
|
}
|
|
@@ -2193,16 +2187,7 @@ var TableEdit = forwardRef2((props, ref) => {
|
|
|
2193
2187
|
pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
|
|
2194
2188
|
}
|
|
2195
2189
|
setIndexFocus(indexRow);
|
|
2196
|
-
|
|
2197
|
-
const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
|
|
2198
|
-
if (element2) {
|
|
2199
|
-
if (element2.className.includes("react-select") || element2.className.includes("form-edit")) {
|
|
2200
|
-
element2.getElementsByTagName("input")[0]?.focus();
|
|
2201
|
-
} else {
|
|
2202
|
-
element2.focus();
|
|
2203
|
-
}
|
|
2204
|
-
}
|
|
2205
|
-
}, 100);
|
|
2190
|
+
focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
|
|
2206
2191
|
e.preventDefault();
|
|
2207
2192
|
return e.code;
|
|
2208
2193
|
}
|
|
@@ -2215,16 +2200,7 @@ var TableEdit = forwardRef2((props, ref) => {
|
|
|
2215
2200
|
pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
|
|
2216
2201
|
}
|
|
2217
2202
|
setIndexFocus(indexRow);
|
|
2218
|
-
|
|
2219
|
-
const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
|
|
2220
|
-
if (element) {
|
|
2221
|
-
if (element.className.includes("react-select") || element.className.includes("form-edit")) {
|
|
2222
|
-
element.getElementsByTagName("input")[0]?.focus();
|
|
2223
|
-
} else {
|
|
2224
|
-
element.focus();
|
|
2225
|
-
}
|
|
2226
|
-
}
|
|
2227
|
-
}, 100);
|
|
2203
|
+
focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
|
|
2228
2204
|
}
|
|
2229
2205
|
e.preventDefault();
|
|
2230
2206
|
return e.code;
|
|
@@ -2238,16 +2214,7 @@ var TableEdit = forwardRef2((props, ref) => {
|
|
|
2238
2214
|
pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
|
|
2239
2215
|
}
|
|
2240
2216
|
setIndexFocus(indexRow);
|
|
2241
|
-
|
|
2242
|
-
const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
|
|
2243
|
-
if (element2) {
|
|
2244
|
-
if (element2.className.includes("react-select") || element2.className.includes("form-edit")) {
|
|
2245
|
-
element2.getElementsByTagName("input")[0]?.focus();
|
|
2246
|
-
} else {
|
|
2247
|
-
element2.focus();
|
|
2248
|
-
}
|
|
2249
|
-
}
|
|
2250
|
-
}, 100);
|
|
2217
|
+
focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
|
|
2251
2218
|
}
|
|
2252
2219
|
e.preventDefault();
|
|
2253
2220
|
return e.code;
|
|
@@ -2288,22 +2255,13 @@ var TableEdit = forwardRef2((props, ref) => {
|
|
|
2288
2255
|
});
|
|
2289
2256
|
const handleAdd = () => {
|
|
2290
2257
|
changeDataSource(dataSource, true);
|
|
2258
|
+
const lengthData = dataSource.length - 1;
|
|
2291
2259
|
if (pagingSetting?.setCurrentPage) {
|
|
2292
|
-
pagingSetting?.setCurrentPage(Math.floor(
|
|
2260
|
+
pagingSetting?.setCurrentPage(Math.floor(lengthData / (pagingSetting?.pageSize ?? 0)) + 1);
|
|
2293
2261
|
}
|
|
2294
2262
|
if (tableElement) {
|
|
2295
|
-
setIndexFocus(
|
|
2296
|
-
|
|
2297
|
-
tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
|
|
2298
|
-
const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${totalCount + 1}`);
|
|
2299
|
-
if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("select-100__control--menu-is-open").length > 0 || element.getElementsByClassName("select-200__control--menu-is-open").length > 0 || element.getElementsByClassName("select-300__control--menu-is-open").length > 0 || element.getElementsByClassName("select-400__control--menu-is-open").length > 0 || element.getElementsByClassName("select-500__control--menu-is-open").length > 0)) {
|
|
2300
|
-
if (element.className.includes("react-select") || element.className.includes("form-edit")) {
|
|
2301
|
-
element.getElementsByTagName("input")[0]?.focus();
|
|
2302
|
-
} else {
|
|
2303
|
-
element.focus();
|
|
2304
|
-
}
|
|
2305
|
-
}
|
|
2306
|
-
}, 100);
|
|
2263
|
+
setIndexFocus(lengthData);
|
|
2264
|
+
focusNewElement(`${idTable}-col${columnFistEdit}-row${lengthData + 1}`, true);
|
|
2307
2265
|
}
|
|
2308
2266
|
};
|
|
2309
2267
|
const handleDuplicate = (data, index) => {
|
|
@@ -2386,6 +2344,14 @@ var TableEdit = forwardRef2((props, ref) => {
|
|
|
2386
2344
|
};
|
|
2387
2345
|
const changeDataSource = (data, haveNew = false) => {
|
|
2388
2346
|
if (!editDisable && !addDisable && setDataSource) {
|
|
2347
|
+
if (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm) {
|
|
2348
|
+
console.log("\xE1dads");
|
|
2349
|
+
if (searchSetting?.setSearchTerm) {
|
|
2350
|
+
searchSetting?.setSearchTerm("");
|
|
2351
|
+
} else {
|
|
2352
|
+
setSearchTerm("");
|
|
2353
|
+
}
|
|
2354
|
+
}
|
|
2389
2355
|
if (haveNew) {
|
|
2390
2356
|
data.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
|
|
2391
2357
|
setDataSource([...data]);
|
|
@@ -2394,7 +2360,7 @@ var TableEdit = forwardRef2((props, ref) => {
|
|
|
2394
2360
|
}
|
|
2395
2361
|
}
|
|
2396
2362
|
};
|
|
2397
|
-
|
|
2363
|
+
useEffect6(() => {
|
|
2398
2364
|
setIndexFocus(-1);
|
|
2399
2365
|
if (setSelectedItem) {
|
|
2400
2366
|
if (isMulti) {
|
|
@@ -2421,7 +2387,7 @@ var TableEdit = forwardRef2((props, ref) => {
|
|
|
2421
2387
|
}
|
|
2422
2388
|
}
|
|
2423
2389
|
}, [selectedRows]);
|
|
2424
|
-
|
|
2390
|
+
useEffect6(() => {
|
|
2425
2391
|
if (!isMulti) {
|
|
2426
2392
|
if (dataSource && selectedItem && selectedItem[fieldKey]) {
|
|
2427
2393
|
if (selectedRows?.length === 0 || selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
|
|
@@ -2895,6 +2861,11 @@ var TableEdit = forwardRef2((props, ref) => {
|
|
|
2895
2861
|
}
|
|
2896
2862
|
});
|
|
2897
2863
|
};
|
|
2864
|
+
useEffect6(() => {
|
|
2865
|
+
if (pagingClient && pagingSetting?.setCurrentPage && (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm)) {
|
|
2866
|
+
pagingSetting?.setCurrentPage(1);
|
|
2867
|
+
}
|
|
2868
|
+
}, [searchTerm, searchSetting?.searchTerm]);
|
|
2898
2869
|
return /* @__PURE__ */ jsxs11(Fragment12, { children: [
|
|
2899
2870
|
/* @__PURE__ */ jsxs11("div", { className: "react-table-edit", children: [
|
|
2900
2871
|
/* @__PURE__ */ jsxs11("div", { className: "r-grid", ref: gridRef, children: [
|
|
@@ -2944,7 +2915,7 @@ var table_default = TableEdit;
|
|
|
2944
2915
|
// test-app/src/component/tab-menu/index.tsx
|
|
2945
2916
|
import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "becoxy-icons";
|
|
2946
2917
|
import classNames5 from "classnames";
|
|
2947
|
-
import { Fragment as Fragment14, useEffect as
|
|
2918
|
+
import { Fragment as Fragment14, useEffect as useEffect7, useState as useState6 } from "react";
|
|
2948
2919
|
import { Link } from "react-router-dom";
|
|
2949
2920
|
import { DropdownItem as DropdownItem2, DropdownMenu as DropdownMenu3, DropdownToggle as DropdownToggle3, UncontrolledDropdown as UncontrolledDropdown2 } from "reactstrap";
|
|
2950
2921
|
import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
@@ -2970,7 +2941,7 @@ var TabsMenuComponent = ({
|
|
|
2970
2941
|
setContentWidth(tabContent?.offsetWidth ?? 0);
|
|
2971
2942
|
}
|
|
2972
2943
|
};
|
|
2973
|
-
|
|
2944
|
+
useEffect7(() => {
|
|
2974
2945
|
setUrl(window.location.pathname);
|
|
2975
2946
|
window.addEventListener("resize", handleWindowResize);
|
|
2976
2947
|
setTimeout(() => {
|
|
@@ -2985,7 +2956,7 @@ var TabsMenuComponent = ({
|
|
|
2985
2956
|
window.removeEventListener("resize", handleWindowResize);
|
|
2986
2957
|
};
|
|
2987
2958
|
}, []);
|
|
2988
|
-
|
|
2959
|
+
useEffect7(() => {
|
|
2989
2960
|
const item = resources?.find((x) => x.code === (resourceCodeParent ? resourceCodeParent : resourceCode));
|
|
2990
2961
|
if (item) {
|
|
2991
2962
|
if (resourceCodeParent) {
|