Restructure typescript definitions (#1114)

* ts: restructure typescript definitions

- Add each raw components  types
- Update layout props to the new layout implementation
- Add table definitions
- Add HOC types

* fix ListItem typescript definition

* add themr identifiers definitions

* simplify React.ReactNode properties

* React.ReactNode | string => React.ReactNode is already indirectly type aliased to string
old
Panjie Setiawan Wicaksono 2017-01-18 14:37:37 +07:00 committed by Javi Velasco
parent d80dc82991
commit f365724ee8
89 changed files with 3771 additions and 3320 deletions

83
components/app_bar/AppBar.d.ts vendored Normal file
View File

@ -0,0 +1,83 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
/**
* Used as the app bar title.
*/
title?: string;
/**
* Added to the left icon app bar element.
*/
leftIcon?: string;
/**
* Added to the right icon app bar element.
*/
rightIcon?: string;
/**
* Added to the root element when the app bar is hidden during scroll.
*/
scrollHide?: string;
}
export 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;
/**
* If it exists it is used as the AppBar title
*/
title?: string;
/**
* If it exists it is used as the AppBar left icon
*/
leftIcon?: React.ReactNode;
/**
* Called when the left icon is clicked
*/
onLeftIconClick?: Function;
/**
* If it exists it is used as the AppBar right icon
*/
rightIcon?: React.ReactNode;
/**
* Called when the righticon is clicked
*/
onRightIconClick?: Function;
/**
* Whether AppBar should be hidden during scroll.
* @default false
*/
scrollHide?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: AppBarTheme;
}
export class AppBar extends React.Component<AppBarProps, {}> { }
export default AppBar;

View File

@ -1,83 +1,4 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
/**
* Used as the app bar title.
*/
title?: string;
/**
* Added to the left icon app bar element.
*/
leftIcon?: string;
/**
* Added to the right icon app bar element.
*/
rightIcon?: string;
/**
* Added to the root element when the app bar is hidden during scroll.
*/
scrollHide?: string;
}
export 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;
/**
* If it exists it is used as the AppBar title
*/
title?: string;
/**
* If it exists it is used as the AppBar left icon
*/
leftIcon?: string | React.ReactNode;
/**
* Called when the left icon is clicked
*/
onLeftIconClick?: Function;
/**
* If it exists it is used as the AppBar right icon
*/
rightIcon?: string | React.ReactNode;
/**
* Called when the righticon is clicked
*/
onRightIconClick?: Function;
/**
* Whether AppBar should be hidden during scroll.
* @default false
*/
scrollHide?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: AppBarTheme;
}
export class AppBar extends React.Component<AppBarProps, {}> { }
import { AppBar } from './AppBar';
export { AppBarProps, AppBarTheme } from './AppBar';
export { AppBar };
export default AppBar;

View File

@ -0,0 +1,135 @@
import * as React from "react";
import ReactToolbox from "../index";
import { InputProps, InputTheme } from "../input/Input";
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 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;
}
export interface AutocompleteProps extends InputProps {
/**
* Determines if user can create a new option with the current typed value.
* @default false
*/
allowCreate?: boolean;
/**
* Determines the opening direction. It can be auto, up or down.
* @default auto
*/
direction?: "auto" | "up" | "down";
/**
* If true, component will be disabled.
* @default false
*/
disabled?: boolean;
/**
* Sets the error string for the internal input element.
* @default false
*/
error?: React.ReactNode;
/**
* Whether component should keep focus after value change.
* @default false
*/
keepFocusOnChange?: boolean;
/**
* The text string to use for the floating label element.
*/
label?: React.ReactNode;
/**
* If true, component can hold multiple values.
* @default true
*/
multiple?: boolean;
/**
* Callback function that is fired when component is blurred.
*/
onBlur?: Function;
/**
* Callback function that is fired when the components's value changes.
*/
onChange?: Function;
/**
* Callback function that is fired when component is focused.
*/
onFocus?: Function;
/**
* Callback function that is fired when the components's query value changes.
*/
onQueryChange?: Function;
/**
* Determines if the selected list is shown above or below input. It can be above or below.
* @default above
*/
selectedPosition?: "above" | "below" | "none";
/**
* Determines if the selected list is shown if the `value` keys don't exist in the source. Only works if passing the `value` prop as an Object.
* @default false
*/
showSelectedWhenNotInSource?: boolean;
/**
* 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 & InputTheme;
/**
* Value or array of values currently selected component.
*/
value?: any;
/**
* Additional properties passed to inner Input component.
*/
[key: string]: any;
}
export class Autocomplete extends React.Component<AutocompleteProps, {}> { }
export default Autocomplete;

View File

@ -1,135 +1,4 @@
import * as React from "react";
import ReactToolbox from "../index";
import { InputTheme } from "../input"
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 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;
}
export interface AutocompleteProps extends ReactToolbox.Props {
/**
* Determines if user can create a new option with the current typed value.
* @default false
*/
allowCreate?: boolean;
/**
* Determines the opening direction. It can be auto, up or down.
* @default auto
*/
direction?: "auto" | "up" | "down";
/**
* If true, component will be disabled.
* @default false
*/
disabled?: boolean;
/**
* Sets the error string for the internal input element.
* @default false
*/
error?: string | React.ReactNode;
/**
* Whether component should keep focus after value change.
* @default false
*/
keepFocusOnChange?: boolean;
/**
* The text string to use for the floating label element.
*/
label?: string | React.ReactNode;
/**
* If true, component can hold multiple values.
* @default true
*/
multiple?: boolean;
/**
* Callback function that is fired when component is blurred.
*/
onBlur?: Function;
/**
* Callback function that is fired when the components's value changes.
*/
onChange?: Function;
/**
* Callback function that is fired when component is focused.
*/
onFocus?: Function;
/**
* Callback function that is fired when the components's query value changes.
*/
onQueryChange?: Function;
/**
* Determines if the selected list is shown above or below input. It can be above or below.
* @default above
*/
selectedPosition?: "above" | "below" | "none";
/**
* Determines if the selected list is shown if the `value` keys don't exist in the source. Only works if passing the `value` prop as an Object.
* @default false
*/
showSelectedWhenNotInSource?: boolean;
/**
* 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 & InputTheme;
/**
* Value or array of values currently selected component.
*/
value?: any;
/**
* Additional properties passed to inner Input component.
*/
[key: string]: any;
}
export class Autocomplete extends React.Component<AutocompleteProps, {}> { }
import { Autocomplete } from './Autocomplete';
export { AutocompleteProps, AutocompleteTheme } from './Autocomplete';
export { Autocomplete };
export default Autocomplete;

53
components/avatar/Avatar.d.ts vendored Normal file
View File

@ -0,0 +1,53 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export interface AvatarProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Set to true if your image is not squared so it will be used as a cover for the element.
* @default false
*/
cover?: boolean;
/**
* A key to identify an Icon from Material Design Icons or a custom Icon Element.
*/
icon?: React.ReactNode;
/**
* An image source or an image element.
*/
image?: React.ReactNode;
/**
* 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;
/**
* Additional properties for component root element.
*/
[key: string]: any;
}
export class Avatar extends React.Component<AvatarProps, {}> { }
export default Avatar;

View File

@ -1,53 +1,4 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export interface AvatarProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Set to true if your image is not squared so it will be used as a cover for the element.
* @default false
*/
cover?: boolean;
/**
* 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;
/**
* Additional properties for component root element.
*/
[key: string]: any;
}
export class Avatar extends React.Component<AvatarProps, {}> { }
import { Avatar } from './Avatar';
export { AvatarProps, AvatarTheme } from './Avatar';
export { Avatar };
export default Avatar;

42
components/button/BrowseButton.d.ts vendored Normal file
View File

@ -0,0 +1,42 @@
import * as React from "react";
import ReactToolbox from "../index";
import { ButtonBaseProps, ButtonTheme } from './base';
export interface BrowseButtonTheme extends ButtonTheme { }
export interface BrowseButtonProps extends ButtonBaseProps {
/**
* 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;
/**
* 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;
/**
* If true, the button will have a raised look.
* @default false
*/
raised?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: BrowseButtonTheme;
}
export class BrowseButton extends React.Component<BrowseButtonProps, {}> { }

42
components/button/Button.d.ts vendored Normal file
View File

@ -0,0 +1,42 @@
import * as React from "react";
import ReactToolbox from "../index";
import { ButtonBaseProps, ButtonTheme } from './base';
export interface ButtonProps extends ButtonBaseProps {
/**
* 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;
/**
* 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;
/**
* If true, the button will have a raised look.
* @default false
*/
raised?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: ButtonTheme;
}
export class Button extends React.Component<ButtonProps, {}> { }
export default Button;

51
components/button/IconButton.d.ts vendored Normal file
View File

@ -0,0 +1,51 @@
import * as React from "react";
import ReactToolbox from "../index";
import { ButtonBaseProps } from './base';
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;
}
export interface IconButtonProps extends ButtonBaseProps {
/**
* Creates a link for the button.
*/
href?: string;
/**
* Classnames object defining the component style.
*/
theme?: IconButtonTheme;
}
export class IconButton extends React.Component<IconButtonProps, {}> { }

106
components/button/base.d.ts vendored Normal file
View File

@ -0,0 +1,106 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export interface ButtonBaseProps 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;
/**
* Value of the icon (See Font Icon Component).
*/
icon?: React.ReactNode;
/**
* If true, the neutral colors are inverted. Useful to put a button over a dark background.
*/
inverse?: boolean;
/**
* Set it to false if you don't want the neutral styles to be included.
* @default true
*/
neutral?: boolean;
/**
* Fires after the mouse leaves the Component.
*/
onMouseLeave?: Function;
/**
* Fires after the mouse is released from the Component.
*/
onMouseUp?: Function;
/**
* Indicates if the button should have primary color.
* @default false
*/
primary?: boolean;
/**
* If true, component will have a ripple effect on click.
* @default true
*/
ripple?: boolean;
/**
* Component root container type.
* @default button
*/
type?: string;
}

View File

@ -1,230 +1,9 @@
import * as React from "react";
import ReactToolbox from "../index";
import { Button } from './Button';
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;
}
export { ButtonTheme } from './base';
export { ButtonProps } from './Button';
export { IconButton, IconButtonProps, IconButtonTheme } from './IconButton';
export { BrowseButton, BrowseButtonProps, BrowseButtonTheme } from './BrowseButton';
interface ButtonBaseProps 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;
/**
* Value of the icon (See Font Icon Component).
*/
icon?: React.ReactNode | string;
/**
* If true, the neutral colors are inverted. Useful to put a button over a dark background.
*/
inverse?: boolean;
/**
* Set it to false if you don't want the neutral styles to be included.
* @default true
*/
neutral?: boolean;
/**
* Fires after the mouse leaves the Component.
*/
onMouseLeave?: Function;
/**
* Fires after the mouse is released from the Component.
*/
onMouseUp?: Function;
/**
* Indicates if the button should have primary color.
* @default false
*/
primary?: boolean;
/**
* If true, component will have a ripple effect on click.
* @default true
*/
ripple?: boolean;
/**
* Component root container type.
* @default button
*/
type?: string;
}
export interface ButtonProps extends ButtonBaseProps {
/**
* If true, the button will have a flat look.
* @default false
*/
flat?: boolean;
/**
* If true, the button will have a floating look.
* @default false
*/
floating?: boolean;
/**
* Creates a link for the button.
*/
href?: string;
/**
* 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;
/**
* If true, the button will have a raised look.
* @default false
*/
raised?: 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;
}
export interface IconButtonProps extends ButtonBaseProps {
/**
* Creates a link for the button.
*/
href?: string;
/**
* Classnames object defining the component style.
*/
theme?: IconButtonTheme;
}
export class IconButton extends React.Component<IconButtonProps, {}> { }
export interface BrowseButtonTheme extends ButtonTheme { }
export interface BrowseButtonProps extends ButtonBaseProps {
/**
* 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;
/**
* 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;
/**
* If true, the button will have a raised look.
* @default false
*/
raised?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: BrowseButtonTheme;
}
export class BrowseButton extends React.Component<BrowseButtonProps, {}> { }
export { Button };
export default Button;

37
components/card/Card.d.ts vendored Normal file
View File

@ -0,0 +1,37 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface CardTheme {
/**
* Class used for the root element.
*/
card?: string;
/**
*Added to the root element in case the card is raised.
*/
raised?: string;
}
export interface CardProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Increases the shadow depth to appear elevated.
* @default false
*/
raised?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: CardTheme;
/**
* Additional properties passed to component root.
*/
[key: string]: any;
}
export class Card extends React.Component<CardProps, {}> { }
export default Card;

27
components/card/CardActions.d.ts vendored Normal file
View File

@ -0,0 +1,27 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface CardActionsTheme {
/**
* Used for a wrapper around actions as the root element.
*/
cardActions?: string;
}
export interface CardActionsProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Classnames object defining the component style.
*/
theme?: CardActionsTheme;
/**
* Additional properties passed to component root.
*/
[key: string]: any;
}
export class CardActions extends React.Component<CardActionsProps, {}> { }
export default CardActions;

59
components/card/CardMedia.d.ts vendored Normal file
View File

@ -0,0 +1,59 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface CardMediaTheme {
/**
* Added to the element root.
*/
cardMedia?: string;
/**
* Used for the content element.
*/
content?: string;
/**
* Added to content element if its overlayed.
*/
contentOverlay?: string;
/**
* Added to content element if its squared.
*/
square?: string;
/**
* Added to content element if its wide.
*/
wide?: string;
}
export interface CardMediaProps extends ReactToolbox.Props {
/**
* Forces a 16:9 or 1:1 aspect ratio respectively. Unset, the media area will have a flexible height.
*/
aspectRatio?: "wide" | "square";
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Sets the background color.
*/
color?: string;
/**
* Creates a dark overlay underneath the child components.
*/
contentOverlay?: boolean;
/**
* Can be used instead of children. Accepts an element or a URL string.
*/
image?: React.ReactNode;
/**
* Classnames object defining the component style.
*/
theme?: CardMediaTheme;
/**
* Additional properties passed to component root.
*/
[key: string]: any;
}
export class CardMedia extends React.Component<CardMediaProps, {}> { }
export default CardMedia;

27
components/card/CardText.d.ts vendored Normal file
View File

@ -0,0 +1,27 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface CardTextTheme {
/**
* Used for the main root element.
*/
cardText?: string;
}
export interface CardTextProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Classnames object defining the component style.
*/
theme?: CardTextTheme;
/**
* Additional properties passed to component root.
*/
[key: string]: any;
}
export class CardText extends React.Component<CardTextProps, {}> { }
export default CardText;

51
components/card/CardTitle.d.ts vendored Normal file
View File

@ -0,0 +1,51 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface CardTitleTheme {
/**
* Class used for the root element.
*/
cardTitle?: string;
/**
* Added to the root element when the card has no avatar.
*/
large?: string;
/**
* Added to the title element.
*/
title?: string;
/**
* Added to the root element when the card has avatar.
*/
small?: string;
/**
* Added to the subtitle element.
*/
subtitle?: string;
}
export interface CardTitleProps extends ReactToolbox.Props {
/**
* A string URL or Element to specify an avatar in the left side of the title.
*/
avatar?: React.ReactNode;
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Text used for the sub header of the card.
*/
subtitle?: React.ReactNode;
/**
* Classnames object defining the component style.
*/
theme?: CardTitleTheme;
/**
* Text used for the title of the card.
*/
title?: React.ReactNode;
}
export class CardTitle extends React.Component<CardTitleProps, {}> { }
export default CardTitle;

View File

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

78
components/checkbox/Checkbox.d.ts vendored Normal file
View File

@ -0,0 +1,78 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export interface CheckboxProps extends ReactToolbox.Props {
/**
* Value for the checkbox, can be true or false.
* @default false
*/
checked?: boolean;
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* If true, the checkbox shown as disabled and cannot be modified.
* @default false
*/
disabled?: boolean;
/**
* Text label to attach next to the checkbox element.
*/
label?: React.ReactNode;
/**
* The name of the field to set in the input checkbox.
*/
name?: string;
/**
* Callback called when the checkbox is blurred.
*/
onBlur?: Function;
/**
* Callback called when the checkbox value is changed.
*/
onChange?: Function;
/**
* Classnames object defining the component style.
*/
theme?: CheckboxTheme;
/**
* Additional properties passed to inner input element.
*/
[key: string]: any;
}
export class Checkbox extends React.Component<CheckboxProps, {}> { }
export default Checkbox;

View File

@ -1,78 +1,5 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export interface CheckboxProps extends ReactToolbox.Props {
/**
* Value for the checkbox, can be true or false.
* @default false
*/
checked?: boolean;
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* If true, the checkbox shown as disabled and cannot be modified.
* @default false
*/
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?: Function;
/**
* Callback called when the checkbox value is changed.
*/
onChange?: Function;
/**
* Classnames object defining the component style.
*/
theme?: CheckboxTheme;
/**
* Additional properties passed to inner input element.
*/
[key: string]: any;
}
export class Checkbox extends React.Component<CheckboxProps, {}> { }
import { Checkbox } from './Checkbox';
export { CheckboxProps, CheckboxTheme } from './Checkbox';
export { Checkbox }
export default Checkbox;

53
components/chip/Chip.d.ts vendored Normal file
View File

@ -0,0 +1,53 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export 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?: Function;
/**
* Classnames object defining the component style.
*/
theme?: ChipTheme;
}
export class Chip extends React.Component<ChipProps, {}> { }
export default Chip;

View File

@ -1,53 +1,5 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export 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?: Function;
/**
* Classnames object defining the component style.
*/
theme?: ChipTheme;
}
export class Chip extends React.Component<ChipProps, {}> { }
import { Chip } from './Chip';
export { ChipProps, ChipTheme } from './Chip';
export { Chip }
export default Chip;

221
components/date_picker/DatePicker.d.ts vendored Normal file
View File

@ -0,0 +1,221 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export interface DatePickerProps extends ReactToolbox.Props {
/**
* Allows to control if the picker should be shown from outside. Beware you should update the prop when the Dialog is closed.
* @default false
*/
active?: boolean;
/**
* Automatically selects a date upon clicking on a day
* @default false
*/
autoOk?: boolean;
/**
* Label used for cancel button on Dialog.
* @default "Cancel"
*/
cancelLabel?: string;
/**
* An array of date objects which will be disabled in the calendar. All other dates will be enabled.
*/
disabledDates?: Date[];
/**
* An array of date objects which will be enabled in the calendar. All other dates will be disabled.
*/
enabledDates?: Date[];
/**
* Give an error node to display under the field.
*/
error?: string;
/**
* A key to identify an Icon from Material Design Icons or a custom Icon Element.
*/
icon?: React.ReactNode;
/**
* 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;
/**
* Sets locale for the Dialog.
* @default "en"
*/
locale?: "de" | "no" | "en" | "es" | "af" | "ar" | "be" | "bg" | "bn" | "bo" | "br" | "bs" | "ca" | "gl" | "eu" | "pt" | "it" | "fr" | "ru" | "ua" | DatePickerLocale;
/**
* Date object with the maximum selectable date.
*/
maxDate?: Date;
/**
* Date object with the minimum selectable date.
*/
minDate?: Date;
/**
* Name for the input field.
*/
name?: string;
/**
* Label used for 'OK' button on Dialog.
* @default "Ok"
*/
okLabel?: string;
/**
* Callback called when the picker value is changed.
*/
onChange?: Function;
/**
* Callback fired on Input click.
*/
onClick?: Function;
/**
* Callback fired after dismissing the Dialog.
*/
onDismiss?: Function;
/**
* Callback called when the ESC key is pressed with the overlay active.
*/
onEscKeyDown?: Function;
/**
* Callback invoked on Input key press.
*/
onKeyPress?: Function;
/**
* Callback to be invoked when the dialog overlay is clicked.
*/
onOverlayClick?: Function;
/**
* The input element will be readonly and look like disabled.
*/
readonly?: boolean;
/**
* Set week's first day to Sunday. Default week's first day is Monday.
* @default false
*/
sundayFirstDayOfWeek?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: DatePickerTheme;
/**
* Date object with the currently selected date.
*/
value?: Date | string;
}
export interface DatePickerLocale {
/**
* Month names.
*/
months?: string[];
/**
* Month short names.
*/
monthsShort?: string[];
/**
* Day names starting from Sunday.
*/
weekdays?: string[];
/**
* Day short names starting from Sunday.
*/
weekdaysShort?: string[];
/**
* Day letters starting from Sunday.
*/
weekdaysLetter?: string[];
}
export class DatePicker extends React.Component<DatePickerProps, {}> { }
export default DatePicker;

View File

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

94
components/dialog/Dialog.d.ts vendored Normal file
View File

@ -0,0 +1,94 @@
import * as React from "react";
import ReactToolbox from "../index";
import { ButtonProps } from "../button/index";
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;
}
export interface DialogActionProps extends ButtonProps {
/**
* The text string to use for the name of the button.
*/
label?: string;
/**
* Callback called when the component is clicked.
*/
onClick?: Function;
}
export interface DialogProps extends ReactToolbox.Props {
/**
* A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
*/
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?: Function;
/**
* Callback to be invoked when the dialog overlay is clicked.
*/
onOverlayClick?: Function;
/**
* Callback called when the mouse button is pressed on the overlay.
*/
onOverlayMouseDown?: Function;
/**
* Callback called when the mouse is moving over the overlay.
*/
onOverlayMouseMove?: Function;
/**
* Callback called when the mouse button is released over the overlay.
*/
onOverlayMouseUp?: Function;
/**
* 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?: "small" | "normal" | "large" | string;
}
export class Dialog extends React.Component<DialogProps, {}> { }
export default Dialog;

View File

@ -1,94 +1,5 @@
import * as React from "react";
import ReactToolbox from "../index";
import {ButtonProps} from "../button";
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;
}
export interface DialogActionProps extends ButtonProps {
/**
* The text string to use for the name of the button.
*/
label?: string;
/**
* Callback called when the component is clicked.
*/
onClick?: Function;
}
export interface DialogProps extends ReactToolbox.Props {
/**
* A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
*/
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?: Function;
/**
* Callback to be invoked when the dialog overlay is clicked.
*/
onOverlayClick?: Function;
/**
* Callback called when the mouse button is pressed on the overlay.
*/
onOverlayMouseDown?: Function;
/**
* Callback called when the mouse is moving over the overlay.
*/
onOverlayMouseMove?: Function;
/**
* Callback called when the mouse button is released over the overlay.
*/
onOverlayMouseUp?: Function;
/**
* 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?: "small" | "normal" | "large" | string;
}
export class Dialog extends React.Component<DialogProps, {}> { }
import { Dialog } from './Dialog';
export { DialogProps, DialogTheme, DialogActionProps } from './Dialog';
export { Dialog }
export default Dialog;

68
components/drawer/Drawer.d.ts vendored Normal file
View File

@ -0,0 +1,68 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
/**
* A wrapper class for the top of the root.
*/
wrapper?: string;
}
export 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;
/**
* If true the Drawer is rendered inside the normal tree.
* @default false
*/
insideTree?: boolean;
/**
* Callback function to be invoked when the overlay is clicked.
*/
onOverlayClick?: Function;
/**
* 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";
/**
* If true display an Overlay that locks the scroll when the Drawer is active.
* @default true
*/
withOverlay?: boolean;
}
export class Drawer extends React.Component<DrawerProps, {}> { }
export default Drawer;

View File

@ -1,54 +1,5 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export 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?: Function;
/**
* 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, {}> { }
import { Drawer } from './Drawer';
export { DrawerProps, DrawerTheme } from './Drawer';
export { Drawer }
export default Drawer;

124
components/dropdown/Dropdown.d.ts vendored Normal file
View File

@ -0,0 +1,124 @@
import * as React from "react";
import ReactToolbox from "../index";
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 when dropdown has required attribute.
*/
required?: 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;
}
export interface DropdownProps extends ReactToolbox.Props {
/**
* If true the dropdown will preselect the first item if the supplied value matches none of the options' values.
* @default true
*/
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?: Function;
/**
* Callback function that is fired when the component's value changes.
*/
onChange?: Function;
/**
* Callback function that is fired when the component is focused.
*/
onFocus?: Function;
/**
* 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;
/**
* If true, the dropdown has a required attribute.
* @default false
*/
required?: boolean;
}
export class Dropdown extends React.Component<DropdownProps, {}> { }
export default Dropdown;

View File

@ -1,124 +1,5 @@
import * as React from "react";
import ReactToolbox from "../index";
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 when dropdown has required attribute.
*/
required?: 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;
}
export interface DropdownProps extends ReactToolbox.Props {
/**
* If true the dropdown will preselect the first item if the supplied value matches none of the options' values.
* @default true
*/
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?: Function;
/**
* Callback function that is fired when the component's value changes.
*/
onChange?: Function;
/**
* Callback function that is fired when the component is focused.
*/
onFocus?: Function;
/**
* 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;
/**
* If true, the dropdown has a required attribute.
* @default false
*/
required?: boolean;
}
export class Dropdown extends React.Component<DropdownProps, {}> { }
import { Dropdown } from './Dropdown';
export { DropdownProps, DropdownTheme } from './Dropdown';
export { Dropdown }
export default Dropdown;

21
components/font_icon/FontIcon.d.ts vendored Normal file
View File

@ -0,0 +1,21 @@
import * as React from "react";
import ReactToolbox from "../index";
export 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;
/**
* Additional properties passed to component root.
*/
[key: string]: any
}
export class FontIcon extends React.Component<FontIconProps, {}> { }
export default FontIcon;

View File

@ -1,21 +1,5 @@
import * as React from "react";
import ReactToolbox from "../index";
export 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;
/**
* Additional properties passed to component root.
*/
[key: string]: any
}
export class FontIcon extends React.Component<FontIconProps, {}> { }
import { FontIcon } from './FontIcon';
export { FontIconProps } from './FontIcon';
export { FontIcon }
export default FontIcon;

9
components/hoc/ActivableRenderer.d.ts vendored Normal file
View File

@ -0,0 +1,9 @@
import * as React from 'react';
export interface ActivableRendererFactoryOptions {
delay?: number;
}
export default function ActivableRendererFactory<P>(options?: ActivableRendererFactoryOptions):
(<TFunction extends React.ComponentClass<P>>(target: TFunction) => TFunction) &
((clazz: React.StatelessComponent<P>) => React.StatelessComponent<P>);

9
components/hoc/Portal.d.ts vendored Normal file
View File

@ -0,0 +1,9 @@
import * as React from 'react';
import ReactToolbox from '../index';
export interface PortalProps extends ReactToolbox.Props {
container?: any;
lockBody?: boolean;
}
export default class Portal extends React.Component<PortalProps, {}> { }

28
components/identifiers.d.ts vendored Normal file
View File

@ -0,0 +1,28 @@
export const APP_BAR: string;
export const AUTOCOMPLETE: string;
export const AVATAR: string;
export const BUTTON: string;
export const CARD: string;
export const CHIP: string;
export const CHECKBOX: string;
export const DATE_PICKER: string;
export const DIALOG: string;
export const DRAWER: string;
export const DROPDOWN: string;
export const INPUT: string;
export const LAYOUT: string;
export const LINK: string;
export const LIST: string;
export const MENU: string;
export const NAVIGATION: string;
export const OVERLAY: string;
export const PROGRESS_BAR: string;
export const RADIO: string;
export const RIPPLE: string;
export const SLIDER: string;
export const SNACKBAR: string;
export const SWITCH: string;
export const TABLE: string;
export const TABS: string;
export const TOOLTIP: string;
export const TIME_PICKER: string;

View File

@ -1,14 +1,10 @@
import * as React from "react";
export declare namespace ReactToolbox {
interface Props {
interface Props extends React.Attributes {
/**
* 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.
*/

141
components/input/Input.d.ts vendored Normal file
View File

@ -0,0 +1,141 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export 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?: React.ReactNode;
/**
* 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?: React.ReactNode;
/**
* Name of an icon to use as a label for the input.
*/
icon?: React.ReactNode;
/**
* The text string to use for the floating label element.
*/
label?: React.ReactNode;
/**
* 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?: Function;
/**
* Callback function that is fired when the component's value changes
*/
onChange?: Function;
/**
* Callback function that is fired when component is focused.
*/
onFocus?: Function;
/**
* Callback function that is fired when a key is pressed.
*/
onKeyPress?: Function;
/**
* If true, the html input has a required attribute.
* @default false
*/
required?: boolean;
/**
* The number of rows the multiline input field has.
*/
rows?:number;
/**
* Classnames object defining the component style.
*/
theme?: InputTheme;
/**
* Type of the input element. It can be a valid HTML5 input type.
* @default "text"
*/
type?: string;
/**
* Current value of the input element.
*/
value?: any;
}
export class Input extends React.Component<InputProps, {}> { }
export default Input;

View File

@ -1,141 +1,5 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export 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 | React.ReactNode;
/**
* 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 | React.ReactNode;
/**
* 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 | React.ReactNode;
/**
* 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?: Function;
/**
* Callback function that is fired when the component's value changes
*/
onChange?: Function;
/**
* Callback function that is fired when component is focused.
*/
onFocus?: Function;
/**
* Callback function that is fired when a key is pressed.
*/
onKeyPress?: Function;
/**
* If true, the html input has a required attribute.
* @default false
*/
required?: boolean;
/**
* The number of rows the multiline input field has.
*/
rows?:number;
/**
* Classnames object defining the component style.
*/
theme?: InputTheme;
/**
* Type of the input element. It can be a valid HTML5 input type.
* @default "text"
*/
type?: string;
/**
* Current value of the input element.
*/
value?: any;
}
export class Input extends React.Component<InputProps, {}> { }
import { Input } from './Input';
export { InputProps, InputTheme } from './Input';
export { Input }
export default Input;

64
components/layout/Layout.d.ts vendored Normal file
View File

@ -0,0 +1,64 @@
import * as React from "react";
import ReactToolbox from "../index";
import { NavDrawer } from './NavDrawer';
import { Panel } from './Panel';
import { Sidebar } from './Sidebar';
export interface LayoutTheme {
appbarFixed?: string;
/**
* The root class that wraps the whole layout.
*/
layout?: string;
/**
* Added to the root if there is a pinned `NavDrawer`
*/
navDrawerPinned?: string;
/**
* Added to the root if there is a clipped NavDrawer.
*/
navDrawerClipped?: string;
/**
* Added to the root if there is a pinned sidebar.
*/
sidebarPinned?: string;
/**
* Added to the root if there is a clipped sidebar.
*/
sidebarClipped?: string;
/**
* Added to the root element in case there is a sidebar present. width correspond to the value passed to the `Sidebar`.
*/
sidebarWidth1?: string;
sidebarWidth2?: string;
sidebarWidth3?: string;
sidebarWidth4?: string;
sidebarWidth5?: string;
sidebarWidth6?: string;
sidebarWidth7?: string;
sidebarWidth8?: string;
sidebarWidth9?: string;
sidebarWidth10?: string;
sidebarWidth11?: string;
sidebarWidth12?: string;
sidebarWidth25?: string;
sidebarWidth33?: string;
sidebarWidth50?: string;
sidebarWidth66?: string;
sidebarWidth75?: string;
sidebarWidth100?: string;
}
export 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, {}> { }

45
components/layout/NavDrawer.d.ts vendored Normal file
View File

@ -0,0 +1,45 @@
import * as React from "react";
import { DrawerProps } from '../drawer/Drawer';
export interface NavDrawerTheme {
/**
* Added to the root class when it is pinned.
*/
pinned?: string;
/**
* Added to the root class when it is clipped.
*/
clipped?: string;
}
export interface NavDrawerProps extends DrawerProps {
/**
* If true, the drawer will be shown as an overlay.
* @default false
*/
active?: boolean;
/**
* If true, when the `AppBar` gets pinned, it will stand over the `Drawer`.
* @default false
*/
clipped?: boolean;
/**
* Callback function to be invoked when the overlay is clicked. It only works if the `Drawer` is actually displaying and Overlay
*/
onOverlayClick?: Function;
/**
* The breakpoint at which the drawer is automatically pinned.
*/
permanentAt?: "sm" | "smTablet" | "md" | "lg" | "lgTablet" | "xl" | "xxl" | "xxxl";
/**
* If true, the drawer will be pinned open. pinned takes precedence over active.
* @default false
*/
pinned?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: NavDrawerTheme;
}
export class NavDrawer extends React.Component<NavDrawerProps, {}> { }

26
components/layout/Panel.d.ts vendored Normal file
View File

@ -0,0 +1,26 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface PanelTheme {
/**
* Used in the root class in case the panel has bodyScroll.
*/
bodyScroll?: string;
/**
* Used as the root class of the panel component.
*/
panel?: string;
}
export interface PanelProps extends ReactToolbox.Props {
/**
* You can set it to true in case you are using a pinned Sidebar so it takes an scrolled `div` instead of using the document scroll.
*/
bodyScroll?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: PanelTheme;
}
export class Panel extends React.Component<PanelProps, {}> { }

41
components/layout/Sidebar.d.ts vendored Normal file
View File

@ -0,0 +1,41 @@
import * as React from "react";
import { DrawerProps } from '../drawer/Drawer';
export interface SidebarTheme {
/**
* Added to the root class when it is clipped.
*/
clipped?: string;
/**
* Added to the root class if sidebar is pinned.
*/
pinned?: string;
}
export interface SidebarProps extends DrawerProps {
/**
* If true, when the `AppBar` gets pinned, it will stand over the `Drawer`.
* @default false
*/
clipped?: boolean;
/**
* The breakpoint at which the drawer is automatically pinned.
*/
permanentAt?: "sm" | "smTablet" | "md" | "lg" | "lgTablet" | "xl" | "xxl" | "xxxl";
/**
* If true, the sidebar will be pinned open.
* @default false
*/
pinned?: 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, {}> { }

View File

@ -1,206 +1,4 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface LayoutTheme {
/**
* Class used in the container to position and align inner items.
*/
layout?: string;
}
export 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.
*/
lgPermanent?: string;
/**
* Added to the root class for large drawer (tablet landscape).
*/
lgTabletPermanent?: string;
/**
* Added to the root class for medium drawer.
*/
mdPermanent?: 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 for small drawer (tablet portrait).
*/
smTabletPermanent?: 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.
*/
xxlPermanent?: string;
/**
* Added to the root class for largest possible drawer.
*/
xxxlPermanent?: string;
}
export 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?: Function;
/**
* The breakpoint at which the drawer is automatically pinned.
*/
permanentAt?: "sm" | "smTablet" | "md" | "lg" | "lgTablet" | "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;
}
export interface PanelProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Callback function to be invoked when the component scrolls.
*/
onScroll?: Function;
/**
* If true, the panel will vertically scroll all content.
* @default false
*/
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;
}
export 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, {}> { }
export { Layout, LayoutProps, LayoutTheme } from './Layout';
export { NavDrawer, NavDrawerProps, NavDrawerTheme } from './NavDrawer';
export { Panel, PanelProps, PanelTheme } from './Panel';
export { Sidebar, SidebarProps, SidebarTheme } from './Sidebar';

57
components/link/Link.d.ts vendored Normal file
View File

@ -0,0 +1,57 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export 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;
/**
* The text string used for the text content of the link.
*/
label?: string;
/**
* Classnames object defining the component style.
*/
theme?: LinkTheme;
/**
* Additional parameters passed to anchor element.
*/
[key: string]: any;
}
export class Link extends React.Component<LinkProps, {}> { }
export default Link;

View File

@ -1,55 +1,5 @@
import * as React from "react";
import ReactToolbox from "../index";
import { Link } from './Link';
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;
}
export 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;
/**
* Additional parameters passed to anchor element.
*/
[key: string]: any;
}
export class Link extends React.Component<LinkProps, {}> { }
export { LinkProps, LinkTheme } from './Link';
export { Link }
export default Link;

32
components/list/List.d.ts vendored Normal file
View File

@ -0,0 +1,32 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface ListTheme {
/**
* Used for the root element of the list.
*/
list?: string;
}
export 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, {}> { }

64
components/list/ListCheckbox.d.ts vendored Normal file
View File

@ -0,0 +1,64 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export 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?: Function;
/**
* Callback called when the input element is changed.
*/
onChange?: Function;
/**
* Callback called when the input element is focused.
*/
onFocus?: Function;
/**
* Classnames object defining the component style.
*/
theme?: ListCheckboxTheme;
}
export class ListCheckbox extends React.Component<ListCheckboxProps, {}> { }

26
components/list/ListDivider.d.ts vendored Normal file
View File

@ -0,0 +1,26 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface ListDividerTheme {
/**
* Added to the root element.
*/
divider?: string;
/**
* Added to root element if inset is true.
*/
inset?: string;
}
export 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<ListDividerProps, {}> { }

39
components/list/ListItem.d.ts vendored Normal file
View File

@ -0,0 +1,39 @@
import * as React from "react";
import ReactToolbox from '../index';
import { ListItemContentTheme } from './ListItemContent';
import { ListItemActionsTheme } from './ListItemActions';
import { ListItemLayoutProps, ListItemLayoutTheme } from './ListItemLayout';
export interface ListItemTheme {
/**
* Used for the root element of the list.
*/
listItem?: string;
}
export interface ListItemProps extends ReactToolbox.Props {
/**
* 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;
/**
* If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
*/
ripple?: boolean;
/**
* Classnames object defining the component style.
* @default false
*/
theme?: ListItemTheme & ListItemActionsTheme & ListItemContentTheme & ListItemLayoutTheme;
/**
* 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 & ListItemLayoutProps, {}> { }

22
components/list/ListItemAction.d.ts vendored Normal file
View File

@ -0,0 +1,22 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface ListItemActionTheme {
/**
* Used for each action element (left/right).
*/
itemAction?: string;
}
export interface ListItemActionProps {
/**
* List item action.
*/
action?: React.ReactNode;
/**
* Object defining the component class name mappings.
*/
theme?: ListItemActionTheme;
}
export class ListItemAction extends React.Component<ListItemActionProps, {}> { }

31
components/list/ListItemActions.d.ts vendored Normal file
View File

@ -0,0 +1,31 @@
import * as React from "react";
import ReactToolbox from "../index";
import { ListItemActionTheme } from './ListItemAction';
export interface ListItemActionsTheme {
/**
* Added for the element that wraps left actions.
*/
left?: string;
/**
* Added for the element that wraps right actions.
*/
right?: string;
}
export interface ListItemActionsProps {
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Object defining the component class name mappings.
*/
theme?: ListItemActionsTheme & ListItemActionTheme;
/**
* List item action type.
*/
type?: "left" | "right";
}
export class ListItemActions extends React.Component<ListItemActionsProps, {}> { }

46
components/list/ListItemContent.d.ts vendored Normal file
View File

@ -0,0 +1,46 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface ListItemContentTheme {
/**
* Added to the content wrapper element if type is "auto".
*/
auto?: string;
/**
* Used for the content wrapper element in list item.
*/
itemContentRoot?: string;
/**
* Added to the content wrapper element if type is "large".
*/
large?: string;
/**
* Added to the content wrapper element if type is "normal".
*/
normal?: string;
}
export interface ListItemContentProps {
/**
* Main text of the item.
*/
caption?: React.ReactNode;
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Secondary text to display under the caption.
*/
legend?: string;
/**
* Object defining the component class name mappings.
*/
theme?: ListItemContentTheme;
/**
* List item content type.
*/
type?: "auto" | "normal" | "large";
}
export class ListItemContent extends React.Component<ListItemContentProps, {}> { }

78
components/list/ListItemLayout.d.ts vendored Normal file
View File

@ -0,0 +1,78 @@
import * as React from "react";
import ReactToolbox from "../index";
import { ListItemContentTheme } from './ListItemContent';
import { ListItemActionsTheme } from './ListItemActions';
export interface ListItemLayoutTheme {
/**
* Added to the inner content if its a disabled item.
*/
disabled?: string;
/**
* Used for the inner content of a list item.
*/
item?: string;
/**
* Added when layout is selectable.
*/
selectable?: string;
}
export interface ListItemLayoutProps extends ReactToolbox.Props {
/**
* A string URL to specify an avatar in the left side of the item.
*/
avatar?: string | React.ReactElement<any>;
/**
* Main text of the item.
*/
caption?: string;
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* If true, the item is displayed as disabled and it's not clickable.
* @default false
*/
disabled?: boolean;
/**
* Layout content.
*/
itemContent?: React.ReactChild;
/**
* A list of elements that are placed on the left side of the item and after the avatar attribute.
*/
leftActions?: React.ReactNode[];
/**
* A string key of a font icon or element to display an icon in the left side of the item.
*/
leftIcon?: string | React.ReactElement<any>;
/**
* Secondary text to display under the caption.
*/
legend?: string;
/**
* A list of elements that are placed on the right side of the item and after the rightIcon attribute.
*/
rightActions?: React.ReactNode[];
/**
* The same as the leftIcon but in this case the icon is displayed in the right side.
*/
rightIcon?: string | React.ReactElement<any>;
/**
* If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent.
* @default false
*/
selectable?: boolean;
/**
* Object defining the component class name mappings.
*/
theme?: ListItemLayoutTheme & ListItemContentTheme & ListItemActionsTheme;
/**
* In case you want to provide the item as a link, you can pass this property to specify the href.
*/
to?: string;
}
export class ListItemLayout extends React.Component<ListItemLayoutProps, {}> { }

35
components/list/ListItemText.d.ts vendored Normal file
View File

@ -0,0 +1,35 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface ListItemTextTheme {
/**
* Added to the text inside of the list item.
*/
itemText?: string;
/**
* Added to the text inside of the list item if its primary.
*/
primary?: string;
}
export interface ListItemTextProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Whether list item text should have 'primary' look.
* @default
*/
primary?: boolean;
/**
* Object defining the component class name mappings.
*/
theme?: ListItemTextTheme;
/**
* Additional properties passed to root container.
*/
[key: string]: any;
}
export class ListItemText extends React.Component<ListItemTextProps, {}> { }

22
components/list/ListSubHeader.d.ts vendored Normal file
View File

@ -0,0 +1,22 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface ListSubHeaderTheme {
/**
* Used as a wrapper class for the subheader element.
*/
subheader?: string;
}
export interface ListSubHeaderProps extends ReactToolbox.Props {
/**
* Text that will be displayed.
*/
caption?: string;
/**
* Classnames object defining the component style.
*/
theme?: ListSubHeaderTheme;
}
export class ListSubHeader extends React.Component<ListSubHeaderProps, {}> { }

View File

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

69
components/menu/IconMenu.d.ts vendored Normal file
View File

@ -0,0 +1,69 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface IconMenuTheme {
/**
* Used for the icon element.
*/
icon?: string;
/**
* Used for the root element of the icon menu.
*/
iconMenu?: string;
}
export 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;
/**
* 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 default IconMenu;

101
components/menu/Menu.d.ts vendored Normal file
View File

@ -0,0 +1,101 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export 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 true
*/
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 true
*/
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 default Menu;

20
components/menu/MenuDivider.d.ts vendored Normal file
View File

@ -0,0 +1,20 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface MenuDividerTheme {
/**
*
*/
menuDivider?: string;
}
export interface MenuDividerProps extends ReactToolbox.Props {
/**
* Classnames object defining the component style.
*/
theme?: MenuDividerTheme;
}
export class MenuDivider extends React.Component<MenuDividerProps, {}> { }
export default MenuDivider;

66
components/menu/MenuItem.d.ts vendored Normal file
View File

@ -0,0 +1,66 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export 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;
/**
* 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, {}> { }
export default MenuItem;

View File

@ -1,242 +1,4 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export 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 true
*/
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 true
*/
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;
}
export 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;
}
export 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;
}
export 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, {}> { }
export { IconMenu, IconMenuProps, IconMenuTheme } from './IconMenu';
export { Menu, MenuProps, MenuTheme } from './Menu';
export { MenuDivider, MenuDividerProps, MenuDividerTheme } from './MenuDivider';
export { MenuItem, MenuItemProps, MenuItemTheme } from './MenuItem';

49
components/navigation/Navigation.d.ts vendored Normal file
View File

@ -0,0 +1,49 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export interface NavigationProps extends ReactToolbox.Props {
/**
* Array of objects that will be represented as <Button/> so the keys will be transferred as properties the Button Component.
*/
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, {}> { }
export default Navigation;

View File

@ -1,47 +1,5 @@
import * as React from "react";
import ReactToolbox from "../index";
import { Navigation } from './Navigation';
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;
}
export interface NavigationProps extends ReactToolbox.Props {
/**
* Array of objects that will be represented as <Button/> so the keys will be transferred as properties the Button Component.
*/
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, {}> { }
export { NavigationProps, NavigationTheme } from './Navigation';
export { Navigation }
export default Navigation;

57
components/overlay/Overlay.d.ts vendored Normal file
View File

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

View File

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

View File

@ -0,0 +1,88 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export interface ProgressBarProps extends ReactToolbox.Props {
/**
* Value of a secondary progress bar useful for buffering.
* @default 0
*/
buffer?: number;
/**
* If true, component will be disabled.
* @default false
*/
disabled?: boolean;
/**
* 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;

View File

@ -1,88 +1,5 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export interface ProgressBarProps extends ReactToolbox.Props {
/**
* Value of a secondary progress bar useful for buffering.
* @default 0
*/
buffer?: number;
/**
* If true, component will be disabled.
* @default false
*/
disabled?: boolean;
/**
* 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, {}> { }
import { ProgressBar } from './ProgressBar';
export { ProgressBarProps, ProgressBarTheme } from './ProgressBar';
export { ProgressBar }
export default ProgressBar;

69
components/radio/RadioButton.d.ts vendored Normal file
View File

@ -0,0 +1,69 @@
import * as React from "react";
import ReactToolbox from "../index";
import { RadioTheme } from './base';
export interface RadioButtonTheme {
/**
* 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;
}
export interface RadioButtonProps extends ReactToolbox.Props {
/**
* If true, the input element will be selected by default. Transferred from the parent.
* @default false
*/
checked?: boolean;
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* If true, the item will be displayed as disabled.
* @default false
*/
disabled?: boolean;
/**
* Label for the radio button.
*/
label?: React.ReactNode;
/**
* Name for the input element.
*/
name?: string;
/**
* Callback function that will be invoked when the input is blurred.
*/
onBlur?: Function;
/**
* Callback function that will be invoked when the value changes.
*/
onChange?: Function;
/**
* Callback function that will be invoked when the input is focused.
*/
onFocus?: Function;
/**
* Classnames object defining the component style.
*/
theme?: RadioButtonTheme & RadioTheme;
/**
* Value for the radio button.
*/
value?: any;
}
export class RadioButton extends React.Component<RadioButtonProps, {}> { }

28
components/radio/RadioGroup.d.ts vendored Normal file
View File

@ -0,0 +1,28 @@
import * as React from "react";
import ReactToolbox from "../index";
export 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?: any;
}
export class RadioGroup extends React.Component<RadioGroupProps, {}> { }

34
components/radio/base.d.ts vendored Normal file
View File

@ -0,0 +1,34 @@
export interface RadioTheme {
/**
* Used to for the radio element.
*/
radio?: string;
/**
* Used for the radio element when it's checked.
*/
radioChecked?: string;
/**
* To provide styles for the ripple.
*/
ripple?: string;
}
export interface RadioProps {
/**
* If true, the input element will be selected by default. Transferred from the parent.
* @default false
*/
checked?: boolean;
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Callback invoked on mouse down.
*/
onMouseDown?: Function;
/**
* Additional properties passed to Radio container.
*/
[key: string]: any;
}

View File

@ -1,129 +1,7 @@
import * as React from "react";
import ReactToolbox from "../index";
import { RadioButton } from './RadioButton';
export 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?: any;
}
export { RadioButtonProps, RadioButtonTheme } from './RadioButton';
export { RadioGroup, RadioGroupProps } from './RadioGroup';
export class RadioGroup extends React.Component<RadioGroupProps, {}> { }
export interface RadioButtonTheme {
/**
* 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;
}
export interface RadioButtonProps extends ReactToolbox.Props {
/**
* If true, the input element will be selected by default. Transferred from the parent.
* @default false
*/
checked?: boolean;
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* If true, the item will be displayed as disabled.
* @default false
*/
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?: Function;
/**
* Callback function that will be invoked when the value changes.
*/
onChange?: Function;
/**
* Callback function that will be invoked when the input is focused.
*/
onFocus?: Function;
/**
* Classnames object defining the component style.
*/
theme?: RadioButtonTheme & RadioTheme;
/**
* Value for the radio button.
*/
value?: any;
}
export class RadioButton extends React.Component<RadioButtonProps, {}> { }
export interface RadioTheme {
/**
* Used to for the radio element.
*/
radio?: string;
/**
* Used for the radio element when it's checked.
*/
radioChecked?: string;
/**
* To provide styles for the ripple.
*/
ripple?: string;
}
export interface RadioProps {
/**
* If true, the input element will be selected by default. Transferred from the parent.
* @default false
*/
checked?: boolean;
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Callback invoked on mouse down.
*/
onMouseDown?: Function;
/**
* Additional properties passed to Radio container.
*/
[key: string]: any;
}
export { RadioButton };
export default RadioButton;

View File

@ -57,5 +57,5 @@ export function rippleFactory(
options: RippleProps
): RippledComponentFactory;
export { rippleFactory as Ripple };
export default rippleFactory;

112
components/slider/Slider.d.ts vendored Normal file
View File

@ -0,0 +1,112 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export 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;
/**
* If true, component will be disabled.
* @default false
*/
disabled?: 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;

View File

@ -1,112 +1,5 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export 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;
/**
* If true, component will be disabled.
* @default false
*/
disabled?: 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, {}> { }
import { Slider } from './Slider';
export { SliderProps, SliderTheme } from './Slider';
export { Slider }
export default Slider;

77
components/snackbar/Snackbar.d.ts vendored Normal file
View File

@ -0,0 +1,77 @@
import * as React from "react";
import ReactToolbox from "../index";
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 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;
}
export 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;
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Text to display in the content.
*/
label?: string;
/**
* Callback function that will be called when the button action is clicked.
*/
onClick?: Function;
/**
* Callback function when finish the set timeout.
*/
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;

View File

@ -1,77 +1,5 @@
import * as React from "react";
import ReactToolbox from "../index";
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 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;
}
export 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;
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Text to display in the content.
*/
label?: string;
/**
* Callback function that will be called when the button action is clicked.
*/
onClick?: Function;
/**
* Callback function when finish the set timeout.
*/
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, {}> { }
import { Snackbar } from './Snackbar';
export { SnackbarProps, SnackbarTheme } from './Snackbar';
export { Snackbar }
export default Snackbar;

78
components/switch/Switch.d.ts vendored Normal file
View File

@ -0,0 +1,78 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export 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?: Function;
/**
* Callback function that is fired when the component's value changes.
*/
onChange?: Function;
/**
* Callback function that is fired when the switch is focused.
*/
onFocus?: Function;
/**
* Classnames object defining the component style.
*/
theme?: SwitchTheme;
}
export class Switch extends React.Component<SwitchProps, {}> { }
export default Switch;

View File

@ -1,78 +1,5 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export 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?: Function;
/**
* Callback function that is fired when the component's value changes.
*/
onChange?: Function;
/**
* Callback function that is fired when the switch is focused.
*/
onFocus?: Function;
/**
* Classnames object defining the component style.
*/
theme?: SwitchTheme;
}
export class Switch extends React.Component<SwitchProps, {}> { }
import { Switch } from './Switch';
export { SwitchProps, SwitchTheme } from './Switch';
export { Switch }
export default Switch;

38
components/table/Table.d.ts vendored Normal file
View File

@ -0,0 +1,38 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface TableTheme {
/**
* Used for the `thead` element.
*/
head?: string;
/**
* Used for the root element of the component (`table`).
*/
table?: string;
}
export interface TableProps extends ReactToolbox.Props {
/**
* If true, the header and each row will display a checkbox to allow the user to select multiple rows.
* @default true
*/
multiSelectable?: boolean;
/**
* Will be called when the row selection changes. It passes an array of selected indexes as first parameter so you can figure out changes in your local state.
*/
onRowSelect?: Function;
/**
* If true, each row will display a checkbox to allow the user to select that one row.
* @default true
*/
selectable?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: TableTheme;
}
export class Table extends React.Component<TableProps, {}> { }
export default Table;

69
components/table/TableCell.d.ts vendored Normal file
View File

@ -0,0 +1,69 @@
import * as React from 'react';
import ReactToolbox from "../index";
export interface TableCellTheme {
/**
* Modifier for the icon in case the order is ascendent.
*/
asc?: string;
/**
* Added to each cell displayed in the head.
*/
headCell?: string;
/**
* Modifier for cells that are numeric.
*/
numeric?: string;
/**
* Added to each cell displayed in the table body.
*/
rowCell?: string;
/**
* Modifier for cells that are sorted asc or desc.
*/
sorted?: string;
/**
* Used for the sort icon included in sorted cells.
*/
sortIcon?: string;
/**
* Applied to the root element of the cell.
*/
tableCell?: string;
}
export interface TableCellProps extends ReactToolbox.Props {
/**
* The column number of this cell.
*/
column?: number;
/**
* If true the cell is considered as numeric and the content will be displayed aligned to right.
* @default false
*/
numeric?: boolean;
/**
* Called when the cell is clicked with the click event, column number and row number.
*/
onClick?: Function;
/**
* The row number of the cell.
*/
row?: number;
/**
* If you provide a value the cell will show an arrow pointing down or up depending on the value to indicate it is a sorted element. Useful only for columns.
*/
sorted?: 'ASC' | 'DESC';
/**
* The element tag, either `td` or `th`.
* @default 'td'
*/
tagName?: 'td' | 'th';
/**
* Classnames object defining the component style.
*/
theme?: TableCellTheme;
}
export class TableCell extends React.Component<TableCellProps, {}> { }
export default TableCell;

42
components/table/TableHead.d.ts vendored Normal file
View File

@ -0,0 +1,42 @@
import * as React from 'react';
import ReactToolbox from "../index";
export interface TableHeadTheme {
/**
* Modifier for cells that include a select checkbox.
*/
checkboxCell?: string;
}
export interface TableHeadProps extends ReactToolbox.Props {
/**
* If true, a checkbox will be displayed to select every row. In case the table is not multi-selectable, it will be disabled though.
* @default true
*/
displaySelect?: boolean;
/**
* If true, the header and each row will display a checkbox to allow the user to select multiple rows.
* @default true
*/
multiSelectable?: boolean;
/**
* Handle the select state change of the checkbox in the header row.
*/
onSelect?: Function;
/**
* If true, each row will display a checkbox to allow the user to select that one row.
* @default true
*/
selectable?: boolean;
/**
* If selectable, controls the selected state of the checkbox in the header row.
*/
selected?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: TableHeadTheme;
}
export class TableHead extends React.Component<TableHeadProps, {}> { }
export default TableHead;

44
components/table/TableRow.d.ts vendored Normal file
View File

@ -0,0 +1,44 @@
import * as React from 'react';
import ReactToolbox from "../index";
export interface TableRowTheme {
/**
* Modifier for cells that include a select checkbox.
*/
checkboxCell?: string;
/**
* Added to each row in the table except for the header.
*/
row?: string;
/**
* Modifier for rows that are selected.
*/
selected?: string;
}
export interface TableRowProps extends ReactToolbox.Props {
/**
* The index of the row.
*/
idx?: number;
/**
* Handle the select state change of the checkbox in the ow.
*/
onSelect?: Function;
/**
* If true, each row will display a checkbox to allow the user to select that one row.
* @default true
*/
selectable?: boolean;
/**
* If true, the row will be considered as selected so the row will display a selected style with the selection control activated. This property is used by `Table` to figure out the selection when you interact with the Table.
*/
selected?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: TableRowTheme;
}
export class TableRow extends React.Component<TableRowProps, {}> { }
export default TableRow;

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

@ -0,0 +1,9 @@
import { Table } from './Table';
export { TableProps, TableTheme } from './Table';
export { TableHead, TableHeadProps, TableHeadTheme } from './TableHead';
export { TableRow, TableRowProps, TableRowTheme } from './TableRow';
export { TableCell, TableCellProps, TableCellTheme } from './TableCell';
export { Table };
export default Table;

74
components/tabs/Tab.d.ts vendored Normal file
View File

@ -0,0 +1,74 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
/**
* Class added when icon is set.
*/
withIcon?: string;
/**
* Class added when label is set.
*/
withText?: string;
}
export 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;
/**
* Icon to be used in inner FontIcon.
*/
icon?: React.ReactNode;
/**
* 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;
/**
* Additional properties passed to Tab root container.
*/
[key: string]: any;
}
export class Tab extends React.Component<TabProps, {}> { }
export default Tab;

36
components/tabs/TabContent.d.ts vendored Normal file
View File

@ -0,0 +1,36 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface TabContentTheme {
/**
* Added when tab is active.
*/
active?: string;
/**
* Used for the tab content element.
*/
tab?: string;
}
export interface TabContentProps extends ReactToolbox.Props {
/**
* Whether tab is active.
*/
active?: boolean;
/**
* Tab content.
*/
children?: React.ReactNode;
/**
* Current tab index.
*/
tabIndex?: number;
/**
* Classnames object defining the component style.
*/
theme?: TabContentTheme;
}
export class TabContent extends React.Component<TabContentProps, {}> { }
export default TabContent;

86
components/tabs/Tabs.d.ts vendored Normal file
View File

@ -0,0 +1,86 @@
import * as React from "react";
import ReactToolbox from "../index";
import { TabContentTheme } from './TabContent';
export interface TabsTheme extends TabTheme, TabContentTheme {
/**
* Class used for arrows.
*/
arrow?: string;
/**
* Class used for arrow container.
*/
arrowContainer?: string;
/**
* Class used when 'disableAnimatedBottomBorder' is true.
*/
disableAnimation?: string;
/**
* Used to make the 'fixed tabs'.
*/
fixed?: string;
/**
* Used to invert the colors.
*/
inverse?: string;
/**
* Used for the navigation element.
*/
navigation?: string;
/**
* Used for navigation container.
*/
navigationContainer?: string;
/**
* Used for the moving underline element.
*/
pointer?: string;
/**
* Used as a root classname for the component.
*/
tabs?: string;
}
export 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;
/**
* `unmounted` mode will not mount the tab content of inactive tabs.
* `display` mode will mount but hide inactive tabs.
* Consider holding state outside of the Tabs component before using `display` mode
* @default unmounted
*/
hideMode?: 'display' | 'unmounted';
/**
* If True, the tabs will have an inverse style.
*/
inverse?: boolean;
/**
* If True, the tabs will be fixed, covering the whole width.
*/
fixed?: boolean;
/**
* 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 default Tabs;

View File

@ -1,185 +1,2 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface TabsTheme extends TabTheme, TabContentTheme {
/**
* Class used for arrows.
*/
arrow?: string;
/**
* Class used for arrow container.
*/
arrowContainer?: string;
/**
* Class used when 'disableAnimatedBottomBorder' is true.
*/
disableAnimation?: string;
/**
* Used to make the 'fixed tabs'.
*/
fixed?: string;
/**
* Used to invert the colors.
*/
inverse?: string;
/**
* Used for the navigation element.
*/
navigation?: string;
/**
* Used for navigation container.
*/
navigationContainer?: string;
/**
* Used for the moving underline element.
*/
pointer?: string;
/**
* Used as a root classname for the component.
*/
tabs?: string;
}
export 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;
/**
* `unmounted` mode will not mount the tab content of inactive tabs.
* `display` mode will mount but hide inactive tabs.
* Consider holding state outside of the Tabs component before using `display` mode
* @default unmounted
*/
hideMode?: 'display' | 'unmounted';
/**
* If True, the tabs will have an inverse style.
*/
inverse?: boolean;
/**
* If True, the tabs will be fixed, covering the whole width.
*/
fixed?: boolean;
/**
* 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;
/**
* Class added when icon is set.
*/
withIcon?: string;
/**
* Class added when label is set.
*/
withText?: string;
}
export 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;
/**
* Icon to be used in inner FontIcon.
*/
icon?: React.ReactNode;
/**
* 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;
/**
* Additional properties passed to Tab root container.
*/
[key: string]: any;
}
export class Tab extends React.Component<TabProps, {}> { }
export interface TabContentTheme {
/**
* Added when tab is active.
*/
active?: string;
/**
* Used for the tab content element.
*/
tab?: string;
}
export interface TabContentProps extends ReactToolbox.Props {
/**
* Whether tab is active.
*/
active?: boolean;
/**
* Tab content.
*/
children?: React.ReactNode;
/**
* Current tab index.
*/
tabIndex?: number;
/**
* Classnames object defining the component style.
*/
theme?: TabContentTheme;
}
export class TabContent extends React.Component<TabContentProps, {}> { }
export { Tabs, TabsProps, TabsTheme } from './Tabs';
export { Tab, TabProps, TabTheme } from './Tab';

180
components/time_picker/TimePicker.d.ts vendored Normal file
View File

@ -0,0 +1,180 @@
import * as React from "react";
import ReactToolbox from "../index";
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;
}
export interface TimePickerProps {
/**
* Whether time picker is active.
* @default false
*/
active?: boolean;
/**
* Label used for cancel button.
* @default "Cancel"
*/
cancelLabel?: string;
/**
* Provide error text which will be displayed under the field.
*/
error?: string;
/**
* A key to identify an Icon from Material Design Icons or a custom Icon Element.
*/
icon?: React.ReactNode;
/**
* This class will be applied to Input component of TimePicker.
*/
inputClassName?: string;
/**
* Format to display the clock. It can be 24hr or ampm.
* @default "24hr"
*/
format?: "24hr" | "ampm";
/**
* The text string to use for the floating label element in the input component.
*/
label?: string;
/**
* Label used for 'OK' button on Dialog.
* @default "Ok"
*/
okLabel?: string;
/**
* Callback called when the picker value is changed.
*/
onChange?: Function;
/**
* Callback fired on Input click.
*/
onClick?: Function;
/**
* Callback fired after dismissing the Dialog.
*/
onDismiss?: Function;
/**
* Callback called when the ESC key is pressed with the overlay active.
*/
onEscKeyDown?: Function;
/**
* Callback invoked on Input key press.
*/
onKeyPress?: Function;
/**
* Callback to be invoked when the dialog overlay is clicked.
*/
onOverlayClick?: Function;
/**
* The input element will be readonly and look like disabled.
*/
readonly?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: TimePickerTheme;
/**
* Datetime object with currrently selected time.
*/
value?: Date;
/**
* Additional attributes passed to inner Input component.
*/
[key: string]: any;
}
export class TimePicker extends React.Component<TimePickerProps, {}> { }
export default TimePicker;

View File

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

110
index.d.ts vendored
View File

@ -2,60 +2,62 @@
// Project: https://github.com/react-toolbox/react-toolbox
// Definitions by: Per Bergqwist <https://github.com/normano64>
import { AppBar } from "react-toolbox/lib/app_bar";
import { Autocomplete } from "react-toolbox/lib/autocomplete";
import { Avatar } from "react-toolbox/lib/avatar";
import { Button, IconButton } from "react-toolbox/lib/button";
import { Card, CardTitle, CardMedia, CardText, CardActions } from "react-toolbox/lib/card";
import { Checkbox } from "react-toolbox/lib/checkbox";
import { Chip } from "react-toolbox/lib/chip";
import { DatePicker } from "react-toolbox/lib/date_picker";
import { Dialog } from "react-toolbox/lib/dialog";
import { Drawer } from "react-toolbox/lib/drawer";
import { Dropdown } from "react-toolbox/lib/dropdown";
import { FontIcon } from "react-toolbox/lib/font_icon";
import { Input } from "react-toolbox/lib/input";
import { Layout, Panel, NavDrawer, Sidebar } from "react-toolbox/lib/layout";
import { Link } from "react-toolbox/lib/link";
import { List, ListCheckbox, ListItem, ListDivider, ListSubHeader } from "react-toolbox/lib/list";
import { Menu, MenuDivider, MenuItem, IconMenu } from "react-toolbox/lib/menu";
import { Navigation } from "react-toolbox/lib/navigation";
import { ProgressBar } from "react-toolbox/lib/progress_bar";
import { RadioGroup, RadioButton } from "react-toolbox/lib/radio";
import { Ripple } from "react-toolbox/lib/ripple";
import { Slider } from "react-toolbox/lib/slider";
import { Snackbar } from "react-toolbox/lib/snackbar";
import { Switch } from "react-toolbox/lib/switch";
import { Tabs, Tab } from "react-toolbox/lib/tabs";
import { TimePicker } from "react-toolbox/lib/time_picker";
import { Tooltip } from "react-toolbox/lib/tooltip";
import { AppBar } from "./lib/app_bar";
import { Autocomplete } from "./lib/autocomplete";
import { Avatar } from "./lib/avatar";
import { Button, IconButton } from "./lib/button";
import { Card, CardTitle, CardMedia, CardText, CardActions } from "./lib/card";
import { Checkbox } from "./lib/checkbox";
import { Chip } from "./lib/chip";
import { DatePicker } from "./lib/date_picker";
import { Dialog } from "./lib/dialog";
import { Drawer } from "./lib/drawer";
import { Dropdown } from "./lib/dropdown";
import { FontIcon } from "./lib/font_icon";
import { Input } from "./lib/input";
import { Layout, Panel, NavDrawer, Sidebar } from "./lib/layout";
import { Link } from "./lib/link";
import { List, ListCheckbox, ListItem, ListDivider, ListSubHeader } from "./lib/list";
import { Menu, MenuDivider, MenuItem, IconMenu } from "./lib/menu";
import { Navigation } from "./lib/navigation";
import { ProgressBar } from "./lib/progress_bar";
import { RadioGroup, RadioButton } from "./lib/radio";
import { Ripple } from "./lib/ripple";
import { Slider } from "./lib/slider";
import { Snackbar } from "./lib/snackbar";
import { Switch } from "./lib/switch";
import { Table } from './lib/table';
import { Tabs, Tab } from "./lib/tabs";
import { TimePicker } from "./lib/time_picker";
import { Tooltip } from "./lib/tooltip";
import { AppBarTheme } from "react-toolbox/lib/app_bar";
import { AutocompleteTheme } from "react-toolbox/lib/autocomplete";
import { AvatarTheme } from "react-toolbox/lib/avatar";
import { ButtonTheme, IconButtonTheme } from "react-toolbox/lib/button";
import { CardTheme, CardTitleTheme, CardMediaTheme, CardTextTheme, CardActionsTheme } from "react-toolbox/lib/card";
import { CheckboxTheme } from "react-toolbox/lib/checkbox";
import { ChipTheme } from "react-toolbox/lib/chip";
import { DatePickerTheme } from "react-toolbox/lib/date_picker";
import { DialogTheme } from "react-toolbox/lib/dialog";
import { DrawerTheme } from "react-toolbox/lib/drawer";
import { DropdownTheme } from "react-toolbox/lib/dropdown";
import { InputTheme } from "react-toolbox/lib/input";
import { LayoutTheme, PanelTheme, NavDrawerTheme, SidebarTheme } from "react-toolbox/lib/layout";
import { LinkTheme } from "react-toolbox/lib/link";
import { ListTheme, ListCheckboxTheme, ListItemTheme, ListDividerTheme, ListSubHeaderTheme } from "react-toolbox/lib/list";
import { MenuTheme, MenuDividerTheme, MenuItemTheme, IconMenuTheme } from "react-toolbox/lib/menu";
import { NavigationTheme } from "react-toolbox/lib/navigation";
import { ProgressBarTheme } from "react-toolbox/lib/progress_bar";
import { RadioButtonTheme } from "react-toolbox/lib/radio";
import { RippleTheme } from "react-toolbox/lib/ripple";
import { SliderTheme } from "react-toolbox/lib/slider";
import { SnackbarTheme } from "react-toolbox/lib/snackbar";
import { SwitchTheme } from "react-toolbox/lib/switch";
import { TabsTheme, TabTheme } from "react-toolbox/lib/tabs";
import { TimePickerTheme } from "react-toolbox/lib/time_picker";
import { TooltipTheme } from "react-toolbox/lib/tooltip";
import { AppBarTheme } from "./lib/app_bar";
import { AutocompleteTheme } from "./lib/autocomplete";
import { AvatarTheme } from "./lib/avatar";
import { ButtonTheme, IconButtonTheme } from "./lib/button";
import { CardTheme, CardTitleTheme, CardMediaTheme, CardTextTheme, CardActionsTheme } from "./lib/card";
import { CheckboxTheme } from "./lib/checkbox";
import { ChipTheme } from "./lib/chip";
import { DatePickerTheme } from "./lib/date_picker";
import { DialogTheme } from "./lib/dialog";
import { DrawerTheme } from "./lib/drawer";
import { DropdownTheme } from "./lib/dropdown";
import { InputTheme } from "./lib/input";
import { LayoutTheme, PanelTheme, NavDrawerTheme, SidebarTheme } from "./lib/layout";
import { LinkTheme } from "./lib/link";
import { ListTheme, ListCheckboxTheme, ListItemTheme, ListDividerTheme, ListSubHeaderTheme } from "./lib/list";
import { MenuTheme, MenuDividerTheme, MenuItemTheme, IconMenuTheme } from "./lib/menu";
import { NavigationTheme } from "./lib/navigation";
import { ProgressBarTheme } from "./lib/progress_bar";
import { RadioButtonTheme } from "./lib/radio";
import { RippleTheme } from "./lib/ripple";
import { SliderTheme } from "./lib/slider";
import { SnackbarTheme } from "./lib/snackbar";
import { SwitchTheme } from "./lib/switch";
import { TableTheme, TableCellTheme, TableRowTheme, TableHeadTheme } from './lib/table';
import { TabsTheme, TabTheme } from "./lib/tabs";
import { TimePickerTheme } from "./lib/time_picker";
import { TooltipTheme } from "./lib/tooltip";
export {
AppBar,
@ -82,6 +84,7 @@ export {
Slider,
Snackbar,
Switch,
Table,
Tabs, Tab,
TimePicker,
Tooltip,
@ -109,6 +112,7 @@ export {
SliderTheme,
SnackbarTheme,
SwitchTheme,
TableTheme, TableCellTheme, TableRowTheme, TableHeadTheme,
TabsTheme, TabTheme,
TimePickerTheme,
TooltipTheme