@synerise/ds-filter 0.12.1 → 0.13.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.13.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.12.2...@synerise/ds-filter@0.13.0) (2022-09-26)
+
+
+### Features
+
+* **filter:** changes after review ([d2c30a7](https://github.com/Synerise/synerise-design/commit/d2c30a75e1bed46ca4da78c3f390d0f51614c659))
+* **filter:** limiting the number of conditions ([6f0d114](https://github.com/Synerise/synerise-design/commit/6f0d114735abc97362b461adc138f7fcadc39456))
+
+
+
+
+
+## [0.12.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.12.1...@synerise/ds-filter@0.12.2) (2022-08-31)
+
+**Note:** Version bump only for package @synerise/ds-filter
+
+
+
+
+
 ## [0.12.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.12.0...@synerise/ds-filter@0.12.1) (2022-08-25)
 
 **Note:** Version bump only for package @synerise/ds-filter

package/dist/Filter.js

@@ -30,7 +30,8 @@ var component = {
 };
 
 var Filter = function Filter(_ref) {
-  var expressions = _ref.expressions,
+  var maxConditionsLimit = _ref.maxConditionsLimit,
+      expressions = _ref.expressions,
       matching = _ref.matching,
       onChangeOrder = _ref.onChangeOrder,
       onChangeLogic = _ref.onChangeLogic,
@@ -65,6 +66,9 @@ var Filter = function Filter(_ref) {
       }),
       dropMeHere: formatMessage({
         id: 'DS.FILTER.DROP-ME-HERE'
+      }),
+      conditionsLimit: formatMessage({
+        id: 'DS.FILTER.CONDITIONS-LIMIT'
       })
     }, texts, {
       matching: _objectSpread({
@@ -149,6 +153,9 @@ var Filter = function Filter(_ref) {
   var isActive = React.useCallback(function (expression) {
     return expression.id === activeExpressionId;
   }, [activeExpressionId]);
+  var isLimitExceeded = React.useMemo(function () {
+    return maxConditionsLimit ? expressions.length >= maxConditionsLimit : false;
+  }, [expressions, maxConditionsLimit]);
   var componentProps = React.useCallback(function (expression) {
     var contextTypeTexts = getContextTypeTexts(expression);
     var props = {
@@ -168,16 +175,16 @@ var Filter = function Filter(_ref) {
         onDelete: function onDelete() {
           return onDeleteStep(expression.id);
         },
-        onDuplicate: function onDuplicate() {
+        onDuplicate: !isLimitExceeded ? function () {
           return onDuplicateStep(expression.id);
-        },
+        } : undefined,
         footer: renderStepFooter && renderStepFooter(expression),
         children: renderStepContent && renderStepContent(expression, !!activeExpressionId && !isActive(expression)),
         texts: _objectSpread({}, text.step, {}, contextTypeTexts)
       }
     };
     return props[expression.type];
-  }, [activeExpressionId, getContextTypeTexts, isActive, logicOptions, onChangeLogic, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, renderStepContent, renderStepFooter, text.step]);
+  }, [activeExpressionId, getContextTypeTexts, isActive, isLimitExceeded, logicOptions, 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];
@@ -193,14 +200,16 @@ var Filter = function Filter(_ref) {
       }
     }, /*#__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)))));
   }, [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, {
+  return /*#__PURE__*/React.createElement(S.FilterWrapper, null, /*#__PURE__*/React.createElement(MatchingWrapper, null, /*#__PURE__*/React.createElement("div", null, matching && /*#__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, {
+  }))), !!maxConditionsLimit && /*#__PURE__*/React.createElement(S.ConditionsLimit, null, text.conditionsLimit, ":", ' ', /*#__PURE__*/React.createElement(S.ConditionsLimitResults, null, expressions.length, "/", maxConditionsLimit))), /*#__PURE__*/React.createElement(React.Fragment, null, expressions.length > 0 ? /*#__PURE__*/React.createElement(ReactSortable, _extends({}, SORTABLE_CONFIG, {
     list: expressions,
     setList: onChangeOrder
   }), expressions.map(renderExpression)) : /*#__PURE__*/React.createElement(Placeholder, {
     text: text.placeholder.chooseCondition
-  })), addFilterComponent && /*#__PURE__*/React.createElement(S.AddButtonWrapper, null, addFilterComponent));
+  })), addFilterComponent && /*#__PURE__*/React.createElement(S.AddButtonWrapper, null, typeof addFilterComponent === 'function' ? addFilterComponent({
+    isLimitExceeded: isLimitExceeded
+  }) : addFilterComponent));
 };
 
 export default Filter;

package/dist/Filter.styles.d.ts

@@ -1,5 +1,7 @@
 export declare const FilterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MatchingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ConditionsLimit: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ConditionsLimitResults: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const LogicWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ExpressionWrapper: import("styled-components").StyledComponent<"div", any, {
     index: number;

package/dist/Filter.styles.js

@@ -7,14 +7,22 @@ export var FilterWrapper = styled.div.withConfig({
 export var MatchingWrapper = styled.div.withConfig({
   displayName: "Filterstyles__MatchingWrapper",
   componentId: "w5f27p-1"
-})(["margin-bottom:24px;"]);
+})(["display:flex;align-items:center;justify-content:space-between;align-content:flex-end;margin-bottom:24px;"]);
+export var ConditionsLimit = styled.div.withConfig({
+  displayName: "Filterstyles__ConditionsLimit",
+  componentId: "w5f27p-2"
+})(["margin-left:16px;"]);
+export var ConditionsLimitResults = styled.span.withConfig({
+  displayName: "Filterstyles__ConditionsLimitResults",
+  componentId: "w5f27p-3"
+})(["font-weight:500;"]);
 export var LogicWrapper = styled.div.withConfig({
   displayName: "Filterstyles__LogicWrapper",
-  componentId: "w5f27p-2"
+  componentId: "w5f27p-4"
 })(["margin:22px 0;"]);
 export var ExpressionWrapper = styled.div.withConfig({
   displayName: "Filterstyles__ExpressionWrapper",
-  componentId: "w5f27p-3"
+  componentId: "w5f27p-5"
 })(["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;
 }, DragIcon, Body, Footer, LogicWrapper, function (props) {
@@ -26,5 +34,5 @@ export var ExpressionWrapper = styled.div.withConfig({
 });
 export var AddButtonWrapper = styled.div.withConfig({
   displayName: "Filterstyles__AddButtonWrapper",
-  componentId: "w5f27p-4"
+  componentId: "w5f27p-6"
 })(["display:flex;align-items:flex-start;justify-content:flex-start;margin:24px 0 0;width:100%;"]);

package/dist/Filter.types.d.ts

@@ -15,7 +15,11 @@ export declare type StepType = {
     expressionType?: 'attribute' | 'event';
 };
 export declare type Expression = LogicType | StepType;
+export declare type addFilterComponentProps = {
+    isLimitExceeded: boolean;
+};
 export declare type FilterProps = {
+    maxConditionsLimit?: number;
     expressions: Expression[];
     matching?: MatchingProps;
     onChangeOrder: (newOrder: Expression[]) => void;
@@ -26,7 +30,7 @@ export declare type FilterProps = {
     onDuplicateStep: (id: string) => void;
     renderStepFooter?: (expression: Expression) => React.ReactNode;
     renderStepContent?: (expression: Expression, hoverDisabled?: boolean) => React.ReactNode;
-    addFilterComponent?: React.ReactNode;
+    addFilterComponent?: React.ReactNode | ((arg: addFilterComponentProps) => React.ReactNode);
     logicOptions?: LogicOperator[];
     texts?: {
         matching?: MatchingTexts;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-filter",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "Filter UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -32,9 +32,9 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.17.8",
-    "@synerise/ds-icon": "^0.50.0",
-    "@synerise/ds-logic": "^0.7.7",
+    "@synerise/ds-button": "^0.17.9",
+    "@synerise/ds-icon": "^0.51.0",
+    "@synerise/ds-logic": "^0.7.8",
     "@synerise/ds-step-card": "^0.6.3",
     "react-sortablejs": "^6.0.0"
   },
@@ -43,5 +43,5 @@
     "@synerise/ds-step-card": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "c9530f0548fa244796b0c6b1ea5fa3d6330e84ea"
+  "gitHead": "c952524bf8a0690fff0bb6b1ef6d13bc3c2ce820"
 }