react-table-edit 1.2.41 → 1.2.42

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 +38 -28
  2. package/dist/index.mjs +38 -28
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -646,10 +646,10 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
646
646
  showFooter,
647
647
  footerComponent,
648
648
  formatSetting,
649
- allowCreate,
650
649
  onOpenMenu,
651
650
  onCloseMenu,
652
- onPaste
651
+ onPaste,
652
+ allowCreate
653
653
  } = props;
654
654
  const selectTableRef = (0, import_react6.useRef)();
655
655
  const selectMenuTableRef = (0, import_react6.useRef)();
@@ -660,6 +660,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
660
660
  const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
661
661
  const [searchTerm, setSearchTerm] = (0, import_react6.useState)("");
662
662
  const [optionsLoad, setOptionsLoad] = (0, import_react6.useState)();
663
+ const [haveCreateNew, setHaveCreateNew] = (0, import_react6.useState)(false);
663
664
  const { t } = (0, import_react_i18next3.useTranslation)();
664
665
  const isSelectedAll = (0, import_react6.useMemo)(() => {
665
666
  return isMulti === true && (optionsLoad ? optionsLoad : options).length > 0 && value?.length >= (optionsLoad ? optionsLoad : options).length;
@@ -679,7 +680,10 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
679
680
  };
680
681
  const handChange = (val) => {
681
682
  if (val && val.isCreated) {
682
- options.push({ ...val, [fieldLabel ?? "label"]: val[fieldLabel ?? "label"], isCreated: void 0 });
683
+ const newVal = { ...val, [fieldLabel ?? "label"]: val.valueCreate, isCreated: void 0 };
684
+ options.unshift(newVal);
685
+ onChange(newVal);
686
+ return;
683
687
  }
684
688
  onChange(val);
685
689
  };
@@ -732,7 +736,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
732
736
  const listKeyUse = ["Escape", "Space", "Enter", "Tab", "NumpadEnter", "ArrowDown", "ArrowUp", "F9"];
733
737
  const handleOnKeyDown = (e) => {
734
738
  let key = "";
735
- if (onKeyDown && (!dropdownOpen || !listKeyUse.includes(e.code) || (e.code === "Enter" || e.code === "Tab" || e.code === "NumpadEnter" || e.code === "Space") && !(optionsLoad ? optionsLoad : options)[indexFocus] || (e.code === "ArrowDown" || e.code === "ArrowUp") && (optionsLoad?.length ?? 0) === 0 && options.length === 0 || e.code === "Escape" && !(isClearable && value && !isDisabled))) {
739
+ if (onKeyDown && (!dropdownOpen || !listKeyUse.includes(e.code) || (e.code === "Enter" || e.code === "Tab" || e.code === "NumpadEnter" || e.code === "Space") && !((optionsLoad ? optionsLoad : options)[indexFocus] || haveCreateNew) || (e.code === "ArrowDown" || e.code === "ArrowUp") && (optionsLoad?.length ?? 0) === 0 && options.length === 0 || e.code === "Escape" && !(isClearable && value && !isDisabled))) {
736
740
  key = onKeyDown(e);
737
741
  }
738
742
  let flag = false;
@@ -741,11 +745,16 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
741
745
  handleAdd();
742
746
  flag = true;
743
747
  } else if (e.code === "Space") {
744
- const newItem = (optionsLoad ? optionsLoad : options)[indexFocus];
748
+ let newItem;
749
+ if (haveCreateNew && indexFocus === 0) {
750
+ newItem = { valueCreate: searchTerm, [fieldValue ?? "value"]: searchTerm, [fieldLabel ?? "label"]: `${t("Create")} '${searchTerm}'`, isCreated: true };
751
+ } else {
752
+ newItem = (optionsLoad ? optionsLoad : options)[indexFocus];
753
+ }
745
754
  if (dropdownOpen && newItem) {
746
- if ((optionsLoad ? optionsLoad : options)[indexFocus]) {
747
- handChange((optionsLoad ? optionsLoad : options)[indexFocus]);
748
- }
755
+ handChange(newItem);
756
+ handleOpenClose();
757
+ flag = true;
749
758
  }
750
759
  if (!searchTerm) {
751
760
  handleOpenClose();
@@ -758,14 +767,19 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
758
767
  flag = true;
759
768
  }
760
769
  } else if (e.code === "Enter" || e.code === "Tab" || e.code === "NumpadEnter") {
761
- const newItem = (optionsLoad ? optionsLoad : options)[indexFocus];
770
+ let newItem;
771
+ if (haveCreateNew && indexFocus === 0) {
772
+ newItem = { valueCreate: searchTerm, [fieldValue ?? "value"]: searchTerm, [fieldLabel ?? "label"]: `${t("Create")} '${searchTerm}'`, isCreated: true };
773
+ } else {
774
+ newItem = (optionsLoad ? optionsLoad : options)[indexFocus];
775
+ }
762
776
  if (dropdownOpen && newItem) {
763
777
  handChange(newItem);
764
778
  handleOpenClose();
765
779
  flag = true;
766
780
  }
767
781
  } else if (e.code === "ArrowDown") {
768
- if (dropdownOpen && ((optionsLoad?.length ?? 0) > 0 || options.length > 0)) {
782
+ if (dropdownOpen && ((optionsLoad?.length ?? 0) > 0 || options.length > 0 || haveCreateNew)) {
769
783
  let newIndex = 0;
770
784
  if (indexFocus >= 0) {
771
785
  newIndex = indexFocus + 1;
@@ -785,7 +799,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
785
799
  flag = true;
786
800
  }
787
801
  } else if (e.code === "ArrowUp") {
788
- if (dropdownOpen && ((optionsLoad?.length ?? 0) > 0 || options.length > 0)) {
802
+ if (dropdownOpen && ((optionsLoad?.length ?? 0) > 0 || options.length > 0 || haveCreateNew)) {
789
803
  let newIndex = 0;
790
804
  if (indexFocus >= 0) {
791
805
  newIndex = indexFocus - 1;
@@ -888,15 +902,14 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
888
902
  setIsLoading(false);
889
903
  setOptionsLoad(rs);
890
904
  };
891
- (0, import_react6.useEffect)(() => {
892
- if ((optionsLoad?.length ?? 0) === 0 && allowCreate && !isMulti && searchTerm) {
893
- setOptionsLoad([{ [fieldLabel ?? "label"]: `Create "${searchTerm}"`, [fieldValue ?? "value"]: searchTerm, isCreated: true }]);
894
- }
895
- }, [optionsLoad]);
896
905
  (0, import_react6.useEffect)(() => {
897
906
  if (!searchTerm) {
898
907
  setOptionsLoad(void 0);
908
+ } else if (allowCreate && !(optionsLoad ? optionsLoad : options)?.find((x) => x[fieldLabel ?? "label"] === searchTerm)) {
909
+ setHaveCreateNew(true);
910
+ return;
899
911
  }
912
+ setHaveCreateNew(false);
900
913
  }, [searchTerm]);
901
914
  const checkOverflow = (indexRow, indexCol) => {
902
915
  const element = document.getElementById(`select-${id}-${indexRow}-${indexCol}`);
@@ -1046,12 +1059,15 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
1046
1059
  return renderHeaderCol(col, index);
1047
1060
  })
1048
1061
  ] }) }),
1049
- (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) => {
1050
- const isSelected = isMulti && value?.some((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
1051
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderElement, { isSelected: isSelected ?? false, indexRow, row }, `select-table-${indexRow}`);
1052
- }) }) })
1062
+ (optionsLoad ? optionsLoad : options) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tbody", { className: "r-select-gridcontent", children: [
1063
+ haveCreateNew && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderElement, { isSelected: false, indexRow: 0, row: { valueCreate: searchTerm, [fieldValue ?? "value"]: searchTerm, [fieldLabel ?? "label"]: `${t("Create")} '${searchTerm}'`, isCreated: true } }),
1064
+ (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
1065
+ const isSelected = isMulti && value?.some((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
1066
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderElement, { isSelected: isSelected ?? false, indexRow: indexRow + (haveCreateNew ? 1 : 0), row }, `select-table-${indexRow}`);
1067
+ })
1068
+ ] }) })
1053
1069
  ] }),
1054
- ((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0 && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "r-no-data", children: [
1070
+ ((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0 && !haveCreateNew && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "r-no-data", children: [
1055
1071
  /* @__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: [
1056
1072
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }),
1057
1073
  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [
@@ -1123,13 +1139,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
1123
1139
  } else {
1124
1140
  clearTimeout(timeOutElement);
1125
1141
  timeOutElement = setTimeout(() => {
1126
- const arr = [];
1127
- options.forEach((row) => {
1128
- if (checkSearch(val.target.value, row, columns ? columns : defaultColumns)) {
1129
- arr.push(row);
1130
- }
1131
- });
1132
- setOptionsLoad(arr);
1142
+ setOptionsLoad(options.filter((row) => checkSearch(val.target.value, row, columns ? columns : defaultColumns)));
1133
1143
  }, 500);
1134
1144
  }
1135
1145
  }
package/dist/index.mjs CHANGED
@@ -608,10 +608,10 @@ var SelectTable = forwardRef((props, ref) => {
608
608
  showFooter,
609
609
  footerComponent,
610
610
  formatSetting,
611
- allowCreate,
612
611
  onOpenMenu,
613
612
  onCloseMenu,
614
- onPaste
613
+ onPaste,
614
+ allowCreate
615
615
  } = props;
616
616
  const selectTableRef = useRef();
617
617
  const selectMenuTableRef = useRef();
@@ -622,6 +622,7 @@ var SelectTable = forwardRef((props, ref) => {
622
622
  const [isLoading, setIsLoading] = useState2(false);
623
623
  const [searchTerm, setSearchTerm] = useState2("");
624
624
  const [optionsLoad, setOptionsLoad] = useState2();
625
+ const [haveCreateNew, setHaveCreateNew] = useState2(false);
625
626
  const { t } = useTranslation3();
626
627
  const isSelectedAll = useMemo(() => {
627
628
  return isMulti === true && (optionsLoad ? optionsLoad : options).length > 0 && value?.length >= (optionsLoad ? optionsLoad : options).length;
@@ -641,7 +642,10 @@ var SelectTable = forwardRef((props, ref) => {
641
642
  };
642
643
  const handChange = (val) => {
643
644
  if (val && val.isCreated) {
644
- options.push({ ...val, [fieldLabel ?? "label"]: val[fieldLabel ?? "label"], isCreated: void 0 });
645
+ const newVal = { ...val, [fieldLabel ?? "label"]: val.valueCreate, isCreated: void 0 };
646
+ options.unshift(newVal);
647
+ onChange(newVal);
648
+ return;
645
649
  }
646
650
  onChange(val);
647
651
  };
@@ -694,7 +698,7 @@ var SelectTable = forwardRef((props, ref) => {
694
698
  const listKeyUse = ["Escape", "Space", "Enter", "Tab", "NumpadEnter", "ArrowDown", "ArrowUp", "F9"];
695
699
  const handleOnKeyDown = (e) => {
696
700
  let key = "";
697
- if (onKeyDown && (!dropdownOpen || !listKeyUse.includes(e.code) || (e.code === "Enter" || e.code === "Tab" || e.code === "NumpadEnter" || e.code === "Space") && !(optionsLoad ? optionsLoad : options)[indexFocus] || (e.code === "ArrowDown" || e.code === "ArrowUp") && (optionsLoad?.length ?? 0) === 0 && options.length === 0 || e.code === "Escape" && !(isClearable && value && !isDisabled))) {
701
+ if (onKeyDown && (!dropdownOpen || !listKeyUse.includes(e.code) || (e.code === "Enter" || e.code === "Tab" || e.code === "NumpadEnter" || e.code === "Space") && !((optionsLoad ? optionsLoad : options)[indexFocus] || haveCreateNew) || (e.code === "ArrowDown" || e.code === "ArrowUp") && (optionsLoad?.length ?? 0) === 0 && options.length === 0 || e.code === "Escape" && !(isClearable && value && !isDisabled))) {
698
702
  key = onKeyDown(e);
699
703
  }
700
704
  let flag = false;
@@ -703,11 +707,16 @@ var SelectTable = forwardRef((props, ref) => {
703
707
  handleAdd();
704
708
  flag = true;
705
709
  } else if (e.code === "Space") {
706
- const newItem = (optionsLoad ? optionsLoad : options)[indexFocus];
710
+ let newItem;
711
+ if (haveCreateNew && indexFocus === 0) {
712
+ newItem = { valueCreate: searchTerm, [fieldValue ?? "value"]: searchTerm, [fieldLabel ?? "label"]: `${t("Create")} '${searchTerm}'`, isCreated: true };
713
+ } else {
714
+ newItem = (optionsLoad ? optionsLoad : options)[indexFocus];
715
+ }
707
716
  if (dropdownOpen && newItem) {
708
- if ((optionsLoad ? optionsLoad : options)[indexFocus]) {
709
- handChange((optionsLoad ? optionsLoad : options)[indexFocus]);
710
- }
717
+ handChange(newItem);
718
+ handleOpenClose();
719
+ flag = true;
711
720
  }
712
721
  if (!searchTerm) {
713
722
  handleOpenClose();
@@ -720,14 +729,19 @@ var SelectTable = forwardRef((props, ref) => {
720
729
  flag = true;
721
730
  }
722
731
  } else if (e.code === "Enter" || e.code === "Tab" || e.code === "NumpadEnter") {
723
- const newItem = (optionsLoad ? optionsLoad : options)[indexFocus];
732
+ let newItem;
733
+ if (haveCreateNew && indexFocus === 0) {
734
+ newItem = { valueCreate: searchTerm, [fieldValue ?? "value"]: searchTerm, [fieldLabel ?? "label"]: `${t("Create")} '${searchTerm}'`, isCreated: true };
735
+ } else {
736
+ newItem = (optionsLoad ? optionsLoad : options)[indexFocus];
737
+ }
724
738
  if (dropdownOpen && newItem) {
725
739
  handChange(newItem);
726
740
  handleOpenClose();
727
741
  flag = true;
728
742
  }
729
743
  } else if (e.code === "ArrowDown") {
730
- if (dropdownOpen && ((optionsLoad?.length ?? 0) > 0 || options.length > 0)) {
744
+ if (dropdownOpen && ((optionsLoad?.length ?? 0) > 0 || options.length > 0 || haveCreateNew)) {
731
745
  let newIndex = 0;
732
746
  if (indexFocus >= 0) {
733
747
  newIndex = indexFocus + 1;
@@ -747,7 +761,7 @@ var SelectTable = forwardRef((props, ref) => {
747
761
  flag = true;
748
762
  }
749
763
  } else if (e.code === "ArrowUp") {
750
- if (dropdownOpen && ((optionsLoad?.length ?? 0) > 0 || options.length > 0)) {
764
+ if (dropdownOpen && ((optionsLoad?.length ?? 0) > 0 || options.length > 0 || haveCreateNew)) {
751
765
  let newIndex = 0;
752
766
  if (indexFocus >= 0) {
753
767
  newIndex = indexFocus - 1;
@@ -850,15 +864,14 @@ var SelectTable = forwardRef((props, ref) => {
850
864
  setIsLoading(false);
851
865
  setOptionsLoad(rs);
852
866
  };
853
- useEffect3(() => {
854
- if ((optionsLoad?.length ?? 0) === 0 && allowCreate && !isMulti && searchTerm) {
855
- setOptionsLoad([{ [fieldLabel ?? "label"]: `Create "${searchTerm}"`, [fieldValue ?? "value"]: searchTerm, isCreated: true }]);
856
- }
857
- }, [optionsLoad]);
858
867
  useEffect3(() => {
859
868
  if (!searchTerm) {
860
869
  setOptionsLoad(void 0);
870
+ } else if (allowCreate && !(optionsLoad ? optionsLoad : options)?.find((x) => x[fieldLabel ?? "label"] === searchTerm)) {
871
+ setHaveCreateNew(true);
872
+ return;
861
873
  }
874
+ setHaveCreateNew(false);
862
875
  }, [searchTerm]);
863
876
  const checkOverflow = (indexRow, indexCol) => {
864
877
  const element = document.getElementById(`select-${id}-${indexRow}-${indexCol}`);
@@ -1008,12 +1021,15 @@ var SelectTable = forwardRef((props, ref) => {
1008
1021
  return renderHeaderCol(col, index);
1009
1022
  })
1010
1023
  ] }) }),
1011
- (optionsLoad ? optionsLoad : options)?.length > 0 && !isLoading && /* @__PURE__ */ jsx5(Fragment6, { children: /* @__PURE__ */ jsx5("tbody", { className: "r-select-gridcontent", children: (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
1012
- const isSelected = isMulti && value?.some((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
1013
- return /* @__PURE__ */ jsx5(RenderElement, { isSelected: isSelected ?? false, indexRow, row }, `select-table-${indexRow}`);
1014
- }) }) })
1024
+ (optionsLoad ? optionsLoad : options) && !isLoading && /* @__PURE__ */ jsx5(Fragment6, { children: /* @__PURE__ */ jsxs5("tbody", { className: "r-select-gridcontent", children: [
1025
+ haveCreateNew && /* @__PURE__ */ jsx5(RenderElement, { isSelected: false, indexRow: 0, row: { valueCreate: searchTerm, [fieldValue ?? "value"]: searchTerm, [fieldLabel ?? "label"]: `${t("Create")} '${searchTerm}'`, isCreated: true } }),
1026
+ (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
1027
+ const isSelected = isMulti && value?.some((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
1028
+ return /* @__PURE__ */ jsx5(RenderElement, { isSelected: isSelected ?? false, indexRow: indexRow + (haveCreateNew ? 1 : 0), row }, `select-table-${indexRow}`);
1029
+ })
1030
+ ] }) })
1015
1031
  ] }),
1016
- ((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0 && !isLoading && /* @__PURE__ */ jsxs5("div", { className: "r-no-data", children: [
1032
+ ((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0 && !haveCreateNew && !isLoading && /* @__PURE__ */ jsxs5("div", { className: "r-no-data", children: [
1017
1033
  /* @__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: [
1018
1034
  /* @__PURE__ */ jsx5("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }),
1019
1035
  /* @__PURE__ */ jsxs5("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [
@@ -1085,13 +1101,7 @@ var SelectTable = forwardRef((props, ref) => {
1085
1101
  } else {
1086
1102
  clearTimeout(timeOutElement);
1087
1103
  timeOutElement = setTimeout(() => {
1088
- const arr = [];
1089
- options.forEach((row) => {
1090
- if (checkSearch(val.target.value, row, columns ? columns : defaultColumns)) {
1091
- arr.push(row);
1092
- }
1093
- });
1094
- setOptionsLoad(arr);
1104
+ setOptionsLoad(options.filter((row) => checkSearch(val.target.value, row, columns ? columns : defaultColumns)));
1095
1105
  }, 500);
1096
1106
  }
1097
1107
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-table-edit",
3
- "version": "1.2.41",
3
+ "version": "1.2.42",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",