@mrshmllw/smores-react 3.1.10 → 3.1.12
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.
- package/README.md +12 -0
- package/dist/Table/storyUtils.d.ts +6 -0
- package/dist/Table/storyUtils.js +4 -1
- package/dist/Table/storyUtils.js.map +1 -1
- package/dist/Tooltip/Tooltip.d.ts +0 -1
- package/dist/Tooltip/Tooltip.js +95 -84
- package/dist/Tooltip/Tooltip.js.map +1 -1
- package/dist/Tooltip/Tooltip.stories.js +8 -14
- package/dist/Tooltip/Tooltip.stories.js.map +1 -1
- package/dist/utils/debounce.d.ts +7 -0
- package/dist/utils/debounce.js +19 -0
- package/dist/utils/debounce.js.map +1 -0
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -118,30 +118,42 @@ yalc remove --all
|
|
|
118
118
|
|
|
119
119
|
* [Accordion](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Accordion)
|
|
120
120
|
* [ActionDropdown](https://github.com/marshmallow-insurance/smores-react/tree/master/src/ActionDropdown)
|
|
121
|
+
* [Banner](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Banner)
|
|
121
122
|
* [Box](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Box)
|
|
123
|
+
* [BrandCard](https://github.com/marshmallow-insurance/smores-react/tree/master/src/BrandCard)
|
|
122
124
|
* [Button](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Button)
|
|
123
125
|
* [Card](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Card)
|
|
124
126
|
* [CheckBox](https://github.com/marshmallow-insurance/smores-react/tree/master/src/CheckBox)
|
|
125
127
|
* [CheckBoxGroup](https://github.com/marshmallow-insurance/smores-react/tree/master/src/CheckBoxGroup)
|
|
128
|
+
* [Chip](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Chip)
|
|
126
129
|
* [Datepicker](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Datepicker)
|
|
130
|
+
* [Divider](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Divider)
|
|
127
131
|
* [Dropdown](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Dropdown)
|
|
128
132
|
* [Emoji](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Emoji)
|
|
129
133
|
* [Icon](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Icon)
|
|
134
|
+
* [IconStrict](https://github.com/marshmallow-insurance/smores-react/tree/master/src/IconStrict)
|
|
130
135
|
* [IconWrapper](https://github.com/marshmallow-insurance/smores-react/tree/master/src/IconWrapper)
|
|
131
136
|
* [LabelledText](https://github.com/marshmallow-insurance/smores-react/tree/master/src/LabelledText)
|
|
137
|
+
* [Link](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Link)
|
|
132
138
|
* [Loader](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Loader)
|
|
139
|
+
* [Logo](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Logo)
|
|
133
140
|
* [Message](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Message) (deprecated - use Support Message instead)
|
|
134
141
|
* [Modal](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Modal)
|
|
135
142
|
* [NumberInput](https://github.com/marshmallow-insurance/smores-react/tree/master/src/NumberInput)
|
|
143
|
+
* [Pagination](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Pagination)
|
|
136
144
|
* [RadioButton](https://github.com/marshmallow-insurance/smores-react/tree/master/src/RadioButton)
|
|
145
|
+
* [RadioGroup](https://github.com/marshmallow-insurance/smores-react/tree/master/src/RadioGroup)
|
|
137
146
|
* [Row](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Row)
|
|
138
147
|
* [SearchInput](https://github.com/marshmallow-insurance/smores-react/tree/master/src/SearchInput)
|
|
148
|
+
* [Snackbar](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Snackbar)
|
|
139
149
|
* [SupportMessage](https://github.com/marshmallow-insurance/smores-react/tree/master/src/SupportMessage)
|
|
150
|
+
* [Table](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Table)
|
|
140
151
|
* [Tag](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Tag)
|
|
141
152
|
* [Text](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Text)
|
|
142
153
|
* [Textarea](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Textarea)
|
|
143
154
|
* [TextInput](https://github.com/marshmallow-insurance/smores-react/tree/master/src/TextInput)
|
|
144
155
|
* [Toggle](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Toggle)
|
|
156
|
+
* [Tooltip](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Tooltip)
|
|
145
157
|
|
|
146
158
|
## Usage
|
|
147
159
|
|
|
@@ -40,6 +40,12 @@ export declare const columns: ({
|
|
|
40
40
|
minWidth: string;
|
|
41
41
|
maxWidth: string;
|
|
42
42
|
truncateContent?: undefined;
|
|
43
|
+
} | {
|
|
44
|
+
name: string;
|
|
45
|
+
cell: (row: DataRow) => JSX.Element;
|
|
46
|
+
minWidth: string;
|
|
47
|
+
maxWidth?: undefined;
|
|
48
|
+
truncateContent?: undefined;
|
|
43
49
|
} | {
|
|
44
50
|
name: string;
|
|
45
51
|
cell: () => string;
|
package/dist/Table/storyUtils.js
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { Box } from '../Box';
|
|
2
3
|
import { Button } from '../Button';
|
|
3
4
|
import { Icon } from '../Icon';
|
|
4
5
|
import { Tag } from '../Tag';
|
|
5
6
|
import { Text } from '../Text';
|
|
7
|
+
import { Tooltip } from '../Tooltip';
|
|
6
8
|
const exampleOnClick = (element) => alert(`onClick from ${element} is working`);
|
|
7
9
|
export const data = [
|
|
8
10
|
{
|
|
@@ -147,7 +149,8 @@ export const columns = [
|
|
|
147
149
|
},
|
|
148
150
|
{
|
|
149
151
|
name: 'e.g1',
|
|
150
|
-
cell: () =>
|
|
152
|
+
cell: (row) => (React.createElement(Box, { flex: true, justifyContent: "flex-start" },
|
|
153
|
+
React.createElement(Tooltip, { content: React.createElement(Text, { color: "cream" }, row.ability), position: "top", fallbackStyle: true, underline: true }, "what ability?"))),
|
|
151
154
|
minWidth: '150px',
|
|
152
155
|
},
|
|
153
156
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"storyUtils.js","sourceRoot":"","sources":["../../src/Table/storyUtils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"storyUtils.js","sourceRoot":"","sources":["../../src/Table/storyUtils.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,7 +9,6 @@ export interface TooltipProps {
|
|
|
9
9
|
title?: string;
|
|
10
10
|
underline?: boolean;
|
|
11
11
|
fallbackStyle?: boolean;
|
|
12
|
-
defaultArrowPosition?: ArrowPosition;
|
|
13
12
|
}
|
|
14
13
|
export declare const Tooltip: FC<TooltipProps>;
|
|
15
14
|
export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
|
package/dist/Tooltip/Tooltip.js
CHANGED
|
@@ -1,35 +1,24 @@
|
|
|
1
1
|
import React, { useCallback, useEffect, useRef, useState, } from 'react';
|
|
2
|
+
import { createPortal } from 'react-dom';
|
|
2
3
|
import styled, { css } from 'styled-components';
|
|
4
|
+
import { v4 as uuidv4 } from 'uuid';
|
|
3
5
|
import { Text } from '../Text';
|
|
4
6
|
import { useEventListener } from '../hooks';
|
|
5
7
|
import { theme } from '../theme';
|
|
6
|
-
|
|
7
|
-
|
|
8
|
+
import { debounce } from '../utils/debounce';
|
|
9
|
+
export const Tooltip = ({ children, title, content, position = 'top', maxWidth = 500, underline = false, fallbackStyle = false, }) => {
|
|
8
10
|
const documentRef = useRef(document);
|
|
11
|
+
const tipContainer = useRef(null);
|
|
9
12
|
const [showTip, setShowTip] = useState(false);
|
|
10
|
-
const [tooltipPosition, setTooltipPosition] = useState(
|
|
11
|
-
const [
|
|
13
|
+
const [tooltipPosition, setTooltipPosition] = useState(position);
|
|
14
|
+
const [childEl, setChildEl] = useState(null);
|
|
15
|
+
const [tooltipCoords, setTooltipCoords] = useState({ top: 0, left: 0 });
|
|
16
|
+
const randomId = uuidv4();
|
|
12
17
|
const checkInbounds = (element) => element.top >= 0 &&
|
|
13
18
|
element.left >= 0 &&
|
|
14
19
|
element.bottom <= window.innerHeight &&
|
|
15
20
|
element.right <= window.innerWidth;
|
|
16
21
|
const handleTipViewport = useCallback(() => {
|
|
17
|
-
const shouldChangeXAxis = tooltipPosition === 'left' || tooltipPosition === 'right';
|
|
18
|
-
const shouldChangeYAxis = tooltipPosition === 'top' || tooltipPosition === 'bottom';
|
|
19
|
-
const handleArrowAxisChange = () => {
|
|
20
|
-
if (arrowPosition === 'left') {
|
|
21
|
-
setArrowPosition('top');
|
|
22
|
-
}
|
|
23
|
-
if (arrowPosition === 'right') {
|
|
24
|
-
setArrowPosition('bottom');
|
|
25
|
-
}
|
|
26
|
-
if (arrowPosition === 'top') {
|
|
27
|
-
setArrowPosition('left');
|
|
28
|
-
}
|
|
29
|
-
if (arrowPosition === 'bottom') {
|
|
30
|
-
setArrowPosition('right');
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
22
|
const dimensions = tipContainer.current?.getBoundingClientRect();
|
|
34
23
|
if (!dimensions)
|
|
35
24
|
return;
|
|
@@ -37,55 +26,120 @@ export const Tooltip = ({ children, title, content, maxWidth = 500, underline =
|
|
|
37
26
|
return;
|
|
38
27
|
// If in bounds but not defaulted to top; default
|
|
39
28
|
if (dimensions.top >= 0 && tooltipPosition !== 'top') {
|
|
40
|
-
setArrowPosition(defaultArrowPosition);
|
|
41
29
|
setTooltipPosition('top');
|
|
42
30
|
return;
|
|
43
31
|
}
|
|
44
32
|
// if top out of bounds
|
|
45
33
|
if (dimensions.top < 0) {
|
|
46
|
-
shouldChangeXAxis && handleArrowAxisChange();
|
|
47
34
|
setTooltipPosition('bottom');
|
|
48
35
|
return;
|
|
49
36
|
}
|
|
50
37
|
// if right out of bounds
|
|
51
38
|
if (dimensions.right > window.innerWidth) {
|
|
52
|
-
shouldChangeYAxis && handleArrowAxisChange();
|
|
53
39
|
setTooltipPosition('left');
|
|
54
40
|
return;
|
|
55
41
|
}
|
|
56
42
|
// if left out of bounds
|
|
57
43
|
if (dimensions.left < 0) {
|
|
58
|
-
shouldChangeYAxis && handleArrowAxisChange();
|
|
59
44
|
setTooltipPosition('right');
|
|
60
45
|
return;
|
|
61
46
|
}
|
|
62
47
|
// If bottom out of bounds
|
|
63
48
|
if (dimensions.bottom > window.innerHeight) {
|
|
64
|
-
shouldChangeXAxis && handleArrowAxisChange();
|
|
65
49
|
setTooltipPosition('top');
|
|
66
50
|
return;
|
|
67
51
|
}
|
|
68
|
-
}, [tipContainer, tooltipPosition
|
|
52
|
+
}, [tipContainer, tooltipPosition]);
|
|
69
53
|
useEffect(() => {
|
|
70
54
|
handleTipViewport();
|
|
55
|
+
setChildEl(document.getElementById(randomId));
|
|
71
56
|
}, []);
|
|
57
|
+
useEffect(() => {
|
|
58
|
+
setTooltipPosition(position);
|
|
59
|
+
}, [position]);
|
|
60
|
+
const arrowSize = 18;
|
|
61
|
+
const calculateTooltipPosition = () => {
|
|
62
|
+
if (!childEl)
|
|
63
|
+
return { top: 0, left: 0 };
|
|
64
|
+
if (!tipContainer.current)
|
|
65
|
+
return { top: 0, left: 0 };
|
|
66
|
+
const childPosition = childEl.getBoundingClientRect();
|
|
67
|
+
const tipDimensions = tipContainer.current.getBoundingClientRect();
|
|
68
|
+
let top = 0;
|
|
69
|
+
let left = 0;
|
|
70
|
+
switch (tooltipPosition) {
|
|
71
|
+
case 'top':
|
|
72
|
+
top =
|
|
73
|
+
childPosition.top + window.scrollY - tipDimensions.height - arrowSize;
|
|
74
|
+
left =
|
|
75
|
+
childPosition.left +
|
|
76
|
+
window.scrollX +
|
|
77
|
+
childPosition.width / 2 -
|
|
78
|
+
tipDimensions.width / 2;
|
|
79
|
+
break;
|
|
80
|
+
case 'bottom':
|
|
81
|
+
top = childPosition.bottom + window.scrollY + arrowSize;
|
|
82
|
+
left =
|
|
83
|
+
childPosition.left +
|
|
84
|
+
window.scrollX +
|
|
85
|
+
childPosition.width / 2 -
|
|
86
|
+
tipDimensions.width / 2;
|
|
87
|
+
break;
|
|
88
|
+
case 'left':
|
|
89
|
+
left =
|
|
90
|
+
childPosition.left + window.scrollX - tipDimensions.width - arrowSize;
|
|
91
|
+
top =
|
|
92
|
+
childPosition.top +
|
|
93
|
+
window.scrollY +
|
|
94
|
+
childPosition.height / 2 -
|
|
95
|
+
tipDimensions.height / 2;
|
|
96
|
+
break;
|
|
97
|
+
case 'right':
|
|
98
|
+
left = childPosition.right + window.scrollX + arrowSize;
|
|
99
|
+
top =
|
|
100
|
+
childPosition.top +
|
|
101
|
+
window.scrollY +
|
|
102
|
+
childPosition.height / 2 -
|
|
103
|
+
tipDimensions.height / 2;
|
|
104
|
+
break;
|
|
105
|
+
default:
|
|
106
|
+
break;
|
|
107
|
+
}
|
|
108
|
+
return { top, left };
|
|
109
|
+
};
|
|
110
|
+
useEffect(() => {
|
|
111
|
+
if (childEl) {
|
|
112
|
+
setTooltipCoords(calculateTooltipPosition());
|
|
113
|
+
}
|
|
114
|
+
}, [
|
|
115
|
+
position,
|
|
116
|
+
window.scrollY,
|
|
117
|
+
tipContainer.current,
|
|
118
|
+
childEl,
|
|
119
|
+
childEl?.getBoundingClientRect().top,
|
|
120
|
+
childEl?.getBoundingClientRect().left,
|
|
121
|
+
]);
|
|
72
122
|
useEventListener({
|
|
73
123
|
eventName: 'resize',
|
|
74
|
-
callback: handleTipViewport,
|
|
124
|
+
callback: debounce(handleTipViewport, 100),
|
|
75
125
|
ref: documentRef,
|
|
76
126
|
});
|
|
77
127
|
useEventListener({
|
|
78
128
|
eventName: 'scroll',
|
|
79
|
-
callback: handleTipViewport,
|
|
129
|
+
callback: debounce(handleTipViewport, 100),
|
|
80
130
|
ref: documentRef,
|
|
81
131
|
});
|
|
82
132
|
return (React.createElement(Container, null,
|
|
83
|
-
React.createElement(
|
|
84
|
-
|
|
85
|
-
React.createElement(Tip, { className: "tooltip", showTip: showTip, position:
|
|
133
|
+
React.createElement(UnderlinedText, { id: randomId, underline: underline, cursor: "pointer", onMouseEnter: () => setShowTip(true), onMouseLeave: () => setShowTip(false) }, children),
|
|
134
|
+
childEl &&
|
|
135
|
+
createPortal(React.createElement(Tip, { className: "tooltip", showTip: showTip, position: position, arrowPosition: tooltipPosition, ref: tipContainer, maxWidth: maxWidth, fallbackStyle: fallbackStyle, style: {
|
|
136
|
+
position: 'absolute',
|
|
137
|
+
top: `${tooltipCoords.top}px`,
|
|
138
|
+
left: `${tooltipCoords.left}px`,
|
|
139
|
+
} },
|
|
86
140
|
title && (React.createElement(Text, { tag: "h5", typo: "desc-medium", color: fallbackStyle ? 'cream' : 'liquorice' }, title)),
|
|
87
141
|
(typeof content === 'string' && (React.createElement(Text, { typo: "desc-light", color: fallbackStyle ? 'cream' : 'liquorice' }, content))) ||
|
|
88
|
-
content))));
|
|
142
|
+
content), document.body)));
|
|
89
143
|
};
|
|
90
144
|
export const Container = styled.div `
|
|
91
145
|
display: flex;
|
|
@@ -96,39 +150,15 @@ export const Container = styled.div `
|
|
|
96
150
|
opacity: 1;
|
|
97
151
|
}
|
|
98
152
|
`;
|
|
99
|
-
const
|
|
153
|
+
const UnderlinedText = styled(Text) `
|
|
100
154
|
${({ underline }) => underline &&
|
|
101
155
|
css `
|
|
102
156
|
border-bottom: 1px dashed ${theme.colors.marshmallowPink};
|
|
103
157
|
`}
|
|
104
158
|
`;
|
|
105
|
-
const arrowPaddingSize = 18;
|
|
106
159
|
const arrowInset = 26;
|
|
107
|
-
const arrowCenterPosition = 'calc(50% -
|
|
108
|
-
const
|
|
109
|
-
const calculateTipPosition = `calc(50% - ${arrowPaddingSize / 2 + arrowInset}px);`;
|
|
110
|
-
const handleTipPosition = (arrowPosition) => {
|
|
111
|
-
switch (arrowPosition) {
|
|
112
|
-
case 'left':
|
|
113
|
-
return css `
|
|
114
|
-
left: ${calculateTipPosition};
|
|
115
|
-
`;
|
|
116
|
-
case 'right':
|
|
117
|
-
return css `
|
|
118
|
-
right: ${calculateTipPosition};
|
|
119
|
-
`;
|
|
120
|
-
case 'top':
|
|
121
|
-
return css `
|
|
122
|
-
top: ${calculateTipPosition};
|
|
123
|
-
`;
|
|
124
|
-
case 'bottom':
|
|
125
|
-
return css `
|
|
126
|
-
bottom: ${calculateTipPosition};
|
|
127
|
-
`;
|
|
128
|
-
default:
|
|
129
|
-
return 'calc(100% + 18px)';
|
|
130
|
-
}
|
|
131
|
-
};
|
|
160
|
+
const arrowCenterPosition = 'calc(50% - 6px)';
|
|
161
|
+
const arrowVerticalCenter = 'calc(50% - 12px)';
|
|
132
162
|
const handleHorizontalArrowPosition = (arrowPosition) => {
|
|
133
163
|
switch (arrowPosition) {
|
|
134
164
|
case 'left':
|
|
@@ -157,14 +187,11 @@ const handleVerticalArrowPosition = (arrowPosition) => {
|
|
|
157
187
|
`;
|
|
158
188
|
default:
|
|
159
189
|
return css `
|
|
160
|
-
top: ${
|
|
190
|
+
top: ${arrowVerticalCenter};
|
|
161
191
|
`;
|
|
162
192
|
}
|
|
163
193
|
};
|
|
164
194
|
const top = css `
|
|
165
|
-
bottom: ${arrowPadding};
|
|
166
|
-
${({ arrowPosition }) => handleTipPosition(arrowPosition)};
|
|
167
|
-
|
|
168
195
|
&:before {
|
|
169
196
|
bottom: -15px;
|
|
170
197
|
transform: rotate(-90deg);
|
|
@@ -172,9 +199,6 @@ const top = css `
|
|
|
172
199
|
}
|
|
173
200
|
`;
|
|
174
201
|
const bottom = css `
|
|
175
|
-
top: ${arrowPadding};
|
|
176
|
-
${({ arrowPosition }) => handleTipPosition(arrowPosition)};
|
|
177
|
-
|
|
178
202
|
&:before {
|
|
179
203
|
top: -15px;
|
|
180
204
|
transform: rotate(90deg);
|
|
@@ -182,9 +206,6 @@ const bottom = css `
|
|
|
182
206
|
}
|
|
183
207
|
`;
|
|
184
208
|
const left = css `
|
|
185
|
-
right: ${arrowPadding};
|
|
186
|
-
|
|
187
|
-
${({ arrowPosition }) => handleTipPosition(arrowPosition)};
|
|
188
209
|
&:before {
|
|
189
210
|
right: -11px;
|
|
190
211
|
transform: rotate(180deg);
|
|
@@ -192,18 +213,11 @@ const left = css `
|
|
|
192
213
|
}
|
|
193
214
|
`;
|
|
194
215
|
const right = css `
|
|
195
|
-
left: ${arrowPadding};
|
|
196
|
-
|
|
197
|
-
${({ arrowPosition }) => handleTipPosition(arrowPosition)};
|
|
198
216
|
&:before {
|
|
199
|
-
${({ arrowPosition }) => handleVerticalArrowPosition(arrowPosition)}
|
|
200
217
|
left: -11px;
|
|
218
|
+
${({ arrowPosition }) => handleVerticalArrowPosition(arrowPosition)}
|
|
201
219
|
}
|
|
202
220
|
`;
|
|
203
|
-
const TipWrapper = styled.div `
|
|
204
|
-
position: fixed;
|
|
205
|
-
pointer-events: none;
|
|
206
|
-
`;
|
|
207
221
|
export const Tip = styled.div `
|
|
208
222
|
position: absolute;
|
|
209
223
|
margin: auto;
|
|
@@ -217,17 +231,14 @@ export const Tip = styled.div `
|
|
|
217
231
|
cursor: default;
|
|
218
232
|
z-index: 10;
|
|
219
233
|
|
|
220
|
-
left: 50%;
|
|
221
|
-
transform: translateX(-50%);
|
|
222
|
-
|
|
223
234
|
// this is the trick that will make sure the content can go up to maxWidth
|
|
224
235
|
margin-right: ${({ maxWidth }) => maxWidth && -maxWidth / 2 + 'px'};
|
|
225
236
|
max-width: ${({ maxWidth }) => maxWidth && maxWidth + 'px'};
|
|
226
237
|
|
|
227
|
-
${({
|
|
228
|
-
${({
|
|
229
|
-
${({
|
|
230
|
-
${({
|
|
238
|
+
${({ arrowPosition }) => arrowPosition === 'top' && top}
|
|
239
|
+
${({ arrowPosition }) => arrowPosition === 'bottom' && bottom}
|
|
240
|
+
${({ arrowPosition }) => arrowPosition === 'left' && left}
|
|
241
|
+
${({ arrowPosition }) => arrowPosition === 'right' && right}
|
|
231
242
|
|
|
232
243
|
&:before {
|
|
233
244
|
content: '';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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"}
|
|
@@ -11,15 +11,17 @@ export default {
|
|
|
11
11
|
const Template = (props) => (React.createElement(Box, { px: { custom: 250 }, py: { custom: 150 }, flex: true },
|
|
12
12
|
React.createElement(Tooltip, { ...props },
|
|
13
13
|
React.createElement(Box, null, "Harry Hill"))));
|
|
14
|
-
const OverflowHiddenTemplate = (props) => (React.createElement(OverflowHiddenBox,
|
|
14
|
+
const OverflowHiddenTemplate = (props) => (React.createElement(OverflowHiddenBox, { my: "64px" },
|
|
15
15
|
React.createElement(Tooltip, { ...props },
|
|
16
16
|
React.createElement(Box, null, "Harry Hill")),
|
|
17
|
-
React.createElement(ClippedText, { mt: "12px" }, "I am some super long text, that should be clipped")
|
|
17
|
+
React.createElement(ClippedText, { mt: "12px" }, "I am some super long text, that should be clipped"),
|
|
18
|
+
React.createElement(Box, { my: "64px" },
|
|
19
|
+
React.createElement(Tooltip, { ...props },
|
|
20
|
+
React.createElement(Box, null, "Harry Hill")))));
|
|
18
21
|
const OverflowHiddenBox = styled(Box) `
|
|
19
|
-
height:
|
|
22
|
+
height: 100px;
|
|
20
23
|
width: 200px;
|
|
21
|
-
|
|
22
|
-
overflow: hidden;
|
|
24
|
+
overflow: scroll;
|
|
23
25
|
background: ${theme.colors.blueberry};
|
|
24
26
|
`;
|
|
25
27
|
const ClippedText = styled(Text) `
|
|
@@ -29,45 +31,37 @@ export const Default = Template.bind({});
|
|
|
29
31
|
Default.args = {
|
|
30
32
|
title: 'Harry Hill',
|
|
31
33
|
content: 'Tooltip content, this is some text, maybe even more text if you feel like it.',
|
|
32
|
-
position: 'top',
|
|
33
34
|
size: 'small',
|
|
34
35
|
underline: true,
|
|
35
|
-
arrowPosition: 'left',
|
|
36
36
|
fallbackStyle: false,
|
|
37
37
|
};
|
|
38
38
|
export const LongTextExample = Template.bind({});
|
|
39
39
|
const longTextExample = (React.createElement(Text, { typo: "desc-light", color: "liquorice" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."));
|
|
40
40
|
LongTextExample.args = {
|
|
41
41
|
title: 'Long text example',
|
|
42
|
-
position: 'top',
|
|
43
42
|
content: longTextExample,
|
|
44
43
|
size: 'large',
|
|
45
44
|
underline: true,
|
|
46
|
-
arrowPosition: 'left',
|
|
47
45
|
shadow: false,
|
|
48
46
|
};
|
|
49
47
|
export const ReactNodeExample = Template.bind({});
|
|
50
|
-
const tooltipContent = (React.createElement(
|
|
48
|
+
const tooltipContent = (React.createElement(Box, null,
|
|
51
49
|
React.createElement(Text, { typo: "desc-light", color: "liquorice" }, "20 Cherry Blossom Lane,"),
|
|
52
50
|
React.createElement(Text, { typo: "desc-light", color: "liquorice" }, "Aintree,"),
|
|
53
51
|
React.createElement(Text, { typo: "desc-light", color: "liquorice" }, "Manchester,"),
|
|
54
52
|
React.createElement(Text, { typo: "desc-light", color: "liquorice" }, "T: 07123456789")));
|
|
55
53
|
ReactNodeExample.args = {
|
|
56
54
|
title: 'React node example',
|
|
57
|
-
position: 'top',
|
|
58
55
|
content: tooltipContent,
|
|
59
56
|
size: 'large',
|
|
60
57
|
underline: true,
|
|
61
|
-
arrowPosition: 'left',
|
|
62
58
|
shadow: false,
|
|
63
59
|
};
|
|
64
60
|
export const OverflowExample = OverflowHiddenTemplate.bind({});
|
|
65
61
|
OverflowExample.args = {
|
|
66
62
|
title: 'React node example',
|
|
67
|
-
position: 'top',
|
|
68
63
|
content: tooltipContent,
|
|
69
64
|
size: 'large',
|
|
70
|
-
arrowPosition: 'left',
|
|
71
65
|
underline: true,
|
|
72
66
|
};
|
|
73
67
|
//# sourceMappingURL=Tooltip.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.stories.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AAEjD,eAAe;IACb,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,OAAO;CACnB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAmB,EAAE,EAAE,CAAC,CACxC,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,IAAI;IACjD,oBAAC,OAAO,OAAK,KAAK;QAChB,oBAAC,GAAG,qBAAiB,CACb,CACN,CACP,CAAA;AAED,MAAM,sBAAsB,GAAG,CAAC,KAAmB,EAAE,EAAE,CAAC,CACtD,oBAAC,iBAAiB;
|
|
1
|
+
{"version":3,"file":"Tooltip.stories.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Debounces a method.
|
|
3
|
+
* @param fn - The function to be debounced.
|
|
4
|
+
* @param delay - The debouncing delay.
|
|
5
|
+
* @returns A debounced version of the function.
|
|
6
|
+
*/
|
|
7
|
+
export declare const debounce: <Args extends unknown[], R>(fn: (...args: Args) => R, delay: number) => (...args: Args) => void;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Debounces a method.
|
|
3
|
+
* @param fn - The function to be debounced.
|
|
4
|
+
* @param delay - The debouncing delay.
|
|
5
|
+
* @returns A debounced version of the function.
|
|
6
|
+
*/
|
|
7
|
+
export const debounce = (fn, delay) => {
|
|
8
|
+
let timeout;
|
|
9
|
+
return (...args) => {
|
|
10
|
+
if (timeout) {
|
|
11
|
+
clearTimeout(timeout);
|
|
12
|
+
}
|
|
13
|
+
timeout = setTimeout(() => {
|
|
14
|
+
fn(...args);
|
|
15
|
+
timeout = undefined;
|
|
16
|
+
}, delay);
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=debounce.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"debounce.js","sourceRoot":"","sources":["../../src/utils/debounce.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CACtB,EAAwB,EACxB,KAAa,EACc,EAAE;IAC7B,IAAI,OAAmC,CAAA;IAEvC,OAAO,CAAC,GAAG,IAAU,EAAQ,EAAE;QAC7B,IAAI,OAAO,EAAE;YACX,YAAY,CAAC,OAAO,CAAC,CAAA;SACtB;QAED,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YACxB,EAAE,CAAC,GAAG,IAAI,CAAC,CAAA;YACX,OAAO,GAAG,SAAS,CAAA;QACrB,CAAC,EAAE,KAAK,CAAC,CAAA;IACX,CAAC,CAAA;AACH,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.12",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"keywords": [
|
|
@@ -51,6 +51,7 @@
|
|
|
51
51
|
"@types/styled-components": "^5.1.3",
|
|
52
52
|
"@types/testing-library__jest-dom": "^5.14.3",
|
|
53
53
|
"@types/testing-library__react": "^10.2.0",
|
|
54
|
+
"@types/uuid": "^9.0.5",
|
|
54
55
|
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
|
55
56
|
"@typescript-eslint/parser": "^6.2.0",
|
|
56
57
|
"babel-eslint": "^10.1.0",
|