@synerise/ds-filter 1.2.41 → 1.2.42
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 +4 -0
- package/dist/Filter.d.ts +2 -2
- package/dist/Filter.js +254 -264
- package/dist/Filter.styles.d.ts +12 -12
- package/dist/Filter.styles.js +34 -24
- package/dist/Filter.types.d.ts +4 -4
- package/dist/Filter.types.js +1 -1
- package/dist/components/ExpressionItem/DraggableExpressionItem.d.ts +2 -2
- package/dist/components/ExpressionItem/DraggableExpressionItem.js +20 -27
- package/dist/components/ExpressionItem/ExpressionItem.d.ts +2 -2
- package/dist/components/ExpressionItem/ExpressionItem.js +34 -46
- package/dist/components/ExpressionItem/ExpressionItem.types.d.ts +5 -5
- package/dist/components/ExpressionItem/ExpressionItem.types.js +1 -1
- package/dist/components/ExpressionItem/index.js +6 -2
- package/dist/index.js +4 -1
- package/dist/modules.d.js +1 -1
- package/dist/modules.d.ts +0 -0
- package/dist/utils.d.ts +1 -1
- package/dist/utils.js +6 -3
- package/package.json +9 -9
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
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
|
+
## [1.2.42](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@1.2.41...@synerise/ds-filter@1.2.42) (2026-03-24)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-filter
|
|
9
|
+
|
|
6
10
|
## [1.2.41](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@1.2.40...@synerise/ds-filter@1.2.41) (2026-03-20)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @synerise/ds-filter
|
package/dist/Filter.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { FilterProps } from './Filter.types';
|
|
3
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
|
@@ -1,331 +1,321 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import { useIntl } from
|
|
4
|
-
import { Matching, Placeholder } from
|
|
5
|
-
import Sortable from
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
8
|
-
import { DraggableExpressionItem
|
|
9
|
-
import {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useRef, useEffect, useMemo, useCallback } from "react";
|
|
3
|
+
import { useIntl } from "react-intl";
|
|
4
|
+
import { Matching, Placeholder } from "@synerise/ds-logic";
|
|
5
|
+
import Sortable from "@synerise/ds-sortable";
|
|
6
|
+
import { usePrevious, NOOP } from "@synerise/ds-utils";
|
|
7
|
+
import { placeholderCss, FilterWrapper, FilterHeader, FilterTitle, MatchingAndConditionsWrapper, MatchingWrapper, ConditionsLimit, ConditionsLimitResults, FilterHeaderRightSide, AddButtonWrapper } from "./Filter.styles.js";
|
|
8
|
+
import { DraggableExpressionItem } from "./components/ExpressionItem/DraggableExpressionItem.js";
|
|
9
|
+
import { ExpressionItem } from "./components/ExpressionItem/ExpressionItem.js";
|
|
10
|
+
import { isStepType } from "./utils.js";
|
|
11
|
+
const TRANSITION_DURATION = 0.5;
|
|
12
|
+
const TRANSITION_DURATION_MAX = 1.5;
|
|
13
|
+
const TOP_TRANSITION_ZINDEX = "1003";
|
|
14
|
+
const BOTTOM_TRANSITION_ZINDEX = "1002";
|
|
15
|
+
const rearrangeItems = (sourceArray, oldIndex, newIndex) => {
|
|
15
16
|
sourceArray.splice(newIndex, 0, sourceArray.splice(oldIndex, 1)[0]);
|
|
16
|
-
return []
|
|
17
|
+
return [...sourceArray];
|
|
17
18
|
};
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
var expressionRefs = useRef({});
|
|
50
|
-
var movedExpressionId = useRef(null);
|
|
51
|
-
useEffect(function () {
|
|
52
|
-
if (movedExpressionId.current && previousExpressions != null && previousExpressions.length) {
|
|
53
|
-
var oldIndex = previousExpressions == null ? void 0 : previousExpressions.findIndex(function (expression) {
|
|
19
|
+
const Filter = ({
|
|
20
|
+
maxConditionsLimit,
|
|
21
|
+
expressions,
|
|
22
|
+
matching,
|
|
23
|
+
onChangeOrder,
|
|
24
|
+
onChangeLogic,
|
|
25
|
+
onChangeStepMatching,
|
|
26
|
+
onChangeStepName,
|
|
27
|
+
onDeleteStep,
|
|
28
|
+
onDuplicateStep,
|
|
29
|
+
renderStepFooter,
|
|
30
|
+
renderStepContent,
|
|
31
|
+
renderStepHeaderRightSide,
|
|
32
|
+
addFilterComponent,
|
|
33
|
+
texts,
|
|
34
|
+
logicOptions,
|
|
35
|
+
renderHeaderRightSide,
|
|
36
|
+
visibilityConfig = {
|
|
37
|
+
isStepCardHeaderVisible: true
|
|
38
|
+
},
|
|
39
|
+
readOnly = false,
|
|
40
|
+
singleStepCondition = false,
|
|
41
|
+
getMoveByLabel
|
|
42
|
+
}) => {
|
|
43
|
+
const previousExpressions = usePrevious(expressions);
|
|
44
|
+
const [activeExpressionId, setActiveExpressionId] = useState(null);
|
|
45
|
+
const expressionRefs = useRef({});
|
|
46
|
+
const movedExpressionId = useRef(null);
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
if (movedExpressionId.current && previousExpressions?.length) {
|
|
49
|
+
const oldIndex = previousExpressions?.findIndex((expression) => {
|
|
54
50
|
return expression.id === movedExpressionId.current;
|
|
55
51
|
});
|
|
56
|
-
|
|
52
|
+
const newIndex = expressions?.findIndex((expression) => {
|
|
57
53
|
return expression.id === movedExpressionId.current;
|
|
58
54
|
});
|
|
59
|
-
if (oldIndex !==
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
expressions.forEach(
|
|
55
|
+
if (oldIndex !== void 0 && oldIndex !== newIndex) {
|
|
56
|
+
const sign = oldIndex < newIndex ? 1 : -1;
|
|
57
|
+
const low = Math.min(oldIndex, newIndex);
|
|
58
|
+
const high = Math.max(oldIndex, newIndex);
|
|
59
|
+
const movedExpressionHeight = sign * expressionRefs.current[movedExpressionId.current].getBoundingClientRect().height;
|
|
60
|
+
let expressionOffset = 0;
|
|
61
|
+
const movedCardTransformDuration = Math.min((high - low) * TRANSITION_DURATION, TRANSITION_DURATION_MAX);
|
|
62
|
+
expressions.forEach((expression, index) => {
|
|
67
63
|
if (expression.id !== movedExpressionId.current && index >= low && index <= high) {
|
|
68
64
|
expressionOffset += expressionRefs.current[expression.id].getBoundingClientRect().height;
|
|
69
|
-
expressionRefs.current[expression.id].style.transition =
|
|
65
|
+
expressionRefs.current[expression.id].style.transition = "";
|
|
70
66
|
expressionRefs.current[expression.id].style.zIndex = BOTTOM_TRANSITION_ZINDEX;
|
|
71
|
-
expressionRefs.current[expression.id].style.transform =
|
|
67
|
+
expressionRefs.current[expression.id].style.transform = `translateY(${movedExpressionHeight}px)`;
|
|
72
68
|
}
|
|
73
69
|
});
|
|
74
|
-
expressionRefs.current[movedExpressionId.current].style.transition =
|
|
70
|
+
expressionRefs.current[movedExpressionId.current].style.transition = "";
|
|
75
71
|
expressionRefs.current[movedExpressionId.current].style.zIndex = TOP_TRANSITION_ZINDEX;
|
|
76
|
-
expressionRefs.current[movedExpressionId.current].style.transform =
|
|
77
|
-
requestAnimationFrame(
|
|
78
|
-
expressions.forEach(
|
|
79
|
-
expressionRefs.current[expression.id].style.transition =
|
|
80
|
-
expressionRefs.current[expression.id].style.transform =
|
|
72
|
+
expressionRefs.current[movedExpressionId.current].style.transform = `translateY(${-sign * expressionOffset}px)`;
|
|
73
|
+
requestAnimationFrame(() => {
|
|
74
|
+
expressions.forEach((expression) => {
|
|
75
|
+
expressionRefs.current[expression.id].style.transition = `transform ${expression.id === movedExpressionId.current ? movedCardTransformDuration : TRANSITION_DURATION}s`;
|
|
76
|
+
expressionRefs.current[expression.id].style.transform = "";
|
|
81
77
|
});
|
|
82
78
|
movedExpressionId.current = null;
|
|
83
79
|
});
|
|
84
80
|
}
|
|
85
81
|
}
|
|
86
82
|
});
|
|
87
|
-
useEffect(
|
|
83
|
+
useEffect(() => {
|
|
88
84
|
if (previousExpressions && expressions.length > previousExpressions.length) {
|
|
89
85
|
setActiveExpressionId(expressions[expressions.length - 1].id);
|
|
90
86
|
}
|
|
91
87
|
}, [expressions, previousExpressions]);
|
|
92
|
-
|
|
93
|
-
formatMessage
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
88
|
+
const {
|
|
89
|
+
formatMessage
|
|
90
|
+
} = useIntl();
|
|
91
|
+
const text = useMemo(() => ({
|
|
92
|
+
addFilter: formatMessage({
|
|
93
|
+
id: "DS.FILTER.ADD-FILTER",
|
|
94
|
+
defaultMessage: "Add filter"
|
|
95
|
+
}),
|
|
96
|
+
dropMeHere: formatMessage({
|
|
97
|
+
id: "DS.FILTER.DROP-ME-HERE",
|
|
98
|
+
defaultMessage: "Drop me here"
|
|
99
|
+
}),
|
|
100
|
+
conditionsLimit: formatMessage({
|
|
101
|
+
id: "DS.FILTER.CONDITIONS-LIMIT",
|
|
102
|
+
defaultMessage: ""
|
|
103
|
+
}),
|
|
104
|
+
...texts,
|
|
105
|
+
matching: {
|
|
106
|
+
matching: formatMessage({
|
|
107
|
+
id: "DS.MATCHING.MATCHING",
|
|
108
|
+
defaultMessage: "Matching"
|
|
99
109
|
}),
|
|
100
|
-
|
|
101
|
-
id:
|
|
102
|
-
defaultMessage:
|
|
110
|
+
notMatching: formatMessage({
|
|
111
|
+
id: "DS.MATCHING.NOT-MATCHING",
|
|
112
|
+
defaultMessage: "Not matching"
|
|
103
113
|
}),
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
function (expression) {
|
|
194
|
-
var contextType = expression.expressionType;
|
|
195
|
-
return {
|
|
196
|
-
matching: contextType === 'attribute' ? text.step.have : text.step.performed,
|
|
197
|
-
notMatching: contextType === 'attribute' ? text.step.notHave : text.step.notPerformed,
|
|
198
|
-
conditionType: contextType === 'attribute' ? text.step.attribute : text.step.event,
|
|
199
|
-
notConditionType: contextType === 'attribute' ? text.step.notAttribute : text.step.notEvent
|
|
200
|
-
};
|
|
201
|
-
}, [text]);
|
|
202
|
-
var isActive = useCallback(function (expression) {
|
|
114
|
+
...texts?.matching
|
|
115
|
+
},
|
|
116
|
+
step: {
|
|
117
|
+
matching: formatMessage({
|
|
118
|
+
id: "DS.MATCHING.MATCHING",
|
|
119
|
+
defaultMessage: "Matching"
|
|
120
|
+
}),
|
|
121
|
+
notMatching: formatMessage({
|
|
122
|
+
id: "DS.MATCHING.NOT-MATCHING",
|
|
123
|
+
defaultMessage: "Not matching"
|
|
124
|
+
}),
|
|
125
|
+
have: formatMessage({
|
|
126
|
+
id: "DS.MATCHING.HAVE",
|
|
127
|
+
defaultMessage: "Have"
|
|
128
|
+
}),
|
|
129
|
+
performed: formatMessage({
|
|
130
|
+
id: "DS.MATCHING.PERFORMED",
|
|
131
|
+
defaultMessage: "Performed"
|
|
132
|
+
}),
|
|
133
|
+
notHave: formatMessage({
|
|
134
|
+
id: "DS.MATCHING.NOT-HAVE",
|
|
135
|
+
defaultMessage: "Does not have"
|
|
136
|
+
}),
|
|
137
|
+
notPerformed: formatMessage({
|
|
138
|
+
id: "DS.MATCHING.NOT-PERFORMED",
|
|
139
|
+
defaultMessage: "Have not performed"
|
|
140
|
+
}),
|
|
141
|
+
attribute: formatMessage({
|
|
142
|
+
id: "DS.MATCHING.EXPRESSION-TYPE.ATTRIBUTE",
|
|
143
|
+
defaultMessage: "attribute"
|
|
144
|
+
}),
|
|
145
|
+
event: formatMessage({
|
|
146
|
+
id: "DS.MATCHING.EXPRESSION-TYPE.EVENT",
|
|
147
|
+
defaultMessage: "event"
|
|
148
|
+
}),
|
|
149
|
+
notAttribute: formatMessage({
|
|
150
|
+
id: "DS.MATCHING.EXPRESSION-TYPE.NOT_ATTRIBUTE",
|
|
151
|
+
defaultMessage: "attribute"
|
|
152
|
+
}),
|
|
153
|
+
notEvent: formatMessage({
|
|
154
|
+
id: "DS.MATCHING.EXPRESSION-TYPE.NOT_EVENT",
|
|
155
|
+
defaultMessage: "event"
|
|
156
|
+
}),
|
|
157
|
+
namePlaceholder: formatMessage({
|
|
158
|
+
id: "DS.STEP-CARD.NAME-PLACEHOLDER"
|
|
159
|
+
}),
|
|
160
|
+
moveTooltip: formatMessage({
|
|
161
|
+
id: "DS.STEP-CARD.MOVE",
|
|
162
|
+
defaultMessage: "Move"
|
|
163
|
+
}),
|
|
164
|
+
moveUpTooltip: formatMessage({
|
|
165
|
+
id: "DS.STEP-CARD.MOVE-UP",
|
|
166
|
+
defaultMessage: "Move up"
|
|
167
|
+
}),
|
|
168
|
+
moveDownTooltip: formatMessage({
|
|
169
|
+
id: "DS.STEP-CARD.MOVE-DOWN",
|
|
170
|
+
defaultMessage: "Move down"
|
|
171
|
+
}),
|
|
172
|
+
deleteTooltip: formatMessage({
|
|
173
|
+
id: "DS.STEP-CARD.DELETE",
|
|
174
|
+
defaultMessage: "Delete"
|
|
175
|
+
}),
|
|
176
|
+
duplicateTooltip: formatMessage({
|
|
177
|
+
id: "DS.STEP-CARD.DUPLICATE",
|
|
178
|
+
defaultMessage: "Duplicate"
|
|
179
|
+
}),
|
|
180
|
+
...texts?.step
|
|
181
|
+
},
|
|
182
|
+
placeholder: {
|
|
183
|
+
chooseCondition: formatMessage({
|
|
184
|
+
id: "DS.PLACEHOLDER.CHOOSE-CONDITION"
|
|
185
|
+
}),
|
|
186
|
+
...texts?.placeholder
|
|
187
|
+
}
|
|
188
|
+
}), [formatMessage, texts]);
|
|
189
|
+
const getContextTypeTexts = useCallback(
|
|
190
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
191
|
+
(expression) => {
|
|
192
|
+
const contextType = expression.expressionType;
|
|
193
|
+
return {
|
|
194
|
+
matching: contextType === "attribute" ? text.step.have : text.step.performed,
|
|
195
|
+
notMatching: contextType === "attribute" ? text.step.notHave : text.step.notPerformed,
|
|
196
|
+
conditionType: contextType === "attribute" ? text.step.attribute : text.step.event,
|
|
197
|
+
notConditionType: contextType === "attribute" ? text.step.notAttribute : text.step.notEvent
|
|
198
|
+
};
|
|
199
|
+
},
|
|
200
|
+
[text]
|
|
201
|
+
);
|
|
202
|
+
const isActive = useCallback((expression) => {
|
|
203
203
|
return expression.id === activeExpressionId;
|
|
204
204
|
}, [activeExpressionId]);
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
var stepExpressionCount = useMemo(function () {
|
|
209
|
-
return expressions.filter(function (expression) {
|
|
210
|
-
return expression.type === 'STEP';
|
|
211
|
-
}).length;
|
|
205
|
+
const isLimitExceeded = useMemo(() => maxConditionsLimit ? expressions.length >= maxConditionsLimit : false, [expressions, maxConditionsLimit]);
|
|
206
|
+
const stepExpressionCount = useMemo(() => {
|
|
207
|
+
return expressions.filter((expression) => expression.type === "STEP").length;
|
|
212
208
|
}, [expressions]);
|
|
213
|
-
|
|
209
|
+
const handleTransitionEnd = useCallback((event) => {
|
|
214
210
|
if (event.currentTarget && event.currentTarget instanceof HTMLElement) {
|
|
215
|
-
event.currentTarget.style.removeProperty(
|
|
211
|
+
event.currentTarget.style.removeProperty("z-index");
|
|
216
212
|
}
|
|
217
213
|
}, []);
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
214
|
+
const handleMove = useCallback((index, offset) => {
|
|
215
|
+
const newIndex = index + offset;
|
|
216
|
+
const newOrder = rearrangeItems([...expressions], index, newIndex);
|
|
221
217
|
movedExpressionId.current = newOrder[newIndex].id;
|
|
222
|
-
onChangeOrder
|
|
218
|
+
onChangeOrder?.(newOrder);
|
|
223
219
|
}, [expressions, onChangeOrder]);
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
220
|
+
const isDraggable = Boolean(onChangeOrder && expressions.length > 1);
|
|
221
|
+
const getStepProps = useCallback((expression, index) => {
|
|
222
|
+
const contextTypeTexts = getContextTypeTexts(expression);
|
|
223
|
+
const reorderProps = {
|
|
228
224
|
expressionIndex: index,
|
|
229
225
|
expressionMoved: movedExpressionId.current === expression.id,
|
|
230
226
|
expressionCount: stepExpressionCount,
|
|
231
227
|
onMove: handleMove
|
|
232
228
|
};
|
|
233
|
-
return
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
} : undefined,
|
|
240
|
-
onDelete: onDeleteStep ? function () {
|
|
241
|
-
return onDeleteStep(expression.id);
|
|
242
|
-
} : undefined,
|
|
243
|
-
onDuplicate: onDuplicateStep && !isLimitExceeded ? function () {
|
|
244
|
-
return onDuplicateStep(expression.id);
|
|
245
|
-
} : undefined,
|
|
229
|
+
return {
|
|
230
|
+
...reorderProps,
|
|
231
|
+
onChangeMatching: onChangeStepMatching ? (value) => onChangeStepMatching(expression.id, value) : void 0,
|
|
232
|
+
onChangeName: onChangeStepName ? (value) => onChangeStepName(expression.id, value) : void 0,
|
|
233
|
+
onDelete: onDeleteStep ? () => onDeleteStep(expression.id) : void 0,
|
|
234
|
+
onDuplicate: onDuplicateStep && !isLimitExceeded ? () => onDuplicateStep(expression.id) : void 0,
|
|
246
235
|
footer: renderStepFooter && renderStepFooter(expression),
|
|
247
236
|
children: renderStepContent && renderStepContent(expression, !!activeExpressionId && !isActive(expression)),
|
|
248
237
|
isHeaderVisible: visibilityConfig.isStepCardHeaderVisible,
|
|
249
|
-
renderHeaderRightSide: renderStepHeaderRightSide ?
|
|
250
|
-
|
|
251
|
-
} : undefined,
|
|
252
|
-
isDraggable: isDraggable,
|
|
238
|
+
renderHeaderRightSide: renderStepHeaderRightSide ? (itemIndex, options) => renderStepHeaderRightSide(expression, itemIndex, options) : void 0,
|
|
239
|
+
isDraggable,
|
|
253
240
|
singleStepCondition: Boolean(singleStepCondition),
|
|
254
241
|
additionalFields: expression.data.additionalFields,
|
|
255
|
-
getMoveByLabel
|
|
242
|
+
getMoveByLabel,
|
|
256
243
|
dropLabel: text.dropMeHere,
|
|
257
|
-
texts:
|
|
258
|
-
|
|
244
|
+
texts: {
|
|
245
|
+
...text.step,
|
|
246
|
+
...contextTypeTexts
|
|
247
|
+
}
|
|
248
|
+
};
|
|
259
249
|
}, [getContextTypeTexts, stepExpressionCount, handleMove, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, isLimitExceeded, renderStepFooter, renderStepContent, activeExpressionId, isActive, visibilityConfig.isStepCardHeaderVisible, renderStepHeaderRightSide, isDraggable, singleStepCondition, getMoveByLabel, text.dropMeHere, text.step]);
|
|
260
|
-
|
|
250
|
+
const getLogicProps = useCallback((expression) => {
|
|
261
251
|
return {
|
|
262
|
-
value:
|
|
263
|
-
onChange: onChangeLogic ?
|
|
264
|
-
return onChangeLogic(expression.id, value);
|
|
265
|
-
} : NOOP,
|
|
252
|
+
value: "",
|
|
253
|
+
onChange: onChangeLogic ? (value) => onChangeLogic(expression.id, value) : NOOP,
|
|
266
254
|
options: logicOptions
|
|
267
255
|
};
|
|
268
256
|
}, [onChangeLogic, logicOptions]);
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
var logicProps = isStepType(expression) && expression.logic ? getLogicProps(expression.logic) : {
|
|
275
|
-
value: '',
|
|
257
|
+
const expressionData = useMemo(() => {
|
|
258
|
+
const expressionsOrder = expressions.map((expression) => expression.id);
|
|
259
|
+
return expressions.map((expression, index) => {
|
|
260
|
+
const logicProps = isStepType(expression) && expression.logic ? getLogicProps(expression.logic) : {
|
|
261
|
+
value: "",
|
|
276
262
|
onChange: NOOP
|
|
277
263
|
};
|
|
278
|
-
|
|
264
|
+
const stepProps = isStepType(expression) ? getStepProps(expression, index) : {};
|
|
279
265
|
return {
|
|
280
|
-
wrapperRef:
|
|
281
|
-
return expressionRefs.current[expression.id] = element;
|
|
282
|
-
},
|
|
266
|
+
wrapperRef: (element) => expressionRefs.current[expression.id] = element,
|
|
283
267
|
dropLabel: text.dropMeHere,
|
|
284
|
-
logicProps
|
|
285
|
-
stepProps
|
|
286
|
-
handleMouseDown:
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
expression: expression,
|
|
291
|
-
expressionsOrder: expressionsOrder,
|
|
268
|
+
logicProps,
|
|
269
|
+
stepProps,
|
|
270
|
+
handleMouseDown: () => setActiveExpressionId(expression.id),
|
|
271
|
+
handleTransitionEnd,
|
|
272
|
+
expression,
|
|
273
|
+
expressionsOrder,
|
|
292
274
|
id: expression.id,
|
|
293
275
|
expressionIndex: index,
|
|
294
|
-
readOnly
|
|
276
|
+
readOnly,
|
|
295
277
|
isLast: index === expressions.length - 1
|
|
296
278
|
};
|
|
297
279
|
});
|
|
298
280
|
}, [expressions, readOnly, handleTransitionEnd, setActiveExpressionId, getStepProps, getLogicProps, text.dropMeHere]);
|
|
299
|
-
|
|
281
|
+
const handleChangeOrder = useCallback((newOrder) => {
|
|
300
282
|
if (onChangeOrder) {
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
});
|
|
304
|
-
var updatedExpressions = [].concat(expressions).sort(function (a, b) {
|
|
305
|
-
return idOrder.indexOf(a.id) - idOrder.indexOf(b.id);
|
|
306
|
-
});
|
|
283
|
+
const idOrder = newOrder.map((item) => item.id);
|
|
284
|
+
const updatedExpressions = [...expressions].sort((a, b) => idOrder.indexOf(a.id) - idOrder.indexOf(b.id));
|
|
307
285
|
onChangeOrder(updatedExpressions);
|
|
308
286
|
}
|
|
309
287
|
}, [onChangeOrder, expressions]);
|
|
310
|
-
|
|
288
|
+
const renderExpressions = useCallback(() => {
|
|
311
289
|
if (isDraggable) {
|
|
312
|
-
return
|
|
313
|
-
placeholderCss: S.placeholderCss,
|
|
314
|
-
axis: "y",
|
|
315
|
-
items: expressionData,
|
|
316
|
-
ItemComponent: DraggableExpressionItem,
|
|
317
|
-
onOrderChange: handleChangeOrder
|
|
318
|
-
});
|
|
290
|
+
return /* @__PURE__ */ jsx(Sortable, { placeholderCss, axis: "y", items: expressionData, ItemComponent: DraggableExpressionItem, onOrderChange: handleChangeOrder });
|
|
319
291
|
}
|
|
320
292
|
return expressionData.map(ExpressionItem);
|
|
321
293
|
}, [expressionData, handleChangeOrder, isDraggable]);
|
|
322
|
-
return
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
294
|
+
return /* @__PURE__ */ jsxs(FilterWrapper, { children: [
|
|
295
|
+
/* @__PURE__ */ jsxs(FilterHeader, { children: [
|
|
296
|
+
texts?.overwritten?.filterTitle ? /* @__PURE__ */ jsx(FilterTitle, { children: texts.overwritten.filterTitle }) : /* @__PURE__ */ jsxs(MatchingAndConditionsWrapper, { children: [
|
|
297
|
+
/* @__PURE__ */ jsx(MatchingWrapper, { children: matching && /* @__PURE__ */ jsx(Matching, { ...matching, texts: text.matching, readOnly }) }),
|
|
298
|
+
!!maxConditionsLimit && /* @__PURE__ */ jsxs(ConditionsLimit, { children: [
|
|
299
|
+
text.conditionsLimit,
|
|
300
|
+
":",
|
|
301
|
+
" ",
|
|
302
|
+
/* @__PURE__ */ jsxs(ConditionsLimitResults, { children: [
|
|
303
|
+
expressions.length,
|
|
304
|
+
"/",
|
|
305
|
+
maxConditionsLimit
|
|
306
|
+
] })
|
|
307
|
+
] })
|
|
308
|
+
] }),
|
|
309
|
+
renderHeaderRightSide && /* @__PURE__ */ jsx(FilterHeaderRightSide, { children: renderHeaderRightSide(expressions) })
|
|
310
|
+
] }),
|
|
311
|
+
/* @__PURE__ */ jsxs(Fragment, { children: [
|
|
312
|
+
expressions.length > 0 ? renderExpressions() : /* @__PURE__ */ jsx(Placeholder, { text: text.placeholder.chooseCondition }),
|
|
313
|
+
addFilterComponent && !readOnly && /* @__PURE__ */ jsx(AddButtonWrapper, { children: typeof addFilterComponent === "function" ? addFilterComponent({
|
|
314
|
+
isLimitExceeded
|
|
315
|
+
}) : addFilterComponent })
|
|
316
|
+
] })
|
|
317
|
+
] });
|
|
318
|
+
};
|
|
319
|
+
export {
|
|
320
|
+
Filter as default
|
|
330
321
|
};
|
|
331
|
-
export default Filter;
|
package/dist/Filter.styles.d.ts
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
export declare const placeholderCss: import(
|
|
2
|
-
export declare const FilterWrapper: import(
|
|
3
|
-
export declare const FilterHeader: import(
|
|
4
|
-
export declare const FilterHeaderRightSide: import(
|
|
5
|
-
export declare const MatchingAndConditionsWrapper: import(
|
|
6
|
-
export declare const MatchingWrapper: import(
|
|
7
|
-
export declare const ConditionsLimit: import(
|
|
8
|
-
export declare const ConditionsLimitResults: import(
|
|
9
|
-
export declare const LogicWrapper: import(
|
|
10
|
-
export declare const ExpressionWrapper: import(
|
|
1
|
+
export declare const placeholderCss: import('styled-components').FlattenInterpolation<import('styled-components').ThemeProps<any>>;
|
|
2
|
+
export declare const FilterWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
3
|
+
export declare const FilterHeader: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
4
|
+
export declare const FilterHeaderRightSide: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
5
|
+
export declare const MatchingAndConditionsWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
6
|
+
export declare const MatchingWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
7
|
+
export declare const ConditionsLimit: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
8
|
+
export declare const ConditionsLimitResults: import('styled-components').StyledComponent<"span", any, {}, never>;
|
|
9
|
+
export declare const LogicWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
10
|
+
export declare const ExpressionWrapper: import('styled-components').StyledComponent<"div", any, {
|
|
11
11
|
index?: number;
|
|
12
12
|
isDragged?: boolean;
|
|
13
13
|
}, never>;
|
|
14
|
-
export declare const AddButtonWrapper: import(
|
|
15
|
-
export declare const FilterTitle: import(
|
|
14
|
+
export declare const AddButtonWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
15
|
+
export declare const FilterTitle: import('styled-components').StyledComponent<"div", any, {}, never>;
|
package/dist/Filter.styles.js
CHANGED
|
@@ -1,55 +1,65 @@
|
|
|
1
|
-
import styled, { css } from
|
|
2
|
-
import { SortableItemContent } from
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
}, function (props) {
|
|
6
|
-
return props.theme.palette['blue-600'];
|
|
7
|
-
});
|
|
8
|
-
export var FilterWrapper = styled.div.withConfig({
|
|
1
|
+
import styled, { css } from "styled-components";
|
|
2
|
+
import { SortableItemContent } from "@synerise/ds-sortable/dist/Sortable.styles";
|
|
3
|
+
const placeholderCss = /* @__PURE__ */ css(["height:calc(100% - 24px);background-color:", ";border:0;border-left:2px solid ", ";border-radius:3px;"], (props) => props.theme.palette["blue-050"], (props) => props.theme.palette["blue-600"]);
|
|
4
|
+
const FilterWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
9
5
|
displayName: "Filterstyles__FilterWrapper",
|
|
10
6
|
componentId: "sc-w5f27p-0"
|
|
11
7
|
})(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;", "{visibility:visible;opacity:1;}"], SortableItemContent);
|
|
12
|
-
|
|
8
|
+
const FilterHeader = /* @__PURE__ */ styled.div.withConfig({
|
|
13
9
|
displayName: "Filterstyles__FilterHeader",
|
|
14
10
|
componentId: "sc-w5f27p-1"
|
|
15
11
|
})(["width:100%;display:flex;margin-bottom:24px;flex-direction:row;align-items:center;justify-content:space-between;"]);
|
|
16
|
-
|
|
12
|
+
const FilterHeaderRightSide = /* @__PURE__ */ styled.div.withConfig({
|
|
17
13
|
displayName: "Filterstyles__FilterHeaderRightSide",
|
|
18
14
|
componentId: "sc-w5f27p-2"
|
|
19
15
|
})(["flex:1;overflow-x:hidden;"]);
|
|
20
|
-
|
|
16
|
+
const MatchingAndConditionsWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
21
17
|
displayName: "Filterstyles__MatchingAndConditionsWrapper",
|
|
22
18
|
componentId: "sc-w5f27p-3"
|
|
23
19
|
})(["flex:0 0 auto;margin-right:24px;display:flex;align-items:baseline;"]);
|
|
24
|
-
|
|
20
|
+
const MatchingWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
25
21
|
displayName: "Filterstyles__MatchingWrapper",
|
|
26
22
|
componentId: "sc-w5f27p-4"
|
|
27
23
|
})(["text-wrap:nowrap;"]);
|
|
28
|
-
|
|
24
|
+
const ConditionsLimit = /* @__PURE__ */ styled.div.withConfig({
|
|
29
25
|
displayName: "Filterstyles__ConditionsLimit",
|
|
30
26
|
componentId: "sc-w5f27p-5"
|
|
31
27
|
})(["margin-left:16px;"]);
|
|
32
|
-
|
|
28
|
+
const ConditionsLimitResults = /* @__PURE__ */ styled.span.withConfig({
|
|
33
29
|
displayName: "Filterstyles__ConditionsLimitResults",
|
|
34
30
|
componentId: "sc-w5f27p-6"
|
|
35
31
|
})(["font-weight:500;"]);
|
|
36
|
-
|
|
32
|
+
const LogicWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
37
33
|
displayName: "Filterstyles__LogicWrapper",
|
|
38
34
|
componentId: "sc-w5f27p-7"
|
|
39
35
|
})(["margin:22px 0;"]);
|
|
40
|
-
|
|
36
|
+
const ExpressionWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
41
37
|
displayName: "Filterstyles__ExpressionWrapper",
|
|
42
38
|
componentId: "sc-w5f27p-8"
|
|
43
|
-
})(["width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;", ""],
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
39
|
+
})(["width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;", ""], (props) => (props.isDragged || props.index === -1) && `
|
|
40
|
+
${LogicWrapper} {
|
|
41
|
+
display: none;
|
|
42
|
+
}
|
|
43
|
+
`);
|
|
44
|
+
const AddButtonWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
47
45
|
displayName: "Filterstyles__AddButtonWrapper",
|
|
48
46
|
componentId: "sc-w5f27p-9"
|
|
49
47
|
})(["display:flex;align-items:flex-start;justify-content:flex-start;margin:24px 0 0;width:100%;position:relative;"]);
|
|
50
|
-
|
|
48
|
+
const FilterTitle = /* @__PURE__ */ styled.div.withConfig({
|
|
51
49
|
displayName: "Filterstyles__FilterTitle",
|
|
52
50
|
componentId: "sc-w5f27p-10"
|
|
53
|
-
})(["font-size:16px;font-weight:500;line-height:1.25;color:", ";text-align:left;user-select:none;flex:0 0 auto;&:first-letter{text-transform:uppercase;}"],
|
|
54
|
-
|
|
55
|
-
|
|
51
|
+
})(["font-size:16px;font-weight:500;line-height:1.25;color:", ";text-align:left;user-select:none;flex:0 0 auto;&:first-letter{text-transform:uppercase;}"], (props) => props.theme.palette["grey-800"]);
|
|
52
|
+
export {
|
|
53
|
+
AddButtonWrapper,
|
|
54
|
+
ConditionsLimit,
|
|
55
|
+
ConditionsLimitResults,
|
|
56
|
+
ExpressionWrapper,
|
|
57
|
+
FilterHeader,
|
|
58
|
+
FilterHeaderRightSide,
|
|
59
|
+
FilterTitle,
|
|
60
|
+
FilterWrapper,
|
|
61
|
+
LogicWrapper,
|
|
62
|
+
MatchingAndConditionsWrapper,
|
|
63
|
+
MatchingWrapper,
|
|
64
|
+
placeholderCss
|
|
65
|
+
};
|
package/dist/Filter.types.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { LogicOperator, LogicOperatorValue, LogicProps, MatchingProps, MatchingTexts } from '@synerise/ds-logic';
|
|
3
|
+
import { StepCardProps } from '@synerise/ds-step-card';
|
|
4
|
+
import { DeepPartial } from '@synerise/ds-utils';
|
|
5
5
|
export type LogicType = {
|
|
6
6
|
type: 'LOGIC';
|
|
7
7
|
id: string;
|
package/dist/Filter.types.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ExpressionItemProps } from './ExpressionItem.types';
|
|
3
3
|
export declare const DraggableExpressionItem: ({ expressionsOrder, expression, index: sortableIndex, ...rest }: ExpressionItemProps & {
|
|
4
4
|
index?: number;
|
|
5
5
|
}) => React.JSX.Element;
|
|
@@ -1,34 +1,27 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
dragIndex = _useState[0],
|
|
14
|
-
setDragIndex = _useState[1];
|
|
15
|
-
useEffect(function () {
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useEffect } from "react";
|
|
3
|
+
import { useDndMonitor, arrayMove } from "@synerise/ds-sortable";
|
|
4
|
+
import { ExpressionItem } from "./ExpressionItem.js";
|
|
5
|
+
const DraggableExpressionItem = ({
|
|
6
|
+
expressionsOrder,
|
|
7
|
+
expression,
|
|
8
|
+
index: sortableIndex,
|
|
9
|
+
...rest
|
|
10
|
+
}) => {
|
|
11
|
+
const [dragIndex, setDragIndex] = useState(expressionsOrder.indexOf(expression.id));
|
|
12
|
+
useEffect(() => {
|
|
16
13
|
setDragIndex(expressionsOrder.indexOf(expression.id));
|
|
17
14
|
}, [expressionsOrder, expression.id]);
|
|
18
15
|
useDndMonitor({
|
|
19
|
-
onDragMove:
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
var _event$active$data$cu, _event$over2;
|
|
23
|
-
var tempOrder = arrayMove(expressionsOrder, (_event$active$data$cu = event.active.data.current) == null || (_event$active$data$cu = _event$active$data$cu.sortable) == null ? void 0 : _event$active$data$cu.index, (_event$over2 = event.over) == null || (_event$over2 = _event$over2.data.current) == null || (_event$over2 = _event$over2.sortable) == null ? void 0 : _event$over2.index);
|
|
16
|
+
onDragMove: (event) => {
|
|
17
|
+
if (event.over?.data.current?.sortable?.index !== void 0) {
|
|
18
|
+
const tempOrder = arrayMove(expressionsOrder, event.active.data.current?.sortable?.index, event.over?.data.current?.sortable?.index);
|
|
24
19
|
setDragIndex(tempOrder.indexOf(expression.id));
|
|
25
20
|
}
|
|
26
21
|
}
|
|
27
22
|
});
|
|
28
|
-
return
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}, rest));
|
|
34
|
-
};
|
|
23
|
+
return /* @__PURE__ */ jsx(ExpressionItem, { isDragOverlay: sortableIndex === -1, dragIndex, expression, expressionsOrder, ...rest });
|
|
24
|
+
};
|
|
25
|
+
export {
|
|
26
|
+
DraggableExpressionItem
|
|
27
|
+
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ExpressionItemProps } from './ExpressionItem.types';
|
|
3
3
|
export declare const ExpressionItem: ({ handleTransitionEnd, dragHandleProps, isDragged, isDragOverlay, expression, readOnly, handleMouseDown, isLast, stepProps, logicProps, wrapperRef, expressionIndex, dragIndex, expressionsOrder, }: ExpressionItemProps) => React.JSX.Element;
|
|
@@ -1,46 +1,34 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
id
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}, data, stepProps, {
|
|
36
|
-
readOnly: readOnly,
|
|
37
|
-
dragHandleProps: dragHandleProps,
|
|
38
|
-
isDragged: isDragged,
|
|
39
|
-
isDragOverlay: isDragOverlay,
|
|
40
|
-
dragIndex: dragIndex
|
|
41
|
-
})), shouldRenderLogic && /*#__PURE__*/React.createElement(S.LogicWrapper, {
|
|
42
|
-
"data-testid": "condition-logic"
|
|
43
|
-
}, /*#__PURE__*/React.createElement(Logic, _extends({}, logicProps, (_expression$logic = expression.logic) == null ? void 0 : _expression$logic.data, {
|
|
44
|
-
readOnly: readOnly
|
|
45
|
-
}))));
|
|
46
|
-
};
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import Logic from "@synerise/ds-logic";
|
|
3
|
+
import StepCard from "@synerise/ds-step-card";
|
|
4
|
+
import { ExpressionWrapper, LogicWrapper } from "../../Filter.styles.js";
|
|
5
|
+
import { isStepType } from "../../utils.js";
|
|
6
|
+
const ExpressionItem = ({
|
|
7
|
+
handleTransitionEnd,
|
|
8
|
+
dragHandleProps,
|
|
9
|
+
isDragged,
|
|
10
|
+
isDragOverlay,
|
|
11
|
+
expression,
|
|
12
|
+
readOnly,
|
|
13
|
+
handleMouseDown,
|
|
14
|
+
isLast,
|
|
15
|
+
stepProps,
|
|
16
|
+
logicProps,
|
|
17
|
+
wrapperRef,
|
|
18
|
+
expressionIndex,
|
|
19
|
+
dragIndex,
|
|
20
|
+
expressionsOrder
|
|
21
|
+
}) => {
|
|
22
|
+
const {
|
|
23
|
+
data,
|
|
24
|
+
id
|
|
25
|
+
} = expression;
|
|
26
|
+
const shouldRenderLogic = isStepType(expression) && expression.logic && !isLast && !isDragged && !isDragOverlay && expressionIndex !== -1;
|
|
27
|
+
return /* @__PURE__ */ jsxs(ExpressionWrapper, { "data-testid": "condition-step", onTransitionEnd: handleTransitionEnd, ref: wrapperRef, onMouseDown: handleMouseDown, children: [
|
|
28
|
+
/* @__PURE__ */ jsx(StepCard, { expressionIndex, expressionCount: expressionsOrder.length, ...data, ...stepProps, readOnly, dragHandleProps, isDragged, isDragOverlay, dragIndex }),
|
|
29
|
+
shouldRenderLogic && /* @__PURE__ */ jsx(LogicWrapper, { "data-testid": "condition-logic", children: /* @__PURE__ */ jsx(Logic, { ...logicProps, ...expression.logic?.data, readOnly }) })
|
|
30
|
+
] }, id);
|
|
31
|
+
};
|
|
32
|
+
export {
|
|
33
|
+
ExpressionItem
|
|
34
|
+
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
1
|
+
import { MouseEventHandler, ReactNode, TransitionEventHandler } from 'react';
|
|
2
|
+
import { LogicProps } from '@synerise/ds-logic';
|
|
3
|
+
import { DragHandlePropType } from '@synerise/ds-sortable';
|
|
4
|
+
import { StepCardProps } from '@synerise/ds-step-card';
|
|
5
|
+
import { Expression } from '../../Filter.types';
|
|
6
6
|
export type ExpressionItemProps = {
|
|
7
7
|
handleTransitionEnd: TransitionEventHandler;
|
|
8
8
|
id: string | number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { DraggableExpressionItem } from "./DraggableExpressionItem.js";
|
|
2
|
+
import { ExpressionItem } from "./ExpressionItem.js";
|
|
3
|
+
export {
|
|
4
|
+
DraggableExpressionItem,
|
|
5
|
+
ExpressionItem
|
|
6
|
+
};
|
package/dist/index.js
CHANGED
package/dist/modules.d.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import "@testing-library/jest-dom";
|
|
File without changes
|
package/dist/utils.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Expression, StepType } from './Filter.types';
|
|
2
2
|
export declare const isStepType: (expression: Expression) => expression is StepType;
|
package/dist/utils.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-filter",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.42",
|
|
4
4
|
"description": "Filter UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
"access": "public"
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
|
-
"build": "
|
|
19
|
+
"build": "vite build",
|
|
20
20
|
"build:css": "node ../../../scripts/style/less.js",
|
|
21
21
|
"build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
|
|
22
|
-
"build:watch": "
|
|
22
|
+
"build:watch": "vite build --watch",
|
|
23
23
|
"defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
|
|
24
24
|
"pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
|
|
25
25
|
"prepublish": "pnpm run build",
|
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
],
|
|
36
36
|
"types": "dist/index.d.ts",
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@synerise/ds-button": "^1.5.
|
|
39
|
-
"@synerise/ds-logic": "^1.1.
|
|
40
|
-
"@synerise/ds-sortable": "^1.3.
|
|
41
|
-
"@synerise/ds-step-card": "^1.2.
|
|
42
|
-
"@synerise/ds-utils": "^1.7.
|
|
38
|
+
"@synerise/ds-button": "^1.5.18",
|
|
39
|
+
"@synerise/ds-logic": "^1.1.32",
|
|
40
|
+
"@synerise/ds-sortable": "^1.3.14",
|
|
41
|
+
"@synerise/ds-step-card": "^1.2.40",
|
|
42
|
+
"@synerise/ds-utils": "^1.7.1"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@synerise/ds-core": "*",
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"react-intl": ">=3.12.0 <= 6.8",
|
|
48
48
|
"styled-components": "^5.3.3"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
|
|
51
51
|
}
|