etudes 0.61.0 → 0.62.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.
Files changed (6) hide show
  1. package/lib/WithTooltip.js +3 -1
  2. package/lib/WithTooltip.js.map +1 -1
  3. package/lib/hooks/useViewportSize.d.ts +7 -0
  4. package/lib/hooks/useViewportSize.js +40 -0
  5. package/lib/hooks/useViewportSize.js.map +1 -0
  6. package/package.json +15 -16
package/lib/WithTooltip.js CHANGED
@@ -72,6 +72,7 @@ var react_1 = __importStar(require("react"));
72
72
  var spase_1 = require("spase");
73
73
  var styled_components_1 = __importStar(require("styled-components"));
74
74
  var ExtractChild_1 = __importDefault(require("./ExtractChild"));
75
+ var useViewportSize_1 = __importDefault(require("./hooks/useViewportSize"));
75
76
  function WithTooltip(_a) {
76
77
  var _b = _a.arrowHeight, arrowHeight = _b === void 0 ? 8 : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#000' : _c, cssDialog = _a.cssDialog, _d = _a.disabledOnTouch, disabledOnTouch = _d === void 0 ? true : _d, hint = _a.hint, _e = _a.gap, gap = _e === void 0 ? 5 : _e, _f = _a.textColor, textColor = _f === void 0 ? '#fff' : _f, _g = _a.threshold, threshold = _g === void 0 ? 100 : _g, props = __rest(_a, ["arrowHeight", "backgroundColor", "cssDialog", "disabledOnTouch", "hint", "gap", "textColor", "threshold"]);
77
78
  var computeAlignment = function (target, threshold) {
@@ -126,6 +127,7 @@ function WithTooltip(_a) {
126
127
  };
127
128
  var _h = __read((0, react_1.useState)(new spase_1.Size()), 2), textSize = _h[0], setTextSize = _h[1];
128
129
  var _j = __read((0, react_1.useState)(undefined), 2), alignment = _j[0], setAlignment = _j[1];
130
+ var viewportSize = (0, useViewportSize_1.default)();
129
131
  var childRef = (0, react_1.useRef)(null);
130
132
  (0, react_1.useEffect)(function () {
131
133
  var childNode = childRef.current;
@@ -133,7 +135,7 @@ function WithTooltip(_a) {
133
135
  return;
134
136
  setAlignment(computeAlignment(childNode, threshold));
135
137
  setTextSize(computeTextSize(childNode, threshold));
136
- }, []);
138
+ }, [viewportSize]);
137
139
  return (react_1.default.createElement(StyledRoot, __assign({ arrowHeight: arrowHeight, backgroundColor: backgroundColor, ref: childRef, cssDialog: cssDialog, disabledOnTouch: disabledOnTouch, hint: hint, gap: gap, onMouseOver: function (event) { return onMouseOver(event); }, alignment: alignment, textColor: textColor, textSize: textSize }, props)));
138
140
  }
139
141
  exports.default = WithTooltip;
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, RefObject, useEffect, useRef, useState } from 'react'\nimport { Rect, Size } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport ExtractChild from './ExtractChild'\n\nexport type Props = 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 hint string to display in the tooltip.\n */\n hint: string\n\n /**\n * The gap (in pixels) between the target element and the tooltip, defaults to zero.\n */\n gap?: number\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 Alignment = '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 gap = 5,\n textColor = '#fff',\n threshold = 100,\n ...props\n}: Props) {\n const computeAlignment = (target: Element, threshold: number): Alignment => {\n const vrect = Rect.fromViewport()\n const rect = Rect.intersecting(target)\n\n if (rect) {\n const leftBound = (rect.left - vrect.left) < threshold\n const rightBound = (vrect.right - rect.right) < threshold\n const topBound = (rect.top - vrect.top) < threshold\n const bottomBound = (vrect.bottom - 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 const computeTextSize = (target: Element, threshold: number): 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.left = '0'\n div.style.position = 'absolute'\n div.style.top = '0'\n div.style.visibility = 'hidden'\n div.style.whiteSpace = 'pre'\n\n document.body.appendChild(div)\n\n // Add 1px as buffer to mitigate precision discrepancies.\n const width = div.clientWidth + 1\n const height = div.clientHeight + 1\n\n document.body.removeChild(div)\n\n return new Size([width, height])\n }\n\n const onMouseOver = (event: MouseEvent) => {\n setAlignment(computeAlignment(event.currentTarget, threshold))\n setTextSize(computeTextSize(event.currentTarget, threshold))\n }\n\n const [textSize, setTextSize] = useState<Size | undefined>(new Size())\n const [alignment, setAlignment] = useState<Alignment | undefined>(undefined)\n\n const childRef = useRef<HTMLElement>(null)\n\n useEffect(() => {\n const childNode = childRef.current\n if (!childNode) return\n setAlignment(computeAlignment(childNode, threshold))\n setTextSize(computeTextSize(childNode, threshold))\n }, [])\n\n return (\n <StyledRoot\n arrowHeight={arrowHeight}\n backgroundColor={backgroundColor}\n ref={childRef}\n cssDialog={cssDialog}\n disabledOnTouch={disabledOnTouch}\n hint={hint}\n gap={gap}\n onMouseOver={event => onMouseOver(event)}\n alignment={alignment}\n textColor={textColor}\n textSize={textSize}\n {...props}\n />\n )\n}\n\nfunction makeDisplacementCSS(alignment: Alignment, arrowHeight: number, gap: number): CSSProp {\n switch (alignment) {\n case 'tl': return css`top: ${-arrowHeight}px; left: calc(50% + ${arrowHeight*2.5}px);`\n case 'tc': return css`top: ${-arrowHeight}px; left: 50%;`\n case 'tr': return css`top: ${-arrowHeight}px; right: calc(50% + ${arrowHeight*2.5}px);`\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: calc(50% + ${arrowHeight*2.5}px);`\n case 'bc': return css`bottom: ${-arrowHeight}px; left: 50%;`\n case 'br': return css`bottom: ${-arrowHeight}px; right: calc(50% + ${arrowHeight*2.5}px);`\n }\n}\n\nfunction makeDialogPositionCSS(alignment: Alignment, arrowHeight: number, gap: number): CSSProp {\n switch (alignment) {\n case 'tl': return css`transform: translate3d(calc(-100% - ${gap}px), calc(-100% - ${gap}px), 0);`\n case 'tc': return css`transform: translate3d(-50%, calc(-100% - ${gap}px), 0);`\n case 'tr': return css`transform: translate3d(calc(100% + ${gap}px), calc(-100% - ${gap}px), 0);`\n case 'cl': return css`transform: translate3d(calc(-100% - ${gap}px), -50%, 0);`\n case 'cr': return css`transform: translate3d(calc(100% + ${gap}px), -50%, 0);`\n case 'bl': return css`transform: translate3d(calc(-100% - ${gap}px), calc(100% + ${gap}px), 0);`\n case 'bc': return css`transform: translate3d(-50%, calc(100% + ${gap}px), 0);`\n case 'br': return css`transform: translate3d(calc(100% + ${gap}px), calc(100% + ${gap}px), 0);`\n }\n}\n\nfunction makeArrowPositionCSS(alignment: Alignment, arrowHeight: number, gap: number, color: string): CSSProp {\n return css`\n ${() => {\n switch (alignment) {\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 ${() => {\n switch (alignment) {\n case 'tl': return css`transform: translate3d(calc(0% - ${gap}px - ${arrowHeight*3}px), calc(0% - ${gap}px), 0);`\n case 'tc': return css`transform: translate3d(-50%, calc(0% - ${gap}px), 0);`\n case 'tr': return css`transform: translate3d(calc(100% + ${gap}px + ${arrowHeight}px), calc(0% - ${gap}px), 0);`\n case 'cl': return css`transform: translate3d(calc(0% - ${gap}px), -50%, 0);`\n case 'cr': return css`transform: translate3d(calc(0% + ${gap}px), -50%, 0);`\n case 'bl': return css`transform: translate3d(calc(0% - ${gap}px - ${arrowHeight*3}px), calc(0% + ${gap}px), 0);`\n case 'bc': return css`transform: translate3d(-50%, calc(0% + ${gap}px), 0);`\n case 'br': return css`transform: translate3d(calc(100% + ${gap}px + ${arrowHeight}px), calc(0% + ${gap}px), 0);`\n }\n }}\n `\n}\n\nconst StyledRoot = styled(ExtractChild)<{\n arrowHeight: number\n backgroundColor: string\n ref: RefObject<HTMLElement>\n cssDialog?: CSSProp\n disabledOnTouch: boolean\n hint: string\n gap: number\n alignment?: Alignment\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 => props.alignment && props.textSize && css`\n ${makeDisplacementCSS(props.alignment, props.arrowHeight, props.gap)}\n ${makeArrowPositionCSS(props.alignment, props.arrowHeight, props.gap, props.backgroundColor)}\n ${props.disabledOnTouch ? 'html.touch & { display: none; }' : ''}\n `}\n }\n\n &::after {\n box-sizing: content-box;\n font-size: 12px;\n max-width: 200px;\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 z-index: 10000;\n\n ${props => props.alignment && props.textSize && css`\n width: ${props.textSize.width > 0 ? `${props.textSize.width}px` : 'auto'};\n ${makeDisplacementCSS(props.alignment, props.arrowHeight, props.gap)}\n ${makeDialogPositionCSS(props.alignment, props.arrowHeight, props.gap)}\n ${props.disabledOnTouch ? 'html.touch & { display: none; }' : ''}\n `}\n }\n\n ${props => props.disabledOnTouch ? 'html:not(.touch) &:hover' : '&:hover'} {\n &::before { opacity: 1; }\n &::after { 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, RefObject, useEffect, useRef, useState } from 'react'\nimport { Rect, Size } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport ExtractChild from './ExtractChild'\nimport useViewportSize from './hooks/useViewportSize'\n\nexport type Props = 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 hint string to display in the tooltip.\n */\n hint: string\n\n /**\n * The gap (in pixels) between the target element and the tooltip, defaults to zero.\n */\n gap?: number\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 Alignment = '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 gap = 5,\n textColor = '#fff',\n threshold = 100,\n ...props\n}: Props) {\n const computeAlignment = (target: Element, threshold: number): Alignment => {\n const vrect = Rect.fromViewport()\n const rect = Rect.intersecting(target)\n\n if (rect) {\n const leftBound = (rect.left - vrect.left) < threshold\n const rightBound = (vrect.right - rect.right) < threshold\n const topBound = (rect.top - vrect.top) < threshold\n const bottomBound = (vrect.bottom - 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 const computeTextSize = (target: Element, threshold: number): 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.left = '0'\n div.style.position = 'absolute'\n div.style.top = '0'\n div.style.visibility = 'hidden'\n div.style.whiteSpace = 'pre'\n\n document.body.appendChild(div)\n\n // Add 1px as buffer to mitigate precision discrepancies.\n const width = div.clientWidth + 1\n const height = div.clientHeight + 1\n\n document.body.removeChild(div)\n\n return new Size([width, height])\n }\n\n const onMouseOver = (event: MouseEvent) => {\n setAlignment(computeAlignment(event.currentTarget, threshold))\n setTextSize(computeTextSize(event.currentTarget, threshold))\n }\n\n const [textSize, setTextSize] = useState<Size | undefined>(new Size())\n const [alignment, setAlignment] = useState<Alignment | undefined>(undefined)\n const viewportSize = useViewportSize()\n\n const childRef = useRef<HTMLElement>(null)\n\n useEffect(() => {\n const childNode = childRef.current\n if (!childNode) return\n setAlignment(computeAlignment(childNode, threshold))\n setTextSize(computeTextSize(childNode, threshold))\n }, [viewportSize])\n\n return (\n <StyledRoot\n arrowHeight={arrowHeight}\n backgroundColor={backgroundColor}\n ref={childRef}\n cssDialog={cssDialog}\n disabledOnTouch={disabledOnTouch}\n hint={hint}\n gap={gap}\n onMouseOver={event => onMouseOver(event)}\n alignment={alignment}\n textColor={textColor}\n textSize={textSize}\n {...props}\n />\n )\n}\n\nfunction makeDisplacementCSS(alignment: Alignment, arrowHeight: number, gap: number): CSSProp {\n switch (alignment) {\n case 'tl': return css`top: ${-arrowHeight}px; left: calc(50% + ${arrowHeight*2.5}px);`\n case 'tc': return css`top: ${-arrowHeight}px; left: 50%;`\n case 'tr': return css`top: ${-arrowHeight}px; right: calc(50% + ${arrowHeight*2.5}px);`\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: calc(50% + ${arrowHeight*2.5}px);`\n case 'bc': return css`bottom: ${-arrowHeight}px; left: 50%;`\n case 'br': return css`bottom: ${-arrowHeight}px; right: calc(50% + ${arrowHeight*2.5}px);`\n }\n}\n\nfunction makeDialogPositionCSS(alignment: Alignment, arrowHeight: number, gap: number): CSSProp {\n switch (alignment) {\n case 'tl': return css`transform: translate3d(calc(-100% - ${gap}px), calc(-100% - ${gap}px), 0);`\n case 'tc': return css`transform: translate3d(-50%, calc(-100% - ${gap}px), 0);`\n case 'tr': return css`transform: translate3d(calc(100% + ${gap}px), calc(-100% - ${gap}px), 0);`\n case 'cl': return css`transform: translate3d(calc(-100% - ${gap}px), -50%, 0);`\n case 'cr': return css`transform: translate3d(calc(100% + ${gap}px), -50%, 0);`\n case 'bl': return css`transform: translate3d(calc(-100% - ${gap}px), calc(100% + ${gap}px), 0);`\n case 'bc': return css`transform: translate3d(-50%, calc(100% + ${gap}px), 0);`\n case 'br': return css`transform: translate3d(calc(100% + ${gap}px), calc(100% + ${gap}px), 0);`\n }\n}\n\nfunction makeArrowPositionCSS(alignment: Alignment, arrowHeight: number, gap: number, color: string): CSSProp {\n return css`\n ${() => {\n switch (alignment) {\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 ${() => {\n switch (alignment) {\n case 'tl': return css`transform: translate3d(calc(0% - ${gap}px - ${arrowHeight*3}px), calc(0% - ${gap}px), 0);`\n case 'tc': return css`transform: translate3d(-50%, calc(0% - ${gap}px), 0);`\n case 'tr': return css`transform: translate3d(calc(100% + ${gap}px + ${arrowHeight}px), calc(0% - ${gap}px), 0);`\n case 'cl': return css`transform: translate3d(calc(0% - ${gap}px), -50%, 0);`\n case 'cr': return css`transform: translate3d(calc(0% + ${gap}px), -50%, 0);`\n case 'bl': return css`transform: translate3d(calc(0% - ${gap}px - ${arrowHeight*3}px), calc(0% + ${gap}px), 0);`\n case 'bc': return css`transform: translate3d(-50%, calc(0% + ${gap}px), 0);`\n case 'br': return css`transform: translate3d(calc(100% + ${gap}px + ${arrowHeight}px), calc(0% + ${gap}px), 0);`\n }\n }}\n `\n}\n\nconst StyledRoot = styled(ExtractChild)<{\n arrowHeight: number\n backgroundColor: string\n ref: RefObject<HTMLElement>\n cssDialog?: CSSProp\n disabledOnTouch: boolean\n hint: string\n gap: number\n alignment?: Alignment\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 => props.alignment && props.textSize && css`\n ${makeDisplacementCSS(props.alignment, props.arrowHeight, props.gap)}\n ${makeArrowPositionCSS(props.alignment, props.arrowHeight, props.gap, props.backgroundColor)}\n ${props.disabledOnTouch ? 'html.touch & { display: none; }' : ''}\n `}\n }\n\n &::after {\n box-sizing: content-box;\n font-size: 12px;\n max-width: 200px;\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 z-index: 10000;\n\n ${props => props.alignment && props.textSize && css`\n width: ${props.textSize.width > 0 ? `${props.textSize.width}px` : 'auto'};\n ${makeDisplacementCSS(props.alignment, props.arrowHeight, props.gap)}\n ${makeDialogPositionCSS(props.alignment, props.arrowHeight, props.gap)}\n ${props.disabledOnTouch ? 'html.touch & { display: none; }' : ''}\n `}\n }\n\n ${props => props.disabledOnTouch ? 'html:not(.touch) &:hover' : '&:hover'} {\n &::before { opacity: 1; }\n &::after { opacity: 1; }\n }\n`\n"]}
package/lib/hooks/useViewportSize.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { Size } from 'spase';
2
+ /**
3
+ * Hook for returning the size of the viewport whenever it changes.
4
+ *
5
+ * @returns The most current viewport size.
6
+ */
7
+ export default function useViewportSize(): Size;
package/lib/hooks/useViewportSize.js ADDED
@@ -0,0 +1,40 @@
1
+ "use strict";
2
+ var __read = (this && this.__read) || function (o, n) {
3
+ var m = typeof Symbol === "function" && o[Symbol.iterator];
4
+ if (!m) return o;
5
+ var i = m.call(o), r, ar = [], e;
6
+ try {
7
+ while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
8
+ }
9
+ catch (error) { e = { error: error }; }
10
+ finally {
11
+ try {
12
+ if (r && !r.done && (m = i["return"])) m.call(i);
13
+ }
14
+ finally { if (e) throw e.error; }
15
+ }
16
+ return ar;
17
+ };
18
+ Object.defineProperty(exports, "__esModule", { value: true });
19
+ var react_1 = require("react");
20
+ var spase_1 = require("spase");
21
+ /**
22
+ * Hook for returning the size of the viewport whenever it changes.
23
+ *
24
+ * @returns The most current viewport size.
25
+ */
26
+ function useViewportSize() {
27
+ var _a = __read((0, react_1.useState)(new spase_1.Size()), 2), size = _a[0], setSize = _a[1];
28
+ (0, react_1.useEffect)(function () {
29
+ function onViewportResize() {
30
+ var viewportSize = spase_1.Rect.fromViewport().size;
31
+ setSize(viewportSize);
32
+ }
33
+ window.addEventListener('resize', onViewportResize);
34
+ onViewportResize();
35
+ return function () { return window.removeEventListener('resize', onViewportResize); };
36
+ }, []);
37
+ return size;
38
+ }
39
+ exports.default = useViewportSize;
40
+ //# sourceMappingURL=useViewportSize.js.map
package/lib/hooks/useViewportSize.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useViewportSize.js","sourceRoot":"/","sources":["hooks/useViewportSize.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,+BAA2C;AAC3C,+BAAkC;AAElC;;;;GAIG;AACH,SAAwB,eAAe;IAC/B,IAAA,KAAA,OAAkB,IAAA,gBAAQ,EAAO,IAAI,YAAI,EAAE,CAAC,IAAA,EAA3C,IAAI,QAAA,EAAE,OAAO,QAA8B,CAAA;IAElD,IAAA,iBAAS,EAAC;QACR,SAAS,gBAAgB;YACvB,IAAM,YAAY,GAAG,YAAI,CAAC,YAAY,EAAE,CAAC,IAAI,CAAA;YAC7C,OAAO,CAAC,YAAY,CAAC,CAAA;QACvB,CAAC;QAED,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAA;QAEnD,gBAAgB,EAAE,CAAA;QAElB,OAAO,cAAM,OAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,EAAtD,CAAsD,CAAA;IACrE,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,IAAI,CAAA;AACb,CAAC;AAjBD,kCAiBC","sourcesContent":["import { useEffect, useState } from 'react'\nimport { Rect, Size } from 'spase'\n\n/**\n * Hook for returning the size of the viewport whenever it changes.\n *\n * @returns The most current viewport size.\n */\nexport default function useViewportSize() {\n const [size, setSize] = useState<Size>(new Size())\n\n useEffect(() => {\n function onViewportResize() {\n const viewportSize = Rect.fromViewport().size\n setSize(viewportSize)\n }\n\n window.addEventListener('resize', onViewportResize)\n\n onViewportResize()\n\n return () => window.removeEventListener('resize', onViewportResize)\n }, [])\n\n return size\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "etudes",
3
- "version": "0.61.0",
3
+ "version": "0.62.0",
4
4
  "description": "A study of styled React components",
5
5
  "main": "lib",
6
6
  "scripts": {
@@ -29,48 +29,47 @@
29
29
  "lib"
30
30
  ],
31
31
  "devDependencies": {
32
- "@babel/core": "^7.17.9",
33
- "@babel/plugin-transform-runtime": "^7.17.0",
34
- "@babel/preset-env": "^7.16.11",
32
+ "@babel/core": "^7.17.10",
33
+ "@babel/plugin-transform-runtime": "^7.17.10",
34
+ "@babel/preset-env": "^7.17.10",
35
35
  "@babel/preset-react": "^7.16.7",
36
36
  "@babel/preset-typescript": "^7.16.7",
37
37
  "@babel/runtime": "^7.17.9",
38
38
  "@types/debug": "^4.1.7",
39
39
  "@types/html-webpack-plugin": "^3.2.6",
40
40
  "@types/lodash": "^4.14.182",
41
- "@types/react": "^18.0.6",
42
- "@types/react-dom": "^18.0.2",
41
+ "@types/react": "^18.0.9",
42
+ "@types/react-dom": "^18.0.3",
43
43
  "@types/react-transition-group": "^4.4.4",
44
44
  "@types/styled-components": "^5.1.25",
45
45
  "@types/webpack": "^5.28.0",
46
46
  "@types/webpack-env": "^1.16.4",
47
- "@typescript-eslint/eslint-plugin": "^5.20.0",
48
- "@typescript-eslint/parser": "^5.20.0",
47
+ "@typescript-eslint/eslint-plugin": "^5.22.0",
48
+ "@typescript-eslint/parser": "^5.22.0",
49
49
  "babel-loader": "^8.2.5",
50
50
  "babel-plugin-styled-components": "^2.0.7",
51
51
  "concurrently": "^7.1.0",
52
52
  "cross-env": "^7.0.3",
53
53
  "debug": "^4.3.4",
54
- "eslint": "^8.14.0",
54
+ "eslint": "^8.15.0",
55
55
  "file-loader": "^6.2.0",
56
56
  "html-webpack-plugin": "^5.5.0",
57
57
  "promptu": "^5.8.0",
58
58
  "raw-loader": "^4.0.2",
59
- "react": "^18.0.0",
60
- "react-dom": "^18.0.0",
61
- "react-is": "^18.0.0",
59
+ "react": "^18.1.0",
60
+ "react-dom": "^18.1.0",
62
61
  "react-router": "^6.3.0",
63
62
  "react-router-dom": "^6.3.0",
64
63
  "rimraf": "^3.0.2",
65
64
  "styled-components": "^5.3.5",
66
- "ts-loader": "^9.2.8",
65
+ "ts-loader": "^9.3.0",
67
66
  "ts-node": "^10.7.0",
68
- "typescript": "^4.6.3",
67
+ "typescript": "^4.6.4",
69
68
  "url-loader": "^4.1.1",
70
69
  "wait-on": "^6.0.1",
71
70
  "webpack": "^5.72.0",
72
71
  "webpack-cli": "^4.9.2",
73
- "webpack-dev-server": "^4.8.1"
72
+ "webpack-dev-server": "^4.9.0"
74
73
  },
75
74
  "dependencies": {
76
75
  "classnames": "^2.3.1",
@@ -82,7 +81,7 @@
82
81
  "spase": "^6.3.0"
83
82
  },
84
83
  "peerDependencies": {
85
- "react": "^18.0.0",
84
+ "react": "^18.1.0",
86
85
  "styled-components": "^5.3.5"
87
86
  },
88
87
  "optionalDependencies": {