@synerise/ds-completed-within 0.3.14 → 0.5.0

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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
+
+
+
+
+
 ## [0.3.14](https://github.com/Synerise/synerise-design/compare/@synerise/ds-completed-within@0.3.13...@synerise/ds-completed-within@0.3.14) (2022-03-24)
 
 **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,10 +62,14 @@ 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 hasValue = React.useMemo(function () {
     return value.value !== undefined && value.value > 0;
   }, [value]);
@@ -74,6 +80,10 @@ var CompletedWithin = function CompletedWithin(_ref) {
         period: innerPeriod
       });
     }
+
+    if (visible) {
+      setTooltipVisible(false);
+    }
   }, [innerPeriod, innerValue, onSetValue]);
   var handleClear = React.useCallback(function () {
     setInnerPeriod(undefined);
@@ -84,24 +94,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 +121,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: 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.14",
+  "version": "0.5.0",
   "description": "CompletedWithin UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -32,16 +32,16 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.17.1",
-    "@synerise/ds-dropdown": "^0.17.14",
-    "@synerise/ds-icon": "^0.48.0",
+    "@synerise/ds-button": "^0.17.2",
+    "@synerise/ds-dropdown": "^0.17.17",
+    "@synerise/ds-icon": "^0.49.0",
     "@synerise/ds-input-number": "^0.3.45",
-    "@synerise/ds-select": "^0.14.10",
-    "@synerise/ds-tooltip": "^0.11.8"
+    "@synerise/ds-select": "^0.14.11",
+    "@synerise/ds-tooltip": "^0.11.9"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "8d3f48dbf8e3eddd679dee9f6d667d03b5f25ed0"
+  "gitHead": "4a658911645846d1e329609ba9db06a7bc64962b"
 }