@elliemae/ds-datagrids 2.3.1 → 3.0.0-alpha.3

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

@@ -1,245 +0,0 @@
-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';
-
-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,
-      maxWidth: widths
-    } : {
-      width: null,
-      minWidth: null,
-      maxWidth: null
-    });
-    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,
-      maxWidth: headerWidth
-    } : {
-      width: null,
-      minWidth: null,
-      maxWidth: null
-    });
-  };
-
-  const remove = () => styleSheetElement.remove();
-
-  const getRowClassName = () => className;
-
-  return {
-    update,
-    remove,
-    getRowClassName
-  };
-};
-
-const getColumnClassName = _ref2 => {
-  let {
-    globalId,
-    column,
-    isHeader = false,
-    getId
-  } = _ref2;
-  return "column-".concat(globalId, "-").concat(getId(column)).concat(isHeader ? '-header' : '');
-};
-
-function setWidth(_ref3) {
-  let {
-    styleSheet,
-    className,
-    width,
-    minWidth
-  } = _ref3;
-  let widths;
-  if (typeof width === 'string') widths = width;
-  if (typeof width === 'number') widths = "".concat(width, "px");
-  let minWidths;
-  if (typeof minWidth === 'string') minWidths = minWidth;
-  if (typeof minWidth === 'number') minWidths = "".concat(minWidth, "px");
-  stylesheet.updateProperties(window, styleSheet, className, {
-    width: "".concat(widths || minWidths),
-    minWidth: "".concat(widths || minWidths),
-    // minWidth: `${minWidths || widths}`,
-    maxWidth: "".concat(widths || minWidths)
-  });
-}
-
-function updateStyle(_ref4) {
-  let {
-    styleSheet,
-    className,
-    style
-  } = _ref4;
-  stylesheet.updateProperties(window, styleSheet, className, style);
-}
-
-function columnSizesHelperImpl(_ref5) {
-  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,
-      className,
-      width,
-      minWidth
-    });
-    setWidth({
-      styleSheet,
-      className: headerClassName,
-      width,
-      minWidth,
-      isHeader: true
-    });
-  };
-
-  return {
-    decorateColumns: (columns, grid) => {
-      const {
-        props: {
-          minColumnWidth
-        }
-      } = grid.getInstance();
-      return columns.map(column => {
-        const cellClassName = getColumnClassName({
-          globalId,
-          getId,
-          column
-        });
-        const headerClassName = "".concat(cellClassName, "-header");
-        set(column, 'header.props.className', headerClassName);
-        set(column, 'cell.props.className', cellClassName);
-
-        column.updateBodyHeaderWidth = (width, minWidth) => {
-          updateBodyHeaderWidth({
-            className: cellClassName,
-            headerClassName,
-            width,
-            minWidth
-          });
-        };
-
-        column.updateWidth = (width, minWidth) => {
-          setWidth({
-            styleSheet,
-            className: cellClassName,
-            width,
-            minWidth
-          });
-        };
-
-        column.updateStyle = style => updateStyle({
-          styleSheet,
-          className: cellClassName,
-          style
-        });
-
-        column.headerHookEffects = [() => {
-          useEffect(() => {
-            const {
-              resizedColumns
-            } = grid.getInstance();
-            const resizedWidth = resizedColumns.current[column.uuid];
-            updateBodyHeaderWidth({
-              className: cellClassName,
-              headerClassName,
-              width: resizedWidth || column.width || minColumnWidth,
-              minWidth: resizedWidth || column.minWidth || minColumnWidth || column.width
-            });
-          }, [column.uuid]);
-        }];
-        return column;
-      });
-    },
-
-    getColumnCellClassName(column) {
-      return getColumnClassName({
-        globalId,
-        getId,
-        column
-      });
-    },
-
-    getColumnHeaderClassName(column) {
-      return "".concat(getColumnClassName({
-        globalId,
-        getId,
-        column
-      }), "-header");
-    },
-
-    cleanup() {
-      styleSheetElement.remove();
-    }
-
-  };
-}
-
-function useStylesheetHelpers(grid) {
-  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,
-    rowsStylesheet,
-    rowClassName
-  };
-}
-
-export { RowStylesheetHelper, useStylesheetHelpers };

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

@@ -1,37 +0,0 @@
-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) {
-  const innerBodyOffsetWidth = get(refs, ['innerBody', 'current', 'offsetWidth']);
-  const headerOffsetWidth = get(refs, ['header', 'current', 'offsetWidth']);
-  return headerOffsetWidth - innerBodyOffsetWidth;
-}
-const isScrollbarVisible = element => element.scrollHeight > element.clientHeight;
-const getPercentageValue = percentString => {
-  if (typeof percentString !== 'string') return null;
-  const result = percentString.match(/(\d+|\d*[.,]\d{1,2})/);
-  return result && Number(result[0]);
-};
-const getColumnWidthSize = (width, minWidth, column) => {
-  if (column.special) {
-    return column.width;
-  }
-
-  if (minWidth && minWidth > width) return minWidth;
-  return width;
-};
-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 };

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

@@ -1,10 +0,0 @@
-import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
-import addCustomRendererToCell from './addCustomRendererToCell.js';
-
-const decorateColumn = (column, grid) => addCustomRendererToCell(grid)(column);
-
-const CustomRendererPlugin = createInstancePlugin('custom-renderer', {
-  decorateColumn
-});
-
-export { CustomRendererPlugin };

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

@@ -1,63 +0,0 @@
-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';
-
-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; }
-const getRenderer = (renderer, grid, column) => (value, metaData) => {
-  const {
-    props: {
-      customHandlers,
-      parentRowData
-    }
-  } = grid.getInstance();
-
-  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
-      }),
-      customHandlers
-    })];
-  }
-
-  return renderer({
-    value,
-    metaData: _objectSpread(_objectSpread({}, metaData), {}, {
-      parentRowData
-    }),
-    customHandlers
-  });
-};
-
-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 };

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

@@ -1,56 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-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 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'react';
-import DSButton from '@elliemae/ds-button';
-import { DSCheckbox, DSComboBox, DSRadio, DSTextBox, DSToggle } from '@elliemae/ds-form';
-import DSDropdownMenu from '@elliemae/ds-dropdownmenu';
-import * as index from '../../components/renderers/index.js';
-import { jsx } from 'react/jsx-runtime';
-
-const _excluded = ["type", "handlers"];
-
-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; }
-const components = {
-  DSButton,
-  DSCheckbox,
-  DSComboBox,
-  DSRadio,
-  DSTextBox,
-  DSToggle,
-  DSDropdownMenu
-};
-
-const getRendererComponent = (_ref2, _ref, _ref3) => {
-  let {
-    props
-  } = _ref2;
-  let {
-    rowData
-  } = _ref3;
-
-  let {
-    type = 'DSTextBox',
-    handlers
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  const Component = components[type] || index[type];
-  const {
-    customHandlers,
-    rowKey
-  } = props;
-  const mappedHandlers = {};
-  Object.keys(handlers).forEach(key => {
-    mappedHandlers[handlers[key]] = () => typeof customHandlers[key] === 'function' ? customHandlers[key](rowData, rowData[rowKey]) : null;
-  });
-  return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread(_objectSpread({}, rowData), mappedHandlers), rest));
-};
-
-export { getRendererComponent as default };

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

@@ -1 +0,0 @@
-export { CustomRendererPlugin } from './CustomRendererPlugin.js';

package/esm/plugins/editable/EditableComponents/ComboBox.js

@@ -1,65 +0,0 @@
-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 { Component } from 'react';
-import { DSComboBox } from '@elliemae/ds-form';
-import { jsx } 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; }
-class ComboBox extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: props.value
-    };
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-  }
-
-  handleChange(value) {
-    const {
-      onValue
-    } = this.props; // some how this is executed before handleBlur, and handleBlur before the value is set
-    // causing the value to be the same as the prevProp
-    // todo: find a better solution to this
-
-    setTimeout(() => onValue(value), 1);
-    this.setState({
-      value
-    });
-  }
-
-  handleBlur() {
-    const {
-      onValue
-    } = this.props;
-    const {
-      value
-    } = this.state;
-    onValue(value);
-  }
-
-  render() {
-    const {
-      value
-    } = this.state;
-    return /*#__PURE__*/jsx(DSComboBox, _objectSpread(_objectSpread({}, this.props), {}, {
-      menuIsOpen: true,
-      onBlur: this.handleBlur,
-      onChange: this.handleChange,
-      onClick: e => e.stopPropagation(),
-      value: value
-    }));
-  }
-
-}
-ComboBox.defaultProps = {
-  onValue: () => null
-};
-
-export { ComboBox as default };

package/esm/plugins/editable/EditableComponents/TextBox.js

@@ -1,103 +0,0 @@
-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 React, { Component } from 'react';
-import { DSTextBox } from '@elliemae/ds-form';
-import { jsx } 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; }
-class TextBox extends Component {
-  constructor(props) {
-    super(props);
-    this.inputRef = /*#__PURE__*/React.createRef();
-    this.state = {
-      value: props.value
-    };
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleKeyUp = this.handleKeyUp.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-  }
-
-  componentDidMount() {
-    setTimeout(() => {
-      if (this.inputRef && this.inputRef.current) {
-        this.inputRef.current.focus();
-      }
-    }, 50);
-  }
-
-  handleKeyUp(_ref) {
-    let {
-      key,
-      target: {
-        value
-      }
-    } = _ref;
-    const {
-      onValue
-    } = this.props;
-
-    if (key === 'Enter') {
-      onValue(value);
-    }
-  }
-
-  handleKeyDown(e) {
-    // PUI-2553 prevent form submit on `Enter` keypress
-    if (e.key === 'Enter') {
-      e.preventDefault();
-    }
-  }
-
-  handleBlur(e) {
-    const {
-      onValue
-    } = this.props;
-    const {
-      target: {
-        value
-      }
-    } = e;
-    onValue(value);
-  }
-
-  handleChange(_ref2) {
-    let {
-      target: {
-        value
-      }
-    } = _ref2;
-    this.setState({
-      value
-    });
-  }
-
-  render() {
-    const {
-      value
-    } = this.state;
-    return /*#__PURE__*/jsx(DSTextBox, _objectSpread(_objectSpread({
-      "data-testid": "ds-datagrids-editable-text-box"
-    }, this.props), {}, {
-      innerRef: this.inputRef,
-      onBlur: this.handleBlur,
-      onChange: this.handleChange,
-      onClick: e => e.stopPropagation(),
-      onKeyUp: this.handleKeyUp,
-      onKeyDown: this.handleKeyDown,
-      value: value
-    }));
-  }
-
-}
-TextBox.defaultProps = {
-  onValue: () => null
-};
-
-export { TextBox as default };

package/esm/plugins/editable/EditableComponents/index.js

@@ -1,2 +0,0 @@
-export { default as ComboBox } from './ComboBox.js';
-export { default as TextBox } from './TextBox.js';