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

Merge with dev

old
Javi Velasco 2016-07-24 13:17:16 +02:00
parent e077f8a199
commit b226fcd258
58 changed files with 5738 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
components/app_bar/index.d.ts vendored Normal file
View File

@ -0,0 +1,41 @@
import __ReactToolbox from "../index.d.ts";
export interface AppBarTheme {
/**
* Used for the component root element.
*/
appBar?: string;
/**
* Added to the root element when the app bar is fixed.
*/
fixed?: string;
/**
* Added to the root element when the app bar is flat.
*/
flat?: string;
}
interface AppBarProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* Determine if the bar should have position fixed or relative.
* @default false
*/
fixed?: boolean;
/**
* If true, the AppBar shows a shadow.
* @default false
*/
flat?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: AppBarTheme;
}
export class AppBar extends __React.Component<AppBarProps, {}> { }
export default AppBar;

105
components/autocomplete/index.d.ts vendored Normal file
View File

@ -0,0 +1,105 @@
import __ReactToolbox from "../index.d.ts";
export interface AutocompleteTheme {
/**
* Used for a suggestion when it's active.
*/
active?: string;
/**
* Used for the root element.
*/
autocomplete?: string;
/**
* Used when the input is focused.
*/
focus?: string;
/**
* Used to style the Input component.
*/
input?: string;
/**
* Used for the label.
*/
label?: string;
/**
* Used to style each suggestion.
*/
suggestion?: string;
/**
* Used to style the suggestions container.
*/
suggestions?: string;
/**
* Used for the suggestions when it's opening to the top.
*/
up?: string;
/**
* Classname used for a single value.
*/
value?: string;
/**
* Classname used for the values container.
*/
values?: string;
}
interface AutocompleteProps extends __ReactToolbox.Props {
/**
* Determines the opening direction. It can be auto, up or down.
* @default auto
*/
direction?: "auto" | "up" | "down";
/**
* If true, component will be disabled.
*/
disabled?: boolean;
/**
* Sets the error string for the internal input element.
* @default false
*/
error?: string;
/**
* The text string to use for the floating label element.
*/
label?: string;
/**
* If true, component can hold multiple values.
*/
multiple?: boolean;
/**
* Callback function that is fired when the components's value changes.
* @default auto
*/
onChange?: __React.FormEventHandler;
/**
* Determines if the selected list is shown above or below input. It can be above or below.
* @default above
*/
selectedPosition?: "above" | "below";
/**
* If true, the list of suggestions will not be filtered when a value is selected.
* @default false
*/
showSuggestionsWHenValueIsSet?: boolean;
/**
* Object of key/values or array representing all items suggested.
*/
source?: any;
/**
* Determines how suggestions are supplied.
* @default start
*/
suggestionMatch?: "start" | "anywhere" | "word";
/**
* Classnames object defining the component style.
*/
theme?: AutocompleteTheme;
/**
* Value or array of values currently selected component.
*/
value?: any;
}
export class Autocomplete extends __React.Component<AutocompleteProps, {}> { }
export default Autocomplete;

47
components/avatar/index.d.ts vendored Normal file
View File

@ -0,0 +1,47 @@
import __ReactToolbox from "../index.d.ts";
export interface AvatarTheme {
/**
* Used for the root class of the element.
*/
avatar?: string;
/**
* Added to the root element when the component has image.
*/
image?: string;
/**
* Used for the root element if the component shows the letter.
*/
letter?: string;
}
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.
*/
cover?: boolean;
/**
* A key to identify an Icon from Material Design Icons or a custom Icon Element.
*/
icon?: __React.ReactNode | string;
/**
* An image source or an image element.
*/
image?: __React.ReactNode | string;
/**
* Classnames object defining the component style.
*/
theme?: AvatarTheme;
/**
* A title for the image. If no image is provided, the first letter will be displayed as the avatar.
*/
title?: string;
}
export class Avatar extends __React.Component<AvatarProps, {}> { }
export default Avatar;

227
components/button/index.d.ts vendored Normal file
View File

@ -0,0 +1,227 @@
import __ReactToolbox from "../index.d.ts";
export interface ButtonTheme {
/**
* 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;
}
interface ButtonProps 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;
/**
* If true, the button will have a flat look.
* @default false
*/
flat?: boolean;
/**
* If true, the button will have a floating look.
* @default false
*/
floating?: boolean;
/**
* 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.
*/
label?: string;
/**
* To be used with floating button. If true, the button will be smaller.
* @default false
*/
mini?: 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?: __React.MouseEventHandler;
/**
* Fires after the mouse is released from the Component.
*/
OnMouseUp?: __React.MouseEventHandler;
/**
* 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.
*/
theme?: ButtonTheme;
}
export class Button extends __React.Component<ButtonProps, {}> { }
export interface IconButtonTheme {
/**
* Used for the root in case button is accent.
*/
accent?: string;
/**
* Used for the root element in any button.
*/
button?: string;
/**
* For the icon inside a button.
*/
icon?: string;
/**
* Used when colors are inverted.
*/
inverse?: string;
/**
* Used for neutral colored buttons.
*/
neutral?: string;
/**
* Used for primary buttons when button is primary.
*/
primary?: string;
/**
* Used for the ripple element.
*/
rippleWrapper?: string;
/**
* Used for toggle buttons in the root element.
*/
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;
/**
* 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;
/**
* Fires after the mouse leaves the Component.
*/
onMouseLeave?: __React.MouseEventHandler;
/**
* Fires after the mouse is released from the Component.
*/
OnMouseUp?: __React.MouseEventHandler;
/**
* 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.
*/
theme?: IconButtonTheme;
}
export class IconButton extends __React.Component<IconButtonProps, {}> { }

102
components/card/index.d.ts vendored Normal file
View File

@ -0,0 +1,102 @@
import __ReactToolbox from "../index.d.ts";
export interface CardTheme {
card?: string;
raised?: string;
}
interface CardProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
raised?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: CardTheme;
}
export class Card extends __React.Component<CardProps, {}> { }
export interface CardActionsTheme {
cardActions?: string;
}
interface CardActionsProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* Classnames object defining the component style.
*/
theme?: CardActionsTheme;
}
export class CardActions extends __React.Component<CardActionsProps, {}> { }
export interface CardMediaTheme {
cardMedia?: string;
content?: string;
contentOverlay?: string;
square?: string;
wide?: string;
}
interface CardMediaProps extends __ReactToolbox.Props {
aspectRatio?: "wide" | "square";
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
color?: string;
contentOverlay?: boolean;
image?: __React.ReactNode | string;
/**
* Classnames object defining the component style.
*/
theme?: CardMediaTheme;
}
export class CardMedia extends __React.Component<CardMediaProps, {}> { }
export interface CardTextTheme {
cardText?: string;
}
interface CardTextProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* Classnames object defining the component style.
*/
theme?: CardTextTheme;
}
export class CardText extends __React.Component<CardTextProps, {}> { }
export interface CardTitleTheme {
large?: string;
title?: string;
small?: string;
subtitle?: string;
}
interface CardTitleProps extends __ReactToolbox.Props {
avatar?: __React.ReactNode | string;
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
subtitle?: __React.ReactNode | string;
/**
* Classnames object defining the component style.
*/
theme?: CardTitleTheme;
title?: __React.ReactNode | string;
}
export class CardTitle extends __React.Component<CardTitleProps, {}> { }

69
components/checkbox/index.d.ts vendored Normal file
View File

@ -0,0 +1,69 @@
import __ReactToolbox from "../index.d.ts";
export interface CheckboxTheme {
/**
* Used as root in the check element.
*/
check?: string;
/**
* Used for the check element when it's checked.
*/
checked?: string;
/**
* Used when the component is disabled.
*/
disabled?: string;
/**
* Used as the root class of the component.
*/
field?: string;
/**
* Used for the input element.
*/
input?: string;
/**
* Used for the ripple component.
*/
ripple?: string;
/**
* Used for the text label.
*/
text?: string;
}
interface CheckboxProps extends __ReactToolbox.Props {
/**
* Value for the checkbox, can be true or false.
* @default false
*/
checked?: boolean;
/**
* If true, the checkbox shown as disabled and cannot be modified.
* @default false
*/
disabled?: boolean;
/**
* Text label to attach next to the checkbox element.
*/
label?: __React.ReactNode | string;
/**
* The name of the field to set in the input checkbox.
*/
name?: string;
/**
* Callback called when the checkbox is blurred.
*/
onBlur?: __React.FocusEventHandler;
/**
* Callback called when the checkbox value is changed.
*/
onChange?: __React.MouseEventHandler;
/**
* Classnames object defining the component style.
*/
theme?: CheckboxTheme;
}
export class Checkbox extends __React.Component<CheckboxProps, {}> { }
export default Checkbox;

52
components/chip/index.d.ts vendored Normal file
View File

@ -0,0 +1,52 @@
import __ReactToolbox from "../index.d.ts";
export interface ChipTheme {
/**
* Added to the root element when the component includes an avatar.
*/
avatar?: string;
/**
* Used for the root element.
*/
chip?: string;
/**
* Added to the root element when the component is deletable.
*/
deletable?: string;
/**
* Used for the delete element wrapper.
*/
delete?: string;
/**
* Used for the delete icon.
*/
deleteIcon?: string;
/**
* Used for the delete svg inner layer.
*/
deleteX?: string;
}
interface ChipProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* If true, the chip will be rendered with a delete icon.
* @default false
*/
deletable?: boolean;
/**
* Callback to be invoked when the delete icon is clicked.
*/
onDeleteClick?: __React.MouseEventHandler;
/**
* Classnames object defining the component style.
*/
theme?: ChipTheme;
}
export class Chip extends __React.Component<ChipProps, {}> { }
export default Chip;

148
components/date_picker/index.d.ts vendored Normal file
View File

@ -0,0 +1,148 @@
import __ReactToolbox from "../index.d.ts";
export interface DatePickerTheme {
/**
* Used for the active day and year.
*/
active?: string;
/**
* Used for the buttons in the dialog.
*/
button?: string;
/**
* Used for the calendar root element.
*/
calendar?: string;
/**
* Used as wrapper for the calendar component inside dialog.
*/
calendarWrapper?: string;
/**
* Used for the date element inside header.
*/
date?: string;
/**
* Used for the day element inside the calendar.
*/
day?: string;
/**
* Used for the list of days inside a month.
*/
days?: string;
/**
* Used for the dialog component.
*/
dialog?: string;
/**
* Added to day element when day is disabled.
*/
disabled?: string;
/**
* Used for the dialog header,.
*/
header?: string;
/**
* Used for Input element that opens the picker.
*/
input?: string;
/**
* Used for the month root element.
*/
month?: string;
/**
* Added to the root dialog when months are displayed.
*/
monthsDisplay?: string;
/**
* Used for the next month icon.
*/
next?: string;
/**
* Used for the prev month icon.
*/
prev?: string;
/**
* Used for the month title element.
*/
title?: string;
/**
* Used for the weekdays wrapper.
*/
week?: string;
/**
* Used for the year element inside header.
*/
year?: string;
/**
* Used for the years list in years view.
*/
years?: string;
/**
* Added to the root dialog when years are displayed.
*/
yearsDisplay?: string;
}
interface DatePickerProps extends __ReactToolbox.Props {
/**
* Automatically selects a date upon clicking on a day
* @default false
*/
autoOk?: boolean;
/**
* Give an error node to display under the field.
*/
error?: string;
/**
* A key to identify an Icon from Material Design Icons or a custom Icon Element.
*/
icon?: __React.ReactNode | string;
/**
* This class will be applied to Input component of DatePicker.
*/
inputClassName?: string;
/**
* Function to format the date displayed on the input.
*/
inputFormat?: Function;
/**
* The text string to use for the floating label element in the input component.
*/
label?: string;
/**
* Date object with the maximum selectable date.
*/
maxDate?: Date;
/**
* Date object with the minimum selectable date.
*/
minDate?: Date;
/**
* Name for the input field.
*/
name?: string;
/**
* Callback called when the picker value is changed.
*/
onChange?: __React.MouseEventHandler;
/**
* Callback called when the ESC key is pressed with the overlay active.
*/
onEscKeyDown?: __React.KeyboardEventHandler;
/**
* Callback to be invoked when the dialog overlay is clicked.
*/
onOverlayClick?: __React.MouseEventHandler;
/**
* Classnames object defining the component style.
*/
theme?: DatePickerTheme;
/**
* Date object with the currently selected date.
*/
value?: Date | string;
}
export class DatePicker extends __React.Component<DatePickerProps, {}> { }
export default DatePicker;

92
components/dialog/index.d.ts vendored Normal file
View File

@ -0,0 +1,92 @@
import __ReactToolbox from "../index.d.ts";
export interface DialogTheme {
/**
* Used for the root when the dialog is active.
*/
active?: string;
/**
* Used to wrap the dialog body.
*/
body?: string;
/**
* Used in buttons when the dialog implements actions.
*/
button?: string;
/**
* Used for the root element.
*/
dialog?: string;
/**
* Used for the navigation element when it implements actions.
*/
navigation?: string;
/**
* Used for the title element of the dialog.
*/
title?: string;
}
interface DialogActionProps {
/**
* The text string to use for the name of the button.
*/
label?: string;
/**
* Callback called when the component is clicked.
*/
onClick?: __React.MouseEventHandler;
}
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.
*/
actions?: DialogActionProps[];
/**
* If true, the dialog will be active.
* @default false
*/
active?: boolean;
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* Callback called when the ESC key is pressed with the overlay active.
*/
onEscKeyDown?: __React.KeyboardEventHandler;
/**
* Callback to be invoked when the dialog overlay is clicked.
*/
onOverlayClick?: __React.MouseEventHandler;
/**
* Callback called when the mouse button is pressed on the overlay.
*/
onOverlayMouseDown?: __React.MouseEventHandler;
/**
* Callback called when the mouse is moving over the overlay.
*/
onOverlayMouseMove?: __React.MouseEventHandler;
/**
* Callback called when the mouse button is released over the overlay.
*/
onOverlayMouseUp?: __React.MouseEventHandler;
/**
* Classnames object defining the component style.
*/
theme?: DialogTheme;
/**
* The text string to use as standar title of the dialog.
*/
title?: string;
/**
* Used to determine the size of the dialog. It can be small, normal or large.
* @default normal
*/
type?: string;
}
export class Dialog extends __React.Component<DialogProps, {}> { }
export default Dialog;

53
components/drawer/index.d.ts vendored Normal file
View File

@ -0,0 +1,53 @@
import __ReactToolbox from "../index.d.ts";
export interface DrawerTheme {
/**
* Used for the root class when the drawer is active.
*/
active?: string;
/**
* Used for the drawer content.
*/
content?: string;
/**
* Root class.
*/
drawer?: string;
/**
* Added to the root class when drawer is to the left.
*/
left?: string;
/**
* Added to the root class when drawer is to the right.
*/
right?: string;
}
interface DrawerProps extends __ReactToolbox.Props {
/**
* If true, the drawer will be visible.
* @default false
*/
active?: boolean;
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* Callback function to be invoked when the overlay is clicked.
*/
onOverlayClick?: __React.MouseEventHandler;
/**
* Classnames object defining the component style.
*/
theme?: DrawerTheme;
/**
* Type of drawer. It can be left or right to display the drawer on the left or right side of the screen.
* @default left
*/
type?: "left" | "right";
}
export class Drawer extends __React.Component<DrawerProps, {}> { }
export default Drawer;

114
components/dropdown/index.d.ts vendored Normal file
View File

@ -0,0 +1,114 @@
import __ReactToolbox from "../index.d.ts";
export interface DropdownTheme {
/**
* Added to the root element when the dropdown is active.
*/
active?: string;
/**
* Added to the root element when it's disabled.
*/
disabled?: string;
/**
* Root element class.
*/
dropdown?: string;
/**
* Used for the error element.
*/
error?: string;
/**
* Added to the inner wrapper if it's errored.
*/
errored?: string;
/**
* Used for the inner wrapper of the component.
*/
field?: string;
/**
* Used for the the label element.
*/
label?: string;
/**
* Used to highlight the selected value.
*/
selected?: string;
/**
* Used as a wrapper for the given template value.
*/
templateValue?: string;
/**
* Added to the root element when it's opening up.
*/
up?: string;
/**
* Used for each value in the dropdown component.
*/
value?: string;
/**
* Used for the list of values.
*/
values?: string;
}
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
*/
allowBlank?: boolean;
/**
* If true, the dropdown will open up or down depending on the position in the screen.
* @default true
*/
auto?: boolean;
/**
* Set the component as disabled.
* @default false
*/
disabled?: boolean;
/**
* Give an error string to display under the field.
*/
error?: string;
/**
* The text string to use for the floating label element.
*/
label?: string;
/**
* Name for the input field.
*/
name?: string;
/**
* Callback function that is fired when the component is blurred.
*/
onBlur?: __React.FocusEventHandler;
/**
* Callback function that is fired when the component's value changes.
*/
onChange?: __React.FormEventHandler;
/**
* Callback function that is fired when the component is focused.
*/
onFocus?: __React.FocusEventHandler;
/**
* Array of data objects with the data to represent in the dropdown.
*/
source: any[];
/**
* Callback function that returns a JSX template to represent the element.
*/
template?: Function;
/**
* Classnames object defining the component style.
*/
theme?: DropdownTheme;
/**
* Default value using JSON data.
*/
value?: string | number;
}
export class Dropdown extends __React.Component<DropdownProps, {}> { }
export default Dropdown;

16
components/font_icon/index.d.ts vendored Normal file
View File

@ -0,0 +1,16 @@
import __ReactToolbox from "../index.d.ts";
interface FontIconProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* The key string for the icon you want be displayed.
*/
value?: __React.ReactNode | string;
}
export class FontIcon extends __React.Component<FontIconProps, {}> { }
export default FontIcon;

22
components/index.d.ts vendored Normal file
View File

@ -0,0 +1,22 @@
export declare namespace __ReactToolbox {
interface Props {
/**
* Set a class for the root component.
*/
className?: string;
/**
* Key used to uniquely identify the element within an Array.
*/
key?: string | number;
/**
* Callback called when the component is clicked.
*/
onClick?: __React.MouseEventHandler;
/**
* Set inline style for the root component.
*/
style?: __React.CSSProperties;
}
}
export default __ReactToolbox;

135
components/input/index.d.ts vendored Normal file
View File

@ -0,0 +1,135 @@
import __ReactToolbox from "../index.d.ts";
export interface InputTheme {
/**
* Used for the bar under the input.
*/
bar?: string;
/**
* Used for the counter element.
*/
counter?: string;
/**
* Added to the root class when input is disabled.
*/
disabled?: string;
/**
* Used for the text error.
*/
error?: string;
/**
* Added to the root class when input is errored.
*/
errored?: string;
/**
* Used when the input is hidden.
*/
hidden?: string;
/**
* Used for the hint text.
*/
hint?: string;
/**
* Used for the icon in case the input has icon.
*/
icon?: string;
/**
* Used as root class for the component.
*/
input?: string;
/**
* Used for the HTML input element.
*/
inputElement?: string;
/**
* Used in case the input is required.
*/
required?: string;
/**
* Added to the root class if the input has icon.
*/
withIcon?: string;
}
interface InputProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* If true, component will be disabled.
* @default false
*/
disabled?: boolean;
/**
* Give an error node to display under the field.
*/
error?: string;
/**
* Indicates if the label is floating in the input field or not.
* @default true
*/
floating?: boolean;
/**
* The text string to use for hint text element.
*/
hint?: string;
/**
* Name of an icon to use as a label for the input.
*/
icon?: __React.ReactNode | string;
/**
* The text string to use for the floating label element.
*/
label?: string;
/**
* Specifies the maximum number of characters allowed in the component
*/
maxLength?: number;
/**
* If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.
* @default false
*/
multiLine?: boolean;
/**
* Name for the input field.
*/
name?: string;
/**
* Callback function that is fired when component is blurred.
*/
onBlur?: __React.FocusEventHandler;
/**
* Callback function that is fired when the component's value changes
*/
onChange?: __React.FormEventHandler;
/**
* Callback function that is fired when component is focused.
*/
onFocus?: __React.FocusEventHandler;
/**
* Callback function that is fired when a key is pressed.
*/
onKeyPress?: __React.MouseEventHandler;
/**
* If true, the html input has a required attribute.
* @default false
*/
required?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: InputTheme;
/**
* Type of the input element. It can be a valid HTML5 input type
*/
type?: string;
/**
* Current value of the input element.
*/
value?: any;
}
export class Input extends __React.Component<InputProps, {}> { }
export default Input;

193
components/layout/index.d.ts vendored Normal file
View File

@ -0,0 +1,193 @@
import __ReactToolbox from "../index.d.ts";
export interface LayoutTheme {
/**
* Class used in the container to position and align inner items.
*/
layout?: string;
}
interface LayoutProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: [NavDrawer | Panel | Sidebar];
/**
* Classnames object defining the component style.
*/
theme?: LayoutTheme;
}
export class Layout extends __React.Component<LayoutProps, {}> { }
export interface NavDrawerTheme {
/**
* Used when the drawer is active.
*/
active?: string;
/**
* Used for the content of the drawer.
*/
drawerContent?: string;
/**
* Added to the root class for large drawer.
*/
lgPermangent?: string;
/**
* Added to the root class for medium drawer.
*/
mdPermangent?: string;
/**
* Root class for the drawer.
*/
navDrawer?: string;
/**
* Added to the root class if positioning is pinned.
*/
pinned?: string;
/**
* Used as a wrapper for the drawer content.
*/
scrim?: string;
/**
* Added to the drawer content if its scrollable.
*/
scrollY?: string;
/**
* Added to the root class for small drawer.
*/
smPermanent?: string;
/**
* Added to the root class if width is wide.
*/
wide?: string;
/**
* Added to the root class for extra big drawer.
*/
xlPermanent?: string;
/**
* Added to the root class for super big drawer.
*/
xxlPermangent?: string;
/**
* Added to the root class for largest possible drawer.
*/
xxxlPermangent?: string;
}
interface NavDrawerProps extends __ReactToolbox.Props {
/**
* If true, the drawer will be shown as an overlay.
* @default false
*/
active?: boolean;
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* Callback function to be invoked when the overlay is clicked.
*/
onOverlayClick?: __React.MouseEventHandler;
/**
* The breakpoint at which the drawer is automatically pinned.
*/
permanentAt?: "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
/**
* If true, the drawer will be pinned open. pinned takes precedence over active.
* @default false
*/
pinned?: boolean;
/**
* If true, the drawer will vertically scroll all content.
* @default false
*/
scrollY?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: NavDrawerTheme;
/**
* 320px or 400px. Only applicable above the sm breakpoint.
* @default normal
*/
width?: "normal" | "wide";
}
export class NavDrawer extends __React.Component<NavDrawerProps, {}> { }
export interface PanelTheme {
/**
* Used as the root class of the panel component.
*/
panel?: string;
/**
* Used in case the panel is scrollable.
*/
scrollY?: string;
}
interface PanelProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* If true, the panel will vertically scroll all content.
* @default false
*/
scrollY?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: PanelTheme;
}
export class Panel extends __React.Component<PanelProps, {}> { }
export interface SidebarTheme {
/**
* Added to the root class if sidebar is pinned.
*/
pinned?: string;
/**
* Add to the content of sidebar if its scrollable.
*/
scrollY?: string;
/**
* Root class of the sidebar.
*/
sidebar?: string;
/**
* Used in for the content element of the sidebar.
*/
sidebarContent?: string;
}
interface SidebarProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* If true, the sidebar will be pinned open.
* @default false
*/
pinned?: boolean;
/**
* If true, the sidebar will vertically scroll all content
* @default false
*/
scrollY?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: SidebarTheme;
/**
* Width in standard increments (1-12) or percentage (25, 33, 50, 66, 75, 100)
* @default 5
*/
width?: number; // 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 33 | 50 | 66 | 75 | 100;
}
export class Sidebar extends __React.Component<SidebarProps, {}> { }

50
components/link/index.d.ts vendored Normal file
View File

@ -0,0 +1,50 @@
import __ReactToolbox from "../index.d.ts";
export interface LinkTheme {
/**
* Added to the root element if the Link is active.
*/
active?: string;
/**
* Used for the icon element if it's present.
*/
icon?: string;
/**
* Used for the root element.
*/
link?: string;
}
interface LinkProps extends __ReactToolbox.Props {
/**
* If true, adds active style to link.
* @default false
*/
active?: boolean;
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* Sets a count number.
*/
count?: number;
/**
* Sets the anchor link.
*/
href?: string;
/**
* An icon key string to include a FontIcon component in front of the text.
*/
icon?: __React.ReactNode | string;
/**
* The text string used for the text content of the link.
*/
label?: string;
/**
* Classnames object defining the component style.
*/
theme?: LinkTheme;
}
export class Link extends __React.Component<LinkProps, {}> { }

264
components/list/index.d.ts vendored Normal file
View File

@ -0,0 +1,264 @@
import __ReactToolbox from "../index.d.ts";
export interface ListTheme {
/**
* Used for the root element of the list.
*/
list?: string;
}
interface ListProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* If true, each element in the list will have a ripple effect on click
* @default false
*/
ripple?: boolean;
/**
* If true, the elements in the list will display a hover effect and a pointer cursor.
* @default false
*/
selectable?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: ListTheme;
}
export class List extends __React.Component<ListProps, {}> { }
export interface ListCheckboxTheme {
/**
* Used as a wrapper class for the subheader element.
*/
checkbox?: string;
/**
* Added to the checkbox element.
*/
checkboxItem?: string;
/**
* 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 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 {
/**
* Main text of the item. Required.
*/
caption?: string;
/**
* If true the checkbox appears checked by default.
* @default false
*/
checked?: boolean;
/**
* If true, the item is displayed as disabled and it's not clickable.
* @default false
*/
disabled?: boolean;
/**
* Secondary text to display under the caption.
*/
legend?: string;
/**
* Name for the checkbox input item.
*/
name?: string;
/**
* Callback called when the input element is blurred.
*/
onBlur?: __React.FocusEventHandler;
/**
* Callback called when the input element is changed.
*/
onChange?: __React.FormEventHandler;
/**
* Callback called when the input element is focused.
*/
onFocus?: __React.FocusEventHandler;
/**
* Classnames object defining the component style.
*/
theme?: ListCheckboxTheme;
}
export class ListCheckbox extends __React.Component<ListCheckboxProps, {}> { }
export interface ListDividerTheme {
/**
* Added to the root element.
*/
divider?: string;
/**
* Added to root element if inset is true.
*/
inset?: string;
}
interface ListDividerProps extends __ReactToolbox.Props {
/**
* If true, will leave a space at the left side.
*/
inset?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: ListDividerTheme;
}
export class ListDivider extends __React.Component<ListDivider, {}> { }
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;
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* If true, the item is displayed as disabled and is not clickable.
* @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
*/
theme?: ListItemTheme;
/**
* In case you want to provide the item as a link, you can pass this property to specify the href.
*/
to?: string;
}
export class ListItem extends __React.Component<ListItemProps, {}> { }
export interface ListSubHeaderTheme {
/**
* Used as a wrapper class for the subheader element.
*/
subheader?: string;
}
interface ListSubHeaderProps extends __ReactToolbox.Props {
/**
* Text that will be displayed.
*/
caption?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: ListSubHeaderTheme;
}
export class ListSubHeader extends __React.Component<ListSubHeaderProps, {}> { }

241
components/menu/index.d.ts vendored Normal file
View File

@ -0,0 +1,241 @@
import __ReactToolbox from "../index.d.ts";
export interface MenuTheme {
/**
* Added to the root element when menu is active.
*/
active?: string;
/**
* Added to the root when position is bottom left.
*/
bottomLeft?: string;
/**
* Added to the root when position is bottom right.
*/
bottomRight?: string;
/**
* Used for the root element of the menu.
*/
menu?: string;
/**
* Used for the inner wrapper.
*/
menuInner?: string;
/**
* Used to draw the outline.
*/
outline?: string;
/**
* Added to the menu in case if should have ripple.
*/
rippled?: string;
/**
* Added to the root in case its static.
*/
static?: string;
/**
* Added to the root when position is top left.
*/
topLeft?: string;
/**
* Added to the root when position is top right.
*/
topRight?: string;
}
interface MenuProps extends __ReactToolbox.Props {
/**
* If true, the menu will be displayed as opened by default.
* @default false
*/
active?: boolean;
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* Callback that will be called when the menu is being hidden.
*/
onHide?: Function;
/**
* Callback that will be invoked when a menu item is selected.
*/
onSelect?: Function;
/**
* Callback that will be invoked when the menu is being shown.
*/
onShow?: Function;
/**
* If true the menu wrapper will show an outline with a soft shadow.
* @default false
*/
outline?: boolean;
/**
* Determine the position of the menu. With static value the menu will be always shown, auto means that the it will decide the opening direction based on the current position. To force a position use topLeft, topRight, bottomLeft, bottomRight.
* @default static
*/
position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
/**
* If true, the menu items will show a ripple effect on click.
* @default true
*/
ripple?: boolean;
/**
* If true, the menu will keep a value to highlight the active child item.
* @default false
*/
selectable?: boolean;
/**
* Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted.
*/
selected?: any;
/**
* Classnames object defining the component style.
*/
theme?: MenuTheme;
}
export class Menu extends __React.Component<MenuProps, {}> { }
export interface IconMenuTheme {
/**
* Used for the icon element.
*/
icon?: string;
/**
* Used for the root element of the icon menu.
*/
iconMenu?: string;
}
interface IconMenuProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* Icon font key string or Element to display the opener icon.
* @default more_vert
*/
icon?: __React.ReactNode | string;
/**
* If true, the icon will show a ripple when is clicked.
* @default true
*/
iconRipple?: boolean;
/**
* Transferred to the Menu component.
* @default true
*/
menuRipple?: boolean;
/**
* Callback that will be called when the menu is being hidden.
*/
onHide?: Function;
/**
* Callback that will be invoked when a menu item is selected.
*/
onSelect?: Function;
/**
* Callback that will be invoked when the menu is being shown.
*/
onShow?: Function;
/**
* Determines the position of the menu. This property is transferred to the inner Menu component.
* @default auto
*/
position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
/**
* If true, the menu will keep a value to highlight the active child item.
* @default false
*/
selectable?: boolean;
/**
* Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted.
*/
selected?: any;
/**
* Classnames object defining the component style.
*/
theme?: IconMenuTheme;
}
export class IconMenu extends __React.Component<IconMenuProps, {}> { }
export interface MenuDividerTheme {
/**
*
*/
menuDivider?: string;
}
interface MenuDividerProps extends __ReactToolbox.Props {
/**
* Classnames object defining the component style.
*/
theme?: MenuDividerTheme;
}
export class MenuDivider extends __React.Component<MenuDividerProps, {}> { }
export interface MenuItemTheme {
/**
* Used for the caption inside the item.
*/
caption?: string;
/**
* Added to the root element if it's disabled.
*/
disabled?: string;
/**
* Used for the icon element if exists.
*/
icon?: string;
/**
* Used as the root class for the component.
*/
menuItem?: string;
/**
* Added to the root element in case it's selected.
*/
selected?: string;
/**
* Used for the shortcut element if exists.
*/
shortcut?: string;
}
interface MenuItemProps extends __ReactToolbox.Props {
/**
* The text to include in the menu item. Required.
*/
caption: string;
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* If true, the item will be displayed as disabled and is not selectable.
* @default false
*/
disabled?: boolean;
/**
* Icon font key string or Element to display in the right side of the option.
*/
icon?: __React.ReactNode | string;
/**
* Transferred from the Menu component for selectable menus. Indicates if it's the current active option.
* @default false
*/
selected?: boolean;
/**
* Displays shortcut text on the right side of the caption attribute.
*/
shortcut?: string;
/**
* Classnames object defining the component style.
*/
theme?: MenuItemTheme;
}
export class MenuItem extends __React.Component<MenuItemProps, {}> { }

46
components/navigation/index.d.ts vendored Normal file
View File

@ -0,0 +1,46 @@
import __ReactToolbox from "../index.d.ts";
export interface NavigationTheme {
/**
* Used for buttons provided in the component.
*/
button?: string;
/**
* Used for the root element if the layout is horizontal.
*/
horizontal?: string;
/**
* Used for links provided in the component.
*/
link?: string;
/**
* Used for the root element if the layout is vertical.
*/
vertical?: string;
}
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.
*/
actions?: any[];
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* Array of objects similar to actions but that will be rendered as <Link/> component definition.
*/
routes?: any[];
/**
* Classnames object defining the component style.
*/
theme?: NavigationTheme;
/**
* Type of the navigation, it can be vertical or horizontal.
* @default horizontal
*/
type?: "vertical" | "horizontal";
}
export class Navigation extends __React.Component<NavigationProps, {}> { }

82
components/progress_bar/index.d.ts vendored Normal file
View File

@ -0,0 +1,82 @@
import __ReactToolbox from "../index.d.ts";
export interface ProgressBarTheme {
/**
* Used to style the buffer element in the linear progress.
*/
buffer?: string;
/**
* Used for the circle element in the circular progress.
*/
circle?: string;
/**
* Used for the root element when the type is circular.
*/
circular?: string;
/**
* Added to the root element if mode is indeterminate.
*/
indeterminate?: string;
/**
* Used for the root element when the type is linear.
*/
linear?: string;
/**
* Added to the root if the component is multicolor (circular).
*/
multicolor?: string;
/**
* Used for the inner path in the circular progress.
*/
path?: string;
/**
* Used to style the value element in the linear progress.
*/
value?: string;
}
interface ProgressBarProps extends __ReactToolbox.Props {
/**
* Value of a secondary progress bar useful for buffering.
* @default 0
*/
buffer?: number;
/**
* Maximum value permitted.
* @default 100
*/
max?: number;
/**
* Minimum value permitted.
* @default 0
*/
min?: number;
/**
* Mode of the progress bar, it can be determinate or indeterminate.
* @default indeterminate
*/
mode?: "determinate" | "indeterminate";
/**
* If true, the circular progress bar will be changing its color.
* @default false
*/
multicolor?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: ProgressBarTheme;
/**
* Type of the progress bar, it can be circular or linear.
* @default linear
*/
type?: "linear" | "circular";
/**
* Value of the current progress.
* @default 0
*/
value?: number;
}
export class ProgressBar extends __React.Component<ProgressBarProps, {}> { }
export default ProgressBar;

101
components/radio/index.d.ts vendored Normal file
View File

@ -0,0 +1,101 @@
import __ReactToolbox from "../index.d.ts";
interface RadioGroupProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* If true, the group will be displayed as disabled.
* @default false
*/
disabled?: boolean;
/**
* Name for the input element group.
*/
name?: string;
/**
* Callback function that will be invoked when the value changes.
*/
onChange?: Function;
/**
* Default value selected in the radio group.
*/
value?: number;
}
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.
*/
disabled?: string;
/**
* Used as the root class of the component.
*/
field?: string;
/**
* Used for the input element.
*/
input?: string;
/**
* Used to style the text label element.
*/
text?: string;
}
interface RadioButtonProps extends __ReactToolbox.Props {
/**
* If true, the input element will be selected by default. Transferred from the parent.
* @default false
*/
checked?: boolean;
/**
* If true, the item will be displayed as disabled.
* @default false
*/
disabled?: boolean;
/**
* Label for the radio button.
*/
label?: __React.ReactNode | string;
/**
* Name for the input element.
*/
name?: string;
/**
* Callback function that will be invoked when the input is blurred.
*/
onBlur?: __React.FocusEventHandler;
/**
* Callback function that will be invoked when the value changes.
*/
onChange?: __React.FormEventHandler;
/**
* Callback function that will be invoked when the input is focused.
*/
onFocus?: __React.FocusEventHandler;
/**
* Classnames object defining the component style.
*/
theme?: RadioButtonTheme;
/**
* Value for the radio button.
*/
value?: any;
}
export class RadioButton extends __React.Component<RadioButtonProps, {}> { }

49
components/ripple/index.d.ts vendored Normal file
View File

@ -0,0 +1,49 @@
import __ReactToolbox from "../index.d.ts";
export interface RippleTheme {
/**
* Root classname for the ripple.
*/
ripple?: string;
/**
* Applied when the ripple is active.
*/
rippleActive?: string;
/**
* Applied when the ripple is restarting.
*/
rippleRestarting?: string;
/**
* Wrapper class to fit to the parent element.
*/
rippleWrapper?: string;
}
interface RippleProps {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* True in case you want a centered ripple.
* @default false
*/
disabled?: boolean;
/**
* Function that will be called when the ripple animation ends.
*/
onRippleEnded?: Function;
/**
* Factor to indicate how much should the ripple spread under the component.
* @default 2
*/
spread?: number;
/**
* Classnames object defining the component style.
*/
theme?: RippleTheme;
}
export class Ripple extends __React.Component<RippleProps, {}> { }
export default Ripple;

106
components/slider/index.d.ts vendored Normal file
View File

@ -0,0 +1,106 @@
import __ReactToolbox from "../index.d.ts";
export interface SliderTheme {
/**
* Used as an inner container of the root component.
*/
container?: string;
/**
* Added to the root of in case the Slider is editable.
*/
editable?: string;
/**
* Used to style the inner element of the knob.
*/
innerknob?: string;
/**
* Provided to the ProgressBar component.
*/
innerprogress?: string;
/**
* Provided to the Input element in case it's editable.
*/
input?: string;
/**
* Used to style the outer layer of the knob.
*/
knob?: string;
/**
* Added to the root in case the Slider is pinned.
*/
pinned?: string;
/**
* Added to the root in case the state is pressed.
*/
pressed?: string;
/**
* Used as an outer wrapper for the ProgressBar.
*/
progress?: string;
/**
* Used in the root when the knob should be a ring.
*/
ring?: string;
/**
* Class used for the root element.
*/
slider?: string;
/**
* Used for every individual snap element.
*/
snap?: string;
/**
* Used as a wrapper for the group of snaps when it's snapped.
*/
snaps?: string;
}
interface SliderProps extends __ReactToolbox.Props {
/**
* If true, an input is shown and the user can set the slider from keyboard value.
* @default false
*/
editable?: boolean;
/**
* Maximum value permitted.
* @default 100
*/
max?: number;
/**
* Minimum value permitted.
* @default 0
*/
min?: number;
/**
* Callback function that will be invoked when the slider value changes.
*/
onChange?: Function;
/**
* If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.
* @default false
*/
pinned?: boolean;
/**
* If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.
* @default false
*/
snaps?: boolean;
/**
* Amount to vary the value when the knob is moved or increase/decrease is called.
* @default 0.01
*/
step?: number;
/**
* Classnames object defining the component style.
*/
theme?: SliderTheme;
/**
* Current value of the slider.
* @default 0
*/
value?: number;
}
export class Slider extends __React.Component<SliderProps, {}> { }
export default Slider;

76
components/snackbar/index.d.ts vendored Normal file
View File

@ -0,0 +1,76 @@
import __ReactToolbox from "../index.d.ts";
export interface SnackbarTheme {
/**
* Added to the root element in case it's accept type.
*/
accept?: string;
/**
* Added to the root element when its active.
*/
active?: string;
/**
* Used for the button inside the component.
*/
button?: string;
/**
* Added to the root element in case it's cancel type.
*/
cancel?: string;
/**
* Used for the icon element.
*/
icon?: string;
/**
* Used for the label element.
*/
label?: string;
/**
* Used as the className for the root element of the component.
*/
snackbar?: string;
/**
* Added to the root element in case it's warning type.
*/
warning?: string;
}
interface SnackbarProps extends __ReactToolbox.Props {
/**
* Label for the action component inside the Snackbar.
*/
action?: string;
/**
* If true, the snackbar will be active.
* @default true
*/
active?: boolean;
/**
* String key for an icon or Element which will be displayed in left side of the snackbar.
*/
icon?: __React.ReactNode | string;
/**
* Text to display in the content. Required.
*/
label: string;
/**
* Callback function when finish the set timeout.
*/
onTimeout?: Function;
/**
* Classnames object defining the component style.
*/
theme?: SnackbarTheme;
/**
* Amount of time in milliseconds after the Snackbar will be automatically hidden.
*/
timeout?: number;
/**
* Indicates the action type. Can be accept, warning or cancel
*/
type?: "accept" | "cancel" | "warning";
}
export class Snackbar extends __React.Component<SnackbarProps, {}> { }
export default Snackbar;

77
components/switch/index.d.ts vendored Normal file
View File

@ -0,0 +1,77 @@
import __ReactToolbox from "../index.d.ts";
export interface SwitchTheme {
/**
* Used for the root element if the component is disabled.
*/
disabled?: string;
/**
* Used for the root element if the component is not disabled.
*/
field?: string;
/**
* Used for the input element.
*/
input?: string;
/**
* Used for a wrapper around the thumb if checked is false.
*/
off?: string;
/**
* Used for a wrapper around the thumb if checked is true.
*/
on?: string;
/**
* Used for the ripple inside the switch.
*/
ripple?: string;
/**
* Used for the text label element.
*/
text?: string;
/**
* Used for the thumb element.
*/
thumb?: string;
}
interface SwitchProps extends __ReactToolbox.Props {
/**
* If true, the switch will be enabled.
* @default false
*/
checked?: boolean;
/**
* If true, component will be disabled.
* @default false
*/
disabled?: boolean;
/**
* The text string to use for the floating label element.
*/
label?: string;
/**
* The text string used as name of the input.
*/
name?: string;
/**
* Callback function that is fired when when the switch is blurred.
*/
onBlur?: __React.FocusEventHandler;
/**
* Callback function that is fired when the component's value changes.
*/
onChange?: __React.FormEventHandler;
/**
* Callback function that is fired when the switch is focused.
*/
onFocus?: __React.FocusEventHandler;
/**
* Classnames object defining the component style.
*/
theme?: SwitchTheme;
}
export class Switch extends __React.Component<SwitchProps, {}> { }
export default Switch;

70
components/table/index.d.ts vendored Normal file
View File

@ -0,0 +1,70 @@
import __ReactToolbox from "../index.d.ts";
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;
/**
* Classname used for the root element.
*/
table?: string;
}
interface TableProps extends __ReactToolbox.Props {
/**
* If true, component will show a heading using model field names.
* @default true
*/
heading?: boolean;
/**
* 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 function invoked when the row selection changes.
*/
onSelect?: __React.FormEventHandler;
/**
* If true, each row will display a checkbox to allow the user to select that one row.
* @default true
*/
selectable?: boolean;
/**
* If true, the header and each row will display a checkbox to allow the user to select multiple rows.
* @default true
*/
multiSelectable?: boolean;
/**
* Array of indexes of the items in the source that should appear as selected.
*/
selected?: any[];
/**
* Array of objects representing each item to show.
*/
source?: any[];
/**
* Classnames object defining the component style.
*/
theme?: TableTheme;
}
export class Table extends __React.Component<TableProps, {}> { }
export default Table;

105
components/tabs/index.d.ts vendored Normal file
View File

@ -0,0 +1,105 @@
import __ReactToolbox from "../index.d.ts";
export interface TabsTheme {
/**
* Added to the active tab content and header.
*/
active?: string;
/**
* Used for the navigation element.
*/
navigation?: string;
/**
* Used for the moving underline element.
*/
pointer?: string;
/**
* Used as a root classname for the component.
*/
tabs?: string;
/**
* Used for the tab content element.
*/
tab?: string;
}
interface TabsProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* Disable the animation below the active tab.
* @default false
*/
disableAnimatedBottomBorder?: boolean;
/**
* Current
* @default 0
*/
index?: number;
/**
* Callback function that is fired when the tab changes.
*/
onChange?: Function;
/**
* Classnames object defining the component style.
*/
theme?: TabsTheme;
}
export class Tabs extends __React.Component<TabsProps, {}> { }
export interface TabTheme {
/**
* Added to the navigation tab element in case it's active.
*/
active?: string;
/**
* Added to the navigation tab element in case it's disabled.
*/
disabled?: string;
/**
* Added to the navigation tab element in case it's hidden.
*/
hidden?: string;
/**
* Added to the navigation tab element in case it's active.
*/
label?: string;
}
interface TabProps extends __ReactToolbox.Props {
/**
* If true, the current component is visible.
*/
active?: boolean;
/**
* Additional class name to provide custom styling for the active tab.
*/
activeClassName?: string;
/**
* If true, the current component is not clickable.
* @default false
*/
disabled?: boolean;
/**
* If true, the current component is not visible.
* @default false
*/
hidden?: boolean;
/**
* Label text for navigation header. Required.
*/
label: string;
/**
* Callback function that is fired when the tab is activated.
*/
onActive?: Function;
/**
* Classnames object defining the component style.
*/
theme?: TabTheme;
}
export class Tab extends __React.Component<TabProps, {}> { }

132
components/time_picker/index.d.ts vendored Normal file
View File

@ -0,0 +1,132 @@
import __ReactToolbox from "../index.d.ts";
export interface TimePickerTheme {
/**
* Added to the number which is active in clock face.
*/
active?: string;
/**
* AM label in dialog header when mode is AM/PM.
*/
am?: string;
/**
* Added to the dialog when the selected format is AM.
*/
amFormat?: string;
/**
* Wrapper for AM and PM labels in header when mode is AM/PM.
*/
ampm?: string;
/**
* Used for buttons inside the dialog of the picker.
*/
button?: string;
/**
* Clock root class element.
*/
clock?: string;
/**
* Wrapper for the proper positioning of the clock.
*/
clockWrapper?: string;
/**
* Used for the dialog component.
*/
dialog?: string;
/**
* Used to style the clock face.
*/
face?: string;
/**
* Used for the clock's hand.
*/
hand?: string;
/**
* Dialog header wrapper class.
*/
header?: string;
/**
* Used for hours in dialog header.
*/
hours?: string;
/**
* Added to the dialog hours are displayed.
*/
hoursDisplay?: string;
/**
* Used for Input element that opens the picker.
*/
input?: string;
/**
* Used for the knob of the hand.
*/
knob?: string;
/**
* Used for minutes in dialog header.
*/
minutes?: string;
/**
* Added to the dialog minutes are displayed.
*/
minutesDisplay?: string;
/**
* Each of the numbers in the clock's face.
*/
number?: string;
/**
* Placeholder for the clock inside the dialog (inner wrapper).
*/
placeholder?: string;
/**
* PM label in dialog header when mode is AM/PM.
*/
pm?: string;
/**
* Added to the dialog when the selected format is PM.
*/
pmFormat?: string;
/**
* Is the : separator between hours and minutes in dialog header.
*/
separator?: string;
/**
* Added to the knob when no round number is selected.
*/
small?: string;
}
interface TimePickerProps {
/**
* Provide error text which will be displayed under the field.
*/
error?: string;
/**
* This class will be applied to Input component of TimePicker.
*/
inputClassName?: string;
/**
* Format to display the clock. It can be 24hr or ampm.
* @default false
*/
format?: "24hr" | "ampm";
/**
* The text string to use for the floating label element in the input component.
*/
label?: string;
/**
* Callback called when the picker value is changed.
*/
onChange?: Function;
/**
* Classnames object defining the component style.
*/
theme?: TimePickerTheme;
/**
* Datetime object with currrently selected time.
*/
value?: Date;
}
export class TimePicker extends __React.Component<TimePickerProps, {}> { }
export default TimePicker;

54
components/tooltip/index.d.ts vendored Normal file
View File

@ -0,0 +1,54 @@
export interface TooltipTheme {
/**
* Added to the tooltip element.
*/
tooltip?: string;
/**
* Added to the root when the tooltip is active.
*/
tooltipActive?: string;
/**
* Wrapper for the root element used to position the tooltip.
*/
tooltipWrapper?: string;
}
interface TooltipProps {
/**
* Callback called when the mouse enters the Component.
*/
onMouseEnter?: __React.MouseEventHandler;
/**
* Callback called when the mouse leaves the Component.
*/
onMouseLeave?: __React.MouseEventHandler;
/**
* Classnames object defining the component style.
*/
theme?: TooltipTheme;
/**
* The text string to use for the tooltip.
*/
tooltip?: string;
/**
* Amount of time in miliseconds spent before the tooltip is visible.
*/
tooltipDelay?: number;
/**
* If true, the Tooltip hides after a click in the host component.
* @default true
*/
tooltipHideOnClick?: boolean;
}
declare class TooltipComponent<P, S> extends __React.Component<P, S> {
props: P & TooltipProps;
}
interface TooltippedComponentClass<P> extends TooltipProps {
new (props?: P, context?: any): TooltipComponent<P, any>;
}
export function Tooltip<P>(componentClass: __React.ComponentClass<P>): TooltippedComponentClass<P>;
export default Tooltip;

41
lib/app_bar/index.d.ts vendored Normal file
View File

@ -0,0 +1,41 @@
import __ReactToolbox from "../index.d.ts";
export interface AppBarTheme {
/**
* Used for the component root element.
*/
appBar?: string;
/**
* Added to the root element when the app bar is fixed.
*/
fixed?: string;
/**
* Added to the root element when the app bar is flat.
*/
flat?: string;
}
interface AppBarProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* Determine if the bar should have position fixed or relative.
* @default false
*/
fixed?: boolean;
/**
* If true, the AppBar shows a shadow.
* @default false
*/
flat?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: AppBarTheme;
}
export class AppBar extends __React.Component<AppBarProps, {}> { }
export default AppBar;

105
lib/autocomplete/index.d.ts vendored Normal file
View File

@ -0,0 +1,105 @@
import __ReactToolbox from "../index.d.ts";
export interface AutocompleteTheme {
/**
* Used for a suggestion when it's active.
*/
active?: string;
/**
* Used for the root element.
*/
autocomplete?: string;
/**
* Used when the input is focused.
*/
focus?: string;
/**
* Used to style the Input component.
*/
input?: string;
/**
* Used for the label.
*/
label?: string;
/**
* Used to style each suggestion.
*/
suggestion?: string;
/**
* Used to style the suggestions container.
*/
suggestions?: string;
/**
* Used for the suggestions when it's opening to the top.
*/
up?: string;
/**
* Classname used for a single value.
*/
value?: string;
/**
* Classname used for the values container.
*/
values?: string;
}
interface AutocompleteProps extends __ReactToolbox.Props {
/**
* Determines the opening direction. It can be auto, up or down.
* @default auto
*/
direction?: "auto" | "up" | "down";
/**
* If true, component will be disabled.
*/
disabled?: boolean;
/**
* Sets the error string for the internal input element.
* @default false
*/
error?: string;
/**
* The text string to use for the floating label element.
*/
label?: string;
/**
* If true, component can hold multiple values.
*/
multiple?: boolean;
/**
* Callback function that is fired when the components's value changes.
* @default auto
*/
onChange?: __React.FormEventHandler;
/**
* Determines if the selected list is shown above or below input. It can be above or below.
* @default above
*/
selectedPosition?: "above" | "below";
/**
* If true, the list of suggestions will not be filtered when a value is selected.
* @default false
*/
showSuggestionsWHenValueIsSet?: boolean;
/**
* Object of key/values or array representing all items suggested.
*/
source?: any;
/**
* Determines how suggestions are supplied.
* @default start
*/
suggestionMatch?: "start" | "anywhere" | "word";
/**
* Classnames object defining the component style.
*/
theme?: AutocompleteTheme;
/**
* Value or array of values currently selected component.
*/
value?: any;
}
export class Autocomplete extends __React.Component<AutocompleteProps, {}> { }
export default Autocomplete;

47
lib/avatar/index.d.ts vendored Normal file
View File

@ -0,0 +1,47 @@
import __ReactToolbox from "../index.d.ts";
export interface AvatarTheme {
/**
* Used for the root class of the element.
*/
avatar?: string;
/**
* Added to the root element when the component has image.
*/
image?: string;
/**
* Used for the root element if the component shows the letter.
*/
letter?: string;
}
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.
*/
cover?: boolean;
/**
* A key to identify an Icon from Material Design Icons or a custom Icon Element.
*/
icon?: __React.ReactNode | string;
/**
* An image source or an image element.
*/
image?: __React.ReactNode | string;
/**
* Classnames object defining the component style.
*/
theme?: AvatarTheme;
/**
* A title for the image. If no image is provided, the first letter will be displayed as the avatar.
*/
title?: string;
}
export class Avatar extends __React.Component<AvatarProps, {}> { }
export default Avatar;

227
lib/button/index.d.ts vendored Normal file
View File

@ -0,0 +1,227 @@
import __ReactToolbox from "../index.d.ts";
export interface ButtonTheme {
/**
* 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;
}
interface ButtonProps 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;
/**
* If true, the button will have a flat look.
* @default false
*/
flat?: boolean;
/**
* If true, the button will have a floating look.
* @default false
*/
floating?: boolean;
/**
* 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.
*/
label?: string;
/**
* To be used with floating button. If true, the button will be smaller.
* @default false
*/
mini?: 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?: __React.MouseEventHandler;
/**
* Fires after the mouse is released from the Component.
*/
OnMouseUp?: __React.MouseEventHandler;
/**
* 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.
*/
theme?: ButtonTheme;
}
export class Button extends __React.Component<ButtonProps, {}> { }
export interface IconButtonTheme {
/**
* Used for the root in case button is accent.
*/
accent?: string;
/**
* Used for the root element in any button.
*/
button?: string;
/**
* For the icon inside a button.
*/
icon?: string;
/**
* Used when colors are inverted.
*/
inverse?: string;
/**
* Used for neutral colored buttons.
*/
neutral?: string;
/**
* Used for primary buttons when button is primary.
*/
primary?: string;
/**
* Used for the ripple element.
*/
rippleWrapper?: string;
/**
* Used for toggle buttons in the root element.
*/
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;
/**
* 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;
/**
* Fires after the mouse leaves the Component.
*/
onMouseLeave?: __React.MouseEventHandler;
/**
* Fires after the mouse is released from the Component.
*/
OnMouseUp?: __React.MouseEventHandler;
/**
* 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.
*/
theme?: IconButtonTheme;
}
export class IconButton extends __React.Component<IconButtonProps, {}> { }

102
lib/card/index.d.ts vendored Normal file
View File

@ -0,0 +1,102 @@
import __ReactToolbox from "../index.d.ts";
export interface CardTheme {
card?: string;
raised?: string;
}
interface CardProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
raised?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: CardTheme;
}
export class Card extends __React.Component<CardProps, {}> { }
export interface CardActionsTheme {
cardActions?: string;
}
interface CardActionsProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* Classnames object defining the component style.
*/
theme?: CardActionsTheme;
}
export class CardActions extends __React.Component<CardActionsProps, {}> { }
export interface CardMediaTheme {
cardMedia?: string;
content?: string;
contentOverlay?: string;
square?: string;
wide?: string;
}
interface CardMediaProps extends __ReactToolbox.Props {
aspectRatio?: "wide" | "square";
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
color?: string;
contentOverlay?: boolean;
image?: __React.ReactNode | string;
/**
* Classnames object defining the component style.
*/
theme?: CardMediaTheme;
}
export class CardMedia extends __React.Component<CardMediaProps, {}> { }
export interface CardTextTheme {
cardText?: string;
}
interface CardTextProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* Classnames object defining the component style.
*/
theme?: CardTextTheme;
}
export class CardText extends __React.Component<CardTextProps, {}> { }
export interface CardTitleTheme {
large?: string;
title?: string;
small?: string;
subtitle?: string;
}
interface CardTitleProps extends __ReactToolbox.Props {
avatar?: __React.ReactNode | string;
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
subtitle?: __React.ReactNode | string;
/**
* Classnames object defining the component style.
*/
theme?: CardTitleTheme;
title?: __React.ReactNode | string;
}
export class CardTitle extends __React.Component<CardTitleProps, {}> { }

69
lib/checkbox/index.d.ts vendored Normal file
View File

@ -0,0 +1,69 @@
import __ReactToolbox from "../index.d.ts";
export interface CheckboxTheme {
/**
* Used as root in the check element.
*/
check?: string;
/**
* Used for the check element when it's checked.
*/
checked?: string;
/**
* Used when the component is disabled.
*/
disabled?: string;
/**
* Used as the root class of the component.
*/
field?: string;
/**
* Used for the input element.
*/
input?: string;
/**
* Used for the ripple component.
*/
ripple?: string;
/**
* Used for the text label.
*/
text?: string;
}
interface CheckboxProps extends __ReactToolbox.Props {
/**
* Value for the checkbox, can be true or false.
* @default false
*/
checked?: boolean;
/**
* If true, the checkbox shown as disabled and cannot be modified.
* @default false
*/
disabled?: boolean;
/**
* Text label to attach next to the checkbox element.
*/
label?: __React.ReactNode | string;
/**
* The name of the field to set in the input checkbox.
*/
name?: string;
/**
* Callback called when the checkbox is blurred.
*/
onBlur?: __React.FocusEventHandler;
/**
* Callback called when the checkbox value is changed.
*/
onChange?: __React.MouseEventHandler;
/**
* Classnames object defining the component style.
*/
theme?: CheckboxTheme;
}
export class Checkbox extends __React.Component<CheckboxProps, {}> { }
export default Checkbox;

52
lib/chip/index.d.ts vendored Normal file
View File

@ -0,0 +1,52 @@
import __ReactToolbox from "../index.d.ts";
export interface ChipTheme {
/**
* Added to the root element when the component includes an avatar.
*/
avatar?: string;
/**
* Used for the root element.
*/
chip?: string;
/**
* Added to the root element when the component is deletable.
*/
deletable?: string;
/**
* Used for the delete element wrapper.
*/
delete?: string;
/**
* Used for the delete icon.
*/
deleteIcon?: string;
/**
* Used for the delete svg inner layer.
*/
deleteX?: string;
}
interface ChipProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* If true, the chip will be rendered with a delete icon.
* @default false
*/
deletable?: boolean;
/**
* Callback to be invoked when the delete icon is clicked.
*/
onDeleteClick?: __React.MouseEventHandler;
/**
* Classnames object defining the component style.
*/
theme?: ChipTheme;
}
export class Chip extends __React.Component<ChipProps, {}> { }
export default Chip;

148
lib/date_picker/index.d.ts vendored Normal file
View File

@ -0,0 +1,148 @@
import __ReactToolbox from "../index.d.ts";
export interface DatePickerTheme {
/**
* Used for the active day and year.
*/
active?: string;
/**
* Used for the buttons in the dialog.
*/
button?: string;
/**
* Used for the calendar root element.
*/
calendar?: string;
/**
* Used as wrapper for the calendar component inside dialog.
*/
calendarWrapper?: string;
/**
* Used for the date element inside header.
*/
date?: string;
/**
* Used for the day element inside the calendar.
*/
day?: string;
/**
* Used for the list of days inside a month.
*/
days?: string;
/**
* Used for the dialog component.
*/
dialog?: string;
/**
* Added to day element when day is disabled.
*/
disabled?: string;
/**
* Used for the dialog header,.
*/
header?: string;
/**
* Used for Input element that opens the picker.
*/
input?: string;
/**
* Used for the month root element.
*/
month?: string;
/**
* Added to the root dialog when months are displayed.
*/
monthsDisplay?: string;
/**
* Used for the next month icon.
*/
next?: string;
/**
* Used for the prev month icon.
*/
prev?: string;
/**
* Used for the month title element.
*/
title?: string;
/**
* Used for the weekdays wrapper.
*/
week?: string;
/**
* Used for the year element inside header.
*/
year?: string;
/**
* Used for the years list in years view.
*/
years?: string;
/**
* Added to the root dialog when years are displayed.
*/
yearsDisplay?: string;
}
interface DatePickerProps extends __ReactToolbox.Props {
/**
* Automatically selects a date upon clicking on a day
* @default false
*/
autoOk?: boolean;
/**
* Give an error node to display under the field.
*/
error?: string;
/**
* A key to identify an Icon from Material Design Icons or a custom Icon Element.
*/
icon?: __React.ReactNode | string;
/**
* This class will be applied to Input component of DatePicker.
*/
inputClassName?: string;
/**
* Function to format the date displayed on the input.
*/
inputFormat?: Function;
/**
* The text string to use for the floating label element in the input component.
*/
label?: string;
/**
* Date object with the maximum selectable date.
*/
maxDate?: Date;
/**
* Date object with the minimum selectable date.
*/
minDate?: Date;
/**
* Name for the input field.
*/
name?: string;
/**
* Callback called when the picker value is changed.
*/
onChange?: __React.MouseEventHandler;
/**
* Callback called when the ESC key is pressed with the overlay active.
*/
onEscKeyDown?: __React.KeyboardEventHandler;
/**
* Callback to be invoked when the dialog overlay is clicked.
*/
onOverlayClick?: __React.MouseEventHandler;
/**
* Classnames object defining the component style.
*/
theme?: DatePickerTheme;
/**
* Date object with the currently selected date.
*/
value?: Date | string;
}
export class DatePicker extends __React.Component<DatePickerProps, {}> { }
export default DatePicker;

92
lib/dialog/index.d.ts vendored Normal file
View File

@ -0,0 +1,92 @@
import __ReactToolbox from "../index.d.ts";
export interface DialogTheme {
/**
* Used for the root when the dialog is active.
*/
active?: string;
/**
* Used to wrap the dialog body.
*/
body?: string;
/**
* Used in buttons when the dialog implements actions.
*/
button?: string;
/**
* Used for the root element.
*/
dialog?: string;
/**
* Used for the navigation element when it implements actions.
*/
navigation?: string;
/**
* Used for the title element of the dialog.
*/
title?: string;
}
interface DialogActionProps {
/**
* The text string to use for the name of the button.
*/
label?: string;
/**
* Callback called when the component is clicked.
*/
onClick?: __React.MouseEventHandler;
}
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.
*/
actions?: DialogActionProps[];
/**
* If true, the dialog will be active.
* @default false
*/
active?: boolean;
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* Callback called when the ESC key is pressed with the overlay active.
*/
onEscKeyDown?: __React.KeyboardEventHandler;
/**
* Callback to be invoked when the dialog overlay is clicked.
*/
onOverlayClick?: __React.MouseEventHandler;
/**
* Callback called when the mouse button is pressed on the overlay.
*/
onOverlayMouseDown?: __React.MouseEventHandler;
/**
* Callback called when the mouse is moving over the overlay.
*/
onOverlayMouseMove?: __React.MouseEventHandler;
/**
* Callback called when the mouse button is released over the overlay.
*/
onOverlayMouseUp?: __React.MouseEventHandler;
/**
* Classnames object defining the component style.
*/
theme?: DialogTheme;
/**
* The text string to use as standar title of the dialog.
*/
title?: string;
/**
* Used to determine the size of the dialog. It can be small, normal or large.
* @default normal
*/
type?: string;
}
export class Dialog extends __React.Component<DialogProps, {}> { }
export default Dialog;

53
lib/drawer/index.d.ts vendored Normal file
View File

@ -0,0 +1,53 @@
import __ReactToolbox from "../index.d.ts";
export interface DrawerTheme {
/**
* Used for the root class when the drawer is active.
*/
active?: string;
/**
* Used for the drawer content.
*/
content?: string;
/**
* Root class.
*/
drawer?: string;
/**
* Added to the root class when drawer is to the left.
*/
left?: string;
/**
* Added to the root class when drawer is to the right.
*/
right?: string;
}
interface DrawerProps extends __ReactToolbox.Props {
/**
* If true, the drawer will be visible.
* @default false
*/
active?: boolean;
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* Callback function to be invoked when the overlay is clicked.
*/
onOverlayClick?: __React.MouseEventHandler;
/**
* Classnames object defining the component style.
*/
theme?: DrawerTheme;
/**
* Type of drawer. It can be left or right to display the drawer on the left or right side of the screen.
* @default left
*/
type?: "left" | "right";
}
export class Drawer extends __React.Component<DrawerProps, {}> { }
export default Drawer;

114
lib/dropdown/index.d.ts vendored Normal file
View File

@ -0,0 +1,114 @@
import __ReactToolbox from "../index.d.ts";
export interface DropdownTheme {
/**
* Added to the root element when the dropdown is active.
*/
active?: string;
/**
* Added to the root element when it's disabled.
*/
disabled?: string;
/**
* Root element class.
*/
dropdown?: string;
/**
* Used for the error element.
*/
error?: string;
/**
* Added to the inner wrapper if it's errored.
*/
errored?: string;
/**
* Used for the inner wrapper of the component.
*/
field?: string;
/**
* Used for the the label element.
*/
label?: string;
/**
* Used to highlight the selected value.
*/
selected?: string;
/**
* Used as a wrapper for the given template value.
*/
templateValue?: string;
/**
* Added to the root element when it's opening up.
*/
up?: string;
/**
* Used for each value in the dropdown component.
*/
value?: string;
/**
* Used for the list of values.
*/
values?: string;
}
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
*/
allowBlank?: boolean;
/**
* If true, the dropdown will open up or down depending on the position in the screen.
* @default true
*/
auto?: boolean;
/**
* Set the component as disabled.
* @default false
*/
disabled?: boolean;
/**
* Give an error string to display under the field.
*/
error?: string;
/**
* The text string to use for the floating label element.
*/
label?: string;
/**
* Name for the input field.
*/
name?: string;
/**
* Callback function that is fired when the component is blurred.
*/
onBlur?: __React.FocusEventHandler;
/**
* Callback function that is fired when the component's value changes.
*/
onChange?: __React.FormEventHandler;
/**
* Callback function that is fired when the component is focused.
*/
onFocus?: __React.FocusEventHandler;
/**
* Array of data objects with the data to represent in the dropdown.
*/
source: any[];
/**
* Callback function that returns a JSX template to represent the element.
*/
template?: Function;
/**
* Classnames object defining the component style.
*/
theme?: DropdownTheme;
/**
* Default value using JSON data.
*/
value?: string | number;
}
export class Dropdown extends __React.Component<DropdownProps, {}> { }
export default Dropdown;

16
lib/font_icon/index.d.ts vendored Normal file
View File

@ -0,0 +1,16 @@
import __ReactToolbox from "../index.d.ts";
interface FontIconProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* The key string for the icon you want be displayed.
*/
value?: __React.ReactNode | string;
}
export class FontIcon extends __React.Component<FontIconProps, {}> { }
export default FontIcon;

22
lib/index.d.ts vendored Normal file
View File

@ -0,0 +1,22 @@
export declare namespace __ReactToolbox {
interface Props {
/**
* Set a class for the root component.
*/
className?: string;
/**
* Key used to uniquely identify the element within an Array.
*/
key?: string | number;
/**
* Callback called when the component is clicked.
*/
onClick?: __React.MouseEventHandler;
/**
* Set inline style for the root component.
*/
style?: __React.CSSProperties;
}
}
export default __ReactToolbox;

135
lib/input/index.d.ts vendored Normal file
View File

@ -0,0 +1,135 @@
import __ReactToolbox from "../index.d.ts";
export interface InputTheme {
/**
* Used for the bar under the input.
*/
bar?: string;
/**
* Used for the counter element.
*/
counter?: string;
/**
* Added to the root class when input is disabled.
*/
disabled?: string;
/**
* Used for the text error.
*/
error?: string;
/**
* Added to the root class when input is errored.
*/
errored?: string;
/**
* Used when the input is hidden.
*/
hidden?: string;
/**
* Used for the hint text.
*/
hint?: string;
/**
* Used for the icon in case the input has icon.
*/
icon?: string;
/**
* Used as root class for the component.
*/
input?: string;
/**
* Used for the HTML input element.
*/
inputElement?: string;
/**
* Used in case the input is required.
*/
required?: string;
/**
* Added to the root class if the input has icon.
*/
withIcon?: string;
}
interface InputProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* If true, component will be disabled.
* @default false
*/
disabled?: boolean;
/**
* Give an error node to display under the field.
*/
error?: string;
/**
* Indicates if the label is floating in the input field or not.
* @default true
*/
floating?: boolean;
/**
* The text string to use for hint text element.
*/
hint?: string;
/**
* Name of an icon to use as a label for the input.
*/
icon?: __React.ReactNode | string;
/**
* The text string to use for the floating label element.
*/
label?: string;
/**
* Specifies the maximum number of characters allowed in the component
*/
maxLength?: number;
/**
* If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.
* @default false
*/
multiLine?: boolean;
/**
* Name for the input field.
*/
name?: string;
/**
* Callback function that is fired when component is blurred.
*/
onBlur?: __React.FocusEventHandler;
/**
* Callback function that is fired when the component's value changes
*/
onChange?: __React.FormEventHandler;
/**
* Callback function that is fired when component is focused.
*/
onFocus?: __React.FocusEventHandler;
/**
* Callback function that is fired when a key is pressed.
*/
onKeyPress?: __React.MouseEventHandler;
/**
* If true, the html input has a required attribute.
* @default false
*/
required?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: InputTheme;
/**
* Type of the input element. It can be a valid HTML5 input type
*/
type?: string;
/**
* Current value of the input element.
*/
value?: any;
}
export class Input extends __React.Component<InputProps, {}> { }
export default Input;

193
lib/layout/index.d.ts vendored Normal file
View File

@ -0,0 +1,193 @@
import __ReactToolbox from "../index.d.ts";
export interface LayoutTheme {
/**
* Class used in the container to position and align inner items.
*/
layout?: string;
}
interface LayoutProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: [NavDrawer | Panel | Sidebar];
/**
* Classnames object defining the component style.
*/
theme?: LayoutTheme;
}
export class Layout extends __React.Component<LayoutProps, {}> { }
export interface NavDrawerTheme {
/**
* Used when the drawer is active.
*/
active?: string;
/**
* Used for the content of the drawer.
*/
drawerContent?: string;
/**
* Added to the root class for large drawer.
*/
lgPermangent?: string;
/**
* Added to the root class for medium drawer.
*/
mdPermangent?: string;
/**
* Root class for the drawer.
*/
navDrawer?: string;
/**
* Added to the root class if positioning is pinned.
*/
pinned?: string;
/**
* Used as a wrapper for the drawer content.
*/
scrim?: string;
/**
* Added to the drawer content if its scrollable.
*/
scrollY?: string;
/**
* Added to the root class for small drawer.
*/
smPermanent?: string;
/**
* Added to the root class if width is wide.
*/
wide?: string;
/**
* Added to the root class for extra big drawer.
*/
xlPermanent?: string;
/**
* Added to the root class for super big drawer.
*/
xxlPermangent?: string;
/**
* Added to the root class for largest possible drawer.
*/
xxxlPermangent?: string;
}
interface NavDrawerProps extends __ReactToolbox.Props {
/**
* If true, the drawer will be shown as an overlay.
* @default false
*/
active?: boolean;
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* Callback function to be invoked when the overlay is clicked.
*/
onOverlayClick?: __React.MouseEventHandler;
/**
* The breakpoint at which the drawer is automatically pinned.
*/
permanentAt?: "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
/**
* If true, the drawer will be pinned open. pinned takes precedence over active.
* @default false
*/
pinned?: boolean;
/**
* If true, the drawer will vertically scroll all content.
* @default false
*/
scrollY?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: NavDrawerTheme;
/**
* 320px or 400px. Only applicable above the sm breakpoint.
* @default normal
*/
width?: "normal" | "wide";
}
export class NavDrawer extends __React.Component<NavDrawerProps, {}> { }
export interface PanelTheme {
/**
* Used as the root class of the panel component.
*/
panel?: string;
/**
* Used in case the panel is scrollable.
*/
scrollY?: string;
}
interface PanelProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* If true, the panel will vertically scroll all content.
* @default false
*/
scrollY?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: PanelTheme;
}
export class Panel extends __React.Component<PanelProps, {}> { }
export interface SidebarTheme {
/**
* Added to the root class if sidebar is pinned.
*/
pinned?: string;
/**
* Add to the content of sidebar if its scrollable.
*/
scrollY?: string;
/**
* Root class of the sidebar.
*/
sidebar?: string;
/**
* Used in for the content element of the sidebar.
*/
sidebarContent?: string;
}
interface SidebarProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* If true, the sidebar will be pinned open.
* @default false
*/
pinned?: boolean;
/**
* If true, the sidebar will vertically scroll all content
* @default false
*/
scrollY?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: SidebarTheme;
/**
* Width in standard increments (1-12) or percentage (25, 33, 50, 66, 75, 100)
* @default 5
*/
width?: number; // 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 33 | 50 | 66 | 75 | 100;
}
export class Sidebar extends __React.Component<SidebarProps, {}> { }

50
lib/link/index.d.ts vendored Normal file
View File

@ -0,0 +1,50 @@
import __ReactToolbox from "../index.d.ts";
export interface LinkTheme {
/**
* Added to the root element if the Link is active.
*/
active?: string;
/**
* Used for the icon element if it's present.
*/
icon?: string;
/**
* Used for the root element.
*/
link?: string;
}
interface LinkProps extends __ReactToolbox.Props {
/**
* If true, adds active style to link.
* @default false
*/
active?: boolean;
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* Sets a count number.
*/
count?: number;
/**
* Sets the anchor link.
*/
href?: string;
/**
* An icon key string to include a FontIcon component in front of the text.
*/
icon?: __React.ReactNode | string;
/**
* The text string used for the text content of the link.
*/
label?: string;
/**
* Classnames object defining the component style.
*/
theme?: LinkTheme;
}
export class Link extends __React.Component<LinkProps, {}> { }

264
lib/list/index.d.ts vendored Normal file
View File

@ -0,0 +1,264 @@
import __ReactToolbox from "../index.d.ts";
export interface ListTheme {
/**
* Used for the root element of the list.
*/
list?: string;
}
interface ListProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* If true, each element in the list will have a ripple effect on click
* @default false
*/
ripple?: boolean;
/**
* If true, the elements in the list will display a hover effect and a pointer cursor.
* @default false
*/
selectable?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: ListTheme;
}
export class List extends __React.Component<ListProps, {}> { }
export interface ListCheckboxTheme {
/**
* Used as a wrapper class for the subheader element.
*/
checkbox?: string;
/**
* Added to the checkbox element.
*/
checkboxItem?: string;
/**
* 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 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 {
/**
* Main text of the item. Required.
*/
caption?: string;
/**
* If true the checkbox appears checked by default.
* @default false
*/
checked?: boolean;
/**
* If true, the item is displayed as disabled and it's not clickable.
* @default false
*/
disabled?: boolean;
/**
* Secondary text to display under the caption.
*/
legend?: string;
/**
* Name for the checkbox input item.
*/
name?: string;
/**
* Callback called when the input element is blurred.
*/
onBlur?: __React.FocusEventHandler;
/**
* Callback called when the input element is changed.
*/
onChange?: __React.FormEventHandler;
/**
* Callback called when the input element is focused.
*/
onFocus?: __React.FocusEventHandler;
/**
* Classnames object defining the component style.
*/
theme?: ListCheckboxTheme;
}
export class ListCheckbox extends __React.Component<ListCheckboxProps, {}> { }
export interface ListDividerTheme {
/**
* Added to the root element.
*/
divider?: string;
/**
* Added to root element if inset is true.
*/
inset?: string;
}
interface ListDividerProps extends __ReactToolbox.Props {
/**
* If true, will leave a space at the left side.
*/
inset?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: ListDividerTheme;
}
export class ListDivider extends __React.Component<ListDivider, {}> { }
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;
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* If true, the item is displayed as disabled and is not clickable.
* @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
*/
theme?: ListItemTheme;
/**
* In case you want to provide the item as a link, you can pass this property to specify the href.
*/
to?: string;
}
export class ListItem extends __React.Component<ListItemProps, {}> { }
export interface ListSubHeaderTheme {
/**
* Used as a wrapper class for the subheader element.
*/
subheader?: string;
}
interface ListSubHeaderProps extends __ReactToolbox.Props {
/**
* Text that will be displayed.
*/
caption?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: ListSubHeaderTheme;
}
export class ListSubHeader extends __React.Component<ListSubHeaderProps, {}> { }

241
lib/menu/index.d.ts vendored Normal file
View File

@ -0,0 +1,241 @@
import __ReactToolbox from "../index.d.ts";
export interface MenuTheme {
/**
* Added to the root element when menu is active.
*/
active?: string;
/**
* Added to the root when position is bottom left.
*/
bottomLeft?: string;
/**
* Added to the root when position is bottom right.
*/
bottomRight?: string;
/**
* Used for the root element of the menu.
*/
menu?: string;
/**
* Used for the inner wrapper.
*/
menuInner?: string;
/**
* Used to draw the outline.
*/
outline?: string;
/**
* Added to the menu in case if should have ripple.
*/
rippled?: string;
/**
* Added to the root in case its static.
*/
static?: string;
/**
* Added to the root when position is top left.
*/
topLeft?: string;
/**
* Added to the root when position is top right.
*/
topRight?: string;
}
interface MenuProps extends __ReactToolbox.Props {
/**
* If true, the menu will be displayed as opened by default.
* @default false
*/
active?: boolean;
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* Callback that will be called when the menu is being hidden.
*/
onHide?: Function;
/**
* Callback that will be invoked when a menu item is selected.
*/
onSelect?: Function;
/**
* Callback that will be invoked when the menu is being shown.
*/
onShow?: Function;
/**
* If true the menu wrapper will show an outline with a soft shadow.
* @default false
*/
outline?: boolean;
/**
* Determine the position of the menu. With static value the menu will be always shown, auto means that the it will decide the opening direction based on the current position. To force a position use topLeft, topRight, bottomLeft, bottomRight.
* @default static
*/
position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
/**
* If true, the menu items will show a ripple effect on click.
* @default true
*/
ripple?: boolean;
/**
* If true, the menu will keep a value to highlight the active child item.
* @default false
*/
selectable?: boolean;
/**
* Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted.
*/
selected?: any;
/**
* Classnames object defining the component style.
*/
theme?: MenuTheme;
}
export class Menu extends __React.Component<MenuProps, {}> { }
export interface IconMenuTheme {
/**
* Used for the icon element.
*/
icon?: string;
/**
* Used for the root element of the icon menu.
*/
iconMenu?: string;
}
interface IconMenuProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* Icon font key string or Element to display the opener icon.
* @default more_vert
*/
icon?: __React.ReactNode | string;
/**
* If true, the icon will show a ripple when is clicked.
* @default true
*/
iconRipple?: boolean;
/**
* Transferred to the Menu component.
* @default true
*/
menuRipple?: boolean;
/**
* Callback that will be called when the menu is being hidden.
*/
onHide?: Function;
/**
* Callback that will be invoked when a menu item is selected.
*/
onSelect?: Function;
/**
* Callback that will be invoked when the menu is being shown.
*/
onShow?: Function;
/**
* Determines the position of the menu. This property is transferred to the inner Menu component.
* @default auto
*/
position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
/**
* If true, the menu will keep a value to highlight the active child item.
* @default false
*/
selectable?: boolean;
/**
* Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted.
*/
selected?: any;
/**
* Classnames object defining the component style.
*/
theme?: IconMenuTheme;
}
export class IconMenu extends __React.Component<IconMenuProps, {}> { }
export interface MenuDividerTheme {
/**
*
*/
menuDivider?: string;
}
interface MenuDividerProps extends __ReactToolbox.Props {
/**
* Classnames object defining the component style.
*/
theme?: MenuDividerTheme;
}
export class MenuDivider extends __React.Component<MenuDividerProps, {}> { }
export interface MenuItemTheme {
/**
* Used for the caption inside the item.
*/
caption?: string;
/**
* Added to the root element if it's disabled.
*/
disabled?: string;
/**
* Used for the icon element if exists.
*/
icon?: string;
/**
* Used as the root class for the component.
*/
menuItem?: string;
/**
* Added to the root element in case it's selected.
*/
selected?: string;
/**
* Used for the shortcut element if exists.
*/
shortcut?: string;
}
interface MenuItemProps extends __ReactToolbox.Props {
/**
* The text to include in the menu item. Required.
*/
caption: string;
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* If true, the item will be displayed as disabled and is not selectable.
* @default false
*/
disabled?: boolean;
/**
* Icon font key string or Element to display in the right side of the option.
*/
icon?: __React.ReactNode | string;
/**
* Transferred from the Menu component for selectable menus. Indicates if it's the current active option.
* @default false
*/
selected?: boolean;
/**
* Displays shortcut text on the right side of the caption attribute.
*/
shortcut?: string;
/**
* Classnames object defining the component style.
*/
theme?: MenuItemTheme;
}
export class MenuItem extends __React.Component<MenuItemProps, {}> { }

46
lib/navigation/index.d.ts vendored Normal file
View File

@ -0,0 +1,46 @@
import __ReactToolbox from "../index.d.ts";
export interface NavigationTheme {
/**
* Used for buttons provided in the component.
*/
button?: string;
/**
* Used for the root element if the layout is horizontal.
*/
horizontal?: string;
/**
* Used for links provided in the component.
*/
link?: string;
/**
* Used for the root element if the layout is vertical.
*/
vertical?: string;
}
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.
*/
actions?: any[];
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* Array of objects similar to actions but that will be rendered as <Link/> component definition.
*/
routes?: any[];
/**
* Classnames object defining the component style.
*/
theme?: NavigationTheme;
/**
* Type of the navigation, it can be vertical or horizontal.
* @default horizontal
*/
type?: "vertical" | "horizontal";
}
export class Navigation extends __React.Component<NavigationProps, {}> { }

82
lib/progress_bar/index.d.ts vendored Normal file
View File

@ -0,0 +1,82 @@
import __ReactToolbox from "../index.d.ts";
export interface ProgressBarTheme {
/**
* Used to style the buffer element in the linear progress.
*/
buffer?: string;
/**
* Used for the circle element in the circular progress.
*/
circle?: string;
/**
* Used for the root element when the type is circular.
*/
circular?: string;
/**
* Added to the root element if mode is indeterminate.
*/
indeterminate?: string;
/**
* Used for the root element when the type is linear.
*/
linear?: string;
/**
* Added to the root if the component is multicolor (circular).
*/
multicolor?: string;
/**
* Used for the inner path in the circular progress.
*/
path?: string;
/**
* Used to style the value element in the linear progress.
*/
value?: string;
}
interface ProgressBarProps extends __ReactToolbox.Props {
/**
* Value of a secondary progress bar useful for buffering.
* @default 0
*/
buffer?: number;
/**
* Maximum value permitted.
* @default 100
*/
max?: number;
/**
* Minimum value permitted.
* @default 0
*/
min?: number;
/**
* Mode of the progress bar, it can be determinate or indeterminate.
* @default indeterminate
*/
mode?: "determinate" | "indeterminate";
/**
* If true, the circular progress bar will be changing its color.
* @default false
*/
multicolor?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: ProgressBarTheme;
/**
* Type of the progress bar, it can be circular or linear.
* @default linear
*/
type?: "linear" | "circular";
/**
* Value of the current progress.
* @default 0
*/
value?: number;
}
export class ProgressBar extends __React.Component<ProgressBarProps, {}> { }
export default ProgressBar;

101
lib/radio/index.d.ts vendored Normal file
View File

@ -0,0 +1,101 @@
import __ReactToolbox from "../index.d.ts";
interface RadioGroupProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* If true, the group will be displayed as disabled.
* @default false
*/
disabled?: boolean;
/**
* Name for the input element group.
*/
name?: string;
/**
* Callback function that will be invoked when the value changes.
*/
onChange?: Function;
/**
* Default value selected in the radio group.
*/
value?: number;
}
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.
*/
disabled?: string;
/**
* Used as the root class of the component.
*/
field?: string;
/**
* Used for the input element.
*/
input?: string;
/**
* Used to style the text label element.
*/
text?: string;
}
interface RadioButtonProps extends __ReactToolbox.Props {
/**
* If true, the input element will be selected by default. Transferred from the parent.
* @default false
*/
checked?: boolean;
/**
* If true, the item will be displayed as disabled.
* @default false
*/
disabled?: boolean;
/**
* Label for the radio button.
*/
label?: __React.ReactNode | string;
/**
* Name for the input element.
*/
name?: string;
/**
* Callback function that will be invoked when the input is blurred.
*/
onBlur?: __React.FocusEventHandler;
/**
* Callback function that will be invoked when the value changes.
*/
onChange?: __React.FormEventHandler;
/**
* Callback function that will be invoked when the input is focused.
*/
onFocus?: __React.FocusEventHandler;
/**
* Classnames object defining the component style.
*/
theme?: RadioButtonTheme;
/**
* Value for the radio button.
*/
value?: any;
}
export class RadioButton extends __React.Component<RadioButtonProps, {}> { }

49
lib/ripple/index.d.ts vendored Normal file
View File

@ -0,0 +1,49 @@
import __ReactToolbox from "../index.d.ts";
export interface RippleTheme {
/**
* Root classname for the ripple.
*/
ripple?: string;
/**
* Applied when the ripple is active.
*/
rippleActive?: string;
/**
* Applied when the ripple is restarting.
*/
rippleRestarting?: string;
/**
* Wrapper class to fit to the parent element.
*/
rippleWrapper?: string;
}
interface RippleProps {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* True in case you want a centered ripple.
* @default false
*/
disabled?: boolean;
/**
* Function that will be called when the ripple animation ends.
*/
onRippleEnded?: Function;
/**
* Factor to indicate how much should the ripple spread under the component.
* @default 2
*/
spread?: number;
/**
* Classnames object defining the component style.
*/
theme?: RippleTheme;
}
export class Ripple extends __React.Component<RippleProps, {}> { }
export default Ripple;

106
lib/slider/index.d.ts vendored Normal file
View File

@ -0,0 +1,106 @@
import __ReactToolbox from "../index.d.ts";
export interface SliderTheme {
/**
* Used as an inner container of the root component.
*/
container?: string;
/**
* Added to the root of in case the Slider is editable.
*/
editable?: string;
/**
* Used to style the inner element of the knob.
*/
innerknob?: string;
/**
* Provided to the ProgressBar component.
*/
innerprogress?: string;
/**
* Provided to the Input element in case it's editable.
*/
input?: string;
/**
* Used to style the outer layer of the knob.
*/
knob?: string;
/**
* Added to the root in case the Slider is pinned.
*/
pinned?: string;
/**
* Added to the root in case the state is pressed.
*/
pressed?: string;
/**
* Used as an outer wrapper for the ProgressBar.
*/
progress?: string;
/**
* Used in the root when the knob should be a ring.
*/
ring?: string;
/**
* Class used for the root element.
*/
slider?: string;
/**
* Used for every individual snap element.
*/
snap?: string;
/**
* Used as a wrapper for the group of snaps when it's snapped.
*/
snaps?: string;
}
interface SliderProps extends __ReactToolbox.Props {
/**
* If true, an input is shown and the user can set the slider from keyboard value.
* @default false
*/
editable?: boolean;
/**
* Maximum value permitted.
* @default 100
*/
max?: number;
/**
* Minimum value permitted.
* @default 0
*/
min?: number;
/**
* Callback function that will be invoked when the slider value changes.
*/
onChange?: Function;
/**
* If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.
* @default false
*/
pinned?: boolean;
/**
* If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.
* @default false
*/
snaps?: boolean;
/**
* Amount to vary the value when the knob is moved or increase/decrease is called.
* @default 0.01
*/
step?: number;
/**
* Classnames object defining the component style.
*/
theme?: SliderTheme;
/**
* Current value of the slider.
* @default 0
*/
value?: number;
}
export class Slider extends __React.Component<SliderProps, {}> { }
export default Slider;

76
lib/snackbar/index.d.ts vendored Normal file
View File

@ -0,0 +1,76 @@
import __ReactToolbox from "../index.d.ts";
export interface SnackbarTheme {
/**
* Added to the root element in case it's accept type.
*/
accept?: string;
/**
* Added to the root element when its active.
*/
active?: string;
/**
* Used for the button inside the component.
*/
button?: string;
/**
* Added to the root element in case it's cancel type.
*/
cancel?: string;
/**
* Used for the icon element.
*/
icon?: string;
/**
* Used for the label element.
*/
label?: string;
/**
* Used as the className for the root element of the component.
*/
snackbar?: string;
/**
* Added to the root element in case it's warning type.
*/
warning?: string;
}
interface SnackbarProps extends __ReactToolbox.Props {
/**
* Label for the action component inside the Snackbar.
*/
action?: string;
/**
* If true, the snackbar will be active.
* @default true
*/
active?: boolean;
/**
* String key for an icon or Element which will be displayed in left side of the snackbar.
*/
icon?: __React.ReactNode | string;
/**
* Text to display in the content. Required.
*/
label: string;
/**
* Callback function when finish the set timeout.
*/
onTimeout?: Function;
/**
* Classnames object defining the component style.
*/
theme?: SnackbarTheme;
/**
* Amount of time in milliseconds after the Snackbar will be automatically hidden.
*/
timeout?: number;
/**
* Indicates the action type. Can be accept, warning or cancel
*/
type?: "accept" | "cancel" | "warning";
}
export class Snackbar extends __React.Component<SnackbarProps, {}> { }
export default Snackbar;

77
lib/switch/index.d.ts vendored Normal file
View File

@ -0,0 +1,77 @@
import __ReactToolbox from "../index.d.ts";
export interface SwitchTheme {
/**
* Used for the root element if the component is disabled.
*/
disabled?: string;
/**
* Used for the root element if the component is not disabled.
*/
field?: string;
/**
* Used for the input element.
*/
input?: string;
/**
* Used for a wrapper around the thumb if checked is false.
*/
off?: string;
/**
* Used for a wrapper around the thumb if checked is true.
*/
on?: string;
/**
* Used for the ripple inside the switch.
*/
ripple?: string;
/**
* Used for the text label element.
*/
text?: string;
/**
* Used for the thumb element.
*/
thumb?: string;
}
interface SwitchProps extends __ReactToolbox.Props {
/**
* If true, the switch will be enabled.
* @default false
*/
checked?: boolean;
/**
* If true, component will be disabled.
* @default false
*/
disabled?: boolean;
/**
* The text string to use for the floating label element.
*/
label?: string;
/**
* The text string used as name of the input.
*/
name?: string;
/**
* Callback function that is fired when when the switch is blurred.
*/
onBlur?: __React.FocusEventHandler;
/**
* Callback function that is fired when the component's value changes.
*/
onChange?: __React.FormEventHandler;
/**
* Callback function that is fired when the switch is focused.
*/
onFocus?: __React.FocusEventHandler;
/**
* Classnames object defining the component style.
*/
theme?: SwitchTheme;
}
export class Switch extends __React.Component<SwitchProps, {}> { }
export default Switch;

70
lib/table/index.d.ts vendored Normal file
View File

@ -0,0 +1,70 @@
import __ReactToolbox from "../index.d.ts";
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;
/**
* Classname used for the root element.
*/
table?: string;
}
interface TableProps extends __ReactToolbox.Props {
/**
* If true, component will show a heading using model field names.
* @default true
*/
heading?: boolean;
/**
* 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 function invoked when the row selection changes.
*/
onSelect?: __React.FormEventHandler;
/**
* If true, each row will display a checkbox to allow the user to select that one row.
* @default true
*/
selectable?: boolean;
/**
* If true, the header and each row will display a checkbox to allow the user to select multiple rows.
* @default true
*/
multiSelectable?: boolean;
/**
* Array of indexes of the items in the source that should appear as selected.
*/
selected?: any[];
/**
* Array of objects representing each item to show.
*/
source?: any[];
/**
* Classnames object defining the component style.
*/
theme?: TableTheme;
}
export class Table extends __React.Component<TableProps, {}> { }
export default Table;

105
lib/tabs/index.d.ts vendored Normal file
View File

@ -0,0 +1,105 @@
import __ReactToolbox from "../index.d.ts";
export interface TabsTheme {
/**
* Added to the active tab content and header.
*/
active?: string;
/**
* Used for the navigation element.
*/
navigation?: string;
/**
* Used for the moving underline element.
*/
pointer?: string;
/**
* Used as a root classname for the component.
*/
tabs?: string;
/**
* Used for the tab content element.
*/
tab?: string;
}
interface TabsProps extends __ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: __React.ReactNode;
/**
* Disable the animation below the active tab.
* @default false
*/
disableAnimatedBottomBorder?: boolean;
/**
* Current
* @default 0
*/
index?: number;
/**
* Callback function that is fired when the tab changes.
*/
onChange?: Function;
/**
* Classnames object defining the component style.
*/
theme?: TabsTheme;
}
export class Tabs extends __React.Component<TabsProps, {}> { }
export interface TabTheme {
/**
* Added to the navigation tab element in case it's active.
*/
active?: string;
/**
* Added to the navigation tab element in case it's disabled.
*/
disabled?: string;
/**
* Added to the navigation tab element in case it's hidden.
*/
hidden?: string;
/**
* Added to the navigation tab element in case it's active.
*/
label?: string;
}
interface TabProps extends __ReactToolbox.Props {
/**
* If true, the current component is visible.
*/
active?: boolean;
/**
* Additional class name to provide custom styling for the active tab.
*/
activeClassName?: string;
/**
* If true, the current component is not clickable.
* @default false
*/
disabled?: boolean;
/**
* If true, the current component is not visible.
* @default false
*/
hidden?: boolean;
/**
* Label text for navigation header. Required.
*/
label: string;
/**
* Callback function that is fired when the tab is activated.
*/
onActive?: Function;
/**
* Classnames object defining the component style.
*/
theme?: TabTheme;
}
export class Tab extends __React.Component<TabProps, {}> { }

132
lib/time_picker/index.d.ts vendored Normal file
View File

@ -0,0 +1,132 @@
import __ReactToolbox from "../index.d.ts";
export interface TimePickerTheme {
/**
* Added to the number which is active in clock face.
*/
active?: string;
/**
* AM label in dialog header when mode is AM/PM.
*/
am?: string;
/**
* Added to the dialog when the selected format is AM.
*/
amFormat?: string;
/**
* Wrapper for AM and PM labels in header when mode is AM/PM.
*/
ampm?: string;
/**
* Used for buttons inside the dialog of the picker.
*/
button?: string;
/**
* Clock root class element.
*/
clock?: string;
/**
* Wrapper for the proper positioning of the clock.
*/
clockWrapper?: string;
/**
* Used for the dialog component.
*/
dialog?: string;
/**
* Used to style the clock face.
*/
face?: string;
/**
* Used for the clock's hand.
*/
hand?: string;
/**
* Dialog header wrapper class.
*/
header?: string;
/**
* Used for hours in dialog header.
*/
hours?: string;
/**
* Added to the dialog hours are displayed.
*/
hoursDisplay?: string;
/**
* Used for Input element that opens the picker.
*/
input?: string;
/**
* Used for the knob of the hand.
*/
knob?: string;
/**
* Used for minutes in dialog header.
*/
minutes?: string;
/**
* Added to the dialog minutes are displayed.
*/
minutesDisplay?: string;
/**
* Each of the numbers in the clock's face.
*/
number?: string;
/**
* Placeholder for the clock inside the dialog (inner wrapper).
*/
placeholder?: string;
/**
* PM label in dialog header when mode is AM/PM.
*/
pm?: string;
/**
* Added to the dialog when the selected format is PM.
*/
pmFormat?: string;
/**
* Is the : separator between hours and minutes in dialog header.
*/
separator?: string;
/**
* Added to the knob when no round number is selected.
*/
small?: string;
}
interface TimePickerProps {
/**
* Provide error text which will be displayed under the field.
*/
error?: string;
/**
* This class will be applied to Input component of TimePicker.
*/
inputClassName?: string;
/**
* Format to display the clock. It can be 24hr or ampm.
* @default false
*/
format?: "24hr" | "ampm";
/**
* The text string to use for the floating label element in the input component.
*/
label?: string;
/**
* Callback called when the picker value is changed.
*/
onChange?: Function;
/**
* Classnames object defining the component style.
*/
theme?: TimePickerTheme;
/**
* Datetime object with currrently selected time.
*/
value?: Date;
}
export class TimePicker extends __React.Component<TimePickerProps, {}> { }
export default TimePicker;

54
lib/tooltip/index.d.ts vendored Normal file
View File

@ -0,0 +1,54 @@
export interface TooltipTheme {
/**
* Added to the tooltip element.
*/
tooltip?: string;
/**
* Added to the root when the tooltip is active.
*/
tooltipActive?: string;
/**
* Wrapper for the root element used to position the tooltip.
*/
tooltipWrapper?: string;
}
interface TooltipProps {
/**
* Callback called when the mouse enters the Component.
*/
onMouseEnter?: __React.MouseEventHandler;
/**
* Callback called when the mouse leaves the Component.
*/
onMouseLeave?: __React.MouseEventHandler;
/**
* Classnames object defining the component style.
*/
theme?: TooltipTheme;
/**
* The text string to use for the tooltip.
*/
tooltip?: string;
/**
* Amount of time in miliseconds spent before the tooltip is visible.
*/
tooltipDelay?: number;
/**
* If true, the Tooltip hides after a click in the host component.
* @default true
*/
tooltipHideOnClick?: boolean;
}
declare class TooltipComponent<P, S> extends __React.Component<P, S> {
props: P & TooltipProps;
}
interface TooltippedComponentClass<P> extends TooltipProps {
new (props?: P, context?: any): TooltipComponent<P, any>;
}
export function Tooltip<P>(componentClass: __React.ComponentClass<P>): TooltippedComponentClass<P>;
export default Tooltip;