diff --git a/public/images/clear.svg b/public/images/clear.svg new file mode 100644 index 00000000..b86003e5 --- /dev/null +++ b/public/images/clear.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/features/HeaderFilters/components/TournamentFilter/hooks.tsx b/src/features/HeaderFilters/components/TournamentFilter/hooks.tsx index 741002bb..ee818e92 100644 --- a/src/features/HeaderFilters/components/TournamentFilter/hooks.tsx +++ b/src/features/HeaderFilters/components/TournamentFilter/hooks.tsx @@ -1,4 +1,4 @@ -import type { BaseSyntheticEvent } from 'react' +import type { BaseSyntheticEvent, MouseEvent } from 'react' import { useEffect, useState } from 'react' import find from 'lodash/find' @@ -60,10 +60,16 @@ export const useTournamentFilter = () => { close() } + const onResetSelectedTournament = (e: MouseEvent) => { + e.stopPropagation() + setSelectedTournamentId(null) + } + return { close, handleScroll, isOpen, + onResetSelectedTournament, onTournamentSelect, open, selectedTournament, diff --git a/src/features/HeaderFilters/components/TournamentFilter/index.tsx b/src/features/HeaderFilters/components/TournamentFilter/index.tsx index 8a2724a2..3cc9b758 100644 --- a/src/features/HeaderFilters/components/TournamentFilter/index.tsx +++ b/src/features/HeaderFilters/components/TournamentFilter/index.tsx @@ -11,6 +11,7 @@ import { DropdownButton, ButtonTitle, Arrows, + ClearButton, } from './styled' export const TournamentFilter = () => { @@ -18,6 +19,7 @@ export const TournamentFilter = () => { close, handleScroll, isOpen, + onResetSelectedTournament, onTournamentSelect, open, selectedTournament, @@ -38,6 +40,11 @@ export const TournamentFilter = () => { : } + { + selectedTournament && ( + + ) + } { diff --git a/src/features/HeaderFilters/components/TournamentFilter/styled.tsx b/src/features/HeaderFilters/components/TournamentFilter/styled.tsx index d44a60f4..6fcffdd0 100644 --- a/src/features/HeaderFilters/components/TournamentFilter/styled.tsx +++ b/src/features/HeaderFilters/components/TournamentFilter/styled.tsx @@ -22,6 +22,7 @@ export const DropdownButton = styled.button` position: relative; height: 100%; width: 100%; + padding-right: 45px; outline: none; border: none; display: flex; @@ -52,7 +53,7 @@ export const DropdownButton = styled.button` export const ButtonTitle = styled.span` display: inline-block; - width: 80%; + flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -86,3 +87,16 @@ export const Wrapper = styled.div` border-bottom-right-radius: 2px; } ` + +export const ClearButton = styled.button` + outline: none; + border: none; + cursor: pointer; + width: 10px; + height: 10px; + margin-left: 10px; + background-color: transparent; + background-image: url(/images/clear.svg); + background-position: center; + background-repeat: no-repeat; +`