reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-02-07 15:10:45 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add a label to the 'toggle-all' checkbox

Browse Source 
Because of the styles in todomvc-app-css it doesn't show up without one.
This commit is contained in:
Daniel Herzog 2017-06-26 23:33:15 +02:00
parent 33c6f314d8
commit 747de7347d
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
examples/todomvc/components/MainSection.js
View File

@ -15,10 +15,13 @@ export default class MainSection extends Component {
todos: PropTypes.array.isRequired,
actions: PropTypes.object.isRequired
};
// Keep a counter that can be used to create an html `id` attribute.
static mountCount = 0;
constructor(props, context) {
super(props, context);
this.state = { filter: SHOW_ALL };
this.htmlFormInputId = `toggle-all-${MainSection.mountCount++}`;
}
handleClearMarked() {
@ -57,12 +60,17 @@ export default class MainSection extends Component {
renderToggleAll(markedCount) {
const { todos, actions } = this.props;
if (todos.length > 0) {
return (
<input className='toggle-all'
type='checkbox'
checked={markedCount === todos.length}
onChange={actions.markAll} />
<div>
<input id={this.htmlFormInputId}
className='toggle-all'
type='checkbox'
checked={markedCount === todos.length}
onChange={actions.markAll} />
<label htmlFor={this.htmlFormInputId}>Mark all as complete</label>
</div>
);
}
}