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

Merge pull request #548 from Flavorus/dev 

Update TypeScript Definitions and fix npm typings
old
Javi Velasco 2016-06-08 08:23:54 +02:00
parent 0b6e8ca2e4 68926f8289
commit afde8b1aa2
65 changed files with 4847 additions and 1346 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -193,9 +193,9 @@ For now we have a [repository example](https://github.com/react-toolbox/react-to
## TypeScript
A TypeScript definition file `react-toolbox.d.ts` is available. It is referenced in `package.json` and should be picked up by the TypeScript compiler when importing from the npm package.
TypeScript external module definition files are included, and should not require any manual steps to utilize. They will be picked up by the TypeScript compiler when importing from the npm package.
Note that to comply with the typings requirement, a triple-slash reference to `react.d.ts` is *NOT included*. You will need to reference [react.d.ts](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/react/react.d.ts) somewhere in your project.
Note that to comply with the official recommendation for npm typings, a triple-slash reference to `react.d.ts` is *NOT included*. You will need to reference [react.d.ts](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/react/react.d.ts) somewhere in your project.
## Authors and Contributors

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

@ -0,0 +1,56 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface AppBarProps extends Props {
/**
* If true, the AppBar shows a shadow.
* @default false
*/
flat?: boolean,
/**
* Determine if the bar should have position fixed (true) or relative (false)
* @default false
*/
fixed?: boolean,
}
/**
* The app bar is a special kind of toolbar that’s used for branding, navigation, search, and actions.
* Usually it contains controls on the right and left side and a title with the current section or app name.
* You should give the content with children elements.
*/
export default class AppBar extends React.Component<AppBarProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,95 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
/**
* Properties of components that have values that can be changed (T is the type of the value)
*/
export interface Changeable<T> {
/**
* Callback called when the picker value is changed.
* @param v Type of the value
*/
onChange?: (v: T) => void
}
export interface AutocompleteProps extends Props, Conditional, Changeable<string | Array<any>> {
/**
* Sets the error string for the internal input element.
*/
error?: string,
/**
* The text string to use for the floating label element.
*/
label?: string,
/**
* If true, component can hold multiple values.
* @default true
*/
multiple?: boolean,
/**
* Object of key/values or array representing all items suggested.
*/
source: Object | Array<any>,
/**
* If true, the list of suggestions will not be filtered when a value is selected, until the query is modified.
* @default false
*/
showSuggestionsWhenValueIsSet?: boolean,
/**
* Type of the input element. It can be a valid HTML5 input type
* @default text
*/
type?: string,
/**
* Value or array of values currently selected component.Current value of the input element.
*/
value?: string | Array<any>,
}
/**
* An input field with a set of predeterminated labeled values. When it's focused it shows a list of hints that are filtered by label as the user types.
* They can be simple or multiple depending on the amount of values that can be selected.
* The opening direction is determined at opening time depending on the current position.
*/
export default class Autocomplete extends React.Component<AutocompleteProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,55 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Iconic {
/**
* Value of the icon (See icon component).
*/
icon?: string | React.ReactElement<any> | React.ReactHTMLElement<any>,
}
export interface AvatarProps extends Props, Iconic {
children?: any,
image?: string | React.ReactElement<any> | React.ReactHTMLElement<any> | React.ClassicComponent<any, any>,
title?: string | boolean,
}
/**
* Avatars can be used to represent people.
* For personal avatars, offer personalization options.
* As users may choose not to personalize an avatar, provide delightful defaults.
* When used with a specific logo, avatars can also be used to represent brand.
*/
export default class Avatar extends React.Component<AvatarProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,122 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
// Interface for components with icons
export interface Iconic {
/**
* Value of the icon (See icon component).
*/
icon?: string | React.ReactElement<any> | React.ReactHTMLElement<any>,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
/**
* Properties of components that can be clicked
*/
export interface Clickable {
/**
* Callback called when the button is clicked.
*/
onClick?: Function
}
export interface ButtonProps extends Props, Clickable, Conditional, Iconic {
/**
* Indicates if the button should have accent color.
* @default false
*/
accent?: boolean,
/**
* If true, the button will have a flat look.
* @default false
*/
flat?: boolean,
/**
* If true, the button will have a floating look.
* @default false
*/
floating?: boolean,
/**
* If specified, the button will be rendered as an <a>
*/
href?: string,
/**
* The text string to use for the name of the button.
*/
label?: string,
/**
* If true, component will be disabled and show a loading animation.
* @default false
*/
loading?: boolean,
/**
* To be used with floating button. If true the button will be smaller.
* @default false
*/
mini?: boolean,
/**
* Indicates if the button should have primary color.
* @default false
*/
primary?: boolean,
/**
* If true, the button will have a raised look.
* @default false
*/
raised?: boolean,
/**
* If true, component will have a ripple effect on click.
* @default true
*/
ripple?: boolean,
}
/**
* A button clearly communicates what action will occur when the user touches it.
* It consists of text, an image, or both, designed in accordance with your app’s color theme.
*/
export class Button extends React.Component<ButtonProps, {}> {
render(): React.DOMElement<any, any>;
}
export class IconButton extends React.Component<ButtonProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,225 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Iconic {
/**
* Value of the icon (See icon component).
*/
icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
/**
* Properties of components that can be clicked
*/
export interface Clickable {
/**
* Callback called when the button is clicked.
*/
onClick?: Function
}
export interface ButtonProps extends Props, Clickable, Conditional, Iconic {
/**
* Indicates if the button should have accent color.
* @default false
*/
accent?: boolean,
/**
* If true, the button will have a flat look.
* @default false
*/
flat?: boolean,
/**
* If true, the button will have a floating look.
* @default false
*/
floating?: boolean,
/**
* If specified, the button will be rendered as an <a>
*/
href?: string,
/**
* The text string to use for the name of the button.
*/
label?: string,
/**
* If true, component will be disabled and show a loading animation.
* @default false
*/
loading?: boolean,
/**
* To be used with floating button. If true the button will be smaller.
* @default false
*/
mini?: boolean,
/**
* Indicates if the button should have primary color.
* @default false
*/
primary?: boolean,
/**
* If true, the button will have a raised look.
* @default false
*/
raised?: boolean,
/**
* If true, component will have a ripple effect on click.
* @default true
*/
ripple?: boolean,
}
export interface CardProps extends Props, Clickable {
/**
* Child components, usually Card subcomponents.
*/
children?: any,
/**
* Increases the shadow depth to appear elevated.
*/
raised?: boolean,
/**
* Array of objects describing actions. These actions will be rendered as buttons and the object fields will be transferred to those.
* @default []
*/
actions?: Array<ButtonProps>,
/**
* Sets HEX or RGBA color to add a colored layer to the heading.
*/
color?: string,
/**
* URL to set as a background image in the heading.
*/
image?: string,
/**
* Type of the component to display general modifications. It can be 'wide' for a larger card, 'image' if it's an image card or 'event' which shows just a title on top.
*/
type?: string,
}
/**
* A Card is a piece of paper with unique related data that serves as an entry point to more detailed information.
* For example, a card could contain a photo, text, and a link about a single subject.
* Cards are composed of multiple subcomponents in React Toolbox.
* You can combine each of the subcomponents to create all different Material Design Cards given in the spec.
*/
export class Card extends React.Component<CardProps, {}> {
render(): React.DOMElement<any, any>;
}
export interface CardTitleProps extends Props {
avatar?: string | React.ReactElement<any> | React.ReactHTMLElement<any> | React.ClassicComponent<any, any>,
/**
* Children to pass through the component.
*/
children?: any,
/**
* Sets a complementary smaller text under the title.
*/
subtitle?: string,
/**
* Sets the title of the card.
*/
title?: string | boolean,
}
/**
* A versatile title block that can be used in various places on the card, including the media area.
* This component can also display an avatar next to the title content.
*/
export class CardTitle extends React.Component<CardTitleProps, {}> {
render(): React.DOMElement<any, any>;
}
export interface CardMediaProps extends Props {
/**
* Forces a ('wide' 16:9) or ('square' 1:1) aspect ratio respectively.
* Unset, the media area will have a flexible height.
* @default ''
*/
aspectRatio?: string,
/**
* Usually an image/video element or a <CardTitle> component.
*/
children?: any,
/**
* 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?: string | React.ReactElement<any> | React.ReactHTMLElement<any> | React.ClassicComponent<any, any>,
}
/**
* Used for displaying media such as images or videos on a card.
* Can also be used with a solid background color instead of an image.
*/
export class CardMedia extends React.Component<CardMediaProps, {}> {
render(): React.DOMElement<any, any>;
}
export interface CardTextProps extends Props {
/**
* Children to pass through the component.
*/
children?: any,
}
/**
* Basic card content container.
* Good for small descriptions or other supplementary text.
*/
export class CardText extends React.Component<CardTextProps, {}> {
render(): React.DOMElement<any, any>;
}
export interface CardActionsProps extends Props {
/**
* Children to pass through the component.
*/
children?: any,
}
/**
* This component is used as a container for supplemental card actions.
* Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.
*/
export class CardActions extends React.Component<CardActionsProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,80 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
/**
* Properties of components that have values that can be changed (T is the type of the value)
*/
export interface Changeable<T> {
/**
* Callback called when the picker value is changed.
* @param v Type of the value
*/
onChange?: (v: T) => void
}
export interface CheckboxProps extends Props, Changeable<boolean>, Conditional {
/**
* Value for the checkbox, can be true or false.
* @default false
*/
checked?: boolean,
/**
* Text label to attach next to the checkbox element.
*/
label?: 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 is focused
*/
onFocus?: Function,
}
export default class Checkbox extends React.Component<CheckboxProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,66 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
export interface ChipProps extends Props {
/**
* Child components, usually Avatar and inline elements
*/
children?: React.ReactNode;
/**
* If true, the chip will be rendered with a delete icon.
*/
deletable?: boolean;
/**
* Callback to be invoked when the delete icon is clicked.
*/
onDeleteClick?: React.MouseEventHandler
}
/**
* Avatars can be used to represent people.
* For personal avatars, offer personalization options.
* As users may choose not to personalize an avatar, provide delightful defaults.
* When used with a specific logo, avatars can also be used to represent brand.
*/
export default class Chip extends React.Component<ChipProps, {}> {
render(): React.ReactElement<any>;
}

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

@ -0,0 +1,67 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
/**
* Properties of components that have values that can be changed (T is the type of the value)
*/
export interface Changeable<T> {
/**
* Callback called when the picker value is changed.
* @param v Type of the value
*/
onChange?: (v: T) => void
}
export interface DatePickerProps extends Props, Changeable<Date> {
/**
* Date object with the maximum selectable date.
*/
maxDate?: Date,
/**
* Date object with the minimum selectable date.
*/
minDate?: Date,
/**
* The text string to use like a input placeholder.
*/
placeholder?: string,
/**
* Date object with the currently selected date.
*/
value?: Date,
}
export default class DatePicker extends React.Component<DatePickerProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,157 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Iconic {
/**
* Value of the icon (See icon component).
*/
icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
/**
* Properties of components that can be clicked
*/
export interface Clickable {
/**
* Callback called when the button is clicked.
*/
onClick?: Function
}
/**
* Properties of modal components (Drawer, Dialog)
*/
export interface Modal {
/**
* If true, the dialog will be active.
*/
active: boolean,
/**
* 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,
}
export interface ButtonProps extends Props, Clickable, Conditional, Iconic {
/**
* Indicates if the button should have accent color.
* @default false
*/
accent?: boolean,
/**
* If true, the button will have a flat look.
* @default false
*/
flat?: boolean,
/**
* If true, the button will have a floating look.
* @default false
*/
floating?: boolean,
/**
* If specified, the button will be rendered as an <a>
*/
href?: string,
/**
* The text string to use for the name of the button.
*/
label?: string,
/**
* If true, component will be disabled and show a loading animation.
* @default false
*/
loading?: boolean,
/**
* To be used with floating button. If true the button will be smaller.
* @default false
*/
mini?: boolean,
/**
* Indicates if the button should have primary color.
* @default false
*/
primary?: boolean,
/**
* If true, the button will have a raised look.
* @default false
*/
raised?: boolean,
/**
* If true, component will have a ripple effect on click.
* @default true
*/
ripple?: boolean,
}
export interface DialogProps extends Props, Modal {
/**
* An array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
* @default []
*/
actions?: Array<ButtonProps>,
/**
* The text string to use as standar title of the dialog.
*/
title?: string | boolean,
/**
* Used to determine the size of the dialog. It can be small, normal or large.
* @default normal
*/
type?: string,
}
export default class Dialog extends React.Component<DialogProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,74 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
/**
* Properties of modal components (Drawer, Dialog)
*/
export interface Modal {
/**
* If true, the dialog will be active.
*/
active: boolean,
/**
* 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,
}
export interface DrawerProps extends Props, Modal {
/**
* 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?: string
}
export default class Drawer extends React.Component<DrawerProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,82 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
export interface Option<T> {
label: string,
value: T,
}
/**
* Properties of components that have values that can be changed (T is the type of the value)
*/
export interface Changeable<T> {
/**
* Callback called when the picker value is changed.
* @param v Type of the value
*/
onChange?: (v: T) => void
}
export interface DropdownProps extends Props, Changeable<any>, Conditional {
/**
* If true, the dropdown will open up or down depending on the position in the screen.
*/
auto?: boolean,
/**
* The text string to use for the floating label element.
*/
label?: string,
/**
* Array of data objects with the data to represent in the dropdown.
*/
source: Array<Option<any>>,
/**
* Callback function that returns a JSX template to represent the element.
*/
template?: Function,
/**
* Default value using JSON data.
*/
value: string,
}
export default class Dropdown extends React.Component<DropdownProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,42 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface FontIconProps extends Props {
value: string
}
export default class FontIcon extends React.Component<FontIconProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,13 @@
import * as React from 'react';
export interface ActivableRendererOptions {
/**
* @default 500
*/
delay?: number;
}
export interface ActivableRendererProps {
active: boolean;
children?: any;
delay?: number
}
export default function ActivableRendererFactory<P>(options?: ActivableRendererOptions): (componentClass: React.ComponentClass<P>) => React.ComponentClass<P & ActivableRendererProps>

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

@ -0,0 +1,122 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
/**
* Properties of components that have values that can be changed (T is the type of the value)
*/
export interface Changeable<T> {
/**
* Callback called when the picker value is changed.
* @param v Type of the value
*/
onChange?: (v: T) => void
}
export interface Iconic {
/**
* Value of the icon (See icon component).
*/
icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
}
export interface InputProps extends Props, Conditional, Changeable<string>, Iconic {
/**
* Give an error string to display under the field.
*/
error?: string,
/**
* Indicates if the label is floating in the input field or not.
* @default true
*/
floating?: boolean,
/**
* The text string to use for the floating label element.
*/
label?: string,
/**
* Specifies the maximum number of characters allowed in the component.
*/
maxLength?: number,
/**
* If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.
* @default false
*/
multiline?: boolean,
/**
* Callback function that is fired when components is blurred.
*/
onBlur?: Function,
/**
* Callback function that is fired when components is focused.
*/
onFocus?: Function,
/**
* Callback function that is fired when a key is pressed down.
*/
onKeyDown?: Function,
/**
* Callback function that is fired when a key is pressed.
*/
onKeyPress?: Function,
/**
* Callback function that is fired when a key is released.
*/
onKeyUp?: Function,
/**
* If true, the html input has a required value.
* @default false
*/
required?: boolean,
/**
* Type of the input element. It can be a valid HTML5 input type
* @default text
*/
type?: string,
/**
* Current value of the input element.
*/
value?: string,
}
export default class Input extends React.Component<InputProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,56 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Iconic {
/**
* Value of the icon (See icon component).
*/
icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
}
export interface LinkProps extends Props, Iconic {
href: string,
/**
* The text string used for the text content of the link.
*/
label: string,
/**
* Sets a count number useful to display in the page how many times was visited for example.
*/
count?: number,
}
export default class Link extends React.Component<LinkProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,180 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
export interface Clickable {
/**
* Callback called when the button is clicked.
*/
onClick?: Function
}
/**
* Properties of components that have values that can be changed (T is the type of the value)
*/
export interface Changeable<T> {
/**
* Callback called when the picker value is changed.
* @param v Type of the value
*/
onChange?: (v: T) => void
}
export interface Iconic {
/**
* Value of the icon (See icon component).
*/
icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
}
export interface ListProps extends Props {
/**
* 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,
}
export class List extends React.Component<ListProps, {}> {
render(): React.DOMElement<any, any>;
}
export interface ListItemProps extends Props, Conditional, Clickable {
/**
* A string URL to specify an avatar in the left side of the item.
*/
avatar?: string,
/**
* Main text of the item. Required.
*/
caption?: string,
/**
* An element that will be displayed as the item. If set, this will override `caption` and `legend`.
*/
itemContent?: React.ReactElement<any>,
/**
* A list of elements that are placed on the left side of the item and after the avatar attribute.
*/
leftActions?: React.ReactElement<any>[],
/**
* A string key of a font icon to display an icon in the left side of the item.
*/
leftIcon?: string,
/**
* Secondary text to display under the caption.
*/
legend?: string,
/**
* A list of elements that are placed on the right side of the item and after the rightIcon attribute.
*/
rightActions?: React.ReactElement<any>[],
/**
* The same as the leftIcon but in this case the icon is displayed in the right side.
*/
rightIcon?: string,
/**
* If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
* @default false
*/
ripple?: boolean,
/**
* If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent
* @default false
*/
selectable?: boolean,
/**
* 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, {}> {
render(): React.DOMElement<any, any>;
}
export interface ListCheckboxProps extends Props, Conditional, Changeable<boolean> {
/**
* Main text of the item. Required.
*/
caption?: string,
/**
* If true the checkbox appears checked by default.
* @default false
*/
checked: 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 focused.
*/
onFocus?: Function,
}
export class ListCheckbox extends React.Component<ListCheckboxProps, {}> {
render(): React.DOMElement<any, any>;
}
export interface ListSubHeaderProps extends Props {
/**
* List header caption.
*/
caption: string;
}
export class ListSubHeader extends React.Component<ListSubHeaderProps, {}> {
render(): React.DOMElement<any, any>;
}
export interface ListDividerProps extends Props {
/**
* Indicates if the divider should be full width or should leave a space on the left side.
*/
inset: boolean;
}
export class ListDivider extends React.Component<ListDividerProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,150 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
export interface Iconic {
/**
* Value of the icon (See icon component).
*/
icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
}
export interface MenuProps extends Props {
/**
* If true, the menu will be displayed as opened by default.
* @default false
*/
active?: boolean,
/**
* Callback that will be called when the menu is being hidden.
*/
onHide?: Function,
/**
* Callback that will be called 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 top-left, top-right, bottom-left, bottom-right.
* @default static
*/
position?: string,
/**
* If true, the menu items will show a ripple effect on click.
*/
ripple?: boolean,
/**
* If true, the menu will keep a value to highlight the active child item.
*/
selectable?: boolean,
/**
* Used for selectable menus and indicates the initial value so the child item with this value can be highlighted.
*/
value?: boolean,
}
export class Menu extends React.Component<MenuProps, {}> {
render(): React.DOMElement<any, any>;
}
export interface IconMenuProps extends Props, Iconic {
/**
* If true, the icon will show a ripple when is clicked.
*/
iconRipple?: boolean,
/**
* Transferred to the Menu component.
* @default true
*/
menuRipple?: boolean,
/**
* Callback that will be called when the icon is clicked.
*/
onClick?: Function,
/**
* Callback that will be called when the menu is being hidden.
*/
onHide?: Function,
/**
* Callback that will be called when the menu is being shown.
*/
onShow?: Function,
/**
* Callback that will be called when a menu item is selected.
*/
onSelect?: Function,
/**
* Determine the position of the menu. This property is transferred to the inner Menu component.
* @default auto
*/
position?: string,
/**
* If true, the menu will keep a value to highlight the active child item. Transferred to the Menu
*/
selectable?: boolean,
}
export class IconMenu extends React.Component<IconMenuProps, {}> {
render(): React.DOMElement<any, any>;
}
export interface MenuItemProps extends Props, Conditional, Iconic {
/**
* The text to include in the menu item.
*/
caption?: string,
/**
* If true, the item will show a ripple effect when it's clicked. Inherited from the parent.
*/
ripple?: boolean,
/**
* Transferred from the Menu component for selectable menus. Indicates if it's the current active option.
*/
selected?: boolean,
}
export class MenuItem extends React.Component<MenuItemProps, {}> {
render(): React.DOMElement<any, any>;
}
export class MenuDivider extends React.Component<any, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,53 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface NavigationProps extends Props {
/**
* Array of objects that represent buttons so the keys will be transferred as properties to those.
*/
actions?: Array<ButtonProps>,
/**
* Array of objects similar to actions but that will be rendered as <Link/> component definition.
*/
routes?: Array<LinkProps>,
/**
* Type of the navigation, it can be 'vertical' or 'horizontal'.
*/
type?: string,
}
export default class Navigation extends React.Component<NavigationProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,49 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface OverlayProps extends Props {
active?: boolean;
children?: any;
/**
* Sets a CSS class on the component.
*/
className?: string;
invisible?: boolean;
onClick?: Function;
onEscKeyDown?: Function
}
export default class Overlay extends React.Component<OverlayProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,69 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface ProgressBarProps extends Props {
/**
* Value of a secondary progress bar useful for buffering.
*/
buffer?: number,
/**
* Maximum value permitted.
*/
max?: number, //
/**
* minimum value permitted.
*/
min?: number, //
/**
* Mode of the progress bar, it can be determinate or indeterminate.
*/
mode?: string, //
/**
* If true, the circular progress bar will be changing its color.
*/
multicolor?: boolean, //
/**
* Type of the progress bar, it can be circular or linear.
* @default linear
*/
type?: string,
/**
* Value of the current progress.
*/
value?: number,
}
export default class ProgressBar extends React.Component<ProgressBarProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,99 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
/**
* Properties of components that have values that can be changed (T is the type of the value)
*/
export interface Changeable<T> {
/**
* Callback called when the picker value is changed.
* @param v Type of the value
*/
onChange?: (v: T) => void
}
export interface RadioGroupProps extends Props, Conditional, Changeable<any> {
/**
* Name for the input element group.
*/
name?: string,
/**
* Default value selected in the radio group.
*/
value?: any,
}
export class RadioGroup extends React.Component<RadioGroupProps, {}> {
render(): React.DOMElement<any, any>;
}
export interface RadioButtonProps extends Props, Conditional {
/**
* If true, the input element will be selected by default. Transferred from the parent.
*/
checked?: boolean,
/**
* Label for the radio button.
*/
label?: 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,
/**
* Value for the radio button.
*/
value: any,
}
export class RadioButton extends React.Component<RadioButtonProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,72 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface SliderProps extends Props {
/**
* If true, an input is shown and the user can set the slider from keyboard value.
*/
editable?: boolean,
/**
* Maximum value permitted.
*/
max?: number,
/**
* Minimum value permitted.
*/
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.
*/
pinned?: boolean,
/**
* If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.
*/
snaps?: boolean,
/**
* Amount to vary the value when the knob is moved or increase/decrease is called.
*/
step?: number,
/**
* Current value of the slider.
*/
value: number,
}
export default class Slider extends React.Component<SliderProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,97 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Iconic {
/**
* Value of the icon (See icon component).
*/
icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
}
export interface Modal {
/**
* If true, the dialog will be active.
*/
active: boolean,
/**
* 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,
}
export interface SnackbarProps extends Props, Modal, Iconic {
/**
* For the action component inside the Snackbar.
*/
action?: string,
/**
* 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,
/**
* amount of time after the Snackbar will be automatically hidden.
*/
timeout?: number,
/**
* Indicates the action type. Can be 'accept', 'warning' or 'cancel'
*/
type?: string,
}
export default class Snackbar extends React.Component<SnackbarProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,75 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
export interface SwitchProps extends Props, Conditional {
/**
* If true, the switch will be enabled.
*/
checked: boolean,
/**
* If true, component will be disabled.
*/
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 components's value changes.
*/
onChange?: Function,
/**
* Callback function fire when the switch is focused.
*/
onFocus?: Function,
}
export default class Switch extends React.Component<SwitchProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,64 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface TableProps extends Props {
/**
* If true, component will show a heading using model field names.
*/
heading?: boolean,
/**
* Object describing the data model that represents each object in the source.
*/
model?: { [key: string]: string },
/**
* Callback function that is fired when an item in a row changes. If set, rows are editable.
*/
onChange?: Function,
/**
* Callback function invoked when the row selection changes.
*/
onSelect?: Function,
/**
* Array of indexes of the items in the source that should appear as selected.
*/
selected?: Array<number>,
/**
* Array of objects representing each item to show.
*/
source?: Array<{ [key: string]: any }>,
}
export default class Table extends React.Component<TableProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,84 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
/**
* Properties of components that have values that can be changed (T is the type of the value)
*/
export interface Changeable<T> {
/**
* Callback called when the picker value is changed.
* @param v Type of the value
*/
onChange?: (v: T) => void
}
export interface TabsProps extends Props, Changeable<number> {
/**
* Current
*/
index: number,
}
export class Tabs extends React.Component<TabsProps, {}> {
render(): React.DOMElement<any, any>;
}
export interface TabProps extends Props, Conditional {
/**
* If true, the current component is visible.
* @default false
*/
active?: boolean,
/**
* If true, the current component is not visible.
* @default false
*/
hidden?: boolean,
/**
* Label text for navigation header
*/
label?: string,
/**
* Callback function that is fired when the tab is activated.
*/
onActive?: Function,
}
export class Tab extends React.Component<TabProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,59 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
/**
* Properties of components that have values that can be changed (T is the type of the value)
*/
export interface Changeable<T> {
/**
* Callback called when the picker value is changed.
* @param v Type of the value
*/
onChange?: (v: T) => void
}
export interface TimePickerProps extends Props, Changeable<Date> {
/**
* Format to display the clock. It can be 24hr or ampm.
* @default 24hr
*/
format?: string,
/**
* Datetime object with currrently selected time
*/
value?: Date,
}
export default class TimePicker extends React.Component<TimePickerProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,10 @@
import * as React from 'react';
export class TooltipComponent<P, S> extends React.Component<P, S> {
getDecoratedComponentInstance(): React.Component<P, S>;
}
export interface TooltipComponentClass<P> extends React.ComponentClass<P> {
new (props?: P, context?: any): TooltipComponent<P, any>;
}
export default function Tooltip<P>(componentClass: React.ComponentClass<P>): TooltipComponentClass<P>;

81
index.d.ts vendored Normal file
View File

@ -0,0 +1,81 @@
// Type definitions for react-toolbox 0.16.2
// Project: http://react-toolbox.com/
// Definitions by: @xogeny (Michael M. Tiller), @hsrobflavorus (Robert Parker)
/* CHANGES
* 06/05/2016: Refactor into external module declarations (no more 'declare module ...')
* 04/27/2016: Updates for 0.16.2, added <Chip>, <Overlay>, and ActivableRendererFactory definitions, misc. tweaks and fixes.
* 02/03/2016:
* Fixed for TypeScript 1.8.0 stricter var declaration requirements (move `declare var ...` inside each individual module).
* Removed triple-slash reference to React to fix npm install compatibility (you'll need to make sure you're referencing react.d.ts somewhere in your project!).
* Hopefully fixed the default exports where applicable
* 01/13/2016: Minor changes, add a few missing props, add IconButton to react-toolbox/lib/button
* 12/21/2015: Fix "import * as Input from 'react-toolbox/lib/input'" style imports, which now correctly import only the necessary component(s).
* NOTE that you must use "import * as {Component Name}" not just "import {Component Name}" for this to work.
* 12/20/2015: Should be compatible with 0.14.0. Refactor modules into 'react-toolbox/lib/*' format.
Unfortunately importing them directly in that manner doesn't seem to work
i.e. "import Input from 'react-toolbox/lib/input'" resolves to undefined, whereas "import { Input } from 'react-toolbox'" works fine!
... Any ideas welcome!
* 12/20/2015: Add AppBar, Avatar, and refactor Card and its child Components to match the documentation.
* 12/18/2015: Update to react-toolbox 0.13.1 (from 0.12.11)
* 12/18/2015: Use JSDoc-style comments to provide Intellisense where supported
*/
/*
MISSING COMPONENTS (Contributions welcome)
* Ripple HOC
*/
import ActivableRendererFactory from 'react-toolbox/lib/hoc/ActivableRenderer';
import AppBar from 'react-toolbox/lib/app_bar';
import Autocomplete from 'react-toolbox/lib/autocomplete';
import Avatar from 'react-toolbox/lib/avatar';
import { Button }from 'react-toolbox/lib/button';
import { Card, CardActions, CardMedia, CardText, CardTitle} from 'react-toolbox/lib/card';
import Checkbox from 'react-toolbox/lib/checkbox';
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 Link from 'react-toolbox/lib/link';
import {List, ListItem, ListCheckbox, ListSubHeader, ListDivider} from 'react-toolbox/lib/list';
import {Menu, IconMenu, MenuItem, MenuDivider} from 'react-toolbox/lib/menu';
import Navigation from 'react-toolbox/lib/navigation';
import Overlay from 'react-toolbox/lib/overlay';
import ProgressBar from 'react-toolbox/lib/progress_bar';
import {RadioGroup, RadioButton} from 'react-toolbox/lib/radio';
import Slider from 'react-toolbox/lib/slider';
import Snackbar from 'react-toolbox/lib/snackbar';
import Switch from 'react-toolbox/lib/switch';
import { Tab, Tabs } from 'react-toolbox/lib/tabs';
import TimePicker from 'react-toolbox/lib/time_picker';
import Tooltip from 'react-toolbox/lib/tooltip';
export {
ActivableRendererFactory,
AppBar,
Autocomplete,
Avatar,
Button,
Card, CardActions, CardMedia, CardText, CardTitle,
Checkbox,
DatePicker,
Dialog,
Drawer,
Dropdown,
FontIcon,
Input,
Link,
List, ListItem, ListCheckbox, ListSubHeader, ListDivider,
Menu, IconMenu, MenuItem, MenuDivider,
Navigation,
Overlay,
ProgressBar,
RadioGroup, RadioButton,
Slider,
Snackbar,
Switch,
Tab, Tabs,
TimePicker,
Tooltip
}

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

@ -0,0 +1,56 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface AppBarProps extends Props {
/**
* If true, the AppBar shows a shadow.
* @default false
*/
flat?: boolean,
/**
* Determine if the bar should have position fixed (true) or relative (false)
* @default false
*/
fixed?: boolean,
}
/**
* The app bar is a special kind of toolbar that’s used for branding, navigation, search, and actions.
* Usually it contains controls on the right and left side and a title with the current section or app name.
* You should give the content with children elements.
*/
export default class AppBar extends React.Component<AppBarProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,95 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
/**
* Properties of components that have values that can be changed (T is the type of the value)
*/
export interface Changeable<T> {
/**
* Callback called when the picker value is changed.
* @param v Type of the value
*/
onChange?: (v: T) => void
}
export interface AutocompleteProps extends Props, Conditional, Changeable<string | Array<any>> {
/**
* Sets the error string for the internal input element.
*/
error?: string,
/**
* The text string to use for the floating label element.
*/
label?: string,
/**
* If true, component can hold multiple values.
* @default true
*/
multiple?: boolean,
/**
* Object of key/values or array representing all items suggested.
*/
source: Object | Array<any>,
/**
* If true, the list of suggestions will not be filtered when a value is selected, until the query is modified.
* @default false
*/
showSuggestionsWhenValueIsSet?: boolean,
/**
* Type of the input element. It can be a valid HTML5 input type
* @default text
*/
type?: string,
/**
* Value or array of values currently selected component.Current value of the input element.
*/
value?: string | Array<any>,
}
/**
* An input field with a set of predeterminated labeled values. When it's focused it shows a list of hints that are filtered by label as the user types.
* They can be simple or multiple depending on the amount of values that can be selected.
* The opening direction is determined at opening time depending on the current position.
*/
export default class Autocomplete extends React.Component<AutocompleteProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,55 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Iconic {
/**
* Value of the icon (See icon component).
*/
icon?: string | React.ReactElement<any> | React.ReactHTMLElement<any>,
}
export interface AvatarProps extends Props, Iconic {
children?: any,
image?: string | React.ReactElement<any> | React.ReactHTMLElement<any> | React.ClassicComponent<any, any>,
title?: string | boolean,
}
/**
* Avatars can be used to represent people.
* For personal avatars, offer personalization options.
* As users may choose not to personalize an avatar, provide delightful defaults.
* When used with a specific logo, avatars can also be used to represent brand.
*/
export default class Avatar extends React.Component<AvatarProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,122 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
// Interface for components with icons
export interface Iconic {
/**
* Value of the icon (See icon component).
*/
icon?: string | React.ReactElement<any> | React.ReactHTMLElement<any>,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
/**
* Properties of components that can be clicked
*/
export interface Clickable {
/**
* Callback called when the button is clicked.
*/
onClick?: Function
}
export interface ButtonProps extends Props, Clickable, Conditional, Iconic {
/**
* Indicates if the button should have accent color.
* @default false
*/
accent?: boolean,
/**
* If true, the button will have a flat look.
* @default false
*/
flat?: boolean,
/**
* If true, the button will have a floating look.
* @default false
*/
floating?: boolean,
/**
* If specified, the button will be rendered as an <a>
*/
href?: string,
/**
* The text string to use for the name of the button.
*/
label?: string,
/**
* If true, component will be disabled and show a loading animation.
* @default false
*/
loading?: boolean,
/**
* To be used with floating button. If true the button will be smaller.
* @default false
*/
mini?: boolean,
/**
* Indicates if the button should have primary color.
* @default false
*/
primary?: boolean,
/**
* If true, the button will have a raised look.
* @default false
*/
raised?: boolean,
/**
* If true, component will have a ripple effect on click.
* @default true
*/
ripple?: boolean,
}
/**
* A button clearly communicates what action will occur when the user touches it.
* It consists of text, an image, or both, designed in accordance with your app’s color theme.
*/
export class Button extends React.Component<ButtonProps, {}> {
render(): React.DOMElement<any, any>;
}
export class IconButton extends React.Component<ButtonProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,225 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Iconic {
/**
* Value of the icon (See icon component).
*/
icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
/**
* Properties of components that can be clicked
*/
export interface Clickable {
/**
* Callback called when the button is clicked.
*/
onClick?: Function
}
export interface ButtonProps extends Props, Clickable, Conditional, Iconic {
/**
* Indicates if the button should have accent color.
* @default false
*/
accent?: boolean,
/**
* If true, the button will have a flat look.
* @default false
*/
flat?: boolean,
/**
* If true, the button will have a floating look.
* @default false
*/
floating?: boolean,
/**
* If specified, the button will be rendered as an <a>
*/
href?: string,
/**
* The text string to use for the name of the button.
*/
label?: string,
/**
* If true, component will be disabled and show a loading animation.
* @default false
*/
loading?: boolean,
/**
* To be used with floating button. If true the button will be smaller.
* @default false
*/
mini?: boolean,
/**
* Indicates if the button should have primary color.
* @default false
*/
primary?: boolean,
/**
* If true, the button will have a raised look.
* @default false
*/
raised?: boolean,
/**
* If true, component will have a ripple effect on click.
* @default true
*/
ripple?: boolean,
}
export interface CardProps extends Props, Clickable {
/**
* Child components, usually Card subcomponents.
*/
children?: any,
/**
* Increases the shadow depth to appear elevated.
*/
raised?: boolean,
/**
* Array of objects describing actions. These actions will be rendered as buttons and the object fields will be transferred to those.
* @default []
*/
actions?: Array<ButtonProps>,
/**
* Sets HEX or RGBA color to add a colored layer to the heading.
*/
color?: string,
/**
* URL to set as a background image in the heading.
*/
image?: string,
/**
* Type of the component to display general modifications. It can be 'wide' for a larger card, 'image' if it's an image card or 'event' which shows just a title on top.
*/
type?: string,
}
/**
* A Card is a piece of paper with unique related data that serves as an entry point to more detailed information.
* For example, a card could contain a photo, text, and a link about a single subject.
* Cards are composed of multiple subcomponents in React Toolbox.
* You can combine each of the subcomponents to create all different Material Design Cards given in the spec.
*/
export class Card extends React.Component<CardProps, {}> {
render(): React.DOMElement<any, any>;
}
export interface CardTitleProps extends Props {
avatar?: string | React.ReactElement<any> | React.ReactHTMLElement<any> | React.ClassicComponent<any, any>,
/**
* Children to pass through the component.
*/
children?: any,
/**
* Sets a complementary smaller text under the title.
*/
subtitle?: string,
/**
* Sets the title of the card.
*/
title?: string | boolean,
}
/**
* A versatile title block that can be used in various places on the card, including the media area.
* This component can also display an avatar next to the title content.
*/
export class CardTitle extends React.Component<CardTitleProps, {}> {
render(): React.DOMElement<any, any>;
}
export interface CardMediaProps extends Props {
/**
* Forces a ('wide' 16:9) or ('square' 1:1) aspect ratio respectively.
* Unset, the media area will have a flexible height.
* @default ''
*/
aspectRatio?: string,
/**
* Usually an image/video element or a <CardTitle> component.
*/
children?: any,
/**
* 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?: string | React.ReactElement<any> | React.ReactHTMLElement<any> | React.ClassicComponent<any, any>,
}
/**
* Used for displaying media such as images or videos on a card.
* Can also be used with a solid background color instead of an image.
*/
export class CardMedia extends React.Component<CardMediaProps, {}> {
render(): React.DOMElement<any, any>;
}
export interface CardTextProps extends Props {
/**
* Children to pass through the component.
*/
children?: any,
}
/**
* Basic card content container.
* Good for small descriptions or other supplementary text.
*/
export class CardText extends React.Component<CardTextProps, {}> {
render(): React.DOMElement<any, any>;
}
export interface CardActionsProps extends Props {
/**
* Children to pass through the component.
*/
children?: any,
}
/**
* This component is used as a container for supplemental card actions.
* Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.
*/
export class CardActions extends React.Component<CardActionsProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,80 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
/**
* Properties of components that have values that can be changed (T is the type of the value)
*/
export interface Changeable<T> {
/**
* Callback called when the picker value is changed.
* @param v Type of the value
*/
onChange?: (v: T) => void
}
export interface CheckboxProps extends Props, Changeable<boolean>, Conditional {
/**
* Value for the checkbox, can be true or false.
* @default false
*/
checked?: boolean,
/**
* Text label to attach next to the checkbox element.
*/
label?: 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 is focused
*/
onFocus?: Function,
}
export default class Checkbox extends React.Component<CheckboxProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,66 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
export interface ChipProps extends Props {
/**
* Child components, usually Avatar and inline elements
*/
children?: React.ReactNode;
/**
* If true, the chip will be rendered with a delete icon.
*/
deletable?: boolean;
/**
* Callback to be invoked when the delete icon is clicked.
*/
onDeleteClick?: React.MouseEventHandler
}
/**
* Avatars can be used to represent people.
* For personal avatars, offer personalization options.
* As users may choose not to personalize an avatar, provide delightful defaults.
* When used with a specific logo, avatars can also be used to represent brand.
*/
export default class Chip extends React.Component<ChipProps, {}> {
render(): React.ReactElement<any>;
}

3
lib/date_picker/DatePicker.js
View File

@ -103,6 +103,7 @@ var factory = function factory(Input, DatePickerDialog) {
className: (0, _classnames3.default)(this.props.theme.input, _defineProperty({}, inputClassName, inputClassName)),
error: this.props.error,
onMouseDown: this.handleInputMouseDown,
name: this.props.name,
label: this.props.label,
readOnly: true,
type: 'text',
@ -113,6 +114,7 @@ var factory = function factory(Input, DatePickerDialog) {
autoOk: this.props.autoOk,
active: this.state.active,
className: this.props.className,
name: this.props.name,
maxDate: this.props.maxDate,
minDate: this.props.minDate,
onDismiss: this.handleDismiss,
@ -134,6 +136,7 @@ var factory = function factory(Input, DatePickerDialog) {
icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
inputClassName: _react.PropTypes.string,
inputFormat: _react.PropTypes.func,
name: _react.PropTypes.string,
label: _react.PropTypes.string,
maxDate: _react.PropTypes.object,
minDate: _react.PropTypes.object,

3
lib/date_picker/DatePickerDialog.js
View File

@ -63,7 +63,7 @@ var factory = function factory(Dialog, Calendar) {
date: date
});
}
}, _this.actions = [{ label: 'Cancel', className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: 'Ok', className: _this.props.theme.button, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
}, _this.actions = [{ label: 'Cancel', className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: 'Ok', className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(CalendarDialog, [{
@ -130,6 +130,7 @@ var factory = function factory(Dialog, Calendar) {
className: _react.PropTypes.string,
maxDate: _react.PropTypes.object,
minDate: _react.PropTypes.object,
name: _react.PropTypes.string,
onDismiss: _react.PropTypes.func,
onSelect: _react.PropTypes.func,
theme: _react.PropTypes.shape({

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

@ -0,0 +1,67 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
/**
* Properties of components that have values that can be changed (T is the type of the value)
*/
export interface Changeable<T> {
/**
* Callback called when the picker value is changed.
* @param v Type of the value
*/
onChange?: (v: T) => void
}
export interface DatePickerProps extends Props, Changeable<Date> {
/**
* Date object with the maximum selectable date.
*/
maxDate?: Date,
/**
* Date object with the minimum selectable date.
*/
minDate?: Date,
/**
* The text string to use like a input placeholder.
*/
placeholder?: string,
/**
* Date object with the currently selected date.
*/
value?: Date,
}
export default class DatePicker extends React.Component<DatePickerProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,157 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Iconic {
/**
* Value of the icon (See icon component).
*/
icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
/**
* Properties of components that can be clicked
*/
export interface Clickable {
/**
* Callback called when the button is clicked.
*/
onClick?: Function
}
/**
* Properties of modal components (Drawer, Dialog)
*/
export interface Modal {
/**
* If true, the dialog will be active.
*/
active: boolean,
/**
* 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,
}
export interface ButtonProps extends Props, Clickable, Conditional, Iconic {
/**
* Indicates if the button should have accent color.
* @default false
*/
accent?: boolean,
/**
* If true, the button will have a flat look.
* @default false
*/
flat?: boolean,
/**
* If true, the button will have a floating look.
* @default false
*/
floating?: boolean,
/**
* If specified, the button will be rendered as an <a>
*/
href?: string,
/**
* The text string to use for the name of the button.
*/
label?: string,
/**
* If true, component will be disabled and show a loading animation.
* @default false
*/
loading?: boolean,
/**
* To be used with floating button. If true the button will be smaller.
* @default false
*/
mini?: boolean,
/**
* Indicates if the button should have primary color.
* @default false
*/
primary?: boolean,
/**
* If true, the button will have a raised look.
* @default false
*/
raised?: boolean,
/**
* If true, component will have a ripple effect on click.
* @default true
*/
ripple?: boolean,
}
export interface DialogProps extends Props, Modal {
/**
* An array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
* @default []
*/
actions?: Array<ButtonProps>,
/**
* The text string to use as standar title of the dialog.
*/
title?: string | boolean,
/**
* Used to determine the size of the dialog. It can be small, normal or large.
* @default normal
*/
type?: string,
}
export default class Dialog extends React.Component<DialogProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,74 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
/**
* Properties of modal components (Drawer, Dialog)
*/
export interface Modal {
/**
* If true, the dialog will be active.
*/
active: boolean,
/**
* 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,
}
export interface DrawerProps extends Props, Modal {
/**
* 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?: string
}
export default class Drawer extends React.Component<DrawerProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,82 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
export interface Option<T> {
label: string,
value: T,
}
/**
* Properties of components that have values that can be changed (T is the type of the value)
*/
export interface Changeable<T> {
/**
* Callback called when the picker value is changed.
* @param v Type of the value
*/
onChange?: (v: T) => void
}
export interface DropdownProps extends Props, Changeable<any>, Conditional {
/**
* If true, the dropdown will open up or down depending on the position in the screen.
*/
auto?: boolean,
/**
* The text string to use for the floating label element.
*/
label?: string,
/**
* Array of data objects with the data to represent in the dropdown.
*/
source: Array<Option<any>>,
/**
* Callback function that returns a JSX template to represent the element.
*/
template?: Function,
/**
* Default value using JSON data.
*/
value: string,
}
export default class Dropdown extends React.Component<DropdownProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,42 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface FontIconProps extends Props {
value: string
}
export default class FontIcon extends React.Component<FontIconProps, {}> {
render(): React.DOMElement<any, any>;
}

13
lib/hoc/ActivableRenderer.d.ts vendored Normal file
View File

@ -0,0 +1,13 @@
import * as React from 'react';
export interface ActivableRendererOptions {
/**
* @default 500
*/
delay?: number;
}
export interface ActivableRendererProps {
active: boolean;
children?: any;
delay?: number
}
export default function ActivableRendererFactory<P>(options?: ActivableRendererOptions): (componentClass: React.ComponentClass<P>) => React.ComponentClass<P & ActivableRendererProps>

5
lib/input/Input.js
View File

@ -79,6 +79,7 @@ var factory = function factory(FontIcon) {
var floating = _props.floating;
var hint = _props.hint;
var icon = _props.icon;
var name = _props.name;
var labelText = _props.label;
var maxLength = _props.maxLength;
var multiline = _props.multiline;
@ -87,7 +88,7 @@ var factory = function factory(FontIcon) {
var type = _props.type;
var value = _props.value;
var others = _objectWithoutProperties(_props, ['children', 'disabled', 'error', 'floating', 'hint', 'icon', 'label', 'maxLength', 'multiline', 'required', 'theme', 'type', 'value']);
var others = _objectWithoutProperties(_props, ['children', 'disabled', 'error', 'floating', 'hint', 'icon', 'name', 'label', 'maxLength', 'multiline', 'required', 'theme', 'type', 'value']);
var length = maxLength && value ? value.length : 0;
var labelClassName = (0, _classnames5.default)(theme.label, _defineProperty({}, theme.fixed, !floating));
@ -101,6 +102,7 @@ var factory = function factory(FontIcon) {
onChange: this.handleChange,
ref: 'input',
role: 'input',
name: name,
disabled: disabled,
required: required,
type: type,
@ -157,6 +159,7 @@ var factory = function factory(FontIcon) {
floating: _react2.default.PropTypes.bool,
hint: _react2.default.PropTypes.string,
icon: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.element]),
name: _react2.default.PropTypes.string,
label: _react2.default.PropTypes.string,
maxLength: _react2.default.PropTypes.number,
multiline: _react2.default.PropTypes.bool,

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

@ -0,0 +1,122 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
/**
* Properties of components that have values that can be changed (T is the type of the value)
*/
export interface Changeable<T> {
/**
* Callback called when the picker value is changed.
* @param v Type of the value
*/
onChange?: (v: T) => void
}
export interface Iconic {
/**
* Value of the icon (See icon component).
*/
icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
}
export interface InputProps extends Props, Conditional, Changeable<string>, Iconic {
/**
* Give an error string to display under the field.
*/
error?: string,
/**
* Indicates if the label is floating in the input field or not.
* @default true
*/
floating?: boolean,
/**
* The text string to use for the floating label element.
*/
label?: string,
/**
* Specifies the maximum number of characters allowed in the component.
*/
maxLength?: number,
/**
* If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.
* @default false
*/
multiline?: boolean,
/**
* Callback function that is fired when components is blurred.
*/
onBlur?: Function,
/**
* Callback function that is fired when components is focused.
*/
onFocus?: Function,
/**
* Callback function that is fired when a key is pressed down.
*/
onKeyDown?: Function,
/**
* Callback function that is fired when a key is pressed.
*/
onKeyPress?: Function,
/**
* Callback function that is fired when a key is released.
*/
onKeyUp?: Function,
/**
* If true, the html input has a required value.
* @default false
*/
required?: boolean,
/**
* Type of the input element. It can be a valid HTML5 input type
* @default text
*/
type?: string,
/**
* Current value of the input element.
*/
value?: string,
}
export default class Input extends React.Component<InputProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,56 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Iconic {
/**
* Value of the icon (See icon component).
*/
icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
}
export interface LinkProps extends Props, Iconic {
href: string,
/**
* The text string used for the text content of the link.
*/
label: string,
/**
* Sets a count number useful to display in the page how many times was visited for example.
*/
count?: number,
}
export default class Link extends React.Component<LinkProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,180 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
export interface Clickable {
/**
* Callback called when the button is clicked.
*/
onClick?: Function
}
/**
* Properties of components that have values that can be changed (T is the type of the value)
*/
export interface Changeable<T> {
/**
* Callback called when the picker value is changed.
* @param v Type of the value
*/
onChange?: (v: T) => void
}
export interface Iconic {
/**
* Value of the icon (See icon component).
*/
icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
}
export interface ListProps extends Props {
/**
* 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,
}
export class List extends React.Component<ListProps, {}> {
render(): React.DOMElement<any, any>;
}
export interface ListItemProps extends Props, Conditional, Clickable {
/**
* A string URL to specify an avatar in the left side of the item.
*/
avatar?: string,
/**
* Main text of the item. Required.
*/
caption?: string,
/**
* An element that will be displayed as the item. If set, this will override `caption` and `legend`.
*/
itemContent?: React.ReactElement<any>,
/**
* A list of elements that are placed on the left side of the item and after the avatar attribute.
*/
leftActions?: React.ReactElement<any>[],
/**
* A string key of a font icon to display an icon in the left side of the item.
*/
leftIcon?: string,
/**
* Secondary text to display under the caption.
*/
legend?: string,
/**
* A list of elements that are placed on the right side of the item and after the rightIcon attribute.
*/
rightActions?: React.ReactElement<any>[],
/**
* The same as the leftIcon but in this case the icon is displayed in the right side.
*/
rightIcon?: string,
/**
* If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
* @default false
*/
ripple?: boolean,
/**
* If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent
* @default false
*/
selectable?: boolean,
/**
* 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, {}> {
render(): React.DOMElement<any, any>;
}
export interface ListCheckboxProps extends Props, Conditional, Changeable<boolean> {
/**
* Main text of the item. Required.
*/
caption?: string,
/**
* If true the checkbox appears checked by default.
* @default false
*/
checked: 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 focused.
*/
onFocus?: Function,
}
export class ListCheckbox extends React.Component<ListCheckboxProps, {}> {
render(): React.DOMElement<any, any>;
}
export interface ListSubHeaderProps extends Props {
/**
* List header caption.
*/
caption: string;
}
export class ListSubHeader extends React.Component<ListSubHeaderProps, {}> {
render(): React.DOMElement<any, any>;
}
export interface ListDividerProps extends Props {
/**
* Indicates if the divider should be full width or should leave a space on the left side.
*/
inset: boolean;
}
export class ListDivider extends React.Component<ListDividerProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,150 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
export interface Iconic {
/**
* Value of the icon (See icon component).
*/
icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
}
export interface MenuProps extends Props {
/**
* If true, the menu will be displayed as opened by default.
* @default false
*/
active?: boolean,
/**
* Callback that will be called when the menu is being hidden.
*/
onHide?: Function,
/**
* Callback that will be called 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 top-left, top-right, bottom-left, bottom-right.
* @default static
*/
position?: string,
/**
* If true, the menu items will show a ripple effect on click.
*/
ripple?: boolean,
/**
* If true, the menu will keep a value to highlight the active child item.
*/
selectable?: boolean,
/**
* Used for selectable menus and indicates the initial value so the child item with this value can be highlighted.
*/
value?: boolean,
}
export class Menu extends React.Component<MenuProps, {}> {
render(): React.DOMElement<any, any>;
}
export interface IconMenuProps extends Props, Iconic {
/**
* If true, the icon will show a ripple when is clicked.
*/
iconRipple?: boolean,
/**
* Transferred to the Menu component.
* @default true
*/
menuRipple?: boolean,
/**
* Callback that will be called when the icon is clicked.
*/
onClick?: Function,
/**
* Callback that will be called when the menu is being hidden.
*/
onHide?: Function,
/**
* Callback that will be called when the menu is being shown.
*/
onShow?: Function,
/**
* Callback that will be called when a menu item is selected.
*/
onSelect?: Function,
/**
* Determine the position of the menu. This property is transferred to the inner Menu component.
* @default auto
*/
position?: string,
/**
* If true, the menu will keep a value to highlight the active child item. Transferred to the Menu
*/
selectable?: boolean,
}
export class IconMenu extends React.Component<IconMenuProps, {}> {
render(): React.DOMElement<any, any>;
}
export interface MenuItemProps extends Props, Conditional, Iconic {
/**
* The text to include in the menu item.
*/
caption?: string,
/**
* If true, the item will show a ripple effect when it's clicked. Inherited from the parent.
*/
ripple?: boolean,
/**
* Transferred from the Menu component for selectable menus. Indicates if it's the current active option.
*/
selected?: boolean,
}
export class MenuItem extends React.Component<MenuItemProps, {}> {
render(): React.DOMElement<any, any>;
}
export class MenuDivider extends React.Component<any, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,53 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface NavigationProps extends Props {
/**
* Array of objects that represent buttons so the keys will be transferred as properties to those.
*/
actions?: Array<ButtonProps>,
/**
* Array of objects similar to actions but that will be rendered as <Link/> component definition.
*/
routes?: Array<LinkProps>,
/**
* Type of the navigation, it can be 'vertical' or 'horizontal'.
*/
type?: string,
}
export default class Navigation extends React.Component<NavigationProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,49 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface OverlayProps extends Props {
active?: boolean;
children?: any;
/**
* Sets a CSS class on the component.
*/
className?: string;
invisible?: boolean;
onClick?: Function;
onEscKeyDown?: Function
}
export default class Overlay extends React.Component<OverlayProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,69 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface ProgressBarProps extends Props {
/**
* Value of a secondary progress bar useful for buffering.
*/
buffer?: number,
/**
* Maximum value permitted.
*/
max?: number, //
/**
* minimum value permitted.
*/
min?: number, //
/**
* Mode of the progress bar, it can be determinate or indeterminate.
*/
mode?: string, //
/**
* If true, the circular progress bar will be changing its color.
*/
multicolor?: boolean, //
/**
* Type of the progress bar, it can be circular or linear.
* @default linear
*/
type?: string,
/**
* Value of the current progress.
*/
value?: number,
}
export default class ProgressBar extends React.Component<ProgressBarProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,99 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
/**
* Properties of components that have values that can be changed (T is the type of the value)
*/
export interface Changeable<T> {
/**
* Callback called when the picker value is changed.
* @param v Type of the value
*/
onChange?: (v: T) => void
}
export interface RadioGroupProps extends Props, Conditional, Changeable<any> {
/**
* Name for the input element group.
*/
name?: string,
/**
* Default value selected in the radio group.
*/
value?: any,
}
export class RadioGroup extends React.Component<RadioGroupProps, {}> {
render(): React.DOMElement<any, any>;
}
export interface RadioButtonProps extends Props, Conditional {
/**
* If true, the input element will be selected by default. Transferred from the parent.
*/
checked?: boolean,
/**
* Label for the radio button.
*/
label?: 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,
/**
* Value for the radio button.
*/
value: any,
}
export class RadioButton extends React.Component<RadioButtonProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,72 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface SliderProps extends Props {
/**
* If true, an input is shown and the user can set the slider from keyboard value.
*/
editable?: boolean,
/**
* Maximum value permitted.
*/
max?: number,
/**
* Minimum value permitted.
*/
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.
*/
pinned?: boolean,
/**
* If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.
*/
snaps?: boolean,
/**
* Amount to vary the value when the knob is moved or increase/decrease is called.
*/
step?: number,
/**
* Current value of the slider.
*/
value: number,
}
export default class Slider extends React.Component<SliderProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,97 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Iconic {
/**
* Value of the icon (See icon component).
*/
icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
}
export interface Modal {
/**
* If true, the dialog will be active.
*/
active: boolean,
/**
* 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,
}
export interface SnackbarProps extends Props, Modal, Iconic {
/**
* For the action component inside the Snackbar.
*/
action?: string,
/**
* 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,
/**
* amount of time after the Snackbar will be automatically hidden.
*/
timeout?: number,
/**
* Indicates the action type. Can be 'accept', 'warning' or 'cancel'
*/
type?: string,
}
export default class Snackbar extends React.Component<SnackbarProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,75 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
export interface SwitchProps extends Props, Conditional {
/**
* If true, the switch will be enabled.
*/
checked: boolean,
/**
* If true, component will be disabled.
*/
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 components's value changes.
*/
onChange?: Function,
/**
* Callback function fire when the switch is focused.
*/
onFocus?: Function,
}
export default class Switch extends React.Component<SwitchProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,64 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface TableProps extends Props {
/**
* If true, component will show a heading using model field names.
*/
heading?: boolean,
/**
* Object describing the data model that represents each object in the source.
*/
model?: { [key: string]: string },
/**
* Callback function that is fired when an item in a row changes. If set, rows are editable.
*/
onChange?: Function,
/**
* Callback function invoked when the row selection changes.
*/
onSelect?: Function,
/**
* Array of indexes of the items in the source that should appear as selected.
*/
selected?: Array<number>,
/**
* Array of objects representing each item to show.
*/
source?: Array<{ [key: string]: any }>,
}
export default class Table extends React.Component<TableProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,84 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
export interface Conditional {
/**
* If true, component will be disabled
* @default false
*/
disabled?: boolean
}
/**
* Properties of components that have values that can be changed (T is the type of the value)
*/
export interface Changeable<T> {
/**
* Callback called when the picker value is changed.
* @param v Type of the value
*/
onChange?: (v: T) => void
}
export interface TabsProps extends Props, Changeable<number> {
/**
* Current
*/
index: number,
}
export class Tabs extends React.Component<TabsProps, {}> {
render(): React.DOMElement<any, any>;
}
export interface TabProps extends Props, Conditional {
/**
* If true, the current component is visible.
* @default false
*/
active?: boolean,
/**
* If true, the current component is not visible.
* @default false
*/
hidden?: boolean,
/**
* Label text for navigation header
*/
label?: string,
/**
* Callback function that is fired when the tab is activated.
*/
onActive?: Function,
}
export class Tab extends React.Component<TabProps, {}> {
render(): React.DOMElement<any, any>;
}

3
lib/time_picker/TimePicker.js
View File

@ -93,6 +93,7 @@ var factory = function factory(TimePickerDialog, Input) {
_react2.default.createElement(Input, {
className: (0, _classnames3.default)(theme.input, _defineProperty({}, inputClassName, inputClassName)),
error: this.props.error,
name: this.props.name,
label: this.props.label,
onMouseDown: this.handleInputMouseDown,
readOnly: true,
@ -102,6 +103,7 @@ var factory = function factory(TimePickerDialog, Input) {
_react2.default.createElement(TimePickerDialog, {
active: this.state.active,
className: this.props.className,
name: this.props.name,
format: format,
onDismiss: this.handleDismiss,
onSelect: this.handleSelect,
@ -120,6 +122,7 @@ var factory = function factory(TimePickerDialog, Input) {
error: _react.PropTypes.string,
format: _react.PropTypes.oneOf(['24hr', 'ampm']),
inputClassName: _react.PropTypes.string,
name: _react.PropTypes.string,
label: _react.PropTypes.string,
onChange: _react.PropTypes.func,
theme: _react.PropTypes.shape({

3
lib/time_picker/TimePickerDialog.js
View File

@ -58,7 +58,7 @@ var factory = function factory(Dialog) {
if (_this.state.display === 'hours') _this.setState({ display: 'minutes' });
}, _this.switchDisplay = function (display) {
_this.setState({ display: display });
}, _this.actions = [{ label: 'Cancel', className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: 'Ok', className: _this.props.theme.button, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
}, _this.actions = [{ label: 'Cancel', className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: 'Ok', className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(TimePickerDialog, [{
@ -150,6 +150,7 @@ var factory = function factory(Dialog) {
active: _react.PropTypes.bool,
className: _react.PropTypes.string,
format: _react.PropTypes.oneOf(['24hr', 'ampm']),
name: _react.PropTypes.string,
onDismiss: _react.PropTypes.func,
onSelect: _react.PropTypes.func,
theme: _react.PropTypes.shape({

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

@ -0,0 +1,59 @@
import * as React from 'react';
export interface Props {
/**
* Sets a CSS class on the component.
*/
className?: string,
id?: string;
/**
* A key used to uniquely identify the element within an Array
*/
key?: string,
/**
* Inline style
*/
style?: any,
/**
* Tooltip text
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltip?: string,
/**
* Amount of time in miliseconds spent before the tooltip is visible.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipDelay?: number,
/**
* If true, the Tooltip hides after a click in the host component.
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
* @default true
* @see http://react-toolbox.com/#/components/tooltip
*/
tooltipHideOnClick?: boolean,
}
/**
* Properties of components that have values that can be changed (T is the type of the value)
*/
export interface Changeable<T> {
/**
* Callback called when the picker value is changed.
* @param v Type of the value
*/
onChange?: (v: T) => void
}
export interface TimePickerProps extends Props, Changeable<Date> {
/**
* Format to display the clock. It can be 24hr or ampm.
* @default 24hr
*/
format?: string,
/**
* Datetime object with currrently selected time
*/
value?: Date,
}
export default class TimePicker extends React.Component<TimePickerProps, {}> {
render(): React.DOMElement<any, any>;
}

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

@ -0,0 +1,10 @@
import * as React from 'react';
export class TooltipComponent<P, S> extends React.Component<P, S> {
getDecoratedComponentInstance(): React.Component<P, S>;
}
export interface TooltipComponentClass<P> extends React.ComponentClass<P> {
new (props?: P, context?: any): TooltipComponent<P, any>;
}
export default function Tooltip<P>(componentClass: React.ComponentClass<P>): TooltipComponentClass<P>;

8
package.json
View File

@ -95,7 +95,7 @@
},
"scripts": {
"babel": "babel ./components --out-dir ./lib",
"build": "cross-env NODE_ENV=production npm run babel && npm run sass",
"build": "cross-env NODE_ENV=production npm run babel && npm run sass && npm run tsd",
"clean": "rimraf ./lib",
"lint": "npm run lint:js && npm run lint:scss",
"lint:js": "eslint ./ --ext .js",
@ -104,7 +104,8 @@
"prebuild": "npm run clean",
"prepublish": "npm run build",
"release": "bumped release",
"sass": "cpx './components/**/*.scss' ./lib",
"sass": "cpx ./components/**/*.scss ./lib",
"tsd": "cpx ./components/**/*.d.ts ./lib",
"start": "cross-env NODE_ENV=development UV_THREADPOOL_SIZE=100 node ./server",
"test": "cross-env NODE_ENV=test karma start",
"test:watch": "cross-env NODE_ENV=test karma start --no-single-run"
@ -116,6 +117,5 @@
"react": "^0.14 || ^15.0.1",
"react-addons-css-transition-group": "^0.14.0 || ^15.0.1",
"react-dom": "^0.14.0 || ^15.0.1"
},
"typings": "./react-toolbox.d.ts"
}
}

1337
react-toolbox.d.ts vendored
View File

File diff suppressed because it is too large Load Diff