ods-component-lib 1.18.148 → 1.18.152

package/dist/components/devextreme/OdsServerSideDatagrid/OdsServerSideDatagrid.Types.d.ts

@@ -28,7 +28,7 @@ interface IExportProps {
 interface IToolbarButton {
     type: string;
     label: string;
-    onClick: () => void;
+    onclick: () => void;
     disabled?: boolean;
 }
 interface IEditingoptions extends IEditingProps {

package/dist/components/devextreme/dataGridHandlers/OnToolbarButtonHandler.d.ts

@@ -1,3 +1,8 @@
+interface IOnToolbarPreparingOptions {
+    pageTitle?: string;
+    toolbarButtonGroup?: any[];
+    callback?: (e: any) => void;
+}
 /**
  * Handles the rendering and configuration of the toolbar for ODS DataGrid.
  * This hook prepares the toolbar based on the button configuration provided through props,
@@ -7,4 +12,5 @@
  * @returns {Function} A memoized function that configures and populates the toolbar with buttons and title.
  *   This function is intended to be used as a callback in the toolbar's preparation phase of the DataGrid component.
  */
-export declare const useOnToolbarButtonHandler: (props: any) => (e: any) => void;
+export declare const useOnToolbarButtonHandler: ({ pageTitle, toolbarButtonGroup, callback }: IOnToolbarPreparingOptions) => (e: any) => void;
+export {};

package/dist/components/devextreme/dataGridStyle.d.ts

@@ -0,0 +1,3 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    toolbarGrid: import("antd-style").SerializedStyles;
+}>;

package/dist/index.d.ts

@@ -54,6 +54,7 @@ import OdsBasicDataGrid from "./components/devextreme/OdsBasicDataGrid/OdsBasicD
 import OdsTransfer from "./components/devextreme/OdsTransfer";
 import OdsServerSideDatagrid from "./components/devextreme/OdsServerSideDatagrid/OdsServerSideDatagrid";
 import OdsInlineEditDataGrid from "./components/devextreme/OdsInlineEditDataGrid/OdsInlineEditDataGrid";
+import { useOnToolbarButtonHandler } from './components/devextreme/dataGridHandlers/OnToolbarButtonHandler';
 export { OdsButton };
 export { OdsInput };
 export { OdsDropdownButton };
@@ -106,6 +107,7 @@ export { OdsFilterTagView };
 export { OdsFileUpload };
 export { OdsDataGrid };
 export { OdsDisplayGrid };
+export { useOnToolbarButtonHandler };
 export { OdsRemoteDataGrid } from "./components/devextreme/index";
 export { OdsBasicDataGrid };
 export { OdsTransfer };

package/dist/index.js

@@ -34993,6 +34993,125 @@ var DynamicIcon = function DynamicIcon(_ref) {
   return React__default.createElement(IconComponent, null);
 };
 
+var client = createCommonjsModule(function (module, exports) {
+
+
+if (process.env.NODE_ENV === 'production') {
+  exports.createRoot = reactDom.createRoot;
+  exports.hydrateRoot = reactDom.hydrateRoot;
+} else {
+  var i = reactDom.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  exports.createRoot = function(c, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return reactDom.createRoot(c, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+  exports.hydrateRoot = function(c, h, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return reactDom.hydrateRoot(c, h, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+}
+});
+var client_1 = client.createRoot;
+
+var _templateObject$r;
+var useStyles$2 = antdStyle.createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    toolbarGrid: css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n  & .toolbar-primary-button {\n    margin-left: ", "px;\n  }\n\n  & .toolbar-dropdown-container {\n    margin-left: ", "px;\n  }\n  "])), token.margin, token.marginXXS)
+  };
+});
+
+var useOnToolbarButtonHandler = function useOnToolbarButtonHandler(_ref) {
+  var pageTitle = _ref.pageTitle,
+    toolbarButtonGroup = _ref.toolbarButtonGroup,
+    callback = _ref.callback;
+  var _useStyles = useStyles$2(),
+    styles = _useStyles.styles;
+  var onToolbarPreparing = React.useMemo(function () {
+    return function (e) {
+      if ((toolbarButtonGroup === null || toolbarButtonGroup === void 0 ? void 0 : toolbarButtonGroup.length) > 0) {
+        var primaryButtons = toolbarButtonGroup.slice(0, 3);
+        var additionalButtons = toolbarButtonGroup.length > 3 ? toolbarButtonGroup.slice(3) : [];
+        primaryButtons.forEach(function (button, index) {
+          var buttonContainer = document.createElement('div');
+          var rootButton = client_1(buttonContainer);
+          rootButton.render(React__default.createElement(React__default.Fragment, null, React__default.createElement(OdsButton, Object.assign({
+            key: index,
+            className: "toolbar-primary-button",
+            type: button.type
+          }, button.onclick && {
+            onClick: button.onclick
+          }, {
+            disabled: button.disabled
+          }), button.label)));
+          e.toolbarOptions.items.push({
+            location: 'before',
+            widget: 'dxTemplate',
+            template: function template(_, __, container) {
+              container.classList.add(styles.toolbarGrid);
+              container.appendChild(buttonContainer);
+            }
+          });
+        });
+        if (additionalButtons.length > 0) {
+          var dropdownContainer = document.createElement('div');
+          dropdownContainer.classList.add('toolbar-dropdown-container');
+          var rootDropdown = client_1(dropdownContainer);
+          rootDropdown.render(React__default.createElement(React__default.Fragment, null, React__default.createElement(OdsDropdown, {
+            key: "dropdown-custom-toolbar",
+            menuItems: additionalButtons.map(function (button) {
+              return {
+                label: button.label,
+                onClick: button.onclick
+              };
+            })
+          }, React__default.createElement(OdsButton, {
+            type: "text",
+            icon: React__default.createElement(DynamicIcon, {
+              iconName: "kebabMenu"
+            })
+          }))));
+          e.toolbarOptions.items.push({
+            location: 'before',
+            widget: 'dxTemplate',
+            template: function template(_, __, container) {
+              container.classList.add(styles.toolbarGrid);
+              container.appendChild(dropdownContainer);
+            }
+          });
+        }
+      }
+      if (pageTitle) {
+        var titleContainer = document.createElement('div');
+        var rootTitle = client_1(titleContainer);
+        rootTitle.render(React__default.createElement(React__default.Fragment, null, React__default.createElement(OdsTitle, {
+          level: 5
+        }, pageTitle)));
+        e.toolbarOptions.items.unshift({
+          location: 'before',
+          cssClass: 'toolbarTitleItem',
+          template: function template(_, __, container) {
+            container.appendChild(titleContainer);
+          }
+        });
+      }
+      if (callback) {
+        callback(e);
+      }
+    };
+  }, [pageTitle, toolbarButtonGroup]);
+  return onToolbarPreparing;
+};
+
 var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
   var _props$columnResizing, _props$pagerProps$vis, _props$pagerProps, _props$pagerProps$sho, _props$pagerProps2, _props$pagerProps$sho2, _props$pagerProps3, _props$pagerProps$dis, _props$pagerProps4, _props$pagerProps$inf, _props$pagerProps5, _props$exportProps;
   var rowCount = React.useRef(0);
@@ -35115,6 +35234,11 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
       props.sortingProps.onOptionChanged(e);
     }
   }, [props.dataGridRef]);
+  var handleOnToolbarPreparing = useOnToolbarButtonHandler({
+    pageTitle: props.pageTitle,
+    toolbarButtonGroup: props.toolbarButtonGroup,
+    callback: props.onToolbarPreparing
+  });
   React.useEffect(function () {}, [updateTrigger]);
   React.useEffect(function () {
     var loadFilterData = function loadFilterData() {
@@ -35273,29 +35397,7 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
     }
     return React__default.createElement(React__default.Fragment, null, buttonElements);
   }
-  return React__default.createElement("div", null, props.pageTitle && React__default.createElement("div", {
-    style: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      marginBottom: "10px"
-    }
-  }, React__default.createElement("h2", null, props.pageTitle), props.toolbarButtonGroup && React__default.createElement("div", {
-    style: {
-      display: "flex",
-      alignItems: "center"
-    }
-  }, props.toolbarButtonGroup.map(function (button, index) {
-    return React__default.createElement(OdsButton, {
-      key: index,
-      type: button.type,
-      onClick: button.onClick,
-      disabled: button.disabled,
-      style: {
-        marginLeft: index > 0 ? "10px" : undefined
-      }
-    }, button.label);
-  }))), React__default.createElement(devextremeReact.DataGrid, Object.assign({
+  return React__default.createElement("div", null, React__default.createElement(devextremeReact.DataGrid, Object.assign({
     dataSource: props.dataSource,
     showBorders: true,
     repaintChangesOnly: true,
@@ -35343,7 +35445,7 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
     onOptionChanged: handleOptionChanged,
     width: "100%",
     language: props.language,
-    onToolbarPreparing: props.onToolbarPreparing,
+    onToolbarPreparing: handleOnToolbarPreparing,
     ref: props.dataGridRef
   }), React__default.createElement(DataGrid.Scrolling, {
     mode: "infinite",
@@ -35432,11 +35534,11 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
   }, React__default.createElement("p", null, renderTotal())));
 };
 
-var _templateObject$r, _templateObject2$3, _templateObject3$1, _templateObject4, _templateObject5;
-var useStyles$2 = antdStyle.createStyles(function (_ref) {
+var _templateObject$s, _templateObject2$3, _templateObject3$1, _templateObject4, _templateObject5;
+var useStyles$3 = antdStyle.createStyles(function (_ref) {
   var css = _ref.css;
   return {
-    grid: css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n    & .grid-cell-selected {\n      background-color: lightgreen;\n    }\n    & .grid-cell-disable-text-selection {\n      -webkit-touch-callout: none;\n      -webkit-user-select: none;\n      -khtml-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n    & .grid-cell-disable-colored {\n      background-color: lightgray;\n    }\n    & .grid-summary-row-label {\n      font-weight: 900;\n    }\n\n    & .grid-toolbar-button-item {\n      padding: 0 !important;\n    }\n\n    & .dx-datagrid.dx-gridbase-container.dx-datagrid-borders {\n      border: none !important;\n      border-radius: 16px 16px 0 0;\n    }\n    & .dx-datagrid-borders > .dx-datagrid-filter-panel,\n    & .dx-datagrid-borders > .dx-datagrid-headers {\n      border: 0 !important;\n    }\n    & .dx-datagrid-search-panel {\n      margin-left: 0;\n    }\n    & .dx-toolbar-after .dx-toolbar-item,\n    & .dx-toolbar-after .dx-toolbar-item:last-child {\n      padding: 0;\n    }\n    & .dx-toolbar .dx-toolbar-after {\n      display: inline-flex;\n      gap: 5px;\n    }\n    .dx-datagrid-borders > .dx-datagrid-headers,\n    .dx-datagrid-borders > .dx-datagrid-rowsview,\n    .dx-datagrid-borders > .dx-datagrid-total-footer {\n      border-radius: 0;\n    }\n\n    .dx-datagrid-headers .dx-datagrid-table .dx-row > td {\n      text-align: start !important;\n    }\n\n    & .dx-column-indicators {\n      float: right !important;\n    }\n\n    .dx-header-row .dx-header-filter-indicator.dx-text-content-alignment-right, .dx-header-row .dx-sort-indicator.dx-text-content-alignment-right {\n      margin-right: 3px;\n      margin-left: unset;\n    }\n  "]))),
+    grid: css(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n    & .grid-cell-selected {\n      background-color: lightgreen;\n    }\n    & .grid-cell-disable-text-selection {\n      -webkit-touch-callout: none;\n      -webkit-user-select: none;\n      -khtml-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n    & .grid-cell-disable-colored {\n      background-color: lightgray;\n    }\n    & .grid-summary-row-label {\n      font-weight: 900;\n    }\n\n    & .grid-toolbar-button-item {\n      padding: 0 !important;\n    }\n\n    & .dx-datagrid.dx-gridbase-container.dx-datagrid-borders {\n      border: none !important;\n      border-radius: 16px 16px 0 0;\n    }\n    & .dx-datagrid-borders > .dx-datagrid-filter-panel,\n    & .dx-datagrid-borders > .dx-datagrid-headers {\n      border: 0 !important;\n    }\n    & .dx-datagrid-search-panel {\n      margin-left: 0;\n    }\n    & .dx-toolbar-after .dx-toolbar-item,\n    & .dx-toolbar-after .dx-toolbar-item:last-child {\n      padding: 0;\n    }\n    & .dx-toolbar .dx-toolbar-after {\n      display: inline-flex;\n      gap: 5px;\n    }\n    .dx-datagrid-borders > .dx-datagrid-headers,\n    .dx-datagrid-borders > .dx-datagrid-rowsview,\n    .dx-datagrid-borders > .dx-datagrid-total-footer {\n      border-radius: 0;\n    }\n\n    .dx-datagrid-headers .dx-datagrid-table .dx-row > td {\n      text-align: start !important;\n    }\n\n    & .dx-column-indicators {\n      float: right !important;\n    }\n\n    .dx-header-row .dx-header-filter-indicator.dx-text-content-alignment-right, .dx-header-row .dx-sort-indicator.dx-text-content-alignment-right {\n      margin-right: 3px;\n      margin-left: unset;\n    }\n  "]))),
     gridCustomSummary: css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n    background-color: rgb(255, 255, 255);\n    border-radius: 0px 0px 16px 16px;\n    font-size: 13px;\n    text-align: unset;\n    padding: 17px 16px 3px 15px;\n    font-weight: 600;\n    border-top: 1px solid #ededed;\n  "])))
   };
 });
@@ -35714,7 +35816,7 @@ var OdsInlineEditDataGrid = function OdsInlineEditDataGrid(props) {
     onOptionChangedFromProps = props.onOptionChanged,
     onExportingFromProps = props.onExporting,
     AllGridOptions = _objectWithoutPropertiesLoose(props, _excluded$5);
-  var _useStyles = useStyles$2(),
+  var _useStyles = useStyles$3(),
     gridStyle = _useStyles.styles;
   var _useState = React.useState(0),
     currentPage = _useState[0],
@@ -37060,4 +37162,5 @@ exports.OdsTimeline = OdsTimeline;
 exports.OdsTimepicker = OdsTimepicker;
 exports.OdsTitle = OdsTitle;
 exports.OdsTransfer = OdsTransfer;
+exports.useOnToolbarButtonHandler = useOnToolbarButtonHandler;
 //# sourceMappingURL=index.js.map