zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2025-12-20 14:05:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Run Prettier, configure ESLint.

Browse Source
This commit is contained in:
Mikael Sand
2018-03-19 04:07:47 +02:00
parent 4e6ba9a786
commit 28235ea137
21 changed files with 422 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc
View File

@@ -179,7 +179,7 @@
"no-underscore-dangle": 0, // disallow dangling underscores in identifiers
//"no-wrap-func": 1, // disallow wrapping of non-IIFE statements in parens
"no-mixed-spaces-and-tabs": 1, // disallow mixed spaces and tabs for indentation
"quotes": [1, "single", "avoid-escape"], // specify whether double or single quotes should be used
"quotes": [1, "double", "avoid-escape"], // specify whether double or single quotes should be used
"quote-props": 0, // require quotes around object literal property names (off by default)
"semi": 1, // require or disallow use of semicolons instead of ASI
"sort-vars": 0, // sort variables within the same declaration block (off by default)

40
index.js
View File

@@ -1,23 +1,23 @@
import Rect from './elements/Rect';
import Circle from './elements/Circle';
import Ellipse from './elements/Ellipse';
import Polygon from './elements/Polygon';
import Polyline from './elements/Polyline';
import Line from './elements/Line';
import Svg from './elements/Svg';
import Path from './elements/Path';
import G from './elements/G';
import Text from './elements/Text';
import TSpan from './elements/TSpan';
import TextPath from './elements/TextPath';
import Use from './elements/Use';
import Image from './elements/Image';
import Symbol from './elements/Symbol';
import Defs from './elements/Defs';
import LinearGradient from './elements/LinearGradient';
import RadialGradient from './elements/RadialGradient';
import Stop from './elements/Stop';
import ClipPath from './elements/ClipPath';
import Rect from "./elements/Rect";
import Circle from "./elements/Circle";
import Ellipse from "./elements/Ellipse";
import Polygon from "./elements/Polygon";
import Polyline from "./elements/Polyline";
import Line from "./elements/Line";
import Svg from "./elements/Svg";
import Path from "./elements/Path";
import G from "./elements/G";
import Text from "./elements/Text";
import TSpan from "./elements/TSpan";
import TextPath from "./elements/TextPath";
import Use from "./elements/Use";
import Image from "./elements/Image";
import Symbol from "./elements/Symbol";
import Defs from "./elements/Defs";
import LinearGradient from "./elements/LinearGradient";
import RadialGradient from "./elements/RadialGradient";
import Stop from "./elements/Stop";
import ClipPath from "./elements/ClipPath";
export {
Svg,

90
lib/Matrix2D.js
View File

@@ -119,7 +119,14 @@ export default class Matrix2D {
*/
copy = function(matrix) {
//noinspection JSUnresolvedVariable
return this.setTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty);
return this.setTransform(
matrix.a,
matrix.b,
matrix.c,
matrix.d,
matrix.tx,
matrix.ty
);
};
//noinspection JSUnusedGlobalSymbols
@@ -207,7 +214,17 @@ export default class Matrix2D {
* @param {Number} regY Optional.
* @return {Matrix2D} This matrix. Useful for chaining method calls.
**/
appendTransform = function(x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY) {
appendTransform = function(
x,
y,
scaleX,
scaleY,
rotation,
skewX,
skewY,
regX,
regY
) {
let cos, sin;
if (rotation % 360) {
const r = rotation * DEG_TO_RAD;
@@ -222,10 +239,31 @@ export default class Matrix2D {
// TODO: can this be combined into a single append operation?
skewX *= DEG_TO_RAD;
skewY *= DEG_TO_RAD;
this.append(Math.cos(skewY), Math.sin(skewY), Math.sin(skewX), Math.cos(skewX), x, y);
this.append(cos * scaleX, sin * scaleX, -sin * scaleY, cos * scaleY, 0, 0);
this.append(
Math.cos(skewY),
Math.sin(skewY),
Math.sin(skewX),
Math.cos(skewX),
x,
y
);
this.append(
cos * scaleX,
sin * scaleX,
-sin * scaleY,
cos * scaleY,
0,
0
);
} else {
this.append(cos * scaleX, sin * scaleX, -sin * scaleY, cos * scaleY, x, y);
this.append(
cos * scaleX,
sin * scaleX,
-sin * scaleY,
cos * scaleY,
x,
y
);
}
if (regX || regY) {
@@ -263,7 +301,17 @@ export default class Matrix2D {
* @param {Number} regY Optional.
* @return {Matrix2D} This matrix. Useful for chaining method calls.
**/
prependTransform = function(x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY) {
prependTransform = function(
x,
y,
scaleX,
scaleY,
rotation,
skewX,
skewY,
regX,
regY
) {
let cos, sin;
if (rotation % 360) {
const r = rotation * DEG_TO_RAD;
@@ -276,16 +324,38 @@ export default class Matrix2D {
if (regX || regY) {
// prepend the registration offset:
this.tx -= regX; this.ty -= regY;
this.tx -= regX;
this.ty -= regY;
}
if (skewX || skewY) {
// TODO: can this be combined into a single prepend operation?
skewX *= DEG_TO_RAD;
skewY *= DEG_TO_RAD;
this.prepend(cos * scaleX, sin * scaleX, -sin * scaleY, cos * scaleY, 0, 0);
this.prepend(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), x, y);
this.prepend(
cos * scaleX,
sin * scaleX,
-sin * scaleY,
cos * scaleY,
0,
0
);
this.prepend(
Math.cos(skewY),
Math.sin(skewY),
-Math.sin(skewX),
Math.cos(skewX),
x,
y
);
} else {
this.prepend(cos * scaleX, sin * scaleX, -sin * scaleY, cos * scaleY, x, y);
this.prepend(
cos * scaleX,
sin * scaleX,
-sin * scaleY,
cos * scaleY,
x,
y
);
}
//noinspection JSValidateTypes
return this;

1
lib/PATTERN_UNITS.js
View File

@@ -1,4 +1,3 @@
export default {
objectBoundingBox: 0,
userSpaceOnUse: 1

42
lib/SvgTouchableMixin.js
View File

@@ -1,28 +1,33 @@
import { Touchable } from 'react-native';
const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
import { Touchable } from "react-native";
const PRESS_RETENTION_OFFSET = { top: 20, left: 20, right: 20, bottom: 30 };
//noinspection JSUnusedGlobalSymbols
export default {
...Touchable.Mixin,
touchableHandleStartShouldSetResponder: function (e) {
touchableHandleStartShouldSetResponder: function(e) {
if (this.props.onStartShouldSetResponder) {
return this.props.onStartShouldSetResponder(e);
} else {
return Touchable.Mixin.touchableHandleStartShouldSetResponder.call(this, e);
return Touchable.Mixin.touchableHandleStartShouldSetResponder.call(
this,
e
);
}
},
touchableHandleResponderTerminationRequest: function (e) {
touchableHandleResponderTerminationRequest: function(e) {
if (this.props.onResponderTerminationRequest) {
return this.props.onResponderTerminationRequest(e);
} else {
return Touchable.Mixin.touchableHandleResponderTerminationRequest.call(this, e);
return Touchable.Mixin.touchableHandleResponderTerminationRequest.call(
this,
e
);
}
},
touchableHandleResponderGrant: function (e) {
touchableHandleResponderGrant: function(e) {
if (this.props.onResponderGrant) {
return this.props.onResponderGrant(e);
} else {
@@ -30,7 +35,7 @@ export default {
}
},
touchableHandleResponderMove: function (e) {
touchableHandleResponderMove: function(e) {
if (this.props.onResponderMove) {
return this.props.onResponderMove(e);
} else {
@@ -38,19 +43,25 @@ export default {
}
},
touchableHandleResponderRelease: function (e) {
touchableHandleResponderRelease: function(e) {
if (this.props.onResponderRelease) {
return this.props.onResponderRelease(e);
} else {
return Touchable.Mixin.touchableHandleResponderRelease.call(this, e);
return Touchable.Mixin.touchableHandleResponderRelease.call(
this,
e
);
}
},
touchableHandleResponderTerminate: function (e) {
touchableHandleResponderTerminate: function(e) {
if (this.props.onResponderTerminate) {
return this.props.onResponderTerminate(e);
} else {
return Touchable.Mixin.touchableHandleResponderTerminate.call(this, e);
return Touchable.Mixin.touchableHandleResponderTerminate.call(
this,
e
);
}
},
@@ -83,8 +94,9 @@ export default {
},
touchableGetLongPressDelayMS: function() {
return this.props.delayLongPress === 0 ? 0 :
this.props.delayLongPress || 500;
return this.props.delayLongPress === 0
? 0
: this.props.delayLongPress || 500;
},
touchableGetPressOutDelayMS: function() {

34
lib/attributes.js
View File

@@ -1,4 +1,3 @@
function arrayDiffer(a, b) {
if (!a || !b) {
return true;
@@ -91,24 +90,24 @@ const GroupAttributes = {
...RenderableAttributes,
font: {
diff: fontDiffer
},
}
};
const UseAttributes = {
...RenderableAttributes,
href: true,
width: true,
height: true,
height: true
};
const SymbolAttributes = {
...ViewBoxAttributes,
name: true,
name: true
};
const PathAttributes = {
...RenderableAttributes,
d: true,
d: true
};
const TextSpecificAttributes = {
@@ -117,7 +116,7 @@ const TextSpecificAttributes = {
baselineShift: true,
verticalAlign: true,
lengthAdjust: true,
textLength: true,
textLength: true
};
const TextAttributes = {
@@ -129,7 +128,7 @@ const TextAttributes = {
deltaY: arrayDiffer,
rotate: arrayDiffer,
positionX: arrayDiffer,
positionY: arrayDiffer,
positionY: arrayDiffer
};
const TextPathAttributes = {
@@ -139,12 +138,12 @@ const TextPathAttributes = {
method: true,
spacing: true,
side: true,
midLine: true,
midLine: true
};
const TSpanAttibutes = {
...TextAttributes,
content: true,
content: true
};
const ClipPathAttributes = {
@@ -159,7 +158,7 @@ const GradientAttributes = {
gradientUnits: true,
gradientTransform: {
diff: arrayDiffer
},
}
};
const LinearGradientAttributes = {
@@ -167,7 +166,7 @@ const LinearGradientAttributes = {
x1: true,
y1: true,
x2: true,
y2: true,
y2: true
};
const RadialGradientAttributes = {
@@ -178,15 +177,14 @@ const RadialGradientAttributes = {
ry: true,
cx: true,
cy: true,
r: true,
r: true
};
const CircleAttributes = {
...RenderableAttributes,
cx: true,
cy: true,
r: true,
r: true
};
const EllipseAttributes = {
@@ -194,7 +192,7 @@ const EllipseAttributes = {
cx: true,
cy: true,
rx: true,
ry: true,
ry: true
};
const ImageAttributes = {
@@ -205,7 +203,7 @@ const ImageAttributes = {
height: true,
src: true,
align: true,
meetOrSlice: true,
meetOrSlice: true
};
const LineAttributes = {
@@ -213,7 +211,7 @@ const LineAttributes = {
x1: true,
y1: true,
x2: true,
y2: true,
y2: true
};
const RectAttributes = {
@@ -223,7 +221,7 @@ const RectAttributes = {
width: true,
height: true,
rx: true,
ry: true,
ry: true
};
export {

15
lib/extract/extractBrush.js
View File

@@ -1,8 +1,8 @@
import Color from 'color';
import patternReg from './patternReg';
import Color from "color";
import patternReg from "./patternReg";
export default function (colorOrBrush) {
if (colorOrBrush === 'none' || !colorOrBrush) {
export default function(colorOrBrush) {
if (colorOrBrush === "none" || !colorOrBrush) {
return null;
}
@@ -12,8 +12,11 @@ export default function (colorOrBrush) {
if (matched) {
return [1, matched[1]];
//todo:
} else { // solid color
let [r, g, b, a = 1] = Color(colorOrBrush).rgb().array();
} else {
// solid color
let [r, g, b, a = 1] = Color(colorOrBrush)
.rgb()
.array();
return [0, r / 255, g / 255, b / 255, a];
}
} catch (err) {

12
lib/extract/extractClipPath.js
View File

@@ -1,12 +1,12 @@
import clipReg from './patternReg';
import clipReg from "./patternReg";
const clipRules = {
evenodd: 0,
nonzero: 1
};
export default function (props) {
let {clipPath, clipRule} = props;
export default function(props) {
let { clipPath, clipRule } = props;
let clipPathProps = {};
if (clipPath) {
@@ -17,7 +17,11 @@ export default function (props) {
if (matched) {
clipPathProps.clipPath = matched[1];
} else {
console.warn('Invalid `clipPath` prop, expected a clipPath like `"#id"`, but got: "' + clipPath + '"');
console.warn(
'Invalid `clipPath` prop, expected a clipPath like `"#id"`, but got: "' +
clipPath +
'"'
);
}
}

10
lib/extract/extractFill.js
View File

@@ -1,6 +1,6 @@
import extractBrush from './extractBrush';
import extractOpacity from './extractOpacity';
import {fillProps} from '../props';
import extractBrush from "./extractBrush";
import extractOpacity from "./extractOpacity";
import { fillProps } from "../props";
const fillRules = {
evenodd: 0,
@@ -10,7 +10,7 @@ const fillRules = {
const fillKeys = Object.keys(fillProps);
export default function(props, styleProperties) {
fillKeys.forEach((name) => {
fillKeys.forEach(name => {
if (props.hasOwnProperty(name)) {
styleProperties.push(name);
}
@@ -18,7 +18,7 @@ export default function(props, styleProperties) {
return {
// default fill is black
fill: extractBrush(props.fill || '#000'),
fill: extractBrush(props.fill || "#000"),
fillOpacity: extractOpacity(props.fillOpacity),
fillRule: fillRules[props.fillRule] === 0 ? 0 : 1
};

38
lib/extract/extractGradient.js
View File

@@ -1,12 +1,12 @@
import {Children} from 'react';
import _ from 'lodash';
import Color from 'color';
import { Children } from "react";
import _ from "lodash";
import Color from "color";
import extractOpacity from './extractOpacity';
import extractTransform from './extractTransform';
import PATTERN_UNITS from '../PATTERN_UNITS';
import percentToFloat from '../percentToFloat';
import Stop from '../../elements/Stop';
import extractOpacity from "./extractOpacity";
import extractTransform from "./extractTransform";
import PATTERN_UNITS from "../PATTERN_UNITS";
import percentToFloat from "../percentToFloat";
import Stop from "../../elements/Stop";
export default function(props) {
if (!props.id) {
@@ -22,20 +22,27 @@ export default function(props) {
// add stop
//noinspection JSUnresolvedFunction
stops[offset] = Color(child.props.stopColor).alpha(extractOpacity(child.props.stopOpacity));
stops[offset] = Color(child.props.stopColor).alpha(
extractOpacity(child.props.stopOpacity)
);
}
} else {
console.warn('`Gradient` elements only accept `Stop` elements as children');
console.warn(
"`Gradient` elements only accept `Stop` elements as children"
);
}
});
const sorted = _.sortBy(_.map(stops, (stop, offset) => {
return {stop, offset};
}), 'offset');
const sorted = _.sortBy(
_.map(stops, (stop, offset) => {
return { stop, offset };
}),
"offset"
);
const gradient = [];
sorted.forEach(({stop}) => {
sorted.forEach(({ stop }) => {
let [r, g, b, a = 1] = stop.rgb().array();
gradient.push(r / 255);
gradient.push(g / 255);
@@ -43,8 +50,7 @@ export default function(props) {
gradient.push(a);
});
gradient.push(...sorted.map(({offset}) => +offset));
gradient.push(...sorted.map(({ offset }) => +offset));
let gradientTransform;
if (props.gradientTransform) {

13
lib/extract/extractLengthList.js
View File

@@ -1,12 +1,15 @@
const spaceReg = /\s+/;
const commaReg = /,/g;
export default function (lengthList) {
if (typeof lengthList === 'string') {
return lengthList.trim().replace(commaReg, ' ').split(spaceReg);
} else if (typeof lengthList === 'number') {
export default function(lengthList) {
if (typeof lengthList === "string") {
return lengthList
.trim()
.replace(commaReg, " ")
.split(spaceReg);
} else if (typeof lengthList === "number") {
return [`${lengthList}`];
} else if (lengthList && typeof lengthList.map === 'function') {
} else if (lengthList && typeof lengthList.map === "function") {
return lengthList.map(d => `${d}`);
} else {
return [];

4
lib/extract/extractOpacity.js
View File

@@ -1,4 +1,4 @@
export default function (opacity) {
export default function(opacity) {
const value = +opacity;
return (typeof value !== 'number' || isNaN(value)) ? 1 : value;
return typeof value !== "number" || isNaN(value) ? 1 : value;
}

8
lib/extract/extractPolyPoints.js
View File

@@ -1,4 +1,6 @@
export default function (polyPoints) {
return polyPoints.replace(/[^e]-/, ' -').split(/(?:\s+|\s*,\s*)/g).join(' ');
export default function(polyPoints) {
return polyPoints
.replace(/[^e]-/, " -")
.split(/(?:\s+|\s*,\s*)/g)
.join(" ");
}

12
lib/extract/extractProps.js
View File

@@ -1,9 +1,9 @@
import extractFill from './extractFill';
import extractStroke from './extractStroke';
import extractTransform, {props2transform} from './extractTransform';
import extractClipPath from './extractClipPath';
import extractResponder from './extractResponder';
import extractOpacity from './extractOpacity';
import extractFill from "./extractFill";
import extractStroke from "./extractStroke";
import extractTransform, { props2transform } from "./extractTransform";
import extractClipPath from "./extractClipPath";
import extractResponder from "./extractResponder";
import extractOpacity from "./extractOpacity";
export default function(props, ref) {
const styleProperties = [];

14
lib/extract/extractResponder.js
View File

@@ -1,13 +1,13 @@
import {responderProps, touchableProps} from '../props';
import _ from 'lodash';
import { responderProps, touchableProps } from "../props";
import _ from "lodash";
export default function (props, ref) {
export default function(props, ref) {
const extractedProps = {};
_.forEach(responderProps, (v, key) => {
const value = props[key];
if (props[key]) {
if (!extractedProps.responsible && key !== 'pointerEvents') {
if (!extractedProps.responsible && key !== "pointerEvents") {
extractedProps.responsible = true;
}
@@ -22,8 +22,10 @@ export default function (props, ref) {
extractedProps.responsible = true;
Object.assign(extractedProps, {
onStartShouldSetResponder: ref.touchableHandleStartShouldSetResponder,
onResponderTerminationRequest: ref.touchableHandleResponderTerminationRequest,
onStartShouldSetResponder:
ref.touchableHandleStartShouldSetResponder,
onResponderTerminationRequest:
ref.touchableHandleResponderTerminationRequest,
onResponderGrant: ref.touchableHandleResponderGrant,
onResponderMove: ref.touchableHandleResponderMove,
onResponderRelease: ref.touchableHandleResponderRelease,

26
lib/extract/extractStroke.js
View File

@@ -1,6 +1,6 @@
import extractBrush from './extractBrush';
import extractOpacity from './extractOpacity';
import {strokeProps} from '../props';
import extractBrush from "./extractBrush";
import extractOpacity from "./extractOpacity";
import { strokeProps } from "../props";
import extractLengthList from "./extractLengthList";
const caps = {
@@ -18,19 +18,16 @@ const joins = {
const strokeKeys = Object.keys(strokeProps);
export default function(props, styleProperties) {
strokeKeys.forEach((name) => {
strokeKeys.forEach(name => {
if (props.hasOwnProperty(name)) {
styleProperties.push(name);
}
});
const {stroke} = props;
let {
strokeWidth,
strokeDasharray
} = props;
const { stroke } = props;
let { strokeWidth, strokeDasharray } = props;
if (!strokeDasharray || strokeDasharray === 'none') {
if (!strokeDasharray || strokeDasharray === "none") {
strokeDasharray = null;
} else {
// <dasharray> It's a list of comma and/or white space separated <length>s
@@ -38,12 +35,12 @@ export default function(props, styleProperties) {
// If an odd number of values is provided, then the list of values is repeated
// to yield an even number of values. Thus, 5,3,2 is equivalent to 5,3,2,5,3,2.
strokeDasharray = extractLengthList(strokeDasharray);
if (strokeDasharray && (strokeDasharray.length % 2) === 1) {
if (strokeDasharray && strokeDasharray.length % 2 === 1) {
strokeDasharray = strokeDasharray.concat(strokeDasharray);
}
}
if (!strokeWidth || typeof strokeWidth !== 'string') {
if (!strokeWidth || typeof strokeWidth !== "string") {
strokeWidth = `${strokeWidth || 1}`;
}
@@ -54,8 +51,7 @@ export default function(props, styleProperties) {
strokeLinejoin: joins[props.strokeLinejoin] || 0,
strokeDasharray: strokeDasharray,
strokeWidth: strokeWidth,
strokeDashoffset: strokeDasharray ? (+props.strokeDashoffset || 0) : null,
strokeMiterlimit: props.strokeMiterlimit || 4,
strokeDashoffset: strokeDasharray ? +props.strokeDashoffset || 0 : null,
strokeMiterlimit: props.strokeMiterlimit || 4
};
}

59
lib/extract/extractText.js
View File

@@ -1,8 +1,8 @@
import _ from 'lodash';
import _ from "lodash";
//noinspection JSUnresolvedVariable
import React, {Children} from 'react';
import TSpan from '../../elements/TSpan';
import extractLengthList from './extractLengthList';
import React, { Children } from "react";
import TSpan from "../../elements/TSpan";
import extractLengthList from "./extractLengthList";
const fontRegExp = /^\s*((?:(?:normal|bold|italic)\s+)*)(?:(\d+(?:\.\d+)?[ptexm%])*(?:\s*\/.*?)?\s+)?\s*"?([^"]*)/i;
const fontFamilyPrefix = /^[\s"']*/;
@@ -15,9 +15,12 @@ function extractSingleFontFamily(fontFamilyString) {
// SVG on the web allows for multiple font-families to be specified.
// For compatibility, we extract the first font-family, hoping
// we'll get a match.
return fontFamilyString ? fontFamilyString.split(commaReg)[0]
.replace(fontFamilyPrefix, '')
.replace(fontFamilySuffix, '') : null;
return fontFamilyString
? fontFamilyString
.split(commaReg)[0]
.replace(fontFamilyPrefix, "")
.replace(fontFamilySuffix, "")
: null;
}
function parseFontString(font) {
@@ -29,16 +32,16 @@ function parseFontString(font) {
return null;
}
const fontFamily = extractSingleFontFamily(match[3]);
const fontSize = match[2] || '12';
const fontSize = match[2] || "12";
const isBold = /bold/.exec(match[1]);
const isItalic = /italic/.exec(match[1]);
const fontWeight = isBold ? 'bold' : 'normal';
const fontStyle = isItalic ? 'italic' : 'normal';
const fontWeight = isBold ? "bold" : "normal";
const fontStyle = isItalic ? "italic" : "normal";
cachedFontObjectsFromString[font] = {
fontSize,
fontFamily,
fontWeight,
fontStyle,
fontStyle
};
return cachedFontObjectsFromString[font];
}
@@ -56,18 +59,15 @@ export function extractFont(props) {
wordSpacing,
kerning,
fontVariantLigatures,
fontFeatureSettings,
} = props;
let {
fontSize,
fontFamily,
font,
fontFeatureSettings
} = props;
let { fontSize, fontFamily, font } = props;
fontFamily = extractSingleFontFamily(fontFamily);
fontSize = fontSize ? '' + fontSize : null;
fontSize = fontSize ? "" + fontSize : null;
const ownedFont = _.pickBy({
const ownedFont = _.pickBy(
{
fontData,
fontStyle,
fontVariant,
@@ -81,10 +81,12 @@ export function extractFont(props) {
wordSpacing,
kerning,
fontVariantLigatures,
fontFeatureSettings,
}, prop => !_.isNil(prop));
fontFeatureSettings
},
prop => !_.isNil(prop)
);
if (typeof font === 'string') {
if (typeof font === "string") {
font = parseFontString(font);
}
@@ -99,12 +101,9 @@ export default function(props, container) {
dy,
alignmentBaseline,
baselineShift,
verticalAlign,
} = props;
let {
rotate,
children
verticalAlign
} = props;
let { rotate, children } = props;
const positionX = extractLengthList(x);
const positionY = extractLengthList(y);
@@ -113,7 +112,7 @@ export default function(props, container) {
rotate = extractLengthList(rotate);
let content = null;
if (typeof children === 'string' || typeof children === 'number') {
if (typeof children === "string" || typeof children === "number") {
const childrenString = children.toString();
if (container) {
children = <TSpan>{childrenString}</TSpan>;
@@ -123,7 +122,7 @@ export default function(props, container) {
}
} else if (Children.count(children) > 1 || Array.isArray(children)) {
children = Children.map(children, child => {
if (typeof child === 'string' || typeof child === 'number') {
if (typeof child === "string" || typeof child === "number") {
return <TSpan>{child.toString()}</TSpan>;
} else {
return child;
@@ -144,6 +143,6 @@ export default function(props, container) {
deltaY,
alignmentBaseline,
baselineShift,
verticalAlign,
verticalAlign
};
}

42
lib/extract/extractTransform.js
View File

@@ -1,7 +1,7 @@
import Matrix2D from '../Matrix2D';
import _ from 'lodash';
import Matrix2D from "../Matrix2D";
import _ from "lodash";
let pooledMatrix = new Matrix2D();
import peg from 'pegjs';
import peg from "pegjs";
function transformToMatrix(props, transform) {
pooledMatrix.reset();
@@ -172,7 +172,7 @@ wsp
function appendTransform(transform) {
if (transform) {
if (typeof transform === 'string') {
if (typeof transform === "string") {
try {
const [a, c, e, b, d, f] = transformParser.parse(transform);
pooledMatrix.append(...[a, b, c, d, e, f]);
@@ -180,11 +180,11 @@ function appendTransform(transform) {
console.error(e);
}
} else {
pooledMatrix
.appendTransform(
pooledMatrix.appendTransform(
transform.x + transform.originX,
transform.y + transform.originY,
transform.scaleX, transform.scaleY,
transform.scaleX,
transform.scaleY,
transform.rotation,
transform.skewX,
transform.skewY,
@@ -204,7 +204,7 @@ function universal2axis(universal, axisX, axisY, defaultValue) {
if (coords.length === 2) {
x = +coords[0];
y = +coords[1];
} else if　(coords.length === 1)　{
} else if (coords.length === 1) {
x = y = +coords[0];
}
} else if (_.isNumber(universal)) {
@@ -225,16 +225,25 @@ function universal2axis(universal, axisX, axisY, defaultValue) {
}
export function props2transform(props) {
if (props && (typeof props === 'string')) {
if (props && typeof props === "string") {
return props;
}
let [originX, originY] = universal2axis(props.origin, props.originX, props.originY);
let [scaleX, scaleY] = universal2axis(props.scale, props.scaleX, props.scaleY, 1);
let [originX, originY] = universal2axis(
props.origin,
props.originX,
props.originY
);
let [scaleX, scaleY] = universal2axis(
props.scale,
props.scaleX,
props.scaleY,
1
);
let [skewX, skewY] = universal2axis(props.skew, props.skewX, props.skewY);
let [translateX, translateY] = universal2axis(
props.translate,
_.isNil(props.translateX) ? (props.x || 0) : props.translateX,
_.isNil(props.translateY) ? (props.y || 0) : props.translateY
_.isNil(props.translateX) ? props.x || 0 : props.translateX,
_.isNil(props.translateY) ? props.y || 0 : props.translateY
);
return {
@@ -250,6 +259,9 @@ export function props2transform(props) {
};
}
export default function (props) {
return transformToMatrix(props2transform(props), props.transform ? props2transform(props.transform) : null);
export default function(props) {
return transformToMatrix(
props2transform(props),
props.transform ? props2transform(props.transform) : null
);
}

31
lib/extract/extractViewBox.js
View File

@@ -5,10 +5,16 @@ const meetOrSliceTypes = {
};
const alignEnum = [
'xMinYMin', 'xMidYMin', 'xMaxYMin',
'xMinYMid', 'xMidYMid', 'xMaxYMid',
'xMinYMax', 'xMidYMax', 'xMaxYMax',
'none'
"xMinYMin",
"xMidYMin",
"xMaxYMin",
"xMinYMid",
"xMidYMid",
"xMaxYMid",
"xMinYMax",
"xMidYMax",
"xMaxYMax",
"none"
].reduce((prev, name) => {
prev[name] = name;
return prev;
@@ -16,8 +22,8 @@ const alignEnum = [
const spacesRegExp = /\s+/;
export default function (props) {
const {viewBox, preserveAspectRatio} = props;
export default function(props) {
const { viewBox, preserveAspectRatio } = props;
if (!viewBox) {
return null;
@@ -26,14 +32,16 @@ export default function (props) {
let params = viewBox.trim().split(spacesRegExp);
if (params.length === 4 && params.every(param => !isNaN(+params))) {
console.warn('Invalid `viewBox` prop:' + viewBox);
console.warn("Invalid `viewBox` prop:" + viewBox);
return null;
}
let modes = preserveAspectRatio ? preserveAspectRatio.trim().split(spacesRegExp) : [];
let modes = preserveAspectRatio
? preserveAspectRatio.trim().split(spacesRegExp)
: [];
let meetOrSlice = meetOrSliceTypes[modes[1]] || 0;
let align = alignEnum[modes[0]] || 'xMidYMid';
let align = alignEnum[modes[0]] || "xMidYMid";
return {
minX: +params[0],
@@ -45,7 +53,4 @@ export default function (props) {
};
}
export {
meetOrSliceTypes,
alignEnum
};
export { meetOrSliceTypes, alignEnum };

6
lib/percentToFloat.js
View File

@@ -1,8 +1,10 @@
let percentReg = /^([+\-]?\d+(?:\.\d+)?(?:[eE][+\-]?\d+)?)(%?)$/;
export default function (percent) {
export default function(percent) {
let matched = percent.match(percentReg);
if (!matched) {
console.warn(`\`${percent}\` is not a valid number or percentage string.`);
console.warn(
`\`${percent}\` is not a valid number or percentage string.`
);
return 0;
}

106
lib/props.js
View File

@@ -1,8 +1,11 @@
import PropTypes from 'prop-types';
import {PanResponder} from 'react-native';
import PropTypes from "prop-types";
import { PanResponder } from "react-native";
const numberProp = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
const numberArrayProp = PropTypes.oneOfType([PropTypes.arrayOf(numberProp), numberProp]);
const numberArrayProp = PropTypes.oneOfType([
PropTypes.arrayOf(numberProp),
numberProp
]);
const touchableProps = {
disabled: PropTypes.bool,
@@ -17,7 +20,7 @@ const touchableProps = {
const responderProps = [
...Object.keys(PanResponder.create({}).panHandlers),
'pointerEvents'
"pointerEvents"
].reduce((props, name) => {
props[name] = PropTypes.func;
return props;
@@ -26,11 +29,11 @@ const responderProps = [
const fillProps = {
fill: PropTypes.string,
fillOpacity: numberProp,
fillRule: PropTypes.oneOf(['evenodd', 'nonzero'])
fillRule: PropTypes.oneOf(["evenodd", "nonzero"])
};
const clipProps = {
clipRule: PropTypes.oneOf(['evenodd', 'nonzero']),
clipRule: PropTypes.oneOf(["evenodd", "nonzero"]),
clipPath: PropTypes.string
};
@@ -44,8 +47,8 @@ const strokeProps = {
strokeOpacity: numberProp,
strokeDasharray: numberArrayProp,
strokeDashoffset: numberProp,
strokeLinecap: PropTypes.oneOf(['butt', 'square', 'round']),
strokeLinejoin: PropTypes.oneOf(['miter', 'bevel', 'round']),
strokeLinecap: PropTypes.oneOf(["butt", "square", "round"]),
strokeLinejoin: PropTypes.oneOf(["miter", "bevel", "round"]),
strokeMiterlimit: numberProp
};
@@ -81,19 +84,45 @@ const pathProps = {
// normal | italic | oblique | inherit
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-style
const fontStyle = PropTypes.oneOf(['normal', 'italic', 'oblique']);
const fontStyle = PropTypes.oneOf(["normal", "italic", "oblique"]);
// normal | small-caps | inherit
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-variant
const fontVariant = PropTypes.oneOf(['normal', 'small-caps']);
const fontVariant = PropTypes.oneOf(["normal", "small-caps"]);
// normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-weight
const fontWeight = PropTypes.oneOf(['normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900']);
const fontWeight = PropTypes.oneOf([
"normal",
"bold",
"bolder",
"lighter",
"100",
"200",
"300",
"400",
"500",
"600",
"700",
"800",
"900"
]);
// normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-stretch
const fontStretch = PropTypes.oneOf(['normal', 'wider', 'narrower', 'ultra-condensed', 'extra-condensed', 'condensed', 'semi-condensed', 'semi-expanded', 'expanded', 'extra-expanded', 'ultra-expanded']);
const fontStretch = PropTypes.oneOf([
"normal",
"wider",
"narrower",
"ultra-condensed",
"extra-condensed",
"condensed",
"semi-condensed",
"semi-expanded",
"expanded",
"extra-expanded",
"ultra-expanded"
]);
// <absolute-size> | <relative-size> | <length> | <percentage> | inherit
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-size
@@ -125,11 +154,17 @@ const font = PropTypes.object;
// start | middle | end | inherit
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
const textAnchor = PropTypes.oneOf(['start', 'middle', 'end']);
const textAnchor = PropTypes.oneOf(["start", "middle", "end"]);
// none | underline | overline | line-through | blink | inherit
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-decoration
const textDecoration = PropTypes.oneOf(['none', 'underline', 'overline', 'line-through', 'blink']);
const textDecoration = PropTypes.oneOf([
"none",
"underline",
"overline",
"line-through",
"blink"
]);
// normal | <length> | inherit
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/letter-spacing
@@ -164,7 +199,7 @@ Value: normal | none | [ <common-lig-values> || <discretionary-lig-values> || <h
https://developer.mozilla.org/en/docs/Web/CSS/font-variant-ligatures
https://www.w3.org/TR/css-fonts-3/#font-variant-ligatures-prop
*/
const fontVariantLigatures = PropTypes.oneOf(['normal', 'none']);
const fontVariantLigatures = PropTypes.oneOf(["normal", "none"]);
const fontProps = {
fontStyle,
@@ -188,7 +223,7 @@ const fontProps = {
https://svgwg.org/svg2-draft/text.html#TextElementLengthAdjustAttribute
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/lengthAdjust
*/
const lengthAdjust = PropTypes.oneOf(['spacing', 'spacingAndGlyphs']);
const lengthAdjust = PropTypes.oneOf(["spacing", "spacingAndGlyphs"]);
/*
Name Value Initial value Animatable
@@ -239,7 +274,24 @@ const verticalAlign = numberProp;
https://svgwg.org/svg2-draft/text.html#AlignmentBaselineProperty
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/alignment-baseline
*/
const alignmentBaseline = PropTypes.oneOf(['baseline', 'text-bottom', 'alphabetic', 'ideographic', 'middle', 'central', 'mathematical', 'text-top', 'bottom', 'center', 'top', 'text-before-edge', 'text-after-edge', 'before-edge', 'after-edge', 'hanging']);
const alignmentBaseline = PropTypes.oneOf([
"baseline",
"text-bottom",
"alphabetic",
"ideographic",
"middle",
"central",
"mathematical",
"text-top",
"bottom",
"center",
"top",
"text-before-edge",
"text-after-edge",
"before-edge",
"after-edge",
"hanging"
]);
/*
2.2.2. Alignment Shift: baseline-shift longhand
@@ -259,7 +311,11 @@ const alignmentBaseline = PropTypes.oneOf(['baseline', 'text-bottom', 'alphabeti
https://www.w3.org/TR/css-inline-3/#propdef-baseline-shift
*/
const baselineShift = PropTypes.oneOfType([PropTypes.oneOf(['sub', 'super', 'baseline']), PropTypes.arrayOf(numberProp), numberProp]);
const baselineShift = PropTypes.oneOfType([
PropTypes.oneOf(["sub", "super", "baseline"]),
PropTypes.arrayOf(numberProp),
numberProp
]);
/*
6.12. Low-level font feature settings control: the font-feature-settings property
@@ -370,14 +426,14 @@ const textSpecificProps = {
lengthAdjust,
textLength,
fontData: PropTypes.object,
fontFeatureSettings,
fontFeatureSettings
};
// https://svgwg.org/svg2-draft/text.html#TSpanAttributes
const textProps = {
...textSpecificProps,
dx: numberArrayProp,
dy: numberArrayProp,
dy: numberArrayProp
};
/*
@@ -391,7 +447,7 @@ const textProps = {
yes
https://svgwg.org/svg2-draft/text.html#TextPathElementSideAttribute
*/
const side = PropTypes.oneOf(['left', 'right']);
const side = PropTypes.oneOf(["left", "right"]);
/*
Name
@@ -419,7 +475,7 @@ const startOffset = numberProp;
https://svgwg.org/svg2-draft/text.html#TextPathElementMethodAttribute
https://developer.mozilla.org/en/docs/Web/SVG/Element/textPath
*/
const method = PropTypes.oneOf(['align', 'stretch']);
const method = PropTypes.oneOf(["align", "stretch"]);
/*
Name
@@ -433,7 +489,7 @@ const method = PropTypes.oneOf(['align', 'stretch']);
https://svgwg.org/svg2-draft/text.html#TextPathElementSpacingAttribute
https://developer.mozilla.org/en/docs/Web/SVG/Element/textPath
*/
const spacing = PropTypes.oneOf(['auto', 'exact']);
const spacing = PropTypes.oneOf(["auto", "exact"]);
/*
Name
@@ -445,7 +501,7 @@ const spacing = PropTypes.oneOf(['auto', 'exact']);
Animatable
yes
*/
const midLine = PropTypes.oneOf(['sharp', 'smooth']);
const midLine = PropTypes.oneOf(["sharp", "smooth"]);
// https://svgwg.org/svg2-draft/text.html#TextPathAttributes
// https://developer.mozilla.org/en/docs/Web/SVG/Element/textPath
@@ -456,7 +512,7 @@ const textPathProps = {
method,
spacing,
side,
midLine,
midLine
};
export {