@synerise/ds-date-picker 0.7.3 → 0.8.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 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-date-picker@0.7.3...@synerise/ds-date-picker@0.8.0) (2022-12-13)
+
+
+### Features
+
+* **filter:** readOnly state for conditions ([dfa4db3](https://github.com/Synerise/synerise-design/commit/dfa4db35826c0800859b7217dd1ea2f1497ac3c9))
+
+
+
+
+
 ## [0.7.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@0.7.2...@synerise/ds-date-picker@0.7.3) (2022-12-07)
 
 **Note:** Version bump only for package @synerise/ds-date-picker

package/dist/DatePicker.js

@@ -1,4 +1,4 @@
-var _excluded = ["autoFocus", "disabled", "texts", "format", "value", "onApply", "showTime", "onValueChange", "onClear", "errorText", "popoverPlacement", "prefixel", "error", "onDropdownVisibleChange", "dropdownProps", "suffixel", "hideNow"];
+var _excluded = ["autoFocus", "disabled", "texts", "format", "value", "onApply", "showTime", "onValueChange", "onClear", "errorText", "popoverPlacement", "prefixel", "error", "onDropdownVisibleChange", "dropdownProps", "suffixel", "hideNow", "readOnly"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -29,6 +29,7 @@ var DatePicker = function DatePicker(_ref) {
       dropdownProps = _ref.dropdownProps,
       suffixel = _ref.suffixel,
       hideNow = _ref.hideNow,
+      readOnly = _ref.readOnly,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var _React$useState = React.useState(autoFocus || false),
@@ -60,7 +61,26 @@ var DatePicker = function DatePicker(_ref) {
     setSelectedDate(undefined);
     onClear && onClear();
   }, [onClear]);
-  return /*#__PURE__*/React.createElement(Dropdown, _extends({
+  var trigger = /*#__PURE__*/React.createElement(PickerInput, {
+    disabled: disabled,
+    autoFocus: !disabled && autoFocus,
+    value: selectedDate,
+    showTime: showTime,
+    onClick: !readOnly ? function () {
+      setDropVisible(!dropVisible);
+    } : undefined,
+    format: format,
+    onClear: handleClear,
+    placeholder: texts.inputPlaceholder,
+    prefixel: prefixel,
+    suffixel: suffixel,
+    clearTooltip: texts.clearTooltip,
+    highlight: !!dropVisible && !disabled,
+    error: error,
+    errorText: errorText,
+    readOnly: readOnly
+  });
+  return readOnly ? trigger : /*#__PURE__*/React.createElement(Dropdown, _extends({
     overlay: /*#__PURE__*/React.createElement(S.OverlayContainer, {
       ref: ref
     }, /*#__PURE__*/React.createElement(RawDatePicker, _extends({}, rest, {
@@ -79,24 +99,7 @@ var DatePicker = function DatePicker(_ref) {
     placement: popoverPlacement,
     visible: !!dropVisible && !disabled,
     disabled: disabled
-  }, dropdownProps), /*#__PURE__*/React.createElement(PickerInput, {
-    disabled: disabled,
-    autoFocus: !disabled && autoFocus,
-    value: selectedDate,
-    showTime: showTime,
-    onClick: !disabled ? function () {
-      setDropVisible(!dropVisible);
-    } : undefined,
-    format: format,
-    onClear: handleClear,
-    placeholder: texts.inputPlaceholder,
-    prefixel: prefixel,
-    suffixel: suffixel,
-    clearTooltip: texts.clearTooltip,
-    highlight: !!dropVisible && !disabled,
-    error: error,
-    errorText: errorText
-  }));
+  }, dropdownProps), trigger);
 };
 
 export default DatePicker;

package/dist/DatePicker.types.d.ts

@@ -26,6 +26,7 @@ export declare type Props = {
     useStartOfDay?: boolean;
     useEndOfDay?: boolean;
     hideNow?: boolean;
+    readOnly?: boolean;
 };
 export declare type State = {
     mode: string;

package/dist/Elements/PickerInput/PickerInput.js

@@ -1,4 +1,4 @@
-var _excluded = ["autoFocus", "size", "disabled", "value", "format", "onChange", "showTime", "style", "placeholder", "onClear", "onClick", "clearTooltip", "highlight", "error", "errorText", "prefixel", "suffixel"];
+var _excluded = ["autoFocus", "size", "disabled", "readOnly", "value", "format", "onChange", "showTime", "style", "placeholder", "onClear", "onClick", "clearTooltip", "highlight", "error", "errorText", "prefixel", "suffixel"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -15,6 +15,7 @@ var PickerInput = function PickerInput(_ref) {
   var autoFocus = _ref.autoFocus,
       size = _ref.size,
       disabled = _ref.disabled,
+      readOnly = _ref.readOnly,
       value = _ref.value,
       dateFormat = _ref.format,
       onChange = _ref.onChange,
@@ -58,7 +59,7 @@ var PickerInput = function PickerInput(_ref) {
     onClick && onClick();
   }, [onClick]);
   var iconInput = React.useMemo(function () {
-    return (hovered || highlight) && !!value && !disabled ? /*#__PURE__*/React.createElement(S.ClearIconWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+    return (hovered || highlight) && !readOnly && !!value ? /*#__PURE__*/React.createElement(S.ClearIconWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
       title: clearTooltip
     }, /*#__PURE__*/React.createElement(Icon, {
       component: /*#__PURE__*/React.createElement(Close3S, null),
@@ -66,7 +67,7 @@ var PickerInput = function PickerInput(_ref) {
     }))) : /*#__PURE__*/React.createElement(S.DefaultIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
       component: /*#__PURE__*/React.createElement(CalendarM, null)
     }));
-  }, [hovered, value, disabled, clearTooltip, handleIconClick, highlight]);
+  }, [hovered, value, readOnly, clearTooltip, handleIconClick, highlight]);
   return /*#__PURE__*/React.createElement(S.PickerInputWrapper, {
     prefixel: !!prefixel,
     suffixel: !!suffixel,
@@ -83,7 +84,7 @@ var PickerInput = function PickerInput(_ref) {
     autoFocus: autoFocus,
     active: !!highlight,
     resetMargin: true,
-    readOnly: true,
+    readOnly: readOnly,
     type: "text",
     size: size,
     disabled: disabled,

package/dist/Elements/PickerInput/PickerInput.types.d.ts

@@ -10,6 +10,7 @@ export declare type Props = {
     style?: React.CSSProperties;
     placeholder?: string;
     disabled?: boolean;
+    readOnly?: boolean;
     onClick?: () => void;
     onClear?: () => void;
     clearTooltip?: string | React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-picker",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "description": "DatePicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -48,5 +48,5 @@
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "b4dad7d512a7658ef4cca191486f10fa2344ab3b"
+  "gitHead": "1ab09990244dd615bdfe696f365ae8075bd31762"
 }