@synerise/ds-filter 0.6.4 → 0.8.0

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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
+
+
+
+
+
+# [0.7.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.6.4...@synerise/ds-filter@0.7.0) (2022-04-05)
+
+
+### Bug Fixes
+
+* fix eslint errors ([7cce9b9](https://github.com/Synerise/synerise-design/commit/7cce9b94f8dea533b3c36a0f0cfd5145d4737166))
+
+
+### Features
+
+* **filter:** fixes bugs ([b862ddd](https://github.com/Synerise/synerise-design/commit/b862dddbce1293c2a5381663fc903bb574edd135))
+* **filter:** updates styles ([a826761](https://github.com/Synerise/synerise-design/commit/a826761de845a47f8436d22a7307f2c03bb197e0))
+
+
+
+
+
 ## [0.6.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.6.3...@synerise/ds-filter@0.6.4) (2022-03-30)
 
 **Note:** Version bump only for package @synerise/ds-filter

package/dist/Filter.js

@@ -20,7 +20,8 @@ var SORTABLE_CONFIG = {
   className: 'sortable-list',
   handle: '.step-card-drag-handler',
   animation: 200,
-  forceFallback: true
+  forceFallback: true,
+  filter: '.ds-matching-toggle, .ds-cruds'
 };
 var component = {
   LOGIC: Logic,
@@ -72,6 +73,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'
         }),
@@ -95,7 +120,16 @@ var Filter = function Filter(_ref) {
       }
     });
   }, [formatMessage, texts]);
+  var getContextTypeTexts = React.useCallback(function (expression) {
+    var contextType = expression.expressionType;
+    return {
+      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
+    };
+  }, [text]);
   var componentProps = React.useCallback(function (expression) {
+    var contextTypeTexts = getContextTypeTexts(expression);
     var props = {
       LOGIC: {
         onChange: function onChange(value) {
@@ -117,11 +151,11 @@ var Filter = function Filter(_ref) {
         },
         footer: renderStepFooter && renderStepFooter(expression),
         children: renderStepContent && renderStepContent(expression),
-        texts: text.step
+        texts: _objectSpread({}, text.step, {}, contextTypeTexts)
       }
     };
     return props[expression.type];
-  }, [onChangeLogic, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, renderStepContent, renderStepFooter, text]);
+  }, [getContextTypeTexts, 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];

package/dist/Filter.styles.js

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
-import { Body, Footer } from '@synerise/ds-step-card/dist/StepCard.styles';
+import { Body, DragIcon, Footer } from '@synerise/ds-step-card/dist/StepCard.styles';
 export var FilterWrapper = styled.div.withConfig({
   displayName: "Filterstyles__FilterWrapper",
   componentId: "w5f27p-0"
-})(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:auto;"]);
+})(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;"]);
 export var MatchingWrapper = styled.div.withConfig({
   displayName: "Filterstyles__MatchingWrapper",
   componentId: "w5f27p-1"
@@ -11,16 +11,16 @@ export var MatchingWrapper = styled.div.withConfig({
 export var LogicWrapper = styled.div.withConfig({
   displayName: "Filterstyles__LogicWrapper",
   componentId: "w5f27p-2"
-})(["margin-top:24px;"]);
+})(["margin:22px 0;"]);
 export var ExpressionWrapper = styled.div.withConfig({
   displayName: "Filterstyles__ExpressionWrapper",
   componentId: "w5f27p-3"
-})(["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;", "{display:none;}", "{display:none;}", "{display:none;}}&.ghost-element{cursor:grabbing;width:100%;background-color:", ";border:1px dashed ", ";border-radius:3px;display:flex;align-items:center;justify-content:center;padding:0;margin-bottom:24px;height:70px;box-shadow:none;position:relative;&:before{content:attr(data-dropLabel);text-align:center;position:relative;color:", ";}*{display:none;}}"], 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;}", "{display:none;}", "{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:", ";}*{display:none;}}"], function (props) {
   return 1000 - props.index;
-}, Body, Footer, LogicWrapper, function (props) {
+}, DragIcon, Body, Footer, LogicWrapper, function (props) {
   return props.theme.palette['blue-050'];
 }, function (props) {
-  return props.theme.palette['blue-300'];
+  return props.theme.palette['blue-600'];
 }, function (props) {
   return props.theme.palette['blue-600'];
 });

package/dist/Filter.types.d.ts

@@ -12,6 +12,7 @@ declare type StepType = {
     id: string;
     data: Partial<StepCardProps>;
     logic?: LogicType;
+    expressionType?: 'attribute' | 'event';
 };
 export declare type Expression = LogicType | StepType;
 export declare type FilterProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-filter",
-  "version": "0.6.4",
+  "version": "0.8.0",
   "description": "Filter UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,8 +34,8 @@
   "dependencies": {
     "@synerise/ds-button": "^0.17.2",
     "@synerise/ds-icon": "^0.49.0",
-    "@synerise/ds-logic": "^0.6.4",
-    "@synerise/ds-step-card": "^0.5.9",
+    "@synerise/ds-logic": "^0.7.0",
+    "@synerise/ds-step-card": "^0.6.2",
     "react-sortablejs": "^6.0.0"
   },
   "peerDependencies": {
@@ -43,5 +43,5 @@
     "@synerise/ds-step-card": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "93d7c60a7fe73188d715fd52b9701f81fcb4e60a"
+  "gitHead": "4a658911645846d1e329609ba9db06a7bc64962b"
 }