From a5aef2d2771aa47990c8d8db395e67f65cf54a47 Mon Sep 17 00:00:00 2001 From: Sascha Zarhuber Date: Fri, 12 Apr 2019 18:24:05 +0200 Subject: [PATCH] feat(react-sketchapp): refactored children types, fixed minor bugs --- types/react-sketchapp/index.d.ts | 38 ++++++++++++++++--- .../lib/components/Svg/ClipPath.d.ts | 2 +- .../lib/components/Svg/Defs.d.ts | 2 +- .../lib/components/Svg/Image.d.ts | 2 +- .../lib/components/Svg/LinearGradient.d.ts | 2 +- .../lib/components/Svg/Pattern.d.ts | 2 +- .../lib/components/Svg/RadialGradient.d.ts | 2 +- .../lib/components/Svg/Stop.d.ts | 2 +- .../lib/components/Svg/Svg.d.ts | 1 - .../lib/components/Svg/Symbol.d.ts | 2 +- .../react-sketchapp/react-sketchapp-tests.tsx | 20 +++++++++- 11 files changed, 59 insertions(+), 16 deletions(-) diff --git a/types/react-sketchapp/index.d.ts b/types/react-sketchapp/index.d.ts index d62d4a580c..5f5ccda717 100644 --- a/types/react-sketchapp/index.d.ts +++ b/types/react-sketchapp/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for react-sketchapp 0.15 +// Type definitions for react-sketchapp 0.16 // Project: https://github.com/airbnb/react-sketchapp // Definitions by: Rico Kahler // DomiR @@ -60,6 +60,30 @@ export function renderToJSON(element: JSX.Element): any; // https://github.com/airbnb/react-sketchapp/blob/v0.12.1/src/types.js#L59 export type Color = string | number; +/** + * Additional prop type interfaces + */ +export interface ResizingConstraintPropTypes { + top?: boolean; + right?: boolean; + bottom?: boolean; + left?: boolean; + fixedHeight?: boolean; + fixedWidth?: boolean; +} + +export interface ShadowsPropTypes { + shadowColor?: string | number; + shadowOffset?: { + width?: number; + height?: number; + }; + shadowOpacity?: number; + shadowRadius?: number; + shadowSpread?: number; + shadowInner?: boolean; +} + /** * The [`StyleSheet` api uses numbers as IDs][0] to pull registered styles. The component props * can actually take either a `Style` or a `StyleReference` (where the `StyleReference` is given @@ -163,7 +187,7 @@ export interface TextStyle extends Style { * DocumentProps, a Document does not take any props but children */ export interface DocumentProps { - children?: any; + children?: React.ReactElement[] | React.ReactElement; } /** @@ -177,7 +201,7 @@ export class Document extends React.Component {} */ export interface PageProps { name?: string; - children?: any; + children?: React.ReactNode[] | React.ReactNode; } /** @@ -195,7 +219,7 @@ export interface ArtboardProps { * The name to be displayed in the Sketch Layer List */ name?: string; - children?: any; + children?: React.ReactNode[] | React.ReactNode; style?: Style | StyleReference; } /** @@ -213,7 +237,7 @@ export type ResizeMode = | 'repeat' | 'none'; export interface ImageProps { - children?: any; + children?: React.ReactNode[] | React.ReactNode; source?: ImageSource; style?: Style | StyleReference; resizeMode: ResizeMode; @@ -243,8 +267,10 @@ export class Text extends React.Component {} // View export interface ViewProps { name?: string; - children?: React.ReactChild[] | React.ReactChild; + children?: React.ReactNode[] | React.ReactNode; style?: Style | StyleReference; + resizingConstraint?: ResizingConstraintPropTypes; + shadows?: ShadowsPropTypes[]; } /** View primitives */ export class View extends React.Component {} diff --git a/types/react-sketchapp/lib/components/Svg/ClipPath.d.ts b/types/react-sketchapp/lib/components/Svg/ClipPath.d.ts index 63d14714fc..e4551b45fe 100644 --- a/types/react-sketchapp/lib/components/Svg/ClipPath.d.ts +++ b/types/react-sketchapp/lib/components/Svg/ClipPath.d.ts @@ -2,7 +2,7 @@ import React = require('react'); export interface ClipPathProps { id: string; - children?: React.ReactChild[] | React.ReactChild; + children?: React.ReactNode[] | React.ReactNode; } export default class ClipPath extends React.Component {} diff --git a/types/react-sketchapp/lib/components/Svg/Defs.d.ts b/types/react-sketchapp/lib/components/Svg/Defs.d.ts index ca794ba0e9..4291f8f516 100644 --- a/types/react-sketchapp/lib/components/Svg/Defs.d.ts +++ b/types/react-sketchapp/lib/components/Svg/Defs.d.ts @@ -1,7 +1,7 @@ import React = require('react'); export interface DefsProps { - children: React.ReactChild[] | React.ReactChild; + children: React.ReactNode[] | React.ReactNode; } export default class Defs extends React.Component {} diff --git a/types/react-sketchapp/lib/components/Svg/Image.d.ts b/types/react-sketchapp/lib/components/Svg/Image.d.ts index ebec62b141..810dd06400 100644 --- a/types/react-sketchapp/lib/components/Svg/Image.d.ts +++ b/types/react-sketchapp/lib/components/Svg/Image.d.ts @@ -9,7 +9,7 @@ export interface ImageProps { height: NumberProp; href: string; preserveAspectRatio?: string; - children?: React.ReactChild[] | React.ReactChild; + children?: React.ReactNode[] | React.ReactNode; } export default class Image extends React.Component {} diff --git a/types/react-sketchapp/lib/components/Svg/LinearGradient.d.ts b/types/react-sketchapp/lib/components/Svg/LinearGradient.d.ts index 75fcd251fa..a27f2f6d11 100644 --- a/types/react-sketchapp/lib/components/Svg/LinearGradient.d.ts +++ b/types/react-sketchapp/lib/components/Svg/LinearGradient.d.ts @@ -9,7 +9,7 @@ export interface LinearGradientProps { y2: NumberProp; gradientUnits?: 'objectBoundingBox' | 'userSpaceOnUse'; id?: string; - children?: React.ReactChild[] | React.ReactChild; + children?: React.ReactNode[] | React.ReactNode; } export default class LinearGradient extends React.Component< diff --git a/types/react-sketchapp/lib/components/Svg/Pattern.d.ts b/types/react-sketchapp/lib/components/Svg/Pattern.d.ts index 8a63a44fe4..1b1e66f833 100644 --- a/types/react-sketchapp/lib/components/Svg/Pattern.d.ts +++ b/types/react-sketchapp/lib/components/Svg/Pattern.d.ts @@ -10,7 +10,7 @@ export interface PatternProps { patternTransform?: string; patternUnits?: 'userSpaceOnUse' | 'objectBoundingBox'; patternContentUnits?: 'userSpaceOnUse' | 'objectBoundingBox'; - children?: React.ReactChild[] | React.ReactChild; + children?: React.ReactNode[] | React.ReactNode; } export default class Pattern extends React.Component {} diff --git a/types/react-sketchapp/lib/components/Svg/RadialGradient.d.ts b/types/react-sketchapp/lib/components/Svg/RadialGradient.d.ts index 4d689cd7ed..04c747018d 100644 --- a/types/react-sketchapp/lib/components/Svg/RadialGradient.d.ts +++ b/types/react-sketchapp/lib/components/Svg/RadialGradient.d.ts @@ -12,7 +12,7 @@ export interface RadialGradientProps { r?: NumberProp; gradientUnits?: 'objectBoundingBox' | 'userSpaceOnUse'; id: string; - children?: React.ReactChild[] | React.ReactChild; + children?: React.ReactNode[] | React.ReactNode; } export default class RadialGradient extends React.Component< diff --git a/types/react-sketchapp/lib/components/Svg/Stop.d.ts b/types/react-sketchapp/lib/components/Svg/Stop.d.ts index a019562d09..fb7168e63a 100644 --- a/types/react-sketchapp/lib/components/Svg/Stop.d.ts +++ b/types/react-sketchapp/lib/components/Svg/Stop.d.ts @@ -5,7 +5,7 @@ import { NumberProp } from './props'; export interface StopProps { stopColor?: string; stopOpacity?: NumberProp; - children?: React.ReactChild[] | React.ReactChild; + children?: React.ReactNode[] | React.ReactNode; } export default class Stop extends React.Component {} diff --git a/types/react-sketchapp/lib/components/Svg/Svg.d.ts b/types/react-sketchapp/lib/components/Svg/Svg.d.ts index 95cb5743f9..e4265a08fe 100644 --- a/types/react-sketchapp/lib/components/Svg/Svg.d.ts +++ b/types/react-sketchapp/lib/components/Svg/Svg.d.ts @@ -23,7 +23,6 @@ import TSpan, { TSpanProps } from './TSpan'; import Use, { UseProps } from './Use'; export interface SvgProps extends ViewProps { - className?: string; opacity?: string | number; width?: string | number; height?: string | number; diff --git a/types/react-sketchapp/lib/components/Svg/Symbol.d.ts b/types/react-sketchapp/lib/components/Svg/Symbol.d.ts index ce338ed4b5..591266363a 100644 --- a/types/react-sketchapp/lib/components/Svg/Symbol.d.ts +++ b/types/react-sketchapp/lib/components/Svg/Symbol.d.ts @@ -4,7 +4,7 @@ export interface SymbolProps { id: string; viewBox?: string; preserveAspectRatio?: string; - children: React.ReactChild[] | React.ReactChild; + children: React.ReactNode[] | React.ReactNode; } export default class Symbol extends React.Component {} diff --git a/types/react-sketchapp/react-sketchapp-tests.tsx b/types/react-sketchapp/react-sketchapp-tests.tsx index ecbfa48db3..a4671491fd 100644 --- a/types/react-sketchapp/react-sketchapp-tests.tsx +++ b/types/react-sketchapp/react-sketchapp-tests.tsx @@ -19,7 +19,7 @@ import Rect from 'react-sketchapp/lib/components/Svg/Rect'; // the styles object should be a mapped typed mapping the keys of the object literal to numbers const styles = StyleSheet.create({ red: { - backgroundColor: '#FF00000', + backgroundColor: '#FF0000', }, flexRow: { flexDirection: 'row', @@ -34,6 +34,24 @@ const SketchArtboard = () => ( text must be a string + + + Blue + +