Bebel 6 Integrated, Stage-0 added, React updated
parent
794912990a
commit
f6047f880f
14
.babelrc
14
.babelrc
|
@ -1,11 +1,9 @@
|
||||||
{
|
{
|
||||||
"stage": 2,
|
"presets": ["react", "es2015", "stage-0"],
|
||||||
"optional": ["es7.classProperties", "es7.exportExtensions"],
|
|
||||||
"env": {
|
"env": {
|
||||||
"development": {
|
"development": {
|
||||||
"plugins": ["react-transform"],
|
"plugins": [
|
||||||
"extra": {
|
["react-transform", {
|
||||||
"react-transform": {
|
|
||||||
"transforms": [{
|
"transforms": [{
|
||||||
"transform": "react-transform-hmr",
|
"transform": "react-transform-hmr",
|
||||||
"imports": ["react"],
|
"imports": ["react"],
|
||||||
|
@ -14,8 +12,8 @@
|
||||||
"transform": "react-transform-catch-errors",
|
"transform": "react-transform-catch-errors",
|
||||||
"imports": ["react", "redbox-react"]
|
"imports": ["react", "redbox-react"]
|
||||||
}]
|
}]
|
||||||
}
|
}]
|
||||||
}
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -1,206 +1,206 @@
|
||||||
import React from 'react';
|
//import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
//import ReactDOM from 'react-dom';
|
||||||
import ClassNames from 'classnames';
|
//import ClassNames from 'classnames';
|
||||||
import Input from '../input';
|
//import Input from '../input';
|
||||||
import events from '../utils/events';
|
//import events from '../utils/events';
|
||||||
import style from './style';
|
//import style from './style';
|
||||||
|
//
|
||||||
const POSITION = {
|
//const POSITION = {
|
||||||
AUTO: 'auto',
|
// AUTO: 'auto',
|
||||||
DOWN: 'down',
|
// DOWN: 'down',
|
||||||
UP: 'up'
|
// UP: 'up'
|
||||||
};
|
//};
|
||||||
|
//
|
||||||
class Autocomplete extends React.Component {
|
//class Autocomplete extends React.Component {
|
||||||
static propTypes = {
|
// static propTypes = {
|
||||||
className: React.PropTypes.string,
|
// className: React.PropTypes.string,
|
||||||
direction: React.PropTypes.oneOf(['auto', 'up', 'down']),
|
// direction: React.PropTypes.oneOf(['auto', 'up', 'down']),
|
||||||
disabled: React.PropTypes.bool,
|
// disabled: React.PropTypes.bool,
|
||||||
error: React.PropTypes.string,
|
// error: React.PropTypes.string,
|
||||||
label: React.PropTypes.string,
|
// label: React.PropTypes.string,
|
||||||
multiple: React.PropTypes.bool,
|
// multiple: React.PropTypes.bool,
|
||||||
onChange: React.PropTypes.func,
|
// onChange: React.PropTypes.func,
|
||||||
source: React.PropTypes.any,
|
// source: React.PropTypes.any,
|
||||||
value: React.PropTypes.any
|
// value: React.PropTypes.any
|
||||||
};
|
// };
|
||||||
|
//
|
||||||
static defaultProps = {
|
// static defaultProps = {
|
||||||
className: '',
|
// className: '',
|
||||||
direction: 'auto',
|
// direction: 'auto',
|
||||||
multiple: true,
|
// multiple: true,
|
||||||
source: {}
|
// source: {}
|
||||||
};
|
// };
|
||||||
|
//
|
||||||
state = {
|
// state = {
|
||||||
direction: this.props.direction,
|
// direction: this.props.direction,
|
||||||
focus: false,
|
// focus: false,
|
||||||
query: this.query(this.props.value)
|
// query: this.query(this.props.value)
|
||||||
};
|
// };
|
||||||
|
//
|
||||||
componentWillReceiveProps (nextProps) {
|
// componentWillReceiveProps (nextProps) {
|
||||||
if (!this.props.multiple) {
|
// if (!this.props.multiple) {
|
||||||
this.setState({query: nextProps.value});
|
// this.setState({query: nextProps.value});
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
shouldComponentUpdate (nextProps, nextState) {
|
// shouldComponentUpdate (nextProps, nextState) {
|
||||||
if (!this.state.focus && nextState.focus && this.props.direction === POSITION.AUTO) {
|
// if (!this.state.focus && nextState.focus && this.props.direction === POSITION.AUTO) {
|
||||||
const direction = this.calculateDirection();
|
// const direction = this.calculateDirection();
|
||||||
if (this.state.direction !== direction) {
|
// if (this.state.direction !== direction) {
|
||||||
this.setState({ direction });
|
// this.setState({ direction });
|
||||||
return false;
|
// return false;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
return true;
|
// return true;
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
handleChange = (keys, event) => {
|
// handleChange = (keys, event) => {
|
||||||
const key = this.props.multiple ? keys : keys[0];
|
// const key = this.props.multiple ? keys : keys[0];
|
||||||
const query = this.query(key);
|
// const query = this.query(key);
|
||||||
if (this.props.onChange) this.props.onChange(key, event);
|
// if (this.props.onChange) this.props.onChange(key, event);
|
||||||
this.setState({ focus: false, query }, () => { this.refs.input.blur(); });
|
// this.setState({ focus: false, query }, () => { this.refs.input.blur(); });
|
||||||
};
|
// };
|
||||||
|
//
|
||||||
handleQueryBlur = () => {
|
// handleQueryBlur = () => {
|
||||||
if (this.state.focus) this.setState({focus: false});
|
// if (this.state.focus) this.setState({focus: false});
|
||||||
};
|
// };
|
||||||
|
//
|
||||||
handleQueryChange = (value) => {
|
// handleQueryChange = (value) => {
|
||||||
this.setState({query: value});
|
// this.setState({query: value});
|
||||||
};
|
// };
|
||||||
|
//
|
||||||
handleQueryFocus = () => {
|
// handleQueryFocus = () => {
|
||||||
this.refs.suggestions.scrollTop = 0;
|
// this.refs.suggestions.scrollTop = 0;
|
||||||
this.setState({active: '', focus: true});
|
// this.setState({active: '', focus: true});
|
||||||
};
|
// };
|
||||||
|
//
|
||||||
handleQueryKeyUp = (event) => {
|
// handleQueryKeyUp = (event) => {
|
||||||
if (event.which === 13 && this.state.active) this.select(this.state.active, event);
|
// if (event.which === 13 && this.state.active) this.select(this.state.active, event);
|
||||||
if (event.which === 27) this.refs.input.blur();
|
// if (event.which === 27) this.refs.input.blur();
|
||||||
if ([40, 38].indexOf(event.which) !== -1) {
|
// if ([40, 38].indexOf(event.which) !== -1) {
|
||||||
const suggestionsKeys = [...this.suggestions().keys()];
|
// const suggestionsKeys = [...this.suggestions().keys()];
|
||||||
let index = suggestionsKeys.indexOf(this.state.active) + (event.which === 40 ? +1 : -1);
|
// let index = suggestionsKeys.indexOf(this.state.active) + (event.which === 40 ? +1 : -1);
|
||||||
if (index < 0) index = suggestionsKeys.length - 1;
|
// if (index < 0) index = suggestionsKeys.length - 1;
|
||||||
if (index >= suggestionsKeys.length) index = 0;
|
// if (index >= suggestionsKeys.length) index = 0;
|
||||||
this.setState({active: suggestionsKeys[index]});
|
// this.setState({active: suggestionsKeys[index]});
|
||||||
}
|
// }
|
||||||
};
|
// };
|
||||||
|
//
|
||||||
handleSuggestionHover = (key) => {
|
// handleSuggestionHover = (key) => {
|
||||||
this.setState({active: key});
|
// this.setState({active: key});
|
||||||
};
|
// };
|
||||||
|
//
|
||||||
calculateDirection () {
|
// calculateDirection () {
|
||||||
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 = client.top > ((screen_height / 2) + client.height);
|
// 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;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
query (key) {
|
// query (key) {
|
||||||
return !this.props.multiple && this.props.value ? this.source().get(key) : '';
|
// return !this.props.multiple && this.props.value ? this.source().get(key) : '';
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
suggestions () {
|
// suggestions2 () {
|
||||||
const suggestions = new Map();
|
// const suggestions2 = new Map();
|
||||||
const query = this.state.query.toLowerCase().trim() || '';
|
// const query = this.state.query.toLowerCase().trim() || '';
|
||||||
const values = this.values();
|
// const values = this.values();
|
||||||
for (const [key, value] of this.source()) {
|
// for (const [key, value] of this.source()) {
|
||||||
if (!values.has(key) && value.toLowerCase().trim().startsWith(query)) {
|
// if (!values.has(key) && value.toLowerCase().trim().startsWith(query)) {
|
||||||
suggestions.set(key, value);
|
// suggestions2.set(key, value);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
return suggestions;
|
// return suggestions2;
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
source () {
|
// source () {
|
||||||
const { source } = this.props;
|
// const { source } = this.props;
|
||||||
if (source.hasOwnProperty('length')) {
|
// if (source.hasOwnProperty('length')) {
|
||||||
return new Map(source.map((item) => [item, item]));
|
// return new Map(source.map((item) => [item, item]));
|
||||||
} else {
|
// } else {
|
||||||
return new Map(Object.keys(source).map((key) => [key, source[key]]));
|
// return new Map(Object.keys(source).map((key) => [key, source[key]]));
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
values () {
|
// values () {
|
||||||
const valueMap = new Map();
|
// const valueMap = new Map();
|
||||||
const values = this.props.multiple ? this.props.value : [this.props.value];
|
// const values = this.props.multiple ? this.props.value : [this.props.value];
|
||||||
for (const [k, v] of this.source()) {
|
// for (const [k, v] of this.source()) {
|
||||||
if (values.indexOf(k) !== -1) valueMap.set(k, v);
|
// if (values.indexOf(k) !== -1) valueMap.set(k, v);
|
||||||
}
|
// }
|
||||||
return valueMap;
|
// return valueMap;
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
select (key, event) {
|
// select (key, event) {
|
||||||
events.pauseEvent(event);
|
// events.pauseEvent(event);
|
||||||
const values = this.values(this.props.value);
|
// const values = this.values(this.props.value);
|
||||||
this.handleChange([key, ...values.keys()], event);
|
// this.handleChange([key, ...values.keys()], event);
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
unselect (key, event) {
|
// unselect (key, event) {
|
||||||
const values = this.values(this.props.value);
|
// const values = this.values(this.props.value);
|
||||||
values.delete(key);
|
// values.delete(key);
|
||||||
this.handleChange([...values.keys()], event);
|
// this.handleChange([...values.keys()], event);
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
renderSelected () {
|
// renderSelected () {
|
||||||
if (this.props.multiple) {
|
// if (this.props.multiple) {
|
||||||
const selectedItems = [...this.values()].map(([key, value]) => {
|
// const selectedItems = [...this.values()].map(([key, value]) => {
|
||||||
return <li key={key} className={style.value} onClick={this.unselect.bind(this, key)}>{value}</li>;
|
// return <li key={key} className={style.value} onClick={this.unselect.bind(this, key)}>{value}</li>;
|
||||||
});
|
// });
|
||||||
|
//
|
||||||
return <ul className={style.values}>{selectedItems}</ul>;
|
// return <ul className={style.values}>{selectedItems}</ul>;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
renderSuggestions () {
|
// renderSuggestions () {
|
||||||
const suggestions = [...this.suggestions()].map(([key, value]) => {
|
// const suggestions2 = [...this.suggestions2()].map(([key, value]) => {
|
||||||
const className = ClassNames(style.suggestion, {[style.active]: this.state.active === key});
|
// const className = ClassNames(style.suggestion, {[style.active]: this.state.active === key});
|
||||||
return (
|
// return (
|
||||||
<li
|
// <li
|
||||||
key={key}
|
// key={key}
|
||||||
className={className}
|
// className={className}
|
||||||
onMouseDown={this.select.bind(this, key)}
|
// onMouseDown={this.select.bind(this, key)}
|
||||||
onMouseOver={this.handleSuggestionHover.bind(this, key)}
|
// onMouseOver={this.handleSuggestionHover.bind(this, key)}
|
||||||
>
|
// >
|
||||||
{value}
|
// {value}
|
||||||
</li>
|
// </li>
|
||||||
);
|
// );
|
||||||
});
|
// });
|
||||||
|
//
|
||||||
const className = ClassNames(style.suggestions, {[style.up]: this.state.direction === 'up'});
|
// const className = ClassNames(style.suggestions2, {[style.up]: this.state.direction === 'up'});
|
||||||
return <ul ref='suggestions' className={className}>{suggestions}</ul>;
|
// return <ul ref='suggestions' className={className}>{suggestions}</ul>;
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
render () {
|
// render () {
|
||||||
const {error, label, ...other} = this.props;
|
// const {error, label, ...other} = this.props;
|
||||||
const className = ClassNames(style.root, {
|
// const className = ClassNames(style.root, {
|
||||||
[style.focus]: this.state.focus
|
// [style.focus]: this.state.focus
|
||||||
}, this.props.className);
|
// }, this.props.className);
|
||||||
|
//
|
||||||
return (
|
// return (
|
||||||
<div data-react-toolbox='autocomplete' className={className}>
|
// <div data-react-toolbox='autocomplete' className={className}>
|
||||||
{this.renderSelected()}
|
// {this.renderSelected()}
|
||||||
<Input
|
// <Input
|
||||||
{...other}
|
// {...other}
|
||||||
ref='input'
|
// ref='input'
|
||||||
className={style.input}
|
// className={style.input}
|
||||||
error={error}
|
// error={error}
|
||||||
label={label}
|
// label={label}
|
||||||
onBlur={this.handleQueryBlur}
|
// onBlur={this.handleQueryBlur}
|
||||||
onChange={this.handleQueryChange}
|
// onChange={this.handleQueryChange}
|
||||||
onFocus={this.handleQueryFocus}
|
// onFocus={this.handleQueryFocus}
|
||||||
onKeyUp={this.handleQueryKeyUp}
|
// onKeyUp={this.handleQueryKeyUp}
|
||||||
value={this.state.query}
|
// value={this.state.query}
|
||||||
/>
|
// />
|
||||||
{this.renderSuggestions()}
|
// {this.renderSuggestions()}
|
||||||
</div>
|
// </div>
|
||||||
);
|
// );
|
||||||
}
|
// }
|
||||||
}
|
//}
|
||||||
|
//
|
||||||
export default Autocomplete;
|
//export default Autocomplete;
|
||||||
|
|
|
@ -102,7 +102,7 @@ class Slider extends React.Component {
|
||||||
|
|
||||||
handleResize = (event, callback) => {
|
handleResize = (event, callback) => {
|
||||||
const {left, right} = ReactDOM.findDOMNode(this.refs.progressbar).getBoundingClientRect();
|
const {left, right} = ReactDOM.findDOMNode(this.refs.progressbar).getBoundingClientRect();
|
||||||
const cb = callback || () => {};
|
const cb = (callback) || (() => {});
|
||||||
this.setState({sliderStart: left, sliderLength: right - left}, cb);
|
this.setState({sliderStart: left, sliderLength: right - left}, cb);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"presets": ["react", "es2015", "stage-0"],
|
||||||
|
"env": {
|
||||||
|
"development": {
|
||||||
|
"plugins": [
|
||||||
|
["react-transform", {
|
||||||
|
"transforms": [{
|
||||||
|
"transform": "react-transform-hmr",
|
||||||
|
"imports": ["react"],
|
||||||
|
"locals": ["module"]
|
||||||
|
}, {
|
||||||
|
"transform": "react-transform-catch-errors",
|
||||||
|
"imports": ["react", "redbox-react"]
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,237 @@
|
||||||
|
{
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"node": true,
|
||||||
|
"mocha": true,
|
||||||
|
"es6": true
|
||||||
|
},
|
||||||
|
|
||||||
|
"ecmaFeatures": {
|
||||||
|
"jsx": true,
|
||||||
|
"templateStrings": true,
|
||||||
|
"superInFunctions": false,
|
||||||
|
"classes": true,
|
||||||
|
"modules": true
|
||||||
|
},
|
||||||
|
|
||||||
|
"parser": "babel-eslint",
|
||||||
|
|
||||||
|
"plugins": [
|
||||||
|
"babel",
|
||||||
|
"react"
|
||||||
|
],
|
||||||
|
|
||||||
|
"rules": {
|
||||||
|
"block-scoped-var": [0],
|
||||||
|
"brace-style": [2, "1tbs", {
|
||||||
|
"allowSingleLine": true
|
||||||
|
}],
|
||||||
|
"camelcase": [0],
|
||||||
|
"comma-dangle": [2, "never"],
|
||||||
|
"comma-spacing": [2],
|
||||||
|
"comma-style": [2, "last"],
|
||||||
|
"complexity": [0, 11],
|
||||||
|
"constructor-super": [2],
|
||||||
|
"consistent-return": [2],
|
||||||
|
"consistent-this": [0, "that"],
|
||||||
|
"curly": [2, "multi-line"],
|
||||||
|
"default-case": [2],
|
||||||
|
"dot-notation": [2, {
|
||||||
|
"allowKeywords": true
|
||||||
|
}],
|
||||||
|
"eol-last": [2],
|
||||||
|
"eqeqeq": [2],
|
||||||
|
"func-names": [0],
|
||||||
|
"func-style": [0, "declaration"],
|
||||||
|
"generator-star-spacing": [2, "after"],
|
||||||
|
"strict": [2, "always"],
|
||||||
|
"guard-for-in": [0],
|
||||||
|
"handle-callback-err": [0],
|
||||||
|
"key-spacing": [2, {
|
||||||
|
"beforeColon": false,
|
||||||
|
"afterColon": true
|
||||||
|
}],
|
||||||
|
"quotes": [2, "single", "avoid-escape"],
|
||||||
|
"max-depth": [0, 4],
|
||||||
|
"max-len": [0, 80, 4],
|
||||||
|
"max-nested-callbacks": [0, 2],
|
||||||
|
"max-params": [0, 3],
|
||||||
|
"max-statements": [0, 10],
|
||||||
|
"new-parens": [2],
|
||||||
|
"new-cap": [0],
|
||||||
|
"newline-after-var": [0],
|
||||||
|
"no-alert": [2],
|
||||||
|
"no-array-constructor": [2],
|
||||||
|
"no-bitwise": [0],
|
||||||
|
"no-caller": [2],
|
||||||
|
"no-catch-shadow": [2],
|
||||||
|
"no-cond-assign": [2],
|
||||||
|
"no-console": [0],
|
||||||
|
"no-constant-condition": [1],
|
||||||
|
"no-continue": [2],
|
||||||
|
"no-control-regex": [2],
|
||||||
|
"no-debugger": [2],
|
||||||
|
"no-delete-var": [2],
|
||||||
|
"no-div-regex": [0],
|
||||||
|
"no-dupe-args": [2],
|
||||||
|
"no-dupe-keys": [2],
|
||||||
|
"no-duplicate-case": [2],
|
||||||
|
"no-else-return": [0],
|
||||||
|
"no-empty": [2],
|
||||||
|
"no-empty-character-class": [2],
|
||||||
|
"no-empty-label": [2],
|
||||||
|
"no-eq-null": [0],
|
||||||
|
"no-eval": [2],
|
||||||
|
"no-ex-assign": [2],
|
||||||
|
"no-extend-native": [1],
|
||||||
|
"no-extra-bind": [2],
|
||||||
|
"no-extra-boolean-cast": [2],
|
||||||
|
"no-extra-parens": [0],
|
||||||
|
"no-extra-semi": [1],
|
||||||
|
"no-fallthrough": [2],
|
||||||
|
"no-floating-decimal": [2],
|
||||||
|
"no-func-assign": [2],
|
||||||
|
"no-implied-eval": [2],
|
||||||
|
"no-inline-comments": [0],
|
||||||
|
"no-inner-declarations": [2, "functions"],
|
||||||
|
"no-invalid-regexp": [2],
|
||||||
|
"no-irregular-whitespace": [2],
|
||||||
|
"no-iterator": [2],
|
||||||
|
"no-label-var": [2],
|
||||||
|
"no-labels": [2],
|
||||||
|
"no-lone-blocks": [2],
|
||||||
|
"no-lonely-if": [2],
|
||||||
|
"no-loop-func": [2],
|
||||||
|
"no-mixed-requires": [0, false],
|
||||||
|
"no-mixed-spaces-and-tabs": [2, false],
|
||||||
|
"no-multi-spaces": [2],
|
||||||
|
"no-multi-str": [2],
|
||||||
|
"no-multiple-empty-lines": [2, {
|
||||||
|
"max": 2
|
||||||
|
}],
|
||||||
|
"no-native-reassign": [1],
|
||||||
|
"no-negated-in-lhs": [2],
|
||||||
|
"no-nested-ternary": [0],
|
||||||
|
"no-new": [2],
|
||||||
|
"no-new-func": [2],
|
||||||
|
"no-new-object": [2],
|
||||||
|
"no-new-require": [0],
|
||||||
|
"no-new-wrappers": [2],
|
||||||
|
"no-obj-calls": [2],
|
||||||
|
"no-octal": [2],
|
||||||
|
"no-octal-escape": [2],
|
||||||
|
"no-path-concat": [0],
|
||||||
|
"no-param-reassign": [2],
|
||||||
|
"no-plusplus": [0],
|
||||||
|
"no-process-env": [0],
|
||||||
|
"no-process-exit": [2],
|
||||||
|
"no-proto": [2],
|
||||||
|
"no-redeclare": [2],
|
||||||
|
"no-regex-spaces": [2],
|
||||||
|
"no-reserved-keys": [0],
|
||||||
|
"no-restricted-modules": [0],
|
||||||
|
"no-return-assign": [2],
|
||||||
|
"no-script-url": [2],
|
||||||
|
"no-self-compare": [0],
|
||||||
|
"no-sequences": [2],
|
||||||
|
"no-shadow": [2],
|
||||||
|
"no-shadow-restricted-names": [2],
|
||||||
|
"semi-spacing": [2],
|
||||||
|
"no-spaced-func": [2],
|
||||||
|
"no-sparse-arrays": [2],
|
||||||
|
"no-sync": [0],
|
||||||
|
"no-ternary": [0],
|
||||||
|
"no-this-before-super": [2],
|
||||||
|
"no-throw-literal": [2],
|
||||||
|
"no-trailing-spaces": [2],
|
||||||
|
"no-undef": [2],
|
||||||
|
"no-undef-init": [2],
|
||||||
|
"no-undefined": [0],
|
||||||
|
"no-underscore-dangle": [0],
|
||||||
|
"no-unreachable": [2],
|
||||||
|
"no-unused-expressions": [2],
|
||||||
|
"no-unused-vars": [1, {
|
||||||
|
"vars": "all",
|
||||||
|
"args": "after-used"
|
||||||
|
}],
|
||||||
|
"no-use-before-define": [2, "nofunc"],
|
||||||
|
"no-var": [2],
|
||||||
|
"no-void": [0],
|
||||||
|
"no-warning-comments": [0, {
|
||||||
|
"terms": ["todo", "fixme", "xxx"],
|
||||||
|
"location": "start"
|
||||||
|
}],
|
||||||
|
"no-with": [2],
|
||||||
|
"one-var": [0],
|
||||||
|
"operator-assignment": [0, "always"],
|
||||||
|
"operator-linebreak": [2, "after"],
|
||||||
|
"padded-blocks": [0],
|
||||||
|
"prefer-const": [2],
|
||||||
|
"prefer-spread": [2],
|
||||||
|
"quote-props": [0],
|
||||||
|
"radix": [0],
|
||||||
|
"semi": [2],
|
||||||
|
"semi-spacing": [2, {
|
||||||
|
"before": false,
|
||||||
|
"after": true
|
||||||
|
}],
|
||||||
|
"sort-vars": [0],
|
||||||
|
"space-after-keywords": [2, "always"],
|
||||||
|
"space-before-function-paren": [2, {
|
||||||
|
"anonymous": "always",
|
||||||
|
"named": "always"
|
||||||
|
}],
|
||||||
|
"space-before-blocks": [0, "always"],
|
||||||
|
"space-in-brackets": [0, "never", {
|
||||||
|
"singleValue": true,
|
||||||
|
"arraysInArrays": false,
|
||||||
|
"arraysInObjects": false,
|
||||||
|
"objectsInArrays": true,
|
||||||
|
"objectsInObjects": true,
|
||||||
|
"propertyName": false
|
||||||
|
}],
|
||||||
|
"space-in-parens": [2, "never"],
|
||||||
|
"space-infix-ops": [2],
|
||||||
|
"space-return-throw-case": [2],
|
||||||
|
"space-unary-ops": [2, {
|
||||||
|
"words": true,
|
||||||
|
"nonwords": false
|
||||||
|
}],
|
||||||
|
"spaced-line-comment": [0, "always"],
|
||||||
|
"strict": [1],
|
||||||
|
"use-isnan": [2],
|
||||||
|
"valid-jsdoc": [0],
|
||||||
|
"valid-typeof": [2],
|
||||||
|
"vars-on-top": [0],
|
||||||
|
"wrap-iife": [2],
|
||||||
|
"wrap-regex": [2],
|
||||||
|
"yoda": [2, "never", {
|
||||||
|
"exceptRange": true
|
||||||
|
}],
|
||||||
|
"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": 0,
|
||||||
|
"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
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,3 +1,5 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import { Button } from 'react-toolbox';
|
import { Button } from 'react-toolbox';
|
||||||
|
|
|
@ -11,18 +11,21 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"classnames": "^2.2.1",
|
"classnames": "^2.2.1",
|
||||||
"codemirror": "^5.8.0",
|
"codemirror": "^5.8.0",
|
||||||
"history": "^1.12.6",
|
"history": "^1.17.0",
|
||||||
"react": "^0.14.0",
|
"react": "^0.14.3",
|
||||||
"react-dom": "^0.14.0",
|
"react-dom": "^0.14.3",
|
||||||
"react-router": "^1.0.0-rc3"
|
"react-router": "^1.0.0-rc3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer": "^6.0.3",
|
"autoprefixer": "^6.0.3",
|
||||||
"babel": "^5.8.23",
|
"babel-core": "^6.3.15",
|
||||||
"babel-core": "^5.8.23",
|
"babel-eslint": "^5.0.0-beta4",
|
||||||
"babel-eslint": "^4.1.3",
|
"babel-loader": "^6.2.0",
|
||||||
"babel-loader": "^5.3.2",
|
"babel-plugin-react-transform": "^2.0.0-beta1",
|
||||||
"babel-plugin-react-transform": "^1.1.1",
|
"babel-preset-es2015": "^6.3.13",
|
||||||
|
"babel-preset-react": "^6.3.13",
|
||||||
|
"babel-preset-stage-0": "^6.3.13",
|
||||||
|
"babel-preset-stage-2": "^6.3.13",
|
||||||
"cross-env": "^1.0.4",
|
"cross-env": "^1.0.4",
|
||||||
"css-loader": "^0.21.0",
|
"css-loader": "^0.21.0",
|
||||||
"express": "^4.13.3",
|
"express": "^4.13.3",
|
||||||
|
@ -43,9 +46,9 @@
|
||||||
"style-loader": "^0.13.0",
|
"style-loader": "^0.13.0",
|
||||||
"toolbox-loader": "0.0.2",
|
"toolbox-loader": "0.0.2",
|
||||||
"transfer-webpack-plugin": "^0.1.4",
|
"transfer-webpack-plugin": "^0.1.4",
|
||||||
"webpack": "^1.12.0",
|
"webpack": "^1.12.9",
|
||||||
"webpack-dev-middleware": "^1.2.0",
|
"webpack-dev-middleware": "^1.4.0",
|
||||||
"webpack-hot-middleware": "^2.4.1"
|
"webpack-hot-middleware": "^2.6.0"
|
||||||
},
|
},
|
||||||
"repository": "github:react-toolbox/react-toolbox",
|
"repository": "github:react-toolbox/react-toolbox",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
|
|
|
@ -7,6 +7,7 @@ const app = express();
|
||||||
const compiler = webpack(config);
|
const compiler = webpack(config);
|
||||||
|
|
||||||
app.use(require('webpack-dev-middleware')(compiler, {
|
app.use(require('webpack-dev-middleware')(compiler, {
|
||||||
|
noInfo: true,
|
||||||
publicPath: config.output.publicPath,
|
publicPath: config.output.publicPath,
|
||||||
stats: {
|
stats: {
|
||||||
colors: true
|
colors: true
|
||||||
|
@ -15,15 +16,15 @@ app.use(require('webpack-dev-middleware')(compiler, {
|
||||||
|
|
||||||
app.use(require('webpack-hot-middleware')(compiler));
|
app.use(require('webpack-hot-middleware')(compiler));
|
||||||
|
|
||||||
app.get('*', (req, res) => {
|
app.get('*', function(req, res) {
|
||||||
res.sendFile(path.join(__dirname, './www/index.html'));
|
res.sendFile(path.join(__dirname, './www/index.html'));
|
||||||
});
|
});
|
||||||
|
|
||||||
app.listen(8081, '0.0.0.0', (err) => {
|
app.listen(8081, '0.0.0.0', function(err) {
|
||||||
if (err) {
|
if (err) {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log('Listening at http://0.0.0.0:8081');
|
console.log('Listening at http://0.0.0.0:8081');
|
||||||
});
|
});
|
||||||
|
|
|
@ -6,7 +6,7 @@ const TransferWebpackPlugin = require('transfer-webpack-plugin');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
context: __dirname,
|
context: __dirname,
|
||||||
devtool: 'inline-source-map',
|
devtool: 'inline-source-map',
|
||||||
entry: [
|
entry: [
|
||||||
'webpack-hot-middleware/client',
|
'webpack-hot-middleware/client',
|
||||||
'./app/index.jsx'
|
'./app/index.jsx'
|
||||||
|
@ -31,18 +31,18 @@ module.exports = {
|
||||||
module: {
|
module: {
|
||||||
loaders: [
|
loaders: [
|
||||||
{
|
{
|
||||||
test: /(\.js|\.jsx)$/,
|
test: /\.(js|jsx)$/,
|
||||||
exclude: /(node_modules)/,
|
exclude: /(node_modules)/,
|
||||||
loader: 'babel'
|
loader: 'babel'
|
||||||
}, {
|
}, {
|
||||||
test: /(\.scss|\.css)$/,
|
test: /\.(scss|css)$/,
|
||||||
loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap!toolbox')
|
loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap!toolbox')
|
||||||
}, {
|
}, {
|
||||||
test: /(\.txt)$/,
|
test: /\.(txt)$/,
|
||||||
loader: 'raw',
|
loader: 'raw',
|
||||||
include: path.resolve(__dirname, './app/components/layout/main/modules')
|
include: path.resolve(__dirname, './app/components/layout/main/modules')
|
||||||
}, {
|
}, {
|
||||||
test: /(\.md)$/,
|
test: /\.(md)$/,
|
||||||
loader: 'html!highlight!markdown'
|
loader: 'html!highlight!markdown'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
@ -27,18 +27,18 @@ module.exports = {
|
||||||
module: {
|
module: {
|
||||||
loaders: [
|
loaders: [
|
||||||
{
|
{
|
||||||
test: /(\.js|\.jsx)$/,
|
test: /\.(js|jsx)$/,
|
||||||
exclude: /(node_modules)/,
|
exclude: /(node_modules)/,
|
||||||
loader: 'babel'
|
loader: 'babel'
|
||||||
}, {
|
}, {
|
||||||
test: /(\.scss|\.css)$/,
|
test: /\.(scss|css)$/,
|
||||||
loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass!toolbox')
|
loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass!toolbox')
|
||||||
}, {
|
}, {
|
||||||
test: /(\.txt)$/,
|
test: /\.(txt)$/,
|
||||||
loader: 'raw',
|
loader: 'raw',
|
||||||
include: path.resolve(__dirname, './app/components/layout/main/modules')
|
include: path.resolve(__dirname, './app/components/layout/main/modules')
|
||||||
}, {
|
}, {
|
||||||
test: /(\.md)$/,
|
test: /\.(md)$/,
|
||||||
loader: 'html?removeComments=false!highlight!markdown'
|
loader: 'html?removeComments=false!highlight!markdown'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
34
package.json
34
package.json
|
@ -52,19 +52,22 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer": "^6.0.3",
|
"autoprefixer": "^6.0.3",
|
||||||
"babel": "^5.8.23",
|
"babel-core": "^6.3.15",
|
||||||
"babel-core": "^5.8.23",
|
"babel-eslint": "^5.0.0-beta4",
|
||||||
"babel-eslint": "^4.1.6",
|
"babel-loader": "^6.2.0",
|
||||||
"babel-loader": "^5.3.2",
|
"babel-plugin-react-transform": "^2.0.0-beta1",
|
||||||
"babel-plugin-react-transform": "^1.1.1",
|
"babel-preset-es2015": "^6.3.13",
|
||||||
|
"babel-preset-react": "^6.3.13",
|
||||||
|
"babel-preset-stage-0": "^6.3.13",
|
||||||
|
"babel-preset-stage-2": "^6.3.13",
|
||||||
"bluebird": "^3.0.5",
|
"bluebird": "^3.0.5",
|
||||||
"core-js": "^1.2.6",
|
"core-js": "^1.2.6",
|
||||||
"cpx": "^1.2.1",
|
"cpx": "^1.2.1",
|
||||||
"cross-env": "^1.0.4",
|
"cross-env": "^1.0.4",
|
||||||
"css-loader": "^0.21.0",
|
"css-loader": "^0.21.0",
|
||||||
"eslint": "^1.10.1",
|
"eslint": "^1.10.3",
|
||||||
"eslint-plugin-babel": "^2.1.1",
|
"eslint-plugin-babel": "^3.0.0",
|
||||||
"eslint-plugin-react": "^3.10.0",
|
"eslint-plugin-react": "^3.11.3",
|
||||||
"expect": "^1.8.0",
|
"expect": "^1.8.0",
|
||||||
"express": "^4.13.3",
|
"express": "^4.13.3",
|
||||||
"extract-text-webpack-plugin": "^0.8.2",
|
"extract-text-webpack-plugin": "^0.8.2",
|
||||||
|
@ -81,11 +84,11 @@
|
||||||
"phantomjs": "^1.9.18",
|
"phantomjs": "^1.9.18",
|
||||||
"phantomjs-polyfill": "0.0.1",
|
"phantomjs-polyfill": "0.0.1",
|
||||||
"postcss-loader": "^0.7.0",
|
"postcss-loader": "^0.7.0",
|
||||||
"react": "^0.14",
|
"react": "^0.14.3",
|
||||||
"react-addons-css-transition-group": "^0.14.0",
|
"react-addons-css-transition-group": "^0.14.0",
|
||||||
"react-addons-test-utils": "^0.14.0",
|
"react-addons-test-utils": "^0.14.0",
|
||||||
"react-docgen": "^2.4.0",
|
"react-docgen": "^2.4.0",
|
||||||
"react-dom": "^0.14.0",
|
"react-dom": "^0.14.3",
|
||||||
"react-transform-catch-errors": "^1.0.0",
|
"react-transform-catch-errors": "^1.0.0",
|
||||||
"react-transform-hmr": "^1.0.1",
|
"react-transform-hmr": "^1.0.1",
|
||||||
"redbox-react": "^1.1.1",
|
"redbox-react": "^1.1.1",
|
||||||
|
@ -94,9 +97,12 @@
|
||||||
"sinon": "git://github.com/sinonjs/sinon.git#b672042043517b9f84e14ed0fb8265126168778a",
|
"sinon": "git://github.com/sinonjs/sinon.git#b672042043517b9f84e14ed0fb8265126168778a",
|
||||||
"style-loader": "^0.13.0",
|
"style-loader": "^0.13.0",
|
||||||
"toolbox-loader": "0.0.2",
|
"toolbox-loader": "0.0.2",
|
||||||
"webpack": "^1.12.0",
|
"webpack": "^1.12.9",
|
||||||
"webpack-dev-middleware": "^1.2.0",
|
"webpack-dev-middleware": "^1.4.0",
|
||||||
"webpack-hot-middleware": "^2.4.1"
|
"webpack-hot-middleware": "^2.6.0"
|
||||||
},
|
},
|
||||||
"repository": "github:react-toolbox/react-toolbox"
|
"repository": "github:react-toolbox/react-toolbox",
|
||||||
|
"dependencies": {
|
||||||
|
"classnames": "^2.2.1"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
19
server.js
19
server.js
|
@ -7,7 +7,8 @@ const app = express();
|
||||||
const compiler = webpack(config);
|
const compiler = webpack(config);
|
||||||
|
|
||||||
app.use(require('webpack-dev-middleware')(compiler, {
|
app.use(require('webpack-dev-middleware')(compiler, {
|
||||||
publicPath: config.output.publicPath,
|
noInfo: true,
|
||||||
|
publicPath: config.output.publicPath,
|
||||||
stats: {
|
stats: {
|
||||||
colors: true
|
colors: true
|
||||||
}
|
}
|
||||||
|
@ -15,15 +16,15 @@ app.use(require('webpack-dev-middleware')(compiler, {
|
||||||
|
|
||||||
app.use(require('webpack-hot-middleware')(compiler));
|
app.use(require('webpack-hot-middleware')(compiler));
|
||||||
|
|
||||||
app.get('*', (req, res) => {
|
app.get('*', function(req, res) {
|
||||||
res.sendFile(path.join(__dirname, './spec/index.html'));
|
res.sendFile(path.join(__dirname, './www/index.html'));
|
||||||
});
|
});
|
||||||
|
|
||||||
app.listen(8080, '0.0.0.0', (err) => {
|
app.listen(8081, '0.0.0.0', function(err) {
|
||||||
if (err) {
|
if (err) {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log('Listening at http://0.0.0.0:8080');
|
console.log('Listening at http://0.0.0.0:8081');
|
||||||
});
|
});
|
||||||
|
|
|
@ -6,7 +6,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
context: __dirname,
|
context: __dirname,
|
||||||
devtool: 'inline-source-map',
|
devtool: 'inline-source-map',
|
||||||
entry: [
|
entry: [
|
||||||
'webpack-hot-middleware/client',
|
'webpack-hot-middleware/client',
|
||||||
'./spec/index.jsx'
|
'./spec/index.jsx'
|
||||||
|
@ -22,11 +22,11 @@ module.exports = {
|
||||||
module: {
|
module: {
|
||||||
loaders: [
|
loaders: [
|
||||||
{
|
{
|
||||||
test: /(\.js|\.jsx)$/,
|
test: /\.(js|jsx)$/,
|
||||||
exclude: /(node_modules)/,
|
loader: ['babel'],
|
||||||
loader: 'babel'
|
include: path.join(__dirname, 'spec'),
|
||||||
}, {
|
}, {
|
||||||
test: /(\.scss|\.css)$/,
|
test: /\.(scss|css)$/,
|
||||||
loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap')
|
loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap')
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
@ -5,11 +5,11 @@ module.exports = {
|
||||||
module: {
|
module: {
|
||||||
loaders: [
|
loaders: [
|
||||||
{
|
{
|
||||||
test: /(\.js|\.jsx)$/,
|
test: /\.(js|jsx)$/,
|
||||||
exclude: /(node_modules)/,
|
exclude: /(node_modules)/,
|
||||||
loader: 'babel'
|
loader: 'babel'
|
||||||
}, {
|
}, {
|
||||||
test: /(\.scss|\.css)$/,
|
test: /\.(scss|css)$/,
|
||||||
loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass'
|
loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
Loading…
Reference in New Issue