diff --git a/extensions/imagesvg/package.json b/extensions/imagesvg/package.json index 1c2898ea8..ccece76a6 100644 --- a/extensions/imagesvg/package.json +++ b/extensions/imagesvg/package.json @@ -1,6 +1,6 @@ { "name": "reactxp-imagesvg", - "version": "1.3.2", + "version": "1.3.4", "description": "Plugin for ReactXP that provides support for SVG (scalable vector graphics) for all platforms", "author": "ReactXP Team ", "license": "MIT", @@ -10,21 +10,21 @@ }, "dependencies": { "assert": "1.3.0", - "react-native-svg": "6.3.1" + "react-native-svg": "^6.3.1" }, "peerDependencies": { - "react": "^16.4.0", - "react-dom": "^16.4.0", - "react-native": "^0.55.0", + "react": "^16.3.1", + "react-dom": "^16.3.1", + "react-native": "^0.55.4", "react-native-windows": "^0.54.0" }, "devDependencies": { - "@types/react-native": "0.55.26", "@types/node": "10.5.0", - "reactxp": "1.3.0", - "tslint": "5.10.0", - "tslint-microsoft-contrib": "5.0.3", - "typescript": "2.9.2" + "@types/react-native": "0.55.26", + "reactxp": "^1.3.2", + "tslint": "^5.11.0", + "tslint-microsoft-contrib": "^5.2.1", + "typescript": "^2.9" }, "types": "dist/web/PluginBase.d.ts" } diff --git a/extensions/imagesvg/src/android/PluginBase.tsx b/extensions/imagesvg/src/android/PluginBase.tsx index 5080b2ff8..99d75adb6 100644 --- a/extensions/imagesvg/src/android/PluginBase.tsx +++ b/extensions/imagesvg/src/android/PluginBase.tsx @@ -10,5 +10,7 @@ import * as Types from '../common/Types'; import ImageSvg from '../native-common/ImageSvg'; import SvgPath from '../native-common/SvgPath'; import SvgRect from '../native-common/SvgRect'; +import SvgPolygon from '../native-common/SvgPolygon'; +import SvgCircle from '../native-common/SvgCircle'; -export { ImageSvg as default, SvgPath, SvgRect, Types }; +export { ImageSvg as default, SvgPath, SvgRect, SvgPolygon, SvgCircle, Types }; diff --git a/extensions/imagesvg/src/common/Interfaces.ts b/extensions/imagesvg/src/common/Interfaces.ts index 79c7b2f07..9b42a849d 100644 --- a/extensions/imagesvg/src/common/Interfaces.ts +++ b/extensions/imagesvg/src/common/Interfaces.ts @@ -10,14 +10,11 @@ import * as React from 'react'; import * as Types from './Types'; -export abstract class ImageSvg extends React.Component { -} +export abstract class ImageSvg extends React.Component {} -export abstract class SvgPath extends React.Component { -} +export abstract class SvgPath extends React.Component {} -export abstract class SvgRect extends React.Component { -} +export abstract class SvgRect extends React.Component {} export interface PluginInterface { Types: typeof Types; diff --git a/extensions/imagesvg/src/common/Types.ts b/extensions/imagesvg/src/common/Types.ts index 40edf568f..725749ba4 100644 --- a/extensions/imagesvg/src/common/Types.ts +++ b/extensions/imagesvg/src/common/Types.ts @@ -8,8 +8,7 @@ import { Types as RXTypes } from 'reactxp'; -export interface ImageSvgStyle extends RXTypes.ViewStyle { -} +export interface ImageSvgStyle extends RXTypes.ViewStyle {} export declare type ImageSvgStyleRuleSet = RXTypes.StyleRuleSet; export interface SvgCommonProps { @@ -40,3 +39,12 @@ export interface SvgRectProps extends SvgCommonProps { x: number; y: number; } +export interface SvgCircleProps extends SvgCommonProps { + cx: number; + cy: number; + r: number; +} + +export interface SvgPolygonProps extends SvgCommonProps { + points: string; +} diff --git a/extensions/imagesvg/src/ios/PluginBase.tsx b/extensions/imagesvg/src/ios/PluginBase.tsx index 80f587975..9d4ab930c 100644 --- a/extensions/imagesvg/src/ios/PluginBase.tsx +++ b/extensions/imagesvg/src/ios/PluginBase.tsx @@ -10,5 +10,7 @@ import * as Types from '../common/Types'; import ImageSvg from '../native-common/ImageSvg'; import SvgPath from '../native-common/SvgPath'; import SvgRect from '../native-common/SvgRect'; +import SvgPolygon from '../native-common/SvgPolygon'; +import SvgCircle from '../native-common/SvgCircle'; -export { ImageSvg as default, SvgPath, SvgRect, Types }; +export { ImageSvg as default, SvgPath, SvgRect, SvgPolygon, SvgCircle, Types }; diff --git a/extensions/imagesvg/src/macos/PluginBase.tsx b/extensions/imagesvg/src/macos/PluginBase.tsx index 80f587975..9d4ab930c 100644 --- a/extensions/imagesvg/src/macos/PluginBase.tsx +++ b/extensions/imagesvg/src/macos/PluginBase.tsx @@ -10,5 +10,7 @@ import * as Types from '../common/Types'; import ImageSvg from '../native-common/ImageSvg'; import SvgPath from '../native-common/SvgPath'; import SvgRect from '../native-common/SvgRect'; +import SvgPolygon from '../native-common/SvgPolygon'; +import SvgCircle from '../native-common/SvgCircle'; -export { ImageSvg as default, SvgPath, SvgRect, Types }; +export { ImageSvg as default, SvgPath, SvgRect, SvgPolygon, SvgCircle, Types }; diff --git a/extensions/imagesvg/src/native-common/ImageSvg.tsx b/extensions/imagesvg/src/native-common/ImageSvg.tsx index cf866e59c..2579cacc3 100644 --- a/extensions/imagesvg/src/native-common/ImageSvg.tsx +++ b/extensions/imagesvg/src/native-common/ImageSvg.tsx @@ -1,4 +1,4 @@ -/** +/** * ImageSvg.tsx * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT license. @@ -10,6 +10,7 @@ import * as assert from 'assert'; import * as React from 'react'; import * as RNSvg from 'react-native-svg'; +import * as RN from 'react-native'; import { ImageSvgProps } from '../common/Types'; @@ -20,14 +21,14 @@ export class ImageSvg extends React.Component { if (this.props.width > 0 && this.props.height > 0) { return ( } + opacity={this.props.strokeOpacity} + preserveAspectRatio={this.props.preserveAspectRatio} + viewBox={this.props.viewBox} > - { this.props.children } + {this.props.children} ); } diff --git a/extensions/imagesvg/src/native-common/SvgCircle.tsx b/extensions/imagesvg/src/native-common/SvgCircle.tsx new file mode 100644 index 000000000..b29085828 --- /dev/null +++ b/extensions/imagesvg/src/native-common/SvgCircle.tsx @@ -0,0 +1,31 @@ +/** + * SvgCircle.tsx + * Licensed under the MIT license. + * + * RN-specific implementation of the cross-platform abstraction for + * SVG Circle elements. + */ + +import * as React from 'react'; +import * as RNSvg from 'react-native-svg'; + +import { SvgCircleProps } from '../common/Types'; + +export class SvgCircle extends React.Component { + render() { + return ( + + ); + } +} + +export default SvgCircle; diff --git a/extensions/imagesvg/src/native-common/SvgPath.tsx b/extensions/imagesvg/src/native-common/SvgPath.tsx index d76ef8a59..f95d8fab7 100644 --- a/extensions/imagesvg/src/native-common/SvgPath.tsx +++ b/extensions/imagesvg/src/native-common/SvgPath.tsx @@ -16,12 +16,12 @@ export class SvgPath extends React.Component { render() { return ( ); } diff --git a/extensions/imagesvg/src/native-common/SvgPolygon.tsx b/extensions/imagesvg/src/native-common/SvgPolygon.tsx new file mode 100644 index 000000000..e348531c2 --- /dev/null +++ b/extensions/imagesvg/src/native-common/SvgPolygon.tsx @@ -0,0 +1,29 @@ +/** + * SvgPolygon.tsx + * Licensed under the MIT license. + * + * RN-specific implementation of the cross-platform abstraction for + * SVG Polygon elements. + */ + +import * as React from 'react'; +import * as RNSvg from 'react-native-svg'; + +import { SvgPolygonProps } from '../common/Types'; + +export class SvgPolygon extends React.Component { + render() { + return ( + + ); + } +} + +export default SvgPolygon; diff --git a/extensions/imagesvg/src/native-common/SvgRect.tsx b/extensions/imagesvg/src/native-common/SvgRect.tsx index fefaad3dd..c4a43f3e9 100644 --- a/extensions/imagesvg/src/native-common/SvgRect.tsx +++ b/extensions/imagesvg/src/native-common/SvgRect.tsx @@ -16,15 +16,15 @@ export class SvgRect extends React.Component { render() { return ( ); } diff --git a/extensions/imagesvg/src/typings/react-native-svg.d.ts b/extensions/imagesvg/src/typings/react-native-svg.d.ts deleted file mode 100644 index 035f510fd..000000000 --- a/extensions/imagesvg/src/typings/react-native-svg.d.ts +++ /dev/null @@ -1,70 +0,0 @@ -/** - * react-native-svg.d.ts - * Copyright (c) Microsoft Corporation. All rights reserved. - * Licensed under the MIT license. - * - * Type definition file for the React Native SVG module. - * https://github.com/react-native-community/react-native-svg - */ - -declare module 'react-native-svg' { - - import * as React from 'react'; - import * as RN from 'react-native'; - - type ArrayType = [string] | [number]; - - interface SvgProps extends RN.ComponentPropsBase { - height?: string, - width?: string, - viewBox?: string, - opacity?: number, - preserveAspectRatio?: string; - style?: RN.StyleRuleSet; - } - - interface BaseProps extends RN.ComponentPropsBase { - fill?: string, //The fill prop refers to the color inside the shape. - fillOpacity?: number, // This prop specifies the opacity of the color or the content the current object is filled with. - stroke?: string, //The stroke prop controls how the outline of a shape appears. - strokeWidth?: number, //The strokeWidth prop specifies the width of the outline on the current object. - strokeOpacity?: number, //The strokeOpacity prop specifies the opacity of the outline on the current object. - x?: number, - y?: number, - strokeLinecap?: string, //oneOf(['butt', 'square', 'round']), - strokeCap?: string, //.oneOf(['butt', 'square', 'round']), - strokeLinejoin?: string, //oneOf(['miter', 'bevel', 'round']), - strokeJoin?: string, //.oneOf(['miter', 'bevel', 'round']), - strokeDasharray?: ArrayType, - scale?: number, //Scale value on the current object. - rotate?: number, //Rotation degree value on the current object. - originX?: number, //Transform originX coordinates for the current object. - originY?: number //Transform originY coordinates for the current object. - } - - interface TransformProps extends BaseProps { - scaleX: number, - scaleY: number, - transform: number, - } - - interface PathProps extends BaseProps { - d: string - } - - interface RectProps extends BaseProps { - width?: number, - height?: number - } - - interface TextProps extends BaseProps { - textAnchor: ('start' | 'middle' | 'end'), - fontFamily: string, - fontSize: number, - } - - export class Svg extends React.Component { } - export class Path extends React.Component { } - export class Rect extends React.Component { } - export class Text extends React.Component { } -} diff --git a/extensions/imagesvg/src/web/ImageSvg.tsx b/extensions/imagesvg/src/web/ImageSvg.tsx index fffeb8d4d..3fa328c13 100644 --- a/extensions/imagesvg/src/web/ImageSvg.tsx +++ b/extensions/imagesvg/src/web/ImageSvg.tsx @@ -18,10 +18,13 @@ export class ImageSvg extends React.Component { assert.ok(this.props.width && this.props.height, 'The width and height on imagesvg are mandatory.'); if (this.props.width > 0 && this.props.height > 0) { - let combinedStyles = RXStyles.combine([{ - display: 'flex', - position: 'relative' - }, this.props.style]) as any; + let combinedStyles = RXStyles.combine([ + { + display: 'flex', + position: 'relative' + }, + this.props.style + ]) as any; if (this.props.fillColor !== undefined) { combinedStyles.fill = this.props.fillColor; @@ -61,13 +64,8 @@ export class ImageSvg extends React.Component { } return ( - - { this.props.children } + + {this.props.children} ); } else { diff --git a/extensions/imagesvg/src/web/PluginBase.ts b/extensions/imagesvg/src/web/PluginBase.ts index 1262d55f3..d97e03aa5 100644 --- a/extensions/imagesvg/src/web/PluginBase.ts +++ b/extensions/imagesvg/src/web/PluginBase.ts @@ -10,5 +10,7 @@ import * as Types from '../common/Types'; import ImageSvg from './ImageSvg'; import SvgPath from './SvgPath'; import SvgRect from './SvgRect'; +import SvgCircle from './SvgCircle'; +import SvgPolygon from './SvgPolygon'; -export { ImageSvg as default, SvgPath, SvgRect, Types }; +export { ImageSvg as default, SvgPath, SvgRect, SvgPolygon, SvgCircle, Types }; diff --git a/extensions/imagesvg/src/web/SvgCircle.tsx b/extensions/imagesvg/src/web/SvgCircle.tsx new file mode 100644 index 000000000..040fef084 --- /dev/null +++ b/extensions/imagesvg/src/web/SvgCircle.tsx @@ -0,0 +1,31 @@ +/* + * SvgCircle.tsx + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT license. + * + * Web-specific implementation of the cross-platform abstraction for + * SVG Rect elements. + */ + +import * as React from 'react'; + +import { SvgCircleProps } from '../common/Types'; + +export class SvgCircle extends React.Component { + render() { + return ( + + ); + } +} + +export default SvgCircle; diff --git a/extensions/imagesvg/src/web/SvgPath.tsx b/extensions/imagesvg/src/web/SvgPath.tsx index b154530b0..a035d7ead 100644 --- a/extensions/imagesvg/src/web/SvgPath.tsx +++ b/extensions/imagesvg/src/web/SvgPath.tsx @@ -15,12 +15,12 @@ export class SvgPath extends React.Component { render() { return ( ); } diff --git a/extensions/imagesvg/src/web/SvgPolygon.tsx b/extensions/imagesvg/src/web/SvgPolygon.tsx new file mode 100644 index 000000000..5c1b5acef --- /dev/null +++ b/extensions/imagesvg/src/web/SvgPolygon.tsx @@ -0,0 +1,29 @@ +/* + * SvgPolygon.tsx + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT license. + * + * Web-specific implementation of the cross-platform abstraction for + * SVG Rect elements. + */ + +import * as React from 'react'; + +import { SvgPolygonProps } from '../common/Types'; + +export class SvgPolygon extends React.Component { + render() { + return ( + + ); + } +} + +export default SvgPolygon; diff --git a/extensions/imagesvg/src/web/SvgRect.tsx b/extensions/imagesvg/src/web/SvgRect.tsx index 922176953..2bef67798 100644 --- a/extensions/imagesvg/src/web/SvgRect.tsx +++ b/extensions/imagesvg/src/web/SvgRect.tsx @@ -15,15 +15,15 @@ export class SvgRect extends React.Component { render() { return ( ); } diff --git a/extensions/imagesvg/src/windows/PluginBase.ts b/extensions/imagesvg/src/windows/PluginBase.ts index 9755a7ced..378f84a31 100644 --- a/extensions/imagesvg/src/windows/PluginBase.ts +++ b/extensions/imagesvg/src/windows/PluginBase.ts @@ -10,5 +10,7 @@ import * as Types from '../common/Types'; import ImageSvg from './ImageSvg'; import SvgPath from './SvgPath'; import SvgRect from './SvgRect'; +import SvgCircle from './SvgCircle'; +import SvgPolygon from './SvgPolygon'; -export { ImageSvg as default, SvgPath, SvgRect, Types }; +export { ImageSvg as default, SvgPath, SvgRect, SvgPolygon, SvgCircle, Types }; diff --git a/extensions/imagesvg/src/windows/SvgCircle.tsx b/extensions/imagesvg/src/windows/SvgCircle.tsx new file mode 100644 index 000000000..c5b7ed2ff --- /dev/null +++ b/extensions/imagesvg/src/windows/SvgCircle.tsx @@ -0,0 +1,22 @@ +/* + * SvgCircle.tsx + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT license. + * + * RN-specific implementation of the cross-platform abstraction for + * SVG Path elements. + */ + +import * as React from 'react'; + +import { SvgCircleProps } from '../common/Types'; + +// TODO: #694092 Not implemented + +export class SvgCircle extends React.Component { + render(): any { + return null; + } +} + +export default SvgCircle; diff --git a/extensions/imagesvg/src/windows/SvgPolygon.tsx b/extensions/imagesvg/src/windows/SvgPolygon.tsx new file mode 100644 index 000000000..48e2b3924 --- /dev/null +++ b/extensions/imagesvg/src/windows/SvgPolygon.tsx @@ -0,0 +1,22 @@ +/* + * SvgPolygon.tsx + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT license. + * + * RN-specific implementation of the cross-platform abstraction for + * SVG Path elements. + */ + +import * as React from 'react'; + +import { SvgPolygonProps } from '../common/Types'; + +// TODO: #694092 Not implemented + +export class SvgPolygon extends React.Component { + render(): any { + return null; + } +} + +export default SvgPolygon; diff --git a/extensions/imagesvg/tslint.json b/extensions/imagesvg/tslint.json index 4b3bebb5d..17c7de9d8 100644 --- a/extensions/imagesvg/tslint.json +++ b/extensions/imagesvg/tslint.json @@ -5,7 +5,7 @@ "curly": true, "eofline": true, "forin": true, - "indent": [true, "spaces"], + "indent": [true, "spaces", 4], "interface-name": [true, "never-prefix"], "label-position": true, "max-line-length": [ true, 140 ], @@ -47,4 +47,4 @@ "check-type" ] } -} \ No newline at end of file +}