@corva/ui 3.1.0-rc.5 → 3.1.0

package/components/VirtualizedTable/VirtualizedTable.js

@@ -1,289 +1 @@
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { useMemo, useEffect } from 'react';
-import classNames from 'classnames';
-import { Table, Column, SortDirection } from 'react-virtualized';
-import { makeStyles, IconButton, Typography, Tooltip } from '@material-ui/core';
-import { Settings, Sort, ArrowUpward, ArrowDownward } from '@material-ui/icons';
-import { getUnitDisplay } from '../../utils/convert.js';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var DEFAULT_COLUMN_MIN_WIDTH = 65;
-var useStyles = makeStyles(function (theme) {
-  return {
-    table: {
-      '& .ReactVirtualized__Table__headerRow': {
-        textTransform: 'none',
-        borderBottom: theme.isLightTheme ? '1px solid rgba(224, 224, 224, 1)' : '1px solid rgba(81, 81, 81, 1)'
-      },
-      '& .ReactVirtualized__Table__row': {
-        borderBottom: theme.isLightTheme ? '1px solid rgba(224, 224, 224, 1)' : '1px solid rgba(81, 81, 81, 1)'
-      },
-      '& .ReactVirtualized__Table__Grid': {
-        outline: 'none'
-      },
-      '& .ReactVirtualized__Table__headerColumn': {
-        outline: 'none'
-      }
-    },
-    oddRow: {
-      backgroundColor: theme.isLightTheme ? 'rgba(189, 189, 189, 0.1)' : '#303030'
-    },
-    headerLabel: {
-      lineHeight: '14px',
-      fontSize: '12px',
-      fontStyle: 'normal',
-      letterSpacing: '-0.25px',
-      display: 'flex',
-      alignItems: 'center',
-      flexWrap: 'wrap'
-    },
-    cellData: {
-      lineHeight: '14px',
-      fontSize: '12px',
-      fontWeight: 'normal',
-      fontStyle: 'normal',
-      letterSpacing: '0.15px'
-    },
-    unitLabel: {
-      fontSize: '10px',
-      opacity: 0.5
-    },
-    settingIcon: {
-      padding: '3px',
-      fontSize: '20px'
-    },
-    sortIcon: {
-      fontSize: '16px'
-    }
-  };
-});
-function getUnitText(columns, dataKey) {
-  var _ref = columns.find(function (column) {
-      return column.key === dataKey;
-    }) || {},
-    unitType = _ref.unitType,
-    customUnit = _ref.customUnit;
-  if (customUnit) {
-    return "(".concat(customUnit, ")");
-  }
-  if (unitType) {
-    return "(".concat(getUnitDisplay(unitType), ")");
-  }
-  return '';
-}
-function getHeaderLabelClassName(columns, dataKey) {
-  var _ref2 = columns.find(function (column) {
-      return column.key === dataKey;
-    }) || {},
-    headerLabelClassName = _ref2.headerLabelClassName;
-  return headerLabelClassName || '';
-}
-function getHeaderLabelUnitClassName(columns, dataKey) {
-  var _ref3 = columns.find(function (column) {
-      return column.key === dataKey;
-    }) || {},
-    headerLabelUnitClassName = _ref3.headerLabelUnitClassName;
-  return headerLabelUnitClassName || '';
-}
-var SETTING_COLUMN_WIDTH = 25;
-var VirtualizedTableComponent = function VirtualizedTableComponent(_ref4) {
-  var columns = _ref4.columns,
-    data = _ref4.data,
-    useColumnSetting = _ref4.useColumnSetting,
-    useFixedColumnWidth = _ref4.useFixedColumnWidth,
-    onOpenSettingDlg = _ref4.onOpenSettingDlg,
-    width = _ref4.width,
-    height = _ref4.height,
-    headerHeight = _ref4.headerHeight,
-    rowHeight = _ref4.rowHeight,
-    showTopSettingIcon = _ref4.showTopSettingIcon,
-    customMuiStyles = _ref4.customMuiStyles,
-    isTopSettingIconShownAlways = _ref4.isTopSettingIconShownAlways,
-    _ref4$CustomCellRende = _ref4.CustomCellRenderer,
-    CustomCellRenderer = _ref4$CustomCellRende === void 0 ? null : _ref4$CustomCellRende,
-    _ref4$CustomHeaderCel = _ref4.CustomHeaderCellRenderer,
-    CustomHeaderCellRenderer = _ref4$CustomHeaderCel === void 0 ? null : _ref4$CustomHeaderCel,
-    _ref4$customRowStyle = _ref4.customRowStyle,
-    customRowStyle = _ref4$customRowStyle === void 0 ? null : _ref4$customRowStyle,
-    _ref4$sort = _ref4.sort,
-    sort = _ref4$sort === void 0 ? null : _ref4$sort,
-    _ref4$sortBy = _ref4.sortBy,
-    sortBy = _ref4$sortBy === void 0 ? null : _ref4$sortBy,
-    _ref4$sortDirection = _ref4.sortDirection,
-    sortDirection = _ref4$sortDirection === void 0 ? null : _ref4$sortDirection,
-    _ref4$onScroll = _ref4.onScroll,
-    onScroll = _ref4$onScroll === void 0 ? function () {
-      return null;
-    } : _ref4$onScroll;
-  var classes = useStyles();
-  var appliedClasses = _objectSpread(_objectSpread({}, classes), customMuiStyles);
-  var settingColumn = useMemo(function () {
-    return {
-      label: '',
-      key: 'setting',
-      width: useColumnSetting ? SETTING_COLUMN_WIDTH : 0
-    };
-  }, [useColumnSetting]);
-  var visibleColumns = useMemo(function () {
-    return columns.filter(function (column) {
-      return column.show;
-    });
-  }, [columns]);
-
-  // NOTE: Add setting column
-  var tableColumns = useMemo(function () {
-    return useColumnSetting ? [].concat(_toConsumableArray(visibleColumns), [settingColumn]) : visibleColumns;
-  }, [visibleColumns, useColumnSetting, settingColumn]);
-  var columnWidthDict = useMemo(function () {
-    if (width <= 0) {
-      return {};
-    }
-
-    // NOTE: Reserve space for setting column
-    var result = _defineProperty({}, settingColumn.key, settingColumn.width);
-
-    // NOTE: Keep the columns that had been adjusted due to expected width is smaller than min width
-    var adjustedColumns = [];
-
-    // NOTE: Give fixed width to the columns with "width" field
-    visibleColumns.filter(function (column) {
-      return Number.isFinite(column.width);
-    }).forEach(function (column) {
-      result[column.key] = column.width - 1;
-      adjustedColumns.push(column.width - 1);
-    });
-    visibleColumns.filter(function (column) {
-      return !Number.isFinite(column.width);
-    }).forEach(function (column) {
-      // NOTE: Width sum of adjusted columns
-      var sumOfAdjustColumnWidth = adjustedColumns.reduce(function (subResult, columnWidth) {
-        return subResult + columnWidth;
-      }, 0);
-      // NOTE: Expected space for the column
-      var calculatedWidth = Math.floor((width - sumOfAdjustColumnWidth - settingColumn.width) / (visibleColumns.length - adjustedColumns.length));
-      var requiredWidth = column.minWidth || DEFAULT_COLUMN_MIN_WIDTH;
-      var adjustedWidth = calculatedWidth < requiredWidth ? requiredWidth : calculatedWidth;
-      result[column.key] = adjustedWidth - 1;
-      adjustedColumns.push(adjustedWidth - 1);
-    });
-    return result;
-  }, [width, visibleColumns, settingColumn]);
-
-  // NOTE: Calculate table width from adjusted columns width
-  var tableWidth = useMemo(function () {
-    return Object.values(columnWidthDict).reduce(function (result, item) {
-      return result + item;
-    }, 0);
-  }, [columnWidthDict]);
-  var isTopSettingIconShown = isTopSettingIconShownAlways || tableWidth - SETTING_COLUMN_WIDTH / 2 >= width;
-  useEffect(function () {
-    showTopSettingIcon(isTopSettingIconShown);
-  }, [isTopSettingIconShown]);
-
-  // NOTE: react-virtualzed table props
-  var rowClassName = function rowClassName(_ref5) {
-    var index = _ref5.index;
-    return classNames(_defineProperty({}, appliedClasses.oddRow, index % 2 === 1));
-  };
-
-  // NOTE: table header
-  var headerRenderer = function headerRenderer(headerData) {
-    var label = headerData.label,
-      dataKey = headerData.dataKey;
-    var isSortable = sortBy || sortDirection || sort;
-    if (CustomHeaderCellRenderer) {
-      return /*#__PURE__*/jsx(CustomHeaderCellRenderer, {
-        columnKey: dataKey,
-        columns: columns,
-        sortBy: sortBy,
-        sortDirection: sortDirection
-      });
-    }
-    if (dataKey === settingColumn.key) {
-      return !isTopSettingIconShown ? /*#__PURE__*/jsx(IconButton, {
-        size: "small",
-        "aria-label": "customize columns",
-        className: appliedClasses.settingIcon,
-        onClick: onOpenSettingDlg,
-        children: /*#__PURE__*/jsx(Settings, {
-          fontSize: "inherit"
-        })
-      }) : null;
-    }
-    return /*#__PURE__*/jsxs(Typography, {
-      variant: "body2",
-      className: classNames(appliedClasses.headerLabel, getHeaderLabelClassName(columns, dataKey)),
-      children: [label, "\xA0", /*#__PURE__*/jsx("span", {
-        className: classNames(appliedClasses.unitLabel, getHeaderLabelUnitClassName(columns, dataKey)),
-        children: getUnitText(columns, dataKey)
-      }), isSortable && dataKey !== sortBy && /*#__PURE__*/jsx(Tooltip, {
-        title: "Sort A-Z",
-        children: /*#__PURE__*/jsx(Sort, {
-          fontSize: "small",
-          className: classes.sortIcon
-        })
-      }), isSortable && dataKey === sortBy && (sortDirection === SortDirection.ASC ? /*#__PURE__*/jsx(ArrowUpward, {
-        fontSize: "small",
-        className: classes.sortIcon
-      }) : /*#__PURE__*/jsx(ArrowDownward, {
-        fontSize: "small",
-        className: classes.sortIcon
-      }))]
-    });
-  };
-
-  // NOTE: table body cells
-  var cellRenderer = function cellRenderer(cellData) {
-    var dataKey = cellData.dataKey,
-      rowData = cellData.rowData;
-    if (CustomCellRenderer) {
-      return /*#__PURE__*/jsx(CustomCellRenderer, {
-        columnKey: dataKey,
-        value: rowData[dataKey],
-        rowData: rowData,
-        columns: columns
-      });
-    }
-    return /*#__PURE__*/jsx(Typography, {
-      variant: "body2",
-      className: appliedClasses.cellData,
-      children: rowData[dataKey]
-    });
-  };
-  return /*#__PURE__*/jsx(Fragment, {
-    children: /*#__PURE__*/jsx(Table, {
-      width: useFixedColumnWidth ? tableWidth : width,
-      height: height,
-      headerHeight: headerHeight,
-      rowClassName: rowClassName,
-      rowHeight: rowHeight,
-      rowCount: data.length,
-      rowGetter: function rowGetter(_ref6) {
-        var index = _ref6.index;
-        return data[index];
-      },
-      rowStyle: customRowStyle || {} // Optional custom inline style
-      ,
-      className: appliedClasses.table,
-      sort: sort,
-      sortBy: sortBy,
-      sortDirection: sortDirection,
-      onScroll: onScroll,
-      children: tableColumns.map(function (column) {
-        return /*#__PURE__*/jsx(Column, {
-          width: columnWidthDict[column.key] || 0,
-          dataKey: column.key,
-          label: column.label,
-          headerRenderer: headerRenderer,
-          cellRenderer: cellRenderer
-        }, column.key);
-      })
-    })
-  });
-};
-
-export { VirtualizedTableComponent, VirtualizedTableComponent as default };
-//# sourceMappingURL=VirtualizedTable.js.map
+import{__assign as e,__spreadArray as t}from'./../../ext-esm/tslib/tslib.es6.js';import{jsx as n,Fragment as r,jsxs as i}from"react/jsx-runtime";import{useMemo as o,useEffect as l}from"react";import a from"classnames";import{Table as u,Column as c,SortDirection as s}from"react-virtualized";import{makeStyles as d,IconButton as m,Typography as f,Tooltip as h}from"@material-ui/core";import{Settings as p,Sort as g,ArrowUpward as b,ArrowDownward as y}from"@material-ui/icons";import{getUnitDisplay as w}from"../../utils/convert.js";var v=d((function(e){return{table:{"& .ReactVirtualized__Table__headerRow":{textTransform:"none",borderBottom:e.isLightTheme?"1px solid rgba(224, 224, 224, 1)":"1px solid rgba(81, 81, 81, 1)"},"& .ReactVirtualized__Table__row":{borderBottom:e.isLightTheme?"1px solid rgba(224, 224, 224, 1)":"1px solid rgba(81, 81, 81, 1)"},"& .ReactVirtualized__Table__Grid":{outline:"none"},"& .ReactVirtualized__Table__headerColumn":{outline:"none"}},oddRow:{backgroundColor:e.isLightTheme?"rgba(189, 189, 189, 0.1)":"#303030"},headerLabel:{lineHeight:"14px",fontSize:"12px",fontStyle:"normal",letterSpacing:"-0.25px",display:"flex",alignItems:"center",flexWrap:"wrap"},cellData:{lineHeight:"14px",fontSize:"12px",fontWeight:"normal",fontStyle:"normal",letterSpacing:"0.15px"},unitLabel:{fontSize:"10px",opacity:.5},settingIcon:{padding:"3px",fontSize:"20px"},sortIcon:{fontSize:"16px"}}}));function S(e,t){var n=e.find((function(e){return e.key===t}))||{},r=n.unitType,i=n.customUnit;return i?"(".concat(i,")"):r?"(".concat(w(r),")"):""}function x(e,t){return(e.find((function(e){return e.key===t}))||{}).headerLabelClassName||""}function _(e,t){return(e.find((function(e){return e.key===t}))||{}).headerLabelUnitClassName||""}var z=function(d){var w=d.columns,z=d.data,C=d.useColumnSetting,k=d.useFixedColumnWidth,N=d.onOpenSettingDlg,R=d.width,T=d.height,I=d.headerHeight,L=d.rowHeight,D=d.showTopSettingIcon,H=d.customMuiStyles,B=d.isTopSettingIconShownAlways,K=d.CustomCellRenderer,j=void 0===K?null:K,V=d.CustomHeaderCellRenderer,W=void 0===V?null:V,A=d.customRowStyle,F=void 0===A?null:A,E=d.sort,G=void 0===E?null:E,M=d.sortBy,O=void 0===M?null:M,U=d.sortDirection,Z=void 0===U?null:U,q=d.onScroll,J=void 0===q?function(){return null}:q,P=v(),Q=e(e({},P),H),X=o((function(){return{label:"",key:"setting",width:C?25:0}}),[C]),Y=o((function(){return w.filter((function(e){return e.show}))}),[w]),$=o((function(){return C?t(t([],Y,!0),[X],!1):Y}),[Y,C,X]),ee=o((function(){var e;if(R<=0)return{};var t=((e={})[X.key]=X.width,e),n=[];return Y.filter((function(e){return Number.isFinite(e.width)})).forEach((function(e){t[e.key]=e.width-1,n.push(e.width-1)})),Y.filter((function(e){return!Number.isFinite(e.width)})).forEach((function(e){var r=n.reduce((function(e,t){return e+t}),0),i=Math.floor((R-r-X.width)/(Y.length-n.length)),o=e.minWidth||65,l=i<o?o:i;t[e.key]=l-1,n.push(l-1)})),t}),[R,Y,X]),te=o((function(){return Object.values(ee).reduce((function(e,t){return e+t}),0)}),[ee]),ne=B||te-12.5>=R;l((function(){D(ne)}),[ne]);var re=function(e){var t=e.label,r=e.dataKey,o=O||Z||G;return W?n(W,{columnKey:r,columns:w,sortBy:O,sortDirection:Z}):r===X.key?ne?null:n(m,{size:"small","aria-label":"customize columns",className:Q.settingIcon,onClick:N,children:n(p,{fontSize:"inherit"})}):i(f,{variant:"body2",className:a(Q.headerLabel,x(w,r)),children:[t," ",n("span",{className:a(Q.unitLabel,_(w,r)),children:S(w,r)}),o&&r!==O&&n(h,{title:"Sort A-Z",children:n(g,{fontSize:"small",className:P.sortIcon})}),o&&r===O&&(Z===s.ASC?n(b,{fontSize:"small",className:P.sortIcon}):n(y,{fontSize:"small",className:P.sortIcon}))]})},ie=function(e){var t=e.dataKey,r=e.rowData;return j?n(j,{columnKey:t,value:r[t],rowData:r,columns:w}):n(f,{variant:"body2",className:Q.cellData,children:r[t]})};return n(r,{children:n(u,{width:k?te:R,height:T,headerHeight:I,rowClassName:function(e){var t,n=e.index;return a(((t={})[Q.oddRow]=n%2==1,t))},rowHeight:L,rowCount:z.length,rowGetter:function(e){var t=e.index;return z[t]},rowStyle:F||{},className:Q.table,sort:G,sortBy:O,sortDirection:Z,onScroll:J,children:$.map((function(e){return n(c,{width:ee[e.key]||0,dataKey:e.key,label:e.label,headerRenderer:re,cellRenderer:ie},e.key)}))})})};export{z as VirtualizedTableComponent,z as default};

package/components/VirtualizedTable/index.js

@@ -1,158 +1 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useState, useMemo } from 'react';
-import { AutoSizer } from 'react-virtualized';
-import { makeStyles, IconButton } from '@material-ui/core';
-import SettingsIcon from '@material-ui/icons/Settings';
-import CustomizeColumnsDialog from './CustomizeColumnsDialog.js';
-import { VirtualizedTableComponent } from './VirtualizedTable.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-
-var _excluded = ["columns", "data", "useColumnSetting", "useFixedColumnWidth", "headerHeight", "rowHeight", "savedColumns", "onChangeColumns", "customMuiStyles", "isTopSettingIconShownAlways", "CustomCellRenderer", "CustomHeaderCellRenderer", "customRowStyle", "sort", "sortBy", "sortDirection"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var useStyles = makeStyles({
-  vtTopSetting: {
-    position: 'relative',
-    height: '25px'
-  },
-  vtTopSettingIcon: {
-    position: 'fixed',
-    right: '20px',
-    padding: '3px',
-    fontSize: '20px'
-  }
-});
-var VTableComponent = function VTableComponent(_ref) {
-  var _ref$columns = _ref.columns,
-    columns = _ref$columns === void 0 ? [] : _ref$columns,
-    _ref$data = _ref.data,
-    data = _ref$data === void 0 ? [] : _ref$data,
-    _ref$useColumnSetting = _ref.useColumnSetting,
-    useColumnSetting = _ref$useColumnSetting === void 0 ? false : _ref$useColumnSetting,
-    _ref$useFixedColumnWi = _ref.useFixedColumnWidth,
-    useFixedColumnWidth = _ref$useFixedColumnWi === void 0 ? false : _ref$useFixedColumnWi,
-    _ref$headerHeight = _ref.headerHeight,
-    headerHeight = _ref$headerHeight === void 0 ? 50 : _ref$headerHeight,
-    _ref$rowHeight = _ref.rowHeight,
-    rowHeight = _ref$rowHeight === void 0 ? 35 : _ref$rowHeight,
-    _ref$savedColumns = _ref.savedColumns,
-    savedColumns = _ref$savedColumns === void 0 ? [] : _ref$savedColumns,
-    _ref$onChangeColumns = _ref.onChangeColumns,
-    onChangeColumns = _ref$onChangeColumns === void 0 ? null : _ref$onChangeColumns,
-    _ref$customMuiStyles = _ref.customMuiStyles,
-    customMuiStyles = _ref$customMuiStyles === void 0 ? {} : _ref$customMuiStyles,
-    _ref$isTopSettingIcon = _ref.isTopSettingIconShownAlways,
-    isTopSettingIconShownAlways = _ref$isTopSettingIcon === void 0 ? false : _ref$isTopSettingIcon,
-    _ref$CustomCellRender = _ref.CustomCellRenderer,
-    CustomCellRenderer = _ref$CustomCellRender === void 0 ? null : _ref$CustomCellRender,
-    _ref$CustomHeaderCell = _ref.CustomHeaderCellRenderer,
-    CustomHeaderCellRenderer = _ref$CustomHeaderCell === void 0 ? null : _ref$CustomHeaderCell,
-    _ref$customRowStyle = _ref.customRowStyle,
-    customRowStyle = _ref$customRowStyle === void 0 ? null : _ref$customRowStyle,
-    _ref$sort = _ref.sort,
-    sort = _ref$sort === void 0 ? null : _ref$sort,
-    _ref$sortBy = _ref.sortBy,
-    sortBy = _ref$sortBy === void 0 ? null : _ref$sortBy,
-    _ref$sortDirection = _ref.sortDirection,
-    sortDirection = _ref$sortDirection === void 0 ? null : _ref$sortDirection,
-    otherProps = _objectWithoutProperties(_ref, _excluded);
-  var classes = useStyles();
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    showSetting = _useState4[0],
-    setShowSetting = _useState4[1];
-
-  // NOTE: Validate and adjust the stored columns
-  var adjustedColumns = useMemo(function () {
-    var result = [];
-
-    // NOTE: Check if stored columns are still valid
-    savedColumns.forEach(function (savedColumn) {
-      var foundColumn = columns.find(function (column) {
-        return column.key === savedColumn.key;
-      });
-      if (foundColumn) {
-        result.push(_objectSpread(_objectSpread({}, foundColumn), {}, {
-          show: savedColumn.show
-        }));
-      }
-    });
-
-    // NOTE: Add modified or new columns
-    columns.forEach(function (column) {
-      var existingColumn = result.find(function (item) {
-        return item.key === column.key;
-      });
-      if (!existingColumn) {
-        result.push(column);
-      }
-    });
-    return result;
-  }, [columns, savedColumns]);
-  var settingRowHeight = useColumnSetting && showSetting ? 25 : 0;
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [useColumnSetting && showSetting && /*#__PURE__*/jsx("div", {
-      className: classes.vtTopSetting,
-      children: /*#__PURE__*/jsx(IconButton, {
-        size: "small",
-        className: classes.vtTopSettingIcon,
-        onClick: function onClick() {
-          return setOpen(true);
-        },
-        children: /*#__PURE__*/jsx(SettingsIcon, {
-          fontSize: "inherit"
-        })
-      })
-    }), /*#__PURE__*/jsx(AutoSizer, {
-      children: function children(_ref2) {
-        var width = _ref2.width,
-          height = _ref2.height;
-        return /*#__PURE__*/jsx(VirtualizedTableComponent, _objectSpread({
-          width: width,
-          height: height - settingRowHeight,
-          columns: adjustedColumns,
-          useColumnSetting: useColumnSetting,
-          onOpenSettingDlg: function onOpenSettingDlg() {
-            return setOpen(true);
-          },
-          showTopSettingIcon: function showTopSettingIcon(bShow) {
-            return setShowSetting(bShow);
-          },
-          customMuiStyles: customMuiStyles,
-          data: data,
-          useFixedColumnWidth: useFixedColumnWidth,
-          headerHeight: headerHeight,
-          rowHeight: rowHeight,
-          isTopSettingIconShownAlways: isTopSettingIconShownAlways,
-          CustomCellRenderer: CustomCellRenderer,
-          CustomHeaderCellRenderer: CustomHeaderCellRenderer,
-          customRowStyle: customRowStyle,
-          sort: sort,
-          sortBy: sortBy,
-          sortDirection: sortDirection
-        }, otherProps));
-      }
-    }), /*#__PURE__*/jsx(CustomizeColumnsDialog, {
-      open: open,
-      columns: adjustedColumns,
-      handleCloseWithCancel: function handleCloseWithCancel() {
-        return setOpen(false);
-      },
-      handleCloseWithOK: function handleCloseWithOK(newColumns) {
-        if (onChangeColumns) {
-          onChangeColumns(newColumns);
-        }
-        setOpen(false);
-      }
-    })]
-  });
-};
-
-export { VTableComponent, VTableComponent as default };
-//# sourceMappingURL=index.js.map
+import{__rest as o,__assign as e}from'./../../ext-esm/tslib/tslib.es6.js';import{jsxs as t,Fragment as i,jsx as n}from"react/jsx-runtime";import{useState as r,useMemo as l}from"react";import{AutoSizer as s}from"react-virtualized";import{makeStyles as u,IconButton as d}from"@material-ui/core";import m from"@material-ui/icons/Settings";import a from"./CustomizeColumnsDialog.js";import{VirtualizedTableComponent as c}from"./VirtualizedTable.js";var h=u({vtTopSetting:{position:"relative",height:"25px"},vtTopSettingIcon:{position:"fixed",right:"20px",padding:"3px",fontSize:"20px"}}),v=function(u){var v=u.columns,C=void 0===v?[]:v,f=u.data,g=void 0===f?[]:f,p=u.useColumnSetting,S=void 0!==p&&p,w=u.useFixedColumnWidth,y=void 0!==w&&w,x=u.headerHeight,H=void 0===x?50:x,R=u.rowHeight,T=void 0===R?35:R,z=u.savedColumns,I=void 0===z?[]:z,k=u.onChangeColumns,D=void 0===k?null:k,W=u.customMuiStyles,j=void 0===W?{}:W,b=u.isTopSettingIconShownAlways,A=void 0!==b&&b,B=u.CustomCellRenderer,F=void 0===B?null:B,M=u.CustomHeaderCellRenderer,E=void 0===M?null:M,N=u.customRowStyle,O=void 0===N?null:N,K=u.sort,V=void 0===K?null:K,_=u.sortBy,q=void 0===_?null:_,G=u.sortDirection,J=void 0===G?null:G,L=o(u,["columns","data","useColumnSetting","useFixedColumnWidth","headerHeight","rowHeight","savedColumns","onChangeColumns","customMuiStyles","isTopSettingIconShownAlways","CustomCellRenderer","CustomHeaderCellRenderer","customRowStyle","sort","sortBy","sortDirection"]),P=h(),Q=r(!1),U=Q[0],X=Q[1],Y=r(!1),Z=Y[0],$=Y[1],oo=l((function(){var o=[];return I.forEach((function(t){var i=C.find((function(o){return o.key===t.key}));i&&o.push(e(e({},i),{show:t.show}))})),C.forEach((function(e){o.find((function(o){return o.key===e.key}))||o.push(e)})),o}),[C,I]),eo=S&&Z?25:0;return t(i,{children:[S&&Z&&n("div",{className:P.vtTopSetting,children:n(d,{size:"small",className:P.vtTopSettingIcon,onClick:function(){return X(!0)},children:n(m,{fontSize:"inherit"})})}),n(s,{children:function(o){var t=o.width,i=o.height;return n(c,e({width:t,height:i-eo,columns:oo,useColumnSetting:S,onOpenSettingDlg:function(){return X(!0)},showTopSettingIcon:function(o){return $(o)},customMuiStyles:j,data:g,useFixedColumnWidth:y,headerHeight:H,rowHeight:T,isTopSettingIconShownAlways:A,CustomCellRenderer:F,CustomHeaderCellRenderer:E,customRowStyle:O,sort:V,sortBy:q,sortDirection:J},L))}}),n(a,{open:U,columns:oo,handleCloseWithCancel:function(){return X(!1)},handleCloseWithOK:function(o){D&&D(o),X(!1)}})]})};export{v as VTableComponent,v as default};