@synerise/ds-filter 0.7.1 → 0.9.1

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.9.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.9.0...@synerise/ds-filter@0.9.1) (2022-06-15)
+
+**Note:** Version bump only for package @synerise/ds-filter
+
+
+
+
+
+# [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)
+
+
+### Features
+
+* **factors:** adds onDeactivate prop, updates Readme.md ([ff85234](https://github.com/Synerise/synerise-design/commit/ff852349a5c77047d6d0642d4b5587dbcc6d24cd))
+
+
+
+
+
 ## [0.7.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.7.0...@synerise/ds-filter@0.7.1) (2022-04-08)
 
 **Note:** Version bump only for package @synerise/ds-filter

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;
 
@@ -73,6 +81,30 @@ var Filter = function Filter(_ref) {
         notMatching: formatMessage({
           id: 'DS.MATCHING.NOT-MATCHING'
         }),
+        have: formatMessage({
+          id: 'DS.MATCHING.HAVE',
+          defaultMessage: 'Have'
+        }),
+        performed: formatMessage({
+          id: 'DS.MATCHING.PERFORMED',
+          defaultMessage: 'Performed'
+        }),
+        notHave: formatMessage({
+          id: 'DS.MATCHING.NOT-HAVE',
+          defaultMessage: 'Does not have'
+        }),
+        notPerformed: formatMessage({
+          id: 'DS.MATCHING.NOT-PERFORMED',
+          defaultMessage: 'Have not performed'
+        }),
+        attribute: formatMessage({
+          id: 'DS.MATCHING.EXPRESSION-TYPE.ATTRIBUTE',
+          defaultMessage: 'attribute'
+        }),
+        event: formatMessage({
+          id: 'DS.MATCHING.EXPRESSION-TYPE.EVENT',
+          defaultMessage: 'event'
+        }),
         namePlaceholder: formatMessage({
           id: 'DS.STEP-CARD.NAME-PLACEHOLDER'
         }),
@@ -99,29 +131,14 @@ var Filter = function Filter(_ref) {
   var getContextTypeTexts = React.useCallback(function (expression) {
     var contextType = expression.expressionType;
     return {
-      matching: contextType === 'attribute' ? formatMessage({
-        id: 'DS.MATCHING.HAVE',
-        defaultMessage: 'Have'
-      }) : formatMessage({
-        id: 'DS.MATCHING.PERFORMED',
-        defaultMessage: 'Performed'
-      }),
-      notMatching: contextType === 'attribute' ? formatMessage({
-        id: 'DS.MATCHING.NOT-HAVE',
-        defaultMessage: 'Not have'
-      }) : formatMessage({
-        id: 'DS.MATCHING.NOT-PERFORMED',
-        defaultMessage: 'Not performed'
-      }),
-      conditionType: contextType === 'attribute' ? formatMessage({
-        id: 'DS.MATCHING.EXPRESSION-TYPE.ATTRIBUTE',
-        defaultMessage: 'attribute'
-      }) : formatMessage({
-        id: 'DS.MATCHING.EXPRESSION-TYPE.EVENT',
-        defaultMessage: 'event'
-      })
+      matching: contextType === 'attribute' ? text.step.have : text.step.performed,
+      notMatching: contextType === 'attribute' ? text.step.notHave : text.step.notPerformed,
+      conditionType: contextType === 'attribute' ? text.step.attribute : text.step.event
     };
-  }, [formatMessage]);
+  }, [text]);
+  var isActive = React.useCallback(function (expression) {
+    return expression.id === activeExpressionId;
+  }, [activeExpressionId]);
   var componentProps = React.useCallback(function (expression) {
     var contextTypeTexts = getContextTypeTexts(expression);
     var props = {
@@ -144,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];
@@ -157,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.7.1",
+  "version": "0.9.1",
   "description": "Filter UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,7 +35,7 @@
     "@synerise/ds-button": "^0.17.2",
     "@synerise/ds-icon": "^0.49.0",
     "@synerise/ds-logic": "^0.7.0",
-    "@synerise/ds-step-card": "^0.6.1",
+    "@synerise/ds-step-card": "^0.6.3",
     "react-sortablejs": "^6.0.0"
   },
   "peerDependencies": {
@@ -43,5 +43,5 @@
     "@synerise/ds-step-card": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "78a3de75d8ec9c917d96c1b54c70d24f50dc8c7a"
+  "gitHead": "d787395998e479858cb58f6d56555e4c51fe45d5"
 }