@elliemae/ds-query-builder 2.3.0-alpha.8 → 2.3.0-next.2

package/cjs/components/Nestable/Nestable.js

@@ -0,0 +1,320 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.find.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.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 React = require('react');
+var cn = require('classnames');
+var utils = require('@elliemae/ds-shared/utils');
+var dsUtilities = require('@elliemae/ds-utilities');
+var tryIncreaseDepth = require('./actions/tryIncreaseDepth.js');
+var tryDecreaseDepth = require('./actions/tryDecreaseDepth.js');
+var moveItem = require('./actions/moveItem.js');
+var paths = require('./actions/paths.js');
+var events = require('./actions/events.js');
+var getItemOptions = require('./actions/getItemOptions.js');
+var NestableItem = require('./NestableItem.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+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 shallowCompare = (instance, nextProps, nextState) => !dsUtilities.isEqualWith(instance.props, nextProps) || !dsUtilities.isEqualWith(instance.state, nextState);
+
+class Nestable extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.onDragStart = (e, item) => {
+      events.onDragStart.call(this, e, item);
+    };
+
+    this.onDragEnd = (e, isCancel) => events.onDragEnd.call(this, e, isCancel);
+
+    this.onMouseMove = e => events.onMouseMove.call(this, e);
+
+    this.onMouseEnter = (e, item) => events.onMouseEnter.call(this, e, item);
+
+    this.onToggleCollapse = (item, isGetter) => events.onToggleCollapse.call(this, item, isGetter);
+
+    this.onKeyDown = e => events.onKeyDown.call(this, e);
+
+    this.getDefaultItems = () => {
+      const {
+        items
+      } = this.state;
+      return items;
+    };
+
+    this.getItemDepth = item => paths.getItemDepth.call(this, item);
+
+    this.startTrackMouse = () => {
+      document.addEventListener('mousemove', this.onMouseMove);
+      document.addEventListener('mouseup', this.onDragEnd);
+      document.addEventListener('keydown', this.onKeyDown);
+    };
+
+    this.stopTrackMouse = () => {
+      document.removeEventListener('mousemove', this.onMouseMove);
+      document.removeEventListener('mouseup', this.onDragEnd);
+      document.removeEventListener('keydown', this.onKeyDown);
+      this.elCopyStyles = null;
+    };
+
+    this.isCollapsed = item => {
+      const {
+        collapsed
+      } = this.props;
+      const {
+        collapsedGroups
+      } = this.state;
+      return !!(collapsedGroups.indexOf(item.id) > -1 ^ collapsed);
+    };
+
+    this.checkFilterChildren = items => items.find(current => {
+      const {
+        element: {
+          type
+        },
+        children
+      } = current;
+      if (type === 'filter' && children.length > 0) return true;
+      return this.checkFilterChildren(children);
+    });
+
+    this.dragRevert = () => {
+      const {
+        itemsOld
+      } = this.state;
+      this.setState({
+        items: itemsOld,
+        itemsOld: null,
+        dragItem: null,
+        isDirty: false
+      });
+    };
+
+    this.state = {
+      items: [],
+      itemsOld: null,
+      dragItem: null,
+      isDirty: false,
+      collapsedGroups: [],
+      stopTrackingMouse: this.stopTrackMouse.bind(this),
+      oldProps: props
+    };
+    this.el = null;
+    this.elCopyStyles = null;
+    this.mouse = {
+      last: {
+        x: 0
+      },
+      shift: {
+        x: 0
+      }
+    };
+  }
+
+  componentDidMount() {
+    const {
+      childrenProp
+    } = this.props;
+    let {
+      items
+    } = this.props; // make sure every item has property 'children'
+
+    items = utils.listWithChildren(items, childrenProp);
+    this.setState({
+      items
+    });
+  }
+
+  componentWillUnmount() {
+    this.stopTrackMouse();
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const {
+      items: itemsNew,
+      childrenProp
+    } = props;
+    const {
+      stopTrackingMouse,
+      oldProps
+    } = state;
+
+    if (shallowCompare({
+      props: oldProps,
+      state: {}
+    }, props, {})) {
+      stopTrackingMouse();
+      const extra = {};
+
+      if (oldProps.collapsed !== props.collapsed) {
+        extra.collapsedGroups = [];
+      }
+
+      return _objectSpread({
+        items: utils.listWithChildren(itemsNew, childrenProp),
+        dragItem: null,
+        isDirty: false,
+        oldProps: props
+      }, extra);
+    }
+
+    return null;
+  }
+
+  getPathById(id) {
+    let items = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getDefaultItems();
+    return paths.getPathById.call(this, id, items);
+  }
+
+  getItemByPath(path) {
+    let items = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getDefaultItems();
+    return paths.getItemByPath.call(this, path, items);
+  }
+
+  getSplicePath(path) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return paths.getSplicePath.call(this, path, options);
+  }
+
+  getRealNextPath(prevPath, nextPath) {
+    return paths.getRealNextPath.call(this, prevPath, nextPath);
+  }
+
+  getItemOptions() {
+    return getItemOptions.getItemOptions.call(this);
+  }
+
+  dragApply() {
+    const {
+      onChange
+    } = this.props;
+    const {
+      items,
+      isDirty,
+      dragItem
+    } = this.state;
+    this.setState({
+      itemsOld: null,
+      dragItem: null,
+      isDirty: false
+    });
+    if (onChange && isDirty) onChange(items, dragItem);
+  }
+
+  tryIncreaseDepth(dragItem) {
+    tryIncreaseDepth.tryIncreaseDepth.call(this, dragItem);
+  }
+
+  tryDecreaseDepth(dragItem) {
+    tryDecreaseDepth.tryDecreaseDepth.call(this, dragItem);
+  }
+
+  moveItem(_ref) {
+    let {
+      dragItem,
+      pathFrom,
+      pathTo
+    } = _ref;
+    let extraProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    moveItem.moveItem.call(this, {
+      dragItem,
+      pathFrom,
+      pathTo
+    }, extraProps);
+  }
+
+  renderDragLayer() {
+    const {
+      group
+    } = this.props;
+    const {
+      dragItem
+    } = this.state;
+    const el = document.querySelector(".nestable-".concat(group, " .nestable-item-").concat(dragItem.id));
+    let listStyles = {};
+
+    if (el) {
+      listStyles.width = el.clientWidth;
+    }
+
+    if (this.elCopyStyles) {
+      listStyles = _objectSpread(_objectSpread({}, listStyles), this.elCopyStyles);
+    }
+
+    const options = this.getItemOptions();
+    return /*#__PURE__*/_jsx__default["default"]("div", {
+      className: "nestable-drag-layer"
+    }, void 0, /*#__PURE__*/_jsx__default["default"]("ol", {
+      className: "nestable-list",
+      style: listStyles
+    }, void 0, /*#__PURE__*/_jsx__default["default"](NestableItem, {
+      isCopy: true,
+      item: dragItem,
+      options: options
+    })));
+  }
+
+  render() {
+    const {
+      items,
+      dragItem
+    } = this.state;
+    const {
+      group,
+      isAndItem,
+      isOrItem,
+      isDraggableItem,
+      setDraggableItems,
+      singleRow
+    } = this.props;
+    const options = this.getItemOptions();
+    const childLength = items.length;
+    let childClass = 'single';
+    if (childLength === 0) childClass = 'empty';else if (childLength > 1) childClass = 'multiple';
+    return /*#__PURE__*/_jsx__default["default"]("div", {
+      className: cn__default["default"]('nestable', "nestable-".concat(group), {
+        'is-drag-active': dragItem
+      })
+    }, void 0, /*#__PURE__*/_jsx__default["default"]("ol", {
+      className: "nestable-list nestable-group nestable-child-count-".concat(childClass)
+    }, void 0, items.map((item, i) => /*#__PURE__*/_jsx__default["default"](NestableItem, {
+      index: i,
+      isAndItem: isAndItem,
+      isDraggableItem: isDraggableItem,
+      isOrItem: isOrItem,
+      item: item,
+      options: options,
+      setDraggableItems: setDraggableItems,
+      singleRow: singleRow
+    }, item.id))), dragItem && this.renderDragLayer());
+  }
+
+}
+
+Nestable.defaultProps = {
+  items: [],
+  collapsed: false,
+  group: Math.random().toString(36).slice(2),
+  childrenProp: 'children',
+  onChange: () => {}
+};
+
+module.exports = Nestable;

package/cjs/components/Nestable/NestableItem.js

@@ -0,0 +1,111 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.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 cn = require('classnames');
+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 _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+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 NestableItem = _ref => {
+  let {
+    item,
+    isCopy,
+    options,
+    index,
+    isAndItem,
+    isOrItem,
+    isDraggableItem,
+    singleRow
+  } = _ref;
+  const {
+    dragItem,
+    renderItem,
+    handler,
+    childrenProp
+  } = options;
+  const isCollapsed = options.isCollapsed(item);
+  const isDragging = !isCopy && dragItem && dragItem.id === item.id;
+  const hasChildren = item[childrenProp] && item[childrenProp].length > 0;
+  let Handler;
+  const isOrGroup = item.element.type === 'group' && (item.element.condition === '' || item.element.condition === false);
+  const isAndGroup = item.element.type === 'group' && !(item.element.condition === '' || item.element.condition === false);
+  const itemProps = {
+    className: cn__default["default"]("nestable-item".concat(isCopy ? '-copy' : ''), "nestable-item".concat(isCopy ? '-copy' : '', "-").concat(item.id), "nestable-item-type-".concat(item.element.type), {
+      'is-or-group': isOrGroup,
+      'is-and-group': isAndGroup,
+      'is-and-filter': item.element.type === 'filter' && isAndItem,
+      'is-or-filter': item.element.type === 'filter' && isOrItem
+    }, {
+      'is-dragging': isDragging
+    })
+  };
+  let rowProps = {};
+  let handlerProps = {};
+
+  if (!isCopy) {
+    if (dragItem) {
+      rowProps = _objectSpread(_objectSpread({}, rowProps), {}, {
+        onMouseEnter: e => options.onMouseEnter(e, item)
+      });
+    } else {
+      handlerProps = _objectSpread(_objectSpread({}, handlerProps), {}, {
+        draggable: isDraggableItem !== false,
+        onDragStart: e => options.onDragStart(e, item)
+      });
+    }
+  }
+
+  if (handler) {
+    Handler = /*#__PURE__*/jsxRuntime.jsx("span", _objectSpread(_objectSpread({
+      className: "nestable-item-handler"
+    }, handlerProps), {}, {
+      children: handler
+    })); // Handler = React.cloneElement(handler, handlerProps);
+  } else {
+    rowProps = _objectSpread(_objectSpread({}, rowProps), handlerProps);
+  }
+
+  const childLength = item[childrenProp].length;
+  let childClass = 'single';
+  if (childLength === 0) childClass = 'empty';else if (childLength > 1) childClass = 'multiple';
+  return /*#__PURE__*/jsxRuntime.jsxs("li", _objectSpread(_objectSpread({}, itemProps), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+      className: "nestable-item-name nestable-item-name--".concat(item.element.type, " ")
+    }, rowProps), {}, {
+      children: renderItem({
+        item,
+        handler: Handler,
+        index
+      })
+    })), hasChildren && item.element.type === 'group' && !isCollapsed && /*#__PURE__*/_jsx__default["default"]("ol", {
+      className: "nestable-list nestable-child-count-".concat(childClass, " ")
+    }, void 0, item[childrenProp].map((currentitem, i) => /*#__PURE__*/_jsx__default["default"](NestableItem, {
+      index: i,
+      isAndItem: isAndGroup,
+      isCopy: isCopy,
+      isOrItem: isOrGroup,
+      item: currentitem,
+      options: options,
+      singleRow: singleRow
+    }, i)))]
+  }));
+};
+
+module.exports = NestableItem;

package/cjs/components/Nestable/actions/events.js

@@ -0,0 +1,166 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+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 utils = require('@elliemae/ds-shared/utils');
+
+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; }
+function onDragStart(e, item) {
+  if (e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  this.el = utils.closest(e.target, '.nestable-item');
+  this.startTrackMouse();
+  this.onMouseMove(e);
+  const {
+    items
+  } = this.state;
+  this.setState({
+    dragItem: item,
+    itemsOld: items
+  });
+}
+function onDragEnd(e, isCancel) {
+  if (e && e.preventDefault) e.preventDefault();
+  this.stopTrackMouse();
+  this.el = null; // check if filter has children
+
+  const {
+    items
+  } = this.state;
+  const nestedInFilter = this.checkFilterChildren(items);
+  if (nestedInFilter) return this.dragRevert();
+  return isCancel ? this.dragRevert() : this.dragApply();
+}
+function onMouseMove(e) {
+  const {
+    group,
+    threshold
+  } = this.props;
+  const {
+    dragItem
+  } = this.state;
+  const {
+    clientX,
+    clientY
+  } = e;
+  const transformProps = utils.getTransformProps(clientX, clientY);
+  const elCopy = document.querySelector(".nestable-".concat(group, " .nestable-drag-layer > .nestable-list"));
+
+  if (!this.elCopyStyles) {
+    const offset = utils.getOffsetRect(this.el);
+    const scroll = utils.getTotalScroll(this.el);
+    this.elCopyStyles = _objectSpread({
+      marginTop: offset.top - clientY - scroll.top,
+      marginLeft: offset.left - clientX - scroll.left
+    }, transformProps);
+  } else {
+    this.elCopyStyles = _objectSpread(_objectSpread({}, this.elCopyStyles), transformProps);
+
+    for (const key in transformProps) {
+      if (transformProps.hasOwnProperty(key)) {
+        elCopy.style[key] = transformProps[key];
+      }
+    }
+
+    const diffX = clientX - this.mouse.last.x;
+
+    if (diffX >= 0 && this.mouse.shift.x >= 0 || diffX <= 0 && this.mouse.shift.x <= 0) {
+      this.mouse.shift.x += diffX;
+    } else {
+      this.mouse.shift.x = 0;
+    }
+
+    this.mouse.last.x = clientX;
+
+    if (Math.abs(this.mouse.shift.x) > threshold) {
+      if (this.mouse.shift.x > 0) {
+        this.tryIncreaseDepth(dragItem);
+      } else {
+        this.tryDecreaseDepth(dragItem);
+      }
+
+      this.mouse.shift.x = 0;
+    }
+  }
+}
+function onMouseEnter(e, item) {
+  if (e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  const {
+    collapsed,
+    childrenProp
+  } = this.props;
+  const {
+    dragItem
+  } = this.state;
+  if (dragItem.id === item.id) return;
+  const pathFrom = this.getPathById(dragItem.id);
+  const pathTo = this.getPathById(item.id); // if collapsed by default
+  // and move last (by count) child
+  // remove parent node from list of open nodes
+
+  let collapseProps = {};
+
+  if (collapsed && pathFrom.length > 1) {
+    const parent = this.getItemByPath(pathFrom.slice(0, -1));
+
+    if (parent[childrenProp].length === 1) {
+      collapseProps = this.onToggleCollapse(parent, true);
+    }
+  }
+
+  this.moveItem({
+    dragItem,
+    pathFrom,
+    pathTo
+  }, collapseProps);
+}
+function onToggleCollapse(item, isGetter) {
+  const {
+    collapsed
+  } = this.props;
+  const {
+    collapsedGroups
+  } = this.state;
+  const isCollapsed = this.isCollapsed(item);
+  const newState = {
+    collapsedGroups: isCollapsed ^ collapsed ? collapsedGroups.filter(id => id !== item.id) : collapsedGroups.concat(item.id)
+  };
+
+  if (isGetter) {
+    return newState;
+  }
+
+  return this.setState(newState);
+}
+function onKeyDown(e) {
+  if (e.which === 27) {
+    // ESC
+    this.onDragEnd(null, true);
+  }
+}
+
+exports.onDragEnd = onDragEnd;
+exports.onDragStart = onDragStart;
+exports.onKeyDown = onKeyDown;
+exports.onMouseEnter = onMouseEnter;
+exports.onMouseMove = onMouseMove;
+exports.onToggleCollapse = onToggleCollapse;

package/cjs/components/Nestable/actions/getItemOptions.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function getItemOptions() {
+  const {
+    renderItem,
+    renderCollapseIcon,
+    handler,
+    childrenProp
+  } = this.props;
+  const {
+    dragItem
+  } = this.state;
+  return {
+    dragItem,
+    childrenProp,
+    renderItem,
+    renderCollapseIcon,
+    handler,
+    onDragStart: this.onDragStart,
+    onMouseEnter: this.onMouseEnter,
+    isCollapsed: this.isCollapsed,
+    onToggleCollapse: this.onToggleCollapse
+  };
+}
+
+exports.getItemOptions = getItemOptions;