@synerise/ds-condition 1.6.16 → 1.6.18
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 +8 -0
- package/dist/Condition.d.ts +2 -2
- package/dist/Condition.js +128 -207
- package/dist/Condition.style.d.ts +32 -32
- package/dist/Condition.style.js +84 -93
- package/dist/Condition.types.d.ts +5 -5
- package/dist/Condition.types.js +1 -1
- package/dist/ConditionStep/AddCondition/AddCondition.d.ts +1 -1
- package/dist/ConditionStep/AddCondition/AddCondition.js +25 -28
- package/dist/ConditionStep/AddCondition/AddCondition.types.d.ts +2 -2
- package/dist/ConditionStep/AddCondition/AddCondition.types.js +1 -1
- package/dist/ConditionStep/AddCondition/index.js +4 -1
- package/dist/ConditionStep/ConditionRow/ConditionRow.d.ts +1 -1
- package/dist/ConditionStep/ConditionRow/ConditionRow.js +109 -167
- package/dist/ConditionStep/ConditionRow/ConditionRow.types.d.ts +4 -4
- package/dist/ConditionStep/ConditionRow/ConditionRow.types.js +1 -1
- package/dist/ConditionStep/ConditionRow/index.js +4 -2
- package/dist/ConditionStep/ConditionStep.d.ts +1 -1
- package/dist/ConditionStep/ConditionStep.js +144 -247
- package/dist/ConditionStep/ConditionStep.types.d.ts +6 -6
- package/dist/ConditionStep/ConditionStep.types.js +1 -1
- package/dist/ConditionStep/EmptyCondition/EmptyCondition.d.ts +1 -1
- package/dist/ConditionStep/EmptyCondition/EmptyCondition.js +16 -15
- package/dist/ConditionStep/EmptyCondition/emptyCondition.styles.d.ts +6 -6
- package/dist/ConditionStep/EmptyCondition/emptyCondition.styles.js +9 -5
- package/dist/ConditionStep/EmptyCondition/index.js +4 -1
- package/dist/ConditionStep/StepHeader/StepHeader.d.ts +1 -1
- package/dist/ConditionStep/StepHeader/StepHeader.js +46 -62
- package/dist/ConditionStep/StepHeader/StepHeader.types.d.ts +2 -2
- package/dist/ConditionStep/StepHeader/StepHeader.types.js +1 -1
- package/dist/ConditionStep/StepHeader/index.js +4 -2
- package/dist/ConditionStep/StepName/StepName.d.ts +2 -2
- package/dist/ConditionStep/StepName/StepName.js +19 -10
- package/dist/ConditionStep/index.js +4 -2
- package/dist/constants.js +22 -11
- package/dist/hooks/useTranslations.d.ts +1 -1
- package/dist/hooks/useTranslations.js +61 -59
- package/dist/index.js +4 -1
- package/dist/modules.d.js +1 -1
- package/dist/modules.d.ts +0 -0
- package/package.json +17 -17
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
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.6.18](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@1.6.17...@synerise/ds-condition@1.6.18) (2026-04-01)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-condition
|
|
9
|
+
|
|
10
|
+
## [1.6.17](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@1.6.16...@synerise/ds-condition@1.6.17) (2026-03-24)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-condition
|
|
13
|
+
|
|
6
14
|
## [1.6.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@1.6.15...@synerise/ds-condition@1.6.16) (2026-03-20)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-condition
|
package/dist/Condition.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ConditionProps } from './Condition.types';
|
|
3
3
|
declare const Condition: (props: ConditionProps) => React.JSX.Element;
|
|
4
4
|
export default Condition;
|
package/dist/Condition.js
CHANGED
|
@@ -1,126 +1,102 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import Button from
|
|
4
|
-
import Icon, {
|
|
5
|
-
import {
|
|
6
|
-
import { usePrevious } from
|
|
7
|
-
import
|
|
8
|
-
import { ConditionStep } from
|
|
9
|
-
import { StepName } from
|
|
10
|
-
import {
|
|
11
|
-
import { useTranslations } from
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
addCondition
|
|
16
|
-
removeCondition
|
|
17
|
-
texts
|
|
18
|
-
duplicateStep
|
|
19
|
-
removeStep
|
|
20
|
-
addStep
|
|
21
|
-
renderAddStep
|
|
22
|
-
onChangeOrder
|
|
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
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
currentConditionId = _useState2[0],
|
|
59
|
-
setCurrentConditionId = _useState2[1];
|
|
60
|
-
var _useState3 = useState(DEFAULT_STEP),
|
|
61
|
-
currentStepId = _useState3[0],
|
|
62
|
-
setCurrentStepId = _useState3[1];
|
|
63
|
-
var _useState4 = useState(autoOpenedComponent),
|
|
64
|
-
currentField = _useState4[0],
|
|
65
|
-
setCurrentField = _useState4[1];
|
|
66
|
-
var prevSteps = usePrevious(steps);
|
|
67
|
-
useEffect(function () {
|
|
68
|
-
if (autoOpenedComponent && steps.length && steps[0].conditions[0].operator && steps[0].conditions[0].operator.value === undefined) {
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useEffect, useCallback, useMemo } from "react";
|
|
3
|
+
import Button from "@synerise/ds-button";
|
|
4
|
+
import Icon, { DragHandleM, Add3M } from "@synerise/ds-icon";
|
|
5
|
+
import { SortableContainer, DragOverlay } from "@synerise/ds-sortable";
|
|
6
|
+
import { usePrevious } from "@synerise/ds-utils";
|
|
7
|
+
import { Condition as Condition$1, StepWrapper, DragLabel, DragLabelPart, AddStepButton } from "./Condition.style.js";
|
|
8
|
+
import { ConditionStep } from "./ConditionStep/ConditionStep.js";
|
|
9
|
+
import { StepName } from "./ConditionStep/StepName/StepName.js";
|
|
10
|
+
import { DEFAULT_FIELD, DEFAULT_CONDITION, DEFAULT_STEP, PARAMETER, OPERATOR, ACTION_ATTRIBUTE, FACTOR, SUBJECT, DEFAULT_INPUT_PROPS } from "./constants.js";
|
|
11
|
+
import { useTranslations } from "./hooks/useTranslations.js";
|
|
12
|
+
const Condition = (props) => {
|
|
13
|
+
const {
|
|
14
|
+
steps,
|
|
15
|
+
addCondition,
|
|
16
|
+
removeCondition,
|
|
17
|
+
texts,
|
|
18
|
+
duplicateStep,
|
|
19
|
+
removeStep,
|
|
20
|
+
addStep,
|
|
21
|
+
renderAddStep,
|
|
22
|
+
onChangeOrder,
|
|
23
|
+
minConditionsLength = 1,
|
|
24
|
+
maxConditionsLength,
|
|
25
|
+
autoClearCondition,
|
|
26
|
+
onChangeContext,
|
|
27
|
+
onChangeSubject,
|
|
28
|
+
onChangeParameter,
|
|
29
|
+
onChangeOperator,
|
|
30
|
+
onChangeFactorType,
|
|
31
|
+
onChangeFactorValue,
|
|
32
|
+
onUpdateStepName,
|
|
33
|
+
getPopupContainerOverride,
|
|
34
|
+
showSuffix,
|
|
35
|
+
hoverDisabled,
|
|
36
|
+
autoOpenedComponent = DEFAULT_FIELD,
|
|
37
|
+
inputProps,
|
|
38
|
+
onDeactivate,
|
|
39
|
+
readOnly = false,
|
|
40
|
+
singleStepCondition,
|
|
41
|
+
showActionAttribute,
|
|
42
|
+
onChangeActionAttribute,
|
|
43
|
+
contextSelectorComponent,
|
|
44
|
+
parameterSelectorComponent,
|
|
45
|
+
factorParameterSelectorComponent,
|
|
46
|
+
actionAttributeParameterSelectorComponent,
|
|
47
|
+
showEmptyConditionPlaceholder = false,
|
|
48
|
+
factorValueExtraProps
|
|
49
|
+
} = props;
|
|
50
|
+
const allTexts = useTranslations(texts);
|
|
51
|
+
const [draggedStep, setDraggedStep] = useState();
|
|
52
|
+
const [currentConditionId, setCurrentConditionId] = useState(DEFAULT_CONDITION);
|
|
53
|
+
const [currentStepId, setCurrentStepId] = useState(DEFAULT_STEP);
|
|
54
|
+
const [currentField, setCurrentField] = useState(autoOpenedComponent);
|
|
55
|
+
const prevSteps = usePrevious(steps);
|
|
56
|
+
useEffect(() => {
|
|
57
|
+
if (autoOpenedComponent && steps.length && steps[0].conditions[0].operator && steps[0].conditions[0].operator.value === void 0) {
|
|
69
58
|
setCurrentStepId(steps[0].id);
|
|
70
59
|
setCurrentConditionId(steps[0].conditions[0].id);
|
|
71
60
|
setCurrentField(autoOpenedComponent);
|
|
72
61
|
}
|
|
73
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
74
62
|
}, []);
|
|
75
|
-
useEffect(
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
};
|
|
84
|
-
});
|
|
85
|
-
var oldStep = prevSteps.find(function (prevStep) {
|
|
86
|
-
return prevStep.id === step.id;
|
|
87
|
-
});
|
|
63
|
+
useEffect(() => {
|
|
64
|
+
const newConditionId = prevSteps && steps && steps.reduce((id, step) => {
|
|
65
|
+
let result = id;
|
|
66
|
+
const conditions = step.conditions.map((condition) => ({
|
|
67
|
+
id: condition.id,
|
|
68
|
+
value: condition.parameter?.value
|
|
69
|
+
}));
|
|
70
|
+
const oldStep = prevSteps.find((prevStep) => prevStep.id === step.id);
|
|
88
71
|
if (oldStep) {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
});
|
|
92
|
-
var newCondition = conditions.find(function (condition) {
|
|
93
|
-
return oldConditions.indexOf(condition.id) === -1;
|
|
94
|
-
});
|
|
72
|
+
const oldConditions = oldStep.conditions.map((condition) => condition.id);
|
|
73
|
+
const newCondition = conditions.find((condition) => oldConditions.indexOf(condition.id) === -1);
|
|
95
74
|
result = newCondition && !newCondition.value ? newCondition.id : result;
|
|
96
75
|
} else {
|
|
97
|
-
|
|
98
|
-
result = (_step$conditions$ = step.conditions[0]) == null ? void 0 : _step$conditions$.id;
|
|
76
|
+
result = step.conditions[0]?.id;
|
|
99
77
|
}
|
|
100
78
|
return result;
|
|
101
|
-
},
|
|
79
|
+
}, void 0);
|
|
102
80
|
if (newConditionId && newConditionId !== currentConditionId) {
|
|
103
81
|
setCurrentConditionId(newConditionId);
|
|
104
82
|
}
|
|
105
83
|
}, [currentConditionId, currentField, prevSteps, steps]);
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
});
|
|
110
|
-
if (step === undefined || step.conditions.length === 0) {
|
|
84
|
+
const clearConditionRow = useCallback((stepId) => {
|
|
85
|
+
const step = steps.find((s) => s.id === stepId);
|
|
86
|
+
if (step === void 0 || step.conditions.length === 0) {
|
|
111
87
|
return;
|
|
112
88
|
}
|
|
113
89
|
if (removeCondition && addCondition) {
|
|
114
|
-
step.conditions.forEach(
|
|
90
|
+
step.conditions.forEach((condition, index) => {
|
|
115
91
|
if (index > 0) {
|
|
116
92
|
removeCondition(step.id, condition.id);
|
|
117
93
|
}
|
|
118
94
|
});
|
|
119
95
|
}
|
|
120
|
-
autoClearCondition && step.conditions.forEach(
|
|
121
|
-
onChangeFactorValue && onChangeFactorValue(step.id, condition.id,
|
|
122
|
-
onChangeOperator && onChangeOperator(step.id, condition.id,
|
|
123
|
-
onChangeParameter && onChangeParameter(step.id, condition.id,
|
|
96
|
+
autoClearCondition && step.conditions.forEach((condition) => {
|
|
97
|
+
onChangeFactorValue && onChangeFactorValue(step.id, condition.id, void 0);
|
|
98
|
+
onChangeOperator && onChangeOperator(step.id, condition.id, void 0);
|
|
99
|
+
onChangeParameter && onChangeParameter(step.id, condition.id, void 0);
|
|
124
100
|
});
|
|
125
101
|
setCurrentConditionId(step.conditions[0].id);
|
|
126
102
|
setCurrentStepId(step.id);
|
|
@@ -130,7 +106,7 @@ var Condition = function Condition(props) {
|
|
|
130
106
|
setCurrentField(OPERATOR);
|
|
131
107
|
}
|
|
132
108
|
}, [steps, removeCondition, addCondition, autoClearCondition, onChangeFactorValue, onChangeOperator, onChangeParameter]);
|
|
133
|
-
|
|
109
|
+
const selectSubject = useCallback((value, stepId) => {
|
|
134
110
|
clearConditionRow(stepId);
|
|
135
111
|
setCurrentStepId(stepId);
|
|
136
112
|
if (showActionAttribute) {
|
|
@@ -140,7 +116,7 @@ var Condition = function Condition(props) {
|
|
|
140
116
|
}
|
|
141
117
|
onChangeSubject && onChangeSubject(stepId, value);
|
|
142
118
|
}, [clearConditionRow, onChangeSubject, showActionAttribute]);
|
|
143
|
-
|
|
119
|
+
const selectContext = useCallback((value, stepId) => {
|
|
144
120
|
clearConditionRow(stepId);
|
|
145
121
|
setCurrentStepId(stepId);
|
|
146
122
|
if (showActionAttribute) {
|
|
@@ -150,58 +126,56 @@ var Condition = function Condition(props) {
|
|
|
150
126
|
}
|
|
151
127
|
onChangeContext && onChangeContext(stepId, value);
|
|
152
128
|
}, [clearConditionRow, onChangeContext, showActionAttribute]);
|
|
153
|
-
|
|
129
|
+
const selectActionAttribute = useCallback((value, stepId) => {
|
|
154
130
|
clearConditionRow(stepId);
|
|
155
131
|
setCurrentStepId(stepId);
|
|
156
132
|
setCurrentField(PARAMETER);
|
|
157
133
|
onChangeActionAttribute && onChangeActionAttribute(stepId, value);
|
|
158
134
|
}, [onChangeActionAttribute, clearConditionRow]);
|
|
159
|
-
|
|
135
|
+
const selectParameter = useCallback((stepId, conditionId, value) => {
|
|
160
136
|
if (conditionId && onChangeParameter) {
|
|
161
|
-
autoClearCondition && onChangeOperator && onChangeOperator(stepId, conditionId,
|
|
162
|
-
autoClearCondition && onChangeFactorValue && onChangeFactorValue(stepId, conditionId,
|
|
137
|
+
autoClearCondition && onChangeOperator && onChangeOperator(stepId, conditionId, void 0);
|
|
138
|
+
autoClearCondition && onChangeFactorValue && onChangeFactorValue(stepId, conditionId, void 0);
|
|
163
139
|
onChangeParameter(stepId, conditionId, value);
|
|
164
140
|
setCurrentConditionId(conditionId);
|
|
165
141
|
setCurrentStepId(stepId);
|
|
166
142
|
setCurrentField(OPERATOR);
|
|
167
143
|
}
|
|
168
144
|
}, [autoClearCondition, onChangeFactorValue, onChangeOperator, onChangeParameter]);
|
|
169
|
-
|
|
170
|
-
if (conditionId && onChangeOperator && value &&
|
|
171
|
-
autoClearCondition && onChangeFactorValue && onChangeFactorValue(stepId, conditionId,
|
|
145
|
+
const selectOperator = useCallback((stepId, conditionId, value) => {
|
|
146
|
+
if (conditionId && onChangeOperator && value && "groupId" in value) {
|
|
147
|
+
autoClearCondition && onChangeFactorValue && onChangeFactorValue(stepId, conditionId, void 0);
|
|
172
148
|
onChangeOperator(stepId, conditionId, value);
|
|
173
149
|
setCurrentConditionId(conditionId);
|
|
174
150
|
setCurrentStepId(stepId);
|
|
175
151
|
setCurrentField(FACTOR);
|
|
176
152
|
}
|
|
177
153
|
}, [autoClearCondition, onChangeFactorValue, onChangeOperator]);
|
|
178
|
-
|
|
154
|
+
const setStepConditionFactorType = useCallback((stepId, conditionId, factorType) => {
|
|
179
155
|
setCurrentConditionId(conditionId);
|
|
180
156
|
setCurrentStepId(stepId);
|
|
181
157
|
setCurrentField(FACTOR);
|
|
182
158
|
onChangeFactorType && onChangeFactorType(stepId, conditionId, factorType);
|
|
183
159
|
}, [onChangeFactorType]);
|
|
184
|
-
|
|
160
|
+
const setStepConditionFactorValue = useCallback((stepId, conditionId, value) => {
|
|
185
161
|
setCurrentField(DEFAULT_FIELD);
|
|
186
162
|
setCurrentStepId(stepId);
|
|
187
163
|
onChangeFactorValue && onChangeFactorValue(stepId, conditionId, value);
|
|
188
164
|
}, [onChangeFactorValue]);
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
var handleAddStep = useCallback(function () {
|
|
193
|
-
var newStepId = addStep ? addStep() : undefined;
|
|
165
|
+
const draggableEnabled = useMemo(() => onChangeOrder && steps.length > 1, [steps, onChangeOrder]);
|
|
166
|
+
const handleAddStep = useCallback(() => {
|
|
167
|
+
const newStepId = addStep ? addStep() : void 0;
|
|
194
168
|
if (newStepId) {
|
|
195
169
|
setCurrentStepId(newStepId);
|
|
196
170
|
setCurrentField(SUBJECT);
|
|
197
171
|
}
|
|
198
172
|
}, [addStep]);
|
|
199
|
-
|
|
173
|
+
const handleAddCondition = useMemo(() => {
|
|
200
174
|
if (!addCondition) {
|
|
201
|
-
return
|
|
175
|
+
return void 0;
|
|
202
176
|
}
|
|
203
|
-
return
|
|
204
|
-
|
|
177
|
+
return (stepId) => {
|
|
178
|
+
const newConditionId = addCondition ? addCondition(stepId) : void 0;
|
|
205
179
|
if (newConditionId) {
|
|
206
180
|
setCurrentConditionId(newConditionId);
|
|
207
181
|
setCurrentStepId(stepId);
|
|
@@ -209,96 +183,43 @@ var Condition = function Condition(props) {
|
|
|
209
183
|
}
|
|
210
184
|
};
|
|
211
185
|
}, [addCondition]);
|
|
212
|
-
|
|
186
|
+
const handleClearActiveCondition = useCallback(() => {
|
|
213
187
|
onDeactivate && onDeactivate(currentStepId, currentConditionId);
|
|
214
188
|
setCurrentConditionId(DEFAULT_CONDITION);
|
|
215
189
|
setCurrentStepId(DEFAULT_STEP);
|
|
216
190
|
setCurrentField(DEFAULT_FIELD);
|
|
217
191
|
}, [currentConditionId, currentStepId, onDeactivate]);
|
|
218
|
-
return
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
var active = _ref.active;
|
|
226
|
-
var stepIndex = steps.findIndex(function (item) {
|
|
227
|
-
return item.id === active.id;
|
|
228
|
-
});
|
|
229
|
-
setDraggedStep(_extends({}, steps[stepIndex], {
|
|
192
|
+
return /* @__PURE__ */ jsxs(Condition$1, { className: "ds-conditions", "data-popup-container": true, children: [
|
|
193
|
+
/* @__PURE__ */ jsxs(SortableContainer, { items: steps, axis: "y", onDragStart: ({
|
|
194
|
+
active
|
|
195
|
+
}) => {
|
|
196
|
+
const stepIndex = steps.findIndex((item) => item.id === active.id);
|
|
197
|
+
setDraggedStep({
|
|
198
|
+
...steps[stepIndex],
|
|
230
199
|
index: stepIndex
|
|
231
|
-
})
|
|
232
|
-
},
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
selectParameter: selectParameter,
|
|
257
|
-
selectContext: selectContext,
|
|
258
|
-
selectSubject: selectSubject,
|
|
259
|
-
selectActionAttribute: selectActionAttribute,
|
|
260
|
-
updateStepName: onUpdateStepName,
|
|
261
|
-
duplicateStep: duplicateStep,
|
|
262
|
-
removeStep: removeStep,
|
|
263
|
-
minConditionsLength: minConditionsLength,
|
|
264
|
-
maxConditionsLength: maxConditionsLength,
|
|
265
|
-
setStepConditionFactorType: setStepConditionFactorType,
|
|
266
|
-
setStepConditionFactorValue: setStepConditionFactorValue,
|
|
267
|
-
currentConditionId: currentConditionId,
|
|
268
|
-
currentStepId: currentStepId,
|
|
269
|
-
currentField: currentField,
|
|
270
|
-
removeCondition: removeCondition,
|
|
271
|
-
addCondition: handleAddCondition,
|
|
272
|
-
setCurrentField: setCurrentField,
|
|
273
|
-
setCurrentCondition: setCurrentConditionId,
|
|
274
|
-
setCurrentStep: setCurrentStepId,
|
|
275
|
-
onDeactivate: handleClearActiveCondition,
|
|
276
|
-
showSuffix: showSuffix,
|
|
277
|
-
hoverDisabled: hoverDisabled || currentStepId !== step.id && currentStepId !== undefined,
|
|
278
|
-
inputProps: _extends({}, DEFAULT_INPUT_PROPS, inputProps),
|
|
279
|
-
readOnly: readOnly,
|
|
280
|
-
singleStepCondition: singleStepCondition,
|
|
281
|
-
showActionAttribute: showActionAttribute,
|
|
282
|
-
showEmptyConditionPlaceholder: showEmptyConditionPlaceholder,
|
|
283
|
-
factorValueExtraProps: factorValueExtraProps
|
|
284
|
-
});
|
|
285
|
-
}), /*#__PURE__*/React.createElement(DragOverlay, {
|
|
286
|
-
dropAnimation: null
|
|
287
|
-
}, draggedStep && /*#__PURE__*/React.createElement(S.StepWrapper, {
|
|
288
|
-
isDragOverlay: true,
|
|
289
|
-
key: "dragOverlay"
|
|
290
|
-
}, /*#__PURE__*/React.createElement(S.DragLabel, null, /*#__PURE__*/React.createElement(Icon, {
|
|
291
|
-
component: /*#__PURE__*/React.createElement(DragHandleM, null)
|
|
292
|
-
}), onUpdateStepName && /*#__PURE__*/React.createElement(StepName, {
|
|
293
|
-
name: draggedStep.stepName,
|
|
294
|
-
index: draggedStep.index,
|
|
295
|
-
texts: allTexts
|
|
296
|
-
}), ((_draggedStep$context = draggedStep.context) == null ? void 0 : _draggedStep$context.selectedItem) && /*#__PURE__*/React.createElement(S.DragLabelPart, null, draggedStep.context.selectedItem.name))))), addStep && /*#__PURE__*/React.createElement(S.AddStepButton, null, /*#__PURE__*/React.createElement(Button, {
|
|
297
|
-
type: "ghost",
|
|
298
|
-
mode: "icon-label",
|
|
299
|
-
onClick: handleAddStep
|
|
300
|
-
}, /*#__PURE__*/React.createElement(Icon, {
|
|
301
|
-
component: /*#__PURE__*/React.createElement(Add3M, null)
|
|
302
|
-
}), allTexts.addStep)), !readOnly && renderAddStep && /*#__PURE__*/React.createElement(S.AddStepButton, null, renderAddStep()));
|
|
200
|
+
});
|
|
201
|
+
}, onDragEnd: () => {
|
|
202
|
+
setDraggedStep(void 0);
|
|
203
|
+
}, onDragCancel: () => setDraggedStep(void 0), onOrderChange: onChangeOrder, children: [
|
|
204
|
+
steps.map((step, index) => {
|
|
205
|
+
return /* @__PURE__ */ jsx(ConditionStep, { step, isDragged: draggedStep && draggedStep?.id === step.id, isLast: index === steps.length - 1, texts: allTexts, index, contextSelectorComponent, parameterSelectorComponent, factorParameterSelectorComponent, actionAttributeParameterSelectorComponent, hasPriority: step.id === currentStepId, getPopupContainerOverride, draggableEnabled, selectOperator, selectParameter, selectContext, selectSubject, selectActionAttribute, updateStepName: onUpdateStepName, duplicateStep, removeStep, minConditionsLength, maxConditionsLength, setStepConditionFactorType, setStepConditionFactorValue, currentConditionId, currentStepId, currentField, removeCondition, addCondition: handleAddCondition, setCurrentField, setCurrentCondition: setCurrentConditionId, setCurrentStep: setCurrentStepId, onDeactivate: handleClearActiveCondition, showSuffix, hoverDisabled: hoverDisabled || currentStepId !== step.id && currentStepId !== void 0, inputProps: {
|
|
206
|
+
...DEFAULT_INPUT_PROPS,
|
|
207
|
+
...inputProps
|
|
208
|
+
}, readOnly, singleStepCondition, showActionAttribute, showEmptyConditionPlaceholder, factorValueExtraProps }, `step-id-${step.id}`);
|
|
209
|
+
}),
|
|
210
|
+
/* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children: draggedStep && /* @__PURE__ */ jsx(StepWrapper, { isDragOverlay: true, children: /* @__PURE__ */ jsxs(DragLabel, { children: [
|
|
211
|
+
/* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(DragHandleM, {}) }),
|
|
212
|
+
onUpdateStepName && /* @__PURE__ */ jsx(StepName, { name: draggedStep.stepName, index: draggedStep.index, texts: allTexts }),
|
|
213
|
+
draggedStep.context?.selectedItem && /* @__PURE__ */ jsx(DragLabelPart, { children: draggedStep.context.selectedItem.name })
|
|
214
|
+
] }) }, "dragOverlay") })
|
|
215
|
+
] }),
|
|
216
|
+
addStep && /* @__PURE__ */ jsx(AddStepButton, { children: /* @__PURE__ */ jsxs(Button, { type: "ghost", mode: "icon-label", onClick: handleAddStep, children: [
|
|
217
|
+
/* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Add3M, {}) }),
|
|
218
|
+
allTexts.addStep
|
|
219
|
+
] }) }),
|
|
220
|
+
!readOnly && renderAddStep && /* @__PURE__ */ jsx(AddStepButton, { children: renderAddStep() })
|
|
221
|
+
] });
|
|
222
|
+
};
|
|
223
|
+
export {
|
|
224
|
+
Condition as default
|
|
303
225
|
};
|
|
304
|
-
export default Condition;
|
|
@@ -1,61 +1,61 @@
|
|
|
1
|
-
export declare const ErrorWrapper: import(
|
|
2
|
-
export declare const DragIcon: import(
|
|
3
|
-
export declare const StepConditionCruds: import(
|
|
4
|
-
export declare const StepConditions: import(
|
|
1
|
+
export declare const ErrorWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export declare const DragIcon: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<import('@synerise/ds-icon').BaseIconProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, keyof import('@synerise/ds-icon').BaseIconProps> & import('@synerise/ds-utils').DataAttributes & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
3
|
+
export declare const StepConditionCruds: import('styled-components').StyledComponent<import('react').FC<import('@synerise/ds-cruds/dist/Cruds.types').CrudsProps> & import('@synerise/ds-cruds/dist/Cruds.types').CrudsSubComponents, any, {}, never>;
|
|
4
|
+
export declare const StepConditions: import('styled-components').StyledComponent<"div", any, {
|
|
5
5
|
withCruds?: boolean;
|
|
6
6
|
}, never>;
|
|
7
|
-
export declare const StepName: import(
|
|
8
|
-
export declare const StepIndexWrapper: import(
|
|
9
|
-
export declare const Condition: import(
|
|
10
|
-
export declare const ConditionStepWrapper: import(
|
|
11
|
-
export declare const And: import(
|
|
12
|
-
export declare const StepCruds: import(
|
|
13
|
-
export declare const LeftSide: import(
|
|
14
|
-
export declare const StepHeader: import(
|
|
15
|
-
export declare const DraggedLabel: import(
|
|
16
|
-
export declare const Step: import(
|
|
7
|
+
export declare const StepName: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
8
|
+
export declare const StepIndexWrapper: import('styled-components').StyledComponent<"span", any, {}, never>;
|
|
9
|
+
export declare const Condition: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
10
|
+
export declare const ConditionStepWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
11
|
+
export declare const And: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
12
|
+
export declare const StepCruds: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
13
|
+
export declare const LeftSide: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
14
|
+
export declare const StepHeader: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
15
|
+
export declare const DraggedLabel: import('styled-components').StyledComponent<"span", any, {}, never>;
|
|
16
|
+
export declare const Step: import('styled-components').StyledComponent<"div", any, {
|
|
17
17
|
active: boolean;
|
|
18
18
|
showSuffix?: boolean;
|
|
19
19
|
hoverDisabled?: boolean;
|
|
20
20
|
singleStepCondition?: boolean;
|
|
21
21
|
}, never>;
|
|
22
|
-
export declare const DropLabel: import(
|
|
23
|
-
export declare const DragLabelPart: import(
|
|
24
|
-
export declare const DragLabel: import(
|
|
25
|
-
export declare const StepWrapper: import(
|
|
22
|
+
export declare const DropLabel: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
23
|
+
export declare const DragLabelPart: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
24
|
+
export declare const DragLabel: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
25
|
+
export declare const StepWrapper: import('styled-components').StyledComponent<"div", any, {
|
|
26
26
|
isDragOverlay?: boolean;
|
|
27
27
|
isDragged?: boolean;
|
|
28
28
|
}, never>;
|
|
29
|
-
export declare const Subject: import(
|
|
30
|
-
export declare const RemoveIconWrapper: import(
|
|
29
|
+
export declare const Subject: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
30
|
+
export declare const RemoveIconWrapper: import('styled-components').StyledComponent<"span", any, {
|
|
31
31
|
'data-testid': string;
|
|
32
32
|
}, "data-testid">;
|
|
33
|
-
export declare const ConditionWrapper: import(
|
|
33
|
+
export declare const ConditionWrapper: import('styled-components').StyledComponent<"div", any, {
|
|
34
34
|
withRemoveTrigger?: boolean;
|
|
35
35
|
}, never>;
|
|
36
|
-
export declare const ConditionParameterWrapper: import(
|
|
36
|
+
export declare const ConditionParameterWrapper: import('styled-components').StyledComponent<"div", any, {
|
|
37
37
|
withRemoveTrigger?: boolean;
|
|
38
38
|
}, never>;
|
|
39
|
-
export declare const ConditionOperatorWrapper: import(
|
|
39
|
+
export declare const ConditionOperatorWrapper: import('styled-components').StyledComponent<"div", any, {
|
|
40
40
|
withRemoveTrigger?: boolean;
|
|
41
41
|
}, never>;
|
|
42
|
-
export declare const ConditionFactorWrapper: import(
|
|
42
|
+
export declare const ConditionFactorWrapper: import('styled-components').StyledComponent<"div", any, {
|
|
43
43
|
withRemoveTrigger?: boolean;
|
|
44
44
|
}, never>;
|
|
45
|
-
export declare const ConditionRows: import(
|
|
46
|
-
export declare const ConditionRowDefinition: import(
|
|
47
|
-
export declare const ConditionRowLine: import(
|
|
48
|
-
export declare const AddConditionRow: import(
|
|
49
|
-
export declare const ConditionConnections: import(
|
|
45
|
+
export declare const ConditionRows: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
46
|
+
export declare const ConditionRowDefinition: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
47
|
+
export declare const ConditionRowLine: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
48
|
+
export declare const AddConditionRow: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
49
|
+
export declare const ConditionConnections: import('styled-components').StyledComponent<"span", any, {
|
|
50
50
|
first?: boolean;
|
|
51
51
|
last?: boolean;
|
|
52
52
|
readOnly?: boolean;
|
|
53
53
|
}, never>;
|
|
54
|
-
export declare const ConditionRow: import(
|
|
54
|
+
export declare const ConditionRow: import('styled-components').StyledComponent<"div", any, {
|
|
55
55
|
withError: boolean;
|
|
56
56
|
index: number;
|
|
57
57
|
onlyChild?: boolean;
|
|
58
58
|
last?: boolean;
|
|
59
59
|
}, never>;
|
|
60
|
-
export declare const AddStepButton: import(
|
|
61
|
-
export declare const ActionAttribute: import(
|
|
60
|
+
export declare const AddStepButton: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
61
|
+
export declare const ActionAttribute: import('styled-components').StyledComponent<"div", any, {}, never>;
|