fix conflict
ustccjw
commit
926931ce2c
|
|
@ -6,5 +6,5 @@
|
|||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,28 @@
|
|||
# App Bar
|
||||
|
||||
The app bar is a special kind of toolbar that’s used for branding, navigation, search, and actions. Usually it contains controls on the right and left side and a title with the current section or app name. You should give the content with children elements.
|
||||
|
||||
```javascript
|
||||
import AppBar from 'react-toolbox/app_bar';
|
||||
|
||||
const AppBarTest = () => (
|
||||
<AppBar className="my-site-bar" fixed flat>
|
||||
<a href="/home">React Toolbox Docs</a>
|
||||
<Navigation />
|
||||
</AppBar>
|
||||
);
|
||||
```
|
||||
|
||||
Coming soon, the `AppBar` component will support arbitrary content attributes for left and right content and a title.
|
||||
|
||||
## Properties
|
||||
|
||||
| Name | Type | Default | Description|
|
||||
|:- |:-: | :- |:-|
|
||||
| **className** | String | `''` | Set a class for the root component.|
|
||||
| **flat** | Bool | `false` | If true, the AppBar shows a shadow.|
|
||||
| **fixed** | Bool | `false` | Determine if the bar should have position `fixed` or `relative`.|
|
||||
|
||||
## Structure
|
||||
|
||||
It renders an HTML `header` tag with the given `className` so to style it you just need to use a class and apply CSS over the node.
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
background: $appbar-color;
|
||||
|
||||
&:not(.flat) {
|
||||
z-index: $z-index-higher;
|
||||
z-index: $z-index-high;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,.26);
|
||||
}
|
||||
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: $z-index-higher;
|
||||
z-index: $z-index-high;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -212,10 +212,6 @@ class Autocomplete extends React.Component {
|
|||
}
|
||||
this.setState({values, query: this.props.multiple ? '' : values.get(data[0])});
|
||||
}
|
||||
|
||||
setError (data) {
|
||||
this.input.setError(data);
|
||||
}
|
||||
}
|
||||
|
||||
export default Autocomplete;
|
||||
|
|
|
|||
|
|
@ -1,51 +1,64 @@
|
|||
# Autocomplete
|
||||
|
||||
An input field with a set of predeterminated values and labels. When it's focused it shows a list of hints that are filtered as the user types content. They can be simple or multiple depending on the amount of values that can be selected. The opening direction is determinated at opening time depending on the current position.
|
||||
|
||||
<!-- example -->
|
||||
```
|
||||
var Autocomplete = require('react-toolbox/components/autocomplete');
|
||||
import Autocomplete from 'react-toolbox/autocomplete';
|
||||
|
||||
var data = [
|
||||
{ '1': 'Never' },
|
||||
{ '2': 'Every Night' },
|
||||
{ '3': 'Weeknights' },
|
||||
{ '4': 'Weekends' },
|
||||
{ '5': 'Weekly' },
|
||||
];
|
||||
const countries = {
|
||||
'EN-gb': 'England',
|
||||
'ES-es': 'Spain',
|
||||
'TH-th': 'Thailand',
|
||||
'EN-en': 'USA'
|
||||
};
|
||||
|
||||
<Autocomplete label="Period" dataSource={data} value='4' />
|
||||
const selected = ['ES-es', 'EN-gb'];
|
||||
|
||||
const AutocompleteTest = () => (
|
||||
<Autocomplete
|
||||
label="Choose a country"
|
||||
placeholder="Elements is up to you..."
|
||||
dataSource={countries}
|
||||
value={selected}
|
||||
/>
|
||||
)
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
| Name | Type | Default | Description|
|
||||
|:- |:-: | :- |:-|
|
||||
| **className** | String | | Sets the class-styles of the Component.|
|
||||
| **dataSource** | Object | | JSON data representing all items in the component.|
|
||||
| **disabled** | Boolean | | If true, component will be disabled.|
|
||||
| **error** | String | | Sets the error string.|
|
||||
| **label** | String | | The text string to use for the floating label element.|
|
||||
| **multiple** | Bool | true | If true, component can hold multiple values.|
|
||||
| **onChange** | Function | | Callback function that is fired when the components's value changes.|
|
||||
| **required** | Boolean | | If true, component needs has a value.|
|
||||
| **value** | String | | Default value using JSON data.|
|
||||
| className | `String` | `''` | Sets a class to style of the Component.|
|
||||
| dataSource | `Object` or `Array` | | Object of key/values or array representing all items suggested.|
|
||||
| disabled | `Bool` | `false` | If true, component will be disabled.|
|
||||
| error | `String` | | Sets the error string for the internal input element.|
|
||||
| label | `String` | | The text string to use for the floating label element.|
|
||||
| multiple | `Bool` | `true` | If true, component can hold multiple values.|
|
||||
| onChange | `Function` | | Callback function that is fired when the components's value changes.|
|
||||
| required | `Boolean` | | If true, component input is set as required.|
|
||||
| value | `String` or `Array` | | Default value to initialize the component.|
|
||||
|
||||
## Methods
|
||||
|
||||
#### getValue
|
||||
Returns the value of the input.
|
||||
This component has state to control how is it rendered and the values currently selected. It exposes the following instance methods:
|
||||
|
||||
```
|
||||
input_instance.getValue();
|
||||
```
|
||||
- `getValue` is used to retrieve the current value.
|
||||
- `setValue` to force a new value.
|
||||
|
||||
#### setValue
|
||||
Sets the value of the input element.
|
||||
## Customization
|
||||
|
||||
```
|
||||
input_instance.setValue(newValue);
|
||||
```
|
||||
|
||||
#### setError
|
||||
The component has a complex structure that can be customized by giving a custom `className` and targeting `react-toolbox` data attributes. The structure is similar to:
|
||||
|
||||
```
|
||||
input_instance.setError("Something is wrong...");
|
||||
```html
|
||||
<div data-react-toolbox="autocomplete">
|
||||
<label data-role="label"></label>
|
||||
<ul data-role="selections">
|
||||
<li data=role="selection"></li>
|
||||
</ul>
|
||||
<input data-role="input" />
|
||||
<ul data-role="suggestions">
|
||||
<li data=role="suggestion"></li>
|
||||
</ul>
|
||||
</div>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,33 +1,34 @@
|
|||
# Button
|
||||
|
||||
A button clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’s color theme.
|
||||
A [button](https://www.google.com/design/spec/components/buttons.html) clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’s color theme.
|
||||
|
||||
<!-- example -->
|
||||
```
|
||||
var Button = require('react-toolbox/components/button');
|
||||
<Button className="accent" label="Flat button" />
|
||||
<Button className="primary" type="raised" label="Raised" />
|
||||
<Button className="accent" type="raised" label="Raised" icon="assignment_turned_in" />
|
||||
<Button className="primary" type="floating" icon="add" />
|
||||
<Button className="accent mini" type="floating" icon="add" />
|
||||
import Button from 'react-toolbox/button';
|
||||
|
||||
const TestButtons = () => (
|
||||
<div>
|
||||
<Button label="Flat button" />
|
||||
<Button kind="raised" label="Raised" />
|
||||
<Button kind="raised" label="Raised accent" accent icon="favorite" />
|
||||
<Button className="primary" kind="floating" icon="add" />
|
||||
<Button mini kind="floating" icon="add" accent />
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
| Name | Type | Default | Description|
|
||||
|:- |:-: | :- |:-|
|
||||
| **className** | String | | Set the class-styles of the Component.|
|
||||
| **disabled** | Boolean | | If true, component will be disabled.|
|
||||
| **icon** | String | | Default value using JSON data.|
|
||||
| **label** | String | | The text string to use for the floating label element.|
|
||||
| **loading** | Boolean | | If true, component will be disabled and show a loading animation.|
|
||||
| **ripple** | Boolean | | If true, component will have a ripple effect on click.|
|
||||
| **type** | String | "flat" | Type of the component, overwrite this property if you need set a different stylesheet.|
|
||||
|
||||
## Methods
|
||||
|
||||
#### loading
|
||||
If true, component will be disabled and show a loading animation.
|
||||
|
||||
```
|
||||
input_instance.loading(true);
|
||||
```
|
||||
| Name | Type | Default | Description|
|
||||
|:- |:-: | :- |:-|
|
||||
| accent | `Bool` | `false` | Indicates if the button should have accent color.|
|
||||
| className | `String` | `''` | Set a class to style the Component.|
|
||||
| disabled | `Boolean` | `false` | If true, component will be disabled.|
|
||||
| icon | `String` | | Value of the icon (See icon component). |
|
||||
| kind | `String` | `flat` | Type of the component, overwrite this property if you need set a different stylesheet.|
|
||||
| label | `String` | | The text string to use for the name of the button.|
|
||||
| loading | `Boolean` | `false` | If true, component will be disabled and show a loading animation.|
|
||||
| mini | `Boolean` | `false` | To be used with floating button. If true the button will be smaller.|
|
||||
| onClick | `Function` | | Callback called when the button is clicked.|
|
||||
| primary | `false` | | If true, component will have the primary color.|
|
||||
| ripple | `Boolean` | `true` | If true, component will have a ripple effect on click.|
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
.body {
|
||||
flex-grow: 2;
|
||||
padding: $dialog-content-padding;
|
||||
overflow-y: scroll;
|
||||
overflow-y: auto;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -52,7 +52,6 @@ class Form extends React.Component {
|
|||
for (const attr of this.state.attributes) {
|
||||
if (attr.required && value[attr.ref] !== undefined && value[attr.ref].trim() === '') {
|
||||
is_valid = false;
|
||||
console.log('NOT VALUD');
|
||||
if (this.refs[attr.ref].setError) this.refs[attr.ref].setError('Requited field');
|
||||
break;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ $unit: 1rem;
|
|||
$color-primary-dark: #303f9f;
|
||||
$color-primary-light: #3f51b5;
|
||||
$color-primary-contrast: #fff;
|
||||
$color-accent: unquote("rgb(#{$color-accent})");
|
||||
$color-divider: $color-divider;
|
||||
$color-content: #fafafa;
|
||||
$animation-duration: 250ms;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
$appbar-height: 6.4 * $unit;
|
||||
$appbar-logo-size: 3.6 * $unit;
|
||||
$appbar-shadow: 0 1px rgba(255,255,255,.75);
|
||||
$appbar-navigation-offset: 6.5 * $unit;
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import React from 'react';
|
||||
import { AppBar } from 'react-toolbox';
|
||||
import { Link } from 'react-router';
|
||||
import Logo from '../logo';
|
||||
import Navigation from '../navigation';
|
||||
import style from './style';
|
||||
|
||||
const MainAppBar = (props) => {
|
||||
let className = style.appbar;
|
||||
if (props.className) className += ` ${props.className}`;
|
||||
|
||||
return (
|
||||
<AppBar className={className} flat fixed>
|
||||
<Link to='/'>
|
||||
<Logo className={style.logo} />
|
||||
</Link>
|
||||
<Navigation activeClassName={style.active} className={style.navigation}/>
|
||||
</AppBar>
|
||||
);
|
||||
};
|
||||
|
||||
MainAppBar.propTypes = {
|
||||
className: React.PropTypes.string
|
||||
};
|
||||
|
||||
MainAppBar.defaultProps = {
|
||||
className: ''
|
||||
};
|
||||
|
||||
export default MainAppBar;
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
@import "../globals";
|
||||
@import "./config";
|
||||
|
||||
.appbar {
|
||||
display: flex;
|
||||
min-height: $appbar-height;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
background: $color-primary-dark;
|
||||
box-shadow: $appbar-shadow;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: $appbar-logo-size;
|
||||
height: $appbar-logo-size;
|
||||
margin-top: ($appbar-height - $appbar-logo-size) / 2;
|
||||
fill: $color-primary-contrast;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
flex-grow: 1;
|
||||
text-align: right;
|
||||
> ul {
|
||||
list-style: none;
|
||||
> li {
|
||||
display: inline-block;
|
||||
> a {
|
||||
@include typo-menu;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0 1.5 * $unit;
|
||||
margin-right: $unit;
|
||||
line-height: $appbar-height;
|
||||
color: $color-primary-contrast;
|
||||
&.active:after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: .3 * $unit;
|
||||
content: '';
|
||||
background-color: $color-accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -56,6 +56,11 @@ class Editor extends React.Component {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
setCode (code) {
|
||||
this.editor.getDoc().setValue(code);
|
||||
this.handleChange();
|
||||
}
|
||||
}
|
||||
|
||||
export default Editor;
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@import "../../../globals";
|
||||
@import "../../../mixins";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
|
||||
$documentation-code-background: rgba(0, 0, 0, .0588235);
|
||||
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@import "../../globals";
|
||||
|
||||
$playground-width: 50%;
|
||||
$navigation-width: 22 * $unit;
|
||||
$navigation-h-padding: 2.4 * $unit;
|
||||
$navigation-v-padding: 1.2 * $unit;
|
||||
$navigation-footer-border: solid 1px rgb(224, 224, 224);
|
||||
$documentation-left-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
|
||||
$documentation-right-shadow: 0 -4px 5px 0 rgba(0,0,0,.14),0 -1px 10px 0 rgba(0,0,0,.12), 0 -2px 4px -1px rgba(0,0,0,.2);
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import React from 'react';
|
||||
import { AppBar } from 'react-toolbox';
|
||||
import { Link } from 'react-router';
|
||||
import Logo from '../../../logo';
|
||||
import Navigation from '../../../navigation';
|
||||
import style from './appbar.scss';
|
||||
|
||||
class MainAppBar extends React.Component {
|
||||
|
||||
render () {
|
||||
return (
|
||||
<AppBar className={style.appbar} flat fixed>
|
||||
<Link to='/'>
|
||||
<Logo className={style.logo} />
|
||||
</Link>
|
||||
<Navigation className={style.navigation}/>
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MainAppBar;
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
@import "../../../globals";
|
||||
@import "~react-toolbox/app_bar/config";
|
||||
$appbar-height: 11.2 * $unit;
|
||||
$appbar-logo-size: 3.6 * $unit;
|
||||
$appbar-shadow: 0 1px rgba(255,255,255,.75);
|
||||
|
||||
.appbar {
|
||||
display: flex;
|
||||
min-height: $appbar-height;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
background: $color-primary-dark;
|
||||
box-shadow: $appbar-shadow;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: $appbar-logo-size;
|
||||
height: $appbar-logo-size;
|
||||
fill: $color-primary-contrast;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
> ul {
|
||||
list-style: none;
|
||||
> li {
|
||||
display: inline-block;
|
||||
> a {
|
||||
@include typo-menu;
|
||||
display: inline-block;
|
||||
margin-right: $appbar-h-padding;
|
||||
line-height: $appbar-height / 2;
|
||||
color: $color-primary-contrast;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import React from 'react';
|
||||
import components from '../modules/components';
|
||||
import style from './documentation.scss';
|
||||
|
||||
const Component = (props) => {
|
||||
const html = { __html: components[props.params.component].docs };
|
||||
return (
|
||||
<div
|
||||
className={style.documentation}
|
||||
dangerouslySetInnerHTML={html}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default Component;
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
@import "../../../globals";
|
||||
$drawer-h-offset: 2.4 * $unit;
|
||||
$drawer-v-offset: 1.2 * $unit;
|
||||
$drawer-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
|
||||
$drawer-footer-border: solid 1px rgb(224, 224, 224);
|
||||
$drawer-width: 22 * $unit;
|
||||
|
||||
.root {
|
||||
z-index: $z-index-high;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $color-background;
|
||||
transition: all $animation-duration $animation-ease;
|
||||
&:not(.active_drawer) {
|
||||
min-width: 0;
|
||||
max-width: 0;
|
||||
}
|
||||
&.active_drawer {
|
||||
min-width: $drawer-width;
|
||||
max-width: $drawer-width;
|
||||
box-shadow: $drawer-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
flex-grow: 1;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: $drawer-v-offset $drawer-h-offset;
|
||||
> span > span {
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: $color-divider;
|
||||
}
|
||||
|
||||
.footer {
|
||||
flex-grow: 0;
|
||||
padding: $drawer-h-offset;
|
||||
font-size: $font-size-tiny;
|
||||
color: $color-text-secondary;
|
||||
border-top: $drawer-footer-border;
|
||||
overflow: hidden;
|
||||
> span {
|
||||
display: block;
|
||||
margin-bottom: ($drawer-h-offset / 2);
|
||||
> a {
|
||||
color: $color-primary-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import React from 'react';
|
||||
import style from './drawer_playground.scss';
|
||||
import Playground from '../../../playground';
|
||||
import code from '../../../../examples/example.txt';
|
||||
|
||||
class PlaygroundArea extends React.Component {
|
||||
render () {
|
||||
let className = style.root;
|
||||
if (this.props.active) className += ` ${style.active}`;
|
||||
|
||||
return (
|
||||
<aside className={className}>
|
||||
<Playground codeText={code} layout='vertical' />
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PlaygroundArea;
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
@import "../../../globals";
|
||||
$drawer-shadow: 0 -4px 5px 0 rgba(0,0,0,.14),0 -1px 10px 0 rgba(0,0,0,.12), 0 -2px 4px -1px rgba(0,0,0,.2);
|
||||
// $drawer-shadow: 0 -10px red;
|
||||
.root {
|
||||
z-index: $z-index-high;
|
||||
background-color: $color-background;
|
||||
transition: all $animation-duration $animation-ease;
|
||||
&:not(.active) {
|
||||
min-width: 0vw;
|
||||
max-width: 0vw;
|
||||
}
|
||||
&.active {
|
||||
min-width: 50vw;
|
||||
max-width: 50vw;
|
||||
box-shadow: $drawer-shadow;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
import React from 'react';
|
||||
import { History } from 'react-router';
|
||||
import { List, ListItem } from 'react-toolbox';
|
||||
import style from './drawer_components.scss';
|
||||
import components from '../modules/components';
|
||||
import style from './navigation.scss';
|
||||
|
||||
const MainDrawer = React.createClass({
|
||||
const MainNavigation = React.createClass({
|
||||
mixins: [History],
|
||||
|
||||
propTypes: {
|
||||
|
|
@ -34,7 +34,7 @@ const MainDrawer = React.createClass({
|
|||
|
||||
render () {
|
||||
let className = style.root;
|
||||
if (this.props.active) className += ` ${style.active_drawer}`;
|
||||
if (this.props.className) className += ` ${this.props.className}`;
|
||||
|
||||
return (
|
||||
<aside className={className}>
|
||||
|
|
@ -52,4 +52,4 @@ const MainDrawer = React.createClass({
|
|||
}
|
||||
});
|
||||
|
||||
export default MainDrawer;
|
||||
export default MainNavigation;
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
@import "../config";
|
||||
|
||||
.root {
|
||||
display: flex;
|
||||
width: $navigation-width;
|
||||
flex-direction: column;
|
||||
background-color: $color-background;
|
||||
}
|
||||
|
||||
.list {
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: $navigation-v-padding $navigation-h-padding;
|
||||
> span > span {
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: $color-divider;
|
||||
}
|
||||
|
||||
.footer {
|
||||
flex-grow: 0;
|
||||
padding: $navigation-h-padding;
|
||||
overflow: hidden;
|
||||
font-size: $font-size-tiny;
|
||||
color: $color-text-secondary;
|
||||
border-top: $navigation-footer-border;
|
||||
> span {
|
||||
display: block;
|
||||
margin-bottom: ($navigation-h-padding / 2);
|
||||
> a {
|
||||
color: $color-primary-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import React from 'react';
|
||||
import Editor from '../../../editor';
|
||||
import Preview from '../../../preview';
|
||||
import codeText from '../modules/examples/example.txt';
|
||||
|
||||
class Playground extends React.Component {
|
||||
static propTypes = {
|
||||
className: React.PropTypes.string
|
||||
};
|
||||
|
||||
state = {
|
||||
code: codeText
|
||||
};
|
||||
|
||||
handleCodeChange = (code) => {
|
||||
this.setState({code});
|
||||
};
|
||||
|
||||
render () {
|
||||
return (
|
||||
<aside className={this.props.className}>
|
||||
<Editor ref='editor' codeText={this.state.code} onChange={this.handleCodeChange} />
|
||||
<Preview code={this.state.code} />
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
loadCode (code) {
|
||||
this.refs.editor.setCode(code);
|
||||
}
|
||||
}
|
||||
|
||||
export default Playground;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
@import "../config";
|
||||
|
||||
.root {
|
||||
width: $playground-width;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
background-color: $color-background;
|
||||
}
|
||||
|
|
@ -1,37 +1,93 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Button } from 'react-toolbox';
|
||||
import Appbar from './components/appbar';
|
||||
import DrawerComponents from './components/drawer_components';
|
||||
import DrawerPlayground from './components/drawer_playground';
|
||||
import Appbar from '../../../components/appbar';
|
||||
import Markdown from '../../../components/markdown';
|
||||
import Playground from './components/playground';
|
||||
import MainNavigation from './components/navigation';
|
||||
import BaseDocs from './modules/components.md';
|
||||
import components from './modules/components.js';
|
||||
import style from './style';
|
||||
|
||||
const LoadExampleButton = (props) => {
|
||||
return (
|
||||
<Button
|
||||
accent
|
||||
icon='code'
|
||||
label='Load in playground'
|
||||
onClick={props.onClick}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
class Main extends React.Component {
|
||||
LOAD_EXAMPLE_CLASS = 'js-load-in-playground';
|
||||
|
||||
state = {
|
||||
playground: false
|
||||
};
|
||||
|
||||
<<<<<<< HEAD
|
||||
handlerPlayGroundClick = () => {
|
||||
this.setState({ playground: !this.state.playground });
|
||||
=======
|
||||
componentDidMount () {
|
||||
this.renderExampleLoaders();
|
||||
}
|
||||
|
||||
componentDidUpdate () {
|
||||
this.renderExampleLoaders();
|
||||
}
|
||||
|
||||
handlePlayGroundClick = () => {
|
||||
this.setState({ playground: !this.state.playground});
|
||||
};
|
||||
|
||||
handlePlaygroundLoad = (code) => {
|
||||
this.refs.playground.loadCode(code);
|
||||
this.setState({playground: true});
|
||||
};
|
||||
|
||||
renderExampleLoaders () {
|
||||
const examples = document.getElementsByClassName(this.LOAD_EXAMPLE_CLASS);
|
||||
Array.prototype.forEach.call(examples, (exampleNode, idx) => {
|
||||
const exampleCode = components[this.props.params.component].examples[idx];
|
||||
ReactDOM.render(
|
||||
<LoadExampleButton onClick={this.handlePlaygroundLoad.bind(this, exampleCode)} />,
|
||||
exampleNode
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
resolveMarkdown () {
|
||||
const PLACEHOLDER = /<!-- example -->/g;
|
||||
const NODE = `<span class='${style['load-button']} ${this.LOAD_EXAMPLE_CLASS}'></span>`;
|
||||
if (this.props.params.component) {
|
||||
return components[this.props.params.component].docs.replace(PLACEHOLDER, NODE);
|
||||
} else {
|
||||
return BaseDocs;
|
||||
}
|
||||
>>>>>>> master
|
||||
}
|
||||
|
||||
render () {
|
||||
console.log('aaa', this.state.playground);
|
||||
let className = style.root;
|
||||
const docs = this.resolveMarkdown();
|
||||
if (this.state.playground) className += ` ${style['with-playground']}`;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Appbar />
|
||||
<div className={className}>
|
||||
<Appbar className={style.appbar}/>
|
||||
<Button
|
||||
accent
|
||||
className={style.playground_button}
|
||||
className={style['playground-button']}
|
||||
icon={this.state.playground ? 'close' : 'code'}
|
||||
kind='floating'
|
||||
onClick={this.handlerPlayGroundClick}
|
||||
onClick={this.handlePlayGroundClick}
|
||||
/>
|
||||
<section className={style.content}>
|
||||
<DrawerComponents active={!this.state.playground}/>
|
||||
{ this.props.children }
|
||||
<DrawerPlayground active={this.state.playground} />
|
||||
</section>
|
||||
<MainNavigation className={style.navigation} />
|
||||
<Markdown className={style.documentation} markdown={docs}/>
|
||||
<Playground ref='playground' className={style.playground} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// Documentation files
|
||||
import AppBar from 'react-toolbox/app_bar/readme';
|
||||
import Autocomplete from 'react-toolbox/autocomplete/readme';
|
||||
import Button from 'react-toolbox/button/readme';
|
||||
|
|
@ -22,6 +23,10 @@ import Switch from 'react-toolbox/switch/readme';
|
|||
import Tabs from 'react-toolbox/tabs/readme';
|
||||
import TimePicker from 'react-toolbox/time_picker/readme';
|
||||
|
||||
// Examples for the Playground
|
||||
import ButtonExample1 from './examples/button_example_1.txt';
|
||||
import AutocompleteExample1 from './examples/autocomplete_example_1.txt';
|
||||
|
||||
export default {
|
||||
app_bar: {
|
||||
name: 'App Bar',
|
||||
|
|
@ -31,12 +36,14 @@ export default {
|
|||
autocomplete: {
|
||||
name: 'Autocomplete',
|
||||
docs: Autocomplete,
|
||||
path: '/components/autocomplete'
|
||||
path: '/components/autocomplete',
|
||||
examples: [AutocompleteExample1]
|
||||
},
|
||||
button: {
|
||||
name: 'Button',
|
||||
docs: Button,
|
||||
path: '/components/button'
|
||||
path: '/components/button',
|
||||
examples: [ButtonExample1]
|
||||
},
|
||||
card: {
|
||||
name: 'Card',
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
# Index for the collection of components
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
const countries = {
|
||||
'EN-gb': 'England',
|
||||
'ES-es': 'Spain',
|
||||
'TH-th': 'Thailand',
|
||||
'EN-en': 'USA'
|
||||
};
|
||||
|
||||
const selected = ['ES-es', 'EN-gb'];
|
||||
|
||||
const AutocompleteTest = () => (
|
||||
<Autocomplete
|
||||
label="Choose a country"
|
||||
placeholder="Elements is up to you..."
|
||||
dataSource={countries}
|
||||
value={selected}
|
||||
/>
|
||||
)
|
||||
|
||||
return <AutocompleteTest />
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
const ButtonsTest = () => (
|
||||
<div>
|
||||
<Button label="Flat button" />
|
||||
<Button kind="raised" label="Raised" />
|
||||
<Button kind="raised" label="Raised accent" accent icon="favorite" />
|
||||
<Button className="primary" kind="floating" icon="add" />
|
||||
<Button mini kind="floating" icon="add" accent />
|
||||
</div>
|
||||
);
|
||||
|
||||
return <ButtonsTest />
|
||||
|
|
@ -0,0 +1 @@
|
|||
return <TimePicker />;
|
||||
|
|
@ -1,19 +1,76 @@
|
|||
@import "../../globals";
|
||||
@import "./config";
|
||||
@import "~react-toolbox/app_bar/config";
|
||||
@import "~react-toolbox/button/config";
|
||||
|
||||
$appbar-height: 11.2 * $unit;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
max-height: 100vh;
|
||||
padding-top: $appbar-height;
|
||||
overflow: hidden;
|
||||
.appbar {
|
||||
padding-right: 8 * $unit;
|
||||
}
|
||||
|
||||
.playground_button {
|
||||
z-index: $z-index-higher;
|
||||
position: absolute;
|
||||
right: $button-floating-height / 2;
|
||||
.playground-button {
|
||||
position: fixed;
|
||||
top: $appbar-height - ($button-floating-height / 2);
|
||||
right: $button-floating-height / 2;
|
||||
z-index: $z-index-higher;
|
||||
}
|
||||
|
||||
.documentation {
|
||||
position: fixed;
|
||||
top: $appbar-height;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transition: all $animation-duration $animation-ease;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
position: fixed;
|
||||
top: $appbar-height;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $z-index-high;
|
||||
box-shadow: $documentation-left-shadow;
|
||||
transition: all $animation-duration $animation-ease;
|
||||
}
|
||||
|
||||
.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: all $animation-duration $animation-ease;
|
||||
}
|
||||
|
||||
.root {
|
||||
&:not(.with-playground) {
|
||||
> .playground {
|
||||
right: - $playground-width;
|
||||
}
|
||||
> .documentation {
|
||||
padding-right: 0;
|
||||
padding-left: $navigation-width;
|
||||
}
|
||||
> .navigation {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
&.with-playground {
|
||||
> .playground {
|
||||
right: 0;
|
||||
}
|
||||
> .documentation {
|
||||
padding-right: $playground-width;
|
||||
padding-left: 0;
|
||||
}
|
||||
> .navigation {
|
||||
transform: translateX(- 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.load-button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
import React from 'react';
|
||||
import style from './style';
|
||||
|
||||
const Markdown = (props) => {
|
||||
let className = style.markdown;
|
||||
if (props.className) className += ` ${props.className}`;
|
||||
|
||||
const html = {
|
||||
__html: props.markdown
|
||||
};
|
||||
|
||||
return <article className={className} dangerouslySetInnerHTML={html} />;
|
||||
};
|
||||
|
||||
Markdown.propTypes = {
|
||||
className: React.PropTypes.string,
|
||||
markdown: React.PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
Markdown.defaultProps = {
|
||||
className: ''
|
||||
};
|
||||
|
||||
|
||||
export default Markdown;
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../../../globals";
|
||||
@import "../globals";
|
||||
|
||||
$documentation-h1-size: 3.4 * $unit;
|
||||
$documentation-h2-size: 2.4 * $unit;
|
||||
|
|
@ -6,13 +6,13 @@ $documentation-h-offset: 4 * $unit;
|
|||
$documentation-v-offset: ($documentation-h-offset / 2);
|
||||
$documentation-code-background: rgba(0, 0, 0, .0588235);
|
||||
|
||||
.documentation {
|
||||
.markdown {
|
||||
max-height: 100%;
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
overflow-y: scroll;
|
||||
font-size: $font-size-normal;
|
||||
color: $color-text;
|
||||
background-color: $color-content;
|
||||
> *:not(pre) {
|
||||
margin: $documentation-v-offset $documentation-h-offset;
|
||||
}
|
||||
|
|
@ -5,12 +5,23 @@ const Navigation = (props) => {
|
|||
return (
|
||||
<nav className={props.className}>
|
||||
<ul>
|
||||
<li><Link to='/components/app_bar'>Components</Link></li>
|
||||
<li><Link to='/install'>Installation</Link></li>
|
||||
<li><Link activeClassName={props.activeClassName} to='/install'>Installation</Link></li>
|
||||
<li><Link activeClassName={props.activeClassName} to='/components'>Components</Link></li>
|
||||
<li><a href='http://www.github.com/react-toolbox/react-toolbox' target='_blank'>Github</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
Navigation.propTypes = {
|
||||
className: React.PropTypes.string,
|
||||
activeClassName: React.PropTypes.string
|
||||
};
|
||||
|
||||
|
||||
Navigation.defaultProps = {
|
||||
className: '',
|
||||
activeClassName: ''
|
||||
};
|
||||
|
||||
export default Navigation;
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
import React from 'react';
|
||||
import Editor from './components/editor';
|
||||
import Preview from './components/preview';
|
||||
import style from './style';
|
||||
|
||||
class Playground extends React.Component {
|
||||
static propTypes = {
|
||||
codeText: React.PropTypes.string.isRequired,
|
||||
layout: React.PropTypes.oneOf(['vertical', 'horizontal'])
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
layout: 'vertical'
|
||||
};
|
||||
|
||||
state = {
|
||||
code: this.props.codeText
|
||||
};
|
||||
|
||||
handleCodeChange = (code) => {
|
||||
this.setState({code});
|
||||
};
|
||||
|
||||
render () {
|
||||
const className = `${style.playground} ${style[this.props.layout]}`;
|
||||
return (
|
||||
<div className={className}>
|
||||
<Editor
|
||||
className={style.editor}
|
||||
codeText={this.state.code}
|
||||
onChange={this.handleCodeChange}
|
||||
/>
|
||||
<Preview
|
||||
className={style.preview}
|
||||
code={this.state.code}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Playground;
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
@import "../globals";
|
||||
|
||||
$editor-width: 50%;
|
||||
$preview-background: #fff;
|
||||
|
||||
.playground {
|
||||
display: flex;
|
||||
> * {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical {
|
||||
flex-direction: column;
|
||||
> .editor {
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
> .preview {
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal {
|
||||
flex-direction: row;
|
||||
> .editor {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
> .preview {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@import "../../../globals";
|
||||
@import "../../../mixins";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
|
||||
$preview-error-background: #f2777a;
|
||||
$preview-error-color: #fff;
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
class DialogTest extends React.Component {
|
||||
state = {
|
||||
title: 'Use Google\'s location service?',
|
||||
actions: [
|
||||
{ label: 'Disagree', type: 'flat', className: 'primary', onClick: this.onClose.bind(this) },
|
||||
{ label: 'Agree', type: 'flat', className: 'primary', onClick: this.onClose.bind(this) }]
|
||||
};
|
||||
|
||||
onClose () {
|
||||
this.refs.dialog.hide();
|
||||
}
|
||||
|
||||
onShow () {
|
||||
this.refs.dialog.show();
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<section>
|
||||
<h5>Dialog</h5>
|
||||
<p>lorem ipsum...</p>
|
||||
<Button kind='raised' label='Show Dialog' onClick={this.onShow.bind(this)} />
|
||||
<Dialog ref='dialog' type='small' title={this.state.title} actions={this.state.actions}>
|
||||
<p>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</p>
|
||||
</Dialog>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return <DialogTest />;
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
class RadioGroupTest extends React.Component {
|
||||
handleChange = (event, instance) => {
|
||||
console.log('Changed!', { comic: instance.getValue()});
|
||||
};
|
||||
|
||||
handleFocus = () => {
|
||||
console.log('Focused V for a Vendetta');
|
||||
};
|
||||
|
||||
handleBlur = () => {
|
||||
console.log('Blurred Watchmen');
|
||||
};
|
||||
|
||||
render () {
|
||||
return (
|
||||
<section>
|
||||
<h5>Radio Button</h5>
|
||||
<p style={{marginBottom: '10px'}}>Lorem ipsum...</p>
|
||||
|
||||
<RadioGroup ref='group' name='comic' value='vvendetta' onChange={this.handleChange}>
|
||||
<RadioButton label='The Walking Dead' value='thewalkingdead'/>
|
||||
<RadioButton label='From Hell' value='fromhell' disabled/>
|
||||
<RadioButton label='V for a Vendetta' value='vvendetta' onFocus={this.handleFocus}/>
|
||||
<RadioButton label='Watchmen' value='watchmen' onBlur={this.handleBlur}/>
|
||||
</RadioGroup>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return <RadioGroupTest />;
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
class RadioGroupTest extends React.Component {
|
||||
handleChange = (event, instance) => {
|
||||
console.log('Changed!', { comic: instance.getValue()});
|
||||
};
|
||||
|
||||
handleFocus = () => {
|
||||
console.log('Focused V for a Vendetta');
|
||||
};
|
||||
|
||||
handleBlur = () => {
|
||||
console.log('Blurred Watchmen');
|
||||
};
|
||||
|
||||
render () {
|
||||
return (
|
||||
<section>
|
||||
<h5>Radio Button</h5>
|
||||
<p style={{marginBottom: '10px'}}>Lorem ipsum...</p>
|
||||
|
||||
<RadioGroup ref='group' name='comic' value='vvendetta' onChange={this.handleChange}>
|
||||
<RadioButton label='The Walking Dead' value='thewalkingdead'/>
|
||||
<RadioButton label='From Hell' value='fromhell' disabled/>
|
||||
<RadioButton label='V for a Vendetta' value='vvendetta' onFocus={this.handleFocus}/>
|
||||
<RadioButton label='Watchmen' value='watchmen' onBlur={this.handleBlur}/>
|
||||
</RadioGroup>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return <RadioGroupTest />;
|
||||
|
|
@ -6,16 +6,13 @@ import { createHashHistory } from 'history';
|
|||
|
||||
import Home from './components/layout/home';
|
||||
import Main from './components/layout/main';
|
||||
import Playground from './components/layout/playground';
|
||||
import Documentation from './components/layout/main/components/documentation';
|
||||
|
||||
ReactDOM.render((
|
||||
<Router history={createHashHistory()}>
|
||||
<Router history={createHashHistory({queryKey: false})}>
|
||||
<Route component={App}>
|
||||
<Route path="/" component={Home} />
|
||||
<Route component={Main}>
|
||||
<Route path="/components/:component" component={Documentation} />
|
||||
<Route path="/playground" component={Playground} />
|
||||
<Route path="/components" component={Main}>
|
||||
<Route path=":component" />
|
||||
</Route>
|
||||
<IndexRoute component={Home}/>
|
||||
</Route>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ module.exports = {
|
|||
}, {
|
||||
test: /(\.txt)$/,
|
||||
loader: 'raw',
|
||||
include: path.resolve(__dirname, './app/examples')
|
||||
include: path.resolve(__dirname, './app/components/layout/main/modules')
|
||||
}, {
|
||||
test: /(\.md)$/,
|
||||
loader: 'html!markdown'
|
||||
|
|
|
|||
Loading…
Reference in New Issue