@synerise/ds-filter 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.9.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.8.0...@synerise/ds-filter@0.9.0) (2022-05-13)
+
+
+### Bug Fixes
+
+* **condition:** disabling hover effect on nonactive condition in filter ([228f242](https://github.com/Synerise/synerise-design/commit/228f242e6ce244c73e9da93adb2c4317cd65ec91))
+
+
+### Features
+
+* **condition:** adds defaultOpenedComponent prop ([6b6721d](https://github.com/Synerise/synerise-design/commit/6b6721dbd12be7e744100d303a5d3d7823467c3b))
+
+
+
+
+
 # [0.8.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.7.1...@synerise/ds-filter@0.8.0) (2022-04-29)
 
 

package/dist/Filter.js

@@ -13,6 +13,7 @@ import Matching from '@synerise/ds-logic/dist/Matching/Matching';
 import Placeholder from '@synerise/ds-logic/dist/Placeholder/Placeholder';
 import StepCard from '@synerise/ds-step-card';
 import { useIntl } from 'react-intl';
+import { usePrevious } from '@synerise/ds-utils';
 import * as S from './Filter.styles';
 import { MatchingWrapper } from './Filter.styles';
 var SORTABLE_CONFIG = {
@@ -41,11 +42,18 @@ var Filter = function Filter(_ref) {
       renderStepContent = _ref.renderStepContent,
       addFilterComponent = _ref.addFilterComponent,
       texts = _ref.texts;
+  var previousExpressions = usePrevious(expressions);
 
   var _React$useState = React.useState(null),
       activeExpressionId = _React$useState[0],
       setActiveExpressionId = _React$useState[1];
 
+  React.useEffect(function () {
+    if (previousExpressions && expressions.length > previousExpressions.length) {
+      setActiveExpressionId(expressions[expressions.length - 1].id);
+    }
+  }, [expressions, previousExpressions]);
+
   var _useIntl = useIntl(),
       formatMessage = _useIntl.formatMessage;
 
@@ -128,6 +136,9 @@ var Filter = function Filter(_ref) {
       conditionType: contextType === 'attribute' ? text.step.attribute : text.step.event
     };
   }, [text]);
+  var isActive = React.useCallback(function (expression) {
+    return expression.id === activeExpressionId;
+  }, [activeExpressionId]);
   var componentProps = React.useCallback(function (expression) {
     var contextTypeTexts = getContextTypeTexts(expression);
     var props = {
@@ -150,12 +161,12 @@ var Filter = function Filter(_ref) {
           return onDuplicateStep(expression.id);
         },
         footer: renderStepFooter && renderStepFooter(expression),
-        children: renderStepContent && renderStepContent(expression),
+        children: renderStepContent && renderStepContent(expression, !!activeExpressionId && !isActive(expression)),
         texts: _objectSpread({}, text.step, {}, contextTypeTexts)
       }
     };
     return props[expression.type];
-  }, [getContextTypeTexts, onChangeLogic, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, renderStepContent, renderStepFooter, text.step]);
+  }, [activeExpressionId, getContextTypeTexts, isActive, onChangeLogic, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, renderStepContent, renderStepFooter, text.step]);
   var renderExpression = React.useCallback(function (expression, index) {
     var Component = component[expression.type];
     var LogicComponent = expression.logic && component[expression.logic.type];
@@ -163,14 +174,14 @@ var Filter = function Filter(_ref) {
       key: expression.id,
       "data-dropLabel": text.dropMeHere,
       index: index,
-      style: expression.id === activeExpressionId ? {
+      style: isActive(expression) ? {
         zIndex: 10001
       } : undefined,
       onClick: function onClick() {
         return setActiveExpressionId(expression.id);
       }
     }, /*#__PURE__*/React.createElement(Component, _extends({}, expression.data, componentProps(expression))), expression.logic && index + 1 < expressions.length && /*#__PURE__*/React.createElement(S.LogicWrapper, null, /*#__PURE__*/React.createElement(LogicComponent, _extends({}, expression.logic.data, componentProps(expression.logic)))));
-  }, [componentProps, expressions.length, activeExpressionId, text]);
+  }, [text.dropMeHere, isActive, componentProps, expressions.length]);
   return /*#__PURE__*/React.createElement(S.FilterWrapper, null, matching && /*#__PURE__*/React.createElement(MatchingWrapper, null, /*#__PURE__*/React.createElement(Matching, _extends({}, matching, {
     texts: text.matching
   }))), /*#__PURE__*/React.createElement(React.Fragment, null, expressions.length > 0 ? /*#__PURE__*/React.createElement(ReactSortable, _extends({}, SORTABLE_CONFIG, {

package/dist/Filter.types.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { LogicOperatorValue, LogicProps } from '@synerise/ds-logic/src/Logic.types';
-import { StepCardProps, StepCardTexts } from '@synerise/ds-step-card/src/StepCard.types';
+import { StepCardProps } from '@synerise/ds-step-card/src/StepCard.types';
 import { MatchingProps, MatchingTexts } from '@synerise/ds-logic/src/Matching/Matching.types';
 declare type LogicType = {
     type: 'LOGIC';
@@ -25,11 +25,24 @@ export declare type FilterProps = {
     onDeleteStep: (id: string) => void;
     onDuplicateStep: (id: string) => void;
     renderStepFooter?: (expression: Expression) => React.ReactNode;
-    renderStepContent?: (expression: Expression) => React.ReactNode;
+    renderStepContent?: (expression: Expression, hoverDisabled?: boolean) => React.ReactNode;
     addFilterComponent?: React.ReactNode;
     texts?: {
         matching?: MatchingTexts;
-        step?: StepCardTexts;
+        step?: {
+            matching?: string;
+            notMatching?: string;
+            have?: string;
+            performed?: string;
+            notHave?: string;
+            notPerformed?: string;
+            attribute?: string;
+            event?: string;
+            namePlaceholder?: string;
+            moveTooltip?: string;
+            deleteTooltip?: string;
+            duplicateTooltip?: string;
+        };
         addFilter?: string;
         dropMeHere?: string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-filter",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Filter UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -43,5 +43,5 @@
     "@synerise/ds-step-card": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "4a658911645846d1e329609ba9db06a7bc64962b"
+  "gitHead": "25e5737ebe9d4319de963b369bc281651872887c"
 }