Merge branch 'master' into docs
* master: Fix some errors and change opinionated eslint add commons.scss to spec html add babel to devDepedenecy add rimraf devDependencies update webpack dev, test and build & update eslint rule Add scripts to generate a js+css versionold
commit
8e00f773b1
|
@ -24,6 +24,7 @@
|
||||||
"$variable",
|
"$variable",
|
||||||
"$extend",
|
"$extend",
|
||||||
"$include",
|
"$include",
|
||||||
|
"composes",
|
||||||
"position",
|
"position",
|
||||||
"top",
|
"top",
|
||||||
"right",
|
"right",
|
||||||
|
|
|
@ -1 +1,2 @@
|
||||||
!node_modules
|
**/node_modules/
|
||||||
|
**/build/
|
||||||
|
|
11
.eslintrc
11
.eslintrc
|
@ -1,5 +1,4 @@
|
||||||
{
|
{
|
||||||
"parser": "babel-eslint",
|
|
||||||
"env": {
|
"env": {
|
||||||
"browser": true,
|
"browser": true,
|
||||||
"node": true,
|
"node": true,
|
||||||
|
@ -12,9 +11,11 @@
|
||||||
"templateStrings": true,
|
"templateStrings": true,
|
||||||
"superInFunctions": false,
|
"superInFunctions": false,
|
||||||
"classes": true,
|
"classes": true,
|
||||||
"modules": [2]
|
"modules": true
|
||||||
},
|
},
|
||||||
|
|
||||||
|
"parser": "babel-eslint",
|
||||||
|
|
||||||
"plugins": [
|
"plugins": [
|
||||||
"react"
|
"react"
|
||||||
],
|
],
|
||||||
|
@ -29,6 +30,7 @@
|
||||||
"comma-spacing": [2],
|
"comma-spacing": [2],
|
||||||
"comma-style": [2, "last"],
|
"comma-style": [2, "last"],
|
||||||
"complexity": [0, 11],
|
"complexity": [0, 11],
|
||||||
|
"constructor-super": [2],
|
||||||
"consistent-return": [2],
|
"consistent-return": [2],
|
||||||
"consistent-this": [0, "that"],
|
"consistent-this": [0, "that"],
|
||||||
"curly": [2, "multi-line"],
|
"curly": [2, "multi-line"],
|
||||||
|
@ -140,6 +142,7 @@
|
||||||
"no-sparse-arrays": [2],
|
"no-sparse-arrays": [2],
|
||||||
"no-sync": [0],
|
"no-sync": [0],
|
||||||
"no-ternary": [0],
|
"no-ternary": [0],
|
||||||
|
"no-this-before-super": [2],
|
||||||
"no-throw-literal": [2],
|
"no-throw-literal": [2],
|
||||||
"no-trailing-spaces": [2],
|
"no-trailing-spaces": [2],
|
||||||
"no-undef": [2],
|
"no-undef": [2],
|
||||||
|
@ -152,7 +155,8 @@
|
||||||
"vars": "all",
|
"vars": "all",
|
||||||
"args": "after-used"
|
"args": "after-used"
|
||||||
}],
|
}],
|
||||||
"no-use-before-define": [2],
|
"no-use-before-define": [2, "nofunc"],
|
||||||
|
"no-var": [2],
|
||||||
"no-void": [0],
|
"no-void": [0],
|
||||||
"no-warning-comments": [0, {
|
"no-warning-comments": [0, {
|
||||||
"terms": ["todo", "fixme", "xxx"],
|
"terms": ["todo", "fixme", "xxx"],
|
||||||
|
@ -163,6 +167,7 @@
|
||||||
"operator-assignment": [0, "always"],
|
"operator-assignment": [0, "always"],
|
||||||
"operator-linebreak": [2, "after"],
|
"operator-linebreak": [2, "after"],
|
||||||
"padded-blocks": [0],
|
"padded-blocks": [0],
|
||||||
|
"prefer-const": [2],
|
||||||
"quote-props": [0],
|
"quote-props": [0],
|
||||||
"radix": [0],
|
"radix": [0],
|
||||||
"semi": [2],
|
"semi": [2],
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
build
|
build
|
||||||
dist
|
lib
|
||||||
node_modules
|
node_modules
|
||||||
npm-debug.log
|
npm-debug.log
|
||||||
.sass-cache/
|
|
||||||
|
|
|
@ -99,6 +99,7 @@ linters:
|
||||||
"$variable",
|
"$variable",
|
||||||
"$extend",
|
"$extend",
|
||||||
"$include",
|
"$include",
|
||||||
|
"composes",
|
||||||
"position",
|
"position",
|
||||||
"top",
|
"top",
|
||||||
"right",
|
"right",
|
||||||
|
|
|
@ -1,3 +1,6 @@
|
||||||
language: node_js
|
language: node_js
|
||||||
node_js:
|
node_js:
|
||||||
- 0.10
|
- "stable"
|
||||||
|
script:
|
||||||
|
- npm run lint
|
||||||
|
- npm test
|
||||||
|
|
|
@ -52,7 +52,7 @@ class Autocomplete extends React.Component {
|
||||||
handleQueryChange = () => {
|
handleQueryChange = () => {
|
||||||
const query = this.refs.input.getValue();
|
const query = this.refs.input.getValue();
|
||||||
if (this.state.query !== query) {
|
if (this.state.query !== query) {
|
||||||
this.setState({query: query});
|
this.setState({query});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -71,8 +71,8 @@ class Autocomplete extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
handleFocus = () => {
|
handleFocus = () => {
|
||||||
let client = event.target.getBoundingClientRect();
|
const client = event.target.getBoundingClientRect();
|
||||||
let screen_height = window.innerHeight || document.documentElement.offsetHeight;
|
const screen_height = window.innerHeight || document.documentElement.offsetHeight;
|
||||||
|
|
||||||
this.refs.suggestions.scrollTop = 0;
|
this.refs.suggestions.scrollTop = 0;
|
||||||
this.setState({
|
this.setState({
|
||||||
|
@ -126,7 +126,7 @@ class Autocomplete extends React.Component {
|
||||||
|
|
||||||
let suggestionsClassName = style.suggestions;
|
let suggestionsClassName = style.suggestions;
|
||||||
if (this.state.up) suggestionsClassName += ` ${style.up}`;
|
if (this.state.up) suggestionsClassName += ` ${style.up}`;
|
||||||
let suggestionsStyle = {width: this.state.width};
|
const suggestionsStyle = {width: this.state.width};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div data-react-toolbox='autocomplete' className={className}>
|
<div data-react-toolbox='autocomplete' className={className}>
|
||||||
|
@ -164,9 +164,9 @@ class Autocomplete extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
_getSuggestions () {
|
_getSuggestions () {
|
||||||
let query = this.state.query.toLowerCase().trim() || '';
|
const query = this.state.query.toLowerCase().trim() || '';
|
||||||
let suggestions = new Map();
|
const suggestions = new Map();
|
||||||
for (let [key, value] of this.state.dataSource) {
|
for (const [key, value] of this.state.dataSource) {
|
||||||
if (!this.state.values.has(key) && value.toLowerCase().trim().startsWith(query)) {
|
if (!this.state.values.has(key) && value.toLowerCase().trim().startsWith(query)) {
|
||||||
suggestions.set(key, value);
|
suggestions.set(key, value);
|
||||||
}
|
}
|
||||||
|
@ -175,14 +175,15 @@ class Autocomplete extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
_selectOption (key) {
|
_selectOption (key) {
|
||||||
let { values, dataSource } = this.state;
|
const { dataSource } = this.state;
|
||||||
let query = !this.props.multiple ? dataSource.get(key) : '';
|
let { values } = this.state;
|
||||||
|
const query = !this.props.multiple ? dataSource.get(key) : '';
|
||||||
values = new Map(values);
|
values = new Map(values);
|
||||||
|
|
||||||
if (!this.props.multiple) values.clear();
|
if (!this.props.multiple) values.clear();
|
||||||
values.set(key, dataSource.get(key));
|
values.set(key, dataSource.get(key));
|
||||||
|
|
||||||
this.setState({focus: false, query: query, values: values}, () => {
|
this.setState({focus: false, query, values}, () => {
|
||||||
this.refs.input.blur();
|
this.refs.input.blur();
|
||||||
if (this.props.onChange) this.props.onChange(this);
|
if (this.props.onChange) this.props.onChange(this);
|
||||||
});
|
});
|
||||||
|
@ -190,26 +191,26 @@ class Autocomplete extends React.Component {
|
||||||
|
|
||||||
_unselectOption (key) {
|
_unselectOption (key) {
|
||||||
if (key) {
|
if (key) {
|
||||||
let values = new Map(this.state.values);
|
const values = new Map(this.state.values);
|
||||||
values.delete(key);
|
values.delete(key);
|
||||||
this.setState({focus: false, values: values}, () => {
|
this.setState({focus: false, values}, () => {
|
||||||
if (this.props.onChange) this.props.onChange(this);
|
if (this.props.onChange) this.props.onChange(this);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
getValue () {
|
getValue () {
|
||||||
let values = [...this.state.values.keys()];
|
const values = [...this.state.values.keys()];
|
||||||
return this.props.multiple ? values : (values.length > 0 ? values[0] : null);
|
return this.props.multiple ? values : (values.length > 0 ? values[0] : null);
|
||||||
}
|
}
|
||||||
|
|
||||||
setValue (dataParam = []) {
|
setValue (dataParam = []) {
|
||||||
let values = new Map();
|
const values = new Map();
|
||||||
let data = (typeof dataParam === 'string') ? [dataParam] : dataParam;
|
const data = (typeof dataParam === 'string') ? [dataParam] : dataParam;
|
||||||
for (let [key, value] of this.state.dataSource) {
|
for (const [key, value] of this.state.dataSource) {
|
||||||
if (data.indexOf(key) !== -1) values.set(key, value);
|
if (data.indexOf(key) !== -1) values.set(key, value);
|
||||||
}
|
}
|
||||||
this.setState({values: values, query: this.props.multiple ? '' : values.get(data[0])});
|
this.setState({values, query: this.props.multiple ? '' : values.get(data[0])});
|
||||||
}
|
}
|
||||||
|
|
||||||
setError (data) {
|
setError (data) {
|
||||||
|
|
|
@ -30,7 +30,8 @@ class Card extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
renderTitle () {
|
renderTitle () {
|
||||||
let styleFigure = {}, styleOverflow = {};
|
const styleFigure = {};
|
||||||
|
const styleOverflow = {};
|
||||||
if (this.props.image) styleFigure.backgroundImage = `url(${this.props.image})`;
|
if (this.props.image) styleFigure.backgroundImage = `url(${this.props.image})`;
|
||||||
if (this.props.color) {
|
if (this.props.color) {
|
||||||
styleFigure.backgroundColor = this.props.color;
|
styleFigure.backgroundColor = this.props.color;
|
||||||
|
|
|
@ -1,8 +1,17 @@
|
||||||
@import url('http://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
|
@import url('http://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
|
||||||
@import "normalize.css";
|
@import "~normalize.css";
|
||||||
@import "./base";
|
@import "./base";
|
||||||
|
|
||||||
//-- App
|
//-- App
|
||||||
|
.app {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-size: 62.5%;
|
font-size: 62.5%;
|
||||||
}
|
}
|
||||||
|
@ -62,16 +71,6 @@ input:not([type="checkbox"]):not([type="radio"]), button {
|
||||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
//-- App wrapper to allow overlays to block scroll
|
|
||||||
[data-react-toolbox-app] {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
// -- Material design font sizes
|
// -- Material design font sizes
|
||||||
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
||||||
@include typo-display-3($color-contrast: true);
|
@include typo-display-3($color-contrast: true);
|
||||||
|
|
|
@ -39,13 +39,13 @@ class Calendar extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleDayClick = (day) => {
|
handleDayClick = (day) => {
|
||||||
let newDate = utils.time.setDay(this.state.viewDate, day);
|
const newDate = utils.time.setDay(this.state.viewDate, day);
|
||||||
this.setState({selectedDate: newDate});
|
this.setState({selectedDate: newDate});
|
||||||
if (this.props.onChange) this.props.onChange(newDate);
|
if (this.props.onChange) this.props.onChange(newDate);
|
||||||
};
|
};
|
||||||
|
|
||||||
handleYearClick = (year) => {
|
handleYearClick = (year) => {
|
||||||
let newDate = utils.time.setYear(this.state.selectedDate, year);
|
const newDate = utils.time.setYear(this.state.selectedDate, year);
|
||||||
this.setState({selectedDate: newDate, viewDate: newDate});
|
this.setState({selectedDate: newDate, viewDate: newDate});
|
||||||
if (this.props.onChange) this.props.onChange(newDate);
|
if (this.props.onChange) this.props.onChange(newDate);
|
||||||
};
|
};
|
||||||
|
@ -67,7 +67,7 @@ class Calendar extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
renderYear (year) {
|
renderYear (year) {
|
||||||
let props = {
|
const props = {
|
||||||
className: year === this.state.viewDate.getFullYear() ? style.active : '',
|
className: year === this.state.viewDate.getFullYear() ? style.active : '',
|
||||||
key: year,
|
key: year,
|
||||||
onClick: this.handleYearClick.bind(this, year)
|
onClick: this.handleYearClick.bind(this, year)
|
||||||
|
@ -89,7 +89,7 @@ class Calendar extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
renderMonths () {
|
renderMonths () {
|
||||||
let animation = this.state.direction === 'left' ? SlideLeft : SlideRight;
|
const animation = this.state.direction === 'left' ? SlideLeft : SlideRight;
|
||||||
return (
|
return (
|
||||||
<div data-react-toolbox='calendar'>
|
<div data-react-toolbox='calendar'>
|
||||||
<FontIcon className={style.prev} value='chevron-left' onMouseDown={this.decrementViewMonth}>
|
<FontIcon className={style.prev} value='chevron-left' onMouseDown={this.decrementViewMonth}>
|
||||||
|
|
|
@ -38,8 +38,7 @@ class Month extends React.Component {
|
||||||
return (
|
return (
|
||||||
<div className={style.month}>
|
<div className={style.month}>
|
||||||
<span className={style.title}>
|
<span className={style.title}>
|
||||||
{ utils.time.getFullMonth(this.props.viewDate)}
|
{ utils.time.getFullMonth(this.props.viewDate)} { this.props.viewDate.getFullYear() }
|
||||||
{ 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>
|
||||||
|
|
|
@ -24,7 +24,7 @@ class CalendarDialog extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
handleCalendarChange = (date) => {
|
handleCalendarChange = (date) => {
|
||||||
this.setState({date: date, display: 'months'});
|
this.setState({date, display: 'months'});
|
||||||
};
|
};
|
||||||
|
|
||||||
displayMonths = () => {
|
displayMonths = () => {
|
||||||
|
|
|
@ -26,7 +26,7 @@ class DatePicker extends React.Component {
|
||||||
|
|
||||||
handleDateSelected = (value) => {
|
handleDateSelected = (value) => {
|
||||||
this.refs.input.setValue(this.formatDate(value));
|
this.refs.input.setValue(this.formatDate(value));
|
||||||
this.setState({value: value});
|
this.setState({value});
|
||||||
};
|
};
|
||||||
|
|
||||||
formatDate (date) {
|
formatDate (date) {
|
||||||
|
@ -59,7 +59,7 @@ class DatePicker extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
setValue (value) {
|
setValue (value) {
|
||||||
this.setState({value: value});
|
this.setState({value});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -51,8 +51,8 @@ class Dropdown extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleClick = (event) => {
|
handleClick = (event) => {
|
||||||
let client = event.target.getBoundingClientRect();
|
const client = event.target.getBoundingClientRect();
|
||||||
let screen_height = window.innerHeight || document.documentElement.offsetHeight;
|
const screen_height = window.innerHeight || document.documentElement.offsetHeight;
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
active: true,
|
active: true,
|
||||||
|
@ -62,8 +62,8 @@ class Dropdown extends React.Component {
|
||||||
|
|
||||||
handleClickValue = (id) => {
|
handleClickValue = (id) => {
|
||||||
if (!this.props.disabled) {
|
if (!this.props.disabled) {
|
||||||
let value = id.toString();
|
const value = id.toString();
|
||||||
for (let item of this.props.dataSource) {
|
for (const item of this.props.dataSource) {
|
||||||
if (item.value.toString() === value) {
|
if (item.value.toString() === value) {
|
||||||
this.setState({active: false, selected: item});
|
this.setState({active: false, selected: item});
|
||||||
break;
|
break;
|
||||||
|
@ -73,7 +73,7 @@ class Dropdown extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
renderValues () {
|
renderValues () {
|
||||||
let items = this.props.dataSource.map((item, index) => {
|
const items = this.props.dataSource.map((item, index) => {
|
||||||
let className;
|
let className;
|
||||||
if (item.value === this.state.selected.value) className = ` ${style.selected}`;
|
if (item.value === this.state.selected.value) className = ` ${style.selected}`;
|
||||||
|
|
||||||
|
@ -92,7 +92,7 @@ class Dropdown extends React.Component {
|
||||||
|
|
||||||
let className = style.values;
|
let className = style.values;
|
||||||
if (this.state.up) className += ` ${style.up}`;
|
if (this.state.up) className += ` ${style.up}`;
|
||||||
let valuesStyle = {width: this.state.width};
|
const valuesStyle = {width: this.state.width};
|
||||||
|
|
||||||
return <ul ref='values' className={className} style={valuesStyle}>{ items }</ul>;
|
return <ul ref='values' className={className} style={valuesStyle}>{ items }</ul>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -33,8 +33,8 @@ class Form extends React.Component {
|
||||||
|
|
||||||
componentWillReceiveProps (next_props) {
|
componentWillReceiveProps (next_props) {
|
||||||
if (next_props.attributes) {
|
if (next_props.attributes) {
|
||||||
let attributes = this.storage(next_props);
|
const attributes = this.storage(next_props);
|
||||||
this.setState({attributes: attributes});
|
this.setState({attributes});
|
||||||
this.setValue(attributes.map((item) => { return item; }));
|
this.setValue(attributes.map((item) => { return item; }));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -48,8 +48,8 @@ class Form extends React.Component {
|
||||||
|
|
||||||
onChange = (event) => {
|
onChange = (event) => {
|
||||||
let is_valid = true;
|
let is_valid = true;
|
||||||
let value = this.getValue();
|
const value = this.getValue();
|
||||||
for (let attr of this.state.attributes) {
|
for (const attr of this.state.attributes) {
|
||||||
if (attr.required && value[attr.ref] !== undefined && value[attr.ref].trim() === '') {
|
if (attr.required && value[attr.ref] !== undefined && value[attr.ref].trim() === '') {
|
||||||
is_valid = false;
|
is_valid = false;
|
||||||
console.log('NOT VALUD');
|
console.log('NOT VALUD');
|
||||||
|
@ -71,7 +71,7 @@ class Form extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
let className = `${style.root} ${this.props.className}`;
|
const className = `${style.root} ${this.props.className}`;
|
||||||
const attributes = this.state.attributes.map((attribute, index) => {
|
const attributes = this.state.attributes.map((attribute, index) => {
|
||||||
if (attribute.type === 'autocomplete') {
|
if (attribute.type === 'autocomplete') {
|
||||||
return <Autocomplete key={index} {...attribute} onChange={this.onChange}/>;
|
return <Autocomplete key={index} {...attribute} onChange={this.onChange}/>;
|
||||||
|
@ -110,16 +110,16 @@ class Form extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
storage (props, value) {
|
storage (props, value) {
|
||||||
let key = `react-toolbox-form-${props.storage}`;
|
const key = `react-toolbox-form-${props.storage}`;
|
||||||
if (value) {
|
if (value) {
|
||||||
let store = {};
|
const store = {};
|
||||||
for (let attr of props.attributes) {
|
for (const attr of props.attributes) {
|
||||||
if (attr.storage) store[attr.ref] = value[attr.ref];
|
if (attr.storage) store[attr.ref] = value[attr.ref];
|
||||||
}
|
}
|
||||||
window.localStorage.setItem(key, JSON.stringify(store));
|
window.localStorage.setItem(key, JSON.stringify(store));
|
||||||
} else if (props.storage) {
|
} else if (props.storage) {
|
||||||
let store = JSON.parse(window.localStorage.getItem(key) || {});
|
const store = JSON.parse(window.localStorage.getItem(key) || {});
|
||||||
for (let input of props.attributes) {
|
for (const input of props.attributes) {
|
||||||
if (store && store[input.ref]) {
|
if (store && store[input.ref]) {
|
||||||
input.value = store[input.ref];
|
input.value = store[input.ref];
|
||||||
}
|
}
|
||||||
|
@ -130,15 +130,15 @@ class Form extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
getValue () {
|
getValue () {
|
||||||
let value = {};
|
const value = {};
|
||||||
for (let ref of Object.keys(this.refs)) {
|
for (const ref of Object.keys(this.refs)) {
|
||||||
let el = this.refs[ref];
|
const el = this.refs[ref];
|
||||||
if (el.getValue) {
|
if (el.getValue) {
|
||||||
if (ref.indexOf('.') === -1) {
|
if (ref.indexOf('.') === -1) {
|
||||||
value[ref] = el.getValue();
|
value[ref] = el.getValue();
|
||||||
} else {
|
} else {
|
||||||
let parent = value;
|
let parent = value;
|
||||||
let hierarchy = ref.split('.');
|
const hierarchy = ref.split('.');
|
||||||
hierarchy.forEach((attr, index) => {
|
hierarchy.forEach((attr, index) => {
|
||||||
if (index === hierarchy.length - 1) {
|
if (index === hierarchy.length - 1) {
|
||||||
parent[attr] = el.getValue();
|
parent[attr] = el.getValue();
|
||||||
|
@ -155,7 +155,7 @@ class Form extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
setValue (data = {}) {
|
setValue (data = {}) {
|
||||||
for (let field of data) {
|
for (const field of data) {
|
||||||
if (this.refs[field.ref].setValue) {
|
if (this.refs[field.ref].setValue) {
|
||||||
this.refs[field.ref].setValue(field.value);
|
this.refs[field.ref].setValue(field.value);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
module.exports = {
|
export default {
|
||||||
Autocomplete: require('./autocomplete'),
|
Autocomplete: require('./autocomplete'),
|
||||||
Button: require('./button'),
|
Button: require('./button'),
|
||||||
Card: require('./card'),
|
Card: require('./card'),
|
||||||
|
|
|
@ -100,7 +100,7 @@ class Input extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
setValue (value) {
|
setValue (value) {
|
||||||
this.setState({value: value});
|
this.setState({value});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -44,13 +44,13 @@ class Menu extends React.Component {
|
||||||
componentDidMount () {
|
componentDidMount () {
|
||||||
const { width, height } = this.refs.menu.getBoundingClientRect();
|
const { width, height } = this.refs.menu.getBoundingClientRect();
|
||||||
const position = this.props.position === POSITION.AUTO ? this.calculatePosition() : this.props.position;
|
const position = this.props.position === POSITION.AUTO ? this.calculatePosition() : this.props.position;
|
||||||
this.setState({position: position, width: width, height: height});
|
this.setState({ position, width, height });
|
||||||
}
|
}
|
||||||
|
|
||||||
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;
|
||||||
this.setState({ position: position });
|
this.setState({ position });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -58,7 +58,7 @@ class Menu extends React.Component {
|
||||||
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();
|
||||||
if (this.state.position !== position) {
|
if (this.state.position !== position) {
|
||||||
this.setState({position: position, active: false}, () => {
|
this.setState({ position, active: false }, () => {
|
||||||
setTimeout(() => {this.setState({active: true}); }, 20);
|
setTimeout(() => {this.setState({active: true}); }, 20);
|
||||||
});
|
});
|
||||||
return false;
|
return false;
|
||||||
|
@ -89,8 +89,8 @@ class Menu extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
handleSelect = (item) => {
|
handleSelect = (item) => {
|
||||||
let { value, onClick } = item.props;
|
const { value, onClick } = item.props;
|
||||||
this.setState({value: value, active: false, rippled: this.props.ripple}, () => {
|
this.setState({ value, active: false, rippled: this.props.ripple }, () => {
|
||||||
if (onClick) onClick();
|
if (onClick) onClick();
|
||||||
if (this.props.onSelect) this.props.onSelect(value, this);
|
if (this.props.onSelect) this.props.onSelect(value, this);
|
||||||
});
|
});
|
||||||
|
|
|
@ -43,7 +43,7 @@ class RadioButton extends React.Component {
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
let labelClassName = style[this.props.disabled ? 'disabled' : 'field'];
|
let labelClassName = style[this.props.disabled ? 'disabled' : 'field'];
|
||||||
let radioClassName = style[this.props.checked ? 'radio-checked' : 'radio'];
|
const radioClassName = style[this.props.checked ? 'radio-checked' : 'radio'];
|
||||||
if (this.props.className) labelClassName += ` ${this.props.className}`;
|
if (this.props.className) labelClassName += ` ${this.props.className}`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -20,7 +20,7 @@ class RadioGroup extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
handleChange = (value, event) => {
|
handleChange = (value, event) => {
|
||||||
this.setState({value: value}, () => {
|
this.setState({ value }, () => {
|
||||||
if (this.props.onChange) this.props.onChange(event, this);
|
if (this.props.onChange) this.props.onChange(event, this);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
@ -54,7 +54,7 @@ class RadioGroup extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
setValue (value) {
|
setValue (value) {
|
||||||
this.setState({value: value});
|
this.setState({ value });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -29,8 +29,8 @@ class Ripple extends React.Component {
|
||||||
document.addEventListener('mouseup', this.handleEnd);
|
document.addEventListener('mouseup', this.handleEnd);
|
||||||
const {top, left, width} = this._getDescriptor(pageX, pageY);
|
const {top, left, width} = this._getDescriptor(pageX, pageY);
|
||||||
this.setState({active: false, restarting: true, width: 0}, () => {
|
this.setState({active: false, restarting: true, width: 0}, () => {
|
||||||
this.refs.ripple.offsetWidth; //eslint-disable-line no-unused-expressions
|
this.refs.ripple.offsetWidth; //eslint-disable-line no-unused-expressions
|
||||||
this.setState({active: true, restarting: false, top: top, left: left, width: width});
|
this.setState({active: true, restarting: false, top, left, width});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -40,7 +40,7 @@ class Ripple extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
_getDescriptor (pageX, pageY) {
|
_getDescriptor (pageX, pageY) {
|
||||||
let { left, top, height, width } = ReactDOM.findDOMNode(this).getBoundingClientRect();
|
const { left, top, height, width } = ReactDOM.findDOMNode(this).getBoundingClientRect();
|
||||||
return {
|
return {
|
||||||
left: this.props.centered ? width / 2 : pageX - left,
|
left: this.props.centered ? width / 2 : pageX - left,
|
||||||
top: this.props.centered ? height / 2 : pageY - top,
|
top: this.props.centered ? height / 2 : pageY - top,
|
||||||
|
@ -49,8 +49,8 @@ class Ripple extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
let { left, top, width } = this.state;
|
const { left, top, width } = this.state;
|
||||||
let rippleStyle = {left: left, top: top, width: width, height: width};
|
const rippleStyle = {left, top, width, height: width};
|
||||||
let className = style[this.props.loading ? 'loading' : 'normal'];
|
let className = style[this.props.loading ? 'loading' : 'normal'];
|
||||||
if (this.state.active) className += ` ${style.active}`;
|
if (this.state.active) className += ` ${style.active}`;
|
||||||
if (this.state.restarting) className += ` ${style.restarting}`;
|
if (this.state.restarting) className += ` ${style.restarting}`;
|
||||||
|
|
|
@ -157,7 +157,7 @@ describe('Slider', function () {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('calls onChange callback when the value is changed', function () {
|
it('calls onChange callback when the value is changed', function () {
|
||||||
let onChangeSpy = sinon.spy();
|
const onChangeSpy = sinon.spy();
|
||||||
slider = utils.renderComponent(Slider, {onChange: onChangeSpy}, {sliderStart: 0, sliderLength: 1000});
|
slider = utils.renderComponent(Slider, {onChange: onChangeSpy}, {sliderStart: 0, sliderLength: 1000});
|
||||||
TestUtils.Simulate.mouseDown(slider.refs.slider, { pageX: 900 });
|
TestUtils.Simulate.mouseDown(slider.refs.slider, { pageX: 900 });
|
||||||
expect(onChangeSpy.called).toEqual(true);
|
expect(onChangeSpy.called).toEqual(true);
|
||||||
|
|
|
@ -138,8 +138,8 @@ class Slider extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
positionToValue (position) {
|
positionToValue (position) {
|
||||||
let { sliderStart: start, sliderLength: length } = this.state;
|
const { sliderStart: start, sliderLength: length } = this.state;
|
||||||
let { max, min } = this.props;
|
const { max, min } = this.props;
|
||||||
return this.trimValue((position.x - start) / length * (max - min) + min);
|
return this.trimValue((position.x - start) / length * (max - min) + min);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -163,7 +163,7 @@ class Slider extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
knobOffset () {
|
knobOffset () {
|
||||||
let { max, min } = this.props;
|
const { max, min } = this.props;
|
||||||
return this.state.sliderLength * (this.state.value - min) / (max - min);
|
return this.state.sliderLength * (this.state.value - min) / (max - min);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -194,7 +194,7 @@ class Slider extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
let knobStyles = utils.prefixer({transform: `translateX(${this.knobOffset()}px)`});
|
const knobStyles = utils.prefixer({transform: `translateX(${this.knobOffset()}px)`});
|
||||||
let className = this.props.className;
|
let className = this.props.className;
|
||||||
if (this.props.editable) className += ` ${style.editable}`;
|
if (this.props.editable) className += ` ${style.editable}`;
|
||||||
if (this.props.pinned) className += ` ${style.pinned}`;
|
if (this.props.pinned) className += ` ${style.pinned}`;
|
||||||
|
@ -246,7 +246,7 @@ class Slider extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
setValue (value) {
|
setValue (value) {
|
||||||
this.setState({value: value});
|
this.setState({value});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -46,7 +46,7 @@ class Switch extends React.Component {
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
let labelClassName = style[this.props.disabled ? 'disabled' : 'field'];
|
let labelClassName = style[this.props.disabled ? 'disabled' : 'field'];
|
||||||
let switchClassName = style[this.state.checked ? 'switch-on' : 'switch-off'];
|
const switchClassName = style[this.state.checked ? 'switch-on' : 'switch-off'];
|
||||||
if (this.props.className) labelClassName += ` ${this.props.className}`;
|
if (this.props.className) labelClassName += ` ${this.props.className}`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -19,25 +19,25 @@ class Tabs extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidMount () {
|
componentDidMount () {
|
||||||
this.setState({
|
setTimeout(() => {
|
||||||
pointer: this._pointerPosition(this.state.index, this.refs.navigation)
|
this.setState({pointer: this._pointerPosition(this.state.index)});
|
||||||
});
|
}, 20);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillReceiveProps (next_props) {
|
componentWillReceiveProps (next_props) {
|
||||||
const index = next_props.index || this.state.index;
|
const index = next_props.index || this.state.index;
|
||||||
this.setState({
|
this.setState({
|
||||||
index: index,
|
index,
|
||||||
pointer: this._pointerPosition(index, this.refs.navigation)
|
pointer: this._pointerPosition(index)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
_pointerPosition (index = 0, navigation) {
|
_pointerPosition (index = 0) {
|
||||||
const startPoint = this.refs.tabs.getBoundingClientRect().left;
|
const startPoint = this.refs.tabs.getBoundingClientRect().left;
|
||||||
const label = navigation.children[index].getBoundingClientRect();
|
const label = this.refs.navigation.children[index].getBoundingClientRect();
|
||||||
|
|
||||||
return {
|
return {
|
||||||
top: `${navigation.getBoundingClientRect().height}px`,
|
top: `${this.refs.navigation.getBoundingClientRect().height}px`,
|
||||||
left: `${label.left - startPoint}px`,
|
left: `${label.left - startPoint}px`,
|
||||||
width: `${label.width}px`
|
width: `${label.width}px`
|
||||||
};
|
};
|
||||||
|
@ -45,8 +45,8 @@ class Tabs extends React.Component {
|
||||||
|
|
||||||
handleClick = (index) => {
|
handleClick = (index) => {
|
||||||
this.setState({
|
this.setState({
|
||||||
index: index,
|
index,
|
||||||
pointer: this._pointerPosition(index, this.refs.navigation)
|
pointer: this._pointerPosition(index)
|
||||||
});
|
});
|
||||||
if (this.props.onChange) this.props.onChange(this);
|
if (this.props.onChange) this.props.onChange(this);
|
||||||
};
|
};
|
||||||
|
@ -58,10 +58,10 @@ class Tabs extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
let labels = [];
|
const labels = [];
|
||||||
|
|
||||||
const tabs = this.props.children.map((tab, index) => {
|
const tabs = this.props.children.map((tab, index) => {
|
||||||
let active = this.state.index === index;
|
const active = this.state.index === index;
|
||||||
let className = `${style.label} ${tab.props.className}`;
|
let className = `${style.label} ${tab.props.className}`;
|
||||||
|
|
||||||
if (active) className += ` ${style.active}`;
|
if (active) className += ` ${style.active}`;
|
||||||
|
@ -69,13 +69,13 @@ class Tabs extends React.Component {
|
||||||
if (tab.props.hidden) className += ` ${style.hidden}`;
|
if (tab.props.hidden) className += ` ${style.hidden}`;
|
||||||
|
|
||||||
labels.push({
|
labels.push({
|
||||||
className: className,
|
className,
|
||||||
label: tab.props.label,
|
label: tab.props.label,
|
||||||
key: index,
|
key: index,
|
||||||
onClick: !tab.props.disabled ? this.handleClick.bind(this, index) : null
|
onClick: !tab.props.disabled ? this.handleClick.bind(this, index) : null
|
||||||
});
|
});
|
||||||
|
|
||||||
return React.cloneElement(tab, {active: active, key: index, tabIndex: index });
|
return React.cloneElement(tab, { active, key: index, tabIndex: index });
|
||||||
});
|
});
|
||||||
|
|
||||||
let className = style.root;
|
let className = style.root;
|
||||||
|
|
|
@ -67,8 +67,8 @@ class Hand extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
getPositionRadius (position) {
|
getPositionRadius (position) {
|
||||||
let x = this.props.origin.x - position.x;
|
const x = this.props.origin.x - position.x;
|
||||||
let y = this.props.origin.y - position.y;
|
const y = this.props.origin.y - position.y;
|
||||||
return Math.sqrt(x * x + y * y);
|
return Math.sqrt(x * x + y * y);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -86,14 +86,14 @@ class Hand extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
move (position) {
|
move (position) {
|
||||||
let degrees = this.trimAngleToValue(this.positionToAngle(position));
|
const degrees = this.trimAngleToValue(this.positionToAngle(position));
|
||||||
let radius = this.getPositionRadius(position);
|
const radius = this.getPositionRadius(position);
|
||||||
if (this.props.onMove) this.props.onMove(degrees === 360 ? 0 : degrees, radius);
|
if (this.props.onMove) this.props.onMove(degrees === 360 ? 0 : degrees, radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const className = `${style.hand} ${this.props.className}`;
|
const className = `${style.hand} ${this.props.className}`;
|
||||||
let handStyle = utils.prefixer({
|
const handStyle = utils.prefixer({
|
||||||
height: this.props.length - this.state.knobWidth / 2,
|
height: this.props.length - this.state.knobWidth / 2,
|
||||||
transform: `rotate(${this.props.angle}deg)`
|
transform: `rotate(${this.props.angle}deg)`
|
||||||
});
|
});
|
||||||
|
|
|
@ -21,7 +21,7 @@ class Hours extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
handleHandMove = (degrees, radius) => {
|
handleHandMove = (degrees, radius) => {
|
||||||
let currentInner = radius < this.props.radius - this.props.spacing * innerSpacing;
|
const currentInner = radius < this.props.radius - this.props.spacing * innerSpacing;
|
||||||
if (this.props.format === '24hr' && this.state.inner !== currentInner) {
|
if (this.props.format === '24hr' && this.state.inner !== currentInner) {
|
||||||
this.setState({inner: currentInner}, () => {
|
this.setState({inner: currentInner}, () => {
|
||||||
this.props.onChange(this.valueFromDegrees(degrees));
|
this.props.onChange(this.valueFromDegrees(degrees));
|
||||||
|
|
|
@ -52,7 +52,7 @@ class Clock extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
handleCalculateShape = () => {
|
handleCalculateShape = () => {
|
||||||
let { top, left, width } = this.refs.wrapper.getBoundingClientRect();
|
const { top, left, width } = this.refs.wrapper.getBoundingClientRect();
|
||||||
this.setState({
|
this.setState({
|
||||||
center: { x: left + width / 2, y: top + width / 2 },
|
center: { x: left + width / 2, y: top + width / 2 },
|
||||||
radius: width / 2
|
radius: width / 2
|
||||||
|
|
|
@ -62,7 +62,7 @@ class TimePicker extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
setValue (value) {
|
setValue (value) {
|
||||||
this.setState({value: value});
|
this.setState({value});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -22,13 +22,13 @@ module.exports = {
|
||||||
},
|
},
|
||||||
|
|
||||||
addEventsToDocument (eventMap) {
|
addEventsToDocument (eventMap) {
|
||||||
for (let key in eventMap) {
|
for (const key in eventMap) {
|
||||||
document.addEventListener(key, eventMap[key], false);
|
document.addEventListener(key, eventMap[key], false);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
removeEventsFromDocument (eventMap) {
|
removeEventsFromDocument (eventMap) {
|
||||||
for (let key in eventMap) {
|
for (const key in eventMap) {
|
||||||
document.removeEventListener(key, eventMap[key], false);
|
document.removeEventListener(key, eventMap[key], false);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -40,6 +40,6 @@ module.exports = {
|
||||||
node = node.parentNode;
|
node = node.parentNode;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
},
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,19 +1,22 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
|
||||||
angleFromPositions (cx, cy, ex, ey) {
|
angleFromPositions (cx, cy, ex, ey) {
|
||||||
let theta = Math.atan2(ey - cy, ex - cx) + Math.PI / 2;
|
const theta = Math.atan2(ey - cy, ex - cx) + Math.PI / 2;
|
||||||
return theta * 180 / Math.PI;
|
return theta * 180 / Math.PI;
|
||||||
},
|
},
|
||||||
|
|
||||||
angle360FromPositions (cx, cy, ex, ey) {
|
angle360FromPositions (cx, cy, ex, ey) {
|
||||||
let angle = this.angleFromPositions(cx, cy, ex, ey);
|
const angle = this.angleFromPositions(cx, cy, ex, ey);
|
||||||
return angle < 0 ? 360 + angle : angle;
|
return angle < 0 ? 360 + angle : angle;
|
||||||
},
|
},
|
||||||
|
|
||||||
range (start = 0, stop = null, step = 1) {
|
range (start = 0, stop = null, step = 1) {
|
||||||
let [_start, _stop] = (stop !== null) ? [start, stop] : [0, start];
|
let [_start, _stop] = [0, start];
|
||||||
let length = Math.max(Math.ceil((_stop - _start) / step), 0);
|
if (stop !== null) {
|
||||||
let range = Array(length);
|
[_start, _stop] = [start, stop];
|
||||||
|
}
|
||||||
|
const length = Math.max(Math.ceil((_stop - _start) / step), 0);
|
||||||
|
const range = Array(length);
|
||||||
|
|
||||||
for (let idx = 0; idx < length; idx++, _start += step) {
|
for (let idx = 0; idx < length; idx++, _start += step) {
|
||||||
range[idx] = _start;
|
range[idx] = _start;
|
||||||
|
@ -24,7 +27,7 @@ module.exports = {
|
||||||
|
|
||||||
round (number, decimals) {
|
round (number, decimals) {
|
||||||
if (!isNaN(parseFloat(number)) && isFinite(number)) {
|
if (!isNaN(parseFloat(number)) && isFinite(number)) {
|
||||||
let decimalPower = Math.pow(10, decimals);
|
const decimalPower = Math.pow(10, decimals);
|
||||||
return Math.round(parseFloat(number) * decimalPower) / decimalPower;
|
return Math.round(parseFloat(number) * decimalPower) / decimalPower;
|
||||||
}
|
}
|
||||||
return NaN;
|
return NaN;
|
||||||
|
|
|
@ -19,7 +19,7 @@ function getPrefixes (property, value) {
|
||||||
function prefixer (style) {
|
function prefixer (style) {
|
||||||
let _style = style;
|
let _style = style;
|
||||||
|
|
||||||
for (let property in properties) {
|
for (const property in properties) {
|
||||||
if (style[property]) {
|
if (style[property]) {
|
||||||
_style = Object.assign(_style, getPrefixes(property, style[property]));
|
_style = Object.assign(_style, getPrefixes(property, style[property]));
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,13 +4,13 @@ import TestUtils from 'react-addons-test-utils';
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
|
||||||
renderComponent (Component, props = {}, state = {}) {
|
renderComponent (Component, props = {}, state = {}) {
|
||||||
let component = TestUtils.renderIntoDocument(<Component {...props} />);
|
const component = TestUtils.renderIntoDocument(<Component {...props} />);
|
||||||
if (state !== {}) { component.setState(state); }
|
if (state !== {}) { component.setState(state); }
|
||||||
return component;
|
return component;
|
||||||
},
|
},
|
||||||
|
|
||||||
shallowRenderComponent (component, props, ...children) {
|
shallowRenderComponent (component, props, ...children) {
|
||||||
let shallowRenderer = TestUtils.createRenderer();
|
const shallowRenderer = TestUtils.createRenderer();
|
||||||
shallowRenderer.render(React.createElement(component, props, children.length > 1 ? children : children[0]));
|
shallowRenderer.render(React.createElement(component, props, children.length > 1 ? children : children[0]));
|
||||||
return shallowRenderer.getRenderOutput();
|
return shallowRenderer.getRenderOutput();
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
|
||||||
getDaysInMonth (d) {
|
getDaysInMonth (d) {
|
||||||
let resultDate = this.getFirstDayOfMonth(d);
|
const resultDate = this.getFirstDayOfMonth(d);
|
||||||
resultDate.setMonth(resultDate.getMonth() + 1);
|
resultDate.setMonth(resultDate.getMonth() + 1);
|
||||||
resultDate.setDate(resultDate.getDate() - 1);
|
resultDate.setDate(resultDate.getDate() - 1);
|
||||||
return resultDate.getDate();
|
return resultDate.getDate();
|
||||||
|
@ -20,7 +20,7 @@ module.exports = {
|
||||||
},
|
},
|
||||||
|
|
||||||
getFullMonth (d) {
|
getFullMonth (d) {
|
||||||
let month = d.getMonth();
|
const month = d.getMonth();
|
||||||
switch (month) {
|
switch (month) {
|
||||||
default: return 'Unknown';
|
default: return 'Unknown';
|
||||||
case 0: return 'January';
|
case 0: return 'January';
|
||||||
|
@ -39,7 +39,7 @@ module.exports = {
|
||||||
},
|
},
|
||||||
|
|
||||||
getShortMonth (d) {
|
getShortMonth (d) {
|
||||||
let month = d.getMonth();
|
const month = d.getMonth();
|
||||||
switch (month) {
|
switch (month) {
|
||||||
default: return 'Unknown';
|
default: return 'Unknown';
|
||||||
case 0: return 'Jan';
|
case 0: return 'Jan';
|
||||||
|
@ -88,7 +88,7 @@ module.exports = {
|
||||||
},
|
},
|
||||||
|
|
||||||
cloneAsDate (d) {
|
cloneAsDate (d) {
|
||||||
let clonedDate = this.clone(d);
|
const clonedDate = this.clone(d);
|
||||||
clonedDate.setHours(0, 0, 0, 0);
|
clonedDate.setHours(0, 0, 0, 0);
|
||||||
return clonedDate;
|
return clonedDate;
|
||||||
},
|
},
|
||||||
|
@ -98,56 +98,56 @@ module.exports = {
|
||||||
},
|
},
|
||||||
|
|
||||||
addDays (d, days) {
|
addDays (d, days) {
|
||||||
let newDate = this.clone(d);
|
const newDate = this.clone(d);
|
||||||
newDate.setDate(d.getDate() + days);
|
newDate.setDate(d.getDate() + days);
|
||||||
return newDate;
|
return newDate;
|
||||||
},
|
},
|
||||||
|
|
||||||
addMonths (d, months) {
|
addMonths (d, months) {
|
||||||
let newDate = this.clone(d);
|
const newDate = this.clone(d);
|
||||||
newDate.setMonth(d.getMonth() + months);
|
newDate.setMonth(d.getMonth() + months);
|
||||||
return newDate;
|
return newDate;
|
||||||
},
|
},
|
||||||
|
|
||||||
addYears (d, years) {
|
addYears (d, years) {
|
||||||
let newDate = this.clone(d);
|
const newDate = this.clone(d);
|
||||||
newDate.setFullYear(d.getFullYear() + years);
|
newDate.setFullYear(d.getFullYear() + years);
|
||||||
return newDate;
|
return newDate;
|
||||||
},
|
},
|
||||||
|
|
||||||
setDay (d, day) {
|
setDay (d, day) {
|
||||||
let newDate = this.clone(d);
|
const newDate = this.clone(d);
|
||||||
newDate.setDate(day);
|
newDate.setDate(day);
|
||||||
return newDate;
|
return newDate;
|
||||||
},
|
},
|
||||||
|
|
||||||
setMonth (d, month) {
|
setMonth (d, month) {
|
||||||
let newDate = this.clone(d);
|
const newDate = this.clone(d);
|
||||||
newDate.setMonth(month);
|
newDate.setMonth(month);
|
||||||
return newDate;
|
return newDate;
|
||||||
},
|
},
|
||||||
|
|
||||||
setYear (d, year) {
|
setYear (d, year) {
|
||||||
let newDate = this.clone(d);
|
const newDate = this.clone(d);
|
||||||
newDate.setFullYear(year);
|
newDate.setFullYear(year);
|
||||||
return newDate;
|
return newDate;
|
||||||
},
|
},
|
||||||
|
|
||||||
setHours (d, hours) {
|
setHours (d, hours) {
|
||||||
let newDate = this.clone(d);
|
const newDate = this.clone(d);
|
||||||
newDate.setHours(hours);
|
newDate.setHours(hours);
|
||||||
return newDate;
|
return newDate;
|
||||||
},
|
},
|
||||||
|
|
||||||
setMinutes (d, minutes) {
|
setMinutes (d, minutes) {
|
||||||
let newDate = this.clone(d);
|
const newDate = this.clone(d);
|
||||||
newDate.setMinutes(minutes);
|
newDate.setMinutes(minutes);
|
||||||
return newDate;
|
return newDate;
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleTimeMode (d) {
|
toggleTimeMode (d) {
|
||||||
let newDate = this.clone(d);
|
const newDate = this.clone(d);
|
||||||
let hours = newDate.getHours();
|
const hours = newDate.getHours();
|
||||||
|
|
||||||
newDate.setHours(hours - (hours > 12 ? -12 : 12));
|
newDate.setHours(hours - (hours > 12 ? -12 : 12));
|
||||||
return newDate;
|
return newDate;
|
||||||
|
@ -158,8 +158,8 @@ module.exports = {
|
||||||
let mins = date.getMinutes().toString();
|
let mins = date.getMinutes().toString();
|
||||||
|
|
||||||
if (format === 'ampm') {
|
if (format === 'ampm') {
|
||||||
let isAM = hours < 12;
|
const isAM = hours < 12;
|
||||||
let additional = isAM ? ' am' : ' pm';
|
const additional = isAM ? ' am' : ' pm';
|
||||||
|
|
||||||
hours = hours % 12;
|
hours = hours % 12;
|
||||||
hours = (hours || 12).toString();
|
hours = (hours || 12).toString();
|
||||||
|
|
|
@ -1,5 +0,0 @@
|
||||||
build
|
|
||||||
dist/**/*.css
|
|
||||||
dist/**/*.js
|
|
||||||
node_modules
|
|
||||||
npm-debug.log
|
|
|
@ -1,23 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Reack-Toolbox Example</title>
|
|
||||||
<meta name="description" content="A set of complementary tools to ReactJS.">
|
|
||||||
<meta name="author" content="@soyjavi">
|
|
||||||
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
|
|
||||||
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)">
|
|
||||||
<meta name="apple-mobile-web-app-title" content="Material Console">
|
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
||||||
<meta name="format-detection" content="telephone=no">
|
|
||||||
<meta name="HandheldFriendly" content="True">
|
|
||||||
<meta http-equiv="cleartype" content="on">
|
|
||||||
<link href="./build/react-toolbox-example.commons.css" rel='stylesheet' type='text/css'>
|
|
||||||
<link href="./build/react-toolbox-example.test.css" rel='stylesheet' type='text/css'>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="./node_modules/react/dist/react-with-addons.js"></script>
|
|
||||||
<script src="./build/react-toolbox-example.test.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
|
@ -1,33 +0,0 @@
|
||||||
{
|
|
||||||
"name": "react-toolbox-example",
|
|
||||||
"version": "0.6.28",
|
|
||||||
"description": "Sample project that uses react-toolbox",
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "https://github.com/soyjavi/react-toolbox.git"
|
|
||||||
},
|
|
||||||
"scripts": {
|
|
||||||
"start": "npm run build & npm run server",
|
|
||||||
"server": "webpack-dev-server --hot",
|
|
||||||
"build": "webpack",
|
|
||||||
"watch": "webpack --watch",
|
|
||||||
"deploy": "NODE_ENV=production webpack -p"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"coffee-script": "*",
|
|
||||||
"react-toolbox": "^0.6.28",
|
|
||||||
"react": ">=0.13"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"babel-core": "^5.8.23",
|
|
||||||
"babel-loader": "^5.3.2",
|
|
||||||
"babel-runtime": "^5.8.20",
|
|
||||||
"coffee-jsx-loader": "^0.1.2",
|
|
||||||
"css-loader": "^0.15.1",
|
|
||||||
"extract-text-webpack-plugin": "^0.8.2",
|
|
||||||
"node-libs-browser": "^0.5.2",
|
|
||||||
"style-loader": "^0.12.3",
|
|
||||||
"stylus-loader": "^1.2.1",
|
|
||||||
"webpack": "^1.9.11"
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,31 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
// React-Toolbox full dependency way:
|
|
||||||
// import {Button, Form} from 'react-toolbox'
|
|
||||||
|
|
||||||
// Standalone dependencies way:
|
|
||||||
import Button from 'react-toolbox/components/button';
|
|
||||||
import Form from 'react-toolbox/components/form';
|
|
||||||
|
|
||||||
class App extends React.Component {
|
|
||||||
state = {
|
|
||||||
fields: [
|
|
||||||
{ ref: 'username', label: 'Your username', required: true},
|
|
||||||
{ ref: 'password', type: 'password', label: 'Your password', required: true},
|
|
||||||
{ type: 'submit', label: 'Login', disabled: true}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
render () {
|
|
||||||
return (
|
|
||||||
<app data-toolbox={true}>
|
|
||||||
<h1>Hello React-Toolbox</h1>
|
|
||||||
<Form attributes={this.state.fields} />
|
|
||||||
<Button label='Hello world!' type='square' style='primary'/>
|
|
||||||
<Button icon='adb' type='circle' style='accent' />
|
|
||||||
</app>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
React.render(<App />, document.body);
|
|
|
@ -1,36 +0,0 @@
|
||||||
var pkg = require('./package.json');
|
|
||||||
var node_modules = __dirname + '/node_modules';
|
|
||||||
var ExtractTextPlugin = require('extract-text-webpack-plugin');
|
|
||||||
var environment = process.env.NODE_ENV;
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
cache: true,
|
|
||||||
resolve: {
|
|
||||||
extensions: ['', '.jsx', '.cjsx', '.coffee', '.js', '.json', '.styl']
|
|
||||||
},
|
|
||||||
context: __dirname,
|
|
||||||
entry: {
|
|
||||||
commons: ['./node_modules/react-toolbox/components/commons.styl'],
|
|
||||||
test: ['webpack/hot/dev-server', './src/app.jsx']
|
|
||||||
},
|
|
||||||
output: {
|
|
||||||
path: environment === 'production' ? './dist' : './build',
|
|
||||||
filename: pkg.name + '.[name].js',
|
|
||||||
publicPath: '/build/'
|
|
||||||
},
|
|
||||||
devServer: {
|
|
||||||
host: '0.0.0.0',
|
|
||||||
port: 8080,
|
|
||||||
inline: true
|
|
||||||
},
|
|
||||||
module: {
|
|
||||||
noParse: [node_modules + '/react/dist/*.js'],
|
|
||||||
loaders: [
|
|
||||||
{ test: /(\.js|\.jsx)$/, exclude: /(node_modules)/, loader: 'babel?optional=runtime&stage=0&loose=all'},
|
|
||||||
{ test: /\.cjsx$/, loader: 'coffee-jsx-loader'},
|
|
||||||
{ test: /\.coffee$/, loader: 'coffee-jsx-loader'},
|
|
||||||
{ test: /\.styl$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!stylus-loader!')}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
plugins: [new ExtractTextPlugin(pkg.name + '.[name].css', {allChunks: false})]
|
|
||||||
};
|
|
|
@ -1,7 +1,4 @@
|
||||||
require('webpack');
|
const webpackConfig = require('./webpack.config.test');
|
||||||
|
|
||||||
var pkg = require('./package.json');
|
|
||||||
var ExtractTextPlugin = require('extract-text-webpack-plugin');
|
|
||||||
|
|
||||||
module.exports = function (config) {
|
module.exports = function (config) {
|
||||||
config.set({
|
config.set({
|
||||||
|
@ -15,17 +12,7 @@ module.exports = function (config) {
|
||||||
],
|
],
|
||||||
reporters: ['dots'],
|
reporters: ['dots'],
|
||||||
preprocessors: {'tests.webpack.js': ['webpack']},
|
preprocessors: {'tests.webpack.js': ['webpack']},
|
||||||
webpack: {
|
webpack: webpackConfig,
|
||||||
resolve: { extensions: ['', '.jsx', '.scss', '.js', '.json'] },
|
|
||||||
module: {
|
|
||||||
loaders: [
|
|
||||||
{ test: /(\.js|\.jsx)$/, exclude: /(node_modules)/, loader: 'babel' },
|
|
||||||
{ test: /(\.scss|\.css)$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!sass') },
|
|
||||||
]
|
|
||||||
},
|
|
||||||
watch: true,
|
|
||||||
plugins: [new ExtractTextPlugin(pkg.name + '.[name].css', {allChunks: false})]
|
|
||||||
},
|
|
||||||
webpackServer: {
|
webpackServer: {
|
||||||
noInfo: true
|
noInfo: true
|
||||||
}
|
}
|
||||||
|
|
45
package.json
45
package.json
|
@ -15,21 +15,16 @@
|
||||||
"email": "javier.velasco86@gmail.com"
|
"email": "javier.velasco86@gmail.com"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"style": "commons.scss",
|
"main": "./lib",
|
||||||
"main": "./components",
|
|
||||||
"directories": {
|
|
||||||
"react-toolbox": "./react-toolbox/components"
|
|
||||||
},
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "npm run build & webpack-dev-server --hot",
|
"start": "node ./server",
|
||||||
"build": "npm run clean && webpack",
|
"babel": "babel ./components --out-dir ./lib",
|
||||||
"watch": "webpack --watch",
|
"build": "npm run lint && npm run babel && npm run sass",
|
||||||
"lint": "eslint ./components/**/*.jsx",
|
"clean": "rimraf ./lib",
|
||||||
"deploy": "NODE_ENV=production webpack -p",
|
"lint": "eslint ./components ./spec ./example --ext .js,.jsx",
|
||||||
"babel": "babel --stage 0 --optional es7.classProperties ./components --out-dir ./lib",
|
"prebuild": "npm run clean",
|
||||||
"sass": "sass --update components:lib --sourcemap=none",
|
"prepublish": "npm run build",
|
||||||
"dist": "npm run babel && npm run sass",
|
"sass": "node-sass ./components -o ./lib",
|
||||||
"clean": "rm -rf dist",
|
|
||||||
"test": "karma start",
|
"test": "karma start",
|
||||||
"test:watch": "karma start --no-single-run"
|
"test:watch": "karma start --no-single-run"
|
||||||
},
|
},
|
||||||
|
@ -47,19 +42,20 @@
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": "^0.14",
|
"react": "^0.14",
|
||||||
"react-dom": "^0.14.0"
|
"react-dom": "^0.14.0",
|
||||||
|
"react-addons-css-transition-group": "^0.14.0",
|
||||||
|
"normalize.css": "^3.0.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer-core": "^5.1.11",
|
"autoprefixer": "^6.0.3",
|
||||||
|
"babel": "^5.8.23",
|
||||||
"babel-core": "^5.8.23",
|
"babel-core": "^5.8.23",
|
||||||
"babel-eslint": "^4.1.3",
|
"babel-eslint": "^4.1.3",
|
||||||
"babel-loader": "^5.3.2",
|
"babel-loader": "^5.3.2",
|
||||||
"babel-runtime": "^5.8.20",
|
"css-loader": "^0.21.0",
|
||||||
"css-loader": "^0.16.0",
|
"eslint": "^1.7.3",
|
||||||
"eslint": "^1.3.1",
|
|
||||||
"eslint-plugin-react": "^3.3.1",
|
"eslint-plugin-react": "^3.3.1",
|
||||||
"expect": "^1.8.0",
|
"expect": "^1.8.0",
|
||||||
"extract-text-webpack-plugin": "^0.8.1",
|
|
||||||
"karma": "^0.13.3",
|
"karma": "^0.13.3",
|
||||||
"karma-chrome-launcher": "^0.2.0",
|
"karma-chrome-launcher": "^0.2.0",
|
||||||
"karma-cli": "^0.1.0",
|
"karma-cli": "^0.1.0",
|
||||||
|
@ -71,15 +67,16 @@
|
||||||
"node-sass": "^3.3.3",
|
"node-sass": "^3.3.3",
|
||||||
"normalize.css": "^3.0.3",
|
"normalize.css": "^3.0.3",
|
||||||
"phantomjs-polyfill": "0.0.1",
|
"phantomjs-polyfill": "0.0.1",
|
||||||
"postcss-loader": "^0.4.3",
|
"postcss-loader": "^0.7.0",
|
||||||
"react": "^0.14",
|
"react": "^0.14",
|
||||||
"react-dom": "^0.14.0",
|
|
||||||
"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-dom": "^0.14.0",
|
||||||
"react-hot-loader": "^1.3.0",
|
"react-hot-loader": "^1.3.0",
|
||||||
"sass-loader": "^2.0.1",
|
"rimraf": "^2.4.3",
|
||||||
|
"sass-loader": "^3.0.0",
|
||||||
"sinon": "git://github.com/cjohansen/Sinon.JS#sinon-2.0",
|
"sinon": "git://github.com/cjohansen/Sinon.JS#sinon-2.0",
|
||||||
"style-loader": "^0.12.3",
|
"style-loader": "^0.13.0",
|
||||||
"webpack": "^1.12.0",
|
"webpack": "^1.12.0",
|
||||||
"webpack-dev-server": "^1.12.1"
|
"webpack-dev-server": "^1.12.1"
|
||||||
},
|
},
|
||||||
|
|
|
@ -0,0 +1,20 @@
|
||||||
|
const webpack = require('webpack');
|
||||||
|
const WebpackDevServer = require('webpack-dev-server');
|
||||||
|
const config = require('./webpack.config.development');
|
||||||
|
const devServer = {
|
||||||
|
host: '0.0.0.0',
|
||||||
|
port: 8080,
|
||||||
|
inline: true
|
||||||
|
};
|
||||||
|
|
||||||
|
new WebpackDevServer(webpack(config), {
|
||||||
|
publicPath: config.output.publicPath,
|
||||||
|
historyApiFallback: false,
|
||||||
|
stats: {
|
||||||
|
colors: true
|
||||||
|
}
|
||||||
|
}).listen(devServer.port, devServer.host, (err) => {
|
||||||
|
if (err) console.error(err);
|
||||||
|
console.log(`Listening at ${devServer.host}:${devServer.port}`);
|
||||||
|
console.log(`open http://${devServer.host}:${devServer.port}/spec/`);
|
||||||
|
});
|
|
@ -0,0 +1,52 @@
|
||||||
|
/*eslint-disable no-unused-vars*/
|
||||||
|
import React from 'react';
|
||||||
|
import commons from '../components/commons';
|
||||||
|
import Autocomplete from './components/autocomplete';
|
||||||
|
import Button from './components/button';
|
||||||
|
import Card from './components/card';
|
||||||
|
import Checkbox from './components/checkbox';
|
||||||
|
import Dialog from './components/dialog';
|
||||||
|
import Drawer from './components/drawer';
|
||||||
|
import Dropdown from './components/dropdown';
|
||||||
|
import IconMenu from './components/icon_menu';
|
||||||
|
import Input from './components/input';
|
||||||
|
import List from './components/list';
|
||||||
|
import Menu from './components/menu';
|
||||||
|
import Pickers from './components/pickers';
|
||||||
|
import Progress from './components/progress';
|
||||||
|
import Radio from './components/radio';
|
||||||
|
import Snackbar from './components/snackbar';
|
||||||
|
import Slider from './components/slider';
|
||||||
|
import Switch from './components/switch';
|
||||||
|
import Tabs from './components/tabs';
|
||||||
|
import style from './style';
|
||||||
|
|
||||||
|
const App = () => {
|
||||||
|
return (
|
||||||
|
<app className={`${commons.app} ${style.app}`}>
|
||||||
|
<h1>React Toolbox</h1>
|
||||||
|
<h3>Component Spec v0.10.20</h3>
|
||||||
|
|
||||||
|
<Autocomplete />
|
||||||
|
<Button />
|
||||||
|
<Card />
|
||||||
|
<Checkbox />
|
||||||
|
<Dialog />
|
||||||
|
<Drawer />
|
||||||
|
<Dropdown />
|
||||||
|
<IconMenu />
|
||||||
|
<Input />
|
||||||
|
<List />
|
||||||
|
<Menu />
|
||||||
|
<Pickers />
|
||||||
|
<Progress />
|
||||||
|
<Radio />
|
||||||
|
<Slider />
|
||||||
|
<Snackbar />
|
||||||
|
<Switch />
|
||||||
|
<Tabs />
|
||||||
|
</app>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
|
@ -4,7 +4,7 @@ import DatePicker from '../../components/date_picker';
|
||||||
import TimePicker from '../../components/time_picker';
|
import TimePicker from '../../components/time_picker';
|
||||||
|
|
||||||
const PickersTest = () => {
|
const PickersTest = () => {
|
||||||
let datetime = new Date(1995, 11, 17);
|
const datetime = new Date(1995, 11, 17);
|
||||||
datetime.setHours(17);
|
datetime.setHours(17);
|
||||||
datetime.setMinutes(28);
|
datetime.setMinutes(28);
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>React-Toolbox</title>
|
<title>React Toolbox - Spec</title>
|
||||||
<meta name="description" content="A set of complementary tools to ReactJS.">
|
<meta name="description" content="A set of complementary tools to ReactJS.">
|
||||||
<meta name="author" content="@soyjavi">
|
<meta name="author" content="@soyjavi">
|
||||||
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
|
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
|
||||||
|
@ -13,21 +13,9 @@
|
||||||
<meta name="format-detection" content="telephone=no">
|
<meta name="format-detection" content="telephone=no">
|
||||||
<meta name="HandheldFriendly" content="True">
|
<meta name="HandheldFriendly" content="True">
|
||||||
<meta http-equiv="cleartype" content="on">
|
<meta http-equiv="cleartype" content="on">
|
||||||
<link href="../build/react-toolbox.commons.css" rel='stylesheet' type='text/css'>
|
|
||||||
<link href="../build/react-toolbox.test.css" rel='stylesheet' type='text/css'>
|
|
||||||
<style>
|
|
||||||
app { padding: 1.6rem; }
|
|
||||||
app > h1, app > h3 { line-height: 100%; }
|
|
||||||
app h5 { margin-top: 3.2rem; }
|
|
||||||
app p { margin-bottom: 1rem; opacity: 0.5;}
|
|
||||||
app [data-react-toolbox='card'] {
|
|
||||||
margin: 1.6rem 1.6rem 0 0;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="toolbox-test"></div>
|
<div id="toolbox-test"></div>
|
||||||
<script src="../build/react-toolbox.test.js"></script>
|
<script src="/build/spec.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,52 +1,6 @@
|
||||||
/*eslint-disable no-unused-vars*/
|
/*eslint-disable no-unused-vars*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
|
import App from './app';
|
||||||
import Autocomplete from './components/autocomplete';
|
|
||||||
import Button from './components/button';
|
|
||||||
import Card from './components/card';
|
|
||||||
import Checkbox from './components/checkbox';
|
|
||||||
import Dialog from './components/dialog';
|
|
||||||
import Drawer from './components/drawer';
|
|
||||||
import Dropdown from './components/dropdown';
|
|
||||||
import IconMenu from './components/icon_menu';
|
|
||||||
import Input from './components/input';
|
|
||||||
import List from './components/list';
|
|
||||||
import Menu from './components/menu';
|
|
||||||
import Pickers from './components/pickers';
|
|
||||||
import Progress from './components/progress';
|
|
||||||
import Radio from './components/radio';
|
|
||||||
import Snackbar from './components/snackbar';
|
|
||||||
import Slider from './components/slider';
|
|
||||||
import Switch from './components/switch';
|
|
||||||
import Tabs from './components/tabs';
|
|
||||||
|
|
||||||
const App = () => {
|
|
||||||
return (
|
|
||||||
<app data-react-toolbox-app>
|
|
||||||
<h1>React Toolbox</h1>
|
|
||||||
<h3>Component Spec v0.10.20</h3>
|
|
||||||
|
|
||||||
<Autocomplete />
|
|
||||||
<Button />
|
|
||||||
<Card />
|
|
||||||
<Checkbox />
|
|
||||||
<Dialog />
|
|
||||||
<Drawer />
|
|
||||||
<Dropdown />
|
|
||||||
<IconMenu />
|
|
||||||
<Input />
|
|
||||||
<List />
|
|
||||||
<Menu />
|
|
||||||
<Pickers />
|
|
||||||
<Progress />
|
|
||||||
<Radio />
|
|
||||||
<Slider />
|
|
||||||
<Snackbar />
|
|
||||||
<Switch />
|
|
||||||
<Tabs />
|
|
||||||
</app>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
ReactDOM.render(<App/>, document.getElementById('toolbox-test'));
|
ReactDOM.render(<App/>, document.getElementById('toolbox-test'));
|
||||||
|
|
|
@ -0,0 +1,16 @@
|
||||||
|
.app {
|
||||||
|
padding: 1.6rem;
|
||||||
|
> h1, > h3 {
|
||||||
|
line-height: 100%;
|
||||||
|
}
|
||||||
|
h5 {
|
||||||
|
margin-top: 3.2rem;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
[data-react-toolbox='card'] {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 1.6rem 1.6rem 0 0;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,2 +1,2 @@
|
||||||
var context = require.context('./components', true, /(.spec\.cjsx?|.spec\.jsx?)$/);
|
const context = require.context('./components', true, /(.spec\.cjsx?|.spec\.jsx?)$/);
|
||||||
context.keys().forEach(context);
|
context.keys().forEach(context);
|
||||||
|
|
|
@ -0,0 +1,42 @@
|
||||||
|
const path = require('path');
|
||||||
|
const webpack = require('webpack');
|
||||||
|
const autoprefixer = require('autoprefixer');
|
||||||
|
const devServer = 'http://0.0.0.0:8080';
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
context: __dirname,
|
||||||
|
devtool: '#eval-source-map',
|
||||||
|
entry: [
|
||||||
|
'webpack-dev-server/client?' + devServer,
|
||||||
|
'webpack/hot/only-dev-server',
|
||||||
|
'./spec/index.jsx'
|
||||||
|
],
|
||||||
|
output: {
|
||||||
|
path: path.join(__dirname, 'build'),
|
||||||
|
filename: 'spec.js',
|
||||||
|
publicPath: '/build/'
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
extensions: ['', '.jsx', '.scss', '.js', '.json']
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
loaders: [
|
||||||
|
{
|
||||||
|
test: /(\.js|\.jsx)$/,
|
||||||
|
exclude: /(node_modules)/,
|
||||||
|
loader: 'react-hot!babel'
|
||||||
|
}, {
|
||||||
|
test: /(\.scss|\.css)$/,
|
||||||
|
loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
postcss: [autoprefixer],
|
||||||
|
plugins: [
|
||||||
|
new webpack.HotModuleReplacementPlugin(),
|
||||||
|
new webpack.optimize.OccurenceOrderPlugin(),
|
||||||
|
new webpack.DefinePlugin({
|
||||||
|
'process.env.NODE_ENV': JSON.stringify('development')
|
||||||
|
})
|
||||||
|
]
|
||||||
|
};
|
|
@ -1,35 +0,0 @@
|
||||||
var pkg = require('./package.json');
|
|
||||||
var node_modules = __dirname + '/node_modules';
|
|
||||||
var ExtractTextPlugin = require('extract-text-webpack-plugin');
|
|
||||||
var environment = process.env.NODE_ENV;
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
cache: true,
|
|
||||||
resolve: {
|
|
||||||
extensions: ['', '.jsx', '.scss', '.js', '.json']
|
|
||||||
},
|
|
||||||
context: __dirname,
|
|
||||||
entry: {
|
|
||||||
commons: ['./components/commons'],
|
|
||||||
test: ['webpack/hot/dev-server', './spec/index.jsx']
|
|
||||||
},
|
|
||||||
output: {
|
|
||||||
path: environment === 'production' ? './dist' : './build',
|
|
||||||
filename: pkg.name + '.[name].js',
|
|
||||||
publicPath: '/build/'
|
|
||||||
},
|
|
||||||
devServer: {
|
|
||||||
host: '0.0.0.0',
|
|
||||||
port: 8080,
|
|
||||||
inline: true
|
|
||||||
},
|
|
||||||
module: {
|
|
||||||
noParse: [node_modules + '/react/dist/*.js'],
|
|
||||||
loaders: [
|
|
||||||
{ test: /(\.js|\.jsx)$/, exclude: /(node_modules)/, loaders: ['babel'] },
|
|
||||||
{ test: /(\.scss|\.css)$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!sass') }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
postcss: [require('autoprefixer-core')],
|
|
||||||
plugins: [new ExtractTextPlugin(pkg.name + '.[name].css', {allChunks: true})]
|
|
||||||
};
|
|
|
@ -0,0 +1,27 @@
|
||||||
|
const webpack = require('webpack');
|
||||||
|
const autoprefixer = require('autoprefixer');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
module: {
|
||||||
|
loaders: [
|
||||||
|
{
|
||||||
|
test: /(\.js|\.jsx)$/,
|
||||||
|
exclude: /(node_modules)/,
|
||||||
|
loader: 'react-hot!babel'
|
||||||
|
}, {
|
||||||
|
test: /(\.scss|\.css)$/,
|
||||||
|
loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
extensions: ['', '.jsx', '.scss', '.js', '.json']
|
||||||
|
},
|
||||||
|
watch: true,
|
||||||
|
postcss: [autoprefixer],
|
||||||
|
plugins: [
|
||||||
|
new webpack.DefinePlugin({
|
||||||
|
'process.env.NODE_ENV': JSON.stringify('test')
|
||||||
|
})
|
||||||
|
]
|
||||||
|
};
|
Loading…
Reference in New Issue