react-table-edit 1.2.9 → 1.2.10

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 -20
  2. package/dist/index.mjs +22 -20
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -641,7 +641,6 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
641
641
  const selectTableRef = (0, import_react6.useRef)();
642
642
  const selectMenuTableRef = (0, import_react6.useRef)();
643
643
  const inputRef = (0, import_react6.useRef)();
644
- const [haveCreate, setHaveCreate] = (0, import_react6.useState)(false);
645
644
  const [dropdownOpen, setDropdownOpen] = (0, import_react6.useState)(false);
646
645
  const [indexFocus, setIndexFocus] = (0, import_react6.useState)(-1);
647
646
  const [isFocus, setIsFocus] = (0, import_react6.useState)(false);
@@ -662,6 +661,12 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
662
661
  const closeMenu = () => {
663
662
  setDropdownOpen(false);
664
663
  };
664
+ const handChange = (val) => {
665
+ if (val && val.isCreated) {
666
+ options.push({ ...val, label: val.value, isCreated: void 0 });
667
+ }
668
+ onChange(val);
669
+ };
665
670
  (0, import_react6.useEffect)(() => {
666
671
  if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
667
672
  const index = (optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"]);
@@ -715,7 +720,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
715
720
  const newItem = (optionsLoad ? optionsLoad : options)[indexFocus];
716
721
  if (dropdownOpen && newItem) {
717
722
  if ((optionsLoad ? optionsLoad : options)[indexFocus]) {
718
- onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
723
+ handChange((optionsLoad ? optionsLoad : options)[indexFocus]);
719
724
  }
720
725
  }
721
726
  if (!searchTerm) {
@@ -724,14 +729,14 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
724
729
  }
725
730
  } else if (e.code === "Escape") {
726
731
  if (dropdownOpen && isClearable && value && !isDisabled) {
727
- onChange(void 0);
732
+ handChange(void 0);
728
733
  handleOpenClose();
729
734
  flag = true;
730
735
  }
731
736
  } else if (e.code === "Enter" || e.code === "Tab" || e.code === "NumpadEnter") {
732
737
  const newItem = (optionsLoad ? optionsLoad : options)[indexFocus];
733
738
  if (dropdownOpen && newItem) {
734
- onChange(newItem);
739
+ handChange(newItem);
735
740
  handleOpenClose();
736
741
  flag = true;
737
742
  }
@@ -860,10 +865,8 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
860
865
  setOptionsLoad(rs);
861
866
  };
862
867
  (0, import_react6.useEffect)(() => {
863
- if (optionsLoad?.length === 0) {
864
- setHaveCreate(allowCreate ?? false);
865
- } else {
866
- setHaveCreate(false);
868
+ if (optionsLoad?.length === 0 && allowCreate && !isMulti && (columns?.length ?? 0) === 0) {
869
+ setOptionsLoad([{ label: `Create "${searchTerm}"`, value: searchTerm, isCreated: true }]);
867
870
  }
868
871
  }, [optionsLoad]);
869
872
  (0, import_react6.useEffect)(() => {
@@ -894,13 +897,13 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
894
897
  const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
895
898
  if (index > -1) {
896
899
  value?.splice(index, 1);
897
- onChange([...value]);
900
+ handChange([...value]);
898
901
  } else {
899
902
  if (value) {
900
903
  value?.push(row[fieldValue ?? "value"]);
901
- onChange([...value]);
904
+ handChange([...value]);
902
905
  } else {
903
- onChange([row[fieldValue ?? "value"]]);
906
+ handChange([row[fieldValue ?? "value"]]);
904
907
  }
905
908
  }
906
909
  e.stopPropagation();
@@ -945,17 +948,17 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
945
948
  const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
946
949
  if (index > -1) {
947
950
  value?.splice(index, 1);
948
- onChange([...value]);
951
+ handChange([...value]);
949
952
  } else {
950
953
  if (value) {
951
954
  value?.push(row[fieldValue ?? "value"]);
952
- onChange([...value]);
955
+ handChange([...value]);
953
956
  } else {
954
- onChange([row[fieldValue ?? "value"]]);
957
+ handChange([row[fieldValue ?? "value"]]);
955
958
  }
956
959
  }
957
960
  } else {
958
- onChange(row);
961
+ handChange(row);
959
962
  setSearchTerm("");
960
963
  closeMenu();
961
964
  }
@@ -1001,9 +1004,9 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
1001
1004
  onClick: (e) => {
1002
1005
  if (isMulti) {
1003
1006
  if (isSelectedAll) {
1004
- onChange([]);
1007
+ handChange([]);
1005
1008
  } else {
1006
- onChange([...(optionsLoad ? optionsLoad : options).map((x) => x[fieldValue ?? "value"])]);
1009
+ handChange([...(optionsLoad ? optionsLoad : options).map((x) => x[fieldValue ?? "value"])]);
1007
1010
  }
1008
1011
  e.stopPropagation();
1009
1012
  }
@@ -1024,8 +1027,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
1024
1027
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderElement, { isSelected: isSelected ?? false, indexRow, row }, `select-table-${indexRow}`);
1025
1028
  }) }) })
1026
1029
  ] }),
1027
- ((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0 && haveCreate && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "r-no-data", children: `Create "${searchTerm}"` }),
1028
- ((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0 && !haveCreate && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "r-no-data", children: [
1030
+ ((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0 && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "r-no-data", children: [
1029
1031
  /* @__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: [
1030
1032
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }),
1031
1033
  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [
@@ -1126,7 +1128,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
1126
1128
  {
1127
1129
  className: (0, import_classnames4.default)("cursor-pointer"),
1128
1130
  onClick: (e) => {
1129
- onChange(isMulti ? [] : void 0);
1131
+ handChange(isMulti ? [] : void 0);
1130
1132
  e.stopPropagation();
1131
1133
  },
1132
1134
  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { height: "20", width: "20", color: "#c4c4c4", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z" }) })
package/dist/index.mjs CHANGED
@@ -604,7 +604,6 @@ var SelectTable = forwardRef((props, ref) => {
604
604
  const selectTableRef = useRef();
605
605
  const selectMenuTableRef = useRef();
606
606
  const inputRef = useRef();
607
- const [haveCreate, setHaveCreate] = useState2(false);
608
607
  const [dropdownOpen, setDropdownOpen] = useState2(false);
609
608
  const [indexFocus, setIndexFocus] = useState2(-1);
610
609
  const [isFocus, setIsFocus] = useState2(false);
@@ -625,6 +624,12 @@ var SelectTable = forwardRef((props, ref) => {
625
624
  const closeMenu = () => {
626
625
  setDropdownOpen(false);
627
626
  };
627
+ const handChange = (val) => {
628
+ if (val && val.isCreated) {
629
+ options.push({ ...val, label: val.value, isCreated: void 0 });
630
+ }
631
+ onChange(val);
632
+ };
628
633
  useEffect3(() => {
629
634
  if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
630
635
  const index = (optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"]);
@@ -678,7 +683,7 @@ var SelectTable = forwardRef((props, ref) => {
678
683
  const newItem = (optionsLoad ? optionsLoad : options)[indexFocus];
679
684
  if (dropdownOpen && newItem) {
680
685
  if ((optionsLoad ? optionsLoad : options)[indexFocus]) {
681
- onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
686
+ handChange((optionsLoad ? optionsLoad : options)[indexFocus]);
682
687
  }
683
688
  }
684
689
  if (!searchTerm) {
@@ -687,14 +692,14 @@ var SelectTable = forwardRef((props, ref) => {
687
692
  }
688
693
  } else if (e.code === "Escape") {
689
694
  if (dropdownOpen && isClearable && value && !isDisabled) {
690
- onChange(void 0);
695
+ handChange(void 0);
691
696
  handleOpenClose();
692
697
  flag = true;
693
698
  }
694
699
  } else if (e.code === "Enter" || e.code === "Tab" || e.code === "NumpadEnter") {
695
700
  const newItem = (optionsLoad ? optionsLoad : options)[indexFocus];
696
701
  if (dropdownOpen && newItem) {
697
- onChange(newItem);
702
+ handChange(newItem);
698
703
  handleOpenClose();
699
704
  flag = true;
700
705
  }
@@ -823,10 +828,8 @@ var SelectTable = forwardRef((props, ref) => {
823
828
  setOptionsLoad(rs);
824
829
  };
825
830
  useEffect3(() => {
826
- if (optionsLoad?.length === 0) {
827
- setHaveCreate(allowCreate ?? false);
828
- } else {
829
- setHaveCreate(false);
831
+ if (optionsLoad?.length === 0 && allowCreate && !isMulti && (columns?.length ?? 0) === 0) {
832
+ setOptionsLoad([{ label: `Create "${searchTerm}"`, value: searchTerm, isCreated: true }]);
830
833
  }
831
834
  }, [optionsLoad]);
832
835
  useEffect3(() => {
@@ -857,13 +860,13 @@ var SelectTable = forwardRef((props, ref) => {
857
860
  const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
858
861
  if (index > -1) {
859
862
  value?.splice(index, 1);
860
- onChange([...value]);
863
+ handChange([...value]);
861
864
  } else {
862
865
  if (value) {
863
866
  value?.push(row[fieldValue ?? "value"]);
864
- onChange([...value]);
867
+ handChange([...value]);
865
868
  } else {
866
- onChange([row[fieldValue ?? "value"]]);
869
+ handChange([row[fieldValue ?? "value"]]);
867
870
  }
868
871
  }
869
872
  e.stopPropagation();
@@ -908,17 +911,17 @@ var SelectTable = forwardRef((props, ref) => {
908
911
  const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
909
912
  if (index > -1) {
910
913
  value?.splice(index, 1);
911
- onChange([...value]);
914
+ handChange([...value]);
912
915
  } else {
913
916
  if (value) {
914
917
  value?.push(row[fieldValue ?? "value"]);
915
- onChange([...value]);
918
+ handChange([...value]);
916
919
  } else {
917
- onChange([row[fieldValue ?? "value"]]);
920
+ handChange([row[fieldValue ?? "value"]]);
918
921
  }
919
922
  }
920
923
  } else {
921
- onChange(row);
924
+ handChange(row);
922
925
  setSearchTerm("");
923
926
  closeMenu();
924
927
  }
@@ -964,9 +967,9 @@ var SelectTable = forwardRef((props, ref) => {
964
967
  onClick: (e) => {
965
968
  if (isMulti) {
966
969
  if (isSelectedAll) {
967
- onChange([]);
970
+ handChange([]);
968
971
  } else {
969
- onChange([...(optionsLoad ? optionsLoad : options).map((x) => x[fieldValue ?? "value"])]);
972
+ handChange([...(optionsLoad ? optionsLoad : options).map((x) => x[fieldValue ?? "value"])]);
970
973
  }
971
974
  e.stopPropagation();
972
975
  }
@@ -987,8 +990,7 @@ var SelectTable = forwardRef((props, ref) => {
987
990
  return /* @__PURE__ */ jsx5(RenderElement, { isSelected: isSelected ?? false, indexRow, row }, `select-table-${indexRow}`);
988
991
  }) }) })
989
992
  ] }),
990
- ((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0 && haveCreate && /* @__PURE__ */ jsx5("div", { className: "r-no-data", children: `Create "${searchTerm}"` }),
991
- ((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0 && !haveCreate && !isLoading && /* @__PURE__ */ jsxs5("div", { className: "r-no-data", children: [
993
+ ((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0 && !isLoading && /* @__PURE__ */ jsxs5("div", { className: "r-no-data", children: [
992
994
  /* @__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: [
993
995
  /* @__PURE__ */ jsx5("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }),
994
996
  /* @__PURE__ */ jsxs5("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [
@@ -1089,7 +1091,7 @@ var SelectTable = forwardRef((props, ref) => {
1089
1091
  {
1090
1092
  className: classnames3("cursor-pointer"),
1091
1093
  onClick: (e) => {
1092
- onChange(isMulti ? [] : void 0);
1094
+ handChange(isMulti ? [] : void 0);
1093
1095
  e.stopPropagation();
1094
1096
  },
1095
1097
  children: /* @__PURE__ */ jsx5("svg", { height: "20", width: "20", color: "#c4c4c4", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ jsx5("path", { d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z" }) })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-table-edit",
3
- "version": "1.2.9",
3
+ "version": "1.2.10",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",