@elliemae/ds-datagrids 2.3.0-alpha.9 → 2.3.0-next.3

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

@@ -0,0 +1,65 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('react');
+var DSButton = require('@elliemae/ds-button');
+var dsForm = require('@elliemae/ds-form');
+var DSDropdownMenu = require('@elliemae/ds-dropdownmenu');
+var index = require('../../components/renderers/index.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+var DSDropdownMenu__default = /*#__PURE__*/_interopDefaultLegacy(DSDropdownMenu);
+
+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__default["default"](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: DSButton__default["default"],
+  DSCheckbox: dsForm.DSCheckbox,
+  DSComboBox: dsForm.DSComboBox,
+  DSRadio: dsForm.DSRadio,
+  DSTextBox: dsForm.DSTextBox,
+  DSToggle: dsForm.DSToggle,
+  DSDropdownMenu: DSDropdownMenu__default["default"]
+};
+
+const getRendererComponent = (_ref2, _ref, _ref3) => {
+  let {
+    props
+  } = _ref2;
+  let {
+    rowData
+  } = _ref3;
+
+  let {
+    type = 'DSTextBox',
+    handlers
+  } = _ref,
+      rest = _objectWithoutProperties__default["default"](_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__*/jsxRuntime.jsx(Component, _objectSpread(_objectSpread(_objectSpread({}, rowData), mappedHandlers), rest));
+};
+
+module.exports = getRendererComponent;

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

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var CustomRendererPlugin = require('./CustomRendererPlugin.js');
+
+
+
+exports.CustomRendererPlugin = CustomRendererPlugin.CustomRendererPlugin;

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

@@ -0,0 +1,71 @@
+'use strict';
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var dsForm = require('@elliemae/ds-form');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+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__default["default"](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 React.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__*/jsxRuntime.jsx(dsForm.DSComboBox, _objectSpread(_objectSpread({}, this.props), {}, {
+      menuIsOpen: true,
+      onBlur: this.handleBlur,
+      onChange: this.handleChange,
+      onClick: e => e.stopPropagation(),
+      value: value
+    }));
+  }
+
+}
+ComboBox.defaultProps = {
+  onValue: () => null
+};
+
+module.exports = ComboBox;

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

@@ -0,0 +1,110 @@
+'use strict';
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var dsForm = require('@elliemae/ds-form');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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__default["default"](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 React.Component {
+  constructor(props) {
+    super(props);
+    this.inputRef = /*#__PURE__*/React__default["default"].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__*/jsxRuntime.jsx(dsForm.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
+};
+
+module.exports = TextBox;

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

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ComboBox = require('./ComboBox.js');
+var TextBox = require('./TextBox.js');
+
+
+
+exports.ComboBox = ComboBox;
+exports.TextBox = TextBox;

package/cjs/plugins/editable/EditablePlugin.js

@@ -0,0 +1,123 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+var dsUtilities = require('@elliemae/ds-utilities');
+var createInstancePlugin = require('@elliemae/ds-shared/createDataInstance/createInstancePlugin');
+var decorateEditable = require('./decorateEditable.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var createInstancePlugin__default = /*#__PURE__*/_interopDefaultLegacy(createInstancePlugin);
+
+const registerStateHook = grid => {
+  const {
+    rowKey = 'id',
+    editingRows: editingRowsProp,
+    onColumnRowEdited,
+    onColumnRowEdit
+  } = grid.props;
+  const [editingRows, setEditingRows] = dsUtilities.useDerivedStateFromProps(editingRowsProp || {});
+
+  const activateEdit = editParams => {
+    const {
+      shouldRefocus
+    } = grid.getInstance();
+    const {
+      rowData,
+      columnIndex
+    } = editParams;
+    shouldRefocus.current = {
+      forced: true,
+      value: false
+    };
+    setEditingRows(prevEditingRows => {
+      onColumnRowEdit(editParams);
+      return dsUtilities.toggleInObject(prevEditingRows, rowData[rowKey], columnIndex);
+    });
+  };
+
+  const editValue = _ref => {
+    let {
+      value,
+      rowData,
+      property,
+      rowIndex
+    } = _ref;
+    setEditingRows({});
+    onColumnRowEdited({
+      value,
+      rowData,
+      property,
+      rowIndex
+    });
+  };
+
+  return {
+    state: {
+      editingRows
+    },
+    actions: {
+      activateEdit,
+      editValue
+    }
+  };
+};
+
+const decorateColumn = (column, grid) => {
+  const {
+    props: {
+      isColumnEditable = col => col.editable,
+      customHandlers
+    }
+  } = grid;
+  const editableConfig = decorateEditable.makeEditableConfig(grid);
+  return isColumnEditable(column) ? decorateEditable.addEditableToCell({
+    column,
+    config: editableConfig,
+    handlers: customHandlers
+  }, grid) : column;
+};
+
+const EditablePlugin = createInstancePlugin__default["default"]('editable', {
+  registerStateHook,
+  decorateColumn,
+
+  registerHotKeys(grid) {
+    return {
+      key: 'enter',
+      handler: _ref2 => {
+        let {
+          rowIndex,
+          cellIndex
+        } = _ref2;
+        const {
+          composedRows,
+          decoratedColumns,
+          actions: {
+            activateEdit
+          },
+          props: {
+            isColumnEditable
+          }
+        } = grid.getInstance();
+        if (!isColumnEditable(decoratedColumns[cellIndex])) return;
+        const rows = composedRows.rows || composedRows;
+        const row = rows[rowIndex];
+        if (!row) return;
+        activateEdit({
+          rowData: row,
+          columnIndex: cellIndex
+        });
+      },
+      options: {
+        keydown: false,
+        keyup: true
+      }
+    };
+  }
+
+});
+
+exports.EditablePlugin = EditablePlugin;

package/cjs/plugins/editable/decorateEditable.js

@@ -0,0 +1,122 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('react');
+var edit = require('react-edit');
+var dsIcons = require('@elliemae/ds-icons');
+var dsUtilities = require('@elliemae/ds-utilities');
+var initColumnDefinition = require('@elliemae/ds-shared/useDataGrid/initColumnDefinition');
+var getEditorComponent = require('./getEditorComponent.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var edit__namespace = /*#__PURE__*/_interopNamespace(edit);
+
+var _EditPencil, _span;
+
+const _excluded = ["columnIndex", "rowData", "column"];
+
+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__default["default"](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 makeEditableConfig = grid => edit__namespace.edit({
+  isEditing: _ref => {
+    let {
+      columnIndex,
+      rowData,
+      column = {}
+    } = _ref,
+        rest = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+    const {
+      state: {
+        editingRows
+      },
+      props: {
+        rowKey
+      }
+    } = grid.getInstance();
+    let isCustomEditing;
+
+    if (typeof column.isEditing === 'function') {
+      isCustomEditing = column.isEditing(_objectSpread({
+        columnIndex,
+        rowData,
+        column
+      }, rest));
+    }
+
+    return editingRows[rowData[rowKey]] === columnIndex || column.alwaysEditing || isCustomEditing;
+  },
+  onActivate: () => null,
+  onValue: function () {
+    return grid.getInstance().actions.editValue(...arguments);
+  }
+});
+
+const addEditableToCell = (_ref2, grid) => {
+  let {
+    column,
+    config,
+    handlers
+  } = _ref2;
+  column.cell.transforms.push(config(getEditorComponent(column.customEditor, handlers)));
+  column.cell.props.className = dsUtilities.cx(column.cell.props.className, "editable".concat(column.customEditor ? ' customEditor' : ''));
+  return initColumnDefinition.appendCellFormatter([(value, extraParams) => /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: /*#__PURE__*/_jsx__default["default"]("div", {
+      onClick: e => {
+        e.stopPropagation();
+        grid.getInstance().actions.activateEdit(extraParams);
+      },
+      onKeyUp: e => {
+        e.stopPropagation();
+
+        if (e.keyCode === 33) {
+          grid.getInstance().actions.activateEdit(extraParams);
+        }
+      },
+      role: "gridcell",
+      tabIndex: 0
+    }, void 0, value, _EditPencil || (_EditPencil = /*#__PURE__*/_jsx__default["default"](dsIcons.EditPencil, {
+      className: "edit-pencil"
+    })), _span || (_span = /*#__PURE__*/_jsx__default["default"]("span", {
+      className: "edit-separator"
+    }, void 0, " ")))
+  })], column);
+};
+
+exports.addEditableToCell = addEditableToCell;
+exports.makeEditableConfig = makeEditableConfig;

package/cjs/plugins/editable/getEditorComponent.js

@@ -0,0 +1,82 @@
+'use strict';
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('react');
+var ComboBox = require('./EditableComponents/ComboBox.js');
+var TextBox = require('./EditableComponents/TextBox.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+const _excluded = ["type"];
+
+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__default["default"](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 = {
+  DSComboBox: ComboBox,
+  DSTextBox: TextBox
+};
+
+const getEditorComponent = function () {
+  let editorComponent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let handlers = arguments.length > 1 ? arguments[1] : undefined;
+  return _ref => {
+    let {
+      value,
+      onValue,
+      extraParameters
+    } = _ref;
+
+    if (typeof editorComponent === 'function') {
+      return editorComponent(_objectSpread({
+        value,
+        onValue,
+        customHandlers: handlers
+      }, extraParameters));
+    }
+
+    const {
+      type = 'DSTextBox'
+    } = editorComponent,
+          restEditorProps = _objectWithoutProperties__default["default"](editorComponent, _excluded);
+
+    const Component = components[type];
+
+    if (type === 'DSComboBox') {
+      var _restEditorProps$opti;
+
+      // TODO: remove this whole condition when combobox v3 is out and fully working without "maxOptions" parameter
+      const maxOptions = (restEditorProps === null || restEditorProps === void 0 ? void 0 : (_restEditorProps$opti = restEditorProps.options) === null || _restEditorProps$opti === void 0 ? void 0 : _restEditorProps$opti.length) || 100;
+      return /*#__PURE__*/_jsx__default["default"]("div", {
+        style: {
+          zIndex: 0
+        }
+      }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({
+        autoFocus: true,
+        onValue: onValue,
+        value: value,
+        maxOptions: maxOptions
+      }, restEditorProps)));
+    }
+
+    return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({
+      autoFocus: true,
+      onValue: onValue,
+      value: value
+    }, restEditorProps));
+  };
+};
+
+module.exports = getEditorComponent;

package/cjs/plugins/editable/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var EditablePlugin = require('./EditablePlugin.js');
+var ComboBox = require('./EditableComponents/ComboBox.js');
+var TextBox = require('./EditableComponents/TextBox.js');
+
+
+
+exports.EditablePlugin = EditablePlugin.EditablePlugin;
+exports.ComboBox = ComboBox;
+exports.TextBox = TextBox;