Advertisement
Guest User

new resolve

a guest
Oct 18th, 2019
83
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.12 KB | None | 0 0
  1. import * as React from 'react';
  2.  
  3. type FilterProps = {
  4. onlyCompleted: boolean
  5. onlyIncompleted: boolean
  6. onFilterCompletedClicked: () => void
  7. onFilterIncompletedClicked: () => void
  8. onFilterAllClicked: () => void
  9. }
  10.  
  11. const Filters: React.FC<FilterProps> = props => {
  12. const completedClasses = props.onlyCompleted ? 'filter-button active' : 'filter-button';
  13. const incompletedClasses = props.onlyIncompleted ? 'filter-button active' : 'filter-button';
  14. const allClasses = !props.onlyCompleted && !props.onlyIncompleted ? 'filter-button active' : 'filter-button';
  15. return (
  16. <>
  17. <label>Show: </label>
  18. <button
  19. className={completedClasses}
  20. onClick={props.onFilterCompletedClicked}
  21. >
  22. Completed
  23. </button>
  24. <span className="pipe"> | </span>
  25. <button
  26. className={incompletedClasses}
  27. onClick={props.onFilterIncompletedClicked}
  28. >
  29. Incomplete
  30. </button>
  31. <span className="pipe"> | </span>
  32. <button
  33. className={allClasses}
  34. onClick={props.onFilterAllClicked}
  35. >
  36. All
  37. </button>
  38. </>
  39. );
  40. }
  41.  
  42. export default Filters;
  43.  
  44.  
  45.  
  46. import * as React from 'react';
  47. import Filters from './Filters';
  48.  
  49. interface Count {
  50. count: number
  51. }
  52.  
  53. export const badId = pre => {
  54. return `${pre}_${new Date().getTime()}`;
  55. }
  56.  
  57. export const Count: React.FC<Count> = props => {
  58. return (
  59. <span className='count'>
  60. {props.count} Items
  61. </span>
  62. );
  63. }
  64.  
  65. interface FilterProps extends Count {
  66. onlyCompleted: boolean
  67. onlyIncompleted: boolean
  68. onFilterCompletedClicked: () => void
  69. onFilterIncompletedClicked: () => void
  70. onFilterAllClicked: () => void
  71. }
  72.  
  73. export const Footer: React.FC<FilterProps> = ({ ...props}) => {
  74. return (
  75. <footer>
  76. <Count count={props.count} />
  77. <Filters
  78. {...props}
  79. />
  80. </footer>
  81. );
  82. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement