react-table-edit 0.7.1 → 0.7.3

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 +70 -50
  2. package/dist/index.mjs +70 -50
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -993,8 +993,7 @@ var EditForm = (0, import_react8.forwardRef)((props, ref) => {
993
993
  style: { backgroundColor: "#FFF", textAlign: textAlign ?? "left" },
994
994
  placeholder,
995
995
  innerRef: inputRef,
996
- className: (0, import_classnames6.default)("input-display input-numeric"),
997
- invalid,
996
+ className: (0, import_classnames6.default)("input-display input-numeric", { "is-invalid": invalid }),
998
997
  value: displayValue,
999
998
  onClick: handleOnClick,
1000
999
  onKeyDown: (e) => handleOnKeyDown(e),
@@ -1681,7 +1680,9 @@ var SelectTable = (0, import_react12.forwardRef)((props, ref) => {
1681
1680
  flag = true;
1682
1681
  } else if (e.code === "Escape" || e.code === "Space") {
1683
1682
  if (dropdownOpen) {
1684
- onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
1683
+ if ((optionsLoad ? optionsLoad : options)[indexFocus]) {
1684
+ onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
1685
+ }
1685
1686
  }
1686
1687
  if (!searchTerm) {
1687
1688
  handleOpenClose();
@@ -2007,6 +2008,7 @@ var SelectTable = (0, import_react12.forwardRef)((props, ref) => {
2007
2008
  isOpen: dropdownOpen,
2008
2009
  toggle: () => {
2009
2010
  },
2011
+ onMouseDown: (e) => e.preventDefault(),
2010
2012
  children: [
2011
2013
  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
2012
2014
  import_reactstrap8.DropdownToggle,
@@ -2071,7 +2073,7 @@ var SelectTable = (0, import_react12.forwardRef)((props, ref) => {
2071
2073
  children: /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.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" }) })
2072
2074
  }
2073
2075
  ),
2074
- !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "select-table-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) })
2076
+ !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "select-table-indicator", onMouseDown: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) })
2075
2077
  ]
2076
2078
  }
2077
2079
  ),
@@ -3074,7 +3076,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
3074
3076
  const column = contentColumns[col + index];
3075
3077
  if (column) {
3076
3078
  if (column.visible !== false) {
3077
- return column;
3079
+ return { ...column };
3078
3080
  } else {
3079
3081
  return getColumn(col, index + 1);
3080
3082
  }
@@ -3083,68 +3085,86 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
3083
3085
  };
3084
3086
  const pasteDataFromExcel = async (row, col, e) => {
3085
3087
  const clipboard = (e.clipboardData || window.Clipboard).getData("text");
3086
- const arrayRow = clipboard.trimEnd().split("\n");
3088
+ const rowsClipboard = clipboard.trimEnd().split("\n");
3087
3089
  setIndexFocus(void 0);
3088
- for (let indexRow = 0; indexRow < arrayRow.length; indexRow++) {
3089
- const item = arrayRow[indexRow];
3090
- const arrayCol = item.trimEnd().split(" ");
3091
- let dataRow = dataSource[row + indexRow];
3092
- if (!dataRow) {
3093
- dataRow = { ...defaultValue };
3094
- dataSource.push(dataRow);
3095
- }
3096
- for (let index = 0; index < arrayCol.length; index++) {
3097
- const stringData = arrayCol[index];
3090
+ if (rowsClipboard.length > 0) {
3091
+ const columnsDataChange = [];
3092
+ for (let index = 0; index < rowsClipboard[0].trimEnd().split(" ").length; index++) {
3093
+ const stringData = [];
3094
+ rowsClipboard.forEach((element) => {
3095
+ if (element.trimEnd().split(" ")[index]) {
3096
+ stringData.push(element.trimEnd().split(" ")[index].toString().trim());
3097
+ }
3098
+ });
3098
3099
  const column = getColumn(col, index);
3099
3100
  if (column) {
3100
3101
  if ((!column.disabledCondition || !column.disabledCondition(row)) && column.editEnable) {
3101
3102
  if (column.onPaste) {
3102
- const rs = await column.onPaste(stringData, indexRow, row);
3103
+ const rs = await column.onPaste(stringData.join(","), 0, row);
3103
3104
  if (rs) {
3104
- dataRow = rs.dataRow;
3105
- dataRow[column.field] = stringData;
3106
- if (column.callback) {
3107
- column.callback(rs.value, indexRow);
3108
- }
3109
- } else {
3110
- notificationError(t("PasteExcelNotExist", { index: row + indexRow + 1, field: t(column.headerText ?? ""), value: stringData }));
3105
+ column.resultValidate = rs;
3111
3106
  }
3112
- } else {
3113
- if (column.editType === "date") {
3114
- const date = new Date(stringData);
3115
- if (!isNaN(date.getTime())) {
3116
- dataRow[column.field] = date;
3117
- } else {
3118
- notificationError(t("PasteExcelIncorrectFormat", { index: row + indexRow + 1, field: t(column.headerText ?? ""), value: stringData }));
3119
- }
3120
- } else if (column.editType === "numeric") {
3121
- const number = Number(stringData);
3122
- if (!isNaN(number)) {
3123
- dataRow[column.field] = number;
3124
- } else {
3125
- notificationError(t("PasteExcelIncorrectFormat", { index: row + indexRow + 1, field: t(column.headerText ?? ""), value: stringData }));
3126
- }
3127
- } else if (column.editType?.includes("select") && !column.selectSettings?.loadOptions) {
3128
- let optionSelect = [];
3129
- if (column.selectSettings?.optionsField) {
3130
- optionSelect = dataRow[column.selectSettings?.optionsField] ? dataRow[column.selectSettings?.optionsField] : [];
3131
- } else {
3132
- optionSelect = column.selectSettings?.options ? column.selectSettings?.validateOption ? column.selectSettings?.options.filter((item2) => column.selectSettings?.validateOption(item2, row)) : column.selectSettings?.options : [];
3133
- }
3134
- let valueAsyncSelect = !isNullOrUndefined(dataRow[column.field]) && dataRow[column.field] !== "" ? optionSelect?.find((val) => val[column.selectSettings?.fieldValue ?? "value"] === dataRow[column.field]) : void 0;
3135
- if (valueAsyncSelect) {
3107
+ }
3108
+ }
3109
+ }
3110
+ columnsDataChange.push(column);
3111
+ }
3112
+ for (let indexRow = 0; indexRow < rowsClipboard.length; indexRow++) {
3113
+ const item = rowsClipboard[indexRow];
3114
+ const colsClipboard = item.trimEnd().split(" ");
3115
+ let dataRow = dataSource[row + indexRow];
3116
+ if (!dataRow) {
3117
+ dataRow = { ...defaultValue };
3118
+ dataSource.push(dataRow);
3119
+ }
3120
+ for (let index = 0; index < colsClipboard.length; index++) {
3121
+ const stringData = colsClipboard[index].toString().trim();
3122
+ const column = columnsDataChange[index];
3123
+ if (column) {
3124
+ if ((!column.disabledCondition || !column.disabledCondition(row)) && column.editEnable) {
3125
+ if (column.onPaste && column.resultValidate) {
3126
+ const rs = column.resultValidate.find((item2) => item2[column.selectSettings?.fieldValue] === stringData);
3127
+ if (rs) {
3136
3128
  dataRow[column.field] = stringData;
3129
+ if (column.callback) {
3130
+ column.callback(rs, row + indexRow);
3131
+ }
3137
3132
  } else {
3138
3133
  notificationError(t("PasteExcelNotExist", { index: row + indexRow + 1, field: t(column.headerText ?? ""), value: stringData }));
3139
3134
  }
3140
3135
  } else {
3141
- dataRow[column.field] = stringData;
3136
+ if (column.editType === "date") {
3137
+ const date = new Date(stringData);
3138
+ if (!isNaN(date.getTime())) {
3139
+ dataRow[column.field] = date;
3140
+ if (column.callback) {
3141
+ column.callback(date, row + indexRow);
3142
+ }
3143
+ } else {
3144
+ notificationError(t("PasteExcelIncorrectFormat", { index: row + indexRow + 1, field: t(column.headerText ?? ""), value: stringData }));
3145
+ }
3146
+ } else if (column.editType === "numeric") {
3147
+ const number = Number(stringData);
3148
+ if (!isNaN(number)) {
3149
+ dataRow[column.field] = number;
3150
+ if (column.callback) {
3151
+ column.callback(number, row + indexRow);
3152
+ }
3153
+ } else {
3154
+ notificationError(t("PasteExcelIncorrectFormat", { index: row + indexRow + 1, field: t(column.headerText ?? ""), value: stringData }));
3155
+ }
3156
+ } else {
3157
+ dataRow[column.field] = stringData;
3158
+ if (column.callback) {
3159
+ column.callback(stringData, row + indexRow);
3160
+ }
3161
+ }
3142
3162
  }
3143
3163
  }
3144
3164
  }
3145
3165
  }
3166
+ rowChange(dataRow, row + indexRow, "");
3146
3167
  }
3147
- rowChange(dataRow, row + indexRow, "");
3148
3168
  }
3149
3169
  changeDataSource(dataSource);
3150
3170
  };
package/dist/index.mjs CHANGED
@@ -950,8 +950,7 @@ var EditForm = forwardRef((props, ref) => {
950
950
  style: { backgroundColor: "#FFF", textAlign: textAlign ?? "left" },
951
951
  placeholder,
952
952
  innerRef: inputRef,
953
- className: classNames2("input-display input-numeric"),
954
- invalid,
953
+ className: classNames2("input-display input-numeric", { "is-invalid": invalid }),
955
954
  value: displayValue,
956
955
  onClick: handleOnClick,
957
956
  onKeyDown: (e) => handleOnKeyDown(e),
@@ -1647,7 +1646,9 @@ var SelectTable = forwardRef2((props, ref) => {
1647
1646
  flag = true;
1648
1647
  } else if (e.code === "Escape" || e.code === "Space") {
1649
1648
  if (dropdownOpen) {
1650
- onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
1649
+ if ((optionsLoad ? optionsLoad : options)[indexFocus]) {
1650
+ onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
1651
+ }
1651
1652
  }
1652
1653
  if (!searchTerm) {
1653
1654
  handleOpenClose();
@@ -1973,6 +1974,7 @@ var SelectTable = forwardRef2((props, ref) => {
1973
1974
  isOpen: dropdownOpen,
1974
1975
  toggle: () => {
1975
1976
  },
1977
+ onMouseDown: (e) => e.preventDefault(),
1976
1978
  children: [
1977
1979
  /* @__PURE__ */ jsxs12(
1978
1980
  DropdownToggle2,
@@ -2037,7 +2039,7 @@ var SelectTable = forwardRef2((props, ref) => {
2037
2039
  children: /* @__PURE__ */ jsx12("svg", { height: "20", width: "20", color: "#c4c4c4", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ jsx12("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" }) })
2038
2040
  }
2039
2041
  ),
2040
- !isDisabled && /* @__PURE__ */ jsx12("div", { className: "select-table-indicator", children: /* @__PURE__ */ jsx12("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx12("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) })
2042
+ !isDisabled && /* @__PURE__ */ jsx12("div", { className: "select-table-indicator", onMouseDown: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx12("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx12("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) })
2041
2043
  ]
2042
2044
  }
2043
2045
  ),
@@ -3040,7 +3042,7 @@ var TableEdit = forwardRef3((props, ref) => {
3040
3042
  const column = contentColumns[col + index];
3041
3043
  if (column) {
3042
3044
  if (column.visible !== false) {
3043
- return column;
3045
+ return { ...column };
3044
3046
  } else {
3045
3047
  return getColumn(col, index + 1);
3046
3048
  }
@@ -3049,68 +3051,86 @@ var TableEdit = forwardRef3((props, ref) => {
3049
3051
  };
3050
3052
  const pasteDataFromExcel = async (row, col, e) => {
3051
3053
  const clipboard = (e.clipboardData || window.Clipboard).getData("text");
3052
- const arrayRow = clipboard.trimEnd().split("\n");
3054
+ const rowsClipboard = clipboard.trimEnd().split("\n");
3053
3055
  setIndexFocus(void 0);
3054
- for (let indexRow = 0; indexRow < arrayRow.length; indexRow++) {
3055
- const item = arrayRow[indexRow];
3056
- const arrayCol = item.trimEnd().split(" ");
3057
- let dataRow = dataSource[row + indexRow];
3058
- if (!dataRow) {
3059
- dataRow = { ...defaultValue };
3060
- dataSource.push(dataRow);
3061
- }
3062
- for (let index = 0; index < arrayCol.length; index++) {
3063
- const stringData = arrayCol[index];
3056
+ if (rowsClipboard.length > 0) {
3057
+ const columnsDataChange = [];
3058
+ for (let index = 0; index < rowsClipboard[0].trimEnd().split(" ").length; index++) {
3059
+ const stringData = [];
3060
+ rowsClipboard.forEach((element) => {
3061
+ if (element.trimEnd().split(" ")[index]) {
3062
+ stringData.push(element.trimEnd().split(" ")[index].toString().trim());
3063
+ }
3064
+ });
3064
3065
  const column = getColumn(col, index);
3065
3066
  if (column) {
3066
3067
  if ((!column.disabledCondition || !column.disabledCondition(row)) && column.editEnable) {
3067
3068
  if (column.onPaste) {
3068
- const rs = await column.onPaste(stringData, indexRow, row);
3069
+ const rs = await column.onPaste(stringData.join(","), 0, row);
3069
3070
  if (rs) {
3070
- dataRow = rs.dataRow;
3071
- dataRow[column.field] = stringData;
3072
- if (column.callback) {
3073
- column.callback(rs.value, indexRow);
3074
- }
3075
- } else {
3076
- notificationError(t("PasteExcelNotExist", { index: row + indexRow + 1, field: t(column.headerText ?? ""), value: stringData }));
3071
+ column.resultValidate = rs;
3077
3072
  }
3078
- } else {
3079
- if (column.editType === "date") {
3080
- const date = new Date(stringData);
3081
- if (!isNaN(date.getTime())) {
3082
- dataRow[column.field] = date;
3083
- } else {
3084
- notificationError(t("PasteExcelIncorrectFormat", { index: row + indexRow + 1, field: t(column.headerText ?? ""), value: stringData }));
3085
- }
3086
- } else if (column.editType === "numeric") {
3087
- const number = Number(stringData);
3088
- if (!isNaN(number)) {
3089
- dataRow[column.field] = number;
3090
- } else {
3091
- notificationError(t("PasteExcelIncorrectFormat", { index: row + indexRow + 1, field: t(column.headerText ?? ""), value: stringData }));
3092
- }
3093
- } else if (column.editType?.includes("select") && !column.selectSettings?.loadOptions) {
3094
- let optionSelect = [];
3095
- if (column.selectSettings?.optionsField) {
3096
- optionSelect = dataRow[column.selectSettings?.optionsField] ? dataRow[column.selectSettings?.optionsField] : [];
3097
- } else {
3098
- optionSelect = column.selectSettings?.options ? column.selectSettings?.validateOption ? column.selectSettings?.options.filter((item2) => column.selectSettings?.validateOption(item2, row)) : column.selectSettings?.options : [];
3099
- }
3100
- let valueAsyncSelect = !isNullOrUndefined(dataRow[column.field]) && dataRow[column.field] !== "" ? optionSelect?.find((val) => val[column.selectSettings?.fieldValue ?? "value"] === dataRow[column.field]) : void 0;
3101
- if (valueAsyncSelect) {
3073
+ }
3074
+ }
3075
+ }
3076
+ columnsDataChange.push(column);
3077
+ }
3078
+ for (let indexRow = 0; indexRow < rowsClipboard.length; indexRow++) {
3079
+ const item = rowsClipboard[indexRow];
3080
+ const colsClipboard = item.trimEnd().split(" ");
3081
+ let dataRow = dataSource[row + indexRow];
3082
+ if (!dataRow) {
3083
+ dataRow = { ...defaultValue };
3084
+ dataSource.push(dataRow);
3085
+ }
3086
+ for (let index = 0; index < colsClipboard.length; index++) {
3087
+ const stringData = colsClipboard[index].toString().trim();
3088
+ const column = columnsDataChange[index];
3089
+ if (column) {
3090
+ if ((!column.disabledCondition || !column.disabledCondition(row)) && column.editEnable) {
3091
+ if (column.onPaste && column.resultValidate) {
3092
+ const rs = column.resultValidate.find((item2) => item2[column.selectSettings?.fieldValue] === stringData);
3093
+ if (rs) {
3102
3094
  dataRow[column.field] = stringData;
3095
+ if (column.callback) {
3096
+ column.callback(rs, row + indexRow);
3097
+ }
3103
3098
  } else {
3104
3099
  notificationError(t("PasteExcelNotExist", { index: row + indexRow + 1, field: t(column.headerText ?? ""), value: stringData }));
3105
3100
  }
3106
3101
  } else {
3107
- dataRow[column.field] = stringData;
3102
+ if (column.editType === "date") {
3103
+ const date = new Date(stringData);
3104
+ if (!isNaN(date.getTime())) {
3105
+ dataRow[column.field] = date;
3106
+ if (column.callback) {
3107
+ column.callback(date, row + indexRow);
3108
+ }
3109
+ } else {
3110
+ notificationError(t("PasteExcelIncorrectFormat", { index: row + indexRow + 1, field: t(column.headerText ?? ""), value: stringData }));
3111
+ }
3112
+ } else if (column.editType === "numeric") {
3113
+ const number = Number(stringData);
3114
+ if (!isNaN(number)) {
3115
+ dataRow[column.field] = number;
3116
+ if (column.callback) {
3117
+ column.callback(number, row + indexRow);
3118
+ }
3119
+ } else {
3120
+ notificationError(t("PasteExcelIncorrectFormat", { index: row + indexRow + 1, field: t(column.headerText ?? ""), value: stringData }));
3121
+ }
3122
+ } else {
3123
+ dataRow[column.field] = stringData;
3124
+ if (column.callback) {
3125
+ column.callback(stringData, row + indexRow);
3126
+ }
3127
+ }
3108
3128
  }
3109
3129
  }
3110
3130
  }
3111
3131
  }
3132
+ rowChange(dataRow, row + indexRow, "");
3112
3133
  }
3113
- rowChange(dataRow, row + indexRow, "");
3114
3134
  }
3115
3135
  changeDataSource(dataSource);
3116
3136
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-table-edit",
3
3
  "license": "MIT",
4
- "version": "0.7.1",
4
+ "version": "0.7.3",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",