vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Merge branch 'master' into refactor-classname-generation

old
jpersson 2015-11-19 14:26:09 -05:00
parent 76a7e913ea 7841b430d6
commit e76cec03f0
25 changed files with 288 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/_mixins.scss
View File

@ -252,6 +252,11 @@
transition-duration: $duration;
}
@mixin rounded-overflow() {
overflow: hidden;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
// The frames are this way to prevent a flicker in Safari
// See https://goo.gl/5luFDk
@mixin ripple-loading($name, $width, $height, $opacity: 0.3) {

2
components/app/style.scss
View File

@ -1,5 +1,3 @@
@import "../commons";
.root {
position: absolute;
top: 0;

2
components/autocomplete/index.jsx
View File

@ -59,7 +59,7 @@ class Autocomplete extends React.Component {
};
handleQueryChange = (event) => {
this.setState({event: event.target.value});
this.setState({query: event.target.value});
};
handleQueryFocus = () => {

2
components/autocomplete/style.scss
View File

@ -17,7 +17,7 @@
}
&.errored {
.suggestions {
margin-top: - $input-error-height;
margin-top: - $input-underline-height;
}
}
}

9
components/button/index.jsx
View File

@ -43,6 +43,12 @@ class Button extends React.Component {
if (this.props.onMouseDown) this.props.onMouseDown(event);
};
handleTouchStart = (event) => {
events.pauseEvent(event);
if (this.refs.ripple) this.refs.ripple.start(event.touches[0], true);
if (this.props.onTouchStart) this.props.onTouchStart(event);
};
render () {
const {accent, flat, floating, href, icon, label, loading, mini,
primary, raised, ripple, toggle, tooltip, ...others} = this.props;
@ -59,7 +65,8 @@ class Button extends React.Component {
href,
className,
disabled: this.props.disabled || this.props.loading,
onMouseDown: this.handleMouseDown
onMouseDown: this.handleMouseDown,
onTouchStart: this.handleTouchStart
};
return React.createElement(element, props,

2
components/button/style.scss
View File

@ -41,7 +41,7 @@
pointer-events: none;
}
[data-react-toolbox="ripple"] {
overflow: hidden;
@include rounded-overflow();
}
}

190
components/commons.scss
View File

@ -1,6 +1,16 @@
@import "~normalize.css";
@import "./base";
@import url($font-roboto-url);
$import-normalize: true !default;
$import-font: true !default;
$import-flex-attributes: false !default;
@if $import-normalize == true {
@import "~normalize.css";
}
@if $import-font == true {
@import url($font-roboto-url);
}
html {
font-size: 62.5%;
@ -93,97 +103,99 @@ p {
@include typo-body-1;
}
//-- Flex
[data-flex] {
display: flex;
}
@if $import-flex-attributes == true {
//-- Flex
[data-flex] {
display: flex;
}
body[data-flex] {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
}
body[data-flex] {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
}
// -- Direction
[data-flex^="horizontal"] {
flex-direction: row;
}
// -- Direction
[data-flex^="horizontal"] {
flex-direction: row;
}
[data-flex^="vertical"] {
flex-direction: column;
}
[data-flex^="vertical"] {
flex-direction: column;
}
// -- Size {
[data-flex*="grow"] {
> *:not([data-column]):not([data-flex-grow]) {
flex-grow: 1;
// -- Size {
[data-flex*="grow"] {
> *:not([data-column]):not([data-flex-grow]) {
flex-grow: 1;
}
}
[data-flex-grow="min"] {
flex-grow: 0;
}
[data-flex-grow="max"] {
flex-grow: 2;
}
// -- Container properties
[data-flex*="wrap"] {
flex-wrap: wrap;
}
[data-flex*="center"] {
align-content: center;
align-items: center;
justify-content: center;
}
[data-flex-justify="start"] {
justify-content: flex-start;
}
[data-flex-justify="center"] {
justify-content: center;
}
[data-flex-justify="end"] {
justify-content: flex-end;
}
[data-flex-content="start"] {
align-content: flex-start;
}
[data-flex-content="center"] {
align-content: center;
}
[data-flex-content="end"] {
align-content: flex-end;
}
[data-flex-items="center"] {
align-items: center;
}
[data-flex-items="start"] {
align-items: flex-start;
}
[data-flex-items="end"] {
align-items: flex-end;
}
// -- Children properties
[data-flex-order="first"] {
order: -1;
}
[data-flex-order="last"] {
order: 999999;
}
}
[data-flex-grow="min"] {
flex-grow: 0;
}
[data-flex-grow="max"] {
flex-grow: 2;
}
// -- Container properties
[data-flex*="wrap"] {
flex-wrap: wrap;
}
[data-flex*="center"] {
align-content: center;
align-items: center;
justify-content: center;
}
[data-flex-justify="start"] {
justify-content: flex-start;
}
[data-flex-justify="center"] {
justify-content: center;
}
[data-flex-justify="end"] {
justify-content: flex-end;
}
[data-flex-content="start"] {
align-content: flex-start;
}
[data-flex-content="center"] {
align-content: center;
}
[data-flex-content="end"] {
align-content: flex-end;
}
[data-flex-items="center"] {
align-items: center;
}
[data-flex-items="start"] {
align-items: flex-start;
}
[data-flex-items="end"] {
align-items: flex-end;
}
// -- Children properties
[data-flex-order="first"] {
order: -1;
}
[data-flex-order="last"] {
order: 999999;
}

2
components/input/_config.scss
View File

@ -11,7 +11,7 @@ $input-text-highlight-color: unquote("rgb(#{$color-primary})") !default;
$input-text-disabled-color: $input-text-bottom-border-color !default;
$input-text-disabled-text-color: $input-text-label-color !default;
$input-text-error-color: unquote("rgb(222, 50, 38)") !default;
$input-error-height: 1.8 * $unit;
$input-underline-height: 2 * $unit;
$input-icon-font-size: 2.4 * $unit;
$input-icon-size: 2 * $input-icon-font-size;
$input-icon-offset: 1.6 * $unit;

13
components/input/index.jsx
View File

@ -12,6 +12,7 @@ class Input extends React.Component {
floating: React.PropTypes.bool,
icon: React.PropTypes.string,
label: React.PropTypes.string,
maxLength: React.PropTypes.number,
multiline: React.PropTypes.bool,
onBlur: React.PropTypes.func,
onChange: React.PropTypes.func,
@ -41,6 +42,16 @@ class Input extends React.Component {
}
}
renderUnderline () {
const error = this.props.error ? <span className={style.error}>{this.props.error}</span> : null;
let counter = null;
if (this.props.maxLength) {
const length = this.props.value ? this.props.value.length : 0;
if (length > 0) counter = <span className={style.counter}>{length} / {this.props.maxLength}</span>;
}
if (error || counter) return <span className={style.underline}>{error}{counter}</span>;
}
render () {
const className = classNames({
[style.root]: true,
@ -62,7 +73,7 @@ class Input extends React.Component {
{ this.props.icon ? <FontIcon className={style.icon} value={this.props.icon} /> : null }
<span className={style.bar}></span>
{ this.props.label ? <label className={labelClassName}>{this.props.label}</label> : null }
{ this.props.error ? <span className={style.error}>{this.props.error}</span> : null }
{ this.renderUnderline() }
{ this.props.tooltip ? <Tooltip label={this.props.tooltip}/> : null }
</div>
);

1
components/input/readme.md
View File

@ -38,6 +38,7 @@ class InputTest extends React.Component {
| `icon` | `String` | | Name of an icon to use as a label for the input.|
| `floating` | `Boolean` | `true` | Indicates if the label is floating in the input field or not.|
| `label` | `String` | | The text string to use for the floating label element.|
| `maxLength` | `number` | |Specifies the maximum number of characters allowed in the component.|
| `multiline` | `Boolean` | `false` | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
| `onBlur` | `Function` | | Callback function that is fired when components is blured.|
| `onChange` | `Function` | | Callback function that is fired when the components's value changes.|

23
components/input/style.scss
View File

@ -90,11 +90,23 @@
}
}
.error {
display: block;
.underline {
display: flex;
margin-bottom: - $input-underline-height;
font-size: $input-label-font-size;
line-height: $input-error-height;
color: $input-text-error-color;
line-height: $input-underline-height;
color: $input-text-label-color;
.error, .counter {
flex-grow: 1;
}
}
.error {
text-align: left;
}
.counter {
text-align: right;
}
.disabled > .input {
@ -115,6 +127,9 @@
}
}
}
> .underline {
color: $input-text-error-color;
}
}
.hidden {

4
components/radio/style.scss
View File

@ -60,7 +60,7 @@
background-color: $radio-inner-color;
border-radius: 50%;
transition-property: transform;
transform: scale3d(0, 0, 0);
transform: scale(0);
}
}
@ -68,7 +68,7 @@
@extend .radio;
border: .2 * $unit solid $radio-inner-color;
&:before {
transform: scale3d(1, 1, 1);
transform: scale(1);
}
}

12
components/ripple/index.jsx
View File

@ -25,13 +25,13 @@ class Ripple extends React.Component {
width: null
};
handleEnd = () => {
document.removeEventListener('mouseup', this.handleEnd);
handleEnd = (touch = false) => {
document.removeEventListener(touch ? 'touchend' : 'mouseup', this.handleEnd);
this.setState({active: false});
};
start = ({ pageX, pageY }) => {
document.addEventListener('mouseup', this.handleEnd);
start = ({ pageX, pageY }, touch = false) => {
document.addEventListener(touch ? 'touchend' : 'mouseup', this.handleEnd.bind(this, touch));
const {top, left, width} = this._getDescriptor(pageX, pageY);
this.setState({active: false, restarting: true, width: 0}, () => {
this.refs.ripple.offsetWidth; //eslint-disable-line no-unused-expressions
@ -42,8 +42,8 @@ class Ripple extends React.Component {
_getDescriptor (pageX, pageY) {
const { left, top, height, width } = ReactDOM.findDOMNode(this).getBoundingClientRect();
return {
left: this.props.centered ? width / 2 : pageX - left,
top: this.props.centered ? height / 2 : pageY - top,
left: this.props.centered ? width / 2 : pageX - left + window.scrollX,
top: this.props.centered ? height / 2 : pageY - top + window.scrollY,
width: width * this.props.spread
};
}

34
components/tabs/readme.md
View File

@ -6,15 +6,31 @@
```jsx
import {Tab, Tabs} from 'react-toolbox';
const TabsExample = () => (
<Tabs>
<Tab label='Primary'><small>Primary content</small></Tab>
<Tab label='Secondary'><small>Secondary content</small></Tab>
<Tab label='Third' disabled><small>Disabled content</small></Tab>
<Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
<Tab label='Fifth'><small>Fifth content</small></Tab>
</Tabs>
);
class TabsTest extends React.Component {
state = {
index: 1
};
handleTabChange = (index) => {
this.setState({index});
};
handleActive = () => {
console.log('Special one activated');
};
render () {
return (
<Tabs index={this.state.index} onChange={this.handleTabChange}>
<Tab label='Primary'><small>Primary content</small></Tab>
<Tab label='Secondary' onActive={this.handleActive}><small>Secondary content</small></Tab>
<Tab label='Third' disabled><small>Disabled content</small></Tab>
<Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
<Tab label='Fifth'><small>Fifth content</small></Tab>
</Tabs>
);
}
}
```
## Tabs

1
docs/app/components/_globals.scss
View File

@ -1,4 +1,5 @@
@import "~react-toolbox/base";
@import "~react-toolbox/commons";
$unit: 1rem;
$color-primary-dark: unquote("rgb(#{$color-primary-dark})");

29
docs/app/components/layout/home/index.jsx
View File

@ -6,18 +6,6 @@ import Navigation from '../../navigation';
import style from './style';
import authors from './modules/authors';
const GithubIcon = () => (
<svg viewBox="0 0 284 277">
<g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
</svg>
);
const TwitterIcon = () => (
<svg viewBox="0 0 274 223">
<g><path d="M273.39,26.301 C263.331,30.762 252.521,33.777 241.175,35.133 C252.756,28.191 261.649,17.199 265.837,4.102 C255,10.529 242.996,15.197 230.22,17.713 C219.988,6.812 205.411,0 189.279,0 C158.302,0 133.188,25.113 133.188,56.088 C133.188,60.484 133.685,64.765 134.641,68.87 C88.025,66.531 46.696,44.201 19.032,10.267 C14.204,18.551 11.438,28.186 11.438,38.465 C11.438,57.924 21.341,75.092 36.391,85.15 C27.196,84.859 18.548,82.336 10.985,78.135 C10.981,78.369 10.981,78.604 10.981,78.84 C10.981,106.016 30.315,128.686 55.974,133.838 C51.267,135.12 46.312,135.805 41.196,135.805 C37.582,135.805 34.068,135.454 30.644,134.799 C37.781,157.083 58.495,173.299 83.039,173.752 C63.843,188.795 39.658,197.762 13.38,197.762 C8.853,197.762 4.388,197.497 0,196.979 C24.822,212.893 54.305,222.178 85.98,222.178 C189.148,222.178 245.564,136.711 245.564,62.592 C245.564,60.16 245.51,57.741 245.402,55.336 C256.36,47.428 265.87,37.549 273.39,26.301" /></g>
</svg>
);
const Home = () => (
<article>
<header className={style.header}>
@ -59,23 +47,6 @@ const Home = () => (
<ul className={style.authors}>
{
authors.map((author, index) => {
author.actions.map((action) => {
if (action.id === 'github') {
action.style = {color: '#000'};
action.children = [
<GithubIcon key={`gicon-${author.subtitle}`} />,
<span key={`glabel-${author.subtitle}`}>Github</span>
];
action.id = null;
} else {
action.style = {color: '#55acee'};
action.children = [
<TwitterIcon key={`ticon-${author.subtitle}`} />,
<span key={`tlabel-${author.subtitle}`}>Twitter</span>
];
action.id = null;
}
});
return <Card key={index} {...author} />;
})
}

24
docs/app/components/layout/home/modules/authors.js
View File

@ -1,24 +0,0 @@
export default [
{
title: 'Javi Velasco',
subtitle: 'javivelasco',
actions: [
{ id: 'github', href: 'http://github.com/javivelasco', target: '_blank' },
{ id: 'twitter', href: 'http://twitter.com/javivelasco', target: '_blank' }
],
image: '/images/javivelasco.jpg',
text: 'Software gardener • Film, music & comic lover • Frontend Engineer at SocialBro • Any biographer in the room?',
color: '#3f51b5'
},
{
title: 'Javi Jimenez',
subtitle: 'soyjavi',
actions: [
{ id: 'github', href: 'http://github.com/soyjavi', target: '_blank' },
{ id: 'twitter', href: 'http://twitter.com/soyjavi', target: '_blank' }
],
image: '/images/soyjavi.jpg',
text: 'Creative Doer · A complicated #human who builds stuff · #author · #opensource lover · #traveller · with a dark past being CEO & CTO',
color: '#3f51b5'
}
];

56
docs/app/components/layout/home/modules/authors.jsx Normal file
View File

@ -0,0 +1,56 @@
import React from 'react';
const GithubIcon = () => (
<svg viewBox="0 0 284 277">
<g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
</svg>
);
const TwitterIcon = () => (
<svg viewBox="0 0 274 223">
<g><path d="M273.39,26.301 C263.331,30.762 252.521,33.777 241.175,35.133 C252.756,28.191 261.649,17.199 265.837,4.102 C255,10.529 242.996,15.197 230.22,17.713 C219.988,6.812 205.411,0 189.279,0 C158.302,0 133.188,25.113 133.188,56.088 C133.188,60.484 133.685,64.765 134.641,68.87 C88.025,66.531 46.696,44.201 19.032,10.267 C14.204,18.551 11.438,28.186 11.438,38.465 C11.438,57.924 21.341,75.092 36.391,85.15 C27.196,84.859 18.548,82.336 10.985,78.135 C10.981,78.369 10.981,78.604 10.981,78.84 C10.981,106.016 30.315,128.686 55.974,133.838 C51.267,135.12 46.312,135.805 41.196,135.805 C37.582,135.805 34.068,135.454 30.644,134.799 C37.781,157.083 58.495,173.299 83.039,173.752 C63.843,188.795 39.658,197.762 13.38,197.762 C8.853,197.762 4.388,197.497 0,196.979 C24.822,212.893 54.305,222.178 85.98,222.178 C189.148,222.178 245.564,136.711 245.564,62.592 C245.564,60.16 245.51,57.741 245.402,55.336 C256.36,47.428 265.87,37.549 273.39,26.301" /></g>
</svg>
);
export default [
{
title: 'Javi Velasco',
subtitle: 'javivelasco',
actions: [
{
href: 'http://github.com/javivelasco',
children: [<GithubIcon key='gicon-javivelasco' />, <span key='glabel-javivelasco'>Github</span>],
target: '_blank'
},
{
href: 'http://twitter.com/javivelasco',
children: [<TwitterIcon key='ticon-javivelasco' />, <span key='tlabel-javivelasco'>Twitter</span>],
style: {color: '#55acee'},
target: '_blank'
}
],
image: '/images/javivelasco.jpg',
text: 'Software gardener • Film, music & comic lover • Frontend Engineer at SocialBro • Any biographer in the room?',
color: '#3f51b5'
},
{
title: 'Javi Jimenez',
subtitle: 'soyjavi',
actions: [
{
href: 'http://github.com/soyjavi',
children: [<GithubIcon key='gicon-soyjavi' />, <span key='glabel-soyjavi'>Github</span>],
target: '_blank'
},
{
href: 'http://twitter.com/soyjavi',
children: [<TwitterIcon key='ticon-soyjavi' />, <span key='tlabel-soyjavi'>Twitter</span>],
style: {color: '#55acee'},
target: '_blank'
}
],
image: '/images/soyjavi.jpg',
text: 'Creative Doer · A complicated #human who builds stuff · #author · #opensource lover · #traveller · with a dark past being CEO & CTO',
color: '#3f51b5'
}
];

2
docs/app/components/layout/main/modules/examples/input_example_1.txt
View File

@ -10,7 +10,7 @@ class InputTest extends React.Component {
render () {
return (
<section>
<Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} />
<Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} maxLength={16 } />
<Input type='text' label='Disabled field' disabled />
<Input type='email' label='Email address' icon='email' />
<Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.withIcon} onChange={this.handleChange.bind(this, 'phone')} />

30
docs/app/components/layout/main/modules/examples/tabs_example_1.txt
View File

@ -1,11 +1,23 @@
const TabsExample = () => (
<Tabs>
<Tab label='Primary'><small>Primary content</small></Tab>
<Tab label='Secondary'><small>Secondary content</small></Tab>
<Tab label='Third' disabled><small>Disabled content</small></Tab>
<Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
<Tab label='Fifth'><small>Fifth content</small></Tab>
</Tabs>
);
class TabsExample extends React.Component {
state = {
index: 1
};
handleTabChange = (index) => {
this.setState({index});
};
render () {
return (
<Tabs index={this.state.index} onChange={this.handleTabChange}>
<Tab label='Primary'><small>Primary content</small></Tab>
<Tab label='Secondary'><small>Secondary content</small></Tab>
<Tab label='Third' disabled><small>Disabled content</small></Tab>
<Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
<Tab label='Fifth'><small>Fifth content</small></Tab>
</Tabs>
);
}
}
return <TabsExample />;

12
docs/app/components/layout/main/style.scss
View File

@ -19,7 +19,8 @@
right: 0;
bottom: 0;
left: 0;
transition: all $animation-duration $animation-curve-default;
z-index: $z-index-normal;
transition: padding $animation-duration $animation-curve-default;
}
.navigation {
@ -29,24 +30,25 @@
left: 0;
z-index: $z-index-high;
box-shadow: $documentation-left-shadow;
transition: all $animation-duration $animation-curve-default;
transition: transform $animation-duration $animation-curve-default;
}
.playground {
position: fixed;
top: $appbar-height;
right: 0;
bottom: 0;
z-index: $z-index-high;
width: $playground-width;
background: $color-background;
box-shadow: $documentation-right-shadow;
transition: right $animation-duration $animation-curve-default;
transition: transform $animation-duration $animation-curve-default;
}
.root {
&:not(.with-playground) {
> .playground {
right: - ($playground-width * 1.1);
transform: translateX(100%);
}
> .documentation {
padding-right: 0;
@ -58,7 +60,7 @@
}
&.with-playground {
> .playground {
right: 0;
transform: translateY(0);
}
> .documentation {
padding-right: $playground-width;

6
package.json
View File

@ -1,6 +1,6 @@
{
"name": "react-toolbox",
"version": "0.12.7",
"version": "0.12.11",
"homepage": "www.react-toolbox.com",
"description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
"author": "React Toolbox Team (http://github.com/react-toolbox)",
@ -19,7 +19,7 @@
"main": "./lib",
"scripts": {
"start": "cross-env NODE_ENV=development UV_THREADPOOL_SIZE=100 node ./server",
"lint": "eslint ./ --ext .js,.jsx && scss-lint",
"lint": "eslint ./ --ext .js,.jsx",
"babel": "babel ./components --out-dir ./lib",
"sass": "cpx './components/**/*.scss' ./lib",
"build": "cross-env NODE_ENV=production npm run babel && npm run sass",
@ -58,8 +58,8 @@
"babel-plugin-react-transform": "^1.1.1",
"classnames-minimal": "^1.0.0",
"core-js": "^1.2.6",
"cross-env": "^1.0.4",
"cpx": "^1.2.1",
"cross-env": "^1.0.4",
"css-loader": "^0.21.0",
"eslint": "^1.7.3",
"eslint-plugin-react": "^3.3.1",

9
spec/components/input.jsx
View File

@ -3,7 +3,7 @@ import Input from '../../components/input';
class InputTest extends React.Component {
state = {
normal: '',
normal: 'hello world',
fixedLabel: '',
withIcon: ''
};
@ -19,7 +19,12 @@ class InputTest extends React.Component {
<section>
<h5>Inputs</h5>
<p>lorem ipsum...</p>
<Input type='text' value={this.state.normal} label='Firstname' onChange={this.handleChange.bind(this, 'normal')} />
<Input
type='text'
value={this.state.normal}
label='Firstname' onChange={this.handleChange.bind(this, 'normal')}
maxLength={12}
/>
<Input type='email' value={this.state.fixedLabel} label='Label fixed' floating={false} onChange={this.handleChange.bind(this, 'fixedLabel')} />
<Input type='text' value='Read only' readOnly label='Phone Number' />
<Input type='text' label='Disabled field' disabled />

26
spec/components/tabs.jsx
View File

@ -2,7 +2,6 @@ import React from 'react';
import { Tabs, Tab } from '../../components/tabs';
class TabsTest extends React.Component {
state = {
index: 1
};
@ -20,27 +19,12 @@ class TabsTest extends React.Component {
<section>
<h5>Tabs</h5>
<p>This tabs can be disabled or hidden</p>
<Tabs index={this.state.index} onChange={this.handleTabChange}>
<Tab label='Primary'>
<small>Primary content</small>
</Tab>
<Tab label='Secondary' onActive={this.handleActive}>
<small>Secondary content</small>
</Tab>
<Tab label='Third' disabled>
<small>Disabled content</small>
</Tab>
<Tab label='Fourth' hidden>
<small>Fourth content hidden</small>
</Tab>
<Tab label='Fifth'>
<small>Fifth content</small>
</Tab>
<Tab label='Primary'><small>Primary content</small></Tab>
<Tab label='Secondary' onActive={this.handleActive}><small>Secondary content</small></Tab>
<Tab label='Third' disabled><small>Disabled content</small></Tab>
<Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
<Tab label='Fifth'><small>Fifth content</small></Tab>
</Tabs>
</section>
);

5
spec/style.scss
View File

@ -1,4 +1,7 @@
@import "../components/base";
$import-normalize: false;
$import-flex-attributes: true;
@import "../components/commons";
@import "../components/app_bar/config";
@import "../components/button/config";