From 72602734aacbf176e50295b0f43e1f63f6fa2a06 Mon Sep 17 00:00:00 2001 From: Thomas Kroeber Date: Sat, 15 Sep 2018 10:29:04 +0200 Subject: [PATCH 1/8] feat: support for svg circle and svg polygon --- extensions/imagesvg/package.json | 2 +- .../imagesvg/src/android/PluginBase.tsx | 4 +- extensions/imagesvg/src/common/Types.ts | 54 ++++++++------ extensions/imagesvg/src/ios/PluginBase.tsx | 4 +- extensions/imagesvg/src/macos/PluginBase.tsx | 4 +- .../imagesvg/src/native-common/ImageSvg.tsx | 42 ++++++----- .../imagesvg/src/native-common/SvgCircle.tsx | 31 ++++++++ .../imagesvg/src/native-common/SvgPath.tsx | 24 +++---- .../imagesvg/src/native-common/SvgPolygon.tsx | 29 ++++++++ .../src/typings/react-native-svg.d.ts | 70 ------------------- extensions/imagesvg/src/web/PluginBase.ts | 4 +- extensions/imagesvg/src/web/SvgCircle.tsx | 31 ++++++++ extensions/imagesvg/src/web/SvgPolygon.tsx | 29 ++++++++ extensions/imagesvg/src/windows/PluginBase.ts | 4 +- extensions/imagesvg/src/windows/SvgCircle.tsx | 22 ++++++ extensions/imagesvg/src/windows/SvgPath.tsx | 6 +- .../imagesvg/src/windows/SvgPolygon.tsx | 22 ++++++ 17 files changed, 250 insertions(+), 132 deletions(-) create mode 100644 extensions/imagesvg/src/native-common/SvgCircle.tsx create mode 100644 extensions/imagesvg/src/native-common/SvgPolygon.tsx delete mode 100644 extensions/imagesvg/src/typings/react-native-svg.d.ts create mode 100644 extensions/imagesvg/src/web/SvgCircle.tsx create mode 100644 extensions/imagesvg/src/web/SvgPolygon.tsx create mode 100644 extensions/imagesvg/src/windows/SvgCircle.tsx create mode 100644 extensions/imagesvg/src/windows/SvgPolygon.tsx diff --git a/extensions/imagesvg/package.json b/extensions/imagesvg/package.json index 1c2898ea8..617114f24 100644 --- a/extensions/imagesvg/package.json +++ b/extensions/imagesvg/package.json @@ -19,8 +19,8 @@ "react-native-windows": "^0.54.0" }, "devDependencies": { - "@types/react-native": "0.55.26", "@types/node": "10.5.0", + "@types/react-native": "0.55.26", "reactxp": "1.3.0", "tslint": "5.10.0", "tslint-microsoft-contrib": "5.0.3", 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/Types.ts b/extensions/imagesvg/src/common/Types.ts index 40edf568f..398d95eb9 100644 --- a/extensions/imagesvg/src/common/Types.ts +++ b/extensions/imagesvg/src/common/Types.ts @@ -8,35 +8,45 @@ 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 { - key?: string | number; - strokeColor?: string; - strokeWidth?: number; - strokeOpacity?: number; - fillColor?: string; - fillOpacity?: number; + key?: string | number; + strokeColor?: string; + strokeWidth?: number; + strokeOpacity?: number; + fillColor?: string; + fillOpacity?: number; } -export interface ImageSvgProps extends SvgCommonProps, RXTypes.CommonStyledProps { - children?: RXTypes.ReactNode; - height: number; - width: number; - accessibilityLabel?: string; - title?: string; - viewBox?: string; - preserveAspectRatio?: string; - webShadow?: string; +export interface ImageSvgProps + extends SvgCommonProps, + RXTypes.CommonStyledProps { + children?: RXTypes.ReactNode; + height: number; + width: number; + accessibilityLabel?: string; + title?: string; + viewBox?: string; + preserveAspectRatio?: string; + webShadow?: string; } export interface SvgPathProps extends SvgCommonProps { - d?: string; + d?: string; } export interface SvgRectProps extends SvgCommonProps { - width: number; - height: number; - x: number; - y: number; + width: number; + height: number; + 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..fe059d24e 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,30 +10,34 @@ 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'; export class ImageSvg extends React.Component { - render() { - assert.ok(this.props.width && this.props.height, 'The width and height on imagesvg are mandatory.'); + render() { + 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) { - return ( - - { this.props.children } - - ); - } - - return null; + 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} + + ); } + + return null; + } } export default ImageSvg; diff --git a/extensions/imagesvg/src/native-common/SvgCircle.tsx b/extensions/imagesvg/src/native-common/SvgCircle.tsx new file mode 100644 index 000000000..f9d63ed53 --- /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..6e2464a44 100644 --- a/extensions/imagesvg/src/native-common/SvgPath.tsx +++ b/extensions/imagesvg/src/native-common/SvgPath.tsx @@ -13,18 +13,18 @@ import * as RNSvg from 'react-native-svg'; import { SvgPathProps } from '../common/Types'; export class SvgPath extends React.Component { - render() { - return ( - - ); - } + render() { + return ( + + ); + } } export default SvgPath; diff --git a/extensions/imagesvg/src/native-common/SvgPolygon.tsx b/extensions/imagesvg/src/native-common/SvgPolygon.tsx new file mode 100644 index 000000000..39a836a5e --- /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/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/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..f4bee0617 --- /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/SvgPolygon.tsx b/extensions/imagesvg/src/web/SvgPolygon.tsx new file mode 100644 index 000000000..3b47c94bb --- /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/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..f16c49bd7 --- /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/SvgPath.tsx b/extensions/imagesvg/src/windows/SvgPath.tsx index fecabb851..5342d20d7 100644 --- a/extensions/imagesvg/src/windows/SvgPath.tsx +++ b/extensions/imagesvg/src/windows/SvgPath.tsx @@ -14,9 +14,9 @@ import { SvgPathProps } from '../common/Types'; // TODO: #694092 Not implemented export class SvgPath extends React.Component { - render(): any { - return null; - } + render(): any { + return null; + } } export default SvgPath; diff --git a/extensions/imagesvg/src/windows/SvgPolygon.tsx b/extensions/imagesvg/src/windows/SvgPolygon.tsx new file mode 100644 index 000000000..aa7d372fd --- /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; From 9e5c74e4dfd8daafcd3d03dc9fd9db12690c9174 Mon Sep 17 00:00:00 2001 From: Thomas Kroeber Date: Sun, 16 Sep 2018 00:29:55 +0200 Subject: [PATCH 2/8] circle implementation was wrong in web --- extensions/imagesvg/src/web/SvgCircle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extensions/imagesvg/src/web/SvgCircle.tsx b/extensions/imagesvg/src/web/SvgCircle.tsx index f4bee0617..df0161346 100644 --- a/extensions/imagesvg/src/web/SvgCircle.tsx +++ b/extensions/imagesvg/src/web/SvgCircle.tsx @@ -14,7 +14,7 @@ import { SvgCircleProps } from '../common/Types'; export class SvgCircle extends React.Component { render() { return ( - Date: Sat, 15 Sep 2018 10:29:04 +0200 Subject: [PATCH 3/8] feat: support for svg circle and svg polygon --- extensions/imagesvg/package.json | 2 +- .../imagesvg/src/android/PluginBase.tsx | 4 +- extensions/imagesvg/src/common/Types.ts | 54 ++++++++------ extensions/imagesvg/src/ios/PluginBase.tsx | 4 +- extensions/imagesvg/src/macos/PluginBase.tsx | 4 +- .../imagesvg/src/native-common/ImageSvg.tsx | 42 ++++++----- .../imagesvg/src/native-common/SvgCircle.tsx | 31 ++++++++ .../imagesvg/src/native-common/SvgPath.tsx | 24 +++---- .../imagesvg/src/native-common/SvgPolygon.tsx | 29 ++++++++ .../src/typings/react-native-svg.d.ts | 70 ------------------- extensions/imagesvg/src/web/PluginBase.ts | 4 +- extensions/imagesvg/src/web/SvgCircle.tsx | 31 ++++++++ extensions/imagesvg/src/web/SvgPolygon.tsx | 29 ++++++++ extensions/imagesvg/src/windows/PluginBase.ts | 4 +- extensions/imagesvg/src/windows/SvgCircle.tsx | 22 ++++++ extensions/imagesvg/src/windows/SvgPath.tsx | 6 +- .../imagesvg/src/windows/SvgPolygon.tsx | 22 ++++++ 17 files changed, 250 insertions(+), 132 deletions(-) create mode 100644 extensions/imagesvg/src/native-common/SvgCircle.tsx create mode 100644 extensions/imagesvg/src/native-common/SvgPolygon.tsx delete mode 100644 extensions/imagesvg/src/typings/react-native-svg.d.ts create mode 100644 extensions/imagesvg/src/web/SvgCircle.tsx create mode 100644 extensions/imagesvg/src/web/SvgPolygon.tsx create mode 100644 extensions/imagesvg/src/windows/SvgCircle.tsx create mode 100644 extensions/imagesvg/src/windows/SvgPolygon.tsx diff --git a/extensions/imagesvg/package.json b/extensions/imagesvg/package.json index 1c2898ea8..617114f24 100644 --- a/extensions/imagesvg/package.json +++ b/extensions/imagesvg/package.json @@ -19,8 +19,8 @@ "react-native-windows": "^0.54.0" }, "devDependencies": { - "@types/react-native": "0.55.26", "@types/node": "10.5.0", + "@types/react-native": "0.55.26", "reactxp": "1.3.0", "tslint": "5.10.0", "tslint-microsoft-contrib": "5.0.3", 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/Types.ts b/extensions/imagesvg/src/common/Types.ts index 40edf568f..398d95eb9 100644 --- a/extensions/imagesvg/src/common/Types.ts +++ b/extensions/imagesvg/src/common/Types.ts @@ -8,35 +8,45 @@ 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 { - key?: string | number; - strokeColor?: string; - strokeWidth?: number; - strokeOpacity?: number; - fillColor?: string; - fillOpacity?: number; + key?: string | number; + strokeColor?: string; + strokeWidth?: number; + strokeOpacity?: number; + fillColor?: string; + fillOpacity?: number; } -export interface ImageSvgProps extends SvgCommonProps, RXTypes.CommonStyledProps { - children?: RXTypes.ReactNode; - height: number; - width: number; - accessibilityLabel?: string; - title?: string; - viewBox?: string; - preserveAspectRatio?: string; - webShadow?: string; +export interface ImageSvgProps + extends SvgCommonProps, + RXTypes.CommonStyledProps { + children?: RXTypes.ReactNode; + height: number; + width: number; + accessibilityLabel?: string; + title?: string; + viewBox?: string; + preserveAspectRatio?: string; + webShadow?: string; } export interface SvgPathProps extends SvgCommonProps { - d?: string; + d?: string; } export interface SvgRectProps extends SvgCommonProps { - width: number; - height: number; - x: number; - y: number; + width: number; + height: number; + 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..fe059d24e 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,30 +10,34 @@ 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'; export class ImageSvg extends React.Component { - render() { - assert.ok(this.props.width && this.props.height, 'The width and height on imagesvg are mandatory.'); + render() { + 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) { - return ( - - { this.props.children } - - ); - } - - return null; + 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} + + ); } + + return null; + } } export default ImageSvg; diff --git a/extensions/imagesvg/src/native-common/SvgCircle.tsx b/extensions/imagesvg/src/native-common/SvgCircle.tsx new file mode 100644 index 000000000..f9d63ed53 --- /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..6e2464a44 100644 --- a/extensions/imagesvg/src/native-common/SvgPath.tsx +++ b/extensions/imagesvg/src/native-common/SvgPath.tsx @@ -13,18 +13,18 @@ import * as RNSvg from 'react-native-svg'; import { SvgPathProps } from '../common/Types'; export class SvgPath extends React.Component { - render() { - return ( - - ); - } + render() { + return ( + + ); + } } export default SvgPath; diff --git a/extensions/imagesvg/src/native-common/SvgPolygon.tsx b/extensions/imagesvg/src/native-common/SvgPolygon.tsx new file mode 100644 index 000000000..39a836a5e --- /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/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/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..f4bee0617 --- /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/SvgPolygon.tsx b/extensions/imagesvg/src/web/SvgPolygon.tsx new file mode 100644 index 000000000..3b47c94bb --- /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/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..f16c49bd7 --- /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/SvgPath.tsx b/extensions/imagesvg/src/windows/SvgPath.tsx index fecabb851..5342d20d7 100644 --- a/extensions/imagesvg/src/windows/SvgPath.tsx +++ b/extensions/imagesvg/src/windows/SvgPath.tsx @@ -14,9 +14,9 @@ import { SvgPathProps } from '../common/Types'; // TODO: #694092 Not implemented export class SvgPath extends React.Component { - render(): any { - return null; - } + render(): any { + return null; + } } export default SvgPath; diff --git a/extensions/imagesvg/src/windows/SvgPolygon.tsx b/extensions/imagesvg/src/windows/SvgPolygon.tsx new file mode 100644 index 000000000..aa7d372fd --- /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; From a29349bd761f5cb44bec91211804edc83b6fe8a2 Mon Sep 17 00:00:00 2001 From: Thomas Kroeber Date: Sun, 16 Sep 2018 00:29:55 +0200 Subject: [PATCH 4/8] circle implementation was wrong in web --- extensions/imagesvg/src/web/SvgCircle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extensions/imagesvg/src/web/SvgCircle.tsx b/extensions/imagesvg/src/web/SvgCircle.tsx index f4bee0617..df0161346 100644 --- a/extensions/imagesvg/src/web/SvgCircle.tsx +++ b/extensions/imagesvg/src/web/SvgCircle.tsx @@ -14,7 +14,7 @@ import { SvgCircleProps } from '../common/Types'; export class SvgCircle extends React.Component { render() { return ( - Date: Sun, 16 Sep 2018 12:28:35 +0200 Subject: [PATCH 5/8] package version update --- extensions/imagesvg/package.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/extensions/imagesvg/package.json b/extensions/imagesvg/package.json index 617114f24..188694d65 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.3", "description": "Plugin for ReactXP that provides support for SVG (scalable vector graphics) for all platforms", "author": "ReactXP Team ", "license": "MIT", @@ -10,7 +10,7 @@ }, "dependencies": { "assert": "1.3.0", - "react-native-svg": "6.3.1" + "react-native-svg": "^6.3.1" }, "peerDependencies": { "react": "^16.4.0", @@ -21,10 +21,10 @@ "devDependencies": { "@types/node": "10.5.0", "@types/react-native": "0.55.26", - "reactxp": "1.3.0", - "tslint": "5.10.0", - "tslint-microsoft-contrib": "5.0.3", - "typescript": "2.9.2" + "reactxp": "^1.4.0-rc.2", + "tslint": "^5.11.0", + "tslint-microsoft-contrib": "^5.2.1", + "typescript": "^3.0.3" }, "types": "dist/web/PluginBase.d.ts" } From 746b50fbe2ec84727ee88fd9f80b79d24499921e Mon Sep 17 00:00:00 2001 From: Thomas Kroeber Date: Sun, 16 Sep 2018 14:55:40 +0200 Subject: [PATCH 6/8] update version --- extensions/imagesvg/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extensions/imagesvg/package.json b/extensions/imagesvg/package.json index 188694d65..7a97267af 100644 --- a/extensions/imagesvg/package.json +++ b/extensions/imagesvg/package.json @@ -1,6 +1,6 @@ { "name": "reactxp-imagesvg", - "version": "1.3.3", + "version": "1.3.4", "description": "Plugin for ReactXP that provides support for SVG (scalable vector graphics) for all platforms", "author": "ReactXP Team ", "license": "MIT", From e308f4d66cd783f3b78afe2cb0b78120a38f1565 Mon Sep 17 00:00:00 2001 From: Thomas Kroeber Date: Sun, 16 Sep 2018 16:10:39 +0200 Subject: [PATCH 7/8] package updates --- extensions/imagesvg/package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/extensions/imagesvg/package.json b/extensions/imagesvg/package.json index 7a97267af..ccece76a6 100644 --- a/extensions/imagesvg/package.json +++ b/extensions/imagesvg/package.json @@ -13,18 +13,18 @@ "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/node": "10.5.0", "@types/react-native": "0.55.26", - "reactxp": "^1.4.0-rc.2", + "reactxp": "^1.3.2", "tslint": "^5.11.0", "tslint-microsoft-contrib": "^5.2.1", - "typescript": "^3.0.3" + "typescript": "^2.9" }, "types": "dist/web/PluginBase.d.ts" } From efb757c281d21c34e8e02779d6116c2ca1ae6d6b Mon Sep 17 00:00:00 2001 From: Thomas Kroeber Date: Sun, 16 Sep 2018 16:19:47 +0200 Subject: [PATCH 8/8] 4 space indent --- extensions/imagesvg/src/common/Interfaces.ts | 9 ++-- extensions/imagesvg/src/common/Types.ts | 50 +++++++++---------- .../imagesvg/src/native-common/ImageSvg.tsx | 39 +++++++-------- .../imagesvg/src/native-common/SvgCircle.tsx | 28 +++++------ .../imagesvg/src/native-common/SvgPath.tsx | 24 ++++----- .../imagesvg/src/native-common/SvgPolygon.tsx | 24 ++++----- .../imagesvg/src/native-common/SvgRect.tsx | 18 +++---- extensions/imagesvg/src/web/ImageSvg.tsx | 20 ++++---- extensions/imagesvg/src/web/SvgCircle.tsx | 28 +++++------ extensions/imagesvg/src/web/SvgPath.tsx | 12 ++--- extensions/imagesvg/src/web/SvgPolygon.tsx | 24 ++++----- extensions/imagesvg/src/web/SvgRect.tsx | 18 +++---- extensions/imagesvg/src/windows/SvgCircle.tsx | 6 +-- extensions/imagesvg/src/windows/SvgPath.tsx | 6 +-- .../imagesvg/src/windows/SvgPolygon.tsx | 6 +-- extensions/imagesvg/tslint.json | 4 +- 16 files changed, 153 insertions(+), 163 deletions(-) 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 398d95eb9..725749ba4 100644 --- a/extensions/imagesvg/src/common/Types.ts +++ b/extensions/imagesvg/src/common/Types.ts @@ -12,41 +12,39 @@ export interface ImageSvgStyle extends RXTypes.ViewStyle {} export declare type ImageSvgStyleRuleSet = RXTypes.StyleRuleSet; export interface SvgCommonProps { - key?: string | number; - strokeColor?: string; - strokeWidth?: number; - strokeOpacity?: number; - fillColor?: string; - fillOpacity?: number; + key?: string | number; + strokeColor?: string; + strokeWidth?: number; + strokeOpacity?: number; + fillColor?: string; + fillOpacity?: number; } -export interface ImageSvgProps - extends SvgCommonProps, - RXTypes.CommonStyledProps { - children?: RXTypes.ReactNode; - height: number; - width: number; - accessibilityLabel?: string; - title?: string; - viewBox?: string; - preserveAspectRatio?: string; - webShadow?: string; +export interface ImageSvgProps extends SvgCommonProps, RXTypes.CommonStyledProps { + children?: RXTypes.ReactNode; + height: number; + width: number; + accessibilityLabel?: string; + title?: string; + viewBox?: string; + preserveAspectRatio?: string; + webShadow?: string; } export interface SvgPathProps extends SvgCommonProps { - d?: string; + d?: string; } export interface SvgRectProps extends SvgCommonProps { - width: number; - height: number; - x: number; - y: number; + width: number; + height: number; + x: number; + y: number; } export interface SvgCircleProps extends SvgCommonProps { - cx: number; - cy: number; - r: number; + cx: number; + cy: number; + r: number; } export interface SvgPolygonProps extends SvgCommonProps { - points: string; + points: string; } diff --git a/extensions/imagesvg/src/native-common/ImageSvg.tsx b/extensions/imagesvg/src/native-common/ImageSvg.tsx index fe059d24e..2579cacc3 100644 --- a/extensions/imagesvg/src/native-common/ImageSvg.tsx +++ b/extensions/imagesvg/src/native-common/ImageSvg.tsx @@ -15,29 +15,26 @@ import * as RN from 'react-native'; import { ImageSvgProps } from '../common/Types'; export class ImageSvg extends React.Component { - render() { - assert.ok( - this.props.width && this.props.height, - 'The width and height on imagesvg are mandatory.' - ); + render() { + 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) { - return ( - } - opacity={this.props.strokeOpacity} - preserveAspectRatio={this.props.preserveAspectRatio} - viewBox={this.props.viewBox} - > - {this.props.children} - - ); - } + 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} + + ); + } - return null; - } + return null; + } } export default ImageSvg; diff --git a/extensions/imagesvg/src/native-common/SvgCircle.tsx b/extensions/imagesvg/src/native-common/SvgCircle.tsx index f9d63ed53..b29085828 100644 --- a/extensions/imagesvg/src/native-common/SvgCircle.tsx +++ b/extensions/imagesvg/src/native-common/SvgCircle.tsx @@ -12,20 +12,20 @@ import * as RNSvg from 'react-native-svg'; import { SvgCircleProps } from '../common/Types'; export class SvgCircle extends React.Component { - render() { - return ( - - ); - } + render() { + return ( + + ); + } } export default SvgCircle; diff --git a/extensions/imagesvg/src/native-common/SvgPath.tsx b/extensions/imagesvg/src/native-common/SvgPath.tsx index 6e2464a44..f95d8fab7 100644 --- a/extensions/imagesvg/src/native-common/SvgPath.tsx +++ b/extensions/imagesvg/src/native-common/SvgPath.tsx @@ -13,18 +13,18 @@ import * as RNSvg from 'react-native-svg'; import { SvgPathProps } from '../common/Types'; export class SvgPath extends React.Component { - render() { - return ( - - ); - } + render() { + return ( + + ); + } } export default SvgPath; diff --git a/extensions/imagesvg/src/native-common/SvgPolygon.tsx b/extensions/imagesvg/src/native-common/SvgPolygon.tsx index 39a836a5e..e348531c2 100644 --- a/extensions/imagesvg/src/native-common/SvgPolygon.tsx +++ b/extensions/imagesvg/src/native-common/SvgPolygon.tsx @@ -12,18 +12,18 @@ import * as RNSvg from 'react-native-svg'; import { SvgPolygonProps } from '../common/Types'; export class SvgPolygon extends React.Component { - render() { - return ( - - ); - } + 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/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/SvgCircle.tsx b/extensions/imagesvg/src/web/SvgCircle.tsx index df0161346..040fef084 100644 --- a/extensions/imagesvg/src/web/SvgCircle.tsx +++ b/extensions/imagesvg/src/web/SvgCircle.tsx @@ -12,20 +12,20 @@ import * as React from 'react'; import { SvgCircleProps } from '../common/Types'; export class SvgCircle extends React.Component { - render() { - return ( - - ); - } + 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 index 3b47c94bb..5c1b5acef 100644 --- a/extensions/imagesvg/src/web/SvgPolygon.tsx +++ b/extensions/imagesvg/src/web/SvgPolygon.tsx @@ -12,18 +12,18 @@ import * as React from 'react'; import { SvgPolygonProps } from '../common/Types'; export class SvgPolygon extends React.Component { - render() { - return ( - - ); - } + 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/SvgCircle.tsx b/extensions/imagesvg/src/windows/SvgCircle.tsx index f16c49bd7..c5b7ed2ff 100644 --- a/extensions/imagesvg/src/windows/SvgCircle.tsx +++ b/extensions/imagesvg/src/windows/SvgCircle.tsx @@ -14,9 +14,9 @@ import { SvgCircleProps } from '../common/Types'; // TODO: #694092 Not implemented export class SvgCircle extends React.Component { - render(): any { - return null; - } + render(): any { + return null; + } } export default SvgCircle; diff --git a/extensions/imagesvg/src/windows/SvgPath.tsx b/extensions/imagesvg/src/windows/SvgPath.tsx index 5342d20d7..fecabb851 100644 --- a/extensions/imagesvg/src/windows/SvgPath.tsx +++ b/extensions/imagesvg/src/windows/SvgPath.tsx @@ -14,9 +14,9 @@ import { SvgPathProps } from '../common/Types'; // TODO: #694092 Not implemented export class SvgPath extends React.Component { - render(): any { - return null; - } + render(): any { + return null; + } } export default SvgPath; diff --git a/extensions/imagesvg/src/windows/SvgPolygon.tsx b/extensions/imagesvg/src/windows/SvgPolygon.tsx index aa7d372fd..48e2b3924 100644 --- a/extensions/imagesvg/src/windows/SvgPolygon.tsx +++ b/extensions/imagesvg/src/windows/SvgPolygon.tsx @@ -14,9 +14,9 @@ import { SvgPolygonProps } from '../common/Types'; // TODO: #694092 Not implemented export class SvgPolygon extends React.Component { - render(): any { - return null; - } + 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 +}