Rename some components to new naming approach
parent
1c822d2234
commit
1611b491fa
2
.babelrc
2
.babelrc
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"stage": 2,
|
"stage": 1,
|
||||||
"optional": ["es7.classProperties"],
|
"optional": ["es7.classProperties"],
|
||||||
"env": {
|
"env": {
|
||||||
"development": {
|
"development": {
|
||||||
|
|
29
.eslintrc
29
.eslintrc
|
@ -210,9 +210,30 @@
|
||||||
"yoda": [2, "never", {
|
"yoda": [2, "never", {
|
||||||
"exceptRange": true
|
"exceptRange": true
|
||||||
}],
|
}],
|
||||||
"react/jsx-uses-react": [2],
|
"babel/object-shorthand": [2],
|
||||||
"react/jsx-uses-vars": [2],
|
"react/display-name": 0,
|
||||||
"react/react-in-jsx-scope": [2],
|
"react/jsx-boolean-value": 1,
|
||||||
"babel/object-shorthand": [2]
|
"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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,6 +3,7 @@ import style from './style';
|
||||||
|
|
||||||
class App extends React.Component {
|
class App extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
children: React.PropTypes.node,
|
||||||
className: React.PropTypes.string
|
className: React.PropTypes.string
|
||||||
};
|
};
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
export default from './App.jsx';
|
|
@ -15,6 +15,7 @@ const AppBar = (props) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
AppBar.propTypes = {
|
AppBar.propTypes = {
|
||||||
|
children: React.PropTypes.node,
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
fixed: React.PropTypes.bool,
|
fixed: React.PropTypes.bool,
|
||||||
flat: React.PropTypes.bool
|
flat: React.PropTypes.bool
|
|
@ -0,0 +1 @@
|
||||||
|
export default from './AppBar.jsx';
|
|
@ -87,7 +87,7 @@ class Autocomplete extends React.Component {
|
||||||
if (this.props.direction === 'auto') {
|
if (this.props.direction === 'auto') {
|
||||||
const client = ReactDOM.findDOMNode(this.refs.input).getBoundingClientRect();
|
const client = ReactDOM.findDOMNode(this.refs.input).getBoundingClientRect();
|
||||||
const screen_height = window.innerHeight || document.documentElement.offsetHeight;
|
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';
|
return up ? 'up' : 'down';
|
||||||
} else {
|
} else {
|
||||||
return this.props.direction;
|
return this.props.direction;
|
||||||
|
@ -179,8 +179,8 @@ class Autocomplete extends React.Component {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div data-react-toolbox='autocomplete' className={className}>
|
<div data-react-toolbox='autocomplete' className={className}>
|
||||||
{ this.props.label ? <label className={style.label}>{this.props.label}</label> : null }
|
{this.props.label ? <label className={style.label}>{this.props.label}</label> : null}
|
||||||
{ this.renderSelected() }
|
{this.renderSelected()}
|
||||||
<Input
|
<Input
|
||||||
ref='input'
|
ref='input'
|
||||||
{...this.props}
|
{...this.props}
|
||||||
|
@ -192,7 +192,7 @@ class Autocomplete extends React.Component {
|
||||||
onKeyUp={this.handleQueryKeyUp}
|
onKeyUp={this.handleQueryKeyUp}
|
||||||
value={this.state.query}
|
value={this.state.query}
|
||||||
/>
|
/>
|
||||||
{ this.renderSuggestions() }
|
{this.renderSuggestions()}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
|
@ -0,0 +1 @@
|
||||||
|
export default from './Autocomplete.jsx';
|
|
@ -8,10 +8,12 @@ import events from '../utils/events';
|
||||||
class Button extends React.Component {
|
class Button extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
accent: React.PropTypes.bool,
|
accent: React.PropTypes.bool,
|
||||||
|
children: React.PropTypes.node,
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
disabled: React.PropTypes.bool,
|
disabled: React.PropTypes.bool,
|
||||||
flat: React.PropTypes.bool,
|
flat: React.PropTypes.bool,
|
||||||
floating: React.PropTypes.bool,
|
floating: React.PropTypes.bool,
|
||||||
|
href: React.PropTypes.string,
|
||||||
icon: React.PropTypes.string,
|
icon: React.PropTypes.string,
|
||||||
label: React.PropTypes.string,
|
label: React.PropTypes.string,
|
||||||
loading: React.PropTypes.bool,
|
loading: React.PropTypes.bool,
|
|
@ -0,0 +1 @@
|
||||||
|
export default from './Button.jsx';
|
|
@ -11,6 +11,7 @@ class Card extends React.Component {
|
||||||
image: React.PropTypes.string,
|
image: React.PropTypes.string,
|
||||||
loading: React.PropTypes.bool,
|
loading: React.PropTypes.bool,
|
||||||
onClick: React.PropTypes.func,
|
onClick: React.PropTypes.func,
|
||||||
|
subtitle: React.PropTypes.string,
|
||||||
text: React.PropTypes.string,
|
text: React.PropTypes.string,
|
||||||
title: React.PropTypes.string,
|
title: React.PropTypes.string,
|
||||||
type: React.PropTypes.oneOf(['wide', 'event', 'image'])
|
type: React.PropTypes.oneOf(['wide', 'event', 'image'])
|
||||||
|
@ -49,9 +50,9 @@ class Card extends React.Component {
|
||||||
if (this.props.title || this.props.image) {
|
if (this.props.title || this.props.image) {
|
||||||
return (
|
return (
|
||||||
<figure className={style.figure} style={styleFigure}>
|
<figure className={style.figure} style={styleFigure}>
|
||||||
{ this.props.title ? <h5 data-role='title'>{this.props.title}</h5> : null }
|
{this.props.title ? <h5 data-role='title'>{this.props.title}</h5> : null}
|
||||||
{ this.props.subtitle ? <small data-role='subtitle'>{this.props.subtitle}</small> : null }
|
{this.props.subtitle ? <small data-role='subtitle'>{this.props.subtitle}</small> : null}
|
||||||
{ this.props.color ? <div className={style.overflow} style={styleOverflow}></div> : null }
|
{this.props.color ? <div className={style.overflow} style={styleOverflow}></div> : null}
|
||||||
</figure>
|
</figure>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -72,9 +73,9 @@ class Card extends React.Component {
|
||||||
className={className}
|
className={className}
|
||||||
onMouseDown={this.handleMouseDown}
|
onMouseDown={this.handleMouseDown}
|
||||||
>
|
>
|
||||||
{ this.renderTitle() }
|
{this.renderTitle()}
|
||||||
{ this.props.text ? <p data-role='text' className={style.text}>{this.props.text}</p> : null }
|
{this.props.text ? <p data-role='text' className={style.text}>{this.props.text}</p> : null}
|
||||||
{ this.renderActions() }
|
{this.renderActions()}
|
||||||
<Ripple
|
<Ripple
|
||||||
ref='ripple'
|
ref='ripple'
|
||||||
className={style.ripple}
|
className={style.ripple}
|
|
@ -0,0 +1 @@
|
||||||
|
export default from './Card.jsx';
|
|
@ -38,6 +38,14 @@ class Checkbox extends React.Component {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
blur () {
|
||||||
|
this.refs.input.blur();
|
||||||
|
}
|
||||||
|
|
||||||
|
focus () {
|
||||||
|
this.refs.input.focus();
|
||||||
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
let fieldClassName = style.field;
|
let fieldClassName = style.field;
|
||||||
let checkboxClassName = style.check;
|
let checkboxClassName = style.check;
|
||||||
|
@ -61,18 +69,10 @@ class Checkbox extends React.Component {
|
||||||
<span data-role='checkbox' className={checkboxClassName} onMouseDown={this.handleMouseDown}>
|
<span data-role='checkbox' className={checkboxClassName} onMouseDown={this.handleMouseDown}>
|
||||||
<Ripple ref='ripple' data-role='ripple' className={style.ripple} spread={3} centered />
|
<Ripple ref='ripple' data-role='ripple' className={style.ripple} spread={3} centered />
|
||||||
</span>
|
</span>
|
||||||
{ this.props.label ? <span data-role='label' className={style.text}>{this.props.label}</span> : null }
|
{this.props.label ? <span data-role='label' className={style.text}>{this.props.label}</span> : null}
|
||||||
</label>
|
</label>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
blur () {
|
|
||||||
this.refs.input.blur();
|
|
||||||
}
|
|
||||||
|
|
||||||
focus () {
|
|
||||||
this.refs.input.focus();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Checkbox;
|
export default Checkbox;
|
|
@ -0,0 +1 @@
|
||||||
|
export default from './Checkbox.jsx';
|
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import CalendarDialog from './dialog';
|
import CalendarDialog from './DatePickerDialog';
|
||||||
import events from '../utils/events';
|
import events from '../utils/events';
|
||||||
import Input from '../input';
|
import Input from '../input';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
|
@ -42,7 +42,7 @@ class DatePicker extends React.Component {
|
||||||
className={style.input}
|
className={style.input}
|
||||||
onMouseDown={this.handleInputMouseDown}
|
onMouseDown={this.handleInputMouseDown}
|
||||||
label={this.props.label}
|
label={this.props.label}
|
||||||
readOnly={true}
|
readOnly
|
||||||
type='text'
|
type='text'
|
||||||
value={date}
|
value={date}
|
||||||
/>
|
/>
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Calendar from './calendar';
|
import Calendar from './calendar';
|
||||||
import Dialog from '../dialog';
|
import Dialog from '../Dialog';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
import time from '../utils/time';
|
import time from '../utils/time';
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import React from 'react';
|
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 { SlideLeft, SlideRight } from '../../animations';
|
||||||
import FontIcon from '../../font_icon';
|
import FontIcon from '../../font_icon';
|
||||||
import Ripple from '../../ripple';
|
import Ripple from '../../ripple';
|
||||||
import Month from './month';
|
import Month from './Month';
|
||||||
import time from '../../utils/time';
|
import time from '../../utils/time';
|
||||||
import utils from '../../utils/utils';
|
import utils from '../../utils/utils';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
|
@ -77,13 +77,13 @@ class Calendar extends React.Component {
|
||||||
props.ref = 'activeYear';
|
props.ref = 'activeYear';
|
||||||
}
|
}
|
||||||
|
|
||||||
return <li {...props}>{ year }</li>;
|
return <li {...props}>{year}</li>;
|
||||||
}
|
}
|
||||||
|
|
||||||
renderYears () {
|
renderYears () {
|
||||||
return (
|
return (
|
||||||
<ul ref="years" className={style.years}>
|
<ul ref="years" className={style.years}>
|
||||||
{ utils.range(1900, 2100).map((i) => { return this.renderYear(i); })}
|
{utils.range(1900, 2100).map((i) => { return this.renderYear(i); })}
|
||||||
</ul>
|
</ul>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -98,7 +98,7 @@ class Calendar extends React.Component {
|
||||||
<FontIcon className={style.next} value='chevron-right' onMouseDown={this.incrementViewMonth}>
|
<FontIcon className={style.next} value='chevron-right' onMouseDown={this.incrementViewMonth}>
|
||||||
<Ripple ref='rippleRight' className={style.ripple} spread={1.2} centered />
|
<Ripple ref='rippleRight' className={style.ripple} spread={1.2} centered />
|
||||||
</FontIcon>
|
</FontIcon>
|
||||||
<CSSTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
|
<CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
|
||||||
<Month
|
<Month
|
||||||
key={this.state.viewDate.getMonth()}
|
key={this.state.viewDate.getMonth()}
|
||||||
maxDate={this.props.maxDate}
|
maxDate={this.props.maxDate}
|
||||||
|
@ -106,7 +106,7 @@ class Calendar extends React.Component {
|
||||||
viewDate={this.state.viewDate}
|
viewDate={this.state.viewDate}
|
||||||
selectedDate={this.props.selectedDate}
|
selectedDate={this.props.selectedDate}
|
||||||
onDayClick={this.handleDayClick} />
|
onDayClick={this.handleDayClick} />
|
||||||
</CSSTransitionGroup>
|
</CssTransitionGroup>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -114,7 +114,7 @@ class Calendar extends React.Component {
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
<div className={style.root}>
|
<div className={style.root}>
|
||||||
{ this.props.display === 'months' ? this.renderMonths() : this.renderYears() }
|
{this.props.display === 'months' ? this.renderMonths() : this.renderYears()}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
|
@ -0,0 +1 @@
|
||||||
|
export default from './Calendar.jsx';
|
|
@ -1,7 +1,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import time from '../../utils/time';
|
import time from '../../utils/time';
|
||||||
import utils from '../../utils/utils';
|
import utils from '../../utils/utils';
|
||||||
import Day from './day';
|
import Day from './Day';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
|
|
||||||
class Month extends React.Component {
|
class Month extends React.Component {
|
||||||
|
@ -19,7 +19,7 @@ class Month extends React.Component {
|
||||||
|
|
||||||
renderWeeks () {
|
renderWeeks () {
|
||||||
return utils.range(0, 7).map(i => {
|
return utils.range(0, 7).map(i => {
|
||||||
return <span key={i}>{ time.getFullDayOfWeek(i).charAt(0) }</span>;
|
return <span key={i}>{time.getFullDayOfWeek(i).charAt(0)}</span>;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -45,10 +45,10 @@ class Month extends React.Component {
|
||||||
return (
|
return (
|
||||||
<div className={style.month}>
|
<div className={style.month}>
|
||||||
<span className={style.title}>
|
<span className={style.title}>
|
||||||
{ time.getFullMonth(this.props.viewDate)} { this.props.viewDate.getFullYear() }
|
{time.getFullMonth(this.props.viewDate)} {this.props.viewDate.getFullYear()}
|
||||||
</span>
|
</span>
|
||||||
<div className={style.week}>{ this.renderWeeks() }</div>
|
<div className={style.week}>{this.renderWeeks()}</div>
|
||||||
<div className={style.days}>{ this.renderDays() }</div>
|
<div className={style.days}>{this.renderDays()}</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
export default from './DatePicker.jsx';
|
|
@ -1,7 +1,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Button from '../button';
|
import Button from '../button';
|
||||||
import Overlay from '../overlay';
|
import Overlay from '../overlay';
|
||||||
import style from './style';
|
import style from './style.scss';
|
||||||
|
|
||||||
const Dialog = (props) => {
|
const Dialog = (props) => {
|
||||||
const actions = props.actions.map((action, idx) => {
|
const actions = props.actions.map((action, idx) => {
|
||||||
|
@ -18,11 +18,11 @@ const Dialog = (props) => {
|
||||||
<Overlay active={props.active} onClick={props.onOverlayClick}>
|
<Overlay active={props.active} onClick={props.onOverlayClick}>
|
||||||
<div data-react-toolbox='dialog' className={className}>
|
<div data-react-toolbox='dialog' className={className}>
|
||||||
<section role='body' className={style.body}>
|
<section role='body' className={style.body}>
|
||||||
{ props.title ? <h6 className={style.title}>{props.title}</h6> : null }
|
{props.title ? <h6 className={style.title}>{props.title}</h6> : null}
|
||||||
{ props.children }
|
{props.children}
|
||||||
</section>
|
</section>
|
||||||
<nav role='navigation' className={style.navigation}>
|
<nav role='navigation' className={style.navigation}>
|
||||||
{ actions }
|
{actions}
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</Overlay>
|
</Overlay>
|
||||||
|
@ -32,6 +32,7 @@ const Dialog = (props) => {
|
||||||
Dialog.propTypes = {
|
Dialog.propTypes = {
|
||||||
actions: React.PropTypes.array,
|
actions: React.PropTypes.array,
|
||||||
active: React.PropTypes.bool,
|
active: React.PropTypes.bool,
|
||||||
|
children: React.PropTypes.node,
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
onOverlayClick: React.PropTypes.func,
|
onOverlayClick: React.PropTypes.func,
|
||||||
title: React.PropTypes.string,
|
title: React.PropTypes.string,
|
|
@ -0,0 +1 @@
|
||||||
|
export default from './Dialog.jsx';
|
|
@ -11,7 +11,7 @@ const Drawer = (props) => {
|
||||||
<Overlay active={props.active} onClick={props.onOverlayClick}>
|
<Overlay active={props.active} onClick={props.onOverlayClick}>
|
||||||
<div data-react-toolbox='drawer' className={className}>
|
<div data-react-toolbox='drawer' className={className}>
|
||||||
<aside className={style.content}>
|
<aside className={style.content}>
|
||||||
{ props.children }
|
{props.children}
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
</Overlay>
|
</Overlay>
|
||||||
|
@ -20,6 +20,7 @@ const Drawer = (props) => {
|
||||||
|
|
||||||
Drawer.propTypes = {
|
Drawer.propTypes = {
|
||||||
active: React.PropTypes.bool,
|
active: React.PropTypes.bool,
|
||||||
|
children: React.PropTypes.node,
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
onOverlayClick: React.PropTypes.func,
|
onOverlayClick: React.PropTypes.func,
|
||||||
type: React.PropTypes.oneOf(['left', 'right'])
|
type: React.PropTypes.oneOf(['left', 'right'])
|
|
@ -0,0 +1 @@
|
||||||
|
export default from './Drawer.jsx';
|
|
@ -52,7 +52,7 @@ class Dropdown extends React.Component {
|
||||||
const className = item.value === this.props.value ? style.selected : null;
|
const className = item.value === this.props.value ? style.selected : null;
|
||||||
return (
|
return (
|
||||||
<li key={idx} className={className} onMouseDown={this.handleSelect.bind(this, item.value)}>
|
<li key={idx} className={className} onMouseDown={this.handleSelect.bind(this, item.value)}>
|
||||||
{ this.props.template ? this.props.template(item) : item.label }
|
{this.props.template ? this.props.template(item) : item.label}
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -67,14 +67,14 @@ class Dropdown extends React.Component {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div data-react-toolbox='dropdown' className={className}>
|
<div data-react-toolbox='dropdown' className={className}>
|
||||||
{ this.props.label ? <label className={style.label}>{this.props.label}</label> : null }
|
{this.props.label ? <label className={style.label}>{this.props.label}</label> : null}
|
||||||
|
|
||||||
<ul ref='values' className={style.values}>
|
<ul ref='values' className={style.values}>
|
||||||
{ this.props.source.map(this.renderItem.bind(this)) }
|
{this.props.source.map(this.renderItem.bind(this))}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div ref='value' className={style.value} onClick={this.handleClick}>
|
<div ref='value' className={style.value} onClick={this.handleClick}>
|
||||||
{ this.props.template ? this.props.template(selected) : <span>{selected.label}</span> }
|
{this.props.template ? this.props.template(selected) : <span>{selected.label}</span>}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
|
@ -0,0 +1 @@
|
||||||
|
export default from './Dropdown.jsx';
|
|
@ -12,6 +12,7 @@ const FontIcon = props => {
|
||||||
};
|
};
|
||||||
|
|
||||||
FontIcon.propTypes = {
|
FontIcon.propTypes = {
|
||||||
|
children: React.PropTypes.any,
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
value: React.PropTypes.string
|
value: React.PropTypes.string
|
||||||
};
|
};
|
|
@ -0,0 +1 @@
|
||||||
|
export default from './FontIcon.jsx';
|
|
@ -14,6 +14,7 @@ import TimePicker from '../time_picker';
|
||||||
class Form extends React.Component {
|
class Form extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
attributes: React.PropTypes.array,
|
attributes: React.PropTypes.array,
|
||||||
|
children: React.PropTypes.node,
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
onChange: React.PropTypes.func,
|
onChange: React.PropTypes.func,
|
||||||
onError: 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 <Autocomplete key={index} {...attribute} onChange={this.onChange}/>;
|
|
||||||
} else if (attribute.type === 'submit') {
|
|
||||||
return <Button key={index} {...attribute} ref='submit' onClick={this.onSubmit} type='square' />;
|
|
||||||
} else if (attribute.type === 'checkbox') {
|
|
||||||
return <Checkbox key={index} {...attribute} onChange={this.onChange}/>;
|
|
||||||
} else if (attribute.type === 'date_picker') {
|
|
||||||
return <DatePicker key={index} {...attribute} onChange={this.onChange}/>;
|
|
||||||
} else if (attribute.type === 'dropdown') {
|
|
||||||
return <Dropdown key={index} {...attribute} onChange={this.onChange}/>;
|
|
||||||
} else if (attribute.type === 'radio_group') {
|
|
||||||
return <RadioGroup key={index} {...attribute} onChange={this.onChange}/>;
|
|
||||||
} else if (attribute.type === 'slider') {
|
|
||||||
return <Slider key={index} {...attribute} onChange={this.onChange}/>;
|
|
||||||
} else if (attribute.type === 'switch') {
|
|
||||||
return <Switch key={index} {...attribute} onChange={this.onChange}/>;
|
|
||||||
} else if (attribute.type === 'time_picker') {
|
|
||||||
return <TimePicker key={index} {...attribute} onChange={this.onChange}/>;
|
|
||||||
} else {
|
|
||||||
return <Input key={index} {...attribute} />;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form
|
|
||||||
data-react-toolbox='form'
|
|
||||||
className={className}
|
|
||||||
onChange={this.onChange}
|
|
||||||
onSubmit={this.onSubmit}
|
|
||||||
>
|
|
||||||
{ attributes }
|
|
||||||
{ this.props.children }
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
storage (props, value) {
|
storage (props, value) {
|
||||||
const key = `react-toolbox-form-${props.storage}`;
|
const key = `react-toolbox-form-${props.storage}`;
|
||||||
if (value) {
|
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 <Autocomplete key={index} {...attribute} onChange={this.onChange}/>;
|
||||||
|
} else if (attribute.type === 'submit') {
|
||||||
|
return <Button key={index} {...attribute} ref='submit' onClick={this.onSubmit} type='square' />;
|
||||||
|
} else if (attribute.type === 'checkbox') {
|
||||||
|
return <Checkbox key={index} {...attribute} onChange={this.onChange}/>;
|
||||||
|
} else if (attribute.type === 'date_picker') {
|
||||||
|
return <DatePicker key={index} {...attribute} onChange={this.onChange}/>;
|
||||||
|
} else if (attribute.type === 'dropdown') {
|
||||||
|
return <Dropdown key={index} {...attribute} onChange={this.onChange}/>;
|
||||||
|
} else if (attribute.type === 'radio_group') {
|
||||||
|
return <RadioGroup key={index} {...attribute} onChange={this.onChange}/>;
|
||||||
|
} else if (attribute.type === 'slider') {
|
||||||
|
return <Slider key={index} {...attribute} onChange={this.onChange}/>;
|
||||||
|
} else if (attribute.type === 'switch') {
|
||||||
|
return <Switch key={index} {...attribute} onChange={this.onChange}/>;
|
||||||
|
} else if (attribute.type === 'time_picker') {
|
||||||
|
return <TimePicker key={index} {...attribute} onChange={this.onChange}/>;
|
||||||
|
} else {
|
||||||
|
return <Input key={index} {...attribute} />;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form
|
||||||
|
data-react-toolbox='form'
|
||||||
|
className={className}
|
||||||
|
onChange={this.onChange}
|
||||||
|
onSubmit={this.onSubmit}
|
||||||
|
>
|
||||||
|
{attributes}
|
||||||
|
{this.props.children}
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Form;
|
export default Form;
|
|
@ -0,0 +1 @@
|
||||||
|
export default from './Form.jsx';
|
|
@ -54,6 +54,14 @@ class Input extends React.Component {
|
||||||
if (error || counter) return <span className={style.underline}>{error}{counter}</span>;
|
if (error || counter) return <span className={style.underline}>{error}{counter}</span>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
blur () {
|
||||||
|
this.refs.input.blur();
|
||||||
|
}
|
||||||
|
|
||||||
|
focus () {
|
||||||
|
this.refs.input.focus();
|
||||||
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const className = classNames({
|
const className = classNames({
|
||||||
[style.root]: true,
|
[style.root]: true,
|
||||||
|
@ -71,23 +79,15 @@ class Input extends React.Component {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div data-react-toolbox='input' className={className}>
|
<div data-react-toolbox='input' className={className}>
|
||||||
{ this.renderInput() }
|
{this.renderInput()}
|
||||||
{ this.props.icon ? <FontIcon className={style.icon} value={this.props.icon} /> : null }
|
{this.props.icon ? <FontIcon className={style.icon} value={this.props.icon} /> : null}
|
||||||
<span className={style.bar}></span>
|
<span className={style.bar}></span>
|
||||||
{ this.props.label ? <label className={labelClassName}>{this.props.label}</label> : null }
|
{this.props.label ? <label className={labelClassName}>{this.props.label}</label> : null}
|
||||||
{ this.renderUnderline() }
|
{this.renderUnderline()}
|
||||||
{ this.props.tooltip ? <Tooltip label={this.props.tooltip} delay={this.props.tooltipDelay}/> : null }
|
{this.props.tooltip ? <Tooltip label={this.props.tooltip} delay={this.props.tooltipDelay}/> : null}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
blur () {
|
|
||||||
this.refs.input.blur();
|
|
||||||
}
|
|
||||||
|
|
||||||
focus () {
|
|
||||||
this.refs.input.focus();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Input;
|
export default Input;
|
|
@ -0,0 +1 @@
|
||||||
|
export default from './Input.jsx';
|
|
@ -12,9 +12,9 @@ const Link = (props) => {
|
||||||
data-react-toolbox='link'
|
data-react-toolbox='link'
|
||||||
className={className}
|
className={className}
|
||||||
>
|
>
|
||||||
{ props.icon ? <FontIcon className={style.icon} value={props.icon} /> : null }
|
{props.icon ? <FontIcon className={style.icon} value={props.icon} /> : null}
|
||||||
{ props.label ? <abbr>{props.label}</abbr> : null }
|
{props.label ? <abbr>{props.label}</abbr> : null}
|
||||||
{ props.count && parseInt(props.count) !== 0 ? <small>{props.count}</small> : null}
|
{props.count && parseInt(props.count) !== 0 ? <small>{props.count}</small> : null}
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
};
|
};
|
|
@ -0,0 +1 @@
|
||||||
|
export default from './Link.jsx';
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Checkbox from '../checkbox';
|
import Checkbox from '../checkbox';
|
||||||
import ListItemContent from './content';
|
import ListItemContent from './Content';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
|
|
||||||
const ListCheckbox = (props) => {
|
const ListCheckbox = (props) => {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
|
|
||||||
const ListItemContent = ({ caption, legend }) => (
|
const ListItemContent = ({caption, legend}) => (
|
||||||
<span className={style.text}>
|
<span className={style.text}>
|
||||||
<span className={style.caption}>{caption}</span>
|
<span className={style.caption}>{caption}</span>
|
||||||
<span className={style.legend}>{legend}</span>
|
<span className={style.legend}>{legend}</span>
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
import List from './list';
|
export List from './List';
|
||||||
import ListItem from './item';
|
export ListItem from './Item';
|
||||||
import ListDivider from './divider';
|
export ListDivider from './Divider';
|
||||||
import ListCheckbox from './checkbox';
|
export ListCheckbox from './Checkbox';
|
||||||
import ListSubHeader from './subheader';
|
export ListSubHeader from './Subheader';
|
||||||
|
|
||||||
export default {List, ListItem, ListDivider, ListCheckbox, ListSubHeader};
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import FontIcon from '../font_icon';
|
import FontIcon from '../font_icon';
|
||||||
import ListItemContent from './content';
|
import ListItemContent from './Content';
|
||||||
import Ripple from '../ripple';
|
import Ripple from '../ripple';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
|
|
||||||
|
@ -8,9 +8,11 @@ class ListItem extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
avatar: React.PropTypes.string,
|
avatar: React.PropTypes.string,
|
||||||
caption: React.PropTypes.string.isRequired,
|
caption: React.PropTypes.string.isRequired,
|
||||||
|
className: React.PropTypes.string,
|
||||||
disabled: React.PropTypes.bool,
|
disabled: React.PropTypes.bool,
|
||||||
leftIcon: React.PropTypes.string,
|
leftIcon: React.PropTypes.string,
|
||||||
legend: React.PropTypes.string,
|
legend: React.PropTypes.string,
|
||||||
|
onClick: React.PropTypes.func,
|
||||||
rightIcon: React.PropTypes.string,
|
rightIcon: React.PropTypes.string,
|
||||||
ripple: React.PropTypes.bool,
|
ripple: React.PropTypes.bool,
|
||||||
selectable: React.PropTypes.bool,
|
selectable: React.PropTypes.bool,
|
||||||
|
@ -44,11 +46,11 @@ class ListItem extends React.Component {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<span className={className}>
|
<span className={className}>
|
||||||
{ this.props.leftIcon ? <FontIcon className={`${style.icon} ${style.left}`} value={this.props.leftIcon} /> : null }
|
{this.props.leftIcon ? <FontIcon className={`${style.icon} ${style.left}`} value={this.props.leftIcon} /> : null}
|
||||||
{ this.props.avatar ? <img className={style.avatar} src={this.props.avatar} /> : null }
|
{this.props.avatar ? <img className={style.avatar} src={this.props.avatar} /> : null}
|
||||||
<ListItemContent caption={this.props.caption} legend={this.props.legend} />
|
<ListItemContent caption={this.props.caption} legend={this.props.legend} />
|
||||||
{ this.props.ripple ? <Ripple ref='ripple' className={style.ripple} spread={2} /> : null }
|
{this.props.ripple ? <Ripple ref='ripple' className={style.ripple} spread={2} /> : null}
|
||||||
{ this.props.rightIcon ? <FontIcon className={`${style.icon} ${style.right}`} value={this.props.rightIcon} /> : null }
|
{this.props.rightIcon ? <FontIcon className={`${style.icon} ${style.right}`} value={this.props.rightIcon} /> : null}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -56,7 +58,7 @@ class ListItem extends React.Component {
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
<li className={style['list-item']} onClick={this.handleClick} onMouseDown={this.handleMouseDown}>
|
<li className={style['list-item']} onClick={this.handleClick} onMouseDown={this.handleMouseDown}>
|
||||||
{ this.props.to ? <a href={this.props.to}>{this.renderContent()}</a> : this.renderContent() }
|
{this.props.to ? <a href={this.props.to}>{this.renderContent()}</a> : this.renderContent()}
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,9 +1,10 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ListItem from './item';
|
import ListItem from './Item';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
|
|
||||||
class List extends React.Component {
|
class List extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
children: React.PropTypes.node,
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
ripple: React.PropTypes.bool,
|
ripple: React.PropTypes.bool,
|
||||||
selectable: React.PropTypes.bool
|
selectable: React.PropTypes.bool
|
||||||
|
|
|
@ -8,7 +8,8 @@ const ListSubHeader = (props) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
ListSubHeader.propTypes = {
|
ListSubHeader.propTypes = {
|
||||||
caption: React.PropTypes.string
|
caption: React.PropTypes.string,
|
||||||
|
className: React.PropTypes.string
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ListSubHeader;
|
export default ListSubHeader;
|
||||||
|
|
|
@ -1,19 +1,20 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import FontIcon from '../font_icon';
|
import FontIcon from '../font_icon';
|
||||||
import Menu from './menu';
|
import Menu from './Menu';
|
||||||
import Ripple from '../ripple';
|
import Ripple from '../ripple';
|
||||||
import style from './style.icon_menu';
|
import style from './style.icon_menu';
|
||||||
|
|
||||||
class IconMenu extends React.Component {
|
class IconMenu extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
children: React.PropTypes.node,
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
icon: React.PropTypes.string,
|
icon: React.PropTypes.string,
|
||||||
iconRipple: React.PropTypes.bool,
|
iconRipple: React.PropTypes.bool,
|
||||||
menuRipple: React.PropTypes.bool,
|
menuRipple: React.PropTypes.bool,
|
||||||
onClick: React.PropTypes.func,
|
onClick: React.PropTypes.func,
|
||||||
onHide: React.PropTypes.func,
|
onHide: React.PropTypes.func,
|
||||||
onShow: React.PropTypes.func,
|
|
||||||
onSelect: React.PropTypes.func,
|
onSelect: React.PropTypes.func,
|
||||||
|
onShow: React.PropTypes.func,
|
||||||
position: React.PropTypes.string,
|
position: React.PropTypes.string,
|
||||||
selectable: React.PropTypes.bool,
|
selectable: React.PropTypes.bool,
|
||||||
selected: React.PropTypes.any
|
selected: React.PropTypes.any
|
||||||
|
@ -61,9 +62,9 @@ class IconMenu extends React.Component {
|
||||||
selectable={this.props.selectable}
|
selectable={this.props.selectable}
|
||||||
selected={this.props.selected}
|
selected={this.props.selected}
|
||||||
>
|
>
|
||||||
{ this.props.children }
|
{this.props.children}
|
||||||
</Menu>
|
</Menu>
|
||||||
{ this.props.iconRipple ? <Ripple ref='ripple' className={style.ripple} spread={2.4} centered /> : null }
|
{this.props.iconRipple ? <Ripple ref='ripple' className={style.ripple} spread={2.4} centered /> : null}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
|
@ -9,9 +9,10 @@ class MenuItem extends React.Component {
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
disabled: React.PropTypes.bool,
|
disabled: React.PropTypes.bool,
|
||||||
icon: React.PropTypes.string,
|
icon: React.PropTypes.string,
|
||||||
|
onClick: React.PropTypes.func,
|
||||||
ripple: React.PropTypes.bool,
|
ripple: React.PropTypes.bool,
|
||||||
shortcut: React.PropTypes.string,
|
selected: React.PropTypes.bool,
|
||||||
selected: React.PropTypes.bool
|
shortcut: React.PropTypes.string
|
||||||
};
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
|
@ -46,10 +47,10 @@ class MenuItem extends React.Component {
|
||||||
onClick={this.handleClick}
|
onClick={this.handleClick}
|
||||||
onMouseDown={this.handleMouseDown}
|
onMouseDown={this.handleMouseDown}
|
||||||
>
|
>
|
||||||
{ this.props.icon ? <FontIcon value={this.props.icon} className={style.icon}/> : null }
|
{this.props.icon ? <FontIcon value={this.props.icon} className={style.icon}/> : null}
|
||||||
<span className={style.caption}>{this.props.caption}</span>
|
<span className={style.caption}>{this.props.caption}</span>
|
||||||
{ this.props.shortcut ? <small className={style.shortcut}>{this.props.shortcut}</small> : null }
|
{this.props.shortcut ? <small className={style.shortcut}>{this.props.shortcut}</small> : null}
|
||||||
{ this.props.ripple ? <Ripple ref='ripple' className={style.ripple} spread={2.5} /> : null }
|
{this.props.ripple ? <Ripple ref='ripple' className={style.ripple} spread={2.5} /> : null}
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
}
|
}
|
|
@ -1,11 +1,4 @@
|
||||||
import Menu from './menu';
|
export Menu from './Menu';
|
||||||
import MenuItem from './menu_item';
|
export MenuItem from './MenuItem';
|
||||||
import MenuDivider from './menu_divider';
|
export MenuDivider from './MenuDivider';
|
||||||
import IconMenu from './icon_menu';
|
export IconMenu from './IconMenu';
|
||||||
|
|
||||||
export default {
|
|
||||||
Menu,
|
|
||||||
MenuItem,
|
|
||||||
MenuDivider,
|
|
||||||
IconMenu
|
|
||||||
};
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import MenuItem from './menu_item';
|
import MenuItem from './MenuItem';
|
||||||
import { events, utils } from '../utils';
|
import { events, utils } from '../utils';
|
||||||
import style from './style.menu';
|
import style from './style.menu';
|
||||||
|
|
||||||
|
@ -16,6 +16,7 @@ const POSITION = {
|
||||||
class Menu extends React.Component {
|
class Menu extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
active: React.PropTypes.bool,
|
active: React.PropTypes.bool,
|
||||||
|
children: React.PropTypes.node,
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
onHide: React.PropTypes.func,
|
onHide: React.PropTypes.func,
|
||||||
onSelect: React.PropTypes.func,
|
onSelect: React.PropTypes.func,
|
||||||
|
@ -46,15 +47,6 @@ class Menu extends React.Component {
|
||||||
this.setState({ position, width, height });
|
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) {
|
componentWillReceiveProps (nextProps) {
|
||||||
if (this.props.position !== nextProps.position) {
|
if (this.props.position !== nextProps.position) {
|
||||||
const position = nextProps.position === POSITION.AUTO ? this.calculatePosition() : 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) {
|
shouldComponentUpdate (nextProps, nextState) {
|
||||||
if (!this.state.active && nextState.active && this.props.position === POSITION.AUTO) {
|
if (!this.state.active && nextState.active && this.props.position === POSITION.AUTO) {
|
||||||
const position = this.calculatePosition();
|
const position = this.calculatePosition();
|
||||||
|
@ -81,6 +67,21 @@ class Menu extends React.Component {
|
||||||
return true;
|
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) => {
|
handleDocumentClick = (event) => {
|
||||||
if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
|
if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
|
||||||
this.setState({active: false, rippled: false});
|
this.setState({active: false, rippled: false});
|
||||||
|
@ -149,21 +150,13 @@ class Menu extends React.Component {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={className} style={this.getRootStyle()}>
|
<div className={className} style={this.getRootStyle()}>
|
||||||
{ this.props.outline ? <div className={style.outline} style={outlineStyle}></div> : null }
|
{this.props.outline ? <div className={style.outline} style={outlineStyle}></div> : null}
|
||||||
<ul ref='menu' className={style.menu} style={this.getMenuStyle()}>
|
<ul ref='menu' className={style.menu} style={this.getMenuStyle()}>
|
||||||
{ this.renderItems() }
|
{this.renderItems()}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
show () {
|
|
||||||
this.setState({active: true});
|
|
||||||
}
|
|
||||||
|
|
||||||
hide () {
|
|
||||||
this.setState({active: false});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Menu;
|
export default Menu;
|
||||||
|
|
Loading…
Reference in New Issue