add Use element and add example for it

add Use element and add example for it

Example/examples.js

@@ -9,6 +9,7 @@ import * as Path from './examples/Path';
 import * as Text from './examples/Text';
 import * as G from './examples/G';
 import * as Stroking from './examples/Stroking';
+import * as Use from './examples/Use';
 
 export {
     Svg,
@@ -21,5 +22,6 @@ export {
     Path,
     Text,
     Stroking,
-    G
+    G,
+    Use
 };

Example/examples/Use.js

@@ -0,0 +1,64 @@
+import React, {
+    Component
+} from 'react-native';
+
+import Svg, {
+    Defs,
+    Use,
+    G,
+    Rect,
+    Circle
+} from 'react-native-art-svg';
+
+class UseExample extends Component{
+    static title = 'Reuse svg code';
+    render() {
+        return <Svg
+            height="100"
+            width="300"
+        >
+            <Defs>
+                <G id="shape">
+                    <G>
+                        <Circle cx="50" cy="50" r="50" />
+                        <Rect x="50" y="50" width="50" height="50" />
+                        <Circle cx="50" cy="50" r="5" fill="blue" />
+                    </G>
+                </G>
+            </Defs>
+            <Use href="#shape" x="20" y="0"/>
+            <Use href="#shape" x="170"y="0" />
+        </Svg>;
+    };
+}
+
+class UseShapes extends Component{
+    static title = 'Using Shapes Outside of a Defs Element';
+    render() {
+        return <Svg
+            height="110"
+            width="200"
+        >
+            <G id="shape">
+                <Rect x="0" y="0" width="50" height="50" />
+            </G>
+
+            <Use href="#shape" x="75" y="50" fill="#0f0"/>
+            <Use href="#shape" x="150" y="50" stroke="#0f0" fill="none"/>
+        </Svg>;
+    };
+}
+
+const icon = <Svg
+    height="20"
+    width="20"
+>
+
+</Svg>;
+
+const samples = [UseExample, UseShapes];
+
+export {
+    icon,
+    samples
+}

Example/main.js

@@ -107,7 +107,7 @@ const styles = StyleSheet.create({
 });
 
 
-const names = ['Svg', 'Stroking', 'Path', 'Line', 'Rect', 'Polygon', 'Polyline', 'Circle', 'Ellipse', 'G', 'Text'];
+const names = ['Svg', 'Stroking', 'Path', 'Line', 'Rect', 'Polygon', 'Polyline', 'Circle', 'Ellipse', 'G', 'Text', 'Use'];
 
 class ArtSvgExample extends Component {
     constructor() {

README.md

@@ -1,6 +1,7 @@
 ### react-native-art-svg
 
 
+
 TODO:
 1. fill-rule:evenodd
 2. gradients
@@ -9,20 +10,14 @@ TODO:
 
 elements:
 1.defs
-
 2.tref !
 3.tspan !
-
 4.clipPath (wait for official todo)
-
-6.glyph ? missing-glyph?
-
-7.linearGradient
-
+5.glyph ? missing-glyph?
+6.linearGradient
+7.radialGradient
 8.marker?
 9.pattern
-10.radialGradient
+10.textPath
 11.stop
 12.symbol
-13.use
-14.textPath

elements/Circle.js

@@ -22,8 +22,8 @@ class Circle extends Component{
             {...this.props}
             {...strokeFilter(this.props)}
             r={null}
-            rx={this.props.r}
-            ry={this.props.r}
+            rx={+this.props.r}
+            ry={+this.props.r}
         />
     }
 }

elements/G.js

@@ -9,6 +9,8 @@ let {
     Group
 } = ART;
 
+import Defs from './Defs';
+
 const transformProps = {
     scale: null,
     scaleX: null,
@@ -29,19 +31,23 @@ class G extends Component{
     constructor() {
         super(...arguments);
         this.children = Children.map(this.props.children, child => cloneElement(child, {
-            id: null,
             ...this.props,
             ...transformProps,
-            children: child.children,
-            ...child.props
+            ...child.props,
+            id: null
         }));
     };
 
     render() {
-        return <Group
+        let element = <Group
             {...this.props}
             {...transformFilter(this.props)}
+            id={null}
         >{this.children}</Group>;
+        if (this.props.id) {
+            Defs.set(this.props.id + ':' + this.props.svgId, <G {...this.props} id={null} />);
+        }
+        return element;
     }
 }
 

elements/Path.js

@@ -1,12 +1,14 @@
 import React, {
     ART,
     Component,
-    PropTypes
+    PropTypes,
+    cloneElement
 } from 'react-native';
 
 let {
     Shape
 } = ART;
+import Defs from './Defs';
 
 import fillFilter from '../lib/fillFilter';
 import strokeFilter from '../lib/strokeFilter';
@@ -25,12 +27,16 @@ class Path extends Component{
     };
     render() {
         let {props} = this;
-
-        return <Shape
+        let element = <Shape
             {...props}
             {...strokeFilter(props)}
             fill={fillFilter(props)}
+            id={null}
         />;
+        if (this.props.id) {
+            Defs.set(this.props.id + ':' + this.props.svgId, <Path {...this.props} id={null} />);
+        }
+        return element;
     }
 }
 

elements/Rect.js

@@ -6,6 +6,7 @@ import React, {
 
 import fillFilter from '../lib/fillFilter';
 import strokeFilter from '../lib/strokeFilter';
+import transformFilter from '../lib/transformFilter';
 import Path from './Path';
 
 let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
@@ -82,17 +83,17 @@ class Rect extends Component{
              h ${-width}
              Z
         `;
-
         return <Path
             {...props}
-            x={rx ? +rx:  null}
-            y={null}
             rx={null}
             ry={null}
             width={null}
             height={null}
             {...strokeFilter(props)}
             fill={fillFilter(props)}
+            {...transformFilter(props)}
+            x={null}
+            y={null}
             d={d}
         />;
     }

elements/Svg.js

@@ -1,7 +1,9 @@
 import React, {
     ART,
     Component,
-    PropTypes
+    PropTypes,
+    Children,
+    cloneElement
 } from 'react-native';
 
 import _ from 'lodash';
@@ -71,6 +73,8 @@ function extractViewbox({viewbox, width, height, preserveAspectRatio}) {
     return false;
 }
 
+let id = 0;
+
 class Svg extends Component{
     static displayName = 'Svg';
     static propType = {
@@ -82,6 +86,20 @@ class Svg extends Component{
         preserveAspectRatio: PropTypes.string // preserveAspectRatio only supports 'none' for now
     };
 
+    constructor() {
+        super(...arguments);
+        id++;
+        this.id = id;
+    }
+
+    getChildren = () => {
+        return Children.map(this.props.children, child => {
+            return cloneElement(child, {
+                svgId: this.id
+            });
+        });
+    };
+
     render() {
         let opacity = +this.props.opacity;
         let viewbox = extractViewbox(this.props);
@@ -104,7 +122,7 @@ class Svg extends Component{
                     scaleX={scaleX}
                     scaleY={scaleY}
                 >
-                    {this.props.children}
+                    {this.getChildren()}
                 </Group>}
             </Surface>;
         }
@@ -118,7 +136,7 @@ class Svg extends Component{
                 }
             ]}
         >
-            {this.props.children}
+            {this.getChildren()}
         </Surface>;
     }
 }

elements/Text.js

@@ -7,6 +7,7 @@ import React, {
 let {
     Text:ARTText
 } = ART;
+import Defs from './Defs';
 
 import fillFilter from '../lib/fillFilter';
 import strokeFilter from '../lib/strokeFilter';
@@ -33,7 +34,7 @@ class Text extends Component{
             y = props.dy ? +props.y + (+props.dy) : +props.y;
         }
 
-        return  <ARTText
+        let element = <ARTText
             {...props}
             {...transformFilter(props)}
             {...strokeFilter(props)}
@@ -47,7 +48,12 @@ class Text extends Component{
             alignment={props.textAnchor || props.alignment}
             x={x}
             y={y}
+            id={null}
         />;
+        if (this.props.id) {
+            Defs.set(this.props.id + ':' + this.props.svgId, <Text {...this.props} id={null} />);
+        }
+        return element;
     }
 }
 

elements/Use.js

@@ -0,0 +1,37 @@
+import React, {
+    Component,
+    PropTypes,
+    ART,
+    cloneElement
+} from 'react-native';
+let {Group} = ART;
+import Defs from './Defs';
+import transformFilter from '../lib/transformFilter';
+let idReg = /^#(.+)/;
+class Use extends Component{
+    static displayName = 'Use';
+    static propType = {
+        href: PropTypes.string
+    };
+
+    render() {
+        let href = this.props.href;
+        if (href) {
+            let matched = href.match(idReg);
+            if (matched) {
+                let template = Defs.get(matched[1] + ':' + this.props.svgId);
+                if (template) {
+                    let props = {
+                        ...this.props,
+                        href: null
+                    };
+                    return cloneElement(template, props);
+                }
+            }
+
+        }
+        return <Group />;
+    }
+}
+
+export default Use;

lib/transformFilter.js

@@ -8,6 +8,8 @@ export default function (props) {
         rotation: props.rotation || props.rotate || 0,
         scale: props.scale || 1,
         originX,
-        originY
+        originY,
+        x: +props.x || 0,
+        y: +props.y || 0
     }
 }