Добавлено уведомление в случае, если после фильтрации не осталось ни одного языка

src/components/languageSwitcher/LanguageSwitcher.js

@@ -14,6 +14,11 @@ import icons from 'components/ui/icons.scss';
 import styles from './languageSwitcher.scss';
 import messages from './languageSwitcher.intl.json';
 
+import thatFuckingPumpkin from './images/that_fucking_pumpkin.svg';
+import mayTheForceBeWithYou from './images/may_the_force_be_with_you.svg';
+import biteMyShinyMetalAss from './images/bite_my_shiny_metal_ass.svg';
+import iTookAnArrowInMyKnee from './images/i_took_an_arrow_in_my_knee.svg';
+
 const improveTranslationUrl = 'http://ely.by/erickskrauch/posts/174943';
 const itemHeight = 51;
 
@@ -24,7 +29,16 @@ class LanguageSwitcher extends Component {
         onClose: PropTypes.func,
         userLang: PropTypes.string,
         changeLang: PropTypes.func,
-        langs: PropTypes.objectOf(PropTypes.object).isRequired,
+        langs: PropTypes.objectOf(PropTypes.shape({
+            name: PropTypes.string.isRequired,
+            englishName: PropTypes.string.isRequired,
+            progress: PropTypes.number.isRequired,
+            isReleased: PropTypes.bool.isRequired,
+        })).isRequired,
+        emptyCaptions: PropTypes.arrayOf(PropTypes.shape({
+            src: PropTypes.string.isRequired,
+            caption: PropTypes.string.isRequired,
+        })).isRequired,
     };
 
     static contextTypes = {
@@ -39,11 +53,35 @@ class LanguageSwitcher extends Component {
     static defaultProps = {
         langs: LANGS,
         onClose() {},
+        emptyCaptions: [
+            {
+                // Homestuck
+                src: thatFuckingPumpkin,
+                caption: 'That fucking pumpkin',
+            },
+            {
+                // Star Wars
+                src: mayTheForceBeWithYou,
+                caption: 'May The Force Be With You',
+            },
+            {
+                // Futurama
+                src: biteMyShinyMetalAss,
+                caption: 'Bite my shiny metal ass',
+            },
+            {
+                // The Elder Scrolls V: Skyrim
+                src: iTookAnArrowInMyKnee,
+                caption: 'I took an arrow in my knee',
+            },
+        ],
     };
 
     render() {
-        const {userLang, onClose} = this.props;
+        const {userLang, onClose, emptyCaptions} = this.props;
+        const isListEmpty = Object.keys(this.state.filteredLangs).length === 0;
         const firstLocale = Object.keys(this.state.filteredLangs)[0] || null;
+        const emptyCaption = emptyCaptions[Math.floor(Math.random() * emptyCaptions.length)];
 
         return (
             <div className={styles.languageSwitcher}>
@@ -78,6 +116,29 @@ class LanguageSwitcher extends Component {
                         >
                             {(items) => (
                                 <div className={styles.languagesList}>
+                                    <div
+                                        className={classNames(styles.emptyLanguagesListWrapper, {
+                                            [styles.emptyLanguagesListVisible]: isListEmpty,
+                                        })}
+                                        style={{
+                                            height: isListEmpty ? this.emptyListStateInner.clientHeight : 0,
+                                        }}
+                                    >
+                                        <div
+                                            ref={(elem) => this.emptyListStateInner = elem}
+                                            className={styles.emptyLanguagesList}
+                                        >
+                                            <img
+                                                src={emptyCaption.src}
+                                                alt={emptyCaption.caption}
+                                                className={styles.emptyLanguagesListCaption}
+                                            />
+                                            <div className={styles.emptyLanguagesListSubtitle}>
+                                                <Message {...messages.weDoNotSupportThisLang} />
+                                            </div>
+                                        </div>
+                                    </div>
+
                                     {items.map(({key: locale, data: definition, style}) => (
                                         <li
                                             key={locale}

src/components/languageSwitcher/images/may_the_force_be_with_you.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 237.77 14.18">
+    <path d="M4.48,0.84L8.29,15H0.38V13H6.3L3.55,2.79H0.38v-2h4.1Zm5.27,6.1V0.84h1.17V5h5.29l2.32-4.15H20L16.6,6.94H9.76Zm6.85,2L20,15H18.55l-2.32-4.15H10.93V15H9.76V8.9H16.6Zm6.87-6.1,2.7,10,3.22-12h1.46L27,15H25.29L21.48,0.84h4.39l1.32,4.88H25.73L24.93,2.79H23.47ZM43.39,12.4L46,7.68h1.46L43.39,15H42.21l-4.1-7.34h1.46l2.64,4.73V0.84h1.17V12.4Zm6.74-5.46H56v2H50.12v-2Zm7,6.1v2H49V13h8.2ZM49,2.79v-2h8.2v2H49Zm16.45,0L62.87,15H61.4L58.62,0.84h1.32L62.14,12l2.2-11.18H68v2H66.82V15H65.65V2.79H65.4ZM77.6,8.9H76.43V13h2.93V8.72A8.47,8.47,0,0,1,77.6,8.9ZM75.26,15V6.94H77.6a7.07,7.07,0,0,0,1.76-.21V0.84h1.17V6.32a9.08,9.08,0,0,0,4.1-4.5V4.26a8.1,8.1,0,0,1-4.1,4.1V13h4.1v2H75.26Zm15-12.21L87.5,13h8.61L93.36,2.79H90.26ZM86.68,15L86.1,13,89.32,0.84h5L97.52,13l-0.59,2H86.68ZM99,2.78V0.84h8.2v2l-5,12.21h-1.46l5-12.21H99Zm13.18,2.94v4.39H111V5.72h1.17Zm-2.34-4.88v9.28h-1.17V0.84h1.17Zm4.69,4.88V15h-1.17V5.72h1.17Zm8.24-2.93L120.23,15h-1.46L116,0.84h1.32L119.49,12l2.2-11.18h3.66v2h-1.17V15H123V2.79h-0.25Zm18.35,4.15v2h-6.74v-2h6.74Zm-5.79-4.15L134.08,5h-1.46L135,0.84h5.57L142.87,5H141.4l-1.24-2.2h-4.84ZM135,15l-2.34-4.15h1.46l1.24,2.2h4.84l1.24-2.2h1.46L140.52,15H135ZM151.6,2.79L149.07,15H147.6L144.82,0.84h1.32L148.34,12l2.2-11.18h3.66v2H153V15h-1.17V2.79H151.6Zm11.91,0q-0.88,0-.88,2.93v4.39q0,2.93.88,2.93h6.74q0.88,0,.88-2.93V5.72q0-2.93-.88-2.93h-6.74ZM162.92,15q-1.46-.49-1.46-4.88V5.72q0-4.39,1.46-4.88h7.91q1.46,0.49,1.46,4.88v4.39q0,4.39-1.46,4.88h-7.91ZM175.81,0.84H177V15h-1.17V3.28l-1.46,2-0.59-1.46Zm7.91,11.56,2.64-4.73h1.46L183.72,15h-1.17l-4.1-7.34h1.46l2.64,4.73V0.84h1.17V12.4Zm6.74-5.46h5.86v2h-5.86v-2Zm7,6.1v2h-8.2V13h8.2Zm-8.2-10.25v-2h8.2v2h-8.2Zm17.46,0,2.7,10,3.22-12h1.46L210.32,15h-1.76L204.75,0.84h4.39l1.32,4.88H209l-0.79-2.93h-1.46Zm13,0L217,13h8.61L222.86,2.79h-3.11ZM216.18,15l-0.59-2,3.22-12.21h5L227,13l-0.59,2H216.18Zm22-14.16V12.56A2.57,2.57,0,0,1,235.22,15h-3.81a2.57,2.57,0,0,1-2.93-2.44V0.84h1.17V11.58q0,1.46,1.76,1.46h3.81Q237,13,237,11.58V2.79H234.7L233.46,5H232l2.34-4.15h3.81Z" transform="translate(-0.38 -0.84)" fill="#444"/>
+</svg>

src/components/languageSwitcher/languageSwitcher.intl.json

@@ -3,6 +3,7 @@
     "startTyping": "Start typing…",
     "translationProgress": "{progress} translated",
     "mayBeInaccurate": "May be inaccurate",
+    "weDoNotSupportThisLang": "Sorry, we do not support this language",
     "improveTranslates": "Improve Ely.by translation",
     "improveTranslatesDescription": "Ely.by’s localization is a community effort. If you want to see Ely.by translated into another language, we'd love your help. To apply read {articleLink}.",
     "improveTranslatesArticleLink": "this article"

src/components/languageSwitcher/languageSwitcher.scss

@@ -163,6 +163,36 @@ $languageListBorderStyle: 1px solid $languageListBorderColor;
     }
 }
 
+.emptyLanguagesListWrapper {
+    $transitionTime: .5s;
+
+    opacity: 0;
+    overflow: hidden;
+    transition: height $transitionTime;
+
+    &.emptyLanguagesListVisible {
+        opacity: 1;
+        transition: $transitionTime;
+    }
+}
+
+.emptyLanguagesList {
+    padding: 20px;
+    text-align: center;
+}
+
+.emptyLanguagesListCaption {
+    height: 20px;
+    max-width: 100%;
+    margin-bottom: 5px;
+}
+
+.emptyLanguagesListSubtitle {
+    font-family: $font-family-title;
+    color: #ccc;
+    font-size: 13px;
+}
+
 .improveTranslates {
     border: 1px solid #DEDEDE;
     background: #F3F1ED;