diff --git a/.eslintignore b/.eslintignore index 8b13789..415cc25 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1 +1,4 @@ - +**/node_modules/ +android/ +ios/ +screenShoots/ diff --git a/.eslintrc b/.eslintrc index 905cabe..9cc29e4 100644 --- a/.eslintrc +++ b/.eslintrc @@ -208,7 +208,7 @@ "react/jsx-boolean-value": 0, "react/jsx-no-undef": 1, "react/jsx-sort-props": 0, - "react/jsx-uses-react": 0, + "react/jsx-uses-react": 1, "react/jsx-uses-vars": 1, "react/no-did-mount-set-state": [1, "allow-in-func"], "react/no-did-update-set-state": [1, "allow-in-func"], diff --git a/.gitignore b/.gitignore index 434e949..441681b 100644 --- a/.gitignore +++ b/.gitignore @@ -4,7 +4,7 @@ # Xcode # -build/ +build *.pbxuser !default.pbxuser *.mode1v3 @@ -23,13 +23,13 @@ project.xcworkspace # Android/IJ # -.idea/ +.idea .gradle local.properties # node.js # -node_modules/ +node_modules npm-debug.log diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..248ab25 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,10 @@ +sudo: false + +language: node_js +node_js: + - '5' + - '4' + - '0.12' + +script: + - npm run lint diff --git a/Example/examples/Circle.js b/Example/examples/Circle.js index 0de6680..8ecd00c 100644 --- a/Example/examples/Circle.js +++ b/Example/examples/Circle.js @@ -81,4 +81,4 @@ const samples = [CircleExample, StrokeCircle, StrokeOpacityCircle]; export { icon, samples -} +}; diff --git a/Example/examples/Clipping.js b/Example/examples/Clipping.js index 47eebae..123ce58 100644 --- a/Example/examples/Clipping.js +++ b/Example/examples/Clipping.js @@ -218,4 +218,4 @@ const samples = [ClipPathAttr, ClipRule, ClipPathElement, TextClipping]; export { icon, samples -} +}; diff --git a/Example/examples/Ellipse.js b/Example/examples/Ellipse.js index 9391d57..b22ded9 100644 --- a/Example/examples/Ellipse.js +++ b/Example/examples/Ellipse.js @@ -73,4 +73,4 @@ const samples = [EllipseExample, PileEllipses, CombinedEllipses]; export { icon, samples -} +}; diff --git a/Example/examples/G.js b/Example/examples/G.js index 193a1e5..a5b5a12 100644 --- a/Example/examples/G.js +++ b/Example/examples/G.js @@ -130,4 +130,4 @@ const samples = [GExample, GTransform]; export { icon, samples -} +}; diff --git a/Example/examples/Line.js b/Example/examples/Line.js index 20e9a94..5b8cd5e 100644 --- a/Example/examples/Line.js +++ b/Example/examples/Line.js @@ -84,4 +84,4 @@ const samples = [LineExample, LineWithStrokeLinecap]; export { icon, samples -} +}; diff --git a/Example/examples/Path.js b/Example/examples/Path.js index 4aaa7fb..45c731b 100644 --- a/Example/examples/Path.js +++ b/Example/examples/Path.js @@ -114,4 +114,4 @@ const samples = [PathExample, UnclosedPath, BezierCurve]; export { icon, samples -} +}; diff --git a/Example/examples/Polygon.js b/Example/examples/Polygon.js index dbcb53a..d4e59d4 100644 --- a/Example/examples/Polygon.js +++ b/Example/examples/Polygon.js @@ -100,4 +100,4 @@ const samples = [PolygonExample, FourSidePolygon, StarPolygon, EvenOddPolygon]; export { icon, samples -} +}; diff --git a/Example/examples/Polyline.js b/Example/examples/Polyline.js index 002f0fe..c7349fb 100644 --- a/Example/examples/Polyline.js +++ b/Example/examples/Polyline.js @@ -93,4 +93,4 @@ const samples = [PolylineExample, StraightLines, PolylineFill, PolylineFillStrok export { icon, samples -} +}; diff --git a/Example/examples/Rect.js b/Example/examples/Rect.js index 5963868..1c19f42 100644 --- a/Example/examples/Rect.js +++ b/Example/examples/Rect.js @@ -134,6 +134,6 @@ const samples = [RectExample, RectStrokeFill, RoundedRect, EllipseRect, RoundOve export { icon, samples -} +}; diff --git a/Example/examples/Stroking.js b/Example/examples/Stroking.js index 15aef52..fd85848 100644 --- a/Example/examples/Stroking.js +++ b/Example/examples/Stroking.js @@ -146,4 +146,4 @@ const samples = [StrokeExample, StrokeLinecap, StrokeDasharray, StrokeDashoffset export { icon, samples -} +}; diff --git a/Example/examples/Svg.js b/Example/examples/Svg.js index c39e953..2a64cea 100644 --- a/Example/examples/Svg.js +++ b/Example/examples/Svg.js @@ -161,4 +161,4 @@ const samples = [SvgExample, SvgOpacity, SvgViewbox, SvgLayout]; export { icon, samples -} +}; diff --git a/Example/examples/Symbol.js b/Example/examples/Symbol.js index d4bbed9..6ac83b2 100644 --- a/Example/examples/Symbol.js +++ b/Example/examples/Symbol.js @@ -73,4 +73,4 @@ const samples = [SymbolExample]; export { icon, samples -} +}; diff --git a/Example/examples/Text.js b/Example/examples/Text.js index cb17ee1..ce9b6ae 100644 --- a/Example/examples/Text.js +++ b/Example/examples/Text.js @@ -6,9 +6,7 @@ import Svg, { Text, LinearGradient, Stop, - Defs, - ClipPath, - Rect + Defs } from 'react-native-svg'; class TextExample extends Component{ @@ -165,4 +163,4 @@ const samples = [ export { icon, samples -} +}; diff --git a/Example/examples/Use.js b/Example/examples/Use.js index 6bb5399..cb23cdc 100644 --- a/Example/examples/Use.js +++ b/Example/examples/Use.js @@ -30,7 +30,7 @@ class UseExample extends Component{ ; - }; + } } class UseShapes extends Component{ @@ -47,7 +47,7 @@ class UseShapes extends Component{ ; - }; + } } const icon = -#import - -#import "RCTLog.h" -#import "RCTRootView.h" - -#define TIMEOUT_SECONDS 240 -#define TEXT_TO_LOOK_FOR @"Welcome to React Native!" - -@interface ArtSvgExampleTests : XCTestCase - -@end - -@implementation ArtSvgExampleTests - -- (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test -{ - if (test(view)) { - return YES; - } - for (UIView *subview in [view subviews]) { - if ([self findSubviewInView:subview matching:test]) { - return YES; - } - } - return NO; -} - -- (void)testRendersWelcomeScreen -{ - UIViewController *vc = [[[[UIApplication sharedApplication] delegate] window] rootViewController]; - NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; - BOOL foundElement = NO; - - __block NSString *redboxError = nil; - RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { - if (level >= RCTLogLevelError) { - redboxError = message; - } - }); - - while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { - [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; - [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; - - foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { - if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { - return YES; - } - return NO; - }]; - } - - RCTSetLogFunction(RCTDefaultLogFunction); - - XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); - XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); -} - - -@end diff --git a/Example/ios/ArtSvgExampleTests/Info.plist b/Example/ios/ArtSvgExampleTests/Info.plist deleted file mode 100644 index 886825c..0000000 --- a/Example/ios/ArtSvgExampleTests/Info.plist +++ /dev/null @@ -1,24 +0,0 @@ - - - - - CFBundleDevelopmentRegion - en - CFBundleExecutable - $(EXECUTABLE_NAME) - CFBundleIdentifier - org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) - CFBundleInfoDictionaryVersion - 6.0 - CFBundleName - $(PRODUCT_NAME) - CFBundlePackageType - BNDL - CFBundleShortVersionString - 1.0 - CFBundleSignature - ???? - CFBundleVersion - 1 - - diff --git a/Example/main.js b/Example/main.js index 5ad75de..2d5d102 100644 --- a/Example/main.js +++ b/Example/main.js @@ -10,7 +10,6 @@ import React, { Text, View, ScrollView, - PixelRatio, TouchableHighlight, TouchableOpacity, Animated, @@ -181,7 +180,7 @@ class ArtSvgExample extends Component { {icon} {name} - + ; }); }; diff --git a/elements/Circle.js b/elements/Circle.js index 7d8483a..2451bc9 100644 --- a/elements/Circle.js +++ b/elements/Circle.js @@ -1,4 +1,4 @@ -import React, { +import { PropTypes } from 'react-native'; import Shape, {CIRCLE} from './Shape'; diff --git a/elements/Ellipse.js b/elements/Ellipse.js index 3c4c431..bfbcb53 100644 --- a/elements/Ellipse.js +++ b/elements/Ellipse.js @@ -1,4 +1,4 @@ -import React, { +import { PropTypes } from 'react-native'; import Shape, {ELLIPSE} from './Shape'; diff --git a/elements/Gradient.js b/elements/Gradient.js index b467d4d..c357663 100644 --- a/elements/Gradient.js +++ b/elements/Gradient.js @@ -7,7 +7,7 @@ import {set, remove} from '../lib/extract/patterns'; import percentToFloat from '../lib/percentToFloat'; import Stop from './Stop'; import Color from 'color'; -class RadialGradient extends Component{ +class Gradient extends Component{ static displayName = 'Gradient'; constructor() { @@ -37,12 +37,12 @@ class RadialGradient extends Component{ stops[offset] = Color(child.props.stopColor).alpha(+child.props.stopOpacity); set(this.id, generator.bind(null, stops)); } else { - console.warn(`'RadialGradient' can only receive 'Stop' elements as children`); + console.warn(`'Gradient' can only receive 'Stop' elements as children`); } }); return ; } } -export default RadialGradient; +export default Gradient; diff --git a/elements/Image.js b/elements/Image.js index 5567187..de76f1e 100644 --- a/elements/Image.js +++ b/elements/Image.js @@ -1,4 +1,4 @@ -import React, { +import { Component, PropTypes } from 'react-native'; diff --git a/elements/Line.js b/elements/Line.js index fd12ff1..ea1e9e2 100644 --- a/elements/Line.js +++ b/elements/Line.js @@ -1,4 +1,4 @@ -import React, { +import { PropTypes } from 'react-native'; import Shape, {LINE} from './Shape'; diff --git a/elements/LinearGradient.js b/elements/LinearGradient.js index 6c7c23c..5f284c7 100644 --- a/elements/LinearGradient.js +++ b/elements/LinearGradient.js @@ -1,4 +1,4 @@ -import React, { +import { PropTypes } from 'react-native'; diff --git a/elements/Pattern.js b/elements/Pattern.js index 0540a86..d3464fb 100644 --- a/elements/Pattern.js +++ b/elements/Pattern.js @@ -1,4 +1,4 @@ -import React, { +import { Component, PropTypes } from 'react-native'; diff --git a/elements/RadialGradient.js b/elements/RadialGradient.js index f82a0c7..142fdab 100644 --- a/elements/RadialGradient.js +++ b/elements/RadialGradient.js @@ -1,4 +1,4 @@ -import React, { +import { PropTypes } from 'react-native'; import stopsOpacity from '../lib/stopsOpacity'; diff --git a/elements/Rect.js b/elements/Rect.js index ca1d6fb..8e0b044 100644 --- a/elements/Rect.js +++ b/elements/Rect.js @@ -1,4 +1,4 @@ -import React, { +import { PropTypes } from 'react-native'; import Shape, {RECT} from './Shape'; diff --git a/elements/Shape.js b/elements/Shape.js index 1291909..9a1b7eb 100644 --- a/elements/Shape.js +++ b/elements/Shape.js @@ -1,6 +1,7 @@ import React, { Component } from 'react-native'; +import './Path'; // must import Path first, don`t know why. without this will throw an `Super expression must either be null or a function, not undefined`, maybe cyclic dependencies issue import _ from 'lodash'; import extractProps from '../lib/extract/extractProps'; import {ShapeAttributes} from '../lib/attributes'; diff --git a/elements/Stop.js b/elements/Stop.js index c512e9d..41e3591 100644 --- a/elements/Stop.js +++ b/elements/Stop.js @@ -1,4 +1,4 @@ -import React, { +import { Component, PropTypes } from 'react-native'; diff --git a/index.js b/index.js index 682798b..b157538 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,3 @@ -import React, { - Component -} from 'react-native'; import Rect from './elements/Rect'; import Circle from './elements/Circle'; import Ellipse from './elements/Ellipse'; diff --git a/lib/SerializablePath.js b/lib/SerializablePath.js index c35093b..e688a34 100644 --- a/lib/SerializablePath.js +++ b/lib/SerializablePath.js @@ -1,3 +1,4 @@ +import _ from 'lodash'; const MOVE_TO = 0; const CLOSE = 1; const LINE_TO = 2; @@ -93,7 +94,7 @@ export default class SerializablePath { }; lineTo = (x,y) => { - if (this.penDownX == null) { + if (_.isNil(this.penDownX)) { this.penDownX = this.penX; this.penDownY = this.penY; } this.onLine(this.penX, this.penY, this._pivotX = this.penX = (+x), this._pivotY = this.penY = (+y)); @@ -106,10 +107,10 @@ export default class SerializablePath { return this.curveTo( x + (+c1x), y + (+c1y), - c2x == null ? null : x + (+c2x), - c2y == null ? null : y + (+c2y), - ex == null ? null : x + (+ex), - ey == null ? null : y + (+ey) + _.isNil(c2x) ? null : x + (+c2x), + _.isNil(c2y) ? null : y + (+c2y), + _.isNil(ex) ? null : x + (+ex), + _.isNil(ey) ? null : y + (+ey) ); }; @@ -117,12 +118,12 @@ export default class SerializablePath { let x = this.penX, y = this.penY; - if (c2x == null){ + if (_.isNil(c2x)){ c2x = +c1x; c2y = +c1y; c1x = (x * 2) - (this._pivotX || 0); c1y = (y * 2) - (this._pivotY || 0); } - if (ex == null){ + if (_.isNil(ex)){ this._pivotX = +c1x; this._pivotY = +c1y; ex = +c2x; ey = +c2y; c2x = (ex + (+c1x) * 2) / 3; c2y = (ey + (+c1y) * 2) / 3; @@ -130,7 +131,7 @@ export default class SerializablePath { } else { this._pivotX = +c2x; this._pivotY = +c2y; } - if (this.penDownX == null) { + if (_.isNil(this.penDownX)) { this.penDownX = x; this.penDownY = y; } this.onBezierCurve(x, y, +c1x, +c1y, +c2x, +c2y, this.penX = +ex, this.penY = +ey); @@ -145,7 +146,7 @@ export default class SerializablePath { ry = Math.abs(+ry || +rx || (+y - this.penY)); rx = Math.abs(+rx || (+x - this.penX)); - if (!rx || !ry || (x == this.penX && y == this.penY)) { + if (!rx || !ry || (x === this.penX && y === this.penY)) { return this.lineTo(x, y); } @@ -168,7 +169,10 @@ export default class SerializablePath { cx = x / 2; cy = y / 2; } else { a = Math.sqrt(a / (rxcy + rycx)); - if (large == clockwise) a = -a; + + if (large === clockwise) { + a = -a; + } let cxd = -a * cy * rx / ry, cyd = a * cx * ry / rx; cx = cos * cxd - sin * cyd + x / 2; @@ -187,7 +191,9 @@ export default class SerializablePath { x += tX; y += tY; // Circular Arc - if (this.penDownX == null){ this.penDownX = this.penX; this.penDownY = this.penY; } + if (_.isNil(this.penDownX)) { + this.penDownX = this.penX; this.penDownY = this.penY; + } this.onArc( tX, tY, this._pivotX = this.penX = x, this._pivotY = this.penY = y, cx, cy, rx, ry, sa, ea, !clockwise, rotation @@ -204,7 +210,7 @@ export default class SerializablePath { }; close = () => { - if (this.penDownX != null){ + if (!_.isNil(this.penDownX)){ this.onClose(this.penX, this.penY, this.penX = this.penDownX, this.penY = this.penDownY); this.penDownX = null; } diff --git a/lib/SerializableShape.js b/lib/SerializableShape.js index 0627df2..fca9af4 100644 --- a/lib/SerializableShape.js +++ b/lib/SerializableShape.js @@ -19,6 +19,7 @@ * * */ +import _ from 'lodash'; import percentToFloat from './percentToFloat'; function percentageTransform(value) { @@ -34,14 +35,14 @@ function percentageTransform(value) { return { percentage: float !== +value, value: float - } + }; } export default class { constructor(props, list) { this.shape = {}; list.forEach(name => { - if (props[name] != null) { + if (!_.isNil(props[name])) { this.shape[name] = percentageTransform(props[name]); } }); @@ -50,5 +51,5 @@ export default class { toJSON = () => { return this.shape; }; -}; +} diff --git a/lib/Transform.js b/lib/Transform.js index 72a2bb6..e2af2bb 100644 --- a/lib/Transform.js +++ b/lib/Transform.js @@ -1,15 +1,16 @@ +import _ from 'lodash'; export default class { constructor(xx, yx, xy, yy, x, y){ if (xx && typeof xx === 'object'){ yx = xx.yx; yy = xx.yy; y = xx.y; xy = xx.xy; x = xx.x; xx = xx.xx; } - this.xx = xx == null ? 1 : xx; + this.xx = _.isNil(xx) ? 1 : xx; this.yx = yx || 0; this.xy = xy || 0; - this.yy = yy == null ? 1 : yy; - this.x = (x == null ? this.x : x) || 0; - this.y = (y == null ? this.y : y) || 0; + this.yy = _.isNil(yy) ? 1 : yy; + this.x = (_.isNil(x) ? this.x : x) || 0; + this.y = (_.isNil(y) ? this.y : y) || 0; return this; } @@ -56,11 +57,11 @@ export default class { }; scale = (x, y) => { - return this.transform(x, 0, 0, y == null ? x : y, 0, 0); + return this.transform(x, 0, 0, _.isNil(y) ? x : y, 0, 0); }; rotate = (deg, x, y) => { - if (x == null || y == null){ + if (_.isNil(x) || _.isNil(y)){ x = (this.left || 0) + (this.width || 0) / 2; y = (this.top || 0) + (this.height || 0) / 2; } @@ -117,7 +118,7 @@ export default class { c = this.xy, d = this.yy, e = this.x, f = this.y; var det = b * c - a * d; - if (det == 0) { + if (det === 0) { return null; } return { diff --git a/lib/attributes.js b/lib/attributes.js index 166d8ac..e982e5e 100644 --- a/lib/attributes.js +++ b/lib/attributes.js @@ -1,6 +1,7 @@ +import _ from 'lodash'; function arrayDiffer(a, b) { - if (a == null) { + if (_.isNil(a)) { return true; } if (a.length !== b.length) { diff --git a/lib/extract/extractText.js b/lib/extract/extractText.js index b6ddf5e..4fe0b56 100644 --- a/lib/extract/extractText.js +++ b/lib/extract/extractText.js @@ -1,5 +1,5 @@ import SerializablePath from 'react-native/Libraries/ART/ARTSerializablePath'; - +import _ from 'lodash'; const newLine = /\n/g; const defaultFontFamily = '"Helvetica Neue", "Helvetica", Arial'; const fontRegExp = /^\s*((?:(?:normal|bold|italic)\s+)*)(?:(\d+(?:\.\d+)?)[ptexm%]*(?:\s*\/.*?)?\s+)?\s*"?([^"]*)/i; @@ -58,7 +58,7 @@ function parseFontString(font) { } function extractFont(font) { - if (font == null) { + if (_.isNil(font)) { return null; } if (typeof font === 'string') { diff --git a/lib/extract/extractTransform.js b/lib/extract/extractTransform.js index 18431ad..9bedf4b 100644 --- a/lib/extract/extractTransform.js +++ b/lib/extract/extractTransform.js @@ -1,11 +1,12 @@ import Transform from '../Transform'; -let pooledTransform = new Transform; +import _ from 'lodash'; +let pooledTransform = new Transform(); function transformToMatrix(props) { - let scaleX = props.scaleX != null ? props.scaleX : - props.scale != null ? props.scale : 1; - let scaleY = props.scaleY != null ? props.scaleY : - props.scale != null ? props.scale : 1; + let scaleX = !_.isNil(props.scaleX) ? props.scaleX : + !_.isNil(props.scale) ? props.scale : 1; + let scaleY = !_.isNil(props.scaleY) ? props.scaleY : + !_.isNil(props.scale) ? props.scale : 1; pooledTransform .transformTo(1, 0, 0, 1, 0, 0) @@ -13,7 +14,7 @@ function transformToMatrix(props) { .rotate(props.rotation || 0, props.originX, props.originY) .scale(scaleX, scaleY, props.originX, props.originY); - if (props.transform != null) { + if (!_.isNil(props.transform)) { pooledTransform.transform(props.transform); } diff --git a/package.json b/package.json index 62fd71b..6a86656 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,9 @@ "ART", "VML" ], + "scripts": { + "lint": "eslint ./" + }, "dependencies": { "color": "^0.11.1", "lodash": "^4.0.0"