Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import * as React from 'react';
- type FilterProps = {
- onlyCompleted: boolean
- onlyIncompleted: boolean
- onFilterCompletedClicked: () => void
- onFilterIncompletedClicked: () => void
- onFilterAllClicked: () => void
- }
- const Filters: React.FC<FilterProps> = props => {
- const completedClasses = props.onlyCompleted ? 'filter-button active' : 'filter-button';
- const incompletedClasses = props.onlyIncompleted ? 'filter-button active' : 'filter-button';
- const allClasses = !props.onlyCompleted && !props.onlyIncompleted ? 'filter-button active' : 'filter-button';
- return (
- <>
- <label>Show: </label>
- <button
- className={completedClasses}
- onClick={props.onFilterCompletedClicked}
- >
- Completed
- </button>
- <span className="pipe"> | </span>
- <button
- className={incompletedClasses}
- onClick={props.onFilterIncompletedClicked}
- >
- Incomplete
- </button>
- <span className="pipe"> | </span>
- <button
- className={allClasses}
- onClick={props.onFilterAllClicked}
- >
- All
- </button>
- </>
- );
- }
- export default Filters;
- import * as React from 'react';
- import Filters from './Filters';
- interface Count {
- count: number
- }
- export const badId = pre => {
- return `${pre}_${new Date().getTime()}`;
- }
- export const Count: React.FC<Count> = props => {
- return (
- <span className='count'>
- {props.count} Items
- </span>
- );
- }
- interface FilterProps extends Count {
- onlyCompleted: boolean
- onlyIncompleted: boolean
- onFilterCompletedClicked: () => void
- onFilterIncompletedClicked: () => void
- onFilterAllClicked: () => void
- }
- export const Footer: React.FC<FilterProps> = ({ ...props}) => {
- return (
- <footer>
- <Count count={props.count} />
- <Filters
- {...props}
- />
- </footer>
- );
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement