@synerise/ds-tooltip 0.10.55 → 0.11.2

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 (8) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/README.md +1 -0
  3. package/dist/Tooltip.example.js +1 -1
  4. package/dist/Tooltip.js +60 -27
  5. package/dist/Tooltip.styles.d.ts +3 -3
  6. package/dist/Tooltip.styles.js +2 -2
  7. package/dist/Tooltip.types.d.ts +1 -0
  8. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,38 @@
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.11.2](https://github.com/synerise/synerise-design/compare/@synerise/ds-tooltip@0.11.1...@synerise/ds-tooltip@0.11.2) (2021-11-22)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-tooltip
9
+
10
+
11
+
12
+
13
+
14
+ ## [0.11.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-tooltip@0.10.56...@synerise/ds-tooltip@0.11.1) (2021-11-09)
15
+
16
+ **Note:** Version bump only for package @synerise/ds-tooltip
17
+
18
+
19
+
20
+
21
+
22
+ # [0.11.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-tooltip@0.10.56...@synerise/ds-tooltip@0.11.0) (2021-11-09)
23
+
24
+ **Note:** Version bump only for package @synerise/ds-tooltip
25
+
26
+
27
+
28
+
29
+
30
+ ## [0.10.56](https://github.com/synerise/synerise-design/compare/@synerise/ds-tooltip@0.10.55...@synerise/ds-tooltip@0.10.56) (2021-11-05)
31
+
32
+ **Note:** Version bump only for package @synerise/ds-tooltip
33
+
34
+
35
+
36
+
37
+
6
38
  ## [0.10.55](https://github.com/synerise/synerise-design/compare/@synerise/ds-tooltip@0.10.53...@synerise/ds-tooltip@0.10.55) (2021-10-26)
7
39
 
8
40
  **Note:** Version bump only for package @synerise/ds-tooltip
package/README.md CHANGED
@@ -35,6 +35,7 @@ Tooltip UI Component
35
35
  | tutorials | steps of tutorial | Tutorials[] | - |
36
36
  | type | type of tooltip | `default` / `icon` / `simpleLarge` / `tutorial` / `avatar` / `button` | `default` |
37
37
  | visible | Whether the floating tooltip card is visible or not | boolean | `false` |
38
+ | timeToHideAfterClick | time after which tooltip disappears [ms] (value 0 inactivate this functionality) | number | 0 |
38
39
 
39
40
  ### ButtonSettings
40
41
 
package/dist/Tooltip.example.js CHANGED
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import Tooltip from './Tooltip';
3
3
 
4
4
  var TooltipExample = function TooltipExample() {
5
- return React.createElement("div", null, React.createElement(Tooltip, {
5
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tooltip, {
6
6
  title: "lool"
7
7
  }));
8
8
  };
package/dist/Tooltip.js CHANGED
@@ -1,6 +1,6 @@
1
- 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); }
1
+ var _excluded = ["type", "icon", "title", "status", "description", "tutorials", "tutorialAutoplay", "tutorialAutoplaySpeed", "timeToHideAfterClick", "offset", "children", "button"];
2
2
 
3
- function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
3
+ 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); }
4
4
 
5
5
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
6
6
 
@@ -9,8 +9,7 @@ import "./style/index.css";
9
9
  import AntdTooltip from 'antd/lib/tooltip';
10
10
  import * as React from 'react';
11
11
  import { getPopupContainer } from '@synerise/ds-utils';
12
- import Icon from '@synerise/ds-icon';
13
- import NotificationsM from '@synerise/ds-icon/dist/icons/NotificationsM';
12
+ import Icon, { NotificationsM } from '@synerise/ds-icon';
14
13
  import { Carousel } from 'antd';
15
14
  import Button from '@synerise/ds-button';
16
15
  import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
@@ -38,28 +37,36 @@ var Tooltip = function Tooltip(_ref) {
38
37
  tutorialAutoplay = _ref$tutorialAutoplay === void 0 ? false : _ref$tutorialAutoplay,
39
38
  _ref$tutorialAutoplay2 = _ref.tutorialAutoplaySpeed,
40
39
  tutorialAutoplaySpeed = _ref$tutorialAutoplay2 === void 0 ? 5000 : _ref$tutorialAutoplay2,
40
+ _ref$timeToHideAfterC = _ref.timeToHideAfterClick,
41
+ timeToHideAfterClick = _ref$timeToHideAfterC === void 0 ? 0 : _ref$timeToHideAfterC,
41
42
  _ref$offset = _ref.offset,
42
43
  offset = _ref$offset === void 0 ? 'default' : _ref$offset,
43
44
  children = _ref.children,
44
45
  button = _ref.button,
45
- props = _objectWithoutProperties(_ref, ["type", "icon", "title", "status", "description", "tutorials", "tutorialAutoplay", "tutorialAutoplaySpeed", "offset", "children", "button"]);
46
+ props = _objectWithoutPropertiesLoose(_ref, _excluded);
47
+
48
+ var _React$useState = React.useState(false),
49
+ isVisible = _React$useState[0],
50
+ setIsVisible = _React$useState[1];
51
+
52
+ var timeoutClickRef = React.useRef(null);
46
53
 
47
54
  var shouldRenderIcon = function shouldRenderIcon(tooltipType, tooltipIcon) {
48
55
  if (tooltipType !== 'icon') return null;
49
56
  if (tooltipIcon && icon) return icon;
50
- return React.createElement(Icon, {
51
- component: React.createElement(NotificationsM, null),
57
+ return /*#__PURE__*/React.createElement(Icon, {
58
+ component: /*#__PURE__*/React.createElement(NotificationsM, null),
52
59
  color: theme.palette['orange-500']
53
60
  });
54
61
  };
55
62
 
56
- var renderTooltip = React.createElement(S.TooltipComponent, {
63
+ var renderTooltip = /*#__PURE__*/React.createElement(S.TooltipComponent, {
57
64
  tooltipType: type
58
- }, React.createElement(S.TooltipStatus, {
65
+ }, /*#__PURE__*/React.createElement(S.TooltipStatus, {
59
66
  tooltipType: type
60
- }, type && shouldRenderStatus(status, type)), React.createElement(S.TooltipTitle, {
67
+ }, type && shouldRenderStatus(status, type)), /*#__PURE__*/React.createElement(S.TooltipTitle, {
61
68
  tooltipType: type
62
- }, type && shouldRenderIcon(type, icon), type !== 'largeSimple' ? title : null), React.createElement(S.TooltipDescription, null, shouldRenderDescription(description, type)));
69
+ }, type && shouldRenderIcon(type, icon), type !== 'largeSimple' ? title : null), /*#__PURE__*/React.createElement(S.TooltipDescription, null, shouldRenderDescription(description, type)));
63
70
  var renderButton = React.useMemo(function () {
64
71
  var buttonMode = function buttonMode() {
65
72
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
@@ -71,30 +78,30 @@ var Tooltip = function Tooltip(_ref) {
71
78
  return 'label';
72
79
  };
73
80
 
74
- return React.createElement(S.TooltipComponent, {
81
+ return /*#__PURE__*/React.createElement(S.TooltipComponent, {
75
82
  tooltipType: type
76
- }, React.createElement(S.TooltipContent, null, React.createElement(S.TooltipStatus, {
83
+ }, /*#__PURE__*/React.createElement(S.TooltipContent, null, /*#__PURE__*/React.createElement(S.TooltipStatus, {
77
84
  tooltipType: type
78
- }, status), React.createElement(S.TooltipTitle, {
85
+ }, status), /*#__PURE__*/React.createElement(S.TooltipTitle, {
79
86
  tooltipType: type
80
- }, title), React.createElement(S.TooltipDescription, null, description)), button && React.createElement(S.TooltipButton, null, React.createElement(Button, {
87
+ }, title), /*#__PURE__*/React.createElement(S.TooltipDescription, null, description)), button && /*#__PURE__*/React.createElement(S.TooltipButton, null, /*#__PURE__*/React.createElement(Button, {
81
88
  type: "ghost-white",
82
89
  mode: buttonMode(),
83
- onClick: button === null || button === void 0 ? void 0 : button.onClick
84
- }, button === null || button === void 0 ? void 0 : button.buttonIcon, button === null || button === void 0 ? void 0 : button.label)));
90
+ onClick: button == null ? void 0 : button.onClick
91
+ }, button == null ? void 0 : button.buttonIcon, button == null ? void 0 : button.label)));
85
92
  }, [button, type, title, description, status]);
86
- var renderTutorial = React.createElement(S.TooltipComponent, {
93
+ var renderTutorial = /*#__PURE__*/React.createElement(S.TooltipComponent, {
87
94
  tooltipType: type
88
- }, React.createElement(Carousel, {
95
+ }, /*#__PURE__*/React.createElement(Carousel, {
89
96
  autoplay: tutorialAutoplay,
90
97
  autoplaySpeed: tutorialAutoplaySpeed,
91
98
  effect: "fade"
92
99
  }, tutorials && tutorials.map(function (tutorial) {
93
- return React.createElement(S.TutorialItem, {
94
- key: "".concat(JSON.stringify(tutorial.title))
95
- }, React.createElement(S.TooltipTitle, {
100
+ return /*#__PURE__*/React.createElement(S.TutorialItem, {
101
+ key: "" + JSON.stringify(tutorial.title)
102
+ }, /*#__PURE__*/React.createElement(S.TooltipTitle, {
96
103
  tooltipType: "tutorial"
97
- }, tutorial.title), React.createElement(S.TooltipDescription, null, tutorial.description));
104
+ }, tutorial.title), /*#__PURE__*/React.createElement(S.TooltipDescription, null, tutorial.description));
98
105
  })));
99
106
  var tooltipComponent = React.useMemo(function () {
100
107
  if (type === 'tutorial') return renderTutorial;
@@ -102,10 +109,36 @@ var Tooltip = function Tooltip(_ref) {
102
109
  return renderTooltip;
103
110
  }, [type, renderTooltip, renderTutorial, renderButton]);
104
111
  var offsetClassName = React.useMemo(function () {
105
- return "ds-tooltip-offset-".concat(offset);
112
+ return "ds-tooltip-offset-" + offset;
106
113
  }, [offset]);
107
- var titleExists = Boolean(description || title || icon || (tutorials === null || tutorials === void 0 ? void 0 : tutorials.length));
108
- return titleExists ? React.createElement(AntdTooltip, _extends({
114
+ var titleExists = Boolean(description || title || icon || (tutorials == null ? void 0 : tutorials.length));
115
+ React.useEffect(function () {
116
+ return function () {
117
+ timeoutClickRef.current && clearTimeout(timeoutClickRef.current);
118
+ };
119
+ }, []);
120
+
121
+ var handleOnClickHideDelay = function handleOnClickHideDelay(visible) {
122
+ if (!visible) {
123
+ timeoutClickRef.current && clearTimeout(timeoutClickRef.current);
124
+ setIsVisible(false);
125
+ } else {
126
+ setIsVisible(true);
127
+ timeoutClickRef.current = setTimeout(function () {
128
+ setIsVisible(false);
129
+ }, timeToHideAfterClick);
130
+ }
131
+ };
132
+ /* eslint-disable-next-line react/destructuring-assignment */
133
+
134
+
135
+ var handleHideAfterClick = props.trigger === 'click' && timeToHideAfterClick && {
136
+ visible: isVisible,
137
+ onVisibleChange: function onVisibleChange(visible) {
138
+ handleOnClickHideDelay(visible);
139
+ }
140
+ };
141
+ return titleExists ? /*#__PURE__*/React.createElement(AntdTooltip, _extends({
109
142
  overlayClassName: offsetClassName,
110
143
  autoAdjustOverflow: false,
111
144
  title: tooltipComponent,
@@ -113,7 +146,7 @@ var Tooltip = function Tooltip(_ref) {
113
146
  offset: [0, 0]
114
147
  },
115
148
  getPopupContainer: getPopupContainer
116
- }, props), children) : React.createElement(React.Fragment, null, children);
149
+ }, handleHideAfterClick, props), children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
117
150
  };
118
151
 
119
152
  export default Tooltip;
package/dist/Tooltip.styles.d.ts CHANGED
@@ -1,14 +1,14 @@
1
1
  import TooltipExtendedProps, { tooltipTypes } from './Tooltip.types';
2
2
  export declare const TooltipDescription: import("styled-components").StyledComponent<"div", any, TooltipExtendedProps, never>;
3
- export declare const TooltipTitle: import("styled-components").StyledComponent<"div", any, Pick<TooltipExtendedProps, "icon" | "button" | "status" | "title" | "offset" | "description" | "tutorials" | "tutorialAutoplay" | "tutorialAutoplaySpeed"> & {
3
+ export declare const TooltipTitle: import("styled-components").StyledComponent<"div", any, Pick<TooltipExtendedProps, "icon" | "button" | "status" | "title" | "offset" | "description" | "tutorials" | "tutorialAutoplay" | "tutorialAutoplaySpeed" | "timeToHideAfterClick"> & {
4
4
  tooltipType: tooltipTypes;
5
5
  }, never>;
6
6
  export declare const TooltipButton: import("styled-components").StyledComponent<"div", any, {}, never>;
7
7
  export declare const TooltipContent: import("styled-components").StyledComponent<"div", any, {}, never>;
8
- export declare const TooltipStatus: import("styled-components").StyledComponent<"div", any, Pick<TooltipExtendedProps, "icon" | "button" | "status" | "title" | "offset" | "description" | "tutorials" | "tutorialAutoplay" | "tutorialAutoplaySpeed"> & {
8
+ export declare const TooltipStatus: import("styled-components").StyledComponent<"div", any, Pick<TooltipExtendedProps, "icon" | "button" | "status" | "title" | "offset" | "description" | "tutorials" | "tutorialAutoplay" | "tutorialAutoplaySpeed" | "timeToHideAfterClick"> & {
9
9
  tooltipType: tooltipTypes;
10
10
  }, never>;
11
- export declare const TooltipComponent: import("styled-components").StyledComponent<"div", any, Pick<TooltipExtendedProps, "icon" | "button" | "status" | "title" | "offset" | "description" | "tutorials" | "tutorialAutoplay" | "tutorialAutoplaySpeed"> & {
11
+ export declare const TooltipComponent: import("styled-components").StyledComponent<"div", any, Pick<TooltipExtendedProps, "icon" | "button" | "status" | "title" | "offset" | "description" | "tutorials" | "tutorialAutoplay" | "tutorialAutoplaySpeed" | "timeToHideAfterClick"> & {
12
12
  tooltipType: tooltipTypes;
13
13
  }, never>;
14
14
  export declare const TutorialItem: import("styled-components").StyledComponent<"div", any, TooltipExtendedProps, never>;
package/dist/Tooltip.styles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import styled, { css } from 'styled-components';
2
- import { IconContainer } from '@synerise/ds-icon/dist/Icon.styles';
2
+ import { IconContainer } from '@synerise/ds-icon';
3
3
  export var TooltipDescription = styled.div.withConfig({
4
4
  displayName: "Tooltipstyles__TooltipDescription",
5
5
  componentId: "mghjny-0"
@@ -48,7 +48,7 @@ export var TooltipComponent = styled.div.withConfig({
48
48
  }, function (props) {
49
49
  return props.theme.palette['green-600'];
50
50
  }, function (props) {
51
- return "".concat(props.theme.palette['grey-800'], "E5");
51
+ return props.theme.palette['grey-800'] + "E5";
52
52
  });
53
53
  export var TutorialItem = styled.div.withConfig({
54
54
  displayName: "Tooltipstyles__TutorialItem",
package/dist/Tooltip.types.d.ts CHANGED
@@ -15,6 +15,7 @@ export default interface TooltipExtendedProps {
15
15
  tutorials?: Tutorial[];
16
16
  tutorialAutoplay?: boolean;
17
17
  tutorialAutoplaySpeed?: number;
18
+ timeToHideAfterClick?: number;
18
19
  offset?: 'default' | 'small';
19
20
  button?: {
20
21
  label?: string | React.ReactNode;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-tooltip",
3
- "version": "0.10.55",
3
+ "version": "0.11.2",
4
4
  "description": "Tooltip UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "synerise/synerise-design",
@@ -32,8 +32,8 @@
32
32
  ],
33
33
  "types": "dist/index.d.ts",
34
34
  "dependencies": {
35
- "@synerise/ds-button": "^0.15.0",
36
- "@synerise/ds-icon": "^0.45.2"
35
+ "@synerise/ds-button": "^0.16.2",
36
+ "@synerise/ds-icon": "^0.46.2"
37
37
  },
38
38
  "peerDependencies": {
39
39
  "@synerise/ds-core": "*",
@@ -43,5 +43,5 @@
43
43
  "devDependencies": {
44
44
  "@synerise/ds-utils": "^0.19.0"
45
45
  },
46
- "gitHead": "daaf50ad62081d7ad77eb4ac65100173df77c731"
46
+ "gitHead": "2468359677783819939fb9f1ef5acc36667ecd1a"
47
47
  }