diff --git a/.babelrc b/.babelrc
index e0e22ee7..99113d59 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,5 +1,5 @@
{
- "stage": 2,
+ "stage": 1,
"optional": ["es7.classProperties"],
"env": {
"development": {
diff --git a/.eslintrc b/.eslintrc
index deff2827..5b38b7a8 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -210,9 +210,30 @@
"yoda": [2, "never", {
"exceptRange": true
}],
- "react/jsx-uses-react": [2],
- "react/jsx-uses-vars": [2],
- "react/react-in-jsx-scope": [2],
- "babel/object-shorthand": [2]
+ "babel/object-shorthand": [2],
+ "react/display-name": 0,
+ "react/jsx-boolean-value": 1,
+ "react/jsx-closing-bracket-location": 0,
+ "react/jsx-curly-spacing": 1,
+ "react/jsx-max-props-per-line": 0,
+ "react/jsx-indent-props": 0,
+ "react/jsx-no-duplicate-props": 1,
+ "react/jsx-no-undef": 1,
+ "react/jsx-pascal-case": 1,
+ "react/jsx-sort-prop-types": 1,
+ "react/jsx-sort-props": 0,
+ "react/jsx-uses-react": 1,
+ "react/jsx-uses-vars": 1,
+ "react/no-danger": 0,
+ "react/no-did-mount-set-state": 0,
+ "react/no-did-update-set-state": 1,
+ "react/no-multi-comp": 1,
+ "react/no-unknown-property": 1,
+ "react/prop-types": [2, {"ignore": ["onMouseDown", "onTouchStart"]}],
+ "react/react-in-jsx-scope": 1,
+ "react/require-extension": 1,
+ "react/self-closing-comp": 1,
+ "react/sort-comp": 1,
+ "react/wrap-multilines": 1
}
}
diff --git a/components/app/index.jsx b/components/app/App.jsx
similarity index 92%
rename from components/app/index.jsx
rename to components/app/App.jsx
index ca8a1166..e0227326 100644
--- a/components/app/index.jsx
+++ b/components/app/App.jsx
@@ -3,6 +3,7 @@ import style from './style';
class App extends React.Component {
static propTypes = {
+ children: React.PropTypes.node,
className: React.PropTypes.string
};
diff --git a/components/app/index.js b/components/app/index.js
new file mode 100644
index 00000000..efe99548
--- /dev/null
+++ b/components/app/index.js
@@ -0,0 +1 @@
+export default from './App.jsx';
diff --git a/components/app_bar/index.jsx b/components/app_bar/AppBar.jsx
similarity index 94%
rename from components/app_bar/index.jsx
rename to components/app_bar/AppBar.jsx
index f53601fe..95d2832e 100644
--- a/components/app_bar/index.jsx
+++ b/components/app_bar/AppBar.jsx
@@ -15,6 +15,7 @@ const AppBar = (props) => {
};
AppBar.propTypes = {
+ children: React.PropTypes.node,
className: React.PropTypes.string,
fixed: React.PropTypes.bool,
flat: React.PropTypes.bool
diff --git a/components/app_bar/index.js b/components/app_bar/index.js
new file mode 100644
index 00000000..f3e152c0
--- /dev/null
+++ b/components/app_bar/index.js
@@ -0,0 +1 @@
+export default from './AppBar.jsx';
diff --git a/components/autocomplete/index.jsx b/components/autocomplete/Autocomplete.jsx
similarity index 95%
rename from components/autocomplete/index.jsx
rename to components/autocomplete/Autocomplete.jsx
index 604c20f2..7a6bcbf4 100644
--- a/components/autocomplete/index.jsx
+++ b/components/autocomplete/Autocomplete.jsx
@@ -87,7 +87,7 @@ class Autocomplete extends React.Component {
if (this.props.direction === 'auto') {
const client = ReactDOM.findDOMNode(this.refs.input).getBoundingClientRect();
const screen_height = window.innerHeight || document.documentElement.offsetHeight;
- const up = this.props.auto ? client.top > ((screen_height / 2) + client.height) : false;
+ const up = client.top > ((screen_height / 2) + client.height);
return up ? 'up' : 'down';
} else {
return this.props.direction;
@@ -179,8 +179,8 @@ class Autocomplete extends React.Component {
return (
- { this.props.label ? : null }
- { this.renderSelected() }
+ {this.props.label ? : null}
+ {this.renderSelected()}
- { this.renderSuggestions() }
+ {this.renderSuggestions()}
);
}
diff --git a/components/autocomplete/index.js b/components/autocomplete/index.js
new file mode 100644
index 00000000..cd659a51
--- /dev/null
+++ b/components/autocomplete/index.js
@@ -0,0 +1 @@
+export default from './Autocomplete.jsx';
diff --git a/components/button/index.jsx b/components/button/Button.jsx
similarity index 97%
rename from components/button/index.jsx
rename to components/button/Button.jsx
index e4dd1706..286710c9 100644
--- a/components/button/index.jsx
+++ b/components/button/Button.jsx
@@ -8,10 +8,12 @@ import events from '../utils/events';
class Button extends React.Component {
static propTypes = {
accent: React.PropTypes.bool,
+ children: React.PropTypes.node,
className: React.PropTypes.string,
disabled: React.PropTypes.bool,
flat: React.PropTypes.bool,
floating: React.PropTypes.bool,
+ href: React.PropTypes.string,
icon: React.PropTypes.string,
label: React.PropTypes.string,
loading: React.PropTypes.bool,
diff --git a/components/button/index.js b/components/button/index.js
new file mode 100644
index 00000000..7a4ebccc
--- /dev/null
+++ b/components/button/index.js
@@ -0,0 +1 @@
+export default from './Button.jsx';
diff --git a/components/card/index.jsx b/components/card/Card.jsx
similarity index 82%
rename from components/card/index.jsx
rename to components/card/Card.jsx
index 65fbfd96..c06c439d 100644
--- a/components/card/index.jsx
+++ b/components/card/Card.jsx
@@ -11,6 +11,7 @@ class Card extends React.Component {
image: React.PropTypes.string,
loading: React.PropTypes.bool,
onClick: React.PropTypes.func,
+ subtitle: React.PropTypes.string,
text: React.PropTypes.string,
title: React.PropTypes.string,
type: React.PropTypes.oneOf(['wide', 'event', 'image'])
@@ -49,9 +50,9 @@ class Card extends React.Component {
if (this.props.title || this.props.image) {
return (
- { this.props.title ? {this.props.title}
: null }
- { this.props.subtitle ? {this.props.subtitle} : null }
- { this.props.color ? : null }
+ {this.props.title ? {this.props.title}
: null}
+ {this.props.subtitle ? {this.props.subtitle} : null}
+ {this.props.color ? : null}
);
}
@@ -72,9 +73,9 @@ class Card extends React.Component {
className={className}
onMouseDown={this.handleMouseDown}
>
- { this.renderTitle() }
- { this.props.text ? {this.props.text}
: null }
- { this.renderActions() }
+ {this.renderTitle()}
+ {this.props.text ? {this.props.text}
: null}
+ {this.renderActions()}
- { this.props.label ? {this.props.label} : null }
+ {this.props.label ? {this.props.label} : null}
);
}
-
- blur () {
- this.refs.input.blur();
- }
-
- focus () {
- this.refs.input.focus();
- }
}
export default Checkbox;
diff --git a/components/checkbox/index.js b/components/checkbox/index.js
new file mode 100644
index 00000000..626810b3
--- /dev/null
+++ b/components/checkbox/index.js
@@ -0,0 +1 @@
+export default from './Checkbox.jsx';
diff --git a/components/date_picker/index.jsx b/components/date_picker/DatePicker.jsx
similarity index 95%
rename from components/date_picker/index.jsx
rename to components/date_picker/DatePicker.jsx
index 82a6b07a..a6096754 100644
--- a/components/date_picker/index.jsx
+++ b/components/date_picker/DatePicker.jsx
@@ -1,5 +1,5 @@
import React from 'react';
-import CalendarDialog from './dialog';
+import CalendarDialog from './DatePickerDialog';
import events from '../utils/events';
import Input from '../input';
import style from './style';
@@ -42,7 +42,7 @@ class DatePicker extends React.Component {
className={style.input}
onMouseDown={this.handleInputMouseDown}
label={this.props.label}
- readOnly={true}
+ readOnly
type='text'
value={date}
/>
diff --git a/components/date_picker/dialog.jsx b/components/date_picker/DatePickerDialog.jsx
similarity index 98%
rename from components/date_picker/dialog.jsx
rename to components/date_picker/DatePickerDialog.jsx
index 6df5cfa5..ee6f0845 100644
--- a/components/date_picker/dialog.jsx
+++ b/components/date_picker/DatePickerDialog.jsx
@@ -1,6 +1,6 @@
import React from 'react';
import Calendar from './calendar';
-import Dialog from '../dialog';
+import Dialog from '../Dialog';
import style from './style';
import time from '../utils/time';
diff --git a/components/date_picker/calendar/index.jsx b/components/date_picker/calendar/Calendar.jsx
similarity index 88%
rename from components/date_picker/calendar/index.jsx
rename to components/date_picker/calendar/Calendar.jsx
index deaded3f..5b8cf104 100644
--- a/components/date_picker/calendar/index.jsx
+++ b/components/date_picker/calendar/Calendar.jsx
@@ -1,9 +1,9 @@
import React from 'react';
-import CSSTransitionGroup from 'react-addons-css-transition-group';
+import CssTransitionGroup from 'react-addons-css-transition-group';
import { SlideLeft, SlideRight } from '../../animations';
import FontIcon from '../../font_icon';
import Ripple from '../../ripple';
-import Month from './month';
+import Month from './Month';
import time from '../../utils/time';
import utils from '../../utils/utils';
import style from './style';
@@ -77,13 +77,13 @@ class Calendar extends React.Component {
props.ref = 'activeYear';
}
- return { year };
+ return {year};
}
renderYears () {
return (
- { utils.range(1900, 2100).map((i) => { return this.renderYear(i); })}
+ {utils.range(1900, 2100).map((i) => { return this.renderYear(i); })}
);
}
@@ -98,7 +98,7 @@ class Calendar extends React.Component {
-
+
-
+
);
}
@@ -114,7 +114,7 @@ class Calendar extends React.Component {
render () {
return (
- { this.props.display === 'months' ? this.renderMonths() : this.renderYears() }
+ {this.props.display === 'months' ? this.renderMonths() : this.renderYears()}
);
}
diff --git a/components/date_picker/calendar/index.js b/components/date_picker/calendar/index.js
new file mode 100644
index 00000000..0efaa9a6
--- /dev/null
+++ b/components/date_picker/calendar/index.js
@@ -0,0 +1 @@
+export default from './Calendar.jsx';
diff --git a/components/date_picker/calendar/month.jsx b/components/date_picker/calendar/month.jsx
index 091ae187..ac75eaa2 100644
--- a/components/date_picker/calendar/month.jsx
+++ b/components/date_picker/calendar/month.jsx
@@ -1,7 +1,7 @@
import React from 'react';
import time from '../../utils/time';
import utils from '../../utils/utils';
-import Day from './day';
+import Day from './Day';
import style from './style';
class Month extends React.Component {
@@ -19,7 +19,7 @@ class Month extends React.Component {
renderWeeks () {
return utils.range(0, 7).map(i => {
- return { time.getFullDayOfWeek(i).charAt(0) };
+ return {time.getFullDayOfWeek(i).charAt(0)};
});
}
@@ -45,10 +45,10 @@ class Month extends React.Component {
return (
- { time.getFullMonth(this.props.viewDate)} { this.props.viewDate.getFullYear() }
+ {time.getFullMonth(this.props.viewDate)} {this.props.viewDate.getFullYear()}
-
{ this.renderWeeks() }
-
{ this.renderDays() }
+
{this.renderWeeks()}
+
{this.renderDays()}
);
}
diff --git a/components/date_picker/index.js b/components/date_picker/index.js
new file mode 100644
index 00000000..38f9dabe
--- /dev/null
+++ b/components/date_picker/index.js
@@ -0,0 +1 @@
+export default from './DatePicker.jsx';
diff --git a/components/dialog/index.jsx b/components/dialog/Dialog.jsx
similarity index 85%
rename from components/dialog/index.jsx
rename to components/dialog/Dialog.jsx
index 921820e0..8a4cede4 100644
--- a/components/dialog/index.jsx
+++ b/components/dialog/Dialog.jsx
@@ -1,7 +1,7 @@
import React from 'react';
import Button from '../button';
import Overlay from '../overlay';
-import style from './style';
+import style from './style.scss';
const Dialog = (props) => {
const actions = props.actions.map((action, idx) => {
@@ -18,11 +18,11 @@ const Dialog = (props) => {
- { props.title ? {props.title}
: null }
- { props.children }
+ {props.title ? {props.title}
: null}
+ {props.children}
@@ -32,6 +32,7 @@ const Dialog = (props) => {
Dialog.propTypes = {
actions: React.PropTypes.array,
active: React.PropTypes.bool,
+ children: React.PropTypes.node,
className: React.PropTypes.string,
onOverlayClick: React.PropTypes.func,
title: React.PropTypes.string,
diff --git a/components/dialog/index.js b/components/dialog/index.js
new file mode 100644
index 00000000..074f9e1f
--- /dev/null
+++ b/components/dialog/index.js
@@ -0,0 +1 @@
+export default from './Dialog.jsx';
diff --git a/components/drawer/index.jsx b/components/drawer/Drawer.jsx
similarity index 92%
rename from components/drawer/index.jsx
rename to components/drawer/Drawer.jsx
index 83ce1489..ec74071f 100644
--- a/components/drawer/index.jsx
+++ b/components/drawer/Drawer.jsx
@@ -11,7 +11,7 @@ const Drawer = (props) => {
@@ -20,6 +20,7 @@ const Drawer = (props) => {
Drawer.propTypes = {
active: React.PropTypes.bool,
+ children: React.PropTypes.node,
className: React.PropTypes.string,
onOverlayClick: React.PropTypes.func,
type: React.PropTypes.oneOf(['left', 'right'])
diff --git a/components/drawer/index.js b/components/drawer/index.js
new file mode 100644
index 00000000..631e1dd3
--- /dev/null
+++ b/components/drawer/index.js
@@ -0,0 +1 @@
+export default from './Drawer.jsx';
diff --git a/components/dropdown/index.jsx b/components/dropdown/Dropdown.jsx
similarity index 86%
rename from components/dropdown/index.jsx
rename to components/dropdown/Dropdown.jsx
index 8e2c929c..86638528 100644
--- a/components/dropdown/index.jsx
+++ b/components/dropdown/Dropdown.jsx
@@ -52,7 +52,7 @@ class Dropdown extends React.Component {
const className = item.value === this.props.value ? style.selected : null;
return (
- { this.props.template ? this.props.template(item) : item.label }
+ {this.props.template ? this.props.template(item) : item.label}
);
}
@@ -67,14 +67,14 @@ class Dropdown extends React.Component {
return (
- { this.props.label ?
: null }
+ {this.props.label ?
: null}
- { this.props.source.map(this.renderItem.bind(this)) }
+ {this.props.source.map(this.renderItem.bind(this))}
- { this.props.template ? this.props.template(selected) : {selected.label} }
+ {this.props.template ? this.props.template(selected) : {selected.label}}
);
diff --git a/components/dropdown/index.js b/components/dropdown/index.js
new file mode 100644
index 00000000..dccf96d9
--- /dev/null
+++ b/components/dropdown/index.js
@@ -0,0 +1 @@
+export default from './Dropdown.jsx';
diff --git a/components/font_icon/index.jsx b/components/font_icon/FontIcon.jsx
similarity index 93%
rename from components/font_icon/index.jsx
rename to components/font_icon/FontIcon.jsx
index ab9acedd..3e7e6fdf 100644
--- a/components/font_icon/index.jsx
+++ b/components/font_icon/FontIcon.jsx
@@ -12,6 +12,7 @@ const FontIcon = props => {
};
FontIcon.propTypes = {
+ children: React.PropTypes.any,
className: React.PropTypes.string,
value: React.PropTypes.string
};
diff --git a/components/font_icon/index.js b/components/font_icon/index.js
new file mode 100644
index 00000000..f4a63e7e
--- /dev/null
+++ b/components/font_icon/index.js
@@ -0,0 +1 @@
+export default from './FontIcon.jsx';
diff --git a/components/form/index.jsx b/components/form/Form.jsx
similarity index 98%
rename from components/form/index.jsx
rename to components/form/Form.jsx
index 1de528dc..9cdd3cca 100644
--- a/components/form/index.jsx
+++ b/components/form/Form.jsx
@@ -14,6 +14,7 @@ import TimePicker from '../time_picker';
class Form extends React.Component {
static propTypes = {
attributes: React.PropTypes.array,
+ children: React.PropTypes.node,
className: React.PropTypes.string,
onChange: React.PropTypes.func,
onError: React.PropTypes.func,
@@ -69,45 +70,6 @@ class Form extends React.Component {
}
};
- render () {
- const className = `${style.root} ${this.props.className}`;
- const attributes = this.state.attributes.map((attribute, index) => {
- if (attribute.type === 'autocomplete') {
- return ;
- } else if (attribute.type === 'submit') {
- return ;
- } else if (attribute.type === 'checkbox') {
- return ;
- } else if (attribute.type === 'date_picker') {
- return ;
- } else if (attribute.type === 'dropdown') {
- return ;
- } else if (attribute.type === 'radio_group') {
- return ;
- } else if (attribute.type === 'slider') {
- return ;
- } else if (attribute.type === 'switch') {
- return ;
- } else if (attribute.type === 'time_picker') {
- return ;
- } else {
- return ;
- }
- });
-
- return (
-
- );
- }
-
storage (props, value) {
const key = `react-toolbox-form-${props.storage}`;
if (value) {
@@ -160,6 +122,45 @@ class Form extends React.Component {
}
}
}
+
+ render () {
+ const className = `${style.root} ${this.props.className}`;
+ const attributes = this.state.attributes.map((attribute, index) => {
+ if (attribute.type === 'autocomplete') {
+ return ;
+ } else if (attribute.type === 'submit') {
+ return ;
+ } else if (attribute.type === 'checkbox') {
+ return ;
+ } else if (attribute.type === 'date_picker') {
+ return ;
+ } else if (attribute.type === 'dropdown') {
+ return ;
+ } else if (attribute.type === 'radio_group') {
+ return ;
+ } else if (attribute.type === 'slider') {
+ return ;
+ } else if (attribute.type === 'switch') {
+ return ;
+ } else if (attribute.type === 'time_picker') {
+ return ;
+ } else {
+ return ;
+ }
+ });
+
+ return (
+
+ );
+ }
}
export default Form;
diff --git a/components/form/index.js b/components/form/index.js
new file mode 100644
index 00000000..a6a1f3a0
--- /dev/null
+++ b/components/form/index.js
@@ -0,0 +1 @@
+export default from './Form.jsx';
diff --git a/components/input/index.jsx b/components/input/Input.jsx
similarity index 87%
rename from components/input/index.jsx
rename to components/input/Input.jsx
index 5d7592d8..e2ee34a6 100644
--- a/components/input/index.jsx
+++ b/components/input/Input.jsx
@@ -54,6 +54,14 @@ class Input extends React.Component {
if (error || counter) return {error}{counter};
}
+ blur () {
+ this.refs.input.blur();
+ }
+
+ focus () {
+ this.refs.input.focus();
+ }
+
render () {
const className = classNames({
[style.root]: true,
@@ -71,23 +79,15 @@ class Input extends React.Component {
return (
- { this.renderInput() }
- { this.props.icon ? : null }
+ {this.renderInput()}
+ {this.props.icon ? : null}
- { this.props.label ? : null }
- { this.renderUnderline() }
- { this.props.tooltip ? : null }
+ {this.props.label ? : null}
+ {this.renderUnderline()}
+ {this.props.tooltip ? : null}
);
}
-
- blur () {
- this.refs.input.blur();
- }
-
- focus () {
- this.refs.input.focus();
- }
}
export default Input;
diff --git a/components/input/index.js b/components/input/index.js
new file mode 100644
index 00000000..afc98883
--- /dev/null
+++ b/components/input/index.js
@@ -0,0 +1 @@
+export default from './Input.jsx';
diff --git a/components/link/index.jsx b/components/link/Link.jsx
similarity index 70%
rename from components/link/index.jsx
rename to components/link/Link.jsx
index b659aa21..8dcae78c 100644
--- a/components/link/index.jsx
+++ b/components/link/Link.jsx
@@ -12,9 +12,9 @@ const Link = (props) => {
data-react-toolbox='link'
className={className}
>
- { props.icon ? : null }
- { props.label ? {props.label} : null }
- { props.count && parseInt(props.count) !== 0 ? {props.count} : null}
+ {props.icon ? : null}
+ {props.label ? {props.label} : null}
+ {props.count && parseInt(props.count) !== 0 ? {props.count} : null}
);
};
diff --git a/components/link/index.js b/components/link/index.js
new file mode 100644
index 00000000..28340297
--- /dev/null
+++ b/components/link/index.js
@@ -0,0 +1 @@
+export default from './Link.jsx';
diff --git a/components/list/checkbox.jsx b/components/list/checkbox.jsx
index c0723ed5..2e3eabf6 100644
--- a/components/list/checkbox.jsx
+++ b/components/list/checkbox.jsx
@@ -1,6 +1,6 @@
import React from 'react';
import Checkbox from '../checkbox';
-import ListItemContent from './content';
+import ListItemContent from './Content';
import style from './style';
const ListCheckbox = (props) => {
diff --git a/components/list/content.jsx b/components/list/content.jsx
index 1e4d5781..6fdd5cf5 100644
--- a/components/list/content.jsx
+++ b/components/list/content.jsx
@@ -1,7 +1,7 @@
import React from 'react';
import style from './style';
-const ListItemContent = ({ caption, legend }) => (
+const ListItemContent = ({caption, legend}) => (
{caption}
{legend}
diff --git a/components/list/index.jsx b/components/list/index.jsx
index 28a413ad..f8a57e7c 100644
--- a/components/list/index.jsx
+++ b/components/list/index.jsx
@@ -1,7 +1,5 @@
-import List from './list';
-import ListItem from './item';
-import ListDivider from './divider';
-import ListCheckbox from './checkbox';
-import ListSubHeader from './subheader';
-
-export default {List, ListItem, ListDivider, ListCheckbox, ListSubHeader};
+export List from './List';
+export ListItem from './Item';
+export ListDivider from './Divider';
+export ListCheckbox from './Checkbox';
+export ListSubHeader from './Subheader';
diff --git a/components/list/item.jsx b/components/list/item.jsx
index cd8dc9a9..c5a259c6 100644
--- a/components/list/item.jsx
+++ b/components/list/item.jsx
@@ -1,6 +1,6 @@
import React from 'react';
import FontIcon from '../font_icon';
-import ListItemContent from './content';
+import ListItemContent from './Content';
import Ripple from '../ripple';
import style from './style';
@@ -8,9 +8,11 @@ class ListItem extends React.Component {
static propTypes = {
avatar: React.PropTypes.string,
caption: React.PropTypes.string.isRequired,
+ className: React.PropTypes.string,
disabled: React.PropTypes.bool,
leftIcon: React.PropTypes.string,
legend: React.PropTypes.string,
+ onClick: React.PropTypes.func,
rightIcon: React.PropTypes.string,
ripple: React.PropTypes.bool,
selectable: React.PropTypes.bool,
@@ -44,11 +46,11 @@ class ListItem extends React.Component {
return (
- { this.props.leftIcon ? : null }
- { this.props.avatar ?
: null }
+ {this.props.leftIcon ? : null}
+ {this.props.avatar ?
: null}
- { this.props.ripple ? : null }
- { this.props.rightIcon ? : null }
+ {this.props.ripple ? : null}
+ {this.props.rightIcon ? : null}
);
}
@@ -56,7 +58,7 @@ class ListItem extends React.Component {
render () {
return (
- { this.props.to ? {this.renderContent()} : this.renderContent() }
+ {this.props.to ? {this.renderContent()} : this.renderContent()}
);
}
diff --git a/components/list/list.jsx b/components/list/list.jsx
index d020999d..4e44bdeb 100644
--- a/components/list/list.jsx
+++ b/components/list/list.jsx
@@ -1,9 +1,10 @@
import React from 'react';
-import ListItem from './item';
+import ListItem from './Item';
import style from './style';
class List extends React.Component {
static propTypes = {
+ children: React.PropTypes.node,
className: React.PropTypes.string,
ripple: React.PropTypes.bool,
selectable: React.PropTypes.bool
diff --git a/components/list/subheader.jsx b/components/list/subheader.jsx
index a5fcd342..690f337b 100644
--- a/components/list/subheader.jsx
+++ b/components/list/subheader.jsx
@@ -8,7 +8,8 @@ const ListSubHeader = (props) => {
};
ListSubHeader.propTypes = {
- caption: React.PropTypes.string
+ caption: React.PropTypes.string,
+ className: React.PropTypes.string
};
export default ListSubHeader;
diff --git a/components/menu/icon_menu.jsx b/components/menu/IconMenu.jsx
similarity index 89%
rename from components/menu/icon_menu.jsx
rename to components/menu/IconMenu.jsx
index cf7c0371..0d875a3e 100644
--- a/components/menu/icon_menu.jsx
+++ b/components/menu/IconMenu.jsx
@@ -1,19 +1,20 @@
import React from 'react';
import FontIcon from '../font_icon';
-import Menu from './menu';
+import Menu from './Menu';
import Ripple from '../ripple';
import style from './style.icon_menu';
class IconMenu extends React.Component {
static propTypes = {
+ children: React.PropTypes.node,
className: React.PropTypes.string,
icon: React.PropTypes.string,
iconRipple: React.PropTypes.bool,
menuRipple: React.PropTypes.bool,
onClick: React.PropTypes.func,
onHide: React.PropTypes.func,
- onShow: React.PropTypes.func,
onSelect: React.PropTypes.func,
+ onShow: React.PropTypes.func,
position: React.PropTypes.string,
selectable: React.PropTypes.bool,
selected: React.PropTypes.any
@@ -61,9 +62,9 @@ class IconMenu extends React.Component {
selectable={this.props.selectable}
selected={this.props.selected}
>
- { this.props.children }
+ {this.props.children}
- { this.props.iconRipple ? : null }
+ {this.props.iconRipple ? : null}
);
}
diff --git a/components/menu/menu_divider.jsx b/components/menu/MenuDivider.jsx
similarity index 100%
rename from components/menu/menu_divider.jsx
rename to components/menu/MenuDivider.jsx
diff --git a/components/menu/menu_item.jsx b/components/menu/MenuItem.jsx
similarity index 76%
rename from components/menu/menu_item.jsx
rename to components/menu/MenuItem.jsx
index a827d81d..221ab111 100644
--- a/components/menu/menu_item.jsx
+++ b/components/menu/MenuItem.jsx
@@ -9,9 +9,10 @@ class MenuItem extends React.Component {
className: React.PropTypes.string,
disabled: React.PropTypes.bool,
icon: React.PropTypes.string,
+ onClick: React.PropTypes.func,
ripple: React.PropTypes.bool,
- shortcut: React.PropTypes.string,
- selected: React.PropTypes.bool
+ selected: React.PropTypes.bool,
+ shortcut: React.PropTypes.string
};
static defaultProps = {
@@ -46,10 +47,10 @@ class MenuItem extends React.Component {
onClick={this.handleClick}
onMouseDown={this.handleMouseDown}
>
- { this.props.icon ? : null }
+ {this.props.icon ? : null}
{this.props.caption}
- { this.props.shortcut ? {this.props.shortcut} : null }
- { this.props.ripple ? : null }
+ {this.props.shortcut ? {this.props.shortcut} : null}
+ {this.props.ripple ? : null}
);
}
diff --git a/components/menu/index.jsx b/components/menu/index.jsx
index d26b5a90..779e68d1 100644
--- a/components/menu/index.jsx
+++ b/components/menu/index.jsx
@@ -1,11 +1,4 @@
-import Menu from './menu';
-import MenuItem from './menu_item';
-import MenuDivider from './menu_divider';
-import IconMenu from './icon_menu';
-
-export default {
- Menu,
- MenuItem,
- MenuDivider,
- IconMenu
-};
+export Menu from './Menu';
+export MenuItem from './MenuItem';
+export MenuDivider from './MenuDivider';
+export IconMenu from './IconMenu';
diff --git a/components/menu/menu.jsx b/components/menu/menu.jsx
index 9157067b..8f1507ec 100644
--- a/components/menu/menu.jsx
+++ b/components/menu/menu.jsx
@@ -1,6 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import MenuItem from './menu_item';
+import MenuItem from './MenuItem';
import { events, utils } from '../utils';
import style from './style.menu';
@@ -16,6 +16,7 @@ const POSITION = {
class Menu extends React.Component {
static propTypes = {
active: React.PropTypes.bool,
+ children: React.PropTypes.node,
className: React.PropTypes.string,
onHide: React.PropTypes.func,
onSelect: React.PropTypes.func,
@@ -46,15 +47,6 @@ class Menu extends React.Component {
this.setState({ position, width, height });
}
- componentDidUpdate (prevProps, prevState) {
- if (prevState.active && !this.state.active) {
- if (this.props.onHide) this.props.onHide();
- events.removeEventsFromDocument({click: this.handleDocumentClick});
- } else if (!prevState.active && this.state.active && this.props.onShow) {
- this.props.onShow();
- }
- }
-
componentWillReceiveProps (nextProps) {
if (this.props.position !== nextProps.position) {
const position = nextProps.position === POSITION.AUTO ? this.calculatePosition() : nextProps.position;
@@ -62,12 +54,6 @@ class Menu extends React.Component {
}
}
- componentWillUpdate (prevState, nextState) {
- if (!prevState.active && nextState.active) {
- events.addEventsToDocument({click: this.handleDocumentClick});
- }
- }
-
shouldComponentUpdate (nextProps, nextState) {
if (!this.state.active && nextState.active && this.props.position === POSITION.AUTO) {
const position = this.calculatePosition();
@@ -81,6 +67,21 @@ class Menu extends React.Component {
return true;
}
+ componentWillUpdate (prevState, nextState) {
+ if (!prevState.active && nextState.active) {
+ events.addEventsToDocument({click: this.handleDocumentClick});
+ }
+ }
+
+ componentDidUpdate (prevProps, prevState) {
+ if (prevState.active && !this.state.active) {
+ if (this.props.onHide) this.props.onHide();
+ events.removeEventsFromDocument({click: this.handleDocumentClick});
+ } else if (!prevState.active && this.state.active && this.props.onShow) {
+ this.props.onShow();
+ }
+ }
+
handleDocumentClick = (event) => {
if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
this.setState({active: false, rippled: false});
@@ -149,21 +150,13 @@ class Menu extends React.Component {
return (
- { this.props.outline ?
: null }
+ {this.props.outline ?
: null}
- { this.renderItems() }
+ {this.renderItems()}
);
}
-
- show () {
- this.setState({active: true});
- }
-
- hide () {
- this.setState({active: false});
- }
}
export default Menu;