From 4ad5d42d17dfb697be5834053cb32ba705d2a66d Mon Sep 17 00:00:00 2001 From: Nguyen Xuan Khanh Date: Tue, 22 May 2018 17:52:22 +0700 Subject: [PATCH] Added Grid children, label, stretchy props Specified children type for some components. Slider: added `max`, `min` props ColorButton: onClick to onChange Removed undocumented components. --- types/proton-native/index.d.ts | 205 ++++++++++++++++----------------- 1 file changed, 101 insertions(+), 104 deletions(-) diff --git a/types/proton-native/index.d.ts b/types/proton-native/index.d.ts index bf06ad879c..b49efe6014 100644 --- a/types/proton-native/index.d.ts +++ b/types/proton-native/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for proton-native 0.55 +// Type definitions for proton-native 1.1 // Project: https://github.com/kusti8/proton-native // Definitions by: Nguyen Xuan Khanh // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped @@ -18,7 +18,7 @@ export interface AppProps { */ export class App extends React.Component { } -export interface AreaBaseProps { +export interface AreaBaseProps extends GridChildrenProps, Label, Stretchy { /** * The fill color for the component. */ @@ -258,12 +258,7 @@ export class Area extends React.Component { static Rectangle: typeof AreaRectangle; } -/** - * Undocumented - */ -export class AreaInternal extends React.Component { } - -export interface BoxProps { +export interface BoxProps extends GridChildrenProps, Label, Stretchy { /** * Whether the Box is enabled. */ @@ -284,7 +279,11 @@ export interface BoxProps { export class Box extends React.Component { } -export interface ButtonProps { +export interface ButtonProps extends GridChildrenProps, Label, Stretchy { + /** + * The text to display in the button. + */ + children?: string; /** * Whether the button can be clicked. */ @@ -304,15 +303,19 @@ export interface ButtonProps { */ export class Button extends React.Component { } -export interface CheckboxProps { - /** - * Whether the checkbox can be used. - */ - enabled?: boolean; +export interface CheckboxProps extends GridChildrenProps, Label, Stretchy { /** * Whether the checkbox is checked or not. */ checked?: boolean; + /** + * The text to display next to the check box. + */ + children?: string; + /** + * Whether the checkbox can be used. + */ + enabled?: boolean; /** * Called when the checkbox is clicked. The current checkbox state is passed as an argument. */ @@ -325,7 +328,7 @@ export interface CheckboxProps { export class Checkbox extends React.Component { } -export interface ColorButtonProps { +export interface ColorButtonProps extends GridChildrenProps, Label, Stretchy { /** * The initial color for the ColorButton. Can be passed as standard color seen in CSS (a color name, hex, rgb, rgba, hsl, hsla). */ @@ -333,7 +336,7 @@ export interface ColorButtonProps { /** * Called when the color is changed for the ColorButton. The current color is passed as an object of RGBA. */ - onClick?: (color: { + onChange?: (color: { r: number, g: number, b: number, @@ -346,32 +349,7 @@ export interface ColorButtonProps { */ export class ColorButton extends React.Component { } -/** - * Undocumented - */ -export class Combobox extends React.Component { } - -/** - * Undocumented - */ -export class ComboboxItem extends React.Component { } - -/** - * Undocumented - */ -export class EditableCombobox extends React.Component { } - -/** - * Undocumented - */ -export class Entry extends React.Component { } - -/** - * Undocumented - */ -export class FontButton extends React.Component { } - -export interface FormProps { +export interface FormProps extends GridChildrenProps, Stretchy { /** * Whether the Form is enabled. */ @@ -438,7 +416,11 @@ export interface GridProps { */ export class Grid extends React.Component { } -export interface GroupProps { +export interface GroupProps extends GridChildrenProps, Label, Stretchy { + /** + * Group can only have one child. To have more than one child, use boxes. + */ + children?: JSX.Element; /** * Whether the Group is enabled. */ @@ -459,18 +441,17 @@ export interface GroupProps { /** * A named group of components. + * + * **Note:** Group can only have one child. To have more than one child, use boxes */ export class Group extends React.Component { } -/** - * Undocumented - */ -export class HorizontalBox extends React.Component { } - -/** - * Undocumented - */ -export class HorizontalSeparator extends React.Component { } +export interface Label { + /** + * Label for Form and Tab children + */ + label?: string; +} export interface MenuProps { /** @@ -480,6 +461,14 @@ export interface MenuProps { } export interface MenuItemProps { + /** + * The text to display for the menu item. + */ + children?: string; + /** + * If the type is `Check`, then set whether it is checked or not. + */ + checked?: boolean; /** * How the menu item is displayed. * @@ -491,16 +480,15 @@ export interface MenuItemProps { * - `Item` - a normal menu button. This is the default. */ type?: 'Check' | 'Quit' | 'About' | 'Preferences' | 'Separator' | 'Item'; - /** - * If the type is `Check`, then set whether it is checked or not. - */ - checked?: boolean; /** * Called when the menu item is clicked. If the type is `Check`, then it passes whether it is checked as an argument. */ onClick?: (checked: boolean) => void; } +/** + * A single item in a Menu. + */ export class MenuItem extends React.Component { } /** @@ -515,27 +503,7 @@ export class Menu extends React.Component { static Item: typeof MenuItem; } -/** - * Undocumented - */ -export class MenuBar extends React.Component { } - -/** - * Undocumented - */ -export class MenuBarItem extends React.Component { } - -/** - * Undocumented - */ -export class MultilineEntry extends React.Component { } - -/** - * Undocumented - */ -export class PasswordEntry extends React.Component { } - -export interface PickerProps { +export interface PickerProps extends GridChildrenProps, Label, Stretchy { /** * Whether the user can enter their own custom text in addition to the drop down menu. */ @@ -571,7 +539,7 @@ export interface PickerProps { */ export class Picker extends React.Component { } -export interface ProgressBarProps { +export interface ProgressBarProps extends GridChildrenProps, Label, Stretchy { /** * Whether the ProgressBar is enabled. */ @@ -591,14 +559,13 @@ export interface ProgressBarProps { */ export class ProgressBar extends React.Component { } -/** - * Undocumented - */ -export class RadioButton extends React.Component { } +export interface RadioButtonsItemProps { + children: string; +} -export class RadioButtonItem extends React.Component { } +export class RadioButtonsItem extends React.Component { } -export interface RadioButtonsProps { +export interface RadioButtonsProps extends GridChildrenProps, Label, Stretchy { /** * Whether the RadioButtons can be used. */ @@ -623,10 +590,10 @@ export interface RadioButtonsProps { * Every child must be a RadioButtons.Item, that requires a string child that is the label to display to the right of the RadioButton. */ export class RadioButtons extends React.Component { - static Item: typeof RadioButtonItem; + static Item: typeof RadioButtonsItem; } -export interface SeparatorProps { +export interface SeparatorProps extends GridChildrenProps, Label, Stretchy { /** * Whether the Separator is enabled. */ @@ -646,11 +613,19 @@ export interface SeparatorProps { */ export class Separator extends React.Component { } -export interface SliderProps { +export interface SliderProps extends GridChildrenProps, Label, Stretchy { /** * Whether the Slider is enabled. */ enabled?: boolean; + /** + * The minimum value for the slider. + */ + min?: number; + /** + * The maximum value for the slider. + */ + max?: number; /** * Called when the value of the slider is changed. The current value is passed as an argument. */ @@ -670,7 +645,7 @@ export interface SliderProps { */ export class Slider extends React.Component { } -export interface SpinBoxProps { +export interface SpinBoxProps extends GridChildrenProps, Label, Stretchy { /** * Whether the Spinbox is enabled. */ @@ -694,7 +669,20 @@ export interface SpinBoxProps { */ export class SpinBox extends React.Component { } -export interface TabProps { +export interface Stretchy { + /** + * Whether the component should stretch to fill the available space. Defaults to true. + * + * Excluded on: + * - Tabs + * - Grid children + * - Combobox/RadioButton Items + * - MenuBar + */ + stretchy?: boolean; +} + +export interface TabProps extends GridChildrenProps { /** * Whether the Tab is enabled. */ @@ -712,12 +700,23 @@ export interface TabProps { */ export class Tab extends React.Component { } +export interface TextProps extends GridChildrenProps, Label, Stretchy { + /** + * The text to display. + */ + children?: string; +} + /** * Displays some text. */ -export class Text extends React.Component { } +export class Text extends React.Component { } -export interface TextInputProps { +export interface TextInputProps extends GridChildrenProps, Label, Stretchy { + /** + * The default text in the TextInput. + */ + children?: string; /** * Whether the TextInput can be used. */ @@ -749,21 +748,15 @@ export interface TextInputProps { */ export class TextInput extends React.Component { } -/** - * Undocumented - */ -export class VerticalBox extends React.Component { } - -/** - * Undocumented - */ -export class VerticalSeparator extends React.Component { } - export interface WindowProps { /** * Whether the window will have a border on the inside. */ borderless?: boolean; + /** + * Window can only have one child. To have more than one child, use boxes. + */ + children?: JSX.Element; /** * Whether the window is closed. If set to closed, then the window will be closed. */ @@ -810,10 +803,15 @@ export interface WindowProps { /** * The window is the basis where all other components reside. + * + * **Note:** Window can only have one child. To have more than one child, use boxes. */ export class Window extends React.Component { } -export function render(element: JSX.Element): React.ReactNode; +/** + * Renders the input component + */ +export function render(element: JSX.Element): void; /** * A method to display an alert, or a dialog to save or open a file. @@ -830,8 +828,7 @@ export function Dialog( options?: { title: string, description?: string - } - | { + } | { title?: string, description: string }