bam32bittheme - npm Package Compare versions

Comparing version 2.1.53-beta.1 to 2.1.53

dist/components/Table.js

@@ -6,3 +6,2 @@ "use strict";
 require("core-js/modules/es.weak-map.js");
-require("core-js/modules/web.dom-collections.iterator.js");
 Object.defineProperty(exports, "__esModule", {
@@ -12,13 +11,13 @@ value: true
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
-var _materialReactTable = require("material-react-table");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = require("@emotion/react");
+var _Pagination = _interopRequireDefault(require("@mui/material/Pagination"));
+var _xDataGrid = require("@mui/x-data-grid");
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _react2 = _interopRequireWildcard(require("react"));
 var _Constant = require("../Constant");
-var _tr = require("material-react-table/locales/tr");
-var _en = require("material-react-table/locales/en");
-var _material = require("@mui/material");
-const _excluded = ["columns", "rows", "checkboxSelection", "isRowSelectable", "rowsPerPageOptions", "enableColumnOrdering", "sxProps", "tableComponentProps", "enablePagination", "enableStickyHeader", "enableStickyFooter", "enableResizing", "enableBottomToolbar", "enableColumnPinning", "localization", "enableEditing", "editDisplayMode", "enableClickToCopy", "selectAllMode", "enableColumnResizing", "columnResizeMode", "enableTopToolbar"];
+const _excluded = ["rows", "columns", "checkboxSelection", "isRowSelectable", "defaultPageSize", "rowsPerPage", "labelRowsPerPage", "tableComponentProps", "sxProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -29,73 +28,59 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+_xDataGridPro.LicenseInfo.setLicenseKey(_Constant.TABLE_LICENSE_KEY);
 const Table = _ref => {
   let {
+      rows,
       columns,
-      rows,
-      checkboxSelection,
+      checkboxSelection = true,
       isRowSelectable,
-      rowsPerPageOptions,
-      enableColumnOrdering,
-      sxProps,
+      defaultPageSize = 10,
+      rowsPerPage,
+      labelRowsPerPage,
       tableComponentProps,
-      enablePagination = true,
-      enableStickyHeader = true,
-      enableStickyFooter = true,
-      enableResizing = true,
-      enableBottomToolbar = true,
-      enableColumnPinning = true,
-      localization = "tr",
-      enableEditing = false,
-      editDisplayMode = 'cell',
-      enableClickToCopy = false,
-      selectAllMode = 'all',
-      enableColumnResizing = false,
-      columnResizeMode = 'onChange',
-      enableTopToolbar = true
+      sxProps
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  const theme = (0, _react2.useTheme)();
-  const tableColumns = (0, _react.useMemo)(() => {
-    return columns === null || columns === void 0 ? void 0 : columns.map(column => _objectSpread({
-      accessorKey: column.field,
-      header: column.headerName
-    }, column));
-  }, [columns]);
-  const tableInstance = (0, _materialReactTable.useMaterialReactTable)({
-    columns: tableColumns,
-    data: rows,
-    enablePagination: enablePagination,
-    enableRowSelection: checkboxSelection,
-    rowSelection: isRowSelectable,
-    enableStickyHeader: enableStickyHeader,
-    enableStickyFooter: enableStickyFooter,
-    muiSearchTextFieldProps: {
-      size: 'small',
-      variant: 'outlined'
-    },
-    muiPaginationProps: {
-      color: 'primary',
-      rowsPerPageOptions: rowsPerPageOptions,
-      shape: 'rounded',
-      variant: 'outlined'
-    },
-    paginationDisplayMode: 'pages',
-    positionToolbarAlertBanner: 'bottom',
-    enableColumnOrdering: enableColumnOrdering,
-    defaultDisplayColumn: {
-      enableResizing: enableResizing
-    },
-    enableBottomToolbar: enableBottomToolbar,
-    enableColumnPinning: enableColumnPinning,
-    localization: localization = "tr" ? _tr.MRT_Localization_TR : _en.MRT_Localization_EN,
-    enableEditing: enableEditing,
-    editDisplayMode: editDisplayMode,
-    enableClickToCopy: enableClickToCopy,
-    selectAllMode: selectAllMode,
-    enableColumnResizing: enableColumnResizing,
-    columnResizeMode: columnResizeMode,
-    enableTopToolbar: enableTopToolbar
-  });
-  return /*#__PURE__*/_react.default.createElement("div", {
+  const theme = (0, _react.useTheme)();
+  const [pageSize, setPageSize] = (0, _react2.useState)(defaultPageSize);
+  const handlePageSizeChange = newPageSize => {
+    setPageSize(newPageSize);
+  };
+  function Pagination(_ref2) {
+    let {
+      page,
+      onPageChange,
+      className
+    } = _ref2;
+    const apiRef = (0, _xDataGrid.useGridApiContext)();
+    const pageCount = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridPageCountSelector);
+    (0, _react2.useEffect)(() => {
+      onPageChange(() => {
+        return;
+      }, 0);
+    }, [rows]);
+    return /*#__PURE__*/_react2.default.createElement(_Pagination.default, {
+      color: "primary",
+      className: className,
+      count: pageCount,
+      page: page + 1,
+      onChange: (event, newPage) => {
+        onPageChange(event, newPage - 1);
+      }
+    });
+  }
+  const CustomPagination = (0, _react2.useMemo)(() => {
+    const MemoizedCustomPagination = _ref3 => {
+      let {
+        props
+      } = _ref3;
+      return /*#__PURE__*/_react2.default.createElement(_xDataGridPro.GridPagination, _extends({
+        ActionsComponent: Pagination
+      }, props));
+    };
+    return MemoizedCustomPagination;
+  }, [rows]);
+  return /*#__PURE__*/_react2.default.createElement("div", {
     style: {
@@ -105,51 +90,74 @@ width: '100%',
     }
-  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+  }, /*#__PURE__*/_react2.default.createElement("div", {
+    style: {
+      width: '100%',
+      overflowX: 'auto'
+    }
+  }, /*#__PURE__*/_react2.default.createElement(_xDataGridPro.DataGridPro, _extends({
+    rows: rows,
+    columns: columns,
+    initialState: {
+      pagination: {
+        paginationModel: {
+          pageSize: pageSize
+        }
+      }
+    },
+    pageSizeOptions: [5, 10, 25],
+    pagination: true,
+    autoHeight: true,
+    showCellVerticalBorder: true,
+    getRowHeight: () => 'auto',
+    showColumnVerticalBorder: true,
+    checkboxSelection: checkboxSelection,
+    isRowSelectable: isRowSelectable,
+    onPageSizeChange: handlePageSizeChange,
+    componentsProps: {
+      pagination: {
+        labelRowsPerPage: labelRowsPerPage
+      }
+    },
+    components: _objectSpread({
+      Pagination: CustomPagination
+    }, tableComponentProps),
     sx: _objectSpread({
-      width: '100%',
-      overflowX: 'auto',
-      '& .MuiTableCell-root': {
+      backgroundColor: theme.palette.background.paper,
+      '--DataGrid-overlayHeight': '100px',
+      '& .MuiDataGrid-cell 	,.MuiDataGrid-columnHeaders': {
+        borderWidth: 1,
         border: "1px solid ".concat(_Constant.themeColors.divider, " !important")
       },
-      '& .MuiFormLabel-root': {
-        fontSize: '0.9rem'
+      '& .MuiDataGrid-cell': {
+        minHeight: '52px !important'
       },
-      '& .MuiTableHead-root': {
+      '& .MuiDataGrid-columnHeaders': {
         borderRight: "1px solid ".concat(_Constant.themeColors.divider),
         backgroundColor: "".concat(_Constant.themeColors.tableHeader),
-        minHeight: '56px'
+        minHeight: '56px !important'
       },
-      '& .MuiPaper-root': {
-        backgroundColor: theme.palette.background.paper,
-        overflowX: 'auto'
-      },
-      '& .MuiTableCell-head': {
-        backgroundColor: "".concat(_Constant.themeColors.tableHeader, " !important")
-      },
-      '& .MuiTableBody-root': {
-        border: "1px solid ".concat(_Constant.themeColors.divider),
-        minHeight: '52px'
-      },
-      '& .MuiTableRow-root ': {
-        height: 'auto'
-      },
       '@media (max-width: 600px)': {
-        '& .MuiTableCell-root': {
+        '& .MuiDataGrid-columnHeader': {
           minWidth: '175px !important'
         },
+        '& .MuiDataGrid-cell': {
+          minWidth: '175px !important'
+        },
         '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
           backgroundColor: "".concat(_Constant.themeColors.tableHeader),
-          height: 2,
-          width: 2
+          height: 2
         },
         '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
-          backgroundColor: "".concat(_Constant.themeColors.secondary.dark),
-          width: 2
+          backgroundColor: "".concat(_Constant.themeColors.secondary.dark)
         }
+      },
+      '& .MuiDataGrid-virtualScroller': {
+        overflow: 'auto !important'
+      },
+      "& .MuiBox-root": {
+        paddingLeft: 0,
+        paddingRight: 0
       }
     }, sxProps)
-  }, /*#__PURE__*/_react.default.createElement(_materialReactTable.MaterialReactTable, _extends({
-    table: tableInstance,
-    components: _objectSpread({}, tableComponentProps)
   }, props))));
 };
 var _default = exports.default = Table;

dist/Constant.js

@@ -263,5 +263,5 @@ "use strict";
         root: {
-          // '& .MuiTableRow-root': {
-          //   backgroundColor: 'red'
-          // }
+          '& .MuiTableRow-root': {
+            backgroundColor: 'red'
+          }
         },
@@ -268,0 +268,0 @@ rounded: {

package.json

 {
   "name": "bam32bittheme",
-  "version": "2.1.53-beta.1",
+  "version": "2.1.53",
   "private": false,
@@ -5,0 +5,0 @@ "description": "32bit Theme for Material UI v5.x",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Lines of code

4940

increased by0.14%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

1553276

decreased by-0.02%

No dependency changes