@synerise/ds-filter 0.15.20 → 0.16.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.16.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.15.21...@synerise/ds-filter@0.16.0) (2023-12-14)
+
+
+### Features
+
+* **filter:** reorder cruds in filter step conditions ([8d4019b](https://github.com/Synerise/synerise-design/commit/8d4019b49c7579000e093aabbcd31a75626d9c1c))
+
+
+
+
+
+## [0.15.21](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.15.20...@synerise/ds-filter@0.15.21) (2023-12-13)
+
+**Note:** Version bump only for package @synerise/ds-filter
+
+
+
+
+
 ## [0.15.20](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.15.19...@synerise/ds-filter@0.15.20) (2023-12-11)
 
 

package/dist/Filter.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import React, { useCallback, useMemo, useEffect, useState } from 'react';
+import React, { useCallback, useMemo, useEffect, useState, useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { ReactSortable } from 'react-sortablejs';
 import Logic from '@synerise/ds-logic';
@@ -15,18 +15,19 @@ import Placeholder from '@synerise/ds-logic/dist/Placeholder/Placeholder';
 import StepCard from '@synerise/ds-step-card';
 import { usePrevious } from '@synerise/ds-utils';
 import * as S from './Filter.styles';
-var SORTABLE_CONFIG = {
-  ghostClass: 'ghost-element',
-  className: 'sortable-list',
-  handle: '.step-card-drag-handler',
-  animation: 200,
-  forceFallback: true,
-  filter: '.ds-matching-toggle, .step-card-right-side'
-};
 var component = {
   LOGIC: Logic,
   STEP: StepCard
 };
+var TRANSITION_DURATION = 0.5;
+var TRANSITION_DURATION_MAX = 1.5;
+var TOP_TRANSITION_ZINDEX = '10003';
+var BOTTOM_TRANSITION_ZINDEX = '10002';
+
+var rearrangeItems = function rearrangeItems(sourceArray, oldIndex, newIndex) {
+  sourceArray.splice(newIndex, 0, sourceArray.splice(oldIndex, 1)[0]);
+  return [].concat(sourceArray);
+};
 
 var Filter = function Filter(_ref) {
   var _texts$overwritten;
@@ -59,6 +60,56 @@ var Filter = function Filter(_ref) {
       activeExpressionId = _useState[0],
       setActiveExpressionId = _useState[1];
 
+  var expressionRefs = useRef({});
+  var movedExpressionId = useRef(null);
+  var SORTABLE_CONFIG = {
+    ghostClass: 'ghost-element',
+    className: 'sortable-list',
+    handle: '.step-card-drag-handler',
+    animation: 200,
+    forceFallback: true,
+    filter: '.ds-matching-toggle, .step-card-right-side',
+    onStart: function onStart() {
+      movedExpressionId.current = null;
+    }
+  };
+  useEffect(function () {
+    if (movedExpressionId.current && previousExpressions != null && previousExpressions.length) {
+      var oldIndex = previousExpressions == null ? void 0 : previousExpressions.findIndex(function (expression) {
+        return expression.id === movedExpressionId.current;
+      });
+      var newIndex = expressions == null ? void 0 : expressions.findIndex(function (expression) {
+        return expression.id === movedExpressionId.current;
+      });
+
+      if (oldIndex !== undefined && oldIndex !== newIndex) {
+        var sign = oldIndex < newIndex ? 1 : -1;
+        var low = Math.min(oldIndex, newIndex);
+        var high = Math.max(oldIndex, newIndex);
+        var movedExpressionHeight = sign * expressionRefs.current[movedExpressionId.current].getBoundingClientRect().height;
+        var expressionOffset = 0;
+        var movedCardTransformDuration = Math.min((high - low) * TRANSITION_DURATION, TRANSITION_DURATION_MAX);
+        expressions.forEach(function (expression, index) {
+          if (expression.id !== movedExpressionId.current && index >= low && index <= high) {
+            expressionOffset += expressionRefs.current[expression.id].getBoundingClientRect().height;
+            expressionRefs.current[expression.id].style.transition = '';
+            expressionRefs.current[expression.id].style.zIndex = BOTTOM_TRANSITION_ZINDEX;
+            expressionRefs.current[expression.id].style.transform = "translateY(" + movedExpressionHeight + "px)";
+          }
+        });
+        expressionRefs.current[movedExpressionId.current].style.transition = '';
+        expressionRefs.current[movedExpressionId.current].style.zIndex = TOP_TRANSITION_ZINDEX;
+        expressionRefs.current[movedExpressionId.current].style.transform = "translateY(" + -sign * expressionOffset + "px)";
+        requestAnimationFrame(function () {
+          expressions.forEach(function (expression) {
+            expressionRefs.current[expression.id].style.transition = "transform " + (expression.id === movedExpressionId.current ? movedCardTransformDuration : TRANSITION_DURATION) + "s";
+            expressionRefs.current[expression.id].style.transform = '';
+          });
+          movedExpressionId.current = null;
+        });
+      }
+    }
+  });
   useEffect(function () {
     if (previousExpressions && expressions.length > previousExpressions.length) {
       setActiveExpressionId(expressions[expressions.length - 1].id);
@@ -165,8 +216,32 @@ var Filter = function Filter(_ref) {
   var isLimitExceeded = useMemo(function () {
     return maxConditionsLimit ? expressions.length >= maxConditionsLimit : false;
   }, [expressions, maxConditionsLimit]);
+  var stepExpressionCount = useMemo(function () {
+    return expressions.filter(function (expression) {
+      return expression.type === 'STEP';
+    }).length;
+  }, [expressions]);
+
+  var handleTransitionEnd = function handleTransitionEnd(event) {
+    if (event.currentTarget && event.currentTarget instanceof HTMLElement) {
+      event.currentTarget.style.removeProperty('z-index');
+    }
+  };
+
+  var handleMove = useCallback(function (index, offset) {
+    var newIndex = index + offset;
+    var newOrder = rearrangeItems([].concat(expressions), index, newIndex);
+    movedExpressionId.current = newOrder[newIndex].id;
+    onChangeOrder && onChangeOrder(newOrder);
+  }, [expressions, onChangeOrder]);
   var componentProps = useCallback(function (expression, index) {
     var contextTypeTexts = getContextTypeTexts(expression);
+    var reorderProps = {
+      expressionIndex: index,
+      expressionMoved: movedExpressionId.current === expression.id,
+      expressionCount: stepExpressionCount,
+      onMove: handleMove
+    };
     var props = {
       LOGIC: {
         onChange: function onChange(value) {
@@ -174,7 +249,7 @@ var Filter = function Filter(_ref) {
         },
         options: logicOptions
       },
-      STEP: {
+      STEP: _objectSpread({}, reorderProps, {
         onChangeMatching: function onChangeMatching(value) {
           return onChangeStepMatching(expression.id, value);
         },
@@ -192,14 +267,18 @@ var Filter = function Filter(_ref) {
         isHeaderVisible: visibilityConfig.isStepCardHeaderVisible,
         headerRightSide: renderStepHeaderRightSide && renderStepHeaderRightSide(expression, index),
         texts: _objectSpread({}, text.step, {}, contextTypeTexts)
-      }
+      })
     };
     return props[expression.type];
-  }, [activeExpressionId, getContextTypeTexts, isActive, isLimitExceeded, logicOptions, onChangeLogic, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, renderStepContent, renderStepFooter, renderStepHeaderRightSide, text.step, visibilityConfig.isStepCardHeaderVisible]);
+  }, [activeExpressionId, getContextTypeTexts, handleMove, isActive, isLimitExceeded, logicOptions, movedExpressionId, onChangeLogic, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, renderStepContent, renderStepFooter, renderStepHeaderRightSide, stepExpressionCount, text.step, visibilityConfig.isStepCardHeaderVisible]);
   var renderExpression = useCallback(function (expression, index) {
     var Component = component[expression.type];
     var LogicComponent = expression.logic && component[expression.logic.type];
     return /*#__PURE__*/React.createElement(S.ExpressionWrapper, {
+      onTransitionEnd: handleTransitionEnd,
+      ref: function ref(element) {
+        return expressionRefs.current[expression.id] = element;
+      },
       key: expression.id,
       "data-dropLabel": text.dropMeHere,
       index: index,

package/dist/Filter.styles.js

@@ -31,7 +31,7 @@ export var LogicWrapper = styled.div.withConfig({
 export var ExpressionWrapper = styled.div.withConfig({
   displayName: "Filterstyles__ExpressionWrapper",
   componentId: "w5f27p-7"
-})(["width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:", ";&.sortable-chosen{cursor:grabbing;width:100%;opacity:1 !important;height:50px;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 16px 32px 0 #23293619;", "{visibility:visible;opacity:1;}", "{position:absolute;opacity:0;height:0;}", "{display:none;}", "{display:none;}}&.ghost-element{cursor:grabbing;width:100%;background-color:", ";border-left:2px solid ", ";border-radius:3px;display:flex;align-items:center;justify-content:center;padding:0;margin-bottom:24px;height:68px;box-shadow:none;position:relative;&:before{content:attr(data-dropLabel);text-align:center;position:relative;color:", ";}*{position:absolute;opacity:0;height:0;}}"], function (props) {
+})(["width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:", ";&.sortable-chosen{cursor:grabbing;width:100%;opacity:1 !important;height:50px;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 16px 32px 0 #23293619;", "{visibility:visible;opacity:1;}", "{position:absolute;opacity:0;height:0;}", ",", "{display:none;}}&.ghost-element{cursor:grabbing;width:100%;background-color:", ";border-left:2px solid ", ";border-radius:3px;display:flex;align-items:center;justify-content:center;padding:0;margin-bottom:24px;height:68px;box-shadow:none;position:relative;&:before{content:attr(data-dropLabel);text-align:center;position:relative;color:", ";}*{position:absolute;opacity:0;height:0;}}"], function (props) {
   return 1000 - props.index;
 }, DragIcon, Body, Footer, LogicWrapper, function (props) {
   return props.theme.palette['blue-050'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-filter",
-  "version": "0.15.20",
+  "version": "0.16.0",
   "description": "Filter UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,10 +33,10 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.18.8",
-    "@synerise/ds-logic": "^0.8.17",
-    "@synerise/ds-step-card": "^0.9.19",
-    "@synerise/ds-utils": "^0.24.22",
+    "@synerise/ds-button": "^0.18.9",
+    "@synerise/ds-logic": "^0.8.18",
+    "@synerise/ds-step-card": "^0.10.0",
+    "@synerise/ds-utils": "^0.24.23",
     "react-intl": "3.12.0",
     "react-sortablejs": "^6.0.0",
     "sortablejs": "1.15.1"
@@ -51,5 +51,5 @@
     "@testing-library/dom": "^7.0.2",
     "@testing-library/jest-dom": "5.1.1"
   },
-  "gitHead": "5ab278e69cd049334216bc9867cca2ce6a5fc218"
+  "gitHead": "0a23e5f431033a6180383d3e0e19e885b5a66778"
 }