redux-devtools/packages/redux-devtools-slider-monitor/examples/todomvc/components/Footer.js

73 lines
1.8 KiB
JavaScript
Raw Normal View History

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { SHOW_ALL, SHOW_MARKED, SHOW_UNMARKED } from '../constants/TodoFilters';
const FILTER_TITLES = {
[SHOW_ALL]: 'All',
[SHOW_UNMARKED]: 'Active',
[SHOW_MARKED]: 'Completed'
};
export default class Footer extends Component {
static propTypes = {
markedCount: PropTypes.number.isRequired,
unmarkedCount: PropTypes.number.isRequired,
filter: PropTypes.string.isRequired,
onClearMarked: PropTypes.func.isRequired,
onShow: PropTypes.func.isRequired
};
render() {
return (
2019-01-10 20:23:33 +03:00
<footer className="footer">
{this.renderTodoCount()}
2019-01-10 20:23:33 +03:00
<ul className="filters">
{[SHOW_ALL, SHOW_UNMARKED, SHOW_MARKED].map(filter => (
<li key={filter}>{this.renderFilterLink(filter)}</li>
))}
</ul>
{this.renderClearButton()}
</footer>
);
}
renderTodoCount() {
const { unmarkedCount } = this.props;
const itemWord = unmarkedCount === 1 ? 'item' : 'items';
return (
2019-01-10 20:23:33 +03:00
<span className="todo-count">
<strong>{unmarkedCount || 'No'}</strong> {itemWord} left
</span>
);
}
renderFilterLink(filter) {
const title = FILTER_TITLES[filter];
const { filter: selectedFilter, onShow } = this.props;
return (
<a
className={classnames({ selected: filter === selectedFilter })}
style={{ cursor: 'hand' }}
onClick={() => onShow(filter)}
>
{title}
</a>
);
}
renderClearButton() {
const { markedCount, onClearMarked } = this.props;
if (markedCount > 0) {
return (
2019-01-10 20:23:33 +03:00
<button className="clear-completed" onClick={onClearMarked}>
Clear completed
</button>
);
}
return null;
}
}