@synerise/ds-factors 0.15.15 → 0.16.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.16.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@0.15.16...@synerise/ds-factors@0.16.0) (2022-12-13)
+
+
+### Features
+
+* **filter:** readOnly state for conditions ([dfa4db3](https://github.com/Synerise/synerise-design/commit/dfa4db35826c0800859b7217dd1ea2f1497ac3c9))
+
+
+
+
+
+## [0.15.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@0.15.15...@synerise/ds-factors@0.15.16) (2022-12-08)
+
+**Note:** Version bump only for package @synerise/ds-factors
+
+
+
+
+
 ## [0.15.15](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@0.15.14...@synerise/ds-factors@0.15.15) (2022-12-07)
 
 **Note:** Version bump only for package @synerise/ds-factors

package/dist/FactorTypeSelector/FactorTypeSelector.js

@@ -14,7 +14,8 @@ var FactorTypeSelector = function FactorTypeSelector(_ref) {
       unavailableFactorTypes = _ref.unavailableFactorTypes,
       availableFactorTypes = _ref.availableFactorTypes,
       selectedFactor = _ref.selectedFactor,
-      texts = _ref.texts;
+      texts = _ref.texts,
+      readOnly = _ref.readOnly;
   var typesList = React.useMemo(function () {
     var list = availableFactorTypes || ALL_FACTOR_TYPES;
 
@@ -41,18 +42,21 @@ var FactorTypeSelector = function FactorTypeSelector(_ref) {
       }, texts[type]);
     });
   }, [availableFactorTypes, unavailableFactorTypes, selectedFactorType, texts, setSelectedFactorType]);
+  var trigger = /*#__PURE__*/React.createElement(S.TriggerButton, {
+    mode: "single-icon",
+    className: "ds-factors-type-selector"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    component: selectedFactor.icon
+  }));
+  if (readOnly) return trigger;
   return /*#__PURE__*/React.createElement(Tooltip, {
     title: texts[selectedFactorType],
     trigger: ['hover']
   }, /*#__PURE__*/React.createElement(Dropdown, {
     overlay: /*#__PURE__*/React.createElement(S.FactorTypeList, null, typesList),
-    trigger: ['click']
-  }, /*#__PURE__*/React.createElement(S.TriggerButton, {
-    mode: "single-icon",
-    className: "ds-factors-type-selector"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: selectedFactor.icon
-  }))));
+    trigger: ['click'],
+    disabled: readOnly
+  }, trigger));
 };
 
 export default FactorTypeSelector;

package/dist/FactorValue/Date/Date.js

@@ -7,7 +7,9 @@ var DateInput = function DateInput(_ref) {
       texts = _ref.texts,
       opened = _ref.opened,
       onDeactivate = _ref.onDeactivate,
-      error = _ref.error;
+      error = _ref.error,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
   var changeHandler = React.useCallback(function (date) {
     onChange(date);
   }, [onChange]);
@@ -35,7 +37,8 @@ var DateInput = function DateInput(_ref) {
     disabledSeconds: [],
     autoFocus: opened,
     onDropdownVisibleChange: handleVisibleChange,
-    error: error
+    error: error,
+    readOnly: readOnly
   });
 };
 

package/dist/FactorValue/DateRange/DateRange.js

@@ -6,7 +6,9 @@ var DateRangeInput = function DateRangeInput(_ref) {
   var value = _ref.value,
       onChange = _ref.onChange,
       texts = _ref.texts,
-      onDeactivate = _ref.onDeactivate;
+      onDeactivate = _ref.onDeactivate,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
   var intl = useIntl();
   var changeHandler = React.useCallback(function (date) {
     onChange(date);
@@ -30,7 +32,11 @@ var DateRangeInput = function DateRangeInput(_ref) {
     popoverProps: {
       placement: 'bottomLeft',
       onVisibleChange: handleVisibleChange
-    }
+    },
+    rangePickerInputProps: {
+      readOnly: readOnly
+    },
+    readOnly: readOnly
   });
 };
 

package/dist/FactorValue/DynamicKey/DynamicKey.js

@@ -17,7 +17,9 @@ var DynamicKey = function DynamicKey(_ref) {
       texts = _ref.texts,
       opened = _ref.opened,
       onDeactivate = _ref.onDeactivate,
-      error = _ref.error;
+      error = _ref.error,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
 
   var _React$useState = React.useState({
     key: value.key,
@@ -49,23 +51,26 @@ var DynamicKey = function DynamicKey(_ref) {
   React.useEffect(function () {
     setLocalValue(value);
   }, [value]);
-  return /*#__PURE__*/React.createElement(S.DynamicKey, {
-    withoutTypeSelector: withoutTypeSelector
-  }, /*#__PURE__*/React.createElement(RawInput, {
+  var trigger = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RawInput, {
     placeholder: texts.dynamicKey.keyPlaceholder,
     value: localValue.key,
     name: "key",
     onChange: handleChange,
     autoFocus: opened,
     onBlur: onDeactivate,
-    error: localError || error
+    error: localError || error,
+    readOnly: readOnly
   }), /*#__PURE__*/React.createElement(RawInput, {
     placeholder: texts.dynamicKey.valuePlaceholder,
     value: localValue.value,
     name: "value",
     onChange: handleChange,
-    error: localError || error
+    error: localError || error,
+    readOnly: readOnly
   }));
+  return readOnly ? trigger : /*#__PURE__*/React.createElement(S.DynamicKey, {
+    withoutTypeSelector: withoutTypeSelector
+  }, trigger);
 };
 
 export default DynamicKey;

package/dist/FactorValue/FactorValue.js

@@ -22,7 +22,9 @@ var FactorValue = function FactorValue(_ref) {
       onActivate = _ref.onActivate,
       onDeactivate = _ref.onDeactivate,
       error = _ref.error,
-      inputProps = _ref.inputProps;
+      inputProps = _ref.inputProps,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
   var inputType = React.useMemo(function () {
     var InputComponent = selectedFactor.input;
     return /*#__PURE__*/React.createElement(InputComponent, {
@@ -45,9 +47,10 @@ var FactorValue = function FactorValue(_ref) {
       getPopupContainerOverride: getPopupContainerOverride,
       onActivate: onActivate,
       onDeactivate: onDeactivate,
-      error: error
+      error: error,
+      readOnly: readOnly
     });
-  }, [selectedFactor.input, selectedFactor.name, factorKey, value, texts, onChangeValue, textType, selectedFactorType, autocompleteText, parameters, withoutTypeSelector, formulaEditor, opened, loading, onParamsClick, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate, error, inputProps]);
+  }, [selectedFactor.input, selectedFactor.name, factorKey, value, texts, onChangeValue, textType, selectedFactorType, autocompleteText, parameters, withoutTypeSelector, formulaEditor, opened, loading, onParamsClick, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate, error, inputProps, readOnly]);
   return /*#__PURE__*/React.createElement(S.FactorInput, {
     withoutTypeSelector: withoutTypeSelector
   }, inputType);

package/dist/FactorValue/Formula/Formula.js

@@ -11,15 +11,21 @@ var FormulaInput = function FormulaInput(_ref) {
       _ref$withoutTypeSelec = _ref.withoutTypeSelector,
       withoutTypeSelector = _ref$withoutTypeSelec === void 0 ? false : _ref$withoutTypeSelec,
       texts = _ref.texts,
-      formulaEditor = _ref.formulaEditor;
+      formulaEditor = _ref.formulaEditor,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
 
   var _React$useState = React.useState(false),
       openFormulaModal = _React$useState[0],
       setOpenFormulaModal = _React$useState[1];
 
-  var mode = React.useMemo(function () {
-    return value ? 'two-icons' : 'label-icon';
-  }, [value]);
+  var triggerMode = React.useMemo(function () {
+    if (value) {
+      return readOnly ? 'label-icon' : 'two-icons';
+    }
+
+    return readOnly ? 'simple' : 'label-icon';
+  }, [value, readOnly]);
   var activeIcon = React.useMemo(function () {
     return value ? /*#__PURE__*/React.createElement(Badge, {
       flag: true,
@@ -33,14 +39,17 @@ var FormulaInput = function FormulaInput(_ref) {
     setOpenFormulaModal(false);
     onChange(val);
   }, [onChange]);
+
+  var handleClick = function handleClick() {
+    return setOpenFormulaModal(true);
+  };
+
   return /*#__PURE__*/React.createElement(S.FormulaButton, {
     withoutTypeSelector: withoutTypeSelector
   }, /*#__PURE__*/React.createElement(Button, {
     type: "secondary",
-    mode: mode,
-    onClick: function onClick() {
-      return setOpenFormulaModal(true);
-    }
+    mode: triggerMode,
+    onClick: !readOnly ? handleClick : undefined
   }, activeIcon, label, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(EditS, null)
   })), /*#__PURE__*/React.createElement(FormulaModal, {

package/dist/FactorValue/Number/NumberInput.js

@@ -7,7 +7,9 @@ var NumberInput = function NumberInput(_ref) {
       onChange = _ref.onChange,
       texts = _ref.texts,
       opened = _ref.opened,
-      onDeactivate = _ref.onDeactivate;
+      onDeactivate = _ref.onDeactivate,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
 
   var _React$useState = React.useState(value),
       localValue = _React$useState[0],
@@ -28,7 +30,8 @@ var NumberInput = function NumberInput(_ref) {
     placeholder: texts.valuePlaceholder,
     value: localValue,
     onChange: handleChange,
-    onBlur: onDeactivate
+    onBlur: onDeactivate,
+    readOnly: readOnly
   });
 };
 

package/dist/FactorValue/Parameter/Parameter.js

@@ -24,7 +24,9 @@ var ParameterInput = function ParameterInput(_ref) {
       preventAutoloadData = _ref.preventAutoloadData,
       getPopupContainerOverride = _ref.getPopupContainerOverride,
       onActivate = _ref.onActivate,
-      onDeactivate = _ref.onDeactivate;
+      onDeactivate = _ref.onDeactivate,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
   // @ts-ignore
@@ -78,33 +80,28 @@ var ParameterInput = function ParameterInput(_ref) {
       setDropdownVisible(false);
     }
   }, [onActivate, onDeactivate]);
-  return /*#__PURE__*/React.createElement("div", {
-    "data-popup-container": true
-  }, /*#__PURE__*/React.createElement(Dropdown, {
-    visible: dropdownVisible,
-    getPopupContainer: getPopupContainerOverride || getPopupContainer,
-    onVisibleChange: onDropdownVisibilityChange,
-    overlay: /*#__PURE__*/React.createElement(ParameterDropdown, _extends({
-      setDropdownVisible: setDropdownVisible,
-      setSelected: handleChange
-    }, restParameters, {
-      texts: texts,
-      loading: loading
-    }))
-  }, /*#__PURE__*/React.createElement(Menu, {
+  var triggerMode = React.useMemo(function () {
+    if (value) {
+      return readOnly ? 'icon-label' : 'two-icons';
+    }
+
+    return readOnly ? 'simple' : 'label-icon';
+  }, [value, readOnly]);
+  var triggerButton = /*#__PURE__*/React.createElement(Button, {
+    type: "secondary",
+    mode: triggerMode,
+    onClick: !readOnly ? handleOnClick : undefined
+  }, /*#__PURE__*/React.createElement(Icon, {
+    component: parameterIcon
+  }), /*#__PURE__*/React.createElement(Value, null, parameterName), !readOnly && /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(AngleDownS, null)
+  }));
+  var trigger = /*#__PURE__*/React.createElement(Menu, {
     asDropdownMenu: true,
     showTextTooltip: true,
     asInfoCardContainer: true,
     dataSource: [{
-      text: /*#__PURE__*/React.createElement(Button, {
-        type: "secondary",
-        mode: "two-icons",
-        onClick: handleOnClick
-      }, /*#__PURE__*/React.createElement(Icon, {
-        component: parameterIcon
-      }), /*#__PURE__*/React.createElement(Value, null, parameterName), /*#__PURE__*/React.createElement(Icon, {
-        component: /*#__PURE__*/React.createElement(AngleDownS, null)
-      })),
+      text: triggerButton,
       hoverTooltipProps: {
         popupPlacement: 'top',
         getPopupContainer: getPopupContainerOverride || getPopupContainer
@@ -122,7 +119,21 @@ var ParameterInput = function ParameterInput(_ref) {
         });
       } : undefined
     }]
-  })));
+  });
+  return readOnly ? trigger : /*#__PURE__*/React.createElement("div", {
+    "data-popup-container": true
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    visible: dropdownVisible,
+    getPopupContainer: getPopupContainerOverride || getPopupContainer,
+    onVisibleChange: onDropdownVisibilityChange,
+    overlay: /*#__PURE__*/React.createElement(ParameterDropdown, _extends({
+      setDropdownVisible: setDropdownVisible,
+      setSelected: handleChange
+    }, restParameters, {
+      texts: texts,
+      loading: loading
+    }))
+  }, trigger));
 };
 
 export default ParameterInput;

package/dist/FactorValue/Text/Text.js

@@ -22,7 +22,9 @@ var TextInput = function TextInput(_ref) {
       opened = _ref.opened,
       onDeactivate = _ref.onDeactivate,
       error = _ref.error,
-      inputProps = _ref.inputProps;
+      inputProps = _ref.inputProps,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
 
   var _React$useState = React.useState(false),
       openExpanseEditor = _React$useState[0],
@@ -84,7 +86,8 @@ var TextInput = function TextInput(_ref) {
         onBlur: onDeactivate,
         error: localError || error,
         handleInputRef: setInputRef,
-        defaultOpen: true
+        defaultOpen: true,
+        readOnly: readOnly
       }), autocompleteOptions == null ? void 0 : autocompleteOptions.map(function (option) {
         return /*#__PURE__*/React.createElement(Autocomplete.Option, {
           key: option,
@@ -100,7 +103,8 @@ var TextInput = function TextInput(_ref) {
         value: localValue,
         onChange: handleChange,
         onBlur: onDeactivate,
-        error: localError || error
+        error: localError || error,
+        readOnly: readOnly
       })));
     }
 
@@ -111,14 +115,15 @@ var TextInput = function TextInput(_ref) {
         onClick: function onClick() {
           return setOpenExpanseEditor(true);
         }
-      }, /*#__PURE__*/React.createElement(Icon, {
+      }, !readOnly && /*#__PURE__*/React.createElement(Icon, {
         component: /*#__PURE__*/React.createElement(FullScreenM, null),
         color: theme.palette['grey-600']
       })),
       value: localValue,
       onChange: handleChange,
       onBlur: onDeactivate,
-      error: localError || error
+      error: localError || error,
+      readOnly: readOnly
     })));
   };
 

package/dist/Factors.js

@@ -94,7 +94,8 @@ var Factors = function Factors(_ref) {
       onDeactivate = _ref.onDeactivate,
       getPopupContainerOverride = _ref.getPopupContainerOverride,
       error = _ref.error,
-      inputProps = _ref.inputProps;
+      inputProps = _ref.inputProps,
+      readOnly = _ref.readOnly;
 
   var _useIntl = useIntl(),
       formatMessage = _useIntl.formatMessage;
@@ -436,7 +437,8 @@ var Factors = function Factors(_ref) {
     setSelectedFactorType: setSelectedFactorType,
     selectedFactor: selectedFactor,
     availableFactorTypes: availableFactorTypes,
-    unavailableFactorTypes: unavailableFactorTypes
+    unavailableFactorTypes: unavailableFactorTypes,
+    readOnly: readOnly
   }), /*#__PURE__*/React.createElement(FactorValue, {
     value: value,
     onChangeValue: onChangeValue,
@@ -457,7 +459,8 @@ var Factors = function Factors(_ref) {
     getPopupContainerOverride: getPopupContainerOverride,
     onActivate: onActivate,
     onDeactivate: onDeactivate,
-    error: error
+    error: error,
+    readOnly: readOnly
   }));
 };
 

package/dist/Factors.types.d.ts

@@ -106,19 +106,20 @@ export declare type FactorsProps = {
     preventAutoloadData?: boolean;
     withCustomFactor?: React.ReactNode;
     inputProps?: InputProps;
+    readOnly?: boolean;
 };
-export declare type FactorTypeSelectorProps = Pick<FactorsProps, 'unavailableFactorTypes' | 'availableFactorTypes' | 'selectedFactorType'> & {
+export declare type FactorTypeSelectorProps = Pick<FactorsProps, 'unavailableFactorTypes' | 'availableFactorTypes' | 'selectedFactorType' | 'readOnly'> & {
     setSelectedFactorType: (factor: FactorType) => void;
     selectedFactor: SelectedFactorType;
     texts: {
         [k in DefinedFactorTypes]: string;
     };
 };
-export declare type FactorValueProps = Pick<FactorsProps, 'onChangeValue' | 'onParamsClick' | 'value' | 'selectedFactorType' | 'parameters' | 'autocompleteText' | 'withoutTypeSelector' | 'textType' | 'formulaEditor' | 'opened' | 'loading' | 'factorKey' | 'preventAutoloadData' | 'getPopupContainerOverride' | 'onActivate' | 'onDeactivate' | 'error' | 'inputProps'> & {
+export declare type FactorValueProps = Pick<FactorsProps, 'onChangeValue' | 'onParamsClick' | 'value' | 'selectedFactorType' | 'parameters' | 'autocompleteText' | 'withoutTypeSelector' | 'textType' | 'formulaEditor' | 'opened' | 'loading' | 'factorKey' | 'preventAutoloadData' | 'getPopupContainerOverride' | 'onActivate' | 'onDeactivate' | 'error' | 'inputProps' | 'readOnly'> & {
     texts: FactorsTexts;
     selectedFactor: SelectedFactorType;
 };
-export declare type InputProps = Pick<FactorsProps, 'value' | 'parameters' | 'autocompleteText' | 'withoutTypeSelector' | 'textType' | 'opened' | 'getPopupContainerOverride' | 'onActivate' | 'onDeactivate' | 'error' | 'inputProps' | 'autoResize'> & {
+export declare type InputProps = Pick<FactorsProps, 'value' | 'parameters' | 'autocompleteText' | 'withoutTypeSelector' | 'textType' | 'opened' | 'getPopupContainerOverride' | 'onActivate' | 'onDeactivate' | 'error' | 'inputProps' | 'autoResize' | 'readOnly'> & {
     texts: FactorsTexts;
     onChange: (value: FactorValueType) => void;
     factorType: FactorType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-factors",
-  "version": "0.15.15",
+  "version": "0.16.0",
   "description": "Factors UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,11 +35,11 @@
     "@synerise/ds-autocomplete": "^0.4.30",
     "@synerise/ds-badge": "^0.6.19",
     "@synerise/ds-button": "^0.17.10",
-    "@synerise/ds-date-picker": "^0.7.3",
-    "@synerise/ds-date-range-picker": "^0.18.4",
+    "@synerise/ds-date-picker": "^0.8.0",
+    "@synerise/ds-date-range-picker": "^0.19.0",
     "@synerise/ds-dropdown": "^0.17.44",
     "@synerise/ds-icon": "^0.52.0",
-    "@synerise/ds-information-card": "^0.1.32",
+    "@synerise/ds-information-card": "^0.1.34",
     "@synerise/ds-inline-edit": "^0.6.41",
     "@synerise/ds-input": "^0.18.27",
     "@synerise/ds-input-number": "^0.6.26",
@@ -56,5 +56,5 @@
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "b4dad7d512a7658ef4cca191486f10fa2344ab3b"
+  "gitHead": "1ab09990244dd615bdfe696f365ae8075bd31762"
 }