@cantoo/rn-svg
Version:
SVG library for react-native
332 lines (330 loc) • 9.98 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Svg = exports.Stop = exports.Rect = exports.RadialGradient = exports.Polyline = exports.Polygon = exports.Pattern = exports.Path = exports.Mask = exports.Marker = exports.LinearGradient = exports.Line = exports.Image = exports.G = exports.ForeignObject = exports.Ellipse = exports.Defs = exports.ClipPath = exports.Circle = void 0;
Object.defineProperty(exports, "SvgCss", {
enumerable: true,
get: function () {
return _SvgXml.default;
}
});
Object.defineProperty(exports, "SvgUri", {
enumerable: true,
get: function () {
return _SvgUri.default;
}
});
Object.defineProperty(exports, "SvgXml", {
enumerable: true,
get: function () {
return _SvgXml.default;
}
});
exports.default = exports.WebShape = exports.Use = exports.TextPath = exports.Text = exports.TSpan = exports.Symbol = void 0;
var React = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _SvgTouchableMixin = _interopRequireDefault(require("./lib/SvgTouchableMixin"));
var _resolve = require("./lib/resolve");
var _SvgXml = _interopRequireDefault(require("./SvgXml.web"));
var _SvgUri = _interopRequireDefault(require("./SvgUri.web"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
// @ts-ignore
/**
* `react-native-svg` supports additional props that aren't defined in the spec.
* This function replaces them in a spec conforming manner.
*
* @param {WebShape} self Instance given to us.
* @param {Object?} props Optional overridden props given to us.
* @returns {Object} Cleaned props object.
* @private
*/
const prepare = (self, props = self.props) => {
const {
translate,
scale,
rotation,
skewX,
skewY,
originX,
originY,
fontFamily,
fontSize,
fontWeight,
fontStyle,
style,
forwardedRef,
onPress,
onPressIn,
onPressOut,
onLongPress,
// @ts-ignore
...rest
} = props;
const hasTouchableProperty = onPress || onPressIn || onPressOut || onLongPress;
const clean = {
...(hasTouchableProperty ? {
onStartShouldSetResponder: self.touchableHandleStartShouldSetResponder,
onResponderTerminationRequest: self.touchableHandleResponderTerminationRequest,
onResponderGrant: self.touchableHandleResponderGrant,
onResponderMove: self.touchableHandleResponderMove,
onResponderRelease: self.touchableHandleResponderRelease,
onResponderTerminate: self.touchableHandleResponderTerminate
} : null),
...rest
};
const transform = [];
if (originX != null || originY != null) {
transform.push(`translate(${originX || 0}, ${originY || 0})`);
}
if (translate != null) {
transform.push(`translate(${translate})`);
}
if (scale != null) {
transform.push(`scale(${scale})`);
}
// rotation maps to rotate, not to collide with the text rotate attribute (which acts per glyph rather than block)
if (rotation != null) {
transform.push(`rotate(${rotation})`);
}
if (skewX != null) {
transform.push(`skewX(${skewX})`);
}
if (skewY != null) {
transform.push(`skewY(${skewY})`);
}
if (originX != null || originY != null) {
transform.push(`translate(${-originX || 0}, ${-originY || 0})`);
}
if (transform.length) {
if (clean.transform) {
transform.unshift(clean.transform);
}
clean.transform = transform.join(' ');
}
if (forwardedRef) {
clean.ref = forwardedRef;
}
const styles = {};
if (fontFamily != null) {
styles.fontFamily = fontFamily;
}
if (fontSize != null) {
styles.fontSize = fontSize;
}
if (fontWeight != null) {
styles.fontWeight = fontWeight;
}
if (fontStyle != null) {
styles.fontStyle = fontStyle;
}
clean.style = (0, _resolve.resolve)(style, styles);
return clean;
};
const getBoundingClientRect = node => {
if (node) {
// @ts-ignore
const isElement = node.nodeType === 1; /* Node.ELEMENT_NODE */
// @ts-ignore
if (isElement && typeof node.getBoundingClientRect === 'function') {
// @ts-ignore
return node.getBoundingClientRect();
}
}
};
const measureLayout = (node, callback) => {
// @ts-ignore
const relativeNode = node && node.parentNode;
if (relativeNode) {
setTimeout(() => {
// @ts-ignore
const relativeRect = getBoundingClientRect(relativeNode);
const nodeRect = getBoundingClientRect(node);
if (!nodeRect || !relativeRect) {
return;
}
const {
height,
left,
top,
width
} = nodeRect;
const x = left - relativeRect.left;
const y = top - relativeRect.top;
callback(x, y, width, height, left, top);
}, 0);
}
};
function remeasure() {
// @ts-ignore
const tag = this.state.touchable.responderID;
if (tag == null) {
return;
}
// @ts-ignore
measureLayout(tag, this._handleQueryLayout);
}
class WebShape extends React.Component {
constructor(props, context) {
super(props, context);
(0, _SvgTouchableMixin.default)(this);
this._remeasureMetricsOnActivation = remeasure.bind(this);
}
}
exports.WebShape = WebShape;
class Circle extends WebShape {
render() {
return (0, _reactNative.unstable_createElement)('circle', prepare(this));
}
}
exports.Circle = Circle;
class ClipPath extends WebShape {
render() {
return (0, _reactNative.unstable_createElement)('clipPath', prepare(this));
}
}
exports.ClipPath = ClipPath;
class Defs extends WebShape {
render() {
return (0, _reactNative.unstable_createElement)('defs', prepare(this));
}
}
exports.Defs = Defs;
class Ellipse extends WebShape {
render() {
return (0, _reactNative.unstable_createElement)('ellipse', prepare(this));
}
}
exports.Ellipse = Ellipse;
class G extends WebShape {
render() {
const {
x,
y,
...rest
} = this.props;
if ((x || y) && !rest.translate) {
rest.translate = `${x || 0}, ${y || 0}`;
}
return (0, _reactNative.unstable_createElement)('g', prepare(this, rest));
}
}
exports.G = G;
class Image extends WebShape {
render() {
return (0, _reactNative.unstable_createElement)('image', prepare(this));
}
}
exports.Image = Image;
class Line extends WebShape {
render() {
return (0, _reactNative.unstable_createElement)('line', prepare(this));
}
}
exports.Line = Line;
class LinearGradient extends WebShape {
render() {
return (0, _reactNative.unstable_createElement)('linearGradient', prepare(this));
}
}
exports.LinearGradient = LinearGradient;
class Path extends WebShape {
render() {
return (0, _reactNative.unstable_createElement)('path', prepare(this));
}
}
exports.Path = Path;
class Polygon extends WebShape {
render() {
return (0, _reactNative.unstable_createElement)('polygon', prepare(this));
}
}
exports.Polygon = Polygon;
class Polyline extends WebShape {
render() {
return (0, _reactNative.unstable_createElement)('polyline', prepare(this));
}
}
exports.Polyline = Polyline;
class RadialGradient extends WebShape {
render() {
return (0, _reactNative.unstable_createElement)('radialGradient', prepare(this));
}
}
exports.RadialGradient = RadialGradient;
class Rect extends WebShape {
render() {
return (0, _reactNative.unstable_createElement)('rect', prepare(this));
}
}
exports.Rect = Rect;
class Stop extends WebShape {
render() {
return (0, _reactNative.unstable_createElement)('stop', prepare(this));
}
}
exports.Stop = Stop;
class Svg extends WebShape {
render() {
return (0, _reactNative.unstable_createElement)('svg', prepare(this));
}
}
exports.Svg = Svg;
class Symbol extends WebShape {
render() {
return (0, _reactNative.unstable_createElement)('symbol', prepare(this));
}
}
exports.Symbol = Symbol;
class Text extends WebShape {
render() {
return (0, _reactNative.unstable_createElement)('text', prepare(this));
}
}
exports.Text = Text;
class TSpan extends WebShape {
render() {
return (0, _reactNative.unstable_createElement)('tspan', prepare(this));
}
}
exports.TSpan = TSpan;
class TextPath extends WebShape {
render() {
return (0, _reactNative.unstable_createElement)('textPath', prepare(this));
}
}
exports.TextPath = TextPath;
class Use extends WebShape {
render() {
return (0, _reactNative.unstable_createElement)('use', prepare(this));
}
}
exports.Use = Use;
class Mask extends WebShape {
render() {
return (0, _reactNative.unstable_createElement)('mask', prepare(this));
}
}
exports.Mask = Mask;
class ForeignObject extends WebShape {
render() {
return (0, _reactNative.unstable_createElement)('foreignObject', prepare(this));
}
}
exports.ForeignObject = ForeignObject;
class Marker extends WebShape {
render() {
return (0, _reactNative.unstable_createElement)('marker', prepare(this));
}
}
exports.Marker = Marker;
class Pattern extends WebShape {
render() {
return (0, _reactNative.unstable_createElement)('pattern', prepare(this));
}
}
exports.Pattern = Pattern;
var _default = exports.default = Svg;
//# sourceMappingURL=ReactNativeSVG.web.js.map