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

Merge branch 'master' into dev

old
ustccjw 2015-11-01 17:47:56 +08:00
parent c7ce470584 73e5fa06c0
commit c936d31870
51 changed files with 642 additions and 544 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/app_bar/readme.md
View File

@ -2,27 +2,23 @@
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
```jsx
import AppBar from 'react-toolbox/app_bar';
const AppBarTest = () => (
<AppBar className="my-site-bar" fixed flat>
<AppBar 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.
Coming soon, the `AppBar` component will support arbitrary content attributes for left and right content and a title, for now it's just a wrapper.
## 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.
|:-----|:-----|:-----|:-----|
| `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`.|

16
components/autocomplete/index.jsx
View File

@ -99,12 +99,18 @@ class Autocomplete extends React.Component {
this._unselectOption(event.target.getAttribute('id'));
};
renderLabel () {
if (this.props.label) {
return <label data-role='label' className={style.label}>{this.props.label}</label>;
}
}
renderSelected () {
if (this.props.multiple) {
return (
<ul className={style.values} onClick={this.handleUnselect}>
<ul className={style.values} data-role='selections' onClick={this.handleUnselect}>
{[...this.state.values].map(([key, value]) => {
return (<li className={style.value} key={key} id={key}>{value}</li>);
return <li key={key} id={key} data-role='selection' className={style.value}>{value}</li>;
})}
</ul>
);
@ -115,7 +121,7 @@ class Autocomplete extends React.Component {
return [...this._getSuggestions()].map(([key, value]) => {
let className = style.suggestion;
if (this.state.active === key) className += ` ${style.active}`;
return <li id={key} key={key} className={className}>{value}</li>;
return <li id={key} key={key} data-role='suggestion' className={className}>{value}</li>;
});
}
@ -130,13 +136,14 @@ class Autocomplete extends React.Component {
return (
<div data-react-toolbox='autocomplete' className={className}>
{this.props.label ? <label className={style.label}>{this.props.label}</label> : ''}
{this.renderLabel()}
{this.renderSelected()}
<Input
ref='input'
{...this.props}
label=''
value=''
data-role='input'
className={style.input}
onBlur={this.handleBlur}
onChange={this.handleQueryChange}
@ -144,6 +151,7 @@ class Autocomplete extends React.Component {
onKeyUp={this.handleKeyPress} />
<ul
ref='suggestions'
data-role='suggestions'
className={suggestionsClassName}
onMouseDown={this.handleSelect}
onMouseOver={this.handleHover}

41
components/autocomplete/readme.md
View File

@ -1,9 +1,9 @@
# 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.
An input field with a set of predeterminated labeled values. When it's focused it shows a list of hints that are filtered by label as the user types. 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 -->
```
```jsx
import Autocomplete from 'react-toolbox/autocomplete';
const countries = {
@ -28,16 +28,16 @@ const AutocompleteTest = () => (
## Properties
| Name | Type | Default | Description|
|:- |:-: | :- |:-|
| 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.|
|:-----|:-----|:-----|:-----|
| `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
@ -45,20 +45,3 @@ This component has state to control how is it rendered and the values currently
- `getValue` is used to retrieve the current value.
- `setValue` to force a new value.
## Customization
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:
```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>
```

19
components/button/index.jsx
View File

@ -32,28 +32,29 @@ class Button extends React.Component {
handleMouseDown = (event) => {
events.pauseEvent(event);
this.refs.ripple.start(event);
if (this.props.onMouseDown) this.props.onMouseDown(event);
};
render () {
let className = style[this.props.kind];
if (!this.props.primary && !this.props.accent) className += ` ${style.primary}`;
const {label, icon, loading, ripple, primary, accent, mini, kind, ...others} = this.props;
if (this.props.className) className += ` ${this.props.className}`;
if (this.props.primary) className += ` ${style.primary}`;
if (this.props.accent) className += ` ${style.accent}`;
if (this.props.mini) className += ` ${style.mini}`;
if (!primary && !accent) className += ` ${style.primary}`;
if (primary) className += ` ${style.primary}`;
if (accent) className += ` ${style.accent}`;
if (mini) className += ` ${style.mini}`;
return (
<button
{...this.props}
label=''
{...others}
className={className}
data-react-toolbox='button'
onMouseDown={this.handleMouseDown}
disabled={this.props.disabled || this.props.loading}
>
{ this.props.ripple ? <Ripple ref='ripple' loading={this.props.loading}/> : null }
{ this.props.icon ? <FontIcon className={style.icon} value={this.props.icon}/> : null }
{ this.props.label ? <abbr className={style.label}>{this.props.label}</abbr> : null }
{ ripple ? <Ripple ref='ripple' loading={loading}/> : null }
{ icon ? <FontIcon className={style.icon} value={icon}/> : null }
{ label ? <abbr className={style.label}>{label}</abbr> : null }
</button>
);
}

26
components/button/readme.md
View File

@ -3,7 +3,7 @@
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 -->
```
```jsx
import Button from 'react-toolbox/button';
const TestButtons = () => (
@ -20,15 +20,15 @@ const TestButtons = () => (
## Properties
| 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.|
|:-----|:-----|:-----|:-----|
| `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.|

7
components/button/style.scss
View File

@ -16,10 +16,11 @@
border: 0;
outline: none;
transition: box-shadow .2s $animation-curve-fast-out-linear-in,
background-color .2s $animation-curve-default,
color .2s $animation-curve-default;
background-color .2s $animation-curve-default,
color .2s $animation-curve-default;
align-content: center;
justify-content: center;
&::-moz-focus-inner {
border: 0;
}
@ -105,8 +106,8 @@
}
[data-react-toolbox="ripple"] {
border-radius: 50%;
overflow: hidden;
border-radius: 50%;
}
}

16
components/card/index.jsx
View File

@ -5,20 +5,20 @@ import style from './style';
class Card extends React.Component {
static propTypes = {
actions: React.PropTypes.array,
className: React.PropTypes.string,
color: React.PropTypes.string,
image: React.PropTypes.string,
text: React.PropTypes.string,
loading: React.PropTypes.bool,
onClick: React.PropTypes.func,
text: React.PropTypes.string,
title: React.PropTypes.string,
type: React.PropTypes.string
type: React.PropTypes.oneOf(['wide', 'event', 'image'])
};
static defaultProps = {
className: '',
loading: false,
type: 'default'
loading: false
};
handleMouseDown = (event) => {
@ -41,8 +41,8 @@ class Card extends React.Component {
if (this.props.title || this.props.image) {
return (
<figure className={style.figure} style={styleFigure}>
{ this.props.subtitle ? <small>{this.props.subtitle}</small> : null }
{ this.props.title ? <h5>{this.props.title}</h5> : null }
{ this.props.title ? <h5 data-role='title'>{this.props.title}</h5> : null }
{ this.props.subtitle ? <small data-role='subtitle'>{this.props.subtitle}</small> : null }
{ this.props.color ? <div className={style.overflow} style={styleOverflow}></div> : null }
</figure>
);
@ -52,7 +52,7 @@ class Card extends React.Component {
renderActions () {
if (this.props.actions) {
return (
<Navigation className={style.navigation} actions={this.props.actions} />
<Navigation data-role='actions' className={style.navigation} actions={this.props.actions} />
);
}
}
@ -73,7 +73,7 @@ class Card extends React.Component {
onMouseDown={this.handleMouseDown}
>
{ this.renderTitle() }
{ this.props.text ? <p className={style.text}>{this.props.text}</p> : null }
{ this.props.text ? <p data-role='text' className={style.text}>{this.props.text}</p> : null }
{ this.renderActions() }
<Ripple
ref='ripple'

60
components/card/readme.md
View File

@ -1,38 +1,38 @@
# Card
```
var Card = require('react-toolbox/components/card');
A [card](https://www.google.com/design/spec/components/cards.html) is a piece of paper with unique related data that serves as an entry point to more detailed information. For example, a card could contain a photo, text, and a link about a single subject.
<Card title="Default Card" />
<Card title="Default Card with text" text={text} />
<Card title="Default Card with legend" legend={legend} />
<Card title="Default Card with actions" actions={actions} />
<Card title="Defaulr Card with text & image" text={text} image="http://" />
<Card title="Default Card with text, color & onClick event" text={text}
color="#e91e63" onClick={@onClick} />
<Card type="small" title="Small Card with text & onClick event"
text={text} color="#00bcd4" onClick={@onClick} />
<!-- example -->
```jsx
import Card from 'react-toolbox/card';
const actions = [
{ label: 'Play', icon: 'play-arrow'},
{ label: 'Close' }
];
const TestCards = () => (
<Card
image='http://pitchfork-cdn.s3.amazonaws.com/longform/221/Deerhunter-Fading-Frontier640.jpg'
text='A Deerhunter album rollout usually coincides with some pithy and provocative statements from Bradford Cox on pop culture...'
title='Deerhunter - Fading Frontier'
color="rgba(0,0,0,.4)"
actions={actions}
/>
);
```
## Properties
| Name | Type | Default | Description|
|:- |:-: | :- |:-|
| **className** | String | | Sets the class-styles of the Component.|
| **color** | String | | Sets HEX of the Component.|
| **image** | String | | Sets a background image url.|
| **text** | String | | Sets a complementary text.|
| **legend** | String | | Sets a legend text.|
| **loading** | Boolean | | If true, component will be disabled and show a loading animation.|
| **onClick** | Function | | Callback function that is fired when the components's is clicked.|
| **title** | String | "text" | Sets the title of the component.|
| **type** | String | "text" | 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.
```
card_instance.loading(true);
```
|:-----|:-----|:-----|:-----|
| `actions` | `Array` | | Array of objects describing actions. These actions will be rendered as buttons and the object fields will be transferred to those.|
| `className` | `String` | `''` | Sets a class to give customized styles to the card.|
| `color` | `String` | | Sets HEX or RGBA color to add a colored layer to the heading.|
| `image` | `String` | | URL to sets a background image in the heading.|
| `loading` | `Boolean` | `false` | If true, component will be disabled and showing a loading animation.|
| `onClick` | `Function` | | Callback function that is fired when the components's is clicked. It also will display a ripple effect on click. |
| `subtitle` | `String` | | Sets a complementary smaller text under the title.|
| `text` | `String` | | Sets a complementary text display as a card description.|
| `title` | `String` | | Sets the title of the card.|
| `type` | `String` | `default` | Type of the component to display general modifications. It can be `wide` for a larger card, `image` if it's an image card or `event` which shows just a title on top. |

6
components/checkbox/index.jsx
View File

@ -66,10 +66,10 @@ class Checkbox extends React.Component {
onChange={this.handleChange}
onClick={this.handleInputClick}
/>
<span role='checkbox' className={checkboxClassName} onMouseDown={this.handleMouseDown}>
<Ripple ref='ripple' role='ripple' className={style.ripple} spread={3} centered />
<span data-role='checkbox' className={checkboxClassName} onMouseDown={this.handleMouseDown}>
<Ripple ref='ripple' data-role='ripple' className={style.ripple} spread={3} centered />
</span>
{ this.props.label ? <span role='label' className={style.text}>{this.props.label}</span> : null }
{ this.props.label ? <span data-role='label' className={style.text}>{this.props.label}</span> : null }
</label>
);
}

39
components/checkbox/readme.md
View File

@ -1 +1,38 @@
# checkbox
# Checkbox
[Checkboxes](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox) allow the user to select multiple options from a set. If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.
<!-- example -->
```jsx
import Checkbox from 'react-toolbox/checkbox';
const TestCheckbox = () => (
<div>
<Checkbox label="Checked option" checked />
<Checkbox label="Unchecked option" />
<Checkbox label="Disabled checkbox" checked disabled />
</div>
);
```
## Properties
| Name | Type | Default | Description|
|:-----|:-----|:-----|:-----|
| `checked` | `Bool` | `false` | If true, the checkbox will be checked.|
| `className` | `String` | `''` | Sets a class to give customized styles to the checkbox field.|
| `disabled` | `Bool` | `false` | If true, the checkbox shown as disabled and is not possible to modify it.|
| `label` | `String` | | Text label to attach next to the checkbox element.|
| `name` | `String` | `false` | The name of the field to set in the input checkbox.|
| `onBlur` | `Function` | | Callback called when the checkbox is blurred.|
| `onChange` | `Function` | | Callback called when the checkbox value is changed.|
| `onFocus` | `Function` | | Callback called when the checkbox is focused |
## Methods
This component has state to control its value and how is it rendered. It exposes the following instance methods:
- `getValue` is used to retrieve the current value.
- `setValue` to force a new value.
- `blur` to blur the input.
- `focus` to focus the input.

28
components/date_picker/readme.md
View File

@ -1,25 +1,27 @@
# DatePicker
# Date Picker
```javascript
var DatePicker = require('react-toolbox/components/date_picker');
A [dialog](https://www.google.com/design/spec/components/pickers.html#pickers-date-pickers) date picker is used to select a single date. The selected day is indicated by a filled circle. The current day is indicated by a different color and type weight.
var date = new Date(1995,11,17);
<!-- example -->
```jsx
import DatePicker from 'react-toolbox/date_picker';
// Initialized date picker
<DatePicker value={date} />
const selectedDate = new Date(1995, 11, 17);
const DatePickerTest = () => (
<DatePicker value={selectedDate} />
);
```
## Properties
| Name | Type | Default | Description|
| ------------- |:-------:|:--------------- |:---------- |
| **value** | Date | `new Date()` | Date object with currrent date by default |
|:-----|:-----|:-----|:-----|
| `className` | `String` | `''` | Sets a class to give customized styles to the time picker.|
| `value` | `Date` | | Date object with the currently selected date. |
## Methods
#### getValue
Returns the value of the picker.
The DatePicker is a very easy component from the top level API but quite complex inside. It has state to keep the currently viewed date and the currently selected value.
```
input_instance.getValue();
```
- `getValue` is used to retrieve the current value.
- `setValue` to force a new value.

1
components/dialog/index.jsx
View File

@ -13,6 +13,7 @@ class Dialog extends React.Component {
static defaultProps = {
actions: [],
active: false,
type: 'normal'
};

66
components/dialog/readme.md
View File

@ -1,40 +1,52 @@
# Dialog
```
var Dialog = require('react-toolbox/components/dialog');
var actions = [
{ caption: "Cancel", style: "transparent", onClick: this.onClose }
,
{ caption: "Save", style: "transparent", onClick: this.onSave }
]
[Dialogs](https://www.google.com/design/spec/components/dialogs.html) contain text and UI controls focused on a specific task. They inform users about critical information, require users to make decisions, or involve multiple tasks. You would need an additional component to take actions and display or hide the dialog.
<Dialog title='Hello World' actions={actions}>
/* -- more content -- */
</Dialog>
<!-- example -->
```
import Dialog from 'react-toolbox/dialog';
class DialogTest extends React.Component {
showDialog = () => {
this.refs.dialog.show();
};
closeDialog = () => {
this.refs.dialog.hide();
};
actions = [
{ label: "Cancel", onClick: this.closeDialog },
{ label: "Save", onClick: this.closeDialog }
];
render () {
return (
<div>
<Button label='Show my dialog' onClick={this.showDialog} />
<Dialog ref='dialog' title='My awesome dialog' actions={this.actions}>
<p>Here you can add arbitrary content. Components like Pickers are using dialogs now.</p>
</Dialog>
</div>
);
}
}
```
## Properties
| Name | Type | Default | Description|
|:- |:-: | :- |:-|
| **actions** | Array | | A array of actions callbacks for the component.|
| **active** | Boolean | | If true, component will be shows.|
| **className** | String | "normal" | Set the class-styles of the Component.|
| **title** | String | | The text string to use for the title of the component.|
| **type** | String | | Type of the component, overwrite this property if you need set a different stylesheet.|
|:-----|:-----|:-----|:-----|
| `actions` | `Array` | `[]` | A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.|
| `active` | `Boolean` | `false` | If true, the dialog will be active by default.|
| `className` | `String` | `''` | Sets a class to give customized styles to the dialog.|
| `title` | `String` | | The text string to use as standar title of the dialog.|
| `type` | `String` | `normal` | Used to determine the size of the dialog. It can be `small`, `normal` or `large`. |
## Methods
#### show
Shows the dialog.
The Dialog has state to determine if it is being shown or not. It exposes methods to show and hide:
```
dialog_instance.show();
```
- `show` is used to show the dialog.
- `hide` is used to hide the dialog.
#### hide
Hides the dialog.
```
dialog_instance.hide();
```

2
components/drawer/index.jsx
View File

@ -6,7 +6,7 @@ class Drawer extends React.Component {
active: React.PropTypes.bool,
className: React.PropTypes.string,
hideable: React.PropTypes.bool,
type: React.PropTypes.string
type: React.PropTypes.oneOf(['left', 'right'])
};
static defaultProps = {

56
components/drawer/readme.md
View File

@ -1,37 +1,43 @@
# Aside
# Drawer
```
var Aside = require('react-toolbox/components/aside');
The [navigation drawer](https://www.google.com/design/spec/patterns/navigation-drawer.html) slides in from the left. It is a common pattern found in Google apps and follows the keylines and metrics for lists.
<Aside>
<header/>
<section>
<h1>Hello World</h1>
</section>
<footer/>
</Aside>
<!-- example -->
```jsx
import Drawer from 'react-toolbox/drawer';
class DrawerTest extends React.Component {
handleClick = () => {
this.refs.drawer.show();
};
render () {
return (
<div>
<Button kind='raised' accent label='Show Drawer' onClick={this.handleClick} />
<Drawer ref='drawer' hideable>
<h5>This is your Drawer.</h5>
<p>You can embed any content you want, for example a Menu.</p>
</Drawer>
</div>
);
}
}
```
## Properties
| Name | Type | Default | Description|
|:- |:-: | :- |:-|
| **active** | Bool | false | If true, component will be show by default.|
| **className** | String | | Sets the class-styles of the Component.|
| **hideable** | Bool | false | If true, the componente can be hideable clicking in it.|
| **type** | String | "left" | Type of the component, overwrite this property if you need set a different stylesheet. Options: "left" or "right"|
|:-----|:-----|:-----|:-----|
| `active` | `Boolean` | `false` | If true, the drawer will be active by default.|
| `className` | `String` | `''` | Sets a class to give customized styles to the drawer.|
| `hideable` | `Bool` | `true` | If true, the drawer will be hidden by clicking the overlay.|
| `type` | `String` | `left` | Type of drawer. It can be left or right to display the drawer on the left or right side of the screen.|
## Methods
#### show
Show component.
The Drawer has state to determine if it is being shown or not. It exposes methods to show and hide:
```
aside_instance.show();
```
- `show` is used to show the drawer.
- `hide` is used to hide the drawer.
#### hide
Hide component.
```
aside_instance.hide();
```

17
components/dropdown/index.jsx
View File

@ -17,8 +17,9 @@ const _selectValue = (value, dataSource) => {
class Dropdown extends React.Component {
static propTypes = {
auto: React.PropTypes.bool,
className: React.PropTypes.string,
dataSource: React.PropTypes.array,
dataSource: React.PropTypes.array.isRequired,
disabled: React.PropTypes.bool,
label: React.PropTypes.string,
onChange: React.PropTypes.func,
@ -27,14 +28,15 @@ class Dropdown extends React.Component {
};
static defaultProps = {
auto: true,
className: '',
dataSource: [],
up: false
disabled: false
};
state = {
active: false,
selected: _selectValue(this.props.value, this.props.dataSource),
up: false,
width: undefined
};
@ -53,11 +55,8 @@ class Dropdown extends React.Component {
handleClick = (event) => {
const client = event.target.getBoundingClientRect();
const screen_height = window.innerHeight || document.documentElement.offsetHeight;
this.setState({
active: true,
up: client.top > ((screen_height / 2) + client.height)
});
const up = this.props.auto ? client.top > ((screen_height / 2) + client.height) : false;
this.setState({ active: true, up: up });
};
handleClickValue = (id) => {
@ -91,8 +90,8 @@ class Dropdown extends React.Component {
});
let className = style.values;
if (this.state.up) className += ` ${style.up}`;
const valuesStyle = {width: this.state.width};
if (this.state.up) className += ` ${style.up}`;
return <ul ref='values' className={className} style={valuesStyle}>{ items }</ul>;
}

65
components/dropdown/readme.md
View File

@ -1,50 +1,43 @@
# Dropdown
```
var DropDown = require('react-toolbox/components/dropdown');
The Dropdown selects an option between multiple selections. The element displays the current state and a down arrow. When it is clicked, it displays the list of available options.
var countries: [
value: 'ES-es', label: 'Spain', img: 'http://'
,
value: 'TH-th', label: 'Thailand', img: 'http://'
,
value: 'EN-gb', label: 'England', img: 'http://'
,
value: 'EN-en', label: 'USA', img: 'http://'
,
value: 'FR-fr', label: 'France', img: 'http://'
<!-- example -->
```jsx
import Dropdown from 'react-toolbox/dropdown';
const countries: [
{ value: 'EN-gb', label: 'England' },
{ value: 'ES-es', label: 'Spain'},
{ value: 'TH-th', label: 'Thailand' },
{ value: 'EN-en', label: 'USA'}
];
<DropDown dataSource={countries} value='TH-th' />
const DropdownTest = () => (
<Dropdown
auto
dataSource={countries}
value='TH-th'
/>
);
```
## Properties
| Name | Type | Default | Description |
|:- |:-: | :- |:-|
| **className** | String | | Set the class-styles of the Component.
| **dataSource** | Array | | JSON data representing all items in the dropdown.
| **disabled** | Boolean | false | Set components disabled.
| **label** | String | | The text string to use for the floating label element.
| **onChange** | Function | | Callback function that is fired when the components's value changes.
| **template** | Function | | Callback function that represents a item for the component.
| **type** | String | "normal" | Type of the component, overwrite this property if you need set a different stylesheet.
| **value** | String | | Default value using JSON data.
|:-----|:-----|:-----|:-----|
| `auto` | `Boolean` | `true` | If true, the dropdown will open up or down depending on the position in the screen .|
| `className` | `String` | `''` | Set the class to give custom styles to the dropdown.
| `dataSource` | `Array` | | Array of data objects with the data to represent in the dropdown.
| `disabled` | `Boolean` | `false` | Set the component as disabled.
| `label` | `String` | | The text string to use for the floating label element.
| `onChange` | `Function` | | Callback function that is fired when the component's value changes.
| `template` | `Function` | | Callback function that returns a JSX template to represent the element.
| `value` | `String` | | Default value using JSON data.
## Methods
#### getValue
Returns the value of the input.
This component has state to control its value and how is it rendered. It exposes the following instance methods:
```
dropdown_instance.getValue();
> 'TH-th'
```
#### setValue
Sets the value of the input element.
```
var new_value = 'ES-es'
dropdown_instance.setValue(new_value);
```
- `getValue` is used to retrieve the current value.
- `setValue` to force a new value.

6
components/dropdown/style.scss
View File

@ -7,6 +7,7 @@
width: inherit;
margin-bottom: $dropdown-offset;
color: $color-text;
cursor: pointer;
border-bottom: 1px solid $color-divider;
&:not(.active) {
> .values {
@ -27,6 +28,7 @@
&.disabled {
color: $color-text-secondary;
pointer-events: none;
cursor: normal;
border-bottom-style: dotted;
> .value:after {
transform: scale(0);
@ -34,10 +36,6 @@
}
}
.label, .value {
transition: opacity $animation-duration $animation-curve-default;
}
.label {
font-size: $font-size-tiny;
color: $color-text-secondary;

22
components/font_icon/readme.md
View File

@ -1,13 +1,23 @@
# FontIcon
# Font Icon
```
var FontIcon = require('react-toolbox/components/font_icon');
The font icon component is used to represent an icon from the [Google Material Design](https://www.google.com/design/icons/) icon font. React Toolbox automatically includes the font for you so you just need to specify the name of the icon. Every name corresponds with the original one but separated with dashes. The font icon is displayed with the current color so it can be inherited from the parent component.
<FontIcon value='add' />
<!-- example -->
```jsx
import FontIcon from 'react-toolbox/font_icon;
const FontIcons = () => (
<span>
<FontIcon value='add' />
<FontIcon value='favorite' />
<FontIcon value='star' />
</span>
);
```
## Properties
| Name | Type | Default | Description|
|:- |:-: | :- |:-|
| **value** | String | | The keyString for the icon you want be displayed.|
|:-----|:-----|:-----|:-----|
| `className` | `String` | | The class name to give custom styles such as sizing.|
| `value` | `String` | | The key string for the icon you want be displayed.|

87
components/input/readme.md
View File

@ -1,65 +1,46 @@
# Input
```
var Input = require('react-toolbox/components/input');
Although we are calling then Inputs they actually correspond to Material Design [Text fields](https://www.google.com/design/spec/components/text-fields.html). It allows a user to input text and it's the base for other components like the autocomplete.
<Input value='Hello' required />
<Input multiline value='Lorem ipsum...' disabled />
<Input type='number' value='1980' label='Year of birthdate' />
<!-- example -->
```jsx
import Input from 'react-toolbox/input';
const InputTest = () => (
<div>
<Input type='text' label='Firstname' />
<Input type='email' label='Label fixed' floating={false} />
<Input type='text' label='Disabled field' disabled />
<Input type='tel' label='With icon' icon='phone' />
<Input type='email' label='With icon' icon='email' />
</div>
);
```
## Properties
| Name | Type | Default | Description|
|:- |:-: | :- |:-|
| **className** | String | | Sets the class-styles of the Component.|
| **disabled** | Boolean | false | If true, component will be disabled.|
| **error** | String | | Sets the error string.|
| **label** | String | | The text string to use for the floating label element.|
| **multiline** | Boolean | false | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
| **icon** | String | | Icon String key.|
| **onBlur** | Function | | Callback function that is fired when components is blured.|
| **onChange** | Function | | Callback function that is fired when the components's value changes.|
| **onFocus** | Function | | Callback function that is fired when components is focused.|
| **onKeyPress** | Function | | Callback function that is fired when a key is pressed.|
| **required** | Boolean | false | If true, component needs has a value.|
| **type** | String | "normal" | Type of the component, overwrite this property if you need set a different stylesheet.|
| **value** | String | | Default value using JSON data.|
|:-----|:-----|:-----|:-----|
| `className` | `String` |`''` | Sets a class name to give custom styles.|
| `disabled` | `Boolean` | `false` | If true, component will be disabled.|
| `error` | `String` | | Give an error string to display under the field.|
| `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.|
| `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.|
| `onFocus` | `Function` | | Callback function that is fired when components is focused.|
| `onKeyPress` | `Function` | | Callback function that is fired when a key is pressed.|
| `required` | `Boolean` | `false` | If true, the html input has a required value.|
| `type` | `String` | `text` | Type of the input element. It can be a valid HTML5 input type|
| `value` | `String` | | Initial value of the input element.|
## Methods
#### focus
The focus event is sent to an element when it gains focus.
The input component has a state to control its value. It exposes instance methods to retrieve and set the current value and to control the input state:
```
input_instance.focus();
```
#### blur
The blur event is sent to an element when it loses focus
```
input_instance.blur();
```
#### getValue
Returns the value of the input.
```
input_instance.getValue();
```
#### setValue
Sets the value of the input element.
```
input_instance.setValue(newValue);
```
#### setError
```
input_instance.setError("Something is wrong...");
```
- `getValue` is used to retrieve the current value.
- `setValue` to force a new value.
- `blur` to blur the input field.
- `focus` to focus the input field.

9
components/link/index.jsx
View File

@ -5,11 +5,11 @@ import FontIcon from '../font_icon';
const Link = (props) => {
let className = style.root;
if (props.className) className += ` ${props.className}`;
return (
<a
{...props}
data-react-toolbox='link'
href={props.route}
className={className}
>
{ props.icon ? <FontIcon className={style.icon} value={props.icon} /> : null }
@ -23,12 +23,11 @@ Link.propTypes = {
label: React.PropTypes.string,
className: React.PropTypes.string,
count: React.PropTypes.number,
icon: React.PropTypes.string,
onClick: React.PropTypes.func,
route: React.PropTypes.string
icon: React.PropTypes.string
};
Link.defaultProps = {
attributes: '',
className: ''
};
export default Link;

31
components/link/readme.md
View File

@ -1,19 +1,28 @@
# Link
```
var Link = require('react-toolbox/components/link');
The link is a very simple component that acts mostly as a wrapper for the HTML anchor. It's not included in Material Design Specification but we provide it as an easy way to create links with icons and counters. Let's see an example:
<Link route='http://google.com' label='Go to Google.com' />
<Link route='/profile/soyjavi' icon='user' />
<!-- example -->
```jsx
import Link from 'react-toolbox/link';
const LinksTest = () => (
<nav>
<Link href="/#/components/link" label="Work" count={4} icon='business' />
<Link href="/#/components/link" label="Blog" icon='speaker-notes' />
<Link href="/#/components/link" label="Explore" icon='explore' />
</nav>
);
```
## Properties
You can add as many properties as you want to be directly transferred to the output anchor element. Apart from them you have the following properties:
| Name | Type | Default | Description|
|:- |:-: | :- |:-|
| **label** | String | "normal" | he text string to use for the floating label element.|
| **className** | String | | Sets the class-styles of the Component.|
| **count** | Number | | Sets a count number behind label property.|
| **icon** | String | | Sets a <FontIcon/> sub-component.|
| **onClick** | Function | | Dispatch event when user clicks on component.|
| **route** | String | | URL String|
|:-----|:-----|:-----|:-----|
| `label` | `String` | | The text string used for the text content of the link.|
| `className` | `String` | `''` | Sets a custom class name to add styles to the link.|
| `count` | `Number` | | Sets a count number useful to display in the page how many times was visited for example.|
| `icon` | `String` | | An icon key string to include a `FontIcon` component in front of the text.|

4
components/link/style.scss
View File

@ -13,9 +13,10 @@
align-items: center;
justify-content: center;
overflow: hidden;
line-height: 1.5;
cursor: pointer;
transition: opacity $animation-duration $animation-curve-default;
&:not(.active) {
font-weight: $font-weight-thin;
opacity: .5;
}
&:hover, &:active {
@ -28,6 +29,7 @@
text-transform: capitalize;
}
> small {
margin-left: .8 * $unit;
font-size: $font-size-tiny;
text-align: center;
}

6
components/list/style.scss
View File

@ -57,7 +57,7 @@
&:not(.checkbox-item) {
opacity: .5;
}
> .checkbox > [role='label'] {
> .checkbox > [data-role='label'] {
opacity: .5;
}
}
@ -70,10 +70,10 @@
align-items: center;
margin: 0;
cursor: pointer;
> [role='checkbox'] {
> [data-role='checkbox'] {
margin-right: $list-item-right-icon-margin;
}
> [role='label'] {
> [data-role='label'] {
padding-left: 0;
}
}

31
components/time_picker/readme.md
View File

@ -1,28 +1,31 @@
# TimePicker
```javascript
var TimePicker = require('react-toolbox/components/time_picker');
A [dialog picker](https://www.google.com/design/spec/components/pickers.html#pickers-time-pickers) is used to select a single time (hours:minutes). The selected time is indicated by the filled circle at the end of the clock hand.
var time = new Date();
time.setHours(17);
time.setMinutes(28);
<!-- example -->
```jsx
import TimePicker from 'react-toolbox/time_picker';
// Initialized time picker with AM-PM format
<TimePicker format="ampm" value={time} />
let selectedTime = new Date();
selectedTime.setHours(17);
selectedTime.setMinutes(28);
const TimePickerTest = () => (
<TimePicker value={selectedTime} />
);
```
## Properties
| Name | Type | Default | Description|
| ------------- |:-------:|:--------------- |:---------- |
| **format** | String | `24hr` | Format to display the clock. It can be *24hr* or *ampm*.|
| **value** | Date | `new Date()` | Datetime object with currrent time by default |
| className | String | `''` | Sets a class to give customized styles to the time picker.|
| format | String | `24hr` | Format to display the clock. It can be `24hr` or `ampm`.|
| value | Date | | Datetime object with currrently selected time |
## Methods
#### getValue
Returns the value of the picker.
The TimePicker is a very easy component from the top level API but quite complex inside. It has state to keep the the currently selected value.
```
input_instance.getValue();
```
- `getValue` is used to retrieve the current value.
- `setValue` to force a new value.

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

@ -9,6 +9,3 @@ $color-divider: $color-divider;
$color-content: #fafafa;
$animation-duration: 250ms;
$animation-ease: ease-in-out;
$code-font-family: Consolas, Monaco, 'Andale Mono', monospace;
$code-font-size: 13px;

2
docs/app/components/_mixins.scss
View File

@ -1,5 +1,5 @@
@mixin code-typography {
font-family: 'source-code-pro', Menlo, Consolas, 'Courier New', monospace;
font-family: 'source-code-pro', Menlo, Consolas, Monaco, 'Andale Mono', 'Courier New', monospace;
font-size: 13px;
line-height: 1.4;
}

2
docs/app/components/appbar/_config.scss
View File

@ -1,4 +1,4 @@
$appbar-height: 6.4 * $unit;
$appbar-logo-size: 3.6 * $unit;
$appbar-shadow: 0 1px rgba(255,255,255,.75);
$appbar-shadow: 0 1px rgba(255,255,255,.65);
$appbar-navigation-offset: 6.5 * $unit;

1
docs/app/components/appbar/style.scss
View File

@ -2,6 +2,7 @@
@import "./config";
.appbar {
z-index: $z-index-higher;
display: flex;
min-height: $appbar-height;
flex-direction: row;

35
docs/app/components/editor/_monokai.scss Normal file
View File

@ -0,0 +1,35 @@
/* Based on Sublime Text's Monokai theme */
.cm-s-monokai.CodeMirror { background: #272822; color: #f8f8f2; }
.cm-s-monokai div.CodeMirror-selected { background: #49483E; }
.cm-s-monokai .CodeMirror-line::selection, .cm-s-monokai .CodeMirror-line > span::selection, .cm-s-monokai .CodeMirror-line > span > span::selection { background: rgba(73, 72, 62, .99); }
.cm-s-monokai .CodeMirror-line::-moz-selection, .cm-s-monokai .CodeMirror-line > span::-moz-selection, .cm-s-monokai .CodeMirror-line > span > span::-moz-selection { background: rgba(73, 72, 62, .99); }
.cm-s-monokai .CodeMirror-gutters { background: #272822; border-right: 0px; }
.cm-s-monokai .CodeMirror-guttermarker { color: white; }
.cm-s-monokai .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
.cm-s-monokai .CodeMirror-linenumber { color: #d0d0d0; }
.cm-s-monokai .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
.cm-s-monokai span.cm-comment { color: #75715e; }
.cm-s-monokai span.cm-atom { color: #ae81ff; }
.cm-s-monokai span.cm-number { color: #ae81ff; }
.cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute { color: #a6e22e; }
.cm-s-monokai span.cm-keyword { color: #f92672; }
.cm-s-monokai span.cm-string { color: #e6db74; }
.cm-s-monokai span.cm-variable { color: #f8f8f2; }
.cm-s-monokai span.cm-variable-2 { color: #9effff; }
.cm-s-monokai span.cm-variable-3 { color: #66d9ef; }
.cm-s-monokai span.cm-def { color: #fd971f; }
.cm-s-monokai span.cm-bracket { color: #f8f8f2; }
.cm-s-monokai span.cm-tag { color: #f92672; }
.cm-s-monokai span.cm-header { color: #ae81ff; }
.cm-s-monokai span.cm-link { color: #ae81ff; }
.cm-s-monokai span.cm-error { background: #f92672; color: #f8f8f0; }
.cm-s-monokai .CodeMirror-activeline-background { background: #373831; }
.cm-s-monokai .CodeMirror-matchingbracket {
text-decoration: underline;
color: white !important;
}

173
docs/app/components/editor/_solarized.scss
View File

@ -1,173 +0,0 @@
* {
color-profile: sRGB;
rendering-intent: auto;
}
.cm-s-solarized-light {
background-color: #f8f5ec;
color: #637c84;
}
.cm-s-solarized-light .emphasis {
font-weight: bold;
}
.cm-s-solarized-light .dotted {
border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-light .CodeMirror-gutter {
background-color: #eee8d5;
border-right: 3px solid #eee8d5;
}
.cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text {
color: #93a1a1;
}
.cm-s-solarized-light .CodeMirror-cursor {
border-left-color: #002b36 !important;
}
.cm-s-solarized-light .CodeMirror-matchingbracket {
color: #002b36;
background-color: #eee8d5;
box-shadow: 0 0 10px #eee8d5;
font-weight: bold;
}
.cm-s-solarized-light .CodeMirror-nonmatchingbracket {
color: #002b36;
background-color: #eee8d5;
box-shadow: 0 0 10px #eee8d5;
font-weight: bold;
color: #dc322f;
border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-light span.cm-keyword {
color: #268bd2;
}
.cm-s-solarized-light span.cm-atom {
color: #2aa198;
}
.cm-s-solarized-light span.cm-number {
color: #586e75;
}
.cm-s-solarized-light span.cm-def {
color: #637c84;
}
.cm-s-solarized-light span.cm-variable {
color: #637c84;
}
.cm-s-solarized-light span.cm-variable-2 {
color: #b58900;
}
.cm-s-solarized-light span.cm-variable-3 {
color: #cb4b16;
}
.cm-s-solarized-light span.cm-comment {
color: #93a1a1;
}
.cm-s-solarized-light span.cm-property {
color: #637c84;
}
.cm-s-solarized-light span.cm-operator {
color: #657b83;
}
.cm-s-solarized-light span.cm-string {
color: #36958e;
}
.cm-s-solarized-light span.cm-error {
font-weight: bold;
border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-light span.cm-bracket {
color: #cb4b16;
}
.cm-s-solarized-light span.cm-tag {
color: #657b83;
}
.cm-s-solarized-light span.cm-attribute {
color: #586e75;
font-weight: bold;
}
.cm-s-solarized-light span.cm-meta {
color: #268bd2;
}
.cm-s-solarized-dark {
background-color: #002b36;
color: #839496;
}
.cm-s-solarized-dark .emphasis {
font-weight: bold;
}
.cm-s-solarized-dark .dotted {
border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-dark .CodeMirror-gutter {
background-color: #073642;
border-right: 3px solid #073642;
}
.cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text {
color: #586e75;
}
.cm-s-solarized-dark .CodeMirror-cursor {
border-left-color: #fdf6e3 !important;
}
.cm-s-solarized-dark .CodeMirror-matchingbracket {
color: #fdf6e3;
background-color: #073642;
box-shadow: 0 0 10px #073642;
font-weight: bold;
}
.cm-s-solarized-dark .CodeMirror-nonmatchingbracket {
color: #fdf6e3;
background-color: #073642;
box-shadow: 0 0 10px #073642;
font-weight: bold;
color: #dc322f;
border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-dark span.cm-keyword {
color: #839496;
font-weight: bold;
}
.cm-s-solarized-dark span.cm-atom {
color: #2aa198;
}
.cm-s-solarized-dark span.cm-number {
color: #93a1a1;
}
.cm-s-solarized-dark span.cm-def {
color: #268bd2;
}
.cm-s-solarized-dark span.cm-variable {
color: #cb4b16;
}
.cm-s-solarized-dark span.cm-variable-2 {
color: #cb4b16;
}
.cm-s-solarized-dark span.cm-variable-3 {
color: #cb4b16;
}
.cm-s-solarized-dark span.cm-comment {
color: #586e75;
}
.cm-s-solarized-dark span.cm-property {
color: #b58900;
}
.cm-s-solarized-dark span.cm-operator {
color: #839496;
}
.cm-s-solarized-dark span.cm-string {
color: #6c71c4;
}
.cm-s-solarized-dark span.cm-error {
font-weight: bold;
border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-dark span.cm-bracket {
color: #cb4b16;
}
.cm-s-solarized-dark span.cm-tag {
color: #839496;
}
.cm-s-solarized-dark span.cm-attribute {
color: #93a1a1;
font-weight: bold;
}
.cm-s-solarized-dark span.cm-meta {
color: #268bd2;
}

2
docs/app/components/editor/index.jsx
View File

@ -18,7 +18,7 @@ class Editor extends React.Component {
lineNumbers: false,
readOnly: false,
tabSize: 2,
theme: 'solarized-light'
theme: 'monokai'
};
componentDidMount () {

16
docs/app/components/editor/style.scss
View File

@ -1,26 +1,12 @@
@import "../globals";
@import "../mixins";
$documentation-code-background: rgba(0, 0, 0, .0588235);
.editor {
position: relative;
:global {
@import "~codemirror/lib/codemirror";
@import "solarized";
@import "monokai";
@import "custom";
}
&:before {
display: block;
width: 100%;
padding: 3px 7px;
font-size: $font-size-tiny;
font-weight: $font-weight-bold;
font-family: $code-font-family;
color: $color-text;
content: "React Toolbox Virtual Console";
background-color: rgba(0,0,0,0.1);
}
}

2
docs/app/components/layout/main/_config.scss
View File

@ -6,4 +6,4 @@ $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);
$documentation-right-shadow: -2px 0 4px rgba(0,0,0,.14);

2
docs/app/components/layout/main/components/navigation.jsx
View File

@ -38,7 +38,7 @@ const MainNavigation = React.createClass({
return (
<aside className={className}>
<List className={style.list} selectable>
<List className={style.list} selectable ripple>
{ this.renderDrawerItems() }
</List>
<footer className={style.footer}>

13
docs/app/components/layout/main/components/playground.jsx
View File

@ -2,6 +2,7 @@ import React from 'react';
import Editor from '../../../editor';
import Preview from '../../../preview';
import codeText from '../modules/examples/example.txt';
import style from './playground.scss';
class Playground extends React.Component {
static propTypes = {
@ -19,8 +20,16 @@ class Playground extends React.Component {
render () {
return (
<aside className={this.props.className}>
<Editor ref='editor' codeText={this.state.code} onChange={this.handleCodeChange} />
<Preview code={this.state.code} />
<Editor
ref='editor'
className={style.editor}
codeText={this.state.code}
onChange={this.handleCodeChange}
/>
<Preview
className={style.preview}
code={this.state.code}
/>
</aside>
);
}

31
docs/app/components/layout/main/components/playground.scss
View File

@ -1,8 +1,29 @@
@import "../config";
.root {
width: $playground-width;
height: 100%;
overflow-y: auto;
background-color: $color-background;
.editor, .preview {
position: absolute;
right: 0;
overflow-y: scroll;
}
.editor {
top: 0;
bottom: 50%;
left: 0;
div:global(.CodeMirror) {
display: flex;
height: 100%;
min-height: 100%;
max-height: 100%;
flex-direction: column;
flex-grow: 1;
}
}
.preview {
top: 50%;
bottom: 0;
left: 0;
display: flex;
}

46
docs/app/components/layout/main/modules/components.js
View File

@ -9,7 +9,6 @@ import Dialog from 'react-toolbox/dialog/readme';
import Drawer from 'react-toolbox/drawer/readme';
import Dropdown from 'react-toolbox/dropdown/readme';
import FontIcon from 'react-toolbox/font_icon/readme';
import Form from 'react-toolbox/form/readme';
import Input from 'react-toolbox/input/readme';
import Link from 'react-toolbox/link/readme';
import List from 'react-toolbox/list/readme';
@ -26,6 +25,16 @@ 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';
import CardExample1 from './examples/card_example_1.txt';
import CheckboxExample1 from './examples/checkbox_example_1.txt';
import DatePickerExample1 from './examples/datepicker_example_1.txt';
import DialogExample1 from './examples/dialog_example_1.txt';
import DrawerExample1 from './examples/drawer_example_1.txt';
import DrodpownExample1 from './examples/dropdown_example_1.txt';
import FontIconExample1 from './examples/font_icon_example_1.txt';
import InputExample1 from './examples/input_example_1.txt';
import TimePickerTest from './examples/timepicker_example_1.txt';
import LinkExample1 from './examples/link_example_1.txt';
export default {
app_bar: {
@ -48,52 +57,56 @@ export default {
card: {
name: 'Card',
docs: Card,
path: '/components/card'
path: '/components/card',
examples: [CardExample1]
},
checkbox: {
name: 'Checkbox',
docs: Checkbox,
path: '/components/checkbox'
path: '/components/checkbox',
examples: [CheckboxExample1]
},
date_picker: {
name: 'Date Picker',
docs: DatePicker,
path: '/components/date_picker'
path: '/components/date_picker',
examples: [DatePickerExample1]
},
dialog: {
name: 'Dialog',
docs: Dialog,
path: '/components/dialog'
path: '/components/dialog',
examples: [DialogExample1]
},
drawer: {
name: 'Drawer',
docs: Drawer,
path: '/components/drawer'
path: '/components/drawer',
examples: [DrawerExample1]
},
dropdown: {
name: 'Dropdown',
docs: Dropdown,
path: '/components/dropdown'
path: '/components/dropdown',
examples: [DrodpownExample1]
},
font_icon: {
name: 'Font Icon',
docs: FontIcon,
path: '/components/font_icon'
},
form: {
name: 'Form',
docs: Form,
path: '/components/form'
path: '/components/font_icon',
examples: [FontIconExample1]
},
input: {
name: 'Input',
docs: Input,
path: '/components/input'
path: '/components/input',
examples: [InputExample1]
},
link: {
name: 'Link',
docs: Link,
path: '/components/link'
path: '/components/link',
examples: [LinkExample1]
},
list: {
name: 'List',
@ -143,6 +156,7 @@ export default {
time_picker: {
name: 'Time Picker',
docs: TimePicker,
path: '/components/time_picker'
path: '/components/time_picker',
examples: [TimePickerTest]
}
};

17
docs/app/components/layout/main/modules/examples/card_example_1.txt Normal file
View File

@ -0,0 +1,17 @@
const actions = [
{ label: 'Play', icon: 'play-arrow'},
{ label: 'Close' }
];
const TestCards = () => (
<Card
image='http://pitchfork-cdn.s3.amazonaws.com/longform/221/Deerhunter-Fading-Frontier640.jpg'
text='A Deerhunter album rollout usually coincides with some pithy and provocative statements from Bradford Cox on pop culture...'
title='Deerhunter'
subtitle='Fading Frontier'
color="rgba(0,0,0,.4)"
actions={actions}
/>
);
return <TestCards />;

9
docs/app/components/layout/main/modules/examples/checkbox_example_1.txt Normal file
View File

@ -0,0 +1,9 @@
const TestCheckbox = () => (
<div>
<Checkbox label="Checked option" checked />
<Checkbox label="Unchecked option" />
<Checkbox label="Disabled checkbox" checked disabled />
</div>
);
return <TestCheckbox />;

7
docs/app/components/layout/main/modules/examples/datepicker_example_1.txt Normal file
View File

@ -0,0 +1,7 @@
const selectedDate = new Date(1995, 11, 17);
const DatePickerTest = () => (
<DatePicker value={selectedDate} />
);
return <DatePickerTest />;

27
docs/app/components/layout/main/modules/examples/dialog_example_1.txt Normal file
View File

@ -0,0 +1,27 @@
class DialogTest extends React.Component {
showDialog = () => {
this.refs.dialog.show();
};
closeDialog = () => {
this.refs.dialog.hide();
};
actions = [
{ label: "Cancel", onClick: this.closeDialog },
{ label: "Save", onClick: this.closeDialog }
];
render () {
return (
<div>
<Button label='Show my dialog' onClick={this.showDialog} />
<Dialog ref='dialog' title='My awesome dialog' type='small' actions={this.actions}>
<p>Here you can add arbitrary content. Components like Pickers are using dialogs now.</p>
</Dialog>
</div>
);
}
}
return <DialogTest />;

19
docs/app/components/layout/main/modules/examples/drawer_example_1.txt Normal file
View File

@ -0,0 +1,19 @@
class DrawerTest extends React.Component {
handleClick = () => {
this.refs.drawer.show();
};
render () {
return (
<div>
<Button kind='raised' accent label='Show Drawer' onClick={this.handleClick} />
<Drawer ref='drawer' hideable>
<h5>This is your Drawer.</h5>
<p>You can embed any content you want, for example a Menu.</p>
</Drawer>
</div>
);
}
}
return <DrawerTest />;

46
docs/app/components/layout/main/modules/examples/dropdown_example_1.txt Normal file
View File

@ -0,0 +1,46 @@
class DropdownTest extends React.Component {
state = {
selected: null
};
albums = [
{ value: 1, artist: 'Radiohead', album: 'In Rainbows', img: 'http://www.clasesdeperiodismo.com/wp-content/uploads/2012/02/radiohead-in-rainbows.png' },
{ value: 2, artist: 'QOTSA', album: 'Sons for the Deaf', img: 'http://static.musictoday.com/store/bands/93/product_large/MUDD6669.JPG' },
{ value: 3, artist: 'Kendrick Lamar', album: 'Good Kid Maad City', img: 'https://cdn.shopify.com/s/files/1/0131/9332/products/0bd4b1846ba3890f574810dbeddddf8c.500x500x1_grande.png?v=1425070323' },
{ value: 4, artist: 'Pixies', album: 'Doolittle', img: 'http://www.resident-music.com/image/cache/data/Emilys_Packshots/Pixies/Pixies_Doolittlke-500x500.jpg' }
];
customItem (item) {
const style = {
width: 36,
height: 36,
backgroundColor: '#ccc',
marginRight: 8
};
return (
<div data-flex="horizontal grow" data-flex-content="center">
<img src={item.img} data-flex-grow="min" style={style} />
<div data-flex-grow="max" data-flex="vertical" >
<strong>{item.artist}</strong>
<small>{item.album}</small>
</div>
</div>
);
}
render () {
return (
<Dropdown
auto={false}
dataSource={this.albums}
label='Select your favorite album'
template={this.customItem}
value={this.state.selected}
/>
);
}
}
return <DropdownTest />;

9
docs/app/components/layout/main/modules/examples/font_icon_example_1.txt Normal file
View File

@ -0,0 +1,9 @@
const FontIcons = () => (
<span>
<FontIcon value='add' />
<FontIcon value='favorite' />
<FontIcon value='star' />
</span>
);
return <FontIcons />;

10
docs/app/components/layout/main/modules/examples/input_example_1.txt Normal file
View File

@ -0,0 +1,10 @@
const InputTest = () => (
<div>
<Input type='text' label='Your fullname' icon='account-box' value='Tony Stark' />
<Input type='tel' label='Telephone number' icon='phone' />
<Input type='email' label='Email address' icon='email' />
<Input type='text' label='Disabled field' disabled />
</div>
);
return <InputTest />;

9
docs/app/components/layout/main/modules/examples/link_example_1.txt Normal file
View File

@ -0,0 +1,9 @@
const LinksTest = () => (
<nav>
<Link href="/#/components/link" label="Work" count={4} icon='business' />
<Link href="/#/components/link" label="Blog" icon='speaker-notes' />
<Link href="/#/components/link" label="Explore" icon='explore' />
</nav>
);
return <LinksTest />;

9
docs/app/components/layout/main/modules/examples/timepicker_example_1.txt Normal file
View File

@ -0,0 +1,9 @@
let selectedTime = new Date();
selectedTime.setHours(17);
selectedTime.setMinutes(28);
const TimePickerTest = () => (
<TimePicker value={selectedTime} />
);
return <TimePickerTest />

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

@ -35,19 +35,18 @@
.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;
transition: right $animation-duration $animation-ease;
}
.root {
&:not(.with-playground) {
> .playground {
right: - $playground-width;
right: - ($playground-width * 1.1);
}
> .documentation {
padding-right: 0;

10
docs/app/components/markdown/style.scss
View File

@ -1,4 +1,5 @@
@import "../globals";
@import "../mixins";
$documentation-h1-size: 3.4 * $unit;
$documentation-h2-size: 2.4 * $unit;
@ -39,13 +40,18 @@ $documentation-code-background: rgba(0, 0, 0, .0588235);
&:first-child {
background-color: red;
}
a {
color: $color-text;
text-decoration: underline;
}
}
pre {
padding: $documentation-v-offset $documentation-h-offset;
font-family: $code-font-family;
font-size: $code-font-size;
background-color: $documentation-code-background;
}
code {
@include code-typography;
}
table {
width: auto;
background-color: white;

2
docs/app/components/preview/style.scss
View File

@ -11,7 +11,7 @@ $preview-error-color: #fff;
.content {
flex-grow: 1;
padding: $unit;
margin: 2 * $unit;
}
.error {