add Shape

elements/Shape.js

@@ -0,0 +1,52 @@
+import React, {
+    Component,
+    PropTypes
+} from 'react-native';
+import Path from './Path';
+import extractProps from '../lib/extract/extractProps';
+import {ShapeAttributes} from '../lib/attributes';
+import createReactNativeComponentClass from 'react-native/Libraries/ReactNative/createReactNativeComponentClass';
+
+/**
+ * Circle shape type
+ */
+const CIRCLE = 0;
+
+/**
+ *
+ */
+const CIRCLE_COORDS = ['cx', 'cy', 'r'];
+
+const ELLIPSE = 1;
+const ELLIPSE_COORDS = ['cx', 'cy', 'rx', 'ry'];
+
+const LINE = 2;
+const LINE_COORDS = ['x1', 'y1', 'x2', 'y2'];
+
+const RECT = 5;
+const RECT_COORDS = ['x', 'y', 'width', 'height'];
+
+
+/**
+ * virtualNode component for shape elements
+ */
+class Shape extends Component{
+    static displayName = 'Shape';
+
+    render() {
+        let {props} = this;
+
+        return <NativePath
+            {...props}
+            {...extractProps.call(props)}
+            shape={new SerializableShape(props).toArray()}
+        />;
+    }
+}
+
+let NativePath = createReactNativeComponentClass({
+    validAttributes: ShapeAttributes,
+    uiViewClassName: 'RNSVGShape'
+});
+
+export default Shape;

lib/SerializableShape.js

@@ -0,0 +1,10 @@
+export default class {
+    constructor(props) {
+
+    }
+
+    toArray = () => {
+
+    };
+};
+

lib/attributes.js

@@ -18,6 +18,7 @@ function fontAndLinesDiffer(a, b) {
     if (a === b) {
         return false;
     }
+
     if (a.font !== b.font) {
         if (a.font === null) {
             return true;
@@ -38,7 +39,7 @@ function fontAndLinesDiffer(a, b) {
     return arrayDiffer(a.lines, b.lines);
 }
 
-var NodeAttributes = {
+const NodeAttributes = {
     transform: {
         diff: arrayDiffer
     },
@@ -49,45 +50,57 @@ var NodeAttributes = {
     clipRule: true
 };
 
-var GroupAttributes = Object.assign({
-}, NodeAttributes);
+const GroupAttributes = {
+    ...NodeAttributes
+};
 
-var RenderableAttributes = Object.assign({
+const RenderableAttributes = {
     fill: {
         diff: arrayDiffer
     },
+    fillRule: true,
     stroke: {
         diff: arrayDiffer
     },
     strokeWidth: true,
     strokeLinecap: true,
     strokeLinejoin: true,
-    fillRule: true,
     strokeDasharray: {
         diff: arrayDiffer
     },
-    strokeDashoffset: true
-}, NodeAttributes);
+    strokeDashoffset: true,
+    ...NodeAttributes
+};
 
-var PathAttributes = Object.assign({
+const PathAttributes ={
     d: {
         diff: arrayDiffer
-    }
-}, RenderableAttributes);
+    },
+    ...RenderableAttributes
+};
 
-var TextAttributes = Object.assign({
+const TextAttributes = {
     alignment: true,
     frame: {
         diff: fontAndLinesDiffer
     },
     path: {
         diff: arrayDiffer
-    }
-}, RenderableAttributes);
+    },
+    ...RenderableAttributes
+};
+
+const ShapeAttributes = {
+    shape: {
+        diff: arrayDiffer
+    },
+    ...RenderableAttributes
+};
 
 export {
     GroupAttributes,
     PathAttributes,
-    TextAttributes
+    TextAttributes,
+    ShapeAttributes
 }