@synerise/ds-filter 0.12.2 → 0.13.1

package/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.13.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.13.0...@synerise/ds-filter@0.13.1) (2022-11-23)
+
+
+### Bug Fixes
+
+* **filter:** add props to dependency array ([3ba9f26](https://github.com/Synerise/synerise-design/commit/3ba9f26547805967bbe74b66df6112fde8c581e3))
+* **filter:** add props to overwrite filter title ([889753a](https://github.com/Synerise/synerise-design/commit/889753a305d6aba7ccf817bc11d6b44b5a06447f))
+* **filter:** filter props to hide step card header ([b117415](https://github.com/Synerise/synerise-design/commit/b11741522b60065e905bfac76e926b93f9d26568))
+
+
+
+
+
+# [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

package/dist/Filter.js

@@ -30,7 +30,10 @@ var component = {
 };
 
 var Filter = function Filter(_ref) {
-  var expressions = _ref.expressions,
+  var _texts$overwritten;
+
+  var maxConditionsLimit = _ref.maxConditionsLimit,
+      expressions = _ref.expressions,
       matching = _ref.matching,
       onChangeOrder = _ref.onChangeOrder,
       onChangeLogic = _ref.onChangeLogic,
@@ -42,7 +45,11 @@ var Filter = function Filter(_ref) {
       renderStepContent = _ref.renderStepContent,
       addFilterComponent = _ref.addFilterComponent,
       texts = _ref.texts,
-      logicOptions = _ref.logicOptions;
+      logicOptions = _ref.logicOptions,
+      _ref$visibilityConfig = _ref.visibilityConfig,
+      visibilityConfig = _ref$visibilityConfig === void 0 ? {
+    isStepCardHeaderVisible: true
+  } : _ref$visibilityConfig;
   var previousExpressions = usePrevious(expressions);
 
   var _React$useState = React.useState(null),
@@ -65,6 +72,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 +159,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 +181,17 @@ 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)),
+        isHeaderVisible: visibilityConfig.isStepCardHeaderVisible,
         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, visibilityConfig.isStepCardHeaderVisible]);
   var renderExpression = React.useCallback(function (expression, index) {
     var Component = component[expression.type];
     var LogicComponent = expression.logic && component[expression.logic.type];
@@ -193,14 +207,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, texts != null && (_texts$overwritten = texts.overwritten) != null && _texts$overwritten.filterTitle ? /*#__PURE__*/React.createElement(S.FilterTitle, null, texts.overwritten.filterTitle) : /*#__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,7 +1,10 @@
 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;
 }, never>;
 export declare const AddButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FilterTitle: import("styled-components").StyledComponent<"div", any, {}, never>;

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,11 @@ export var ExpressionWrapper = styled.div.withConfig({
 });
 export var AddButtonWrapper = styled.div.withConfig({
   displayName: "Filterstyles__AddButtonWrapper",
-  componentId: "w5f27p-4"
-})(["display:flex;align-items:flex-start;justify-content:flex-start;margin:24px 0 0;width:100%;"]);
+  componentId: "w5f27p-6"
+})(["display:flex;align-items:flex-start;justify-content:flex-start;margin:24px 0 0;width:100%;"]);
+export var FilterTitle = styled.div.withConfig({
+  displayName: "Filterstyles__FilterTitle",
+  componentId: "w5f27p-7"
+})(["font-size:16px;font-weight:500;line-height:1.25;color:", ";text-align:left;user-select:none;&:first-letter{text-transform:uppercase;}"], function (props) {
+  return props.theme.palette['grey-800'];
+});

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;
@@ -52,5 +56,11 @@ export declare type FilterProps = {
         };
         addFilter?: string;
         dropMeHere?: string;
+        overwritten?: {
+            filterTitle?: string;
+        };
+    };
+    visibilityConfig: {
+        isStepCardHeaderVisible?: boolean;
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-filter",
-  "version": "0.12.2",
+  "version": "0.13.1",
   "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": "ef480757296035e4ba2928cd169a98458477b8d1"
+  "gitHead": "d40a37ab255097be874ce7efc0c2bcc54d3cc943"
 }