[web] Refactor and cleanup

index.web.js

@@ -1,17 +1,5 @@
-import { createElement, StyleSheet } from 'react-native-web';
+import { createElement } from 'react-native-web';
-
+import { resolve } from './lib/resolve';
-function resolve(styleProp, cleanedProps) {
-  if (styleProp) {
-    return StyleSheet
-      ? [styleProp, cleanedProps]
-      : // Compatibility for arrays of styles in plain react web
-      styleProp.length
-      ? Object.assign({}, ...styleProp, cleanedProps)
-      : Object.assign({}, styleProp, cleanedProps);
-  } else {
-    return cleanedProps;
-  }
-}
 
 /**
  * The `react-native-svg` has some non-standard api's that do not match with the
@@ -91,57 +79,22 @@ function prepare(props) {
   return clean;
 }
 
-/**
- * Return a circle SVG element.
- *
- * @param {Object} props The properties that are spread on the SVG element.
- * @returns {React.Component} Circle SVG.
- * @public
- */
 function Circle(props) {
   return createElement('circle', prepare(props));
 }
 
-/**
- * Return a clipPath SVG element.
- *
- * @param {Object} props The properties that are spread on the SVG element.
- * @returns {React.Component} ClipPath SVG.
- * @public
- */
 function ClipPath(props) {
   return createElement('clipPath', prepare(props));
 }
 
-/**
- * Return a defs SVG element.
- *
- * @param {Object} props The properties that are spread on the SVG element.
- * @returns {React.Component} Defs SVG.
- * @public
- */
 function Defs(props) {
   return createElement('defs', prepare(props));
 }
 
-/**
- * Return a ellipse SVG element.
- *
- * @param {Object} props The properties that are spread on the SVG element.
- * @returns {React.Component} Ellipse SVG.
- * @public
- */
 function Ellipse(props) {
   return createElement('ellipse', prepare(props));
 }
 
-/**
- * Return a g SVG element.
- *
- * @param {Object} props The properties that are spread on the SVG element.
- * @returns {React.Component} G SVG.
- * @public
- */
 function G(props) {
   const { x, y, ...rest } = props;
 
@@ -152,216 +105,74 @@ function G(props) {
   return createElement('g', prepare(rest));
 }
 
-/**
- * Return a image SVG element.
- *
- * @param {Object} props The properties that are spread on the SVG element.
- * @returns {React.Component} Image SVG.
- * @public
- */
 function Image(props) {
   return createElement('image', prepare(props));
 }
 
-/**
- * Return a line SVG element.
- *
- * @param {Object} props The properties that are spread on the SVG element.
- * @returns {React.Component} Line SVG.
- * @public
- */
 function Line(props) {
   return createElement('line', prepare(props));
 }
 
-/**
- * Return a linearGradient SVG element.
- *
- * @param {Object} props The properties that are spread on the SVG element.
- * @returns {React.Component} LinearGradient SVG.
- * @public
- */
 function LinearGradient(props) {
   return createElement('linearGradient', prepare(props));
 }
 
-/**
- * Return a path SVG element.
- *
- * @param {Object} props The properties that are spread on the SVG element.
- * @returns {React.Component} Path SVG.
- * @public
- */
 function Path(props) {
   return createElement('path', prepare(props));
 }
 
-/**
- * Return a polygon SVG element.
- *
- * @param {Object} props The properties that are spread on the SVG element.
- * @returns {React.Component} Polygon SVG.
- * @public
- */
 function Polygon(props) {
   return createElement('polygon', prepare(props));
 }
 
-/**
- * Return a polyline SVG element.
- *
- * @param {Object} props The properties that are spread on the SVG element.
- * @returns {React.Component} Polyline SVG.
- * @public
- */
 function Polyline(props) {
   return createElement('polyline', prepare(props));
 }
 
-/**
- * Return a radialGradient SVG element.
- *
- * @param {Object} props The properties that are spread on the SVG element.
- * @returns {React.Component} RadialGradient SVG.
- * @public
- */
 function RadialGradient(props) {
   return createElement('radialGradient', prepare(props));
 }
 
-/**
- * Return a rect SVG element.
- *
- * @param {Object} props The properties that are spread on the SVG element.
- * @returns {React.Component} Rect SVG.
- * @public
- */
 function Rect(props) {
   return createElement('rect', prepare(props));
 }
 
-/**
- * Return a stop SVG element.
- *
- * @param {Object} props The properties that are spread on the SVG element.
- * @returns {React.Component} Stop SVG.
- * @public
- */
 function Stop(props) {
   return createElement('stop', prepare(props));
 }
 
-/**
- * Return a SVG element.
- *
- * @param {Object} props The properties that are spread on the SVG element.
- * @returns {React.Component} SVG.
- * @public
- */
 function Svg(props) {
-  const { title, ...rest } = props;
+  return createElement('svg', prepare(props));
-
-  if (title) {
-    return createElement(
-      'svg',
-      { role: 'img', 'aria-label': '[title]', ...prepare(rest) },
-      [createElement('title', {}, title), props.children],
-    );
-  }
-
-  return createElement('svg', prepare(rest));
 }
 
-/**
- * Return a symbol SVG element.
- *
- * @param {Object} props The properties that are spread on the SVG element.
- * @returns {React.Component} Symbol SVG.
- * @public
- */
 function Symbol(props) {
   return createElement('symbol', prepare(props));
 }
 
-/**
- * Return a text SVG element.
- *
- * @returns {React.Component} Text SVG.
- * @public
- * @param {Object} props The properties that are spread on the SVG element.
- * @param {String} props.x x position
- * @param {String} props.y y position
- * @param {String} props.dx delta x
- * @param {String} props.dy delta y
- * @param {String} props.rotate rotation
- */
 function Text(props) {
   return createElement('text', prepare(props));
 }
 
-/**
- * Return a tspan SVG element.
- *
- * @returns {React.Component} TSpan SVG.
- * @public
- * @param {Object} props The properties that are spread on the SVG element.
- * @param {String} props.x x position
- * @param {String} props.y y position
- * @param {String} props.dx delta x
- * @param {String} props.dy delta y
- * @param {String} props.rotate rotation
- */
 function TSpan(props) {
   return createElement('tspan', prepare(props));
 }
 
-/**
- * Return a textpath SVG element.
- *
- * @param {Object} props The properties that are spread on the SVG element.
- * @returns {React.Component} TextPath SVG.
- * @public
- */
 function TextPath(props) {
   return createElement('textPath', prepare(props));
 }
 
-/**
- * Return a use SVG element.
- *
- * @param {Object} props The properties that are spread on the SVG element.
- * @returns {React.Component} Use SVG.
- * @public
- */
 function Use(props) {
   return createElement('use', prepare(props));
 }
 
-/**
- * Return a mask SVG element.
- *
- * @param {Object} props The properties that are spread on the SVG element.
- * @returns {React.Component} Use SVG.
- * @public
- */
 function Mask(props) {
   return createElement('mask', prepare(props));
 }
 
-/**
- * Return a pattern SVG element.
- *
- * @param {Object} props The properties that are spread on the SVG element.
- * @returns {React.Component} Use SVG.
- * @public
- */
 function Pattern(props) {
   return createElement('pattern', prepare(props));
 }
 
-//
-// Expose everything in the same way as `react-native-svg` is doing.
-//
 export {
   Circle,
   ClipPath,

lib/resolve.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native-web';
+
+// Kept in separate file, to avoid name collision with Symbol element
+export function resolve(styleProp, cleanedProps) {
+  if (styleProp) {
+    return StyleSheet
+      ? [styleProp, cleanedProps]
+      : // Compatibility for arrays of styles in plain react web
+      styleProp[Symbol.iterator]
+      ? Object.assign({}, ...styleProp, cleanedProps)
+      : Object.assign({}, styleProp, cleanedProps);
+  } else {
+    return cleanedProps;
+  }
+}