commit
cd0c72cbd6
|
@ -270,7 +270,11 @@ const factory = (Chip, Input) => {
|
|||
}
|
||||
|
||||
render () {
|
||||
const {error, label, theme, ...other} = this.props;
|
||||
const {
|
||||
error, label, source, suggestionMatch, //eslint-disable-line no-unused-vars
|
||||
selectedPosition, showSuggestionsWhenValueIsSet, //eslint-disable-line no-unused-vars
|
||||
theme, ...other
|
||||
} = this.props;
|
||||
const className = classnames(theme.autocomplete, {
|
||||
[theme.focus]: this.state.focus
|
||||
}, this.props.className);
|
||||
|
|
|
@ -1,11 +1,12 @@
|
|||
import React, { PropTypes } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { themr } from 'react-css-themr';
|
||||
import { AVATAR } from '../identifiers.js';
|
||||
import InjectFontIcon from '../font_icon/FontIcon.js';
|
||||
|
||||
const factory = (FontIcon) => {
|
||||
const Avatar = ({children, className, icon, image, theme, title, ...other}) => (
|
||||
<div data-react-toolbox='avatar' className={`${theme.avatar} ${className}`} {...other}>
|
||||
<div data-react-toolbox='avatar' className={classnames(theme.avatar, className)} {...other}>
|
||||
{children}
|
||||
{typeof image === 'string' ? <img className={theme.image} src={image} title={title} /> : image}
|
||||
{typeof icon === 'string' ? <FontIcon className={theme.letter} value={icon} /> : icon}
|
||||
|
|
|
@ -141,7 +141,7 @@ const factory = (Input) => {
|
|||
}
|
||||
|
||||
render () {
|
||||
const {template, theme, source, ...others} = this.props;
|
||||
const {template, theme, source, allowBlank, auto, ...others} = this.props; //eslint-disable-line no-unused-vars
|
||||
const selected = this.getSelectedItem();
|
||||
const className = classnames(theme.dropdown, {
|
||||
[theme.up]: this.state.up,
|
||||
|
|
|
@ -42,16 +42,20 @@ const factory = (ripple, ListItemLayout, ListItemContent) => {
|
|||
if (!React.isValidElement(child)) {
|
||||
return;
|
||||
}
|
||||
if (child.props.listItemIgnore) {
|
||||
children.ignored.push(child);
|
||||
|
||||
const { listItemIgnore, ...rest } = child.props;
|
||||
const strippedChild = { ...child, ...{ props: rest } };
|
||||
|
||||
if (listItemIgnore) {
|
||||
children.ignored.push(strippedChild);
|
||||
return;
|
||||
}
|
||||
if (child.type === ListItemContent) {
|
||||
children.itemContent = child;
|
||||
children.itemContent = strippedChild;
|
||||
return;
|
||||
}
|
||||
const bucket = children.itemContent ? 'rightActions' : 'leftActions';
|
||||
children[bucket].push({...child, key: i});
|
||||
children[bucket].push({...strippedChild, key: i});
|
||||
});
|
||||
|
||||
return children;
|
||||
|
|
|
@ -113,6 +113,7 @@ const rippleFactory = (options = {}) => {
|
|||
const {
|
||||
children,
|
||||
ripple, //eslint-disable-line no-unused-vars
|
||||
onRippleEnded, //eslint-disable-line no-unused-vars
|
||||
rippleClassName: className,
|
||||
rippleCentered: centered, //eslint-disable-line no-unused-vars
|
||||
rippleSpread: spread, //eslint-disable-line no-unused-vars
|
||||
|
|
|
@ -13,9 +13,9 @@
|
|||
"classnames": "^2.2.5",
|
||||
"codemirror": "^5.14.2",
|
||||
"history": "^2.1.1",
|
||||
"react": "^15.0.2",
|
||||
"react-css-themr": "^1.1.0",
|
||||
"react-dom": "^15.0.2",
|
||||
"react": "^15.2.0",
|
||||
"react-css-themr": "^1.1.2",
|
||||
"react-dom": "^15.2.0",
|
||||
"react-router": "^2.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
@ -1,58 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
|
||||
export interface AppBarProps extends Props {
|
||||
/**
|
||||
* If true, the AppBar shows a shadow.
|
||||
* @default false
|
||||
*/
|
||||
flat?: boolean,
|
||||
/**
|
||||
* Determine if the bar should have position fixed (true) or relative (false)
|
||||
* @default false
|
||||
*/
|
||||
fixed?: boolean,
|
||||
}
|
||||
/**
|
||||
* The app bar is a special kind of toolbar that<EFBFBD>s used for branding, navigation, search, and actions.
|
||||
* Usually it contains controls on the right and left side and a title with the current section or app name.
|
||||
* You should give the content with children elements.
|
||||
*/
|
||||
export class AppBar extends React.Component<AppBarProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export default AppBar;
|
|
@ -393,9 +393,15 @@ var factory = function factory(Chip, Input) {
|
|||
var _props = this.props;
|
||||
var error = _props.error;
|
||||
var label = _props.label;
|
||||
var theme = _props.theme;
|
||||
var source = _props.source;
|
||||
var suggestionMatch = _props.suggestionMatch;
|
||||
var //eslint-disable-line no-unused-vars
|
||||
selectedPosition = _props.selectedPosition;
|
||||
var showSuggestionsWhenValueIsSet = _props.showSuggestionsWhenValueIsSet;
|
||||
var //eslint-disable-line no-unused-vars
|
||||
theme = _props.theme;
|
||||
|
||||
var other = _objectWithoutProperties(_props, ['error', 'label', 'theme']);
|
||||
var other = _objectWithoutProperties(_props, ['error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'showSuggestionsWhenValueIsSet', 'theme']);
|
||||
|
||||
var className = (0, _classnames5.default)(theme.autocomplete, _defineProperty({}, theme.focus, this.state.focus), this.props.className);
|
||||
|
||||
|
|
|
@ -1,97 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
export interface Conditional {
|
||||
/**
|
||||
* If true, component will be disabled
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Properties of components that have values that can be changed (T is the type of the value)
|
||||
*/
|
||||
export interface Changeable<T> {
|
||||
/**
|
||||
* Callback called when the picker value is changed.
|
||||
* @param v Type of the value
|
||||
*/
|
||||
onChange?: (v: T) => void
|
||||
}
|
||||
|
||||
export interface AutocompleteProps extends Props, Conditional, Changeable<string | Array<any>> {
|
||||
/**
|
||||
* Sets the error string for the internal input element.
|
||||
*/
|
||||
error?: string,
|
||||
/**
|
||||
* The text string to use for the floating label element.
|
||||
*/
|
||||
label?: string,
|
||||
/**
|
||||
* If true, component can hold multiple values.
|
||||
* @default true
|
||||
*/
|
||||
multiple?: boolean,
|
||||
/**
|
||||
* Object of key/values or array representing all items suggested.
|
||||
*/
|
||||
source: Object | Array<any>,
|
||||
/**
|
||||
* If true, the list of suggestions will not be filtered when a value is selected, until the query is modified.
|
||||
* @default false
|
||||
*/
|
||||
showSuggestionsWhenValueIsSet?: boolean,
|
||||
/**
|
||||
* Type of the input element. It can be a valid HTML5 input type
|
||||
* @default text
|
||||
*/
|
||||
type?: string,
|
||||
/**
|
||||
* Value or array of values currently selected component.Current value of the input element.
|
||||
*/
|
||||
value?: string | Array<any>,
|
||||
}
|
||||
/**
|
||||
* An input field with a set of predeterminated labeled values. When it's focused it shows a list of hints that are filtered by label as the user types.
|
||||
* They can be simple or multiple depending on the amount of values that can be selected.
|
||||
* The opening direction is determined at opening time depending on the current position.
|
||||
*/
|
||||
export class Autocomplete extends React.Component<AutocompleteProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export default Autocomplete;
|
|
@ -11,6 +11,10 @@ var _react = require('react');
|
|||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames = require('classnames');
|
||||
|
||||
var _classnames2 = _interopRequireDefault(_classnames);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
@ -36,7 +40,7 @@ var factory = function factory(FontIcon) {
|
|||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
_extends({ 'data-react-toolbox': 'avatar', className: theme.avatar + ' ' + className }, other),
|
||||
_extends({ 'data-react-toolbox': 'avatar', className: (0, _classnames2.default)(theme.avatar, className) }, other),
|
||||
children,
|
||||
typeof image === 'string' ? _react2.default.createElement('img', { className: theme.image, src: image, title: title }) : image,
|
||||
typeof icon === 'string' ? _react2.default.createElement(FontIcon, { className: theme.letter, value: icon }) : icon,
|
||||
|
|
|
@ -1,57 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
export interface Iconic {
|
||||
/**
|
||||
* Value of the icon (See icon component).
|
||||
*/
|
||||
icon?: string | React.ReactElement<any> | React.ReactHTMLElement<any>,
|
||||
}
|
||||
export interface AvatarProps extends Props, Iconic {
|
||||
children?: any,
|
||||
image?: string | React.ReactElement<any> | React.ReactHTMLElement<any> | React.ClassicComponent<any, any>,
|
||||
title?: string | boolean,
|
||||
}
|
||||
/**
|
||||
* Avatars can be used to represent people.
|
||||
* For personal avatars, offer personalization options.
|
||||
* As users may choose not to personalize an avatar, provide delightful defaults.
|
||||
* When used with a specific logo, avatars can also be used to represent brand.
|
||||
*/
|
||||
export class Avatar extends React.Component<AvatarProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export default Avatar;
|
|
@ -1,124 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
|
||||
// Interface for components with icons
|
||||
export interface Iconic {
|
||||
/**
|
||||
* Value of the icon (See icon component).
|
||||
*/
|
||||
icon?: string | React.ReactElement<any> | React.ReactHTMLElement<any>,
|
||||
}
|
||||
|
||||
export interface Conditional {
|
||||
/**
|
||||
* If true, component will be disabled
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Properties of components that can be clicked
|
||||
*/
|
||||
export interface Clickable {
|
||||
/**
|
||||
* Callback called when the button is clicked.
|
||||
*/
|
||||
onClick?: Function
|
||||
}
|
||||
export interface ButtonProps extends Props, Clickable, Conditional, Iconic {
|
||||
/**
|
||||
* Indicates if the button should have accent color.
|
||||
* @default false
|
||||
*/
|
||||
accent?: boolean,
|
||||
/**
|
||||
* If true, the button will have a flat look.
|
||||
* @default false
|
||||
*/
|
||||
flat?: boolean,
|
||||
/**
|
||||
* If true, the button will have a floating look.
|
||||
* @default false
|
||||
*/
|
||||
floating?: boolean,
|
||||
/**
|
||||
* If specified, the button will be rendered as an <a>
|
||||
*/
|
||||
href?: string,
|
||||
/**
|
||||
* The text string to use for the name of the button.
|
||||
*/
|
||||
label?: string,
|
||||
/**
|
||||
* If true, component will be disabled and show a loading animation.
|
||||
* @default false
|
||||
*/
|
||||
loading?: boolean,
|
||||
/**
|
||||
* To be used with floating button. If true the button will be smaller.
|
||||
* @default false
|
||||
*/
|
||||
mini?: boolean,
|
||||
/**
|
||||
* Indicates if the button should have primary color.
|
||||
* @default false
|
||||
*/
|
||||
primary?: boolean,
|
||||
/**
|
||||
* If true, the button will have a raised look.
|
||||
* @default false
|
||||
*/
|
||||
raised?: boolean,
|
||||
/**
|
||||
* If true, component will have a ripple effect on click.
|
||||
* @default true
|
||||
*/
|
||||
ripple?: boolean,
|
||||
}
|
||||
/**
|
||||
* A button clearly communicates what action will occur when the user touches it.
|
||||
* It consists of text, an image, or both, designed in accordance with your app’s color theme.
|
||||
*/
|
||||
export class Button extends React.Component<ButtonProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export class IconButton extends React.Component<ButtonProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export default Button;
|
|
@ -1,225 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
export interface Iconic {
|
||||
/**
|
||||
* Value of the icon (See icon component).
|
||||
*/
|
||||
icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
|
||||
}
|
||||
|
||||
export interface Conditional {
|
||||
/**
|
||||
* If true, component will be disabled
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Properties of components that can be clicked
|
||||
*/
|
||||
export interface Clickable {
|
||||
/**
|
||||
* Callback called when the button is clicked.
|
||||
*/
|
||||
onClick?: Function
|
||||
}
|
||||
export interface ButtonProps extends Props, Clickable, Conditional, Iconic {
|
||||
/**
|
||||
* Indicates if the button should have accent color.
|
||||
* @default false
|
||||
*/
|
||||
accent?: boolean,
|
||||
/**
|
||||
* If true, the button will have a flat look.
|
||||
* @default false
|
||||
*/
|
||||
flat?: boolean,
|
||||
/**
|
||||
* If true, the button will have a floating look.
|
||||
* @default false
|
||||
*/
|
||||
floating?: boolean,
|
||||
/**
|
||||
* If specified, the button will be rendered as an <a>
|
||||
*/
|
||||
href?: string,
|
||||
/**
|
||||
* The text string to use for the name of the button.
|
||||
*/
|
||||
label?: string,
|
||||
/**
|
||||
* If true, component will be disabled and show a loading animation.
|
||||
* @default false
|
||||
*/
|
||||
loading?: boolean,
|
||||
/**
|
||||
* To be used with floating button. If true the button will be smaller.
|
||||
* @default false
|
||||
*/
|
||||
mini?: boolean,
|
||||
/**
|
||||
* Indicates if the button should have primary color.
|
||||
* @default false
|
||||
*/
|
||||
primary?: boolean,
|
||||
/**
|
||||
* If true, the button will have a raised look.
|
||||
* @default false
|
||||
*/
|
||||
raised?: boolean,
|
||||
/**
|
||||
* If true, component will have a ripple effect on click.
|
||||
* @default true
|
||||
*/
|
||||
ripple?: boolean,
|
||||
}
|
||||
export interface CardProps extends Props, Clickable {
|
||||
/**
|
||||
* Child components, usually Card subcomponents.
|
||||
*/
|
||||
children?: any,
|
||||
/**
|
||||
* Increases the shadow depth to appear elevated.
|
||||
*/
|
||||
raised?: boolean,
|
||||
/**
|
||||
* Array of objects describing actions. These actions will be rendered as buttons and the object fields will be transferred to those.
|
||||
* @default []
|
||||
*/
|
||||
actions?: Array<ButtonProps>,
|
||||
/**
|
||||
* Sets HEX or RGBA color to add a colored layer to the heading.
|
||||
*/
|
||||
color?: string,
|
||||
/**
|
||||
* URL to set as a background image in the heading.
|
||||
*/
|
||||
image?: string,
|
||||
|
||||
/**
|
||||
* Type of the component to display general modifications. It can be 'wide' for a larger card, 'image' if it's an image card or 'event' which shows just a title on top.
|
||||
*/
|
||||
type?: string,
|
||||
}
|
||||
/**
|
||||
* A Card is a piece of paper with unique related data that serves as an entry point to more detailed information.
|
||||
* For example, a card could contain a photo, text, and a link about a single subject.
|
||||
* Cards are composed of multiple subcomponents in React Toolbox.
|
||||
* You can combine each of the subcomponents to create all different Material Design Cards given in the spec.
|
||||
*/
|
||||
export class Card extends React.Component<CardProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
export interface CardTitleProps extends Props {
|
||||
avatar?: string | React.ReactElement<any> | React.ReactHTMLElement<any> | React.ClassicComponent<any, any>,
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: any,
|
||||
/**
|
||||
* Sets a complementary smaller text under the title.
|
||||
*/
|
||||
subtitle?: string,
|
||||
/**
|
||||
* Sets the title of the card.
|
||||
*/
|
||||
title?: string | boolean,
|
||||
}
|
||||
/**
|
||||
* A versatile title block that can be used in various places on the card, including the media area.
|
||||
* This component can also display an avatar next to the title content.
|
||||
*/
|
||||
export class CardTitle extends React.Component<CardTitleProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
export interface CardMediaProps extends Props {
|
||||
/**
|
||||
* Forces a ('wide' 16:9) or ('square' 1:1) aspect ratio respectively.
|
||||
* Unset, the media area will have a flexible height.
|
||||
* @default ''
|
||||
*/
|
||||
aspectRatio?: string,
|
||||
/**
|
||||
* Usually an image/video element or a <CardTitle> component.
|
||||
*/
|
||||
children?: any,
|
||||
/**
|
||||
* Sets the background color
|
||||
*/
|
||||
color?: string,
|
||||
/**
|
||||
* Creates a dark overlay underneath the child components.
|
||||
*/
|
||||
contentOverlay?: boolean,
|
||||
/**
|
||||
* Can be used instead of children. Accepts an element or a URL string.
|
||||
*/
|
||||
image?: string | React.ReactElement<any> | React.ReactHTMLElement<any> | React.ClassicComponent<any, any>,
|
||||
}
|
||||
/**
|
||||
* Used for displaying media such as images or videos on a card.
|
||||
* Can also be used with a solid background color instead of an image.
|
||||
*/
|
||||
export class CardMedia extends React.Component<CardMediaProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
export interface CardTextProps extends Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: any,
|
||||
}
|
||||
/**
|
||||
* Basic card content container.
|
||||
* Good for small descriptions or other supplementary text.
|
||||
*/
|
||||
export class CardText extends React.Component<CardTextProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
export interface CardActionsProps extends Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: any,
|
||||
}
|
||||
/**
|
||||
* This component is used as a container for supplemental card actions.
|
||||
* Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.
|
||||
*/
|
||||
export class CardActions extends React.Component<CardActionsProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
|
@ -1,82 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
export interface Conditional {
|
||||
/**
|
||||
* If true, component will be disabled
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Properties of components that have values that can be changed (T is the type of the value)
|
||||
*/
|
||||
export interface Changeable<T> {
|
||||
/**
|
||||
* Callback called when the picker value is changed.
|
||||
* @param v Type of the value
|
||||
*/
|
||||
onChange?: (v: T) => void
|
||||
}
|
||||
|
||||
export interface CheckboxProps extends Props, Changeable<boolean>, Conditional {
|
||||
/**
|
||||
* Value for the checkbox, can be true or false.
|
||||
* @default false
|
||||
*/
|
||||
checked?: boolean,
|
||||
/**
|
||||
* Text label to attach next to the checkbox element.
|
||||
*/
|
||||
label?: string,
|
||||
/**
|
||||
* The name of the field to set in the input checkbox.
|
||||
*/
|
||||
name?: string,
|
||||
/**
|
||||
* Callback called when the checkbox is blurred.
|
||||
*/
|
||||
onBlur?: Function,
|
||||
/**
|
||||
* Callback called when the checkbox is focused
|
||||
*/
|
||||
onFocus?: Function,
|
||||
}
|
||||
export class Checkbox extends React.Component<CheckboxProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export default Checkbox;
|
|
@ -1,68 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
export interface Conditional {
|
||||
/**
|
||||
* If true, component will be disabled
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export interface ChipProps extends Props {
|
||||
/**
|
||||
* Child components, usually Avatar and inline elements
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, the chip will be rendered with a delete icon.
|
||||
*/
|
||||
deletable?: boolean;
|
||||
/**
|
||||
* Callback to be invoked when the delete icon is clicked.
|
||||
*/
|
||||
onDeleteClick?: React.MouseEventHandler
|
||||
}
|
||||
/**
|
||||
* Avatars can be used to represent people.
|
||||
* For personal avatars, offer personalization options.
|
||||
* As users may choose not to personalize an avatar, provide delightful defaults.
|
||||
* When used with a specific logo, avatars can also be used to represent brand.
|
||||
*/
|
||||
export class Chip extends React.Component<ChipProps, {}> {
|
||||
render(): React.ReactElement<any>;
|
||||
}
|
||||
|
||||
export default Chip;
|
|
@ -1,69 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
/**
|
||||
* Properties of components that have values that can be changed (T is the type of the value)
|
||||
*/
|
||||
export interface Changeable<T> {
|
||||
/**
|
||||
* Callback called when the picker value is changed.
|
||||
* @param v Type of the value
|
||||
*/
|
||||
onChange?: (v: T) => void
|
||||
}
|
||||
|
||||
export interface DatePickerProps extends Props, Changeable<Date> {
|
||||
/**
|
||||
* Date object with the maximum selectable date.
|
||||
*/
|
||||
maxDate?: Date,
|
||||
/**
|
||||
* Date object with the minimum selectable date.
|
||||
*/
|
||||
minDate?: Date,
|
||||
/**
|
||||
* The text string to use like a input placeholder.
|
||||
*/
|
||||
placeholder?: string,
|
||||
/**
|
||||
* Date object with the currently selected date.
|
||||
*/
|
||||
value?: Date,
|
||||
}
|
||||
export class DatePicker extends React.Component<DatePickerProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export default DatePicker;
|
|
@ -1,159 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
export interface Iconic {
|
||||
/**
|
||||
* Value of the icon (See icon component).
|
||||
*/
|
||||
icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
|
||||
}
|
||||
|
||||
export interface Conditional {
|
||||
/**
|
||||
* If true, component will be disabled
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Properties of components that can be clicked
|
||||
*/
|
||||
export interface Clickable {
|
||||
/**
|
||||
* Callback called when the button is clicked.
|
||||
*/
|
||||
onClick?: Function
|
||||
}
|
||||
/**
|
||||
* Properties of modal components (Drawer, Dialog)
|
||||
*/
|
||||
export interface Modal {
|
||||
/**
|
||||
* If true, the dialog will be active.
|
||||
*/
|
||||
active: boolean,
|
||||
/**
|
||||
* Callback called when the ESC key is pressed with the overlay active.
|
||||
*/
|
||||
onEscKeyDown?: Function,
|
||||
/**
|
||||
* Callback to be invoked when the dialog overlay is clicked.
|
||||
*/
|
||||
onOverlayClick?: Function,
|
||||
/**
|
||||
* Callback called when the mouse button is pressed on the overlay.
|
||||
*/
|
||||
onOverlayMouseDown?: Function,
|
||||
/**
|
||||
* Callback called when the mouse is moving over the overlay.
|
||||
*/
|
||||
onOverlayMouseMove?: Function,
|
||||
/**
|
||||
* Callback called when the mouse button is released over the overlay.
|
||||
*/
|
||||
onOverlayMouseUp?: Function,
|
||||
}
|
||||
export interface ButtonProps extends Props, Clickable, Conditional, Iconic {
|
||||
/**
|
||||
* Indicates if the button should have accent color.
|
||||
* @default false
|
||||
*/
|
||||
accent?: boolean,
|
||||
/**
|
||||
* If true, the button will have a flat look.
|
||||
* @default false
|
||||
*/
|
||||
flat?: boolean,
|
||||
/**
|
||||
* If true, the button will have a floating look.
|
||||
* @default false
|
||||
*/
|
||||
floating?: boolean,
|
||||
/**
|
||||
* If specified, the button will be rendered as an <a>
|
||||
*/
|
||||
href?: string,
|
||||
/**
|
||||
* The text string to use for the name of the button.
|
||||
*/
|
||||
label?: string,
|
||||
/**
|
||||
* If true, component will be disabled and show a loading animation.
|
||||
* @default false
|
||||
*/
|
||||
loading?: boolean,
|
||||
/**
|
||||
* To be used with floating button. If true the button will be smaller.
|
||||
* @default false
|
||||
*/
|
||||
mini?: boolean,
|
||||
/**
|
||||
* Indicates if the button should have primary color.
|
||||
* @default false
|
||||
*/
|
||||
primary?: boolean,
|
||||
/**
|
||||
* If true, the button will have a raised look.
|
||||
* @default false
|
||||
*/
|
||||
raised?: boolean,
|
||||
/**
|
||||
* If true, component will have a ripple effect on click.
|
||||
* @default true
|
||||
*/
|
||||
ripple?: boolean,
|
||||
}
|
||||
export interface DialogProps extends Props, Modal {
|
||||
/**
|
||||
* An array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
|
||||
* @default []
|
||||
*/
|
||||
actions?: Array<ButtonProps>,
|
||||
/**
|
||||
* The text string to use as standar title of the dialog.
|
||||
*/
|
||||
title?: string | boolean,
|
||||
/**
|
||||
* Used to determine the size of the dialog. It can be small, normal or large.
|
||||
* @default normal
|
||||
*/
|
||||
type?: string,
|
||||
}
|
||||
export class Dialog extends React.Component<DialogProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export default Dialog;
|
|
@ -1,76 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
/**
|
||||
* Properties of modal components (Drawer, Dialog)
|
||||
*/
|
||||
export interface Modal {
|
||||
/**
|
||||
* If true, the dialog will be active.
|
||||
*/
|
||||
active: boolean,
|
||||
/**
|
||||
* Callback called when the ESC key is pressed with the overlay active.
|
||||
*/
|
||||
onEscKeyDown?: Function,
|
||||
/**
|
||||
* Callback to be invoked when the dialog overlay is clicked.
|
||||
*/
|
||||
onOverlayClick?: Function,
|
||||
/**
|
||||
* Callback called when the mouse button is pressed on the overlay.
|
||||
*/
|
||||
onOverlayMouseDown?: Function,
|
||||
/**
|
||||
* Callback called when the mouse is moving over the overlay.
|
||||
*/
|
||||
onOverlayMouseMove?: Function,
|
||||
/**
|
||||
* Callback called when the mouse button is released over the overlay.
|
||||
*/
|
||||
onOverlayMouseUp?: Function,
|
||||
}
|
||||
export interface DrawerProps extends Props, Modal {
|
||||
/**
|
||||
* Type of drawer. It can be 'left' or 'right' to display the drawer on the left or right side of the screen.
|
||||
* @default left
|
||||
*/
|
||||
type?: string
|
||||
}
|
||||
export class Drawer extends React.Component<DrawerProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export default Drawer;
|
|
@ -190,8 +190,11 @@ var factory = function factory(Input) {
|
|||
var template = _props.template;
|
||||
var theme = _props.theme;
|
||||
var source = _props.source;
|
||||
var allowBlank = _props.allowBlank;
|
||||
var auto = _props.auto;
|
||||
|
||||
var others = _objectWithoutProperties(_props, ['template', 'theme', 'source', 'allowBlank', 'auto']); //eslint-disable-line no-unused-vars
|
||||
|
||||
var others = _objectWithoutProperties(_props, ['template', 'theme', 'source']);
|
||||
|
||||
var selected = this.getSelectedItem();
|
||||
var className = (0, _classnames4.default)(theme.dropdown, (_classnames2 = {}, _defineProperty(_classnames2, theme.up, this.state.up), _defineProperty(_classnames2, theme.active, this.state.active), _defineProperty(_classnames2, theme.disabled, this.props.disabled), _classnames2), this.props.className);
|
||||
|
@ -204,7 +207,7 @@ var factory = function factory(Input) {
|
|||
onMouseDown: this.handleMouseDown,
|
||||
readOnly: true,
|
||||
type: template && selected ? 'hidden' : null,
|
||||
value: selected && selected.label
|
||||
value: selected && selected.label ? selected.label : ''
|
||||
})),
|
||||
template && selected ? this.renderTemplateValue(selected) : null,
|
||||
_react2.default.createElement(
|
||||
|
|
|
@ -1,84 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
export interface Conditional {
|
||||
/**
|
||||
* If true, component will be disabled
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean
|
||||
}
|
||||
export interface Option<T> {
|
||||
label: string,
|
||||
value: T,
|
||||
}
|
||||
/**
|
||||
* Properties of components that have values that can be changed (T is the type of the value)
|
||||
*/
|
||||
export interface Changeable<T> {
|
||||
/**
|
||||
* Callback called when the picker value is changed.
|
||||
* @param v Type of the value
|
||||
*/
|
||||
onChange?: (v: T) => void
|
||||
}
|
||||
export interface DropdownProps extends Props, Changeable<any>, Conditional {
|
||||
/**
|
||||
* If true, the dropdown will open up or down depending on the position in the screen.
|
||||
*/
|
||||
auto?: boolean,
|
||||
/**
|
||||
* The text string to use for the floating label element.
|
||||
*/
|
||||
label?: string,
|
||||
/**
|
||||
* Array of data objects with the data to represent in the dropdown.
|
||||
*/
|
||||
source: Array<Option<any>>,
|
||||
/**
|
||||
* Callback function that returns a JSX template to represent the element.
|
||||
*/
|
||||
template?: Function,
|
||||
/**
|
||||
* Default value using JSON data.
|
||||
*/
|
||||
value: string,
|
||||
}
|
||||
|
||||
export class Dropdown extends React.Component<DropdownProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export default Dropdown;
|
|
@ -1,44 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
|
||||
export interface FontIconProps extends Props {
|
||||
value: string
|
||||
}
|
||||
export class FontIcon extends React.Component<FontIconProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export default FontIcon;
|
|
@ -1,13 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface ActivableRendererOptions {
|
||||
/**
|
||||
* @default 500
|
||||
*/
|
||||
delay?: number;
|
||||
}
|
||||
export interface ActivableRendererProps {
|
||||
active: boolean;
|
||||
children?: any;
|
||||
delay?: number
|
||||
}
|
||||
export default function ActivableRendererFactory<P>(options?: ActivableRendererOptions): (componentClass: React.ComponentClass<P>) => React.ComponentClass<P & ActivableRendererProps>
|
|
@ -16,6 +16,7 @@ var INPUT = exports.INPUT = 'RTInput';
|
|||
var LAYOUT = exports.LAYOUT = 'RTLayout';
|
||||
var LINK = exports.LINK = 'RTLink';
|
||||
var LIST = exports.LIST = 'RTList';
|
||||
var MENU = exports.MENU = 'RTMenu';
|
||||
var NAVIGATION = exports.NAVIGATION = 'RTNavigation';
|
||||
var OVERLAY = exports.OVERLAY = 'RTOverlay';
|
||||
var PROGRESS_BAR = exports.PROGRESS_BAR = 'RTProgressBar';
|
||||
|
|
|
@ -53,11 +53,42 @@ var factory = function factory(FontIcon) {
|
|||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Input)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleChange = function (event) {
|
||||
if (_this.props.multiline) {
|
||||
_this.handleAutoresize();
|
||||
}
|
||||
if (_this.props.onChange) _this.props.onChange(event.target.value, event);
|
||||
}, _this.handleAutoresize = function () {
|
||||
var element = _this.refs.input;
|
||||
// compute the height difference between inner height and outer height
|
||||
var style = getComputedStyle(element, null);
|
||||
var heightOffset = style.boxSizing === 'content-box' ? -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)) : parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
|
||||
|
||||
// resize the input to its content size
|
||||
element.style.height = 'auto';
|
||||
element.style.height = element.scrollHeight + heightOffset + 'px';
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(Input, [{
|
||||
key: 'componentDidMount',
|
||||
value: function componentDidMount() {
|
||||
window.addEventListener('resize', this.handleAutoresize);
|
||||
}
|
||||
}, {
|
||||
key: 'componentWillReceiveProps',
|
||||
value: function componentWillReceiveProps(nextProps) {
|
||||
if (!this.props.multiline && nextProps.multiline) {
|
||||
window.addEventListener('resize', this.handleAutoresize);
|
||||
} else if (this.props.multiline && !nextProps.multiline) {
|
||||
window.removeEventListener('resize', this.handleAutoresize);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'componentWillUnmount',
|
||||
value: function componentWillUnmount() {
|
||||
window.removeEventListener('resize', this.handleAutoresize);
|
||||
}
|
||||
}, {
|
||||
key: 'blur',
|
||||
value: function blur() {
|
||||
this.refs.input.blur();
|
||||
|
|
|
@ -1,124 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
export interface Conditional {
|
||||
/**
|
||||
* If true, component will be disabled
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Properties of components that have values that can be changed (T is the type of the value)
|
||||
*/
|
||||
export interface Changeable<T> {
|
||||
/**
|
||||
* Callback called when the picker value is changed.
|
||||
* @param v Type of the value
|
||||
*/
|
||||
onChange?: (v: T) => void
|
||||
}
|
||||
|
||||
export interface Iconic {
|
||||
/**
|
||||
* Value of the icon (See icon component).
|
||||
*/
|
||||
icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
|
||||
}
|
||||
|
||||
export interface InputProps extends Props, Conditional, Changeable<string>, Iconic {
|
||||
/**
|
||||
* Give an error string to display under the field.
|
||||
*/
|
||||
error?: string,
|
||||
/**
|
||||
* Indicates if the label is floating in the input field or not.
|
||||
* @default true
|
||||
*/
|
||||
floating?: boolean,
|
||||
/**
|
||||
* The text string to use for the floating label element.
|
||||
*/
|
||||
label?: string,
|
||||
/**
|
||||
* Specifies the maximum number of characters allowed in the component.
|
||||
*/
|
||||
maxLength?: number,
|
||||
/**
|
||||
* If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.
|
||||
* @default false
|
||||
*/
|
||||
multiline?: boolean,
|
||||
/**
|
||||
* Callback function that is fired when components is blurred.
|
||||
*/
|
||||
onBlur?: Function,
|
||||
/**
|
||||
* Callback function that is fired when components is focused.
|
||||
*/
|
||||
onFocus?: Function,
|
||||
/**
|
||||
* Callback function that is fired when a key is pressed down.
|
||||
*/
|
||||
onKeyDown?: Function,
|
||||
/**
|
||||
* Callback function that is fired when a key is pressed.
|
||||
*/
|
||||
onKeyPress?: Function,
|
||||
/**
|
||||
* Callback function that is fired when a key is released.
|
||||
*/
|
||||
onKeyUp?: Function,
|
||||
/**
|
||||
* If true, the html input has a required value.
|
||||
* @default false
|
||||
*/
|
||||
required?: boolean,
|
||||
/**
|
||||
* Type of the input element. It can be a valid HTML5 input type
|
||||
* @default text
|
||||
*/
|
||||
type?: string,
|
||||
/**
|
||||
* Current value of the input element.
|
||||
*/
|
||||
value?: string,
|
||||
}
|
||||
export class Input extends React.Component<InputProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export default Input;
|
|
@ -1,43 +0,0 @@
|
|||
import * as React from 'react';
|
||||
|
||||
export interface LayoutProps {
|
||||
className?:string
|
||||
}
|
||||
|
||||
export interface NavDrawerProps {
|
||||
width?:'normal' | 'wide',
|
||||
active?:boolean,
|
||||
pinned?:boolean,
|
||||
permanentAt?:'sm'|'md'|'lg'|'xl'|'xxl'|'xxxl',
|
||||
onOverlayClick?:() => void,
|
||||
scrollY?:boolean,
|
||||
className?:string
|
||||
}
|
||||
|
||||
export interface PanelProps {
|
||||
scrollY?:boolean,
|
||||
className?:string
|
||||
}
|
||||
|
||||
export interface SidebarProps {
|
||||
width?:'1'|'2'|'3'|'4'|'5'|'6'|'7'|'8'|'9'|'10'|'11'|'12'|'25'|'33'|'50'|'66'|'75'|'100'
|
||||
pinned?:boolean,
|
||||
scrollY?:boolean,
|
||||
className?:string
|
||||
}
|
||||
|
||||
export class Layout extends React.Component<LayoutProps, {}> {
|
||||
render():React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export class NavDrawer extends React.Component<NavDrawerProps, {}> {
|
||||
render():React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export class Panel extends React.Component<PanelProps, {}> {
|
||||
render():React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export class Sidebar extends React.Component<SidebarProps, {}> {
|
||||
render():React.DOMElement<any, any>;
|
||||
}
|
|
@ -1,58 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
|
||||
export interface Iconic {
|
||||
/**
|
||||
* Value of the icon (See icon component).
|
||||
*/
|
||||
icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
|
||||
}
|
||||
export interface LinkProps extends Props, Iconic {
|
||||
href: string,
|
||||
/**
|
||||
* The text string used for the text content of the link.
|
||||
*/
|
||||
label: string,
|
||||
/**
|
||||
* Sets a count number useful to display in the page how many times was visited for example.
|
||||
*/
|
||||
count?: number,
|
||||
}
|
||||
export class Link extends React.Component<LinkProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export default Link;
|
|
@ -74,16 +74,24 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
|
|||
if (!_react2.default.isValidElement(child)) {
|
||||
return;
|
||||
}
|
||||
if (child.props.listItemIgnore) {
|
||||
children.ignored.push(child);
|
||||
|
||||
var _child$props = child.props;
|
||||
var listItemIgnore = _child$props.listItemIgnore;
|
||||
|
||||
var rest = _objectWithoutProperties(_child$props, ['listItemIgnore']);
|
||||
|
||||
var strippedChild = _extends({}, child, { props: rest });
|
||||
|
||||
if (listItemIgnore) {
|
||||
children.ignored.push(strippedChild);
|
||||
return;
|
||||
}
|
||||
if (child.type === ListItemContent) {
|
||||
children.itemContent = child;
|
||||
children.itemContent = strippedChild;
|
||||
return;
|
||||
}
|
||||
var bucket = children.itemContent ? 'rightActions' : 'leftActions';
|
||||
children[bucket].push(_extends({}, child, { key: i }));
|
||||
children[bucket].push(_extends({}, strippedChild, { key: i }));
|
||||
});
|
||||
|
||||
return children;
|
||||
|
|
|
@ -1,180 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
export interface Conditional {
|
||||
/**
|
||||
* If true, component will be disabled
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean
|
||||
}
|
||||
export interface Clickable {
|
||||
/**
|
||||
* Callback called when the button is clicked.
|
||||
*/
|
||||
onClick?: Function
|
||||
}
|
||||
/**
|
||||
* Properties of components that have values that can be changed (T is the type of the value)
|
||||
*/
|
||||
export interface Changeable<T> {
|
||||
/**
|
||||
* Callback called when the picker value is changed.
|
||||
* @param v Type of the value
|
||||
*/
|
||||
onChange?: (v: T) => void
|
||||
}
|
||||
|
||||
export interface Iconic {
|
||||
/**
|
||||
* Value of the icon (See icon component).
|
||||
*/
|
||||
icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
|
||||
}
|
||||
|
||||
export interface ListProps extends Props {
|
||||
/**
|
||||
* If true, each element in the list will have a ripple effect on click
|
||||
* @default false
|
||||
*/
|
||||
ripple?: boolean,
|
||||
/**
|
||||
* If true, the elements in the list will display a hover effect and a pointer cursor.
|
||||
* @default false
|
||||
*/
|
||||
selectable?: boolean,
|
||||
}
|
||||
export class List extends React.Component<ListProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
export interface ListItemProps extends Props, Conditional, Clickable {
|
||||
/**
|
||||
* A string URL to specify an avatar in the left side of the item.
|
||||
*/
|
||||
avatar?: string,
|
||||
/**
|
||||
* Main text of the item. Required.
|
||||
*/
|
||||
caption?: string,
|
||||
/**
|
||||
* An element that will be displayed as the item. If set, this will override `caption` and `legend`.
|
||||
*/
|
||||
itemContent?: React.ReactElement<any>,
|
||||
/**
|
||||
* A list of elements that are placed on the left side of the item and after the avatar attribute.
|
||||
*/
|
||||
leftActions?: React.ReactElement<any>[],
|
||||
/**
|
||||
* A string key of a font icon to display an icon in the left side of the item.
|
||||
*/
|
||||
leftIcon?: string,
|
||||
/**
|
||||
* Secondary text to display under the caption.
|
||||
*/
|
||||
legend?: string,
|
||||
/**
|
||||
* A list of elements that are placed on the right side of the item and after the rightIcon attribute.
|
||||
*/
|
||||
rightActions?: React.ReactElement<any>[],
|
||||
/**
|
||||
* The same as the leftIcon but in this case the icon is displayed in the right side.
|
||||
*/
|
||||
rightIcon?: string,
|
||||
/**
|
||||
* If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
|
||||
* @default false
|
||||
*/
|
||||
ripple?: boolean,
|
||||
/**
|
||||
* If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent
|
||||
* @default false
|
||||
*/
|
||||
selectable?: boolean,
|
||||
/**
|
||||
* In case you want to provide the item as a link, you can pass this property to specify the href.
|
||||
*/
|
||||
to?: string;
|
||||
}
|
||||
export class ListItem extends React.Component<ListItemProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
export interface ListCheckboxProps extends Props, Conditional, Changeable<boolean> {
|
||||
/**
|
||||
* Main text of the item. Required.
|
||||
*/
|
||||
caption?: string,
|
||||
/**
|
||||
* If true the checkbox appears checked by default.
|
||||
* @default false
|
||||
*/
|
||||
checked: boolean,
|
||||
/**
|
||||
* Secondary text to display under the caption.
|
||||
*/
|
||||
legend?: string,
|
||||
/**
|
||||
* Name for the checkbox input item.
|
||||
*/
|
||||
name?: string,
|
||||
/**
|
||||
* Callback called when the input element is blurred.
|
||||
*/
|
||||
onBlur?: Function,
|
||||
/**
|
||||
* Callback called when the input element is focused.
|
||||
*/
|
||||
onFocus?: Function,
|
||||
}
|
||||
export class ListCheckbox extends React.Component<ListCheckboxProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
export interface ListSubHeaderProps extends Props {
|
||||
/**
|
||||
* List header caption.
|
||||
*/
|
||||
caption: string;
|
||||
}
|
||||
export class ListSubHeader extends React.Component<ListSubHeaderProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
export interface ListDividerProps extends Props {
|
||||
/**
|
||||
* Indicates if the divider should be full width or should leave a space on the left side.
|
||||
*/
|
||||
inset: boolean;
|
||||
}
|
||||
export class ListDivider extends React.Component<ListDividerProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
|
@ -1,150 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
export interface Conditional {
|
||||
/**
|
||||
* If true, component will be disabled
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export interface Iconic {
|
||||
/**
|
||||
* Value of the icon (See icon component).
|
||||
*/
|
||||
icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
|
||||
}
|
||||
export interface MenuProps extends Props {
|
||||
/**
|
||||
* If true, the menu will be displayed as opened by default.
|
||||
* @default false
|
||||
*/
|
||||
active?: boolean,
|
||||
/**
|
||||
* Callback that will be called when the menu is being hidden.
|
||||
*/
|
||||
onHide?: Function,
|
||||
/**
|
||||
* Callback that will be called when the menu is being shown.
|
||||
*/
|
||||
onShow?: Function,
|
||||
/**
|
||||
* If true the menu wrapper will show an outline with a soft shadow.
|
||||
* @default true
|
||||
*/
|
||||
outline?: boolean,
|
||||
/**
|
||||
* Determine the position of the menu.
|
||||
* With static value the menu will be always shown, auto means that the it will decide the opening direction based on the current position.
|
||||
* To force a position use top-left, top-right, bottom-left, bottom-right.
|
||||
* @default static
|
||||
*/
|
||||
position?: string,
|
||||
/**
|
||||
* If true, the menu items will show a ripple effect on click.
|
||||
*/
|
||||
ripple?: boolean,
|
||||
/**
|
||||
* If true, the menu will keep a value to highlight the active child item.
|
||||
*/
|
||||
selectable?: boolean,
|
||||
/**
|
||||
* Used for selectable menus and indicates the initial value so the child item with this value can be highlighted.
|
||||
*/
|
||||
value?: boolean,
|
||||
}
|
||||
export class Menu extends React.Component<MenuProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
export interface IconMenuProps extends Props, Iconic {
|
||||
/**
|
||||
* If true, the icon will show a ripple when is clicked.
|
||||
*/
|
||||
iconRipple?: boolean,
|
||||
/**
|
||||
* Transferred to the Menu component.
|
||||
* @default true
|
||||
*/
|
||||
menuRipple?: boolean,
|
||||
/**
|
||||
* Callback that will be called when the icon is clicked.
|
||||
*/
|
||||
onClick?: Function,
|
||||
/**
|
||||
* Callback that will be called when the menu is being hidden.
|
||||
*/
|
||||
onHide?: Function,
|
||||
/**
|
||||
* Callback that will be called when the menu is being shown.
|
||||
*/
|
||||
onShow?: Function,
|
||||
/**
|
||||
* Callback that will be called when a menu item is selected.
|
||||
*/
|
||||
onSelect?: Function,
|
||||
/**
|
||||
* Determine the position of the menu. This property is transferred to the inner Menu component.
|
||||
* @default auto
|
||||
*/
|
||||
position?: string,
|
||||
/**
|
||||
* If true, the menu will keep a value to highlight the active child item. Transferred to the Menu
|
||||
*/
|
||||
selectable?: boolean,
|
||||
}
|
||||
export class IconMenu extends React.Component<IconMenuProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
export interface MenuItemProps extends Props, Conditional, Iconic {
|
||||
/**
|
||||
* The text to include in the menu item.
|
||||
*/
|
||||
caption?: string,
|
||||
/**
|
||||
* If true, the item will show a ripple effect when it's clicked. Inherited from the parent.
|
||||
*/
|
||||
ripple?: boolean,
|
||||
/**
|
||||
* Transferred from the Menu component for selectable menus. Indicates if it's the current active option.
|
||||
*/
|
||||
selected?: boolean,
|
||||
}
|
||||
export class MenuItem extends React.Component<MenuItemProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
export class MenuDivider extends React.Component<any, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
|
@ -1,58 +0,0 @@
|
|||
import * as React from 'react';
|
||||
import { ButtonProps } from '../button'
|
||||
import { LinkProps } from '../link'
|
||||
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
|
||||
export interface NavigationProps extends Props {
|
||||
/**
|
||||
* Array of objects that represent buttons so the keys will be transferred as properties to those.
|
||||
*/
|
||||
actions?: Array<ButtonProps>,
|
||||
/**
|
||||
* Array of objects similar to actions but that will be rendered as <Link/> component definition.
|
||||
*/
|
||||
routes?: Array<LinkProps>,
|
||||
/**
|
||||
* Type of the navigation, it can be 'vertical' or 'horizontal'.
|
||||
*/
|
||||
type?: string,
|
||||
}
|
||||
export class Navigation extends React.Component<NavigationProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export default Navigation;
|
|
@ -1,51 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
export interface OverlayProps extends Props {
|
||||
active?: boolean;
|
||||
children?: any;
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string;
|
||||
invisible?: boolean;
|
||||
onClick?: Function;
|
||||
onEscKeyDown?: Function
|
||||
}
|
||||
export class Overlay extends React.Component<OverlayProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export default Overlay;
|
|
@ -1,71 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
export interface ProgressBarProps extends Props {
|
||||
/**
|
||||
* Value of a secondary progress bar useful for buffering.
|
||||
*/
|
||||
buffer?: number,
|
||||
/**
|
||||
* Maximum value permitted.
|
||||
*/
|
||||
max?: number, //
|
||||
/**
|
||||
* minimum value permitted.
|
||||
*/
|
||||
min?: number, //
|
||||
/**
|
||||
* Mode of the progress bar, it can be determinate or indeterminate.
|
||||
*/
|
||||
mode?: string, //
|
||||
/**
|
||||
* If true, the circular progress bar will be changing its color.
|
||||
*/
|
||||
multicolor?: boolean, //
|
||||
/**
|
||||
* Type of the progress bar, it can be circular or linear.
|
||||
* @default linear
|
||||
*/
|
||||
type?: string,
|
||||
/**
|
||||
* Value of the current progress.
|
||||
*/
|
||||
value?: number,
|
||||
}
|
||||
export class ProgressBar extends React.Component<ProgressBarProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export default ProgressBar;
|
|
@ -1,101 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
export interface Conditional {
|
||||
/**
|
||||
* If true, component will be disabled
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean
|
||||
}
|
||||
/**
|
||||
* Properties of components that have values that can be changed (T is the type of the value)
|
||||
*/
|
||||
export interface Changeable<T> {
|
||||
/**
|
||||
* Callback called when the picker value is changed.
|
||||
* @param v Type of the value
|
||||
*/
|
||||
onChange?: (v: T) => void
|
||||
}
|
||||
|
||||
export interface RadioGroupProps extends Props, Conditional, Changeable<any> {
|
||||
/**
|
||||
* Name for the input element group.
|
||||
*/
|
||||
name?: string,
|
||||
/**
|
||||
* Default value selected in the radio group.
|
||||
*/
|
||||
value?: any,
|
||||
}
|
||||
export class RadioGroup extends React.Component<RadioGroupProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
export interface RadioButtonProps extends Props, Conditional {
|
||||
/**
|
||||
* If true, the input element will be selected by default. Transferred from the parent.
|
||||
*/
|
||||
checked?: boolean,
|
||||
/**
|
||||
* Label for the radio button.
|
||||
*/
|
||||
label?: string;
|
||||
/**
|
||||
* Name for the input element.
|
||||
*/
|
||||
name?: string,
|
||||
/**
|
||||
* Callback function that will be invoked when the input is blurred.
|
||||
*/
|
||||
onBlur?: Function,
|
||||
/**
|
||||
* Callback function that will be invoked when the value changes.
|
||||
*/
|
||||
onChange?: Function,
|
||||
/**
|
||||
* Callback function that will be invoked when the input is focused.
|
||||
*/
|
||||
onFocus?: Function,
|
||||
/**
|
||||
* Value for the radio button.
|
||||
*/
|
||||
value: any,
|
||||
}
|
||||
export class RadioButton extends React.Component<RadioButtonProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export default RadioButton;
|
|
@ -166,11 +166,13 @@ var rippleFactory = function rippleFactory() {
|
|||
var _props2 = this.props;
|
||||
var children = _props2.children;
|
||||
var ripple = _props2.ripple;
|
||||
var //eslint-disable-line no-unused-vars
|
||||
onRippleEnded = _props2.onRippleEnded;
|
||||
var className = _props2.rippleClassName;
|
||||
var centered = _props2.rippleCentered;
|
||||
var spread = _props2.rippleSpread;
|
||||
|
||||
var other = _objectWithoutProperties(_props2, ['children', 'ripple', 'rippleClassName', 'rippleCentered', 'rippleSpread']);
|
||||
var other = _objectWithoutProperties(_props2, ['children', 'ripple', 'onRippleEnded', 'rippleClassName', 'rippleCentered', 'rippleSpread']);
|
||||
|
||||
var rippleClassName = (0, _classnames3.default)(this.props.theme.ripple, (_classnames = {}, _defineProperty(_classnames, this.props.theme.rippleActive, this.state.active), _defineProperty(_classnames, this.props.theme.rippleRestarting, this.state.restarting), _classnames), className);
|
||||
|
||||
|
|
|
@ -1,20 +0,0 @@
|
|||
import * as React from 'react';
|
||||
|
||||
export interface RippleProps {
|
||||
centered?:boolean,
|
||||
className?:boolean,
|
||||
onRippleEnded:() => void,
|
||||
spread?:number,
|
||||
theme?:{
|
||||
ripple?:string,
|
||||
rippleActive?:string,
|
||||
rippleRestarting?:string,
|
||||
rippleWrapper?:string
|
||||
}
|
||||
}
|
||||
|
||||
export class Ripple extends React.Component<RippleProps, {}> {
|
||||
render():React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export default Ripple;
|
|
@ -1,74 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
export interface SliderProps extends Props {
|
||||
/**
|
||||
* If true, an input is shown and the user can set the slider from keyboard value.
|
||||
*/
|
||||
editable?: boolean,
|
||||
/**
|
||||
* Maximum value permitted.
|
||||
*/
|
||||
max?: number,
|
||||
/**
|
||||
* Minimum value permitted.
|
||||
*/
|
||||
min?: number,
|
||||
/**
|
||||
* Callback function that will be invoked when the slider value changes.
|
||||
*/
|
||||
onChange?: Function,
|
||||
/**
|
||||
* If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.
|
||||
*/
|
||||
pinned?: boolean,
|
||||
/**
|
||||
* If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.
|
||||
*/
|
||||
snaps?: boolean,
|
||||
/**
|
||||
* Amount to vary the value when the knob is moved or increase/decrease is called.
|
||||
*/
|
||||
step?: number,
|
||||
/**
|
||||
* Current value of the slider.
|
||||
*/
|
||||
value: number,
|
||||
}
|
||||
export class Slider extends React.Component<SliderProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export default Slider;
|
|
@ -1,100 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
export interface Iconic {
|
||||
/**
|
||||
* Value of the icon (See icon component).
|
||||
*/
|
||||
icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
|
||||
}
|
||||
export interface Modal {
|
||||
/**
|
||||
* If true, the dialog will be active.
|
||||
*/
|
||||
active: boolean,
|
||||
/**
|
||||
* Callback called when the ESC key is pressed with the overlay active.
|
||||
*/
|
||||
onEscKeyDown?: Function,
|
||||
/**
|
||||
* Callback to be invoked when the dialog overlay is clicked.
|
||||
*/
|
||||
onOverlayClick?: Function,
|
||||
/**
|
||||
* Callback called when the mouse button is pressed on the overlay.
|
||||
*/
|
||||
onOverlayMouseDown?: Function,
|
||||
/**
|
||||
* Callback called when the mouse is moving over the overlay.
|
||||
*/
|
||||
onOverlayMouseMove?: Function,
|
||||
/**
|
||||
* Callback called when the mouse button is released over the overlay.
|
||||
*/
|
||||
onOverlayMouseUp?: Function,
|
||||
}
|
||||
|
||||
export interface SnackbarProps extends Props, Modal, Iconic {
|
||||
/**
|
||||
* For the action component inside the Snackbar.
|
||||
*/
|
||||
action?: string,
|
||||
/**
|
||||
* Text to display in the content.
|
||||
*/
|
||||
label?: string,
|
||||
/**
|
||||
* Callback function that will be called when the button action is clicked.
|
||||
*/
|
||||
onClick?: Function,
|
||||
/**
|
||||
* Callback function when finish the set timeout.
|
||||
*/
|
||||
onTimeout?: Function,
|
||||
/**
|
||||
* amount of time after the Snackbar will be automatically hidden.
|
||||
*/
|
||||
timeout?: number,
|
||||
/**
|
||||
* Indicates the action type. Can be 'accept', 'warning' or 'cancel'
|
||||
*/
|
||||
type?: string,
|
||||
}
|
||||
|
||||
export class Snackbar extends React.Component<SnackbarProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export default Snackbar;
|
|
@ -1,77 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
export interface Conditional {
|
||||
/**
|
||||
* If true, component will be disabled
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean
|
||||
}
|
||||
export interface SwitchProps extends Props, Conditional {
|
||||
/**
|
||||
* If true, the switch will be enabled.
|
||||
*/
|
||||
checked: boolean,
|
||||
/**
|
||||
* If true, component will be disabled.
|
||||
*/
|
||||
disabled?: boolean,
|
||||
/**
|
||||
* The text string to use for the floating label element.
|
||||
*/
|
||||
label?: string,
|
||||
/**
|
||||
* The text string used as name of the input.
|
||||
*/
|
||||
name?: string,
|
||||
/**
|
||||
* Callback function that is fired when when the switch is blurred.
|
||||
*/
|
||||
onBlur?: Function,
|
||||
/**
|
||||
* Callback function that is fired when the components's value changes.
|
||||
*/
|
||||
onChange?: Function,
|
||||
/**
|
||||
* Callback function fire when the switch is focused.
|
||||
*/
|
||||
onFocus?: Function,
|
||||
}
|
||||
export class Switch extends React.Component<SwitchProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export default Switch;
|
|
@ -1,66 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
export interface TableProps extends Props {
|
||||
/**
|
||||
* If true, component will show a heading using model field names.
|
||||
*/
|
||||
heading?: boolean,
|
||||
/**
|
||||
* Object describing the data model that represents each object in the source.
|
||||
*/
|
||||
model?: { [key: string]: string },
|
||||
/**
|
||||
* Callback function that is fired when an item in a row changes. If set, rows are editable.
|
||||
*/
|
||||
onChange?: Function,
|
||||
/**
|
||||
* Callback function invoked when the row selection changes.
|
||||
*/
|
||||
onSelect?: Function,
|
||||
/**
|
||||
* Array of indexes of the items in the source that should appear as selected.
|
||||
*/
|
||||
selected?: Array<number>,
|
||||
/**
|
||||
* Array of objects representing each item to show.
|
||||
*/
|
||||
source?: Array<{ [key: string]: any }>,
|
||||
}
|
||||
export class Table extends React.Component<TableProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export default Table;
|
|
@ -1,84 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
export interface Conditional {
|
||||
/**
|
||||
* If true, component will be disabled
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean
|
||||
}
|
||||
/**
|
||||
* Properties of components that have values that can be changed (T is the type of the value)
|
||||
*/
|
||||
export interface Changeable<T> {
|
||||
/**
|
||||
* Callback called when the picker value is changed.
|
||||
* @param v Type of the value
|
||||
*/
|
||||
onChange?: (v: T) => void
|
||||
}
|
||||
export interface TabsProps extends Props, Changeable<number> {
|
||||
/**
|
||||
* Current
|
||||
*/
|
||||
index: number,
|
||||
}
|
||||
export class Tabs extends React.Component<TabsProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
export interface TabProps extends Props, Conditional {
|
||||
/**
|
||||
* If true, the current component is visible.
|
||||
* @default false
|
||||
*/
|
||||
active?: boolean,
|
||||
/**
|
||||
* If true, the current component is not visible.
|
||||
* @default false
|
||||
*/
|
||||
hidden?: boolean,
|
||||
/**
|
||||
* Label text for navigation header
|
||||
*/
|
||||
label?: string,
|
||||
/**
|
||||
* Callback function that is fired when the tab is activated.
|
||||
*/
|
||||
onActive?: Function,
|
||||
}
|
||||
export class Tab extends React.Component<TabProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
|
@ -1,61 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface Props {
|
||||
/**
|
||||
* Sets a CSS class on the component.
|
||||
*/
|
||||
className?: string,
|
||||
id?: string;
|
||||
/**
|
||||
* A key used to uniquely identify the element within an Array
|
||||
*/
|
||||
key?: string,
|
||||
/**
|
||||
* Inline style
|
||||
*/
|
||||
style?: any,
|
||||
/**
|
||||
* Tooltip text
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltip?: string,
|
||||
/**
|
||||
* Amount of time in miliseconds spent before the tooltip is visible.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipDelay?: number,
|
||||
/**
|
||||
* If true, the Tooltip hides after a click in the host component.
|
||||
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||||
* @default true
|
||||
* @see http://react-toolbox.com/#/components/tooltip
|
||||
*/
|
||||
tooltipHideOnClick?: boolean,
|
||||
}
|
||||
/**
|
||||
* Properties of components that have values that can be changed (T is the type of the value)
|
||||
*/
|
||||
export interface Changeable<T> {
|
||||
/**
|
||||
* Callback called when the picker value is changed.
|
||||
* @param v Type of the value
|
||||
*/
|
||||
onChange?: (v: T) => void
|
||||
}
|
||||
export interface TimePickerProps extends Props, Changeable<Date> {
|
||||
/**
|
||||
* Format to display the clock. It can be 24hr or ampm.
|
||||
* @default 24hr
|
||||
*/
|
||||
format?: string,
|
||||
/**
|
||||
* Datetime object with currrently selected time
|
||||
*/
|
||||
value?: Date,
|
||||
}
|
||||
export class TimePicker extends React.Component<TimePickerProps, {}> {
|
||||
render(): React.DOMElement<any, any>;
|
||||
}
|
||||
|
||||
export default TimePicker;
|
|
@ -1,10 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export class TooltipComponent<P, S> extends React.Component<P, S> {
|
||||
getDecoratedComponentInstance(): React.Component<P, S>;
|
||||
}
|
||||
|
||||
export interface TooltipComponentClass<P> extends React.ComponentClass<P> {
|
||||
new (props?: P, context?: any): TooltipComponent<P, any>;
|
||||
}
|
||||
|
||||
export default function Tooltip<P>(componentClass: React.ComponentClass<P>): TooltipComponentClass<P>;
|
14
package.json
14
package.json
|
@ -38,7 +38,7 @@
|
|||
"dependencies": {
|
||||
"classnames": "^2.2.5",
|
||||
"core-js": "^2.4.0",
|
||||
"react-css-themr": "^1.1.0"
|
||||
"react-css-themr": "^1.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.3.6",
|
||||
|
@ -75,11 +75,11 @@
|
|||
"phantomjs-polyfill": "0.0.2",
|
||||
"phantomjs-prebuilt": "^2.1.7",
|
||||
"postcss-loader": "^0.9.1",
|
||||
"react": "^15.0.2",
|
||||
"react-addons-css-transition-group": "^15.0.2",
|
||||
"react": "^15.2.0",
|
||||
"react-addons-css-transition-group": "^15.2.0",
|
||||
"react-addons-test-utils": "^15.0.2",
|
||||
"react-docgen": "^2.8.2",
|
||||
"react-dom": "^15.0.2",
|
||||
"react-dom": "^15.2.0",
|
||||
"react-transform-catch-errors": "^1.0.2",
|
||||
"react-transform-hmr": "^1.0.4",
|
||||
"redbox-react": "^1.2.4",
|
||||
|
@ -114,8 +114,8 @@
|
|||
"peerDependencies": {
|
||||
"classnames": "^2.2.0",
|
||||
"normalize.css": "^4.0.0",
|
||||
"react": "^0.14 || ^15.0.1",
|
||||
"react-addons-css-transition-group": "^0.14.0 || ^15.0.1",
|
||||
"react-dom": "^0.14.0 || ^15.0.1"
|
||||
"react": "^0.14 || ^15.2.0",
|
||||
"react-addons-css-transition-group": "^0.14.0 || ^15.2.0",
|
||||
"react-dom": "^0.14.0 || ^15.2.0"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,7 +9,7 @@ const AvatarTest = () => (
|
|||
<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
|
||||
<Avatar icon={<GithubIcon />}/>
|
||||
<Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
|
||||
<Avatar title="Javier" img="https://placeimg.com/80/80/animals"/>
|
||||
<Avatar title="Javier"/>
|
||||
<Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
|
||||
</section>
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue