@cantoo/rn-svg
Version:
SVG library for react-native
281 lines • 7.03 kB
JavaScript
// @ts-ignore
import * as React from 'react';
import {
// @ts-ignore
unstable_createElement as createElement } from 'react-native';
import SvgTouchableMixin from './lib/SvgTouchableMixin';
import { resolve } from './lib/resolve';
export { default as SvgXml } from './SvgXml.web';
export { default as SvgCss } from './SvgXml.web';
export { default as SvgUri } from './SvgUri.web';
/**
* `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 = 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);
}
export class WebShape extends React.Component {
constructor(props, context) {
super(props, context);
SvgTouchableMixin(this);
this._remeasureMetricsOnActivation = remeasure.bind(this);
}
}
export class Circle extends WebShape {
render() {
return createElement('circle', prepare(this));
}
}
export class ClipPath extends WebShape {
render() {
return createElement('clipPath', prepare(this));
}
}
export class Defs extends WebShape {
render() {
return createElement('defs', prepare(this));
}
}
export class Ellipse extends WebShape {
render() {
return createElement('ellipse', prepare(this));
}
}
export class G extends WebShape {
render() {
const {
x,
y,
...rest
} = this.props;
if ((x || y) && !rest.translate) {
rest.translate = `${x || 0}, ${y || 0}`;
}
return createElement('g', prepare(this, rest));
}
}
export class Image extends WebShape {
render() {
return createElement('image', prepare(this));
}
}
export class Line extends WebShape {
render() {
return createElement('line', prepare(this));
}
}
export class LinearGradient extends WebShape {
render() {
return createElement('linearGradient', prepare(this));
}
}
export class Path extends WebShape {
render() {
return createElement('path', prepare(this));
}
}
export class Polygon extends WebShape {
render() {
return createElement('polygon', prepare(this));
}
}
export class Polyline extends WebShape {
render() {
return createElement('polyline', prepare(this));
}
}
export class RadialGradient extends WebShape {
render() {
return createElement('radialGradient', prepare(this));
}
}
export class Rect extends WebShape {
render() {
return createElement('rect', prepare(this));
}
}
export class Stop extends WebShape {
render() {
return createElement('stop', prepare(this));
}
}
export class Svg extends WebShape {
render() {
return createElement('svg', prepare(this));
}
}
export class Symbol extends WebShape {
render() {
return createElement('symbol', prepare(this));
}
}
export class Text extends WebShape {
render() {
return createElement('text', prepare(this));
}
}
export class TSpan extends WebShape {
render() {
return createElement('tspan', prepare(this));
}
}
export class TextPath extends WebShape {
render() {
return createElement('textPath', prepare(this));
}
}
export class Use extends WebShape {
render() {
return createElement('use', prepare(this));
}
}
export class Mask extends WebShape {
render() {
return createElement('mask', prepare(this));
}
}
export class ForeignObject extends WebShape {
render() {
return createElement('foreignObject', prepare(this));
}
}
export class Marker extends WebShape {
render() {
return createElement('marker', prepare(this));
}
}
export class Pattern extends WebShape {
render() {
return createElement('pattern', prepare(this));
}
}
export default Svg;
//# sourceMappingURL=ReactNativeSVG.web.js.map