react-table-edit 1.2.7 → 1.2.9

package/dist/index.d.mts

@@ -49,6 +49,7 @@ type Props$1 = {
     columns?: IFColumnSelectTable[];
     isClearable?: boolean;
     isDisabled?: boolean;
+    allowCreate?: boolean;
     showFooter?: boolean;
     onPaste?: any;
     formatSetting?: IFTableSelectFormat;

package/dist/index.d.ts

@@ -49,6 +49,7 @@ type Props$1 = {
     columns?: IFColumnSelectTable[];
     isClearable?: boolean;
     isDisabled?: boolean;
+    allowCreate?: boolean;
     showFooter?: boolean;
     onPaste?: any;
     formatSetting?: IFTableSelectFormat;

package/dist/index.js

@@ -635,11 +635,13 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
     showFooter,
     footerComponent,
     formatSetting,
+    allowCreate,
     onPaste
   } = props;
   const selectTableRef = (0, import_react6.useRef)();
   const selectMenuTableRef = (0, import_react6.useRef)();
   const inputRef = (0, import_react6.useRef)();
+  const [haveCreate, setHaveCreate] = (0, import_react6.useState)(false);
   const [dropdownOpen, setDropdownOpen] = (0, import_react6.useState)(false);
   const [indexFocus, setIndexFocus] = (0, import_react6.useState)(-1);
   const [isFocus, setIsFocus] = (0, import_react6.useState)(false);
@@ -857,6 +859,13 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
     setIsLoading(false);
     setOptionsLoad(rs);
   };
+  (0, import_react6.useEffect)(() => {
+    if (optionsLoad?.length === 0) {
+      setHaveCreate(allowCreate ?? false);
+    } else {
+      setHaveCreate(false);
+    }
+  }, [optionsLoad]);
   (0, import_react6.useEffect)(() => {
     if (!searchTerm) {
       setOptionsLoad(void 0);
@@ -1015,7 +1024,8 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
           return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderElement, { isSelected: isSelected ?? false, indexRow, row }, `select-table-${indexRow}`);
         }) }) })
       ] }),
-      ((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0 && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "r-no-data", children: [
+      ((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0 && haveCreate && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "r-no-data", children: `Create "${searchTerm}"` }),
+      ((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0 && !haveCreate && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "r-no-data", children: [
         /* @__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: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }),
           /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [
@@ -2802,8 +2812,8 @@ var SelectTableTree = (0, import_react15.forwardRef)((props, ref) => {
                         e.preventDefault();
                       }
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "r-select-grid", children: [
-                      /* @__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, {}) }),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "r-select-grid r-select-tree-grid", children: [
+                      /* @__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, {}) }),
                       /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: (0, import_classnames13.default)("r-select-footer", { "d-none": !(showFooter === true || handleAdd || isMulti) }), children: [
                         /* @__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: [
                           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_becoxy_icons6.Plus, { className: "me-50", fontSize: 16 }),
@@ -2991,11 +3001,13 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
       setRefreshRow(false);
     }, 5);
   };
-  const handleDataChange = (row, col, indexRow) => {
+  const handleDataChange = async (row, col, indexRow) => {
     if (rowChange) {
-      rowChange(row, indexRow, col.field);
+      await rowChange(row, indexRow, col.field);
+      changeDataSource(dataSource);
+    } else {
+      changeDataSource(dataSource);
     }
-    changeDataSource(dataSource);
     if (dataSourceChange) {
       dataSourceChange(dataSource);
     }

package/dist/index.mjs

@@ -598,11 +598,13 @@ var SelectTable = forwardRef((props, ref) => {
     showFooter,
     footerComponent,
     formatSetting,
+    allowCreate,
     onPaste
   } = props;
   const selectTableRef = useRef();
   const selectMenuTableRef = useRef();
   const inputRef = useRef();
+  const [haveCreate, setHaveCreate] = useState2(false);
   const [dropdownOpen, setDropdownOpen] = useState2(false);
   const [indexFocus, setIndexFocus] = useState2(-1);
   const [isFocus, setIsFocus] = useState2(false);
@@ -820,6 +822,13 @@ var SelectTable = forwardRef((props, ref) => {
     setIsLoading(false);
     setOptionsLoad(rs);
   };
+  useEffect3(() => {
+    if (optionsLoad?.length === 0) {
+      setHaveCreate(allowCreate ?? false);
+    } else {
+      setHaveCreate(false);
+    }
+  }, [optionsLoad]);
   useEffect3(() => {
     if (!searchTerm) {
       setOptionsLoad(void 0);
@@ -978,7 +987,8 @@ var SelectTable = forwardRef((props, ref) => {
           return /* @__PURE__ */ jsx5(RenderElement, { isSelected: isSelected ?? false, indexRow, row }, `select-table-${indexRow}`);
         }) }) })
       ] }),
-      ((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0 && !isLoading && /* @__PURE__ */ jsxs5("div", { className: "r-no-data", children: [
+      ((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0 && haveCreate && /* @__PURE__ */ jsx5("div", { className: "r-no-data", children: `Create "${searchTerm}"` }),
+      ((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0 && !haveCreate && !isLoading && /* @__PURE__ */ jsxs5("div", { className: "r-no-data", children: [
         /* @__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: [
           /* @__PURE__ */ jsx5("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }),
           /* @__PURE__ */ jsxs5("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [
@@ -2773,8 +2783,8 @@ var SelectTableTree = forwardRef3((props, ref) => {
                         e.preventDefault();
                       }
                     },
-                    children: /* @__PURE__ */ jsxs14("div", { className: "r-select-grid", children: [
-                      /* @__PURE__ */ jsx15("div", { className: "r-select-gridtable", ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight2 }, children: /* @__PURE__ */ jsx15(RenderTable, {}) }),
+                    children: /* @__PURE__ */ jsxs14("div", { className: "r-select-grid r-select-tree-grid", children: [
+                      /* @__PURE__ */ jsx15("div", { className: "r-select-gridtable ", ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight2 }, children: /* @__PURE__ */ jsx15(RenderTable, {}) }),
                       /* @__PURE__ */ jsxs14("div", { className: classnames8("r-select-footer", { "d-none": !(showFooter === true || handleAdd || isMulti) }), children: [
                         /* @__PURE__ */ jsxs14(Button5, { outline: true, color: "primary", onClick: handleAdd, className: classnames8("r-btn d-flex align-items-center", { "d-none": !handleAdd }), children: [
                           /* @__PURE__ */ jsx15(Plus3, { className: "me-50", fontSize: 16 }),
@@ -2962,11 +2972,13 @@ var TableEdit = forwardRef4((props, ref) => {
       setRefreshRow(false);
     }, 5);
   };
-  const handleDataChange = (row, col, indexRow) => {
+  const handleDataChange = async (row, col, indexRow) => {
     if (rowChange) {
-      rowChange(row, indexRow, col.field);
+      await rowChange(row, indexRow, col.field);
+      changeDataSource(dataSource);
+    } else {
+      changeDataSource(dataSource);
     }
-    changeDataSource(dataSource);
     if (dataSourceChange) {
       dataSourceChange(dataSource);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table-edit",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",