@elliemae/ds-query-builder 2.3.0-alpha.9 → 2.3.0-next.0

package/esm/components/AndOrController/AndOrController.js

@@ -0,0 +1,213 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import React, { Component } from 'react';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import DSTooltip, { TooltipType } from '@elliemae/ds-tooltip';
+import { PopperInteractions, PopperPositions } from '@elliemae/ds-popper';
+import { DSToggle } from '@elliemae/ds-form';
+import DSButton from '@elliemae/ds-button';
+import { QueryAdd, ParenthesisRemove, MoreOptionsVert } from '@elliemae/ds-icons';
+import { DSIconSizes, DSIconColors } from '@elliemae/ds-icon';
+import { DELAY_CLOSE, DELAY_OPEN, TOOLBAR_ANIMATION_DURATION } from '../helpers/constants.js';
+import { ToolBarAnimation } from '../ToolBarAnimation/ToolBarAnimation.js';
+import DragContainerController from '../DragContainerController/DragContainerController.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var _QueryAdd, _ParenthesisRemove, _div;
+const {
+  cssClassName,
+  classNameBlock,
+  classNameElement,
+  mainModifier,
+  classNameBlockModifier
+} = convertPropToCssClassName('query-builder-and-or-controller');
+/**
+ * condition-display-step: required to avoid the cache of the trigger
+ *
+ * @param e
+ * @param isOpen
+ */
+
+class AndOrController extends Component {
+  constructor(props) {
+    super(props);
+
+    this.handleMouseEnterRow = e => {
+      this.handleTooltipRow(true); // this.handleMouseMove(e)
+    };
+
+    this.handleMouseMove = e => {
+      if (!this.contenerRef.current) return;
+      const mouse = e.clientY;
+      const {
+        height
+      } = this.contenerRef.current.getBoundingClientRect();
+      const delta = height / 2;
+      const topDiff = this.myRef.current.getBoundingClientRect().top;
+      const refHeight = this.myRef.current.getBoundingClientRect().height;
+      this.setState({
+        top: mouse - topDiff - refHeight / 2 - delta
+      });
+    };
+
+    this.handleMouseLeaveRow = () => {
+      this.handleTooltipRow(false);
+    };
+
+    this.handleTooltipRow = isOpen => {
+      this.setState({
+        isOpen
+      });
+      const {
+        handleTooltipGroup
+      } = this.props;
+      handleTooltipGroup(isOpen);
+    };
+
+    this.contenerRef = /*#__PURE__*/React.createRef();
+    this.myRef = /*#__PURE__*/React.createRef();
+    this.state = {
+      isOpen: false,
+      top: 0,
+      right: -2
+    };
+  }
+
+  render() {
+    const {
+      handleRuleContainerOperator,
+      handleRuleContainerUnGroup,
+      labelOn,
+      labelOff,
+      condition,
+      showDragController,
+      allowUnGroup,
+      buttonActionSize,
+      buttonActionType,
+      toogleActionSize,
+      onAddFilter,
+      multipleSize,
+      delayClose,
+      delayOpen,
+      step,
+      toolBarAnimationDuration,
+      toolBarInteractionType,
+      toolBarPosition,
+      isMain,
+      toolTipZIndex
+    } = this.props;
+    const {
+      isOpen,
+      top,
+      right
+    } = this.state;
+    return /*#__PURE__*/jsx("div", {
+      ref: this.myRef,
+      className: "".concat(cssClassName, " ").concat(mainModifier(condition ? 'active' : 'default'), " step-").concat(step, "  ").concat(isMain ? 'is-main-group-join' : '') // onMouseEnter={this.handleMouseEnterRow}
+      ,
+      onMouseLeave: this.handleMouseLeaveRow // onMouseMove={this.handleMouseMove}
+      ,
+      children: /*#__PURE__*/_jsx("div", {
+        className: "".concat(classNameBlock('content'), " step-").concat(step)
+      }, void 0, /*#__PURE__*/_jsx(DSTooltip, {
+        delayClose: delayClose,
+        delayOpen: delayOpen,
+        interactionType: toolBarInteractionType,
+        isOpen: isOpen,
+        onOpen: this.handleTooltipRow,
+        placement: toolBarPosition,
+        springAnimationComponent: /*#__PURE__*/_jsx(ToolBarAnimation, {
+          duration: toolBarAnimationDuration
+        }),
+        step: step,
+        title: /*#__PURE__*/jsxs("div", {
+          ref: this.contenerRef,
+          className: classNameBlock('actions'),
+          style: {
+            transition: '0.2s',
+            position: 'absolute',
+            top: "".concat(top, "px"),
+            right: "".concat(right, "px")
+          },
+          children: [/*#__PURE__*/_jsx(DSButton, {
+            buttonType: buttonActionType,
+            className: classNameElement('add-rule'),
+            icon: _QueryAdd || (_QueryAdd = /*#__PURE__*/_jsx(QueryAdd, {})),
+            onClick: onAddFilter,
+            size: buttonActionSize,
+            containerProps: {
+              'data-testid': 'query-add-button'
+            }
+          }), allowUnGroup && /*#__PURE__*/_jsx(DSButton, {
+            buttonType: "text",
+            className: classNameElement('ungroup'),
+            icon: _ParenthesisRemove || (_ParenthesisRemove = /*#__PURE__*/_jsx(ParenthesisRemove, {})),
+            onClick: handleRuleContainerUnGroup,
+            size: buttonActionSize,
+            containerProps: {
+              'data-testid': 'parenthesis-remove-button'
+            }
+          }), /*#__PURE__*/_jsx(DSToggle, {
+            checked: condition,
+            className: classNameElement('and-or-toggle'),
+            labelOff: labelOff,
+            labelOn: labelOn,
+            onChange: e => handleRuleContainerOperator(e.target.checked),
+            size: toogleActionSize,
+            containerProps: {
+              'data-testid': 'and-or-toggle-button'
+            }
+          })]
+        }),
+        tooltipType: TooltipType.TOOLBAR,
+        triggerComponent: /*#__PURE__*/_jsx("div", {
+          className: "".concat(classNameBlock('trigger-controller'), " ").concat(showDragController ? classNameBlockModifier('draggable', 'trigger-controller') : '', " step-").concat(step)
+        }, void 0, /*#__PURE__*/_jsx("div", {
+          className: classNameElement('condition-display')
+        }, void 0, /*#__PURE__*/_jsx("span", {
+          className: classNameElement('condition-display-label')
+        }, void 0, condition ? labelOn : labelOff), /*#__PURE__*/_jsx("span", {
+          className: classNameElement('condition-display-step')
+        }, void 0, step), _div || (_div = /*#__PURE__*/_jsx("div", {
+          className: "separator"
+        })), /*#__PURE__*/_jsx(MoreOptionsVert, {
+          color: DSIconColors.NEUTRAL,
+          onClick: this.handleMouseEnterRow,
+          size: DSIconSizes.S,
+          containerProps: {
+            'data-testid': 'and-or-more-options-button'
+          }
+        })), showDragController && /*#__PURE__*/_jsx(DragContainerController, {
+          multipleSize: multipleSize,
+          onClick: this.handleMouseEnterRow
+        })),
+        zIndex: toolTipZIndex
+      }))
+    });
+  }
+
+}
+
+AndOrController.defaultProps = {
+  isMain: false,
+  handleRuleContainerOperator: () => null,
+  handleRuleContainerUnGroup: () => null,
+  handleTooltipGroup: () => null,
+  labelOn: 'AND',
+  labelOff: 'OR',
+  condition: true,
+  showDragController: true,
+  allowUnGroup: true,
+  buttonActionSize: DSIconSizes.M,
+  buttonActionType: 'text',
+  toogleActionSize: DSIconSizes.S,
+  onAddFilter: () => null,
+  multipleSize: false,
+  delayClose: DELAY_CLOSE,
+  delayOpen: DELAY_OPEN,
+  step: null,
+  toolBarAnimationDuration: TOOLBAR_ANIMATION_DURATION,
+  toolBarInteractionType: PopperInteractions.CLICK,
+  toolBarPosition: PopperPositions.LEFT
+};
+
+export { AndOrController as default };

package/esm/components/ConditionController/ConditionController.js

@@ -0,0 +1,92 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import DSTooltip, { TooltipType } from '@elliemae/ds-tooltip';
+import { PopperInteractions, PopperPositions } from '@elliemae/ds-popper';
+import { DSIconSizes } from '@elliemae/ds-icon';
+import { QueryRemove, QueryAdd, ParenthesisAdd, MoreOptionsVert } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
+import { ToolBarAnimation } from '../ToolBarAnimation/ToolBarAnimation.js';
+import { DELAY_CLOSE, DELAY_OPEN, TOOLBAR_ANIMATION_DURATION } from '../helpers/constants.js';
+
+var _ToolBarAnimation, _QueryRemove, _QueryAdd, _ParenthesisAdd;
+
+const ConditionController = _ref => {
+  let {
+    onAddFilter = () => null,
+    onAddRuleContainer = () => null,
+    onRemoveFilter = () => null,
+    handleTooltipRow = () => null,
+    buttonTriggerSize = DSIconSizes.M,
+    buttonTriggerType = 'text',
+    buttonActionSize = DSIconSizes.M,
+    buttonActionType = 'text',
+    delayClose = DELAY_CLOSE,
+    delayOpen = DELAY_OPEN,
+    isOpen = false,
+    toolTipZIndex
+  } = _ref;
+  const {
+    cssClassName,
+    classNameBlock,
+    classNameElement
+  } = convertPropToCssClassName('query-builder-condition-controller');
+  return /*#__PURE__*/_jsx("div", {
+    className: cssClassName
+  }, void 0, /*#__PURE__*/_jsx(DSTooltip, {
+    delayClose: delayClose,
+    delayOpen: delayOpen,
+    interactionType: PopperInteractions.CLICK,
+    isOpen: isOpen,
+    onOpen: handleTooltipRow,
+    placement: PopperPositions.LEFT,
+    springAnimationComponent: _ToolBarAnimation || (_ToolBarAnimation = /*#__PURE__*/_jsx(ToolBarAnimation, {
+      duration: TOOLBAR_ANIMATION_DURATION
+    })),
+    title: /*#__PURE__*/_jsx("div", {
+      className: classNameBlock('actions')
+    }, void 0, /*#__PURE__*/_jsx(DSButton, {
+      buttonType: buttonActionType,
+      className: classNameElement('remove-rule'),
+      icon: _QueryRemove || (_QueryRemove = /*#__PURE__*/_jsx(QueryRemove, {})),
+      onClick: onRemoveFilter,
+      size: buttonActionSize,
+      containerProps: {
+        'data-testid': 'query-remove-button'
+      }
+    }), /*#__PURE__*/_jsx(DSButton, {
+      buttonType: buttonActionType,
+      className: classNameElement('add-rule'),
+      icon: _QueryAdd || (_QueryAdd = /*#__PURE__*/_jsx(QueryAdd, {})),
+      onClick: onAddFilter,
+      size: buttonActionSize,
+      containerProps: {
+        'data-testid': 'query-add-button'
+      }
+    }), /*#__PURE__*/_jsx(DSButton, {
+      buttonType: buttonActionType,
+      className: "".concat(classNameElement('add-rule-container'), " no-border-right"),
+      icon: _ParenthesisAdd || (_ParenthesisAdd = /*#__PURE__*/_jsx(ParenthesisAdd, {})),
+      onClick: onAddRuleContainer,
+      size: buttonActionSize,
+      containerProps: {
+        'data-testid': 'parenthesis-add-button'
+      }
+    })),
+    tooltipType: TooltipType.TOOLBAR,
+    triggerComponent: /*#__PURE__*/_jsx(DSButton, {
+      buttonType: buttonTriggerType,
+      icon: /*#__PURE__*/_jsx(MoreOptionsVert, {
+        color: ['neutral', '500']
+      }),
+      onClick: handleTooltipRow,
+      size: buttonTriggerSize,
+      containerProps: {
+        'data-testid': 'condition-more-options-button'
+      }
+    }),
+    zIndex: toolTipZIndex
+  }));
+};
+
+export { ConditionController as default };

package/esm/components/DisplayOutput/DisplayOutput.js

@@ -0,0 +1,87 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { Component } from 'react';
+import { Grid } from '@elliemae/ds-grid';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import { DSAccordion, DSAccordionItem } from '@elliemae/ds-accordion';
+import { ChevronRight, ChevronDown } from '@elliemae/ds-icons';
+import { QueryBuilderContext } from '../QueryBuilderContext/QueryBuilderContext.js';
+
+const {
+  cssClassName
+} = convertPropToCssClassName('query-builder-output');
+
+class DisplayOutput extends Component {
+  constructor(props) {
+    super(props);
+
+    this.handleChange = () => {
+      this.setState(_ref => {
+        let {
+          show
+        } = _ref;
+        return {
+          show: !show
+        };
+      });
+    };
+
+    this.state = {
+      show: props.show
+    };
+  }
+
+  render() {
+    var _Grid;
+
+    const {
+      show
+    } = this.state;
+    const {
+      showLabel,
+      hideLabel,
+      displayFixedOutput
+    } = this.props;
+    return /*#__PURE__*/_jsx(QueryBuilderContext.Consumer, {}, void 0, _ref2 => {
+      let {
+        format
+      } = _ref2;
+      let display = '';
+
+      try {
+        display = typeof format === 'object' ? JSON.stringify(format) : format;
+      } catch (e) {
+        display = e;
+      }
+
+      if (displayFixedOutput) {
+        return /*#__PURE__*/_jsx("div", {
+          className: cssClassName,
+          "data-testid": "qb-fixed-output-wrapper"
+        }, void 0, _Grid || (_Grid = /*#__PURE__*/_jsx(Grid, {
+          p: "xxs"
+        }, void 0, /*#__PURE__*/_jsx("strong", {
+          "data-testid": "qb-fixed-output-label"
+        }, void 0, displayFixedOutput))), /*#__PURE__*/_jsx(Grid, {
+          pl: "xxs",
+          pr: "xxs",
+          "data-testid": "qb-fixed-output-content"
+        }, void 0, display));
+      }
+
+      return /*#__PURE__*/_jsx("div", {
+        className: cssClassName
+      }, void 0, /*#__PURE__*/_jsx(DSAccordion, {
+        activeValue: show,
+        onChange: this.handleChange
+      }, void 0, /*#__PURE__*/_jsx(DSAccordionItem, {
+        iconClosed: ChevronRight,
+        iconOpened: ChevronDown,
+        title: show ? hideLabel : showLabel,
+        value: true
+      }, void 0, /*#__PURE__*/_jsx("div", {}, void 0, display))));
+    });
+  }
+
+}
+
+export { DisplayOutput as default };

package/esm/components/DragContainerController/DragContainerController.js

@@ -0,0 +1,39 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import { DSIconColors, DSIconSizes } from '@elliemae/ds-icon';
+import { GripperVertical, MoreOptionsVert } from '@elliemae/ds-icons';
+
+var _div;
+
+const DragContainerController = _ref => {
+  let {
+    color = DSIconColors.NEUTRAL,
+    icon: Icon = GripperVertical,
+    size = DSIconSizes.S,
+    multipleSize = false,
+    onClick
+  } = _ref;
+  const {
+    cssClassName
+  } = convertPropToCssClassName('query-builder-drag-group');
+  return /*#__PURE__*/_jsx("div", {
+    className: "".concat(cssClassName)
+  }, void 0, /*#__PURE__*/_jsx(Icon, {
+    color: color,
+    size: size
+  }), _div || (_div = /*#__PURE__*/_jsx("div", {
+    className: "separator"
+  })), /*#__PURE__*/_jsx(MoreOptionsVert, {
+    color: color,
+    onClick: onClick,
+    size: size
+  }), multipleSize && /*#__PURE__*/_jsx(Icon, {
+    className: "additional-drag",
+    color: color,
+    onClick: onClick,
+    size: size
+  }));
+};
+
+export { DragContainerController as default };

package/esm/components/DragControllerRow/DragControllerRow.js

@@ -0,0 +1,39 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'react';
+import { DSIconSizes } from '@elliemae/ds-icon';
+import { GripperVertical } from '@elliemae/ds-icons';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["className", "color", "icon", "size"];
+
+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 DragControllerRow = _ref => {
+  let {
+    className = 'drag-controller',
+    color = ['neutral', '500'],
+    icon: Icon = GripperVertical,
+    size = DSIconSizes.M
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
+    className: className
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsx(Icon, {
+      color: color,
+      size: size
+    })
+  }));
+};
+
+export { DragControllerRow as default };

package/esm/components/FieldControllerRow/FieldControllerRow.js

@@ -0,0 +1,27 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { DSComboBox, DSTextBox } from '@elliemae/ds-form';
+
+const FieldControllerRow = _ref => {
+  let {
+    className = '',
+    onChange = () => null,
+    options = [],
+    value = '',
+    type = 'DSComboBox'
+  } = _ref;
+  return /*#__PURE__*/_jsx("div", {
+    className: className
+  }, void 0, type === 'DSComboBox' && /*#__PURE__*/_jsx(DSComboBox, {
+    onChange: onChange,
+    options: options,
+    value: value
+  }), type === 'DSTextBox' && /*#__PURE__*/_jsx(DSTextBox, {
+    fluidWidth: true,
+    onChange: onChange,
+    options: options,
+    value: value
+  }));
+};
+
+export { FieldControllerRow as default };