zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2025-12-21 06:15:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor Components props extracting

Browse Source
This commit is contained in:
Horcrux
2017-02-03 19:43:25 +08:00
parent 9b62d500ce
commit 5bd9b40c17
35 changed files with 208 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@@ -605,8 +605,9 @@ npm i
1. Add Native method for elements.
2. Pattern element.
3. Mask element.
4. Load Image from URL.
5. Transform prop support.
4. Marker element.
5. Load Image from URL.
6. Transform prop support.
### Known issues:
1. Unable to apply focus point of RadialGradient on Android.

7
elements/Circle.js
View File

@@ -3,8 +3,9 @@ import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src
import Shape from './Shape';
import {CircleAttributes} from '../lib/attributes';
import {pathProps, numberProp} from '../lib/props';
import extractProps from '../lib/extract/extractProps';
class Circle extends Shape {
export default class extends Shape {
static displayName = 'Circle';
static propTypes = {
@@ -28,7 +29,7 @@ class Circle extends Shape {
let props = this.props;
return <RNSVGCircle
ref={ele => {this.root = ele;}}
{...this.extractProps(props)}
{...extractProps(props, this)}
cx={props.cx.toString()}
cy={props.cy.toString()}
r={props.r.toString()}
@@ -42,5 +43,3 @@ const RNSVGCircle = createReactNativeComponentClass({
validAttributes: CircleAttributes,
uiViewClassName: 'RNSVGCircle'
});
export default Circle;

9
elements/ClipPath.js
View File

@@ -2,16 +2,14 @@ import React, {Component, PropTypes} from 'react';
import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
import {ClipPathAttributes} from '../lib/attributes';
class ClipPath extends Component{
export default class extends Component{
static displayName = 'ClipPath';
static propTypes = {
id: PropTypes.string.isRequired
};
render() {
return <RNSVGClipPath
name={this.props.id}
>{this.props.children}</RNSVGClipPath>;
return <RNSVGClipPath name={this.props.id}>{this.props.children}</RNSVGClipPath>;
}
}
@@ -19,6 +17,3 @@ const RNSVGClipPath = createReactNativeComponentClass({
validAttributes: ClipPathAttributes,
uiViewClassName: 'RNSVGClipPath'
});
export default ClipPath;

8
elements/Defs.js
View File

@@ -1,9 +1,7 @@
import React, {
Component,
} from 'react';
import React, { Component } from 'react';
import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
class Defs extends Component {
export default class extends Component {
static displayName = 'Defs';
render() {
@@ -15,5 +13,3 @@ const RNSVGDefs = createReactNativeComponentClass({
validAttributes: {},
uiViewClassName: 'RNSVGDefs'
});
export default Defs;

7
elements/Ellipse.js
View File

@@ -3,8 +3,9 @@ import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src
import Shape from './Shape';
import {pathProps, numberProp} from '../lib/props';
import {EllipseAttributes} from '../lib/attributes';
import extractProps from '../lib/extract/extractProps';
class Ellipse extends Shape{
export default class extends Shape{
static displayName = 'Ellipse';
static propTypes = {
@@ -31,7 +32,7 @@ class Ellipse extends Shape{
return <RNSVGEllipse
ref={ele => {this.root = ele;}}
{...this.extractProps(props)}
{...extractProps(props, this)}
cx={props.cx.toString()}
cy={props.cy.toString()}
rx={props.rx.toString()}
@@ -44,5 +45,3 @@ const RNSVGEllipse = createReactNativeComponentClass({
validAttributes: EllipseAttributes,
uiViewClassName: 'RNSVGEllipse'
});
export default Ellipse;

14
elements/G.js
View File

@@ -1,13 +1,14 @@
import React from 'react';
import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
import Shape from './Shape';
import {transformProps} from '../lib/props';
import {pathProps} from '../lib/props';
import {GroupAttributes} from '../lib/attributes';
import extractProps from '../lib/extract/extractProps';
class G extends Shape{
export default class extends Shape{
static displayName = 'G';
static propTypes = transformProps;
static propTypes = pathProps;
setNativeProps = (...args) => {
this.root.setNativeProps(...args);
@@ -17,7 +18,7 @@ class G extends Shape{
let {props} = this;
return <RNSVGGroup
{...this.extractProps(props)}
{...extractProps(props, this)}
ref={ele => {this.root = ele;}}
>
{props.children}
@@ -29,8 +30,3 @@ const RNSVGGroup = createReactNativeComponentClass({
validAttributes: GroupAttributes,
uiViewClassName: 'RNSVGGroup'
});
export default G;
export {
RNSVGGroup as NativeGroup
};

8
elements/Image.js
View File

@@ -5,9 +5,11 @@ import {numberProp, touchableProps, responderProps} from '../lib/props';
import Shape from './Shape';
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
import {meetOrSliceTypes, alignEnum} from '../lib/extract/extractViewBox';
import extractProps from '../lib/extract/extractProps';
const spacesRegExp = /\s+/;
class Image extends Shape {
export default class extends Shape {
static displayName = 'Image';
static propTypes = {
...responderProps,
@@ -40,7 +42,7 @@ class Image extends Shape {
return <RNSVGImage
ref={ele => {this.root = ele;}}
{...this.extractProps({...props, x: null, y: null}, {responder: true, transform: true})}
{...extractProps({...props, x: null, y: null}, this)}
x={props.x.toString()}
y={props.y.toString()}
width={props.width.toString()}
@@ -56,5 +58,3 @@ const RNSVGImage = createReactNativeComponentClass({
validAttributes: ImageAttributes,
uiViewClassName: 'RNSVGImage'
});
export default Image;

7
elements/Line.js
View File

@@ -3,8 +3,9 @@ import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src
import {LineAttributes} from '../lib/attributes';
import Shape from './Shape';
import {pathProps, numberProp} from '../lib/props';
import extractProps from '../lib/extract/extractProps';
class Line extends Shape {
export default class extends Shape {
static displayName = 'Line';
static propTypes = {
@@ -30,7 +31,7 @@ class Line extends Shape {
let props = this.props;
return <RNSVGLine
ref={ele => {this.root = ele;}}
{...this.extractProps(props)}
{...extractProps(props, this)}
x1={props.x1.toString()}
y1={props.y1.toString()}
x2={props.x2.toString()}
@@ -43,5 +44,3 @@ const RNSVGLine = createReactNativeComponentClass({
validAttributes: LineAttributes,
uiViewClassName: 'RNSVGLine'
});
export default Line;

5
elements/LinearGradient.js
View File

@@ -4,7 +4,7 @@ import extractGradient from '../lib/extract/extractGradient';
import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
import {LinearGradientAttributes} from '../lib/attributes';
class LinearGradient extends Component{
export default class extends Component{
static displayName = 'LinearGradient';
static propTypes = {
x1: numberProp.isRequired,
@@ -38,6 +38,3 @@ const RNSVGLinearGradient = createReactNativeComponentClass({
validAttributes: LinearGradientAttributes,
uiViewClassName: 'RNSVGLinearGradient'
});
export default LinearGradient;

7
elements/Path.js
View File

@@ -3,8 +3,9 @@ import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src
import {PathAttributes} from '../lib/attributes';
import Shape from './Shape';
import {pathProps} from '../lib/props';
import extractProps from '../lib/extract/extractProps';
class Path extends Shape {
export default class extends Shape {
static displayName = 'Path';
static propTypes = {
@@ -22,7 +23,7 @@ class Path extends Shape {
return (
<RNSVGPath
ref={ele => {this.root = ele;}}
{...this.extractProps(props)}
{...extractProps(props, this)}
d={props.d}
/>
);
@@ -33,5 +34,3 @@ const RNSVGPath = createReactNativeComponentClass({
validAttributes: PathAttributes,
uiViewClassName: 'RNSVGPath'
});
export default Path;

15
elements/Pattern.js
View File

@@ -1,14 +1,13 @@
import {Component, PropTypes} from 'react';
import {numberProp} from '../lib/props';
let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
class Pattern extends Component{
export default class extends Component{
static displayName = 'Pattern';
static propTypes = {
x1: propType,
x2: propType,
y1: propType,
y2: propType,
x1: numberProp,
x2: numberProp,
y1: numberProp,
y2: numberProp,
patternTransform: PropTypes.string,
patternUnits: PropTypes.oneOf(['userSpaceOnUse', 'objectBoundingBox']),
patternContentUnits: PropTypes.oneOf(['userSpaceOnUse', 'objectBoundingBox'])
@@ -19,5 +18,3 @@ class Pattern extends Component{
return null;
}
}
export default Pattern;

6
elements/Polygon.js
View File

@@ -1,9 +1,8 @@
import React, {Component, PropTypes} from 'react';
import Path from './Path';
import {pathProps} from '../lib/props';
import _ from 'lodash';
class Polygon extends Component{
export default class extends Component{
static displayName = 'Polygon';
static propTypes = {
...pathProps,
@@ -20,7 +19,7 @@ class Polygon extends Component{
render() {
let points = this.props.points;
if (_.isArray(points)) {
if (Array.isArray(points)) {
points = points.join(',');
}
@@ -31,4 +30,3 @@ class Polygon extends Component{
/>;
}
}
export default Polygon;

6
elements/Polyline.js
View File

@@ -1,9 +1,8 @@
import React, {Component, PropTypes} from 'react';
import Path from './Path';
import {pathProps} from '../lib/props';
import _ from 'lodash';
class Polyline extends Component{
export default class extends Component{
static displayName = 'Polyline';
static propTypes = {
...pathProps,
@@ -20,7 +19,7 @@ class Polyline extends Component{
render() {
let points = this.props.points;
if (_.isArray(points)) {
if (Array.isArray(points)) {
points = points.join(',');
}
@@ -31,4 +30,3 @@ class Polyline extends Component{
/>;
}
}
export default Polyline;

4
elements/RadialGradient.js
View File

@@ -4,7 +4,7 @@ import extractGradient from '../lib/extract/extractGradient';
import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
import {RadialGradientAttributes} from '../lib/attributes';
class RadialGradient extends Component{
export default class extends Component{
static displayName = 'RadialGradient';
static propTypes = {
fx: numberProp.isRequired,
@@ -44,5 +44,3 @@ const RNSVGRadialGradient = createReactNativeComponentClass({
validAttributes: RadialGradientAttributes,
uiViewClassName: 'RNSVGRadialGradient'
});
export default RadialGradient;

9
elements/Rect.js
View File

@@ -3,9 +3,10 @@ import './Path'; // must import Path first, don`t know why. without this will th
import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
import {pathProps, numberProp} from '../lib/props';
import {RectAttributes} from '../lib/attributes';
import extractProps from '../lib/extract/extractProps';
import Shape from './Shape';
class Rect extends Shape {
export default class extends Shape {
static displayName = 'Rect';
static propTypes = {
@@ -36,11 +37,11 @@ class Rect extends Shape {
return <RNSVGRect
ref={ele => {this.root = ele;}}
{...this.extractProps({
{...extractProps({
...props,
x: null,
y: null
})}
}, this)}
x={props.x.toString()}
y={props.y.toString()}
width={props.width.toString()}
@@ -55,5 +56,3 @@ const RNSVGRect = createReactNativeComponentClass({
validAttributes: RectAttributes,
uiViewClassName: 'RNSVGRect'
});
export default Rect;

17
elements/Shape.js
View File

@@ -1,5 +1,4 @@
import {Component} from 'react';
import extractProps from '../lib/extract/extractProps';
import SvgTouchableMixin from '../lib/SvgTouchableMixin';
import _ from 'lodash';
@@ -11,22 +10,6 @@ class Shape extends Component {
});
this.state = this.touchableGetInitialState();
}
extractProps = (props = {}, options) => {
let extractedProps = extractProps(props, options);
if (extractedProps.touchable && !extractedProps.disabled) {
_.assign(extractedProps, {
onStartShouldSetResponder: this.touchableHandleStartShouldSetResponder,
onResponderTerminationRequest: this.touchableHandleResponderTerminationRequest,
onResponderGrant: this.touchableHandleResponderGrant,
onResponderMove: this.touchableHandleResponderMove,
onResponderRelease: this.touchableHandleResponderRelease,
onResponderTerminate: this.touchableHandleResponderTerminate
});
}
return extractedProps;
}
}
export default Shape;

5
elements/Stop.js
View File

@@ -1,7 +1,7 @@
import {Component, PropTypes} from 'react';
import {numberProp} from '../lib/props';
class Stop extends Component{
export default class extends Component{
static displayName = 'Stop';
static propTypes = {
stopColor: PropTypes.string,
@@ -17,6 +17,3 @@ class Stop extends Component{
return null;
}
}
export default Stop;

6
elements/Symbol.js
View File

@@ -3,9 +3,9 @@ import extractViewBox from '../lib/extract/extractViewBox';
import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
import {SymbolAttributes} from '../lib/attributes';
class SymbolElement extends Component{
export default class extends Component{
static displayName = 'Symbol';
static propType = {
static propTypes = {
id: PropTypes.string.isRequired,
viewBox: PropTypes.string,
preserveAspectRatio: PropTypes.string
@@ -26,5 +26,3 @@ const RNSVGSymbol = createReactNativeComponentClass({
validAttributes: SymbolAttributes,
uiViewClassName: 'RNSVGSymbol'
});
export default SymbolElement;

11
elements/TSpan.js
View File

@@ -1,12 +1,13 @@
import React, { PropTypes, Component } from 'react';
import React, { PropTypes } from 'react';
import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
import extractText from '../lib/extract/extractText';
import {numberProp, pathProps, fontProps} from '../lib/props';
import {TSpanAttibutes} from '../lib/attributes';
import extractProps from '../lib/extract/extractProps';
import Shape from './Shape';
// TSpan elements are shadow components
class TSpan extends Shape {
export default class extends Shape {
static displayName = 'TSpan';
static propTypes = {
@@ -41,11 +42,11 @@ class TSpan extends Shape {
let props = this.props;
return <RNSVGTSpan
ref={ele => {this.root = ele;}}
{...this.extractProps({
{...extractProps({
...props,
x: null,
y: null
})}
}, this)}
{...extractText(props)}
/>;
}
@@ -55,5 +56,3 @@ const RNSVGTSpan = createReactNativeComponentClass({
validAttributes: TSpanAttibutes,
uiViewClassName: 'RNSVGTSpan'
});
export default TSpan;

10
elements/Text.js
View File

@@ -3,10 +3,10 @@ import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src
import extractText from '../lib/extract/extractText';
import {numberProp, pathProps, fontProps} from '../lib/props';
import {TextAttributes} from '../lib/attributes';
import extractProps from '../lib/extract/extractProps';
import Shape from './Shape';
import TSpan from './TSpan';
class Text extends Shape {
export default class extends Shape {
static displayName = 'Text';
static propTypes = {
@@ -42,11 +42,11 @@ class Text extends Shape {
return <RNSVGText
ref={ele => {this.root = ele;}}
{...this.extractProps({
{...extractProps({
...props,
x: null,
y: null
})}
}, this)}
{...extractText(props, true)}
/>;
}
@@ -56,5 +56,3 @@ const RNSVGText = createReactNativeComponentClass({
validAttributes: TextAttributes,
uiViewClassName: 'RNSVGText'
});
export default Text;

9
elements/TextPath.js
View File

@@ -4,11 +4,12 @@ import {TextPathAttributes} from '../lib/attributes';
import extractText from '../lib/extract/extractText';
import Shape from './Shape';
import {pathProps, fontProps, numberProp} from '../lib/props';
import extractProps from '../lib/extract/extractProps';
import TSpan from './TSpan';
const idExpReg = /^#(.+)$/;
class TextPath extends Shape {
export default class extends Shape {
static displayName = 'Span';
static propTypes = {
@@ -28,11 +29,11 @@ class TextPath extends Shape {
return <RNSVGTextPath
href={href}
{...this.extractProps({
{...extractProps({
...props,
x: null,
y: null
})}
}, this)}
{...extractText({
children,
startOffset
@@ -51,5 +52,3 @@ const RNSVGTextPath = createReactNativeComponentClass({
validAttributes: TextPathAttributes,
uiViewClassName: 'RNSVGTextPath'
});
export default TextPath;

18
elements/Use.js
View File

@@ -1,12 +1,12 @@
import {PropTypes} from 'react';
import React, {PropTypes} from 'react';
import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
import extractProps from '../lib/extract/extractProps';
import {pathProps, numberProp} from '../lib/props';
import {UseAttributes} from '../lib/attributes';
import Shape from './Shape';
import React from 'react';
import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
const idExpReg = /^#(.+)$/;
class Use extends Shape {
export default class extends Shape {
static displayName = 'Use';
static propTypes = {
@@ -21,9 +21,9 @@ class Use extends Shape {
};
render() {
let {props} = this;
const {props} = this;
// match "url(#pattern)"
let matched = props.href.match(idExpReg);
const matched = props.href.match(idExpReg);
let href;
if (matched) {
@@ -34,11 +34,9 @@ class Use extends Shape {
console.warn('Invalid `href` prop for `Use` element, expected a href like `"#id"`, but got: "' + props.href + '"');
}
let extractedProps = this.extractProps(props);
return <RNSVGUse
ref={ele => {this.root = ele;}}
{...extractedProps}
{...extractProps(props, this)}
href={href}
width={props.width}
height={props.height}
@@ -51,5 +49,3 @@ const RNSVGUse = createReactNativeComponentClass({
uiViewClassName: 'RNSVGUse'
});
export default Use;

11
lib/Matrix2D.js
View File

@@ -2,7 +2,6 @@
* based on
* https://github.com/CreateJS/EaselJS/blob/631cdffb85eff9413dab43b4676f059b4232d291/src/easeljs/geom/Matrix2D.js
*/
import _ from 'lodash';
const DEG_TO_RAD = Math.PI / 180;
/**
@@ -25,7 +24,7 @@ const DEG_TO_RAD = Math.PI / 180;
* @param {Number} [ty=0] Specifies the ty property for the new matrix.
* @constructor
**/
class Matrix2D {
export default class Matrix2D {
constructor(a, b, c, d, tx, ty) {
this.setTransform(a, b, c, d, tx, ty);
@@ -80,11 +79,11 @@ class Matrix2D {
* @return {Matrix2D} This instance. Useful for chaining method calls.
*/
setTransform = function(a, b, c, d, tx, ty) {
// don't forget to update docs in the constructor if these change:
this.a = _.isNil(a) ? 1 : a;
/*eslint eqeqeq:0*/
this.a = a == null ? 1 : a;
this.b = b || 0;
this.c = c || 0;
this.d = _.isNil(d) ? 1 : d;
this.d = b == null ? 1 : d;
this.tx = tx || 0;
this.ty = ty || 0;
return this;
@@ -281,5 +280,3 @@ class Matrix2D {
return this;
};
}
export default Matrix2D;

104
lib/attributes.js
View File

@@ -1,4 +1,3 @@
const merge = Object.assign;
function arrayDiffer(a, b) {
/*eslint eqeqeq:0*/
@@ -70,25 +69,31 @@ const FillAndStrokeAttributes = {
strokeMiterlimit: true
};
const RenderableAttributes = merge({}, NodeAttributes, FillAndStrokeAttributes);
const RenderableAttributes = {
...NodeAttributes,
...FillAndStrokeAttributes
};
const GroupAttributes = RenderableAttributes;
const UseAttributes = merge({
const UseAttributes = {
href: true,
width: true,
height: true
}, RenderableAttributes);
height: true,
...RenderableAttributes
};
const SymbolAttributes = merge({
name: true
}, ViewBoxAttributes);
const SymbolAttributes = {
name: true,
...ViewBoxAttributes
};
const PathAttributes = merge({
d: true
}, RenderableAttributes);
const PathAttributes = {
d: true,
...RenderableAttributes
};
const TextAttributes = merge({
const TextAttributes = {
font: {
diff: fontDiffer
},
@@ -96,88 +101,99 @@ const TextAttributes = merge({
deltaX: arrayDiffer,
deltaY: arrayDiffer,
positionX: true,
positionY: true
}, RenderableAttributes);
positionY: true,
...RenderableAttributes
};
const TextPathAttributes = merge({
const TextPathAttributes = {
href: true,
startOffset: true
}, RenderableAttributes);
startOffset: true,
...RenderableAttributes
};
const TSpanAttibutes = merge({
content: true
}, TextAttributes);
const TSpanAttibutes = {
content: true,
...TextAttributes
};
const ClipPathAttributes = {
name: true
};
const GradientAttributes = merge({
const GradientAttributes = {
gradient: {
diff: arrayDiffer
},
gradientUnits: true,
gradientTransform: {
diff: arrayDiffer
}
}, ClipPathAttributes);
},
...ClipPathAttributes
};
const LinearGradientAttributes = merge({
const LinearGradientAttributes = {
x1: true,
y1: true,
x2: true,
y2: true
}, GradientAttributes);
y2: true,
...GradientAttributes
};
const RadialGradientAttributes = merge({
const RadialGradientAttributes = {
fx: true,
fy: true,
rx: true,
ry: true,
cx: true,
cy: true,
r: true
}, GradientAttributes);
r: true,
...GradientAttributes
};
const CircleAttributes = merge({
const CircleAttributes = {
cx: true,
cy: true,
r: true
}, RenderableAttributes);
r: true,
...RenderableAttributes
};
const EllipseAttributes = merge({
const EllipseAttributes = {
cx: true,
cy: true,
rx: true,
ry: true
}, RenderableAttributes);
ry: true,
...RenderableAttributes
};
const ImageAttributes = merge({
const ImageAttributes = {
x: true,
y: true,
width: true,
height: true,
src: true,
align: true,
meetOrSlice: true
}, RenderableAttributes);
meetOrSlice: true,
...RenderableAttributes
};
const LineAttributes = merge({
const LineAttributes = {
x1: true,
y1: true,
x2: true,
y2: true
}, RenderableAttributes);
y2: true,
...RenderableAttributes
};
const RectAttributes = merge({
const RectAttributes = {
x: true,
y: true,
width: true,
height: true,
rx: true,
ry: true
}, RenderableAttributes);
ry: true,
...RenderableAttributes
};
export {
PathAttributes,

4
lib/extract/extractBrush.js
View File

@@ -1,9 +1,9 @@
import Color from 'color';
import _ from 'lodash';
import patternReg from './patternReg';
export default function (colorOrBrush) {
if (colorOrBrush === 'none' || _.isNil(colorOrBrush)) {
/*eslint eqeqeq:0*/
if (colorOrBrush === 'none' || colorOrBrush == null) {
return null;
}

8
lib/extract/extractClipping.js → lib/extract/extractClipPath.js
View File

@@ -7,19 +7,19 @@ const clipRules = {
export default function (props) {
let {clipPath, clipRule} = props;
let clippingProps = {};
let clipPathProps = {};
if (clipPath) {
clippingProps.clipRule = clipRules[clipRule] === 0 ? 0 : 1;
clipPathProps.clipRule = clipRules[clipRule] === 0 ? 0 : 1;
let matched = clipPath.match(clipReg);
if (matched) {
clippingProps.clipPath = matched[1];
clipPathProps.clipPath = matched[1];
} else {
console.warn('Invalid `clipPath` prop, expected a clipPath like `"#id"`, but got: "' + clipPath + '"');
}
}
return clippingProps;
return clipPathProps;
}

15
lib/extract/extractFill.js
View File

@@ -1,16 +1,25 @@
import extractBrush from './extractBrush';
import extractOpacity from './extractOpacity';
import _ from 'lodash';
import {fillProps} from '../props';
const fillRules = {
evenodd: 0,
nonzero: 1
};
export default function(props) {
const fillKeys = Object.keys(fillProps);
export default function(props, styleProperties) {
fillKeys.forEach((name) => {
if (props.hasOwnProperty(name)) {
styleProperties.push(name);
}
});
return {
// default fill is black
fill: extractBrush(_.isNil(props.fill) ? '#000' : props.fill),
/*eslint eqeqeq:0*/
fill: extractBrush(props.fill == null ? '#000' : props.fill),
fillOpacity: extractOpacity(props.fillOpacity),
fillRule: fillRules[props.fillRule] === 0 ? 0 : 1
};

2
lib/extract/extractGradient.js
View File

@@ -1,4 +1,4 @@
import {Children, Component} from 'react';
import {Children} from 'react';
import _ from 'lodash';
import Color from 'color';

47
lib/extract/extractProps.js
View File

@@ -1,32 +1,16 @@
import extractFill from './extractFill';
import extractStroke from './extractStroke';
import extractTransform from './extractTransform';
import extractClipping from './extractClipping';
import extractClipPath from './extractClipPath';
import extractResponder from './extractResponder';
import extractOpacity from './extractOpacity';
import {fillAndStrokePropsKeys} from '../props';
import _ from 'lodash';
export default function(props, options = {stroke: true, transform: true, fill: true, responder: true}) {
let propList = [];
fillAndStrokePropsKeys.forEach(name => {
if (!_.isNil(props[name])) {
// clipPath prop may provide `clipPathRef` as native prop
if (name === 'clipPath') {
if (extractedProps[name]) {
propList.push(name);
} else if (extractedProps.clipPathRef) {
propList.push('clipPathRef');
}
} else {
propList.push(name);
}
}
});
export default function(props, ref) {
const styleProperties = [];
let extractedProps = {
const extractedProps = {
opacity: extractOpacity(props.opacity),
propList
propList: styleProperties
};
if (props.id) {
@@ -34,26 +18,19 @@ export default function(props, options = {stroke: true, transform: true, fill: t
}
if (props.clipPath) {
_.assign(extractedProps, extractClipping(props));
Object.assign(extractedProps, extractClipPath(props));
}
if (options.stroke) {
_.assign(extractedProps, extractStroke(props));
}
Object.assign(extractedProps, extractStroke(props, styleProperties));
Object.assign(extractedProps, extractFill(props, styleProperties));
if (options.fill) {
_.assign(extractedProps, extractFill(props));
}
if (options.transform) {
extractedProps.matrix = extractTransform(props);
} else if (props.transform) {
if (props.transform) {
extractedProps.matrix = extractTransform(props.transform);
} else {
extractedProps.matrix = extractTransform(props);
}
if (options.responder) {
_.assign(extractedProps, extractResponder(props));
}
Object.assign(extractedProps, extractResponder(props, ref));
return extractedProps;
}

47
lib/extract/extractResponder.js
View File

@@ -1,26 +1,37 @@
import {responderProps, touchableProps} from '../props';
import _ from 'lodash';
export default function (props) {
let responsible;
let touchable;
export default function (props, ref) {
const extractedProps = {};
return _.reduce(props, (prev, value, key) => {
if (value && (responderProps[key] || touchableProps[key])) {
prev[key] = value;
if (!responsible) {
responsible = true;
prev.responsible = true;
}
if (!touchable && touchableProps[key]) {
touchable = true;
prev.touchable = true;
}
_.forEach(responderProps, (v, key) => {
const value = props[key];
if (props[key]) {
if (!extractedProps.responsible && key !== 'pointerEvents') {
extractedProps.responsible = true;
}
return prev;
}, {
responsible: false,
touchable: false
extractedProps[key] = value;
}
});
_.every(touchableProps, (v, key) => {
if (!props[key]) {
return true;
}
extractedProps.responsible = true;
Object.assign(extractedProps, {
onStartShouldSetResponder: ref.touchableHandleStartShouldSetResponder,
onResponderTerminationRequest: ref.touchableHandleResponderTerminationRequest,
onResponderGrant: ref.touchableHandleResponderGrant,
onResponderMove: ref.touchableHandleResponderMove,
onResponderRelease: ref.touchableHandleResponderRelease,
onResponderTerminate: ref.touchableHandleResponderTerminate
});
return false;
});
return extractedProps;
}

17
lib/extract/extractStroke.js
View File

@@ -1,7 +1,8 @@
import extractBrush from './extractBrush';
import extractOpacity from './extractOpacity';
import _ from 'lodash';
let separator = /\s*,\s*/;
import {strokeProps} from '../props'
const separator = /\s*,\s*/;
const caps = {
butt: 0,
@@ -15,11 +16,17 @@ const joins = {
round: 1
};
export default function(props) {
let {stroke} = props;
const strokeKeys = Object.keys(strokeProps);
let strokeWidth = +props.strokeWidth;
export default function(props, styleProperties) {
strokeKeys.forEach((name) => {
if (props.hasOwnProperty(name)) {
styleProperties.push(name);
}
});
const {stroke} = props;
const strokeWidth = +props.strokeWidth;
let strokeDasharray = props.strokeDasharray;
if (typeof strokeDasharray === 'string') {

4
lib/extract/extractText.js
View File

@@ -76,7 +76,7 @@ function parseDelta(delta) {
} else if (typeof delta === 'number') {
return [delta];
} else {
[];
return [];
}
}
@@ -125,5 +125,5 @@ export default function(props, container) {
startOffset: (startOffset || 0).toString(),
positionX: _.isNil(x) ? null : x.toString(),
positionY: _.isNil(y) ? null : y.toString()
}
};
}

5
lib/extract/extractTransform.js
View File

@@ -79,11 +79,6 @@ function props2transform(props) {
};
}
/**
*
* @param props
*/
export default function (props) {
// TODO: support Percentage for transform
return transformToMatrix(props2transform(props), props.transform ? props2transform(props.transform) : null);
}

2
lib/percentToFloat.js
View File

@@ -1,4 +1,4 @@
let percentReg = /^(\-?\d+(?:\.\d+)?)(%?)$/;
let percentReg = /^(-?\d+(?:\.\d+)?)(%?)$/;
export default function (percent) {
let matched = percent.match(percentReg);
if (!matched) {

27
lib/props.js
View File

@@ -14,14 +14,10 @@ const touchableProps = {
delayLongPress: PropTypes.number
};
const touchablePropsKeys = Object.keys(touchableProps);
const responderPropsKeys = [
const responderProps = [
...Object.keys(PanResponder.create({}).panHandlers),
'pointerEvents'
];
const responderProps = responderPropsKeys.reduce((props, name) => {
].reduce((props, name) => {
props[name] = PropTypes.func;
return props;
}, {});
@@ -32,8 +28,6 @@ const fillProps = {
fillRule: PropTypes.oneOf(['evenodd', 'nonzero'])
};
const fillPropsKeys = Object.keys(fillProps);
const clipProps = {
clipRule: PropTypes.oneOf(['evenodd', 'nonzero']),
clipPath: PropTypes.string
@@ -54,10 +48,6 @@ const strokeProps = {
strokeMiterlimit: numberProp
};
const strokePropsKeys = Object.keys(strokeProps);
const fillAndStrokePropsKeys = [...fillPropsKeys, ...strokePropsKeys];
const fontProps = {
fontFamily: PropTypes.string,
fontSize: numberProp,
@@ -66,9 +56,6 @@ const fontProps = {
font: PropTypes.object
};
const fontPropsKeys = Object.keys(fontProps);
const fontAndRenderPropsKeys = [...fillAndStrokePropsKeys, ...fontPropsKeys];
const transformProps = {
scale: numberProp,
scaleX: numberProp,
@@ -102,18 +89,10 @@ const pathProps = {
export {
numberProp,
fillProps,
fillPropsKeys,
strokeProps,
strokePropsKeys,
fillAndStrokePropsKeys,
fontProps,
fontPropsKeys,
fontAndRenderPropsKeys,
clipProps,
transformProps,
pathProps,
responderProps,
responderPropsKeys,
touchableProps,
touchablePropsKeys
touchableProps
};