{children}
- {cover && typeof image === 'string' && }
+ {cover && typeof image === 'string' && }
{!cover && (typeof image === 'string' ? 
: image)}
{typeof icon === 'string' ? : null,
- {label},
- ,
- children
+ return React.createElement(element, props,
+ icon ? : null,
+ icon ?
+
{children}
);
};
Card.propTypes = {
- children: PropTypes.any,
+ children: PropTypes.node,
className: PropTypes.string,
raised: PropTypes.bool,
theme: PropTypes.shape({
card: PropTypes.string,
- raised: PropTypes.string
- })
+ raised: PropTypes.string,
+ }),
};
export default themr(CARD)(Card);
diff --git a/components/card/CardActions.js b/components/card/CardActions.js
index 951355dd..e11ae865 100644
--- a/components/card/CardActions.js
+++ b/components/card/CardActions.js
@@ -1,7 +1,7 @@
import React, { PropTypes } from 'react';
import { themr } from 'react-css-themr';
import classnames from 'classnames';
-import { CARD } from '../identifiers.js';
+import { CARD } from '../identifiers';
const CardActions = ({ children, className, theme, ...other }) => (
@@ -10,11 +10,11 @@ const CardActions = ({ children, className, theme, ...other }) => (
);
CardActions.propTypes = {
- children: PropTypes.any,
+ children: PropTypes.node,
className: PropTypes.string,
theme: PropTypes.shape({
- cardActions: PropTypes.string
- })
+ cardActions: PropTypes.string,
+ }),
};
export default themr(CARD)(CardActions);
diff --git a/components/card/CardMedia.js b/components/card/CardMedia.js
index 7d2ecd86..cf32853e 100644
--- a/components/card/CardMedia.js
+++ b/components/card/CardMedia.js
@@ -1,20 +1,29 @@
import React, { PropTypes } from 'react';
import { themr } from 'react-css-themr';
import classnames from 'classnames';
-import { CARD } from '../identifiers.js';
+import { CARD } from '../identifiers';
-const CardMedia = ({ aspectRatio, children, className, color, contentOverlay, image, theme, ...other }) => {
+const CardMedia = ({
+ aspectRatio,
+ children,
+ className,
+ color,
+ contentOverlay,
+ image,
+ theme,
+ ...other
+}) => {
const classes = classnames(theme.cardMedia, {
- [theme[aspectRatio]]: aspectRatio
+ [theme[aspectRatio]]: aspectRatio,
}, className);
const innerClasses = classnames(theme.content, {
- [theme.contentOverlay]: contentOverlay
+ [theme.contentOverlay]: contentOverlay,
});
const bgStyle = {
- backgroundColor: color ? color : undefined,
- backgroundImage: typeof image === 'string' ? `url('${image}')` : undefined
+ backgroundColor: color || undefined,
+ backgroundImage: typeof image === 'string' ? `url('${image}')` : undefined,
};
return (
@@ -27,22 +36,22 @@ const CardMedia = ({ aspectRatio, children, className, color, contentOverlay, im
};
CardMedia.propTypes = {
- aspectRatio: PropTypes.oneOf([ 'wide', 'square' ]),
- children: PropTypes.any,
+ aspectRatio: PropTypes.oneOf(['wide', 'square']),
+ children: PropTypes.node,
className: PropTypes.string,
color: PropTypes.string,
contentOverlay: PropTypes.bool,
image: PropTypes.oneOfType([
PropTypes.string,
- PropTypes.element
+ PropTypes.element,
]),
theme: PropTypes.shape({
cardMedia: PropTypes.string,
content: PropTypes.string,
contentOverlay: PropTypes.string,
square: PropTypes.string,
- wide: PropTypes.string
- })
+ wide: PropTypes.string,
+ }),
};
export default themr(CARD)(CardMedia);
diff --git a/components/card/CardText.js b/components/card/CardText.js
index 8a5df131..a9caf059 100644
--- a/components/card/CardText.js
+++ b/components/card/CardText.js
@@ -1,7 +1,7 @@
import React, { PropTypes } from 'react';
import { themr } from 'react-css-themr';
import classnames from 'classnames';
-import { CARD } from '../identifiers.js';
+import { CARD } from '../identifiers';
const CardText = ({ children, className, theme, ...other }) => (
@@ -10,11 +10,11 @@ const CardText = ({ children, className, theme, ...other }) => (
);
CardText.propTypes = {
- children: PropTypes.any,
+ children: PropTypes.node,
className: PropTypes.string,
theme: PropTypes.shape({
- cardText: PropTypes.string
- })
+ cardText: PropTypes.string,
+ }),
};
export default themr(CARD)(CardText);
diff --git a/components/card/CardTitle.js b/components/card/CardTitle.js
index 87cd358e..92dce98d 100644
--- a/components/card/CardTitle.js
+++ b/components/card/CardTitle.js
@@ -1,14 +1,14 @@
import React, { PropTypes } from 'react';
import classnames from 'classnames';
import { themr } from 'react-css-themr';
-import { CARD } from '../identifiers.js';
-import InjectAvatar from '../avatar/Avatar.js';
+import { CARD } from '../identifiers';
+import InjectAvatar from '../avatar/Avatar';
const factory = (Avatar) => {
- const CardTitle = ({avatar, children, className, subtitle, theme, title, ...other}) => {
+ const CardTitle = ({ avatar, children, className, subtitle, theme, title, ...other }) => {
const classes = classnames(theme.cardTitle, {
[theme.small]: avatar,
- [theme.large]: !avatar
+ [theme.large]: !avatar,
}, className);
return (
@@ -29,28 +29,28 @@ const factory = (Avatar) => {
CardTitle.propTypes = {
avatar: PropTypes.oneOfType([
PropTypes.string,
- PropTypes.element
+ PropTypes.element,
]),
children: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element,
- PropTypes.array
+ PropTypes.array,
]),
className: PropTypes.string,
subtitle: PropTypes.oneOfType([
PropTypes.string,
- PropTypes.element
+ PropTypes.element,
]),
theme: PropTypes.shape({
large: PropTypes.string,
title: PropTypes.string,
small: PropTypes.string,
- subtitle: PropTypes.string
+ subtitle: PropTypes.string,
}),
title: PropTypes.oneOfType([
PropTypes.string,
- PropTypes.element
- ])
+ PropTypes.element,
+ ]),
};
return CardTitle;
diff --git a/components/card/index.js b/components/card/index.js
index a4e6f14a..3e826510 100644
--- a/components/card/index.js
+++ b/components/card/index.js
@@ -1,11 +1,11 @@
import { themr } from 'react-css-themr';
-import { CARD } from '../identifiers.js';
-import { Card } from './Card.js';
-import { CardActions } from './CardActions.js';
-import { CardMedia } from './CardMedia.js';
-import { CardText } from './CardText.js';
-import { cardTitleFactory } from './CardTitle.js';
-import Avatar from '../avatar';
+import { CARD } from '../identifiers';
+import { Card } from './Card';
+import { CardActions } from './CardActions';
+import { CardMedia } from './CardMedia';
+import { CardText } from './CardText';
+import { cardTitleFactory } from './CardTitle';
+import { Avatar } from '../avatar';
import theme from './theme.css';
const CardTitle = cardTitleFactory(Avatar);
diff --git a/components/checkbox/Check.js b/components/checkbox/Check.js
index c2980d53..71528634 100644
--- a/components/checkbox/Check.js
+++ b/components/checkbox/Check.js
@@ -1,10 +1,11 @@
import React, { PropTypes } from 'react';
import classnames from 'classnames';
+import styleShape from 'react-style-proptype';
const factory = (ripple) => {
- const Check = ({checked, children, onMouseDown, theme, style}) => (
+ const Check = ({ checked, children, onMouseDown, theme, style }) => (
{
Check.propTypes = {
checked: PropTypes.bool,
- children: PropTypes.any,
+ children: PropTypes.node,
onMouseDown: PropTypes.func,
- style: PropTypes.object,
+ style: styleShape,
theme: PropTypes.shape({
check: PropTypes.string,
- checked: PropTypes.string
- })
+ checked: PropTypes.string,
+ }),
};
return ripple(Check);
diff --git a/components/checkbox/Checkbox.js b/components/checkbox/Checkbox.js
index e963deb2..87eb5a12 100644
--- a/components/checkbox/Checkbox.js
+++ b/components/checkbox/Checkbox.js
@@ -1,9 +1,10 @@
import React, { Component, PropTypes } from 'react';
import classnames from 'classnames';
+import styleShape from 'react-style-proptype';
import { themr } from 'react-css-themr';
-import { CHECKBOX } from '../identifiers.js';
-import rippleFactory from '../ripple/Ripple.js';
-import checkFactory from './Check.js';
+import { CHECKBOX } from '../identifiers';
+import rippleFactory from '../ripple/Ripple';
+import checkFactory from './Check';
const factory = (Check) => {
class Checkbox extends Component {
@@ -14,25 +15,25 @@ const factory = (Check) => {
disabled: PropTypes.bool,
label: PropTypes.oneOfType([
PropTypes.string,
- PropTypes.node
+ PropTypes.node,
]),
name: PropTypes.string,
onChange: PropTypes.func,
onMouseEnter: PropTypes.func,
onMouseLeave: PropTypes.func,
- style: PropTypes.object,
+ style: styleShape,
theme: PropTypes.shape({
disabled: PropTypes.string,
field: PropTypes.string,
input: PropTypes.string,
- ripple: PropTypes.string
- })
+ ripple: PropTypes.string,
+ }),
};
static defaultProps = {
checked: false,
className: '',
- disabled: false
+ disabled: false,
};
handleToggle = (event) => {
@@ -42,24 +43,29 @@ const factory = (Check) => {
}
};
- blur () {
- this.inputNode && this.inputNode.blur();
+ blur() {
+ if (this.inputNode) {
+ this.inputNode.blur();
+ }
}
- focus () {
- this.inputNode && this.inputNode.focus();
+ focus() {
+ if (this.inputNode) {
+ this.inputNode.focus();
+ }
}
- render () {
+ render() {
const { checked, children, disabled, label, name, style, onChange, // eslint-disable-line
onMouseEnter, onMouseLeave, theme, ...others } = this.props;
const className = classnames(theme.field, {
- [theme.disabled]: this.props.disabled
+ [theme.disabled]: this.props.disabled,
}, this.props.className);
return (
);
@@ -92,7 +98,7 @@ const factory = (Check) => {
return Checkbox;
};
-const Check = checkFactory(rippleFactory({ centered: true, spread: 2.6}));
+const Check = checkFactory(rippleFactory({ centered: true, spread: 2.6 }));
const Checkbox = factory(Check);
export default themr(CHECKBOX)(Checkbox);
export { factory as checkboxFactory };
diff --git a/components/checkbox/index.js b/components/checkbox/index.js
index 8475ead2..5fad61cd 100644
--- a/components/checkbox/index.js
+++ b/components/checkbox/index.js
@@ -1,11 +1,11 @@
import { themr } from 'react-css-themr';
-import { CHECKBOX } from '../identifiers.js';
+import { CHECKBOX } from '../identifiers';
import themedRippleFactory from '../ripple';
-import { checkboxFactory } from './Checkbox.js';
-import checkFactory from './Check.js';
+import { checkboxFactory } from './Checkbox';
+import checkFactory from './Check';
import theme from './theme.css';
-const ThemedCheck = checkFactory(themedRippleFactory({ centered: true, spread: 2.6}));
+const ThemedCheck = checkFactory(themedRippleFactory({ centered: true, spread: 2.6 }));
const ThemedCheckbox = themr(CHECKBOX, theme)(checkboxFactory(ThemedCheck));
export default ThemedCheckbox;
diff --git a/components/chip/Chip.js b/components/chip/Chip.js
index 09d0a101..a791be37 100644
--- a/components/chip/Chip.js
+++ b/components/chip/Chip.js
@@ -1,11 +1,11 @@
import React, { PropTypes } from 'react';
import classnames from 'classnames';
import { themr } from 'react-css-themr';
-import { CHIP } from '../identifiers.js';
-import InjectAvatar from '../avatar/Avatar.js';
+import { CHIP } from '../identifiers';
+import InjectAvatar from '../avatar/Avatar';
const factory = (Avatar) => {
- const Chip = ({children, className, deletable, onDeleteClick, theme, ...other}) => {
+ const Chip = ({ children, className, deletable, onDeleteClick, theme, ...other }) => {
let hasAvatar = false;
if (React.Children.count(children)) {
const flatChildren = React.Children.toArray(children);
@@ -14,12 +14,12 @@ const factory = (Avatar) => {
}
const classes = classnames(theme.chip, {
- [theme.deletable]: !!deletable,
- [theme.avatar]: !!hasAvatar
+ [theme.deletable]: !!deletable,
+ [theme.avatar]: !!hasAvatar,
}, className);
return (
-
+
{typeof children === 'string' ? {children} : children}
{
deletable ? (
@@ -45,13 +45,13 @@ const factory = (Avatar) => {
deletable: PropTypes.string,
delete: PropTypes.string,
deleteIcon: PropTypes.string,
- deleteX: PropTypes.string
- })
+ deleteX: PropTypes.string,
+ }),
};
Chip.defaultProps = {
className: '',
- deletable: false
+ deletable: false,
};
return Chip;
diff --git a/components/chip/__test__/index.spec.js b/components/chip/__test__/index.spec.js
index 87caae62..d509fabd 100644
--- a/components/chip/__test__/index.spec.js
+++ b/components/chip/__test__/index.spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable */
import expect from 'expect';
import React from 'react';
import ReactDOM from 'react-dom';
@@ -7,30 +8,30 @@ import { CHIP } from '../../identifiers.js';
import { chipFactory } from '../Chip';
import { tooltipFactory } from '../../tooltip';
-const Avatar = ({title}) => {title}; // eslint-disable-line react/prop-types
+const Avatar = ({ title }) => {title}; // eslint-disable-line react/prop-types
const Chip = themr(CHIP)(chipFactory(Avatar));
-describe('Chip', function () {
- describe('with avatar', function () {
- it('adds the avatar class to the element', function () {
+describe('Chip', () => {
+ describe('with avatar', () => {
+ it('adds the avatar class to the element', () => {
const tree = ReactTestUtils.renderIntoDocument(
-
-
+
+ ,
);
const chip = ReactTestUtils.findRenderedComponentWithType(tree, Chip);
const chipNode = ReactDOM.findDOMNode(chip);
expect(chipNode.className).toMatch(/\bavatar-class\b/);
});
- it('works with non-flat children', function () {
+ it('works with non-flat children', () => {
const TooltippedChip = tooltipFactory()(Chip);
const tree = ReactTestUtils.renderIntoDocument(
-
-
+
+ ,
);
const chip = ReactTestUtils.findRenderedComponentWithType(tree, Chip);
const chipNode = ReactDOM.findDOMNode(chip);
@@ -38,12 +39,12 @@ describe('Chip', function () {
});
});
- describe('without avatar', function () {
- it('does not add avatar class to the element', function () {
+ describe('without avatar', () => {
+ it('does not add avatar class to the element', () => {
const tree = ReactTestUtils.renderIntoDocument(
-
+
Test
-
+ ,
);
const chip = ReactTestUtils.findRenderedComponentWithType(tree, Chip);
const chipNode = ReactDOM.findDOMNode(chip);
diff --git a/components/chip/index.js b/components/chip/index.js
index b6802a9f..6777f33c 100644
--- a/components/chip/index.js
+++ b/components/chip/index.js
@@ -1,7 +1,7 @@
-import { CHIP } from '../identifiers.js';
import { themr } from 'react-css-themr';
-import { chipFactory } from './Chip.js';
-import Avatar from '../avatar';
+import { CHIP } from '../identifiers';
+import { chipFactory } from './Chip';
+import { Avatar } from '../avatar';
import theme from './theme.css';
const Chip = chipFactory(Avatar);
diff --git a/components/date_picker/Calendar.js b/components/date_picker/Calendar.js
index cb4ff1be..4a0cfc5a 100644
--- a/components/date_picker/Calendar.js
+++ b/components/date_picker/Calendar.js
@@ -1,64 +1,62 @@
import React, { Component, PropTypes } from 'react';
import CssTransitionGroup from 'react-addons-css-transition-group';
import { range, getAnimationModule } from '../utils/utils';
-import time from '../utils/time.js';
-import CalendarMonth from './CalendarMonth.js';
+import time from '../utils/time';
+import CalendarMonth from './CalendarMonth';
const DIRECTION_STEPS = { left: -1, right: 1 };
const factory = (IconButton) => {
class Calendar extends Component {
static propTypes = {
- disabledDates: React.PropTypes.array,
+ disabledDates: React.PropTypes.arrayOf(PropTypes.instanceOf(Date)),
display: PropTypes.oneOf(['months', 'years']),
- enabledDates: React.PropTypes.array,
+ enabledDates: React.PropTypes.arrayOf(PropTypes.instanceOf(Date)),
handleSelect: PropTypes.func,
locale: React.PropTypes.oneOfType([
React.PropTypes.string,
- React.PropTypes.object
+ React.PropTypes.object,
]),
- maxDate: PropTypes.object,
- minDate: PropTypes.object,
+ maxDate: PropTypes.instanceOf(Date),
+ minDate: PropTypes.instanceOf(Date),
onChange: PropTypes.func,
- selectedDate: PropTypes.object,
+ selectedDate: PropTypes.instanceOf(Date),
sundayFirstDayOfWeek: React.PropTypes.bool,
theme: PropTypes.shape({
active: PropTypes.string,
calendar: PropTypes.string,
next: PropTypes.string,
prev: PropTypes.string,
- years: PropTypes.string
+ years: PropTypes.string,
}),
- viewDate: PropTypes.object
};
static defaultProps = {
display: 'months',
- selectedDate: new Date()
+ selectedDate: new Date(),
};
state = {
- viewDate: this.props.selectedDate
+ viewDate: this.props.selectedDate,
};
- componentWillMount () {
+ componentWillMount() {
document.body.addEventListener('keydown', this.handleKeys);
}
- componentDidUpdate () {
- if (this.refs.activeYear) {
+ componentDidUpdate() {
+ if (this.activeYearNode) {
this.scrollToActive();
}
}
- componentWillUnmount () {
+ componentWillUnmount() {
document.body.removeEventListener('keydown', this.handleKeys);
}
- scrollToActive () {
- this.refs.years.scrollTop = this.refs.activeYear.offsetTop
- - this.refs.years.offsetHeight / 2
- + this.refs.activeYear.offsetHeight / 2;
+ scrollToActive() {
+ const offset = (this.yearsNode.offsetHeight / 2) + (this.activeYearNode.offsetHeight / 2);
+ this.yearsNode.scrollTop = this.activeYearNode.offsetTop - offset;
}
handleDayClick = (day) => {
@@ -66,16 +64,18 @@ const factory = (IconButton) => {
};
handleYearClick = (event) => {
- const year = parseInt(event.currentTarget.id);
+ const year = parseInt(event.currentTarget.id, 10);
const viewDate = time.setYear(this.props.selectedDate, year);
- this.setState({viewDate});
+ 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();
+ 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
@@ -96,35 +96,44 @@ const factory = (IconButton) => {
const direction = event.currentTarget.id;
this.setState({
direction,
- viewDate: time.addMonths(this.state.viewDate, DIRECTION_STEPS[direction])
+ viewDate: time.addMonths(this.state.viewDate, DIRECTION_STEPS[direction]),
});
};
- renderYears () {
+ renderYears() {
return (
-
-
+
- +
- {this.props.template ? this.props.template(item) : item.label} ); }; - handleFocus = event => { - event.stopPropagation(); - if (!this.props.disabled) this.open(event); - if (this.props.onFocus) this.props.onFocus(event); - }; - - handleBlur = event => { - event.stopPropagation(); - if (this.state.active) this.close(); - if (this.props.onBlur) this.props.onBlur(event); - } - - render () { + render() { const { - allowBlank, auto, required, onChange, onFocus, onBlur, //eslint-disable-line no-unused-vars + allowBlank, auto, required, onChange, onFocus, onBlur, // eslint-disable-line no-unused-vars source, template, theme, ...others } = this.props; const selected = this.getSelectedItem(); @@ -185,13 +192,13 @@ const factory = (Input) => { [theme.up]: this.state.up, [theme.active]: this.state.active, [theme.disabled]: this.props.disabled, - [theme.required]: this.props.required + [theme.required]: this.props.required, }, this.props.className); return (
-
{to ? {content} : content}
diff --git a/components/list/ListItemAction.js b/components/list/ListItemAction.js
index f424cac5..838d2adc 100644
--- a/components/list/ListItemAction.js
+++ b/components/list/ListItemAction.js
@@ -1,9 +1,9 @@
import React, { PropTypes } from 'react';
import { themr } from 'react-css-themr';
-import { LIST } from '../identifiers.js';
+import { LIST } from '../identifiers';
-const ListItemAction = ({action, theme}) => {
- const {onClick, onMouseDown} = action.props;
+const ListItemAction = ({ action, theme }) => {
+ const { onClick, onMouseDown } = action.props;
const stopRipple = onClick && !onMouseDown;
const stop = e => e.stopPropagation();
return (
@@ -14,10 +14,10 @@ const ListItemAction = ({action, theme}) => {
};
ListItemAction.propTypes = {
- action: PropTypes.object,
+ action: PropTypes.node,
theme: PropTypes.shape({
- itemAction: PropTypes.string
- })
+ itemAction: PropTypes.string,
+ }),
};
export default themr(LIST)(ListItemAction);
diff --git a/components/list/ListItemActions.js b/components/list/ListItemActions.js
index 94ed511d..71f9e639 100644
--- a/components/list/ListItemActions.js
+++ b/components/list/ListItemActions.js
@@ -1,28 +1,30 @@
import React, { PropTypes } from 'react';
import { themr } from 'react-css-themr';
-import { LIST } from '../identifiers.js';
-import InjectListItemAction from './ListItemAction.js';
+import { LIST } from '../identifiers';
+import InjectListItemAction from './ListItemAction';
const factory = (ListItemAction) => {
- const ListItemActions = ({type, children, theme}) => {
+ const ListItemActions = ({ type, children, theme }) => {
const validChildren = React.Children.toArray(children).filter(c => (
React.isValidElement(c)
));
return (
- {validChildren.map((action, i) =>
)} + {validChildren.map((action, i) => ( + // eslint-disable-line + ))} ); }; ListItemActions.propTypes = { - children: PropTypes.any, + children: PropTypes.node, theme: PropTypes.shape({ left: PropTypes.string, - right: PropTypes.string + right: PropTypes.string, }), - type: PropTypes.oneOf(['left', 'right']) + type: PropTypes.oneOf(['left', 'right']), }; return ListItemActions; diff --git a/components/list/ListItemContent.js b/components/list/ListItemContent.js index c02438ed..8a6dff29 100644 --- a/components/list/ListItemContent.js +++ b/components/list/ListItemContent.js @@ -1,8 +1,8 @@ import React, { Component, PropTypes } from 'react'; import classnames from 'classnames'; import { themr } from 'react-css-themr'; -import { LIST } from '../identifiers.js'; -import InjectListItemText from './ListItemText.js'; +import { LIST } from '../identifiers'; +import InjectListItemText from './ListItemText'; const types = ['auto', 'normal', 'large']; @@ -11,34 +11,34 @@ const factory = (ListItemText) => { static propTypes = { caption: PropTypes.oneOfType([ PropTypes.string, - PropTypes.node + PropTypes.node, ]), - children: PropTypes.any, + children: PropTypes.node, legend: PropTypes.string, theme: PropTypes.shape({ auto: PropTypes.string, itemContentRoot: PropTypes.string, large: PropTypes.string, - normal: PropTypes.string + normal: PropTypes.string, }), - type: PropTypes.oneOf(types) + type: PropTypes.oneOf(types), }; - getType () { - const {type, children, caption, legend} = this.props; + getType() { + const { type, children, caption, legend } = this.props; let count = React.Children.count(children); - [caption, legend].forEach(s => { count += s ? 1 : 0; }); + [caption, legend].forEach((s) => { count += s ? 1 : 0; }); const typeIndex = Math.min(count, types.length); return type || types[typeIndex]; } - render () { - const {children, caption, legend, theme} = this.props; + render() { + const { children, caption, legend, theme } = this.props; const contentType = this.getType(); const className = classnames(theme.itemContentRoot, { - [theme[contentType]]: theme[contentType] + [theme[contentType]]: theme[contentType], }); return ( diff --git a/components/list/ListItemLayout.js b/components/list/ListItemLayout.js index 18c114e1..d7be0565 100644 --- a/components/list/ListItemLayout.js +++ b/components/list/ListItemLayout.js @@ -1,36 +1,38 @@ import React, { PropTypes } from 'react'; import classnames from 'classnames'; import { themr } from 'react-css-themr'; -import { LIST } from '../identifiers.js'; -import FontIcon from '../font_icon/FontIcon.js'; -import InjectAvatar from '../avatar/Avatar.js'; -import InjectListItemContent from './ListItemContent.js'; -import InjectListItemActions from './ListItemActions.js'; +import { LIST } from '../identifiers'; +import { FontIcon } from '../font_icon/FontIcon'; +import InjectAvatar from '../avatar/Avatar'; +import InjectListItemContent from './ListItemContent'; +import InjectListItemActions from './ListItemActions'; const factory = (Avatar, ListItemContent, ListItemActions) => { const ListItemLayout = (props) => { const className = classnames(props.theme.item, { [props.theme.disabled]: props.disabled, - [props.theme.selectable]: props.selectable + [props.theme.selectable]: props.selectable, }, props.className); const leftActions = [ - props.leftIcon && , - props.avatar && , - ...props.leftActions + props.leftIcon && , + props.avatar && , + ...props.leftActions, ]; const rightActions = [ - props.rightIcon && , - ...props.rightActions + props.rightIcon && , + ...props.rightActions, ]; - const content = props.itemContent || ; - const emptyActions = (item) => !item[0] && !item[1] && !item[2]; + const emptyActions = item => !item[0] && !item[1] && !item[2]; + const content = props.itemContent || ( + + ); return ( - {!emptyActions(leftActions) > 0 && {leftActions} } + {!emptyActions(leftActions) > 0 &&{leftActions} } {content} - {!emptyActions(rightActions) > 0 &&{rightActions} } + {!emptyActions(rightActions) > 0 &&{rightActions} } ); }; @@ -38,36 +40,34 @@ const factory = (Avatar, ListItemContent, ListItemActions) => { ListItemLayout.propTypes = { avatar: PropTypes.oneOfType([ PropTypes.string, - PropTypes.element + PropTypes.element, ]), caption: PropTypes.string, - children: PropTypes.any, className: PropTypes.string, disabled: PropTypes.bool, itemContent: PropTypes.element, - leftActions: PropTypes.array, + leftActions: PropTypes.arrayOf(PropTypes.node), leftIcon: PropTypes.oneOfType([ PropTypes.string, - PropTypes.element + PropTypes.element, ]), legend: PropTypes.string, - rightActions: PropTypes.array, + rightActions: PropTypes.arrayOf(PropTypes.node), rightIcon: PropTypes.oneOfType([ PropTypes.string, - PropTypes.element + PropTypes.element, ]), selectable: PropTypes.bool, theme: PropTypes.shape({ disabled: PropTypes.string, item: PropTypes.string, - selectable: PropTypes.string + selectable: PropTypes.string, }), - to: PropTypes.string }; ListItemLayout.defaultProps = { disabled: false, - selectable: false + selectable: false, }; return ListItemLayout; diff --git a/components/list/ListItemText.js b/components/list/ListItemText.js index 6d930c78..21160508 100644 --- a/components/list/ListItemText.js +++ b/components/list/ListItemText.js @@ -1,10 +1,10 @@ import React, { PropTypes } from 'react'; import classnames from 'classnames'; import { themr } from 'react-css-themr'; -import { LIST } from '../identifiers.js'; +import { LIST } from '../identifiers'; -const ListItemText = ({className, primary, children, theme, ...other}) => { - const _className = classnames(theme.itemText, {[theme.primary]: primary}, className); +const ListItemText = ({ className, primary, children, theme, ...other }) => { + const _className = classnames(theme.itemText, { [theme.primary]: primary }, className); return ( {children} @@ -13,17 +13,17 @@ const ListItemText = ({className, primary, children, theme, ...other}) => { }; ListItemText.propTypes = { - children: PropTypes.any, + children: PropTypes.node, className: PropTypes.string, primary: PropTypes.bool, theme: PropTypes.shape({ itemText: PropTypes.string, - primary: PropTypes.string - }) + primary: PropTypes.string, + }), }; ListItemText.defaultProps = { - primary: false + primary: false, }; export default themr(LIST)(ListItemText); diff --git a/components/list/ListSubHeader.js b/components/list/ListSubHeader.js index e4da5798..db4a1fd5 100644 --- a/components/list/ListSubHeader.js +++ b/components/list/ListSubHeader.js @@ -1,7 +1,7 @@ import React, { PropTypes } from 'react'; import classnames from 'classnames'; import { themr } from 'react-css-themr'; -import { LIST } from '../identifiers.js'; +import { LIST } from '../identifiers'; const ListSubHeader = ({ caption, className, theme }) => ({caption}
@@ -10,11 +10,11 @@ const ListSubHeader = ({ caption, className, theme }) => ( ListSubHeader.propTypes = { caption: PropTypes.string, className: PropTypes.string, - theme: PropTypes.object + theme: PropTypes.object, // eslint-disable-line }; ListSubHeader.defaultProps = { - className: '' + className: '', }; export default themr(LIST)(ListSubHeader); diff --git a/components/list/index.js b/components/list/index.js index df158130..f13c94ec 100644 --- a/components/list/index.js +++ b/components/list/index.js @@ -1,21 +1,21 @@ import { themr } from 'react-css-themr'; -import { LIST } from '../identifiers.js'; +import { LIST } from '../identifiers'; import { Avatar } from '../avatar'; import { Checkbox } from '../checkbox'; -import { ListItemText } from './ListItemText.js'; -import { ListItemAction } from './ListItemAction.js'; -import { ListSubHeader } from './ListSubHeader.js'; -import { ListDivider } from './ListDivider.js'; -import { listFactory } from './List.js'; -import { listItemFactory } from './ListItem.js'; -import { listCheckboxFactory } from './ListCheckbox.js'; -import { listItemActionsFactory } from './ListItemActions.js'; -import { listItemContentFactory } from './ListItemContent.js'; -import { listItemLayoutFactory } from './ListItemLayout.js'; +import { ListItemText } from './ListItemText'; +import { ListItemAction } from './ListItemAction'; +import { ListSubHeader } from './ListSubHeader'; +import { ListDivider } from './ListDivider'; +import { listFactory } from './List'; +import { listItemFactory } from './ListItem'; +import { listCheckboxFactory } from './ListCheckbox'; +import { listItemActionsFactory } from './ListItemActions'; +import { listItemContentFactory } from './ListItemContent'; +import { listItemLayoutFactory } from './ListItemLayout'; import themedRippleFactory from '../ripple'; import theme from './theme.css'; -const applyTheme = (Component) => themr(LIST, theme)(Component); +const applyTheme = Component => themr(LIST, theme)(Component); const ripple = themedRippleFactory({ centered: false, listItemIgnore: true }); const ThemedListItemAction = applyTheme(ListItemAction); const ThemedListSubHeader = applyTheme(ListSubHeader); @@ -23,9 +23,13 @@ const ThemedListItemText = applyTheme(ListItemText); const ThemedListDivider = applyTheme(ListDivider); const ThemedListItemContent = applyTheme(listItemContentFactory(ThemedListItemText)); const ThemedListItemActions = applyTheme(listItemActionsFactory(ThemedListItemAction)); -const ThemedListItemLayout = applyTheme(listItemLayoutFactory(Avatar, ThemedListItemContent, ThemedListItemActions)); +const ThemedListItemLayout = applyTheme( + listItemLayoutFactory(Avatar, ThemedListItemContent, ThemedListItemActions), +); const ThemedListCheckbox = applyTheme(listCheckboxFactory(Checkbox, ThemedListItemContent)); -const ThemedListItem = applyTheme(listItemFactory(ripple, ThemedListItemLayout, ThemedListItemContent)); +const ThemedListItem = applyTheme( + listItemFactory(ripple, ThemedListItemLayout, ThemedListItemContent), +); const ThemedList = applyTheme(listFactory(ThemedListItem)); export { ThemedListItemActions as ListItemActions }; diff --git a/components/menu/IconMenu.js b/components/menu/IconMenu.js index 54697e98..9962b5c1 100644 --- a/components/menu/IconMenu.js +++ b/components/menu/IconMenu.js @@ -1,9 +1,9 @@ import React, { Component, PropTypes } from 'react'; import classnames from 'classnames'; import { themr } from 'react-css-themr'; -import { MENU } from '../identifiers.js'; -import InjectIconButton from '../button/IconButton.js'; -import InjectMenu from './Menu.js'; +import { MENU } from '../identifiers'; +import InjectIconButton from '../button/IconButton'; +import InjectMenu from './Menu'; const factory = (IconButton, Menu) => { class IconMenu extends Component { @@ -12,7 +12,7 @@ const factory = (IconButton, Menu) => { className: PropTypes.string, icon: PropTypes.oneOfType([ PropTypes.string, - PropTypes.element + PropTypes.element, ]), iconRipple: PropTypes.bool, menuRipple: PropTypes.bool, @@ -22,11 +22,11 @@ const factory = (IconButton, Menu) => { onShow: PropTypes.func, position: PropTypes.string, selectable: PropTypes.bool, - selected: PropTypes.any, + selected: PropTypes.node, theme: PropTypes.shape({ icon: PropTypes.string, - iconMenu: PropTypes.string - }) + iconMenu: PropTypes.string, + }), }; static defaultProps = { @@ -35,11 +35,11 @@ const factory = (IconButton, Menu) => { iconRipple: true, menuRipple: true, position: 'auto', - selectable: false + selectable: false, }; state = { - active: false + active: false, } handleButtonClick = (event) => { @@ -52,7 +52,7 @@ const factory = (IconButton, Menu) => { if (this.props.onHide) this.props.onHide(); } - render () { + render() { const { children, className, icon, iconRipple, inverse, menuRipple, onHide, // eslint-disable-line onSelect, onShow, position, selectable, selected, theme, ...other diff --git a/components/menu/Menu.js b/components/menu/Menu.js index 2be53511..efd46156 100644 --- a/components/menu/Menu.js +++ b/components/menu/Menu.js @@ -2,10 +2,10 @@ import React, { Component, PropTypes } from 'react'; import ReactDOM from 'react-dom'; import classnames from 'classnames'; import { themr } from 'react-css-themr'; -import { MENU } from '../identifiers.js'; +import { MENU } from '../identifiers'; import { events } from '../utils'; import { getViewport } from '../utils/utils'; -import InjectMenuItem from './MenuItem.js'; +import InjectMenuItem from './MenuItem'; const POSITION = { AUTO: 'auto', @@ -13,7 +13,7 @@ const POSITION = { TOP_LEFT: 'topLeft', TOP_RIGHT: 'topRight', BOTTOM_LEFT: 'bottomLeft', - BOTTOM_RIGHT: 'bottomRight' + BOTTOM_RIGHT: 'bottomRight', }; const factory = (MenuItem) => { @@ -29,7 +29,7 @@ const factory = (MenuItem) => { position: PropTypes.oneOf(Object.keys(POSITION).map(key => POSITION[key])), ripple: PropTypes.bool, selectable: PropTypes.bool, - selected: PropTypes.any, + selected: PropTypes.node, theme: PropTypes.shape({ active: PropTypes.string, bottomLeft: PropTypes.string, @@ -40,8 +40,8 @@ const factory = (MenuItem) => { rippled: PropTypes.string, static: PropTypes.string, topLeft: PropTypes.string, - topRight: PropTypes.string - }) + topRight: PropTypes.string, + }), }; static defaultProps = { @@ -49,17 +49,17 @@ const factory = (MenuItem) => { outline: true, position: POSITION.STATIC, ripple: true, - selectable: true + selectable: true, }; state = { active: this.props.active, - rippled: false + rippled: false, }; - componentDidMount () { + componentDidMount() { this.positionTimeoutHandle = setTimeout(() => { - const { width, height } = this.refs.menu.getBoundingClientRect(); + const { width, height } = this.menuNode.getBoundingClientRect(); const position = this.props.position === POSITION.AUTO ? this.calculatePosition() : this.props.position; @@ -67,7 +67,7 @@ const factory = (MenuItem) => { }); } - componentWillReceiveProps (nextProps) { + componentWillReceiveProps(nextProps) { if (this.props.position !== nextProps.position) { const position = nextProps.position === POSITION.AUTO ? this.calculatePosition() @@ -104,64 +104,39 @@ const factory = (MenuItem) => { } } - componentWillUpdate (nextProps, nextState) { + componentWillUpdate(nextProps, nextState) { if (!this.state.active && nextState.active) { events.addEventsToDocument({ click: this.handleDocumentClick, - touchstart: this.handleDocumentClick + touchstart: this.handleDocumentClick, }); } } - componentDidUpdate (prevProps, prevState) { + componentDidUpdate(prevProps, prevState) { if (prevState.active && !this.state.active) { if (this.props.onHide) this.props.onHide(); events.removeEventsFromDocument({ click: this.handleDocumentClick, - touchstart: this.handleDocumentClick + touchstart: this.handleDocumentClick, }); } else if (!prevState.active && this.state.active && this.props.onShow) { this.props.onShow(); } } - componentWillUnmount () { + componentWillUnmount() { if (this.state.active) { events.removeEventsFromDocument({ click: this.handleDocumentClick, - touchstart: this.handleDocumentClick + touchstart: this.handleDocumentClick, }); } clearTimeout(this.positionTimeoutHandle); clearTimeout(this.activateTimeoutHandle); } - handleDocumentClick = (event) => { - if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) { - this.setState({active: false, rippled: false}); - } - }; - - handleSelect = (item, event) => { - const { value, onClick } = item.props; - if (onClick) event.persist(); - this.setState({ active: false, rippled: this.props.ripple }, () => { - if (onClick) onClick(event); - if (this.props.onSelect) this.props.onSelect(value); - }); - }; - - calculatePosition () { - const parentNode = ReactDOM.findDOMNode(this).parentNode; - if (!parentNode) return; - const {top, left, height, width} = parentNode.getBoundingClientRect(); - const {height: wh, width: ww} = getViewport(); - const toTop = top < ((wh / 2) - height / 2); - const toLeft = left < ((ww / 2) - width / 2); - return `${toTop ? 'top' : 'bottom'}${toLeft ? 'Left' : 'Right'}`; - } - - getMenuStyle () { + getMenuStyle() { const { width, height, position } = this.state; if (position !== POSITION.STATIC) { if (this.state.active) { @@ -176,50 +151,82 @@ const factory = (MenuItem) => { return { clip: 'rect(0 0 0 0)' }; } } + + return undefined; } - getRootStyle () { - if (this.state.position !== POSITION.STATIC) { - return { width: this.state.width, height: this.state.height }; + getRootStyle() { + return this.state.position !== POSITION.STATIC + ? { width: this.state.width, height: this.state.height } + : undefined; + } + + calculatePosition() { + const parentNode = ReactDOM.findDOMNode(this).parentNode; + if (!parentNode) return undefined; + const { top, left, height, width } = parentNode.getBoundingClientRect(); + const { height: wh, width: ww } = getViewport(); + const toTop = top < ((wh / 2) - (height / 2)); + const toLeft = left < ((ww / 2) - (width / 2)); + return `${toTop ? 'top' : 'bottom'}${toLeft ? 'Left' : 'Right'}`; + } + + handleDocumentClick = (event) => { + if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) { + this.setState({ active: false, rippled: false }); } + }; + + handleSelect = (item, event) => { + const { value, onClick } = item.props; + if (onClick) event.persist(); + this.setState({ active: false, rippled: this.props.ripple }, () => { + if (onClick) onClick(event); + if (this.props.onSelect) this.props.onSelect(value); + }); + }; + + show() { + const { width, height } = this.menuNode.getBoundingClientRect(); + this.setState({ active: true, width, height }); } - renderItems () { + hide() { + this.setState({ active: false }); + } + + renderItems() { return React.Children.map(this.props.children, (item) => { if (!item) return item; if (item.type === MenuItem) { return React.cloneElement(item, { ripple: item.props.ripple || this.props.ripple, - selected: typeof item.props.value !== 'undefined' && this.props.selectable && item.props.value === this.props.selected, - onClick: this.handleSelect.bind(this, item) + selected: typeof item.props.value !== 'undefined' + && this.props.selectable + && item.props.value === this.props.selected, + onClick: this.handleSelect.bind(this, item), }); - } else { - return React.cloneElement(item); } + return React.cloneElement(item); }); } - show () { - const { width, height } = this.refs.menu.getBoundingClientRect(); - this.setState({active: true, width, height}); - } - - hide () { - this.setState({active: false}); - } - - render () { + render() { const { theme } = this.props; const outlineStyle = { width: this.state.width, height: this.state.height }; const className = classnames([theme.menu, theme[this.state.position]], { [theme.active]: this.state.active, - [theme.rippled]: this.state.rippled + [theme.rippled]: this.state.rippled, }, this.props.className); return ( -+{this.props.outline ? : null} -diff --git a/components/menu/MenuDivider.js b/components/menu/MenuDivider.js index b99cf87c..89543bca 100644 --- a/components/menu/MenuDivider.js +++ b/components/menu/MenuDivider.js @@ -1,15 +1,15 @@ import React, { PropTypes } from 'react'; import { themr } from 'react-css-themr'; -import { MENU } from '../identifiers.js'; +import { MENU } from '../identifiers'; const MenuDivider = ({ theme }) => ( --
+
- { this.menuNode = node; }}
+ className={theme.menuInner}
+ style={this.getMenuStyle()}
+ >
{this.renderItems()}
+
); MenuDivider.propTypes = { theme: PropTypes.shape({ - menuDivider: PropTypes.string - }) + menuDivider: PropTypes.string, + }), }; export default themr(MENU)(MenuDivider); diff --git a/components/menu/MenuItem.js b/components/menu/MenuItem.js index 4ce2dc18..d573704b 100644 --- a/components/menu/MenuItem.js +++ b/components/menu/MenuItem.js @@ -1,20 +1,20 @@ import React, { Component, PropTypes } from 'react'; import classnames from 'classnames'; import { themr } from 'react-css-themr'; -import { MENU } from '../identifiers.js'; -import FontIcon from '../font_icon/FontIcon.js'; -import rippleFactory from '../ripple/Ripple.js'; +import { MENU } from '../identifiers'; +import { FontIcon } from '../font_icon/FontIcon'; +import rippleFactory from '../ripple/Ripple'; const factory = (ripple) => { class MenuItem extends Component { static propTypes = { caption: PropTypes.string, - children: PropTypes.any, + children: PropTypes.node, className: PropTypes.string, disabled: PropTypes.bool, icon: PropTypes.oneOfType([ PropTypes.string, - PropTypes.element + PropTypes.element, ]), onClick: PropTypes.func, selected: PropTypes.bool, @@ -25,14 +25,14 @@ const factory = (ripple) => { icon: PropTypes.string, menuItem: PropTypes.string, selected: PropTypes.string, - shortcut: PropTypes.string - }) + shortcut: PropTypes.string, + }), }; static defaultProps = { className: '', disabled: false, - selected: false + selected: false, }; handleClick = (event) => { @@ -41,16 +41,25 @@ const factory = (ripple) => { } }; - render () { - const {icon, caption, children, shortcut, selected, disabled, theme, ...others} = this.props; + render() { + const { + caption, + children, + disabled, + icon, + selected, + shortcut, + theme, + ...others + } = this.props; const className = classnames(theme.menuItem, { [theme.selected]: selected, - [theme.disabled]: disabled + [theme.disabled]: disabled, }, this.props.className); return ( -- - {icon ?
: null} + - + {icon ?
: null} {caption} {shortcut ? {shortcut} : null} {children} diff --git a/components/menu/__test__/index.spec.js b/components/menu/__test__/index.spec.js index fefb186f..89faf0d8 100644 --- a/components/menu/__test__/index.spec.js +++ b/components/menu/__test__/index.spec.js @@ -1,13 +1,14 @@ +/* eslint-disable */ import expect from 'expect'; import React from 'react'; import ReactDOM from 'react-dom'; import ReactTestUtils from 'react-addons-test-utils'; import Menu from '../Menu'; -import MenuItem, {MenuItem as RawMenuItem} from '../MenuItem'; +import MenuItem, { MenuItem as RawMenuItem } from '../MenuItem'; -describe('MenuItem', function () { - describe('#onClick', function () { - it('passes to listener the event', function () { +describe('MenuItem', () => { + describe('#onClick', () => { + it('passes to listener the event', () => { let listenerCalled = false; const handleClick = function (event) { listenerCalled = true; @@ -17,7 +18,7 @@ describe('MenuItem', function () { const tree = ReactTestUtils.renderIntoDocument( ); const menuItem = ReactTestUtils.findRenderedComponentWithType(tree, RawMenuItem); diff --git a/components/menu/index.js b/components/menu/index.js index f5d71dba..a62675ab 100644 --- a/components/menu/index.js +++ b/components/menu/index.js @@ -1,14 +1,14 @@ import { themr } from 'react-css-themr'; -import { MENU } from '../identifiers.js'; +import { MENU } from '../identifiers'; import { IconButton } from '../button'; -import { MenuDivider } from './MenuDivider.js'; -import { menuItemFactory } from './MenuItem.js'; -import { menuFactory } from './Menu.js'; -import { iconMenuFactory } from './IconMenu.js'; +import { MenuDivider } from './MenuDivider'; +import { menuItemFactory } from './MenuItem'; +import { menuFactory } from './Menu'; +import { iconMenuFactory } from './IconMenu'; import themedRippleFactory from '../ripple'; import theme from './theme.css'; -const applyTheme = (Component) => themr(MENU, theme)(Component); +const applyTheme = Component => themr(MENU, theme)(Component); const ThemedMenuDivider = applyTheme(MenuDivider); const ThemedMenuItem = applyTheme(menuItemFactory(themedRippleFactory({}))); const ThemedMenu = applyTheme(menuFactory(ThemedMenuItem)); diff --git a/components/navigation/Navigation.js b/components/navigation/Navigation.js index 79d384ae..29a014fb 100644 --- a/components/navigation/Navigation.js +++ b/components/navigation/Navigation.js @@ -1,23 +1,23 @@ import React, { PropTypes } from 'react'; import classnames from 'classnames'; import { themr } from 'react-css-themr'; -import { NAVIGATION } from '../identifiers.js'; -import InjectButton from '../button/Button.js'; -import InjectLink from '../link/Link.js'; +import { NAVIGATION } from '../identifiers'; +import InjectButton from '../button/Button'; +import InjectLink from '../link/Link'; const factory = (Button, Link) => { const Navigation = ({ actions, children, className, routes, theme, type }) => { const _className = classnames(theme[type], className); - const buttons = actions.map((action, index) => { - return ; - }); + const buttons = actions.map((action, index) => ( + // eslint-disable-line + )); - const links = routes.map((route, index) => { - return ; - }); + const links = routes.map((route, index) => ( + // eslint-disable-line + )); return ( - - - {icon ?
- { this.yearsNode = node; }}
+ >
{range(1900, 2100).map(year => (
+ ref={(node) => {
+ if (year === this.state.viewDate.getFullYear()) {
+ this.activeYearNode = node;
+ }
+ }}
+ >
+ {year}
+
))}
-
+ {
);
}
- render () {
+ render() {
return (
{this.props.display === 'months' ? this.renderMonths() : this.renderYears()}
diff --git a/components/date_picker/CalendarDay.js b/components/date_picker/CalendarDay.js
index 12829f91..027c010f 100644
--- a/components/date_picker/CalendarDay.js
+++ b/components/date_picker/CalendarDay.js
@@ -1,33 +1,34 @@
import React, { Component, PropTypes } from 'react';
import classnames from 'classnames';
-import time from '../utils/time.js';
+import time from '../utils/time';
class Day extends Component {
static propTypes = {
day: PropTypes.number,
disabled: PropTypes.bool,
onClick: PropTypes.func,
- selectedDate: PropTypes.object,
+ selectedDate: PropTypes.instanceOf(Date),
sundayFirstDayOfWeek: PropTypes.bool,
theme: PropTypes.shape({
active: PropTypes.string,
day: PropTypes.string,
- disabled: PropTypes.string
+ disabled: PropTypes.string,
}),
- viewDate: PropTypes.object
+ viewDate: PropTypes.instanceOf(Date),
};
- dayStyle () {
+ dayStyle() {
if (this.props.day === 1) {
const e = (this.props.sundayFirstDayOfWeek) ? 0 : 1;
const firstDay = time.getFirstWeekDay(this.props.viewDate) - e;
return {
- marginLeft: `${ (firstDay >= 0 ? firstDay : 6) * 100 / 7 }%`
+ marginLeft: `${(firstDay >= 0 ? firstDay : 6) * (100 / 7)}%`,
};
}
+ return undefined;
}
- isSelected () {
+ isSelected() {
const sameYear = this.props.viewDate.getFullYear() === this.props.selectedDate.getFullYear();
const sameMonth = this.props.viewDate.getMonth() === this.props.selectedDate.getMonth();
const sameDay = this.props.day === this.props.selectedDate.getDate();
@@ -40,14 +41,14 @@ class Day extends Component {
}
};
- render () {
+ render() {
const className = classnames(this.props.theme.day, {
[this.props.theme.active]: this.isSelected(),
- [this.props.theme.disabled]: this.props.disabled
+ [this.props.theme.disabled]: this.props.disabled,
});
return (
-
+
{this.props.day}
diff --git a/components/date_picker/CalendarMonth.js b/components/date_picker/CalendarMonth.js
index 8c38cfa8..08fb20aa 100644
--- a/components/date_picker/CalendarMonth.js
+++ b/components/date_picker/CalendarMonth.js
@@ -1,41 +1,41 @@
import React, { Component, PropTypes } from 'react';
import { range } from '../utils/utils';
-import time from '../utils/time.js';
-import CalendarDay from './CalendarDay.js';
+import time from '../utils/time';
+import CalendarDay from './CalendarDay';
class Month extends Component {
static propTypes = {
- disabledDates: React.PropTypes.array,
- enabledDates: React.PropTypes.array,
+ disabledDates: React.PropTypes.arrayOf(PropTypes.instanceOf(Date)),
+ enabledDates: React.PropTypes.arrayOf(PropTypes.instanceOf(Date)),
locale: React.PropTypes.oneOfType([
React.PropTypes.string,
- React.PropTypes.object
+ React.PropTypes.object,
]),
- maxDate: PropTypes.object,
- minDate: PropTypes.object,
+ maxDate: PropTypes.instanceOf(Date),
+ minDate: PropTypes.instanceOf(Date),
onDayClick: PropTypes.func,
- selectedDate: PropTypes.object,
+ selectedDate: PropTypes.instanceOf(Date),
sundayFirstDayOfWeek: React.PropTypes.bool,
theme: PropTypes.shape({
days: PropTypes.string,
month: PropTypes.string,
title: PropTypes.string,
- week: PropTypes.string
+ week: PropTypes.string,
}),
- viewDate: PropTypes.object
+ viewDate: PropTypes.instanceOf(Date),
};
static defaultProps = {
disabledDates: [],
- enabledDates: []
+ enabledDates: [],
};
handleDayClick = (day) => {
if (this.props.onDayClick) this.props.onDayClick(day);
};
- isDayDisabled (date) {
- const {minDate, maxDate, enabledDates, disabledDates} = this.props;
+ isDayDisabled(date) {
+ const { minDate, maxDate, enabledDates, disabledDates } = this.props;
const compareDate = compDate => date.getTime() === compDate.getTime();
const dateInDisabled = disabledDates.filter(compareDate).length > 0;
const dateInEnabled = enabledDates.filter(compareDate).length > 0;
@@ -44,14 +44,14 @@ class Month extends Component {
|| dateInDisabled;
}
- renderWeeks () {
+ renderWeeks() {
const days = range(0, 7).map(d => time.getDayOfWeekLetter(d, this.props.locale));
const source = (this.props.sundayFirstDayOfWeek) ? days : [...days.slice(1), days[0]];
- return source.map((d, i) => ({d}));
+ return source.map((day, i) => ({day})); // eslint-disable-line
}
- renderDays () {
- return range(1, time.getDaysInMonth(this.props.viewDate) + 1).map(i => {
+ renderDays() {
+ return range(1, time.getDaysInMonth(this.props.viewDate) + 1).map((i) => {
const date = new Date(this.props.viewDate.getFullYear(), this.props.viewDate.getMonth(), i);
return (
+
- {time.getFullMonth(this.props.viewDate, this.props.locale)} {this.props.viewDate.getFullYear()}
+ {fullMonth} {fullYear}
{this.renderWeeks()}
{this.renderDays()}
diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index 149afbec..ed574788 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -1,15 +1,15 @@
import React, { Component, PropTypes } from 'react';
import classnames from 'classnames';
import { themr } from 'react-css-themr';
-import { DATE_PICKER } from '../identifiers.js';
-import events from '../utils/events.js';
-import time from '../utils/time.js';
+import { DATE_PICKER } from '../identifiers';
+import events from '../utils/events';
+import time from '../utils/time';
-import InjectIconButton from '../button/IconButton.js';
-import InjectInput from '../input/Input.js';
-import InjectDialog from '../dialog/Dialog.js';
-import calendarFactory from './Calendar.js';
-import datePickerDialogFactory from './DatePickerDialog.js';
+import InjectIconButton from '../button/IconButton';
+import InjectInput from '../input/Input';
+import InjectDialog from '../dialog/Dialog';
+import calendarFactory from './Calendar';
+import datePickerDialogFactory from './DatePickerDialog';
const factory = (Input, DatePickerDialog) => {
class DatePicker extends Component {
@@ -18,22 +18,22 @@ const factory = (Input, DatePickerDialog) => {
autoOk: PropTypes.bool,
cancelLabel: PropTypes.string,
className: PropTypes.string,
- disabledDates: React.PropTypes.array,
- enabledDates: React.PropTypes.array,
+ disabledDates: React.PropTypes.arrayOf(PropTypes.instanceOf(Date)),
+ enabledDates: React.PropTypes.arrayOf(PropTypes.instanceOf(Date)),
error: PropTypes.string,
icon: PropTypes.oneOfType([
PropTypes.string,
- PropTypes.element
+ PropTypes.element,
]),
inputClassName: PropTypes.string,
inputFormat: PropTypes.func,
label: PropTypes.string,
locale: React.PropTypes.oneOfType([
React.PropTypes.string,
- React.PropTypes.object
+ React.PropTypes.object,
]),
- maxDate: PropTypes.object,
- minDate: PropTypes.object,
+ maxDate: PropTypes.instanceOf(Date),
+ minDate: PropTypes.instanceOf(Date),
name: PropTypes.string,
okLabel: PropTypes.string,
onChange: PropTypes.func,
@@ -46,32 +46,32 @@ const factory = (Input, DatePickerDialog) => {
sundayFirstDayOfWeek: React.PropTypes.bool,
theme: PropTypes.shape({
container: PropTypes.string,
- input: PropTypes.string
+ input: PropTypes.string,
}),
value: PropTypes.oneOfType([
PropTypes.instanceOf(Date),
- PropTypes.string
- ])
+ PropTypes.string,
+ ]),
};
static defaultProps = {
active: false,
locale: 'en',
- sundayFirstDayOfWeek: false
+ sundayFirstDayOfWeek: false,
};
state = {
- active: this.props.active
+ active: this.props.active,
};
- componentWillReceiveProps (nextProps) {
+ componentWillReceiveProps(nextProps) {
if (nextProps.active !== this.props.active && this.state.active !== nextProps.active) {
this.setState({ active: nextProps.active });
}
}
handleDismiss = () => {
- this.setState({active: false});
+ this.setState({ active: false });
if (this.props.onDismiss) {
this.props.onDismiss();
}
@@ -79,34 +79,34 @@ const factory = (Input, DatePickerDialog) => {
handleInputFocus = (event) => {
events.pauseEvent(event);
- this.setState({active: true});
+ this.setState({ active: true });
};
handleInputBlur = (event) => {
events.pauseEvent(event);
- this.setState({active: false});
+ this.setState({ active: false });
};
handleInputClick = (event) => {
events.pauseEvent(event);
- this.setState({active: true});
+ this.setState({ active: true });
if (this.props.onClick) this.props.onClick(event);
};
handleInputKeyPress = (event) => {
if (event.charCode === 13) {
events.pauseEvent(event);
- this.setState({active: true});
+ this.setState({ active: true });
}
if (this.props.onKeyPress) this.props.onKeyPress(event);
};
handleSelect = (value, event) => {
if (this.props.onChange) this.props.onChange(value, event);
- this.setState({active: false});
+ this.setState({ active: false });
};
- render () {
+ render() {
const { active, onDismiss,// eslint-disable-line
autoOk, cancelLabel, enabledDates, disabledDates, inputClassName, inputFormat,
locale, maxDate, minDate, okLabel, onEscKeyDown, onOverlayClick, readonly,
@@ -116,10 +116,10 @@ const factory = (Input, DatePickerDialog) => {
const formattedDate = date === undefined ? '' : finalInputFormat(value, locale);
return (
-
+ ( // eslint-disable-line
@@ -15,18 +15,18 @@ const FontIcon = ({ alt, children, className, theme, value, ...other}) => ( // e
FontIcon.propTypes = {
alt: PropTypes.string,
- children: PropTypes.any,
+ children: PropTypes.node,
className: PropTypes.string,
- theme: PropTypes.object,
+ theme: PropTypes.object, // eslint-disable-line
value: PropTypes.oneOfType([
PropTypes.string,
- PropTypes.element
- ])
+ PropTypes.element,
+ ]),
};
FontIcon.defaultProps = {
alt: '',
- className: ''
+ className: '',
};
export default FontIcon;
diff --git a/components/font_icon/index.js b/components/font_icon/index.js
index 726aec89..15ace6be 100644
--- a/components/font_icon/index.js
+++ b/components/font_icon/index.js
@@ -1,4 +1,4 @@
-import FontIcon from './FontIcon.js';
+import { FontIcon } from './FontIcon';
export default FontIcon;
export { FontIcon };
diff --git a/components/form/Form.js b/components/form/Form.js
deleted file mode 100644
index 3f313399..00000000
--- a/components/form/Form.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-import InjectAutocomplete from '../autocomplete/Autocomplete.js';
-import InjectButton from '../button/Button.js';
-import InjectCheckbox from '../checkbox/Checkbox.js';
-import InjectDatePicker from '../date_picker/DatePicker.js';
-import InjectDropdown from '../dropdown/Dropdown.js';
-import InjectInput from '../input/Input.js';
-import InjectRadioGroup from '../radio/RadioGroup.js';
-import InjectSlider from '../slider/Slider.js';
-import InjectSwitch from '../switch/Switch.js';
-import InjectTimePicker from '../time_picker/TimePicker.js';
-
-const factory = (
- Autocomplete, Button, Checkbox, DatePicker, Dropdown,
- Input, RadioGroup, Slider, Switch, TimePicker
- ) => {
-
- const COMPONENTS = {
- 'autocomplete': Autocomplete,
- 'button': Button,
- 'checkbox': Checkbox,
- 'datepicker': DatePicker,
- 'dropdown': Dropdown,
- 'input': Input,
- 'radioGroup': RadioGroup,
- 'slider': Slider,
- 'switch': Switch,
- 'timepicker': TimePicker
- };
-
- class Form extends Component {
- static propTypes = {
- attributes: PropTypes.array,
- children: PropTypes.node,
- className: PropTypes.string,
- model: PropTypes.object,
- onChange: PropTypes.func,
- onError: PropTypes.func,
- onSubmit: PropTypes.func,
- onValid: PropTypes.func,
- storage: PropTypes.string
- };
-
- static defaultProps = {
- attributes: [],
- className: ''
- };
-
- onSubmit = (event) => {
- event.preventDefault();
- if (this.props.onSubmit) this.props.onSubmit(event);
- };
-
- onChange = (field, value, event) => {
- if (this.props.onChange) this.props.onChange(field, value, event);
- };
-
- renderFields () {
- return Object.keys(this.props.model).map((field, index) => {
- const properties = this.props.model[field];
- const Field = COMPONENTS[properties.kind.toLowerCase()];
- return , , , or
{
onKeyPress={this.handleInputKeyPress}
onClick={this.handleInputClick}
readOnly
- type='text'
+ type="text"
value={formattedDate}
/>
{
class CalendarDialog extends Component {
@@ -9,14 +9,14 @@ const factory = (Dialog, Calendar) => {
autoOk: PropTypes.bool,
cancelLabel: PropTypes.string,
className: PropTypes.string,
- disabledDates: PropTypes.array,
- enabledDates: PropTypes.array,
+ disabledDates: React.PropTypes.arrayOf(PropTypes.instanceOf(Date)),
+ enabledDates: React.PropTypes.arrayOf(PropTypes.instanceOf(Date)),
locale: React.PropTypes.oneOfType([
React.PropTypes.string,
- React.PropTypes.object
+ React.PropTypes.object,
]),
- maxDate: PropTypes.object,
- minDate: PropTypes.object,
+ maxDate: PropTypes.instanceOf(Date),
+ minDate: PropTypes.instanceOf(Date),
name: PropTypes.string,
okLabel: PropTypes.string,
onDismiss: PropTypes.func,
@@ -32,9 +32,9 @@ const factory = (Dialog, Calendar) => {
header: PropTypes.string,
monthsDisplay: PropTypes.string,
year: PropTypes.string,
- yearsDisplay: PropTypes.string
+ yearsDisplay: PropTypes.string,
}),
- value: PropTypes.object
+ value: PropTypes.instanceOf(Date),
};
static defaultProps = {
@@ -42,24 +42,24 @@ const factory = (Dialog, Calendar) => {
cancelLabel: 'Cancel',
className: '',
okLabel: 'Ok',
- value: new Date()
+ value: new Date(),
};
state = {
display: 'months',
- date: this.props.value
+ date: this.props.value,
};
- componentWillMount () {
+ componentWillMount() {
this.updateStateDate(this.props.value);
}
- componentWillReceiveProps (nextProps) {
+ componentWillReceiveProps(nextProps) {
this.updateStateDate(nextProps.value);
}
handleNewDate = (value, dayClick) => {
- const state = {display: 'months', date: value};
+ const state = { display: 'months', date: value };
if (time.dateOutOfRange(value, this.props.minDate, this.props.maxDate)) {
if (this.props.maxDate && this.props.minDate) {
state.date = time.closestDate(value, this.props.maxDate, this.props.minDate);
@@ -87,12 +87,18 @@ const factory = (Dialog, Calendar) => {
}
};
- actions = [
- { label: this.props.cancelLabel, className: this.props.theme.button, onClick: this.props.onDismiss },
- { label: this.props.okLabel, className: this.props.theme.button, name: this.props.name, onClick: this.handleSelect }
- ];
+ actions = [{
+ label: this.props.cancelLabel,
+ className: this.props.theme.button,
+ onClick: this.props.onDismiss,
+ }, {
+ label: this.props.okLabel,
+ className: this.props.theme.button,
+ name: this.props.name,
+ onClick: this.handleSelect,
+ }];
- render () {
+ render() {
const { theme } = this.props;
const display = `${this.state.display}Display`;
const className = classnames(theme.dialog, this.props.className);
@@ -111,10 +117,10 @@ const factory = (Dialog, Calendar) => {
type="custom"
>
-
+
{this.state.date.getFullYear()}
-
+
diff --git a/components/date_picker/__test__/index.spec.js b/components/date_picker/__test__/index.spec.js
index a6e55a22..84eff2c2 100644
--- a/components/date_picker/__test__/index.spec.js
+++ b/components/date_picker/__test__/index.spec.js
@@ -1,82 +1,83 @@
+/* eslint-disable */
import expect from 'expect';
import theme from '../theme.css';
import { DatePickerDialog } from '../DatePicker';
import utils from '../../utils/testing';
-describe('DatePickerDialog', function () {
- describe('#on mount', function () {
- it('passes value through to calendar if no maxDate/minDate specified', function () {
+describe('DatePickerDialog', () => {
+ describe('#on mount', () => {
+ it('passes value through to calendar if no maxDate/minDate specified', () => {
const value = new Date(2016, 1, 1);
- const wrapper = utils.shallowRenderComponent(DatePickerDialog, {theme, value});
+ const wrapper = utils.shallowRenderComponent(DatePickerDialog, { theme, value });
expect(getDatePassedToCalendar(wrapper)).toBe(value);
});
- describe('when minDate but not maxDate specified', function () {
+ describe('when minDate but not maxDate specified', () => {
const minDate = new Date(2016, 1, 2);
- it('passes through a value after minDate', function () {
+ it('passes through a value after minDate', () => {
const value = new Date(2016, 1, 3);
- const wrapper = utils.shallowRenderComponent(DatePickerDialog, {theme, value, minDate});
+ const wrapper = utils.shallowRenderComponent(DatePickerDialog, { theme, value, minDate });
expect(getDatePassedToCalendar(wrapper)).toBe(value);
});
- it('sanitises a value before minDate to minDate', function () {
+ it('sanitises a value before minDate to minDate', () => {
const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
- theme, value: new Date(2016, 1, 1), minDate
+ theme, value: new Date(2016, 1, 1), minDate,
});
expect(getDatePassedToCalendar(wrapper)).toBe(minDate);
});
});
- describe('when maxDate but not minDate specified', function () {
+ describe('when maxDate but not minDate specified', () => {
const maxDate = new Date(2016, 1, 2);
- it('passes through a value before maxDate', function () {
+ it('passes through a value before maxDate', () => {
const value = new Date(2016, 1, 1);
- const wrapper = utils.shallowRenderComponent(DatePickerDialog, {theme, value, maxDate});
+ const wrapper = utils.shallowRenderComponent(DatePickerDialog, { theme, value, maxDate });
expect(getDatePassedToCalendar(wrapper)).toBe(value);
});
- it('sanitises a value after maxDate to maxDate', function () {
+ it('sanitises a value after maxDate to maxDate', () => {
const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
- theme, value: new Date(2016, 1, 3), maxDate
+ theme, value: new Date(2016, 1, 3), maxDate,
});
expect(getDatePassedToCalendar(wrapper)).toBe(maxDate);
});
});
- describe('if both minDate and maxDate are set', function () {
+ describe('if both minDate and maxDate are set', () => {
const minDate = new Date(2016, 1, 2);
const maxDate = new Date(2016, 1, 4);
- it('sanitises value to minDate if value is before minDate', function () {
+ it('sanitises value to minDate if value is before minDate', () => {
const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
theme,
value: new Date(2016, 1, 1),
minDate,
- maxDate
+ maxDate,
});
expect(getDatePassedToCalendar(wrapper)).toBe(minDate);
});
- it('sanitises value to maxDate if value is after maxDate', function () {
+ it('sanitises value to maxDate if value is after maxDate', () => {
const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
theme,
value: new Date(2016, 1, 5),
minDate,
- maxDate
+ maxDate,
});
expect(getDatePassedToCalendar(wrapper)).toBe(maxDate);
});
- it('doesn\'t sanitise when value is between maxDate/minDate', function () {
+ it('doesn\'t sanitise when value is between maxDate/minDate', () => {
const value = new Date(2016, 1, 3);
- const wrapper = utils.shallowRenderComponent(DatePickerDialog, {theme, value, minDate, maxDate});
+ const wrapper = utils.shallowRenderComponent(DatePickerDialog, { theme, value, minDate, maxDate });
expect(getDatePassedToCalendar(wrapper)).toBe(value);
});
});
- function getDatePassedToCalendar (wrapper) {
+ function getDatePassedToCalendar(wrapper) {
return wrapper.props.children[1].props.children.props.selectedDate;
}
});
diff --git a/components/date_picker/index.js b/components/date_picker/index.js
index 9bd7ee8e..2a7f36b6 100644
--- a/components/date_picker/index.js
+++ b/components/date_picker/index.js
@@ -1,12 +1,12 @@
import { themr } from 'react-css-themr';
-import { DATE_PICKER, DIALOG } from '../identifiers.js';
-import { datePickerFactory } from './DatePicker.js';
-import datePickerDialogFactory from './DatePickerDialog.js';
-import calendarFactory from './Calendar.js';
+import { DATE_PICKER, DIALOG } from '../identifiers';
+import { datePickerFactory } from './DatePicker';
+import datePickerDialogFactory from './DatePickerDialog';
+import calendarFactory from './Calendar';
import { IconButton } from '../button';
-import Input from '../input';
-import Dialog from '../dialog';
+import { Input } from '../input';
+import { Dialog } from '../dialog';
import theme from './theme.css';
const Calendar = calendarFactory(IconButton);
diff --git a/components/dialog/Dialog.js b/components/dialog/Dialog.js
index 9e5eb279..383e657a 100644
--- a/components/dialog/Dialog.js
+++ b/components/dialog/Dialog.js
@@ -1,21 +1,22 @@
+/* eslint-disable jsx-a11y/aria-role */
import React, { PropTypes } from 'react';
import { themr } from 'react-css-themr';
import classnames from 'classnames';
-import { DIALOG } from '../identifiers.js';
-import Portal from '../hoc/Portal.js';
-import ActivableRenderer from '../hoc/ActivableRenderer.js';
-import InjectButton from '../button/Button.js';
-import InjectOverlay from '../overlay/Overlay.js';
+import { DIALOG } from '../identifiers';
+import Portal from '../hoc/Portal';
+import ActivableRenderer from '../hoc/ActivableRenderer';
+import InjectButton from '../button/Button';
+import InjectOverlay from '../overlay/Overlay';
const factory = (Overlay, Button) => {
const Dialog = (props) => {
const actions = props.actions.map((action, idx) => {
- const className = classnames(props.theme.button, {[action.className]: action.className});
- return ;
+ const className = classnames(props.theme.button, { [action.className]: action.className });
+ return ; // eslint-disable-line
});
const className = classnames([props.theme.dialog, props.theme[props.type]], {
- [props.theme.active]: props.active
+ [props.theme.active]: props.active,
}, props.className);
return (
@@ -31,15 +32,15 @@ const factory = (Overlay, Button) => {
theme={props.theme}
themeNamespace="overlay"
/>
-
);
@@ -154,30 +169,22 @@ const factory = (Input) => {
const { theme } = this.props;
const className = classnames({
[theme.selected]: item.value === this.props.value,
- [theme.disabled]: item.disabled
+ [theme.disabled]: item.disabled,
});
return (
-
+
{shortDayOfWeek}, {shortMonth} {date}
-
+
{this.props.label
- ?
+
{props.title ?
{actions.length
- ?
+ ?
: null
}
@@ -48,7 +49,11 @@ const factory = (Overlay, Button) => {
};
Dialog.propTypes = {
- actions: PropTypes.array,
+ actions: PropTypes.arrayOf(PropTypes.shape({
+ className: PropTypes.string,
+ label: PropTypes.string,
+ children: PropTypes.node,
+ })),
active: PropTypes.bool,
children: PropTypes.node,
className: PropTypes.string,
@@ -65,16 +70,16 @@ const factory = (Overlay, Button) => {
navigation: PropTypes.string,
overlay: PropTypes.string,
title: PropTypes.string,
- wrapper: PropTypes.string
+ wrapper: PropTypes.string,
}),
title: PropTypes.string,
- type: PropTypes.string
+ type: PropTypes.string,
};
Dialog.defaultProps = {
actions: [],
active: false,
- type: 'normal'
+ type: 'normal',
};
return ActivableRenderer()(Dialog);
diff --git a/components/dialog/index.js b/components/dialog/index.js
index 2720543e..13214456 100644
--- a/components/dialog/index.js
+++ b/components/dialog/index.js
@@ -1,8 +1,8 @@
import { themr } from 'react-css-themr';
-import { DIALOG } from '../identifiers.js';
-import { dialogFactory } from './Dialog.js';
-import Overlay from '../overlay';
-import Button from '../button';
+import { DIALOG } from '../identifiers';
+import { dialogFactory } from './Dialog';
+import { Overlay } from '../overlay';
+import { Button } from '../button';
import theme from './theme.css';
const Dialog = dialogFactory(Overlay, Button);
diff --git a/components/drawer/Drawer.js b/components/drawer/Drawer.js
index 940448d4..75dc8a7d 100644
--- a/components/drawer/Drawer.js
+++ b/components/drawer/Drawer.js
@@ -1,10 +1,10 @@
import React, { PropTypes } from 'react';
import { themr } from 'react-css-themr';
import classnames from 'classnames';
-import Portal from '../hoc/Portal.js';
-import { DRAWER } from '../identifiers.js';
-import ActivableRenderer from '../hoc/ActivableRenderer.js';
-import InjectOverlay from '../overlay/Overlay.js';
+import Portal from '../hoc/Portal';
+import { DRAWER } from '../identifiers';
+import ActivableRenderer from '../hoc/ActivableRenderer';
+import InjectOverlay from '../overlay/Overlay';
const factory = (Overlay) => {
const Drawer = ({
@@ -16,35 +16,32 @@ const factory = (Overlay) => {
onEscKeyDown,
theme,
type,
- withOverlay
+ withOverlay,
}) => {
const _className = classnames([theme.drawer, theme[type]], {
- [theme.active]: active
+ [theme.active]: active,
}, className);
const content = (
-
+
);
- return React.createElement(insideTree ? 'div' : Portal, {
- className: theme.wrapper,
- children: [
- withOverlay && (
- {props.title}
: null} {props.children}
@@ -202,14 +209,14 @@ const factory = (Input) => {
onClick={this.handleClick}
required={this.props.required}
readOnly
- ref={node => { this.inputNode = node && node.getWrappedInstance(); }}
+ ref={(node) => { this.inputNode = node && node.getWrappedInstance(); }}
type={template && selected ? 'hidden' : null}
theme={theme}
themeNamespace="input"
value={selected && selected.label ? selected.label : ''}
/>
- {template && selected ? this.renderTemplateValue(selected) : null}
-
diff --git a/components/dropdown/__test__/index.spec.js b/components/dropdown/__test__/index.spec.js
index f47e8cd8..a5c1558a 100644
--- a/components/dropdown/__test__/index.spec.js
+++ b/components/dropdown/__test__/index.spec.js
@@ -1,29 +1,30 @@
+/* eslint-disable */
import expect from 'expect';
import React from 'react';
import {
renderIntoDocument,
scryRenderedDOMComponentsWithClass,
- Simulate
+ Simulate,
} from 'react-addons-test-utils';
import sinon from 'sinon';
import theme from '../theme.css';
import Dropdown from '../Dropdown';
-describe('Dropdown', function () {
- describe('#renderValue', function () {
+describe('Dropdown', () => {
+ describe('#renderValue', () => {
const source = [
{ value: 'EN-gb', label: 'England' },
{ value: 'ES-es', label: 'Spain', disabled: true },
{ value: 'TH-th', label: 'Thailand', disabled: true },
- { value: 'EN-en', label: 'USA'}
+ { value: 'EN-en', label: 'USA' },
];
- it('renders dropdown item with disabled style', function () {
+ it('renders dropdown item with disabled style', () => {
const tree = renderIntoDocument(-
+ {template && selected ? this.renderTemplateValue(selected) : null}
+
-
{source.map(this.renderValue)}
{this.props.children}
;
}
- _renderOverlay () {
+ _renderOverlay() {
const overlay = this._getOverlay();
if (overlay !== null) {
this._mountOverlayTarget();
this._overlayInstance = ReactDOM.unstable_renderSubtreeIntoContainer(
- this, overlay, this._overlayTarget
+ this, overlay, this._overlayTarget,
);
} else {
this._unrenderOverlay();
@@ -69,40 +70,36 @@ class Portal extends Component {
}
}
- _unrenderOverlay () {
+ _unrenderOverlay() {
if (this._overlayTarget) {
ReactDOM.unmountComponentAtNode(this._overlayTarget);
this._overlayInstance = null;
}
}
- getMountNode () {
- return this._overlayTarget;
+ _mountOverlayTarget() {
+ if (!this._overlayTarget) {
+ this._overlayTarget = document.createElement('div');
+ this._portalContainerNode = getContainer(this.props.container);
+ this._portalContainerNode.appendChild(this._overlayTarget);
+ }
}
- getOverlayDOMNode () {
- if (!this.isMounted()) {
- throw new Error('getOverlayDOMNode(): A component must be mounted to have a DOM node.');
+ _unmountOverlayTarget() {
+ if (this._overlayTarget) {
+ this._portalContainerNode.removeChild(this._overlayTarget);
+ this._overlayTarget = null;
}
-
- if (this._overlayInstance) {
- if (this._overlayInstance.getWrappedDOMNode) {
- return this._overlayInstance.getWrappedDOMNode();
- } else {
- return ReactDOM.findDOMNode(this._overlayInstance);
- }
- }
-
- return null;
+ this._portalContainerNode = null;
}
- render () {
+ render() {
return null;
}
}
-function getContainer (container) {
+function getContainer(container) {
const _container = typeof container === 'function' ? container() : container;
return ReactDOM.findDOMNode(_container) || document.body;
}
diff --git a/components/index.js b/components/index.js
index 1c16cd77..c4305c2a 100644
--- a/components/index.js
+++ b/components/index.js
@@ -1,31 +1,31 @@
import './utils/polyfills'; // Import polyfills for IE11
+
export { overrideComponentTypeChecker } from './utils/is-component-of-type';
-export AppBar from './app_bar';
-export Autocomplete from './autocomplete';
-export Avatar from './avatar';
+export { default as AppBar } from './app_bar';
+export { default as Autocomplete } from './autocomplete';
+export { default as Avatar } from './avatar';
export * from './button';
export * from './card';
-export Chip from './chip';
-export Checkbox from './checkbox';
-export DatePicker from './date_picker';
-export Dialog from './dialog';
-export Drawer from './drawer';
-export Dropdown from './dropdown';
-export FontIcon from './font_icon';
-export Form from './form';
-export Input from './input';
+export { default as Chip } from './chip';
+export { default as Checkbox } from './checkbox';
+export { default as DatePicker } from './date_picker';
+export { default as Dialog } from './dialog';
+export { default as Drawer } from './drawer';
+export { default as Dropdown } from './dropdown';
+export { default as FontIcon } from './font_icon';
+export { default as Input } from './input';
export * from './layout';
-export Link from './link';
+export { default as Link } from './link';
export * from './list';
export * from './menu';
-export Navigation from './navigation';
-export ProgressBar from './progress_bar';
+export { default as Navigation } from './navigation';
+export { default as ProgressBar } from './progress_bar';
export * from './radio';
export Ripple from './ripple';
-export Slider from './slider';
-export Snackbar from './snackbar';
-export Switch from './switch';
-export Table from './table';
+export { default as Slider } from './slider';
+export { default as Snackbar } from './snackbar';
+export { default as Switch } from './switch';
+export { default as Table } from './table';
export * from './tabs';
export Tooltip from './tooltip';
-export TimePicker from './time_picker';
+export { default as TimePicker } from './time_picker';
diff --git a/components/input/Input.js b/components/input/Input.js
index 71d23b69..9da60a5e 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -1,57 +1,60 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
import classnames from 'classnames';
import { themr } from 'react-css-themr';
-import { INPUT } from '../identifiers.js';
-import InjectedFontIcon from '../font_icon/FontIcon.js';
+import { INPUT } from '../identifiers';
+import InjectedFontIcon from '../font_icon/FontIcon';
const factory = (FontIcon) => {
class Input extends React.Component {
static propTypes = {
- children: React.PropTypes.any,
- className: React.PropTypes.string,
- disabled: React.PropTypes.bool,
- error: React.PropTypes.oneOfType([
- React.PropTypes.string,
- React.PropTypes.node
+ children: PropTypes.node,
+ className: PropTypes.string,
+ disabled: PropTypes.bool,
+ error: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.node,
]),
- floating: React.PropTypes.bool,
- hint: React.PropTypes.oneOfType([
- React.PropTypes.string,
- React.PropTypes.node
+ floating: PropTypes.bool,
+ hint: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.node,
]),
- icon: React.PropTypes.oneOfType([
- React.PropTypes.string,
- React.PropTypes.element
+ icon: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.element,
]),
- label: React.PropTypes.oneOfType([
- React.PropTypes.string,
- React.PropTypes.node
+ label: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.node,
]),
- maxLength: React.PropTypes.number,
- multiline: React.PropTypes.bool,
- name: React.PropTypes.string,
- onBlur: React.PropTypes.func,
- onChange: React.PropTypes.func,
- onFocus: React.PropTypes.func,
- onKeyPress: React.PropTypes.func,
- required: React.PropTypes.bool,
- rows: React.PropTypes.number,
- theme: React.PropTypes.shape({
- bar: React.PropTypes.string,
- counter: React.PropTypes.string,
- disabled: React.PropTypes.string,
- error: React.PropTypes.string,
- errored: React.PropTypes.string,
- hidden: React.PropTypes.string,
- hint: React.PropTypes.string,
- icon: React.PropTypes.string,
- input: React.PropTypes.string,
- inputElement: React.PropTypes.string,
- required: React.PropTypes.string,
- withIcon: React.PropTypes.string
+ maxLength: PropTypes.number,
+ multiline: PropTypes.bool,
+ name: PropTypes.string,
+ onBlur: PropTypes.func,
+ onChange: PropTypes.func,
+ onFocus: PropTypes.func,
+ onKeyPress: PropTypes.func,
+ required: PropTypes.bool,
+ rows: PropTypes.number,
+ theme: PropTypes.shape({
+ bar: PropTypes.string,
+ counter: PropTypes.string,
+ disabled: PropTypes.string,
+ error: PropTypes.string,
+ errored: PropTypes.string,
+ hidden: PropTypes.string,
+ hint: PropTypes.string,
+ icon: PropTypes.string,
+ input: PropTypes.string,
+ inputElement: PropTypes.string,
+ required: PropTypes.string,
+ withIcon: PropTypes.string,
}),
- type: React.PropTypes.string,
- value: React.PropTypes.any
+ type: PropTypes.string,
+ value: PropTypes.oneOfType([
+ PropTypes.object,
+ PropTypes.string,
+ ]),
};
static defaultProps = {
@@ -61,17 +64,17 @@ const factory = (FontIcon) => {
floating: true,
multiline: false,
required: false,
- type: 'text'
+ type: 'text',
};
- componentDidMount () {
+ componentDidMount() {
if (this.props.multiline) {
window.addEventListener('resize', this.handleAutoresize);
this.handleAutoresize();
}
}
- componentWillReceiveProps (nextProps) {
+ componentWillReceiveProps(nextProps) {
if (!this.props.multiline && nextProps.multiline) {
window.addEventListener('resize', this.handleAutoresize);
} else if (this.props.multiline && !nextProps.multiline) {
@@ -79,12 +82,12 @@ const factory = (FontIcon) => {
}
}
- componentDidUpdate () {
+ componentDidUpdate() {
// resize the textarea, if nessesary
if (this.props.multiline) this.handleAutoresize();
}
- componentWillUnmount () {
+ componentWillUnmount() {
if (this.props.multiline) window.removeEventListener('resize', this.handleAutoresize);
}
@@ -103,7 +106,7 @@ const factory = (FontIcon) => {
};
handleAutoresize = () => {
- const element = this.refs.input;
+ const element = this.inputNode;
const rows = this.props.rows;
if (typeof rows === 'number' && !isNaN(rows)) {
@@ -135,51 +138,52 @@ const factory = (FontIcon) => {
if (!isReplacing && value.length === maxLength) {
event.preventDefault();
event.stopPropagation();
- return;
+ return undefined;
}
}
if (onKeyPress) onKeyPress(event);
+ return undefined;
};
- blur () {
- this.refs.input.blur();
+ blur() {
+ this.inputNode.blur();
}
- focus () {
- this.refs.input.focus();
+ focus() {
+ this.inputNode.focus();
}
- render () {
+ render() {
const { children, disabled, error, floating, hint, icon,
name, label: labelText, maxLength, multiline, required,
- theme, type, value, onKeyPress, rows = 1, ...others} = this.props;
+ theme, type, value, onKeyPress, rows = 1, ...others } = this.props;
const length = maxLength && value ? value.length : 0;
- const labelClassName = classnames(theme.label, {[theme.fixed]: !floating});
+ const labelClassName = classnames(theme.label, { [theme.fixed]: !floating });
const className = classnames(theme.input, {
[theme.disabled]: disabled,
[theme.errored]: error,
[theme.hidden]: type === 'hidden',
- [theme.withIcon]: icon
+ [theme.withIcon]: icon,
}, this.props.className);
const valuePresent = value !== null
&& value !== undefined
&& value !== ''
- && !(typeof value === Number && isNaN(value));
+ && !(typeof value === Number && isNaN(value)); // eslint-disable-line
const inputElementProps = {
...others,
- className: classnames(theme.inputElement, {[theme.filled]: valuePresent}),
+ className: classnames(theme.inputElement, { [theme.filled]: valuePresent }),
onChange: this.handleChange,
- ref: 'input',
+ ref: (node) => { this.inputNode = node; },
role: 'input',
name,
disabled,
required,
type,
- value
+ value,
};
if (!multiline) {
inputElementProps.maxLength = maxLength;
@@ -190,15 +194,15 @@ const factory = (FontIcon) => {
}
return (
-
+
{React.createElement(multiline ? 'textarea' : 'input', inputElementProps)}
{icon ?
diff --git a/components/layout/NavDrawer.js b/components/layout/NavDrawer.js
index 58aa1a9e..e4a36b21 100644
--- a/components/layout/NavDrawer.js
+++ b/components/layout/NavDrawer.js
@@ -4,7 +4,7 @@ import { themr } from 'react-css-themr';
import InjectDrawer from '../drawer/Drawer';
import { LAYOUT } from '../identifiers';
-const factory = Drawer => {
+const factory = (Drawer) => {
const NavDrawer = ({
active,
className,
@@ -16,7 +16,7 @@ const factory = Drawer => {
}) => {
const _className = classnames({
[theme.pinned]: pinned,
- [theme.clipped]: clipped
+ [theme.clipped]: clipped,
}, className);
return (
@@ -40,12 +40,15 @@ const factory = Drawer => {
permanentAt: PropTypes.oneOf(['sm', 'smTablet', 'md', 'lg', 'lgTablet', 'xl', 'xxl', 'xxxl']),
pinned: PropTypes.bool,
right: PropTypes.bool,
- theme: PropTypes.object
+ theme: PropTypes.shape({
+ clipped: PropTypes.string,
+ pinned: PropTypes.string,
+ }),
};
NavDrawer.defaultProps = {
className: '',
- pinned: false
+ pinned: false,
};
return NavDrawer;
diff --git a/components/layout/Panel.js b/components/layout/Panel.js
index 41785e8a..a7cbfd47 100644
--- a/components/layout/Panel.js
+++ b/components/layout/Panel.js
@@ -1,31 +1,29 @@
import React, { PropTypes } from 'react';
-import classnames from 'classnames';
+import cn from 'classnames';
import { themr } from 'react-css-themr';
-import { LAYOUT } from '../identifiers.js';
+import { LAYOUT } from '../identifiers';
-const Panel = ({ bodyScroll, children, className, theme, ...other }) => (
-
-);
+const Panel = ({ bodyScroll, children, className, theme, ...other }) => {
+ const _className = cn(theme.panel, { [theme.bodyScroll]: bodyScroll }, className);
+ return (
+
+ {children}
+
+ );
+};
Panel.propTypes = {
bodyScroll: PropTypes.bool,
- children: PropTypes.any,
+ children: PropTypes.node,
className: PropTypes.string,
theme: PropTypes.shape({
- panel: PropTypes.string
- })
+ panel: PropTypes.string,
+ }),
};
Panel.defaultProps = {
bodyScroll: true,
- className: ''
+ className: '',
};
export default themr(LAYOUT)(Panel);
diff --git a/components/layout/Sidebar.js b/components/layout/Sidebar.js
index 869c1620..006d8231 100644
--- a/components/layout/Sidebar.js
+++ b/components/layout/Sidebar.js
@@ -4,7 +4,7 @@ import { themr } from 'react-css-themr';
import InjectDrawer from '../drawer/Drawer';
import { LAYOUT } from '../identifiers';
-const factory = Drawer => {
+const factory = (Drawer) => {
const Sidebar = ({
active,
className,
@@ -16,7 +16,7 @@ const factory = Drawer => {
}) => {
const _className = classnames({
[theme.pinned]: pinned,
- [theme.clipped]: clipped
+ [theme.clipped]: clipped,
}, className);
return (
@@ -40,14 +40,17 @@ const factory = Drawer => {
clipped: PropTypes.bool,
permanentAt: PropTypes.oneOf(['sm', 'smTablet', 'md', 'lg', 'lgTablet', 'xl', 'xxl', 'xxxl']),
pinned: PropTypes.bool,
- theme: PropTypes.object,
- width: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 25, 33, 50, 66, 75, 100])
+ theme: PropTypes.shape({
+ clipped: PropTypes.string,
+ pinned: PropTypes.string,
+ }),
+ width: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 25, 33, 50, 66, 75, 100]),
};
Sidebar.defaultProps = {
className: '',
pinned: false,
- right: false
+ right: false,
};
return Sidebar;
diff --git a/components/layout/index.js b/components/layout/index.js
index 37258c11..18b9ad55 100644
--- a/components/layout/index.js
+++ b/components/layout/index.js
@@ -3,9 +3,9 @@ import { LAYOUT } from '../identifiers';
import { layoutFactory } from './Layout';
import { sidebarFactory } from './Sidebar';
import { navDrawerFactory } from './NavDrawer';
-import Panel from './Panel';
-import AppBar from '../app_bar';
-import Drawer from '../drawer';
+import { Panel } from './Panel';
+import { AppBar } from '../app_bar';
+import { Drawer } from '../drawer';
import theme from './theme.css';
const injectTheme = component => themr(LAYOUT, theme)(component);
diff --git a/components/link/Link.js b/components/link/Link.js
index f37bfc6e..382f2a8d 100644
--- a/components/link/Link.js
+++ b/components/link/Link.js
@@ -1,19 +1,19 @@
import React, { PropTypes } from 'react';
import classnames from 'classnames';
import { themr } from 'react-css-themr';
-import { LINK } from '../identifiers.js';
-import FontIcon from '../font_icon/FontIcon.js';
+import { LINK } from '../identifiers';
+import { FontIcon } from '../font_icon/FontIcon';
-const Link = ({active, children, className, count, icon, label, theme, ...others}) => {
+const Link = ({ active, children, className, count, icon, label, theme, ...others }) => {
const _className = classnames(theme.link, {
- [theme.active]: active
+ [theme.active]: active,
}, className);
return (
-
+
{icon ? -
+
-
{this.renderItems()}
); @@ -10,12 +10,12 @@ ListDivider.propTypes = { inset: PropTypes.bool, theme: PropTypes.shape({ divider: PropTypes.string, - inset: PropTypes.string - }) + inset: PropTypes.string, + }), }; ListDivider.defaultProps = { - inset: false + inset: false, }; export default themr(LIST)(ListDivider); diff --git a/components/list/ListItem.js b/components/list/ListItem.js index e9a06825..f097b5d5 100644 --- a/components/list/ListItem.js +++ b/components/list/ListItem.js @@ -1,28 +1,31 @@ import React, { Component, PropTypes } from 'react'; import { themr } from 'react-css-themr'; -import { LIST } from '../identifiers.js'; -import InjectListItemContent from './ListItemContent.js'; -import InjectListItemLayout from './ListItemLayout.js'; -import rippleFactory from '../ripple/Ripple.js'; +import { LIST } from '../identifiers'; +import InjectListItemContent from './ListItemContent'; +import InjectListItemLayout from './ListItemLayout'; +import rippleFactory from '../ripple/Ripple'; const factory = (ripple, ListItemLayout, ListItemContent) => { class ListItem extends Component { static propTypes = { - children: PropTypes.any, + children: PropTypes.node, className: PropTypes.string, disabled: PropTypes.bool, + hasRipple: PropTypes.bool, onClick: PropTypes.func, + onMouseDown: PropTypes.func, + onTouchStart: PropTypes.func, ripple: PropTypes.bool, theme: PropTypes.shape({ - listItem: PropTypes.string + listItem: PropTypes.string, }), - to: PropTypes.string + to: PropTypes.string, }; static defaultProps = { className: '', disabled: false, - ripple: false + ripple: false, }; handleClick = (event) => { @@ -31,16 +34,16 @@ const factory = (ripple, ListItemLayout, ListItemContent) => { } }; - groupChildren () { + groupChildren() { const children = { leftActions: [], rightActions: [], - ignored: [] + ignored: [], }; React.Children.forEach(this.props.children, (child, i) => { if (!React.isValidElement(child)) { - return; + return undefined; } const { listItemIgnore, ...rest } = child.props; @@ -48,23 +51,34 @@ const factory = (ripple, ListItemLayout, ListItemContent) => { if (listItemIgnore) { children.ignored.push(strippedChild); - return; + return undefined; } if (child.type === ListItemContent) { children.itemContent = strippedChild; - return; + return undefined; } const bucket = children.itemContent ? 'rightActions' : 'leftActions'; - children[bucket].push({...strippedChild, key: i}); + children[bucket].push({ ...strippedChild, key: i }); + return undefined; }); return children; } - render () { - const {className, onMouseDown, onTouchStart, to, onClick, ripple: hasRipple, theme, ...other} = this.props; //eslint-disable-line no-unused-vars + render() { + const { + className, + hasRipple, // eslint-disable-line no-unused-vars + onClick, // eslint-disable-line no-unused-vars + onMouseDown, // eslint-disable-line no-unused-vars + onTouchStart, // eslint-disable-line no-unused-vars + ripple: + theme, + to, + ...other + } = this.props; const children = this.groupChildren(); - const content =