Browse Source

Restructure typescript definitions (#1114)

* ts: restructure typescript definitions

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

* fix ListItem typescript definition

* add themr identifiers definitions

* simplify React.ReactNode properties

* React.ReactNode | string => React.ReactNode is already indirectly type aliased to string
old
Panjie Setiawan Wicaksono 6 years ago
committed by Javi Velasco
parent
commit
f365724ee8
  1. 83
      components/app_bar/AppBar.d.ts
  2. 85
      components/app_bar/index.d.ts
  3. 135
      components/autocomplete/Autocomplete.d.ts
  4. 137
      components/autocomplete/index.d.ts
  5. 53
      components/avatar/Avatar.d.ts
  6. 55
      components/avatar/index.d.ts
  7. 42
      components/button/BrowseButton.d.ts
  8. 42
      components/button/Button.d.ts
  9. 51
      components/button/IconButton.d.ts
  10. 106
      components/button/base.d.ts
  11. 235
      components/button/index.d.ts
  12. 37
      components/card/Card.d.ts
  13. 27
      components/card/CardActions.d.ts
  14. 59
      components/card/CardMedia.d.ts
  15. 27
      components/card/CardText.d.ts
  16. 51
      components/card/CardTitle.d.ts
  17. 192
      components/card/index.d.ts
  18. 78
      components/checkbox/Checkbox.d.ts
  19. 79
      components/checkbox/index.d.ts
  20. 53
      components/chip/Chip.d.ts
  21. 54
      components/chip/index.d.ts
  22. 221
      components/date_picker/DatePicker.d.ts
  23. 222
      components/date_picker/index.d.ts
  24. 94
      components/dialog/Dialog.d.ts
  25. 95
      components/dialog/index.d.ts
  26. 68
      components/drawer/Drawer.d.ts
  27. 55
      components/drawer/index.d.ts
  28. 124
      components/dropdown/Dropdown.d.ts
  29. 125
      components/dropdown/index.d.ts
  30. 21
      components/font_icon/FontIcon.d.ts
  31. 22
      components/font_icon/index.d.ts
  32. 9
      components/hoc/ActivableRenderer.d.ts
  33. 9
      components/hoc/Portal.d.ts
  34. 28
      components/identifiers.d.ts
  35. 6
      components/index.d.ts
  36. 141
      components/input/Input.d.ts
  37. 142
      components/input/index.d.ts
  38. 64
      components/layout/Layout.d.ts
  39. 45
      components/layout/NavDrawer.d.ts
  40. 26
      components/layout/Panel.d.ts
  41. 41
      components/layout/Sidebar.d.ts
  42. 210
      components/layout/index.d.ts
  43. 57
      components/link/Link.d.ts
  44. 58
      components/link/index.d.ts
  45. 32
      components/list/List.d.ts
  46. 64
      components/list/ListCheckbox.d.ts
  47. 26
      components/list/ListDivider.d.ts
  48. 39
      components/list/ListItem.d.ts
  49. 22
      components/list/ListItemAction.d.ts
  50. 31
      components/list/ListItemActions.d.ts
  51. 46
      components/list/ListItemContent.d.ts
  52. 78
      components/list/ListItemLayout.d.ts
  53. 35
      components/list/ListItemText.d.ts
  54. 22
      components/list/ListSubHeader.d.ts
  55. 381
      components/list/index.d.ts
  56. 69
      components/menu/IconMenu.d.ts
  57. 101
      components/menu/Menu.d.ts
  58. 20
      components/menu/MenuDivider.d.ts
  59. 66
      components/menu/MenuItem.d.ts
  60. 246
      components/menu/index.d.ts
  61. 49
      components/navigation/Navigation.d.ts
  62. 50
      components/navigation/index.d.ts
  63. 57
      components/overlay/Overlay.d.ts
  64. 58
      components/overlay/index.d.ts
  65. 88
      components/progress_bar/ProgressBar.d.ts
  66. 89
      components/progress_bar/index.d.ts
  67. 69
      components/radio/RadioButton.d.ts
  68. 28
      components/radio/RadioGroup.d.ts
  69. 34
      components/radio/base.d.ts
  70. 132
      components/radio/index.d.ts
  71. 2
      components/ripple/index.d.ts
  72. 112
      components/slider/Slider.d.ts
  73. 113
      components/slider/index.d.ts
  74. 77
      components/snackbar/Snackbar.d.ts
  75. 78
      components/snackbar/index.d.ts
  76. 78
      components/switch/Switch.d.ts
  77. 79
      components/switch/index.d.ts
  78. 38
      components/table/Table.d.ts
  79. 69
      components/table/TableCell.d.ts
  80. 42
      components/table/TableHead.d.ts
  81. 44
      components/table/TableRow.d.ts
  82. 9
      components/table/index.d.ts
  83. 74
      components/tabs/Tab.d.ts
  84. 36
      components/tabs/TabContent.d.ts
  85. 86
      components/tabs/Tabs.d.ts
  86. 187
      components/tabs/index.d.ts
  87. 180
      components/time_picker/TimePicker.d.ts
  88. 181
      components/time_picker/index.d.ts
  89. 110
      index.d.ts

83
components/app_bar/AppBar.d.ts

@ -0,0 +1,83 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface AppBarTheme {
/**
* Used for the component root element.
*/
appBar?: string;
/**
* Added to the root element when the app bar is fixed.
*/
fixed?: string;
/**
* Added to the root element when the app bar is flat.
*/
flat?: string;
/**
* Used as the app bar title.
*/
title?: string;
/**
* Added to the left icon app bar element.
*/
leftIcon?: string;
/**
* Added to the right icon app bar element.
*/
rightIcon?: string;
/**
* Added to the root element when the app bar is hidden during scroll.
*/
scrollHide?: string;
}
export interface AppBarProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Determine if the bar should have position fixed or relative.
* @default false
*/
fixed?: boolean;
/**
* If true, the AppBar shows a shadow.
* @default false
*/
flat?: boolean;
/**
* If it exists it is used as the AppBar title
*/
title?: string;
/**
* If it exists it is used as the AppBar left icon
*/
leftIcon?: React.ReactNode;
/**
* Called when the left icon is clicked
*/
onLeftIconClick?: Function;
/**
* If it exists it is used as the AppBar right icon
*/
rightIcon?: React.ReactNode;
/**
* Called when the righticon is clicked
*/
onRightIconClick?: Function;
/**
* Whether AppBar should be hidden during scroll.
* @default false
*/
scrollHide?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: AppBarTheme;
}
export class AppBar extends React.Component<AppBarProps, {}> { }
export default AppBar;

85
components/app_bar/index.d.ts

@ -1,83 +1,4 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface AppBarTheme {
/**
* Used for the component root element.
*/
appBar?: string;
/**
* Added to the root element when the app bar is fixed.
*/
fixed?: string;
/**
* Added to the root element when the app bar is flat.
*/
flat?: string;
/**
* Used as the app bar title.
*/
title?: string;
/**
* Added to the left icon app bar element.
*/
leftIcon?: string;
/**
* Added to the right icon app bar element.
*/
rightIcon?: string;
/**
* Added to the root element when the app bar is hidden during scroll.
*/
scrollHide?: string;
}
export interface AppBarProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Determine if the bar should have position fixed or relative.
* @default false
*/
fixed?: boolean;
/**
* If true, the AppBar shows a shadow.
* @default false
*/
flat?: boolean;
/**
* If it exists it is used as the AppBar title
*/
title?: string;
/**
* If it exists it is used as the AppBar left icon
*/
leftIcon?: string | React.ReactNode;
/**
* Called when the left icon is clicked
*/
onLeftIconClick?: Function;
/**
* If it exists it is used as the AppBar right icon
*/
rightIcon?: string | React.ReactNode;
/**
* Called when the righticon is clicked
*/
onRightIconClick?: Function;
/**
* Whether AppBar should be hidden during scroll.
* @default false
*/
scrollHide?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: AppBarTheme;
}
export class AppBar extends React.Component<AppBarProps, {}> { }
import { AppBar } from './AppBar';
export { AppBarProps, AppBarTheme } from './AppBar';
export { AppBar };
export default AppBar;

135
components/autocomplete/Autocomplete.d.ts

@ -0,0 +1,135 @@
import * as React from "react";
import ReactToolbox from "../index";
import { InputProps, InputTheme } from "../input/Input";
export interface AutocompleteTheme {
/**
* Used for a suggestion when it's active.
*/
active?: string;
/**
* Used for the root element.
*/
autocomplete?: string;
/**
* Used when the input is focused.
*/
focus?: string;
/**
* Used to style the Input component.
*/
input?: string;
/**
* Used to style each suggestion.
*/
suggestion?: string;
/**
* Used to style the suggestions container.
*/
suggestions?: string;
/**
* Used for the suggestions when it's opening to the top.
*/
up?: string;
/**
* Classname used for a single value.
*/
value?: string;
/**
* Classname used for the values container.
*/
values?: string;
}
export interface AutocompleteProps extends InputProps {
/**
* Determines if user can create a new option with the current typed value.
* @default false
*/
allowCreate?: boolean;
/**
* Determines the opening direction. It can be auto, up or down.
* @default auto
*/
direction?: "auto" | "up" | "down";
/**
* If true, component will be disabled.
* @default false
*/
disabled?: boolean;
/**
* Sets the error string for the internal input element.
* @default false
*/
error?: React.ReactNode;
/**
* Whether component should keep focus after value change.
* @default false
*/
keepFocusOnChange?: boolean;
/**
* The text string to use for the floating label element.
*/
label?: React.ReactNode;
/**
* If true, component can hold multiple values.
* @default true
*/
multiple?: boolean;
/**
* Callback function that is fired when component is blurred.
*/
onBlur?: Function;
/**
* Callback function that is fired when the components's value changes.
*/
onChange?: Function;
/**
* Callback function that is fired when component is focused.
*/
onFocus?: Function;
/**
* Callback function that is fired when the components's query value changes.
*/
onQueryChange?: Function;
/**
* Determines if the selected list is shown above or below input. It can be above or below.
* @default above
*/
selectedPosition?: "above" | "below" | "none";
/**
* Determines if the selected list is shown if the `value` keys don't exist in the source. Only works if passing the `value` prop as an Object.
* @default false
*/
showSelectedWhenNotInSource?: boolean;
/**
* If true, the list of suggestions will not be filtered when a value is selected.
* @default false
*/
showSuggestionsWhenValueIsSet?: boolean;
/**
* Object of key/values or array representing all items suggested.
*/
source?: any;
/**
* Determines how suggestions are supplied.
* @default start
*/
suggestionMatch?: "start" | "anywhere" | "word";
/**
* Classnames object defining the component style.
*/
theme?: AutocompleteTheme & InputTheme;
/**
* Value or array of values currently selected component.
*/
value?: any;
/**
* Additional properties passed to inner Input component.
*/
[key: string]: any;
}
export class Autocomplete extends React.Component<AutocompleteProps, {}> { }
export default Autocomplete;

137
components/autocomplete/index.d.ts

@ -1,135 +1,4 @@
import * as React from "react";
import ReactToolbox from "../index";
import { InputTheme } from "../input"
export interface AutocompleteTheme {
/**
* Used for a suggestion when it's active.
*/
active?: string;
/**
* Used for the root element.
*/
autocomplete?: string;
/**
* Used when the input is focused.
*/
focus?: string;
/**
* Used to style the Input component.
*/
input?: string;
/**
* Used to style each suggestion.
*/
suggestion?: string;
/**
* Used to style the suggestions container.
*/
suggestions?: string;
/**
* Used for the suggestions when it's opening to the top.
*/
up?: string;
/**
* Classname used for a single value.
*/
value?: string;
/**
* Classname used for the values container.
*/
values?: string;
}
export interface AutocompleteProps extends ReactToolbox.Props {
/**
* Determines if user can create a new option with the current typed value.
* @default false
*/
allowCreate?: boolean;
/**
* Determines the opening direction. It can be auto, up or down.
* @default auto
*/
direction?: "auto" | "up" | "down";
/**
* If true, component will be disabled.
* @default false
*/
disabled?: boolean;
/**
* Sets the error string for the internal input element.
* @default false
*/
error?: string | React.ReactNode;
/**
* Whether component should keep focus after value change.
* @default false
*/
keepFocusOnChange?: boolean;
/**
* The text string to use for the floating label element.
*/
label?: string | React.ReactNode;
/**
* If true, component can hold multiple values.
* @default true
*/
multiple?: boolean;
/**
* Callback function that is fired when component is blurred.
*/
onBlur?: Function;
/**
* Callback function that is fired when the components's value changes.
*/
onChange?: Function;
/**
* Callback function that is fired when component is focused.
*/
onFocus?: Function;
/**
* Callback function that is fired when the components's query value changes.
*/
onQueryChange?: Function;
/**
* Determines if the selected list is shown above or below input. It can be above or below.
* @default above
*/
selectedPosition?: "above" | "below" | "none";
/**
* Determines if the selected list is shown if the `value` keys don't exist in the source. Only works if passing the `value` prop as an Object.
* @default false
*/
showSelectedWhenNotInSource?: boolean;
/**
* If true, the list of suggestions will not be filtered when a value is selected.
* @default false
*/
showSuggestionsWhenValueIsSet?: boolean;
/**
* Object of key/values or array representing all items suggested.
*/
source?: any;
/**
* Determines how suggestions are supplied.
* @default start
*/
suggestionMatch?: "start" | "anywhere" | "word";
/**
* Classnames object defining the component style.
*/
theme?: AutocompleteTheme & InputTheme;
/**
* Value or array of values currently selected component.
*/
value?: any;
/**
* Additional properties passed to inner Input component.
*/
[key: string]: any;
}
export class Autocomplete extends React.Component<AutocompleteProps, {}> { }
import { Autocomplete } from './Autocomplete';
export { AutocompleteProps, AutocompleteTheme } from './Autocomplete';
export { Autocomplete };
export default Autocomplete;

53
components/avatar/Avatar.d.ts

@ -0,0 +1,53 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface AvatarTheme {
/**
* Used for the root class of the element.
*/
avatar?: string;
/**
* Added to the root element when the component has image.
*/
image?: string;
/**
* Used for the root element if the component shows the letter.
*/
letter?: string;
}
export interface AvatarProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Set to true if your image is not squared so it will be used as a cover for the element.
* @default false
*/
cover?: boolean;
/**
* A key to identify an Icon from Material Design Icons or a custom Icon Element.
*/
icon?: React.ReactNode;
/**
* An image source or an image element.
*/
image?: React.ReactNode;
/**
* Classnames object defining the component style.
*/
theme?: AvatarTheme;
/**
* A title for the image. If no image is provided, the first letter will be displayed as the avatar.
*/
title?: string;
/**
* Additional properties for component root element.
*/
[key: string]: any;
}
export class Avatar extends React.Component<AvatarProps, {}> { }
export default Avatar;

55
components/avatar/index.d.ts

@ -1,53 +1,4 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface AvatarTheme {
/**
* Used for the root class of the element.
*/
avatar?: string;
/**
* Added to the root element when the component has image.
*/
image?: string;
/**
* Used for the root element if the component shows the letter.
*/
letter?: string;
}
export interface AvatarProps extends ReactToolbox.Props {
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* Set to true if your image is not squared so it will be used as a cover for the element.
* @default false
*/
cover?: boolean;
/**
* A key to identify an Icon from Material Design Icons or a custom Icon Element.
*/
icon?: React.ReactNode | string;
/**
* An image source or an image element.
*/
image?: React.ReactNode | string;
/**
* Classnames object defining the component style.
*/
theme?: AvatarTheme;
/**
* A title for the image. If no image is provided, the first letter will be displayed as the avatar.
*/
title?: string;
/**
* Additional properties for component root element.
*/
[key: string]: any;
}
export class Avatar extends React.Component<AvatarProps, {}> { }
import { Avatar } from './Avatar';
export { AvatarProps, AvatarTheme } from './Avatar';
export { Avatar };
export default Avatar;

42
components/button/BrowseButton.d.ts

@ -0,0 +1,42 @@
import * as React from "react";
import ReactToolbox from "../index";
import { ButtonBaseProps, ButtonTheme } from './base';
export interface BrowseButtonTheme extends ButtonTheme { }
export interface BrowseButtonProps extends ButtonBaseProps {
/**
* If true, the button will have a flat look.
* @default false
*/
flat?: boolean;
/**
* If true, the button will have a floating look.
* @default false
*/
floating?: boolean;
/**
* Creates a link for the button.
*/
href?: string;
/**
* The text string to use for the name of the button.
*/
label?: string;
/**
* To be used with floating button. If true, the button will be smaller.
* @default false
*/
mini?: boolean;
/**
* If true, the button will have a raised look.
* @default false
*/
raised?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: BrowseButtonTheme;
}
export class BrowseButton extends React.Component<BrowseButtonProps, {}> { }

42
components/button/Button.d.ts

@ -0,0 +1,42 @@
import * as React from "react";
import ReactToolbox from "../index";
import { ButtonBaseProps, ButtonTheme } from './base';
export interface ButtonProps extends ButtonBaseProps {
/**
* If true, the button will have a flat look.
* @default false
*/
flat?: boolean;
/**
* If true, the button will have a floating look.
* @default false
*/
floating?: boolean;
/**
* Creates a link for the button.
*/
href?: string;
/**
* The text string to use for the name of the button.
*/
label?: string;
/**
* To be used with floating button. If true, the button will be smaller.
* @default false
*/
mini?: boolean;
/**
* If true, the button will have a raised look.
* @default false
*/
raised?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: ButtonTheme;
}
export class Button extends React.Component<ButtonProps, {}> { }
export default Button;

51
components/button/IconButton.d.ts

@ -0,0 +1,51 @@
import * as React from "react";
import ReactToolbox from "../index";
import { ButtonBaseProps } from './base';
export interface IconButtonTheme {
/**
* Used for the root in case button is accent.
*/
accent?: string;
/**
* Used for the root element in any button.
*/
button?: string;
/**
* For the icon inside a button.
*/
icon?: string;
/**
* Used when colors are inverted.
*/
inverse?: string;
/**
* Used for neutral colored buttons.
*/
neutral?: string;
/**
* Used for primary buttons when button is primary.
*/
primary?: string;
/**
* Used for the ripple element.
*/
rippleWrapper?: string;
/**
* Used for toggle buttons in the root element.
*/
toggle?: string;
}
export interface IconButtonProps extends ButtonBaseProps {
/**
* Creates a link for the button.
*/
href?: string;
/**
* Classnames object defining the component style.
*/
theme?: IconButtonTheme;
}
export class IconButton extends React.Component<IconButtonProps, {}> { }

106
components/button/base.d.ts

@ -0,0 +1,106 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface ButtonTheme {
/**
* Used for the root in case button is accent.
*/
accent?: string;
/**
* Used for the root element in any button.
*/
button?: string;
/**
* Used when the button is flat for the root element.
*/
flat?: string;
/**
* Used when the button is floating for the root element.
*/
floating?: string;
/**
* For the icon inside a button.
*/
icon?: string;
/**
* Used when colors are inverted.
*/
inverse?: string;
/**
* Used for mini floating buttons.
*/
mini?: string;
/**
* Used for neutral colored buttons.
*/
neutral?: string;
/**
* Used for primary buttons when button is primary.
*/
primary?: string;
/**
* Used when the button is raised for root element.
*/
raised?: string;
/**
* Used for the ripple element.
*/
rippleWrapper?: string;
/**
* Used for toggle buttons in the root element.
*/
toggle?: string;
}
export interface ButtonBaseProps extends ReactToolbox.Props {
/**
* Indicates if the button should have accent color.
* @default false
*/
accent?: boolean;
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* If true, component will be disabled.
* @default false
*/
disabled?: boolean;
/**
* Value of the icon (See Font Icon Component).
*/
icon?: React.ReactNode;
/**
* If true, the neutral colors are inverted. Useful to put a button over a dark background.
*/
inverse?: boolean;
/**
* Set it to false if you don't want the neutral styles to be included.
* @default true
*/
neutral?: boolean;
/**
* Fires after the mouse leaves the Component.
*/
onMouseLeave?: Function;
/**
* Fires after the mouse is released from the Component.
*/
onMouseUp?: Function;
/**
* Indicates if the button should have primary color.
* @default false
*/
primary?: boolean;
/**
* If true, component will have a ripple effect on click.
* @default true
*/
ripple?: boolean;
/**
* Component root container type.
* @default button
*/
type?: string;
}

235
components/button/index.d.ts

@ -1,230 +1,9 @@
import * as React from "react";
import ReactToolbox from "../index";
import { Button } from './Button';
export interface ButtonTheme {
/**
* Used for the root in case button is accent.
*/
accent?: string;
/**
* Used for the root element in any button.
*/
button?: string;
/**
* Used when the button is flat for the root element.
*/
flat?: string;
/**
* Used when the button is floating for the root element.
*/
floating?: string;
/**
* For the icon inside a button.
*/
icon?: string;
/**
* Used when colors are inverted.
*/
inverse?: string;
/**
* Used for mini floating buttons.
*/
mini?: string;
/**
* Used for neutral colored buttons.
*/
neutral?: string;
/**
* Used for primary buttons when button is primary.
*/
primary?: string;
/**
* Used when the button is raised for root element.
*/
raised?: string;
/**
* Used for the ripple element.
*/
rippleWrapper?: string;
/**
* Used for toggle buttons in the root element.
*/
toggle?: string;
}
export { ButtonTheme } from './base';
export { ButtonProps } from './Button';
export { IconButton, IconButtonProps, IconButtonTheme } from './IconButton';
export { BrowseButton, BrowseButtonProps, BrowseButtonTheme } from './BrowseButton';
interface ButtonBaseProps extends ReactToolbox.Props {
/**
* Indicates if the button should have accent color.
* @default false
*/
accent?: boolean;
/**
* Children to pass through the component.
*/
children?: React.ReactNode;
/**
* If true, component will be disabled.
* @default false
*/
disabled?: boolean;
/**
* Value of the icon (See Font Icon Component).
*/
icon?: React.ReactNode | string;
/**
* If true, the neutral colors are inverted. Useful to put a button over a dark background.
*/
inverse?: boolean;
/**
* Set it to false if you don't want the neutral styles to be included.
* @default true
*/
neutral?: boolean;
/**
* Fires after the mouse leaves the Component.
*/
onMouseLeave?: Function;
/**
* Fires after the mouse is released from the Component.
*/
onMouseUp?: Function;
/**
* Indicates if the button should have primary color.
* @default false
*/
primary?: boolean;
/**
* If true, component will have a ripple effect on click.
* @default true
*/
ripple?: boolean;
/**
* Component root container type.
* @default button
*/
type?: string;
}
export interface ButtonProps extends ButtonBaseProps {
/**
* If true, the button will have a flat look.
* @default false
*/
flat?: boolean;
/**
* If true, the button will have a floating look.
* @default false
*/
floating?: boolean;
/**
* Creates a link for the button.
*/
href?: string;
/**
* The text string to use for the name of the button.
*/
label?: string;
/**
* To be used with floating button. If true, the button will be smaller.
* @default false
*/
mini?: boolean;
/**
* If true, the button will have a raised look.
* @default false
*/
raised?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: ButtonTheme;
}
export class Button extends React.Component<ButtonProps, {}> { }
export interface IconButtonTheme {
/**
* Used for the root in case button is accent.
*/
accent?: string;
/**
* Used for the root element in any button.
*/
button?: string;
/**
* For the icon inside a button.
*/
icon?: string;
/**
* Used when colors are inverted.
*/
inverse?: string;
/**
* Used for neutral colored buttons.
*/
neutral?: string;
/**
* Used for primary buttons when button is primary.
*/
primary?: string;
/**
* Used for the ripple element.
*/
rippleWrapper?: string;
/**
* Used for toggle buttons in the root element.
*/
toggle?: string;
}
export interface IconButtonProps extends ButtonBaseProps {
/**
* Creates a link for the button.
*/
href?: string;
/**
* Classnames object defining the component style.
*/
theme?: IconButtonTheme;
}
export class IconButton extends React.Component<IconButtonProps, {}> { }
export interface BrowseButtonTheme extends ButtonTheme { }
export interface BrowseButtonProps extends ButtonBaseProps {
/**
* If true, the button will have a flat look.
* @default false
*/
flat?: boolean;
/**
* If true, the button will have a floating look.
* @default false
*/
floating?: boolean;
/**
* Creates a link for the button.
*/
href?: string;
/**
* The text string to use for the name of the button.
*/
label?: string;
/**
* To be used with floating button. If true, the button will be smaller.
* @default false
*/
mini?: boolean;
/**
* If true, the button will have a raised look.
* @default false
*/
raised?: boolean;
/**
* Classnames object defining the component style.
*/
theme?: BrowseButtonTheme;
}
export class BrowseButton extends React.Component<BrowseButtonProps, {}> { }
export { Button };
export default Button;

37
components/card/Card.d.ts

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

27
components/card/CardActions.d.ts

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

59
components/card/CardMedia.d.ts

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

27
components/card/CardText.d.ts

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

51
components/card/CardTitle.d.ts

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

192
components/card/index.d.ts

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

78
components/checkbox/Checkbox.d.ts

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

79
components/checkbox/index.d.ts

@ -1,78 +1,5 @@
import * as React from "react";
import ReactToolbox from "../index";
export interface CheckboxTheme {
/**
* Used as root in the check element.
*/
check?: string;
/**
* Used for the check element when it's checked.
*/
checked?: string;
/**
* Used when the component is disabled.
*/
disabled?: string;
/**
* Used as the root class of the component.
*/
field?: string;
/**
* Used for the input element.
*/
input?: string;
/**
* Used for the ripple component.
*/
ripple?: string;
/**
* Used for the text label.
*/