From b8feb9ab38e135842eb7d836148d48340de9cd99 Mon Sep 17 00:00:00 2001 From: Robert Parker Date: Wed, 27 Apr 2016 12:47:39 -0700 Subject: [PATCH] Update Typescript definition to 0.16.2, added , , and ActivableRendererFactory definitions, misc. tweaks and fixes. --- react-toolbox.d.ts | 204 ++++++++++++++++++++++++++++++++------------- 1 file changed, 148 insertions(+), 56 deletions(-) diff --git a/react-toolbox.d.ts b/react-toolbox.d.ts index be6d3e67..458775b5 100644 --- a/react-toolbox.d.ts +++ b/react-toolbox.d.ts @@ -1,7 +1,8 @@ -// Type definitions for react-toolbox 0.14.1 +// Type definitions for react-toolbox 0.16.2 // Project: http://react-toolbox.com/ // Definitions by: @xogeny (Michael M. Tiller), @hsrobflavorus (Robert Parker) /* CHANGES + * 04/27/2016: Updates for 0.16.2, added , , 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!). @@ -31,6 +32,7 @@ declare namespace __RT { * Sets a CSS class on the component. */ className?: string, + id?: string; /** * A key used to uniquely identify the element within an Array */ @@ -68,10 +70,26 @@ declare namespace __RT { * 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, } // Interface for components with icons @@ -79,7 +97,7 @@ declare namespace __RT { /** * Value of the icon (See icon component). */ - icon?: string | __React.ReactElement | __React.ReactHTMLElement, + icon?: string | __React.ReactElement | __React.ReactHTMLElement, } export interface Conditional { @@ -137,11 +155,11 @@ declare namespace __RT { * You should give the content with children elements. */ class AppBar extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } export interface AvatarProps extends Props, Iconic { children?: any, - image?: string | __React.ReactElement | __React.ReactHTMLElement | __React.ClassicComponent, + image?: string | __React.ReactElement | __React.ReactHTMLElement | __React.ClassicComponent, title?: string | boolean, } /** @@ -151,7 +169,7 @@ declare namespace __RT { * When used with a specific logo, avatars can also be used to represent brand. */ class Avatar extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } interface AutocompleteProps extends Props, Conditional, Changeable> { /** @@ -168,7 +186,7 @@ declare namespace __RT { */ multiple?: boolean, /** - * Object of key/values or array representing all items suggested. + * Object of key/values or array representing all items suggested. */ source: Object | Array, /** @@ -177,7 +195,7 @@ declare namespace __RT { */ type?: string, /** - * Value or array of values currently selected component.Current value of the input element. + * Value or array of values currently selected component.Current value of the input element. */ value?: string | Array, } @@ -187,7 +205,7 @@ declare namespace __RT { * The opening direction is determined at opening time depending on the current position. */ class Autocomplete extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } interface ButtonProps extends Props, Clickable, Conditional, Iconic { /** @@ -244,10 +262,10 @@ declare namespace __RT { * It consists of text, an image, or both, designed in accordance with your app’s color theme. */ class Button extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } class IconButton extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } interface CardProps extends Props, Clickable { /** @@ -284,10 +302,10 @@ declare namespace __RT { * 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; + render(): React.DOMElement; } export interface CardTitleProps extends Props { - avatar?: string | __React.ReactElement | __React.ReactHTMLElement | __React.ClassicComponent, + avatar?: string | __React.ReactElement | __React.ReactHTMLElement | __React.ClassicComponent, /** * Children to pass through the component. */ @@ -306,7 +324,7 @@ declare namespace __RT { * This component can also display an avatar next to the title content. */ export class CardTitle extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } export interface CardMediaProps extends Props { /** @@ -330,14 +348,14 @@ declare namespace __RT { /** * Can be used instead of children. Accepts an element or a URL string. */ - image?: string | __React.ReactElement | __React.ReactHTMLElement | __React.ClassicComponent, + 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; + render(): React.DOMElement; } export interface CardTextProps extends Props { /** @@ -350,7 +368,7 @@ declare namespace __RT { * Good for small descriptions or other supplementary text. */ export class CardText extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } export interface CardActionsProps extends Props { /** @@ -363,14 +381,14 @@ declare namespace __RT { * 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; + render(): React.DOMElement; } export interface CheckboxProps extends Props, Changeable, Conditional { /** * Value for the checkbox, can be true or false. * @default false */ - checked: boolean, + checked?: boolean, /** * Text label to attach next to the checkbox element. */ @@ -389,7 +407,31 @@ declare namespace __RT { onFocus?: Function, } export class Checkbox extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; + } + + 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. + */ + class Chip extends React.Component { + render(): React.ReactElement; } export interface DatePickerProps extends Props, Changeable { /** @@ -410,7 +452,7 @@ declare namespace __RT { value?: Date, } export class DatePicker extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } export interface DialogProps extends Props, Modal { /** @@ -429,7 +471,7 @@ declare namespace __RT { type?: string, } export class Dialog extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } export interface DrawerProps extends Props, Modal { /** @@ -439,7 +481,7 @@ declare namespace __RT { type?: string } export class Drawer extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } export interface DropdownProps extends Props, Changeable, Conditional { @@ -465,14 +507,14 @@ declare namespace __RT { value: string, } class Dropdown extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } interface FontIconProps extends Props { value: string } class FontIcon extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } interface InputProps extends Props, Conditional, Changeable, Iconic { @@ -534,7 +576,7 @@ declare namespace __RT { value?: string, } class Input extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } interface LinkProps extends React.Props, Iconic { @@ -549,7 +591,7 @@ declare namespace __RT { count?: number, } class Link extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } interface ListProps extends Props { @@ -565,7 +607,7 @@ declare namespace __RT { selectable?: boolean, } class List extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } interface ListItemProps extends Props, Conditional, Clickable { /** @@ -576,6 +618,14 @@ declare namespace __RT { * 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. */ @@ -584,6 +634,10 @@ declare namespace __RT { * 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. */ @@ -598,9 +652,13 @@ declare namespace __RT { * @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; } class ListItem extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } interface ListCheckboxProps extends Props, Conditional, Changeable { /** @@ -630,7 +688,7 @@ declare namespace __RT { onFocus?: Function, } class ListCheckbox extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } export interface ListSubHeaderProps extends Props { /** @@ -639,7 +697,7 @@ declare namespace __RT { caption: string; } class ListSubHeader extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } interface ListDividerProps extends Props { /** @@ -648,7 +706,7 @@ declare namespace __RT { inset: boolean; } class ListDivider extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } interface MenuProps extends Props { /** @@ -690,7 +748,7 @@ declare namespace __RT { value?: boolean, } class Menu extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } interface IconMenuProps extends Props, Iconic { /** @@ -729,7 +787,7 @@ declare namespace __RT { selectable?: boolean, } class IconMenu extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } interface MenuItemProps extends Props, Conditional, Iconic { /** @@ -746,10 +804,10 @@ declare namespace __RT { selected?: boolean, } class MenuItem extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } class MenuDivider extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } interface NavigationProps extends Props { /** @@ -766,8 +824,24 @@ declare namespace __RT { type?: string, } class Navigation extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } + + interface OverlayProps extends Props { + active?: boolean; + children?: any; + /** + * Sets a CSS class on the component. + */ + className?: string; + invisible?: boolean; + onClick?: Function; + onEscKeyDown?: Function + } + class Overlay extends React.Component { + render(): React.DOMElement; + } + interface ProgressBarProps extends Props { /** * Value of a secondary progress bar useful for buffering. @@ -800,7 +874,7 @@ declare namespace __RT { value?: number, } class ProgressBar extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } interface RadioGroupProps extends Props, Conditional, Changeable { /** @@ -813,7 +887,7 @@ declare namespace __RT { value?: any, } class RadioGroup extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } interface RadioButtonProps extends Props, Conditional { /** @@ -842,7 +916,7 @@ declare namespace __RT { value: any, } class RadioButton extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } interface SliderProps extends Props { /** @@ -879,7 +953,7 @@ declare namespace __RT { value: number, } class Slider extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } interface SnackbarProps extends Props, Modal, Iconic { /** @@ -908,7 +982,7 @@ declare namespace __RT { type?: string, } class Snackbar extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } interface SwitchProps extends Props, Conditional { /** @@ -918,7 +992,7 @@ declare namespace __RT { /** * If true, component will be disabled. */ - disabled: boolean, + disabled?: boolean, /** * The text string to use for the floating label element. */ @@ -941,7 +1015,7 @@ declare namespace __RT { onFocus?: Function, } class Switch extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } interface TableProps extends Props { /** @@ -970,7 +1044,7 @@ declare namespace __RT { source?: Array<{ [key: string]: any }>, } class Table extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } interface TabsProps extends Props, Changeable { /** @@ -979,7 +1053,7 @@ declare namespace __RT { index: number, } class Tabs extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } interface TabProps extends Props, Conditional { /** @@ -1002,7 +1076,7 @@ declare namespace __RT { onActive?: Function, } class Tab extends React.Component { - render(): React.DOMElement; + render(): React.DOMElement; } interface TimePickerProps extends Props, Changeable { /** @@ -1016,18 +1090,22 @@ declare namespace __RT { value?: Date, } class TimePicker extends React.Component { - render(): React.DOMElement; - } - /*interface TooltipProps extends Props { - /** - * The text string to use for the tooltip. - * - label: string, + render(): React.DOMElement; } - class Tooltip extends React.Component { - render(): React.DOMElement; - }*/ + //#region HOC + interface ActivableRendererOptions { + /** + * @default 500 + */ + delay?: number; + } + interface ActivableRendererProps { + active: boolean; + children?: any; + delay?: number + } + function ActivableRendererFactory

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

) => React.ComponentClass

class TooltipComponent extends React.Component { getDecoratedComponentInstance(): React.Component; @@ -1038,6 +1116,12 @@ declare namespace __RT { } function Tooltip

(componentClass: React.ComponentClass

): TooltipComponentClass

; + //#endregion +} + +declare var ActivableRendererFactory: typeof __RT.ActivableRendererFactory; +declare module 'react-toolbox/lib/hoc/ActivableRenderer' { + export default ActivableRendererFactory; } declare var AppBar: typeof __RT.AppBar; @@ -1138,6 +1222,10 @@ declare var Navigation: typeof __RT.Navigation; declare module 'react-toolbox/lib/navigation' { export default Navigation; } +declare var Overlay: typeof __RT.Overlay; +declare module 'react-toolbox/lib/overlay' { + export default Overlay; +} declare var ProgressBar: typeof __RT.ProgressBar; declare module 'react-toolbox/lib/progress_bar' { export default ProgressBar; @@ -1182,6 +1270,7 @@ declare module 'react-toolbox/lib/tooltip' { export default Tooltip; } declare module 'react-toolbox' { + 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'; @@ -1198,6 +1287,7 @@ declare module 'react-toolbox' { 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'; @@ -1208,6 +1298,7 @@ declare module 'react-toolbox' { import Tooltip from 'react-toolbox/lib/tooltip'; export { + ActivableRendererFactory, AppBar, Autocomplete, Avatar, @@ -1224,6 +1315,7 @@ declare module 'react-toolbox' { List, ListItem, ListCheckbox, ListSubHeader, ListDivider, Menu, IconMenu, MenuItem, MenuDivider, Navigation, + Overlay, ProgressBar, RadioGroup, RadioButton, Slider,