react-table-edit 0.4.5 → 0.4.7

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { ReactNode, Dispatch, SetStateAction } from 'react';
 import { TFunction } from 'react-i18next';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type ITextAlign = 'center' | 'left' | 'right';
 type IEditType = 'text' | 'numeric' | 'asyncSelect' | 'datetime' | 'selectMulti' | 'selectTree' | 'date' | 'select' | 'checkbox' | 'form' | 'color';
@@ -184,4 +185,14 @@ declare const objSymbolThousand: any;
 declare const formartNumberic: (str: string | number, decimalSeparator: string, thousandSeparator: string, fraction?: number, isDone?: boolean) => string;
 declare const roundNumber: (num: number, fraction: number) => number;
 
-export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditPaging, type IFTableEditProps, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFToolbarOptions, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };
+type IFDataProps = {
+    buttonWidth?: number;
+    tabParent?: boolean;
+    tabChild?: boolean;
+    resourceCodeParent?: string;
+    resourceCode: string;
+    resources: any[];
+};
+declare const TabsMenuComponent: ({ buttonWidth, tabParent, tabChild, resourceCodeParent, resources, resourceCode }: IFDataProps) => react_jsx_runtime.JSX.Element;
+
+export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditPaging, type IFTableEditProps, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFToolbarOptions, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TabsMenuComponent, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { ReactNode, Dispatch, SetStateAction } from 'react';
 import { TFunction } from 'react-i18next';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type ITextAlign = 'center' | 'left' | 'right';
 type IEditType = 'text' | 'numeric' | 'asyncSelect' | 'datetime' | 'selectMulti' | 'selectTree' | 'date' | 'select' | 'checkbox' | 'form' | 'color';
@@ -184,4 +185,14 @@ declare const objSymbolThousand: any;
 declare const formartNumberic: (str: string | number, decimalSeparator: string, thousandSeparator: string, fraction?: number, isDone?: boolean) => string;
 declare const roundNumber: (num: number, fraction: number) => number;
 
-export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditPaging, type IFTableEditProps, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFToolbarOptions, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };
+type IFDataProps = {
+    buttonWidth?: number;
+    tabParent?: boolean;
+    tabChild?: boolean;
+    resourceCodeParent?: string;
+    resourceCode: string;
+    resources: any[];
+};
+declare const TabsMenuComponent: ({ buttonWidth, tabParent, tabChild, resourceCodeParent, resources, resourceCode }: IFDataProps) => react_jsx_runtime.JSX.Element;
+
+export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditPaging, type IFTableEditProps, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFToolbarOptions, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TabsMenuComponent, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // index.ts
 var Table_edit_exports = {};
 __export(Table_edit_exports, {
+  TabsMenuComponent: () => TabsMenuComponent,
   default: () => Table_edit_default,
   formartNumberic: () => formartNumberic,
   generateUUID: () => generateUUID,
@@ -2986,13 +2987,117 @@ var table_default = TableEdit;
 var import_becoxy_icons5 = require("becoxy-icons");
 var import_classnames11 = __toESM(require("classnames"));
 var import_react13 = require("react");
+var import_react_router_dom = require("react-router-dom");
 var import_reactstrap9 = require("reactstrap");
 var import_jsx_runtime13 = require("react/jsx-runtime");
+var TabsMenuComponent = ({
+  buttonWidth,
+  tabParent,
+  tabChild,
+  resourceCodeParent,
+  resources,
+  resourceCode
+}) => {
+  const [dataMenu, setDataMenu] = (0, import_react13.useState)([]);
+  const [openMenu, setOpenMenu] = (0, import_react13.useState)(false);
+  const [url, setUrl] = (0, import_react13.useState)("");
+  const [contentWidth, setContentWidth] = (0, import_react13.useState)(0);
+  const [componentWidth, setComponentWidth] = (0, import_react13.useState)(0);
+  const [scrollPosition, setScrollPosition] = (0, import_react13.useState)(0);
+  const handleWindowResize = () => {
+    const tabEle = document.getElementById(`tab-component-${resourceCode}`);
+    const tabContent = document.getElementById(`content-component-${resourceCode}`);
+    if (tabEle && tabContent) {
+      setComponentWidth(tabEle?.offsetWidth ?? 0);
+      setContentWidth(tabContent?.offsetWidth ?? 0);
+    }
+  };
+  (0, import_react13.useEffect)(() => {
+    setUrl(window.location.pathname);
+    window.addEventListener("resize", handleWindowResize);
+    setTimeout(() => {
+      const tabEle = document.getElementById(`tab-component-${resourceCode}`);
+      const tabContent = document.getElementById(`content-component-${resourceCode}`);
+      if (tabEle && tabContent) {
+        setComponentWidth(tabEle?.offsetWidth ?? 0);
+        setContentWidth(tabContent?.offsetWidth ?? 0);
+      }
+    }, 100);
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
+  (0, import_react13.useEffect)(() => {
+    const item = resources?.find((x) => x.code === (resourceCodeParent ? resourceCodeParent : resourceCode));
+    if (item) {
+      if (resourceCodeParent) {
+        const data = item.children?.find((x) => x.code === resourceCode);
+        if (data) {
+          setDataMenu([...data.children]);
+        }
+      } else {
+        setDataMenu([...item.children]);
+      }
+    }
+  }, [resources]);
+  const toggleMenu = () => {
+    setOpenMenu(!openMenu);
+  };
+  const handleScroll = (scrollAmount) => {
+    let newScrollPosition = scrollPosition + scrollAmount;
+    const tabEle = document.getElementById(`tab-component-${resourceCode}`);
+    const tabContent = document.getElementById(`content-component-${resourceCode}`);
+    if (tabEle && tabContent && tabContent?.offsetWidth - tabEle?.offsetWidth - newScrollPosition > -200) {
+      if (newScrollPosition < 0) {
+        newScrollPosition = 0;
+      }
+      setScrollPosition(newScrollPosition);
+      tabEle.scrollLeft = newScrollPosition;
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: (0, import_classnames11.default)("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "div",
+      {
+        onClick: () => handleScroll(-200),
+        className: (0, import_classnames11.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_becoxy_icons5.ChevronLeft, {})
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
+      if (item?.resAttributes?.IS_MENU === "1") {
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_reactstrap9.UncontrolledDropdown, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap9.DropdownToggle, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: item.name }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap9.DropdownMenu, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap9.DropdownItem, { style: { borderRadius: "5px", margin: "0 0.5rem", width: "95%", padding: "0.5rem 0.5rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_router_dom.Link, { to: x.url, style: { display: "block", width: "100%" }, children: x.name }) }, x.code)) })
+        ] }, item.code);
+      } else {
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          import_react_router_dom.Link,
+          {
+            to: item.url,
+            className: (0, import_classnames11.default)("tab-custom-item", { active: item.url === url || tabParent && url?.split("/").length > 3 && item.url.startsWith(url.substring(0, url.lastIndexOf("/"))) }),
+            children: item.name
+          },
+          item.code
+        );
+      }
+    }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "div",
+      {
+        onClick: () => handleScroll(200),
+        className: (0, import_classnames11.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_becoxy_icons5.ChevronRight, {})
+      }
+    )
+  ] }) });
+};
 
 // index.ts
 var Table_edit_default = table_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  TabsMenuComponent,
   formartNumberic,
   generateUUID,
   isNullOrUndefined,

package/dist/index.mjs

@@ -2945,12 +2945,116 @@ var table_default = TableEdit;
 import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "becoxy-icons";
 import classNames5 from "classnames";
 import { Fragment as Fragment14, useEffect as useEffect6, useState as useState6 } from "react";
+import { Link } from "react-router-dom";
 import { DropdownItem as DropdownItem2, DropdownMenu as DropdownMenu3, DropdownToggle as DropdownToggle3, UncontrolledDropdown as UncontrolledDropdown2 } from "reactstrap";
 import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+var TabsMenuComponent = ({
+  buttonWidth,
+  tabParent,
+  tabChild,
+  resourceCodeParent,
+  resources,
+  resourceCode
+}) => {
+  const [dataMenu, setDataMenu] = useState6([]);
+  const [openMenu, setOpenMenu] = useState6(false);
+  const [url, setUrl] = useState6("");
+  const [contentWidth, setContentWidth] = useState6(0);
+  const [componentWidth, setComponentWidth] = useState6(0);
+  const [scrollPosition, setScrollPosition] = useState6(0);
+  const handleWindowResize = () => {
+    const tabEle = document.getElementById(`tab-component-${resourceCode}`);
+    const tabContent = document.getElementById(`content-component-${resourceCode}`);
+    if (tabEle && tabContent) {
+      setComponentWidth(tabEle?.offsetWidth ?? 0);
+      setContentWidth(tabContent?.offsetWidth ?? 0);
+    }
+  };
+  useEffect6(() => {
+    setUrl(window.location.pathname);
+    window.addEventListener("resize", handleWindowResize);
+    setTimeout(() => {
+      const tabEle = document.getElementById(`tab-component-${resourceCode}`);
+      const tabContent = document.getElementById(`content-component-${resourceCode}`);
+      if (tabEle && tabContent) {
+        setComponentWidth(tabEle?.offsetWidth ?? 0);
+        setContentWidth(tabContent?.offsetWidth ?? 0);
+      }
+    }, 100);
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
+  useEffect6(() => {
+    const item = resources?.find((x) => x.code === (resourceCodeParent ? resourceCodeParent : resourceCode));
+    if (item) {
+      if (resourceCodeParent) {
+        const data = item.children?.find((x) => x.code === resourceCode);
+        if (data) {
+          setDataMenu([...data.children]);
+        }
+      } else {
+        setDataMenu([...item.children]);
+      }
+    }
+  }, [resources]);
+  const toggleMenu = () => {
+    setOpenMenu(!openMenu);
+  };
+  const handleScroll = (scrollAmount) => {
+    let newScrollPosition = scrollPosition + scrollAmount;
+    const tabEle = document.getElementById(`tab-component-${resourceCode}`);
+    const tabContent = document.getElementById(`content-component-${resourceCode}`);
+    if (tabEle && tabContent && tabContent?.offsetWidth - tabEle?.offsetWidth - newScrollPosition > -200) {
+      if (newScrollPosition < 0) {
+        newScrollPosition = 0;
+      }
+      setScrollPosition(newScrollPosition);
+      tabEle.scrollLeft = newScrollPosition;
+    }
+  };
+  return /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsxs12("div", { className: classNames5("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
+    /* @__PURE__ */ jsx13(
+      "div",
+      {
+        onClick: () => handleScroll(-200),
+        className: classNames5("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
+        children: /* @__PURE__ */ jsx13(ChevronLeft2, {})
+      }
+    ),
+    /* @__PURE__ */ jsx13("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ jsx13("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
+      if (item?.resAttributes?.IS_MENU === "1") {
+        return /* @__PURE__ */ jsxs12(UncontrolledDropdown2, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
+          /* @__PURE__ */ jsx13(DropdownToggle3, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ jsx13("div", { children: item.name }) }),
+          /* @__PURE__ */ jsx13(DropdownMenu3, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ jsx13(DropdownItem2, { style: { borderRadius: "5px", margin: "0 0.5rem", width: "95%", padding: "0.5rem 0.5rem" }, children: /* @__PURE__ */ jsx13(Link, { to: x.url, style: { display: "block", width: "100%" }, children: x.name }) }, x.code)) })
+        ] }, item.code);
+      } else {
+        return /* @__PURE__ */ jsx13(
+          Link,
+          {
+            to: item.url,
+            className: classNames5("tab-custom-item", { active: item.url === url || tabParent && url?.split("/").length > 3 && item.url.startsWith(url.substring(0, url.lastIndexOf("/"))) }),
+            children: item.name
+          },
+          item.code
+        );
+      }
+    }) }) }),
+    /* @__PURE__ */ jsx13(
+      "div",
+      {
+        onClick: () => handleScroll(200),
+        className: classNames5("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
+        children: /* @__PURE__ */ jsx13(ChevronRight2, {})
+      }
+    )
+  ] }) });
+};
 
 // index.ts
 var Table_edit_default = table_default;
 export {
+  TabsMenuComponent,
   Table_edit_default as default,
   formartNumberic,
   generateUUID,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-table-edit",
   "license": "MIT",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -32,6 +32,7 @@
     "classnames": "2.3.1",
     "moment": "^2.29.3",
     "react": "^18.1.0",
+    "react-router-dom": "^6.3.0",
     "react-hook-form": "7.43.9",
     "react-hot-toast": "2.2.0",
     "react-i18next": "^11.16.9",