@synerise/ds-condition 1.6.15 → 1.6.17
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/README.md +24 -4
- 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 +19 -19
|
@@ -1,256 +1,153 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import ContextSelector from
|
|
4
|
-
import Factors from
|
|
5
|
-
import { DragHandleM } from
|
|
6
|
-
import {
|
|
7
|
-
import Subject from
|
|
8
|
-
import
|
|
9
|
-
import {
|
|
10
|
-
import { useTranslations } from
|
|
11
|
-
import { AddCondition } from
|
|
12
|
-
import { ConditionRow } from
|
|
13
|
-
import { EmptyCondition } from
|
|
14
|
-
import { StepHeader } from
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
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
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
transform = _useSortable.transform,
|
|
68
|
-
transition = _useSortable.transition;
|
|
69
|
-
var zIndexStyle = hasPriority ? {
|
|
1
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useMemo } from "react";
|
|
3
|
+
import ContextSelector from "@synerise/ds-context-selector";
|
|
4
|
+
import Factors from "@synerise/ds-factors";
|
|
5
|
+
import { DragHandleM } from "@synerise/ds-icon";
|
|
6
|
+
import { useSortable, CSS } from "@synerise/ds-sortable";
|
|
7
|
+
import Subject$1 from "@synerise/ds-subject";
|
|
8
|
+
import { StepWrapper, DropLabel, Step, DraggedLabel, StepConditions, DragIcon, Subject, ErrorWrapper, ActionAttribute, ConditionRows, StepConditionCruds } from "../Condition.style.js";
|
|
9
|
+
import { SUBJECT, ACTION_ATTRIBUTE } from "../constants.js";
|
|
10
|
+
import { useTranslations } from "../hooks/useTranslations.js";
|
|
11
|
+
import { AddCondition } from "./AddCondition/AddCondition.js";
|
|
12
|
+
import { ConditionRow } from "./ConditionRow/ConditionRow.js";
|
|
13
|
+
import { EmptyCondition } from "./EmptyCondition/EmptyCondition.js";
|
|
14
|
+
import { StepHeader } from "./StepHeader/StepHeader.js";
|
|
15
|
+
const ConditionStep = ({
|
|
16
|
+
step,
|
|
17
|
+
texts,
|
|
18
|
+
index,
|
|
19
|
+
isLast,
|
|
20
|
+
isDragged,
|
|
21
|
+
addCondition,
|
|
22
|
+
removeCondition,
|
|
23
|
+
updateStepName,
|
|
24
|
+
removeStep,
|
|
25
|
+
duplicateStep,
|
|
26
|
+
minConditionsLength = 1,
|
|
27
|
+
maxConditionsLength,
|
|
28
|
+
draggableEnabled,
|
|
29
|
+
selectSubject,
|
|
30
|
+
selectContext,
|
|
31
|
+
selectActionAttribute,
|
|
32
|
+
selectOperator,
|
|
33
|
+
selectParameter,
|
|
34
|
+
setStepConditionFactorType,
|
|
35
|
+
setStepConditionFactorValue,
|
|
36
|
+
getPopupContainerOverride,
|
|
37
|
+
hasPriority,
|
|
38
|
+
currentStepId,
|
|
39
|
+
currentConditionId,
|
|
40
|
+
currentField,
|
|
41
|
+
setCurrentField,
|
|
42
|
+
setCurrentCondition,
|
|
43
|
+
setCurrentStep,
|
|
44
|
+
onDeactivate,
|
|
45
|
+
showSuffix,
|
|
46
|
+
inputProps,
|
|
47
|
+
readOnly = false,
|
|
48
|
+
singleStepCondition = false,
|
|
49
|
+
showActionAttribute,
|
|
50
|
+
contextSelectorComponent: CustomContextSelectorComponent,
|
|
51
|
+
actionAttributeParameterSelectorComponent,
|
|
52
|
+
parameterSelectorComponent,
|
|
53
|
+
factorParameterSelectorComponent,
|
|
54
|
+
showEmptyConditionPlaceholder = false,
|
|
55
|
+
factorValueExtraProps
|
|
56
|
+
}) => {
|
|
57
|
+
const {
|
|
58
|
+
attributes,
|
|
59
|
+
listeners,
|
|
60
|
+
setNodeRef,
|
|
61
|
+
transform,
|
|
62
|
+
transition
|
|
63
|
+
} = useSortable({
|
|
64
|
+
id: step.id
|
|
65
|
+
});
|
|
66
|
+
const zIndexStyle = hasPriority ? {
|
|
70
67
|
zIndex: 1001
|
|
71
68
|
} : {};
|
|
72
|
-
|
|
69
|
+
const style = {
|
|
70
|
+
...zIndexStyle,
|
|
73
71
|
transform: CSS.Transform.toString(transform),
|
|
74
|
-
transition
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
return setCurrentStep(step.id);
|
|
81
|
-
} : undefined;
|
|
82
|
-
}, [step.id, setCurrentStep]);
|
|
83
|
-
var onAddCondition = useCallback(function (stepId) {
|
|
72
|
+
transition
|
|
73
|
+
};
|
|
74
|
+
const allTexts = useTranslations(texts);
|
|
75
|
+
const withCruds = !readOnly && (duplicateStep || removeStep);
|
|
76
|
+
const onActivate = useCallback(() => setCurrentStep ? () => setCurrentStep(step.id) : void 0, [step.id, setCurrentStep]);
|
|
77
|
+
const onAddCondition = useCallback((stepId) => {
|
|
84
78
|
addCondition && addCondition(stepId);
|
|
85
|
-
|
|
86
|
-
}, [addCondition,
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
readOnly: readOnly,
|
|
98
|
-
dragHandleProps: _extends({}, attributes, listeners)
|
|
99
|
-
});
|
|
100
|
-
}, [draggableEnabled, attributes, listeners, duplicateStep, index, removeStep, step.id, step.stepName, allTexts, updateStepName, readOnly]);
|
|
101
|
-
var renderContextSelector = useCallback(function (contextData) {
|
|
102
|
-
var commonProps = _extends({}, contextData, {
|
|
103
|
-
onActivate: _onActivate,
|
|
104
|
-
onDeactivate: onDeactivate,
|
|
105
|
-
errorText: undefined,
|
|
79
|
+
onActivate && onActivate();
|
|
80
|
+
}, [addCondition, onActivate]);
|
|
81
|
+
const stepHeader = useMemo(() => /* @__PURE__ */ jsx(StepHeader, { index, stepId: step.id, stepName: step.stepName || "", texts: allTexts, updateStepName, removeStep, duplicateStep, draggableEnabled: Boolean(draggableEnabled), readOnly, dragHandleProps: {
|
|
82
|
+
...attributes,
|
|
83
|
+
...listeners
|
|
84
|
+
} }), [draggableEnabled, attributes, listeners, duplicateStep, index, removeStep, step.id, step.stepName, allTexts, updateStepName, readOnly]);
|
|
85
|
+
const renderContextSelector = useCallback((contextData) => {
|
|
86
|
+
const commonProps = {
|
|
87
|
+
...contextData,
|
|
88
|
+
onActivate,
|
|
89
|
+
onDeactivate,
|
|
90
|
+
errorText: void 0,
|
|
106
91
|
isError: !!contextData.errorText,
|
|
107
92
|
opened: step.id === currentStepId && currentField === SUBJECT,
|
|
108
|
-
onSelectItem:
|
|
109
|
-
return selectContext(value, step.id);
|
|
110
|
-
},
|
|
93
|
+
onSelectItem: (value) => selectContext(value, step.id),
|
|
111
94
|
readOnly: contextData.readOnly || readOnly
|
|
112
|
-
});
|
|
113
|
-
return CustomContextSelectorComponent ? /*#__PURE__*/React.createElement(CustomContextSelectorComponent, _extends({}, commonProps, {
|
|
114
|
-
getPopupContainer: getPopupContainerOverride
|
|
115
|
-
})) : /*#__PURE__*/React.createElement(ContextSelector, _extends({}, commonProps, {
|
|
116
|
-
getPopupContainerOverride: getPopupContainerOverride
|
|
117
|
-
}));
|
|
118
|
-
}, [CustomContextSelectorComponent, currentField, currentStepId, getPopupContainerOverride, _onActivate, onDeactivate, readOnly, selectContext, step.id]);
|
|
119
|
-
var addConditionButton = useMemo(function () {
|
|
120
|
-
var _step$subject, _step$context, _step$actionAttribute;
|
|
121
|
-
return !readOnly && addCondition && (maxConditionsLength === undefined || step.conditions.length < maxConditionsLength) && /*#__PURE__*/React.createElement(AddCondition, {
|
|
122
|
-
errorText: step.addConditionErrorText,
|
|
123
|
-
texts: allTexts,
|
|
124
|
-
stepId: step.id,
|
|
125
|
-
"data-testid": "ds-add-condition-button",
|
|
126
|
-
addCondition: onAddCondition,
|
|
127
|
-
conditionsNumber: step.conditions.length,
|
|
128
|
-
isDisabled: !((_step$subject = step.subject) != null && _step$subject.selectedItem) && !((_step$context = step.context) != null && _step$context.selectedItem) || showActionAttribute && !((_step$actionAttribute = step.actionAttribute) != null && _step$actionAttribute.value)
|
|
129
|
-
});
|
|
130
|
-
}, [addCondition, onAddCondition, maxConditionsLength, step.conditions.length, step.context, step.id, step.subject, allTexts, readOnly, step.addConditionErrorText, showActionAttribute, (_step$actionAttribute2 = step.actionAttribute) == null ? void 0 : _step$actionAttribute2.value]);
|
|
131
|
-
var renderConditionRow = useCallback(function (condition, conditionIndex) {
|
|
132
|
-
var _step$context2;
|
|
133
|
-
var handleActivation = function handleActivation(conditionId) {
|
|
134
|
-
return function (fieldType) {
|
|
135
|
-
_onActivate && _onActivate();
|
|
136
|
-
setCurrentField && setCurrentField(fieldType);
|
|
137
|
-
setCurrentCondition && setCurrentCondition(conditionId);
|
|
138
|
-
setCurrentStep && setCurrentStep(step.id);
|
|
139
|
-
};
|
|
140
95
|
};
|
|
141
|
-
return
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
removeCondition: removeCondition,
|
|
152
|
-
minConditionLength: minConditionsLength,
|
|
153
|
-
maxConditionLength: maxConditionsLength,
|
|
154
|
-
conditionsNumber: step.conditions.length,
|
|
155
|
-
onActivate: handleActivation(condition.id),
|
|
156
|
-
stepId: step.id,
|
|
157
|
-
currentStepId: currentStepId,
|
|
158
|
-
currentConditionId: currentConditionId,
|
|
159
|
-
currentField: currentField,
|
|
160
|
-
selectParameter: selectParameter,
|
|
161
|
-
selectOperator: selectOperator,
|
|
162
|
-
getPopupContainerOverride: getPopupContainerOverride || function () {
|
|
163
|
-
return document.querySelector("#condition-step-" + step.id) || document.body;
|
|
164
|
-
},
|
|
165
|
-
setStepConditionFactorType: setStepConditionFactorType,
|
|
166
|
-
setStepConditionFactorValue: setStepConditionFactorValue,
|
|
167
|
-
texts: allTexts,
|
|
168
|
-
stepType: (_step$context2 = step.context) == null ? void 0 : _step$context2.type,
|
|
169
|
-
onDeactivate: onDeactivate,
|
|
170
|
-
readOnly: readOnly,
|
|
171
|
-
parameterSelectorComponent: parameterSelectorComponent,
|
|
172
|
-
factorParameterSelectorComponent: factorParameterSelectorComponent,
|
|
173
|
-
factorValueExtraProps: factorValueExtraProps
|
|
174
|
-
});
|
|
175
|
-
}, [step.id, step.conditions.length, step.context, hasPriority, currentConditionId, addCondition, removeCondition, minConditionsLength, maxConditionsLength, currentStepId, currentField, selectParameter, selectOperator, getPopupContainerOverride, setStepConditionFactorType, setStepConditionFactorValue, allTexts, onDeactivate, _onActivate, setCurrentField, setCurrentCondition, setCurrentStep, inputProps, readOnly, parameterSelectorComponent, factorParameterSelectorComponent, factorValueExtraProps]);
|
|
176
|
-
var hasSelectedSubjectOrContext = useMemo(function () {
|
|
177
|
-
var _step$subject2, _step$context3;
|
|
178
|
-
return ((_step$subject2 = step.subject) == null ? void 0 : _step$subject2.selectedItem) || ((_step$context3 = step.context) == null ? void 0 : _step$context3.selectedItem);
|
|
179
|
-
}, [(_step$subject3 = step.subject) == null ? void 0 : _step$subject3.selectedItem, (_step$context4 = step.context) == null ? void 0 : _step$context4.selectedItem]);
|
|
180
|
-
var contextOrActionErrorText = useMemo(function () {
|
|
181
|
-
var _step$context5, _step$actionAttribute3;
|
|
182
|
-
return ((_step$context5 = step.context) == null ? void 0 : _step$context5.errorText) || showActionAttribute && ((_step$actionAttribute3 = step.actionAttribute) == null ? void 0 : _step$actionAttribute3.errorText);
|
|
183
|
-
}, [showActionAttribute, (_step$actionAttribute4 = step.actionAttribute) == null ? void 0 : _step$actionAttribute4.errorText, (_step$context6 = step.context) == null ? void 0 : _step$context6.errorText]);
|
|
184
|
-
return /*#__PURE__*/React.createElement(S.StepWrapper, {
|
|
185
|
-
style: style,
|
|
186
|
-
key: step.id,
|
|
187
|
-
ref: setNodeRef,
|
|
188
|
-
isDragged: isDragged
|
|
189
|
-
}, isDragged ? /*#__PURE__*/React.createElement(S.DropLabel, null, allTexts.dropLabel) : /*#__PURE__*/React.createElement(S.Step, {
|
|
190
|
-
id: "condition-step-" + step.id,
|
|
191
|
-
"data-conditionSuffix": allTexts.conditionSuffix,
|
|
192
|
-
active: step.id === currentStepId && currentField !== '',
|
|
193
|
-
hoverDisabled: Boolean(currentStepId) || singleStepCondition,
|
|
194
|
-
showSuffix: showSuffix && !isLast && !isDragged,
|
|
195
|
-
singleStepCondition: singleStepCondition
|
|
196
|
-
}, !updateStepName && /*#__PURE__*/React.createElement(S.DraggedLabel, null, ((_step$subject4 = step.subject) == null || (_step$subject4 = _step$subject4.selectedItem) == null ? void 0 : _step$subject4.name) || ((_step$context7 = step.context) == null || (_step$context7 = _step$context7.selectedItem) == null ? void 0 : _step$context7.name)), updateStepName && stepHeader, /*#__PURE__*/React.createElement(S.StepConditions, {
|
|
197
|
-
withCruds: Boolean(!updateStepName && withCruds)
|
|
198
|
-
}, draggableEnabled && !updateStepName && /*#__PURE__*/React.createElement(S.DragIcon, _extends({
|
|
199
|
-
className: "step-drag-handler",
|
|
200
|
-
component: /*#__PURE__*/React.createElement(DragHandleM, null)
|
|
201
|
-
}, attributes, listeners)), /*#__PURE__*/React.createElement(S.Subject, {
|
|
202
|
-
"data-testid": "condition-subject-or-context"
|
|
203
|
-
}, step.subject && /*#__PURE__*/React.createElement(Subject, _extends({}, step.subject, {
|
|
204
|
-
getPopupContainerOverride: getPopupContainerOverride,
|
|
205
|
-
onActivate: _onActivate,
|
|
206
|
-
onDeactivate: onDeactivate,
|
|
207
|
-
opened: step.id === currentStepId && currentField === SUBJECT,
|
|
208
|
-
onSelectItem: function onSelectItem(value) {
|
|
209
|
-
return selectSubject(value, step.id);
|
|
210
|
-
}
|
|
211
|
-
})), step.context && renderContextSelector(step.context), contextOrActionErrorText && /*#__PURE__*/React.createElement(S.ErrorWrapper, null, contextOrActionErrorText)), hasSelectedSubjectOrContext || !showEmptyConditionPlaceholder ? /*#__PURE__*/React.createElement(React.Fragment, null, showActionAttribute && /*#__PURE__*/React.createElement(S.ActionAttribute, {
|
|
212
|
-
style: {
|
|
213
|
-
zIndex: step.id === currentStepId && currentField === ACTION_ATTRIBUTE ? 10002 : 0
|
|
214
|
-
}
|
|
215
|
-
}, /*#__PURE__*/React.createElement(Factors, _extends({}, step.actionAttribute, {
|
|
216
|
-
customFactorValueComponents: actionAttributeParameterSelectorComponent && {
|
|
217
|
-
parameter: {
|
|
218
|
-
component: actionAttributeParameterSelectorComponent
|
|
219
|
-
},
|
|
220
|
-
contextParameter: {
|
|
221
|
-
component: actionAttributeParameterSelectorComponent
|
|
222
|
-
}
|
|
223
|
-
},
|
|
224
|
-
errorText: undefined,
|
|
225
|
-
value: (_step$actionAttribute5 = step.actionAttribute) == null ? void 0 : _step$actionAttribute5.value,
|
|
226
|
-
withoutTypeSelector: true,
|
|
227
|
-
selectedFactorType: "parameter",
|
|
228
|
-
defaultFactorType: "parameter",
|
|
229
|
-
inputProps: inputProps,
|
|
230
|
-
getPopupContainerOverride: getPopupContainerOverride,
|
|
231
|
-
onActivate: function onActivate() {
|
|
232
|
-
setCurrentCondition('');
|
|
233
|
-
_onActivate && _onActivate();
|
|
234
|
-
setCurrentField && setCurrentField(ACTION_ATTRIBUTE);
|
|
96
|
+
return CustomContextSelectorComponent ? /* @__PURE__ */ jsx(CustomContextSelectorComponent, { ...commonProps, getPopupContainer: getPopupContainerOverride }) : /* @__PURE__ */ jsx(ContextSelector, { ...commonProps, getPopupContainerOverride });
|
|
97
|
+
}, [CustomContextSelectorComponent, currentField, currentStepId, getPopupContainerOverride, onActivate, onDeactivate, readOnly, selectContext, step.id]);
|
|
98
|
+
const addConditionButton = useMemo(() => {
|
|
99
|
+
return !readOnly && addCondition && (maxConditionsLength === void 0 || step.conditions.length < maxConditionsLength) && /* @__PURE__ */ jsx(AddCondition, { errorText: step.addConditionErrorText, texts: allTexts, stepId: step.id, "data-testid": "ds-add-condition-button", addCondition: onAddCondition, conditionsNumber: step.conditions.length, isDisabled: !step.subject?.selectedItem && !step.context?.selectedItem || showActionAttribute && !step.actionAttribute?.value });
|
|
100
|
+
}, [addCondition, onAddCondition, maxConditionsLength, step.conditions.length, step.context, step.id, step.subject, allTexts, readOnly, step.addConditionErrorText, showActionAttribute, step.actionAttribute?.value]);
|
|
101
|
+
const renderConditionRow = useCallback((condition, conditionIndex) => {
|
|
102
|
+
const handleActivation = (conditionId) => (fieldType) => {
|
|
103
|
+
onActivate && onActivate();
|
|
104
|
+
setCurrentField && setCurrentField(fieldType);
|
|
105
|
+
setCurrentCondition && setCurrentCondition(conditionId);
|
|
235
106
|
setCurrentStep && setCurrentStep(step.id);
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
107
|
+
};
|
|
108
|
+
return /* @__PURE__ */ jsx(ConditionRow, { hasPriority: hasPriority && currentConditionId === condition.id, index: conditionIndex, conditionId: condition.id, addCondition, inputProps, conditionParameter: condition.parameter, conditionOperator: condition.operator, conditionFactor: condition.factor, removeCondition, minConditionLength: minConditionsLength, maxConditionLength: maxConditionsLength, conditionsNumber: step.conditions.length, onActivate: handleActivation(condition.id), stepId: step.id, currentStepId, currentConditionId, currentField, selectParameter, selectOperator, getPopupContainerOverride: getPopupContainerOverride || (() => document.querySelector(`#condition-step-${step.id}`) || document.body), setStepConditionFactorType, setStepConditionFactorValue, texts: allTexts, stepType: step.context?.type, onDeactivate, readOnly, parameterSelectorComponent, factorParameterSelectorComponent, factorValueExtraProps }, `step-${step.id}-condition-${condition.id}`);
|
|
109
|
+
}, [step.id, step.conditions.length, step.context, hasPriority, currentConditionId, addCondition, removeCondition, minConditionsLength, maxConditionsLength, currentStepId, currentField, selectParameter, selectOperator, getPopupContainerOverride, setStepConditionFactorType, setStepConditionFactorValue, allTexts, onDeactivate, onActivate, setCurrentField, setCurrentCondition, setCurrentStep, inputProps, readOnly, parameterSelectorComponent, factorParameterSelectorComponent, factorValueExtraProps]);
|
|
110
|
+
const hasSelectedSubjectOrContext = useMemo(() => {
|
|
111
|
+
return step.subject?.selectedItem || step.context?.selectedItem;
|
|
112
|
+
}, [step.subject?.selectedItem, step.context?.selectedItem]);
|
|
113
|
+
const contextOrActionErrorText = useMemo(() => {
|
|
114
|
+
return step.context?.errorText || showActionAttribute && step.actionAttribute?.errorText;
|
|
115
|
+
}, [showActionAttribute, step.actionAttribute?.errorText, step.context?.errorText]);
|
|
116
|
+
return /* @__PURE__ */ jsx(StepWrapper, { style, ref: setNodeRef, isDragged, children: isDragged ? /* @__PURE__ */ jsx(DropLabel, { children: allTexts.dropLabel }) : /* @__PURE__ */ jsxs(Step, { id: `condition-step-${step.id}`, "data-conditionSuffix": allTexts.conditionSuffix, active: step.id === currentStepId && currentField !== "", hoverDisabled: Boolean(currentStepId) || singleStepCondition, showSuffix: showSuffix && !isLast && !isDragged, singleStepCondition, children: [
|
|
117
|
+
!updateStepName && /* @__PURE__ */ jsx(DraggedLabel, { children: step.subject?.selectedItem?.name || step.context?.selectedItem?.name }),
|
|
118
|
+
updateStepName && stepHeader,
|
|
119
|
+
/* @__PURE__ */ jsxs(StepConditions, { withCruds: Boolean(!updateStepName && withCruds), children: [
|
|
120
|
+
draggableEnabled && !updateStepName && /* @__PURE__ */ jsx(DragIcon, { className: "step-drag-handler", component: /* @__PURE__ */ jsx(DragHandleM, {}), ...attributes, ...listeners }),
|
|
121
|
+
/* @__PURE__ */ jsxs(Subject, { "data-testid": "condition-subject-or-context", children: [
|
|
122
|
+
step.subject && /* @__PURE__ */ jsx(Subject$1, { ...step.subject, getPopupContainerOverride, onActivate, onDeactivate, opened: step.id === currentStepId && currentField === SUBJECT, onSelectItem: (value) => selectSubject(value, step.id) }),
|
|
123
|
+
step.context && renderContextSelector(step.context),
|
|
124
|
+
contextOrActionErrorText && /* @__PURE__ */ jsx(ErrorWrapper, { children: contextOrActionErrorText })
|
|
125
|
+
] }),
|
|
126
|
+
hasSelectedSubjectOrContext || !showEmptyConditionPlaceholder ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
127
|
+
showActionAttribute && /* @__PURE__ */ jsx(ActionAttribute, { style: {
|
|
128
|
+
zIndex: step.id === currentStepId && currentField === ACTION_ATTRIBUTE ? 10002 : 0
|
|
129
|
+
}, children: /* @__PURE__ */ jsx(Factors, { ...step.actionAttribute, customFactorValueComponents: actionAttributeParameterSelectorComponent && {
|
|
130
|
+
parameter: {
|
|
131
|
+
component: actionAttributeParameterSelectorComponent
|
|
132
|
+
},
|
|
133
|
+
contextParameter: {
|
|
134
|
+
component: actionAttributeParameterSelectorComponent
|
|
135
|
+
}
|
|
136
|
+
}, errorText: void 0, value: step.actionAttribute?.value, withoutTypeSelector: true, selectedFactorType: "parameter", defaultFactorType: "parameter", inputProps, getPopupContainerOverride, onActivate: () => {
|
|
137
|
+
setCurrentCondition("");
|
|
138
|
+
onActivate && onActivate();
|
|
139
|
+
setCurrentField && setCurrentField(ACTION_ATTRIBUTE);
|
|
140
|
+
setCurrentStep && setCurrentStep(step.id);
|
|
141
|
+
}, onDeactivate, onChangeValue: (value) => selectActionAttribute(value, step.id), opened: step.id === currentStepId && currentField === ACTION_ATTRIBUTE, readOnly, error: Boolean(step.actionAttribute?.errorText) }) }),
|
|
142
|
+
/* @__PURE__ */ jsxs(ConditionRows, { children: [
|
|
143
|
+
step.conditions.length > 0 && step.conditions.map(renderConditionRow),
|
|
144
|
+
addConditionButton
|
|
145
|
+
] }),
|
|
146
|
+
!updateStepName && withCruds && /* @__PURE__ */ jsx(StepConditionCruds, { onDuplicate: duplicateStep ? () => duplicateStep(step.id) : void 0, onDelete: removeStep ? () => removeStep(step.id) : void 0, duplicateTooltip: allTexts.duplicateTooltip, deleteTooltip: allTexts.removeTooltip })
|
|
147
|
+
] }) : /* @__PURE__ */ jsx(EmptyCondition, { label: allTexts.emptyConditionLabel })
|
|
148
|
+
] })
|
|
149
|
+
] }) }, step.id);
|
|
150
|
+
};
|
|
151
|
+
export {
|
|
152
|
+
ConditionStep
|
|
153
|
+
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
1
|
+
import { ReactText } from 'react';
|
|
2
|
+
import { ContextGroup, ContextItem } from '@synerise/ds-context-selector';
|
|
3
|
+
import { FactorType, FactorValueType } from '@synerise/ds-factors';
|
|
4
|
+
import { OperatorsGroup, OperatorsItem } from '@synerise/ds-operators';
|
|
5
|
+
import { SubjectItem } from '@synerise/ds-subject';
|
|
6
|
+
import { ConditionProps, ConditionStep, ConditionStepCrudActions } from '../Condition.types';
|
|
7
7
|
export type ConditionStepProps = Pick<ConditionProps, 'singleStepCondition' | 'showActionAttribute' | 'showEmptyConditionPlaceholder' | 'showSuffix' | 'readOnly' | 'inputProps' | 'hoverDisabled' | 'getPopupContainerOverride' | 'minConditionsLength' | 'addCondition' | 'removeCondition' | 'texts' | 'maxConditionsLength' | 'contextSelectorComponent' | 'factorParameterSelectorComponent' | 'parameterSelectorComponent' | 'actionAttributeParameterSelectorComponent' | 'factorValueExtraProps'> & {
|
|
8
8
|
index: number;
|
|
9
9
|
isLast?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { theme } from
|
|
3
|
-
import Icon, { ClickM } from
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
return
|
|
10
|
-
component: icon,
|
|
11
|
-
|
|
12
|
-
})
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { theme } from "@synerise/ds-core";
|
|
3
|
+
import Icon, { ClickM } from "@synerise/ds-icon";
|
|
4
|
+
import { EmptyConditionWrapper, LabelWrapper } from "./emptyCondition.styles.js";
|
|
5
|
+
const EmptyCondition = ({
|
|
6
|
+
icon = /* @__PURE__ */ jsx(ClickM, {}),
|
|
7
|
+
label
|
|
8
|
+
}) => {
|
|
9
|
+
return /* @__PURE__ */ jsxs(EmptyConditionWrapper, { children: [
|
|
10
|
+
/* @__PURE__ */ jsx(Icon, { component: icon, color: theme.palette["grey-500"] }),
|
|
11
|
+
/* @__PURE__ */ jsx(LabelWrapper, { size: "small", children: label })
|
|
12
|
+
] });
|
|
13
|
+
};
|
|
14
|
+
export {
|
|
15
|
+
EmptyCondition
|
|
16
|
+
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
export declare const LabelWrapper: import(
|
|
2
|
-
size?: import(
|
|
3
|
-
ellipsis?: import(
|
|
4
|
-
children?: import(
|
|
1
|
+
export declare const LabelWrapper: import('styled-components').StyledComponent<({ size, className, children, ellipsis, style, }: {
|
|
2
|
+
size?: import('@synerise/ds-typography').TextSize;
|
|
3
|
+
ellipsis?: import('@synerise/ds-typography/dist/Ellipsis').EllipsisProps;
|
|
4
|
+
children?: import('react').ReactNode;
|
|
5
5
|
className?: string;
|
|
6
|
-
style?: import(
|
|
6
|
+
style?: import('react').CSSProperties;
|
|
7
7
|
}) => React.JSX.Element, any, {}, never>;
|
|
8
|
-
export declare const EmptyConditionWrapper: import(
|
|
8
|
+
export declare const EmptyConditionWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
import styled from
|
|
2
|
-
import { Text } from
|
|
3
|
-
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
import { Text } from "@synerise/ds-typography";
|
|
3
|
+
const LabelWrapper = /* @__PURE__ */ styled(Text).withConfig({
|
|
4
4
|
displayName: "emptyConditionstyles__LabelWrapper",
|
|
5
5
|
componentId: "sc-150ylnq-0"
|
|
6
6
|
})(["margin-left:8px;"]);
|
|
7
|
-
|
|
7
|
+
const EmptyConditionWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
8
8
|
displayName: "emptyConditionstyles__EmptyConditionWrapper",
|
|
9
9
|
componentId: "sc-150ylnq-1"
|
|
10
|
-
})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;margin-left:16px;height:32px;"]);
|
|
10
|
+
})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;margin-left:16px;height:32px;"]);
|
|
11
|
+
export {
|
|
12
|
+
EmptyConditionWrapper,
|
|
13
|
+
LabelWrapper
|
|
14
|
+
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import { default as React } from 'react';
|
|
2
2
|
import type * as T from './StepHeader.types';
|
|
3
3
|
export declare const StepHeader: ({ stepName, stepId, texts, updateStepName, duplicateStep, removeStep, index, draggableEnabled, dragHandleProps, readOnly, }: T.StepHeaderProps) => React.JSX.Element;
|