react-table-edit 0.0.2 → 0.0.4

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 CHANGED
@@ -1154,7 +1154,7 @@ var Sidebar = (props) => {
1154
1154
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
1155
1155
  "div",
1156
1156
  {
1157
- className: (0, import_classnames8.default)("sidebar-customizer d-none d-md-block ", `sidebar-customizer-${width ?? 600}`, {
1157
+ className: (0, import_classnames8.default)("customizer d-none d-md-block ", `customizer-${width ?? 600}`, {
1158
1158
  open: flag,
1159
1159
  fullscreen: isFullScreen
1160
1160
  }),
@@ -1605,7 +1605,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
1605
1605
  },
1606
1606
  menuPortalTarget: document.body,
1607
1607
  isClearable: col.selectSettings?.isClearable ?? false,
1608
- classNamePrefix: col.selectSettings?.widthPopup ? `width-popup-${col.selectSettings?.widthPopup}` : "select",
1608
+ classNamePrefix: col.selectSettings?.widthPopup ? `select-${col.selectSettings?.widthPopup}` : "select",
1609
1609
  placeholder: t("Select"),
1610
1610
  id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
1611
1611
  loadOptions: col.selectSettings?.loadOptions,
@@ -1659,7 +1659,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
1659
1659
  menuPortalTarget: document.body,
1660
1660
  isMulti: col.selectSettings?.isMulti ?? false,
1661
1661
  isClearable: col.selectSettings?.isClearable ?? false,
1662
- classNamePrefix: col.selectSettings?.widthPopup ? `width-popup-${col.selectSettings?.widthPopup}` : "select",
1662
+ classNamePrefix: col.selectSettings?.widthPopup ? `select-${col.selectSettings?.widthPopup}` : "select",
1663
1663
  placeholder: t("Select"),
1664
1664
  className: (0, import_classnames9.default)("react-select", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
1665
1665
  onKeyDown: (e) => {
@@ -1971,7 +1971,6 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
1971
1971
  } else {
1972
1972
  element.focus();
1973
1973
  }
1974
- element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
1975
1974
  }
1976
1975
  e.preventDefault();
1977
1976
  return e.code;
@@ -1993,7 +1992,6 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
1993
1992
  } else {
1994
1993
  element.focus();
1995
1994
  }
1996
- element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
1997
1995
  }
1998
1996
  e.preventDefault();
1999
1997
  return e.code;
@@ -2001,7 +1999,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2001
1999
  }
2002
2000
  if (e.code === "ArrowUp") {
2003
2001
  const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
2004
- if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--100__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--200__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--300__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--400__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--500__control--menu-is-open").length > 0)) {
2002
+ 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)) {
2005
2003
  if (indexRow > 1) {
2006
2004
  setIndexFocus(indexRow - 2);
2007
2005
  setTimeout(() => {
@@ -2021,7 +2019,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2021
2019
  }
2022
2020
  if (e.code === "ArrowDown") {
2023
2021
  const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
2024
- if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--100__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--200__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--300__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--400__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--500__control--menu-is-open").length > 0)) {
2022
+ 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)) {
2025
2023
  if (indexRow < dataSource?.length) {
2026
2024
  setIndexFocus(indexRow);
2027
2025
  setTimeout(() => {
@@ -2069,7 +2067,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2069
2067
  }
2070
2068
  if ((e.code === "Enter" || e.code === "NumpadEnter") && (!editDisable && !addDisable)) {
2071
2069
  const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
2072
- if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--100__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--200__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--300__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--400__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--500__control--menu-is-open").length > 0)) {
2070
+ 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)) {
2073
2071
  if (indexRow < dataSource?.length) {
2074
2072
  setIndexFocus(indexRow);
2075
2073
  setTimeout(() => {
@@ -2126,7 +2124,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2126
2124
  setTimeout(() => {
2127
2125
  tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
2128
2126
  const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${dataSource?.length + 1}`);
2129
- if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--100__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--200__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--300__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--400__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--500__control--menu-is-open").length > 0)) {
2127
+ 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)) {
2130
2128
  if (element.className.includes("react-select") || element.className.includes("from-edit")) {
2131
2129
  element.getElementsByTagName("input")[0]?.focus();
2132
2130
  } else {
@@ -2649,7 +2647,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2649
2647
  };
2650
2648
  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react12.Fragment, { children: [
2651
2649
  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "react-table-edit", children: [
2652
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "e-grid", ref: gridRef, children: [
2650
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "e-grid e-default e-bothlines", ref: gridRef, children: [
2653
2651
  showTopToolbar ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: renderToolbarTop() }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}),
2654
2652
  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-gridcontent", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: tableElement, className: "e-content", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("table", { style: { width: "100%" }, children: [
2655
2653
  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("thead", { className: "e-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: "e-row", role: "row", children: tableColumns.map((col, index) => {
package/dist/index.mjs CHANGED
@@ -1128,7 +1128,7 @@ var Sidebar = (props) => {
1128
1128
  /* @__PURE__ */ jsxs9(
1129
1129
  "div",
1130
1130
  {
1131
- className: classNames4("sidebar-customizer d-none d-md-block ", `sidebar-customizer-${width ?? 600}`, {
1131
+ className: classNames4("customizer d-none d-md-block ", `customizer-${width ?? 600}`, {
1132
1132
  open: flag,
1133
1133
  fullscreen: isFullScreen
1134
1134
  }),
@@ -1579,7 +1579,7 @@ var TableEdit = forwardRef2((props, ref) => {
1579
1579
  },
1580
1580
  menuPortalTarget: document.body,
1581
1581
  isClearable: col.selectSettings?.isClearable ?? false,
1582
- classNamePrefix: col.selectSettings?.widthPopup ? `width-popup-${col.selectSettings?.widthPopup}` : "select",
1582
+ classNamePrefix: col.selectSettings?.widthPopup ? `select-${col.selectSettings?.widthPopup}` : "select",
1583
1583
  placeholder: t("Select"),
1584
1584
  id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
1585
1585
  loadOptions: col.selectSettings?.loadOptions,
@@ -1633,7 +1633,7 @@ var TableEdit = forwardRef2((props, ref) => {
1633
1633
  menuPortalTarget: document.body,
1634
1634
  isMulti: col.selectSettings?.isMulti ?? false,
1635
1635
  isClearable: col.selectSettings?.isClearable ?? false,
1636
- classNamePrefix: col.selectSettings?.widthPopup ? `width-popup-${col.selectSettings?.widthPopup}` : "select",
1636
+ classNamePrefix: col.selectSettings?.widthPopup ? `select-${col.selectSettings?.widthPopup}` : "select",
1637
1637
  placeholder: t("Select"),
1638
1638
  className: classnames5("react-select", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
1639
1639
  onKeyDown: (e) => {
@@ -1945,7 +1945,6 @@ var TableEdit = forwardRef2((props, ref) => {
1945
1945
  } else {
1946
1946
  element.focus();
1947
1947
  }
1948
- element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
1949
1948
  }
1950
1949
  e.preventDefault();
1951
1950
  return e.code;
@@ -1967,7 +1966,6 @@ var TableEdit = forwardRef2((props, ref) => {
1967
1966
  } else {
1968
1967
  element.focus();
1969
1968
  }
1970
- element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
1971
1969
  }
1972
1970
  e.preventDefault();
1973
1971
  return e.code;
@@ -1975,7 +1973,7 @@ var TableEdit = forwardRef2((props, ref) => {
1975
1973
  }
1976
1974
  if (e.code === "ArrowUp") {
1977
1975
  const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
1978
- if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--100__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--200__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--300__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--400__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--500__control--menu-is-open").length > 0)) {
1976
+ 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)) {
1979
1977
  if (indexRow > 1) {
1980
1978
  setIndexFocus(indexRow - 2);
1981
1979
  setTimeout(() => {
@@ -1995,7 +1993,7 @@ var TableEdit = forwardRef2((props, ref) => {
1995
1993
  }
1996
1994
  if (e.code === "ArrowDown") {
1997
1995
  const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
1998
- if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--100__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--200__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--300__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--400__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--500__control--menu-is-open").length > 0)) {
1996
+ 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)) {
1999
1997
  if (indexRow < dataSource?.length) {
2000
1998
  setIndexFocus(indexRow);
2001
1999
  setTimeout(() => {
@@ -2043,7 +2041,7 @@ var TableEdit = forwardRef2((props, ref) => {
2043
2041
  }
2044
2042
  if ((e.code === "Enter" || e.code === "NumpadEnter") && (!editDisable && !addDisable)) {
2045
2043
  const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
2046
- if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--100__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--200__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--300__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--400__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--500__control--menu-is-open").length > 0)) {
2044
+ 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)) {
2047
2045
  if (indexRow < dataSource?.length) {
2048
2046
  setIndexFocus(indexRow);
2049
2047
  setTimeout(() => {
@@ -2100,7 +2098,7 @@ var TableEdit = forwardRef2((props, ref) => {
2100
2098
  setTimeout(() => {
2101
2099
  tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
2102
2100
  const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${dataSource?.length + 1}`);
2103
- if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--100__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--200__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--300__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--400__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--500__control--menu-is-open").length > 0)) {
2101
+ 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)) {
2104
2102
  if (element.className.includes("react-select") || element.className.includes("from-edit")) {
2105
2103
  element.getElementsByTagName("input")[0]?.focus();
2106
2104
  } else {
@@ -2623,7 +2621,7 @@ var TableEdit = forwardRef2((props, ref) => {
2623
2621
  };
2624
2622
  return /* @__PURE__ */ jsxs11(Fragment12, { children: [
2625
2623
  /* @__PURE__ */ jsxs11("div", { className: "react-table-edit", children: [
2626
- /* @__PURE__ */ jsxs11("div", { className: "e-grid", ref: gridRef, children: [
2624
+ /* @__PURE__ */ jsxs11("div", { className: "e-grid e-default e-bothlines", ref: gridRef, children: [
2627
2625
  showTopToolbar ? /* @__PURE__ */ jsx12(Fragment13, { children: renderToolbarTop() }) : /* @__PURE__ */ jsx12(Fragment13, {}),
2628
2626
  /* @__PURE__ */ jsx12("div", { className: "e-gridcontent", children: /* @__PURE__ */ jsx12("div", { ref: tableElement, className: "e-content", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ jsxs11("table", { style: { width: "100%" }, children: [
2629
2627
  /* @__PURE__ */ jsx12("thead", { className: "e-gridheader", children: /* @__PURE__ */ jsx12("tr", { className: "e-row", role: "row", children: tableColumns.map((col, index) => {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-table-edit",
3
3
  "license": "MIT",
4
- "version": "0.0.2",
4
+ "version": "0.0.4",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",