react-table-edit 0.9.0 → 0.9.2

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 +2 -0
  2. package/dist/index.d.ts +2 -0
  3. package/dist/index.js +22 -17
  4. package/dist/index.mjs +22 -17
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -19,6 +19,7 @@ type IFColumnSelectTable = {
19
19
  type Props = {
20
20
  id?: string;
21
21
  component?: any;
22
+ footerComponent?: any;
22
23
  fieldValue?: string;
23
24
  fieldLabel?: string;
24
25
  onChange: any;
@@ -27,6 +28,7 @@ type Props = {
27
28
  invalid?: any;
28
29
  loadOptions?: any;
29
30
  menuWidth?: number;
31
+ width?: number;
30
32
  rowData?: any;
31
33
  value: any;
32
34
  onKeyDown?: any;
package/dist/index.d.ts CHANGED
@@ -19,6 +19,7 @@ type IFColumnSelectTable = {
19
19
  type Props = {
20
20
  id?: string;
21
21
  component?: any;
22
+ footerComponent?: any;
22
23
  fieldValue?: string;
23
24
  fieldLabel?: string;
24
25
  onChange: any;
@@ -27,6 +28,7 @@ type Props = {
27
28
  invalid?: any;
28
29
  loadOptions?: any;
29
30
  menuWidth?: number;
31
+ width?: number;
30
32
  rowData?: any;
31
33
  value: any;
32
34
  onKeyDown?: any;
package/dist/index.js CHANGED
@@ -584,6 +584,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
584
584
  const {
585
585
  id,
586
586
  menuWidth,
587
+ width,
587
588
  invalid,
588
589
  onKeyDown,
589
590
  placeholder,
@@ -606,6 +607,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
606
607
  noHeader,
607
608
  isDisabled,
608
609
  showFooter,
610
+ footerComponent,
609
611
  onPaste
610
612
  } = props;
611
613
  const selectTableRef = (0, import_react6.useRef)();
@@ -648,15 +650,10 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
648
650
  };
649
651
  (0, import_react6.useEffect)(() => {
650
652
  if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
651
- setTimeout(() => {
652
- const elementFocus = document.getElementById(`row-select-table-${(optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"])}`);
653
- if (elementFocus) {
654
- const parentRect = selectMenuTableRef.current.getBoundingClientRect();
655
- const childRect = elementFocus.getBoundingClientRect();
656
- const offset = childRect.top - parentRect.top + selectMenuTableRef.current.scrollTop - parentRect.height / 2 + childRect.height / 2;
657
- selectMenuTableRef.current.scrollTo({ top: offset });
658
- }
659
- }, 100);
653
+ const index = (optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"]);
654
+ if (index >= 0) {
655
+ selectMenuTableRef.current.scrollTo({ top: (index - 1) * 30 });
656
+ }
660
657
  }
661
658
  }, [dropdownOpen]);
662
659
  (0, import_react6.useEffect)(() => {
@@ -1047,6 +1044,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
1047
1044
  e.preventDefault();
1048
1045
  },
1049
1046
  tag: "div",
1047
+ style: { width: width ? width : "100%" },
1050
1048
  className: (0, import_classnames4.default)("select-table-control", { "r-select-is-disabled": isDisabled }, { "r-select-is-open": dropdownOpen }, { "r-select-is-focus": isFocus }, { "r-select-is-invalid": invalid }),
1051
1049
  children: [
1052
1050
  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "select-table-container", children: [
@@ -1125,11 +1123,14 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
1125
1123
  },
1126
1124
  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "r-select-grid", children: [
1127
1125
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "r-select-gridtable", ref: selectMenuTableRef, style: { minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderTable, {}) }),
1128
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_classnames4.default)("r-select-footer", { "d-none": !(showFooter === true || handleAdd) }), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_reactstrap4.Button, { outline: true, color: "primary", onClick: handleAdd, className: (0, import_classnames4.default)("r-btn-add d-flex align-items-center", { "d-none": !handleAdd }), children: [
1129
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_becoxy_icons2.Plus, { className: "me-50", fontSize: 16 }),
1130
- t("AddNew"),
1131
- " (F9)"
1132
- ] }) })
1126
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_classnames4.default)("r-select-footer", { "d-none": !(showFooter === true || handleAdd) }), children: [
1127
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_reactstrap4.Button, { outline: true, color: "primary", onClick: handleAdd, className: (0, import_classnames4.default)("r-btn d-flex align-items-center", { "d-none": !handleAdd }), children: [
1128
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_becoxy_icons2.Plus, { className: "me-50", fontSize: 16 }),
1129
+ t("AddNew"),
1130
+ " (F9)"
1131
+ ] }),
1132
+ footerComponent ? footerComponent() : null
1133
+ ] })
1133
1134
  ] })
1134
1135
  }
1135
1136
  ) })
@@ -2078,6 +2079,8 @@ var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOpt
2078
2079
  onChange: (val) => {
2079
2080
  onChangePageSize({ totalItem, pageSize: val?.value });
2080
2081
  },
2082
+ menuWidth: 90,
2083
+ width: 90,
2081
2084
  placeholder: t("Select")
2082
2085
  }
2083
2086
  ) }),
@@ -2371,6 +2374,9 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
2371
2374
  ele.index = arrContentColumns.length;
2372
2375
  if (maxLevelRow === 1) {
2373
2376
  ele.visible = item.invisibleDisable ? item.visible : contentColumns[arrContentColumns.length]?.visible ?? item.visible;
2377
+ ele.width = contentColumns[arrContentColumns.length]?.width ?? item.width;
2378
+ ele.maxWidth = contentColumns[arrContentColumns.length]?.maxWidth ?? item.maxWidth;
2379
+ ele.minWidth = contentColumns[arrContentColumns.length]?.minWidth ?? item.minWidth;
2374
2380
  }
2375
2381
  arrHeaderColumns[level].push(ele);
2376
2382
  arrContentColumns.push(ele);
@@ -2491,7 +2497,7 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
2491
2497
  }
2492
2498
  handleDataChange(row, col, indexRow);
2493
2499
  },
2494
- className: (0, import_classnames13.default)("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
2500
+ className: (0, import_classnames13.default)("border-0 rounded-0 r-date-input", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
2495
2501
  type: "date",
2496
2502
  max: "9999-12-31",
2497
2503
  onKeyDown: (e) => {
@@ -2520,7 +2526,7 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
2520
2526
  }
2521
2527
  handleDataChange(row, col, indexRow);
2522
2528
  },
2523
- className: (0, import_classnames13.default)("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
2529
+ className: (0, import_classnames13.default)("border-0 rounded-0 r-date-input", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
2524
2530
  type: "datetime-local",
2525
2531
  max: "9999-12-31T23:59",
2526
2532
  onKeyDown: (e) => {
@@ -2991,7 +2997,6 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
2991
2997
  }
2992
2998
  };
2993
2999
  const onChangePageSize = (args) => {
2994
- console.log(args.pageSize);
2995
3000
  if (pagingSetting?.allowPaging) {
2996
3001
  if (pagingSetting?.pageSize !== args.pageSize) {
2997
3002
  if (pagingSetting?.setPageSize) {
package/dist/index.mjs CHANGED
@@ -548,6 +548,7 @@ var SelectTable = forwardRef((props, ref) => {
548
548
  const {
549
549
  id,
550
550
  menuWidth,
551
+ width,
551
552
  invalid,
552
553
  onKeyDown,
553
554
  placeholder,
@@ -570,6 +571,7 @@ var SelectTable = forwardRef((props, ref) => {
570
571
  noHeader,
571
572
  isDisabled,
572
573
  showFooter,
574
+ footerComponent,
573
575
  onPaste
574
576
  } = props;
575
577
  const selectTableRef = useRef();
@@ -612,15 +614,10 @@ var SelectTable = forwardRef((props, ref) => {
612
614
  };
613
615
  useEffect3(() => {
614
616
  if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
615
- setTimeout(() => {
616
- const elementFocus = document.getElementById(`row-select-table-${(optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"])}`);
617
- if (elementFocus) {
618
- const parentRect = selectMenuTableRef.current.getBoundingClientRect();
619
- const childRect = elementFocus.getBoundingClientRect();
620
- const offset = childRect.top - parentRect.top + selectMenuTableRef.current.scrollTop - parentRect.height / 2 + childRect.height / 2;
621
- selectMenuTableRef.current.scrollTo({ top: offset });
622
- }
623
- }, 100);
617
+ const index = (optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"]);
618
+ if (index >= 0) {
619
+ selectMenuTableRef.current.scrollTo({ top: (index - 1) * 30 });
620
+ }
624
621
  }
625
622
  }, [dropdownOpen]);
626
623
  useEffect3(() => {
@@ -1011,6 +1008,7 @@ var SelectTable = forwardRef((props, ref) => {
1011
1008
  e.preventDefault();
1012
1009
  },
1013
1010
  tag: "div",
1011
+ style: { width: width ? width : "100%" },
1014
1012
  className: classnames3("select-table-control", { "r-select-is-disabled": isDisabled }, { "r-select-is-open": dropdownOpen }, { "r-select-is-focus": isFocus }, { "r-select-is-invalid": invalid }),
1015
1013
  children: [
1016
1014
  /* @__PURE__ */ jsxs5("div", { className: "select-table-container", children: [
@@ -1089,11 +1087,14 @@ var SelectTable = forwardRef((props, ref) => {
1089
1087
  },
1090
1088
  children: /* @__PURE__ */ jsxs5("div", { className: "r-select-grid", children: [
1091
1089
  /* @__PURE__ */ jsx5("div", { className: "r-select-gridtable", ref: selectMenuTableRef, style: { minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight }, children: /* @__PURE__ */ jsx5(RenderTable, {}) }),
1092
- /* @__PURE__ */ jsx5("div", { className: classnames3("r-select-footer", { "d-none": !(showFooter === true || handleAdd) }), children: /* @__PURE__ */ jsxs5(Button, { outline: true, color: "primary", onClick: handleAdd, className: classnames3("r-btn-add d-flex align-items-center", { "d-none": !handleAdd }), children: [
1093
- /* @__PURE__ */ jsx5(Plus, { className: "me-50", fontSize: 16 }),
1094
- t("AddNew"),
1095
- " (F9)"
1096
- ] }) })
1090
+ /* @__PURE__ */ jsxs5("div", { className: classnames3("r-select-footer", { "d-none": !(showFooter === true || handleAdd) }), children: [
1091
+ /* @__PURE__ */ jsxs5(Button, { outline: true, color: "primary", onClick: handleAdd, className: classnames3("r-btn d-flex align-items-center", { "d-none": !handleAdd }), children: [
1092
+ /* @__PURE__ */ jsx5(Plus, { className: "me-50", fontSize: 16 }),
1093
+ t("AddNew"),
1094
+ " (F9)"
1095
+ ] }),
1096
+ footerComponent ? footerComponent() : null
1097
+ ] })
1097
1098
  ] })
1098
1099
  }
1099
1100
  ) })
@@ -2042,6 +2043,8 @@ var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOpt
2042
2043
  onChange: (val) => {
2043
2044
  onChangePageSize({ totalItem, pageSize: val?.value });
2044
2045
  },
2046
+ menuWidth: 90,
2047
+ width: 90,
2045
2048
  placeholder: t("Select")
2046
2049
  }
2047
2050
  ) }),
@@ -2335,6 +2338,9 @@ var TableEdit = forwardRef3((props, ref) => {
2335
2338
  ele.index = arrContentColumns.length;
2336
2339
  if (maxLevelRow === 1) {
2337
2340
  ele.visible = item.invisibleDisable ? item.visible : contentColumns[arrContentColumns.length]?.visible ?? item.visible;
2341
+ ele.width = contentColumns[arrContentColumns.length]?.width ?? item.width;
2342
+ ele.maxWidth = contentColumns[arrContentColumns.length]?.maxWidth ?? item.maxWidth;
2343
+ ele.minWidth = contentColumns[arrContentColumns.length]?.minWidth ?? item.minWidth;
2338
2344
  }
2339
2345
  arrHeaderColumns[level].push(ele);
2340
2346
  arrContentColumns.push(ele);
@@ -2455,7 +2461,7 @@ var TableEdit = forwardRef3((props, ref) => {
2455
2461
  }
2456
2462
  handleDataChange(row, col, indexRow);
2457
2463
  },
2458
- className: classnames8("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
2464
+ className: classnames8("border-0 rounded-0 r-date-input", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
2459
2465
  type: "date",
2460
2466
  max: "9999-12-31",
2461
2467
  onKeyDown: (e) => {
@@ -2484,7 +2490,7 @@ var TableEdit = forwardRef3((props, ref) => {
2484
2490
  }
2485
2491
  handleDataChange(row, col, indexRow);
2486
2492
  },
2487
- className: classnames8("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
2493
+ className: classnames8("border-0 rounded-0 r-date-input", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
2488
2494
  type: "datetime-local",
2489
2495
  max: "9999-12-31T23:59",
2490
2496
  onKeyDown: (e) => {
@@ -2955,7 +2961,6 @@ var TableEdit = forwardRef3((props, ref) => {
2955
2961
  }
2956
2962
  };
2957
2963
  const onChangePageSize = (args) => {
2958
- console.log(args.pageSize);
2959
2964
  if (pagingSetting?.allowPaging) {
2960
2965
  if (pagingSetting?.pageSize !== args.pageSize) {
2961
2966
  if (pagingSetting?.setPageSize) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-table-edit",
3
3
  "license": "MIT",
4
- "version": "0.9.0",
4
+ "version": "0.9.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",