Implement prop extraction for side and alignmentBaseline. Cleanup extractText, fix linting.

android/src/main/java/com/horcrux/svg/AlignmentBaseline.java

@@ -33,31 +33,31 @@ enum AlignmentBaseline {
     center("center"),
     top("top");
 
-    private final String weight;
+    private final String alignment;
 
-    AlignmentBaseline(String weight) {
-        this.weight = weight;
+    AlignmentBaseline(String alignment) {
+        this.alignment = alignment;
     }
 
     public static AlignmentBaseline getEnum(String strVal) {
-        if (!weightToEnum.containsKey(strVal)) {
+        if (!alignmentToEnum.containsKey(strVal)) {
             throw new IllegalArgumentException("Unknown String Value: " + strVal);
         }
-        return weightToEnum.get(strVal);
+        return alignmentToEnum.get(strVal);
     }
 
-    private static final Map<String, AlignmentBaseline> weightToEnum;
+    private static final Map<String, AlignmentBaseline> alignmentToEnum;
 
     static {
         final Map<String, AlignmentBaseline> tmpMap = new HashMap<>();
         for (final AlignmentBaseline en : AlignmentBaseline.values()) {
-            tmpMap.put(en.weight, en);
+            tmpMap.put(en.alignment, en);
         }
-        weightToEnum = ImmutableMap.copyOf(tmpMap);
+        alignmentToEnum = ImmutableMap.copyOf(tmpMap);
     }
 
     @Override
     public String toString() {
-        return weight;
+        return alignment;
     }
 }

android/src/main/java/com/horcrux/svg/FontData.java

@@ -19,7 +19,7 @@ class FontData {
     private static final String WORD_SPACING = "wordSpacing";
     private static final String LETTER_SPACING = "letterSpacing";
     private static final String TEXT_DECORATION = "textDecoration";
-    private static final String ALIGNMENT_BASELINE = "alignment-baseline";
+    private static final String ALIGNMENT_BASELINE = "alignmentBaseline";
 
     final double fontSize;
 

elements/TextPath.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import createReactNativeComponentClass from 'react-native/Libraries/Renderer/shims/createReactNativeComponentClass';
 import {TextPathAttributes} from '../lib/attributes';
 import extractText from '../lib/extract/extractText';
@@ -16,15 +15,15 @@ export default class extends Shape {
     static propTypes = textPathProps;
 
     render() {
-        let {children, href, startOffset, ...props} = this.props;
+        let {children, href, startOffset, method, spacing, side, ...props} = this.props;
         if (href) {
             let matched = href.match(idExpReg);
 
             if (matched) {
                 href = matched[1];
-
+                startOffset = `${startOffset || 0}`;
                 return <RNSVGTextPath
-                    href={href}
+                    {...{href, startOffset, method, spacing, side}}
                     {...extractProps({
                         ...props,
                         x: null,
@@ -32,7 +31,6 @@ export default class extends Shape {
                     }, this)}
                     {...extractText({
                         children,
-                        startOffset
                     }, true)}
                 />;
             }

lib/attributes.js

@@ -110,6 +110,7 @@ const PathAttributes = {
 
 const TextSpecificAttributes = {
     ...RenderableAttributes,
+    alignmentBaseline: true,
     lengthAdjust: true,
     textLength: true,
 };

lib/extract/extractText.js

@@ -51,6 +51,7 @@ export function extractFont(props) {
         fontStretch,
         textAnchor,
         textDecoration,
+        alignmentBaseline,
         letterSpacing,
         wordSpacing,
         kerning,
@@ -73,6 +74,7 @@ export function extractFont(props) {
         fontFamily,
         textAnchor,
         textDecoration,
+        alignmentBaseline,
         letterSpacing,
         wordSpacing,
         kerning,
@@ -103,13 +105,10 @@ export default function(props, container) {
         y,
         dx,
         dy,
-        method,
-        spacing,
     } = props;
     let {
         rotate,
-        children,
-        startOffset
+        children
     } = props;
 
     const positionX = parseSVGLengthList(x);
@@ -138,7 +137,6 @@ export default function(props, container) {
     }
 
     const font = extractFont(props);
-    startOffset = (startOffset || 0).toString();
 
     return {
         font,
@@ -149,8 +147,5 @@ export default function(props, container) {
         rotate,
         deltaX,
         deltaY,
-        method,
-        spacing,
-        startOffset,
     };
 }

lib/props.js

@@ -48,6 +48,26 @@ const strokeProps = {
     strokeMiterlimit: numberProp
 };
 
+const transformProps = {
+    scale: numberProp,
+    scaleX: numberProp,
+    scaleY: numberProp,
+    rotate: numberProp,
+    rotation: numberProp,
+    translate: numberProp,
+    translateX: numberProp,
+    translateY: numberProp,
+    x: numberProp,
+    y: numberProp,
+    origin: numberProp,
+    originX: numberProp,
+    originY: numberProp,
+    skew: numberProp,
+    skewX: numberProp,
+    skewY: numberProp,
+    transform: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
+};
+
 const pathProps = {
     ...fillProps,
     ...strokeProps,
@@ -153,19 +173,37 @@ const lengthAdjust = PropTypes.oneOf(['spacing', 'spacingAndGlyphs']);
 */
 const textLength = PropTypes.string;
 
+/*
+ Name:	alignment-baseline
+ Value:	baseline | text-bottom | alphabetic | ideographic | middle | central | mathematical | text-top | bottom | center | top
+ Initial:	baseline
+ Applies to:	inline-level boxes, flex items, grid items, table cells
+ Inherited:	no
+ Percentages:	N/A
+ Media:	visual
+ Computed value:	as specified
+ Canonical order:	per grammar
+ Animation type:	discrete
+ https://drafts.csswg.org/css-inline/#propdef-alignment-baseline
+ 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']);
+
 const textSpecificProps = {
     ...pathProps,
     ...fontProps,
+    alignmentBaseline,
     lengthAdjust,
     textLength,
-}
+};
 
 // https://svgwg.org/svg2-draft/text.html#TSpanAttributes
 const textProps = {
     ...textSpecificProps,
     dx: PropTypes.string,
     dy: PropTypes.string,
-}
+};
 
 /*
  Name
@@ -231,26 +269,6 @@ const textPathProps = {
     method,
     spacing,
     side,
-}
-
-const transformProps = {
-    scale: numberProp,
-    scaleX: numberProp,
-    scaleY: numberProp,
-    rotate: numberProp,
-    rotation: numberProp,
-    translate: numberProp,
-    translateX: numberProp,
-    translateY: numberProp,
-    x: numberProp,
-    y: numberProp,
-    origin: numberProp,
-    originX: numberProp,
-    originY: numberProp,
-    skew: numberProp,
-    skewX: numberProp,
-    skewY: numberProp,
-    transform: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
 };
 
 export {