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