react-table-edit 1.1.7 → 1.1.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.
Files changed (3) hide show
  1. package/dist/index.js +22 -16
  2. package/dist/index.mjs +22 -16
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -863,11 +863,6 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
863
863
  setIsLoading(false);
864
864
  setOptionsLoad(rs);
865
865
  };
866
- (0, import_react6.useEffect)(() => {
867
- if (!searchTerm) {
868
- setOptionsLoad(void 0);
869
- }
870
- }, [searchTerm]);
871
866
  const checkOverflow = (indexRow, indexCol) => {
872
867
  const element = document.getElementById(`select-${id}-${indexRow}-${indexCol}`);
873
868
  return element && element.scrollWidth > element.clientWidth;
@@ -979,7 +974,6 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
979
974
  });
980
975
  const RenderTable = (props2) => {
981
976
  const {} = props2;
982
- let countDisplay = 0;
983
977
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
984
978
  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { style: { width: "100%" }, children: [
985
979
  !(noHeader || (columns?.length ?? 0) === 0) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { className: "r-select-row", role: "row", children: [
@@ -1014,15 +1008,12 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
1014
1008
  return renderHeaderCol(col, index);
1015
1009
  })
1016
1010
  ] }) }),
1017
- (optionsLoad ? optionsLoad : options).length > 0 && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tbody", { className: "r-select-gridcontent", children: (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
1018
- if (!isMulti && loadOptions || checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
1019
- const isSelected = isMulti && value?.some((x) => x === row[fieldValue ?? "value"]);
1020
- countDisplay++;
1021
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderElement, { isSelected, indexRow, row }, `select-table-${indexRow}`);
1022
- }
1011
+ (optionsLoad ? optionsLoad : options)?.length > 0 && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tbody", { className: "r-select-gridcontent", children: (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
1012
+ const isSelected = isMulti && value?.some((x) => x === row[fieldValue ?? "value"]);
1013
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderElement, { isSelected: isSelected ?? false, indexRow, row }, `select-table-${indexRow}`);
1023
1014
  }) }) })
1024
1015
  ] }),
1025
- countDisplay === 0 && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "r-no-data", children: [
1016
+ ((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0 && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "r-no-data", children: [
1026
1017
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [
1027
1018
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }),
1028
1019
  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [
@@ -1090,9 +1081,24 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
1090
1081
  value: searchTerm,
1091
1082
  onPaste: (e) => onPaste && !dropdownOpen && onPaste(e),
1092
1083
  onChange: (val) => {
1093
- if (!isMulti && loadOptions && val.target.value) {
1094
- setIsLoading(true);
1095
- loadOptions(val.target.value, callbackLoadOption);
1084
+ if (val.target.value) {
1085
+ if (!isMulti && loadOptions && val.target.value) {
1086
+ setIsLoading(true);
1087
+ loadOptions(val.target.value, callbackLoadOption);
1088
+ } else {
1089
+ clearTimeout(timeOutElement);
1090
+ timeOutElement = setTimeout(() => {
1091
+ const arr = [];
1092
+ options.forEach((row) => {
1093
+ if (checkSearch(val.target.value, row, columns ? columns : defaultColumns)) {
1094
+ arr.push(row);
1095
+ }
1096
+ });
1097
+ setOptionsLoad(arr);
1098
+ }, 500);
1099
+ }
1100
+ } else {
1101
+ loadOptions(void 0);
1096
1102
  }
1097
1103
  setSearchTerm(val.target.value);
1098
1104
  },
package/dist/index.mjs CHANGED
@@ -824,11 +824,6 @@ var SelectTable = forwardRef((props, ref) => {
824
824
  setIsLoading(false);
825
825
  setOptionsLoad(rs);
826
826
  };
827
- useEffect3(() => {
828
- if (!searchTerm) {
829
- setOptionsLoad(void 0);
830
- }
831
- }, [searchTerm]);
832
827
  const checkOverflow = (indexRow, indexCol) => {
833
828
  const element = document.getElementById(`select-${id}-${indexRow}-${indexCol}`);
834
829
  return element && element.scrollWidth > element.clientWidth;
@@ -940,7 +935,6 @@ var SelectTable = forwardRef((props, ref) => {
940
935
  });
941
936
  const RenderTable = (props2) => {
942
937
  const {} = props2;
943
- let countDisplay = 0;
944
938
  return /* @__PURE__ */ jsxs5(Fragment6, { children: [
945
939
  /* @__PURE__ */ jsxs5("table", { style: { width: "100%" }, children: [
946
940
  !(noHeader || (columns?.length ?? 0) === 0) && /* @__PURE__ */ jsx5("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ jsxs5("tr", { className: "r-select-row", role: "row", children: [
@@ -975,15 +969,12 @@ var SelectTable = forwardRef((props, ref) => {
975
969
  return renderHeaderCol(col, index);
976
970
  })
977
971
  ] }) }),
978
- (optionsLoad ? optionsLoad : options).length > 0 && !isLoading && /* @__PURE__ */ jsx5(Fragment6, { children: /* @__PURE__ */ jsx5("tbody", { className: "r-select-gridcontent", children: (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
979
- if (!isMulti && loadOptions || checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
980
- const isSelected = isMulti && value?.some((x) => x === row[fieldValue ?? "value"]);
981
- countDisplay++;
982
- return /* @__PURE__ */ jsx5(RenderElement, { isSelected, indexRow, row }, `select-table-${indexRow}`);
983
- }
972
+ (optionsLoad ? optionsLoad : options)?.length > 0 && !isLoading && /* @__PURE__ */ jsx5(Fragment6, { children: /* @__PURE__ */ jsx5("tbody", { className: "r-select-gridcontent", children: (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
973
+ const isSelected = isMulti && value?.some((x) => x === row[fieldValue ?? "value"]);
974
+ return /* @__PURE__ */ jsx5(RenderElement, { isSelected: isSelected ?? false, indexRow, row }, `select-table-${indexRow}`);
984
975
  }) }) })
985
976
  ] }),
986
- countDisplay === 0 && !isLoading && /* @__PURE__ */ jsxs5("div", { className: "r-no-data", children: [
977
+ ((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0 && !isLoading && /* @__PURE__ */ jsxs5("div", { className: "r-no-data", children: [
987
978
  /* @__PURE__ */ jsx5("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxs5("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [
988
979
  /* @__PURE__ */ jsx5("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }),
989
980
  /* @__PURE__ */ jsxs5("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [
@@ -1051,9 +1042,24 @@ var SelectTable = forwardRef((props, ref) => {
1051
1042
  value: searchTerm,
1052
1043
  onPaste: (e) => onPaste && !dropdownOpen && onPaste(e),
1053
1044
  onChange: (val) => {
1054
- if (!isMulti && loadOptions && val.target.value) {
1055
- setIsLoading(true);
1056
- loadOptions(val.target.value, callbackLoadOption);
1045
+ if (val.target.value) {
1046
+ if (!isMulti && loadOptions && val.target.value) {
1047
+ setIsLoading(true);
1048
+ loadOptions(val.target.value, callbackLoadOption);
1049
+ } else {
1050
+ clearTimeout(timeOutElement);
1051
+ timeOutElement = setTimeout(() => {
1052
+ const arr = [];
1053
+ options.forEach((row) => {
1054
+ if (checkSearch(val.target.value, row, columns ? columns : defaultColumns)) {
1055
+ arr.push(row);
1056
+ }
1057
+ });
1058
+ setOptionsLoad(arr);
1059
+ }, 500);
1060
+ }
1061
+ } else {
1062
+ loadOptions(void 0);
1057
1063
  }
1058
1064
  setSearchTerm(val.target.value);
1059
1065
  },
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-table-edit",
3
3
  "license": "MIT",
4
- "version": "1.1.7",
4
+ "version": "1.1.8",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",