vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Merge pull request #1070 from katzoo/update-typings 

update typings to 1.3.3
old
Javi Velasco 2016-12-23 09:25:43 +01:00 committed by GitHub
parent 5b0cf6b309 b5e0c6207e
commit e2be2a34f6
29 changed files with 893 additions and 351 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/app_bar/index.d.ts vendored
View File

@ -17,7 +17,7 @@ export interface AppBarTheme {
/**
* Used as the app bar title.
*/
title ?: string;
title?: string;
/**
* Added to the left icon app bar element.
*/
@ -26,9 +26,13 @@ export interface AppBarTheme {
* Added to the right icon app bar element.
*/
rightIcon?: string;
/**
* Added to the root element when the app bar is hidden during scroll.
*/
scrollHide?: string;
}
interface AppBarProps extends ReactToolbox.Props {
export interface AppBarProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
@ -50,7 +54,7 @@ interface AppBarProps extends ReactToolbox.Props {
/**
* If it exists it is used as the AppBar left icon
*/
leftIcon?: string;
leftIcon?: string | React.ReactNode;
/**
* Called when the left icon is clicked
*/
@ -58,11 +62,16 @@ interface AppBarProps extends ReactToolbox.Props {
/**
* If it exists it is used as the AppBar right icon
*/
rightIcon?: string;
rightIcon?: string | React.ReactNode;
/**
* Called when the righticon is clicked
*/
onRightIconClick?: Function;
/**
* Whether AppBar should be hidden during scroll.
* @default false
*/
scrollHide?: boolean;
/**
* Classnames object defining the component style.
*/

35
components/autocomplete/index.d.ts vendored
View File

@ -1,5 +1,6 @@
import * as React from "react";
import ReactToolbox from "../index";
import { InputTheme } from "../input"
export interface AutocompleteTheme {
/**
@ -18,10 +19,6 @@ export interface AutocompleteTheme {
* Used to style the Input component.
*/
input?: string;
/**
* Used for the label.
*/
label?: string;
/**
* Used to style each suggestion.
*/
@ -44,7 +41,12 @@ export interface AutocompleteTheme {
values?: string;
}
interface AutocompleteProps extends ReactToolbox.Props {
export interface AutocompleteProps extends ReactToolbox.Props {
/**
* Determines if user can create a new option with the current typed value.
* @default false
*/
allowCreate?: boolean;
/**
* Determines the opening direction. It can be auto, up or down.
* @default auto
@ -52,6 +54,7 @@ interface AutocompleteProps extends ReactToolbox.Props {
direction?: "auto" | "up" | "down";
/**
* If true, component will be disabled.
* @default false
*/
disabled?: boolean;
/**
@ -59,22 +62,34 @@ interface AutocompleteProps extends ReactToolbox.Props {
* @default false
*/
error?: string | React.ReactNode;
/**
* Whether component should keep focus after value change.
* @default false
*/
keepFocusOnChange?: boolean;
/**
* The text string to use for the floating label element.
*/
label?: string | React.ReactNode;
/**
* If true, component can hold multiple values.
* @default true
*/
multiple?: boolean;
/**
* Callback function that is fired when component is blurred.
*/
onBlur?: Function;
/**
* Callback function that is fired when the components's value changes.
* @default auto
*/
onChange?: Function;
/**
* Callback function that is fired when component is focused.
*/
onFocus?: Function;
/**
* Callback function that is fired when the components's query value changes.
* @default auto
*/
onQueryChange?: Function;
/**
@ -104,11 +119,15 @@ interface AutocompleteProps extends ReactToolbox.Props {
/**
* Classnames object defining the component style.
*/
theme?: AutocompleteTheme;
theme?: AutocompleteTheme & InputTheme;
/**
* Value or array of values currently selected component.
*/
value?: any;
/**
* Additional properties passed to inner Input component.
*/
[key: string]: any;
}
export class Autocomplete extends React.Component<AutocompleteProps, {}> { }

7
components/avatar/index.d.ts vendored
View File

@ -16,13 +16,14 @@ export interface AvatarTheme {
letter?: string;
}
interface AvatarProps extends ReactToolbox.Props {
export interface AvatarProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Set to true if your image is not squared so it will be used as a cover for the element.
* @default false
*/
cover?: boolean;
/**
@ -41,6 +42,10 @@ interface AvatarProps extends ReactToolbox.Props {
* A title for the image. If no image is provided, the first letter will be displayed as the avatar.
*/
title?: string;
/**
* Additional properties for component root element.
*/
[key: string]: any;
}
export class Avatar extends React.Component<AvatarProps, {}> { }

193
components/button/index.d.ts vendored
View File

@ -52,7 +52,7 @@ export interface ButtonTheme {
toggle?: string;
}
interface ButtonProps extends ReactToolbox.Props {
interface ButtonBaseProps extends ReactToolbox.Props {
/**
* Indicates if the button should have accent color.
* @default false
@ -67,6 +67,45 @@ interface ButtonProps extends ReactToolbox.Props {
* @default false
*/
disabled?: boolean;
/**
* Value of the icon (See Font Icon Component).
*/
icon?: React.ReactNode | string;
/**
* If true, the neutral colors are inverted. Useful to put a button over a dark background.
*/
inverse?: boolean;
/**
* Set it to false if you don't want the neutral styles to be included.
* @default true
*/
neutral?: boolean;
/**
* Fires after the mouse leaves the Component.
*/
onMouseLeave?: Function;
/**
* Fires after the mouse is released from the Component.
*/
onMouseUp?: Function;
/**
* Indicates if the button should have primary color.
* @default false
*/
primary?: boolean;
/**
* If true, component will have a ripple effect on click.
* @default true
*/
ripple?: boolean;
/**
* Component root container type.
* @default button
*/
type?: string;
}
export interface ButtonProps extends ButtonBaseProps {
/**
* If true, the button will have a flat look.
* @default false
@ -81,14 +120,6 @@ interface ButtonProps extends ReactToolbox.Props {
* Creates a link for the button.
*/
href?: string;
/**
* Value of the icon (See Font Icon Component).
*/
icon?: React.ReactNode | string;
/**
* If true, the neutral colors are inverted. Useful to put a button over a dark background.
*/
inverse?: boolean;
/**
* The text string to use for the name of the button.
*/
@ -98,26 +129,11 @@ interface ButtonProps extends ReactToolbox.Props {
* @default false
*/
mini?: boolean;
/**
* Set it to false if you don't want the neutral styles to be included.
* @default true
*/
neutral?: boolean;
/**
* Indicates if the button should have primary color.
* @default false
*/
primary?: boolean;
/**
* If true, the button will have a raised look.
* @default false
*/
raised?: boolean;
/**
* If true, component will have a ripple effect on click.
* @default true
*/
ripple?: boolean;
/**
* Classnames object defining the component style.
*/
@ -161,48 +177,11 @@ export interface IconButtonTheme {
toggle?: string;
}
interface IconButtonProps extends ReactToolbox.Props {
/**
* Indicates if the button should have accent color.
* @default false
*/
accent?: boolean;
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* If true, component will be disabled.
* @default false
*/
disabled?: boolean;
export interface IconButtonProps extends ButtonBaseProps {
/**
* Creates a link for the button.
*/
href?: string;
/**
* Value of the icon (See Font Icon Component).
*/
icon?: React.ReactNode | string;
/**
* If true, the neutral colors are inverted. Useful to put a button over a dark background.
*/
inverse?: boolean;
/**
* Set it to false if you don't want the neutral styles to be included.
* @default true
*/
neutral?: boolean;
/**
* Indicates if the button should have primary color.
* @default false
*/
primary?: boolean;
/**
* If true, component will have a ripple effect on click.
* @default true
*/
ripple?: boolean;
/**
* Classnames object defining the component style.
*/
@ -211,72 +190,9 @@ interface IconButtonProps extends ReactToolbox.Props {
export class IconButton extends React.Component<IconButtonProps, {}> { }
export interface BrowseButtonTheme {
/**
* Used for the root in case button is accent.
*/
accent?: string;
/**
* Used for the root element in any button.
*/
button?: string;
/**
* Used when the button is flat for the root element.
*/
flat?: string;
/**
* Used when the button is floating for the root element.
*/
floating?: string;
/**
* For the icon inside a button.
*/
icon?: string;
/**
* Used when colors are inverted.
*/
inverse?: string;
/**
* Used for mini floating buttons.
*/
mini?: string;
/**
* Used for neutral colored buttons.
*/
neutral?: string;
/**
* Used for primary buttons when button is primary.
*/
primary?: string;
/**
* Used when the button is raised for root element.
*/
raised?: string;
/**
* Used for the ripple element.
*/
rippleWrapper?: string;
/**
* Used for toggle buttons in the root element.
*/
toggle?: string;
}
export interface BrowseButtonTheme extends ButtonTheme { }
interface BrowseButtonProps extends ReactToolbox.Props {
/**
* Indicates if the button should have accent color.
* @default false
*/
accent?: boolean;
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* If true, component will be disabled.
* @default false
*/
disabled?: boolean;
export interface BrowseButtonProps extends ButtonBaseProps {
/**
* If true, the button will have a flat look.
* @default false
@ -291,14 +207,6 @@ interface BrowseButtonProps extends ReactToolbox.Props {
* Creates a link for the button.
*/
href?: string;
/**
* Value of the icon (See Font Icon Component).
*/
icon?: React.ReactNode | string;
/**
* If true, the neutral colors are inverted. Useful to put a button over a dark background.
*/
inverse?: boolean;
/**
* The text string to use for the name of the button.
*/
@ -308,26 +216,11 @@ interface BrowseButtonProps extends ReactToolbox.Props {
* @default false
*/
mini?: boolean;
/**
* Set it to false if you don't want the neutral styles to be included.
* @default true
*/
neutral?: boolean;
/**
* Indicates if the button should have primary color.
* @default false
*/
primary?: boolean;
/**
* If true, the button will have a raised look.
* @default false
*/
raised?: boolean;
/**
* If true, component will have a ripple effect on click.
* @default true
*/
ripple?: boolean;
/**
* Classnames object defining the component style.
*/

94
components/card/index.d.ts vendored
View File

@ -2,29 +2,46 @@ import * as React from "react";
import ReactToolbox from "../index";
export interface CardTheme {
/**
* Class used for the root element.
*/
card?: string;
/**
*Added to the root element in case the card is raised.
*/
raised?: string;
}
interface CardProps extends ReactToolbox.Props {
export interface CardProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Increases the shadow depth to appear elevated.
* @default false
*/
raised?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: CardTheme;
/**
* Additional properties passed to component root.
*/
[key: string]: any;
}
export class Card extends React.Component<CardProps, {}> { }
export interface CardActionsTheme {
/**
* Used for a wrapper around actions as the root element.
*/
cardActions?: string;
}
interface CardActionsProps extends ReactToolbox.Props {
export interface CardActionsProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
@ -33,40 +50,78 @@ interface CardActionsProps extends ReactToolbox.Props {
* Classnames object defining the component style.
*/
theme?: CardActionsTheme;
/**
* Additional properties passed to component root.
*/
[key: string]: any;
}
export class CardActions extends React.Component<CardActionsProps, {}> { }
export interface CardMediaTheme {
/**
* Added to the element root.
*/
cardMedia?: string;
/**
* Used for the content element.
*/
content?: string;
/**
* Added to content element if its overlayed.
*/
contentOverlay?: string;
/**
* Added to content element if its squared.
*/
square?: string;
/**
* Added to content element if its wide.
*/
wide?: string;
}
interface CardMediaProps extends ReactToolbox.Props {
export interface CardMediaProps extends ReactToolbox.Props {
/**
* Forces a 16:9 or 1:1 aspect ratio respectively. Unset, the media area will have a flexible height.
*/
aspectRatio?: "wide" | "square";
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Sets the background color.
*/
color?: string;
/**
* Creates a dark overlay underneath the child components.
*/
contentOverlay?: boolean;
/**
* Can be used instead of children. Accepts an element or a URL string.
*/
image?: React.ReactNode | string;
/**
* Classnames object defining the component style.
*/
theme?: CardMediaTheme;
/**
* Additional properties passed to component root.
*/
[key: string]: any;
}
export class CardMedia extends React.Component<CardMediaProps, {}> { }
export interface CardTextTheme {
/**
* Used for the main root element.
*/
cardText?: string;
}
interface CardTextProps extends ReactToolbox.Props {
export interface CardTextProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
@ -75,28 +130,57 @@ interface CardTextProps extends ReactToolbox.Props {
* Classnames object defining the component style.
*/
theme?: CardTextTheme;
/**
* Additional properties passed to component root.
*/
[key: string]: any;
}
export class CardText extends React.Component<CardTextProps, {}> { }
export interface CardTitleTheme {
/**
* Class used for the root element.
*/
cardTitle?: string;
/**
* Added to the root element when the card has no avatar.
*/
large?: string;
/**
* Added to the title element.
*/
title?: string;
/**
* Added to the root element when the card has avatar.
*/
small?: string;
/**
* Added to the subtitle element.
*/
subtitle?: string;
}
interface CardTitleProps extends ReactToolbox.Props {
export interface CardTitleProps extends ReactToolbox.Props {
/**
* A string URL or Element to specify an avatar in the left side of the title.
*/
avatar?: React.ReactNode | string;
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Text used for the sub header of the card.
*/
subtitle?: React.ReactNode | string;
/**
* Classnames object defining the component style.
*/
theme?: CardTitleTheme;
/**
* Text used for the title of the card.
*/
title?: React.ReactNode | string;
}

10
components/checkbox/index.d.ts vendored
View File

@ -32,12 +32,16 @@ export interface CheckboxTheme {
text?: string;
}
interface CheckboxProps extends ReactToolbox.Props {
export interface CheckboxProps extends ReactToolbox.Props {
/**
* Value for the checkbox, can be true or false.
* @default false
*/
checked?: boolean;
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* If true, the checkbox shown as disabled and cannot be modified.
* @default false
@ -63,6 +67,10 @@ interface CheckboxProps extends ReactToolbox.Props {
* Classnames object defining the component style.
*/
theme?: CheckboxTheme;
/**
* Additional properties passed to inner input element.
*/
[key: string]: any;
}
export class Checkbox extends React.Component<CheckboxProps, {}> { }

2
components/chip/index.d.ts vendored
View File

@ -28,7 +28,7 @@ export interface ChipTheme {
deleteX?: string;
}
interface ChipProps extends ReactToolbox.Props {
export interface ChipProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/

70
components/date_picker/index.d.ts vendored
View File

@ -84,12 +84,30 @@ export interface DatePickerTheme {
yearsDisplay?: string;
}
interface DatePickerProps extends ReactToolbox.Props {
export interface DatePickerProps extends ReactToolbox.Props {
/**
* Allows to control if the picker should be shown from outside. Beware you should update the prop when the Dialog is closed.
* @default false
*/
active?: boolean;
/**
* Automatically selects a date upon clicking on a day
* @default false
*/
autoOk?: boolean;
/**
* Label used for cancel button on Dialog.
* @default "Cancel"
*/
cancelLabel?: string;
/**
* An array of date objects which will be disabled in the calendar. All other dates will be enabled.
*/
disabledDates?: Date[];
/**
* An array of date objects which will be enabled in the calendar. All other dates will be disabled.
*/
enabledDates?: Date[];
/**
* Give an error node to display under the field.
*/
@ -110,6 +128,11 @@ interface DatePickerProps extends ReactToolbox.Props {
* The text string to use for the floating label element in the input component.
*/
label?: string;
/**
* Sets locale for the Dialog.
* @default "en"
*/
locale?: "de" | "no" | "en" | "es" | "af" | "ar" | "be" | "bg" | "bn" | "bo" | "br" | "bs" | "ca" | "gl" | "eu" | "pt" | "it" | "fr" | "ru" | "ua" | DatePickerLocale;
/**
* Date object with the maximum selectable date.
*/
@ -122,14 +145,31 @@ interface DatePickerProps extends ReactToolbox.Props {
* Name for the input field.
*/
name?: string;
/**
* Label used for 'OK' button on Dialog.
* @default "Ok"
*/
okLabel?: string;
/**
* Callback called when the picker value is changed.
*/
onChange?: Function;
/**
* Callback fired on Input click.
*/
onClick?: Function;
/**
* Callback fired after dismissing the Dialog.
*/
onDismiss?: Function;
/**
* Callback called when the ESC key is pressed with the overlay active.
*/
onEscKeyDown?: Function;
/**
* Callback invoked on Input key press.
*/
onKeyPress?: Function;
/**
* Callback to be invoked when the dialog overlay is clicked.
*/
@ -138,6 +178,11 @@ interface DatePickerProps extends ReactToolbox.Props {
* The input element will be readonly and look like disabled.
*/
readonly?: boolean;
/**
* Set week's first day to Sunday. Default week's first day is Monday.
* @default false
*/
sundayFirstDayOfWeek?: boolean;
/**
* Classnames object defining the component style.
*/
@ -148,6 +193,29 @@ interface DatePickerProps extends ReactToolbox.Props {
value?: Date | string;
}
export interface DatePickerLocale {
/**
* Month names.
*/
months?: string[];
/**
* Month short names.
*/
monthsShort?: string[];
/**
* Day names starting from Sunday.
*/
weekdays?: string[];
/**
* Day short names starting from Sunday.
*/
weekdaysShort?: string[];
/**
* Day letters starting from Sunday.
*/
weekdaysLetter?: string[];
}
export class DatePicker extends React.Component<DatePickerProps, {}> { }
export default DatePicker;

8
components/dialog/index.d.ts vendored
View File

@ -28,7 +28,7 @@ export interface DialogTheme {
title?: string;
}
interface DialogActionProps {
export interface DialogActionProps {
/**
* The text string to use for the name of the button.
*/
@ -39,7 +39,7 @@ interface DialogActionProps {
onClick?: Function;
}
interface DialogProps extends ReactToolbox.Props {
export interface DialogProps extends ReactToolbox.Props {
/**
* A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
*/
@ -83,9 +83,9 @@ interface DialogProps extends ReactToolbox.Props {
title?: string;
/**
* Used to determine the size of the dialog. It can be small, normal or large.
* @default normal
* @default "normal"
*/
type?: string;
type?: "small" | "normal" | "large" | string;
}
export class Dialog extends React.Component<DialogProps, {}> { }

2
components/drawer/index.d.ts vendored
View File

@ -24,7 +24,7 @@ export interface DrawerTheme {
right?: string;
}
interface DrawerProps extends ReactToolbox.Props {
export interface DrawerProps extends ReactToolbox.Props {
/**
* If true, the drawer will be visible.
* @default false

7
components/dropdown/index.d.ts vendored
View File

@ -30,6 +30,10 @@ export interface DropdownTheme {
* Used for the the label element.
*/
label?: string;
/**
* Used when dropdown has required attribute.
*/
required?: string;
/**
* Used to highlight the selected value.
*/
@ -52,7 +56,7 @@ export interface DropdownTheme {
values?: string;
}
interface DropdownProps extends ReactToolbox.Props {
export interface DropdownProps extends ReactToolbox.Props {
/**
* If true the dropdown will preselect the first item if the supplied value matches none of the options' values.
* @default true
@ -110,6 +114,7 @@ interface DropdownProps extends ReactToolbox.Props {
value?: string | number;
/**
* If true, the dropdown has a required attribute.
* @default false
*/
required?: boolean;
}

6
components/font_icon/index.d.ts vendored
View File

@ -1,7 +1,7 @@
import * as React from "react";
import ReactToolbox from "../index";
interface FontIconProps extends ReactToolbox.Props {
export interface FontIconProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
@ -10,6 +10,10 @@ interface FontIconProps extends ReactToolbox.Props {
* The key string for the icon you want be displayed.
*/
value?: React.ReactNode | string;
/**
* Additional properties passed to component root.
*/
[key: string]: any
}
export class FontIcon extends React.Component<FontIconProps, {}> { }

9
components/input/index.d.ts vendored
View File

@ -52,7 +52,7 @@ export interface InputTheme {
withIcon?: string;
}
interface InputProps extends ReactToolbox.Props {
export interface InputProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
@ -117,12 +117,17 @@ interface InputProps extends ReactToolbox.Props {
* @default false
*/
required?: boolean;
/**
* The number of rows the multiline input field has.
*/
rows?:number;
/**
* Classnames object defining the component style.
*/
theme?: InputTheme;
/**
* Type of the input element. It can be a valid HTML5 input type
* Type of the input element. It can be a valid HTML5 input type.
* @default "text"
*/
type?: string;
/**

30
components/layout/index.d.ts vendored
View File

@ -8,7 +8,7 @@ export interface LayoutTheme {
layout?: string;
}
interface LayoutProps extends ReactToolbox.Props {
export interface LayoutProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
@ -33,11 +33,15 @@ export interface NavDrawerTheme {
/**
* Added to the root class for large drawer.
*/
lgPermangent?: string;
lgPermanent?: string;
/**
* Added to the root class for large drawer (tablet landscape).
*/
lgTabletPermanent?: string;
/**
* Added to the root class for medium drawer.
*/
mdPermangent?: string;
mdPermanent?: string;
/**
* Root class for the drawer.
*/
@ -58,6 +62,10 @@ export interface NavDrawerTheme {
* Added to the root class for small drawer.
*/
smPermanent?: string;
/**
* Added to the root class for small drawer (tablet portrait).
*/
smTabletPermanent?: string;
/**
* Added to the root class if width is wide.
*/
@ -69,14 +77,14 @@ export interface NavDrawerTheme {
/**
* Added to the root class for super big drawer.
*/
xxlPermangent?: string;
xxlPermanent?: string;
/**
* Added to the root class for largest possible drawer.
*/
xxxlPermangent?: string;
xxxlPermanent?: string;
}
interface NavDrawerProps extends ReactToolbox.Props {
export interface NavDrawerProps extends ReactToolbox.Props {
/**
* If true, the drawer will be shown as an overlay.
* @default false
@ -93,7 +101,7 @@ interface NavDrawerProps extends ReactToolbox.Props {
/**
* The breakpoint at which the drawer is automatically pinned.
*/
permanentAt?: "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
permanentAt?: "sm" | "smTablet" | "md" | "lg" | "lgTablet" | "xl" | "xxl" | "xxxl";
/**
* If true, the drawer will be pinned open. pinned takes precedence over active.
* @default false
@ -128,11 +136,15 @@ export interface PanelTheme {
scrollY?: string;
}
interface PanelProps extends ReactToolbox.Props {
export interface PanelProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Callback function to be invoked when the component scrolls.
*/
onScroll?: Function;
/**
* If true, the panel will vertically scroll all content.
* @default false
@ -165,7 +177,7 @@ export interface SidebarTheme {
sidebarContent?: string;
}
interface SidebarProps extends ReactToolbox.Props {
export interface SidebarProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/

6
components/link/index.d.ts vendored
View File

@ -16,7 +16,7 @@ export interface LinkTheme {
link?: string;
}
interface LinkProps extends ReactToolbox.Props {
export interface LinkProps extends ReactToolbox.Props {
/**
* If true, adds active style to link.
* @default false
@ -46,6 +46,10 @@ interface LinkProps extends ReactToolbox.Props {
* Classnames object defining the component style.
*/
theme?: LinkTheme;
/**
* Additional parameters passed to anchor element.
*/
[key: string]: any;
}
export class Link extends React.Component<LinkProps, {}> { }

302
components/list/index.d.ts vendored
View File

@ -8,7 +8,7 @@ export interface ListTheme {
list?: string;
}
interface ListProps extends ReactToolbox.Props {
export interface ListProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
@ -48,25 +48,9 @@ export interface ListCheckboxTheme {
* Used for the inner content of a list item.
*/
item?: string;
/**
* Used for the content wrapper element in list item.
*/
itemContentRoot?: string;
/**
* Added to the text inside of the list item.
*/
itemText?: string;
/**
* Added to the content wrapper element if size is large.
*/
large?: string;
/**
* Added to the text inside of the list item if its primary.
*/
primary?: string;
}
interface ListCheckboxProps extends ReactToolbox.Props {
export interface ListCheckboxProps extends ReactToolbox.Props {
/**
* Main text of the item. Required.
*/
@ -120,7 +104,7 @@ export interface ListDividerTheme {
inset?: string;
}
interface ListDividerProps extends ReactToolbox.Props {
export interface ListDividerProps extends ReactToolbox.Props {
/**
* If true, will leave a space at the left side.
*/
@ -134,61 +118,13 @@ interface ListDividerProps extends ReactToolbox.Props {
export class ListDivider extends React.Component<ListDividerProps, {}> { }
export interface ListItemTheme {
/**
* Added to the inner content if its a disabled item.
*/
disabled?: string;
/**
* Used for the inner content of a list item.
*/
item?: string;
/**
* Used for each action element (left/right).
*/
itemAction?: string;
/**
* Used for the content wrapper element in list item.
*/
itemContentRoot?: string;
/**
* Added to the text inside of the list item.
*/
itemText?: string;
/**
* Added to the content wrapper element if size is large.
*/
large?: string;
/**
* Added for the element that wraps left actions.
*/
left?: string;
/**
* Used for the root element of the list.
*/
listItem?: string;
/**
* Added to the text inside of the list item if its primary.
*/
primary?: string;
/**
* Added for the element that wraps right actions.
*/
right?: string;
/**
* Added to the inner content if its a selectable item.
*/
selectable?: string;
}
interface ListItemProps extends ReactToolbox.Props {
/**
* A string URL to specify an avatar in the left side of the item.
*/
avatar?: React.ReactNode | string;
/**
* Main text of the item.
*/
caption?: string;
export interface ListItemProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
@ -198,39 +134,10 @@ interface ListItemProps extends ReactToolbox.Props {
* @default false
*/
disabled?: boolean;
/**
* An element that will be displayed as the item. If set, this will override caption and legend.
*/
itemContent?: React.ReactNode;
/**
* A list of elements that are placed on the left side of the item and after the avatar attribute.
*/
leftActions?: React.ReactNode;
/**
* A string key of a font icon or element to display an icon in the left side of the item.
*/
leftIcon?: React.ReactNode | string;
/**
* Secondary text to display under the caption.
*/
legend?: string;
/**
* A list of elements that are placed on the right side of the item and after the rightIcon attribute.
*/
rightActions?: React.ReactNode;
/**
* The same as the leftIcon but in this case the icon is displayed in the right side.
*/
rightIcon?: React.ReactNode | string;
/**
* If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
*/
ripple?: boolean;
/**
* If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent.
* @default false
*/
selectable?: boolean;
/**
* Classnames object defining the component style.
* @default false
@ -251,7 +158,7 @@ export interface ListSubHeaderTheme {
subheader?: string;
}
interface ListSubHeaderProps extends ReactToolbox.Props {
export interface ListSubHeaderProps extends ReactToolbox.Props {
/**
* Text that will be displayed.
*/
@ -263,3 +170,202 @@ interface ListSubHeaderProps extends ReactToolbox.Props {
}
export class ListSubHeader extends React.Component<ListSubHeaderProps, {}> { }
export interface ListItemActionTheme {
/**
* Used for each action element (left/right).
*/
itemAction?: string;
}
export interface ListItemActionProps {
/**
* List item action.
*/
action?: React.ReactNode;
/**
* Object defining the component class name mappings.
*/
theme?: ListItemActionTheme;
}
export class ListItemAction extends React.Component<ListItemActionProps, {}> { }
export interface ListItemActionsTheme {
/**
* Added for the element that wraps left actions.
*/
left?: string;
/**
* Added for the element that wraps right actions.
*/
right?: string;
}
export interface ListItemActionsProps {
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Object defining the component class name mappings.
*/
theme?: ListItemActionsTheme & ListItemActionTheme;
/**
* List item action type.
*/
type?: "left" | "right";
}
export class ListItemActions extends React.Component<ListItemActionsProps, {}> { }
export interface ListItemContentTheme {
/**
* Added to the content wrapper element if type is "auto".
*/
auto?: string;
/**
* Used for the content wrapper element in list item.
*/
itemContentRoot?: string;
/**
* Added to the content wrapper element if type is "large".
*/
large?: string;
/**
* Added to the content wrapper element if type is "normal".
*/
normal?: string;
}
export interface ListItemContentProps {
/**
* Main text of the item.
*/
caption?: React.ReactNode;
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Secondary text to display under the caption.
*/
legend?: string;
/**
* Object defining the component class name mappings.
*/
theme?: ListItemContentTheme;
/**
* List item content type.
*/
type?: "auto" | "normal" | "large";
}
export class ListItemContent extends React.Component<ListItemContentProps, {}> { }
export interface ListItemLayoutTheme {
/**
* Added to the inner content if its a disabled item.
*/
disabled?: string;
/**
* Used for the inner content of a list item.
*/
item?: string;
/**
* Added when layout is selectable.
*/
selectable?: string;
}
export interface ListItemLayoutProps extends ReactToolbox.Props {
/**
* A string URL to specify an avatar in the left side of the item.
*/
avatar?: string | React.ReactElement<any>;
/**
* Main text of the item.
*/
caption?: string;
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* If true, the item is displayed as disabled and it's not clickable.
* @default false
*/
disabled?: boolean;
/**
* Layout content.
*/
itemContent?: React.ReactChild;
/**
* A list of elements that are placed on the left side of the item and after the avatar attribute.
*/
leftActions?: React.ReactNode[];
/**
* A string key of a font icon or element to display an icon in the left side of the item.
*/
leftIcon?: string | React.ReactElement<any>;
/**
* Secondary text to display under the caption.
*/
legend?: string;
/**
* A list of elements that are placed on the right side of the item and after the rightIcon attribute.
*/
rightActions?: React.ReactNode[];
/**
* The same as the leftIcon but in this case the icon is displayed in the right side.
*/
rightIcon?: string | React.ReactElement<any>;
/**
* If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent.
* @default false
*/
selectable?: boolean;
/**
* Object defining the component class name mappings.
*/
theme?: ListItemLayoutTheme & ListItemContentTheme & ListItemActionsTheme;
/**
* In case you want to provide the item as a link, you can pass this property to specify the href.
*/
to?: string;
}
export class ListItemLayout extends React.Component<ListItemLayoutProps, {}> { }
export interface ListItemTextTheme {
/**
* Added to the text inside of the list item.
*/
itemText?: string;
/**
* Added to the text inside of the list item if its primary.
*/
primary?: string;
}
export interface ListItemTextProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Whether list item text should have 'primary' look.
* @default
*/
primary?: boolean;
/**
* Object defining the component class name mappings.
*/
theme?: ListItemTextTheme;
/**
* Additional properties passed to root container.
*/
[key: string]: any;
}
export class ListItemText extends React.Component<ListItemTextProps, {}> { }

12
components/menu/index.d.ts vendored
View File

@ -44,7 +44,7 @@ export interface MenuTheme {
topRight?: string;
}
interface MenuProps extends ReactToolbox.Props {
export interface MenuProps extends ReactToolbox.Props {
/**
* If true, the menu will be displayed as opened by default.
* @default false
@ -68,7 +68,7 @@ interface MenuProps extends ReactToolbox.Props {
onShow?: Function;
/**
* If true the menu wrapper will show an outline with a soft shadow.
* @default false
* @default true
*/
outline?: boolean;
/**
@ -83,7 +83,7 @@ interface MenuProps extends ReactToolbox.Props {
ripple?: boolean;
/**
* If true, the menu will keep a value to highlight the active child item.
* @default false
* @default true
*/
selectable?: boolean;
/**
@ -109,7 +109,7 @@ export interface IconMenuTheme {
iconMenu?: string;
}
interface IconMenuProps extends ReactToolbox.Props {
export interface IconMenuProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
@ -170,7 +170,7 @@ export interface MenuDividerTheme {
menuDivider?: string;
}
interface MenuDividerProps extends ReactToolbox.Props {
export interface MenuDividerProps extends ReactToolbox.Props {
/**
* Classnames object defining the component style.
*/
@ -206,7 +206,7 @@ export interface MenuItemTheme {
shortcut?: string;
}
interface MenuItemProps extends ReactToolbox.Props {
export interface MenuItemProps extends ReactToolbox.Props {
/**
* The text to include in the menu item. Required.
*/

2
components/navigation/index.d.ts vendored
View File

@ -20,7 +20,7 @@ export interface NavigationTheme {
vertical?: string;
}
interface NavigationProps extends ReactToolbox.Props {
export interface NavigationProps extends ReactToolbox.Props {
/**
* Array of objects that will be represented as <Button/> so the keys will be transferred as properties the Button Component.
*/

55
components/overlay/index.d.ts vendored Normal file
View File

@ -0,0 +1,55 @@
import * as React from "react";
export interface OverlayTheme {
/**
* Active class name.
*/
active?: string;
/**
* Backdrop class name.
*/
backdrop?: string;
/**
* Invisible class name.
*/
invisible?: string;
/**
* Overlay class name.
*/
overlay?: string;
}
export interface OverlayProps {
/**
* Whether overlay is active.
*/
active?: boolean;
/**
* Nodes to be nested inside Overlay.
*/
children?: React.ReactNode;
/**
* Additional class name(s) for root container.
*/
className?: string;
/**
* Whether Overlay should have 'invisible' styles.
* @default false
*/
invisible?: boolean;
/**
* Callback invoked on Overlay click.
*/
onClick?: Function;
/**
* Callback invoked on ESC key.
*/
onEscKeyDown?: Function;
/**
* Overlay theme.
*/
theme?: OverlayTheme;
}
export default class Overlay extends React.Component<OverlayProps, {}> { }

2
components/progress_bar/index.d.ts vendored
View File

@ -36,7 +36,7 @@ export interface ProgressBarTheme {
value?: string;
}
interface ProgressBarProps extends ReactToolbox.Props {
export interface ProgressBarProps extends ReactToolbox.Props {
/**
* Value of a secondary progress bar useful for buffering.
* @default 0

57
components/radio/index.d.ts vendored
View File

@ -1,7 +1,7 @@
import * as React from "react";
import ReactToolbox from "../index";
interface RadioGroupProps extends ReactToolbox.Props {
export interface RadioGroupProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
@ -28,18 +28,6 @@ interface RadioGroupProps extends ReactToolbox.Props {
export class RadioGroup extends React.Component<RadioGroupProps, {}> { }
export interface RadioButtonTheme {
/**
* Used to for the radio element.
*/
radio?: string;
/**
* Used for the radio element when it's checked.
*/
radioChecked?: string;
/**
* To provide styles for the ripple.
*/
ripple?: string;
/**
* Added to the root of the Radio in case it's disabled.
*/
@ -58,12 +46,16 @@ export interface RadioButtonTheme {
text?: string;
}
interface RadioButtonProps extends ReactToolbox.Props {
export interface RadioButtonProps extends ReactToolbox.Props {
/**
* If true, the input element will be selected by default. Transferred from the parent.
* @default false
*/
checked?: boolean;
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* If true, the item will be displayed as disabled.
* @default false
@ -92,7 +84,7 @@ interface RadioButtonProps extends ReactToolbox.Props {
/**
* Classnames object defining the component style.
*/
theme?: RadioButtonTheme;
theme?: RadioButtonTheme & RadioTheme;
/**
* Value for the radio button.
*/
@ -100,3 +92,38 @@ interface RadioButtonProps extends ReactToolbox.Props {
}
export class RadioButton extends React.Component<RadioButtonProps, {}> { }
export interface RadioTheme {
/**
* Used to for the radio element.
*/
radio?: string;
/**
* Used for the radio element when it's checked.
*/
radioChecked?: string;
/**
* To provide styles for the ripple.
*/
ripple?: string;
}
export interface RadioProps {
/**
* If true, the input element will be selected by default. Transferred from the parent.
* @default false
*/
checked?: boolean;
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Callback invoked on mouse down.
*/
onMouseDown?: Function;
/**
* Additional properties passed to Radio container.
*/
[key: string]: any;
}

17
components/ripple/index.d.ts vendored
View File

@ -20,7 +20,7 @@ export interface RippleTheme {
rippleWrapper?: string;
}
interface RippleProps {
export interface RippleProps {
/**
* Children to pass through the component.
*/
@ -43,8 +43,19 @@ interface RippleProps {
* Classnames object defining the component style.
*/
theme?: RippleTheme;
/**
* Additional properties passed to rippled component.
*/
[key: string]: any;
}
export class Ripple extends React.Component<RippleProps, {}> { }
export interface RippledComponentFactory {
<P, RippledComponent extends (React.ComponentClass<P> | React.SFC<P>)>(component: RippledComponent): RippledComponent;
}
export default Ripple;
export function rippleFactory(
options: RippleProps
): RippledComponentFactory;
export default rippleFactory;

2
components/slider/index.d.ts vendored
View File

@ -56,7 +56,7 @@ export interface SliderTheme {
snaps?: string;
}
interface SliderProps extends ReactToolbox.Props {
export interface SliderProps extends ReactToolbox.Props {
/**
* If true, an input is shown and the user can set the slider from keyboard value.
* @default false

14
components/snackbar/index.d.ts vendored
View File

@ -32,7 +32,7 @@ export interface SnackbarTheme {
warning?: string;
}
interface SnackbarProps extends ReactToolbox.Props {
export interface SnackbarProps extends ReactToolbox.Props {
/**
* Label for the action component inside the Snackbar.
*/
@ -43,9 +43,17 @@ interface SnackbarProps extends ReactToolbox.Props {
*/
active?: boolean;
/**
* Text to display in the content. Required.
* Children to pass through the component.
*/
label: string;
children?: React.ReactNode;
/**
* Text to display in the content.
*/
label?: string;
/**
* Callback function that will be called when the button action is clicked.
*/
onClick?: Function;
/**
* Callback function when finish the set timeout.
*/

2
components/switch/index.d.ts vendored
View File

@ -36,7 +36,7 @@ export interface SwitchTheme {
thumb?: string;
}
interface SwitchProps extends ReactToolbox.Props {
export interface SwitchProps extends ReactToolbox.Props {
/**
* If true, the switch will be enabled.
* @default false

116
components/table/index.d.ts vendored
View File

@ -1,30 +1,14 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface TableTheme {
/**
* It will be added to a row in case it is editable.
*/
editable?: string;
/**
* Used for the row element.
*/
row?: string;
/**
* It will be added to a row in case it is selectable.
*/
selectable?: string;
/**
* Added to a row in case it is selected.
*/
selected?: string;
export interface TableTheme extends TableRowTheme {
/**
* Classname used for the root element.
*/
table?: string;
}
interface TableProps extends ReactToolbox.Props {
export interface TableProps extends ReactToolbox.Props {
/**
* If true, component will show a heading using model field names.
* @default true
@ -38,6 +22,10 @@ interface TableProps extends ReactToolbox.Props {
* Callback function that is fired when an item in a row changes. If set, rows are editable.
*/
onChange?: Function;
/**
* Callback fired when row was clicked.
*/
onRowClick?: Function;
/**
* Callback function invoked when the row selection changes.
*/
@ -68,4 +56,96 @@ interface TableProps extends ReactToolbox.Props {
export class Table extends React.Component<TableProps, {}> { }
export interface TableHeadTheme {
/**
* It will be added to a row in case it is selectable.
*/
selectable?: string;
}
export interface TableHeadProps extends ReactToolbox.Props {
/**
* Object describing the data model that represents each object in the source.
*/
model?: any;
/**
* If true, the header and each row will display a checkbox to allow the user to select multiple rows.
*/
multiSelectable?: boolean;
/**
* Callback function invoked when the row selection changes.
*/
onSelect?: Function;
/**
* If true, each row will display a checkbox to allow the user to select that one row.
* @default true
*/
selectable?: boolean;
/**
* Whether header should look selected.
* @default false
*/
selected?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: TableHeadTheme;
}
export class TableHead extends React.Component<TableHeadProps, {}> { }
export interface TableRowTheme extends TableHeadTheme {
/**
* It will be added to a row in case it is editable.
*/
editable?: string;
/**
* Used for the row element.
*/
row?: string;
/**
* Added to a row in case it is selected.
*/
selected?: string;
}
export interface TableRowProps {
/**
* Single row data.
*/
data?: any;
/**
* Row index.
*/
index?: number;
/**
* Object describing the data model that represents each object in the source.
*/
model?: any;
/**
* Callback function that is fired when an item in a row changes. If set, rows are editable.
*/
onChange?: Function;
/**
* Callback fired when row was clicked.
*/
onRowClick?: Function;
/**
* Callback function invoked when the row selection changes.
*/
onSelect?: Function;
/**
* If true, each row will display a checkbox to allow the user to select that one row.
* @default true
*/
selectable?: boolean;
/**
* Whether table row should look selected.
* @default false
*/
selected?: boolean;
}
export class TableRow extends React.Component<TableRowProps, {}> { }
export default Table;

82
components/tabs/index.d.ts vendored
View File

@ -1,15 +1,35 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface TabsTheme {
export interface TabsTheme extends TabTheme, TabContentTheme {
/**
* Added to the active tab content and header.
* Class used for arrows.
*/
active?: string;
arrow?: string;
/**
* Class used for arrow container.
*/
arrowContainer?: string;
/**
* Class used when 'disableAnimatedBottomBorder' is true.
*/
disableAnimation?: string;
/**
* Used to make the 'fixed tabs'.
*/
fixed?: string;
/**
* Used to invert the colors.
*/
inverse?: string;
/**
* Used for the navigation element.
*/
navigation?: string;
/**
* Used for navigation container.
*/
navigationContainer?: string;
/**
* Used for the moving underline element.
*/
@ -18,13 +38,9 @@ export interface TabsTheme {
* Used as a root classname for the component.
*/
tabs?: string;
/**
* Used for the tab content element.
*/
tab?: string;
}
interface TabsProps extends ReactToolbox.Props {
export interface TabsProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
@ -83,9 +99,17 @@ export interface TabTheme {
* Added to the navigation tab element in case it's active.
*/
label?: string;
/**
* Class added when icon is set.
*/
withIcon?: string;
/**
* Class added when label is set.
*/
withText?: string;
}
interface TabProps extends ReactToolbox.Props {
export interface TabProps extends ReactToolbox.Props {
/**
* If true, the current component is visible.
*/
@ -104,6 +128,10 @@ interface TabProps extends ReactToolbox.Props {
* @default false
*/
hidden?: boolean;
/**
* Icon to be used in inner FontIcon.
*/
icon?: React.ReactNode;
/**
* Label text for navigation header. Required.
*/
@ -116,6 +144,42 @@ interface TabProps extends ReactToolbox.Props {
* Classnames object defining the component style.
*/
theme?: TabTheme;
/**
* Additional properties passed to Tab root container.
*/
[key: string]: any;
}
export class Tab extends React.Component<TabProps, {}> { }
export interface TabContentTheme {
/**
* Added when tab is active.
*/
active?: string;
/**
* Used for the tab content element.
*/
tab?: string;
}
export interface TabContentProps extends ReactToolbox.Props {
/**
* Whether tab is active.
*/
active?: boolean;
/**
* Tab content.
*/
children?: React.ReactNode;
/**
* Current tab index.
*/
tabIndex?: number;
/**
* Classnames object defining the component style.
*/
theme?: TabContentTheme;
}
export class TabContent extends React.Component<TabContentProps, {}> { }

47
components/time_picker/index.d.ts vendored
View File

@ -96,7 +96,17 @@ export interface TimePickerTheme {
small?: string;
}
interface TimePickerProps {
export interface TimePickerProps {
/**
* Whether time picker is active.
* @default false
*/
active?: boolean;
/**
* Label used for cancel button.
* @default "Cancel"
*/
cancelLabel?: string;
/**
* Provide error text which will be displayed under the field.
*/
@ -111,17 +121,46 @@ interface TimePickerProps {
inputClassName?: string;
/**
* Format to display the clock. It can be 24hr or ampm.
* @default false
* @default "24hr"
*/
format?: "24hr" | "ampm";
/**
* The text string to use for the floating label element in the input component.
*/
label?: string;
/**
* Label used for 'OK' button on Dialog.
* @default "Ok"
*/
okLabel?: string;
/**
* Callback called when the picker value is changed.
*/
onChange?: Function;
/**
* Callback fired on Input click.
*/
onClick?: Function;
/**
* Callback fired after dismissing the Dialog.
*/
onDismiss?: Function;
/**
* Callback called when the ESC key is pressed with the overlay active.
*/
onEscKeyDown?: Function;
/**
* Callback invoked on Input key press.
*/
onKeyPress?: Function;
/**
* Callback to be invoked when the dialog overlay is clicked.
*/
onOverlayClick?: Function;
/**
* The input element will be readonly and look like disabled.
*/
readonly?: boolean;
/**
* Classnames object defining the component style.
*/
@ -130,6 +169,10 @@ interface TimePickerProps {
* Datetime object with currrently selected time.
*/
value?: Date;
/**
* Additional attributes passed to inner Input component.
*/
[key: string]: any;
}
export class TimePicker extends React.Component<TimePickerProps, {}> { }

38
components/tooltip/index.d.ts vendored
View File

@ -1,4 +1,5 @@
import * as React from "react";
export interface TooltipTheme {
/**
* Added to the tooltip element.
@ -14,17 +15,34 @@ export interface TooltipTheme {
tooltipWrapper?: string;
}
interface TooltipProps {
export interface TooltipProps {
/**
* Additional class added to composed component.
*/
className?: string;
/**
* Callback to be invoked when Component is clicked.
*/
onClick?: Function;
/**
* Callback called when the mouse enters the Component.
*/
onMouseEnter?: Function;
/**
* Callback called when the mouse leaves the Component.
*/
onMouseLeave?: Function;
/**
* Classnames object defining the component style.
*/
theme?: TooltipTheme;
/**
* The text string to use for the tooltip.
* The text (or node) used for the tooltip.
*/
tooltip?: string;
tooltip?: React.ReactNode;
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* @default 0
*/
tooltipDelay?: number;
/**
@ -32,6 +50,20 @@ interface TooltipProps {
* @default true
*/
tooltipHideOnClick?: boolean;
/**
* Tooltip position.
* @default "vertical"
*/
tooltipPosition?: "bottom" | "top" | "left" | "right" | "horizontal" | "vertical";
/**
* Determines the tooltip should be toggled when clicked. This is useful for mobile where there is no mouse enter.
* @default false
*/
tooltipShowOnClick?: boolean;
/**
* Additional attributes passed to composed component.
*/
[key: string]: any;
}
declare class TooltipComponent<P, S> extends React.Component<P, S> {