Merge remote-tracking branch 'react-toolbox/dev' into dev
commit
2e543ed8a0
|
@ -31,7 +31,7 @@ plugins:
|
|||
|
||||
'Publishing tag at Github':
|
||||
plugin: 'bumped-terminal'
|
||||
command: 'git tag $newVersion && git push && git push --tags'
|
||||
command: 'git tag $newVersion && git push origin dev && git push --tags origin dev'
|
||||
|
||||
'Publishing at NPM':
|
||||
plugin: 'bumped-terminal'
|
||||
|
|
|
@ -2,8 +2,10 @@ import React, { PropTypes } from 'react';
|
|||
import classnames from 'classnames';
|
||||
import { themr } from 'react-css-themr';
|
||||
import { APP_BAR } from '../identifiers.js';
|
||||
import InjectedFontIcon from '../font_icon/FontIcon.js';
|
||||
|
||||
const AppBar = ({ theme, ...props }) => {
|
||||
const factory = (FontIcon) => {
|
||||
const AppBar = ({ children, leftIcon, onLeftIconClick, onRightIconClick, rightIcon, theme, title, ...props }) => {
|
||||
const className = classnames(theme.appBar, {
|
||||
[theme.fixed]: props.fixed,
|
||||
[theme.flat]: props.flat
|
||||
|
@ -11,28 +13,58 @@ const AppBar = ({ theme, ...props }) => {
|
|||
|
||||
return (
|
||||
<header className={className} data-react-toolbox='app-bar'>
|
||||
{props.children}
|
||||
{leftIcon && <FontIcon
|
||||
className={classnames(theme.leftIcon)}
|
||||
onClick={onLeftIconClick}
|
||||
value={leftIcon} />
|
||||
}
|
||||
{title && <h1 className={classnames(theme.title)}>{title}</h1>}
|
||||
{children}
|
||||
{rightIcon && <FontIcon
|
||||
className={classnames(theme.rightIcon)}
|
||||
onClick={onRightIconClick}
|
||||
value={rightIcon} />
|
||||
}
|
||||
</header>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
AppBar.propTypes = {
|
||||
AppBar.propTypes = {
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
fixed: PropTypes.bool,
|
||||
flat: PropTypes.bool,
|
||||
leftIcon: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.element
|
||||
]),
|
||||
onLeftIconClick: PropTypes.func,
|
||||
onRightIconClick: PropTypes.func,
|
||||
rightIcon: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.element
|
||||
]),
|
||||
theme: PropTypes.shape({
|
||||
appBar: PropTypes.string,
|
||||
fixed: PropTypes.string,
|
||||
flat: PropTypes.string
|
||||
})
|
||||
};
|
||||
flat: PropTypes.string,
|
||||
leftIcon: PropTypes.string,
|
||||
rightIcon: PropTypes.string,
|
||||
title: PropTypes.string
|
||||
}),
|
||||
title: PropTypes.string
|
||||
};
|
||||
|
||||
AppBar.defaultProps = {
|
||||
AppBar.defaultProps = {
|
||||
className: '',
|
||||
fixed: false,
|
||||
flat: false
|
||||
};
|
||||
|
||||
return AppBar;
|
||||
};
|
||||
|
||||
export default themr(APP_BAR)(AppBar);
|
||||
const AppBar = factory(InjectedFontIcon);
|
||||
export default themr(APP_BAR, null)(AppBar);
|
||||
export { factory as appBarFactory };
|
||||
export { AppBar };
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface AppBarTheme {
|
||||
/**
|
||||
|
@ -13,13 +14,25 @@ export interface AppBarTheme {
|
|||
* 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;
|
||||
}
|
||||
|
||||
interface AppBarProps extends __ReactToolbox.Props {
|
||||
interface AppBarProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Determine if the bar should have position fixed or relative.
|
||||
* @default false
|
||||
|
@ -30,12 +43,32 @@ interface AppBarProps extends __ReactToolbox.Props {
|
|||
* @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;
|
||||
/**
|
||||
* Called when the left icon is clicked
|
||||
*/
|
||||
onLeftIconClick?: Function;
|
||||
/**
|
||||
* If it exists it is used as the AppBar right icon
|
||||
*/
|
||||
rightIcon?: string;
|
||||
/**
|
||||
* Called when the righticon is clicked
|
||||
*/
|
||||
onRightIconClick?: Function;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: AppBarTheme;
|
||||
}
|
||||
|
||||
export class AppBar extends __React.Component<AppBarProps, {}> { }
|
||||
export class AppBar extends React.Component<AppBarProps, {}> { }
|
||||
|
||||
export default AppBar;
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
import { themr } from 'react-css-themr';
|
||||
import { AppBar } from './AppBar.js';
|
||||
import { APP_BAR } from '../identifiers.js';
|
||||
import { appBarFactory } from './AppBar.js';
|
||||
import FontIcon from '../font_icon/FontIcon.js';
|
||||
import theme from './theme.scss';
|
||||
|
||||
const AppBar = appBarFactory(FontIcon);
|
||||
const ThemedAppBar = themr(APP_BAR, theme)(AppBar);
|
||||
|
||||
export default ThemedAppBar;
|
||||
|
|
|
@ -15,6 +15,8 @@ const AppBarTest = () => (
|
|||
|
||||
If you want to provide a theme via context, the component key is `RTAppBar`.
|
||||
|
||||
The `AppBar` component provides properties for the common use cases of `title`, `leftIcon` and `rightIcon`. However, you can also override these with your own content by not specifying these and instead provide children elements, as shown in the example.
|
||||
|
||||
## Properties
|
||||
|
||||
| Name | Type | Default | Description|
|
||||
|
@ -23,11 +25,18 @@ If you want to provide a theme via context, the component key is `RTAppBar`.
|
|||
| `fixed` | `Bool` | `false` | Determine if the bar should have position `fixed` or `relative`.|
|
||||
| `flat` | `Bool` | `false` | If true, the AppBar shows a shadow.|
|
||||
| `theme` | `Object` | `null` | Classnames object defining the component style.|
|
||||
| `title` | `String` | `null` | Title used for the appbar.|
|
||||
| `leftIcon` | `String` | `null` | Left icon.|
|
||||
| `onLeftIconClick` | `Function` | `null` | Called on left icon click event.|
|
||||
| `rightIcon` | `String` | `null` | Right icon.|
|
||||
| `onRightIconClick` | `Function` | `null` | Called on right icon click event.|
|
||||
|
||||
## Theme
|
||||
|
||||
| Name | Description|
|
||||
|:---------|:-----------|
|
||||
|:------------|:-----------|
|
||||
| `appBar` | Used for the component root element.|
|
||||
| `fixed` | Added to the root element when the app bar is fixed.|
|
||||
| `flat` | Added to the root element when the app bar is flat.|
|
||||
| `title` | Added to the title element of the app bar.|
|
||||
| `leftIcon` | Added to the left icon element when the app bar.|
|
||||
| `rightIcon` | Added to the right icon element when the app bar.|
|
||||
|
|
|
@ -35,4 +35,25 @@
|
|||
a {
|
||||
color: $appbar-contrast;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex-grow: 1;
|
||||
font-size: 1.8 * $unit;
|
||||
font-weight: bold;
|
||||
> small {
|
||||
font-size: 1.8 * $unit;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.leftIcon {
|
||||
padding: 1.2 * $unit 1.2 * $unit 1.2 * $unit 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.rightIcon {
|
||||
padding: 1.2 * $unit 0 1.2 * $unit 1.2 * $unit;
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -118,10 +118,9 @@ const factory = (Chip, Input) => {
|
|||
if (event.which === 13) {
|
||||
let target = this.state.active;
|
||||
if (!target) {
|
||||
target = [...this.suggestions().keys()][0];
|
||||
if (!target && this.props.allowCreate) {
|
||||
target = this.state.query;
|
||||
}
|
||||
target = this.props.allowCreate
|
||||
? this.state.query
|
||||
: [...this.suggestions().keys()][0];
|
||||
this.setState({active: target});
|
||||
}
|
||||
this.select(event, target);
|
||||
|
@ -164,7 +163,7 @@ const factory = (Chip, Input) => {
|
|||
|
||||
suggestions () {
|
||||
let suggest = new Map();
|
||||
const rawQuery = this.state.query || this.props.multiple ? '' : this.props.value;
|
||||
const rawQuery = this.state.query || (this.props.multiple ? '' : this.props.value);
|
||||
const query = (rawQuery || '').toLowerCase().trim();
|
||||
const values = this.values();
|
||||
const source = this.source();
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface AutocompleteTheme {
|
||||
/**
|
||||
|
@ -43,7 +44,7 @@ export interface AutocompleteTheme {
|
|||
values?: string;
|
||||
}
|
||||
|
||||
interface AutocompleteProps extends __ReactToolbox.Props {
|
||||
interface AutocompleteProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Determines the opening direction. It can be auto, up or down.
|
||||
* @default auto
|
||||
|
@ -100,6 +101,6 @@ interface AutocompleteProps extends __ReactToolbox.Props {
|
|||
value?: any;
|
||||
}
|
||||
|
||||
export class Autocomplete extends __React.Component<AutocompleteProps, {}> { }
|
||||
export class Autocomplete extends React.Component<AutocompleteProps, {}> { }
|
||||
|
||||
export default Autocomplete;
|
||||
|
|
|
@ -45,7 +45,7 @@ If you want to provide a theme via context, the component key is `RTAutocomplete
|
|||
|:-----|:-----|:-----|:-----|
|
||||
| `allowCreate` | `Bool` | `false` | Determines if user can create a new option with the current typed value |
|
||||
| `className` | `String` | `''` | Sets a class to style of the Component.|
|
||||
| `direction` | `String` | `auto` | Determines the opening direction. It can be `auto`, `top` or `bottom`.|
|
||||
| `direction` | `String` | `auto` | Determines the opening direction. It can be `auto`, `top` or `down`.|
|
||||
| `disabled` | `Bool` | `false` | If true, component will be disabled.|
|
||||
| `error` | `String` | | Sets the error string for the internal input element.|
|
||||
| `label` | `String` | | The text string to use for the floating label element.|
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface AvatarTheme {
|
||||
/**
|
||||
|
@ -15,11 +16,11 @@ export interface AvatarTheme {
|
|||
letter?: string;
|
||||
}
|
||||
|
||||
interface AvatarProps extends __ReactToolbox.Props {
|
||||
interface AvatarProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Set to true if your image is not squared so it will be used as a cover for the element.
|
||||
*/
|
||||
|
@ -27,11 +28,11 @@ interface AvatarProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* A key to identify an Icon from Material Design Icons or a custom Icon Element.
|
||||
*/
|
||||
icon?: __React.ReactNode | string;
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* An image source or an image element.
|
||||
*/
|
||||
image?: __React.ReactNode | string;
|
||||
image?: React.ReactNode | string;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
|
@ -42,6 +43,6 @@ interface AvatarProps extends __ReactToolbox.Props {
|
|||
title?: string;
|
||||
}
|
||||
|
||||
export class Avatar extends __React.Component<AvatarProps, {}> { }
|
||||
export class Avatar extends React.Component<AvatarProps, {}> { }
|
||||
|
||||
export default Avatar;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface ButtonTheme {
|
||||
/**
|
||||
|
@ -51,7 +52,7 @@ export interface ButtonTheme {
|
|||
toggle?: string;
|
||||
}
|
||||
|
||||
interface ButtonProps extends __ReactToolbox.Props {
|
||||
interface ButtonProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Indicates if the button should have accent color.
|
||||
* @default false
|
||||
|
@ -60,7 +61,7 @@ interface ButtonProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, component will be disabled.
|
||||
* @default false
|
||||
|
@ -83,7 +84,7 @@ interface ButtonProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Value of the icon (See Font Icon Component).
|
||||
*/
|
||||
icon?: __React.ReactNode | string;
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* If true, the neutral colors are inverted. Useful to put a button over a dark background.
|
||||
*/
|
||||
|
@ -123,7 +124,7 @@ interface ButtonProps extends __ReactToolbox.Props {
|
|||
theme?: ButtonTheme;
|
||||
}
|
||||
|
||||
export class Button extends __React.Component<ButtonProps, {}> { }
|
||||
export class Button extends React.Component<ButtonProps, {}> { }
|
||||
|
||||
export interface IconButtonTheme {
|
||||
/**
|
||||
|
@ -160,7 +161,7 @@ export interface IconButtonTheme {
|
|||
toggle?: string;
|
||||
}
|
||||
|
||||
interface IconButtonProps extends __ReactToolbox.Props {
|
||||
interface IconButtonProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Indicates if the button should have accent color.
|
||||
* @default false
|
||||
|
@ -169,7 +170,7 @@ interface IconButtonProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, component will be disabled.
|
||||
* @default false
|
||||
|
@ -182,7 +183,7 @@ interface IconButtonProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Value of the icon (See Font Icon Component).
|
||||
*/
|
||||
icon?: __React.ReactNode | string;
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* If true, the neutral colors are inverted. Useful to put a button over a dark background.
|
||||
*/
|
||||
|
@ -208,4 +209,4 @@ interface IconButtonProps extends __ReactToolbox.Props {
|
|||
theme?: IconButtonTheme;
|
||||
}
|
||||
|
||||
export class IconButton extends __React.Component<IconButtonProps, {}> { }
|
||||
export class IconButton extends React.Component<IconButtonProps, {}> { }
|
||||
|
|
|
@ -1,15 +1,16 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface CardTheme {
|
||||
card?: string;
|
||||
raised?: string;
|
||||
}
|
||||
|
||||
interface CardProps extends __ReactToolbox.Props {
|
||||
interface CardProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
raised?: boolean;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
|
@ -17,24 +18,24 @@ interface CardProps extends __ReactToolbox.Props {
|
|||
theme?: CardTheme;
|
||||
}
|
||||
|
||||
export class Card extends __React.Component<CardProps, {}> { }
|
||||
export class Card extends React.Component<CardProps, {}> { }
|
||||
|
||||
export interface CardActionsTheme {
|
||||
cardActions?: string;
|
||||
}
|
||||
|
||||
interface CardActionsProps extends __ReactToolbox.Props {
|
||||
interface CardActionsProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: CardActionsTheme;
|
||||
}
|
||||
|
||||
export class CardActions extends __React.Component<CardActionsProps, {}> { }
|
||||
export class CardActions extends React.Component<CardActionsProps, {}> { }
|
||||
|
||||
export interface CardMediaTheme {
|
||||
cardMedia?: string;
|
||||
|
@ -44,39 +45,39 @@ export interface CardMediaTheme {
|
|||
wide?: string;
|
||||
}
|
||||
|
||||
interface CardMediaProps extends __ReactToolbox.Props {
|
||||
interface CardMediaProps extends ReactToolbox.Props {
|
||||
aspectRatio?: "wide" | "square";
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
color?: string;
|
||||
contentOverlay?: boolean;
|
||||
image?: __React.ReactNode | string;
|
||||
image?: React.ReactNode | string;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: CardMediaTheme;
|
||||
}
|
||||
|
||||
export class CardMedia extends __React.Component<CardMediaProps, {}> { }
|
||||
export class CardMedia extends React.Component<CardMediaProps, {}> { }
|
||||
|
||||
export interface CardTextTheme {
|
||||
cardText?: string;
|
||||
}
|
||||
|
||||
interface CardTextProps extends __ReactToolbox.Props {
|
||||
interface CardTextProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: CardTextTheme;
|
||||
}
|
||||
|
||||
export class CardText extends __React.Component<CardTextProps, {}> { }
|
||||
export class CardText extends React.Component<CardTextProps, {}> { }
|
||||
|
||||
export interface CardTitleTheme {
|
||||
large?: string;
|
||||
|
@ -85,18 +86,18 @@ export interface CardTitleTheme {
|
|||
subtitle?: string;
|
||||
}
|
||||
|
||||
interface CardTitleProps extends __ReactToolbox.Props {
|
||||
avatar?: __React.ReactNode | string;
|
||||
interface CardTitleProps extends ReactToolbox.Props {
|
||||
avatar?: React.ReactNode | string;
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
subtitle?: __React.ReactNode | string;
|
||||
children?: React.ReactNode;
|
||||
subtitle?: React.ReactNode | string;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: CardTitleTheme;
|
||||
title?: __React.ReactNode | string;
|
||||
title?: React.ReactNode | string;
|
||||
}
|
||||
|
||||
export class CardTitle extends __React.Component<CardTitleProps, {}> { }
|
||||
export class CardTitle extends React.Component<CardTitleProps, {}> { }
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface CheckboxTheme {
|
||||
/**
|
||||
|
@ -31,7 +32,7 @@ export interface CheckboxTheme {
|
|||
text?: string;
|
||||
}
|
||||
|
||||
interface CheckboxProps extends __ReactToolbox.Props {
|
||||
interface CheckboxProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Value for the checkbox, can be true or false.
|
||||
* @default false
|
||||
|
@ -45,7 +46,7 @@ interface CheckboxProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Text label to attach next to the checkbox element.
|
||||
*/
|
||||
label?: __React.ReactNode | string;
|
||||
label?: React.ReactNode | string;
|
||||
/**
|
||||
* The name of the field to set in the input checkbox.
|
||||
*/
|
||||
|
@ -64,6 +65,6 @@ interface CheckboxProps extends __ReactToolbox.Props {
|
|||
theme?: CheckboxTheme;
|
||||
}
|
||||
|
||||
export class Checkbox extends __React.Component<CheckboxProps, {}> { }
|
||||
export class Checkbox extends React.Component<CheckboxProps, {}> { }
|
||||
|
||||
export default Checkbox;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface ChipTheme {
|
||||
/**
|
||||
|
@ -27,11 +28,11 @@ export interface ChipTheme {
|
|||
deleteX?: string;
|
||||
}
|
||||
|
||||
interface ChipProps extends __ReactToolbox.Props {
|
||||
interface ChipProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, the chip will be rendered with a delete icon.
|
||||
* @default false
|
||||
|
@ -47,6 +48,6 @@ interface ChipProps extends __ReactToolbox.Props {
|
|||
theme?: ChipTheme;
|
||||
}
|
||||
|
||||
export class Chip extends __React.Component<ChipProps, {}> { }
|
||||
export class Chip extends React.Component<ChipProps, {}> { }
|
||||
|
||||
export default Chip;
|
||||
|
|
|
@ -11,6 +11,7 @@ const factory = (IconButton) => {
|
|||
class Calendar extends Component {
|
||||
static propTypes = {
|
||||
display: PropTypes.oneOf(['months', 'years']),
|
||||
handleSelect: PropTypes.func,
|
||||
locale: React.PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
||||
React.PropTypes.object
|
||||
|
@ -39,12 +40,20 @@ const factory = (IconButton) => {
|
|||
viewDate: this.props.selectedDate
|
||||
};
|
||||
|
||||
componentWillMount () {
|
||||
document.body.addEventListener('keydown', this.handleKeys);
|
||||
}
|
||||
|
||||
componentDidUpdate () {
|
||||
if (this.refs.activeYear) {
|
||||
this.scrollToActive();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
document.body.removeEventListener('keydown', this.handleKeys);
|
||||
}
|
||||
|
||||
scrollToActive () {
|
||||
this.refs.years.scrollTop = this.refs.activeYear.offsetTop
|
||||
- this.refs.years.offsetHeight / 2
|
||||
|
@ -56,14 +65,34 @@ const factory = (IconButton) => {
|
|||
};
|
||||
|
||||
handleYearClick = (event) => {
|
||||
const year = parseInt(event.target.id);
|
||||
const year = parseInt(event.currentTarget.id);
|
||||
const viewDate = time.setYear(this.props.selectedDate, year);
|
||||
this.setState({viewDate});
|
||||
this.props.onChange(viewDate, false);
|
||||
};
|
||||
|
||||
handleKeys = (e) => {
|
||||
const { selectedDate } = this.props;
|
||||
|
||||
if (e.which === 37 || e.which === 38 || e.which === 39 || e.which === 40 || e.which === 13) e.preventDefault();
|
||||
|
||||
switch (e.which) {
|
||||
case 13: this.props.handleSelect(); break; // enter
|
||||
case 37: this.handleDayArrowKey(time.addDays(selectedDate, -1)); break; // left
|
||||
case 38: this.handleDayArrowKey(time.addDays(selectedDate, -7)); break; // up
|
||||
case 39: this.handleDayArrowKey(time.addDays(selectedDate, 1)); break; // right
|
||||
case 40: this.handleDayArrowKey(time.addDays(selectedDate, 7)); break; // down
|
||||
default: break;
|
||||
}
|
||||
}
|
||||
|
||||
handleDayArrowKey = (date) => {
|
||||
this.setState({ viewDate: date });
|
||||
this.props.onChange(date, false);
|
||||
}
|
||||
|
||||
changeViewMonth = (event) => {
|
||||
const direction = event.target.id;
|
||||
const direction = event.currentTarget.id;
|
||||
this.setState({
|
||||
direction,
|
||||
viewDate: time.addMonths(this.state.viewDate, DIRECTION_STEPS[direction])
|
||||
|
|
|
@ -130,8 +130,8 @@ const factory = (Input, DatePickerDialog) => {
|
|||
minDate={minDate}
|
||||
name={this.props.name}
|
||||
onDismiss={this.handleDismiss}
|
||||
onEscKeyDown={onEscKeyDown}
|
||||
onOverlayClick={onOverlayClick}
|
||||
onEscKeyDown={onEscKeyDown || this.handleDismiss}
|
||||
onOverlayClick={onOverlayClick || this.handleDismiss}
|
||||
onSelect={this.handleSelect}
|
||||
sundayFirstDayOfWeek={sundayFirstDayOfWeek}
|
||||
theme={this.props.theme}
|
||||
|
|
|
@ -116,6 +116,7 @@ const factory = (Dialog, Calendar) => {
|
|||
<div className={theme.calendarWrapper}>
|
||||
<Calendar
|
||||
display={this.state.display}
|
||||
handleSelect={this.handleSelect}
|
||||
maxDate={this.props.maxDate}
|
||||
minDate={this.props.minDate}
|
||||
onChange={this.handleNewDate}
|
||||
|
|
|
@ -21,7 +21,7 @@ $calendar-primary-contrast-color: $calendar-primary-contrast !default;
|
|||
$calendar-primary-hover-color: rgba($calendar-primary, .21) !default;
|
||||
$calendar-arrows-color: $palette-grey-600 !default;
|
||||
$calendar-arrows-font-size: 2 * $unit !default;
|
||||
$calendar-year-font-size: 2.4 !default;
|
||||
$calendar-year-font-size: 2.4 * $unit !default;
|
||||
$calendar-day-font-size: 1.3 * $unit !default;
|
||||
$calendar-day-disable-opacity: 0.25 !default;
|
||||
$calendar-row-height: 3 * $unit !default;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface DatePickerTheme {
|
||||
/**
|
||||
|
@ -83,7 +84,7 @@ export interface DatePickerTheme {
|
|||
yearsDisplay?: string;
|
||||
}
|
||||
|
||||
interface DatePickerProps extends __ReactToolbox.Props {
|
||||
interface DatePickerProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Automatically selects a date upon clicking on a day
|
||||
* @default false
|
||||
|
@ -96,7 +97,7 @@ interface DatePickerProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* A key to identify an Icon from Material Design Icons or a custom Icon Element.
|
||||
*/
|
||||
icon?: __React.ReactNode | string;
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* This class will be applied to Input component of DatePicker.
|
||||
*/
|
||||
|
@ -143,6 +144,6 @@ interface DatePickerProps extends __ReactToolbox.Props {
|
|||
value?: Date | string;
|
||||
}
|
||||
|
||||
export class DatePicker extends __React.Component<DatePickerProps, {}> { }
|
||||
export class DatePicker extends React.Component<DatePickerProps, {}> { }
|
||||
|
||||
export default DatePicker;
|
||||
|
|
|
@ -101,6 +101,7 @@
|
|||
cursor: pointer;
|
||||
&.active {
|
||||
font-size: $calendar-year-font-size;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
color: $calendar-primary-color;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface DialogTheme {
|
||||
/**
|
||||
|
@ -38,7 +39,7 @@ interface DialogActionProps {
|
|||
onClick?: Function;
|
||||
}
|
||||
|
||||
interface DialogProps extends __ReactToolbox.Props {
|
||||
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.
|
||||
*/
|
||||
|
@ -51,7 +52,7 @@ interface DialogProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Callback called when the ESC key is pressed with the overlay active.
|
||||
*/
|
||||
|
@ -87,6 +88,6 @@ interface DialogProps extends __ReactToolbox.Props {
|
|||
type?: string;
|
||||
}
|
||||
|
||||
export class Dialog extends __React.Component<DialogProps, {}> { }
|
||||
export class Dialog extends React.Component<DialogProps, {}> { }
|
||||
|
||||
export default Dialog;
|
||||
|
|
|
@ -54,7 +54,10 @@ If you want to provide a theme via context, the component key is `RTDialog`.
|
|||
| `onOverlayMouseMove` | `Function` | | Callback called when the mouse is moving over the overlay. |
|
||||
| `onOverlayMouseUp` | `Function` | | Callback called when the mouse button is released over the overlay. |
|
||||
| `title` | `String` | | The text string to use as standar title of the dialog.|
|
||||
| `type` | `String` | `normal` | Used to determine the size of the dialog. It can be `small`, `normal` or `large`. |
|
||||
| `type` | `String` | `normal` | Used to determine the size of the dialog. It can be `small`, `normal`, `large` or `fullscreen`. |
|
||||
|
||||
Notice that the `fullscreen` option only applies on mobile devices with small screens (i.e. cellphones), and on other devices it behaves as a `large` dialog.
|
||||
|
||||
|
||||
## Theme
|
||||
|
||||
|
|
|
@ -47,6 +47,18 @@
|
|||
width: 96vw;
|
||||
}
|
||||
|
||||
.fullscreen {
|
||||
width: 96vw;
|
||||
|
||||
@media screen and (max-width: $layout-breakpoint-xs) {
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
min-height: 100vh;
|
||||
max-height: 100vh;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
@include typo-title();
|
||||
flex-grow: 0;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface DrawerTheme {
|
||||
/**
|
||||
|
@ -23,7 +24,7 @@ export interface DrawerTheme {
|
|||
right?: string;
|
||||
}
|
||||
|
||||
interface DrawerProps extends __ReactToolbox.Props {
|
||||
interface DrawerProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* If true, the drawer will be visible.
|
||||
* @default false
|
||||
|
@ -32,7 +33,7 @@ interface DrawerProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Callback function to be invoked when the overlay is clicked.
|
||||
*/
|
||||
|
@ -48,6 +49,6 @@ interface DrawerProps extends __ReactToolbox.Props {
|
|||
type?: "left" | "right";
|
||||
}
|
||||
|
||||
export class Drawer extends __React.Component<DrawerProps, {}> { }
|
||||
export class Drawer extends React.Component<DrawerProps, {}> { }
|
||||
|
||||
export default Drawer;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface DropdownTheme {
|
||||
/**
|
||||
|
@ -51,7 +52,7 @@ export interface DropdownTheme {
|
|||
values?: string;
|
||||
}
|
||||
|
||||
interface DropdownProps extends __ReactToolbox.Props {
|
||||
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
|
||||
|
@ -109,6 +110,6 @@ interface DropdownProps extends __ReactToolbox.Props {
|
|||
value?: string | number;
|
||||
}
|
||||
|
||||
export class Dropdown extends __React.Component<DropdownProps, {}> { }
|
||||
export class Dropdown extends React.Component<DropdownProps, {}> { }
|
||||
|
||||
export default Dropdown;
|
||||
|
|
|
@ -37,7 +37,7 @@
|
|||
}
|
||||
|
||||
.value {
|
||||
> .input {
|
||||
> input {
|
||||
cursor: pointer;
|
||||
}
|
||||
&:after {
|
||||
|
|
|
@ -1,16 +1,17 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
interface FontIconProps extends __ReactToolbox.Props {
|
||||
interface FontIconProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* The key string for the icon you want be displayed.
|
||||
*/
|
||||
value?: __React.ReactNode | string;
|
||||
value?: React.ReactNode | string;
|
||||
}
|
||||
|
||||
export class FontIcon extends __React.Component<FontIconProps, {}> { }
|
||||
export class FontIcon extends React.Component<FontIconProps, {}> { }
|
||||
|
||||
export default FontIcon;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface InputTheme {
|
||||
/**
|
||||
|
@ -51,11 +52,11 @@ export interface InputTheme {
|
|||
withIcon?: string;
|
||||
}
|
||||
|
||||
interface InputProps extends __ReactToolbox.Props {
|
||||
interface InputProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, component will be disabled.
|
||||
* @default false
|
||||
|
@ -77,7 +78,7 @@ interface InputProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Name of an icon to use as a label for the input.
|
||||
*/
|
||||
icon?: __React.ReactNode | string;
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* The text string to use for the floating label element.
|
||||
*/
|
||||
|
@ -130,6 +131,6 @@ interface InputProps extends __ReactToolbox.Props {
|
|||
value?: any;
|
||||
}
|
||||
|
||||
export class Input extends __React.Component<InputProps, {}> { }
|
||||
export class Input extends React.Component<InputProps, {}> { }
|
||||
|
||||
export default Input;
|
||||
|
|
|
@ -9,42 +9,11 @@ const Layout = ({ className, children, theme }) => (
|
|||
</div>
|
||||
);
|
||||
|
||||
const ALLOWED_THEMED = [
|
||||
'Themed Panel',
|
||||
'Themed NavDrawer|Themed Panel',
|
||||
'Themed NavDrawer|Themed Panel|Themed Sidebar',
|
||||
'Themed Panel|Themed Sidebar'
|
||||
];
|
||||
|
||||
function getChildName (child) {
|
||||
if (child.type) {
|
||||
return child.type.displayName || child.type.name || child.type;
|
||||
}
|
||||
if (!child.constructor || !child.constructor.name) {
|
||||
return 'UNKNOWN';
|
||||
}
|
||||
return child.constructor.name;
|
||||
}
|
||||
|
||||
Layout.propTypes = {
|
||||
children (props, propName, componentName) {
|
||||
// Accept only [NavDrawer]Pane[Sidebar]
|
||||
const children = props[propName];
|
||||
if (React.Children.count(children) > 3) {
|
||||
return new Error(
|
||||
'`' + componentName + '` '
|
||||
+ 'should have a Pane for a child, optionally preceded and/or followed by a Drawer.'
|
||||
);
|
||||
}
|
||||
|
||||
const names = React.Children.map(children, getChildName).join('|');
|
||||
if (!(~ALLOWED_THEMED.indexOf(names))) {
|
||||
return new Error(
|
||||
'`' + componentName + '` '
|
||||
+ 'should have a Panel for a child, optionally preceded by a NavDrawer and/or followed by a Sidebar.'
|
||||
);
|
||||
}
|
||||
},
|
||||
children: PropTypes.oneOfType([
|
||||
PropTypes.arrayOf(PropTypes.element),
|
||||
PropTypes.element
|
||||
]),
|
||||
className: PropTypes.string,
|
||||
theme: PropTypes.shape({
|
||||
layout: PropTypes.string
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface LayoutTheme {
|
||||
/**
|
||||
|
@ -7,7 +8,7 @@ export interface LayoutTheme {
|
|||
layout?: string;
|
||||
}
|
||||
|
||||
interface LayoutProps extends __ReactToolbox.Props {
|
||||
interface LayoutProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
|
@ -18,7 +19,7 @@ interface LayoutProps extends __ReactToolbox.Props {
|
|||
theme?: LayoutTheme;
|
||||
}
|
||||
|
||||
export class Layout extends __React.Component<LayoutProps, {}> { }
|
||||
export class Layout extends React.Component<LayoutProps, {}> { }
|
||||
|
||||
export interface NavDrawerTheme {
|
||||
/**
|
||||
|
@ -75,7 +76,7 @@ export interface NavDrawerTheme {
|
|||
xxxlPermangent?: string;
|
||||
}
|
||||
|
||||
interface NavDrawerProps extends __ReactToolbox.Props {
|
||||
interface NavDrawerProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* If true, the drawer will be shown as an overlay.
|
||||
* @default false
|
||||
|
@ -84,7 +85,7 @@ interface NavDrawerProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Callback function to be invoked when the overlay is clicked.
|
||||
*/
|
||||
|
@ -114,7 +115,7 @@ interface NavDrawerProps extends __ReactToolbox.Props {
|
|||
width?: "normal" | "wide";
|
||||
}
|
||||
|
||||
export class NavDrawer extends __React.Component<NavDrawerProps, {}> { }
|
||||
export class NavDrawer extends React.Component<NavDrawerProps, {}> { }
|
||||
|
||||
export interface PanelTheme {
|
||||
/**
|
||||
|
@ -127,11 +128,11 @@ export interface PanelTheme {
|
|||
scrollY?: string;
|
||||
}
|
||||
|
||||
interface PanelProps extends __ReactToolbox.Props {
|
||||
interface PanelProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, the panel will vertically scroll all content.
|
||||
* @default false
|
||||
|
@ -143,7 +144,7 @@ interface PanelProps extends __ReactToolbox.Props {
|
|||
theme?: PanelTheme;
|
||||
}
|
||||
|
||||
export class Panel extends __React.Component<PanelProps, {}> { }
|
||||
export class Panel extends React.Component<PanelProps, {}> { }
|
||||
|
||||
export interface SidebarTheme {
|
||||
/**
|
||||
|
@ -164,11 +165,11 @@ export interface SidebarTheme {
|
|||
sidebarContent?: string;
|
||||
}
|
||||
|
||||
interface SidebarProps extends __ReactToolbox.Props {
|
||||
interface SidebarProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, the sidebar will be pinned open.
|
||||
* @default false
|
||||
|
@ -190,4 +191,4 @@ interface SidebarProps extends __ReactToolbox.Props {
|
|||
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<SidebarProps, {}> { }
|
||||
export class Sidebar extends React.Component<SidebarProps, {}> { }
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface LinkTheme {
|
||||
/**
|
||||
|
@ -15,7 +16,7 @@ export interface LinkTheme {
|
|||
link?: string;
|
||||
}
|
||||
|
||||
interface LinkProps extends __ReactToolbox.Props {
|
||||
interface LinkProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* If true, adds active style to link.
|
||||
* @default false
|
||||
|
@ -24,7 +25,7 @@ interface LinkProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Sets a count number.
|
||||
*/
|
||||
|
@ -36,7 +37,7 @@ interface LinkProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* An icon key string to include a FontIcon component in front of the text.
|
||||
*/
|
||||
icon?: __React.ReactNode | string;
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* The text string used for the text content of the link.
|
||||
*/
|
||||
|
@ -47,4 +48,4 @@ interface LinkProps extends __ReactToolbox.Props {
|
|||
theme?: LinkTheme;
|
||||
}
|
||||
|
||||
export class Link extends __React.Component<LinkProps, {}> { }
|
||||
export class Link extends React.Component<LinkProps, {}> { }
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface ListTheme {
|
||||
/**
|
||||
|
@ -7,11 +8,11 @@ export interface ListTheme {
|
|||
list?: string;
|
||||
}
|
||||
|
||||
interface ListProps extends __ReactToolbox.Props {
|
||||
interface ListProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, each element in the list will have a ripple effect on click
|
||||
* @default false
|
||||
|
@ -28,7 +29,7 @@ interface ListProps extends __ReactToolbox.Props {
|
|||
theme?: ListTheme;
|
||||
}
|
||||
|
||||
export class List extends __React.Component<ListProps, {}> { }
|
||||
export class List extends React.Component<ListProps, {}> { }
|
||||
|
||||
export interface ListCheckboxTheme {
|
||||
/**
|
||||
|
@ -65,7 +66,7 @@ export interface ListCheckboxTheme {
|
|||
primary?: string;
|
||||
}
|
||||
|
||||
interface ListCheckboxProps extends __ReactToolbox.Props {
|
||||
interface ListCheckboxProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Main text of the item. Required.
|
||||
*/
|
||||
|
@ -106,7 +107,7 @@ interface ListCheckboxProps extends __ReactToolbox.Props {
|
|||
theme?: ListCheckboxTheme;
|
||||
}
|
||||
|
||||
export class ListCheckbox extends __React.Component<ListCheckboxProps, {}> { }
|
||||
export class ListCheckbox extends React.Component<ListCheckboxProps, {}> { }
|
||||
|
||||
export interface ListDividerTheme {
|
||||
/**
|
||||
|
@ -119,7 +120,7 @@ export interface ListDividerTheme {
|
|||
inset?: string;
|
||||
}
|
||||
|
||||
interface ListDividerProps extends __ReactToolbox.Props {
|
||||
interface ListDividerProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* If true, will leave a space at the left side.
|
||||
*/
|
||||
|
@ -130,7 +131,7 @@ interface ListDividerProps extends __ReactToolbox.Props {
|
|||
theme?: ListDividerTheme;
|
||||
}
|
||||
|
||||
export class ListDivider extends __React.Component<ListDivider, {}> { }
|
||||
export class ListDivider extends React.Component<ListDivider, {}> { }
|
||||
|
||||
export interface ListItemTheme {
|
||||
/**
|
||||
|
@ -179,11 +180,11 @@ export interface ListItemTheme {
|
|||
selectable?: string;
|
||||
}
|
||||
|
||||
interface ListItemProps extends __ReactToolbox.Props {
|
||||
interface ListItemProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* A string URL to specify an avatar in the left side of the item.
|
||||
*/
|
||||
avatar?: __React.ReactNode | string;
|
||||
avatar?: React.ReactNode | string;
|
||||
/**
|
||||
* Main text of the item.
|
||||
*/
|
||||
|
@ -191,7 +192,7 @@ interface ListItemProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, the item is displayed as disabled and is not clickable.
|
||||
* @default false
|
||||
|
@ -200,15 +201,15 @@ interface ListItemProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* An element that will be displayed as the item. If set, this will override caption and legend.
|
||||
*/
|
||||
itemContent?: __React.ReactNode;
|
||||
itemContent?: React.ReactNode;
|
||||
/**
|
||||
* A list of elements that are placed on the left side of the item and after the avatar attribute.
|
||||
*/
|
||||
leftActions?: __React.ReactNode;
|
||||
leftActions?: React.ReactNode;
|
||||
/**
|
||||
* A string key of a font icon or element to display an icon in the left side of the item.
|
||||
*/
|
||||
leftIcon?: __React.ReactNode | string;
|
||||
leftIcon?: React.ReactNode | string;
|
||||
/**
|
||||
* Secondary text to display under the caption.
|
||||
*/
|
||||
|
@ -216,11 +217,11 @@ interface ListItemProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* A list of elements that are placed on the right side of the item and after the rightIcon attribute.
|
||||
*/
|
||||
rightActions?: __React.ReactNode;
|
||||
rightActions?: React.ReactNode;
|
||||
/**
|
||||
* The same as the leftIcon but in this case the icon is displayed in the right side.
|
||||
*/
|
||||
rightIcon?: __React.ReactNode | string;
|
||||
rightIcon?: React.ReactNode | string;
|
||||
/**
|
||||
* If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
|
||||
*/
|
||||
|
@ -241,7 +242,7 @@ interface ListItemProps extends __ReactToolbox.Props {
|
|||
to?: string;
|
||||
}
|
||||
|
||||
export class ListItem extends __React.Component<ListItemProps, {}> { }
|
||||
export class ListItem extends React.Component<ListItemProps, {}> { }
|
||||
|
||||
export interface ListSubHeaderTheme {
|
||||
/**
|
||||
|
@ -250,15 +251,15 @@ export interface ListSubHeaderTheme {
|
|||
subheader?: string;
|
||||
}
|
||||
|
||||
interface ListSubHeaderProps extends __ReactToolbox.Props {
|
||||
interface ListSubHeaderProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Text that will be displayed.
|
||||
*/
|
||||
caption?: boolean;
|
||||
caption?: string;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: ListSubHeaderTheme;
|
||||
}
|
||||
|
||||
export class ListSubHeader extends __React.Component<ListSubHeaderProps, {}> { }
|
||||
export class ListSubHeader extends React.Component<ListSubHeaderProps, {}> { }
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface MenuTheme {
|
||||
/**
|
||||
|
@ -43,7 +44,7 @@ export interface MenuTheme {
|
|||
topRight?: string;
|
||||
}
|
||||
|
||||
interface MenuProps extends __ReactToolbox.Props {
|
||||
interface MenuProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* If true, the menu will be displayed as opened by default.
|
||||
* @default false
|
||||
|
@ -52,7 +53,7 @@ interface MenuProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Callback that will be called when the menu is being hidden.
|
||||
*/
|
||||
|
@ -95,7 +96,7 @@ interface MenuProps extends __ReactToolbox.Props {
|
|||
theme?: MenuTheme;
|
||||
}
|
||||
|
||||
export class Menu extends __React.Component<MenuProps, {}> { }
|
||||
export class Menu extends React.Component<MenuProps, {}> { }
|
||||
|
||||
export interface IconMenuTheme {
|
||||
/**
|
||||
|
@ -108,16 +109,16 @@ export interface IconMenuTheme {
|
|||
iconMenu?: string;
|
||||
}
|
||||
|
||||
interface IconMenuProps extends __ReactToolbox.Props {
|
||||
interface IconMenuProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Icon font key string or Element to display the opener icon.
|
||||
* @default more_vert
|
||||
*/
|
||||
icon?: __React.ReactNode | string;
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* If true, the icon will show a ripple when is clicked.
|
||||
* @default true
|
||||
|
@ -160,7 +161,7 @@ interface IconMenuProps extends __ReactToolbox.Props {
|
|||
theme?: IconMenuTheme;
|
||||
}
|
||||
|
||||
export class IconMenu extends __React.Component<IconMenuProps, {}> { }
|
||||
export class IconMenu extends React.Component<IconMenuProps, {}> { }
|
||||
|
||||
export interface MenuDividerTheme {
|
||||
/**
|
||||
|
@ -169,14 +170,14 @@ export interface MenuDividerTheme {
|
|||
menuDivider?: string;
|
||||
}
|
||||
|
||||
interface MenuDividerProps extends __ReactToolbox.Props {
|
||||
interface MenuDividerProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: MenuDividerTheme;
|
||||
}
|
||||
|
||||
export class MenuDivider extends __React.Component<MenuDividerProps, {}> { }
|
||||
export class MenuDivider extends React.Component<MenuDividerProps, {}> { }
|
||||
|
||||
export interface MenuItemTheme {
|
||||
/**
|
||||
|
@ -205,7 +206,7 @@ export interface MenuItemTheme {
|
|||
shortcut?: string;
|
||||
}
|
||||
|
||||
interface MenuItemProps extends __ReactToolbox.Props {
|
||||
interface MenuItemProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* The text to include in the menu item. Required.
|
||||
*/
|
||||
|
@ -213,7 +214,7 @@ interface MenuItemProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, the item will be displayed as disabled and is not selectable.
|
||||
* @default false
|
||||
|
@ -222,7 +223,7 @@ interface MenuItemProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Icon font key string or Element to display in the right side of the option.
|
||||
*/
|
||||
icon?: __React.ReactNode | string;
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* Transferred from the Menu component for selectable menus. Indicates if it's the current active option.
|
||||
* @default false
|
||||
|
@ -238,4 +239,4 @@ interface MenuItemProps extends __ReactToolbox.Props {
|
|||
theme?: MenuItemTheme;
|
||||
}
|
||||
|
||||
export class MenuItem extends __React.Component<MenuItemProps, {}> { }
|
||||
export class MenuItem extends React.Component<MenuItemProps, {}> { }
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface NavigationTheme {
|
||||
/**
|
||||
|
@ -19,7 +20,7 @@ export interface NavigationTheme {
|
|||
vertical?: string;
|
||||
}
|
||||
|
||||
interface NavigationProps extends __ReactToolbox.Props {
|
||||
interface NavigationProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Array of objects that will be represented as <Button/> so the keys will be transferred as properties the Button Component.
|
||||
*/
|
||||
|
@ -27,7 +28,7 @@ interface NavigationProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Array of objects similar to actions but that will be rendered as <Link/> component definition.
|
||||
*/
|
||||
|
@ -43,4 +44,4 @@ interface NavigationProps extends __ReactToolbox.Props {
|
|||
type?: "vertical" | "horizontal";
|
||||
}
|
||||
|
||||
export class Navigation extends __React.Component<NavigationProps, {}> { }
|
||||
export class Navigation extends React.Component<NavigationProps, {}> { }
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface ProgressBarTheme {
|
||||
/**
|
||||
|
@ -35,7 +36,7 @@ export interface ProgressBarTheme {
|
|||
value?: string;
|
||||
}
|
||||
|
||||
interface ProgressBarProps extends __ReactToolbox.Props {
|
||||
interface ProgressBarProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Value of a secondary progress bar useful for buffering.
|
||||
* @default 0
|
||||
|
@ -77,6 +78,6 @@ interface ProgressBarProps extends __ReactToolbox.Props {
|
|||
value?: number;
|
||||
}
|
||||
|
||||
export class ProgressBar extends __React.Component<ProgressBarProps, {}> { }
|
||||
export class ProgressBar extends React.Component<ProgressBarProps, {}> { }
|
||||
|
||||
export default ProgressBar;
|
||||
|
|
|
@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react';
|
|||
import { themr } from 'react-css-themr';
|
||||
import { RADIO } from '../identifiers.js';
|
||||
import InjectRadioButton from './RadioButton.js';
|
||||
import { isComponentOfType } from '../utils/react.js';
|
||||
|
||||
const factory = (RadioButton) => {
|
||||
class RadioGroup extends Component {
|
||||
|
@ -24,19 +25,15 @@ const factory = (RadioButton) => {
|
|||
};
|
||||
|
||||
renderRadioButtons () {
|
||||
return React.Children.map(this.props.children, (radio, idx) => {
|
||||
return (
|
||||
<RadioButton
|
||||
{...radio.props}
|
||||
checked={radio.props.value === this.props.value}
|
||||
disabled={this.props.disabled || radio.props.disabled}
|
||||
key={idx}
|
||||
label={radio.props.label}
|
||||
onChange={this.handleChange.bind(this, radio.props.value)}
|
||||
value={radio.props.value}
|
||||
/>
|
||||
);
|
||||
});
|
||||
return React.Children.map(this.props.children, child => (
|
||||
!isComponentOfType(RadioButton, child)
|
||||
? child
|
||||
: React.cloneElement(child, {
|
||||
checked: child.props.value === this.props.value,
|
||||
disabled: this.props.disabled || child.props.disabled,
|
||||
onChange: this.handleChange.bind(this, child.props.value)
|
||||
})
|
||||
));
|
||||
}
|
||||
|
||||
render () {
|
||||
|
|
|
@ -1,10 +1,11 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
interface RadioGroupProps extends __ReactToolbox.Props {
|
||||
interface RadioGroupProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, the group will be displayed as disabled.
|
||||
* @default false
|
||||
|
@ -24,7 +25,7 @@ interface RadioGroupProps extends __ReactToolbox.Props {
|
|||
value?: any;
|
||||
}
|
||||
|
||||
export class RadioGroup extends __React.Component<RadioGroupProps, {}> { }
|
||||
export class RadioGroup extends React.Component<RadioGroupProps, {}> { }
|
||||
|
||||
export interface RadioButtonTheme {
|
||||
/**
|
||||
|
@ -57,7 +58,7 @@ export interface RadioButtonTheme {
|
|||
text?: string;
|
||||
}
|
||||
|
||||
interface RadioButtonProps extends __ReactToolbox.Props {
|
||||
interface RadioButtonProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* If true, the input element will be selected by default. Transferred from the parent.
|
||||
* @default false
|
||||
|
@ -71,7 +72,7 @@ interface RadioButtonProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Label for the radio button.
|
||||
*/
|
||||
label?: __React.ReactNode | string;
|
||||
label?: React.ReactNode | string;
|
||||
/**
|
||||
* Name for the input element.
|
||||
*/
|
||||
|
@ -98,4 +99,4 @@ interface RadioButtonProps extends __ReactToolbox.Props {
|
|||
value?: any;
|
||||
}
|
||||
|
||||
export class RadioButton extends __React.Component<RadioButtonProps, {}> { }
|
||||
export class RadioButton extends React.Component<RadioButtonProps, {}> { }
|
||||
|
|
|
@ -240,23 +240,19 @@ const rippleFactory = (options = {}) => {
|
|||
}
|
||||
|
||||
render () {
|
||||
if (!this.props.ripple) {
|
||||
return <ComposedComponent {...this.props} />;
|
||||
} else {
|
||||
const { ripples } = this.state;
|
||||
const {
|
||||
ripple, onRippleEnded, rippleCentered, rippleMultiple, rippleSpread, //eslint-disable-line no-unused-vars
|
||||
children, rippleClassName: className, ...other
|
||||
} = this.props;
|
||||
const { onRippleEnded, rippleCentered, rippleMultiple, rippleSpread, // eslint-disable-line
|
||||
children, ripple, rippleClassName, ...other } = this.props;
|
||||
|
||||
if (!ripple) return <ComposedComponent children={children} {...other} />;
|
||||
return (
|
||||
<ComposedComponent {...other} onMouseDown={this.handleMouseDown} onTouchStart={this.handleTouchStart}>
|
||||
{children ? children : null}
|
||||
{Object.keys(ripples).map(key => this.renderRipple(key, className, ripples[key]))}
|
||||
{children}
|
||||
{Object.keys(ripples).map(key => this.renderRipple(key, rippleClassName, ripples[key]))}
|
||||
</ComposedComponent>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return themr(RIPPLE, defaultTheme)(RippledComponent);
|
||||
};
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface RippleTheme {
|
||||
/**
|
||||
|
@ -23,7 +24,7 @@ interface RippleProps {
|
|||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* True in case you want a centered ripple.
|
||||
* @default false
|
||||
|
@ -44,6 +45,6 @@ interface RippleProps {
|
|||
theme?: RippleTheme;
|
||||
}
|
||||
|
||||
export class Ripple extends __React.Component<RippleProps, {}> { }
|
||||
export class Ripple extends React.Component<RippleProps, {}> { }
|
||||
|
||||
export default Ripple;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface SliderTheme {
|
||||
/**
|
||||
|
@ -55,7 +56,7 @@ export interface SliderTheme {
|
|||
snaps?: string;
|
||||
}
|
||||
|
||||
interface SliderProps extends __ReactToolbox.Props {
|
||||
interface SliderProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* If true, an input is shown and the user can set the slider from keyboard value.
|
||||
* @default false
|
||||
|
@ -101,6 +102,6 @@ interface SliderProps extends __ReactToolbox.Props {
|
|||
value?: number;
|
||||
}
|
||||
|
||||
export class Slider extends __React.Component<SliderProps, {}> { }
|
||||
export class Slider extends React.Component<SliderProps, {}> { }
|
||||
|
||||
export default Slider;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface SnackbarTheme {
|
||||
/**
|
||||
|
@ -35,7 +36,7 @@ export interface SnackbarTheme {
|
|||
warning?: string;
|
||||
}
|
||||
|
||||
interface SnackbarProps extends __ReactToolbox.Props {
|
||||
interface SnackbarProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Label for the action component inside the Snackbar.
|
||||
*/
|
||||
|
@ -48,7 +49,7 @@ interface SnackbarProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* String key for an icon or Element which will be displayed in left side of the snackbar.
|
||||
*/
|
||||
icon?: __React.ReactNode | string;
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* Text to display in the content. Required.
|
||||
*/
|
||||
|
@ -71,6 +72,6 @@ interface SnackbarProps extends __ReactToolbox.Props {
|
|||
type?: "accept" | "cancel" | "warning";
|
||||
}
|
||||
|
||||
export class Snackbar extends __React.Component<SnackbarProps, {}> { }
|
||||
export class Snackbar extends React.Component<SnackbarProps, {}> { }
|
||||
|
||||
export default Snackbar;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface SwitchTheme {
|
||||
/**
|
||||
|
@ -35,7 +36,7 @@ export interface SwitchTheme {
|
|||
thumb?: string;
|
||||
}
|
||||
|
||||
interface SwitchProps extends __ReactToolbox.Props {
|
||||
interface SwitchProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* If true, the switch will be enabled.
|
||||
* @default false
|
||||
|
@ -72,6 +73,6 @@ interface SwitchProps extends __ReactToolbox.Props {
|
|||
theme?: SwitchTheme;
|
||||
}
|
||||
|
||||
export class Switch extends __React.Component<SwitchProps, {}> { }
|
||||
export class Switch extends React.Component<SwitchProps, {}> { }
|
||||
|
||||
export default Switch;
|
||||
|
|
|
@ -42,11 +42,11 @@ const factory = (TableHead, TableRow) => {
|
|||
|
||||
handleRowSelect = (index) => {
|
||||
if (this.props.onSelect) {
|
||||
let newSelection = [];
|
||||
let newSelection = [...this.props.selected];
|
||||
if (this.props.multiSelectable) {
|
||||
const position = this.props.selected.indexOf(index);
|
||||
newSelection = this.props.selected.indexOf(index) !== -1
|
||||
? this.props.selected.filter((el, idx) => idx !== position)
|
||||
newSelection = position !== -1
|
||||
? newSelection.filter((el, idx) => idx !== position)
|
||||
: newSelection.concat([index]);
|
||||
} else {
|
||||
newSelection = [index];
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface TableTheme {
|
||||
/**
|
||||
|
@ -23,7 +24,7 @@ export interface TableTheme {
|
|||
table?: string;
|
||||
}
|
||||
|
||||
interface TableProps extends __ReactToolbox.Props {
|
||||
interface TableProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* If true, component will show a heading using model field names.
|
||||
* @default true
|
||||
|
@ -65,6 +66,6 @@ interface TableProps extends __ReactToolbox.Props {
|
|||
theme?: TableTheme;
|
||||
}
|
||||
|
||||
export class Table extends __React.Component<TableProps, {}> { }
|
||||
export class Table extends React.Component<TableProps, {}> { }
|
||||
|
||||
export default Table;
|
||||
|
|
|
@ -8,10 +8,10 @@
|
|||
font-size: $font-size-tiny;
|
||||
color: $table-text-color;
|
||||
text-align: left;
|
||||
border-spacing: 0;
|
||||
tr {
|
||||
height: $table-row-height;
|
||||
line-height: $table-row-height;
|
||||
border-bottom: $table-row-divider;
|
||||
}
|
||||
th {
|
||||
font-weight: $font-weight-bold;
|
||||
|
@ -22,6 +22,7 @@
|
|||
th, td {
|
||||
position: relative;
|
||||
padding: 0 $table-row-offset;
|
||||
border-bottom: $table-row-divider;
|
||||
&.selectable {
|
||||
width: 1.8 * $unit;
|
||||
padding-right: 0;
|
||||
|
@ -35,8 +36,10 @@
|
|||
.row {
|
||||
transition: background-color $animation-duration $animation-curve-default;
|
||||
&:last-child {
|
||||
td {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
> td {
|
||||
> input {
|
||||
display: block;
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { FontIcon } from '../font_icon';
|
||||
import { themr } from 'react-css-themr';
|
||||
import { TABS } from '../identifiers.js';
|
||||
|
||||
|
@ -10,7 +11,8 @@ class Tab extends Component {
|
|||
className: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
hidden: PropTypes.bool,
|
||||
label: PropTypes.any.isRequired,
|
||||
icon: PropTypes.node,
|
||||
label: PropTypes.node,
|
||||
onActive: PropTypes.func,
|
||||
onClick: PropTypes.func,
|
||||
theme: PropTypes.shape({
|
||||
|
@ -43,18 +45,21 @@ class Tab extends Component {
|
|||
render () {
|
||||
const {
|
||||
onActive, // eslint-disable-line
|
||||
active, activeClassName, className, disabled, hidden, theme, ...other
|
||||
active, activeClassName, className, disabled, hidden, label, icon, theme, ...other
|
||||
} = this.props;
|
||||
const _className = classnames(theme.label, {
|
||||
[theme.active]: active,
|
||||
[theme.hidden]: hidden,
|
||||
[theme.withText]: label,
|
||||
[theme.withIcon]: icon,
|
||||
[theme.disabled]: disabled,
|
||||
[activeClassName]: active
|
||||
}, className);
|
||||
|
||||
return (
|
||||
<label {...other} data-react-toolbox='tab' className={_className} onClick={this.handleClick}>
|
||||
{this.props.label}
|
||||
{icon && <FontIcon className={theme.icon} value={icon}/>}
|
||||
{label}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -12,6 +12,7 @@ const factory = (Tab, TabContent) => {
|
|||
className: PropTypes.string,
|
||||
disableAnimatedBottomBorder: PropTypes.bool,
|
||||
fixed: PropTypes.bool,
|
||||
hideMode: PropTypes.oneOf(['display', 'unmounted']),
|
||||
index: PropTypes.number,
|
||||
inverse: PropTypes.bool,
|
||||
onChange: PropTypes.func,
|
||||
|
@ -27,7 +28,8 @@ const factory = (Tab, TabContent) => {
|
|||
static defaultProps = {
|
||||
index: 0,
|
||||
fixed: false,
|
||||
inverse: false
|
||||
inverse: false,
|
||||
hideMode: 'unmounted'
|
||||
};
|
||||
|
||||
state = {
|
||||
|
@ -119,18 +121,21 @@ const factory = (Tab, TabContent) => {
|
|||
}
|
||||
|
||||
renderContents (contents) {
|
||||
const activeIdx = contents.findIndex((item, idx) => {
|
||||
return this.props.index === idx;
|
||||
const contentElements = contents.map((item, idx) => {
|
||||
return React.cloneElement(item, {
|
||||
key: idx,
|
||||
theme: this.props.theme,
|
||||
active: this.props.index === idx,
|
||||
hidden: this.props.index !== idx && this.props.hideMode === 'display',
|
||||
tabIndex: idx
|
||||
});
|
||||
});
|
||||
|
||||
if (contents && contents[activeIdx]) {
|
||||
return React.cloneElement(contents[activeIdx], {
|
||||
key: activeIdx,
|
||||
theme: this.props.theme,
|
||||
active: true,
|
||||
tabIndex: activeIdx
|
||||
});
|
||||
if (this.props.hideMode === 'display') {
|
||||
return contentElements;
|
||||
}
|
||||
|
||||
return contentElements.filter((item, idx) => (idx === this.props.index));
|
||||
}
|
||||
|
||||
render () {
|
||||
|
|
|
@ -18,7 +18,6 @@ const getRenderedClassName = (tree, TargetComponent) => {
|
|||
describe('Tabs', function () {
|
||||
let tabContents, composition;
|
||||
|
||||
it('only renders the current tab', function () {
|
||||
class Composition extends Component {
|
||||
constructor () {
|
||||
super();
|
||||
|
@ -27,7 +26,7 @@ describe('Tabs', function () {
|
|||
|
||||
render () {
|
||||
return (
|
||||
<Tabs index={this.state.index}>
|
||||
<Tabs index={this.state.index} {...this.props}>
|
||||
<Tab label="tab1">tab1</Tab>
|
||||
<Tab label="tab2">tab2</Tab>
|
||||
</Tabs>
|
||||
|
@ -35,6 +34,7 @@ describe('Tabs', function () {
|
|||
}
|
||||
}
|
||||
|
||||
it('defaults to only rendering the current tab', function () {
|
||||
// initial render
|
||||
composition = utils.renderComponent(Composition);
|
||||
|
||||
|
@ -55,6 +55,37 @@ describe('Tabs', function () {
|
|||
expect(tabContents[0].props.tabIndex).toEqual(1);
|
||||
});
|
||||
|
||||
it('renders inactive tabs when hideMode is set to display', function () {
|
||||
// initial render
|
||||
composition = utils.renderComponent(Composition, { hideMode: 'display' });
|
||||
|
||||
tabContents = ReactTestUtils
|
||||
.scryRenderedComponentsWithType(composition, TabContent);
|
||||
|
||||
expect(tabContents.length).toEqual(2);
|
||||
|
||||
let tabOne = tabContents.find((tab) => (tab.props.children === 'tab1'));
|
||||
let tabTwo = tabContents.find((tab) => (tab.props.children === 'tab2'));
|
||||
|
||||
expect(tabOne.props.hidden).toEqual(false);
|
||||
expect(tabTwo.props.hidden).toEqual(true);
|
||||
|
||||
// after tab change
|
||||
composition.setState({ index: 1 });
|
||||
composition.forceUpdate();
|
||||
|
||||
tabContents = ReactTestUtils
|
||||
.scryRenderedComponentsWithType(composition, TabContent);
|
||||
|
||||
expect(tabContents.length).toEqual(2);
|
||||
|
||||
tabOne = tabContents.find((tab) => (tab.props.children === 'tab1'));
|
||||
tabTwo = tabContents.find((tab) => (tab.props.children === 'tab2'));
|
||||
|
||||
expect(tabOne.props.hidden).toEqual(true);
|
||||
expect(tabTwo.props.hidden).toEqual(false);
|
||||
});
|
||||
|
||||
describe('#render', function () {
|
||||
it('does not use fixed by default', function () {
|
||||
const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} />);
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
$tab-label-disabled-opacity: .2 !default;
|
||||
$tab-label-h-padding: 1.2 * $unit !default;
|
||||
$tab-label-height: 4.8 * $unit !default;
|
||||
$tab-icon-height: 2.4 * $unit !default;
|
||||
$tab-icon-margin-bottom: .8 * $unit !default;
|
||||
$tab-text-height: 1.4 * $unit !default;
|
||||
$tab-label-v-padding: ($tab-label-height - $tab-text-height) / 2 !default;
|
||||
$tab-navigation-border-color: $color-divider !default;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface TabsTheme {
|
||||
/**
|
||||
|
@ -23,11 +24,11 @@ export interface TabsTheme {
|
|||
tab?: string;
|
||||
}
|
||||
|
||||
interface TabsProps extends __ReactToolbox.Props {
|
||||
interface TabsProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Disable the animation below the active tab.
|
||||
* @default false
|
||||
|
@ -48,7 +49,7 @@ interface TabsProps extends __ReactToolbox.Props {
|
|||
theme?: TabsTheme;
|
||||
}
|
||||
|
||||
export class Tabs extends __React.Component<TabsProps, {}> { }
|
||||
export class Tabs extends React.Component<TabsProps, {}> { }
|
||||
|
||||
export interface TabTheme {
|
||||
/**
|
||||
|
@ -69,7 +70,7 @@ export interface TabTheme {
|
|||
label?: string;
|
||||
}
|
||||
|
||||
interface TabProps extends __ReactToolbox.Props {
|
||||
interface TabProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* If true, the current component is visible.
|
||||
*/
|
||||
|
@ -102,4 +103,4 @@ interface TabProps extends __ReactToolbox.Props {
|
|||
theme?: TabTheme;
|
||||
}
|
||||
|
||||
export class Tab extends __React.Component<TabProps, {}> { }
|
||||
export class Tab extends React.Component<TabProps, {}> { }
|
||||
|
|
|
@ -71,6 +71,7 @@ This component acts as the wrapper and the main controller of the content that i
|
|||
| `className` | `String` | `''` | Additional class name to provide custom styling.|
|
||||
| `disableAnimatedBottomBorder` | `Boolean` | `false` | Disable the animation below the active tab.|
|
||||
| `fixed` | `Boolean` | `false` | If True, the tabs will be 'fixed tabs'.|
|
||||
| `hideMode` | `enum`(`'display'`,`'unmounted'`) | `unmounted` | `unmounted` mode will not mount the tab content of inactive tabs. `display` mode will mount but hide inactive tabs. Consider holding state outside of the Tabs component before using `display` mode |
|
||||
| `index` | `Number` | `0` | Current <Tab> |
|
||||
| `inverse` | `Boolean` | `false` | If True, the tabs will have an inverse style.|
|
||||
| `onChange` | `Function` | | Callback function that is fired when the tab changes.|
|
||||
|
@ -100,10 +101,13 @@ Represent a single tab element and it should include some properties to describe
|
|||
| `className` | `String` | `''` | Additional class name to provide custom styling for each tab.|
|
||||
| `disabled` | `Boolean` | `false` | If true, the current component is not clickable.|
|
||||
| `hidden` | `Boolean` | `false` | If true, the current component is not visible.|
|
||||
| `label` | `String` | | Label text for navigation header. Required. |
|
||||
| `icon` | `String` | | Icon for navigation header. |
|
||||
| `label` | `String` | | Label text for navigation header. |
|
||||
| `onActive` | `Function` | | Callback function that is fired when the tab is activated. |
|
||||
| `onClick` | `Function` | | Callback function that is fired when the tab is clicked. |
|
||||
|
||||
It is required to provide either a label or an icon (or both).
|
||||
|
||||
### Theme
|
||||
|
||||
| Name | Description|
|
||||
|
|
|
@ -21,6 +21,7 @@
|
|||
font-weight: $font-weight-semi-bold;
|
||||
line-height: 1;
|
||||
color: $tab-text-inactive-color;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $animation-duration;
|
||||
|
@ -37,6 +38,24 @@
|
|||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.withIcon {
|
||||
padding-top: ($tab-label-v-padding - $tab-icon-margin-bottom / 2);
|
||||
padding-bottom: ($tab-label-v-padding - $tab-icon-margin-bottom / 2);
|
||||
}
|
||||
|
||||
&.withText {
|
||||
.icon {
|
||||
margin-bottom: $tab-icon-margin-bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
height: $tab-icon-height;
|
||||
margin: 0 auto;
|
||||
line-height: $tab-icon-height;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
|
@ -58,7 +77,7 @@
|
|||
display: none;
|
||||
}
|
||||
&.active {
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface TimePickerTheme {
|
||||
/**
|
||||
|
@ -103,7 +104,7 @@ interface TimePickerProps {
|
|||
/**
|
||||
* A key to identify an Icon from Material Design Icons or a custom Icon Element.
|
||||
*/
|
||||
icon?: __React.ReactNode | string;
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* This class will be applied to Input component of TimePicker.
|
||||
*/
|
||||
|
@ -131,6 +132,6 @@ interface TimePickerProps {
|
|||
value?: Date;
|
||||
}
|
||||
|
||||
export class TimePicker extends __React.Component<TimePickerProps, {}> { }
|
||||
export class TimePicker extends React.Component<TimePickerProps, {}> { }
|
||||
|
||||
export default TimePicker;
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import * as React from "react";
|
||||
export interface TooltipTheme {
|
||||
/**
|
||||
* Added to the tooltip element.
|
||||
|
@ -33,7 +34,7 @@ interface TooltipProps {
|
|||
tooltipHideOnClick?: boolean;
|
||||
}
|
||||
|
||||
declare class TooltipComponent<P, S> extends __React.Component<P, S> {
|
||||
declare class TooltipComponent<P, S> extends React.Component<P, S> {
|
||||
props: P & TooltipProps;
|
||||
}
|
||||
|
||||
|
@ -41,6 +42,6 @@ interface TooltippedComponentClass<P> extends TooltipProps {
|
|||
new (props?: P, context?: any): TooltipComponent<P, any>;
|
||||
}
|
||||
|
||||
export function Tooltip<P>(componentClass: __React.ComponentClass<P>): TooltippedComponentClass<P>;
|
||||
export function Tooltip<P>(componentClass: React.ComponentClass<P>): TooltippedComponentClass<P>;
|
||||
|
||||
export default Tooltip;
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
export function isComponentOfType (classType, reactElement) {
|
||||
return reactElement && reactElement.type === classType;
|
||||
}
|
|
@ -3,7 +3,7 @@
|
|||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.AppBar = undefined;
|
||||
exports.AppBar = exports.appBarFactory = undefined;
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
|
@ -17,45 +17,82 @@ var _reactCssThemr = require('react-css-themr');
|
|||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _FontIcon = require('../font_icon/FontIcon.js');
|
||||
|
||||
var _FontIcon2 = _interopRequireDefault(_FontIcon);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
var AppBar = function AppBar(_ref) {
|
||||
var factory = function factory(FontIcon) {
|
||||
var AppBar = function AppBar(_ref) {
|
||||
var _classnames;
|
||||
|
||||
var children = _ref.children;
|
||||
var leftIcon = _ref.leftIcon;
|
||||
var onLeftIconClick = _ref.onLeftIconClick;
|
||||
var onRightIconClick = _ref.onRightIconClick;
|
||||
var rightIcon = _ref.rightIcon;
|
||||
var theme = _ref.theme;
|
||||
var title = _ref.title;
|
||||
|
||||
var props = _objectWithoutProperties(_ref, ['theme']);
|
||||
var props = _objectWithoutProperties(_ref, ['children', 'leftIcon', 'onLeftIconClick', 'onRightIconClick', 'rightIcon', 'theme', 'title']);
|
||||
|
||||
var className = (0, _classnames3.default)(theme.appBar, (_classnames = {}, _defineProperty(_classnames, theme.fixed, props.fixed), _defineProperty(_classnames, theme.flat, props.flat), _classnames), props.className);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'header',
|
||||
{ className: className, 'data-react-toolbox': 'app-bar' },
|
||||
props.children
|
||||
leftIcon && _react2.default.createElement(FontIcon, {
|
||||
className: (0, _classnames3.default)(theme.leftIcon),
|
||||
onClick: onLeftIconClick,
|
||||
value: leftIcon }),
|
||||
title && _react2.default.createElement(
|
||||
'h1',
|
||||
{ className: (0, _classnames3.default)(theme.title) },
|
||||
title
|
||||
),
|
||||
children,
|
||||
rightIcon && _react2.default.createElement(FontIcon, {
|
||||
className: (0, _classnames3.default)(theme.rightIcon),
|
||||
onClick: onRightIconClick,
|
||||
value: rightIcon })
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
AppBar.propTypes = {
|
||||
AppBar.propTypes = {
|
||||
children: _react.PropTypes.node,
|
||||
className: _react.PropTypes.string,
|
||||
fixed: _react.PropTypes.bool,
|
||||
flat: _react.PropTypes.bool,
|
||||
leftIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
onLeftIconClick: _react.PropTypes.func,
|
||||
onRightIconClick: _react.PropTypes.func,
|
||||
rightIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
theme: _react.PropTypes.shape({
|
||||
appBar: _react.PropTypes.string,
|
||||
fixed: _react.PropTypes.string,
|
||||
flat: _react.PropTypes.string
|
||||
})
|
||||
};
|
||||
flat: _react.PropTypes.string,
|
||||
leftIcon: _react.PropTypes.string,
|
||||
rightIcon: _react.PropTypes.string,
|
||||
title: _react.PropTypes.string
|
||||
}),
|
||||
title: _react.PropTypes.string
|
||||
};
|
||||
|
||||
AppBar.defaultProps = {
|
||||
AppBar.defaultProps = {
|
||||
className: '',
|
||||
fixed: false,
|
||||
flat: false
|
||||
};
|
||||
|
||||
return AppBar;
|
||||
};
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.APP_BAR)(AppBar);
|
||||
var AppBar = factory(_FontIcon2.default);
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.APP_BAR, null)(AppBar);
|
||||
exports.appBarFactory = factory;
|
||||
exports.AppBar = AppBar;
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface AppBarTheme {
|
||||
/**
|
||||
|
@ -13,13 +14,25 @@ export interface AppBarTheme {
|
|||
* 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;
|
||||
}
|
||||
|
||||
interface AppBarProps extends __ReactToolbox.Props {
|
||||
interface AppBarProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Determine if the bar should have position fixed or relative.
|
||||
* @default false
|
||||
|
@ -30,12 +43,32 @@ interface AppBarProps extends __ReactToolbox.Props {
|
|||
* @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;
|
||||
/**
|
||||
* Called when the left icon is clicked
|
||||
*/
|
||||
onLeftIconClick?: Function;
|
||||
/**
|
||||
* If it exists it is used as the AppBar right icon
|
||||
*/
|
||||
rightIcon?: string;
|
||||
/**
|
||||
* Called when the righticon is clicked
|
||||
*/
|
||||
onRightIconClick?: Function;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: AppBarTheme;
|
||||
}
|
||||
|
||||
export class AppBar extends __React.Component<AppBarProps, {}> { }
|
||||
export class AppBar extends React.Component<AppBarProps, {}> { }
|
||||
|
||||
export default AppBar;
|
||||
|
|
|
@ -7,9 +7,13 @@ exports.AppBar = undefined;
|
|||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _AppBar = require('./AppBar.js');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
var _FontIcon = require('../font_icon/FontIcon.js');
|
||||
|
||||
var _FontIcon2 = _interopRequireDefault(_FontIcon);
|
||||
|
||||
var _theme = require('./theme.scss');
|
||||
|
||||
|
@ -17,7 +21,8 @@ var _theme2 = _interopRequireDefault(_theme);
|
|||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var ThemedAppBar = (0, _reactCssThemr.themr)(_identifiers.APP_BAR, _theme2.default)(_AppBar.AppBar);
|
||||
var AppBar = (0, _AppBar.appBarFactory)(_FontIcon2.default);
|
||||
var ThemedAppBar = (0, _reactCssThemr.themr)(_identifiers.APP_BAR, _theme2.default)(AppBar);
|
||||
|
||||
exports.default = ThemedAppBar;
|
||||
exports.AppBar = ThemedAppBar;
|
|
@ -35,4 +35,25 @@
|
|||
a {
|
||||
color: $appbar-contrast;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex-grow: 1;
|
||||
font-size: 1.8 * $unit;
|
||||
font-weight: bold;
|
||||
> small {
|
||||
font-size: 1.8 * $unit;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.leftIcon {
|
||||
padding: 1.2 * $unit 1.2 * $unit 1.2 * $unit 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.rightIcon {
|
||||
padding: 1.2 * $unit 0 1.2 * $unit 1.2 * $unit;
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -103,13 +103,10 @@ var factory = function factory(Chip, Input) {
|
|||
if (event.which === 13) {
|
||||
var target = _this.state.active;
|
||||
if (!target) {
|
||||
target = [].concat(_toConsumableArray(_this.suggestions().keys()))[0];
|
||||
if (!target && _this.props.allowCreate) {
|
||||
target = _this.state.query;
|
||||
}
|
||||
target = _this.props.allowCreate ? _this.state.query : [].concat(_toConsumableArray(_this.suggestions().keys()))[0];
|
||||
_this.setState({ active: target });
|
||||
}
|
||||
_this.select(target, event);
|
||||
_this.select(event, target);
|
||||
}
|
||||
|
||||
if (event.which === 27) _reactDom2.default.findDOMNode(_this).querySelector('input').blur();
|
||||
|
@ -123,10 +120,11 @@ var factory = function factory(Chip, Input) {
|
|||
}
|
||||
}, _this.handleSuggestionHover = function (event) {
|
||||
_this.setState({ active: event.target.id });
|
||||
}, _this.select = function (event) {
|
||||
}, _this.select = function (event, target) {
|
||||
_events2.default.pauseEvent(event);
|
||||
var values = _this.values(_this.props.value);
|
||||
_this.handleChange([event.target.id].concat(_toConsumableArray(values.keys())), event);
|
||||
var newValue = target === void 0 ? event.target.id : target;
|
||||
_this.handleChange([newValue].concat(_toConsumableArray(values.keys())), event);
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
|
@ -176,7 +174,8 @@ var factory = function factory(Chip, Input) {
|
|||
key: 'suggestions',
|
||||
value: function suggestions() {
|
||||
var suggest = new Map();
|
||||
var query = (this.state.query || (!this.props.multiple ? this.props.value : '')).toLowerCase().trim() || '';
|
||||
var rawQuery = this.state.query || (this.props.multiple ? '' : this.props.value);
|
||||
var query = (rawQuery || '').toLowerCase().trim();
|
||||
var values = this.values();
|
||||
var source = this.source();
|
||||
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface AutocompleteTheme {
|
||||
/**
|
||||
|
@ -43,7 +44,7 @@ export interface AutocompleteTheme {
|
|||
values?: string;
|
||||
}
|
||||
|
||||
interface AutocompleteProps extends __ReactToolbox.Props {
|
||||
interface AutocompleteProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Determines the opening direction. It can be auto, up or down.
|
||||
* @default auto
|
||||
|
@ -100,6 +101,6 @@ interface AutocompleteProps extends __ReactToolbox.Props {
|
|||
value?: any;
|
||||
}
|
||||
|
||||
export class Autocomplete extends __React.Component<AutocompleteProps, {}> { }
|
||||
export class Autocomplete extends React.Component<AutocompleteProps, {}> { }
|
||||
|
||||
export default Autocomplete;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface AvatarTheme {
|
||||
/**
|
||||
|
@ -15,11 +16,11 @@ export interface AvatarTheme {
|
|||
letter?: string;
|
||||
}
|
||||
|
||||
interface AvatarProps extends __ReactToolbox.Props {
|
||||
interface AvatarProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Set to true if your image is not squared so it will be used as a cover for the element.
|
||||
*/
|
||||
|
@ -27,11 +28,11 @@ interface AvatarProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* A key to identify an Icon from Material Design Icons or a custom Icon Element.
|
||||
*/
|
||||
icon?: __React.ReactNode | string;
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* An image source or an image element.
|
||||
*/
|
||||
image?: __React.ReactNode | string;
|
||||
image?: React.ReactNode | string;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
|
@ -42,6 +43,6 @@ interface AvatarProps extends __ReactToolbox.Props {
|
|||
title?: string;
|
||||
}
|
||||
|
||||
export class Avatar extends __React.Component<AvatarProps, {}> { }
|
||||
export class Avatar extends React.Component<AvatarProps, {}> { }
|
||||
|
||||
export default Avatar;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface ButtonTheme {
|
||||
/**
|
||||
|
@ -51,7 +52,7 @@ export interface ButtonTheme {
|
|||
toggle?: string;
|
||||
}
|
||||
|
||||
interface ButtonProps extends __ReactToolbox.Props {
|
||||
interface ButtonProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Indicates if the button should have accent color.
|
||||
* @default false
|
||||
|
@ -60,7 +61,7 @@ interface ButtonProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, component will be disabled.
|
||||
* @default false
|
||||
|
@ -83,7 +84,7 @@ interface ButtonProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Value of the icon (See Font Icon Component).
|
||||
*/
|
||||
icon?: __React.ReactNode | string;
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* If true, the neutral colors are inverted. Useful to put a button over a dark background.
|
||||
*/
|
||||
|
@ -123,7 +124,7 @@ interface ButtonProps extends __ReactToolbox.Props {
|
|||
theme?: ButtonTheme;
|
||||
}
|
||||
|
||||
export class Button extends __React.Component<ButtonProps, {}> { }
|
||||
export class Button extends React.Component<ButtonProps, {}> { }
|
||||
|
||||
export interface IconButtonTheme {
|
||||
/**
|
||||
|
@ -160,7 +161,7 @@ export interface IconButtonTheme {
|
|||
toggle?: string;
|
||||
}
|
||||
|
||||
interface IconButtonProps extends __ReactToolbox.Props {
|
||||
interface IconButtonProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Indicates if the button should have accent color.
|
||||
* @default false
|
||||
|
@ -169,7 +170,7 @@ interface IconButtonProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, component will be disabled.
|
||||
* @default false
|
||||
|
@ -182,7 +183,7 @@ interface IconButtonProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Value of the icon (See Font Icon Component).
|
||||
*/
|
||||
icon?: __React.ReactNode | string;
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* If true, the neutral colors are inverted. Useful to put a button over a dark background.
|
||||
*/
|
||||
|
@ -208,4 +209,4 @@ interface IconButtonProps extends __ReactToolbox.Props {
|
|||
theme?: IconButtonTheme;
|
||||
}
|
||||
|
||||
export class IconButton extends __React.Component<IconButtonProps, {}> { }
|
||||
export class IconButton extends React.Component<IconButtonProps, {}> { }
|
||||
|
|
|
@ -31,14 +31,14 @@
|
|||
> span:not([data-react-toolbox="tooltip"]) {
|
||||
display: inline-block;
|
||||
line-height: $button-height;
|
||||
vertical-align: middle;
|
||||
vertical-align: top;
|
||||
}
|
||||
> svg {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: $button-height;
|
||||
font-size: 120%;
|
||||
vertical-align: middle;
|
||||
vertical-align: top;
|
||||
fill: currentColor;
|
||||
}
|
||||
> * {
|
||||
|
@ -126,7 +126,7 @@
|
|||
> .icon, svg {
|
||||
font-size: $button-toggle-font-size;
|
||||
line-height: $button-height;
|
||||
vertical-align: middle;
|
||||
vertical-align: top;
|
||||
}
|
||||
> .rippleWrapper {
|
||||
border-radius: 50%;
|
||||
|
|
|
@ -1,15 +1,16 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface CardTheme {
|
||||
card?: string;
|
||||
raised?: string;
|
||||
}
|
||||
|
||||
interface CardProps extends __ReactToolbox.Props {
|
||||
interface CardProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
raised?: boolean;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
|
@ -17,24 +18,24 @@ interface CardProps extends __ReactToolbox.Props {
|
|||
theme?: CardTheme;
|
||||
}
|
||||
|
||||
export class Card extends __React.Component<CardProps, {}> { }
|
||||
export class Card extends React.Component<CardProps, {}> { }
|
||||
|
||||
export interface CardActionsTheme {
|
||||
cardActions?: string;
|
||||
}
|
||||
|
||||
interface CardActionsProps extends __ReactToolbox.Props {
|
||||
interface CardActionsProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: CardActionsTheme;
|
||||
}
|
||||
|
||||
export class CardActions extends __React.Component<CardActionsProps, {}> { }
|
||||
export class CardActions extends React.Component<CardActionsProps, {}> { }
|
||||
|
||||
export interface CardMediaTheme {
|
||||
cardMedia?: string;
|
||||
|
@ -44,39 +45,39 @@ export interface CardMediaTheme {
|
|||
wide?: string;
|
||||
}
|
||||
|
||||
interface CardMediaProps extends __ReactToolbox.Props {
|
||||
interface CardMediaProps extends ReactToolbox.Props {
|
||||
aspectRatio?: "wide" | "square";
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
color?: string;
|
||||
contentOverlay?: boolean;
|
||||
image?: __React.ReactNode | string;
|
||||
image?: React.ReactNode | string;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: CardMediaTheme;
|
||||
}
|
||||
|
||||
export class CardMedia extends __React.Component<CardMediaProps, {}> { }
|
||||
export class CardMedia extends React.Component<CardMediaProps, {}> { }
|
||||
|
||||
export interface CardTextTheme {
|
||||
cardText?: string;
|
||||
}
|
||||
|
||||
interface CardTextProps extends __ReactToolbox.Props {
|
||||
interface CardTextProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: CardTextTheme;
|
||||
}
|
||||
|
||||
export class CardText extends __React.Component<CardTextProps, {}> { }
|
||||
export class CardText extends React.Component<CardTextProps, {}> { }
|
||||
|
||||
export interface CardTitleTheme {
|
||||
large?: string;
|
||||
|
@ -85,18 +86,18 @@ export interface CardTitleTheme {
|
|||
subtitle?: string;
|
||||
}
|
||||
|
||||
interface CardTitleProps extends __ReactToolbox.Props {
|
||||
avatar?: __React.ReactNode | string;
|
||||
interface CardTitleProps extends ReactToolbox.Props {
|
||||
avatar?: React.ReactNode | string;
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
subtitle?: __React.ReactNode | string;
|
||||
children?: React.ReactNode;
|
||||
subtitle?: React.ReactNode | string;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: CardTitleTheme;
|
||||
title?: __React.ReactNode | string;
|
||||
title?: React.ReactNode | string;
|
||||
}
|
||||
|
||||
export class CardTitle extends __React.Component<CardTitleProps, {}> { }
|
||||
export class CardTitle extends React.Component<CardTitleProps, {}> { }
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface CheckboxTheme {
|
||||
/**
|
||||
|
@ -31,7 +32,7 @@ export interface CheckboxTheme {
|
|||
text?: string;
|
||||
}
|
||||
|
||||
interface CheckboxProps extends __ReactToolbox.Props {
|
||||
interface CheckboxProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Value for the checkbox, can be true or false.
|
||||
* @default false
|
||||
|
@ -45,7 +46,7 @@ interface CheckboxProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Text label to attach next to the checkbox element.
|
||||
*/
|
||||
label?: __React.ReactNode | string;
|
||||
label?: React.ReactNode | string;
|
||||
/**
|
||||
* The name of the field to set in the input checkbox.
|
||||
*/
|
||||
|
@ -64,6 +65,6 @@ interface CheckboxProps extends __ReactToolbox.Props {
|
|||
theme?: CheckboxTheme;
|
||||
}
|
||||
|
||||
export class Checkbox extends __React.Component<CheckboxProps, {}> { }
|
||||
export class Checkbox extends React.Component<CheckboxProps, {}> { }
|
||||
|
||||
export default Checkbox;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface ChipTheme {
|
||||
/**
|
||||
|
@ -27,11 +28,11 @@ export interface ChipTheme {
|
|||
deleteX?: string;
|
||||
}
|
||||
|
||||
interface ChipProps extends __ReactToolbox.Props {
|
||||
interface ChipProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, the chip will be rendered with a delete icon.
|
||||
* @default false
|
||||
|
@ -47,6 +48,6 @@ interface ChipProps extends __ReactToolbox.Props {
|
|||
theme?: ChipTheme;
|
||||
}
|
||||
|
||||
export class Chip extends __React.Component<ChipProps, {}> { }
|
||||
export class Chip extends React.Component<ChipProps, {}> { }
|
||||
|
||||
export default Chip;
|
||||
|
|
|
@ -58,12 +58,35 @@ var factory = function factory(IconButton) {
|
|||
}, _this.handleDayClick = function (day) {
|
||||
_this.props.onChange(_time2.default.setDay(_this.state.viewDate, day), true);
|
||||
}, _this.handleYearClick = function (event) {
|
||||
var year = parseInt(event.target.id);
|
||||
var year = parseInt(event.currentTarget.id);
|
||||
var viewDate = _time2.default.setYear(_this.props.selectedDate, year);
|
||||
_this.setState({ viewDate: viewDate });
|
||||
_this.props.onChange(viewDate, false);
|
||||
}, _this.handleKeys = function (e) {
|
||||
var selectedDate = _this.props.selectedDate;
|
||||
|
||||
|
||||
if (e.which === 37 || e.which === 38 || e.which === 39 || e.which === 40 || e.which === 13) e.preventDefault();
|
||||
|
||||
switch (e.which) {
|
||||
case 13:
|
||||
_this.props.handleSelect();break; // enter
|
||||
case 37:
|
||||
_this.handleDayArrowKey(_time2.default.addDays(selectedDate, -1));break; // left
|
||||
case 38:
|
||||
_this.handleDayArrowKey(_time2.default.addDays(selectedDate, -7));break; // up
|
||||
case 39:
|
||||
_this.handleDayArrowKey(_time2.default.addDays(selectedDate, 1));break; // right
|
||||
case 40:
|
||||
_this.handleDayArrowKey(_time2.default.addDays(selectedDate, 7));break; // down
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}, _this.handleDayArrowKey = function (date) {
|
||||
_this.setState({ viewDate: date });
|
||||
_this.props.onChange(date, false);
|
||||
}, _this.changeViewMonth = function (event) {
|
||||
var direction = event.target.id;
|
||||
var direction = event.currentTarget.id;
|
||||
_this.setState({
|
||||
direction: direction,
|
||||
viewDate: _time2.default.addMonths(_this.state.viewDate, DIRECTION_STEPS[direction])
|
||||
|
@ -72,12 +95,22 @@ var factory = function factory(IconButton) {
|
|||
}
|
||||
|
||||
_createClass(Calendar, [{
|
||||
key: 'componentWillMount',
|
||||
value: function componentWillMount() {
|
||||
document.body.addEventListener('keydown', this.handleKeys);
|
||||
}
|
||||
}, {
|
||||
key: 'componentDidUpdate',
|
||||
value: function componentDidUpdate() {
|
||||
if (this.refs.activeYear) {
|
||||
this.scrollToActive();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'componentWillUnmount',
|
||||
value: function componentWillUnmount() {
|
||||
document.body.removeEventListener('keydown', this.handleKeys);
|
||||
}
|
||||
}, {
|
||||
key: 'scrollToActive',
|
||||
value: function scrollToActive() {
|
||||
|
@ -147,6 +180,7 @@ var factory = function factory(IconButton) {
|
|||
|
||||
Calendar.propTypes = {
|
||||
display: _react.PropTypes.oneOf(['months', 'years']),
|
||||
handleSelect: _react.PropTypes.func,
|
||||
locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
|
||||
maxDate: _react.PropTypes.object,
|
||||
minDate: _react.PropTypes.object,
|
||||
|
|
|
@ -157,8 +157,8 @@ var factory = function factory(Input, DatePickerDialog) {
|
|||
minDate: minDate,
|
||||
name: this.props.name,
|
||||
onDismiss: this.handleDismiss,
|
||||
onEscKeyDown: onEscKeyDown,
|
||||
onOverlayClick: onOverlayClick,
|
||||
onEscKeyDown: onEscKeyDown || this.handleDismiss,
|
||||
onOverlayClick: onOverlayClick || this.handleDismiss,
|
||||
onSelect: this.handleSelect,
|
||||
sundayFirstDayOfWeek: sundayFirstDayOfWeek,
|
||||
theme: this.props.theme,
|
||||
|
|
|
@ -123,6 +123,7 @@ var factory = function factory(Dialog, Calendar) {
|
|||
{ className: theme.calendarWrapper },
|
||||
_react2.default.createElement(Calendar, {
|
||||
display: this.state.display,
|
||||
handleSelect: this.handleSelect,
|
||||
maxDate: this.props.maxDate,
|
||||
minDate: this.props.minDate,
|
||||
onChange: this.handleNewDate,
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface DatePickerTheme {
|
||||
/**
|
||||
|
@ -83,7 +84,7 @@ export interface DatePickerTheme {
|
|||
yearsDisplay?: string;
|
||||
}
|
||||
|
||||
interface DatePickerProps extends __ReactToolbox.Props {
|
||||
interface DatePickerProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Automatically selects a date upon clicking on a day
|
||||
* @default false
|
||||
|
@ -96,7 +97,7 @@ interface DatePickerProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* A key to identify an Icon from Material Design Icons or a custom Icon Element.
|
||||
*/
|
||||
icon?: __React.ReactNode | string;
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* This class will be applied to Input component of DatePicker.
|
||||
*/
|
||||
|
@ -143,6 +144,6 @@ interface DatePickerProps extends __ReactToolbox.Props {
|
|||
value?: Date | string;
|
||||
}
|
||||
|
||||
export class DatePicker extends __React.Component<DatePickerProps, {}> { }
|
||||
export class DatePicker extends React.Component<DatePickerProps, {}> { }
|
||||
|
||||
export default DatePicker;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface DialogTheme {
|
||||
/**
|
||||
|
@ -38,7 +39,7 @@ interface DialogActionProps {
|
|||
onClick?: Function;
|
||||
}
|
||||
|
||||
interface DialogProps extends __ReactToolbox.Props {
|
||||
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.
|
||||
*/
|
||||
|
@ -51,7 +52,7 @@ interface DialogProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Callback called when the ESC key is pressed with the overlay active.
|
||||
*/
|
||||
|
@ -87,6 +88,6 @@ interface DialogProps extends __ReactToolbox.Props {
|
|||
type?: string;
|
||||
}
|
||||
|
||||
export class Dialog extends __React.Component<DialogProps, {}> { }
|
||||
export class Dialog extends React.Component<DialogProps, {}> { }
|
||||
|
||||
export default Dialog;
|
||||
|
|
|
@ -47,6 +47,18 @@
|
|||
width: 96vw;
|
||||
}
|
||||
|
||||
.fullscreen {
|
||||
width: 96vw;
|
||||
|
||||
@media screen and (max-width: $layout-breakpoint-xs) {
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
min-height: 100vh;
|
||||
max-height: 100vh;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
@include typo-title();
|
||||
flex-grow: 0;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface DrawerTheme {
|
||||
/**
|
||||
|
@ -23,7 +24,7 @@ export interface DrawerTheme {
|
|||
right?: string;
|
||||
}
|
||||
|
||||
interface DrawerProps extends __ReactToolbox.Props {
|
||||
interface DrawerProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* If true, the drawer will be visible.
|
||||
* @default false
|
||||
|
@ -32,7 +33,7 @@ interface DrawerProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Callback function to be invoked when the overlay is clicked.
|
||||
*/
|
||||
|
@ -48,6 +49,6 @@ interface DrawerProps extends __ReactToolbox.Props {
|
|||
type?: "left" | "right";
|
||||
}
|
||||
|
||||
export class Drawer extends __React.Component<DrawerProps, {}> { }
|
||||
export class Drawer extends React.Component<DrawerProps, {}> { }
|
||||
|
||||
export default Drawer;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface DropdownTheme {
|
||||
/**
|
||||
|
@ -51,7 +52,7 @@ export interface DropdownTheme {
|
|||
values?: string;
|
||||
}
|
||||
|
||||
interface DropdownProps extends __ReactToolbox.Props {
|
||||
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
|
||||
|
@ -109,6 +110,6 @@ interface DropdownProps extends __ReactToolbox.Props {
|
|||
value?: string | number;
|
||||
}
|
||||
|
||||
export class Dropdown extends __React.Component<DropdownProps, {}> { }
|
||||
export class Dropdown extends React.Component<DropdownProps, {}> { }
|
||||
|
||||
export default Dropdown;
|
||||
|
|
|
@ -37,7 +37,7 @@
|
|||
}
|
||||
|
||||
.value {
|
||||
> .input {
|
||||
> input {
|
||||
cursor: pointer;
|
||||
}
|
||||
&:after {
|
||||
|
|
|
@ -1,16 +1,17 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
interface FontIconProps extends __ReactToolbox.Props {
|
||||
interface FontIconProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* The key string for the icon you want be displayed.
|
||||
*/
|
||||
value?: __React.ReactNode | string;
|
||||
value?: React.ReactNode | string;
|
||||
}
|
||||
|
||||
export class FontIcon extends __React.Component<FontIconProps, {}> { }
|
||||
export class FontIcon extends React.Component<FontIconProps, {}> { }
|
||||
|
||||
export default FontIcon;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface InputTheme {
|
||||
/**
|
||||
|
@ -51,11 +52,11 @@ export interface InputTheme {
|
|||
withIcon?: string;
|
||||
}
|
||||
|
||||
interface InputProps extends __ReactToolbox.Props {
|
||||
interface InputProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, component will be disabled.
|
||||
* @default false
|
||||
|
@ -77,7 +78,7 @@ interface InputProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Name of an icon to use as a label for the input.
|
||||
*/
|
||||
icon?: __React.ReactNode | string;
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* The text string to use for the floating label element.
|
||||
*/
|
||||
|
@ -130,6 +131,6 @@ interface InputProps extends __ReactToolbox.Props {
|
|||
value?: any;
|
||||
}
|
||||
|
||||
export class Input extends __React.Component<InputProps, {}> { }
|
||||
export class Input extends React.Component<InputProps, {}> { }
|
||||
|
||||
export default Input;
|
||||
|
|
|
@ -32,32 +32,8 @@ var Layout = function Layout(_ref) {
|
|||
);
|
||||
};
|
||||
|
||||
var ALLOWED_THEMED = ['Themed Panel', 'Themed NavDrawer|Themed Panel', 'Themed NavDrawer|Themed Panel|Themed Sidebar', 'Themed Panel|Themed Sidebar'];
|
||||
|
||||
function getChildName(child) {
|
||||
if (child.type) {
|
||||
return child.type.displayName || child.type.name || child.type;
|
||||
}
|
||||
if (!child.constructor || !child.constructor.name) {
|
||||
return 'UNKNOWN';
|
||||
}
|
||||
return child.constructor.name;
|
||||
}
|
||||
|
||||
Layout.propTypes = {
|
||||
children: function children(props, propName, componentName) {
|
||||
// Accept only [NavDrawer]Pane[Sidebar]
|
||||
var children = props[propName];
|
||||
if (_react2.default.Children.count(children) > 3) {
|
||||
return new Error('`' + componentName + '` ' + 'should have a Pane for a child, optionally preceded and/or followed by a Drawer.');
|
||||
}
|
||||
|
||||
var names = _react2.default.Children.map(children, getChildName).join('|');
|
||||
if (!~ALLOWED_THEMED.indexOf(names)) {
|
||||
return new Error('`' + componentName + '` ' + 'should have a Panel for a child, optionally preceded by a NavDrawer and/or followed by a Sidebar.');
|
||||
}
|
||||
},
|
||||
|
||||
children: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.element), _react.PropTypes.element]),
|
||||
className: _react.PropTypes.string,
|
||||
theme: _react.PropTypes.shape({
|
||||
layout: _react.PropTypes.string
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface LayoutTheme {
|
||||
/**
|
||||
|
@ -7,7 +8,7 @@ export interface LayoutTheme {
|
|||
layout?: string;
|
||||
}
|
||||
|
||||
interface LayoutProps extends __ReactToolbox.Props {
|
||||
interface LayoutProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
|
@ -18,7 +19,7 @@ interface LayoutProps extends __ReactToolbox.Props {
|
|||
theme?: LayoutTheme;
|
||||
}
|
||||
|
||||
export class Layout extends __React.Component<LayoutProps, {}> { }
|
||||
export class Layout extends React.Component<LayoutProps, {}> { }
|
||||
|
||||
export interface NavDrawerTheme {
|
||||
/**
|
||||
|
@ -75,7 +76,7 @@ export interface NavDrawerTheme {
|
|||
xxxlPermangent?: string;
|
||||
}
|
||||
|
||||
interface NavDrawerProps extends __ReactToolbox.Props {
|
||||
interface NavDrawerProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* If true, the drawer will be shown as an overlay.
|
||||
* @default false
|
||||
|
@ -84,7 +85,7 @@ interface NavDrawerProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Callback function to be invoked when the overlay is clicked.
|
||||
*/
|
||||
|
@ -114,7 +115,7 @@ interface NavDrawerProps extends __ReactToolbox.Props {
|
|||
width?: "normal" | "wide";
|
||||
}
|
||||
|
||||
export class NavDrawer extends __React.Component<NavDrawerProps, {}> { }
|
||||
export class NavDrawer extends React.Component<NavDrawerProps, {}> { }
|
||||
|
||||
export interface PanelTheme {
|
||||
/**
|
||||
|
@ -127,11 +128,11 @@ export interface PanelTheme {
|
|||
scrollY?: string;
|
||||
}
|
||||
|
||||
interface PanelProps extends __ReactToolbox.Props {
|
||||
interface PanelProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, the panel will vertically scroll all content.
|
||||
* @default false
|
||||
|
@ -143,7 +144,7 @@ interface PanelProps extends __ReactToolbox.Props {
|
|||
theme?: PanelTheme;
|
||||
}
|
||||
|
||||
export class Panel extends __React.Component<PanelProps, {}> { }
|
||||
export class Panel extends React.Component<PanelProps, {}> { }
|
||||
|
||||
export interface SidebarTheme {
|
||||
/**
|
||||
|
@ -164,11 +165,11 @@ export interface SidebarTheme {
|
|||
sidebarContent?: string;
|
||||
}
|
||||
|
||||
interface SidebarProps extends __ReactToolbox.Props {
|
||||
interface SidebarProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, the sidebar will be pinned open.
|
||||
* @default false
|
||||
|
@ -190,4 +191,4 @@ interface SidebarProps extends __ReactToolbox.Props {
|
|||
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<SidebarProps, {}> { }
|
||||
export class Sidebar extends React.Component<SidebarProps, {}> { }
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface LinkTheme {
|
||||
/**
|
||||
|
@ -15,7 +16,7 @@ export interface LinkTheme {
|
|||
link?: string;
|
||||
}
|
||||
|
||||
interface LinkProps extends __ReactToolbox.Props {
|
||||
interface LinkProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* If true, adds active style to link.
|
||||
* @default false
|
||||
|
@ -24,7 +25,7 @@ interface LinkProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Sets a count number.
|
||||
*/
|
||||
|
@ -36,7 +37,7 @@ interface LinkProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* An icon key string to include a FontIcon component in front of the text.
|
||||
*/
|
||||
icon?: __React.ReactNode | string;
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* The text string used for the text content of the link.
|
||||
*/
|
||||
|
@ -47,4 +48,4 @@ interface LinkProps extends __ReactToolbox.Props {
|
|||
theme?: LinkTheme;
|
||||
}
|
||||
|
||||
export class Link extends __React.Component<LinkProps, {}> { }
|
||||
export class Link extends React.Component<LinkProps, {}> { }
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface ListTheme {
|
||||
/**
|
||||
|
@ -7,11 +8,11 @@ export interface ListTheme {
|
|||
list?: string;
|
||||
}
|
||||
|
||||
interface ListProps extends __ReactToolbox.Props {
|
||||
interface ListProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, each element in the list will have a ripple effect on click
|
||||
* @default false
|
||||
|
@ -28,7 +29,7 @@ interface ListProps extends __ReactToolbox.Props {
|
|||
theme?: ListTheme;
|
||||
}
|
||||
|
||||
export class List extends __React.Component<ListProps, {}> { }
|
||||
export class List extends React.Component<ListProps, {}> { }
|
||||
|
||||
export interface ListCheckboxTheme {
|
||||
/**
|
||||
|
@ -65,7 +66,7 @@ export interface ListCheckboxTheme {
|
|||
primary?: string;
|
||||
}
|
||||
|
||||
interface ListCheckboxProps extends __ReactToolbox.Props {
|
||||
interface ListCheckboxProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Main text of the item. Required.
|
||||
*/
|
||||
|
@ -106,7 +107,7 @@ interface ListCheckboxProps extends __ReactToolbox.Props {
|
|||
theme?: ListCheckboxTheme;
|
||||
}
|
||||
|
||||
export class ListCheckbox extends __React.Component<ListCheckboxProps, {}> { }
|
||||
export class ListCheckbox extends React.Component<ListCheckboxProps, {}> { }
|
||||
|
||||
export interface ListDividerTheme {
|
||||
/**
|
||||
|
@ -119,7 +120,7 @@ export interface ListDividerTheme {
|
|||
inset?: string;
|
||||
}
|
||||
|
||||
interface ListDividerProps extends __ReactToolbox.Props {
|
||||
interface ListDividerProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* If true, will leave a space at the left side.
|
||||
*/
|
||||
|
@ -130,7 +131,7 @@ interface ListDividerProps extends __ReactToolbox.Props {
|
|||
theme?: ListDividerTheme;
|
||||
}
|
||||
|
||||
export class ListDivider extends __React.Component<ListDivider, {}> { }
|
||||
export class ListDivider extends React.Component<ListDivider, {}> { }
|
||||
|
||||
export interface ListItemTheme {
|
||||
/**
|
||||
|
@ -179,11 +180,11 @@ export interface ListItemTheme {
|
|||
selectable?: string;
|
||||
}
|
||||
|
||||
interface ListItemProps extends __ReactToolbox.Props {
|
||||
interface ListItemProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* A string URL to specify an avatar in the left side of the item.
|
||||
*/
|
||||
avatar?: __React.ReactNode | string;
|
||||
avatar?: React.ReactNode | string;
|
||||
/**
|
||||
* Main text of the item.
|
||||
*/
|
||||
|
@ -191,7 +192,7 @@ interface ListItemProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, the item is displayed as disabled and is not clickable.
|
||||
* @default false
|
||||
|
@ -200,15 +201,15 @@ interface ListItemProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* An element that will be displayed as the item. If set, this will override caption and legend.
|
||||
*/
|
||||
itemContent?: __React.ReactNode;
|
||||
itemContent?: React.ReactNode;
|
||||
/**
|
||||
* A list of elements that are placed on the left side of the item and after the avatar attribute.
|
||||
*/
|
||||
leftActions?: __React.ReactNode;
|
||||
leftActions?: React.ReactNode;
|
||||
/**
|
||||
* A string key of a font icon or element to display an icon in the left side of the item.
|
||||
*/
|
||||
leftIcon?: __React.ReactNode | string;
|
||||
leftIcon?: React.ReactNode | string;
|
||||
/**
|
||||
* Secondary text to display under the caption.
|
||||
*/
|
||||
|
@ -216,11 +217,11 @@ interface ListItemProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* A list of elements that are placed on the right side of the item and after the rightIcon attribute.
|
||||
*/
|
||||
rightActions?: __React.ReactNode;
|
||||
rightActions?: React.ReactNode;
|
||||
/**
|
||||
* The same as the leftIcon but in this case the icon is displayed in the right side.
|
||||
*/
|
||||
rightIcon?: __React.ReactNode | string;
|
||||
rightIcon?: React.ReactNode | string;
|
||||
/**
|
||||
* If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
|
||||
*/
|
||||
|
@ -241,7 +242,7 @@ interface ListItemProps extends __ReactToolbox.Props {
|
|||
to?: string;
|
||||
}
|
||||
|
||||
export class ListItem extends __React.Component<ListItemProps, {}> { }
|
||||
export class ListItem extends React.Component<ListItemProps, {}> { }
|
||||
|
||||
export interface ListSubHeaderTheme {
|
||||
/**
|
||||
|
@ -250,15 +251,15 @@ export interface ListSubHeaderTheme {
|
|||
subheader?: string;
|
||||
}
|
||||
|
||||
interface ListSubHeaderProps extends __ReactToolbox.Props {
|
||||
interface ListSubHeaderProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Text that will be displayed.
|
||||
*/
|
||||
caption?: boolean;
|
||||
caption?: string;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: ListSubHeaderTheme;
|
||||
}
|
||||
|
||||
export class ListSubHeader extends __React.Component<ListSubHeaderProps, {}> { }
|
||||
export class ListSubHeader extends React.Component<ListSubHeaderProps, {}> { }
|
||||
|
|
|
@ -84,7 +84,8 @@ var factory = function factory(IconButton, Menu) {
|
|||
position: this.props.position,
|
||||
ripple: this.props.menuRipple,
|
||||
selectable: this.props.selectable,
|
||||
selected: this.props.selected
|
||||
selected: this.props.selected,
|
||||
theme: this.props.theme
|
||||
},
|
||||
this.props.children
|
||||
)
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface MenuTheme {
|
||||
/**
|
||||
|
@ -43,7 +44,7 @@ export interface MenuTheme {
|
|||
topRight?: string;
|
||||
}
|
||||
|
||||
interface MenuProps extends __ReactToolbox.Props {
|
||||
interface MenuProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* If true, the menu will be displayed as opened by default.
|
||||
* @default false
|
||||
|
@ -52,7 +53,7 @@ interface MenuProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Callback that will be called when the menu is being hidden.
|
||||
*/
|
||||
|
@ -95,7 +96,7 @@ interface MenuProps extends __ReactToolbox.Props {
|
|||
theme?: MenuTheme;
|
||||
}
|
||||
|
||||
export class Menu extends __React.Component<MenuProps, {}> { }
|
||||
export class Menu extends React.Component<MenuProps, {}> { }
|
||||
|
||||
export interface IconMenuTheme {
|
||||
/**
|
||||
|
@ -108,16 +109,16 @@ export interface IconMenuTheme {
|
|||
iconMenu?: string;
|
||||
}
|
||||
|
||||
interface IconMenuProps extends __ReactToolbox.Props {
|
||||
interface IconMenuProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Icon font key string or Element to display the opener icon.
|
||||
* @default more_vert
|
||||
*/
|
||||
icon?: __React.ReactNode | string;
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* If true, the icon will show a ripple when is clicked.
|
||||
* @default true
|
||||
|
@ -160,7 +161,7 @@ interface IconMenuProps extends __ReactToolbox.Props {
|
|||
theme?: IconMenuTheme;
|
||||
}
|
||||
|
||||
export class IconMenu extends __React.Component<IconMenuProps, {}> { }
|
||||
export class IconMenu extends React.Component<IconMenuProps, {}> { }
|
||||
|
||||
export interface MenuDividerTheme {
|
||||
/**
|
||||
|
@ -169,14 +170,14 @@ export interface MenuDividerTheme {
|
|||
menuDivider?: string;
|
||||
}
|
||||
|
||||
interface MenuDividerProps extends __ReactToolbox.Props {
|
||||
interface MenuDividerProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: MenuDividerTheme;
|
||||
}
|
||||
|
||||
export class MenuDivider extends __React.Component<MenuDividerProps, {}> { }
|
||||
export class MenuDivider extends React.Component<MenuDividerProps, {}> { }
|
||||
|
||||
export interface MenuItemTheme {
|
||||
/**
|
||||
|
@ -205,7 +206,7 @@ export interface MenuItemTheme {
|
|||
shortcut?: string;
|
||||
}
|
||||
|
||||
interface MenuItemProps extends __ReactToolbox.Props {
|
||||
interface MenuItemProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* The text to include in the menu item. Required.
|
||||
*/
|
||||
|
@ -213,7 +214,7 @@ interface MenuItemProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, the item will be displayed as disabled and is not selectable.
|
||||
* @default false
|
||||
|
@ -222,7 +223,7 @@ interface MenuItemProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Icon font key string or Element to display in the right side of the option.
|
||||
*/
|
||||
icon?: __React.ReactNode | string;
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* Transferred from the Menu component for selectable menus. Indicates if it's the current active option.
|
||||
* @default false
|
||||
|
@ -238,4 +239,4 @@ interface MenuItemProps extends __ReactToolbox.Props {
|
|||
theme?: MenuItemTheme;
|
||||
}
|
||||
|
||||
export class MenuItem extends __React.Component<MenuItemProps, {}> { }
|
||||
export class MenuItem extends React.Component<MenuItemProps, {}> { }
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface NavigationTheme {
|
||||
/**
|
||||
|
@ -19,7 +20,7 @@ export interface NavigationTheme {
|
|||
vertical?: string;
|
||||
}
|
||||
|
||||
interface NavigationProps extends __ReactToolbox.Props {
|
||||
interface NavigationProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Array of objects that will be represented as <Button/> so the keys will be transferred as properties the Button Component.
|
||||
*/
|
||||
|
@ -27,7 +28,7 @@ interface NavigationProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Array of objects similar to actions but that will be rendered as <Link/> component definition.
|
||||
*/
|
||||
|
@ -43,4 +44,4 @@ interface NavigationProps extends __ReactToolbox.Props {
|
|||
type?: "vertical" | "horizontal";
|
||||
}
|
||||
|
||||
export class Navigation extends __React.Component<NavigationProps, {}> { }
|
||||
export class Navigation extends React.Component<NavigationProps, {}> { }
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface ProgressBarTheme {
|
||||
/**
|
||||
|
@ -35,7 +36,7 @@ export interface ProgressBarTheme {
|
|||
value?: string;
|
||||
}
|
||||
|
||||
interface ProgressBarProps extends __ReactToolbox.Props {
|
||||
interface ProgressBarProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Value of a secondary progress bar useful for buffering.
|
||||
* @default 0
|
||||
|
@ -77,6 +78,6 @@ interface ProgressBarProps extends __ReactToolbox.Props {
|
|||
value?: number;
|
||||
}
|
||||
|
||||
export class ProgressBar extends __React.Component<ProgressBarProps, {}> { }
|
||||
export class ProgressBar extends React.Component<ProgressBarProps, {}> { }
|
||||
|
||||
export default ProgressBar;
|
||||
|
|
|
@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|||
});
|
||||
exports.RadioGroup = exports.radioGroupFactory = undefined;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _react = require('react');
|
||||
|
@ -21,6 +19,8 @@ var _RadioButton = require('./RadioButton.js');
|
|||
|
||||
var _RadioButton2 = _interopRequireDefault(_RadioButton);
|
||||
|
||||
var _react3 = require('../utils/react.js');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
@ -54,15 +54,12 @@ var factory = function factory(RadioButton) {
|
|||
value: function renderRadioButtons() {
|
||||
var _this2 = this;
|
||||
|
||||
return _react2.default.Children.map(this.props.children, function (radio, idx) {
|
||||
return _react2.default.createElement(RadioButton, _extends({}, radio.props, {
|
||||
checked: radio.props.value === _this2.props.value,
|
||||
disabled: _this2.props.disabled || radio.props.disabled,
|
||||
key: idx,
|
||||
label: radio.props.label,
|
||||
onChange: _this2.handleChange.bind(_this2, radio.props.value),
|
||||
value: radio.props.value
|
||||
}));
|
||||
return _react2.default.Children.map(this.props.children, function (child) {
|
||||
return !(0, _react3.isComponentOfType)(RadioButton, child) ? child : _react2.default.cloneElement(child, {
|
||||
checked: child.props.value === _this2.props.value,
|
||||
disabled: _this2.props.disabled || child.props.disabled,
|
||||
onChange: _this2.handleChange.bind(_this2, child.props.value)
|
||||
});
|
||||
});
|
||||
}
|
||||
}, {
|
||||
|
|
|
@ -1,10 +1,11 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
interface RadioGroupProps extends __ReactToolbox.Props {
|
||||
interface RadioGroupProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, the group will be displayed as disabled.
|
||||
* @default false
|
||||
|
@ -24,7 +25,7 @@ interface RadioGroupProps extends __ReactToolbox.Props {
|
|||
value?: any;
|
||||
}
|
||||
|
||||
export class RadioGroup extends __React.Component<RadioGroupProps, {}> { }
|
||||
export class RadioGroup extends React.Component<RadioGroupProps, {}> { }
|
||||
|
||||
export interface RadioButtonTheme {
|
||||
/**
|
||||
|
@ -57,7 +58,7 @@ export interface RadioButtonTheme {
|
|||
text?: string;
|
||||
}
|
||||
|
||||
interface RadioButtonProps extends __ReactToolbox.Props {
|
||||
interface RadioButtonProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* If true, the input element will be selected by default. Transferred from the parent.
|
||||
* @default false
|
||||
|
@ -71,7 +72,7 @@ interface RadioButtonProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* Label for the radio button.
|
||||
*/
|
||||
label?: __React.ReactNode | string;
|
||||
label?: React.ReactNode | string;
|
||||
/**
|
||||
* Name for the input element.
|
||||
*/
|
||||
|
@ -98,4 +99,4 @@ interface RadioButtonProps extends __ReactToolbox.Props {
|
|||
value?: any;
|
||||
}
|
||||
|
||||
export class RadioButton extends __React.Component<RadioButtonProps, {}> { }
|
||||
export class RadioButton extends React.Component<RadioButtonProps, {}> { }
|
||||
|
|
|
@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|||
value: true
|
||||
});
|
||||
|
||||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
@ -22,9 +20,9 @@ var _classnames2 = require('classnames');
|
|||
|
||||
var _classnames3 = _interopRequireDefault(_classnames2);
|
||||
|
||||
var _reactAddonsUpdate = require('react-addons-update');
|
||||
var _immutabilityHelper = require('immutability-helper');
|
||||
|
||||
var _reactAddonsUpdate2 = _interopRequireDefault(_reactAddonsUpdate);
|
||||
var _immutabilityHelper2 = _interopRequireDefault(_immutabilityHelper);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
|
@ -38,6 +36,10 @@ var _prefixer = require('../utils/prefixer');
|
|||
|
||||
var _prefixer2 = _interopRequireDefault(_prefixer);
|
||||
|
||||
var _utils = require('../utils/utils');
|
||||
|
||||
var _utils2 = _interopRequireDefault(_utils);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
@ -146,10 +148,7 @@ var rippleFactory = function rippleFactory() {
|
|||
if (e.propertyName === 'opacity') {
|
||||
if (self.props.onRippleEnded) self.props.onRippleEnded(e);
|
||||
_events2.default.removeEventListenerOnTransitionEnded(self.refs[rippleKey], onOpacityEnd);
|
||||
self.setState({ ripples: (0, _reactAddonsUpdate2.default)(self.state.ripples, _defineProperty({}, rippleKey, { $apply: function $apply(ripplesState) {
|
||||
delete ripplesState[rippleKey];
|
||||
return ripplesState;
|
||||
} })) });
|
||||
self.setState({ ripples: _utils2.default.removeObjectKey(rippleKey, self.state.ripples) });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
@ -184,9 +183,9 @@ var rippleFactory = function rippleFactory() {
|
|||
var endRipple = _this3.addRippleDeactivateEventListener(isTouch, key);
|
||||
var initialState = { active: false, restarting: true, top: top, left: left, width: width, endRipple: endRipple };
|
||||
var runningState = { active: true, restarting: false };
|
||||
_this3.setState((0, _reactAddonsUpdate2.default)(_this3.state, { ripples: _defineProperty({}, key, { $set: initialState }) }), function () {
|
||||
_this3.setState((0, _immutabilityHelper2.default)(_this3.state, { ripples: _defineProperty({}, key, { $set: initialState }) }), function () {
|
||||
_this3.refs[key].offsetWidth; //eslint-disable-line no-unused-expressions
|
||||
_this3.setState((0, _reactAddonsUpdate2.default)(_this3.state, { ripples: _defineProperty({}, key, { $merge: runningState }) }));
|
||||
_this3.setState((0, _immutabilityHelper2.default)(_this3.state, { ripples: _defineProperty({}, key, { $merge: runningState }) }));
|
||||
});
|
||||
})();
|
||||
}
|
||||
|
@ -249,7 +248,7 @@ var rippleFactory = function rippleFactory() {
|
|||
key: 'getNextKey',
|
||||
value: function getNextKey() {
|
||||
this.currentCount = this.currentCount ? this.currentCount + 1 : 1;
|
||||
return this.currentCount.toString();
|
||||
return 'ripple' + this.currentCount;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -262,7 +261,7 @@ var rippleFactory = function rippleFactory() {
|
|||
}, {
|
||||
key: 'getLastKey',
|
||||
value: function getLastKey() {
|
||||
return this.currentCount.toString();
|
||||
return 'ripple' + this.currentCount;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -300,7 +299,7 @@ var rippleFactory = function rippleFactory() {
|
|||
var self = this;
|
||||
return function endRipple() {
|
||||
document.removeEventListener(eventType, endRipple);
|
||||
self.setState({ ripples: (0, _reactAddonsUpdate2.default)(self.state.ripples, _defineProperty({}, rippleKey, { $merge: { active: false } })) });
|
||||
self.setState({ ripples: (0, _immutabilityHelper2.default)(self.state.ripples, _defineProperty({}, rippleKey, { $merge: { active: false } })) });
|
||||
};
|
||||
}
|
||||
}, {
|
||||
|
@ -333,36 +332,27 @@ var rippleFactory = function rippleFactory() {
|
|||
value: function render() {
|
||||
var _this4 = this;
|
||||
|
||||
if (!this.props.ripple) {
|
||||
return _react2.default.createElement(ComposedComponent, this.props);
|
||||
} else {
|
||||
var _ret3 = function () {
|
||||
var ripples = _this4.state.ripples;
|
||||
var _props2 = _this4.props;
|
||||
var ripple = _props2.ripple;
|
||||
var ripples = this.state.ripples;
|
||||
var _props2 = this.props;
|
||||
var onRippleEnded = _props2.onRippleEnded;
|
||||
var rippleCentered = _props2.rippleCentered;
|
||||
var rippleMultiple = _props2.rippleMultiple;
|
||||
var rippleSpread = _props2.rippleSpread;
|
||||
var children = _props2.children;
|
||||
var className = _props2.rippleClassName;
|
||||
var ripple = _props2.ripple;
|
||||
var rippleClassName = _props2.rippleClassName;
|
||||
|
||||
var other = _objectWithoutProperties(_props2, ['ripple', 'onRippleEnded', 'rippleCentered', 'rippleMultiple', 'rippleSpread', 'children', 'rippleClassName']);
|
||||
var other = _objectWithoutProperties(_props2, ['onRippleEnded', 'rippleCentered', 'rippleMultiple', 'rippleSpread', 'children', 'ripple', 'rippleClassName']);
|
||||
|
||||
return {
|
||||
v: _react2.default.createElement(
|
||||
if (!ripple) return _react2.default.createElement(ComposedComponent, _extends({ children: children }, other));
|
||||
return _react2.default.createElement(
|
||||
ComposedComponent,
|
||||
_extends({}, other, { onMouseDown: _this4.handleMouseDown, onTouchStart: _this4.handleTouchStart }),
|
||||
children ? children : null,
|
||||
_extends({}, other, { onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }),
|
||||
children,
|
||||
Object.keys(ripples).map(function (key) {
|
||||
return _this4.renderRipple(key, className, ripples[key]);
|
||||
return _this4.renderRipple(key, rippleClassName, ripples[key]);
|
||||
})
|
||||
)
|
||||
};
|
||||
}();
|
||||
|
||||
if ((typeof _ret3 === 'undefined' ? 'undefined' : _typeof(_ret3)) === "object") return _ret3.v;
|
||||
}
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface RippleTheme {
|
||||
/**
|
||||
|
@ -23,7 +24,7 @@ interface RippleProps {
|
|||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: __React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* True in case you want a centered ripple.
|
||||
* @default false
|
||||
|
@ -44,6 +45,6 @@ interface RippleProps {
|
|||
theme?: RippleTheme;
|
||||
}
|
||||
|
||||
export class Ripple extends __React.Component<RippleProps, {}> { }
|
||||
export class Ripple extends React.Component<RippleProps, {}> { }
|
||||
|
||||
export default Ripple;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface SliderTheme {
|
||||
/**
|
||||
|
@ -55,7 +56,7 @@ export interface SliderTheme {
|
|||
snaps?: string;
|
||||
}
|
||||
|
||||
interface SliderProps extends __ReactToolbox.Props {
|
||||
interface SliderProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* If true, an input is shown and the user can set the slider from keyboard value.
|
||||
* @default false
|
||||
|
@ -101,6 +102,6 @@ interface SliderProps extends __ReactToolbox.Props {
|
|||
value?: number;
|
||||
}
|
||||
|
||||
export class Slider extends __React.Component<SliderProps, {}> { }
|
||||
export class Slider extends React.Component<SliderProps, {}> { }
|
||||
|
||||
export default Slider;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface SnackbarTheme {
|
||||
/**
|
||||
|
@ -35,7 +36,7 @@ export interface SnackbarTheme {
|
|||
warning?: string;
|
||||
}
|
||||
|
||||
interface SnackbarProps extends __ReactToolbox.Props {
|
||||
interface SnackbarProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Label for the action component inside the Snackbar.
|
||||
*/
|
||||
|
@ -48,7 +49,7 @@ interface SnackbarProps extends __ReactToolbox.Props {
|
|||
/**
|
||||
* String key for an icon or Element which will be displayed in left side of the snackbar.
|
||||
*/
|
||||
icon?: __React.ReactNode | string;
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* Text to display in the content. Required.
|
||||
*/
|
||||
|
@ -71,6 +72,6 @@ interface SnackbarProps extends __ReactToolbox.Props {
|
|||
type?: "accept" | "cancel" | "warning";
|
||||
}
|
||||
|
||||
export class Snackbar extends __React.Component<SnackbarProps, {}> { }
|
||||
export class Snackbar extends React.Component<SnackbarProps, {}> { }
|
||||
|
||||
export default Snackbar;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface SwitchTheme {
|
||||
/**
|
||||
|
@ -35,7 +36,7 @@ export interface SwitchTheme {
|
|||
thumb?: string;
|
||||
}
|
||||
|
||||
interface SwitchProps extends __ReactToolbox.Props {
|
||||
interface SwitchProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* If true, the switch will be enabled.
|
||||
* @default false
|
||||
|
@ -72,6 +73,6 @@ interface SwitchProps extends __ReactToolbox.Props {
|
|||
theme?: SwitchTheme;
|
||||
}
|
||||
|
||||
export class Switch extends __React.Component<SwitchProps, {}> { }
|
||||
export class Switch extends React.Component<SwitchProps, {}> { }
|
||||
|
||||
export default Switch;
|
||||
|
|
|
@ -33,6 +33,8 @@ var _TableRow2 = _interopRequireDefault(_TableRow);
|
|||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
@ -67,11 +69,11 @@ var factory = function factory(TableHead, TableRow) {
|
|||
}
|
||||
}, _this.handleRowSelect = function (index) {
|
||||
if (_this.props.onSelect) {
|
||||
var newSelection = [];
|
||||
var newSelection = [].concat(_toConsumableArray(_this.props.selected));
|
||||
if (_this.props.multiSelectable) {
|
||||
(function () {
|
||||
var position = _this.props.selected.indexOf(index);
|
||||
newSelection = _this.props.selected.indexOf(index) !== -1 ? _this.props.selected.filter(function (el, idx) {
|
||||
newSelection = position !== -1 ? newSelection.filter(function (el, idx) {
|
||||
return idx !== position;
|
||||
}) : newSelection.concat([index]);
|
||||
})();
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import __ReactToolbox from "../index.d.ts";
|
||||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface TableTheme {
|
||||
/**
|
||||
|
@ -23,7 +24,7 @@ export interface TableTheme {
|
|||
table?: string;
|
||||
}
|
||||
|
||||
interface TableProps extends __ReactToolbox.Props {
|
||||
interface TableProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* If true, component will show a heading using model field names.
|
||||
* @default true
|
||||
|
@ -65,6 +66,6 @@ interface TableProps extends __ReactToolbox.Props {
|
|||
theme?: TableTheme;
|
||||
}
|
||||
|
||||
export class Table extends __React.Component<TableProps, {}> { }
|
||||
export class Table extends React.Component<TableProps, {}> { }
|
||||
|
||||
export default Table;
|
||||
|
|
|
@ -8,10 +8,10 @@
|
|||
font-size: $font-size-tiny;
|
||||
color: $table-text-color;
|
||||
text-align: left;
|
||||
border-spacing: 0;
|
||||
tr {
|
||||
height: $table-row-height;
|
||||
line-height: $table-row-height;
|
||||
border-bottom: $table-row-divider;
|
||||
}
|
||||
th {
|
||||
font-weight: $font-weight-bold;
|
||||
|
@ -22,6 +22,7 @@
|
|||
th, td {
|
||||
position: relative;
|
||||
padding: 0 $table-row-offset;
|
||||
border-bottom: $table-row-divider;
|
||||
&.selectable {
|
||||
width: 1.8 * $unit;
|
||||
padding-right: 0;
|
||||
|
@ -35,8 +36,10 @@
|
|||
.row {
|
||||
transition: background-color $animation-duration $animation-curve-default;
|
||||
&:last-child {
|
||||
td {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
> td {
|
||||
> input {
|
||||
display: block;
|
||||
|
|
|
@ -17,6 +17,8 @@ var _classnames2 = require('classnames');
|
|||
|
||||
var _classnames3 = _interopRequireDefault(_classnames2);
|
||||
|
||||
var _font_icon = require('../font_icon');
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
@ -73,16 +75,19 @@ var Tab = function (_Component) {
|
|||
var className = _props.className;
|
||||
var disabled = _props.disabled;
|
||||
var hidden = _props.hidden;
|
||||
var label = _props.label;
|
||||
var icon = _props.icon;
|
||||
var theme = _props.theme;
|
||||
|
||||
var other = _objectWithoutProperties(_props, ['onActive', 'active', 'activeClassName', 'className', 'disabled', 'hidden', 'theme']);
|
||||
var other = _objectWithoutProperties(_props, ['onActive', 'active', 'activeClassName', 'className', 'disabled', 'hidden', 'label', 'icon', 'theme']);
|
||||
|
||||
var _className = (0, _classnames3.default)(theme.label, (_classnames = {}, _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.hidden, hidden), _defineProperty(_classnames, theme.disabled, disabled), _defineProperty(_classnames, activeClassName, active), _classnames), className);
|
||||
var _className = (0, _classnames3.default)(theme.label, (_classnames = {}, _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.hidden, hidden), _defineProperty(_classnames, theme.withText, label), _defineProperty(_classnames, theme.withIcon, icon), _defineProperty(_classnames, theme.disabled, disabled), _defineProperty(_classnames, activeClassName, active), _classnames), className);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'label',
|
||||
_extends({}, other, { 'data-react-toolbox': 'tab', className: _className, onClick: this.handleClick }),
|
||||
this.props.label
|
||||
icon && _react2.default.createElement(_font_icon.FontIcon, { className: theme.icon, value: icon }),
|
||||
label
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
@ -96,7 +101,8 @@ Tab.propTypes = {
|
|||
className: _react.PropTypes.string,
|
||||
disabled: _react.PropTypes.bool,
|
||||
hidden: _react.PropTypes.bool,
|
||||
label: _react.PropTypes.any.isRequired,
|
||||
icon: _react.PropTypes.node,
|
||||
label: _react.PropTypes.node,
|
||||
onActive: _react.PropTypes.func,
|
||||
onClick: _react.PropTypes.func,
|
||||
theme: _react.PropTypes.shape({
|
||||
|
|
|
@ -11,9 +11,9 @@ var _react = require('react');
|
|||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames = require('classnames');
|
||||
var _classnames2 = require('classnames');
|
||||
|
||||
var _classnames2 = _interopRequireDefault(_classnames);
|
||||
var _classnames3 = _interopRequireDefault(_classnames2);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
|
@ -29,6 +29,8 @@ var _TabContent2 = _interopRequireDefault(_TabContent);
|
|||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
@ -55,6 +57,17 @@ var factory = function factory(Tab, TabContent) {
|
|||
}, _this.handleHeaderClick = function (event) {
|
||||
var idx = parseInt(event.currentTarget.id);
|
||||
if (_this.props.onChange) _this.props.onChange(idx);
|
||||
}, _this.handleResize = function () {
|
||||
if (!_this.props.fixed) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (_this.resizeTimeout) {
|
||||
clearTimeout(_this.resizeTimeout);
|
||||
}
|
||||
_this.resizeTimeout = setTimeout(_this.handleResizeEnd, 50);
|
||||
}, _this.handleResizeEnd = function () {
|
||||
_this.updatePointer(_this.props.index);
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
|
@ -62,6 +75,8 @@ var factory = function factory(Tab, TabContent) {
|
|||
key: 'componentDidMount',
|
||||
value: function componentDidMount() {
|
||||
!this.props.disableAnimatedBottomBorder && this.updatePointer(this.props.index);
|
||||
window.addEventListener('resize', this.handleResize);
|
||||
this.handleResize();
|
||||
}
|
||||
}, {
|
||||
key: 'componentWillReceiveProps',
|
||||
|
@ -71,6 +86,8 @@ var factory = function factory(Tab, TabContent) {
|
|||
}, {
|
||||
key: 'componentWillUnmount',
|
||||
value: function componentWillUnmount() {
|
||||
window.removeEventListener('resize', this.handleResize);
|
||||
clearTimeout(this.resizeTimeout);
|
||||
clearTimeout(this.pointerTimeout);
|
||||
}
|
||||
}, {
|
||||
|
@ -121,8 +138,12 @@ var factory = function factory(Tab, TabContent) {
|
|||
return _react2.default.cloneElement(item, {
|
||||
id: idx,
|
||||
key: idx,
|
||||
theme: _this4.props.theme,
|
||||
active: _this4.props.index === idx,
|
||||
onClick: _this4.handleHeaderClick
|
||||
onClick: function onClick(event) {
|
||||
_this4.handleHeaderClick(event);
|
||||
item.props.onClick && item.props.onClick(event);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
@ -131,33 +152,44 @@ var factory = function factory(Tab, TabContent) {
|
|||
value: function renderContents(contents) {
|
||||
var _this5 = this;
|
||||
|
||||
var activeIdx = contents.findIndex(function (item, idx) {
|
||||
return _this5.props.index === idx;
|
||||
var contentElements = contents.map(function (item, idx) {
|
||||
return _react2.default.cloneElement(item, {
|
||||
key: idx,
|
||||
theme: _this5.props.theme,
|
||||
active: _this5.props.index === idx,
|
||||
hidden: _this5.props.index !== idx && _this5.props.hideMode === 'display',
|
||||
tabIndex: idx
|
||||
});
|
||||
});
|
||||
|
||||
if (contents && contents[activeIdx]) {
|
||||
return _react2.default.cloneElement(contents[activeIdx], {
|
||||
key: activeIdx,
|
||||
active: true,
|
||||
tabIndex: activeIdx
|
||||
});
|
||||
if (this.props.hideMode === 'display') {
|
||||
return contentElements;
|
||||
}
|
||||
|
||||
return contentElements.filter(function (item, idx) {
|
||||
return idx === _this5.props.index;
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _classnames;
|
||||
|
||||
var _props = this.props;
|
||||
var className = _props.className;
|
||||
var theme = _props.theme;
|
||||
var fixed = _props.fixed;
|
||||
var inverse = _props.inverse;
|
||||
|
||||
var _parseChildren = this.parseChildren();
|
||||
|
||||
var headers = _parseChildren.headers;
|
||||
var contents = _parseChildren.contents;
|
||||
|
||||
var classes = (0, _classnames3.default)(theme.tabs, className, (_classnames = {}, _defineProperty(_classnames, theme.fixed, fixed), _defineProperty(_classnames, theme.inverse, inverse), _classnames));
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ ref: 'tabs', 'data-react-toolbox': 'tabs', className: (0, _classnames2.default)(theme.tabs, className) },
|
||||
{ ref: 'tabs', 'data-react-toolbox': 'tabs', className: classes },
|
||||
_react2.default.createElement(
|
||||
'nav',
|
||||
{ className: theme.navigation, ref: 'navigation' },
|
||||
|
@ -176,16 +208,24 @@ var factory = function factory(Tab, TabContent) {
|
|||
children: _react.PropTypes.node,
|
||||
className: _react.PropTypes.string,
|
||||
disableAnimatedBottomBorder: _react.PropTypes.bool,
|
||||
fixed: _react.PropTypes.bool,
|
||||
hideMode: _react.PropTypes.oneOf(['display', 'unmounted']),
|
||||
index: _react.PropTypes.number,
|
||||
inverse: _react.PropTypes.bool,
|
||||
onChange: _react.PropTypes.func,
|
||||
theme: _react.PropTypes.shape({
|
||||
fixed: _react.PropTypes.string,
|
||||
inverse: _react.PropTypes.string,
|
||||
navigation: _react.PropTypes.string,
|
||||
pointer: _react.PropTypes.string,
|
||||
tabs: _react.PropTypes.string
|
||||
})
|
||||
};
|
||||
Tabs.defaultProps = {
|
||||
index: 0
|
||||
index: 0,
|
||||
fixed: false,
|
||||
inverse: false,
|
||||
hideMode: 'unmounted'
|
||||
};
|
||||
|
||||
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _expect = require('expect');
|
||||
|
@ -18,6 +20,10 @@ var _react = require('react');
|
|||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _reactDom = require('react-dom');
|
||||
|
||||
var _reactDom2 = _interopRequireDefault(_reactDom);
|
||||
|
||||
var _Tabs = require('../Tabs');
|
||||
|
||||
var _Tabs2 = _interopRequireDefault(_Tabs);
|
||||
|
@ -30,6 +36,10 @@ var _TabContent = require('../TabContent');
|
|||
|
||||
var _TabContent2 = _interopRequireDefault(_TabContent);
|
||||
|
||||
var _theme = require('../theme.scss');
|
||||
|
||||
var _theme2 = _interopRequireDefault(_theme);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
@ -38,11 +48,15 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
|
|||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var getRenderedClassName = function getRenderedClassName(tree, TargetComponent) {
|
||||
var rendered = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, TargetComponent);
|
||||
return _reactDom2.default.findDOMNode(rendered).getAttribute('class');
|
||||
};
|
||||
|
||||
describe('Tabs', function () {
|
||||
var tabContents = void 0,
|
||||
composition = void 0;
|
||||
|
||||
it('only renders the current tab', function () {
|
||||
var Composition = function (_Component) {
|
||||
_inherits(Composition, _Component);
|
||||
|
||||
|
@ -60,7 +74,7 @@ describe('Tabs', function () {
|
|||
value: function render() {
|
||||
return _react2.default.createElement(
|
||||
_Tabs2.default,
|
||||
{ index: this.state.index },
|
||||
_extends({ index: this.state.index }, this.props),
|
||||
_react2.default.createElement(
|
||||
_Tab2.default,
|
||||
{ label: 'tab1' },
|
||||
|
@ -78,9 +92,8 @@ describe('Tabs', function () {
|
|||
return Composition;
|
||||
}(_react.Component);
|
||||
|
||||
it('defaults to only rendering the current tab', function () {
|
||||
// initial render
|
||||
|
||||
|
||||
composition = _testing2.default.renderComponent(Composition);
|
||||
|
||||
tabContents = _reactAddonsTestUtils2.default.scryRenderedComponentsWithType(composition, _TabContent2.default);
|
||||
|
@ -97,4 +110,67 @@ describe('Tabs', function () {
|
|||
(0, _expect2.default)(tabContents.length).toEqual(1);
|
||||
(0, _expect2.default)(tabContents[0].props.tabIndex).toEqual(1);
|
||||
});
|
||||
|
||||
it('renders inactive tabs when hideMode is set to display', function () {
|
||||
// initial render
|
||||
composition = _testing2.default.renderComponent(Composition, { hideMode: 'display' });
|
||||
|
||||
tabContents = _reactAddonsTestUtils2.default.scryRenderedComponentsWithType(composition, _TabContent2.default);
|
||||
|
||||
(0, _expect2.default)(tabContents.length).toEqual(2);
|
||||
|
||||
var tabOne = tabContents.find(function (tab) {
|
||||
return tab.props.children === 'tab1';
|
||||
});
|
||||
var tabTwo = tabContents.find(function (tab) {
|
||||
return tab.props.children === 'tab2';
|
||||
});
|
||||
|
||||
(0, _expect2.default)(tabOne.props.hidden).toEqual(false);
|
||||
(0, _expect2.default)(tabTwo.props.hidden).toEqual(true);
|
||||
|
||||
// after tab change
|
||||
composition.setState({ index: 1 });
|
||||
composition.forceUpdate();
|
||||
|
||||
tabContents = _reactAddonsTestUtils2.default.scryRenderedComponentsWithType(composition, _TabContent2.default);
|
||||
|
||||
(0, _expect2.default)(tabContents.length).toEqual(2);
|
||||
|
||||
tabOne = tabContents.find(function (tab) {
|
||||
return tab.props.children === 'tab1';
|
||||
});
|
||||
tabTwo = tabContents.find(function (tab) {
|
||||
return tab.props.children === 'tab2';
|
||||
});
|
||||
|
||||
(0, _expect2.default)(tabOne.props.hidden).toEqual(true);
|
||||
(0, _expect2.default)(tabTwo.props.hidden).toEqual(false);
|
||||
});
|
||||
|
||||
describe('#render', function () {
|
||||
it('does not use fixed by default', function () {
|
||||
var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default }));
|
||||
var className = getRenderedClassName(tree, _Tabs.Tabs);
|
||||
(0, _expect2.default)(className).toNotContain(_theme2.default.fixed);
|
||||
});
|
||||
|
||||
it('uses fixed when set', function () {
|
||||
var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default, fixed: true }));
|
||||
var className = getRenderedClassName(tree, _Tabs.Tabs);
|
||||
(0, _expect2.default)(className).toContain(_theme2.default.fixed);
|
||||
});
|
||||
|
||||
it('does not use inverse by default', function () {
|
||||
var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default }));
|
||||
var className = getRenderedClassName(tree, _Tabs.Tabs);
|
||||
(0, _expect2.default)(className).toNotContain(_theme2.default.inverse);
|
||||
});
|
||||
|
||||
it('uses inverse when set', function () {
|
||||
var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default, inverse: true }));
|
||||
var className = getRenderedClassName(tree, _Tabs.Tabs);
|
||||
(0, _expect2.default)(className).toContain(_theme2.default.inverse);
|
||||
});
|
||||
});
|
||||
});
|
|
@ -1,6 +1,8 @@
|
|||
$tab-label-disabled-opacity: .2 !default;
|
||||
$tab-label-h-padding: 1.2 * $unit !default;
|
||||
$tab-label-height: 4.8 * $unit !default;
|
||||
$tab-icon-height: 2.4 * $unit !default;
|
||||
$tab-icon-margin-bottom: .8 * $unit !default;
|
||||
$tab-text-height: 1.4 * $unit !default;
|
||||
$tab-label-v-padding: ($tab-label-height - $tab-text-height) / 2 !default;
|
||||
$tab-navigation-border-color: $color-divider !default;
|
||||
|
@ -9,3 +11,10 @@ $tab-pointer-height: .2 * $unit !default;
|
|||
$tab-text: $color-black !default;
|
||||
$tab-text-color: $tab-text !default;
|
||||
$tab-text-inactive-color: rgba($tab-text, .7) !default;
|
||||
|
||||
// Inverse
|
||||
$tab-inverse-bar-color: $color-primary !default;
|
||||
$tab-inverse-pointer-color: $color-accent !default;
|
||||
$tab-inverse-text: $color-primary-contrast !default;
|
||||
$tab-inverse-text-color: $tab-inverse-text !default;
|
||||
$tab-inverse-text-inactive-color: rgba($tab-inverse-text, .7) !default;
|
||||
|
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue