From 7f9f32d9c208c65f4a015bc08e2a6606b2b23f67 Mon Sep 17 00:00:00 2001 From: khanhas Date: Sun, 10 Jun 2018 02:39:55 +0700 Subject: [PATCH 1/5] Added Area Text --- types/proton-native/index.d.ts | 53 ++++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/types/proton-native/index.d.ts b/types/proton-native/index.d.ts index b49efe6014..23c980fd73 100644 --- a/types/proton-native/index.d.ts +++ b/types/proton-native/index.d.ts @@ -169,6 +169,55 @@ export interface AreaPathProps extends AreaBaseProps { export class AreaPath extends React.Component { } +export interface AreaTextProps extends AreaBaseProps { + /** + * The background color, specified as a CSS color string. + */ + backgroundColor?: string; + /** + * The text color, specified as a CSS color string. + */ + color?: string; + /** + * The font family (only if available on the system). + */ + fontFamily?: string; + /** + * The font size (in pt). + */ + fontSize?: number; + /** + * Whether an italic font should be used. + */ + fontStyle?: 'normal' | 'oblique' | 'italic'; + /** + * Whether a bold font should be used (and the amount). + */ + fontWeight?: 'minimum' | 'thin' | 'ultraLight' | 'light' | 'book' | 'normal' | 'medium' | 'semiBold' | 'bold' | 'ultraBold' | 'heavy' | 'ultraHeavy' | 'maximum' | number; + /** + * Wheter the text should be aligned to the left, center or right. + * + * **Works only on a top level text component, not it's children!** + */ + textAlign?: 'left' | 'center' | 'right'; + /** + * How wide or narrow the characters should be. + */ + textStretch?: 'ultraCondensed' | 'extraCondensed' | 'condensed' | 'semiCondensed' | 'normal' | 'semiExpanded' | 'expanded' | 'extraExpanded' | 'ultraExpanded'; + /** + * The text underline style. + */ + textUnderline?: 'none' | 'single' | 'double' | 'suggestion'; + /** + * The text underline color. + * + * A color string | 'spelling' | 'grammar' | 'auxiliary' + */ + textUnderlineColor?: 'spelling' | 'grammar' | 'auxiliary' | string; +} + +export class AreaText extends React.Component { } + export interface MouseEvent { button: number; height: number; @@ -256,6 +305,10 @@ export class Area extends React.Component { * A rectangle to be displayed in an Area component. */ static Rectangle: typeof AreaRectangle; + /** + * A (possibly styled) text to be displayed in an Area component. Nested `Area.Text` components inheirit the parent's style. + */ + static Text: typeof AreaText; } export interface BoxProps extends GridChildrenProps, Label, Stretchy { From 70c88af46e89b67e0609c05034b655ce45287fa4 Mon Sep 17 00:00:00 2001 From: khanhas Date: Sun, 10 Jun 2018 02:54:37 +0700 Subject: [PATCH 2/5] Added test for Area --- types/proton-native/test/index.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/types/proton-native/test/index.tsx b/types/proton-native/test/index.tsx index 8fcf7c7046..6b09fb0d64 100644 --- a/types/proton-native/test/index.tsx +++ b/types/proton-native/test/index.tsx @@ -124,3 +124,18 @@ class GridTest extends React.Component { ); } } + +class AreaTest extends React.Component { + render() { + return ( + + + + + Parent text + Nested Text + + + ); + } +} From 5d209bbbcede0582a157ee4a26b09af671409bfc Mon Sep 17 00:00:00 2001 From: khanhas Date: Sun, 10 Jun 2018 10:45:22 +0700 Subject: [PATCH 3/5] Added x and y for Area.Text https://github.com/kusti8/proton-native/commit/178c0903b3d7bdd9a8116a771006651a817c6d02 --- types/proton-native/index.d.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/types/proton-native/index.d.ts b/types/proton-native/index.d.ts index 23c980fd73..0cfb0e5798 100644 --- a/types/proton-native/index.d.ts +++ b/types/proton-native/index.d.ts @@ -214,6 +214,14 @@ export interface AreaTextProps extends AreaBaseProps { * A color string | 'spelling' | 'grammar' | 'auxiliary' */ textUnderlineColor?: 'spelling' | 'grammar' | 'auxiliary' | string; + /** + * The x coordinate of the text's top left corner. (Only in a top level text component.) + */ + x?: number | string; + /** + * The y coordinate of the text's top left corner. (Only in a top level text component.) + */ + y?: number | string; } export class AreaText extends React.Component { } From bfb9112bce25d33540973dafa45d17d2d82b2aa3 Mon Sep 17 00:00:00 2001 From: khanhas Date: Sun, 10 Jun 2018 21:48:02 +0700 Subject: [PATCH 4/5] Fixed props. Should be in `style` props --- types/proton-native/index.d.ts | 90 +++++++++++++++--------------- types/proton-native/test/index.tsx | 13 ++++- 2 files changed, 57 insertions(+), 46 deletions(-) diff --git a/types/proton-native/index.d.ts b/types/proton-native/index.d.ts index 0cfb0e5798..b29d0a2b3f 100644 --- a/types/proton-native/index.d.ts +++ b/types/proton-native/index.d.ts @@ -170,50 +170,52 @@ export interface AreaPathProps extends AreaBaseProps { export class AreaPath extends React.Component { } export interface AreaTextProps extends AreaBaseProps { - /** - * The background color, specified as a CSS color string. - */ - backgroundColor?: string; - /** - * The text color, specified as a CSS color string. - */ - color?: string; - /** - * The font family (only if available on the system). - */ - fontFamily?: string; - /** - * The font size (in pt). - */ - fontSize?: number; - /** - * Whether an italic font should be used. - */ - fontStyle?: 'normal' | 'oblique' | 'italic'; - /** - * Whether a bold font should be used (and the amount). - */ - fontWeight?: 'minimum' | 'thin' | 'ultraLight' | 'light' | 'book' | 'normal' | 'medium' | 'semiBold' | 'bold' | 'ultraBold' | 'heavy' | 'ultraHeavy' | 'maximum' | number; - /** - * Wheter the text should be aligned to the left, center or right. - * - * **Works only on a top level text component, not it's children!** - */ - textAlign?: 'left' | 'center' | 'right'; - /** - * How wide or narrow the characters should be. - */ - textStretch?: 'ultraCondensed' | 'extraCondensed' | 'condensed' | 'semiCondensed' | 'normal' | 'semiExpanded' | 'expanded' | 'extraExpanded' | 'ultraExpanded'; - /** - * The text underline style. - */ - textUnderline?: 'none' | 'single' | 'double' | 'suggestion'; - /** - * The text underline color. - * - * A color string | 'spelling' | 'grammar' | 'auxiliary' - */ - textUnderlineColor?: 'spelling' | 'grammar' | 'auxiliary' | string; + style?: { + /** + * The background color, specified as a CSS color string. + */ + backgroundColor?: string; + /** + * The text color, specified as a CSS color string. + */ + color?: string; + /** + * The font family (only if available on the system). + */ + fontFamily?: string; + /** + * The font size (in pt). + */ + fontSize?: number; + /** + * Whether an italic font should be used. + */ + fontStyle?: 'normal' | 'oblique' | 'italic'; + /** + * Whether a bold font should be used (and the amount). + */ + fontWeight?: 'minimum' | 'thin' | 'ultraLight' | 'light' | 'book' | 'normal' | 'medium' | 'semiBold' | 'bold' | 'ultraBold' | 'heavy' | 'ultraHeavy' | 'maximum' | number; + /** + * Wheter the text should be aligned to the left, center or right. + * + * **Works only on a top level text component, not it's children!** + */ + textAlign?: 'left' | 'center' | 'right'; + /** + * How wide or narrow the characters should be. + */ + textStretch?: 'ultraCondensed' | 'extraCondensed' | 'condensed' | 'semiCondensed' | 'normal' | 'semiExpanded' | 'expanded' | 'extraExpanded' | 'ultraExpanded'; + /** + * The text underline style. + */ + textUnderline?: 'none' | 'single' | 'double' | 'suggestion'; + /** + * The text underline color. + * + * A color string | 'spelling' | 'grammar' | 'auxiliary' + */ + textUnderlineColor?: 'spelling' | 'grammar' | 'auxiliary' | string; + }; /** * The x coordinate of the text's top left corner. (Only in a top level text component.) */ diff --git a/types/proton-native/test/index.tsx b/types/proton-native/test/index.tsx index 6b09fb0d64..49e82efc1b 100644 --- a/types/proton-native/test/index.tsx +++ b/types/proton-native/test/index.tsx @@ -131,9 +131,18 @@ class AreaTest extends React.Component { - + Parent text - Nested Text + + Nested Text + ); From b6d37208cf1b06cf5aa760dcc1db9a9a82f1315a Mon Sep 17 00:00:00 2001 From: khanhas Date: Mon, 11 Jun 2018 13:55:15 +0700 Subject: [PATCH 5/5] Added AreaGroup and test --- types/proton-native/index.d.ts | 19 +++++++++++++++++++ types/proton-native/test/index.tsx | 30 ++++++++++++++++-------------- 2 files changed, 35 insertions(+), 14 deletions(-) diff --git a/types/proton-native/index.d.ts b/types/proton-native/index.d.ts index b29d0a2b3f..635f180b0e 100644 --- a/types/proton-native/index.d.ts +++ b/types/proton-native/index.d.ts @@ -228,6 +228,19 @@ export interface AreaTextProps extends AreaBaseProps { export class AreaText extends React.Component { } +export interface AreaGroupProps extends AreaBaseProps { + /** + * Specify `width` and `height` to be able to use percentage values in transforms. + */ + width?: number | string; + /** + * Specify `width` and `height` to be able to use percentage values in transforms. + */ + height?: number | string; +} + +export class AreaGroup extends React.Component { } + export interface MouseEvent { button: number; height: number; @@ -301,6 +314,12 @@ export class Area extends React.Component { * A circle to be displayed in an Area component. */ static Circle: typeof AreaCircle; + /** + * A component to apply props to all it's children in an Area component. + * + * To be able to use percentage values in transforms, the props `width` and `height` need to be specified (they have no graphical effect). + */ + static Group: typeof AreaGroup; /** * A straigt line to be displayed in an Area component. */ diff --git a/types/proton-native/test/index.tsx b/types/proton-native/test/index.tsx index 49e82efc1b..901cf3e155 100644 --- a/types/proton-native/test/index.tsx +++ b/types/proton-native/test/index.tsx @@ -129,21 +129,23 @@ class AreaTest extends React.Component { render() { return ( - - - - Parent text - - Nested Text + + + + + Parent text + + Nested Text + - + ); }