From 2516a778badc80e31937a3519f0b9ace562e92de Mon Sep 17 00:00:00 2001 From: Horcrux Date: Mon, 18 Jul 2016 17:35:42 +0800 Subject: [PATCH] use createReactNativeComponentClass inside from react due to the peerDependency of react-native is >=0.29.0. so there is no need to consider compatibility with react-native@0.27.0 and below. --- elements/Circle.js | 10 +- elements/ClipPath.js | 8 +- elements/Ellipse.js | 9 +- elements/G.js | 9 +- elements/Image.js | 8 +- elements/Line.js | 8 +- elements/Path.js | 8 +- elements/Rect.js | 8 +- elements/Text.js | 8 +- lib/attributes.js | 150 +++++++++++++++++++++++++++ lib/createNativeComponent.android.js | 22 ---- lib/createNativeComponent.ios.js | 36 ------- package.json | 2 +- 13 files changed, 207 insertions(+), 79 deletions(-) create mode 100644 lib/attributes.js delete mode 100644 lib/createNativeComponent.android.js delete mode 100644 lib/createNativeComponent.ios.js diff --git a/elements/Circle.js b/elements/Circle.js index 115066f2..17991f96 100644 --- a/elements/Circle.js +++ b/elements/Circle.js @@ -1,7 +1,8 @@ import React, {PropTypes} from 'react'; -import createNativeComponent from '../lib/createNativeComponent'; +import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass'; import Shape from './Shape'; import mergeContext from '../lib/mergeContext'; +import {CircleAttributes} from '../lib/attributes'; import {circleProps, pathProps, fillProps, strokeProps, numberProp} from '../lib/props'; class Circle extends Shape { @@ -30,6 +31,11 @@ class Circle extends Shape { } } -const RNSVGCircle = createNativeComponent('RNSVGCircle'); + + +const RNSVGCircle = createReactNativeComponentClass({ + validAttributes: CircleAttributes, + uiViewClassName: 'RNSVGCircle' +}); export default Circle; diff --git a/elements/ClipPath.js b/elements/ClipPath.js index e819a0c8..02d8f20d 100644 --- a/elements/ClipPath.js +++ b/elements/ClipPath.js @@ -1,6 +1,7 @@ import React, {Component, PropTypes} from 'react'; import {set, remove} from '../lib/extract/extractClipping'; -import createNativeComponent from '../lib/createNativeComponent'; +import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass'; +import {ClipPathAttributes} from '../lib/attributes'; class ClipPath extends Component{ static displayName = 'ClipPath'; @@ -32,7 +33,10 @@ class ClipPath extends Component{ } } -const RNSVGClipPath = createNativeComponent('RNSVGClipPath'); +const RNSVGClipPath = createReactNativeComponentClass({ + validAttributes: ClipPathAttributes, + uiViewClassName: 'RNSVGClipPath' +}); export default ClipPath; diff --git a/elements/Ellipse.js b/elements/Ellipse.js index 08095b30..e8b0f352 100644 --- a/elements/Ellipse.js +++ b/elements/Ellipse.js @@ -1,9 +1,9 @@ import React, {PropTypes} from 'react'; -import createNativeComponent from '../lib/createNativeComponent'; +import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass'; import mergeContext from '../lib/mergeContext'; import Shape from './Shape'; import {ellipseProps, pathProps, fillProps, strokeProps, numberProp} from '../lib/props'; - +import {EllipseAttributes} from '../lib/attributes'; class Ellipse extends Shape{ static displayName = 'Ellipse'; @@ -32,6 +32,9 @@ class Ellipse extends Shape{ } } -const RNSVGEllipse = createNativeComponent('RNSVGEllipse'); +const RNSVGEllipse = createReactNativeComponentClass({ + validAttributes: EllipseAttributes, + uiViewClassName: 'RNSVGEllipse' +}); export default Ellipse; diff --git a/elements/G.js b/elements/G.js index aaedb49a..2c036ae1 100644 --- a/elements/G.js +++ b/elements/G.js @@ -1,9 +1,9 @@ import React, {Component, PropTypes} from 'react'; import Defs from './Defs'; import _ from 'lodash'; -import createNativeComponent from '../lib/createNativeComponent'; +import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass'; import {numberProp, contextProps} from '../lib/props'; - +import {GroupAttributes} from '../lib/attributes'; import extractProps from '../lib/extract/extractProps'; class G extends Component{ @@ -56,7 +56,10 @@ class G extends Component{ } } -const RNSVGGroup = createNativeComponent('RNSVGGroup'); +const RNSVGGroup = createReactNativeComponentClass({ + validAttributes: GroupAttributes, + uiViewClassName: 'RNSVGGroup' +}); export default G; export { diff --git a/elements/Image.js b/elements/Image.js index 80ddf14c..41fd1ac0 100644 --- a/elements/Image.js +++ b/elements/Image.js @@ -1,5 +1,6 @@ import React, {PropTypes} from 'react'; -import createNativeComponent from '../lib/createNativeComponent'; +import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass'; +import {ImageAttributes} from '../lib/attributes'; import {numberProp, touchableProps, responderProps} from '../lib/props'; import Shape from './Shape'; import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; @@ -32,6 +33,9 @@ class Image extends Shape { } } -const RNSVGImage = createNativeComponent('RNSVGImage'); +const RNSVGImage = createReactNativeComponentClass({ + validAttributes: ImageAttributes, + uiViewClassName: 'RNSVGImage' +}); export default Image; diff --git a/elements/Line.js b/elements/Line.js index 0426d460..29c0be2a 100644 --- a/elements/Line.js +++ b/elements/Line.js @@ -1,5 +1,6 @@ import React, {PropTypes} from 'react'; -import createNativeComponent from '../lib/createNativeComponent'; +import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass'; +import {LineAttributes} from '../lib/attributes'; import mergeContext from '../lib/mergeContext'; import Shape from './Shape'; import {lineProps, pathProps, fillProps, strokeProps, numberProp} from '../lib/props'; @@ -31,6 +32,9 @@ class Line extends Shape { } } -const RNSVGLine = createNativeComponent('RNSVGLine'); +const RNSVGLine = createReactNativeComponentClass({ + validAttributes: LineAttributes, + uiViewClassName: 'RNSVGLine' +}); export default Line; diff --git a/elements/Path.js b/elements/Path.js index 1b1afae2..1d395d66 100644 --- a/elements/Path.js +++ b/elements/Path.js @@ -1,7 +1,8 @@ import React, {PropTypes} from 'react'; import Defs from './Defs'; import SerializablePath from '../lib/SerializablePath'; -import createNativeComponent from '../lib/createNativeComponent'; +import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass'; +import {PathAttributes} from '../lib/attributes'; import mergeContext from '../lib/mergeContext'; import Shape from './Shape'; import {pathProps, numberProp} from '../lib/props'; @@ -52,6 +53,9 @@ class Path extends Shape { } } -const RNSVGPath = createNativeComponent('RNSVGPath'); +const RNSVGPath = createReactNativeComponentClass({ + validAttributes: PathAttributes, + uiViewClassName: 'RNSVGPath' +}); export default Path; diff --git a/elements/Rect.js b/elements/Rect.js index 5361cb5b..ad661d46 100644 --- a/elements/Rect.js +++ b/elements/Rect.js @@ -1,8 +1,9 @@ import React, {PropTypes} from 'react'; 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` -import createNativeComponent from '../lib/createNativeComponent'; +import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass'; import mergeContext from '../lib/mergeContext'; import {rectProps, pathProps, fillProps, strokeProps, numberProp} from '../lib/props'; +import {RectAttributes} from '../lib/attributes'; import Shape from './Shape'; class Rect extends Shape { @@ -39,6 +40,9 @@ class Rect extends Shape { } } -const RNSVGRect = createNativeComponent('RNSVGRect'); +const RNSVGRect = createReactNativeComponentClass({ + validAttributes: RectAttributes, + uiViewClassName: 'RNSVGRect' +}); export default Rect; diff --git a/elements/Text.js b/elements/Text.js index 2ab2a0c3..c2bfe5fa 100644 --- a/elements/Text.js +++ b/elements/Text.js @@ -1,10 +1,11 @@ import React, {PropTypes} from 'react'; -import createNativeComponent from '../lib/createNativeComponent'; +import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass'; import Defs from './Defs'; import extractProps from '../lib/extract/extractProps'; import extractText from '../lib/extract/extractText'; import mergeContext from '../lib/mergeContext'; import {numberProp, textProps, fillProps, strokeProps, pathProps} from '../lib/props'; +import {TextAttributes} from '../lib/attributes'; import Shape from './Shape'; class Text extends Shape { @@ -56,6 +57,9 @@ class Text extends Shape { } } -const RNSVGText = createNativeComponent('RNSVGText'); +const RNSVGText = createReactNativeComponentClass({ + validAttributes: TextAttributes, + uiViewClassName: 'RNSVGText' +}); export default Text; diff --git a/lib/attributes.js b/lib/attributes.js new file mode 100644 index 00000000..c7f1b0f0 --- /dev/null +++ b/lib/attributes.js @@ -0,0 +1,150 @@ +import _ from 'lodash'; + +const merge = _.assign; + +function arrayDiffer(a, b) { + if (a == null || b == null) { + return true; + } + if (a.length !== b.length) { + return true; + } + for (var i = 0; i < a.length; i++) { + if (a[i] !== b[i]) { + return true; + } + } + return false; +} + +function fontAndLinesDiffer(a, b) { + if (a === b) { + return false; + } + if (a.font !== b.font) { + if (a.font === null) { + return true; + } + if (b.font === null) { + return true; + } + + if ( + a.font.fontFamily !== b.font.fontFamily || + a.font.fontSize !== b.font.fontSize || + a.font.fontWeight !== b.font.fontWeight || + a.font.fontStyle !== b.font.fontStyle + ) { + return true; + } + } + return arrayDiffer(a.lines, b.lines); +} + +const NodeAttributes = { + trans: { + diff: arrayDiffer + }, + opacity: true, + clipPathId: true, + responsible: true +}; + +const RenderableAttributes = merge(NodeAttributes, { + fill: { + diff: arrayDiffer + }, + stroke: { + diff: arrayDiffer + }, + fillRule: true, + strokeWidth: true, + strokeLinecap: true, + strokeLinejoin: true, + clipPath: { + diff: arrayDiffer + }, + clipRule: true, + strokeDasharray: { + diff: arrayDiffer + }, + strokeDashoffset: true, + strokeMiterlimit: true +}); + +const GroupAttributes = merge(NodeAttributes, { + clipPath: { + diff: arrayDiffer + }, + clipRule: true +}); + +const PathAttributes = merge(RenderableAttributes, { + d: { + diff: arrayDiffer + } +}); + +const TextAttributes = merge(RenderableAttributes, { + alignment: true, + frame: { + diff: fontAndLinesDiffer + }, + path: { + diff: arrayDiffer + } +}); + +const ClipPathAttributes = merge(RenderableAttributes, { + name: true +}); + +const CircleAttributes = merge(RenderableAttributes, { + cx: true, + cy: true, + r: true +}); + +const EllipseAttributes = merge(RenderableAttributes, { + cx: true, + cy: true, + rx: true, + ry: true +}); + +const ImageAttributes = merge(RenderableAttributes, { + x: true, + y: true, + width: true, + height: true, + src: true +}); + +const LineAttributes = merge(RenderableAttributes, { + x1: true, + y1: true, + x2: true, + y2: true +}); + +const RectAttributes = merge(RenderableAttributes, { + x: true, + y: true, + width: true, + height: true, + rx: true, + ry: true +}); + + +export { + PathAttributes, + TextAttributes, + GroupAttributes, + ClipPathAttributes, + CircleAttributes, + EllipseAttributes, + ImageAttributes, + LineAttributes, + RectAttributes +}; diff --git a/lib/createNativeComponent.android.js b/lib/createNativeComponent.android.js deleted file mode 100644 index cbc89328..00000000 --- a/lib/createNativeComponent.android.js +++ /dev/null @@ -1,22 +0,0 @@ -/** - * This is a hack to to create a native component of RNSVG. - * Because importing `createReactNativeComponentClass` is a pain in the ass after `0.25.1` is released - * and changed lots of dependencies of many modules. - * So this is just a work around to create a native component of RNSVG. - * If there is a better way to do this, - * PLEASE override this module. - */ -import {requireNativeComponent, UIManager} from 'react-native'; - -export default function (componentName) { - //let originNativeProps = UIManager[componentName].NativeProps; - let originViewProps = UIManager.RCTView.NativeProps; - - // clear RCTView`s NativeProps - UIManager.RCTView.NativeProps = null; - const RNSVGNativeComponent = requireNativeComponent(componentName, null); - - // reset RCTView`s NativeProps - UIManager.RCTView.NativeProps = originViewProps; - return RNSVGNativeComponent; -} diff --git a/lib/createNativeComponent.ios.js b/lib/createNativeComponent.ios.js deleted file mode 100644 index 81ec3fa1..00000000 --- a/lib/createNativeComponent.ios.js +++ /dev/null @@ -1,36 +0,0 @@ -/** - * This is a hack to to create a native component of RNSVG. - * Because importing `createReactNativeComponentClass` is a pain in the ass after `0.25.1` is released - * and changed lots of dependencies of many modules. - * So this is just a work around to create a native component of RNSVG. - * If there is a better way to do this, - * PLEASE override this module. - */ -import {requireNativeComponent, UIManager} from 'react-native'; - -// inherited native props -const RenderableNativeProps = { - ...UIManager.RNSVGRenderable.NativeProps, - ...UIManager.RNSVGNode.NativeProps -}; - -export default function (componentName) { - let originNativeProps = UIManager[componentName].NativeProps; - let originViewProps = UIManager.RCTView.NativeProps; - - // override native component`s NativeProps - UIManager[componentName].NativeProps = { - ...RenderableNativeProps, - ...originNativeProps - }; - - // clear RCTView`s NativeProps - UIManager.RCTView.NativeProps = null; - const RNSVGNativeComponent = requireNativeComponent(componentName, null); - - // reset all - UIManager.RCTView.NativeProps = originViewProps; - UIManager[componentName].NativeProps = originNativeProps; - - return RNSVGNativeComponent; -} diff --git a/package.json b/package.json index 241d94e9..fa21c33c 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "3.0.0", + "version": "3.1.0", "name": "react-native-svg", "description": "react native svg library", "repository": {