Skip to content

Commit

Permalink
Improvements in checkbox and adapt dependencies to stateless behavior
Browse files Browse the repository at this point in the history
  • Loading branch information
@javivelasco
javivelasco committed Nov 8, 2015
1 parent 24be10d commit 1d9cde9
Show file tree
Hide file tree
Showing 6 changed files with 205 additions and 122 deletions.
2 changes: 1 addition & 1 deletion components/checkbox/index.jsx
View file
Expand Up @@ -48,10 +48,10 @@ class Checkbox extends React.Component {
onClick={this.handleClick}
>
<input
ref='input'
{...this.props}
className={style.input}
onClick={this.handleInputClick}
ref='input'
type='checkbox'
/>
<span data-role='checkbox' className={checkboxClassName} onMouseDown={this.handleMouseDown}>
Expand Down
49 changes: 38 additions & 11 deletions components/checkbox/readme.md
View file
Expand Up @@ -6,31 +6,58 @@
```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>
);
class TestCheckbox extends React.Component {
state = {
check1: true,
check2: false
};

handleChange = (field) => {
const newState = {};
newState[field] = !this.state[field];
this.setState(newState);
};

render () {
return (
<div>
<Checkbox
checked={this.state.check1}
label="Checked option"
onChange={this.handleChange.bind(this, 'check1')}
/>
<Checkbox
checked={this.state.check2}
label="Unchecked option"
onChange={this.handleChange.bind(this, 'check2')}
/>
<Checkbox
checked
disabled
label="Disabled checkbox"
/>
</div>
);
}
}
```

## Properties

| Name | Type | Default | Description|
|:-----|:-----|:-----|:-----|
| `checked` | `Bool` | `false` | If true, the checkbox will be checked.|
| `checked` | `Bool` | `false` | Value for the checkbox, can be `true` or `false`. |
| `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.|
| `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:
This component exposes methods to communicate with the `input` DOM component:

- `blur` to blur the input.
- `focus` to focus the input.
3 changes: 1 addition & 2 deletions components/checkbox/style.scss
View file
Expand Up @@ -25,12 +25,11 @@
height: 0;
overflow: hidden;
opacity: 0;
&:focus:not(&:active) + .check {
&:focus ~ .check {
&:before {
position: absolute;
top: 50%;
left: 50%;
z-index: $z-index-low;
width: $checkbox-focus-size;
height: $checkbox-focus-size;
margin-top: - $checkbox-focus-size / 2;
Expand Down
41 changes: 34 additions & 7 deletions docs/app/components/layout/main/modules/examples/checkbox_example_1.txt
View file
@@ -1,9 +1,36 @@
const TestCheckbox = () => (
<div>
<Checkbox label="Checked option" checked />
<Checkbox label="Unchecked option" />
<Checkbox label="Disabled checkbox" checked disabled />
</div>
);
class TestCheckbox extends React.Component {
state = {
check1: true,
check2: false
};

handleChange = (field) => {
const newState = {};
newState[field] = !this.state[field];
this.setState(newState);
};

render () {
return (
<div>
<Checkbox
checked={this.state.check1}
label="Checked option"
onChange={this.handleChange.bind(this, 'check1')}
/>
<Checkbox
checked={this.state.check2}
label="Unchecked option"
onChange={this.handleChange.bind(this, 'check2')}
/>
<Checkbox
checked
disabled
label="Disabled checkbox"
/>
</div>
);
}
}

return <TestCheckbox />;
1 change: 0 additions & 1 deletion spec/components/checkbox.jsx
View file
Expand Up @@ -2,7 +2,6 @@ import React from 'react';
import Checkbox from '../../components/checkbox';

class CheckboxTest extends React.Component {

state = {
checkbox_1: true,
checkbox_2: false,
Expand Down
231 changes: 131 additions & 100 deletions spec/components/list.jsx
View file
Expand Up @@ -7,109 +7,140 @@ const listStyle = {
minWidth: 340
};

const ListTest = () => (
<section>
<h5>With simple text and icons</h5>
<p>This list can be used inside a Drawer for a list of options or as navigation.</p>
<div style={listStyle}>
<List selectable ripple>
<ListSubHeader caption='Contacts' />
<ListItem caption='Inbox' leftIcon='inbox' />
<ListItem caption='Outbox' leftIcon='send' />
<ListItem caption='Trash' leftIcon='delete' />
<ListItem caption='Spam' leftIcon='report' />
</List>
</div>
class ListTest extends React.Component {
state = {
checkbox1: false,
checkbox2: true,
checkbox3: true
};

<h5>Two text lines, avatar and right icon</h5>
<p>Useful for a list of contacts or similar.</p>
<div style={listStyle}>
<List selectable ripple>
<ListSubHeader caption='Contacts' />
<ListItem
avatar='https://pbs.twimg.com/profile_images/614407428/s6pTalMzZs-nusCGWqoV.0_400x400.jpeg'
caption='Alfonso Rocha'
legend='Product Manager at Fon'
rightIcon='star'
/>
<ListItem
avatar='https://pbs.twimg.com/profile_images/459485216499720192/ufS4YGOY_400x400.png'
caption='Javi Velasco'
legend='Frontend engineer at Socialbro'
rightIcon='star'
/>
<ListItem
avatar='https://avatars2.githubusercontent.com/u/559654?v=3&s=460'
caption='Javi Jiménez'
legend='Frontend engineer at MediaSmart'
rightIcon='star'
/>
<ListItem
avatar='https://pbs.twimg.com/profile_images/477103691506282499/bsIaPEiM_400x400.jpeg'
caption='Tobias Van Schneider'
legend='Designer at Spotify'
rightIcon='star'
/>
</List>
</div>
handleCheckboxChange = (field) => {
const newState = {};
newState[field] = !this.state[field];
this.setState(newState);
};

<h5>Two line options and checkbox items</h5>
<p>It can be used to embed little checkboxes in the list. These behave as checkboxes.</p>
<div style={listStyle}>
<List>
<ListSubHeader caption='General' />
<ListItem caption='Profile Photo' legend='Change your Google+ profile photo' />
<ListItem disabled caption='Show your status' legend='Your status is visible to everyone you use with' />
</List>
<ListDivider />
<List>
<ListSubHeader caption='Hangout notifications' />
<ListCheckbox caption='Notifications' legend='Allow notifications' />
<ListCheckbox checked caption='Sound' legend='Hangouts message' />
<ListCheckbox disabled caption='Video sounds' legend='Hangouts video call' />
</List>
</div>
render () {
return (
<section>
<h5>With simple text and icons</h5>
<p>This list can be used inside a Drawer for a list of options or as navigation.</p>
<div style={listStyle}>
<List selectable ripple>
<ListSubHeader caption='Contacts' />
<ListItem caption='Inbox' leftIcon='inbox' />
<ListItem caption='Outbox' leftIcon='send' />
<ListItem caption='Trash' leftIcon='delete' />
<ListItem caption='Spam' leftIcon='report' />
</List>
</div>

<h5>Avatar, sinle text and icon</h5>
<p>Similar to a previous one but only with one text line</p>
<div style={listStyle}>
<List>
<ListItem
avatar='https://pbs.twimg.com/profile_images/614407428/s6pTalMzZs-nusCGWqoV.0_400x400.jpeg'
caption='Alfonso Rocha'
rightIcon='mail'
/>
<ListItem
avatar='https://pbs.twimg.com/profile_images/459485216499720192/ufS4YGOY_400x400.png'
caption='Javi Velasco'
rightIcon='mail'
/>
<ListItem
avatar='https://avatars2.githubusercontent.com/u/559654?v=3&s=460'
caption='Javi Jiménez'
rightIcon='mail'
/>
<ListItem
avatar='https://pbs.twimg.com/profile_images/477103691506282499/bsIaPEiM_400x400.jpeg'
caption='Tobias Van Schneider'
rightIcon='mail'
/>
</List>
</div>
<h5>Two text lines, avatar and right icon</h5>
<p>Useful for a list of contacts or similar.</p>
<div style={listStyle}>
<List selectable ripple>
<ListSubHeader caption='Contacts' />
<ListItem
avatar='https://pbs.twimg.com/profile_images/614407428/s6pTalMzZs-nusCGWqoV.0_400x400.jpeg'
caption='Alfonso Rocha'
legend='Product Manager at Fon'
rightIcon='star'
/>
<ListItem
avatar='https://pbs.twimg.com/profile_images/459485216499720192/ufS4YGOY_400x400.png'
caption='Javi Velasco'
legend='Frontend engineer at Socialbro'
rightIcon='star'
/>
<ListItem
avatar='https://avatars2.githubusercontent.com/u/559654?v=3&s=460'
caption='Javi Jiménez'
legend='Frontend engineer at MediaSmart'
rightIcon='star'
/>
<ListItem
avatar='https://pbs.twimg.com/profile_images/477103691506282499/bsIaPEiM_400x400.jpeg'
caption='Tobias Van Schneider'
legend='Designer at Spotify'
rightIcon='star'
/>
</List>
</div>

<h5>Simple with just one text line</h5>
<p>The most simple list.</p>
<div style={listStyle}>
<List>
<ListItem caption='Alfonso Rocha' />
<ListItem caption='Javi Velasco' />
<ListItem caption='Javi Jiménez' />
<ListItem caption='Tobias Van Schneider' />
<ListDivider />
<ListItem caption='Other people' />
</List>
</div>
</section>
);
<h5>Two line options and checkbox items</h5>
<p>It can be used to embed little checkboxes in the list. These behave as checkboxes.</p>
<div style={listStyle}>
<List>
<ListSubHeader caption='General' />
<ListItem caption='Profile Photo' legend='Change your Google+ profile photo' />
<ListItem disabled caption='Show your status' legend='Your status is visible to everyone you use with' />
</List>
<ListDivider />
<List>
<ListSubHeader caption='Hangout notifications' />
<ListCheckbox
caption='Notifications'
checked={this.state.checkbox1}
legend='Allow notifications'
onChange={this.handleCheckboxChange.bind(this, 'checkbox1')}
/>
<ListCheckbox
caption='Sound'
checked={this.state.checkbox2}
legend='Hangouts message'
onChange={this.handleCheckboxChange.bind(this, 'checkbox2')}
/>
<ListCheckbox
caption='Video sounds'
checked
disabled
legend='Hangouts video call'
/>
</List>
</div>

<h5>Avatar, sinle text and icon</h5>
<p>Similar to a previous one but only with one text line</p>
<div style={listStyle}>
<List>
<ListItem
avatar='https://pbs.twimg.com/profile_images/614407428/s6pTalMzZs-nusCGWqoV.0_400x400.jpeg'
caption='Alfonso Rocha'
rightIcon='mail'
/>
<ListItem
avatar='https://pbs.twimg.com/profile_images/459485216499720192/ufS4YGOY_400x400.png'
caption='Javi Velasco'
rightIcon='mail'
/>
<ListItem
avatar='https://avatars2.githubusercontent.com/u/559654?v=3&s=460'
caption='Javi Jiménez'
rightIcon='mail'
/>
<ListItem
avatar='https://pbs.twimg.com/profile_images/477103691506282499/bsIaPEiM_400x400.jpeg'
caption='Tobias Van Schneider'
rightIcon='mail'
/>
</List>
</div>

<h5>Simple with just one text line</h5>
<p>The most simple list.</p>
<div style={listStyle}>
<List>
<ListItem caption='Alfonso Rocha' />
<ListItem caption='Javi Velasco' />
<ListItem caption='Javi Jiménez' />
<ListItem caption='Tobias Van Schneider' />
<ListDivider />
<ListItem caption='Other people' />
</List>
</div>
</section>
);
}
}

export default ListTest;

0 comments on commit 1d9cde9

Please sign in to comment.