ods-component-lib 1.13.7 → 1.13.10

package/dist/index.modern.js

@@ -15,7 +15,7 @@ import { exportDataGrid } from 'devextreme/excel_exporter';
 import { Workbook } from 'exceljs';
 import { saveAs } from 'file-saver-es';
 import moment from 'moment';
-import { TreeList } from 'devextreme-react';
+import { CheckBox, TreeList } from 'devextreme-react';
 import { TreeView } from 'devextreme-react/tree-view';
 
 function _extends() {
@@ -1202,7 +1202,7 @@ function grid(props) {
     }, colProperties.column.caption);
   };
   var fileName = props.exportFileName ? props.exportFileName + moment().format("YYYYMMDD") : "DatagridExportFile" + moment().format("YYYYMMDD");
-  var onExporting = React.useCallback(function (e) {
+  var onExporting = function onExporting(e) {
     if (e.format === 'excel') {
       var workbook = new Workbook();
       exportDataGrid({
@@ -1226,7 +1226,7 @@ function grid(props) {
         doc.save(fileName + '.pdf');
       });
     }
-  }, []);
+  };
   return React.createElement(React.Fragment, null, React.createElement("div", {
     className: "odsDatagrid",
     style: {
@@ -1446,6 +1446,231 @@ function grid$1(props) {
   })));
 }
 
+var exportFormats$2 = ['xlsx', 'pdf'];
+var searchEditorOptions$2 = {
+  placeholder: 'Search column'
+};
+var renderMenuItem$1 = function renderMenuItem() {
+  return React.createElement(Export, {
+    enabled: true,
+    allowExportSelectedData: true,
+    formats: exportFormats$2
+  });
+};
+var customizeBooleanColumnRender$1 = function customizeBooleanColumnRender(e) {
+  var tagColor = e.value ? 'green' : 'gold';
+  return React.createElement(Tag, {
+    color: tagColor
+  }, e.value ? 'Active' : 'Passive');
+};
+function OdsDataGrid$1(props) {
+  return grid$2(props);
+}
+function grid$2(props) {
+  var _useState = useState(true),
+    showPageSizeSelector = _useState[0],
+    setShowPageSizeSelector = _useState[1];
+  var _useState2 = useState(true),
+    enablePaging = _useState2[0],
+    setEnablePaging = _useState2[1];
+  var headerCellRender = function headerCellRender(colProperties) {
+    return React.createElement("th", {
+      className: "dx-datagrid-headers"
+    }, colProperties.column.caption);
+  };
+  var fileName = props.exportFileName ? props.exportFileName + moment().format("YYYYMMDD") : "DatagridExportFile" + moment().format("YYYYMMDD");
+  var onExporting = function onExporting(e) {
+    if (e.format === 'xlsx') {
+      var workbook = new Workbook();
+      exportDataGrid({
+        component: e.component,
+        worksheet: workbook.addWorksheet('Main sheet'),
+        autoFilterEnabled: true
+      }).then(function () {
+        workbook.xlsx.writeBuffer().then(function (buffer) {
+          saveAs(new Blob([buffer], {
+            type: 'application/octet-stream'
+          }), fileName + '.xlsx');
+        });
+      });
+    } else {
+      var doc = new jsPDF();
+      exportDataGrid$1({
+        jsPDFDocument: doc,
+        component: e.component,
+        indent: 5
+      }).then(function () {
+        doc.save(fileName + '.pdf');
+      });
+    }
+  };
+  var showPageSizeSelectorChange = function showPageSizeSelectorChange(value) {
+    setShowPageSizeSelector(value);
+  };
+  var onEnablePagingChange = function onEnablePagingChange(value) {
+    setEnablePaging(value);
+  };
+  return React.createElement(React.Fragment, null, React.createElement("div", {
+    className: "odsDatagrid",
+    style: {
+      width: "100%",
+      overflowX: 'auto'
+    }
+  }, React.createElement(DataGrid, {
+    dataSource: props.dataSource,
+    keyExpr: props.keyExpr,
+    allowColumnResizing: true,
+    columnResizingMode: "widget",
+    onRowInserted: props.onRowInserted,
+    onRowUpdated: props.onRowUpdated,
+    onRowRemoved: props.onRowRemoved,
+    onSaving: props.onSaving,
+    allowColumnReordering: true,
+    showRowLines: true,
+    showBorders: true,
+    columnAutoWidth: false,
+    onEditCanceling: props.onEditCanceling,
+    onExporting: onExporting
+  }, React.createElement(Paging, {
+    enabled: true,
+    defaultPageSize: props.pageSize
+  }), enablePaging && React.createElement(Pager, {
+    visible: true,
+    displayMode: "full",
+    showPageSizeSelector: showPageSizeSelector,
+    showNavigationButtons: true,
+    showInfo: true
+  }), props.searchEnable && React.createElement(SearchPanel, {
+    visible: true
+  }), props.filterEnable && React.createElement(FilterRow, {
+    visible: true
+  }), props.headerFilterEnable && React.createElement(HeaderFilter, {
+    visible: true
+  }), React.createElement(ColumnChooser, {
+    enabled: true,
+    mode: "select"
+  }, React.createElement(Position, {
+    my: "right top",
+    at: "right bottom",
+    of: ".dx-datagrid-column-chooser-button"
+  }), React.createElement(ColumnChooserSearch, {
+    enabled: true,
+    editorOptions: searchEditorOptions$2
+  }), React.createElement(ColumnChooserSelection, {
+    allowSelectAll: true,
+    selectByClick: true,
+    recursive: true
+  })), props.selectEnable && React.createElement(Selection, {
+    mode: "multiple",
+    deferred: true
+  }), props.editEnable === true && React.createElement(Editing, {
+    mode: props.edit.mode,
+    allowUpdating: props.edit.allowUpdating,
+    allowDeleting: props.edit.allowDeleting,
+    allowAdding: props.edit.allowAdding,
+    useIcons: true
+  }, props.edit.mode === "popup" && React.createElement(Popup, {
+    title: props.popupTitle,
+    showTitle: true,
+    width: 700,
+    height: 300,
+    showCloseButton: false
+  }), React.createElement(Form$1, null, props.formItems.map(function (formItem) {
+    return React.createElement(Item, {
+      itemType: formItem.itemType,
+      colCount: formItem.colCount,
+      colSpan: formItem.colSpan
+    }, formItem.items.map(function (subItem) {
+      return React.createElement(Item, {
+        key: subItem.dataField,
+        dataField: subItem.dataField
+      });
+    }));
+  }))), React.createElement(Scrolling, {
+    mode: props.scrollingMode,
+    rowRenderingMode: props.scrollingMode
+  }), props.exportEnable === true && React.createElement(Export, {
+    enabled: true,
+    allowExportSelectedData: true,
+    formats: exportFormats$2
+  }), props.columns.map(function (col) {
+    return React.createElement(Column, Object.assign({
+      key: col.dataField
+    }, col, {
+      headerCellRender: headerCellRender,
+      cellRender: col.dataField === 'IsActive' || col.dataField === 'Status' ? customizeBooleanColumnRender$1 : ""
+    }), col.required && React.createElement(RequiredRule, {
+      message: col.requiredMessage
+    }), col.dataField === 'IsActive' && React.createElement(HeaderFilter, {
+      dataSource: [{
+        text: 'All',
+        value: null
+      }, {
+        text: 'Active',
+        value: true
+      }, {
+        text: 'Passive',
+        value: false
+      }]
+    }));
+  }), function () {
+    if (props.customPopup !== undefined) {
+      return React.createElement(Column, {
+        type: "buttons",
+        width: 110
+      }, React.createElement(Button$1, {
+        hint: "Edit",
+        visible: true,
+        disabled: false,
+        icon: "edit",
+        onClick: props.editButtonClick
+      }), React.createElement(Button$1, {
+        hint: "Delete",
+        visible: true,
+        disabled: false,
+        icon: "trash",
+        onClick: props.deleteButtonClick
+      }));
+    } else {
+      return React.createElement(Column, {
+        type: "buttons",
+        width: 110
+      }, React.createElement(React.Fragment, null, React.createElement(Button$1, {
+        name: "edit"
+      }), React.createElement(Button$1, {
+        name: "delete"
+      })));
+    }
+  }(), React.createElement(Toolbar, null, React.createElement(Item$1, {
+    location: "after"
+  }, React.createElement(OdsButton, {
+    type: "primary",
+    onClick: props.onAddButton
+  }, "Add New")), React.createElement(Item$1, {
+    location: "after"
+  }, React.createElement(CheckBox, {
+    id: 'showPageSizes',
+    text: 'Show Page Size',
+    value: showPageSizeSelector,
+    onValueChange: showPageSizeSelectorChange
+  })), React.createElement(Item$1, {
+    location: "after"
+  }, React.createElement(CheckBox, {
+    id: 'showPages',
+    text: 'Enable Paging',
+    value: enablePaging,
+    onValueChange: onEnablePagingChange
+  })), React.createElement(Item$1, {
+    name: "columnChooserButton"
+  }), React.createElement(Item$1, {
+    name: "searchPanel"
+  }), React.createElement(Item$1, {
+    name: "exportButton"
+  }), React.createElement(Item$1, {
+    menuItemRender: renderMenuItem$1
+  })))));
+}
+
 var DxTreeList = function DxTreeList(props) {
   var _useState = useState(props.dataSource),
     dataSource = _useState[0];
@@ -1518,5 +1743,5 @@ var DxTreeView = function DxTreeView(props) {
   }));
 };
 
-export { DxTreeList, DxTreeView, OdsAutoComplete, OdsBasicForm, OdsBasicTable, OdsButton, OdsCalendar, OdsCard, OdsCheckbox, OdsCheckboxGroup, OdsCollapse, OdsDataGrid, OdsDateRangePicker, OdsDateRangePicker as OdsDatepicker, OdsDisplayGrid, OdsDivider, OdsCollapse as OdsDropdown, OdsDropdownButton, OdsImage, OdsInput, OdsInputNumber, OdsLink, OdsList, OdsLogin, OdsMessage, OdsModal, OdsNotification, OdsParagraph, OdsPassword, OdsPhoneInput, OdsRadio, OdsRadioGroup, OdsRangeTimepicker, OdsRate, OdsSearch, OdsSelect, OdsSelectableTable, OdsSpin, OdsSwitch, OdsTab, OdsBasicTable as OdsTable, OdsTag, OdsText, OdsTextArea, OdsTimeline, OdsTimepicker, OdsTitle };
+export { DxTreeList, DxTreeView, OdsAutoComplete, OdsBasicForm, OdsBasicTable, OdsButton, OdsCalendar, OdsCard, OdsCheckbox, OdsCheckboxGroup, OdsCollapse, OdsDataGrid, OdsDateRangePicker, OdsDateRangePicker as OdsDatepicker, OdsDisplayGrid, OdsDivider, OdsCollapse as OdsDropdown, OdsDropdownButton, OdsImage, OdsInput, OdsInputNumber, OdsLink, OdsList, OdsLogin, OdsMessage, OdsModal, OdsNotification, OdsParagraph, OdsPassword, OdsPhoneInput, OdsDataGrid$1 as OdsProfDataGrid, OdsRadio, OdsRadioGroup, OdsRangeTimepicker, OdsRate, OdsSearch, OdsSelect, OdsSelectableTable, OdsSpin, OdsSwitch, OdsTab, OdsBasicTable as OdsTable, OdsTag, OdsText, OdsTextArea, OdsTimeline, OdsTimepicker, OdsTitle };
 //# sourceMappingURL=index.modern.js.map