Mirlan
6 years ago
committed by
GitHub
parent
1c7586e7a4
commit
568e50ea1f
|
After Width: | Height: | Size: 219 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
@ -0,0 +1,12 @@ |
||||
export const langsList = [ |
||||
{ |
||||
className: 'ru', |
||||
locale: 'ru', |
||||
title: 'Русский', |
||||
}, |
||||
{ |
||||
className: 'gb', |
||||
locale: 'en', |
||||
title: 'English', |
||||
}, |
||||
] |
||||
@ -0,0 +1,30 @@ |
||||
@mixin flag-position($col, $row, $offsetX, $offsetY) { |
||||
background-position: $col*(-1)*$offsetX $row*(-1)*$offsetY; |
||||
} |
||||
|
||||
@mixin flags-list($width, $height, $bgSize) { |
||||
background-size: $bgSize; |
||||
height: $height; |
||||
width: $width; |
||||
|
||||
&.flag-icon-ru { @include flag-position(8, 9, $width, $height); } /* Russia */ |
||||
&.flag-icon-gb { @include flag-position(4, 12, $width, $height); } /* United Kingdom */ |
||||
} |
||||
|
||||
/* |
||||
* PNG images |
||||
*/ |
||||
.flag-icon { |
||||
background-image: url('/images/flags-sprite.png'); |
||||
background-position: 1000px 1000px; |
||||
background-repeat: no-repeat; |
||||
display: inline-block; |
||||
position: relative; |
||||
|
||||
&.flag-icon-24x16 { |
||||
@include flags-list(24px, 16px, 360px); |
||||
} |
||||
&.flag-icon-15x10 { |
||||
@include flags-list(15px, 10px, 225px); |
||||
} |
||||
} |
||||
@ -0,0 +1,68 @@ |
||||
import React from 'react' |
||||
|
||||
import map from 'lodash/map' |
||||
|
||||
import { useLexicsStore } from 'features/LexicsStore' |
||||
import { OutsideClick } from 'features/OutsideClick' |
||||
|
||||
import { useToggle } from 'hooks' |
||||
|
||||
import { langsList } from './config' |
||||
import { |
||||
Wrapper, |
||||
WorldIcon, |
||||
LangsList, |
||||
LangsItem, |
||||
FlagIcon, |
||||
} from './styled' |
||||
import './flags.scss' |
||||
|
||||
export const LanguageSelect = () => { |
||||
const { changeLang } = useLexicsStore() |
||||
const { |
||||
close, |
||||
isOpen, |
||||
open, |
||||
} = useToggle() |
||||
|
||||
const handleLangChange = (locale: string) => () => { |
||||
changeLang(locale) |
||||
close() |
||||
} |
||||
|
||||
return ( |
||||
<OutsideClick onClick={close}> |
||||
<Wrapper> |
||||
<WorldIcon onClick={open} active={isOpen} /> |
||||
{isOpen && ( |
||||
<LangsList> |
||||
{ |
||||
map( |
||||
langsList, |
||||
({ |
||||
className, |
||||
locale, |
||||
title, |
||||
}) => ( |
||||
<LangsItem |
||||
key={locale} |
||||
title={title} |
||||
onClick={handleLangChange(locale)} |
||||
> |
||||
<FlagIcon |
||||
className={` |
||||
flag-icon |
||||
flag-icon-24x16 |
||||
flag-icon-${className} |
||||
`}
|
||||
/> |
||||
</LangsItem> |
||||
), |
||||
) |
||||
} |
||||
</LangsList> |
||||
)} |
||||
</Wrapper> |
||||
</OutsideClick> |
||||
) |
||||
} |
||||
@ -0,0 +1,76 @@ |
||||
import styled from 'styled-components/macro' |
||||
|
||||
export const Wrapper = styled.div` |
||||
position: absolute; |
||||
right: 31px; |
||||
top: 31px; |
||||
` |
||||
|
||||
type WorldIconProps = { |
||||
active?: boolean, |
||||
} |
||||
|
||||
export const WorldIcon = styled.span<WorldIconProps>` |
||||
display: block; |
||||
width: 18px; |
||||
height: 18px; |
||||
background-image: url(/images/worldIcon.svg); |
||||
background-position-x: -1px; |
||||
cursor: pointer; |
||||
|
||||
:hover { |
||||
opacity: 1; |
||||
} |
||||
|
||||
${({ active }) => ( |
||||
active |
||||
? 'opacity: 1;' |
||||
: 'opacity: 0.7;' |
||||
)} |
||||
` |
||||
|
||||
export const LangsList = styled.ul` |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
width: 96px; |
||||
position: absolute; |
||||
background-color: #666666; |
||||
box-shadow: 0 2px 5px rgba(0,0,0,.5); |
||||
border-radius: 2px; |
||||
right: -16px; |
||||
top: 36px; |
||||
|
||||
:before { |
||||
content: ''; |
||||
width: 12px; |
||||
height: 12px; |
||||
transform: translateY(-50%) rotate(45deg); |
||||
position: absolute; |
||||
right: 19px; |
||||
background-color: #666666; |
||||
z-index: 0; |
||||
} |
||||
` |
||||
|
||||
export const LangsItem = styled.li` |
||||
text-align: center; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: 48px; |
||||
height: 48px; |
||||
z-index: 1; |
||||
border-radius: 2px; |
||||
|
||||
:hover { |
||||
background-color: #999999; |
||||
cursor: pointer; |
||||
} |
||||
` |
||||
|
||||
export const FlagIcon = styled.span` |
||||
display: inline-block; |
||||
width: 28px; |
||||
height: 16px; |
||||
transition: .3s; |
||||
` |
||||
Loading…
Reference in new issue