@synerise/ds-step-card 0.9.20 → 0.10.0

package/CHANGELOG.md

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

package/dist/StepCard.d.ts

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import React from 'react';
 import { StepCardProps } from './StepCard.types';
+export declare const REORDER_THROTTLE = 1000;
 declare const StepCard: React.ForwardRefExoticComponent<StepCardProps & React.RefAttributes<HTMLDivElement>>;
 export default StepCard;

package/dist/StepCard.js

@@ -4,17 +4,24 @@ 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 * as React from 'react';
+import React, { useRef, forwardRef, useEffect, useMemo, useState, createRef } from 'react';
 import { useIntl } from 'react-intl';
 import Matching from '@synerise/ds-logic/dist/Matching/Matching';
 import Cruds from '@synerise/ds-cruds';
+import { InlineAlert } from '@synerise/ds-alert';
 import { DragHandleM } from '@synerise/ds-icon';
 import { Title } from '@synerise/ds-typography';
 import * as S from './StepCard.styles';
-var StepCard = React.forwardRef(function (_ref, ref) {
+export var REORDER_THROTTLE = 1000;
+var MOVE_SUCCESS_FEEDBACK_DURATION = 2000;
+var StepCard = forwardRef(function (_ref, ref) {
   var children = _ref.children,
       onDelete = _ref.onDelete,
       onDuplicate = _ref.onDuplicate,
+      onMove = _ref.onMove,
+      expressionIndex = _ref.expressionIndex,
+      expressionMoved = _ref.expressionMoved,
+      expressionCount = _ref.expressionCount,
       footer = _ref.footer,
       matching = _ref.matching,
       onChangeMatching = _ref.onChangeMatching,
@@ -28,7 +35,7 @@ var StepCard = React.forwardRef(function (_ref, ref) {
   var _useIntl = useIntl(),
       formatMessage = _useIntl.formatMessage;
 
-  var text = React.useMemo(function () {
+  var text = useMemo(function () {
     return _objectSpread({
       matching: formatMessage({
         id: 'DS.MATCHING.PERFORMED'
@@ -48,6 +55,14 @@ var StepCard = React.forwardRef(function (_ref, ref) {
       moveTooltip: formatMessage({
         id: 'DS.STEP-CARD.MOVE'
       }),
+      moveUpTooltip: formatMessage({
+        id: 'DS.STEP-CARD.MOVE-UP',
+        defaultMessage: 'Move Up'
+      }),
+      moveDownTooltip: formatMessage({
+        id: 'DS.STEP-CARD.MOVE-DOWN',
+        defaultMessage: 'Move Down'
+      }),
       deleteTooltip: formatMessage({
         id: 'DS.STEP-CARD.DELETE'
       }),
@@ -57,18 +72,133 @@ var StepCard = React.forwardRef(function (_ref, ref) {
     }, texts);
   }, [formatMessage, texts]);
 
+  var _useState = useState(0),
+      moveByOffset = _useState[0],
+      setMoveByOffset = _useState[1];
+
+  var moveUpInactive = expressionIndex + moveByOffset <= 0;
+  var moveDownInactive = expressionIndex + moveByOffset >= expressionCount - 1;
+  var timeoutMovedRef = useRef(null);
+
+  var _useState2 = useState(expressionMoved),
+      recentlyMoved = _useState2[0],
+      setRecentlyMoved = _useState2[1];
+
+  var spinnerRef = createRef();
+  var countDownSpinnerElement = /*#__PURE__*/React.createElement(S.CountDownWrapper, null, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.createElement(S.CountDownSpinner, {
+    "data-test": moveByOffset,
+    duration: REORDER_THROTTLE / 1000,
+    "stroke-dashoffset": "40",
+    "stroke-linecap": "butt"
+  }, /*#__PURE__*/React.createElement("circle", {
+    ref: spinnerRef,
+    r: "5",
+    cx: "12",
+    cy: "12",
+    fill: "transparent",
+    transform: "rotate(-90,12,12)"
+  }))));
+
+  var resetAnimation = function resetAnimation() {
+    if (spinnerRef.current && spinnerRef.current.parentElement) {
+      var svgGroupElem = spinnerRef.current.parentElement;
+      svgGroupElem.style.transitionProperty = 'none';
+      svgGroupElem.style.strokeDashoffset = '75';
+    }
+  };
+
+  var startAnimation = function startAnimation() {
+    if (spinnerRef.current && spinnerRef.current.parentElement) {
+      var svgGroupElem = spinnerRef.current.parentElement;
+      svgGroupElem.style.transitionDuration = REORDER_THROTTLE / 1000 + "s";
+      svgGroupElem.style.transitionProperty = 'stroke-dashoffset';
+      svgGroupElem.style.strokeDashoffset = '40';
+    }
+  };
+
+  var onMoveUp = function onMoveUp() {
+    if (!moveUpInactive) {
+      resetAnimation();
+      setMoveByOffset(moveByOffset - 1);
+    }
+  };
+
+  var onMoveDown = function onMoveDown() {
+    if (!moveDownInactive) {
+      resetAnimation();
+      setMoveByOffset(moveByOffset + 1);
+    }
+  };
+
+  useEffect(function () {
+    if (expressionMoved) {
+      setRecentlyMoved(expressionMoved);
+      timeoutMovedRef.current = setTimeout(function () {
+        return setRecentlyMoved(false);
+      }, MOVE_SUCCESS_FEEDBACK_DURATION);
+    }
+
+    return resetMoveSuccess;
+  }, [expressionMoved, expressionIndex]);
+
+  var resetMoveSuccess = function resetMoveSuccess() {
+    timeoutMovedRef.current && clearTimeout(timeoutMovedRef.current);
+    setRecentlyMoved(false);
+  };
+
+  useEffect(function () {
+    var timer;
+    var timer2;
+
+    if (moveByOffset !== 0) {
+      timer = setTimeout(function () {
+        onMove(expressionIndex, moveByOffset);
+        setMoveByOffset(0);
+      }, REORDER_THROTTLE);
+    }
+
+    resetAnimation();
+
+    if (moveByOffset) {
+      timer2 = setTimeout(startAnimation, 0);
+    }
+
+    return function () {
+      timer && clearTimeout(timer);
+      timer2 && clearTimeout(timer2);
+    };
+  });
+  var moveByOffsetLabel = "Move " + Math.abs(moveByOffset) + " " + (moveByOffset < 0 ? 'up' : 'down') + "...";
+
   var renderRightSide = function renderRightSide() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, !readOnly && /*#__PURE__*/React.createElement(S.CrudsWrapper, null, /*#__PURE__*/React.createElement(Cruds, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, !readOnly && /*#__PURE__*/React.createElement(S.CrudsWrapper, null, /*#__PURE__*/React.createElement(S.MoveByOffset, {
+      offset: moveByOffset
+    }, countDownSpinnerElement, " ", /*#__PURE__*/React.createElement(S.MoveByOffsetLabel, null, moveByOffsetLabel)), /*#__PURE__*/React.createElement(Cruds, {
+      onMoveUp: onMoveUp,
+      moveUpTooltip: text.moveUpTooltip,
+      moveUpInactive: moveUpInactive,
+      onMoveDown: onMoveDown,
+      moveDownTooltip: text.moveDownTooltip,
+      moveDownInactive: moveDownInactive,
       deleteTooltip: text.deleteTooltip,
       onDelete: onDelete,
       duplicateTooltip: text.duplicateTooltip,
       onDuplicate: onDuplicate
+    })), recentlyMoved && /*#__PURE__*/React.createElement(S.RecentlyMoved, {
+      duration: MOVE_SUCCESS_FEEDBACK_DURATION
+    }, /*#__PURE__*/React.createElement(InlineAlert, {
+      type: "success",
+      message: "Moved"
     })), headerRightSide);
   };
 
   return /*#__PURE__*/React.createElement(S.Container, {
     ref: ref
   }, isHeaderVisible && /*#__PURE__*/React.createElement(S.Header, {
+    onMouseOver: resetMoveSuccess,
+    onFocus: resetMoveSuccess,
     className: "step-card-drag-handler"
   }, /*#__PURE__*/React.createElement(S.LeftSide, {
     readOnly: readOnly

package/dist/StepCard.styles.d.ts

@@ -1,5 +1,16 @@
 /// <reference types="react" />
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RecentlyMoved: import("styled-components").StyledComponent<"span", any, {
+    duration: number;
+}, never>;
+export declare const CountDownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MoveByOffsetLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const CountDownSpinner: import("styled-components").StyledComponent<"g", any, {
+    duration: number;
+}, never>;
+export declare const MoveByOffset: import("styled-components").StyledComponent<"span", any, {
+    offset: number;
+}, never>;
 export declare const CrudsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DragIcon: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-icon").IconProps>, any, {}, never>;
 export declare const Header: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/StepCard.styles.js

@@ -1,41 +1,70 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import Icon from '@synerise/ds-icon';
+var fadeout = keyframes(["from{opacity:1}to{opacity:0;}"]);
 export var Container = styled.div.withConfig({
   displayName: "StepCardstyles__Container",
   componentId: "sc-45dbps-0"
 })(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;width:100%;background-color:", ";border-radius:3px;box-shadow:0 4px 12px 0 #2329360a;min-width:594px;"], function (props) {
   return props.theme.palette.white;
 });
+export var RecentlyMoved = styled.span.withConfig({
+  displayName: "StepCardstyles__RecentlyMoved",
+  componentId: "sc-45dbps-1"
+})(["animation:", " 0.1s linear ", "s 1 forwards;"], fadeout, function (props) {
+  return (props.duration - 200) / 1000;
+});
+export var CountDownWrapper = styled.div.withConfig({
+  displayName: "StepCardstyles__CountDownWrapper",
+  componentId: "sc-45dbps-2"
+})(["vertical-align:middle;display:inline-block;width:24px;height:24px;color:inherit;"]);
+export var MoveByOffsetLabel = styled.span.withConfig({
+  displayName: "StepCardstyles__MoveByOffsetLabel",
+  componentId: "sc-45dbps-3"
+})([""]);
+export var CountDownSpinner = styled.g.withConfig({
+  displayName: "StepCardstyles__CountDownSpinner",
+  componentId: "sc-45dbps-4"
+})(["stroke:", ";stroke-width:2px;stroke-dasharray:75;transition:stroke-dashoffset ", "s linear;"], function (props) {
+  return props.theme.palette['grey-500'];
+}, function (props) {
+  return props.duration;
+});
+export var MoveByOffset = styled.span.withConfig({
+  displayName: "StepCardstyles__MoveByOffset",
+  componentId: "sc-45dbps-5"
+})(["display:flex;align-items:center;gap:2px;", "{display:", ";}"], MoveByOffsetLabel, function (props) {
+  return props.offset === 0 ? 'none' : 'block';
+});
 export var CrudsWrapper = styled.div.withConfig({
   displayName: "StepCardstyles__CrudsWrapper",
-  componentId: "sc-45dbps-1"
+  componentId: "sc-45dbps-6"
 })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-end;opacity:0;visibility:hidden;"]);
 export var DragIcon = styled(Icon).withConfig({
   displayName: "StepCardstyles__DragIcon",
-  componentId: "sc-45dbps-2"
+  componentId: "sc-45dbps-7"
 })(["visibility:hidden;opacity:0;"]);
 export var Header = styled.div.withConfig({
   displayName: "StepCardstyles__Header",
-  componentId: "sc-45dbps-3"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:22px 0;margin:0 24px 0 0;width:100%;max-width:calc(100% - 24px);position:relative;cursor:grab;&:hover{", "{opacity:1;visibility:visible;}", "{visibility:visible;opacity:1;}}"], CrudsWrapper, DragIcon);
+  componentId: "sc-45dbps-8"
+})(["display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:22px 0;margin:0 24px 0 0;width:100%;max-width:calc(100% - 24px);position:relative;cursor:grab;&:hover{", "{display:none;}", "{opacity:1;visibility:visible;}", "{visibility:visible;opacity:1;}}"], RecentlyMoved, CrudsWrapper, DragIcon);
 export var LeftSide = styled.div.withConfig({
   displayName: "StepCardstyles__LeftSide",
-  componentId: "sc-45dbps-4"
+  componentId: "sc-45dbps-9"
 })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding-left:", ";> *{margin-right:8px;}"], function (_ref) {
   var readOnly = _ref.readOnly;
   return readOnly ? '32px' : '0';
 });
 export var RightSide = styled.div.withConfig({
   displayName: "StepCardstyles__RightSide",
-  componentId: "sc-45dbps-5"
+  componentId: "sc-45dbps-10"
 })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;> *{margin-left:8px;}"]);
 export var Body = styled.div.withConfig({
   displayName: "StepCardstyles__Body",
-  componentId: "sc-45dbps-6"
+  componentId: "sc-45dbps-11"
 })(["padding:0 0 24px;width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;.ds-conditions{&:first-of-type{padding-top:0;}&:last-of-type{padding-bottom:0;}}"]);
 export var Footer = styled.div.withConfig({
   displayName: "StepCardstyles__Footer",
-  componentId: "sc-45dbps-7"
+  componentId: "sc-45dbps-12"
 })(["background-color:rgba(249,250,251,0.6);border-top:1px solid ", ";padding:16px 24px;display:flex;flex-direction:row;align-items:center;justify-content:flex-end;width:100%;> *{margin-left:8px;}"], function (props) {
   return props.theme.palette['grey-100'];
 });

package/dist/StepCard.types.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { ReactNode } from 'react';
 export type StepCardTexts = {
     matching: string;
     notMatching: string;
@@ -6,19 +6,25 @@ export type StepCardTexts = {
     notConditionType: string;
     namePlaceholder: string;
     moveTooltip: string;
+    moveUpTooltip: string;
+    moveDownTooltip: string;
     deleteTooltip: string;
     duplicateTooltip: string;
 };
 export type StepCardProps = {
-    footer?: React.ReactNode;
+    footer?: ReactNode;
     matching: boolean;
     name: string;
     onChangeName: (name: string) => void;
     onChangeMatching: (matching: boolean) => void;
     onDelete: () => void;
     onDuplicate: () => void;
+    onMove: (index: number, offset: number) => void;
+    expressionIndex: number;
+    expressionCount: number;
+    expressionMoved?: boolean;
     texts?: StepCardTexts;
     isHeaderVisible?: boolean;
     readOnly?: boolean;
-    headerRightSide?: React.ReactNode;
+    headerRightSide?: ReactNode;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-step-card",
-  "version": "0.9.20",
+  "version": "0.10.0",
   "description": "StepCard UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,7 +33,8 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-cruds": "^0.3.43",
+    "@synerise/ds-alert": "^0.8.0",
+    "@synerise/ds-cruds": "^0.4.0",
     "@synerise/ds-icon": "^0.58.9",
     "@synerise/ds-logic": "^0.8.18",
     "@synerise/ds-typography": "^0.14.1",
@@ -49,5 +50,5 @@
     "@testing-library/dom": "^7.0.2",
     "@testing-library/jest-dom": "5.1.1"
   },
-  "gitHead": "76edb4723a30c59f1a54f666f66fcd814de0af70"
+  "gitHead": "0a23e5f431033a6180383d3e0e19e885b5a66778"
 }