Socket
Socket
Sign inDemoInstall

@visx/text

Package Overview
Dependencies
16
Maintainers
4
Versions
22
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 2.12.2 to 2.17.0-alpha.0

85

esm/hooks/useText.js
var _excluded = ["verticalAnchor", "scaleToFit", "angle", "width", "lineHeight", "capHeight", "children", "style"];
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import React, { useMemo } from 'react';
import { useMemo } from 'react';
import reduceCSSCalc from 'reduce-css-calc';
import getStringWidth from '../util/getStringWidth';
function isNumber(val) {
return typeof val === 'number';
}
function isXOrYInValid(xOrY) {
return (// number that is not NaN or Infinity
typeof xOrY === 'number' && Number.isFinite(xOrY) || // for percentage
return (
// number that is not NaN or Infinity
typeof xOrY === 'number' && Number.isFinite(xOrY) ||
// for percentage
typeof xOrY === 'string'
);
}
export default function useText(props) {
var _props$verticalAnchor = props.verticalAnchor,
verticalAnchor = _props$verticalAnchor === void 0 ? 'end' : _props$verticalAnchor,
_props$scaleToFit = props.scaleToFit,
scaleToFit = _props$scaleToFit === void 0 ? false : _props$scaleToFit,
angle = props.angle,
width = props.width,
_props$lineHeight = props.lineHeight,
lineHeight = _props$lineHeight === void 0 ? '1em' : _props$lineHeight,
_props$capHeight = props.capHeight,
capHeight = _props$capHeight === void 0 ? '0.71em' : _props$capHeight,
children = props.children,
style = props.style,
textProps = _objectWithoutPropertiesLoose(props, _excluded);
verticalAnchor = _props$verticalAnchor === void 0 ? 'end' : _props$verticalAnchor,
_props$scaleToFit = props.scaleToFit,
scaleToFit = _props$scaleToFit === void 0 ? false : _props$scaleToFit,
angle = props.angle,
width = props.width,
_props$lineHeight = props.lineHeight,
lineHeight = _props$lineHeight === void 0 ? '1em' : _props$lineHeight,
_props$capHeight = props.capHeight,
capHeight = _props$capHeight === void 0 ? '0.71em' : _props$capHeight,
children = props.children,
style = props.style,
textProps = _objectWithoutPropertiesLoose(props, _excluded);
var _textProps$x = textProps.x,
x = _textProps$x === void 0 ? 0 : _textProps$x,
_textProps$y = textProps.y,
y = _textProps$y === void 0 ? 0 : _textProps$y;
x = _textProps$x === void 0 ? 0 : _textProps$x,
_textProps$y = textProps.y,
y = _textProps$y === void 0 ? 0 : _textProps$y;
var isXOrYNotValid = !isXOrYInValid(x) || !isXOrYInValid(y);
var _useMemo = useMemo(function () {
var words = children == null ? [] : children.toString().split(/(?:(?!\u00A0+)\s+)/);
return {
wordsWithWidth: words.map(function (word) {
return {
word: word,
wordWidth: getStringWidth(word, style) || 0
};
}),
spaceWidth: getStringWidth("\xA0", style) || 0
};
}, [children, style]),
wordsWithWidth = _useMemo.wordsWithWidth,
spaceWidth = _useMemo.spaceWidth;
var words = children == null ? [] : children.toString().split(/(?:(?!\u00A0+)\s+)/);
return {
wordsWithWidth: words.map(function (word) {
return {
word: word,
wordWidth: getStringWidth(word, style) || 0
};
}),
spaceWidth: getStringWidth("\xA0", style) || 0
};
}, [children, style]),
wordsWithWidth = _useMemo.wordsWithWidth,
spaceWidth = _useMemo.spaceWidth;
var wordsByLines = useMemo(function () {
if (isXOrYNotValid) {
return [];
} // Only perform calculations if using features that require them (multiline, scaleToFit)
}
// Only perform calculations if using features that require them (multiline, scaleToFit)
if (width || scaleToFit) {
return wordsWithWidth.reduce(function (result, _ref) {
var word = _ref.word,
wordWidth = _ref.wordWidth;
wordWidth = _ref.wordWidth;
var currentLine = result[result.length - 1];
if (currentLine && (width == null || scaleToFit || (currentLine.width || 0) + wordWidth + spaceWidth < width)) {

@@ -81,7 +74,5 @@ // Word can be added to an existing line

}
return result;
}, []);
}
return [{

@@ -97,7 +88,5 @@ words: children == null ? [] : children.toString().split(/(?:(?!\u00A0+)\s+)/)

var transforms = [];
if (isXOrYNotValid) {
return '';
}
if (isNumber(x) && isNumber(y) && isNumber(width) && scaleToFit && wordsByLines.length > 0) {

@@ -111,7 +100,5 @@ var lineWidth = wordsByLines[0].width || 1;

}
if (angle) {
transforms.push("rotate(" + angle + ", " + x + ", " + y + ")");
}
return transforms.length > 0 ? transforms.join(' ') : '';

@@ -118,0 +105,0 @@ }, [isXOrYNotValid, x, y, width, scaleToFit, wordsByLines, angle]);

var _excluded = ["dx", "dy", "textAnchor", "innerRef", "innerTextRef", "verticalAnchor", "angle", "lineHeight", "scaleToFit", "capHeight", "width"];
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import React from 'react';

@@ -14,28 +11,25 @@ import useText from './hooks/useText';

var _props$dx = props.dx,
dx = _props$dx === void 0 ? 0 : _props$dx,
_props$dy = props.dy,
dy = _props$dy === void 0 ? 0 : _props$dy,
_props$textAnchor = props.textAnchor,
textAnchor = _props$textAnchor === void 0 ? 'start' : _props$textAnchor,
innerRef = props.innerRef,
innerTextRef = props.innerTextRef,
verticalAnchor = props.verticalAnchor,
angle = props.angle,
_props$lineHeight = props.lineHeight,
lineHeight = _props$lineHeight === void 0 ? '1em' : _props$lineHeight,
_props$scaleToFit = props.scaleToFit,
scaleToFit = _props$scaleToFit === void 0 ? false : _props$scaleToFit,
capHeight = props.capHeight,
width = props.width,
textProps = _objectWithoutPropertiesLoose(props, _excluded);
dx = _props$dx === void 0 ? 0 : _props$dx,
_props$dy = props.dy,
dy = _props$dy === void 0 ? 0 : _props$dy,
_props$textAnchor = props.textAnchor,
textAnchor = _props$textAnchor === void 0 ? 'start' : _props$textAnchor,
innerRef = props.innerRef,
innerTextRef = props.innerTextRef,
verticalAnchor = props.verticalAnchor,
angle = props.angle,
_props$lineHeight = props.lineHeight,
lineHeight = _props$lineHeight === void 0 ? '1em' : _props$lineHeight,
_props$scaleToFit = props.scaleToFit,
scaleToFit = _props$scaleToFit === void 0 ? false : _props$scaleToFit,
capHeight = props.capHeight,
width = props.width,
textProps = _objectWithoutPropertiesLoose(props, _excluded);
var _textProps$x = textProps.x,
x = _textProps$x === void 0 ? 0 : _textProps$x,
fontSize = textProps.fontSize;
x = _textProps$x === void 0 ? 0 : _textProps$x,
fontSize = textProps.fontSize;
var _useText = useText(props),
wordsByLines = _useText.wordsByLines,
startDy = _useText.startDy,
transform = _useText.transform;
wordsByLines = _useText.wordsByLines,
startDy = _useText.startDy,
transform = _useText.transform;
return /*#__PURE__*/React.createElement("svg", {

@@ -42,0 +36,0 @@ ref: innerRef,

import memoize from 'lodash/memoize';
var MEASUREMENT_ELEMENT_ID = '__react_svg_text_measurement_id';
function getStringWidth(str, style) {

@@ -8,3 +7,2 @@ try {

var textEl = document.getElementById(MEASUREMENT_ELEMENT_ID);
if (!textEl) {

@@ -23,3 +21,2 @@ var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

}
Object.assign(textEl.style, style);

@@ -32,5 +29,4 @@ textEl.textContent = str;

}
export default memoize(getStringWidth, function (str, style) {
return str + "_" + JSON.stringify(style);
});

@@ -5,78 +5,63 @@ "use strict";

exports.default = useText;
var _react = _interopRequireWildcard(require("react"));
var _react = require("react");
var _reduceCssCalc = _interopRequireDefault(require("reduce-css-calc"));
var _getStringWidth = _interopRequireDefault(require("../util/getStringWidth"));
var _excluded = ["verticalAnchor", "scaleToFit", "angle", "width", "lineHeight", "capHeight", "children", "style"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function isNumber(val) {
return typeof val === 'number';
}
function isXOrYInValid(xOrY) {
return (// number that is not NaN or Infinity
typeof xOrY === 'number' && Number.isFinite(xOrY) || // for percentage
return (
// number that is not NaN or Infinity
typeof xOrY === 'number' && Number.isFinite(xOrY) ||
// for percentage
typeof xOrY === 'string'
);
}
function useText(props) {
var _props$verticalAnchor = props.verticalAnchor,
verticalAnchor = _props$verticalAnchor === void 0 ? 'end' : _props$verticalAnchor,
_props$scaleToFit = props.scaleToFit,
scaleToFit = _props$scaleToFit === void 0 ? false : _props$scaleToFit,
angle = props.angle,
width = props.width,
_props$lineHeight = props.lineHeight,
lineHeight = _props$lineHeight === void 0 ? '1em' : _props$lineHeight,
_props$capHeight = props.capHeight,
capHeight = _props$capHeight === void 0 ? '0.71em' : _props$capHeight,
children = props.children,
style = props.style,
textProps = _objectWithoutPropertiesLoose(props, _excluded);
verticalAnchor = _props$verticalAnchor === void 0 ? 'end' : _props$verticalAnchor,
_props$scaleToFit = props.scaleToFit,
scaleToFit = _props$scaleToFit === void 0 ? false : _props$scaleToFit,
angle = props.angle,
width = props.width,
_props$lineHeight = props.lineHeight,
lineHeight = _props$lineHeight === void 0 ? '1em' : _props$lineHeight,
_props$capHeight = props.capHeight,
capHeight = _props$capHeight === void 0 ? '0.71em' : _props$capHeight,
children = props.children,
style = props.style,
textProps = _objectWithoutPropertiesLoose(props, _excluded);
var _textProps$x = textProps.x,
x = _textProps$x === void 0 ? 0 : _textProps$x,
_textProps$y = textProps.y,
y = _textProps$y === void 0 ? 0 : _textProps$y;
x = _textProps$x === void 0 ? 0 : _textProps$x,
_textProps$y = textProps.y,
y = _textProps$y === void 0 ? 0 : _textProps$y;
var isXOrYNotValid = !isXOrYInValid(x) || !isXOrYInValid(y);
var _useMemo = (0, _react.useMemo)(function () {
var words = children == null ? [] : children.toString().split(/(?:(?!\u00A0+)\s+)/);
return {
wordsWithWidth: words.map(function (word) {
return {
word: word,
wordWidth: (0, _getStringWidth.default)(word, style) || 0
};
}),
spaceWidth: (0, _getStringWidth.default)("\xA0", style) || 0
};
}, [children, style]),
wordsWithWidth = _useMemo.wordsWithWidth,
spaceWidth = _useMemo.spaceWidth;
var words = children == null ? [] : children.toString().split(/(?:(?!\u00A0+)\s+)/);
return {
wordsWithWidth: words.map(function (word) {
return {
word: word,
wordWidth: (0, _getStringWidth.default)(word, style) || 0
};
}),
spaceWidth: (0, _getStringWidth.default)("\xA0", style) || 0
};
}, [children, style]),
wordsWithWidth = _useMemo.wordsWithWidth,
spaceWidth = _useMemo.spaceWidth;
var wordsByLines = (0, _react.useMemo)(function () {
if (isXOrYNotValid) {
return [];
} // Only perform calculations if using features that require them (multiline, scaleToFit)
}
// Only perform calculations if using features that require them (multiline, scaleToFit)
if (width || scaleToFit) {
return wordsWithWidth.reduce(function (result, _ref) {
var word = _ref.word,
wordWidth = _ref.wordWidth;
wordWidth = _ref.wordWidth;
var currentLine = result[result.length - 1];
if (currentLine && (width == null || scaleToFit || (currentLine.width || 0) + wordWidth + spaceWidth < width)) {

@@ -95,7 +80,5 @@ // Word can be added to an existing line

}
return result;
}, []);
}
return [{

@@ -111,7 +94,5 @@ words: children == null ? [] : children.toString().split(/(?:(?!\u00A0+)\s+)/)

var transforms = [];
if (isXOrYNotValid) {
return '';
}
if (isNumber(x) && isNumber(y) && isNumber(width) && scaleToFit && wordsByLines.length > 0) {

@@ -125,7 +106,5 @@ var lineWidth = wordsByLines[0].width || 1;

}
if (angle) {
transforms.push("rotate(" + angle + ", " + x + ", " + y + ")");
}
return transforms.length > 0 ? transforms.join(' ') : '';

@@ -132,0 +111,0 @@ }, [isXOrYNotValid, x, y, width, scaleToFit, wordsByLines, angle]);

@@ -10,17 +10,9 @@ "use strict";

exports.useText = exports.getStringWidth = exports.Text = void 0;
var _Text = _interopRequireDefault(require("./Text"));
exports.Text = _Text.default;
var _getStringWidth = _interopRequireDefault(require("./util/getStringWidth"));
exports.getStringWidth = _getStringWidth.default;
var _useText = _interopRequireDefault(require("./hooks/useText"));
exports.useText = _useText.default;
var _types = require("./types");
Object.keys(_types).forEach(function (key) {

@@ -32,3 +24,2 @@ if (key === "default" || key === "__esModule") return;

});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

@@ -5,47 +5,36 @@ "use strict";

exports.default = Text;
var _react = _interopRequireDefault(require("react"));
var _useText2 = _interopRequireDefault(require("./hooks/useText"));
var _excluded = ["dx", "dy", "textAnchor", "innerRef", "innerTextRef", "verticalAnchor", "angle", "lineHeight", "scaleToFit", "capHeight", "width"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var SVG_STYLE = {
overflow: 'visible'
};
function Text(props) {
var _props$dx = props.dx,
dx = _props$dx === void 0 ? 0 : _props$dx,
_props$dy = props.dy,
dy = _props$dy === void 0 ? 0 : _props$dy,
_props$textAnchor = props.textAnchor,
textAnchor = _props$textAnchor === void 0 ? 'start' : _props$textAnchor,
innerRef = props.innerRef,
innerTextRef = props.innerTextRef,
verticalAnchor = props.verticalAnchor,
angle = props.angle,
_props$lineHeight = props.lineHeight,
lineHeight = _props$lineHeight === void 0 ? '1em' : _props$lineHeight,
_props$scaleToFit = props.scaleToFit,
scaleToFit = _props$scaleToFit === void 0 ? false : _props$scaleToFit,
capHeight = props.capHeight,
width = props.width,
textProps = _objectWithoutPropertiesLoose(props, _excluded);
dx = _props$dx === void 0 ? 0 : _props$dx,
_props$dy = props.dy,
dy = _props$dy === void 0 ? 0 : _props$dy,
_props$textAnchor = props.textAnchor,
textAnchor = _props$textAnchor === void 0 ? 'start' : _props$textAnchor,
innerRef = props.innerRef,
innerTextRef = props.innerTextRef,
verticalAnchor = props.verticalAnchor,
angle = props.angle,
_props$lineHeight = props.lineHeight,
lineHeight = _props$lineHeight === void 0 ? '1em' : _props$lineHeight,
_props$scaleToFit = props.scaleToFit,
scaleToFit = _props$scaleToFit === void 0 ? false : _props$scaleToFit,
capHeight = props.capHeight,
width = props.width,
textProps = _objectWithoutPropertiesLoose(props, _excluded);
var _textProps$x = textProps.x,
x = _textProps$x === void 0 ? 0 : _textProps$x,
fontSize = textProps.fontSize;
x = _textProps$x === void 0 ? 0 : _textProps$x,
fontSize = textProps.fontSize;
var _useText = (0, _useText2.default)(props),
wordsByLines = _useText.wordsByLines,
startDy = _useText.startDy,
transform = _useText.transform;
wordsByLines = _useText.wordsByLines,
startDy = _useText.startDy,
transform = _useText.transform;
return /*#__PURE__*/_react.default.createElement("svg", {

@@ -52,0 +41,0 @@ ref: innerRef,

@@ -1,4 +0,4 @@

/// <reference types="react" />
declare type SVGTSpanProps = React.SVGAttributes<SVGTSpanElement>;
declare type SVGTextProps = React.SVGAttributes<SVGTextElement>;
import { CSSProperties, Ref, SVGAttributes } from 'react';
declare type SVGTSpanProps = SVGAttributes<SVGTSpanElement>;
declare type SVGTextProps = SVGAttributes<SVGTextElement>;
declare type OwnProps = {

@@ -16,7 +16,7 @@ /** className to apply to the SVGText element. */

/** Styles to be applied to the text (and used in computation of its size). */
style?: React.CSSProperties;
style?: CSSProperties;
/** Ref passed to the Text SVG element. */
innerRef?: React.Ref<SVGSVGElement>;
innerRef?: Ref<SVGSVGElement>;
/** Ref passed to the Text text element */
innerTextRef?: React.Ref<SVGTextElement>;
innerTextRef?: Ref<SVGTextElement>;
/** x position of the text. */

@@ -23,0 +23,0 @@ x?: string | number;

@@ -5,9 +5,5 @@ "use strict";

exports.default = void 0;
var _memoize = _interopRequireDefault(require("lodash/memoize"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var MEASUREMENT_ELEMENT_ID = '__react_svg_text_measurement_id';
function getStringWidth(str, style) {

@@ -17,3 +13,2 @@ try {

var textEl = document.getElementById(MEASUREMENT_ELEMENT_ID);
if (!textEl) {

@@ -32,3 +27,2 @@ var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

}
Object.assign(textEl.style, style);

@@ -41,7 +35,5 @@ textEl.textContent = str;

}
var _default = (0, _memoize.default)(getStringWidth, function (str, style) {
return str + "_" + JSON.stringify(style);
});
exports.default = _default;
{
"name": "@visx/text",
"version": "2.12.2",
"version": "2.17.0-alpha.0",
"description": "visx text",

@@ -47,3 +47,3 @@ "sideEffects": false,

},
"gitHead": "023354adb0db32840302ebd948181365fead687e"
"gitHead": "77292e262dfe082b554b64839eb3ee141439a95f"
}

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc