react-table-edit 1.2.37 → 1.2.39

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 +30 -19
  4. package/dist/index.mjs +30 -19
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -89,6 +89,7 @@ type ISettingSelectElement = {
89
89
  footerComponent?: any;
90
90
  formatOptionLabel?: any;
91
91
  selectChilds?: boolean;
92
+ allowCreate?: boolean;
92
93
  loadOptions?: any;
93
94
  defaultValue?: any;
94
95
  fieldValue?: string;
package/dist/index.d.ts CHANGED
@@ -89,6 +89,7 @@ type ISettingSelectElement = {
89
89
  footerComponent?: any;
90
90
  formatOptionLabel?: any;
91
91
  selectChilds?: boolean;
92
+ allowCreate?: boolean;
92
93
  loadOptions?: any;
93
94
  defaultValue?: any;
94
95
  fieldValue?: string;
package/dist/index.js CHANGED
@@ -889,7 +889,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
889
889
  setOptionsLoad(rs);
890
890
  };
891
891
  (0, import_react6.useEffect)(() => {
892
- if (optionsLoad?.length === 0 && allowCreate && !isMulti) {
892
+ if ((optionsLoad?.length ?? 0) === 0 && allowCreate && !isMulti && searchTerm) {
893
893
  setOptionsLoad([{ label: `Create "${searchTerm}"`, value: searchTerm, isCreated: true }]);
894
894
  }
895
895
  }, [optionsLoad]);
@@ -918,16 +918,16 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
918
918
  style: { width: 40, textAlign: "center", padding: 0, paddingBottom: 6 },
919
919
  onClick: (e) => {
920
920
  if (isMulti) {
921
- const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
921
+ const index = value?.findIndex((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
922
922
  if (index > -1) {
923
923
  value?.splice(index, 1);
924
924
  handChange([...value]);
925
925
  } else {
926
926
  if (value) {
927
- value?.push(row[fieldValue ?? "value"]);
927
+ value?.push(row);
928
928
  handChange([...value]);
929
929
  } else {
930
- handChange([row[fieldValue ?? "value"]]);
930
+ handChange([row]);
931
931
  }
932
932
  }
933
933
  e.stopPropagation();
@@ -969,16 +969,16 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
969
969
  },
970
970
  onClick: (e) => {
971
971
  if (isMulti) {
972
- const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
972
+ const index = value?.findIndex((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
973
973
  if (index > -1) {
974
974
  value?.splice(index, 1);
975
975
  handChange([...value]);
976
976
  } else {
977
977
  if (value) {
978
- value?.push(row[fieldValue ?? "value"]);
978
+ value?.push(row);
979
979
  handChange([...value]);
980
980
  } else {
981
- handChange([row[fieldValue ?? "value"]]);
981
+ handChange([row]);
982
982
  }
983
983
  }
984
984
  } else {
@@ -1030,7 +1030,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
1030
1030
  if (isSelectedAll) {
1031
1031
  handChange([]);
1032
1032
  } else {
1033
- handChange([...(optionsLoad ? optionsLoad : options).map((x) => x[fieldValue ?? "value"])]);
1033
+ handChange([...optionsLoad ? optionsLoad : options]);
1034
1034
  }
1035
1035
  e.stopPropagation();
1036
1036
  }
@@ -1047,7 +1047,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
1047
1047
  })
1048
1048
  ] }) }),
1049
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 === row[fieldValue ?? "value"]);
1050
+ const isSelected = isMulti && value?.some((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
1051
1051
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderElement, { isSelected: isSelected ?? false, indexRow, row }, `select-table-${indexRow}`);
1052
1052
  }) }) })
1053
1053
  ] }),
@@ -1097,13 +1097,10 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
1097
1097
  children: [
1098
1098
  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "select-table-container", children: [
1099
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) => {
1100
- const element = (optionsLoad ? optionsLoad : options).find((e) => e[fieldValue ?? "value"] === ele);
1101
- if (element) {
1102
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
1103
- index === 0 ? "" : ", ",
1104
- formatOptionLabel ? formatOptionLabel(element) : element[fieldLabel ?? "label"]
1105
- ] }, index);
1106
- }
1100
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
1101
+ index === 0 ? "" : ", ",
1102
+ formatOptionLabel ? formatOptionLabel(ele) : ele[fieldLabel ?? "label"]
1103
+ ] }, index);
1107
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: [
1108
1105
  value ? formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? "label"] : "",
1109
1106
  " "
@@ -1120,7 +1117,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
1120
1117
  onPaste: (e) => onPaste && !dropdownOpen && onPaste(e),
1121
1118
  onChange: (val) => {
1122
1119
  if (val.target.value) {
1123
- if (!isMulti && loadOptions && val.target.value) {
1120
+ if (loadOptions && val.target.value) {
1124
1121
  setIsLoading(true);
1125
1122
  loadOptions(val.target.value, callbackLoadOption);
1126
1123
  } else {
@@ -3143,7 +3140,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
3143
3140
  optionsSelect = col.selectSettings?.options ? col.selectSettings?.validateOption ? col.selectSettings?.options.filter((item) => col.selectSettings?.validateOption(item, row)) : col.selectSettings?.options : [];
3144
3141
  }
3145
3142
  if (col.selectSettings?.isMulti) {
3146
- valueSelect = row[col.field];
3143
+ valueSelect = optionsSelect.filter((x) => row[col.field].some((y) => x[col.selectSettings?.fieldValue ?? "value"] === y));
3147
3144
  } else {
3148
3145
  valueSelect = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? optionsSelect?.find((val) => val[col.selectSettings?.fieldValue ?? "value"] === row[col.field]) : "";
3149
3146
  if (!valueSelect && col.selectSettings?.defaultValue) {
@@ -3159,10 +3156,23 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
3159
3156
  rowData: row,
3160
3157
  onChange: (val) => {
3161
3158
  if (col.selectSettings?.isMulti) {
3162
- row[col.field] = !isNullOrUndefined(val) ? val : [];
3159
+ row[col.field] = (val?.length ?? 0) > 0 ? val.map((item) => item[col.selectSettings?.fieldValue ?? "value"]) : [];
3163
3160
  } else {
3164
3161
  row[col.field] = !isNullOrUndefined(val) ? val[col.selectSettings?.fieldValue ?? "value"] : void 0;
3165
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
+ }
3166
3176
  if (col.callback) {
3167
3177
  col.callback(val, indexRow);
3168
3178
  }
@@ -3186,6 +3196,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
3186
3196
  maxHeight: col.selectSettings?.heightPopup ? Number(col.selectSettings?.heightPopup) : void 0,
3187
3197
  menuWidth: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : void 0,
3188
3198
  textAlign: col.textAlign ?? "left",
3199
+ allowCreate: col.selectSettings?.allowCreate,
3189
3200
  onKeyDown: (e) => {
3190
3201
  if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
3191
3202
  }
package/dist/index.mjs CHANGED
@@ -851,7 +851,7 @@ var SelectTable = forwardRef((props, ref) => {
851
851
  setOptionsLoad(rs);
852
852
  };
853
853
  useEffect3(() => {
854
- if (optionsLoad?.length === 0 && allowCreate && !isMulti) {
854
+ if ((optionsLoad?.length ?? 0) === 0 && allowCreate && !isMulti && searchTerm) {
855
855
  setOptionsLoad([{ label: `Create "${searchTerm}"`, value: searchTerm, isCreated: true }]);
856
856
  }
857
857
  }, [optionsLoad]);
@@ -880,16 +880,16 @@ var SelectTable = forwardRef((props, ref) => {
880
880
  style: { width: 40, textAlign: "center", padding: 0, paddingBottom: 6 },
881
881
  onClick: (e) => {
882
882
  if (isMulti) {
883
- const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
883
+ const index = value?.findIndex((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
884
884
  if (index > -1) {
885
885
  value?.splice(index, 1);
886
886
  handChange([...value]);
887
887
  } else {
888
888
  if (value) {
889
- value?.push(row[fieldValue ?? "value"]);
889
+ value?.push(row);
890
890
  handChange([...value]);
891
891
  } else {
892
- handChange([row[fieldValue ?? "value"]]);
892
+ handChange([row]);
893
893
  }
894
894
  }
895
895
  e.stopPropagation();
@@ -931,16 +931,16 @@ var SelectTable = forwardRef((props, ref) => {
931
931
  },
932
932
  onClick: (e) => {
933
933
  if (isMulti) {
934
- const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
934
+ const index = value?.findIndex((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
935
935
  if (index > -1) {
936
936
  value?.splice(index, 1);
937
937
  handChange([...value]);
938
938
  } else {
939
939
  if (value) {
940
- value?.push(row[fieldValue ?? "value"]);
940
+ value?.push(row);
941
941
  handChange([...value]);
942
942
  } else {
943
- handChange([row[fieldValue ?? "value"]]);
943
+ handChange([row]);
944
944
  }
945
945
  }
946
946
  } else {
@@ -992,7 +992,7 @@ var SelectTable = forwardRef((props, ref) => {
992
992
  if (isSelectedAll) {
993
993
  handChange([]);
994
994
  } else {
995
- handChange([...(optionsLoad ? optionsLoad : options).map((x) => x[fieldValue ?? "value"])]);
995
+ handChange([...optionsLoad ? optionsLoad : options]);
996
996
  }
997
997
  e.stopPropagation();
998
998
  }
@@ -1009,7 +1009,7 @@ var SelectTable = forwardRef((props, ref) => {
1009
1009
  })
1010
1010
  ] }) }),
1011
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 === row[fieldValue ?? "value"]);
1012
+ const isSelected = isMulti && value?.some((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
1013
1013
  return /* @__PURE__ */ jsx5(RenderElement, { isSelected: isSelected ?? false, indexRow, row }, `select-table-${indexRow}`);
1014
1014
  }) }) })
1015
1015
  ] }),
@@ -1059,13 +1059,10 @@ var SelectTable = forwardRef((props, ref) => {
1059
1059
  children: [
1060
1060
  /* @__PURE__ */ jsxs5("div", { className: "select-table-container", children: [
1061
1061
  isMulti ? /* @__PURE__ */ jsx5(Fragment6, { children: /* @__PURE__ */ jsx5("div", { className: classnames3("select-value is-mutil", { "d-none": searchTerm }), children: value?.map((ele, index) => {
1062
- const element = (optionsLoad ? optionsLoad : options).find((e) => e[fieldValue ?? "value"] === ele);
1063
- if (element) {
1064
- return /* @__PURE__ */ jsxs5("span", { children: [
1065
- index === 0 ? "" : ", ",
1066
- formatOptionLabel ? formatOptionLabel(element) : element[fieldLabel ?? "label"]
1067
- ] }, index);
1068
- }
1062
+ return /* @__PURE__ */ jsxs5("span", { children: [
1063
+ index === 0 ? "" : ", ",
1064
+ formatOptionLabel ? formatOptionLabel(ele) : ele[fieldLabel ?? "label"]
1065
+ ] }, index);
1069
1066
  }) }) }) : /* @__PURE__ */ jsx5(Fragment6, { children: /* @__PURE__ */ jsxs5("div", { className: classnames3("select-value", { "d-none": searchTerm }), children: [
1070
1067
  value ? formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? "label"] : "",
1071
1068
  " "
@@ -1082,7 +1079,7 @@ var SelectTable = forwardRef((props, ref) => {
1082
1079
  onPaste: (e) => onPaste && !dropdownOpen && onPaste(e),
1083
1080
  onChange: (val) => {
1084
1081
  if (val.target.value) {
1085
- if (!isMulti && loadOptions && val.target.value) {
1082
+ if (loadOptions && val.target.value) {
1086
1083
  setIsLoading(true);
1087
1084
  loadOptions(val.target.value, callbackLoadOption);
1088
1085
  } else {
@@ -3113,7 +3110,7 @@ var TableEdit = forwardRef4((props, ref) => {
3113
3110
  optionsSelect = col.selectSettings?.options ? col.selectSettings?.validateOption ? col.selectSettings?.options.filter((item) => col.selectSettings?.validateOption(item, row)) : col.selectSettings?.options : [];
3114
3111
  }
3115
3112
  if (col.selectSettings?.isMulti) {
3116
- valueSelect = row[col.field];
3113
+ valueSelect = optionsSelect.filter((x) => row[col.field].some((y) => x[col.selectSettings?.fieldValue ?? "value"] === y));
3117
3114
  } else {
3118
3115
  valueSelect = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? optionsSelect?.find((val) => val[col.selectSettings?.fieldValue ?? "value"] === row[col.field]) : "";
3119
3116
  if (!valueSelect && col.selectSettings?.defaultValue) {
@@ -3129,10 +3126,23 @@ var TableEdit = forwardRef4((props, ref) => {
3129
3126
  rowData: row,
3130
3127
  onChange: (val) => {
3131
3128
  if (col.selectSettings?.isMulti) {
3132
- row[col.field] = !isNullOrUndefined(val) ? val : [];
3129
+ row[col.field] = (val?.length ?? 0) > 0 ? val.map((item) => item[col.selectSettings?.fieldValue ?? "value"]) : [];
3133
3130
  } else {
3134
3131
  row[col.field] = !isNullOrUndefined(val) ? val[col.selectSettings?.fieldValue ?? "value"] : void 0;
3135
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
+ }
3136
3146
  if (col.callback) {
3137
3147
  col.callback(val, indexRow);
3138
3148
  }
@@ -3156,6 +3166,7 @@ var TableEdit = forwardRef4((props, ref) => {
3156
3166
  maxHeight: col.selectSettings?.heightPopup ? Number(col.selectSettings?.heightPopup) : void 0,
3157
3167
  menuWidth: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : void 0,
3158
3168
  textAlign: col.textAlign ?? "left",
3169
+ allowCreate: col.selectSettings?.allowCreate,
3159
3170
  onKeyDown: (e) => {
3160
3171
  if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
3161
3172
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-table-edit",
3
- "version": "1.2.37",
3
+ "version": "1.2.39",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",