react-table-edit 0.9.0 → 0.9.1

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 +1 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.js +13 -12
  4. package/dist/index.mjs +13 -12
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -27,6 +27,7 @@ type Props = {
27
27
  invalid?: any;
28
28
  loadOptions?: any;
29
29
  menuWidth?: number;
30
+ width?: number;
30
31
  rowData?: any;
31
32
  value: any;
32
33
  onKeyDown?: any;
package/dist/index.d.ts CHANGED
@@ -27,6 +27,7 @@ type Props = {
27
27
  invalid?: any;
28
28
  loadOptions?: any;
29
29
  menuWidth?: number;
30
+ width?: number;
30
31
  rowData?: any;
31
32
  value: any;
32
33
  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,
@@ -648,15 +649,10 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
648
649
  };
649
650
  (0, import_react6.useEffect)(() => {
650
651
  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);
652
+ const index = (optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"]);
653
+ if (index >= 0) {
654
+ selectMenuTableRef.current.scrollTo({ top: (index - 1) * 30 });
655
+ }
660
656
  }
661
657
  }, [dropdownOpen]);
662
658
  (0, import_react6.useEffect)(() => {
@@ -1047,6 +1043,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
1047
1043
  e.preventDefault();
1048
1044
  },
1049
1045
  tag: "div",
1046
+ style: { width: width ? width : "100%" },
1050
1047
  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
1048
  children: [
1052
1049
  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "select-table-container", children: [
@@ -2078,6 +2075,8 @@ var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOpt
2078
2075
  onChange: (val) => {
2079
2076
  onChangePageSize({ totalItem, pageSize: val?.value });
2080
2077
  },
2078
+ menuWidth: 90,
2079
+ width: 90,
2081
2080
  placeholder: t("Select")
2082
2081
  }
2083
2082
  ) }),
@@ -2371,6 +2370,9 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
2371
2370
  ele.index = arrContentColumns.length;
2372
2371
  if (maxLevelRow === 1) {
2373
2372
  ele.visible = item.invisibleDisable ? item.visible : contentColumns[arrContentColumns.length]?.visible ?? item.visible;
2373
+ ele.width = contentColumns[arrContentColumns.length]?.width ?? item.width;
2374
+ ele.maxWidth = contentColumns[arrContentColumns.length]?.maxWidth ?? item.maxWidth;
2375
+ ele.minWidth = contentColumns[arrContentColumns.length]?.minWidth ?? item.minWidth;
2374
2376
  }
2375
2377
  arrHeaderColumns[level].push(ele);
2376
2378
  arrContentColumns.push(ele);
@@ -2491,7 +2493,7 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
2491
2493
  }
2492
2494
  handleDataChange(row, col, indexRow);
2493
2495
  },
2494
- className: (0, import_classnames13.default)("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
2496
+ className: (0, import_classnames13.default)("border-0 rounded-0 r-date-input", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
2495
2497
  type: "date",
2496
2498
  max: "9999-12-31",
2497
2499
  onKeyDown: (e) => {
@@ -2520,7 +2522,7 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
2520
2522
  }
2521
2523
  handleDataChange(row, col, indexRow);
2522
2524
  },
2523
- className: (0, import_classnames13.default)("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
2525
+ className: (0, import_classnames13.default)("border-0 rounded-0 r-date-input", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
2524
2526
  type: "datetime-local",
2525
2527
  max: "9999-12-31T23:59",
2526
2528
  onKeyDown: (e) => {
@@ -2991,7 +2993,6 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
2991
2993
  }
2992
2994
  };
2993
2995
  const onChangePageSize = (args) => {
2994
- console.log(args.pageSize);
2995
2996
  if (pagingSetting?.allowPaging) {
2996
2997
  if (pagingSetting?.pageSize !== args.pageSize) {
2997
2998
  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,
@@ -612,15 +613,10 @@ var SelectTable = forwardRef((props, ref) => {
612
613
  };
613
614
  useEffect3(() => {
614
615
  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);
616
+ const index = (optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"]);
617
+ if (index >= 0) {
618
+ selectMenuTableRef.current.scrollTo({ top: (index - 1) * 30 });
619
+ }
624
620
  }
625
621
  }, [dropdownOpen]);
626
622
  useEffect3(() => {
@@ -1011,6 +1007,7 @@ var SelectTable = forwardRef((props, ref) => {
1011
1007
  e.preventDefault();
1012
1008
  },
1013
1009
  tag: "div",
1010
+ style: { width: width ? width : "100%" },
1014
1011
  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
1012
  children: [
1016
1013
  /* @__PURE__ */ jsxs5("div", { className: "select-table-container", children: [
@@ -2042,6 +2039,8 @@ var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOpt
2042
2039
  onChange: (val) => {
2043
2040
  onChangePageSize({ totalItem, pageSize: val?.value });
2044
2041
  },
2042
+ menuWidth: 90,
2043
+ width: 90,
2045
2044
  placeholder: t("Select")
2046
2045
  }
2047
2046
  ) }),
@@ -2335,6 +2334,9 @@ var TableEdit = forwardRef3((props, ref) => {
2335
2334
  ele.index = arrContentColumns.length;
2336
2335
  if (maxLevelRow === 1) {
2337
2336
  ele.visible = item.invisibleDisable ? item.visible : contentColumns[arrContentColumns.length]?.visible ?? item.visible;
2337
+ ele.width = contentColumns[arrContentColumns.length]?.width ?? item.width;
2338
+ ele.maxWidth = contentColumns[arrContentColumns.length]?.maxWidth ?? item.maxWidth;
2339
+ ele.minWidth = contentColumns[arrContentColumns.length]?.minWidth ?? item.minWidth;
2338
2340
  }
2339
2341
  arrHeaderColumns[level].push(ele);
2340
2342
  arrContentColumns.push(ele);
@@ -2455,7 +2457,7 @@ var TableEdit = forwardRef3((props, ref) => {
2455
2457
  }
2456
2458
  handleDataChange(row, col, indexRow);
2457
2459
  },
2458
- className: classnames8("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
2460
+ className: classnames8("border-0 rounded-0 r-date-input", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
2459
2461
  type: "date",
2460
2462
  max: "9999-12-31",
2461
2463
  onKeyDown: (e) => {
@@ -2484,7 +2486,7 @@ var TableEdit = forwardRef3((props, ref) => {
2484
2486
  }
2485
2487
  handleDataChange(row, col, indexRow);
2486
2488
  },
2487
- className: classnames8("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
2489
+ className: classnames8("border-0 rounded-0 r-date-input", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
2488
2490
  type: "datetime-local",
2489
2491
  max: "9999-12-31T23:59",
2490
2492
  onKeyDown: (e) => {
@@ -2955,7 +2957,6 @@ var TableEdit = forwardRef3((props, ref) => {
2955
2957
  }
2956
2958
  };
2957
2959
  const onChangePageSize = (args) => {
2958
- console.log(args.pageSize);
2959
2960
  if (pagingSetting?.allowPaging) {
2960
2961
  if (pagingSetting?.pageSize !== args.pageSize) {
2961
2962
  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.1",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",