etudes 0.46.0 → 0.47.0
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/lib/WithTooltip.js +4 -3
- package/lib/WithTooltip.js.map +1 -1
- package/package.json +1 -1
package/lib/WithTooltip.js
CHANGED
|
@@ -113,8 +113,9 @@ function WithTooltip(_a) {
|
|
|
113
113
|
div.style.visibility = 'hidden';
|
|
114
114
|
div.style.whiteSpace = 'no-wrap';
|
|
115
115
|
document.body.appendChild(div);
|
|
116
|
-
|
|
117
|
-
var
|
|
116
|
+
// Add 1px as buffer to mitigate precision discrepancies.
|
|
117
|
+
var width = div.clientWidth + 1;
|
|
118
|
+
var height = div.clientHeight + 1;
|
|
118
119
|
document.body.removeChild(div);
|
|
119
120
|
return new spase_1.Size([width, height]);
|
|
120
121
|
}
|
|
@@ -174,6 +175,6 @@ function _cssArrow(position, arrowHeight, offset, color) {
|
|
|
174
175
|
}
|
|
175
176
|
});
|
|
176
177
|
}
|
|
177
|
-
var StyledRoot = (0, styled_components_1.default)(ExtractChildren_1.default)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n cursor: pointer;\n position: relative;\n\n &::before {\n border-style: solid;\n border-width: ", "px;\n content: '';\n height: 0;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n transition: opacity 200ms ease-out;\n width: 0;\n z-index: 10001;\n\n ", "\n ", "\n ", "\n }\n\n &::after {\n box-sizing: content-box;\n font-size: 12px;\n max-width: 240px;\n padding: 10px 14px;\n text-align: left;\n\n ", "\n\n background: ", ";\n color: ", ";\n content: '", "';\n opacity: 0;\n overflow: hidden;\n pointer-events: none;\n position: absolute;\n transform: translate3d(0, 0, 0);\n transition: opacity 200ms ease-out;\n width: ", ";\n z-index: 10000;\n\n ", "\n ", "\n ", "\n }\n\n ", " {\n opacity: 1;\n }\n\n ", " {\n opacity: 1;\n }\n"], ["\n cursor: pointer;\n position: relative;\n\n &::before {\n border-style: solid;\n border-width: ", "px;\n content: '';\n height: 0;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n transition: opacity 200ms ease-out;\n width: 0;\n z-index: 10001;\n\n ", "\n ", "\n ", "\n }\n\n &::after {\n box-sizing: content-box;\n font-size: 12px;\n max-width: 240px;\n padding: 10px 14px;\n text-align: left;\n\n ", "\n\n background: ", ";\n color: ", ";\n content: '", "';\n opacity: 0;\n overflow: hidden;\n pointer-events: none;\n position: absolute;\n transform: translate3d(0, 0, 0);\n transition: opacity 200ms ease-out;\n width: ", ";\n z-index: 10000;\n\n ", "\n ", "\n ", "\n }\n\n ", " {\n opacity: 1;\n }\n\n ", " {\n opacity: 1;\n }\n"])), function (props) { return props.arrowHeight; }, function (props) { return _cssDisplacement(props.position, props.arrowHeight, props.offset); }, function (props) { return _cssArrow(props.position, props.arrowHeight, props.offset, props.backgroundColor); }, function (props) { return props.disabledOnTouch ? 'html.touch & { display: none; }' : ''; }, function (props) { return props.cssDialog; }, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) { return props.hint; }, function (props) { return props.textSize.width > 0 ? props.textSize.width : 'auto'; }, function (props) { return _cssDisplacement(props.position, props.arrowHeight, props.offset); }, function (props) { return _cssDialog(props.position, props.arrowHeight, props.offset); }, function (props) { return props.disabledOnTouch ? 'html.touch & { display: none; }' : ''; }, function (props) { return props.disabledOnTouch ? 'html:not(.touch) &:hover::before' : '&:hover::before'; }, function (props) { return props.disabledOnTouch ? 'html:not(.touch) &:hover::after' : '&:hover::after'; });
|
|
178
|
+
var StyledRoot = (0, styled_components_1.default)(ExtractChildren_1.default)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n cursor: pointer;\n position: relative;\n\n &::before {\n border-style: solid;\n border-width: ", "px;\n content: '';\n height: 0;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n transition: opacity 200ms ease-out;\n width: 0;\n z-index: 10001;\n\n ", "\n ", "\n ", "\n }\n\n &::after {\n box-sizing: content-box;\n font-size: 12px;\n max-width: 240px;\n padding: 10px 14px;\n text-align: left;\n\n ", "\n\n background: ", ";\n color: ", ";\n content: '", "';\n opacity: 0;\n overflow: hidden;\n pointer-events: none;\n position: absolute;\n transform: translate3d(0, 0, 0);\n transition: opacity 200ms ease-out;\n width: ", ";\n z-index: 10000;\n\n ", "\n ", "\n ", "\n }\n\n ", " {\n opacity: 1;\n }\n\n ", " {\n opacity: 1;\n }\n"], ["\n cursor: pointer;\n position: relative;\n\n &::before {\n border-style: solid;\n border-width: ", "px;\n content: '';\n height: 0;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n transition: opacity 200ms ease-out;\n width: 0;\n z-index: 10001;\n\n ", "\n ", "\n ", "\n }\n\n &::after {\n box-sizing: content-box;\n font-size: 12px;\n max-width: 240px;\n padding: 10px 14px;\n text-align: left;\n\n ", "\n\n background: ", ";\n color: ", ";\n content: '", "';\n opacity: 0;\n overflow: hidden;\n pointer-events: none;\n position: absolute;\n transform: translate3d(0, 0, 0);\n transition: opacity 200ms ease-out;\n width: ", ";\n z-index: 10000;\n\n ", "\n ", "\n ", "\n }\n\n ", " {\n opacity: 1;\n }\n\n ", " {\n opacity: 1;\n }\n"])), function (props) { return props.arrowHeight; }, function (props) { return _cssDisplacement(props.position, props.arrowHeight, props.offset); }, function (props) { return _cssArrow(props.position, props.arrowHeight, props.offset, props.backgroundColor); }, function (props) { return props.disabledOnTouch ? 'html.touch & { display: none; }' : ''; }, function (props) { return props.cssDialog; }, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) { return props.hint; }, function (props) { return props.textSize.width > 0 ? "".concat(props.textSize.width, "px") : 'auto'; }, function (props) { return _cssDisplacement(props.position, props.arrowHeight, props.offset); }, function (props) { return _cssDialog(props.position, props.arrowHeight, props.offset); }, function (props) { return props.disabledOnTouch ? 'html.touch & { display: none; }' : ''; }, function (props) { return props.disabledOnTouch ? 'html:not(.touch) &:hover::before' : '&:hover::before'; }, function (props) { return props.disabledOnTouch ? 'html:not(.touch) &:hover::after' : '&:hover::after'; });
|
|
178
179
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34;
|
|
179
180
|
//# sourceMappingURL=WithTooltip.js.map
|
package/lib/WithTooltip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WithTooltip.js","sourceRoot":"/","sources":["WithTooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes, MouseEvent, PropsWithChildren, useState } from 'react'\nimport { Rect, Size } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport ExtractChildren from './ExtractChildren'\n\ntype Props = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n /**\n * The height of the arrow. The width (longest edge) of the arrow is always twice its height.\n */\n arrowHeight?: number\n\n /**\n * Color of the dialog background, same format as a CSS color string (i.e. '#000').\n */\n backgroundColor?: string\n\n /**\n * Specifies if the tooltip should be disabled in touch devices (i.e. `html` has class `.touch`).\n */\n disabledOnTouch?: boolean\n\n /**\n * The offset (in pixels) between the target element and the tooltip, defaults to zero.\n */\n offset?: number\n\n /**\n * The hint string to display in the tooltip.\n */\n hint: string\n\n /**\n * Color of the dialog text, same format as a CSS color string (i.e. '#000').\n */\n textColor?: string\n\n /**\n * The minimum space (in pixels) between the target element and the edge of the window required to\n * trigger an alignment change, defaults to `100px`.\n */\n threshold?: number\n\n /**\n * Custom CSS provided to the dialog. Not all CSS rules will take effect as they will be\n * overridden by internal rules.\n */\n cssDialog?: CSSProp<any>\n}\n\ntype Position = 'tl' | 'tc' | 'tr' | 'cl' | 'cr' | 'bl' | 'bc' | 'br'\n\nexport default function WithTooltip({\n arrowHeight = 8,\n backgroundColor = '#000',\n cssDialog,\n disabledOnTouch = true,\n hint,\n offset = 5,\n textColor = '#fff',\n threshold = 100,\n ...props\n}: Props) {\n const [textSize, setTextSize] = useState<Size>(new Size())\n const [position, setPosition] = useState<Position>('bc')\n\n function computePosition(target: Element, threshold: number): Position {\n const vrect = Rect.fromViewport()\n const rect = Rect.intersecting(target)\n\n if (rect) {\n const leftBound = (rect.center.x - vrect.left) < threshold\n const rightBound = (vrect.center.x - rect.right) < threshold\n const topBound = (rect.center.y - vrect.top) < threshold\n const bottomBound = (vrect.center.y - rect.bottom) < threshold\n\n if (leftBound && topBound) return 'br'\n if (leftBound && bottomBound) return 'tr'\n if (rightBound && topBound) return 'bl'\n if (rightBound && bottomBound) return 'tl'\n if (leftBound) return 'cr'\n if (rightBound) return 'cl'\n if (bottomBound) return 'tc'\n }\n\n return 'bc'\n }\n\n function computeTextSize(target: Element): Size {\n const computedStyle = window.getComputedStyle(target, '::after')\n const div = document.createElement('div')\n div.innerHTML = hint\n div.style.fontFamily = computedStyle.getPropertyValue('font-family')\n div.style.fontSize = computedStyle.getPropertyValue('font-size')\n div.style.fontStyle = computedStyle.getPropertyValue('font-style')\n div.style.fontVariant = computedStyle.getPropertyValue('font-variant')\n div.style.fontWeight = computedStyle.getPropertyValue('font-weight')\n div.style.height = '30px'\n div.style.left = '0'\n div.style.position = 'absolute'\n div.style.top = '0'\n div.style.visibility = 'hidden'\n div.style.whiteSpace = 'no-wrap'\n\n document.body.appendChild(div)\n const width = div.clientWidth\n const height = div.clientHeight\n document.body.removeChild(div)\n\n return new Size([width, height])\n }\n\n function onMouseOver(event: MouseEvent) {\n setTextSize(computeTextSize(event.currentTarget))\n setPosition(computePosition(event.currentTarget, threshold))\n }\n\n return (\n <StyledRoot\n position={position}\n arrowHeight={arrowHeight}\n backgroundColor={backgroundColor}\n cssDialog={cssDialog}\n disabledOnTouch={disabledOnTouch}\n hint={hint}\n offset={offset}\n onMouseOver={event => onMouseOver(event)}\n textColor={textColor}\n textSize={textSize}\n {...props}\n />\n )\n}\n\nfunction _cssDisplacement(position: Position, arrowHeight: number, offset: number): CSSProp {\n switch (position) {\n case 'tl': return css`top: ${-arrowHeight}px; left: 100%;`\n case 'tc': return css`top: ${-arrowHeight}px; left: 50%;`\n case 'tr': return css`top: ${-arrowHeight}px; right: 100%;`\n case 'cl': return css`top: 50%; left: ${-arrowHeight}px;`\n case 'cr': return css`top: 50%; right: ${-arrowHeight}px;`\n case 'bl': return css`bottom: ${-arrowHeight}px; left: 100%;`\n case 'bc': return css`bottom: ${-arrowHeight}px; left: 50%;`\n case 'br': return css`bottom: ${-arrowHeight}px; right: 100%;`\n }\n}\n\nfunction _cssDialog(position: Position, arrowHeight: number, offset: number): CSSProp {\n switch (position) {\n case 'tl': return css`transform: translate3d(calc(-100% - ${offset}px), calc(-100% - ${offset}px), 0);`\n case 'tc': return css`transform: translate3d(-50%, calc(-100% - ${offset}px), 0);`\n case 'tr': return css`transform: translate3d(calc(100% + ${offset}px), calc(-100% - ${offset}px), 0);`\n case 'cl': return css`transform: translate3d(calc(-100% - ${offset}px), -50%, 0);`\n case 'cr': return css`transform: translate3d(calc(100% + ${offset}px), -50%, 0);`\n case 'bl': return css`transform: translate3d(calc(-100% - ${offset}px), calc(100% + ${offset}px), 0);`\n case 'bc': return css`transform: translate3d(-50%, calc(100% + ${offset}px), 0);`\n case 'br': return css`transform: translate3d(calc(100% + ${offset}px), calc(100% + ${offset}px), 0);`\n }\n}\n\nfunction _cssArrow(position: Position, arrowHeight: number, offset: number, color: string): CSSProp {\n return css`\n ${() => {\n switch (position) {\n case 'tl': return css`border-color: ${color} transparent transparent transparent;`\n case 'tc': return css`border-color: ${color} transparent transparent transparent;`\n case 'tr': return css`border-color: ${color} transparent transparent transparent;`\n case 'cl': return css`border-color: transparent transparent transparent ${color};`\n case 'cr': return css`border-color: transparent ${color} transparent transparent;`\n case 'bl': return css`border-color: transparent transparent ${color} transparent;`\n case 'bc': return css`border-color: transparent transparent ${color} transparent;`\n case 'br': return css`border-color: transparent transparent ${color} transparent;`\n }\n }}\n ${() => {\n switch (position) {\n case 'tl': return css`transform: translate3d(calc(0% - ${offset}px - ${arrowHeight*3}px), calc(0% - ${offset}px), 0);`\n case 'tc': return css`transform: translate3d(-50%, calc(0% - ${offset}px), 0);`\n case 'tr': return css`transform: translate3d(calc(100% + ${offset}px + ${arrowHeight}px), calc(0% - ${offset}px), 0);`\n case 'cl': return css`transform: translate3d(calc(0% - ${offset}px), -50%, 0);`\n case 'cr': return css`transform: translate3d(calc(0% + ${offset}px), -50%, 0);`\n case 'bl': return css`transform: translate3d(calc(0% - ${offset}px - ${arrowHeight*3}px), calc(0% + ${offset}px), 0);`\n case 'bc': return css`transform: translate3d(-50%, calc(0% + ${offset}px), 0);`\n case 'br': return css`transform: translate3d(calc(100% + ${offset}px + ${arrowHeight}px), calc(0% + ${offset}px), 0);`\n }\n }}\n `\n}\n\nconst StyledRoot = styled(ExtractChildren)<{\n arrowHeight: number\n backgroundColor: string\n cssDialog?: CSSProp\n disabledOnTouch: boolean\n hint: string\n offset: number\n position: Position\n textColor: string\n textSize: Size\n}>`\n cursor: pointer;\n position: relative;\n\n &::before {\n border-style: solid;\n border-width: ${props => props.arrowHeight}px;\n content: '';\n height: 0;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n transition: opacity 200ms ease-out;\n width: 0;\n z-index: 10001;\n\n ${props => _cssDisplacement(props.position, props.arrowHeight, props.offset)}\n ${props => _cssArrow(props.position, props.arrowHeight, props.offset, props.backgroundColor)}\n ${props => props.disabledOnTouch ? 'html.touch & { display: none; }' : ''}\n }\n\n &::after {\n box-sizing: content-box;\n font-size: 12px;\n max-width: 240px;\n padding: 10px 14px;\n text-align: left;\n\n ${props => props.cssDialog}\n\n background: ${props => props.backgroundColor};\n color: ${props => props.textColor};\n content: '${props => props.hint}';\n opacity: 0;\n overflow: hidden;\n pointer-events: none;\n position: absolute;\n transform: translate3d(0, 0, 0);\n transition: opacity 200ms ease-out;\n width: ${props => props.textSize.width > 0 ? props.textSize.width : 'auto'};\n z-index: 10000;\n\n ${props => _cssDisplacement(props.position, props.arrowHeight, props.offset)}\n ${props => _cssDialog(props.position, props.arrowHeight, props.offset)}\n ${props => props.disabledOnTouch ? 'html.touch & { display: none; }' : ''}\n }\n\n ${props => props.disabledOnTouch ? 'html:not(.touch) &:hover::before' : '&:hover::before'} {\n opacity: 1;\n }\n\n ${props => props.disabledOnTouch ? 'html:not(.touch) &:hover::after' : '&:hover::after'} {\n opacity: 1;\n }\n`\n"]}
|
|
1
|
+
{"version":3,"file":"WithTooltip.js","sourceRoot":"/","sources":["WithTooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes, MouseEvent, PropsWithChildren, useState } from 'react'\nimport { Rect, Size } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport ExtractChildren from './ExtractChildren'\n\ntype Props = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n /**\n * The height of the arrow. The width (longest edge) of the arrow is always twice its height.\n */\n arrowHeight?: number\n\n /**\n * Color of the dialog background, same format as a CSS color string (i.e. '#000').\n */\n backgroundColor?: string\n\n /**\n * Specifies if the tooltip should be disabled in touch devices (i.e. `html` has class `.touch`).\n */\n disabledOnTouch?: boolean\n\n /**\n * The offset (in pixels) between the target element and the tooltip, defaults to zero.\n */\n offset?: number\n\n /**\n * The hint string to display in the tooltip.\n */\n hint: string\n\n /**\n * Color of the dialog text, same format as a CSS color string (i.e. '#000').\n */\n textColor?: string\n\n /**\n * The minimum space (in pixels) between the target element and the edge of the window required to\n * trigger an alignment change, defaults to `100px`.\n */\n threshold?: number\n\n /**\n * Custom CSS provided to the dialog. Not all CSS rules will take effect as they will be\n * overridden by internal rules.\n */\n cssDialog?: CSSProp<any>\n}\n\ntype Position = 'tl' | 'tc' | 'tr' | 'cl' | 'cr' | 'bl' | 'bc' | 'br'\n\nexport default function WithTooltip({\n arrowHeight = 8,\n backgroundColor = '#000',\n cssDialog,\n disabledOnTouch = true,\n hint,\n offset = 5,\n textColor = '#fff',\n threshold = 100,\n ...props\n}: Props) {\n const [textSize, setTextSize] = useState<Size>(new Size())\n const [position, setPosition] = useState<Position>('bc')\n\n function computePosition(target: Element, threshold: number): Position {\n const vrect = Rect.fromViewport()\n const rect = Rect.intersecting(target)\n\n if (rect) {\n const leftBound = (rect.center.x - vrect.left) < threshold\n const rightBound = (vrect.center.x - rect.right) < threshold\n const topBound = (rect.center.y - vrect.top) < threshold\n const bottomBound = (vrect.center.y - rect.bottom) < threshold\n\n if (leftBound && topBound) return 'br'\n if (leftBound && bottomBound) return 'tr'\n if (rightBound && topBound) return 'bl'\n if (rightBound && bottomBound) return 'tl'\n if (leftBound) return 'cr'\n if (rightBound) return 'cl'\n if (bottomBound) return 'tc'\n }\n\n return 'bc'\n }\n\n function computeTextSize(target: Element): Size {\n const computedStyle = window.getComputedStyle(target, '::after')\n const div = document.createElement('div')\n div.innerHTML = hint\n div.style.fontFamily = computedStyle.getPropertyValue('font-family')\n div.style.fontSize = computedStyle.getPropertyValue('font-size')\n div.style.fontStyle = computedStyle.getPropertyValue('font-style')\n div.style.fontVariant = computedStyle.getPropertyValue('font-variant')\n div.style.fontWeight = computedStyle.getPropertyValue('font-weight')\n div.style.height = '30px'\n div.style.left = '0'\n div.style.position = 'absolute'\n div.style.top = '0'\n div.style.visibility = 'hidden'\n div.style.whiteSpace = 'no-wrap'\n\n document.body.appendChild(div)\n // Add 1px as buffer to mitigate precision discrepancies.\n const width = div.clientWidth + 1\n const height = div.clientHeight + 1\n document.body.removeChild(div)\n\n return new Size([width, height])\n }\n\n function onMouseOver(event: MouseEvent) {\n setTextSize(computeTextSize(event.currentTarget))\n setPosition(computePosition(event.currentTarget, threshold))\n }\n\n return (\n <StyledRoot\n position={position}\n arrowHeight={arrowHeight}\n backgroundColor={backgroundColor}\n cssDialog={cssDialog}\n disabledOnTouch={disabledOnTouch}\n hint={hint}\n offset={offset}\n onMouseOver={event => onMouseOver(event)}\n textColor={textColor}\n textSize={textSize}\n {...props}\n />\n )\n}\n\nfunction _cssDisplacement(position: Position, arrowHeight: number, offset: number): CSSProp {\n switch (position) {\n case 'tl': return css`top: ${-arrowHeight}px; left: 100%;`\n case 'tc': return css`top: ${-arrowHeight}px; left: 50%;`\n case 'tr': return css`top: ${-arrowHeight}px; right: 100%;`\n case 'cl': return css`top: 50%; left: ${-arrowHeight}px;`\n case 'cr': return css`top: 50%; right: ${-arrowHeight}px;`\n case 'bl': return css`bottom: ${-arrowHeight}px; left: 100%;`\n case 'bc': return css`bottom: ${-arrowHeight}px; left: 50%;`\n case 'br': return css`bottom: ${-arrowHeight}px; right: 100%;`\n }\n}\n\nfunction _cssDialog(position: Position, arrowHeight: number, offset: number): CSSProp {\n switch (position) {\n case 'tl': return css`transform: translate3d(calc(-100% - ${offset}px), calc(-100% - ${offset}px), 0);`\n case 'tc': return css`transform: translate3d(-50%, calc(-100% - ${offset}px), 0);`\n case 'tr': return css`transform: translate3d(calc(100% + ${offset}px), calc(-100% - ${offset}px), 0);`\n case 'cl': return css`transform: translate3d(calc(-100% - ${offset}px), -50%, 0);`\n case 'cr': return css`transform: translate3d(calc(100% + ${offset}px), -50%, 0);`\n case 'bl': return css`transform: translate3d(calc(-100% - ${offset}px), calc(100% + ${offset}px), 0);`\n case 'bc': return css`transform: translate3d(-50%, calc(100% + ${offset}px), 0);`\n case 'br': return css`transform: translate3d(calc(100% + ${offset}px), calc(100% + ${offset}px), 0);`\n }\n}\n\nfunction _cssArrow(position: Position, arrowHeight: number, offset: number, color: string): CSSProp {\n return css`\n ${() => {\n switch (position) {\n case 'tl': return css`border-color: ${color} transparent transparent transparent;`\n case 'tc': return css`border-color: ${color} transparent transparent transparent;`\n case 'tr': return css`border-color: ${color} transparent transparent transparent;`\n case 'cl': return css`border-color: transparent transparent transparent ${color};`\n case 'cr': return css`border-color: transparent ${color} transparent transparent;`\n case 'bl': return css`border-color: transparent transparent ${color} transparent;`\n case 'bc': return css`border-color: transparent transparent ${color} transparent;`\n case 'br': return css`border-color: transparent transparent ${color} transparent;`\n }\n }}\n ${() => {\n switch (position) {\n case 'tl': return css`transform: translate3d(calc(0% - ${offset}px - ${arrowHeight*3}px), calc(0% - ${offset}px), 0);`\n case 'tc': return css`transform: translate3d(-50%, calc(0% - ${offset}px), 0);`\n case 'tr': return css`transform: translate3d(calc(100% + ${offset}px + ${arrowHeight}px), calc(0% - ${offset}px), 0);`\n case 'cl': return css`transform: translate3d(calc(0% - ${offset}px), -50%, 0);`\n case 'cr': return css`transform: translate3d(calc(0% + ${offset}px), -50%, 0);`\n case 'bl': return css`transform: translate3d(calc(0% - ${offset}px - ${arrowHeight*3}px), calc(0% + ${offset}px), 0);`\n case 'bc': return css`transform: translate3d(-50%, calc(0% + ${offset}px), 0);`\n case 'br': return css`transform: translate3d(calc(100% + ${offset}px + ${arrowHeight}px), calc(0% + ${offset}px), 0);`\n }\n }}\n `\n}\n\nconst StyledRoot = styled(ExtractChildren)<{\n arrowHeight: number\n backgroundColor: string\n cssDialog?: CSSProp\n disabledOnTouch: boolean\n hint: string\n offset: number\n position: Position\n textColor: string\n textSize: Size\n}>`\n cursor: pointer;\n position: relative;\n\n &::before {\n border-style: solid;\n border-width: ${props => props.arrowHeight}px;\n content: '';\n height: 0;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n transition: opacity 200ms ease-out;\n width: 0;\n z-index: 10001;\n\n ${props => _cssDisplacement(props.position, props.arrowHeight, props.offset)}\n ${props => _cssArrow(props.position, props.arrowHeight, props.offset, props.backgroundColor)}\n ${props => props.disabledOnTouch ? 'html.touch & { display: none; }' : ''}\n }\n\n &::after {\n box-sizing: content-box;\n font-size: 12px;\n max-width: 240px;\n padding: 10px 14px;\n text-align: left;\n\n ${props => props.cssDialog}\n\n background: ${props => props.backgroundColor};\n color: ${props => props.textColor};\n content: '${props => props.hint}';\n opacity: 0;\n overflow: hidden;\n pointer-events: none;\n position: absolute;\n transform: translate3d(0, 0, 0);\n transition: opacity 200ms ease-out;\n width: ${props => props.textSize.width > 0 ? `${props.textSize.width}px` : 'auto'};\n z-index: 10000;\n\n ${props => _cssDisplacement(props.position, props.arrowHeight, props.offset)}\n ${props => _cssDialog(props.position, props.arrowHeight, props.offset)}\n ${props => props.disabledOnTouch ? 'html.touch & { display: none; }' : ''}\n }\n\n ${props => props.disabledOnTouch ? 'html:not(.touch) &:hover::before' : '&:hover::before'} {\n opacity: 1;\n }\n\n ${props => props.disabledOnTouch ? 'html:not(.touch) &:hover::after' : '&:hover::after'} {\n opacity: 1;\n }\n`\n"]}
|