@synerise/ds-completed-within 0.3.15 → 0.5.1

package/CHANGELOG.md

@@ -3,6 +3,43 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.5.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-completed-within@0.5.0...@synerise/ds-completed-within@0.5.1) (2022-05-13)
+
+
+### Bug Fixes
+
+* **completed-within:** fixes clearing tooltip ([b9e0520](https://github.com/Synerise/synerise-design/commit/b9e05208d75069b03e9671981ea061f0e6183c99))
+* **completed-within:** fixes maxValues in btn label ([46c73ad](https://github.com/Synerise/synerise-design/commit/46c73ad326737bd355ba949fcfeceb58b0035d3e))
+
+
+
+
+
+# [0.5.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-completed-within@0.4.0...@synerise/ds-completed-within@0.5.0) (2022-04-29)
+
+
+### Features
+
+* **completed-within:** adds maxValue prop ([cc20e27](https://github.com/Synerise/synerise-design/commit/cc20e2788e2840a9d78bd51cb43a1928fb64e958))
+* **completed-within:** adds tooltip for trigger button ([694812e](https://github.com/Synerise/synerise-design/commit/694812e9179e79c8f8fa4d12054d2704d7abcab3))
+* **completed-within:** replace || by ?? in maxValue ([d36c970](https://github.com/Synerise/synerise-design/commit/d36c970832fcc835881a15a0d013b5c5225c4c72))
+
+
+
+
+
+# [0.4.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-completed-within@0.3.15...@synerise/ds-completed-within@0.4.0) (2022-04-05)
+
+
+### Features
+
+* **completed-within:** adds placeholder nad tooltip props ([22976de](https://github.com/Synerise/synerise-design/commit/22976deac9012e1654b86ad745da7207e664ad88))
+* **completed-within:** adds placeholder prop ([6aa6e91](https://github.com/Synerise/synerise-design/commit/6aa6e91cb9fae233d6c2e1cf447fd91082c67686))
+
+
+
+
+
 ## [0.3.15](https://github.com/Synerise/synerise-design/compare/@synerise/ds-completed-within@0.3.14...@synerise/ds-completed-within@0.3.15) (2022-03-30)
 
 **Note:** Version bump only for package @synerise/ds-completed-within

package/README.md

@@ -29,12 +29,15 @@ import CompletedWithin from '@synerise/ds-completed-within'
 
 ## API
 
-| Property   | Description                                                                  | Type                         | Default                                |
-| ---        | ---                                                                          | ---                          | ---                                    |
-| text       | Custom labels and tooltips                                                   | CompletedWithinTexts         | -                                      |
-| value      | Selected value                                                               | PeriodValue                  | { value: undefined, period: 'YEARS'} |
-| onSetValue | Function called when user has closed the settings with set value, and period | (value: PeriodValue) => void | -                                      |
-| periods    | Custom list of periods                                                       | CustomPeriod[]               | -                                      |
+| Property    | Description                                                                  | Type                         | Default                              |
+| ---         | ---                                                                          | ---                          | ---                                  |
+| text        | Custom labels and tooltips                                                   | CompletedWithinTexts         | -                                    |
+| value       | Selected value                                                               | PeriodValue                  | { value: undefined, period: 'YEARS'} |
+| maxValue    | Max value                                                                    | PeriodValue[value]           | Number.MAX_SAFE_INTEGER              |
+| onSetValue  | Function called when user has closed the settings with set value, and period | (value: PeriodValue) => void | -                                    |
+| periods     | Custom list of periods                                                       | CustomPeriod[]               | -                                    |
+| placeholder | Trigger button label                                                         | string                       | -                                    |
+| tooltip     | Content of tooltip                                                           | string                       | -                                    |
 
 ### CompletedWithinTexts
 

package/dist/CompletedWithin.js

@@ -12,13 +12,15 @@ import Tooltip from '@synerise/ds-tooltip';
 import Settings from './Settings/Settings';
 import * as S from './CompleteWithin.styles';
 export var DEFAULT_PERIODS = ['SECONDS', 'MINUTES', 'HOURS', 'DAYS', 'MONTHS', 'YEARS'];
-var DEFAULT_PERIOD = 'DAYS';
 
 var CompletedWithin = function CompletedWithin(_ref) {
   var value = _ref.value,
+      maxValue = _ref.maxValue,
       onSetValue = _ref.onSetValue,
       text = _ref.text,
-      periods = _ref.periods;
+      periods = _ref.periods,
+      placeholder = _ref.placeholder,
+      tooltip = _ref.tooltip;
   var intl = useIntl();
   var texts = React.useMemo(function () {
     return _objectSpread({
@@ -60,21 +62,33 @@ var CompletedWithin = function CompletedWithin(_ref) {
       innerValue = _React$useState[0],
       setInnerValue = _React$useState[1];
 
-  var _React$useState2 = React.useState(value.period || DEFAULT_PERIOD),
+  var _React$useState2 = React.useState(value.period),
       innerPeriod = _React$useState2[0],
       setInnerPeriod = _React$useState2[1];
 
+  var _React$useState3 = React.useState(false),
+      tooltipVisible = _React$useState3[0],
+      setTooltipVisible = _React$useState3[1];
+
+  var _React$useState4 = React.useState(false),
+      settingsVisible = _React$useState4[0],
+      setSettingsVisible = _React$useState4[1];
+
   var hasValue = React.useMemo(function () {
     return value.value !== undefined && value.value > 0;
   }, [value]);
   var handleVisibleChange = React.useCallback(function (visible) {
+    setSettingsVisible(visible);
+    setTooltipVisible(false);
+
     if (!visible && innerValue && innerPeriod) {
+      var newValue = maxValue && maxValue < innerValue ? maxValue : innerValue;
       onSetValue({
-        value: Number(innerValue),
+        value: Number(newValue),
         period: innerPeriod
       });
     }
-  }, [innerPeriod, innerValue, onSetValue]);
+  }, [innerPeriod, innerValue, maxValue, onSetValue]);
   var handleClear = React.useCallback(function () {
     setInnerPeriod(undefined);
     setInnerValue(undefined);
@@ -84,24 +98,25 @@ var CompletedWithin = function CompletedWithin(_ref) {
     });
   }, [onSetValue]);
   var triggerMode = React.useMemo(function () {
-    if (!hasValue) return 'single-icon';
-    return 'icon-label';
-  }, [hasValue]);
+    if (hasValue || placeholder) return 'icon-label';
+    return 'single-icon';
+  }, [hasValue, placeholder]);
   var triggerLabel = React.useMemo(function () {
     var _getPeriods$find;
 
-    return hasValue && texts.completedLabel + " " + value.value + " " + ((_getPeriods$find = getPeriods.find(function (singlePeriod) {
+    return hasValue ? texts.completedLabel + " " + value.value + " " + ((_getPeriods$find = getPeriods.find(function (singlePeriod) {
       return singlePeriod.value === value.period;
-    })) == null ? void 0 : _getPeriods$find.label);
-  }, [getPeriods, hasValue, texts, value]);
+    })) == null ? void 0 : _getPeriods$find.label) : placeholder;
+  }, [getPeriods, hasValue, texts, value, placeholder]);
   return /*#__PURE__*/React.createElement(S.CompletedWithinWrapper, {
     withValue: hasValue
   }, /*#__PURE__*/React.createElement(Dropdown, {
     overlay: /*#__PURE__*/React.createElement(Settings, {
       value: {
-        value: Number(innerValue),
+        value: innerValue !== undefined ? Number(innerValue) : undefined,
         period: innerPeriod
       },
+      maxValue: maxValue,
       onValueChange: setInnerValue,
       onPeriodChange: setInnerPeriod,
       text: texts,
@@ -110,13 +125,19 @@ var CompletedWithin = function CompletedWithin(_ref) {
     trigger: ['click'],
     onVisibleChange: handleVisibleChange,
     placement: "topLeft"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    type: "largeSimple",
+    description: tooltip,
+    trigger: ['hover'],
+    onVisibleChange: setTooltipVisible,
+    visible: !settingsVisible && tooltipVisible
   }, /*#__PURE__*/React.createElement(S.TriggerButton, {
     className: "ds-completed-within",
     type: "tertiary",
     mode: triggerMode
   }, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(ClockM, null)
-  }), triggerLabel)), hasValue && /*#__PURE__*/React.createElement(Tooltip, {
+  }), triggerLabel))), hasValue && /*#__PURE__*/React.createElement(Tooltip, {
     title: texts.clear
   }, /*#__PURE__*/React.createElement(S.ClearButton, {
     mode: "single-icon",

package/dist/CompletedWithin.types.d.ts

@@ -17,6 +17,9 @@ export declare type PeriodValue = {
 export declare type CompletedWithinProps = {
     text?: CompletedWithinTexts;
     value: PeriodValue;
+    maxValue?: PeriodValue['value'];
     onSetValue: (value: PeriodValue) => void;
     periods?: CustomPeriod[];
+    placeholder?: string | undefined;
+    tooltip?: string;
 };

package/dist/Settings/Settings.js

@@ -9,7 +9,8 @@ var Settings = function Settings(_ref) {
       text = _ref.text,
       onPeriodChange = _ref.onPeriodChange,
       onValueChange = _ref.onValueChange,
-      periods = _ref.periods;
+      periods = _ref.periods,
+      maxValue = _ref.maxValue;
   return /*#__PURE__*/React.createElement(S.Settings, null, /*#__PURE__*/React.createElement(InputGroup, {
     size: "default",
     label: text.header,
@@ -20,7 +21,8 @@ var Settings = function Settings(_ref) {
     raw: true,
     value: value.value,
     onChange: onValueChange,
-    min: 0
+    min: 0,
+    max: maxValue != null ? maxValue : Number.MAX_SAFE_INTEGER
   }), /*#__PURE__*/React.createElement(Select, {
     size: 'default',
     value: value.period,

package/dist/Settings/Settings.types.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import InputNumber from '@synerise/ds-input-number';
-import { CompletedWithinProps, CompletedWithinTexts, CustomPeriod, Period } from '../CompletedWithin.types';
+import { CompletedWithinProps, CompletedWithinTexts, CustomPeriod, Period, PeriodValue } from '../CompletedWithin.types';
 declare type InputProps = React.ComponentProps<typeof InputNumber>;
 export declare type SettingsProps = Omit<CompletedWithinProps, 'onClear' | 'onSetValue' | 'periods' | 'text'> & {
     onValueChange: InputProps['onChange'];
     onPeriodChange: (period: Period) => void;
     periods: CustomPeriod[];
     text: CompletedWithinTexts;
+    maxValue: PeriodValue['value'];
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-completed-within",
-  "version": "0.3.15",
+  "version": "0.5.1",
   "description": "CompletedWithin UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,7 +33,7 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-button": "^0.17.2",
-    "@synerise/ds-dropdown": "^0.17.15",
+    "@synerise/ds-dropdown": "^0.17.17",
     "@synerise/ds-icon": "^0.49.0",
     "@synerise/ds-input-number": "^0.3.45",
     "@synerise/ds-select": "^0.14.11",
@@ -43,5 +43,5 @@
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "93d7c60a7fe73188d715fd52b9701f81fcb4e60a"
+  "gitHead": "25e5737ebe9d4319de963b369bc281651872887c"
 }