mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
f0ce987bc1
Note that this *trivially* updates project urls by adding the NPM url to the end, even when the urls are almost identical or the DT one is outdated. I'll clean up the urls in a later commit. This PR is unfinished! Please do not merge it yet.
945 lines
25 KiB
TypeScript
945 lines
25 KiB
TypeScript
// Type definitions for proton-native 1.1
|
|
// Project: https://github.com/kusti8/proton-native, https://proton-native.js.org
|
|
// Definitions by: Nguyen Xuan Khanh <https://github.com/khanhas>
|
|
// Lukas Tetzlaff <https://github.com/ltetzlaff>
|
|
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
|
// TypeScript Version: 2.8
|
|
|
|
import * as React from 'react';
|
|
|
|
export interface AppProps {
|
|
/**
|
|
* Called when the quit menu item is called, right before the entire app quits.
|
|
*/
|
|
onShouldQuit?: () => void;
|
|
}
|
|
|
|
/**
|
|
* The app is the container for the entire program and holds Windows and Menus.
|
|
*/
|
|
export class App extends React.Component<AppProps> { }
|
|
|
|
export interface AreaBaseProps extends GridChildrenProps, Label, Stretchy {
|
|
/**
|
|
* The fill color for the component.
|
|
*/
|
|
fill?: string;
|
|
/**
|
|
* The opacity of the fill (between 0 and 1). Gets multiplied with the fill colors alpha value.
|
|
*/
|
|
fillOpacity?: number;
|
|
/**
|
|
* The stroke (line) color for the component.
|
|
*/
|
|
stroke?: string;
|
|
|
|
strokeLinecap?: 'flat' | 'round' | 'bevel';
|
|
|
|
strokeLinejoin?: 'miter' | 'round' | 'bevel';
|
|
/**
|
|
* How far to extend the stroke at a sharp corner when using `strokeLinejoin='miter'`
|
|
* @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit
|
|
* for a more detailed explanation.
|
|
*/
|
|
strokeMiterlimit?: number;
|
|
/**
|
|
* The opacity of the stroke (between 0 and 1). Gets multiplied with the stroke colors alpha value.
|
|
*/
|
|
strokeOpacity?: number;
|
|
|
|
strokeWidth?: number;
|
|
/**
|
|
* List of transformations to apply to the component (are quite similar to SVG transformations). Example for multiple transformations: `transform="translate(100, 100) rotate(90)"`.
|
|
*
|
|
* All x and y coordinates specified in a transformation are relative _to the component itself_, meaning that `translate(-50%, 0)` will translate the component by 50% of it's own width to left.
|
|
*/
|
|
transform?: string;
|
|
}
|
|
|
|
export interface AreaRectangleProps extends AreaBaseProps {
|
|
/**
|
|
* The height of the rectangle.
|
|
*/
|
|
height: number | string;
|
|
/**
|
|
* The width of the rectangle.
|
|
*/
|
|
width: number | string;
|
|
/**
|
|
* The x coordinate of the rectangles top left corner.
|
|
*/
|
|
x: number | string;
|
|
/**
|
|
* The y coordinate of the rectangles top left corner.
|
|
*/
|
|
y: number | string;
|
|
}
|
|
|
|
/**
|
|
* A rectangle to be displayed in an Area component.
|
|
*/
|
|
export class AreaRectangle extends React.Component<AreaRectangleProps> { }
|
|
|
|
export interface AreaLineProps extends AreaBaseProps {
|
|
/**
|
|
* The x coordinate of the line's start point.
|
|
*/
|
|
x1: number | string;
|
|
/**
|
|
* The x coordinate of the line's end point.
|
|
*/
|
|
x2: number | string;
|
|
/**
|
|
* The y coordinate of the line's start point.
|
|
*/
|
|
y1: number | string;
|
|
/**
|
|
* The y coordinate of the line's end point.
|
|
*/
|
|
y2: number | string;
|
|
}
|
|
|
|
export class AreaLine extends React.Component<AreaLineProps> { }
|
|
|
|
export interface AreaCircleProps extends AreaBaseProps {
|
|
/**
|
|
* The circle's radius. Percentage values use the Area's width.
|
|
*/
|
|
r: number | string;
|
|
/**
|
|
* The x coordinate of the center of the cirle.
|
|
*/
|
|
x: number | string;
|
|
/**
|
|
* The y coordinate of the center of the cirle.
|
|
*/
|
|
y: number | string;
|
|
}
|
|
|
|
export class AreaCircle extends React.Component<AreaCircleProps> { }
|
|
|
|
export interface AreaBezierProps extends AreaBaseProps {
|
|
/**
|
|
* The x coordinate of the curve's control point at the start.
|
|
*/
|
|
cx1: number | string;
|
|
/**
|
|
* The x coordinate of the curve's control point at the end.
|
|
*/
|
|
cx2: number | string;
|
|
/**
|
|
* The y coordinate of the curve's control point at the start.
|
|
*/
|
|
cy1: number | string;
|
|
/**
|
|
* The y coordinate of the curve's control point at the end.
|
|
*/
|
|
cy2: number | string;
|
|
/**
|
|
* The x coordinate of the curve's start point.
|
|
*/
|
|
x1: number | string;
|
|
/**
|
|
* The x coordinate of the curve's end point.
|
|
*/
|
|
x2: number | string;
|
|
/**
|
|
* The y coordinate of the curve's start point.
|
|
*/
|
|
y1: number | string;
|
|
/**
|
|
* The y coordinate of the curve's end point.
|
|
*/
|
|
y2: number | string;
|
|
}
|
|
|
|
export class AreaBezier extends React.Component<AreaBezierProps> { }
|
|
|
|
export interface AreaPathProps extends AreaBaseProps {
|
|
/**
|
|
* A string describing the path (uses SVG's path syntax, explanation @see https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths).
|
|
*
|
|
* A warning is displayed whan an unimplemented shaped are used (Quadratic Beziers and Arcs).
|
|
*/
|
|
d: string;
|
|
/**
|
|
* Sets the methods how to determine wheter to fill a path. Explanation @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule.
|
|
*/
|
|
fillMode: 'nonzero' | 'evenodd';
|
|
}
|
|
|
|
export class AreaPath extends React.Component<AreaPathProps> { }
|
|
|
|
export interface AreaTextProps extends StyledTextProps, AreaBaseProps { }
|
|
|
|
export class AreaText extends React.Component<AreaTextProps> { }
|
|
|
|
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<AreaGroupProps> { }
|
|
|
|
export interface MouseEvent {
|
|
button: number;
|
|
height: number;
|
|
width: number;
|
|
x: number;
|
|
y: number;
|
|
}
|
|
|
|
export interface KeyboardEvent {
|
|
extKey: number;
|
|
key: string;
|
|
modifierKey: number;
|
|
modifiers: number;
|
|
}
|
|
|
|
export interface AreaProps extends AreaBaseProps {
|
|
/**
|
|
* Called when releasing a key. Return `true` to signal that this event got handled (always returning true will disable any menu accelerators).
|
|
*/
|
|
onKeyDown?: (event: KeyboardEvent) => boolean;
|
|
/**
|
|
* Called when pressing a key. Return `true` to signal that this event got handled (always returning true will disable any menu accelerators).
|
|
*/
|
|
onKeyUp?: (event: KeyboardEvent) => boolean;
|
|
/**
|
|
* Whether the area can be seen.
|
|
*/
|
|
onMouseDown?: (event: MouseEvent) => void;
|
|
/**
|
|
* Called when the mouse enters the area.
|
|
*/
|
|
onMouseEnter?: () => void;
|
|
/**
|
|
* Called when the mouse leaves the area.
|
|
*/
|
|
onMouseLeave?: () => void;
|
|
/**
|
|
* Called when the mouse is moved over the area
|
|
*/
|
|
onMouseMove?: (event: {
|
|
buttons: ReadonlyArray<string>;
|
|
height: number;
|
|
width: number;
|
|
x: number;
|
|
y: number;
|
|
}) => void;
|
|
/**
|
|
* **Not working at the moment.**
|
|
*
|
|
* Called when releasing a mouse button over the area.
|
|
*/
|
|
onMouseUp?: (event: MouseEvent) => void;
|
|
/**
|
|
* Whether the area can be seen.
|
|
*/
|
|
visible?: boolean;
|
|
}
|
|
|
|
/**
|
|
* A component onto which area components like rectangles or circles can be drawn.
|
|
*
|
|
* Some props can be applied to all area components (including Area itself and children)
|
|
* @see https://proton-native.js.org/#/area_props.
|
|
*/
|
|
export class Area extends React.Component<AreaProps> {
|
|
/**
|
|
* A Bezier curve to be displayed in an Area component.
|
|
*/
|
|
static Bezier: typeof AreaBezier;
|
|
/**
|
|
* 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.
|
|
*/
|
|
static Line: typeof AreaLine;
|
|
/**
|
|
* A component describing a path to be displayed 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 Path: typeof AreaPath;
|
|
/**
|
|
* 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 {
|
|
/**
|
|
* Whether the Box is enabled.
|
|
*/
|
|
enabled?: boolean;
|
|
/**
|
|
* Whether there is extra space between the children in the Box.
|
|
*/
|
|
padded?: boolean;
|
|
/**
|
|
* Whether the Box arranges its children vertically or horizontally.
|
|
*/
|
|
vertical?: boolean;
|
|
/**
|
|
* Whether the Box and its children can be seen.
|
|
*/
|
|
visible?: boolean;
|
|
}
|
|
|
|
export class Box extends React.Component<BoxProps> { }
|
|
|
|
export interface ButtonProps extends GridChildrenProps, Label, Stretchy {
|
|
/**
|
|
* The text to display in the button.
|
|
*/
|
|
children?: string;
|
|
/**
|
|
* Whether the button can be clicked.
|
|
*/
|
|
enabled?: boolean;
|
|
/**
|
|
* Called when the button is clicked.
|
|
*/
|
|
onClick?: () => void;
|
|
/**
|
|
* Whether the button can be seen.
|
|
*/
|
|
visible?: boolean;
|
|
}
|
|
|
|
/**
|
|
* A container for multiple components that are ordered vertically or horizontally. Similar to React Native's `View`.
|
|
*/
|
|
export class Button extends React.Component<ButtonProps> { }
|
|
|
|
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.
|
|
*/
|
|
onToggle?: (checked: boolean) => void;
|
|
/**
|
|
* Whether the checkbox can be seen.
|
|
*/
|
|
visible?: boolean;
|
|
}
|
|
|
|
export class Checkbox extends React.Component<CheckboxProps> { }
|
|
|
|
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).
|
|
*/
|
|
color?: string;
|
|
/**
|
|
* Called when the color is changed for the ColorButton. The current color is passed as an object of RGBA.
|
|
*/
|
|
onChange?: (color: {
|
|
r: number,
|
|
g: number,
|
|
b: number,
|
|
a: number
|
|
}) => void;
|
|
}
|
|
|
|
/**
|
|
* A button that allows the user to choose a color.
|
|
*/
|
|
export class ColorButton extends React.Component<ColorButtonProps> { }
|
|
|
|
export interface FormProps extends GridChildrenProps, Stretchy {
|
|
/**
|
|
* Whether the Form is enabled.
|
|
*/
|
|
enabled?: boolean;
|
|
/**
|
|
* Whether there is padding between the components
|
|
*/
|
|
padded?: boolean;
|
|
/**
|
|
* Whether the Form can be seen.
|
|
*/
|
|
visible?: boolean;
|
|
}
|
|
|
|
/**
|
|
* A container where there is a label on the left and a component on the right.
|
|
*
|
|
* Each form component has a single prop, `label` which sets the label to its left. It is required.
|
|
*/
|
|
export class Form extends React.Component<FormProps> { }
|
|
|
|
export interface GridChildrenProps {
|
|
/**
|
|
* Whether the component is aligned with the other components in the column/row.
|
|
*/
|
|
align?: {
|
|
h: boolean;
|
|
v: boolean;
|
|
};
|
|
/**
|
|
* What column the component resides in.
|
|
*/
|
|
column?: number;
|
|
/**
|
|
* Whether the component can expand in the direction.
|
|
*/
|
|
expand?: {
|
|
h: boolean;
|
|
v: boolean;
|
|
};
|
|
/**
|
|
* What row the component resides in.
|
|
*/
|
|
row?: number;
|
|
/**
|
|
* How many rows/columns the component takes off.
|
|
*/
|
|
span?: {
|
|
x: number;
|
|
y: number;
|
|
};
|
|
}
|
|
|
|
export interface GridProps {
|
|
/**
|
|
* Whether the Grid is enabled.
|
|
*/
|
|
enabled?: boolean;
|
|
/**
|
|
* Whether there is padding between the components
|
|
*/
|
|
padded?: boolean;
|
|
/**
|
|
* Whether the Grid can be seen.
|
|
*/
|
|
visible?: boolean;
|
|
}
|
|
|
|
/**
|
|
* A grid where components can be placed in rows and columns.
|
|
*/
|
|
export class Grid extends React.Component<GridProps> { }
|
|
|
|
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.
|
|
*/
|
|
enabled?: boolean;
|
|
/**
|
|
* Whether there is a margin inside the group.
|
|
*/
|
|
margined?: boolean;
|
|
/**
|
|
* The name of the group.
|
|
*/
|
|
title?: string;
|
|
/**
|
|
* Whether the Grid can be seen.
|
|
*/
|
|
visible?: boolean;
|
|
}
|
|
|
|
/**
|
|
* 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<GroupProps> { }
|
|
|
|
export interface Label {
|
|
/**
|
|
* Label for Form and Tab children
|
|
*/
|
|
label?: string;
|
|
}
|
|
|
|
export interface MenuProps {
|
|
/**
|
|
* The name of the menu.
|
|
*/
|
|
label?: string;
|
|
}
|
|
|
|
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.
|
|
*
|
|
* - `Check` - a checkable option in the menu.
|
|
* - `Quit` - a Quit button. This accepts no text.
|
|
* - `About` - an About button. This accepts no text.
|
|
* - `Preferences` - a Preferences button. This accepts no text.
|
|
* - `Separator` - a Separator between menu items. This accepts no text.
|
|
* - `Item` - a normal menu button. This is the default.
|
|
*/
|
|
type?: 'Check' | 'Quit' | 'About' | 'Preferences' | 'Separator' | 'Item';
|
|
/**
|
|
* 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<MenuItemProps> { }
|
|
|
|
/**
|
|
* The top bar on a window that can have multiple options.
|
|
*
|
|
* The menu must come outside and before the Window for it to take effect. It is made up of Menu.Items. Menus can be embedded inside eachother to make sub-menus.
|
|
*/
|
|
export class Menu extends React.Component<MenuProps> {
|
|
/**
|
|
* A single item in a Menu.
|
|
*/
|
|
static Item: typeof MenuItem;
|
|
}
|
|
|
|
export interface PickerProps extends GridChildrenProps, Label, Stretchy {
|
|
/**
|
|
* Whether the user can enter their own custom text in addition to the drop down menu.
|
|
*/
|
|
editable?: boolean;
|
|
/**
|
|
* Whether the Picker is enabled.
|
|
*/
|
|
enabled?: boolean;
|
|
/**
|
|
* When an *editable* Picker is changed. The current text is passed as an argument.
|
|
*/
|
|
onChange?: (text: string) => void;
|
|
/**
|
|
* When a *non-editable* Picker is changed. The current selection is passed as an argument.
|
|
*/
|
|
onSelect?: (selection: number) => void;
|
|
/**
|
|
* What element is selected if the picker *is not* editable.
|
|
*/
|
|
selected?: number;
|
|
/**
|
|
* What text is selected/typed if the picker *is* editable.
|
|
*/
|
|
text?: string;
|
|
/**
|
|
* Whether the Picker can be seen.
|
|
*/
|
|
visible?: boolean;
|
|
}
|
|
|
|
export interface PickerItemProps {
|
|
children: string;
|
|
}
|
|
|
|
export class PickerItem extends React.Component<PickerItemProps> { }
|
|
|
|
/**
|
|
* A drop down menu where the user can pick different values.
|
|
*/
|
|
export class Picker extends React.Component<PickerProps> {
|
|
static Item: typeof PickerItem;
|
|
}
|
|
|
|
export interface ProgressBarProps extends GridChildrenProps, Label, Stretchy {
|
|
/**
|
|
* Whether the ProgressBar is enabled.
|
|
*/
|
|
enabled?: boolean;
|
|
/**
|
|
* The current value of the ProgressBar (0-100). A value of -1 indicates an indeterminate progressbar.
|
|
*/
|
|
value?: number;
|
|
/**
|
|
* Whether the ProgressBar can be seen.
|
|
*/
|
|
visible?: boolean;
|
|
}
|
|
|
|
/**
|
|
* A bar that shows the progress in a certain task, 0-100.
|
|
*/
|
|
export class ProgressBar extends React.Component<ProgressBarProps> { }
|
|
|
|
export interface RadioButtonsItemProps {
|
|
children: string;
|
|
}
|
|
|
|
export class RadioButtonsItem extends React.Component<RadioButtonsItemProps> { }
|
|
|
|
export interface RadioButtonsProps extends GridChildrenProps, Label, Stretchy {
|
|
/**
|
|
* Whether the RadioButtons can be used.
|
|
*/
|
|
enabled?: boolean;
|
|
/**
|
|
* Called when a RadioButton is selected. The number selected is passed as an argument.
|
|
*/
|
|
onSelect?: (selected: number) => void;
|
|
/**
|
|
* What RadioButton is selected, zero-indexed. -1 means nothing is selected.
|
|
*/
|
|
selected?: number;
|
|
/**
|
|
* Whether the RadioButtons can be seen.
|
|
*/
|
|
visible?: boolean;
|
|
}
|
|
|
|
/**
|
|
* A choice between multiple options.
|
|
*
|
|
* 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<RadioButtonsProps> {
|
|
static Item: typeof RadioButtonsItem;
|
|
}
|
|
|
|
export interface SeparatorProps extends GridChildrenProps, Label, Stretchy {
|
|
/**
|
|
* Whether the Separator is enabled.
|
|
*/
|
|
enabled?: boolean;
|
|
/**
|
|
* Whether the line is vertical or horizontal.
|
|
*/
|
|
vertical?: boolean;
|
|
/**
|
|
* Whether the Separator can be seen.
|
|
*/
|
|
visible?: boolean;
|
|
}
|
|
|
|
/**
|
|
* A line to separate two components, commonly used in a Box.
|
|
*/
|
|
export class Separator extends React.Component<SeparatorProps> { }
|
|
|
|
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.
|
|
*/
|
|
onChange?: (value: number) => void;
|
|
/**
|
|
* The current value of the Slider (0-100).
|
|
*/
|
|
value?: number;
|
|
/**
|
|
* Whether the Slider can be seen.
|
|
*/
|
|
visible?: boolean;
|
|
}
|
|
|
|
/**
|
|
* A bar that can be dragged by the user from 0-100.
|
|
*/
|
|
export class Slider extends React.Component<SliderProps> { }
|
|
|
|
export interface SpinBoxProps extends GridChildrenProps, Label, Stretchy {
|
|
/**
|
|
* Whether the Spinbox is enabled.
|
|
*/
|
|
enabled?: boolean;
|
|
/**
|
|
* When the Spinbox value is changed. The current value is passed as a parameter.
|
|
*/
|
|
onChange?: (value: number) => void;
|
|
/**
|
|
* What the value of the Spinbox is set to.
|
|
*/
|
|
value?: number;
|
|
/**
|
|
* Whether the Spinbox can be seen.
|
|
*/
|
|
visible?: boolean;
|
|
}
|
|
|
|
/**
|
|
* A location for the user to choose a number.
|
|
*/
|
|
export class SpinBox extends React.Component<SpinBoxProps> { }
|
|
|
|
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 StyledTextProps {
|
|
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.)
|
|
*/
|
|
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 StyledText extends React.Component<StyledTextProps> { }
|
|
|
|
export interface TabProps extends GridChildrenProps {
|
|
/**
|
|
* Whether the Tab is enabled.
|
|
*/
|
|
enabled?: boolean;
|
|
/**
|
|
* Whether the Tab can be seen.
|
|
*/
|
|
visible?: boolean;
|
|
}
|
|
|
|
/**
|
|
* A component with different named tabs containing other components.
|
|
*
|
|
* Each child is required to have a label prop that is displayed at the top and names the tab.
|
|
*/
|
|
export class Tab extends React.Component<TabProps> { }
|
|
|
|
export interface TextProps extends GridChildrenProps, Label, Stretchy {
|
|
/**
|
|
* The text to display.
|
|
*/
|
|
children?: string;
|
|
}
|
|
|
|
/**
|
|
* Displays some text.
|
|
*/
|
|
export class Text extends React.Component<TextProps> { }
|
|
|
|
export interface TextInputProps extends GridChildrenProps, Label, Stretchy {
|
|
/**
|
|
* The default text in the TextInput.
|
|
*/
|
|
children?: string;
|
|
/**
|
|
* Whether the TextInput can be used.
|
|
*/
|
|
enabled?: boolean;
|
|
/**
|
|
* Whether multiple lines can be inputted into the TextInput.
|
|
*/
|
|
multiline?: boolean;
|
|
/**
|
|
* Called when the TextInput text is changed. The new text is passed as an argument.
|
|
*/
|
|
onChange?: (text: string) => void;
|
|
/**
|
|
* Whether the TextInput can be written to by the user.
|
|
*/
|
|
readOnly?: boolean;
|
|
/**
|
|
* Whether characters are hidden in the TextInput. Commonly used for passwords.
|
|
*/
|
|
secure?: boolean;
|
|
/**
|
|
* Whether the TextInput can be seen.
|
|
*/
|
|
visible?: boolean;
|
|
}
|
|
|
|
/**
|
|
* A place for the user to type in a string.
|
|
*/
|
|
export class TextInput extends React.Component<TextInputProps> { }
|
|
|
|
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.
|
|
*/
|
|
closed?: boolean;
|
|
/**
|
|
* Whether the window will be fullscreen on start.
|
|
*/
|
|
fullscreen?: boolean;
|
|
/**
|
|
* Whether the window is the last window. If set to `true`, then the program will quit once the window is closed.
|
|
*/
|
|
lastWindow?: boolean;
|
|
/**
|
|
* Whether all children will have a margin around them and the outer edge of the window.
|
|
*/
|
|
margined?: boolean;
|
|
/**
|
|
* Whether a menubar will be shown on the top of the window.
|
|
*/
|
|
menuBar?: boolean;
|
|
/**
|
|
* Called when the window is closed.
|
|
*/
|
|
onClose?: () => void;
|
|
/**
|
|
* Called when the window size is changed by the user. The new size is passed as an argument, in an object.
|
|
*/
|
|
onContentSizeChange?: (size: {
|
|
h: number,
|
|
y: number
|
|
}) => void;
|
|
/**
|
|
* How big the window is when the application is first started.
|
|
*/
|
|
size?: {
|
|
h: number,
|
|
w: number
|
|
};
|
|
/**
|
|
* The title of the window. Will be shown at the top left ribbon.
|
|
*/
|
|
title?: string;
|
|
}
|
|
|
|
/**
|
|
* 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<WindowProps> { }
|
|
|
|
/**
|
|
* Renders the input component
|
|
*/
|
|
export function render(element: JSX.Element): void;
|
|
|
|
/**
|
|
* A method to display an alert.
|
|
* @param type What type the dialog is. The current types are:
|
|
* - Message - a simple message
|
|
* - Error - an error message
|
|
* - Open - open a file
|
|
* - Save - save a file
|
|
* @param options Options for the title and descript.
|
|
*/
|
|
export function Dialog(
|
|
type: 'Message' | 'Error',
|
|
options?: {
|
|
title: string,
|
|
description?: string
|
|
} | {
|
|
title?: string,
|
|
description: string
|
|
}
|
|
): void;
|
|
|
|
/**
|
|
* A dialog to save or open a file. Returns chosen file path.
|
|
* @param type What type the dialog is. The current types are:
|
|
* - Open - open a file
|
|
* - Save - save a file
|
|
*/
|
|
export function Dialog(type: 'Open' | 'Save'): string;
|