diff --git a/components/app_bar/index.d.ts b/components/app_bar/index.d.ts new file mode 100644 index 00000000..9e59dce8 --- /dev/null +++ b/components/app_bar/index.d.ts @@ -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 { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/autocomplete/index.d.ts b/components/autocomplete/index.d.ts new file mode 100644 index 00000000..ebfc3866 --- /dev/null +++ b/components/autocomplete/index.d.ts @@ -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 { + /** + * 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> { + /** + * 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, + /** + * 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, +} +/** + * 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 { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/avatar/index.d.ts b/components/avatar/index.d.ts new file mode 100644 index 00000000..474eb0b6 --- /dev/null +++ b/components/avatar/index.d.ts @@ -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 | React.ReactHTMLElement, +} +export interface AvatarProps extends Props, Iconic { + children?: any, + image?: string | React.ReactElement | React.ReactHTMLElement | React.ClassicComponent, + 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 { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/button/index.d.ts b/components/button/index.d.ts new file mode 100644 index 00000000..b712fdc4 --- /dev/null +++ b/components/button/index.d.ts @@ -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 | React.ReactHTMLElement, +} + +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 + */ + 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 { + render(): React.DOMElement; +} + +export class IconButton extends React.Component { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/card/index.d.ts b/components/card/index.d.ts new file mode 100644 index 00000000..3296e456 --- /dev/null +++ b/components/card/index.d.ts @@ -0,0 +1,160 @@ +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 can be clicked + */ +export interface Clickable { + /** + * Callback called when the button is clicked. + */ + onClick?: Function +} +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, + /** + * 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 { + render(): React.DOMElement; +} +export interface CardTitleProps extends Props { + avatar?: string | React.ReactElement | React.ReactHTMLElement | React.ClassicComponent, + /** + * 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 { + render(): React.DOMElement; +} +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 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 | React.ReactHTMLElement | React.ClassicComponent, +} +/** + * 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 { + render(): React.DOMElement; +} +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 { + render(): React.DOMElement; +} +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 { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/checkbox/index.d.ts b/components/checkbox/index.d.ts new file mode 100644 index 00000000..284267d2 --- /dev/null +++ b/components/checkbox/index.d.ts @@ -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 { + /** + * Callback called when the picker value is changed. + * @param v Type of the value + */ + onChange?: (v: T) => void +} + +export interface CheckboxProps extends Props, Changeable, 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 { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/chip/index.d.ts b/components/chip/index.d.ts new file mode 100644 index 00000000..3b982218 --- /dev/null +++ b/components/chip/index.d.ts @@ -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 { + render(): React.ReactElement; +} \ No newline at end of file diff --git a/components/date_picker/index.d.ts b/components/date_picker/index.d.ts new file mode 100644 index 00000000..ac43c6d7 --- /dev/null +++ b/components/date_picker/index.d.ts @@ -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 { + /** + * 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 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 { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/dialog/index.d.ts b/components/dialog/index.d.ts new file mode 100644 index 00000000..8b547b68 --- /dev/null +++ b/components/dialog/index.d.ts @@ -0,0 +1,83 @@ +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 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, + /** + * 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 { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/drawer/index.d.ts b/components/drawer/index.d.ts new file mode 100644 index 00000000..3bcf15f2 --- /dev/null +++ b/components/drawer/index.d.ts @@ -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 { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/dropdown/index.d.ts b/components/dropdown/index.d.ts new file mode 100644 index 00000000..46244038 --- /dev/null +++ b/components/dropdown/index.d.ts @@ -0,0 +1,79 @@ +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 { + /** + * Callback called when the picker value is changed. + * @param v Type of the value + */ + onChange?: (v: T) => void +} +export interface DropdownProps extends Props, Changeable, 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>, + /** + * 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 { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/font_icon/index.d.ts b/components/font_icon/index.d.ts new file mode 100644 index 00000000..152fd130 --- /dev/null +++ b/components/font_icon/index.d.ts @@ -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 { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/hoc/ActivableRenderer.d.ts b/components/hoc/ActivableRenderer.d.ts new file mode 100644 index 00000000..ab73e065 --- /dev/null +++ b/components/hoc/ActivableRenderer.d.ts @@ -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

(options?: ActivableRendererOptions): (componentClass: React.ComponentClass

) => React.ComponentClass

\ No newline at end of file diff --git a/components/input/index.d.ts b/components/input/index.d.ts new file mode 100644 index 00000000..780ae6f5 --- /dev/null +++ b/components/input/index.d.ts @@ -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 { + /** + * 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 | __React.ReactHTMLElement, +} + +export interface InputProps extends Props, Conditional, Changeable, 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 { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/link/index.d.ts b/components/link/index.d.ts new file mode 100644 index 00000000..8ee95642 --- /dev/null +++ b/components/link/index.d.ts @@ -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 | __React.ReactHTMLElement, +} +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 { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/list/index.d.ts b/components/list/index.d.ts new file mode 100644 index 00000000..01dfb0f3 --- /dev/null +++ b/components/list/index.d.ts @@ -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 { + /** + * 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 | __React.ReactHTMLElement, +} + +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 { + render(): React.DOMElement; +} +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, + /** + * A list of elements that are placed on the left side of the item and after the avatar attribute. + */ + leftActions?: React.ReactElement[], + /** + * 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[], + /** + * 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 { + render(): React.DOMElement; +} +export interface ListCheckboxProps extends Props, Conditional, Changeable { + /** + * 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 { + render(): React.DOMElement; +} +export export interface ListSubHeaderProps extends Props { + /** + * List header caption. + */ + caption: string; +} +export class ListSubHeader extends React.Component { + render(): React.DOMElement; +} +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 { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/menu/index.d.ts b/components/menu/index.d.ts new file mode 100644 index 00000000..54289548 --- /dev/null +++ b/components/menu/index.d.ts @@ -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 | __React.ReactHTMLElement, +} +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 { + render(): React.DOMElement; +} +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 { + render(): React.DOMElement; +} +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 { + render(): React.DOMElement; +} +export class MenuDivider extends React.Component { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/navigation/index.d.ts b/components/navigation/index.d.ts new file mode 100644 index 00000000..a1a3081b --- /dev/null +++ b/components/navigation/index.d.ts @@ -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, + /** + * Array of objects similar to actions but that will be rendered as component definition. + */ + routes?: Array, + /** + * Type of the navigation, it can be 'vertical' or 'horizontal'. + */ + type?: string, +} +export default class Navigation extends React.Component { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/overlay/index.d.ts b/components/overlay/index.d.ts new file mode 100644 index 00000000..3da68043 --- /dev/null +++ b/components/overlay/index.d.ts @@ -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 { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/progress_bar/index.d.ts b/components/progress_bar/index.d.ts new file mode 100644 index 00000000..fb1494ef --- /dev/null +++ b/components/progress_bar/index.d.ts @@ -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 { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/radio/index.d.ts b/components/radio/index.d.ts new file mode 100644 index 00000000..9a05cfac --- /dev/null +++ b/components/radio/index.d.ts @@ -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 { + /** + * 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 { + /** + * Name for the input element group. + */ + name?: string, + /** + * Default value selected in the radio group. + */ + value?: any, +} +export class RadioGroup extends React.Component { + render(): React.DOMElement; +} +export interface RadioButtonProps extends Props, Conditional { + /** + * If true, the input element will be selected by default. Transferred from the parent. + */ + checked: boolean, + /** + * 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 { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/slider/index.d.ts b/components/slider/index.d.ts new file mode 100644 index 00000000..6e910ba6 --- /dev/null +++ b/components/slider/index.d.ts @@ -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 { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/snackbar/index.d.ts b/components/snackbar/index.d.ts new file mode 100644 index 00000000..7006c231 --- /dev/null +++ b/components/snackbar/index.d.ts @@ -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 | __React.ReactHTMLElement, +} +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 class Snackbar extends React.Component { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/switch/index.d.ts b/components/switch/index.d.ts new file mode 100644 index 00000000..a072f82c --- /dev/null +++ b/components/switch/index.d.ts @@ -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 { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/table/index.d.ts b/components/table/index.d.ts new file mode 100644 index 00000000..e2dc73ff --- /dev/null +++ b/components/table/index.d.ts @@ -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, + /** + * Array of objects representing each item to show. + */ + source?: Array<{ [key: string]: any }>, +} +export default class Table extends React.Component { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/tabs/index.d.ts b/components/tabs/index.d.ts new file mode 100644 index 00000000..39234948 --- /dev/null +++ b/components/tabs/index.d.ts @@ -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 { + /** + * Callback called when the picker value is changed. + * @param v Type of the value + */ + onChange?: (v: T) => void +} +export interface TabsProps extends Props, Changeable { + /** + * Current + */ + index: number, +} +export class Tabs extends React.Component { + render(): React.DOMElement; +} +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 { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/time_picker/index.d.ts b/components/time_picker/index.d.ts new file mode 100644 index 00000000..ee141895 --- /dev/null +++ b/components/time_picker/index.d.ts @@ -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 { + /** + * Callback called when the picker value is changed. + * @param v Type of the value + */ + onChange?: (v: T) => void +} +export interface TimePickerProps extends Props, Changeable { + /** + * 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 { + render(): React.DOMElement; +} \ No newline at end of file diff --git a/components/tooltip/index.d.ts b/components/tooltip/index.d.ts new file mode 100644 index 00000000..867412c2 --- /dev/null +++ b/components/tooltip/index.d.ts @@ -0,0 +1,10 @@ +import * as React from 'react'; +export class TooltipComponent extends React.Component { + getDecoratedComponentInstance(): React.Component; +} + +export interface TooltipComponentClass

extends React.ComponentClass

{ + new (props?: P, context?: any): TooltipComponent; +} + +export default function Tooltip

(componentClass: React.ComponentClass

): TooltipComponentClass

; \ No newline at end of file diff --git a/react-toolbox.d.ts b/index.d.ts similarity index 100% rename from react-toolbox.d.ts rename to index.d.ts diff --git a/package.json b/package.json index b3e06eb9..40301621 100644 --- a/package.json +++ b/package.json @@ -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" + } }