reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2024-11-26 11:33:54 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #372 from danfooo/toggle-all

Browse Source 
Add a label to the 'toggle-all' checkbox in todomvc
This commit is contained in:
Mihail Diordiev 2018-11-16 00:17:43 +02:00 committed by GitHub
commit 67a853bc4d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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