component-shared 1.0.0

package/ComponentsV2/TableTemplate/CRUDPannel.js

@@ -0,0 +1,199 @@
+import { inherits as _inherits, createClass as _createClass, classCallCheck as _classCallCheck, callSuper as _callSuper, defineProperty as _defineProperty, regenerator as _regenerator } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { Box, Button } from '@mui/material';
+import { Add, Delete, Edit } from '@mui/icons-material';
+import AppRegistrationIcon from '@mui/icons-material/AppRegistration';
+import { GlobalModalContext } from '../GlobalModal/index.js';
+import { TableTemplateContext } from './TableTemplateContext.js';
+
+var CRUDPannel = /*#__PURE__*/function (_Component) {
+  function CRUDPannel(props) {
+    var _this;
+    _classCallCheck(this, CRUDPannel);
+    _this = _callSuper(this, CRUDPannel, [props]);
+    _defineProperty(_this, "IsMultiple", function (state) {
+      var _state$selectionIds$l, _state$selectionIds;
+      return ((_state$selectionIds$l = (_state$selectionIds = state.selectionIds) === null || _state$selectionIds === void 0 ? void 0 : _state$selectionIds.length) !== null && _state$selectionIds$l !== void 0 ? _state$selectionIds$l : 0) > 1;
+    });
+    _defineProperty(_this, "IsDisplayAction", function (state) {
+      var _state$selectionIds2;
+      return !!((_state$selectionIds2 = state.selectionIds) !== null && _state$selectionIds2 !== void 0 && _state$selectionIds2.length);
+    });
+    _defineProperty(_this, "getButtons", /*#__PURE__*/_regenerator().m(function _callee(that, state) {
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            if (!that.props.Edit) {
+              _context.n = 1;
+              break;
+            }
+            _context.n = 1;
+            return jsx(Button, {
+              onClick: that.onEdit,
+              sx: {
+                width: 100,
+                height: 30
+              },
+              color: "info",
+              disabled: that.IsMultiple(state),
+              startIcon: jsx(Edit, {}),
+              children: "Edit"
+            }, 'Edit');
+          case 1:
+            if (!that.props.Delete) {
+              _context.n = 2;
+              break;
+            }
+            _context.n = 2;
+            return jsx(Button, {
+              onClick: that.onDelete,
+              sx: {
+                width: 100,
+                height: 30
+              },
+              color: "error",
+              startIcon: jsx(Delete, {}),
+              children: "Delete"
+            }, 'Delete');
+          case 2:
+            if (!that.props.Details) {
+              _context.n = 3;
+              break;
+            }
+            _context.n = 3;
+            return jsx(Button, {
+              onClick: that.onDetails,
+              sx: {
+                width: 100,
+                height: 30
+              },
+              color: "inherit",
+              disabled: that.IsMultiple(state),
+              startIcon: jsx(AppRegistrationIcon, {}),
+              children: "Details"
+            }, 'Details');
+          case 3:
+            return _context.a(2);
+        }
+      }, _callee);
+    }));
+    _defineProperty(_this, "onCreate", function () {
+      var _this$ModalContext;
+      (_this$ModalContext = _this.ModalContext) === null || _this$ModalContext === void 0 || _this$ModalContext.ShowModal({
+        ContenModal: function ContenModal() {
+          return _this.props.Create || jsx(EmptyDiv, {});
+        },
+        sx: {
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center'
+        }
+      });
+    });
+    _defineProperty(_this, "onEdit", function () {
+      var _this$ModalContext2;
+      (_this$ModalContext2 = _this.ModalContext) === null || _this$ModalContext2 === void 0 || _this$ModalContext2.ShowModal({
+        ContenModal: function ContenModal() {
+          return _this.props.Edit || jsx(EmptyDiv, {});
+        },
+        sx: {
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center'
+        }
+      });
+    });
+    _defineProperty(_this, "onDelete", function () {
+      var _this$ModalContext3;
+      (_this$ModalContext3 = _this.ModalContext) === null || _this$ModalContext3 === void 0 || _this$ModalContext3.ShowModal({
+        ContenModal: function ContenModal() {
+          return _this.props.Delete || jsx(EmptyDiv, {});
+        },
+        sx: {
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center'
+        }
+      });
+    });
+    _defineProperty(_this, "onDetails", function () {
+      var _this$ModalContext4;
+      (_this$ModalContext4 = _this.ModalContext) === null || _this$ModalContext4 === void 0 || _this$ModalContext4.ShowModal({
+        ContenModal: function ContenModal() {
+          return _this.props.Details || jsx(EmptyDiv, {});
+        },
+        sx: {
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center'
+        }
+      });
+    });
+    _defineProperty(_this, "ModalContext", void 0);
+    return _this;
+  }
+  _inherits(CRUDPannel, _Component);
+  return _createClass(CRUDPannel, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      return jsx(GlobalModalContext.Consumer, {
+        children: function children(context) {
+          _this2.ModalContext = context;
+          return jsx(TableTemplateContext.Consumer, {
+            children: function children(_ref) {
+              var state = _ref.state;
+              return jsxs(Box, {
+                sx: {
+                  height: 50,
+                  justifyContent: 'space-between',
+                  display: 'flex',
+                  padding: '10px',
+                  position: 'relative'
+                },
+                children: [jsxs(Box, {
+                  sx: {
+                    justifyContent: 'space-between',
+                    display: 'flex',
+                    flex: 1,
+                    alignItems: 'center'
+                  },
+                  children: [jsx(Box, {}), _this2.props.Create && jsx(Button, {
+                    onClick: _this2.onCreate,
+                    sx: {
+                      height: 30
+                    },
+                    variant: "contained",
+                    startIcon: jsx(Add, {}),
+                    children: "Create"
+                  }, 'Create')]
+                }), jsx(Box, {
+                  sx: {
+                    justifyContent: 'flex-end',
+                    alignItems: 'center',
+                    display: _this2.IsDisplayAction(state) ? 'flex' : 'none',
+                    flex: 1,
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    background: '#e0e0e0'
+                  },
+                  children: Array.from(_this2.getButtons(_this2, state))
+                })]
+              });
+            }
+          });
+        }
+      });
+    }
+  }]);
+}(Component);
+var EmptyDiv = function EmptyDiv() {
+  return jsx(Fragment, {});
+};
+
+export { CRUDPannel, CRUDPannel as default };
+//# sourceMappingURL=CRUDPannel.js.map

package/ComponentsV2/TableTemplate/CRUDPannel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CRUDPannel.js","sources":["../../../src/ComponentsV2/TableTemplate/CRUDPannel.tsx"],"sourcesContent":["import React, { Component } from 'react'\r\nimport { Box, Button } from '@mui/material'\r\nimport { Add, Edit, Delete } from '@mui/icons-material'\r\nimport AppRegistrationIcon from '@mui/icons-material/AppRegistration'\r\nimport { GlobalModalContext, IGlobalModalContext } from '../GlobalModal'\r\nimport { ITableTemplateState, TableTemplateContext } from './TableTemplateContext'\r\n\r\ninterface CRUDPannelProps {\r\n  Create?: JSX.Element\r\n  Edit?: JSX.Element\r\n  Details?: JSX.Element\r\n  Delete?: JSX.Element\r\n}\r\n\r\nexport class CRUDPannel extends Component<CRUDPannelProps> {\r\n  constructor(props: any) {\r\n    super(props)\r\n  }\r\n\r\n  IsMultiple = (state: ITableTemplateState) => {\r\n    return (state.selectionIds?.length ?? 0) > 1\r\n  }\r\n\r\n  IsDisplayAction = (state: ITableTemplateState) => {\r\n    return !!state.selectionIds?.length\r\n  }\r\n\r\n  getButtons = function* (that: CRUDPannel, state: ITableTemplateState) {\r\n    if (that.props.Edit)\r\n      yield (\r\n        <Button\r\n          onClick={that.onEdit}\r\n          key={'Edit'}\r\n          sx={{ width: 100, height: 30 }}\r\n          color=\"info\"\r\n          disabled={that.IsMultiple(state)}\r\n          startIcon={<Edit />}\r\n        >\r\n          Edit\r\n        </Button>\r\n      )\r\n    if (that.props.Delete)\r\n      yield (\r\n        <Button onClick={that.onDelete} key={'Delete'} sx={{ width: 100, height: 30 }} color=\"error\" startIcon={<Delete />}>\r\n          Delete\r\n        </Button>\r\n      )\r\n    if (that.props.Details)\r\n      yield (\r\n        <Button\r\n          onClick={that.onDetails}\r\n          key={'Details'}\r\n          sx={{ width: 100, height: 30 }}\r\n          color=\"inherit\"\r\n          disabled={that.IsMultiple(state)}\r\n          startIcon={<AppRegistrationIcon />}\r\n        >\r\n          Details\r\n        </Button>\r\n      )\r\n  }\r\n\r\n  onCreate = () => {\r\n    this.ModalContext?.ShowModal({\r\n      ContenModal: () => this.props.Create || <EmptyDiv />,\r\n      sx: { display: 'flex', justifyContent: 'center', alignItems: 'center' },\r\n    })\r\n  }\r\n\r\n  onEdit = () => {\r\n    this.ModalContext?.ShowModal({\r\n      ContenModal: () => this.props.Edit || <EmptyDiv />,\r\n      sx: { display: 'flex', justifyContent: 'center', alignItems: 'center' },\r\n    })\r\n  }\r\n\r\n  onDelete = () => {\r\n    this.ModalContext?.ShowModal({\r\n      ContenModal: () => this.props.Delete || <EmptyDiv />,\r\n      sx: { display: 'flex', justifyContent: 'center', alignItems: 'center' },\r\n    })\r\n  }\r\n\r\n  onDetails = () => {\r\n    this.ModalContext?.ShowModal({\r\n      ContenModal: () => this.props.Details || <EmptyDiv />,\r\n      sx: { display: 'flex', justifyContent: 'center', alignItems: 'center' },\r\n    })\r\n  }\r\n\r\n  ModalContext?: IGlobalModalContext\r\n  render() {\r\n    return (\r\n      <GlobalModalContext.Consumer>\r\n        {(context) => {\r\n          this.ModalContext = context\r\n          return (\r\n            <TableTemplateContext.Consumer>\r\n              {({ state }) => {\r\n                return (\r\n                  <Box\r\n                    sx={{ height: 50, justifyContent: 'space-between', display: 'flex', padding: '10px', position: 'relative' }}\r\n                  >\r\n                    <Box sx={{ justifyContent: 'space-between', display: 'flex', flex: 1, alignItems: 'center' }}>\r\n                      <Box></Box>\r\n                      {this.props.Create && (\r\n                        <Button\r\n                          onClick={this.onCreate}\r\n                          key={'Create'}\r\n                          sx={{ height: 30 }}\r\n                          variant=\"contained\"\r\n                          startIcon={<Add />}\r\n                        >\r\n                          Create\r\n                        </Button>\r\n                      )}\r\n                    </Box>\r\n                    <Box\r\n                      sx={{\r\n                        justifyContent: 'flex-end',\r\n                        alignItems: 'center',\r\n                        display: this.IsDisplayAction(state) ? 'flex' : 'none',\r\n                        flex: 1,\r\n                        position: 'absolute',\r\n                        top: 0,\r\n                        left: 0,\r\n                        right: 0,\r\n                        bottom: 0,\r\n                        background: '#e0e0e0',\r\n                      }}\r\n                    >\r\n                      {Array.from(this.getButtons(this, state))}\r\n                    </Box>\r\n                  </Box>\r\n                )\r\n              }}\r\n            </TableTemplateContext.Consumer>\r\n          )\r\n        }}\r\n      </GlobalModalContext.Consumer>\r\n    )\r\n  }\r\n}\r\nexport default CRUDPannel\r\nconst EmptyDiv = () => <></>\r\n"],"names":["CRUDPannel","_Component","props","_this","_classCallCheck","_callSuper","_defineProperty","state","_state$selectionIds$l","_state$selectionIds","selectionIds","length","_state$selectionIds2","_regenerator","m","_callee","that","w","_context","n","Edit","_jsx","Button","onClick","onEdit","sx","width","height","color","disabled","IsMultiple","startIcon","Delete","onDelete","children","Details","onDetails","AppRegistrationIcon","a","_this$ModalContext","ModalContext","ShowModal","ContenModal","Create","EmptyDiv","display","justifyContent","alignItems","_this$ModalContext2","_this$ModalContext3","_this$ModalContext4","_inherits","_createClass","key","value","render","_this2","GlobalModalContext","Consumer","context","TableTemplateContext","_ref","_jsxs","Box","padding","position","flex","onCreate","variant","Add","IsDisplayAction","top","left","right","bottom","background","Array","from","getButtons","Component"],"mappings":"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"}

package/ComponentsV2/TableTemplate/CreateTableTemplate.d.ts

@@ -0,0 +1,60 @@
+import React, { ComponentType } from 'react';
+import { SxProps, Theme } from '@mui/material';
+import { GridSortModel, GridColDef, GridValidRowModel, DataGridProps, GridRowModel } from '@mui/x-data-grid';
+import { GridCallbackDetails, GridFilterModel, GridPaginationInitialState } from '@mui/x-data-grid';
+import { IFetchModel, ITableMode, ITableOption, ITableTemplatePropBases } from './type';
+import { ITableTemplateState } from './TableTemplateContext';
+type ITableTemplateProps<T extends GridValidRowModel, Key extends keyof ITableMode<T>> = ITableTemplatePropBases<T> & ITableMode<T>[Key] & {
+    sxWrapper?: SxProps<Theme>;
+    ItemRowMenu?: ComponentType<React.PropsWithChildren<any>>;
+};
+export declare const CreateTableTemplate: <TModel extends GridValidRowModel>(mode: keyof ITableMode<TModel>, option: ITableOption<TModel>) => {
+    new (props: ITableTemplateProps<TModel, keyof ITableMode<TModel>>): {
+        AbortController?: AbortController | undefined;
+        generateColumns: () => GridColDef<any, any, any>[];
+        columns: GridColDef<any, any, any>[];
+        initial(): GridColDef<any, any, any>[];
+        getPageInfo: () => import("./type").IFetchPagination<TModel>;
+        getPagination: () => {
+            page: number | undefined;
+            pageSize: number | undefined;
+        };
+        GetDataGridProp: () => Omit<DataGridProps<any>, "columns">;
+        onRowSelectionModelChange: (rowSelectionModel: GridRowModel, details: GridCallbackDetails) => void;
+        onServerFilterChange: (model: GridFilterModel, details: GridCallbackDetails<'filter'>) => void;
+        onPageChange: (page: number, details: GridCallbackDetails<any>) => void;
+        onPageSizeChange: (pageSize: number, details: GridCallbackDetails<any>) => void;
+        timer: number;
+        PageInfoCache: GridPaginationInitialState;
+        PageNavidateFetch: (details: GridCallbackDetails<any>) => void;
+        onSortModelChange: (model: GridSortModel, details: GridCallbackDetails) => void;
+        FetchData: (model: Partial<IFetchModel>) => Promise<void>;
+        isServerSide: () => boolean;
+        componentDidMount(): Promise<void>;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends keyof ITableTemplateState<TModel>>(state: ITableTemplateState<TModel> | ((prevState: Readonly<ITableTemplateState<TModel>>, props: Readonly<ITableTemplateProps<TModel, keyof ITableMode<TModel>>>) => ITableTemplateState<TModel> | Pick<ITableTemplateState<TModel>, K> | null) | Pick<ITableTemplateState<TModel>, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<ITableTemplateProps<TModel, keyof ITableMode<TModel>>> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<ITableTemplateState<TModel>>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<ITableTemplateProps<TModel, keyof ITableMode<TModel>>>, nextState: Readonly<ITableTemplateState<TModel>>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<ITableTemplateProps<TModel, keyof ITableMode<TModel>>>, prevState: Readonly<ITableTemplateState<TModel>>): any;
+        componentDidUpdate?(prevProps: Readonly<ITableTemplateProps<TModel, keyof ITableMode<TModel>>>, prevState: Readonly<ITableTemplateState<TModel>>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<ITableTemplateProps<TModel, keyof ITableMode<TModel>>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<ITableTemplateProps<TModel, keyof ITableMode<TModel>>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<ITableTemplateProps<TModel, keyof ITableMode<TModel>>>, nextState: Readonly<ITableTemplateState<TModel>>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<ITableTemplateProps<TModel, keyof ITableMode<TModel>>>, nextState: Readonly<ITableTemplateState<TModel>>, nextContext: any): void;
+    };
+    defaultState: ITableTemplateState<TModel>;
+    contextType?: React.Context<any> | undefined;
+};
+export {};

package/ComponentsV2/TableTemplate/CreateTableTemplate.js

@@ -0,0 +1,330 @@
+import { inherits as _inherits, createClass as _createClass, objectSpread2 as _objectSpread2, asyncToGenerator as _asyncToGenerator, defineProperty as _defineProperty, classCallCheck as _classCallCheck, callSuper as _callSuper, regenerator as _regenerator } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { styled, Box } from '@mui/material';
+import { DataGrid } from '@mui/x-data-grid';
+import { CustomerGridToolbar } from './CustomerGridToolbar.js';
+import { CustomGridFilterPanel } from './CustomGridFilterPanel.js';
+import { TableTemplateContext } from './TableTemplateContext.js';
+import NoRowsOverlay from './NoRowsOverlay.js';
+
+var CreateTableTemplate = function CreateTableTemplate(mode, option) {
+  var _TableTemplate;
+  return _TableTemplate = /*#__PURE__*/function (_Component) {
+    function TableTemplate(props) {
+      var _this;
+      _classCallCheck(this, TableTemplate);
+      _this = _callSuper(this, TableTemplate, [props]);
+      _defineProperty(_this, "AbortController", void 0);
+      _defineProperty(_this, "generateColumns", function () {
+        return Object.keys(option.config).map(function (key) {
+          var opt = _objectSpread2(_objectSpread2({}, option.config[key]), {}, {
+            field: key
+          });
+          if (mode === 'Server' && !opt.type && opt.filterable !== false) throw new Error("When mode is Server you need set type for '".concat(key, "' column in 'GridColDef'"));
+          if (option.filterOperators) {
+            opt.filterOperators = option.filterOperators(opt);
+          }
+          return opt;
+        });
+      });
+      _defineProperty(_this, "columns", void 0);
+      _defineProperty(_this, "getPageInfo", function () {
+        if ('PageInfo' in _this.props && _this.props.PageInfo) {
+          return _this.props.PageInfo;
+        }
+        return _this.state.PageInfo;
+      });
+      _defineProperty(_this, "getPagination", function () {
+        var pageInfo = _this.getPageInfo();
+        return {
+          page: pageInfo.page,
+          pageSize: pageInfo.pageSize
+        };
+      });
+      _defineProperty(_this, "GetDataGridProp", function () {
+        var _DataGridProp;
+        if (mode === 'Server') {
+          var _pageInfo$rowTotal;
+          var pageInfo = _this.getPageInfo();
+          _DataGridProp = {
+            initialState: {
+              pagination: _this.getPagination()
+            },
+            rowCount: (_pageInfo$rowTotal = pageInfo.rowTotal) !== null && _pageInfo$rowTotal !== void 0 ? _pageInfo$rowTotal : 0,
+            rows: pageInfo.data,
+            loading: _this.state.isLoading,
+            onPageChange: _this.onPageChange,
+            onPageSizeChange: _this.onPageSizeChange,
+            onFilterModelChange: _this.onServerFilterChange,
+            onSortModelChange: _this.onSortModelChange,
+            filterMode: 'server',
+            paginationMode: 'server',
+            sortingMode: 'server',
+            filterModel: _this.state.FilterModel,
+            sortModel: _this.state.GridSortModel
+          };
+        } else if (mode === 'Client' && 'data' in _this.props) {
+          _DataGridProp = {
+            rows: _this.props.data,
+            componentsProps: {
+              toolbar: {
+                showQuickFilter: true,
+                quickFilterProps: {
+                  debounceMs: 500
+                }
+              }
+            }
+          };
+        } else {
+          _DataGridProp = {
+            rows: []
+          };
+        }
+        return _DataGridProp;
+      });
+      _defineProperty(_this, "onRowSelectionModelChange", function (rowSelectionModel, details) {
+        _this.setState({
+          details: details,
+          selectionIds: rowSelectionModel
+        });
+      });
+      _defineProperty(_this, "onServerFilterChange", function (model, details) {
+        _this.setState({
+          FilterModel: model,
+          isLoading: true
+        }, function () {
+          return _this.FetchData({
+            FilterModel: model,
+            details: details
+          });
+        });
+      });
+      _defineProperty(_this, "onPageChange", function (page, details) {
+        _this.PageInfoCache.page = page;
+        _this.PageNavidateFetch(details);
+      });
+      _defineProperty(_this, "onPageSizeChange", function (pageSize, details) {
+        _this.PageInfoCache.pageSize = pageSize;
+        _this.PageNavidateFetch(details);
+      });
+      _defineProperty(_this, "timer", 0);
+      _defineProperty(_this, "PageInfoCache", {});
+      _defineProperty(_this, "PageNavidateFetch", function (details) {
+        clearTimeout(_this.timer);
+        _this.timer = setTimeout(function () {
+          _this.setState({
+            PaginationModel: _this.PageInfoCache,
+            isLoading: true
+          });
+          _this.FetchData({
+            PaginationModel: _this.PageInfoCache,
+            details: details
+          });
+        }, 250);
+      });
+      _defineProperty(_this, "onSortModelChange", function (model, details) {
+        _this.setState({
+          GridSortModel: model,
+          isLoading: true
+        });
+        _this.FetchData({
+          GridSortModel: model,
+          details: details
+        });
+      });
+      _defineProperty(_this, "FetchData", /*#__PURE__*/function () {
+        var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(model) {
+          var _this$AbortController;
+          var data;
+          return _regenerator().w(function (_context) {
+            while (1) switch (_context.n) {
+              case 0:
+                (_this$AbortController = _this.AbortController) === null || _this$AbortController === void 0 || _this$AbortController.abort();
+                if (!(mode === 'Server' && 'ServerOption' in _this.props)) {
+                  _context.n = 4;
+                  break;
+                }
+                _context.p = 1;
+                _this.AbortController = new AbortController();
+                _context.n = 2;
+                return _this.props.ServerOption.FetchFilterData(Object.assign({}, {
+                  PaginationModel: _this.state.PaginationModel,
+                  FilterModel: _this.state.FilterModel,
+                  GridSortModel: _this.state.GridSortModel,
+                  abort: _this.AbortController.signal
+                }, model));
+              case 2:
+                data = _context.v;
+                if (_this.props.IsInnerState === true) {
+                  _this.setState({
+                    isLoading: false,
+                    PageInfo: data !== null && data !== void 0 ? data : TableTemplate.defaultState.PageInfo
+                  });
+                } else {
+                  _this.setState({
+                    isLoading: false
+                  });
+                }
+                _context.n = 4;
+                break;
+              case 3:
+                _context.p = 3;
+                _context.v;
+                _this.setState({
+                  isLoading: false
+                });
+              case 4:
+                return _context.a(2);
+            }
+          }, _callee, null, [[1, 3]]);
+        }));
+        return function (_x) {
+          return _ref.apply(this, arguments);
+        };
+      }());
+      _defineProperty(_this, "isServerSide", function () {
+        return mode === 'Server';
+      });
+      _this.state = TableTemplate.defaultState;
+      _this.columns = _this.initial();
+      return _this;
+    }
+    _inherits(TableTemplate, _Component);
+    return _createClass(TableTemplate, [{
+      key: "initial",
+      value: function initial() {
+        if (option.MenuField) {
+          var MenuField = typeof option.MenuField === 'function' ? option.MenuField(option) : option.MenuField;
+          var FieldConfig = option.config[MenuField];
+          var ItemMenu = this.props.ItemRowMenu;
+          if (FieldConfig && ItemMenu) {
+            var renderCell = FieldConfig.renderCell;
+            FieldConfig.renderCell = function (params) {
+              return jsx(ItemMenu, {
+                data: params.row,
+                children: renderCell ? renderCell(params) : params.value
+              });
+            };
+          }
+        }
+        return this.generateColumns();
+      }
+    }, {
+      key: "componentDidMount",
+      value: function () {
+        var _componentDidMount = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+          var _this$AbortController2, data;
+          return _regenerator().w(function (_context2) {
+            while (1) switch (_context2.n) {
+              case 0:
+                if (!(mode === 'Server' && 'ServerOption' in this.props)) {
+                  _context2.n = 4;
+                  break;
+                }
+                (_this$AbortController2 = this.AbortController) === null || _this$AbortController2 === void 0 || _this$AbortController2.abort();
+                if (!(mode === 'Server' && 'ServerOption' in this.props)) {
+                  _context2.n = 4;
+                  break;
+                }
+                _context2.p = 1;
+                this.AbortController = new AbortController();
+                _context2.n = 2;
+                return this.props.ServerOption.FetchInitialData();
+              case 2:
+                data = _context2.v;
+                this.setState({
+                  isLoading: false,
+                  PageInfo: data !== null && data !== void 0 ? data : TableTemplate.defaultState.PageInfo
+                });
+                _context2.n = 4;
+                break;
+              case 3:
+                _context2.p = 3;
+                _context2.v;
+                this.setState({
+                  isLoading: false
+                });
+              case 4:
+                return _context2.a(2);
+            }
+          }, _callee2, this, [[1, 3]]);
+        }));
+        function componentDidMount() {
+          return _componentDidMount.apply(this, arguments);
+        }
+        return componentDidMount;
+      }()
+    }, {
+      key: "render",
+      value: function render() {
+        var _this$props$InnerProp;
+        var CRUDPannel = this.props.CRUDPannel || function () {
+          return jsx(Fragment, {});
+        };
+        return jsx(TableTemplateContext.Provider, {
+          value: this,
+          children: jsxs(Wrapper, {
+            sx: this.props.sxWrapper,
+            children: [jsx(CRUDPannel, {}), jsx(DataGrid
+            // row
+            , _objectSpread2(_objectSpread2({
+              // row
+              pagination: true,
+              getRowId: option.getRowId,
+              columns: this.columns
+            }, this.GetDataGridProp()), {}, {
+              components: {
+                Toolbar: CustomerGridToolbar,
+                FilterPanel: function FilterPanel(props) {
+                  return jsx(CustomGridFilterPanel, _objectSpread2({}, props));
+                },
+                NoRowsOverlay: NoRowsOverlay
+              },
+              componentsProps: {
+                toolbar: {
+                  showQuickFilter: true,
+                  quickFilterProps: {
+                    debounceMs: 500
+                  }
+                }
+              },
+              style: {
+                border: 0
+              },
+              checkboxSelection: true,
+              sx: {
+                border: 0,
+                '& .MuiTablePagination-root .MuiToolbar-root > p': {
+                  margin: 0
+                },
+                '& .MuiDataGrid-columnHeaderTitle': {
+                  fontWeight: 700,
+                  color: '#3c3c3c'
+                }
+              }
+            }, (_this$props$InnerProp = this.props.InnerProps) !== null && _this$props$InnerProp !== void 0 ? _this$props$InnerProp : {}))]
+          })
+        });
+      }
+    }]);
+  }(Component), _defineProperty(_TableTemplate, "defaultState", {
+    PageInfo: {
+      data: [],
+      rowTotal: 0,
+      page: 0,
+      pageSize: 0
+    },
+    isLoading: true
+  }), _TableTemplate;
+};
+var Wrapper = styled(Box)({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  border: '1px solid #e0e0e0',
+  borderRadius: '5px'
+});
+
+export { CreateTableTemplate };
+//# sourceMappingURL=CreateTableTemplate.js.map