@synerise/ds-date-range-picker 0.31.3 → 0.31.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/README.md +2 -0
  3. package/dist/DateRangePicker.js +4 -2
  4. package/dist/DateRangePicker.types.d.ts +13 -3
  5. package/dist/RangePickerInput/RangePickerInput.js +2 -5
  6. package/dist/RangePickerInput/RangePickerInput.styles.js +2 -17
  7. package/package.json +19 -19
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.31.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.31.4...@synerise/ds-date-range-picker@0.31.5) (2024-11-29)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-date-range-picker
9
+
10
+
11
+
12
+
13
+
14
+ ## [0.31.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.31.3...@synerise/ds-date-range-picker@0.31.4) (2024-11-28)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * **date-range-picker:** disabled prop ([0503abf](https://github.com/Synerise/synerise-design/commit/0503abff0e55498ab1c90d0092a01973f5628e7f))
20
+
21
+
22
+
23
+
24
+
6
25
  ## [0.31.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.31.2...@synerise/ds-date-range-picker@0.31.3) (2024-11-22)
7
26
 
8
27
  **Note:** Version bump only for package @synerise/ds-date-range-picker
package/README.md CHANGED
@@ -51,6 +51,8 @@ const value = {
51
51
  | ranges | An array containing custom ranges which may be used as a short-hand | DateRange[] | [] |
52
52
  | popoverProps | Object representing props applied to the Antd Popover component | AntdPopoverProps | {} |
53
53
  | rangeUnits | Units available in relative range picker | RelativeUnits[] | ['SECONDS','MINUTES','HOURS','DAYS','WEEKS','MONTHS','YEARS'] |
54
+ | readOnly | Makes picker readonly | boolean | `false` |
55
+ | disabled | Makes picker disabled | boolean | `false` |
54
56
  | relativePast | Enable relative filter for past ranges | boolean | `false` |
55
57
  | relativeFuture | Enable relative filter for future ranges | boolean | `false` |
56
58
  | showTime | Enable user to choose particular hour | boolean | `false` |
package/dist/DateRangePicker.js CHANGED
@@ -34,6 +34,7 @@ var DateRangePicker = function DateRangePicker(props) {
34
34
  } : _props$renderPopoverT,
35
35
  _props$readOnly = props.readOnly,
36
36
  readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
37
+ disabled = props.disabled,
37
38
  getPopupContainer = props.getPopupContainer;
38
39
  var intl = useIntl();
39
40
  var selectedRange = value || defaultValue;
@@ -106,9 +107,10 @@ var DateRangePicker = function DateRangePicker(props) {
106
107
  onChange: onApplyCallback,
107
108
  active: !!inputActive
108
109
  }, rangePickerInputProps, {
109
- readOnly: readOnly
110
+ readOnly: readOnly,
111
+ disabled: disabled
110
112
  }));
111
- if (readOnly) return /*#__PURE__*/React.createElement(React.Fragment, null, triggerElement);
113
+ if (readOnly || disabled) return /*#__PURE__*/React.createElement(React.Fragment, null, triggerElement);
112
114
  return /*#__PURE__*/React.createElement(S.PickerWrapper, {
113
115
  ref: wrapperRef,
114
116
  arrowColor: arrowColor
package/dist/DateRangePicker.types.d.ts CHANGED
@@ -20,12 +20,13 @@ export type AdditionalMapper = {
20
20
  rightTop: CustomColorArrow;
21
21
  rightBottom: CustomColorArrow;
22
22
  };
23
- export interface DateRangePickerProps extends WrappedComponentProps {
23
+ export type DateRangePickerProps = WrappedComponentProps & {
24
24
  /**
25
25
  * overwrite default container's class. Default value is `ds-date-range-picker`.
26
26
  */
27
27
  containerClass?: string;
28
28
  readOnly?: boolean;
29
+ disabled?: boolean;
29
30
  disableDefaultTexts?: boolean;
30
31
  disabledDate?: (date?: Date) => boolean;
31
32
  /**
@@ -66,14 +67,23 @@ export interface DateRangePickerProps extends WrappedComponentProps {
66
67
  valueTransformer?: (value: DateRange) => DateRange;
67
68
  arrowColor?: AdditionalMapper;
68
69
  disableAbsoluteTimepickerInRelative?: boolean;
69
- rangePickerInputProps?: RangePickerInputProps;
70
+ rangePickerInputProps?: Omit<RangePickerInputProps, 'disabled' | 'readOnly'> & {
71
+ /**
72
+ * @deprecated - pass 'disabled' prop directly to DateRangePicker
73
+ */
74
+ disabled?: RangePickerInputProps['disabled'];
75
+ /**
76
+ * @deprecated - pass 'readOnly' prop directly to DateRangePicker
77
+ */
78
+ readOnly?: RangePickerInputProps['readOnly'];
79
+ };
70
80
  allowedFilterTypes?: string[];
71
81
  renderPopoverTrigger?: (...args: any) => JSX.Element;
72
82
  isTruncateMs?: boolean;
73
83
  filterValueSelectionModes?: DateLimitMode[];
74
84
  filterRangeDisplayMode?: RangeDisplayMode;
75
85
  getPopupContainer?: (node: HTMLElement) => HTMLElement;
76
- }
86
+ };
77
87
  /**
78
88
  * @deprecated use `DateRangePickerProps`
79
89
  */
package/dist/RangePickerInput/RangePickerInput.js CHANGED
@@ -51,9 +51,6 @@ var RangePickerInput = function RangePickerInput(_ref) {
51
51
  event.stopPropagation();
52
52
  onChange && onChange(undefined);
53
53
  }, [onChange]);
54
- var handleInputClick = useCallback(function (event) {
55
- onClick && onClick(event);
56
- }, [onClick]);
57
54
  var getText = useCallback(function (dateToDisplay) {
58
55
  var dateValue = new Date(dateToDisplay);
59
56
  return formatValue(dateValue, _objectSpread({}, getDefaultDataTimeOptions(showTime), {}, valueFormatOptions));
@@ -88,7 +85,7 @@ var RangePickerInput = function RangePickerInput(_ref) {
88
85
  }), /*#__PURE__*/React.createElement(S.Container, {
89
86
  tabIndex: 0,
90
87
  onFocus: onFocus,
91
- onClick: handleInputClick,
88
+ onClick: !disabled ? onClick : undefined,
92
89
  onBlur: onBlur,
93
90
  onMouseEnter: handleIconMouseEnter,
94
91
  onMouseLeave: handleIconMouseLeave
@@ -98,7 +95,7 @@ var RangePickerInput = function RangePickerInput(_ref) {
98
95
  active: !!highlight && !disabled,
99
96
  tabIndex: disabled ? -1 : 0,
100
97
  focus: active && !disabled
101
- }, placeholder, /*#__PURE__*/React.createElement(S.IconSeparator, null), !readOnly && hovered && hasValue && allowClear ? /*#__PURE__*/React.createElement(Tooltip, {
98
+ }, placeholder, /*#__PURE__*/React.createElement(S.IconSeparator, null), !readOnly && !disabled && hovered && hasValue && allowClear ? /*#__PURE__*/React.createElement(Tooltip, {
102
99
  title: texts == null ? void 0 : texts.clear
103
100
  }, /*#__PURE__*/React.createElement(S.ClearIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
104
101
  component: /*#__PURE__*/React.createElement(Close3S, null),
package/dist/RangePickerInput/RangePickerInput.styles.js CHANGED
@@ -1,4 +1,4 @@
1
- import styled, { css } from 'styled-components';
1
+ import styled from 'styled-components';
2
2
  import { InputWrapper } from '@synerise/ds-input/dist/InputMultivalue/InputMultivalue.styles';
3
3
  import { Label as DSLabel } from '@synerise/ds-input';
4
4
  export var Container = styled.div.withConfig({
@@ -19,25 +19,10 @@ export var DefaultIconWrapper = styled.div.withConfig({
19
19
  })(["margin-left:3px;&&:hover{.ds-icon > svg{fill:", ";}}"], function (props) {
20
20
  return props.theme.palette['grey-600'];
21
21
  });
22
- var disabledStyled = function disabledStyled(props) {
23
- return css(["&:hover,&,&& > *{cursor:not-allowed;}opacity:0.8;color:", ";background:", ";"], props.theme.palette["grey-600"], props.theme.palette['grey-050']);
24
- };
25
- var errorInputStyle = function errorInputStyle(props) {
26
- return "\n &&, .ant-input {\n border-color: " + props.theme.palette['red-600'] + ";\n box-shadow: inset 0 0 0 2px " + props.theme.palette['red-600'] + ";\n background: " + props.theme.palette['red-050'] + ";\n border-radius: 4px;\n }\n";
27
- };
28
- var activeStyle = function activeStyle(props) {
29
- return css(["box-shadow:inset 0 0 0 1px ", ";border-color:", ";background:", ";"], props.theme.palette['blue-600'], props.theme.palette['blue-600'], props.theme.palette['blue-050']);
30
- };
31
22
  export var RangeInputWrapper = styled(InputWrapper).withConfig({
32
23
  displayName: "RangePickerInputstyles__RangeInputWrapper",
33
24
  componentId: "sc-1b9h1ef-3"
34
- })(["display:flex;align-items:center;&{.ant-input{", " ", " ", "}padding:2px 8px 2px 12px;}"], function (props) {
35
- return !!props.active && activeStyle(props);
36
- }, function (props) {
37
- return props.error ? errorInputStyle(props) : '';
38
- }, function (props) {
39
- return !!props.disabled && disabledStyled(props);
40
- });
25
+ })(["display:flex;align-items:center;&{opacity:1;padding:2px 8px 2px 12px;}", "{opacity:0.4;}"], DefaultIconWrapper);
41
26
  export var DateWrapper = styled.div.withConfig({
42
27
  displayName: "RangePickerInputstyles__DateWrapper",
43
28
  componentId: "sc-1b9h1ef-4"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-date-range-picker",
3
- "version": "0.31.3",
3
+ "version": "0.31.5",
4
4
  "description": "Date-Range-Picker UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -35,24 +35,24 @@
35
35
  "types": "dist/index.d.ts",
36
36
  "dependencies": {
37
37
  "@date-fns/upgrade": "^1.0.3",
38
- "@synerise/ds-badge": "^0.8.19",
39
- "@synerise/ds-button": "^0.21.19",
40
- "@synerise/ds-button-group": "^0.7.23",
38
+ "@synerise/ds-badge": "^0.8.21",
39
+ "@synerise/ds-button": "^0.21.21",
40
+ "@synerise/ds-button-group": "^0.7.25",
41
41
  "@synerise/ds-data-format": "^0.6.1",
42
- "@synerise/ds-date-picker": "^0.13.2",
43
- "@synerise/ds-dropdown": "^0.18.24",
44
- "@synerise/ds-icon": "^0.67.0",
45
- "@synerise/ds-inline-edit": "^0.9.1",
46
- "@synerise/ds-input": "^0.24.14",
47
- "@synerise/ds-input-number": "^0.10.15",
48
- "@synerise/ds-list-item": "^0.4.19",
49
- "@synerise/ds-manageable-list": "^0.29.3",
50
- "@synerise/ds-scrollbar": "^0.11.19",
51
- "@synerise/ds-select": "^0.16.26",
52
- "@synerise/ds-slider": "^0.14.2",
53
- "@synerise/ds-tags": "^0.10.18",
54
- "@synerise/ds-time-picker": "^0.11.2",
55
- "@synerise/ds-tooltip": "^0.14.49",
42
+ "@synerise/ds-date-picker": "^0.13.4",
43
+ "@synerise/ds-dropdown": "^0.18.26",
44
+ "@synerise/ds-icon": "^0.68.0",
45
+ "@synerise/ds-inline-edit": "^0.9.3",
46
+ "@synerise/ds-input": "^0.24.16",
47
+ "@synerise/ds-input-number": "^0.10.17",
48
+ "@synerise/ds-list-item": "^0.5.1",
49
+ "@synerise/ds-manageable-list": "^0.29.5",
50
+ "@synerise/ds-scrollbar": "^0.11.21",
51
+ "@synerise/ds-select": "^0.16.28",
52
+ "@synerise/ds-slider": "^0.14.4",
53
+ "@synerise/ds-tags": "^0.10.20",
54
+ "@synerise/ds-time-picker": "^0.11.4",
55
+ "@synerise/ds-tooltip": "^0.14.51",
56
56
  "@synerise/ds-utils": "^0.31.2",
57
57
  "date-fns": "^2.16.1",
58
58
  "date-fns-tz": "1.1.4",
@@ -69,5 +69,5 @@
69
69
  "react-intl": ">=3.12.0 <= 6.8",
70
70
  "styled-components": "5.0.1"
71
71
  },
72
- "gitHead": "e9897e5ecb13a9c022f5ed002db76e4ab78318c5"
72
+ "gitHead": "9ebd107163650754a5f55680d62d30812d740084"
73
73
  }