react-table-edit 1.5.18 → 1.5.19
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/component/table/toolbar-bottom.d.ts +2 -1
- package/dist/index.js +13 -11
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +13 -11
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -14,9 +14,10 @@ interface ToolbarBottomProps {
|
|
|
14
14
|
focusRow: number | null;
|
|
15
15
|
editDisable?: boolean;
|
|
16
16
|
addDisable?: boolean;
|
|
17
|
+
disableAddMulti?: boolean;
|
|
17
18
|
buttonSetting?: IFTableEditButton;
|
|
18
19
|
toolbarSetting?: IFTableEditToolbar;
|
|
19
20
|
headerColumns: any[][];
|
|
20
21
|
}
|
|
21
|
-
declare const ToolbarBottom: ({ handleAdd, handleDuplicate, handleInsertBefore, handleInsertAfter, handleDeleteAll, setOpenPopupSetupColumn, focusRow, editDisable, addDisable, buttonSetting, toolbarSetting, headerColumns }: ToolbarBottomProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
declare const ToolbarBottom: ({ handleAdd, handleDuplicate, handleInsertBefore, handleInsertAfter, handleDeleteAll, setOpenPopupSetupColumn, focusRow, editDisable, addDisable, disableAddMulti, buttonSetting, toolbarSetting, headerColumns }: ToolbarBottomProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
23
|
export default ToolbarBottom;
|
package/dist/index.js
CHANGED
|
@@ -39798,15 +39798,17 @@ const SettingColumn = (props) => {
|
|
|
39798
39798
|
}) }) })] }), jsxRuntime.jsxs("div", { style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, className: "d-flex justify-content-between align-items-center w-100 py-75 px-1", children: [jsxRuntime.jsx("div", { children: settingColumns?.updatedDate && jsxRuntime.jsxs("p", { children: [jsxRuntime.jsxs("strong", { children: [t("Update date"), ": "] }), " ", jsxRuntime.jsx("span", { children: settingColumns.updatedDate ? formatDateTime(settingColumns.updatedDate, "DD/MM/yyyy HH:mm") : "" }), jsxRuntime.jsxs("strong", { className: "ms-2", children: [t("Editor"), ": "] }), " ", jsxRuntime.jsx("span", { children: settingColumns.updatedByName })] }) }), jsxRuntime.jsxs("div", { children: [resetDefaultColumns && jsxRuntime.jsx(Button$1$1, { color: "primary", onClick: () => messageBoxConfirm(t, handleResetColumns, {}, 'Do you want to reset the default settings?'), className: "me-1", children: t("Reset") }), jsxRuntime.jsx(Button$1$1, { color: "primary", onClick: handleSubmit, className: "me-1", children: t("Confirm") }), jsxRuntime.jsx(Button$1$1, { color: "secondary", onClick: handleCancel, outline: true, children: t("Close") })] })] })] }));
|
|
39799
39799
|
};
|
|
39800
39800
|
|
|
39801
|
-
const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleInsertAfter, handleDeleteAll, setOpenPopupSetupColumn, focusRow, editDisable, addDisable, buttonSetting, toolbarSetting, headerColumns }) => {
|
|
39801
|
+
const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleInsertAfter, handleDeleteAll, setOpenPopupSetupColumn, focusRow, editDisable, addDisable, disableAddMulti, buttonSetting, toolbarSetting, headerColumns }) => {
|
|
39802
39802
|
const { t } = reactI18next.useTranslation();
|
|
39803
|
-
return (jsxRuntime.jsx("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: jsxRuntime.jsxs("div", { className: "r-toolbar-items", children: [jsxRuntime.jsxs("div", { className: "r-toolbar-left", children: [jsxRuntime.jsxs("div", { className: classNames$1('r-toolbar-item d-flex', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: [jsxRuntime.jsx(Button$1$1, { color:
|
|
39804
|
-
|
|
39803
|
+
return (jsxRuntime.jsx("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: jsxRuntime.jsxs("div", { className: "r-toolbar-items", children: [jsxRuntime.jsxs("div", { className: "r-toolbar-left", children: [jsxRuntime.jsxs("div", { className: classNames$1('r-toolbar-item d-flex', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: [jsxRuntime.jsx(Button$1$1, { color: "success", outline: true, onClick: () => handleAdd(1), className: "d-flex", children: t('Add item') }), !!disableAddMulti && (jsxRuntime.jsxs(UncontrolledDropdown, { className: "nav-item", children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", className: "me-0 d-flex", children: jsxRuntime.jsx(Button$1$1, { type: "button", color: "success", outline: true, style: { marginLeft: -1 }, className: "px-25", children: jsxRuntime.jsx("svg", { fill: "#28c76f", height: "15", width: "20", viewBox: "0 0 20 20", children: jsxRuntime.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" }) }) }) }), jsxRuntime.jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-0", children: [jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(10), children: "10 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(20), children: "20 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(30), children: "30 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(40), children: "40 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(50), children: "50 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(100), children: "100 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(1000), children: "1000 h\u00E0ng" })] })] }))] }), (focusRow ?? -1) > -1 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1$1, { color: "success", outline: true, onClick: () => {
|
|
39804
|
+
handleDuplicate();
|
|
39805
|
+
}, className: "d-flex", children: t('Duplicate') }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1$1, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t('Insert item before') }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1$1, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t('Insert item after') }) })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " })), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1$1, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t('Delete all item') }) }), toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
|
|
39806
|
+
return item.align === 'left' ? (jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`)) : ('');
|
|
39805
39807
|
})] }), jsxRuntime.jsx("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
|
|
39806
|
-
return
|
|
39808
|
+
return item.align === 'center' ? (jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`)) : ('');
|
|
39807
39809
|
}) }), jsxRuntime.jsxs("div", { className: "r-toolbar-right", children: [toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
|
|
39808
|
-
return
|
|
39809
|
-
}), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item me-25', { 'd-none': headerColumns.length > 1 }), "aria-disabled": "false", children: jsxRuntime.jsx(SvgSettings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item me-25', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: jsxRuntime.jsxs(UncontrolledDropdown, { className:
|
|
39810
|
+
return item.align === 'right' ? (jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`)) : ('');
|
|
39811
|
+
}), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item me-25', { 'd-none': headerColumns.length > 1 }), "aria-disabled": "false", children: jsxRuntime.jsx(SvgSettings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item me-25', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: jsxRuntime.jsxs(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", color: "primary", onClick: (e) => e.preventDefault(), children: jsxRuntime.jsx(SvgInfo, { className: "cursor-pointer text-primary" }) }), jsxRuntime.jsx(DropdownMenu$1, { className: "formula-dropdown icon-dropdown", children: jsxRuntime.jsxs("ul", { className: "mb-0 pe-50", children: [jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\u00E2n b\u1EA3n" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Ch\u1ECDn \u00F4 v\u00E0 Ctrl + V \u0111\u1EC3 d\u00E1n th\u00F4ng tin t\u1EEB excel" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\u00E9p h\u00E0ng" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + V \u0111\u1EC3 d\u00E1n h\u00E0ng" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2193 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng d\u01B0\u1EDBi" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2191 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng tr\u00EAn" })] }) })] }) })] })] }) }));
|
|
39810
39812
|
};
|
|
39811
39813
|
|
|
39812
39814
|
const TableEdit = React$5.forwardRef((props, ref) => {
|
|
@@ -68772,12 +68774,12 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
|
|
|
68772
68774
|
const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? 'id';
|
|
68773
68775
|
const [contentColumns, setContentColumns] = React$5.useState([]);
|
|
68774
68776
|
const [groupColumns, setGroupColumns] = React$5.useState([]);
|
|
68775
|
-
const [expandsAll, setExpandsAll] = React$5.useState();
|
|
68777
|
+
const [expandsAll, setExpandsAll] = React$5.useState(true);
|
|
68776
68778
|
React$5.useEffect(() => {
|
|
68777
68779
|
if (groupSetting?.groupColumns) {
|
|
68778
68780
|
setGroupColumns([...groupSetting.groupColumns]);
|
|
68779
68781
|
}
|
|
68780
|
-
setExpandsAll(
|
|
68782
|
+
setExpandsAll(true);
|
|
68781
68783
|
}, [groupSetting?.groupColumns]);
|
|
68782
68784
|
const { levels: headerColumns, flatVisble, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight } = React$5.useMemo(() => {
|
|
68783
68785
|
const rs = calculateTableStructure(columns, settingColumns?.value);
|
|
@@ -68996,7 +68998,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
|
|
|
68996
68998
|
const firstColSpan = flatVisble.length > 6 ? 3 : Math.floor(flatVisble.length / 2);
|
|
68997
68999
|
const RenderContent = ({ datas, level = 0 }) => {
|
|
68998
69000
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: datas.map((row, indexRow) => {
|
|
68999
|
-
const [expand, setExpand] = React$5.useState(row.expand ??
|
|
69001
|
+
const [expand, setExpand] = React$5.useState(row.expand ?? true);
|
|
69000
69002
|
React$5.useEffect(() => {
|
|
69001
69003
|
if (expandsAll !== undefined) {
|
|
69002
69004
|
setExpand(expandsAll);
|
|
@@ -69039,7 +69041,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
|
|
|
69039
69041
|
sumValue = '';
|
|
69040
69042
|
}
|
|
69041
69043
|
}
|
|
69042
|
-
return (jsxRuntime.jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsxRuntime.jsx("div", { className: "r-rowcell-div", style: { justifyContent: colSum.textAlign ? colSum.textAlign : 'left' }, children: (haveSum || colSum.haveSum === true) && Number(sumValue) < 0 ?
|
|
69044
|
+
return (jsxRuntime.jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsxRuntime.jsx("div", { className: "r-rowcell-div", style: { justifyContent: colSum.textAlign ? colSum.textAlign : 'left' }, children: (haveSum || colSum.haveSum === true) && Number(sumValue) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] }) : sumValue }) }, `group-sum-cell-${level}-${indexRow}-${indexCol}`));
|
|
69043
69045
|
})] }), expand && jsxRuntime.jsx(RenderContent, { datas: row.children, level: level + 1 })] }, `row-${level}-${indexRow}`));
|
|
69044
69046
|
}
|
|
69045
69047
|
else {
|
|
@@ -69078,7 +69080,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
|
|
|
69078
69080
|
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
69079
69081
|
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
69080
69082
|
textAlign: col.textAlign ? col.textAlign : 'left'
|
|
69081
|
-
}, children: jsxRuntime.jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) && Number(sumValue) < 0 ?
|
|
69083
|
+
}, children: jsxRuntime.jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) && Number(sumValue) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] }) : sumValue }) }, `summarycell-${indexCol}`));
|
|
69082
69084
|
}) })) })] }), (viewData.length ?? 0) === 0 && !isLoading && (jsxRuntime.jsxs("div", { className: "r-no-data", children: [jsxRuntime.jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsxRuntime.jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxRuntime.jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsxRuntime.jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), jsxRuntime.jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }), t('No data available.')] })), isLoading && (jsxRuntime.jsx("div", { className: "r-loading-overlay", children: jsxRuntime.jsxs("div", { className: "r-loading", children: [jsxRuntime.jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) }))] })] }), pagingSetting?.allowPaging && (jsxRuntime.jsx(PagingComponent, { gridRef: gridRef, onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingSetting?.totalItem ?? 0, onChangePageSize: onChangePageSize })), jsxRuntime.jsx(SettingColumn, { gridRef: gridRef, handleSidebar: () => {
|
|
69083
69085
|
setOpenPopupSetupColumn(!openPopupSetupColumn);
|
|
69084
69086
|
}, settingColumns: settingColumns, openSidebar: openPopupSetupColumn, column: [...contentColumns], resetDefaultColumns: resetDefaultColumns, setColumn: (newColumns) => {
|