diff --git a/Example/examples/Path.js b/Example/examples/Path.js index adae7521..04b50ef2 100644 --- a/Example/examples/Path.js +++ b/Example/examples/Path.js @@ -3,7 +3,10 @@ import React, { } from 'react-native'; import Svg, { - Path + Path, + G, + Circle, + Text } from 'react-native-art-svg'; class PathExample extends Component{ @@ -28,7 +31,7 @@ class UnclosedPath extends Component{ width="100" > @@ -36,6 +39,64 @@ class UnclosedPath extends Component{ } } +class BezierCurve extends Component{ + static title = 'The following example creates a quadratic Bézier curve, where A and C are the start and end points, B is the control point'; + render() { + return + + + + + + + + + + + + A + B + C + + + ; + } +} + const icon = ; -const samples = [PathExample, UnclosedPath]; +const samples = [PathExample, UnclosedPath, BezierCurve]; export { icon, diff --git a/Example/examples/Polygon.js b/Example/examples/Polygon.js index 85a6938b..c71abd6d 100644 --- a/Example/examples/Polygon.js +++ b/Example/examples/Polygon.js @@ -42,7 +42,7 @@ class FourSidePolygon extends Component{ } } -class StrarPolygon extends Component{ +class StarPolygon extends Component{ static title = 'Use the element to create a star'; render() { return + + + + ; + } +} + const icon = ; -const samples = [PolygonExample, FourSidePolygon, StrarPolygon]; +const samples = [PolygonExample, FourSidePolygon, StarPolygon, EvenOddPolygon]; export { icon, diff --git a/Example/main.js b/Example/main.js index c698349f..636e4864 100644 --- a/Example/main.js +++ b/Example/main.js @@ -17,16 +17,14 @@ import React, { Easing } from 'react-native'; -import * as elements from 'react-native-art-svg'; -import * as examples from './examples'; -import _ from 'lodash'; -import Modal from 'react-native-root-modal'; - -let { +import { Svg, Circle, Line -} = elements; +} from 'react-native-art-svg'; +import * as examples from './examples'; +import _ from 'lodash'; +import Modal from 'react-native-root-modal'; const hairline = 1 / PixelRatio.get(); @@ -108,7 +106,8 @@ const styles = StyleSheet.create({ } }); -const names = _.filter(_.map(elements, (ele, key) => key), (name) => name !== 'default'); + +const names = ['Svg', 'Circle', 'Ellipse', 'G', 'Path', 'Polygon', 'Polyline', 'Line', 'Rect']; class ArtSvgExample extends Component { constructor() { diff --git a/elements/Circle.js b/elements/Circle.js index 37e56d88..fe402034 100644 --- a/elements/Circle.js +++ b/elements/Circle.js @@ -4,7 +4,7 @@ import React, { } from 'react-native'; import Ellipse from './Ellipse'; -let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired; +let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]); class Circle extends Component{ static displayName = 'Circle'; static propTypes = { diff --git a/elements/Ellipse.js b/elements/Ellipse.js index e7022355..141142ac 100644 --- a/elements/Ellipse.js +++ b/elements/Ellipse.js @@ -10,7 +10,7 @@ let { Shape } = ART; -let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired; +let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]); class Ellipse extends Component{ static displayName = 'Ellipse'; static propTypes = { diff --git a/elements/G.js b/elements/G.js new file mode 100644 index 00000000..55b56561 --- /dev/null +++ b/elements/G.js @@ -0,0 +1,45 @@ +import React, { + ART, + Component, + Children, + cloneElement +} from 'react-native'; + +let { + Group +} = ART; + +const transformProps = { + scale: null, + scaleX: null, + scaleY: null, + rotate: null, + transform: null, + x: null, + y: null, + originX: null, + originY: null +}; + +class G extends Component{ + static displayName = 'G'; + + constructor() { + super(...arguments); + this.children = Children.map(this.props.children, child => cloneElement(child, { + id: null, + ...this.props, + ...transformProps, + children: child.children, + ...child.props + })); + }; + + render() { + return {this.children}; + } +} + +export default G; diff --git a/elements/Line.js b/elements/Line.js index 00699338..24c7b55a 100644 --- a/elements/Line.js +++ b/elements/Line.js @@ -9,7 +9,7 @@ let { } = ART; import strokeFilter from '../lib/strokeFilter'; -let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired; +let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]); class Line extends Component{ static displayName = 'Line'; static propTypes = { diff --git a/elements/Polygon.js b/elements/Polygon.js index ed7b6b81..5984e75d 100644 --- a/elements/Polygon.js +++ b/elements/Polygon.js @@ -10,7 +10,7 @@ import Path from './Path'; class Polygon extends Component{ static displayName = 'Polygon'; static propTypes = { - points: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired + points: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) }; render() { let props = this.props; diff --git a/elements/Polyline.js b/elements/Polyline.js index e9af2317..a5249a0a 100644 --- a/elements/Polyline.js +++ b/elements/Polyline.js @@ -11,7 +11,7 @@ import fillFilter from '../lib/fillFilter'; class Polyline extends Component{ static displayName = 'Polyline'; static propTypes = { - points: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + points: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), strokeLinecap: PropTypes.oneOf(['butt', 'square', 'round']), strokeCap: PropTypes.oneOf(['butt', 'square', 'round']), strokeLinejoin: PropTypes.oneOf(['miter', 'bevel', 'round']), diff --git a/elements/Rect.js b/elements/Rect.js index 842d6622..30eb8a4e 100644 --- a/elements/Rect.js +++ b/elements/Rect.js @@ -8,7 +8,7 @@ import fillFilter from '../lib/fillFilter'; import strokeFilter from '../lib/strokeFilter'; import Path from './Path'; -let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired; +let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]); function processRadius(radius) { radius = +radius; diff --git a/elements/Text.js b/elements/Text.js new file mode 100644 index 00000000..37aa6860 --- /dev/null +++ b/elements/Text.js @@ -0,0 +1,37 @@ +import React, { + ART, + Component, + PropTypes +} from 'react-native'; + +let { + Text:ARTText, + Shape +} = ART; + +import fillFilter from '../lib/fillFilter'; +import strokeFilter from '../lib/strokeFilter'; +class Text extends Component{ + static displayName = 'Text'; + static propTypes = { + strokeLinecap: PropTypes.oneOf(['butt', 'square', 'round']), + strokeCap: PropTypes.oneOf(['butt', 'square', 'round']), + strokeLinejoin: PropTypes.oneOf(['miter', 'bevel', 'round']), + strokeJoin: PropTypes.oneOf(['miter', 'bevel', 'round']) + }; + render() { + let {props} = this; + return ; + + return ; + } +} + +export default Text;