etudes 2.4.0 → 2.5.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/FlatSVG.js +51 -72
- package/lib/FlatSVG.js.map +1 -1
- package/lib/WithTooltip.js +2 -1
- package/lib/WithTooltip.js.map +1 -1
- package/package.json +10 -8
package/lib/FlatSVG.js
CHANGED
|
@@ -44,32 +44,19 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
44
44
|
}
|
|
45
45
|
return t;
|
|
46
46
|
};
|
|
47
|
-
var
|
|
48
|
-
var
|
|
49
|
-
if (
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
catch (error) { e = { error: error }; }
|
|
55
|
-
finally {
|
|
56
|
-
try {
|
|
57
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
58
|
-
}
|
|
59
|
-
finally { if (e) throw e.error; }
|
|
60
|
-
}
|
|
61
|
-
return ar;
|
|
62
|
-
};
|
|
63
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
64
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
65
|
-
if (ar || !(i in from)) {
|
|
66
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
67
|
-
ar[i] = from[i];
|
|
47
|
+
var __values = (this && this.__values) || function(o) {
|
|
48
|
+
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
|
|
49
|
+
if (m) return m.call(o);
|
|
50
|
+
if (o && typeof o.length === "number") return {
|
|
51
|
+
next: function () {
|
|
52
|
+
if (o && i >= o.length) o = void 0;
|
|
53
|
+
return { value: o && o[i++], done: !o };
|
|
68
54
|
}
|
|
69
|
-
}
|
|
70
|
-
|
|
55
|
+
};
|
|
56
|
+
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
|
|
71
57
|
};
|
|
72
58
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
59
|
+
var fast_xml_parser_1 = require("fast-xml-parser");
|
|
73
60
|
var react_1 = __importStar(require("react"));
|
|
74
61
|
/**
|
|
75
62
|
* A component whose root element wraps an SVG markup. When wrapping the SVG, it
|
|
@@ -78,57 +65,49 @@ var react_1 = __importStar(require("react"));
|
|
|
78
65
|
*/
|
|
79
66
|
exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
80
67
|
var svg = _a.svg, _b = _a.stripClasses, stripClasses = _b === void 0 ? true : _b, _c = _a.stripExtraneousAttributes, stripExtraneousAttributes = _c === void 0 ? true : _c, _d = _a.stripIds, stripIds = _d === void 0 ? true : _d, _e = _a.stripStyles, stripStyles = _e === void 0 ? true : _e, _f = _a.whitelistedAttributes, whitelistedAttributes = _f === void 0 ? ['viewBox'] : _f, props = __rest(_a, ["svg", "stripClasses", "stripExtraneousAttributes", "stripIds", "stripStyles", "whitelistedAttributes"]);
|
|
68
|
+
var attributeNamePrefix = '@_';
|
|
81
69
|
var sanitizedMarkup = function () {
|
|
82
|
-
var
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
70
|
+
var parser = new fast_xml_parser_1.XMLParser({
|
|
71
|
+
attributeNamePrefix: attributeNamePrefix,
|
|
72
|
+
ignoreAttributes: false,
|
|
73
|
+
ignoreDeclaration: true,
|
|
74
|
+
ignorePiTags: true,
|
|
75
|
+
removeNSPrefix: true,
|
|
76
|
+
trimValues: true,
|
|
77
|
+
updateTag: function (tagName, jPath, attrs) {
|
|
78
|
+
var e_1, _a;
|
|
79
|
+
if (stripStyles && tagName === 'style')
|
|
80
|
+
return false;
|
|
81
|
+
var attrNames = Object.keys(attrs);
|
|
82
|
+
try {
|
|
83
|
+
for (var attrNames_1 = __values(attrNames), attrNames_1_1 = attrNames_1.next(); !attrNames_1_1.done; attrNames_1_1 = attrNames_1.next()) {
|
|
84
|
+
var attrName = attrNames_1_1.value;
|
|
85
|
+
if (stripIds && attrName.toLowerCase() === "".concat(attributeNamePrefix, "id"))
|
|
86
|
+
delete attrs[attrName];
|
|
87
|
+
if (stripClasses && attrName.toLowerCase() === "".concat(attributeNamePrefix, "class"))
|
|
88
|
+
delete attrs[attrName];
|
|
89
|
+
if (stripStyles && attrName.toLowerCase() === "".concat(attributeNamePrefix, "style"))
|
|
90
|
+
delete attrs[attrName];
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
94
|
+
finally {
|
|
95
|
+
try {
|
|
96
|
+
if (attrNames_1_1 && !attrNames_1_1.done && (_a = attrNames_1.return)) _a.call(attrNames_1);
|
|
97
|
+
}
|
|
98
|
+
finally { if (e_1) throw e_1.error; }
|
|
99
|
+
}
|
|
100
|
+
return tagName;
|
|
101
|
+
},
|
|
102
|
+
});
|
|
103
|
+
var builder = new fast_xml_parser_1.XMLBuilder({
|
|
104
|
+
attributeNamePrefix: attributeNamePrefix,
|
|
105
|
+
format: true,
|
|
106
|
+
ignoreAttributes: false,
|
|
107
|
+
});
|
|
108
|
+
var xml = parser.parse(svg);
|
|
109
|
+
return builder.build(xml);
|
|
99
110
|
};
|
|
100
111
|
return (react_1.default.createElement("figure", __assign({}, props, { ref: ref, dangerouslySetInnerHTML: { __html: sanitizedMarkup() } })));
|
|
101
112
|
});
|
|
102
|
-
function removeStyles(element) {
|
|
103
|
-
element.removeAttribute('style');
|
|
104
|
-
var inlineStyles = element.getElementsByTagName('style');
|
|
105
|
-
var numInlineStyles = inlineStyles.length;
|
|
106
|
-
for (var i = 0; i < numInlineStyles; i++) {
|
|
107
|
-
var inlineStyle = inlineStyles[i];
|
|
108
|
-
inlineStyle.remove();
|
|
109
|
-
}
|
|
110
|
-
var numChildren = element.children.length;
|
|
111
|
-
for (var i = 0; i < numChildren; i++) {
|
|
112
|
-
removeStyles(element.children[i]);
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
function removeAttributes(element, attributes, recursive, whitelist) {
|
|
116
|
-
if (attributes === void 0) { attributes = undefined; }
|
|
117
|
-
if (recursive === void 0) { recursive = false; }
|
|
118
|
-
if (whitelist === void 0) { whitelist = []; }
|
|
119
|
-
var attrs = attributes !== null && attributes !== void 0 ? attributes : element.getAttributeNames();
|
|
120
|
-
var numAttrs = attrs.length;
|
|
121
|
-
for (var i = 0; i < numAttrs; i++) {
|
|
122
|
-
var attr = attrs[i];
|
|
123
|
-
var keep = whitelist.indexOf(attr) > -1;
|
|
124
|
-
if (!keep)
|
|
125
|
-
element.removeAttribute(attr);
|
|
126
|
-
}
|
|
127
|
-
if (recursive) {
|
|
128
|
-
var numChildren = element.children.length;
|
|
129
|
-
for (var i = 0; i < numChildren; i++) {
|
|
130
|
-
removeAttributes(element.children[i], attributes, recursive, whitelist);
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
113
|
//# sourceMappingURL=FlatSVG.js.map
|
package/lib/FlatSVG.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlatSVG.js","sourceRoot":"/","sources":["FlatSVG.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FlatSVG.js","sourceRoot":"/","sources":["FlatSVG.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAAuD;AACvD,6CAAyD;AAyCzD;;;;GAIG;AACH,kBAAe,IAAA,kBAAU,EAA+B,UAAC,EAQxD,EAAE,GAAG;IAPJ,IAAA,GAAG,SAAA,EACH,oBAAmB,EAAnB,YAAY,mBAAG,IAAI,KAAA,EACnB,iCAAgC,EAAhC,yBAAyB,mBAAG,IAAI,KAAA,EAChC,gBAAe,EAAf,QAAQ,mBAAG,IAAI,KAAA,EACf,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,KAAA,EAClB,6BAAmC,EAAnC,qBAAqB,mBAAG,CAAC,SAAS,CAAC,KAAA,EAChC,KAAK,cAP+C,wGAQxD,CADS;IAER,IAAM,mBAAmB,GAAG,IAAI,CAAA;IAEhC,IAAM,eAAe,GAAG;QACtB,IAAM,MAAM,GAAG,IAAI,2BAAS,CAAC;YAC3B,mBAAmB,qBAAA;YACnB,gBAAgB,EAAE,KAAK;YACvB,iBAAiB,EAAE,IAAI;YACvB,YAAY,EAAE,IAAI;YAClB,cAAc,EAAE,IAAI;YACpB,UAAU,EAAE,IAAI;YAChB,SAAS,EAAE,UAAC,OAAO,EAAE,KAAK,EAAE,KAAK;;gBAC/B,IAAI,WAAW,IAAI,OAAO,KAAK,OAAO;oBAAE,OAAO,KAAK,CAAA;gBAEpD,IAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;;oBAEpC,KAAuB,IAAA,cAAA,SAAA,SAAS,CAAA,oCAAA,2DAAE;wBAA7B,IAAM,QAAQ,sBAAA;wBACjB,IAAI,QAAQ,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,OAAI;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;wBAC7F,IAAI,YAAY,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,UAAO;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;wBACpG,IAAI,WAAW,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,UAAO;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;qBACpG;;;;;;;;;gBAED,OAAO,OAAO,CAAA;YAChB,CAAC;SACF,CAAC,CAAA;QAEF,IAAM,OAAO,GAAG,IAAI,4BAAU,CAAC;YAC7B,mBAAmB,qBAAA;YACnB,MAAM,EAAE,IAAI;YACZ,gBAAgB,EAAE,KAAK;SACxB,CAAC,CAAA;QAEF,IAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QAE7B,OAAO,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IAC3B,CAAC,CAAA;IAED,OAAO,CACL,qDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,IACtD,CACH,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import { XMLBuilder, XMLParser } from 'fast-xml-parser'\nimport React, { HTMLAttributes, forwardRef } from 'react'\n\nexport type FlatSVGProps = HTMLAttributes<HTMLDivElement> & {\n /**\n * The SVG string markup, i.e. \"<svg>...</svg>\".\n */\n svg: string\n\n /**\n * Specifies whether the 'class' should be removed in the SVG root node and\n * all of its child nodes.\n */\n stripClasses?: boolean\n\n /**\n * Specifies whether extraneous attributes should be removed from the SVG root\n * node. The `whitelistedAttributes` prop defines what attributes should be\n * kept.\n */\n stripExtraneousAttributes?: boolean\n\n /**\n * Specifies whether the 'id' attribute should be removed in the SVG root node\n * and all of its child nodes.\n */\n stripIds?: boolean\n\n /**\n * Specifies whether the 'style' atribute and any <style> nodes should be\n * removed in the SVG root node and all of its child nodes.\n */\n stripStyles?: boolean\n\n /**\n * Specifies attribute names to exclude from being stripped if\n * `stripExtraneousAttributes` is enabled. By default, only `viewBox` is\n * whitelisted.\n */\n whitelistedAttributes?: string[]\n}\n\n/**\n * A component whose root element wraps an SVG markup. When wrapping the SVG, it\n * will attempt to sanitize the markup (i.e. stripping useless attributes)\n * according to the props specified.\n */\nexport default forwardRef<HTMLDivElement, FlatSVGProps>(({\n svg,\n stripClasses = true,\n stripExtraneousAttributes = true,\n stripIds = true,\n stripStyles = true,\n whitelistedAttributes = ['viewBox'],\n ...props\n}, ref) => {\n const attributeNamePrefix = '@_'\n\n const sanitizedMarkup = () => {\n const parser = new XMLParser({\n attributeNamePrefix,\n ignoreAttributes: false,\n ignoreDeclaration: true,\n ignorePiTags: true,\n removeNSPrefix: true,\n trimValues: true,\n updateTag: (tagName, jPath, attrs) => {\n if (stripStyles && tagName === 'style') return false\n\n const attrNames = Object.keys(attrs)\n\n for (const attrName of attrNames) {\n if (stripIds && attrName.toLowerCase() === `${attributeNamePrefix}id`) delete attrs[attrName]\n if (stripClasses && attrName.toLowerCase() === `${attributeNamePrefix}class`) delete attrs[attrName]\n if (stripStyles && attrName.toLowerCase() === `${attributeNamePrefix}style`) delete attrs[attrName]\n }\n\n return tagName\n },\n })\n\n const builder = new XMLBuilder({\n attributeNamePrefix,\n format: true,\n ignoreAttributes: false,\n })\n\n const xml = parser.parse(svg)\n\n return builder.build(xml)\n }\n\n return (\n <figure\n {...props}\n ref={ref}\n dangerouslySetInnerHTML={{ __html: sanitizedMarkup() }}\n />\n )\n})\n"]}
|
package/lib/WithTooltip.js
CHANGED
|
@@ -49,8 +49,9 @@ function WithTooltip(_a) {
|
|
|
49
49
|
var children = _a.children, className = _a.className, style = _a.style, _b = _a.arrowHeight, arrowHeight = _b === void 0 ? 8 : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#000' : _c, _d = _a.gap, gap = _d === void 0 ? 5 : _d, hint = _a.hint, _e = _a.maxTextWidth, maxTextWidth = _e === void 0 ? 200 : _e, _f = _a.threshold, threshold = _f === void 0 ? 100 : _f;
|
|
50
50
|
var createDialog = function () {
|
|
51
51
|
var dialog = document.createElement('div');
|
|
52
|
+
var dialogStyle = (0, styles_1.default)(style, fixedStyles.dialog);
|
|
52
53
|
dialog.className = (0, classnames_1.default)(className);
|
|
53
|
-
Object.keys(
|
|
54
|
+
Object.keys(dialogStyle).forEach(function (rule) { return dialog.style[rule] = dialogStyle[rule]; });
|
|
54
55
|
var arrow = document.createElement('div');
|
|
55
56
|
Object.keys(fixedStyles.arrow).forEach(function (rule) { return arrow.style[rule] = fixedStyles.arrow[rule]; });
|
|
56
57
|
var content = document.createElement('div');
|
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 classNames from 'classnames'\nimport React, { CSSProperties, HTMLAttributes, MouseEvent, PropsWithChildren, useEffect, useRef } from 'react'\nimport { Rect, Size } from 'spase'\nimport ExtractChild from './ExtractChild'\nimport useElementRect from './hooks/useElementRect'\nimport useViewportSize from './hooks/useViewportSize'\nimport asStyleDict from './utils/asStyleDict'\nimport styles from './utils/styles'\n\ntype Alignment = 'tl' | 'tc' | 'tr' | 'cl' | 'cr' | 'bl' | 'bc' | 'br'\n\nexport type WithToolTipProps = Pick<HTMLAttributes<HTMLElement>, 'className' | 'style'> & PropsWithChildren<{\n /**\n * The height of the arrow. The width (longest edge) of the arrow is always\n * twice its height.\n */\n arrowHeight?: number\n\n /**\n * Color of the dialog background, same format as a CSS color string (i.e.\n * '#000').\n */\n backgroundColor?: string\n\n /**\n * Specifies if the tooltip should be disabled in touch devices (i.e. `html`\n * 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\n * zero.\n */\n gap?: number\n\n /**\n * The maximum width (in pixels) of the hint text.\n */\n maxTextWidth?: number\n\n /**\n * The minimum space (in pixels) between the target element and the edge of\n * the window required to trigger an alignment change, defaults to `100px`.\n */\n threshold?: number\n}>\n\nexport default function WithTooltip({\n children,\n className,\n style,\n arrowHeight = 8,\n backgroundColor = '#000',\n gap = 5,\n hint,\n maxTextWidth = 200,\n threshold = 100,\n}: WithToolTipProps) {\n const createDialog = () => {\n const dialog = document.createElement('div')\n dialog.className = classNames(className)\n Object.keys(styles(style, fixedStyles.dialog)).forEach(rule => (dialog.style as any)[rule] = (fixedStyles.dialog as any)[rule])\n\n const arrow = document.createElement('div')\n Object.keys(fixedStyles.arrow).forEach(rule => (arrow.style as any)[rule] = (fixedStyles.arrow as any)[rule])\n\n const content = document.createElement('div')\n content.innerText = hint\n Object.keys(fixedStyles.content).forEach(rule => (content.style as any)[rule] = (fixedStyles.content as any)[rule])\n\n dialog.appendChild(arrow)\n dialog.appendChild(content)\n\n return dialog\n }\n\n const computeAlignment = () => {\n if (!rootRef.current) return 'bc'\n\n const vrect = Rect.fromViewport()\n const irect = Rect.intersecting(rootRef.current)\n\n if (irect) {\n const leftBound = irect.left - vrect.left < threshold\n const rightBound = vrect.right - irect.right < threshold\n const topBound = irect.top - vrect.top < threshold\n const bottomBound = vrect.bottom - irect.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 = () => {\n if (!dialogRef.current) return new Size()\n\n const computedStyle = window.getComputedStyle(dialogRef.current)\n const div = document.createElement('div')\n div.innerText = 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 mouseEnterHandler = (event: MouseEvent) => {\n if (!dialogRef.current) return\n dialogRef.current.style.opacity = '1'\n }\n\n const mouseLeaveHandler = (event: MouseEvent) => {\n if (!dialogRef.current) return\n dialogRef.current.style.opacity = '0'\n }\n\n const rootRef = useRef<HTMLElement>(null)\n const dialogRef = useRef<HTMLDivElement>()\n const rect = useElementRect(rootRef)\n const viewportSize = useViewportSize()\n const alignment = computeAlignment()\n const textSize = computeTextSize()\n\n useEffect(() => {\n const dialogNode = createDialog()\n rootRef.current?.appendChild(dialogNode)\n\n dialogRef.current = dialogNode\n\n return () => {\n rootRef.current?.removeChild(dialogNode)\n }\n }, [rect, viewportSize])\n\n const fixedStyles = asStyleDict({\n dialog: {\n background: 'none',\n boxSizing: 'border-box',\n height: `${rect.size.height}px`,\n left: '0',\n margin: '0',\n opacity: '0',\n position: 'absolute',\n top: '0',\n width: `${rect.size.width}px`,\n zIndex: '10000',\n },\n arrow: {\n borderStyle: 'solid',\n borderWidth: `${arrowHeight}px`,\n height: '0',\n pointerEvents: 'none',\n position: 'absolute',\n width: '0',\n ...makeDisplacementStyle(alignment, arrowHeight, gap),\n ...makeArrowPositionStyle(alignment, arrowHeight, gap, backgroundColor),\n },\n content: {\n background: backgroundColor,\n boxSizing: 'content-box',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n letterSpacing: 'inherit',\n lineHeight: 'inherit',\n maxWidth: `${maxTextWidth}px`,\n overflow: 'hidden',\n padding: 'inherit',\n pointerEvents: 'none',\n position: 'absolute',\n textAlign: 'inherit',\n transition: 'inherit',\n width: textSize.width > 0 ? `${textSize.width}px` : 'auto',\n ...makeDisplacementStyle(alignment, arrowHeight, gap),\n ...makeContentPositionStyle(alignment, arrowHeight, gap),\n },\n })\n\n return (\n <ExtractChild\n children={children}\n ref={rootRef}\n onMouseEnter={mouseEnterHandler}\n onMouseLeave={mouseLeaveHandler}\n />\n )\n}\n\nfunction makeDisplacementStyle(alignment: Alignment, arrowHeight: number, gap: number): CSSProperties {\n switch (alignment) {\n case 'tl': return {\n top: `${-arrowHeight}px`,\n left: `calc(50% + ${arrowHeight * 2.5}px)`,\n }\n case 'tc': return {\n top: `${-arrowHeight}px`,\n left: '50%',\n }\n case 'tr': return {\n top: `${-arrowHeight}px`,\n right: `calc(50% + ${arrowHeight * 2.5}px)`,\n }\n case 'cl': return {\n top: '50%',\n left: `${-arrowHeight}px`,\n }\n case 'cr': return {\n top: '50%',\n right: `${-arrowHeight}px`,\n }\n case 'bl': return {\n bottom: `${-arrowHeight}px`,\n left: `calc(50% + ${arrowHeight * 2.5}px)`,\n }\n case 'bc': return {\n bottom: `${-arrowHeight}px`,\n left: '50%',\n }\n case 'br': return {\n bottom: `${-arrowHeight}px`,\n right: `calc(50% + ${arrowHeight * 2.5}px)`,\n }\n default: return {\n\n }\n }\n}\n\nfunction makeContentPositionStyle(alignment: Alignment, arrowHeight: number, gap: number): CSSProperties {\n switch (alignment) {\n case 'tl': return {\n transform: `translate3d(calc(-100% - ${gap}px), calc(-100% - ${gap}px), 0)`,\n }\n case 'tc': return {\n transform: `translate3d(-50%, calc(-100% - ${gap}px), 0)`,\n }\n case 'tr': return {\n transform: `translate3d(calc(100% + ${gap}px), calc(-100% - ${gap}px), 0)`,\n }\n case 'cl': return {\n transform: `translate3d(calc(-100% - ${gap}px), -50%, 0)`,\n }\n case 'cr': return {\n transform: `translate3d(calc(100% + ${gap}px), -50%, 0)`,\n }\n case 'bl': return {\n transform: `translate3d(calc(-100% - ${gap}px), calc(100% + ${gap}px), 0)`,\n }\n case 'bc': return {\n transform: `translate3d(-50%, calc(100% + ${gap}px), 0)`,\n }\n case 'br': return {\n transform: `translate3d(calc(100% + ${gap}px), calc(100% + ${gap}px), 0)`,\n }\n default: return {\n\n }\n }\n}\n\nfunction makeArrowPositionStyle(alignment: Alignment, arrowHeight: number, gap: number, color: string): CSSProperties {\n switch (alignment) {\n case 'tl': return {\n borderColor: `${color} transparent transparent transparent`,\n transform: `translate3d(calc(0% - ${gap}px - ${arrowHeight * 3}px), calc(0% - ${gap}px), 0)`,\n }\n case 'tc': return {\n borderColor: `${color} transparent transparent transparent`,\n transform: `translate3d(-50%, calc(0% - ${gap}px), 0)`,\n }\n case 'tr': return {\n borderColor: `${color} transparent transparent transparent`,\n transform: `translate3d(calc(100% + ${gap}px + ${arrowHeight}px), calc(0% - ${gap}px), 0)`,\n }\n case 'cl': return {\n borderColor: `transparent transparent transparent ${color}`,\n transform: `translate3d(calc(0% - ${gap}px), -50%, 0)`,\n }\n case 'cr': return {\n borderColor: `transparent ${color} transparent transparent`,\n transform: `translate3d(calc(0% + ${gap}px), -50%, 0)`,\n }\n case 'bl': return {\n borderColor: `transparent transparent ${color} transparent`,\n transform: `translate3d(calc(0% - ${gap}px - ${arrowHeight * 3}px), calc(0% + ${gap}px), 0)`,\n }\n case 'bc': return {\n borderColor: `transparent transparent ${color} transparent`,\n transform: `translate3d(-50%, calc(0% + ${gap}px), 0)`,\n }\n case 'br': return {\n borderColor: `transparent transparent ${color} transparent`,\n transform: `translate3d(calc(100% + ${gap}px + ${arrowHeight}px), calc(0% + ${gap}px), 0)`,\n }\n default: return {\n\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"WithTooltip.js","sourceRoot":"/","sources":["WithTooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { CSSProperties, HTMLAttributes, MouseEvent, PropsWithChildren, useEffect, useRef } from 'react'\nimport { Rect, Size } from 'spase'\nimport ExtractChild from './ExtractChild'\nimport useElementRect from './hooks/useElementRect'\nimport useViewportSize from './hooks/useViewportSize'\nimport asStyleDict from './utils/asStyleDict'\nimport styles from './utils/styles'\n\ntype Alignment = 'tl' | 'tc' | 'tr' | 'cl' | 'cr' | 'bl' | 'bc' | 'br'\n\nexport type WithToolTipProps = Pick<HTMLAttributes<HTMLElement>, 'className' | 'style'> & PropsWithChildren<{\n /**\n * The height of the arrow. The width (longest edge) of the arrow is always\n * twice its height.\n */\n arrowHeight?: number\n\n /**\n * Color of the dialog background, same format as a CSS color string (i.e.\n * '#000').\n */\n backgroundColor?: string\n\n /**\n * Specifies if the tooltip should be disabled in touch devices (i.e. `html`\n * 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\n * zero.\n */\n gap?: number\n\n /**\n * The maximum width (in pixels) of the hint text.\n */\n maxTextWidth?: number\n\n /**\n * The minimum space (in pixels) between the target element and the edge of\n * the window required to trigger an alignment change, defaults to `100px`.\n */\n threshold?: number\n}>\n\nexport default function WithTooltip({\n children,\n className,\n style,\n arrowHeight = 8,\n backgroundColor = '#000',\n gap = 5,\n hint,\n maxTextWidth = 200,\n threshold = 100,\n}: WithToolTipProps) {\n const createDialog = () => {\n const dialog = document.createElement('div')\n const dialogStyle = styles(style, fixedStyles.dialog)\n dialog.className = classNames(className)\n Object.keys(dialogStyle).forEach(rule => (dialog.style as any)[rule] = (dialogStyle as any)[rule])\n\n const arrow = document.createElement('div')\n Object.keys(fixedStyles.arrow).forEach(rule => (arrow.style as any)[rule] = (fixedStyles.arrow as any)[rule])\n\n const content = document.createElement('div')\n content.innerText = hint\n Object.keys(fixedStyles.content).forEach(rule => (content.style as any)[rule] = (fixedStyles.content as any)[rule])\n\n dialog.appendChild(arrow)\n dialog.appendChild(content)\n\n return dialog\n }\n\n const computeAlignment = () => {\n if (!rootRef.current) return 'bc'\n\n const vrect = Rect.fromViewport()\n const irect = Rect.intersecting(rootRef.current)\n\n if (irect) {\n const leftBound = irect.left - vrect.left < threshold\n const rightBound = vrect.right - irect.right < threshold\n const topBound = irect.top - vrect.top < threshold\n const bottomBound = vrect.bottom - irect.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 = () => {\n if (!dialogRef.current) return new Size()\n\n const computedStyle = window.getComputedStyle(dialogRef.current)\n const div = document.createElement('div')\n div.innerText = 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 mouseEnterHandler = (event: MouseEvent) => {\n if (!dialogRef.current) return\n dialogRef.current.style.opacity = '1'\n }\n\n const mouseLeaveHandler = (event: MouseEvent) => {\n if (!dialogRef.current) return\n dialogRef.current.style.opacity = '0'\n }\n\n const rootRef = useRef<HTMLElement>(null)\n const dialogRef = useRef<HTMLDivElement>()\n const rect = useElementRect(rootRef)\n const viewportSize = useViewportSize()\n const alignment = computeAlignment()\n const textSize = computeTextSize()\n\n useEffect(() => {\n const dialogNode = createDialog()\n rootRef.current?.appendChild(dialogNode)\n\n dialogRef.current = dialogNode\n\n return () => {\n rootRef.current?.removeChild(dialogNode)\n }\n }, [rect, viewportSize])\n\n const fixedStyles = asStyleDict({\n dialog: {\n background: 'none',\n boxSizing: 'border-box',\n height: `${rect.size.height}px`,\n left: '0',\n margin: '0',\n opacity: '0',\n position: 'absolute',\n top: '0',\n width: `${rect.size.width}px`,\n zIndex: '10000',\n },\n arrow: {\n borderStyle: 'solid',\n borderWidth: `${arrowHeight}px`,\n height: '0',\n pointerEvents: 'none',\n position: 'absolute',\n width: '0',\n ...makeDisplacementStyle(alignment, arrowHeight, gap),\n ...makeArrowPositionStyle(alignment, arrowHeight, gap, backgroundColor),\n },\n content: {\n background: backgroundColor,\n boxSizing: 'content-box',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n letterSpacing: 'inherit',\n lineHeight: 'inherit',\n maxWidth: `${maxTextWidth}px`,\n overflow: 'hidden',\n padding: 'inherit',\n pointerEvents: 'none',\n position: 'absolute',\n textAlign: 'inherit',\n transition: 'inherit',\n width: textSize.width > 0 ? `${textSize.width}px` : 'auto',\n ...makeDisplacementStyle(alignment, arrowHeight, gap),\n ...makeContentPositionStyle(alignment, arrowHeight, gap),\n },\n })\n\n return (\n <ExtractChild\n children={children}\n ref={rootRef}\n onMouseEnter={mouseEnterHandler}\n onMouseLeave={mouseLeaveHandler}\n />\n )\n}\n\nfunction makeDisplacementStyle(alignment: Alignment, arrowHeight: number, gap: number): CSSProperties {\n switch (alignment) {\n case 'tl': return {\n top: `${-arrowHeight}px`,\n left: `calc(50% + ${arrowHeight * 2.5}px)`,\n }\n case 'tc': return {\n top: `${-arrowHeight}px`,\n left: '50%',\n }\n case 'tr': return {\n top: `${-arrowHeight}px`,\n right: `calc(50% + ${arrowHeight * 2.5}px)`,\n }\n case 'cl': return {\n top: '50%',\n left: `${-arrowHeight}px`,\n }\n case 'cr': return {\n top: '50%',\n right: `${-arrowHeight}px`,\n }\n case 'bl': return {\n bottom: `${-arrowHeight}px`,\n left: `calc(50% + ${arrowHeight * 2.5}px)`,\n }\n case 'bc': return {\n bottom: `${-arrowHeight}px`,\n left: '50%',\n }\n case 'br': return {\n bottom: `${-arrowHeight}px`,\n right: `calc(50% + ${arrowHeight * 2.5}px)`,\n }\n default: return {\n\n }\n }\n}\n\nfunction makeContentPositionStyle(alignment: Alignment, arrowHeight: number, gap: number): CSSProperties {\n switch (alignment) {\n case 'tl': return {\n transform: `translate3d(calc(-100% - ${gap}px), calc(-100% - ${gap}px), 0)`,\n }\n case 'tc': return {\n transform: `translate3d(-50%, calc(-100% - ${gap}px), 0)`,\n }\n case 'tr': return {\n transform: `translate3d(calc(100% + ${gap}px), calc(-100% - ${gap}px), 0)`,\n }\n case 'cl': return {\n transform: `translate3d(calc(-100% - ${gap}px), -50%, 0)`,\n }\n case 'cr': return {\n transform: `translate3d(calc(100% + ${gap}px), -50%, 0)`,\n }\n case 'bl': return {\n transform: `translate3d(calc(-100% - ${gap}px), calc(100% + ${gap}px), 0)`,\n }\n case 'bc': return {\n transform: `translate3d(-50%, calc(100% + ${gap}px), 0)`,\n }\n case 'br': return {\n transform: `translate3d(calc(100% + ${gap}px), calc(100% + ${gap}px), 0)`,\n }\n default: return {\n\n }\n }\n}\n\nfunction makeArrowPositionStyle(alignment: Alignment, arrowHeight: number, gap: number, color: string): CSSProperties {\n switch (alignment) {\n case 'tl': return {\n borderColor: `${color} transparent transparent transparent`,\n transform: `translate3d(calc(0% - ${gap}px - ${arrowHeight * 3}px), calc(0% - ${gap}px), 0)`,\n }\n case 'tc': return {\n borderColor: `${color} transparent transparent transparent`,\n transform: `translate3d(-50%, calc(0% - ${gap}px), 0)`,\n }\n case 'tr': return {\n borderColor: `${color} transparent transparent transparent`,\n transform: `translate3d(calc(100% + ${gap}px + ${arrowHeight}px), calc(0% - ${gap}px), 0)`,\n }\n case 'cl': return {\n borderColor: `transparent transparent transparent ${color}`,\n transform: `translate3d(calc(0% - ${gap}px), -50%, 0)`,\n }\n case 'cr': return {\n borderColor: `transparent ${color} transparent transparent`,\n transform: `translate3d(calc(0% + ${gap}px), -50%, 0)`,\n }\n case 'bl': return {\n borderColor: `transparent transparent ${color} transparent`,\n transform: `translate3d(calc(0% - ${gap}px - ${arrowHeight * 3}px), calc(0% + ${gap}px), 0)`,\n }\n case 'bc': return {\n borderColor: `transparent transparent ${color} transparent`,\n transform: `translate3d(-50%, calc(0% + ${gap}px), 0)`,\n }\n case 'br': return {\n borderColor: `transparent transparent ${color} transparent`,\n transform: `translate3d(calc(100% + ${gap}px + ${arrowHeight}px), calc(0% + ${gap}px), 0)`,\n }\n default: return {\n\n }\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "etudes",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.5.0",
|
|
4
4
|
"description": "A study of headless React components",
|
|
5
5
|
"main": "lib",
|
|
6
6
|
"scripts": {
|
|
@@ -29,11 +29,11 @@
|
|
|
29
29
|
"lib"
|
|
30
30
|
],
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@babel/core": "^7.22.
|
|
33
|
-
"@babel/plugin-transform-runtime": "^7.22.
|
|
34
|
-
"@babel/preset-env": "^7.22.
|
|
35
|
-
"@babel/preset-react": "^7.22.
|
|
36
|
-
"@babel/preset-typescript": "^7.22.
|
|
32
|
+
"@babel/core": "^7.22.15",
|
|
33
|
+
"@babel/plugin-transform-runtime": "^7.22.15",
|
|
34
|
+
"@babel/preset-env": "^7.22.15",
|
|
35
|
+
"@babel/preset-react": "^7.22.15",
|
|
36
|
+
"@babel/preset-typescript": "^7.22.15",
|
|
37
37
|
"@types/debug": "^4.1.8",
|
|
38
38
|
"@types/html-webpack-plugin": "^3.2.6",
|
|
39
39
|
"@types/node-polyglot": "^2.4.2",
|
|
@@ -43,14 +43,15 @@
|
|
|
43
43
|
"@types/styled-components": "^5.1.26",
|
|
44
44
|
"@types/webpack": "^5.28.2",
|
|
45
45
|
"@types/webpack-env": "^1.18.1",
|
|
46
|
-
"@typescript-eslint/eslint-plugin": "^6.
|
|
47
|
-
"@typescript-eslint/parser": "^6.
|
|
46
|
+
"@typescript-eslint/eslint-plugin": "^6.6.0",
|
|
47
|
+
"@typescript-eslint/parser": "^6.6.0",
|
|
48
48
|
"babel-loader": "^9.1.3",
|
|
49
49
|
"babel-plugin-styled-components": "^2.1.4",
|
|
50
50
|
"concurrently": "^8.2.1",
|
|
51
51
|
"cross-env": "^7.0.3",
|
|
52
52
|
"debug": "^4.3.4",
|
|
53
53
|
"eslint": "^8.48.0",
|
|
54
|
+
"fast-xml-parser": "^4.2.7",
|
|
54
55
|
"html-webpack-plugin": "^5.5.3",
|
|
55
56
|
"react": "^18.2.0",
|
|
56
57
|
"react-dom": "^18.2.0",
|
|
@@ -77,6 +78,7 @@
|
|
|
77
78
|
"react": "^18.2.0"
|
|
78
79
|
},
|
|
79
80
|
"optionalDependencies": {
|
|
81
|
+
"fast-xml-parser": "^4.2.7",
|
|
80
82
|
"react-router": "^6.15.0",
|
|
81
83
|
"react-router-dom": "^6.15.0"
|
|
82
84
|
}
|