Condition

Condition UI Component

Installation

npm i @synerise/ds-condition
or
yarn add @synerise/ds-condition

Usage

import Condition from '@synerise/ds-condition'
<Condition
texts={{
stepNamePlaceholder: 'Step name',
removeConditionRowTooltip: 'Remove',
addConditionRowButton: 'and where',
}}
addCondition={() => {}}
removeCondition={(stepId, conditionId) => {}}
updateStepName={(stepId, name) => {}}
steps={
[{
id: 1,
stepName: 'Step #1',
subject: {
onSelectItem: (item) => setStepSubject(step.id, item),
type: 'event',
placeholder: 'Choose event',
showPreview: false,
iconPlaceholder: <NotificationsM />,
selectedItem: undefined,
items: SUBJECT_ITEMS,
texts: SUBJECT_TEXTS,
},
context: {
texts: CONTEXT_TEXTS,
onSelectItem: item => setStepSubject(step.id, item),
selectedItem: step.subject.selectedItem,
items: CONTEXT_ITEMS,
groups: CONTEXT_GROUPS,
}
conditions: [{
id: 0,
parameter: {
availableFactorTypes: ['parameter'],
selectedFactorType: 'parameter',
defaultFactorType: 'parameter',
setSelectedFactorType: () => {},
onChangeValue: (value) => {},
value: undefined,
parameters: {
buttonLabel: 'Parameter',
buttonIcon: <VarTypeStringM />,
groups: PARAMETER_GROUPS,
items: PARAMETER_ITEMS
},
withoutTypeSelector: true,
texts: FACTORS_TEXTS,
},
operator: {
onChange: (value) => {},
value: value,
items: OPERATORS_ITEMS,
groups: OPERATORS_GROUPS,
texts: OPERATORS_TEXTS,
},
factor: {
selectedFactorType: 'text',
defaultFactorType: 'text',
setSelectedFactorType: (factorType) => {},
onChangeValue: (value) => {},
textType: 'default',
value: condition.factor.value,
formulaEditor: <div>Formula editor</div>,
parameters: {
buttonLabel: 'Parameter',
buttonIcon: <VarTypeStringM />,
groups: PARAMETER_GROUPS,
items: PARAMETER_ITEMS
},
texts: FACTORS_TEXTS,
},
}))
}))
} />

Demo

API

PropertyDescriptionTypeDefault
addConditionCallback called when user adds new row of conditions(stepId: React.ReactText) => void-
removeConditionCallback called when user clicks on remove row of condtions(stepId: React.ReactText, conditionRowId: React.ReactText) => void-
stepsArray contains all steps of conditionConditionStep[]-
textsTranslations objectTexts-
updateStepNameCallback called when user change the name of step(stepId: React.ReactText, value: string) => void-
addStepCallback called when user clicks on add step button() => void-
duplicateStepCallback called when user clicks on duplicate step button(stepId: React.ReactText) => void-
removeStepCallback called when user clicks on remove step button(stepId: React.ReactText) => void-
onChangeOrderCallback called when user change order of steps(order: ConditionStep[]) => void-

ConditionStep

PropertyDescriptionTypeDefault
conditionsRows of conditionsStepConditions[]-
idId of condition stepReact.ReactText-
stepNameThe name of stepstring-
subjectSubject optionsSubjectProps-
contextContextSelector optionsContextSelectorProps-

StepConditions

PropertyDescriptionTypeDefault
factor?Factors selector optionsFactorsProps-
idId condition rowReact.ReactText-
operator?Operators selector optionsOperatorsProps-
parameter?Parameter selector optionsFactorsProps-

Texts

PropertyDescriptionTypeDefault
addConditionRowButtonLabel of add conditions row buttonstring-
removeConditionRowTooltipTooltip on remove conditions row buttonstring-
stepNamePlaceholderPlaceholder of step namestring-
addStepLabel of add step buttonstring-
duplicateTooltipTooltip on duplicate step buttonstring-
moveTooltipTooltip on move step buttonstring-
removeTooltipTooltip on remove step buttonstring-
dropLabelLabel on drop zonestring-