@synerise/ds-condition 0.15.0 → 0.17.0

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.17.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.16.0...@synerise/ds-condition@0.17.0) (2022-05-28)
+
+
+### Features
+
+* **condition:** validation condition ([b8d9e62](https://github.com/Synerise/synerise-design/commit/b8d9e627f2d62113abc4716d4049c2e27ad49718))
+
+
+
+
+
+# [0.16.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.15.1...@synerise/ds-condition@0.16.0) (2022-05-13)
+
+
+### Bug Fixes
+
+* **condition:** disabling hover effect on nonactive condition in filter ([228f242](https://github.com/Synerise/synerise-design/commit/228f242e6ce244c73e9da93adb2c4317cd65ec91))
+* **condition:** fixes styles of dragged condition with opened dropdown ([0449e94](https://github.com/Synerise/synerise-design/commit/0449e948dc598974c81e7f857431c519c5fa2666))
+
+
+### Features
+
+* **condition:** adds defaultOpenedComponent prop ([6b6721d](https://github.com/Synerise/synerise-design/commit/6b6721dbd12be7e744100d303a5d3d7823467c3b))
+
+
+
+
+
+## [0.15.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.15.0...@synerise/ds-condition@0.15.1) (2022-04-29)
+
+**Note:** Version bump only for package @synerise/ds-condition
+
+
+
+
+
 # [0.15.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.14.4...@synerise/ds-condition@0.15.0) (2022-04-29)
 
 

package/README.md

@@ -123,6 +123,7 @@ import Condition from '@synerise/ds-condition'
 | onChangeFactorType        | Callback called when user change type of condition factor     | (stepId: React.ReactText, conditionId: React.ReactText, value: FactorType \ undefined) => void    | -       |
 | onUpdateStepName          | Callback called when user change the name of step condition   | (stepId: React.ReactText, value: string) => void                                                  | -       |
 | getPopupContainerOverride | Popup container function for child tooltips and dropdowns     | (trigger: HTMLElement | null) => HTMLElement;                                                     | -       |
+| defaultOpenedComponent    | Component which should be opened after render                 | 'subject' \ 'operator' \ 'factor' \ 'parameter' \ 'context'                                       | -       |
 
 ### ConditionStep
 

package/dist/Condition.js

@@ -53,7 +53,10 @@ var Condition = function Condition(props) {
       onChangeFactorValue = props.onChangeFactorValue,
       onUpdateStepName = props.onUpdateStepName,
       getPopupContainerOverride = props.getPopupContainerOverride,
-      showSuffix = props.showSuffix;
+      showSuffix = props.showSuffix,
+      hoverDisabled = props.hoverDisabled,
+      _props$autoOpenedComp = props.autoOpenedComponent,
+      autoOpenedComponent = _props$autoOpenedComp === void 0 ? DEFAULT_FIELD : _props$autoOpenedComp;
 
   var _useIntl = useIntl(),
       formatMessage = _useIntl.formatMessage;
@@ -79,11 +82,23 @@ var Condition = function Condition(props) {
       currentStepId = _React$useState2[0],
       setCurrentStepId = _React$useState2[1];
 
-  var _React$useState3 = React.useState(DEFAULT_FIELD),
+  var _React$useState3 = React.useState(autoOpenedComponent),
       currentField = _React$useState3[0],
       setCurrentField = _React$useState3[1];
 
+  var _React$useState4 = React.useState(''),
+      errorId = _React$useState4[0],
+      setErrorId = _React$useState4[1];
+
   var prevSteps = usePrevious(steps);
+  React.useEffect(function () {
+    if (autoOpenedComponent && steps.length && steps[0].conditions[0].operator && steps[0].conditions[0].operator.value === undefined) {
+      setCurrentStepId(steps[0].id);
+      setCurrentConditionId(steps[0].conditions[0].id);
+      setCurrentField(autoOpenedComponent);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
   React.useEffect(function () {
     var newConditionId = prevSteps && steps && steps.reduce(function (id, step) {
       var result = id;
@@ -201,13 +216,32 @@ var Condition = function Condition(props) {
       setCurrentField(SUBJECT);
     }
   }, [addStep]);
+  var returnLast = React.useCallback(function (arr) {
+    return arr[arr.length - 1];
+  }, []);
+  var testPrevValueElement = React.useCallback(function () {
+    return steps == null ? void 0 : steps.map(function (step) {
+      var _returnLast;
+
+      return !((_returnLast = returnLast(step.conditions)) != null && _returnLast.factor.value) && setErrorId(returnLast(step.conditions).id);
+    });
+  }, [steps, returnLast]);
   var handleAddCondition = React.useMemo(function () {
+    var lastStep = returnLast(steps);
+    var lastCondition = returnLast(lastStep.conditions);
+
     if (!addCondition) {
       return undefined;
     }
 
     return function (stepId) {
-      var newConditionId = addCondition ? addCondition(stepId) : undefined;
+      var newConditionId;
+
+      if (addCondition && lastCondition != null && lastCondition.factor.value || (lastStep == null ? void 0 : lastStep.conditions.length) === 0) {
+        newConditionId = addCondition(stepId);
+      }
+
+      testPrevValueElement();
 
       if (newConditionId) {
         setCurrentConditionId(newConditionId);
@@ -215,7 +249,7 @@ var Condition = function Condition(props) {
         setCurrentField(PARAMETER);
       }
     };
-  }, [addCondition]);
+  }, [addCondition, steps, testPrevValueElement, returnLast]);
   var handleClearActiveCondition = React.useCallback(function () {
     setCurrentConditionId(DEFAULT_CONDITION);
     setCurrentStepId(DEFAULT_STEP);
@@ -257,7 +291,9 @@ var Condition = function Condition(props) {
         setCurrentCondition: setCurrentConditionId,
         setCurrentStep: setCurrentStepId,
         onDeactivate: handleClearActiveCondition,
-        showSuffix: showSuffix
+        showSuffix: showSuffix,
+        hoverDisabled: hoverDisabled || currentStepId !== step.id && currentStepId !== undefined,
+        errorId: errorId
       });
     })), addStep && /*#__PURE__*/React.createElement(S.AddStepButton, null, /*#__PURE__*/React.createElement(Button, {
       type: "ghost",
@@ -266,7 +302,7 @@ var Condition = function Condition(props) {
     }, /*#__PURE__*/React.createElement(Icon, {
       component: /*#__PURE__*/React.createElement(Add3M, null)
     }), text.addStep)), renderAddStep && /*#__PURE__*/React.createElement(S.AddStepButton, null, renderAddStep()));
-  }, [steps, onChangeOrder, addStep, handleAddStep, text, renderAddStep, currentStepId, getPopupContainerOverride, draggableEnabled, selectOperator, selectParameter, selectContext, selectSubject, onUpdateStepName, duplicateStep, removeStep, minConditionsLength, maxConditionsLength, setStepConditionFactorType, setStepConditionFactorValue, currentConditionId, currentField, removeCondition, handleAddCondition, handleClearActiveCondition, showSuffix]);
+  }, [steps, onChangeOrder, addStep, handleAddStep, text, renderAddStep, currentStepId, getPopupContainerOverride, draggableEnabled, selectOperator, selectParameter, selectContext, selectSubject, onUpdateStepName, duplicateStep, removeStep, minConditionsLength, maxConditionsLength, setStepConditionFactorType, setStepConditionFactorValue, currentConditionId, currentField, removeCondition, handleAddCondition, handleClearActiveCondition, showSuffix, hoverDisabled, errorId]);
 };
 
 export default Condition;

package/dist/Condition.style.d.ts

@@ -16,6 +16,7 @@ export declare const DraggedLabel: import("styled-components").StyledComponent<"
 export declare const Step: import("styled-components").StyledComponent<"div", any, {
     active: boolean;
     showSuffix: boolean | undefined;
+    hoverDisabled?: boolean | undefined;
 }, never>;
 export declare const ConditionWrapper: import("styled-components").StyledComponent<"div", any, {
     fullWidth?: boolean | undefined;

package/dist/Condition.style.js

@@ -55,12 +55,12 @@ export var DraggedLabel = styled.span.withConfig({
 export var Step = styled.div.withConfig({
   displayName: "Conditionstyle__Step",
   componentId: "sc-1lk06p3-11"
-})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:12px 0 12px;position:relative;", " &:first-of-type{&.steps-list-ghost-element{&:after{display:none;}}}background-color:", ";&:hover{background-color:", ";", "{opacity:1;visibility:visible;}", "{opacity:1;visibility:visible;}", "{opacity:1;visibility:visible;}}&.sortable-chosen{cursor:grabbing;width:100%;opacity:1 !important;height:50px;background-color:", ";display:flex;align-items:center;justify-content:center;padding:0 20px;box-shadow:0 16px 32px 0 #23293619;&:after{display:none;}", "{align-items:center;}", "{margin:0;", "{display:none;}}", "{display:none;}", "{display:flex;}}&.steps-list-ghost-element{cursor:grabbing;width:100%;background-color:", ";border-left:2px solid ", ";border-radius:0;display:flex;align-items:center;justify-content:center;padding:0;height:50px;box-shadow:none;position:relative;&:before{content:attr(data-dropLabel);text-align:center;position:relative;color:", ";}", "{display:none;}*{display:none;}}}"], function (props) {
+})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:12px 0 12px;position:relative;", " &:first-of-type{&.steps-list-ghost-element{&:after{display:none;}}}background-color:", ";&:hover{background-color:", ";", "{opacity:1;visibility:visible;}", "{opacity:1;visibility:visible;}", "{opacity:1;visibility:visible;}}&.sortable-chosen,&.sortable-drag{cursor:grabbing;width:100%;opacity:1 !important;height:50px;background-color:", ";display:flex;align-items:center;justify-content:center;padding:0 20px;box-shadow:0 16px 32px 0 #23293619;&:after{display:none;}", "{align-items:center;}", "{margin:0;", "{display:none;}}", "{display:none;}", "{display:flex;}}&.steps-list-ghost-element{cursor:grabbing;width:100%;background-color:", ";border-left:2px solid ", ";border-radius:0;display:flex;align-items:center;justify-content:center;padding:0;height:50px;box-shadow:none;position:relative;&:before{content:attr(data-dropLabel);text-align:center;position:relative;color:", ";}", "{display:none;}*{display:none;}&:after{display:none;content:'';}}}"], function (props) {
   return Boolean(props.showSuffix) && css(["&:after{display:none;width:100%;padding:18px 0 18px 24px;bottom:-18px;content:attr(data-conditionSuffix);background-color:", ";position:relative;font-size:16px;font-weight:500;color:#3f4c5b;}&:first-child:not(:last-child){&:after{display:flex;}}&:not(:last-child){&:after{display:flex;}}"], props.theme.palette.white);
 }, function (props) {
   return props.active ? props.theme.palette['grey-050'] : 'transparent';
 }, function (props) {
-  return props.theme.palette['grey-050'];
+  return props.hoverDisabled ? 'transparent' : props.theme.palette['grey-050'];
 }, StepCruds, StepConditionCruds, DragIcon, function (props) {
   return props.theme.palette.white;
 }, StepHeader, StepName, IconWrapper, StepConditions, DraggedLabel, function (props) {

package/dist/Condition.types.d.ts

@@ -51,4 +51,6 @@ export declare type ConditionProps = {
     onUpdateStepName?: (stepId: React.ReactText, value: string) => void;
     type?: 'attribute' | 'event';
     showSuffix?: boolean;
+    hoverDisabled?: boolean;
+    autoOpenedComponent?: 'subject' | 'operator' | 'factor' | 'parameter' | 'context';
 };

package/dist/ConditionStep/ConditionRow/ConditionRow.js

@@ -33,7 +33,8 @@ export var ConditionRow = function ConditionRow(_ref) {
       hasPriority = _ref.hasPriority,
       texts = _ref.texts,
       stepType = _ref.stepType,
-      onDeactivate = _ref.onDeactivate;
+      onDeactivate = _ref.onDeactivate,
+      error = _ref.error;
   return /*#__PURE__*/React.createElement(S.ConditionRow, {
     stepType: stepType,
     style: hasPriority ? {
@@ -79,6 +80,7 @@ export var ConditionRow = function ConditionRow(_ref) {
       return setStepConditionFactorValue(stepId, conditionId, value);
     },
     factorKey: conditionId,
+    error: error,
     opened: hasPriority && stepId === currentStepId && conditionId === currentConditionId && currentField === FACTOR
   })))), removeCondition && conditionsNumber > minConditionLength && /*#__PURE__*/React.createElement(S.RemoveIconWrapper, {
     onClick: function onClick() {

package/dist/ConditionStep/ConditionRow/ConditionRow.types.d.ts

@@ -4,6 +4,7 @@ import { OperatorsProps } from '@synerise/ds-operators/dist/Operator.types';
 import { ConditionProps, ConditionTexts } from '../../Condition.types';
 export declare type ConditionRowProps = {
     index: number;
+    error?: boolean;
     hasPriority?: boolean;
     onActivate?: (fieldType: string) => void;
     onDeactivate?: () => void;

package/dist/ConditionStep/ConditionStep.js

@@ -47,7 +47,9 @@ export var ConditionStep = function ConditionStep(_ref) {
       setCurrentCondition = _ref.setCurrentCondition,
       setCurrentStep = _ref.setCurrentStep,
       onDeactivate = _ref.onDeactivate,
-      showSuffix = _ref.showSuffix;
+      showSuffix = _ref.showSuffix,
+      hoverDisabled = _ref.hoverDisabled,
+      errorId = _ref.errorId;
 
   var _useIntl = useIntl(),
       formatMessage = _useIntl.formatMessage;
@@ -166,9 +168,10 @@ export var ConditionStep = function ConditionStep(_ref) {
       setStepConditionFactorValue: setStepConditionFactorValue,
       texts: text,
       stepType: (_step$context2 = step.context) == null ? void 0 : _step$context2.type,
-      onDeactivate: onDeactivate
+      onDeactivate: onDeactivate,
+      error: errorId === condition.id && !condition.factor.value && true
     });
-  }, [step.id, step.conditions.length, step.context, hasPriority, currentConditionId, addCondition, removeCondition, minConditionsLength, maxConditionsLength, currentStepId, currentField, selectParameter, selectOperator, getPopupContainerOverride, setStepConditionFactorType, setStepConditionFactorValue, text, onDeactivate, onActivate, setCurrentField, setCurrentCondition, setCurrentStep]);
+  }, [step.id, step.conditions.length, step.context, hasPriority, currentConditionId, addCondition, removeCondition, minConditionsLength, maxConditionsLength, currentStepId, currentField, selectParameter, selectOperator, getPopupContainerOverride, setStepConditionFactorType, setStepConditionFactorValue, text, onDeactivate, onActivate, setCurrentField, setCurrentCondition, setCurrentStep, errorId]);
   return /*#__PURE__*/React.createElement(S.Step, {
     key: step.id,
     id: "condition-step-" + step.id,
@@ -178,6 +181,7 @@ export var ConditionStep = function ConditionStep(_ref) {
       zIndex: 10001
     } : undefined,
     active: step.id === currentStepId && currentField !== '',
+    hoverDisabled: hoverDisabled,
     showSuffix: showSuffix
   }, !updateStepName && /*#__PURE__*/React.createElement(S.DraggedLabel, null, ((_step$subject2 = step.subject) == null ? void 0 : (_step$subject2$select = _step$subject2.selectedItem) == null ? void 0 : _step$subject2$select.name) || ((_step$context3 = step.context) == null ? void 0 : (_step$context3$select = _step$context3.selectedItem) == null ? void 0 : _step$context3$select.name)), updateStepName && stepHeader, /*#__PURE__*/React.createElement(S.StepConditions, {
     withoutStepName: updateStepName === undefined

package/dist/ConditionStep/ConditionStep.types.d.ts

@@ -7,6 +7,7 @@ import { ConditionStep, ConditionTexts, ConditionProps } from '../Condition.type
 export declare type ConditionStepProps = {
     index: number;
     step: ConditionStep;
+    errorId?: string;
     hasPriority?: boolean;
     onStepActivate?: (stepid: React.ReactText) => void;
     getPopupContainerOverride?: ConditionProps['getPopupContainerOverride'];
@@ -33,4 +34,5 @@ export declare type ConditionStepProps = {
     setCurrentStep: (stepId: React.ReactText) => void;
     onDeactivate: () => void;
     showSuffix?: boolean;
+    hoverDisabled?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-condition",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "description": "Condition UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,10 +33,10 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-button": "^0.17.2",
-    "@synerise/ds-context-selector": "^0.12.0",
+    "@synerise/ds-context-selector": "^0.12.1",
     "@synerise/ds-core": "^0.34.0",
     "@synerise/ds-cruds": "^0.3.9",
-    "@synerise/ds-factors": "^0.13.0",
+    "@synerise/ds-factors": "^0.14.0",
     "@synerise/ds-icon": "^0.49.0",
     "@synerise/ds-inline-edit": "^0.6.12",
     "@synerise/ds-operators": "^0.9.0",
@@ -49,5 +49,5 @@
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "4a658911645846d1e329609ba9db06a7bc64962b"
+  "gitHead": "db2ce8aa0a0fd56511ded2f0e21c597fffd3d158"
 }