@synerise/ds-filter 0.14.27 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/README.md +18 -14
  3. package/dist/Filter.d.ts +2 -2
  4. package/dist/Filter.js +21 -18
  5. package/dist/Filter.styles.d.ts +2 -0
  6. package/dist/Filter.styles.js +16 -8
  7. package/dist/Filter.types.d.ts +2 -0
  8. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [0.15.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.14.28...@synerise/ds-filter@0.15.0) (2023-07-04)
7
+
8
+
9
+ ### Features
10
+
11
+ * **filter:** adds letter tags to step cards and filter header ([ad9a366](https://github.com/Synerise/synerise-design/commit/ad9a366ae6bb8127eaeafa5e7bd89f7e35c1bcde))
12
+
13
+
14
+
15
+
16
+
17
+ ## [0.14.28](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.14.27...@synerise/ds-filter@0.14.28) (2023-06-28)
18
+
19
+ **Note:** Version bump only for package @synerise/ds-filter
20
+
21
+
22
+
23
+
24
+
6
25
  ## [0.14.27](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.14.26...@synerise/ds-filter@0.14.27) (2023-06-14)
7
26
 
8
27
  **Note:** Version bump only for package @synerise/ds-filter
package/README.md CHANGED
@@ -57,20 +57,24 @@ import Filter from '@synerise/ds-filter'
57
57
 
58
58
  ## API
59
59
 
60
- | Property | Description | Type | Default |
61
- | --- | --- | --- | --- |
62
- | expressions | Array of expressions | Expression[] | - |
63
- | matching | Main matching configuration | : MatchingProps | - |
64
- | onChangeOrder | Function called when user change order of StepCards | (newOrder: Expression[]) => void | - |
65
- | onChangeLogic | Function called when user change value of Logic | (id: string, logic: LogicOperatorValue) => void | - |
66
- | onChangeStepMatching | Function called when user change value of StepCard matching | (id: string, matching: boolean) => void | - |
67
- | onChangeStepName | Function called when user change name of StepCard | (id: string, name: string) => void | - |
68
- | onDeleteStep | Function called when user click on delete StepCard icon | (id: string) => void | - |
69
- | onDuplicateStep | Function called when user click on duplicate StepCard icon | (id: string) => void | - |
70
- | renderStepFooter | Function which renders footer of StepCard | : (expression: Expression) => React.ReactNode | - |
71
- | renderStepContent | Function which render content of StepCard | : (expression: Expression) => React.ReactNode | - |
72
- | onAdd | Function called when user click on AddFilter button | : () => void | - |
73
- | texts | Object with translations | FilterTexts | - |
60
+ | Property | Description | Type | Default |
61
+ | --- | --- | --- | --- |
62
+ | expressions | Array of expressions | Expression[] | - |
63
+ | matching | Main matching configuration | : MatchingProps | - |
64
+ | onChangeOrder | Function called when user change order of StepCards | (newOrder: Expression[]) => void | - |
65
+ | onChangeLogic | Function called when user change value of Logic | (id: string, logic: LogicOperatorValue) => void | - |
66
+ | onChangeStepMatching | Function called when user change value of StepCard matching | (id: string, matching: boolean) => void | - |
67
+ | onChangeStepName | Function called when user change name of StepCard | (id: string, name: string) => void | - |
68
+ | onDeleteStep | Function called when user click on delete StepCard icon | (id: string) => void | - |
69
+ | onDuplicateStep | Function called when user click on duplicate StepCard icon | (id: string) => void | - |
70
+ | renderHeaderRightSide | Renders filter header right side slot | (expressions: Expression[]) => React.ReactNode; | - |
71
+ | renderStepFooter | Function which renders footer of StepCard | (expression: Expression) => React.ReactNode | - |
72
+ | renderStepContent | Function which render content of StepCard | (expression: Expression) => React.ReactNode | - |
73
+ | renderStepHeaderRightSide | Function which renders right side slot in StepCard header | (expression: Expression, index: number) => React.ReactNode | - |
74
+ | onAdd | Function called when user click on AddFilter button | () => void | - |
75
+ | texts | Object with translations | FilterTexts | - |
76
+
77
+
74
78
 
75
79
  ### Expression
76
80
 
package/dist/Filter.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import * as React from 'react';
1
+ import { FC } from 'react';
2
2
  import { FilterProps } from './Filter.types';
3
- declare const Filter: React.FC<FilterProps>;
3
+ declare const Filter: FC<FilterProps>;
4
4
  export default Filter;
package/dist/Filter.js CHANGED
@@ -7,22 +7,22 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
7
7
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
8
8
 
9
9
  import * as React from 'react';
10
+ import { useCallback, useMemo, useEffect, useState } from 'react';
11
+ import { useIntl } from 'react-intl';
10
12
  import { ReactSortable } from 'react-sortablejs';
11
13
  import Logic from '@synerise/ds-logic';
12
14
  import Matching from '@synerise/ds-logic/dist/Matching/Matching';
13
15
  import Placeholder from '@synerise/ds-logic/dist/Placeholder/Placeholder';
14
16
  import StepCard from '@synerise/ds-step-card';
15
- import { useIntl } from 'react-intl';
16
17
  import { usePrevious } from '@synerise/ds-utils';
17
18
  import * as S from './Filter.styles';
18
- import { MatchingWrapper } from './Filter.styles';
19
19
  var SORTABLE_CONFIG = {
20
20
  ghostClass: 'ghost-element',
21
21
  className: 'sortable-list',
22
22
  handle: '.step-card-drag-handler',
23
23
  animation: 200,
24
24
  forceFallback: true,
25
- filter: '.ds-matching-toggle, .ds-cruds'
25
+ filter: '.ds-matching-toggle, .step-card-right-side'
26
26
  };
27
27
  var component = {
28
28
  LOGIC: Logic,
@@ -43,9 +43,11 @@ var Filter = function Filter(_ref) {
43
43
  onDuplicateStep = _ref.onDuplicateStep,
44
44
  renderStepFooter = _ref.renderStepFooter,
45
45
  renderStepContent = _ref.renderStepContent,
46
+ renderStepHeaderRightSide = _ref.renderStepHeaderRightSide,
46
47
  addFilterComponent = _ref.addFilterComponent,
47
48
  texts = _ref.texts,
48
49
  logicOptions = _ref.logicOptions,
50
+ renderHeaderRightSide = _ref.renderHeaderRightSide,
49
51
  _ref$visibilityConfig = _ref.visibilityConfig,
50
52
  visibilityConfig = _ref$visibilityConfig === void 0 ? {
51
53
  isStepCardHeaderVisible: true
@@ -54,11 +56,11 @@ var Filter = function Filter(_ref) {
54
56
  readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
55
57
  var previousExpressions = usePrevious(expressions);
56
58
 
57
- var _React$useState = React.useState(null),
58
- activeExpressionId = _React$useState[0],
59
- setActiveExpressionId = _React$useState[1];
59
+ var _useState = useState(null),
60
+ activeExpressionId = _useState[0],
61
+ setActiveExpressionId = _useState[1];
60
62
 
61
- React.useEffect(function () {
63
+ useEffect(function () {
62
64
  if (previousExpressions && expressions.length > previousExpressions.length) {
63
65
  setActiveExpressionId(expressions[expressions.length - 1].id);
64
66
  }
@@ -67,7 +69,7 @@ var Filter = function Filter(_ref) {
67
69
  var _useIntl = useIntl(),
68
70
  formatMessage = _useIntl.formatMessage;
69
71
 
70
- var text = React.useMemo(function () {
72
+ var text = useMemo(function () {
71
73
  return _objectSpread({
72
74
  addFilter: formatMessage({
73
75
  id: 'DS.FILTER.ADD-FILTER'
@@ -149,7 +151,7 @@ var Filter = function Filter(_ref) {
149
151
  }, texts == null ? void 0 : texts.placeholder)
150
152
  });
151
153
  }, [formatMessage, texts]);
152
- var getContextTypeTexts = React.useCallback(function (expression) {
154
+ var getContextTypeTexts = useCallback(function (expression) {
153
155
  var contextType = expression.expressionType;
154
156
  return {
155
157
  matching: contextType === 'attribute' ? text.step.have : text.step.performed,
@@ -158,13 +160,13 @@ var Filter = function Filter(_ref) {
158
160
  notConditionType: contextType === 'attribute' ? text.step.notAttribute : text.step.notEvent
159
161
  };
160
162
  }, [text]);
161
- var isActive = React.useCallback(function (expression) {
163
+ var isActive = useCallback(function (expression) {
162
164
  return expression.id === activeExpressionId;
163
165
  }, [activeExpressionId]);
164
- var isLimitExceeded = React.useMemo(function () {
166
+ var isLimitExceeded = useMemo(function () {
165
167
  return maxConditionsLimit ? expressions.length >= maxConditionsLimit : false;
166
168
  }, [expressions, maxConditionsLimit]);
167
- var componentProps = React.useCallback(function (expression) {
169
+ var componentProps = useCallback(function (expression, index) {
168
170
  var contextTypeTexts = getContextTypeTexts(expression);
169
171
  var props = {
170
172
  LOGIC: {
@@ -189,12 +191,13 @@ var Filter = function Filter(_ref) {
189
191
  footer: renderStepFooter && renderStepFooter(expression),
190
192
  children: renderStepContent && renderStepContent(expression, !!activeExpressionId && !isActive(expression)),
191
193
  isHeaderVisible: visibilityConfig.isStepCardHeaderVisible,
194
+ headerRightSide: renderStepHeaderRightSide && renderStepHeaderRightSide(expression, index),
192
195
  texts: _objectSpread({}, text.step, {}, contextTypeTexts)
193
196
  }
194
197
  };
195
198
  return props[expression.type];
196
- }, [activeExpressionId, getContextTypeTexts, isActive, isLimitExceeded, logicOptions, onChangeLogic, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, renderStepContent, renderStepFooter, text.step, visibilityConfig.isStepCardHeaderVisible]);
197
- var renderExpression = React.useCallback(function (expression, index) {
199
+ }, [activeExpressionId, getContextTypeTexts, isActive, isLimitExceeded, logicOptions, onChangeLogic, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, renderStepContent, renderStepFooter, renderStepHeaderRightSide, text.step, visibilityConfig.isStepCardHeaderVisible]);
200
+ var renderExpression = useCallback(function (expression, index) {
198
201
  var Component = component[expression.type];
199
202
  var LogicComponent = expression.logic && component[expression.logic.type];
200
203
  return /*#__PURE__*/React.createElement(S.ExpressionWrapper, {
@@ -207,16 +210,16 @@ var Filter = function Filter(_ref) {
207
210
  onClick: function onClick() {
208
211
  return setActiveExpressionId(expression.id);
209
212
  }
210
- }, /*#__PURE__*/React.createElement(Component, _extends({}, expression.data, componentProps(expression), {
213
+ }, /*#__PURE__*/React.createElement(Component, _extends({}, expression.data, componentProps(expression, index), {
211
214
  readOnly: readOnly
212
- })), expression.logic && index + 1 < expressions.length && /*#__PURE__*/React.createElement(S.LogicWrapper, null, /*#__PURE__*/React.createElement(LogicComponent, _extends({}, expression.logic.data, componentProps(expression.logic), {
215
+ })), expression.logic && index + 1 < expressions.length && /*#__PURE__*/React.createElement(S.LogicWrapper, null, /*#__PURE__*/React.createElement(LogicComponent, _extends({}, expression.logic.data, componentProps(expression.logic, index), {
213
216
  readOnly: readOnly
214
217
  }))));
215
218
  }, [text.dropMeHere, isActive, componentProps, expressions.length, readOnly]);
216
- 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, {
219
+ return /*#__PURE__*/React.createElement(S.FilterWrapper, null, /*#__PURE__*/React.createElement(S.FilterHeader, null, texts != null && (_texts$overwritten = texts.overwritten) != null && _texts$overwritten.filterTitle ? /*#__PURE__*/React.createElement(S.FilterTitle, null, texts.overwritten.filterTitle) : /*#__PURE__*/React.createElement(S.MatchingWrapper, null, /*#__PURE__*/React.createElement("div", null, matching && /*#__PURE__*/React.createElement(Matching, _extends({}, matching, {
217
220
  texts: text.matching,
218
221
  readOnly: readOnly
219
- }))), !!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, {
222
+ }))), !!maxConditionsLimit && /*#__PURE__*/React.createElement(S.ConditionsLimit, null, text.conditionsLimit, ":", ' ', /*#__PURE__*/React.createElement(S.ConditionsLimitResults, null, expressions.length, "/", maxConditionsLimit))), renderHeaderRightSide && /*#__PURE__*/React.createElement(S.FilterHeaderRightSide, null, renderHeaderRightSide(expressions))), /*#__PURE__*/React.createElement(React.Fragment, null, expressions.length > 0 ? /*#__PURE__*/React.createElement(ReactSortable, _extends({}, SORTABLE_CONFIG, {
220
223
  list: expressions,
221
224
  setList: onChangeOrder
222
225
  }), expressions.map(renderExpression)) : /*#__PURE__*/React.createElement(Placeholder, {
package/dist/Filter.styles.d.ts CHANGED
@@ -1,4 +1,6 @@
1
1
  export declare const FilterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
2
+ export declare const FilterHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
3
+ export declare const FilterHeaderRightSide: import("styled-components").StyledComponent<"div", any, {}, never>;
2
4
  export declare const MatchingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
3
5
  export declare const ConditionsLimit: import("styled-components").StyledComponent<"div", any, {}, never>;
4
6
  export declare const ConditionsLimitResults: import("styled-components").StyledComponent<"span", any, {}, never>;
package/dist/Filter.styles.js CHANGED
@@ -4,25 +4,33 @@ export var FilterWrapper = styled.div.withConfig({
4
4
  displayName: "Filterstyles__FilterWrapper",
5
5
  componentId: "w5f27p-0"
6
6
  })(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;"]);
7
+ export var FilterHeader = styled.div.withConfig({
8
+ displayName: "Filterstyles__FilterHeader",
9
+ componentId: "w5f27p-1"
10
+ })(["display:flex;flex-direction:row;justify-content:space-between;width:100%;margin-bottom:24px;"]);
11
+ export var FilterHeaderRightSide = styled.div.withConfig({
12
+ displayName: "Filterstyles__FilterHeaderRightSide",
13
+ componentId: "w5f27p-2"
14
+ })(["align-self:flex-end;flex:0 0 auto;"]);
7
15
  export var MatchingWrapper = styled.div.withConfig({
8
16
  displayName: "Filterstyles__MatchingWrapper",
9
- componentId: "w5f27p-1"
10
- })(["display:flex;align-items:center;justify-content:space-between;align-content:flex-end;margin-bottom:24px;"]);
17
+ componentId: "w5f27p-3"
18
+ })(["display:flex;align-items:center;justify-content:space-between;align-content:flex-end;"]);
11
19
  export var ConditionsLimit = styled.div.withConfig({
12
20
  displayName: "Filterstyles__ConditionsLimit",
13
- componentId: "w5f27p-2"
21
+ componentId: "w5f27p-4"
14
22
  })(["margin-left:16px;"]);
15
23
  export var ConditionsLimitResults = styled.span.withConfig({
16
24
  displayName: "Filterstyles__ConditionsLimitResults",
17
- componentId: "w5f27p-3"
25
+ componentId: "w5f27p-5"
18
26
  })(["font-weight:500;"]);
19
27
  export var LogicWrapper = styled.div.withConfig({
20
28
  displayName: "Filterstyles__LogicWrapper",
21
- componentId: "w5f27p-4"
29
+ componentId: "w5f27p-6"
22
30
  })(["margin:22px 0;"]);
23
31
  export var ExpressionWrapper = styled.div.withConfig({
24
32
  displayName: "Filterstyles__ExpressionWrapper",
25
- componentId: "w5f27p-5"
33
+ componentId: "w5f27p-7"
26
34
  })(["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) {
27
35
  return 1000 - props.index;
28
36
  }, DragIcon, Body, Footer, LogicWrapper, function (props) {
@@ -34,11 +42,11 @@ export var ExpressionWrapper = styled.div.withConfig({
34
42
  });
35
43
  export var AddButtonWrapper = styled.div.withConfig({
36
44
  displayName: "Filterstyles__AddButtonWrapper",
37
- componentId: "w5f27p-6"
45
+ componentId: "w5f27p-8"
38
46
  })(["display:flex;align-items:flex-start;justify-content:flex-start;margin:24px 0 0;width:100%;position:relative;"]);
39
47
  export var FilterTitle = styled.div.withConfig({
40
48
  displayName: "Filterstyles__FilterTitle",
41
- componentId: "w5f27p-7"
49
+ componentId: "w5f27p-9"
42
50
  })(["font-size:16px;font-weight:500;line-height:1.25;color:", ";text-align:left;user-select:none;margin-bottom:24px;&:first-letter{text-transform:uppercase;}"], function (props) {
43
51
  return props.theme.palette['grey-800'];
44
52
  });
package/dist/Filter.types.d.ts CHANGED
@@ -30,9 +30,11 @@ export declare type FilterProps = {
30
30
  onDuplicateStep: (id: string) => void;
31
31
  renderStepFooter?: (expression: Expression) => React.ReactNode;
32
32
  renderStepContent?: (expression: Expression, hoverDisabled?: boolean) => React.ReactNode;
33
+ renderStepHeaderRightSide?: (expression: Expression, index: number) => React.ReactNode;
33
34
  addFilterComponent?: React.ReactNode | ((arg: addFilterComponentProps) => React.ReactNode);
34
35
  logicOptions?: LogicOperator[];
35
36
  readOnly?: boolean;
37
+ renderHeaderRightSide?: (expressions: Expression[]) => React.ReactNode;
36
38
  texts?: {
37
39
  matching?: MatchingTexts;
38
40
  step?: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-filter",
3
- "version": "0.14.27",
3
+ "version": "0.15.0",
4
4
  "description": "Filter UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -32,10 +32,10 @@
32
32
  ],
33
33
  "types": "dist/index.d.ts",
34
34
  "dependencies": {
35
- "@synerise/ds-button": "^0.17.18",
36
- "@synerise/ds-icon": "^0.56.0",
37
- "@synerise/ds-logic": "^0.8.4",
38
- "@synerise/ds-step-card": "^0.8.24",
35
+ "@synerise/ds-button": "^0.17.19",
36
+ "@synerise/ds-icon": "^0.57.0",
37
+ "@synerise/ds-logic": "^0.8.5",
38
+ "@synerise/ds-step-card": "^0.9.0",
39
39
  "react-sortablejs": "^6.0.0"
40
40
  },
41
41
  "peerDependencies": {
@@ -43,5 +43,5 @@
43
43
  "@synerise/ds-step-card": "*",
44
44
  "react": ">=16.9.0 < 17.0.0"
45
45
  },
46
- "gitHead": "4fa463dee08db3befeec954d744ec3c44aeecd9d"
46
+ "gitHead": "e8a06c902ef96e767576df5377b8965e1034d6c0"
47
47
  }