react-table-edit 1.2.8 → 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 (5) hide show
  1. package/dist/index.d.mts +1 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.js +27 -15
  4. package/dist/index.mjs +27 -15
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -49,6 +49,7 @@ type Props$1 = {
49
49
  columns?: IFColumnSelectTable[];
50
50
  isClearable?: boolean;
51
51
  isDisabled?: boolean;
52
+ allowCreate?: boolean;
52
53
  showFooter?: boolean;
53
54
  onPaste?: any;
54
55
  formatSetting?: IFTableSelectFormat;
package/dist/index.d.ts CHANGED
@@ -49,6 +49,7 @@ type Props$1 = {
49
49
  columns?: IFColumnSelectTable[];
50
50
  isClearable?: boolean;
51
51
  isDisabled?: boolean;
52
+ allowCreate?: boolean;
52
53
  showFooter?: boolean;
53
54
  onPaste?: any;
54
55
  formatSetting?: IFTableSelectFormat;
package/dist/index.js CHANGED
@@ -635,6 +635,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
635
635
  showFooter,
636
636
  footerComponent,
637
637
  formatSetting,
638
+ allowCreate,
638
639
  onPaste
639
640
  } = props;
640
641
  const selectTableRef = (0, import_react6.useRef)();
@@ -660,6 +661,12 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
660
661
  const closeMenu = () => {
661
662
  setDropdownOpen(false);
662
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
+ };
663
670
  (0, import_react6.useEffect)(() => {
664
671
  if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
665
672
  const index = (optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"]);
@@ -713,7 +720,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
713
720
  const newItem = (optionsLoad ? optionsLoad : options)[indexFocus];
714
721
  if (dropdownOpen && newItem) {
715
722
  if ((optionsLoad ? optionsLoad : options)[indexFocus]) {
716
- onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
723
+ handChange((optionsLoad ? optionsLoad : options)[indexFocus]);
717
724
  }
718
725
  }
719
726
  if (!searchTerm) {
@@ -722,14 +729,14 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
722
729
  }
723
730
  } else if (e.code === "Escape") {
724
731
  if (dropdownOpen && isClearable && value && !isDisabled) {
725
- onChange(void 0);
732
+ handChange(void 0);
726
733
  handleOpenClose();
727
734
  flag = true;
728
735
  }
729
736
  } else if (e.code === "Enter" || e.code === "Tab" || e.code === "NumpadEnter") {
730
737
  const newItem = (optionsLoad ? optionsLoad : options)[indexFocus];
731
738
  if (dropdownOpen && newItem) {
732
- onChange(newItem);
739
+ handChange(newItem);
733
740
  handleOpenClose();
734
741
  flag = true;
735
742
  }
@@ -857,6 +864,11 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
857
864
  setIsLoading(false);
858
865
  setOptionsLoad(rs);
859
866
  };
867
+ (0, import_react6.useEffect)(() => {
868
+ if (optionsLoad?.length === 0 && allowCreate && !isMulti && (columns?.length ?? 0) === 0) {
869
+ setOptionsLoad([{ label: `Create "${searchTerm}"`, value: searchTerm, isCreated: true }]);
870
+ }
871
+ }, [optionsLoad]);
860
872
  (0, import_react6.useEffect)(() => {
861
873
  if (!searchTerm) {
862
874
  setOptionsLoad(void 0);
@@ -885,13 +897,13 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
885
897
  const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
886
898
  if (index > -1) {
887
899
  value?.splice(index, 1);
888
- onChange([...value]);
900
+ handChange([...value]);
889
901
  } else {
890
902
  if (value) {
891
903
  value?.push(row[fieldValue ?? "value"]);
892
- onChange([...value]);
904
+ handChange([...value]);
893
905
  } else {
894
- onChange([row[fieldValue ?? "value"]]);
906
+ handChange([row[fieldValue ?? "value"]]);
895
907
  }
896
908
  }
897
909
  e.stopPropagation();
@@ -936,17 +948,17 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
936
948
  const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
937
949
  if (index > -1) {
938
950
  value?.splice(index, 1);
939
- onChange([...value]);
951
+ handChange([...value]);
940
952
  } else {
941
953
  if (value) {
942
954
  value?.push(row[fieldValue ?? "value"]);
943
- onChange([...value]);
955
+ handChange([...value]);
944
956
  } else {
945
- onChange([row[fieldValue ?? "value"]]);
957
+ handChange([row[fieldValue ?? "value"]]);
946
958
  }
947
959
  }
948
960
  } else {
949
- onChange(row);
961
+ handChange(row);
950
962
  setSearchTerm("");
951
963
  closeMenu();
952
964
  }
@@ -992,9 +1004,9 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
992
1004
  onClick: (e) => {
993
1005
  if (isMulti) {
994
1006
  if (isSelectedAll) {
995
- onChange([]);
1007
+ handChange([]);
996
1008
  } else {
997
- onChange([...(optionsLoad ? optionsLoad : options).map((x) => x[fieldValue ?? "value"])]);
1009
+ handChange([...(optionsLoad ? optionsLoad : options).map((x) => x[fieldValue ?? "value"])]);
998
1010
  }
999
1011
  e.stopPropagation();
1000
1012
  }
@@ -1116,7 +1128,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
1116
1128
  {
1117
1129
  className: (0, import_classnames4.default)("cursor-pointer"),
1118
1130
  onClick: (e) => {
1119
- onChange(isMulti ? [] : void 0);
1131
+ handChange(isMulti ? [] : void 0);
1120
1132
  e.stopPropagation();
1121
1133
  },
1122
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" }) })
@@ -2802,8 +2814,8 @@ var SelectTableTree = (0, import_react15.forwardRef)((props, ref) => {
2802
2814
  e.preventDefault();
2803
2815
  }
2804
2816
  },
2805
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "r-select-grid", children: [
2806
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-select-gridtable", ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight2 }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RenderTable, {}) }),
2817
+ children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "r-select-grid r-select-tree-grid", children: [
2818
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-select-gridtable ", ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight2 }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RenderTable, {}) }),
2807
2819
  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: (0, import_classnames13.default)("r-select-footer", { "d-none": !(showFooter === true || handleAdd || isMulti) }), children: [
2808
2820
  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_reactstrap10.Button, { outline: true, color: "primary", onClick: handleAdd, className: (0, import_classnames13.default)("r-btn d-flex align-items-center", { "d-none": !handleAdd }), children: [
2809
2821
  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_becoxy_icons6.Plus, { className: "me-50", fontSize: 16 }),
package/dist/index.mjs CHANGED
@@ -598,6 +598,7 @@ var SelectTable = forwardRef((props, ref) => {
598
598
  showFooter,
599
599
  footerComponent,
600
600
  formatSetting,
601
+ allowCreate,
601
602
  onPaste
602
603
  } = props;
603
604
  const selectTableRef = useRef();
@@ -623,6 +624,12 @@ var SelectTable = forwardRef((props, ref) => {
623
624
  const closeMenu = () => {
624
625
  setDropdownOpen(false);
625
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
+ };
626
633
  useEffect3(() => {
627
634
  if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
628
635
  const index = (optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"]);
@@ -676,7 +683,7 @@ var SelectTable = forwardRef((props, ref) => {
676
683
  const newItem = (optionsLoad ? optionsLoad : options)[indexFocus];
677
684
  if (dropdownOpen && newItem) {
678
685
  if ((optionsLoad ? optionsLoad : options)[indexFocus]) {
679
- onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
686
+ handChange((optionsLoad ? optionsLoad : options)[indexFocus]);
680
687
  }
681
688
  }
682
689
  if (!searchTerm) {
@@ -685,14 +692,14 @@ var SelectTable = forwardRef((props, ref) => {
685
692
  }
686
693
  } else if (e.code === "Escape") {
687
694
  if (dropdownOpen && isClearable && value && !isDisabled) {
688
- onChange(void 0);
695
+ handChange(void 0);
689
696
  handleOpenClose();
690
697
  flag = true;
691
698
  }
692
699
  } else if (e.code === "Enter" || e.code === "Tab" || e.code === "NumpadEnter") {
693
700
  const newItem = (optionsLoad ? optionsLoad : options)[indexFocus];
694
701
  if (dropdownOpen && newItem) {
695
- onChange(newItem);
702
+ handChange(newItem);
696
703
  handleOpenClose();
697
704
  flag = true;
698
705
  }
@@ -820,6 +827,11 @@ var SelectTable = forwardRef((props, ref) => {
820
827
  setIsLoading(false);
821
828
  setOptionsLoad(rs);
822
829
  };
830
+ useEffect3(() => {
831
+ if (optionsLoad?.length === 0 && allowCreate && !isMulti && (columns?.length ?? 0) === 0) {
832
+ setOptionsLoad([{ label: `Create "${searchTerm}"`, value: searchTerm, isCreated: true }]);
833
+ }
834
+ }, [optionsLoad]);
823
835
  useEffect3(() => {
824
836
  if (!searchTerm) {
825
837
  setOptionsLoad(void 0);
@@ -848,13 +860,13 @@ var SelectTable = forwardRef((props, ref) => {
848
860
  const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
849
861
  if (index > -1) {
850
862
  value?.splice(index, 1);
851
- onChange([...value]);
863
+ handChange([...value]);
852
864
  } else {
853
865
  if (value) {
854
866
  value?.push(row[fieldValue ?? "value"]);
855
- onChange([...value]);
867
+ handChange([...value]);
856
868
  } else {
857
- onChange([row[fieldValue ?? "value"]]);
869
+ handChange([row[fieldValue ?? "value"]]);
858
870
  }
859
871
  }
860
872
  e.stopPropagation();
@@ -899,17 +911,17 @@ var SelectTable = forwardRef((props, ref) => {
899
911
  const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
900
912
  if (index > -1) {
901
913
  value?.splice(index, 1);
902
- onChange([...value]);
914
+ handChange([...value]);
903
915
  } else {
904
916
  if (value) {
905
917
  value?.push(row[fieldValue ?? "value"]);
906
- onChange([...value]);
918
+ handChange([...value]);
907
919
  } else {
908
- onChange([row[fieldValue ?? "value"]]);
920
+ handChange([row[fieldValue ?? "value"]]);
909
921
  }
910
922
  }
911
923
  } else {
912
- onChange(row);
924
+ handChange(row);
913
925
  setSearchTerm("");
914
926
  closeMenu();
915
927
  }
@@ -955,9 +967,9 @@ var SelectTable = forwardRef((props, ref) => {
955
967
  onClick: (e) => {
956
968
  if (isMulti) {
957
969
  if (isSelectedAll) {
958
- onChange([]);
970
+ handChange([]);
959
971
  } else {
960
- onChange([...(optionsLoad ? optionsLoad : options).map((x) => x[fieldValue ?? "value"])]);
972
+ handChange([...(optionsLoad ? optionsLoad : options).map((x) => x[fieldValue ?? "value"])]);
961
973
  }
962
974
  e.stopPropagation();
963
975
  }
@@ -1079,7 +1091,7 @@ var SelectTable = forwardRef((props, ref) => {
1079
1091
  {
1080
1092
  className: classnames3("cursor-pointer"),
1081
1093
  onClick: (e) => {
1082
- onChange(isMulti ? [] : void 0);
1094
+ handChange(isMulti ? [] : void 0);
1083
1095
  e.stopPropagation();
1084
1096
  },
1085
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" }) })
@@ -2773,8 +2785,8 @@ var SelectTableTree = forwardRef3((props, ref) => {
2773
2785
  e.preventDefault();
2774
2786
  }
2775
2787
  },
2776
- children: /* @__PURE__ */ jsxs14("div", { className: "r-select-grid", children: [
2777
- /* @__PURE__ */ jsx15("div", { className: "r-select-gridtable", ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight2 }, children: /* @__PURE__ */ jsx15(RenderTable, {}) }),
2788
+ children: /* @__PURE__ */ jsxs14("div", { className: "r-select-grid r-select-tree-grid", children: [
2789
+ /* @__PURE__ */ jsx15("div", { className: "r-select-gridtable ", ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight2 }, children: /* @__PURE__ */ jsx15(RenderTable, {}) }),
2778
2790
  /* @__PURE__ */ jsxs14("div", { className: classnames8("r-select-footer", { "d-none": !(showFooter === true || handleAdd || isMulti) }), children: [
2779
2791
  /* @__PURE__ */ jsxs14(Button5, { outline: true, color: "primary", onClick: handleAdd, className: classnames8("r-btn d-flex align-items-center", { "d-none": !handleAdd }), children: [
2780
2792
  /* @__PURE__ */ jsx15(Plus3, { className: "me-50", fontSize: 16 }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-table-edit",
3
- "version": "1.2.8",
3
+ "version": "1.2.10",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",