tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Ivan - Use ES6 Classes in core components [skip ci]

This commit is contained in:
ivan 2016-08-12 01:20:14 -03:00
parent 35cf17b114
commit eaef9b42db
11 changed files with 204 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
client/src/core-components/button.js
View File

@ -6,13 +6,13 @@ import classNames from 'classnames';
// CORE LIBS // CORE LIBS
import callback from 'lib-core/callback'; import callback from 'lib-core/callback';
const Button = React.createClass({ class Button extends React.Component {
contextTypes: { static contextTypes = {
router: React.PropTypes.object router: React.PropTypes.object
}, };
propTypes: { static propTypes = {
children: React.PropTypes.node, children: React.PropTypes.node,
type: React.PropTypes.oneOf([ type: React.PropTypes.oneOf([
'primary', 'primary',
@ -24,13 +24,11 @@ const Button = React.createClass({
params: React.PropTypes.object, params: React.PropTypes.object,
query: React.PropTypes.query query: React.PropTypes.query
}) })
}, };
getDefaultProps() { static defaultProps = {
return { type: 'primary'
type: 'primary' };
};
},
render() { render() {
return ( return (
@ -38,19 +36,19 @@ const Button = React.createClass({
{this.props.children} {this.props.children}
</button> </button>
); );
}, }
getProps() { getProps() {
let props = _.clone(this.props); let props = _.clone(this.props);
props.onClick = callback(this.handleClick, this.props.onClick); props.onClick = callback(this.handleClick.bind(this), this.props.onClick);
props.className = this.getClass(); props.className = this.getClass();
delete props.route; delete props.route;
delete props.type; delete props.type;
return props; return props;
}, }
getClass() { getClass() {
let classes = { let classes = {
@ -62,13 +60,13 @@ const Button = React.createClass({
classes[this.props.className] = (this.props.className); classes[this.props.className] = (this.props.className);
return classNames(classes); return classNames(classes);
}, }
handleClick() { handleClick() {
if (this.props.route) { if (this.props.route) {
this.context.router.push(this.props.route.to); this.context.router.push(this.props.route.to);
} }
} }
}); }
export default Button; export default Button;

44
client/src/core-components/checkbox.js
View File

@ -5,25 +5,25 @@ import _ from 'lodash';
import callback from 'lib-core/callback'; import callback from 'lib-core/callback';
import getIcon from 'lib-core/get-icon'; import getIcon from 'lib-core/get-icon';
let CheckBox = React.createClass({ class CheckBox extends React.Component {
propTypes: { static propTypes = {
alignment: React.PropTypes.string, alignment: React.PropTypes.string,
label: React.PropTypes.string, label: React.PropTypes.string,
value: React.PropTypes.bool value: React.PropTypes.bool
}, };
getDefaultProps() { static defaultProps = {
return { alignment: 'right'
alignment: 'right' };
};
},
getInitialState() { constructor(props) {
return { super(props);
this.state = {
checked: false checked: false
}; };
}, }
render() { render() {
return ( return (
@ -35,7 +35,7 @@ let CheckBox = React.createClass({
<input {...this.getProps()}/> <input {...this.getProps()}/>
</label> </label>
); );
}, }
getProps() { getProps() {
let props = _.clone(this.props); let props = _.clone(this.props);
@ -45,7 +45,7 @@ let CheckBox = React.createClass({
props['aria-hidden'] = true; props['aria-hidden'] = true;
props.className = 'checkbox--box'; props.className = 'checkbox--box';
props.checked = this.getValue(); props.checked = this.getValue();
props.onChange = callback(this.handleChange, this.props.onChange); props.onChange = callback(this.handleChange.bind(this), this.props.onChange);
delete props.alignment; delete props.alignment;
delete props.error; delete props.error;
@ -53,7 +53,7 @@ let CheckBox = React.createClass({
delete props.value; delete props.value;
return props; return props;
}, }
getClass() { getClass() {
let classes = { let classes = {
@ -64,29 +64,29 @@ let CheckBox = React.createClass({
}; };
return classNames(classes); return classNames(classes);
}, }
getIconProps() { getIconProps() {
return { return {
'aria-checked': this.getValue(), 'aria-checked': this.getValue(),
className: 'checkbox--icon', className: 'checkbox--icon',
onKeyDown: callback(this.handleIconKeyDown, this.props.onKeyDown), onKeyDown: callback(this.handleIconKeyDown.bind(this), this.props.onKeyDown),
role: "checkbox", role: "checkbox",
tabIndex: 0 tabIndex: 0
}; };
}, }
getValue() { getValue() {
return (this.props.value === undefined) ? this.state.checked : this.props.value; return (this.props.value === undefined) ? this.state.checked : this.props.value;
}, }
handleChange: function (event) { handleChange(event) {
this.setState({ this.setState({
checked: event.target.checked checked: event.target.checked
}); });
}, }
handleIconKeyDown: function (event) { handleIconKeyDown(event) {
if (event.keyCode == 32) { if (event.keyCode == 32) {
event.preventDefault(); event.preventDefault();
@ -97,6 +97,6 @@ let CheckBox = React.createClass({
}); });
} }
} }
}); }
export default CheckBox; export default CheckBox;

62
client/src/core-components/drop-down.js
View File

@ -1,32 +1,30 @@
const React = require('react'); import React from 'react';
const classNames = require('classnames'); import classNames from 'classnames';
const _ = require('lodash'); import {Motion, spring} from 'react-motion';
const {Motion, spring} = require('react-motion');
const callback = require('lib-core/callback');
const Menu = require('core-components/menu'); import Menu from 'core-components/menu';
const Icon = require('core-components/icon'); import Icon from 'core-components/icon';
const DropDown = React.createClass({ class DropDown extends React.Component {
propTypes: { static propTypes = {
defaultSelectedIndex: React.PropTypes.number, defaultSelectedIndex: React.PropTypes.number,
selectedIndex: React.PropTypes.number, selectedIndex: React.PropTypes.number,
items: Menu.propTypes.items items: Menu.propTypes.items
}, };
getDefaultProps() { static defaultProps = {
return { defaultSelectedIndex: 2
defaultSelectedIndex: 0 };
};
},
getInitialState() { constructor(props) {
return { super(props);
this.state = {
selectedIndex: 0, selectedIndex: 0,
opened: false opened: false
}; };
}, }
getAnimationStyles() { getAnimationStyles() {
let closedStyle = { let closedStyle = {
@ -42,7 +40,7 @@ const DropDown = React.createClass({
defaultStyle: closedStyle, defaultStyle: closedStyle,
style: (this.state.opened) ? openedStyle : closedStyle style: (this.state.opened) ? openedStyle : closedStyle
}; };
}, }
render() { render() {
let animation = this.getAnimationStyles(); let animation = this.getAnimationStyles();
@ -52,18 +50,18 @@ const DropDown = React.createClass({
<div className={this.getClass()}> <div className={this.getClass()}>
{this.renderCurrentItem(selectedItem)} {this.renderCurrentItem(selectedItem)}
<Motion defaultStyle={animation.defaultStyle} style={animation.style}> <Motion defaultStyle={animation.defaultStyle} style={animation.style}>
{this.renderList} {this.renderList.bind(this)}
</Motion> </Motion>
</div> </div>
); );
}, }
renderList({opacity, translateY}) { renderList({opacity, translateY}) {
let style = { opacity: opacity, transform: `translateY(${translateY}px)`}; let style = { opacity: opacity, transform: `translateY(${translateY}px)`};
let menuProps = { let menuProps = {
items: this.props.items, items: this.props.items,
onItemClick: this.handleItemClick, onItemClick: this.handleItemClick.bind(this),
onMouseDown: this.handleListMouseDown, onMouseDown: this.handleListMouseDown.bind(this),
selectedIndex: this.state.selectedIndex selectedIndex: this.state.selectedIndex
}; };
@ -72,7 +70,7 @@ const DropDown = React.createClass({
<Menu {...menuProps} /> <Menu {...menuProps} />
</div> </div>
); );
}, }
renderCurrentItem(item) { renderCurrentItem(item) {
var iconNode = null; var iconNode = null;
@ -82,11 +80,11 @@ const DropDown = React.createClass({
} }
return ( return (
<div className="drop-down--current-item" onBlur={this.handleBlur} onClick={this.handleClick} tabIndex="0"> <div className="drop-down--current-item" onBlur={this.handleBlur.bind(this)} onClick={this.handleClick.bind(this)} tabIndex="0">
{iconNode}{item.content} {iconNode}{item.content}
</div> </div>
); );
}, }
getClass() { getClass() {
let classes = { let classes = {
@ -97,19 +95,19 @@ const DropDown = React.createClass({
}; };
return classNames(classes); return classNames(classes);
}, }
handleBlur() { handleBlur() {
this.setState({ this.setState({
opened: false opened: false
}); });
}, }
handleClick() { handleClick() {
this.setState({ this.setState({
opened: !this.state.opened opened: !this.state.opened
}); });
}, }
handleItemClick(index) { handleItemClick(index) {
this.setState({ this.setState({
@ -122,15 +120,15 @@ const DropDown = React.createClass({
index index
}); });
} }
}, }
handleListMouseDown(event) { handleListMouseDown(event) {
event.preventDefault(); event.preventDefault();
}, }
getSelectedIndex() { getSelectedIndex() {
return (this.props.selectedIndex !== undefined) ? this.props.selectedIndex : this.state.selectedIndex; return (this.props.selectedIndex !== undefined) ? this.props.selectedIndex : this.state.selectedIndex;
} }
}); }
export default DropDown; export default DropDown;

84
client/src/core-components/form.js
View File

@ -1,64 +1,66 @@
const React = require('react'); import React from 'react';
const _ = require('lodash'); import _ from 'lodash';
const classNames = require('classnames'); import classNames from 'classnames';
const {reactDFS, renderChildrenWithProps} = require('lib-core/react-dfs'); import {reactDFS, renderChildrenWithProps} from 'lib-core/react-dfs';
const ValidationFactory = require('lib-app/validations/validations-factory'); import ValidationFactory from 'lib-app/validations/validations-factory';
const Input = require('core-components/input'); import Input from 'core-components/input';
const Checkbox = require('core-components/checkbox'); import Checkbox from 'core-components/checkbox';
const Form = React.createClass({ class Form extends React.Component {
propTypes: { static propTypes = {
loading: React.PropTypes.bool, loading: React.PropTypes.bool,
errors: React.PropTypes.object, errors: React.PropTypes.object,
onValidateErrors: React.PropTypes.func, onValidateErrors: React.PropTypes.func,
onSubmit: React.PropTypes.func onSubmit: React.PropTypes.func
}, };
childContextTypes: { static childContextTypes = {
loading: React.PropTypes.bool loading: React.PropTypes.bool
}, };
constructor(props) {
super(props);
this.state = {
form: {},
validations: {},
errors: {}
};
}
getChildContext() { getChildContext() {
return { return {
loading: this.props.loading loading: this.props.loading
}; };
}, }
getInitialState() {
return {
form: {},
validations: {},
errors: {}
};
},
componentDidMount() { componentDidMount() {
this.setState(this.getInitialFormAndValidations()); this.setState(this.getInitialFormAndValidations());
}, }
render() { render() {
return ( return (
<form {...this.getProps()}> <form {...this.getProps()}>
{renderChildrenWithProps(this.props.children, this.getFieldProps)} {renderChildrenWithProps(this.props.children, this.getFieldProps.bind(this))}
</form> </form>
); );
}, }
getProps() { getProps() {
let props = _.clone(this.props); let props = _.clone(this.props);
props.className = this.getClass(); props.className = this.getClass();
props.onSubmit = this.handleSubmit; props.onSubmit = this.handleSubmit.bind(this);
delete props.errors; delete props.errors;
delete props.loading; delete props.loading;
delete props.onValidateErrors; delete props.onValidateErrors;
return props; return props;
}, }
getClass() { getClass() {
let classes = { let classes = {
@ -68,7 +70,7 @@ const Form = React.createClass({
classes[this.props.className] = (this.props.className); classes[this.props.className] = (this.props.className);
return classNames(classes); return classNames(classes);
}, }
getFieldProps({props, type}) { getFieldProps({props, type}) {
let additionalProps = {}; let additionalProps = {};
@ -86,7 +88,7 @@ const Form = React.createClass({
} }
return additionalProps; return additionalProps;
}, }
getFieldError(fieldName) { getFieldError(fieldName) {
let error = this.state.errors[fieldName]; let error = this.state.errors[fieldName];
@ -95,7 +97,7 @@ const Form = React.createClass({
error = this.props.errors[fieldName] error = this.props.errors[fieldName]
} }
return error; return error;
}, }
getFirstErrorField() { getFirstErrorField() {
let fieldName = _.findKey(this.state.errors); let fieldName = _.findKey(this.state.errors);
@ -106,7 +108,7 @@ const Form = React.createClass({
} }
return fieldNode; return fieldNode;
}, }
getAllFieldErrors() { getAllFieldErrors() {
let form = this.state.form; let form = this.state.form;
@ -118,7 +120,7 @@ const Form = React.createClass({
}); });
return errors; return errors;
}, }
getErrorsWithValidatedField(fieldName, form = this.state.form, errors = this.state.errors) { getErrorsWithValidatedField(fieldName, form = this.state.form, errors = this.state.errors) {
let newErrors = _.clone(errors); let newErrors = _.clone(errors);
@ -128,7 +130,7 @@ const Form = React.createClass({
} }
return newErrors; return newErrors;
}, }
getInitialFormAndValidations() { getInitialFormAndValidations() {
let form = {}; let form = {};
@ -154,17 +156,17 @@ const Form = React.createClass({
form: form, form: form,
validations: validations validations: validations
} }
}, }
handleSubmit(event) { handleSubmit(event) {
event.preventDefault(); event.preventDefault();
if (this.hasFormErrors()) { if (this.hasFormErrors()) {
this.updateErrors(this.getAllFieldErrors(), this.focusFirstErrorField); this.updateErrors(this.getAllFieldErrors(), this.focusFirstErrorField.bind(this));
} else if (this.props.onSubmit) { } else if (this.props.onSubmit) {
this.props.onSubmit(this.state.form); this.props.onSubmit(this.state.form);
} }
}, }
handleFieldChange(fieldName, type, event) { handleFieldChange(fieldName, type, event) {
let form = _.clone(this.state.form); let form = _.clone(this.state.form);
@ -178,19 +180,19 @@ const Form = React.createClass({
this.setState({ this.setState({
form: form form: form
}); });
}, }
isValidFieldType(child) { isValidFieldType(child) {
return child.type === Input || child.type === Checkbox; return child.type === Input || child.type === Checkbox;
}, }
hasFormErrors() { hasFormErrors() {
return _.some(this.getAllFieldErrors()); return _.some(this.getAllFieldErrors());
}, }
validateField(fieldName) { validateField(fieldName) {
this.updateErrors(this.getErrorsWithValidatedField(fieldName)); this.updateErrors(this.getErrorsWithValidatedField(fieldName));
}, }
updateErrors(errors, callback) { updateErrors(errors, callback) {
this.setState({ this.setState({
@ -200,7 +202,7 @@ const Form = React.createClass({
if (this.props.onValidateErrors) { if (this.props.onValidateErrors) {
this.props.onValidateErrors(errors); this.props.onValidateErrors(errors);
} }
}, }
focusFirstErrorField() { focusFirstErrorField() {
let firstErrorField = this.getFirstErrorField(); let firstErrorField = this.getFirstErrorField();
@ -209,6 +211,6 @@ const Form = React.createClass({
firstErrorField.focus(); firstErrorField.focus();
} }
} }
}); }
export default Form; export default Form;

26
client/src/core-components/icon.js
View File

@ -1,34 +1,32 @@
const React = require('react'); import React from 'react';
const classNames = require('classnames'); import classNames from 'classnames';
const Icon = React.createClass({ class Icon extends React.Component {
propTypes: { static propTypes = {
name: React.PropTypes.string.isRequired, name: React.PropTypes.string.isRequired,
size: React.PropTypes.string size: React.PropTypes.string
}, };
getDefaultProps() { static defaultProps = {
return { size: 'lg'
size: 'lg' };
};
},
render() { render() {
return (this.props.name.length > 2) ? this.renderFontIcon() : this.renderFlag(); return (this.props.name.length > 2) ? this.renderFontIcon() : this.renderFlag();
}, }
renderFontIcon() { renderFontIcon() {
return ( return (
<span className={this.getFontIconClass()} aria-hidden="true" /> <span className={this.getFontIconClass()} aria-hidden="true" />
); );
}, }
renderFlag() { renderFlag() {
return ( return (
<img className={this.props.className} src={`/images/icons/${this.props.name}.png`} aria-hidden="true" /> <img className={this.props.className} src={`/images/icons/${this.props.name}.png`} aria-hidden="true" />
); );
}, }
getFontIconClass() { getFontIconClass() {
let classes = { let classes = {
@ -40,6 +38,6 @@ const Icon = React.createClass({
return classNames(classes); return classNames(classes);
} }
}); }
export default Icon; export default Icon;

36
client/src/core-components/input.js
View File

@ -1,16 +1,16 @@
const React = require('react'); import React from 'react';
const classNames = require('classnames'); import classNames from 'classnames';
const _ = require('lodash'); import _ from 'lodash';
const Icon = require('core-components/icon'); import Icon from 'core-components/icon';
const Input = React.createClass({ class Input extends React.Component {
contextTypes: { static contextTypes = {
loading: React.PropTypes.bool loading: React.PropTypes.bool
}, };
propTypes: { static propTypes = {
value: React.PropTypes.string, value: React.PropTypes.string,
validation: React.PropTypes.string, validation: React.PropTypes.string,
onChange: React.PropTypes.func, onChange: React.PropTypes.func,
@ -19,13 +19,11 @@ const Input = React.createClass({
required: React.PropTypes.bool, required: React.PropTypes.bool,
icon: React.PropTypes.string, icon: React.PropTypes.string,
error: React.PropTypes.string error: React.PropTypes.string
}, };
getDefaultProps() { static defaultProps = {
return {
inputType: 'primary' inputType: 'primary'
}; };
},
render() { render() {
return ( return (
@ -36,7 +34,7 @@ const Input = React.createClass({
{this.renderError()} {this.renderError()}
</label> </label>
); );
}, }
renderError() { renderError() {
let error = null; let error = null;
@ -46,7 +44,7 @@ const Input = React.createClass({
} }
return error; return error;
}, }
renderIcon() { renderIcon() {
let icon = null; let icon = null;
@ -56,7 +54,7 @@ const Input = React.createClass({
} }
return icon; return icon;
}, }
getInputProps() { getInputProps() {
let props = _.clone(this.props); let props = _.clone(this.props);
@ -73,7 +71,7 @@ const Input = React.createClass({
delete props.password; delete props.password;
return props; return props;
}, }
getClass() { getClass() {
let classes = { let classes = {
@ -86,13 +84,13 @@ const Input = React.createClass({
}; };
return classNames(classes); return classNames(classes);
}, }
focus() { focus() {
if (this.refs.nativeInput) { if (this.refs.nativeInput) {
this.refs.nativeInput.focus(); this.refs.nativeInput.focus();
} }
} }
}); }
export default Input; export default Input;

40
client/src/core-components/menu.js
View File

@ -1,34 +1,32 @@
const React = require('react'); import React from 'react';
const _ = require('lodash'); import _ from 'lodash';
const classNames = require('classnames'); import classNames from 'classnames';
const Icon = require('core-components/icon'); import Icon from 'core-components/icon';
const Menu = React.createClass({ class Menu extends React.Component {
propTypes: { static propTypes = {
type: React.PropTypes.oneOf(['primary', 'secondary']), type: React.PropTypes.oneOf(['primary', 'secondary']),
items: React.PropTypes.arrayOf(React.PropTypes.shape({ items: React.PropTypes.arrayOf(React.PropTypes.shape({
content: React.PropTypes.string.isRequired, content: React.PropTypes.string.isRequired,
icon: React.PropTypes.string icon: React.PropTypes.string
})).isRequired, })).isRequired,
selectedIndex: React.PropTypes.number selectedIndex: React.PropTypes.number
}, };
getDefaultProps() { static defaultProps = {
return { type: 'primary',
type: 'primary', selectedIndex: 0
selectedIndex: 0 };
};
},
render() { render() {
return ( return (
<ul {...this.getProps()}> <ul {...this.getProps()}>
{this.props.items.map(this.renderListItem)} {this.props.items.map(this.renderListItem.bind(this))}
</ul> </ul>
) )
}, }
renderListItem(item, index) { renderListItem(item, index) {
let iconNode = null; let iconNode = null;
@ -42,7 +40,7 @@ const Menu = React.createClass({
{iconNode}{item.content} {iconNode}{item.content}
</li> </li>
); );
}, }
getProps() { getProps() {
var props = _.clone(this.props); var props = _.clone(this.props);
@ -55,7 +53,7 @@ const Menu = React.createClass({
delete props.type; delete props.type;
return props; return props;
}, }
getClass() { getClass() {
let classes = { let classes = {
@ -66,7 +64,7 @@ const Menu = React.createClass({
classes[this.props.className] = true; classes[this.props.className] = true;
return classNames(classes); return classNames(classes);
}, }
getItemProps(index) { getItemProps(index) {
return { return {
@ -74,7 +72,7 @@ const Menu = React.createClass({
onClick: this.handleItemClick.bind(this, index), onClick: this.handleItemClick.bind(this, index),
key: index key: index
}; };
}, }
getItemClass(index) { getItemClass(index) {
let classes = { let classes = {
@ -83,13 +81,13 @@ const Menu = React.createClass({
}; };
return classNames(classes); return classNames(classes);
}, }
handleItemClick(index) { handleItemClick(index) {
if (this.props.onItemClick) { if (this.props.onItemClick) {
this.props.onItemClick(index); this.props.onItemClick(index);
} }
} }
}); }
export default Menu; export default Menu;

30
client/src/core-components/message.js
View File

@ -4,29 +4,27 @@ import classNames from 'classnames';
import {Motion, spring} from 'react-motion'; import {Motion, spring} from 'react-motion';
import Icon from 'core-components/icon'; import Icon from 'core-components/icon';
const Message = React.createClass({ class Message extends React.Component {
propTypes: { static propTypes = {
title: React.PropTypes.string, title: React.PropTypes.string,
children: React.PropTypes.node, children: React.PropTypes.node,
leftAligned: React.PropTypes.bool, leftAligned: React.PropTypes.bool,
type: React.PropTypes.oneOf(['success', 'error', 'info']) type: React.PropTypes.oneOf(['success', 'error', 'info'])
}, };
getDefaultProps() { static defaultProps = {
return { type: 'info',
type: 'info', leftAligned: false
leftAligned: false };
};
},
render() { render() {
return ( return (
<Motion {...this.getAnimationProps()}> <Motion {...this.getAnimationProps()}>
{this.renderMessage} {this.renderMessage.bind(this)}
</Motion> </Motion>
); );
}, }
getAnimationProps() { getAnimationProps() {
return { return {
@ -37,7 +35,7 @@ const Message = React.createClass({
opacity: spring(1, [100, 30]) opacity: spring(1, [100, 30])
} }
}; };
}, }
renderMessage(style) { renderMessage(style) {
return ( return (
@ -47,7 +45,7 @@ const Message = React.createClass({
<div className="message__content">{this.props.children}</div> <div className="message__content">{this.props.children}</div>
</div> </div>
) )
}, }
getClass() { getClass() {
let classes = { let classes = {
@ -62,7 +60,7 @@ const Message = React.createClass({
}; };
return classNames(classes); return classNames(classes);
}, }
getIconName() { getIconName() {
let iconNames = { let iconNames = {
@ -72,11 +70,11 @@ const Message = React.createClass({
}; };
return iconNames[this.props.type]; return iconNames[this.props.type];
}, }
getIconSize() { getIconSize() {
return (this.props.title) ? '2x' : 'lg'; return (this.props.title) ? '2x' : 'lg';
} }
}); }
export default Message; export default Message;

26
client/src/core-components/submit-button.js
View File

@ -6,21 +6,19 @@ import classNames from 'classnames';
// CORE LIBS // CORE LIBS
import Button from 'core-components/button'; import Button from 'core-components/button';
const SubmitButton = React.createClass({ class SubmitButton extends React.Component {
contextTypes: { static contextTypes = {
loading: React.PropTypes.bool loading: React.PropTypes.bool
}, };
propTypes: { static propTypes = {
children: React.PropTypes.node children: React.PropTypes.node
}, };
getDefaultProps() { static defaultProps = {
return { type: 'primary'
type: 'primary' };
};
},
render() { render() {
return ( return (
@ -28,20 +26,20 @@ const SubmitButton = React.createClass({
{(this.context.loading) ? this.renderLoading() : this.props.children} {(this.context.loading) ? this.renderLoading() : this.props.children}
</Button> </Button>
); );
}, }
renderLoading() { renderLoading() {
return ( return (
<div className="submit-button__loader"></div> <div className="submit-button__loader"></div>
); );
}, }
getProps() { getProps() {
return _.extend({}, this.props, { return _.extend({}, this.props, {
disabled: this.context.loading, disabled: this.context.loading,
className: this.getClass() className: this.getClass()
}); });
}, }
getClass() { getClass() {
let classes = { let classes = {
@ -53,6 +51,6 @@ const SubmitButton = React.createClass({
return classNames(classes); return classNames(classes);
} }
}); }
export default SubmitButton; export default SubmitButton;

30
client/src/core-components/widget-transition.js
View File

@ -3,35 +3,31 @@ import classNames from 'classnames';
import _ from 'lodash'; import _ from 'lodash';
import {Motion, spring} from 'react-motion'; import {Motion, spring} from 'react-motion';
import Widget from 'core-components/widget'; class WidgetTransition extends React.Component {
let WidgetTransition = React.createClass({ static propTypes = {
propTypes: {
sideToShow: React.PropTypes.string sideToShow: React.PropTypes.string
}, };
getDefaultProps() { static defaultProps = {
return { sideToShow: 'front'
sideToShow: 'front' };
};
},
getDefaultAnimation() { getDefaultAnimation() {
return { return {
rotateY: -90 rotateY: -90
}; };
}, }
render() { render() {
return ( return (
<Motion defaultStyle={this.getDefaultAnimation()} style={this.getAnimation()}> <Motion defaultStyle={this.getDefaultAnimation()} style={this.getAnimation()}>
{this.renderChildren} {this.renderChildren.bind(this)}
</Motion> </Motion>
); );
}, }
renderChildren: function (animation) { renderChildren(animation) {
return ( return (
<div className={this.getClass()}> <div className={this.getClass()}>
{React.Children.map(this.props.children, function (child, index) { {React.Children.map(this.props.children, function (child, index) {
@ -57,7 +53,7 @@ let WidgetTransition = React.createClass({
})} })}
</div> </div>
) )
}, }
getClass() { getClass() {
let classes = { let classes = {
@ -66,13 +62,13 @@ let WidgetTransition = React.createClass({
}; };
return classNames(classes); return classNames(classes);
}, }
getAnimation() { getAnimation() {
return { return {
rotateY: (this.props.sideToShow === 'front') ? spring(0, [100, 20]) : spring(180, [100, 20]) rotateY: (this.props.sideToShow === 'front') ? spring(0, [100, 20]) : spring(180, [100, 20])
}; };
} }
}); }
export default WidgetTransition; export default WidgetTransition;

20
client/src/core-components/widget.js
View File

@ -1,17 +1,15 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
let Widget = React.createClass({ class Widget extends React.Component {
propTypes: { static propTypes = {
title: React.PropTypes.string, title: React.PropTypes.string,
children: React.PropTypes.node.isRequired children: React.PropTypes.node.isRequired
}, };
getDefaultProps() { static defaultProps = {
return { title: ''
title: '' };
};
},
render() { render() {
return ( return (
@ -20,7 +18,7 @@ let Widget = React.createClass({
{this.props.children} {this.props.children}
</div> </div>
); );
}, }
renderTitle() { renderTitle() {
let titleNode = null; let titleNode = null;
@ -30,7 +28,7 @@ let Widget = React.createClass({
} }
return titleNode; return titleNode;
}, }
getClass() { getClass() {
let classes = { let classes = {
@ -41,6 +39,6 @@ let Widget = React.createClass({
return classNames(classes); return classNames(classes);
} }
}); }
export default Widget; export default Widget;