ods-component-lib 1.13.8 → 1.13.11

package/dist/index.modern.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { AutoComplete, Button, Dropdown, Calendar, Card as Card$1, Checkbox, DatePicker, Divider, Input, Form, Image, InputNumber, List, Modal, notification, Radio, Rate, Select, Spin, Switch, Tabs, Table, Tag, Timeline, TimePicker, Typography } from 'antd';
 import styled, { ThemeProvider } from 'styled-components';
 import Card from 'antd/es/card/Card';
@@ -7,7 +7,7 @@ import 'react-phone-input-2/lib/style.css';
 import PhoneInput from 'react-phone-input-2';
 import message from 'antd/es/message';
 import Parser from 'html-react-parser';
-import { DataGrid, Paging, Pager, SearchPanel, FilterRow, HeaderFilter, ColumnChooser, Position, ColumnChooserSearch, ColumnChooserSelection, Selection, Editing, Popup, Form as Form$1, Scrolling, Export, Column, RequiredRule, Button as Button$1, Toolbar, Item as Item$1 } from 'devextreme-react/data-grid';
+import { DataGrid, Paging, Pager, SearchPanel, FilterRow, HeaderFilter, ColumnChooser, Position, ColumnChooserSearch, ColumnChooserSelection, Selection, Editing, Popup, Form as Form$1, Scrolling, Export, Column, RequiredRule, Button as Button$1, Toolbar, Item as Item$1, LoadPanel } from 'devextreme-react/data-grid';
 import { Item } from 'devextreme-react/form';
 import jsPDF from 'jspdf';
 import { exportDataGrid as exportDataGrid$1 } from 'devextreme/pdf_exporter';
@@ -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: {
@@ -1352,9 +1352,9 @@ function grid(props) {
       return React.createElement(Column, {
         type: "buttons",
         width: 110
-      }, React.createElement(React.Fragment, null, React.createElement(Button$1, {
+      }, React.createElement(React.Fragment, null, props.edit.allowUpdating && React.createElement(Button$1, {
         name: "edit"
-      }), React.createElement(Button$1, {
+      }), props.edit.allowDeleting && React.createElement(Button$1, {
         name: "delete"
       })));
     }
@@ -1446,6 +1446,267 @@ 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 _useState3 = useState(true),
+    loadPanelEnabled = _useState3[0],
+    setLoadPanelEnabled = _useState3[1];
+  var dataGridRef = useRef(null);
+  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);
+    refreshGrid();
+  };
+  var handleScrollingTypeChange = function handleScrollingTypeChange(newScrollingType) {
+    console.log(newScrollingType);
+    debugger;
+    refreshGrid();
+  };
+  var onContentReady = function onContentReady() {
+    setLoadPanelEnabled(false);
+  };
+  var refreshGrid = function refreshGrid() {
+    if (dataGridRef.current) {
+      dataGridRef.current.instance.refresh();
+    }
+  };
+  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,
+    ref: dataGridRef,
+    columnAutoWidth: false,
+    onEditCanceling: props.onEditCanceling,
+    onExporting: onExporting,
+    onContentReady: onContentReady
+  }, 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
+  }), React.createElement(Scrolling, {
+    mode: 'virtual'
+  }), React.createElement(LoadPanel, {
+    enabled: loadPanelEnabled
+  }), 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
+      });
+    }));
+  }))), 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, props.edit.allowUpdating && React.createElement(Button$1, {
+        name: "edit"
+      }), props.edit.allowDeleting && 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, {
+    location: "after"
+  }, React.createElement(OdsSelect, {
+    value: "standard",
+    options: [{
+      value: "standard",
+      label: "standard"
+    }, {
+      value: "virtual",
+      label: "Active"
+    }, {
+      value: "infinite",
+      label: "infinite"
+    }],
+    onChange: handleScrollingTypeChange
+  })), 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 +1779,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