react-table-edit 1.2.36 → 1.2.38

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 +36 -19
  4. package/dist/index.mjs +36 -19
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -54,6 +54,7 @@ type Props$1 = {
54
54
  allowCreate?: boolean;
55
55
  showFooter?: boolean;
56
56
  onPaste?: any;
57
+ onCloseMenu?: any;
57
58
  formatSetting?: IFTableSelectFormat;
58
59
  };
59
60
  declare const SelectTable: react__default.ForwardRefExoticComponent<Props$1 & react__default.RefAttributes<unknown>>;
package/dist/index.d.ts CHANGED
@@ -54,6 +54,7 @@ type Props$1 = {
54
54
  allowCreate?: boolean;
55
55
  showFooter?: boolean;
56
56
  onPaste?: any;
57
+ onCloseMenu?: any;
57
58
  formatSetting?: IFTableSelectFormat;
58
59
  };
59
60
  declare const SelectTable: react__default.ForwardRefExoticComponent<Props$1 & react__default.RefAttributes<unknown>>;
package/dist/index.js CHANGED
@@ -648,6 +648,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
648
648
  formatSetting,
649
649
  allowCreate,
650
650
  onOpenMenu,
651
+ onCloseMenu,
651
652
  onPaste
652
653
  } = props;
653
654
  const selectTableRef = (0, import_react6.useRef)();
@@ -672,6 +673,9 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
672
673
  ];
673
674
  const closeMenu = () => {
674
675
  setDropdownOpen(false);
676
+ if (onCloseMenu) {
677
+ onCloseMenu();
678
+ }
675
679
  };
676
680
  const handChange = (val) => {
677
681
  if (val && val.isCreated) {
@@ -690,6 +694,9 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
690
694
  (0, import_react6.useEffect)(() => {
691
695
  if (inputRef && !isDisabled) {
692
696
  inputRef.current.addEventListener("blur", function() {
697
+ if (onCloseMenu) {
698
+ onCloseMenu();
699
+ }
693
700
  setDropdownOpen(false);
694
701
  setSearchTerm("");
695
702
  setIsFocus(false);
@@ -882,7 +889,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
882
889
  setOptionsLoad(rs);
883
890
  };
884
891
  (0, import_react6.useEffect)(() => {
885
- if (optionsLoad?.length === 0 && allowCreate && !isMulti) {
892
+ if ((optionsLoad?.length ?? 0) === 0 && allowCreate && !isMulti && searchTerm) {
886
893
  setOptionsLoad([{ label: `Create "${searchTerm}"`, value: searchTerm, isCreated: true }]);
887
894
  }
888
895
  }, [optionsLoad]);
@@ -911,16 +918,16 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
911
918
  style: { width: 40, textAlign: "center", padding: 0, paddingBottom: 6 },
912
919
  onClick: (e) => {
913
920
  if (isMulti) {
914
- const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
921
+ const index = value?.findIndex((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
915
922
  if (index > -1) {
916
923
  value?.splice(index, 1);
917
924
  handChange([...value]);
918
925
  } else {
919
926
  if (value) {
920
- value?.push(row[fieldValue ?? "value"]);
927
+ value?.push(row);
921
928
  handChange([...value]);
922
929
  } else {
923
- handChange([row[fieldValue ?? "value"]]);
930
+ handChange([row]);
924
931
  }
925
932
  }
926
933
  e.stopPropagation();
@@ -962,16 +969,16 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
962
969
  },
963
970
  onClick: (e) => {
964
971
  if (isMulti) {
965
- const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
972
+ const index = value?.findIndex((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
966
973
  if (index > -1) {
967
974
  value?.splice(index, 1);
968
975
  handChange([...value]);
969
976
  } else {
970
977
  if (value) {
971
- value?.push(row[fieldValue ?? "value"]);
978
+ value?.push(row);
972
979
  handChange([...value]);
973
980
  } else {
974
- handChange([row[fieldValue ?? "value"]]);
981
+ handChange([row]);
975
982
  }
976
983
  }
977
984
  } else {
@@ -1023,7 +1030,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
1023
1030
  if (isSelectedAll) {
1024
1031
  handChange([]);
1025
1032
  } else {
1026
- handChange([...(optionsLoad ? optionsLoad : options).map((x) => x[fieldValue ?? "value"])]);
1033
+ handChange([...optionsLoad ? optionsLoad : options]);
1027
1034
  }
1028
1035
  e.stopPropagation();
1029
1036
  }
@@ -1040,7 +1047,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
1040
1047
  })
1041
1048
  ] }) }),
1042
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) => {
1043
- const isSelected = isMulti && value?.some((x) => x === row[fieldValue ?? "value"]);
1050
+ const isSelected = isMulti && value?.some((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
1044
1051
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderElement, { isSelected: isSelected ?? false, indexRow, row }, `select-table-${indexRow}`);
1045
1052
  }) }) })
1046
1053
  ] }),
@@ -1090,13 +1097,10 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
1090
1097
  children: [
1091
1098
  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "select-table-container", children: [
1092
1099
  isMulti ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_classnames4.default)("select-value is-mutil", { "d-none": searchTerm }), children: value?.map((ele, index) => {
1093
- const element = (optionsLoad ? optionsLoad : options).find((e) => e[fieldValue ?? "value"] === ele);
1094
- if (element) {
1095
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
1096
- index === 0 ? "" : ", ",
1097
- formatOptionLabel ? formatOptionLabel(element) : element[fieldLabel ?? "label"]
1098
- ] }, index);
1099
- }
1100
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
1101
+ index === 0 ? "" : ", ",
1102
+ formatOptionLabel ? formatOptionLabel(ele) : ele[fieldLabel ?? "label"]
1103
+ ] }, index);
1100
1104
  }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_classnames4.default)("select-value", { "d-none": searchTerm }), children: [
1101
1105
  value ? formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? "label"] : "",
1102
1106
  " "
@@ -1113,7 +1117,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
1113
1117
  onPaste: (e) => onPaste && !dropdownOpen && onPaste(e),
1114
1118
  onChange: (val) => {
1115
1119
  if (val.target.value) {
1116
- if (!isMulti && loadOptions && val.target.value) {
1120
+ if (loadOptions && val.target.value) {
1117
1121
  setIsLoading(true);
1118
1122
  loadOptions(val.target.value, callbackLoadOption);
1119
1123
  } else {
@@ -3136,7 +3140,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
3136
3140
  optionsSelect = col.selectSettings?.options ? col.selectSettings?.validateOption ? col.selectSettings?.options.filter((item) => col.selectSettings?.validateOption(item, row)) : col.selectSettings?.options : [];
3137
3141
  }
3138
3142
  if (col.selectSettings?.isMulti) {
3139
- valueSelect = row[col.field];
3143
+ valueSelect = optionsSelect.filter((x) => row[col.field].some((y) => x[col.selectSettings?.fieldValue ?? "value"] === y));
3140
3144
  } else {
3141
3145
  valueSelect = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? optionsSelect?.find((val) => val[col.selectSettings?.fieldValue ?? "value"] === row[col.field]) : "";
3142
3146
  if (!valueSelect && col.selectSettings?.defaultValue) {
@@ -3152,10 +3156,23 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
3152
3156
  rowData: row,
3153
3157
  onChange: (val) => {
3154
3158
  if (col.selectSettings?.isMulti) {
3155
- row[col.field] = !isNullOrUndefined(val) ? val : [];
3159
+ row[col.field] = (val?.length ?? 0) > 0 ? val.map((item) => item[col.selectSettings?.fieldValue ?? "value"]) : [];
3156
3160
  } else {
3157
3161
  row[col.field] = !isNullOrUndefined(val) ? val[col.selectSettings?.fieldValue ?? "value"] : void 0;
3158
3162
  }
3163
+ if (val && col.selectSettings?.loadOptions && isMulti) {
3164
+ if (isMulti) {
3165
+ val.forEach((e) => {
3166
+ if (!optionsSelect.some((a) => a[col.selectSettings?.fieldValue ?? "value"] === e[col.selectSettings?.fieldValue ?? "value"])) {
3167
+ optionsSelect.unshift(e);
3168
+ }
3169
+ });
3170
+ } else if (!col.selectSettings?.defaultValue) {
3171
+ if (!optionsSelect.some((a) => a[col.selectSettings?.fieldValue ?? "value"] === val[col.selectSettings?.fieldValue ?? "value"])) {
3172
+ optionsSelect.unshift(val);
3173
+ }
3174
+ }
3175
+ }
3159
3176
  if (col.callback) {
3160
3177
  col.callback(val, indexRow);
3161
3178
  }
package/dist/index.mjs CHANGED
@@ -610,6 +610,7 @@ var SelectTable = forwardRef((props, ref) => {
610
610
  formatSetting,
611
611
  allowCreate,
612
612
  onOpenMenu,
613
+ onCloseMenu,
613
614
  onPaste
614
615
  } = props;
615
616
  const selectTableRef = useRef();
@@ -634,6 +635,9 @@ var SelectTable = forwardRef((props, ref) => {
634
635
  ];
635
636
  const closeMenu = () => {
636
637
  setDropdownOpen(false);
638
+ if (onCloseMenu) {
639
+ onCloseMenu();
640
+ }
637
641
  };
638
642
  const handChange = (val) => {
639
643
  if (val && val.isCreated) {
@@ -652,6 +656,9 @@ var SelectTable = forwardRef((props, ref) => {
652
656
  useEffect3(() => {
653
657
  if (inputRef && !isDisabled) {
654
658
  inputRef.current.addEventListener("blur", function() {
659
+ if (onCloseMenu) {
660
+ onCloseMenu();
661
+ }
655
662
  setDropdownOpen(false);
656
663
  setSearchTerm("");
657
664
  setIsFocus(false);
@@ -844,7 +851,7 @@ var SelectTable = forwardRef((props, ref) => {
844
851
  setOptionsLoad(rs);
845
852
  };
846
853
  useEffect3(() => {
847
- if (optionsLoad?.length === 0 && allowCreate && !isMulti) {
854
+ if ((optionsLoad?.length ?? 0) === 0 && allowCreate && !isMulti && searchTerm) {
848
855
  setOptionsLoad([{ label: `Create "${searchTerm}"`, value: searchTerm, isCreated: true }]);
849
856
  }
850
857
  }, [optionsLoad]);
@@ -873,16 +880,16 @@ var SelectTable = forwardRef((props, ref) => {
873
880
  style: { width: 40, textAlign: "center", padding: 0, paddingBottom: 6 },
874
881
  onClick: (e) => {
875
882
  if (isMulti) {
876
- const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
883
+ const index = value?.findIndex((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
877
884
  if (index > -1) {
878
885
  value?.splice(index, 1);
879
886
  handChange([...value]);
880
887
  } else {
881
888
  if (value) {
882
- value?.push(row[fieldValue ?? "value"]);
889
+ value?.push(row);
883
890
  handChange([...value]);
884
891
  } else {
885
- handChange([row[fieldValue ?? "value"]]);
892
+ handChange([row]);
886
893
  }
887
894
  }
888
895
  e.stopPropagation();
@@ -924,16 +931,16 @@ var SelectTable = forwardRef((props, ref) => {
924
931
  },
925
932
  onClick: (e) => {
926
933
  if (isMulti) {
927
- const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
934
+ const index = value?.findIndex((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
928
935
  if (index > -1) {
929
936
  value?.splice(index, 1);
930
937
  handChange([...value]);
931
938
  } else {
932
939
  if (value) {
933
- value?.push(row[fieldValue ?? "value"]);
940
+ value?.push(row);
934
941
  handChange([...value]);
935
942
  } else {
936
- handChange([row[fieldValue ?? "value"]]);
943
+ handChange([row]);
937
944
  }
938
945
  }
939
946
  } else {
@@ -985,7 +992,7 @@ var SelectTable = forwardRef((props, ref) => {
985
992
  if (isSelectedAll) {
986
993
  handChange([]);
987
994
  } else {
988
- handChange([...(optionsLoad ? optionsLoad : options).map((x) => x[fieldValue ?? "value"])]);
995
+ handChange([...optionsLoad ? optionsLoad : options]);
989
996
  }
990
997
  e.stopPropagation();
991
998
  }
@@ -1002,7 +1009,7 @@ var SelectTable = forwardRef((props, ref) => {
1002
1009
  })
1003
1010
  ] }) }),
1004
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) => {
1005
- const isSelected = isMulti && value?.some((x) => x === row[fieldValue ?? "value"]);
1012
+ const isSelected = isMulti && value?.some((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
1006
1013
  return /* @__PURE__ */ jsx5(RenderElement, { isSelected: isSelected ?? false, indexRow, row }, `select-table-${indexRow}`);
1007
1014
  }) }) })
1008
1015
  ] }),
@@ -1052,13 +1059,10 @@ var SelectTable = forwardRef((props, ref) => {
1052
1059
  children: [
1053
1060
  /* @__PURE__ */ jsxs5("div", { className: "select-table-container", children: [
1054
1061
  isMulti ? /* @__PURE__ */ jsx5(Fragment6, { children: /* @__PURE__ */ jsx5("div", { className: classnames3("select-value is-mutil", { "d-none": searchTerm }), children: value?.map((ele, index) => {
1055
- const element = (optionsLoad ? optionsLoad : options).find((e) => e[fieldValue ?? "value"] === ele);
1056
- if (element) {
1057
- return /* @__PURE__ */ jsxs5("span", { children: [
1058
- index === 0 ? "" : ", ",
1059
- formatOptionLabel ? formatOptionLabel(element) : element[fieldLabel ?? "label"]
1060
- ] }, index);
1061
- }
1062
+ return /* @__PURE__ */ jsxs5("span", { children: [
1063
+ index === 0 ? "" : ", ",
1064
+ formatOptionLabel ? formatOptionLabel(ele) : ele[fieldLabel ?? "label"]
1065
+ ] }, index);
1062
1066
  }) }) }) : /* @__PURE__ */ jsx5(Fragment6, { children: /* @__PURE__ */ jsxs5("div", { className: classnames3("select-value", { "d-none": searchTerm }), children: [
1063
1067
  value ? formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? "label"] : "",
1064
1068
  " "
@@ -1075,7 +1079,7 @@ var SelectTable = forwardRef((props, ref) => {
1075
1079
  onPaste: (e) => onPaste && !dropdownOpen && onPaste(e),
1076
1080
  onChange: (val) => {
1077
1081
  if (val.target.value) {
1078
- if (!isMulti && loadOptions && val.target.value) {
1082
+ if (loadOptions && val.target.value) {
1079
1083
  setIsLoading(true);
1080
1084
  loadOptions(val.target.value, callbackLoadOption);
1081
1085
  } else {
@@ -3106,7 +3110,7 @@ var TableEdit = forwardRef4((props, ref) => {
3106
3110
  optionsSelect = col.selectSettings?.options ? col.selectSettings?.validateOption ? col.selectSettings?.options.filter((item) => col.selectSettings?.validateOption(item, row)) : col.selectSettings?.options : [];
3107
3111
  }
3108
3112
  if (col.selectSettings?.isMulti) {
3109
- valueSelect = row[col.field];
3113
+ valueSelect = optionsSelect.filter((x) => row[col.field].some((y) => x[col.selectSettings?.fieldValue ?? "value"] === y));
3110
3114
  } else {
3111
3115
  valueSelect = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? optionsSelect?.find((val) => val[col.selectSettings?.fieldValue ?? "value"] === row[col.field]) : "";
3112
3116
  if (!valueSelect && col.selectSettings?.defaultValue) {
@@ -3122,10 +3126,23 @@ var TableEdit = forwardRef4((props, ref) => {
3122
3126
  rowData: row,
3123
3127
  onChange: (val) => {
3124
3128
  if (col.selectSettings?.isMulti) {
3125
- row[col.field] = !isNullOrUndefined(val) ? val : [];
3129
+ row[col.field] = (val?.length ?? 0) > 0 ? val.map((item) => item[col.selectSettings?.fieldValue ?? "value"]) : [];
3126
3130
  } else {
3127
3131
  row[col.field] = !isNullOrUndefined(val) ? val[col.selectSettings?.fieldValue ?? "value"] : void 0;
3128
3132
  }
3133
+ if (val && col.selectSettings?.loadOptions && isMulti) {
3134
+ if (isMulti) {
3135
+ val.forEach((e) => {
3136
+ if (!optionsSelect.some((a) => a[col.selectSettings?.fieldValue ?? "value"] === e[col.selectSettings?.fieldValue ?? "value"])) {
3137
+ optionsSelect.unshift(e);
3138
+ }
3139
+ });
3140
+ } else if (!col.selectSettings?.defaultValue) {
3141
+ if (!optionsSelect.some((a) => a[col.selectSettings?.fieldValue ?? "value"] === val[col.selectSettings?.fieldValue ?? "value"])) {
3142
+ optionsSelect.unshift(val);
3143
+ }
3144
+ }
3145
+ }
3129
3146
  if (col.callback) {
3130
3147
  col.callback(val, indexRow);
3131
3148
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-table-edit",
3
- "version": "1.2.36",
3
+ "version": "1.2.38",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",