diff --git a/components/app_bar/AppBar.d.ts b/components/app_bar/AppBar.d.ts new file mode 100644 index 00000000..9fc3e680 --- /dev/null +++ b/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 { } + +export default AppBar; diff --git a/components/app_bar/index.d.ts b/components/app_bar/index.d.ts index dcf07b8e..acfe781c 100644 --- a/components/app_bar/index.d.ts +++ b/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 { } - +import { AppBar } from './AppBar'; +export { AppBarProps, AppBarTheme } from './AppBar'; +export { AppBar }; export default AppBar; diff --git a/components/autocomplete/Autocomplete.d.ts b/components/autocomplete/Autocomplete.d.ts new file mode 100644 index 00000000..1a2c861a --- /dev/null +++ b/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 { } + +export default Autocomplete; diff --git a/components/autocomplete/index.d.ts b/components/autocomplete/index.d.ts index 96173afc..3a02c877 100644 --- a/components/autocomplete/index.d.ts +++ b/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 { } - +import { Autocomplete } from './Autocomplete'; +export { AutocompleteProps, AutocompleteTheme } from './Autocomplete'; +export { Autocomplete }; export default Autocomplete; diff --git a/components/avatar/Avatar.d.ts b/components/avatar/Avatar.d.ts new file mode 100644 index 00000000..15c7af04 --- /dev/null +++ b/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 { } + +export default Avatar; diff --git a/components/avatar/index.d.ts b/components/avatar/index.d.ts index 2a427208..9c7db242 100644 --- a/components/avatar/index.d.ts +++ b/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 { } - +import { Avatar } from './Avatar'; +export { AvatarProps, AvatarTheme } from './Avatar'; +export { Avatar }; export default Avatar; diff --git a/components/button/BrowseButton.d.ts b/components/button/BrowseButton.d.ts new file mode 100644 index 00000000..d1d2bb40 --- /dev/null +++ b/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 { } diff --git a/components/button/Button.d.ts b/components/button/Button.d.ts new file mode 100644 index 00000000..22eb2a69 --- /dev/null +++ b/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 { } + +export default Button; diff --git a/components/button/IconButton.d.ts b/components/button/IconButton.d.ts new file mode 100644 index 00000000..9032e543 --- /dev/null +++ b/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 { } diff --git a/components/button/base.d.ts b/components/button/base.d.ts new file mode 100644 index 00000000..bd54431f --- /dev/null +++ b/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; +} diff --git a/components/button/index.d.ts b/components/button/index.d.ts index 62ec7044..f540526b 100644 --- a/components/button/index.d.ts +++ b/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 { } - -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 { } - -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 { } +export { Button }; +export default Button; diff --git a/components/card/Card.d.ts b/components/card/Card.d.ts new file mode 100644 index 00000000..d863a78e --- /dev/null +++ b/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 { } + +export default Card; diff --git a/components/card/CardActions.d.ts b/components/card/CardActions.d.ts new file mode 100644 index 00000000..2e3abb06 --- /dev/null +++ b/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 { } +export default CardActions; diff --git a/components/card/CardMedia.d.ts b/components/card/CardMedia.d.ts new file mode 100644 index 00000000..dbc47c48 --- /dev/null +++ b/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 { } +export default CardMedia; diff --git a/components/card/CardText.d.ts b/components/card/CardText.d.ts new file mode 100644 index 00000000..42e4523f --- /dev/null +++ b/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 { } +export default CardText; diff --git a/components/card/CardTitle.d.ts b/components/card/CardTitle.d.ts new file mode 100644 index 00000000..7da9dd63 --- /dev/null +++ b/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 { } +export default CardTitle; diff --git a/components/card/index.d.ts b/components/card/index.d.ts index 090a5d93..3f8d0ed8 100644 --- a/components/card/index.d.ts +++ b/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 { } - -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 { } - -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 { } - -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 { } - -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 { } +export default Card; diff --git a/components/checkbox/Checkbox.d.ts b/components/checkbox/Checkbox.d.ts new file mode 100644 index 00000000..f3660aef --- /dev/null +++ b/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 { } + +export default Checkbox; diff --git a/components/checkbox/index.d.ts b/components/checkbox/index.d.ts index 64bd4a1c..83fea046 100644 --- a/components/checkbox/index.d.ts +++ b/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. - */ - text?: string; -} - -export interface CheckboxProps extends ReactToolbox.Props { - /** - * Value for the checkbox, can be true or false. - * @default false - */ - checked?: boolean; - /** - * Children to pass through the component. - */ - children?: React.ReactNode; - /** - * If true, the checkbox shown as disabled and cannot be modified. - * @default false - */ - disabled?: boolean; - /** - * Text label to attach next to the checkbox element. - */ - label?: React.ReactNode | string; - /** - * The name of the field to set in the input checkbox. - */ - name?: string; - /** - * Callback called when the checkbox is blurred. - */ - onBlur?: Function; - /** - * Callback called when the checkbox value is changed. - */ - onChange?: Function; - /** - * Classnames object defining the component style. - */ - theme?: CheckboxTheme; - /** - * Additional properties passed to inner input element. - */ - [key: string]: any; -} - -export class Checkbox extends React.Component { } +import { Checkbox } from './Checkbox'; +export { CheckboxProps, CheckboxTheme } from './Checkbox'; +export { Checkbox } export default Checkbox; diff --git a/components/chip/Chip.d.ts b/components/chip/Chip.d.ts new file mode 100644 index 00000000..f51e1fbd --- /dev/null +++ b/components/chip/Chip.d.ts @@ -0,0 +1,53 @@ +import * as React from "react"; +import ReactToolbox from "../index"; + +export interface ChipTheme { + /** + * Added to the root element when the component includes an avatar. + */ + avatar?: string; + /** + * Used for the root element. + */ + chip?: string; + /** + * Added to the root element when the component is deletable. + */ + deletable?: string; + /** + * Used for the delete element wrapper. + */ + delete?: string; + /** + * Used for the delete icon. + */ + deleteIcon?: string; + /** + * Used for the delete svg inner layer. + */ + deleteX?: string; +} + +export interface ChipProps extends ReactToolbox.Props { + /** + * Children to pass through the component. + */ + children?: React.ReactNode; + /** + * If true, the chip will be rendered with a delete icon. + * @default false + */ + deletable?: boolean; + /** + * Callback to be invoked when the delete icon is clicked. + */ + onDeleteClick?: Function; + /** + * Classnames object defining the component style. + */ + theme?: ChipTheme; +} + +export class Chip extends React.Component { } + +export default Chip; diff --git a/components/chip/index.d.ts b/components/chip/index.d.ts index f51e1fbd..91702f37 100644 --- a/components/chip/index.d.ts +++ b/components/chip/index.d.ts @@ -1,53 +1,5 @@ -import * as React from "react"; -import ReactToolbox from "../index"; - -export interface ChipTheme { - /** - * Added to the root element when the component includes an avatar. - */ - avatar?: string; - /** - * Used for the root element. - */ - chip?: string; - /** - * Added to the root element when the component is deletable. - */ - deletable?: string; - /** - * Used for the delete element wrapper. - */ - delete?: string; - /** - * Used for the delete icon. - */ - deleteIcon?: string; - /** - * Used for the delete svg inner layer. - */ - deleteX?: string; -} - -export interface ChipProps extends ReactToolbox.Props { - /** - * Children to pass through the component. - */ - children?: React.ReactNode; - /** - * If true, the chip will be rendered with a delete icon. - * @default false - */ - deletable?: boolean; - /** - * Callback to be invoked when the delete icon is clicked. - */ - onDeleteClick?: Function; - /** - * Classnames object defining the component style. - */ - theme?: ChipTheme; -} - -export class Chip extends React.Component { } +import { Chip } from './Chip'; +export { ChipProps, ChipTheme } from './Chip'; +export { Chip } export default Chip; diff --git a/components/date_picker/DatePicker.d.ts b/components/date_picker/DatePicker.d.ts new file mode 100644 index 00000000..eccbb72f --- /dev/null +++ b/components/date_picker/DatePicker.d.ts @@ -0,0 +1,221 @@ +import * as React from "react"; +import ReactToolbox from "../index"; + +export interface DatePickerTheme { + /** + * Used for the active day and year. + */ + active?: string; + /** + * Used for the buttons in the dialog. + */ + button?: string; + /** + * Used for the calendar root element. + */ + calendar?: string; + /** + * Used as wrapper for the calendar component inside dialog. + */ + calendarWrapper?: string; + /** + * Used for the date element inside header. + */ + date?: string; + /** + * Used for the day element inside the calendar. + */ + day?: string; + /** + * Used for the list of days inside a month. + */ + days?: string; + /** + * Used for the dialog component. + */ + dialog?: string; + /** + * Added to day element when day is disabled. + */ + disabled?: string; + /** + * Used for the dialog header,. + */ + header?: string; + /** + * Used for Input element that opens the picker. + */ + input?: string; + /** + * Used for the month root element. + */ + month?: string; + /** + * Added to the root dialog when months are displayed. + */ + monthsDisplay?: string; + /** + * Used for the next month icon. + */ + next?: string; + /** + * Used for the prev month icon. + */ + prev?: string; + /** + * Used for the month title element. + */ + title?: string; + /** + * Used for the weekdays wrapper. + */ + week?: string; + /** + * Used for the year element inside header. + */ + year?: string; + /** + * Used for the years list in years view. + */ + years?: string; + /** + * Added to the root dialog when years are displayed. + */ + yearsDisplay?: string; +} + +export interface DatePickerProps extends ReactToolbox.Props { + /** + * Allows to control if the picker should be shown from outside. Beware you should update the prop when the Dialog is closed. + * @default false + */ + active?: boolean; + /** + * Automatically selects a date upon clicking on a day + * @default false + */ + autoOk?: boolean; + /** + * Label used for cancel button on Dialog. + * @default "Cancel" + */ + cancelLabel?: string; + /** + * An array of date objects which will be disabled in the calendar. All other dates will be enabled. + */ + disabledDates?: Date[]; + /** + * An array of date objects which will be enabled in the calendar. All other dates will be disabled. + */ + enabledDates?: Date[]; + /** + * Give an error node to display under the field. + */ + error?: string; + /** + * A key to identify an Icon from Material Design Icons or a custom Icon Element. + */ + icon?: React.ReactNode; + /** + * This class will be applied to Input component of DatePicker. + */ + inputClassName?: string; + /** + * Function to format the date displayed on the input. + */ + inputFormat?: Function; + /** + * The text string to use for the floating label element in the input component. + */ + label?: string; + /** + * Sets locale for the Dialog. + * @default "en" + */ + locale?: "de" | "no" | "en" | "es" | "af" | "ar" | "be" | "bg" | "bn" | "bo" | "br" | "bs" | "ca" | "gl" | "eu" | "pt" | "it" | "fr" | "ru" | "ua" | DatePickerLocale; + /** + * Date object with the maximum selectable date. + */ + maxDate?: Date; + /** + * Date object with the minimum selectable date. + */ + minDate?: Date; + /** + * Name for the input field. + */ + name?: string; + /** + * Label used for 'OK' button on Dialog. + * @default "Ok" + */ + okLabel?: string; + /** + * Callback called when the picker value is changed. + */ + onChange?: Function; + /** + * Callback fired on Input click. + */ + onClick?: Function; + /** + * Callback fired after dismissing the Dialog. + */ + onDismiss?: Function; + /** + * Callback called when the ESC key is pressed with the overlay active. + */ + onEscKeyDown?: Function; + /** + * Callback invoked on Input key press. + */ + onKeyPress?: Function; + /** + * Callback to be invoked when the dialog overlay is clicked. + */ + onOverlayClick?: Function; + /** + * The input element will be readonly and look like disabled. + */ + readonly?: boolean; + /** + * Set week's first day to Sunday. Default week's first day is Monday. + * @default false + */ + sundayFirstDayOfWeek?: boolean; + /** + * Classnames object defining the component style. + */ + theme?: DatePickerTheme; + /** + * Date object with the currently selected date. + */ + value?: Date | string; +} + +export interface DatePickerLocale { + /** + * Month names. + */ + months?: string[]; + /** + * Month short names. + */ + monthsShort?: string[]; + /** + * Day names starting from Sunday. + */ + weekdays?: string[]; + /** + * Day short names starting from Sunday. + */ + weekdaysShort?: string[]; + /** + * Day letters starting from Sunday. + */ + weekdaysLetter?: string[]; +} + +export class DatePicker extends React.Component { } + +export default DatePicker; diff --git a/components/date_picker/index.d.ts b/components/date_picker/index.d.ts index 7595298d..b67704a6 100644 --- a/components/date_picker/index.d.ts +++ b/components/date_picker/index.d.ts @@ -1,221 +1,5 @@ -import * as React from "react"; -import ReactToolbox from "../index"; - -export interface DatePickerTheme { - /** - * Used for the active day and year. - */ - active?: string; - /** - * Used for the buttons in the dialog. - */ - button?: string; - /** - * Used for the calendar root element. - */ - calendar?: string; - /** - * Used as wrapper for the calendar component inside dialog. - */ - calendarWrapper?: string; - /** - * Used for the date element inside header. - */ - date?: string; - /** - * Used for the day element inside the calendar. - */ - day?: string; - /** - * Used for the list of days inside a month. - */ - days?: string; - /** - * Used for the dialog component. - */ - dialog?: string; - /** - * Added to day element when day is disabled. - */ - disabled?: string; - /** - * Used for the dialog header,. - */ - header?: string; - /** - * Used for Input element that opens the picker. - */ - input?: string; - /** - * Used for the month root element. - */ - month?: string; - /** - * Added to the root dialog when months are displayed. - */ - monthsDisplay?: string; - /** - * Used for the next month icon. - */ - next?: string; - /** - * Used for the prev month icon. - */ - prev?: string; - /** - * Used for the month title element. - */ - title?: string; - /** - * Used for the weekdays wrapper. - */ - week?: string; - /** - * Used for the year element inside header. - */ - year?: string; - /** - * Used for the years list in years view. - */ - years?: string; - /** - * Added to the root dialog when years are displayed. - */ - yearsDisplay?: string; -} - -export interface DatePickerProps extends ReactToolbox.Props { - /** - * Allows to control if the picker should be shown from outside. Beware you should update the prop when the Dialog is closed. - * @default false - */ - active?: boolean; - /** - * Automatically selects a date upon clicking on a day - * @default false - */ - autoOk?: boolean; - /** - * Label used for cancel button on Dialog. - * @default "Cancel" - */ - cancelLabel?: string; - /** - * An array of date objects which will be disabled in the calendar. All other dates will be enabled. - */ - disabledDates?: Date[]; - /** - * An array of date objects which will be enabled in the calendar. All other dates will be disabled. - */ - enabledDates?: Date[]; - /** - * Give an error node to display under the field. - */ - error?: string; - /** - * A key to identify an Icon from Material Design Icons or a custom Icon Element. - */ - icon?: React.ReactNode | string; - /** - * This class will be applied to Input component of DatePicker. - */ - inputClassName?: string; - /** - * Function to format the date displayed on the input. - */ - inputFormat?: Function; - /** - * The text string to use for the floating label element in the input component. - */ - label?: string; - /** - * Sets locale for the Dialog. - * @default "en" - */ - locale?: "de" | "no" | "en" | "es" | "af" | "ar" | "be" | "bg" | "bn" | "bo" | "br" | "bs" | "ca" | "gl" | "eu" | "pt" | "it" | "fr" | "ru" | "ua" | DatePickerLocale; - /** - * Date object with the maximum selectable date. - */ - maxDate?: Date; - /** - * Date object with the minimum selectable date. - */ - minDate?: Date; - /** - * Name for the input field. - */ - name?: string; - /** - * Label used for 'OK' button on Dialog. - * @default "Ok" - */ - okLabel?: string; - /** - * Callback called when the picker value is changed. - */ - onChange?: Function; - /** - * Callback fired on Input click. - */ - onClick?: Function; - /** - * Callback fired after dismissing the Dialog. - */ - onDismiss?: Function; - /** - * Callback called when the ESC key is pressed with the overlay active. - */ - onEscKeyDown?: Function; - /** - * Callback invoked on Input key press. - */ - onKeyPress?: Function; - /** - * Callback to be invoked when the dialog overlay is clicked. - */ - onOverlayClick?: Function; - /** - * The input element will be readonly and look like disabled. - */ - readonly?: boolean; - /** - * Set week's first day to Sunday. Default week's first day is Monday. - * @default false - */ - sundayFirstDayOfWeek?: boolean; - /** - * Classnames object defining the component style. - */ - theme?: DatePickerTheme; - /** - * Date object with the currently selected date. - */ - value?: Date | string; -} - -export interface DatePickerLocale { - /** - * Month names. - */ - months?: string[]; - /** - * Month short names. - */ - monthsShort?: string[]; - /** - * Day names starting from Sunday. - */ - weekdays?: string[]; - /** - * Day short names starting from Sunday. - */ - weekdaysShort?: string[]; - /** - * Day letters starting from Sunday. - */ - weekdaysLetter?: string[]; -} - -export class DatePicker extends React.Component { } +import { DatePicker } from './DatePicker'; +export { DatePickerProps, DatePickerTheme, DatePickerLocale } from './DatePicker'; +export { DatePicker } export default DatePicker; diff --git a/components/dialog/Dialog.d.ts b/components/dialog/Dialog.d.ts new file mode 100644 index 00000000..38dcf8a2 --- /dev/null +++ b/components/dialog/Dialog.d.ts @@ -0,0 +1,94 @@ +import * as React from "react"; +import ReactToolbox from "../index"; +import { ButtonProps } from "../button/index"; + +export interface DialogTheme { + /** + * Used for the root when the dialog is active. + */ + active?: string; + /** + * Used to wrap the dialog body. + */ + body?: string; + /** + * Used in buttons when the dialog implements actions. + */ + button?: string; + /** + * Used for the root element. + */ + dialog?: string; + /** + * Used for the navigation element when it implements actions. + */ + navigation?: string; + /** + * Used for the title element of the dialog. + */ + title?: string; +} + +export interface DialogActionProps extends ButtonProps { + /** + * The text string to use for the name of the button. + */ + label?: string; + /** + * Callback called when the component is clicked. + */ + onClick?: Function; +} + +export interface DialogProps extends ReactToolbox.Props { + /** + * A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons. + */ + actions?: DialogActionProps[]; + /** + * If true, the dialog will be active. + * @default false + */ + active?: boolean; + /** + * Children to pass through the component. + */ + children?: React.ReactNode; + /** + * Callback called when the ESC key is pressed with the overlay active. + */ + onEscKeyDown?: Function; + /** + * Callback to be invoked when the dialog overlay is clicked. + */ + onOverlayClick?: Function; + /** + * Callback called when the mouse button is pressed on the overlay. + */ + onOverlayMouseDown?: Function; + /** + * Callback called when the mouse is moving over the overlay. + */ + onOverlayMouseMove?: Function; + /** + * Callback called when the mouse button is released over the overlay. + */ + onOverlayMouseUp?: Function; + /** + * Classnames object defining the component style. + */ + theme?: DialogTheme; + /** + * The text string to use as standar title of the dialog. + */ + title?: string; + /** + * Used to determine the size of the dialog. It can be small, normal or large. + * @default "normal" + */ + type?: "small" | "normal" | "large" | string; +} + +export class Dialog extends React.Component { } + +export default Dialog; diff --git a/components/dialog/index.d.ts b/components/dialog/index.d.ts index 3e17730d..8bfcfb69 100644 --- a/components/dialog/index.d.ts +++ b/components/dialog/index.d.ts @@ -1,94 +1,5 @@ -import * as React from "react"; -import ReactToolbox from "../index"; -import {ButtonProps} from "../button"; - -export interface DialogTheme { - /** - * Used for the root when the dialog is active. - */ - active?: string; - /** - * Used to wrap the dialog body. - */ - body?: string; - /** - * Used in buttons when the dialog implements actions. - */ - button?: string; - /** - * Used for the root element. - */ - dialog?: string; - /** - * Used for the navigation element when it implements actions. - */ - navigation?: string; - /** - * Used for the title element of the dialog. - */ - title?: string; -} - -export interface DialogActionProps extends ButtonProps { - /** - * The text string to use for the name of the button. - */ - label?: string; - /** - * Callback called when the component is clicked. - */ - onClick?: Function; -} - -export interface DialogProps extends ReactToolbox.Props { - /** - * A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons. - */ - actions?: DialogActionProps[]; - /** - * If true, the dialog will be active. - * @default false - */ - active?: boolean; - /** - * Children to pass through the component. - */ - children?: React.ReactNode; - /** - * Callback called when the ESC key is pressed with the overlay active. - */ - onEscKeyDown?: Function; - /** - * Callback to be invoked when the dialog overlay is clicked. - */ - onOverlayClick?: Function; - /** - * Callback called when the mouse button is pressed on the overlay. - */ - onOverlayMouseDown?: Function; - /** - * Callback called when the mouse is moving over the overlay. - */ - onOverlayMouseMove?: Function; - /** - * Callback called when the mouse button is released over the overlay. - */ - onOverlayMouseUp?: Function; - /** - * Classnames object defining the component style. - */ - theme?: DialogTheme; - /** - * The text string to use as standar title of the dialog. - */ - title?: string; - /** - * Used to determine the size of the dialog. It can be small, normal or large. - * @default "normal" - */ - type?: "small" | "normal" | "large" | string; -} - -export class Dialog extends React.Component { } +import { Dialog } from './Dialog'; +export { DialogProps, DialogTheme, DialogActionProps } from './Dialog'; +export { Dialog } export default Dialog; diff --git a/components/drawer/Drawer.d.ts b/components/drawer/Drawer.d.ts new file mode 100644 index 00000000..37cd30d1 --- /dev/null +++ b/components/drawer/Drawer.d.ts @@ -0,0 +1,68 @@ +import * as React from "react"; +import ReactToolbox from "../index"; + +export interface DrawerTheme { + /** + * Used for the root class when the drawer is active. + */ + active?: string; + /** + * Used for the drawer content. + */ + content?: string; + /** + * Root class. + */ + drawer?: string; + /** + * Added to the root class when drawer is to the left. + */ + left?: string; + /** + * Added to the root class when drawer is to the right. + */ + right?: string; + /** + * A wrapper class for the top of the root. + */ + wrapper?: string; +} + +export interface DrawerProps extends ReactToolbox.Props { + /** + * If true, the drawer will be visible. + * @default false + */ + active?: boolean; + /** + * Children to pass through the component. + */ + children?: React.ReactNode; + /** + * If true the Drawer is rendered inside the normal tree. + * @default false + */ + insideTree?: boolean; + /** + * Callback function to be invoked when the overlay is clicked. + */ + onOverlayClick?: Function; + /** + * Classnames object defining the component style. + */ + theme?: DrawerTheme; + /** + * Type of drawer. It can be left or right to display the drawer on the left or right side of the screen. + * @default left + */ + type?: "left" | "right"; + /** + * If true display an Overlay that locks the scroll when the Drawer is active. + * @default true + */ + withOverlay?: boolean; +} + +export class Drawer extends React.Component { } + +export default Drawer; diff --git a/components/drawer/index.d.ts b/components/drawer/index.d.ts index d090305d..fb91f9ad 100644 --- a/components/drawer/index.d.ts +++ b/components/drawer/index.d.ts @@ -1,54 +1,5 @@ -import * as React from "react"; -import ReactToolbox from "../index"; - -export interface DrawerTheme { - /** - * Used for the root class when the drawer is active. - */ - active?: string; - /** - * Used for the drawer content. - */ - content?: string; - /** - * Root class. - */ - drawer?: string; - /** - * Added to the root class when drawer is to the left. - */ - left?: string; - /** - * Added to the root class when drawer is to the right. - */ - right?: string; -} - -export interface DrawerProps extends ReactToolbox.Props { - /** - * If true, the drawer will be visible. - * @default false - */ - active?: boolean; - /** - * Children to pass through the component. - */ - children?: React.ReactNode; - /** - * Callback function to be invoked when the overlay is clicked. - */ - onOverlayClick?: Function; - /** - * Classnames object defining the component style. - */ - theme?: DrawerTheme; - /** - * Type of drawer. It can be left or right to display the drawer on the left or right side of the screen. - * @default left - */ - type?: "left" | "right"; -} - -export class Drawer extends React.Component { } +import { Drawer } from './Drawer'; +export { DrawerProps, DrawerTheme } from './Drawer'; +export { Drawer } export default Drawer; diff --git a/components/dropdown/Dropdown.d.ts b/components/dropdown/Dropdown.d.ts new file mode 100644 index 00000000..7a3da482 --- /dev/null +++ b/components/dropdown/Dropdown.d.ts @@ -0,0 +1,124 @@ +import * as React from "react"; +import ReactToolbox from "../index"; + +export interface DropdownTheme { + /** + * Added to the root element when the dropdown is active. + */ + active?: string; + /** + * Added to the root element when it's disabled. + */ + disabled?: string; + /** + * Root element class. + */ + dropdown?: string; + /** + * Used for the error element. + */ + error?: string; + /** + * Added to the inner wrapper if it's errored. + */ + errored?: string; + /** + * Used for the inner wrapper of the component. + */ + field?: string; + /** + * Used for the the label element. + */ + label?: string; + /** + * Used when dropdown has required attribute. + */ + required?: string; + /** + * Used to highlight the selected value. + */ + selected?: string; + /** + * Used as a wrapper for the given template value. + */ + templateValue?: string; + /** + * Added to the root element when it's opening up. + */ + up?: string; + /** + * Used for each value in the dropdown component. + */ + value?: string; + /** + * Used for the list of values. + */ + values?: string; +} + +export interface DropdownProps extends ReactToolbox.Props { + /** + * If true the dropdown will preselect the first item if the supplied value matches none of the options' values. + * @default true + */ + allowBlank?: boolean; + /** + * If true, the dropdown will open up or down depending on the position in the screen. + * @default true + */ + auto?: boolean; + /** + * Set the component as disabled. + * @default false + */ + disabled?: boolean; + /** + * Give an error string to display under the field. + */ + error?: string; + /** + * The text string to use for the floating label element. + */ + label?: string; + /** + * Name for the input field. + */ + name?: string; + /** + * Callback function that is fired when the component is blurred. + */ + onBlur?: Function; + /** + * Callback function that is fired when the component's value changes. + */ + onChange?: Function; + /** + * Callback function that is fired when the component is focused. + */ + onFocus?: Function; + /** + * Array of data objects with the data to represent in the dropdown. + */ + source: any[]; + /** + * Callback function that returns a JSX template to represent the element. + */ + template?: Function; + /** + * Classnames object defining the component style. + */ + theme?: DropdownTheme; + /** + * Default value using JSON data. + */ + value?: string | number; + /** + * If true, the dropdown has a required attribute. + * @default false + */ + required?: boolean; +} + +export class Dropdown extends React.Component { } + +export default Dropdown; diff --git a/components/dropdown/index.d.ts b/components/dropdown/index.d.ts index 7a3da482..8e5196b2 100644 --- a/components/dropdown/index.d.ts +++ b/components/dropdown/index.d.ts @@ -1,124 +1,5 @@ -import * as React from "react"; -import ReactToolbox from "../index"; - -export interface DropdownTheme { - /** - * Added to the root element when the dropdown is active. - */ - active?: string; - /** - * Added to the root element when it's disabled. - */ - disabled?: string; - /** - * Root element class. - */ - dropdown?: string; - /** - * Used for the error element. - */ - error?: string; - /** - * Added to the inner wrapper if it's errored. - */ - errored?: string; - /** - * Used for the inner wrapper of the component. - */ - field?: string; - /** - * Used for the the label element. - */ - label?: string; - /** - * Used when dropdown has required attribute. - */ - required?: string; - /** - * Used to highlight the selected value. - */ - selected?: string; - /** - * Used as a wrapper for the given template value. - */ - templateValue?: string; - /** - * Added to the root element when it's opening up. - */ - up?: string; - /** - * Used for each value in the dropdown component. - */ - value?: string; - /** - * Used for the list of values. - */ - values?: string; -} - -export interface DropdownProps extends ReactToolbox.Props { - /** - * If true the dropdown will preselect the first item if the supplied value matches none of the options' values. - * @default true - */ - allowBlank?: boolean; - /** - * If true, the dropdown will open up or down depending on the position in the screen. - * @default true - */ - auto?: boolean; - /** - * Set the component as disabled. - * @default false - */ - disabled?: boolean; - /** - * Give an error string to display under the field. - */ - error?: string; - /** - * The text string to use for the floating label element. - */ - label?: string; - /** - * Name for the input field. - */ - name?: string; - /** - * Callback function that is fired when the component is blurred. - */ - onBlur?: Function; - /** - * Callback function that is fired when the component's value changes. - */ - onChange?: Function; - /** - * Callback function that is fired when the component is focused. - */ - onFocus?: Function; - /** - * Array of data objects with the data to represent in the dropdown. - */ - source: any[]; - /** - * Callback function that returns a JSX template to represent the element. - */ - template?: Function; - /** - * Classnames object defining the component style. - */ - theme?: DropdownTheme; - /** - * Default value using JSON data. - */ - value?: string | number; - /** - * If true, the dropdown has a required attribute. - * @default false - */ - required?: boolean; -} - -export class Dropdown extends React.Component { } +import { Dropdown } from './Dropdown'; +export { DropdownProps, DropdownTheme } from './Dropdown'; +export { Dropdown } export default Dropdown; diff --git a/components/font_icon/FontIcon.d.ts b/components/font_icon/FontIcon.d.ts new file mode 100644 index 00000000..1a8f4759 --- /dev/null +++ b/components/font_icon/FontIcon.d.ts @@ -0,0 +1,21 @@ +import * as React from "react"; +import ReactToolbox from "../index"; + +export interface FontIconProps extends ReactToolbox.Props { + /** + * Children to pass through the component. + */ + children?: React.ReactNode; + /** + * The key string for the icon you want be displayed. + */ + value?: React.ReactNode; + /** + * Additional properties passed to component root. + */ + [key: string]: any +} + +export class FontIcon extends React.Component { } + +export default FontIcon; diff --git a/components/font_icon/index.d.ts b/components/font_icon/index.d.ts index 12c0deb3..a134dc60 100644 --- a/components/font_icon/index.d.ts +++ b/components/font_icon/index.d.ts @@ -1,21 +1,5 @@ -import * as React from "react"; -import ReactToolbox from "../index"; - -export interface FontIconProps extends ReactToolbox.Props { - /** - * Children to pass through the component. - */ - children?: React.ReactNode; - /** - * The key string for the icon you want be displayed. - */ - value?: React.ReactNode | string; - /** - * Additional properties passed to component root. - */ - [key: string]: any -} - -export class FontIcon extends React.Component { } +import { FontIcon } from './FontIcon'; +export { FontIconProps } from './FontIcon'; +export { FontIcon } export default FontIcon; diff --git a/components/hoc/ActivableRenderer.d.ts b/components/hoc/ActivableRenderer.d.ts new file mode 100644 index 00000000..723aa1d8 --- /dev/null +++ b/components/hoc/ActivableRenderer.d.ts @@ -0,0 +1,9 @@ +import * as React from 'react'; + +export interface ActivableRendererFactoryOptions { + delay?: number; +} + +export default function ActivableRendererFactory

(options?: ActivableRendererFactoryOptions): + (>(target: TFunction) => TFunction) & + ((clazz: React.StatelessComponent

) => React.StatelessComponent

); diff --git a/components/hoc/Portal.d.ts b/components/hoc/Portal.d.ts new file mode 100644 index 00000000..3396de75 --- /dev/null +++ b/components/hoc/Portal.d.ts @@ -0,0 +1,9 @@ +import * as React from 'react'; +import ReactToolbox from '../index'; + +export interface PortalProps extends ReactToolbox.Props { + container?: any; + lockBody?: boolean; +} + +export default class Portal extends React.Component { } diff --git a/components/identifiers.d.ts b/components/identifiers.d.ts new file mode 100644 index 00000000..372481c2 --- /dev/null +++ b/components/identifiers.d.ts @@ -0,0 +1,28 @@ +export const APP_BAR: string; +export const AUTOCOMPLETE: string; +export const AVATAR: string; +export const BUTTON: string; +export const CARD: string; +export const CHIP: string; +export const CHECKBOX: string; +export const DATE_PICKER: string; +export const DIALOG: string; +export const DRAWER: string; +export const DROPDOWN: string; +export const INPUT: string; +export const LAYOUT: string; +export const LINK: string; +export const LIST: string; +export const MENU: string; +export const NAVIGATION: string; +export const OVERLAY: string; +export const PROGRESS_BAR: string; +export const RADIO: string; +export const RIPPLE: string; +export const SLIDER: string; +export const SNACKBAR: string; +export const SWITCH: string; +export const TABLE: string; +export const TABS: string; +export const TOOLTIP: string; +export const TIME_PICKER: string; diff --git a/components/index.d.ts b/components/index.d.ts index d18ecd7b..9b0f4da4 100644 --- a/components/index.d.ts +++ b/components/index.d.ts @@ -1,14 +1,10 @@ import * as React from "react"; export declare namespace ReactToolbox { - interface Props { + interface Props extends React.Attributes { /** * Set a class for the root component. */ className?: string; - /** - * Key used to uniquely identify the element within an Array. - */ - key?: string | number; /** * Callback called when the component is clicked. */ diff --git a/components/input/Input.d.ts b/components/input/Input.d.ts new file mode 100644 index 00000000..b257fa1a --- /dev/null +++ b/components/input/Input.d.ts @@ -0,0 +1,141 @@ +import * as React from "react"; +import ReactToolbox from "../index"; + +export interface InputTheme { + /** + * Used for the bar under the input. + */ + bar?: string; + /** + * Used for the counter element. + */ + counter?: string; + /** + * Added to the root class when input is disabled. + */ + disabled?: string; + /** + * Used for the text error. + */ + error?: string; + /** + * Added to the root class when input is errored. + */ + errored?: string; + /** + * Used when the input is hidden. + */ + hidden?: string; + /** + * Used for the hint text. + */ + hint?: string; + /** + * Used for the icon in case the input has icon. + */ + icon?: string; + /** + * Used as root class for the component. + */ + input?: string; + /** + * Used for the HTML input element. + */ + inputElement?: string; + /** + * Used in case the input is required. + */ + required?: string; + /** + * Added to the root class if the input has icon. + */ + withIcon?: string; +} + +export interface InputProps extends ReactToolbox.Props { + /** + * Children to pass through the component. + */ + children?: React.ReactNode; + /** + * If true, component will be disabled. + * @default false + */ + disabled?: boolean; + /** + * Give an error node to display under the field. + */ + error?: React.ReactNode; + /** + * Indicates if the label is floating in the input field or not. + * @default true + */ + floating?: boolean; + /** + * The text string to use for hint text element. + */ + hint?: React.ReactNode; + /** + * Name of an icon to use as a label for the input. + */ + icon?: React.ReactNode; + /** + * The text string to use for the floating label element. + */ + label?: React.ReactNode; + /** + * Specifies the maximum number of characters allowed in the component + */ + maxLength?: number; + /** + * If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines. + * @default false + */ + multiline?: boolean; + /** + * Name for the input field. + */ + name?: string; + /** + * Callback function that is fired when component is blurred. + */ + onBlur?: Function; + /** + * Callback function that is fired when the component's value changes + */ + onChange?: Function; + /** + * Callback function that is fired when component is focused. + */ + onFocus?: Function; + /** + * Callback function that is fired when a key is pressed. + */ + onKeyPress?: Function; + /** + * If true, the html input has a required attribute. + * @default false + */ + required?: boolean; + /** + * The number of rows the multiline input field has. + */ + rows?:number; + /** + * Classnames object defining the component style. + */ + theme?: InputTheme; + /** + * Type of the input element. It can be a valid HTML5 input type. + * @default "text" + */ + type?: string; + /** + * Current value of the input element. + */ + value?: any; +} + +export class Input extends React.Component { } + +export default Input; diff --git a/components/input/index.d.ts b/components/input/index.d.ts index 1eb9074c..5049ca33 100644 --- a/components/input/index.d.ts +++ b/components/input/index.d.ts @@ -1,141 +1,5 @@ -import * as React from "react"; -import ReactToolbox from "../index"; - -export interface InputTheme { - /** - * Used for the bar under the input. - */ - bar?: string; - /** - * Used for the counter element. - */ - counter?: string; - /** - * Added to the root class when input is disabled. - */ - disabled?: string; - /** - * Used for the text error. - */ - error?: string; - /** - * Added to the root class when input is errored. - */ - errored?: string; - /** - * Used when the input is hidden. - */ - hidden?: string; - /** - * Used for the hint text. - */ - hint?: string; - /** - * Used for the icon in case the input has icon. - */ - icon?: string; - /** - * Used as root class for the component. - */ - input?: string; - /** - * Used for the HTML input element. - */ - inputElement?: string; - /** - * Used in case the input is required. - */ - required?: string; - /** - * Added to the root class if the input has icon. - */ - withIcon?: string; -} - -export interface InputProps extends ReactToolbox.Props { - /** - * Children to pass through the component. - */ - children?: React.ReactNode; - /** - * If true, component will be disabled. - * @default false - */ - disabled?: boolean; - /** - * Give an error node to display under the field. - */ - error?: string | React.ReactNode; - /** - * Indicates if the label is floating in the input field or not. - * @default true - */ - floating?: boolean; - /** - * The text string to use for hint text element. - */ - hint?: string | React.ReactNode; - /** - * Name of an icon to use as a label for the input. - */ - icon?: React.ReactNode | string; - /** - * The text string to use for the floating label element. - */ - label?: string | React.ReactNode; - /** - * Specifies the maximum number of characters allowed in the component - */ - maxLength?: number; - /** - * If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines. - * @default false - */ - multiline?: boolean; - /** - * Name for the input field. - */ - name?: string; - /** - * Callback function that is fired when component is blurred. - */ - onBlur?: Function; - /** - * Callback function that is fired when the component's value changes - */ - onChange?: Function; - /** - * Callback function that is fired when component is focused. - */ - onFocus?: Function; - /** - * Callback function that is fired when a key is pressed. - */ - onKeyPress?: Function; - /** - * If true, the html input has a required attribute. - * @default false - */ - required?: boolean; - /** - * The number of rows the multiline input field has. - */ - rows?:number; - /** - * Classnames object defining the component style. - */ - theme?: InputTheme; - /** - * Type of the input element. It can be a valid HTML5 input type. - * @default "text" - */ - type?: string; - /** - * Current value of the input element. - */ - value?: any; -} - -export class Input extends React.Component { } +import { Input } from './Input'; +export { InputProps, InputTheme } from './Input'; +export { Input } export default Input; diff --git a/components/layout/Layout.d.ts b/components/layout/Layout.d.ts new file mode 100644 index 00000000..477b57b9 --- /dev/null +++ b/components/layout/Layout.d.ts @@ -0,0 +1,64 @@ +import * as React from "react"; +import ReactToolbox from "../index"; +import { NavDrawer } from './NavDrawer'; +import { Panel } from './Panel'; +import { Sidebar } from './Sidebar'; + +export interface LayoutTheme { + appbarFixed?: string; + /** + * The root class that wraps the whole layout. + */ + layout?: string; + /** + * Added to the root if there is a pinned `NavDrawer` + */ + navDrawerPinned?: string; + /** + * Added to the root if there is a clipped NavDrawer. + */ + navDrawerClipped?: string; + /** + * Added to the root if there is a pinned sidebar. + */ + sidebarPinned?: string; + /** + * Added to the root if there is a clipped sidebar. + */ + sidebarClipped?: string; + + /** + * Added to the root element in case there is a sidebar present. width correspond to the value passed to the `Sidebar`. + */ + sidebarWidth1?: string; + sidebarWidth2?: string; + sidebarWidth3?: string; + sidebarWidth4?: string; + sidebarWidth5?: string; + sidebarWidth6?: string; + sidebarWidth7?: string; + sidebarWidth8?: string; + sidebarWidth9?: string; + sidebarWidth10?: string; + sidebarWidth11?: string; + sidebarWidth12?: string; + sidebarWidth25?: string; + sidebarWidth33?: string; + sidebarWidth50?: string; + sidebarWidth66?: string; + sidebarWidth75?: string; + sidebarWidth100?: string; +} + +export interface LayoutProps extends ReactToolbox.Props { + /** + * Children to pass through the component. + */ + children?: [NavDrawer | Panel | Sidebar]; + /** + * Classnames object defining the component style. + */ + theme?: LayoutTheme; +} + +export class Layout extends React.Component { } diff --git a/components/layout/NavDrawer.d.ts b/components/layout/NavDrawer.d.ts new file mode 100644 index 00000000..c6cb5650 --- /dev/null +++ b/components/layout/NavDrawer.d.ts @@ -0,0 +1,45 @@ +import * as React from "react"; +import { DrawerProps } from '../drawer/Drawer'; + +export interface NavDrawerTheme { + /** + * Added to the root class when it is pinned. + */ + pinned?: string; + /** + * Added to the root class when it is clipped. + */ + clipped?: string; +} + +export interface NavDrawerProps extends DrawerProps { + /** + * If true, the drawer will be shown as an overlay. + * @default false + */ + active?: boolean; + /** + * If true, when the `AppBar` gets pinned, it will stand over the `Drawer`. + * @default false + */ + clipped?: boolean; + /** + * Callback function to be invoked when the overlay is clicked. It only works if the `Drawer` is actually displaying and Overlay + */ + onOverlayClick?: Function; + /** + * The breakpoint at which the drawer is automatically pinned. + */ + permanentAt?: "sm" | "smTablet" | "md" | "lg" | "lgTablet" | "xl" | "xxl" | "xxxl"; + /** + * If true, the drawer will be pinned open. pinned takes precedence over active. + * @default false + */ + pinned?: boolean; + /** + * Classnames object defining the component style. + */ + theme?: NavDrawerTheme; +} + +export class NavDrawer extends React.Component { } diff --git a/components/layout/Panel.d.ts b/components/layout/Panel.d.ts new file mode 100644 index 00000000..cc8cc0ed --- /dev/null +++ b/components/layout/Panel.d.ts @@ -0,0 +1,26 @@ +import * as React from "react"; +import ReactToolbox from "../index"; + +export interface PanelTheme { + /** + * Used in the root class in case the panel has bodyScroll. + */ + bodyScroll?: string; + /** + * Used as the root class of the panel component. + */ + panel?: string; +} + +export interface PanelProps extends ReactToolbox.Props { + /** + * You can set it to true in case you are using a pinned Sidebar so it takes an scrolled `div` instead of using the document scroll. + */ + bodyScroll?: boolean; + /** + * Classnames object defining the component style. + */ + theme?: PanelTheme; +} + +export class Panel extends React.Component { } diff --git a/components/layout/Sidebar.d.ts b/components/layout/Sidebar.d.ts new file mode 100644 index 00000000..56d2075c --- /dev/null +++ b/components/layout/Sidebar.d.ts @@ -0,0 +1,41 @@ +import * as React from "react"; +import { DrawerProps } from '../drawer/Drawer'; + +export interface SidebarTheme { + /** + * Added to the root class when it is clipped. + */ + clipped?: string; + /** + * Added to the root class if sidebar is pinned. + */ + pinned?: string; +} + +export interface SidebarProps extends DrawerProps { + /** + * If true, when the `AppBar` gets pinned, it will stand over the `Drawer`. + * @default false + */ + clipped?: boolean; + /** + * The breakpoint at which the drawer is automatically pinned. + */ + permanentAt?: "sm" | "smTablet" | "md" | "lg" | "lgTablet" | "xl" | "xxl" | "xxxl"; + /** + * If true, the sidebar will be pinned open. + * @default false + */ + pinned?: boolean; + /** + * Classnames object defining the component style. + */ + theme?: SidebarTheme; + /** + * Width in standard increments (1-12) or percentage (25, 33, 50, 66, 75, 100) + * @default 5 + */ + width?: number; // 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 33 | 50 | 66 | 75 | 100; +} + +export class Sidebar extends React.Component { } diff --git a/components/layout/index.d.ts b/components/layout/index.d.ts index f06fd16b..162ff8ef 100644 --- a/components/layout/index.d.ts +++ b/components/layout/index.d.ts @@ -1,206 +1,4 @@ -import * as React from "react"; -import ReactToolbox from "../index"; - -export interface LayoutTheme { - /** - * Class used in the container to position and align inner items. - */ - layout?: string; -} - -export interface LayoutProps extends ReactToolbox.Props { - /** - * Children to pass through the component. - */ - children?: [NavDrawer | Panel | Sidebar]; - /** - * Classnames object defining the component style. - */ - theme?: LayoutTheme; -} - -export class Layout extends React.Component { } - -export interface NavDrawerTheme { - /** - * Used when the drawer is active. - */ - active?: string; - /** - * Used for the content of the drawer. - */ - drawerContent?: string; - /** - * Added to the root class for large drawer. - */ - lgPermanent?: string; - /** - * Added to the root class for large drawer (tablet landscape). - */ - lgTabletPermanent?: string; - /** - * Added to the root class for medium drawer. - */ - mdPermanent?: string; - /** - * Root class for the drawer. - */ - navDrawer?: string; - /** - * Added to the root class if positioning is pinned. - */ - pinned?: string; - /** - * Used as a wrapper for the drawer content. - */ - scrim?: string; - /** - * Added to the drawer content if its scrollable. - */ - scrollY?: string; - /** - * Added to the root class for small drawer. - */ - smPermanent?: string; - /** - * Added to the root class for small drawer (tablet portrait). - */ - smTabletPermanent?: string; - /** - * Added to the root class if width is wide. - */ - wide?: string; - /** - * Added to the root class for extra big drawer. - */ - xlPermanent?: string; - /** - * Added to the root class for super big drawer. - */ - xxlPermanent?: string; - /** - * Added to the root class for largest possible drawer. - */ - xxxlPermanent?: string; -} - -export interface NavDrawerProps extends ReactToolbox.Props { - /** - * If true, the drawer will be shown as an overlay. - * @default false - */ - active?: boolean; - /** - * Children to pass through the component. - */ - children?: React.ReactNode; - /** - * Callback function to be invoked when the overlay is clicked. - */ - onOverlayClick?: Function; - /** - * The breakpoint at which the drawer is automatically pinned. - */ - permanentAt?: "sm" | "smTablet" | "md" | "lg" | "lgTablet" | "xl" | "xxl" | "xxxl"; - /** - * If true, the drawer will be pinned open. pinned takes precedence over active. - * @default false - */ - pinned?: boolean; - /** - * If true, the drawer will vertically scroll all content. - * @default false - */ - scrollY?: boolean; - /** - * Classnames object defining the component style. - */ - theme?: NavDrawerTheme; - /** - * 320px or 400px. Only applicable above the sm breakpoint. - * @default normal - */ - width?: "normal" | "wide"; -} - -export class NavDrawer extends React.Component { } - -export interface PanelTheme { - /** - * Used as the root class of the panel component. - */ - panel?: string; - /** - * Used in case the panel is scrollable. - */ - scrollY?: string; -} - -export interface PanelProps extends ReactToolbox.Props { - /** - * Children to pass through the component. - */ - children?: React.ReactNode; - /** - * Callback function to be invoked when the component scrolls. - */ - onScroll?: Function; - /** - * If true, the panel will vertically scroll all content. - * @default false - */ - scrollY?: boolean; - /** - * Classnames object defining the component style. - */ - theme?: PanelTheme; -} - -export class Panel extends React.Component { } - -export interface SidebarTheme { - /** - * Added to the root class if sidebar is pinned. - */ - pinned?: string; - /** - * Add to the content of sidebar if its scrollable. - */ - scrollY?: string; - /** - * Root class of the sidebar. - */ - sidebar?: string; - /** - * Used in for the content element of the sidebar. - */ - sidebarContent?: string; -} - -export interface SidebarProps extends ReactToolbox.Props { - /** - * Children to pass through the component. - */ - children?: React.ReactNode; - /** - * If true, the sidebar will be pinned open. - * @default false - */ - pinned?: boolean; - /** - * If true, the sidebar will vertically scroll all content - * @default false - */ - scrollY?: boolean; - /** - * Classnames object defining the component style. - */ - theme?: SidebarTheme; - /** - * Width in standard increments (1-12) or percentage (25, 33, 50, 66, 75, 100) - * @default 5 - */ - width?: number; // 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 33 | 50 | 66 | 75 | 100; -} - -export class Sidebar extends React.Component { } +export { Layout, LayoutProps, LayoutTheme } from './Layout'; +export { NavDrawer, NavDrawerProps, NavDrawerTheme } from './NavDrawer'; +export { Panel, PanelProps, PanelTheme } from './Panel'; +export { Sidebar, SidebarProps, SidebarTheme } from './Sidebar'; diff --git a/components/link/Link.d.ts b/components/link/Link.d.ts new file mode 100644 index 00000000..89364bff --- /dev/null +++ b/components/link/Link.d.ts @@ -0,0 +1,57 @@ +import * as React from "react"; +import ReactToolbox from "../index"; + +export interface LinkTheme { + /** + * Added to the root element if the Link is active. + */ + active?: string; + /** + * Used for the icon element if it's present. + */ + icon?: string; + /** + * Used for the root element. + */ + link?: string; +} + +export interface LinkProps extends ReactToolbox.Props { + /** + * If true, adds active style to link. + * @default false + */ + active?: boolean; + /** + * Children to pass through the component. + */ + children?: React.ReactNode; + /** + * Sets a count number. + */ + count?: number; + /** + * Sets the anchor link. + */ + href?: string; + /** + * An icon key string to include a FontIcon component in front of the text. + */ + icon?: React.ReactNode; + /** + * The text string used for the text content of the link. + */ + label?: string; + /** + * Classnames object defining the component style. + */ + theme?: LinkTheme; + /** + * Additional parameters passed to anchor element. + */ + [key: string]: any; +} + +export class Link extends React.Component { } + +export default Link; diff --git a/components/link/index.d.ts b/components/link/index.d.ts index 36ae45b4..4b6ca2f4 100644 --- a/components/link/index.d.ts +++ b/components/link/index.d.ts @@ -1,55 +1,5 @@ -import * as React from "react"; -import ReactToolbox from "../index"; +import { Link } from './Link'; -export interface LinkTheme { - /** - * Added to the root element if the Link is active. - */ - active?: string; - /** - * Used for the icon element if it's present. - */ - icon?: string; - /** - * Used for the root element. - */ - link?: string; -} - -export interface LinkProps extends ReactToolbox.Props { - /** - * If true, adds active style to link. - * @default false - */ - active?: boolean; - /** - * Children to pass through the component. - */ - children?: React.ReactNode; - /** - * Sets a count number. - */ - count?: number; - /** - * Sets the anchor link. - */ - href?: string; - /** - * An icon key string to include a FontIcon component in front of the text. - */ - icon?: React.ReactNode | string; - /** - * The text string used for the text content of the link. - */ - label?: string; - /** - * Classnames object defining the component style. - */ - theme?: LinkTheme; - /** - * Additional parameters passed to anchor element. - */ - [key: string]: any; -} - -export class Link extends React.Component { } +export { LinkProps, LinkTheme } from './Link'; +export { Link } +export default Link; diff --git a/components/list/List.d.ts b/components/list/List.d.ts new file mode 100644 index 00000000..01750cab --- /dev/null +++ b/components/list/List.d.ts @@ -0,0 +1,32 @@ +import * as React from "react"; +import ReactToolbox from "../index"; + +export interface ListTheme { + /** + * Used for the root element of the list. + */ + list?: string; +} + +export interface ListProps extends ReactToolbox.Props { + /** + * Children to pass through the component. + */ + children?: React.ReactNode; + /** + * If true, each element in the list will have a ripple effect on click + * @default false + */ + ripple?: boolean; + /** + * If true, the elements in the list will display a hover effect and a pointer cursor. + * @default false + */ + selectable?: boolean; + /** + * Classnames object defining the component style. + */ + theme?: ListTheme; +} + +export class List extends React.Component { } diff --git a/components/list/ListCheckbox.d.ts b/components/list/ListCheckbox.d.ts new file mode 100644 index 00000000..a27cb0ab --- /dev/null +++ b/components/list/ListCheckbox.d.ts @@ -0,0 +1,64 @@ +import * as React from "react"; +import ReactToolbox from "../index"; + +export interface ListCheckboxTheme { + /** + * Used as a wrapper class for the subheader element. + */ + checkbox?: string; + /** + * Added to the checkbox element. + */ + checkboxItem?: string; + /** + * Added to the inner content if its a disabled item. + */ + disabled?: string; + /** + * Used for the inner content of a list item. + */ + item?: string; +} + +export interface ListCheckboxProps extends ReactToolbox.Props { + /** + * Main text of the item. Required. + */ + caption?: string; + /** + * If true the checkbox appears checked by default. + * @default false + */ + checked?: boolean; + /** + * If true, the item is displayed as disabled and it's not clickable. + * @default false + */ + disabled?: boolean; + /** + * Secondary text to display under the caption. + */ + legend?: string; + /** + * Name for the checkbox input item. + */ + name?: string; + /** + * Callback called when the input element is blurred. + */ + onBlur?: Function; + /** + * Callback called when the input element is changed. + */ + onChange?: Function; + /** + * Callback called when the input element is focused. + */ + onFocus?: Function; + /** + * Classnames object defining the component style. + */ + theme?: ListCheckboxTheme; +} + +export class ListCheckbox extends React.Component { } diff --git a/components/list/ListDivider.d.ts b/components/list/ListDivider.d.ts new file mode 100644 index 00000000..ce851bbf --- /dev/null +++ b/components/list/ListDivider.d.ts @@ -0,0 +1,26 @@ +import * as React from "react"; +import ReactToolbox from "../index"; + +export interface ListDividerTheme { + /** + * Added to the root element. + */ + divider?: string; + /** + * Added to root element if inset is true. + */ + inset?: string; +} + +export interface ListDividerProps extends ReactToolbox.Props { + /** + * If true, will leave a space at the left side. + */ + inset?: boolean; + /** + * Classnames object defining the component style. + */ + theme?: ListDividerTheme; +} + +export class ListDivider extends React.Component { } diff --git a/components/list/ListItem.d.ts b/components/list/ListItem.d.ts new file mode 100644 index 00000000..eb8cf066 --- /dev/null +++ b/components/list/ListItem.d.ts @@ -0,0 +1,39 @@ +import * as React from "react"; +import ReactToolbox from '../index'; +import { ListItemContentTheme } from './ListItemContent'; +import { ListItemActionsTheme } from './ListItemActions'; +import { ListItemLayoutProps, ListItemLayoutTheme } from './ListItemLayout'; + +export interface ListItemTheme { + /** + * Used for the root element of the list. + */ + listItem?: string; +} + +export interface ListItemProps extends ReactToolbox.Props { + /** + * Children to pass through the component. + */ + children?: React.ReactNode; + /** + * If true, the item is displayed as disabled and is not clickable. + * @default false + */ + disabled?: boolean; + /** + * If true, the item displays a ripple effect on click. By default it's inherited from the parent element. + */ + ripple?: boolean; + /** + * Classnames object defining the component style. + * @default false + */ + theme?: ListItemTheme & ListItemActionsTheme & ListItemContentTheme & ListItemLayoutTheme; + /** + * In case you want to provide the item as a link, you can pass this property to specify the href. + */ + to?: string; +} + +export class ListItem extends React.Component { } diff --git a/components/list/ListItemAction.d.ts b/components/list/ListItemAction.d.ts new file mode 100644 index 00000000..a53d28c8 --- /dev/null +++ b/components/list/ListItemAction.d.ts @@ -0,0 +1,22 @@ +import * as React from "react"; +import ReactToolbox from "../index"; + +export interface ListItemActionTheme { + /** + * Used for each action element (left/right). + */ + itemAction?: string; +} + +export interface ListItemActionProps { + /** + * List item action. + */ + action?: React.ReactNode; + /** + * Object defining the component class name mappings. + */ + theme?: ListItemActionTheme; +} + +export class ListItemAction extends React.Component { } diff --git a/components/list/ListItemActions.d.ts b/components/list/ListItemActions.d.ts new file mode 100644 index 00000000..a90bdd77 --- /dev/null +++ b/components/list/ListItemActions.d.ts @@ -0,0 +1,31 @@ +import * as React from "react"; +import ReactToolbox from "../index"; +import { ListItemActionTheme } from './ListItemAction'; + +export interface ListItemActionsTheme { + /** + * Added for the element that wraps left actions. + */ + left?: string; + /** + * Added for the element that wraps right actions. + */ + right?: string; +} + +export interface ListItemActionsProps { + /** + * Children to pass through the component. + */ + children?: React.ReactNode; + /** + * Object defining the component class name mappings. + */ + theme?: ListItemActionsTheme & ListItemActionTheme; + /** + * List item action type. + */ + type?: "left" | "right"; +} + +export class ListItemActions extends React.Component { } diff --git a/components/list/ListItemContent.d.ts b/components/list/ListItemContent.d.ts new file mode 100644 index 00000000..97469433 --- /dev/null +++ b/components/list/ListItemContent.d.ts @@ -0,0 +1,46 @@ +import * as React from "react"; +import ReactToolbox from "../index"; + +export interface ListItemContentTheme { + /** + * Added to the content wrapper element if type is "auto". + */ + auto?: string; + /** + * Used for the content wrapper element in list item. + */ + itemContentRoot?: string; + /** + * Added to the content wrapper element if type is "large". + */ + large?: string; + /** + * Added to the content wrapper element if type is "normal". + */ + normal?: string; +} + +export interface ListItemContentProps { + /** + * Main text of the item. + */ + caption?: React.ReactNode; + /** + * Children to pass through the component. + */ + children?: React.ReactNode; + /** + * Secondary text to display under the caption. + */ + legend?: string; + /** + * Object defining the component class name mappings. + */ + theme?: ListItemContentTheme; + /** + * List item content type. + */ + type?: "auto" | "normal" | "large"; +} + +export class ListItemContent extends React.Component { } diff --git a/components/list/ListItemLayout.d.ts b/components/list/ListItemLayout.d.ts new file mode 100644 index 00000000..0bb783de --- /dev/null +++ b/components/list/ListItemLayout.d.ts @@ -0,0 +1,78 @@ +import * as React from "react"; +import ReactToolbox from "../index"; +import { ListItemContentTheme } from './ListItemContent'; +import { ListItemActionsTheme } from './ListItemActions'; + +export interface ListItemLayoutTheme { + /** + * Added to the inner content if its a disabled item. + */ + disabled?: string; + /** + * Used for the inner content of a list item. + */ + item?: string; + /** + * Added when layout is selectable. + */ + selectable?: string; +} + +export interface ListItemLayoutProps extends ReactToolbox.Props { + /** + * A string URL to specify an avatar in the left side of the item. + */ + avatar?: string | React.ReactElement; + /** + * Main text of the item. + */ + caption?: string; + /** + * Children to pass through the component. + */ + children?: React.ReactNode; + /** + * If true, the item is displayed as disabled and it's not clickable. + * @default false + */ + disabled?: boolean; + /** + * Layout content. + */ + itemContent?: React.ReactChild; + /** + * A list of elements that are placed on the left side of the item and after the avatar attribute. + */ + leftActions?: React.ReactNode[]; + /** + * A string key of a font icon or element to display an icon in the left side of the item. + */ + leftIcon?: string | React.ReactElement; + /** + * Secondary text to display under the caption. + */ + legend?: string; + /** + * A list of elements that are placed on the right side of the item and after the rightIcon attribute. + */ + rightActions?: React.ReactNode[]; + /** + * The same as the leftIcon but in this case the icon is displayed in the right side. + */ + rightIcon?: string | React.ReactElement; + /** + * If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent. + * @default false + */ + selectable?: boolean; + /** + * Object defining the component class name mappings. + */ + theme?: ListItemLayoutTheme & ListItemContentTheme & ListItemActionsTheme; + /** + * In case you want to provide the item as a link, you can pass this property to specify the href. + */ + to?: string; +} + +export class ListItemLayout extends React.Component { } diff --git a/components/list/ListItemText.d.ts b/components/list/ListItemText.d.ts new file mode 100644 index 00000000..585d0fb8 --- /dev/null +++ b/components/list/ListItemText.d.ts @@ -0,0 +1,35 @@ +import * as React from "react"; +import ReactToolbox from "../index"; + +export interface ListItemTextTheme { + /** + * Added to the text inside of the list item. + */ + itemText?: string; + /** + * Added to the text inside of the list item if its primary. + */ + primary?: string; +} + +export interface ListItemTextProps extends ReactToolbox.Props { + /** + * Children to pass through the component. + */ + children?: React.ReactNode; + /** + * Whether list item text should have 'primary' look. + * @default + */ + primary?: boolean; + /** + * Object defining the component class name mappings. + */ + theme?: ListItemTextTheme; + /** + * Additional properties passed to root container. + */ + [key: string]: any; +} + +export class ListItemText extends React.Component { } diff --git a/components/list/ListSubHeader.d.ts b/components/list/ListSubHeader.d.ts new file mode 100644 index 00000000..d2ebe01b --- /dev/null +++ b/components/list/ListSubHeader.d.ts @@ -0,0 +1,22 @@ +import * as React from "react"; +import ReactToolbox from "../index"; + +export interface ListSubHeaderTheme { + /** + * Used as a wrapper class for the subheader element. + */ + subheader?: string; +} + +export interface ListSubHeaderProps extends ReactToolbox.Props { + /** + * Text that will be displayed. + */ + caption?: string; + /** + * Classnames object defining the component style. + */ + theme?: ListSubHeaderTheme; +} + +export class ListSubHeader extends React.Component { } diff --git a/components/list/index.d.ts b/components/list/index.d.ts index c3b197ca..2368a267 100644 --- a/components/list/index.d.ts +++ b/components/list/index.d.ts @@ -1,371 +1,10 @@ -import * as React from "react"; -import ReactToolbox from "../index"; - -export interface ListTheme { - /** - * Used for the root element of the list. - */ - list?: string; -} - -export interface ListProps extends ReactToolbox.Props { - /** - * Children to pass through the component. - */ - children?: React.ReactNode; - /** - * If true, each element in the list will have a ripple effect on click - * @default false - */ - ripple?: boolean; - /** - * If true, the elements in the list will display a hover effect and a pointer cursor. - * @default false - */ - selectable?: boolean; - /** - * Classnames object defining the component style. - */ - theme?: ListTheme; -} - -export class List extends React.Component { } - -export interface ListCheckboxTheme { - /** - * Used as a wrapper class for the subheader element. - */ - checkbox?: string; - /** - * Added to the checkbox element. - */ - checkboxItem?: string; - /** - * Added to the inner content if its a disabled item. - */ - disabled?: string; - /** - * Used for the inner content of a list item. - */ - item?: string; -} - -export interface ListCheckboxProps extends ReactToolbox.Props { - /** - * Main text of the item. Required. - */ - caption?: string; - /** - * If true the checkbox appears checked by default. - * @default false - */ - checked?: boolean; - /** - * If true, the item is displayed as disabled and it's not clickable. - * @default false - */ - disabled?: boolean; - /** - * Secondary text to display under the caption. - */ - legend?: string; - /** - * Name for the checkbox input item. - */ - name?: string; - /** - * Callback called when the input element is blurred. - */ - onBlur?: Function; - /** - * Callback called when the input element is changed. - */ - onChange?: Function; - /** - * Callback called when the input element is focused. - */ - onFocus?: Function; - /** - * Classnames object defining the component style. - */ - theme?: ListCheckboxTheme; -} - -export class ListCheckbox extends React.Component { } - -export interface ListDividerTheme { - /** - * Added to the root element. - */ - divider?: string; - /** - * Added to root element if inset is true. - */ - inset?: string; -} - -export interface ListDividerProps extends ReactToolbox.Props { - /** - * If true, will leave a space at the left side. - */ - inset?: boolean; - /** - * Classnames object defining the component style. - */ - theme?: ListDividerTheme; -} - -export class ListDivider extends React.Component { } - -export interface ListItemTheme { - /** - * Used for the root element of the list. - */ - listItem?: string; -} - -export interface ListItemProps extends ReactToolbox.Props { - /** - * Children to pass through the component. - */ - children?: React.ReactNode; - /** - * If true, the item is displayed as disabled and is not clickable. - * @default false - */ - disabled?: boolean; - /** - * If true, the item displays a ripple effect on click. By default it's inherited from the parent element. - */ - ripple?: boolean; - /** - * Classnames object defining the component style. - * @default false - */ - theme?: ListItemTheme; - /** - * In case you want to provide the item as a link, you can pass this property to specify the href. - */ - to?: string; -} - -export class ListItem extends React.Component { } - -export interface ListSubHeaderTheme { - /** - * Used as a wrapper class for the subheader element. - */ - subheader?: string; -} - -export interface ListSubHeaderProps extends ReactToolbox.Props { - /** - * Text that will be displayed. - */ - caption?: string; - /** - * Classnames object defining the component style. - */ - theme?: ListSubHeaderTheme; -} - -export class ListSubHeader extends React.Component { } - -export interface ListItemActionTheme { - /** - * Used for each action element (left/right). - */ - itemAction?: string; -} - -export interface ListItemActionProps { - /** - * List item action. - */ - action?: React.ReactNode; - /** - * Object defining the component class name mappings. - */ - theme?: ListItemActionTheme; -} - -export class ListItemAction extends React.Component { } - -export interface ListItemActionsTheme { - /** - * Added for the element that wraps left actions. - */ - left?: string; - /** - * Added for the element that wraps right actions. - */ - right?: string; -} - -export interface ListItemActionsProps { - /** - * Children to pass through the component. - */ - children?: React.ReactNode; - /** - * Object defining the component class name mappings. - */ - theme?: ListItemActionsTheme & ListItemActionTheme; - /** - * List item action type. - */ - type?: "left" | "right"; -} - -export class ListItemActions extends React.Component { } - -export interface ListItemContentTheme { - /** - * Added to the content wrapper element if type is "auto". - */ - auto?: string; - /** - * Used for the content wrapper element in list item. - */ - itemContentRoot?: string; - /** - * Added to the content wrapper element if type is "large". - */ - large?: string; - /** - * Added to the content wrapper element if type is "normal". - */ - normal?: string; -} - -export interface ListItemContentProps { - /** - * Main text of the item. - */ - caption?: React.ReactNode; - /** - * Children to pass through the component. - */ - children?: React.ReactNode; - /** - * Secondary text to display under the caption. - */ - legend?: string; - /** - * Object defining the component class name mappings. - */ - theme?: ListItemContentTheme; - /** - * List item content type. - */ - type?: "auto" | "normal" | "large"; -} - -export class ListItemContent extends React.Component { } - -export interface ListItemLayoutTheme { - /** - * Added to the inner content if its a disabled item. - */ - disabled?: string; - /** - * Used for the inner content of a list item. - */ - item?: string; - /** - * Added when layout is selectable. - */ - selectable?: string; -} - -export interface ListItemLayoutProps extends ReactToolbox.Props { - /** - * A string URL to specify an avatar in the left side of the item. - */ - avatar?: string | React.ReactElement; - /** - * Main text of the item. - */ - caption?: string; - /** - * Children to pass through the component. - */ - children?: React.ReactNode; - /** - * If true, the item is displayed as disabled and it's not clickable. - * @default false - */ - disabled?: boolean; - /** - * Layout content. - */ - itemContent?: React.ReactChild; - /** - * A list of elements that are placed on the left side of the item and after the avatar attribute. - */ - leftActions?: React.ReactNode[]; - /** - * A string key of a font icon or element to display an icon in the left side of the item. - */ - leftIcon?: string | React.ReactElement; - /** - * Secondary text to display under the caption. - */ - legend?: string; - /** - * A list of elements that are placed on the right side of the item and after the rightIcon attribute. - */ - rightActions?: React.ReactNode[]; - /** - * The same as the leftIcon but in this case the icon is displayed in the right side. - */ - rightIcon?: string | React.ReactElement; - /** - * If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent. - * @default false - */ - selectable?: boolean; - /** - * Object defining the component class name mappings. - */ - theme?: ListItemLayoutTheme & ListItemContentTheme & ListItemActionsTheme; - /** - * In case you want to provide the item as a link, you can pass this property to specify the href. - */ - to?: string; -} - -export class ListItemLayout extends React.Component { } - -export interface ListItemTextTheme { - /** - * Added to the text inside of the list item. - */ - itemText?: string; - /** - * Added to the text inside of the list item if its primary. - */ - primary?: string; -} - -export interface ListItemTextProps extends ReactToolbox.Props { - /** - * Children to pass through the component. - */ - children?: React.ReactNode; - /** - * Whether list item text should have 'primary' look. - * @default - */ - primary?: boolean; - /** - * Object defining the component class name mappings. - */ - theme?: ListItemTextTheme; - /** - * Additional properties passed to root container. - */ - [key: string]: any; -} - -export class ListItemText extends React.Component { } +export { List, ListProps, ListTheme } from './List'; +export { ListCheckbox, ListCheckboxProps, ListCheckboxTheme } from './ListCheckbox'; +export { ListDivider, ListDividerProps, ListDividerTheme } from './ListDivider'; +export { ListItem, ListItemProps, ListItemTheme } from './ListItem'; +export { ListItemAction, ListItemActionProps, ListItemActionTheme } from './ListItemAction'; +export { ListItemActions, ListItemActionsProps, ListItemActionsTheme } from './ListItemActions'; +export { ListItemContent, ListItemContentProps, ListItemContentTheme } from './ListItemContent'; +export { ListItemLayout, ListItemLayoutProps, ListItemLayoutTheme } from './ListItemLayout'; +export { ListItemText, ListItemTextProps, ListItemTextTheme } from './ListItemText'; +export { ListSubHeader, ListSubHeaderProps, ListSubHeaderTheme } from './ListSubHeader'; diff --git a/components/menu/IconMenu.d.ts b/components/menu/IconMenu.d.ts new file mode 100644 index 00000000..6fbab80f --- /dev/null +++ b/components/menu/IconMenu.d.ts @@ -0,0 +1,69 @@ +import * as React from "react"; +import ReactToolbox from "../index"; + +export interface IconMenuTheme { + /** + * Used for the icon element. + */ + icon?: string; + /** + * Used for the root element of the icon menu. + */ + iconMenu?: string; +} + +export interface IconMenuProps extends ReactToolbox.Props { + /** + * Children to pass through the component. + */ + children?: React.ReactNode; + /** + * Icon font key string or Element to display the opener icon. + * @default more_vert + */ + icon?: React.ReactNode; + /** + * If true, the icon will show a ripple when is clicked. + * @default true + */ + iconRipple?: boolean; + /** + * Transferred to the Menu component. + * @default true + */ + menuRipple?: boolean; + /** + * Callback that will be called when the menu is being hidden. + */ + onHide?: Function; + /** + * Callback that will be invoked when a menu item is selected. + */ + onSelect?: Function; + /** + * Callback that will be invoked when the menu is being shown. + */ + onShow?: Function; + /** + * Determines the position of the menu. This property is transferred to the inner Menu component. + * @default auto + */ + position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight"; + /** + * If true, the menu will keep a value to highlight the active child item. + * @default false + */ + selectable?: boolean; + /** + * Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted. + */ + selected?: any; + /** + * Classnames object defining the component style. + */ + theme?: IconMenuTheme; +} + +export class IconMenu extends React.Component { } + +export default IconMenu; diff --git a/components/menu/Menu.d.ts b/components/menu/Menu.d.ts new file mode 100644 index 00000000..0d6c5fac --- /dev/null +++ b/components/menu/Menu.d.ts @@ -0,0 +1,101 @@ +import * as React from "react"; +import ReactToolbox from "../index"; + +export interface MenuTheme { + /** + * Added to the root element when menu is active. + */ + active?: string; + /** + * Added to the root when position is bottom left. + */ + bottomLeft?: string; + /** + * Added to the root when position is bottom right. + */ + bottomRight?: string; + /** + * Used for the root element of the menu. + */ + menu?: string; + /** + * Used for the inner wrapper. + */ + menuInner?: string; + /** + * Used to draw the outline. + */ + outline?: string; + /** + * Added to the menu in case if should have ripple. + */ + rippled?: string; + /** + * Added to the root in case its static. + */ + static?: string; + /** + * Added to the root when position is top left. + */ + topLeft?: string; + /** + * Added to the root when position is top right. + */ + topRight?: string; +} + +export interface MenuProps extends ReactToolbox.Props { + /** + * If true, the menu will be displayed as opened by default. + * @default false + */ + active?: boolean; + /** + * Children to pass through the component. + */ + children?: React.ReactNode; + /** + * Callback that will be called when the menu is being hidden. + */ + onHide?: Function; + /** + * Callback that will be invoked when a menu item is selected. + */ + onSelect?: Function; + /** + * Callback that will be invoked when the menu is being shown. + */ + onShow?: Function; + /** + * If true the menu wrapper will show an outline with a soft shadow. + * @default true + */ + outline?: boolean; + /** + * Determine the position of the menu. With static value the menu will be always shown, auto means that the it will decide the opening direction based on the current position. To force a position use topLeft, topRight, bottomLeft, bottomRight. + * @default static + */ + position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight"; + /** + * If true, the menu items will show a ripple effect on click. + * @default true + */ + ripple?: boolean; + /** + * If true, the menu will keep a value to highlight the active child item. + * @default true + */ + selectable?: boolean; + /** + * Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted. + */ + selected?: any; + /** + * Classnames object defining the component style. + */ + theme?: MenuTheme; +} + +export class Menu extends React.Component { } + +export default Menu; diff --git a/components/menu/MenuDivider.d.ts b/components/menu/MenuDivider.d.ts new file mode 100644 index 00000000..dcbaf8c3 --- /dev/null +++ b/components/menu/MenuDivider.d.ts @@ -0,0 +1,20 @@ +import * as React from "react"; +import ReactToolbox from "../index"; + +export interface MenuDividerTheme { + /** + * + */ + menuDivider?: string; +} + +export interface MenuDividerProps extends ReactToolbox.Props { + /** + * Classnames object defining the component style. + */ + theme?: MenuDividerTheme; +} + +export class MenuDivider extends React.Component { } + +export default MenuDivider; diff --git a/components/menu/MenuItem.d.ts b/components/menu/MenuItem.d.ts new file mode 100644 index 00000000..265f0576 --- /dev/null +++ b/components/menu/MenuItem.d.ts @@ -0,0 +1,66 @@ +import * as React from "react"; +import ReactToolbox from "../index"; + +export interface MenuItemTheme { + /** + * Used for the caption inside the item. + */ + caption?: string; + /** + * Added to the root element if it's disabled. + */ + disabled?: string; + /** + * Used for the icon element if exists. + */ + icon?: string; + /** + * Used as the root class for the component. + */ + menuItem?: string; + /** + * Added to the root element in case it's selected. + */ + selected?: string; + /** + * Used for the shortcut element if exists. + */ + shortcut?: string; +} + +export interface MenuItemProps extends ReactToolbox.Props { + /** + * The text to include in the menu item. Required. + */ + caption: string; + /** + * Children to pass through the component. + */ + children?: React.ReactNode; + /** + * If true, the item will be displayed as disabled and is not selectable. + * @default false + */ + disabled?: boolean; + /** + * Icon font key string or Element to display in the right side of the option. + */ + icon?: React.ReactNode; + /** + * Transferred from the Menu component for selectable menus. Indicates if it's the current active option. + * @default false + */ + selected?: boolean; + /** + * Displays shortcut text on the right side of the caption attribute. + */ + shortcut?: string; + /** + * Classnames object defining the component style. + */ + theme?: MenuItemTheme; +} + +export class MenuItem extends React.Component { } + +export default MenuItem; diff --git a/components/menu/index.d.ts b/components/menu/index.d.ts index d8de21a2..0390410d 100644 --- a/components/menu/index.d.ts +++ b/components/menu/index.d.ts @@ -1,242 +1,4 @@ -import * as React from "react"; -import ReactToolbox from "../index"; - -export interface MenuTheme { - /** - * Added to the root element when menu is active. - */ - active?: string; - /** - * Added to the root when position is bottom left. - */ - bottomLeft?: string; - /** - * Added to the root when position is bottom right. - */ - bottomRight?: string; - /** - * Used for the root element of the menu. - */ - menu?: string; - /** - * Used for the inner wrapper. - */ - menuInner?: string; - /** - * Used to draw the outline. - */ - outline?: string; - /** - * Added to the menu in case if should have ripple. - */ - rippled?: string; - /** - * Added to the root in case its static. - */ - static?: string; - /** - * Added to the root when position is top left. - */ - topLeft?: string; - /** - * Added to the root when position is top right. - */ - topRight?: string; -} - -export interface MenuProps extends ReactToolbox.Props { - /** - * If true, the menu will be displayed as opened by default. - * @default false - */ - active?: boolean; - /** - * Children to pass through the component. - */ - children?: React.ReactNode; - /** - * Callback that will be called when the menu is being hidden. - */ - onHide?: Function; - /** - * Callback that will be invoked when a menu item is selected. - */ - onSelect?: Function; - /** - * Callback that will be invoked when the menu is being shown. - */ - onShow?: Function; - /** - * If true the menu wrapper will show an outline with a soft shadow. - * @default true - */ - outline?: boolean; - /** - * Determine the position of the menu. With static value the menu will be always shown, auto means that the it will decide the opening direction based on the current position. To force a position use topLeft, topRight, bottomLeft, bottomRight. - * @default static - */ - position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight"; - /** - * If true, the menu items will show a ripple effect on click. - * @default true - */ - ripple?: boolean; - /** - * If true, the menu will keep a value to highlight the active child item. - * @default true - */ - selectable?: boolean; - /** - * Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted. - */ - selected?: any; - /** - * Classnames object defining the component style. - */ - theme?: MenuTheme; -} - -export class Menu extends React.Component { } - -export interface IconMenuTheme { - /** - * Used for the icon element. - */ - icon?: string; - /** - * Used for the root element of the icon menu. - */ - iconMenu?: string; -} - -export interface IconMenuProps extends ReactToolbox.Props { - /** - * Children to pass through the component. - */ - children?: React.ReactNode; - /** - * Icon font key string or Element to display the opener icon. - * @default more_vert - */ - icon?: React.ReactNode | string; - /** - * If true, the icon will show a ripple when is clicked. - * @default true - */ - iconRipple?: boolean; - /** - * Transferred to the Menu component. - * @default true - */ - menuRipple?: boolean; - /** - * Callback that will be called when the menu is being hidden. - */ - onHide?: Function; - /** - * Callback that will be invoked when a menu item is selected. - */ - onSelect?: Function; - /** - * Callback that will be invoked when the menu is being shown. - */ - onShow?: Function; - /** - * Determines the position of the menu. This property is transferred to the inner Menu component. - * @default auto - */ - position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight"; - /** - * If true, the menu will keep a value to highlight the active child item. - * @default false - */ - selectable?: boolean; - /** - * Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted. - */ - selected?: any; - /** - * Classnames object defining the component style. - */ - theme?: IconMenuTheme; -} - -export class IconMenu extends React.Component { } - -export interface MenuDividerTheme { - /** - * - */ - menuDivider?: string; -} - -export interface MenuDividerProps extends ReactToolbox.Props { - /** - * Classnames object defining the component style. - */ - theme?: MenuDividerTheme; -} - -export class MenuDivider extends React.Component { } - -export interface MenuItemTheme { - /** - * Used for the caption inside the item. - */ - caption?: string; - /** - * Added to the root element if it's disabled. - */ - disabled?: string; - /** - * Used for the icon element if exists. - */ - icon?: string; - /** - * Used as the root class for the component. - */ - menuItem?: string; - /** - * Added to the root element in case it's selected. - */ - selected?: string; - /** - * Used for the shortcut element if exists. - */ - shortcut?: string; -} - -export interface MenuItemProps extends ReactToolbox.Props { - /** - * The text to include in the menu item. Required. - */ - caption: string; - /** - * Children to pass through the component. - */ - children?: React.ReactNode; - /** - * If true, the item will be displayed as disabled and is not selectable. - * @default false - */ - disabled?: boolean; - /** - * Icon font key string or Element to display in the right side of the option. - */ - icon?: React.ReactNode | string; - /** - * Transferred from the Menu component for selectable menus. Indicates if it's the current active option. - * @default false - */ - selected?: boolean; - /** - * Displays shortcut text on the right side of the caption attribute. - */ - shortcut?: string; - /** - * Classnames object defining the component style. - */ - theme?: MenuItemTheme; -} - -export class MenuItem extends React.Component { } +export { IconMenu, IconMenuProps, IconMenuTheme } from './IconMenu'; +export { Menu, MenuProps, MenuTheme } from './Menu'; +export { MenuDivider, MenuDividerProps, MenuDividerTheme } from './MenuDivider'; +export { MenuItem, MenuItemProps, MenuItemTheme } from './MenuItem'; diff --git a/components/navigation/Navigation.d.ts b/components/navigation/Navigation.d.ts new file mode 100644 index 00000000..f85c0eb4 --- /dev/null +++ b/components/navigation/Navigation.d.ts @@ -0,0 +1,49 @@ +import * as React from "react"; +import ReactToolbox from "../index"; + +export interface NavigationTheme { + /** + * Used for buttons provided in the component. + */ + button?: string; + /** + * Used for the root element if the layout is horizontal. + */ + horizontal?: string; + /** + * Used for links provided in the component. + */ + link?: string; + /** + * Used for the root element if the layout is vertical. + */ + vertical?: string; +} + +export interface NavigationProps extends ReactToolbox.Props { + /** + * Array of objects that will be represented as