zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2025-12-20 22:05:14 +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-underscore-dangle": 0, // disallow dangling underscores in identifiers
//"no-wrap-func": 1, // disallow wrapping of non-IIFE statements in parens //"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 "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) "quote-props": 0, // require quotes around object literal property names (off by default)
"semi": 1, // require or disallow use of semicolons instead of ASI "semi": 1, // require or disallow use of semicolons instead of ASI
"sort-vars": 0, // sort variables within the same declaration block (off by default) "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 Rect from "./elements/Rect";
import Circle from './elements/Circle'; import Circle from "./elements/Circle";
import Ellipse from './elements/Ellipse'; import Ellipse from "./elements/Ellipse";
import Polygon from './elements/Polygon'; import Polygon from "./elements/Polygon";
import Polyline from './elements/Polyline'; import Polyline from "./elements/Polyline";
import Line from './elements/Line'; import Line from "./elements/Line";
import Svg from './elements/Svg'; import Svg from "./elements/Svg";
import Path from './elements/Path'; import Path from "./elements/Path";
import G from './elements/G'; import G from "./elements/G";
import Text from './elements/Text'; import Text from "./elements/Text";
import TSpan from './elements/TSpan'; import TSpan from "./elements/TSpan";
import TextPath from './elements/TextPath'; import TextPath from "./elements/TextPath";
import Use from './elements/Use'; import Use from "./elements/Use";
import Image from './elements/Image'; import Image from "./elements/Image";
import Symbol from './elements/Symbol'; import Symbol from "./elements/Symbol";
import Defs from './elements/Defs'; import Defs from "./elements/Defs";
import LinearGradient from './elements/LinearGradient'; import LinearGradient from "./elements/LinearGradient";
import RadialGradient from './elements/RadialGradient'; import RadialGradient from "./elements/RadialGradient";
import Stop from './elements/Stop'; import Stop from "./elements/Stop";
import ClipPath from './elements/ClipPath'; import ClipPath from "./elements/ClipPath";
export { export {
Svg, Svg,

112
lib/Matrix2D.js
View File

@@ -119,7 +119,14 @@ export default class Matrix2D {
*/ */
copy = function(matrix) { copy = function(matrix) {
//noinspection JSUnresolvedVariable //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 //noinspection JSUnusedGlobalSymbols
@@ -150,10 +157,10 @@ export default class Matrix2D {
const c1 = this.c; const c1 = this.c;
const tx1 = this.tx; const tx1 = this.tx;
this.a = a * a1 + c * this.b; this.a = a * a1 + c * this.b;
this.b = b * a1 + d * this.b; this.b = b * a1 + d * this.b;
this.c = a * c1 + c * this.d; this.c = a * c1 + c * this.d;
this.d = b * c1 + d * this.d; this.d = b * c1 + d * this.d;
this.tx = a * tx1 + c * this.ty + tx; this.tx = a * tx1 + c * this.ty + tx;
this.ty = b * tx1 + d * this.ty + ty; this.ty = b * tx1 + d * this.ty + ty;
//noinspection JSValidateTypes //noinspection JSValidateTypes
@@ -178,10 +185,10 @@ export default class Matrix2D {
const c1 = this.c; const c1 = this.c;
const d1 = this.d; const d1 = this.d;
if (a !== 1 || b !== 0 || c !== 0 || d !== 1) { if (a !== 1 || b !== 0 || c !== 0 || d !== 1) {
this.a = a1 * a + c1 * b; this.a = a1 * a + c1 * b;
this.b = b1 * a + d1 * b; this.b = b1 * a + d1 * b;
this.c = a1 * c + c1 * d; this.c = a1 * c + c1 * d;
this.d = b1 * c + d1 * d; this.d = b1 * c + d1 * d;
} }
this.tx = a1 * tx + c1 * ty + this.tx; this.tx = a1 * tx + c1 * ty + this.tx;
this.ty = b1 * tx + d1 * ty + this.ty; this.ty = b1 * tx + d1 * ty + this.ty;
@@ -207,7 +214,17 @@ export default class Matrix2D {
* @param {Number} regY Optional. * @param {Number} regY Optional.
* @return {Matrix2D} This matrix. Useful for chaining method calls. * @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; let cos, sin;
if (rotation % 360) { if (rotation % 360) {
const r = rotation * DEG_TO_RAD; const r = rotation * DEG_TO_RAD;
@@ -222,10 +239,31 @@ export default class Matrix2D {
// TODO: can this be combined into a single append operation? // TODO: can this be combined into a single append operation?
skewX *= DEG_TO_RAD; skewX *= DEG_TO_RAD;
skewY *= 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(
this.append(cos * scaleX, sin * scaleX, -sin * scaleY, cos * scaleY, 0, 0); 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 { } 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) { if (regX || regY) {
@@ -245,9 +283,9 @@ export default class Matrix2D {
* var o = myDisplayObject; * var o = myDisplayObject;
* var mtx = new createjs.Matrix2D(); * var mtx = new createjs.Matrix2D();
* do { * do {
* // prepend each parent's transformation in turn: * // prepend each parent's transformation in turn:
* mtx.prependTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation, o.skewX, o.skewY, o.regX, o.regY); * mtx.prependTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation, o.skewX, o.skewY, o.regX, o.regY);
* } while (o = o.parent); * } while (o = o.parent);
* *
* Note that the above example would not account for {{#crossLink "DisplayObject/transformMatrix:property"}}{{/crossLink}} * Note that the above example would not account for {{#crossLink "DisplayObject/transformMatrix:property"}}{{/crossLink}}
* values. See {{#crossLink "Matrix2D/prependMatrix"}}{{/crossLink}} for an example that does. * values. See {{#crossLink "Matrix2D/prependMatrix"}}{{/crossLink}} for an example that does.
@@ -263,7 +301,17 @@ export default class Matrix2D {
* @param {Number} regY Optional. * @param {Number} regY Optional.
* @return {Matrix2D} This matrix. Useful for chaining method calls. * @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; let cos, sin;
if (rotation % 360) { if (rotation % 360) {
const r = rotation * DEG_TO_RAD; const r = rotation * DEG_TO_RAD;
@@ -276,16 +324,38 @@ export default class Matrix2D {
if (regX || regY) { if (regX || regY) {
// prepend the registration offset: // prepend the registration offset:
this.tx -= regX; this.ty -= regY; this.tx -= regX;
this.ty -= regY;
} }
if (skewX || skewY) { if (skewX || skewY) {
// TODO: can this be combined into a single prepend operation? // TODO: can this be combined into a single prepend operation?
skewX *= DEG_TO_RAD; skewX *= DEG_TO_RAD;
skewY *= DEG_TO_RAD; skewY *= DEG_TO_RAD;
this.prepend(cos * scaleX, sin * scaleX, -sin * scaleY, cos * scaleY, 0, 0); this.prepend(
this.prepend(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), x, y); 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 { } 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 //noinspection JSValidateTypes
return this; return this;

1
lib/PATTERN_UNITS.js
View File

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

42
lib/SvgTouchableMixin.js
View File

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

34
lib/attributes.js
View File

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

15
lib/extract/extractBrush.js
View File

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

12
lib/extract/extractClipPath.js
View File

@@ -1,12 +1,12 @@
import clipReg from './patternReg'; import clipReg from "./patternReg";
const clipRules = { const clipRules = {
evenodd: 0, evenodd: 0,
nonzero: 1 nonzero: 1
}; };
export default function (props) { export default function(props) {
let {clipPath, clipRule} = props; let { clipPath, clipRule } = props;
let clipPathProps = {}; let clipPathProps = {};
if (clipPath) { if (clipPath) {
@@ -17,7 +17,11 @@ export default function (props) {
if (matched) { if (matched) {
clipPathProps.clipPath = matched[1]; clipPathProps.clipPath = matched[1];
} else { } 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 extractBrush from "./extractBrush";
import extractOpacity from './extractOpacity'; import extractOpacity from "./extractOpacity";
import {fillProps} from '../props'; import { fillProps } from "../props";
const fillRules = { const fillRules = {
evenodd: 0, evenodd: 0,
@@ -10,7 +10,7 @@ const fillRules = {
const fillKeys = Object.keys(fillProps); const fillKeys = Object.keys(fillProps);
export default function(props, styleProperties) { export default function(props, styleProperties) {
fillKeys.forEach((name) => { fillKeys.forEach(name => {
if (props.hasOwnProperty(name)) { if (props.hasOwnProperty(name)) {
styleProperties.push(name); styleProperties.push(name);
} }
@@ -18,7 +18,7 @@ export default function(props, styleProperties) {
return { return {
// default fill is black // default fill is black
fill: extractBrush(props.fill || '#000'), fill: extractBrush(props.fill || "#000"),
fillOpacity: extractOpacity(props.fillOpacity), fillOpacity: extractOpacity(props.fillOpacity),
fillRule: fillRules[props.fillRule] === 0 ? 0 : 1 fillRule: fillRules[props.fillRule] === 0 ? 0 : 1
}; };

38
lib/extract/extractGradient.js
View File

@@ -1,12 +1,12 @@
import {Children} from 'react'; import { Children } from "react";
import _ from 'lodash'; import _ from "lodash";
import Color from 'color'; import Color from "color";
import extractOpacity from './extractOpacity'; import extractOpacity from "./extractOpacity";
import extractTransform from './extractTransform'; import extractTransform from "./extractTransform";
import PATTERN_UNITS from '../PATTERN_UNITS'; import PATTERN_UNITS from "../PATTERN_UNITS";
import percentToFloat from '../percentToFloat'; import percentToFloat from "../percentToFloat";
import Stop from '../../elements/Stop'; import Stop from "../../elements/Stop";
export default function(props) { export default function(props) {
if (!props.id) { if (!props.id) {
@@ -22,20 +22,27 @@ export default function(props) {
// add stop // add stop
//noinspection JSUnresolvedFunction //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 { } 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) => { const sorted = _.sortBy(
return {stop, offset}; _.map(stops, (stop, offset) => {
}), 'offset'); return { stop, offset };
}),
"offset"
);
const gradient = []; const gradient = [];
sorted.forEach(({stop}) => { sorted.forEach(({ stop }) => {
let [r, g, b, a = 1] = stop.rgb().array(); let [r, g, b, a = 1] = stop.rgb().array();
gradient.push(r / 255); gradient.push(r / 255);
gradient.push(g / 255); gradient.push(g / 255);
@@ -43,8 +50,7 @@ export default function(props) {
gradient.push(a); gradient.push(a);
}); });
gradient.push(...sorted.map(({offset}) => +offset)); gradient.push(...sorted.map(({ offset }) => +offset));
let gradientTransform; let gradientTransform;
if (props.gradientTransform) { if (props.gradientTransform) {

13
lib/extract/extractLengthList.js
View File

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

4
lib/extract/extractOpacity.js
View File

@@ -1,4 +1,4 @@
export default function (opacity) { export default function(opacity) {
const value = +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) {
export default function (polyPoints) { return polyPoints
return polyPoints.replace(/[^e]-/, ' -').split(/(?:\s+|\s*,\s*)/g).join(' '); .replace(/[^e]-/, " -")
.split(/(?:\s+|\s*,\s*)/g)
.join(" ");
} }

12
lib/extract/extractProps.js
View File

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

14
lib/extract/extractResponder.js
View File

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

26
lib/extract/extractStroke.js
View File

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

85
lib/extract/extractText.js
View File

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

60
lib/extract/extractTransform.js
View File

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

33
lib/extract/extractViewBox.js
View File

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

6
lib/percentToFloat.js
View File

@@ -1,8 +1,10 @@
let percentReg = /^([+\-]?\d+(?:\.\d+)?(?:[eE][+\-]?\d+)?)(%?)$/; let percentReg = /^([+\-]?\d+(?:\.\d+)?(?:[eE][+\-]?\d+)?)(%?)$/;
export default function (percent) { export default function(percent) {
let matched = percent.match(percentReg); let matched = percent.match(percentReg);
if (!matched) { 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; return 0;
} }

108
lib/props.js
View File

@@ -1,8 +1,11 @@
import PropTypes from 'prop-types'; import PropTypes from "prop-types";
import {PanResponder} from 'react-native'; import { PanResponder } from "react-native";
const numberProp = PropTypes.oneOfType([PropTypes.string, PropTypes.number]); 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 = { const touchableProps = {
disabled: PropTypes.bool, disabled: PropTypes.bool,
@@ -15,9 +18,9 @@ const touchableProps = {
delayLongPress: PropTypes.number delayLongPress: PropTypes.number
}; };
const responderProps = [ const responderProps = [
...Object.keys(PanResponder.create({}).panHandlers), ...Object.keys(PanResponder.create({}).panHandlers),
'pointerEvents' "pointerEvents"
].reduce((props, name) => { ].reduce((props, name) => {
props[name] = PropTypes.func; props[name] = PropTypes.func;
return props; return props;
@@ -26,11 +29,11 @@ const responderProps = [
const fillProps = { const fillProps = {
fill: PropTypes.string, fill: PropTypes.string,
fillOpacity: numberProp, fillOpacity: numberProp,
fillRule: PropTypes.oneOf(['evenodd', 'nonzero']) fillRule: PropTypes.oneOf(["evenodd", "nonzero"])
}; };
const clipProps = { const clipProps = {
clipRule: PropTypes.oneOf(['evenodd', 'nonzero']), clipRule: PropTypes.oneOf(["evenodd", "nonzero"]),
clipPath: PropTypes.string clipPath: PropTypes.string
}; };
@@ -44,8 +47,8 @@ const strokeProps = {
strokeOpacity: numberProp, strokeOpacity: numberProp,
strokeDasharray: numberArrayProp, strokeDasharray: numberArrayProp,
strokeDashoffset: numberProp, strokeDashoffset: numberProp,
strokeLinecap: PropTypes.oneOf(['butt', 'square', 'round']), strokeLinecap: PropTypes.oneOf(["butt", "square", "round"]),
strokeLinejoin: PropTypes.oneOf(['miter', 'bevel', 'round']), strokeLinejoin: PropTypes.oneOf(["miter", "bevel", "round"]),
strokeMiterlimit: numberProp strokeMiterlimit: numberProp
}; };
@@ -81,19 +84,45 @@ const pathProps = {
// normal | italic | oblique | inherit // normal | italic | oblique | inherit
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-style // 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 // normal | small-caps | inherit
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-variant // 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 // 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 // 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 // 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 // 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 // <absolute-size> | <relative-size> | <length> | <percentage> | inherit
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-size // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-size
@@ -125,11 +154,17 @@ const font = PropTypes.object;
// start | middle | end | inherit // start | middle | end | inherit
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor // 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 // none | underline | overline | line-through | blink | inherit
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-decoration // 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 // normal | <length> | inherit
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/letter-spacing // 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://developer.mozilla.org/en/docs/Web/CSS/font-variant-ligatures
https://www.w3.org/TR/css-fonts-3/#font-variant-ligatures-prop 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 = { const fontProps = {
fontStyle, fontStyle,
@@ -188,7 +223,7 @@ const fontProps = {
https://svgwg.org/svg2-draft/text.html#TextElementLengthAdjustAttribute https://svgwg.org/svg2-draft/text.html#TextElementLengthAdjustAttribute
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/lengthAdjust 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 Name Value Initial value Animatable
@@ -239,7 +274,24 @@ const verticalAlign = numberProp;
https://svgwg.org/svg2-draft/text.html#AlignmentBaselineProperty https://svgwg.org/svg2-draft/text.html#AlignmentBaselineProperty
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/alignment-baseline 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 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 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 6.12. Low-level font feature settings control: the font-feature-settings property
@@ -370,14 +426,14 @@ const textSpecificProps = {
lengthAdjust, lengthAdjust,
textLength, textLength,
fontData: PropTypes.object, fontData: PropTypes.object,
fontFeatureSettings, fontFeatureSettings
}; };
// https://svgwg.org/svg2-draft/text.html#TSpanAttributes // https://svgwg.org/svg2-draft/text.html#TSpanAttributes
const textProps = { const textProps = {
...textSpecificProps, ...textSpecificProps,
dx: numberArrayProp, dx: numberArrayProp,
dy: numberArrayProp, dy: numberArrayProp
}; };
/* /*
@@ -391,7 +447,7 @@ const textProps = {
yes yes
https://svgwg.org/svg2-draft/text.html#TextPathElementSideAttribute https://svgwg.org/svg2-draft/text.html#TextPathElementSideAttribute
*/ */
const side = PropTypes.oneOf(['left', 'right']); const side = PropTypes.oneOf(["left", "right"]);
/* /*
Name Name
@@ -419,7 +475,7 @@ const startOffset = numberProp;
https://svgwg.org/svg2-draft/text.html#TextPathElementMethodAttribute https://svgwg.org/svg2-draft/text.html#TextPathElementMethodAttribute
https://developer.mozilla.org/en/docs/Web/SVG/Element/textPath https://developer.mozilla.org/en/docs/Web/SVG/Element/textPath
*/ */
const method = PropTypes.oneOf(['align', 'stretch']); const method = PropTypes.oneOf(["align", "stretch"]);
/* /*
Name Name
@@ -433,7 +489,7 @@ const method = PropTypes.oneOf(['align', 'stretch']);
https://svgwg.org/svg2-draft/text.html#TextPathElementSpacingAttribute https://svgwg.org/svg2-draft/text.html#TextPathElementSpacingAttribute
https://developer.mozilla.org/en/docs/Web/SVG/Element/textPath https://developer.mozilla.org/en/docs/Web/SVG/Element/textPath
*/ */
const spacing = PropTypes.oneOf(['auto', 'exact']); const spacing = PropTypes.oneOf(["auto", "exact"]);
/* /*
Name Name
@@ -445,7 +501,7 @@ const spacing = PropTypes.oneOf(['auto', 'exact']);
Animatable Animatable
yes yes
*/ */
const midLine = PropTypes.oneOf(['sharp', 'smooth']); const midLine = PropTypes.oneOf(["sharp", "smooth"]);
// https://svgwg.org/svg2-draft/text.html#TextPathAttributes // https://svgwg.org/svg2-draft/text.html#TextPathAttributes
// https://developer.mozilla.org/en/docs/Web/SVG/Element/textPath // https://developer.mozilla.org/en/docs/Web/SVG/Element/textPath
@@ -456,7 +512,7 @@ const textPathProps = {
method, method,
spacing, spacing,
side, side,
midLine, midLine
}; };
export { export {