@synerise/ds-operators 0.9.28 → 0.10.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.10.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-operators@0.9.29...@synerise/ds-operators@0.10.0) (2022-12-13)
+
+
+### Features
+
+* **filter:** readOnly state for conditions ([dfa4db3](https://github.com/Synerise/synerise-design/commit/dfa4db35826c0800859b7217dd1ea2f1497ac3c9))
+
+
+
+
+
+## [0.9.29](https://github.com/Synerise/synerise-design/compare/@synerise/ds-operators@0.9.28...@synerise/ds-operators@0.9.29) (2022-12-07)
+
+**Note:** Version bump only for package @synerise/ds-operators
+
+
+
+
+
 ## [0.9.28](https://github.com/Synerise/synerise-design/compare/@synerise/ds-operators@0.9.27...@synerise/ds-operators@0.9.28) (2022-11-30)
 
 **Note:** Version bump only for package @synerise/ds-operators

package/dist/Operator.types.d.ts

@@ -34,6 +34,7 @@ export declare type OperatorsProps = {
     texts?: Partial<OperatorTexts>;
     opened?: boolean;
     getPopupContainerOverride?: (trigger: HTMLElement | null) => HTMLElement;
+    readOnly?: boolean;
 };
 export declare type OperatorsDropdownProps = {
     setDropdownVisible: (show: boolean) => void;

package/dist/Operators.js

@@ -23,7 +23,9 @@ var Operators = function Operators(_ref) {
       opened = _ref.opened,
       getPopupContainerOverride = _ref.getPopupContainerOverride,
       onActivate = _ref.onActivate,
-      onDeactivate = _ref.onDeactivate;
+      onDeactivate = _ref.onDeactivate,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
 
   var _useIntl = useIntl(),
       formatMessage = _useIntl.formatMessage;
@@ -66,9 +68,27 @@ var Operators = function Operators(_ref) {
     newValue && onActivate && onActivate();
     !newValue && onDeactivate && onDeactivate();
   }, [onActivate, onDeactivate]);
-  return /*#__PURE__*/React.createElement("div", {
-    "data-popup-container": true
-  }, /*#__PURE__*/React.createElement(Dropdown, {
+  var triggerMode = React.useMemo(function () {
+    if (value) {
+      return readOnly ? 'icon-label' : 'two-icons';
+    }
+
+    return readOnly ? 'simple' : 'label-icon';
+  }, [value, readOnly]);
+  var dropdownTrigger = /*#__PURE__*/React.createElement(Tooltip, {
+    getPopupContainer: getPopupContainerOverride || getPopupContainer,
+    title: (value == null ? void 0 : value.name) || '',
+    trigger: ['hover']
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "secondary",
+    mode: triggerMode,
+    onClick: !readOnly ? handleClick : undefined
+  }, value && /*#__PURE__*/React.createElement(Icon, {
+    component: value.icon
+  }), /*#__PURE__*/React.createElement(S.Value, null, value ? value.name : text.buttonLabel), !readOnly && /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(AngleDownS, null)
+  })));
+  var content = readOnly ? dropdownTrigger : /*#__PURE__*/React.createElement(Dropdown, {
     visible: dropdownVisible,
     onVisibleChange: onDropdownVisibilityChange,
     getPopupContainer: getPopupContainerOverride || getPopupContainer,
@@ -80,19 +100,10 @@ var Operators = function Operators(_ref) {
       items: items,
       texts: text
     })
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    getPopupContainer: getPopupContainerOverride || getPopupContainer,
-    title: (value == null ? void 0 : value.name) || '',
-    trigger: ['hover']
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: "secondary",
-    mode: value ? 'two-icons' : 'label-icon',
-    onClick: handleClick
-  }, value && /*#__PURE__*/React.createElement(Icon, {
-    component: value.icon
-  }), /*#__PURE__*/React.createElement(S.Value, null, value ? value.name : text.buttonLabel), /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(AngleDownS, null)
-  })))));
+  }, dropdownTrigger);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-popup-container": true
+  }, content);
 };
 
 export default Operators;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-operators",
-  "version": "0.9.28",
+  "version": "0.10.0",
   "description": "Operators UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -32,18 +32,18 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.17.9",
-    "@synerise/ds-dropdown": "^0.17.43",
-    "@synerise/ds-icon": "^0.51.0",
-    "@synerise/ds-menu": "^0.17.0",
-    "@synerise/ds-result": "^0.6.16",
-    "@synerise/ds-scrollbar": "^0.5.2",
-    "@synerise/ds-tabs": "^0.13.39",
+    "@synerise/ds-button": "^0.17.10",
+    "@synerise/ds-dropdown": "^0.17.44",
+    "@synerise/ds-icon": "^0.52.0",
+    "@synerise/ds-menu": "^0.17.1",
+    "@synerise/ds-result": "^0.6.17",
+    "@synerise/ds-scrollbar": "^0.5.3",
+    "@synerise/ds-tabs": "^0.13.40",
     "@synerise/ds-utils": "^0.19.0"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "515b60d89b64d98fbf5d750802314640715c5f99"
+  "gitHead": "1ab09990244dd615bdfe696f365ae8075bd31762"
 }