vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Merge remote-tracking branch 'react-toolbox/dev' into dev

old
Antony Lau 2016-09-07 16:54:33 +08:00
parent f7604477a0 4d0b37e207
commit 2e543ed8a0
114 changed files with 1281 additions and 689 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.bumpedrc
View File

@ -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'

90
components/app_bar/AppBar.js
View File

@ -2,37 +2,69 @@ 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 className = classnames(theme.appBar, {
[theme.fixed]: props.fixed,
[theme.flat]: props.flat
}, props.className);
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
}, props.className);
return (
<header className={className} data-react-toolbox='app-bar'>
{props.children}
</header>
);
return (
<header className={className} data-react-toolbox='app-bar'>
{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 = {
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,
leftIcon: PropTypes.string,
rightIcon: PropTypes.string,
title: PropTypes.string
}),
title: PropTypes.string
};
AppBar.defaultProps = {
className: '',
fixed: false,
flat: false
};
return AppBar;
};
AppBar.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
fixed: PropTypes.bool,
flat: PropTypes.bool,
theme: PropTypes.shape({
appBar: PropTypes.string,
fixed: PropTypes.string,
flat: PropTypes.string
})
};
AppBar.defaultProps = {
className: '',
fixed: false,
flat: false
};
export default themr(APP_BAR)(AppBar);
const AppBar = factory(InjectedFontIcon);
export default themr(APP_BAR, null)(AppBar);
export { factory as appBarFactory };
export { AppBar };

41
components/app_bar/index.d.ts vendored
View File

@ -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;

4
components/app_bar/index.js
View File

@ -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;

27
components/app_bar/readme.md
View File

@ -15,19 +15,28 @@ 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|
|:-----|:-----|:-----|:-----|
| `className` | `String` | `''` | Set a class for the root component.|
| `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.|
| `className` | `String` | `''` | Set a class for the root component.|
| `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.|
| Name | Description|
|:------------|:-----------|
| `appBar` | Used for the component root element.|
| `fixed` | Added to the root element when the app bar is fixed.|
| `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.|

21
components/app_bar/theme.scss
View File

@ -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;
}
}

9
components/autocomplete/Autocomplete.js
View File

@ -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();

7
components/autocomplete/index.d.ts vendored
View File

@ -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;

2
components/autocomplete/readme.md
View File

@ -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.|

13
components/avatar/index.d.ts vendored
View File

@ -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;

19
components/button/index.d.ts vendored
View File

@ -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, {}> { }

41
components/card/index.d.ts vendored
View File

@ -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, {}> { }

9
components/checkbox/index.d.ts vendored
View File

@ -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;

9
components/chip/index.d.ts vendored
View File

@ -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;

33
components/date_picker/Calendar.js
View File

@ -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])

4
components/date_picker/DatePicker.js
View File

@ -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}

1
components/date_picker/DatePickerDialog.js
View File

@ -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}

2
components/date_picker/_config.scss
View File

@ -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;

9
components/date_picker/index.d.ts vendored
View File

@ -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
components/date_picker/theme.scss
View File

@ -101,6 +101,7 @@
cursor: pointer;
&.active {
font-size: $calendar-year-font-size;
font-weight: $font-weight-semi-bold;
color: $calendar-primary-color;
}
}

9
components/dialog/index.d.ts vendored
View File

@ -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;

5
components/dialog/readme.md
View File

@ -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

12
components/dialog/theme.scss
View File

@ -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;

9
components/drawer/index.d.ts vendored
View File

@ -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;

7
components/dropdown/index.d.ts vendored
View File

@ -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;

2
components/dropdown/theme.scss
View File

@ -37,7 +37,7 @@
}
.value {
> .input {
> input {
cursor: pointer;
}
&:after {

11
components/font_icon/index.d.ts vendored
View File

@ -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;

11
components/input/index.d.ts vendored
View File

@ -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;

39
components/layout/Layout.js
View File

@ -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

25
components/layout/index.d.ts vendored
View File

@ -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, {}> { }

11
components/link/index.d.ts vendored
View File

@ -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, {}> { }

41
components/list/index.d.ts vendored
View File

@ -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, {}> { }

29
components/menu/index.d.ts vendored
View File

@ -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, {}> { }

9
components/navigation/index.d.ts vendored
View File

@ -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, {}> { }

7
components/progress_bar/index.d.ts vendored
View File

@ -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;

23
components/radio/RadioGroup.js
View File

@ -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 () {

15
components/radio/index.d.ts vendored
View File

@ -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, {}> { }

26
components/ripple/Ripple.js
View File

@ -240,21 +240,17 @@ 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;
return (
<ComposedComponent {...other} onMouseDown={this.handleMouseDown} onTouchStart={this.handleTouchStart}>
{children ? children : null}
{Object.keys(ripples).map(key => this.renderRipple(key, className, ripples[key]))}
</ComposedComponent>
);
}
const { ripples } = this.state;
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}
{Object.keys(ripples).map(key => this.renderRipple(key, rippleClassName, ripples[key]))}
</ComposedComponent>
);
}
}

7
components/ripple/index.d.ts vendored
View File

@ -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;

7
components/slider/index.d.ts vendored
View File

@ -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;

9
components/snackbar/index.d.ts vendored
View File

@ -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;

7
components/switch/index.d.ts vendored
View File

@ -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;

6
components/table/Table.js
View File

@ -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];

7
components/table/index.d.ts vendored
View File

@ -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;

7
components/table/theme.scss
View File

@ -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,7 +36,9 @@
.row {
transition: background-color $animation-duration $animation-curve-default;
&:last-child {
border-color: transparent;
td {
border-color: transparent;
}
}
> td {
> input {

11
components/tabs/Tab.js
View File

@ -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>
);
}

25
components/tabs/Tabs.js
View File

@ -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 () {

61
components/tabs/__tests__/index.spec.js
View File

@ -18,23 +18,23 @@ const getRenderedClassName = (tree, TargetComponent) => {
describe('Tabs', function () {
let tabContents, composition;
it('only renders the current tab', function () {
class Composition extends Component {
constructor () {
super();
this.state = { index: 0 };
}
render () {
return (
<Tabs index={this.state.index}>
<Tab label="tab1">tab1</Tab>
<Tab label="tab2">tab2</Tab>
</Tabs>
);
}
class Composition extends Component {
constructor () {
super();
this.state = { index: 0 };
}
render () {
return (
<Tabs index={this.state.index} {...this.props}>
<Tab label="tab1">tab1</Tab>
<Tab label="tab2">tab2</Tab>
</Tabs>
);
}
}
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} />);

2
components/tabs/_config.scss
View File

@ -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;

13
components/tabs/index.d.ts vendored
View File

@ -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, {}> { }

6
components/tabs/readme.md
View File

@ -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
components/tabs/theme.scss
View File

@ -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;
}
}

7
components/time_picker/index.d.ts vendored
View File

@ -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;

5
components/tooltip/index.d.ts vendored
View File

@ -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;

3
components/utils/react.js vendored Normal file
View File

@ -0,0 +1,3 @@
export function isComponentOfType (classType, reactElement) {
return reactElement && reactElement.type === classType;
}

97
lib/app_bar/AppBar.js
View File

@ -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 _classnames;
var factory = function factory(FontIcon) {
var AppBar = function AppBar(_ref) {
var _classnames;
var theme = _ref.theme;
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);
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
);
return _react2.default.createElement(
'header',
{ className: className, 'data-react-toolbox': 'app-bar' },
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 = {
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,
leftIcon: _react.PropTypes.string,
rightIcon: _react.PropTypes.string,
title: _react.PropTypes.string
}),
title: _react.PropTypes.string
};
AppBar.defaultProps = {
className: '',
fixed: false,
flat: false
};
return AppBar;
};
AppBar.propTypes = {
children: _react.PropTypes.node,
className: _react.PropTypes.string,
fixed: _react.PropTypes.bool,
flat: _react.PropTypes.bool,
theme: _react.PropTypes.shape({
appBar: _react.PropTypes.string,
fixed: _react.PropTypes.string,
flat: _react.PropTypes.string
})
};
AppBar.defaultProps = {
className: '',
fixed: false,
flat: false
};
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;

41
lib/app_bar/index.d.ts vendored
View File

@ -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;

9
lib/app_bar/index.js
View File

@ -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;

21
lib/app_bar/theme.scss
View File

@ -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;
}
}

15
lib/autocomplete/Autocomplete.js
View File

@ -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();

7
lib/autocomplete/index.d.ts vendored
View File

@ -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;

13
lib/avatar/index.d.ts vendored
View File

@ -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;

19
lib/button/index.d.ts vendored
View File

@ -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, {}> { }

6
lib/button/theme.scss
View File

@ -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%;

41
lib/card/index.d.ts vendored
View File

@ -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, {}> { }

9
lib/checkbox/index.d.ts vendored
View File

@ -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;

9
lib/chip/index.d.ts vendored
View File

@ -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;

38
lib/date_picker/Calendar.js
View File

@ -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,

4
lib/date_picker/DatePicker.js
View File

@ -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,

1
lib/date_picker/DatePickerDialog.js
View File

@ -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,

9
lib/date_picker/index.d.ts vendored
View File

@ -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;

9
lib/dialog/index.d.ts vendored
View File

@ -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;

12
lib/dialog/theme.scss
View File

@ -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;

9
lib/drawer/index.d.ts vendored
View File

@ -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;

7
lib/dropdown/index.d.ts vendored
View File

@ -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;

2
lib/dropdown/theme.scss
View File

@ -37,7 +37,7 @@
}
.value {
> .input {
> input {
cursor: pointer;
}
&:after {

11
lib/font_icon/index.d.ts vendored
View File

@ -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;

11
lib/input/index.d.ts vendored
View File

@ -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;

26
lib/layout/Layout.js
View File

@ -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

25
lib/layout/index.d.ts vendored
View File

@ -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, {}> { }

11
lib/link/index.d.ts vendored
View File

@ -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, {}> { }

41
lib/list/index.d.ts vendored
View File

@ -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, {}> { }

3
lib/menu/IconMenu.js
View File

@ -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
)

29
lib/menu/index.d.ts vendored
View File

@ -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, {}> { }

9
lib/navigation/index.d.ts vendored
View File

@ -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, {}> { }

7
lib/progress_bar/index.d.ts vendored
View File

@ -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;

19
lib/radio/RadioGroup.js
View File

@ -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)
});
});
}
}, {

15
lib/radio/index.d.ts vendored
View File

@ -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, {}> { }

72
lib/ripple/Ripple.js
View File

@ -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 onRippleEnded = _props2.onRippleEnded;
var rippleCentered = _props2.rippleCentered;
var rippleMultiple = _props2.rippleMultiple;
var rippleSpread = _props2.rippleSpread;
var children = _props2.children;
var className = _props2.rippleClassName;
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 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(
ComposedComponent,
_extends({}, other, { onMouseDown: _this4.handleMouseDown, onTouchStart: _this4.handleTouchStart }),
children ? children : null,
Object.keys(ripples).map(function (key) {
return _this4.renderRipple(key, className, ripples[key]);
})
)
};
}();
if ((typeof _ret3 === 'undefined' ? 'undefined' : _typeof(_ret3)) === "object") return _ret3.v;
}
if (!ripple) return _react2.default.createElement(ComposedComponent, _extends({ children: children }, other));
return _react2.default.createElement(
ComposedComponent,
_extends({}, other, { onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }),
children,
Object.keys(ripples).map(function (key) {
return _this4.renderRipple(key, rippleClassName, ripples[key]);
})
);
}
}]);

7
lib/ripple/index.d.ts vendored
View File

@ -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;

7
lib/slider/index.d.ts vendored
View File

@ -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;

9
lib/snackbar/index.d.ts vendored
View File

@ -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;

7
lib/switch/index.d.ts vendored
View File

@ -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;

6
lib/table/Table.js
View File

@ -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]);
})();

7
lib/table/index.d.ts vendored
View File

@ -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;

7
lib/table/theme.scss
View File

@ -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,7 +36,9 @@
.row {
transition: background-color $animation-duration $animation-curve-default;
&:last-child {
border-color: transparent;
td {
border-color: transparent;
}
}
> td {
> input {

14
lib/tabs/Tab.js
View File

@ -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({

66
lib/tabs/Tabs.js
View File

@ -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'
};

140
lib/tabs/__tests__/index.spec.js
View File

@ -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,49 +48,52 @@ 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);
var Composition = function (_Component) {
_inherits(Composition, _Component);
function Composition() {
_classCallCheck(this, Composition);
function Composition() {
_classCallCheck(this, Composition);
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Composition).call(this));
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Composition).call(this));
_this.state = { index: 0 };
return _this;
_this.state = { index: 0 };
return _this;
}
_createClass(Composition, [{
key: 'render',
value: function render() {
return _react2.default.createElement(
_Tabs2.default,
_extends({ index: this.state.index }, this.props),
_react2.default.createElement(
_Tab2.default,
{ label: 'tab1' },
'tab1'
),
_react2.default.createElement(
_Tab2.default,
{ label: 'tab2' },
'tab2'
)
);
}
}]);
_createClass(Composition, [{
key: 'render',
value: function render() {
return _react2.default.createElement(
_Tabs2.default,
{ index: this.state.index },
_react2.default.createElement(
_Tab2.default,
{ label: 'tab1' },
'tab1'
),
_react2.default.createElement(
_Tab2.default,
{ label: 'tab2' },
'tab2'
)
);
}
}]);
return Composition;
}(_react.Component);
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);
});
});
});

9
lib/tabs/_config.scss
View File

@ -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