@elliemae/ds-datagrids 1.61.0 → 2.0.0-alpha.12

package/esm/plugins/column-sizing/useStylesheetHelpers.js

@@ -1,21 +1,25 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import * as stylesheet from 'stylesheet-helpers';
 import { useState, useEffect } from 'react';
 import { set } from '@elliemae/ds-utilities';
 import getColumnFromProperty from './getColumnNameFromProperty.js';
 import { getScrollbarWidth } from '../../utilities/getScrollbarSize.js';
 
-var SCROLLBAR_WIDTH = getScrollbarWidth();
-var RowStylesheetHelper = function RowStylesheetHelper(_ref) {
-  var grid = _ref.grid,
-      className = _ref.className;
-
-  var _stylesheet$create = stylesheet.create(),
-      styleSheet = _stylesheet$create.styleSheet,
-      styleSheetElement = _stylesheet$create.styleSheetElement;
-
-  var update = function update(width) {
-    var widths = typeof width === 'string' ? width : "".concat(width, "px");
+const SCROLLBAR_WIDTH = getScrollbarWidth();
+const RowStylesheetHelper = _ref => {
+  let {
+    grid,
+    className
+  } = _ref;
+  const {
+    styleSheet,
+    styleSheetElement
+  } = stylesheet.create();
+
+  const update = width => {
+    const widths = typeof width === 'string' ? width : "".concat(width, "px");
     stylesheet.updateProperties(window, styleSheet, className, width ? {
       width: widths,
       minWidth: widths,
@@ -25,11 +29,10 @@ var RowStylesheetHelper = function RowStylesheetHelper(_ref) {
       minWidth: null,
       maxWidth: null
     });
-
-    var _grid$getState = grid.getState(),
-        hasScroll = _grid$getState.hasScroll;
-
-    var headerWidth = "".concat(width + (hasScroll ? SCROLLBAR_WIDTH : 0), "px");
+    const {
+      hasScroll
+    } = grid.getState();
+    const headerWidth = "".concat(width + (hasScroll ? SCROLLBAR_WIDTH : 0), "px");
     stylesheet.updateProperties(window, styleSheet, "".concat(className, "-header"), width ? {
       width: headerWidth,
       minWidth: headerWidth,
@@ -41,39 +44,38 @@ var RowStylesheetHelper = function RowStylesheetHelper(_ref) {
     });
   };
 
-  var remove = function remove() {
-    return styleSheetElement.remove();
-  };
+  const remove = () => styleSheetElement.remove();
 
-  var getRowClassName = function getRowClassName() {
-    return className;
-  };
+  const getRowClassName = () => className;
 
   return {
-    update: update,
-    remove: remove,
-    getRowClassName: getRowClassName
+    update,
+    remove,
+    getRowClassName
   };
 };
 
-var getColumnClassName = function getColumnClassName(_ref2) {
-  var globalId = _ref2.globalId,
-      column = _ref2.column,
-      _ref2$isHeader = _ref2.isHeader,
-      isHeader = _ref2$isHeader === void 0 ? false : _ref2$isHeader,
-      getId = _ref2.getId;
+const getColumnClassName = _ref2 => {
+  let {
+    globalId,
+    column,
+    isHeader = false,
+    getId
+  } = _ref2;
   return "column-".concat(globalId, "-").concat(getId(column)).concat(isHeader ? '-header' : '');
 };
 
 function setWidth(_ref3) {
-  var styleSheet = _ref3.styleSheet,
-      className = _ref3.className,
-      width = _ref3.width,
-      minWidth = _ref3.minWidth;
-  var widths;
+  let {
+    styleSheet,
+    className,
+    width,
+    minWidth
+  } = _ref3;
+  let widths;
   if (typeof width === 'string') widths = width;
   if (typeof width === 'number') widths = "".concat(width, "px");
-  var minWidths;
+  let minWidths;
   if (typeof minWidth === 'string') minWidths = minWidth;
   if (typeof minWidth === 'number') minWidths = "".concat(minWidth, "px");
   stylesheet.updateProperties(window, styleSheet, className, {
@@ -85,94 +87,101 @@ function setWidth(_ref3) {
 }
 
 function updateStyle(_ref4) {
-  var styleSheet = _ref4.styleSheet,
-      className = _ref4.className,
-      style = _ref4.style;
+  let {
+    styleSheet,
+    className,
+    style
+  } = _ref4;
   stylesheet.updateProperties(window, styleSheet, className, style);
 }
 
 function columnSizesHelperImpl(_ref5) {
-  var globalId = _ref5.globalId,
-      _ref5$getId = _ref5.getId,
-      getId = _ref5$getId === void 0 ? function (_ref6) {
-    var property = _ref6.property;
-    return getColumnFromProperty(property);
-  } : _ref5$getId;
-
-  var _stylesheet$create2 = stylesheet.create(),
-      styleSheetElement = _stylesheet$create2.styleSheetElement,
-      styleSheet = _stylesheet$create2.styleSheet;
-
-  var updateBodyHeaderWidth = function updateBodyHeaderWidth(_ref7) {
-    var className = _ref7.className,
-        headerClassName = _ref7.headerClassName,
-        width = _ref7.width,
-        minWidth = _ref7.minWidth;
+  let {
+    globalId,
+    getId = _ref6 => {
+      let {
+        property
+      } = _ref6;
+      return getColumnFromProperty(property);
+    }
+  } = _ref5;
+  const {
+    styleSheetElement,
+    styleSheet
+  } = stylesheet.create();
+
+  const updateBodyHeaderWidth = _ref7 => {
+    let {
+      className,
+      headerClassName,
+      width,
+      minWidth
+    } = _ref7;
     setWidth({
-      styleSheet: styleSheet,
-      className: className,
-      width: width,
-      minWidth: minWidth
+      styleSheet,
+      className,
+      width,
+      minWidth
     });
     setWidth({
-      styleSheet: styleSheet,
+      styleSheet,
       className: headerClassName,
-      width: width,
-      minWidth: minWidth,
+      width,
+      minWidth,
       isHeader: true
     });
   };
 
   return {
-    decorateColumns: function decorateColumns(columns, grid) {
-      var _grid$getInstance = grid.getInstance(),
-          minColumnWidth = _grid$getInstance.props.minColumnWidth;
-
-      return columns.map(function (column) {
-        var cellClassName = getColumnClassName({
-          globalId: globalId,
-          getId: getId,
-          column: column
+    decorateColumns: (columns, grid) => {
+      const {
+        props: {
+          minColumnWidth
+        }
+      } = grid.getInstance();
+      return columns.map(column => {
+        const cellClassName = getColumnClassName({
+          globalId,
+          getId,
+          column
         });
-        var headerClassName = "".concat(cellClassName, "-header");
+        const headerClassName = "".concat(cellClassName, "-header");
         set(column, 'header.props.className', headerClassName);
         set(column, 'cell.props.className', cellClassName);
 
-        column.updateBodyHeaderWidth = function (width, minWidth) {
+        column.updateBodyHeaderWidth = (width, minWidth) => {
           updateBodyHeaderWidth({
             className: cellClassName,
-            headerClassName: headerClassName,
-            width: width,
-            minWidth: minWidth
+            headerClassName,
+            width,
+            minWidth
           });
         };
 
-        column.updateWidth = function (width, minWidth) {
+        column.updateWidth = (width, minWidth) => {
           setWidth({
-            styleSheet: styleSheet,
-            className: cellClassName,
-            width: width,
-            minWidth: minWidth
-          });
-        };
-
-        column.updateStyle = function (style) {
-          return updateStyle({
-            styleSheet: styleSheet,
+            styleSheet,
             className: cellClassName,
-            style: style
+            width,
+            minWidth
           });
         };
 
-        column.headerHookEffects = [function () {
-          useEffect(function () {
-            var _grid$getInstance2 = grid.getInstance(),
-                resizedColumns = _grid$getInstance2.resizedColumns;
+        column.updateStyle = style => updateStyle({
+          styleSheet,
+          className: cellClassName,
+          style
+        });
 
-            var resizedWidth = resizedColumns.current[column.uuid];
+        column.headerHookEffects = [() => {
+          useEffect(() => {
+            const {
+              resizedColumns
+            } = grid.getInstance();
+            const resizedWidth = resizedColumns.current[column.uuid];
             updateBodyHeaderWidth({
               className: cellClassName,
-              headerClassName: headerClassName,
+              headerClassName,
               width: resizedWidth || column.width || minColumnWidth,
               minWidth: resizedWidth || column.minWidth || minColumnWidth || column.width
             });
@@ -181,60 +190,56 @@ function columnSizesHelperImpl(_ref5) {
         return column;
       });
     },
-    getColumnCellClassName: function getColumnCellClassName(column) {
+
+    getColumnCellClassName(column) {
       return getColumnClassName({
-        globalId: globalId,
-        getId: getId,
-        column: column
+        globalId,
+        getId,
+        column
       });
     },
-    getColumnHeaderClassName: function getColumnHeaderClassName(column) {
+
+    getColumnHeaderClassName(column) {
       return "".concat(getColumnClassName({
-        globalId: globalId,
-        getId: getId,
-        column: column
+        globalId,
+        getId,
+        column
       }), "-header");
     },
-    cleanup: function cleanup() {
+
+    cleanup() {
       styleSheetElement.remove();
     }
+
   };
 }
 
 function useStylesheetHelpers(grid) {
-  var _grid$props = grid.props,
-      bindColumnsSizeTo = _grid$props.bindColumnsSizeTo,
-      bindRowSizeTo = _grid$props.bindRowSizeTo;
-
-  var _useState = useState(function () {
-    return columnSizesHelperImpl({
-      globalId: bindColumnsSizeTo || grid.uuid,
-      getId: function getId(_ref8) {
-        var uuid = _ref8.uuid;
-        return getColumnFromProperty(uuid);
-      }
-    });
-  }),
-      _useState2 = _slicedToArray(_useState, 1),
-      columnsStylesheet = _useState2[0];
-
-  var rowClassName = "row-".concat(bindRowSizeTo || grid.uuid);
-
-  var _useState3 = useState(function () {
-    return RowStylesheetHelper({
-      grid: grid,
-      className: rowClassName
-    });
-  }),
-      _useState4 = _slicedToArray(_useState3, 1),
-      rowsStylesheet = _useState4[0];
-
+  const {
+    props: {
+      bindColumnsSizeTo,
+      bindRowSizeTo
+    }
+  } = grid;
+  const [columnsStylesheet] = useState(() => columnSizesHelperImpl({
+    globalId: bindColumnsSizeTo || grid.uuid,
+    getId: _ref8 => {
+      let {
+        uuid
+      } = _ref8;
+      return getColumnFromProperty(uuid);
+    }
+  }));
+  const rowClassName = "row-".concat(bindRowSizeTo || grid.uuid);
+  const [rowsStylesheet] = useState(() => RowStylesheetHelper({
+    grid,
+    className: rowClassName
+  }));
   return {
-    columnsStylesheet: columnsStylesheet,
-    rowsStylesheet: rowsStylesheet,
-    rowClassName: rowClassName
+    columnsStylesheet,
+    rowsStylesheet,
+    rowClassName
   };
 }
 
 export { RowStylesheetHelper, useStylesheetHelpers };
-//# sourceMappingURL=useStylesheetHelpers.js.map

package/esm/plugins/column-sizing/utils.js

@@ -1,19 +1,20 @@
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { get } from '@elliemae/ds-utilities';
 
 function getScrollbarSizeFromHeaderAndBody(refs) {
-  var innerBodyOffsetWidth = get(refs, ['innerBody', 'current', 'offsetWidth']);
-  var headerOffsetWidth = get(refs, ['header', 'current', 'offsetWidth']);
+  const innerBodyOffsetWidth = get(refs, ['innerBody', 'current', 'offsetWidth']);
+  const headerOffsetWidth = get(refs, ['header', 'current', 'offsetWidth']);
   return headerOffsetWidth - innerBodyOffsetWidth;
 }
-var isScrollbarVisible = function isScrollbarVisible(element) {
-  return element.scrollHeight > element.clientHeight;
-};
-var getPercentageValue = function getPercentageValue(percentString) {
+const isScrollbarVisible = element => element.scrollHeight > element.clientHeight;
+const getPercentageValue = percentString => {
   if (typeof percentString !== 'string') return null;
-  var result = percentString.match(/(\d+|\d*[.,]\d{1,2})/);
+  const result = percentString.match(/(\d+|\d*[.,]\d{1,2})/);
   return result && Number(result[0]);
 };
-var getColumnWidthSize = function getColumnWidthSize(width, minWidth, column) {
+const getColumnWidthSize = (width, minWidth, column) => {
   if (column.special) {
     return column.width;
   }
@@ -21,17 +22,16 @@ var getColumnWidthSize = function getColumnWidthSize(width, minWidth, column) {
   if (minWidth && minWidth > width) return minWidth;
   return width;
 };
-var calculateMinWidthForWrappedText = function calculateMinWidthForWrappedText(columns) {
-  var longestWord = 0;
-  columns.forEach(function (_ref) {
-    var label = _ref.label;
-    var localLongestWord = label.split(' ').sort(function (a, b) {
-      return b.length - a.length;
-    })[0].length;
+const calculateMinWidthForWrappedText = columns => {
+  let longestWord = 0;
+  columns.forEach(_ref => {
+    let {
+      label
+    } = _ref;
+    const localLongestWord = label.split(' ').sort((a, b) => b.length - a.length)[0].length;
     if (localLongestWord > longestWord) longestWord = localLongestWord;
   });
   return longestWord * 8.5;
 };
 
 export { calculateMinWidthForWrappedText, getColumnWidthSize, getPercentageValue, getScrollbarSizeFromHeaderAndBody, isScrollbarVisible };
-//# sourceMappingURL=utils.js.map

package/esm/plugins/custom-cell-renderer/CustomRendererPlugin.js

@@ -1,30 +1,10 @@
 import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
 import addCustomRendererToCell from './addCustomRendererToCell.js';
-import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-utilities';
-import '@elliemae/ds-shared/useDataGrid/initColumnDefinition';
-import './getRendererComponent.js';
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'react';
-import '@elliemae/ds-button';
-import '@elliemae/ds-form';
-import '@elliemae/ds-dropdownmenu';
-import '../../index-afbbe9c8.js';
-import '../../components/renderers/defaultClassedRenderers.js';
-import '@elliemae/ds-classnames';
-import '../../blockNames.js';
-import '../../components/renderers/renderRowsLoader.js';
-import '../../components/RowsLoader.js';
-import '@elliemae/ds-spinner';
 
-var decorateColumn = function decorateColumn(column, grid) {
-  return addCustomRendererToCell(grid)(column);
-};
+const decorateColumn = (column, grid) => addCustomRendererToCell(grid)(column);
 
-var CustomRendererPlugin = createInstancePlugin('custom-renderer', {
-  decorateColumn: decorateColumn
+const CustomRendererPlugin = createInstancePlugin('custom-renderer', {
+  decorateColumn
 });
 
 export { CustomRendererPlugin };
-//# sourceMappingURL=CustomRendererPlugin.js.map

package/esm/plugins/custom-cell-renderer/addCustomRendererToCell.js

@@ -1,75 +1,63 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import { get, isFunction } from '@elliemae/ds-utilities';
 import { appendCellFormatter } from '@elliemae/ds-shared/useDataGrid/initColumnDefinition';
 import getRendererComponent from './getRendererComponent.js';
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'react';
-import '@elliemae/ds-button';
-import '@elliemae/ds-form';
-import '@elliemae/ds-dropdownmenu';
-import '../../index-afbbe9c8.js';
-import '../../components/renderers/defaultClassedRenderers.js';
-import '@elliemae/ds-classnames';
-import '../../blockNames.js';
-import '../../components/renderers/renderRowsLoader.js';
-import '../../components/RowsLoader.js';
-import '@elliemae/ds-spinner';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var getRenderer = function getRenderer(renderer, grid, column) {
-  return function (value, metaData) {
-    var _grid$getInstance = grid.getInstance(),
-        _grid$getInstance$pro = _grid$getInstance.props,
-        customHandlers = _grid$getInstance$pro.customHandlers,
-        parentRowData = _grid$getInstance$pro.parentRowData;
-
-    if (column && column.formatExpandable && value && value.props && value.props.children && value.props.children.length === 2) {
-      return [value.props.children[0], renderer({
-        value: value.props.children[1],
-        // apply custom render only to the original value not the arrow
-        metaData: _objectSpread(_objectSpread({}, metaData), {}, {
-          parentRowData: parentRowData
-        }),
-        customHandlers: customHandlers
-      })];
+const getRenderer = (renderer, grid, column) => (value, metaData) => {
+  const {
+    props: {
+      customHandlers,
+      parentRowData
     }
+  } = grid.getInstance();
 
-    return renderer({
-      value: value,
+  if (column && column.formatExpandable && value && value.props && value.props.children && value.props.children.length === 2) {
+    return [value.props.children[0], renderer({
+      value: value.props.children[1],
+      // apply custom render only to the original value not the arrow
       metaData: _objectSpread(_objectSpread({}, metaData), {}, {
-        parentRowData: parentRowData
+        parentRowData
       }),
-      customHandlers: customHandlers
-    });
-  };
+      customHandlers
+    })];
+  }
+
+  return renderer({
+    value,
+    metaData: _objectSpread(_objectSpread({}, metaData), {}, {
+      parentRowData
+    }),
+    customHandlers
+  });
 };
 
-var addCustomRendererToCell = function addCustomRendererToCell(grid) {
-  return function (column) {
-    var _column = column,
-        customRenderer = _column.customRenderer;
-    var customHeaderRenderer = get(column, ['header', 'customRenderer']);
-    if (!customRenderer && !customHeaderRenderer) return column;
-
-    if (isFunction(customHeaderRenderer)) {
-      column.header.formatters.push(getRenderer(customHeaderRenderer, grid));
-    }
-
-    if (isFunction(customRenderer)) {
-      column = appendCellFormatter(getRenderer(customRenderer, grid, column), column);
-    } else {
-      if (!customRenderer) return column;
-      column.cell.formatters.push(function (value, columnData) {
-        return getRendererComponent(grid, customRenderer, columnData);
-      });
-    }
-
-    return column;
-  };
+const addCustomRendererToCell = grid => column => {
+  const {
+    customRenderer
+  } = column;
+  const customHeaderRenderer = get(column, ['header', 'customRenderer']);
+  if (!customRenderer && !customHeaderRenderer) return column;
+
+  if (isFunction(customHeaderRenderer)) {
+    column.header.formatters.push(getRenderer(customHeaderRenderer, grid));
+  }
+
+  if (isFunction(customRenderer)) {
+    column = appendCellFormatter(getRenderer(customRenderer, grid, column), column);
+  } else {
+    if (!customRenderer) return column;
+    column.cell.formatters.push((value, columnData) => getRendererComponent(grid, customRenderer, columnData));
+  }
+
+  return column;
 };
 
 export { addCustomRendererToCell as default, getRenderer };
-//# sourceMappingURL=addCustomRendererToCell.js.map