@synerise/ds-filter 0.18.31 → 0.18.33
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.
- package/CHANGELOG.md +16 -0
- package/dist/Filter.d.ts +1 -1
- package/dist/Filter.js +49 -35
- package/dist/Filter.types.d.ts +8 -7
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
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.18.33](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.18.32...@synerise/ds-filter@0.18.33) (2024-10-28)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-filter
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [0.18.32](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.18.31...@synerise/ds-filter@0.18.32) (2024-10-23)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @synerise/ds-filter
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
6
22
|
## [0.18.31](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.18.30...@synerise/ds-filter@0.18.31) (2024-10-14)
|
|
7
23
|
|
|
8
24
|
**Note:** Version bump only for package @synerise/ds-filter
|
package/dist/Filter.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { FilterProps } from './Filter.types';
|
|
3
|
-
declare const Filter: ({ maxConditionsLimit, expressions, matching, onChangeOrder, onChangeLogic, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, renderStepFooter, renderStepContent, renderStepHeaderRightSide, addFilterComponent, texts, logicOptions, renderHeaderRightSide, visibilityConfig, readOnly, getMoveByLabel, }: FilterProps) => React.JSX.Element;
|
|
3
|
+
declare const Filter: ({ maxConditionsLimit, expressions, matching, onChangeOrder, onChangeLogic, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, renderStepFooter, renderStepContent, renderStepHeaderRightSide, addFilterComponent, texts, logicOptions, renderHeaderRightSide, visibilityConfig, readOnly, singleStepCondition, getMoveByLabel, }: FilterProps) => React.JSX.Element;
|
|
4
4
|
export default Filter;
|
package/dist/Filter.js
CHANGED
|
@@ -21,9 +21,9 @@ var component = {
|
|
|
21
21
|
};
|
|
22
22
|
var TRANSITION_DURATION = 0.5;
|
|
23
23
|
var TRANSITION_DURATION_MAX = 1.5;
|
|
24
|
-
var TOP_TRANSITION_ZINDEX =
|
|
25
|
-
var BOTTOM_TRANSITION_ZINDEX =
|
|
26
|
-
var DRAGGING_TRANSITION_ZINDEX =
|
|
24
|
+
var TOP_TRANSITION_ZINDEX = 1003;
|
|
25
|
+
var BOTTOM_TRANSITION_ZINDEX = 1002;
|
|
26
|
+
var DRAGGING_TRANSITION_ZINDEX = 1004;
|
|
27
27
|
|
|
28
28
|
var rearrangeItems = function rearrangeItems(sourceArray, oldIndex, newIndex) {
|
|
29
29
|
sourceArray.splice(newIndex, 0, sourceArray.splice(oldIndex, 1)[0]);
|
|
@@ -55,6 +55,8 @@ var Filter = function Filter(_ref) {
|
|
|
55
55
|
} : _ref$visibilityConfig,
|
|
56
56
|
_ref$readOnly = _ref.readOnly,
|
|
57
57
|
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
|
|
58
|
+
_ref$singleStepCondit = _ref.singleStepCondition,
|
|
59
|
+
singleStepCondition = _ref$singleStepCondit === void 0 ? false : _ref$singleStepCondit,
|
|
58
60
|
getMoveByLabel = _ref.getMoveByLabel;
|
|
59
61
|
var previousExpressions = usePrevious(expressions);
|
|
60
62
|
|
|
@@ -64,24 +66,26 @@ var Filter = function Filter(_ref) {
|
|
|
64
66
|
|
|
65
67
|
var expressionRefs = useRef({});
|
|
66
68
|
var movedExpressionId = useRef(null);
|
|
67
|
-
var SORTABLE_CONFIG = {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
evt
|
|
83
|
-
|
|
84
|
-
|
|
69
|
+
var SORTABLE_CONFIG = useMemo(function () {
|
|
70
|
+
return {
|
|
71
|
+
ghostClass: 'ghost-element',
|
|
72
|
+
className: 'sortable-list',
|
|
73
|
+
handle: '.step-card-drag-handler',
|
|
74
|
+
animation: 200,
|
|
75
|
+
forceFallback: true,
|
|
76
|
+
filter: '.ds-matching-toggle, .step-card-right-side',
|
|
77
|
+
onStart: function onStart() {
|
|
78
|
+
movedExpressionId.current = null;
|
|
79
|
+
},
|
|
80
|
+
onChoose: function onChoose(evt) {
|
|
81
|
+
// eslint-disable-next-line no-param-reassign
|
|
82
|
+
evt.item.style.zIndex = DRAGGING_TRANSITION_ZINDEX;
|
|
83
|
+
},
|
|
84
|
+
onUnchoose: function onUnchoose(evt) {
|
|
85
|
+
evt.item.style.removeProperty('z-index');
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
}, []);
|
|
85
89
|
useEffect(function () {
|
|
86
90
|
if (movedExpressionId.current && previousExpressions != null && previousExpressions.length) {
|
|
87
91
|
var oldIndex = previousExpressions == null ? void 0 : previousExpressions.findIndex(function (expression) {
|
|
@@ -259,34 +263,37 @@ var Filter = function Filter(_ref) {
|
|
|
259
263
|
};
|
|
260
264
|
var props = {
|
|
261
265
|
LOGIC: {
|
|
262
|
-
onChange: function
|
|
266
|
+
onChange: onChangeLogic ? function (value) {
|
|
263
267
|
return onChangeLogic(expression.id, value);
|
|
264
|
-
},
|
|
268
|
+
} : undefined,
|
|
265
269
|
options: logicOptions
|
|
266
270
|
},
|
|
267
271
|
STEP: _objectSpread({}, reorderProps, {
|
|
268
|
-
onChangeMatching: function
|
|
272
|
+
onChangeMatching: onChangeStepMatching ? function (value) {
|
|
269
273
|
return onChangeStepMatching(expression.id, value);
|
|
270
|
-
},
|
|
271
|
-
onChangeName: function
|
|
274
|
+
} : undefined,
|
|
275
|
+
onChangeName: onChangeStepName ? function (value) {
|
|
272
276
|
return onChangeStepName(expression.id, value);
|
|
273
|
-
},
|
|
274
|
-
onDelete: function
|
|
277
|
+
} : undefined,
|
|
278
|
+
onDelete: onDeleteStep ? function () {
|
|
275
279
|
return onDeleteStep(expression.id);
|
|
276
|
-
},
|
|
277
|
-
onDuplicate: !isLimitExceeded ? function () {
|
|
280
|
+
} : undefined,
|
|
281
|
+
onDuplicate: onDuplicateStep && !isLimitExceeded ? function () {
|
|
278
282
|
return onDuplicateStep(expression.id);
|
|
279
283
|
} : undefined,
|
|
280
284
|
footer: renderStepFooter && renderStepFooter(expression),
|
|
281
285
|
children: renderStepContent && renderStepContent(expression, !!activeExpressionId && !isActive(expression)),
|
|
282
286
|
isHeaderVisible: visibilityConfig.isStepCardHeaderVisible,
|
|
283
287
|
headerRightSide: renderStepHeaderRightSide && renderStepHeaderRightSide(expression, index),
|
|
288
|
+
isDraggable: Boolean(onChangeOrder),
|
|
289
|
+
singleStepCondition: Boolean(singleStepCondition),
|
|
290
|
+
additionalFields: expression.data.additionalFields,
|
|
284
291
|
getMoveByLabel: getMoveByLabel,
|
|
285
292
|
texts: _objectSpread({}, text.step, {}, contextTypeTexts)
|
|
286
293
|
})
|
|
287
294
|
};
|
|
288
295
|
return props[expression.type];
|
|
289
|
-
}, [activeExpressionId, getContextTypeTexts, getMoveByLabel, handleMove, isActive, isLimitExceeded, logicOptions, onChangeLogic, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, renderStepContent, renderStepFooter, renderStepHeaderRightSide, stepExpressionCount, text.step, visibilityConfig.isStepCardHeaderVisible]);
|
|
296
|
+
}, [activeExpressionId, getContextTypeTexts, getMoveByLabel, handleMove, isActive, isLimitExceeded, logicOptions, onChangeLogic, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, renderStepContent, renderStepFooter, renderStepHeaderRightSide, stepExpressionCount, text.step, visibilityConfig.isStepCardHeaderVisible, singleStepCondition, onChangeOrder]);
|
|
290
297
|
var renderExpression = useCallback(function (expression, index) {
|
|
291
298
|
var Component = component[expression.type];
|
|
292
299
|
var LogicComponent = expression.logic && component[expression.logic.type];
|
|
@@ -310,13 +317,20 @@ var Filter = function Filter(_ref) {
|
|
|
310
317
|
readOnly: readOnly
|
|
311
318
|
}))));
|
|
312
319
|
}, [text.dropMeHere, componentProps, expressions.length, readOnly]);
|
|
320
|
+
var renderExpressions = useCallback(function () {
|
|
321
|
+
if (onChangeOrder) {
|
|
322
|
+
return /*#__PURE__*/React.createElement(ReactSortable, _extends({}, SORTABLE_CONFIG, {
|
|
323
|
+
list: expressions,
|
|
324
|
+
setList: onChangeOrder
|
|
325
|
+
}), expressions.map(renderExpression));
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
return expressions.map(renderExpression);
|
|
329
|
+
}, [renderExpression, SORTABLE_CONFIG, expressions, onChangeOrder]);
|
|
313
330
|
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.MatchingAndConditionsWrapper, null, /*#__PURE__*/React.createElement(S.MatchingWrapper, null, matching && /*#__PURE__*/React.createElement(Matching, _extends({}, matching, {
|
|
314
331
|
texts: text.matching,
|
|
315
332
|
readOnly: readOnly
|
|
316
|
-
}))), !!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(
|
|
317
|
-
list: expressions,
|
|
318
|
-
setList: onChangeOrder
|
|
319
|
-
}), expressions.map(renderExpression)) : /*#__PURE__*/React.createElement(Placeholder, {
|
|
333
|
+
}))), !!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 ? renderExpressions() : /*#__PURE__*/React.createElement(Placeholder, {
|
|
320
334
|
text: text.placeholder.chooseCondition
|
|
321
335
|
}), addFilterComponent && !readOnly && /*#__PURE__*/React.createElement(S.AddButtonWrapper, null, typeof addFilterComponent === 'function' ? addFilterComponent({
|
|
322
336
|
isLimitExceeded: isLimitExceeded
|
package/dist/Filter.types.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { LogicOperator, LogicOperatorValue, LogicProps } from '@synerise/ds-logic/dist/Logic.types';
|
|
3
|
-
import { StepCardProps } from '@synerise/ds-step-card
|
|
3
|
+
import { StepCardProps } from '@synerise/ds-step-card';
|
|
4
4
|
import { MatchingProps, MatchingTexts } from '@synerise/ds-logic/dist/Matching/Matching.types';
|
|
5
5
|
export type LogicType = {
|
|
6
6
|
type: 'LOGIC';
|
|
@@ -22,18 +22,19 @@ export type FilterProps = {
|
|
|
22
22
|
maxConditionsLimit?: number;
|
|
23
23
|
expressions: Expression[];
|
|
24
24
|
matching?: MatchingProps;
|
|
25
|
-
onChangeOrder
|
|
26
|
-
onChangeLogic
|
|
27
|
-
onChangeStepMatching
|
|
28
|
-
onChangeStepName
|
|
29
|
-
onDeleteStep
|
|
30
|
-
onDuplicateStep
|
|
25
|
+
onChangeOrder?: (newOrder: Expression[]) => void;
|
|
26
|
+
onChangeLogic?: (id: string, logic: LogicOperatorValue) => void;
|
|
27
|
+
onChangeStepMatching?: (id: string, matching: boolean) => void;
|
|
28
|
+
onChangeStepName?: (id: string, name: string) => void;
|
|
29
|
+
onDeleteStep?: (id: string) => void;
|
|
30
|
+
onDuplicateStep?: (id: string) => void;
|
|
31
31
|
renderStepFooter?: (expression: Expression) => React.ReactNode;
|
|
32
32
|
renderStepContent?: (expression: Expression, hoverDisabled?: boolean) => React.ReactNode;
|
|
33
33
|
renderStepHeaderRightSide?: (expression: Expression, index: number) => React.ReactNode;
|
|
34
34
|
addFilterComponent?: React.ReactNode | ((arg: addFilterComponentProps) => React.ReactNode);
|
|
35
35
|
logicOptions?: LogicOperator[];
|
|
36
36
|
readOnly?: boolean;
|
|
37
|
+
singleStepCondition?: boolean;
|
|
37
38
|
renderHeaderRightSide?: (expressions: Expression[]) => React.ReactNode;
|
|
38
39
|
getMoveByLabel?: (moveByOffset: number) => string;
|
|
39
40
|
texts?: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-filter",
|
|
3
|
-
"version": "0.18.
|
|
3
|
+
"version": "0.18.33",
|
|
4
4
|
"description": "Filter UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -34,10 +34,10 @@
|
|
|
34
34
|
],
|
|
35
35
|
"types": "dist/index.d.ts",
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@synerise/ds-button": "^0.21.
|
|
38
|
-
"@synerise/ds-logic": "^0.8.
|
|
39
|
-
"@synerise/ds-step-card": "^0.11.
|
|
40
|
-
"@synerise/ds-utils": "^0.30.
|
|
37
|
+
"@synerise/ds-button": "^0.21.15",
|
|
38
|
+
"@synerise/ds-logic": "^0.8.52",
|
|
39
|
+
"@synerise/ds-step-card": "^0.11.31",
|
|
40
|
+
"@synerise/ds-utils": "^0.30.1",
|
|
41
41
|
"react-intl": "3.12.0",
|
|
42
42
|
"react-sortablejs": "^6.0.0",
|
|
43
43
|
"sortablejs": "1.15.1"
|
|
@@ -48,5 +48,5 @@
|
|
|
48
48
|
"react": ">=16.9.0 <= 17.0.2",
|
|
49
49
|
"styled-components": "5.0.1"
|
|
50
50
|
},
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "fbadaa2299668c527b52ecc66d61fc2165528bff"
|
|
52
52
|
}
|