react-table-edit 0.4.9 → 0.5.0
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.
- package/dist/index.d.mts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +63 -37
- package/dist/index.mjs +64 -38
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -192,7 +192,9 @@ type IFDataProps = {
|
|
|
192
192
|
resourceCodeParent?: string;
|
|
193
193
|
resourceCode: string;
|
|
194
194
|
resources: any[];
|
|
195
|
+
renderModal?: any;
|
|
196
|
+
windowSize?: any;
|
|
195
197
|
};
|
|
196
|
-
declare const TabsMenuComponent: ({ buttonWidth, tabParent, tabChild, resourceCodeParent, resources, resourceCode }: IFDataProps) => react_jsx_runtime.JSX.Element;
|
|
198
|
+
declare const TabsMenuComponent: ({ buttonWidth, tabParent, tabChild, resourceCodeParent, resources, resourceCode, windowSize, renderModal }: IFDataProps) => react_jsx_runtime.JSX.Element;
|
|
197
199
|
|
|
198
200
|
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
CHANGED
|
@@ -192,7 +192,9 @@ type IFDataProps = {
|
|
|
192
192
|
resourceCodeParent?: string;
|
|
193
193
|
resourceCode: string;
|
|
194
194
|
resources: any[];
|
|
195
|
+
renderModal?: any;
|
|
196
|
+
windowSize?: any;
|
|
195
197
|
};
|
|
196
|
-
declare const TabsMenuComponent: ({ buttonWidth, tabParent, tabChild, resourceCodeParent, resources, resourceCode }: IFDataProps) => react_jsx_runtime.JSX.Element;
|
|
198
|
+
declare const TabsMenuComponent: ({ buttonWidth, tabParent, tabChild, resourceCodeParent, resources, resourceCode, windowSize, renderModal }: IFDataProps) => react_jsx_runtime.JSX.Element;
|
|
197
199
|
|
|
198
200
|
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
CHANGED
|
@@ -2962,14 +2962,19 @@ var TabsMenuComponent = ({
|
|
|
2962
2962
|
tabChild,
|
|
2963
2963
|
resourceCodeParent,
|
|
2964
2964
|
resources,
|
|
2965
|
-
resourceCode
|
|
2965
|
+
resourceCode,
|
|
2966
|
+
windowSize,
|
|
2967
|
+
renderModal
|
|
2966
2968
|
}) => {
|
|
2969
|
+
const navigate = (0, import_react_router_dom.useNavigate)();
|
|
2967
2970
|
const [dataMenu, setDataMenu] = (0, import_react13.useState)([]);
|
|
2968
2971
|
const [openMenu, setOpenMenu] = (0, import_react13.useState)(false);
|
|
2969
2972
|
const [url, setUrl] = (0, import_react13.useState)("");
|
|
2970
2973
|
const [contentWidth, setContentWidth] = (0, import_react13.useState)(0);
|
|
2971
2974
|
const [componentWidth, setComponentWidth] = (0, import_react13.useState)(0);
|
|
2972
2975
|
const [scrollPosition, setScrollPosition] = (0, import_react13.useState)(0);
|
|
2976
|
+
const [dataItem, setDataItem] = (0, import_react13.useState)([]);
|
|
2977
|
+
const [openModal, setOpenModal] = (0, import_react13.useState)({});
|
|
2973
2978
|
const handleWindowResize = () => {
|
|
2974
2979
|
const tabEle = document.getElementById(`tab-component-${resourceCode}`);
|
|
2975
2980
|
const tabContent = document.getElementById(`content-component-${resourceCode}`);
|
|
@@ -2989,6 +2994,7 @@ var TabsMenuComponent = ({
|
|
|
2989
2994
|
setContentWidth(tabContent?.offsetWidth ?? 0);
|
|
2990
2995
|
}
|
|
2991
2996
|
}, 100);
|
|
2997
|
+
window.addEventListener("resize", handleWindowResize);
|
|
2992
2998
|
return () => {
|
|
2993
2999
|
window.removeEventListener("resize", handleWindowResize);
|
|
2994
3000
|
};
|
|
@@ -3021,42 +3027,62 @@ var TabsMenuComponent = ({
|
|
|
3021
3027
|
tabEle.scrollLeft = newScrollPosition;
|
|
3022
3028
|
}
|
|
3023
3029
|
};
|
|
3024
|
-
|
|
3025
|
-
|
|
3026
|
-
|
|
3027
|
-
|
|
3028
|
-
|
|
3029
|
-
|
|
3030
|
-
|
|
3031
|
-
|
|
3032
|
-
|
|
3033
|
-
|
|
3034
|
-
|
|
3035
|
-
|
|
3036
|
-
|
|
3037
|
-
|
|
3038
|
-
|
|
3039
|
-
|
|
3040
|
-
|
|
3041
|
-
|
|
3042
|
-
|
|
3043
|
-
|
|
3044
|
-
|
|
3045
|
-
|
|
3046
|
-
|
|
3047
|
-
|
|
3048
|
-
|
|
3049
|
-
|
|
3050
|
-
|
|
3051
|
-
|
|
3052
|
-
|
|
3053
|
-
|
|
3054
|
-
|
|
3055
|
-
|
|
3056
|
-
|
|
3057
|
-
|
|
3058
|
-
|
|
3059
|
-
|
|
3030
|
+
const handleModal = (name) => {
|
|
3031
|
+
setOpenModal((old) => ({ ...old, [name]: !(openModal[name] ?? false) }));
|
|
3032
|
+
};
|
|
3033
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react13.Fragment, { children: [
|
|
3034
|
+
renderModal({ handleModal, windowSize, openModal, setDataItem, dataItem }),
|
|
3035
|
+
/* @__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: [
|
|
3036
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
3037
|
+
"div",
|
|
3038
|
+
{
|
|
3039
|
+
onClick: () => handleScroll(-200),
|
|
3040
|
+
className: (0, import_classnames11.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
|
|
3041
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_becoxy_icons5.ChevronLeft, {})
|
|
3042
|
+
}
|
|
3043
|
+
),
|
|
3044
|
+
/* @__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) => {
|
|
3045
|
+
if (item?.resAttributes?.IS_MENU === "1") {
|
|
3046
|
+
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: [
|
|
3047
|
+
/* @__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 }) }),
|
|
3048
|
+
/* @__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)(
|
|
3049
|
+
import_reactstrap9.DropdownItem,
|
|
3050
|
+
{
|
|
3051
|
+
style: { borderRadius: "5px", margin: "0 0.5rem", width: "95%" },
|
|
3052
|
+
onClick: () => {
|
|
3053
|
+
if (x.resAttributes.MODAL_VALUE) {
|
|
3054
|
+
handleModal(x.resAttributes.MODAL_VALUE);
|
|
3055
|
+
} else {
|
|
3056
|
+
navigate(x.url);
|
|
3057
|
+
}
|
|
3058
|
+
},
|
|
3059
|
+
children: x.name
|
|
3060
|
+
},
|
|
3061
|
+
x.code
|
|
3062
|
+
)) })
|
|
3063
|
+
] }, item.code);
|
|
3064
|
+
} else {
|
|
3065
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
3066
|
+
import_react_router_dom.Link,
|
|
3067
|
+
{
|
|
3068
|
+
to: item.url,
|
|
3069
|
+
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("/"))) }),
|
|
3070
|
+
children: item.name
|
|
3071
|
+
},
|
|
3072
|
+
item.code
|
|
3073
|
+
);
|
|
3074
|
+
}
|
|
3075
|
+
}) }) }),
|
|
3076
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
3077
|
+
"div",
|
|
3078
|
+
{
|
|
3079
|
+
onClick: () => handleScroll(200),
|
|
3080
|
+
className: (0, import_classnames11.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
|
|
3081
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_becoxy_icons5.ChevronRight, {})
|
|
3082
|
+
}
|
|
3083
|
+
)
|
|
3084
|
+
] })
|
|
3085
|
+
] });
|
|
3060
3086
|
};
|
|
3061
3087
|
|
|
3062
3088
|
// index.ts
|
package/dist/index.mjs
CHANGED
|
@@ -2911,7 +2911,7 @@ var table_default = TableEdit;
|
|
|
2911
2911
|
import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "becoxy-icons";
|
|
2912
2912
|
import classNames5 from "classnames";
|
|
2913
2913
|
import { Fragment as Fragment14, useEffect as useEffect7, useState as useState6 } from "react";
|
|
2914
|
-
import { Link } from "react-router-dom";
|
|
2914
|
+
import { Link, useNavigate } from "react-router-dom";
|
|
2915
2915
|
import { DropdownItem as DropdownItem2, DropdownMenu as DropdownMenu3, DropdownToggle as DropdownToggle3, UncontrolledDropdown as UncontrolledDropdown2 } from "reactstrap";
|
|
2916
2916
|
import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
2917
2917
|
var TabsMenuComponent = ({
|
|
@@ -2920,14 +2920,19 @@ var TabsMenuComponent = ({
|
|
|
2920
2920
|
tabChild,
|
|
2921
2921
|
resourceCodeParent,
|
|
2922
2922
|
resources,
|
|
2923
|
-
resourceCode
|
|
2923
|
+
resourceCode,
|
|
2924
|
+
windowSize,
|
|
2925
|
+
renderModal
|
|
2924
2926
|
}) => {
|
|
2927
|
+
const navigate = useNavigate();
|
|
2925
2928
|
const [dataMenu, setDataMenu] = useState6([]);
|
|
2926
2929
|
const [openMenu, setOpenMenu] = useState6(false);
|
|
2927
2930
|
const [url, setUrl] = useState6("");
|
|
2928
2931
|
const [contentWidth, setContentWidth] = useState6(0);
|
|
2929
2932
|
const [componentWidth, setComponentWidth] = useState6(0);
|
|
2930
2933
|
const [scrollPosition, setScrollPosition] = useState6(0);
|
|
2934
|
+
const [dataItem, setDataItem] = useState6([]);
|
|
2935
|
+
const [openModal, setOpenModal] = useState6({});
|
|
2931
2936
|
const handleWindowResize = () => {
|
|
2932
2937
|
const tabEle = document.getElementById(`tab-component-${resourceCode}`);
|
|
2933
2938
|
const tabContent = document.getElementById(`content-component-${resourceCode}`);
|
|
@@ -2947,6 +2952,7 @@ var TabsMenuComponent = ({
|
|
|
2947
2952
|
setContentWidth(tabContent?.offsetWidth ?? 0);
|
|
2948
2953
|
}
|
|
2949
2954
|
}, 100);
|
|
2955
|
+
window.addEventListener("resize", handleWindowResize);
|
|
2950
2956
|
return () => {
|
|
2951
2957
|
window.removeEventListener("resize", handleWindowResize);
|
|
2952
2958
|
};
|
|
@@ -2979,42 +2985,62 @@ var TabsMenuComponent = ({
|
|
|
2979
2985
|
tabEle.scrollLeft = newScrollPosition;
|
|
2980
2986
|
}
|
|
2981
2987
|
};
|
|
2982
|
-
|
|
2983
|
-
|
|
2984
|
-
|
|
2985
|
-
|
|
2986
|
-
|
|
2987
|
-
|
|
2988
|
-
|
|
2989
|
-
|
|
2990
|
-
|
|
2991
|
-
|
|
2992
|
-
|
|
2993
|
-
|
|
2994
|
-
|
|
2995
|
-
|
|
2996
|
-
|
|
2997
|
-
|
|
2998
|
-
|
|
2999
|
-
|
|
3000
|
-
|
|
3001
|
-
|
|
3002
|
-
|
|
3003
|
-
|
|
3004
|
-
|
|
3005
|
-
|
|
3006
|
-
|
|
3007
|
-
|
|
3008
|
-
|
|
3009
|
-
|
|
3010
|
-
|
|
3011
|
-
|
|
3012
|
-
|
|
3013
|
-
|
|
3014
|
-
|
|
3015
|
-
|
|
3016
|
-
|
|
3017
|
-
|
|
2988
|
+
const handleModal = (name) => {
|
|
2989
|
+
setOpenModal((old) => ({ ...old, [name]: !(openModal[name] ?? false) }));
|
|
2990
|
+
};
|
|
2991
|
+
return /* @__PURE__ */ jsxs12(Fragment14, { children: [
|
|
2992
|
+
renderModal({ handleModal, windowSize, openModal, setDataItem, dataItem }),
|
|
2993
|
+
/* @__PURE__ */ jsxs12("div", { className: classNames5("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
|
|
2994
|
+
/* @__PURE__ */ jsx13(
|
|
2995
|
+
"div",
|
|
2996
|
+
{
|
|
2997
|
+
onClick: () => handleScroll(-200),
|
|
2998
|
+
className: classNames5("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
|
|
2999
|
+
children: /* @__PURE__ */ jsx13(ChevronLeft2, {})
|
|
3000
|
+
}
|
|
3001
|
+
),
|
|
3002
|
+
/* @__PURE__ */ jsx13("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ jsx13("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
|
|
3003
|
+
if (item?.resAttributes?.IS_MENU === "1") {
|
|
3004
|
+
return /* @__PURE__ */ jsxs12(UncontrolledDropdown2, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
|
|
3005
|
+
/* @__PURE__ */ jsx13(DropdownToggle3, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ jsx13("div", { children: item.name }) }),
|
|
3006
|
+
/* @__PURE__ */ jsx13(DropdownMenu3, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ jsx13(
|
|
3007
|
+
DropdownItem2,
|
|
3008
|
+
{
|
|
3009
|
+
style: { borderRadius: "5px", margin: "0 0.5rem", width: "95%" },
|
|
3010
|
+
onClick: () => {
|
|
3011
|
+
if (x.resAttributes.MODAL_VALUE) {
|
|
3012
|
+
handleModal(x.resAttributes.MODAL_VALUE);
|
|
3013
|
+
} else {
|
|
3014
|
+
navigate(x.url);
|
|
3015
|
+
}
|
|
3016
|
+
},
|
|
3017
|
+
children: x.name
|
|
3018
|
+
},
|
|
3019
|
+
x.code
|
|
3020
|
+
)) })
|
|
3021
|
+
] }, item.code);
|
|
3022
|
+
} else {
|
|
3023
|
+
return /* @__PURE__ */ jsx13(
|
|
3024
|
+
Link,
|
|
3025
|
+
{
|
|
3026
|
+
to: item.url,
|
|
3027
|
+
className: classNames5("tab-custom-item", { active: item.url === url || tabParent && url?.split("/").length > 3 && item.url.startsWith(url.substring(0, url.lastIndexOf("/"))) }),
|
|
3028
|
+
children: item.name
|
|
3029
|
+
},
|
|
3030
|
+
item.code
|
|
3031
|
+
);
|
|
3032
|
+
}
|
|
3033
|
+
}) }) }),
|
|
3034
|
+
/* @__PURE__ */ jsx13(
|
|
3035
|
+
"div",
|
|
3036
|
+
{
|
|
3037
|
+
onClick: () => handleScroll(200),
|
|
3038
|
+
className: classNames5("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
|
|
3039
|
+
children: /* @__PURE__ */ jsx13(ChevronRight2, {})
|
|
3040
|
+
}
|
|
3041
|
+
)
|
|
3042
|
+
] })
|
|
3043
|
+
] });
|
|
3018
3044
|
};
|
|
3019
3045
|
|
|
3020
3046
|
// index.ts
|