Ott 560 available matches toggler (#221)
* Ott 560 part 1/store refactor and switch (#219) * refactor(#560): added/renamed svgs * refactor(#560): extended score store and added MatchSwitch component * Ott 560 part 2/request matches (#220) * refactor(#560): added matches re-requesting on switch change * refactor(#560): added tooltipkeep-around/af30b88d367751c9e05a735e4a0467a96238ef47
Mirlan
5 years ago
committed by
GitHub
parent
a16a2cfabf
commit
b4a1f7cc19
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,49 @@ |
|||||||
|
import React from 'react' |
||||||
|
|
||||||
|
import styled from 'styled-components/macro' |
||||||
|
|
||||||
|
import { Tooltip, TooltipWrapper } from 'features/Tooltip' |
||||||
|
import { useMatchSwitchesStore } from 'features/MatchSwitches' |
||||||
|
|
||||||
|
import { |
||||||
|
Switch, |
||||||
|
Icon, |
||||||
|
} from '../../styled' |
||||||
|
|
||||||
|
const Wrapper = styled.div` |
||||||
|
position: relative; |
||||||
|
|
||||||
|
:hover ${TooltipWrapper} { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
` |
||||||
|
|
||||||
|
export const AvailableMatchesSwitch = () => { |
||||||
|
const { |
||||||
|
availableMatchesOnly, |
||||||
|
toggleMatchAvailablity, |
||||||
|
} = useMatchSwitchesStore() |
||||||
|
|
||||||
|
const lexic = availableMatchesOnly |
||||||
|
? 'available_matches_shown' |
||||||
|
: 'all_matches_shown' |
||||||
|
|
||||||
|
return ( |
||||||
|
<Wrapper> |
||||||
|
<Tooltip lexic={lexic}> |
||||||
|
<Switch |
||||||
|
role='switch' |
||||||
|
aria-checked={availableMatchesOnly} |
||||||
|
onClick={toggleMatchAvailablity} |
||||||
|
> |
||||||
|
<Icon |
||||||
|
iconName='match-switch' |
||||||
|
width={56} |
||||||
|
height={48} |
||||||
|
isOn={availableMatchesOnly} |
||||||
|
/> |
||||||
|
</Switch> |
||||||
|
</Tooltip> |
||||||
|
</Wrapper> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,35 @@ |
|||||||
|
import React from 'react' |
||||||
|
|
||||||
|
import styled from 'styled-components/macro' |
||||||
|
|
||||||
|
import { useMatchSwitchesStore } from 'features/MatchSwitches' |
||||||
|
|
||||||
|
import { |
||||||
|
Switch, |
||||||
|
Title, |
||||||
|
Icon, |
||||||
|
} from '../../styled' |
||||||
|
|
||||||
|
const Wrapper = styled.div` |
||||||
|
margin-right: 27px; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
` |
||||||
|
|
||||||
|
export const ScoreSwitch = () => { |
||||||
|
const { isScoreHidden, toggleScore } = useMatchSwitchesStore() |
||||||
|
|
||||||
|
return ( |
||||||
|
<Wrapper> |
||||||
|
<Switch |
||||||
|
role='switch' |
||||||
|
onClick={toggleScore} |
||||||
|
aria-checked={isScoreHidden} |
||||||
|
> |
||||||
|
<Title t='hide_score' /> |
||||||
|
<Icon iconName='score-switch' isOn={isScoreHidden} /> |
||||||
|
</Switch> |
||||||
|
</Wrapper> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
import isBoolean from 'lodash/isBoolean' |
||||||
|
|
||||||
|
import { useLocalStore } from 'hooks' |
||||||
|
|
||||||
|
const SCORE_KEY = 'score_hidden' |
||||||
|
const MATCH_AVAILABILITY_KEY = 'available_matches_only' |
||||||
|
|
||||||
|
export const useMatchSwitches = () => { |
||||||
|
const [isScoreHidden, setScoreHidden] = useLocalStore({ |
||||||
|
defaultValue: false, |
||||||
|
key: SCORE_KEY, |
||||||
|
validator: isBoolean, |
||||||
|
}) |
||||||
|
const toggleScore = () => setScoreHidden(!isScoreHidden) |
||||||
|
|
||||||
|
const [availableMatchesOnly, setAvailableMatchesOnly] = useLocalStore({ |
||||||
|
defaultValue: false, |
||||||
|
key: MATCH_AVAILABILITY_KEY, |
||||||
|
validator: isBoolean, |
||||||
|
}) |
||||||
|
const toggleMatchAvailablity = () => setAvailableMatchesOnly(!availableMatchesOnly) |
||||||
|
|
||||||
|
return { |
||||||
|
availableMatchesOnly, |
||||||
|
isScoreHidden, |
||||||
|
toggleMatchAvailablity, |
||||||
|
toggleScore, |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
export * from './store' |
||||||
|
export * from './components/ScoreSwitch' |
||||||
|
export * from './components/AvailableMatchesSwitch' |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import type { ReactNode } from 'react' |
||||||
|
import React, { |
||||||
|
createContext, |
||||||
|
useContext, |
||||||
|
} from 'react' |
||||||
|
|
||||||
|
import { useMatchSwitches } from './hooks' |
||||||
|
|
||||||
|
type SwitchStore = ReturnType<typeof useMatchSwitches> |
||||||
|
|
||||||
|
type Props = { children: ReactNode } |
||||||
|
|
||||||
|
const Context = createContext({} as SwitchStore) |
||||||
|
|
||||||
|
export const MatchSwitchesStore = ({ children }: Props) => { |
||||||
|
const value = useMatchSwitches() |
||||||
|
|
||||||
|
return ( |
||||||
|
<Context.Provider value={value}> |
||||||
|
{children} |
||||||
|
</Context.Provider> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export const useMatchSwitchesStore = () => useContext(Context) |
||||||
@ -1,25 +0,0 @@ |
|||||||
import React from 'react' |
|
||||||
|
|
||||||
import { useScoreStore } from './store' |
|
||||||
import { |
|
||||||
Switch, |
|
||||||
Title, |
|
||||||
Icon, |
|
||||||
} from './styled' |
|
||||||
|
|
||||||
export * from './store' |
|
||||||
|
|
||||||
export const ToggleScore = () => { |
|
||||||
const { isHidden, toggle } = useScoreStore() |
|
||||||
|
|
||||||
return ( |
|
||||||
<Switch |
|
||||||
onClick={toggle} |
|
||||||
role='switch' |
|
||||||
aria-checked={isHidden} |
|
||||||
> |
|
||||||
<Title t='hide_score' /> |
|
||||||
<Icon isOn={isHidden} /> |
|
||||||
</Switch> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,37 +0,0 @@ |
|||||||
import type { ReactNode } from 'react' |
|
||||||
import React, { |
|
||||||
createContext, |
|
||||||
useContext, |
|
||||||
} from 'react' |
|
||||||
|
|
||||||
import isBoolean from 'lodash/isBoolean' |
|
||||||
|
|
||||||
import { useLocalStore } from 'hooks' |
|
||||||
|
|
||||||
const SCORE_KEY = 'hide_score' |
|
||||||
|
|
||||||
type ScoreStore = { |
|
||||||
isHidden: boolean, |
|
||||||
toggle: () => void, |
|
||||||
} |
|
||||||
|
|
||||||
type Props = { children: ReactNode } |
|
||||||
|
|
||||||
const ScoreContext = createContext({} as ScoreStore) |
|
||||||
|
|
||||||
export const ScoreStore = ({ children }: Props) => { |
|
||||||
const [isOpen, setIsOpen] = useLocalStore({ |
|
||||||
defaultValue: false, |
|
||||||
key: SCORE_KEY, |
|
||||||
validator: isBoolean, |
|
||||||
}) |
|
||||||
const toggle = () => setIsOpen(!isOpen) |
|
||||||
|
|
||||||
return ( |
|
||||||
<ScoreContext.Provider value={{ isHidden: isOpen, toggle }}> |
|
||||||
{children} |
|
||||||
</ScoreContext.Provider> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
export const useScoreStore = () => useContext(ScoreContext) |
|
||||||
Loading…
Reference in new issue