diff --git a/elements/Circle.js b/elements/Circle.js index fc22285a..78aea4b9 100644 --- a/elements/Circle.js +++ b/elements/Circle.js @@ -1,20 +1,11 @@ import React from "react"; import { requireNativeComponent } from "react-native"; import Shape from "./Shape"; -import { CircleAttributes } from "../lib/attributes"; -import { pathProps, numberProp } from "../lib/props"; import extractProps from "../lib/extract/extractProps"; export default class extends Shape { static displayName = "Circle"; - static propTypes = { - ...pathProps, - cx: numberProp.isRequired, - cy: numberProp.isRequired, - r: numberProp.isRequired, - }; - static defaultProps = { cx: 0, cy: 0, @@ -42,6 +33,4 @@ export default class extends Shape { } } -const RNSVGCircle = requireNativeComponent("RNSVGCircle", null, { - nativeOnly: CircleAttributes, -}); +const RNSVGCircle = requireNativeComponent("RNSVGCircle"); diff --git a/elements/ClipPath.js b/elements/ClipPath.js index a59c37fa..8349492d 100644 --- a/elements/ClipPath.js +++ b/elements/ClipPath.js @@ -1,13 +1,8 @@ import React, { Component } from "react"; -import PropTypes from "prop-types"; import { requireNativeComponent } from "react-native"; -import { ClipPathAttributes } from "../lib/attributes"; export default class extends Component { static displayName = "ClipPath"; - static propTypes = { - id: PropTypes.string.isRequired, - }; render() { const { id, children } = this.props; @@ -15,6 +10,4 @@ export default class extends Component { } } -const RNSVGClipPath = requireNativeComponent("RNSVGClipPath", null, { - nativeOnly: ClipPathAttributes, -}); +const RNSVGClipPath = requireNativeComponent("RNSVGClipPath"); diff --git a/elements/Defs.js b/elements/Defs.js index dc3f09aa..227c1116 100644 --- a/elements/Defs.js +++ b/elements/Defs.js @@ -9,6 +9,4 @@ export default class extends Component { } } -const RNSVGDefs = requireNativeComponent("RNSVGDefs", null, { - nativeOnly: {}, -}); +const RNSVGDefs = requireNativeComponent("RNSVGDefs"); diff --git a/elements/Ellipse.js b/elements/Ellipse.js index e3ec0f66..1824a61c 100644 --- a/elements/Ellipse.js +++ b/elements/Ellipse.js @@ -1,21 +1,11 @@ import React from "react"; import { requireNativeComponent } from "react-native"; import Shape from "./Shape"; -import { pathProps, numberProp } from "../lib/props"; -import { EllipseAttributes } from "../lib/attributes"; import extractProps from "../lib/extract/extractProps"; export default class extends Shape { static displayName = "Ellipse"; - static propTypes = { - ...pathProps, - cx: numberProp.isRequired, - cy: numberProp.isRequired, - rx: numberProp.isRequired, - ry: numberProp.isRequired, - }; - static defaultProps = { cx: 0, cy: 0, @@ -46,6 +36,4 @@ export default class extends Shape { } } -const RNSVGEllipse = requireNativeComponent("RNSVGEllipse", null, { - nativeOnly: EllipseAttributes, -}); +const RNSVGEllipse = requireNativeComponent("RNSVGEllipse"); diff --git a/elements/G.js b/elements/G.js index 659870ee..b886f2f5 100644 --- a/elements/G.js +++ b/elements/G.js @@ -1,8 +1,6 @@ import React from "react"; import { requireNativeComponent } from "react-native"; import Shape from "./Shape"; -import { pathProps, fontProps } from "../lib/props"; -import { GroupAttributes } from "../lib/attributes"; import extractProps from "../lib/extract/extractProps"; import { extractFont } from "../lib/extract/extractText"; import extractTransform from "../lib/extract/extractTransform"; @@ -10,11 +8,6 @@ import extractTransform from "../lib/extract/extractTransform"; export default class extends Shape { static displayName = "G"; - static propTypes = { - ...pathProps, - ...fontProps, - }; - setNativeProps = props => { const matrix = !props.matrix && extractTransform(props); if (matrix) { @@ -40,6 +33,4 @@ export default class extends Shape { } } -const RNSVGGroup = requireNativeComponent("RNSVGGroup", null, { - nativeOnly: GroupAttributes, -}); +const RNSVGGroup = requireNativeComponent("RNSVGGroup"); diff --git a/elements/Image.js b/elements/Image.js index 895885d8..c74896fe 100644 --- a/elements/Image.js +++ b/elements/Image.js @@ -1,8 +1,5 @@ import React from "react"; -import PropTypes from "prop-types"; import { Image, requireNativeComponent } from "react-native"; -import { ImageAttributes } from "../lib/attributes"; -import { numberProp, touchableProps, responderProps } from "../lib/props"; import Shape from "./Shape"; import { meetOrSliceTypes, alignEnum } from "../lib/extract/extractViewBox"; import extractProps from "../lib/extract/extractProps"; @@ -11,15 +8,6 @@ const spacesRegExp = /\s+/; export default class extends Shape { static displayName = "Image"; - static propTypes = { - ...responderProps, - ...touchableProps, - x: numberProp, - y: numberProp, - width: numberProp.isRequired, - height: numberProp.isRequired, - preserveAspectRatio: PropTypes.string, - }; static defaultProps = { x: 0, @@ -58,6 +46,4 @@ export default class extends Shape { } } -const RNSVGImage = requireNativeComponent("RNSVGImage", null, { - nativeOnly: ImageAttributes, -}); +const RNSVGImage = requireNativeComponent("RNSVGImage"); diff --git a/elements/Line.js b/elements/Line.js index 1c829f2f..cc4f9bcb 100644 --- a/elements/Line.js +++ b/elements/Line.js @@ -1,21 +1,11 @@ import React from "react"; import { requireNativeComponent } from "react-native"; -import { LineAttributes } from "../lib/attributes"; import Shape from "./Shape"; -import { pathProps, numberProp } from "../lib/props"; import extractProps from "../lib/extract/extractProps"; export default class extends Shape { static displayName = "Line"; - static propTypes = { - ...pathProps, - x1: numberProp.isRequired, - x2: numberProp.isRequired, - y1: numberProp.isRequired, - y2: numberProp.isRequired, - }; - static defaultProps = { x1: 0, y1: 0, @@ -45,6 +35,4 @@ export default class extends Shape { } } -const RNSVGLine = requireNativeComponent("RNSVGLine", null, { - nativeOnly: LineAttributes, -}); +const RNSVGLine = requireNativeComponent("RNSVGLine"); diff --git a/elements/LinearGradient.js b/elements/LinearGradient.js index 2da27519..5784cf3a 100644 --- a/elements/LinearGradient.js +++ b/elements/LinearGradient.js @@ -1,20 +1,9 @@ import React, { Component } from "react"; -import PropTypes from "prop-types"; -import { numberProp } from "../lib/props"; import extractGradient from "../lib/extract/extractGradient"; import { requireNativeComponent } from "react-native"; -import { LinearGradientAttributes } from "../lib/attributes"; export default class extends Component { static displayName = "LinearGradient"; - static propTypes = { - x1: numberProp.isRequired, - x2: numberProp.isRequired, - y1: numberProp.isRequired, - y2: numberProp.isRequired, - gradientUnits: PropTypes.oneOf(["objectBoundingBox", "userSpaceOnUse"]), - id: PropTypes.string.isRequired, - }; static defaultProps = { x1: "0%", @@ -38,10 +27,4 @@ export default class extends Component { } } -const RNSVGLinearGradient = requireNativeComponent( - "RNSVGLinearGradient", - null, - { - nativeOnly: LinearGradientAttributes, - }, -); +const RNSVGLinearGradient = requireNativeComponent("RNSVGLinearGradient"); diff --git a/elements/Mask.js b/elements/Mask.js index 318cde81..e073764d 100644 --- a/elements/Mask.js +++ b/elements/Mask.js @@ -1,26 +1,10 @@ import React, { Component } from "react"; -import PropTypes from "prop-types"; import { requireNativeComponent } from "react-native"; -import { numberProp } from "../lib/props"; import units from "../lib/units"; -import { MaskAttributes } from "../lib/attributes"; import extractTransform from "../lib/extract/extractTransform"; export default class extends Component { static displayName = "Mask"; - static propTypes = { - id: PropTypes.string.isRequired, - x: numberProp, - y: numberProp, - width: numberProp, - height: numberProp, - maskTransform: PropTypes.string, - maskUnits: PropTypes.oneOf(["userSpaceOnUse", "objectBoundingBox"]), - maskContentUnits: PropTypes.oneOf([ - "userSpaceOnUse", - "objectBoundingBox", - ]), - }; setNativeProps = props => { this.root.setNativeProps(props); @@ -73,6 +57,4 @@ export default class extends Component { } } -const RNSVGMask = requireNativeComponent("RNSVGMask", null, { - nativeOnly: MaskAttributes, -}); +const RNSVGMask = requireNativeComponent("RNSVGMask"); diff --git a/elements/Path.js b/elements/Path.js index 0768e3f2..cb18684e 100644 --- a/elements/Path.js +++ b/elements/Path.js @@ -1,19 +1,11 @@ import React from "react"; -import PropTypes from "prop-types"; import { requireNativeComponent } from "react-native"; -import { PathAttributes } from "../lib/attributes"; import Shape from "./Shape"; -import { pathProps } from "../lib/props"; import extractProps from "../lib/extract/extractProps"; export default class extends Shape { static displayName = "Path"; - static propTypes = { - ...pathProps, - d: PropTypes.string.isRequired, - }; - setNativeProps = (...args) => { this.root.setNativeProps(...args); }; @@ -33,6 +25,4 @@ export default class extends Shape { } } -const RNSVGPath = requireNativeComponent("RNSVGPath", null, { - nativeOnly: PathAttributes, -}); +const RNSVGPath = requireNativeComponent("RNSVGPath"); diff --git a/elements/Pattern.js b/elements/Pattern.js index d17f2d70..87821219 100644 --- a/elements/Pattern.js +++ b/elements/Pattern.js @@ -1,29 +1,11 @@ import React, { Component } from "react"; -import PropTypes from "prop-types"; import { requireNativeComponent } from "react-native"; -import { numberProp } from "../lib/props"; import units from "../lib/units"; -import { PatternAttributes } from "../lib/attributes"; import extractTransform from "../lib/extract/extractTransform"; import extractViewBox from "../lib/extract/extractViewBox"; export default class extends Component { static displayName = "Pattern"; - static propTypes = { - id: PropTypes.string.isRequired, - x: numberProp, - y: numberProp, - width: numberProp, - height: numberProp, - patternTransform: PropTypes.string, - patternUnits: PropTypes.oneOf(["userSpaceOnUse", "objectBoundingBox"]), - patternContentUnits: PropTypes.oneOf([ - "userSpaceOnUse", - "objectBoundingBox", - ]), - viewBox: PropTypes.string, - preserveAspectRatio: PropTypes.string, - }; setNativeProps = props => { this.root.setNativeProps(props); @@ -79,6 +61,4 @@ export default class extends Component { } } -const RNSVGPattern = requireNativeComponent("RNSVGPattern", null, { - nativeOnly: PatternAttributes, -}); +const RNSVGPattern = requireNativeComponent("RNSVGPattern"); diff --git a/elements/Polygon.js b/elements/Polygon.js index 1883cd56..7631df6e 100644 --- a/elements/Polygon.js +++ b/elements/Polygon.js @@ -1,17 +1,10 @@ import React from "react"; -import PropTypes from "prop-types"; import Path from "./Path"; -import { pathProps } from "../lib/props"; import extractPolyPoints from "../lib/extract/extractPolyPoints"; import Shape from "./Shape"; export default class extends Shape { static displayName = "Polygon"; - static propTypes = { - ...pathProps, - points: PropTypes.oneOfType([PropTypes.string, PropTypes.array]) - .isRequired, - }; static defaultProps = { points: "", diff --git a/elements/Polyline.js b/elements/Polyline.js index 31d44333..de274cfa 100644 --- a/elements/Polyline.js +++ b/elements/Polyline.js @@ -1,17 +1,10 @@ import React from "react"; -import PropTypes from "prop-types"; import Path from "./Path"; -import { pathProps } from "../lib/props"; import extractPolyPoints from "../lib/extract/extractPolyPoints"; import Shape from "./Shape"; export default class extends Shape { static displayName = "Polyline"; - static propTypes = { - ...pathProps, - points: PropTypes.oneOfType([PropTypes.string, PropTypes.array]) - .isRequired, - }; static defaultProps = { points: "", diff --git a/elements/RadialGradient.js b/elements/RadialGradient.js index 737f69e1..4847ff57 100644 --- a/elements/RadialGradient.js +++ b/elements/RadialGradient.js @@ -1,23 +1,10 @@ import React, { Component } from "react"; -import PropTypes from "prop-types"; -import { numberProp } from "../lib/props"; import extractGradient from "../lib/extract/extractGradient"; import { requireNativeComponent } from "react-native"; import { RadialGradientAttributes } from "../lib/attributes"; export default class extends Component { static displayName = "RadialGradient"; - static propTypes = { - fx: numberProp.isRequired, - fy: numberProp.isRequired, - rx: numberProp, - ry: numberProp, - cx: numberProp.isRequired, - cy: numberProp.isRequired, - r: numberProp, - gradientUnits: PropTypes.oneOf(["objectBoundingBox", "userSpaceOnUse"]), - id: PropTypes.string.isRequired, - }; static defaultProps = { fx: "50%", @@ -44,10 +31,4 @@ export default class extends Component { } } -const RNSVGRadialGradient = requireNativeComponent( - "RNSVGRadialGradient", - null, - { - nativeOnly: RadialGradientAttributes, - }, -); +const RNSVGRadialGradient = requireNativeComponent("RNSVGRadialGradient"); diff --git a/elements/Rect.js b/elements/Rect.js index 55cb3bd8..d86527b8 100644 --- a/elements/Rect.js +++ b/elements/Rect.js @@ -1,24 +1,12 @@ import React 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 { requireNativeComponent } from "react-native"; -import { pathProps, numberProp } from "../lib/props"; -import { RectAttributes } from "../lib/attributes"; import extractProps from "../lib/extract/extractProps"; import Shape from "./Shape"; export default class extends Shape { static displayName = "Rect"; - static propTypes = { - ...pathProps, - x: numberProp.isRequired, - y: numberProp.isRequired, - width: numberProp.isRequired, - height: numberProp.isRequired, - rx: numberProp, - ry: numberProp, - }; - static defaultProps = { x: 0, y: 0, @@ -59,6 +47,4 @@ export default class extends Shape { } } -const RNSVGRect = requireNativeComponent("RNSVGRect", null, { - nativeOnly: RectAttributes, -}); +const RNSVGRect = requireNativeComponent("RNSVGRect"); diff --git a/elements/Stop.js b/elements/Stop.js index 6406853f..c9c7cf08 100644 --- a/elements/Stop.js +++ b/elements/Stop.js @@ -1,13 +1,7 @@ import { Component } from "react"; -import PropTypes from "prop-types"; -import { numberProp } from "../lib/props"; export default class extends Component { static displayName = "Stop"; - static propTypes = { - stopColor: PropTypes.string, - stopOpacity: numberProp, - }; static defaultProps = { stopColor: "#000", diff --git a/elements/Svg.js b/elements/Svg.js index 78ce945d..9b005c55 100644 --- a/elements/Svg.js +++ b/elements/Svg.js @@ -1,8 +1,6 @@ //noinspection JSUnresolvedVariable import React from "react"; -import PropTypes from "prop-types"; import { - ViewPropTypes, requireNativeComponent, StyleSheet, findNodeHandle, @@ -10,8 +8,6 @@ import { } from "react-native"; import extractResponder from "../lib/extract/extractResponder"; import extractViewBox from "../lib/extract/extractViewBox"; -import { ViewBoxAttributes } from "../lib/attributes"; -import { numberProp } from "../lib/props"; import Shape from "./Shape"; import G from "./G"; @@ -30,20 +26,6 @@ const styles = StyleSheet.create({ class Svg extends Shape { static displayName = "Svg"; - static propTypes = { - ...ViewPropTypes, - color: PropTypes.string, - opacity: numberProp, - width: numberProp, - height: numberProp, - // more detail https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute - viewBox: PropTypes.string, - preserveAspectRatio: PropTypes.string, - style: PropTypes.shape({ - ...ViewPropTypes.style, - color: PropTypes.string, - }), - }; static defaultProps = { preserveAspectRatio: "xMidYMid meet", @@ -132,15 +114,6 @@ class Svg extends Shape { } } -const NativeSvgView = requireNativeComponent("RNSVGSvgView", null, { - nativeOnly: { - ...ViewBoxAttributes, - width: true, - height: true, - bbwidth: true, - bbheight: true, - tintColor: true, - }, -}); +const NativeSvgView = requireNativeComponent("RNSVGSvgView"); export default Svg; diff --git a/elements/Symbol.js b/elements/Symbol.js index bb669eb2..50680757 100644 --- a/elements/Symbol.js +++ b/elements/Symbol.js @@ -1,16 +1,10 @@ import React, { Component } from "react"; -import PropTypes from "prop-types"; import extractViewBox from "../lib/extract/extractViewBox"; import { requireNativeComponent } from "react-native"; -import { SymbolAttributes } from "../lib/attributes"; export default class extends Component { static displayName = "Symbol"; - static propTypes = { - id: PropTypes.string.isRequired, - viewBox: PropTypes.string, - preserveAspectRatio: PropTypes.string, - }; + render() { const { props } = this; const { id, children } = props; @@ -23,6 +17,4 @@ export default class extends Component { } } -const RNSVGSymbol = requireNativeComponent("RNSVGSymbol", null, { - nativeOnly: SymbolAttributes, -}); +const RNSVGSymbol = requireNativeComponent("RNSVGSymbol"); diff --git a/elements/TSpan.js b/elements/TSpan.js index dd28fc6c..736a6943 100644 --- a/elements/TSpan.js +++ b/elements/TSpan.js @@ -2,8 +2,6 @@ import React from "react"; import _ from "lodash"; import { requireNativeComponent } from "react-native"; import extractText from "../lib/extract/extractText"; -import { textProps } from "../lib/props"; -import { TSpanAttibutes } from "../lib/attributes"; import extractProps from "../lib/extract/extractProps"; import extractTransform from "../lib/extract/extractTransform"; import Shape from "./Shape"; @@ -12,8 +10,6 @@ import Shape from "./Shape"; export default class extends Shape { static displayName = "TSpan"; - static propTypes = textProps; - setNativeProps = props => { const matrix = !props.matrix && extractTransform(props); if (matrix) { @@ -47,6 +43,4 @@ export default class extends Shape { } } -const RNSVGTSpan = requireNativeComponent("RNSVGTSpan", null, { - nativeOnly: TSpanAttibutes, -}); +const RNSVGTSpan = requireNativeComponent("RNSVGTSpan"); diff --git a/elements/Text.js b/elements/Text.js index e6340d0d..58cf0637 100644 --- a/elements/Text.js +++ b/elements/Text.js @@ -2,8 +2,6 @@ import React from "react"; import _ from "lodash"; import { requireNativeComponent } from "react-native"; import extractText from "../lib/extract/extractText"; -import { textProps } from "../lib/props"; -import { TextAttributes } from "../lib/attributes"; import extractProps from "../lib/extract/extractProps"; import extractTransform from "../lib/extract/extractTransform"; import Shape from "./Shape"; @@ -11,8 +9,6 @@ import Shape from "./Shape"; export default class extends Shape { static displayName = "Text"; - static propTypes = textProps; - setNativeProps = props => { const matrix = !props.matrix && extractTransform(props); if (matrix) { @@ -47,6 +43,4 @@ export default class extends Shape { } } -const RNSVGText = requireNativeComponent("RNSVGText", null, { - nativeOnly: TextAttributes, -}); +const RNSVGText = requireNativeComponent("RNSVGText"); diff --git a/elements/TextPath.js b/elements/TextPath.js index 8cf03d92..6d1c3dec 100644 --- a/elements/TextPath.js +++ b/elements/TextPath.js @@ -1,10 +1,8 @@ import React from "react"; import { requireNativeComponent } from "react-native"; -import { TextPathAttributes } from "../lib/attributes"; import extractText from "../lib/extract/extractText"; import Shape from "./Shape"; -import { textPathProps } from "../lib/props"; import extractProps from "../lib/extract/extractProps"; import TSpan from "./TSpan"; @@ -13,8 +11,6 @@ const idExpReg = /^#(.+)$/; export default class extends Shape { static displayName = "TextPath"; - static propTypes = textPathProps; - render() { const { children, @@ -68,6 +64,4 @@ export default class extends Shape { } } -const RNSVGTextPath = requireNativeComponent("RNSVGTextPath", null, { - nativeOnly: TextPathAttributes, -}); +const RNSVGTextPath = requireNativeComponent("RNSVGTextPath"); diff --git a/elements/Use.js b/elements/Use.js index c6dc2d67..934a40d3 100644 --- a/elements/Use.js +++ b/elements/Use.js @@ -1,22 +1,12 @@ import React from "react"; -import PropTypes from "prop-types"; import { requireNativeComponent } from "react-native"; import extractProps from "../lib/extract/extractProps"; -import { pathProps, numberProp } from "../lib/props"; -import { UseAttributes } from "../lib/attributes"; import Shape from "./Shape"; const idExpReg = /^#(.+)$/; export default class extends Shape { static displayName = "Use"; - static propTypes = { - href: PropTypes.string.isRequired, - width: numberProp, // Just for reusing `Symbol` - height: numberProp, // Just for reusing `Symbol` - ...pathProps, - }; - static defaultProps = { width: 0, height: 0, @@ -58,6 +48,4 @@ export default class extends Shape { } } -const RNSVGUse = requireNativeComponent("RNSVGUse", null, { - nativeOnly: UseAttributes, -}); +const RNSVGUse = requireNativeComponent("RNSVGUse"); diff --git a/lib/attributes.js b/lib/attributes.js deleted file mode 100644 index 06489029..00000000 --- a/lib/attributes.js +++ /dev/null @@ -1,274 +0,0 @@ -function arrayDiffer(a, b) { - if (!a || !b) { - return true; - } - if (a.length !== b.length) { - return true; - } - for (let i = 0; i < a.length; i++) { - if (a[i] !== b[i]) { - return true; - } - } - return false; -} - -function fontDiffer(a, b) { - if (a === b) { - return false; - } - - return ( - a.fontStyle !== b.fontStyle || - a.fontVariant !== b.fontVariant || - a.fontWeight !== b.fontWeight || - a.fontStretch !== b.fontStretch || - a.fontSize !== b.fontSize || - a.fontFamily !== b.fontFamily || - a.textAnchor !== b.textAnchor || - a.textDecoration !== b.textDecoration || - a.letterSpacing !== b.letterSpacing || - a.wordSpacing !== b.wordSpacing || - a.kerning !== b.kerning || - a.fontVariantLigatures !== b.fontVariantLigatures || - a.fontData !== b.fontData || - a.fontFeatureSettings !== b.fontFeatureSettings - ); -} - -const ViewBoxAttributes = { - minX: true, - minY: true, - vbWidth: true, - vbHeight: true, - align: true, - meetOrSlice: true -}; - -const NodeAttributes = { - name: true, - matrix: { - diff: arrayDiffer - }, - scaleX: true, - scaleY: true, - opacity: true, - clipRule: true, - clipPath: true, - mask: true, - propList: { - diff: arrayDiffer - }, - responsible: true -}; - -const FillAndStrokeAttributes = { - fill: { - diff: arrayDiffer - }, - fillOpacity: true, - fillRule: true, - stroke: { - diff: arrayDiffer - }, - strokeOpacity: true, - strokeWidth: true, - strokeLinecap: true, - strokeLinejoin: true, - strokeDasharray: { - diff: arrayDiffer - }, - strokeDashoffset: true, - strokeMiterlimit: true -}; - -const RenderableAttributes = { - ...NodeAttributes, - ...FillAndStrokeAttributes -}; - -const GroupAttributes = { - ...RenderableAttributes, - font: { - diff: fontDiffer - } -}; - -const UseAttributes = { - ...RenderableAttributes, - href: true, - width: true, - height: true, -}; - -const SymbolAttributes = { - ...ViewBoxAttributes, - name: true -}; - -const PathAttributes = { - ...RenderableAttributes, - d: true -}; - -const TextSpecificAttributes = { - ...RenderableAttributes, - alignmentBaseline: true, - baselineShift: true, - verticalAlign: true, - lengthAdjust: true, - textLength: true -}; - -const TextAttributes = { - ...TextSpecificAttributes, - font: { - diff: fontDiffer - }, - x: arrayDiffer, - y: arrayDiffer, - dx: arrayDiffer, - dy: arrayDiffer, - rotate: arrayDiffer, -}; - -const TextPathAttributes = { - ...TextSpecificAttributes, - href: true, - startOffset: true, - method: true, - spacing: true, - side: true, - midLine: true -}; - -const TSpanAttibutes = { - ...TextAttributes, - content: true -}; - -const ClipPathAttributes = { - name: true -}; - -const GradientAttributes = { - ...ClipPathAttributes, - gradient: { - diff: arrayDiffer - }, - gradientUnits: true, - gradientTransform: { - diff: arrayDiffer - } -}; - -const PatternAttributes = { - ...ViewBoxAttributes, - name: true, - x: true, - y: true, - width: true, - height: true, - patternUnits: true, - patternContentUnits: true, - patternTransform: { - diff: arrayDiffer - } -}; - -const MaskAttributes = { - name: true, - x: true, - y: true, - width: true, - height: true, - maskUnits: true, - maskContentUnits: true, - maskTransform: { - diff: arrayDiffer - } -}; - -const LinearGradientAttributes = { - ...GradientAttributes, - x1: true, - y1: true, - x2: true, - y2: true -}; - -const RadialGradientAttributes = { - ...GradientAttributes, - fx: true, - fy: true, - rx: true, - ry: true, - cx: true, - cy: true, - r: true -}; - -const CircleAttributes = { - ...RenderableAttributes, - cx: true, - cy: true, - r: true -}; - -const EllipseAttributes = { - ...RenderableAttributes, - cx: true, - cy: true, - rx: true, - ry: true -}; - -const ImageAttributes = { - ...RenderableAttributes, - x: true, - y: true, - width: true, - height: true, - src: true, - align: true, - meetOrSlice: true -}; - -const LineAttributes = { - ...RenderableAttributes, - x1: true, - y1: true, - x2: true, - y2: true -}; - -const RectAttributes = { - ...RenderableAttributes, - x: true, - y: true, - width: true, - height: true, - rx: true, - ry: true -}; - -export { - PathAttributes, - TextAttributes, - TSpanAttibutes, - TextPathAttributes, - GroupAttributes, - ClipPathAttributes, - CircleAttributes, - EllipseAttributes, - ImageAttributes, - LineAttributes, - RectAttributes, - UseAttributes, - SymbolAttributes, - LinearGradientAttributes, - RadialGradientAttributes, - ViewBoxAttributes, - PatternAttributes, - MaskAttributes, -}; diff --git a/lib/extract/extractFill.js b/lib/extract/extractFill.js index 79051873..6287c58e 100644 --- a/lib/extract/extractFill.js +++ b/lib/extract/extractFill.js @@ -1,16 +1,15 @@ import extractBrush from "./extractBrush"; import extractOpacity from "./extractOpacity"; -import { fillProps } from "../props"; const fillRules = { evenodd: 0, nonzero: 1, }; -const fillKeys = Object.keys(fillProps); +const fillProps = ["fill", "fillOpacity", "fillRule"]; export default function(props, styleProperties) { - fillKeys.forEach(name => { + fillProps.forEach(name => { if (props.hasOwnProperty(name)) { styleProperties.push(name); } diff --git a/lib/extract/extractResponder.js b/lib/extract/extractResponder.js index 1c0a2bee..f25d542d 100644 --- a/lib/extract/extractResponder.js +++ b/lib/extract/extractResponder.js @@ -1,10 +1,26 @@ -import { responderProps, touchableProps } from "../props"; +import { PanResponder } from "react-native"; import _ from "lodash"; +const responderProps = [ + ...Object.keys(PanResponder.create({}).panHandlers), + "pointerEvents" +]; + +const touchableProps = [ + "disabled", + "onPress", + "onPressIn", + "onPressOut", + "onLongPress", + "delayPressIn", + "delayPressOut", + "delayLongPress", +]; + export default function(props, ref) { const extractedProps = {}; - _.forEach(responderProps, (v, key) => { + _.forEach(responderProps, (key) => { const value = props[key]; if (props[key]) { if (!extractedProps.responsible && key !== "pointerEvents") { diff --git a/lib/extract/extractStroke.js b/lib/extract/extractStroke.js index f8c871a1..15981ac8 100644 --- a/lib/extract/extractStroke.js +++ b/lib/extract/extractStroke.js @@ -1,6 +1,5 @@ import extractBrush from "./extractBrush"; import extractOpacity from "./extractOpacity"; -import { strokeProps } from "../props"; import extractLengthList from "./extractLengthList"; const caps = { @@ -15,10 +14,19 @@ const joins = { round: 1, }; -const strokeKeys = Object.keys(strokeProps); +const strokeProps = [ + "stroke", + "strokeWidth", + "strokeOpacity", + "strokeDasharray", + "strokeDashoffset", + "strokeLinecap", + "strokeLinejoin", + "strokeMiterlimit", +]; export default function(props, styleProperties) { - strokeKeys.forEach(name => { + strokeProps.forEach(name => { if (props.hasOwnProperty(name)) { styleProperties.push(name); } diff --git a/lib/props.js b/lib/props.js deleted file mode 100644 index f8cff4d5..00000000 --- a/lib/props.js +++ /dev/null @@ -1,539 +0,0 @@ -import PropTypes from "prop-types"; -import { PanResponder } from "react-native"; - -const numberProp = PropTypes.oneOfType([PropTypes.string, PropTypes.number]); -const numberArrayProp = PropTypes.oneOfType([ - PropTypes.arrayOf(numberProp), - numberProp -]); - -const touchableProps = { - disabled: PropTypes.bool, - onPress: PropTypes.func, - onPressIn: PropTypes.func, - onPressOut: PropTypes.func, - onLongPress: PropTypes.func, - delayPressIn: PropTypes.number, - delayPressOut: PropTypes.number, - delayLongPress: PropTypes.number -}; - -const layoutProps = { - onLayout: PropTypes.func -}; - -const responderProps = [ - ...Object.keys(PanResponder.create({}).panHandlers), - "pointerEvents" -].reduce((props, name) => { - props[name] = PropTypes.func; - return props; -}, {}); - -const fillProps = { - fill: PropTypes.string, - fillOpacity: numberProp, - fillRule: PropTypes.oneOf(["evenodd", "nonzero"]) -}; - -const clipProps = { - clipRule: PropTypes.oneOf(["evenodd", "nonzero"]), - clipPath: PropTypes.string -}; - -const maskProps = { - mask: PropTypes.string -}; - -const definationProps = { - name: PropTypes.string -}; - -const strokeProps = { - stroke: PropTypes.string, - strokeWidth: numberProp, - strokeOpacity: numberProp, - strokeDasharray: numberArrayProp, - strokeDashoffset: numberProp, - strokeLinecap: PropTypes.oneOf(["butt", "square", "round"]), - strokeLinejoin: PropTypes.oneOf(["miter", "bevel", "round"]), - strokeMiterlimit: numberProp -}; - -const transformProps = { - scale: numberProp, - scaleX: numberProp, - scaleY: numberProp, - rotate: numberProp, - rotation: numberProp, - translate: numberProp, - translateX: numberProp, - translateY: numberProp, - x: numberProp, - y: numberProp, - origin: numberProp, - originX: numberProp, - originY: numberProp, - skew: numberProp, - skewX: numberProp, - skewY: numberProp, - transform: PropTypes.oneOfType([PropTypes.object, PropTypes.string]) -}; - -const pathProps = { - ...fillProps, - ...strokeProps, - ...clipProps, - ...maskProps, - ...transformProps, - ...responderProps, - ...touchableProps, - ...layoutProps, - ...definationProps -}; - -// normal | italic | oblique | inherit -// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-style -const fontStyle = PropTypes.oneOf(["normal", "italic", "oblique"]); - -// normal | small-caps | inherit -// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-variant -const fontVariant = PropTypes.oneOf(["normal", "small-caps"]); - -// normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 -// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-weight -const fontWeight = PropTypes.oneOf([ - "normal", - "bold", - "bolder", - "lighter", - "100", - "200", - "300", - "400", - "500", - "600", - "700", - "800", - "900" -]); - -// normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit -// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-stretch -const fontStretch = PropTypes.oneOf([ - "normal", - "wider", - "narrower", - "ultra-condensed", - "extra-condensed", - "condensed", - "semi-condensed", - "semi-expanded", - "expanded", - "extra-expanded", - "ultra-expanded" -]); - -// | | | | inherit -// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-size -const fontSize = numberProp; - -// [[ | ],]* [ | ] | inherit -// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-family -const fontFamily = PropTypes.string; - -/* - font syntax [ [ <'font-style'> || || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar - where = [ normal | small-caps ] - - Shorthand property for setting ‘font-style’, ‘font-variant’, - ‘font-weight’, ‘font-size’, ‘line-height’ and ‘font-family’. - - The ‘line-height’ property has no effect on text layout in SVG. - - Note: for the purposes of processing the ‘font’ property in SVG, - 'line-height' is assumed to be equal the value for property ‘font-size’ - - https://www.w3.org/TR/SVG11/text.html#FontProperty - https://developer.mozilla.org/en-US/docs/Web/CSS/font - https://drafts.csswg.org/css-fonts-3/#font-prop - https://www.w3.org/TR/CSS2/fonts.html#font-shorthand - https://www.w3.org/TR/CSS1/#font -*/ -const font = PropTypes.object; - -// start | middle | end | inherit -// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor -const textAnchor = PropTypes.oneOf(["start", "middle", "end"]); - -// none | underline | overline | line-through | blink | inherit -// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-decoration -const textDecoration = PropTypes.oneOf([ - "none", - "underline", - "overline", - "line-through", - "blink" -]); - -// normal | | inherit -// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/letter-spacing -const letterSpacing = numberProp; - -// normal | | inherit -// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/word-spacing -const wordSpacing = numberProp; - -// auto | | inherit -// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/kerning -const kerning = numberProp; - -/* -Name: font-variant-ligatures -Value: normal | none | [ || || || ] - Initial: normal - Applies to: all elements - Inherited: yes - Percentages: N/A - Media: visual - Computed value: as specified - Animatable: no - - Ligatures and contextual forms are ways of combining glyphs to produce more harmonized forms. - - = [ common-ligatures | no-common-ligatures ] - = [ discretionary-ligatures | no-discretionary-ligatures ] - = [ historical-ligatures | no-historical-ligatures ] - = [ contextual | no-contextual ] - - https://developer.mozilla.org/en/docs/Web/CSS/font-variant-ligatures - https://www.w3.org/TR/css-fonts-3/#font-variant-ligatures-prop -*/ -const fontVariantLigatures = PropTypes.oneOf(["normal", "none"]); - -const fontProps = { - fontStyle, - fontVariant, - fontWeight, - fontStretch, - fontSize, - fontFamily, - textAnchor, - textDecoration, - letterSpacing, - wordSpacing, - kerning, - fontVariantLigatures, - font -}; - -/* - Name Value Initial value Animatable - lengthAdjust spacing | spacingAndGlyphs spacing yes - https://svgwg.org/svg2-draft/text.html#TextElementLengthAdjustAttribute - https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/lengthAdjust - */ -const lengthAdjust = PropTypes.oneOf(["spacing", "spacingAndGlyphs"]); - -/* - Name Value Initial value Animatable - textLength | | See below yes - https://svgwg.org/svg2-draft/text.html#TextElementTextLengthAttribute - https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/textLength -*/ -const textLength = numberProp; - -/* - 2.2. Transverse Box Alignment: the vertical-align property - - Name: vertical-align - Value: <‘baseline-shift’> || <‘alignment-baseline’> - Initial: baseline - Applies to: inline-level boxes - Inherited: no - Percentages: N/A - Media: visual - Computed value: as specified - Canonical order: per grammar - Animation type: discrete - This shorthand property specifies how an inline-level box is aligned within the line. - Values are the same as for its longhand properties, see below. - - Authors should use this property (vertical-align) instead of its longhands. - - https://www.w3.org/TR/css-inline-3/#transverse-alignment - https://drafts.csswg.org/css-inline/#propdef-vertical-align - */ -const verticalAlign = numberProp; - -/* - Name: alignment-baseline - - 1.1 Value: auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | inherit - 2.0 Value: baseline | text-bottom | alphabetic | ideographic | middle | central | mathematical | text-top | bottom | center | top - Initial: baseline - Applies to: inline-level boxes, flex items, grid items, table cells - Inherited: no - Percentages: N/A - Media: visual - Computed value: as specified - Canonical order: per grammar - Animation type: discrete - https://drafts.csswg.org/css-inline/#propdef-alignment-baseline - https://www.w3.org/TR/SVG11/text.html#AlignmentBaselineProperty - https://svgwg.org/svg2-draft/text.html#AlignmentBaselineProperty - https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/alignment-baseline -*/ -const alignmentBaseline = PropTypes.oneOf([ - "baseline", - "text-bottom", - "alphabetic", - "ideographic", - "middle", - "central", - "mathematical", - "text-top", - "bottom", - "center", - "top", - "text-before-edge", - "text-after-edge", - "before-edge", - "after-edge", - "hanging" -]); - -/* - 2.2.2. Alignment Shift: baseline-shift longhand - - Name: baseline-shift - Value: | | sub | super - Initial: 0 - Applies to: inline-level boxes - Inherited: no - Percentages: refer to the used value of line-height - Media: visual - Computed value: absolute length, percentage, or keyword specified - Animation type: discrete - - This property specifies by how much the box is shifted up from its alignment point. - It does not apply when alignment-baseline is top or bottom. - - https://www.w3.org/TR/css-inline-3/#propdef-baseline-shift -*/ -const baselineShift = PropTypes.oneOfType([ - PropTypes.oneOf(["sub", "super", "baseline"]), - PropTypes.arrayOf(numberProp), - numberProp -]); - -/* - 6.12. Low-level font feature settings control: the font-feature-settings property - - Name: font-feature-settings - Value: normal | # - Initial: normal - Applies to: all elements - Inherited: yes - Percentages: N/A - Media: visual - Computed value: as specified - Animatable: no - - This property provides low-level control over OpenType font features. - - It is intended as a way of providing access to font features - that are not widely used but are needed for a particular use case. - - Authors should generally use ‘font-variant’ and its related subproperties - whenever possible and only use this property for special cases where its use - is the only way of accessing a particular infrequently used font feature. - - enable small caps and use second swash alternate - font-feature-settings: "smcp", "swsh" 2; - A value of ‘normal’ means that no change in glyph selection or positioning occurs due to this property. - - Feature tag values have the following syntax: - - = [ | on | off ]? - The is a case-sensitive OpenType feature tag. As specified in the OpenType specification, - feature tags contain four ASCII characters. - - Tag strings longer or shorter than four characters, - or containing characters outside the U+20–7E codepoint range are invalid. - - Feature tags need only match a feature tag defined in the font, - so they are not limited to explicitly registered OpenType features. - - Fonts defining custom feature tags should follow the tag name rules - defined in the OpenType specification [OPENTYPE-FEATURES]. - - Feature tags not present in the font are ignored; - a user agent must not attempt to synthesize fallback behavior based on these feature tags. - - The one exception is that user agents may synthetically support the kern feature with fonts - that contain kerning data in the form of a ‘kern’ table but lack kern feature support in the ‘GPOS’ table. - - In general, authors should use the ‘font-kerning’ property to explicitly enable or disable kerning - since this property always affects fonts with either type of kerning data. - - If present, a value indicates an index used for glyph selection. - - An value must be 0 or greater. - - A value of 0 indicates that the feature is disabled. - - For boolean features, a value of 1 enables the feature. - - For non-boolean features, a value of 1 or greater enables the feature and indicates the feature selection index. - - A value of ‘on’ is synonymous with 1 and ‘off’ is synonymous with 0. - - If the value is omitted, a value of 1 is assumed. - - font-feature-settings: "dlig" 1; /* dlig=1 enable discretionary ligatures * / - font-feature-settings: "smcp" on; /* smcp=1 enable small caps * / - font-feature-settings: 'c2sc'; /* c2sc=1 enable caps to small caps * / - font-feature-settings: "liga" off; /* liga=0 no common ligatures * / - font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 enable tabular numbers and historical forms * / - font-feature-settings: "tnum" "hist"; /* invalid, need a comma-delimited list * / - font-feature-settings: "silly" off; /* invalid, tag too long * / - font-feature-settings: "PKRN"; /* PKRN=1 enable custom feature * / - font-feature-settings: dlig; /* invalid, tag must be a string * / - - When values greater than the range supported by the font are specified, the behavior is explicitly undefined. - - For boolean features, in general these will enable the feature. - - For non-boolean features, out of range values will in general be equivalent to a 0 value. - - However, in both cases the exact behavior will depend upon the way the font is designed - (specifically, which type of lookup is used to define the feature). - - Although specifically defined for OpenType feature tags, - feature tags for other modern font formats that support font features may be added in the future. - - Where possible, features defined for other font formats - should attempt to follow the pattern of registered OpenType tags. - - The Japanese text below will be rendered with half-width kana characters: - - body { font-feature-settings: "hwid"; /* Half-width OpenType feature * / } - -

毎日カレー食べてるのに、飽きない

- - https://drafts.csswg.org/css-fonts-3/#propdef-font-feature-settings - https://developer.mozilla.org/en/docs/Web/CSS/font-feature-settings -*/ -const fontFeatureSettings = PropTypes.string; - -const textSpecificProps = { - ...pathProps, - ...fontProps, - alignmentBaseline, - baselineShift, - verticalAlign, - lengthAdjust, - textLength, - fontData: PropTypes.object, - fontFeatureSettings -}; - -// https://svgwg.org/svg2-draft/text.html#TSpanAttributes -const textProps = { - ...textSpecificProps, - dx: numberArrayProp, - dy: numberArrayProp -}; - -/* - Name - side - Value - left | right - initial value - left - Animatable - yes - https://svgwg.org/svg2-draft/text.html#TextPathElementSideAttribute -*/ -const side = PropTypes.oneOf(["left", "right"]); - -/* - Name - startOffset - Value - | | - initial value - 0 - Animatable - yes - https://svgwg.org/svg2-draft/text.html#TextPathElementStartOffsetAttribute - https://developer.mozilla.org/en/docs/Web/SVG/Element/textPath - */ -const startOffset = numberProp; - -/* - Name - method - Value - align | stretch - initial value - align - Animatable - yes - https://svgwg.org/svg2-draft/text.html#TextPathElementMethodAttribute - https://developer.mozilla.org/en/docs/Web/SVG/Element/textPath - */ -const method = PropTypes.oneOf(["align", "stretch"]); - -/* - Name - spacing - Value - auto | exact - initial value - exact - Animatable - yes - https://svgwg.org/svg2-draft/text.html#TextPathElementSpacingAttribute - https://developer.mozilla.org/en/docs/Web/SVG/Element/textPath - */ -const spacing = PropTypes.oneOf(["auto", "exact"]); - -/* - Name - mid-line - Value - sharp | smooth - initial value - smooth - Animatable - yes - */ -const midLine = PropTypes.oneOf(["sharp", "smooth"]); - -// https://svgwg.org/svg2-draft/text.html#TextPathAttributes -// https://developer.mozilla.org/en/docs/Web/SVG/Element/textPath -const textPathProps = { - ...textSpecificProps, - href: PropTypes.string.isRequired, - startOffset, - method, - spacing, - side, - midLine -}; - -export { - numberProp, - fillProps, - strokeProps, - fontProps, - textProps, - textPathProps, - clipProps, - pathProps, - responderProps, - touchableProps -};