@synerise/ds-logic 0.7.8 → 0.8.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.8.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-logic@0.7.9...@synerise/ds-logic@0.8.0) (2022-12-13)
+
+
+### Features
+
+* **filter:** readOnly state for conditions ([dfa4db3](https://github.com/Synerise/synerise-design/commit/dfa4db35826c0800859b7217dd1ea2f1497ac3c9))
+
+
+
+
+
+## [0.7.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-logic@0.7.8...@synerise/ds-logic@0.7.9) (2022-12-07)
+
+**Note:** Version bump only for package @synerise/ds-logic
+
+
+
+
+
 ## [0.7.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-logic@0.7.7...@synerise/ds-logic@0.7.8) (2022-08-31)
 
 **Note:** Version bump only for package @synerise/ds-logic

package/dist/Logic.js

@@ -8,7 +8,9 @@ var DEFAULT_OPTIONS = ['AND', 'OR'];
 var Logic = function Logic(_ref) {
   var value = _ref.value,
       options = _ref.options,
-      onChange = _ref.onChange;
+      onChange = _ref.onChange,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
   var intl = useIntl();
   var operators = React.useMemo(function () {
     if (options !== undefined && options.length) {
@@ -40,7 +42,8 @@ var Logic = function Logic(_ref) {
   }, [operators, value]);
   return /*#__PURE__*/React.createElement(S.Logic, {
     className: "ds-logic",
-    onClick: handleNextLogic
+    onClick: !readOnly ? handleNextLogic : undefined,
+    readOnly: readOnly
   }, /*#__PURE__*/React.createElement(Title, {
     withoutMargin: true,
     level: 4

package/dist/Logic.style.d.ts

@@ -1 +1,3 @@
-export declare const Logic: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Logic: import("styled-components").StyledComponent<"div", any, {
+    readOnly?: boolean | undefined;
+}, never>;

package/dist/Logic.style.js

@@ -3,14 +3,12 @@ import styled from 'styled-components'; // eslint-disable-next-line import/prefe
 export var Logic = styled.div.withConfig({
   displayName: "Logicstyle__Logic",
   componentId: "yp0pif-0"
-})(["user-select:none;position:relative;.ds-title{cursor:pointer;&:after{position:absolute;bottom:-2px;width:100%;content:'';height:1px;left:1px;background-image:linear-gradient( to right,", " 25%,", " 0% );background-position:top;background-size:4px 1px;background-repeat:repeat-x;}}&:hover{.ds-title{color:", ";&:after{background-image:linear-gradient( to right,", " 25%,", " 0% );}}}"], function (props) {
-  return props.theme.palette['grey-600'];
-}, function (props) {
-  return props.theme.palette.white;
-}, function (props) {
-  return props.theme.palette['blue-700'];
-}, function (props) {
-  return props.theme.palette['blue-700'];
-}, function (props) {
-  return props.theme.palette.white;
+})(["user-select:none;position:relative;.ds-title{cursor:pointer;", "}", ""], function (_ref) {
+  var readOnly = _ref.readOnly,
+      theme = _ref.theme;
+  return !readOnly ? "&:after {\n      position: absolute;\n      bottom: -2px;\n      width: 100%;\n      content: '';\n      height: 1px;\n      left: 1px;\n      background-image: linear-gradient(\n        to right,\n        " + theme.palette['grey-600'] + " 25%,\n        " + theme.palette.white + " 0%\n      );\n      background-position: top;\n      background-size: 4px 1px;\n      background-repeat: repeat-x;\n    }" : '';
+}, function (_ref2) {
+  var readOnly = _ref2.readOnly,
+      theme = _ref2.theme;
+  return !readOnly ? " &:hover {\n    .ds-title {\n      color: " + theme.palette['blue-700'] + ";\n      &:after {\n        background-image: linear-gradient(\n          to right,\n          " + theme.palette['blue-700'] + " 25%,\n          " + theme.palette.white + " 0%\n        );\n      }\n    }\n  }" : '';
 });

package/dist/Logic.types.d.ts

@@ -9,6 +9,7 @@ export declare type LogicProps = {
     value: LogicOperatorValue;
     options?: LogicOperator[];
     onChange: (value: LogicOperatorValue) => void;
+    readOnly?: boolean;
 };
 export declare type LogicSubComponents = {
     Matching: typeof Matching;

package/dist/Matching/Matching.js

@@ -14,7 +14,9 @@ var Matching = function Matching(_ref) {
       matching = _ref$matching === void 0 ? true : _ref$matching,
       sentence = _ref.sentence,
       onChange = _ref.onChange,
-      texts = _ref.texts;
+      texts = _ref.texts,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
   var intl = useIntl();
   var text = React.useMemo(function () {
     return _objectSpread({
@@ -33,11 +35,12 @@ var Matching = function Matching(_ref) {
   }, [onChange, matching]);
   var getToggle = React.useMemo(function () {
     return /*#__PURE__*/React.createElement(S.Toggle, {
-      onClick: handleClick,
+      onClick: !readOnly ? handleClick : undefined,
       matching: matching,
-      className: "ds-matching-toggle"
+      className: "ds-matching-toggle",
+      readOnly: readOnly
     }, matching ? text.matching : text.notMatching);
-  }, [handleClick, matching, text]);
+  }, [handleClick, matching, text, readOnly]);
   var getLabelWithToggle = React.useMemo(function () {
     if (sentence) {
       var startOfToggle = sentence == null ? void 0 : sentence.search(MATCHING_TOGGLE);

package/dist/Matching/Matching.styles.d.ts

@@ -1,4 +1,5 @@
 export declare const MatchingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Toggle: import("styled-components").StyledComponent<"span", any, {
     matching: boolean;
+    readOnly?: boolean | undefined;
 }, never>;

package/dist/Matching/Matching.styles.js

@@ -8,16 +8,16 @@ export var MatchingWrapper = styled.div.withConfig({
 export var Toggle = styled.span.withConfig({
   displayName: "Matchingstyles__Toggle",
   componentId: "sc-7z57qz-1"
-})(["cursor:pointer;font-size:16px;font-weight:500;line-height:1.25;color:", ";transition:color 0.1s ease-in-out;position:relative;display:inline-flex;&:after{position:absolute;bottom:-2px;width:100%;content:'';height:1px;left:1px;background-image:linear-gradient( to right,", " 25%,", " 0% );background-position:top;background-size:4px 1px;background-repeat:repeat-x;}&:hover{color:", ";&:after{background-image:linear-gradient( to right,", " 25%,", " 0% );}}"], function (props) {
-  return props.theme.palette["blue-600"];
-}, function (props) {
-  return props.theme.palette['blue-600'];
-}, function (props) {
-  return props.theme.palette.white;
-}, function (props) {
-  return props.theme.palette["blue-700"];
-}, function (props) {
-  return props.theme.palette['blue-700'];
-}, function (props) {
-  return props.theme.palette.white;
+})(["cursor:pointer;font-size:16px;font-weight:500;line-height:1.25;color:", ";transition:color 0.1s ease-in-out;position:relative;display:inline-flex;", " ", ""], function (_ref) {
+  var readOnly = _ref.readOnly,
+      theme = _ref.theme;
+  return theme.palette[readOnly ? "grey-800" : "blue-600"];
+}, function (_ref2) {
+  var readOnly = _ref2.readOnly,
+      theme = _ref2.theme;
+  return !readOnly ? "\n  &:after {\n    position: absolute;\n    bottom: -2px;\n    width: 100%;\n    content: '';\n    height: 1px;\n    left: 1px;\n    background-image: linear-gradient(\n      to right,\n      " + theme.palette['blue-600'] + " 25%,\n      " + theme.palette.white + " 0%\n    );\n    background-position: top;\n    background-size: 4px 1px;\n    background-repeat: repeat-x;\n  }" : '';
+}, function (_ref3) {
+  var readOnly = _ref3.readOnly,
+      theme = _ref3.theme;
+  return !readOnly ? "  &:hover {\n    color: " + theme.palette["blue-700"] + ";\n    &:after {\n      background-image: linear-gradient(\n        to right,\n        " + theme.palette['blue-700'] + " 25%,\n        " + theme.palette.white + " 0%\n      );\n    }\n  }" : '';
 });

package/dist/Matching/Matching.types.d.ts

@@ -7,4 +7,5 @@ export declare type MatchingProps = {
     sentence?: string;
     onChange: (matching: boolean) => void;
     texts?: MatchingTexts;
+    readOnly?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-logic",
-  "version": "0.7.8",
+  "version": "0.8.0",
   "description": "Logic UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -32,7 +32,7 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^0.51.0",
+    "@synerise/ds-icon": "^0.52.0",
     "@synerise/ds-typography": "^0.12.7",
     "@synerise/ds-utils": "^0.19.0"
   },
@@ -40,5 +40,5 @@
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "ef480757296035e4ba2928cd169a98458477b8d1"
+  "gitHead": "1ab09990244dd615bdfe696f365ae8075bd31762"
 }